/* Essential Marketing — Agency OS (modern lean admin) */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Inter Tight',system-ui,sans-serif;background:#0A0A0A;color:#F0EDE8;font-size:14px;-webkit-font-smoothing:antialiased}
:root{
  --ink:#0A0A0A;--ink2:#101113;--ink3:#161719;--ink4:#1C1E21;--ink5:#232527;
  --surface:rgba(255,255,255,.03);--surface2:rgba(255,255,255,.055);
  --b:rgba(255,255,255,.07);--b2:rgba(255,255,255,.11);
  --red:#C41E1C;--red2:#9E1614;--red-dim:rgba(196,30,28,.12);
  --bone:#F0EDE8;--bone2:#B8B4AF;--bone3:#706C68;--bone4:#3C3A37;
  --green:#22C55E;--amber:#F59E0B;--blue:#3B82F6;
  --sidebar:232px;--top:54px;--r:8px;--r-lg:12px;
  --sh-lg:0 16px 48px rgba(0,0,0,.6);
}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
.hidden{display:none!important}

/* Auth */
#auth{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1000;
  background:var(--ink);
}
#auth::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:700px;height:480px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(196,30,28,.14) 0%,transparent 70%);pointer-events:none;
}
.auth-box{
  position:relative;z-index:1;width:380px;max-width:calc(100vw - 32px);
  background:var(--ink3);border:1px solid var(--b2);border-radius:14px;padding:36px 32px;box-shadow:var(--sh-lg);
}
.auth-box img{height:48px;display:block;margin:0 auto 18px}
.auth-box h1{font-size:20px;font-weight:700;letter-spacing:-.03em;text-align:center;margin-bottom:4px}
.auth-box p{font-size:13px;color:var(--bone3);text-align:center;margin-bottom:22px;line-height:1.5}
.auth-box input{
  width:100%;padding:11px 14px;margin-bottom:10px;border-radius:var(--r);
  border:1px solid var(--b2);background:var(--surface);outline:none;
}
.auth-box input:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--red-dim)}
.auth-box button{
  width:100%;padding:12px;border:0;border-radius:var(--r);background:var(--red);color:#fff;
  font-weight:600;cursor:pointer;margin-top:4px;
}
.auth-box button:hover{background:var(--red2)}
.auth-err{min-height:18px;margin-top:10px;font-size:12px;color:#f87171;text-align:center}
.auth-hint{margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--bone4);text-align:center;letter-spacing:.04em}

/* Shell */
#app{display:none;height:100vh;overflow:hidden}
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:var(--sidebar);
  background:var(--ink2);border-right:1px solid var(--b);display:flex;flex-direction:column;z-index:50;
}
.sidebar-brand{padding:16px 14px;border-bottom:1px solid var(--b);display:flex;align-items:center;gap:10px}
.sidebar-brand .mark{
  width:32px;height:32px;border-radius:7px;background:var(--red);display:grid;place-items:center;
  font-weight:700;font-size:13px;color:#fff;box-shadow:0 4px 12px rgba(196,30,28,.4);
}
.sidebar-brand strong{display:block;font-size:13px;letter-spacing:-.01em}
.sidebar-brand span{font-size:11px;color:var(--bone3)}
.nav{flex:1;padding:10px 8px;overflow:auto}
.nav-label{
  font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone4);padding:12px 10px 6px;
}
.nav-item{
  display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:8px;
  background:transparent;color:var(--bone2);cursor:pointer;text-align:left;margin-bottom:2px;
}
.nav-item:hover{background:var(--surface2);color:var(--bone)}
.nav-item.active{background:var(--red-dim);color:#fff}
.nav-item svg{width:16px;height:16px;opacity:.85;flex-shrink:0}
.sidebar-foot{padding:12px;border-top:1px solid var(--b)}
.sidebar-foot button{
  width:100%;padding:9px 12px;border-radius:8px;border:1px solid var(--b2);
  background:transparent;color:var(--bone2);cursor:pointer;font-size:12px;
}
.sidebar-foot button:hover{border-color:var(--red);color:#fff}
.sidebar-foot a{display:block;margin-top:8px;font-size:11px;color:var(--bone3);text-decoration:none;text-align:center}
.sidebar-foot a:hover{color:var(--bone)}

.main{margin-left:var(--sidebar);height:100vh;display:flex;flex-direction:column;min-width:0}
.topbar{
  height:var(--top);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;border-bottom:1px solid var(--b);background:rgba(10,10,10,.72);backdrop-filter:blur(10px);
}
.topbar h2{font-size:15px;font-weight:600;letter-spacing:-.02em}
.topbar .meta{font-size:12px;color:var(--bone3)}
.content{flex:1;overflow:auto;padding:22px}
.page{display:none;animation:fade .2s ease}
.page.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Cards / metrics */
.grid-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.metric{
  background:var(--ink3);border:1px solid var(--b);border-radius:var(--r-lg);padding:16px 16px 14px;
}
.metric .k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone3)}
.metric .v{font-size:26px;font-weight:700;letter-spacing:-.03em;margin-top:6px}
.metric .s{font-size:12px;color:var(--bone3);margin-top:4px}

.panel{
  background:var(--ink3);border:1px solid var(--b);border-radius:var(--r-lg);overflow:hidden;margin-bottom:14px;
}
.panel-h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 16px;border-bottom:1px solid var(--b);
}
.panel-h h3{font-size:14px;font-weight:600}
.panel-b{padding:14px 16px}

.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 14px;border-radius:8px;border:1px solid var(--b2);background:var(--surface2);
  color:var(--bone);cursor:pointer;font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap;
}
.btn:hover{border-color:var(--b2);filter:brightness(1.08)}
.btn-primary{background:var(--red);border-color:var(--red);color:#fff}
.btn-primary:hover{background:var(--red2)}
.btn-ghost{background:transparent}
.btn:disabled{opacity:.5;cursor:not-allowed}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--bone3)}
.field input,.field select,.field textarea{
  width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--b2);
  background:var(--surface);outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--red-dim)}
.field textarea{min-height:90px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

.table-wrap{overflow:auto}
table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data th{
  text-align:left;padding:10px 12px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bone3);border-bottom:1px solid var(--b);font-weight:600;white-space:nowrap;
}
table.data td{padding:12px;border-bottom:1px solid var(--b);vertical-align:middle}
table.data tr:hover td{background:var(--surface)}
table.data tr{cursor:pointer}
.empty{padding:28px 12px;text-align:center;color:var(--bone3);font-size:13px}

.pill{
  display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:600;
  background:var(--surface2);color:var(--bone2);
}
.pill.open,.pill.in_progress{background:rgba(59,130,246,.15);color:#93c5fd}
.pill.waiting_client,.pill.waiting_parts{background:rgba(245,158,11,.15);color:#fcd34d}
.pill.resolved,.pill.closed,.pill.paid,.pill.active{background:rgba(34,197,94,.15);color:#4ade80}
.pill.urgent,.pill.high,.pill.cancelled{background:rgba(196,30,28,.18);color:#fca5a5}
.pill.pending,.pill.unbilled{background:rgba(245,158,11,.12);color:#fbbf24}
.pill.paused,.pill.inactive{background:rgba(255,255,255,.06);color:var(--bone3)}

/* Modal */
.modal-bg{
  position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:200;
  display:flex;align-items:flex-start;justify-content:center;padding:48px 16px;overflow:auto;
}
.modal{
  width:min(640px,100%);background:var(--ink3);border:1px solid var(--b2);border-radius:14px;
  box-shadow:var(--sh-lg);padding:20px;
}
.modal h3{font-size:17px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}
.modal .sub{font-size:12px;color:var(--bone3);margin-bottom:16px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px;flex-wrap:wrap}

.toast-wrap{position:fixed;right:16px;bottom:16px;z-index:300;display:flex;flex-direction:column;gap:8px}
.toast{
  background:var(--ink4);border:1px solid var(--b2);border-radius:10px;padding:12px 14px;
  font-size:13px;box-shadow:var(--sh-lg);min-width:220px;max-width:360px;
}
.toast.err{border-color:rgba(248,113,113,.4);color:#fecaca}

.detail-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:14px}
.mono{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--bone2)}
.muted{color:var(--bone3)}
.stack{display:flex;flex-direction:column;gap:8px}
.updates{display:flex;flex-direction:column;gap:10px;max-height:280px;overflow:auto}
.update{
  padding:10px 12px;border-radius:8px;background:var(--surface);border:1px solid var(--b);
  font-size:13px;line-height:1.45;
}
.update .when{font-size:11px;color:var(--bone3);margin-bottom:4px}

@media(max-width:980px){
  .grid-metrics{grid-template-columns:repeat(2,1fr)}
  .detail-grid,.row3{grid-template-columns:1fr}
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:none}
  .main{margin-left:0}
}
@media(max-width:640px){
  .grid-metrics,.row2{grid-template-columns:1fr}
  .content{padding:14px}
}