/* Katumba Henry Car Rental - shared styles (public website + panels)
   Colours are CSS variables so light and dark mode (Bootstrap data-bs-theme) use one set of rules. */
:root {
  --kh-primary:#0b6e4f; --kh-dark:#14213d; --kh-accent:#f4a300; --kh-font:Inter, system-ui, sans-serif; --kh-radius:14px;
  --kh-bg:#f7f9fb; --kh-surface:#ffffff; --kh-surface-2:#f8fafc; --kh-text:#1f2937; --kh-muted:#6b7280;
  --kh-border:#e5e7eb; --kh-soft:#eef6f2; --kh-shadow:rgba(15,23,42,.07); --kh-nav:#374151;
  color-scheme: light;
}
[data-bs-theme=dark] {
  --kh-bg:#0e131b; --kh-surface:#171e29; --kh-surface-2:#1e2735; --kh-text:#e5e7eb; --kh-muted:#9ca3af;
  --kh-border:#2c3848; --kh-soft:#183328; --kh-shadow:rgba(0,0,0,.35); --kh-nav:#d1d5db;
  color-scheme: dark;
}
body { font-family: var(--kh-font); color:var(--kh-text); background:var(--kh-bg); }
a { color: var(--kh-primary); }
[data-bs-theme=dark] a { color: #6ee7b7; }
.btn-primary, .bg-primary { background-color: var(--kh-primary) !important; border-color: var(--kh-primary) !important; }
.btn-outline-primary { color: var(--kh-primary); border-color: var(--kh-primary); }
.btn-outline-primary:hover { background: var(--kh-primary); border-color: var(--kh-primary); }
[data-bs-theme=dark] .btn-outline-primary { color:#6ee7b7; border-color:#6ee7b7; }
[data-bs-theme=dark] .btn-outline-primary:hover { color:#0e131b; background:#6ee7b7; border-color:#6ee7b7; }
.text-primary { color: var(--kh-primary) !important; }
[data-bs-theme=dark] .text-primary { color:#6ee7b7 !important; }
.btn-accent { background: var(--kh-accent); border-color: var(--kh-accent); color:#1f2937; font-weight:600; }
.btn-accent:hover { filter: brightness(.95); color:#1f2937; }
.bg-dark-kh { background: var(--kh-dark) !important; }
.site-header { box-shadow: 0 1px 0 rgba(0,0,0,.06); background:var(--kh-surface); }
.site-header.header-dark { background: var(--kh-dark); }
.site-header.header-dark .nav-link, .site-header.header-dark .navbar-brand { color:#fff !important; }
.site-header .nav-link { font-weight:500; color:var(--kh-nav); }
.site-header .nav-link:hover, .site-header .nav-link.active { color: var(--kh-primary); }
[data-bs-theme=dark] .site-header .nav-link:hover, [data-bs-theme=dark] .site-header .nav-link.active { color:#6ee7b7; }
.site-header.header-dark .nav-link:hover, .site-header.header-dark .nav-link.active { color: var(--kh-accent) !important; }
.logo-img { max-height: 44px; width:auto; }
.hero { position:relative; color:#fff; background: linear-gradient(120deg, rgba(20,33,61,.92), rgba(11,110,79,.85)); background-size: cover; background-position:center; padding: 90px 0 110px; }
.hero h1 { font-weight:800; letter-spacing:-.02em; }
.hero .lead { color:#e5e7eb; }
.search-card { background:var(--kh-surface); color:var(--kh-text); border-radius: var(--kh-radius); box-shadow: 0 20px 50px rgba(0,0,0,.18); padding: 18px; margin-top:-70px; position:relative; }
.section { padding: 64px 0; }
.section-title { font-weight:800; letter-spacing:-.01em; }
.card-kh { border:0; border-radius: var(--kh-radius); box-shadow: 0 6px 22px var(--kh-shadow); overflow:hidden; background:var(--kh-surface); height:100%; }
.card-kh .card-img-top { height: 200px; object-fit: cover; background:var(--kh-soft); }
.price { font-weight:800; color: var(--kh-primary); font-size:1.15rem; }
[data-bs-theme=dark] .price { color:#6ee7b7; }
.badge-soft { background:var(--kh-soft); color: var(--kh-primary); font-weight:600; }
[data-bs-theme=dark] .badge-soft { color:#6ee7b7; }
.icon-circle { width:56px; height:56px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--kh-soft); color: var(--kh-primary); font-size:1.5rem; }
[data-bs-theme=dark] .icon-circle { color:#6ee7b7; }
.stars { color: #f59e0b; letter-spacing:1px; }
.footer { background: var(--kh-dark); color:#cbd5e1; }
.footer a { color:#e2e8f0; text-decoration:none; }
.footer a:hover { color: var(--kh-accent); }
.footer h6 { color:#fff; font-weight:700; }
.social-btn { width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.1); color:#fff !important; }
.social-btn:hover { background: var(--kh-accent); color:#1f2937 !important; }
.cookie-banner { position: fixed; bottom: 16px; left: 16px; right: 16px; max-width: 760px; z-index: 1050; }
.page-hero { background: var(--kh-dark); color:#fff; padding: 48px 0; }
.content-body h2, .content-body h3 { margin-top: 1.4em; font-weight:700; }
.content-body img { max-width:100%; height:auto; border-radius:10px; }
.prose img { max-width:100%; }
.table-kh thead th { font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--kh-muted); font-weight:600; white-space:nowrap; }
.table-kh td { vertical-align: middle; }
.thumb { width:56px; height:42px; object-fit:cover; border-radius:6px; background:var(--kh-surface-2); }
.gallery-thumb { width:100px; height:72px; object-fit:cover; border-radius:8px; }

/* panel shell */
.panel-shell { min-height:100vh; }
.panel-sidebar { width: 250px; background: var(--kh-dark); color:#cbd5e1; min-height:100vh; position:sticky; top:0; }
.panel-sidebar .brand { color:#fff; font-weight:800; padding:18px 20px; display:block; text-decoration:none; border-bottom: 1px solid rgba(255,255,255,.08); }
.panel-sidebar .group-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:#64748b; padding:16px 20px 6px; }
.panel-sidebar a.nav-item-kh { display:flex; align-items:center; gap:10px; color:#cbd5e1; padding:9px 20px; text-decoration:none; font-size:.94rem; }
.panel-sidebar a.nav-item-kh:hover, .panel-sidebar a.nav-item-kh.active { background: rgba(255,255,255,.07); color:#fff; }
.panel-sidebar a.nav-item-kh.active { box-shadow: inset 3px 0 0 var(--kh-accent); }
.panel-sidebar .badge { font-size:.7rem; }
.panel-main { flex:1; min-width:0; }
.panel-topbar { background:var(--kh-surface); border-bottom:1px solid var(--kh-border); }
.stat-card { border:0; border-radius: var(--kh-radius); box-shadow: 0 4px 16px var(--kh-shadow); background:var(--kh-surface); }
.stat-card .value { font-size:1.6rem; font-weight:800; }
.stat-card .label { color:var(--kh-muted); font-size:.85rem; }
.stat-icon { width:44px; height:44px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; font-size:1.2rem; background:var(--kh-soft); color: var(--kh-primary); }
[data-bs-theme=dark] .stat-icon { color:#6ee7b7; }
.panel-card { border:0; border-radius: var(--kh-radius); box-shadow: 0 4px 16px var(--kh-shadow); background:var(--kh-surface); }
.chat-box { height: 460px; overflow-y:auto; background:var(--kh-surface-2); border-radius: var(--kh-radius); padding:16px; }
.bubble { max-width:75%; padding:8px 12px; border-radius:14px; margin-bottom:10px; white-space:pre-wrap; word-wrap:break-word; }
.bubble.mine { margin-left:auto; background: var(--kh-primary); color:#fff; border-bottom-right-radius:4px; }
.bubble.theirs { background:var(--kh-surface); border:1px solid var(--kh-border); border-bottom-left-radius:4px; color:var(--kh-text); }
.bubble small { display:block; opacity:.75; font-size:.7rem; }
.empty-state { text-align:center; padding:40px 16px; color:var(--kh-muted); }
.empty-state i { font-size:2.5rem; color:var(--kh-border); }
.login-wrap { min-height: 100vh; background: linear-gradient(135deg, var(--kh-dark), var(--kh-primary)); display:flex; align-items:center; }
@media (max-width: 991px) { .panel-sidebar { width:100%; min-height:auto; position:relative; } .panel-shell { flex-direction:column; } }

/* dark mode: Bootstrap utilities that do not follow data-bs-theme on their own */
[data-bs-theme=dark] .bg-white { background-color: var(--kh-surface) !important; }
[data-bs-theme=dark] .bg-light { background-color: var(--kh-surface-2) !important; }
[data-bs-theme=dark] .text-dark:not(.badge) { color: var(--kh-text) !important; }
[data-bs-theme=dark] .text-body-emphasis { color: var(--kh-text) !important; }
[data-bs-theme=dark] .kh-body { background: var(--kh-bg); }
[data-bs-theme=dark] .table-light, [data-bs-theme=dark] .table-light > :not(caption) > * > * { background-color: var(--kh-surface-2); color: var(--kh-text); }
[data-bs-theme=dark] .form-control, [data-bs-theme=dark] .form-select { background-color: var(--kh-surface-2); border-color: var(--kh-border); color: var(--kh-text); }
[data-bs-theme=dark] .form-control::placeholder { color: var(--kh-muted); }
[data-bs-theme=dark] .form-control:disabled, [data-bs-theme=dark] .form-select:disabled { background-color: var(--kh-surface); }
[data-bs-theme=dark] .btn-light { background-color: #2a3442; border-color: #2a3442; color: #e5e7eb; }
[data-bs-theme=dark] .modal-content, [data-bs-theme=dark] .dropdown-menu, [data-bs-theme=dark] .list-group-item { background-color: var(--kh-surface); color: var(--kh-text); border-color: var(--kh-border); }
[data-bs-theme=dark] .dropdown-item { color: var(--kh-text); }
[data-bs-theme=dark] .dropdown-item:hover, [data-bs-theme=dark] .dropdown-item:focus { background-color: var(--kh-surface-2); color: var(--kh-text); }
[data-bs-theme=dark] .alert-success { background-color:#143d2b; color:#c7f9dd; }
[data-bs-theme=dark] .alert-danger { background-color:#4a1d22; color:#ffd5da; }
[data-bs-theme=dark] .alert-warning { background-color:#4a3812; color:#ffe9b0; }
[data-bs-theme=dark] .alert-info { background-color:#16384a; color:#c9ecff; }
/* Trix rich-text editor (admin) */
[data-bs-theme=dark] trix-toolbar .trix-button-group { border-color: var(--kh-border); }
[data-bs-theme=dark] trix-toolbar .trix-button { background-color: var(--kh-surface-2); border-color: var(--kh-border); filter: invert(.85); }
[data-bs-theme=dark] trix-toolbar .trix-button.trix-active { background-color: #2a3442; }
[data-bs-theme=dark] trix-editor { background-color: var(--kh-surface-2); color: var(--kh-text); border-color: var(--kh-border); }
[data-bs-theme=dark] trix-editor pre, [data-bs-theme=dark] trix-editor blockquote { color: var(--kh-muted); }

/* theme toggle (header + panel) */
.kh-theme-toggle { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; }
.header-dark .kh-theme-toggle { color:#fff; border-color: rgba(255,255,255,.4); }

/* right-side column: scroll up / down, WhatsApp, chat assistant (centred vertically) */
.kh-dock { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 1039; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.kh-dock-btn { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; text-decoration: none; background: var(--kh-surface); color: var(--kh-primary); box-shadow: 0 6px 16px rgba(0,0,0,.18); transition: transform .15s ease, opacity .15s ease; }
.kh-dock-btn:hover { transform: scale(1.06); }
.kh-dock-btn:disabled { opacity: .35; cursor: default; transform: none; }
.kh-dock-btn:focus-visible { outline: 3px solid var(--kh-accent); outline-offset: 3px; }
.kh-dock-scroll { width: 40px; height: 40px; font-size: 1rem; }
.kh-dock-wa, .kh-dock-wa:hover, .kh-dock-wa:focus { background: #25d366; color: #fff !important; }
.kh-dock-wa:hover, .kh-dock-wa:focus { background: #1ebe5a; }
.kh-dock-chat { width: 54px; height: 54px; font-size: 1.4rem; background: var(--kh-primary); color: #fff; }
.kh-dock-tip { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap; background: var(--kh-dark); color: #fff; font-size: .8rem; font-weight: 600; padding: 5px 10px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.kh-dock-btn:hover .kh-dock-tip, .kh-dock-btn:focus-visible .kh-dock-tip { opacity: 1; }
[data-bs-theme=dark] .kh-dock-scroll { background: var(--kh-surface-2); color: #6ee7b7; }

/* website chat assistant */
.kh-assistant-panel { position: fixed; right: 76px; top: 50%; transform: translateY(-50%); z-index: 1041; width: min(380px, calc(100vw - 100px)); height: min(560px, calc(100vh - 48px)); display: flex; flex-direction: column; background: var(--kh-surface); color: var(--kh-text); border: 1px solid var(--kh-border); border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.3); overflow: hidden; }
@media (max-width: 575.98px) {
    .kh-assistant-panel { left: 10px; right: 10px; top: auto; bottom: 10px; transform: none; width: auto; height: min(72vh, 620px); }
    .kh-dock { right: 2px; gap: 6px; }
    .kh-dock-btn { width: 34px; height: 34px; font-size: .95rem; }
    .kh-dock-scroll { width: 30px; height: 30px; font-size: .8rem; }
    .kh-dock-chat { width: 40px; height: 40px; font-size: 1.1rem; }
    .kh-chat-open .kh-dock { display: none; }
    .kh-chat-open .cookie-banner { display: none; }
}
.kh-assistant-panel[hidden] { display: none; }
.kh-assistant-head { background: var(--kh-dark); color: #fff; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.kh-assistant-log { flex: 1; overflow-y: auto; padding: 12px; background: var(--kh-surface-2); }
.kh-msg { max-width: 92%; margin-bottom: 10px; padding: 9px 12px; border-radius: 14px; font-size: .92rem; white-space: pre-wrap; word-wrap: break-word; }
.kh-msg.bot { background: var(--kh-surface); border: 1px solid var(--kh-border); border-bottom-left-radius: 4px; color: var(--kh-text); }
.kh-msg.user { margin-left: auto; background: var(--kh-primary); color: #fff; border-bottom-right-radius: 4px; }
.kh-msg.pending { color: var(--kh-muted); font-style: italic; }
.kh-card-mini { display: flex; gap: 10px; background: var(--kh-surface); border: 1px solid var(--kh-border); border-radius: 12px; padding: 8px; margin: 0 0 8px; }
.kh-card-mini img { width: 84px; height: 64px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: var(--kh-soft); }
.kh-card-mini .kh-card-body { min-width: 0; flex: 1; }
.kh-card-mini .kh-card-title { font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.kh-card-mini .kh-card-sub, .kh-card-mini .kh-card-meta { font-size: .78rem; color: var(--kh-muted); }
.kh-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--kh-soft); color: var(--kh-primary); font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1rem; }
[data-bs-theme=dark] .kh-avatar { color: #6ee7b7; }
.kh-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; background: var(--kh-surface); border-top: 1px solid var(--kh-border); }
.kh-chips .btn { font-size: .78rem; }
.kh-assistant-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--kh-border); background: var(--kh-surface); }

/* offline page */
.kh-offline { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; }