/* =====================================================================
   KuvoHost — (1) small theme additions for kh-* widgets, and
   (2) Bootstrap bridge: restyles the stock FOSSBilling module markup
   (cards, forms, tables, tabs, badges, modals, toasts, order flow) so
   pages that were not rebuilt still match the KuvoHost look.
   All values come from tokens.css.
   ===================================================================== */

/* ---------- (1) additions ---------- */
body.kh{background:var(--bg)}
body.kh a:where([class*="kh-"]),body.kh :where([class*="kh-"]) a{text-decoration:none}
body.kh .kh-content :where(p,li,td) > a:not([class]){text-decoration:underline; text-underline-offset:2px}
.kh-big{font:800 26px/1.1 var(--fh); color:var(--heading); letter-spacing:-.03em; margin:2px 0}
.kh-muted{color:var(--muted)}
.kh-label{color:var(--muted)}
.kh-card-head.kh-bare{padding:0 2px 12px; border:0; background:none}
.kh-card-head.kh-bare h2{font-size:16px}
.kh-card-head.kh-bare a{font:600 13px var(--fh); color:var(--accent-text)}
.kh-seg a{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:8px; font:600 12.5px var(--fb); color:var(--muted); text-decoration:none}
.kh-seg a:hover{color:var(--heading)}
.kh-seg a.kh-is-on{background:var(--bg-elev); color:var(--heading); box-shadow:var(--sh-xs)}
.kh-seg a small{font-size:11px; background:var(--danger-bg); color:var(--danger); border-radius:999px; padding:0 6px; line-height:18px}
.kh-toolbar{margin-bottom:16px}
.kh-pager{display:flex; gap:6px; justify-content:center; margin:20px 0 4px}
.kh-pager a{min-width:34px; height:34px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--line); background:var(--bg-elev); color:var(--text); font:600 13px var(--fh); text-decoration:none}
.kh-pager a.kh-is-on{background:var(--purple); border-color:var(--purple); color:#fff}
.kh-empty-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:18px}
.kh-note-ico{width:32px; height:32px; border-radius:9px; display:grid; place-items:center; flex:none}
.kh-note-ico.kh-danger{background:var(--danger-bg); color:var(--danger)}
.kh-note-ico.kh-info{background:var(--info-bg); color:var(--info)}
.kh-note-ico.kh-ok{background:var(--ok-bg); color:var(--ok)}
.kh-pop-item{border:0; background:none; color:inherit; text-decoration:none; cursor:pointer}
.kh-alert-soft{display:flex; align-items:flex-start; gap:12px}
.kh-alert-soft.kh-alert-ok{background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok)}
.kh-alert-soft.kh-alert-warn{background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn)}
.kh-alert-soft.kh-alert-danger{background:var(--danger-bg); border-color:var(--danger-line); color:var(--danger)}
.kh-alert-soft.kh-alert-info{background:var(--info-bg); border-color:var(--info-line); color:var(--info)}
.kh-alert-soft p{color:var(--text)}
.kh-flash{position:fixed; top:76px; right:24px; z-index:60; max-width:420px}
.kh-footer{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-top:40px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:13px}
.kh-footer-links{display:flex; gap:16px}
.kh-footer a{color:var(--muted); text-decoration:none}
.kh-footer a:hover{color:var(--accent-text)}
.kh-kb-search{display:flex; gap:10px; max-width:640px}
.kh-kb-search .kh-input-wrap{flex:1}
.kh-kb-card{text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:8px}
.kh-kb-card small{color:var(--faint); font-size:12px}
.kh-list-row{text-decoration:none; color:inherit}
.kh-ann a{color:inherit; text-decoration:none}
.kh-ann a:hover{color:var(--accent-text)}
.kh-ai-sugs a{display:block; text-decoration:none}
.kh-ai-msg.kh-bot:empty{display:none}
.kh-ai-link{font-weight:600; color:var(--accent-text)!important; text-decoration:none}
.kh-login-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.kh-login-top .kh-logo{height:28px; width:auto}
.kh-login-card-wide{max-width:560px}
.kh-login-legal{text-align:center; color:var(--faint); font-size:12px; margin-top:14px}
.kh-login-foot a{color:var(--accent-text); font-weight:600}
.kh-auth-form .kh-field{margin-bottom:14px}
.kh-split-or{margin-top:22px}
.kh-site-grid{margin-bottom:8px}
.kh-order-currency label{display:flex; align-items:center; gap:8px; margin:0!important; font-size:13px; color:var(--muted)}
.kh-order-currency .form-select{height:36px; padding-top:0; padding-bottom:0}
.kh-error{max-width:640px; margin:40px auto}
.kh-status-pin .kh-chip{box-shadow:var(--sh-xs)}
.kh-stat{text-decoration:none; color:inherit}
.kh-todo{text-decoration:none; color:inherit}
.kh-row-card{text-decoration:none; color:inherit}
@media (max-width:860px){ .kh-hide-sm{display:none!important} .kh-flash{left:12px; right:12px; top:68px} .kh-kb-search{flex-direction:column} }

/* ---------- (2) Bootstrap bridge ---------- */
body.kh{
  --bs-body-font-family:var(--fb); --bs-body-font-size:14.5px; --bs-body-color:var(--text); --bs-body-bg:var(--bg);
  --bs-emphasis-color:var(--heading); --bs-secondary-color:var(--muted); --bs-tertiary-bg:var(--bg-soft); --bs-secondary-bg:var(--bg-soft);
  --bs-primary:#4A1A9E; --bs-primary-rgb:74,26,158; --bs-link-color:var(--purple); --bs-link-color-rgb:74,26,158; --bs-link-hover-color:var(--violet);
  --bs-border-color:var(--line); --bs-border-radius:var(--r-sm); --bs-border-radius-lg:var(--r); --bs-border-radius-sm:8px;
  --bs-heading-color:var(--heading); --bs-success-rgb:21,128,61; --bs-danger-rgb:185,28,28; --bs-warning-rgb:180,83,9; --bs-info-rgb:29,78,216;
  font-family:var(--fb);
}
[data-bs-theme="dark"] body.kh{--bs-link-color:#C9B8FF; --bs-link-hover-color:#E2D9FF; --bs-link-color-rgb:155,107,232; --bs-primary-rgb:155,107,232}
body.kh h1,body.kh h2,body.kh h3,body.kh h4,body.kh h5,body.kh h6,body.kh .h1,body.kh .h2,body.kh .h3,body.kh .h4,body.kh .h5,body.kh .h6{font-family:var(--fh); color:var(--heading); letter-spacing:-.02em}
body.kh .kh-content h1:not(.kh-page-head h1){font-size:24px; font-weight:800}
body.kh .kh-content a:not([class]){color:var(--accent-text)}
.kh-content .breadcrumb{font-size:13px; margin-bottom:14px; --bs-breadcrumb-divider-color:var(--faint); --bs-breadcrumb-item-active-color:var(--muted)}
.kh-content .breadcrumb a{color:var(--muted); text-decoration:none}
/* cards */
.kh-content .card,.kh-login-card .card,.modal-content{background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); color:var(--text)}
.kh-content .card .card{box-shadow:none; border-radius:var(--r)}
.kh-content .card-header{background:transparent; border-bottom:1px solid var(--line); padding:16px 20px; border-radius:var(--r-lg) var(--r-lg) 0 0!important}
.kh-content .card-header h1,.kh-content .card-header .h1{font-size:22px; font-weight:800; margin:0}
.kh-content .card-header h6,.kh-content .card-header .h6{font:700 15px var(--fh); color:var(--heading)}
.kh-content .card-body{padding:20px}
.kh-content .card-footer{background:transparent; border-top:1px solid var(--line)}
/* buttons */
body.kh .btn{font-family:var(--fh); font-weight:600; font-size:13.5px; border-radius:var(--r-sm); padding:.5rem 1rem; letter-spacing:-.01em; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s}
body.kh .btn-sm{font-size:13px; border-radius:8px; padding:.35rem .75rem}
body.kh .btn-lg{font-size:14.5px; border-radius:12px; padding:.7rem 1.25rem}
body.kh .btn-primary,body.kh .btn-success{color:#fff; border:0; background:linear-gradient(180deg,#5A26B8 0%,var(--purple) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(28,13,63,.18),0 6px 14px rgba(74,26,158,.26)}
body.kh .btn-primary:hover,body.kh .btn-success:hover{transform:translateY(-1px); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 18px rgba(74,26,158,.34)}
body.kh .btn-dark,body.kh .btn-secondary,body.kh .btn-outline-primary,body.kh .btn-outline-secondary,body.kh .btn-outline-info,body.kh .btn-light{color:var(--heading); background:var(--bg-elev); border:1px solid var(--line-2); box-shadow:var(--sh-xs)}
body.kh .btn-dark:hover,body.kh .btn-secondary:hover,body.kh .btn-outline-primary:hover,body.kh .btn-outline-secondary:hover,body.kh .btn-outline-info:hover,body.kh .btn-light:hover{background:var(--tint); border-color:#C6B5EC; color:var(--accent-text)}
body.kh .btn-danger,body.kh .btn-outline-danger{color:var(--danger); background:var(--danger-bg); border:1px solid var(--danger-line)}
body.kh .btn-link{color:var(--accent-text); text-decoration:none}
/* forms */
body.kh .form-label{font:600 13px var(--fh); color:var(--heading); margin-bottom:6px}
body.kh .form-control,body.kh .form-select{min-height:42px; border-radius:10px; border:1px solid var(--line-2); background-color:var(--input-bg); color:var(--heading); font-family:var(--fb); font-size:14px; box-shadow:var(--sh-xs)}
body.kh textarea.form-control{min-height:96px}
body.kh .form-control:focus,body.kh .form-select:focus{border-color:#C6B5EC; box-shadow:var(--focus)}
body.kh .form-check-input:checked{background-color:var(--purple); border-color:var(--purple)}
body.kh .form-text,body.kh .form-hint{color:var(--muted); font-size:12.5px}
body.kh .input-group-text{background:var(--bg-soft); border-color:var(--line-2); color:var(--muted)}
/* tables & lists */
.kh-content .table{--bs-table-bg:transparent; --bs-table-striped-bg:var(--bg-soft); --bs-table-hover-bg:var(--bg-soft); --bs-table-border-color:var(--line); color:var(--text); margin-bottom:0}
.kh-content .table-bordered>:not(caption)>*>*{border-width:0 0 1px 0}
.kh-content .table thead th{font:600 11.5px var(--fb); text-transform:uppercase; letter-spacing:.06em; color:var(--faint); border-bottom:1px solid var(--line); background:transparent}
.kh-content .table td,.kh-content .table th{padding:12px 14px; vertical-align:middle}
.kh-content .list-group{--bs-list-group-bg:transparent; --bs-list-group-border-color:var(--line); --bs-list-group-action-hover-bg:var(--bg-soft); --bs-list-group-active-bg:var(--tint); --bs-list-group-active-color:var(--purple); --bs-list-group-active-border-color:var(--line)}
.kh-content dt{font-weight:500}
/* badges → chips */
body.kh .badge{font:600 11.5px var(--fb); border-radius:999px; padding:4px 9px; letter-spacing:0}
body.kh .badge.bg-success,body.kh .text-bg-success{background:var(--ok-bg)!important; color:var(--ok)!important}
body.kh .badge.bg-warning,body.kh .text-bg-warning{background:var(--warn-bg)!important; color:var(--warn)!important}
body.kh .badge.bg-danger,body.kh .text-bg-danger{background:var(--danger-bg)!important; color:var(--danger)!important}
body.kh .badge.bg-info,body.kh .badge.bg-primary,body.kh .text-bg-info{background:var(--info-bg)!important; color:var(--info)!important}
body.kh .badge.bg-secondary,body.kh .text-bg-secondary{background:var(--bg-soft)!important; color:var(--muted)!important}
/* tabs / pills / accordion (order flow) */
.kh-content .nav-tabs{border-bottom:1px solid var(--line); gap:4px}
.kh-content .nav-tabs .nav-link{border:0; border-bottom:2px solid transparent; color:var(--muted); font:600 13.5px var(--fh); padding:10px 14px; background:none}
.kh-content .nav-tabs .nav-link.active{color:var(--accent-text); border-bottom-color:var(--purple)}
.kh-content .nav-pills .nav-link.active{background:var(--tint); color:var(--accent-text)}
.kh-content .accordion{--bs-accordion-bg:var(--bg-elev); --bs-accordion-border-color:var(--line); --bs-accordion-border-radius:var(--r); --bs-accordion-inner-border-radius:var(--r); --bs-accordion-active-bg:var(--tint); --bs-accordion-active-color:var(--purple); --bs-accordion-btn-focus-box-shadow:var(--focus)}
.kh-content .accordion-button{font:700 15px var(--fh); color:var(--heading)}
.kh-content .accordion-item{margin-bottom:10px; border:1px solid var(--line)!important; border-radius:var(--r)!important; overflow:hidden}
.kh-order-body .list-group-item,.kh-order-body .card{border-radius:var(--r)}
.kh-content .pagination{--bs-pagination-color:var(--text); --bs-pagination-bg:var(--bg-elev); --bs-pagination-border-color:var(--line); --bs-pagination-active-bg:var(--purple); --bs-pagination-active-border-color:var(--purple); --bs-pagination-border-radius:10px; gap:6px; justify-content:center}
/* alerts */
body.kh .alert{border-radius:var(--r); border:1px solid var(--line); font-size:14px}
body.kh .alert-info{background:var(--info-bg); border-color:var(--info-line); color:var(--info)}
body.kh .alert-success{background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok)}
body.kh .alert-warning{background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn)}
body.kh .alert-danger{background:var(--danger-bg); border-color:var(--danger-line); color:var(--danger)}
/* toasts (FOSSBilling.message) */
body.kh .toast{background:var(--bg-elev); color:var(--text); border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-lg); font-family:var(--fb); overflow:hidden}
body.kh .toast-header{background:transparent; border-bottom:1px solid var(--line); color:var(--heading); font:700 13.5px var(--fh)}
.kh-toast-container{bottom:84px!important}
@media (min-width:861px){ .kh-toast-container{bottom:90px!important; right:8px!important} }
/* modal */
body.kh .modal-header,body.kh .modal-footer{border-color:var(--line)}
body.kh .modal-title{font:700 16px var(--fh); color:var(--heading)}
/* signup form inside auth card */
.kh-login-card .mb-3{margin-bottom:14px!important}
.kh-login-card .row{--bs-gutter-x:12px}
.kh-login-card .iti{width:100%}
.kh-login-card a{color:var(--accent-text)}
/* fixes */
body.kh .kh-login-brand h1{color:#fff}
body.kh .kh-login-brand p{color:rgba(255,255,255,.78)}
.kh-field > div, .kh-field .kh-input{width:100%}
.kh-showcase-text h1,.kh-showcase-text h2,.kh-showcase-text h3{font:700 15px var(--fh); color:var(--heading); margin:0 0 2px}
.kh-showcase-text p{margin:0; color:var(--text)}
.kh-showcase{align-items:center}
.kh-kb-search .kh-input{width:100%}
.kh-kb-card h3{font-size:16.5px; font-weight:700; margin:4px 0 0}
.kh-kb-card p{font-size:13.5px; color:var(--muted); margin:0}
body.kh .kh-crumbs h1{margin:0; font-size:17px}

/* ===== v2 fixes (review 14 Nov) ===== */
/* collapsed sidebar: keep every icon visible (labels hidden, tooltip via title) */
html.kh-is-collapsed .kh-nav-link > .kh-nav-ico,
html.kh-is-collapsed .kh-ai-launch > .kh-nav-ico{display:grid !important; place-items:center}
html.kh-is-collapsed .kh-ai-launch > span:not(.kh-nav-ico){display:none}
html.kh-is-collapsed .kh-sidebar-foot{padding:12px 8px}
html.kh-is-collapsed .kh-ai-launch{width:44px; height:44px; margin:0 auto; padding:0}
@media (min-width:1101px){
  html.kh-is-collapsed .kh-sidebar-brand{display:flex; flex-direction:column; height:auto; padding:14px 0 6px; gap:8px}
  html.kh-is-collapsed .kh-sidebar-brand .kh-collapse-btn{display:grid !important; margin:0}
  html.kh-is-collapsed .kh-sidebar-brand .kh-collapse-btn .kh-ic{transform:scaleX(-1)}
}
@media (max-width:1100px){ html.kh-is-collapsed .kh-ai-launch > span:not(.kh-nav-ico){display:revert} html.kh-is-collapsed .kh-ai-launch{width:auto;height:auto;padding:10px} }

/* top-bar search: never squeezed — becomes an icon button when space is tight */
.kh-topbar-search{min-width:220px}
.kh-topbar-search kbd{flex:none}
@media (max-width:1280px){ .kh-topbar-search{max-width:380px} }
@media (max-width:1180px){
  .kh-topbar-search{flex:none; min-width:0; width:44px; padding:0; justify-content:center; margin-left:auto; margin-right:0}
  .kh-topbar-search .kh-ph,.kh-topbar-search kbd{display:none}
}
@media (max-width:860px){ .kh-topbar-search{display:none} }

/* search palette: one clean input, no inner border/ring */
.kh-cmd-box .kh-cmd-input{cursor:text; margin:0}
.kh-cmd-box .kh-cmd-input input,
.kh-cmd-box .kh-cmd-input input:focus,
.kh-cmd-box .kh-cmd-input input:focus-visible{border:0 !important; outline:0 !important; box-shadow:none !important; background:transparent !important; -webkit-appearance:none; appearance:none; padding:0; min-height:0; height:28px; font:500 16px var(--fb); color:var(--heading)}
.kh-cmd-box .kh-cmd-input input::placeholder{color:var(--faint)}
.kh-cmd-box .kh-cmd-input kbd,.kh-cmd-foot kbd{font:600 10.5px var(--fb); color:var(--muted); background:var(--bg-soft); border:1px solid var(--line); border-radius:6px; padding:2px 6px; box-shadow:none}
.kh-cmd-box .kh-cmd-input .kh-ic{color:var(--muted); flex:none}
.kh-cmd-item{border:0; background:none; cursor:pointer; color:var(--text)}
.kh-cmd-item .kh-ic{color:var(--muted); flex:none}
.kh-cmd-item.kh-is-active .kh-ic{color:var(--accent-text)}
.kh-cmd-item:focus-visible{box-shadow:none; background:var(--tint)}
.kh-cmd-foot{display:flex; gap:16px; padding:10px 16px; border-top:1px solid var(--line); color:var(--faint); font-size:12px}
.kh-cmd-foot kbd{margin-right:2px}
@media (max-width:860px){ .kh-cmd-overlay{padding-top:8vh} .kh-cmd-foot{display:none} }

/* guest header (logged-out pages: no sidebar) */
.kh-guest{min-height:100vh; display:flex; flex-direction:column}
.kh-gh{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--bg-elev) 88%,transparent); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line)}
.kh-gh-in{max-width:1240px; margin:0 auto; height:68px; padding:0 24px; display:flex; align-items:center; gap:24px}
.kh-gh-brand img.kh-logo{height:30px; width:auto; display:block}
.kh-gh .kh-logo-dark{display:none !important}
[data-bs-theme="dark"] .kh-gh .kh-logo-light{display:none !important}
[data-bs-theme="dark"] .kh-gh .kh-logo-dark{display:block !important}
.kh-gh-links{display:flex; align-items:center; gap:2px}
.kh-gh-link{display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 12px; border-radius:10px; font:600 14px var(--fh); color:var(--text); text-decoration:none !important; white-space:nowrap}
.kh-gh-link .kh-ic{display:none}
.kh-gh-link:hover{background:var(--tint); color:var(--heading)}
.kh-gh-link.kh-is-active{color:var(--accent-text); background:var(--tint)}
.kh-gh-actions{margin-left:auto; display:flex; align-items:center; gap:8px}
.kh-gh-sw{display:flex; gap:8px}
.kh-gh-burger{display:none !important}
.kh-guest-content{max-width:1240px; margin:0 auto; padding:32px 24px 56px; width:100%}
.kh-guest .kh-footer{margin-top:40px}
@media (max-width:1100px){ .kh-gh-sw{display:none} }
@media (max-width:960px){
  .kh-gh-in{gap:12px; padding:0 16px; height:60px}
  .kh-gh-burger{display:grid !important}
  .kh-gh-links{display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:2px; padding:10px 12px 14px; background:var(--bg-elev); border-bottom:1px solid var(--line); box-shadow:var(--sh-lg)}
  .kh-gh.kh-is-open .kh-gh-links{display:flex}
  .kh-gh-link{height:46px; font-size:15px}
  .kh-gh-link .kh-ic{display:block; color:var(--muted)}
  .kh-guest-content{padding:20px 16px 40px}
}
@media (max-width:520px){ .kh-gh-login{display:none !important} .kh-gh-actions{gap:4px} }

/* auth: brand panel stays in view however tall the form is */
.kh-login-page{align-items:start}
.kh-login-brand{position:sticky; top:0; height:100vh; min-height:560px}
.kh-login-brand h1{margin-top:auto}
.kh-login-brand .kh-login-points{margin-bottom:auto}
.kh-login-panel{min-height:100vh}
.kh-login-card-wide{width:min(520px,100%)}
@media (max-height:700px){ .kh-login-brand{justify-content:flex-start} .kh-login-brand h1{margin-top:48px; font-size:32px} }
@media (max-width:1100px){
  .kh-login-brand{display:none}
}

/* payment logos strip (order / cart / checkout / invoice only) */
.kh-pay-strip{margin:28px 0 8px; padding-top:18px; border-top:1px dashed var(--line)}
.kh-pay-strip .kh-pay-row{justify-content:flex-start; margin-top:0}

.kh-gh-only-menu{display:none !important}
@media (max-width:960px){ .kh-gh.kh-is-open .kh-gh-only-menu{display:flex !important; border-top:1px solid var(--line); border-radius:0 0 10px 10px; margin-top:4px} }
.kh-topbar-search span.kh-ph{text-align:left}

/* ===== accent TEXT tokens (links, active nav, chips, icons). Fills (buttons, badges) keep --purple. =====
   light: #4A1A9E on #fff ≈ 11:1 · dark: #C9B8FF on #181230 ≈ 10:1, hover #E2D9FF — all WCAG AA+ */
:root{--accent-text:#4A1A9E; --accent-text-hover:#7F4FDB}
[data-bs-theme="dark"]{--accent-text:#C9B8FF; --accent-text-hover:#E2D9FF}
[data-bs-theme="dark"] body.kh .breadcrumb-item a,[data-bs-theme="dark"] body.kh .kh-bs-crumbs a{color:var(--accent-text)}
[data-bs-theme="dark"] body.kh .text-primary{color:var(--accent-text) !important}
[data-bs-theme="dark"] body.kh .btn-link{--bs-btn-color:var(--accent-text); --bs-btn-hover-color:var(--accent-text-hover)}
[data-bs-theme="dark"] body.kh .kh-btn-secondary,[data-bs-theme="dark"] body.kh .kh-btn-ghost{color:var(--heading)}