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

:root {
  --bg:        #0a0f1e;
  --bg2:       #111827;
  --card:      rgba(255,255,255,0.05);
  --border:    rgba(255,255,255,0.1);
  --blue:      #3b82f6;
  --blue2:     #6366f1;
  --gold:      #f59e0b;
  --green:     #10b981;
  --red:       #ef4444;
  --orange:    #f97316;
  --txt:       #f9fafb;
  --txt2:      #9ca3af;
  --txt3:      #6b7280;
  --sidebar-w: 260px;
  --radius:    12px;
  --shadow:    0 8px 32px rgba(0,0,0,0.4);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:15px; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--txt); min-height:100vh; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:3px; }

/* ═══════════════════════════════════════
   LOGIN PAGE
═══════════════════════════════════════ */
.login-bg {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(ellipse at 20% 50%, rgba(59,130,246,0.15) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 20%, rgba(245,158,11,0.10) 0%, transparent 50%),
              var(--bg);
  padding:20px;
}
.login-card {
  background:rgba(255,255,255,0.06); border:1px solid var(--border);
  border-radius:20px; padding:48px 44px; width:100%; max-width:440px;
  backdrop-filter:blur(20px); box-shadow:var(--shadow);
  animation: fadeUp 0.6s ease both;
}
.login-logo { text-align:center; margin-bottom:8px; }
.login-logo .icon { font-size:2.8rem; }
.login-logo h1 { font-family:'Playfair Display',serif; font-size:1.8rem; color:var(--gold); }
.login-logo p  { color:var(--txt2); font-size:.85rem; margin-top:4px; }

.login-tabs { display:flex; background:rgba(0,0,0,0.3); border-radius:10px; padding:4px; margin:28px 0 24px; }
.login-tab  { flex:1; text-align:center; padding:10px; border-radius:8px; cursor:pointer;
              font-size:.88rem; font-weight:500; color:var(--txt2); transition:.25s; border:none; background:none; }
.login-tab.active { background:linear-gradient(135deg,var(--blue),var(--blue2)); color:#fff; box-shadow:0 4px 12px rgba(59,130,246,.4); }

.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:.8rem; font-weight:500; color:var(--txt2); margin-bottom:6px; text-transform:uppercase; letter-spacing:.05em; }
.form-control {
  width:100%; padding:12px 16px; background:rgba(255,255,255,.06); border:1px solid var(--border);
  border-radius:10px; color:var(--txt); font-size:.95rem; font-family:inherit;
  transition:.25s; outline:none;
}
.form-control:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(59,130,246,.2); background:rgba(255,255,255,.09); }

.btn { display:inline-flex; align-items:center; gap:8px; padding:12px 24px; border:none;
       border-radius:10px; font-family:inherit; font-size:.9rem; font-weight:600; cursor:pointer; transition:.25s; text-decoration:none; }
.btn-primary { background:linear-gradient(135deg,var(--blue),var(--blue2)); color:#fff; box-shadow:0 4px 15px rgba(59,130,246,.35); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(59,130,246,.5); }
.btn-gold  { background:linear-gradient(135deg,var(--gold),#d97706); color:#000; }
.btn-gold:hover { transform:translateY(-2px); }
.btn-danger { background:linear-gradient(135deg,var(--red),#dc2626); color:#fff; }
.btn-danger:hover { transform:translateY(-2px); }
.btn-success { background:linear-gradient(135deg,var(--green),#059669); color:#fff; }
.btn-sm   { padding:7px 14px; font-size:.8rem; }
.btn-block { width:100%; justify-content:center; }

.flash { padding:12px 16px; border-radius:10px; margin-bottom:20px; font-size:.88rem; font-weight:500; }
.flash-success { background:rgba(16,185,129,.15); border:1px solid rgba(16,185,129,.3); color:#6ee7b7; }
.flash-error   { background:rgba(239,68,68,.15);  border:1px solid rgba(239,68,68,.3);  color:#fca5a5; }
.flash-warning { background:rgba(245,158,11,.15); border:1px solid rgba(245,158,11,.3); color:#fcd34d; }

/* ═══════════════════════════════════════
   APP LAYOUT
═══════════════════════════════════════ */
.app-layout { display:flex; min-height:100vh; }

.sidebar {
  width:var(--sidebar-w); background:rgba(255,255,255,.04);
  border-right:1px solid var(--border); display:flex; flex-direction:column;
  position:fixed; top:0; left:0; height:100vh; overflow-y:auto; z-index:100;
  backdrop-filter:blur(10px);
}
.sidebar-brand { padding:24px 20px 20px; border-bottom:1px solid var(--border); }
.sidebar-brand .brand-name { font-family:'Playfair Display',serif; font-size:1.3rem; color:var(--gold); }
.sidebar-brand .brand-role { font-size:.72rem; color:var(--txt3); text-transform:uppercase; letter-spacing:.1em; margin-top:2px; }

.sidebar-nav { padding:16px 12px; flex:1; }
.nav-section-label { font-size:.68rem; color:var(--txt3); text-transform:uppercase; letter-spacing:.12em; font-weight:600; padding:12px 8px 6px; }
.nav-link {
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px;
  color:var(--txt2); text-decoration:none; font-size:.88rem; font-weight:500;
  transition:.2s; margin-bottom:2px;
}
.nav-link:hover  { background:rgba(255,255,255,.07); color:var(--txt); }
.nav-link.active { background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(99,102,241,.2)); color:var(--blue); border:1px solid rgba(59,130,246,.2); }
.nav-link .icon  { font-size:1rem; width:20px; text-align:center; }

.sidebar-footer { padding:16px 12px; border-top:1px solid var(--border); }
.sidebar-user   { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--blue2));
          display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; }
.user-info .name { font-size:.85rem; font-weight:600; }
.user-info .role { font-size:.72rem; color:var(--txt3); text-transform:capitalize; }

.main-content { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; }
.top-bar { background:rgba(255,255,255,.03); border-bottom:1px solid var(--border);
           padding:16px 28px; display:flex; align-items:center; justify-content:space-between;
           position:sticky; top:0; z-index:90; backdrop-filter:blur(10px); }
.top-bar h2  { font-size:1.15rem; font-weight:600; }
.top-bar .breadcrumb { font-size:.8rem; color:var(--txt3); margin-top:2px; }
.page-content { padding:28px; flex:1; animation: fadeIn .3s ease; }

/* ═══════════════════════════════════════
   CARDS & STATS
═══════════════════════════════════════ */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; margin-bottom:28px; }
.stat-card  { background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
              padding:22px; position:relative; overflow:hidden; transition:.25s; }
.stat-card:hover { transform:translateY(-3px); border-color:rgba(255,255,255,.2); }
.stat-card .stat-icon { font-size:2rem; margin-bottom:10px; }
.stat-card .stat-val  { font-size:2rem; font-weight:700; }
.stat-card .stat-lbl  { font-size:.8rem; color:var(--txt2); margin-top:4px; }
.stat-card .stat-glow { position:absolute; top:-30%; right:-10%; width:120px; height:120px; border-radius:50%; opacity:.12; filter:blur(30px); }
.stat-blue  .stat-glow { background:var(--blue); }
.stat-gold  .stat-glow { background:var(--gold); }
.stat-green .stat-glow { background:var(--green); }
.stat-red   .stat-glow { background:var(--red); }

.card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); }
.card-header { padding:18px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.card-header h3 { font-size:1rem; font-weight:600; }
.card-body   { padding:22px; }

/* ═══════════════════════════════════════
   TABLES
═══════════════════════════════════════ */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.875rem; }
thead th { padding:12px 16px; text-align:left; font-size:.75rem; font-weight:600; color:var(--txt3);
           text-transform:uppercase; letter-spacing:.07em; border-bottom:1px solid var(--border); }
tbody td { padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.05); vertical-align:middle; }
tbody tr:hover { background:rgba(255,255,255,.03); }
tbody tr:last-child td { border-bottom:none; }

/* ═══════════════════════════════════════
   BADGES
═══════════════════════════════════════ */
.badge { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; font-size:.75rem; font-weight:600; }
.badge-pending     { background:rgba(245,158,11,.15); color:#fcd34d; border:1px solid rgba(245,158,11,.3); }
.badge-filed       { background:rgba(59,130,246,.15);  color:#93c5fd; border:1px solid rgba(59,130,246,.3); }
.badge-acknowledged{ background:rgba(16,185,129,.15);  color:#6ee7b7; border:1px solid rgba(16,185,129,.3); }
.badge-active      { background:rgba(16,185,129,.15);  color:#6ee7b7; border:1px solid rgba(16,185,129,.3); }
.badge-inactive    { background:rgba(239,68,68,.15);   color:#fca5a5; border:1px solid rgba(239,68,68,.3); }
.badge-monthly     { background:rgba(99,102,241,.15);  color:#a5b4fc; }
.badge-quarterly   { background:rgba(245,158,11,.15);  color:#fcd34d; }
.badge-yearly      { background:rgba(16,185,129,.15);  color:#6ee7b7; }

/* ═══════════════════════════════════════
   FORMS
═══════════════════════════════════════ */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid.cols-3 { grid-template-columns:1fr 1fr 1fr; }
.col-span-2 { grid-column:span 2; }
select.form-control { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239ca3af' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
select.form-control option, select.form-control optgroup { background: var(--bg2); color: var(--txt); }
textarea.form-control { resize:vertical; min-height:80px; }
.form-actions { display:flex; gap:10px; align-items:center; margin-top:20px; flex-wrap:wrap; }

/* ═══════════════════════════════════════
   MODALS
═══════════════════════════════════════ */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
                  display:none; align-items:center; justify-content:center; z-index:200; padding:20px; }
.modal-backdrop.open { display:flex; }
.modal { background:var(--bg2); border:1px solid var(--border); border-radius:18px;
         width:100%; max-width:540px; animation:fadeUp .3s ease; }
.modal-header { padding:20px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.modal-header h3 { font-size:1rem; font-weight:600; }
.modal-close  { background:none; border:none; color:var(--txt3); cursor:pointer; font-size:1.2rem; padding:4px; }
.modal-body   { padding:24px; }
.modal-footer { padding:16px 24px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end; }

/* ═══════════════════════════════════════
   FILE UPLOAD
═══════════════════════════════════════ */
.drop-zone { border:2px dashed var(--border); border-radius:var(--radius); padding:40px;
             text-align:center; cursor:pointer; transition:.25s; }
.drop-zone:hover,.drop-zone.drag-over { border-color:var(--blue); background:rgba(59,130,246,.05); }
.drop-zone .dz-icon { font-size:2.5rem; margin-bottom:10px; }
.drop-zone p { color:var(--txt2); font-size:.9rem; }
.drop-zone input[type=file] { display:none; }
.file-list { margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.file-item { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.04);
             border:1px solid var(--border); border-radius:8px; padding:10px 14px; font-size:.85rem; }
.file-item .file-icon { font-size:1.1rem; }
.file-item .file-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-item .file-date { color:var(--txt3); font-size:.78rem; white-space:nowrap; }

/* ═══════════════════════════════════════
   TREE (Categories)
═══════════════════════════════════════ */
.cat-tree { display:flex; flex-direction:column; gap:8px; }
.cat-parent { background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.cat-parent-row { display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.05); }
.cat-parent-row .cat-name { flex:1; font-weight:600; }
.cat-children  { padding:8px 16px 12px 28px; display:flex; flex-direction:column; gap:6px; }
.cat-child-row { display:flex; align-items:center; gap:10px; padding:8px 12px; background:rgba(255,255,255,.03); border-radius:8px; }
.cat-child-row .cat-name { flex:1; font-size:.88rem; }

/* ═══════════════════════════════════════
   UTILITIES
═══════════════════════════════════════ */
.text-muted  { color:var(--txt2); }
.text-small  { font-size:.8rem; }
.text-gold   { color:var(--gold); }
.text-blue   { color:var(--blue); }
.text-green  { color:var(--green); }
.text-red    { color:var(--red); }
.fw-600      { font-weight:600; }
.mt-4        { margin-top:4px; }
.mt-8        { margin-top:8px; }
.mt-16       { margin-top:16px; }
.mt-24       { margin-top:24px; }
.mb-16       { margin-bottom:16px; }
.mb-20       { margin-bottom:20px; }
.flex        { display:flex; }
.items-center{ align-items:center; }
.gap-8       { gap:8px; }
.gap-12      { gap:12px; }
.justify-between { justify-content:space-between; }
.empty-state { text-align:center; padding:60px 20px; color:var(--txt3); }
.empty-state .icon { font-size:3rem; margin-bottom:12px; }
.empty-state p     { font-size:.9rem; }
.divider { height:1px; background:var(--border); margin:20px 0; }

/* ═══════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════ */
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes fadeUp  { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse   { 0%,100%{opacity:1} 50%{opacity:.6} }

/* ═══════════════════════════════════════
   TOAST
═══════════════════════════════════════ */
#toast-container { position:fixed; bottom:24px; right:24px; z-index:999; display:flex; flex-direction:column; gap:10px; }
.toast { padding:14px 20px; border-radius:12px; font-size:.88rem; font-weight:500; max-width:340px;
         box-shadow:0 8px 24px rgba(0,0,0,.4); animation:fadeUp .3s ease; backdrop-filter:blur(10px); }
.toast-success { background:rgba(16,185,129,.9);  color:#fff; }
.toast-error   { background:rgba(239,68,68,.9);   color:#fff; }
.toast-warning { background:rgba(245,158,11,.9);  color:#000; }

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media(max-width:768px) {
  .sidebar { transform:translateX(-100%); transition:.3s; }
  .sidebar.open { transform:translateX(0); }
  .main-content { margin-left:0; }
  .form-grid { grid-template-columns:1fr; }
  .form-grid.cols-3 { grid-template-columns:1fr; }
  .col-span-2 { grid-column:span 1; }
  .stats-grid { grid-template-columns:1fr 1fr; }
}