/* Custom styles for CBC Survey application */

/* ==================== COLOR PALETTE ==================== */
/* ==================== CSS VARIABLE SYSTEM ==================== */
/*
 * USAGE GUIDE:
 * 
 * SIDEBAR NAVIGATION:
 *   --sidebar-active-bg         : Background for active nav items (blue)
 *   --sidebar-active-color      : Text color for active nav items (white)
 *   --sidebar-active-bg-light   : Light background for active states (light blue)
 *   --sidebar-hover-bg          : Background on hover
 *   --sidebar-hover-border      : Border on hover
 *   --sidebar-badge-border-color: Border for page title badges
 *
 * INTERACTIVE ELEMENTS (buttons, inputs, selections):
 *   --interactive-color         : Primary interactive color (blue)
 *   --interactive-color-hover   : Darker on hover
 *   --interactive-color-light   : Light variant for backgrounds
 *   --interactive-border        : Border for focused inputs
 *
 * LAYOUTS:
 *   --sidebar-layout           : Standard pages (Settings, Data)
 *   --config-layout            : Config pages (CBC, MaxDiff) - uses --config-padding
 *   --config-padding           : 120px for desktop
 *   --config-padding-mobile    : 20px for mobile
 *
 * SEMANTIC COLORS:
 *   --color-success, --color-warning, --color-danger, --color-info
 *
 * DO NOT add new hardcoded hex colors! Use these variables instead.
 * ================================================================= */

:root {
    /* ===== Brand Colors ===== */
    --color-primary: var(--brand-primary);
    --color-primary-light: var(--brand-primary-soft);
    --color-primary-dark: var(--brand-primary-strong);
    --color-primary-bg: var(--surface-panel);
    --color-primary-subtle: var(--brand-gradient-soft);

    /* Gradient colors */
    --color-gradient-start: var(--brand-primary-strong);
    --color-gradient-mid: var(--brand-primary);
    --color-gradient-end: var(--brand-primary-soft);

    /* ===== Semantic Colors ===== */
    --color-success: var(--success-500);
    --color-info: var(--info-500);
    --color-warning: var(--warning-500);
    --color-danger: var(--danger-500);

    /* ===== Neutral Colors ===== */
    --color-text: var(--text-default);
    --color-text-light: var(--gray-700);
    --color-text-muted: var(--text-muted);
    --color-bg: var(--surface-panel);
    --color-bg-light: var(--surface-panel-muted);
    --color-bg-subtle: var(--surface-panel-subtle);
    --color-border: var(--border-default);
    --color-border-light: var(--border-muted);

    /* ===== Interactive Elements (Buttons, Inputs, Selections) ===== */
    /* Use these for ALL interactive UI elements for consistency */
    --interactive-color: var(--info-500);
    --interactive-color-hover: var(--info-600);
    --interactive-color-light: var(--info-50);
    --interactive-color-lighter: var(--info-100);
    --interactive-border: var(--info-500);
    --interactive-shadow: 0 2px 8px var(--interactive-tint-25);
    --interactive-shadow-hover: 0 4px 12px var(--interactive-tint-30);
    --switch-active-bg: var(--accent-teal-600);
    --switch-active-border: var(--accent-teal-600);
    --switch-active-shadow: var(--teal-tint-22);

    /* ===== Shadows ===== */
    --shadow-sm: var(--elevation-sm);
    --shadow-md: var(--elevation-md);
    --shadow-lg: var(--elevation-lg);

    /* ===== Spacing System (8-Point Grid) ===== */
    --space-xs: var(--space-1);
    --space-sm: var(--space-2);
    --space-md: var(--space-4);
    --space-lg: var(--space-6);
    --space-xl: var(--space-8);
    --space-2xl: var(--space-12);
    --space-3xl: var(--space-16);

    /* ===== Unified Sidebar System ===== */
    --sidebar-width: 220px;
    --sidebar-width-left: 220px;
    --sidebar-width-right: 220px;
    --sidebar-width-app: 280px;
    --sidebar-width-narrow: 240px;
    --sidebar-width-wide: 340px;
    
    /* Active state - ONE color for ALL sidebars */
    --sidebar-active-bg: var(--interactive-color);
    --sidebar-active-color: var(--text-inverse);
    --sidebar-active-text: var(--text-inverse);
    --sidebar-active-bg-light: var(--interactive-color-light);
    --sidebar-active-shadow: var(--interactive-shadow);
    
    /* Hover state */
    --sidebar-hover-bg: var(--surface-hover);
    --sidebar-hover-border: var(--border-default);
    
    /* Badge border */
    --sidebar-badge-border-color: var(--border-badge);
    
    /* ===== Config Layout ===== */
    --config-max-width: var(--page-width-wide, 1400px);
    --config-padding: 120px;
    --config-padding-mobile: 20px;

    /* ===== Item Editor Shell ===== */
    --item-editor-max-width: var(--page-width-narrow, 960px);

    /* ===== Layout Surface Controls ===== */
    --layout-gap: var(--space-6);
    --layout-bg: var(--surface-page);
    --content-bg: transparent;
    --content-max-width: none;
    --content-padding: 30px 40px;
    --sidebar-bg: var(--surface-panel);
}

/* ==================== BODY & GENERAL ==================== */
body {
    background-color: var(--surface-page);
    color: var(--color-text);
    font-family: var(--font-sans);
}

/* General spacing and container styles */
.container {
    max-width: var(--page-width-wide, 1400px);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* ==================== NAVBAR STYLES ==================== */
.navbar-custom {
    background-color: var(--color-primary-bg) !important;
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid var(--color-border);
}

.navbar-custom .navbar-brand {
    color: var(--color-text) !important;
    font-weight: 700;
    font-size: 1.3rem;
    transition: color 0.2s;
}

.navbar-custom .navbar-brand:hover {
    color: var(--color-primary) !important;
}

.navbar-custom .navbar-brand i {
    color: var(--color-primary);
}

.navbar-custom .nav-link {
    color: var(--color-text-light) !important;
    font-weight: 500;
    transition: all 0.2s;
    padding: var(--space-sm) var(--space-md) !important;
    margin: 0 var(--space-xs);
}

.navbar-custom .nav-link:hover {
    color: var(--color-primary) !important;
    background-color: var(--color-primary-subtle);
    border-radius: 0.375rem;
}

.navbar-custom .nav-link.active {
    color: var(--color-primary) !important;
    background-color: var(--color-primary-subtle);
    border-radius: 0.375rem;
    font-weight: 600;
}

.navbar-custom .navbar-text {
    color: var(--color-text-muted) !important;
}

.navbar-custom .dropdown-menu {
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    border-radius: 0.5rem;
}

.navbar-custom .dropdown-item:hover {
    background-color: var(--color-primary-subtle);
    color: var(--color-primary);
}

/* ==================== CARD STYLES ==================== */
.card {
    margin-bottom: var(--space-lg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    transition: box-shadow 0.2s;
}

/* Bootstrap's .shadow-sm utility (flat 2px shadow) must render the same
   elevation as the token-based cards, otherwise pages mixing
   "card shadow-sm" markup with .c-card look visibly flatter. */
.shadow-sm {
    box-shadow: var(--elevation-sm) !important;
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    background-color: var(--color-bg-light);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-md);
}

.card-header.bg-primary {
    background-color: var(--color-primary) !important;
    color: white !important;
}

.card-header.bg-success {
    background-color: var(--color-success) !important;
    color: white !important;
}

.card-header.bg-warning {
    background-color: var(--color-warning) !important;
    color: var(--color-text) !important;
}

.card-header.bg-info {
    background-color: var(--color-info) !important;
    color: white !important;
}

/* ==================== BUTTON STYLES ==================== */
.btn {
    font-weight: 500;
    padding: var(--space-sm) var(--space-md);
    border-radius: 0.375rem;
    transition: all 0.2s;
    border: none;
}

.btn-sm {
    padding: var(--space-xs) var(--space-sm);
}

.btn-primary {
    background-color: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary) !important;
}

.btn-primary:hover {
    background-color: var(--color-primary-light) !important;
    border-color: var(--color-primary-light) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-primary:active {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

.btn-success {
    background-color: var(--color-success) !important;
    color: white !important;
    border-color: var(--color-success) !important;
}

.btn-success:hover {
    background-color: var(--color-primary-light) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-warning {
    background-color: var(--color-warning) !important;
    color: var(--color-text) !important;
    border-color: var(--color-warning) !important;
}

.btn-warning:hover {
    background-color: var(--warning-200) !important;
    transform: translateY(-1px);
}

.btn-danger {
    background-color: var(--color-danger) !important;
    color: white !important;
    border-color: var(--color-danger) !important;
}

.btn-danger:hover {
    background-color: var(--danger-500) !important;
    transform: translateY(-1px);
}

.btn-info {
    background-color: var(--color-info) !important;
    color: white !important;
    border-color: var(--color-info) !important;
}

.btn-outline-primary {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--color-primary) !important;
    color: white !important;
}

.btn-outline-success {
    color: var(--color-success) !important;
    border-color: var(--color-success) !important;
}

.btn-outline-success:hover {
    background-color: var(--color-success) !important;
    color: white !important;
}

/* ==================== FORM STYLES ==================== */
.form-label {
    font-weight: 500;
    margin-bottom: var(--space-sm);
    color: var(--color-text);
}

.form-control {
    border-radius: 0.375rem;
    border: 1px solid var(--color-border);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem var(--brand-muted-tint-25);
}

.form-switch .form-check-input {
    cursor: pointer;
}

.form-switch .form-check-input:focus {
    border-color: var(--switch-active-border);
    box-shadow: 0 0 0 0.2rem var(--switch-active-shadow);
}

.form-switch .form-check-input:checked {
    background-color: var(--switch-active-bg);
    border-color: var(--switch-active-border);
}

textarea.form-control {
    min-height: 100px;
}

/* ==================== TABLE STYLES ==================== */
.table {
    margin-bottom: 0;
}

.table th {
    background-color: var(--color-bg-light);
    font-weight: 600;
    color: var(--color-text);
    border-bottom: 2px solid var(--color-border);
}

/* ==================== ALERT STYLES ==================== */
.alert {
    border-radius: 0.5rem;
    margin-bottom: var(--space-md);
    border: 1px solid;
}

.alert-success {
    background-color: var(--success-100);
    border-color: var(--color-success);
    color: var(--success-700);
}

.alert-info {
    background-color: var(--accent-cyan-100);
    border-color: var(--color-info);
    color: var(--accent-cyan-700);
}

.alert-warning {
    background-color: var(--warning-100);
    border-color: var(--color-warning);
    color: var(--warning-700);
}

.alert-danger {
    background-color: var(--danger-100);
    border-color: var(--color-danger);
    color: var(--danger-700);
}

/* ==================== BADGE STYLES ==================== */
.badge.bg-primary {
    background-color: var(--color-primary) !important;
}

.badge.bg-success {
    background-color: var(--color-success) !important;
}

.badge.bg-warning {
    background-color: var(--color-warning) !important;
    color: var(--color-text) !important;
}

.badge.bg-info {
    background-color: var(--color-info) !important;
}

/* ==================== PROGRESS BAR ==================== */
.progress {
    background-color: var(--color-bg-light);
    border-radius: 0.5rem;
    height: 1rem;
}

.progress-bar {
    background-color: var(--color-primary) !important;
    transition: width 0.3s ease;
}

.progress-bar.bg-success {
    background-color: var(--color-success) !important;
}

/* ==================== MODAL STYLES ==================== */
.modal-header {
    background-color: var(--color-bg-light);
    border-bottom: 1px solid var(--color-border);
}

.modal-footer {
    background-color: var(--color-bg-light);
    border-top: 1px solid var(--color-border);
}

/* ==================== FOOTER ==================== */
footer {
    background-color: var(--color-bg-light);
    color: var(--color-text-muted);
    border-top: 1px solid var(--color-border);
}

/* ==================== BREADCRUMB ==================== */
.breadcrumb {
    background-color: transparent;
}

.breadcrumb-item a {
    color: var(--color-primary);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--color-primary-dark);
    text-decoration: none;
}

/* ==================== NAVBAR TOGGLER (Mobile) ==================== */
.navbar-custom .navbar-toggler {
    border-color: var(--color-border);
    padding: var(--space-sm);
}

.navbar-custom .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem var(--success-tint-20);
}

.navbar-custom .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%232c3e50' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ==================== BORDER STYLES ==================== */
.border-primary {
    border-color: var(--color-primary) !important;
}

/* ==================== LIST GROUP ==================== */
.list-group-item {
    border-color: var(--color-border);
}

.list-group-item:hover {
    background-color: var(--brand-muted-tint-05);
}

/* ==================== LINK COLORS ==================== */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--color-primary-dark);
    text-decoration: none;
}

/* Project name links on home page */
.project-name-link {
    color: var(--color-text) !important;
    font-weight: 600;
    transition: color 0.2s;
}

.project-name-link:hover {
    color: var(--color-primary) !important;
    text-decoration: none !important;
}

/* ==================== HOME PAGE HERO ==================== */
.hero-gradient {
    background: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-gradient-mid) 50%, var(--color-gradient-end) 100%) !important;
    border-radius: 1rem !important;
    padding: var(--space-3xl) var(--space-xl) !important;
}

/* ==================== LOGO STYLES ==================== */
.navbar-brand-logo {
    height: 40px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

/* ==================== CHOICERY AUTH PAGES ==================== */
/* Hide global topbar on auth pages — the page itself carries the brand */
body.auth-page .header-modern {
    display: none;
}

body.auth-page {
    background: #f6f6f3;
}

body.auth-page main.container {
    max-width: 1080px;
    padding: 24px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.choicery-auth {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
}

.choicery-auth-brand {
    text-align: center;
    padding: 0;
}

.choicery-auth-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #6e7875;
    margin-bottom: 14px;
}

.choicery-auth-wordmark {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 52px;
    color: #0d1412;
    letter-spacing: -0.06em;
    line-height: 0.95;
    text-transform: lowercase;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 16px;
}

.choicery-auth-wordmark .dot {
    color: var(--accent-teal-500);
}

.choicery-auth-tagline {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #4a544f;
    max-width: 380px;
    margin: 0 auto;
}

/* Card */
.choicery-auth-card {
    background: #ffffff;
    border: 1px solid #e2e4e0;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(13, 20, 18, 0.04),
                0 12px 32px -12px rgba(13, 20, 18, 0.12);
    overflow: hidden;
}

.choicery-auth-card-head {
    padding: 32px 32px 0;
}

.choicery-auth-card-title {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -0.025em;
    color: #0d1412;
    margin: 0;
}

.choicery-auth-card-sub {
    margin: 4px 0 0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #5b625f;
}

.choicery-auth-card-body {
    padding: 22px 32px 32px;
}

/* Notices inside the auth card (e.g. the "confirm your email" warning before sign in).
   The global compatibility.css `.alert { display: flex }` rule otherwise splits the
   message and its action button into two columns, and `.btn { border: none }` strips
   the button outline so it reads as plain text. Stack the notice and give the action a
   real button look. Scoped to the auth card so app-wide alert styling is untouched. */
.choicery-auth-card-body .alert {
    display: block;
}

.choicery-auth-card-body .alert .btn {
    display: inline-block;
    margin-top: 2px;
    padding: 8px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #15201c;
    background: #ffffff;
    border: 1.5px solid #c9d1ce;
    border-radius: 5px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.choicery-auth-card-body .alert .btn:hover {
    border-color: var(--accent-teal-500);
    background: #f8fbfa;
}

.choicery-auth-form {
    display: grid;
    gap: 18px;
}

.choicery-auth-field {
    display: grid;
    gap: 6px;
}

.choicery-auth-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #2a302e;
}

/* Label on the left, a related link (e.g. "Forgot password?") on the right. */
.choicery-auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.choicery-auth-input {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #0d1412;
    background: #ffffff;
    border: 1.5px solid #94a3b8;
    border-radius: 10px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}

.choicery-auth-input:focus-visible {
    outline: none;
}

/* Browser autofill paints saved credentials pale yellow. Keep the field white;
   the large inset shadow is the only way to cover the autofill background.
   The focused case must beat the app-wide focus ring in base_layout.css
   (box-shadow !important behind a very specific :is() list), so the
   never-matching :not(#…) adds ID weight and the rule repeats that ring. */
.choicery-auth-input:-webkit-autofill {
    -webkit-text-fill-color: #0d1412;
    box-shadow: 0 0 0 1000px #ffffff inset;
}

.choicery-auth-input:-webkit-autofill:focus:not(#choicery-auth-autofill-guard) {
    box-shadow: 0 0 0 1000px #ffffff inset,
                0 0 0 0.2rem var(--software-control-focus-ring) !important;
}

/* Password field with a "Show" button inside its right edge. */
.choicery-auth-password {
    position: relative;
}

.choicery-auth-password .choicery-auth-input {
    padding-right: 72px;
}

.choicery-auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    min-height: 34px;
    padding: 0 10px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--interactive-color);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.choicery-auth-password-toggle:hover {
    background: #f1f3f2;
}

.choicery-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.choicery-auth-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #2a302e;
    cursor: pointer;
    user-select: none;
}

.choicery-auth-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #0d1412;
    cursor: pointer;
}

.choicery-auth-link {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--interactive-color);
    text-decoration: none;
}

.choicery-auth-link:hover {
    text-decoration: underline;
}

.choicery-auth-oauth {
    display: grid;
    gap: 10px;
}

.choicery-auth-oauth-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 46px;
    padding: 11px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #0d1412;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid #c9cdc9;
    border-radius: 10px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    cursor: pointer;
}

.choicery-auth-oauth-btn:hover {
    color: #0d1412;
    border-color: #8a938f;
    background: #f7f8f7;
}

.choicery-auth-oauth-icon {
    position: absolute;
    left: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.choicery-auth-oauth-icon svg {
    display: block;
}

.choicery-auth-oauth-label {
    display: inline-block;
    text-align: center;
}

.choicery-auth-submit {
    width: 100%;
    min-height: 48px;
    padding: 12px 18px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    background: #0d1412;
    border: 1.5px solid #0d1412;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.05s ease;
    margin-top: 2px;
}

.choicery-auth-submit:hover {
    background: #26302d;
    border-color: #26302d;
}

.choicery-auth-submit:active {
    transform: translateY(1px);
}

.choicery-auth-divider {
    border: 0;
    border-top: 1px solid #e2e4e0;
    opacity: 1;
    margin: 20px 0;
}

/* Inside the form grid the gap already spaces the divider. */
.choicery-auth-form > .choicery-auth-divider {
    margin: 0;
}

/* "or with email" separator between the provider buttons and the form. */
.choicery-auth-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #6b726f;
}

.choicery-auth-or::before,
.choicery-auth-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e4e0;
}

.choicery-auth-hint {
    display: block;
    margin-top: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #6e7875;
}

.choicery-auth-hint a {
    color: var(--interactive-color);
}

.choicery-auth-intro {
    margin: 0 0 18px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #4a544f;
}

.choicery-auth-intro strong {
    color: #15201c;
}

.choicery-auth-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    margin: 0 0 18px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    background: #faf7ee;
    border: 1px solid #f1ede3;
    border-radius: 5px;
}

.choicery-auth-meta-label {
    color: #6e7875;
}

.choicery-auth-meta-value {
    color: #15201c;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.choicery-auth-section {
    margin: 22px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1ede3;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6e7875;
}

.choicery-auth-section:first-of-type {
    margin-top: 0;
}

.choicery-auth-input:disabled {
    background: #faf7ee;
    color: #8a938f;
    cursor: not-allowed;
}

.choicery-auth-choice-group {
    display: grid;
    gap: 10px;
}

.choicery-auth-choice,
.choicery-auth-legal-check {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: start;
    padding: 12px;
    border: 1px solid #f1ede3;
    border-radius: 6px;
    background: #fff;
    font-family: 'Inter', sans-serif;
    color: #2a322f;
}

.choicery-auth-choice input,
.choicery-auth-legal-check input {
    margin-top: 3px;
}

.choicery-auth-choice strong {
    display: block;
    font-size: 13px;
}

.choicery-auth-choice small,
.choicery-auth-legal-check small {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.4;
    color: #6e7875;
}

.choicery-auth-legal-check {
    font-size: 13px;
    line-height: 1.45;
}

.choicery-auth-legal-check a {
    color: var(--interactive-color);
    font-weight: 600;
    text-decoration: none;
}

.choicery-auth-legal-check a:hover {
    text-decoration: underline;
}

.choicery-auth-optional {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 500;
    color: #8a938f;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

.choicery-auth-footer {
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #6e7875;
    margin: 0;
}

.choicery-auth-footer a {
    color: var(--interactive-color);
    text-decoration: none;
    font-weight: 600;
}

.choicery-auth-footer a:hover {
    text-decoration: underline;
}

.app-legal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
    padding: 18px 20px 28px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #6e7875;
}

/* On the auth pages the legal links sit on the page ground, not on the white
   band compatibility.css gives every <footer>. */
body.auth-page .app-legal-footer {
    background: transparent;
    border-top: 0;
    box-shadow: none;
}

.app-legal-footer a {
    color: #6e7875;
    text-decoration: none;
}

.app-legal-footer a:hover {
    color: var(--accent-teal-600);
    text-decoration: underline;
}

/* Mobile tweaks */
@media (max-width: 540px) {
    body.auth-page-wide main.container {
        padding: 20px 16px;
        align-items: flex-start;
    }

    .choicery-auth {
        gap: 22px;
        padding-top: 16px;
    }

    .choicery-auth-wordmark {
        font-size: 42px;
    }

    .choicery-auth-card-body,
    .choicery-auth-card-head {
        padding-left: 20px;
        padding-right: 20px;
    }

    .choicery-auth-card-head {
        padding-top: 24px;
    }

    /* 16px keeps iOS from zooming into the field on tap. */
    .choicery-auth-input {
        font-size: 16px;
    }
}

/* Legacy login logo class (still used by other auth templates until migrated) */
.login-logo {
    max-width: 220px;
    height: auto;
    margin-bottom: 0.75rem;
}

/* ==================== TABLE IMPROVEMENTS ==================== */
.table-hover tbody tr {
    transition: background-color 0.2s;
}

.table-hover tbody tr:hover {
    background-color: var(--color-primary-subtle);
}

/* ==================== DISABLED ELEMENTS ==================== */
.btn:disabled, .btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

a.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ==================== SMOOTH TRANSITIONS ==================== */
* {
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

button, a {
    transition: all 0.2s ease;
}

/* Remove transition for progress bars */
.progress-bar {
    transition: width 0.6s ease !important;
}

/* ==================== TEXT CONTENT (Rich Text) ==================== */
/* Ensure images in text content respect their inline styles */
.text-content img {
    max-width: 100%; /* Prevent overflow but respect inline max-width */
    height: auto;
}

.rich-inserted-image,
.text-content .rich-inserted-image,
.rich-editor .rich-inserted-image,
.mini-rich-editor .rich-inserted-image {
    max-width: 100%;
    height: auto;
}

.rich-image-block {
    clear: both;
    margin: 0.75rem 0;
}

.rich-image-block .rich-inserted-image {
    margin-top: 0;
    margin-bottom: 0;
}

.rich-image-align-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.rich-image-align-inline {
    display: inline-block;
    margin: 0 0.25rem;
    vertical-align: middle;
}

.rich-image-align-left {
    float: left;
    margin-right: 15px;
    margin-bottom: 10px;
}

.rich-image-align-right {
    float: right;
    margin-left: 15px;
    margin-bottom: 10px;
}

.rich-image-style-rounded {
    border-radius: 8px;
}

.rich-image-style-shadow {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.rich-image-style-border {
    border: 2px solid #ddd;
    padding: 5px;
}

/* Don't override inline styles on images */
.text-content img[style] {
    max-width: none; /* Allow inline max-width to take precedence */
}

/* ==================== UNIFIED SIDEBAR NAVIGATION ==================== */
/* Reusable sidebar component styles - used across Settings, Data, etc. */

/* Page Title Badge - the bordered box at the top of sidebar */
.sidebar-page-badge {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2);
    line-height: 1.2;
    background: var(--surface-panel);
    border: 1px solid var(--sidebar-badge-border-color);
    border-radius: var(--radius-sm);
    color: var(--text-default);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-2);
}

.sidebar-page-badge i {
    margin-right: 0;
}

/* Sidebar Navigation Container */
.nav-sidebar {
    gap: var(--space-xs);
}

/* Force white background on sidebar card */
.sidebar-container .card {
    background: var(--surface-panel) !important;
    margin-bottom: 0;
}

.sidebar-container .card-body {
    background: var(--surface-panel) !important;
}

.nav-sidebar .nav-link {
    color: var(--text-default);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    transition: all 0.2s ease;
    border: 1px solid transparent;
    background: transparent;  /* Explicit background for button elements */
}

.nav-sidebar .nav-link i {
    font-size: 1rem;
    width: 18px;
    text-align: center;
}

.nav-sidebar .nav-link:hover:not(.disabled) {
    background-color: var(--sidebar-hover-bg);
    border-color: var(--sidebar-hover-border);
    transform: translateX(2px);
}

.nav-sidebar .nav-link.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text, var(--sidebar-active-color));
    border-color: transparent;
    box-shadow: var(--sidebar-active-shadow);
}

/* Keep the active item readable when the cursor is still on it after a click.
   Without this override, .nav-link:hover wins on specificity (one extra
   pseudo-class), turning the background grey while the text stays white. */
.nav-sidebar .nav-link.active:hover:not(.disabled),
.nav-sidebar .nav-link.active:focus:not(.disabled) {
    background: var(--sidebar-active-bg-hover, var(--sidebar-active-bg));
    color: var(--sidebar-active-text, var(--sidebar-active-color));
    border-color: transparent;
    transform: none;
}

.nav-sidebar .nav-link.active i {
    color: var(--sidebar-active-text, var(--sidebar-active-color));
}

.nav-sidebar .nav-link.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    background: transparent;
    border-color: transparent;
    color: var(--text-soft, #94a3b8);
}

.nav-sidebar .nav-link .badge {
    margin-left: auto;
    font-size: 0.7rem;
}

/* Danger variant — used for destructive destinations like the Bin.
   Active state uses a red-tinted surface so the red label keeps WCAG-AA contrast
   (red-on-blue from the default active bg would fail ~2.3:1). */
.nav-sidebar .nav-link.nav-danger,
.nav-sidebar .nav-link.nav-danger i {
    color: var(--danger-600);
}

.nav-sidebar .nav-link.nav-danger:hover:not(.disabled),
.nav-sidebar .nav-link.nav-danger:hover:not(.disabled) i {
    color: var(--danger-600);
}

.nav-sidebar .nav-link.nav-danger.active,
.nav-sidebar .nav-link.nav-danger.active i {
    background: var(--danger-50);
    color: var(--danger-700);
    border-color: transparent;
    box-shadow: none;
}

.nav-sidebar .nav-link.nav-danger.active:hover:not(.disabled),
.nav-sidebar .nav-link.nav-danger.active:focus:not(.disabled) {
    background: var(--danger-100);
    color: var(--danger-700);
    border-color: transparent;
    transform: none;
}

.nav-sidebar .nav-link.nav-danger.active:hover:not(.disabled) i,
.nav-sidebar .nav-link.nav-danger.active:focus:not(.disabled) i {
    color: var(--danger-700);
}

/* Defer to disabled-grey when nav-danger is also disabled */
.nav-sidebar .nav-link.nav-danger.disabled,
.nav-sidebar .nav-link.nav-danger.disabled i {
    color: var(--text-soft, #94a3b8);
}

/* Orange variant: HB preference utilities, matching the survey-flow editor's
   conjoint item types (.item-btn.conjoint-item tints its icon orange). */
.nav-sidebar .nav-link.nav-orange,
.nav-sidebar .nav-link.nav-orange i {
    color: var(--accent-orange-700);
}

.nav-sidebar .nav-link.nav-orange i {
    color: var(--accent-orange-500);
}

.nav-sidebar .nav-link.nav-orange:hover:not(.disabled),
.nav-sidebar .nav-link.nav-orange:hover:not(.disabled) i {
    color: var(--accent-orange-700);
}

.nav-sidebar .nav-link.nav-orange.active,
.nav-sidebar .nav-link.nav-orange.active:hover:not(.disabled),
.nav-sidebar .nav-link.nav-orange.active:focus:not(.disabled) {
    background: var(--accent-orange-50);
    color: var(--accent-orange-700);
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.nav-sidebar .nav-link.nav-orange.active i {
    color: var(--accent-orange-600);
}

.nav-sidebar .nav-link.nav-orange.disabled,
.nav-sidebar .nav-link.nav-orange.disabled i {
    color: var(--text-soft, #94a3b8);
}

/* Blue variant — used for the Market Research destination so it matches
   the survey-flow editor's market-research item type (.item-btn.market-research-item
   tints its icon var(--info-500)). */
.nav-sidebar .nav-link.nav-teal,
.nav-sidebar .nav-link.nav-teal i {
    color: var(--info-500);
}

.nav-sidebar .nav-link.nav-teal:hover:not(.disabled),
.nav-sidebar .nav-link.nav-teal:hover:not(.disabled) i {
    color: var(--info-700);
}

.nav-sidebar .nav-link.nav-teal.active,
.nav-sidebar .nav-link.nav-teal.active i {
    background: var(--info-50);
    color: var(--info-700);
    border-color: transparent;
    box-shadow: none;
}

.nav-sidebar .nav-link.nav-teal.active:hover:not(.disabled),
.nav-sidebar .nav-link.nav-teal.active:focus:not(.disabled) {
    background: var(--info-50);
    color: var(--info-700);
    border-color: transparent;
    transform: none;
}

.nav-sidebar .nav-link.nav-teal.active:hover:not(.disabled) i,
.nav-sidebar .nav-link.nav-teal.active:focus:not(.disabled) i {
    color: var(--info-700);
}

/* Defer to disabled-grey when nav-teal is also disabled */
.nav-sidebar .nav-link.nav-teal.disabled,
.nav-sidebar .nav-link.nav-teal.disabled i {
    color: var(--text-soft, #94a3b8);
}

/* Section Labels (uppercase category headers) */
.nav-section-label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-soft);
    padding: var(--space-xs) var(--space-md) var(--space-xs);
    margin-top: 0;
}

.nav-section-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}

.nav-section-chevron {
    font-size: 0.6rem;
    transition: transform 0.2s ease;
    opacity: 0.5;
}

.nav-section-toggle[aria-expanded="false"] .nav-section-chevron {
    transform: rotate(-90deg);
}

.nav-sidebar .nav-optional {
    transition: opacity 0.15s ease, max-height 0.2s ease;
    overflow: hidden;
    max-height: 50px;
}

.nav-sidebar.nav-optional-hidden .nav-optional {
    display: none;
}

/* Editor guide link: opens the static guide in a new tab. */
.nav-sidebar .nav-guide-link {
    display: flex;
    align-items: center;
}

.nav-sidebar .nav-guide-link-ext {
    font-size: 0.7rem;
    opacity: 0.55;
}

/* Section Dividers */
.nav-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-default), transparent);
    margin: var(--space-xs) 0;
}

/* Compact Stats Row - single line summary */
.sidebar-stats-compact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--surface-panel-subtle);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: var(--space-sm);
}

.sidebar-stats-compact .stat-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.sidebar-stats-compact .stat-value {
    font-weight: var(--font-weight-semibold);
    color: var(--gray-700);
}

.sidebar-stats-compact .stat-divider {
    color: var(--border-strong);
}

/* Responsive: Hide sidebar on mobile */
@media (max-width: 991px) {
    .nav-section-label,
    .nav-divider {
        display: none;
    }
}

/* ==================== SIDEBAR PAGE LAYOUT ==================== */
/* Unified layout system for all pages with sidebar navigation.
   Use these classes to ensure consistent appearance across Settings, Data, etc. */

/* Main layout container - creates the sidebar + content flex layout */
.sidebar-layout {
    display: flex;
    min-height: calc(100vh - 120px);
    background: var(--layout-bg);
    margin: -1.5rem;
    margin-top: -1rem;
    gap: var(--layout-gap);
}

.sidebar-layout.sidebar-right {
    flex-direction: row-reverse;
}

/* Sidebar container - fixed width, sticky, with consistent styling */
.sidebar-container {
    width: var(--sidebar-width-left, var(--sidebar-width, 220px));
    min-width: var(--sidebar-width-left, var(--sidebar-width, 220px));
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border-default);
    padding: var(--space-md);
    height: calc(100vh - var(--header-height, 64px));
    position: sticky;
    top: var(--header-height, 64px);
    overflow-y: auto;
}

.sidebar-layout.sidebar-right .sidebar-container {
    width: var(--sidebar-width-right, var(--sidebar-width, 220px));
    min-width: var(--sidebar-width-right, var(--sidebar-width, 220px));
    border-right: none;
    border-left: 1px solid var(--border-default);
}

/* Main content area */
.sidebar-main {
    flex: 1;
    padding: var(--content-padding, 30px 40px);
    overflow-y: auto;
    background: var(--content-bg, transparent);
    max-width: var(--content-max-width, none);
    width: 100%;
    margin: 0 auto;
}

/* Scrollbar styling for sidebar */
.sidebar-container::-webkit-scrollbar {
    width: 6px;
}

.sidebar-container::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 3px;
}

/* Responsive: Stack layout on tablet/mobile */
@media (max-width: 1024px) {
    .sidebar-layout {
        flex-direction: column;
    }

    .sidebar-container {
        width: 100%;
        min-width: 100%;
        height: auto;
        position: relative;
        top: 0;
    }

    .sidebar-main {
        padding: 20px;
    }
}

/* ==================== SIDEBAR LAYOUT VARIANTS ==================== */

/* Variant: With preview panel (3-column layout for Settings page) */
.sidebar-layout-with-preview {
    display: flex;
    min-height: calc(100vh - 120px);
    background: var(--layout-bg);
    margin: -1.5rem;
    margin-top: -1rem;
}

.sidebar-layout-with-preview .sidebar-container {
    width: var(--sidebar-width, 220px);
    min-width: var(--sidebar-width, 220px);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border-default);
    padding: var(--space-md);
    height: calc(100vh - var(--header-height, 64px));
    position: sticky;
    top: var(--header-height, 64px);
    overflow-y: auto;
}

.sidebar-layout-with-preview .sidebar-main {
    flex: 1;
    min-width: 0;
    max-width: 720px;
    padding: 30px 40px;
}

.sidebar-layout-with-preview .sidebar-preview {
    width: 420px;
    min-width: 380px;
    position: sticky;
    top: var(--header-height, 64px);
    height: fit-content;
    max-height: calc(100vh - var(--header-height, 64px) - 20px);
    overflow-y: auto;
    padding: 30px 40px 30px 0;
}

/* Responsive for 3-column layout */
@media (max-width: 1400px) {
    .sidebar-layout-with-preview .sidebar-preview {
        width: 350px;
        min-width: 320px;
    }
}

@media (max-width: 1200px) {
    .sidebar-layout-with-preview {
        flex-wrap: wrap;
    }
    .sidebar-layout-with-preview .sidebar-preview {
        width: 100%;
        min-width: 100%;
        position: static;
        order: -1;
        max-height: 400px;
        margin-bottom: var(--space-md);
    }
    .sidebar-layout-with-preview .sidebar-main {
        max-width: none;
    }
}

@media (max-width: 991px) {
    .sidebar-layout-with-preview .sidebar-container {
        width: 100%;
        min-width: 100%;
        height: auto;
        position: static;
        max-height: none;
    }
    .sidebar-layout-with-preview .nav-sidebar {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 0.25rem;
    }
}
/* ==================== CONFIG PAGE LAYOUT ==================== */
/* Used by CBC Traditional, CBC Shop, DR-CBC, BW-CBC, MaxDiff config pages */
/* Left spacing matches Survey Flow (120px) for consistency */

.config-container {
    max-width: var(--page-width-wide, 1400px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--config-padding, 120px);
    padding-right: var(--config-padding, 120px);
}

.config-layout {
    display: flex;
    gap: var(--layout-gap);
}

.config-sidebar {
    flex: 0 0 var(--sidebar-width, 220px);
    position: sticky;
    top: 80px;
    height: fit-content;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.config-main {
    flex: 1;
    min-width: 0;
}

/* Config Type Badge - colored border preserved per type */
.config-type-badge {
    text-align: center;
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-panel);
    border: 2px solid var(--sidebar-badge-border-color, var(--border-badge));
    border-radius: var(--radius-sm);
    color: var(--text-default);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* Config Tab Content */
.config-tab-content {
    background: var(--surface-panel);
    padding: var(--space-5);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
}

.config-tab-content .tab-pane {
    background: var(--surface-panel);
    padding: 0;
}

/* Config page responsive */
@media (max-width: 992px) {
    .config-container {
        padding-left: var(--config-padding-mobile, 20px);
        padding-right: var(--config-padding-mobile, 20px);
    }
    .config-layout {
        flex-direction: column;
    }
    .config-sidebar {
        position: static;
        flex: none;
    }
}

/* ==================== APP LAYOUT ==================== */
/* Full-screen app-style layouts for Analysis Hub, Image Manager, Projects List, HB Analysis */
/* Edge-to-edge design with consistent sidebar styling */

.app-layout {
    display: flex;
    min-height: calc(100vh - var(--header-height, 64px));
    background: var(--layout-bg);
    /* Negative margins to go edge-to-edge */
    margin: -1.5rem;
    margin-top: -1rem;
}

.app-layout-contained {
    display: flex;
    gap: var(--layout-gap);
    min-height: calc(100vh - 200px);
}

/* App Sidebar - left sidebar for app layouts */
.app-sidebar {
    width: var(--sidebar-width-app, 280px);
    min-width: var(--sidebar-width-app, 280px);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border-default);
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height, 64px));
    position: sticky;
    top: var(--header-height, 64px);
}

.app-sidebar-narrow {
    width: var(--sidebar-width-narrow, 240px);
    min-width: var(--sidebar-width-narrow, 240px);
}

.app-sidebar-wide {
    width: var(--sidebar-width-wide, 340px);
    min-width: var(--sidebar-width-wide, 340px);
}

/* Sidebar Header */
.app-sidebar-header {
    padding: var(--space-5);
    border-bottom: 1px solid var(--border-default);
    background: var(--sidebar-bg);
}

.app-sidebar-header h2 {
    font-size: 1.1rem;
    font-weight: var(--font-weight-bold);
    margin: 0;
    color: var(--text-strong);
}

.app-sidebar-header .project-name {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: var(--space-1);
}

/* Sidebar Navigation */
.app-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

.app-nav-section {
    margin-bottom: var(--space-5);
}

.app-nav-section-title {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-soft);
    margin-bottom: var(--space-2);
    padding: 0 10px;
}

.app-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px var(--space-3);
    border-radius: var(--radius-md);
    color: var(--text-default);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.15s;
    cursor: pointer;
    margin-bottom: var(--space-1);
}

.app-nav-item:hover {
    background: var(--sidebar-hover-bg);
    color: var(--text-strong);
}

.app-nav-item.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text, var(--sidebar-active-color));
    font-weight: var(--font-weight-medium);
    box-shadow: var(--sidebar-active-shadow);
    border-radius: var(--radius-sm);
}

.app-nav-item.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.app-nav-item i {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.app-nav-item .badge {
    margin-left: auto;
    font-size: 0.7rem;
}

/* Sidebar Stats Footer */
.app-sidebar-stats {
    padding: 15px var(--space-5);
    border-top: 1px solid var(--border-default);
    background: var(--surface-panel-subtle);
}

.app-sidebar-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.85rem;
}

.app-sidebar-stat .label { color: var(--text-muted); }
.app-sidebar-stat .value { font-weight: var(--font-weight-semibold); }
.app-sidebar-stat .value.success { color: var(--success-500); }
.app-sidebar-stat .value.warning { color: var(--warning-500); }
.app-sidebar-stat .value.primary { color: var(--interactive-color); }

/* App Main Content */
.app-main {
    flex: 1;
    padding: 30px 40px;
    overflow-y: auto;
}

/* App Search in sidebar */
.app-sidebar-search {
    padding: 15px var(--space-5);
    border-bottom: 1px solid var(--border-default);
}

.app-sidebar-search input {
    width: 100%;
    padding: 10px 15px 10px 40px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    background: var(--surface-panel-subtle) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat 12px center;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.app-sidebar-search input:focus {
    outline: none;
    border-color: var(--interactive-color);
    box-shadow: 0 0 0 3px var(--focus-ring-color);
}

/* Sidebar Actions */
.app-sidebar-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: 15px;
}

.app-sidebar-actions .btn {
    flex: 1;
    font-size: 0.85rem;
    padding: 8px 12px;
}

/* App Detail Sidebar (right side) */
.app-detail-sidebar {
    width: 280px;
    min-width: 280px;
    background: var(--surface-panel);
    border-left: 1px solid var(--border-default);
    padding: var(--space-md);
    height: calc(100vh - var(--header-height, 64px));
    position: sticky;
    top: var(--header-height, 64px);
    overflow-y: auto;
    display: none;
}

.app-detail-sidebar.active {
    display: block;
}

/* App Layout Responsive */
@media (max-width: 1200px) {
    .app-detail-sidebar {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .app-layout {
        flex-direction: column;
    }
    .app-sidebar,
    .app-sidebar-narrow,
    .app-sidebar-wide {
        width: 100%;
        min-width: 100%;
        height: auto;
        position: relative;
        top: 0;
    }
    .app-main {
        padding: 20px;
    }
}

@media (max-width: 992px) {
    .app-sidebar {
        display: none;
    }
    .app-sidebar-narrow {
        display: none;
    }
}

/* Project switch confirmation modal */
.switch-project-modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--overlay-scrim);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: switchProjectFadeIn 0.15s ease-out;
}

@keyframes switchProjectFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.switch-project-modal {
    background: var(--surface-panel);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    max-width: 400px;
    width: 90%;
    box-shadow: var(--elevation-xl);
    animation: switchProjectSlideUp 0.2s ease-out;
    text-align: center;
}

@keyframes switchProjectSlideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.switch-project-modal-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--accent-teal-50) 0%, var(--accent-teal-100) 100%);
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-5);
}

.switch-project-modal-icon i {
    font-size: 24px;
    color: var(--accent-teal-600);
}

.switch-project-modal-title {
    font-size: var(--font-size-xl-tight);
    font-weight: var(--font-weight-semibold);
    color: var(--text-strong);
    margin: 0 0 var(--space-6);
}

.switch-project-modal-projects {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-bottom: var(--space-7);
}

.switch-project-from,
.switch-project-to {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 120px;
}

.switch-project-label {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.switch-project-name {
    font-weight: var(--font-weight-semibold);
    color: var(--text-default);
    font-size: var(--font-size-sm);
    word-break: break-word;
}

.switch-project-arrow {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    margin-top: calc(var(--font-size-xs) + var(--space-1));
    color: var(--accent-teal-700);
    background: var(--accent-teal-50);
    border: 1px solid var(--accent-teal-200);
    border-radius: var(--radius-pill);
    font-size: 1.15rem;
    line-height: 1;
}

.switch-project-modal-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
}

.switch-project-btn {
    padding: 10px var(--space-6);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, transform 0.15s;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.switch-project-btn-cancel {
    background: var(--button-secondary-bg-hover);
    color: var(--button-secondary-text);
}

.switch-project-btn-cancel:hover {
    background: var(--surface-panel-soft);
}

.switch-project-btn-confirm {
    background: var(--button-accent-bg);
    color: var(--button-accent-text);
}

.switch-project-btn-confirm:hover {
    background: var(--button-accent-bg-hover);
    transform: translateY(-1px);
}

/* Compact variant: icon + question on the left, actions in a footer bar */
.switch-project-modal--compact {
    max-width: 460px;
    padding: 0;
    overflow: hidden;
    text-align: left;
    border-radius: var(--radius-lg);
}

.switch-project-compact-body {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) var(--space-5);
}

.switch-project-compact-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--accent-teal-50);
    color: var(--accent-teal-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.switch-project-compact-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding-top: 2px;
}

.switch-project-compact-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

.switch-project-compact-copy {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.55;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.switch-project-compact-copy strong {
    font-weight: var(--font-weight-semibold);
    color: var(--text-default);
}

.switch-project-compact-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px var(--space-6);
    background: var(--gray-50);
    border-top: 1px solid var(--border-default);
}

.switch-project-modal--compact .switch-project-btn {
    height: 40px;
    padding: 0 var(--space-4);
}

.switch-project-modal--compact .switch-project-btn-cancel {
    background: var(--button-secondary-bg);
    border: 1px solid var(--button-secondary-border);
}

.switch-project-modal--compact .switch-project-btn-cancel:hover {
    background: var(--button-secondary-bg-hover);
    border-color: var(--button-secondary-border-hover);
}

/* Darker teal keeps white button text above 4.5:1 */
.switch-project-modal--compact .switch-project-btn-confirm {
    background: var(--accent-teal-600);
    font-weight: var(--font-weight-semibold);
}

.switch-project-modal--compact .switch-project-btn-confirm:hover {
    background: var(--accent-teal-700);
    transform: none;
}
/* Autosave status */
.autosave-spin {
    animation: autosave-spin 1s linear infinite;
}

@keyframes autosave-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#autosave-status {
    transition: all 0.2s ease;
}

.autosave-retry {
    cursor: pointer;
}

/* Runtime template list controls */
.template-detail-list {
    font-size: 12px;
    line-height: 1.8;
}

.template-detail-badges {
    font-size: 11px;
}

.template-detail-description,
.template-detail-chevron,
.template-action-sm {
    font-size: 12px;
}

.template-detail-title-row {
    min-width: 0;
}

.template-detail-chevron {
    cursor: pointer;
    transition: transform 0.15s;
}

.template-detail-spacer {
    display: inline-block;
    flex: 0 0 12px;
    width: 12px;
}

.template-detail-name {
    font-size: 13px;
}

/* Runtime fixed-task modal controls */
.fixed-task-modal .fixed-task-alt-header.fixed-task-alt-header-compact {
    min-height: 28px;
}

.fixed-task-alt-heading {
    font-size: 0.78rem;
    line-height: 1;
}

.fixed-task-randomize-btn {
    font-size: 0.72rem;
    line-height: 1;
}

.fixed-task-compact-label {
    font-size: 0.7rem;
    line-height: 1;
}

.fixed-task-modal .fixed-task-level.fixed-task-level-compact {
    height: 26px;
    min-height: 26px;
    padding: 0.1rem 0.35rem;
    font-size: 0.78rem;
}

/* Publish controls runtime fragments */
.publish-status-spinner {
    position: relative;
    top: -2px;
}

.pub-alert--compact {
    margin-bottom: 0;
}

.pub-change-details {
    cursor: pointer;
    width: 100%;
}

.pub-change-summary {
    align-items: center;
    display: flex;
    gap: 6px;
    user-select: none;
}

.pub-change-chevron {
    font-size: 0.7rem;
    margin-left: auto;
    opacity: 0.6;
}

.pub-change-list {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    margin-top: 8px;
    max-height: 160px;
    overflow-y: auto;
    padding: 6px;
}

.pub-change-row {
    align-items: center;
    display: flex;
    font-size: 0.8rem;
    gap: 6px;
    padding: 4px 6px;
}

.publish-active-warning {
    align-items: flex-start;
    display: flex;
    gap: 10px;
}

.publish-active-warning-icon {
    font-size: 1.2rem;
    margin-top: 2px;
}

.publish-active-warning-body {
    font-size: 0.9rem;
    margin: 8px 0 0;
}

.publish-active-warning-note {
    font-size: 0.8rem;
    margin: 4px 0 0;
    opacity: 0.8;
}

.publish-warning-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.publish-warning-message {
    margin: 0 0 12px;
}

.publish-warning-item {
    background: var(--warning-50);
    border: 1px solid var(--warning-200);
    border-radius: 6px;
    margin-bottom: 6px;
    padding: 8px 12px;
}

.publish-warning-item--inline {
    align-items: baseline;
    display: flex;
    gap: 10px;
}

.publish-warning-item-spacious {
    padding: 10px 12px;
}

.publish-warning-type {
    background: var(--warning-100);
    border-radius: 4px;
    color: var(--warning-700);
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    text-transform: uppercase;
}

.publish-warning-name,
.publish-warning-owner {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    word-break: break-word;
}

.publish-warning-name {
    color: var(--text-strong);
    flex: 1 1 auto;
    font-weight: 600;
}

.publish-warning-count,
.publish-warning-reason {
    color: var(--warning-700);
    font-size: 12px;
}

.publish-warning-count {
    flex: 0 0 auto;
}

.publish-warning-heading {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 4px;
}

.publish-warning-category {
    color: var(--warning-700);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.publish-warning-owner {
    color: var(--text-muted);
    font-size: 12px;
}

.publish-warning-reason {
    margin-bottom: 3px;
}

.publish-warning-more {
    color: var(--text-muted);
    margin: 10px 0 0;
}

/* E5: confirmation of a design whose prohibitions fully link attributes. */
.publish-coupling-confirm {
    align-items: flex-start;
    border-top: 1px solid var(--warning-200);
    cursor: pointer;
    display: flex;
    font-weight: 600;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
}

.publish-coupling-confirm .form-check-input {
    flex: 0 0 auto;
    margin-top: 2px;
}

.publish-blocking-issues {
    background: #ffffff;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: var(--text-strong);
    margin-bottom: 16px;
    padding: 14px;
}

.publish-blocking-header {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.publish-blocking-header i {
    color: #dc2626;
    font-size: 1.05rem;
    margin-top: 2px;
}

.publish-blocking-header strong {
    color: #7f1d1d;
    display: block;
    line-height: 1.2;
}

.publish-blocking-header p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 3px 0 0;
}

.publish-empty-page-panel {
    align-items: flex-start;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    display: flex;
    gap: 12px;
    padding: 12px;
}

.publish-empty-page-icon {
    align-items: center;
    background: #ffedd5;
    border-radius: 7px;
    color: #c2410c;
    display: inline-flex;
    flex: 0 0 auto;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.publish-empty-page-content {
    flex: 1 1 auto;
    min-width: 0;
}

.publish-empty-page-title {
    color: #7c2d12;
    font-weight: 700;
    line-height: 1.25;
}

.publish-empty-page-text {
    color: #9a3412;
    font-size: 0.86rem;
    line-height: 1.4;
    margin: 4px 0 10px;
}

.publish-empty-page-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.publish-empty-page-pill {
    align-items: center;
    background: #ffffff;
    border: 1px solid #fdba74;
    border-radius: 999px;
    color: #9a3412;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 600;
    gap: 5px;
    line-height: 1.2;
    padding: 5px 9px;
}

.publish-empty-page-pill-muted {
    color: #b45309;
    font-weight: 500;
}

.publish-empty-page-action {
    align-items: center;
    background: #9a3412;
    border: 1px solid #9a3412;
    border-radius: 7px;
    color: #ffffff;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 600;
    gap: 6px;
    margin-top: 12px;
    padding: 7px 11px;
    text-decoration: none;
}

.publish-empty-page-action:hover {
    background: #7c2d12;
    border-color: #7c2d12;
    color: #ffffff;
    text-decoration: none;
}

.publish-history-user {
    font-size: 0.85rem;
}

.publish-history-notes {
    font-size: 0.9rem;
}

.publish-history-entry-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.pause-warning-list {
    margin-top: 8px;
    text-align: left;
}