/* ============================================================================
   OBaseAI portal — application-specific styles ONLY. Everything that Bootstrap
   can do (buttons, forms, cards, alerts, badges, tables, modals, offcanvas,
   utilities) lives in Bootstrap. Brand tokens live in theme.css. This file
   contains only layout shell + custom widgets that aren't worth a Bootstrap
   component on their own.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Layout shell — sidebar + main area
   ---------------------------------------------------------------------------- */

.ob-app {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.ob-portal {
    display: flex;
    min-height: 100vh;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* Sidebar ------------------------------------------------------------------- */
/* On lg+ this renders as a fixed 240px column. On <lg Bootstrap's offcanvas-lg
   behavior takes over (slide-in drawer toggled via the hamburger in the topbar).
   Hardcoded dark navy is intentional — the sidebar is always-dark regardless of
   the page theme toggle. The `!important` flags are required because Bootstrap's
   .offcanvas-lg resets `background-color: transparent !important` at lg+
   breakpoint; without these, the sidebar would inherit the page bg (which then
   shows white in light mode, hiding all the dark-on-light text inside). */
.ob-sidebar {
    width: 240px;
    min-width: 240px;
    background: #0f172a !important;
    color: #e2e8f0 !important;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
}

/* Collapsed state (icon-only) — desktop only */
.ob-sidebar-collapsed .ob-sidebar {
    width: 60px;
    min-width: 60px;
}
.ob-sidebar-collapsed .ob-sidebar .ob-brand-text,
.ob-sidebar-collapsed .ob-sidebar .ob-nav-section-label,
.ob-sidebar-collapsed .ob-sidebar-nav a span {
    display: none;
}
.ob-sidebar-collapsed .ob-main {
    margin-left: 60px;
}
/* Collapsed brand row — pull the padding in and constrain the icon so a
   square IconPath fits the 60px rail (default .ob-brand-icon allows up to
   150×100 which is sized for the expanded wordmark). */
.ob-sidebar-collapsed .ob-sidebar .ob-sidebar-brand {
    padding: 16px 14px;
    justify-content: center;
}
.ob-sidebar-collapsed .ob-sidebar .ob-brand-icon {
    max-width: 32px;
    max-height: 32px;
}

/* When the sidebar is shown as a Bootstrap offcanvas (smaller than lg), let
   Bootstrap's positioning win — unset our fixed/left/top so the drawer anim works.
   We also have to override the base .ob-sidebar { z-index: 100 } — Bootstrap's
   offcanvas backdrop sits at z-index 1045, so without bumping the panel above
   it the backdrop renders on top of the sidebar (dimming the nav items) and
   intercepts every click (so taps never reach the links). */
@media (max-width: 991.98px) {
    .ob-sidebar.offcanvas-lg {
        position: fixed;
        width: 280px;
        min-width: 280px;
        z-index: 1046; /* one above --bs-offcanvas-zindex (1045) backdrop */
    }
}

.ob-sidebar-brand {
    padding: 20px 20px 16px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.3px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    /* Stack icon over name and centre both. Switching to a column flex lets the
       LogoName drop to its own line directly under the logo image rather than
       sitting beside it. text-align:center is here as well so the LogoName
       wraps to multiple lines cleanly on narrow widths. */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.ob-brand-icon {
    max-width: 150px;
    width: auto;
    height: auto;
    border-radius: 8px;
    /*background: linear-gradient(135deg, #3b82f6, #2563eb);*/
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}
/* Logo image inside the brand badge — contain inside the 32×32 rounded square. */
.ob-brand-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.ob-sidebar-nav {
    flex: 1;
    padding: 12px 0;
    overflow-y: auto;
    /* Force column stacking regardless of Bootstrap's `.offcanvas-body { display: flex }`
       which kicks in at lg+ and would otherwise lay NavLinks horizontally. */
    display: flex !important;
    flex-direction: column;
}

.ob-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
    text-decoration: none;
}

.ob-sidebar-nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.ob-sidebar-nav a.active {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    border-left-color: transparent;
    border-radius: 0 8px 8px 0;
    margin-right: 12px;
}

.ob-nav-section-label {
    padding: 16px 20px 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
}

.ob-sidebar-toggle {
    width: 100%;
    padding: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.ob-sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* Main area ----------------------------------------------------------------- */
.ob-main {
    flex: 1;
    margin-left: 240px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;            /* allow inner content to shrink on narrow widths */
}

@media (max-width: 991.98px) {
    .ob-main {
        margin-left: 0;
    }
}

/* Topbar -------------------------------------------------------------------- */
.ob-topbar {
    height: 56px;
    min-height: 56px;
    /* --bs-secondary-bg is theme-level (set on the data-bs-theme element)
       so it cascades correctly under nested theming. --bs-card-bg is component-
       level in Bootstrap 5.3 (only set inside .card elements), so reading it
       from a non-card element would silently fall through to the literal
       fallback and the topbar would never switch with the theme. */
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 50;
}

@media (max-width: 575.98px) {
    .ob-topbar { padding: 0 12px; }
}

.ob-theme-toggle {
    background: transparent;
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.ob-theme-toggle:hover {
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg);
}

/* Content ------------------------------------------------------------------- */
.ob-content {
    padding: 24px;
    max-width: 1800px;
    width: 100%;
    flex: 1;
}

@media (max-width: 575.98px) {
    .ob-content { padding: 16px; }
}

/* ----------------------------------------------------------------------------
   Responsive-sticky helper — used by ChatbotDetail's right column
   ---------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .ob-sticky-lg {
        position: sticky;
        top: 80px;
    }
}

/* Make clickable cards obvious. Bootstrap 5.3 ships .cursor-pointer but older
   cached builds may not have it — define it here for safety. */
.cursor-pointer { cursor: pointer; }

/* ----------------------------------------------------------------------------
   Toolbar — search row on list pages (Chatbots, Conversations, etc.)
   ---------------------------------------------------------------------------- */
.ob-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

/* ----------------------------------------------------------------------------
   Auth pages — Login, Register, VerifyEmail (full-screen centered card)
   ---------------------------------------------------------------------------- */
.ob-auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-body-bg);
    padding: 24px;
}

.ob-auth-card {
    width: 100%;
    max-width: 400px;
    /* See note on .ob-topbar — --bs-secondary-bg is theme-level. */
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    padding: 32px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

/* Brand mark centered above the auth-card title. Sized at 56 px so it reads
   as a clear logo without overpowering the form. */
.ob-auth-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}
.ob-auth-logo img {
    max-width: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.ob-auth-card h1 {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 4px;
}

.ob-auth-card .auth-subtitle {
    text-align: center;
    font-size: 14px;
    color: var(--bs-secondary-color);
    margin-bottom: 24px;
}

.ob-auth-footer {
    text-align: center;
    font-size: 13px;
    color: var(--bs-secondary-color);
    margin-top: 16px;
}

.ob-auth-footer a {
    font-weight: 600;
}

/* ----------------------------------------------------------------------------
   Billing — plan cards
   ---------------------------------------------------------------------------- */
.ob-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.ob-plan-card {
    /* Theme-level variable so it switches between dark/light correctly. */
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    padding: 24px;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ob-plan-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.ob-plan-featured {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 1px var(--bs-primary);
}

.ob-plan-current {
    border-color: var(--bs-success);
}
.ob-plan-current::after {
    content: 'Current';
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--bs-success);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
}

.ob-plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bs-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
}

.ob-plan-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}
.ob-plan-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 12px 0;
}
.ob-plan-amount {
    font-size: 28px;
    font-weight: 700;
}
.ob-plan-period {
    font-size: 13px;
    color: var(--bs-secondary-color);
}
.ob-plan-features {
    list-style: none;
    padding: 0;
    margin: 16px 0;
}
.ob-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    padding: 4px 0;
    color: var(--bs-body-color);
}
.ob-plan-features li::before {
    content: '✓';
    color: var(--bs-success);
    font-weight: 700;
}
.ob-plan-action {
    margin-top: 16px;
}

/* ----------------------------------------------------------------------------
   Conversation detail — chat messages
   ---------------------------------------------------------------------------- */
/* Flex column container for the transcript — required for align-self on
   .ob-chat-msg to actually push bot bubbles left and visitor bubbles right. */
.ob-chat-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ob-chat-msg {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    max-width: min(80%, 720px);
}
.ob-chat-user { align-self: flex-end;  align-items: flex-end; }
.ob-chat-bot  { align-self: flex-start; align-items: flex-start; }

.ob-chat-role {
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-body-color);
}

.ob-chat-content {
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--bs-tertiary-bg);
    width: fit-content;          /* auto-size to content rather than stretching */
    max-width: 100%;
    overflow-wrap: anywhere;
}
/* Visitor bubbles render typed text — preserve their explicit line breaks. */
.ob-chat-user .ob-chat-content {
    background: var(--bs-primary);
    color: #fff;
    border-radius: 12px 12px 4px 12px;
    white-space: pre-wrap;
}
/* Bot bubbles render HTML (MarkupString). Keep whitespace normal so the
   newlines between <li>/<p> source tags don't show up as blank gaps —
   that was making every list item look 30px apart. */
.ob-chat-bot .ob-chat-content {
    border-radius: 12px 12px 12px 4px;
    white-space: normal;
}

.ob-chat-meta {
    font-size: 11px;
    color: var(--bs-secondary-color);
}

/* ----------------------------------------------------------------------------
   Settings — labelled info rows
   ---------------------------------------------------------------------------- */
.ob-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--bs-border-color);
}
.ob-info-row:last-child { border-bottom: none; }
.ob-info-label {
    font-weight: 500;
    color: var(--bs-secondary-color);
}

/* ----------------------------------------------------------------------------
   Dashboard — 7-day mini chart
   ---------------------------------------------------------------------------- */
.ob-mini-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 80px;
}
.ob-mini-bar {
    flex: 1;
    background: linear-gradient(180deg, var(--bs-primary), #60a5fa);
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    transition: opacity 0.15s;
}
.ob-mini-bar:hover {
    opacity: 0.85;
}

/* ----------------------------------------------------------------------------
   Dashboard — KPI tiles
   The whole tile is an <a>; default state looks like a card, hover lifts via
   a subtle border-color + transform. Status modifiers paint a left accent
   stripe so attention-needing tiles (warning / danger / info) stand out
   against the neutral grid without screaming.
   ---------------------------------------------------------------------------- */
.ob-kpi-tile {
    display: block;
    height: 100%;
    padding: 14px 14px 12px;
    border: 1px solid var(--bs-border-color);
    border-left: 3px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    text-decoration: none;
    transition: transform 0.12s ease, border-color 0.15s, box-shadow 0.15s;
}
.ob-kpi-tile:hover {
    color: var(--bs-body-color);
    text-decoration: none;
    transform: translateY(-1px);
    border-color: var(--bs-primary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
.ob-kpi-tile.is-warning  { border-left-color: #f59e0b; }
.ob-kpi-tile.is-danger   { border-left-color: #dc2626; }
.ob-kpi-tile.is-info     { border-left-color: #9333ea; }

.ob-kpi-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 6px;
}
.ob-kpi-icon svg { display: block; }

.ob-kpi-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--bs-body-color);
}
.ob-kpi-label {
    font-size: 12px;
    color: var(--bs-secondary-color);
    margin-top: 2px;
}

/* Smaller variant for the secondary row (lifetime metrics + super-admin
   AI cost). Same skin, smaller numbers + tighter padding. */
.ob-kpi-tile-sm {
    padding: 10px 12px;
}
.ob-kpi-value-sm {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--bs-body-color);
}