/* ============================================
   CSS VARIABLES
   ============================================ */

:root {
    /* Brand */
    --primary-color: #1d6b5e;        /* Kelp Teal */
    --primary-deep: #155046;         /* Kelp Deep — hover/active of primary */
    --secondary-color: #155046;      /* Alias of Kelp Deep (kept for residual var refs) */
    --primary-tint: #e7efec;         /* Pale Kelp — chips, selected/hover surfaces */
    --accent-color: #c2683f;         /* Rusted Coral */
    --accent-coral: #c2683f;
    /* Text */
    --text-color: #2a3530;           /* Body Text */
    --text-muted: #5a6b66;           /* Lichen Gray (4.5:1 floor) */
    --text-ink: #1a2421;             /* Ink for headings */
    --on-primary: #ffffff;           /* Foreground on a primary-colored fill */
    /* Surfaces */
    --bg-color: #ffffff;             /* Archive White */
    --card-bg: #f7f8f7;              /* Mineral White (raised) */
    --surface-sunken: #eff2f0;       /* Sunken White */
    --surface-hover: #f1f4f2;        /* Mineral-White hover wash */
    --border-color: #dfe4e1;
    --border-strong: #c4ccc8;     /* Border Strong — emphasis borders */
    /* Semantic */
    --success: #2f7d4f;
    --danger: #b3413a;
    --warning: #b88433;
    /* Elevation — shadows tinted toward Ink, reserved for state */
    --shadow-sm: 0 2px 4px rgba(26, 36, 33, 0.06);
    --shadow: 0 4px 8px rgba(26, 36, 33, 0.08);
    --shadow-lg: 0 12px 32px rgba(26, 36, 33, 0.12);

    /* Radii — DESIGN.md rounded scale (xs 4, sm 6, md 8, lg 12, xl 16, 2xl 18, pill 999) */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 18px;
    --radius-pill: 999px;

    /* Lightbox — intentionally near-black scrim in both themes so the image reads */
    --lightbox-overlay: rgba(0, 0, 0, 0.835);

    --base-font-size: 100%; /* Dynamic font size, changes via HTML data-font-size attribute */

    /* Type ramp — DESIGN.md typography (sm 4, md 8, lg 12, xl 16, pill 999).
       em/rem values inherit --base-font-size so the accessibility control scales them. */
    --fs-display: clamp(1.8rem, 4.5vw, 2.8rem);
    --fs-headline: clamp(1.5rem, 3.5vw, 2.25rem);
    --fs-h3: 1.4rem;
    --fs-title: 1.25rem;
    --fs-lead: 1.125rem;
    --fs-body: 1rem;
    --fs-subtitle: 0.9rem;
    --fs-label: 0.8125rem;
    --fs-meta: 0.75rem;

    /* Site footer — dark surface carrying each theme's identity. Defined as
       variables so the theme override blocks retint the footer alongside the
       rest of the palette (was previously hardcoded to Kelp Teal dark values). */
    --footer-bg: #141a18;
    --footer-text: #9aaaa3;
    --footer-heading: #ffffff;
    --footer-link-hover: #ffffff;
    --footer-border: #2f3833;

    /* Bootstrap override */
    --bs-body-bg: #ffffff;
    --bs-body-color: #2a3530;
    --bs-card-bg: #f7f8f7;
    --bs-border-color: #dfe4e1;
}

[data-bs-theme="dark"] {
    --primary-color: #2d8676;        /* lightened teal for dark-bg contrast */
    --primary-deep: #2d8676;         /* Kelp Deep — lightened for dark-bg contrast */
    --secondary-color: #2d8676;
    --primary-tint: rgba(45, 134, 118, 0.16); /* Pale Kelp translucent — reads on dark surfaces */
    --accent-color: #d97e54;
    --accent-coral: #d97e54;
    --text-color: #d7dedb;
    --text-muted: #9aaaa3;
    --text-ink: #e9eeec;
    --on-primary: #ffffff;           /* Foreground on a primary-colored fill */
    --bg-color: #141a18;             /* Charcoal Teal */
    --card-bg: #1d2522;              /* Slate Teal (raised) */
    --surface-sunken: #161c1a;
    --surface-hover: #262f2b;        /* Slate-Teal hover wash */
    --border-color: #2f3833;
    --border-strong: #3d4843;        /* Border Strong — emphasis borders in dark */
    /* Semantic — lightened for dark-bg contrast (≥4.5:1 on Charcoal Teal) */
    --success: #5cb47a;
    --danger: #e07a72;
    --warning: #d4a44d;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);

    /* Bootstrap override */
    --bs-body-bg: #141a18;
    --bs-body-color: #d7dedb;
    --bs-card-bg: #1d2522;
    --bs-border-color: #2f3833;
    --bs-light-rgb: 29, 37, 34;
    /* Bootstrap color utility RGB triplets so framework text-/bg- utilities
       inherit the brand palette instead of Bootstrap defaults */
    --bs-primary-rgb: 45, 134, 118;
    --bs-secondary-rgb: 154, 170, 163;
    --bs-success-rgb: 47, 125, 79;
    --bs-danger-rgb: 179, 65, 58;
    --bs-warning-rgb: 184, 132, 51;
    --bs-info-rgb: 45, 134, 118;
    --bs-dark-rgb: 20, 26, 24;
}

/* ============================================
   COLOR THEME OVERRIDES
   Each alternate theme re-tints the identity variables AND the hue-matched
   neutrals (text/ink/muted/border/shadow) so the palette reads as one coherent
   world, not teal-grays under an alien primary. Default theme (kelp_teal) is
   defined in :root above — no override block needed for it.
   ============================================ */

/* --- Slate Indigo — scholarly trust --- */
[data-color-theme="slate_indigo"] {
    --primary-color: #3b5b8a;
    --primary-deep: #2c476b;
    --secondary-color: #2c476b;
    --primary-tint: #e7ecf3;
    --accent-color: #b87333;
    --accent-coral: #b87333;
    --text-color: #2b3340;
    --text-muted: #59657a;
    --text-ink: #1c2533;
    --card-bg: #f5f7fa;
    --surface-sunken: #edf0f4;
    --surface-hover: #eef1f6;
    --border-color: #dfe3ea;
    --border-strong: #c4cbd6;
    --shadow-sm: 0 2px 4px rgba(28, 37, 51, 0.06);
    --shadow: 0 4px 8px rgba(28, 37, 51, 0.08);
    --shadow-lg: 0 12px 32px rgba(28, 37, 51, 0.12);
    --bs-body-color: #2b3340;
    --bs-card-bg: #f5f7fa;
    --bs-border-color: #dfe3ea;
    --footer-bg: #151a22;
    --footer-text: #94a0b5;
    --footer-heading: #ffffff;
    --footer-link-hover: #ffffff;
    --footer-border: #2f3744;
}
[data-color-theme="slate_indigo"][data-bs-theme="dark"] {
    --primary-color: #6f8fc0;
    --primary-deep: #5b759d;
    --secondary-color: #5b759d;
    --primary-tint: rgba(111, 143, 192, 0.16);
    --accent-color: #d49a5e;
    --accent-coral: #d49a5e;
    --text-color: #d3dae3;
    --text-muted: #94a0b5;
    --text-ink: #e9edf2;
    --bg-color: #151a22;
    --card-bg: #1d2330;
    --surface-sunken: #161b22;
    --surface-hover: #262d3b;
    --border-color: #2f3744;
    --border-strong: #3d4658;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
    --bs-body-bg: #151a22;
    --bs-body-color: #d3dae3;
    --bs-card-bg: #1d2330;
    --bs-border-color: #2f3744;
    --bs-primary-rgb: 111, 143, 192;
    --bs-light-rgb: 29, 35, 48;
    --bs-dark-rgb: 21, 26, 34;
}

/* --- Clay Terracotta — warm earthen craft --- */
[data-color-theme="clay_terracotta"] {
    --primary-color: #9a4a32;
    --primary-deep: #7a3725;
    --secondary-color: #7a3725;
    --primary-tint: #f3e7e2;
    --accent-color: #4a6b3a;
    --accent-coral: #4a6b3a;
    --text-color: #382e28;
    --text-muted: #6b5d54;
    --text-ink: #241d18;
    --card-bg: #faf6f4;
    --surface-sunken: #f2ece8;
    --surface-hover: #f4eeea;
    --border-color: #e2d8d1;
    --border-strong: #cabbb0;
    --shadow-sm: 0 2px 4px rgba(36, 29, 24, 0.06);
    --shadow: 0 4px 8px rgba(36, 29, 24, 0.08);
    --shadow-lg: 0 12px 32px rgba(36, 29, 24, 0.12);
    --bs-body-color: #382e28;
    --bs-card-bg: #faf6f4;
    --bs-border-color: #e2d8d1;
    --footer-bg: #1f1814;
    --footer-text: #a99a90;
    --footer-heading: #ffffff;
    --footer-link-hover: #ffffff;
    --footer-border: #3a2e26;
}
[data-color-theme="clay_terracotta"][data-bs-theme="dark"] {
    --primary-color: #c9775c;
    --primary-deep: #9c5c47;
    --secondary-color: #9c5c47;
    --primary-tint: rgba(201, 119, 92, 0.16);
    --accent-color: #8caa78;
    --accent-coral: #8caa78;
    --text-color: #e0d5cf;
    --text-muted: #a99a90;
    --text-ink: #efe7e2;
    --bg-color: #1f1814;
    --card-bg: #2a201a;
    --surface-sunken: #1a1410;
    --surface-hover: #332821;
    --border-color: #3a2e26;
    --border-strong: #4a3a30;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
    --bs-body-bg: #1f1814;
    --bs-body-color: #e0d5cf;
    --bs-card-bg: #2a201a;
    --bs-border-color: #3a2e26;
    --bs-primary-rgb: 201, 119, 92;
    --bs-light-rgb: 42, 32, 26;
    --bs-dark-rgb: 31, 24, 20;
}

/* --- Iron Graphite — monochrome ink, maximum quiet --- */
[data-color-theme="iron_graphite"] {
    --primary-color: #3d4751;
    --primary-deep: #2a323b;
    --secondary-color: #2a323b;
    --primary-tint: #e9ebee;
    --accent-color: #7a5c3e;
    --accent-coral: #7a5c3e;
    --text-color: #2d333b;
    --text-muted: #5c6570;
    --text-ink: #1c2128;
    --card-bg: #f6f7f8;
    --surface-sunken: #eef0f2;
    --surface-hover: #f1f3f5;
    --border-color: #dfe2e6;
    --border-strong: #c5cad0;
    --shadow-sm: 0 2px 4px rgba(28, 33, 40, 0.06);
    --shadow: 0 4px 8px rgba(28, 33, 40, 0.08);
    --shadow-lg: 0 12px 32px rgba(28, 33, 40, 0.12);
    --bs-body-color: #2d333b;
    --bs-card-bg: #f6f7f8;
    --bs-border-color: #dfe2e6;
    --footer-bg: #171a1f;
    --footer-text: #97a0aa;
    --footer-heading: #ffffff;
    --footer-link-hover: #ffffff;
    --footer-border: #2f353d;
}
[data-color-theme="iron_graphite"][data-bs-theme="dark"] {
    --primary-color: #8b95a1;
    --primary-deep: #6f7780;
    --secondary-color: #6f7780;
    --primary-tint: rgba(139, 149, 161, 0.16);
    --accent-color: #b8997a;
    --accent-coral: #b8997a;
    --text-color: #d4d9de;
    --text-muted: #97a0aa;
    --text-ink: #e9edf0;
    --bg-color: #171a1f;
    --card-bg: #21252c;
    --surface-sunken: #14171b;
    --surface-hover: #292e36;
    --border-color: #2f353d;
    --border-strong: #3d444e;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
    --bs-body-bg: #171a1f;
    --bs-body-color: #d4d9de;
    --bs-card-bg: #21252c;
    --bs-border-color: #2f353d;
    --bs-primary-rgb: 139, 149, 161;
    --bs-light-rgb: 33, 37, 44;
    --bs-dark-rgb: 23, 26, 31;
}

/* --- Olive Archive — botanical library calm --- */
[data-color-theme="olive_archive"] {
    --primary-color: #5d6b3a;
    --primary-deep: #47522c;
    --secondary-color: #47522c;
    --primary-tint: #edeee2;
    --accent-color: #9a5a2e;
    --accent-coral: #9a5a2e;
    --text-color: #303528;
    --text-muted: #5e6650;
    --text-ink: #1d2118;
    --card-bg: #f7f8f2;
    --surface-sunken: #eff0e7;
    --surface-hover: #f2f3eb;
    --border-color: #e0e2d6;
    --border-strong: #c8ccb8;
    --shadow-sm: 0 2px 4px rgba(29, 33, 24, 0.06);
    --shadow: 0 4px 8px rgba(29, 33, 24, 0.08);
    --shadow-lg: 0 12px 32px rgba(29, 33, 24, 0.12);
    --bs-body-color: #303528;
    --bs-card-bg: #f7f8f2;
    --bs-border-color: #e0e2d6;
    --footer-bg: #181c14;
    --footer-text: #9ba288;
    --footer-heading: #ffffff;
    --footer-link-hover: #ffffff;
    --footer-border: #323a28;
}
[data-color-theme="olive_archive"][data-bs-theme="dark"] {
    --primary-color: #8ea35e;
    --primary-deep: #6b7b47;
    --secondary-color: #6b7b47;
    --primary-tint: rgba(142, 163, 94, 0.16);
    --accent-color: #c98a5a;
    --accent-coral: #c98a5a;
    --text-color: #d6dac9;
    --text-muted: #9ba288;
    --text-ink: #e8ebda;
    --bg-color: #181c14;
    --card-bg: #222819;
    --surface-sunken: #141810;
    --surface-hover: #2b321f;
    --border-color: #323a28;
    --border-strong: #424b35;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
    --bs-body-bg: #181c14;
    --bs-body-color: #d6dac9;
    --bs-card-bg: #222819;
    --bs-border-color: #323a28;
    --bs-primary-rgb: 142, 163, 94;
    --bs-light-rgb: 34, 40, 25;
    --bs-dark-rgb: 24, 28, 20;
}

/* High specificity dark mode overrides */
html[data-bs-theme="dark"] {
    color-scheme: dark;
}

/* ============================================
   GLOBAL RESETS & TYPOGRAPHY
   ============================================ */

/* Root font size drives the whole scale: --base-font-size is set from the
   data-font-size attribute (render-head.php / app.js). Anchoring it on <html>
   makes every rem unit (Bootstrap included) scale with the setting, and em
   values inherit it through the body. */
html {
    font-size: var(--base-font-size);
}

body {
    font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* All typography elements affected by font size - em based */
h1, .h1 { font-size: var(--fs-headline); }
h2, .h2 { font-size: var(--fs-headline); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h3); }
h5, .h5 { font-size: var(--fs-title); }
h6, .h6 { font-size: var(--fs-body); }

p, span, label, a, .card-text, .form-text, .breadcrumb-item,
.text-muted, .small {
    font-size: var(--fs-body);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--secondary-color);
}

/* ============================================
   FOCUS VISIBLE — global keyboard ring
   Visible 2px Kelp Teal ring on every interactive element.
   Never removed without replacement (WCAG 2.4.7).
   ============================================ */

:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Inputs already paint their own tinted ring; don't double up */
.form-control:focus-visible,
.form-select:focus-visible,
.search-input:focus-visible {
    outline: none;
}

/* ============================================
   DARK MODE GLOBAL OVERRIDES
   Only Bootstrap utilities and components that hardcode colors
   need explicit dark overrides; everything else cascades from the
   variable block via var(--*) tokens.
   ============================================ */

html[data-bs-theme="dark"] .bg-white,
html[data-bs-theme="dark"] .bg-light {
    background-color: var(--card-bg);
}

html[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--text-muted);
}

html[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

html[data-bs-theme="dark"] .dropdown-item {
    color: var(--text-color);
}

html[data-bs-theme="dark"] .dropdown-item:hover {
    background-color: var(--border-color);
    color: var(--text-color);
}

html[data-bs-theme="dark"] .text-muted {
    color: var(--text-muted);
}

html[data-bs-theme="dark"] .text-dark {
    color: var(--text-color);
}

html[data-bs-theme="dark"] .border {
    border-color: var(--border-color);
}

html[data-bs-theme="dark"] .list-group-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

html[data-bs-theme="dark"] .modal-content {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

html[data-bs-theme="dark"] .modal-header,
html[data-bs-theme="dark"] .modal-footer {
    background-color: var(--surface-sunken);
}

html[data-bs-theme="dark"] .btn-outline-secondary {
    color: var(--text-color);
    border-color: var(--border-color);
    background-color: transparent;
}

html[data-bs-theme="dark"] .btn-outline-secondary:hover,
html[data-bs-theme="dark"] .btn-outline-secondary.active {
    background-color: var(--border-color);
    color: var(--text-color);
    border-color: var(--border-color);
}

html[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

html[data-bs-theme="dark"] .table {
    border-color: var(--border-color);
}

html[data-bs-theme="dark"] .table > :not(caption) > * > * {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

html[data-bs-theme="dark"] .table thead th {
    background-color: var(--bg-color);
    border-color: var(--border-color);
}

/* Dark Mode Fixes */
html[data-bs-theme="dark"] .text-light {
    color: var(--text-muted) !important;
}

/* ============================================
   SWEET ALERT 2 - DARK MODE
   ============================================ */

html[data-bs-theme="dark"] .swal2-popup {
    background-color: var(--card-bg);
    color: var(--text-color);
}

html[data-bs-theme="dark"] .swal2-popup .swal2-icon {
    border-color: var(--border-color);
}

html[data-bs-theme="dark"] .swal2-popup .swal2-success {
    background-color: rgba(var(--bs-success-rgb), 0.15);
    border-color: rgba(var(--bs-success-rgb), 0.3);
}

html[data-bs-theme="dark"] .swal2-popup .swal2-success [class^="swal2-success"] {
    border-color: rgb(var(--bs-success-rgb));
}

html[data-bs-theme="dark"] .swal2-popup .swal2-success .swal2-success-ring {
    border-color: rgba(var(--bs-success-rgb), 0.3);
}

html[data-bs-theme="dark"] .swal2-popup .swal2-error {
    background-color: rgba(var(--bs-danger-rgb), 0.15);
    border-color: rgba(var(--bs-danger-rgb), 0.3);
}

html[data-bs-theme="dark"] .swal2-popup .swal2-warning {
    background-color: rgba(var(--bs-warning-rgb), 0.15);
    border-color: rgba(var(--bs-warning-rgb), 0.3);
}

html[data-bs-theme="dark"] .swal2-popup .swal2-info {
    background-color: rgba(var(--bs-info-rgb), 0.15);
    border-color: rgba(var(--bs-info-rgb), 0.3);
}

html[data-bs-theme="dark"] .swal2-popup .swal2-question {
    background-color: rgba(var(--bs-info-rgb), 0.15);
    border-color: rgba(var(--bs-info-rgb), 0.3);
}

html[data-bs-theme="dark"] .swal2-popup .swal2-validation-message {
    background-color: rgba(var(--bs-danger-rgb), 0.15);
    color: rgb(var(--bs-danger-rgb));
}

html[data-bs-theme="dark"] .swal2-popup .swal2-loader {
    border-color: var(--border-color) transparent var(--border-color) transparent;
}

/* SVG AI Loading Spinner (SweetAlert) */
.swal2-ai-spinner {
    color: var(--primary-color);
}

.profile-swal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* ============================================
   RTL (Right-to-Left) SUPPORT - Global
   Arabic, Persian and other RTL languages
   ============================================ */

/* Direction and alignment for RTL languages */
html[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* Reverse margin and padding */
html[dir="rtl"] .me-auto {
    margin-left: auto;
    margin-right: 0;
}

html[dir="rtl"] .ms-auto {
    margin-right: auto;
    margin-left: 0;
}

html[dir="rtl"] .me-1 { margin-left: 0.25rem; margin-right: 0; }
html[dir="rtl"] .me-2 { margin-left: 0.5rem; margin-right: 0; }
html[dir="rtl"] .me-3 { margin-left: 1rem; margin-right: 0; }
html[dir="rtl"] .ms-1 { margin-right: 0.25rem; margin-left: 0; }
html[dir="rtl"] .ms-2 { margin-right: 0.5rem; margin-left: 0; }
html[dir="rtl"] .ms-3 { margin-right: 1rem; margin-left: 0; }

/* Reverse padding */
html[dir="rtl"] .ps-1 { padding-left: 0.25rem; padding-right: 0; }
html[dir="rtl"] .ps-2 { padding-left: 0.5rem; padding-right: 0; }
html[dir="rtl"] .ps-3 { padding-left: 1rem; padding-right: 0; }
html[dir="rtl"] .pe-1 { padding-right: 0.25rem; padding-left: 0; }
html[dir="rtl"] .pe-2 { padding-right: 0.5rem; padding-left: 0; }
html[dir="rtl"] .pe-3 { padding-right: 1rem; padding-left: 0; }

/* Reverse icon positions */
html[dir="rtl"] .bi-chevron-right::before {
    content: "\F284"; /* Left arrow */
}

html[dir="rtl"] .bi-chevron-left::before {
    content: "\F285"; /* Right arrow */
}

/* Dropdown menu direction */
html[dir="rtl"] .dropdown-menu {
    text-align: right;
    right: 0;
    left: auto;
    padding-right: 0;
}

/* Form elements */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
}

html[dir="rtl"] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-left: 1px solid var(--border-color);
    border-right: none;
}

html[dir="rtl"] .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Lists */
html[dir="rtl"] ul,
html[dir="rtl"] ol {
    padding-right: 2rem;
    padding-left: 0;
}

html[dir="rtl"] .dropdown-menu ul {
    padding-right: 0;
}

/* RTL for cards and containers */
html[dir="rtl"] .card {
    text-align: right;
}

html[dir="rtl"] .text-start {
    text-align: right;
}

html[dir="rtl"] .text-end {
    text-align: left;
}

/* Flexbox reverse direction */
html[dir="rtl"] .flex-row {
    flex-direction: row-reverse;
}

/* RTL for breadcrumb */
html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    content: var(--bs-breadcrumb-divider, "/");
    float: right;
    padding-left: 0.5rem;
    padding-right: 0;
}

/* RTL for pagination */
html[dir="rtl"] .pagination {
    padding-right: 0;
}

/* Form elements RTL */
html[dir="rtl"] .form-control,
html[dir="rtl"] .form-select {
    text-align: right;
}

/* Buttons RTL */
html[dir="rtl"] .btn {
    text-align: right;
}

/* Card header RTL */
html[dir="rtl"] .card-header {
    text-align: right;
}

/* Table RTL */
html[dir="rtl"] .table {
    text-align: right;
}

html[dir="rtl"] .table th,
html[dir="rtl"] .table td {
    text-align: right;
}

/* Alert RTL */
html[dir="rtl"] .alert {
    text-align: right;
}

/* Modal RTL */
html[dir="rtl"] .modal-content {
    text-align: right;
}

/* Search input RTL - detailed rules in search.css */

/* Typewriter Cursor */
html[dir="rtl"] .typewriter-cursor {
    margin-right: 3px;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .navbar,
    .theme-toggle,
    .language-dropdown,
    footer {
        display: none;
    }

    body {
        background-color: white;
        color: black;
    }
}

/* ============================================
   GLOBAL UTILITIES
   ============================================ */

* {
    box-sizing: border-box;
}

table {
    font-size: var(--fs-meta);
}

/* ============================================
   INSIDE PAGE HEADER
   ============================================ */

.inside-page-header {
    font-size: var(--fs-lead);
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--primary-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.inside-page-header i {
    color: var(--primary-color);
}


html[data-bs-theme="dark"] .inside-page-header h2 {
    color: var(--text-color);
}

html[data-bs-theme="dark"] .inside-page-header p {
    color: var(--text-muted);
}


/* ============================================
   BUTTONS
   ============================================ */

.btn {
    font-size: var(--base-font-size);
}

.btn-primary {
    background-color: var(--primary-color);
    border: none;
    padding: 0.625rem 1.5rem;
    font-weight: 600;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover {
    background-color: var(--secondary-color);
    box-shadow: var(--shadow);
}

/* ============================================
   CARDS
   ============================================ */

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Informational cards: tonal shift only, no transform/shadow at rest or hover */
.card:hover {
    background-color: var(--surface-sunken);
    border-color: var(--border-strong);
}

/* Clickable cards: earn a Lift shadow on hover (No-Lift-Reflex exemption) */
a > .card:hover,
.is-clickable > .card:hover,
.is-clickable:hover {
    box-shadow: var(--shadow-lg);
}

@media (prefers-reduced-motion: no-preference) {
    a > .card:hover,
    .is-clickable > .card:hover,
    .is-clickable:hover {
        transform: translateY(-2px);
    }
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero-section {
    background-color: var(--primary-color);
    color: white;
    padding: 100px 0;
    text-align: center;
}

.hero-section h1 {
    font-size: var(--fs-display);
    font-weight: 700;
    margin-bottom: 1rem;
    text-wrap: balance;
}

.hero-section p {
    font-size: var(--fs-title);
    opacity: 0.9;
}

/* ============================================
   STAT CARDS
   ============================================ */

.stat-card {
    background-color: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    height: 100%;
    border: 1px solid var(--border-color);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.stat-card:hover {
    background-color: var(--surface-sunken);
    border-color: var(--border-strong);
}

.stat-card h2 {
    font-size: var(--fs-display);
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

/* ============================================
   IMAGES
   ============================================ */

.image-thumbnail {
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 2px solid transparent;
}

.image-thumbnail:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow);
    border-color: var(--primary-color);
}

.image-thumbnail.active {
    border-color: var(--primary-color);
}

/* ============================================
   SEARCH
   ============================================ */

.search-container {
    max-width: 600px;
    margin: 0 auto;
}

.search-input {
    border-radius: var(--radius-pill);
    padding: 1rem 1.5rem;
    border: 2px solid var(--border-color);
    background-color: var(--card-bg);
    color: var(--text-color);
    transition: border-color 0.2s ease;
}

.search-input:focus-visible {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary-color) 18%, transparent);
}

/* ============================================
   THEME TOGGLE
   ============================================ */

.theme-toggle {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: var(--fs-title);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.theme-toggle:hover {
    background-color: var(--border-color);
}

.theme-toggle-wrapper {
    display: inline-block;
}

/* ============================================
   LANGUAGE DROPDOWN
   ============================================ */

.language-dropdown .dropdown-toggle {
    background: none;
    border: none;
    color: var(--text-color);
}

.language-dropdown .dropdown-toggle:hover {
    color: var(--primary-color);
}

/* ============================================
   PAGINATION
   ============================================ */

.pagination .page-link {
    color: var(--text-color);
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

.pagination .page-link:hover {
    color: var(--primary-color);
    background-color: var(--border-color);
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* ============================================
   TABLES
   ============================================ */

.table {
    color: var(--text-color);
}

.table thead th {
    border-color: var(--border-strong);
    background-color: var(--surface-sunken);
}

.table tbody tr {
    border-color: var(--border-color);
}

.table tbody tr:hover {
    background-color: var(--surface-sunken);
}

/* ============================================
   FORMS
   ============================================ */

.form-control,
.form-select {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary-color) 18%, transparent);
    background-color: var(--card-bg);
    color: var(--text-color);
}

.form-label {
    color: var(--text-color);
    font-weight: 500;
}

/* ============================================
   ALERTS
   ============================================ */

.alert {
    border-radius: var(--radius-lg);
    border: none;
}

/* ============================================
   SIDEBAR
   ============================================ */

.sidebar {
    background-color: var(--card-bg);
    border-right: 1px solid var(--border-color);
    min-height: calc(100vh - 56px);
}

.sidebar .nav-link {
    color: var(--text-color);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 0.25rem;
}

.sidebar .nav-link:hover {
    background-color: var(--border-color);
    color: var(--primary-color);
}

.sidebar .nav-link.active {
    background-color: var(--primary-color);
    color: white;
}

/* ============================================
   RESPONSIVE (Global Components)
   ============================================ */

@media (max-width: 768px) {
    .hero-section p {
        font-size: var(--fs-body);
    }
}

@media (max-width: 576px) {
    .hero-section {
        padding: 60px 0;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */

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

.fade-in {
    animation: fadeIn 0.5s ease forwards;
}

/* Respect reduced-motion: skip entrance animation, show content immediately */
@media (prefers-reduced-motion: reduce) {
    .fade-in {
        animation: none;
        opacity: 1;
    }
}

/* ============================================
   FONT SIZING (component-level)
   Utility classes .fs-1..fs-6 are intentionally NOT redefined here: Bootstrap's
   native fs-* scale owns them so utility classes stay consistent across the app.
   ============================================ */

a.badge {
    font-size: var(--fs-meta);
}

a.badge:hover {
    color: var(--accent-coral);
}

.card-title {
    font-size: var(--fs-title);
}

.dropdown-item {
    font-size: var(--fs-subtitle);
}

/* Form controls inherit the base rem scale so the accessibility font-size
   control (data-font-size on <html>) scales them together with the body. */
.form-control,
.form-select,
input,
textarea,
select {
    font-size: inherit;
}

.form-label {
    font-size: var(--fs-label);
}

/* ============================================
   MODULE POSITION CONTAINERS
   ============================================ */

.position-header-top .container-fluid,
.position-main-nav .container-fluid,
.position-header-bottom .container-fluid,
.position-breadcrumb .container-fluid,
.position-footer-top .container-fluid,
.position-footer-bottom .container-fluid {
    max-width: 1400px;
    margin: 0 auto;
}

/* Position containers full width in fluid mode */
body.layout-fluid .position-header-top .container-fluid,
body.layout-fluid .position-main-nav .container-fluid,
body.layout-fluid .position-header-bottom .container-fluid,
body.layout-fluid .position-breadcrumb .container-fluid,
body.layout-fluid .position-footer-top .container-fluid,
body.layout-fluid .position-footer-bottom .container-fluid {
    max-width: 100%;
}

.position-main-nav {
    border-bottom: 1px solid var(--border-color);
    padding: 5px 0;
}

/* ============================================
   MODULES GENERAL
   ============================================ */
   
.module-title {
    font-size: var(--fs-title);
    margin-bottom: 15px;
}

/* ============================================
   TEMPLATE LAYOUT VARIABLES
   ============================================ */

:root {
    --header-main-height: 100px;
    --header-main-right-bottom-height: 50px;
    --sticky-menu-height: 60px;
    --navbar-height: 85px;
}

/* ============================================
   NAVBAR - LOGO BAR
   ============================================ */

.header-main {
    background-color: var(--card-bg);
    z-index: 1001;
    border-bottom: 1px solid var(--border-color);
}

.header-main .container-fluid {
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
    display: flex;
    align-items: stretch;
    min-height: var(--header-main-height);
}

/* Remove max-width constraint in fluid mode */
body.layout-fluid .header-main .container-fluid {
    max-width: 100%;
}

/* Logo Bar - Left Column */
.header-main-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 1rem;
}

/* header-main-left module position */
.header-main-left .module-wrapper {
    margin: 0;
}

.header-main-left .module-wrapper .module-title {
    display: none;
}

.header-main-left .virgo-logo {
    width: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Sidebar Layout - Flex structure */
.sidebar-layout {
    display: flex;
    gap: 1.5rem;
}

.sidebar-left-col,
.sidebar-right-col {
    width: 300px;
    flex-shrink: 0;
}

.sidebar-layout-content {
    flex: 1;
    min-width: 0;
}

.module-wrapper {
    margin-bottom: 2.2rem;
}

.sidebar-left-col .module-wrapper,
.sidebar-right-col .module-wrapper {
    margin-bottom: 3rem;
}

.position-main-nav .module-wrapper {
    margin-bottom: 0;
}

.sidebar-left-col .module-wrapper:last-child,
.sidebar-right-col .module-wrapper:last-child {
    margin-bottom: 0;
}

/* Tablet and below responsive */
@media (max-width: 991.98px) {
    .sidebar-layout {
        flex-direction: column;
    }

    .sidebar-left-col,
    .sidebar-right-col {
        width: 100%;
    }
}

/* Logo Bar - Right Column */
.header-main-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* Right Column - Top Section */
.header-main-right-top {
    flex: 1;
    display: flex;
    align-items: flex-start;
}

/* Right Column - Bottom Section: Search, Language, Theme */
.header-main-right-bottom {
    height: var(--header-main-right-bottom-height);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    flex-shrink: 0;
}

/* ============================================
   NAVBAR (GENERAL - Existing styles)
   ============================================ */

.navbar {
    background-color: var(--card-bg);
    box-shadow: var(--shadow);
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    padding: 0 20px;
}

/* Mobile Controls - Inline with hamburger button */
.main-nav-inner {
    display: flex;
    align-items: center;
}

@media (max-width: 575.98px) {
    .main-nav-inner {
        justify-content: space-between;
    }
}

.navbar-mobile-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.navbar-mobile-controls .search-form-wrapper {
    flex: 1;
    min-width: 200px;
}

html[data-bs-theme="dark"] .navbar {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

html[data-bs-theme="dark"] .navbar .nav-link {
    color: var(--text-color);
}

/* Main menu hover style */
.navbar .nav-link:hover {
    color: var(--primary-color);
    background-color: var(--surface-sunken);
}

html[data-bs-theme="dark"] .navbar .nav-link:hover {
    color: var(--primary-color);
    background-color: rgba(var(--bs-primary-rgb), 0.12);
}

html[data-bs-theme="dark"] .navbar-brand {
    color: var(--primary-color);
}

html[data-bs-theme="dark"] .navbar-toggler {
    border-color: var(--border-color);
    color: var(--text-color);
}

.navbar-toggler {
    padding: 0.25rem 0.5rem;
    font-size: var(--fs-subtitle);
}

.navbar-toggler-icon {
    width: 1.25rem;
    height: 1.25rem;
}

html[data-bs-theme="dark"] .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='rgba%28233, 236, 239, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Navbar Collapse (Mobile Menu) */
.navbar-collapse {
    background-color: var(--card-bg);
    border-radius: var(--radius-md);
    padding: 0.35rem;
    box-shadow: var(--shadow);
}

/* Prevent mobile menu from pushing other elements when open */
@media (max-width: 991.98px) {
    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1050;
        max-height: 70vh;
        overflow-y: auto;
    }
}

html[data-bs-theme="dark"] .navbar-collapse {
    background-color: var(--card-bg);
}

.navbar > .container-fluid {
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
    display: flex;
    align-items: center;
}

/* Remove max-width constraint in fluid mode */
body.layout-fluid .navbar > .container-fluid {
    max-width: 100%;
}

.navbar-brand {
    padding-right: 60px;
    font-weight: 700;
    font-size: var(--fs-title);
    color: var(--primary-color);
}


.nav-link {
    font-weight: 500;
    padding: 0.5rem 0.7rem;
    color: var(--text-color);
    transition: color 0.2s ease;
    border-radius: var(--radius-xs);
}

/* ============================================
   SEARCH
   ============================================ */

.search-form-wrapper {
    max-width: 300px;
}

.search-form-wrapper .form-control {
    border-radius: var(--radius-xs) 0 0 var(--radius-xs);
    border: 1px solid var(--border-color);
    background-color: var(--bg-color);
    color: var(--text-color);
}

.search-form-wrapper .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary-color) 18%, transparent);
    background-color: var(--card-bg);
}

.search-form-wrapper .input-group-text {
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    border: 1px solid var(--border-color);
    border-left: 0;
}

.search-icon-btn {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.search-icon-btn:hover {
    background-color: var(--bg-color);
}

/* Search Results Dropdown */
.search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1050;
    max-height: 400px;
    overflow-y: auto;
}

.search-results-section {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.search-results-section:last-child {
    border-bottom: none;
}

.search-results-title {
    font-size: var(--fs-meta);
    font-weight: 600;
    color: var(--text-muted);
    padding: 0.5rem 1rem;
    margin: 0;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    color: var(--text-color);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.search-result-item:hover {
    background-color: var(--bg-color);
    color: var(--primary-color);
}

.search-result-item img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--radius-xs);
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.search-result-item .result-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-color);
    border-radius: var(--radius-xs);
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.search-result-item .result-info {
    flex: 1;
    min-width: 0;
}

.search-result-item .result-title {
    font-weight: 500;
    font-size: var(--fs-subtitle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-item .result-code {
    font-size: var(--fs-meta);
    color: var(--text-muted);
}

.search-no-results {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-muted);
}

.search-loading {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-muted);
}

html[data-bs-theme="dark"] .search-results-dropdown {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

html[data-bs-theme="dark"] .search-results-section {
    border-color: var(--border-color);
}

html[data-bs-theme="dark"] .search-result-item:hover {
    background-color: var(--surface-sunken);
}

/* ============================================
   LANGUAGE SELECTOR
   ============================================ */

/* Multi-column language dropdown - CSS multi-column layout */
.lang-dropdown-multi {
    column-count: var(--lang-cols, 1);
    column-gap: 0;
}

.lang-dropdown-multi > li {
    break-inside: avoid;
    border-top: 1px solid var(--dropdown-border-color, var(--border-color));
    border-bottom: none;
}

.lang-dropdown-multi > li.col-last {
    border-bottom: 1px solid var(--dropdown-border-color, var(--border-color));
}

html[data-bs-theme="dark"] .lang-dropdown-multi > li {
    border-top-color: var(--border-color);
}

html[data-bs-theme="dark"] .lang-dropdown-multi > li.col-last {
    border-bottom-color: var(--border-color);
}

/* Language dropdown menu stays above navbar and sticky bar */
.language-dropdown {
    position: relative;
    z-index: 1020;
}

.language-dropdown .dropdown-menu {
    z-index: 1020;
}

.language-dropdown .dropdown-item.active {
    background-color: var(--primary-color);
    color: white;
}

.language-dropdown .dropdown-item.active:hover {
    background-color: var(--secondary-color);
}

/* ============================================
   MAIN WRAPPER
   ============================================ */

.main-wrapper {
    display: flex;
    min-height: calc(100vh - var(--header-main-height) - var(--sticky-menu-height) - var(--header-main-right-bottom-height));
    margin-top: 20px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* Main wrapper full width in fluid mode */
body.layout-fluid .main-wrapper {
    max-width: 100%;
}

/* Desktop: sufficient margin-top for main-wrapper */
@media (min-width: 992px) {
    .main-wrapper {
        margin-top: 10px;
    }
}

/* ============================================
   MAIN CONTENT
   ============================================ */

.main-content {
    flex: 1;
    min-width: 0;
    padding: 0 1rem;
    background-color: var(--bg-color);
}

.main-content > .container-fluid {
    max-width: 100%;
    margin-bottom: 20px;
}

/* ============================================
   PAGE HEADER SECTION (Below Breadcrumb)
   ============================================ */

.page-header {
    position: relative;
    background-color: var(--primary-color);
    color: white;
    padding: 1rem 0.5rem;
    margin-bottom: 2rem;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.page-header .container-fluid {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Page header full width in fluid mode */
body.layout-fluid .page-header .container-fluid {
    max-width: 100%;
}

.page-header h1 {
    font-size: var(--fs-headline);
    font-weight: 700;
    margin-bottom: 0.5rem;
    position: relative;
    display: inline-block;
    text-wrap: balance;
}

/* Title underline — single coral accent punctuation */
.page-header h1::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 48px;
    height: 3px;
    background: var(--accent-coral);
    border-radius: var(--radius-xs);
}

/* Page Header Dark Mode */
html[data-bs-theme="dark"] .page-header {
    background-color: var(--primary-color);
}

/* ============================================
   IMAGE MODAL (1024px max width)
   ============================================ */

/* Main clickable images */
.main-image-container img {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.main-image-container img:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-lg);
}

.image-modal-custom {
    max-width: 1024px;
}

.modal-content {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

.modal-header,
.modal-footer {
    border-color: var(--border-color);
}

/* Image Modal Styles */
#imageModal .modal-header,
#imageModal .modal-footer {
    background-color: var(--lightbox-overlay);
}

#imageModal .modal-footer {
    min-height: 30px;
}

#imageModal .btn-close {
    filter: invert(1) grayscale(1);
}

.image-modal-custom .modal-body {
    padding: 0;
    background-color: var(--lightbox-overlay);
}

.image-modal-custom .modal-content {
    background-color: transparent;
}

.image-modal-custom .modal-image {
    max-width: 100%;
    max-height: 80vh;
    display: block;
    margin: 0 auto;
}

/* ============================================
   GALLERY MODAL - IMAGE NAVIGATION
   ============================================ */

.gallery-modal-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: var(--fs-body);
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.gallery-nav-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-50%) scale(1.1);
}

.gallery-nav-btn:focus-visible {
    outline: 2px solid var(--accent-coral);
    outline-offset: 2px;
}

.gallery-nav-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.gallery-nav-btn.gallery-prev {
    left: 15px;
}

.gallery-nav-btn.gallery-next {
    right: 15px;
}

.gallery-nav-btn:disabled {
    opacity: 0.3;
    cursor: not allowed;
}

.gallery-nav-btn:disabled:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-50%) scale(1);
}

.gallery-image-counter {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-meta);
    font-weight: 500;
    z-index: 10;
}

/* Larger tap target for touch devices */
@media (max-width: 768px) {
    .gallery-nav-btn {
        width: 44px;
        height: 44px;
        font-size: var(--fs-body);
    }

    .gallery-nav-btn.gallery-prev {
        left: 10px;
    }

    .gallery-nav-btn.gallery-next {
        right: 10px;
    }

    .gallery-image-counter {
        bottom: 10px;
        font-size: var(--fs-meta);
        padding: 5px 12px;
    }
}

.image-thumbnails {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1rem;
}

.image-thumbnail-custom {
    width: 135px;
    height: auto;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 3px solid transparent;
}

.image-thumbnail-custom:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow);
}

.image-thumbnail-custom.active {
    border-color: var(--primary-color);
}

/* ============================================
   FOOTER
   ============================================ */

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

/* Site footer — dark surface tinted to each theme's identity. Colors come from
   the --footer-* variables so the theme override blocks retint the footer with
   the rest of the palette (no hardcoded values). */
.site-footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    padding: 3rem 0;
    flex-shrink: 0;
}

.site-footer .text-muted {
    color: var(--footer-text);
}

.footer-contact-icon {
    color: var(--footer-heading);
    font-size: 200%;
    line-height: 50px;
 }

.site-footer a {
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer h5 {
    color: var(--footer-heading);
    font-weight: 600;
    margin-bottom: 1rem;
}

.site-footer a:hover {
    color: var(--footer-link-hover);
}

.site-footer hr {
    border-color: var(--footer-border);
}

.site-footer > .container-fluid {
    max-width: 1400px;
    margin: 0 auto;
}

/* Footer full width in fluid mode */
body.layout-fluid .site-footer > .container-fluid {
    max-width: 100%;
}

/* Footer Position Row */
.site-footer .position-row {
    margin-bottom: 1.5rem;
}

.site-footer .position-row .position-col {
    padding: 0 1rem;
}

.site-footer .position-row .position-col + .position-col {
    border-left: 1px solid var(--footer-border);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 991px) {
    :root {
        --header-main-height: 100px;
        --sticky-menu-height: 50px;
        --navbar-height: 120px;
    }

    .header-main {
        min-height: var(--header-main-height);
    }

    .main-content {
        width: 100%;
        padding: 0 0.5rem;
        margin-top: 40px;
    }

    .main-wrapper {
        max-width: 100%;
        margin-top: 20px;
    }

    .search-form-wrapper {
        max-width: 100%;
        order: 3;
        width: 100%;
    }

    .page-header .container-fluid {
        padding: 0 1rem;
    }
}

@media (max-width: 767px) {
    .main-wrapper {
        margin-top: 20px;
    }

    .main-content {
        width: 100%;
        padding: 0 0.4rem;
    }

    .page-header h1 {
        font-size: var(--fs-h3);
    }

    .page-header {
        padding: 1.75rem 0;
    }

    .page-header h1::after {
        width: 40px;
        height: 3px;
        bottom: -6px;
    }
}

@media (max-width: 575px) {
    .main-content {
        width: 100%;
        padding: 0 0.3rem;
        margin-top: 0;
    }

    .header-main .container-fluid {
        justify-content: center;
    }
}

/* Logo container stays fixed, not pushed by menu */
.virgo-logo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 0;
    flex-grow: 0;
}

.navbar .container-fluid {
    padding-left: 0;
}

/* Main menu active item - with hover appearance */
.navbar .nav-link.active {
    color: var(--primary-color);
    background-color: var(--surface-sunken);
}

html[data-bs-theme="dark"] .navbar .nav-link.active {
    color: var(--primary-color);
    background-color: rgba(var(--bs-primary-rgb), 0.12);
}

ul.navbar-nav li.nav-item {
    margin-right: 5px;
}

/* ============================================
   RTL - LAYOUT SPECIFIC
   Arabic, Persian and other RTL languages
   ============================================ */

/* RTL for navbar */
html[dir="rtl"] .navbar-brand {
    margin-left: 1rem;
    margin-right: 0;
}

html[dir="rtl"] .navbar-nav {
    padding-right: 0;
}

html[dir="rtl"] .nav-item {
    text-align: right;
}

/* RTL for footer */
html[dir="rtl"] footer {
    text-align: right;
}

html[dir="rtl"] footer .text-start {
    text-align: right;
}

html[dir="rtl"] footer .text-end {
    text-align: left;
}

/* Title underline — RTL coral accent punctuation */
html[dir="rtl"] .page-header h1::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 0;
    width: 48px;
    height: 3px;
    background: var(--accent-coral);
    border-radius: var(--radius-xs);
}

/* ============================================
   CSS-ONLY TOOLTIP (data-tooltip attribute)
   ============================================ */

[data-tooltip] {
    position: relative;
}

/* Show on hover AND keyboard focus (WCAG 1.4.13 / 2.4.7 — keyboard parity) */
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-color);
    color: var(--card-bg);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-xs);
    font-size: var(--fs-meta);
    white-space: nowrap;
    z-index: 10000;
    pointer-events: none;
}

[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--text-color);
    z-index: 10000;
    pointer-events: none;
}

/* ============================================
   BADGE MULTILINE SUPPORT
   ============================================ */

.badge {
    white-space: normal;
    line-height: 1.4;
}


/* ============================================
   SWEET ALERT 2
   ============================================ */

.swal2-popup {
    font-size: var(--fs-body);
}

.swal2-title {
    font-size: var(--fs-title);
}

.swal2-html-container {
    font-size: var(--fs-subtitle);
}

.swal2-popup .swal2-actions .swal2-confirm {
    font-size: var(--fs-body);
}