/* Brandy app · theme overrides for Light and Dark.
   `:root` already has the light tokens (from colors_and_type.css).
   Here we (1) tighten some values for app chrome, (2) define a Dark
   theme via [data-theme="dark"] that re-points the same semantic vars,
   and (3) provide table/utility classes used by the pages. */

.brandy-app {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Reset link styling inside the app — links underline only on hover. */
.brandy-app a { border-bottom: 0; }
.brandy-app a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ----- Light theme tweaks (the default :root values are already light) ----- */
.brandy-app[data-theme="light"] {
  --app-canvas: #F1F4F8;       /* slightly cooler than --bg-subtle for the main canvas */
  --app-card:   #FFFFFF;
  --app-card-2: var(--ink-50);
  --app-line:   var(--ink-200);
  --app-line-strong: var(--ink-300);
  --app-ink:    var(--ink-900);
  --app-ink-2:  var(--ink-600);
  --app-ink-3:  var(--ink-500);
  --app-nav-bg: var(--ink-900);
  --app-nav-fg: #FFFFFF;
  --app-brand-soft: var(--brand-blue-50);
  --app-brand:  var(--brand-blue-500);
  --app-brand-strong: var(--brand-blue-700);
  --app-teal:   var(--brand-teal-400);
  --app-teal-soft: var(--brand-teal-50);
  --app-shadow-card: 0 1px 2px rgba(11,18,32,.05), 0 1px 3px rgba(11,18,32,.04);
  --app-shadow-pop:  0 12px 32px rgba(11,18,32,.10), 0 4px 8px rgba(11,18,32,.05);
}

/* ----- Dark theme ----- */
.brandy-app[data-theme="dark"] {
  --app-canvas: #0B1220;       /* near-black slate */
  --app-card:   #131A2A;
  --app-card-2: #1A2236;
  --app-line:   #232D44;
  --app-line-strong: #2E3A55;
  --app-ink:    #E6EAF2;
  --app-ink-2:  #A8B1C3;
  --app-ink-3:  #7B8499;
  --app-nav-bg: #0A0F1B;
  --app-nav-fg: #FFFFFF;
  --app-brand-soft: #112644;
  --app-brand:  #4F86E5;
  --app-brand-strong: #82AAF0;
  --app-teal:   #6FBCC5;
  --app-teal-soft: #14323A;

  --fg:        var(--app-ink);
  --fg-muted:  var(--app-ink-2);
  --fg-subtle: var(--app-ink-3);
  --bg:        var(--app-canvas);
  --bg-subtle: var(--app-card);
  --bg-muted:  var(--app-card-2);
  --border:        var(--app-line);
  --border-strong: var(--app-line-strong);

  --success-100: #173A2A;
  --success-700: #6EE0AA;
  --danger-100:  #3A1714;
  --danger-700:  #FF9B92;
  --warning-100: #3A2A0E;
  --warning-700: #F5C36A;
  --brand-teal-50:  #14323A;
  --brand-teal-700: #9BD3DA;
  --brand-blue-50:  #112644;
  --brand-blue-200: #2D4A7C;
  --brand-blue-700: #B6CCF1;

  --app-shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.03) inset;
  --app-shadow-pop:  0 24px 56px rgba(0,0,0,.55), 0 8px 16px rgba(0,0,0,.35);
}

/* Page canvas — applies under the fixed top nav. */
/* min-height:100vh so the canvas background fills the whole window even when a
   page's content is short — otherwise the area below the footer falls through to
   the browser's default white. html bg set too so background propagation can't leak. */
html[data-mode="brandy"] { background: #F1F4F8; }
html[data-mode="brandy"][data-theme="dark"] { background: #0B1220; }
body.brandy-app { background: var(--app-canvas); padding-top: 64px; min-height: 100vh; display: flex; flex-direction: column; }
body.brandy-app[data-theme="dark"] { background: #0B1220; }
/* Sticky footer: the main content wrapper grows to fill, pinning the footer to the
   bottom on short pages (fixed nav + overlay are position:fixed, so not flex items). */
body.brandy-app > .sf-main { flex: 1 0 auto; }

/* Common utility classes used across pages */
.b-card  { background: var(--app-card); border: 1px solid var(--app-line); border-radius: 14px; box-shadow: var(--app-shadow-card); }
.b-line  { border-color: var(--app-line) !important; }
.b-muted { color: var(--app-ink-2); }
.b-subtle{ color: var(--app-ink-3); }
.b-mono  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Page header */
.b-page-header { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.b-page-header h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--app-ink); line-height: 1.15; }
.b-page-header .b-crumbs { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--app-ink-3); margin-bottom: 6px; }
.b-page-header .b-crumbs .last { color: var(--app-ink); font-weight: 500; }
.b-page-header .b-subtitle { margin: 4px 0 0; font-size: 13.5px; color: var(--app-ink-2); }
.b-page-header .b-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Buttons */
.b-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid transparent; font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; cursor: pointer; line-height: 1; white-space: nowrap; transition: background 160ms var(--ease-standard), border-color 160ms var(--ease-standard); text-decoration: none; }
.b-btn.sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
.b-btn.lg { height: 42px; padding: 0 18px; font-size: 14px; }
.b-btn.primary   { background: var(--app-brand); color: #fff; border-color: var(--app-brand); }
.b-btn.primary:hover { background: var(--app-brand-strong); border-color: var(--app-brand-strong); color: #fff; text-decoration: none; }
.b-btn.secondary { background: var(--app-card); color: var(--app-ink); border-color: var(--app-line-strong); }
.b-btn.secondary:hover { background: var(--app-card-2); color: var(--app-ink); text-decoration: none; }
.b-btn.ghost     { background: transparent; color: var(--app-ink-2); }
.b-btn.ghost:hover { background: var(--app-card-2); color: var(--app-ink); text-decoration: none; }
.b-btn.danger    { background: transparent; color: var(--danger-700); border-color: color-mix(in oklab, var(--danger-700) 35%, transparent); }
.b-btn.danger:hover { background: var(--danger-100); color: var(--danger-700); text-decoration: none; }
.b-btn.block { width: 100%; justify-content: center; }

/* Icon buttons */
.b-iconbtn { width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: var(--app-ink-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.b-iconbtn:hover { background: var(--app-card-2); color: var(--app-ink); }
.b-iconbtn.is-active { background: var(--app-brand-soft); color: var(--app-brand); }

/* Pills / chips */
.b-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 9999px; background: var(--app-card-2); color: var(--app-ink-2); font-size: 11.5px; font-weight: 600; font-family: var(--font-sans); line-height: 1; white-space: nowrap; }
.b-pill.success { background: var(--success-100); color: var(--success-700); }
.b-pill.danger  { background: var(--danger-100); color: var(--danger-700); }
.b-pill.warning { background: var(--warning-100); color: var(--warning-700); }

.b-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 9999px; background: var(--app-card); border: 1px solid var(--app-line-strong); color: var(--app-ink-2); font-family: var(--font-sans); font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.b-chip.is-active { background: var(--app-brand-soft); border-color: color-mix(in oklab, var(--app-brand) 40%, transparent); color: var(--brand-blue-700); }

/* Search input wrapper */
.b-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 11px; background: var(--app-card); border: 1px solid var(--app-line-strong); border-radius: 9px; color: var(--app-ink-3); }
.b-search input { border: 0; outline: 0; background: transparent; flex: 1; font-family: var(--font-sans); font-size: 13px; color: var(--app-ink); }

/* Form controls */
.b-field { display: flex; flex-direction: column; gap: 6px; }
.b-field-label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--app-ink-2); }
.b-field-label .req { color: var(--danger-700); font-size: 13px; line-height: 1; }
.b-field-hint { font-size: 11.5px; color: var(--app-ink-3); }
.b-input, .b-select, .b-textarea {
  height: 38px; padding: 0 12px; border-radius: 9px;
  border: 1px solid var(--app-line-strong); background: var(--app-card);
  color: var(--app-ink); font-family: var(--font-sans); font-size: 13.5px;
  outline: none; width: 100%;
  transition: border-color 160ms, box-shadow 160ms;
}
.b-textarea { height: auto; min-height: 72px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.b-input:focus, .b-select:focus, .b-textarea:focus {
  border-color: var(--app-brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--app-brand) 22%, transparent);
}
.b-input.is-invalid, .b-select.is-invalid { border-color: var(--danger-700); }

/* Read-only / disabled appearance — keeps text readable but signals "look, don't touch". */
.b-input[readonly], .b-textarea[readonly] {
  background: var(--app-card-2);
  color: var(--app-ink-2);
  border-color: var(--app-line);
  cursor: not-allowed;
  box-shadow: none;
}
.b-select[disabled] {
  background-color: var(--app-card-2);
  color: var(--app-ink-2);
  border-color: var(--app-line);
  cursor: not-allowed;
  opacity: 1;
}
/* Avoid the focus ring on read-only fields */
.b-input[readonly]:focus, .b-textarea[readonly]:focus, .b-select[disabled]:focus {
  border-color: var(--app-line);
  box-shadow: none;
}
.b-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7384' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}

/* Sectioned form block (Identity, Address, etc.) */
.b-section { padding: 20px 24px; border-bottom: 1px solid var(--app-line); }
.b-section:last-of-type { border-bottom: 0; }
.b-section-title { font-size: 14px; font-weight: 600; color: var(--app-ink); letter-spacing: -0.01em; }
.b-section-subtitle { font-size: 12.5px; color: var(--app-ink-3); margin-top: 3px; }
.b-section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; }
.b-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 18px; }
.b-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.b-grid .span-2 { grid-column: span 2; }
.b-grid .span-3 { grid-column: span 3; }
@media (max-width: 768px) {
  .b-grid, .b-grid.cols-2 { grid-template-columns: 1fr; }
  .b-grid .span-2, .b-grid .span-3 { grid-column: span 1; }
}

/* Sticky save bar at the bottom of forms */
.b-form-savebar { padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; background: var(--app-card-2); border-top: 1px solid var(--app-line); }
.b-form-savebar .note { font-size: 12.5px; color: var(--app-ink-3); }

/* Inline validation message */
.b-field .field-error { color: var(--danger-700); font-size: 12px; }

/* Alert block */
.b-alert { padding: 12px 14px; border-radius: 10px; font-size: 13px; }
.b-alert.danger { background: var(--danger-100); color: var(--danger-700); border: 1px solid color-mix(in oklab, var(--danger-700) 25%, transparent); }
.b-alert.warning { background: var(--warning-100); color: var(--warning-700); border: 1px solid color-mix(in oklab, var(--warning-700) 25%, transparent); }
.b-alert.success { background: var(--success-100); color: var(--success-700); border: 1px solid color-mix(in oklab, var(--success-700) 25%, transparent); }
.b-alert ul { margin: 6px 0 0; padding-left: 18px; }

/* Table base for Brandy */
.b-table { width: 100%; border-collapse: collapse; }
.b-table thead th {
  height: 40px; padding: 0 12px; text-align: left;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: var(--app-ink-3); background: var(--app-card-2);
  border-bottom: 1px solid var(--app-line); white-space: nowrap;
}
.b-table tbody td { padding: 0 12px; height: 52px; vertical-align: middle; border-bottom: 1px solid var(--app-line); color: var(--app-ink); font-size: 13.5px; }
.b-table tbody tr:last-child td { border-bottom: 0; }
.b-table tbody tr.is-selected { background: var(--app-brand-soft); }
.b-table tbody tr:hover { background: color-mix(in oklab, var(--app-brand-soft) 60%, transparent); }
.b-table tbody tr.is-processed { background: color-mix(in oklab, var(--success-100) 75%, transparent); }
.b-table tbody tr.is-urgent    { background: color-mix(in oklab, var(--danger-100) 75%, transparent); }
.b-table tbody tr.is-processed.is-urgent { background: color-mix(in oklab, var(--success-100) 75%, transparent); } /* processed wins */
.b-table tbody tr.is-processed:hover { background: color-mix(in oklab, var(--success-100) 90%, transparent); }
.b-table tbody tr.is-urgent:hover    { background: color-mix(in oklab, var(--danger-100) 90%, transparent); }

/* Customer-cell avatar */
.b-cust-cell { display: flex; align-items: center; gap: 12px; }
.b-cust-avatar { width: 32px; height: 32px; border-radius: 8px; background: var(--app-brand-soft); color: var(--app-brand); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; letter-spacing: -0.01em; flex: none; }
.b-cust-name { font-size: 13.5px; font-weight: 600; color: var(--app-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-cust-city { font-size: 11.5px; color: var(--app-ink-3); }

/* DataTables wrapper styling (mirrors b-table) */
.brandy-app .dataTables_wrapper { padding: 0; }
.brandy-app .dataTables_wrapper .dataTables_filter,
.brandy-app .dataTables_wrapper .dataTables_length,
.brandy-app .dataTables_wrapper .dataTables_info,
.brandy-app .dataTables_wrapper .dataTables_paginate { padding: 10px 16px; color: var(--app-ink-2); font-size: 12.5px; }
.brandy-app .dataTables_wrapper .dataTables_filter input,
.brandy-app .dataTables_wrapper .dataTables_length select {
  height: 32px; border-radius: 8px; border: 1px solid var(--app-line-strong);
  background: var(--app-card); color: var(--app-ink); padding: 0 10px; font-family: var(--font-sans); font-size: 13px;
}
.brandy-app table.dataTable.b-table tbody td { background: transparent !important; }
.brandy-app table.dataTable.b-table thead th,
.brandy-app table.dataTable.b-table tfoot th { border-bottom: 1px solid var(--app-line); }
.brandy-app .dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 4px 10px; border-radius: 6px; border: 1px solid var(--app-line); color: var(--app-ink-2) !important; background: var(--app-card);
}
.brandy-app .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.brandy-app .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--app-brand) !important; border-color: var(--app-brand) !important; color: #fff !important;
}
.brandy-app .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--app-card-2) !important; border-color: var(--app-line-strong) !important; color: var(--app-ink) !important;
}

/* Login (Brandy) */
.b-login-shell { min-height: calc(100vh - 56px); display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--app-canvas); }
.b-login-card { width: 920px; max-width: 100%; display: grid; grid-template-columns: 1.05fr 1fr; background: var(--app-card); border-radius: 18px; border: 1px solid var(--app-line); box-shadow: var(--app-shadow-pop); overflow: hidden; }
.b-login-rail { position: relative; padding: 36px 36px 32px; color: #fff; min-height: 480px; display: flex; flex-direction: column;
  background: linear-gradient(135deg, var(--brand-blue-700) 0%, var(--brand-blue-500) 55%, var(--brand-teal-400) 130%);
}
.b-login-rail .quote { font-family: var(--font-serif); font-style: italic; font-size: 30px; line-height: 1.15; letter-spacing: -0.01em; }
.b-login-rail .subline { font-size: 13px; opacity: 0.85; margin-top: 14px; }
.b-login-form { padding: 40px 36px; }
.b-login-form .eyebrow { font-size: 12px; color: var(--app-ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.b-login-form h1 { margin: 8px 0 6px; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--app-ink); }
.b-login-form p.lede { margin: 0 0 24px; font-size: 13.5px; color: var(--app-ink-2); }
.b-login-row { display: flex; align-items: center; justify-content: space-between; margin: 4px 0; font-size: 13px; color: var(--app-ink-2); }
.b-login-divider { display: flex; align-items: center; gap: 12px; margin: 8px 0; color: var(--app-ink-3); font-size: 12px; }
.b-login-divider span.line { flex: 1; height: 1px; background: var(--app-line); }
.b-login-footnote { margin-top: 28px; font-size: 12px; color: var(--app-ink-3); text-align: center; }
@media (max-width: 768px) {
  .b-login-card { grid-template-columns: 1fr; }
  .b-login-rail { min-height: 160px; }
  .b-login-rail .quote { font-size: 22px; }
}

/* TopNav (Brandy) */
.b-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; height: 60px; background: var(--app-nav-bg); color: var(--app-nav-fg); display: flex; align-items: center; padding: 0 22px; font-family: var(--font-sans); border-bottom: 1px solid color-mix(in oklab, #ffffff 8%, transparent); }
.b-nav .brand { display: flex; align-items: center; gap: 10px; margin-right: 28px; }
.b-nav .brand .word { font-weight: 600; font-size: 17px; color: #fff; letter-spacing: -0.02em; }
.b-nav .brand .word .accent { color: var(--brand-teal-400); }
.b-nav .nav-item { height: 60px; padding: 0 16px; border: 0; background: transparent; color: #fff; display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 13.5px; cursor: pointer; opacity: 0.78; border-bottom: 2px solid transparent; transition: opacity 160ms var(--ease-standard); text-decoration: none; }
.b-nav .nav-item:hover { opacity: 1; text-decoration: none; color: #fff; }
.b-nav .nav-item.active { opacity: 1; border-bottom-color: var(--brand-teal-400); }
.b-nav .spacer { flex: 1; }
.b-nav .nav-search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 11px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.10); border-radius: 9px; width: 260px; color: rgba(255,255,255,0.65); margin-right: 10px; }
.b-nav .nav-search input { border: 0; outline: 0; background: transparent; flex: 1; color: #fff; font-family: var(--font-sans); font-size: 12.5px; }
.b-nav .nav-search input::placeholder { color: rgba(255,255,255,0.55); }
.b-nav .nav-icon { width: 34px; height: 34px; margin-left: 6px; border-radius: 8px; border: 0; background: rgba(255,255,255,0.08); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.b-nav .nav-divider { width: 1px; height: 24px; background: rgba(255,255,255,0.15); margin: 0 10px 0 6px; }
.b-nav .user-btn { display: flex; align-items: center; gap: 8px; cursor: pointer; border: 0; background: transparent; color: inherit; padding: 4px; border-radius: 8px; }
.b-nav .user-btn .who { line-height: 1.2; text-align: left; }
.b-nav .user-btn .who .name { font-size: 12.5px; font-weight: 600; }
.b-nav .user-btn .who .sub { font-size: 11px; opacity: 0.6; }
.b-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; color: #fff; font-weight: 600; font-family: var(--font-sans); letter-spacing: -0.01em; flex: none; background: var(--brand-blue-500); }

/* Segmented control (Classic/New + Light/Dark) used in nav and on the login top bar */
.b-segmented { display: inline-flex; align-items: center; height: 32px; padding: 3px; border-radius: 9999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); gap: 2px; }
.b-segmented button { height: 24px; padding: 0 10px; border: 0; background: transparent; color: rgba(255,255,255,0.85); border-radius: 9999px; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: background 160ms var(--ease-standard); }
.b-segmented button.on { background: rgba(255,255,255,0.95); color: #0B1220; }
.b-segmented.glyph button { padding: 0 8px; }

/* Login top bar (mode/theme toggles) */
.b-login-topbar { height: 56px; padding: 0 22px; display: flex; align-items: center; background: var(--app-nav-bg); color: #fff; border-bottom: 1px solid color-mix(in oklab, #ffffff 8%, transparent); }
.b-login-topbar.classic { background: #343a40; }

/* Side rail (Edit page "At a glance" / "Recent activity" / "Danger zone") */
.b-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 76px; }
.b-side .b-card { padding: 16px; }
.b-side .title { font-size: 13px; font-weight: 600; color: var(--app-ink); margin-bottom: 12px; }
.b-stat { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.b-stat .ico { width: 28px; height: 28px; border-radius: 7px; background: var(--app-brand-soft); color: var(--app-brand); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.b-stat .label { font-size: 12.5px; color: var(--app-ink-2); }
.b-stat .value { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--app-ink); font-family: var(--font-mono); }

/* ============================================================
   sfnav — light Brandy top navigation (replaces the dark .b-nav).
   Fixed 64px bar; responsive collapse is driven by media queries,
   open/close behavior by brandy-nav.js. Themeable via --app-* vars.
   ============================================================ */
.sfnav { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; height: 64px;
  background: var(--app-card); color: var(--app-ink); border-bottom: 1px solid var(--app-line);
  display: flex; align-items: center; gap: 14px; padding: 0 22px; font-family: var(--font-sans); }
.brandy-app[data-theme="dark"] .sfnav { box-shadow: 0 1px 0 rgba(0,0,0,.4); }

.sfnav-brand { display: flex; align-items: center; gap: 10px; flex: none; text-decoration: none; }
.sfnav-brand .word { font-weight: 600; font-size: 17px; letter-spacing: -0.02em; color: var(--app-ink); }
.sfnav-brand .word .accent { color: var(--brand-teal-700); }
.sfnav-brand:hover { text-decoration: none; }

.sfnav-rule { width: 1px; height: 24px; background: var(--app-line); flex: none; }
.sfnav-spacer { flex: 1; min-width: 8px; }

/* primary pill nav */
.sfnav-primary { display: flex; align-items: center; gap: 2px; flex: none; }
.sfnav-pill { height: 36px; padding: 0 13px; border-radius: 9999px; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; text-decoration: none;
  background: transparent; color: var(--app-ink-2); font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  transition: background 160ms var(--ease-standard), color 160ms var(--ease-standard); }
.sfnav-pill:hover { background: var(--app-card-2); color: var(--app-ink); text-decoration: none; }
.sfnav-pill.active { background: var(--app-brand); color: #fff; font-weight: 600; }
.sfnav-pill.active:hover { background: var(--app-brand-strong); color: #fff; }
.sfnav-pill.accent { background: color-mix(in oklab, var(--app-teal) 14%, transparent); color: var(--brand-teal-700); }
.sfnav-pill .caret { opacity: .7; margin-left: 1px; display: inline-flex; }

/* dropdown shell */
.sfnav-dd { position: relative; display: inline-flex; }
.sfnav-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; display: none;
  min-width: 220px; padding: 6px; border-radius: 12px; background: var(--app-card); color: var(--app-ink);
  border: 1px solid var(--app-line); box-shadow: var(--app-shadow-pop); font-family: var(--font-sans); }
.sfnav-menu.wide { min-width: 300px; }
.sfnav-menu.align-right { left: auto; right: 0; }
.sfnav-dd.open > .sfnav-menu { display: block; }
.sfnav-menu .maxh { max-height: 70vh; overflow: auto; }

/* menu item */
.sfnav-mi { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px;
  border: 0; background: transparent; cursor: pointer; text-decoration: none; text-align: left;
  color: var(--app-ink); font-family: inherit; font-size: 13px; font-weight: 500; }
.sfnav-mi:hover { background: var(--app-brand-soft); color: var(--brand-blue-700); text-decoration: none; }
.sfnav-mi.active { background: var(--app-brand-soft); color: var(--brand-blue-700); font-weight: 600; }
.sfnav-mi.danger { color: var(--danger-700); }
.sfnav-mi.danger:hover { background: var(--danger-100); color: var(--danger-700); }
.sfnav-mi .ico { width: 22px; height: 22px; border-radius: 6px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--app-ink-3); }
.sfnav-mi:hover .ico, .sfnav-mi.active .ico { color: inherit; }
.sfnav-mi .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sfnav-mi .hint { font-size: 10.5px; color: var(--app-ink-3); font-family: var(--font-mono); }
.sfnav-divider { height: 1px; background: var(--app-line); margin: 5px 2px; }

/* admin accordion */
.sfnav-acc-head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
  border: 0; cursor: pointer; background: transparent; color: var(--app-ink); text-align: left;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; }
.sfnav-acc-head:hover, .sfnav-acc.open > .sfnav-acc-head { background: var(--app-card-2); }
.sfnav-acc-head .chev { color: var(--app-ink-3); flex: none; transition: transform 160ms var(--ease-standard); }
.sfnav-acc.open > .sfnav-acc-head .chev { transform: rotate(90deg); }
.sfnav-acc-head .ttl { flex: 1; }
.sfnav-acc-head .count { padding: 0 8px; height: 18px; line-height: 16px; border-radius: 9999px;
  background: var(--app-card-2); color: var(--app-ink-2); font-size: 10.5px; font-family: var(--font-mono); font-weight: 600; border: 1px solid var(--app-line); }
.sfnav-acc-body { overflow: hidden; max-height: 0; transition: max-height 220ms var(--ease-standard); }
.sfnav-acc.open > .sfnav-acc-body { max-height: 760px; }
.sfnav-acc-body .inner { padding: 4px 0 6px 4px; }

/* search affordances */
.sfnav-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 11px; flex: none;
  width: 280px; cursor: pointer; text-align: left; background: var(--app-card-2); border: 1px solid var(--app-line);
  border-radius: 9px; color: var(--app-ink-3); font-family: var(--font-sans); }
.sfnav-search:hover { border-color: var(--app-line-strong); }
.sfnav-search .ph { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--app-ink-2); }
.sfnav-search .kbd { margin-left: auto; font-size: 10.5px; font-family: var(--font-mono); padding: 1px 5px; border-radius: 5px;
  background: var(--app-card); border: 1px solid var(--app-line); color: var(--app-ink-3); }
.sfnav-search-icon { width: 36px; height: 36px; flex: none; border-radius: 9px; cursor: pointer; display: none;
  align-items: center; justify-content: center; background: var(--app-card-2); border: 1px solid var(--app-line); color: var(--app-ink-2); }

/* user menu */
.sfnav-user { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: 0; background: transparent; color: inherit; padding: 4px; border-radius: 8px; }
.sfnav-user:hover { background: var(--app-card-2); }
.sfnav-user .who { line-height: 1.2; text-align: left; }
.sfnav-user .who .name { font-size: 12.5px; font-weight: 600; color: var(--app-ink); }
.sfnav-user .who .sub { font-size: 11px; color: var(--app-ink-3); }
.sfnav-user .caret { color: var(--app-ink-2); opacity: .7; display: inline-flex; }
.sfnav-userhead { display: flex; align-items: center; gap: 10px; padding: 8px 10px 6px; }
.sfnav-userhead .nm { font-size: 13.5px; font-weight: 600; color: var(--app-ink); }
.sfnav-userhead .em { font-size: 11.5px; color: var(--app-ink-3); }
.sfnav-prefs { padding: 4px 10px 8px; }
.sfnav-prefs .lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--app-ink-3); margin-bottom: 6px; }
.sfnav-prefrow { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.sfnav-prefrow .t { flex: 1; min-width: 0; }
.sfnav-prefrow .t .h { font-size: 12.5px; font-weight: 600; color: var(--app-ink); }
.sfnav-prefrow .t .d { font-size: 11px; color: var(--app-ink-3); margin-top: 1px; }

/* light segmented control (user-menu Preferences) */
.sfseg { display: inline-flex; align-items: center; height: 30px; padding: 3px; border-radius: 9999px;
  background: var(--app-card-2); border: 1px solid var(--app-line); gap: 2px; flex: none; }
.sfseg button { height: 22px; padding: 0 10px; border: 0; background: transparent; color: var(--app-ink-2);
  border-radius: 9999px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; }
.sfseg button.on { background: var(--app-card); color: var(--app-ink); box-shadow: var(--app-shadow-card); }

/* hamburger */
.sfnav-burger { width: 38px; height: 38px; flex: none; border-radius: 9px; cursor: pointer; display: none;
  align-items: center; justify-content: center; background: transparent; border: 1px solid var(--app-line); color: var(--app-ink); }

/* command palette overlay */
.sfnav-overlay { position: fixed; inset: 0; z-index: 2000; display: none;
  background: color-mix(in oklab, var(--app-nav-bg) 55%, transparent); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  align-items: flex-start; justify-content: center; padding: 12vh 20px 20px; }
.sfnav-overlay.open { display: flex; }
.sfnav-palette { width: 620px; max-width: 100%; background: var(--app-card); border-radius: 14px;
  border: 1px solid var(--app-line); box-shadow: var(--app-shadow-pop); overflow: hidden; font-family: var(--font-sans); }
.sfnav-palette .row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--app-line); }
.sfnav-palette .row input { flex: 1; border: 0; outline: 0; background: transparent; font-family: var(--font-sans); font-size: 15px; color: var(--app-ink); }
.sfnav-palette .esc { flex: none; font-size: 11px; padding: 2px 7px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--app-line); background: var(--app-card-2); color: var(--app-ink-3); font-family: var(--font-mono); }
.sfnav-results { max-height: 52vh; overflow: auto; padding: 8px; }
.sfnav-seclbl { padding: 8px 10px 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--app-ink-3); }
.sfnav-sr { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 9px; border: 0; cursor: pointer;
  background: transparent; text-align: left; text-decoration: none; font-family: var(--font-sans); }
.sfnav-sr:hover { background: var(--app-card-2); text-decoration: none; }
.sfnav-sr .ico { width: 30px; height: 30px; border-radius: 8px; flex: none; background: var(--app-brand-soft); color: var(--app-brand); display: inline-flex; align-items: center; justify-content: center; }
.sfnav-sr .body { min-width: 0; flex: 1; }
.sfnav-sr .body .t { display: block; font-size: 13.5px; font-weight: 500; color: var(--app-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfnav-sr .body .m { display: block; font-size: 11.5px; color: var(--app-ink-3); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfnav-empty { padding: 28px 12px; text-align: center; color: var(--app-ink-3); font-size: 13.5px; }
.sfnav-palette .foot { padding: 8px 14px; border-top: 1px solid var(--app-line); display: flex; align-items: center; gap: 14px; color: var(--app-ink-3); font-size: 11.5px; background: var(--app-card-2); }
.sfnav-palette .foot b { font-family: var(--font-mono); }

/* responsive: search compact -> icon, nav -> hamburger */
@media (max-width: 1560px) { .sfnav-search { width: 200px; } .sfnav-search .kbd { display: none; } }
@media (max-width: 1480px) { .sfnav-search { display: none; } .sfnav-search-icon { display: inline-flex; } }
@media (max-width: 1180px) {
  .sfnav-primary, .sfnav-rule { display: none; }
  .sfnav-burger { display: inline-flex; }
  .sfnav-user .who { display: none; }
}

/* Bootstrap-class shims for Brandy mode.
   builder.js (web-form designer) hardcodes Bootstrap classes on injected inputs/buttons;
   reskinning them here avoids touching that script. */
.brandy-app .form-control {
  height: 38px; padding: 0 12px; border-radius: 9px;
  border: 1px solid var(--app-line-strong); background: var(--app-card);
  color: var(--app-ink); font-family: var(--font-sans); font-size: 13.5px;
  outline: none; width: 100%;
  transition: border-color 160ms, box-shadow 160ms;
  box-shadow: none;
}
.brandy-app textarea.form-control { height: auto; min-height: 72px; padding: 10px 12px; line-height: 1.5; }
.brandy-app select.form-control {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7384' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}
.brandy-app .form-control:focus {
  border-color: var(--app-brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--app-brand) 22%, transparent);
}
.brandy-app .form-control[readonly], .brandy-app .form-control[disabled] {
  background: var(--app-card-2); color: var(--app-ink-2); border-color: var(--app-line); cursor: not-allowed;
}

/* Bootstrap .btn shims — only when injected into Brandy pages by builder.js etc. */
.brandy-app .btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: 9px;
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 500;
  cursor: pointer; line-height: 1; white-space: nowrap;
  border: 1px solid transparent; text-decoration: none;
}
.brandy-app .btn-primary, .brandy-app .btn-success {
  background: var(--app-brand); color: #fff; border-color: var(--app-brand);
}
.brandy-app .btn-primary:hover, .brandy-app .btn-success:hover {
  background: var(--app-brand-strong); color: #fff;
}
.brandy-app .btn-block { width: 100%; justify-content: center; }
.brandy-app .btn[disabled], .brandy-app .btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Bootstrap .card shims — not-yet-reskinned pages (e.g. the dashboard) use raw
   Bootstrap cards. Without these the card surface and footer stay light while the
   theme flips body text to light, leaving footer text unreadable in dark mode.
   .card-body color utilities (.bg-primary/.text-white etc.) carry !important so
   the colored header blocks are unaffected. */
.brandy-app .card {
  background: var(--app-card);
  border: 1px solid var(--app-line);
  border-radius: 14px;
  box-shadow: var(--app-shadow-card);
  color: var(--app-ink);
}
.brandy-app .card-header,
.brandy-app .card-footer {
  background: var(--app-card-2);
  border-color: var(--app-line);
  color: var(--app-ink-2);
}
/* bg-warning is a fixed light amber in both themes; the .text-white in the
   dashboard markup fails contrast on it (~1.6:1). Force dark text on amber. */
.brandy-app .bg-warning,
.brandy-app .bg-warning .text-white {
  color: #1F2430 !important;
}

/* View-only row used on customers_view */
.b-view-row { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--app-line); }
.b-view-row:last-child { border-bottom: 0; }
.b-view-row .lbl { font-size: 12.5px; color: var(--app-ink-3); font-weight: 500; }
.b-view-row .val { font-size: 13.5px; color: var(--app-ink); }

/* Classic-mode utility — used so it reads as 'today's app' */
.classic-app {
  background: #FFFFFF;
  color: #212529;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.classic-app[data-theme="dark"] { background: #1a1d21; color: #e9ecef; }
.classic-app[data-theme="dark"] .table thead th { background: #243044 !important; color: #cfdcef !important; border-color: #2a313b !important; }
.classic-app[data-theme="dark"] .table tr:nth-child(even) td { background: #232932 !important; }
.classic-app[data-theme="dark"] .table tr:nth-child(odd) td { background: #1f242c !important; }
.classic-app[data-theme="dark"] .table td { border-color: #2a313b !important; color: #e9ecef !important; }
.classic-app[data-theme="dark"] h1, .classic-app[data-theme="dark"] h2, .classic-app[data-theme="dark"] h3 { color: #e9ecef !important; }
.classic-app[data-theme="dark"] .form-control { background: #2a313b !important; color: #e9ecef !important; border-color: #3b4452 !important; }
.classic-app[data-theme="dark"] a { color: #6fb6ff !important; }
.classic-app[data-theme="dark"] .form { color: #e9ecef !important; }