/* ============================================================
   KOSKARA TECHNOLOGIES — Design System v3.0
   Brand: #0D1B2A navy · #2E86C1 blue · #5BB3DA light blue
   Theme: White background, dark navy sidebar
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Koskara Brand */
  --navy:        #0D1B2A;
  --navy-2:      #162234;
  --navy-3:      #1E3148;
  /* Themeable nav (JS overrides these) */
  --nav-bg:         #1e1b72;
  --nav-active-bg:  rgba(255,255,255,.17);
  --nav-active-col: #ffffff;
  --nav-accent:     rgba(255,255,255,.75);
  --blue:        #2E86C1;
  --blue-hover:  #2472A8;
  --blue-dark:   #1A5C8A;
  --blue-light:  #5BB3DA;
  --blue-pale:   #EBF5FB;
  --blue-pale-2: #D6EAF8;

  /* Backgrounds (light) */
  --bg:          #F7F9FC;
  --bg-2:        #EFF3F8;
  --bg-3:        #E8EEF5;
  --card-bg:     #FFFFFF;

  /* Borders & Shadows */
  --border:      #E2E8F0;
  --border-2:    #CBD5E1;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:      0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:   0 20px 40px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.06);
  --shadow-blue: 0 4px 16px rgba(46,134,193,.25);

  /* Text */
  --text-1:  #0D1B2A;
  --text-2:  #334155;
  --text-3:  #64748B;
  --text-4:  #94A3B8;
  --text-5:  #CBD5E1;

  /* Semantic */
  --green:      #059669; --green-bg:  #ECFDF5; --green-border: #A7F3D0;
  --red:        #DC2626; --red-bg:    #FEF2F2; --red-border:   #FECACA;
  --orange:     #D97706; --orange-bg: #FFFBEB; --orange-border:#FCD34D;
  --purple:     #7C3AED; --purple-bg: #F5F3FF;
  --teal:       #0891B2; --teal-bg:   #ECFEFF;

  /* Layout */
  --sidebar-w: 256px;
  --topbar-h:  60px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Legacy compat */
  --white:      #ffffff;
  --gray-50:    #F7F9FC;
  --gray-100:   #EFF3F8;
  --gray-200:   #E2E8F0;
  --gray-400:   #94A3B8;
  --gray-600:   #64748B;
  --gray-800:   #0D1B2A;
  --blue-mid:   #2E86C1;
  --blue-dark:  #2472A8;
  --blue-light: #EBF5FB;
  --blue:       #2E86C1;
}

/* ============================================================
   BASE
   ============================================================ */
html { font-size: 15px; }

body {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--text-1);
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
svg { display: block; }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  z-index: 200;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04);
}

.topbar-left, .topbar-right { display: flex; align-items: center; gap: 8px; }

.sidebar-toggle {
  background: none; border: none; cursor: pointer;
  color: var(--text-3); padding: 7px; border-radius: var(--radius-sm);
  font-size: 18px; line-height: 1; transition: all .15s;
  display: flex; align-items: center;
}
.sidebar-toggle:hover { background: var(--bg-2); color: var(--text-1); }

/* Brand */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }

.brand-icon {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: var(--navy);
  color: white; font-weight: 900; font-size: 17px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(13,27,42,.25);
  position: relative; overflow: hidden;
}
.brand-icon.lg { width: 56px; height: 56px; font-size: 28px; border-radius: 14px; }

.brand-name { font-size: 16px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; }
.brand-sub  { color: var(--blue); }

/* Nav buttons */
.nav-btn {
  position: relative; background: none; border: none; cursor: pointer;
  color: var(--text-3); padding: 8px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.nav-btn svg { width: 20px; height: 20px; }
.nav-btn:hover { background: var(--bg-2); color: var(--text-1); }
.nav-btn-wrap { position: relative; }

.badge {
  position: absolute; top: 2px; right: 2px;
  background: var(--red); color: white;
  font-size: 10px; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
  box-shadow: 0 1px 4px rgba(220,38,38,.4);
}

/* User pill */
.user-pill {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--border);
  border-radius: 24px; padding: 4px 12px 4px 4px;
  cursor: pointer; color: var(--text-1); font-size: 13px; font-weight: 500;
  transition: all .15s;
}
.user-pill:hover { background: var(--bg-2); border-color: var(--border-2); }
.chevron { width: 14px; height: 14px; color: var(--text-4); }
.user-name { max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Search bar */
.topbar-search { display: flex; align-items: center; margin-left: 14px; flex: 1; max-width: 420px; }
.search-wrap { position: relative; display: flex; align-items: center; width: 100%; }
.search-wrap input {
  padding: 8px 14px 8px 36px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 10px; font-size: 13px; color: var(--text-1);
  width: 100%; min-width: 200px;
  transition: all .18s;
}
.search-wrap input:focus { border-color: var(--blue); background: white; box-shadow: 0 0 0 3px rgba(46,134,193,.12); outline: none; }
.search-icon { position: absolute; left: 10px; color: var(--text-4); }
.search-icon svg { width: 15px; height: 15px; }

/* Dropdowns */
.dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  background: white; border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  min-width: 230px; z-index: 300; overflow: hidden;
  animation: dropdown-in .15s ease;
}
.dropdown.show { display: block; }

@keyframes dropdown-in {
  from { opacity:0; transform: translateY(-6px) scale(.97); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}

.dropdown-header {
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--text-3);
}
.dropdown-header strong { color: var(--text-1); display: block; font-size: 14px; }

.dropdown-item {
  display: block; padding: 10px 18px; font-size: 13px; color: var(--text-2);
  text-decoration: none; transition: background .1s;
}
.dropdown-item:hover { background: var(--blue-pale); color: var(--navy); }
.dropdown-item.unread { background: var(--blue-pale); font-weight: 600; }

.di-title { font-weight: 500; font-size: 13px; color: var(--text-1); }
.di-sub   { font-size: 12px; color: var(--text-4); margin-top: 2px; }

.dropdown-footer {
  display: block; padding: 11px 18px; text-align: center;
  font-size: 13px; color: var(--blue); font-weight: 500;
  border-top: 1px solid var(--border); text-decoration: none; transition: background .12s;
}
.dropdown-footer:hover { background: var(--blue-pale); }
.dropdown-divider { border-top: 1px solid var(--border); margin: 4px 0; }
.dropdown-empty { padding: 24px 18px; text-align: center; color: var(--text-4); font-size: 13px; }

.text-danger  { color: var(--red) !important; }
.text-success { color: var(--green) !important; }

/* ============================================================
   LAYOUT
   ============================================================ */
.app-layout {
  display: flex; margin-top: var(--topbar-h);
  min-height: calc(100vh - var(--topbar-h));
}

/* ============================================================
   SIDEBAR — Indigo Glow
   ============================================================ */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  display: flex; flex-direction: column;
  overflow-x: hidden; overflow-y: auto;
  transition: transform .22s cubic-bezier(.4,0,.2,1), width .22s cubic-bezier(.4,0,.2,1), background-color .35s;

  /* 3-layer background trick */
  background-color: var(--nav-bg);
  background-image:
    radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(155deg, rgba(255,255,255,.06) 0%, transparent 55%);
  background-size: 22px 22px, 100% 100%;
}

/* Glow orb — top left corner bloom */
.sidebar::before {
  content: ''; position: absolute; top: 20px; left: 20px;
  width: 220px; height: 220px; border-radius: 50%;
  background: rgba(255,255,255,.09); filter: blur(72px);
  pointer-events: none; z-index: 0;
}
/* Glow orb — bottom right corner bloom */
.sidebar::after {
  content: ''; position: absolute; bottom: 40px; right: -20px;
  width: 160px; height: 160px; border-radius: 50%;
  background: rgba(255,255,255,.055); filter: blur(56px);
  pointer-events: none; z-index: 0;
}

.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

.nav-links { list-style: none; padding: 12px 0; flex: 1; position: relative; z-index: 1; }

.nav-links li a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 14px;
  color: rgba(255,255,255,.62);
  text-decoration: none; font-size: 13px; font-weight: 600;
  border-radius: 8px; margin: 1px 8px;
  transition: all .16s ease; position: relative;
}
.nav-links li a svg { width: 17px; height: 17px; flex-shrink: 0; }

.nav-links li a:hover {
  color: rgba(255,255,255,.95);
  background: rgba(255,255,255,.11);
}

.nav-links li a.active {
  color: #fff; font-weight: 700;
  background: rgba(255,255,255,.17);
  box-shadow:
    inset 3px 0 0 rgba(255,255,255,.75),
    0 0 18px rgba(255,255,255,.06),
    0 4px 14px rgba(0,0,0,.12);
}
.nav-links li a.active svg {
  color: white;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.5));
}

.nav-badge {
  margin-left: auto; background: rgba(255,255,255,.2);
  color: white; font-size: 10.5px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
  box-shadow: 0 0 8px rgba(255,255,255,.15);
}

.nav-section {
  padding: 14px 20px 5px; position: relative; z-index: 1;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: rgba(255,255,255,.25); list-style: none;
}

.sidebar-footer {
  padding: 14px; border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12); position: relative; z-index: 1;
}
.sf-user { display: flex; align-items: center; gap: 10px; }
.sf-name { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.85); }
.sf-role { font-size: 11px; color: rgba(255,255,255,.35); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }

/* ============================================================
   PAGE CONTENT
   ============================================================ */
.page-content {
  flex: 1; padding: 26px 28px; overflow-y: auto; max-width: 1440px;
}

@keyframes page-fade {
  from { opacity:0; transform: translateY(6px); }
  to   { opacity:1; transform: translateY(0); }
}

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 24px;
}
.page-header h2 { font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: -.02em; }
.page-sub { font-size: 13px; color: var(--text-3); margin-top: 3px; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px; overflow: hidden;
  transition: box-shadow .18s, border-color .18s;
}
.card:hover { box-shadow: var(--shadow); }
.card.no-pad .card-header { border-bottom: 1px solid var(--border); }

.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px; border-bottom: 1px solid var(--border);
}
.card-header h3 { font-size: 14px; font-weight: 600; color: var(--navy); }

.card-footer-link {
  display: block; text-align: center; padding: 12px;
  font-size: 12.5px; color: var(--blue); text-decoration: none;
  border-top: 1px solid var(--border); transition: background .13s; font-weight: 500;
}
.card-footer-link:hover { background: var(--blue-pale); }

/* ============================================================
   STAT CARDS
   ============================================================ */
.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-bottom: 22px;
}

.stat-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 20px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: var(--shadow-sm); transition: all .18s; cursor: default;
  position: relative; overflow: hidden;
}
.stat-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--blue-light));
  opacity: 0; transition: opacity .2s;
}
.stat-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.stat-card:hover::after { opacity: 1; }

.stat-icon {
  width: 44px; height: 44px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.stat-icon svg { width: 22px; height: 22px; }

.stat-icon.blue   { background: var(--blue-pale);  color: var(--blue); }
.stat-icon.green  { background: var(--green-bg);   color: var(--green); }
.stat-icon.red    { background: var(--red-bg);     color: var(--red); }
.stat-icon.orange { background: var(--orange-bg);  color: var(--orange); }
.stat-icon.purple { background: var(--purple-bg);  color: var(--purple); }
.stat-icon.cyan   { background: var(--teal-bg);    color: var(--teal); }

.stat-num   { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--navy); letter-spacing: -.02em; }
.stat-label { font-size: 12px; color: var(--text-3); margin-top: 3px; }

/* ============================================================
   DASH GRID
   ============================================================ */
.dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }

/* ============================================================
   TASK LIST
   ============================================================ */
.task-list { padding: 0; }

.task-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.task-row:last-child { border-bottom: none; }
.task-row:hover { background: var(--blue-pale); }

.task-status-dot {
  display: block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}

.task-info { flex: 1; min-width: 0; }
.task-title {
  font-size: 13.5px; font-weight: 500; color: var(--text-1);
  text-decoration: none; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task-title:hover { color: var(--blue); }
.task-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; flex-wrap: wrap; }
.meta-text { font-size: 11.5px; color: var(--text-3); }

/* Status colors */
.status-done     { background: var(--green); }
.status-progress { background: var(--blue); }
.status-review   { background: var(--orange); }
.status-blocked  { background: var(--red); }
.status-new      { background: var(--text-4); }

/* ============================================================
   TAGS / BADGES
   ============================================================ */
.tag {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--radius-xs);
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}

.priority-critical { background: var(--red-bg);    color: #991B1B; }
.priority-high     { background: var(--orange-bg); color: #92400E; }
.priority-medium   { background: #FEF9C3;           color: #854D0E; }
.priority-low      { background: var(--green-bg);  color: #065F46; }

.status-done     { background: var(--green-bg);   color: #065F46; }
.status-progress { background: var(--blue-pale);  color: #1E40AF; }
.status-review   { background: var(--orange-bg);  color: #92400E; }
.status-blocked  { background: var(--red-bg);     color: #991B1B; }
.status-new      { background: var(--bg-2);       color: var(--text-3); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; font-size: 13.5px; font-weight: 500;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: all .15s; letter-spacing: -.01em;
}

.btn-primary {
  background: var(--blue); color: white;
  border-color: var(--blue);
  box-shadow: 0 2px 8px rgba(46,134,193,.25);
}
.btn-primary:hover {
  background: var(--blue-hover); border-color: var(--blue-hover);
  box-shadow: 0 4px 14px rgba(46,134,193,.35);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: transparent; color: var(--text-2);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--bg-2); border-color: var(--border-2); color: var(--text-1); }

.btn-danger {
  background: var(--red); color: white; border-color: var(--red);
  box-shadow: 0 2px 8px rgba(220,38,38,.2);
}
.btn-danger:hover { background: #B91C1C; transform: translateY(-1px); }

.btn-sm  { padding: 5px 12px; font-size: 12.5px; }
.btn-xs  { padding: 3px 8px;  font-size: 11.5px; }
.btn-full { width: 100%; justify-content: center; }
.btn-group { display: flex; gap: 8px; }

/* ============================================================
   FORMS
   ============================================================ */
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.span-2 { grid-column: span 2; }
.form-group label { font-size: 12.5px; font-weight: 500; color: var(--text-2); }

.form-row {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 16px; padding: 16px 20px;
}
.form-row.cols-4 { grid-template-columns: repeat(4, 1fr); }

input[type=text], input[type=email], input[type=password],
input[type=number], input[type=date], select, textarea {
  padding: 8px 12px; font-size: 13.5px; font-family: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: white; color: var(--text-1); width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(46,134,193,.12);
}
input:disabled, select:disabled {
  background: var(--bg-2); color: var(--text-4); cursor: not-allowed;
}
::placeholder { color: var(--text-4); }
textarea { resize: vertical; }
.form-actions {
  display: flex; gap: 12px; justify-content: flex-end;
  padding: 16px 20px; border-top: 1px solid var(--border);
}
.inline-form .form-row { padding: 12px 20px; }

/* ============================================================
   TABLES
   ============================================================ */
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

.data-table th {
  padding: 10px 18px; text-align: left;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-3);
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: 12px 18px; border-bottom: 1px solid var(--border);
  vertical-align: middle; color: var(--text-2);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--blue-pale); }

.table-link { color: var(--navy); text-decoration: none; font-weight: 500; }
.table-link:hover { color: var(--blue); }
.row-done td { opacity: .55; }

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
  padding: 12px 16px; border-radius: var(--radius-sm);
  margin-bottom: 16px; font-size: 13.5px; border: 1px solid transparent;
}
.alert-success { background: var(--green-bg);  color: #065F46; border-color: var(--green-border); }
.alert-danger  { background: var(--red-bg);    color: #991B1B; border-color: var(--red-border); }
.alert-warning { background: var(--orange-bg); color: #92400E; border-color: var(--orange-border); }
.alert-info    { background: var(--blue-pale); color: #1E40AF; border-color: var(--blue-pale-2); }

/* ============================================================
   PROGRESS
   ============================================================ */
.progress-bar-wrap { display: flex; align-items: center; gap: 8px; }
.progress-bar-wrap .progress-bar {
  flex: 1; height: 5px; background: var(--blue);
  border-radius: 3px; min-width: 0;
}
.progress-bar-wrap span { font-size: 12px; color: var(--text-3); white-space: nowrap; }

.progress-bar-full {
  width: calc(100% - 40px); height: 6px;
  background: var(--bg-2); border-radius: 3px;
  margin: 12px 20px; overflow: hidden;
}
.progress-bar-full .progress-bar { height: 6px; }

/* Ring */
.progress-ring { width: 80px; height: 80px; }
.ring-label {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 15px; font-weight: 700; color: var(--blue);
}
.progress-ring-wrap { position: relative; width: 80px; height: 80px; flex-shrink: 0; }
.milestone-progress-wrap { display: flex; align-items: center; gap: 24px; padding: 20px; }
.milestone-stats div { font-size: 14px; color: var(--text-2); line-height: 1.9; }
.milestone-stats strong { color: var(--navy); }

/* ============================================================
   DETAIL VIEW
   ============================================================ */
.detail-layout { display: grid; grid-template-columns: 1fr 280px; gap: 20px; align-items: start; }
.detail-title { font-size: 20px; font-weight: 700; margin: 0 20px 8px; padding-top: 4px; color: var(--navy); }
.detail-desc  { padding: 0 20px 16px; color: var(--text-2); font-size: 14px; line-height: 1.75; }
.detail-notes {
  margin: 0 20px 16px; padding: 12px 14px;
  background: var(--orange-bg); border: 1px solid var(--orange-border);
  border-radius: var(--radius-sm); font-size: 13px; color: #92400E;
}
.detail-meta-list { padding: 0; }
.dm-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 18px; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.dm-row:last-child { border-bottom: none; }
.dm-row span { color: var(--text-3); }
.dm-row strong { text-align: right; max-width: 60%; color: var(--navy); }

/* ============================================================
   COMMENTS
   ============================================================ */
.comment { display: flex; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.comment-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--navy); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.comment-meta { font-size: 12px; color: var(--text-3); margin-bottom: 5px; }
.comment-meta strong { color: var(--navy); }
.comment-text { font-size: 13.5px; line-height: 1.65; color: var(--text-2); }
.comment-form { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }

/* ============================================================
   MESSAGES — Outlook/Teams hybrid
   ============================================================ */
.mail-layout { display: grid; grid-template-columns: 240px 1fr; gap: 0; height: calc(100vh - var(--topbar-h) - 52px); }

.mail-sidebar {
  background: var(--bg-2);
  border: 1px solid var(--border); border-right: none;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  overflow-y: auto; display: flex; flex-direction: column;
}

.mail-main {
  border: 1px solid var(--border);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: white; overflow-y: auto;
}

/* Teams-style sidebar */
.mail-compose-btn {
  margin: 14px 12px 10px;
  background: var(--blue); color: white;
  border: none; border-radius: 8px; padding: 10px 14px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: 8px; width: calc(100% - 24px);
  box-shadow: var(--shadow-blue); transition: all .15s; text-decoration: none;
  justify-content: center;
}
.mail-compose-btn:hover { background: var(--blue-hover); transform: translateY(-1px); }

.mail-section-header {
  padding: 10px 14px 4px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-4);
}

.mail-nav { list-style: none; padding: 0 8px 8px; }
.mail-nav li a {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  font-size: 13px; color: var(--text-2); text-decoration: none;
  border-radius: 7px; font-weight: 500; transition: all .12s;
}
.mail-nav li a svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-3); }
.mail-nav li a:hover { background: rgba(46,134,193,.08); color: var(--navy); }
.mail-nav li a.active { background: var(--blue-pale); color: var(--blue); font-weight: 600; }
.mail-nav li a.active svg { color: var(--blue); }

/* Channel items (Teams style) */
.channel-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  font-size: 13px; color: var(--text-3); border-radius: 7px;
  cursor: pointer; transition: all .12s; text-decoration: none;
}
.channel-item:hover { background: rgba(46,134,193,.08); color: var(--navy); }
.channel-item.active { background: var(--blue-pale); color: var(--blue); font-weight: 600; }
.channel-hash { font-size: 14px; font-weight: 700; color: var(--text-4); }
.channel-item.active .channel-hash { color: var(--blue); }

/* DM items */
.dm-item {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px;
  font-size: 13px; color: var(--text-2); border-radius: 7px;
  cursor: pointer; transition: all .12s; text-decoration: none;
}
.dm-item:hover { background: rgba(46,134,193,.08); color: var(--navy); }
.dm-item.active { background: var(--blue-pale); color: var(--blue); font-weight: 600; }
.dm-presence { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

/* Message list rows */
.msg-list-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 20px;
  border-bottom: 1px solid var(--border); text-decoration: none; color: inherit;
  transition: background .12s; cursor: pointer;
}
.msg-list-row:last-child { border-bottom: none; }
.msg-list-row:hover { background: var(--blue-pale); }
.msg-list-row.unread { background: #F0F7FF; }
.msg-list-row.unread .mlr-subject { font-weight: 700; color: var(--navy); }
.msg-list-row.unread .mlr-from    { font-weight: 600; color: var(--text-2); }

.mlr-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--navy); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.mlr-body { flex: 1; min-width: 0; }
.mlr-top  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.mlr-from    { font-size: 13px; color: var(--text-2); font-weight: 500; }
.mlr-subject { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlr-preview { font-size: 12px; color: var(--text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.mlr-time    { font-size: 11.5px; color: var(--text-4); white-space: nowrap; }
.mlr-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex-shrink: 0; margin-top: 6px; }

/* Message detail */
.msg-detail-header {
  display: flex; gap: 14px; padding: 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--bg) 0%, white 100%);
}
.msg-detail-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; flex-shrink: 0;
}
.msg-body-text {
  padding: 22px; font-size: 14px; line-height: 1.8;
  color: var(--text-2); white-space: pre-wrap;
}

/* Compose */
.compose-form .form-group { padding: 0 20px 16px; }
.recipient-select { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; }

.check-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border: 1px solid var(--border);
  border-radius: 20px; cursor: pointer; font-size: 12.5px; font-weight: 500;
  color: var(--text-2); background: white; transition: all .15s;
}
.check-pill input { display: none; }
.check-pill:has(input:checked), .check-pill.checked {
  background: var(--blue); color: white; border-color: var(--blue);
}
.check-pill small { font-size: 10.5px; opacity: .7; }

/* Dashboard message mini list */
.msg-row {
  display: flex; align-items: center; gap: 10px; padding: 11px 18px;
  border-bottom: 1px solid var(--border); text-decoration: none; color: inherit;
  transition: background .12s;
}
.msg-row:hover { background: var(--blue-pale); }
.msg-row.unread .msg-from, .msg-row.unread .msg-subject { font-weight: 700; color: var(--navy); }

.msg-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--navy); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; flex-shrink: 0;
}
.msg-body { flex: 1; min-width: 0; }
.msg-from    { font-size: 11.5px; color: var(--text-3); }
.msg-subject { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-time    { font-size: 11px; color: var(--text-4); }

/* ============================================================
   TASK FORM
   ============================================================ */
.task-form { padding-bottom: 8px; }

/* ============================================================
   FILTERS
   ============================================================ */
.filter-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
  background: var(--bg);
}
.filter-bar select { max-width: 180px; width: auto; }
.checkbox-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-2); cursor: pointer; white-space: nowrap;
}
.checkbox-label input { width: auto; margin: 0; cursor: pointer; accent-color: var(--blue); }

/* ============================================================
   ROLE TAG / AVATAR
   ============================================================ */
.role-tag { font-size: 12px; font-weight: 600; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: white; flex-shrink: 0;
}
.avatar.sm { width: 28px; height: 28px; font-size: 11px; }
.avatar.xl { width: 72px; height: 72px; font-size: 28px; }

/* ============================================================
   DASHBOARD WIDGETS
   ============================================================ */
.donut-wrap { padding: 20px; }
.legend { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.legend-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dot.green  { background: var(--green); }
.dot.blue   { background: var(--blue); }
.dot.gray   { background: var(--text-4); }
.dot.red    { background: var(--red); }

.big-number { font-size: 40px; font-weight: 800; color: var(--navy); line-height: 1; letter-spacing: -.03em; }
.big-number small { font-size: 13px; color: var(--text-3); font-weight: 400; display: block; margin-top: 5px; letter-spacing: 0; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  padding: 48px; text-align: center; color: var(--text-3); font-size: 13.5px;
}

/* ============================================================
   ACCESS DENIED
   ============================================================ */
.access-denied {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 80px 40px; text-align: center;
}
.access-denied-icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--red-bg); border: 1px solid var(--red-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; margin-bottom: 24px;
}
.access-denied h2 { font-size: 22px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.access-denied p  { color: var(--text-2); font-size: 14px; max-width: 380px; line-height: 1.7; }

/* ============================================================
   LOGIN PAGE — SPLIT LAYOUT
   ============================================================ */
.login-page {
  display: flex; min-height: 100vh;
  background: #F0F5FB;
}

/* Left branding panel */
.login-left {
  width: 40%; min-width: 380px;
  background: var(--navy);
  display: flex; flex-direction: column; justify-content: center;
  padding: 60px 50px; position: relative; overflow: hidden;
}

/* Animated network lines in background */
.login-left::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(46,134,193,.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(91,179,218,.08) 0%, transparent 50%);
  pointer-events: none;
}

.login-left-dots {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.login-left-dots::before {
  content: '';
  position: absolute; inset: -10%;
  background-image: radial-gradient(rgba(91,179,218,.18) 1px, transparent 1px);
  background-size: 28px 28px;
  animation: dots-drift 30s linear infinite;
}
@keyframes dots-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(28px, 28px); }
}

.login-left-content { position: relative; z-index: 1; }

/* Koskara logo for login */
.login-logo-wrap { display: flex; align-items: center; gap: 14px; margin-bottom: 44px; }

.login-k-icon {
  width: 52px; height: 52px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.login-k-icon svg { width: 32px; height: 32px; }

.login-brand-text h2 { font-size: 22px; font-weight: 800; color: white; letter-spacing: -.02em; }
.login-brand-text span { font-size: 12px; color: rgba(255,255,255,.45); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }

.login-tagline { font-size: 32px; font-weight: 800; color: white; line-height: 1.2; margin-bottom: 12px; letter-spacing: -.02em; }
.login-tagline em { font-style: normal; color: var(--blue-light); }

.login-sub { font-size: 14px; color: rgba(255,255,255,.45); line-height: 1.65; margin-bottom: 44px; }

/* Feature highlights */
.login-features { display: flex; flex-direction: column; gap: 20px; margin-bottom: 44px; }
.login-feature { display: flex; align-items: flex-start; gap: 14px; }
.login-feature-icon {
  width: 38px; height: 38px; border-radius: 9px;
  background: rgba(46,134,193,.2); border: 1px solid rgba(46,134,193,.3);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--blue-light);
}
.login-feature-icon svg { width: 18px; height: 18px; }
.login-feature h4 { font-size: 13.5px; font-weight: 600; color: white; margin-bottom: 3px; }
.login-feature p  { font-size: 12.5px; color: rgba(255,255,255,.4); line-height: 1.5; }

/* Login stats */
.login-stats {
  display: flex; gap: 0;
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 28px;
}
.login-stat { flex: 1; text-align: center; border-right: 1px solid rgba(255,255,255,.1); padding: 0 20px; }
.login-stat:first-child { padding-left: 0; }
.login-stat:last-child  { border-right: none; padding-right: 0; }
.login-stat-num { font-size: 22px; font-weight: 800; color: white; letter-spacing: -.02em; display: block; }
.login-stat-lbl { font-size: 11px; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-top: 3px; display: block; }

/* Right login form */
.login-right {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 40px;
  background: linear-gradient(135deg, #F0F5FB 0%, #E8EFF8 100%);
}

.login-card {
  background: white; border-radius: 20px; width: 100%; max-width: 420px;
  padding: 44px; box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0,0,0,.06);
  animation: card-appear .4s cubic-bezier(.34,1.56,.64,1);
}

@keyframes card-appear {
  from { opacity:0; transform: scale(.94) translateY(16px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}

.login-card h2 { font-size: 24px; font-weight: 800; color: var(--navy); letter-spacing: -.025em; margin-bottom: 4px; }
.login-card .login-subtitle { font-size: 14px; color: var(--text-3); margin-bottom: 28px; }

.login-form .form-group { margin-bottom: 16px; }
.login-form label { font-size: 12.5px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; display: block; }

.input-wrapper { position: relative; }
.input-wrapper svg.input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-4); pointer-events: none; }
.input-wrapper input { padding-left: 38px; }
.pw-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-4); padding: 0; }
.pw-toggle:hover { color: var(--text-2); }
.pw-toggle svg { width: 16px; height: 16px; display: block; }

.btn-login {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px 24px; margin-top: 8px;
  background: var(--blue); color: white;
  font-size: 14.5px; font-weight: 600; border: none;
  border-radius: 10px; cursor: pointer;
  box-shadow: var(--shadow-blue); transition: all .18s; position: relative; overflow: hidden;
}
.btn-login::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transition: left .45s;
}
.btn-login:hover::after { left: 100%; }
.btn-login:hover { background: var(--blue-hover); box-shadow: 0 6px 20px rgba(46,134,193,.4); transform: translateY(-1px); }
.btn-login:active { transform: translateY(0); }

.login-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; }
.login-divider span { font-size: 11.5px; color: var(--text-4); white-space: nowrap; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.login-demo { font-size: 12.5px; color: var(--text-3); }
.login-demo strong { display: block; margin-bottom: 10px; color: var(--text-1); font-size: 12.5px; }
.demo-grid { display: flex; flex-wrap: wrap; gap: 6px; }

.demo-pill {
  padding: 5px 12px; border: 1px solid var(--border);
  border-radius: 20px; cursor: pointer; font-size: 12px; font-weight: 500;
  color: var(--text-2); background: white; transition: all .14s;
  display: flex; align-items: center; gap: 5px;
}
.demo-pill:hover { background: var(--blue-pale); border-color: var(--blue); color: var(--blue); }

.login-footer { text-align: center; margin-top: 22px; font-size: 11.5px; color: var(--text-4); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
  .span-2, .span-3 { grid-column: span 1; }
}

@media (max-width: 900px) {
  .login-left { display: none; }
  .login-right { padding: 24px; }
  .login-card { padding: 32px 28px; }
}

@media (max-width: 768px) {
  .sidebar {
    position: fixed; top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h)); z-index: 150;
    transform: translateX(-100%); transition: transform .25s cubic-bezier(.4,0,.2,1);
  }
  .sidebar.open { transform: translateX(0); }
  .page-content { padding: 18px 16px; }
  .stat-grid { grid-template-columns: repeat(2,1fr); }
  .detail-layout { grid-template-columns: 1fr; }
  .mail-layout { grid-template-columns: 1fr; height: auto; }
  .mail-sidebar { border-radius: var(--radius-lg); border-right: 1px solid var(--border); margin-bottom: 16px; }
  .mail-main { border-radius: var(--radius-lg); }
  .user-name { display: none; }
  .form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-4); }

/* ============================================================
   UTILITIES
   ============================================================ */
.flex { display: flex; }
.items-center { align-items: center; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.font-semibold { font-weight: 600; }
.text-sm { font-size: 12px; }
.text-muted { color: var(--text-3); }
.w-full { width: 100%; }

@media print {
  .topbar, .sidebar, .page-header .btn, .filter-bar { display: none !important; }
  .app-layout { margin-top: 0; }
  .page-content { padding: 0; }
}

/* ============================================================
   SIDEBAR ICON-ONLY COLLAPSE (desktop)
   ============================================================ */
.sidebar.icon-only { width: 64px; overflow: visible; }
.sidebar.icon-only .nav-section,
.sidebar.icon-only .nav-links li a span,
.sidebar.icon-only .nav-badge,
.sidebar.icon-only .sidebar-footer .sf-name,
.sidebar.icon-only .sidebar-footer .sf-role,
.sidebar.icon-only .sidebar-footer img,
.sidebar.icon-only .sidebar-footer .avatar.sm { display: none; }
.sidebar.icon-only .nav-links li a {
  justify-content: center; padding: 11px 0; gap: 0; border-radius: 8px; margin: 0 10px;
}
.sidebar.icon-only .nav-links li a svg { flex-shrink: 0; }
.sidebar.icon-only .nav-links li a.active { background: rgba(46,134,193,.18); }
.sidebar.icon-only .nav-links li a:hover  { background: rgba(255,255,255,.08); }
.sidebar.icon-only .sf-user { justify-content: center; padding: 10px 0; }
.sidebar.icon-only .nav-links { padding: 8px 0; }
.sidebar.icon-only .nav-links li a[title]:hover::after {
  content: attr(title); position: absolute; left: 70px; top: 50%;
  transform: translateY(-50%); background: #0D1B2A; color: white;
  padding: 4px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 500;
  white-space: nowrap; z-index: 999; pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
@media (max-width: 768px) {
  .sidebar.icon-only { width: var(--sidebar-w); }
  .sidebar.icon-only .nav-section,
  .sidebar.icon-only .nav-links li a span,
  .sidebar.icon-only .nav-badge { display: revert; }
  .sidebar.icon-only .nav-links li a { justify-content: flex-start; padding: 10px 16px; gap: 12px; margin: 1px 8px; }
}

/* ============================================================
   TASK TABLE — grid borders
   ============================================================ */
.data-table { border-collapse: collapse; }
.data-table th,
.data-table td { border: 1px solid var(--border); }
.data-table th { border-bottom: 2px solid var(--border-2); }

/* ============================================================
   THEME FAB + POPUP
   ============================================================ */
.theme-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 500;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--blue); color: white;
  border: none; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s, box-shadow .2s;
}
.theme-fab:hover { transform: scale(1.1); box-shadow: 0 6px 22px rgba(0,0,0,.3); }
@media (max-width: 768px) { .theme-fab { bottom: 80px; } }

.theme-popup {
  display: none; position: fixed; bottom: 82px; right: 24px; z-index: 600;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px; width: 268px;
  box-shadow: var(--shadow-lg); animation: popup-in .17s ease;
}
.theme-popup.open { display: block; }
@media (max-width: 768px) { .theme-popup { bottom: 140px; right: 14px; left: 14px; width: auto; } }

.theme-popup-title {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: var(--text-4); margin-bottom: 12px;
}
.theme-swatches { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-bottom: 14px; }
.theme-swatch {
  width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
  border: 2px solid transparent; transition: transform .15s, border-color .15s;
}
.theme-swatch:hover   { transform: scale(1.12); }
.theme-swatch.active  { border-color: var(--text-1); transform: scale(1.08); }
.theme-custom-row { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--border); }
.theme-custom-label { font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.theme-custom-input { width: 48px; height: 32px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; padding: 2px; }

/* Milestones redesign */
.ms-board { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 4px; }
@media (max-width: 860px) { .ms-board { grid-template-columns: 1fr; } }
.ms-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 20px;
  display: flex; align-items: flex-start; gap: 14px;
  transition: box-shadow .15s;
}
.ms-card:hover { box-shadow: var(--shadow); }
.ms-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.ms-icon.done  { background: #ECFDF5; }
.ms-icon.pending { background: #EFF6FF; }
.ms-body { flex: 1; min-width: 0; }
.ms-title { font-size: 14px; font-weight: 600; color: var(--text-1); margin-bottom: 4px; line-height: 1.4; }
.ms-meta  { font-size: 12px; color: var(--text-3); display: flex; gap: 10px; flex-wrap: wrap; }
.ms-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; margin-left: auto; }
.ms-progress-ring { width: 80px; height: 80px; flex-shrink: 0; }

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] {
  --bg:          #0F172A;
  --bg-2:        #1A2640;
  --bg-3:        #1E2E47;
  --card-bg:     #182236;
  --border:      rgba(255,255,255,.07);
  --border-2:    rgba(255,255,255,.13);
  --text-1:      #F1F5F9;
  --text-2:      #CBD5E1;
  --text-3:      #94A3B8;
  --text-4:      #64748B;
  --text-5:      #475569;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --shadow:      0 4px 12px rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.4);
  --shadow-lg:   0 20px 40px rgba(0,0,0,.7), 0 8px 16px rgba(0,0,0,.5);
  --blue-pale:   rgba(46,134,193,.12);
  --blue-pale-2: rgba(46,134,193,.2);
  --green-bg:    rgba(5,150,105,.15);
  --green-border:rgba(5,150,105,.3);
  --red-bg:      rgba(220,38,38,.15);
  --red-border:  rgba(220,38,38,.3);
  --orange-bg:   rgba(217,119,6,.15);
  --orange-border:rgba(217,119,6,.3);
  --purple-bg:   rgba(124,58,237,.15);
  --teal-bg:     rgba(8,145,178,.15);
}

[data-theme="dark"] .topbar {
  background: #162234;
  border-bottom-color: rgba(255,255,255,.07);
  box-shadow: 0 1px 8px rgba(0,0,0,.4);
}
[data-theme="dark"] .brand-name { color: #F1F5F9; }

[data-theme="dark"] .dropdown {
  background: #1E2E47;
  border-color: rgba(255,255,255,.1);
}
[data-theme="dark"] .dropdown-header { border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .dropdown-item:hover { background: rgba(46,134,193,.12); color: #F1F5F9; }
[data-theme="dark"] .dropdown-item.unread { background: rgba(46,134,193,.1); }
[data-theme="dark"] .dropdown-footer { border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .dropdown-divider  { border-color: rgba(255,255,255,.08); }

[data-theme="dark"] input[type=text],
[data-theme="dark"] input[type=email],
[data-theme="dark"] input[type=password],
[data-theme="dark"] input[type=number],
[data-theme="dark"] input[type=date],
[data-theme="dark"] input[type=file],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--bg-2);
  border-color: var(--border-2);
  color: var(--text-1);
}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus { background: var(--bg-3); }
[data-theme="dark"] input:disabled,
[data-theme="dark"] select:disabled { background: var(--bg-2); color: var(--text-4); }

[data-theme="dark"] .search-wrap input { background: var(--bg-2); color: var(--text-1); }
[data-theme="dark"] .search-wrap input:focus { background: var(--bg-3); }

[data-theme="dark"] .user-pill { border-color: rgba(255,255,255,.12); color: var(--text-1); }
[data-theme="dark"] .user-pill:hover { background: rgba(255,255,255,.06); }

[data-theme="dark"] .btn-ghost { color: var(--text-2); border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); color: #F1F5F9; }

[data-theme="dark"] .check-pill { background: var(--bg-2); border-color: var(--border-2); color: var(--text-2); }
[data-theme="dark"] .check-pill:has(input:checked), [data-theme="dark"] .check-pill.checked {
  background: var(--blue); color: white; border-color: var(--blue);
}

[data-theme="dark"] .data-table th { background: var(--bg-2); }
[data-theme="dark"] .data-table tr:hover td { background: rgba(46,134,193,.07); }
[data-theme="dark"] .task-row:hover      { background: rgba(46,134,193,.07); }
[data-theme="dark"] .msg-row:hover       { background: rgba(46,134,193,.07); }
[data-theme="dark"] .msg-list-row:hover  { background: rgba(46,134,193,.07); }
[data-theme="dark"] .msg-list-row.unread { background: rgba(46,134,193,.08); }
[data-theme="dark"] .card-footer-link:hover { background: rgba(46,134,193,.1); }

[data-theme="dark"] .filter-bar { background: var(--bg-2); border-color: var(--border); }

[data-theme="dark"] .mail-sidebar { background: var(--bg-2); }
[data-theme="dark"] .mail-main    { background: var(--card-bg); }
[data-theme="dark"] .msg-detail-header { background: var(--bg-2); }
[data-theme="dark"] .msg-body-text { color: var(--text-2); }

[data-theme="dark"] .detail-notes { background: rgba(217,119,6,.1); border-color: rgba(217,119,6,.2); color: #FCD34D; }

/* Dark mode toggle button */
.dark-toggle {
  width: 36px; height: 36px; background: none; border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; color: var(--text-3); transition: all .15s; font-size: 16px;
}
.dark-toggle:hover { background: var(--bg-2); color: var(--text-1); border-color: var(--border-2); }

/* ============================================================
   MOBILE BOTTOM NAV
   ============================================================ */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,.08);
  z-index: 400;
  padding: 0 0 env(safe-area-inset-bottom, 0px);
}
.bn-items { display: flex; }
.bn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 8px 4px 10px;
  color: rgba(255,255,255,.45); text-decoration: none;
  font-size: 10px; font-weight: 500; transition: color .14s; position: relative;
}
.bn-item svg { width: 22px; height: 22px; }
.bn-item.active, .bn-item:hover { color: #5BB3DA; }
.bn-item.active::after {
  content: ''; position: absolute; top: 0; left: 20%; right: 20%;
  height: 2px; background: var(--blue-light); border-radius: 0 0 2px 2px;
}
.bn-badge {
  position: absolute; top: 6px; right: calc(50% - 14px);
  background: var(--red); color: white; font-size: 9px; font-weight: 700;
  min-width: 14px; height: 14px; border-radius: 7px; padding: 0 2px;
  display: flex; align-items: center; justify-content: center;
}

/* ============================================================
   ENHANCED MOBILE
   ============================================================ */
@media (max-width: 768px) {
  .bottom-nav { display: block; }
  .page-content { padding: 16px 14px 80px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .dash-grid { grid-template-columns: 1fr; gap: 14px; }
  .span-2, .span-3 { grid-column: span 1; }
  .chat-layout { flex-direction: column; height: auto; }
  .chat-sidebar { width: 100%; height: auto; max-height: 180px; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .page-header .btn-group { width: 100%; }
  .page-header .btn { flex: 1; justify-content: center; }
  .card-header { flex-wrap: wrap; gap: 8px; }
  .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 560px; }
  .detail-layout { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .stat-num { font-size: 22px; }
  .topbar-search { display: none; }
  .brand-name { display: none; }
  .user-name  { display: none; }

  /* Login page on mobile */
  .login-left { display: none; }
  .login-right { padding: 20px; min-height: 100vh; }
  .login-card { padding: 32px 22px; }

  /* Calendar on mobile */
  .cal-cell { min-height: 70px; }
  .cal-task { font-size: 10px; }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-card { padding: 12px 14px; gap: 10px; }
  .stat-icon { width: 36px; height: 36px; }
  .stat-icon svg { width: 18px; height: 18px; }
  .stat-num { font-size: 20px; }
  .cal-cell { min-height: 55px; padding: 4px; }
  .cal-dow { padding: 6px 0; font-size: 10px; }
}