/* =====================================================================
   SJF green theme (from "SJF_Donation_Portal_Redesign_Preview")
   COLOURS AND SURFACES ONLY - no font sizes, no layout, no behaviour.
   Linked last in Views\Shared\_Layout.cshtml and Views\Home\Index.cshtml.

   It (1) re-points the colour variables every page uses to the green palette and
   (2) gives common controls (inputs, buttons, tables, pop-ups) the same field and
   button colours as the redesign. Page-specific hard-coded colours are swapped by
   Apply-SjfGreenTheme.ps1.
   ===================================================================== */

/* "html:root" outranks the ":root" blocks inside each page, wherever they appear */
html:root {
    /* palette */
    --sjf-green-900: #3E5536;
    --sjf-green-800: #4A6440;
    --sjf-green-700: #4D6843;      /* primary */
    --sjf-green-600: #5E7B52;
    --sjf-green-500: #6A8A5A;
    --sjf-green-400: #749263;      /* light */
    --sjf-green-200: #DCE5D8;      /* lines / soft fill */
    --sjf-green-100: #EEF5EF;      /* chips, hover */
    --sjf-green-050: #F5F8F3;      /* page tint */
    --sjf-ok: #2F6B43;
    --sjf-ink: #1F2A1C;
    --sjf-muted: #566051;
    --sjf-field: #FCFAF6;          /* input background */
    --sjf-field-line: #DCE5D8;     /* input border */
    --sjf-locked: #F4EFE6;         /* read-only / auto-filled */
    --sjf-focus: rgba(116, 146, 99, .22);

    /* variables used by the existing pages (login, application, upload, review ...) */
    --color-primary: var(--sjf-green-700);
    --color-primary-light: var(--sjf-green-400);
    --color-primary-dark: var(--sjf-green-900);
    --color-primary-hover: #435C3A;
    --color-secondary: var(--sjf-green-500);
    --color-secondary-hover: var(--sjf-green-600);
    --color-accent: var(--sjf-green-200);
    --font-color-dark: #2B3626;
    --font-color-muted: var(--sjf-muted);
    --bg-light: var(--sjf-green-050);
    --bg-input: var(--sjf-field);
    --border-color: var(--sjf-green-200);
    --gradient-primary: linear-gradient(135deg, var(--sjf-green-800) 0%, var(--sjf-green-400) 100%);
    --shadow-light: 0 4px 6px rgba(77, 104, 67, .10);
    --shadow-medium: 0 6px 20px rgba(77, 104, 67, .15);
    --shadow-heavy: 0 10px 40px rgba(77, 104, 67, .20);

    /* variables used by the layout, dashboards and admin pages */
    --primary-color: var(--sjf-green-700);
    --secondary-color: var(--sjf-green-600);
    --accent-color: var(--sjf-green-900);
    --light-bg: var(--sjf-green-050);
    --dark-text: var(--sjf-ink);
    --hover-bg: var(--sjf-green-100);
    --active-bg: #DCE8D7;
    --input-border: var(--sjf-field-line);
    --table-header-bg: linear-gradient(135deg, var(--sjf-green-700) 0%, var(--sjf-green-900) 100%);
    --footer-bg: var(--sjf-green-700);
}

/* ── Form fields: the redesign's cream fields with soft green lines ── */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"],
input[type="date"], input[type="search"], input[type="url"], input:not([type]),
select, textarea, .form-control {
    background-color: var(--sjf-field);
    border-color: var(--sjf-field-line);
}

    input:focus, select:focus, textarea:focus, .form-control:focus {
        border-color: var(--sjf-green-400);
        box-shadow: 0 0 0 3px var(--sjf-focus);
        outline: none;
    }

    input[readonly], textarea[readonly], input:disabled, select:disabled, textarea:disabled,
    .form-control[readonly], .form-control:disabled {
        background-color: var(--sjf-locked);
    }

    input::placeholder, textarea::placeholder {
        color: #A3AE9C;
    }

input[type="checkbox"], input[type="radio"], input[type="range"], progress {
    accent-color: var(--sjf-green-700);
}

::selection {
    background: rgba(116, 146, 99, .28);
}

/* ── Buttons (Bootstrap + SweetAlert pop-ups) ── */
.btn-primary {
    background-color: var(--sjf-green-700);
    border-color: var(--sjf-green-700);
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
        background-color: var(--sjf-green-900);
        border-color: var(--sjf-green-900);
    }

.btn-default:hover, .btn-light:hover {
    background-color: var(--sjf-green-100);
}

/* pop-ups without their own colour get the green OK button (red "Delete" buttons keep theirs) */
.swal2-styled.swal2-confirm:not([style*="background"]) {
    background-color: var(--sjf-green-700);
}

.swal2-styled:focus {
    box-shadow: 0 0 0 3px var(--sjf-focus);
}

.swal2-timer-progress-bar {
    background: var(--sjf-green-400);
}

/* ── Links, tables, pagination ── */
a {
    color: var(--sjf-green-700);
}

    a:hover, a:focus {
        color: var(--sjf-green-900);
    }

.table > thead > tr > th {
    background-color: #EAF1E7;
    border-bottom-color: var(--sjf-green-200);
}

.table-hover > tbody > tr:hover {
    background-color: var(--sjf-green-100);
}

.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover {
    background-color: var(--sjf-green-700);
    border-color: var(--sjf-green-700);
}

.pagination > li > a, .pagination > li > span {
    color: var(--sjf-green-700);
}

/* ── Scrollbars in the brand colour ── */
* {
    scrollbar-color: #B9C9B1 transparent;
}

/* ── Login / Register: deep green surface behind the white card (as in the redesign) ── */
body:has(#loginContainer)::before {
    background:
        radial-gradient(circle at 85% 10%, rgba(255, 255, 255, .10) 0, transparent 40%),
        radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(135deg, #4A6440 0%, #5E7B52 55%, #779565 100%);
}

body:has(#loginContainer) .background-waves {
    opacity: .25;
}