/* Studio Ledger — styles ported from the design prototype (the reference). */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root{
  --bg:#ffffff;
  --ink:#222222;
  --ink-2:#3d3d3d;
  --muted:#717171;
  --faint:#9a9a9a;
  --line:#EBEBEB;
  --line-2:#DDDDDD;
  --hi:#F7F7F5;
  --crimson:#E8265E;
  --crimson-ink:#C21B4C;
  --crimson-wash:#FDECF1;
  --green:#4E9A51;
  --yellow:#F2C12E;
  --gold:#B7841F;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:"DM Sans",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.5;
  font-variant-numeric:tabular-nums;
}
button{font-family:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:var(--crimson-wash)}
.num,.money{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.muted{color:var(--muted)}
[hidden]{display:none !important}

.error{color:var(--crimson);font-size:.9rem}
.flash{color:var(--green);font-size:.9rem;font-weight:600}

/* ---------- top bar ---------- */
.top{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:10}
.top-inner{max-width:1760px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:16px 40px}
.logo{display:flex;align-items:center;gap:11px}
.logo .wm{font-weight:700;font-size:18px;letter-spacing:-.02em;line-height:1}
.top .sp{flex:1}
.av{width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:600;font-size:13px}
.top a.out{font-size:13.5px;color:var(--muted)}
.top a.out:hover{color:var(--ink)}

/* ---------- shell ---------- */
.shell{max-width:1760px;margin:0 auto;display:grid;grid-template-columns:230px 1fr;gap:64px;padding:44px 40px 90px}
.side{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:2px}
.side .cap{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:14px 14px 6px;font-weight:600}
.side .cap:first-child{padding-top:0}
.navlink{
  display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:11px;
  font-size:15px;font-weight:500;color:var(--ink-2);text-decoration:none;transition:background .13s;border:none;background:none;text-align:left;width:100%;
}
.navlink svg{flex:none;color:var(--muted);stroke-width:1.7}
.navlink:hover{background:var(--hi)}
.navlink.active{background:var(--hi);font-weight:600;color:var(--ink)}
.navlink.active svg{color:var(--ink)}

.content{min-width:0}
.view{animation:fade .28s ease}
@keyframes fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* headings */
.h-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:6px}
h1.page{font-size:32px;font-weight:700;letter-spacing:-.025em;margin:0;line-height:1.05}
.lead{color:var(--muted);font-size:15px;margin:8px 0 0}
.back{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;margin-bottom:22px;background:none;border:none;padding:0}
.back:hover{color:var(--crimson-ink)}

/* buttons */
.btn{display:inline-block;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);padding:10px 18px;border-radius:10px;font-size:14px;font-weight:600;transition:.13s;text-decoration:none}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--crimson);border-color:var(--crimson);color:#fff}
.btn.primary:hover{background:var(--crimson-ink);border-color:var(--crimson-ink)}
.btn.sm{padding:8px 13px;font-size:13px}

/* ---------- client rows ---------- */
.rows{margin-top:14px}
.clientrow{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 2px;border-bottom:1px solid var(--line);width:100%;transition:.12s}
.clientrow:hover{background:var(--hi)}
.clientrow:hover .chev{transform:translateX(3px)}
.clientrow .nm{font-size:17px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cur{font-size:11px;font-weight:600;color:var(--muted);border:1px solid var(--line-2);padding:1px 7px;border-radius:20px;letter-spacing:.02em}
.clientrow .ct{font-size:14px;color:var(--muted);margin-top:4px}
.clientrow .right{display:flex;align-items:center;gap:20px}
.amtblock{text-align:right}
.amtblock .a{font-size:16px;font-weight:700;letter-spacing:-.01em}
.amtblock .a.out{color:var(--crimson)}
.amtblock .a.clear{color:var(--green)}
.amtblock .l{font-size:12.5px;color:var(--faint);margin-top:2px}
.chev{color:var(--faint);transition:transform .15s}

/* summary line */
.summary{display:flex;gap:34px;flex-wrap:wrap;margin:26px 0 8px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.summary .s .v{font-size:22px;font-weight:700;letter-spacing:-.02em}
.summary .s .v.out{color:var(--crimson)}
.summary .s .v.gold{color:var(--gold)}
.summary .s .k{font-size:13px;color:var(--muted);margin-top:2px}

/* status dots */
.st{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600}
.st .d{width:7px;height:7px;border-radius:50%}
.st.paid{color:var(--green)}     .st.paid .d{background:var(--green)}
.st.out{color:var(--crimson)}    .st.out .d{background:var(--crimson)}
.st.pending{color:var(--muted)}  .st.pending .d{background:var(--faint)}
.st.active{color:var(--crimson)} .st.active .d{background:var(--crimson)}
.st.delivered{color:var(--gold)} .st.delivered .d{background:var(--gold)}
.st.closed{color:var(--green)}   .st.closed .d{background:var(--green)}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:28px 0 4px}
.tab{background:none;border:none;padding:12px 16px;font-size:15px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .13s,border-color .13s;text-decoration:none;display:inline-block}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink);border-bottom-color:var(--crimson)}
.tabpanel{animation:fade .2s ease;padding-top:20px}

/* ---------- forms (prototype .frow / .inp pattern) ---------- */
.form{max-width:640px;margin-top:22px}
.frow{margin-bottom:18px}
.frow > label,
.frow > .flabel{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:7px}
.inp{width:100%;border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;font-size:14px;font-family:inherit;color:var(--ink);background:#fff}
.inp:focus{outline:2px solid var(--crimson);outline-offset:0;border-color:transparent}
.inp:disabled{color:var(--muted);background:var(--hi)}
.inp::placeholder{color:var(--faint)}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23717171' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
textarea.inp{resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.checkrow{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.checkrow label{font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;display:flex;align-items:center;gap:9px}
.checkrow input[type=checkbox]{width:17px;height:17px;accent-color:var(--crimson);cursor:pointer}
.checkrow .muted{font-weight:400}
.form-actions{display:flex;align-items:center;gap:14px;margin-top:26px}
.form-actions a.cancel{font-size:14px;font-weight:600;color:var(--muted)}
.form-actions a.cancel:hover{color:var(--ink)}

/* ---------- facts on client overview ---------- */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 48px;margin:6px 0 24px}
.facts dt{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600}
.facts dd{margin:3px 0 0;font-size:15px}

.sect{margin-top:44px}
.sect > h2{font-size:21px;font-weight:700;letter-spacing:-.02em;margin:0}
.sect > .sd{font-size:14px;color:var(--muted);margin:4px 0 0}

/* ---------- auth pages ---------- */
.auth-page{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:1.5rem}
.auth-card{width:100%;max-width:22.5rem}
.auth-card h1{font-size:1.45rem;font-weight:700;letter-spacing:-.02em;margin:0 0 .15rem}
.auth-card .muted{margin:0 0 1.75rem;display:block}
.auth-card label{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:1.1rem}
.auth-card input{display:block;width:100%;margin-top:.45rem;border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;font-size:14px;font-family:inherit;color:var(--ink)}
.auth-card input:focus{outline:2px solid var(--crimson);outline-offset:0;border-color:transparent}
.auth-card button{width:100%;padding:11px;font:inherit;font-weight:600;font-size:14px;color:#fff;background:var(--crimson);border:1px solid var(--crimson);border-radius:10px;cursor:pointer}
.auth-card button:hover{background:var(--crimson-ink);border-color:var(--crimson-ink)}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .shell{grid-template-columns:1fr;gap:10px;padding:26px 22px 70px}
  .side{position:static;flex-direction:row;flex-wrap:wrap;gap:4px;margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--line)}
  .side .cap{display:none}
  .navlink{width:auto;padding:9px 13px}
  .top-inner{padding:14px 22px}
  .h-row{flex-direction:column;align-items:flex-start;gap:14px}
  .two{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .summary{gap:20px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}