/*!
 * ============================================================================
 * Copyright (c) 2026 ATH SOLUTIONS (PTY) LTD. All rights reserved.
 * KwaZulu-Natal, Republic of South Africa.
 * ============================================================================
 *
 * @BEGIN Developer Log Header Block
 * @FILENAME: public/css/core/global.css
 * @TITLE: SYNATHRA
 * @DESCRIPTION: Global design tokens, dark-mode overrides, skeleton loading, density modes, and base resets
 * @AUTHOR: Ary van der Pijl
 * @COMPANY: ATH SOLUTIONS (PTY) LTD
 * @WEBSITE: https://www.ath.solutions/
 * @EMAIL: info@ath.solutions
 * @COPYRIGHT: All Rights Reserved
 * @LICENSE: ATH SOLUTIONS - PROPRIETARY SOFTWARE LICENCE AGREEMENT (https://www.ath.solutions/documents/ath_solutions_software_licence_agreement.pdf)
 *
 * BEGIN CHANGELOG
 * @IMPORTANT NOTICE: Developers working on these files MUST update and maintain the Developers Change Log, failure to do is not an option:
 * !==================================================================================================================================================================
 * VERSION 1.0.0.1
 * + File Created, Ary van der Pijl, 2026/05/01
 * + File Modified, Ary van der Pijl, 2026/05/01, [TICKET #], Enhancing
 * ==================================================================================================================================================================!
 * END CHANGELOG
 */

:root {
    /* Brand - primary amber/gold per ATH SOLUTIONS identity */
    --color-brand-100: #FFF8E1;
    --color-brand-200: #FFECB3;
    --color-brand-300: #FFE082;
    --color-brand-400: #FFD54F;
    --color-brand-500: #ffc107;
    --color-brand-600: #FFB300;
    --color-brand-700: #FF8F00;
    --color-brand-800: #FF6F00;
    --color-brand-900: #E65100;

    /* Accent - blue */
    --color-accent-100: #E3F2FD;
    --color-accent-500: #007bff;
    --color-accent-600: #0069d9;
    --color-accent-700: #0056b3;

    /* Semantic */
    --color-success: #22C55E;
    --color-warning: #F59E0B;
    --color-danger:  #EF4444;
    --color-error:   #EF4444;
    --color-info:    #3B82F6;

    /* Surfaces */
    --surface-bg: #FFFFFF;
    --surface-raised: #F8FAFC;
    --border-default: #E2E8F0;

    /* Typography */
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-tertiary: #94A3B8;

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);

    /* Transitions */
    --transition-fast:   100ms ease;
    --transition-base:   200ms ease;
    --transition-slow:   350ms ease;

    /* Z-index scale */
    --z-dropdown: 1000;
    --z-sticky:   1020;
    --z-fixed:    1030;
    --z-modal:    1050;
    --z-popover:  1060;
    --z-toast:    1070;
    --z-tooltip:  1080;

    /* Spacing scale */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
    --space-9: 36px; --space-10: 40px; --space-11: 44px; --space-12: 48px;
    --space-13: 52px; --space-14: 56px; --space-15: 60px; --space-16: 64px;

    /* Type scale */
    --text-xs: 0.75rem;  --text-sm: 0.875rem; --text-base: 1rem;
    --text-lg: 1.125rem; --text-xl: 1.25rem;  --text-2xl: 1.5rem;
    --text-3xl: 1.875rem; --text-4xl: 2.25rem;

    /* Breakpoints (reference only - use @media in rules) */
    --bp-sm: 576px; --bp-md: 768px; --bp-lg: 992px; --bp-xl: 1200px; --bp-2xl: 1400px;
}

[data-theme="dark"] {
    --surface-bg: #0C0C0E;
    --surface-raised: #141418;
    --border-default: #2A2A35;
    --text-primary: #F8FAFC;
    --text-secondary: #94A3B8;
    --text-tertiary: #64748B;
    color-scheme: dark;
}

/* Dark mode - override Bootstrap hardcoded background-color on common elements */
[data-theme="dark"] body,
[data-theme="dark"] .wrapper,
[data-theme="dark"] #main-content {
    background-color: var(--surface-bg) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .well {
    background-color: var(--surface-raised) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .card .header,
[data-theme="dark"] .card .body,
[data-theme="dark"] .card .footer {
    background-color: transparent !important;
    border-color: var(--border-default) !important;
}

[data-theme="dark"] .sidebar,
[data-theme="dark"] #left-sidebar,
[data-theme="dark"] .ls-inner-wrapper,
[data-theme="dark"] .nav-item-link {
    background-color: var(--surface-raised) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .nav-item-link:hover,
[data-theme="dark"] .nav-item-link.active {
    background-color: rgba(255,193,7,0.15) !important;
    color: var(--color-brand-500) !important;
}

[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .modal-footer {
    background-color: var(--surface-raised) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .table,
[data-theme="dark"] .table thead th,
[data-theme="dark"] .table tbody td,
[data-theme="dark"] .table tbody tr {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(255,255,255,0.05) !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] select,
[data-theme="dark"] input,
[data-theme="dark"] textarea {
    background-color: var(--surface-bg) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .dropdown-menu {
    background-color: var(--surface-raised) !important;
    border-color: var(--border-default) !important;
}

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

[data-theme="dark"] .dropdown-item:hover {
    background-color: rgba(255,193,7,0.15) !important;
}

[data-theme="dark"] .badge-light,
[data-theme="dark"] .badge-default {
    background-color: var(--surface-bg) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] hr,
[data-theme="dark"] .divider {
    border-color: var(--border-default) !important;
}

[data-theme="dark"] .text-muted {
    color: var(--text-secondary) !important;
}

/* Input groups */
[data-theme="dark"] .input-group-text {
    background-color: var(--surface-raised) !important;
    border-color: var(--border-default) !important;
    color: var(--text-secondary) !important;
}

/* List group */
[data-theme="dark"] .list-group-item {
    background-color: var(--surface-raised) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .list-group-item:hover {
    background-color: rgba(255,193,7,0.08) !important;
}
[data-theme="dark"] .list-group-item.active {
    background-color: rgba(255,193,7,0.15) !important;
    border-color: var(--color-brand-500) !important;
    color: var(--color-brand-500) !important;
}

/* Tabs */
[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--border-default) !important;
}
[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-secondary) !important;
    border-color: transparent !important;
}
[data-theme="dark"] .nav-tabs .nav-link:hover {
    color: var(--text-primary) !important;
    border-color: var(--border-default) var(--border-default) transparent !important;
    background-color: rgba(255,255,255,0.04) !important;
}
[data-theme="dark"] .nav-tabs .nav-link.active,
[data-theme="dark"] .nav-tabs .nav-item.show .nav-link {
    color: var(--color-brand-500) !important;
    background-color: var(--surface-raised) !important;
    border-color: var(--border-default) var(--border-default) var(--surface-raised) !important;
}
[data-theme="dark"] .tab-content { color: var(--text-primary) !important; }

/* Pills */
[data-theme="dark"] .nav-pills .nav-link {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .nav-pills .nav-link.active,
[data-theme="dark"] .nav-pills .show > .nav-link {
    background-color: var(--color-brand-500) !important;
    color: #1a1a1a !important;
}

/* Pagination */
[data-theme="dark"] .page-link {
    background-color: var(--surface-raised) !important;
    border-color: var(--border-default) !important;
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .page-link:hover {
    background-color: rgba(255,193,7,0.12) !important;
    color: var(--color-brand-500) !important;
}
[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--color-brand-500) !important;
    border-color: var(--color-brand-500) !important;
    color: #1a1a1a !important;
}
[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--surface-bg) !important;
    border-color: var(--border-default) !important;
    color: var(--text-tertiary) !important;
}

/* Breadcrumb */
[data-theme="dark"] .breadcrumb { background-color: transparent !important; }
[data-theme="dark"] .breadcrumb-item a { color: var(--color-brand-500) !important; }
[data-theme="dark"] .breadcrumb-item.active,
[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-secondary) !important;
}

/* Block headers (template page titles) */
[data-theme="dark"] .block-header h1,
[data-theme="dark"] .block-header h2,
[data-theme="dark"] .block-header h3 { color: var(--text-primary) !important; }
[data-theme="dark"] .block-header small,
[data-theme="dark"] .block-header p  { color: var(--text-secondary) !important; }

/* Progress tracks */
[data-theme="dark"] .progress { background-color: var(--surface-raised) !important; }

/* Alerts */
[data-theme="dark"] .alert { border-color: var(--border-default) !important; }
[data-theme="dark"] .alert-light,
[data-theme="dark"] .alert-secondary {
    background-color: var(--surface-raised) !important;
    color: var(--text-primary) !important;
}

/* Close / dismiss button */
[data-theme="dark"] .close,
[data-theme="dark"] button.close {
    color: var(--text-secondary) !important;
    opacity: 0.7;
}
[data-theme="dark"] .close:hover { color: var(--text-primary) !important; opacity: 1; }

/* Pre / code (wiki, documents) */
[data-theme="dark"] pre,
[data-theme="dark"] code {
    background-color: var(--surface-raised) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}

/* Tooltips */
[data-theme="dark"] .tooltip-inner {
    background-color: var(--text-primary) !important;
    color: var(--surface-bg) !important;
}
[data-theme="dark"] .bs-tooltip-top .arrow::before,
[data-theme="dark"] .bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: var(--text-primary) !important;
}

/* Popovers */
[data-theme="dark"] .popover {
    background-color: var(--surface-raised) !important;
    border-color: var(--border-default) !important;
}
[data-theme="dark"] .popover-header {
    background-color: var(--surface-bg) !important;
    border-bottom-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .popover-body { color: var(--text-primary) !important; }

/* Density Modes */
[data-density="compact"] {
    --row-height: 32px;
    --cell-padding: 4px 8px;
    --font-size-base: 13px;
}
[data-density="comfortable"] {
    --row-height: 48px;
    --cell-padding: 10px 15px;
    --font-size-base: 14px;
}
[data-density="spacious"] {
    --row-height: 64px;
    --cell-padding: 16px 20px;
    --font-size-base: 15px;
}

body { 
    font-size: var(--font-size-base, 14px); 
    background-color: var(--surface-bg);
    color: var(--text-primary);
}

.table td, .table th { 
    padding: var(--cell-padding, 10px 15px); 
    height: var(--row-height, 48px); 
    vertical-align: middle; 
}

/* Base interactive elements */
a, button, .btn, [onclick], [data-id], .cursor-pointer, .clickable-cell, .nav-item-link, .cmd-item { 
    cursor: pointer !important; 
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg, var(--surface-raised) 25%, var(--border-default) 50%, var(--surface-raised) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Sidebar Accordion ────────────────────────────────────────────────────── */
.nav-section {
    list-style: none;
}

.nav-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px 5px;
    cursor: pointer;
    user-select: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.2s;
}

.nav-section-header:hover {
    color: rgba(255, 255, 255, 0.75);
}

.nav-section-chevron {
    font-size: 13px;
    transition: transform 0.25s ease;
    flex-shrink: 0;
    opacity: 0.6;
}

/* Collapsed state - chevron points right */
.nav-section--collapsed .nav-section-chevron {
    transform: rotate(-90deg);
}

/* Items wrapper - smooth height animation via max-height */
.nav-section-items {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    max-height: 1200px;
    opacity: 1;
    transition: max-height 0.3s ease, opacity 0.2s ease;
}

.nav-section--collapsed .nav-section-items {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

/* Keep nav-item-link padding consistent inside accordion */
.nav-section-items .nav-item-link > a {
    padding-left: 20px;
}

/* Dark theme compatibility (sidebar is typically dark already) */
[data-theme="dark"] .nav-section-header {
    color: rgba(255, 255, 255, 0.3);
}
[data-theme="dark"] .nav-section-header:hover {
    color: rgba(255, 255, 255, 0.7);
}

/* ── WCAG 2.2 AA SC 2.4.11: Visible focus indicators ────────────────────── */
/* Dark inner outline contrasts ≥3:1 vs white; amber glow provides brand identity */
*:focus-visible {
    outline: 2px solid #1a1a1a !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px rgba(255, 193, 7, 0.45) !important;
}

/* Inputs/textareas: inset ring */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #1a1a1a !important;
    outline-offset: 0 !important;
    box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.4) !important;
}

/* Buttons */
button:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible {
    outline: 2px solid #1a1a1a !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px rgba(255, 193, 7, 0.45) !important;
}

/* Dark mode: white inner ring contrasts vs dark backgrounds */
[data-theme="dark"] *:focus-visible {
    outline-color: #ffffff !important;
    box-shadow: 0 0 0 5px rgba(255, 193, 7, 0.5) !important;
}

/* Skip to main content link for keyboard users */
.skip-to-main {
    position: absolute;
    top: -100%;
    left: 8px;
    z-index: 9999;
    padding: 8px 16px;
    background: var(--color-brand-500, #ffc107);
    color: #1a1a1a;     /* dark on amber - contrast ≈ 8.5:1 passes WCAG AA */
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0 0 4px 4px;
    text-decoration: none;
    transition: top 0.15s;
}

.skip-to-main:focus {
    top: 0;
    outline: 2px solid #1a1a1a !important;
    outline-offset: 2px !important;
}

/* ── Component: Primary Button ─────────────────────────────────────────────── */
/* Override template's blue with brand amber. Dark text required: white on amber */
/* is only ~1.7:1 contrast, failing WCAG AA. #1a1a1a on #ffc107 is ~8.5:1. */
.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary.active {
    background-color: #3f6296 !important;
    border-color: #648dcb !important;
    color: white !important;
}
.btn-primary:hover {
    background-color: var(--color-brand-600, #FFB300) !important;
}

/* Accent button - explicit blue CTA when needed */
.btn-accent {
    background-color: var(--color-accent-500, #007bff) !important;
    border-color: var(--color-accent-600, #0069d9) !important;
    color: #fff !important;
}
.btn-accent:hover {
    background-color: var(--color-accent-600, #0069d9) !important;
}

/* ── WCAG 2.3.3 - Reduce motion for users who prefer it ────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* Skeleton shimmer is decorative - stop it entirely */
    .skeleton {
        animation: none !important;
        background: var(--surface-raised) !important;
    }
}

/* ── Print & PDF Styles ──────────────────────────────────────────────────── */
@media print {
    /* Normalise to white page with black text */
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* Hide non-printable chrome */
    #left-sidebar,
    .sidebar,
    .ls-inner-wrapper,
    .nav-section,
    .navbar,
    .page-loader-wrapper,
    .skip-to-main,
    #cookie-consent-banner,
    #cmd-palette,
    #toast-container,
    .btn:not(.print-visible),
    .fab,
    .modal-backdrop,
    .dropdown-menu,
    .tooltip,
    .popover,
    .breadcrumb,
    [data-toggle="dropdown"],
    .nav-tabs,
    .nav-pills,
    .block-header .breadcrumb,
    .no-print {
        display: none !important;
    }

    /* Expand main content to full width */
    #main-content,
    .main-content,
    .container-fluid,
    .wrapper {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Page sizing */
    @page {
        margin: 1.5cm 2cm;
        size: A4 portrait;
    }

    /* Page break helpers */
    .page-break-before { page-break-before: always !important; }
    .page-break-after  { page-break-after: always !important; }
    .no-page-break     { page-break-inside: avoid !important; }

    /* Avoid breaking cards mid-page */
    .card, .panel, tr, img { page-break-inside: avoid; }

    /* Headings should not be orphaned at the bottom of a page */
    h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }

    /* Tables - show full border in print */
    table {
        border-collapse: collapse !important;
        width: 100% !important;
    }
    table td,
    table th {
        border: 1px solid #ccc !important;
        padding: 6px 10px !important;
    }
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }

    /* Show link URLs inline (useful for reports/documents) */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.75em;
        color: #555 !important;
    }
    /* Suppress URL expansion for internal/js anchors */
    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="/"]:not([href*="."]):after {
        content: none;
    }

    /* Keep images at a reasonable size */
    img { max-width: 100% !important; }

    /* Invoice-specific: keep summary rows together */
    .invoice-summary,
    .invoice-totals,
    .invoice-header { page-break-inside: avoid; }

    /* Charts - show as static (canvas rendered at time of print) */
    canvas { max-width: 100% !important; height: auto !important; }
}