/* =====================================================
   Quotation App – Custom Stylesheet
   Theme values below are fallbacks; base.html overrides them
   from Admin → Settings → Appearance (see app/branding.py).
   ===================================================== */

:root {
  --ki-primary:   #1a237e;
  --ki-primary-rgb: 26, 35, 126;
  --ki-secondary: #283593;
  --ki-accent:    #f57f17;
  --ki-light:     #e8eaf6;
  --ki-on-primary:   #ffffff;
  --ki-on-secondary: #ffffff;
  --ki-radius:    .375rem;
  --ki-radius-sm: .25rem;
  --ki-radius-lg: .5rem;
  --ki-card-radius: 10px;
  --ki-btn-radius:    var(--ki-radius);
  --ki-btn-radius-sm: var(--ki-radius-sm);
  --ki-font: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ki-success:   #2e7d32;
  --ki-text:      #212121;
  --ki-muted:     #757575;
  --ki-border:    #e0e0e0;
  --ki-bg:        #f5f6fa;
}

/* ---- Base ---- */
body {
  background-color: var(--ki-bg);
  color: var(--ki-text);
  font-family: var(--ki-font);
  font-size: 0.925rem;
}

/* ---- Navbar (header style: gradient / solid / light) ---- */
.ki-navbar {
  background: linear-gradient(135deg, var(--ki-primary) 0%, var(--ki-secondary) 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  min-height: 54px;
}
.ki-header-solid .ki-navbar { background: var(--ki-primary); }
.ki-header-light .ki-navbar {
  background: #fff;
  border-bottom: 3px solid var(--ki-accent);
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}
.ki-header-light .ki-navbar .navbar-brand { color: var(--ki-primary); }
/* Light-coloured primary on a gradient/solid header → dark text (navbar-light) */
.ki-navbar.navbar-light {
  --bs-navbar-color: color-mix(in srgb, var(--ki-on-primary) 75%, transparent);
  --bs-navbar-hover-color: var(--ki-on-primary);
  --bs-navbar-active-color: var(--ki-on-primary);
  --bs-navbar-brand-color: var(--ki-on-primary);
  --bs-navbar-brand-hover-color: var(--ki-on-primary);
}
.ki-header-light .ki-navbar.navbar-light {
  --bs-navbar-color: #4b5563;
  --bs-navbar-hover-color: var(--ki-primary);
  --bs-navbar-active-color: var(--ki-primary);
  --bs-navbar-brand-color: var(--ki-primary);
  --bs-navbar-brand-hover-color: var(--ki-primary);
}
@media (min-width: 992px) {
  .ki-navbar .nav-link.active { box-shadow: inset 0 -2px 0 var(--ki-accent); }
}
@media (max-width: 991.98px) {
  /* Collapsed menu: active item gets an accent bar on the left; dropdown toggles align with links */
  .ki-navbar .nav-link.active { box-shadow: inset 3px 0 0 var(--ki-accent); padding-left: .6rem; }
  .ki-navbar .navbar-nav .btn-link.nav-link { padding-left: 0; padding-right: 0; }
  .ki-navbar .navbar-nav .btn-link.nav-link.active { padding-left: .6rem; }
}
.ki-navbar .navbar-brand {
  font-size: 1.1rem;
  letter-spacing: 0.3px;
}
.ki-navbar .nav-link { font-size: 0.875rem; }
.ki-navbar .nav-link.active { font-weight: 700; }
/* Dropdown toggle buttons in navbar — match nav-link appearance */
.ki-navbar .btn-link.nav-link {
  color: var(--bs-navbar-color);
  text-decoration: none;
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  box-shadow: none;
}
.ki-navbar .btn-link.nav-link:hover,
.ki-navbar .btn-link.nav-link:focus { color: var(--bs-navbar-hover-color); outline: none; box-shadow: none; }
.ki-navbar .btn-link.nav-link.active { color: var(--bs-navbar-active-color); font-weight: 700; }

/* ---- Brand / Login ---- */
.ki-brand-text { color: var(--ki-primary); }
.ki-navbar-logo { height: 28px; width: auto; vertical-align: middle; }
.ki-login-logo  { max-height: 72px; max-width: 220px; width: auto; }
.ki-login-icon {
  font-size: 3.5rem;
  color: var(--ki-primary);
  line-height: 1;
}
.ki-login-card {
  border-radius: 16px;
  box-shadow: 0 8px 32px color-mix(in srgb, var(--ki-primary) 12%, transparent) !important;
}
.min-vh-85 { min-height: 85vh; }

/* ---- Buttons ---- */
.ki-btn-primary {
  background: linear-gradient(135deg, var(--ki-primary), var(--ki-secondary));
  border: none;
  color: var(--ki-on-primary);
}
.ki-btn-primary:hover {
  background: linear-gradient(135deg, var(--ki-secondary), var(--ki-primary));
  color: var(--ki-on-primary);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ki-primary) 25%, transparent);
}

/* ---- Cards & Headers ---- */
.card { --bs-card-border-radius: var(--ki-card-radius); border-radius: var(--ki-card-radius); }
.ki-card-header {
  background: linear-gradient(135deg, var(--ki-primary), var(--ki-secondary));
  color: var(--ki-on-primary);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.6rem 1rem;
  border-radius: var(--ki-card-radius) var(--ki-card-radius) 0 0 !important;
}
.ki-header-solid .ki-card-header { background: var(--ki-primary); }
.ki-header-light .ki-card-header {
  background: var(--ki-light);
  color: var(--ki-primary);
  border-bottom: 2px solid var(--ki-accent);
}

/* ---- Tables ---- */
.ki-table-head th {
  background: var(--ki-primary);
  color: var(--ki-on-primary);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border: none;
  white-space: nowrap;
}
.ki-header-light .ki-table-head th { background: var(--ki-light); color: var(--ki-primary); }
.table-hover tbody tr:hover { background: color-mix(in srgb, var(--ki-primary) 4%, transparent); }

/* ---- Page Titles ---- */
.ki-page-title { color: var(--ki-primary); font-size: 1.2rem; }

/* ---- Links ---- */
.ki-link { color: var(--ki-primary); }
.ki-link:hover { color: var(--ki-accent); text-decoration: underline !important; }

/* ---- KPI Cards ---- */
.ki-kpi-card {
  border-radius: 12px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.ki-kpi-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important; }
.ki-kpi-icon { font-size: 1.8rem; margin-bottom: 4px; opacity: 0.8; }
.ki-kpi-value { font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.ki-kpi-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.8; }

.ki-kpi-blue   { background: linear-gradient(135deg,#1565c0,#1e88e5); color:#fff; }
.ki-kpi-green  { background: linear-gradient(135deg,#2e7d32,#43a047); color:#fff; }
.ki-kpi-orange { background: linear-gradient(135deg,#e65100,#fb8c00); color:#fff; }
.ki-kpi-purple { background: linear-gradient(135deg,#6a1b9a,#ab47bc); color:#fff; }

/* ---- Wood Type Badges ---- */
.ki-badge-acrylic   { background:#dbeafe; color:#1e40af; font-size:0.75rem; }
.ki-badge-laminates { background:#dcfce7; color:#166534; font-size:0.75rem; }
.ki-badge-veneer    { background:#ffedd5; color:#9a3412; font-size:0.75rem; }
.badge.ki-badge-acrylic, .badge.ki-badge-laminates, .badge.ki-badge-veneer {
  padding: 4px 8px; border-radius: 6px; font-weight: 600;
}

.ki-badge-fitting { background:#f3e8ff; color:#6b21a8; font-size:0.75rem; padding: 4px 8px; border-radius: 6px; font-weight: 600; }

/* ---- Grand Total Row ---- */
.ki-grand-total-row td {
  background: var(--ki-light);
  border-top: 2px solid var(--ki-primary) !important;
}

/* ---- Room Blocks (View page) ---- */
.ki-room-block { border-radius: 8px; overflow: hidden; border: 1px solid var(--ki-border); }
.ki-room-title {
  background: linear-gradient(135deg, var(--ki-secondary), color-mix(in srgb, var(--ki-secondary) 70%, white));
  color: var(--ki-on-secondary);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 8px 14px;
}

/* ---- Project Form – Room Cards ---- */
.room-card {
  border-left: 4px solid var(--ki-secondary) !important;
  border-radius: 8px;
}
.room-card .card-header {
  background: var(--ki-light);
  color: var(--ki-primary);
  font-weight: 600;
  border-bottom: 1px solid var(--ki-border);
}
.item-table th {
  background: #f8f9fa;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ki-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.item-table td { vertical-align: middle; }
.item-table input, .item-table select {
  font-size: 0.875rem;
  padding: 5px 8px;
  height: auto;
}
.item-table .form-control:focus,
.item-table .form-select:focus {
  border-color: var(--ki-secondary);
  box-shadow: 0 0 0 0.15rem rgba(var(--ki-primary-rgb), 0.2);
}
.area-display {
  font-weight: 700;
  color: var(--ki-primary);
  min-width: 70px;
  text-align: center;
}
.btn-remove-item {
  width: 28px; height: 28px;
  padding: 0; font-size: 0.85rem;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---- Live Summary Panel ---- */
.summary-panel { top: 66px; }
.summary-wood-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed var(--ki-border);
  font-size: 0.85rem;
}
.summary-wood-row:last-child { border-bottom: none; }
.summary-wood-label { font-weight: 600; }
.summary-wood-value { color: var(--ki-success); font-weight: 600; }

/* ---- Sticky Save (Mobile) ---- */
.ki-sticky-save {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1040;
  padding: 8px 12px;
  /* push up above iPhone home indicator */
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(4px);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.1);
}


/* ---- Empty State ---- */
.ki-empty-state { padding: 40px 20px; }

/* ---- Page frame & footer ----
   The footer sits in normal flow at the end of the page (pushed to the bottom on
   short pages), so it can never cover content. Only the mobile sticky Save bar on
   the quotation form is fixed, and pages that have it reserve room for it. */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
.ki-footer {
  background: #fff;
  border-top: 1px solid var(--ki-border);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  line-height: 1.5;
}
@media (max-width: 991.98px) {
  body:has(.ki-sticky-save) { padding-bottom: var(--ki-sticky-h, calc(76px + env(safe-area-inset-bottom, 0px))); }
}

/* Long single-line badges (payment details etc.) wrap instead of overflowing on phones */
.ki-wrap-badge { white-space: normal; text-align: left; line-height: 1.5; overflow-wrap: anywhere; }


/* ---- Responsive tweaks ---- */
@media (max-width: 575px) {
  .ki-page-title { font-size: 1rem; }
  .ki-kpi-value { font-size: 1.1rem; }
  .ki-kpi-label { font-size: 0.65rem; }
  .btn-group-sm .btn { padding: 4px 7px; }
}

@media (max-width: 767px) {
  .item-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .summary-panel { position: static; }
}

/* ---- Custom Autocomplete ---- */
/* .ki-ac-wrap is a plain wrapper (no overflow constraints needed now) */
.ki-ac-wrap { display: block; }
/* Dropdown is appended to <body> with inline position:absolute — only visual
   styles are needed here. z-index is set inline (9999). */
.ki-ac-dropdown {
  background: #fff;
  border: 1px solid var(--ki-border);
  border-radius: 6px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  list-style: none;
  margin: 2px 0 0;
  padding: 4px 0;
  /* Prevent iOS long-press callout on the whole dropdown */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /* Larger tap targets feel more native */
  -webkit-tap-highlight-color: transparent;
}
.ki-ac-dropdown li {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.9rem;
  border-bottom: 1px solid #f0f0f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Prevent iOS long-press callout (Paste / Autofill menu) */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /* Removes 300ms tap delay and suppresses long-press behaviour */
  touch-action: manipulation;
}
.ki-ac-dropdown li:last-child { border-bottom: none; }
.ki-ac-dropdown li:hover,
.ki-ac-dropdown li:active { background: var(--ki-light); color: var(--ki-primary); font-weight: 600; }

/* ---- Scrollbar styling (webkit) ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #bdbdbd; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9e9e9e; }

/* ---- Utility ---- */
.fs-7 { font-size: 0.8rem; }
.text-ki { color: var(--ki-primary) !important; }
.bg-ki { background-color: var(--ki-light) !important; }


/* =====================================================
   Bootstrap → theme bridge
   Makes Bootstrap's "primary" colour, links, form controls
   and corner radii follow the admin-selected theme.
   ===================================================== */
:root {
  --bs-primary: var(--ki-primary);
  --bs-primary-rgb: var(--ki-primary-rgb);
  --bs-primary-text-emphasis: color-mix(in srgb, var(--ki-primary) 70%, black);
  --bs-primary-bg-subtle: var(--ki-light);
  --bs-primary-border-subtle: color-mix(in srgb, var(--ki-primary) 30%, white);
  --bs-link-color: var(--ki-primary);
  --bs-link-color-rgb: var(--ki-primary-rgb);
  --bs-link-hover-color: color-mix(in srgb, var(--ki-primary) 80%, black);
  --bs-link-hover-color-rgb: var(--ki-primary-rgb);
  --bs-focus-ring-color: rgba(var(--ki-primary-rgb), .25);
  --bs-border-radius: var(--ki-radius);
  --bs-border-radius-sm: var(--ki-radius-sm);
  --bs-border-radius-lg: var(--ki-radius-lg);
  --bs-border-radius-xl: var(--ki-radius-lg);
  --bs-border-radius-xxl: var(--ki-radius-lg);
}

.btn { --bs-btn-border-radius: var(--ki-btn-radius); }
.btn-sm, .btn-group-sm > .btn { --bs-btn-border-radius: var(--ki-btn-radius-sm); }

.btn-primary {
  --bs-btn-color: var(--ki-on-primary);
  --bs-btn-bg: var(--ki-primary);
  --bs-btn-border-color: var(--ki-primary);
  --bs-btn-hover-color: var(--ki-on-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--ki-primary) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--ki-primary) 85%, black);
  --bs-btn-active-color: var(--ki-on-primary);
  --bs-btn-active-bg: color-mix(in srgb, var(--ki-primary) 75%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--ki-primary) 75%, black);
  --bs-btn-disabled-color: var(--ki-on-primary);
  --bs-btn-disabled-bg: var(--ki-primary);
  --bs-btn-disabled-border-color: var(--ki-primary);
  --bs-btn-focus-shadow-rgb: var(--ki-primary-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--ki-primary);
  --bs-btn-border-color: var(--ki-primary);
  --bs-btn-hover-color: var(--ki-on-primary);
  --bs-btn-hover-bg: var(--ki-primary);
  --bs-btn-hover-border-color: var(--ki-primary);
  --bs-btn-active-color: var(--ki-on-primary);
  --bs-btn-active-bg: var(--ki-primary);
  --bs-btn-active-border-color: var(--ki-primary);
  --bs-btn-disabled-color: var(--ki-primary);
  --bs-btn-disabled-border-color: var(--ki-primary);
  --bs-btn-focus-shadow-rgb: var(--ki-primary-rgb);
}
.badge.bg-primary, .text-bg-primary { color: var(--ki-on-primary) !important; }

.form-control:focus, .form-select:focus {
  border-color: color-mix(in srgb, var(--ki-primary) 50%, white);
  box-shadow: 0 0 0 .25rem rgba(var(--ki-primary-rgb), .2);
}
.form-check-input:checked { background-color: var(--ki-primary); border-color: var(--ki-primary); }
.form-check-input:focus {
  border-color: color-mix(in srgb, var(--ki-primary) 50%, white);
  box-shadow: 0 0 0 .25rem rgba(var(--ki-primary-rgb), .2);
}
.form-range::-webkit-slider-thumb { background-color: var(--ki-primary); }
.form-range::-moz-range-thumb { background-color: var(--ki-primary); }

.pagination {
  --bs-pagination-color: var(--ki-primary);
  --bs-pagination-hover-color: var(--ki-primary);
  --bs-pagination-focus-color: var(--ki-primary);
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--ki-primary-rgb), .25);
  --bs-pagination-active-bg: var(--ki-primary);
  --bs-pagination-active-border-color: var(--ki-primary);
  --bs-pagination-active-color: var(--ki-on-primary);
}
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--ki-primary);
  --bs-nav-pills-link-active-color: var(--ki-on-primary);
}
.nav { --bs-nav-link-color: var(--ki-primary); --bs-nav-link-hover-color: color-mix(in srgb, var(--ki-primary) 80%, black); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--ki-primary); --bs-dropdown-link-active-color: var(--ki-on-primary); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--ki-primary); }

/* ---- Demo mode banner ---- */
.ki-demo-banner {
  background: #fff7d6; color: #5c4400; border-bottom: 1px solid #f1d98a;
  font-size: .82rem; text-align: center; padding: 6px 12px; line-height: 1.4;
}
.ki-demo-banner a { color: #5c4400; }

/* ---- Quotation stages ---- */
.ki-stage-badge { font-weight: 600; font-size: .75rem; padding: .35em .65em; white-space: nowrap; }
.ki-stage-badge-sm { font-size: .7rem; }
.ki-stage-toggle::after { display: none; }   /* the badge itself is the toggle */
.ki-stage-toggle:hover .ki-stage-badge { filter: brightness(.96); box-shadow: 0 0 0 2px rgba(0,0,0,.06); }
.ki-stage-toggle .ki-stage-badge::after {
  content: "\F282"; font-family: bootstrap-icons; font-size: .6rem; margin-left: .35rem; vertical-align: middle;
}
.ki-stage-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dropdown-item.active .ki-stage-dot { box-shadow: 0 0 0 2px #fff; }

/* Stage filter pills on the quotations list */
.ki-stage-filter { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.ki-stage-filter a {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; text-decoration: none;
  font-size: .8rem; font-weight: 600; color: #374151; background: #fff; border: 1px solid var(--ki-border);
  border-radius: 50rem; padding: .3rem .75rem;
}
.ki-stage-filter a:hover { border-color: #c4c4c4; }
.ki-stage-filter a.active { background: var(--ki-primary); border-color: var(--ki-primary); color: var(--ki-on-primary); }
.ki-stage-filter .count { font-weight: 700; opacity: .75; }

/* Stage stepper on the quotation page */
.ki-stepper { display: flex; align-items: flex-start; }
.ki-step { flex: 1; text-align: center; position: relative; font-size: .72rem; font-weight: 600; color: #9ca3af; }
.ki-step::before {
  content: ""; position: absolute; top: 14px; left: -50%; width: 100%; height: 3px; background: #e5e7eb; z-index: 0;
}
.ki-step:first-child::before { display: none; }
.ki-step .ki-step-dot {
  position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; margin: 0 auto 4px;
  display: flex; align-items: center; justify-content: center; background: #e5e7eb; color: #fff; font-size: .85rem;
}
.ki-step.done, .ki-step.current { color: #374151; }
.ki-step.done::before, .ki-step.current::before { background: var(--ki-primary); }
.ki-step.done .ki-step-dot { background: var(--ki-primary); color: var(--ki-on-primary); }
.ki-step.current .ki-step-dot { background: var(--ki-primary); color: var(--ki-on-primary); box-shadow: 0 0 0 4px rgba(var(--ki-primary-rgb), .2); }
.ki-stepper.is-off .ki-step.current .ki-step-dot { background: #9ca3af; box-shadow: none; }

.ki-stage-history { list-style: none; padding: 0; margin: 0; }
.ki-stage-history li { position: relative; padding: 0 0 .75rem 1.25rem; font-size: .8rem; }
.ki-stage-history li::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: -2px; width: 2px; background: #e5e7eb; }
.ki-stage-history li:last-child::before { display: none; }
.ki-stage-history .dot { position: absolute; left: 0; top: 3px; width: 10px; height: 10px; border-radius: 50%; }