/* ============================================================
   Dofus Tools — système de design partagé (clair + sombre)
   ============================================================ */

/* ---- Jetons : thème SOMBRE (par défaut) ---- */
:root, html[data-theme="dark"]{
  --bg-1:#131a26; --bg-2:#0a0e15;
  --surface:#161d2b; --surface-2:#1c2536; --surface-3:#232e42;
  --border:#2a3448; --border-strong:#3a4763;
  --text:#eef2f9; --text-2:#b3c0d6; --text-3:#7d8aa3;
  --gold:#e5b64a; --gold-2:#c99a34; --gold-ink:#1a1405;
  --emerald:#4ecb8d; --emerald-bg:#12301f; --emerald-line:#245f3f;
  --ruby:#e5766e; --ruby-bg:#301513; --ruby-line:#5e2a25;
  --violet:#9d84d6;
  --field-bg:#1a2334; --field-line:#3d4a66; --field-ph:#7d8aa3;
  --glow-gold:rgba(229,182,74,.06); --glow-emerald:rgba(78,203,141,.04);
  --shadow:0 2px 4px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.35);
  --shadow-lg:0 8px 30px rgba(0,0,0,.45);
  --radius:12px;
}

/* ---- Jetons : thème CLAIR (parchemin) ---- */
html[data-theme="light"]{
  --bg-1:#f5efe1; --bg-2:#ece3d0;
  --surface:#fffdf8; --surface-2:#f8f2e6; --surface-3:#efe7d5;
  --border:#e4dac6; --border-strong:#cdbfa2;
  --text:#221c12; --text-2:#5a5142; --text-3:#8b7e69;
  --gold:#a9761b; --gold-2:#8c6014; --gold-ink:#fffdf8;
  --emerald:#1c7a4d; --emerald-bg:#e6f4ec; --emerald-line:#a9d7bd;
  --ruby:#b23b30; --ruby-bg:#f9e8e5; --ruby-line:#e6b8b1;
  --violet:#6b52a8;
  --field-bg:#fbf6ea; --field-line:#d8c69a; --field-ph:#a1937b;
  --glow-gold:rgba(169,118,27,.05); --glow-emerald:rgba(28,122,77,.03);
  --shadow:0 1px 2px rgba(80,60,20,.06),0 3px 12px rgba(80,60,20,.07);
  --shadow-lg:0 8px 28px rgba(80,60,20,.12);
  --radius:12px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--text);min-height:100vh;
  background:
    radial-gradient(1200px 600px at 80% -10%,var(--glow-gold),transparent 60%),
    radial-gradient(900px 500px at 0% 10%,var(--glow-emerald),transparent 55%),
    linear-gradient(160deg,var(--bg-1),var(--bg-2));
  background-attachment:fixed;
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
  transition:color .18s ease;
}
.tnum{font-variant-numeric:tabular-nums}
.hidden{display:none!important}

/* ---- Barre d'application ---- */
.appbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg-2) 82%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.appbar-in{max-width:1320px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.crest,.mark{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:18px;font-weight:800;
  background:linear-gradient(150deg,var(--surface-3),var(--surface));
  border:1px solid var(--border-strong);color:var(--gold);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 6px rgba(0,0,0,.25)}
.brand h1{margin:0;font-size:15px;font-weight:700;letter-spacing:.2px;white-space:nowrap}
.brand p{margin:0;font-size:11.5px;color:var(--gold);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.spacer{flex:1}
.savestate{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3);white-space:nowrap}
.savestate .dot{width:7px;height:7px;border-radius:50%;background:var(--emerald);flex:none;transition:background .2s}
.savestate.warn{color:var(--ruby)} .savestate.warn .dot{background:var(--ruby)}
.userbox{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-2)}

/* ---- Boutons ---- */
.btn,.iconbtn,.navlink{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:13px;
  font-weight:600;cursor:pointer;text-decoration:none;border-radius:9px;transition:all .15s ease;white-space:nowrap;border:1px solid transparent}
.btn{padding:9px 15px;font-weight:650}
.iconbtn,.navlink{padding:8px 13px;color:var(--text-2);background:var(--surface);border-color:var(--border-strong)}
.iconbtn:hover,.navlink:hover{color:var(--text);border-color:var(--gold-2);box-shadow:0 0 0 3px var(--glow-gold)}
.navlink .arrow{color:var(--gold)}
.btn-gold,.btn-primary{background:linear-gradient(150deg,var(--gold),var(--gold-2));color:var(--gold-ink);
  box-shadow:0 2px 8px var(--glow-gold)}
.btn-gold:hover,.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:var(--surface);color:var(--text-2);border-color:var(--border-strong)}
.btn-ghost:hover{color:var(--text);border-color:var(--gold-2)}
.btn-danger{background:var(--surface);color:var(--ruby);border-color:var(--ruby-line)}
.btn-danger:hover{background:var(--ruby-bg)}

/* ---- Mise en page ---- */
.page,.wrap{max-width:1320px;margin:0 auto;padding:26px 24px 44px}
.wrap{max-width:960px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
  margin:0 0 14px;display:flex;align-items:center;gap:10px}
.eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1080px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid{grid-template-columns:1fr}}

/* ---- Panneaux / cartes ---- */
.panel,.tablecard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden}
.panel-head,.tablecard-head{display:flex;align-items:center;gap:9px;padding:12px 15px;
  border-bottom:1px solid var(--border);background:var(--surface-2);flex-wrap:wrap}
.tablecard-head{padding:13px 16px}
.panel-head h2,.tablecard-head h2{margin:0;font-size:13px;font-weight:700;letter-spacing:.1px}
.step{width:20px;height:20px;border-radius:6px;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--gold),var(--gold-2));color:var(--gold-ink);font-size:11px;font-weight:800}
.panel-body{padding:13px 15px;display:flex;flex-direction:column;gap:10px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px}
.row label{font-size:13px;color:var(--text-2);line-height:1.3}

/* ---- Champs ---- */
input,select{font-family:inherit;font-size:13px;font-weight:600;color:var(--text);background:var(--field-bg);
  border:1.5px solid var(--field-line);border-radius:8px;padding:8px 10px;
  transition:border-color .15s,box-shadow .15s;font-variant-numeric:tabular-nums}
input[type=date]{color-scheme:light dark;cursor:pointer}
html[data-theme="dark"] input[type=date]{color-scheme:dark}
input:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--glow-gold)}
input:disabled,select:disabled{opacity:.4;cursor:not-allowed;background:var(--surface-2);border-color:var(--border)}
input::placeholder{color:var(--field-ph);font-weight:400}
input[type=number]{-moz-appearance:textfield;appearance:textfield;text-align:right}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
select{cursor:pointer} select option{background:var(--surface-2);color:var(--text)}
.row input,.row select{width:126px;flex:none;padding:6px 9px;text-align:right}
.row input[type=text]{text-align:left}
.row select{text-align:left;padding-right:6px}
.controls{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:20px}
.ctrl{display:flex;flex-direction:column;gap:5px}
.ctrl label{font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--text-3)}
.tax-in{width:80px}

/* ---- Interrupteur ---- */
.toggle{position:relative;width:38px;height:21px;flex:none}
.toggle input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:2}
.track{position:absolute;inset:0;border-radius:99px;background:var(--border-strong);transition:background .18s ease;pointer-events:none}
.track::after{content:"";position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .18s ease}
.toggle input:checked ~ .track{background:var(--gold)}
.toggle input:checked ~ .track::after{transform:translateX(17px)}
.toggle input:focus-visible ~ .track{box-shadow:0 0 0 3px var(--glow-gold)}

/* ---- Encarts calculés ---- */
.readout{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:8px 10px;
  border-radius:8px;background:var(--surface-2);border:1px solid var(--border)}
.readout span{font-size:12px;color:var(--text-3)}
.readout b{font-size:13px;font-weight:650;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- KPI / stats ---- */
.kpis,.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
@media(max-width:1080px){.kpis,.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.kpis,.stats{grid-template-columns:1fr}}
.kpi,.stat{position:relative;background:linear-gradient(160deg,var(--surface-2),var(--surface));
  border:1px solid var(--border);border-radius:var(--radius);padding:15px 17px;overflow:hidden;box-shadow:var(--shadow)}
.kpi::before,.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}
.kpi.gold::before,.stat.tax::before{background:var(--gold)}
.stat.invest::before{background:var(--violet)}
.kpi.pos::before,.stat.profit::before{background:var(--emerald)}
.kpi.neg::before{background:var(--ruby)}
.stat.net::before{background:linear-gradient(var(--gold),var(--emerald))}
.k-label,.s-label{font-size:11px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
.k-value{font-size:21px;font-weight:800;letter-spacing:-.5px;margin-top:5px;font-variant-numeric:tabular-nums;
  line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-value{font-size:23px;font-weight:800;letter-spacing:-.5px;margin-top:6px;font-variant-numeric:tabular-nums}
.k-sub,.s-sub{font-size:12px;color:var(--text-3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi.pos .k-value,.stat.profit .s-value{color:var(--emerald)}
.kpi.neg .k-value{color:var(--ruby)}
.stat.tax .s-value{color:var(--gold)} .stat.invest .s-value{color:var(--violet)}

/* ---- Tableaux ---- */
.chip{font-size:11px;font-weight:650;padding:3px 9px;border-radius:99px;background:var(--surface-3);
  border:1px solid var(--border-strong);color:var(--text-2)}
.chip.unit{color:var(--text-3);font-weight:550}
.scroller{overflow-x:auto}
table{border-collapse:separate;border-spacing:0;width:100%;min-width:1000px}
thead th{position:sticky;top:0;z-index:5;background:var(--surface-2);font-size:11px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);text-align:right;padding:11px 13px;
  border-bottom:1px solid var(--border);white-space:nowrap}
thead th:first-child,thead th.left{text-align:left}
thead th.mid{text-align:center}
tbody td{padding:6px 13px;font-size:13px;text-align:right;border-bottom:1px solid var(--border);color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--surface-2)}
tbody td.dim{color:var(--text-3)} tbody td.strong{font-weight:650}
tbody td.money{font-size:12.5px;letter-spacing:-.2px}
tbody tr.sold td{color:var(--text-3)} tbody tr.sold .cell-in{opacity:.6}
.cell-in{width:100%;padding:5px 8px;font-size:13px;font-weight:600;text-align:right;background:var(--field-bg);
  border:1.5px solid var(--field-line);border-radius:6px;color:var(--text);font-family:inherit;font-variant-numeric:tabular-nums}
.cell-in.name{text-align:left;font-weight:550}
.cell-in.date{text-align:left;cursor:pointer;width:150px}
.cell-in::placeholder{color:var(--field-ph);font-weight:400}
.cell-in:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--glow-gold)}
td.profit{font-weight:700} .pos{color:var(--emerald)} .neg{color:var(--ruby)} .tax{color:var(--gold)}
.star{color:var(--gold);font-size:12px;margin-left:6px;vertical-align:middle}
tr.is-best td{background:color-mix(in srgb,var(--gold) 8%,transparent)}
tr.is-best:hover td{background:color-mix(in srgb,var(--gold) 12%,transparent)}
tr.is-best td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.del{border:none;background:none;color:var(--text-3);cursor:pointer;font-size:15px;padding:3px 6px;border-radius:6px;transition:all .15s}
.del:hover{color:var(--ruby);background:var(--ruby-bg)}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:52px;padding:3px 9px;border-radius:99px;
  font-size:11px;font-weight:700;letter-spacing:.03em}
.badge.ok{background:var(--emerald-bg);color:var(--emerald);border:1px solid var(--emerald-line)}
.badge.no{background:var(--ruby-bg);color:var(--ruby);border:1px solid var(--ruby-line)}
.badge.na{background:var(--surface-3);color:var(--text-3);border:1px solid var(--border)}
.status{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:650;padding:3px 9px;border-radius:99px}
.status.wait{background:var(--surface-3);color:var(--text-3);border:1px solid var(--border-strong)}
.status.done{background:var(--emerald-bg);color:var(--emerald);border:1px solid var(--emerald-line)}
.check{position:relative;width:22px;height:22px;display:inline-block;vertical-align:middle;cursor:pointer}
.check input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.check .box{position:absolute;inset:0;border-radius:6px;background:var(--field-bg);border:1.5px solid var(--field-line);transition:all .15s}
.check .box::after{content:"";position:absolute;left:6.5px;top:2.5px;width:6px;height:11px;
  border:solid var(--gold-ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transition:transform .15s;opacity:0}
.check input:checked ~ .box{background:linear-gradient(150deg,var(--emerald),#2fa06a);border-color:var(--emerald)}
.check input:checked ~ .box::after{transform:rotate(45deg) scale(1);opacity:1}
.tablecard-foot{display:flex;gap:9px;padding:13px 16px;border-top:1px solid var(--border);flex-wrap:wrap;align-items:center}
.foot-sep{flex:1}

/* ---- Écran d'authentification ---- */
.auth{max-width:380px;margin:56px auto 0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-lg)}
.auth h2{margin:0 0 6px;font-size:20px}
.auth .sub{margin:0 0 20px;color:var(--text-3);font-size:13px}
.auth label{display:block;font-size:12px;color:var(--text-3);margin:14px 0 5px;font-weight:600}
.auth input{width:100%;padding:10px 12px;font-size:14px;text-align:left}
.auth .btn{width:100%;justify-content:center;margin-top:20px}
.switch{margin-top:16px;text-align:center;font-size:13px;color:var(--text-3)}
.switch a{color:var(--gold);cursor:pointer;font-weight:600}
.msg{margin-top:14px;padding:10px 12px;border-radius:8px;font-size:13px;display:none}
.msg.err{display:block;background:var(--ruby-bg);color:var(--ruby);border:1px solid var(--ruby-line)}
.msg.ok{display:block;background:var(--emerald-bg);color:var(--emerald);border:1px solid var(--emerald-line)}
.banner{max-width:380px;margin:0 auto 18px;padding:11px 14px;border-radius:8px;font-size:13px;text-align:center;display:none;
  background:var(--gold-soft,color-mix(in srgb,var(--gold) 14%,transparent));color:var(--gold);border:1px solid var(--gold-2)}

/* ---- Tuiles du menu ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.tile{display:block;text-decoration:none;color:inherit;position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--surface-2),var(--surface));border:1px solid var(--border);
  border-radius:var(--radius);padding:22px;transition:all .18s;box-shadow:var(--shadow)}
.tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}
.tile:hover{border-color:var(--gold-2);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.tile .ico{font-size:30px;margin-bottom:12px}
.tile h3{margin:0 0 6px;font-size:16px}
.tile p{margin:0;font-size:13px;color:var(--text-3);line-height:1.5}

/* ---- Bas de page ---- */
.note{margin-top:22px;font-size:12.5px;color:var(--text-2);line-height:1.65;max-width:100ch}
.note b{color:var(--text);font-weight:650}
footer{margin-top:30px;padding-top:18px;border-top:1px solid var(--border);font-size:11.5px;color:var(--text-3);line-height:1.7;max-width:110ch}
footer strong{color:var(--text-2);font-weight:650;display:block;margin-bottom:5px;font-size:11px;letter-spacing:.06em;text-transform:uppercase}