/* ===== Cortex — Layout (Graphite Enterprise) ===== */
.app-container { display:flex; min-height:100vh; }

/* ===== SIDEBAR ===== */
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-width);
  background:var(--panel); border-right:1px solid var(--border-color);
  display:flex; flex-direction:column; z-index:50;
  transition:transform var(--transition-slow);
}
.sidebar-header{ padding:20px 20px 14px; flex-shrink:0; }
.sidebar-logo{ display:flex; align-items:center; gap:11px; }
.logo-icon{ width:36px; height:36px; border-radius:9px; background:var(--brand);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:var(--shadow-sm); }
.logo-text{ font-size:19px; font-weight:800; letter-spacing:-.02em; color:var(--text-primary); }
.logo-text b{ color:var(--brand); font-weight:800; }

.sidebar-nav{ flex:1; overflow-y:auto; padding:8px 14px; display:flex; flex-direction:column; gap:3px; }
.sidebar-nav-item{
  display:flex; align-items:center; gap:11px; padding:9px 12px;
  border-radius:10px; color:var(--text-secondary);
  font-size:13.5px; font-weight:600; text-decoration:none;
  transition:all var(--transition-fast); position:relative;
}
.sidebar-nav-item svg{ width:18px; height:18px; flex-shrink:0; opacity:.72; }
.sidebar-nav-item:hover{ background:var(--bg-secondary); color:var(--text-primary); }
.sidebar-nav-item.active{ background:var(--brand-050); color:var(--brand-700); }
.sidebar-nav-item.active svg{ opacity:1; }
.sidebar-nav-item.nav-ai.active{ background:var(--slate-050); color:var(--slate); }
.sidebar-section-label{ padding:14px 12px 6px; }
.sidebar-section-label span{
  font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-tertiary);
}

.sidebar-footer{ padding:14px; border-top:1px solid var(--border-color); flex-shrink:0; }
.sidebar-user{ display:flex; align-items:center; gap:10px;
  padding:9px; border:1px solid var(--border-color); border-radius:11px; background:var(--panel-2); }
.user-avatar-sm{ width:33px; height:33px; border-radius:9px; background:var(--graphite);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono);
  font-size:12.5px; font-weight:600; color:#fff; flex-shrink:0; }
.user-info{ overflow:hidden; flex:1; }
.user-name{ font-size:13px; font-weight:700; white-space:nowrap; }
.user-role{ font-size:11px; color:var(--text-muted); white-space:nowrap; }
.btn-logout{ background:none; border:none; color:var(--text-muted); cursor:pointer;
  padding:6px; border-radius:8px; display:grid; place-items:center; transition:var(--transition-fast); }
.btn-logout:hover{ background:var(--color-danger-bg); color:var(--color-danger); }

/* ===== HEADER ===== */
.header{
  position:fixed; top:0; left:var(--sidebar-width); right:0; height:var(--header-height);
  background:rgba(244,245,247,.85); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-color);
  display:flex; align-items:center; justify-content:space-between; padding:0 28px; z-index:40;
  transition:left var(--transition-slow);
}
.header-left{ display:flex; align-items:center; gap:14px; }
.header-left h2{ font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--text-primary); }
.mobile-toggle{ display:none; background:none; border:none; color:var(--text-secondary); padding:6px; cursor:pointer; border-radius:8px; }
.header-right{ display:flex; align-items:center; gap:12px; }
.header-search{ position:relative; display:flex; align-items:center; }
.header-search svg{ position:absolute; left:13px; color:var(--text-muted); pointer-events:none; }
.header-search input{
  width:300px; padding:9px 44px 9px 38px; background:var(--panel);
  border:1px solid var(--border-color); border-radius:10px; color:var(--text-primary);
  font-family:var(--font-family); font-size:13px; outline:none; transition:var(--transition-fast);
}
.header-search input:focus{ border-color:var(--brand); box-shadow:var(--shadow-glow); }
.header-search input::placeholder{ color:var(--text-muted); }
.header-search kbd{ position:absolute; right:11px; font-family:var(--font-mono); font-size:10px;
  border:1px solid var(--border-color); border-radius:5px; padding:2px 5px; color:var(--text-muted); }
.notification-btn{ position:relative; background:var(--panel); border:1px solid var(--border-color);
  color:var(--text-secondary); width:36px; height:36px; border-radius:10px; cursor:pointer;
  display:grid; place-items:center; transition:var(--transition-fast); }
.notification-btn:hover{ background:var(--panel-2); }
.notification-badge{ position:absolute; top:-5px; right:-5px; min-width:17px; height:17px;
  background:var(--color-danger); color:#fff; font-size:10px; font-weight:700; font-family:var(--font-mono);
  border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px; border:2px solid var(--bg-primary); }
.user-avatar{ width:36px; height:36px; border-radius:10px; background:var(--graphite);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono);
  font-size:12.5px; font-weight:600; color:#fff; cursor:pointer; }

/* ===== MAIN ===== */
.main-content{ margin-left:var(--sidebar-width); flex:1; min-height:100vh; transition:margin-left var(--transition-slow); }
.content-area{ padding:calc(var(--header-height) + 28px) 28px 28px; max-width:1400px; animation:fadeIn .3s ease; }

/* ===== RESPONSIVE ===== */
@media (max-width:1024px){ .header-search input{ width:220px; } }
@media (max-width:768px){
  .sidebar{ transform:translateX(-100%); }
  .sidebar.open{ transform:translateX(0); box-shadow:var(--shadow-lg); }
  .main-content{ margin-left:0; }
  .header{ left:0; padding:0 16px; }
  .mobile-toggle{ display:flex; }
  .header-search{ display:none; }
  .content-area{ padding:calc(var(--header-height) + 16px) 16px 16px; }
}

/* ===== LOGIN ===== */
.login-overlay{ position:fixed; inset:0; background:var(--bg-primary); z-index:9999;
  display:flex; align-items:center; justify-content:center; padding:20px; transition:opacity var(--transition-normal); }
.login-overlay.hidden{ opacity:0; pointer-events:none; visibility:hidden; }
.login-card{ width:100%; max-width:404px; background:var(--panel); border:1px solid var(--border-color);
  border-radius:16px; padding:36px 34px; box-shadow:var(--shadow-lg); animation:slideUp .4s ease; }
.login-brandrow{ display:flex; align-items:center; justify-content:center; gap:11px; margin-bottom:20px; }
.login-brandrow .logo-text{ font-size:20px; }
.login-kick{ font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-muted); text-align:center; margin-bottom:8px; }
.login-card h2{ font-size:23px; font-weight:800; letter-spacing:-.02em; text-align:center; color:var(--text-primary); }
.login-sub{ color:var(--text-muted); font-size:13.5px; text-align:center; margin:6px 0 26px; }
.login-form .form-group{ margin-bottom:16px; }
.login-form .form-label{ display:block; font-size:12.5px; font-weight:700; color:var(--text-secondary); margin-bottom:7px; }
.input-wrap{ position:relative; display:flex; align-items:center; }
.input-wrap .input-lead{ position:absolute; left:13px; width:17px; height:17px; color:var(--text-muted); pointer-events:none; }
.input-wrap .input-eye{ position:absolute; right:12px; color:var(--text-muted); cursor:pointer; display:grid; place-items:center; }
.input-wrap .input-eye:hover{ color:var(--text-secondary); }
.login-card .form-input{ width:100%; padding:11px 13px 11px 40px; border:1px solid var(--border-color);
  background:var(--panel); border-radius:10px; font-family:var(--font-family); font-size:14px; color:var(--text-primary); transition:var(--transition-fast); }
.login-card .form-input:focus{ outline:none; border-color:var(--brand); box-shadow:var(--shadow-glow); }
.login-card .form-input::placeholder{ color:#aab1b9; }
.login-card .form-input:-webkit-autofill,.login-card .form-input:-webkit-autofill:hover,.login-card .form-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text-primary); -webkit-box-shadow:0 0 0 1000px var(--panel) inset;
  box-shadow:0 0 0 1000px var(--panel) inset; border:1px solid var(--border-color); caret-color:var(--text-primary); }
.login-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 22px; }
.login-check{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-secondary); white-space:nowrap; cursor:pointer; }
.login-check input{ accent-color:var(--brand); width:15px; height:15px; }
.login-forgot{ color:var(--brand); font-weight:700; font-size:13px; white-space:nowrap; cursor:pointer; }
.login-forgot:hover{ color:var(--brand-700); }
.login-card .btn-block{ width:100%; justify-content:center; padding:13px; font-size:14px; }
.login-card .btn-primary{ background:var(--brand); color:#fff; border:1px solid transparent; }
.login-card .btn-primary:hover{ background:var(--brand-700); }
.login-hint{ font-family:var(--font-mono); font-size:11px; color:var(--text-muted); text-align:center;
  margin-top:22px; padding-top:18px; border-top:1px solid var(--border-subtle); letter-spacing:.02em; }
.login-form .form-error{ background:var(--color-danger-bg); color:var(--color-danger); font-size:13px;
  padding:10px 12px; border-radius:9px; margin-bottom:14px; }
.login-form .form-error.hidden{ display:none; }

/* animated login background (Motion/GSAP drives .login-bg span) */
.login-overlay{ overflow:hidden; }
.login-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.login-bg span{ position:absolute; border-radius:50%; filter:blur(64px); opacity:.5; will-change:transform; }
.login-bg span:nth-child(1){ width:440px; height:440px; background:rgba(12,107,87,.5); top:-130px; left:-110px; }
.login-bg span:nth-child(2){ width:380px; height:380px; background:rgba(51,65,122,.42); bottom:-140px; right:-90px; }
.login-bg span:nth-child(3){ width:300px; height:300px; background:rgba(169,124,63,.34); top:44%; left:56%; }
.login-card{ position:relative; z-index:1; }