/* ============================================
   Chamanke ContractFlow — Brand Theme
   Colors: Navy #1e293b + Coral #f05228
   ============================================ */
:root {
  /* Chamanke Brand Palette */
  --bg-primary: #f8fafc;
  --bg-secondary: #e2e8f0;
  --bg-tertiary: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;
  --bg-sidebar: #1e293b;
  --bg-sidebar-hover: #273548;
  --bg-input: #ffffff;
  --bg-modal: #ffffff;

  --border-primary: #e2e8f0;
  --border-input: #cbd5e1;
  --border-sidebar: rgba(255,255,255,0.08);

  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-tertiary: #94a3b8;
  --text-sidebar: #cbd5e1;
  --text-sidebar-active: #ffffff;

  /* Chamanke Coral accent */
  --accent: #e52121;
  --accent-hover: #cc1b1b;
  --accent-light: rgba(229,33,33,0.08);
  --accent-glow: rgba(229,33,33,0.12);

  --success: #16a34a;
  --success-bg: rgba(22,163,74,0.08);
  --danger: #dc2626;
  --danger-bg: rgba(220,38,38,0.08);
  --warning: #d97706;
  --warning-bg: rgba(217,119,6,0.08);
  --info: #2563eb;
  --info-bg: rgba(37,99,235,0.08);

  --sidebar-width: 264px;
  --header-height: 64px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  /* Refined, multi-layered shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.02);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  --shadow-glow: 0 0 20px rgba(229,33,33,0.15);

  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.2);

  --table-header-bg: #1e293b;
  --table-header-text: #ffffff;
  --table-border: #cbd5e1;
  --bg-table-stripe: #e6f0fb;

  --transition-fast: 0.15s ease;
  --transition-med: 0.25s cubic-bezier(0.4,0,0.2,1);

  /* Typography — single source for the app font family */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

[data-theme="dark"] {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #1e293b;
  --bg-card: #1e293b;
  --bg-card-hover: #273548;
  --bg-sidebar: #0b1120;
  --bg-sidebar-hover: #162032;
  --bg-input: #1e293b;
  --bg-modal: #1e293b;

  --border-primary: #334155;
  --border-input: #475569;
  --border-sidebar: rgba(255,255,255,0.06);

  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
  --text-sidebar: #94a3b8;
  --text-sidebar-active: #ffffff;

  --accent-light: rgba(229,33,33,0.15);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.5);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.1);

  --glass-bg: rgba(15, 23, 42, 0.85);
  --glass-border: rgba(255, 255, 255, 0.06);

  --table-header-bg: #0b1120;
  --table-header-text: #f8fafc;
  --table-border: #334155;
  --bg-table-stripe: rgba(255,255,255,0.03);
}

/* ---- Reset & Base ---- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:14px; scroll-behavior:smooth }
body {
  font-family:var(--font-sans);
  background:var(--bg-primary);
  color:var(--text-primary);
  display:flex;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection { background:rgba(229,33,33,0.2); color:#1e293b }
::-webkit-scrollbar { width:6px; height:6px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px }
::-webkit-scrollbar-thumb:hover { background:#94a3b8 }

/* ---- SIDEBAR ---- */
.sidebar {
  width:var(--sidebar-width);
  min-height:100vh;
  background:linear-gradient(180deg, var(--bg-sidebar) 0%, #0f172a 100%);
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0; left:0;
  z-index:100;
  transition:transform var(--transition-med);
  box-shadow: 4px 0 24px rgba(0,0,0,0.15);
}
.sidebar-header {
  padding:22px 22px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.logo { display:flex; align-items:center; gap:11px }
.logo-img {
  width:36px; height:36px;
  background: #ffffff;
  border-radius: 50%;
  object-fit: contain;
  padding: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.logo-text {
  font-size:1.2rem;
  font-weight:700;
  color:#ffffff;
  letter-spacing:-0.02em;
}
.sidebar-toggle { display:none; background:none; border:none; color:var(--text-sidebar); font-size:1.2rem; cursor:pointer }

.sidebar-nav { flex:1; overflow-y:auto; padding:16px 0 }
.nav-section { margin-bottom:6px }
.nav-label {
  display:block;
  font-size:0.68rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:rgba(255,255,255,0.3);
  padding:14px 22px 8px;
}
.nav-item {
  display:flex; align-items:center; gap:11px;
  padding:10px 22px;
  color:var(--text-sidebar);
  text-decoration:none;
  font-size:0.88rem; font-weight:500;
  transition:all var(--transition-fast);
  position:relative;
  cursor:pointer;
  margin:1px 8px;
  border-radius:var(--radius-sm);
}
.nav-item:hover {
  color:#fff;
  background:rgba(255,255,255,0.06);
}
.nav-item.active {
  color:#fff;
  background:linear-gradient(90deg, rgba(229,33,33,0.15), rgba(229,33,33,0.02));
  box-shadow: inset 0 0 0 1px rgba(229,33,33,0.1);
}
.nav-item.active::before {
  content:'';
  position:absolute;
  left:-8px;
  top:6px; bottom:6px;
  width:3px;
  background:var(--accent);
  border-radius:0 3px 3px 0;
  box-shadow: 0 0 8px rgba(229,33,33,0.4);
}
.nav-icon { font-size:1rem; width:22px; text-align:center; flex-shrink:0 }
.nav-text { flex:1 }
.nav-badge {
  font-size:0.68rem; font-weight:600;
  padding:2px 8px;
  border-radius:10px;
  background:rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.7);
  min-width:22px; text-align:center;
}
.nav-badge.badge-success { background:rgba(22,163,74,0.2); color:#4ade80 }
.nav-badge.badge-danger { background:rgba(220,38,38,0.2); color:#f87171 }
.nav-badge.badge-warning { background:rgba(217,119,6,0.2); color:#fbbf24 }

.sidebar-footer {
  padding:16px;
  border-top:1px solid rgba(255,255,255,0.06);
  display:flex; flex-direction:column; gap:6px;
}
.btn-export,.btn-import {
  display:flex; align-items:center; gap:8px;
  padding:9px 14px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.04);
  color:var(--text-sidebar);
  font-size:0.8rem; font-weight:500;
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:all var(--transition-fast);
  font-family:inherit;
}
.btn-export:hover,.btn-import:hover {
  background:rgba(255,255,255,0.08);
  color:#fff;
  border-color:rgba(255,255,255,0.15);
}

/* ---- MAIN CONTENT ---- */
.main-content {
  flex:1;
  margin-left:var(--sidebar-width);
  min-height:100vh;
  display:flex; flex-direction:column;
}
.main-header {
  height:var(--header-height);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 32px;
  border-bottom:1px solid var(--glass-border);
  background:var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position:sticky; top:0; z-index:50;
  gap:16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02), 0 1px 0 rgba(0,0,0,0.02);
}
.header-left { display:flex; align-items:center; gap:12px }
.mobile-menu-btn { display:none; background:none; border:none; color:var(--text-primary); font-size:1.3rem; cursor:pointer }
.page-title { font-size:1.2rem; font-weight:700; letter-spacing:-0.02em; color:var(--text-primary) }
.header-right { display:flex; align-items:center; gap:12px }

.search-box {
  display:flex; align-items:center; gap:8px;
  background:var(--bg-input);
  border:1px solid var(--border-input);
  border-radius:var(--radius-md);
  padding:0 14px;
  transition:all var(--transition-fast);
  width:280px;
}
.search-box:focus-within {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(229,33,33,0.08);
  background:#fff;
}
.search-icon { font-size:0.85rem; opacity:0.4 }
.search-box input {
  background:none; border:none; outline:none;
  color:var(--text-primary);
  font-size:0.88rem; font-family:inherit;
  padding:10px 0; width:100%;
}
.search-box input::placeholder { color:var(--text-tertiary) }

/* ---- BUTTONS ---- */
.btn-primary {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 22px;
  background:linear-gradient(135deg, #e52121 0%, #b91c1c 100%);
  color:#ffffff;
  font-size:0.88rem; font-weight:600; font-family:inherit;
  border:none;
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:all var(--transition-fast);
  white-space:nowrap;
  box-shadow: 0 2px 8px rgba(229,33,33,0.3), 0 1px 3px rgba(0,0,0,0.1);
}
.btn-primary:hover {
  background:linear-gradient(135deg, #cc1b1b 0%, #991b1b 100%);
  box-shadow: 0 4px 12px rgba(229,33,33,0.4), 0 2px 6px rgba(0,0,0,0.1);
  transform:translateY(-1px);
}
.btn-primary:active { transform:translateY(0) scale(0.98) }

.btn-secondary {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 20px;
  background:var(--bg-card);
  color:var(--text-primary);
  font-size:0.88rem; font-weight:500; font-family:inherit;
  border:1px solid var(--border-primary);
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:all var(--transition-fast);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.btn-secondary:hover { background:var(--bg-card-hover); border-color:var(--text-tertiary) }

.btn-danger {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 20px;
  background:var(--danger-bg);
  color:var(--danger);
  font-size:0.88rem; font-weight:600; font-family:inherit;
  border:1px solid rgba(220,38,38,0.15);
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:all var(--transition-fast);
}
.btn-danger:hover { background:rgba(220,38,38,0.12); border-color:rgba(220,38,38,0.3) }

/* ============================================================================
   Semantic typography helpers — mirror the classes defined in print-styles.css
   so the same vocabulary works in BOTH the live app (theme-aware via CSS
   variables) and in printed reports (hex-fixed). Lets module code write
   <td class="text-mono text-neg"> and have it look right everywhere.
   ============================================================================ */
.text-muted  { color: var(--text-tertiary); }
.text-mono   { font-family: 'JetBrains Mono','Fira Code','Courier New',monospace; }
.text-pos    { color: var(--success); font-weight: 600; }
.text-neg    { color: var(--danger);  font-weight: 600; }
.text-warn   { color: var(--warning); font-weight: 600; }
.text-accent { color: var(--accent);  font-weight: 600; }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-bold   { font-weight: 700; }
.text-italic { font-style: italic; }
.text-placeholder { color: var(--text-tertiary); font-style: italic; opacity: 0.7; }
.row-spacer  { min-height: 40px; }