/* ================================================
   HENDOSHI - PAGES - THEMES
   ================================================
   
   Purpose: Theme management page styling
   
   Contains:
   - Theme list displays
   - Badge colors for theme status
   - Theme type indicators
   - Theme management admin interface
   
   Dependencies: variables.css, admin-ui-components.css
   Load Order: Load after foundation and admin components
   ================================================ */

/* ===== ADMIN_THEMES_LIST ===== */

/* Theme-specific badge colors */
.badge.bg-active {
    background-color: #28a745;
}
.badge.bg-inactive {
    background-color: #6c757d;
}
.badge.bg-paused {
    background-color: #fd7e14;
}
.badge.bg-scheduled {
    background-color: #17a2b8;
}
.badge.bg-expired {
    background-color: #dc3545;
}

/* Theme type badges */
.theme-type-badge {
    padding: 0.25rem 0.6rem;
    gap: 0.35rem;
    border-radius: 4px;
    background: rgba(255, 45, 161, 0.15);
    color: var(--neon-pink);
    font-weight: 600;
    font-size: 0.75rem;
}

/* Site-wide container widen: increase max-width and keep comfortable side
   padding so pages appear less narrow on large screens. This intentionally
   overrides default Bootstrap container widths to give more horizontal
   space across the site. Adjust values if you want tighter or wider gutters. */
.container {
    width: 100%;
    max-width: 1200px; /* wider desktop container */
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 1400px) {
    .container {
        max-width: 1360px; /* extra breathing room on very large screens */
    }
}

@media (max-width: 1199px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Priority indicator */
.theme-type-badge,
.priority-badge {
    display: inline-flex;
    align-items: center;
}
.priority-badge {
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    font-weight: 700;
    font-size: 0.85rem;
}
.priority-badge.high {
    background: rgba(255, 45, 161, 0.3);
    color: var(--neon-pink);
}
.priority-badge.medium {
    background: rgba(255, 193, 7, 0.3);
    color: #ffc107;
}
.priority-badge.low {
    background: rgba(108, 117, 125, 0.3);
    color: #adb5bd;
}

/* Animation speed/density display */
.config-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.config-pill {
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    background: var(--border-glass-color);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.7rem;
}
.config-pill.strip-enabled {
    background: rgba(255, 45, 161, 0.2);
    color: var(--neon-pink);
}

/* Button text alignment */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ===== ADMIN_THEMES_FORM ===== */

.theme-form-card {
    padding: 2rem;
    border: var(--border-glass);
    border-radius: 12px;
    background: var(--bg-glass-light);
}

.form-check-label {
    color: var(--off-white);
}

.theme-type-preview {
    display: flex;
    align-items: center;
    margin-top: 0.5rem;
    padding: 1rem;
    gap: 1rem;
    border-radius: 8px;
    background: rgba(255, 45, 161, 0.1);
}

.theme-type-preview .emoji {
    font-size: 2rem;
}

.theme-type-preview .description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

/* Custom CSS textarea styling */
.custom-css-editor {
    background: rgba(0, 0, 0, 0.3);
    color: #e0e0e0;
    font-size: 0.85rem;
    font-family: "Fira Code", "Monaco", "Consolas", monospace;
}

/* ===== ADMIN_THEMES_PREVIEW ===== */

/* Preview controls wrapper */
.preview-controls-wrapper {
    display: flex;
    justify-content: center;
}

/* Preview controls */
.preview-controls {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    gap: 1rem;
    border: 1px solid rgba(255, 45, 161, 0.4);
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.95);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.preview-controls .btn {
    border-radius: 50px;
}

.preview-info {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid rgba(255, 45, 161, 0.3);
    border-radius: 8px;
    background: rgba(255, 45, 161, 0.1);
}

.preview-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    gap: 0.5rem;
    border-radius: 20px;
    background: rgba(255, 45, 161, 0.2);
    font-size: 0.85rem;
}

/* Dark themed table for preview */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--off-white, #f5f5f5);
}

.table,
.table th {
    border-color: rgba(255, 255, 255, 0.1);
}

.table th {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

.table td {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
    color: var(--off-white, #f5f5f5);
}

.table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.05);
}

/* Auth card glassmorphism styling */
.auth-card {
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(15px);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

:root.light-mode .auth-card {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.02);
}

@media (max-width: 768px) {
    .auth-card {
        padding: 1rem;
    }
}

/* Per-page bottom spacing for specific auth flows */
#row-password-reset {
    margin-bottom: 3rem !important;
}

#auth-card-verification-sent {
    margin-bottom: 3rem !important;
}

#auth-card-email-confirm {
    margin-bottom: 3rem !important;
}
/* Logout card: reduce bottom spacing like other auth flows */
#auth-card-logout {
    margin-bottom: 0.25rem !important;
}

/* Add explicit bottom spacing on the logout container so the page has
   consistent breathing room like other confirmation/verification flows. */
.auth-page #logout-container {
    margin-bottom: 3rem !important;
    padding-bottom: 1.5rem !important;
}

/* Password reset (from key) - input styling and centering overrides
   Use high specificity to override Bootstrap defaults for this auth page */
.auth-page #password-reset-from-key-container .auth-card {
    text-align: center;
}
.auth-page #password-reset-from-key-container .auth-card .form-control {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.25rem auto 0.5rem auto !important;
    padding: 0.85rem 1rem !important;
    border-radius: 10px !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    background: #ffffff !important;
    box-shadow: 0 8px 18px rgba(255,20,147,0.04) !important;
    font-size: 0.95rem !important;
}
.auth-page #password-reset-from-key-container .auth-card .form-control:focus {
    outline: none !important;
    box-shadow: 0 10px 30px rgba(255,20,147,0.12) !important;
    border-color: var(--neon-pink) !important;
}
.auth-page #password-reset-from-key-container .password-requirements {
    text-align: left !important;
    display: inline-block !important;
    max-width: 420px !important;
    margin: 1rem auto 0 auto !important;
    /* Requirements copy should be readable on dark backgrounds */
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Muted helper text on password reset pages: ensure readable in dark mode
   while remaining appropriately muted in light mode. Targets common
   .text-muted usage inside the password reset containers. */
.auth-page #password-reset-container .text-muted,
.auth-page #password-reset-from-key-container .text-muted {
    color: rgba(255, 255, 255, 0.65) !important; /* light gray on dark */
}

:root.light-mode .auth-page #password-reset-container .text-muted,
:root.light-mode .auth-page #password-reset-from-key-container .text-muted {
    color: rgba(0, 0, 0, 0.55) !important; /* darker gray on light */
}
.auth-page #password-reset-from-key-container .auth-title {
    text-transform: uppercase !important;
    font-weight: 900 !important;
    color: var(--neon-pink) !important;
}

/* Small spacing between password requirements and the action button */
.auth-page #password-reset-from-key-container .auth-card .btn {
     margin-top: 0.5rem !important;
}

/* ===== THEME_ANIMATION_LAYER ===== */

/* Custom CSS for {{ seasonal_theme.name }} */
/* seasonal_theme.custom_css removed from extracted stylesheet.
    Keep dynamic/custom CSS in templates where it's rendered.
    Original template expression was:
    {{ seasonal_theme.custom_css|safe }} */

/* ================================================
   THEME STRIP PREVIEW STYLES
   Extracted from templates/themes/admin_themes_form.html
   ================================================ */

.strip-preview-hidden {
    display: none;
    overflow: hidden;
}

.strip-preview-content {
    white-space: nowrap;
    animation: previewScroll 10s linear infinite;
}

@keyframes previewScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.preview-message {
    display: inline-block;
    padding: 0 2rem;
    font-weight: 600;
}

/* ================================================
   LIGHT MODE OVERRIDES
   ================================================ */
:root.light-mode .config-pill {
    color: rgba(0, 0, 0, 0.7);
}

:root.light-mode .custom-css-editor {
    background: rgba(255, 255, 255, 0.8);
    color: #1a1a1a;
}

:root.light-mode .preview-controls {
    background: rgba(255, 255, 255, 0.95);
}

:root.light-mode .table {
    --bs-table-color: #1a1a1a;
}

:root.light-mode .table th {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.03);
    color: rgba(0, 0, 0, 0.8);
}

:root.light-mode .table td {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.01);
    color: #1a1a1a;
}

:root.light-mode .table tbody tr:hover td {
    background: rgba(0, 0, 0, 0.03);
}

:root.light-mode .theme-type-preview .description {
    color: rgba(0, 0, 0, 0.7);
}

/* Light-mode override: make password requirement text darker on light backgrounds */
:root.light-mode .auth-page .password-requirements,
:root.light-mode .auth-page #password-reset-from-key-container .password-requirements {
    color: rgba(0, 0, 0, 0.75) !important;
}

/* ===== SUMMARY_ROW ===== */

.summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    font-size: 0.95rem;
}

.summary-label {
    font-weight: 700;
    color: var(--summary-label-color, #f2f2f2);
}

.summary-value {
    font-weight: 800;
    color: var(--summary-value-color, #ffffff);
}

.shipping-cost,
.tax-cost {
    color: var(--summary-secondary-color, #d8d8d8);
    font-style: italic;
}

.summary-row.total .summary-label {
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.summary-row.total .summary-value {
    color: var(--neon-pink);
    font-weight: 900;
    font-size: 1.5rem;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .summary-row {
        padding: 0.5rem 0;
        font-size: 0.9rem;
    }
}

/* Light mode variants */
:root.light-mode .summary-label {
    color: var(--summary-label-color-light, #333333);
}

:root.light-mode .summary-value {
    color: var(--summary-value-color-light, #222);
}

:root.light-mode .shipping-cost,
:root.light-mode .tax-cost {
    color: var(--summary-secondary-color-light, #555555);
}

:root.light-mode .summary-row.total .summary-value {
    color: #e71f7f;
}

/* ===== BOOTSTRAP OVERRIDES ===== */

.mb-4 {
    margin-bottom: 0.5rem !important;
    margin-top: 0.5rem !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

.mb-5 {
    margin-bottom: 0.5rem !important;
}

@media (max-width: 768px) {
    [class*="col-"] {
        padding: 1rem 0.8rem 2rem 0.8rem;
    }

    .products-page .col-md-6 {
        padding-bottom: 0;
    }
}

.vault-page .order-section {
    margin-bottom: 0 !important;
}

.vault-page .order-status-bar.mb-4 {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Mobile rule: ensure logout container has no top padding on small screens */
@media (max-width: 768px) {
    #logout-container,
    #signup-container,
    #signin-container {
        padding-top: 0 !important;
    }
}

/* Auth pages: content-height layout — no stretching, uniform gaps.
   Override the canonical min-height:100vh from vault-modals.css so
   auth pages are only as tall as their content. */
.auth-page {
    display: flex;
    flex-direction: column;
    min-height: auto;
}

/* Uniform top and bottom gap — same breathing room above and below content */
.auth-page > .page-hero + .page-container,
.auth-page > .page-container {
    flex: 0 1 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.auth-page .page-container > .container {
    width: 100%;
    /* Wider container on desktop so auth-card isn't overly narrow */
    max-width: 980px;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* For very large screens allow a little extra breathing room */
@media (min-width: 1400px) {
    .auth-page .page-container > .container {
        max-width: 1100px;
    }
}

/* Widen the specific "change your password" flow so the card has
   more horizontal room without affecting other auth pages. Scope to
   the template ID used in `password_reset_from_key.html`. */
.auth-page#auth-page-password-change .page-container > .container {
    max-width: 1200px !important;
}

/* Allow the auth-card on the change-password page to expand up to a
   comfortable reading width while staying centered. */
.auth-page#auth-page-password-change .auth-card {
    max-width: 900px !important;
    width: 100% !important;
}

/* Also widen the reset-from-key container variant if used as root */
.auth-page#password-reset-from-key-done-container .page-container > .container,
.auth-page#password-reset-from-key-container .page-container > .container {
    max-width: 1100px !important;
}

.auth-page#password-reset-from-key-container .auth-card,
.auth-page#password-reset-from-key-done-container .auth-card {
    max-width: 760px !important;
    width: 100% !important;
}

.auth-page .auth-card,
.auth-page .profile-card {
    margin: 0 auto;
}


/* Password visibility toggle — seamless eye button inside the input border */
.password-field-wrapper {
    display: flex;
}

.password-field-wrapper .form-control,
.password-field-wrapper .auth-form-input {
    border-right: none !important;
    border-radius: 4px 0 0 4px !important;
    flex: 1 1 auto;
    min-width: 0;
}

/* Keep focus ring on the input without the border-right seam */
.password-field-wrapper .form-control:focus,
.password-field-wrapper .auth-form-input:focus {
    border-right: none !important;
    box-shadow: none !important;
    z-index: 1;
}

/* Highlight the whole wrapper on input focus */
.password-field-wrapper:focus-within .form-control,
.password-field-wrapper:focus-within .auth-form-input {
    border-color: var(--neon-pink) !important;
}

.password-field-wrapper:focus-within .password-toggle {
    border-color: var(--neon-pink) !important;
}

.password-toggle {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    padding: 0;
    border: 2px solid var(--gray);
    border-left: none;
    border-radius: 0 4px 4px 0;
    background: var(--black);
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.password-toggle:hover,
.password-toggle:focus {
    color: var(--neon-pink);
    background: var(--black);
    border-color: var(--neon-pink);
    outline: none;
    box-shadow: none;
}

:root.light-mode .password-toggle {
    border-color: #ccc;
    background: #fff;
    color: rgba(0, 0, 0, 0.35);
}

:root.light-mode .password-toggle:hover,
:root.light-mode .password-toggle:focus {
    color: var(--neon-pink);
    border-color: var(--neon-pink);
    background: #fff;
}

/* Small-screen behavior: allow content to scroll naturally as one page */
@media (max-width: 768px) {
    .auth-page {
        min-height: auto;
    }
    .auth-page > .page-hero + .page-container,
    .auth-page > .page-container {
        align-items: flex-start;
        justify-content: flex-start;
        padding-top: 1.25rem;
        padding-bottom: 1rem;
        /* No overflow-y or max-height here — let the page scroll as a whole */
    }
}