/* ========================================
   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; }

/* ========================================
   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 — Overrides
======================================== */

/* --- Logo: invert white logo to dark in light theme --- */
body.theme-light .tiga-logo svg path {
  fill: #262626;
}

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

/* Keep white text on primary action buttons (dark bg) */
body.theme-light .bg-tiga-light.text-white,
body.theme-light .bg-tiga-light > .text-white {
  color: #fff !important;
}

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

/* --- Tabs --- */
body.theme-light .tab-active { background:rgba(82,82,82,.12); color:#262626; border-bottom-color:rgb(var(--c-light)); }
body.theme-light .tab-inactive { color:rgba(82,82,82,.45); }
body.theme-light .tab-inactive:hover { color:rgba(82,82,82,.8); background:rgba(82,82,82,.08); }

/* --- Card shadow --- */
body.theme-light .card:hover { box-shadow:0 6px 20px rgba(0,0,0,.08); }

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

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

/* --- Scrollbar Firefox --- */
body.theme-light { scrollbar-color: #a3a3a3 #f5f5f5; }

/* --- Select option backgrounds --- */
body.theme-light select option {
  background: #fff;
  color: #262626;
}

/* --- Emerald/Red accent buttons: keep their text colors --- */
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; }

/* --- Deal status badges stronger --- */
body.theme-light .bg-emerald-900\/20 { background-color: rgba(5,150,105,.1) !important; }
body.theme-light .bg-red-900\/20 { background-color: rgba(220,38,38,.1) !important; }
body.theme-light .border-emerald-400\/20 { border-color: rgba(5,150,105,.2) !important; }
body.theme-light .border-red-400\/20 { border-color: rgba(220,38,38,.2) !important; }

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

/* ========================================
   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,.1); }
body.theme-light .cmd-palette-box { border-color: 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 { border-color: 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; }