:root{
  --modern-bg:#f4f7fb;
  --modern-surface:#ffffff;
  --modern-surface-2:#f8fbff;
  --modern-border:#dbe6f3;
  --modern-text:#10233f;
  --modern-muted:#64748b;
  --modern-primary:#1d4ed8;
  --modern-primary-2:#0f172a;
  --modern-accent:#f59e0b;
  --modern-success:#059669;
  --modern-danger:#dc2626;
  --modern-shadow:0 18px 45px rgba(15,23,42,.08);
  --modern-shadow-lg:0 28px 80px rgba(15,23,42,.16);
  --modern-radius:24px;
}

html,body{
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.09), transparent 22%),
    radial-gradient(circle at top right, rgba(245,158,11,.08), transparent 18%),
    linear-gradient(180deg,#f7faff 0%,#f3f6fb 55%,#eef3f9 100%);
  color:var(--modern-text);
}
body{
  min-height:100vh;
}

/* login */
#login-screen{
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:32px;
  overflow:hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(29,78,216,.15), transparent 20%),
    radial-gradient(circle at 85% 15%, rgba(245,158,11,.12), transparent 16%),
    radial-gradient(circle at 50% 100%, rgba(15,23,42,.16), transparent 28%),
    linear-gradient(135deg, #081224 0%, #0f2745 45%, #173961 100%);
}
#login-screen::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(transparent 0 95%, rgba(255,255,255,.04) 95% 100%),
    linear-gradient(90deg, transparent 0 95%, rgba(255,255,255,.04) 95% 100%);
  background-size:36px 36px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.2));
  pointer-events:none;
}
.login-grid{display:none !important;}
.orb{
  position:absolute;
  border-radius:999px;
  filter:blur(20px);
  opacity:.7;
  pointer-events:none;
}
.orb1{width:280px;height:280px;left:-40px;top:-40px;background:rgba(37,99,235,.35);}
.orb2{width:240px;height:240px;right:-20px;bottom:-10px;background:rgba(245,158,11,.28);}
.login-card{
  position:relative;
  width:min(460px,100%);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:var(--modern-shadow-lg);
  border-radius:32px;
  overflow:hidden;
}
.login-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:32px;
  padding:1px;
  background:linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,255,255,0), rgba(29,78,216,.22));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}
.login-header{
  padding:34px 34px 22px;
  text-align:center;
  background:linear-gradient(180deg, rgba(248,251,255,.95), rgba(255,255,255,.65));
  border-bottom:1px solid rgba(219,230,243,.8);
}
.login-logo{
  width:86px;
  height:86px;
  margin:0 auto 18px;
  border-radius:26px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#fff,#edf4ff);
  box-shadow:0 12px 30px rgba(29,78,216,.14);
}
.login-logo img{width:62px;height:62px;object-fit:contain;}
.login-header .city:first-of-type{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(15,23,42,.06);
  color:#334155;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.login-header .city:first-of-type::before{
  content:"●";
  color:var(--modern-accent);
  font-size:10px;
}
.login-header .city:nth-of-type(2){
  margin-top:12px !important;
  color:var(--modern-primary) !important;
  letter-spacing:.18em !important;
  text-transform:uppercase;
}
.login-header h2{
  margin:12px 0 0;
  font-size:28px;
  line-height:1.15;
  color:var(--modern-primary-2);
}
.login-body{padding:26px 34px 34px;}
.form-group{margin-bottom:16px;}
.form-label{
  display:block;
  margin-bottom:8px;
  font-size:13px;
  font-weight:700;
  color:#334155;
}
.form-input{
  width:100%;
  min-height:52px;
  border-radius:16px;
  border:1px solid var(--modern-border);
  background:#fff;
  padding:0 16px;
  font-size:15px;
  color:var(--modern-text);
  box-shadow:0 6px 14px rgba(15,23,42,.03) inset;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.form-input:focus{
  outline:none;
  border-color:rgba(29,78,216,.6);
  box-shadow:0 0 0 4px rgba(29,78,216,.12);
}
.btn-login{
  width:100%;
  min-height:54px;
  border:0;
  border-radius:18px;
  background:linear-gradient(135deg, #1d4ed8 0%, #2563eb 55%, #3b82f6 100%);
  color:#fff;
  font-weight:800;
  font-size:15px;
  letter-spacing:.01em;
  box-shadow:0 16px 36px rgba(37,99,235,.26);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-login:hover{transform:translateY(-1px);box-shadow:0 22px 46px rgba(37,99,235,.32);filter:saturate(1.03);}

/* app shell */
#app{
  background:transparent;
}
#app.visible{
  display:block;
}
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:grid;
  grid-template-columns:auto 1px minmax(220px,1.2fr) auto auto auto;
  gap:18px;
  align-items:center;
  padding:16px 24px;
  margin:18px 18px 0;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(14px);
  border:1px solid rgba(219,230,243,.92);
  border-radius:28px;
  box-shadow:var(--modern-shadow);
}
/* Hide hamburger on desktop grid layout */
.hamburger { display: none !important; }
.topbar-logo{
  width:58px;
  height:58px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#ffffff,#edf4ff);
  box-shadow:0 12px 30px rgba(29,78,216,.10);
  overflow:hidden;
}
.topbar-logo img{width:40px;height:40px;object-fit:contain;}
.topbar-divider{width:1px;height:42px;background:linear-gradient(180deg,transparent,#dbe6f3,transparent);}
.topbar-title{min-width:0;}
.topbar-org{
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--modern-primary);
  margin-bottom:4px;
}
.topbar-sub{
  color:var(--modern-muted);
  font-size:14px;
  font-weight:600;
}
.topbar-lang.lang-switch,
.login-header .lang-switch{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px;
  border-radius:999px;
  background:rgba(15,23,42,.05);
  border:1px solid rgba(219,230,243,.9);
}
.lang-btn{
  min-width:42px;
  height:38px;
  border:0;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  letter-spacing:.04em;
  color:#475569;
  background:transparent;
  transition:all .16s ease;
}
.lang-btn.active{
  background:linear-gradient(135deg, #1d4ed8, #2563eb);
  color:#fff;
  box-shadow:0 10px 18px rgba(37,99,235,.22);
}
.tb-user{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  padding:8px 14px 8px 8px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(248,251,255,.9), rgba(243,247,252,.9));
  border:1px solid rgba(219,230,243,.9);
}
.tb-avatar{
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:800;
  box-shadow:0 12px 24px rgba(15,23,42,.12);
}
.tb-name{font-size:14px;font-weight:800;color:var(--modern-primary-2);}
.tb-role{font-size:12px;color:var(--modern-muted);font-weight:700;}
.btn-logout{
  height:44px;
  padding:0 16px;
  border-radius:14px;
  border:1px solid rgba(220,38,38,.18);
  background:linear-gradient(180deg,#fff,#fff7f7);
  color:#b91c1c;
  font-weight:800;
  box-shadow:0 8px 18px rgba(220,38,38,.08);
}
.btn-logout:hover{background:#fff1f2;}

.app-body{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:22px;
  padding:18px;
  align-items:start;
}
.sidebar{
  position:sticky;
  top:108px;
  padding:18px;
  border-radius:30px;
  background:linear-gradient(180deg,#0f1f37 0%, #122844 55%, #10233f 100%);
  color:#e5eefb;
  box-shadow:var(--modern-shadow-lg);
  overflow:hidden;
}
.sidebar::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:160px;
  background:radial-gradient(circle at top left, rgba(59,130,246,.32), transparent 55%), radial-gradient(circle at top right, rgba(245,158,11,.22), transparent 38%);
  pointer-events:none;
}
.sidebar > *{position:relative;z-index:1;}
.sb-section + .sb-section{margin-top:8px;}
.sb-section-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(226,232,240,.62);
  margin:12px 12px 10px;
}
.section-sep{height:1px;background:linear-gradient(90deg,transparent,rgba(219,230,243,.14),transparent) !important;margin:14px 0 !important;}
.nav-item{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:54px;
  margin:6px 0;
  padding:0 14px;
  border-radius:18px;
  color:#d8e5f5;
  font-weight:700;
  transition:background .18s ease, transform .18s ease, color .18s ease, box-shadow .18s ease;
}
.nav-item:hover{
  transform:translateX(2px);
  background:rgba(255,255,255,.06);
}
.nav-item.active{
  background:linear-gradient(135deg, rgba(37,99,235,.95), rgba(29,78,216,.96));
  color:#fff;
  box-shadow:0 16px 32px rgba(29,78,216,.30);
}
.nav-icon{
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.08);
  font-size:18px;
  flex-shrink:0;
}
.nav-item.active .nav-icon{background:rgba(255,255,255,.16);}
.nav-badge,
.folder-count{
  margin-left:auto;
  min-width:28px;
  height:28px;
  padding:0 9px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:12px;
  font-weight:800;
}

.main-content{
  min-width:0;
}
.view{
  background:transparent;
}
#view-dashboard{
  display:block;
}
.page-header{
  margin-bottom:18px;
  padding:8px 2px 2px;
}
.page-title{
  font-size:30px;
  line-height:1.08;
  font-weight:900;
  letter-spacing:-.03em;
  color:#0f172a;
}
.page-subtitle{
  margin-top:8px;
  font-size:15px;
  color:var(--modern-muted);
  font-weight:600;
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:24px;
}
.stat-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  min-height:132px;
  padding:20px;
  border-radius:26px;
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
  border:1px solid rgba(219,230,243,.92);
  box-shadow:var(--modern-shadow);
  overflow:hidden;
}
.stat-card::before{
  content:"";
  position:absolute;
  inset:auto -30px -30px auto;
  width:120px;
  height:120px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(37,99,235,.08), transparent 65%);
}
.stat-icon-wrap{
  width:60px;
  height:60px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:26px;
  box-shadow:0 12px 24px rgba(15,23,42,.10);
}
.stat-icon-wrap.blue{background:linear-gradient(135deg,#dbeafe,#bfdbfe);}
.stat-icon-wrap.teal{background:linear-gradient(135deg,#cffafe,#a5f3fc);}
.stat-icon-wrap.green{background:linear-gradient(135deg,#dcfce7,#bbf7d0);}
.stat-icon-wrap.gold{background:linear-gradient(135deg,#fef3c7,#fde68a);}
.stat-value{font-size:34px;font-weight:900;line-height:1;color:#0f172a;margin-bottom:6px;}
.stat-label{font-size:13px;font-weight:700;color:var(--modern-muted);}

.cap-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.cap-card,
.card{
  border-radius:26px;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  border:1px solid rgba(219,230,243,.92);
  box-shadow:var(--modern-shadow);
}
.cap-card{
  padding:20px;
  min-height:182px;
}
.cap-icon{
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:22px;
  background:linear-gradient(135deg,#eff6ff,#dbeafe);
  margin-bottom:14px;
}
.cap-title{font-size:15px;font-weight:800;color:#0f172a;margin-bottom:8px;}
.cap-desc{font-size:13px;line-height:1.65;color:var(--modern-muted);}
.dash-grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(360px,1fr);
  gap:18px;
  margin-top:18px;
}
.card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 20px 14px;
  border-bottom:1px solid rgba(219,230,243,.82);
}
.card-title{font-size:16px;font-weight:800;color:#0f172a;}
.card-body{padding:18px 20px 20px;}
.doc-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.doc-table thead th{
  position:sticky;
  top:0;
  background:#f8fbff;
  color:#64748b;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:14px 16px;
  border-bottom:1px solid rgba(219,230,243,.82);
}
.doc-table tbody td{
  padding:16px;
  font-size:14px;
  border-bottom:1px solid rgba(236,242,248,.95);
  color:#1e293b;
}
.doc-table tbody tr:hover td{background:#fbfdff;}
.doc-name{font-weight:800;color:#0f172a;}
.access-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
}
.access-badge.private{background:#fff1f2;color:#be123c;border:1px solid rgba(244,63,94,.15);}
.access-badge.shared{background:#ecfdf5;color:#047857;border:1px solid rgba(5,150,105,.15);}
.notif-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(219,230,243,.82);
  background:linear-gradient(180deg,#ffffff,#f9fbff);
  box-shadow:0 8px 18px rgba(15,23,42,.04);
}
.notif-item + .notif-item{margin-top:10px;}
.notif-dot{width:12px;height:12px;border-radius:999px;background:linear-gradient(135deg,#2563eb,#60a5fa);margin-top:6px;box-shadow:0 0 0 4px rgba(37,99,235,.10);}
.notif-text{font-size:14px;font-weight:700;color:#0f172a;line-height:1.5;white-space:pre-wrap;}
.notif-time{font-size:12px;color:var(--modern-muted);margin-top:5px;}

.btn,.btn-secondary,.btn-gold{
  min-height:40px;
  border-radius:14px;
  font-weight:800;
  box-shadow:0 10px 22px rgba(15,23,42,.06);
}
.btn-secondary{
  background:#fff;
  border:1px solid rgba(219,230,243,.9);
  color:#334155;
}
.btn-gold{
  background:linear-gradient(135deg,#f59e0b,#fbbf24);
  color:#fff;
  border:0;
}
#toast{
  right:22px;
  bottom:22px;
  background:rgba(15,23,42,.96);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--modern-shadow-lg);
  border-radius:18px;
}

@media (max-width: 1280px){
  .stats-grid,.cap-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dash-grid{grid-template-columns:1fr;}
}
@media (max-width: 1080px){
  .app-body{grid-template-columns:1fr;}
  .sidebar{position:relative;top:auto;}
  .topbar{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      'logo title logout'
      'divider divider divider'
      'lang user user';
  }
  .topbar-logo{grid-area:logo;}
  .topbar-divider{grid-area:divider;width:100%;height:1px;}
  .topbar-title{grid-area:title;}
  .topbar-lang{grid-area:lang;justify-self:start;}
  .tb-user{grid-area:user;justify-self:end;}
  .btn-logout{grid-area:logout;justify-self:end;}
}
@media (max-width: 760px){
  #login-screen{padding:20px;}
  .login-card{border-radius:26px;}
  .login-header,.login-body{padding-left:22px;padding-right:22px;}
  .topbar{margin:12px 12px 0;padding:14px;grid-template-columns:1fr;gap:12px;}
  .topbar-divider{display:none;}
  .topbar-logo{width:52px;height:52px;}
  .tb-user{justify-self:stretch;}
  .btn-logout{width:100%;}
  .app-body{padding:12px;gap:14px;}
  .sidebar{padding:14px;border-radius:24px;}
  .stats-grid,.cap-grid{grid-template-columns:1fr;}
  .page-title{font-size:24px;}
}


/* ===== TOPBAR ALIGNMENT FIX ===== */
.topbar{
  grid-template-columns: 88px minmax(220px, 1fr) minmax(0,280px) auto auto auto !important;
  align-items: center !important;
  gap: 20px !important;
  min-height: 98px;
  padding: 14px 24px !important;
}
.topbar-logo{
  width: 72px !important;
  height: 72px !important;
  margin: 0 !important;
  align-self: center !important;
  justify-self: start !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: 22px !important;
}
.topbar-logo img{
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  display: block;
}
.topbar-divider{display:none !important;}
.topbar-title{
  min-width: 0;
  min-height: 72px;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-self: center !important;
  gap: 6px;
  padding: 0 !important;
  margin: 0 !important;
}
.topbar-org{
  margin: 0 !important;
  line-height: 1.1 !important;
  font-size: 16px !important;
  letter-spacing: .08em !important;
}
.topbar-sub{
  margin: 0 !important;
  line-height: 1.15 !important;
  font-size: 13px !important;
  letter-spacing: .14em !important;
  display: block !important;
}
.topbar::before,
.topbar::after,
.topbar-title::before,
.topbar-title::after{
  display:none !important;
  content:none !important;
}
.topbar-lang,
.tb-user,
.btn-logout{align-self:center !important;}

/* ===== VIEW SWITCHING FIX (SAFE) ===== */
.main-content{
  min-width:0;
  position:relative;
}
.main-content > .view{
  visibility:hidden;
  position:absolute;
  inset:0;
  pointer-events:none;
  width:100%;
  min-width:0;
}
.main-content > .view.active{
  visibility:visible;
  position:relative;
  inset:auto;
  pointer-events:auto;
}

@media (max-width: 1080px){
  .topbar{
    grid-template-columns: 72px minmax(0,1fr) auto !important;
    grid-template-areas:
      "logo title logout"
      "lang user user" !important;
    min-height: auto;
  }
  .topbar-logo{ grid-area: logo; }
  .topbar-title{ grid-area: title; min-height: 60px; }
  .topbar-lang{ grid-area: lang; justify-self: start; }
  .tb-user{ grid-area: user; justify-self: end; }
  .btn-logout{ grid-area: logout; justify-self: end; }
}

/* ===== STATUS PILLS ===== */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px; white-space: nowrap;
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.pill-draft    { background: #f1f5f9; color: #64748b; }
.pill-draft::before { background: #94a3b8; }
.pill-submitted,.pill-dërguar,.pill-derguar { background: #eff6ff; color: #1d4ed8; }
.pill-submitted::before,.pill-dërguar::before,.pill-derguar::before { background: #3b82f6; }
.pill-approved,.pill-aprovuar { background: #f0fdf4; color: #15803d; }
.pill-approved::before,.pill-aprovuar::before { background: #22c55e; }
.pill-rejected,.pill-refuzuar { background: #fff1f2; color: #be123c; }
.pill-rejected::before,.pill-refuzuar::before { background: #f43f5e; }
.pill-archived,.pill-arkivuar { background: #faf5ff; color: #7c3aed; }
.pill-archived::before,.pill-arkivuar::before { background: #a78bfa; }

/* ===== FILTER CHIPS ===== */
.filter-chips {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; align-items: center;
}
.filter-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 999px;
  border: 1.5px solid rgba(219,230,243,.9);
  background: #fff; color: #475569;
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.filter-chip:hover { border-color: #1d4ed8; color: #1d4ed8; background: #eff6ff; }
.filter-chip.active { background: #1d4ed8; color: #fff; border-color: #1d4ed8; box-shadow: 0 4px 12px rgba(29,78,216,.22); }
.filter-chip .chip-count {
  background: rgba(255,255,255,.25); color: inherit;
  font-size: 10px; font-weight: 800;
  padding: 1px 6px; border-radius: 999px;
  min-width: 20px; text-align: center;
}
.filter-chip:not(.active) .chip-count { background: rgba(100,116,139,.10); }

/* ===== TOPBAR SEARCH ===== */
.topbar-search {
  position: relative; flex: 1; max-width: 340px;
}
.topbar-search input {
  width: 100%; height: 40px;
  padding: 0 14px 0 38px;
  border: 1.5px solid rgba(219,230,243,.9);
  border-radius: 12px; background: rgba(255,255,255,.9);
  font-size: 13px; font-family: var(--font); color: var(--modern-text);
  outline: none; transition: all .18s;
}
.topbar-search input:focus { border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(29,78,216,.10); }
.topbar-search svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; opacity: .45; pointer-events: none;
}

/* ===== NOTIFICATION ITEMS IMPROVED ===== */
.notif-item-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.notif-item.unread { background: linear-gradient(180deg, #eff6ff, #f8fbff); border-color: rgba(29,78,216,.15); }

/* ===== AUDIT LOG ===== */
.audit-filters { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.audit-filters input, .audit-filters select {
  height: 38px; border-radius: 10px; border: 1.5px solid rgba(219,230,243,.9);
  background: #fff; font-size: 13px; padding: 0 12px; outline: none;
  min-width: 160px; font-family: var(--font); color: var(--modern-text);
}
.audit-filters input:focus, .audit-filters select:focus { border-color: #1d4ed8; }
.audit-action {
  font-family: var(--font-mono); font-size: 11px;
  background: #f1f5f9; color: #475569;
  padding: 2px 8px; border-radius: 5px;
}
.audit-result-ok { color: #15803d; font-weight: 700; }
.audit-result-fail { color: #be123c; font-weight: 700; }

/* ===== DOCUMENT TABLE IMPROVEMENTS ===== */
.doc-num {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: #0f172a; letter-spacing: -.2px;
}
.doc-subject { font-size: 12px; color: #64748b; margin-top: 2px; }
.doc-actions { display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.doc-table tbody tr:hover .doc-actions { opacity: 1; }

/* ===== ACTIONS BAR ===== */
.actions-bar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.search-box {
  height: 40px; border-radius: 12px; flex: 1; min-width: 200px; max-width: 320px;
  border: 1.5px solid rgba(219,230,243,.9); background: #fff;
  padding: 0 14px; font-size: 13px; font-family: var(--font);
  outline: none; transition: all .18s;
}
.search-box:focus { border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(29,78,216,.10); }

/* ===== MOBILE RESPONSIVE — 768px ===== */
@media (max-width: 768px) {
  .app-body { display: block !important; padding: 0 !important; }

  /* Sidebar: off-canvas drawer (controlled by .open class via hamburger) */
  .sidebar {
    position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important;
    right: auto !important; width: var(--sb-w) !important; max-height: none !important;
    z-index: 500 !important;
    transform: translateX(-100%); transition: transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow: none !important; border-radius: 0 !important;
    flex-direction: column !important; overflow-x: visible !important; overflow-y: auto !important;
    padding: 16px 10px 8px !important;
  }
  .sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 8px 0 30px rgba(0,0,0,.3) !important;
  }
  .sidebar > * { display: block !important; }
  .sidebar .sb-section-label { font-size: 9.5px !important; }
  .nav-item {
    flex-direction: row !important; min-height: 40px !important;
    padding: 9px 10px !important; font-size: 13px !important;
    gap: 10px !important; border-radius: 10px !important;
  }
  .nav-item > span:not(.nav-icon):not(.nav-badge) {
    display: inline !important; font-size: 13px !important;
    white-space: normal !important; max-width: none !important;
    overflow: visible !important;
  }
  .nav-icon { width: 22px !important; height: auto !important; font-size: 15px !important; }

  .stats-grid, .cap-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .dash-grid { grid-template-columns: 1fr !important; }

  /* Show hamburger on mobile */
  .hamburger { display: flex !important; align-items: center; justify-content: center; color: var(--navy) !important; }

  .topbar {
    display: flex !important; flex-wrap: wrap !important;
    grid-template-columns: none !important;
    min-height: auto !important;
    padding: 8px 10px !important; height: auto !important;
    gap: 6px !important;
    margin: 8px 8px 0 !important; border-radius: 16px !important;
    justify-content: space-between !important; align-items: center !important;
  }
  .topbar-divider { display: none !important; }
  .topbar-title { display: none !important; }
  .topbar-logo { order: 1 !important; width: 36px !important; height: 36px !important; border-radius: 10px !important; flex-shrink: 0 !important; }
  .topbar-logo img { width: 28px !important; height: 28px !important; }
  .hamburger { order: 2 !important; margin: 0 auto !important; }
  .topbar-lang { order: 3 !important; }
  .topbar-lang .lang-btn { padding: 3px 8px !important; font-size: 10px !important; }
  .topbar-search { order: 10 !important; flex: 1 !important; max-width: none !important; min-width: 0 !important; flex-basis: 100% !important; }
  .topbar-search input { height: 38px !important; font-size: 13px !important; }
  .tb-user { display: none !important; }
  .btn-logout { display: none !important; }

  /* Capability cards: single column on mobile */
  .cap-grid { grid-template-columns: 1fr !important; }

  .doc-table thead th:nth-child(2),
  .doc-table tbody td:nth-child(2),
  .doc-table thead th:nth-child(3),
  .doc-table tbody td:nth-child(3) { display: none; }
  .doc-actions { opacity: 1 !important; }
}

/* ===== MOBILE RESPONSIVE — 430px ===== */
@media (max-width: 430px) {
  .stat-card, .cap-card, .card { border-radius: 14px !important; }
  .stats-grid, .cap-grid { grid-template-columns: 1fr !important; }
  .topbar {
    gap: 6px !important; padding: 0 8px !important;
  }
  .page-title { font-size: 16px !important; }
  .page-subtitle { font-size: 11px !important; }
  .doc-table thead th:nth-child(4), .doc-table tbody td:nth-child(4),
  .doc-table thead th:nth-child(5), .doc-table tbody td:nth-child(5) { display: none; }
}