/* =========================================
   WARHAMMER TRACKER - GLOBAL THEME
   ========================================= */

:root {
    color-scheme: dark;
    --war-bg: #11151b;
    --war-sidebar: #181e26;
    --war-panel: #1e252d;
    --war-panel-hover: #27313a;
    --war-input: #141a21;
    --war-gold: #c7a76a;
    --war-gold-hover: #e0c48d;
    --war-crimson: #852f32;
    --war-text: #f1e9db;
    --war-muted: #a5a9af;
    --war-border: #39434d;
    --bs-body-bg: #11151b;
    --bs-body-color: #f1e9db;
    --bs-secondary-color: #a5a9af;
    --bs-emphasis-color: #f1e9db;
    --bs-border-color: #39434d;
    --bs-tertiary-bg: #1e252d;
}

/* =========================================
   BODY
   ========================================= */

html,
body {
    min-height: 100%;
    margin: 0;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    background: var(--war-bg);
    color: var(--war-text);
}

body {
    font-size: 14px;
    line-height: 1.6;
}

a,
.btn-link {
    color: var(--war-gold);
}

    a:hover,
    .btn-link:hover {
        color: var(--war-gold-hover);
    }

    a:focus-visible,
    button:focus-visible {
        outline: 2px solid var(--war-gold);
        outline-offset: 3px;
    }

.content {
    padding-top: 1.5rem;
}

/* =========================================
   TYPOGRAPHY
   ========================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--war-text);
}

h1,
h2,
h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.8rem;
}

h3 {
    font-size: 1.6rem;
}

h5 {
    font-size: 1.1rem;
}

p {
    color: #b8bfc6;
}

.text-muted,
.text-secondary {
    color: #9fa8b3 !important;
}

hr {
    border-color: #4a515a;
    opacity: 0.6;
    margin: 24px 0;
}

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

.card {
    --bs-card-bg: var(--war-panel);
    --bs-card-color: var(--war-text);
    --bs-card-border-color: var(--war-border);
    background: var(--war-panel);
    color: var(--war-text);
    border: 1px solid var(--war-border);
    border-radius: 9px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.12);
}

.card-header {
    background: #252e37;
    border-bottom: 1px solid var(--war-border);
    padding: 17px 21px;
}

    .card-header h5,
    .card-header h4 {
        margin: 0;
        color: #d9c499;
        font-family: Georgia, "Times New Roman", serif;
        font-weight: 700;
    }

.card-body {
    padding: 22px;
}

    .card-body h5 {
        color: #e6dac5;
    }

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

.table {
    --bs-table-bg: transparent;
    --bs-table-color: #e4e5e7;
    --bs-table-border-color: #39434d;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.025);
    --bs-table-striped-color: #e4e5e7;
    --bs-table-hover-bg: rgba(199, 167, 106, 0.075);
    --bs-table-hover-color: #ffffff;
    color: #e4e5e7;
    margin-bottom: 0;
}

    .table thead th {
        color: #d9c499;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        padding: 14px 13px;
        border-bottom: 1px solid #665738;
    }

    .table tbody td {
        vertical-align: middle;
        padding: 13px;
        border-bottom: 1px solid #313a43;
    }

    .table tbody tr:last-child td {
        border-bottom-color: transparent;
    }

.table-responsive {
    border-radius: 5px;
}

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

.form-label {
    color: #d9c499;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
}

.form-control,
.form-select,
textarea.form-control {
    background-color: var(--war-input);
    color: var(--war-text);
    border: 1px solid #45505b;
    border-radius: 5px;
    min-height: 42px;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .form-control:focus,
    .form-select:focus {
        background-color: var(--war-input);
        color: #ffffff;
        border-color: var(--war-gold);
        outline: none;
        box-shadow: 0 0 0 3px rgba(199, 167, 106, 0.13);
    }

    .form-control::placeholder,
    textarea.form-control::placeholder {
        color: #7f8994;
        opacity: 1;
    }

    .form-control:disabled,
    .form-select:disabled {
        background-color: #242a31;
        color: #868d94;
        border-color: #3d4650;
        opacity: 0.75;
    }

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c7a76a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

    .form-select option {
        background: #1e252d;
        color: #f1e9db;
    }

input[type="date"],
input[type="time"] {
    color-scheme: dark;
}

.form-check-input {
    background-color: #161c23;
    border-color: #67717b;
}

    .form-check-input:checked {
        background-color: var(--war-gold);
        border-color: var(--war-gold);
    }

    .form-check-input:focus {
        border-color: var(--war-gold);
        box-shadow: 0 0 0 3px rgba(199, 167, 106, 0.15);
    }

.darker-border-checkbox.form-check-input {
    border-color: #67717b;
}

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

.btn {
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary {
    --bs-btn-color: #15191e;
    --bs-btn-bg: #c7a76a;
    --bs-btn-border-color: #c7a76a;
    --bs-btn-hover-color: #15191e;
    --bs-btn-hover-bg: #e0c48d;
    --bs-btn-hover-border-color: #e0c48d;
    --bs-btn-active-color: #15191e;
    --bs-btn-active-bg: #b89960;
    --bs-btn-active-border-color: #b89960;
    --bs-btn-disabled-color: #171b20;
    --bs-btn-disabled-bg: #8f7952;
    --bs-btn-disabled-border-color: #8f7952;
}

.btn-outline-primary {
    --bs-btn-color: #c7a76a;
    --bs-btn-border-color: #8b744d;
    --bs-btn-hover-color: #15191e;
    --bs-btn-hover-bg: #c7a76a;
    --bs-btn-hover-border-color: #c7a76a;
    --bs-btn-active-color: #15191e;
    --bs-btn-active-bg: #b89960;
    --bs-btn-active-border-color: #b89960;
}

.btn-secondary {
    --bs-btn-color: #e3e6e9;
    --bs-btn-bg: #3b4550;
    --bs-btn-border-color: #535e69;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #505d69;
    --bs-btn-hover-border-color: #66727d;
}

.btn-success {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #35684d;
    --bs-btn-border-color: #407657;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #43865e;
    --bs-btn-hover-border-color: #43865e;
}

.btn-danger {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #852f32;
    --bs-btn-border-color: #a34346;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #a43f43;
    --bs-btn-hover-border-color: #b24a4e;
}

.btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(199, 167, 106, 0.23);
}

/* =========================================
   BADGES
   ========================================= */

.badge {
    font-size: 11px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 4px;
}

    .badge.bg-success {
        background-color: #2f644a !important;
        color: #e1ffea;
    }

    .badge.bg-secondary {
        background-color: #434e59 !important;
        color: #e1e5e8;
    }

    .badge.bg-warning {
        background-color: #c7a76a !important;
        color: #161a20 !important;
    }

    .badge.bg-danger {
        background-color: #852f32 !important;
        color: #ffffff;
    }

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

.alert {
    border-radius: 6px;
    font-size: 13px;
    padding: 14px 17px;
}

.alert-success {
    --bs-alert-bg: #1e382b;
    --bs-alert-color: #a6deb8;
    --bs-alert-border-color: #35684d;
}

.alert-danger {
    --bs-alert-bg: #3d2024;
    --bs-alert-color: #f0b7b7;
    --bs-alert-border-color: #852f32;
}

.alert-warning {
    --bs-alert-bg: #3d3420;
    --bs-alert-color: #edcf91;
    --bs-alert-border-color: #8a7348;
}

/* =========================================
   VALIDATION
   ========================================= */

.valid.modified:not([type="checkbox"]) {
    outline: 1px solid #4d9165;
}

.invalid {
    outline: 1px solid #b94848;
}

.validation-message {
    color: #e79999;
    font-size: 12px;
}

.blazor-error-boundary {
    background: #55272b;
    padding: 18px;
    border: 1px solid #a34346;
    border-radius: 6px;
    color: #ffffff;
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

/* =========================================
   BOOTSTRAP FORM FLOATING
   ========================================= */

.form-floating > .form-control::placeholder {
    color: #858d96;
}

.form-floating > label {
    color: #adb5bd;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: #c7a76a;
}

    .form-floating > .form-control:focus ~ label::after,
    .form-floating > .form-control:not(:placeholder-shown) ~ label::after {
        background-color: #141a21;
    }

/* =========================================
   LOGIN PAGE - FULL SCREEN
   ========================================= */

/*
   The login form has its own design.

   When Login.razor is being displayed,
   hide the normal application sidebar
   and header.

   This allows a full-screen login.
*/

body:has(.war-login-screen) .page {
    display: block !important;
}

    body:has(.war-login-screen) .page .sidebar {
        display: none !important;
    }

    body:has(.war-login-screen) .page .top-row {
        display: none !important;
    }

    body:has(.war-login-screen) .page main {
        width: 100%;
        min-height: 100vh;
    }

    body:has(.war-login-screen) .page article.content {
        max-width: none;
        margin: 0;
        padding: 0 !important;
    }

body:has(.war-login-screen) .war-login-screen {
    margin: 0 !important;
    min-height: 100vh;
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {

    h1 {
        font-size: 1.7rem;
    }

    h2 {
        font-size: 1.55rem;
    }

    h3 {
        font-size: 1.4rem;
    }

    .card-body {
        padding: 16px;
    }

    .card-header {
        padding: 14px 16px;
    }

    .table {
        font-size: 12px;
    }

        .table thead th,
        .table tbody td {
            padding: 10px 9px;
        }

    .btn {
        font-size: 12px;
    }
}