:root{
  --navy-deep:#0b1420;
  --navy:#111f30;
  --navy-panel:#16273c;
  --navy-panel-2:#1c3149;
  --line:#28405c;
  --beam:#f4b942;
  --beam-dim:#8a6b28;
  --ice:#bcd6ea;
  --text:#eaf1f8;
  --text-dim:#8fa3ba;
  --danger:#e2593f;
  --good:#5fae82;
  --shadow: 0 8px 24px rgba(0,0,0,0.35);
  --radius:10px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(244,185,66,0.10), transparent 60%),
    linear-gradient(180deg, var(--navy-deep), #0a121c 60%);
  color:var(--text);
  font-family:'Inter', system-ui, sans-serif;
  min-height:100vh;
}
h1,h2,h3,.display{
  font-family:'Oswald', sans-serif;
  letter-spacing:0.02em;
  text-transform:uppercase;
  font-weight:600;
}
a{color:inherit;}
.app{display:grid; grid-template-columns:220px 1fr; min-height:100vh;}
.sidebar{
  background:linear-gradient(180deg, var(--navy), var(--navy-deep));
  border-right:1px solid var(--line);
  padding:22px 16px;
  display:flex; flex-direction:column; gap:6px;
}
.brand{padding:4px 6px 20px 6px; border-bottom:1px solid var(--line); margin-bottom:14px;}
.brand-logo-wrap{
  background:#fff;
  border-radius:8px;
  padding:10px 12px;
  margin-bottom:10px;
  box-shadow:var(--shadow);
}
.brand-logo{display:block; width:100%; height:auto;}
.brand h1{font-size:15px; line-height:1.25; margin:0; color:var(--text);}
.brand span{display:block; font-family:'Inter',sans-serif; text-transform:none; letter-spacing:0; font-size:11.5px; color:var(--text-dim); margin-top:4px;}
.nav-btn{
  display:block; text-decoration:none;
  background:transparent; border:none;
  color:var(--text-dim);
  font-family:'Oswald',sans-serif; text-transform:uppercase;
  font-size:13px; letter-spacing:0.04em;
  padding:11px 12px; border-radius:8px; cursor:pointer; text-align:left;
}
.nav-btn:hover{background:rgba(255,255,255,0.04); color:var(--text);}
.nav-btn.active{background:var(--navy-panel-2); color:var(--beam); box-shadow:inset 3px 0 0 var(--beam);}
.nav-btn.logout{margin-top:auto; color:var(--text-dim);}

.main{padding:28px 34px 60px 34px; max-width:1180px;}
.page-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:22px; flex-wrap:wrap; gap:12px;}
.page-head h2{font-size:26px; margin:0; color:var(--text);}
.page-head p{margin:4px 0 0 0; color:var(--text-dim); font-size:13.5px; font-family:'Inter';}

.btn{
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.03em;
  font-size:12.5px; padding:10px 18px; border-radius:7px;
  border:1px solid var(--line); background:var(--navy-panel); color:var(--text);
  cursor:pointer; text-decoration:none; display:inline-block;
}
.btn:hover{border-color:var(--beam); color:var(--beam);}
.btn-primary{background:linear-gradient(180deg, #ffcf6b, var(--beam)); color:#231705; border:none; font-weight:700;}
.btn-primary:hover{color:#231705; filter:brightness(1.06);}
.btn-danger{border-color:var(--danger); color:var(--danger); background:transparent;}
.btn-danger:hover{background:rgba(226,89,63,0.12); color:var(--danger);}
.btn-ghost{background:transparent; border-color:transparent; color:var(--text-dim);}
.btn-ghost:hover{color:var(--text); border-color:var(--line);}
.btn-sm{padding:6px 11px; font-size:11px;}

.grid2{display:grid; grid-template-columns:1.15fr 0.85fr; gap:22px; align-items:start;}
@media (max-width: 980px){ .grid2{grid-template-columns:1fr;} .app{grid-template-columns:1fr;} .sidebar{display:none;} }

.card{
  background:var(--navy-panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; margin-bottom:18px; box-shadow:var(--shadow);
}
.card h3{font-size:13px; margin:0 0 16px 0; color:var(--ice); letter-spacing:0.08em; border-bottom:1px solid var(--line); padding-bottom:10px;}
.field-row{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:14px;}
.field-row.three{grid-template-columns:repeat(3,1fr);}
.field{display:flex; flex-direction:column; gap:6px;}
.field.full{grid-column:1/-1;}
label{font-size:12px; color:var(--text-dim); font-weight:500;}
input[type=text], input[type=number], input[type=date], input[type=email], input[type=tel], input[type=password], select, textarea{
  background:var(--navy-deep); border:1px solid var(--line); color:var(--text);
  padding:9px 10px; border-radius:6px; font-family:'Inter'; font-size:13.5px; outline:none; width:100%;
}
input[type=date]{cursor:pointer;}
input[type=date]::-webkit-calendar-picker-indicator{
  filter: invert(0.8);
  cursor:pointer;
  opacity:0.9;
}
input:focus, select:focus, textarea:focus{border-color:var(--beam); box-shadow:0 0 0 2px rgba(244,185,66,0.18);}
textarea{resize:vertical; min-height:60px;}
.checkline{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text);}
.checkline input{width:16px; height:16px; accent-color:var(--beam);}
.subgrid{padding-left:22px; border-left:2px solid var(--line); margin:8px 0 4px 4px; display:flex; flex-direction:column; gap:9px;}
details.advanced{margin-top:6px;}
details.advanced summary{cursor:pointer; color:var(--text-dim); font-size:12.5px; letter-spacing:0.03em; padding:6px 0;}
details.advanced summary:hover{color:var(--beam);}

.results{position:sticky; top:24px;}
.line{display:flex; justify-content:space-between; font-size:13.5px; padding:7px 0; border-bottom:1px dashed var(--line); color:var(--text);}
.line.dim{color:var(--text-dim);}
.line .amt{font-variant-numeric:tabular-nums;}
.unit-block{margin-top:10px; padding-top:8px; border-top:1px solid var(--line);}
.unit-block h4{font-family:'Inter'; font-size:12px; color:var(--beam); text-transform:none; letter-spacing:0; margin:0 0 4px 0; font-weight:600;}
.grand{margin-top:16px; padding-top:16px; border-top:2px solid var(--beam); display:flex; justify-content:space-between; align-items:baseline;}
.grand .label{font-family:'Oswald'; text-transform:uppercase; font-size:13px; color:var(--text-dim); letter-spacing:0.05em;}
.grand .amt{font-family:'Oswald'; font-size:34px; color:var(--beam); font-weight:700;}
.warn{background:rgba(226,89,63,0.12); border:1px solid var(--danger); color:#ffbfae; padding:10px 12px; border-radius:7px; font-size:12.5px; margin-bottom:12px;}
.flash{background:rgba(95,174,130,0.14); border:1px solid var(--good); color:var(--good); padding:10px 14px; border-radius:7px; font-size:13px; margin-bottom:18px;}
.actions-row{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap;}

table{width:100%; border-collapse:collapse; font-size:13px;}
th{text-align:left; font-family:'Oswald'; font-weight:500; text-transform:uppercase; font-size:11px; letter-spacing:0.05em; color:var(--text-dim); padding:10px; border-bottom:1px solid var(--line);}
td{padding:11px 10px; border-bottom:1px solid rgba(40,64,92,0.5); vertical-align:middle;}
tr:hover td{background:rgba(255,255,255,0.02);}
.pill{display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-family:'Oswald'; letter-spacing:0.03em; text-transform:uppercase; border:1px solid var(--line);}
.pill.Quoted{color:var(--ice); border-color:var(--ice);}
.pill.Booked{color:var(--beam); border-color:var(--beam);}
.pill.Invoiced{color:#c79bf0; border-color:#c79bf0;}
.pill.Completed{color:var(--good); border-color:var(--good);}
.filters{display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap;}
.filters input, .filters select{min-width:180px; width:auto;}
.empty-state{color:var(--text-dim); text-align:center; padding:50px 10px; font-size:13.5px;}
.row-actions{display:flex; gap:6px; flex-wrap:wrap;}
.row-actions form{display:inline;}

.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px;}
@media (max-width: 900px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
.stat-card{background:var(--navy-panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px;}
.stat-card .num{font-family:'Oswald'; font-size:28px; color:var(--beam); font-weight:700;}
.stat-card .lbl{font-size:12px; color:var(--text-dim); margin-top:4px;}

.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center;}
.login-card{background:var(--navy-panel); border:1px solid var(--line); border-radius:var(--radius); padding:34px 32px; width:100%; max-width:360px; box-shadow:var(--shadow); text-align:center;}
.login-logo-wrap{max-width:260px; margin:0 auto 16px auto;}
.login-card h1{font-size:16px; margin:0 0 20px 0; text-transform:uppercase; color:var(--text-dim); letter-spacing:0.08em;}
.login-card .field{margin-bottom:14px; text-align:left;}
.login-card .btn{width:100%; margin-top:6px;}

.overlay{position:fixed; inset:0; background:rgba(5,10,16,0.72); display:none; align-items:center; justify-content:center; z-index:50; padding:20px;}
.overlay.active{display:flex;}
.modal{background:var(--navy-panel); border:1px solid var(--line); border-radius:var(--radius); max-width:560px; width:100%; padding:22px; box-shadow:var(--shadow);}
.modal h3{margin-top:0;}
.modal textarea{width:100%; height:340px; font-family:'Inter'; font-size:12.5px; line-height:1.5;}
.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--navy-panel-2); border:1px solid var(--beam); color:var(--beam); padding:10px 20px; border-radius:8px; font-size:13px; z-index:60; opacity:0; pointer-events:none; transition:opacity .2s;}
.toast.show{opacity:1;}
::placeholder{color:#5c6f85;}
.settings-note{font-size:12px; color:var(--text-dim); margin-bottom:16px; line-height:1.5;}