@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --bg-dark: #0f172a; 
    --bg-card: rgba(30, 41, 59, 0.85); 
    --text-main: #f8fafc;
    --text-muted: #cbd5e1;
    --primary: #0ea5e9;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --border: rgba(255, 255, 255, 0.15);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body { 
    background: var(--bg-dark); color: var(--text-main); font-family: 'Inter', sans-serif; 
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    overflow-x: hidden; -webkit-font-smoothing: antialiased;
}

.text-muted { color: var(--text-muted) !important; }
h1, h2, h3, h4, h5, h6, p, span, label { color: var(--text-main); }
.text-primary { color: #38bdf8 !important; }

.card, .form-container, .menu-container, .main-card, .login-card, .container-fluid { 
    background: var(--bg-card) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); 
    border: 1px solid var(--border) !important; border-radius: 16px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5); 
}

.form-control, .form-select, input, textarea { 
    background: rgba(0,0,0,0.3) !important; border: 1px solid var(--border) !important; color: white !important; 
    border-radius: 10px; font-size: 16px !important; min-height: 48px; padding: 10px 15px;
}
.form-control:focus, .form-select:focus, textarea:focus { 
    border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.3) !important; background: rgba(0,0,0,0.5) !important;
}
::placeholder { color: #94a3b8 !important; opacity: 1; }

.btn { 
    border-radius: 10px; font-weight: 600; transition: transform 0.2s, filter 0.2s, background 0.2s; 
    min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: white !important; 
}
.btn:active { transform: scale(0.96); filter: brightness(1.2); }

.btn-primary { background: linear-gradient(135deg, #0ea5e9, #2563eb) !important; border: none !important; }
.btn-success { background: linear-gradient(135deg, #10b981, #059669) !important; border: none !important; }
.btn-warning { background: linear-gradient(135deg, #f59e0b, #d97706) !important; color: #121212 !important; border: none !important; }
.btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626) !important; border: none !important; }

.btn-gray, .btn-secondary, .btn-outline-secondary { 
    background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: #f8fafc !important; 
}

.table-responsive { -webkit-overflow-scrolling: touch; border-radius: 8px; }
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--border); margin-bottom: 0;}
.table td, .table th { color: #e2e8f0 !important; vertical-align: middle; }
.table-striped>tbody>tr:nth-of-type(odd)>* { --bs-table-bg-type: rgba(255,255,255,0.03); }
.table-hover>tbody>tr:hover>* { --bs-table-bg-state: rgba(14, 165, 233, 0.15); }

.zoom-img { cursor: zoom-in; transition: transform 0.2s; }
.zoom-img:hover { transform: scale(1.15); box-shadow: 0 4px 15px rgba(14, 165, 233, 0.5) !important; }

@media (max-width: 768px) {
    body { padding: 10px; }
    .card, .container-fluid, .form-container, .menu-container { padding: 15px !important; border-radius: 12px !important; }
    h1, h2 { font-size: 1.5rem !important; }
    h3, h4 { font-size: 1.2rem !important; }
    .table .btn-group { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
    .table .btn-sm { min-height: 40px; min-width: 40px; padding: 5px 10px; font-size: 1.1rem; }
    .d-flex.flex-wrap { flex-direction: column; align-items: stretch !important; }
    .d-flex.flex-wrap > * { width: 100%; margin-bottom: 10px; }
    .table thead { display: none; }
    .table tr { display: flex; flex-direction: column; margin-bottom: 15px; border: 1px solid var(--border); border-radius: 12px; padding: 10px; background: rgba(255,255,255,0.03); }
    .table td { display: flex; justify-content: space-between; align-items: center; text-align: right; padding: 10px 5px; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .table td:last-child { border-bottom: none; }
    .table td::before { content: attr(data-label); font-weight: bold; color: var(--primary); text-transform: uppercase; font-size: 0.75rem; }
}