/* ============================================================
   SHARPSHELL IMS — Design System
   Palette: Slate dark sidebar + Warm white canvas + Amber accent
   Type: Arimo (Arial-metric) — matches the brand wordmark
   Signature: Sidebar with frosted-glass active states +
              amber-left-rule accent on active nav
   ============================================================ */

/* Must stay above every rule set — @import after a rule is ignored. */
@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;500;600;700&display=swap');

/* GPS Status Styles */
.gps-status-container {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gps-status-container.success {
    background: #d1fae5;
    border-color: #10b981;
    color: #065f46;
}

.gps-status-container.error {
    background: #fee2e2;
    border-color: #ef4444;
    color: #991b1b;
}

.gps-status-container.warning {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
}

.gps-status {
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  /* Sidebar */
  --sidebar-bg:        #1b2a57;
  --sidebar-width:     256px;
  --sidebar-text:      #a9b8d4;
  --sidebar-heading:   #ffffff;
  --sidebar-active-bg: rgba(91,151,214,0.20);
  --sidebar-active:    #7db3f0;
  --sidebar-hover-bg:  rgba(255,255,255,0.07);
  --sidebar-section:   #90a4cc;

  /* Canvas */
  --canvas:            #f1f5f9;
  --surface:           #ffffff;
  --surface-2:         #f8fafc;
  --border:            #e2e8f0;
  --border-strong:     #cbd5e1;

  /* Brand (SharpShell blue) */
  --amber:             #2f6fbf;
  --amber-light:       #e4eef9;
  --amber-dark:        #245a9e;

  /* Semantic */
  --success:           #10b981;
  --success-bg:        #d1fae5;
  --success-text:      #065f46;
  --danger:            #ef4444;
  --danger-bg:         #fee2e2;
  --danger-text:       #991b1b;
  --warning:           #f59e0b;
  --warning-bg:        #fef3c7;
  --warning-text:      #92400e;
  --info:              #3b82f6;
  --info-bg:           #dbeafe;
  --info-text:         #1e40af;

  /* Text */
  --text-primary:      #0f172a;
  --text-secondary:    #475569;
  --text-muted:        #94a3b8;

  /* Layout */
  --header-height:     56px;
  --radius:            10px;
  --radius-sm:         6px;
  --radius-lg:         14px;

  /* Shadow */
  --shadow-sm:         0 1px 2px rgba(0,0,0,0.05);
  --shadow:            0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:         0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:         0 10px 25px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.04);
  --shadow-xl:         0 20px 40px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.06);
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; -webkit-font-smoothing: antialiased; }

body {
  font-family: 'Arimo', Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--canvas);
}

/* ── Login ───────────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: block;
  background: var(--sidebar-bg);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(47,111,191,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(59,130,246,0.06) 0%, transparent 50%);
  position: relative;
  overflow-y: auto;
  padding: 40px 16px;
}

.login-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 39px, rgba(255,255,255,0.02) 39px, rgba(255,255,255,0.02) 40px
  ), repeating-linear-gradient(
    90deg, transparent, transparent 39px, rgba(255,255,255,0.02) 39px, rgba(255,255,255,0.02) 40px
  );
  pointer-events: none;
}

.login-container {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.login-box {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(255,255,255,0.08);
  max-height: 90vh;
  overflow-y: auto;
}

.login-header {
  text-align: center;
  margin-bottom: 32px;
}

.login-header h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}

.login-header h1 span {
  color: var(--amber);
}

.login-header p {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 400;
}

.login-tabs {
  display: flex;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 3px;
  margin-bottom: 28px;
  border: 1px solid var(--border);
}

.tab-btn {
  flex: 1;
  padding: 9px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: calc(var(--radius-sm) - 2px);
  transition: all 0.2s;
}

.tab-btn:hover { color: var(--text-secondary); }

.tab-btn.active {
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.auth-form { display: none; }
.auth-form.active { display: block; }

/* ── Forms (shared) ─────────────────────────────────────── */
.form-group { margin-bottom: 18px; }

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--text-secondary);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--text-primary);
  background-color: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--amber-dark);
  box-shadow: 0 0 0 4px rgba(47,111,191,0.35);
}

/* Baseline styling for any <select> that isn't already inside .form-group
   or .search-filter (both styled elsewhere) — e.g. the page-header
   "project switcher" dropdowns used on Team, Job Cards, Material Usage,
   Time & Expense, and Subcontractor Costing. Without this they fall back
   to the plain unstyled browser default. Uses a custom chevron since
   native selects can't be styled with a pseudo-element arrow reliably. */
select {
  padding: 8px 34px 8px 13px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text-primary);
  background-color: var(--surface);
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23667085' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px 7px;
}
select:hover {
  border-color: var(--amber-dark);
}
select:focus {
  border-color: var(--amber-dark);
  box-shadow: 0 0 0 4px rgba(47,111,191,0.35);
}
select::-ms-expand {
  display: none;
}

/* ── Inline SVG icons in page content ─────────────────────
   Pages used to carry emoji here (card headers, empty states, buttons).
   These are icon() glyphs on currentColor: they take the surrounding
   text colour and sit on the text baseline. */
.card-icon .ico {
  width: 24px;
  height: 24px;
  color: var(--amber);
}
.card-icon { line-height: 1; color: var(--amber); }

.empty-state-icon .ico,
.empty-state .ico {
  width: 34px;
  height: 34px;
  color: var(--text-muted);
}
.empty-state-icon { line-height: 1; }

.quick-action-icon .ico { width: 22px; height: 22px; color: var(--amber); }

.btn .ico,
.action-btn .ico {
  width: 15px;
  height: 15px;
  vertical-align: -3px;
}
.action-btn .ico { width: 14px; height: 14px; }

h1 .ico, h2 .ico, h3 .ico, h4 .ico {
  width: 17px;
  height: 17px;
  vertical-align: -2px;
  margin-right: 2px;
  opacity: .8;
}

table td .ico { width: 16px; height: 16px; vertical-align: -3px; }
.alert .ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.status .ico, .badge .ico { width: 13px; height: 13px; vertical-align: -2px; }

/* Custom search-filter dropdown (e.g. Assigned To on Mobile Units) —
   built by hand instead of relying on native <datalist>, since datalist
   filtering is inconsistent across browsers (often prefix-only, so typing
   a last name wouldn't surface a match). This guarantees a substring match
   anywhere in the name, every time. */
.driver-suggestions {
  position: fixed;
  z-index: 9999;
  max-height: 250px;
  overflow-y: auto;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  scrollbar-width: auto;
  scrollbar-color: #64748b #e2e8f0;
  min-width: 250px;
}
.driver-suggestions::-webkit-scrollbar {
  width: 10px;
}
.driver-suggestions::-webkit-scrollbar-track {
  background: #e2e8f0;
  border-radius: 6px;
}
.driver-suggestions::-webkit-scrollbar-thumb {
  background: #64748b;
  border-radius: 6px;
  border: 2px solid #e2e8f0;
}
.driver-suggestions::-webkit-scrollbar-thumb:hover {
  background: #475569;
}
.driver-suggestion {
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.15s ease;
}
.driver-suggestion:last-child {
  border-bottom: none;
}
.driver-suggestion:hover,
.driver-suggestion.highlighted {
  background: #fef3c7;
  color: #1e293b;
}
.driver-suggestion-empty {
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
}

.form-group textarea { resize: vertical; min-height: 90px; }
.form-group select { cursor: pointer; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.01em;
  transition: all 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--amber);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(47,111,191,0.3);
}
.btn-primary:hover {
  background: var(--amber-dark);
  box-shadow: 0 4px 12px rgba(47,111,191,0.35);
}

.btn-success {
  background: var(--success);
  color: #fff;
}
.btn-success:hover { background: #059669; }

.btn-danger {
  background: var(--danger);
  color: #fff;
}
.btn-danger:hover { background: #dc2626; }

.btn-warning {
  background: var(--warning);
  color: #1a0a00;
}
.btn-warning:hover { background: var(--amber-dark); }

.btn-secondary {
  background: var(--surface);
  color: var(--text-secondary);
  border: 1.5px solid var(--border);
}
.btn-secondary:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--surface-2);
}

.btn-sm { padding: 5px 11px; font-size: 12px; }
.btn-block { width: 100%; justify-content: center; }
.btn-group { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Alerts (flash messages) ─────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 18px;
  border-left: 3px solid;
}

.alert-error   { background: var(--danger-bg);  color: var(--danger-text);  border-color: var(--danger);  }
.alert-success { background: var(--success-bg); color: var(--success-text); border-color: var(--success); }
.alert-warning { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning); }
.alert-info    { background: var(--info-bg);    color: var(--info-text);    border-color: var(--info);    }

/* ── Layout shell ────────────────────────────────────────── */
.app-container {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  position: fixed;
  top: 0;
  left: 0;
  /* Pin top AND bottom rather than setting a height. On mobile Chrome and
     Safari, 100vh means the viewport with the browser toolbars retracted,
     so a 100vh drawer does not match what is actually on screen and stops
     short of the bottom. Anchoring both edges makes the height follow the
     real visible viewport as the toolbar shows and hides. */
  bottom: 0;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  /* Scrolling to the end of the menu must not start scrolling the page
     underneath it. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transition: width 0.25s cubic-bezier(0.4,0,0.2,1);
  z-index: 1000;
  scrollbar-width: thin;
  scrollbar-color: #1e293b transparent;
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 2px; }

.sidebar.collapsed { width: 60px; }
.sidebar.collapsed .sidebar-header h2,
.sidebar.collapsed .sidebar-header .user-info,
.sidebar.collapsed .sidebar-header .branch-info,
.sidebar.collapsed .sidebar-nav a span:not(.icon) {
  display: none;
}

/* Sidebar header / branding */
.sidebar-header {
  padding: 20px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sidebar-header h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--sidebar-heading);
  text-transform: uppercase;
  letter-spacing: 0.2px;
  margin-bottom: 14px;
}

.sidebar-header h2 span { color: var(--amber); }

.user-card {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--amber), var(--amber-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  flex-shrink: 0;
}

.user-info { line-height: 1.35; }
.user-info strong { display: block; font-size: 13px; color: var(--sidebar-heading); font-weight: 600; }
.user-info small  { font-size: 11.5px; color: var(--sidebar-text); }

.branch-info {
  margin-top: 8px;
  padding: 7px 10px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 12px;
  color: var(--sidebar-text);
}

/* Sidebar nav — collapsible groups.
   Many modules only stay scannable if most are folded away; one group
   opens by default (whichever holds the current page), everything else
   the user opens/closes is remembered client-side (see footer.php). */
.sidebar-nav { padding: 10px 8px; }

.sidebar-nav a.nav-pinned {
  display: flex; align-items: center; gap: 11px;
  margin: 0 2px 8px; padding: 10px 16px;
  color: var(--sidebar-heading); text-decoration: none;
  font-size: 13.5px; font-weight: 600;
  border-radius: var(--radius-sm);
  background: var(--sidebar-hover-bg);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 1px solid rgba(255,255,255,0.06); /* override the generic left-border indicator */
  transition: all 0.15s ease;
}
.sidebar-nav a.nav-pinned:hover { background: rgba(255,255,255,0.07); }
.sidebar-nav a.nav-pinned.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active);
  border-color: transparent;
}
.nav-pinned .icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }

.nav-group { margin-bottom: 2px; }

.nav-toggle {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; margin: 0 2px; border: none; border-radius: var(--radius-sm);
  cursor: pointer; background: transparent; color: var(--sidebar-section);
  font-family: inherit; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: background 0.12s, color 0.12s;
}
.nav-toggle:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-heading); }
.nav-group.is-open .nav-toggle { color: var(--sidebar-heading); }
.nav-toggle .icon { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }

.nav-toggle-text { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav-count {
  font-size: 10px; font-weight: 700; color: var(--sidebar-active);
  background: var(--sidebar-active-bg); border-radius: 999px; padding: 1px 7px;
}
.nav-group.is-open .nav-count { opacity: 0; }

.nav-chev {
  width: 7px; height: 7px; flex-shrink: 0; margin-left: 2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) translate(-1px, -1px);
  transition: transform 0.2s ease;
}
.nav-group.is-open .nav-chev { transform: rotate(45deg) translate(-1px, -1px); }

/* grid-template-rows 0fr -> 1fr animates to natural content height without
   a magic max-height number. */
.nav-items {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease;
}
.nav-group.is-open .nav-items { grid-template-rows: 1fr; }
.nav-items-inner { overflow: hidden; min-height: 0; }
.nav-group.is-open .nav-items-inner { padding-bottom: 4px; }

/* No JS: never leave someone stranded with a nav they cannot open */
.no-js .nav-items { grid-template-rows: 1fr; }
.no-js .nav-chev { display: none; }

/* Sidebar collapsed to icon-rail: groups make no sense at 60px, so drop
   straight back to a flat icon list instead of trying to shrink them. */
.sidebar.collapsed .nav-toggle,
.sidebar.collapsed .nav-pinned .nav-label,
.sidebar.collapsed .nav-toggle-text,
.sidebar.collapsed .nav-count,
.sidebar.collapsed .nav-chev,
.sidebar.collapsed .sidebar-nav a span:not(.icon) {
  display: none;
}
.sidebar.collapsed .nav-items { grid-template-rows: 1fr; }
.sidebar.collapsed .nav-items-inner { overflow: visible; }

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 16px;
  margin: 1px 2px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  transition: all 0.15s ease;
  position: relative;
}

.sidebar-nav a:hover {
  background: var(--sidebar-hover-bg);
  color: #e2e8f0;
}

.sidebar-nav a.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active);
  border-left-color: var(--sidebar-active);
  font-weight: 600;
}

.sidebar-nav a .icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* Icons are inline SVG (includes/icons.php), not emoji: they inherit the
   nav's colour, so an active item's glyph highlights with its label. */
.sidebar-nav .icon .ico,
.nav-toggle .icon .ico { display: block; margin: 0 auto; opacity: .85; }
.sidebar-nav a.active .icon .ico,
.sidebar-nav a:hover .icon .ico,
.nav-group.is-open .nav-toggle .icon .ico { opacity: 1; }

/* An analytics screen is a different kind of destination from a data
   entry screen — the badge says so without another icon. */
.sidebar-nav a.is-analytics { color: #cfe0f7; }
.nav-badge {
  margin-left: auto;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sidebar-active);
  background: var(--sidebar-active-bg);
  border: 1px solid rgba(125,179,240,0.28);
  border-radius: 4px;
  padding: 1px 5px;
  flex-shrink: 0;
}
.sidebar-nav a.active .nav-badge { background: rgba(255,255,255,0.14); }
.sidebar.collapsed .nav-badge { display: none; }

.nav-analytics-dot { display: flex; align-items: center; color: var(--sidebar-active); opacity: .75; }
.nav-group.is-open .nav-analytics-dot { opacity: 1; }

.logout-btn {
  color: #f87171 !important;
  margin-top: 4px;
}
.logout-btn:hover { background: rgba(239,68,68,0.08) !important; }

/* ── Main content ────────────────────────────────────────── */
.main-content {
  flex: 1;
  /* Flex items default to min-width:auto, so a wide table or chip row
     stretched the whole page sideways on phones instead of scrolling
     inside its own container. */
  min-width: 0;
  margin-left: var(--sidebar-width);
  transition: margin-left 0.25s cubic-bezier(0.4,0,0.2,1);
  min-height: 100vh;
  background: var(--canvas);
}

.main-content.expanded { margin-left: 60px; }

/* Top bar */
.top-bar {
  background: var(--surface);
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.menu-toggle {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s;
}

.menu-toggle:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--surface-2);
}

.top-bar h1 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.alert-icon {
  position: relative;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 18px;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}

.alert-icon:hover { background: var(--surface-2); color: var(--text-primary); }

.alert-icon .badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--danger);
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--surface);
}

.current-date {
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
}

/* Content wrapper */
.content-wrapper { padding: 24px; }

/* ── Stat cards ─────────────────────────────────────────── */
.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: box-shadow 0.15s, transform 0.15s;
  position: relative;
  overflow: hidden;
}

.card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--amber), transparent);
  opacity: 0;
  transition: opacity 0.2s;
}

.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card:hover::after { opacity: 1; }

.card-icon { font-size: 26px; margin-bottom: 12px; }

.card-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 5px;
}

.card-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.card-trend {
  font-size: 12px;
  margin-top: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.card-trend.positive { color: var(--success); }
.card-trend.negative { color: var(--danger); }
.card-trend.warning  { color: var(--warning); }

/* ── Section panels ─────────────────────────────────────── */
.table-container,
.form-container,
.chart-container {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}

.table-container { overflow-x: auto; }

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.table-header h2 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.form-container { padding: 20px; }
.chart-container { padding: 20px; }

/* ── Tables ──────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }

table th,
table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}

table th {
  background: var(--surface-2);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  white-space: nowrap;
}

table td { color: var(--text-secondary); }
table td:first-child { color: var(--text-primary); font-weight: 500; }
table tr:last-child td { border-bottom: none; }
table tbody tr:hover { background: var(--surface-2); }

/* ── Badges / status chips ──────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
}

.badge-success { background: var(--success-bg); color: var(--success-text); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger-text);  }
.badge-warning { background: var(--warning-bg); color: var(--warning-text); }
.badge-info    { background: var(--info-bg);    color: var(--info-text);    }
.badge-primary { background: #ede9fe; color: #5b21b6; }
.badge-secondary { background: #eef2f7; color: #475569; }

/* ── Form internals ─────────────────────────────────────── */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* ── Modal ───────────────────────────────────────────────── */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(4px);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal.active { display: flex; }

.modal-content {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 28px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
  animation: modalIn 0.2s ease-out;
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.modal-close {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 16px;
  transition: all 0.15s;
}

.modal-close:hover { border-color: var(--danger); color: var(--danger); }

.modal-body { margin-bottom: 20px; }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Wider modals — for forms that carry a multi-column line-item table */
.modal-content.modal-lg { max-width: 1060px; }
.modal-content.modal-md { max-width: 800px; }

/* ── Line-item editor ────────────────────────────────────
   Used by the requisition / order line grids. The column
   template lives on .line-grid so the header strip and every
   row stay locked to the same widths.                       */
.line-items { counter-reset: lineno; }

.line-grid {
  display: grid;
  grid-template-columns:
      minmax(210px, 3fr)    /* item        */
      minmax(72px,  0.7fr)  /* qty         */
      minmax(104px, 1fr)    /* unit cost   */
      minmax(150px, 1.7fr)  /* supplier    */
      minmax(165px, 2fr)    /* client PO   */
      42px;                 /* remove      */
  gap: 10px;
  align-items: center;
}

.line-head {
  padding: 0 2px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}

.line-head span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  white-space: nowrap;
}

.line-row { counter-increment: lineno; margin-bottom: 10px; }

/* Grid cells must be allowed to shrink, otherwise a long <option>
   forces the select wider than its track and squeezes its neighbours. */
.line-field { min-width: 0; }

.line-field select,
.line-field input {
  width: 100%;
  min-width: 0;
  padding: 9px 11px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text-primary);
  background-color: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  text-overflow: ellipsis;
}

.line-field select:focus,
.line-field input:focus {
  border-color: var(--amber-dark);
  box-shadow: 0 0 0 3px rgba(47,111,191,0.28);
}

.line-field input[type="number"] { text-align: right; }

/* Compact square delete control so it never steals width from the fields */
.line-remove {
  width: 42px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  border-radius: var(--radius-sm);
}

.line-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.line-total {
  font-size: 13.5px;
  color: var(--text-secondary);
}
.line-total strong {
  font-size: 15px;
  color: var(--text-primary);
  margin-left: 6px;
}

/* Stack the grid into labelled cards once the columns stop fitting */
@media (max-width: 900px) {
  .line-head { display: none; }

  .line-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
  }

  .line-row {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    margin-bottom: 12px;
  }

  .line-row::before {
    content: 'Item ' counter(lineno);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
  }

  .line-field::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
  }

  .line-field input[type="number"] { text-align: left; }

  .line-remove { width: 100%; font-size: 15px; }
  .line-remove::after {
    content: 'Remove line';
    font-size: 13px;
    font-weight: 600;
    margin-left: 7px;
  }
}

/* ── Pagination ──────────────────────────────────────────── */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

.pagination a,
.pagination span {
  padding: 6px 11px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
}

.pagination a:hover {
  border-color: var(--amber);
  color: var(--amber-dark);
  background: var(--amber-light);
}

.pagination .active {
  background: var(--amber);
  color: #ffffff;
  border-color: var(--amber);
  font-weight: 700;
}

/* ── Search / filter bar ─────────────────────────────────── */
.search-filter {
  display: flex;
  gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  background: var(--surface-2);
}

.search-filter input,
.search-filter select {
  padding: 8px 12px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text-primary);
  background-color: var(--surface);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.search-filter input { flex: 1; min-width: 180px; }

.search-filter input:focus,
.search-filter select:focus {
  border-color: var(--amber-dark);
  box-shadow: 0 0 0 4px rgba(47,111,191,0.35);
}

/* ── Action buttons (inline) ─────────────────────────────── */
.action-btn {
  padding: 4px 9px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  transition: all 0.15s;
  margin-right: 4px;
}

.action-btn-edit   { background: var(--info-bg);    color: var(--info-text);    border-color: #bfdbfe; }
.action-btn-delete { background: var(--danger-bg);  color: var(--danger-text);  border-color: #fecaca; }
.action-btn-view   { background: var(--success-bg); color: var(--success-text); border-color: #a7f3d0; }

.action-btn:hover { filter: brightness(0.95); transform: translateY(-1px); }

/* ── Tabs ────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1.5px solid var(--border);
  padding: 0 20px;
  background: var(--surface-2);
}

.tab-link {
  padding: 12px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  transition: all 0.15s;
  margin-bottom: -1.5px;
  font-family: inherit;
}

.tab-link:hover { color: var(--text-primary); }

.tab-link.active {
  color: var(--amber-dark);
  border-bottom-color: var(--amber);
}

.tab-content { display: none; padding: 20px; }
.tab-content.active { display: block; }

/* ── Progress bar ────────────────────────────────────────── */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--amber), var(--success));
  border-radius: 4px;
  transition: width 0.4s ease;
}

/* ── Spinner ─────────────────────────────────────────────── */
.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Empty state ─────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 52px 24px;
  color: var(--text-muted);
}

.empty-state-icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.7;
}

.empty-state h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.empty-state p { font-size: 13px; }

/* ── Tooltip ─────────────────────────────────────────────── */
.tooltip { position: relative; display: inline-block; }

.tooltip .tooltip-text {
  visibility: hidden;
  width: 130px;
  background: var(--text-primary);
  color: white;
  text-align: center;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  position: absolute;
  z-index: 10;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.2s;
  font-size: 12px;
  font-weight: 500;
  pointer-events: none;
  white-space: nowrap;
}

.tooltip:hover .tooltip-text { visibility: visible; opacity: 1; }

/* ── Page header strip ───────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.page-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.page-header p {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Grid helpers ────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }

/* ── 403 / error pages ───────────────────────────────────── */
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: 40px;
}

.error-code {
  font-size: 80px;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: -4px;
  line-height: 1;
  margin-bottom: 12px;
}

.error-message {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.error-desc {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* ── Small utilities ─────────────────────────────────────── */
.text-muted { color: var(--text-secondary); }

/* ── Drawer scrim (shown behind the off-canvas sidebar) ──── */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 999;            /* directly beneath the sidebar (z-index 1000) */
}
.sidebar-overlay.active { opacity: 1; visibility: visible; }

/* ============================================================
   RESPONSIVE — tablets & phones
   ≤1024px: sidebar becomes an off-canvas drawer (full content width)
   ≤768px : single-column forms/grids, larger touch targets, 16px inputs
   ≤480px : compact top bar and stacked actions for small phones
   ============================================================ */

/* ── Tablet & below: off-canvas drawer ──────────────────── */
@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-width) !important;
    box-shadow: var(--shadow-xl);
  }
  .sidebar.active { transform: translateX(0); }

  /* Clear Android's gesture bar / iOS home indicator so the last menu
     item (Logout) is never half-hidden behind it. */
  .sidebar-nav {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  .main-content,
  .main-content.expanded { margin-left: 0 !important; }

  /* The desktop icon-rail collapse must not apply on touch layouts */
  .sidebar.collapsed { width: var(--sidebar-width) !important; }
  .sidebar.collapsed .sidebar-header h2,
  .sidebar.collapsed .sidebar-header .user-info,
  .sidebar.collapsed .sidebar-header .branch-info,
  .sidebar.collapsed .sidebar-nav a span:not(.icon) { display: revert; }
  .sidebar.collapsed .nav-toggle,
  .sidebar.collapsed .nav-pinned .nav-label,
  .sidebar.collapsed .nav-toggle-text,
  .sidebar.collapsed .nav-count,
  .sidebar.collapsed .nav-chev { display: flex; }
  .sidebar.collapsed .nav-items { grid-template-rows: 0fr; }
  .sidebar.collapsed .nav-group.is-open .nav-items { grid-template-rows: 1fr; }
  .sidebar.collapsed .nav-items-inner { overflow: hidden; }

  body.sidebar-open { overflow: hidden; }

  .content-wrapper { padding: 20px; }

  /* Wide data tables scroll smoothly instead of breaking the layout */
  .table-container { -webkit-overflow-scrolling: touch; }
}

/* ── Tablet portrait & large phones ─────────────────────── */
@media (max-width: 768px) {
  html { font-size: 13.5px; }

  .content-wrapper { padding: 16px; }

  .top-bar { padding: 0 14px; gap: 8px; }
  .top-bar h1 { font-size: 15px; }
  .top-bar-right { gap: 10px; }

  .dashboard-cards { grid-template-columns: 1fr 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }

  .page-header,
  .table-header { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* iOS zooms the page when focusing inputs under 16px — keep them ≥16px */
  .form-group input,
  .form-group select,
  .form-group textarea,
  .search-filter input,
  .search-filter select { font-size: 16px; }

  /* Filters stack full width */
  .search-filter { padding: 12px 14px; }
  .search-filter input,
  .search-filter select { flex: 1 1 100%; min-width: 0; width: 100%; }

  /* Roomier tap targets in the nav drawer */
  .sidebar-nav a { padding: 12px 18px; font-size: 14.5px; }

  /* Buttons and action rows easier to tap; actions stack */
  .btn { padding: 11px 18px; }
  .btn-group { width: 100%; }
  .form-actions { flex-direction: column; }
  .form-actions .btn { width: 100%; justify-content: center; }

  /* Tab strips scroll sideways rather than squashing */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-link { white-space: nowrap; }

  /* Modals sit closer to full screen */
  .modal { padding: 12px; }
  .modal-content { padding: 20px; max-height: 92vh; }

  .pagination { flex-wrap: wrap; }
}

/* ── Small phones ───────────────────────────────────────── */
@media (max-width: 480px) {
  .dashboard-cards { grid-template-columns: 1fr; }

  .content-wrapper { padding: 12px; }

  .current-date { display: none; }   /* reclaim space in the top bar */

  .card { padding: 16px; }
  .card-value { font-size: 24px; }

  table th, table td { padding: 10px 12px; }

  .modal-footer { flex-direction: column-reverse; }
  .modal-footer .btn { width: 100%; justify-content: center; }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ===== Alert bell attention animation (when unread alerts exist) ===== */
.alert-icon .bell-emoji {
  display: inline-flex;
  align-items: center;
  transform-origin: top center;
}
/* The bell is an inline SVG on currentColor, so an unread count tints the
   glyph itself rather than relying on an emoji's own palette. */
.alert-icon.has-alerts { color: var(--danger); }
.menu-toggle .ico { display: block; }

.alert-icon.has-alerts .bell-emoji {
  animation: bellRing 2.5s ease-in-out infinite;
}

.alert-icon.has-alerts .badge {
  animation: badgePulse 1.4s ease-in-out infinite;
}

@keyframes bellRing {
  0%, 35%, 100% { transform: rotate(0); }
  5%  { transform: rotate(15deg); }
  10% { transform: rotate(-13deg); }
  15% { transform: rotate(11deg); }
  20% { transform: rotate(-9deg); }
  25% { transform: rotate(6deg); }
  30% { transform: rotate(-3deg); }
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
  50%      { transform: scale(1.18); box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .alert-icon.has-alerts .bell-emoji,
  .alert-icon.has-alerts .badge {
    animation: none;
  }
}

/* ── Print (Print / Save PDF buttons across finance & report pages) ────
   Without this, window.print() prints the app chrome as-is: the fixed
   sidebar repeats on every page, the top bar and buttons/filters take up
   space, and .main-content keeps its margin-left for the sidebar that no
   longer prints — so the actual records (e.g. the journal entries table)
   can end up squeezed off the page or effectively invisible. This strips
   the on-screen shell down to just the report content. */
@media print {
  .sidebar,
  .sidebar-overlay,
  .top-bar,
  .page-actions,
  .search-filter,
  form.search-filter,
  .pagination,
  .modal,
  .scan-widget,
  .scan-overlay {
    display: none !important;
  }

  html, body {
    background: #fff !important;
  }

  .app-container {
    display: block !important;
    min-height: 0 !important;
  }

  .main-content,
  .main-content.expanded {
    margin-left: 0 !important;
    min-height: 0 !important;
    background: #fff !important;
  }

  .content-wrapper {
    padding: 0 !important;
  }

  .print-only {
    display: block !important;
  }

  /* Cards/tables were styled for screen (shadows, rounded corners,
     horizontal scroll for overflow) — none of that survives paper, and
     overflow-x:auto in particular can clip columns when printed. */
  .table-container,
  .form-container,
  .chart-container,
  .card {
    box-shadow: none !important;
    border: 1px solid #cbd5e1 !important;
    overflow: visible !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .dashboard-cards {
    break-inside: avoid;
  }

  table {
    width: 100% !important;
  }

  thead {
    display: table-header-group;
  }

  table tr {
    break-inside: avoid;
  }
}

/* ── Select chevron clearance ─────────────────────────────────────────
   Every <select> inherits the custom chevron painted by the base rule
   near the top of this file, but the component rules further down
   (.form-group, .search-filter, .line-field) each set their own
   symmetric padding — which dropped the arrow straight on top of the
   last word ("All Projects▼"). This block sits at the end of the
   cascade deliberately, so the chevron's track is reserved whichever
   component the select belongs to. */
select,
.form-group select,
.search-filter select,
.line-field select,
.filter-bar select,
.filters select {
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23667085' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px 7px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* A list box shows its options inline, so a chevron would float over them. */
select[multiple],
select[size]:not([size="1"]) {
  background-image: none;
  padding-right: 13px;
}