/*
 * Theme CSS — Centralized theme variables for easy client customization.
 * Colors are overridden at runtime via inline CSS variables injected from appsettings.json.
 * To change the theme for a different LGU, update the SiteSettings section in appsettings.json.
 */

:root {
    /* Primary brand colors (defaults — overridden inline from SiteSettings) */
    --theme-primary: #005EB8;
    --theme-primary-dark: #004a93;
    --theme-gradient-start: #1e3a5f;
    --theme-gradient-end: #2d5a87;

    /* Derived / semantic colors */
    --theme-gradient: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%);
    --theme-header-gradient: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);

    /* Neutral palette */
    --theme-white: #ffffff;
    --theme-light: #f8f9fa;
    --theme-text: #212529;
    --theme-text-muted: #6c757d;

    /* Kiosk-specific */
    --kiosk-bg: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 50%, var(--theme-gradient-start) 100%);
    --kiosk-card-bg: rgba(255, 255, 255, 0.95);
    --kiosk-icon-bg: var(--theme-gradient);
    --kiosk-footer-color: rgba(255, 255, 255, 0.8);

    /* Display-specific */
    --display-header-bg: var(--theme-header-gradient);
    --display-ticket-color: var(--theme-primary);
}

/* ===== Bootstrap overrides using theme variables ===== */

.bg-primary {
    background-color: var(--theme-primary) !important;
}

.text-primary {
    color: var(--theme-primary) !important;
}

.btn-primary {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary-dark);
}

.btn-primary:hover {
    background-color: var(--theme-primary-dark);
    border-color: var(--theme-primary-dark);
}

a {
    color: var(--theme-primary);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--theme-white), 0 0 0 0.25rem var(--theme-primary);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary-dark);
}

/* ===== Kiosk theme ===== */

.kiosk-wrapper {
    background: var(--kiosk-bg) !important;
}

.department-icon,
.service-icon {
    background: var(--theme-gradient) !important;
}

.service-badge {
    background: var(--theme-gradient) !important;
}

.btn-modal-primary {
    background: var(--theme-gradient) !important;
}

.ticket-header {
    background: var(--theme-gradient) !important;
}

.ticket-number {
    color: var(--theme-gradient-start) !important;
}

/* ===== Display theme ===== */

.display-header {
    background: var(--theme-header-gradient) !important;
}

.queue-zone .ticket-number {
    color: var(--theme-primary) !important;
}

/* ===== Layout theme ===== */

.navbar.bg-primary {
    background-color: var(--theme-primary) !important;
}