/* ========================================
   TIGA OS — Theme Variables
======================================== */
:root {
  --c-dark: 35 61 83;       /* #233D53 */
  --c-blue: 38 63 83;       /* #263F53 */
  --c-mid: 58 90 115;       /* #3A5A73 */
  --c-light: 81 117 147;    /* #517593 */
  --bg-body: #233D53;
  --text-main: #e2e8f0;
  --text-bright: #ffffff;
  --shadow-card: rgba(0,0,0,.4);
  --scrollbar-track: #233D53;
  --scrollbar-thumb: #3A5A73;
}

body.theme-light {
  --c-dark: 245 245 245;    /* #f5f5f5 neutral-100 */
  --c-blue: 255 255 255;    /* #ffffff */
  --c-mid: 163 163 163;     /* #a3a3a3 neutral-400 */
  --c-light: 82 82 82;      /* #525252 neutral-600 */
  --bg-body: #f5f5f5;
  --text-main: #404040;
  --text-bright: #262626;
  --shadow-card: rgba(0,0,0,.08);
  --scrollbar-track: #f5f5f5;
  --scrollbar-thumb: #a3a3a3;
}

/* ========================================
   BASE
======================================== */
* { font-family: 'Montserrat', sans-serif; }
body { background: var(--bg-body); color: var(--text-main); }

/* Scrollbar */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius:3px; }

/* ========================================
   Cards
======================================== */
.card { transition: box-shadow .15s, transform .15s; cursor:pointer; }
.card:hover { transform:translateY(-2px); box-shadow:0 6px 20px var(--shadow-card); }

/* ========================================
   Drag & Drop
======================================== */
.dragging { opacity:.4; }
.drop-zone { transition: background .15s, border .15s; min-height:460px; }
.drag-active { background:rgba(81,117,147,.15); border:2px dashed rgb(var(--c-light)); border-radius:.75rem; }
.drop-indicator { height:3px; background:rgb(var(--c-light)); border-radius:2px; margin:4px 0; transition:opacity .1s; }

/* ========================================
   Checkbox
======================================== */
.check-box { width:17px; height:17px; accent-color:rgb(var(--c-light)); cursor:pointer; flex-shrink:0; margin-top:2px; }

/* ========================================
   Modal
======================================== */
.modal-bg { animation:fadeIn .15s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal-box { animation:slideUp .2s ease; }
@keyframes slideUp { from{transform:translateY(16px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ========================================
   Sidebar slide (mobile drawer)
======================================== */
.sidebar-slide { animation:slideIn .2s ease; }
@keyframes slideIn { from{transform:translateX(-100%)} to{transform:translateX(0)} }

/* ========================================
   Badges
======================================== */
.badge { display:inline-flex; align-items:center; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:600; white-space:nowrap; }
.b-blue   { background:rgba(81,117,147,.25);  color:#a8c5da; }
.b-green  { background:rgba(52,211,153,.15);  color:#6ee7b7; }
.b-orange { background:rgba(251,146,60,.15);  color:#fbbf7a; }
.b-red    { background:rgba(248,113,113,.15); color:#fca5a5; }
.b-purple { background:rgba(167,139,250,.15); color:#c4b5fd; }
.b-gray   { background:rgba(156,163,175,.15); color:#9ca3af; }

/* ========================================
   Forms
======================================== */
input,textarea,select { font-family:'Montserrat',sans-serif !important; }

/* ========================================
   Tabs
======================================== */
.tab-active { background:rgba(81,117,147,.2); color:var(--text-bright); border-bottom:2px solid rgb(var(--c-light)); }
.tab-inactive { color:rgba(161,196,218,.5); }
.tab-inactive:hover { color:rgba(161,196,218,.8); background:rgba(81,117,147,.1); }

/* ========================================
   Admin Dashboard
======================================== */
.admin-progress-bar { transition: width 0.5s ease; }
.activity-feed { scrollbar-width: thin; }

/* ========================================
   PORTAL LOGO
======================================== */
.portal-logo-preview svg { max-width:100%; max-height:100%; width:auto; height:auto; }
.portal-icon { border-radius: 4px; overflow: hidden; }
.portal-logo-preview svg { border-radius: 4px; overflow: hidden; }

/* ========================================
   NEW Badge
======================================== */
.badge-new {
  display:inline-flex; align-items:center; padding:1px 7px; border-radius:999px;
  font-size:9px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  background:linear-gradient(135deg, rgba(52,211,153,.25), rgba(56,189,248,.25));
  color:#6ee7b7; border:1px solid rgba(52,211,153,.3);
  animation: newPulse 2s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes newPulse {
  0%, 100% { opacity:1; }
  50% { opacity:.6; }
}

/* ========================================
   LIGHT THEME — Clean White & Gray
======================================== */

/* --- Theme transition for smooth switching --- */
body { transition: background-color .3s ease, color .3s ease; }

/* --- Core Tailwind color overrides: tiga-* → white/gray --- */
body.theme-light .bg-tiga-dark  { background-color: #f5f5f5 !important; }
body.theme-light .bg-tiga-blue  { background-color: #ffffff !important; }
body.theme-light .bg-tiga-mid   { background-color: #e5e5e5 !important; }
body.theme-light .bg-tiga-light { background-color: #525252 !important; }

/* Backgrounds with opacity */
body.theme-light [class*="bg-tiga-mid\/"]  { background-color: rgba(229,229,229,.5) !important; }
body.theme-light [class*="bg-tiga-blue\/"] { background-color: rgba(255,255,255,.5) !important; }
body.theme-light [class*="bg-tiga-dark\/"] { background-color: rgba(245,245,245,.5) !important; }
body.theme-light .bg-tiga-light\/80 { background-color: rgba(82,82,82,.8) !important; }
body.theme-light .bg-tiga-light\/20 { background-color: rgba(82,82,82,.12) !important; }
body.theme-light .bg-tiga-light\/25 { background-color: rgba(82,82,82,.15) !important; }
body.theme-light .bg-tiga-light\/15 { background-color: rgba(82,82,82,.08) !important; }
body.theme-light .bg-tiga-light\/10 { background-color: rgba(82,82,82,.06) !important; }
body.theme-light .bg-tiga-mid\/50   { background-color: rgba(229,229,229,.5) !important; }
body.theme-light .bg-tiga-mid\/60   { background-color: rgba(229,229,229,.6) !important; }
body.theme-light .bg-tiga-mid\/70   { background-color: rgba(229,229,229,.7) !important; }
body.theme-light .bg-tiga-mid\/40   { background-color: rgba(229,229,229,.4) !important; }
body.theme-light .bg-tiga-mid\/30   { background-color: rgba(229,229,229,.3) !important; }
body.theme-light .bg-tiga-mid\/20   { background-color: rgba(245,245,245,.6) !important; }
body.theme-light .bg-tiga-mid\/15   { background-color: rgba(245,245,245,.5) !important; }
body.theme-light .bg-tiga-mid\/10   { background-color: rgba(245,245,245,.3) !important; }

/* Borders → light gray */
body.theme-light [class*="border-tiga-light"] { border-color: rgba(212,212,212,.5) !important; }
body.theme-light [class*="border-tiga-mid"]   { border-color: rgba(212,212,212,.4) !important; }

/* Text colors: tiga-light → gray in light mode */
body.theme-light [class*="text-tiga-light"] { color: rgba(82,82,82,.6) !important; }

/* --- All SVG logos: white → black in light mode (except portal icons) --- */
body.theme-light svg path[fill="#fff"],
body.theme-light svg path[fill="#ffffff"],
body.theme-light svg path[fill="white"],
body.theme-light svg path[fill="#FFF"],
body.theme-light svg path[fill="#FFFFFF"] { fill: #1a1a1a !important; }
body.theme-light .portal-icon svg path[fill="#fff"],
body.theme-light .portal-icon svg path[fill="#ffffff"],
body.theme-light .portal-icon svg path[fill="white"],
body.theme-light .portal-icon svg path[fill="#FFF"],
body.theme-light .portal-icon svg path[fill="#FFFFFF"],
body.theme-light .portal-logo-preview svg path[fill="#fff"],
body.theme-light .portal-logo-preview svg path[fill="#ffffff"],
body.theme-light .portal-logo-preview svg path[fill="white"],
body.theme-light .portal-logo-preview svg path[fill="#FFF"],
body.theme-light .portal-logo-preview svg path[fill="#FFFFFF"] { fill: #fff !important; }

/* --- Text: override text-white to dark --- */
body.theme-light .text-white { color: #1a1a1a !important; }
body.theme-light .text-white\/80 { color: rgba(26,26,26,.8) !important; }
body.theme-light .text-white\/70 { color: rgba(26,26,26,.7) !important; }
body.theme-light .text-white\/60 { color: rgba(26,26,26,.6) !important; }
body.theme-light .placeholder-white\/60::placeholder { color: rgba(26,26,26,.4) !important; }

/* Placeholder text in inputs */
body.theme-light [class*="placeholder-tiga-light"]::placeholder { color: rgba(82,82,82,.4) !important; }

/* Keep white text on primary action buttons */
body.theme-light .bg-tiga-light .text-white,
body.theme-light .bg-tiga-light.text-white,
body.theme-light [class*="bg-tiga-light"]:not([class*="bg-tiga-light/"]) > .text-white,
body.theme-light button.bg-tiga-light,
body.theme-light a.bg-tiga-light { color: #ffffff !important; }
body.theme-light .bg-tiga-light\/80 { color: #ffffff !important; }
body.theme-light button[class*="bg-red-"],
body.theme-light button[class*="bg-emerald-"],
body.theme-light button[class*="bg-blue-"],
body.theme-light button[class*="bg-orange-"] { color: #ffffff !important; }

/* Focus rings → gray */
body.theme-light [class*="ring-tiga-light"] { --tw-ring-color: rgba(82,82,82,.25) !important; }

/* --- Input/textarea/select backgrounds --- */
body.theme-light input, body.theme-light textarea, body.theme-light select {
  background-color: #f5f5f5 !important;
  border-color: #d4d4d4 !important;
  color: #1a1a1a !important;
}

/* --- Badges: stronger contrast --- */
body.theme-light .b-blue   { background:rgba(59,130,246,.1);  color:#2563eb; }
body.theme-light .b-green  { background:rgba(34,197,94,.1);   color:#16a34a; }
body.theme-light .b-orange { background:rgba(249,115,22,.1);  color:#ea580c; }
body.theme-light .b-red    { background:rgba(239,68,68,.1);   color:#dc2626; }
body.theme-light .b-purple { background:rgba(139,92,246,.1);  color:#7c3aed; }
body.theme-light .b-gray   { background:rgba(115,115,115,.1); color:#525252; }

/* --- Tabs --- */
body.theme-light .tab-active { background:rgba(82,82,82,.08); color:#1a1a1a; border-bottom-color:#525252; }
body.theme-light .tab-inactive { color:rgba(82,82,82,.4); }
body.theme-light .tab-inactive:hover { color:rgba(82,82,82,.7); background:rgba(82,82,82,.06); }

/* --- Card shadow --- */
body.theme-light .card { border-color: rgba(212,212,212,.5) !important; }
body.theme-light .card:hover { box-shadow:0 4px 16px rgba(0,0,0,.06); }

/* --- Modal overlay --- */
body.theme-light .bg-black\/65 { background-color: rgba(0,0,0,.35) !important; }
body.theme-light .bg-black\/50 { background-color: rgba(0,0,0,.25) !important; }
body.theme-light .bg-black\/60 { background-color: rgba(0,0,0,.3) !important; }

/* --- Badge-new --- */
body.theme-light .badge-new {
  background:linear-gradient(135deg, rgba(34,197,94,.12), rgba(14,165,233,.12));
  color:#16a34a; border-color:rgba(34,197,94,.2);
}

/* --- Scrollbar --- */
body.theme-light { scrollbar-color: #d4d4d4 #fafafa; }
body.theme-light ::-webkit-scrollbar-track { background: #fafafa; }
body.theme-light ::-webkit-scrollbar-thumb { background: #d4d4d4; }

/* --- Select option backgrounds --- */
body.theme-light select option { background: #fff; color: #1a1a1a; }
body.theme-light .bg-tiga-dark { background-color: #f5f5f5 !important; }

/* --- Accent text colors (keep readable) --- */
body.theme-light .text-emerald-400 { color: #059669 !important; }
body.theme-light .text-emerald-300 { color: #10b981 !important; }
body.theme-light .text-red-400 { color: #dc2626 !important; }
body.theme-light .text-red-300 { color: #ef4444 !important; }
body.theme-light .text-orange-400 { color: #ea580c !important; }
body.theme-light .text-amber-400 { color: #d97706 !important; }
body.theme-light .text-blue-400 { color: #2563eb !important; }
body.theme-light .text-purple-400 { color: #7c3aed !important; }
body.theme-light .text-cyan-400 { color: #0891b2 !important; }
body.theme-light .text-rose-400 { color: #e11d48 !important; }

/* --- Status backgrounds --- */
body.theme-light .bg-emerald-900\/20 { background-color: rgba(5,150,105,.08) !important; }
body.theme-light .bg-emerald-900\/30 { background-color: rgba(5,150,105,.1) !important; }
body.theme-light .bg-red-900\/20 { background-color: rgba(220,38,38,.08) !important; }
body.theme-light .bg-red-900\/30 { background-color: rgba(220,38,38,.1) !important; }
body.theme-light .bg-red-900\/50 { background-color: rgba(220,38,38,.15) !important; }
body.theme-light .bg-orange-900\/20 { background-color: rgba(234,88,12,.08) !important; }
body.theme-light .bg-orange-900\/30 { background-color: rgba(234,88,12,.1) !important; }
body.theme-light .border-emerald-400\/20 { border-color: rgba(5,150,105,.15) !important; }
body.theme-light .border-red-400\/20 { border-color: rgba(220,38,38,.15) !important; }
body.theme-light .border-red-900\/30 { border-color: rgba(220,38,38,.15) !important; }

/* --- Sidebar: white with subtle border --- */
body.theme-light aside { background-color: #ffffff !important; border-color: #e5e5e5 !important; }
body.theme-light header { background-color: #ffffff !important; border-color: #e5e5e5 !important; }

/* --- Notification badge keeps red+white --- */
body.theme-light .notif-badge { color: #fff !important; }

/* --- Avatar circles --- */
body.theme-light [class*="bg-tiga-light\/25"] { background-color: rgba(82,82,82,.1) !important; }

/* ========================================
   Command Palette
======================================== */
.cmd-palette-bg { animation: fadeIn .15s ease; }
.cmd-palette-box { animation: cmdSlideDown .2s ease; }
@keyframes cmdSlideDown {
  from { transform: translateY(-12px) scale(.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.cmd-item:hover, .cmd-active { background: rgba(81,117,147,.2); }
.cmd-results-scroll { scrollbar-width: thin; }
.cmd-results-scroll::-webkit-scrollbar { width: 4px; }
.cmd-results-scroll::-webkit-scrollbar-thumb { background: rgba(81,117,147,.3); border-radius: 2px; }
body.theme-light .cmd-item:hover,
body.theme-light .cmd-active { background: rgba(82,82,82,.06); }
body.theme-light .cmd-palette-box { background: #ffffff; border-color: #e5e5e5; }
body.theme-light .cmd-results-scroll::-webkit-scrollbar-thumb { background: rgba(82,82,82,.15); }

/* ========================================
   Notification Panel
======================================== */
.notif-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: #fff;
  background: #ef4444;
  border-radius: 9999px;
  animation: notifPulse 2s ease-in-out 3;
}
@keyframes notifPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}
.notif-panel {
  animation: notifSlide .15s ease;
}
@keyframes notifSlide {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.notif-scroll { scrollbar-width: thin; }
.notif-scroll::-webkit-scrollbar { width: 4px; }
.notif-scroll::-webkit-scrollbar-thumb { background: rgba(81,117,147,.3); border-radius: 2px; }
body.theme-light .notif-panel { background: #ffffff !important; border-color: #e5e5e5 !important; }
body.theme-light .notif-scroll::-webkit-scrollbar-thumb { background: rgba(82,82,82,.15); }

/* ========================================
   Quick Nav FAB (floating action button)
======================================== */
.quick-nav-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #517593, #3a5a75);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  cursor: pointer;
  z-index: 40;
  border: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.quick-nav-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(0,0,0,.45);
}
.quick-nav-fab svg { width: 20px; height: 20px; }
body.theme-light .quick-nav-fab {
  background: linear-gradient(135deg, #525252, #404040);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

/* ========================================
   Landing Page
======================================== */
html { scroll-behavior: smooth; }


/* ========================================
   Toast Animation
======================================== */
@keyframes toastSlideIn {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.animate-toast { animation: toastSlideIn .2s ease; }