:root{
  --vx-sidebar:272px;
  --vx-bg:#f5f7fa;
  --vx-panel:#ffffff;
  --vx-panel-soft:#f8fafc;
  --vx-border:#e4e9ef;
  --vx-border-strong:#d8e0e8;
  --vx-text:#132238;
  --vx-muted:#6d7d8f;
  --vx-subtle:#94a1b1;
  --vx-primary:#0b3855;
  --vx-primary-strong:#08253b;
  --vx-accent:#1594a8;
  --vx-accent-soft:#e9f7f8;
  --vx-danger:#dc485b;
  --vx-shadow:0 10px 32px rgba(16,37,58,.055);
  --vx-shadow-hover:0 16px 42px rgba(16,37,58,.085);
  --vx-radius:18px;
  --vx-radius-sm:12px;
}

.dark{
  --vx-bg:#0b1220;
  --vx-panel:#111b2a;
  --vx-panel-soft:#152235;
  --vx-border:#243247;
  --vx-border-strong:#304058;
  --vx-text:#e7edf5;
  --vx-muted:#99a9bb;
  --vx-subtle:#74849a;
  --vx-primary:#dcecf3;
  --vx-primary-strong:#ffffff;
  --vx-accent:#37bbc4;
  --vx-accent-soft:rgba(55,187,196,.12);
  --vx-danger:#fb7185;
  --vx-shadow:0 12px 34px rgba(0,0,0,.18);
  --vx-shadow-hover:0 16px 42px rgba(0,0,0,.24);
}

*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
html{background:var(--vx-bg)}
body.admin-body{background:var(--vx-bg);color:var(--vx-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{text-decoration:none}
button,input,select,textarea{font:inherit}

/* Sidebar */
.admin-sidebar{
  position:fixed;inset:0 auto 0 0;width:var(--vx-sidebar);height:100vh;z-index:50;
  display:flex;flex-direction:column;background:var(--vx-panel);border-right:1px solid var(--vx-border);
  transform:translateX(0);transition:transform .22s ease,background .2s ease,border-color .2s ease;
}
.sidebar-brand{position:relative;height:84px;display:flex;align-items:center;gap:12px;padding:0 16px 0 22px;border-bottom:1px solid var(--vx-border);flex:0 0 auto}
.brand-logo-wrap{width:44px;height:44px;border:1px solid var(--vx-border);border-radius:14px;background:#fff;display:grid;place-items:center;overflow:hidden;box-shadow:0 4px 14px rgba(16,37,58,.06)}
.brand-logo{width:40px;height:40px;object-fit:contain;display:block}
.brand-copy{min-width:0;flex:1}
.brand-name{font-size:14px;font-weight:800;letter-spacing:.01em;color:var(--vx-text);white-space:nowrap}
.brand-subtitle{margin-top:2px;font-size:11px;font-weight:600;color:var(--vx-subtle);letter-spacing:.04em}

.sidebar-toggle-button{width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center;border:1px solid var(--vx-border);border-radius:11px;background:var(--vx-panel);color:var(--vx-muted);cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease}
.sidebar-toggle-button:hover{background:var(--vx-panel-soft);border-color:var(--vx-border-strong);color:var(--vx-text);box-shadow:0 4px 14px rgba(16,37,58,.06)}
.sidebar-toggle-icon{width:18px;height:18px}
.desktop-sidebar-toggle{display:grid}
.sidebar-scroll{flex:1;min-height:0;overflow-y:auto;padding:20px 16px 18px;scrollbar-width:thin;scrollbar-color:var(--vx-border) transparent}
.sidebar-section-label{padding:0 10px 8px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--vx-subtle)}
.sidebar-section-spaced{margin-top:24px}
.sidebar-nav{display:flex;flex-direction:column;gap:4px}
.navlink{position:relative;display:flex;align-items:center;gap:11px;min-height:44px;padding:10px 12px;border-radius:12px;color:var(--vx-muted);font-size:13px;font-weight:650;transition:background .16s ease,color .16s ease,transform .16s ease}
.navlink:hover{background:var(--vx-panel-soft);color:var(--vx-text)}
.navlink.is-active{background:var(--vx-accent-soft);color:var(--vx-primary-strong);font-weight:750}
.navlink.is-active .nav-icon{color:var(--vx-accent)}
.nav-icon{width:19px;height:19px;flex:0 0 auto;color:currentColor}
.nav-label{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-active-dot{position:absolute;right:10px;width:5px;height:5px;border-radius:999px;background:var(--vx-accent)}
.navlink-danger{margin-top:6px;color:var(--vx-danger)}
.navlink-danger:hover{background:rgba(220,72,91,.08);color:var(--vx-danger)}
.sidebar-footer{flex:0 0 auto;padding:14px 16px 16px;border-top:1px solid var(--vx-border);background:var(--vx-panel)}
.sidebar-user-card{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;color:var(--vx-text);transition:background .16s ease}
.sidebar-user-card:hover{background:var(--vx-panel-soft)}
.sidebar-avatar,.topbar-avatar{display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#0b3855,#1594a8);color:#fff;font-weight:800;box-shadow:0 6px 16px rgba(11,56,85,.18)}
.sidebar-avatar{width:38px;height:38px;font-size:13px;flex:0 0 auto}
.sidebar-user-copy{display:flex;min-width:0;flex:1;flex-direction:column}
.sidebar-user-copy strong{font-size:12.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-copy small{margin-top:2px;font-size:10.5px;color:var(--vx-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-chevron{width:15px;height:15px;color:var(--vx-subtle);flex:0 0 auto}

/* Shell + topbar */
.admin-shell{min-height:100vh;padding-left:var(--vx-sidebar)}
.admin-topbar{position:sticky;top:0;z-index:30;height:84px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 30px;background:color-mix(in srgb,var(--vx-panel) 94%,transparent);border-bottom:1px solid var(--vx-border);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.topbar-left,.topbar-actions,.topbar-profile{display:flex;align-items:center}
.topbar-left{gap:14px;min-width:0}
.page-heading{min-width:0}
.page-heading h1{margin:0;color:var(--vx-text);font-size:20px;font-weight:800;line-height:1.25;letter-spacing:-.015em}
.page-heading p{margin:4px 0 0;font-size:11.5px;font-weight:550;color:var(--vx-subtle)}
.topbar-actions{gap:12px}
.topbar-profile{gap:10px}
.topbar-profile-copy{display:flex;flex-direction:column;text-align:right}
.topbar-profile-copy strong{font-size:12.5px;line-height:1.3;color:var(--vx-text)}
.topbar-profile-copy span{margin-top:2px;font-size:10.5px;color:var(--vx-subtle)}
.topbar-avatar{width:39px;height:39px;font-size:13px}
.topbar-divider{width:1px;height:28px;background:var(--vx-border);margin:0 2px}
.icon-button,.theme-button{border:1px solid var(--vx-border);background:var(--vx-panel);color:var(--vx-muted);cursor:pointer;transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease}
.icon-button:hover,.theme-button:hover{border-color:var(--vx-border-strong);background:var(--vx-panel-soft);color:var(--vx-text);box-shadow:0 4px 14px rgba(16,37,58,.05)}
.icon-button{width:40px;height:40px;border-radius:12px;display:grid;place-items:center}
.theme-button{height:40px;border-radius:12px;padding:0 13px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700}
.topbar-icon{width:18px;height:18px}
.mobile-menu-button{display:none}

/* Main workspace */
.admin-main{padding:28px 30px 40px}
.admin-workspace{width:100%;max-width:1580px;margin:0 auto}
.flash-message{margin-bottom:20px;padding:13px 15px;border-radius:13px;border:1px solid;font-size:13px;font-weight:600}
.flash-success{background:#ecfdf5;border-color:#b7ebd0;color:#0f7a52}
.flash-error{background:#fff1f2;border-color:#fecdd3;color:#b4233f}
.dark .flash-success{background:rgba(16,185,129,.10);border-color:rgba(52,211,153,.22);color:#6ee7b7}
.dark .flash-error{background:rgba(244,63,94,.10);border-color:rgba(251,113,133,.22);color:#fda4af}

/* Cards */
.card{border:1px solid var(--vx-border);background:var(--vx-panel);border-radius:var(--vx-radius);box-shadow:var(--vx-shadow);transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}
.card:hover{border-color:var(--vx-border-strong)}
.card-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:19px 21px;border-bottom:1px solid var(--vx-border)}
.card-title{margin:0;font-size:14px;font-weight:800;color:var(--vx-text)}
.card-subtitle{margin:4px 0 0;font-size:11.5px;color:var(--vx-subtle)}

/* Dashboard */
.dashboard-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.stat-card{position:relative;overflow:hidden;min-height:142px;padding:20px;border:1px solid var(--vx-border);border-radius:var(--vx-radius);background:var(--vx-panel);box-shadow:var(--vx-shadow);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.stat-card:hover{transform:translateY(-1px);box-shadow:var(--vx-shadow-hover);border-color:var(--vx-border-strong)}
.stat-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.stat-label{font-size:12px;font-weight:700;color:var(--vx-muted)}
.stat-icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--vx-accent-soft);color:var(--vx-accent);flex:0 0 auto}
.stat-icon svg{width:19px;height:19px}
.stat-value{margin-top:14px;font-size:29px;line-height:1;font-weight:850;letter-spacing:-.035em;color:var(--vx-text)}
.stat-help{margin-top:8px;font-size:11px;line-height:1.45;color:var(--vx-subtle)}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(270px,.78fr);gap:18px;margin-top:18px;align-items:start}
.dashboard-panel{min-width:0}
.dashboard-side{display:flex;flex-direction:column;gap:18px}
.work-list{display:flex;flex-direction:column;padding:8px 20px 16px}
.work-item{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--vx-border)}
.work-item:last-child{border-bottom:0}
.work-item-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--vx-panel-soft);color:var(--vx-accent);border:1px solid var(--vx-border);flex:0 0 auto}
.work-item-icon svg{width:18px;height:18px}
.work-item-copy{min-width:0;flex:1}
.work-item-copy span{display:block;font-size:11.5px;color:var(--vx-subtle)}
.work-item-copy strong{display:block;margin-top:2px;font-size:18px;color:var(--vx-text)}
.work-item-link{font-size:11px;font-weight:750;color:var(--vx-accent)}

/* Tables */
.table-wrap{width:100%;overflow:auto;border-radius:0 0 var(--vx-radius) var(--vx-radius);scrollbar-width:thin;scrollbar-color:var(--vx-border-strong) transparent}
.data-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;min-width:720px}
.data-table th{padding:11px 15px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--vx-subtle);font-weight:800;background:var(--vx-panel-soft);border-bottom:1px solid var(--vx-border);white-space:nowrap}
.data-table td{padding:13px 15px;border-bottom:1px solid var(--vx-border);vertical-align:middle;color:var(--vx-text)}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr{transition:background .14s ease}
.data-table tbody tr:hover td{background:color-mix(in srgb,var(--vx-panel-soft) 70%,transparent)}
.data-table a{color:#0b7490;font-weight:750}
.dark .data-table a{color:#43c4cd}
.table-empty{padding:28px;text-align:center;color:var(--vx-subtle);font-size:12px}

/* Buttons / fields */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:39px;border:0;border-radius:11px;padding:9px 14px;font-size:12px;font-weight:750;line-height:1.2;cursor:pointer;transition:transform .14s ease,background .16s ease,color .16s ease,box-shadow .16s ease,border-color .16s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:#0b3855;color:#fff;box-shadow:0 6px 16px rgba(11,56,85,.16)}
.btn-primary:hover{background:#0d496b;box-shadow:0 8px 20px rgba(11,56,85,.22)}
.btn-soft{background:var(--vx-panel-soft);color:var(--vx-text);border:1px solid var(--vx-border)}
.btn-soft:hover{background:color-mix(in srgb,var(--vx-panel-soft) 82%,var(--vx-accent-soft));border-color:var(--vx-border-strong)}
.input{width:100%;min-height:43px;border:1px solid var(--vx-border-strong);border-radius:11px;padding:10px 12px;background:var(--vx-panel);color:var(--vx-text);outline:none;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.input:focus{border-color:#58aab8;box-shadow:0 0 0 3px rgba(21,148,168,.11)}
.input::placeholder{color:var(--vx-subtle)}
.label{display:block;margin-bottom:6px;font-size:11.5px;font-weight:750;color:var(--vx-muted)}
textarea.input{min-height:110px;resize:vertical}

/* Badge consistency */
.badge,.status-badge,.data-table span.rounded-full{display:inline-flex;align-items:center;gap:5px;border:1px solid transparent;white-space:nowrap}

/* Common page helpers */
.section-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.page-tabs{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:5px;border:1px solid var(--vx-border);border-radius:13px;background:var(--vx-panel)}
.page-tabs .btn{min-height:34px;padding:7px 11px}

/* Login */
.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(420px,.95fr) minmax(520px,1.05fr);background:var(--vx-bg)}
.login-brand-panel{position:relative;overflow:hidden;padding:54px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(145deg,#08253b 0%,#0b3855 58%,#0e6579 100%);color:#fff}
.login-brand-panel:before,.login-brand-panel:after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.login-brand-panel:before{width:420px;height:420px;right:-160px;top:-130px;background:rgba(44,184,181,.13)}
.login-brand-panel:after{width:340px;height:340px;left:-180px;bottom:-150px;border:1px solid rgba(255,255,255,.08)}
.login-brand{position:relative;z-index:1;display:flex;align-items:center;gap:12px}
.login-brand-logo{width:48px;height:48px;object-fit:contain;border-radius:14px;background:#fff;padding:3px}
.login-brand-name{font-weight:850;letter-spacing:.015em}
.login-brand-sub{margin-top:2px;font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:#a9c5d0}
.login-message{position:relative;z-index:1;max-width:600px}
.login-kicker{font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.18em;color:#64d2d0}
.login-message h1{margin:14px 0 16px;font-size:44px;line-height:1.08;letter-spacing:-.04em;font-weight:780}
.login-message p{max-width:520px;margin:0;font-size:14px;line-height:1.7;color:#c0d1dc}
.login-foot{position:relative;z-index:1;font-size:11px;color:#9fb5c2}
.login-form-panel{display:flex;align-items:center;justify-content:center;padding:42px}
.login-card{width:100%;max-width:440px;border:1px solid var(--vx-border);background:var(--vx-panel);border-radius:22px;padding:30px;box-shadow:0 24px 60px rgba(16,37,58,.10)}
.login-card-logo{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;border:1px solid var(--vx-border);background:#fff;overflow:hidden;margin-bottom:22px}
.login-card-logo img{width:44px;height:44px;object-fit:contain}
.login-card h2{margin:0;font-size:24px;font-weight:850;letter-spacing:-.025em;color:var(--vx-text)}
.login-card .login-note{margin:7px 0 24px;font-size:12.5px;color:var(--vx-muted)}
.login-error{margin-bottom:18px;border:1px solid #fecdd3;border-radius:12px;background:#fff1f2;padding:11px 12px;font-size:12px;color:#b4233f}
.login-field{margin-top:15px}
.login-submit{width:100%;margin-top:22px;min-height:45px}

/* Overlay / mobile */
.sidebar-overlay{position:fixed;inset:0;z-index:45;background:rgba(3,12,23,.52);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;backdrop-filter:blur(2px)}
.sidebar-overlay.overlay-open{opacity:1;visibility:visible}
.sidebar-lock{overflow:hidden}

/* RTL support */
html[dir="rtl"] .admin-sidebar{left:auto;right:0;border-right:0;border-left:1px solid var(--vx-border)}
html[dir="rtl"] .admin-shell{padding-left:0;padding-right:var(--vx-sidebar)}
html[dir="rtl"] .nav-active-dot{right:auto;left:10px}
html[dir="rtl"] .topbar-profile-copy{text-align:left}
html[dir="rtl"] .data-table th{text-align:right}
html[dir="rtl"] .sidebar-chevron{transform:rotate(180deg)}

@media (max-width:1279px){
  .dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-grid{grid-template-columns:1fr}
  .dashboard-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:1023px){
  .desktop-sidebar-toggle{display:none}
  .mobile-menu-button{display:grid}
  .admin-sidebar{transform:translateX(-100%);box-shadow:20px 0 48px rgba(6,24,41,.18)}
  .admin-sidebar.sidebar-open{transform:translateX(0)}
  .admin-shell{padding-left:0}
  .mobile-menu-button{display:none}
  html[dir="rtl"] .admin-sidebar{transform:translateX(100%)}
  html[dir="rtl"] .admin-sidebar.sidebar-open{transform:translateX(0)}
  html[dir="rtl"] .admin-shell{padding-right:0}
}

@media (max-width:767px){
  .admin-topbar{height:74px;padding:0 16px}
  .admin-main{padding:18px 16px 28px}
  .page-heading h1{font-size:17px}
  .page-heading p,.topbar-profile-copy,.topbar-divider,.theme-button span{display:none}
  .theme-button{width:40px;padding:0;justify-content:center}
  .dashboard-stats{grid-template-columns:1fr}
  .dashboard-side{grid-template-columns:1fr}
  .stat-card{min-height:132px}
  .login-shell{display:block}
  .login-brand-panel{display:none}
  .login-form-panel{min-height:100vh;padding:22px}
  .login-card{padding:24px}
}

@media (max-width:420px){
  :root{--vx-sidebar:260px}
  .admin-topbar{padding:0 12px}
  .admin-main{padding-left:12px;padding-right:12px}
  .topbar-actions{gap:7px}
  .topbar-avatar{width:36px;height:36px}
}


/* V6: Collapsible desktop sidebar + unified work timeline */
.timeline-timezone{
  display:inline-flex;align-items:center;min-height:28px;padding:5px 9px;border:1px solid var(--vx-border);
  border-radius:999px;background:var(--vx-panel-soft);color:var(--vx-muted);font-size:10.5px;font-weight:750;letter-spacing:.02em
}
.timeline-event{position:relative;border-left:2px solid var(--vx-border);padding-left:20px;padding-bottom:2px}
.timeline-event .timeline-dot{position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--vx-accent);box-shadow:0 0 0 4px var(--vx-panel)}
.timeline-event.timeline-assignment{border-left-color:color-mix(in srgb,var(--vx-accent) 42%,var(--vx-border))}
.timeline-event.timeline-assignment .timeline-dot{background:#0b7490}
.dark .timeline-event.timeline-assignment .timeline-dot{background:#43c4cd}

@media (min-width:1024px){
  html.sidebar-collapsed .admin-sidebar{width:82px}
  html.sidebar-collapsed .admin-shell{padding-left:82px}
  html.sidebar-collapsed .sidebar-brand{justify-content:center;padding:0 12px}
  html.sidebar-collapsed .brand-logo-wrap{width:40px;height:40px;border-radius:13px}
  html.sidebar-collapsed .brand-logo{width:36px;height:36px}
  html.sidebar-collapsed .desktop-sidebar-toggle{position:absolute;right:-14px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:9px;background:var(--vx-panel);box-shadow:0 5px 16px rgba(16,37,58,.12);z-index:3}
  html.sidebar-collapsed .desktop-sidebar-toggle:hover{transform:translateY(-50%)}
  html.sidebar-collapsed .sidebar-toggle-icon{width:14px;height:14px}
  html.sidebar-collapsed .brand-copy,
  html.sidebar-collapsed .sidebar-section-label,
  html.sidebar-collapsed .nav-label,
  html.sidebar-collapsed .nav-active-dot,
  html.sidebar-collapsed .sidebar-user-copy,
  html.sidebar-collapsed .sidebar-chevron{display:none}
  html.sidebar-collapsed .sidebar-scroll{padding-left:12px;padding-right:12px}
  html.sidebar-collapsed .navlink{justify-content:center;gap:0;padding-left:10px;padding-right:10px}
  html.sidebar-collapsed .nav-icon{width:20px;height:20px}
  html.sidebar-collapsed .sidebar-footer{padding-left:12px;padding-right:12px}
  html.sidebar-collapsed .sidebar-user-card{justify-content:center;padding-left:0;padding-right:0}
  html.sidebar-collapsed .sidebar-avatar{width:38px;height:38px}
  html[dir="rtl"].sidebar-collapsed .admin-shell{padding-left:0;padding-right:82px}
  html[dir="rtl"].sidebar-collapsed .desktop-sidebar-toggle{right:auto;left:-14px}
}