:root {
  color-scheme: light;
  --ink: #2a1a16;
  --muted: #4b5666;
  --soft: #6b7685;
  --line: #e9edf2;
  --canvas: #fff8f1;
  --white: #fff;
  --brand: #c40000;
  --accent: #db4a15;
  --accent-dark: #c64110;
  --heading: #522018;
  --nav-active: #64261d;
  --navy: #3e1812;
  --navy-2: #542119;
  --green: #e4572e;
  --green-dark: #c4421d;
  --green-pale: #fdeee6;
  --orange: #f28c28;
  --orange-pale: #fff1e0;
  --red: #cf5e62;
  --red-pale: #fff0f0;
  --shadow: 0 6px 22px rgba(67,26,20, .045);
  font-family: "DM Sans", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 340px; color: var(--ink); background: var(--canvas); font-size: 16px; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 10; display: flex; flex-direction: column; width: 280px; padding: 25px 15px 13px; color: #cad3de; background: var(--navy); }
.brand { display: flex; align-items: center; gap: 11px; margin: 0 0 24px 5px; color: white; text-decoration: none; }
.brand-mark { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 11px; color: #3c1812; background: #ffd249; font: 800 22px Manrope, sans-serif; transform: skew(-5deg); }
.brand-copy, .dealer-copy, .profile-copy { display: grid; gap: 3px; }
.brand-copy strong { font: 800 21px Manrope, sans-serif; letter-spacing: -.9px; }
.brand-copy small { color: #b4c0cd; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; }
.dealer-switcher { display: flex; align-items: center; gap: 10px; min-height: 57px; padding: 9px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(255,255,255,.055); }
.dealer-avatar, .profile-avatar, .topbar-avatar { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; border-radius: 8px; color: #b44015; background: #f4dac7; font-size: 14px; font-weight: 700; }
.dealer-copy { flex: 1; min-width: 0; }
.dealer-copy strong, .profile-copy strong { overflow: hidden; color: #f1f4f7; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.dealer-copy small, .profile-copy small { color: #b4bfcc; font-size: 14px; }
.switcher-dots { color: #5a6066; letter-spacing: 2px; }
.main-nav { flex: 1; overflow-y: auto; padding: 20px 0 10px; scrollbar-width: thin; scrollbar-color: #405267 transparent; }
.nav-heading { margin: 0 0 8px 10px; color: #a0afc0; font-size: 13px; font-weight: 700; letter-spacing: 1.25px; }
.nav-heading-spaced { margin-top: 21px; }
.nav-item { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 38px; margin: 2px 0; padding: 0 11px; border: 0; border-radius: 6px; color: #aeb9c7; background: transparent; text-align: left; font-size: 15px; cursor: pointer; transition: color .16s, background .16s; }
.nav-item:hover { color: white; background: rgba(255,255,255,.055); }
.nav-item.active { color: #fff; background: var(--nav-active); font-weight: 600; }
.nav-item.active .nav-icon { color: #ffd558; }
.nav-icon { width: 16px; color: #92a1b2; font-size: 18px; text-align: center; }
.nav-count { margin-left: auto; color: #ffd65c; font-size: 14px; }
.sidebar-bottom { flex: 0 0 auto; }
.help-card { padding: 12px 12px 11px; border: 1px solid rgba(255,255,255,.075); border-radius: 8px; background: rgba(255,255,255,.04); }
.help-icon { display: grid; width: 23px; height: 23px; margin-bottom: 8px; place-items: center; border-radius: 6px; color: #ffd558; background: rgba(255,213,88,.12); }
.help-card strong { color: #edf2f7; font-size: 14px; }
.help-card p { margin: 4px 0 9px; color: #c3cdd9; font-size: 14px; }
.help-card a { color: #ffd558; font-size: 14px; font-weight: 600; text-decoration: none; }
.help-card a span { margin-left: 2px; }
.profile-button { display: flex; align-items: center; gap: 9px; width: 100%; margin-top: 12px; padding: 11px 3px 3px; border: 0; border-top: 1px solid rgba(255,255,255,.09); background: transparent; text-align: left; }
.profile-avatar { color: #792f23; background: #d8e4f3; }
.profile-copy { flex: 1; }
.profile-menu { color: #aab6c4; letter-spacing: 2px; }
.main-content { display: flex; min-height: 100vh; flex-direction: column; margin-left: 280px; }
.topbar { position: sticky; z-index: 5; top: 0; display: flex; height: 65px; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 0 36px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(14px); }
.breadcrumb { display: flex; align-items: center; gap: 11px; color: #383d45; font-size: 14px; }
.breadcrumb strong { color: #324153; font-weight: 600; }
.breadcrumb-separator { color: #c8ced6; }
.topbar-actions { display: flex; align-items: center; gap: 18px; }
.today-label { color: #353b43; font-size: 14px; }
.icon-button { position: relative; display: grid; width: 31px; height: 31px; place-items: center; border: 0; border-radius: 7px; color: #363d45; background: transparent; font-size: 21px; cursor: pointer; }
.icon-button:hover { background: #f1f4f6; }
.notification-button i { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border: 1px solid white; border-radius: 50%; background: #e99a48; }
.topbar-divider { width: 1px; height: 23px; background: var(--line); }
.topbar-avatar { width: 30px; height: 30px; border-radius: 50%; font-size: 14px; }
.mobile-menu { display: none; padding: 5px; border: 0; background: transparent; cursor: pointer; }
.page-content { width: 100%; max-width: 1470px; flex: 1; margin: 0 auto; padding: 32px 36px 25px; }
.page-footer { display: flex; justify-content: space-between; padding: 13px 36px 16px; border-top: 1px solid var(--line); color: #353b43; font-size: 14px; }
.footer-dot { padding: 0 4px; color: #c0c6ce; }
.privacy-lock { margin-left: 2px; color: #af725f; }
.page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 23px; }
.eyebrow { margin: 0 0 7px; color: #373e46; font-size: 13px; font-weight: 700; letter-spacing: 1.35px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 5px; color: #401812; font: 700 24px Manrope, sans-serif; letter-spacing: -.8px; }
.page-intro > div > p:last-child { margin: 0; color: #31383f; font-size: 15px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 13px; border: 1px solid transparent; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .16s, transform .16s; }
.button:active { transform: translateY(1px); }
.button-primary { color: white; background: var(--accent); box-shadow: 0 2px 5px rgba(136,45,17,.15); }
.button-primary:hover { background: var(--accent-dark); }
.button-secondary { border-color: #e5e9ee; color: #2c333b; background: white; }
.button-secondary:hover { background: #f7f9fa; }
.button-small { min-height: 29px; padding: 0 9px; font-size: 14px; }
.button-link { padding: 0; border: 0; color: var(--accent); background: transparent; font-size: 14px; font-weight: 600; cursor: pointer; }
.overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 13px; }
.metric-card { position: relative; min-height: 112px; padding: 15px 15px 13px; border: 1px solid #edf0f3; border-radius: 8px; background: white; box-shadow: var(--shadow); }
.metric-top { display: flex; align-items: center; justify-content: space-between; color: #31383f; font-size: 14px; font-weight: 500; }
.metric-icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 7px; color: #d54a18; background: #f8efe8; font-size: 16px; }
.metric-icon.orange { color: #c58238; background: #fff4e7; }
.metric-icon.blue { color: #6485ba; background: #eef3fc; }
.metric-icon.red { color: #c96b6b; background: #fff0ef; }
.metric-value { margin: 9px 0 3px; color: #4e1e17; font: 700 23px Manrope, sans-serif; letter-spacing: -.7px; }
.metric-foot { color: #383d45; font-size: 13px; }
.metric-foot .positive { color: #e14d17; font-weight: 600; }
.dashboard-row { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(250px,.8fr); gap: 14px; margin-top: 14px; }
.panel { min-width: 0; border: 1px solid #edf0f3; border-radius: 8px; background: white; box-shadow: var(--shadow); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 17px 0; }
.panel-heading h2 { margin: 0 0 4px; color: var(--heading); font: 700 16px Manrope, sans-serif; letter-spacing: -.2px; }
.panel-heading p { margin: 0; color: #353b43; font-size: 14px; }
.period-select { padding: 6px 8px; border: 1px solid #e9edf1; border-radius: 5px; color: #3b434b; background: white; font-size: 13px; }
.chart-wrap { height: 207px; padding: 7px 13px 0; }
.chart-wrap svg { width: 100%; height: 100%; overflow: visible; }
.chart-label { fill: #667281; font: 13px "DM Sans", sans-serif; }
.chart-grid { stroke: #edf0f3; stroke-dasharray: 3 4; }
.chart-area { fill: url(#chart-fill); }
.chart-line { fill: none; stroke: #ec5b27; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; }
.chart-point { fill: white; stroke: #ec5b27; stroke-width: 2; }
.lower-row { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(260px,.8fr); gap: 14px; margin-top: 14px; }
.table-wrap { width: 100%; overflow-x: auto; }
.compact-table { width: 100%; border-collapse: collapse; text-align: left; }
.compact-table th { padding: 11px 14px 9px; border-bottom: 1px solid #f0f2f5; color: #353b43; font-size: 13px; font-weight: 500; white-space: nowrap; }
.compact-table td { padding: 11px 14px; border-bottom: 1px solid #f3f5f7; color: #374354; font-size: 14px; white-space: nowrap; }
.compact-table tr:last-child td { border-bottom: 0; }
.cell-primary { color: var(--heading) !important; font-weight: 600; }
.customer-cell { display: flex; align-items: center; gap: 8px; }
.mini-avatar { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 7px; color: #44719b; background: #ecf3fa; font-size: 13px; font-weight: 600; }
.mini-avatar.v2 { color: #957443; background: #fbf3e6; }
.mini-avatar.v3 { color: #7870a3; background: #f0eef9; }
.mini-avatar.v4 { color: #875546; background: #f7efe8; }
.status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 20px; color: #8a6200; background: #fff3c4; font-size: 13px; font-weight: 600; }
.status::before { width: 5px; height: 5px; border-radius: 50%; background: currentColor; content: ""; }
.status.pending, .status.due, .status.scheduled, .status.expiring, .status.expiring-soon,
.status.finance-pending, .status.rto-pending, .status.insurance-pending, .status.pdi-pending,
.status.test-drive, .status.upcoming { color: #ba7c32; background: #fff4e5; }
.status.overdue, .status.low-stock, .status.out-of-stock, .status.cancelled, .status.lost, .status.expired { color: #c15a5c; background: #fff0ef; }
.status.draft, .status.inactive { color: #3e464f; background: #f0f2f5; }
.activity-list { padding: 3px 16px 9px; }
.activity-item { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid #f0f2f5; }
.activity-item:last-child { border: 0; }
.activity-icon { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border-radius: 7px; color: #824431; background: #f7efe9; }
.activity-icon.orange { color: #bb8038; background: #fff3e4; }
.activity-icon.blue { color: #6584ad; background: #edf2fa; }
.activity-copy { min-width: 0; }
.activity-copy strong { display: block; margin: 1px 0 3px; color: #242b33; font-size: 14px; font-weight: 600; }
.activity-copy p { margin: 0; color: #353b43; font-size: 13px; }
.activity-time { margin-left: auto; color: #383d45; font-size: 13px; white-space: nowrap; }
.section-gap { margin-top: 15px; }
.list-toolbar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #edf0f3; }
.search-wrap { position: relative; flex: 1; max-width: 310px; }
.search-icon { position: absolute; top: 50%; left: 10px; color: #353b43; font-size: 16px; transform: translateY(-50%); pointer-events: none; }
.search-input, .filter-select { width: 100%; height: 33px; padding: 0 10px; border: 1px solid #e8ecf0; border-radius: 5px; outline: none; color: #354355; background: white; font-size: 14px; }
.search-input { padding-left: 29px; }
.search-input:focus, .filter-select:focus, .form-control:focus { border-color: #bc6f58; box-shadow: 0 0 0 3px rgba(164,53,19,.09); }
.filter-select { width: auto; min-width: 115px; }
.toolbar-spacer { flex: 1; }
.record-count { color: #353b43; font-size: 14px; white-space: nowrap; }
.table-main { width: 100%; border-collapse: collapse; text-align: left; }
.table-main th { padding: 11px 15px; border-bottom: 1px solid #edf0f3; color: #31383f; font-size: 13px; font-weight: 600; white-space: nowrap; }
.table-main td { padding: 12px 15px; border-bottom: 1px solid #f0f2f5; color: #374354; font-size: 14px; white-space: nowrap; }
.table-main tr:last-child td { border-bottom: 0; }
.row-action { padding: 4px 6px; border: 0; border-radius: 4px; color: #d34917; background: transparent; font-size: 14px; font-weight: 600; cursor: pointer; }
.row-action:hover { background: #f9f2ec; }
.empty-state { padding: 34px 15px; color: #353b43; text-align: center; font-size: 14px; }
.empty-state strong { display: block; margin-bottom: 5px; color: #252c36; font-size: 15px; }
.notice-banner { display: flex; align-items: center; gap: 11px; margin: 0 0 15px; padding: 12px 14px; border: 1px solid #f3e9e1; border-radius: 7px; color: #43322d; background: #f9f3ef; font-size: 14px; }
.migration-notice { justify-content: space-between; border-color: #f1dfbd; color: #806b4b; background: #fff8eb; }
.migration-notice > span:nth-child(2) { flex: 1; }
.notice-banner strong { color: #733b2a; }
.notice-icon { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 6px; color: #d34a1a; background: #f4e7dd; }
.upload-card { display: grid; min-height: 260px; place-items: center; padding: 30px; border: 1px dashed #cbd6de; border-radius: 8px; background: rgba(255,255,255,.65); text-align: center; }
.upload-icon { display: grid; width: 48px; height: 48px; margin: 0 auto 12px; place-items: center; border-radius: 13px; color: var(--accent); background: #f8eee6; font-size: 20px; }
.upload-card h2 { margin: 0 0 6px; color: #572119; font: 700 17px Manrope, sans-serif; }
.upload-card p { max-width: 390px; margin: 0 auto 15px; color: #31383f; font-size: 14px; line-height: 1.6; }
.file-input { display: none; }
.upload-meta { margin-top: 12px; color: #383d45; font-size: 13px; }
.amort-layout { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(280px,.9fr); gap: 14px; }
.summary-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; margin-bottom: 14px; }
.summary-tile { padding: 14px; border: 1px solid #edf0f3; border-radius: 7px; background: white; }
.summary-tile span { display: block; margin-bottom: 7px; color: #31383f; font-size: 13px; }
.summary-tile strong { color: var(--heading); font: 700 19px Manrope,sans-serif; }
.donut-wrap { display: flex; align-items: center; justify-content: center; gap: 24px; min-height: 225px; padding: 16px; }
.donut { display: grid; width: 148px; height: 148px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: conic-gradient(#ec5822 0 58%, #ffd65c 58% 78%, #e9eef1 78% 100%); }
.donut-hole { display: grid; width: 103px; height: 103px; place-items: center; border-radius: 50%; background: white; text-align: center; }
.donut-hole strong { color: var(--heading); font: 700 21px Manrope,sans-serif; }
.donut-hole span { color: #353b43; font-size: 13px; }
.legend { display: grid; gap: 12px; }
.legend-item { display: flex; align-items: center; gap: 8px; color: #2d333c; font-size: 14px; }
.legend-item strong { display: block; margin-top: 3px; color: #394657; font-size: 14px; }
.legend-swatch { width: 8px; height: 8px; border-radius: 3px; background: #ec5822; }
.legend-swatch.second { background: #ffd65c; }
.legend-swatch.third { background: #e9eef1; }
.toast-region { position: fixed; z-index: 1000; inset: auto auto 26px 50%; transform: translateX(-50%); margin: 0; width: max-content; max-width: min(94vw, 540px); height: max-content; padding: 0; border: 0; background: transparent; overflow: visible; display: grid; gap: 10px; pointer-events: none; }
.toast-region:not(:popover-open):not(:empty) { display: grid; }
.toast-region:empty { display: none; }
.toast { pointer-events: auto; cursor: pointer; }
.record-dialog { width: min(540px, calc(100vw - 28px)); max-height: 90vh; padding: 0; overflow: auto; border: 1px solid #e9edf2; border-radius: 10px; box-shadow: 0 20px 70px rgba(59,23,17,.23); }
.record-dialog::backdrop { background: rgba(49,19,14,.38); backdrop-filter: blur(2px); }
.record-dialog form { padding: 22px; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 19px; }
.dialog-heading .eyebrow { margin-bottom: 5px; }
.dialog-heading h2 { margin: 0; color: var(--heading); font: 700 21px Manrope,sans-serif; }
.dialog-close { width: 28px; height: 28px; border: 0; border-radius: 6px; color: #444b52; background: #f4f6f8; font-size: 20px; cursor: pointer; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.settings-panel .panel-heading { padding-bottom: 15px; }
.settings-grid { padding: 0 17px 18px; }
.settings-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 17px 16px; border-top: 1px solid #edf0f3; }
.danger-action { color: #bb6460; }
.danger-action:hover { color: #a64441; background: #fff1ef; }
.settings-note .activity-list { padding-top: 8px; }
.form-field { display: grid; gap: 6px; min-width: 0; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { color: #2e363e; font-size: 14px; font-weight: 600; }
.form-control { width: 100%; min-height: 35px; padding: 8px 10px; border: 1px solid #e5e9ee; border-radius: 5px; outline: none; color: #334153; background: white; font-size: 14px; }
textarea.form-control { min-height: 70px; resize: vertical; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; padding-top: 14px; border-top: 1px solid #edf0f3; }
.muted { color: #51565c; }
.highlight-number { color: var(--accent); font-weight: 700; }
@media (min-width: 1600px) { .page-content { padding-right: 47px; padding-left: 47px; } }
@media (max-width: 1150px) {
  .sidebar { width: 260px; }
  .main-content { margin-left: 260px; }
  .topbar { padding: 0 24px; }
  .page-content { padding: 25px 24px 22px; }
  .overview-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .page-footer { padding-right: 24px; padding-left: 24px; }
}
@media (max-width: 780px) {
  .sidebar { width: 280px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 8px 0 26px rgba(47,18,14,.12); }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .topbar { height: 58px; padding: 0 16px; }
  .mobile-menu { display: block; }
  .breadcrumb { margin-right: auto; margin-left: 8px; }
  .today-label, .topbar-divider { display: none; }
  .topbar-actions { gap: 9px; }
  .page-content { padding: 23px 16px 20px; }
  .dashboard-row, .lower-row, .amort-layout { grid-template-columns: 1fr; }
  .page-footer { gap: 7px; padding: 12px 16px; font-size: 13px; }
}
@media (max-width: 520px) {
  .overview-grid { gap: 9px; }
  .metric-card { min-height: 104px; padding: 12px; }
  .metric-value { font-size: 20px; }
  .page-intro { align-items: flex-start; flex-direction: column; margin-bottom: 17px; }
  .page-intro .button { align-self: flex-start; }
  h1 { font-size: 21px; }
  .page-footer { flex-direction: column; }
  .list-toolbar { flex-wrap: wrap; }
  .search-wrap { flex-basis: 100%; max-width: none; }
  .toolbar-spacer { display: none; }
  .summary-strip { grid-template-columns: 1fr; gap: 8px; }
  .summary-tile { padding: 11px; }
  .summary-tile strong { font-size: 17px; }
  .donut-wrap { flex-direction: column; gap: 17px; }
  .legend { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field.full { grid-column: auto; }
  .record-dialog form { padding: 18px; }
  .settings-actions { align-items: flex-start; flex-direction: column; }
  .migration-notice { align-items: flex-start; flex-wrap: wrap; }
}

/* Login */
.login-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px 16px; background: var(--canvas); }
.login-screen[hidden], .app-shell[hidden] { display: none; }
.login-card { width: 100%; max-width: 380px; padding: 28px; border: 1px solid #edf0f3; border-radius: 10px; background: white; box-shadow: var(--shadow); }
.login-card h1 { margin: 22px 0 4px; font: 800 22px Manrope, sans-serif; }
.login-sub { margin: 0 0 18px; color: var(--muted); font-size: 15px; }
.login-brand { display: flex; align-items: center; gap: 10px; }
.login-brand strong { display: block; font: 800 18px Manrope, sans-serif; }
.login-brand small { color: var(--soft); font-size: 12px; letter-spacing: 1px; }
.login-brand .brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: white; background: var(--green); font-weight: 800; }
#login-form { display: grid; gap: 14px; }
.login-error { margin: 0; padding: 8px 10px; border-radius: 5px; color: #c15a5c; background: var(--red-pale); font-size: 14px; }
.login-error[hidden] { display: none; }
.login-submit { justify-content: center; width: 100%; }
.login-demo { display: grid; gap: 4px; margin-top: 20px; padding: 12px; border-radius: 7px; color: #43322d; background: #f9f3ef; font-size: 14px; }
.login-demo code { padding: 1px 4px; border-radius: 3px; background: white; }
.login-demo small { color: var(--muted); }

/* Roles & user management */
.role-badge { padding: 4px 8px; border-radius: 20px; font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.role-badge.role-admin { color: #d04411; background: var(--green-pale); }
.role-badge.role-user { color: #2e363e; background: #eef1f5; }
.logout-button { border: 0; border-radius: 5px; color: #aab6c4; background: transparent; font-size: 18px; cursor: pointer; }
.logout-button:hover { color: white; background: rgba(255,255,255,.1); }
.user-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; align-items: end; padding: 16px 17px 18px; }
.role-select { width: auto; min-height: 30px; }
.status.active { color: #7c3520; background: #f8efe9; }

/* Notifications dropdown */
.notif-wrap { position: relative; }
.notif-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: 340px; max-width: calc(100vw - 32px); border: 1px solid #edf0f3; border-radius: 8px; background: white; box-shadow: 0 12px 32px rgba(67,26,20,.14); }
.notif-panel[hidden] { display: none; }
.notif-head { display: flex; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 15px; }
.notif-list { max-height: 380px; overflow-y: auto; }
.notif-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: 0; border-bottom: 1px solid #f3f5f8; background: transparent; text-align: left; cursor: pointer; }
.notif-item:hover { background: #f8fafc; }
.notif-item .activity-copy { flex: 1; min-width: 0; }
.notif-item .activity-copy p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.notif-item .activity-time { font-size: 13px; }
.status.sign-in, .status.sign-out, .status.added, .status.restore, .status.backup, .status.converted, .status.printed, .status.message { color: #7c3520; background: #f8efe9; }
.status.edited, .status.user, .status.password, .status.imported { color: #ba7c32; background: #fff4e5; }
.status.deleted, .status.cleared { color: #c15a5c; background: #fff0ef; }
.sortable { cursor: pointer; user-select: none; } .sortable:hover { color: var(--green-dark); }

/* Global search */
.gsearch { position: relative; flex: 1; max-width: 340px; margin: 0 16px; }
.gsearch-input { width: 100%; height: 34px; padding: 0 12px; border: 1px solid #f1dfd2; border-radius: 17px; outline: none; color: var(--ink); background: white; font-size: 15px; }
.gsearch-input:focus { border-color: var(--green); }
.gsearch-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: 420px; max-width: calc(100vw - 32px); max-height: 380px; overflow-y: auto; border: 1px solid #edf0f3; border-radius: 8px; background: white; box-shadow: 0 12px 32px rgba(27,43,60,.14); }
.gsearch-panel[hidden] { display: none; }
.gsearch-tag { flex: 0 0 74px; padding: 3px 6px; border-radius: 10px; color: var(--green-dark); background: var(--green-pale); font-size: 13px; font-weight: 700; text-align: center; }
@media (max-width: 760px) { .gsearch { display: none; } }

/* Kanban pipeline */
.kanban { display: grid; grid-template-columns: repeat(6, minmax(190px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.kanban-col { min-height: 260px; padding: 10px; border: 1px solid #f1e1d5; border-radius: 8px; background: #fff3e8; }
.kanban-col.drag-over { outline: 2px dashed var(--green); background: #ffe9d6; }
.kanban-head { display: flex; justify-content: space-between; font-size: 15px; }
.kanban-head span { padding: 1px 8px; border-radius: 10px; color: white; background: var(--green); font-size: 14px; font-weight: 700; }
.kanban-sum { margin: 2px 0 10px; color: var(--muted); font-size: 14px; }
.kanban-card { display: grid; gap: 3px; margin-bottom: 8px; padding: 10px; border: 1px solid #f1dfd2; border-radius: 7px; background: white; box-shadow: var(--shadow); cursor: grab; font-size: 14px; }
.kanban-card strong { color: var(--ink); }
.kanban-card span { color: var(--muted); }
.kanban-late { color: var(--red); font-weight: 600; }
.kanban-move { display: flex; justify-content: space-between; }
.kanban-move button { padding: 1px 8px; border: 1px solid #f1dfd2; border-radius: 4px; color: var(--green-dark); background: transparent; cursor: pointer; }
.kanban-move button:disabled { opacity: .3; cursor: default; }
.kanban-empty { padding: 18px 6px; color: var(--soft); font-size: 14px; text-align: center; }

/* Calendar */
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.cal-legend { display: flex; align-items: center; gap: 6px; margin-left: auto; color: var(--muted); font-size: 14px; }
.cal-legend i { width: 9px; height: 9px; border-radius: 3px; }
.cal-legend .drive, .cal-event.drive { background: #ffe8d0; --edge: #f28c28; }
.cal-legend .service, .cal-event.service { background: #fff3c4; --edge: #e0b000; }
.cal-legend .delivery, .cal-event.delivery { background: #fde0da; --edge: #e4572e; }
.cal-legend .clash { background: #cf2e2e; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(130px, 1fr)); gap: 8px; overflow-x: auto; }
.cal-day { min-height: 200px; padding: 8px; border: 1px solid #f1e1d5; border-radius: 8px; background: white; }
.cal-day.today { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.cal-head { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
.cal-head span { color: var(--muted); }
.cal-event { margin-bottom: 5px; padding: 5px 6px; border-left: 3px solid var(--edge, #ccc); border-radius: 4px; color: #3a2a24; font-size: 14px; }
.cal-event.clash { border-left-color: #cf2e2e; font-weight: 700; }
.cal-empty { color: var(--soft); font-size: 14px; }

/* Reports bars, calculator, history */
.bar-list { display: grid; gap: 9px; padding: 14px 17px 17px; }
.bar-row { display: grid; grid-template-columns: 110px 1fr 80px; align-items: center; gap: 10px; font-size: 14px; }
.bar-label { overflow: hidden; color: #374354; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 9px; border-radius: 5px; background: #f6e9df; overflow: hidden; }
.bar-track i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #f6b73c, #e4572e); }
.bar-value { color: var(--ink); font-weight: 600; text-align: right; }
.calc-result { display: grid; gap: 4px; margin: 14px 17px; padding: 18px; border-radius: 8px; color: white; background: linear-gradient(135deg, #e4572e, #f28c28); }
.calc-result span { font-size: 14px; opacity: .9; }
.calc-result strong { font: 800 28px Manrope, sans-serif; }
.history-strip { padding: 14px 17px 0; }

/* Dark mode */
html[data-theme="dark"] { color-scheme: dark; --ink: #f3e7e0; --muted: #b3a39b; --soft: #8d7f78; --line: #3a2a26; --canvas: #1c1311; --white: #271b18; --shadow: 0 6px 22px rgba(0,0,0,.35); --green-pale: #3b2018; --orange-pale: #3a2a18; --red-pale: #3b1c1c; }
html[data-theme="dark"] body { color: var(--ink); background: var(--canvas); }
html[data-theme="dark"] :is(.panel, .metric-card, .summary-tile, .login-card, .notif-panel, .gsearch-panel, .record-dialog, .cal-day, .kanban-card, .upload-card, .toast, .topbar, .page-footer) { border-color: #3a2a26; background: #271b18; color: var(--ink); }
html[data-theme="dark"] :is(.form-control, .search-input, .filter-select, .period-select, .gsearch-input, .button-secondary, .login-demo code) { border-color: #4a3732; background: #1f1512; color: var(--ink); }
html[data-theme="dark"] :is(.kanban-col) { border-color: #3a2a26; background: #231815; }
html[data-theme="dark"] .kanban-col.drag-over { background: #3b2218; }
html[data-theme="dark"] :is(h1, h2, .panel-heading h2, .cell-primary, .summary-tile strong, .metric-value, .donut-hole strong, .kanban-card strong, .bar-value, .login-card h1, .breadcrumb strong, .activity-copy strong, .dealer-copy strong) { color: var(--ink); }
html[data-theme="dark"] :is(.table-main td, .compact-table td, .bar-label, .cal-event, .breadcrumb, .page-intro > div > p:last-child) { color: #d4c4bc; border-color: #3a2a26; }
html[data-theme="dark"] :is(.table-main th, .compact-table th) { border-color: #3a2a26; color: #a8978f; }
html[data-theme="dark"] :is(.table-main td, .compact-table td, .notif-item, .notif-head, .list-toolbar, .panel-heading) { border-color: #3a2a26; }
html[data-theme="dark"] .notif-item:hover { background: #33241f; }
html[data-theme="dark"] .donut-hole { background: #271b18; }
html[data-theme="dark"] :is(.bar-track) { background: #3a2a26; }
html[data-theme="dark"] .notice-banner, html[data-theme="dark"] .login-demo { border-color: #4a3732; color: #d4c4bc; background: #2f211d; }
html[data-theme="dark"] .notice-banner strong { color: #ffb08a; }
html[data-theme="dark"] .row-action { border-color: #4a3732; color: #e9d8cf; background: transparent; }
html[data-theme="dark"] .cal-event { color: #2a1a16; }

/* Round 3 additions */
.stars { color: #f2a31b; letter-spacing: 1px; font-size: 15px; }
.range-field { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 14px; }
.range-field input { height: 30px; padding: 0 6px; border: 1px solid #e5e9ee; border-radius: 5px; color: var(--ink); background: white; font-size: 14px; }
.view-select { width: auto; min-width: 120px; }
.list-toolbar { flex-wrap: wrap; row-gap: 8px; }
.lang-select { height: 30px; padding: 0 6px; border: 1px solid #f1dfd2; border-radius: 6px; color: var(--ink); background: white; font-size: 14px; }
.task-check { border: 0; background: transparent; color: var(--green); font-size: 20px; line-height: 1; cursor: pointer; }
.task-check:hover { color: var(--green-dark); }
.target-input { width: 80px; min-height: 30px; }
.photo-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 17px; }
.photo { position: relative; margin: 0; }
.photo img { display: block; width: 190px; height: 130px; object-fit: cover; border-radius: 7px; border: 1px solid #f1dfd2; }
.photo-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; color: white; background: rgba(0,0,0,.55); cursor: pointer; }
.detail-features { padding: 0 17px 10px; }
.detail-features textarea { resize: vertical; font-family: inherit; }
html[data-theme="dark"] :is(.range-field input, .lang-select) { border-color: #4a3732; background: #1f1512; color: var(--ink); }
html[data-theme="dark"] .photo img { border-color: #3a2a26; }
@media print {
  .sidebar, .topbar, .page-footer, .toast-region, .cal-toolbar, .button, .row-action { display: none !important; }
  .main-content { margin: 0 !important; }
  body { background: white; }
}

.brand-logo { width: 42px; height: 42px; object-fit: contain; flex: none; }
.login-brand .brand-logo { width: 48px; height: 48px; }
.brand { padding: 4px 8px; border-radius: 10px; background: #fff; margin: 0 0 20px; }
.brand-wordmark { display: block; width: 100%; max-width: 210px; height: auto; margin: 0 auto; }
.login-brand { justify-content: center; margin-bottom: 4px; }
.login-brand .brand-wordmark { max-width: 280px; }
.dealer-avatar.dealer-logo { background: #fff; padding: 3px; }
.dealer-avatar.dealer-logo img { width: 100%; height: 100%; object-fit: contain; }
.login-top { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 6px; }
.dealer-logo-top { width: 84px; height: 84px; object-fit: contain; }
.login-top .brand-wordmark { max-width: 280px; }
.login-partner { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); text-align: center; }
.login-partner img { width: 100%; max-width: 220px; height: auto; border-radius: 8px; }
.login-screen { background: linear-gradient(rgba(10,10,40,.35), rgba(10,10,40,.35)), url("assets/login-bg.svg") center / cover no-repeat; }
.login-card { box-shadow: 0 20px 60px rgba(0,0,20,.45); }
.login-screen { position: relative; }
.login-bg-brand { position: absolute; top: 28px; left: 36px; text-align: left; }
.login-bg-brand img { display: block; width: 300px; max-width: 60vw; height: auto; padding: 6px 14px; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,20,.35); }
.login-bg-brand p { margin: 10px 4px 0; color: #fff; font-size: 16px; font-weight: 600; text-shadow: 0 2px 8px rgba(0,0,20,.6); }
@media (max-width: 700px) { .login-bg-brand { top: 14px; left: 14px; } .login-bg-brand img { width: 190px; } .login-bg-brand p { display: none; } .login-screen { padding-top: 90px; } }
.login-bg-brand p.powered { margin-top: 4px; font-size: 15px; font-weight: 700; letter-spacing: .4px; color: #ffc23d; }
.brand-plate { display: inline-flex; flex-direction: column; align-items: center; padding: 6px 18px 10px; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,20,.35); }
.login-bg-brand .brand-plate img { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.brand-plate .powered { margin-top: -4px; color: #e8801a; font-size: 15px; font-weight: 700; letter-spacing: .4px; }

/* Login v2: split layout */
.login-screen { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(360px,.85fr); align-items: stretch; padding: 0; background: linear-gradient(100deg, rgba(8,8,40,.82) 0%, rgba(8,8,40,.45) 55%, rgba(8,8,40,.2) 100%), url("assets/login-bg.svg") center / cover no-repeat; }
.login-screen[hidden] { display: none; }
.login-hero { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 48px clamp(28px, 6vw, 90px); color: #fff; }
.login-hero h2 { max-width: 560px; margin: 8px 0 0; font: 800 clamp(28px, 3.4vw, 46px)/1.15 Manrope, sans-serif; letter-spacing: -1px; text-shadow: 0 3px 18px rgba(0,0,20,.5); }
.hero-sub { max-width: 500px; margin: 0; color: #dfe6ff; font-size: 18px; line-height: 1.55; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.hero-chips li { padding: 9px 16px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: rgba(255,255,255,.12); backdrop-filter: blur(6px); font-size: 15px; font-weight: 600; }
.login-hero .brand-plate { align-self: flex-start; padding: 8px 22px 12px; }
.login-hero .brand-plate img { width: 280px; max-width: 100%; height: auto; }
.login-panel { display: flex; align-items: center; justify-content: center; padding: 32px 24px; }
.login-card { max-width: 420px; padding: 32px 30px; border: 0; border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,20,.5); }
.login-top { margin-bottom: 8px; }
.dealer-logo-top { width: 76px; height: 76px; }
@media (max-width: 860px) {
  .login-screen { grid-template-columns: 1fr; }
  .login-hero { padding: 28px 22px 8px; gap: 12px; }
  .login-hero h2 { font-size: 26px; }
  .hero-sub, .hero-chips { display: none; }
  .login-hero .brand-plate img { width: 200px; }
}
.login-hero { justify-content: flex-start; padding-top: 44px; gap: 14px; }
.login-hero h2 { max-width: 640px; font-size: clamp(26px, 3vw, 40px); }
.login-hero { justify-content: center; align-items: center; text-align: center; padding-top: 48px; gap: 22px; }
.login-hero .brand-plate { align-self: center; }
.login-hero .brand-plate img { width: 340px; }
.login-hero h2 { margin: 0 auto; }
.hero-chips { justify-content: center; }

/* Login v3: sign-in card centred, brand plate on top, chips at the bottom */
.login-screen { display: block; position: relative; min-height: 100vh; background: linear-gradient(rgba(8,8,40,.4), rgba(8,8,40,.4)), url("assets/login-bg.svg") center / cover no-repeat; }
.login-hero { display: contents; }
.login-hero h2 { display: none; }
.login-hero .brand-plate { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); padding: 4px 18px 8px; }
.login-hero .brand-plate img { width: 190px; }
.login-hero .brand-plate .powered { font-size: 13px; }
.login-hero .hero-chips { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 94vw; }
.login-panel { min-height: 100vh; padding: 110px 16px 70px; }
@media (max-width: 860px) { .hero-chips { display: none; } .login-panel { padding: 100px 16px 30px; } }

/* Login v4: project info in the side space (wide screens) */
.hero-left, .hero-features { display: none; }
@media (min-width: 1200px) {
  .hero-chips { display: none; }
  .hero-left, .hero-features { display: block; position: absolute; top: 150px; width: min(430px, calc(50vw - 300px)); color: #fff; }
  .hero-left { left: clamp(28px, 4vw, 80px); }
  .login-hero .hero-left h2 { display: block; margin: 0 0 14px; text-align: left; font-size: clamp(26px, 2.4vw, 36px); }
  .hero-left p { margin: 0 0 22px; color: #dfe6ff; font-size: 17px; line-height: 1.6; text-shadow: 0 2px 10px rgba(0,0,20,.5); }
  .hero-stats { display: flex; gap: 12px; }
  .hero-stats div { flex: 1; padding: 12px 14px; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; background: rgba(255,255,255,.1); backdrop-filter: blur(6px); }
  .hero-stats strong { display: block; color: #ffc23d; font: 800 24px Manrope, sans-serif; }
  .hero-stats span { font-size: 13px; color: #dfe6ff; }
  .hero-features { right: clamp(28px, 4vw, 80px); margin: 0; padding: 0; list-style: none; }
  .hero-features li { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.22); border-radius: 14px; background: rgba(255,255,255,.1); backdrop-filter: blur(6px); }
  .hero-features b { display: grid; flex: none; width: 44px; height: 44px; place-items: center; border-radius: 12px; background: #fff; font-size: 22px; }
  .hero-features strong { display: block; font-size: 16px; }
  .hero-features span { color: #dfe6ff; font-size: 13.5px; }
}
@media (min-width: 1200px) { .hero-left, .hero-features { text-align: left; } .hero-left p { text-align: left; } .hero-stats div { text-align: left; } }

/* Brand plate matches the sign-in card: same width, radius and shadow */
.login-hero .brand-plate { width: min(420px, calc(100vw - 32px)); flex-direction: row; justify-content: center; gap: 14px; padding: 8px 20px; border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,20,.5); }
.login-hero .brand-plate img { width: 170px; flex: none; }
.login-hero .brand-plate .powered { margin: 0; padding-left: 14px; border-left: 2px solid #e6e9f0; color: #5b6478; font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.login-hero .brand-plate .powered b { display: block; color: #e8801a; font-size: 16px; font-weight: 800; }

/* Brand plate in the background's colours: navy-blue glass with the logo on a white chip */
.login-hero .brand-plate { background: linear-gradient(135deg, rgba(13,10,61,.88), rgba(10,75,255,.55)); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(8px); gap: 16px; padding: 8px 16px; }
.login-hero .brand-plate img { width: 160px; padding: 2px 10px; border-radius: 12px; background: #fff; }
.login-hero .brand-plate .powered { border-left-color: rgba(255,255,255,.35); color: #dfe6ff; }
.login-hero .brand-plate .powered b { color: #ffc23d; }
.login-hero .brand-plate { background: none; border: 0; box-shadow: none; backdrop-filter: none; }
@media (min-width: 1200px) { .hero-left { top: 30px; } }
@media (min-width: 1200px) {
  .hero-left { top: 150px; }
  .login-hero .brand-plate { left: clamp(28px, 4vw, 80px); transform: none; width: auto; padding: 0; top: 28px; }
}
.footer-help { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.footer-help .help-icon { color: var(--accent); }
.footer-help strong { color: var(--ink); }
.footer-help a { color: var(--accent); font-weight: 600; text-decoration: none; }
.footer-help a:hover { text-decoration: underline; }

/* Bulk WhatsApp dialog */
.bulk-dialog { width: min(860px, calc(100vw - 24px)); }
.bulk-body { display: grid; gap: 12px; padding: 4px 22px 8px; }
.bulk-tabs { display: flex; gap: 8px; }
.bulk-tab { flex: 1; padding: 10px 12px; border: 1px solid #e5e9ee; border-radius: 8px; background: #fff; color: #2f353d; font-weight: 700; cursor: pointer; }
.bulk-tab small { font-weight: 500; color: #495056; }
.bulk-tab.active { border-color: var(--accent); background: #fff3ec; color: #b73a0d; }
.bulk-label { font-size: 13px; font-weight: 600; color: #2e363e; }
.bulk-api { padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.bulk-api.ok { background: #e8f7ee; color: #176b3a; }
.bulk-api.bad { background: #fdecea; color: #a12b2b; }
.bulk-api-fields { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.bulk-api-fields .form-field:first-child { flex: 1; min-width: 240px; }
.bulk-note { margin: 0; color: #353b43; font-size: 13px; line-height: 1.5; }
.bulk-table { max-height: 300px; overflow: auto; border: 1px solid #edf0f3; border-radius: 8px; }
.bulk-table td { white-space: normal; vertical-align: top; }
.bulk-msg { max-width: 360px; color: #374354; }
.bulk-invalid { opacity: .55; }
.bulk-status { display: inline-block; margin-right: 8px; padding: 3px 8px; border-radius: 12px; font-size: 12px; font-weight: 700; }
.bulk-ok { background: #e8f7ee; color: #176b3a; } .bulk-bad { background: #fdecea; color: #a12b2b; } .bulk-wait { background: #fff3c4; color: #8a6200; }
.bulk-count { color: #353b43; font-size: 14px; }
.dialog-actions { display: flex; align-items: center; gap: 10px; padding: 12px 22px 18px; }
html[data-theme="dark"] .bulk-tab { background: #271b18; border-color: #4a3732; color: #d4c4bc; }
html[data-theme="dark"] .bulk-tab.active { background: #3b2218; color: #ffb08a; }
html[data-theme="dark"] .bulk-label, html[data-theme="dark"] .bulk-note, html[data-theme="dark"] .bulk-msg { color: #d4c4bc; }

body { font-weight: 500; }
.form-field label { font-weight: 700; color: #3a4656; }
.table-main th, .compact-table th { font-weight: 700; }
.table-main td, .compact-table td { color: #2f3b4b; font-weight: 500; }
.eyebrow, .metric-top, .metric-foot, .activity-copy p, .activity-time, .panel-heading p, .page-intro > div > p:last-child { font-weight: 500; }

/* Dark mode: text kept light after the light-mode contrast boost */
html[data-theme="dark"] .switcher-dots,
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .breadcrumb strong,
html[data-theme="dark"] .today-label,
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .page-footer,
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .page-intro > div > p:last-child,
html[data-theme="dark"] .button-secondary,
html[data-theme="dark"] .metric-top,
html[data-theme="dark"] .metric-foot,
html[data-theme="dark"] .panel-heading p,
html[data-theme="dark"] .period-select,
html[data-theme="dark"] .compact-table th,
html[data-theme="dark"] .compact-table td,
html[data-theme="dark"] .activity-copy strong,
html[data-theme="dark"] .activity-copy p,
html[data-theme="dark"] .activity-time,
html[data-theme="dark"] .search-icon,
html[data-theme="dark"] .search-input, html[data-theme="dark"] .filter-select,
html[data-theme="dark"] .record-count,
html[data-theme="dark"] .table-main th,
html[data-theme="dark"] .table-main td,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .empty-state strong,
html[data-theme="dark"] .notice-banner,
html[data-theme="dark"] .upload-card p,
html[data-theme="dark"] .upload-meta,
html[data-theme="dark"] .summary-tile span,
html[data-theme="dark"] .donut-hole span,
html[data-theme="dark"] .legend-item,
html[data-theme="dark"] .legend-item strong,
html[data-theme="dark"] .dialog-close,
html[data-theme="dark"] .form-field label,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .login-demo,
html[data-theme="dark"] .bar-label,
html[data-theme="dark"] .table-main td, html[data-theme="dark"] .compact-table td { color: #d9cbc4; }
html[data-theme="dark"] .chart-label { fill: #cdbdb5; }
html[data-theme="dark"] .form-field label { color: #e6d8d0; }
html[data-theme="dark"] .table-main td, html[data-theme="dark"] .compact-table td { color: #e6d8d0; }

/* Letter preview dialog */
.letter-dialog { width: min(780px, calc(100vw - 24px)); }
.letter-body { padding: 4px 22px 8px; }
.letter-frame-wrap { height: 62vh; overflow: hidden; border: 1px solid #dfe4f0; border-radius: 8px; background: #e9ecf3; }
.letter-frame { width: 100%; height: 100%; border: 0; }

/* Neat dialog layout: fixed header and footer, only the middle scrolls */
.bulk-dialog, .letter-dialog { overflow: hidden; border: 0; border-radius: 16px; box-shadow: 0 30px 90px rgba(20,10,60,.4); }
.bulk-dialog[open], .letter-dialog[open] { display: flex; flex-direction: column; max-height: 90vh; }
.bulk-dialog .dialog-heading, .letter-dialog .dialog-heading { flex: none; align-items: center; margin: 0; padding: 18px 24px; border-bottom: 1px solid #e6e9f2; background: linear-gradient(90deg, #f4f6ff, #fff7ee); }
.bulk-dialog .dialog-heading h2, .letter-dialog .dialog-heading h2 { font-size: 21px; color: #0d0a3d; }
.bulk-dialog .dialog-close, .letter-dialog .dialog-close { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid #dfe4f0; font-size: 22px; line-height: 1; }
.bulk-dialog .dialog-close:hover, .letter-dialog .dialog-close:hover { background: #f1f3fa; }
.bulk-body, .letter-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 24px; }
.bulk-body { gap: 14px; }
.bulk-dialog .dialog-actions, .letter-dialog .dialog-actions { flex: none; margin: 0; padding: 14px 24px; border-top: 1px solid #e6e9f2; background: #fafbff; }
.bulk-tab { padding: 12px 14px; border-radius: 10px; }
.bulk-table { max-height: none; overflow: visible; }
.bulk-table th { position: static; background: #f6f8fd; }
.bulk-table td, .bulk-table th { padding: 10px 12px; }
.bulk-dialog textarea.form-control { resize: vertical; min-height: 90px; line-height: 1.5; }
@media (max-width: 640px) {
  .bulk-dialog, .letter-dialog { width: calc(100vw - 16px); }
  .bulk-body, .letter-body, .bulk-dialog .dialog-heading, .letter-dialog .dialog-heading, .bulk-dialog .dialog-actions, .letter-dialog .dialog-actions { padding-left: 14px; padding-right: 14px; }
  .bulk-dialog .dialog-actions, .letter-dialog .dialog-actions { flex-wrap: wrap; }
}
html[data-theme="dark"] .bulk-dialog .dialog-heading, html[data-theme="dark"] .letter-dialog .dialog-heading { background: #2f211d; border-color: #3a2a26; }
html[data-theme="dark"] .bulk-dialog .dialog-heading h2, html[data-theme="dark"] .letter-dialog .dialog-heading h2 { color: #f3e7e0; }
html[data-theme="dark"] .bulk-dialog .dialog-actions, html[data-theme="dark"] .letter-dialog .dialog-actions { background: #231815; border-color: #3a2a26; }
html[data-theme="dark"] .bulk-table th { background: #2f211d; }
.letter-frame-wrap { max-height: 58vh; overflow: auto; border: 1px solid #dfe4f0; border-radius: 10px; background: #e9ecf3; padding: 10px; display: flex; justify-content: center; }
.letter-scaler { position: relative; flex: none; }
.letter-frame { position: absolute; left: 0; top: 0; border: 0; background: transparent; }

/* EMI tracker */
.emi-alert { border: 1px solid #f0b9b6; border-top: 4px solid #cf3b3b; background: #fff7f6; }
.emi-alert .panel-heading h2 { color: #a42727; }
.emi-badge { display: grid; min-width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #fff; background: #cf3b3b; font: 800 17px Manrope, sans-serif; }
.emi-clear { margin: 14px 17px 17px; padding: 14px; border-radius: 10px; color: #176b3a; background: #e8f7ee; font-weight: 600; }
.emi-watch { padding: 6px 0 4px; border-top: 1px dashed #eec9c6; }
.emi-watch h3 { margin: 14px 17px 4px; color: #8a6200; font: 700 14px Manrope, sans-serif; }
.emi-row-flagged td { background: #ffe9e7; }
.emi-row-flagged td:first-child { box-shadow: inset 4px 0 0 #cf3b3b; }
.emi-row-late td { background: #fff6dc; }
.emi-strip { grid-template-columns: repeat(4, minmax(0,1fr)); margin: 14px 17px; }
.emi-strip small { display: block; margin-top: 4px; color: #566273; }
.emi-chart-wrap { padding: 0 17px 6px; }
.emi-chart { width: 100%; height: auto; }
.emi-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 4px 0 10px; color: #374354; font-size: 13px; }
.emi-legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.emi-sched { max-height: 440px; overflow-y: auto; }
.emi-sched thead th { position: sticky; top: 0; background: #fff; z-index: 1; }
.nav-alert { min-width: 20px; padding: 1px 6px; border-radius: 10px; color: #fff !important; background: #cf3b3b; font-weight: 700; text-align: center; }
@media (max-width: 800px) { .emi-strip { grid-template-columns: 1fr 1fr; } }
html[data-theme="dark"] .emi-alert { border-color: #6a2b2b; background: #2b1717; }
html[data-theme="dark"] .emi-alert .panel-heading h2 { color: #ff9a96; }
html[data-theme="dark"] .emi-row-flagged td { background: #3d1f1f; }
html[data-theme="dark"] .emi-row-late td { background: #3a3018; }
html[data-theme="dark"] .emi-sched thead th { background: #271b18; }
html[data-theme="dark"] .emi-legend, html[data-theme="dark"] .emi-strip small { color: #d4c4bc; }
html[data-theme="dark"] .emi-chart line { stroke: #4a3732; }
.emi-alert { margin-bottom: 16px; }

/* Customer-wise EMI */
.emi-cust { border-left: 4px solid #0a4bff; }
.emi-cust-flagged { border-left-color: #cf3b3b; background: #fff7f6; }
.emi-loan { padding: 4px 0 10px; border-top: 1px solid #edf0f6; }
.emi-loan:first-of-type { border-top: 0; }
.emi-loan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 17px 0; }
.emi-loan-head small { color: #566273; }
.emi-sched-c { max-height: 300px; margin: 0 17px; border: 1px solid #edf0f6; border-radius: 8px; }
.emi-loan .emi-strip { margin: 12px 17px; }
html[data-theme="dark"] .emi-cust-flagged { background: #2b1717; }
html[data-theme="dark"] .emi-loan { border-color: #3a2a26; }
html[data-theme="dark"] .emi-loan-head small { color: #d4c4bc; }
.status.ok { color: #176b3a; background: #e3f6ea; }
.search-wrap { min-width: 220px; }
html[data-theme="dark"] .status.ok { color: #7fe0a6; background: #17301f; }
.emi-sched-c { width: auto; }

/* In-app confirm / prompt dialogs (replace browser pop-ups) */
.ui-dialog { width: min(440px, calc(100vw - 24px)); padding: 0; border: 0; border-radius: 18px; box-shadow: 0 30px 90px rgba(20,10,60,.4); }
.ui-dialog::backdrop { background: rgba(30,14,50,.45); backdrop-filter: blur(3px); }
.ui-form { padding: 24px; }
.ui-head { display: flex; gap: 14px; align-items: flex-start; }
.ui-head h2 { margin: 0 0 6px; color: #0d0a3d; font: 800 20px Manrope, sans-serif; }
.ui-head p { margin: 0; color: #4b5666; font-size: 15px; line-height: 1.5; }
.ui-icon { display: grid; flex: none; width: 44px; height: 44px; place-items: center; border-radius: 50%; color: #0a4bff; background: #e8efff; font: 800 22px Manrope, sans-serif; }
.ui-icon.ui-danger { color: #cf3b3b; background: #fdeaea; }
.ui-fields { display: grid; gap: 14px; margin-top: 18px; }
.ui-field { display: grid; gap: 6px; }
.ui-field span { color: #3a4656; font-size: 14px; font-weight: 700; }
.ui-error { margin: 12px 0 0; padding: 9px 12px; border-radius: 8px; color: #a12b2b; background: #fdecea; font-size: 14px; font-weight: 600; }
.ui-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.button-danger { color: #fff; background: #cf3b3b; border-color: #cf3b3b; }
.button-danger:hover { background: #b32f2f; }
html[data-theme="dark"] .ui-dialog { background: #271b18; color: #f3e7e0; }
html[data-theme="dark"] .ui-head h2 { color: #f3e7e0; }
html[data-theme="dark"] .ui-head p, html[data-theme="dark"] .ui-field span { color: #d4c4bc; }
html[data-theme="dark"] .ui-icon { background: #1d2a52; color: #8fb0ff; }
html[data-theme="dark"] .ui-icon.ui-danger { background: #3b1c1c; color: #ff9a96; }

/* SV logo loader */
.sv-loader { width: fit-content; height: fit-content; max-width: none; max-height: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.sv-loader::backdrop { background: rgba(255,248,241,.72); backdrop-filter: blur(5px); }
.sv-loader-card { display: grid; justify-items: center; gap: 18px; padding: 30px 44px; border-radius: 22px; background: #fff; box-shadow: 0 24px 70px rgba(30,14,80,.28); }
.sv-ring { position: relative; display: grid; width: 112px; height: 112px; place-items: center; }
.sv-ring span { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(10,75,255,0) 0deg, #0a4bff 150deg, #f7931e 300deg, rgba(247,147,30,0) 360deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); animation: sv-spin 1.1s linear infinite; }
.sv-ring img { width: 72px; height: 72px; object-fit: contain; animation: sv-pulse 1.4s ease-in-out infinite; }
.sv-loader-text { margin: 0; color: #0d0a3d; font: 700 16px Manrope, sans-serif; letter-spacing: .2px; }
@keyframes sv-spin { to { transform: rotate(360deg); } }
@keyframes sv-pulse { 0%, 100% { transform: scale(.94); opacity: .85; } 50% { transform: scale(1.04); opacity: 1; } }
html[data-theme="dark"] .sv-loader::backdrop { background: rgba(20,12,10,.7); }
html[data-theme="dark"] .sv-loader-card { background: #271b18; }
html[data-theme="dark"] .sv-loader-text { color: #f3e7e0; }
@media (prefers-reduced-motion: reduce) { .sv-ring span, .sv-ring img { animation-duration: 3s; } }
.emi-legend i.dash { width: 18px; height: 0; border-top: 3px dotted #a9bdf3; border-radius: 0; background: none; vertical-align: 3px; }
.emi-chart-wrap { padding: 6px 22px 8px; }
.emi-legend { gap: 16px; }

/* Account menu (top bar) */
.profile-wrap { position: relative; }
.profile-trigger { border: 0; cursor: pointer; transition: box-shadow .15s; }
.profile-trigger:hover, .profile-trigger[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(10,75,255,.18); }
.profile-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; width: 280px; padding: 8px; border: 1px solid #e6e9f2; border-radius: 14px; background: #fff; box-shadow: 0 18px 50px rgba(20,10,60,.22); }
.profile-menu[hidden] { display: none; }
.profile-menu-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; border-bottom: 1px solid #edf0f6; margin-bottom: 6px; }
.profile-menu-head .topbar-avatar { width: 40px; height: 40px; font-size: 15px; }
.profile-menu-head strong { display: block; color: #0d0a3d; font-size: 15px; }
.profile-menu-head small { color: #566273; font-size: 13px; }
.profile-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 9px; color: #2a3445; background: transparent; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.profile-item span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; background: #f2f5fb; font-size: 15px; }
.profile-item:hover { background: #f4f6ff; }
.profile-sep { height: 1px; margin: 6px 4px; background: #edf0f6; }
.profile-signout { color: #b32f2f; }
.profile-signout span { background: #fdeaea; }
.profile-signout:hover { background: #fff1f0; }
.forgot-link { display: block; margin: 12px auto 0; border: 0; color: #0a4bff; background: none; font-size: 14px; font-weight: 600; cursor: pointer; }
.forgot-link:hover { text-decoration: underline; }
html[data-theme="dark"] .profile-menu { border-color: #3a2a26; background: #271b18; }
html[data-theme="dark"] .profile-menu-head { border-color: #3a2a26; }
html[data-theme="dark"] .profile-menu-head strong { color: #f3e7e0; }
html[data-theme="dark"] .profile-menu-head small { color: #d4c4bc; }
html[data-theme="dark"] .profile-item { color: #eadfd8; }
html[data-theme="dark"] .profile-item span { background: #35261f; }
html[data-theme="dark"] .profile-item:hover { background: #33241f; }
html[data-theme="dark"] .profile-sep { background: #3a2a26; }
html[data-theme="dark"] .forgot-link { color: #8fb0ff; }
.profile-menu-head strong, .profile-menu-head small, .profile-item { letter-spacing: normal; text-transform: none; }

/* Lead pipeline at scale */
.kanban { grid-template-columns: repeat(var(--cols, 6), minmax(240px, 1fr)); align-items: start; }
.kanban-col { display: flex; flex-direction: column; max-height: calc(100vh - 330px); min-height: 300px; }
.kanban-head { align-items: center; }
.kh-title { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.kanban-cards { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 4px 4px 0; scrollbar-width: thin; }
.kanban-card { gap: 4px; }
.kc-top { display: flex; align-items: center; gap: 8px; }
.kc-check { flex: none; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.kc-name { flex: 1; min-width: 0; padding: 0; border: 0; color: var(--ink); background: none; font: 700 15px "DM Sans", sans-serif; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-name:hover { color: var(--accent); text-decoration: underline; }
.kc-owner { display: grid; flex: none; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #0a4bff; background: #e8efff; font-size: 11px; font-weight: 800; }
.kc-veh { color: var(--ink); }
.kc-meta { font-size: 13px; }
.kc-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; }
.kc-due { padding: 2px 8px; border-radius: 10px; color: #4b5666; background: #f1f3f8; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.kc-due-late { color: #b32f2f; background: #fdeaea; }
.kc-due-today { color: #8a5a00; background: #fff0c9; }
.kc-due-soon { color: #176b3a; background: #e3f6ea; }
.kc-actions { display: flex; align-items: center; gap: 4px; }
.kc-actions button, .kc-icon { padding: 2px 7px; border: 1px solid #f1dfd2; border-radius: 6px; color: var(--green-dark); background: #fff; font-size: 13px; line-height: 1.5; text-decoration: none; cursor: pointer; }
.kc-actions button:disabled { opacity: .3; cursor: default; }
.kc-actions button:not(:disabled):hover, .kc-icon:hover { background: #fff3ec; }
.kanban-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(215,71,17,.2); background: #fffaf6; }
.kanban-more { width: 100%; margin: 2px 0 8px; padding: 9px; border: 1px dashed #e3b9a3; border-radius: 8px; color: #b73a0d; background: #fff; font-weight: 700; cursor: pointer; }
.kanban-more small { color: #566273; font-weight: 500; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.pl-chip { padding: 8px 14px; border: 1px solid #e5e9ee; border-radius: 999px; color: #374354; background: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.pl-chip-late { color: #b32f2f; border-color: #f0b9b6; background: #fff4f3; }
.pl-chip-today { color: #8a5a00; border-color: #f2d58a; background: #fff8e6; }
.pl-chip.active { color: #fff; border-color: #0d0a3d; background: #0d0a3d; }
.pl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.pl-toolbar .search-wrap { flex: 1 1 240px; min-width: 220px; }
.pl-toolbar .filter-select { width: auto; min-width: 150px; }
.pl-check { display: flex; align-items: center; gap: 6px; color: #374354; font-size: 14px; font-weight: 600; cursor: pointer; }
.pl-bulk { position: sticky; top: 8px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border: 1px solid #0d0a3d; border-radius: 12px; color: #fff; background: #0d0a3d; box-shadow: 0 10px 30px rgba(13,10,61,.3); }
.pl-bulk select { height: 34px; padding: 0 8px; border: 0; border-radius: 6px; color: #1c2333; background: #fff; font-size: 14px; }
.pl-bulk .button-secondary { color: #0d0a3d; background: #fff; }
.pl-bulk .button-link { color: #ffc23d; }
html[data-theme="dark"] .kc-name, html[data-theme="dark"] .kc-veh { color: #f3e7e0; }
html[data-theme="dark"] .kc-actions button, html[data-theme="dark"] .kc-icon, html[data-theme="dark"] .kanban-more, html[data-theme="dark"] .pl-chip { color: #eadfd8; background: #271b18; border-color: #4a3732; }
html[data-theme="dark"] .kc-due { color: #d4c4bc; background: #35261f; }
html[data-theme="dark"] .kanban-card.is-selected { background: #33241f; }
html[data-theme="dark"] .pl-check { color: #d4c4bc; }
html[data-theme="dark"] .pl-chip.active { color: #0d0a3d; background: #ffc23d; }
.kanban-card { min-width: 0; }
.kc-foot { display: flex; align-items: center; margin-top: 2px; }
.kc-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px solid #f3e6dc; }
.kc-arrows, .kc-comm { display: flex; gap: 6px; }
.kc-icon { display: inline-grid; place-items: center; width: 34px; height: 30px; padding: 0 !important; }
.kc-comm .kc-icon:last-child { color: #1f9d55; }
.kc-comm .kc-icon:first-child { color: #0a4bff; }
.kc-arrows button { width: 34px; height: 30px; padding: 0 !important; }
html[data-theme="dark"] .kc-actions { border-color: #3a2a26; }

/* Save status in the top bar */
.sync-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.sync-pill i { font-style: normal; font-size: 11px; }
.sync-ok { color: #176b3a; background: #e3f6ea; }
.sync-busy { color: #8a5a00; background: #fff0c9; }
.sync-bad { color: #a12b2b; background: #fdeaea; }
.sync-busy i { display: inline-block; animation: sv-spin 1s linear infinite; }
html[data-theme="dark"] .sync-ok { color: #7fe0a6; background: #17301f; }
html[data-theme="dark"] .sync-busy { color: #ffd37a; background: #3a3018; }
html[data-theme="dark"] .sync-bad { color: #ff9a96; background: #3b1c1c; }
@media (max-width: 900px) { .sync-pill { display: none; } }

/* Letter preview v2 */
.letter-dialog { width: min(900px, calc(100vw - 24px)); }
.letter-dialog .dialog-heading h2 { margin: 0; }
.letter-sub { margin: 3px 0 0; color: #566273; font-size: 13.5px; }
.letter-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 24px; overflow: hidden; }
.letter-stage { display: flex; justify-content: center; align-items: flex-start; height: min(68vh, 760px); overflow: auto; border-radius: 12px; background: radial-gradient(circle at 50% 0, #eef1fa, #dfe4f1); padding: 12px; }
.letter-scaler { position: relative; flex: none; box-shadow: 0 14px 40px rgba(20,24,70,.28), 0 2px 6px rgba(20,24,70,.15); background: #fff; }
.letter-frame { position: absolute; left: 0; top: 0; border: 0; background: #fff; }
.letter-pager { display: flex; align-items: center; justify-content: center; gap: 14px; }
.letter-count { min-width: 260px; text-align: center; color: #374354; font-size: 14px; font-weight: 600; }
html[data-theme="dark"] .letter-sub, html[data-theme="dark"] .letter-count { color: #d4c4bc; }
html[data-theme="dark"] .letter-stage { background: radial-gradient(circle at 50% 0, #2c2420, #1d1714); }

/* Letter preview: warm theme to match the SV-red letters */
.letter-dialog .dialog-heading { background: linear-gradient(90deg, #fff3f1, #fff); }
.letter-stage { background: radial-gradient(circle at 50% 0, #f4eeee, #e6dcdc); }
html[data-theme="dark"] .letter-dialog .dialog-heading { background: #2f211d; }
html[data-theme="dark"] .letter-stage { background: radial-gradient(circle at 50% 0, #2c2420, #1d1714); }

/* Customer ID under names + history finder */
.cust-wrap { display: grid; gap: 2px; }
.cid { margin-left: 34px; color: #7b6a6a; font-size: 12px; font-weight: 600; letter-spacing: .3px; }
.history-find { min-width: 280px; height: 36px; padding: 0 10px; }
html[data-theme="dark"] .cid { color: #c9b6ae; }
.cid.plain { margin-left: 0; }

/* ---- Vehicle sale desk ---- */
.sale-dialog { width: min(1020px, calc(100vw - 24px)); max-height: 94vh; display: flex; flex-direction: column; overflow: hidden; }
.sale-dialog[open] { display: flex; }
.sale-form { display: flex; flex-direction: column; min-height: 0; max-height: 94vh; padding: 0 !important; }
.sale-form .dialog-heading { flex: none; margin: 0; padding: 16px 22px; border-bottom: 1px solid #edf0f3; background: linear-gradient(90deg, #fff4f2, #fff9f0); }
.sale-form .dialog-actions { flex: none; margin: 0; padding: 12px 22px; border-top: 1px solid #edf0f3; background: #fffdfb; }
.sale-body { flex: 1; min-height: 0; overflow: auto; padding: 16px 22px 8px; }
.sale-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.sale-tile { padding: 11px 13px; border: 1px solid #edf0f3; border-left: 4px solid var(--brand); border-radius: 7px; background: #fff; }
.sale-tile span { display: block; margin-bottom: 4px; color: #3a424a; font-size: 12.5px; font-weight: 600; }
.sale-tile strong { color: #3b1711; font: 800 18px Manrope, sans-serif; }
.sale-tile.warn { border-left-color: #d97706; background: #fffaf0; }
.sale-tile.ok { border-left-color: #15803d; background: #f3fbf5; }
.sale-tile.bad strong { color: #b91c1c; }
.sale-sec { margin-bottom: 14px; padding: 14px 16px 16px; border: 1px solid #edf0f3; border-radius: 9px; background: #fff; }
.sale-sec h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 0 0 12px; color: var(--heading); font: 800 16px Manrope, sans-serif; }
.sale-sec h3 small { flex-basis: 100%; margin-left: 33px; color: #4b5560; font: 500 12.5px "DM Sans", sans-serif; }
.sale-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; font: 800 12px Manrope, sans-serif; }
.sale-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-hint { color: #4b5560; font-size: 12.5px; }
.sale-locked { margin: 0; padding: 10px 12px; border-radius: 7px; background: #f6f7f9; color: #4b5560; font-size: 13.5px; }
.sale-table { margin-bottom: 10px; }
.sale-files { margin: 12px 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.sale-files li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 11px; border: 1px solid #edf0f3; border-radius: 7px; background: #fffdfb; }
.sale-files a { color: #8c0a0a; font-weight: 700; }
.sale-files small { color: #4b5560; }
.sale-files .muted { color: #4b5560; }
.sale-files .row-action { margin-left: auto; }
.sale-uploads, .sale-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.sale-uploads .button { cursor: pointer; }
.sale-status { display: inline-block; padding: 8px 12px; border-radius: 7px; font-weight: 700; font-size: 13.5px; }
.sale-status.ok { background: #e8f6ec; color: #14612f; }
.sale-status.warn { background: #fff3df; color: #8a4b00; }
.sale-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sale-rate .form-control { flex: 1; min-width: 200px; }
.stars-input { display: flex; gap: 2px; }
.star-btn { border: 0; background: none; color: #c9ced4; font-size: 30px; line-height: 1; cursor: pointer; padding: 0 2px; }
.star-btn.on { color: #f59e0b; }
.star-btn:hover { transform: scale(1.12); }
.chip { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.chip-ok { background: #e8f6ec; color: #14612f; }
.chip-warn { background: #fff3df; color: #8a4b00; }
.amount-due { color: #b91c1c; font-weight: 800; }
.amount-clear { color: #14612f; font-weight: 700; }
@media (max-width: 760px) {
  .sale-grid3 { grid-template-columns: 1fr; }
  .sale-body { padding: 12px 12px 6px; }
  .sale-form .dialog-heading, .sale-form .dialog-actions { padding-left: 14px; padding-right: 14px; }
}
html[data-theme="dark"] :is(.sale-sec, .sale-tile, .sale-files li) { border-color: #3a2a26; background: #271b18; color: var(--ink); }
html[data-theme="dark"] :is(.sale-sec h3, .sale-tile strong, .sale-files a) { color: var(--ink); }
html[data-theme="dark"] :is(.sale-tile span, .field-hint, .sale-files small, .sale-locked) { color: #e6d8d0; }
html[data-theme="dark"] .sale-locked { background: #2f211d; }
html[data-theme="dark"] .sale-form .dialog-heading, html[data-theme="dark"] .sale-form .dialog-actions { background: #2f211d; border-color: #3a2a26; }

/* ---- Finance desk ---- */
.fin-photo { display: inline-flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; }
.fin-photo img { width: 120px; height: 150px; object-fit: cover; border: 2px solid var(--brand); border-radius: 8px; background: #f4f6f8; }
.fin-photo small { color: #4b5560; font-weight: 600; }
.sale-sec button[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- Daybook, reminders, backup status ---- */
.day-input { width: auto; }
.daybook-strip { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.mode-list { display: block; font-size: 14px !important; line-height: 1.5; }
.offsite-list { margin: 0; padding: 4px 22px 18px; list-style: none; display: grid; gap: 10px; }
.offsite-list li { color: #2e363e; font-size: 14px; line-height: 1.5; }
.offsite-list code { padding: 1px 5px; border-radius: 4px; background: #f4f6f8; font-size: 12.5px; word-break: break-all; }
html[data-theme="dark"] .offsite-list li { color: #e6d8d0; }
html[data-theme="dark"] .offsite-list code { background: #2f211d; }

/* ---- Branches ---- */
.branch-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 6px 11px; border: 1px solid #f0cfc9; border-radius: 999px; background: #fff4f2; color: #7a0a0a; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.branch-pill select { max-width: 170px; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; outline: none; }
.branch-pill.branch-none { background: #fff3df; border-color: #f2d49b; color: #8a4b00; }
.branch-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 8px 10px; border: 1px solid #edf0f3; border-radius: 8px; }
.branch-checks legend { padding: 0 6px; color: #2e363e; font-size: 13px; font-weight: 700; }
.branch-checks label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.ui-fields.branch-checks { flex-direction: column; flex-wrap: nowrap; }
.letter-branch { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #3a4656; }
.letter-branch select { padding: 7px 10px; border: 1px solid #dfe4f0; border-radius: 8px; background: #fff; font: inherit; }
html[data-theme="dark"] .branch-pill { background: #2f211d; border-color: #3a2a26; color: #f3d9d2; }
html[data-theme="dark"] :is(.branch-checks legend, .letter-branch) { color: #e6d8d0; }
@media (max-width: 760px) { .branch-pill { max-width: 150px; } }

/* ---- Dashboard branch cards ---- */
.branch-strip { margin-bottom: 16px; }
.branch-strip-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.branch-strip-head h2 { margin: 0; color: var(--heading); font: 800 16px Manrope, sans-serif; }
.branch-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.branch-card { display: grid; gap: 6px; padding: 14px; border: 1px solid #edf0f3; border-left: 4px solid #d9c9c5; border-radius: 9px; background: #fff; text-align: left; font: inherit; color: inherit; cursor: pointer; box-shadow: var(--shadow); transition: transform .12s, border-color .12s; }
.branch-card:hover { transform: translateY(-2px); border-left-color: var(--brand); }
.branch-card.active { border-color: var(--brand); border-left-color: var(--brand); background: #fff6f4; }
.branch-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.branch-card-head strong { color: #3b1711; font: 800 15px Manrope, sans-serif; }
.branch-card-head em { padding: 2px 8px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 11px; font-style: normal; font-weight: 700; white-space: nowrap; }
.branch-card small { color: #4b5560; font-size: 12.5px; }
.branch-card-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 10px; margin-top: 4px; font-size: 12.5px; color: #3a424a; }
.branch-card-stats b { margin-right: 5px; color: #3b1711; font: 800 15px Manrope, sans-serif; }
.branch-card-val { padding-top: 6px; border-top: 1px dashed #e6dcd9; color: #14612f; font-weight: 700; font-size: 13px; }
html[data-theme="dark"] .branch-card { border-color: #3a2a26; background: #271b18; }
html[data-theme="dark"] .branch-card.active { background: #33201b; }
html[data-theme="dark"] :is(.branch-card-head strong, .branch-card-stats b, .branch-strip-head h2) { color: var(--ink); }
html[data-theme="dark"] :is(.branch-card small, .branch-card-stats) { color: #e6d8d0; }

/* ---- Page access picker ---- */
.page-access { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
.page-access .pa-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; padding: 8px 4px 2px; max-height: 240px; overflow: auto; }
.page-access .pa-mode { font-weight: 700; }
.page-access .pa-list[hidden] { display: none; }

.field-hint.cid-ok { color: #14612f; font-weight: 700; }
.field-hint.cid-bad { color: #b91c1c; font-weight: 700; }

/* ---- Colour themes (a showroom picks one; Crimson is the default defined in :root) ---- */
html[data-palette="ocean"] { --brand: #0b5cad; --accent: #1666c1; --accent-dark: #0f4f9f; --heading: #0d2f52; --nav-active: #1d507f; --navy: #0d2a4a; --navy-2: #143d68; --canvas: #f3f8fd; --green: #2b7bd1; --green-dark: #1b62b0; --green-pale: #e4effb; }
html[data-palette="emerald"] { --brand: #0f7b4f; --accent: #12905b; --accent-dark: #0c744a; --heading: #0c3b2a; --nav-active: #1a5c42; --navy: #0b3325; --navy-2: #11452f; --canvas: #f3faf6; --green: #1fa56f; --green-dark: #178a5b; --green-pale: #e3f6ec; }
html[data-palette="violet"] { --brand: #6a2fb5; --accent: #7c3aed; --accent-dark: #6527cc; --heading: #2e1760; --nav-active: #4a2590; --navy: #26124e; --navy-2: #371a6e; --canvas: #f8f5ff; --green: #8b5cf6; --green-dark: #6d3fd9; --green-pale: #efe8fe; }
html[data-palette="slate"] { --brand: #374151; --accent: #3b4a63; --accent-dark: #2d3a50; --heading: #1f2937; --nav-active: #3a475a; --navy: #1f2733; --navy-2: #2b3544; --canvas: #f6f7f9; --green: #4b5d7a; --green-dark: #3b4a63; --green-pale: #e9edf3; }

/* ---- Plans, showrooms, branding ---- */
.plan-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font: 800 12px Manrope, sans-serif; letter-spacing: .02em; white-space: nowrap; }
.plan-silver { background: #eceff3; color: #374151; border: 1px solid #cfd5dd; }
.plan-gold { background: #fff3cf; color: #7a5200; border: 1px solid #f0cf72; }
.plan-premium { background: #efe8fe; color: #4b21a8; border: 1px solid #cdb8f6; }
.usage { padding: 4px 22px 20px; }
.usage-bar { height: 10px; border-radius: 99px; background: #edf0f3; overflow: hidden; margin: 6px 0 6px; }
.usage-bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.plan-list { padding: 4px 22px 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px 26px; }
.plan-features { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.plan-features li { font-size: 14px; color: #2e363e; }
.plan-features li.off { color: #8a929b; }
.plan-features li span { display: inline-block; width: 22px; }
.sr-group { margin: 8px 0 4px; }
.sr-group > b { color: var(--heading); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.sr-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; margin-top: 6px; }
.sr-feature { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 600; }
.pm-table .pm-cell { text-align: center; width: 150px; }
.pm-table .pm-group td { background: #fbf4f1; font-weight: 800; color: var(--heading); text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }
.pm-yes { color: #14612f; font-weight: 800; font-size: 17px; }
.pm-no { color: #b3bac2; }
.logo-row { display: flex; align-items: center; gap: 16px; }
.logo-row img { width: 84px; height: 84px; object-fit: contain; padding: 6px; border: 1px solid #e3e7ec; border-radius: 12px; background: #fff; }
.theme-row { display: flex; flex-wrap: wrap; gap: 10px; }
.theme-swatch { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 2px solid #e3e7ec; border-radius: 10px; background: #fff; font: 700 13px "DM Sans", sans-serif; cursor: pointer; }
.theme-swatch .sw { display: inline-flex; border-radius: 6px; overflow: hidden; }
.theme-swatch .sw i { display: block; width: 14px; height: 24px; }
.theme-swatch.selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
html[data-theme="dark"] :is(.theme-swatch, .logo-row img) { background: #271b18; border-color: #3a2a26; color: var(--ink); }
html[data-theme="dark"] .plan-features li { color: #e6d8d0; }
html[data-theme="dark"] .plan-features li.off { color: #8f817a; }
html[data-theme="dark"] .pm-table .pm-group td { background: #2f211d; }

/* show/hide password button */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > input { width: 100%; padding-right: 44px; }
.pw-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #7a6a66; cursor: pointer; }
.pw-eye:hover, .pw-eye:focus-visible { color: var(--brand, #b9382f); background: rgba(0,0,0,.05); outline: none; }
html[data-theme="dark"] .pw-eye { color: #cdbcb7; }

/* login: supporting partner (LapupTech) and support contacts */
.partner-logo { flex: none; aspect-ratio: 580 / 520; border-radius: 8px; background: #fcfcfc url("assets/lapuptech.jpg") 50% 46.6% / 276% auto no-repeat; }
.partner-label { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.partner-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; padding: 0; list-style: none; text-align: left; }
.partner-contacts a { display: flex; flex-direction: column; padding: 6px 9px; border-radius: 8px; color: inherit; text-decoration: none; }
.partner-contacts b { font-size: 13px; }
.partner-contacts span { font-size: 13px; font-weight: 700; letter-spacing: .3px; }
/* in the sign-in card (screens too narrow for the corner) */
.partner-inline { margin-top: 14px; text-align: center; }
.partner-inline .partner-logo { width: 100%; max-width: 200px; margin: 0 auto 10px; }
.partner-inline .partner-label { color: var(--muted, #6b7280); }
.partner-inline .partner-contacts a { border: 1px solid var(--line, #e5e7eb); }
.partner-inline .partner-contacts span { color: var(--brand, #b9382f); }
.partner-corner { display: none; }
@media (min-width: 1200px) {
  .partner-inline { display: none; }
  .partner-corner { display: flex; align-items: center; gap: 14px; position: absolute; top: 22px; right: clamp(28px, 4vw, 80px); width: min(430px, calc(50vw - 300px)); padding: 10px 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 14px; background: rgba(255,255,255,.1); backdrop-filter: blur(6px); color: #fff; }
  .partner-corner .partner-logo { width: 104px; }
  .partner-corner .partner-info { flex: 1; min-width: 0; }
  .partner-corner .partner-label { color: #dfe6ff; }
  .partner-corner .partner-contact-title { margin-top: 2px; color: #ffc23d; }
  .partner-corner .partner-contacts a { padding: 3px 6px; background: rgba(255,255,255,.1); }
  .partner-corner .partner-contacts b { font-size: 12.5px; }
  .partner-corner .partner-contacts span { color: #ffc23d; font-size: 12.5px; }
}
@media (min-width: 1200px) { .hero-features { top: 186px; } .partner-corner { top: 18px; } }
.brand-shoplogo { display: block; max-width: 100%; max-height: 84px; margin: 0 auto; object-fit: contain; }
@media (min-width: 1200px) { .hero-left { top: 80px; } }
/* Shop header: round logo badge beside the shop name - compact, no big logo plate */
.brand.brand-shop { display: flex; align-items: center; gap: 12px; padding: 12px; margin: 0 0 18px; border-radius: 16px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.brand-badge { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 2px solid #ffc23d; box-shadow: 0 0 0 4px rgba(255,194,61,.22), 0 6px 14px rgba(0,0,0,.35); overflow: hidden; }
.brand-shoplogo { display: block; width: 100%; height: 100%; max-height: none; margin: 0; padding: 7px; object-fit: contain; }
.brand-shopcopy { display: grid; gap: 3px; min-width: 0; color: #fff; }
.brand-shopcopy strong { overflow: hidden; font: 800 16px/1.2 Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.brand-shopcopy small { overflow: hidden; color: #f3c9a8; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.brand.brand-shop:hover .brand-badge { box-shadow: 0 0 0 5px rgba(255,194,61,.38), 0 6px 14px rgba(0,0,0,.35); }
/* Parent tabs: each section heading has its own colour and icon chip */
.nav-heading { display: flex; align-items: center; gap: 9px; margin: 0 0 8px 6px; padding: 5px 10px 5px 5px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--hc) 24%, transparent), transparent 85%); color: var(--hc); font-weight: 800; letter-spacing: 1.4px; --hc: #a0afc0; }
.nav-heading-icon { display: grid; flex: none; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: var(--hc); color: #2a0b08; font-size: 13px; letter-spacing: 0; box-shadow: 0 0 10px color-mix(in srgb, var(--hc) 55%, transparent); }
.nav-heading-workspace { --hc: #ffc23d; }
.nav-heading-aftersales { --hc: #4fd1a5; }
.nav-heading-business { --hc: #ff8a5b; }
.nav-heading-platform { --hc: #b18cff; }
.nav-heading-setup { --hc: #7fb5ff; }
/* Parent tabs as fold-away sections: coloured card header, count, chevron */
button.nav-heading { width: calc(100% - 4px); margin: 0 0 6px 2px; padding: 7px 10px 7px 7px; border: 1px solid color-mix(in srgb, var(--hc) 35%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--hc) 12%, rgba(255,255,255,.03)); font-family: inherit; font-size: 12.5px; text-align: left; cursor: pointer; transition: background .2s, border-color .2s; }
button.nav-heading:hover { background: color-mix(in srgb, var(--hc) 22%, rgba(255,255,255,.04)); border-color: var(--hc); }
.nav-heading-text { flex: 1; }
.nav-heading-count { padding: 1px 8px; border-radius: 999px; background: rgba(0,0,0,.28); color: #fff; font-size: 11px; letter-spacing: 0; }
.nav-heading-chevron { font-size: 16px; line-height: 1; transition: transform .25s; }
.nav-heading[aria-expanded="false"] .nav-heading-chevron { transform: rotate(-90deg); }
.nav-group { margin: 0 0 4px 12px; padding-left: 6px; border-left: 2px solid rgba(255,255,255,.1); }
.nav-group.is-closed { display: none; }
.nav-heading-workspace + .nav-group { border-left-color: #ffc23d66; }
.nav-heading-aftersales + .nav-group { border-left-color: #4fd1a566; }
.nav-heading-business + .nav-group { border-left-color: #ff8a5b66; }
.nav-heading-platform + .nav-group { border-left-color: #b18cff66; }
.nav-heading-setup + .nav-group { border-left-color: #7fb5ff66; }
/* Signed-in user: own card under the shop header */
.sidebar-user { margin: 0 0 14px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(0,0,0,.2); }
.sidebar-user .profile-button { margin-top: 0; padding: 0; border-top: 0; }
.sidebar-user .profile-avatar { width: 38px; height: 38px; border-radius: 50%; }
/* Tighter spacing in the sidebar header */
.sidebar { padding-top: 12px; }
.brand.brand-shop { gap: 10px; padding: 8px 10px; margin: 0 0 8px; }
.brand-badge { width: 48px; height: 48px; }
.brand-shoplogo { padding: 6px; }
.brand-shopcopy { gap: 1px; }
.brand-shopcopy strong { font-size: 15px; }
.brand-shopcopy small { font-size: 12px; }
.sidebar-user { margin: 0 0 4px; padding: 6px 9px; border-radius: 12px; }
.sidebar-user .profile-avatar { width: 34px; height: 34px; font-size: 13px; }
.sidebar-user .profile-copy { gap: 0; }
.sidebar-user .profile-copy strong { font-size: 13.5px; }
.sidebar-user .profile-copy small { font-size: 12px; }
.main-nav { padding-top: 8px; }
/* Highlighted signed-in user card - warm gold on the sidebar's maroon */
.sidebar-user { position: relative; border-color: rgba(255,194,61,.32); background: linear-gradient(135deg, rgba(255,194,61,.14), rgba(255,255,255,.04) 60%, rgba(0,0,0,.12)); box-shadow: 0 4px 12px rgba(0,0,0,.22); }
.sidebar-user::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #ffc23d, #f7931e); }
.sidebar-user .profile-avatar { position: relative; overflow: visible; border: 2px solid #ffc23d; color: #7a2a14; background: #fff3e4; font-weight: 800; }
.sidebar-user .profile-avatar::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border: 2px solid #3a1511; border-radius: 50%; background: #5fd08f; }
.sidebar-user .profile-copy strong { color: #fff; font-size: 14.5px; font-weight: 700; }
.sidebar-user .profile-copy small { justify-self: start; margin-top: 2px; padding: 1px 9px; border: 1px solid rgba(255,194,61,.45); border-radius: 999px; background: rgba(255,194,61,.16); color: #ffd98a; font-size: 10.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }
.sidebar-user .logout-button { color: #f1d6c4; }
.sidebar-user .logout-button:hover { color: #fff; background: rgba(255,194,61,.2); }
/* Icon buttons in the user card: clear icons with a hover label */
.sidebar-user .logout-button { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 9px; }
.sidebar-user .logout-button[data-action="logout"]:hover { color: #ffb4a8; background: rgba(255,90,70,.22); }
.sidebar-user .logout-button[data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); right: -4px; z-index: 30; padding: 4px 9px; border-radius: 7px; background: #1d0f0c; border: 1px solid rgba(255,194,61,.4); color: #ffe3a8; font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity .15s, transform .15s; box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.sidebar-user .logout-button[data-tip]:hover::after, .sidebar-user .logout-button[data-tip]:focus-visible::after { opacity: 1; transform: none; }
/* Customer history: live customer search */
.history-search { position: relative; width: min(380px, 100%); }
.history-search .history-find { width: 100%; }
.history-results { position: absolute; top: calc(100% + 6px); right: 0; left: 0; z-index: 20; margin: 0; padding: 6px; list-style: none; border: 1px solid #e6d9d2; border-radius: 12px; background: #fff; box-shadow: 0 14px 34px rgba(60,20,10,.18); max-height: 340px; overflow-y: auto; }
.history-results button { display: grid; gap: 2px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.history-results button:hover { background: #fdecdf; }
.history-results small { color: #7a6a63; font-size: 12.5px; }
.history-none { padding: 10px; color: #7a6a63; font-size: 14px; }
html[data-theme="dark"] .history-results { background: #271b18; border-color: #3a2a26; }
html[data-theme="dark"] .history-results button:hover { background: #3a2a26; }
/* Platform admin inside a showroom's Setup */
.shop-banner { display: grid; gap: 6px; margin: 0 0 8px; padding: 8px 10px; border: 1px dashed rgba(255,194,61,.6); border-radius: 12px; background: rgba(255,194,61,.1); color: #ffd98a; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.shop-banner button { justify-self: start; padding: 4px 10px; border: 1px solid rgba(255,194,61,.5); border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: 12px; letter-spacing: 0; text-transform: none; cursor: pointer; }
.shop-banner button:hover { background: rgba(255,194,61,.2); }
/* Aadhaar details summary on a saved sale / finance file */
.aadhaar-summary { display: grid; gap: 4px; margin: 6px 0 10px; padding: 10px 12px; border: 1px solid #ecdcd2; border-radius: 10px; background: #fff8f2; }
.aadhaar-summary .ad-row { display: flex; gap: 10px; font-size: 14px; }
.aadhaar-summary .ad-row span { flex: none; min-width: 120px; color: #7a6a63; }
.aadhaar-summary .ad-row em { color: #b07a1a; font-style: normal; }
.aadhaar-summary button { justify-self: start; margin-top: 4px; }
html[data-theme="dark"] .aadhaar-summary { background: #2b1d19; border-color: #3a2a26; }
/* Frozen fields: IDs the system creates (customer ID, finance file no., delivery note no.) */
.form-control[readonly] { background: #f4ede9; color: #6a5a53; font-weight: 700; cursor: not-allowed; border-style: dashed; }
html[data-theme="dark"] .form-control[readonly] { background: #2b1d19; color: #cdbdb5; }
/* MotorHub as words only (no picture logo) */
.mh-wordmark { display: inline-block; font: 800 36px/1 Manrope, sans-serif; letter-spacing: -1.4px; color: #0d0a3d; white-space: nowrap; }
.mh-wordmark i { font-style: normal; color: #0a4bff; }
.brand .mh-wordmark { display: block; text-align: center; font-size: 28px; }
.login-top { justify-content: center; }
.sv-ring-text { position: relative; z-index: 1; font: 800 15px Manrope, sans-serif; letter-spacing: -.4px; color: #0d0a3d; }
html[data-theme="dark"] .sv-ring-text { color: #f3e7e0; }
html[data-theme="dark"] .login-card .mh-wordmark { color: #f3e7e0; }
/* Service bill: simple, large, step by step */
.si-easy { width: min(760px, calc(100vw - 20px)); }
.si-easy .sale-body { padding: 14px 18px 8px; display: grid; gap: 14px; }
.si-step { padding: 16px; border: 1px solid #ecdcd2; border-radius: 16px; background: #fff; }
.si-step h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 19px; }
.si-step h3 small { display: block; margin-top: 2px; color: #7a6a63; font-size: 13.5px; font-weight: 500; }
.si-num { display: grid; flex: none; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #c23a0f; color: #fff; font-size: 17px; font-weight: 800; }
.si-easy .form-control { height: 46px; padding: 0 12px; font-size: 17px; border-radius: 10px; }
.si-easy .si-big { height: 54px; font-size: 19px; }
.si-label { display: block; margin: 12px 0 5px; font-size: 15px; font-weight: 700; }
.si-label small { font-weight: 500; color: #7a6a63; }
.si-note { margin: 6px 0 0; font-size: 14px; color: #7a6a63; }
.si-note.ok { color: #1c7a4c; font-weight: 600; }
.si-line { margin: 0 0 12px; padding: 12px; border: 1px solid #e6d3c8; border-left: 6px solid #c23a0f; border-radius: 12px; background: #fffaf6; display: grid; gap: 10px; }
.si-line-head { display: flex; justify-content: space-between; align-items: center; }
.si-tag { padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.si-tag.work { background: #fde7d8; color: #9a3412; } .si-tag.part { background: #e0ecff; color: #1d4ed8; }
.si-x { border: 0; background: transparent; color: #b42318; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; padding: 6px; }
.si-line-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 10px; align-items: end; }
.si-line-row label { display: grid; gap: 4px; font-size: 14px; font-weight: 700; }
.si-line-total { align-self: end; padding-bottom: 10px; font-size: 20px; font-weight: 800; color: #0d0a3d; white-space: nowrap; }
.si-add { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 8px; }
.si-addbtn { padding: 14px 10px; border: 2px dashed #c23a0f; border-radius: 12px; background: #fff; color: #c23a0f; font: inherit; font-size: 17px; font-weight: 800; cursor: pointer; }
.si-addbtn:hover { background: #fff1e8; }
.si-more { margin-top: 10px; } .si-more summary { cursor: pointer; padding: 8px 0; color: #9a3412; font-size: 15px; font-weight: 700; }
.si-total { display: grid; gap: 2px; justify-items: center; padding: 18px; border-radius: 16px; background: linear-gradient(135deg, #7a1a12, #c23a0f); color: #fff; text-align: center; }
.si-total span { font-size: 15px; letter-spacing: .8px; text-transform: uppercase; opacity: .9; } .si-total strong { font-size: 38px; line-height: 1.1; } .si-total small { font-size: 14px; opacity: .85; }
.si-modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.si-mode { padding: 16px 6px; border: 2px solid #d9c7bc; border-radius: 12px; background: #fff; font: inherit; font-size: 17px; font-weight: 800; cursor: pointer; }
.si-mode.on { border-color: #1c7a4c; background: #e3f6ec; color: #0f5132; }
.si-paid-line { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 17px; } .si-paid-line .due { color: #b42318; } .si-paid-line .clear { color: #1c7a4c; font-weight: 700; }
.si-pay { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid #efe3db; font-size: 16px; }
.si-easy .dialog-actions { gap: 10px; } .si-btn { min-height: 52px; padding: 0 22px; font-size: 17px; }
.si-easy .dialog-actions .button-primary { flex: 1; }
@media (max-width: 560px) { .si-line-row { grid-template-columns: 1fr 1fr; } .si-line-total { grid-column: 1 / -1; } .si-modes { grid-template-columns: 1fr 1fr; } }
html[data-theme="dark"] .si-step, html[data-theme="dark"] .si-addbtn, html[data-theme="dark"] .si-mode { background: #271b18; } html[data-theme="dark"] .si-line { background: #2b1d19; }
.amort-layout > .panel:only-child { grid-column: 1 / -1; }
/* Action buttons stay in view on the right while the table scrolls sideways */
.table-main .col-actions { position: sticky; right: 0; z-index: 2; background: #fff; box-shadow: -10px 0 12px -10px rgba(60,20,10,.28); }
.table-main thead .col-actions { z-index: 3; }
.table-main tbody tr:hover .col-actions { background: #fff8f2; }
html[data-theme="dark"] .table-main .col-actions { background: #241815; box-shadow: -10px 0 12px -10px rgba(0,0,0,.6); }
html[data-theme="dark"] .table-main tbody tr:hover .col-actions { background: #2d1f1b; }
/* Searchable picker (replaces long dropdowns) */
.sp { position: relative; display: inline-block; min-width: min(420px, 100%); max-width: 100%; }
.sp .sp-input { width: 100%; }
.sp-list { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0; min-width: 280px; max-height: 340px; margin: 0; padding: 6px; overflow-y: auto; list-style: none; border: 1px solid #e6d9d2; border-radius: 12px; background: #fff; box-shadow: 0 14px 34px rgba(60,20,10,.2); }
.sp-list button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.sp-list button:hover, .sp-list button.on { background: #fdecdf; } .sp-list button.cur { font-weight: 700; }
.sp-none { padding: 10px; color: #7a6a63; font-size: 14px; }
html[data-theme="dark"] .sp-list { background: #271b18; border-color: #3a2a26; } html[data-theme="dark"] .sp-list button:hover, html[data-theme="dark"] .sp-list button.on { background: #3a2a26; }
/* "⋯" menu for the less-used row actions */
.row-more { padding: 4px 10px; border: 1px solid #ecdcd2; font-size: 17px; line-height: 1; letter-spacing: 1px; }
.row-menu { position: fixed; z-index: 60; display: grid; min-width: 170px; padding: 6px; border: 1px solid #e6d9d2; border-radius: 12px; background: #fff; box-shadow: 0 14px 34px rgba(60,20,10,.22); }
.row-menu[hidden] { display: none; }
.row-menu .row-action { display: block; width: 100%; padding: 9px 12px; text-align: left; font-size: 14.5px; white-space: nowrap; }
html[data-theme="dark"] .row-menu { background: #271b18; border-color: #3a2a26; }
/* Service bill: who did the work */
.si-who { grid-template-columns: 1.4fr 1fr; }
.ll-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; } .ll-filters .period-select { height: 38px; } .ll-filters #ll-q { min-width: 260px; flex: 1; }
.ll-date { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #7a6a63; }
/* Sticky action column: text slides under it with a soft fade instead of being cut off hard */
.table-main .col-actions { box-shadow: none; padding-left: 8px; padding-right: 12px; }
.table-main .col-actions::before { content: ""; position: absolute; top: 0; bottom: 0; left: -22px; width: 22px; pointer-events: none; background: linear-gradient(to right, rgba(255,255,255,0), #fff); }
.table-main tbody tr:hover .col-actions::before { background: linear-gradient(to right, rgba(255,248,242,0), #fff8f2); }
html[data-theme="dark"] .table-main .col-actions::before { background: linear-gradient(to right, rgba(36,24,21,0), #241815); }
html[data-theme="dark"] .table-main tbody tr:hover .col-actions::before { background: linear-gradient(to right, rgba(45,31,27,0), #2d1f1b); }
.table-main .col-actions { border-bottom: 1px solid #f0f2f5; }
.row-more { padding: 3px 9px; border: 0; border-radius: 8px; background: #f6ece5; color: #b3410f; font-size: 16px; letter-spacing: 0; }
.row-more:hover { background: #fbdcc8; }
.table-main .col-actions .row-action { padding: 4px 7px; }
/* Action column on the LEFT: always in view, and nothing at the right edge is ever covered */
.table-main .col-actions { right: auto; left: 0; padding: 6px 8px 6px 10px; box-shadow: none; border-right: 0; }
.table-main .col-actions::before { content: none; }
.table-main .col-actions::after { content: ""; position: absolute; top: 0; bottom: 0; right: -16px; width: 16px; pointer-events: none; background: linear-gradient(to right, rgba(60,20,10,.10), rgba(60,20,10,0)); opacity: 0; transition: opacity .15s; }
.table-wrap.scrolled .col-actions::after { opacity: 1; }
.table-main thead .col-actions { text-align: left; }
/* Top bar: keep the title, search and buttons on one tidy line on laptop widths */
.topbar { gap: 12px; padding: 0 24px; }
.breadcrumb { flex: none; white-space: nowrap; max-width: 26%; overflow: hidden; text-overflow: ellipsis; }
.gsearch { min-width: 170px; margin: 0 8px; }
.topbar-actions { gap: 12px; flex: none; }
.today-label, .sync-pill, .role-badge, .plan-pill, .branch-pill { white-space: nowrap; }
@media (max-width: 1600px) { .today-label { display: none; } }
@media (max-width: 1300px) { .plan-pill, .topbar-divider { display: none; } .gsearch { max-width: 240px; } }
@media (max-width: 1150px) { .role-badge { display: none; } .lang-select { max-width: 92px; } }
@media (max-width: 1500px) { .plan-pill { display: none; } .breadcrumb { max-width: 22%; } }
@media (max-width: 1400px) { .role-badge { display: none; } .gsearch { min-width: 150px; } }
/* tighter table cells so more columns (and the money columns) show without sideways scrolling */
.table-main th { padding: 11px 11px; } .table-main td { padding: 11px 11px; }
@media (max-width: 1200px) { .breadcrumb > span:first-child, .breadcrumb-separator { display: none; } .gsearch { min-width: 130px; } .topbar { padding: 0 16px; } }
@media (max-width: 640px) {
  .topbar { padding: 0 8px; gap: 6px; }
  .breadcrumb { max-width: 30%; font-size: 13px; }
  .topbar-actions { gap: 6px; margin-left: auto; }
  .sync-pill, .topbar-divider, .topbar-actions .icon-button[data-action="toggle-theme"] { display: none; }
  .lang-select { max-width: 74px; font-size: 13px; padding-left: 4px; padding-right: 2px; }
  .branch-pill { max-width: 112px; } .branch-pill select { max-width: 92px; }
}
.breadcrumb strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .breadcrumb { max-width: 28%; }
@media (max-width: 640px) { .breadcrumb { max-width: 22%; } .lang-select { max-width: 60px; } .branch-pill { max-width: 94px; } .branch-pill select { max-width: 76px; } .role-badge, .plan-pill { display: none; } }

/* ---- Indian-language text: real script fonts, no letter spacing (it breaks joined letters), room for tall marks ---- */
html:is(:lang(hi), :lang(kn), :lang(ta), :lang(ml), :lang(te)) * { font-family: "DM Sans", "Noto Sans Devanagari", "Noto Sans Kannada", "Noto Sans Tamil", "Noto Sans Malayalam", "Noto Sans Telugu", "Nirmala UI", sans-serif !important; letter-spacing: normal !important; }
html:is(:lang(hi), :lang(kn), :lang(ta), :lang(ml), :lang(te)) :is(body, p, label, th, td, li, small, h1, h2, h3, h4, h5, .sub, .nav-item, .field-hint, .panel-heading p, .page-header p) { line-height: 1.55; }
html:is(:lang(hi), :lang(kn), :lang(ta), :lang(ml), :lang(te)) :is(h1, h2, h3) { line-height: 1.35; }
html:is(:lang(hi), :lang(kn), :lang(ta), :lang(ml), :lang(te)) :is(button, .pill, .chip, .tag, .badge, .status, th) { line-height: 1.4; overflow-wrap: anywhere; }
html:is(:lang(hi), :lang(kn), :lang(ta), :lang(ml), :lang(te)) :is(label, th, td, .nav-item, button) { word-break: normal; }

/* ---- customer documents: Aadhaar, RC, insurance, bike & owner photo ---- */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 14px; margin-top: 14px; }
.doc-card { padding: 14px 16px; border: 1px solid #ecd9ce; border-radius: 14px; background: #fff; }
.doc-card.doc-missing { border-style: dashed; background: #fffaf6; }
.doc-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.doc-head h4 { margin: 0; font-size: 15px; } .doc-head small { color: #7a665e; }
.doc-head .chip { margin-left: auto; white-space: nowrap; }
.doc-icon { font-size: 22px; line-height: 1; }
.doc-files { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 8px; }
.doc-files li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.doc-thumb { display: block; width: 84px; height: 62px; object-fit: cover; border-radius: 8px; border: 1px solid #ecd9ce; }
.cd-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 16px; padding: 12px 14px; border-radius: 12px; background: #fff7f1; }
.cd-fact span { display: block; font-size: 12px; color: #7a665e; } .cd-fact strong { font-size: 14px; }
.doc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 10px; }
.sale-files .doc-thumb { width: 56px; height: 42px; }
html[data-theme="dark"] .doc-card { background: #1f1512; border-color: #4a3732; } html[data-theme="dark"] .cd-facts { background: #2a1d18; }
.doc-files a:not(.row-action), .doc-card .field-hint b { color: var(--link, #b3361b); }
.doc-files .muted { font-size: 13px; }
.doc-files a { word-break: break-word; }
.doc-files a:not(.row-action) { font-size: 13px; } .doc-files small { color: #7a665e; }
.doc-grid + .field-hint { margin-top: 14px; }
.excel-files li { justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f3e5db; } .excel-files span { flex: 1 1 220px; word-break: break-all; font-size: 13px; }
#excel-backup .panel-heading, #offsite .panel-heading { flex-wrap: wrap; gap: 10px; } #excel-backup .panel-heading .button, #offsite .panel-heading .button { white-space: nowrap; flex-shrink: 0; }
.doc-files a:not(.row-action) { text-decoration: none; } .doc-files a:not(.row-action):hover { text-decoration: underline; }
@media (max-width: 640px) { .emi-pay-table :is(th, td):nth-child(5), .emi-pay-table :is(th, td):nth-child(7) { display: none; } .emi-pay-table td:nth-child(8) { white-space: normal; } }
.excel-files { padding: 0 18px 14px; margin: 4px 0 0; }

/* ---- confirmation toast (WhatsApp style) ---- */
.toast { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-width: min(86vw, 330px); padding: 13px 16px 15px 13px; overflow: hidden; border: 1px solid rgba(37,211,102,.28); border-radius: 18px; color: #1e2a24; background: #fff; box-shadow: 0 16px 40px rgba(20,35,28,.24), 0 2px 6px rgba(20,35,28,.10); animation: toast-in .32s cubic-bezier(.2,1.1,.3,1) both; }
.toast.toast-out { animation: toast-out .22s ease-in both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(26px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(14px) scale(.96); } }
.toast-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(145deg, #3fe27e, #1faa59); box-shadow: 0 4px 12px rgba(31,170,89,.45); }
.toast-icon svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.toast-ok .toast-icon svg path { stroke-dasharray: 26; stroke-dashoffset: 26; animation: toast-draw .45s .12s ease-out forwards; }
@keyframes toast-draw { to { stroke-dashoffset: 0; } }
.toast-body { display: grid; gap: 2px; min-width: 0; text-align: left; }
.toast-body strong { font-size: 15.5px; font-weight: 700; line-height: 1.3; color: #14211a; }
.toast-detail { font-size: 13.5px; line-height: 1.35; color: #5b6b62; }
.toast-meta { align-self: end; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #8a978f; white-space: nowrap; }
.toast-ticks { font-size: 12px; letter-spacing: -4px; margin-right: 4px; color: #34b7f1; font-weight: 800; }
.toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #25d366; transform-origin: left; animation: toast-bar var(--toast-ms, 4s) linear forwards; }
@keyframes toast-bar { to { transform: scaleX(0); } }
.toast-warn { border-color: rgba(247,147,30,.35); } .toast-warn .toast-icon { background: linear-gradient(145deg, #ffb347, #f08a14); box-shadow: 0 4px 12px rgba(240,138,20,.45); } .toast-warn .toast-bar { background: #f7931e; }
.toast-bad { border-color: rgba(214,69,65,.32); } .toast-bad .toast-icon { background: linear-gradient(145deg, #ff6b62, #d6403a); box-shadow: 0 4px 12px rgba(214,64,58,.45); } .toast-bad .toast-bar { background: #d6403a; }
html[data-theme="dark"] .toast { color: #f1e8e3; background: #1f2a24; border-color: rgba(37,211,102,.35); } html[data-theme="dark"] .toast-body strong { color: #f4efec; } html[data-theme="dark"] .toast-detail { color: #b3c2b9; }
@media (prefers-reduced-motion: reduce) { .toast, .toast.toast-out, .toast-bar, .toast-ok .toast-icon svg path { animation: none; stroke-dashoffset: 0; } }
@media print { .toast-region { display: none !important; } }

/* ---- customer documents, second look: hero, progress ring, drop tiles ---- */
.cd-dialog { width: min(980px, calc(100vw - 24px)); }
.cd-hero { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #0d0a3d 0%, #2a1fb8 60%, #0a4bff 100%); box-shadow: 0 14px 30px rgba(42,31,184,.28); }
.cd-avatar { display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 50%; font: 800 20px Manrope, sans-serif; color: #0d0a3d; background: linear-gradient(135deg, #ffd249, #f7931e); }
.cd-who { display: grid; gap: 3px; min-width: 0; } .cd-who strong { font-size: 19px; } .cd-who small { color: rgba(255,255,255,.78); overflow-wrap: anywhere; }
.cd-id { justify-self: start; padding: 2px 10px; border-radius: 99px; font: 700 12px/1.6 ui-monospace, Consolas, monospace; letter-spacing: .6px; background: rgba(255,255,255,.16); }
.cd-ring { --pct: 0; position: relative; flex: none; margin-left: auto; width: 74px; height: 74px; border-radius: 50%; background: conic-gradient(#3fe27e calc(var(--pct) * 1%), rgba(255,255,255,.22) 0); display: grid; place-items: center; }
.cd-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #1b1a77; } .cd-ring div { position: relative; text-align: center; line-height: 1.1; } .cd-ring b { display: block; font-size: 17px; } .cd-ring small { font-size: 10px; letter-spacing: .6px; text-transform: uppercase; color: rgba(255,255,255,.75); }
.cd-dialog .cd-facts { margin-top: 12px; }
.doc-card { position: relative; padding: 16px; border: 1px solid #ecd9ce; border-top: 4px solid var(--tone, #f7931e); border-radius: 16px; background: #fff; box-shadow: 0 6px 18px rgba(80,40,25,.07); transition: box-shadow .2s, transform .2s; }
.doc-card:hover { box-shadow: 0 12px 26px rgba(80,40,25,.13); transform: translateY(-1px); }
.tone-violet { --tone: #7a4bff; } .tone-blue { --tone: #0a4bff; } .tone-green { --tone: #1fa971; } .tone-orange { --tone: #f7931e; }
.doc-card.doc-missing { background: linear-gradient(180deg, #fffaf6, #fff); }
.doc-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; font-size: 20px; background: color-mix(in srgb, var(--tone, #f7931e) 14%, #fff); }
.doc-state { margin-left: auto; padding: 3px 10px; border-radius: 99px; font: 700 12px 'DM Sans', sans-serif; white-space: nowrap; }
.doc-state.is-ok { color: #0b6b3a; background: #dcf5e7; } .doc-state.is-no { color: #b13a0e; background: #ffe9df; } .doc-state.is-num { color: #4a3d8f; background: #ebe6ff; }
.doc-note { margin: 4px 0 10px; padding: 8px 10px; border-radius: 10px; font-size: 13px; background: #f6f2ff; } .doc-note small { color: #6f6a8f; }
.doc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; margin: 10px 0; }
.doc-tile { overflow: hidden; border: 1px solid #ecd9ce; border-radius: 12px; background: #fff; }
.doc-view { position: relative; display: block; height: 96px; background: #f4eee9; }
.doc-view img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; } .doc-tile:hover .doc-view img { transform: scale(1.06); }
.doc-pdf { display: grid; place-items: center; height: 100%; font: 800 20px Manrope, sans-serif; color: #c0392b; letter-spacing: 1px; }
.doc-open { position: absolute; inset: auto 0 0 0; padding: 14px 8px 6px; font: 700 12px 'DM Sans', sans-serif; color: #fff; text-align: right; background: linear-gradient(transparent, rgba(0,0,0,.55)); opacity: 0; transition: opacity .2s; } .doc-tile:hover .doc-open { opacity: 1; }
.doc-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 8px; font-size: 11.5px; color: #7a665e; }
.doc-del { border: 0; background: transparent; cursor: pointer; font-size: 14px; padding: 2px 4px; border-radius: 6px; } .doc-del:hover { background: #ffe3e0; }
.doc-drop { display: grid; justify-items: center; gap: 2px; margin-top: 10px; padding: 16px 10px; text-align: center; cursor: pointer; border: 2px dashed color-mix(in srgb, var(--tone, #f7931e) 55%, #fff); border-radius: 14px; background: color-mix(in srgb, var(--tone, #f7931e) 6%, #fff); transition: background .2s, border-color .2s, transform .2s; }
.doc-drop:hover, .doc-drop.is-over { background: color-mix(in srgb, var(--tone, #f7931e) 14%, #fff); border-color: var(--tone, #f7931e); transform: scale(1.01); }
.doc-drop-icon { font-size: 26px; } .doc-drop strong { font-size: 14px; color: #3a1a00; } .doc-drop small { color: #7a665e; font-size: 12px; }
.doc-help { margin-top: 14px; }
html[data-theme="dark"] .doc-card, html[data-theme="dark"] .doc-tile { background: #1f1512; border-color: #4a3732; } html[data-theme="dark"] .doc-drop strong { color: #f1e8e3; }
@media (max-width: 560px) { .cd-hero { flex-wrap: wrap; } .cd-ring { margin-left: 0; } .doc-tiles { grid-template-columns: repeat(2, 1fr); } }

/* ---- customer history: profile, papers, bikes & delivery, timeline ---- */
.hist-profile .history-search { margin-bottom: 14px; }
.hist-card { display: flex; gap: 20px; align-items: flex-start; padding: 18px; border-radius: 18px; background: linear-gradient(135deg, #fff7f1, #fff); border: 1px solid #f0dccf; }
.hist-photo { flex: none; width: 124px; height: 160px; overflow: hidden; border-radius: 14px; border: 3px solid #fff; box-shadow: 0 8px 22px rgba(80,40,25,.18); background: #f4eee9; }
.hist-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hist-photo-empty { display: grid; place-items: center; height: 100%; font: 800 34px Manrope, sans-serif; color: #fff; background: linear-gradient(135deg, #7a4bff, #0a4bff); }
.hist-main { flex: 1; min-width: 0; }
.hist-name { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; } .hist-name h2 { margin: 0; font-size: 24px; }
.hist-profile .cd-id { color: #fff; background: #2a1fb8; }
.hist-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 20px; }
.hist-fact span { display: block; font-size: 12px; color: #7a665e; } .hist-fact strong { font-size: 14.5px; overflow-wrap: anywhere; } .hist-fact.wide { grid-column: 1 / -1; }
.hist-contact { display: inline-flex; gap: 6px; margin-left: 6px; }
.hist-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hist-papers { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; padding: 4px 2px 2px; }
.hist-paper { display: grid; gap: 8px; align-content: start; padding: 14px; border: 1px solid #ecd9ce; border-radius: 14px; background: #fff; }
.hist-paper > strong { font-size: 14px; } .hist-paper-files { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hist-thumb { display: block; width: 76px; height: 56px; overflow: hidden; border-radius: 10px; border: 1px solid #ecd9ce; background: #f4eee9; } .hist-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hist-bikes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; padding: 4px 2px 2px; }
.hist-bike { padding: 16px; border: 1px solid #ecd9ce; border-radius: 16px; background: #fff; box-shadow: 0 6px 18px rgba(80,40,25,.06); display: grid; gap: 10px; }
.hist-bike-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; } .hist-bike-head strong { display: block; font-size: 15.5px; } .hist-bike-head small { color: #7a665e; }
.hist-bike-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: #6b5a52; } .hist-bike-facts b { color: #241a17; }
.hist-delivery { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: #fff7f1; } .hist-delivery-files { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hist-delivery .hist-thumb { width: 96px; height: 70px; }
.hist-chips { display: flex; flex-wrap: wrap; gap: 6px; }
html[data-theme="dark"] :is(.hist-card, .hist-paper, .hist-bike) { background: #1f1512; border-color: #4a3732; } html[data-theme="dark"] .hist-delivery { background: #2a1d18; }
@media (max-width: 640px) { .hist-card { flex-direction: column; align-items: center; text-align: center; } .hist-name { justify-content: center; } .hist-facts { text-align: left; } }
@media (max-width: 640px) { .hist-papers { grid-template-columns: repeat(2, 1fr); } }

/* ---- customer onboarding: photo & documents ---- */
.papers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.paper-pick { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px dashed #e3c7b6; border-radius: 12px; background: #fffaf6; }
.paper-thumb { display: grid; place-items: center; flex: none; width: 46px; height: 46px; overflow: hidden; border-radius: 10px; background: #fde8dc; font-size: 21px; font-weight: 800; color: #c0392b; }
.paper-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.paper-state { display: block; margin-top: 4px; font-size: 12px; color: #6b5a52; overflow-wrap: anywhere; }
.paper-clear { border: 0; background: transparent; cursor: pointer; font-size: 15px; line-height: 1; color: #b13a0e; }
html[data-theme="dark"] .paper-pick { background: #2a1d18; border-color: #4a3732; }
.cd-avatar { overflow: hidden; } .cd-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-wrap { position: relative; display: inline-block; } .thumb-del { position: absolute; top: -7px; right: -7px; display: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 20px; color: #fff; background: #d6403a; box-shadow: 0 2px 6px rgba(0,0,0,.25); } .thumb-wrap:hover .thumb-del, .thumb-del:focus { display: block; }
.cd-dialog .hist-papers { margin-top: 14px; } .cd-dialog .hist-paper[data-drop].is-over { outline: 2px dashed #f7931e; background: #fff7f1; }
.hist-bike-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px 16px; padding-top: 10px; border-top: 1px solid #f3e5db; }
.hist-bike-fact span { display: block; font-size: 12px; color: #7a665e; } .hist-bike-fact strong { font-size: 14px; overflow-wrap: anywhere; }

/* ---- customer history: even spacing, every section uses the full width ---- */
.hist-profile { padding: 16px; }
.hist-profile .history-search { margin-bottom: 14px; }
.hist-card { gap: 24px; padding: 20px; align-items: stretch; }
.hist-main { display: flex; flex-direction: column; gap: 14px; }
.hist-name { margin: 0; }
.hist-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 24px; }
.hist-fact.wide { grid-column: span 3; }
.hist-contact { margin-left: 0; display: flex; gap: 10px; margin-top: 2px; }
.hist-actions { margin-top: auto; }
.hist-profile .history-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0 0; }
.hist-papers, .hist-bikes { padding: 0 16px 16px; }
.hist-papers { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.hist-paper { display: flex; flex-direction: column; gap: 10px; }
.hist-paper-files { margin-top: auto; }
.hist-bikes { grid-template-columns: 1fr; }
.hist-bike-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .hist-papers { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hist-facts, .hist-bike-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hist-fact.wide { grid-column: 1 / -1; } .hist-profile .history-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hist-papers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hist-card { align-items: center; } }
.hist-profile .history-strip { padding: 0; }
.cd-dialog .hist-papers { padding: 0; margin-top: 14px; gap: 12px; }
.cd-dialog .cd-facts { margin-top: 14px; }
.cd-dialog .hist-paper { padding: 16px; }
.cd-dialog .hist-thumb { width: 88px; height: 64px; }
.cd-dialog .sale-body { padding-bottom: 8px; }
.hist-paper.paper-pick { border: 1px solid #ecd9ce; background: #fff; padding: 14px; } .paper-pick .doc-icon.paper-thumb { overflow: hidden; width: 44px; height: 44px; } .paper-pick .paper-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.papers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sale-papers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .sale-papers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sale-sec .hist-papers, .sale-papers { padding: 0; margin-top: 12px; }
.paper-pick, .papers-grid .hist-paper { text-align: left; align-items: flex-start; } .papers-grid .hist-paper-files { align-items: center; }

/* ---- documents view shown inline on the customer history ---- */
.cd-contact { display: inline-flex; gap: 8px; margin-top: 4px; } .cd-contact a { padding: 2px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 700; color: #fff; text-decoration: none; background: rgba(255,255,255,.18); } .cd-contact a:hover { background: rgba(255,255,255,.3); }
.cd-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; } .cd-fact.wide { grid-column: 1 / -1; }
.cd-hero ~ .hist-papers { padding: 0; margin-top: 14px; }
#hist-docs { margin: 0; }
@media (max-width: 900px) { .cd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cd-hero + .cd-facts { margin-top: 14px; }
.hist-summary { padding: 16px; } .hist-summary .history-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; padding: 0; }
.hist-summary .panel-heading { padding: 0 0 10px; } .hist-summary .hist-bikes { padding: 0; }
@media (max-width: 900px) { .hist-summary .history-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- passport-size photo: portrait 35 x 45 mm proportions, not a circle ---- */
.cd-avatar { width: 86px; height: 110px; border-radius: 10px; border: 3px solid #fff; box-shadow: 0 6px 16px rgba(0,0,0,.3); font-size: 26px; }
.cd-avatar img { object-position: center top; }
.cd-hero { align-items: center; }
.hist-thumb.portrait { width: 58px; height: 74px; }
.cd-dialog .hist-thumb.portrait { width: 66px; height: 84px; }
.paper-pick .doc-icon.paper-thumb { width: 44px; height: 44px; }
@media (max-width: 560px) { .cd-avatar { width: 72px; height: 92px; } }

/* ---- customer history: two sub-tabs ---- */
.hist-top { padding: 16px 16px 0; }
.hist-tabs { display: flex; gap: 6px; margin-top: 12px; border-bottom: 1px solid #f0dccf; }
.hist-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; background: transparent; font: 700 15px 'DM Sans', sans-serif; color: #7a665e; cursor: pointer; transition: color .15s, border-color .15s, background .15s; border-radius: 10px 10px 0 0; }
.hist-tab:hover { color: #3a1a00; background: #fff7f1; }
.hist-tab.on { color: #e8501a; border-bottom-color: #e8501a; }
.hist-count { padding: 1px 9px; border-radius: 99px; font-size: 12px; color: #7a665e; background: #f4eee9; } .hist-tab.on .hist-count { color: #fff; background: #e8501a; }
html[data-theme="dark"] .hist-tab:hover { background: #2a1d18; } html[data-theme="dark"] .hist-tabs { border-color: #4a3732; }

/* ---- customer history: search on the left, tabs on the right, one tidy row; the search box is highlighted ---- */
.hist-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 14px 16px; }
.hist-top .history-search { flex: 1 1 420px; width: auto; margin: 0; }
.hist-top .history-find { width: 100%; min-width: 0; height: 48px; padding: 0 16px 0 46px; font: 500 15px 'DM Sans', sans-serif; border: 2px solid #f7931e; border-radius: 12px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8501a' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") no-repeat 14px center / 20px; box-shadow: 0 0 0 4px rgba(247,147,30,.16); transition: box-shadow .15s, border-color .15s; }
.hist-top .history-find:focus { outline: none; border-color: #e8501a; box-shadow: 0 0 0 5px rgba(232,80,26,.2); }
.hist-tabs { margin: 0; padding: 4px; gap: 4px; border: 0; border-radius: 14px; background: #f4eee9; flex: 0 0 auto; }
.hist-tab { margin: 0; padding: 9px 16px; border: 0; border-radius: 10px; color: #6b5a52; }
.hist-tab:hover { background: #fff; color: #3a1a00; }
.hist-tab.on { color: #e8501a; background: #fff; box-shadow: 0 2px 8px rgba(80,40,25,.14); }
.hist-top + .hist-profile { margin-top: 12px; }
html[data-theme="dark"] .hist-tabs { background: #2a1d18; } html[data-theme="dark"] .hist-tab.on, html[data-theme="dark"] .hist-top .history-find { background-color: #1f1512; }
@media (max-width: 700px) { .hist-tabs { width: 100%; } .hist-tab { flex: 1; justify-content: center; } }

/* ---- EMI chart & overdue: four numbers on top, one list below ---- */
.emi-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.emi-kpi { border-left: 4px solid #e6d9d2; } .emi-kpi.bad { border-left-color: #cf3b3b; } .emi-kpi.warn { border-left-color: #f7931e; } .emi-kpi.ok { border-left-color: #1fa971; }
.emi-kpi.bad strong { color: #b91c1c; } .emi-kpi small { display: block; margin-top: 2px; color: #7a665e; font-size: 12.5px; }
.emi-alert .emi-actions { white-space: nowrap; } .emi-alert { padding-bottom: 6px; } .emi-alert .emi-clear { margin: 6px 16px 16px; }
@media (max-width: 900px) { .emi-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the top search is highlighted all the time */
.gsearch-input { border: 2px solid #f7931e; box-shadow: 0 0 0 3px rgba(247,147,30,.14); background: #fff; }
.gsearch-input:focus { border-color: #e8501a; box-shadow: 0 0 0 4px rgba(232,80,26,.2); }

/* ---- spacing pass: not too loose, not too tight, and the content uses the whole screen ---- */
.page-intro { margin-bottom: 12px; }
h1 { font-size: 22px; }
.panel-heading { padding: 12px 14px 0; }
.panel-heading h2 { margin: 0 0 2px; }
.section-gap { margin-top: 12px; }
.table-main th, .table-main td { padding-top: 8px; padding-bottom: 8px; }
.compact-table th, .compact-table td { padding-top: 8px; padding-bottom: 8px; }
.summary-strip { gap: 10px; margin-bottom: 12px; }
.summary-tile { padding: 11px 13px; }
.summary-tile span { margin-bottom: 4px; }
.metric-card { min-height: 92px; padding: 12px 13px 11px; }
.dashboard-row { gap: 12px; margin-top: 12px; }
.overview-grid { gap: 12px; }
.list-toolbar { gap: 8px; padding: 10px 12px; row-gap: 6px; }
.empty-state { padding: 22px 14px; }
.notice-banner { margin-bottom: 12px; padding: 10px 14px; }
.form-grid { gap: 10px 14px; }
.sale-body { padding: 12px 20px 6px; }
.sale-sec { margin-bottom: 10px; padding: 12px 14px 14px; }
.sale-sec h3 { margin-bottom: 10px; }
.dialog-heading { margin-bottom: 12px; }
.dialog-actions { margin-top: 14px; }
.nav-item { min-height: 34px; margin: 1px 0; }
.main-nav { padding: 6px 0 8px; }
@media (min-width: 781px) {
  .sidebar { width: 250px; padding-right: 12px; padding-left: 12px; }
  .main-content { margin-left: 250px; }
  .topbar { height: 54px; padding: 0 20px; }
  .page-content { max-width: none; padding: 16px 20px 14px; }
  .page-footer { padding: 10px 20px 12px; }
}
@media (min-width: 1600px) { .page-content { padding-right: 28px; padding-left: 28px; } .page-footer { padding-right: 28px; padding-left: 28px; } }
@media (min-width: 781px) and (max-width: 1150px) { .sidebar { width: 232px; } .main-content { margin-left: 232px; } .page-content { padding: 14px 16px 12px; } .topbar { padding: 0 16px; } }
@media (min-width: 781px) { .sidebar { width: 258px; } .main-content { margin-left: 258px; } .table-main th, .table-main td { padding-right: 9px; padding-left: 9px; } .compact-table th, .compact-table td { padding-right: 10px; padding-left: 10px; } }
@media (min-width: 781px) and (max-width: 1150px) { .sidebar { width: 236px; } .main-content { margin-left: 236px; } }
.emi-tabs { width: fit-content; max-width: 100%; margin: 0 0 12px; flex-wrap: wrap; } @media (max-width: 700px) { .emi-tabs { width: 100%; } .emi-tabs .hist-tab { flex: 1 1 auto; justify-content: center; } }

/* ---- each sub-tab has its own colour ---- */
.hist-tab { --tab: #e8501a; }
.tone-red { --tab: #d6403a; } .tone-blue { --tab: #0a4bff; } .tone-green { --tab: #14935f; } .tone-violet { --tab: #7a4bff; } .tone-orange { --tab: #e8501a; }
.hist-tab::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tab); flex: none; }
.hist-tab:hover { color: var(--tab); }
.hist-tab.on { color: #fff; background: var(--tab); box-shadow: 0 4px 12px color-mix(in srgb, var(--tab) 40%, transparent); }
.hist-tab.on::before { background: #fff; }
.hist-tab .hist-count { color: var(--tab); background: color-mix(in srgb, var(--tab) 14%, #fff); }
.hist-tab.on .hist-count { color: var(--tab); background: #fff; }
html[data-theme="dark"] .hist-tab:hover { background: #2a1d18; }

/* ---- lists: filter chips, one tidy toolbar with a More menu, richer rows ---- */
.list-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 12px 0; }
.chip-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid #ecd9ce; border-radius: 99px; background: #fff; color: #5a463e; font: 600 13.5px 'DM Sans', sans-serif; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.chip-btn span { padding: 0 8px; border-radius: 99px; font-size: 12px; background: #f4eee9; color: #7a665e; }
.chip-btn:hover { border-color: #f7931e; color: #b3361b; }
.chip-btn.on { color: #fff; border-color: #e8501a; background: #e8501a; box-shadow: 0 4px 10px rgba(232,80,26,.28); } .chip-btn.on span { color: #e8501a; background: #fff; }
.list-toolbar { align-items: center; gap: 10px; }
.list-toolbar .search-wrap { flex: 1 1 300px; max-width: 460px; }
.list-toolbar .search-input { width: 100%; height: 40px; border-radius: 10px; border: 1.5px solid #ecd9ce; background: #fff; }
.list-toolbar .search-input:focus { border-color: #f7931e; box-shadow: 0 0 0 3px rgba(247,147,30,.16); outline: none; }
.tb-range { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid #ecd9ce; border-radius: 10px; background: #fff; } .tb-range .range-field { font-size: 13px; color: #7a665e; } .tb-range input { border: 0; background: transparent; height: 34px; }
.record-count { font-size: 13px; color: #7a665e; white-space: nowrap; }
.tb-more-wrap { position: relative; }
.tb-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; display: grid; gap: 4px; width: 300px; max-width: 86vw; padding: 10px; border: 1px solid #ecd9ce; border-radius: 14px; background: #fff; box-shadow: 0 18px 44px rgba(60,30,20,.22); }
.tb-menu[hidden] { display: none; }
.tb-group { margin-top: 4px; font: 700 11px 'DM Sans', sans-serif; letter-spacing: .8px; text-transform: uppercase; color: #8a7a72; }
.tb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .tb-row .view-select { flex: 1 1 100%; }
.cell-stack { display: grid; gap: 1px; } .cell-stack strong { font-weight: 700; } .cell-stack small { color: #7a665e; font-size: 12.5px; }
.table-main tbody tr { transition: background .12s; } .table-main tbody tr:hover td { background: #fff7f1; }
.cust-kpi { border-left: 4px solid #e6d9d2; } .cust-kpi.bad { border-left-color: #cf3b3b; } .cust-kpi.ok { border-left-color: #1fa971; } .cust-kpi.new { border-left-color: #0a4bff; }
.summary-strip:has(.cust-kpi) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .summary-strip:has(.cust-kpi) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .list-toolbar .search-wrap { max-width: none; flex-basis: 100%; } }
html[data-theme="dark"] :is(.chip-btn, .tb-menu, .tb-range) { background: #1f1512; border-color: #4a3732; color: #f1e8e3; } html[data-theme="dark"] .table-main tbody tr:hover td { background: #2a1d18; }
.cd-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; padding-bottom: 12px; margin-bottom: 2px; border-bottom: 1px dashed #e8cdbd; }
.cd-stat span { display: block; font-size: 12.5px; color: #7a665e; } .cd-stat strong { display: block; font: 800 22px Manrope, sans-serif; color: #3b1711; }
@media (max-width: 640px) { .cd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- customer history: Bills & invoices ---- */
.bills-panel .panel-heading p { max-width: 760px; }
.bills-panel .list-chips { padding-bottom: 4px; }
.bills-list { display: grid; gap: 8px; padding: 10px 14px 14px; }
.bill-row { display: grid; grid-template-columns: 40px minmax(0, 1.6fr) 120px 130px auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #ecd9ce; border-left: 4px solid var(--g, #e8501a); border-radius: 12px; background: #fff; transition: box-shadow .15s, transform .15s; }
.bill-row:hover { box-shadow: 0 6px 16px rgba(80,40,25,.12); transform: translateY(-1px); }
.bill-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; font-size: 19px; background: color-mix(in srgb, var(--g) 13%, #fff); }
.bill-main { min-width: 0; } .bill-main strong { display: block; font-size: 14.5px; } .bill-main small { display: block; color: #7a665e; font-size: 12.5px; overflow-wrap: anywhere; }
.bill-date { color: #5a463e; font-size: 13.5px; } .bill-amt { font: 800 15px Manrope, sans-serif; color: #3b1711; text-align: right; }
.bill-actions { display: flex; gap: 6px; justify-content: flex-end; }
.bill-wa { color: #fff; border: 0; background: #1faa59; } .bill-wa:hover { background: #17924a; } .bill-wa[disabled] { opacity: .45; cursor: not-allowed; }
html[data-theme="dark"] .bill-row { background: #1f1512; border-color: #4a3732; }
@media (max-width: 900px) { .bill-row { grid-template-columns: 40px minmax(0, 1fr) auto; } .bill-date { grid-column: 2; } .bill-amt { grid-column: 3; grid-row: 1; } .bill-actions { grid-column: 1 / -1; justify-content: flex-start; } }
.chip-btn { --c: #e8501a; } .chip-red { --c: #d6403a; } .chip-green { --c: #14935f; } .chip-blue { --c: #0a4bff; } .chip-grey { --c: #6b5a52; } .chip-violet { --c: #7a4bff; }
.chip-btn { border-color: color-mix(in srgb, var(--c) 35%, #fff); color: var(--c); background: color-mix(in srgb, var(--c) 7%, #fff); } .chip-btn span { color: var(--c); background: color-mix(in srgb, var(--c) 16%, #fff); }
.chip-btn:hover { border-color: var(--c); color: var(--c); } .chip-btn.on { color: #fff; border-color: var(--c); background: var(--c); box-shadow: 0 4px 10px color-mix(in srgb, var(--c) 40%, transparent); } .chip-btn.on span { color: var(--c); background: #fff; }
.bill-tag { margin-left: 6px; padding: 1px 9px; border-radius: 99px; font: 700 11px 'DM Sans', sans-serif; font-style: normal; color: var(--g); background: color-mix(in srgb, var(--g) 14%, #fff); vertical-align: 1px; }
.bill-row { background: linear-gradient(90deg, color-mix(in srgb, var(--g) 7%, #fff), #fff 40%); } .bill-amt { color: var(--g); }
.bill-view { color: #fff; border: 0; background: var(--g); } .bill-view:hover { filter: brightness(.92); }
.bill-extra { color: #b3361b; border: 1.5px solid #f7b99b; background: #fff3ec; } .bill-extra:hover { background: #ffe5d6; }
.cd-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-left: auto; margin-right: 18px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 14px; background: rgba(255,255,255,.1); }
.cd-status-h { font: 700 11px 'DM Sans', sans-serif; letter-spacing: .9px; text-transform: uppercase; color: rgba(255,255,255,.7); width: 100%; }
.cd-st { display: grid; gap: 3px; } .cd-st small { font-size: 11.5px; color: rgba(255,255,255,.75); }
.cd-status + .cd-ring { margin-left: 0; }
@media (max-width: 900px) { .cd-status { margin-left: 0; width: 100%; } }

/* ---- Bikes & delivery: moderate size ---- */
.hist-summary { padding: 12px 14px; }
.hist-summary .panel-heading h2 { font-size: 15px; }
.hist-bikes { gap: 10px; }
.hist-bike { padding: 10px 14px; gap: 6px; border-radius: 12px; box-shadow: none; }
.hist-bike-head strong { font-size: 14px; } .hist-bike-head small { font-size: 12px; }
.hist-bike-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px 14px; padding-top: 6px; }
.hist-bike-fact span { font-size: 11.5px; } .hist-bike-fact strong { font-size: 13px; }

/* ---- customer history: every part has its own colour ---- */
.tone-pink { --tone: #d6336c; --tab: #d6336c; } .tone-teal { --tone: #0b8f9c; --tab: #0b8f9c; } .tone-grey { --tone: #6b5a52; --tab: #6b5a52; }
.hist-paper[class*="tone-"] { border-color: color-mix(in srgb, var(--tone) 35%, #fff); background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 9%, #fff), #fff 62%); border-top: 4px solid var(--tone); }
.hist-paper[class*="tone-"] .doc-icon { background: color-mix(in srgb, var(--tone) 18%, #fff); }
.hist-paper[class*="tone-"] .hist-up { color: var(--tone); border-color: color-mix(in srgb, var(--tone) 45%, #fff); }
.cd-stats .st0 strong { color: #7a4bff; } .cd-stats .st1 strong { color: #0b8f9c; } .cd-stats .st2 strong { color: #e8501a; } .cd-stats .st3 strong { color: #d6336c; }
.cd-stat { padding-left: 10px; border-left: 3px solid #e6d9d2; } .cd-stats .st0 { border-left-color: #7a4bff; } .cd-stats .st1 { border-left-color: #0b8f9c; } .cd-stats .st2 { border-left-color: #e8501a; } .cd-stats .st3 { border-left-color: #d6336c; }
.hist-summary { border-top: 4px solid #0b8f9c; } .hist-summary .panel-heading h2 { color: #0b8f9c; }
.hist-bike { border-color: #b9e3e8; background: linear-gradient(90deg, #eefafb, #fff 45%); border-left: 4px solid #0b8f9c; } .hist-bike-head strong { color: #0a6670; }
.emi-cust { border-top: 4px solid #7a4bff; } .emi-cust .panel-heading h2 { color: #5b34cc; }
.hist-chips + .table-wrap, section:has(.hist-chips) .panel-heading h2 { color: #e8501a; }
html[data-theme="dark"] .hist-bike { background: #14282b; border-color: #1f4a50; }
.bill-extra { color: #fff; border: 0; background: #c0392b; } .bill-extra:hover { background: #a02e22; }
/* bills list: fixed columns so dates, amounts and buttons line up in every row */
.bill-row { grid-template-columns: 40px minmax(0, 1fr) 112px 118px 300px; }
.bill-date { text-align: left; white-space: nowrap; } .bill-amt { white-space: nowrap; }
.bill-actions { justify-content: flex-end; flex-wrap: nowrap; } .bill-actions .button { white-space: nowrap; }
@media (max-width: 1150px) { .bill-row { grid-template-columns: 40px minmax(0, 1fr) 104px 108px 270px; } }
@media (max-width: 900px) { .bill-row { grid-template-columns: 40px minmax(0, 1fr) auto; } .bill-date { grid-column: 2; } .bill-amt { grid-column: 3; grid-row: 1; } .bill-actions { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; } }
.chip-pink { --c: #d6336c; } .chip-teal { --c: #0b8f9c; }
.fin-prog { min-width: 120px; } .fin-bar { height: 8px; border-radius: 99px; background: #eee3dc; overflow: hidden; } .fin-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #1fa971, #7ed6a8); } .fin-prog small { display: block; margin-top: 4px; color: #7a665e; font-size: 12.5px; }
.cell-stack { white-space: normal; max-width: 230px; } .cust-wrap { white-space: normal; }
.fin-prog { min-width: 100px; max-width: 130px; }

/* ---- finance file: five coloured tiles in one row, three tabs ---- */
.sale-totals { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.sale-tile { --t: #6b5a52; border: 1px solid color-mix(in srgb, var(--t) 28%, #fff); border-left: 4px solid var(--t); background: linear-gradient(180deg, color-mix(in srgb, var(--t) 8%, #fff), #fff); }
.sale-tile.t-blue { --t: #0a4bff; } .sale-tile.t-violet { --t: #7a4bff; } .sale-tile.t-green { --t: #14935f; } .sale-tile.t-red { --t: #d6403a; } .sale-tile.t-orange { --t: #e8501a; }
.sale-tile strong { color: var(--t); } .sale-tile small { display: block; margin-top: 2px; color: #7a665e; font-size: 12px; line-height: 1.25; }
.fin-tabs { margin: 12px 0; width: fit-content; max-width: 100%; flex-wrap: wrap; }
@media (max-width: 900px) { .sale-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fin-kpi { --t: #6b5a52; border-left: 4px solid var(--t); background: linear-gradient(180deg, color-mix(in srgb, var(--t) 8%, #fff), #fff); border-color: color-mix(in srgb, var(--t) 28%, #fff); border-left-color: var(--t); }
.fin-kpi.blue { --t: #0a4bff; } .fin-kpi.violet { --t: #7a4bff; } .fin-kpi.red { --t: #d6403a; } .fin-kpi.green { --t: #14935f; }
.fin-kpi strong { color: var(--t); } .fin-kpi small { display: block; margin-top: 2px; color: #7a665e; font-size: 12.5px; }

/* ---- the same coloured theme on every summary row ---- */
.summary-strip > .summary-tile { --t: #0a4bff; border-left: 4px solid var(--t); border-color: color-mix(in srgb, var(--t) 26%, #fff); border-left-color: var(--t); background: linear-gradient(180deg, color-mix(in srgb, var(--t) 7%, #fff), #fff); }
.summary-strip > .summary-tile:nth-child(4n+2) { --t: #7a4bff; } .summary-strip > .summary-tile:nth-child(4n+3) { --t: #e8501a; } .summary-strip > .summary-tile:nth-child(4n+4) { --t: #14935f; }
.summary-strip > .summary-tile strong { color: var(--t); }
.summary-strip > .summary-tile small { display: block; margin-top: 2px; color: #7a665e; font-size: 12.5px; }
.cust-kpi, .emi-kpi { border-left-width: 4px; }
html[data-theme="dark"] .summary-strip > .summary-tile { background: #1f1512; }
.pay-search-wrap { position: relative; margin: 6px 0 10px; max-width: 420px; } .pay-search-wrap .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #e8501a; }
.pay-search { width: 100%; height: 38px; padding: 0 12px 0 34px; border: 1.5px solid #f7b99b; border-radius: 10px; background: #fff; } .pay-search:focus { outline: none; border-color: #e8501a; box-shadow: 0 0 0 3px rgba(232,80,26,.16); }
tr[hidden] { display: none; }
.tab-search { position: relative; display: flex; align-items: center; margin: 12px 0 0; max-width: 520px; }
.tab-search .search-icon { position: absolute; left: 13px; color: #e8501a; }
.tab-search input { width: 100%; height: 42px; padding: 0 74px 0 38px; border: 1.5px solid #f7b99b; border-radius: 12px; background: #fff; font: 500 14.5px 'DM Sans', sans-serif; }
.tab-search input:focus { outline: none; border-color: #e8501a; box-shadow: 0 0 0 3px rgba(232,80,26,.16); }
.tab-search-n { position: absolute; right: 12px; font-size: 12.5px; font-weight: 700; color: #e8501a; }
.hist-bike[hidden], .bill-row[hidden] { display: none; }
.gsearch { max-width: 520px; } .gsearch-panel { width: min(560px, calc(100vw - 32px)); max-height: 70vh; }
.gs-group { padding: 8px 12px 4px; font: 700 11px 'DM Sans', sans-serif; letter-spacing: .8px; text-transform: uppercase; color: #8a7a72; }
.gs-item.on, .gs-item:hover { background: #fff1e8; }
.gsearch-tag { --c: #e8501a; color: var(--c); background: color-mix(in srgb, var(--c) 13%, #fff); border-radius: 99px; padding: 2px 9px; font-weight: 700; }
.gs-violet { --c: #7a4bff; } .gs-blue { --c: #0a4bff; } .gs-green { --c: #14935f; } .gs-teal { --c: #0b8f9c; } .gs-orange { --c: #e8501a; } .gs-pink { --c: #d6336c; } .gs-grey { --c: #6b5a52; }
.history-search .tab-search-n { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 12.5px; font-weight: 700; color: #e8501a; pointer-events: none; } .hist-top .history-find { padding-right: 70px; }

/* ---- animated EMI chart ---- */
.emi-chart2 { max-width: 100%; }
.ec-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ec-draw 1.5s .15s cubic-bezier(.4,.1,.2,1) forwards; }
.ec-rest { opacity: 0; animation: ec-fade .8s 1.1s ease forwards; }
.ec-area { opacity: 0; animation: ec-fade 1.1s .35s ease forwards; }
.ec-bar { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); animation: ec-grow .55s cubic-bezier(.2,1.2,.3,1) forwards; }
.ec-pop { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: ec-popin .45s cubic-bezier(.2,1.5,.3,1) forwards; }
.ec-pulse { animation: ec-pulse 1.8s 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.ec-today { opacity: 0; animation: ec-fade .6s 1.5s ease forwards; }
.ec-bar:hover rect:not([fill="transparent"]) { filter: brightness(1.12); }
@keyframes ec-draw { to { stroke-dashoffset: 0; } } @keyframes ec-fade { to { opacity: 1; } } @keyframes ec-grow { to { transform: scaleY(1); } } @keyframes ec-popin { to { transform: scale(1); } }
@keyframes ec-pulse { 0% { transform: scale(1); opacity: .35; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ec-line, .ec-rest, .ec-area, .ec-bar, .ec-pop, .ec-today, .ec-pulse { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; } }
/* highlighted customer / loan search */
.emi-pick { position: relative; min-width: min(420px, 100%); }
.emi-pick .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); z-index: 2; color: #e8501a; pointer-events: none; }
.emi-pick .sp-input, .emi-pick select { width: 100%; height: 44px; padding: 0 14px 0 40px; border: 2px solid #f7931e; border-radius: 12px; background: #fff; box-shadow: 0 0 0 4px rgba(247,147,30,.15); font: 600 14px 'DM Sans', sans-serif; }
.emi-pick .sp-input:focus { outline: none; border-color: #e8501a; box-shadow: 0 0 0 5px rgba(232,80,26,.2); }

/* ---- dashboard ---- */
.dash-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 14px; padding: 18px 22px; border-radius: 18px; color: #fff; background: radial-gradient(circle at 92% -20%, #3b2fd6 0, #1a1190 38%, #0d0a3d 80%); box-shadow: 0 14px 30px rgba(42,31,184,.25); overflow: hidden; position: relative; }
.dash-hero::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(247,147,30,.4), transparent 65%); pointer-events: none; }
.dash-hero h1 { margin: 2px 0 0; color: #fff; font: 800 26px Manrope, sans-serif; letter-spacing: -.5px; }
.dash-date { margin: 0; font-size: 12.5px; letter-spacing: .6px; text-transform: uppercase; color: rgba(255,255,255,.7); } .dash-sub { margin: 3px 0 0; color: rgba(255,255,255,.8); font-size: 14px; }
.dash-quicks { display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 1; }
.dash-quick { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid rgba(255,255,255,.28); border-radius: 12px; background: rgba(255,255,255,.12); color: #fff; font: 700 13.5px 'DM Sans', sans-serif; cursor: pointer; transition: background .15s, transform .15s; }
.dash-quick:hover { background: rgba(255,255,255,.24); transform: translateY(-1px); } .dash-quick:first-child { background: linear-gradient(135deg, #f7931e, #e8501a); border-color: transparent; }
.dash-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.dash-kpi { --t: #0a4bff; position: relative; display: grid; gap: 2px; padding: 12px 14px; text-align: left; cursor: pointer; border: 1px solid color-mix(in srgb, var(--t) 26%, #fff); border-radius: 14px; background: linear-gradient(160deg, color-mix(in srgb, var(--t) 10%, #fff), #fff 70%); font: inherit; transition: transform .15s, box-shadow .15s; animation: dash-in .5s both; }
.dash-kpi:hover { transform: translateY(-2px); box-shadow: 0 10px 22px color-mix(in srgb, var(--t) 22%, transparent); }
.dash-kpi:nth-child(2) { animation-delay: .05s; } .dash-kpi:nth-child(3) { animation-delay: .1s; } .dash-kpi:nth-child(4) { animation-delay: .15s; } .dash-kpi:nth-child(5) { animation-delay: .2s; } .dash-kpi:nth-child(6) { animation-delay: .25s; }
.dash-kpi.tone-blue { --t: #0a4bff; } .dash-kpi.tone-green { --t: #14935f; } .dash-kpi.tone-red { --t: #d6403a; } .dash-kpi.tone-violet { --t: #7a4bff; } .dash-kpi.tone-teal { --t: #0b8f9c; } .dash-kpi.tone-orange { --t: #e8501a; }
.dash-kpi-ico { position: absolute; top: 10px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; font-size: 17px; background: color-mix(in srgb, var(--t) 15%, #fff); }
.dash-kpi-label { font-size: 12.5px; font-weight: 600; color: #5a463e; padding-right: 36px; } .dash-kpi strong { font: 800 24px Manrope, sans-serif; color: var(--t); letter-spacing: -.5px; } .dash-kpi small { color: #7a665e; font-size: 12px; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, .9fr) minmax(0, .9fr); gap: 12px; margin-bottom: 12px; }
.dash-grid .panel { padding-bottom: 12px; } .dash-chart-wrap { padding: 4px 14px 0; } .dash-chart { width: 100%; height: auto; } .dash-units { font-size: 11px; fill: #8a7a72; }
.dash-donut-wrap { display: grid; justify-items: center; gap: 10px; padding: 8px 14px; } .dash-donut { position: relative; width: 150px; height: 150px; } .dash-donut svg { width: 100%; height: 100%; }
.dash-seg { transition: stroke-width .2s; animation: dash-seg 1.1s cubic-bezier(.3,.1,.2,1) both; } .dash-seg:hover { stroke-width: 22; }
.dash-donut-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .dash-donut-c strong { font: 800 28px Manrope, sans-serif; color: #3b1711; } .dash-donut-c small { font-size: 11.5px; color: #7a665e; }
.dash-legend { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 6px; font-size: 13px; } .dash-legend li { display: flex; align-items: center; gap: 8px; } .dash-legend i { width: 11px; height: 11px; border-radius: 3px; } .dash-legend b { margin-left: auto; }
.dash-funnel { display: grid; gap: 9px; padding: 10px 14px 4px; } .dash-fr { display: grid; grid-template-columns: 96px 1fr 28px; align-items: center; gap: 8px; font-size: 13px; } .dash-fr b { text-align: right; }
.dash-fbar { height: 12px; border-radius: 99px; background: #f0e8f7; overflow: hidden; } .dash-fbar i { display: block; height: 100%; border-radius: 99px; transform-origin: left; animation: dash-grow .9s cubic-bezier(.3,.1,.2,1) both; }
.dash-attn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; } .dash-attn.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-card { --t: #0a4bff; border-top: 4px solid var(--t); } .dash-card.tone-red { --t: #d6403a; } .dash-card.tone-violet { --t: #7a4bff; } .dash-card.tone-orange { --t: #e8501a; } .dash-card.tone-blue { --t: #0a4bff; } .dash-card.tone-teal { --t: #0b8f9c; }
.dash-card .panel-heading h2 { color: var(--t); } .dash-count { margin-left: 6px; padding: 1px 9px; border-radius: 99px; font-size: 12px; color: #fff; background: var(--t); }
.dash-list { display: grid; padding: 6px 8px 8px; } .dash-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 8px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; font: inherit; transition: background .12s; } .dash-row:hover { background: color-mix(in srgb, var(--t) 8%, #fff); }
.dash-av { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; font: 800 12px Manrope, sans-serif; color: var(--t); background: color-mix(in srgb, var(--t) 14%, #fff); }
.dash-main { flex: 1; min-width: 0; display: grid; } .dash-main strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-main small { color: #7a665e; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-amt { text-align: right; font-weight: 700; font-size: 13.5px; white-space: nowrap; } .dash-empty { padding: 18px 10px; text-align: center; color: #14935f; font-weight: 600; }
@keyframes dash-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes dash-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes dash-seg { from { stroke-dasharray: 0 400; } }
@media (max-width: 1250px) { .dash-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dash-grid { grid-template-columns: 1fr 1fr; } .dash-wide { grid-column: 1 / -1; } }
@media (max-width: 800px) { .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-grid, .dash-attn, .dash-attn.two { grid-template-columns: 1fr; } .dash-hero h1 { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { .dash-kpi, .dash-seg, .dash-fbar i { animation: none; } }
html[data-theme="dark"] .dash-kpi { background: #1f1512; } html[data-theme="dark"] .dash-kpi-label { color: #d4c4bc; }
.rem-table td { vertical-align: middle; } .rem-amt { font: 800 15px Manrope, sans-serif; } .rem-actions { white-space: nowrap; text-align: right; } .rem-actions .button { margin-left: 4px; }
.rem-wa { color: #fff; border: 0; background: #1faa59; } .rem-wa:hover { background: #17924a; } .rem-wa[disabled] { opacity: .45; cursor: not-allowed; }
.rem-table .cell-stack { max-width: 280px; }
.summary-strip > .fin-kpi.blue { --t: #0a4bff; } .summary-strip > .fin-kpi.violet { --t: #7a4bff; } .summary-strip > .fin-kpi.red { --t: #d6403a; } .summary-strip > .fin-kpi.green { --t: #14935f; } .summary-strip > .fin-kpi.orange { --t: #e8501a; }
.rem-table .cid { margin-left: 0; display: block; } .rem-table .cust-wrap { display: grid; gap: 1px; }
.summary-strip:has(.fin-kpi:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 760px) { .summary-strip:has(.fin-kpi:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.veh-cond { padding: 0 8px; border-radius: 99px; font-size: 11.5px; font-weight: 700; } .veh-cond.new { color: #0a4bff; background: #e8efff; } .veh-cond.used { color: #7a4bff; background: #efe9ff; }
.veh-stock { display: grid; gap: 3px; min-width: 96px; } .veh-stock strong { font: 800 18px Manrope, sans-serif; } .veh-stock small { font-size: 12px; color: #7a665e; }
.veh-stock .fin-bar i { background: linear-gradient(90deg, #1fa971, #7ed6a8); } .veh-stock.low strong { color: #e8501a; } .veh-stock.low .fin-bar i { background: linear-gradient(90deg, #f7931e, #ffc47a); } .veh-stock.out strong { color: #d6403a; } .veh-stock.out .fin-bar i { background: #d6403a; }
.dash-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); } .dash-grid { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
@media (max-width: 1250px) { .dash-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dash-grid { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- dashboard: fits one screen ---- */
.dash-hero { padding: 12px 18px; margin-bottom: 10px; border-radius: 14px; } .dash-hero h1 { font-size: 20px; margin: 0; } .dash-date { font-size: 11.5px; } .dash-sub { display: inline; margin-left: 8px; font-size: 13px; }
.dash-hero > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; } .dash-date { width: 100%; }
.dash-quick { padding: 7px 12px; font-size: 13px; }
.dash-kpis { gap: 8px; margin-bottom: 10px; } .dash-kpi { padding: 9px 12px; } .dash-kpi strong { font-size: 21px; } .dash-kpi-ico { width: 28px; height: 28px; top: 8px; right: 10px; font-size: 15px; } .dash-kpi small { font-size: 11.5px; }
.branch-strip { margin: 0 0 10px; } .branch-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .branch-lab { font: 700 11px 'DM Sans', sans-serif; letter-spacing: .8px; text-transform: uppercase; color: #8a7a72; }
.branch-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1.5px solid #ecd9ce; border-radius: 99px; background: #fff; font: 600 13px 'DM Sans', sans-serif; cursor: pointer; transition: border-color .15s, background .15s; } .branch-pill span { color: #7a665e; font-weight: 500; font-size: 12.5px; } .branch-pill em { font-style: normal; font-size: 11.5px; font-weight: 700; color: #d6403a; background: #ffe5e2; padding: 0 8px; border-radius: 99px; }
.branch-pill:hover { border-color: #f7931e; } .branch-pill.active { color: #fff; border-color: #e8501a; background: #e8501a; } .branch-pill.active span { color: rgba(255,255,255,.85); } .branch-pill.active em { color: #fff; background: rgba(255,255,255,.25); }
.dash-main-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr); grid-template-areas: "chart tabs" "loan tabs"; gap: 10px; align-items: stretch; }
.dash-chartcard { grid-area: chart; } .dash-loan { grid-area: loan; } .dash-tabs { grid-area: tabs; display: flex; flex-direction: column; }
.dash-main-grid .panel-heading { padding: 10px 14px 0; } .dash-main-grid .panel-heading p { display: none; } .dash-chart-wrap { padding: 0 12px 4px; }
.dash-loan .dash-donut-wrap { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 14px; padding: 4px 16px 10px; } .dash-loan .dash-donut { width: 110px; height: 110px; } .dash-loan .dash-donut-c strong { font-size: 22px; }
.dash-tabbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 10px 0; border-bottom: 1px solid #f0dccf; }
.dash-tab { position: relative; padding: 8px 12px; border: 0; border-bottom: 3px solid transparent; background: transparent; font: 700 13px 'DM Sans', sans-serif; color: #7a665e; cursor: pointer; margin-bottom: -1px; } .dash-tab b { margin-left: 4px; padding: 0 7px; border-radius: 99px; font-size: 11.5px; color: #fff; background: #b9a79d; }
.dash-tab:hover { color: #3a1a00; } .dash-tab.on { color: #e8501a; border-bottom-color: #e8501a; } .dash-tab.on b { background: #e8501a; }
.dash-tabs .dash-list { flex: 1; overflow: auto; padding: 4px 8px 8px; } .dash-tabs .dash-row { --t: #e8501a; padding: 7px 8px; }
.dash-tabs .dash-av { width: 30px; height: 30px; }
@media (max-width: 1100px) { .dash-main-grid { grid-template-columns: 1fr; grid-template-areas: "chart" "loan" "tabs"; } }
html[data-theme="dark"] .branch-pill { background: #1f1512; border-color: #4a3732; color: #f1e8e3; }

/* ---- left menu: compact, one section open at a time, searchable, each section in its own colour ---- */
.nav-find-wrap { position: relative; margin: 0 2px 8px; } .nav-find-wrap .search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #ffc23d; font-size: 14px; }
#nav-find { width: 100%; height: 34px; padding: 0 10px 0 32px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(0,0,0,.22); color: #fff; font: 500 13.5px 'DM Sans', sans-serif; } #nav-find::placeholder { color: rgba(255,255,255,.5); } #nav-find:focus { outline: none; border-color: #ffc23d; box-shadow: 0 0 0 3px rgba(255,194,61,.18); }
.nav-item { min-height: 32px; margin: 1px 0; padding: 0 10px; font-size: 13.5px; border-left: 3px solid transparent; }
.nav-item[hidden], .nav-heading[hidden] { display: none; }
[data-group-body="workspace"] { --gc: #ffc23d; } [data-group-body="aftersales"] { --gc: #4fd1a5; } [data-group-body="business"] { --gc: #ff8a5b; } [data-group-body="platform"] { --gc: #b18cff; } [data-group-body="setup"] { --gc: #7fb5ff; }
[data-group-body] .nav-icon { color: var(--gc); opacity: .85; }
[data-group-body] .nav-item:hover { background: color-mix(in srgb, var(--gc) 12%, transparent); }
[data-group-body] .nav-item.active { background: color-mix(in srgb, var(--gc) 20%, rgba(0,0,0,.2)); border-left-color: var(--gc); color: #fff; }
button.nav-heading { margin-bottom: 4px; padding-top: 5px; padding-bottom: 5px; } .nav-heading-spaced { margin-top: 8px; }

/* ---- sale screen: order-tracking bar + tabs ---- */
.trk { display: flex; list-style: none; margin: 0 0 12px; padding: 14px 10px 10px; border: 1px solid #ecd9ce; border-radius: 14px; background: linear-gradient(180deg, #fffaf6, #fff); }
.trk-step { position: relative; flex: 1; min-width: 0; text-align: center; }
.trk-step::before { content: ""; position: absolute; top: 16px; left: -50%; right: 50%; height: 4px; border-radius: 4px; background: #e6dcd5; z-index: 0; } .trk-step:first-child::before { display: none; }
.trk-step.done::before, .trk-step.now::before { background: #1fa971; }
.trk-step button { position: relative; z-index: 1; display: grid; justify-items: center; gap: 2px; width: 100%; padding: 0 2px; border: 0; background: transparent; cursor: pointer; font: inherit; }
.trk-dot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #e6dcd5; background: #fff; font: 800 13px Manrope, sans-serif; color: #9a8a82; transition: transform .15s; }
.trk-step.done .trk-dot { color: #fff; border-color: #1fa971; background: #1fa971; } .trk-step.now .trk-dot { color: #fff; border-color: #f7931e; background: #f7931e; box-shadow: 0 0 0 5px rgba(247,147,30,.22); animation: trk-pulse 1.8s ease-in-out infinite; }
.trk-step button:hover .trk-dot { transform: scale(1.1); }
.trk-label { margin-top: 2px; font: 700 12.5px 'DM Sans', sans-serif; color: #3b1711; } .trk-step.todo .trk-label { color: #8a7a72; }
.trk-step small { font-size: 11px; color: #8a7a72; } .trk-step.done small { color: #14935f; } .trk-step.now small { color: #e8501a; font-weight: 700; }
.trk-cancel { display: grid; gap: 2px; padding: 12px 16px; border: 1px solid #f0b5b0; border-radius: 12px; background: #fff1ef; color: #b13a0e; }
@keyframes trk-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(247,147,30,.22); } 50% { box-shadow: 0 0 0 8px rgba(247,147,30,.08); } }
@media (prefers-reduced-motion: reduce) { .trk-step.now .trk-dot { animation: none; } }
@media (max-width: 640px) { .trk-label { font-size: 11px; } .trk-dot { width: 28px; height: 28px; } .trk-step::before { top: 13px; } .trk-step small { display: none; } }
.sale-tile.t-teal { --t: #0b8f9c; }
.sale-tabs { margin: 12px 0; width: fit-content; max-width: 100%; flex-wrap: wrap; }
.sale-sec h3 { margin-bottom: 10px; }
.dash-tab { --c: #e8501a; white-space: nowrap; padding: 8px 10px; }
.dt-emi { --c: #d6403a; } .dt-ready { --c: #7a4bff; } .dt-sales { --c: #0a4bff; } .dt-shop { --c: #0b8f9c; }
.dash-tab::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--c); vertical-align: 1px; }
.dash-tab:hover { color: var(--c); } .dash-tab.on { color: var(--c); border-bottom-color: var(--c); background: color-mix(in srgb, var(--c) 8%, transparent); border-radius: 8px 8px 0 0; } .dash-tab b { background: color-mix(in srgb, var(--c) 55%, #b9a79d); } .dash-tab.on b { background: var(--c); }
.dash-tabs .dash-list { --t: var(--c, #e8501a); } .dash-list.dt-emi { --t: #d6403a; } .dash-list.dt-ready { --t: #7a4bff; } .dash-list.dt-sales { --t: #0a4bff; } .dash-list.dt-shop { --t: #0b8f9c; }
.dash-tabs .dash-row { --t: inherit; } .dash-tabs .dash-row:hover { background: color-mix(in srgb, var(--t) 9%, #fff); } .dash-tabs .dash-av { color: var(--t); background: color-mix(in srgb, var(--t) 14%, #fff); }
.dash-tabs .dash-tabbar { gap: 2px; } .dash-tabs .button-link { white-space: nowrap; }
.br-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 0 0 10px; padding: 10px 14px; border: 1px solid #ecd9ce; border-radius: 14px; background: linear-gradient(90deg, #fff7f1, #fff 55%); }
.br-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .br-lab { font: 700 11px 'DM Sans', sans-serif; letter-spacing: .8px; text-transform: uppercase; color: #8a7a72; }
.br-tabs { display: inline-flex; gap: 3px; padding: 3px; border-radius: 12px; background: #f4eee9; flex-wrap: wrap; }
.br-tab { padding: 7px 14px; border: 0; border-radius: 9px; background: transparent; color: #6b5a52; font: 700 13.5px 'DM Sans', sans-serif; cursor: pointer; transition: background .15s, color .15s; } .br-tab:hover { color: #3a1a00; background: #fff; }
.br-tab.on { color: #fff; background: #e8501a; box-shadow: 0 3px 10px rgba(232,80,26,.35); }
.br-info { display: flex; align-items: center; gap: 8px 22px; flex-wrap: wrap; } .br-name { display: grid; padding-right: 6px; } .br-name strong { font-size: 15px; } .br-name small { color: #7a665e; font-size: 12.5px; }
.br-stat { --t: #0a4bff; display: grid; padding-left: 10px; border-left: 3px solid var(--t); } .br-stat strong { font: 800 18px Manrope, sans-serif; color: var(--t); line-height: 1.15; } .br-stat span { font-size: 12px; color: #7a665e; }
.br-stat.violet { --t: #7a4bff; } .br-stat.teal { --t: #0b8f9c; } .br-stat.red { --t: #d6403a; } .br-stat.green { --t: #14935f; }
html[data-theme="dark"] .br-bar { background: #1f1512; border-color: #4a3732; } html[data-theme="dark"] .br-tabs { background: #2a1d18; } html[data-theme="dark"] .br-tab:hover { background: #3a2a24; color: #fff; }
.br-info { flex: 1; justify-content: flex-end; } @media (max-width: 1300px) { .br-info { justify-content: flex-start; } }
.chip-gold { --c: #b7860b; } .chip-indigo { --c: #3b3bb8; } .chip-lime { --c: #6a9a12; } .chip-brown { --c: #8a5a3c; }
.sg4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; align-items: start; } .sg4 > .s2 { grid-column: span 2; } .sg4 > .full { grid-column: 1 / -1; }
.sg4 .form-field label { min-height: 20px; } .sg4 .form-control, .sg4 select { height: 42px; }
@media (max-width: 760px) { .sg4 { grid-template-columns: 1fr 1fr; } .sg4 > .s2 { grid-column: 1 / -1; } }
.sg4 .form-field > label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Add EMI payment window ---- */
.pay-dialog { width: min(560px, calc(100vw - 24px)); border-radius: 18px; } .pay-form { padding: 18px 20px 16px; display: grid; gap: 14px; }
.pay-head { display: flex; align-items: center; gap: 12px; } .pay-head h2 { margin: 0; font: 800 19px Manrope, sans-serif; } .pay-head p { margin: 1px 0 0; color: #7a665e; font-size: 13px; } .pay-head .dialog-close { margin-left: auto; }
.pay-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font: 800 20px Manrope, sans-serif; color: #fff; background: linear-gradient(135deg, #1fa971, #0b8f9c); }
.pay-field { display: grid; gap: 6px; min-width: 0; } .pay-field > label { font-size: 13px; font-weight: 700; color: #3a4656; } .pay-field small { font-weight: 500; color: #8a7a72; }
.pay-emis { display: flex; flex-wrap: wrap; gap: 6px; } .pay-emi { display: grid; gap: 1px; padding: 6px 10px; text-align: left; border: 1.5px solid #ecd9ce; border-radius: 10px; background: #fff; cursor: pointer; font: inherit; } .pay-emi b { font-size: 13px; } .pay-emi span { font-size: 11.5px; color: #7a665e; } .pay-emi em { font-style: normal; font-size: 11px; font-weight: 700; color: #d6403a; }
.pay-emi:hover { border-color: #f7931e; } .pay-emi.on { border-color: #0a4bff; background: #eef3ff; box-shadow: 0 0 0 3px rgba(10,75,255,.12); }
.pay-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .pay-sum div { padding: 9px 12px; border-radius: 12px; background: #f7f1ed; } .pay-sum span { display: block; font-size: 12px; color: #7a665e; } .pay-sum strong { font: 800 16px Manrope, sans-serif; } .pay-sum .hot { background: #fff1e8; } .pay-sum .hot strong { color: #d6403a; }
.pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 520px) { .pay-grid { grid-template-columns: 1fr; } .pay-sum { grid-template-columns: 1fr; } }
.pay-quick { display: flex; gap: 6px; } .pay-quick button { padding: 4px 10px; border: 1px dashed #f7931e; border-radius: 99px; background: #fff7ee; color: #b3541a; font: 700 12px 'DM Sans', sans-serif; cursor: pointer; } .pay-quick button:hover { background: #ffe9d2; }
.pay-after { padding: 9px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600; } .pay-after.ok { color: #0b6b3a; background: #e2f6ea; } .pay-after.part { color: #8a5a00; background: #fff3d6; } .pay-after.bad { color: #b13a0e; background: #ffe9e5; }
.pay-modes { display: flex; flex-wrap: wrap; gap: 6px; } .pay-mode { padding: 7px 13px; border: 1.5px solid #ecd9ce; border-radius: 99px; background: #fff; font: 600 13px 'DM Sans', sans-serif; cursor: pointer; } .pay-mode:hover { border-color: #f7931e; } .pay-mode.on { color: #fff; border-color: #14935f; background: #14935f; }
.pay-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 6px; border-top: 1px solid #f0dccf; } .pay-actions .button[disabled] { opacity: .5; cursor: not-allowed; }
.pay-grid { align-items: start; } .pay-grid .pay-field { align-content: start; }

/* ---- coloured action buttons inside the sale / finance / service-bill windows ---- */
.sale-dialog [data-act="add-payment"], .sale-dialog [data-act="add-pay"], .sale-dialog [data-act="add-line"] { color: #fff; border: 0; background: linear-gradient(135deg, #1fa971, #14935f); box-shadow: 0 4px 10px rgba(20,147,95,.28); }
.sale-dialog [data-act="invoice"], .sale-dialog [data-act="print-dn"], .sale-dialog [data-act="chart"] { color: #fff; border: 0; background: linear-gradient(135deg, #3b6bff, #0a4bff); box-shadow: 0 4px 10px rgba(10,75,255,.25); }
.sale-dialog [data-act="cust-docs"], .sale-dialog [data-act="add-vehicle"], .sale-dialog [data-act="save-rating"] { color: #fff; border: 0; background: linear-gradient(135deg, #9a72ff, #7a4bff); }
.sale-dialog [data-act="add-payment"]:hover, .sale-dialog [data-act="add-pay"]:hover, .sale-dialog [data-act="invoice"]:hover, .sale-dialog [data-act="print-dn"]:hover { filter: brightness(.93); }
.sale-dialog .row-action[data-act="rcpt"] { color: #0a4bff; background: #e8efff; border-radius: 8px; padding: 4px 10px; }
.sale-dialog .row-action[data-act="cash-challan"] { color: #14935f; background: #e1f5ec; border-radius: 8px; padding: 4px 10px; }
.sale-dialog .row-action[data-act="collect"] { color: #fff; background: #e8501a; border-radius: 8px; padding: 4px 12px; }
.sale-dialog .row-action[data-act="del-payment"], .sale-dialog .row-action[data-act="del-pay"], .sale-dialog .row-action[data-act="del-file"] { color: #d6403a; background: #ffe9e6; border-radius: 8px; padding: 4px 10px; }
.sale-dialog .row-action[data-act="rcpt"]:hover { background: #d4e1ff; } .sale-dialog .row-action[data-act="cash-challan"]:hover { background: #cdeedd; } .sale-dialog .row-action[data-act="del-payment"]:hover, .sale-dialog .row-action[data-act="del-pay"]:hover { background: #ffd5d0; }
.sale-dialog .col-btns, .sale-dialog td:has(> .row-action) { white-space: nowrap; }
.sg4.compact { gap: 8px 12px; } .sg4.compact .form-field { gap: 3px; } .sg4.compact .form-field > label { font-size: 12.5px; } .sg4.compact .form-control, .sg4.compact select { height: 36px; padding-top: 0; padding-bottom: 0; font-size: 14px; }
.sg-sub { margin-top: 4px; padding-top: 8px; border-top: 1px dashed #ecd9ce; font: 700 11.5px 'DM Sans', sans-serif; letter-spacing: .7px; text-transform: uppercase; color: #8a7a72; }
.sale-dialog .sale-sec { padding: 10px 14px 12px; margin-bottom: 8px; } .sale-dialog .sale-sec h3 { margin-bottom: 8px; font-size: 15px; }
.emi-chart2 { max-height: 190px; width: 100%; } .emi-chart-wrap { padding-bottom: 0; }
.emi-chart2 .chart-label { font-size: 11px; } .emi-legend { padding: 2px 0 8px; font-size: 12px; } .emi-leg-note { margin-left: auto; color: #8a7a72; }
.emi-chart2 { max-height: none; }
.rdy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: -4px 0 12px; padding: 8px 12px; border-radius: 12px; } .rdy.has-miss { background: #fff4e6; border: 1px solid #f7c98e; } .rdy.all-ok { background: #e2f6ea; border: 1px solid #9fdcb8; }
.rdy strong { margin-right: 4px; font-size: 13.5px; } .rdy.has-miss strong { color: #b3541a; } .rdy.all-ok strong { color: #0b6b3a; }
.rdy-chip { padding: 3px 10px; border: 0; border-radius: 99px; font: 700 12.5px 'DM Sans', sans-serif; cursor: pointer; } .rdy-chip.ok { color: #0b6b3a; background: #cfeedd; } .rdy-chip.no { color: #b13a0e; background: #ffd9cf; } .rdy-chip.no:hover { background: #ffc4b5; } .rdy-chip small { font-weight: 500; }

/* Darker field borders everywhere */
html:not([data-theme="dark"]) :is(.form-control, .search-input, .filter-select, .period-select, .gsearch-input, .lang-select, .view-select, .sp-input, .tab-search input, .list-toolbar .search-input, .letter-branch select, .range-field input, .tb-range) { border-color: #8a7a72; }
html:not([data-theme="dark"]) :is(.form-control, .search-input, .filter-select, .period-select, .sp-input, .list-toolbar .search-input):focus { border-color: #d74711; }

/* ---- Add customer: compact paper tiles, aligned fields ---- */
.papers-bar .papers-grid { gap: 8px; } .papers-bar .hist-paper { display: grid; grid-template-columns: 38px 1fr; grid-template-areas: "ico title" "ico files"; column-gap: 10px; row-gap: 2px; padding: 9px 11px; border-radius: 12px; align-items: center; }
.papers-bar .hist-paper .paper-thumb { grid-area: ico; width: 38px; height: 38px; font-size: 19px; border-radius: 10px; } .papers-bar .hist-paper > strong { grid-area: title; font-size: 13.5px; } .papers-bar .hist-paper-files { grid-area: files; flex-wrap: nowrap; gap: 6px; min-width: 0; } .papers-bar .paper-state { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.papers-bar .hist-paper-files .button { flex: none; padding: 3px 9px; font-size: 12px; }
#form-fields.form-grid { align-items: start; } #form-fields .form-field > label { min-height: 0; } #form-fields input.form-control:not([type=checkbox]):not([type=file]), #form-fields select.form-control { height: 40px; }

/* ---- alerts: clean stacked cards, top right ---- */
.toast-region { inset: auto 20px 24px auto; transform: none; width: min(380px, calc(100vw - 32px)); max-width: none; display: flex; flex-direction: column; gap: 10px; }
.toast-region:not(:popover-open):not(:empty) { display: flex; }
.toast { grid-template-columns: auto 1fr auto; align-items: start; gap: 12px; min-width: 0; padding: 12px 12px 14px 14px; border: 1px solid #e6ece8; border-left: 4px solid #1faa59; border-radius: 12px; box-shadow: 0 10px 28px rgba(20,35,28,.16), 0 1px 3px rgba(20,35,28,.08); animation: toast-slide .28s cubic-bezier(.2,.9,.3,1) both; }
@keyframes toast-slide { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.toast.toast-out { animation: toast-out2 .2s ease-in both; } @keyframes toast-out2 { to { opacity: 0; transform: translateX(28px); } }
.toast-icon { width: 28px; height: 28px; box-shadow: none !important; margin-top: 1px; } .toast-icon svg { width: 16px; height: 16px; stroke-width: 3; }
.toast-body strong { font-size: 14px; font-weight: 700; } .toast-detail { font-size: 12.5px; }
.toast-x { border: 0; background: transparent; color: #8a978f; font-size: 20px; line-height: 1; padding: 0 2px; cursor: pointer; border-radius: 6px; } .toast-x:hover { background: #f1f4f2; color: #2c3a33; }
.toast-bar { height: 2px; opacity: .55; }
.toast-ok { border-left-color: #1faa59; } .toast-warn { border-left-color: #f08a14; } .toast-bad { border-left-color: #d6403a; }
html[data-theme="dark"] .toast { border-color: #33423a; } html[data-theme="dark"] .toast-x:hover { background: #2b3a32; color: #f1e8e3; }
@media (max-width: 600px) { .toast-region { inset: auto 16px 16px 16px; width: auto; } }

/* ---- alerts: centred confirmation box ---- */
.toast-region { inset: 0; margin: auto; width: min(380px, calc(100vw - 32px)); height: max-content; max-width: none; transform: none; display: block; pointer-events: none; }
.toast-region:not(:popover-open):not(:empty) { display: block; }
.toast { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 10px; padding: 26px 24px 20px; text-align: center; border: 1px solid #e3e8e5; border-top: 5px solid #1faa59; border-left: 1px solid #e3e8e5; border-radius: 18px; background: #fff; box-shadow: 0 30px 80px rgba(20,35,28,.32), 0 0 0 100vmax rgba(20,18,16,.18); animation: toast-pop .26s cubic-bezier(.2,1.2,.3,1) both; pointer-events: auto; cursor: default; }
@keyframes toast-pop { from { opacity: 0; transform: scale(.9) translateY(8px); } to { opacity: 1; transform: none; } }
.toast.toast-out { animation: toast-fade .2s ease-in both; } @keyframes toast-fade { to { opacity: 0; transform: scale(.96); } }
.toast .toast-icon { width: 58px; height: 58px; margin: 0; box-shadow: 0 8px 22px rgba(31,170,89,.4) !important; } .toast .toast-icon svg { width: 30px; height: 30px; stroke-width: 3; }
.toast-lines { display: grid; gap: 8px; width: 100%; text-align: center; }
.toast-line { display: flex; align-items: flex-start; justify-content: center; gap: 8px; text-align: left; }
.toast-line > span { display: grid; gap: 1px; } .toast-line strong { font-size: 16px; font-weight: 700; color: #14211a; line-height: 1.3; } .toast-line small { font-size: 13px; color: #5b6b62; }
.toast-line i { flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; background: #1faa59; }
.toast-line-warn i { background: #f08a14; } .toast-line-bad i { background: #d6403a; }
.toast-first { justify-content: center; text-align: center; } .toast-first + .toast-line, .toast-lines .toast-line:not(.toast-first) { justify-content: flex-start; }
.toast-lines:has(.toast-line + .toast-line) .toast-first { justify-content: flex-start; text-align: left; }
.toast-lines:has(.toast-line + .toast-line) .toast-first::before { content: "✓"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; font-size: 11px; font-weight: 800; color: #fff; background: #1faa59; }
.toast-btn { min-width: 110px; margin-top: 6px; padding: 9px 22px; border: 0; border-radius: 10px; font: 700 14px 'DM Sans', sans-serif; color: #fff; background: #1faa59; cursor: pointer; } .toast-btn:hover { filter: brightness(.94); }
.toast-warn { border-top-color: #f08a14; } .toast-warn .toast-icon { box-shadow: 0 8px 22px rgba(240,138,20,.4) !important; } .toast-warn .toast-btn { background: #f08a14; }
.toast-bad { border-top-color: #d6403a; } .toast-bad .toast-icon { box-shadow: 0 8px 22px rgba(214,64,58,.4) !important; } .toast-bad .toast-btn { background: #d6403a; }
.toast-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: #1faa59; opacity: .6; transform-origin: left; animation: toast-bar var(--toast-ms, 3s) linear forwards; } .toast-bar[hidden] { display: none; }
.toast-x { display: none; }
html[data-theme="dark"] .toast { background: #1f2a24; border-color: #33423a; } html[data-theme="dark"] .toast-line strong { color: #f4efec; } html[data-theme="dark"] .toast-line small { color: #b7c4bc; }

/* ---- Backup & restore ---- */
.bk-hero { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 16px; border: 1px solid #cfe9db; background: linear-gradient(100deg, #e6f7ee, #f4fbf7); }
.bk-hero h2 { margin: 0; font: 800 19px Manrope, sans-serif; color: #0f3d27; } .bk-hero p { margin: 3px 0 0; font-size: 14px; color: #3f6b55; } .bk-hero .button { margin-left: auto; flex: none; }
.bk-badge { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-size: 22px; font-weight: 800; color: #fff; background: linear-gradient(145deg, #3fe27e, #1faa59); box-shadow: 0 6px 16px rgba(31,170,89,.4); }
.bk-hero.bk-warn { border-color: #f4d9b3; background: linear-gradient(100deg, #fff1de, #fff8ee); } .bk-hero.bk-warn h2 { color: #7a3e06; } .bk-hero.bk-warn p { color: #94602a; } .bk-hero.bk-warn .bk-badge { background: linear-gradient(145deg, #ffb347, #f08a14); box-shadow: 0 6px 16px rgba(240,138,20,.4); }
.bk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 14px; }
.bk-tile { padding: 14px 16px; border: 1px solid #ecd9ce; border-top: 4px solid var(--t, #2b6cff); border-radius: 14px; background: #fff; } .bk-tile p { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: #5d4a42; word-break: break-word; } .bk-tile code { font-size: 12px; }
.bk-tile-head { display: flex; align-items: center; gap: 9px; } .bk-tile-head strong { font-size: 14.5px; }
.bk-ico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; font-size: 16px; font-weight: 800; color: var(--t); background: var(--tb); }
.bk-state { margin-left: auto; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; color: #6b6b6b; background: #eee; } .bk-state.on { color: #0b6b3a; background: #dff4e7; } .bk-state.bad { color: #b3261e; background: #fde6e3; }
.bk-blue { --t: #2b6cff; --tb: #e8f0ff; } .bk-green { --t: #14935f; --tb: #e0f5ec; } .bk-violet { --t: #7a4de0; --tb: #efe8fd; } .bk-orange { --t: #e07a12; --tb: #fff0dd; } .bk-red { --t: #d6403a; --tb: #fde9e7; }
.bk-setup { margin-top: 8px; font-size: 12.5px; } .bk-setup summary { cursor: pointer; font-weight: 700; color: #b3541a; } .bk-setup p { margin: 6px 0 4px; } .bk-setup code { display: block; padding: 6px 8px; border-radius: 8px; background: #f6efe9; overflow-wrap: anywhere; }
.bk-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; margin-top: 14px; }
.bk-act { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #ecd9ce; border-left: 4px solid var(--t); border-radius: 14px; background: #fff; } .bk-act h3 { margin: 0; font-size: 15px; } .bk-act p { margin: 2px 0 0; font-size: 12.5px; color: #6b5a52; line-height: 1.4; } .bk-act > div { min-width: 0; flex: 1; } .bk-act .button { flex: none; }
.bk-files-head h3 { margin: 0 0 8px; font-size: 15px; } .bk-file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bk-file-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #faf6f2; } .bk-file-ico { color: #2b6cff; } .bk-file-name { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bk-file-list small { color: #7a665e; }
html[data-theme="dark"] :is(.bk-tile, .bk-act) { background: #1f1512; border-color: #4a3732; } html[data-theme="dark"] .bk-file-list li { background: #2a1d18; } html[data-theme="dark"] .bk-tile p, html[data-theme="dark"] .bk-act p { color: #d4c4bc; }
@media (max-width: 640px) { .bk-hero { flex-wrap: wrap; } .bk-hero .button { margin-left: 0; width: 100%; } }
/* alerts: follow the app theme (warm card, brown text, orange button) */
.toast { border: 1px solid #ecd9ce; background: #fffdfb; box-shadow: 0 24px 60px rgba(80,40,25,.28); }
.toast-ok, .toast-warn, .toast-bad { border-top: 1px solid #ecd9ce; }
.toast-line strong { color: #3d1e12; } .toast-line small { color: #7a665e; }
.toast .toast-btn { background: linear-gradient(180deg, #ee5a1f, #d94a14); box-shadow: 0 6px 14px rgba(217,74,20,.28); }
.toast-warn .toast-btn, .toast-bad .toast-btn { background: linear-gradient(180deg, #ee5a1f, #d94a14); }
.toast .toast-bar { background: #ee5a1f; }
html[data-theme="dark"] .toast { background: #2a1d18; border-color: #4a3732; } html[data-theme="dark"] .toast-line strong { color: #f6ece6; } html[data-theme="dark"] .toast-line small { color: #cdb9af; }

.dt-quotes { --c: #e8501a; } .dash-list.dt-quotes { --t: #e8501a; }
.status.emi { color: #5b3fc0; background: #efe9ff; }

/* ---- vehicle inventory graph ---- */
.inv-graph { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; padding: 14px 18px; margin: 0 0 14px; }
.inv-col h3 { margin: 0 0 8px; font-size: 14px; display: flex; align-items: baseline; gap: 8px; } .inv-col h3 small { color: #7a665e; font-weight: 500; font-size: 12px; } .inv-col h3 + .inv-seg + .inv-legend + h3 { margin-top: 14px; }
.inv-bar { display: grid; grid-template-columns: 96px 1fr 34px; align-items: center; gap: 10px; margin: 5px 0; font-size: 13px; } .inv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .inv-bar b { text-align: right; }
.inv-track { height: 12px; border-radius: 99px; background: #f3ebe5; overflow: hidden; } .inv-track i { display: block; height: 100%; border-radius: 99px; transform-origin: left; animation: inv-grow .7s ease-out both; } @keyframes inv-grow { from { transform: scaleX(0); } }
.inv-seg { display: flex; height: 14px; border-radius: 99px; overflow: hidden; background: #f3ebe5; } .inv-seg i { display: block; height: 100%; }
.inv-legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; } .inv-legend li { display: flex; align-items: center; gap: 6px; } .inv-legend i { width: 9px; height: 9px; border-radius: 50%; } .inv-legend b { margin-left: 2px; }
html[data-theme="dark"] .inv-track, html[data-theme="dark"] .inv-seg { background: #33251f; }
@media (max-width: 760px) { .inv-graph { grid-template-columns: 1fr; } }
.merge-tabs { margin: 0 0 12px; }
.si-booked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; } .si-booked .si-label { flex-basis: 100%; margin: 0; }

.vs-papers { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .vs-papers .chip { white-space: nowrap; }
/* Vehicle sales: compact rows */
.cell-stack.vs-veh { max-width: 300px; min-width: 190px; } .cell-stack:has(.fin-bar) { white-space: nowrap; } .vs-veh strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.vs-papers { flex-direction: row; flex-wrap: nowrap; gap: 4px; } .vs-papers .chip { padding: 2px 8px; font-size: 11.5px; }
[data-page-id="vehicleSales"] .table-main td, .page-vehicleSales .table-main td { padding-top: 8px; padding-bottom: 8px; }
.cell-stack .fin-bar { height: 6px; max-width: 150px; margin: 2px 0; }
/* ---- Service bill: compact two-column layout ---- */
.si-easy { width: min(980px, calc(100vw - 20px)); }
.si-easy .sale-body { padding: 12px 16px 6px; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 10px 14px; align-items: start; }
.si-easy .sale-body > :nth-child(1) { grid-column: 1; grid-row: 1; } .si-easy .sale-body > :nth-child(2) { grid-column: 1; grid-row: 2 / span 2; } .si-easy .sale-body > :nth-child(3) { grid-column: 2; grid-row: 1; } .si-easy .sale-body > :nth-child(4) { grid-column: 2; grid-row: 2; position: sticky; top: 0; }
.si-step { padding: 11px 14px 13px; border-radius: 12px; } .si-step h3 { gap: 9px; margin: 0 0 8px; font-size: 15.5px; } .si-step h3 small { font-size: 12px; }
.si-num { width: 24px; height: 24px; font-size: 13px; }
.si-easy .form-control { height: 38px; padding: 0 10px; font-size: 14.5px; border-radius: 8px; } .si-easy .si-big { height: 40px; font-size: 15px; }
.si-label { margin: 8px 0 4px; font-size: 13px; } .si-note { margin: 4px 0 0; font-size: 12.5px; }
.si-line { margin: 0 0 8px; padding: 9px 10px; border-left-width: 4px; border-radius: 10px; gap: 6px; }
.si-tag { padding: 2px 9px; font-size: 11px; } .si-x { font-size: 12.5px; padding: 2px 4px; }
.si-line-row label { font-size: 12.5px; gap: 3px; } .si-line-total { padding-bottom: 8px; font-size: 16px; }
.si-add { gap: 8px; margin: 2px 0 6px; } .si-addbtn { padding: 8px 10px; border-width: 1.5px; border-radius: 9px; font-size: 14px; }
.si-more { margin-top: 6px; } .si-more summary { padding: 4px 0; font-size: 13.5px; }
.si-total { padding: 12px; border-radius: 12px; } .si-total span { font-size: 12px; } .si-total strong { font-size: 28px; }
.si-modes { grid-template-columns: repeat(2, 1fr); gap: 8px; } .si-mode { padding: 9px 6px; border-width: 1.5px; border-radius: 9px; font-size: 14px; }
.si-paid-line { font-size: 14.5px; } .si-pay { font-size: 13.5px; padding: 7px 0; }
.si-btn { min-height: 42px; padding: 0 20px; font-size: 15px; }
@media (max-width: 760px) { .si-easy .sale-body { grid-template-columns: 1fr; } .si-easy .sale-body > * { grid-column: 1 !important; grid-row: auto !important; position: static !important; } }
.si-hide { display: none; } .si-cust { margin: 0 0 4px; font-size: 14.5px; color: #3d2a22; } .si-cust b { font-size: 16px; }
/* ---- Service bill redesign ---- */
.si-h { gap: 9px; } .si-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-size: 14px; }
.si-h1 .si-ico { background: #e8f0ff; } .si-h1 .si-ico::before { content: "👤"; }
.si-h2 .si-ico { background: #fff0dd; } .si-h2 .si-ico::before { content: "🔧"; }
.si-h3 .si-ico { background: #e0f5ec; } .si-h3 .si-ico::before { content: "₹"; font-weight: 800; color: #14935f; }
.si-step:has(.si-h1) { border-top: 3px solid #2b6cff; } .si-step:has(.si-h2) { border-top: 3px solid #e07a12; } .si-step:has(.si-h3) { border-top: 3px solid #14935f; }
.si-line { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid #ecd9ce; border-left: 4px solid #e07a12; border-radius: 10px; background: #fffaf6; }
.si-line.is-part { border-left-color: #2b6cff; background: #f6f9ff; }
.si-l-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.si-l-grid { display: grid; grid-template-columns: 1.4fr .6fr .6fr 1fr auto; gap: 8px; align-items: end; } .si-line.is-part .si-l-grid { grid-template-columns: .6fr 1fr auto; }
.si-l-grid label { display: grid; gap: 2px; font-size: 11.5px; font-weight: 700; color: #7a665e; text-transform: uppercase; letter-spacing: .3px; }
.si-l-grid .si-line-total { padding: 0 2px 8px; min-width: 84px; text-align: right; font-size: 15px; }
.si-x { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #fde9e7; color: #b42318; font-size: 12px; }
.si-x:hover { background: #fbd3cf; }
@media (max-width: 560px) { .si-l-grid, .si-line.is-part .si-l-grid { grid-template-columns: 1fr 1fr; } }
/* ---- Service bill: customer search + history card ---- */
.si-search { position: relative; } .si-search-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 17px; color: #b3541a; } .si-search .form-control { padding-left: 34px; border-color: #e07a12; box-shadow: 0 0 0 3px rgba(224,122,18,.12); }
.si-results { display: grid; gap: 6px; margin-top: 10px; max-height: 340px; overflow: auto; }
.si-res { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #ecd9ce; border-radius: 10px; background: #fff; font: inherit; text-align: left; cursor: pointer; } .si-res:hover { border-color: #e07a12; background: #fff7ee; }
.si-res-main { display: grid; min-width: 0; } .si-res-main strong { font-size: 14.5px; } .si-res-main small, .si-res-veh { font-size: 12.5px; color: #7a665e; }
.si-empty { padding: 14px; text-align: center; color: #7a665e; font-size: 13.5px; }
.si-hist { padding: 10px 12px; border: 1px solid #ecd9ce; border-radius: 12px; background: #fffaf6; }
.si-hist-head { display: flex; align-items: center; gap: 10px; } .si-hist-head > div { flex: 1; min-width: 0; display: grid; } .si-hist-head strong { font-size: 15.5px; } .si-hist-head small { color: #7a665e; font-size: 12.5px; }
.si-hist-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0 6px; } .si-hist-stats div { padding: 6px 8px; border-radius: 8px; background: #fff; border: 1px solid #f0e2d8; } .si-hist-stats span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: #7a665e; } .si-hist-stats b { font-size: 14px; } .si-hist-stats b.due { color: #b42318; }
.si-hist-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; } .si-hist-list li { display: grid; grid-template-columns: 1.2fr 1fr auto auto; gap: 8px; align-items: center; font-size: 12.5px; color: #5d4a42; } .si-st { font-style: normal; padding: 1px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; } .si-st.ok { color: #0b6b3a; background: #dff4e7; } .si-st.due { color: #8a5a00; background: #fff3d6; }
@media (max-width: 560px) { .si-hist-stats { grid-template-columns: 1fr 1fr; } }
.si-easy .sale-body:has(.si-search) { grid-template-columns: 1fr; } .si-easy .sale-body:has(.si-search) > * { grid-column: 1 !important; grid-row: auto !important; } .si-res .dash-av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fde7d8; color: #b3541a; font-size: 12px; font-weight: 800; } .si-hist .dash-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fde7d8; color: #b3541a; font-size: 13px; font-weight: 800; }

/* ===== Login v5: split screen, animated brand panel, clean sign-in form ===== */
.login-screen { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr); align-items: stretch; min-height: 100vh; padding: 0; background: #f6f4fb; position: relative; overflow: hidden; }
.login-screen[hidden] { display: none; }
.lx-brand { position: relative; overflow: hidden; color: #fff; background: radial-gradient(120% 90% at 0% 0%, #2b3fd0 0%, #151c78 45%, #0a0d3a 100%); }
.lx-brand::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(80% 80% at 30% 20%, #000, transparent); }
.lx-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: lx-float 14s ease-in-out infinite; }
.lx-o1 { width: 360px; height: 360px; left: -80px; top: -60px; background: #5b6cff; } .lx-o2 { width: 300px; height: 300px; right: -60px; bottom: 80px; background: #ff7a1a; opacity: .4; animation-delay: -5s; } .lx-o3 { width: 220px; height: 220px; left: 40%; bottom: -60px; background: #19c6a6; opacity: .3; animation-delay: -9s; }
@keyframes lx-float { 50% { transform: translate(30px, -26px) scale(1.08); } }
.lx-brand-in { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; min-height: 100vh; padding: 48px clamp(28px, 6vw, 88px); }
.lx-mark { font: 800 30px Manrope, sans-serif; letter-spacing: -.5px; } .lx-mark b { color: #fff; } .lx-mark i { font-style: normal; color: #ffb347; }
.lx-brand h2 { margin: 6px 0 0; max-width: 560px; font: 800 clamp(28px, 3.2vw, 44px)/1.12 Manrope, sans-serif; letter-spacing: -1.2px; } .lx-brand h2 em { font-style: normal; background: linear-gradient(90deg, #ffd27a, #ff9a3c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lx-brand p { margin: 0; max-width: 520px; color: #cfd6ff; font-size: 16.5px; line-height: 1.6; }
.lx-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; } .lx-points li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #e8ecff; } .lx-points span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); font-size: 16px; }
.lx-stage { position: relative; height: 170px; margin-top: 14px; max-width: 520px; }
.lx-card { position: absolute; padding: 12px 16px; border: 1px solid rgba(255,255,255,.22); border-radius: 16px; background: rgba(255,255,255,.12); backdrop-filter: blur(10px); box-shadow: 0 16px 40px rgba(5,8,50,.35); animation: lx-bob 6s ease-in-out infinite; }
.lx-card small { display: block; color: #cfd6ff; font-size: 12px; } .lx-card strong { font: 800 24px Manrope, sans-serif; }
.lx-c1 { left: 0; top: 6px; width: 170px; } .lx-c1 svg { width: 100%; height: 36px; margin-top: 4px; }
.lx-c2 { left: 190px; top: 0; width: 170px; animation-delay: -2s; } .lx-bars { display: flex; align-items: flex-end; gap: 5px; height: 38px; margin-top: 6px; } .lx-bars i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #8d9bff, #5b6cff); }
.lx-c3 { left: 70px; top: 100px; display: flex; align-items: center; gap: 10px; animation-delay: -4s; } .lx-c3 strong { font-size: 14px; } .lx-dot { width: 10px; height: 10px; border-radius: 50%; background: #3fe27e; box-shadow: 0 0 0 5px rgba(63,226,126,.25); }
@keyframes lx-bob { 50% { transform: translateY(-8px); } }
.lx-form { display: flex; align-items: center; justify-content: center; padding: 32px 24px; background: radial-gradient(90% 60% at 100% 0%, #fff0e4 0%, #f8f6fc 55%, #f3f1fa 100%); }
.lx-card-form { width: 100%; max-width: 410px; }
.lx-mark-sm { display: none; font-size: 26px; margin-bottom: 14px; } .lx-mark-sm b { color: #151c78; }
.lx-card-form h1 { margin: 0; font: 800 30px Manrope, sans-serif; letter-spacing: -.8px; color: #151c4a; } .lx-sub { margin: 6px 0 22px; color: #6b7088; font-size: 15px; }
#login-form { display: grid; gap: 15px; }
.lx-field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: #3a4166; }
.lx-input { position: relative; } .lx-input svg { position: absolute; left: 13px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); fill: none; stroke: #8a90b0; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.lx-input input { width: 100%; height: 50px; padding: 0 14px 0 42px; border: 1.5px solid #dcdff0; border-radius: 12px; background: #fff; color: #151c4a; font: 500 15.5px "DM Sans", sans-serif; transition: border-color .15s, box-shadow .15s; }
.lx-input input:focus { outline: 0; border-color: #4a5cff; box-shadow: 0 0 0 4px rgba(74,92,255,.15); }
.lx-input input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; }
.lx-input .pw-eye, .lx-input button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.lx-submit { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #ff7a1a, #e8501a); color: #fff; font: 800 16px Manrope, sans-serif; letter-spacing: .2px; cursor: pointer; box-shadow: 0 12px 26px rgba(232,80,26,.38); transition: transform .15s, box-shadow .15s; }
.lx-submit:hover { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(232,80,26,.45); } .lx-submit i { font-style: normal; transition: transform .15s; } .lx-submit:hover i { transform: translateX(4px); } .lx-submit:disabled { opacity: .7; cursor: wait; }
.lx-forgot { justify-self: center; border: 0; background: none; color: #3a4fd6; font: 600 14px "DM Sans", sans-serif; cursor: pointer; } .lx-forgot:hover { text-decoration: underline; }
.lx-help { margin-top: 22px; padding: 14px 16px; border: 1px solid #e6e8f5; border-radius: 14px; background: rgba(255,255,255,.75); }
.lx-help p { margin: 0 0 8px; color: #6b7088; font-size: 12.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.lx-help ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; } .lx-help a { display: flex; flex-direction: column; padding: 6px 10px; border-radius: 9px; background: #f3f4fc; color: #151c4a; text-decoration: none; } .lx-help a:hover { background: #e8ebff; } .lx-help b { font-size: 13px; } .lx-help span { font-size: 13px; color: #e8501a; font-weight: 700; }
.lx-partner { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; opacity: .95; } .lx-partner img { height: 40px; width: auto; border-radius: 8px; } .lx-partner .partner-logo { width: 84px; height: 40px; }
@media (max-width: 900px) {
  .login-screen { grid-template-columns: 1fr; }
  .lx-brand { display: none; }
  .lx-form { min-height: 100vh; background: linear-gradient(160deg, #151c78, #0a0d3a 45%, #f3f1fa 45.1%); align-items: flex-start; padding-top: 28px; }
  .lx-card-form { padding: 22px 20px 20px; border-radius: 20px; background: #fff; box-shadow: 0 24px 60px rgba(5,8,50,.35); margin-top: 18px; }
  .lx-mark-sm { display: block; }
}
@media (prefers-reduced-motion: reduce) { .lx-orb, .lx-card { animation: none; } }
.lx-partner .partner-logo { width: 120px; height: 54px; background-size: contain; background-repeat: no-repeat; background-position: center; } .lx-partner img { height: 54px; }
/* ===== Login v6: warm app theme (saffron + maroon), animated rider, spotlight, greeting ===== */
.lx-brand { background: radial-gradient(120% 90% at 0% 0%, #a6350f 0%, #5c1d0e 45%, #26100b 100%); }
.lx-o1 { background: #ff7a1a; } .lx-o2 { background: #ffc23d; opacity: .32; } .lx-o3 { background: #d6403a; opacity: .35; }
.lx-brand::before { background-image: linear-gradient(rgba(255,214,170,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,214,170,.06) 1px, transparent 1px); }
.lx-brand p { color: #f1d9c8; } .lx-brand h2 em { background: linear-gradient(90deg, #ffe08a, #ff9a3c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lx-points li { padding: 8px 10px; margin-left: -10px; border-radius: 12px; color: #e9cdb9; opacity: .62; transition: opacity .35s, background .35s, transform .35s; } .lx-points li.on { opacity: 1; color: #fff; background: rgba(255,255,255,.1); transform: translateX(6px); }
.lx-points span { background: rgba(255,194,61,.16); border-color: rgba(255,194,61,.3); }
.lx-card { border-color: rgba(255,214,170,.28); background: rgba(255,240,225,.1); } .lx-card small { color: #f1d9c8; } .lx-bars i { background: linear-gradient(180deg, #ffc27a, #ff7a1a); }
.lx-road { position: absolute; left: 0; right: 0; bottom: 0; height: 74px; overflow: hidden; background: linear-gradient(180deg, transparent, rgba(0,0,0,.35)); }
.lx-line { position: absolute; left: 0; right: 0; bottom: 14px; height: 3px; background: repeating-linear-gradient(90deg, rgba(255,214,170,.55) 0 26px, transparent 26px 52px); animation: lx-road 1.2s linear infinite; }
@keyframes lx-road { to { background-position: -52px 0; } }
.lx-bike { position: absolute; bottom: 12px; left: -130px; width: 100px; animation: lx-ride 11s linear infinite; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
@keyframes lx-ride { to { left: calc(100% + 30px); } }
.lx-wheel { transform-box: fill-box; transform-origin: center; animation: lx-spin .6s linear infinite; stroke-dasharray: 8 5; } @keyframes lx-spin { to { transform: rotate(360deg); } }
.lx-form { background: radial-gradient(90% 60% at 100% 0%, #ffe6d2 0%, #fff6ee 55%, #fbefe5 100%); }
.lx-hello { margin: 0 0 4px; color: #e8501a; font-size: 14px; font-weight: 700; letter-spacing: .3px; }
.lx-mark-sm b { color: #3a1410; } .lx-card-form h1 { color: #3a1410; } .lx-sub { color: #86695c; }
.lx-field label { color: #5a3a2e; } .lx-input input { border-color: #ecd9ce; color: #3a1410; } .lx-input input:focus { border-color: #e8501a; box-shadow: 0 0 0 4px rgba(232,80,26,.16); } .lx-input svg { stroke: #a58a7c; }
.lx-forgot { color: #b3361b; }
.lx-help { border-color: #f0dccf; } .lx-help p { color: #86695c; } .lx-help a { background: #fdf0e6; color: #3a1410; } .lx-help a:hover { background: #fbe3d2; } .lx-help span { color: #d6401a; }
@media (max-width: 900px) { .lx-form { background: linear-gradient(160deg, #a6350f, #26100b 45%, #fbefe5 45.1%); } }
@media (prefers-reduced-motion: reduce) { .lx-bike, .lx-line, .lx-wheel { animation: none; } }
.login-screen { height: 100vh; min-height: 0; } .lx-brand { height: 100vh; } .lx-brand-in { min-height: 0; height: 100%; padding-top: 36px; padding-bottom: 92px; gap: 14px; } .lx-form { overflow-y: auto; }
.lx-stage { height: 150px; margin-top: 6px; } .lx-c3 { top: 92px; }
@media (max-height: 800px) { .lx-stage { display: none; } .lx-points { margin-top: 0; } }
@media (max-width: 900px) { .login-screen { height: auto; min-height: 100vh; } }
/* ===== Login v7: blue theme, floating-label fields, live avatar, remember me, caps-lock hint ===== */
.lx-brand { background: radial-gradient(120% 90% at 0% 0%, #2f6bff 0%, #12308f 46%, #070f33 100%); }
.lx-o1 { background: #4a8bff; opacity: .55; } .lx-o2 { background: #19c6e6; opacity: .3; } .lx-o3 { background: #7a4bff; opacity: .38; }
.lx-brand::before { background-image: linear-gradient(rgba(170,205,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(170,205,255,.07) 1px, transparent 1px); }
.lx-mark i { color: #7fd3ff; } .lx-brand p { color: #cfdcff; } .lx-brand h2 em { background: linear-gradient(90deg, #a5ecff, #6fa8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lx-points li { color: #c9d8ff; } .lx-points li.on { color: #fff; background: rgba(120,170,255,.16); }
.lx-points span { background: rgba(127,211,255,.16); border-color: rgba(127,211,255,.32); }
.lx-card { border-color: rgba(170,205,255,.3); background: rgba(170,205,255,.1); } .lx-card small { color: #cfdcff; } .lx-bars i { background: linear-gradient(180deg, #8fd8ff, #3b7bff); }
.lx-c1 svg path { stroke: #8fe0ff; }

.lx-line { background: repeating-linear-gradient(90deg, rgba(170,205,255,.55) 0 26px, transparent 26px 52px); }
.lx-form { background: radial-gradient(90% 60% at 100% 0%, #dbe8ff 0%, #eef4ff 55%, #e6eeff 100%); }
.lx-card-form { max-width: 420px; padding: 30px 30px 24px; border: 1px solid rgba(255,255,255,.8); border-radius: 26px; background: rgba(255,255,255,.82); backdrop-filter: blur(14px); box-shadow: 0 30px 70px rgba(25,50,140,.22), 0 2px 0 rgba(255,255,255,.9) inset; }
.lx-who { display: flex; align-items: center; gap: 14px; } .lx-who h1 { margin: 0; font: 800 26px Manrope, sans-serif; letter-spacing: -.6px; color: #0f1f5c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 270px; }
.lx-hello { margin: 0 0 2px; color: #2f6bff; font-size: 13px; font-weight: 700; letter-spacing: .3px; }
.lx-avatar { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; background: linear-gradient(135deg, #dfe9ff, #c7d9ff); color: #5c78c9; font: 800 19px Manrope, sans-serif; transition: transform .25s, background .25s; } .lx-avatar svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .lx-avatar.on { background: linear-gradient(135deg, #2f6bff, #1639c9); color: #fff; transform: rotate(-4deg) scale(1.04); box-shadow: 0 10px 22px rgba(47,107,255,.4); }
.lx-sub { margin: 10px 0 20px; color: #5f6f9c; font-size: 14.5px; }
.lx-fl { position: relative; } .lx-fl input { width: 100%; height: 58px; padding: 22px 14px 6px; border: 0; border-radius: 14px; background: #eef2ff; color: #0f1f5c; font: 600 16px "DM Sans", sans-serif; transition: background .15s, box-shadow .15s; }
.lx-fl .pw-wrap > input { padding-right: 46px; }
.lx-fl label { position: absolute; left: 14px; top: 19px; color: #6c7bab; font-size: 15.5px; font-weight: 500; pointer-events: none; transition: transform .16s, font-size .16s, color .16s; transform-origin: left top; }
.lx-fl:has(input:focus) label, .lx-fl:has(input:not(:placeholder-shown)) label { transform: translateY(-12px); font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #2f6bff; }
.lx-fl input:focus { outline: 0; background: #fff; box-shadow: 0 0 0 2px #2f6bff, 0 8px 20px rgba(47,107,255,.16); }
.lx-bar { position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #2f6bff, #19c6e6); transform: scaleX(0); transform-origin: left; transition: transform .25s; pointer-events: none; } .lx-fl:has(input:focus) .lx-bar { transform: scaleX(1); }
.lx-fl .pw-eye { color: #6c7bab; }
.lx-caps { margin: -4px 0 0; padding: 6px 10px; border-radius: 8px; background: #fff4d6; color: #8a5a00; font-size: 13px; font-weight: 700; }
.lx-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lx-check { display: flex; align-items: center; gap: 8px; color: #4d5d8d; font-size: 13.5px; font-weight: 600; cursor: pointer; } .lx-check input { position: absolute; opacity: 0; } .lx-check i { width: 20px; height: 20px; border-radius: 7px; border: 2px solid #b8c6ee; background: #fff; transition: all .15s; position: relative; } .lx-check input:checked + i { background: #2f6bff; border-color: #2f6bff; } .lx-check input:checked + i::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } .lx-check input:focus-visible + i { box-shadow: 0 0 0 3px rgba(47,107,255,.3); }
.lx-forgot { color: #2f6bff; }
.lx-submit { position: relative; overflow: hidden; background: linear-gradient(135deg, #3d7bff, #1639c9); box-shadow: 0 14px 28px rgba(31,70,200,.4); } .lx-submit:hover { box-shadow: 0 18px 32px rgba(31,70,200,.5); }
.lx-submit::after { content: ""; position: absolute; inset: 0 auto 0 -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); animation: lx-shine 3.2s ease-in-out infinite; } @keyframes lx-shine { 60%, 100% { left: 130%; } }
.lx-help { border-color: #dbe4fb; background: rgba(255,255,255,.7); } .lx-help p { color: #6577a8; } .lx-help a { background: #eef2ff; color: #0f1f5c; } .lx-help a:hover { background: #dfe8ff; } .lx-help span { color: #2f6bff; }
.login-error { margin: 0; padding: 8px 12px; border-radius: 10px; background: #ffe9e7; color: #b3261e; font-size: 13.5px; font-weight: 600; }
@media (max-width: 900px) { .lx-form { background: linear-gradient(160deg, #2f6bff, #070f33 45%, #eef4ff 45.1%); } }
@media (prefers-reduced-motion: reduce) { .lx-submit::after { animation: none; } }
.lx-fl:has(input:-webkit-autofill) label { transform: translateY(-12px); font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #2f6bff; }
.lx-fl input:-webkit-autofill { -webkit-box-shadow: 0 0 0 60px #eef2ff inset; -webkit-text-fill-color: #0f1f5c; }
/* ===== Login v8: the original colours (navy night scene, gold, orange button) on the new layout ===== */
.login-screen { background: linear-gradient(rgba(8,8,40,.38), rgba(8,8,40,.38)), url("assets/login-bg.svg") center / cover no-repeat; }
.lx-brand { background: linear-gradient(100deg, rgba(8,8,40,.78) 0%, rgba(8,8,40,.35) 100%); }
.lx-brand::before { opacity: .5; } .lx-orb { display: none; } .lx-road { display: none; }
.lx-mark i { color: #ffc23d; } .lx-brand p { color: #dfe6ff; } .lx-brand h2 { text-shadow: 0 3px 18px rgba(0,0,20,.5); } .lx-brand h2 em { background: none; -webkit-background-clip: initial; background-clip: initial; color: #ffc23d; }
.lx-points li { color: #dfe6ff; } .lx-points li.on { background: rgba(255,255,255,.14); }
.lx-points span { background: rgba(255,194,61,.16); border-color: rgba(255,194,61,.34); }
.lx-card { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.12); } .lx-card small { color: #dfe6ff; } .lx-bars i { background: linear-gradient(180deg, #ffd36b, #f7931e); } .lx-c1 svg path { stroke: #ffc23d; }
.lx-form { background: transparent; }
.lx-card-form { background: #fff; border: 0; backdrop-filter: none; box-shadow: 0 24px 70px rgba(0,0,20,.5); }
.lx-hello { color: #e8801a; } .lx-who h1 { color: #0d0a3d; } .lx-sub { color: #5b6478; }
.lx-avatar { background: #eceffb; color: #6a74a8; } .lx-avatar.on { background: linear-gradient(135deg, #1b1b8f, #0a4bff); box-shadow: 0 10px 22px rgba(10,75,255,.38); }
.lx-fl input { background: #f3f5fb; color: #0d0a3d; } .lx-fl label { color: #6a7390; }
.lx-fl:has(input:focus) label, .lx-fl:has(input:not(:placeholder-shown)) label, .lx-fl:has(input:-webkit-autofill) label { color: #0a4bff; }
.lx-fl input:focus { box-shadow: 0 0 0 2px #0a4bff, 0 8px 20px rgba(10,75,255,.14); } .lx-fl input:-webkit-autofill { -webkit-box-shadow: 0 0 0 60px #f3f5fb inset; -webkit-text-fill-color: #0d0a3d; }
.lx-bar { background: linear-gradient(90deg, #0a4bff, #7a4bff); }
.lx-check input:checked + i { background: #0a4bff; border-color: #0a4bff; } .lx-check { color: #43486a; } .lx-forgot { color: #0a4bff; }
.lx-submit { background: linear-gradient(135deg, #e8501a, #d94a14); box-shadow: 0 12px 26px rgba(217,74,20,.4); } .lx-submit:hover { box-shadow: 0 16px 30px rgba(217,74,20,.5); }
.lx-help { border-color: #e6e9f0; background: #fafbff; } .lx-help p { color: #5b6478; } .lx-help a { background: #f1f3fb; color: #0d0a3d; } .lx-help a:hover { background: #e4e8f8; } .lx-help span { color: #e8801a; }
@media (max-width: 900px) { .lx-form { background: transparent; } }
.lx-brand { background: linear-gradient(100deg, rgba(8,8,40,.78) 0%, rgba(8,8,40,.3) 70%, rgba(8,8,40,0) 100%); } .lx-stage { display: none; }
/* ===== Login: clear partner logos + entrance animations ===== */
.lx-partner { flex-direction: column; gap: 8px; margin-top: 16px; }
.lx-partner::before { content: "Supporting partners"; color: #6a7390; font-size: 11.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.lx-partner-row { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; }
.lx-partner-row > * { display: grid; place-items: center; height: 64px; padding: 6px 12px; border: 1px solid #e6e9f0; border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(13,10,61,.08); transition: transform .2s, box-shadow .2s; }
.lx-partner-row > *:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(13,10,61,.16); }
.lx-partner-row img { height: 48px; width: auto; max-width: 190px; padding: 0; border-radius: 0; background: none; object-fit: contain; }
.lx-partner-row .partner-logo { width: 150px; height: 64px; padding: 0; background-size: 84% auto; background-repeat: no-repeat; background-position: center; filter: saturate(1.25) contrast(1.1); }
@keyframes lx-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes lx-left { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes lx-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes lx-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.login-screen { animation: lx-zoom 2.2s ease-out both; }
.lx-card-form { animation: lx-up .7s cubic-bezier(.2,.9,.3,1) both; }
.lx-who, .lx-sub, .lx-fl, .lx-caps, .lx-row, .lx-submit, .lx-help, .lx-partner { animation: lx-up .6s cubic-bezier(.2,.9,.3,1) both; }
.lx-who { animation-delay: .15s; } .lx-sub { animation-delay: .22s; } .lx-fl:nth-of-type(1) { animation-delay: .3s; } .lx-fl:nth-of-type(2) { animation-delay: .38s; } .lx-row { animation-delay: .46s; } .lx-submit { animation-delay: .54s; } .lx-help { animation-delay: .65s; } .lx-partner { animation-delay: .78s; }
.lx-mark, .lx-brand h2, .lx-brand p, .lx-points li { animation: lx-left .7s cubic-bezier(.2,.9,.3,1) both; }
.lx-mark { animation-delay: .1s; } .lx-brand h2 { animation-delay: .25s; } .lx-brand p { animation-delay: .4s; } .lx-points li:nth-child(1) { animation-delay: .55s; } .lx-points li:nth-child(2) { animation-delay: .65s; } .lx-points li:nth-child(3) { animation-delay: .75s; } .lx-points li:nth-child(4) { animation-delay: .85s; }
.lx-brand h2 em { background: linear-gradient(90deg, #ffc23d, #fff2c2, #ffc23d); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lx-glint 4s linear infinite; } @keyframes lx-glint { to { background-position: 200% center; } }
.lx-submit i { animation: lx-nudge 1.6s ease-in-out infinite; } @keyframes lx-nudge { 50% { transform: translateX(4px); } }
.lx-avatar { animation: lx-pop 3.2s ease-in-out infinite; } @keyframes lx-pop { 50% { transform: translateY(-3px); } } .lx-avatar.on { animation: none; }
.login-error:not([hidden]) { animation: lx-shake .45s; }
@media (prefers-reduced-motion: reduce) { .login-screen, .lx-card-form, .lx-who, .lx-sub, .lx-fl, .lx-caps, .lx-row, .lx-submit, .lx-help, .lx-partner, .lx-mark, .lx-brand h2, .lx-brand p, .lx-points li, .lx-brand h2 em, .lx-submit i, .lx-avatar { animation: none; } }
.lx-partner-row > * { background-color: #fff; background-image: none; height: 76px; }
.lx-partner-row img { height: 60px; max-width: 210px; }
.lx-partner-row .partner-logo { width: 84px; height: 76px; padding: 0; background: #fff url("assets/lapuptech.jpg") 50% 46.6% / 276% auto no-repeat; aspect-ratio: auto; filter: none; }
.lx-who { display: block; } .lx-who h1 { max-width: none; }
/* ===== Login v9: only the sign-in form is white; everything else sits on the blue scene ===== */
.lx-form { align-items: safe center; justify-content: center; overflow-y: auto; padding: 22px 24px; }
.lx-col { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 420px; margin: auto; }
.lx-card-form { max-width: none; width: 100%; }
.lx-langs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.lx-lang { padding: 5px 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 99px; background: rgba(255,255,255,.1); color: #e6ecff; font: 600 13px "DM Sans", sans-serif; cursor: pointer; backdrop-filter: blur(6px); transition: background .15s, transform .15s; } .lx-lang:hover { background: rgba(255,255,255,.2); transform: translateY(-1px); } .lx-lang.on { background: #fff; color: #0d0a3d; border-color: #fff; }
.lx-recent { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .lx-recent[hidden] { display: none; } .lx-recent > span { color: #b9c6f5; font-size: 12px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; } .lx-recent > div { display: flex; flex-wrap: wrap; gap: 6px; }
.lx-chip { padding: 6px 13px; border: 1px solid rgba(255,255,255,.3); border-radius: 99px; background: rgba(255,255,255,.12); color: #fff; font: 700 13.5px "DM Sans", sans-serif; cursor: pointer; backdrop-filter: blur(6px); } .lx-chip:hover { background: rgba(255,255,255,.24); }
.lx-help { margin: 0; padding: 12px 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 16px; background: rgba(255,255,255,.1); backdrop-filter: blur(10px); }
.lx-help p { margin: 0 0 8px; color: #c9d5ff; } .lx-help ul { grid-template-columns: 1fr 1fr; gap: 8px; }
.lx-help li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 6px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.1); }
.lx-help li b { grid-column: 1 / -1; color: #fff; font-size: 13.5px; } .lx-help a.lx-call { color: #ffc23d; font-size: 13px; font-weight: 700; text-decoration: none; background: none; padding: 0; } .lx-help a.lx-call:hover { text-decoration: underline; background: none; }
.lx-wa { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; background: #25d366; color: #05381a !important; font-size: 12px; font-weight: 800; text-decoration: none; } .lx-wa svg { width: 13px; height: 13px; fill: currentColor; } .lx-wa:hover { background: #3ee37d !important; }
.lx-partner::before { color: #b9c6f5; }
.lx-news { display: flex; align-items: center; gap: 12px; max-width: 520px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 14px; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); }
.lx-news > span { flex: none; padding: 3px 9px; border-radius: 99px; background: #ffc23d; color: #3a2400; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.lx-news b { font-size: 14px; font-weight: 600; color: #fff; } .lx-news b.in { animation: lx-newsin .5s ease both; } @keyframes lx-newsin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lx-status { display: flex; align-items: center; gap: 8px; margin: 0; color: #cfdcff; font-size: 13px; } .lx-status[hidden] { display: none; }
.lx-pulse { width: 9px; height: 9px; border-radius: 50%; background: #3fe27e; box-shadow: 0 0 0 0 rgba(63,226,126,.6); animation: lx-ping 2s infinite; } @keyframes lx-ping { 70% { box-shadow: 0 0 0 9px rgba(63,226,126,0); } 100% { box-shadow: 0 0 0 0 rgba(63,226,126,0); } }
.lx-mark-sm { display: none; }
@media (max-width: 900px) { .lx-form { padding-top: 16px; } .lx-mark-sm { display: block; } .lx-help ul { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .lx-pulse, .lx-news b.in { animation: none; } }
.lx-bar { display: none; }
.lx-help a.lx-wa { display: inline-flex; flex-direction: row; align-items: center; white-space: nowrap; } .lx-help a.lx-call { display: inline; flex-direction: row; }
.lx-langs { flex-wrap: nowrap; gap: 5px; } .lx-lang { padding: 4px 10px; font-size: 12.5px; white-space: nowrap; }
/* ===== Login v10: fits one screen (no scrolling), bike + auto + car road, tidy alignment ===== */
.lx-road { display: block; height: 84px; background: linear-gradient(180deg, rgba(8,8,40,0), rgba(8,8,40,.85) 45%); }
.lx-v { position: absolute; bottom: 12px; left: -150px; animation: lx-ride 12s linear infinite; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.lx-bike { width: 86px; } .lx-auto { width: 92px; animation-duration: 15s; animation-delay: -5s; } .lx-car { width: 112px; animation-duration: 18s; animation-delay: -11s; }
.lx-brand-in { padding-bottom: 100px; }
/* right column: compact so the card, support and partner logos all show without scrolling */
.lx-form { padding: 14px 20px; } .lx-col { gap: 10px; }
.lx-langs { justify-content: center; flex-wrap: wrap; } .lx-lang { padding: 3px 9px; font-size: 12px; }
.lx-card-form { padding: 20px 24px 18px; border-radius: 22px; }
.lx-sub { margin: 6px 0 14px; font-size: 13.5px; } .lx-who h1 { font-size: 24px; } #login-form { gap: 11px; }
.lx-fl input { height: 52px; padding-top: 20px; } .lx-fl label { top: 16px; } .lx-submit { height: 48px; }
.lx-help { padding: 9px 11px; } .lx-help p { margin-bottom: 6px; font-size: 11px; } .lx-help ul { gap: 6px; } .lx-help li { padding: 6px 9px; } .lx-help li b { font-size: 13px; }
.lx-partner { margin-top: 0; gap: 5px; } .lx-partner::before { font-size: 10.5px; } .lx-partner-row > * { height: 58px; } .lx-partner-row img { height: 44px; } .lx-partner-row .partner-logo { width: 64px; height: 58px; }
@media (max-height: 820px) { .lx-sub { display: none; } .lx-who h1 { font-size: 22px; } .lx-help p { display: none; } .lx-partner::before { display: none; } .lx-card-form { padding: 16px 22px 16px; } }
@media (max-height: 700px) { .lx-lang { display: none; } .lx-lang.on { display: inline-block; } .lx-recent { display: none; } }
@media (max-width: 900px) { .lx-mark-sm { display: block; margin-bottom: 4px; } .lx-mark-sm b { color: #0d0a3d; } .lx-mark-sm i { color: #e8801a; } }
/* 3D-style vehicles on the road */
.lx-spin { transform-box: fill-box; transform-origin: center; animation: lx-spin .7s linear infinite; }
.lx-bike { width: 120px; } .lx-auto { width: 130px; } .lx-car { width: 160px; }
.lx-v { bottom: 6px; filter: drop-shadow(0 8px 10px rgba(0,0,0,.4)); } .lx-wheel { animation: none; stroke-dasharray: none; }
.lx-road { height: 100px; } .lx-brand-in { padding-bottom: 112px; }
.lx-langs { display: none; }
.lx-status { flex-wrap: wrap; gap: 8px; } .lx-st { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 99px; background: rgba(255,255,255,.1); color: #e3ebff; font-size: 13px; backdrop-filter: blur(6px); } .lx-st b { color: #ffc23d; font-size: 14.5px; }
/* partner logos: bigger and sharp, full LapupTech logo with its tagline */
.lx-partner-row { gap: 12px; } .lx-partner-row > * { height: 80px; padding: 6px 12px; border-radius: 14px; }
.lx-partner-row img { height: 64px; width: auto; max-width: 220px; image-rendering: auto; }
.lx-partner-row .partner-logo { width: 124px; height: 80px; padding: 0; background: #fcfcfc url("assets/lapuptech.jpg") 50% 47% / 250% auto no-repeat; }
@media (max-height: 820px) { .lx-partner-row > * { height: 72px; } .lx-partner-row img { height: 56px; } .lx-partner-row .partner-logo { width: 112px; height: 72px; } }
.lx-partner-row .partner-logo { background-size: 200% auto; background-position: 50% 46%; }
.lx-who { margin-bottom: 12px; }
/* same speed, evenly spaced: the vehicles never run into each other */
.lx-bike, .lx-auto, .lx-car { animation-duration: 18s; } .lx-bike { animation-delay: 0s; } .lx-auto { animation-delay: -6s; } .lx-car { animation-delay: -12s; }
/* spare parts drifting behind the sign-in screen */
.lx-parts { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.lx-part { position: absolute; color: rgba(190,210,255,.28); transform: rotate(var(--r, 0deg)); animation: lx-drift 24s ease-in-out infinite; }
@keyframes lx-drift { 0%, 100% { transform: translate(0, 0) rotate(var(--r)); } 50% { transform: translate(14px, -20px) rotate(calc(var(--r) + 14deg)); } }
.lx-brand, .lx-form { position: relative; z-index: 1; }
.lx-brand { background: linear-gradient(100deg, rgba(8,8,40,.6) 0%, rgba(8,8,40,.2) 70%, rgba(8,8,40,0) 100%); }
@media (prefers-reduced-motion: reduce) { .lx-part { animation: none; } }
.lx-part { color: rgba(190,210,255,.36); }
@media (max-height: 820px) { .lx-brand-in { gap: 10px; padding-top: 22px; padding-bottom: 104px; } .lx-brand h2 { font-size: clamp(26px, 2.8vw, 38px); } .lx-brand p { display: none; } .lx-points { gap: 4px; } .lx-points li { padding: 5px 10px; } }
.rem-collect { background: linear-gradient(180deg, #1fa971, #14935f); color: #fff; border: 0; font-weight: 800; } .rem-collect:hover { filter: brightness(.95); } .rem-actions { white-space: nowrap; } .rem-actions .button + .button { margin-left: 4px; }
/* ===== Login: everything scales with the window height so it always fits one screen ===== */
.lx-brand-in { justify-content: center; gap: 2vh; padding-top: 4vh; padding-bottom: 15vh; }
.lx-mark { font-size: clamp(22px, 3.6vh, 30px); }
.lx-brand h2 { font-size: clamp(24px, 4.8vh, 46px); margin-top: 0; max-width: 600px; }
.lx-brand p { display: none; }
.lx-points { gap: .6vh; margin-top: 0; } .lx-points li { padding: .7vh 10px; font-size: clamp(13px, 1.9vh, 15.5px); } .lx-points span { width: clamp(26px, 3.6vh, 32px); height: clamp(26px, 3.6vh, 32px); font-size: 15px; }
.lx-news { padding: 8px 12px; } .lx-news b { font-size: clamp(12.5px, 1.8vh, 14px); }
.lx-status { gap: 6px; flex-wrap: nowrap; } .lx-st { padding: 3px 10px; font-size: 12px; white-space: nowrap; } .lx-st b { font-size: 13px; }
.lx-road { height: 12vh; min-height: 78px; } .lx-v { bottom: 4px; }
.lx-bike { width: clamp(84px, 13vh, 120px); } .lx-auto { width: clamp(90px, 14vh, 130px); } .lx-car { width: clamp(110px, 17vh, 160px); }
/* right column also scales */
.lx-card-form { padding: 2.4vh 24px 2.2vh; } #login-form { gap: 1.3vh; } .lx-fl input { height: clamp(46px, 6.4vh, 56px); } .lx-submit { height: clamp(42px, 5.8vh, 52px); }
.lx-help li { padding: .7vh 9px; } .lx-partner-row > * { height: clamp(58px, 8.4vh, 80px); } .lx-partner-row img { height: clamp(44px, 6.6vh, 64px); } .lx-partner-row .partner-logo { width: clamp(90px, 13vh, 124px); height: clamp(58px, 8.4vh, 80px); }
.lx-col { gap: 1.3vh; }
/* status chips were hidden by the "hide the intro paragraph" rule */
.lx-brand p { display: none; } .lx-brand p.lx-status { display: flex; }
/* partner logos: equal tiles, full logos (including the LapupTech tagline), neat title with side lines */
.lx-partner { gap: 8px; margin-top: 2px; }
.lx-partner::before { display: flex; align-items: center; gap: 10px; width: 100%; justify-content: center; color: #c9d5ff; font-size: 11px; letter-spacing: 1.2px; }
.lx-partner::after { content: ""; display: none; }
.lx-partner-row { gap: 14px; }
.lx-partner-row > * { display: grid; place-items: center; width: clamp(132px, 9.6vw, 172px); height: clamp(60px, 8.6vh, 82px); padding: 6px 10px; border: 1px solid rgba(255,255,255,.85); border-radius: 16px; background: #fff; box-shadow: 0 10px 26px rgba(0,0,30,.4), 0 0 0 4px rgba(255,255,255,.08); }
.lx-partner-row img { width: auto; height: auto; max-width: 92%; max-height: 88%; object-fit: contain; }
.lx-partner-row .partner-logo { padding: 0; background: #fff url("assets/lapuptech.jpg") 50% 49% / 215% auto no-repeat; }
.lx-partner-row > *:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 16px 32px rgba(0,0,30,.5), 0 0 0 4px rgba(255,194,61,.35); }
/* about text + module chips on the left */
.lx-brand p.lx-about { display: none; max-width: 520px; margin: 0; color: #d6e0ff; font-size: clamp(13px, 1.9vh, 15.5px); line-height: 1.55; }
@media (min-height: 780px) { .lx-brand p.lx-about { display: block; } }
.lx-mods { display: flex; flex-wrap: wrap; gap: 6px; max-width: 520px; margin: 0; padding: 0; list-style: none; }
.lx-mods li { padding: 3px 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 99px; background: rgba(255,255,255,.08); color: #e3ebff; font-size: clamp(11.5px, 1.6vh, 13px); font-weight: 600; animation: lx-left .6s cubic-bezier(.2,.9,.3,1) both; }
.lx-mods li:nth-child(odd) { border-color: rgba(255,194,61,.4); color: #fff2c8; }
.lx-mods li:nth-child(1) { animation-delay: .9s; } .lx-mods li:nth-child(2) { animation-delay: .95s; } .lx-mods li:nth-child(3) { animation-delay: 1s; } .lx-mods li:nth-child(4) { animation-delay: 1.05s; } .lx-mods li:nth-child(5) { animation-delay: 1.1s; } .lx-mods li:nth-child(6) { animation-delay: 1.15s; } .lx-mods li:nth-child(7) { animation-delay: 1.2s; } .lx-mods li:nth-child(8) { animation-delay: 1.25s; } .lx-mods li:nth-child(9) { animation-delay: 1.3s; } .lx-mods li:nth-child(10) { animation-delay: 1.35s; }
@media (max-height: 720px) { .lx-mods { display: none; } }

/* partner logos: one big white banner, full logos side by side */
.lx-banner { display: grid; gap: 6px; padding: 10px 16px 12px; border-radius: 20px; background: #fff; box-shadow: 0 14px 34px rgba(0,0,30,.45), 0 0 0 4px rgba(255,255,255,.1); animation: lx-up .6s .8s cubic-bezier(.2,.9,.3,1) both; }
.lx-banner-title { margin: 0; text-align: center; color: #5b6478; font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; }
.lx-banner-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.lx-banner-row img { justify-self: center; width: auto; max-width: 100%; height: clamp(48px, 8vh, 72px); object-fit: contain; }
.lx-banner-row .lx-div { width: 1px; height: clamp(44px, 7.4vh, 66px); background: linear-gradient(180deg, transparent, #cfd5e6, transparent); }
.lx-banner-row .partner-logo { justify-self: center; width: clamp(120px, 9vw, 150px); height: clamp(56px, 8.6vh, 82px); padding: 0; background: #fff url("assets/lapuptech.jpg") 50% 49% / 215% auto no-repeat; }
.lx-banner:hover { transform: translateY(-2px); } .lx-banner { transition: transform .2s; }
.lx-banner-row .partner-logo { width: clamp(108px, 8.4vw, 138px); height: auto; aspect-ratio: 1.5 / 1; background: #fff url("assets/lapuptech.jpg") 50% 49% / 190% auto no-repeat; background-blend-mode: multiply; }
.lx-banner-row img { mix-blend-mode: multiply; height: clamp(46px, 7.4vh, 66px); }
/* one combined card on the left: what's new, status and support contacts */
.lx-info { display: grid; gap: 10px; max-width: 540px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 18px; background: rgba(255,255,255,.1); backdrop-filter: blur(10px); box-shadow: 0 14px 34px rgba(0,0,30,.3); }
.lx-info .lx-news { max-width: none; padding: 0; border: 0; background: none; backdrop-filter: none; }
.lx-info .lx-status { margin: 0; }
.lx-info .lx-help { margin: 0; padding: 10px 0 0; border: 0; border-top: 1px solid rgba(255,255,255,.18); border-radius: 0; background: none; backdrop-filter: none; }
.lx-brand .lx-help p { display: block; margin: 0 0 8px; color: #c9d5ff; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.lx-info .lx-help ul { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lx-info .lx-help li { grid-template-columns: 1fr auto; padding: 7px 9px; gap: 3px 4px; }
.lx-info .lx-help li b { grid-column: 1 / -1; font-size: 13px; } .lx-info .lx-help a.lx-call { font-size: 12.5px; }
.lx-info .lx-wa { padding: 0; width: 26px; height: 26px; justify-content: center; font-size: 0; gap: 0; } .lx-info .lx-wa svg { width: 15px; height: 15px; }
@media (max-width: 1250px) { .lx-info .lx-help ul { grid-template-columns: 1fr 1fr; } }
@media (max-height: 800px) { .lx-mods { display: none; } }
@media (max-height: 700px) { .lx-brand .lx-help p { display: none; } }
@media (max-width: 900px) { .lx-info { display: none; } }
/* partner logos live inside the white sign-in card */
.lx-card-form .lx-banner { margin-top: 1.6vh; padding: 1.4vh 0 0; border-top: 1px solid #e6e9f0; border-radius: 0; background: none; box-shadow: none; animation: lx-up .6s .7s cubic-bezier(.2,.9,.3,1) both; }
.lx-card-form .lx-banner:hover { transform: none; }
.lx-card-form .lx-banner-title { font-size: 10px; }
.lx-mods { display: none !important; }
/* ===== MotorHub lockup + product feature cards ===== */
.lx-logo { display: flex; align-items: center; gap: 14px; animation: lx-left .7s .1s cubic-bezier(.2,.9,.3,1) both; }
.lx-emblem { flex: none; width: clamp(40px, 6.4vh, 54px); height: clamp(40px, 6.4vh, 54px); filter: drop-shadow(0 6px 16px rgba(255,170,40,.5)); animation: lx-glow 3s ease-in-out infinite; } @keyframes lx-glow { 50% { filter: drop-shadow(0 6px 22px rgba(255,200,80,.85)); transform: rotate(-3deg); } }
.lx-logo .lx-mark { display: block; font-size: clamp(28px, 5vh, 42px); line-height: 1; letter-spacing: -1px; animation: none; }
.lx-logo .lx-mark i { background: linear-gradient(90deg, #ffd45a, #ff9a3c, #ffd45a); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lx-glint 3.4s linear infinite; }
.lx-logo small { display: block; margin-top: 4px; color: #bcd0ff; font-size: clamp(10px, 1.5vh, 12px); font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; }
.lx-feats { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 560px; margin: 0; padding: 0; }
.lx-feats li { display: flex; align-items: center; gap: 10px; padding: clamp(6px, 1vh, 10px) 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(255,255,255,.08); backdrop-filter: blur(6px); animation: lx-left .6s cubic-bezier(.2,.9,.3,1) both; transition: background .35s, border-color .35s, transform .35s; }
.lx-feats li:nth-child(1) { animation-delay: .45s; } .lx-feats li:nth-child(2) { animation-delay: .52s; } .lx-feats li:nth-child(3) { animation-delay: .59s; } .lx-feats li:nth-child(4) { animation-delay: .66s; } .lx-feats li:nth-child(5) { animation-delay: .73s; } .lx-feats li:nth-child(6) { animation-delay: .8s; }
.lx-feats li.on { background: rgba(255,194,61,.16); border-color: rgba(255,194,61,.6); transform: translateY(-2px); }
.lx-feats span { flex: none; display: grid; place-items: center; width: clamp(30px, 4.6vh, 38px); height: clamp(30px, 4.6vh, 38px); border-radius: 11px; background: rgba(255,255,255,.12); font-size: clamp(15px, 2.2vh, 19px); }
.lx-feats b { display: block; color: #fff; font-size: clamp(12.5px, 1.85vh, 14.5px); } .lx-feats small { display: block; margin-top: 1px; color: #c5d3fb; font-size: clamp(10.5px, 1.5vh, 12px); line-height: 1.3; }
@media (max-height: 790px) { .lx-feats small { display: none; } }
/* support numbers on one line */
.lx-info .lx-help ul { grid-template-columns: repeat(4, 1fr); } .lx-info .lx-help li { grid-template-columns: 1fr auto; align-items: center; gap: 2px 4px; padding: 7px 9px; }
.lx-info .lx-help li b { grid-column: 1; grid-row: 1; } .lx-info .lx-wa { grid-column: 2; grid-row: 1; } .lx-info .lx-help a.lx-call { grid-column: 1 / -1; grid-row: 2; white-space: nowrap; font-size: 12.5px; }
@media (max-width: 1250px) { .lx-info .lx-help ul { grid-template-columns: 1fr 1fr; } }
/* the road runs the full width of the screen */
.lx-road { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; z-index: 0; pointer-events: none; }
.lx-line { left: 0; right: 0; }
.lx-brand, .lx-form { z-index: 1; }
.lx-brand-in { justify-content: safe center; padding-top: 3.5vh; }
@media (min-height: 780px) { .lx-brand p.lx-about { display: none; } }
@media (min-height: 1000px) { .lx-brand p.lx-about { display: block; } }
/* no zoom when the page loads */
.login-screen { animation: none !important; }
/* ===== Login: sharp logos, one-line news, headlights, festival banner, tilt + glow ===== */
.lx-banner-row { grid-template-columns: 1.5fr auto 1fr; }
.lx-banner-row img.lx-pl { mix-blend-mode: normal; justify-self: center; image-rendering: auto; }
.lx-banner-row img.lx-pl-seyon { width: min(100%, 210px); height: auto; max-height: clamp(44px, 7.6vh, 60px); object-fit: contain; }
.lx-banner-row img.lx-pl-lapup { width: auto; height: clamp(54px, 9vh, 82px); }
.lx-news { min-width: 0; } .lx-news b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* headlights at night */
.lx-v { overflow: visible; }
.lx-beam { animation: lx-flick 3.4s ease-in-out infinite; mix-blend-mode: screen; } .lx-pool { mix-blend-mode: screen; }
@keyframes lx-flick { 0%, 100% { opacity: .85; } 50% { opacity: 1; } 72% { opacity: .78; } }
/* festival greeting */
.lx-fest { position: absolute; top: 14px; left: 50%; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 7px 18px 7px 12px; border-radius: 99px; background: linear-gradient(90deg, #ffd45a, #ff9a3c, #ffd45a); background-size: 200% auto; color: #3a1d00; box-shadow: 0 10px 28px rgba(255,170,40,.45), 0 0 0 4px rgba(255,255,255,.12); transform: translateX(-50%); animation: lx-drop .7s cubic-bezier(.2,1.2,.3,1) both, lx-glint 4s linear infinite; }
.lx-fest span { font-size: 20px; animation: lx-wiggle 2.4s ease-in-out infinite; } .lx-fest b { font: 800 14.5px Manrope, sans-serif; letter-spacing: .2px; white-space: nowrap; }
@keyframes lx-drop { from { opacity: 0; transform: translate(-50%, -30px) scale(.9); } to { opacity: 1; transform: translateX(-50%); } } @keyframes lx-wiggle { 50% { transform: rotate(14deg) scale(1.15); } }
@media (max-width: 900px) { .lx-fest { top: 8px; max-width: calc(100vw - 24px); } .lx-fest b { font-size: 13px; white-space: normal; } }
/* card tilt and warm glow that follow the mouse */
.lx-col { position: relative; perspective: 1000px; }
.lx-card-form { position: relative; z-index: 1; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .14s ease-out; will-change: transform; }
.lx-glow { position: absolute; left: -14%; right: -14%; top: 2%; height: 66%; z-index: 0; border-radius: 40px; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255,138,31,.62), rgba(255,138,31,0) 62%); filter: blur(28px); opacity: .32; transition: opacity .35s; pointer-events: none; }
.lx-col.lx-hot .lx-glow { opacity: .85; }
@media (prefers-reduced-motion: reduce) { .lx-card-form { transform: none; } .lx-beam, .lx-fest, .lx-fest span { animation: none; } }
.lx-recent { display: none !important; }
/* festival wishes (platform owner) */
.fe-now { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px dashed #d8c3b6; border-radius: 16px; background: #fffaf5; color: #6b5a52; } .fe-now.on { border: 0; color: #3a1d00; background: linear-gradient(90deg, #ffe08a, #ffb55c); box-shadow: 0 10px 24px rgba(255,170,40,.3); }
.fe-now > span { font-size: 30px; } .fe-now small { display: block; font-size: 12px; opacity: .75; } .fe-now b { font: 800 17px Manrope, sans-serif; }
.fe-built { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; } .fe-built li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #ecd9ce; border-radius: 12px; background: #fff; } .fe-built span { font-size: 18px; } .fe-built small { margin-left: auto; color: #7a665e; }
.row-muted { opacity: .55; }

/* tilt removed */
.lx-card-form { transform: none !important; transition: none !important; } .lx-col { perspective: none; } .lx-glow { display: none; }
/* wish from MotorHub on the dashboard */
.dash-wish { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 10px 14px 10px 16px; border-radius: 14px; background: linear-gradient(90deg, #ffe08a, #ffb55c); color: #3a1d00; box-shadow: 0 8px 22px rgba(255,170,40,.28); animation: lx-up .5s ease both; }
.dash-wish span { font-size: 22px; } .dash-wish b { flex: 1; font: 800 15.5px Manrope, sans-serif; } .dash-wish button { border: 0; background: rgba(255,255,255,.45); width: 26px; height: 26px; border-radius: 50%; font-size: 17px; line-height: 1; color: #3a1d00; cursor: pointer; } .dash-wish button:hover { background: rgba(255,255,255,.8); }
.fe-btns { display: flex; gap: 8px; flex-wrap: wrap; } .fe-built li b { font-size: 13.5px; }
/* ===== Login: fill the space — wider content on big screens + a night skyline ===== */
.lx-city { position: absolute; left: 0; bottom: 8px; width: 100%; height: clamp(70px, 14vh, 150px); opacity: .9; pointer-events: none; }
.lx-win { fill: #ffd98a; opacity: .75; } .lx-tw { animation: lx-twinkle 4s ease-in-out infinite; } @keyframes lx-twinkle { 0%, 100% { opacity: .2; } 50% { opacity: .95; } }
.lx-beacon { animation: lx-beacon 1.6s ease-in-out infinite; } @keyframes lx-beacon { 50% { opacity: .15; } }
.lx-road { height: clamp(110px, 20vh, 190px); background: linear-gradient(180deg, rgba(8,8,40,0), rgba(8,8,40,.55) 55%, rgba(8,8,40,.9)); }
.lx-bike { width: clamp(100px, 15vh, 150px); } .lx-auto { width: clamp(108px, 16vh, 160px); } .lx-car { width: clamp(130px, 19vh, 190px); }
@media (min-width: 1500px) {
  .lx-brand-in { padding-left: clamp(40px, 4vw, 90px); padding-right: 2vw; }
  .lx-brand h2 { max-width: 820px; font-size: clamp(30px, 5.4vh, 56px); }
  .lx-feats { max-width: 860px; grid-template-columns: 1fr 1fr 1fr; } .lx-feats small { font-size: clamp(11px, 1.6vh, 13px); }
  .lx-info { max-width: 860px; } .lx-info .lx-help ul { grid-template-columns: repeat(4, 1fr); }
  .lx-brand p.lx-about { display: block; max-width: 760px; font-size: clamp(14px, 2vh, 17px); }
  .lx-news b { font-size: 15px; }
}
@media (min-width: 1500px) and (max-height: 820px) { .lx-brand p.lx-about { display: none; } }
/* Indian-language scripts are taller: keep the sign-in screen inside one screen */
html:not([lang="en-IN"]) .lx-brand h2 { font-size: clamp(20px, 3.5vh, 34px); line-height: 1.28; letter-spacing: 0; }
html:not([lang="en-IN"]) .lx-feats b { font-size: clamp(12px, 1.7vh, 14px); line-height: 1.25; } html:not([lang="en-IN"]) .lx-feats small { font-size: clamp(10px, 1.4vh, 11.5px); line-height: 1.3; }
html:not([lang="en-IN"]) .lx-check, html:not([lang="en-IN"]) .lx-forgot { white-space: nowrap; font-size: 12.5px; }
html:not([lang="en-IN"]) .lx-news b { font-size: clamp(12px, 1.7vh, 13.5px); } html:not([lang="en-IN"]) .lx-info { gap: 8px; padding: 10px 12px; }
html:not([lang="en-IN"]) .lx-brand-in { gap: 1.6vh; }
.lx-card-form, #login-form { min-width: 0; } .lx-row { flex-wrap: wrap; gap: 4px 10px; } html:not([lang="en-IN"]) .lx-forgot { white-space: normal; text-align: right; }
/* Next Service */
.ns-table td { vertical-align: middle; } .ns-table .cell-stack small { color: #7a665e; font-size: 12.5px; } .ns-table .ns-late { color: #c9362e; font-weight: 700; } .ns-table .ns-today { color: #b3541a; font-weight: 800; }
.ns-pill { display: inline-block; width: max-content; padding: 3px 11px; border-radius: 99px; font-size: 12px; font-weight: 800; } .ns-pill.ns-late { color: #b3261e; background: #fde6e3; } .ns-pill.ns-soon { color: #6a3fc9; background: #efe8fd; } .ns-pill.ns-later { color: #1d4ed8; background: #e4edff; }
.ns-acts { white-space: nowrap; } .ns-btn { margin-right: 6px; padding: 6px 12px; border: 1px solid #e2d3c9; border-radius: 9px; background: #fff; color: #3d2a22; font: 700 12.5px "DM Sans", sans-serif; cursor: pointer; } .ns-btn:hover { background: #fdf3eb; } .ns-btn[disabled] { opacity: .45; cursor: not-allowed; }
.ns-wa { color: #0b6b3a; border-color: #bfe6cf; background: #eaf8f0; } .ns-wa:hover { background: #d9f3e5; } .ns-book { color: #fff; border-color: #e8501a; background: #e8501a; } .ns-book:hover { background: #d94a14; }

.si-frozen { display: grid; gap: 2px; margin: 0 0 10px; padding: 10px 14px; border: 1px solid #f3c6c2; border-left: 5px solid #d6403a; border-radius: 12px; background: #fff1ef; color: #7a1c15; } .si-frozen b { font-size: 15px; } .si-frozen span { font-size: 13px; }
.status.cancelled { color: #c15a5c; background: #fff0ef; }
.si-easy [hidden] { display: none !important; } .si-easy > form > .si-frozen { margin: 10px 16px 0; }

/* ===== Platform owner: overview ===== */
.po-hero { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 18px; color: #fff; background: radial-gradient(120% 140% at 0% 0%, #2f6bff, #14187a 55%, #0a0d3a); box-shadow: 0 16px 36px rgba(20,30,120,.28); } .po-hero h2 { margin: 0; font: 800 21px Manrope, sans-serif; } .po-hero p { margin: 3px 0 0; color: #cfdcff; font-size: 13.5px; } .po-hero .button { margin-left: auto; flex: none; }
.po-pulse { flex: none; width: 16px; height: 16px; border-radius: 50%; background: #3fe27e; box-shadow: 0 0 0 0 rgba(63,226,126,.6); animation: lx-ping 2s infinite; }
.po-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 14px 0; }
.po-tile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #ecd9ce; border-left: 5px solid var(--c); border-radius: 14px; background: #fff; } .po-tile small { display: block; color: #7a665e; font-size: 12.5px; font-weight: 700; } .po-tile strong { display: block; font: 800 26px Manrope, sans-serif; line-height: 1.15; color: #2b1a14; } .po-tile em { display: block; margin-top: 1px; font-style: normal; font-size: 12px; color: #8a766e; }
.po-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-size: 20px; background: color-mix(in srgb, var(--c) 14%, #fff); }
.po-blue { --c: #2b6cff; } .po-violet { --c: #7a4de0; } .po-green { --c: #14935f; } .po-orange { --c: #e07a12; } .po-teal { --c: #0b8f9c; } .po-red { --c: #d6403a; } .po-grey { --c: #8a8f9c; }
.po-plans { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.po-plan { display: inline-block; padding: 1px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 800; text-transform: capitalize; background: #eee; color: #555; } .po-plan-silver { background: #eceef3; color: #4b5568; } .po-plan-gold { background: #fff0c9; color: #8a5a00; } .po-plan-premium { background: #efe8fd; color: #5b2fc2; }
.po-grid2 { display: grid; grid-template-columns: 1.7fr 1fr; gap: 14px; } @media (max-width: 900px) { .po-grid2 { grid-template-columns: 1fr; } }
.po-chart { width: 100%; height: auto; } .po-grid { stroke: #efe3da; stroke-dasharray: 4 4; } .po-axis, .po-day, .po-val { font: 600 11px "DM Sans", sans-serif; fill: #8a766e; } .po-day { text-anchor: middle; } .po-val { text-anchor: middle; fill: #2b1a14; font-weight: 800; }
.po-bar { fill: #5b7bff; transform-box: fill-box; transform-origin: bottom; animation: po-grow .6s ease-out both; } @keyframes po-grow { from { transform: scaleY(0); } }
.po-line { fill: none; stroke: #f08a14; stroke-width: 2.6; stroke-linejoin: round; } .po-dot { fill: #fff; stroke: #f08a14; stroke-width: 2.2; }
.po-key { display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 8px; border-radius: 3px; background: #5b7bff; vertical-align: -1px; } .po-key.line { background: #f08a14; border-radius: 50%; }
.po-hours { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding: 4px 2px; } .po-hours i { flex: 1; border-radius: 4px 4px 0 0; background: #cdd8ff; } .po-hours i.peak { background: #2b6cff; }
.po-hours-lab { display: flex; justify-content: space-between; color: #8a766e; font-size: 11.5px; } .po-note { margin: 8px 0 0; color: #5d4a42; font-size: 13.5px; }
.po-table td { vertical-align: middle; } .po-live { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 99px; background: #e2f6ea; color: #0b6b3a; font-weight: 800; font-size: 12.5px; } .po-live i { width: 8px; height: 8px; border-radius: 50%; background: #1faa59; animation: lx-ping 2s infinite; } .po-who { display: block; margin-top: 2px; color: #7a665e; } .po-off { color: #b8aaa3; } .po-susp { color: #c9362e; }
.po-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .po-feed li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; background: #faf6f2; } .po-feed li.bad { background: #fff1ef; }
.po-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 800; font-size: 13px; color: #fff; background: #1faa59; } .po-feed li.bad .po-mark { background: #d6403a; } .po-feed b { display: block; } .po-feed small { color: #7a665e; font-size: 12.5px; } .po-r { text-align: right; } .po-r span { display: block; font-weight: 700; font-size: 13px; }
/* ===== Festival wishes: cards ===== */
.fe-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.fe-card { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid #ecd9ce; border-top: 4px solid #f0a020; border-radius: 16px; background: #fff; } .fe-card.off { border-top-color: #c9c2bd; background: #faf8f6; }
.fe-top { display: flex; align-items: center; gap: 12px; } .fe-top > div { flex: 1; min-width: 0; } .fe-top h3 { margin: 0; font-size: 16px; } .fe-top small { color: #7a665e; }
.fe-emoji { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; font-size: 26px; background: #fff3dc; }
.fe-state { padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 800; color: #6b6b6b; background: #eee; } .fe-state.on { color: #0b6b3a; background: #dff4e7; }
.fe-msg { margin: 0; padding: 9px 12px; border-radius: 10px; background: linear-gradient(90deg, #fff1cf, #ffe2b8); color: #3a1d00; font-weight: 700; font-size: 14px; line-height: 1.35; } .fe-card.off .fe-msg { background: #f0ebe6; color: #6b5a52; }
.fe-chips { display: flex; flex-wrap: wrap; gap: 6px; } .fe-chips span { padding: 3px 10px; border-radius: 99px; background: #f6efe9; color: #5d4a42; font-size: 12px; font-weight: 600; }
.fe-acts { display: flex; flex-wrap: wrap; gap: 6px; } .fe-del { color: #b3261e; }
.fe-btns { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 700px) { .po-hero { flex-wrap: wrap; } .po-hero .button { margin-left: 0; } .po-feed li { grid-template-columns: auto 1fr; } .po-r { grid-column: 2; text-align: left; } }
.fe-cards, .fe-built { padding: 0 14px 14px; } .fe-btns { justify-content: flex-end; }

/* Platform owner sidebar */
.brand .pf-logo { display: flex; align-items: center; gap: 12px; padding: 4px 6px; } .pf-emblem { flex: none; width: 44px; height: 44px; filter: drop-shadow(0 6px 14px rgba(255,170,40,.4)); }
.pf-name { display: grid; gap: 3px; } .pf-word { font: 800 25px Manrope, sans-serif; letter-spacing: -.5px; line-height: 1; } .pf-word b { color: #fff; } .pf-word i { font-style: normal; color: #ffc23d; }
.pf-name small { color: #c9b5ab; font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; }
.nav-icon svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-platform="1"] .profile-copy strong, .sidebar-user .profile-copy strong { white-space: normal; line-height: 1.2; }
#sidebar .brand:has(.pf-logo) { background: none !important; box-shadow: none !important; border: 0 !important; padding: 8px 6px 14px !important; }

.po-feed { padding: 0 14px 14px; } .po-x { font-style: normal; margin-left: 4px; padding: 1px 8px; border-radius: 99px; background: #e8eefc; color: #2b4fb3; font-size: 11.5px; font-weight: 800; } .po-tabs { margin: 0; } .po-tabs .chip-btn { margin: 0 0 0 6px; }
/* backup health check */
.bk-health { margin-top: 14px; } .bk-verdict { padding: 5px 14px; border-radius: 99px; font-weight: 800; font-size: 13px; } .bk-verdict.ok { color: #0b6b3a; background: #dff4e7; } .bk-verdict.bad { color: #8a5a00; background: #fff0cf; }
.bk-checks { list-style: none; margin: 0; padding: 0 14px 14px; display: grid; gap: 6px; } .bk-checks li { display: flex; align-items: flex-start; gap: 12px; padding: 9px 12px; border-radius: 12px; background: #f1faf5; } .bk-checks li.warn { background: #fff7e2; } .bk-checks li.bad { background: #fff0ee; }
.bk-checks li > span { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 800; font-size: 13px; color: #fff; background: #1faa59; } .bk-checks li.warn > span { background: #f08a14; } .bk-checks li.bad > span { background: #d6403a; }
.bk-checks b { display: block; font-size: 14px; } .bk-checks small { color: #6b5a52; font-size: 12.5px; }
.bk-hero-btns { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } .bk-hero .bk-hero-btns { margin-left: auto; } .bk-next { margin-top: 2px !important; font-weight: 600; } .bk-next b { color: #0f3d27; }
@media (max-width: 640px) { .bk-hero-btns { margin-left: 0; width: 100%; } .bk-hero-btns .button { flex: 1; text-align: center; } }

/* ===== Platform owner: plans, showrooms, activity, attention ===== */
.pl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.pl-card { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid #ecd9ce; border-top: 5px solid var(--c); border-radius: 16px; background: #fff; } .pl-top { display: flex; align-items: center; justify-content: space-between; } .pl-count { color: #7a665e; font-size: 12.5px; font-weight: 700; } .pl-blurb { margin: 0; color: #5d4a42; font-size: 13.5px; line-height: 1.4; min-height: 38px; }
.pl-limits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .pl-limits div { padding: 8px; border-radius: 10px; background: #faf6f2; text-align: center; } .pl-limits b { display: block; font: 800 18px Manrope, sans-serif; color: var(--c); } .pl-limits small { color: #7a665e; font-size: 11.5px; }
.pl-bar { height: 7px; border-radius: 99px; background: #f1e8e1; overflow: hidden; } .pl-bar i { display: block; height: 100%; border-radius: 99px; background: var(--c); } .pl-gain { color: #7a665e; font-weight: 700; }
.pl-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 0 14px 12px; } .pl-tools .list-chips { margin: 0; }
.pl-matrix { margin: 0 14px; border: 1px solid #ecd9ce; border-radius: 14px; overflow: hidden; }
.pl-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 92px); align-items: center; padding: 9px 14px; border-top: 1px solid #f3e9e2; font-size: 14px; } .pl-head { position: sticky; top: 0; z-index: 2; border-top: 0; background: #f7efe8; font-weight: 800; font-size: 13px; }
.pl-col { text-align: center; } .pl-head .pl-col { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .pl-head i { width: 9px; height: 9px; border-radius: 50%; } .pl-col em { font-style: normal; font-weight: 800; } .pl-col .yes { color: #14935f; } .pl-col .no { color: #cdbfb6; }
.pl-always { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid #f3e9e2; background: #f1faf5; } .pl-always > span { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: #1faa59; font-weight: 800; } .pl-always small { display: block; color: #5d6b62; font-size: 12.5px; }
.pl-gh { display: grid; grid-template-columns: auto auto 1fr auto repeat(3, 92px); align-items: center; gap: 8px; width: 100%; padding: 9px 14px; border: 0; border-top: 1px solid #ecd9ce; background: #fbf4ee; font: inherit; text-align: left; cursor: pointer; } .pl-gh:hover { background: #f6ebe2; } .pl-gh small { color: #7a665e; } .pl-gc { text-align: center; color: #7a665e; font-weight: 700; font-size: 12.5px; } .pl-gi { font-size: 16px; } .pl-chev { color: #b3541a; width: 12px; }
.pl-foot { margin: 12px 14px 4px; color: #7a665e; font-size: 13px; }
@media (max-width: 640px) { .pl-row { grid-template-columns: minmax(0, 1fr) repeat(3, 56px); padding: 9px 10px; font-size: 13px; } .pl-gh { grid-template-columns: auto auto 1fr repeat(3, 56px); } .pl-gh small { display: none; } .pl-matrix { margin: 0 8px; } }
.sr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; padding: 0 14px 14px; }
.sr-card { display: grid; gap: 11px; padding: 14px 16px; border: 1px solid #ecd9ce; border-top: 4px solid #2b6cff; border-radius: 16px; background: #fff; } .sr-card.off { border-top-color: #d6403a; background: #fffaf9; }
.sr-top { display: flex; align-items: center; gap: 12px; } .sr-top > div { flex: 1; min-width: 0; } .sr-top h3 { margin: 0; font-size: 16px; } .sr-top small { color: #7a665e; } .sr-av { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; font-weight: 800; color: #1d4ed8; background: #e4edff; }
.sr-state { padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 800; color: #b3261e; background: #fde6e3; } .sr-state.on { color: #0b6b3a; background: #dff4e7; }
.sr-plan { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sr-note { color: #7a665e; font-size: 12.5px; }
.sr-meters { display: grid; gap: 7px; } .sr-meter > div { display: flex; justify-content: space-between; font-size: 12.5px; } .sr-meter small { color: #7a665e; font-weight: 700; } .sr-meter b.hot { color: #c9362e; } .sr-track { display: block; height: 7px; margin-top: 3px; border-radius: 99px; background: #f1e8e1; overflow: hidden; } .sr-track i { display: block; height: 100%; border-radius: 99px; background: #5b7bff; } .sr-track i.hot { background: #e8501a; }
.sr-facts { display: flex; gap: 14px; color: #5d4a42; font-size: 13px; } .sr-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.pa-feed { padding: 0 14px 14px; } .pa-day { margin: 14px 0 6px; color: #7a665e; font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.pa-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 9px 12px; margin-bottom: 6px; border-radius: 12px; background: #faf6f2; } .pa-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 16px; background: #eee; } .pa-blue { background: #e4edff; } .pa-violet { background: #efe8fd; } .pa-red { background: #fde6e3; } .pa-orange { background: #fff0cf; }
.pa-main b { display: block; font-size: 14px; } .pa-main small { color: #6b5a52; font-size: 12.5px; word-break: break-word; } .pa-r { text-align: right; } .pa-r span { display: block; font-weight: 700; font-size: 13px; } .pa-r small { color: #7a665e; }
.po-attns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; padding: 0 14px 14px; }
.po-attn { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid #ecd9ce; border-left: 5px solid var(--c); border-radius: 12px; background: #fff; font: inherit; text-align: left; cursor: pointer; } .po-attn:hover { background: #fffaf5; } .po-attn > span { font-size: 22px; } .po-attn b { display: block; font-size: 14px; } .po-attn small { color: #6b5a52; font-size: 12.5px; } .po-attn i { font-style: normal; color: #b3541a; font-weight: 800; }
.po-clear { grid-column: 1 / -1; padding: 14px; border-radius: 12px; background: #f1faf5; color: #0b6b3a; font-weight: 700; }
.pp { display: inline-block; padding: 3px 11px; border-radius: 999px; font: 800 12.5px Manrope, sans-serif; white-space: nowrap; background: #eee; color: #555; } .pp-silver { background: #eceef3; color: #4b5568; } .pp-gold { background: #fff0c9; color: #8a5a00; } .pp-premium { background: #efe8fd; color: #5b2fc2; }
/* audit log */
.au-blue { background: #e4edff; } .au-green { background: #e0f5ec; } .au-orange { background: #fff0cf; } .au-red { background: #fde6e3; } .au-violet { background: #efe8fd; }
.au-who { color: #2b1a14; } .pa-main b { font-weight: 700; line-height: 1.35; } .pa-main b .au-who { font-weight: 800; }

.bk-mail { margin-top: 14px; } .bk-mail-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px; } .bk-mail-row .form-control { flex: 1 1 260px; min-width: 0; } .bk-mail-note { margin: 10px 14px 14px; color: #5d4a42; font-size: 13.5px; }

.bk-time { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #5d4a42; } .bk-time .form-control { width: 130px; }

/* report a problem: WhatsApp Business + two e-mail addresses */
.lx-report { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.18); display: grid; gap: 6px; }
.lx-brand .lx-help .lx-report p { margin: 0 0 2px; }
.lx-rp { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; background: rgba(255,255,255,.1); color: #fff; text-decoration: none; min-width: 0; transition: background .15s; } .lx-rp:hover { background: rgba(255,255,255,.2); }
.lx-rp > i, .lx-rp > svg { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.14); font-style: normal; font-size: 14px; }
.lx-rp-wa > svg { padding: 6px; fill: #05381a; background: #25d366; }
.lx-rp span { display: grid; min-width: 0; } .lx-rp b { font-size: 13px; } .lx-rp small { color: #ffc23d; font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1500px) { .lx-report { grid-template-columns: repeat(3, 1fr); } .lx-report p { grid-column: 1 / -1; } }
@media (max-height: 800px) { .lx-report { grid-template-columns: repeat(3, 1fr); } .lx-report p { grid-column: 1 / -1; } .lx-rp { padding: 5px 8px; } .lx-rp > i, .lx-rp > svg { width: 24px; height: 24px; } .lx-rp small { font-size: 11.5px; } }
.lx-help .lx-report a.lx-rp { flex-direction: row; align-items: center; background: rgba(255,255,255,.1); color: #fff; padding: 7px 10px; } .lx-help .lx-report a.lx-rp:hover { background: rgba(255,255,255,.2); }
.lx-help .lx-report a.lx-rp b { color: #fff; } .lx-help .lx-report a.lx-rp small { color: #ffc23d; }
.lx-rp small { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.2; }
.lx-rp small { overflow-wrap: normal; word-break: normal; }
.lx-report { grid-template-columns: 1fr 1fr !important; } .lx-report p { display: none !important; } .lx-report .lx-rp:nth-of-type(3) { grid-column: 1 / -1; }
.lx-rp b { font-size: 12.5px; line-height: 1.15; }