/*
 * Author: Frandy Slueue | Alias: CodeBreeder | Title: Software Engineering · DevOps Security · IT Ops
 * Portfolio: https://frandycode.dev | GitHub: https://github.com/frandycode
 * Email: frandyslueue@gmail.com | Location: Tulsa, OK & Dallas, TX (Central Time)
 * Project: Study Desk — Admin dashboard styles (Study Desk colors, light and dark)
 */
:root{color-scheme:light;
 --bg:#e7eef6;--bg-2:#d8e3ef;--card:#fff;--ink:#1c2540;--ink-2:#566079;--line:#c4d0df;--soft:#f3f7fb;
 --brand:#2f6fe0;--brand-ink:#fff;--go:#16905c;--miss:#d8473b;--warn:#cf9300;--focus:#2f6fe0;
 --bar:#2f6fe0;--bar-2:#9db8ea;--grid:#e4ebf3;
 --f-display:"Baloo 2",ui-rounded,"Trebuchet MS",system-ui,sans-serif;
 --f-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
 --shadow:0 1px 0 rgba(28,37,64,.05),0 8px 20px -14px rgba(28,37,64,.45)}
@media (prefers-color-scheme:dark){:root{color-scheme:dark;
 --bg:#121928;--bg-2:#1a2337;--card:#1e283e;--ink:#eef2fb;--ink-2:#a6b1cb;--line:#34435f;--soft:#18213a;
 --brand:#78a3ff;--brand-ink:#0b1430;--go:#3cc488;--miss:#ff6f63;--warn:#ffcb3d;--focus:#86acff;
 --bar:#78a3ff;--bar-2:#3d5687;--grid:#2a3753;--shadow:0 1px 0 rgba(0,0,0,.2),0 10px 22px -14px rgba(0,0,0,.8)}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--f-body);-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--f-display);font-weight:800;line-height:1.15;margin:0}
h1{font-size:1.8rem}h2{font-size:1.35rem}h3{font-size:1.05rem}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:8px}
.defs{position:absolute}
.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.muted{color:var(--ink-2)}
.tiny{font-size:.85rem}
.num{font-variant-numeric:tabular-nums}
.stack{display:grid;gap:10px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.between{justify-content:space-between}
.grow{flex:1 1 auto}

/* sign-in */
.signin{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.signcard{width:min(420px,100%);display:grid;gap:14px;text-align:left}
.logo{border-radius:14px}
label{font-weight:700;font-size:.92rem}
input,select,textarea{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--card)}
textarea{min-height:90px;resize:vertical}
.msg{min-height:1.4em;color:var(--miss);font-weight:700}

/* shell */
.shell{max-width:1180px;margin:0 auto;padding:0 16px 24px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px}
.brand img{border-radius:8px}
.brand b{font-family:var(--f-display);font-size:1.35rem}
.tag{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--ink);color:var(--bg);border-radius:6px;padding:2px 7px}
.who{display:flex;align-items:center;gap:8px;min-width:0}
#meEmail{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40vw}
.tabs{display:flex;gap:4px;overflow-x:auto;padding-bottom:8px;border-bottom:1px solid var(--bg-2);scrollbar-width:thin}
.tabs a{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;color:var(--ink-2);text-decoration:none;font-weight:700;white-space:nowrap}
.tabs a:hover{background:var(--bg-2);color:var(--ink)}
.tabs a[aria-current="page"]{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.count{min-width:20px;padding:0 6px;border-radius:999px;background:var(--miss);color:#fff;font-size:.75rem;text-align:center;line-height:20px}
.count:empty{display:none}
.content{padding:18px 0;display:grid;gap:16px;outline:none}
.foot{text-align:center;color:var(--ink-2);font-size:.85rem;padding:20px 0}

/* cards and tiles */
.card{background:var(--card);border-radius:14px;padding:18px;box-shadow:var(--shadow);min-width:0}
.card>h2,.card>h3{margin-bottom:10px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tile{background:var(--card);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow);display:grid;gap:2px}
.tile b{font-family:var(--f-display);font-size:1.9rem;line-height:1.1;font-variant-numeric:tabular-nums}
.tile span{color:var(--ink-2);font-size:.9rem}
.tile.alert b{color:var(--miss)}
.chip{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:1px 9px;font-size:.78rem;font-weight:700;border:1.5px solid var(--line);white-space:nowrap}
.chip.new,.chip.open,.chip.fail{border-color:var(--miss);color:var(--miss)}
.chip.done,.chip.fixed,.chip.pass{border-color:var(--go);color:var(--go)}
.chip.planned,.chip.seen{border-color:var(--brand);color:var(--brand)}
.chip.on{background:var(--go);border-color:var(--go);color:#fff}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);font-weight:700;cursor:pointer}
.btn:hover{border-color:var(--ink-2)}
.btn.go{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.bad{border-color:var(--miss);color:var(--miss)}
.btn.small{padding:5px 11px;font-size:.88rem}
.btn:disabled{opacity:.55;cursor:default}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);cursor:pointer}
.link{background:none;border:0;padding:0;color:var(--brand);font-weight:700;cursor:pointer;text-align:left}
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{border:0;background:var(--card);padding:6px 12px;font-weight:700;cursor:pointer;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}

/* lists and tables */
.list{display:grid;gap:10px}
.item{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;gap:8px;background:var(--card)}
.item .meta{display:flex;flex-wrap:wrap;gap:6px 12px;color:var(--ink-2);font-size:.86rem;align-items:center}
.item .body{white-space:pre-wrap;overflow-wrap:anywhere}
.item pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.8rem;background:var(--soft);border-radius:8px;padding:8px 10px;max-height:180px;overflow:auto}
.reply{border-left:4px solid var(--go);padding:4px 0 4px 12px;color:var(--ink-2);white-space:pre-wrap}
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
.empty{color:var(--ink-2);padding:18px;text-align:center;border:1.5px dashed var(--line);border-radius:12px}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px}
.kv dt{color:var(--ink-2)}
.kv dd{margin:0;font-weight:700;overflow-wrap:anywhere}

/* charts */
.chart{width:100%;height:auto;display:block}
.chart .gridline{stroke:var(--grid);stroke-width:1}
.chart .barr{fill:var(--bar)}
.chart .barr.alt{fill:var(--bar-2)}
.chart .line{fill:none;stroke:var(--bar);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart .line.alt{stroke:var(--go)}
.chart .dot{fill:var(--bar)}
.chart text{fill:var(--ink-2);font:11px var(--f-body);font-variant-numeric:tabular-nums}
.chart text.val{fill:var(--ink);font-weight:700}
.legend{display:flex;flex-wrap:wrap;gap:10px 16px;font-size:.86rem;color:var(--ink-2);margin-top:6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle;background:var(--bar)}
.legend i.alt{background:var(--go)}
.legend i.alt2{background:var(--warn)}
.legend i.alt3{background:#7f4fe4}
.chart .track{fill:var(--bg-2)}
.chart .seg-pass{fill:var(--go)}
.chart .seg-fail{fill:var(--miss)}
.chart .seg-skip{fill:var(--bar-2)}
.chart .line.alt2{stroke:var(--warn)}
.chart .line.alt3{stroke:#7f4fe4}
.chart .dot.alt{fill:var(--go)}
.chart .dot.alt2{fill:var(--warn)}
.chart .dot.alt3{fill:#7f4fe4}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:12px;font-weight:700;box-shadow:var(--shadow);max-width:calc(100% - 32px);z-index:5}
@media (max-width:640px){
 h1{font-size:1.5rem}
 .who .chip{display:none}
 .kv{grid-template-columns:1fr}
}