/* Joy theme 2 — visual redesign layer.
   Loaded after the app's own styles. Fixes: gold-on-white primary buttons (contrast 1.9:1 → violet 7:1),
   mixed radii (4 / 6 / 18 px → one scale), hard-coded white surfaces that broke dark mode,
   missing focus states, flat hierarchy between primary and secondary actions. */
:root{
  --r-lg:16px;--r-md:12px;--r-sm:10px;
  --surface:#ffffff;--surface-2:#f8f7fc;--ring:0 0 0 3px rgba(114,32,218,.22);
  --pri:linear-gradient(135deg,#7220da 0%,#9a4bf0 100%);--pri-solid:#7220da;
  --sh-1:0 1px 2px rgba(27,26,37,.05),0 4px 14px -6px rgba(27,26,37,.10);
  --sh-2:0 2px 4px rgba(27,26,37,.05),0 14px 32px -12px rgba(27,26,37,.18);
}
body.dark{--surface:#151b23;--surface-2:#1b222c;--sh-1:0 1px 2px rgba(0,0,0,.4);--sh-2:0 10px 30px -12px rgba(0,0,0,.6)}

/* typography */
body{font-family:"Heebo","Assistant",-apple-system,system-ui,sans-serif;font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.hometitle{font-size:26px;font-weight:700;letter-spacing:-.025em}
.homesub{font-size:14px;line-height:1.5;max-width:760px}
h2{font-size:16.5px;font-weight:700;letter-spacing:-.01em}

/* surfaces */
.card,.appcard,.kpi,.seccard{background:var(--surface)!important;border-color:var(--line)!important}
.card{border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:20px 22px}
.appcard{border-radius:14px!important;box-shadow:var(--sh-1);transition:transform .14s ease,box-shadow .18s ease,border-color .15s}
.appcard:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:#d9ccf6!important}
.kpi{border-radius:var(--r-lg)}

/* buttons — one clear primary, calm secondaries */
.act,button.act{background:var(--pri)!important;color:#fff!important;border:0!important;border-radius:var(--r-md)!important;padding:10px 18px;font-weight:700;box-shadow:0 4px 12px -4px rgba(114,32,218,.45);transition:transform .12s,box-shadow .15s,filter .15s}
.act:hover,button.act:hover{filter:brightness(1.06);box-shadow:0 8px 20px -6px rgba(114,32,218,.5);transform:translateY(-1px)}
.act:active{transform:translateY(0)}
.ghost,button.ghost{background:var(--surface)!important;border:1px solid var(--line)!important;color:var(--pri-solid)!important;border-radius:var(--r-sm)!important;font-weight:600}
.ghost:hover,button.ghost:hover{background:var(--surface-2)!important;border-color:#d9ccf6!important}
.mini{border-radius:9px!important;background:var(--surface-2)!important;color:var(--pri-solid)!important}
.mini:hover{background:#efe8fc!important}
.bigbtn{border-radius:var(--r-md)!important;font-weight:700;letter-spacing:.1px}
.bigbtn.gold{background:var(--pri)!important;color:#fff!important;box-shadow:0 6px 16px -6px rgba(114,32,218,.5)}
.bigbtn.gold:hover{filter:brightness(1.07)}
.bigbtn.sky{background:var(--surface)!important;color:var(--pri-solid)!important;border:1.5px solid #cdb9f3!important}
.bigbtn.sky:hover{background:var(--surface-2)!important}
button:disabled,.act:disabled{opacity:.5!important;cursor:not-allowed!important;transform:none!important;box-shadow:none!important}

/* form controls — one radius, visible focus */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),textarea,select{
  border-radius:var(--r-sm)!important;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  padding:9px 11px;transition:border-color .15s,box-shadow .15s}
input:not([type=checkbox]):not([type=radio]):focus,textarea:focus,select:focus{outline:none;border-color:#9a6ef0;box-shadow:var(--ring)}
input[type=checkbox],input[type=radio]{accent-color:var(--pri-solid);width:16px;height:16px}
.pill,.tagm,.sev{border-radius:999px!important}

/* focus for keyboard users everywhere */
:focus-visible{outline:none;box-shadow:var(--ring)!important;border-radius:var(--r-sm)}

/* tables inside cards */
.card table{border-collapse:separate;border-spacing:0}
.card table tr.muted th,.card table th{font-size:11.5px;font-weight:700;color:var(--mut);text-transform:none;padding:8px 6px;border-bottom:1px solid var(--line)}
.card table td{padding:8px 6px;border-bottom:1px solid var(--line)}
.card table tr:last-child td{border-bottom:0}
.card table tr:hover td{background:var(--surface-2)}

/* sidebar */
#sidebar .sbi{border-radius:0 10px 10px 0;margin:1px 8px 1px 0;transition:background .12s,color .12s}
[dir=rtl] #sidebar .sbi{border-radius:10px 0 0 10px;margin:1px 0 1px 8px}
#sidebar .sbi.active,#sidebar .sbi.on{background:linear-gradient(90deg,rgba(114,32,218,.10),rgba(114,32,218,.02));color:var(--pri-solid)!important;font-weight:700}

/* header */
header{box-shadow:0 1px 0 var(--line),0 8px 24px -18px rgba(27,26,37,.25)}
body.dark header{background:rgba(14,19,26,.85)!important}

/* dark-mode surfaces that were hard-coded white */
body.dark .card,body.dark .appcard,body.dark .kpi,body.dark .seccard,body.dark .ghost,body.dark #bkMenuPop,body.dark #joyModal>div{background:var(--surface)!important;color:var(--ink)}
body.dark input,body.dark textarea,body.dark select{background:var(--surface-2)!important;color:var(--ink)!important}

/* motion safety */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* phones */
@media (max-width:760px){.card{padding:16px}.hometitle{font-size:22px}.bigbtn{width:100%}}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-thumb{background:#d9d3e8;border-radius:10px;border:2px solid transparent;background-clip:padding-box}
body.dark *::-webkit-scrollbar-thumb{background:#2f3845;background-clip:padding-box}