:root { --ink:#07141d; --panel:#0d202b; --lime:#d8ff4f; --paper:#eef1ed; --white:#fff; --muted:#6d787e; --line:#dde2de; --red:#ff765f; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:14px/1.45 Inter,"Helvetica Neue",Arial,sans-serif; }
button,input,select,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.login-screen { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 70% 15%,rgba(77,224,195,.14),transparent 30%),var(--ink); }
.login-card { width:min(100%,430px); padding:45px; border:1px solid rgba(255,255,255,.13); border-radius:24px; color:white; background:rgba(255,255,255,.06); box-shadow:0 30px 100px rgba(0,0,0,.35); }
.admin-brand { display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:-.04em; }
.admin-brand small { display:block; color:var(--lime); font-size:8px; letter-spacing:.19em; }
.admin-mark { width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--lime);color:var(--ink);font-family:Georgia;font-size:22px; }
.login-card>p { margin:40px 0 25px;color:rgba(255,255,255,.48); }
.login-card label { display:grid;gap:8px;color:rgba(255,255,255,.6);font-size:11px; }
.login-card input { min-height:54px;padding:0 15px;border:1px solid rgba(255,255,255,.2);border-radius:10px;color:white;background:rgba(255,255,255,.08);outline:0; }
.demo-hint { display:block;margin-top:10px;color:rgba(255,255,255,.48);font-size:10px; }.demo-hint b { color:var(--lime); }
.login-card button,.dispatch-form button { width:100%;min-height:52px;margin-top:15px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border:0;border-radius:10px;background:var(--lime);color:var(--ink);font-weight:850;cursor:pointer; }
.login-card>a { display:inline-block;margin-top:35px;color:rgba(255,255,255,.45);text-decoration:none;font-size:12px; }
.login-status { min-height:20px!important;margin:10px 0!important;color:#ff9b89!important;font-size:12px; }
.crm { min-height:100vh;display:grid;grid-template-columns:250px 1fr; }
.sidebar { position:sticky;top:0;height:100vh;padding:28px 20px;display:flex;flex-direction:column;background:var(--ink);color:white; }
.sidebar .admin-brand { padding:0 10px 35px;border-bottom:1px solid rgba(255,255,255,.1); }
.sidebar nav { display:grid;gap:5px;margin-top:30px; }
.nav-item { width:100%;min-height:45px;padding:0 13px;display:grid;grid-template-columns:22px 1fr auto;align-items:center;border:0;border-radius:9px;color:rgba(255,255,255,.55);background:transparent;text-align:left;cursor:pointer; }
.nav-item:hover,.nav-item.active { color:white;background:rgba(255,255,255,.08); }
.nav-item.active span { color:var(--lime); }
.nav-item b { min-width:25px;padding:3px 7px;border-radius:20px;background:rgba(255,255,255,.08);font-size:10px;text-align:center; }
.sidebar-bottom { margin-top:auto;display:grid;gap:10px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1); }
.sidebar-bottom a,.sidebar-bottom button { padding:8px 10px;border:0;color:rgba(255,255,255,.48);background:transparent;text-align:left;text-decoration:none;cursor:pointer;font-size:11px; }
.workspace { min-width:0;padding:35px clamp(24px,4vw,60px) 70px; }
.crm-header { display:flex;align-items:end;justify-content:space-between;margin-bottom:35px; }
.overline { margin:0 0 5px;color:#5d7169;font-size:9px;letter-spacing:.18em;font-weight:850; }
.crm-header h1 { margin:0;font-size:44px;letter-spacing:-.06em; }
.header-date { display:grid;text-align:right;color:var(--muted);font-size:11px; }
.header-date b { color:var(--ink);font-size:13px; }
.metrics { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px; }
.metrics article { min-height:135px;padding:20px;display:grid;border:1px solid var(--line);border-radius:15px;background:white; }
.metrics article>span { color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:800; }
.metrics strong { align-self:end;font-size:38px;line-height:1;letter-spacing:-.05em; }
.metrics small { color:var(--muted);font-size:10px; }
.metrics .metric-accent { background:var(--lime);border-color:var(--ink); }
.order-board { min-height:500px;border:1px solid var(--line);border-radius:17px;background:white;overflow:hidden; }
.board-toolbar { padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line); }
.board-toolbar h2 { margin:0;font-size:18px; }
.board-toolbar>div>span { color:var(--muted);font-size:10px; }
.toolbar-actions { display:flex;gap:8px;align-items:center; }
.search { width:min(30vw,300px);height:38px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:#f8faf7; }
.search input { min-width:0;width:100%;border:0;outline:0;background:transparent;font-size:12px; }
.export-button,.refresh-button { height:38px;padding:0 13px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:white;color:var(--ink);text-decoration:none;font-size:11px;cursor:pointer; }
.table-scroll { overflow:auto; }
table { width:100%;border-collapse:collapse; }
th { padding:12px 16px;color:#87918d;background:#f7f9f6;text-align:left;text-transform:uppercase;letter-spacing:.08em;font-size:8px;white-space:nowrap; }
td { padding:15px 16px;border-top:1px solid #edf0ed;vertical-align:middle;font-size:11px; }
tbody tr { cursor:pointer;transition:background .15s; }
tbody tr:hover { background:#f8faf6; }
.reference { display:grid;gap:6px;white-space:nowrap; }
.reference strong { font-size:10px;letter-spacing:.04em; }
.status { width:max-content;padding:4px 8px;border-radius:20px;font-size:8px;text-transform:uppercase;letter-spacing:.08em;font-weight:850; }
.status-new { color:#84412f;background:#ffe2d7; }.status-confirmed { color:#345e54;background:#d9f4ea; }.status-assigned { color:#485a13;background:#edffc2; }.status-enroute { color:#234e78;background:#d9ecff; }.status-completed { color:#56605c;background:#e8ece9; }.status-cancelled { color:#8a3232;background:#ffe0e0; }
.customer { display:grid; }.customer small,.ride small,.route small,.assignment small { color:var(--muted); }
.ride,.route,.assignment { display:grid;gap:2px;min-width:120px; }.route { max-width:270px; }.route span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.arrow-button { width:31px;height:31px;border:1px solid var(--line);border-radius:50%;background:white;cursor:pointer; }
.empty-state { padding:80px;text-align:center;color:var(--muted); }.empty-state span { font-size:35px; }.empty-state h3 { color:var(--ink); }
dialog { width:min(94vw,1160px);max-height:90vh;padding:0;border:0;border-radius:21px;box-shadow:0 40px 120px rgba(0,0,0,.4);overflow:auto; }
dialog::backdrop { background:rgba(5,15,22,.75);backdrop-filter:blur(6px); }
.dialog-top { position:sticky;top:0;z-index:2;padding:22px 27px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);background:white; }
.dialog-top span { color:#73817b;font-size:9px;letter-spacing:.12em; }.dialog-top h2 { margin:3px 0 0;font-size:24px;letter-spacing:-.04em; }.dialog-top button { width:38px;height:38px;border:0;border-radius:50%;background:#edf0ed;font-size:23px;cursor:pointer; }
.dialog-grid { display:grid;grid-template-columns:1.4fr .6fr; }
.dialog-main { padding:32px; }.detail-block>span { color:#8b9590;font-size:9px;letter-spacing:.15em;font-weight:850; }
.route-detail { display:grid;grid-template-columns:33px 1fr;gap:12px;align-items:center;margin-top:20px; }.route-detail i { width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--lime);font-style:normal;font-size:10px; }.route-detail p { display:grid;margin:0; }.route-detail small,.detail-columns small,.notes-block small { color:#8b9590;font-size:9px;text-transform:uppercase;letter-spacing:.08em; }.route-line { width:1px;height:25px;margin:2px 0 -17px 15px;background:#a9b3ae; }
.detail-columns { display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px;padding:25px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); }.detail-columns>div { display:grid;gap:5px; }.detail-columns strong { font-size:12px; }
.notes-block { margin-top:25px; }.notes-block p { min-height:45px;color:#53605b;white-space:pre-wrap; }
.contact-row { display:flex;gap:9px;flex-wrap:wrap;margin-top:25px; }.contact-row a { padding:9px 12px;border:1px solid var(--line);border-radius:8px;color:var(--ink);text-decoration:none;font-size:10px; }.contact-row .detail-whatsapp { border-color:#42b87d;color:#187b4c; }
.dispatch-form { padding:32px;background:#f3f5f2;border-left:1px solid var(--line); }.dispatch-form h3 { margin:0 0 25px;font-size:18px; }.dispatch-form label { display:grid;gap:7px;margin:15px 0;color:#69756f;font-size:10px;font-weight:750; }.dispatch-form input,.dispatch-form select,.dispatch-form textarea { width:100%;min-height:44px;padding:10px 12px;border:1px solid #d7ddd8;border-radius:8px;background:white;outline:0; }.dispatch-form textarea { resize:vertical; }.dispatch-form input:focus,.dispatch-form select:focus,.dispatch-form textarea:focus { border-color:#4b8376;box-shadow:0 0 0 3px rgba(75,131,118,.12); }.save-status { min-height:20px;color:#39765f;font-size:10px;text-align:center; }
@media(max-width:900px){.crm{grid-template-columns:1fr}.sidebar{position:static;height:auto;padding:16px}.sidebar nav{display:flex;overflow:auto;margin-top:15px}.nav-item{min-width:max-content;grid-template-columns:20px 1fr auto}.sidebar-bottom{display:none}.metrics{grid-template-columns:1fr 1fr}.dialog-grid{grid-template-columns:1fr}.dispatch-form{border-left:0;border-top:1px solid var(--line)}}
@media(max-width:620px){.workspace{padding:24px 12px 60px}.crm-header{align-items:start}.header-date{display:none}.metrics{grid-template-columns:1fr 1fr}.metrics article{min-height:115px}.board-toolbar{align-items:flex-start;flex-direction:column}.toolbar-actions{width:100%}.search{width:100%}.table-scroll{overflow-x:auto}table{min-width:800px}.dialog-main,.dispatch-form{padding:22px}.detail-columns{grid-template-columns:1fr 1fr}.login-card{padding:32px 24px}}