/* ==========================================================================
   SOFTNET COMPUTER APPLICATIONS - PORTAL THEME ENGINE
   File: css/portal-theme.css
   Description: Multi-theme architecture matching the Softnet Portal Theme System:
                - Greyish (Minimal Slate Enterprise)
                - Almond (Warm Corporate Amber / Caramel)
                - Sky Blue (Modern Azure Cloud Tech)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Theme Variable Definitions
   -------------------------------------------------------------------------- */

/* Default / Greyish Theme */
:root,
body[data-theme="greyish"],
.theme-greyish {
    --portal-bg-page: #f4f5f6;
    --portal-bg-card: #ffffff;
    --portal-bg-card-hover: #f8fafc;
    --portal-bg-muted: #f1f5f9;
    --portal-border: #e2e8f0;
    --portal-border-subtle: #cbd5e1;
    --portal-text-primary: #0f172a;
    --portal-text-secondary: #64748b;
    --portal-accent: #1e293b;
    --portal-accent-hover: #0f172a;
    --portal-accent-light: #f1f5f9;
    --portal-accent-text: #1e293b;
    --portal-accent-border: #cbd5e1;
    --portal-badge-bg: #f1f5f9;
    --portal-badge-text: #1e293b;
    --portal-button-primary-bg: #0f172a;
    --portal-button-primary-hover: #1e293b;
    --portal-button-primary-text: #ffffff;
    --portal-button-secondary-bg: #ffffff;
    --portal-button-secondary-text: #334155;
    --portal-button-secondary-border: #e2e8f0;
    --portal-nav-bg: rgba(255, 255, 255, 0.92);
}

/* Almond Theme (Warm Amber / Caramel / Earthy Corporate) */
body[data-theme="almond"],
.theme-almond {
    --portal-bg-page: #faf7f2;
    --portal-bg-card: #fdfcf9;
    --portal-bg-card-hover: #f6f2e8;
    --portal-bg-muted: #f5ebd7;
    --portal-border: #ebdcc5;
    --portal-border-subtle: #debfa0;
    --portal-text-primary: #2e261f;
    --portal-text-secondary: #706253;
    --portal-accent: #b45309;
    --portal-accent-hover: #92400e;
    --portal-accent-light: #fef3c7;
    --portal-accent-text: #b45309;
    --portal-accent-border: #f5d0a9;
    --portal-badge-bg: #fdf6e2;
    --portal-badge-text: #92400e;
    --portal-button-primary-bg: #b45309;
    --portal-button-primary-hover: #92400e;
    --portal-button-primary-text: #ffffff;
    --portal-button-secondary-bg: #fdfcf9;
    --portal-button-secondary-text: #706253;
    --portal-button-secondary-border: #ebdcc5;
    --portal-nav-bg: rgba(253, 252, 249, 0.92);
}

/* Sky Blue Theme (Modern Azure Cloud Tech) */
body[data-theme="skyblue"],
.theme-skyblue {
    --portal-bg-page: #f0f6fc;
    --portal-bg-card: #ffffff;
    --portal-bg-card-hover: #e0f2fe;
    --portal-bg-muted: #e0f2fe;
    --portal-border: #bae6fd;
    --portal-border-subtle: #7dd3fc;
    --portal-text-primary: #0f172a;
    --portal-text-secondary: #64748b;
    --portal-accent: #0284c7;
    --portal-accent-hover: #0369a1;
    --portal-accent-light: #e0f2fe;
    --portal-accent-text: #0284c7;
    --portal-accent-border: #7dd3fc;
    --portal-badge-bg: #f0f9ff;
    --portal-badge-text: #0369a1;
    --portal-button-primary-bg: #0284c7;
    --portal-button-primary-hover: #0369a1;
    --portal-button-primary-text: #ffffff;
    --portal-button-secondary-bg: #ffffff;
    --portal-button-secondary-text: #475569;
    --portal-button-secondary-border: #bae6fd;
    --portal-nav-bg: rgba(255, 255, 255, 0.92);
}

/* --------------------------------------------------------------------------
   2. Base Document Theme Application
   -------------------------------------------------------------------------- */
body {
    background-color: var(--portal-bg-page) !important;
    color: var(--portal-text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --------------------------------------------------------------------------
   3. Theme Utility Classes for WebForms
   -------------------------------------------------------------------------- */
.theme-bg-page {
    background-color: var(--portal-bg-page) !important;
}

.theme-bg-card {
    background-color: var(--portal-bg-card) !important;
    border-color: var(--portal-border) !important;
}

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

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

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

.theme-border {
    border-color: var(--portal-border) !important;
}

.theme-btn-primary {
    background-color: var(--portal-button-primary-bg) !important;
    color: var(--portal-button-primary-text) !important;
    transition: all 0.2s ease-in-out;
}

.theme-btn-primary:hover {
    background-color: var(--portal-button-primary-hover) !important;
}

.theme-btn-secondary {
    background-color: var(--portal-button-secondary-bg) !important;
    color: var(--portal-button-secondary-text) !important;
    border: 1px solid var(--portal-button-secondary-border) !important;
    transition: all 0.2s ease-in-out;
}

.theme-btn-secondary:hover {
    background-color: var(--portal-bg-muted) !important;
}

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

/* Master Header & Footer Theme Sync */
header.sticky {
    background-color: var(--portal-nav-bg) !important;
    border-color: var(--portal-border) !important;
}

footer {
    background-color: var(--portal-bg-card) !important;
    border-color: var(--portal-border) !important;
}

/* --------------------------------------------------------------------------
   4. Portal Theme Switcher Component Styles
   -------------------------------------------------------------------------- */
.portal-theme-pill-container {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    border-radius: 9999px;
    border: 1px solid var(--portal-border);
    background-color: var(--portal-bg-page);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.portal-theme-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 9999px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: var(--portal-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.portal-theme-pill-btn:hover {
    color: var(--portal-text-primary);
}

.portal-theme-pill-btn.active {
    background-color: var(--portal-bg-card);
    color: var(--portal-text-primary);
    border-color: var(--portal-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.portal-theme-dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    display: inline-block;
}

.portal-theme-dot.dot-greyish {
    background-color: #64748b;
}

.portal-theme-dot.dot-almond {
    background-color: #d97706;
}

.portal-theme-dot.dot-skyblue {
    background-color: #0284c7;
}

/* --------------------------------------------------------------------------
   5. Dynamic Adaptive Color Mapping for ASP.NET WebForms Pages
   -------------------------------------------------------------------------- */

/* Almond Theme Overrides */
body[data-theme="almond"] .bg-white {
    background-color: #fdfcf9 !important;
}
body[data-theme="almond"] .bg-slate-50,
body[data-theme="almond"] .bg-slate-50\/50,
body[data-theme="almond"] .bg-slate-50\/80 {
    background-color: #faf7f2 !important;
}
body[data-theme="almond"] .bg-slate-100,
body[data-theme="almond"] .bg-slate-100\/50 {
    background-color: #f5ebd7 !important;
}
body[data-theme="almond"] .border-slate-100,
body[data-theme="almond"] .border-slate-200,
body[data-theme="almond"] .border-slate-200\/80,
body[data-theme="almond"] .border-slate-300 {
    border-color: #ebdcc5 !important;
}
body[data-theme="almond"] .text-slate-900,
body[data-theme="almond"] .text-slate-950 {
    color: #2e261f !important;
}
body[data-theme="almond"] .text-slate-800,
body[data-theme="almond"] .text-slate-700,
body[data-theme="almond"] .text-slate-600 {
    color: #57483a !important;
}
body[data-theme="almond"] .text-slate-500,
body[data-theme="almond"] .text-slate-400 {
    color: #706253 !important;
}
body[data-theme="almond"] .bg-slate-900:not(pre):not(.font-mono),
body[data-theme="almond"] .bg-slate-950:not(pre):not(.font-mono),
body[data-theme="almond"] button.bg-slate-900,
body[data-theme="almond"] button.bg-slate-950,
body[data-theme="almond"] a.bg-slate-900,
body[data-theme="almond"] a.bg-slate-950 {
    background-color: #b45309 !important;
    border-color: #b45309 !important;
    color: #ffffff !important;
}

body[data-theme="almond"] button.bg-slate-900:hover,
body[data-theme="almond"] button.bg-slate-950:hover,
body[data-theme="almond"] a.bg-slate-900:hover,
body[data-theme="almond"] a.bg-slate-950:hover {
    background-color: #92400e !important;
    border-color: #92400e !important;
}

body[data-theme="almond"] .border-slate-950,
body[data-theme="almond"] .border-slate-900 {
    border-color: #b45309 !important;
}

/* Sky Blue Theme Overrides */
body[data-theme="skyblue"] .bg-white {
    background-color: #ffffff !important;
}
body[data-theme="skyblue"] .bg-slate-50,
body[data-theme="skyblue"] .bg-slate-50\/50,
body[data-theme="skyblue"] .bg-slate-50\/80 {
    background-color: #f0f6fc !important;
}
body[data-theme="skyblue"] .bg-slate-100,
body[data-theme="skyblue"] .bg-slate-100\/50 {
    background-color: #e0f2fe !important;
}
body[data-theme="skyblue"] .border-slate-100,
body[data-theme="skyblue"] .border-slate-200,
body[data-theme="skyblue"] .border-slate-200\/80,
body[data-theme="skyblue"] .border-slate-300 {
    border-color: #bae6fd !important;
}
body[data-theme="skyblue"] .text-slate-900,
body[data-theme="skyblue"] .text-slate-950 {
    color: #0f172a !important;
}
body[data-theme="skyblue"] .text-slate-800,
body[data-theme="skyblue"] .text-slate-700,
body[data-theme="skyblue"] .text-slate-600 {
    color: #334155 !important;
}
body[data-theme="skyblue"] .text-slate-500,
body[data-theme="skyblue"] .text-slate-400 {
    color: #64748b !important;
}
body[data-theme="skyblue"] .bg-slate-900:not(pre):not(.font-mono),
body[data-theme="skyblue"] .bg-slate-950:not(pre):not(.font-mono),
body[data-theme="skyblue"] button.bg-slate-900,
body[data-theme="skyblue"] button.bg-slate-950,
body[data-theme="skyblue"] a.bg-slate-900,
body[data-theme="skyblue"] a.bg-slate-950 {
    background-color: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
}

body[data-theme="skyblue"] button.bg-slate-900:hover,
body[data-theme="skyblue"] button.bg-slate-950:hover,
body[data-theme="skyblue"] a.bg-slate-900:hover,
body[data-theme="skyblue"] a.bg-slate-950:hover {
    background-color: #0369a1 !important;
    border-color: #0369a1 !important;
}

body[data-theme="skyblue"] .border-slate-950,
body[data-theme="skyblue"] .border-slate-900 {
    border-color: #0284c7 !important;
}