/* GrainLine ERP — warm-industrial theme. Tokens from the design handoff. */
:root {
  --bg:#F6F1E6; --surface:#FFFFFF; --surface-2:#FBF7EE; --border:#E4D8C0;
  --text:#2A241D; --text-2:#7C7060;
  --sidebar:#211D17; --sidebar-text:#B9AD96; --sidebar-active-bg:#332A1C;
  --accent:#C1852E; --accent-dark:#9C6A22; --accent-light:#F1DDB0; --accent-wash:#FBF0DC;
  --success:#4F7A48; --success-wash:#E7F0E3;
  --danger:#B24A38; --danger-wash:#F6E4DF;
  --shadow-pop:0 10px 30px rgba(30,20,10,0.14);
  --shadow-toast:0 10px 30px rgba(0,0,0,0.25);
  --serif:'Zilla Slab',serif; --sans:'Work Sans',sans-serif;
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; height:100%; }
body { font-family:var(--sans); color:var(--text); background:var(--bg); font-size:14px; }
input, select, textarea, button { font-family:var(--sans); }
::placeholder { color:#A69A86; }
a { color:inherit; }
@keyframes spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* ---- utility ---- */
.serif { font-family:var(--serif); }
.muted { color:var(--text-2); }
.hidden { display:none !important; }
.row { display:flex; align-items:center; }
.spread { display:flex; align-items:center; justify-content:space-between; }
.gap8{gap:8px} .gap10{gap:10px} .gap12{gap:12px} .gap14{gap:14px}
.wrap { flex-wrap:wrap; }

/* ================= AUTH ================= */
.auth { display:flex; min-height:100vh; }
.auth-brand {
  flex:0 0 42%; min-height:100vh; background:var(--sidebar); position:relative;
  display:flex; flex-direction:column; justify-content:space-between; padding:56px; overflow:hidden;
}
.auth-brand-lines {
  position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(115deg, rgba(193,133,46,0.08) 0px, rgba(193,133,46,0.08) 2px, transparent 2px, transparent 34px);
}
.auth-logo { position:relative; display:flex; align-items:center; gap:12px; }
.auth-logo .mark { width:40px; height:40px; border-radius:10px; background:var(--accent);
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; color:#221A0E; font-size:18px; }
.auth-logo .word { font-family:var(--serif); font-weight:600; font-size:22px; color:#F3EAD8; letter-spacing:.2px; }
.auth-tag { position:relative; max-width:440px; }
.auth-tag h1 { font-family:var(--serif); font-weight:600; font-size:34px; line-height:1.25; color:#F3EAD8; margin:0; }
.auth-tag p { margin:16px 0 0; font-size:15px; line-height:1.6; color:var(--sidebar-text); }
.auth-foot { position:relative; font-size:13px; color:#7A6E58; }
.auth-panel { flex:1; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px; background:var(--bg); }
.auth-card { width:100%; max-width:420px; }
.auth-card h2 { font-family:var(--serif); font-weight:600; font-size:26px; margin:0 0 4px; }
.auth-card .sub { font-size:14px; color:var(--text-2); margin-bottom:28px; }
.auth-tabs { display:flex; gap:4px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:4px; margin-bottom:22px; }
.auth-tabs button { flex:1; border:none; background:transparent; color:var(--text-2); font-weight:600; font-size:13px; padding:9px 6px; border-radius:7px; cursor:pointer; }
.auth-tabs button.active { background:var(--surface); color:var(--text); }
.field { margin-bottom:14px; }
.field label { display:block; font-size:12px; font-weight:600; color:var(--text-2); margin-bottom:6px; }
.input { width:100%; padding:11px 13px; border:1px solid var(--border); border-radius:9px; font-size:14px; background:var(--surface); outline:none; color:var(--text); }
.input:focus { border-color:var(--accent); }
.hint { font-size:12px; color:var(--text-2); }
.hint strong { color:var(--text); }
.divider { display:flex; align-items:center; gap:12px; margin:22px 0; }
.divider .line { flex:1; height:1px; background:var(--border); }
.divider span { font-size:12px; color:var(--text-2); }
.oauth { display:flex; gap:10px; }
.oauth button { flex:1; padding:10px; border:1px solid var(--border); border-radius:9px; background:var(--surface); font-weight:600; font-size:13px; cursor:pointer; color:var(--text); }
.oauth button:disabled { background:var(--surface-2); color:var(--text-2); cursor:not-allowed; }
.otp-input { width:100%; letter-spacing:10px; text-align:center; font-size:22px; font-weight:600; padding:14px; border:1px solid var(--border); border-radius:9px; background:var(--surface); outline:none; margin-bottom:10px; }
.alert { border-radius:10px; padding:16px; margin-bottom:18px; }
.alert-danger { background:var(--danger-wash); border:1px solid #E0BBAE; }
.alert-danger .t { font-weight:600; color:var(--danger); font-size:14px; }
.alert-success { background:var(--success-wash); border:1px solid #C7DAC2; }
.alert-success .t { font-weight:600; color:var(--success); font-size:14px; }
.alert .d { font-size:13px; color:var(--text-2); margin-top:6px; line-height:1.5; }
.form-error { font-size:13px; color:var(--danger); background:var(--danger-wash); border-radius:8px; padding:10px 12px; margin-bottom:14px; }
.link { color:var(--accent-dark); font-weight:600; text-decoration:none; font-size:13px; cursor:pointer; }
.link-muted { color:var(--text-2); text-decoration:none; font-size:13px; cursor:pointer; }

/* ================= BUTTONS ================= */
.btn { border:1px solid var(--border); background:var(--surface); font-weight:600; font-size:13px; padding:9px 14px; border-radius:9px; cursor:pointer; color:var(--text); }
.btn-primary { border:none; background:var(--accent); color:#221A0E; font-weight:700; }
.btn-danger { border:1px solid var(--danger); background:var(--danger-wash); color:var(--danger); font-weight:600; }
.btn-full { width:100%; padding:12px; border:none; border-radius:9px; background:var(--accent); color:#221A0E; font-weight:700; font-size:14px; cursor:pointer; }
.btn:disabled, .btn-full:disabled { opacity:.6; cursor:not-allowed; }

/* ================= APP SHELL ================= */
.app { width:100%; height:100vh; display:flex; overflow:hidden; position:relative; }
.sidebar { flex:0 0 200px; height:100vh; background:var(--sidebar); display:flex; flex-direction:column; padding:10px 8px; overflow:hidden; }
.sidebar-brand { display:flex; align-items:center; gap:8px; padding:2px 4px 8px; }
.sidebar-brand .mark { width:24px; height:24px; border-radius:7px; background:var(--accent); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; color:#221A0E; font-size:12px; flex:0 0 24px; }
.sidebar-brand .word { font-family:var(--serif); font-weight:600; font-size:14px; color:#F3EAD8; }
.nav { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; }
.nav-item { display:flex; align-items:center; gap:8px; width:100%; border:none; text-align:left; cursor:pointer; padding:6px 7px; border-radius:6px; flex:0 0 auto; background:transparent; }
.nav-item.active { background:var(--sidebar-active-bg); box-shadow:inset 3px 0 0 var(--accent); }
.nav-item .ico { width:18px; height:18px; border-radius:5px; background:#3A3324; color:var(--sidebar-text); display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:700; flex:0 0 18px; }
.nav-item.active .ico { background:var(--accent); color:#221A0E; }
.nav-item .lbl { font-size:13px; font-weight:600; color:var(--sidebar-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-item.active .lbl { color:#F3EAD8; }
.sidebar-foot { padding:6px 6px 0; border-top:1px solid #35301F; font-size:9px; color:#7A6E58; flex:0 0 auto; }

.main { flex:1; height:100vh; display:flex; flex-direction:column; min-width:0; }
.topbar { flex:0 0 64px; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 24px; position:relative; min-width:0; }
.topbar-title { font-family:var(--serif); font-weight:600; font-size:19px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-right { display:flex; align-items:center; gap:10px; flex:0 0 auto; white-space:nowrap; }
.hamburger { flex:0 0 auto; width:38px; height:38px; border-radius:9px; border:1px solid var(--border); background:var(--surface-2); cursor:pointer; display:none; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.hamburger div { width:16px; height:2px; background:var(--text); }
.pill { border:1px solid var(--border); background:var(--surface-2); border-radius:9px; padding:8px 12px; font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; display:flex; align-items:center; gap:8px; cursor:pointer; }
.pill.static { color:var(--text-2); cursor:default; }
.pill.company { border-color:var(--sidebar); background:var(--sidebar); color:#F3EAD8; }
.pill.role { border-color:var(--accent); background:var(--accent-wash); color:var(--accent-dark); }
.pill .caret { font-size:10px; }
.icon-btn { position:relative; width:38px; height:38px; border-radius:9px; border:1px solid var(--border); background:var(--surface-2); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.bell { width:14px; height:14px; border:2px solid var(--text-2); border-radius:3px 3px 8px 8px; }
.bell-dot { position:absolute; top:7px; right:7px; width:8px; height:8px; border-radius:50%; background:var(--danger); }
.avatar { width:34px; height:34px; border-radius:50%; background:var(--accent); color:#221A0E; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; flex:0 0 34px; }
.user-btn { display:flex; align-items:center; gap:9px; border:none; background:none; cursor:pointer; padding:4px 6px 4px 4px; border-radius:9px; white-space:nowrap; }
.user-btn .nm { font-size:13px; font-weight:600; }
.user-btn .rl { font-size:11px; color:var(--text-2); }
.popover { position:absolute; right:0; top:44px; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-pop); z-index:40; padding:6px; }
.popover.user { top:52px; width:220px; }
.popover button { display:block; width:100%; text-align:left; border:none; background:none; padding:9px 10px; border-radius:7px; font-size:13px; cursor:pointer; color:var(--text); }
.popover button:hover { background:var(--surface-2); }
.popover .sep { height:1px; background:var(--border); margin:4px 6px; }
.popover .head { font-size:12px; font-weight:700; color:var(--text-2); padding:6px 8px; }
.popover .notif { padding:9px 8px; border-radius:7px; }
.popover .notif .nt { font-size:13px; font-weight:600; }
.popover .notif .ns { font-size:12px; color:var(--text-2); margin-top:2px; }

.content { flex:1; overflow:auto; padding:26px 28px; background:var(--bg); }
.scrim { position:fixed; inset:0; background:rgba(20,15,8,0.45); z-index:90; }

/* ================= CARDS / GENERIC ================= */
.card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px; }
.card-title { font-weight:700; font-size:14.5px; margin-bottom:12px; }
.grid-kpi { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:18px; }
.kpi { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px 18px; }
.kpi .k-label { font-size:12.5px; color:var(--text-2); font-weight:600; }
.kpi .k-value { font-family:var(--serif); font-size:24px; font-weight:600; margin-top:8px; }
.kpi .k-sub { font-size:12px; margin-top:6px; }
.c-success{color:var(--success)} .c-danger{color:var(--danger)} .c-muted{color:var(--text-2)} .c-accent{color:var(--accent-dark)}
.bar-track { height:6px; background:var(--surface-2); border-radius:4px; overflow:hidden; }
.bar-fill { height:100%; background:var(--accent); }

/* toolbar */
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.toolbar .left { display:flex; gap:8px; flex-wrap:wrap; }
.select { padding:9px 10px; border:1px solid var(--border); border-radius:9px; font-size:13px; background:var(--surface); color:var(--text); }
.search { width:230px; padding:9px 13px; border:1px solid var(--border); border-radius:9px; font-size:13px; background:var(--surface); }
.seg { display:flex; gap:4px; background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:4px; }
.seg button { border:none; background:transparent; color:var(--text-2); font-weight:600; font-size:12.5px; padding:7px 12px; border-radius:6px; cursor:pointer; }
.seg button.active { background:var(--surface); color:var(--text); }

/* tables (css-grid rows) */
.table { background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.thead, .trow { display:grid; gap:8px; align-items:center; }
.thead { padding:11px 18px; background:var(--surface-2); font-size:11.5px; font-weight:700; color:var(--text-2); }
.trow { padding:12px 18px; border-top:1px solid var(--surface-2); font-size:13px; cursor:pointer; }
.trow:hover { background:var(--surface-2); }
.cell-strong { font-size:13.5px; font-weight:600; }
.cell-sub { font-size:12px; color:var(--text-2); }
.view-link { font-size:12px; color:var(--accent-dark); font-weight:700; }
.tag { font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; display:inline-block; }
.mono { font-family:ui-monospace, monospace; }
.empty { padding:16px; font-size:13px; color:var(--text-2); text-align:center; }

/* status dot */
.dot { width:7px; height:7px; border-radius:50%; background:var(--danger); display:inline-block; }

/* ================= MODALS ================= */
.modal-scrim { position:fixed; inset:0; background:rgba(30,20,10,0.35); display:flex; align-items:center; justify-content:center; z-index:100; }
.modal { max-height:88vh; overflow:auto; background:var(--surface); border-radius:14px; padding:28px; }
.modal h3 { font-family:var(--serif); font-weight:600; font-size:20px; margin:0 0 18px; }
.modal-title-lg { font-family:var(--serif); font-weight:600; font-size:21px; }
.section-label { font-size:12px; font-weight:700; color:var(--text-2); margin-bottom:10px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; }
.form-grid.g3 { grid-template-columns:1fr 1fr 1fr; }
.col-span { grid-column:1 / -1; }
.f-label { display:block; font-size:11.5px; font-weight:600; color:var(--text-2); margin-bottom:5px; }
.f-input { width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:8px; font-size:13px; background:var(--surface); color:var(--text); }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; }
.modal-foot { display:flex; justify-content:space-between; margin-top:22px; padding-top:16px; border-top:1px solid var(--surface-2); }

/* tabs inside modal */
.tabs { display:flex; gap:4px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:4px; margin-bottom:18px; width:fit-content; }
.tabs button { border:none; background:transparent; color:var(--text-2); font-weight:600; font-size:12.5px; padding:8px 14px; border-radius:7px; cursor:pointer; }
.tabs button.active { background:var(--surface); color:var(--text); }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.info-box { background:var(--surface-2); border-radius:10px; padding:14px; }
.info-box .h { font-size:11.5px; font-weight:700; color:var(--text-2); margin-bottom:8px; }
.info-box .l { font-size:13px; margin-bottom:4px; }

/* toast */
.toast { position:fixed; bottom:26px; right:26px; background:var(--sidebar); color:#F3EAD8; font-size:13.5px; font-weight:600; padding:13px 20px; border-radius:10px; z-index:200; box-shadow:var(--shadow-toast); }

/* dashboard specific layouts */
.dash-2 { display:grid; grid-template-columns:1.3fr 1fr; gap:14px; margin-bottom:14px; }
.dash-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.dash-stack { display:flex; flex-direction:column; gap:14px; }
.perf-head, .perf-row { display:grid; grid-template-columns:1.6fr 1fr 0.8fr 0.8fr 1fr; gap:6px; align-items:center; }
.perf-head { font-size:11.5px; color:var(--text-2); font-weight:700; padding-bottom:8px; border-bottom:1px solid var(--border); }
.perf-row { font-size:13px; padding:10px 0; border-bottom:1px solid var(--surface-2); }
.list-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--surface-2); }
.growth { display:flex; align-items:flex-end; gap:8px; height:110px; }
.growth .b { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
.growth .b .bar { width:100%; background:var(--accent-light); border-radius:5px 5px 0 0; }
.map-ph { background:repeating-linear-gradient(135deg, var(--surface-2) 0px, var(--surface-2) 10px, var(--surface) 10px, var(--surface) 20px); border:1px solid var(--border); border-radius:12px; padding:18px; display:flex; align-items:center; justify-content:center; text-align:center; }
.ai-card { background:var(--accent-wash); border:1px solid var(--accent-light); border-radius:12px; padding:18px; }

/* leads board */
.board { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; }
.board-col { flex:0 0 250px; background:var(--surface-2); border-radius:12px; padding:12px; }
.board-col-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; padding:0 4px; }
.board-col-head .ct { font-size:11.5px; font-weight:700; color:var(--text-2); background:var(--surface); padding:2px 8px; border-radius:10px; }
.board-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px; margin-bottom:10px; cursor:pointer; }

/* misc */
.spinner { width:22px; height:22px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite; }
.loading { display:flex; align-items:center; justify-content:center; padding:60px; }

/* ================= RESPONSIVE ================= */
@media (max-width:860px) {
  .sidebar { position:fixed; top:0; left:0; z-index:100; flex-basis:220px; transform:translateX(-100%); transition:transform .25s ease; }
  .app.drawer-open .sidebar { transform:translateX(0); box-shadow:10px 0 30px rgba(0,0,0,0.3); }
  .hamburger { display:flex; }
  .topbar-desktop-only { display:none !important; }
  .content { padding:16px; }
  .auth-brand { display:none; }
  .dash-2, .dash-3 { grid-template-columns:1fr; }
  .info-grid, .form-grid, .form-grid.g3 { grid-template-columns:1fr; }
  .modal { width:94vw !important; }
}