/* Taskly v6 | The actual skill-chip hover system of BestUI (revisions.css:459-490).
   All previous layout breakpoints and panel dimensions are preserved. */

/* 01 | Source design tokens: BestUI assets/css/base.css */
html[data-theme="dark"] {
  --bg:#070b17; --surface:#070b17; --panel:#10182c;
  --border:rgba(162,180,229,.14); --line:rgba(162,180,229,.14);
  --ink:#f6f7fc; --text:#f6f7fc; --subtext:#a2abc1;
  --muted:#a2abc1; --purple:#8b5cf6; --purple-dark:#6d4ee8;
  --row-hover:#18223d; --shadow:0 20px 65px rgba(0,0,0,.28);
}
html[data-theme="dark"] body,
html[data-theme="dark"] .app-shell {
  background:radial-gradient(ellipse at 16% 4%, rgba(49,101,244,.055),transparent 32%),#070b17;
}
html[data-theme="dark"] .sidebar {
  background:linear-gradient(180deg,#080d1b 0%,#050916 100%);
  border-left:1px solid rgba(162,180,229,.13);
}
html[data-theme="dark"] .topbar {
  background:#0b1120; border-bottom-color:rgba(162,180,229,.13);
}
html[data-theme="dark"] .tasks-panel,
html[data-theme="dark"] .detail-panel,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .stat-card.progress-card {
  background:#10182c; border-color:rgba(162,180,229,.13);
  box-shadow:0 18px 52px rgba(0,0,0,.19),inset 0 1px rgba(255,255,255,.022);
}
html[data-theme="dark"] .table-wrap thead th {background:#141e34;color:#b7c1d8;}
html[data-theme="dark"] .table-wrap tbody tr {background:#10182c;}
html[data-theme="dark"] .table-wrap tbody tr:hover {background:#19243e!important;}
html[data-theme="dark"] .table-wrap tbody tr.selected-row {background:#212240!important;}
html[data-theme="dark"] .table-wrap td {border-bottom-color:rgba(162,180,229,.11);}
html[data-theme="dark"] .top-search,
html[data-theme="dark"] .filter-search,
html[data-theme="dark"] .filters select,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .field select {
  background:#0c1426; border-color:rgba(162,180,229,.18);
}
html[data-theme="dark"] .task-card,
html[data-theme="dark"] .tab-content {background:#0c1426;border-color:rgba(162,180,229,.16);}
html[data-theme="dark"] .ring::before {background:#10182c;}
html[data-theme="dark"] .detail-divider {background:rgba(162,180,229,.13);}
html[data-theme="dark"] .bar {background:#25314c;}
html[data-theme="dark"] .nav-link.active {
  background:linear-gradient(110deg,rgba(139,92,246,.33),rgba(79,124,255,.12));
  box-shadow:inset 0 0 0 1px rgba(139,92,246,.3),0 7px 20px rgba(105,71,240,.1);
}
/* Muted stat surfaces let color emerge on hover, as on BestUI skill cards. */
html[data-theme="dark"] .stat-card.lavender,
html[data-theme="dark"] .stat-card.mint,
html[data-theme="dark"] .stat-card.peach,
html[data-theme="dark"] .stat-card.blue {
  background:linear-gradient(145deg,#151e34,#101728);
  border-color:rgba(162,180,229,.15);
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}

/* 02 | Light mode right sidebar: BestUI-inspired warm/pale white, not harsh #fff. */
html[data-theme="light"] {
  --sidebar-light-text:#283653;
  --sidebar-light-muted:#70809c;
}
html[data-theme="light"] .sidebar {
  background:linear-gradient(165deg,#fcfdff 0%,#f8faff 58%,#f5f7fd 100%);
  border-left:1px solid rgba(52,78,137,.13);
  color:var(--sidebar-light-text);
  box-shadow:-6px 0 26px rgba(44,68,123,.035);
}
html[data-theme="light"] .sidebar .brand,
html[data-theme="light"] .sidebar .side-user strong {color:#1d2b47;}
html[data-theme="light"] .sidebar .side-caption,
html[data-theme="light"] .sidebar .side-user small,
html[data-theme="light"] .sidebar .nav-count {color:#7887a1;}
html[data-theme="light"] .sidebar .nav-link {color:#53627d;}
html[data-theme="light"] .sidebar .nav-link:hover:not(.active) {
  color:#3146a5; background:rgba(102,113,226,.075);
}
html[data-theme="light"] .sidebar .nav-link.active {
  color:#493bc0;
  background:linear-gradient(110deg,rgba(109,78,232,.13),rgba(37,99,235,.07));
  box-shadow:inset 0 0 0 1px rgba(109,78,232,.16),0 5px 16px rgba(73,64,169,.055);
}
html[data-theme="light"] .sidebar .nav-link.active .nav-count {color:#5b53be;}
html[data-theme="light"] .sidebar .side-user {border-top-color:rgba(52,78,137,.12);}
html[data-theme="light"] .sidebar .icon-btn {color:#68779b;}
html[data-theme="light"] .sidebar .icon-btn:hover {background:#eceeff;color:#5945bb;}
html[data-theme="light"] .sidebar .mobile-close {color:#586686;}
html[data-theme="light"] .sidebar-collapse {
  background:#f9f9ff!important;color:#6552bd!important;
  border-color:#dcdaf4!important;box-shadow:0 5px 18px rgba(69,65,132,.11)!important;
}
html[data-theme="light"] .sidebar-collapse:hover {background:#efecff!important;}

/* 03 | Shared BestUI chip hover: 34% bottom-anchored radial illumination,
   0.42s opacity / 0.55s motion and cubic-bezier(.16,1,.3,1). */
:where(.pill,.row-action,.detail-cta .btn) {
  --skill-rgb:139,92,246;
  position:relative;isolation:isolate;overflow:hidden;
  border:1px solid rgba(var(--skill-rgb),.16);
  background:rgba(var(--skill-rgb),.065);
  transition:color .4s ease,border-color .4s ease,box-shadow .45s ease,
             transform .45s cubic-bezier(.16,1,.3,1),background .4s ease!important;
}
:where(.pill,.row-action,.detail-cta .btn)::before {
  content:"";position:absolute;z-index:-1;inset:-28px;opacity:0;
  background:radial-gradient(circle at 50% 100%,rgba(var(--skill-rgb),.34),
              rgba(var(--skill-rgb),.08) 44%,transparent 72%);
  filter:blur(7px);transform:translateY(16px) scale(.76);
  transition:opacity .42s ease,transform .55s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
@media(hover:hover) {
  :where(.pill,.row-action,.detail-cta .btn):hover:not(:disabled) {
    border-color:rgba(var(--skill-rgb),.48)!important;
    background:rgba(var(--skill-rgb),.075)!important;
    box-shadow:0 10px 28px rgba(var(--skill-rgb),.13),inset 0 0 18px rgba(var(--skill-rgb),.06)!important;
    transform:translateY(-3px);
  }
  :where(.pill,.row-action,.detail-cta .btn):hover:not(:disabled)::before {
    opacity:1;transform:translateY(0) scale(1);
  }
}
/* Distinct semantic colors. Status & priority tokens are also used in light mode. */
.pill.status-doing,.row-action[data-status="doing"],#detailAction[data-status="doing"] {--skill-rgb:68,168,255;}
.pill.status-todo,.row-action[data-status="todo"],#detailAction[data-status="todo"] {--skill-rgb:152,132,230;}
.pill.status-done,#detailAction[data-status="done"],#detailFinish {--skill-rgb:37,220,158;}
.pill.priority-high {--skill-rgb:248,91,133;}
.pill.priority-medium {--skill-rgb:240,172,58;}
.pill.priority-low {--skill-rgb:56,207,154;}
html[data-theme="dark"] .pill {
  border-color:rgba(var(--skill-rgb),.16)!important;
  background:rgba(var(--skill-rgb),.06)!important;
  box-shadow:none!important;
}
html[data-theme="light"] .pill {
  border-color:rgba(var(--skill-rgb),.2);
  background:rgba(var(--skill-rgb),.065);
  box-shadow:none;
}
html[data-theme="light"] .pill:hover {color:inherit;}
html[data-theme="dark"] .pill:hover {color:#f7f9ff!important;}

/* 04 | State action buttons inherit the same light/gradient treatment.
   No changes to dimensions, flex allocation, or grid columns. */
.row-action {
  display:inline-grid;place-items:center;
  color:#6154ad;border-color:rgba(var(--skill-rgb),.23);
  background:rgba(var(--skill-rgb),.065);
}
.row-action[data-status="doing"] {color:#247eac;}
html[data-theme="dark"] .row-action {
  color:#d1c5ff;background:rgba(var(--skill-rgb),.055);
  border-color:rgba(var(--skill-rgb),.21);
}
html[data-theme="dark"] .row-action[data-status="doing"] {color:#9bcfff;}
html[data-theme="dark"] .row-action:hover {color:#f7f9ff;}
.detail-cta .btn {
  --skill-rgb:152,132,230;
  font-weight:700;
  color:#5543b0;
  background:rgba(var(--skill-rgb),.065);
  border-color:rgba(var(--skill-rgb),.24);
  box-shadow:none;
}
.detail-cta #detailAction[data-status="doing"] {color:#177fae;}
.detail-cta #detailAction[data-status="done"],
.detail-cta #detailFinish {color:#13805f;}
html[data-theme="dark"] .detail-cta .btn {
  background:rgba(var(--skill-rgb),.07)!important;
  color:#e0d5ff!important;
  border-color:rgba(var(--skill-rgb),.25)!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .detail-cta #detailAction[data-status="doing"] {color:#a6d9ff!important;}
html[data-theme="dark"] .detail-cta #detailAction[data-status="done"],
html[data-theme="dark"] .detail-cta #detailFinish {color:#a1f0d2!important;}
.detail-cta #detailFinish:disabled {
  opacity:.65;cursor:default;
  transform:none!important;
  box-shadow:none!important;
}
.detail-cta #detailFinish:disabled::before {opacity:0!important;}
/* Consistent focus indicators without changing box geometry. */
.row-action:focus-visible,.detail-cta .btn:focus-visible,.pill:focus-visible {
  outline:2px solid rgba(var(--skill-rgb),.65);outline-offset:3px;
}

/* 05 | KPI/task cards reveal their own semantic skill color on hover. */
.stat-card.lavender {--skill-rgb:162,89,255;}
.stat-card.mint {--skill-rgb:66,229,157;}
.stat-card.peach {--skill-rgb:255,179,90;}
.stat-card.blue {--skill-rgb:79,124,255;}
.stat-card.progress-card {--skill-rgb:139,92,246;}
.stat-card {
  isolation:isolate;
  transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .4s ease,
             box-shadow .45s ease,background .4s ease;
}
.stat-card::before {
  content:"";position:absolute;inset:-24px;z-index:0;opacity:0;pointer-events:none;
  background:radial-gradient(circle at 50% 100%,rgba(var(--skill-rgb),.2),
              rgba(var(--skill-rgb),.05) 42%,transparent 72%);
  transform:translateY(20px) scale(.8);filter:blur(9px);
  transition:opacity .42s ease,transform .55s cubic-bezier(.16,1,.3,1);
}
@media(hover:hover){
 .stat-card:hover{border-color:rgba(var(--skill-rgb),.44)!important;
   box-shadow:0 15px 36px rgba(var(--skill-rgb),.13),inset 0 0 20px rgba(var(--skill-rgb),.04)!important;}
 .stat-card:hover::before{opacity:1;transform:translateY(0) scale(1);}
 .task-card:hover{border-color:rgba(139,92,246,.33)!important;
   box-shadow:0 10px 25px rgba(96,75,200,.085);}
}
.task-card {transition:border-color .4s ease,box-shadow .45s ease,background .4s ease;}

/* 06 | Keep status-row feedback on the row; prevent neon affecting panel outlines. */
html[data-theme="dark"] #detailPanel.state-flash {
  border-color:rgba(162,180,229,.13)!important;
  box-shadow:0 18px 52px rgba(0,0,0,.19),inset 0 1px rgba(255,255,255,.022)!important;
}
@media(prefers-reduced-motion:reduce){
  :where(.pill,.row-action,.detail-cta .btn),
  :where(.pill,.row-action,.detail-cta .btn)::before,
  .stat-card,.stat-card::before,.task-card {transition:none!important;animation:none!important;}
  .stat-card:hover,.row-action:hover,.detail-cta .btn:hover,.pill:hover{transform:none!important;}
}

/* Explicitly outrank inherited v3-v5 button shadows and neon overrides.
   Without these selectors, the radial layer moves but the colored elevation is hidden. */
@media(hover:hover){
  html[data-theme="dark"] .row-action:hover:not(:disabled),
  html[data-theme="light"] .row-action:hover:not(:disabled),
  html[data-theme="dark"] .detail-cta .btn:hover:not(:disabled),
  html[data-theme="light"] .detail-cta .btn:hover:not(:disabled) {
    border-color:rgba(var(--skill-rgb),.48)!important;
    background:rgba(var(--skill-rgb),.075)!important;
    box-shadow:0 10px 28px rgba(var(--skill-rgb),.13),inset 0 0 18px rgba(var(--skill-rgb),.06)!important;
    transform:translateY(-3px);
  }
  html[data-theme="dark"] .detail-cta .btn:hover:not(:disabled),
  html[data-theme="dark"] .row-action:hover:not(:disabled){color:#f7f9ff!important;}
  html[data-theme="light"] .detail-cta .btn:hover:not(:disabled),
  html[data-theme="light"] .row-action:hover:not(:disabled){filter:saturate(1.13);}
}
@media(prefers-reduced-motion:reduce){
  .stat-card,.tasks-panel,.detail-panel,.stat-sheen {animation:none!important;}
  html[data-theme="dark"] .row-action:hover:not(:disabled),
  html[data-theme="light"] .row-action:hover:not(:disabled),
  html[data-theme="dark"] .detail-cta .btn:hover:not(:disabled),
  html[data-theme="light"] .detail-cta .btn:hover:not(:disabled) {transform:none!important;}
}