/*
 * chatbot.css — dashboard styles on top of Vuexy (Bootstrap 5, horizontal menu).
 *
 * The pages keep their own small class vocabulary (.card with padding, bare .btn / .btn.ghost,
 * .kpi tiles, .badge.ok|warn|danger|info, .toolbar, .row grids, bare <table> and <input>).
 * This file maps that vocabulary onto Vuexy's design tokens so every page gets the corporate
 * look without rewriting its markup. New pages may use plain Bootstrap/Vuexy classes directly.
 */

/* ---- Legacy variable names (used by page-level <style> blocks and inline styles) ---- */
:root {
  --bg: var(--bs-body-bg);
  --card: var(--bs-paper-bg);
  --ink: var(--bs-heading-color);
  --muted: var(--bs-secondary-color);
  --line: var(--bs-border-color);
  --primary: var(--bs-primary);
  --primary-ink: var(--bs-primary-contrast, #fff);
  --primary-soft: var(--bs-primary-bg-subtle);
  --ok: var(--bs-success);  --ok-soft: var(--bs-success-bg-subtle);
  --warn: var(--bs-warning); --warn-soft: var(--bs-warning-bg-subtle);
  --danger: var(--bs-danger); --danger-soft: var(--bs-danger-bg-subtle);
  --radius: var(--bs-border-radius-lg);
  --shadow: var(--bs-box-shadow);
  --cb-input-border: color-mix(in sRGB, var(--bs-base-color) 22%, var(--bs-paper-bg));
  --soft: color-mix(in sRGB, var(--bs-base-color) 6%, var(--bs-paper-bg));   /* neutral chip / track background (was #f1f5f9) */
}

/* Vuexy demo.css bits the layout relies on */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page { padding-top: 64px !important; }
.content-wrapper .navbar { z-index: auto; }
.app-brand-logo svg { width: 30px; height: 30px; }
.app-brand-text { font-size: 1.25rem; letter-spacing: -0.01em; }
.cb-mobile-brand { font-weight: 700; color: var(--bs-heading-color); font-size: 1.125rem; white-space: nowrap; }
.cb-mobile-brand:hover { color: var(--bs-primary); }

/* ---- Page header ---- */
.container-p-y h1 { font-size: 1.5rem; font-weight: 600; color: var(--bs-heading-color); margin: 0 0 0.25rem; letter-spacing: -0.01em; }
.container-p-y h1 .badge, .container-p-y h1 .pill { vertical-align: middle; }
.sub { color: var(--bs-body-color); font-size: 0.9375rem; margin: 0 0 1.25rem; }
.container-p-y > h1 + .sub { margin-bottom: 1.5rem; }
.container-p-y h1, .container-p-y h2, .container-p-y h3, .container-p-y h4 { color: var(--bs-heading-color); }
.muted { color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 2rem 0.75rem; }

/* ---- Cards (pages use .card as a padded panel; real Vuexy cards with .card-body keep Bootstrap behaviour) ---- */
.card { margin-bottom: 1.5rem; }
/* Bootstrap makes .card a flex column, which stretches every direct child (selects, inline-block boxes, buttons)
   to the full width. The pages' padded panels are plain block containers. */
.card:not(:has(> .card-header, > .card-body, > .card-footer, > .table-responsive)) { display: block; padding: 1.5rem; }
.card > h1, .card h1 { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.25rem; }
.card > h1 + .sub, .card > h1 + p.sub { margin-top: 0.125rem; }
/* Section titles the pages write as <h2>/<h3> inside a panel: Vuexy's display sizes are far too big there. */
.card h2:not(.card-title), .card h3:not(.card-title) { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; margin: 0 0 0.875rem; color: var(--bs-heading-color); }
.card h3 .muted, .card h2 .muted { font-weight: 400; }
/* Country flags as small images (Windows browsers have no flag-emoji font, so 🇺🇸 shows as "US"). */
.cb-flag { width: 20px; height: 15px; border-radius: 2px; vertical-align: -2px; margin-right: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.card > table, .card > .sub:last-child { margin-bottom: 0; }

/* ---- Tables (bare <table> inside pages) ---- */
table:not(.table) { width: 100%; border-collapse: collapse; font-size: 0.9375rem; color: var(--bs-body-color); }
table:not(.table) th { text-align: left; padding: 0.75rem 1rem; color: var(--bs-heading-color); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.4px; text-transform: uppercase; border-bottom: 1px solid var(--bs-border-color); vertical-align: middle; white-space: nowrap; }
table:not(.table) td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--bs-border-color); vertical-align: middle; }
table:not(.table) tr:last-child td { border-bottom: 0; }
table:not(.table) tr:hover td { background: color-mix(in sRGB, var(--bs-paper-bg) 96%, var(--bs-primary)); }
table:not(.table) td strong { color: var(--bs-heading-color); font-weight: 600; }
td .btn, th .btn { --bs-btn-padding-y: 0.317rem; --bs-btn-padding-x: 0.875rem; --bs-btn-font-size: 0.8125rem; --bs-btn-border-radius: var(--bs-border-radius-sm); line-height: 1.375; }

/* ---- Buttons: bare .btn = primary, .ghost = outline, .danger = danger, .sm = small ---- */
.btn:not([class*="btn-"]) {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-color: var(--bs-primary-contrast, #fff);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--bs-primary-contrast, #fff);
  --bs-btn-hover-bg: color-mix(in sRGB, #000 10%, var(--bs-primary));
  --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
  --bs-btn-active-color: var(--bs-primary-contrast, #fff);
  --bs-btn-active-bg: color-mix(in sRGB, #000 10%, var(--bs-primary));
  --bs-btn-active-border-color: var(--bs-btn-active-bg);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-disabled-color: var(--bs-primary-contrast, #fff);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; white-space: nowrap;
}
.btn:not([class*="btn-"]):hover { box-shadow: 0 0.125rem 0.375rem 0 rgba(var(--bs-primary-rgb), 0.3); }
.btn.ghost {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--bs-primary);
  --bs-btn-hover-bg: color-mix(in sRGB, var(--bs-paper-bg) 92%, var(--bs-primary));
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: var(--bs-primary);
  --bs-btn-active-bg: color-mix(in sRGB, var(--bs-paper-bg) 92%, var(--bs-primary));
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary);
}
.btn.ghost:hover { box-shadow: none; }
.btn.danger {
  --bs-btn-bg: var(--bs-danger);
  --bs-btn-color: #fff;
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in sRGB, #000 10%, var(--bs-danger));
  --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in sRGB, #000 10%, var(--bs-danger));
  --bs-btn-active-border-color: var(--bs-btn-active-bg);
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
}
.btn.danger:hover { box-shadow: 0 0.125rem 0.375rem 0 rgba(var(--bs-danger-rgb), 0.3); }
.btn.sm { --bs-btn-padding-y: 0.317rem; --bs-btn-padding-x: 0.875rem; --bs-btn-font-size: 0.8125rem; --bs-btn-border-radius: var(--bs-border-radius-sm); line-height: 1.375; }
.btn + .btn { margin-left: 0.25rem; }

/* ---- Forms (bare controls get the Vuexy form-control look) ---- */
.container-p-y input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not(.form-control):not(.form-check-input),
.container-p-y textarea:not(.form-control) {
  display: block; width: 100%;
  padding: calc(0.426rem - 1px) calc(0.9375rem - 1px);
  font-size: 0.9375rem; font-weight: 400; line-height: 1.625; font-family: inherit;
  color: var(--bs-heading-color); background-color: var(--bs-paper-bg);
  border: 1px solid var(--cb-input-border); border-radius: var(--bs-border-radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.container-p-y select:not(.form-select) {
  display: block; width: 100%;
  padding: calc(0.426rem - 1px) calc(2.625rem - 1px) calc(0.426rem - 1px) calc(0.9375rem - 1px);
  font-size: 0.9375rem; font-weight: 400; line-height: 1.625; font-family: inherit;
  color: var(--bs-heading-color); background-color: var(--bs-paper-bg);
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22' fill='none'%3e%3cpath d='M10.9999 12.0743L15.5374 7.53676L16.8336 8.83292L10.9999 14.6666L5.16626 8.83292L6.46243 7.53676L10.9999 12.0743Z' fill='%232f2b3d' fill-opacity='0.9'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 0.9375rem center; background-size: 22px 24px;
  border: 1px solid var(--cb-input-border); border-radius: var(--bs-border-radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.container-p-y select[style*="width:auto"], .container-p-y select[style*="width: auto"] { display: inline-block; width: auto; }
.container-p-y input:not([type="checkbox"]):not([type="radio"]):focus,
.container-p-y textarea:focus,
.container-p-y select:focus { outline: 0; border-color: var(--bs-primary); box-shadow: 0 0.125rem 0.375rem 0 rgba(var(--bs-primary-rgb), 0.3); }
.container-p-y input::placeholder, .container-p-y textarea::placeholder { color: var(--bs-secondary-color); opacity: 1; }
.container-p-y input:disabled, .container-p-y select:disabled, .container-p-y textarea:disabled { background-color: color-mix(in sRGB, var(--bs-base-color) 6%, var(--bs-paper-bg)); color: var(--bs-secondary-color); }
.container-p-y input[type="checkbox"], .container-p-y input[type="radio"] { accent-color: var(--bs-primary); width: 1.05em; height: 1.05em; vertical-align: -2px; margin: 0 0.4rem 0 0; }
.container-p-y input[type="color"] { padding: 0; border: 1px solid var(--cb-input-border); border-radius: var(--bs-border-radius); height: 2.375rem; width: 3.25rem; background: var(--bs-paper-bg); }
.container-p-y label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--bs-heading-color); margin: 1rem 0 0.3rem; }
.container-p-y label.form-label { margin: 0 0 0.25rem; }
.container-p-y .hint, .container-p-y small.hint { display: block; font-size: 0.8125rem; color: var(--bs-secondary-color); margin-top: 0.3rem; }

/* .row used as a 2-column field grid (no col-* children); real Bootstrap rows keep their behaviour */
.container-p-y .row:not(:has(> [class^="col"], > [class*=" col"])) { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0; --bs-gutter-x: 0; --bs-gutter-y: 0; }
.container-p-y .row:not(:has(> [class^="col"], > [class*=" col"])) > * { width: auto; max-width: none; padding: 0; margin-top: 0; min-width: 0; }
.container-p-y .row:not(:has(> [class^="col"], > [class*=" col"])) > * > label:first-child { margin-top: 0.75rem; }
/* Side-by-side panels stretch to the same height, so a shorter list never leaves a hole beside its neighbour. */
.container-p-y .row.cb-equal { align-items: stretch; gap: 1.5rem; }
.container-p-y .row.cb-equal > .card { margin-bottom: 0; height: 100%; }
.container-p-y .row.cb-equal { margin-bottom: 1.5rem; }

/* ---- Toolbar (filter forms) ---- */
.toolbar { display: flex; gap: 0.875rem; align-items: flex-end; flex-wrap: wrap; }
.toolbar .fld { display: flex; flex-direction: column; }
.container-p-y .toolbar label { margin: 0 0 0.3rem; }
.container-p-y .toolbar input, .container-p-y .toolbar select { width: auto; min-width: 150px; }
.toolbar .btn { align-self: flex-end; }

/* ---- Chips / badges ---- */
.pill { display: inline-block; padding: 0.25rem 0.625rem; border-radius: 0.25rem; font-size: 0.8125rem; font-weight: 500; line-height: 1.2; background: var(--bs-primary-bg-subtle); color: var(--bs-primary); white-space: nowrap; }
.badge { --bs-badge-font-size: 0.8125rem; --bs-badge-padding-x: 0.6rem; --bs-badge-padding-y: 0.35rem; }
.badge:not([class*="bg-"]) { --bs-badge-color: var(--bs-secondary); --bs-badge-bg-color: var(--bs-secondary-bg-subtle); }
.badge.ok { --bs-badge-color: var(--bs-success); --bs-badge-bg-color: var(--bs-success-bg-subtle); }
.badge.warn { --bs-badge-color: var(--bs-warning); --bs-badge-bg-color: var(--bs-warning-bg-subtle); }
.badge.danger { --bs-badge-color: var(--bs-danger); --bs-badge-bg-color: var(--bs-danger-bg-subtle); }
.badge.info { --bs-badge-color: var(--bs-primary); --bs-badge-bg-color: var(--bs-primary-bg-subtle); }

/* ---- KPI tiles ---- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.kpi { position: relative; overflow: hidden; background: var(--bs-paper-bg); border-radius: var(--bs-border-radius-lg, 0.5rem); box-shadow: var(--bs-box-shadow); padding: 1.125rem 1.25rem 1.125rem 1.375rem; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--bs-primary); }
.kpi.good::before { background: var(--bs-success); }
.kpi.warn::before { background: var(--bs-warning); }
.kpi .v { font-size: 1.5rem; font-weight: 600; color: var(--bs-heading-color); line-height: 1.2; letter-spacing: -0.01em; }
.kpi .l { font-size: 0.8125rem; color: var(--bs-body-color); margin-top: 0.35rem; }

/* ---- Stars / reviews ---- */
.stars { white-space: nowrap; letter-spacing: 1px; font-size: 0.9375rem; }
.stars .on { color: var(--bs-warning); }
.stars .off { color: color-mix(in sRGB, var(--bs-base-color) 18%, var(--bs-paper-bg)); }
.review { background: color-mix(in sRGB, var(--bs-base-color) 3%, var(--bs-paper-bg)); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); padding: 0.875rem 1rem; margin-bottom: 0.625rem; }
.review .rhead { display: flex; justify-content: space-between; align-items: center; gap: 0.625rem; margin-bottom: 0.25rem; }
.review .rtext { font-size: 0.9375rem; color: var(--bs-body-color); font-style: italic; }

/* ---- Flash / alerts ---- */
.flash { background: var(--bs-success-bg-subtle); color: var(--bs-success); border: 0; padding: 0.75rem 1rem; border-radius: var(--bs-border-radius); margin-bottom: 1rem; font-size: 0.9375rem; font-weight: 500; }
.flash.err, .err { background: var(--bs-danger-bg-subtle); color: var(--bs-danger); padding: 0.75rem 1rem; border-radius: var(--bs-border-radius); margin-bottom: 1rem; font-size: 0.9375rem; }

/* ---- Code ---- */
.container-p-y code { background: color-mix(in sRGB, var(--bs-base-color) 6%, var(--bs-paper-bg)); color: var(--bs-heading-color); padding: 0.15rem 0.45rem; border-radius: 0.25rem; font-size: 0.8125rem; word-break: break-all; }
.container-p-y pre { background: #2f2b3d; color: #e6e6e8; padding: 1rem; border-radius: 0.5rem; overflow: auto; font-size: 0.8125rem; line-height: 1.6; }
.container-p-y pre code { background: transparent; color: inherit; padding: 0; }

/* ---- Stat cards / chart cards ---- */
.row > [class*="col"] > .card { margin-bottom: 0; }
.cb-stat .card-body { padding: 1.25rem 1.5rem; }
.cb-stat-label { font-size: 0.875rem; color: var(--bs-body-color); margin-bottom: 0.25rem; }
.cb-stat-value { font-size: 1.625rem; font-weight: 600; color: var(--bs-heading-color); line-height: 1.2; letter-spacing: -0.01em; }
.cb-stat-sub { font-size: 0.8125rem; color: var(--bs-secondary-color); margin-top: 0.25rem; }
.cb-stat .avatar { --bs-avatar-size: 2.625rem; cursor: default; }
.cb-stat .avatar .avatar-initial .ti { font-size: 1.375rem; }
.card > .card-header .card-title { margin: 0; font-size: 1.125rem; }
.card > .card-header .card-subtitle { color: var(--bs-secondary-color); font-size: 0.875rem; margin-top: 0.25rem; }
.card > .card-header + .card-body { padding-top: 1rem; }
.cb-chart { width: 100%; }
.cb-chart .apexcharts-tooltip { box-shadow: var(--bs-box-shadow); border: 0; }
.cb-chart .apexcharts-tooltip-title { background: transparent; border-bottom: 1px solid var(--bs-border-color); }
.cb-table-view { margin-top: 0.75rem; }
.cb-table-view summary { cursor: pointer; font-size: 0.8125rem; font-weight: 500; color: var(--bs-primary); list-style: none; display: inline-flex; align-items: center; gap: 0.3rem; }
.cb-table-view summary::-webkit-details-marker { display: none; }
.cb-table-view summary::before { content: "▸"; font-size: 0.7rem; }
.cb-table-view[open] summary::before { content: "▾"; }
.cb-table-wrap { margin-top: 0.5rem; max-height: 320px; overflow: auto; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); }
.cb-table-wrap table th { position: sticky; top: 0; background: var(--bs-paper-bg); z-index: 1; }
.cb-table-wrap table td, .cb-table-wrap table th { padding: 0.5rem 0.875rem; font-variant-numeric: tabular-nums; }
.cb-mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1rem; }
.cb-mini-stats > div { background: color-mix(in sRGB, var(--bs-base-color) 4%, var(--bs-paper-bg)); border-radius: var(--bs-border-radius); padding: 0.625rem 0.875rem; }
.cb-mini-stats .v { font-size: 1.125rem; font-weight: 600; color: var(--bs-heading-color); }
.cb-mini-stats .l { font-size: 0.75rem; color: var(--bs-secondary-color); }

/* ---- Navbar / user menu ---- */
.cb-user-name { font-size: 0.875rem; font-weight: 600; color: var(--bs-heading-color); line-height: 1.2; }
.cb-user-role { font-size: 0.75rem; color: var(--bs-secondary-color); line-height: 1.2; text-transform: capitalize; }
.layout-navbar .avatar .avatar-initial, .dropdown-user .avatar .avatar-initial { background: var(--bs-primary); color: var(--bs-primary-contrast, #fff); font-weight: 600; }
.layout-menu-horizontal .menu-inner > .menu-item > .menu-link { font-weight: 500; }

/* ---- Footer ---- */
.content-footer .footer-container { font-size: 0.875rem; }

/* ---- Responsive ---- */
@media (max-width: 767.98px) {
  .container-p-y .row:not(:has(> [class^="col"], > [class*=" col"])) { grid-template-columns: 1fr; }
  .card:not(:has(> .card-header, > .card-body, > .card-footer, > .table-responsive)) { padding: 1.125rem; }
  .card > table { display: block; overflow-x: auto; }
}