/* ============================================================
   sobi Desk — Premium visual skin (loads last, overrides base)
   Pure styling. No structural/logic changes. Works in dark + light.
   ============================================================ */

@keyframes sobiRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sobiPulse{0%,100%{box-shadow:0 0 0 0 rgba(248,113,113,.45),0 0 18px rgba(248,113,113,.12)}50%{box-shadow:0 0 0 5px rgba(248,113,113,0),0 0 26px rgba(248,113,113,.28)}}
@keyframes sobiBlink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes sobiShine{to{background-position:200% center}}

/* ---- Cards: elevated, rounded, hover lift with accent ---- */
#main .card,
#main .ops-card,
#main .stat,
#main .info-box,
#main .analytics-panel,
#main .note-card{
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--bg2);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  position:relative;
}
#main .ops-card:hover,
#main .card:hover,
#main .stat:hover{
  transform:translateY(-3px);
  border-color:rgba(124,92,255,.45);
  box-shadow:0 10px 26px rgba(0,0,0,.22);
}

/* KPI numbers pop with the brand gradient */
#main .ops-card-value,
#main .stat-v{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:800;
}
#main .ops-card.warn .ops-card-value{background:none;-webkit-text-fill-color:var(--warn);color:var(--warn)}
#main .ops-card.danger .ops-card-value{background:none;-webkit-text-fill-color:var(--danger);color:var(--danger)}

/* Urgent / overdue blocks glow and pulse to grab attention */
#main .ops-card.danger,
#main .kanban-card.overdue,
#main .sec-issue.high{
  border-color:rgba(248,113,113,.5)!important;
  animation:sobiPulse 2.6s ease-in-out infinite;
}

/* ---- Hero ---- */
#main .project-hero{
  background:var(--grad-soft),var(--bg2);
  border:1px solid var(--border);
  border-radius:16px;
  animation:sobiRise .3s ease both;
}
#main .project-hero::before{
  background:var(--grad);
  width:4px;
}

/* ---- Ops sections ---- */
#main .ops-section{
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--bg2);
  overflow:hidden;
  animation:sobiRise .3s ease both;
}
#main .ops-section-head{background:var(--grad-soft)}
#main .ops-section-title{color:var(--text)}
#main .ops-row:hover{background:var(--grad-soft)}

/* Progress bars use the brand gradient */
#main .progress-fill,
#main .prog-bar-fill{background:var(--grad)!important}

/* ---- Sidebar: gradient active pill + glow ---- */
#sidebar .nav-item{border-radius:10px;transition:background .14s,color .14s,box-shadow .14s}
#sidebar .nav-item:hover{background:var(--bg3)}
#sidebar .nav-item.active{
  background:var(--grad);
  color:#fff;
  box-shadow:0 6px 18px rgba(124,92,255,.32);
}
#sidebar .nav-item.active .badge{background:rgba(255,255,255,.25);color:#fff}
#sidebar .badge{background:var(--bg3);color:var(--text3)}

/* Bottom-nav active gets the accent too */
#bottom-nav .bnav-item.active{color:var(--accent2)}

/* ---- Primary button + add button: gradient ---- */
.btn-primary{background:var(--grad)!important;border:0!important;box-shadow:0 4px 14px rgba(124,92,255,.3)}
.btn-primary:hover{filter:brightness(1.08)}

/* ---- Topbar logo shimmer ---- */
.logo{
  background:linear-gradient(90deg,var(--accent2),var(--accent3),var(--accent2));
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sobiShine 5s linear infinite;
}
.logo i{-webkit-text-fill-color:var(--accent2);color:var(--accent2)}

/* ---- Scrollbar accent ---- */
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--accent),var(--accent3));border-radius:4px}

/* ---- Status dots live glow ---- */
#main .dot{box-shadow:0 0 7px currentColor}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #main .card,#main .ops-card,#main .stat,#main .project-hero,#main .ops-section{animation:none}
  #main .ops-card.danger,#main .kanban-card.overdue,#main .sec-issue.high{animation:none}
  .logo{animation:none}
}

/* ============================================================
   Whole-system coverage — shared components across all sections
   ============================================================ */

/* Modals: glassy, elevated, gradient title accent */
.overlay{backdrop-filter:blur(5px)}
.modal{border-radius:16px;border:1px solid var(--border);box-shadow:0 24px 60px rgba(0,0,0,.45),var(--glow)}
.modal-title{color:var(--text)}
.modal-title i{color:var(--accent2)}

/* Form inputs: focus glow */
.fi:focus,.fsel:focus,.fta:focus,.si:focus,.notes-ta:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(124,92,255,.16)}

/* Workspace list rows: gradient active + hover */
.ws-row{border-radius:10px;transition:background .12s,border-color .12s,transform .12s}
.ws-row:hover{transform:translateX(-2px)}
.ws-row.active{background:var(--grad-soft);border-color:rgba(124,92,255,.4)}

/* Segmented tabs + project tabs: gradient active */
.seg-tab.active{background:var(--grad);color:#fff;box-shadow:0 3px 10px rgba(124,92,255,.3)}
.ptab.active{color:var(--accent2)}
.view-btn.active,.ws-tb-btn.active{background:var(--grad)!important;border-color:transparent!important;color:#fff!important}

/* Inspector header title: gradient */
.inspector-header h1{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content;max-width:100%}

/* Tables: refined header + hover */
.ws-table th{background:var(--bg2)}
.ws-table tr:hover td{background:var(--grad-soft)}
.ws-table tr.active td{background:var(--grad-soft)}

/* Tag chips active gradient (global) */
.tag-chip.active{background:var(--grad);border-color:transparent;color:#fff}

/* Command palette: premium */
.cmd-box{border-radius:16px;border:1px solid var(--border);box-shadow:0 24px 60px rgba(0,0,0,.5),var(--glow)}
.cmd-item.focused,.cmd-item:hover{background:var(--grad-soft)}
.cmd-item-icon{background:var(--grad-soft)}

/* Topbar search: subtle accent on hover */
.topbar-search-bar:hover{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(124,92,255,.12)}

/* Kanban cards + columns */
.kanban-col{border-radius:14px}
.kanban-card{border-radius:10px;transition:transform .15s,border-color .15s}
.kanban-card:hover{transform:translateY(-2px);border-color:rgba(124,92,255,.45)}

/* Calendar event chips use the brand gradient */
.cal-ev{background:var(--grad)!important}
.cal-ev.overdue{background:linear-gradient(135deg,#f87171,#fb923c)!important}

/* Progress fills + segmented timeline */
.prog-fill,.progress-fill{background:var(--grad)!important}

/* Empty states: softer */
.ws-empty i,.ws-empty-pro .emp-icon{color:var(--accent2)}
.ws-empty-pro .emp-icon{background:var(--grad-soft)}

/* ============================================================
   Calendar — premium interactive style
   ============================================================ */
@keyframes calPop{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}

.cal-cell{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:6px 7px;
  transition:border-color .15s,background .15s,box-shadow .15s;
  animation:calPop .2s ease both;
  position:relative;
  overflow:hidden;
}
.cal-cell:hover{
  border-color:rgba(124,92,255,.45);
  background:var(--bg3);
  box-shadow:0 4px 14px rgba(0,0,0,.2);
}
.cal-cell.cal-today{
  border-color:var(--accent)!important;
  box-shadow:var(--glow);
}
.cal-cell.cal-has-items::after{
  content:'';position:absolute;inset-inline-end:6px;top:6px;
  width:5px;height:5px;border-radius:50%;
  background:var(--accent2);
  box-shadow:0 0 6px var(--accent2);
}
.cal-cell.cal-empty{background:transparent;border-color:transparent;pointer-events:none}
.cal-num{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:4px;display:flex;justify-content:flex-end}
.cal-today-num{
  background:var(--grad);
  color:#fff;
  border-radius:50%;
  width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:11px;
}
.cal-ev{
  font-size:10px;padding:2px 5px;border-radius:5px;
  margin-bottom:2px;
  background:var(--grad);
  color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;
  transition:opacity .12s;
}
.cal-ev:hover{opacity:.8}
.cal-ev.overdue{background:linear-gradient(135deg,#f87171,#fb923c)!important}
.cal-ev-rem{background:linear-gradient(135deg,var(--warn),#fb923c)!important}
.cal-list-row{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-radius:9px;margin-bottom:4px;
  background:var(--bg2);border:1px solid var(--border);
  transition:all .15s;
}
.cal-list-row:hover{border-color:rgba(124,92,255,.4);background:var(--bg3)}

/* ============================================================
   Dashboard — neon bento stats
   ============================================================ */
@keyframes neonPulseGlow{
  0%,100%{box-shadow:0 0 8px var(--accent),0 4px 20px rgba(0,0,0,.3)}
  50%{box-shadow:0 0 22px var(--accent),0 4px 30px rgba(0,0,0,.4)}
}
@keyframes borderRotate{
  to{--border-angle:360deg}
}

/* Stats grid: 6 columns on desktop */
.stats-6{grid-template-columns:repeat(6,1fr)!important}
@media(max-width:900px){.stats-6{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:500px){.stats-6{grid-template-columns:repeat(2,1fr)!important}}

/* Enhanced stat cards */
#main .stat{
  position:relative;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
#main .stat::before{
  content:'';position:absolute;inset:0;
  background:var(--grad);opacity:0;
  transition:opacity .2s;
  border-radius:inherit;
}
#main .stat:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 12px 32px rgba(0,0,0,.3),var(--glow);
}
#main .stat.stat-warn{border-color:rgba(248,113,113,.5)}
#main .stat.stat-warn .stat-v{background:none;-webkit-text-fill-color:var(--danger);color:var(--danger)}

/* Neon theme: extra glow on stat cards */
.theme-neon #main .stat:hover{animation:neonPulseGlow 1.5s ease-in-out infinite}
.theme-ocean #main .stat:hover,
.theme-forest #main .stat:hover{animation:neonPulseGlow 1.5s ease-in-out infinite}

/* Analytics panel premium */
#main .analytics-panel{
  position:relative;overflow:hidden;
  border-radius:14px;
}
#main .analytics-panel::before{
  content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
  background:var(--grad);
}
.prog-row{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;
  padding:8px 12px;border-radius:9px;
  transition:background .15s;
}
.prog-row:hover{background:var(--bg3)}
.prog-label{font-size:12px;color:var(--text2);min-width:120px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prog-pct{font-size:11px;color:var(--text3);min-width:32px;text-align:end}

/* Neon glow accent for active nav items */
.theme-neon #sidebar .nav-item.active{
  animation:neonPulseGlow 2s ease-in-out infinite;
}

/* Shimmer on logo for all premium themes */
.theme-neon .logo,.theme-ocean .logo,.theme-mixed .logo,.theme-forest .logo{
  background:linear-gradient(90deg,var(--accent2),var(--accent3),var(--accent2));
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sobiShine 3s linear infinite;
}

/* Theme-specific scrollbar */
.theme-neon ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#ff2d78,#00f5d4)}
.theme-ocean ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#0ea5e9,#34d399)}
.theme-mixed ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#f97316,#fbbf24)}
.theme-forest ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#22c55e,#86efac)}