/* admin.smithiii.co: the site's night ground, three bars and type, laid out as a working tool */
@font-face{font-family:"Clash Display";font-weight:500;src:url(/fonts/ClashDisplay-500.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Clash Display";font-weight:600;src:url(/fonts/ClashDisplay-600.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Clash Display";font-weight:700;src:url(/fonts/ClashDisplay-700.woff2) format("woff2");font-display:swap}
@font-face{font-family:"General Sans";font-weight:400;src:url(/fonts/GeneralSans-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"General Sans";font-weight:500;src:url(/fonts/GeneralSans-500.woff2) format("woff2");font-display:swap}
@font-face{font-family:"General Sans";font-weight:600;src:url(/fonts/GeneralSans-600.woff2) format("woff2");font-display:swap}
@font-face{font-family:"JetBrains Mono";font-weight:400;src:url(/fonts/JetBrainsMono-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"JetBrains Mono";font-weight:500;src:url(/fonts/JetBrainsMono-500.woff2) format("woff2");font-display:swap}
:root{--bg:#07080f;--bg-2:#0b0d18;--panel:#0d0f1c;--ink:#eef0f7;--muted:#9298b0;--faint:#5b6076;--line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.16);
  --indigo:#6366f1;--fuchsia:#d946ef;--cyan:#22d3ee;--grad:linear-gradient(100deg,var(--indigo),var(--fuchsia) 55%,var(--cyan));
  --ok:#34d399;--warn:#fbbf24;--bad:#fb7185;--accent:var(--cyan);
  --f-display:"Clash Display","General Sans",system-ui,sans-serif;--f-sans:"General Sans",system-ui,sans-serif;--f-mono:"JetBrains Mono",ui-monospace,monospace;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:400 15px/1.55 var(--f-sans);font-variant-numeric:tabular-nums;min-height:100vh;display:grid;grid-template-columns:232px minmax(0,1fr)}
body::before{content:"";position:fixed;inset:-30vh -10vw auto auto;width:70vw;height:80vh;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%)}
body[data-area="invoices"]{--accent:var(--indigo)}body[data-area="clients"]{--accent:var(--fuchsia)}body[data-area="retainers"]{--accent:var(--cyan)}
a{color:inherit;text-decoration:none}
/* rail */
.rail{position:sticky;top:0;height:100vh;padding:28px 22px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:34px;background:rgba(7,8,15,.6);backdrop-filter:blur(14px);z-index:2}
.brand{display:flex;align-items:center;gap:14px}
.bars{display:flex;gap:5px}.bars i{display:block;width:6px;height:26px;border-radius:2px;background:var(--indigo);box-shadow:0 0 12px var(--indigo)}
.bars i:nth-child(2){background:var(--fuchsia);box-shadow:0 0 12px var(--fuchsia)}.bars i:nth-child(3){background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.brand span{font:500 11px var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.rail nav{display:flex;flex-direction:column;gap:2px}
.rail nav a{padding:9px 12px;border-radius:10px;color:var(--muted);font-weight:500;display:flex;justify-content:space-between;align-items:center;border:1px solid transparent}
.rail nav a:hover{color:var(--ink);background:rgba(150,160,220,.05)}
.rail nav a[aria-current]{color:#fff;background:rgba(150,160,220,.07);border-color:var(--line)}
.rail nav a[aria-current]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.rail .new{margin-top:auto}
.rail small{font:400 11px var(--f-mono);color:var(--faint);letter-spacing:.06em}
/* page */
main{position:relative;z-index:1;padding:40px clamp(20px,4vw,56px) 80px;max-width:1240px;width:100%}
.eyebrow{font:500 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
h1{font:700 clamp(30px,4vw,44px)/1.05 var(--f-display);margin:10px 0 0;letter-spacing:-.01em}
h2{font:600 20px/1.2 var(--f-display);margin:0}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:32px}
.head p{color:var(--muted);margin:8px 0 0;max-width:60ch}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--ink);font:500 14px var(--f-sans);cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn.primary{border:0;background:linear-gradient(100deg,var(--indigo),#7c74f0 45%,var(--cyan));color:#fff;font-weight:600}
.btn.danger:hover{border-color:var(--bad);color:var(--bad)}
.btn.small{padding:6px 12px;font-size:13px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card{background:rgba(150,160,220,.045);border:1px solid var(--line);border-radius:16px;padding:22px 24px}
.grid{display:grid;gap:18px}.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.split{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
.stat .k,.k{font:500 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.stat b{display:block;font:600 clamp(19px,2.1vw,28px)/1.1 var(--f-display);margin-top:10px;overflow-wrap:anywhere}
.stat span{display:block;color:var(--muted);font-size:13px;margin-top:6px}
.stat.hot b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
section{margin-top:40px}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;gap:12px}
.sec-head a{color:var(--muted);font-size:13px}.sec-head a:hover{color:var(--accent)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:rgba(150,160,220,.03)}
table{width:100%;border-collapse:collapse;min-width:640px}
th{font:500 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
td:has(small),td.wrap{white-space:normal}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(150,160,220,.05)}
.num{text-align:right;white-space:nowrap}
td.no{font-family:var(--f-mono);font-size:13px;color:var(--muted)}
td a.row{font-weight:500}td a.row:hover{color:var(--accent)}
td small,.sub{display:block;color:var(--muted);font-size:13px}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font:500 10.5px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;border:1px solid currentColor;white-space:nowrap}
.pill.draft{color:var(--muted)}.pill.sent{color:var(--cyan)}.pill.partial{color:var(--warn)}.pill.overdue{color:var(--bad)}.pill.paid{color:var(--ok)}.pill.void{color:var(--faint);text-decoration:line-through}.pill.hold{color:var(--fuchsia)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{padding:6px 14px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:500}
.chip:hover{color:var(--ink);border-color:var(--line-2)}.chip[aria-current]{color:#fff;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.chip b{font-weight:500;color:var(--faint);margin-left:6px}
.empty{padding:36px;text-align:center;color:var(--muted)}
/* forms */
form.stack{display:grid;gap:18px}
.fields{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}.fields .wide{grid-column:1/-1}
label{display:grid;gap:6px;font:500 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
input,select,textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line-2);background:rgba(7,8,15,.7);color:var(--ink);font:400 15px var(--f-sans);letter-spacing:0;text-transform:none}
textarea{min-height:84px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
label.check{display:flex;align-items:center;gap:10px;font:400 14px var(--f-sans);letter-spacing:0;text-transform:none;color:var(--ink)}label.check input{width:auto}
.hint{color:var(--muted);font-size:13px;margin:0}
.line{display:grid;grid-template-columns:minmax(0,1fr) 84px 120px 120px 34px;gap:10px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line)}
.line textarea{min-height:42px;margin-top:8px;font-size:14px}
.line .amt{padding:10px 0;text-align:right;font-weight:500}
.line button{height:42px;border-radius:10px;border:1px solid var(--line);background:none;color:var(--faint);cursor:pointer;font-size:18px}.line button:hover{color:var(--bad);border-color:var(--bad)}
.line-head{display:grid;grid-template-columns:minmax(0,1fr) 84px 120px 120px 34px;gap:10px;font:500 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding-bottom:8px;border-bottom:1px solid var(--line)}
.line-head span:nth-child(n+2){text-align:right}
.total-row{display:flex;justify-content:space-between;align-items:center;padding-top:18px}
.total-row b{font:600 26px var(--f-display)}
/* invoice page */
.sheet{background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55);position:relative}
.sheet iframe{border:0;width:816px;height:1056px;transform-origin:0 0;position:absolute;top:0;left:0;background:#fff}
.side{display:grid;gap:18px}
.side dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:14px 0 0}.side dt{color:var(--muted)}.side dd{margin:0;text-align:right}
.side .big{font:600 30px/1.1 var(--f-display);margin-top:8px}
.list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.list li{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:14px}
.list small{color:var(--muted);display:block}
.list form{margin:0}
.x{background:none;border:0;color:var(--faint);cursor:pointer;font-size:16px;padding:2px 6px}.x:hover{color:var(--bad)}
.flash{border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent);padding:12px 16px;border-radius:12px;margin-bottom:22px}
.note{border-left:2px solid var(--fuchsia);padding:2px 0 2px 14px;color:var(--muted);font-size:14px}
.menu-btn{display:none}
@media (max-width:980px){
  body{display:block}
  .rail{position:static;height:auto;flex-direction:row;align-items:center;gap:14px;padding:14px 16px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}
  .rail nav{flex-direction:row}.rail nav a{padding:7px 10px;white-space:nowrap}.rail nav a[aria-current]::after{display:none}
  .brand span,.rail small{display:none}.rail .new{margin:0 0 0 auto}
  main{padding:26px 16px 60px}
  .cols-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card{padding:18px}.stat b{font-size:clamp(17px,5.2vw,26px)}.split,.cols-2,.fields{grid-template-columns:minmax(0,1fr)}
  .line,.line-head{grid-template-columns:minmax(0,1fr) 62px 92px 34px}.line .amt,.line-head span:nth-child(4){display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}