/* Taskly v7: color and interaction correction. All sizes / grid geometry stay in v6.
   Purple is sampled from BestUI/assets/icons/Logo.svg: #BC84FF -> #9137FF.
   Palette aims for saturated pigment + quieter surfaces, not washed-out neon. */

/* 1. A single semantic color language for both themes */
html[data-theme="dark"] {
  color-scheme:dark;
  --bg:#070b17; --surface:#070b17; --panel:#101829;
  --border:#26304a; --line:#27324b;
  --ink:#f5f4ff; --text:#f5f4ff; --subtext:#b3c0d9; --muted:#b3c0d9;
  --purple:#AC68FF; --purple-dark:#9137FF; --accent:#AC68FF;
  --brand-a:#BC84FF; --brand-b:#9137FF;
  --tone-violet:#C99CFF; --tone-blue:#84B8FF;
  --tone-green:#65E6B7; --tone-amber:#FFD084; --tone-red:#FF91AC;
  --shadow:0 16px 48px rgba(2,5,16,.24);
}
html[data-theme="light"] {
  color-scheme:light;
  --bg:#f3f5fb; --surface:#f3f5fb; --panel:#ffffff;
  --ink:#19243d; --text:#19243d; --subtext:#556783; --muted:#60718c;
  --border:#e3e7f2; --line:#e4e8f3;
  --purple:#802DD8; --purple-dark:#6C20BB; --accent:#802DD8;
  --brand-a:#BC84FF; --brand-b:#9137FF;
  --tone-violet:#7327C5; --tone-blue:#155CB7;
  --tone-green:#097957; --tone-amber:#95600C; --tone-red:#B72D56;
  --shadow:0 14px 40px rgba(49,65,105,.055);
}
html[data-theme="dark"] body,html[data-theme="dark"] .app-shell {
  color:var(--text);
  background:radial-gradient(ellipse at 18% 2%,rgba(145,55,255,.045),transparent 33%),#070b17;
}
html[data-theme="light"] body,html[data-theme="light"] .app-shell {
  color:var(--text);
  background:radial-gradient(ellipse at 16% 0%,rgba(155,117,250,.05),transparent 34%),#f3f5fb;
}
html[data-theme="dark"] .tasks-panel,html[data-theme="dark"] .detail-panel,
html[data-theme="dark"] .modal {background:#101829;border-color:#28314a;}
html[data-theme="light"] .tasks-panel,html[data-theme="light"] .detail-panel,
html[data-theme="light"] .modal {background:#fff;border-color:#e6eaf4;box-shadow:var(--shadow);}
html[data-theme="dark"] .topbar {background:#0b1120;border-bottom-color:#28314a;}
html[data-theme="light"] .topbar {background:#fdfdff;border-bottom-color:#e5e9f2;}
html[data-theme="dark"] .sidebar {background:linear-gradient(180deg,#0b1120,#070c18);border-left-color:#27314a;}
html[data-theme="light"] .sidebar {background:linear-gradient(180deg,#ffffff,#fbfcff 67%,#f7f9ff);border-left-color:#e2e6f0;color:#34425f;}
html[data-theme="light"] .sidebar .brand,html[data-theme="light"] .side-user strong {color:#202842;}
html[data-theme="light"] .sidebar .nav-link {color:#465673;}
html[data-theme="light"] .sidebar .nav-link:hover:not(.active){background:#f0ebfb;color:#702ebc;}
html[data-theme="dark"] .sidebar .nav-link:hover:not(.active){background:#151b31;color:#ded1fd;}
html[data-theme="dark"] .nav-link.active {
  background:linear-gradient(110deg,rgba(145,55,255,.23),rgba(188,132,255,.075));
  color:#ead8ff;box-shadow:inset 0 0 0 1px rgba(188,132,255,.22);
}
html[data-theme="light"] .sidebar .nav-link.active {
  background:linear-gradient(100deg,#eee2ff,#f5efff);color:#6724b0;
  box-shadow:inset 0 0 0 1px #decbfa;
}
html[data-theme="light"] .sidebar .side-caption,html[data-theme="light"] .sidebar .side-user small {color:#64728c;}
.brand-symbol {background:linear-gradient(135deg,#BC84FF,#9137FF);}
.brand-dot, .welcome-line h2 span {color:var(--purple);}
html[data-theme="dark"] .welcome-line p,html[data-theme="dark"] .section-heading p{color:#aab8d2;}
html[data-theme="light"] .welcome-line p,html[data-theme="light"] .section-heading p{color:#61728d;}
html[data-theme="dark"] .eyebrow {color:#a8b5cd;}
html[data-theme="light"] .eyebrow {color:#677893;}

/* 2. Task table: *darker* on dark-mode hover, including selected rows.
   Background transition is the only row motion; width/height stay identical. */
html[data-theme="dark"] .table-wrap {background:#0d1525;border-radius:11px;}
html[data-theme="dark"] .table-wrap thead th {background:#141e31!important;color:#b9c7df;}
html[data-theme="dark"] .table-wrap tbody tr {background:#101a2c!important;transition:background-color .24s ease!important;}
html[data-theme="dark"] .table-wrap tbody tr.selected-row {background:#172034!important;}
html[data-theme="dark"] .table-wrap tbody tr:hover,
html[data-theme="dark"] .table-wrap tbody tr.selected-row:hover {background:#080f1d!important;}
html[data-theme="dark"] .table-wrap tbody td {background:transparent!important;border-bottom-color:#263149!important;color:#bdcae1!important;}
html[data-theme="dark"] .table-wrap .task-title-cell {color:#f2f3ff!important;}
html[data-theme="dark"] .table-wrap .selected-row td:first-child {box-shadow:inset -3px 0 0 #A967FF;}
html[data-theme="light"] .table-wrap {background:#fff;border-radius:11px;}
html[data-theme="light"] .table-wrap thead th {background:#f0f2fa;color:#536480;font-weight:750;}
html[data-theme="light"] .table-wrap tbody tr {background:#fff;transition:background-color .22s ease;}
html[data-theme="light"] .table-wrap tbody tr:nth-child(even) {background:#fbfcff;}
html[data-theme="light"] .table-wrap tbody tr.selected-row {background:#f3edff;}
html[data-theme="light"] .table-wrap tbody tr:hover {background:#eee7fb!important;}
html[data-theme="light"] .table-wrap tbody td {background:transparent!important;border-bottom-color:#e9edf5;color:#52627e;}
html[data-theme="light"] .task-title-cell {color:#202b47;}
html[data-theme="light"] .table-wrap .selected-row td:first-child {box-shadow:inset -3px 0 0 #9137FF;}

/* 3. Pigmented tags, with legible text that is the SAME hue as its illumination */
.pill.priority-high {--skill-rgb:255,111,145;--ink-chip-dark:#ffa1b9;--ink-chip-light:#ad254f;--chip-light:#fff0f4;}
.pill.priority-medium {--skill-rgb:249,187,79;--ink-chip-dark:#ffd58c;--ink-chip-light:#965f09;--chip-light:#fff5e2;}
.pill.priority-low {--skill-rgb:50,211,153;--ink-chip-dark:#7cebc2;--ink-chip-light:#087653;--chip-light:#e6f9f1;}
.pill.status-todo {--skill-rgb:180,123,255;--ink-chip-dark:#d5afff;--ink-chip-light:#7423c1;--chip-light:#f3eaff;}
.pill.status-doing {--skill-rgb:86,171,255;--ink-chip-dark:#a0d2ff;--ink-chip-light:#175da9;--chip-light:#e9f3ff;}
.pill.status-done {--skill-rgb:54,216,154;--ink-chip-dark:#80efbd;--ink-chip-light:#097452;--chip-light:#e6faf0;}
html[data-theme="dark"] .pill {
  color:var(--ink-chip-dark)!important;
  background:rgba(var(--skill-rgb),.13)!important;
  border-color:rgba(var(--skill-rgb),.37)!important;
  box-shadow:none!important;font-weight:800;
}
html[data-theme="light"] .pill {
  color:var(--ink-chip-light)!important;
  background:var(--chip-light)!important;
  border-color:rgba(var(--skill-rgb),.40)!important;
  box-shadow:none!important;font-weight:800;
}
.pill,.pill:hover {transform:none!important;filter:none!important;}
@media(hover:hover){
  html[data-theme="dark"] .pill:hover,html[data-theme="light"] .pill:hover{
    color:var(--ink-chip-dark)!important;
    border-color:rgba(var(--skill-rgb),.7)!important;
    box-shadow:0 0 17px rgba(var(--skill-rgb),.20),inset 0 0 14px rgba(var(--skill-rgb),.13)!important;
    transform:none!important;
  }
  html[data-theme="light"] .pill:hover {color:var(--ink-chip-light)!important;}
}

/* 4. State-action buttons: fixed coordinates, saturated face and matching text/glow. */
.row-action,.detail-cta .btn {
  --skill-rgb:176,100,255;
  --action-dark-bg:#502578;--action-dark-text:#eed5ff;
  --action-light-bg:#efe1ff;--action-light-text:#6e21b4;
  position:relative;isolation:isolate;overflow:hidden;
  font-weight:800!important;
  transition:background-color .24s ease,color .24s ease,border-color .24s ease,box-shadow .35s ease!important;
  transform:none!important;filter:none!important;
}
.row-action[data-status="doing"],.detail-cta #detailAction[data-status="doing"]{
  --skill-rgb:70,158,244;
  --action-dark-bg:#164974;--action-dark-text:#c4e7ff;
  --action-light-bg:#dbeeff;--action-light-text:#165697;
}
.detail-cta #detailFinish,.detail-cta #detailAction[data-status="done"]{
  --skill-rgb:44,207,148;
  --action-dark-bg:#165440;--action-dark-text:#b8ffdc;
  --action-light-bg:#dbf7e9;--action-light-text:#0c7552;
}
html[data-theme="dark"] .row-action,html[data-theme="dark"] .detail-cta .btn {
  color:var(--action-dark-text)!important;
  background:var(--action-dark-bg)!important;
  border:1px solid rgba(var(--skill-rgb),.55)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.08)!important;
}
html[data-theme="light"] .row-action,html[data-theme="light"] .detail-cta .btn {
  color:var(--action-light-text)!important;
  background:var(--action-light-bg)!important;
  border:1px solid rgba(var(--skill-rgb),.42)!important;
  box-shadow:none!important;
}
/* Only the glow develops; no translateY, scale or brightness changes. */
:where(.row-action,.detail-cta .btn)::before {
  opacity:0;transform:none;
  background:radial-gradient(circle at 50% 100%,rgba(var(--skill-rgb),.50),rgba(var(--skill-rgb),.18) 46%,transparent 78%);
  transition:opacity .38s ease!important;
}
.row-action svg,.detail-cta .btn svg {position:relative;z-index:1;stroke-width:2.35;}
@media(hover:hover){
  html[data-theme="dark"] .row-action:hover:not(:disabled),
  html[data-theme="dark"] .detail-cta .btn:hover:not(:disabled) {
    color:var(--action-dark-text)!important;background:var(--action-dark-bg)!important;
    border-color:rgba(var(--skill-rgb),.9)!important;
    box-shadow:0 0 21px rgba(var(--skill-rgb),.32),inset 0 0 17px rgba(var(--skill-rgb),.18)!important;
    transform:none!important;filter:none!important;
  }
  html[data-theme="light"] .row-action:hover:not(:disabled),
  html[data-theme="light"] .detail-cta .btn:hover:not(:disabled) {
    color:var(--action-light-text)!important;background:var(--action-light-bg)!important;
    border-color:rgba(var(--skill-rgb),.75)!important;
    box-shadow:0 0 19px rgba(var(--skill-rgb),.21),inset 0 0 15px rgba(var(--skill-rgb),.12)!important;
    transform:none!important;filter:none!important;
  }
  :where(.row-action,.detail-cta .btn):hover:not(:disabled)::before{opacity:1;transform:none;}
}
.detail-cta .btn:disabled{opacity:.54!important;box-shadow:none!important;transform:none!important;filter:none!important;}
.detail-cta .btn:disabled::before{opacity:0!important;}

/* Other action buttons use the true logo palette, not legacy blue-violet. */
html[data-theme="dark"] .btn-primary:not(.detail-cta .btn),
html[data-theme="light"] .btn-primary:not(.detail-cta .btn){
  color:#fff!important;background:linear-gradient(110deg,#A663FC,#8734ED)!important;
  box-shadow:0 6px 20px rgba(145,55,255,.18)!important;border:1px solid rgba(188,132,255,.42);
  font-weight:800;
}
html[data-theme="dark"] .btn-muted{background:#222a3d;color:#d4dbec;}
html[data-theme="light"] .btn-muted{background:#eef0f8;color:#455774;}
html[data-theme="light"] .btn-danger:not(.detail-cta .btn){background:#ffe8ef;color:#a62b4a;}
html[data-theme="dark"] .btn-danger:not(.detail-cta .btn){background:#4d2637;color:#ffadc2;}
.btn:hover:not(:disabled){transform:none!important;filter:none!important;}
.btn-primary:hover:not(:disabled){box-shadow:0 0 24px rgba(145,55,255,.38)!important;}
html[data-theme="dark"] .detail-cta .btn:hover:not(:disabled),
html[data-theme="light"] .detail-cta .btn:hover:not(:disabled){filter:none!important;}

/* 5. KPI cards: new two-tone backgrounds, lighter surface detail, no card bounce. */
.stat-card {border-width:1px;transform:none!important;transition:border-color .36s,box-shadow .36s,background .36s!important;}
.stat-card:hover {transform:none!important;}
.stat-card::before{inset:0;filter:none;transform:none;background:radial-gradient(circle at 10% 110%,rgba(var(--skill-rgb),.22),transparent 66%);}
.stat-card:hover::before{transform:none;}
.stat-card.lavender{--skill-rgb:172,103,255;}
.stat-card.mint{--skill-rgb:41,208,156;}
.stat-card.peach{--skill-rgb:249,175,71;}
.stat-card.blue{--skill-rgb:85,148,248;}
.stat-card.progress-card{--skill-rgb:172,103,255;}
html[data-theme="dark"] .stat-card.lavender{
  background:linear-gradient(145deg,#211a3b 0%,#16172c 54%,#111728 100%);
  border-color:#413059;box-shadow:inset 0 1px rgba(188,132,255,.12);
}
html[data-theme="dark"] .stat-card.mint{
  background:linear-gradient(145deg,#132f30 0%,#13252e 55%,#101a29 100%);
  border-color:#25504b;box-shadow:inset 0 1px rgba(94,237,185,.10);
}
html[data-theme="dark"] .stat-card.peach{
  background:linear-gradient(145deg,#352b24 0%,#29252b 56%,#151a28 100%);
  border-color:#5a4434;box-shadow:inset 0 1px rgba(255,205,120,.10);
}
html[data-theme="dark"] .stat-card.blue{
  background:linear-gradient(145deg,#182b47 0%,#172338 56%,#111a2c 100%);
  border-color:#2b4969;box-shadow:inset 0 1px rgba(132,185,255,.10);
}
html[data-theme="dark"] .stat-card.progress-card{
  background:linear-gradient(140deg,#171c30,#121928)!important;border-color:#34324b;
}
html[data-theme="light"] .stat-card.lavender{
  background:linear-gradient(135deg,#faf6ff,#f0e3ff);border-color:#e0cafb;
}
html[data-theme="light"] .stat-card.mint{
  background:linear-gradient(135deg,#f7fffc,#e0f7ef);border-color:#caeade;
}
html[data-theme="light"] .stat-card.peach{
  background:linear-gradient(135deg,#fffdf8,#fff0dc);border-color:#f1dfc1;
}
html[data-theme="light"] .stat-card.blue{
  background:linear-gradient(135deg,#fbfdff,#e3efff);border-color:#d1e1f8;
}
html[data-theme="light"] .stat-card.progress-card{
  background:linear-gradient(135deg,#fff,#faf8ff);border-color:#e5def1;
}
.stat-card .stat-icon {color:white;box-shadow:none!important;transform:none!important;transition:background .3s ease!important;}
.stat-card:hover .stat-icon {transform:none!important;box-shadow:none!important;}
.stat-card.lavender .stat-icon {background:linear-gradient(135deg,#BC84FF,#9137FF);}
.stat-card.mint .stat-icon {background:linear-gradient(135deg,#37DBAB,#0A9E72);}
.stat-card.peach .stat-icon {background:linear-gradient(135deg,#FFC36D,#DC8615);}
.stat-card.blue .stat-icon {background:linear-gradient(135deg,#76B7FF,#3775E6);}
html[data-theme="dark"] .stat-value,html[data-theme="dark"] .stat-card .strong{color:#f6f5ff!important;}
html[data-theme="dark"] .stat-card .stat-label{color:#c1c8df!important;}
html[data-theme="light"] .stat-value,html[data-theme="light"] .stat-card .strong{color:#242c46!important;}
html[data-theme="light"] .stat-card .stat-label{color:#576782!important;}
html[data-theme="light"] .progress-card small{color:#687792;}
html[data-theme="dark"] .progress-card small{color:#b0bdd7;}
.stat-card .stat-sheen{background:radial-gradient(ellipse,rgba(var(--skill-rgb),.14),transparent 70%);}
@media(hover:hover){
 html[data-theme="dark"] .stat-card:hover{border-color:rgba(var(--skill-rgb),.52)!important;box-shadow:inset 0 0 22px rgba(var(--skill-rgb),.10)!important;}
 html[data-theme="light"] .stat-card:hover{border-color:rgba(var(--skill-rgb),.55)!important;box-shadow:0 6px 25px rgba(var(--skill-rgb),.11)!important;}
}

/* Rounded SVG circular progress, genuine BestUI logo gradient; no shadow, no square track. */
#progressRing,.ring {
  --progress-value:0;
  background:none!important;
  filter:none!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.ring::before,.ring::after {content:none!important;display:none!important;}
.ring .progress-ring-svg {position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(-90deg);}
.ring .progress-ring-svg circle {fill:none;stroke-width:9.5;}
.ring .progress-ring-track {stroke:#e9def5;}
html[data-theme="dark"] .ring .progress-ring-track {stroke:#33314b;}
.ring .progress-ring-value {
  stroke:url(#bestuiLogoProgress);stroke-linecap:round;
  stroke-dasharray:var(--progress-value,0) 100;
  stroke-dashoffset:0;
  filter:none;box-shadow:none;
}
.ring span {position:relative;z-index:1;font-weight:800;color:var(--text);}
html[data-theme="dark"] .stat-card.progress-card,html[data-theme="light"] .stat-card.progress-card,
html[data-theme="dark"] .stat-card.progress-card:hover,html[data-theme="light"] .stat-card.progress-card:hover {
  box-shadow:none!important;
}

/* 6. Other accents: detail progress, filters, nav, tabs, pagination and icons. */
#detailBar {background:linear-gradient(90deg,#BC84FF,#9137FF)!important;box-shadow:none!important;}
html[data-theme="dark"] .bar {background:#262b45;}
html[data-theme="light"] .bar {background:#e9e7f1;}
html[data-theme="dark"] .total-pill{background:#34234e;color:#dfbcff;}
html[data-theme="light"] .total-pill{background:#f1e6ff;color:#7928c7;}
html[data-theme="dark"] .detail-tabs button.selected{color:#cd9dff;border-bottom-color:#ad67ff;}
html[data-theme="light"] .detail-tabs button.selected{color:#7425c3;border-bottom-color:#9137FF;}
html[data-theme="light"] .detail-tabs button{color:#687994;}
html[data-theme="light"] .detail-description,html[data-theme="light"] .detail-metadata span,
html[data-theme="light"] .detail-progress .progress-caption{color:#5e6e88;}
html[data-theme="light"] .tab-content,html[data-theme="light"] .task-card{
 background:#f8faff;border-color:#e5e9f3;color:#51637d;
}
html[data-theme="dark"] .tab-content,html[data-theme="dark"] .task-card{background:#0e1628;border-color:#2a3450;}
html[data-theme="light"] .task-card:hover{background:#f2ecff;border-color:#d6b8fa!important;box-shadow:none!important;}
html[data-theme="dark"] .task-card:hover{background:#090f1e;border-color:#65468d!important;box-shadow:none!important;}
html[data-theme="light"] .top-search,html[data-theme="light"] .filter-search,
html[data-theme="light"] .filters select,html[data-theme="light"] .field input,
html[data-theme="light"] .field textarea,html[data-theme="light"] .field select{
 background-color:#fafbff;border-color:#dce2ee;color:#2b3b58;
}
html[data-theme="light"] input::placeholder,html[data-theme="light"] textarea::placeholder{color:#72809a;}
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-color:#0c1425;border-color:#33405c;color:#f3f5ff;
}
html[data-theme="light"] .pagination button{background:#fff;color:#415576;border-color:#dce3f0;}
html[data-theme="dark"] .pagination button{background:#1c2639;color:#c6d2e9;border-color:#323d59;}
html[data-theme="light"] .pagination button.current,
html[data-theme="dark"] .pagination button.current{background:#9137FF;color:#fff;border-color:#9137FF;}
html[data-theme="dark"] .delete-task{color:#ff99b4!important;filter:none!important;}
html[data-theme="light"] .delete-task{color:#b12e55;filter:none;}
html[data-theme="light"] .sidebar-collapse{background:#f5edff!important;color:#7032b4!important;border-color:#dec8fb!important;}
html[data-theme="dark"] .sidebar-collapse{background:#261b3b!important;color:#e6cfff!important;border-color:#674587!important;}
html[data-theme="light"] .sidebar-collapse:hover {background:#ede0ff!important;}
html[data-theme="dark"] .sidebar-collapse:hover {background:#37224f!important;}
.sidebar-collapse:hover{transform:none!important;}
html[data-theme="dark"] .nav-count{color:#bcaad8;}
html[data-theme="light"] .nav-count{color:#627591;}
html[data-theme="dark"] .theme-toggle:hover,html[data-theme="dark"] .icon-btn:hover{color:#d6adff;}
html[data-theme="light"] .theme-toggle:hover,html[data-theme="light"] .icon-btn:hover{color:#7226c0;}
html[data-theme="light"] .notify-btn span{background:#d94a71;}

/* Prevent hover-induced movement, including mobile CTA buttons, while keeping all click behavior. */
.row-action:hover,.pill:hover,.detail-cta .btn:hover,.btn:hover,.pagination button:hover{
  transform:none!important;
}
.row-action:focus-visible,.detail-cta .btn:focus-visible,.pill:focus-visible,.btn:focus-visible{
 outline:2px solid #A663FC;outline-offset:3px;
}
@media(prefers-reduced-motion:reduce){
  .row-action,.detail-cta .btn,.pill,.stat-card,
  .row-action::before,.detail-cta .btn::before,.pill::before,
  .ring .progress-ring-value {animation:none!important;transition:none!important;}
}
/* Resolve pre-v7 ID-specific color declarations so face, label and flare stay tonal. */
html[data-theme="dark"] .detail-cta #detailAction,
html[data-theme="dark"] .detail-cta #detailAction[data-status="doing"],
html[data-theme="dark"] .detail-cta #detailAction[data-status="done"],
html[data-theme="dark"] .detail-cta #detailFinish {color:var(--action-dark-text)!important;}
html[data-theme="light"] .detail-cta #detailAction,
html[data-theme="light"] .detail-cta #detailAction[data-status="doing"],
html[data-theme="light"] .detail-cta #detailAction[data-status="done"],
html[data-theme="light"] .detail-cta #detailFinish {color:var(--action-light-text)!important;}
@media(hover:hover){
 html[data-theme="dark"] .detail-cta #detailAction:hover:not(:disabled),
 html[data-theme="dark"] .detail-cta #detailFinish:hover:not(:disabled){color:var(--action-dark-text)!important;}
 html[data-theme="light"] .detail-cta #detailAction:hover:not(:disabled),
 html[data-theme="light"] .detail-cta #detailFinish:hover:not(:disabled){color:var(--action-light-text)!important;}
}