@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&family=Playfair+Display:wght@600;700&display=swap");

:root {
  font-family: "DM Sans", "Segoe UI", sans-serif;
  color: #3f3433;
  background: #f7f4ef;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --navy: #451b25;
  --muted: #796d6c;
  --line: #e9e1dc;
  --blue: #941b32;
  --green: #16866a;
  --burgundy: #83152c;
  --burgundy-dark: #681025;
  --surface: #fff;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.cloud-pending .app-shell { display: none; }
.cloud-gate { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; overflow-y: auto; padding: 24px; background: #f7f4ef; }
.cloud-gate[hidden] { display: none; }
.cloud-gate-card { width: min(100%, 420px); padding: 34px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: 0 18px 50px rgba(69,27,37,.12); }
.cloud-gate-logo { display: block; width: 150px; height: auto; margin-bottom: 18px; }
.cloud-gate-eyebrow { margin-bottom: 10px; color: var(--burgundy); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.cloud-gate-card h1 { margin-bottom: 12px; }
.cloud-gate-message, .cloud-gate-details { color: var(--muted); font-size: 13px; line-height: 1.6; }
.cloud-gate-details { margin: 18px 0 0; font-size: 11px; }
.cloud-gate-error { padding: 10px 12px; border-radius: 7px; background: #fff3f1; color: #a43b34; font-size: 12px; line-height: 1.5; }
.cloud-form { display: grid; gap: 9px; margin-top: 22px; }
.cloud-form label { margin-top: 7px; color: var(--navy); font-size: 11px; font-weight: 700; }
.cloud-form input { min-height: 42px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--navy); }
.cloud-form .button { margin-top: 11px; }
.cloud-text-button { justify-self: start; margin-top: 11px; padding: 4px 0; border: 0; background: transparent; color: var(--burgundy); font-size: 11px; font-weight: 600; }
.cloud-text-button:disabled { cursor: wait; opacity: .6; }
.cloud-gate-sign-out { margin-top: 12px; }
.cloud-account { display: flex; align-items: center; gap: 11px; }
.cloud-account[hidden] { display: none; }
#cloud-sync-status { color: var(--muted); font-size: 10px; white-space: nowrap; }
.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 2; display: flex; overflow: hidden; width: 313px;
  flex-direction: column; padding: 24px 16px 18px; background: #800f22;
}
.brand { display: flex; min-height: 130px; align-items: center; justify-content: center; margin: 0 5px 50px; color: white; text-decoration: none; }
.brand-wordmark { display: grid; justify-items: center; line-height: 1; }
.brand-wordmark small { color: #e6c488; font: 600 14px Georgia, serif; }
.brand-wordmark strong { margin: 5px 0 10px; color: #fff; font: 600 62px/.9 "Playfair Display", Georgia, serif; letter-spacing: -5px; }
.brand-wordmark em { color: #e6c488; font: normal 10px "DM Sans", sans-serif; letter-spacing: 3px; }
.brand strong, .brand small { display: block; }
.nav-label { margin: 0 1px 8px; padding: 0 12px 27px; border-top: 1px solid rgba(255,255,255,.18); color: #edc776; font-size: 9px; font-weight: 700; letter-spacing: 1.4px; }
#navigation { display: grid; min-height: 0; flex: 1; align-content: start; overflow-y: auto; gap: 5px; }
.nav-item { display: flex; align-items: center; gap: 13px; min-height: 64px; padding: 0 13px; border: 0; border-left: 3px solid transparent; border-radius: 11px; background: transparent; color: rgba(255,255,255,.88); text-align: left; font-size: 16px; font-weight: 500; }
.nav-item:hover { background: rgba(255,255,255,.1); color: white; }
.nav-item.active { border-left-color: #edc776; background: rgba(255,255,255,.13); color: white; }
.nav-icon { width: 24px; color: rgba(255,255,255,.88); text-align: center; font-size: 21px; }
.nav-item.active .nav-icon { color: #ffda91; }
.sidebar-note { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 14px 7px 2px; border-top: 1px solid rgba(255,255,255,.18); color: white; }
.sidebar-note strong, .sidebar-note small { display: block; }
.sidebar-note strong { font-size: 11px; }
.sidebar-note small { margin-top: 3px; color: rgba(255,255,255,.7); font-size: 9px; }
.sidebar-avatar { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #e6c488; color: #6f1b29; font-size: 13px; font-weight: 800; }
.status-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #27ad81; }
.main-area { min-height: 100vh; margin-left: 313px; }
.topbar { position: sticky; top: 0; z-index: 1; display: flex; min-height: 62px; align-items: center; justify-content: space-between; padding: 0 38px; border-bottom: 1px solid var(--line); background: rgba(250,248,245,.96); backdrop-filter: blur(8px); }
.breadcrumb { color: #9aa5b5; font-size: 11px; }
.breadcrumb span { margin: 0 9px; color: #c0c8d3; }
.breadcrumb strong { color: #536278; font-weight: 600; }
.topbar-right { display: flex; align-items: center; gap: 15px; }
.local-badge { display: flex; align-items: center; gap: 7px; color: #6b788b; font-size: 10px; }
.content { max-width: 1440px; margin: auto; padding: 38px 40px 54px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.eyebrow { margin: 0 0 8px; color: var(--burgundy); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--navy); font-family: Manrope, "Segoe UI", sans-serif; }
h1 { margin-bottom: 7px; font-size: clamp(23px, 2.3vw, 30px); letter-spacing: -.9px; }
.subtitle { margin-bottom: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border: 1px solid transparent; border-radius: 8px; background: var(--burgundy); color: white; font-size: 11px; font-weight: 700; transition: .15s ease; }
.button:hover { background: var(--burgundy-dark); transform: translateY(-1px); }
.button:focus-visible, .nav-item:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #dfb8b9; outline-offset: 2px; }
.button-secondary { border-color: #e7ddd7; background: white; color: #685c5b; }
.button-secondary:hover, .button-quiet:hover { background: #f5f8fc; color: var(--navy); }
.button-quiet { min-height: 32px; padding: 0 10px; border-color: #e9e1dc; background: white; color: #6e6260; }
.button-small { font-size: 10px; }
.button-danger { border-color: #f1d8d8; background: white; color: #bd4c4c; }
.button-danger:hover { background: #fff4f4; }
.button:disabled { cursor: not-allowed; opacity: .5; transform: none; }
.hero { position: relative; overflow: hidden; display: flex; min-height: 172px; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; padding: 28px 32px; border-radius: 14px; background: linear-gradient(112deg, var(--burgundy-dark), #9e1c35); color: white; }
.hero:after { position: absolute; top: -110px; right: 4%; width: 290px; height: 290px; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; box-shadow: 0 0 0 38px rgba(255,255,255,.035), 0 0 0 76px rgba(255,255,255,.025); content: ""; }
.hero-copy { position: relative; z-index: 1; max-width: 570px; }
.hero .eyebrow { color: #e6bd8c; }
.hero h1 { color: white; }
.hero p { max-width: 500px; margin-bottom: 0; color: #d0dff1; font-size: 12px; line-height: 1.7; }
.hero .button { position: relative; z-index: 1; border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.12); }
.hero .button:hover { background: rgba(255,255,255,.2); }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 20px; }
.metric-card, .panel, .table-panel, .empty-state { border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.metric-card { padding: 17px 18px; }
.metric-top { display: flex; align-items: center; justify-content: space-between; color: #7e8ba0; font-size: 10px; }
.metric-icon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; background: #f8ece9; color: var(--burgundy); font-size: 15px; }
.metric-value { margin: 12px 0 2px; color: var(--navy); font: 700 24px Manrope, sans-serif; letter-spacing: -.8px; }
.metric-note { color: #9aa5b5; font-size: 9px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(270px, .75fr); gap: 16px; }
.panel { padding: 20px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-heading h2 { margin-bottom: 0; font-size: 14px; }
.panel-heading p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.quick-links { display: grid; gap: 9px; }
.quick-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid #edf0f5; border-radius: 8px; background: white; text-align: left; }
.quick-link:hover { border-color: #e6c8c8; background: #fffaf8; }
.quick-link span { color: #665754; font-size: 11px; font-weight: 600; }
.quick-link small { color: #9aa5b5; font-size: 10px; }
.callout { padding: 13px; border-radius: 8px; background: #f7eeea; color: #71615c; font-size: 10px; line-height: 1.7; }
.module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.module-card { display: flex; min-height: 98px; align-items: flex-start; gap: 13px; padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.module-card-icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 9px; background: #f7eae7; color: var(--burgundy); font-size: 17px; }
.module-card h2 { margin: 1px 0 5px; font-size: 12px; }
.module-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.module-status { display: inline-flex; margin-top: 10px; padding: 4px 8px; border-radius: 20px; background: #f3eee9; color: #776963; font-size: 8px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.search-box { display: flex; width: min(100%, 340px); min-height: 37px; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid #e9e1dc; border-radius: 8px; background: white; color: #8a7d78; }
.search-box input { width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--navy); font-size: 11px; }
.search-box input::placeholder { color: #a6afbd; }
.table-panel { overflow: hidden; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th { padding: 11px 14px; background: #f9fafc; color: #8793a4; font-size: 9px; font-weight: 700; text-align: left; text-transform: uppercase; letter-spacing: .6px; }
td { padding: 12px 14px; border-top: 1px solid #edf0f4; color: #536278; font-size: 10px; }
td strong { display: block; color: #283b56; font-size: 10px; font-weight: 700; }
td small { display: block; margin-top: 3px; color: #98a2b1; font-size: 9px; }
.table-actions { display: flex; gap: 6px; }
.table-actions .button { min-height: 27px; padding: 0 9px; font-size: 9px; }
.client-profile-button {
  min-height: 26px; padding: 0 10px; border: 1px solid #eaded8; border-radius: 7px; background: #fff; color: #823648; font-size: 10px; font-weight: 700;
}
.client-profile-button:hover { background: #fff7f7; }
.products-page { display: grid; gap: 20px; }
.products-hero {
  position: relative; display: flex; min-height: 208px; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden; padding: 30px;
  border: 1px solid #8a172b; border-radius: 17px; background: linear-gradient(112deg, #780c20 0%, #94152f 70%, #85182b 100%); color: white;
}
.products-hero::after { position: absolute; top: -105px; right: 16%; width: 290px; height: 290px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 38px rgba(255,255,255,.035), 0 0 0 76px rgba(255,255,255,.025); content: ""; pointer-events: none; }
.products-hero-copy { position: relative; z-index: 1; display: grid; gap: 7px; }
.products-hero-copy em { color: #f0c260; font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: 1.2px; }
.products-hero-copy h2 { margin: 0; color: white; font: 700 34px/1.1 "Playfair Display", Georgia, serif; }
.products-hero-copy p { max-width: 500px; margin: 0; color: rgba(255,255,255,.85); font-size: 12px; line-height: 1.6; }
.products-hero-action { position: relative; z-index: 1; min-width: 185px; min-height: 54px; border-color: rgba(255,255,255,.2); background: rgba(74,0,16,.34); font-size: 12px; }
.products-hero-action:hover { background: rgba(74,0,16,.55); }
.products-catalog { display: grid; gap: 15px; }
.products-catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.products-catalog-toolbar .search-box { min-height: 44px; border-color: #ded8d5; border-radius: 10px; font-size: 13px; }
.products-catalog-toolbar .muted { flex: 0 0 auto; }
.product-category-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 1px 1px 3px; }
.product-category-filter { min-height: 34px; flex: 0 0 auto; padding: 0 13px; border: 1px solid #e7ddd7; border-radius: 18px; background: white; color: #756764; font-size: 10px; font-weight: 600; }
.product-category-filter:hover, .product-category-filter.active { border-color: #83152c; background: #83152c; color: white; }
.product-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 14px; }
.product-card { display: flex; min-width: 0; flex-direction: column; padding: 17px; border: 1px solid #eae0dc; border-radius: 12px; background: white; }
.product-card-category { display: flex; align-items: center; gap: 7px; color: #a67d3e; }
.product-card-category span { font-size: 14px; }
.product-card-category em { overflow: hidden; color: #916d39; font-size: 9px; font-style: normal; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.product-card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: 13px 0; }
.product-card-title h2 { overflow-wrap: anywhere; margin: 0 0 4px; color: #322a29; font-size: 15px; }
.product-card-title > div > span { color: #938784; font-size: 9px; }
.product-stock-badge { flex: 0 0 auto; padding: 5px 8px; border-radius: 12px; background: #eaf4ef; color: #2f745b; font-size: 8px; font-weight: 700; }
.product-stock-badge.low { background: #fff1e4; color: #a46423; }
.product-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 13px; margin: 0 0 13px; }
.product-detail-grid > div { min-width: 0; }
.product-detail-grid dt { margin: 0 0 3px; color: #9b8d88; font-size: 8px; font-weight: 700; letter-spacing: .35px; text-transform: uppercase; }
.product-detail-grid dd { overflow-wrap: anywhere; margin: 0; color: #514542; font-size: 10px; line-height: 1.4; }
.product-box-price { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding: 11px 12px; border-radius: 8px; background: #f8f3f0; }
.product-box-price span { color: #8a7770; font-size: 8px; font-weight: 800; letter-spacing: .35px; }
.product-box-price strong { flex: 0 0 auto; color: #83152c; font-size: 15px; }
.product-card-actions { display: flex; justify-content: flex-end; margin-top: 11px; }
.product-card-actions .table-actions .button { min-height: 31px; padding: 0 10px; font-size: 9px; }
.product-empty { display: grid; min-height: 150px; align-content: center; justify-items: center; gap: 7px; padding: 24px; border: 1px dashed #dfd2cb; border-radius: 12px; background: rgba(255,255,255,.7); text-align: center; }
.product-empty strong { color: #544441; font-size: 13px; }
.product-empty span { color: #8d817d; font-size: 10px; }
.sellers-page { display: grid; gap: 20px; }
.sellers-hero {
  position: relative; display: flex; min-height: 190px; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden; padding: 30px;
  border: 1px solid #8a172b; border-radius: 17px; background: linear-gradient(112deg, #780c20 0%, #94152f 70%, #85182b 100%); color: white;
}
.sellers-hero::after { position: absolute; top: -105px; right: 16%; width: 280px; height: 280px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 38px rgba(255,255,255,.035), 0 0 0 76px rgba(255,255,255,.025); content: ""; pointer-events: none; }
.sellers-hero-copy { position: relative; z-index: 1; display: grid; gap: 7px; }
.sellers-hero-copy em { color: #f0c260; font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: 1.2px; }
.sellers-hero-copy h2 { margin: 0; color: white; font: 700 34px/1.1 "Playfair Display", Georgia, serif; }
.sellers-hero-copy p { max-width: 500px; margin: 0; color: rgba(255,255,255,.85); font-size: 12px; line-height: 1.6; }
.sellers-hero-action { position: relative; z-index: 1; min-width: 185px; min-height: 54px; border-color: rgba(255,255,255,.2); background: rgba(74,0,16,.34); font-size: 12px; }
.sellers-hero-action:hover { background: rgba(74,0,16,.55); }
.sellers-directory { overflow: hidden; border: 1px solid #eae0dc; border-radius: 13px; background: white; }
.sellers-directory-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 12px; }
.sellers-directory-heading h2 { margin: 0; color: #322a29; font-size: 17px; }
.sellers-directory-heading p { margin: 5px 0 0; color: #8c807d; font-size: 10px; }
.sellers-directory > .toolbar { margin: 0; padding: 0 20px 14px; }
.sellers-directory .table-panel { border: 0; border-top: 1px solid #eee6e1; border-radius: 0; }
.warehouse-sales-menu {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 11px;
  border: 1px solid #eee5e1; border-radius: 11px; background: white;
}
.warehouse-sales-menu-card {
  position: relative; display: grid; min-height: 95px; align-content: center; justify-items: center; gap: 7px; padding: 12px;
  border: 1px solid #eee5e1; border-radius: 9px; background: white; color: #493c3a; text-align: center;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.warehouse-sales-menu-card:hover, .warehouse-sales-menu-card:focus-visible { transform: translateY(-1px); border-color: #b78088; background: #fffaf8; }
.warehouse-sales-menu-card > span { color: #83152c; font-size: 17px; line-height: 1; }
.warehouse-sales-menu-card strong { font-size: 10px; line-height: 1.35; }
.warehouse-sales-menu-card small { max-width: 230px; color: #817675; font-size: 9px; line-height: 1.45; }
.warehouse-sales-workspace { display: grid; gap: 12px; }
.warehouse-sales-menu-back {
  display: flex; min-height: 37px; align-items: center; justify-content: center; gap: 6px; padding: 0 12px;
  border: 1px solid #eee5e1; border-radius: 8px; background: white; color: #83152c; font-size: 11px; font-weight: 700;
}
.warehouse-sales-menu-back:hover { border-color: #b78088; background: #fffaf8; }
.warehouse-sales-subpage { display: grid; gap: 16px; padding: 17px 18px; border: 1px solid #eee5e1; border-radius: 11px; background: white; }
.warehouse-sales-subpage-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.warehouse-sales-subpage-heading h2 { margin: 4px 0; color: #342d2d; font-size: 16px; }
.warehouse-sales-subpage-heading p { margin: 0; color: #817675; font-size: 10px; line-height: 1.5; }
.warehouse-sales-table .table-wrap { overflow-x: auto; }
.warehouse-sales-table table { min-width: 590px; }
.warehouse-sales-table td .button { margin-left: 8px; }
.warehouse-sales-table .text-action { text-align: left; }
.warehouse-sales-page { display: grid; gap: 17px; }
.warehouse-sales-hero {
  position: relative; display: flex; min-height: 180px; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden; padding: 28px;
  border: 1px solid #8a172b; border-radius: 17px; background: linear-gradient(112deg, #780c20 0%, #94152f 70%, #85182b 100%); color: white;
}
.warehouse-sales-hero::after { position: absolute; top: -110px; right: 15%; width: 280px; height: 280px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 38px rgba(255,255,255,.035), 0 0 0 76px rgba(255,255,255,.025); content: ""; pointer-events: none; }
.warehouse-sales-hero-copy { position: relative; z-index: 1; display: grid; gap: 7px; }
.warehouse-sales-hero-copy em { color: #f0c260; font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: 1.2px; }
.warehouse-sales-hero-copy h2 { margin: 0; color: white; font: 700 34px/1.1 "Playfair Display", Georgia, serif; }
.warehouse-sales-hero-copy p { max-width: 520px; margin: 0; color: rgba(255,255,255,.85); font-size: 12px; line-height: 1.6; }
.warehouse-sales-hero-action { position: relative; z-index: 1; min-width: 175px; min-height: 52px; border-color: rgba(255,255,255,.2); background: rgba(74,0,16,.34); font-size: 12px; }
.warehouse-sales-hero-action:hover { background: rgba(74,0,16,.55); }
.warehouse-sales-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.warehouse-sales-metrics article { display: grid; gap: 9px; padding: 16px 18px; border: 1px solid #eae0dc; border-radius: 11px; background: white; }
.warehouse-sales-metrics article > span { color: #817471; font-size: 10px; }
.warehouse-sales-metrics article strong { color: #493c3a; font: 700 20px Manrope, sans-serif; }
.warehouse-sales-history { overflow: hidden; border: 1px solid #eae0dc; border-radius: 13px; background: white; }
.warehouse-sales-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 19px 20px 12px; }
.warehouse-sales-history-heading h2 { margin: 0; color: #322a29; font-size: 17px; }
.warehouse-sales-history-heading p { margin: 5px 0 0; color: #8c807d; font-size: 10px; }
.warehouse-sales-history > .toolbar { margin: 0; padding: 0 20px 14px; }
.warehouse-sales-history .table-panel { border: 0; border-top: 1px solid #eee6e1; border-radius: 0; }
.warehouse-sales-history td .table-actions { margin-top: 7px; }
.warehouse-sales-history td .table-actions .button { min-height: 28px; }
.warehouse-sale-modal, .warehouse-sale-detail { width: min(100%, 920px); }
.warehouse-sale-modal .modal-header, .warehouse-sale-detail .modal-header { align-items: center; }
.warehouse-sale-modal .modal-header .eyebrow, .warehouse-sale-detail .modal-header .eyebrow { margin: 0 0 4px; }
.warehouse-sale-modal .modal-header h2, .warehouse-sale-detail .modal-header h2 { color: #3d3030; font: 600 18px "DM Sans", sans-serif; }
.warehouse-sale-modal .modal-body, .warehouse-sale-detail .modal-body { max-height: calc(90vh - 132px); }
.warehouse-sale-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.warehouse-sale-fields .field span, .warehouse-sale-line .field span, .warehouse-sale-notes span { color: #726d6a; font-size: 9px; font-weight: 700; letter-spacing: .4px; }
.warehouse-sale-fields .field input, .warehouse-sale-fields .field select, .warehouse-sale-line .field input, .warehouse-sale-line .field select { min-height: 39px; color: #49363a; }
.warehouse-sale-products-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 12px; }
.warehouse-sale-products-heading h3 { margin: 0 0 4px; color: #3b3030; font-size: 14px; }
.warehouse-sale-products-heading p { margin: 0; color: #8c807d; font-size: 9px; line-height: 1.5; }
.warehouse-sale-lines { display: grid; gap: 10px; }
.warehouse-sale-line { display: grid; grid-template-columns: minmax(150px, 1.4fr) repeat(5, minmax(82px, .7fr)) minmax(90px, .8fr) auto; align-items: end; gap: 9px; padding: 12px; border: 1px solid #eee6e1; border-radius: 9px; background: #fcfaf9; }
.warehouse-sale-line-total { display: grid; gap: 4px; min-width: 95px; }
.warehouse-sale-line-total span { color: #8c807d; font-size: 8px; }
.warehouse-sale-line-total strong { color: #493c3a; font-size: 11px; }
.warehouse-sale-line-total small { color: #8c807d; font-size: 8px; line-height: 1.4; }
.warehouse-sale-line-remove { min-height: 34px; padding: 0 9px; font-size: 9px; }
.warehouse-sale-notes { margin-top: 15px; }
.warehouse-sale-summary { display: flex; justify-content: flex-end; gap: 24px; margin-top: 16px; padding: 14px; border-radius: 8px; background: #f8f3f0; }
.warehouse-sale-summary > span { display: grid; gap: 4px; color: #8a7770; font-size: 9px; text-align: right; }
.warehouse-sale-summary strong { color: #83152c; font-size: 14px; }
.warehouse-sale-detail-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin: 0 0 16px; }
.warehouse-sale-detail-fields > div { padding: 10px; border-radius: 7px; background: #fcfaf9; }
.warehouse-sale-detail-fields dt { margin-bottom: 5px; color: #8c807d; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.warehouse-sale-detail-fields dd { margin: 0; color: #493c3a; font-size: 11px; }
.warehouse-sale-detail-total { display: flex; justify-content: flex-end; gap: 20px; margin-top: 12px; padding: 12px 0; color: #8a7770; font-size: 10px; }
.warehouse-sale-detail-total strong { color: #83152c; font-size: 15px; }
.purchases-page { display: grid; gap: 17px; }
.purchases-hero {
  position: relative; display: flex; min-height: 180px; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden; padding: 28px;
  border: 1px solid #8a172b; border-radius: 17px; background: linear-gradient(112deg, #780c20 0%, #94152f 70%, #85182b 100%); color: white;
}
.purchases-hero::after { position: absolute; top: -110px; right: 15%; width: 280px; height: 280px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 38px rgba(255,255,255,.035), 0 0 0 76px rgba(255,255,255,.025); content: ""; pointer-events: none; }
.purchases-hero-copy { position: relative; z-index: 1; display: grid; gap: 7px; }
.purchases-hero-copy em { color: #f0c260; font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: 1.2px; }
.purchases-hero-copy h2 { margin: 0; color: white; font: 700 34px/1.1 "Playfair Display", Georgia, serif; }
.purchases-hero-copy p { max-width: 540px; margin: 0; color: rgba(255,255,255,.85); font-size: 12px; line-height: 1.6; }
.purchases-hero-actions { position: relative; z-index: 1; display: grid; min-width: 235px; gap: 9px; }
.purchases-hero-action { min-height: 45px; border-color: rgba(255,255,255,.2); background: rgba(74,0,16,.34); font-size: 11px; }
.purchases-hero-action:hover { background: rgba(74,0,16,.55); }
.purchases-hero-action-secondary { min-height: 40px; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: white; font-size: 10px; }
.purchases-hero-action-secondary:hover { background: rgba(255,255,255,.22); color: white; }
.purchases-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.purchases-metrics article { display: grid; gap: 9px; padding: 15px 17px; border: 1px solid #eae0dc; border-radius: 11px; background: white; }
.purchases-metrics article > span { color: #817471; font-size: 9px; line-height: 1.4; }
.purchases-metrics article strong { color: #493c3a; font: 700 18px Manrope, sans-serif; }
.purchases-history { overflow: hidden; border: 1px solid #eae0dc; border-radius: 13px; background: white; }
.purchases-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 19px 20px 12px; }
.purchases-history-heading h2 { margin: 0; color: #322a29; font-size: 17px; }
.purchases-history-heading p { margin: 5px 0 0; color: #8c807d; font-size: 10px; }
.purchases-history > .toolbar { margin: 0; padding: 0 20px 14px; }
.purchases-history .table-panel { border: 0; border-top: 1px solid #eee6e1; border-radius: 0; }
.purchases-history td .table-actions { margin-top: 7px; }
.purchases-history td .table-actions .button { min-height: 28px; }
.purchase-modal, .purchase-detail-modal { width: min(100%, 960px); }
.purchase-modal .modal-header, .purchase-detail-modal .modal-header { align-items: center; }
.purchase-modal .modal-header .eyebrow, .purchase-detail-modal .modal-header .eyebrow { margin: 0 0 4px; }
.purchase-modal .modal-header h2, .purchase-detail-modal .modal-header h2 { color: #3d3030; font: 600 18px "DM Sans", sans-serif; }
.purchase-modal .modal-body, .purchase-detail-modal .modal-body { max-height: calc(90vh - 132px); }
.purchase-source-field { max-width: 420px; margin-bottom: 12px; }
.purchase-header-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.purchase-description-field { grid-column: span 2; }
.purchase-attachment-field small { color: #8c807d; font-size: 8px; line-height: 1.45; }
.purchase-subtotal-field { max-width: 300px; margin-top: 13px; }
.purchase-tax-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; padding: 13px; border-radius: 8px; background: #fcfaf9; }
.purchase-tax-fields .field input, .purchase-header-fields .field input, .purchase-header-fields .field select,
.purchase-source-field select, .purchase-subtotal-field input, .purchase-payment-fields select, .purchase-payment-fields input,
.purchase-expense-section input { min-height: 39px; }
.purchase-lines-section { margin-top: 20px; }
.purchase-lines-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.purchase-lines-heading h3 { margin: 0 0 4px; color: #3b3030; font-size: 14px; }
.purchase-lines-heading p { margin: 0; color: #8c807d; font-size: 9px; line-height: 1.5; }
.purchase-lines { display: grid; gap: 9px; }
.purchase-line { display: grid; grid-template-columns: minmax(200px, 1.5fr) minmax(125px, .8fr) minmax(160px, 1fr) minmax(110px, .8fr) auto; align-items: end; gap: 9px; padding: 12px; border: 1px solid #eee6e1; border-radius: 9px; background: #fcfaf9; }
.purchase-line .field > span, .purchase-tax-fields .field > span, .purchase-header-fields .field > span,
.purchase-source-field > span, .purchase-subtotal-field > span, .purchase-payment-fields .field > span,
.purchase-expense-section .field > span { color: #726d6a; font-size: 9px; font-weight: 700; letter-spacing: .35px; }
.purchase-line .field select, .purchase-line .field input { min-height: 38px; color: #49363a; font-size: 10px; }
.purchase-line-total { display: grid; gap: 5px; min-width: 95px; }
.purchase-line-total span { color: #8c807d; font-size: 8px; }
.purchase-line-total strong { color: #493c3a; font-size: 11px; }
.purchase-line-remove { min-height: 34px; padding: 0 9px; font-size: 9px; }
.purchase-subtotal { display: flex; justify-content: flex-end; gap: 12px; margin-top: 10px; padding: 10px; color: #8a7770; font-size: 9px; }
.purchase-subtotal strong { color: #493c3a; font-size: 12px; }
.purchase-expense-section { margin-top: 20px; }
.purchase-expense-section .field { max-width: 420px; }
.purchase-payment-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.purchase-summary { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin-top: 15px; padding: 13px; border-radius: 8px; background: #f8f3f0; }
.purchase-summary > span { display: grid; gap: 5px; color: #8a7770; font-size: 8px; text-align: right; }
.purchase-summary > span strong { color: #493c3a; font-size: 11px; }
.purchase-summary > span input { width: 150px; min-height: 34px; padding: 7px; border: 1px solid #e7ddd7; border-radius: 6px; color: #49363a; font-size: 11px; text-align: right; }
.purchase-summary > strong { color: #83152c; font-size: 15px; }
.purchase-detail-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 15px; }
.purchase-detail-fields > div { padding: 10px; border-radius: 7px; background: #fcfaf9; }
.purchase-detail-fields dt { margin-bottom: 5px; color: #8c807d; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.purchase-detail-fields dd { margin: 0; color: #493c3a; font-size: 10px; overflow-wrap: anywhere; }
.purchase-detail-total { display: flex; justify-content: flex-end; gap: 18px; margin-top: 12px; padding: 12px 0; color: #8a7770; font-size: 9px; }
.purchase-detail-total strong { color: #83152c; font-size: 14px; }
.clients-page { display: grid; gap: 24px; }
.clients-hero {
  position: relative; display: flex; align-items: center; gap: 20px; min-height: 250px; padding: 30px 27px; border: 1px solid #8a172b; border-radius: 17px; background: linear-gradient(112deg, #780c20 0%, #94152f 70%, #85182b 100%); color: white;
}
.clients-hero::after { position: absolute; top: -100px; right: 14%; width: 290px; height: 290px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 38px rgba(255,255,255,.035), 0 0 0 76px rgba(255,255,255,.025); content: ""; pointer-events: none; }
.clients-hero-icon {
  position: relative; z-index: 1; display: grid; width: 52px; height: 52px; flex: 0 0 auto; place-items: center; border-radius: 14px; background: rgba(255,255,255,.12); color: #f5d387; font-size: 24px;
}
.clients-hero-icon svg { width: 25px; height: 25px; }
.clients-hero-copy { position: relative; z-index: 1; display: grid; flex: 1; gap: 6px; }
.clients-hero-copy em { color: #f0c260; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; }
.clients-hero-copy h2 { margin: 0; color: white; font: 700 36px/1.1 "Playfair Display", Georgia, serif; }
.clients-hero-copy p { margin: 0; max-width: 500px; color: rgba(255,255,255,.85); font-size: 12px; line-height: 1.5; }
.clients-hero-action { position: relative; z-index: 1; min-width: 192px; min-height: 60px; border-radius: 10px; background: rgba(74,0,16,.34); font-size: 14px; }
.clients-hero-action:hover { background: rgba(74,0,16,.55); }
.clients-table-panel {
  overflow: hidden; border: 1px solid #eae0dc; border-radius: 13px; background: white;
}
.clients-table-heading {
  display: flex; min-height: 91px; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px;
}
.clients-table-heading h3 { margin: 0; color: #2d2727; font-size: 19px; }
.clients-table-heading p { margin: 5px 0 0; color: #8c807d; font-size: 11px; }
.clients-search {
  display: flex; width: 212px; align-items: center; gap: 8px; min-height: 50px; padding: 0 12px; border: 1px solid #ded8d5; border-radius: 10px; background: #fff; color: #837875; font-size: 13px;
}
.clients-search:focus-within { border-color: #b77b83; box-shadow: 0 0 0 3px rgba(148,27,50,.1); }
.clients-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #392d2d; font-size: 12px; }
.clients-search input::placeholder { color: #898482; }
.clients-table-wrap { overflow-x: auto; }
.clients-table { width: 100%; border-collapse: collapse; }
.clients-table th, .clients-table td { padding: 15px 16px; border-top: 1px solid #eee7e3; font-size: 11px; text-align: left; }
.clients-table th { height: 46px; background: #f8f5f3; color: #858181; font-size: 9px; text-transform: uppercase; letter-spacing: .6px; }
.clients-table th:first-child, .clients-table td:first-child { padding-left: 18px; }
.clients-table td { height: 80px; color: #514949; }
.clients-table td strong { display: block; color: #362e2d; font-size: 13px; }
.clients-table td small { display: block; margin-top: 4px; color: #8a7e7b; font-size: 11px; }
.clients-table tbody tr { transition: background .12s ease; }
.clients-table tbody tr.client-row { cursor: pointer; }
.clients-table tbody tr:hover { background: #fffaf8; }
.clients-table tbody tr:focus-within { background: #fff7f5; }
.clients-table tbody tr.client-row:focus-visible { outline: 2px solid #9a1c35; outline-offset: -2px; }
.clients-empty { height: 72px; color: #8a7e7b; text-align: center !important; }
.client-profile { display: grid; gap: 16px; }
.client-profile-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.client-back-button { border: 0; background: transparent; color: #7b1e2d; font-size: 11px; font-weight: 700; }
.client-profile-actions { display: flex; justify-content: flex-end; }
.client-profile-card {
  padding: 22px 24px; border: 1px solid #eae0dc; border-radius: 12px; background: white;
}
.client-editor-card { overflow: hidden; border: 1px solid #eae0dc; border-radius: 13px; background: white; box-shadow: 0 8px 24px rgba(55, 32, 30, .05); }
.client-editor-header { display: flex; min-height: 66px; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 22px; border-bottom: 1px solid #eee7e3; }
.client-editor-header h3 { margin: 0; color: #2d2727; font-size: 19px; }
.client-editor-close { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 8px; background: #f8f5f3; color: #766b68; font-size: 22px; }
.client-editor-close:hover { background: #f1e9e5; }
.client-editor-body { padding: 20px 22px; }
.client-editor-footer { display: flex; justify-content: flex-end; gap: 9px; padding: 13px 22px; border-top: 1px solid #eee7e3; background: #fcfbfa; }
.client-profile-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.client-profile-heading h3 { margin: 0; color: #2d2727; font-size: 28px; }
.client-profile-heading p { margin: 4px 0 0; color: #8a7e7b; font-size: 12px; }
.client-category { display: inline-block; margin-bottom: 6px; color: #8d5443; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.client-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; }
.client-detail { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid #f4ede9; }
.client-detail span { color: #7d7270; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.client-detail strong { color: #2d2727; font-size: 12px; font-weight: 600; }
.client-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.client-section-heading h3 { margin: 0; color: #2d2727; font-size: 16px; }
.client-section-heading span { color: #8a7e7b; font-size: 10px; font-weight: 700; }
.client-location-link { color: #861923; font-size: 12px; font-weight: 700; text-decoration: none; }
.client-location-link:hover { text-decoration: underline; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 20px; background: #edf8f4; color: #278165; font-size: 9px; font-weight: 700; }
.pill-warning { background: #fff6e8; color: #ad7720; }
.pill-neutral { background: #f0f2f5; color: #758195; }
.empty-cell { padding: 34px 16px; color: #98a2b1; text-align: center; }
.table-footer { padding: 12px 14px; border-top: 1px solid #edf0f4; color: #8a96a8; font-size: 10px; }
.stock-low { color: #bd6840; font-weight: 700; }
.modal-backdrop { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; padding: 18px; background: rgba(16, 30, 50, .46); backdrop-filter: blur(3px); }
.modal { overflow: hidden; width: min(100%, 570px); max-height: min(90vh, 800px); border: 1px solid rgba(255,255,255,.65); border-radius: 13px; background: white; box-shadow: 0 20px 65px rgba(15,35,65,.2); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 21px; border-bottom: 1px solid var(--line); }
.modal-header h2 { margin: 0; font-size: 15px; }
.modal-body { overflow-y: auto; max-height: calc(90vh - 134px); padding: 19px 21px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.field { display: grid; align-content: start; gap: 6px; }
.field-full { grid-column: 1 / -1; }
.field label { color: #65748a; font-size: 10px; font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; min-height: 37px; padding: 8px 10px; border: 1px solid #e7ddd7; border-radius: 7px; background: white; color: #49363a; font-size: 11px; }
.field textarea { min-height: 68px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #a8b1be; }
.form-hint { margin: 14px 0 0; color: #8b97a8; font-size: 9px; line-height: 1.6; }
.client-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px 18px; }
.client-form-grid .field label { color: #726d6a; font-size: 9px; font-weight: 600; text-transform: uppercase; }
.client-form-grid .field input, .client-form-grid .field select { min-height: 43px; font-size: 12px; }
.client-form-notice { margin: 0 0 18px; padding: 12px 14px; border-radius: 8px; background: #edf7f0; color: #397354; font-size: 12px; line-height: 1.5; }
.client-form-notice strong { font-weight: 700; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 13px 21px; border-top: 1px solid var(--line); background: #fcfcfd; }
.toast { position: fixed; right: 22px; bottom: 20px; z-index: 8; max-width: min(360px, calc(100vw - 40px)); padding: 12px 16px; border-radius: 9px; background: #203752; color: white; box-shadow: 0 8px 25px rgba(16,35,58,.2); font-size: 11px; animation: toast-in .18s ease-out; }
.toast.error { background: #a94747; }
.muted { color: var(--muted); }
.module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.module-card { display: flex; min-height: 98px; align-items: flex-start; gap: 13px; padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.module-card-icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 9px; background: #f7eae7; color: var(--burgundy); font-size: 17px; }
.module-card h2 { margin: 1px 0 5px; font-size: 12px; }
.module-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.module-status { display: inline-flex; margin-top: 10px; padding: 4px 8px; border-radius: 20px; background: #f3eee9; color: #776963; font-size: 8px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.backup-label { display: inline-flex; align-items: center; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 900px) {
  .sidebar { width: 210px; }
  .main-area { margin-left: 210px; }
  .topbar { padding: 0 23px; }
  .content { padding: 27px 23px 40px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module-grid { grid-template-columns: 1fr; }
}
@media (min-width: 901px) and (max-width: 1000px) {
  .clients-page { width: calc(100% - 19px); }
}
@media (max-width: 640px) {
  .sidebar { position: sticky; inset: 0 0 auto; width: auto; height: auto; padding: 9px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { min-height: 40px; justify-content: flex-start; margin: 0 2px 10px; }
  .brand-wordmark { display: flex; align-items: center; gap: 5px; }
  .brand-wordmark small { color: #e6c488; font: 600 8px Georgia, serif; }
  .brand-wordmark strong { margin: 0; font-size: 26px; letter-spacing: -2px; }
  .brand-wordmark em { display: none; }
  .nav-label, .sidebar-note { display: none; }
  .nav-group-label { display: none; }
  .sidebar { overflow: visible; }
  #navigation { display: flex; overflow-x: auto; gap: 4px; }
  .nav-item { min-height: 35px; flex: 0 0 auto; gap: 6px; padding: 0 10px; font-size: 10px; }
  .nav-icon { width: auto; font-size: 14px; }
  .nav-item { color: rgba(255,255,255,.88); }
  .nav-item.active { background: rgba(255,255,255,.13); color: white; }
  .main-area { margin-left: 0; }
  .topbar { position: static; min-height: 47px; padding: 0 15px; }
  .breadcrumb { font-size: 10px; }
  .local-badge { display: none; }
  .content { padding: 22px 15px 35px; }
  .page-heading { align-items: flex-start; }
  .hero { min-height: 190px; align-items: flex-start; flex-direction: column; padding: 22px; }
  .hero .button { align-self: flex-start; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .search-box { width: 100%; }
  .clients-hero { min-height: 185px; flex-wrap: wrap; padding: 22px; }
  .clients-hero-copy { flex-basis: calc(100% - 75px); }
  .clients-hero-copy h2 { font-size: 29px; }
  .clients-hero-action { margin-left: 70px; }
  .clients-table-heading { align-items: stretch; flex-direction: column; }
  .clients-search { width: 100%; }
  .client-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .metric-grid { gap: 9px; }
  .metric-card { padding: 13px; }
  .metric-value { font-size: 21px; }
  .form-grid { grid-template-columns: 1fr; }
  .field-full { grid-column: auto; }
  .page-heading .button { padding: 0 10px; font-size: 10px; }
  .client-detail-grid, .client-form-grid { grid-template-columns: 1fr; }
  .clients-hero-action { margin-left: 0; }
  .client-profile-card { padding: 18px 15px; }
}
@media (max-width: 520px) {
  .module-grid { grid-template-columns: 1fr; }
}

.sidebar { width: 313px; }
.main-area { margin-left: 313px; }
.topbar {
  min-height: 102px;
  justify-content: flex-start;
  gap: 20px;
  padding: 0 40px;
  background: #fff;
}
.menu-toggle {
  display: none;
  width: 34px;
  height: 39px;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #634f50;
  font-size: 19px;
}
.dashboard-title { display: grid; gap: 2px; }
.dashboard-title > span { color: #8a7d7d; font-size: 10px; }
.dashboard-title h1 { margin: 0; color: #352c2d; font: 600 25px "DM Sans", sans-serif; letter-spacing: -.5px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.topbar-actions #backup-button { display: none; }
.topbar-plan { min-height: 44px; padding: 0 15px; font-size: 14px; }
.notification-button { position: relative; display: grid; width: 52px; height: 58px; place-items: center; border: 0; background: #fff4d6; color: #79521b; }
.notification-button svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notification-button i { position: absolute; top: 8px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: #a12635; }
.notification-button:focus-visible { outline: 3px solid #e7bd6b; outline-offset: 2px; }
.content.dashboard-content { max-width: none; padding: 30px 32px 54px; }
.dashboard-page { color: #332d2d; }
.welcome {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  margin-bottom: 20px;
  padding: 29px 38px;
  border-radius: 17px;
  background:
    radial-gradient(circle at 88% 15%, rgba(241, 186, 104, .26), transparent 28%),
    radial-gradient(circle at 100% 110%, rgba(234, 126, 92, .22), transparent 36%),
    linear-gradient(112deg, #64101f, #9c2333 76%, #791827);
  color: #fff;
}
.welcome::after {
  position: absolute;
  top: -100px;
  right: 8%;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  box-shadow: 0 0 0 35px rgba(255, 255, 255, .035), 0 0 0 72px rgba(255, 255, 255, .025);
  content: "";
}
.welcome > * { position: relative; z-index: 1; }
.welcome > em { color: #f0c260; font-size: 11px; font-style: normal; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.welcome h2 { margin: 8px 0 7px; color: #fff; font: 700 34px/1.2 "Playfair Display", Georgia, serif; }
.welcome p { margin: 0; color: rgba(255, 255, 255, .88); font-size: 12px; }
.welcome-actions { display: flex; gap: 9px; margin-top: 17px; }
.welcome-action {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 7px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}
.welcome-action:hover { background: rgba(255, 255, 255, .24); }
.welcome-action-secondary { background: rgba(42, 0, 8, .16); }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.metric {
  display: flex;
  min-width: 0;
  min-height: 86px;
  align-items: center;
  gap: 13px;
  padding: 17px;
  border: 1px solid #eee5e1;
  border-radius: 11px;
  background: #fff;
}
.dashboard-metric-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 11px;
  background: #f7e9e8;
  color: #861923;
  font-size: 19px;
}
.dashboard-metric-copy { display: grid; gap: 2px; min-width: 0; }
.dashboard-metric-copy strong { color: #342d2d; font: 700 20px "DM Sans", sans-serif; }
.dashboard-metric-copy > span { color: #786e6d; font-size: 11px; }
.dashboard-grid { grid-template-columns: minmax(0, 1.106fr) minmax(0, 1fr); gap: 18px; }
.dashboard-page .panel { min-width: 0; min-height: 389px; padding: 20px; border-color: #eee5e1; border-radius: 11px; }
.dashboard-page .panel-heading { margin-bottom: 11px; }
.dashboard-page .panel-heading h2 { color: #342d2d; font: 600 19px "DM Sans", sans-serif; }
.panel-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  border: 0;
  background: transparent;
  color: #8b2633;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.panel-link:hover { color: #5f1020; }
.route-list { display: grid; }
.route-row {
  display: flex;
  min-height: 78px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #f0e9e5;
}
.route-row:last-child { border-bottom: 0; }
.route-row-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  background: #f8eeeb;
  color: #8a1b2b;
}
.route-row-copy { display: grid; min-width: 0; gap: 4px; }
.route-row-copy strong { overflow: hidden; color: #372f30; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.route-row-copy strong small { margin-left: 5px; color: #877c7a; font-size: 11px; font-weight: 500; }
.route-row-copy > span { overflow: hidden; color: #887e7b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.route-status { margin-left: auto; color: #8c6b30; font-size: 10px; font-style: normal; white-space: nowrap; }
.dashboard-empty { margin: 0; padding: 24px 5px; color: #8b817f; font-size: 12px; }
.home-mode { min-width: 320px; background: #5e101b; }
.home-mode .sidebar, .home-mode .main-area > .topbar { display: none; }
.home-mode .main-area { width: 100%; margin: 0; }
.home-mode .content { max-width: none; padding: 0; }
.home-hub {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding: 26px clamp(20px, 4vw, 70px) 34px;
  background: linear-gradient(rgba(43, 2, 8, .1), rgba(28, 0, 5, .38)), url("mika-home-background.jpg") 50% center / cover no-repeat fixed;
  color: #fff;
}
.home-hub-topbar { display: flex; height: 56px; align-items: center; justify-content: space-between; }
.home-brand { display: inline-flex; align-items: center; gap: 11px; color: #fff; font: 700 14px "DM Sans", sans-serif; text-decoration: none; }
.home-brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,255,255,.48); border-radius: 50%; color: #f0c260; font: 700 20px Georgia, serif; }
.home-backup { min-height: 42px; padding: 0 16px; border: 1px solid rgba(255,255,255,.28); border-radius: 12px; background: rgba(53,0,8,.32); color: #fff; font-size: 11px; font-weight: 700; backdrop-filter: blur(12px); transition: .2s; }
.home-backup:hover { background: #fff; color: #681018; transform: translateY(-2px); }
.home-logo-stage { position: relative; display: grid; width: 168px; height: 132px; place-items: center; margin: 0 auto -2px; }
.home-logo-stage span { position: absolute; inset: 20px 7px 4px; border-radius: 50%; background: radial-gradient(circle, rgba(247,202,102,.3), rgba(255,255,255,.05) 48%, transparent 70%); animation: home-logo-halo 3.6s ease-in-out infinite; }
.home-logo-stage img { position: relative; width: 146px; max-height: 108px; object-fit: contain; filter: drop-shadow(0 12px 20px rgba(0,0,0,.35)); animation: home-logo-float 4.2s ease-in-out infinite; }
.home-hub-intro { position: relative; z-index: 1; max-width: 760px; margin: 12px auto 28px; text-align: center; }
.home-hub-intro > em { display: block; margin-bottom: 8px; color: #f0c260; font-size: 11px; font-style: normal; font-weight: 900; letter-spacing: .24em; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.home-hub-intro h1 { margin: 0; color: #fff; font: 700 clamp(34px, 4vw, 56px)/1.04 Georgia, "Times New Roman", serif; text-shadow: 0 3px 18px rgba(30,0,4,.45); }
.home-hub-intro p { margin: 12px 0 0; color: rgba(255,255,255,.88); font-size: 16px; text-shadow: 0 2px 12px rgba(30,0,4,.42); }
.home-module-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.home-module-card {
  display: grid;
  min-width: 0;
  min-height: 126px;
  grid-template-columns: 52px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 15px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.56);
  border-radius: 18px;
  background: rgba(255,255,255,.93);
  color: #241d1e;
  opacity: 0;
  text-align: left;
  animation: home-card-enter .48s ease-out var(--card-delay,.12s) forwards;
  box-shadow: 0 12px 30px rgba(33,0,5,.18);
  backdrop-filter: blur(10px);
  transition: transform .24s, box-shadow .24s, border-color .24s, background .24s;
}
.home-module-card:hover, .home-module-card:focus-visible { transform: translateY(-7px); border-color: #fff; outline: none; background: #fff; box-shadow: 0 22px 44px rgba(32,0,5,.3); }
.home-module-card:focus-visible { outline: 3px solid #f0c260; outline-offset: 3px; }
.home-module-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 14px; background: #f6e9ea; color: #861923; transition: transform .24s, color .24s, background .24s; }
.home-module-card:hover .home-module-icon { transform: rotate(-4deg) scale(1.08); background: #861923; color: #fff; }
.home-module-copy { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
.home-module-copy strong { color: #301f21; font: 700 18px Georgia, "Times New Roman", serif; }
.home-module-copy > span { color: #766c6b; font-size: 12px; line-height: 1.45; }
.home-module-arrow { color: #b89a91; font-size: 27px; text-align: right; transition: color .24s, transform .24s; }
.home-module-card:hover .home-module-arrow { transform: translateX(4px); color: #861923; }
.home-footer { position: relative; z-index: 1; margin-top: 26px; color: rgba(255,255,255,.78); font-size: 11px; letter-spacing: .04em; text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,.35); }
@keyframes home-logo-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-9px) scale(1.015); } }
@keyframes home-logo-halo { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes home-card-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .home-logo-stage img, .home-logo-stage span, .home-module-card { opacity: 1; animation: none; }
  .home-module-card, .home-module-icon, .home-module-arrow { transition: none; }
}

@media (max-width: 900px) {
  .sidebar { display: none; }
  .main-area { margin-left: 0; }
  .topbar { min-height: 70px; padding: 0 15px; }
  .menu-toggle { display: block; }
  .topbar-actions #backup-button { display: none; }
  .content.dashboard-content { padding: 30px 14px 40px; }
  .welcome { min-height: 190px; padding: 23px; }
  .welcome h2 { font-size: 30px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .metric { min-height: 76px; gap: 8px; padding: 12px 10px; }
  .dashboard-metric-icon { width: 36px; height: 36px; }
  .dashboard-metric-copy > span { font-size: 10px; }
  .dashboard-page .panel { padding: 15px; }
  .dashboard-grid > .panel:first-child { min-height: 379px; }
  .dashboard-grid > .panel:last-child { min-height: 198px; }
  .dashboard-grid { grid-template-columns: 1fr; gap: 18px; }
  .home-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.navigation-open::before {
    position: fixed;
    z-index: 2;
    inset: 0;
    background: rgba(28, 15, 16, .42);
    content: "";
  }
  body.navigation-open .sidebar {
    position: fixed;
    z-index: 3;
    inset: 0 auto 0 0;
    display: flex;
    overflow-y: auto;
    width: min(280px, calc(100vw - 48px));
    height: 100vh;
    padding: 20px 15px;
    border-right: 1px solid rgba(255,255,255,.18);
    background: #800f22;
  }
  body.navigation-open .brand { min-height: 130px; margin: 0 5px 30px; }
  body.navigation-open .nav-label, body.navigation-open .sidebar-note { display: flex; }
  body.navigation-open .nav-label { display: block; }
  body.navigation-open #navigation { display: grid; overflow: visible; gap: 5px; }
  body.navigation-open .nav-item { min-height: 39px; gap: 12px; padding: 0 12px; font-size: 12px; }
}
@media (max-width: 640px) {
  .dashboard-title h1 { font-size: 23px; }
  .topbar-plan { min-height: 44px; padding: 0 10px; font-size: 12px; }
  .welcome { min-height: 190px; }
  .welcome-actions { gap: 7px; }
  .welcome-action { min-height: 32px; gap: 6px; padding: 0 9px; font-size: 10px; }
  .home-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-hub { padding: 18px 16px 28px; }
  .home-brand img { width: 80px; }
  .home-hub-intro { margin-top: 4px; }
  .home-logo-stage { width: 140px; height: 112px; }
  .home-logo-stage img { width: 124px; }
  .home-hub-intro h1 { font-size: 35px; }
}
@media (max-width: 520px) {
  .home-module-grid { grid-template-columns: 1fr; }
  .home-module-card { min-height: 110px; }
}
@media (min-width: 901px) {
  .home-hub { padding: 26px clamp(20px, 4vw, 70px) 34px; }
  .home-module-grid { margin-top: 27px; }
}

.planner-page { max-width: 1100px; margin: 0 auto; color: #352d2d; }
.planning-mode .topbar-plan { display: none; }
.content.planner-content { max-width: none; padding: 30px 32px 54px; }
.planner-hero {
  display: flex;
  min-height: 140px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  padding: 24px 30px;
  border: 1px solid #f0e3dc;
  border-radius: 13px;
  background: linear-gradient(120deg, #fff, #fcf6f1);
}
.planner-hero em { color: #8a1b2b; font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: 1.2px; }
.planner-hero h2 { margin: 7px 0 5px; color: #3c3030; font: 700 28px/1.2 "Playfair Display", Georgia, serif; }
.planner-hero p { margin: 0; color: #7e7270; font-size: 12px; line-height: 1.55; }
.planner-draft-badge { align-self: flex-start; flex: 0 0 auto; padding: 8px 11px; border-radius: 20px; background: #f8eee8; color: #856a5d; font-size: 10px; font-weight: 700; }
.planner-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.planner-step {
  display: flex;
  min-width: 0;
  min-height: 53px;
  align-items: center;
  gap: 11px;
  padding: 7px 13px;
  border: 1px solid #ebe2de;
  border-radius: 9px;
  background: #fff;
  color: #877c79;
  text-align: left;
}
.planner-step:disabled { cursor: default; opacity: .7; }
.planner-step.current { border-color: #ba8086; background: #fff8f7; color: #761629; }
.planner-step.complete { border-color: #d7e9df; color: #2c765a; }
.planner-step-number { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #f2eeec; font-size: 12px; font-weight: 700; }
.planner-step.current .planner-step-number { background: #83152c; color: #fff; }
.planner-step.complete .planner-step-number { background: #e7f3ec; }
.planner-step > span:last-child { display: grid; min-width: 0; gap: 2px; }
.planner-step small { font-size: 9px; }
.planner-step strong { overflow: hidden; color: #453a39; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.planner-step.current strong { color: #761629; }
.planner-card { min-height: 602px; padding: 25px 28px 21px; border-color: #eee5e1; border-radius: 12px; }
.planner-card-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 40px; }
.planner-heading-icon { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: 11px; background: #f7e9e8; color: #861923; font-size: 18px; }
.planner-card-heading h3 { margin: 0 0 5px; color: #3b3030; font: 600 18px "DM Sans", sans-serif; }
.planner-card-heading p { margin: 0; color: #897d7a; font-size: 11px; }
.planner-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.planner-field { display: grid; min-width: 0; align-content: start; gap: 12px; }
.planner-field > span { color: #776967; font-size: 9px; font-weight: 800; letter-spacing: .8px; }
.planner-field input, .planner-field select {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 13px;
  border: 1px solid #e6ded9;
  border-radius: 7px;
  background: #fff;
  color: #443b39;
  font-size: 12px;
}
.planner-field input:focus, .planner-field select:focus { border-color: #a96770; outline: 3px solid rgba(169,103,112,.15); }
.planner-field-wide { grid-column: 1 / -1; }
.planner-field > .planner-hint { display: grid; gap: 3px; margin-top: -7px; }
.planner-code { display: flex; height: 44px; align-items: center; overflow: hidden; border: 1px solid #e6ded9; border-radius: 7px; background: #fff; }
.planner-code > span { display: grid; height: 100%; width: 40px; flex: 0 0 auto; place-items: center; border-right: 1px solid #ece5e1; background: #faf7f5; color: #968783; font-size: 12px; }
.planner-code input { height: 100%; border: 0; border-radius: 0; }
.planner-code input:focus { outline: none; }
.planner-hint { margin: 0; color: #8c807d; font-size: 10px; line-height: 1.5; }
.text-action { padding: 0; border: 0; background: transparent; color: #8a1b2b; font-size: inherit; font-weight: 700; text-decoration: underline; }
.planner-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 18px; border-top: 1px solid #f0e9e5; }
.planner-card-footer > span { max-width: 410px; color: #8c807d; font-size: 10px; line-height: 1.5; }
.planner-card-footer .button { min-height: 44px; padding: 0 17px; font-size: 11px; }
.planner-disclaimer { margin: 12px 2px 0; color: #8b7f7d; font-size: 10px; text-align: right; }
.planner-step-two { display: grid; gap: 22px; }
.planner-subsection { padding: 17px; border: 1px solid #eee6e1; border-radius: 9px; }
.planner-subheading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.planner-subheading h4, .planner-review h4 { margin: 0; color: #443837; font-size: 13px; }
.planner-subheading > span, .planner-review h4 small { color: #8b7e7b; font-size: 10px; font-weight: 500; }
.planner-client-list, .planner-load-list { display: grid; gap: 7px; }
.planner-client { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 7px; background: #fcfaf9; }
.planner-client input { width: 16px; height: 16px; accent-color: #83152c; }
.planner-client > span, .planner-load-row > span { display: grid; gap: 4px; }
.planner-client strong, .planner-load-row strong { color: #413634; font-size: 11px; }
.planner-client small, .planner-load-row small { color: #8c817d; font-size: 10px; }
.planner-add-load { display: grid; grid-template-columns: minmax(0, 1fr) 140px auto; align-items: end; gap: 10px; margin-bottom: 12px; }
.planner-add-load .button { min-height: 44px; }
.planner-load-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border-bottom: 1px solid #f0e9e5; }
.planner-remove { width: 27px; height: 27px; border: 0; border-radius: 6px; background: #f8eeee; color: #a5424b; font-size: 18px; }
.planner-empty { margin: 0; color: #8c817d; font-size: 11px; line-height: 1.6; }
.planner-review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.planner-review > section { min-width: 0; padding: 15px; border: 1px solid #eee6e1; border-radius: 9px; }
.planner-review h4 { display: flex; justify-content: space-between; margin-bottom: 12px; }
.planner-review dl { display: grid; gap: 8px; margin: 0; }
.planner-review dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }
.planner-review dt { color: #897d7a; }
.planner-review dd { margin: 0; color: #413634; font-weight: 600; text-align: right; }
.planner-review ul { display: grid; gap: 7px; margin: 0; padding-left: 18px; color: #514644; font-size: 11px; }
@media (max-width: 900px) {
  .planner-page { max-width: none; }
  .planner-hero { align-items: flex-start; flex-direction: column; gap: 12px; padding: 20px; }
  .planner-draft-badge { align-self: flex-start; }
  .planner-card { min-height: 0; padding: 21px 18px; }
  .content.planner-content { padding: 22px 15px 35px; }
}
@media (max-width: 640px) {
  .planner-hero { min-height: 0; margin-bottom: 12px; padding: 17px; }
  .planner-hero h2 { font-size: 23px; }
  .planner-steps { gap: 5px; margin-bottom: 12px; }
  .planner-step { min-height: 60px; flex-direction: column; align-items: flex-start; gap: 3px; padding: 7px; }
  .planner-step-number { width: 23px; height: 23px; font-size: 10px; }
  .planner-step > span:last-child { gap: 1px; }
  .planner-step small { font-size: 8px; }
  .planner-step strong { font-size: 9px; }
  .planner-card { padding: 17px 14px; }
  .planner-card-heading { margin-bottom: 24px; }
  .planner-fields { grid-template-columns: 1fr; gap: 13px; }
  .planner-field-wide { grid-column: auto; }
  .planner-card-footer { align-items: stretch; flex-direction: column-reverse; gap: 11px; margin-top: 23px; }
  .planner-card-footer .button { width: 100%; }
  .planner-disclaimer { text-align: left; }
  .planner-add-load { grid-template-columns: minmax(0, 1fr) 100px; }
  .planner-add-load .button { grid-column: 1 / -1; width: 100%; }
  .planner-review { grid-template-columns: 1fr; }
  .planner-subsection { padding: 12px; }
}

@media (max-width: 900px) {
  .sidebar { display: none; }
  .main-area { margin-left: 0; }
  .topbar { min-height: 70px; padding: 0 15px; }
  .content { padding: 27px 23px 40px; }
  .menu-toggle { display: block; }
}
@media (max-width: 640px) {
  .sidebar { position: sticky; inset: 0 0 auto; display: flex; width: auto; height: auto; padding: 9px 12px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); background: #800f22; }
  .brand { min-height: 40px; justify-content: flex-start; margin: 0 2px 10px; }
  .brand-wordmark { display: flex; align-items: center; gap: 5px; }
  .brand-wordmark small { color: #e6c488; font: 600 8px Georgia, serif; }
  .brand-wordmark strong { margin: 0; font-size: 26px; letter-spacing: -2px; }
  .brand-wordmark em { display: none; }
  .nav-label, .sidebar-note { display: none; }
  #navigation { display: flex; overflow-x: auto; gap: 4px; }
  .nav-item { min-height: 35px; flex: 0 0 auto; gap: 6px; padding: 0 10px; color: rgba(255,255,255,.88); font-size: 10px; }
  .nav-item.active { background: rgba(255,255,255,.13); color: white; }
  .nav-icon { width: auto; font-size: 14px; }
  .main-area { margin-left: 0; }
  .topbar { position: static; min-height: 55px; padding: 0 15px; }
  .dashboard-title h1 { font-size: 23px; }
  .content { padding: 22px 15px 35px; }
  .clients-hero { min-height: 185px; flex-wrap: wrap; padding: 22px; }
  .clients-hero-copy { flex-basis: calc(100% - 75px); }
  .clients-hero-copy h2 { font-size: 29px; }
  .clients-hero-action { min-width: 158px; min-height: 44px; margin-left: 70px; }
  .clients-table-heading { align-items: stretch; flex-direction: column; }
  .clients-search { width: 100%; }
  .client-detail-grid, .client-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .client-detail-grid, .client-form-grid { grid-template-columns: 1fr; }
  .clients-hero-action { margin-left: 0; }
  .client-profile-card { padding: 18px 15px; }
}

.planner-load-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.planner-load-summary article { display: grid; gap: 5px; padding: 13px 15px; border: 1px solid #eee6e1; border-radius: 9px; background: #fcfaf9; }
.planner-load-summary article > span { color: #817471; font-size: 10px; }
.planner-load-summary article strong { color: #493c3a; font-size: 18px; }
.planner-load-summary article small { color: #998c88; font-size: 9px; }
.planner-load-entry { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 14px; margin: 15px 0; }
.planner-load-entry .planner-field { gap: 7px; }
.planner-load-entry .planner-field > span, .planner-load-quantity > span { font-size: 9px; }
.planner-load-entry .planner-field input, .planner-load-entry .planner-field select, .planner-stop-add .planner-field select { height: 41px; font-size: 11px; }
.planner-load-entry > .button { min-height: 41px; padding: 0 12px; font-size: 10px; white-space: nowrap; }
.planner-client-tools { display: grid; gap: 9px; margin-bottom: 13px; }
.planner-client-search { display: flex; min-height: 40px; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid #e6ded9; border-radius: 7px; background: white; color: #8b7e7b; }
.planner-client-search:focus-within { border-color: #a96770; outline: 3px solid rgba(169,103,112,.12); }
.planner-client-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: #443b39; font-size: 11px; }
.planner-client-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; color: #8b7e7b; font-size: 10px; }
.planner-client-bulk .text-action { font-size: 10px; }
.planner-client-bulk .text-action:disabled { color: #a9a09d; cursor: not-allowed; }
.planner-client-list { max-height: 250px; overflow: auto; padding-right: 3px; }
.planner-client { min-height: 56px; align-items: flex-start; }
.planner-client > span { min-width: 0; }
.planner-client small { line-height: 1.5; }
.planner-stops { margin-top: 17px; padding-top: 14px; border-top: 1px solid #f0e9e5; }
.planner-stop-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; margin: 12px 0; }
.planner-stop-add .planner-field { gap: 7px; }
.planner-stop-add .button { min-height: 41px; }
.planner-origin { display: grid; gap: 4px; margin: 12px 0; padding: 11px 12px; border-radius: 7px; background: #f8f5f3; color: #6e615e; font-size: 10px; }
.planner-origin span { color: #958985; font-size: 9px; line-height: 1.5; }
.planner-stop-list { display: grid; gap: 7px; }
.planner-stop-row { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 10px; border: 1px solid #eee6e1; border-radius: 8px; background: #fff; }
.planner-stop-number { display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #f7e9e8; color: #861923; font-size: 11px; font-weight: 800; }
.planner-stop-copy, .planner-load-copy { display: grid; min-width: 0; flex: 1; gap: 4px; }
.planner-stop-copy strong, .planner-load-copy strong { overflow-wrap: anywhere; color: #413634; font-size: 11px; }
.planner-stop-copy small, .planner-load-copy small { color: #8c817d; font-size: 9px; line-height: 1.45; }
.planner-stop-actions { display: flex; flex: 0 0 auto; gap: 4px; }
.planner-order-button { width: 26px; height: 27px; border: 1px solid #e9e1dc; border-radius: 6px; background: #fff; color: #7c1b2c; }
.planner-order-button:disabled { opacity: .35; cursor: not-allowed; }
.planner-load-row { gap: 10px; }
.planner-load-total { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 14px; padding: 13px 15px; border-radius: 8px; background: #f8f5f3; color: #6e615e; font-size: 10px; font-weight: 800; }
.planner-load-total span { display: grid; gap: 5px; }
.planner-load-total small { color: #958985; font-size: 9px; font-weight: 400; }
.planner-load-total strong { color: #801329; font-size: 17px; }
@media (max-width: 1120px) {
  .product-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .warehouse-sale-line { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .warehouse-sale-line-total { align-self: center; }
  .warehouse-sale-line-remove { justify-self: end; }
  .purchases-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .purchase-line { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .purchase-line-remove { justify-self: end; }
}
@media (max-width: 900px) {
  .planner-load-entry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planner-load-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .products-hero { min-height: 0; align-items: flex-start; flex-direction: column; padding: 21px; }
  .products-hero-copy h2 { font-size: 27px; }
  .products-hero-action { min-height: 43px; }
  .products-catalog-toolbar { align-items: stretch; flex-direction: column; }
  .products-catalog-toolbar .search-box { width: 100%; }
  .product-card-grid { grid-template-columns: 1fr; }
  .sellers-hero { min-height: 0; align-items: flex-start; flex-direction: column; padding: 21px; }
  .sellers-hero-copy h2 { font-size: 27px; }
  .sellers-hero-action { min-height: 43px; }
  .sellers-directory-heading { align-items: flex-start; flex-direction: column; padding: 16px 15px 11px; }
  .sellers-directory > .toolbar { align-items: stretch; flex-direction: column; padding: 0 15px 12px; }
  .sellers-directory .search-box { width: 100%; }
  .warehouse-sales-hero { min-height: 0; align-items: flex-start; flex-direction: column; padding: 21px; }
  .warehouse-sales-hero-copy h2 { font-size: 27px; }
  .warehouse-sales-hero-action { min-height: 43px; }
  .warehouse-sales-menu { grid-template-columns: 1fr; }
  .warehouse-sales-menu-card { min-height: 78px; }
  .warehouse-sales-subpage { padding: 14px 12px; }
  .warehouse-sales-subpage-heading { align-items: flex-start; flex-direction: column; }
  .warehouse-sales-metrics { grid-template-columns: 1fr; }
  .warehouse-sales-history-heading { align-items: flex-start; flex-direction: column; padding: 16px 15px 11px; }
  .warehouse-sales-history > .toolbar { align-items: stretch; flex-direction: column; padding: 0 15px 12px; }
  .warehouse-sales-history .search-box { width: 100%; }
  .purchases-hero { min-height: 0; align-items: flex-start; flex-direction: column; padding: 21px; }
  .purchases-hero-copy h2 { font-size: 27px; }
  .purchases-hero-actions { width: 100%; }
  .purchases-metrics { grid-template-columns: 1fr; }
  .purchases-history-heading { align-items: flex-start; flex-direction: column; padding: 16px 15px 11px; }
  .purchases-history > .toolbar { align-items: stretch; flex-direction: column; padding: 0 15px 12px; }
  .purchases-history .search-box { width: 100%; }
  .purchase-modal, .purchase-detail-modal { width: 100%; max-height: 95vh; }
  .purchase-header-fields, .purchase-tax-fields, .purchase-payment-fields, .purchase-detail-fields { grid-template-columns: 1fr; }
  .purchase-description-field { grid-column: auto; }
  .purchase-lines-heading { align-items: flex-start; flex-direction: column; }
  .purchase-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .purchase-line > .field:first-child { grid-column: 1 / -1; }
  .purchase-summary { align-items: stretch; flex-direction: column; }
  .purchase-summary > span { text-align: left; }
  .purchase-summary > span input { width: 100%; text-align: left; }
  .purchase-summary > strong { text-align: right; }
  .purchase-detail-total { flex-wrap: wrap; justify-content: space-between; gap: 10px; }
  .warehouse-sale-modal, .warehouse-sale-detail { width: 100%; max-height: 95vh; }
  .warehouse-sale-fields, .warehouse-sale-detail-fields { grid-template-columns: 1fr; }
  .warehouse-sale-products-heading { align-items: flex-start; flex-direction: column; }
  .warehouse-sale-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .warehouse-sale-line > .field:first-child { grid-column: 1 / -1; }
  .warehouse-sale-line-total { min-width: 0; }
  .warehouse-sale-summary { justify-content: space-between; gap: 10px; }
  .planner-load-entry, .planner-load-summary { grid-template-columns: 1fr; }
  .planner-load-entry > .button { width: 100%; }
  .planner-subheading { align-items: flex-start; flex-direction: column; }
  .planner-stop-add { grid-template-columns: 1fr; }
  .planner-stop-add .button { width: 100%; }
  .planner-stop-row { align-items: flex-start; }
  .planner-stop-actions { align-self: center; }
  .planner-load-row { flex-wrap: wrap; }
  .planner-load-total { align-items: flex-start; flex-direction: column; }
}

.inventory-page { display: grid; gap: 19px; color: #332d2d; }
.inventory-hero {
  position: relative; display: flex; min-height: 180px; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden; padding: 27px 30px;
  border: 1px solid #8a172b; border-radius: 17px; background: linear-gradient(112deg, #780c20 0%, #94152f 70%, #85182b 100%); color: white;
}
.inventory-hero::after { position: absolute; top: -105px; right: 19%; width: 270px; height: 270px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 38px rgba(255,255,255,.035), 0 0 0 76px rgba(255,255,255,.025); content: ""; pointer-events: none; }
.inventory-hero-copy { position: relative; z-index: 1; display: grid; gap: 7px; }
.inventory-hero-copy em { color: #f0c260; font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: 1.2px; }
.inventory-hero-copy h2 { margin: 0; color: white; font: 700 34px/1.1 "Playfair Display", Georgia, serif; }
.inventory-hero-copy p { max-width: 520px; margin: 0; color: rgba(255,255,255,.85); font-size: 12px; line-height: 1.6; }
.inventory-hero-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.inventory-hero-action { min-height: 45px; border-color: rgba(255,255,255,.2); background: rgba(74,0,16,.34); font-size: 11px; }
.inventory-hero-action:hover { background: rgba(74,0,16,.55); }
.inventory-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.inventory-metrics article { display: grid; min-width: 0; min-height: 84px; align-content: center; gap: 6px; padding: 14px 16px; border: 1px solid #eee5e1; border-radius: 10px; background: white; }
.inventory-metrics article span { color: #786e6d; font-size: 10px; }
.inventory-metrics article strong { overflow: hidden; color: #342d2d; font: 700 20px "DM Sans", sans-serif; text-overflow: ellipsis; }
.inventory-section { min-width: 0; padding: 17px 18px; border: 1px solid #eee5e1; border-radius: 11px; background: white; }
.inventory-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.inventory-section-heading h2 { margin: 0 0 4px; color: #342d2d; font-size: 16px; }
.inventory-section-heading p { max-width: 710px; margin: 0; color: #817675; font-size: 10px; line-height: 1.5; }
.inventory-section-heading > .muted { flex: 0 0 auto; }
.inventory-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.inventory-toolbar .search-box { min-height: 40px; }
.inventory-export-actions { display: flex; flex: 0 0 auto; gap: 7px; }
.inventory-export-actions .button { min-height: 34px; padding: 0 11px; font-size: 9px; }
.inventory-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 11px; }
.inventory-filter { min-height: 31px; padding: 0 11px; border: 1px solid #e7ddd7; border-radius: 18px; background: white; color: #756764; font-size: 9px; font-weight: 700; }
.inventory-filter:hover, .inventory-filter.active { border-color: #83152c; background: #83152c; color: white; }
.inventory-refiners { display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 12px; }
.inventory-refiners .field { display: grid; min-width: 180px; gap: 5px; }
.inventory-refiners .field > span { color: #726d6a; font-size: 8px; font-weight: 700; letter-spacing: .4px; }
.inventory-refiners select { min-height: 34px; padding: 0 10px; border: 1px solid #e9e1dc; border-radius: 7px; background: white; color: #49363a; font-size: 10px; }
.inventory-stock-table .table-wrap { overflow-x: auto; }
.inventory-stock-table table { min-width: 1160px; }
.inventory-actions { min-width: 228px; flex-wrap: wrap; }
.inventory-actions .button { min-height: 26px; padding: 0 7px; font-size: 8px; }
.inventory-detail-modal { width: min(820px, calc(100vw - 32px)); }
.inventory-detail-modal .modal-header h2 { margin: 3px 0 0; }
.inventory-detail-kicker { color: #8c807d; font-size: 8px; font-weight: 800; letter-spacing: .7px; }
.inventory-detail-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0 0 17px; }
.inventory-detail-fields > div { min-width: 0; padding: 10px; border-radius: 7px; background: #fcfaf9; }
.inventory-detail-fields dt { margin-bottom: 5px; color: #8c807d; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.inventory-detail-fields dd { margin: 0; color: #493c3a; font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.inventory-detail-history-title { margin: 0 0 8px; color: #493c3a; font-size: 12px; }
.inventory-detail-modal .modal-footer { flex-wrap: wrap; }
.inventory-print-title { display: none; }
@media (max-width: 900px) {
  .inventory-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-hero { align-items: flex-start; flex-direction: column; }
  .inventory-hero-actions { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .inventory-hero { min-height: 0; padding: 21px; }
  .inventory-hero-copy h2 { font-size: 27px; }
  .inventory-hero-actions { width: 100%; }
  .inventory-hero-action { flex: 1 1 auto; }
  .inventory-metrics { grid-template-columns: 1fr; }
  .inventory-section { padding: 14px 12px; }
  .inventory-section-heading { align-items: flex-start; flex-direction: column; }
  .inventory-toolbar { align-items: stretch; flex-direction: column; }
  .inventory-toolbar .search-box { width: 100%; }
  .inventory-export-actions > .button { flex: 1; }
  .inventory-refiners { display: grid; grid-template-columns: 1fr; }
  .inventory-refiners .field { min-width: 0; }
  .inventory-detail-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
  .sidebar, .topbar, .inventory-hero-actions, .inventory-export-actions, .inventory-actions, #modal-root, #toast-root { display: none !important; }
  .main-area { width: 100% !important; margin: 0 !important; }
  .content { max-width: none !important; padding: 0 !important; }
  .inventory-section { break-inside: avoid; border-color: #bbb; }
  body.inventory-adjustment-print .inventory-hero, body.inventory-adjustment-print .inventory-metrics,
  body.inventory-adjustment-print .inventory-stock-section, body.inventory-adjustment-print .inventory-filters,
  body.inventory-adjustment-print .inventory-toolbar, body.inventory-adjustment-print .inventory-refiners,
  body.inventory-adjustment-print .inventory-movements-section tr[data-inventory-movement-type="Entrada"],
  body.inventory-adjustment-print .inventory-movements-section tr[data-inventory-movement-type="Salida"] { display: none !important; }
  body.inventory-adjustment-print .inventory-print-title { display: block; margin: 0 0 14px; color: #222; font-size: 18px; }
}

.drivers-page { display: grid; gap: 19px; color: #332d2d; }
.drivers-hero {
  position: relative; display: flex; min-height: 180px; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden; padding: 27px 30px;
  border: 1px solid #8a172b; border-radius: 17px; background: linear-gradient(112deg, #780c20 0%, #94152f 70%, #85182b 100%); color: white;
}
.drivers-hero::after { position: absolute; top: -105px; right: 19%; width: 270px; height: 270px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 38px rgba(255,255,255,.035), 0 0 0 76px rgba(255,255,255,.025); content: ""; pointer-events: none; }
.drivers-hero-copy { position: relative; z-index: 1; display: grid; gap: 7px; }
.drivers-hero-copy em { color: #f0c260; font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: 1.2px; }
.drivers-hero-copy h2 { margin: 0; color: white; font: 700 34px/1.1 "Playfair Display", Georgia, serif; }
.drivers-hero-copy p { max-width: 520px; margin: 0; color: rgba(255,255,255,.85); font-size: 12px; line-height: 1.6; }
.drivers-hero-action { position: relative; z-index: 1; min-height: 45px; border-color: rgba(255,255,255,.2); background: rgba(74,0,16,.34); font-size: 11px; }
.drivers-hero-action:hover { background: rgba(74,0,16,.55); }
.drivers-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.drivers-metrics article { display: grid; min-width: 0; min-height: 82px; align-content: center; gap: 6px; padding: 14px 16px; border: 1px solid #eee5e1; border-radius: 10px; background: white; }
.drivers-metrics article span { color: #786e6d; font-size: 10px; }
.drivers-metrics article strong { color: #342d2d; font: 700 20px "DM Sans", sans-serif; }
.drivers-directory { min-width: 0; padding: 17px 18px; border: 1px solid #eee5e1; border-radius: 11px; background: white; }
.drivers-directory-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.drivers-directory-heading h2 { margin: 0 0 4px; color: #342d2d; font-size: 16px; }
.drivers-directory-heading p { margin: 0; color: #817675; font-size: 10px; line-height: 1.5; }
.drivers-toolbar { display: grid; gap: 11px; margin-bottom: 14px; }
.drivers-toolbar .search-box { width: min(100%, 430px); min-height: 40px; }
.driver-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.driver-filter { min-height: 31px; padding: 0 12px; border: 1px solid #e7ddd7; border-radius: 18px; background: white; color: #756764; font-size: 9px; font-weight: 700; }
.driver-filter:hover, .driver-filter.active { border-color: #83152c; background: #83152c; color: white; }
.driver-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 13px; }
.driver-card { display: flex; min-width: 0; flex-direction: column; padding: 15px; border: 1px solid #eee5e1; border-radius: 10px; background: #fff; }
.driver-card-header { display: flex; min-width: 0; align-items: center; gap: 10px; }
.driver-avatar { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #f7e9e8; color: #861923; font-size: 13px; font-weight: 800; }
.driver-card-title { display: grid; min-width: 0; gap: 3px; }
.driver-card-title strong { overflow: hidden; color: #372f30; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.driver-card-title span { color: #887e7b; font-size: 9px; }
.driver-status { flex: 0 0 auto; margin-left: auto; padding: 5px 8px; border-radius: 16px; background: #eaf5ee; color: #38764e; font-size: 8px; font-weight: 800; }
.driver-status.on-route { background: #fff3df; color: #94621d; }
.driver-status.resting, .driver-status.suspended { background: #f2eeee; color: #766b6a; }
.driver-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 13px; margin: 15px 0 12px; }
.driver-details > div { min-width: 0; }
.driver-details dt { margin-bottom: 4px; color: #8c807d; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.driver-details dd { margin: 0; color: #493c3a; font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.driver-license-alert { margin: 0 0 11px; padding: 8px 9px; border-radius: 6px; background: #fff5df; color: #8b5b16; font-size: 9px; font-weight: 700; }
.driver-license-alert.expired { background: #fbe8e7; color: #a32f35; }
.driver-local-access { display: flex; align-items: flex-start; gap: 8px; margin-top: auto; padding: 9px; border-radius: 7px; background: #f7f5f3; }
.driver-access-indicator { width: 7px; height: 7px; flex: 0 0 auto; margin-top: 3px; border-radius: 50%; background: #a59a97; }
.driver-local-access > span:last-child { display: grid; gap: 3px; }
.driver-local-access strong { color: #615654; font-size: 9px; }
.driver-local-access small { color: #8b807d; font-size: 8px; line-height: 1.4; }
.driver-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 11px; border-top: 1px solid #f0e9e5; }
.driver-card-actions .button { min-height: 29px; padding: 0 9px; font-size: 9px; }
.driver-card-actions .button:disabled { cursor: not-allowed; opacity: .55; }
.driver-empty { grid-column: 1 / -1; margin: 0; padding: 25px 10px; color: #8b817f; font-size: 11px; text-align: center; }
@media (max-width: 900px) {
  .drivers-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drivers-hero { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 640px) {
  .drivers-hero { min-height: 0; padding: 21px; }
  .drivers-hero-copy h2 { font-size: 27px; }
  .drivers-hero-action { width: 100%; }
  .drivers-metrics { grid-template-columns: 1fr; }
  .drivers-directory { padding: 14px 12px; }
  .drivers-directory-heading { align-items: flex-start; flex-direction: column; }
  .drivers-toolbar .search-box { width: 100%; }
  .driver-card-grid { grid-template-columns: 1fr; }
}
@media print {
  .drivers-hero-action, .driver-card-actions { display: none !important; }
}

.helpers-page, .vehicles-page { display: grid; gap: 19px; color: #332d2d; }
.helpers-hero, .vehicles-hero {
  position: relative; display: flex; min-height: 160px; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden; padding: 26px 30px;
  border: 1px solid #8a172b; border-radius: 17px; background: linear-gradient(112deg, #780c20 0%, #94152f 70%, #85182b 100%); color: white;
}
.helpers-hero::after, .vehicles-hero::after { position: absolute; top: -105px; right: 19%; width: 270px; height: 270px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 38px rgba(255,255,255,.035), 0 0 0 76px rgba(255,255,255,.025); content: ""; pointer-events: none; }
.helpers-hero-copy, .vehicles-hero-copy { position: relative; z-index: 1; display: grid; gap: 7px; }
.helpers-hero-copy em, .vehicles-hero-copy em { color: #f0c260; font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: 1.2px; }
.helpers-hero-copy h2, .vehicles-hero-copy h2 { margin: 0; color: white; font: 700 32px/1.1 "Playfair Display", Georgia, serif; }
.helpers-hero-copy p, .vehicles-hero-copy p { max-width: 520px; margin: 0; color: rgba(255,255,255,.85); font-size: 12px; line-height: 1.6; }
.helpers-hero-action, .vehicles-hero-action { position: relative; z-index: 1; min-height: 43px; border-color: rgba(255,255,255,.2); background: rgba(74,0,16,.34); font-size: 11px; }
.helpers-hero-action:hover, .vehicles-hero-action:hover { background: rgba(74,0,16,.55); }
.helpers-directory, .vehicles-directory { min-width: 0; padding: 17px 18px; border: 1px solid #eee5e1; border-radius: 11px; background: white; }
.helpers-directory-heading, .vehicles-directory-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.helpers-directory-heading h2, .vehicles-directory-heading h2 { margin: 0 0 4px; color: #342d2d; font-size: 16px; }
.helpers-directory-heading p, .vehicles-directory-heading p { margin: 0; color: #817675; font-size: 10px; line-height: 1.5; }
.helpers-table .table-wrap table { min-width: 650px; }
.helpers-table td strong { display: block; }
.helpers-table td small { display: block; margin-top: 4px; color: #827876; font-size: 10px; }
.vehicles-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vehicles-metrics article { display: grid; min-width: 0; min-height: 78px; align-content: center; gap: 6px; padding: 14px 16px; border: 1px solid #eee5e1; border-radius: 10px; background: white; }
.vehicles-metrics article span { color: #786e6d; font-size: 10px; }
.vehicles-metrics article strong { color: #342d2d; font: 700 20px "DM Sans", sans-serif; }
.vehicle-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 13px; }
.vehicle-card { display: flex; min-width: 0; flex-direction: column; padding: 15px; border: 1px solid #eee5e1; border-radius: 10px; background: #fff; }
.vehicle-card-header { display: flex; align-items: center; gap: 9px; }
.vehicle-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 9px; background: #f7e9e8; color: #861923; font-size: 18px; }
.vehicle-photo-thumbnail { width: 48px; height: 42px; border-radius: 7px; object-fit: cover; }
.vehicle-photo-button { align-self: flex-start; margin-top: 8px; padding: 0; border: 0; background: transparent; color: #83152c; font-size: 9px; font-weight: 700; text-decoration: underline; }
.vehicle-status { margin-left: auto; padding: 5px 8px; border-radius: 16px; background: #eaf5ee; color: #38764e; font-size: 8px; font-weight: 800; }
.vehicle-status.on-route { background: #fff3df; color: #94621d; }
.vehicle-status.maintenance { background: #fbe8e7; color: #a32f35; }
.vehicle-card-title { display: grid; gap: 4px; margin-top: 12px; }
.vehicle-card-title strong { color: #372f30; font-size: 12px; }
.vehicle-card-title span { color: #817675; font-size: 10px; }
.vehicle-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 13px; margin: 15px 0 12px; }
.vehicle-details > div { min-width: 0; }
.vehicle-details dt { margin-bottom: 4px; color: #8c807d; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.vehicle-details dd { margin: 0; color: #493c3a; font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.vehicle-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 11px; border-top: 1px solid #f0e9e5; }
.vehicle-card-actions .button { min-height: 29px; padding: 0 9px; font-size: 9px; }
.vehicle-photo-upload { display: grid; gap: 7px; margin-top: 14px; }
.vehicle-photo-upload label { color: #554947; font-size: 11px; font-weight: 700; }
.vehicle-photo-upload input[type="file"] { width: 100%; padding: 8px; border: 1px solid #e8dfda; border-radius: 7px; color: #615654; font-size: 10px; }
.vehicle-photo-upload small { color: #817675; font-size: 9px; }
.vehicle-photo-preview { display: none; max-width: 100%; max-height: 180px; justify-self: start; border-radius: 8px; object-fit: contain; }
.vehicle-photo-preview.visible { display: block; }
.vehicle-photo-modal { max-width: 650px; }
.vehicle-photo-modal .modal-body { display: grid; min-height: 140px; place-items: center; }
.vehicle-photo-modal .modal-body img { display: block; max-width: 100%; max-height: 60vh; border-radius: 8px; object-fit: contain; }
.vehicle-photo-empty { color: #817675; font-size: 12px; }
@media (max-width: 1050px) {
  .vehicle-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .helpers-hero, .vehicles-hero { align-items: flex-start; flex-direction: column; }
  .vehicles-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .helpers-hero, .vehicles-hero { min-height: 0; padding: 21px; }
  .helpers-hero-copy h2, .vehicles-hero-copy h2 { font-size: 27px; }
  .helpers-hero-action, .vehicles-hero-action { width: 100%; }
  .helpers-directory, .vehicles-directory { padding: 14px 12px; }
  .helpers-directory-heading, .vehicles-directory-heading { align-items: flex-start; flex-direction: column; }
  .vehicles-metrics, .vehicle-card-grid { grid-template-columns: 1fr; }
}
@media print {
  .helpers-hero-action, .vehicles-hero-action, .vehicle-card-actions, .vehicle-photo-button { display: none !important; }
}

.operations-page { display: grid; gap: 16px; color: #332d2d; }
.operations-hero {
  position: relative; display: flex; min-height: 150px; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden; padding: 24px 28px;
  border: 1px solid #8a172b; border-radius: 15px; background: linear-gradient(112deg, #780c20 0%, #94152f 70%, #85182b 100%); color: white;
}
.operations-hero::after { position: absolute; top: -100px; right: 17%; width: 250px; height: 250px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 36px rgba(255,255,255,.035), 0 0 0 72px rgba(255,255,255,.025); content: ""; pointer-events: none; }
.operations-hero > div { position: relative; z-index: 1; display: grid; gap: 7px; }
.operations-hero em, .operation-kicker { color: #a4815a; font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.operations-hero em { color: #f0c260; }
.operations-hero h2 { margin: 0; color: white; font: 700 31px/1.1 "Playfair Display", Georgia, serif; }
.operations-hero p { max-width: 560px; margin: 0; color: rgba(255,255,255,.85); font-size: 11px; line-height: 1.6; }
.operations-hero-action { position: relative; z-index: 1; min-height: 42px; border-color: rgba(255,255,255,.2); background: rgba(74,0,16,.34); }
.operations-tabs { display: flex; overflow-x: auto; gap: 4px; padding: 5px; border: 1px solid #eee5e1; border-radius: 9px; background: white; scrollbar-width: thin; }
.operations-tab { display: inline-flex; min-height: 36px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: #736764; font-size: 9px; font-weight: 700; white-space: nowrap; }
.operations-tab:hover, .operations-tab.active { background: #83152c; color: white; }
.operations-tab > span { display: grid; min-width: 17px; height: 17px; place-items: center; padding: 0 4px; border-radius: 9px; background: rgba(131,21,44,.1); color: #83152c; font-size: 8px; }
.operations-tab.active > span { background: rgba(255,255,255,.2); color: white; }
.operations-section { display: grid; min-width: 0; gap: 16px; padding: 17px 18px; border: 1px solid #eee5e1; border-radius: 11px; background: white; }
.operations-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.operations-section-heading h2 { margin: 4px 0; color: #342d2d; font-size: 16px; }
.operations-section-heading p { margin: 0; color: #817675; font-size: 10px; line-height: 1.5; }
.operations-toolbar-actions, .operations-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 10px; }
.operations-toolbar-actions .button { min-height: 31px; padding: 0 9px; font-size: 9px; }
.operations-hero-actions { position: relative; z-index: 1; margin: 0; }
.operations-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 5px 9px; color: #817675; font-size: 9px; }
.operations-summary strong { color: #493c3a; font: 700 17px Manrope, sans-serif; }
.operations-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.operation-card { display: grid; min-width: 0; gap: 12px; padding: 14px; border: 1px solid #eee5e1; border-radius: 9px; background: #fff; }
.operation-card-heading { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 12px; }
.operation-card-heading > div { display: grid; min-width: 0; gap: 4px; }
.operation-card-heading h3 { overflow: hidden; margin: 0; color: #493c3a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.operation-card-heading p { margin: 0; color: #8c807d; font-size: 9px; }
.operation-card-meta { display: flex; justify-content: space-between; gap: 9px; padding-top: 8px; border-top: 1px solid #f0e9e5; color: #817675; font-size: 9px; }
.operation-card-meta strong { color: #493c3a; }
.operation-card .button { justify-self: start; min-height: 32px; padding: 0 10px; font-size: 9px; }
.operation-status { display: inline-flex; width: fit-content; align-items: center; padding: 5px 8px; border-radius: 14px; background: #fff3df; color: #94621d; font-size: 8px; font-weight: 800; white-space: nowrap; }
.operation-status.complete { background: #eaf5ee; color: #38764e; }
.operations-empty { display: grid; min-height: 76px; align-content: center; justify-items: center; margin: 0; padding: 16px; border: 1px dashed #e5dcd7; border-radius: 8px; color: #897d7a; font-size: 10px; text-align: center; }
.operations-table .table-wrap { overflow-x: auto; }
.operations-table table { min-width: 620px; }
.operations-table td .button { min-height: 29px; padding: 0 8px; font-size: 9px; }
.operations-subsection { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid #f0e9e5; }
.operations-subsection h3 { margin: 0; color: #493c3a; font-size: 12px; }
.operations-subtable { display: grid; gap: 9px; }
.operations-subtable h4 { margin: 8px 0 0; color: #493c3a; font-size: 11px; }
.operations-disclaimer { margin: 0; color: #948986; font-size: 9px; line-height: 1.5; }
.dispatch-load-list { display: grid; max-height: 360px; overflow-y: auto; gap: 7px; }
.dispatch-load-check { display: flex; min-height: 48px; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid #eee5e1; border-radius: 7px; }
.dispatch-load-check input { accent-color: #83152c; }
.dispatch-load-check > span { display: grid; gap: 4px; }
.dispatch-load-check strong { color: #493c3a; font-size: 10px; }
.dispatch-load-check small { color: #8c807d; font-size: 9px; }
.settlement-page .operations-hero { min-height: 94px; padding: 15px 24px; border-radius: 11px; }
.settlement-page .operations-hero h2 { font-size: 25px; }
.settlement-page .operations-hero p { font-size: 10px; }
.settlement-menu-grid, .dispatch-menu-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 11px;
  border: 1px solid #eee5e1; border-radius: 11px; background: white;
}
.settlement-menu-card, .dispatch-menu-card {
  position: relative; display: grid; min-height: 81px; align-content: center; justify-items: center; gap: 7px; padding: 10px;
  border: 1px solid #eee5e1; border-radius: 9px; background: #fff; color: #493c3a; text-align: center;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.settlement-menu-card:hover, .settlement-menu-card:focus-visible, .dispatch-menu-card:hover, .dispatch-menu-card:focus-visible { transform: translateY(-1px); border-color: #b78088; background: #fffaf8; }
.settlement-menu-card strong, .dispatch-menu-card strong { max-width: 190px; font-size: 10px; line-height: 1.35; }
.settlement-menu-icon, .dispatch-menu-icon { color: #83152c; font-size: 19px; line-height: 1; }
.settlement-menu-badge, .dispatch-menu-badge {
  position: absolute; top: 7px; right: 8px; display: grid; min-width: 17px; height: 17px; place-items: center; padding: 0 4px;
  border-radius: 10px; background: #83152c; color: white; font-size: 8px; font-weight: 800;
}
.settlement-menu-back, .dispatch-menu-back {
  display: flex; min-height: 37px; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid #eee5e1;
  border-radius: 8px; background: white; color: #83152c; font-size: 11px; font-weight: 700; text-align: left;
}
.settlement-menu-back:hover, .dispatch-menu-back:hover { border-color: #b78088; background: #fffaf8; }
.settlement-workspace { display: grid; grid-template-columns: minmax(230px, .72fr) minmax(0, 1.5fr); align-items: start; gap: 13px; }
.settlement-route-list { display: grid; max-height: 540px; overflow-y: auto; gap: 7px; }
.settlement-route-card { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 9px; padding: 11px; border: 1px solid #eee5e1; border-radius: 8px; background: white; text-align: left; }
.settlement-route-card:hover, .settlement-route-card.active { border-color: #b78088; background: #fffaf8; }
.settlement-route-card > span { display: grid; min-width: 0; gap: 5px; }
.settlement-route-card strong { color: #493c3a; font-size: 10px; }
.settlement-route-card small { overflow: hidden; color: #8c807d; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.settlement-route-card em { padding: 5px 7px; border-radius: 12px; background: #fff3df; color: #94621d; font-size: 7px; font-style: normal; font-weight: 800; }
.settlement-detail { display: grid; min-width: 0; gap: 12px; padding: 14px; border: 1px solid #eee5e1; border-radius: 9px; background: #fff; }
.settlement-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.settlement-detail-heading > div { display: grid; gap: 4px; }
.settlement-detail-heading h3 { margin: 0; color: #493c3a; font-size: 13px; }
.settlement-detail-heading p { margin: 0; color: #8c807d; font-size: 9px; }
.settlement-detail-heading > strong { color: #83152c; font: 700 16px Manrope, sans-serif; white-space: nowrap; }
.settlement-route-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.settlement-route-summary > div { padding: 9px; border-radius: 7px; background: #fcfaf9; }
.settlement-route-summary dt { margin-bottom: 4px; color: #8c807d; font-size: 8px; }
.settlement-route-summary dd { margin: 0; color: #493c3a; font-size: 10px; font-weight: 700; }
.settlement-detail > .button { justify-self: start; }
.settlement-search { width: min(100%, 420px); min-height: 40px; }
@media (max-width: 900px) {
  .operations-card-grid { grid-template-columns: 1fr; }
  .settlement-menu-grid, .dispatch-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settlement-workspace { grid-template-columns: minmax(200px, .75fr) minmax(0, 1.25fr); }
}
@media (max-width: 640px) {
  .operations-hero { min-height: 0; align-items: flex-start; flex-direction: column; padding: 20px; }
  .operations-hero h2 { font-size: 27px; }
  .operations-hero-action { width: 100%; }
  .operations-section { padding: 14px 12px; }
  .operations-section-heading { align-items: flex-start; flex-direction: column; }
  .operations-toolbar-actions { width: 100%; }
  .operations-toolbar-actions .button { flex: 1 1 110px; }
  .operations-hero-actions { width: 100%; }
  .operations-hero-actions .button { flex: 1; }
  .settlement-page .operations-hero { align-items: center; flex-direction: row; padding: 14px; }
  .settlement-page .operations-hero h2 { font-size: 21px; }
  .settlement-page .operations-hero-action { width: auto; flex: 0 0 auto; }
  .operations-summary { justify-content: flex-start; }
  .settlement-workspace { grid-template-columns: 1fr; }
  .settlement-route-list { max-height: 240px; }
  .settlement-route-summary { grid-template-columns: 1fr; }
  .settlement-detail { padding: 11px; }
}
@media print {
  body.dispatch-print .sidebar, body.dispatch-print .topbar, body.dispatch-print .operations-tabs,
  body.dispatch-print .dispatch-menu-back,
  body.dispatch-print .operations-disclaimer, body.dispatch-print .operations-toolbar-actions,
  body.settlement-print .sidebar, body.settlement-print .topbar, body.settlement-print .operations-tabs, body.settlement-print .settlement-menu-back,
  body.settlement-print .operations-disclaimer, body.settlement-print .operations-hero-actions,
  body.dispatch-print #modal-root, body.settlement-print #modal-root, #toast-root { display: none !important; }
  body.dispatch-print .main-area, body.settlement-print .main-area { width: 100% !important; margin: 0 !important; }
  body.dispatch-print .content, body.settlement-print .content { max-width: none !important; padding: 0 !important; }
  body.dispatch-print .operations-section, body.settlement-print .operations-section { border: 0; padding: 0; }
}

.routes-page, .deliveries-page, .incidents-page { display: grid; gap: 18px; color: #332d2d; }
.routes-hero, .deliveries-hero, .incidents-hero {
  position: relative; display: flex; min-height: 174px; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden; padding: 27px 30px;
  border: 1px solid #8a172b; border-radius: 17px; background: linear-gradient(112deg, #780c20 0%, #94152f 70%, #85182b 100%); color: white;
}
.routes-hero::after, .deliveries-hero::after, .incidents-hero::after {
  position: absolute; top: -105px; right: 19%; width: 270px; height: 270px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(255,255,255,.035), 0 0 0 76px rgba(255,255,255,.025); content: ""; pointer-events: none;
}
.routes-hero-copy, .deliveries-hero-copy, .incidents-hero-copy { position: relative; z-index: 1; display: grid; gap: 7px; }
.routes-hero-copy em, .deliveries-hero-copy em, .incidents-hero-copy em { color: #f0c260; font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: 1.2px; }
.routes-hero-copy h2, .deliveries-hero-copy h2, .incidents-hero-copy h2 { margin: 0; color: white; font: 700 34px/1.1 "Playfair Display", Georgia, serif; }
.routes-hero-copy p, .deliveries-hero-copy p, .incidents-hero-copy p { max-width: 520px; margin: 0; color: rgba(255,255,255,.85); font-size: 12px; line-height: 1.6; }
.routes-hero-action, .deliveries-hero-action, .incidents-hero-action { position: relative; z-index: 1; min-height: 45px; border-color: rgba(255,255,255,.2); background: rgba(74,0,16,.34); font-size: 11px; }
.routes-hero-action:hover, .deliveries-hero-action:hover, .incidents-hero-action:hover { background: rgba(74,0,16,.55); }
.routes-directory, .deliveries-directory, .incidents-list-panel {
  min-width: 0; padding: 17px 18px; border: 1px solid #eee5e1; border-radius: 11px; background: white;
}
.routes-directory-heading, .deliveries-directory-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.routes-directory-heading h2, .deliveries-directory-heading h2 { margin: 0 0 4px; color: #342d2d; font-size: 16px; }
.routes-directory-heading p, .deliveries-directory-heading p { margin: 0; color: #817675; font-size: 10px; line-height: 1.5; }
.routes-toolbar, .deliveries-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(150px, 210px)); align-items: end; gap: 12px; margin-bottom: 14px; }
.deliveries-toolbar { grid-template-columns: minmax(220px, 1fr) minmax(150px, 210px); }
.routes-toolbar .search-box, .deliveries-toolbar .search-box, .incidents-toolbar .search-box { width: 100%; min-height: 40px; }
.routes-filter { display: grid; min-width: 0; gap: 5px; }
.routes-filter > span { color: #8c807d; font-size: 8px; font-weight: 800; letter-spacing: .5px; }
.routes-filter select { width: 100%; height: 40px; padding: 0 10px; border: 1px solid #e6ded9; border-radius: 7px; background: white; color: #554946; font-size: 10px; }
.route-directory-list { overflow: hidden; border: 1px solid #eee5e1; border-radius: 8px; }
.route-directory-header, .route-directory-card { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(130px, 1.2fr) minmax(130px, 1.2fr) minmax(100px, .8fr) 110px; align-items: center; gap: 12px; }
.route-directory-header { min-height: 36px; padding: 0 13px; background: #faf8f6; color: #8a7f7c; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.route-directory-card { min-height: 64px; padding: 9px 13px; border-top: 1px solid #f0e9e5; }
.route-directory-code, .route-directory-assignment, .route-directory-vehicle { display: grid; min-width: 0; gap: 4px; }
.route-directory-code strong, .route-directory-assignment strong, .route-directory-vehicle strong { overflow: hidden; color: #493c3a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.route-directory-code span, .route-directory-assignment span, .route-directory-vehicle span { overflow: hidden; color: #8c807d; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.route-directory-status, .incident-status { display: inline-flex; width: fit-content; align-items: center; justify-content: center; padding: 5px 8px; border-radius: 14px; background: #f2eeee; color: #766b6a; font-size: 8px; font-weight: 800; white-space: nowrap; }
.route-directory-status.planned { background: #f3f0eb; color: #76695a; }
.route-directory-status.active { background: #fff3df; color: #94621d; }
.route-directory-status.complete, .incident-status.resolved { background: #eaf5ee; color: #38764e; }
.route-directory-status.cancelled { background: #fbe8e7; color: #a32f35; }
.route-directory-card > .button { min-height: 31px; padding: 0 9px; font-size: 9px; }
.route-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 13px; color: #817675; font-size: 9px; }
.route-pagination > div { display: flex; gap: 6px; }
.route-pagination .button { min-height: 30px; padding: 0 9px; font-size: 9px; }
.route-detail-modal { width: min(980px, calc(100vw - 32px)); }
.route-detail-modal .modal-body { display: grid; gap: 19px; }
.route-detail-summary, .incident-context { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 0; }
.route-detail-summary > div, .incident-context > div { min-width: 0; padding: 10px; border-radius: 7px; background: #fcfaf9; }
.route-detail-summary dt, .incident-context dt { margin-bottom: 5px; color: #8c807d; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.route-detail-summary dd, .incident-context dd { margin: 0; color: #493c3a; font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.route-detail-section { min-width: 0; }
.route-detail-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.route-detail-section-heading h3 { margin: 0; font-size: 13px; }
.route-detail-section-heading > span { color: #8c807d; font-size: 9px; }
.route-load-table table { min-width: 640px; }
.route-load-table td small { display: block; margin-top: 3px; }
.route-stops-list { display: grid; gap: 7px; }
.route-stop-card { display: grid; grid-template-columns: 29px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid #eee5e1; border-radius: 8px; }
.route-stop-number { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: #f7e9e8; color: #861923; font-size: 10px; font-weight: 800; }
.route-stop-card > div { display: grid; min-width: 0; gap: 4px; }
.route-stop-card > div strong { overflow: hidden; color: #493c3a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.route-stop-card > div small { color: #8c807d; font-size: 9px; }
.route-stop-card a, .incident-evidence a { color: #8a172b; font-size: 9px; font-weight: 700; text-decoration: none; }
.route-cancellation-note { padding: 12px; border-radius: 8px; background: #fff5f4; color: #8c3a3d; font-size: 10px; }
.route-cancellation-note p { margin: 5px 0 0; line-height: 1.5; }
.deliveries-metrics, .incidents-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.deliveries-metrics article, .incidents-metrics article { display: grid; min-width: 0; min-height: 78px; align-content: center; gap: 6px; padding: 13px 15px; border: 1px solid #eee5e1; border-radius: 10px; background: white; }
.deliveries-metrics article span, .incidents-metrics article span { color: #786e6d; font-size: 9px; }
.deliveries-metrics article strong, .incidents-metrics article strong { color: #342d2d; font: 700 20px "DM Sans", sans-serif; }
.deliveries-table table { min-width: 900px; }
.deliveries-table td small { display: block; margin-top: 4px; }
.deliveries-table td .button { min-height: 29px; margin-left: 7px; padding: 0 8px; font-size: 9px; }
.delivery-status { display: inline-flex; padding: 5px 8px; border-radius: 14px; background: #fff3df; color: #94621d; font-size: 8px; font-weight: 800; white-space: nowrap; }
.delivery-status.delivered { background: #eaf5ee; color: #38764e; }
.delivery-status.cancelled { background: #fbe8e7; color: #a32f35; }
.incidents-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.incidents-workspace { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(0, 1.4fr); align-items: start; gap: 14px; }
.incidents-toolbar { display: grid; gap: 10px; margin-bottom: 12px; }
.incidents-refiners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.incident-list { display: grid; max-height: 720px; overflow-y: auto; }
.incident-list-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: start; gap: 9px; padding: 11px 8px; border: 0; border-top: 1px solid #f0e9e5; background: white; text-align: left; }
.incident-list-item:hover, .incident-list-item.active { background: #fffaf8; }
.incident-list-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #f7e9e8; color: #861923; font-size: 12px; }
.incident-list-copy { display: grid; min-width: 0; gap: 4px; }
.incident-list-copy strong { color: #493c3a; font-size: 10px; }
.incident-list-copy small, .incident-list-copy em { overflow: hidden; color: #8c807d; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.incident-status.review { background: #fff3df; color: #94621d; }
.incident-status.pending { background: #f3f0eb; color: #76695a; }
.incident-detail, .incident-detail-empty { min-width: 0; padding: 18px; border: 1px solid #eee5e1; border-radius: 11px; background: white; }
.incident-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.incident-detail-header h2 { margin: 4px 0 0; color: #342d2d; font-size: 18px; }
.incident-priority { padding: 5px 8px; border-radius: 14px; background: #fff3df; color: #94621d; font-size: 8px; font-weight: 800; white-space: nowrap; }
.incident-priority.high { background: #fbe8e7; color: #a32f35; }
.incident-description { margin: 16px 0; }
.incident-description h3, .incident-followup h3, #incident-followup-form h3, .incident-history h3 { margin: 0 0 8px; color: #493c3a; font-size: 12px; }
.incident-description p { margin: 0; color: #6d615e; font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
.incident-evidence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.incident-evidence > div { display: grid; min-width: 0; gap: 6px; padding: 10px; border-radius: 7px; background: #fcfaf9; }
.incident-evidence > div > span { color: #8c807d; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.incident-evidence small, .incident-photo-link { color: #6d615e; font-size: 9px; }
.incident-photo-link { width: fit-content; padding: 0; border: 0; background: none; color: #8a172b; font-weight: 700; }
#incident-followup-form { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid #f0e9e5; }
#incident-followup-form .field { gap: 5px; }
#incident-followup-form textarea { min-height: 76px; }
#incident-followup-form .button { justify-self: start; }
.incident-history { margin-top: 15px; padding-top: 13px; border-top: 1px solid #f0e9e5; }
.incident-history ol { display: grid; gap: 8px; margin: 0; padding-left: 19px; }
.incident-history li { padding-left: 2px; color: #6d615e; font-size: 9px; }
.incident-history li > span { margin-right: 8px; color: #8c807d; }
.incident-history li > strong { color: #493c3a; }
.incident-history li p { margin: 4px 0 0; line-height: 1.5; }
.incident-detail-empty { display: grid; min-height: 220px; align-content: center; justify-items: center; color: #8c807d; text-align: center; }
.incident-detail-empty > span { font-size: 26px; }
.incident-detail-empty h3 { margin: 10px 0 5px; color: #493c3a; font-size: 14px; }
.incident-detail-empty p { margin: 0; font-size: 10px; }
@media (max-width: 900px) {
  .routes-toolbar { grid-template-columns: minmax(0, 1fr) repeat(2, minmax(130px, .7fr)); }
  .deliveries-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .incidents-workspace { grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); }
}
@media (max-width: 640px) {
  .routes-hero, .deliveries-hero, .incidents-hero { min-height: 0; align-items: flex-start; flex-direction: column; padding: 21px; }
  .routes-hero-copy h2, .deliveries-hero-copy h2, .incidents-hero-copy h2 { font-size: 27px; }
  .routes-hero-action, .deliveries-hero-action, .incidents-hero-action { width: 100%; }
  .routes-directory, .deliveries-directory, .incidents-list-panel { padding: 14px 12px; }
  .routes-directory-heading, .deliveries-directory-heading { align-items: flex-start; flex-direction: column; }
  .routes-toolbar, .deliveries-toolbar { grid-template-columns: 1fr; }
  .route-directory-header { display: none; }
  .route-directory-card { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 11px; }
  .route-directory-card > .route-directory-code, .route-directory-card > .route-directory-assignment, .route-directory-card > .route-directory-vehicle { grid-column: 1; }
  .route-directory-card > .route-directory-status, .route-directory-card > .button { grid-column: 2; grid-row: 1; }
  .route-directory-card > .button { grid-row: 2; }
  .route-pagination { align-items: flex-start; flex-direction: column; }
  .route-detail-summary, .incident-context { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-stop-card { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .route-stop-card > a { grid-column: 2 / -1; }
  .deliveries-metrics, .incidents-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .incidents-workspace { grid-template-columns: 1fr; }
  .incident-list { max-height: 280px; }
  .incident-detail { padding: 14px; }
}
@media (max-width: 420px) {
  .incident-evidence { grid-template-columns: 1fr; }
  .incident-detail-header { flex-direction: column; }
}

.finance-content { max-width: 1600px; padding: 26px 30px 42px; }
.finance-page { display: grid; gap: 14px; color: #403735; }
.finance-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.finance-heading h2 { margin: 3px 0 5px; color: #3b3433; font: 700 23px Manrope, sans-serif; }
.finance-heading p { margin: 0; color: #8b817e; font-size: 11px; }
.finance-kicker { color: #998170; font-size: 8px; font-weight: 800; letter-spacing: 1px; }
.finance-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.finance-actions .button { min-height: 33px; font-size: 9px; }
.finance-notice { display: grid; gap: 4px; padding: 11px 13px; border: 1px solid #eadfce; border-radius: 7px; background: #fffaf1; color: #76613f; font-size: 9px; line-height: 1.45; }
.finance-notice strong { color: #634b26; font-size: 10px; }
.finance-filter-panel, .finance-panel { min-width: 0; padding: 13px; border: 1px solid #eae7e4; border-radius: 7px; background: #fff; }
.finance-fiscal-filter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.finance-fiscal-option { display: grid; gap: 4px; min-width: 0; padding: 9px 10px; border: 1px solid #ebe7e4; border-radius: 6px; background: #fff; color: #514744; text-align: left; cursor: pointer; }
.finance-fiscal-option strong { font-size: 9px; }
.finance-fiscal-option small { color: #958a86; font-size: 8px; line-height: 1.35; }
.finance-fiscal-option:hover, .finance-fiscal-option.active { border-color: #c99aa0; background: #fcf5f5; color: #82152b; }
.finance-date-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 9px; margin-top: 11px; }
.finance-date-filter .field { min-width: 150px; }
.finance-date-filter .field span { color: #817673; font-size: 8px; }
.finance-date-filter input { min-height: 33px; }
.finance-date-filter .button { min-height: 33px; font-size: 9px; }
.finance-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.finance-metric { display: grid; min-width: 0; gap: 6px; padding: 12px; border: 1px solid #eae7e4; border-radius: 7px; background: #fff; }
.finance-metric > span { color: #817673; font-size: 9px; }
.finance-metric > strong { overflow: hidden; color: #3d3533; font: 700 16px Manrope, sans-serif; text-overflow: ellipsis; }
.finance-metric > small { color: #9a908c; font-size: 8px; line-height: 1.4; }
.finance-secondary-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.finance-secondary-metric { display: grid; gap: 5px; padding: 10px; border: 1px solid #ebe7e4; border-radius: 6px; background: #fdfcfb; }
.finance-secondary-metric strong { color: #453b39; font: 700 13px Manrope, sans-serif; }
.finance-secondary-metric span { color: #8d827e; font-size: 8px; }
.finance-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px; }
.finance-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.finance-panel-heading h3 { margin: 0 0 4px; color: #423936; font-size: 11px; }
.finance-panel-heading p { margin: 0; color: #958a86; font-size: 8px; line-height: 1.4; }
.finance-panel-heading > span { color: #8c817d; font-size: 9px; }
.finance-table table { min-width: 420px; }
.finance-table th { color: #8b817e; font-size: 8px; letter-spacing: .3px; text-transform: uppercase; }
.finance-table td { color: #5a514f; font-size: 9px; }
.finance-table td strong { color: #443b39; }
.finance-panel-footnote { margin: 8px 0 0; color: #938985; font-size: 8px; }
.finance-source-panel .finance-table table { min-width: 620px; }
.finance-disclaimer { margin: 0; color: #948a86; font-size: 8px; line-height: 1.5; }
@media (max-width: 1100px) {
  .finance-content { padding: 20px 18px 34px; }
  .finance-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .finance-secondary-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .finance-content { padding: 12px 9px 24px; }
  .finance-heading { align-items: flex-start; flex-direction: column; }
  .finance-actions { width: 100%; }
  .finance-actions .button { flex: 1; }
  .finance-fiscal-filter { grid-template-columns: 1fr; }
  .finance-date-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-date-filter .field { min-width: 0; }
  .finance-date-filter .button { width: 100%; }
  .finance-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-secondary-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .finance-heading h2 { font-size: 20px; }
  .finance-actions { flex-wrap: wrap; }
  .finance-actions .button { flex: 1 1 40%; padding: 0 7px; }
  .finance-date-filter { grid-template-columns: 1fr; }
  .finance-metric { padding: 9px; }
  .finance-metric > strong { font-size: 14px; }
}
@media print {
  body.finance-print .sidebar, body.finance-print .topbar, body.finance-print .finance-actions,
  body.finance-print .finance-filter-panel, body.finance-print .finance-disclaimer, body.finance-print #toast-root { display: none !important; }
  body.finance-print .main-area { width: 100% !important; margin: 0 !important; }
  body.finance-print .finance-content { max-width: none !important; padding: 0 !important; }
  body.finance-print .finance-page { gap: 8px; }
  body.finance-print .finance-panel, body.finance-print .finance-metric { break-inside: avoid; }
}

.reports-content { max-width: 1600px; padding: 26px 30px 42px; }
.reports-page { display: grid; gap: 14px; }
.reports-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px 28px; border-radius: 13px; background: linear-gradient(112deg, #681025, #941b32); color: white; }
.reports-hero h2 { margin: 5px 0 7px; color: white; font: 700 clamp(22px, 2.2vw, 29px) Manrope, "Segoe UI", sans-serif; letter-spacing: -.7px; }
.reports-hero p { max-width: 590px; margin: 0; color: #f0dfe1; font-size: 11px; line-height: 1.6; }
.reports-kicker { color: #e6bd8c; font-size: 8px; font-weight: 700; letter-spacing: 1.4px; }
.reports-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.reports-actions .button-secondary { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.1); color: white; }
.reports-actions .button-secondary:hover { background: rgba(255,255,255,.2); }
.reports-filter-panel { display: grid; gap: 13px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.reports-fiscal-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.reports-fiscal-filter > span { margin-right: 5px; color: #817674; font-size: 10px; font-weight: 700; }
.reports-fiscal-option { min-height: 30px; padding: 0 11px; border: 1px solid #e9e1dc; border-radius: 7px; background: #fff; color: #756966; font-size: 9px; }
.reports-fiscal-option.active { border-color: #83152c; background: #f8eceb; color: #83152c; font-weight: 700; }
.reports-date-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 9px; }
.reports-date-filter .field { min-width: 145px; margin: 0; }
.reports-date-filter .field > span { display: block; margin-bottom: 5px; color: #817674; font-size: 8px; font-weight: 700; }
.reports-date-filter input { min-height: 35px; padding: 0 9px; border: 1px solid #e5ded9; border-radius: 6px; color: #514744; font-size: 10px; }
.reports-date-filter .button { min-height: 35px; }
.reports-tabs { display: flex; overflow-x: auto; gap: 6px; padding: 2px 1px 8px; scrollbar-width: thin; }
.reports-tab { min-height: 34px; flex: 0 0 auto; padding: 0 12px; border: 1px solid #e8e0dc; border-radius: 7px; background: white; color: #756966; font-size: 9px; font-weight: 600; }
.reports-tab:hover, .reports-tab.active { border-color: #83152c; background: #83152c; color: white; }
.reports-results { display: grid; gap: 12px; min-width: 0; }
.reports-results-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.reports-results-heading h2 { margin: 3px 0 4px; font-size: 17px; }
.reports-results-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.reports-count { color: #837875; font-size: 9px; white-space: nowrap; }
.reports-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.reports-metric { display: grid; min-width: 0; gap: 6px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.reports-metric > span { color: #837875; font-size: 9px; }
.reports-metric > strong { overflow-wrap: anywhere; color: #451b25; font: 700 18px Manrope, "Segoe UI", sans-serif; }
.reports-metric > small { color: #9a8e89; font-size: 8px; }
.reports-note, .reports-disclaimer { margin: 0; color: #786d68; font-size: 9px; line-height: 1.6; }
.reports-note { padding: 9px 11px; border-left: 3px solid #c89a62; border-radius: 4px; background: #fbf5ef; }
.reports-table table { min-width: 660px; }
.reports-table th { color: #8b817e; font-size: 8px; letter-spacing: .3px; text-transform: uppercase; }
.reports-table td { color: #5a514f; font-size: 9px; }
@media (max-width: 1100px) {
  .reports-content { padding: 20px 18px 34px; }
  .reports-hero { align-items: flex-start; flex-direction: column; }
  .reports-actions { justify-content: flex-start; }
}
@media (max-width: 700px) {
  .reports-content { padding: 12px 9px 24px; }
  .reports-hero { padding: 19px 16px; }
  .reports-actions { width: 100%; }
  .reports-actions .button { flex: 1; }
  .reports-fiscal-filter { align-items: stretch; }
  .reports-fiscal-filter > span { flex-basis: 100%; }
  .reports-date-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reports-date-filter .field { min-width: 0; }
  .reports-date-filter .button { width: 100%; }
  .reports-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .reports-hero h2 { font-size: 20px; }
  .reports-actions { flex-wrap: wrap; }
  .reports-actions .button { flex: 1 1 40%; padding: 0 7px; }
  .reports-date-filter { grid-template-columns: 1fr; }
  .reports-metric { padding: 10px; }
  .reports-metric > strong { font-size: 15px; }
}
@media print {
  body.reports-print .sidebar, body.reports-print .topbar, body.reports-print .reports-actions,
  body.reports-print .reports-filter-panel, body.reports-print .reports-tabs, body.reports-print .reports-disclaimer,
  body.reports-print #toast-root { display: none !important; }
  body.reports-print .main-area { width: 100% !important; margin: 0 !important; }
  body.reports-print .reports-content { max-width: none !important; padding: 0 !important; }
  body.reports-print .reports-hero { padding: 10px; background: #fff !important; color: #222; }
  body.reports-print .reports-hero h2, body.reports-print .reports-hero p { color: #222; }
  body.reports-print .reports-metric, body.reports-print .reports-results { break-inside: avoid; }
}

.users-content { max-width: 1600px; padding: 26px 30px 42px; }
.users-page { display: grid; gap: 14px; }
.users-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px 28px; border-radius: 13px; background: linear-gradient(112deg, #681025, #941b32); color: white; }
.users-hero h2 { margin: 5px 0 7px; color: white; font: 700 clamp(22px, 2.2vw, 29px) Manrope, "Segoe UI", sans-serif; letter-spacing: -.7px; }
.users-hero p { max-width: 590px; margin: 0; color: #f0dfe1; font-size: 11px; line-height: 1.6; }
.users-kicker { color: #e6bd8c; font-size: 8px; font-weight: 700; letter-spacing: 1.4px; }
.users-hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.users-hero-actions .button-secondary { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.1); color: white; }
.users-hero-actions .button-secondary:hover { background: rgba(255,255,255,.2); }
.users-local-notice { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid #ead4ab; border-radius: 8px; background: #fff8e9; color: #765a2d; font-size: 9px; line-height: 1.55; }
.users-local-notice strong { color: #65491d; font-size: 10px; }
.users-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.users-metrics article { display: grid; gap: 7px; min-width: 0; padding: 14px 15px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.users-metrics article span { color: #837875; font-size: 9px; }
.users-metrics article strong { color: #451b25; font: 700 21px Manrope, "Segoe UI", sans-serif; }
.users-directory { display: grid; gap: 12px; min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.users-directory-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.users-directory-heading h3 { margin: 0 0 4px; font-size: 14px; }
.users-directory-heading p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.users-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.users-toolbar .search-box { min-width: min(330px, 100%); }
.users-filters { display: flex; flex-wrap: wrap; gap: 5px; }
.users-filter { min-height: 28px; padding: 0 10px; border: 1px solid #e9e1dc; border-radius: 6px; background: white; color: #756966; font-size: 9px; }
.users-filter.active { border-color: #83152c; background: #f8eceb; color: #83152c; font-weight: 700; }
.users-table table { min-width: 820px; }
.users-table th { color: #8b817e; font-size: 8px; letter-spacing: .3px; text-transform: uppercase; }
.users-table td { color: #5a514f; font-size: 9px; }
.users-table td strong, .users-table td small { display: block; }
.users-table td strong { color: #443b39; }
.users-table td small { margin-top: 3px; color: #938985; font-size: 8px; }
.user-status { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 20px; background: #edf8f4; color: #278165; font-size: 8px; font-weight: 700; white-space: nowrap; }
.user-status.suspended { background: #fff4e5; color: #a46b23; }
.user-status.linked { background: #f0f2f5; color: #657184; }
.users-row-actions { flex-wrap: wrap; }
.users-row-actions .button { min-height: 29px; padding: 0 8px; font-size: 9px; }
.users-row-actions .button:disabled { opacity: .45; }
.users-modal-backdrop { z-index: 7; }
.users-modal .modal-body { display: grid; gap: 13px; }
.users-modal .field small { color: #8b817e; font-size: 8px; line-height: 1.5; }
.users-modal-notice { margin: 0; padding: 10px 12px; border-radius: 7px; background: #fff8e9; color: #765a2d; font-size: 9px; line-height: 1.5; }
@media (max-width: 1100px) {
  .users-content { padding: 20px 18px 34px; }
  .users-hero { align-items: flex-start; flex-direction: column; }
  .users-hero-actions { justify-content: flex-start; }
}
@media (max-width: 700px) {
  .users-content { padding: 12px 9px 24px; }
  .users-hero { padding: 19px 16px; }
  .users-hero-actions { width: 100%; }
  .users-hero-actions .button { flex: 1; }
  .users-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .users-toolbar { align-items: stretch; flex-direction: column; }
  .users-toolbar .search-box { width: 100%; min-width: 0; }
  .users-filters { width: 100%; }
  .users-filter { flex: 1; }
  .users-directory { padding: 12px 9px; }
  .users-modal-backdrop { padding: 9px; }
  .users-modal .form-grid { grid-template-columns: 1fr; }
  .users-modal .field-full { grid-column: auto; }
}
@media (max-width: 420px) {
  .users-hero h2 { font-size: 20px; }
  .users-hero-actions { flex-wrap: wrap; }
  .users-hero-actions .button { flex: 1 1 40%; padding: 0 7px; }
  .users-metrics article { padding: 10px; }
  .users-metrics article strong { font-size: 18px; }
}

.accounting-content { max-width: 1580px; padding: 22px 26px 36px; }
.accounting-module { display: grid; min-height: min(760px, calc(100vh - 110px)); grid-template-columns: 224px minmax(0, 1fr); overflow: hidden; border: 1px solid #e7e5e2; border-radius: 10px; background: #fafafa; color: #313131; }
.accounting-sidebar { display: flex; min-width: 0; flex-direction: column; border-right: 1px solid #e9e7e4; background: #fff; }
.accounting-brand { display: flex; align-items: center; gap: 10px; padding: 18px 15px; border-bottom: 1px solid #efeeec; }
.accounting-brand-mark { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 8px; background: #83152c; color: white; font: 700 18px Georgia, serif; }
.accounting-brand strong, .accounting-brand small { display: block; }
.accounting-brand strong { color: #382f2f; font-size: 11px; }
.accounting-brand small { margin-top: 3px; color: #958b88; font-size: 9px; }
.accounting-navigation { display: grid; align-content: start; gap: 3px; overflow-y: auto; padding: 10px 8px 16px; }
.accounting-nav-group { display: grid; gap: 2px; }
.accounting-nav-group-button, .accounting-nav-item { display: flex; width: 100%; min-height: 33px; align-items: center; justify-content: space-between; padding: 0 9px; border: 0; border-radius: 5px; background: transparent; color: #6d6563; text-align: left; font-size: 10px; }
.accounting-nav-group-button { font-weight: 700; }
.accounting-nav-group-button:hover, .accounting-nav-group-button.active { background: #f6f2f0; color: #5e1824; }
.accounting-nav-group-button > span:last-child { color: #aa9b96; font-size: 14px; }
.accounting-nav-items { display: grid; gap: 1px; padding: 1px 0 5px 9px; }
.accounting-nav-item { min-height: 30px; justify-content: flex-start; padding-left: 11px; color: #817a78; font-size: 9px; }
.accounting-nav-item:hover, .accounting-nav-item.active { background: #f8eceb; color: #82152b; font-weight: 700; }
.accounting-workspace { display: grid; min-width: 0; align-content: start; grid-template-rows: auto minmax(0, 1fr); }
.accounting-workspace-toolbar { display: flex; min-height: 55px; align-items: center; justify-content: flex-end; gap: 9px; padding: 8px 17px; border-bottom: 1px solid #e9e7e4; background: #fff; }
.accounting-search { display: flex; width: min(300px, 100%); min-height: 32px; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid #e8e5e3; border-radius: 5px; color: #8f8683; }
.accounting-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #463e3c; font-size: 10px; }
.accounting-workspace-toolbar .button { min-height: 32px; font-size: 9px; }
.accounting-page-content { display: grid; min-width: 0; align-content: start; gap: 13px; padding: 19px; }
.accounting-page-heading { display: grid; gap: 5px; margin-bottom: 1px; }
.accounting-kicker { color: #998170; font-size: 8px; font-weight: 800; letter-spacing: 1px; }
.accounting-page-heading h2, .accounting-section-heading h2 { margin: 0; color: #3b3433; font: 700 20px Manrope, sans-serif; }
.accounting-page-heading p, .accounting-section-heading p { margin: 0; color: #8b817e; font-size: 9px; line-height: 1.5; }
.accounting-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 1px 0 4px; }
.accounting-section-heading > div { display: grid; gap: 5px; }
.accounting-heading-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.accounting-heading-actions .button { min-height: 33px; padding: 0 10px; font-size: 9px; }
.accounting-primary-action { min-height: 34px; padding: 0 11px; font-size: 9px; white-space: nowrap; }
.accounting-panel { min-width: 0; padding: 14px; border: 1px solid #eae7e4; border-radius: 7px; background: white; }
.accounting-panel > h3 { margin: 0 0 12px; color: #413937; font-size: 12px; }
.accounting-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.accounting-panel-heading h3 { margin: 0 0 4px; color: #413937; font-size: 12px; }
.accounting-panel-heading p { margin: 0; color: #958a87; font-size: 9px; line-height: 1.45; }
.accounting-count { color: #8e817c; font-size: 9px; white-space: nowrap; }
.accounting-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.accounting-metric-grid-small { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.accounting-metric { display: grid; min-width: 0; gap: 6px; padding: 13px; border: 1px solid #ebe8e5; border-radius: 7px; background: white; }
.accounting-metric > span { color: #89807d; font-size: 9px; }
.accounting-metric > strong { overflow: hidden; color: #352e2d; font: 700 17px Manrope, sans-serif; text-overflow: ellipsis; }
.accounting-metric > small { color: #a49a97; font-size: 8px; }
.accounting-table table { min-width: 680px; }
.accounting-table th { color: #8b817e; font-size: 8px; letter-spacing: .35px; text-transform: uppercase; }
.accounting-table td { color: #5a514f; font-size: 9px; }
.accounting-table td strong { color: #463c3a; }
.accounting-table .button { min-height: 27px; padding: 0 8px; font-size: 8px; }
.accounting-status { display: inline-flex; width: fit-content; padding: 4px 7px; border-radius: 12px; background: #f1efeb; color: #776d68; font-size: 8px; font-weight: 700; white-space: nowrap; }
.accounting-status.pending { background: #fff3df; color: #94621d; }
.accounting-status.complete { background: #eaf5ee; color: #38764e; }
.accounting-empty-action { margin-top: 11px; min-height: 30px; font-size: 9px; }
.accounting-banks-overview { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(210px, .8fr); gap: 10px; }
.accounting-bank-chart, .accounting-bank-summary { min-width: 0; padding: 13px; border: 1px solid #eae7e4; border-radius: 7px; background: white; }
.accounting-chart-bars { display: flex; height: 105px; align-items: flex-end; justify-content: space-around; gap: 8px; padding: 6px 10px 0; border-bottom: 1px solid #eee9e6; }
.accounting-chart-bars > span { display: grid; width: 25px; height: 100%; align-content: end; justify-items: center; gap: 5px; }
.accounting-chart-bars i { display: block; width: 15px; height: var(--accounting-bar); border-radius: 3px 3px 0 0; background: #9b3344; }
.accounting-chart-bars small { color: #8e8581; font-size: 8px; }
.accounting-chart-legend { margin: 7px 0 0; color: #9b908d; font-size: 8px; }
.accounting-bank-summary { display: grid; align-content: start; gap: 9px; }
.accounting-bank-summary h3 { margin: 1px 0 3px; color: #413937; font-size: 12px; }
.accounting-bank-summary div { display: grid; gap: 3px; padding-bottom: 7px; border-bottom: 1px solid #f0edeb; }
.accounting-bank-summary div:last-child { border: 0; }
.accounting-bank-summary span { color: #8c827f; font-size: 8px; }
.accounting-bank-summary strong { color: #3d3533; font: 700 13px Manrope, sans-serif; }
.accounting-task-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.accounting-task-column { display: grid; min-width: 0; align-content: start; gap: 8px; padding: 11px; border: 1px solid #ebe7e4; border-radius: 7px; background: #fff; }
.accounting-task-column > h3 { display: flex; justify-content: space-between; margin: 0; padding-bottom: 8px; border-bottom: 1px solid #efebe9; color: #514744; font-size: 10px; }
.accounting-task-column > h3 span { color: #9b908d; }
.accounting-task-card { display: grid; gap: 6px; padding: 9px; border: 1px solid #f0eae7; border-radius: 6px; }
.accounting-task-card strong { color: #443c3a; font-size: 9px; overflow-wrap: anywhere; }
.accounting-task-card small { color: #8f8581; font-size: 8px; }
.accounting-task-card .button { min-height: 27px; font-size: 8px; }
.accounting-empty { margin: 0; padding: 14px; color: #948a86; font-size: 9px; text-align: center; }
.accounting-report-form, .accounting-settings-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; margin-bottom: 17px; }
.accounting-settings-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.accounting-settings-form > .button { grid-column: 1 / -1; justify-self: start; }
.accounting-report-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.accounting-report-category { min-width: 0; padding: 12px; border: 1px solid #eee9e6; border-radius: 7px; background: #fff; }
.accounting-report-category > p { margin: 8px 0 0; color: #938984; font-size: 9px; line-height: 1.5; }
.accounting-report-category-open, .accounting-report-card { display: flex; width: 100%; min-width: 0; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.accounting-report-category-open > span:nth-child(2), .accounting-report-card > span:nth-child(2) { display: grid; min-width: 0; flex: 1; gap: 4px; }
.accounting-report-category-open strong, .accounting-report-card strong { color: #453c39; font-size: 10px; }
.accounting-report-category-open small, .accounting-report-card small { color: #958a86; font-size: 8px; line-height: 1.4; }
.accounting-report-category-open:hover strong, .accounting-report-card:hover strong { color: #82152b; }
.accounting-report-category-open > span:last-child, .accounting-report-card > span:last-child { color: #9a8b85; font-size: 16px; }
.accounting-report-category-icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 7px; background: #f8eceb; color: #82152b; font-size: 16px; }
.accounting-report-breadcrumb { display: flex; }
.accounting-report-breadcrumb .button { min-height: 30px; font-size: 9px; }
.accounting-report-list { display: grid; gap: 8px; }
.accounting-report-card { min-height: 58px; padding: 9px; border: 1px solid #eee9e6; border-radius: 6px; }
.accounting-report-detail-heading { display: grid; gap: 12px; }
.accounting-report-detail-heading > .button { justify-self: start; min-height: 30px; font-size: 9px; }
.accounting-report-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.accounting-report-title h3 { margin: 0 0 4px; color: #413937; font-size: 15px; }
.accounting-report-title p { margin: 0; color: #958a87; font-size: 9px; line-height: 1.45; }
.accounting-report-title .button { min-height: 32px; font-size: 9px; }
.accounting-report-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.accounting-report-meta span { padding: 7px 9px; border: 1px solid #eee9e6; border-radius: 5px; background: #fcfbfa; color: #766d69; font-size: 8px; }
.accounting-report-meta strong { color: #504644; }
.accounting-report-note { margin: 0 0 11px; color: #948a86; font-size: 8px; line-height: 1.5; }
.accounting-modal.accounting-report-filter-modal, .accounting-modal.accounting-report-export-modal { width: min(100%, 520px); }
.accounting-receipt-settings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, .55fr) auto; align-items: end; gap: 10px; }
.accounting-form-grid { gap: 12px; }
.accounting-form-field-full { grid-column: 1 / -1; }
.accounting-modal { width: min(100%, 660px); }
.accounting-document-modal { width: min(100%, 720px); }
.accounting-modal .modal-header { align-items: flex-start; }
.accounting-modal .modal-header h2 { margin-top: 4px; color: #3b3433; font-size: 16px; }
.accounting-modal .modal-body { max-height: calc(88vh - 138px); }
.accounting-modal .form-hint { margin: 14px 0 0; color: #948a86; font-size: 8px; line-height: 1.5; }
.accounting-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.accounting-detail-item { display: grid; min-width: 0; gap: 4px; padding: 9px; border: 1px solid #eeeae7; border-radius: 6px; }
.accounting-detail-item span { color: #8c817d; font-size: 8px; }
.accounting-detail-item strong { overflow-wrap: anywhere; color: #463c3a; font-size: 9px; }
.accounting-journal-modal { width: min(100%, 820px); }
.accounting-journal-lines-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.accounting-journal-lines-heading h3 { margin: 0; color: #493c3a; font-size: 11px; }
.accounting-journal-lines-heading .button { min-height: 29px; padding: 0 9px; font-size: 8px; }
.accounting-journal-lines { display: grid; gap: 8px; margin-top: 9px; }
.accounting-journal-line { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(90px, .7fr) minmax(90px, .7fr) 30px; align-items: end; gap: 7px; padding: 8px; border: 1px solid #eee9e6; border-radius: 6px; }
.accounting-journal-line .field { gap: 4px; }
.accounting-journal-line .field > span { color: #817673; font-size: 8px; }
.accounting-journal-line input, .accounting-journal-line select { min-width: 0; min-height: 31px; padding: 0 7px; font-size: 9px; }
.accounting-journal-line > button { min-width: 29px; padding: 0; }
.accounting-journal-totals { display: flex; justify-content: flex-end; gap: 17px; margin-top: 10px; color: #766c69; font-size: 9px; }
.accounting-journal-totals strong { color: #433a38; }
@media (max-width: 1000px) {
  .accounting-content { padding: 16px; }
  .accounting-module { grid-template-columns: 190px minmax(0, 1fr); }
  .accounting-page-content { padding: 14px; }
  .accounting-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .accounting-content { padding: 9px; }
  .accounting-module { grid-template-columns: 1fr; overflow: visible; }
  .accounting-sidebar { max-height: 240px; border-right: 0; border-bottom: 1px solid #e9e7e4; }
  .accounting-brand { padding: 10px 12px; }
  .accounting-navigation { display: flex; max-height: 176px; flex-wrap: wrap; align-content: flex-start; gap: 3px; overflow-y: auto; padding: 7px; }
  .accounting-nav-group { flex: 0 0 auto; }
  .accounting-nav-group-button { min-height: 29px; padding: 0 7px; font-size: 9px; }
  .accounting-nav-items { max-height: 115px; overflow-y: auto; padding-left: 2px; }
  .accounting-nav-item { min-height: 27px; padding: 0 7px; font-size: 8px; }
  .accounting-workspace-toolbar { min-height: 48px; padding: 7px 9px; }
  .accounting-page-content { padding: 11px 9px; }
  .accounting-section-heading { align-items: flex-start; flex-direction: column; }
  .accounting-heading-actions { width: 100%; }
  .accounting-heading-actions .button { flex: 1; }
  .accounting-report-title { align-items: stretch; flex-direction: column; }
  .accounting-report-title .accounting-heading-actions { width: 100%; }
  .accounting-banks-overview { grid-template-columns: 1fr; }
  .accounting-task-board { grid-template-columns: 1fr; }
  .accounting-report-form, .accounting-settings-form, .accounting-receipt-settings { grid-template-columns: 1fr; }
  .accounting-settings-form > .button { grid-column: auto; }
  .accounting-journal-line { grid-template-columns: minmax(0, 1fr) minmax(90px, .7fr) minmax(90px, .7fr) 30px; }
  .accounting-journal-line .field:first-child { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .accounting-metric-grid, .accounting-metric-grid-small { grid-template-columns: 1fr 1fr; }
  .accounting-workspace-toolbar { justify-content: stretch; }
  .accounting-search { flex: 1; }
  .accounting-workspace-toolbar .button { flex: 0 0 auto; padding: 0 8px; }
  .accounting-detail-grid { grid-template-columns: 1fr; }
  .accounting-journal-line { grid-template-columns: 1fr 1fr 30px; }
  .accounting-journal-line .field:first-child { grid-column: 1 / -1; }
  .accounting-journal-line .field:nth-child(2), .accounting-journal-line .field:nth-child(3) { grid-row: 2; }
  .accounting-journal-line > button { grid-column: 3; grid-row: 2; }
  .accounting-journal-totals { flex-direction: column; align-items: flex-end; gap: 5px; }
}

.sidebar { width: 250px; padding: 26px 17px 20px; }
.main-area { margin-left: 250px; }
.brand { display: flex; min-height: 130px; flex-direction: column; justify-content: center; gap: 7px; margin: 0 0 12px; padding: 0; }
.brand-logo { display: block; width: 165px; height: auto; }
.brand-caption { color: #e6c488; font-size: 9px; letter-spacing: 3px; }
#navigation { gap: 2px; }
.nav-item { min-height: 48px; gap: 13px; padding: 10px 14px; border-radius: 11px; font-size: 16px; }
.nav-icon { display: block; width: 20px; height: 22px; flex: 0 0 20px; color: currentColor; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.topbar { min-height: 82px; padding: 0 34px; }
h1, h2, h3 { font-family: "DM Sans", "Segoe UI", sans-serif; }
.users-hero h2 { font-family: "Playfair Display", Georgia, serif; }
.users-metrics { display: flex; min-height: 52px; align-items: center; gap: 24px; padding: 10px 15px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.users-metrics article { display: flex; align-items: baseline; gap: 5px; padding: 0; border: 0; background: transparent; }
.users-metrics article span { font-size: 10px; }
.users-metrics article strong { font: 700 15px "DM Sans", sans-serif; }
.users-directory-heading p { font-size: 11px; }
.users-table th { font-size: 9px; }
.users-table td { font-size: 12px; }
.users-table td strong { font-size: 13px; }
.users-table td small { font-size: 10px; }
.user-status { font-size: 10px; }
.users-row-actions .button { min-height: 32px; font-size: 10px; }
.users-local-notice { font-size: 10px; }
.users-local-notice strong { font-size: 11px; }
.home-brand img { display: block; width: 145px; height: auto; }
.home-module-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.module-card-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 900px) {
  .sidebar { width: 250px; }
  .main-area { margin-left: 0; }
}
@media (max-width: 640px) {
  .sidebar { width: auto; padding: 9px 12px; }
  .brand { min-height: 40px; flex-direction: row; justify-content: flex-start; gap: 0; margin: 0 2px 10px; }
  .brand-logo { width: 88px; }
  .brand-caption { display: none; }
  .main-area { margin-left: 0; }
  .topbar { min-height: 55px; padding: 0 15px; }
  .users-metrics { flex-wrap: wrap; gap: 10px 18px; }
}
@media (max-width: 420px) {
  .users-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .users-metrics article { align-items: center; }
}
@media (max-width: 640px) {
  .home-brand img { width: 80px; }
}