/* Aleta Work Tracker — themeable design system
   3 looks (clay / glass / liquid) × 10 color templates × fonts.
   Driven by data-look / data-palette / data-font on <body>. */

:root {
  /* neutral ink (shared) */
  --ink: #3c3c52; --ink-2: #6a6a82; --muted: #9a9ab2; --line: #e8e8f2;
  /* status (semantic, fixed) */
  --good:#16b98c; --good-bg:#e2f7f0; --warn:#e69a00; --warn-bg:#fff2d9;
  --serious:#ff8a5b; --serious-bg:#ffe9df; --crit:#ff5f6d; --crit-bg:#ffe4e7;
  /* defaults: palette 1 (Grape) */
  --accent:#6c5ce7; --accent-2:#a06bf0; --accent-3:#ff7aa2; --accent-4:#3fc9c0;
  --accent-ink:#5a4bd6; --accent-050:#efecff;
  --bg-solid:#e9e9fb; --g1:#c9c4ff; --g2:#e8e9fb; --g3:#f5e6ff;
  /* defaults: clay look */
  --r:26px; --r-sm:16px;
  --surface-bg:#ffffff;
  --surface-border:none;
  --surface-blur:none;
  --surface-shadow:8px 8px 20px rgba(80,70,160,.16), -8px -8px 20px rgba(255,255,255,.9),
                   inset 2px 2px 5px rgba(255,255,255,.7), inset -4px -4px 10px rgba(80,70,160,.06);
  --raise-shadow:5px 5px 12px rgba(80,70,160,.14), -5px -5px 12px rgba(255,255,255,.9);
  --inset-shadow:inset 4px 4px 9px rgba(80,70,160,.14), inset -4px -4px 9px rgba(255,255,255,.95);
  --input-bg:#f1f0fc;
  --side-shadow:10px 10px 26px rgba(80,70,160,.35), -8px -8px 22px rgba(255,255,255,.85);
  --gloss:none;
  /* defaults: font 1 (Rounded) */
  --font:"Nunito","Segoe UI",system-ui,sans-serif; --font-head:"Fredoka","Nunito",system-ui,sans-serif;
  --base:16px; --scale:1;
  /* look character */
  --icon-stroke:2.4; --head-weight:700; --head-spacing:0;
}

/* ============ COLOR TEMPLATES (10) ============ */
[data-palette="1"]{--accent:#6c5ce7;--accent-2:#a06bf0;--accent-3:#ff7aa2;--accent-4:#3fc9c0;--accent-ink:#5a4bd6;--accent-050:#efecff;--bg-solid:#e9e9fb;--g1:#c9c4ff;--g2:#e8e9fb;--g3:#f5e6ff;}
[data-palette="2"]{--accent:#2f8fd6;--accent-2:#22b8c4;--accent-3:#4fd1a7;--accent-4:#7aa8ff;--accent-ink:#1f6fb0;--accent-050:#e6f2fc;--bg-solid:#e4f0fb;--g1:#bfe0ff;--g2:#dff1fb;--g3:#cdeef0;}
[data-palette="3"]{--accent:#ff6b6b;--accent-2:#ff9f45;--accent-3:#ffd166;--accent-4:#f76ba8;--accent-ink:#e0554f;--accent-050:#ffeae6;--bg-solid:#fdeae2;--g1:#ffd3b6;--g2:#ffe1e6;--g3:#ffc9d6;}
[data-palette="4"]{--accent:#2fae66;--accent-2:#59c273;--accent-3:#9ccf5a;--accent-4:#3fb8a0;--accent-ink:#1f8a4f;--accent-050:#e6f5ec;--bg-solid:#e6f4e9;--g1:#c8eccf;--g2:#e6f4e9;--g3:#d7f0dd;}
[data-palette="5"]{--accent:#e05a9c;--accent-2:#f06ab0;--accent-3:#ff8fb3;--accent-4:#b06cf0;--accent-ink:#c44a86;--accent-050:#fdeaf3;--bg-solid:#fbe8f1;--g1:#ffd0e6;--g2:#fbe8f1;--g3:#f3d9ff;}
[data-palette="6"]{--accent:#5b5bd6;--accent-2:#7a6bf0;--accent-3:#4a6bd8;--accent-4:#9b7bf0;--accent-ink:#3f3fb0;--accent-050:#eaeafb;--bg-solid:#e8e9f6;--g1:#b6c0ff;--g2:#e0e3fb;--g3:#d4c9ff;}
[data-palette="7"]{--accent:#f76ba8;--accent-2:#6ca8f7;--accent-3:#ffd166;--accent-4:#5fd0b0;--accent-ink:#d64f8a;--accent-050:#fdeaf3;--bg-solid:#fdeaf3;--g1:#ffd6ea;--g2:#e3ecff;--g3:#d7f6ec;}
[data-palette="8"]{--accent:#5a5a70;--accent-2:#8a8aa0;--accent-3:#b06f6f;--accent-4:#6f8aa0;--accent-ink:#42424f;--accent-050:#ededf1;--bg-solid:#ececef;--g1:#d8d8de;--g2:#ececef;--g3:#e2e2e7;}
[data-palette="9"]{--accent:#ff6f61;--accent-2:#ff9472;--accent-3:#ffb17a;--accent-4:#f76ba8;--accent-ink:#e0554a;--accent-050:#ffeae6;--bg-solid:#fdece6;--g1:#ffcbb8;--g2:#fde3da;--g3:#ffd6c9;}
[data-palette="10"]{--accent:#12b8b0;--accent-2:#2fd0c0;--accent-3:#5fe0c0;--accent-4:#3fa8e0;--accent-ink:#0e9a94;--accent-050:#e2f6f4;--bg-solid:#e2f6f4;--g1:#bff0ec;--g2:#e2f6f4;--g3:#cdf3ec;}

/* ============ LOOKS ============ */
/* Glassmorphism — airy, thin, fine hairlines, flat drop shadows */
[data-look="glass"]{
  --r:20px; --r-sm:14px;
  --surface-bg:rgba(255,255,255,.55);
  --surface-border:1px solid rgba(255,255,255,.6);
  --surface-blur:blur(16px) saturate(1.3);
  --surface-shadow:0 10px 30px rgba(60,60,110,.12);
  --raise-shadow:0 6px 16px rgba(60,60,110,.14);
  --inset-shadow:inset 0 1px 2px rgba(255,255,255,.6);
  --input-bg:rgba(255,255,255,.42);
  --side-shadow:0 12px 34px rgba(60,60,110,.22);
  --gloss:none;
  --icon-stroke:1.7; --head-weight:600; --head-spacing:.2px;
}
/* Liquid glass — glossy, reflective edges, colored glow, deep blur */
[data-look="liquid"]{
  --r:30px; --r-sm:18px;
  --surface-bg:rgba(255,255,255,.4);
  --surface-border:1px solid rgba(255,255,255,.75);
  --surface-blur:blur(28px) saturate(2);
  --surface-shadow:0 16px 44px color-mix(in srgb, var(--accent) 26%, transparent), inset 0 1.5px 1px rgba(255,255,255,.95), inset 0 -6px 14px rgba(255,255,255,.25);
  --raise-shadow:0 10px 26px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 1.5px 1px rgba(255,255,255,.9);
  --inset-shadow:inset 0 2px 5px rgba(255,255,255,.6);
  --input-bg:rgba(255,255,255,.38);
  --side-shadow:0 18px 48px color-mix(in srgb, var(--accent) 34%, transparent);
  --gloss:linear-gradient(157deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.08) 34%, rgba(255,255,255,0) 60%);
  --icon-stroke:2; --head-weight:600; --head-spacing:.1px;
}

/* ============ FONTS (small → big) ============ */
[data-font="1"]{--font:"Nunito",system-ui,sans-serif;--font-head:"Fredoka","Nunito",sans-serif;--base:16px;--scale:1;}
[data-font="2"]{--font:"Poppins",system-ui,sans-serif;--font-head:"Poppins",sans-serif;--base:15px;--scale:.98;}
[data-font="3"]{--font:"Inter",system-ui,sans-serif;--font-head:"Inter",sans-serif;--base:14px;--scale:.94;}
[data-font="4"]{--font:"Quicksand",system-ui,sans-serif;--font-head:"Quicksand",sans-serif;--base:16px;--scale:1;}
[data-font="5"]{--font:"Baloo 2",system-ui,sans-serif;--font-head:"Baloo 2",sans-serif;--base:17px;--scale:1.1;}
[data-font="6"]{--font:"Work Sans",system-ui,sans-serif;--font-head:"Work Sans",sans-serif;--base:14px;--scale:.95;}
[data-font="7"]{--font:"Sora",system-ui,sans-serif;--font-head:"Sora",sans-serif;--base:15px;--scale:1.02;}
[data-font="8"]{--font:"Space Grotesk",system-ui,sans-serif;--font-head:"Space Grotesk",sans-serif;--base:16px;--scale:1.05;}

/* ============ BASE ============ */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; color: var(--ink); font-family: var(--font); font-size: var(--base); line-height: 1.55;
  -webkit-font-smoothing: antialiased; background: var(--bg-solid);
}
body[data-look="glass"], body[data-look="liquid"] {
  background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 45%, var(--g3) 100%) fixed;
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- shell ---------- */
.app-shell { display: flex; min-height: 100vh; padding: 16px; gap: 16px; }
.sidebar {
  width: 244px; flex-shrink: 0; border-radius: var(--r); color: #fff;
  background: linear-gradient(165deg, var(--accent-2), var(--accent) 60%, var(--accent-ink));
  box-shadow: var(--side-shadow); position: sticky; top: 16px; height: calc(100vh - 32px);
  display: flex; flex-direction: column; overflow: hidden;
}
[data-look="glass"] .sidebar, [data-look="liquid"] .sidebar {
  background: linear-gradient(165deg, color-mix(in srgb, var(--accent-2) 82%, transparent), color-mix(in srgb, var(--accent) 82%, transparent));
  -webkit-backdrop-filter: var(--surface-blur); backdrop-filter: var(--surface-blur);
  border: var(--surface-border);
}
.sidebar .brand {
  display: flex; align-items: center; gap: 12px; padding: 24px 22px 18px;
  color: #fff; font-family: var(--font-head); font-weight: 600; font-size: calc(20px * var(--scale));
}
.sidebar .brand .logo {
  width: 42px; height: 42px; border-radius: 14px; background: rgba(255,255,255,.22);
  display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 22px;
  box-shadow: inset 2px 2px 4px rgba(255,255,255,.4), inset -2px -2px 5px rgba(0,0,0,.15);
}
.sidebar nav { padding: 8px 14px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sidebar nav a {
  display: flex; align-items: center; gap: 13px; padding: 12px 15px; border-radius: 15px;
  color: rgba(255,255,255,.82); font-size: calc(15.5px * var(--scale)); font-weight: 600; text-decoration: none;
}
.sidebar nav a:hover { background: rgba(255,255,255,.16); color: #fff; text-decoration: none; }
.sidebar nav a.active { background: rgba(255,255,255,.95); color: var(--accent-ink); }
.nav-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0; }
.sidebar nav a svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: var(--icon-stroke); fill: none; flex-shrink: 0; }
/* clay: puffy chip */
[data-look="clay"] .nav-ic { background: rgba(255,255,255,.14); box-shadow: inset 2px 2px 4px rgba(255,255,255,.28), inset -2px -2px 5px rgba(0,0,0,.16); }
[data-look="clay"] .sidebar nav a.active .nav-ic { background: color-mix(in srgb, var(--accent) 25%, #fff); box-shadow: inset 2px 2px 4px rgba(255,255,255,.9), inset -2px -2px 5px rgba(0,0,0,.08); }
/* glass: thin frosted chip */
[data-look="glass"] .nav-ic { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
[data-look="glass"] .sidebar nav a.active .nav-ic { background: color-mix(in srgb, var(--accent) 18%, #fff); border-color: rgba(255,255,255,.6); }
/* liquid: glossy gradient chip */
[data-look="liquid"] .nav-ic { background: linear-gradient(160deg, rgba(255,255,255,.45), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.5); box-shadow: inset 0 1px 1px rgba(255,255,255,.7), 0 2px 6px rgba(0,0,0,.08); }
[data-look="liquid"] .sidebar nav a.active .nav-ic { background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--accent) 22%, #fff)); }
.sidebar nav .navlabel { color: rgba(255,255,255,.55); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 16px 15px 4px; }
.sidebar .userblock { margin: 10px; padding: 13px 15px; display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.16); border-radius: 18px; }
.sidebar .avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 16px; flex-shrink: 0; }
.sidebar .userblock .who { flex: 1; min-width: 0; }
.sidebar .userblock .who b { color: #fff; font-size: 14px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .userblock .who span { color: rgba(255,255,255,.72); font-size: 12px; }
.sidebar .userblock a { color: #fff; font-size: 18px; opacity: .85; }

.content { flex: 1; min-width: 0; padding: 12px 18px 60px; }
.page-head { margin-bottom: 24px; }
.page-head h1 { margin: 0; font-family: var(--font-head); font-size: calc(30px * var(--scale)); font-weight: 600; color: var(--ink); }
.page-head .sub { color: var(--ink-2); font-size: calc(15px * var(--scale)); margin-top: 4px; font-weight: 500; }
.wrap { max-width: 1120px; }

/* ---------- surfaces ---------- */
.card, .table-wrap, .stat {
  background: var(--surface-bg); border: var(--surface-border); border-radius: var(--r);
  box-shadow: var(--surface-shadow);
  -webkit-backdrop-filter: var(--surface-blur); backdrop-filter: var(--surface-blur);
}
.card { padding: 24px; position: relative; }
[data-look="liquid"] .card::before, [data-look="liquid"] .stat::before {
  content:""; position:absolute; inset:0; border-radius:inherit; background:var(--gloss); pointer-events:none;
}
.card + .card, .stack > * + * { margin-top: 18px; }

/* stat tiles */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; margin-bottom: 24px; }
.stat { padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; position: relative;
  background: color-mix(in srgb, var(--tile-accent, var(--accent)) 16%, var(--surface-bg)); }
.stat .label { color: var(--ink-2); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.stat .value { font-family: var(--font-head); font-size: calc(40px * var(--scale)); font-weight: 700; line-height: 1; color: color-mix(in srgb, var(--tile-accent, var(--accent)) 84%, #2a2a3a); }
.stat .foot { color: var(--ink-2); font-size: 14px; font-weight: 600; }
.stats .stat:nth-child(1){--tile-accent:var(--accent);}
.stats .stat:nth-child(2){--tile-accent:var(--accent-2);}
.stats .stat:nth-child(3){--tile-accent:var(--accent-3);}
.stats .stat:nth-child(4){--tile-accent:var(--accent-4);}

/* tables */
.table-wrap { overflow-x: auto; padding: 8px; }
table.table { width: 100%; border-collapse: collapse; font-size: calc(15px * var(--scale)); }
table.table th { text-align: left; padding: 14px 16px; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; }
table.table td { padding: 14px 16px; border-top: 1px solid var(--line); vertical-align: middle; }
table.table tbody tr:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.t-name { font-weight: 700; color: var(--ink); }
.t-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }

/* badges */
.badge { display: inline-block; font-size: 13px; font-weight: 700; padding: 4px 13px; border-radius: 20px; white-space: nowrap; }
.badge.good{background:var(--good-bg);color:#0e9e78;} .badge.warn{background:var(--warn-bg);color:#b97b00;}
.badge.serious{background:var(--serious-bg);color:#d96a3a;} .badge.crit{background:var(--crit-bg);color:#e0424f;}
.badge.neutral{background:color-mix(in srgb,var(--accent) 12%,#eee);color:var(--ink-2);}
.badge.accent{background:var(--accent-050);color:var(--accent-ink);}

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; text-decoration: none;
  background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #fff;
  padding: 12px 22px; border-radius: var(--r-sm); font-family: var(--font); font-size: calc(15px * var(--scale)); font-weight: 700;
  box-shadow: var(--raise-shadow); transition: transform .1s; }
.btn:hover { color: #fff; text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: var(--surface-bg); color: var(--accent-ink); -webkit-backdrop-filter: var(--surface-blur); backdrop-filter: var(--surface-blur); }
.btn-mini { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; text-decoration: none;
  background: var(--surface-bg); color: var(--ink-2); border: var(--surface-border); border-radius: 13px;
  padding: 7px 13px; font-size: 13.5px; font-weight: 700; margin-left: 4px; box-shadow: var(--raise-shadow); }
.btn-mini:hover { color: var(--accent-ink); text-decoration: none; transform: translateY(-1px); }
.btn-mini.danger { color: var(--crit); }

/* forms */
label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink-2); margin: 14px 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea {
  width: 100%; padding: 12px 15px; border: var(--surface-border); border-radius: var(--r-sm);
  font-size: 15.5px; font-family: inherit; color: var(--ink); background: var(--input-bg); box-shadow: var(--inset-shadow);
  -webkit-backdrop-filter: var(--surface-blur); backdrop-filter: var(--surface-blur); }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: var(--inset-shadow), 0 0 0 3px var(--accent-050); }
textarea { resize: vertical; }
details.card summary { cursor: pointer; font-weight: 800; color: var(--accent-ink); list-style: none; font-size: 15.5px; }
details.card summary::-webkit-details-marker { display: none; }
details.card summary::before { content: "＋ "; }
details.card[open] summary::before { content: "− "; }

/* mini bars */
.bars { display: flex; flex-direction: column; gap: 15px; }
.bar-row { display: grid; grid-template-columns: 150px 1fr 46px; align-items: center; gap: 14px; }
.bar-row .bl { color: var(--ink-2); font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 16px; background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 10px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 10px; }
.bar-row .bn { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 800; font-size: 15px; font-family: var(--font-head); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.section-title { font-family: var(--font-head); font-size: calc(18px * var(--scale)); font-weight: 600; color: var(--ink); margin: 0 0 16px; }
.muted { color: var(--muted); }
.note { padding: 13px 17px; border-radius: var(--r-sm); font-size: 14.5px; font-weight: 600; margin: 14px 0; }
.note.warn { background: var(--warn-bg); color: #b97b00; } .note.good { background: var(--good-bg); color: #0e9e78; }

/* ---------- per-look component character ---------- */
.page-head h1 { font-weight: var(--head-weight); letter-spacing: var(--head-spacing); }

/* glass: fine top-edge highlight; frosted outline buttons */
[data-look="glass"] .card, [data-look="glass"] .stat, [data-look="glass"] .table-wrap { border-top: 1px solid rgba(255,255,255,.9); }
[data-look="glass"] .btn {
  background: linear-gradient(180deg, color-mix(in srgb,var(--accent-2) 84%, transparent), color-mix(in srgb,var(--accent) 84%, transparent));
  border: 1px solid rgba(255,255,255,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 6px 16px color-mix(in srgb,var(--accent) 26%, transparent);
}

/* liquid: glossy sheen button + reflective card top */
[data-look="liquid"] .btn {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb,#fff 26%, var(--accent-2)), var(--accent));
  box-shadow: 0 10px 24px color-mix(in srgb,var(--accent) 40%, transparent), inset 0 1.5px 1px rgba(255,255,255,.75);
}
[data-look="liquid"] .btn::before { content:""; position:absolute; inset:0 0 52% 0; background:linear-gradient(180deg, rgba(255,255,255,.42), transparent); pointer-events:none; }

/* stat-tile icon chip (professional touch) */
.stat .stat-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 6px;
  background: color-mix(in srgb, var(--tile-accent, var(--accent)) 24%, var(--surface-bg));
  color: color-mix(in srgb, var(--tile-accent, var(--accent)) 82%, #2a2a3a); }
.stat .stat-ic svg { width: 23px; height: 23px; stroke: currentColor; stroke-width: var(--icon-stroke); fill: none; }
[data-look="clay"] .stat .stat-ic { box-shadow: inset 2px 2px 4px rgba(255,255,255,.75), inset -3px -3px 7px color-mix(in srgb,var(--tile-accent,var(--accent)) 22%, transparent); }
[data-look="glass"] .stat .stat-ic { border: 1px solid rgba(255,255,255,.5); }
[data-look="liquid"] .stat .stat-ic { border: 1px solid rgba(255,255,255,.55); box-shadow: inset 0 1px 1px rgba(255,255,255,.8); }

@media (max-width: 860px) {
  .app-shell { flex-direction: column; padding: 12px; }
  .sidebar { width: auto; height: auto; position: static; flex-direction: row; align-items: center; overflow-x: auto; }
  .sidebar nav { flex-direction: row; flex: 1; }
  .sidebar .navlabel, .sidebar .userblock .who span, .sidebar .brand { display: none; }
  .grid-2 { grid-template-columns: 1fr; }
}