/* =========================================================================
   admin.css — MyChatBot Admin
   Layered on top of Bootstrap 4.5 (grid + utilities stay; this restyles).
   Brand tokens build on the existing #6c47ff family already used across the
   stats dashboards, so everything stays visually consistent.
   ========================================================================= */

:root {
    /* Brand */
    --purple: #6c47ff;
    --purple-dark: #5a35ef;
    --purple-darker: #22194D;
    --purple-light: #8b6fff;
    --cyan: #2ccdff;
    --green: #16a34a;

    /* Surfaces / text */
    --bg: #f4f3f8;
    --surface: #fff;
    --border: #e5e3ef;
    --border-soft: #f0eff5;
    --text: #22194D;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;

    /* Scales */
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 2px 8px rgba(34,25,77,0.12);
    --shadow-lg: 4px 0 24px rgba(0,0,0,0.30);

    --sidebar-w: 240px;
    --topbar-h: 56px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    font-family: var(--font);
    color: var(--text);
    min-height: 100vh;
}

/* =========================================================================
   Sidebar
   ========================================================================= */
.admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    background: var(--purple-darker);
    display: flex;
    flex-direction: column;
    z-index: 200;
}
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-brand img {
    height: 24px;
    width: auto;
    filter: brightness(0) invert(1);
}
.sidebar-brand .badge-admin {
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.85);
    font-size: 0.6rem;
    padding: 3px 7px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sidebar-nav {
    flex: 1;
    padding: 12px 0;
    overflow-y: auto;
}
.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: rgba(255,255,255,0.72);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sidebar-nav .nav-link:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
    text-decoration: none;
}
.sidebar-nav .nav-link.active {
    background: rgba(255,255,255,0.10);
    color: #fff;
    border-left-color: var(--cyan);
}
.sidebar-nav .nav-link svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: currentColor;
}
.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.sidebar-footer .user-info {
    color: rgba(255,255,255,0.55);
    font-size: 0.72rem;
    margin-bottom: 10px;
    word-break: break-word;
}
.btn-logout {
    width: 100%;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s;
}
.btn-logout:hover { background: rgba(255,255,255,0.2); color: #fff; }

/* =========================================================================
   Main column + mobile topbar
   ========================================================================= */
.admin-main {
    margin-left: var(--sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.admin-topbar {
    display: none; /* mobile only */
    align-items: center;
    gap: 12px;
    height: var(--topbar-h);
    padding: 0 16px;
    background: var(--purple-darker);
    position: sticky;
    top: 0;
    z-index: 150;
    box-shadow: var(--shadow-md);
}
.admin-topbar .hamburger {
    background: none;
    border: none;
    color: #fff;
    padding: 8px;
    margin-left: -8px;
    cursor: pointer;
    display: inline-flex;
}
.admin-topbar .hamburger svg { width: 24px; height: 24px; fill: currentColor; }
.admin-topbar img { height: 22px; filter: brightness(0) invert(1); }
.admin-topbar .topbar-title {
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
}
.sidebar-overlay { display: none; }

.admin-content {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

/* =========================================================================
   Pages (hash-routed show/hide)
   ========================================================================= */
.admin-page { display: none; }
.admin-page.active { display: block; }

.page-header { margin-bottom: 20px; }
.page-header h1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.page-header .page-sub {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: 4px;
}

/* =========================================================================
   Section cards
   ========================================================================= */
.section-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
    overflow: hidden;
}
.section-header {
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-soft);
    flex-wrap: wrap;
    gap: 12px;
}
.section-header h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--purple-darker);
    margin: 0;
}
.section-body { padding: 24px; }

/* =========================================================================
   Controls bar (stats date range + refresh)
   ========================================================================= */
.controls-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.controls-bar select,
.controls-bar input[type="date"] {
    border-radius: var(--radius);
    border: 1.5px solid #dee2e6;
    padding: 6px 12px;
    font-size: 0.8rem;
    height: 34px;
    transition: border-color 0.15s;
}
.controls-bar select:focus,
.controls-bar input[type="date"]:focus {
    border-color: var(--purple);
    outline: none;
    box-shadow: 0 0 0 3px rgba(108,71,255,0.12);
}
.controls-bar label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 4px 0 0;
}
.btn-refresh {
    background: var(--surface);
    border: 1.5px solid #dee2e6;
    border-radius: var(--radius);
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--purple-darker);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
}
.btn-refresh:hover { border-color: var(--purple); color: var(--purple); }
.btn-refresh svg { width: 14px; height: 14px; }

.date-input-group { display: flex; align-items: center; }
.date-input-group label { margin-bottom: 0; margin-right: 5px; white-space: nowrap; }

/* =========================================================================
   Search input
   ========================================================================= */
.search-wrapper { position: relative; }
.search-wrapper input {
    border-radius: var(--radius);
    border: 1.5px solid #dee2e6;
    padding: 10px 16px 10px 40px;
    font-size: 0.88rem;
    width: 100%;
    max-width: 360px;
    transition: border-color 0.15s;
}
.search-wrapper input:focus {
    border-color: var(--purple);
    outline: none;
    box-shadow: 0 0 0 3px rgba(108,71,255,0.12);
}
.search-wrapper .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

/* =========================================================================
   Tables
   ========================================================================= */
.table { margin-bottom: 0; }
.table thead th {
    background: var(--bg);
    border-top: none;
    border-bottom: 2px solid var(--border);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    padding: 10px 16px;
    white-space: nowrap;
}
.table tbody td {
    padding: 10px 16px;
    vertical-align: middle;
    font-size: 0.87rem;
    border-color: var(--border-soft);
}
.table-hover tbody tr:hover { background: rgba(108,71,255,0.03); }

.badge-purple { background: var(--purple); color: #fff; }

/* =========================================================================
   Compact row actions (Phase 3)
   ========================================================================= */
.row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.btn-action {
    border: none;
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
    white-space: nowrap;
    transition: filter 0.15s, transform 0.1s;
}
.btn-action:hover { filter: brightness(1.08); color: #fff; }
.btn-action:active { transform: scale(0.98); }
.btn-action.topup { background: var(--cyan); }
.btn-action.agent { background: var(--green); }
.btn-action.edit  { background: var(--purple-darker); }

.row-model-hint {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* =========================================================================
   Subscription editor (full-width expandable Edit row — model + plan config)
   The editor lives in its own table row spanning all columns so it has room
   to lay the Model and Plan panels out side by side instead of cramming them
   into the narrow Actions cell.
   ========================================================================= */
.subscription-editor-row > td {
    padding: 0;
    background: var(--surface-2, #f7f7fb);
    border-bottom: 1px solid var(--border);
}
.sub-editor {
    border-left: 3px solid var(--purple);
    padding: 18px 24px 22px;
    animation: subEditorIn 0.18s ease;
}
@keyframes subEditorIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.sub-editor-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
}
.sub-editor-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--purple);
}
.sub-editor-email { font-size: 0.82rem; color: var(--text-secondary); }

/* Two panels side by side on wide screens; stack when space is tight. */
.sub-editor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    align-items: start;
}
.config-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 16px 18px;
}
.config-section .config-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}
.model-info { margin-bottom: 12px; }
.model-info .badge { padding: 0.35em 0.6em; }

/* Vertical stack of fields inside a panel. align-items:stretch keeps each
   field full width without making it grow vertically. */
.config-stack { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.config-stack > .config-field,
.config-stack > .config-duo { flex: none; }
/* Two fields sharing a row (reasoning+temperature, end date+recurring) */
.config-duo { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.config-duo > .config-field { flex: 1 1 140px; }

.config-field { display: flex; flex-direction: column; gap: 4px; }
.config-field label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
}
.config-field select,
.config-field input {
    height: 36px;
    border-radius: var(--radius);
    border: 1.5px solid #dee2e6;
    padding: 4px 10px;
    font-size: 0.82rem;
    background: var(--surface);
}
.config-field select:focus,
.config-field input:focus {
    border-color: var(--purple);
    outline: none;
    box-shadow: 0 0 0 3px rgba(108,71,255,0.12);
}
/* `grow` just means "fill the available width" — width, not flex-grow, so it
   never stretches vertically when stacked in a column. Horizontal sharing
   inside a row is handled by `.config-duo > .config-field`. */
.config-field.grow { min-width: 140px; }
.config-field.grow select,
.config-field.grow input { width: 100%; }
.config-check-field { justify-content: flex-end; }
.config-check-field .form-check { padding-top: 8px; height: 36px; display: flex; align-items: center; gap: 6px; }
.config-check-field .form-check-label { margin: 0; }

.btn-config-update {
    align-self: flex-start;
    margin-top: 4px;
    height: 36px;
    background: var(--purple);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0 18px;
    cursor: pointer;
    transition: background 0.15s, filter 0.15s;
    white-space: nowrap;
}
.btn-config-update:hover { background: var(--purple-dark); filter: brightness(1.03); color: #fff; }
.config-meta { font-size: 0.72rem; color: var(--text-secondary); margin-top: 6px; }

/* =========================================================================
   Pagination bar
   ========================================================================= */
.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    border-top: 1px solid var(--border-soft);
}
.pagination-bar .page-info { font-size: 0.82rem; color: var(--text-secondary); }
.pagination-bar .page-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.pagination-bar .page-btn {
    min-width: 34px;
    height: 34px;
    border: 1.5px solid #dee2e6;
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 0.82rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    color: var(--purple-darker);
    font-weight: 600;
}
.pagination-bar .page-btn.active {
    background: var(--purple);
    color: #fff;
    border-color: var(--purple);
}
.pagination-bar .page-btn:hover:not(.active):not(:disabled) {
    border-color: var(--purple);
    color: var(--purple);
}
.pagination-bar .page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* =========================================================================
   Responsive — collapse sidebar to off-canvas drawer under 768px
   ========================================================================= */
@media (max-width: 768px) {
    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: var(--shadow-lg);
    }
    body.sidebar-open .admin-sidebar { transform: none; }

    .admin-main { margin-left: 0; }
    .admin-topbar { display: flex; }

    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 190;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }
    body.sidebar-open .sidebar-overlay { opacity: 1; pointer-events: auto; }

    .admin-content { padding: 16px; }
    .page-header h1 { font-size: 1.2rem; }

    .section-header { flex-direction: column; align-items: flex-start; }
    .section-header .controls-bar,
    .section-header .search-wrapper { width: 100%; }
    .search-wrapper input { max-width: 100%; }

    /* Horizontal scroll preserves all columns on narrow screens */
    .table-responsive #subscriptions-table { min-width: 600px; }

    /* Bigger touch targets (WCAG ~44px) */
    .btn-action { min-height: 40px; padding: 9px 14px; }
    .row-actions { gap: 8px; }
    .btn-logout { min-height: 44px; }
    .config-field select,
    .config-field input,
    .btn-config-update { height: 40px; }

    .pagination-bar { flex-direction: column; gap: 8px; align-items: stretch; }
    .sub-editor { padding: 14px 16px 18px; }
    .sub-editor-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .row-actions { width: 100%; }
    .btn-action { flex: 1 1 auto; justify-content: center; }
}