: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);
}
.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(320px, 1fr) auto auto auto !important;
  align-items: center !important;
  gap: 20px !important;
  min-height: 98px;
  padding: 14px 24px !important;
  overflow: hidden;
}
.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; }
}