/* =========================================================
   TRAILBOUND — Bootstrap Theme
   ========================================================= */

:root {
    /* -----------------------------------------------------
       TrailBound Color Palette
       ----------------------------------------------------- */

    --tb-background: #F3D39A;
    --tb-surface: #FFF9EC;

    --tb-primary: #6B4F32;
    --tb-primary-dark: #4A3522;
    --tb-secondary: #8A6A43;
    --tb-accent: #B77935;

    --tb-success: #5F7D4A;
    --tb-warning: #C28A32;
    --tb-danger: #9B3E32;

    --tb-text: #30271F;
    --tb-muted: #756A5B;

    --tb-border: #C7AA78;
    --tb-border-light: #DECBA5;

      /* UI */

    --tb-button-primary: #A67C4F;
    
    .tb-character-name {
        color: var(--tb-surface);
    }

    .tb-character-name:hover,
    .tb-character-name:focus {
        color: var(--tb-muted);
    }

     /* Shadows */

    --bs-box-shadow-sm:
        0 2px 4px rgba(74, 53, 34, 0.16);

    --bs-box-shadow:
        0 3px 8px rgba(74, 53, 34, 0.20);

    --bs-box-shadow-lg:
        0 6px 16px rgba(74, 53, 34, 0.24);


    /* -----------------------------------------------------
       Bootstrap variable overrides
       ----------------------------------------------------- */

    --bs-body-bg: var(--tb-background);
    --bs-body-color: var(--tb-text);

    --bs-primary: var(--tb-primary);
    --bs-primary-rgb: 107, 79, 50;

    --bs-secondary: var(--tb-secondary);
    --bs-secondary-rgb: 138, 106, 67;

    --bs-success: var(--tb-success);
    --bs-success-rgb: 95, 125, 74;

    --bs-warning: var(--tb-warning);
    --bs-warning-rgb: 194, 138, 50;

    --bs-danger: var(--tb-danger);
    --bs-danger-rgb: 155, 62, 50;

    --bs-border-color: var(--tb-border-light);

    --bs-link-color: var(--tb-primary);
    --bs-link-hover-color: var(--tb-primary-dark);

    --bs-border-radius: 0.35rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
}


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

html {
    min-height: 100%;
    width: 100%;
    max-width: 100%;
}

body {
    min-height: 100%;
    width: 100%;
    max-width: 100%;

    border-radius: 0.35rem;

    background-color: var(--tb-background);
    background-image:
        radial-gradient(
            ellipse at center,
            rgba(255, 255, 255, 0.25) 0%,
            rgba(255, 255, 255, 0) 70%
        ),
        repeating-linear-gradient(
            0deg,
            rgba(107, 79, 50, 0.018) 0px,
            rgba(107, 79, 50, 0.018) 1px,
            transparent 1px,
            transparent 4px
        );
    color: var(--tb-text);

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.5;
}


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

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--tb-primary-dark);
    font-weight: 700;
}

.text-muted {
    color: var(--tb-muted) !important;
}


/* =========================================================
   LINKS
   ========================================================= */

a {
    color: var(--tb-primary);
}

a:hover {
    color: var(--tb-primary-dark);
}


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

.card {
    background-color: var(--tb-primary);
    border: 1px solid var(--tb-primary-dark);
    color: var(--tb-surface);
    box-shadow: var(--bs-box-shadow-sm);

     overflow: hidden;
}

.card-header {
    background-color: var(--tb-primary-dark);
    border-bottom: 1px solid rgba(255, 249, 236, 0.15);
    color: var(--tb-surface);
    font-weight: 700;
}

.card-body {
    color: var(--tb-surface);
}

.card-title,
.card-subtitle {
    color: var(--tb-surface);
}

.card-footer {
    background-color: var(--tb-primary-dark);
    border-top: 1px solid rgba(255, 249, 236, 0.15);
    color: var(--tb-surface);
}

.card .text-muted {
    color: #DECBA5 !important;
}

.card a {
    color: #E8D4AE;
}

.card a:hover {
    color: var(--tb-surface);
}

.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6 {
    color: var(--tb-surface);
}


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

.btn {
    font-weight: 600;
    border-width: 1px;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        transform 0.1s ease,
        box-shadow 0.15s ease;
}

.btn:active {
    transform: translateY(1px);
}


/* Primary */

.btn-primary {
    --bs-btn-color: var(--tb-surface);
    --bs-btn-bg: var(--tb-button-primary);
    --bs-btn-border-color: var(--tb-button-primary);

    --bs-btn-hover-color: var(--tb-surface);
    --bs-btn-hover-bg: var(--tb-primary-dark);
    --bs-btn-hover-border-color: var(--tb-primary-dark);

    --bs-btn-active-color: var(--tb-surface);
    --bs-btn-active-bg: var(--tb-primary-dark);
    --bs-btn-active-border-color: var(--tb-primary-dark);

    --bs-btn-disabled-color: var(--tb-surface);
    --bs-btn-disabled-bg: var(--tb-button-primary);
    --bs-btn-disabled-border-color: var(--tb-button-primary);
}

/* Secondary */

.btn-secondary {
    --bs-btn-color: var(--tb-surface);
    --bs-btn-bg: var(--tb-secondary);
    --bs-btn-border-color: var(--tb-secondary);

    --bs-btn-hover-color: var(--tb-surface);
    --bs-btn-hover-bg: var(--tb-primary);
    --bs-btn-hover-border-color: var(--tb-primary);
}


/* Outline */

.btn-outline-primary {
    --bs-btn-color: var(--tb-primary);
    --bs-btn-border-color: var(--tb-primary);

    --bs-btn-hover-color: var(--tb-surface);
    --bs-btn-hover-bg: var(--tb-primary);
    --bs-btn-hover-border-color: var(--tb-primary);
}


/* Accent */

.btn-accent {
    color: var(--tb-surface);
    background-color: var(--tb-accent);
    border-color: var(--tb-accent);
}

.btn-accent:hover {
    color: var(--tb-surface);
    background-color: #9C6328;
    border-color: #9C6328;
}


/* Danger */

.btn-danger {
    --bs-btn-color: var(--tb-surface);
    --bs-btn-bg: var(--tb-danger);
    --bs-btn-border-color: var(--tb-danger);

    --bs-btn-hover-color: var(--tb-surface);
    --bs-btn-hover-bg: #7F3027;
    --bs-btn-hover-border-color: #7F3027;
}


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

.badge {
    font-weight: 600;
}

.bg-primary {
    background-color: var(--tb-primary) !important;
}

.bg-secondary {
    background-color: var(--tb-secondary) !important;
}

.bg-success {
    background-color: var(--tb-success) !important;
}

.bg-warning {
    background-color: var(--tb-warning) !important;
}

.bg-danger {
    background-color: var(--tb-danger) !important;
}


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

.alert {
    border-width: 1px;
}

.alert-success {
    --bs-alert-color: #40552F;
    --bs-alert-bg: #E8EED9;
    --bs-alert-border-color: #AFC095;
}

.alert-warning {
    --bs-alert-color: #725014;
    --bs-alert-bg: #F8EBC9;
    --bs-alert-border-color: #DDB866;
}

.alert-danger {
    --bs-alert-color: #682A23;
    --bs-alert-bg: #F4DDD8;
    --bs-alert-border-color: #CC9187;
}

.alert-info {
    --bs-alert-color: #514532;
    --bs-alert-bg: #EEE5D2;
    --bs-alert-border-color: #CDBD9F;
}


/* =========================================================
   PROGRESS BARS
   ========================================================= */

.progress {
    background-color: #E3D5B9;
    border: 1px solid var(--tb-border);
    height: 0.8rem;
}

.progress-bar {
    background-color: var(--tb-primary);
}

.progress-bar.bg-success {
    background-color: var(--tb-success) !important;
}

.progress-bar.bg-warning {
    background-color: var(--tb-warning) !important;
}

.progress-bar.bg-danger {
    background-color: var(--tb-danger) !important;
}


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

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

.form-control:focus,
.form-select:focus {
    background-color: #fffdf5;
    border-color: var(--tb-accent);

    color: var(--tb-text);

    box-shadow:
        0 0 0 0.2rem rgba(183, 121, 53, 0.18);
}

.form-control::placeholder {
    color: var(--tb-muted);
}


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

.table {
    --bs-table-color: var(--tb-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--tb-border-light);
}

.table thead th {
    background-color: rgba(107, 79, 50, 0.10);
    color: var(--tb-primary-dark);
    font-weight: 700;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: rgba(183, 121, 53, 0.08);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.nav-link {
    color: var(--tb-primary);
    font-weight: 500;
}

.nav-link:hover {
    color: var(--tb-primary-dark);
}

.nav-link.active {
    color: var(--tb-primary-dark);
    font-weight: 700;
}


/* =========================================================
   DROPDOWNS
   ========================================================= */

.dropdown-menu {
    background-color: var(--tb-surface);
    border-color: var(--tb-border);
    box-shadow: var(--bs-box-shadow);
}

.dropdown-item {
    color: var(--tb-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(107, 79, 50, 0.10);
    color: var(--tb-primary-dark);
}

.dropdown-divider {
    border-color: var(--tb-border-light);
}


/* =========================================================
   MODALS
   ========================================================= */

.modal-content {
    background-color: var(--tb-surface);
    border-color: var(--tb-border);
    box-shadow: var(--bs-box-shadow-lg);
}

.modal-header {
    background-color: rgba(107, 79, 50, 0.08);
    border-bottom-color: var(--tb-border-light);
}

.modal-footer {
    border-top-color: var(--tb-border-light);
}


/* =========================================================
   TOASTS
   ========================================================= */

.toast {
    background-color: var(--tb-surface);
    border-color: var(--tb-border);
}

.toast-header {
    background-color: rgba(107, 79, 50, 0.08);
    color: var(--tb-text);
}


/* =========================================================
   TRAILBOUND GAME COMPONENTS
   ========================================================= */


/* Game panel */

.tb-panel {
    background-color: var(--tb-surface);
    border: 1px solid var(--tb-border);
    border-radius: 0.4rem;
    box-shadow: var(--bs-box-shadow-sm);
}

/* Death panel */

.tb-death-panel {
    background-image:
        linear-gradient(
            rgba(255, 249, 236, 0.75),
            rgba(255, 249, 236, 0.75)
        ),
        url('../img/game_over.png');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Panel heading */

.tb-panel-title {
    color: var(--tb-primary-dark);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* Main game header */

.tb-header {
    background-color: var(--tb-primary-dark);
    color: var(--tb-surface);
    border-bottom: 2px solid var(--tb-accent);
}

.tb-header a {
    color: var(--tb-surface);
    text-decoration: none;
}

.tb-header a:hover {
    color: #E8D4AE;
}


/* Game action bar */

.tb-action-bar {
    background-color: rgba(107, 79, 50, 0.08);
    border-top: 1px solid var(--tb-border);
    padding: 0.75rem;
}


/* Map */

.tb-map {
    background-color: #D8C28F;
    border: 2px solid var(--tb-primary);
    border-radius: 0.4rem;
    overflow: hidden;
    position: relative;
}


/* Game log */

.tb-log {
    background-color: var(--tb-surface);
    border: 1px solid var(--tb-border);
    color: var(--tb-text);
    padding: 1rem;
}


/* Supply row */

.tb-supply {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0.55rem 0;

    border-bottom: 1px solid var(--tb-border-light);
}

.tb-supply:last-child {
    border-bottom: 0;
}

.tb-supply-name {
    color: var(--tb-surface);
}

.tb-supply-value {
    color: var(--tb-surface);
    font-weight: 700;
}


/* Character status */

.tb-status-healthy {
    color: var(--tb-success);
}

.tb-status-tired {
    color: var(--tb-warning);
}

.tb-status-sick {
    color: var(--tb-accent);
}

.tb-status-critical {
    color: var(--tb-danger);
}

.tb-status-dead {
    color: var(--tb-muted);
}


/* =========================================================
   DIVIDERS
   ========================================================= */

.tb-divider {
    border: 0;
    border-top: 1px solid var(--tb-border);
    opacity: 1;
}


/* =========================================================
   SMALL SCREEN ADJUSTMENTS
   ========================================================= */

@media (max-width: 767.98px) {

    .card-body {
        padding: 0.85rem;
    }

    .tb-action-bar {
        padding: 0.5rem;
    }

    .tb-action-bar .btn {
        width: 100%;
        margin-bottom: 0.4rem;
    }

    .tb-action-bar .btn:last-child {
        margin-bottom: 0;
    }

}