/* Haulence design layer for the staff app: tokens, shell (top bar, nav, workspace bar) and the dashboard.
   Loaded after admin.css, so it only overrides what the redesign changes. Brand colours come from the brief. */
:root {
  --lm-primary: #004AAD; --lm-secondary: #007BFF; --lm-accent: #00C2FF; --lm-navy: #0B1739; --lm-orange: #FF8A00;
  --lm-bg: #F6F8FC; --lm-border: #E5EAF2; --lm-text: #0B1739; --lm-muted: #5B6B85; --lm-surface: #fff;
  --lm-link: #004AAD; --lm-ok: #12805C; --lm-warn: #B45F00; --lm-bad: #C23B22;
  --lm-radius: 12px; --lm-shadow: 0 1px 2px rgba(11, 23, 57, .04), 0 4px 14px rgba(11, 23, 57, .05);
  --lm-font-head: Poppins, "Segoe UI", system-ui, -apple-system, sans-serif;
  --lm-font-body: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --blue: var(--lm-primary); --ink: var(--lm-text); --mute: var(--lm-muted); --rule: var(--lm-border); --canvas: var(--lm-bg);
}
body.admin-app { background: var(--lm-bg); font-family: var(--lm-font-body); color: var(--lm-text); }
.num, .lm-num { font-variant-numeric: tabular-nums; }

/* ---- top bar ---- */
.topbar { height: 64px; padding: 0 28px; gap: 28px; border-bottom: 1px solid var(--lm-border); }
.topbar .logo { flex: none; }
.top-right { margin-left: auto; }
.search { max-width: 560px; margin: 0; }
.search input { height: 40px; border-color: var(--lm-border); background: var(--lm-bg); border-radius: 10px; font-size: .95rem; }
.avatar { background: #DCE8FA; color: var(--lm-primary); font-family: var(--lm-font-head); font-size: .85rem; }
.bell-n { background: var(--lm-orange); }

/* ---- primary navigation: left sidebar ---- */
:root { --lm-side: 236px; --lm-top: 64px; }
.topbar { z-index: 60; }
.navtoggle { display: none; }
.mainnav { position: fixed; top: var(--lm-top); left: 0; bottom: 0; width: var(--lm-side); z-index: 50; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px; padding: 14px 10px 20px; overflow-y: auto; background: #fff; border-right: 1px solid var(--lm-border); border-bottom: 0; }
.nav-group { position: static; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; height: 42px; padding: 0 12px; margin: 0; border: 0; border-left: 3px solid transparent; border-radius: 8px; font: 500 .95rem var(--lm-font-head); color: var(--lm-navy); text-align: left; background: transparent; cursor: pointer; }
.nav-item svg { flex: none; color: var(--lm-muted); }
.nav-item .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item:hover { background: var(--lm-bg); color: var(--lm-primary); }
.nav-item:hover svg { color: var(--lm-primary); }
.nav-item.active { background: #E8F0FC; color: var(--lm-primary); border-left-color: var(--lm-primary); font-weight: 600; border-bottom: 0; }
.nav-item.active svg { color: var(--lm-primary); }
.nav-menu { position: static; box-shadow: none; border: 0; padding: 2px 0 6px 38px; min-width: 0; background: transparent; }
.nav-group:has(.nav-sub.active) .nav-menu[hidden] { display: block !important; }
.nav-sub { padding: 8px 10px; border-radius: 8px; font-size: .9rem; }
.navscrim { display: none; }
.orgbar, .app { margin-left: var(--lm-side); }
.orgbar { padding-left: 24px; }
@media (max-width: 1000px) {
  .navtoggle { display: inline-flex; flex: none; }
  .mainnav { transform: translateX(-100%); transition: transform .18s ease; box-shadow: 0 10px 40px rgba(11, 23, 57, .25); }
  body.nav-open .mainnav { transform: none; }
  body.nav-open .navscrim { display: block; position: fixed; inset: var(--lm-top) 0 0 0; background: rgba(11, 23, 57, .35); z-index: 45; }
  .orgbar, .app { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .mainnav { transition: none; } }

/* ---- workspace bar ---- */
.orgbar { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 28px; background: #fff; border-bottom: 1px solid var(--lm-border); font-size: .9rem; color: var(--lm-muted); }
.orgbar .org { display: inline-flex; align-items: center; gap: 8px; color: var(--lm-navy); font: 600 .95rem var(--lm-font-head); }
.orgbar .org svg { color: var(--lm-muted); }
.orgbar .sep { width: 1px; height: 16px; background: var(--lm-border); }
.orgbar .env { margin-left: auto; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: #FFF1DE; color: #9A5200; }
.orgbar .env.prod { background: #E4F6EE; color: var(--lm-ok); }

/* ---- page ---- */
.app { max-width: 1640px; padding: 24px 28px 56px; }
.page-head { align-items: flex-end; margin-bottom: 20px; }
.page-head h1 { font: 700 2.1rem/1.15 var(--lm-font-head); letter-spacing: -.02em; }
.page-head p { font-size: 1rem; color: var(--lm-muted); }
.ph-actions { gap: 10px; }
.sel, .btn-o, .btn-p { height: 42px; border-radius: 10px; font-size: .95rem; }
.sel { border-color: var(--lm-border); }
.btn-o { border-color: var(--lm-border); color: var(--lm-navy); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; }
.btn-o:hover { background: var(--lm-bg); }
.btn-p { background: var(--lm-primary); border-color: var(--lm-primary); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; }
.btn-p:hover { background: #003c8c; }
:focus-visible { outline: 3px solid var(--lm-accent); outline-offset: 2px; }

/* ---- dashboard ---- */
.lmd { display: grid; gap: 16px; }
.lmd-card { background: var(--lm-surface); border: 1px solid var(--lm-border); border-radius: var(--lm-radius); box-shadow: var(--lm-shadow); min-width: 0; }
.lmd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); }
.lmd-kpi { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-left: 1px solid var(--lm-border); text-align: left; background: none; border-top: 0; border-right: 0; border-bottom: 0; font: inherit; color: inherit; min-width: 0; }
.lmd-kpi:first-child { border-left: 0; }
button.lmd-kpi { cursor: pointer; } button.lmd-kpi:hover { background: #FAFBFE; }
.lmd-kpi .ico { flex: none; width: 36px; height: 36px; display: grid; place-items: center; color: var(--lm-primary); align-self: flex-start; }
.lmd-kpi .body { flex: 1; min-width: 0; }
.lmd-kpi .label { font-size: .88rem; color: var(--lm-muted); }
.lmd-kpi .value { font: 700 2rem/1.15 var(--lm-font-head); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lmd-kpi .sub { font-size: .85rem; color: var(--lm-muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lmd-kpi .up { color: var(--lm-ok); font-weight: 600; } .lmd-kpi .down { color: var(--lm-bad); font-weight: 600; }
.lmd-kpi .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lm-secondary); display: inline-block; }
.lmd-kpi svg.spark { flex: none; width: 34%; max-width: 150px; height: 44px; align-self: flex-end; }

.lmd-row { display: grid; gap: 16px; align-items: stretch; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.lmd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; }
.lmd-head h2 { margin: 0; font: 600 1.15rem var(--lm-font-head); letter-spacing: -.01em; color: var(--lm-navy); display: flex; align-items: center; gap: 10px; }
.lmd-head .badge { background: var(--lm-orange); color: #fff; font: 600 .78rem var(--lm-font-body); min-width: 22px; height: 22px; border-radius: 11px; display: inline-grid; place-items: center; padding: 0 7px; }
.lmd-head .live { font-size: .82rem; color: var(--lm-muted); display: inline-flex; align-items: center; gap: 6px; }
.lmd-head .live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lm-ok); }
.lmd-link { background: none; border: 0; padding: 0; font: 600 .88rem var(--lm-font-body); color: var(--lm-link); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.lmd-link:hover { text-decoration: underline; }

.lmd-map { position: relative; z-index: 0; isolation: isolate; height: 340px; border-top: 1px solid var(--lm-border); border-radius: 0 0 var(--lm-radius) var(--lm-radius); overflow: hidden; background: #EAF1FB; }
.lmd-map .leaflet-container { height: 100%; width: 100%; font-family: var(--lm-font-body); }
.lmd-map .legend { position: absolute; z-index: 500; right: 12px; bottom: 12px; display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--lm-border); border-radius: 10px; padding: 8px 12px; font-size: .82rem; box-shadow: var(--lm-shadow); }
.lmd-map .legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.lmd-map .empty { position: absolute; z-index: 500; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; pointer-events: none; }
.lmd-map .empty > div { background: rgba(255,255,255,.94); border: 1px solid var(--lm-border); border-radius: var(--lm-radius); padding: 14px 18px; max-width: 340px; }
.lmd-map .empty b { display: block; font-family: var(--lm-font-head); margin-bottom: 4px; }
.lmd-map .empty span { color: var(--lm-muted); font-size: .9rem; }

.lmd-att { display: flex; flex-direction: column; }
.lmd-att-list { padding: 0 20px; flex: 1; }
.lmd-att-row { display: flex; gap: 14px; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--lm-border); padding: 14px 0; font: inherit; color: inherit; cursor: pointer; }
.lmd-att-row:first-child { border-top: 0; }
.lmd-att-row:hover .t { color: var(--lm-primary); }
.lmd-att-row .ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; }
.lmd-att-row .ic.bad { color: var(--lm-orange); background: #FFF3E4; } .lmd-att-row .ic.warn { color: var(--lm-orange); background: #FFF3E4; } .lmd-att-row .ic.info { color: var(--lm-primary); background: #E8F0FC; }
.lmd-att-row .tx { flex: 1; min-width: 0; } .lmd-att-row .t { font: 600 .98rem var(--lm-font-head); } .lmd-att-row .s { font-size: .86rem; color: var(--lm-muted); }
.lmd-att-row .chev { color: var(--lm-muted); flex: none; }
.lmd-callout { margin: 12px 20px 20px; padding: 12px 16px; border-radius: 10px; background: #FFF3E4; display: flex; gap: 12px; align-items: center; }
.lmd-callout b { display: block; color: #B35A00; font: 600 .95rem var(--lm-font-head); } .lmd-callout span { font-size: .86rem; color: var(--lm-muted); }
.lmd-callout svg { color: var(--lm-orange); flex: none; }
.lmd-clear { padding: 28px 20px; text-align: center; color: var(--lm-muted); }
.lmd-clear svg { color: var(--lm-ok); margin-bottom: 6px; } .lmd-clear b { display: block; color: var(--lm-navy); font-family: var(--lm-font-head); }

.lmd-tabs { display: flex; gap: 6px; padding: 0 20px; border-bottom: 1px solid var(--lm-border); overflow-x: auto; }
.lmd-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 6px; margin-right: 12px; font: 500 .9rem var(--lm-font-body); color: var(--lm-muted); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.lmd-tab .n { background: #EEF2F8; color: var(--lm-muted); border-radius: 999px; padding: 1px 8px; font-size: .78rem; font-weight: 600; }
.lmd-tab.on { color: var(--lm-primary); border-bottom-color: var(--lm-primary); font-weight: 600; } .lmd-tab.on .n { background: #E1ECFB; color: var(--lm-primary); }
.lmd-table-wrap { overflow-x: auto; padding: 0 20px; }
.lmd-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.lmd-table th { text-align: left; font: 600 .72rem var(--lm-font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--lm-muted); padding: 12px 10px; border-bottom: 1px solid var(--lm-border); white-space: nowrap; }
.lmd-table td { padding: 11px 10px; border-bottom: 1px solid #F0F3F9; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lmd-table tbody tr { cursor: pointer; } .lmd-table tbody tr:hover { background: #FAFBFE; }
.lmd-table td.ref { font-weight: 600; color: var(--lm-navy); } .lmd-table .arrow { color: var(--lm-muted); margin: 0 4px; }
.lmd-chip { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: #EEF2F8; color: #3B4A66; }
.lmd-chip.transit { background: #DCEBFE; color: #0B4FB3; } .lmd-chip.pickup { background: #E8E3FB; color: #5232B8; } .lmd-chip.delayed { background: #FFE9CC; color: #A55200; } .lmd-chip.out { background: #DDF3EA; color: #0B6B4B; }
.lmd-foot { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px 16px; font-size: .85rem; color: var(--lm-muted); }
.lmd-pager { display: flex; gap: 8px; } .lmd-pager button { width: 34px; height: 34px; border: 1px solid var(--lm-border); background: #fff; border-radius: 8px; cursor: pointer; color: var(--lm-navy); } .lmd-pager button:disabled { opacity: .4; cursor: default; }
.lmd-empty { padding: 34px 20px; text-align: center; color: var(--lm-muted); } .lmd-empty b { display: block; color: var(--lm-navy); font-family: var(--lm-font-head); margin-bottom: 4px; }

.lmd-rev { padding: 0 20px 18px; }
.lmd-rev .big { font: 700 1.9rem/1.2 var(--lm-font-head); letter-spacing: -.02em; } .lmd-rev .big small { font: 600 .9rem var(--lm-font-body); margin-left: 8px; }
.lmd-rev .up { color: var(--lm-ok); } .lmd-rev .down { color: var(--lm-bad); }
.lmd-rev svg.chart { width: 100%; height: 190px; margin-top: 6px; }
.lmd-rev .lg { display: flex; gap: 16px; font-size: .84rem; color: var(--lm-muted); margin: 4px 0 10px; } .lmd-rev .lg i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.lmd-rev .ln { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--lm-border); font-size: .92rem; } .lmd-rev .ln b { font-variant-numeric: tabular-nums; }
.lmd-skel { height: 96px; border-radius: var(--lm-radius); background: linear-gradient(90deg, #EEF2F8 25%, #F7F9FC 37%, #EEF2F8 63%); background-size: 400% 100%; animation: lmd-shimmer 1.4s ease infinite; }
@keyframes lmd-shimmer { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }
@media (prefers-reduced-motion: reduce) { .lmd-skel { animation: none; } }

@media (max-width: 1280px) { .lmd-kpis { grid-template-columns: 1fr 1fr; } .lmd-kpi:nth-child(3) { border-left: 0; } .lmd-kpi:nth-child(n+3) { border-top: 1px solid var(--lm-border); } .lmd-row { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .topbar { padding: 0 14px; gap: 10px; } .lmd-kpis { grid-template-columns: 1fr; } .lmd-kpi { border-left: 0; border-top: 1px solid var(--lm-border); } .lmd-kpi:first-child { border-top: 0; } .orgbar { padding: 0 14px; } .app { padding: 16px 14px 48px; } .page-head h1 { font-size: 1.6rem; } .lmd-map { height: 260px; } }

.login-logo { margin: 8px 0 18px; text-align: center; }
.login-logo .lm-logo { display: block; position: relative; overflow: hidden; }

/* ---- carrier screens ---- */
.lmd-chip.bad { background: #FBE0DB; color: #A52A14; } .lmd-chip.warn { background: #FFE9CC; color: #A55200; } .lmd-chip.ok { background: #DDF3EA; color: #0B6B4B; }
.fleetform .grid2f { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; } .fleetform .wide { grid-column: 1 / -1; }
.fleetform label, .modal-box label { display: block; font-weight: 600; font-size: .88rem; } .fleetform input, .fleetform select, .fleetform textarea, .modal-box select { display: block; width: 100%; margin-top: 4px; padding: 9px 11px; border: 1px solid #CBD5E6; border-radius: 10px; font: inherit; background: #fff; }
.lmd-card .ph-actions { display: flex; gap: 10px; align-items: center; }
@media (max-width: 640px) { .fleetform .grid2f { grid-template-columns: 1fr; } }

/* ---- notification centre ---- */
#bellmenu { width: 380px; max-width: calc(100vw - 24px); padding: 0; }
.bell-head { padding: 12px 16px; font: 600 .9rem var(--lm-font-head); color: var(--lm-navy); }
.note-row { display: flex !important; align-items: flex-start; gap: 10px; padding: 10px 16px !important; text-align: left; border-top: 1px solid var(--lm-border); }
.note-row.unread { background: #F4F8FF; } .note-row:hover { background: #EAF1FC; }
.note-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; background: var(--lm-secondary); } .note-dot.warn { background: var(--lm-orange); } .note-dot.bad { background: #C23B22; }
.note-row:not(.unread) .note-dot { opacity: .35; }
.note-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; } .note-tx b { font-weight: 600; font-size: .9rem; } .note-row:not(.unread) .note-tx b { font-weight: 500; }
.note-tx small { color: var(--lm-muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-time { flex: none; color: var(--lm-muted); font-size: .75rem; margin-top: 3px; } .note-empty { padding: 18px 16px; color: var(--lm-muted); font-size: .9rem; }

/* white on brand orange is only 2.4:1; orange status badges use dark ink (AA) in both themes */
.bell-n, .lmd-head .badge { color: #1B1200; }

/* dashboard: money / inbox and phone / sales cards */
.lmd-row3 { display: grid; gap: 16px; align-items: stretch; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1280px) { .lmd-row3 { grid-template-columns: 1fr; } }
.lmd-more { padding: 4px 20px 16px; }
.lmd-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 4px 20px 18px; }
.lmd-stat { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 12px 14px; border: 1px solid var(--lm-border); border-radius: 10px; background: var(--lm-surface); color: var(--lm-text); font: inherit; }
button.lmd-stat { cursor: pointer; } button.lmd-stat:hover { background: var(--lm-bg); }
.lmd-stat b { font: 600 1.25rem var(--lm-font-head); font-variant-numeric: tabular-nums; }
.lmd-stat span { font-size: .84rem; color: var(--lm-muted); }
.lmd-stat.warn { border-color: #F2C27A; } .lmd-stat.bad { border-color: #E9A397; } .lmd-stat.bad b { color: var(--lm-bad); }
.lmd-sub { padding: 0 20px 18px; } .lmd-sub h3 { margin: 4px 0 8px; font: 600 .92rem var(--lm-font-head); }
.lmd-sub .ln { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--lm-border); font-size: .9rem; } .lmd-sub .ln span { min-width: 0; overflow-wrap: anywhere; }
/* ALIGNED CARDS: cards in a row share the same top and bottom, and their content grows to fill the card (tiles, the map, the chart), so nothing is left empty */
.lmd-row3 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.lmd-row > .lmd-card, .lmd-row3 > .lmd-card { display: flex; flex-direction: column; align-self: stretch; }
.lmd-row > .lmd-card > *, .lmd-row3 > .lmd-card > * { flex: none; }
.lmd-stats { flex: 1 1 auto !important; grid-auto-rows: 1fr; align-content: stretch; }
.lmd-stat { justify-content: center; }
.lmd-sub { flex: none; }
.lmd-map { flex: 1 1 auto !important; min-height: 340px; height: auto; }
.lmd-att-list { flex: 1 1 auto !important; display: flex; flex-direction: column; justify-content: space-evenly; }
.lmd-rev { flex: 1 1 auto !important; display: flex; flex-direction: column; justify-content: space-between; }
.lmd-table-wrap { flex: 1 1 auto !important; }
.lmd-foot { margin-top: auto; }
.lmd-callout { margin-top: auto; }

/* Settings sits at the very bottom of the sidebar, apart from the work items */
.mainnav .nav-settings { margin-top: auto; flex: none; }

/* the working area uses the whole width next to the sidebar (it was capped at 1640px, leaving an empty strip on wide screens) */
.app { max-width: none; margin-right: 0; padding-bottom: 28px; }
.itiles { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.itile-logo { height: 96px; }

/* a more compact sidebar: tighter rows, and on desktop it is only as tall as its items (Settings closes it, under a divider) instead of running the full height of the screen */
.nav-item { height: 36px; padding: 0 10px; gap: 10px; font-size: .92rem; }
.mainnav { gap: 1px; }
.mainnav .nav-settings { position: relative; margin-top: 12px; flex: none; }
.mainnav .nav-settings::before { content: ""; position: absolute; top: -7px; left: 6px; right: 6px; height: 1px; background: var(--lm-border); }
@media (min-width: 1001px) {
  .mainnav { bottom: auto; max-height: calc(100vh - var(--lm-top)); padding: 10px 8px 12px; border-bottom: 1px solid var(--lm-border); border-radius: 0 0 14px 0; }
}

/* the sidebar runs the full height of the screen again (undoes the "only as tall as its items" experiment); Settings is pinned at the bottom of it */
@media (min-width: 1001px) {
  .mainnav { bottom: 0; max-height: none; padding: 12px 8px 16px; border-bottom: 0; border-radius: 0; }
}
.mainnav .nav-settings { margin-top: auto; }
.mainnav .nav-settings::before { top: -9px; }

/* white label: the organization's logo (or its name), never the product's */
.brand-wordmark { display: block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 1.25rem var(--lm-font-head); letter-spacing: -.01em; color: var(--lm-text); }
.brand-wordmark.big { max-width: 100%; text-align: center; font-size: 2rem; white-space: normal; margin: 0 auto; }
.brand-logo-wrap { display: block; } .brand-logo { display: block; max-height: 38px; max-width: 220px; width: auto; height: auto; }
.brand-logo-wrap.big .brand-logo { max-height: 84px; max-width: 320px; margin: 0 auto; }
.brand-logo.dk { display: none; } :root[data-theme="dark"] .brand-logo.lt { display: none; } :root[data-theme="dark"] .brand-logo.dk { display: block; }
:root[data-theme="dark"] .brand-logo-wrap.plate-in-dark .brand-logo { background: #fff; padding: 4px 8px; border-radius: 6px; }
.login-logo:empty { display: none; } .logo:empty { display: none; }

/* Settings > Branding */
.brand-preview { border: 1px solid var(--lm-border); border-radius: 10px; overflow: hidden; margin: 6px 0 12px; max-width: 520px; }
.brand-preview .bp-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--lm-surface); border-bottom: 1px solid var(--lm-border); }
.brand-preview .bp-btn, .brand-preview .bp-chip { color: #fff; border-radius: 8px; padding: 6px 12px; font-weight: 600; font-size: .85rem; display: inline-block; }
.brand-preview .bp-body { padding: 14px; background: var(--lm-bg); }
.bp-light { display: inline-block; padding: 10px 14px; border: 1px solid var(--lm-border); border-radius: 8px; background: #fff; margin: 4px 0 8px; }
.bp-dark { display: inline-block; padding: 10px 14px; border-radius: 8px; background: #141B2B; margin: 4px 0 8px; }

.admin-login-body .site-header:has(.logo:empty) { display: none; }
.admin-login-body .site-header { display: none; } /* the brand is shown once, above the form */
@media (min-width: 1001px) { .topbar .logo { width: calc(var(--lm-side) - 28px); } .topbar .search { margin-left: 0; } }