/*
 * GTSN admin skin for Backpack (Tabler theme).
 * Source: Figma design guide (GD-26) - Roboto, Light/Dark palettes, grey menu with paper texture,
 * orange primary, rounded "paper" cards. Loaded globally via config/backpack/ui.php 'styles'.
 */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Saira+Stencil:wght@500;700&display=swap');

:root,
[data-bs-theme='light'] {
    --gtsn-orange: #fb9c18;
    --gtsn-orange-dark: #c77700;
    --gtsn-bg: #f5f5f5;
    --gtsn-card: #dedede;
    --gtsn-surface: #ffffff;
    --gtsn-text: #5a5555;
    --gtsn-menu: #5a5555;
    --gtsn-contrast: #403d3d;
    --gtsn-on-dark: #f9f9f9;
    --gtsn-airsoft: #f38454;
    --gtsn-paintball: #1882fb;
    --gtsn-lasertag: #dd4a4c;
    --gtsn-hunting: #6f996b;
    --gtsn-shooting: #ab7d61;

    --tblr-font-sans-serif: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --tblr-body-font-family: var(--tblr-font-sans-serif);
    --tblr-body-bg: var(--gtsn-bg);
    --tblr-body-color: var(--gtsn-text);
    --tblr-heading-color: var(--gtsn-contrast);
    --tblr-bg-surface: var(--gtsn-surface);
    --tblr-bg-surface-secondary: #f0f0f0;
    --tblr-border-color: #d3d3d3;
    --tblr-border-radius: 10px;
    --tblr-border-radius-lg: 12px;

    --tblr-tabler: #fb9c18;
    --tblr-tabler-rgb: 251, 156, 24;
    --tblr-secondary: #6f6a6a;
    --tblr-secondary-rgb: 111, 106, 106;
    --tblr-primary: #fb9c18;
    --tblr-primary-rgb: 251, 156, 24;
    --tblr-primary-fg: #2b2929;
    --tblr-primary-darken: #e08a0f;
    --tblr-primary-lt: #fff0d9;
    --tblr-primary-text-emphasis: #8a5200;
    --tblr-primary-bg-subtle: #fff0d9;
    --tblr-primary-border-subtle: #fdd49a;
    --tblr-link-color: var(--gtsn-orange-dark);
    --tblr-link-color-rgb: 199, 119, 0;
    --tblr-link-hover-color: #8a5200;
    --tblr-link-hover-color-rgb: 138, 82, 0;
}

[data-bs-theme='dark'] {
    --gtsn-bg: #403d3d;
    --gtsn-card: #4d4949;
    --gtsn-surface: #5a5555;
    --gtsn-text: #f5f5f5;
    --gtsn-contrast: #f9f9f9;
    --gtsn-orange-dark: #ffb54d;

    --tblr-primary-border-subtle: #7a7474;
    --tblr-tabler: #fb9c18;
    --tblr-tabler-rgb: 251, 156, 24;
    --tblr-secondary: #8d8787;
    --tblr-secondary-rgb: 141, 135, 135;
    --tblr-body-bg: #403d3d;
    --tblr-body-color: #f5f5f5;
    --tblr-heading-color: #f9f9f9;
    --tblr-bg-surface: #5a5555;
    --tblr-bg-surface-secondary: #4d4949;
    --tblr-border-color: #6d6868;
    --tblr-link-color: #ffb54d;
    --tblr-link-color-rgb: 255, 181, 77;
    --tblr-link-hover-color: #ffd08a;
    --tblr-primary-lt: rgba(251, 156, 24, 0.18);
    --tblr-primary-text-emphasis: #ffc774;
}

body {
    font-family: var(--tblr-font-sans-serif);
}

/* Light content area: faint rust texture like the Figma pages */
[data-bs-theme='light'] body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url('/gtsn/rust.png') right -200px top -120px / 1100px no-repeat, url('/gtsn/rust.png') left -300px bottom -200px / 900px no-repeat;
    opacity: 0.07;
}
.page,
.page-wrapper {
    position: relative;
    z-index: 1;
}

/* ---------- Sidebar (grey menu with paper texture) ---------- */
.navbar-vertical {
    --tblr-navbar-bg: var(--gtsn-menu);
    background-color: var(--gtsn-menu) !important;
    background-image: linear-gradient(rgba(90, 85, 85, 0.94), rgba(90, 85, 85, 0.94)), url('/gtsn/header-texture.jpg');
    background-size: cover;
    border-right: 0;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.25);
}
.navbar-vertical .navbar-brand {
    padding: 1.25rem 1rem 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
}
.gtsn-brand-logo {
    display: block;
    width: 100%;
    max-width: 190px;
    height: auto;
}
.gtsn-brand-admin {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--gtsn-orange);
    padding-left: 0.2rem;
}
.navbar-vertical .nav-link,
.navbar-vertical .dropdown-item {
    color: #f5f5f5;
    font-weight: 700;
    border-radius: 10px;
    margin: 0.1rem 0.5rem;
}
.navbar-vertical .nav-link:hover,
.navbar-vertical .nav-link:focus-visible {
    background: rgba(64, 61, 61, 0.7);
    color: #fff;
}
.navbar-vertical .nav-item.active > .nav-link,
.navbar-vertical .nav-link.active,
.navbar-vertical .dropdown-item.active {
    background: #403d3d;
    color: #fff;
    box-shadow: inset 3px 0 0 var(--gtsn-orange);
}
.navbar-vertical .nav-link-icon,
.navbar-vertical .nav-icon {
    color: #f5f5f5;
}
.navbar-vertical .dropdown-menu {
    background: rgba(64, 61, 61, 0.55);
    border: 0;
}

/* ---------- Top bar / headings ---------- */
.navbar:not(.navbar-vertical) {
    background: transparent;
    border-bottom: 0;
}
h1,
h2,
h3,
.page-title {
    font-weight: 700;
    color: var(--tblr-heading-color);
}
.page-title,
.container-fluid > h2,
section.header-operation h1 {
    font-size: 2rem;
}

/* Page titles: stencil display face, like the GTSN logo and the public site */
h1,
.page-title,
section.header-operation h1,
.auth-logo-container .gtsn-brand-admin {
    font-family: 'Saira Stencil', 'Barlow', sans-serif;
    letter-spacing: 0.01em;
}

/* ---------- "Paper" cards ---------- */
.card {
    position: relative;
    border: 1px solid #d3d3d3;
    border-radius: 12px;
    background: var(--gtsn-surface);
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.18);
}
[data-bs-theme='dark'] .card {
    border-color: #6d6868;
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.35);
}
.card-header {
    background: var(--gtsn-card);
    border-bottom: 1px solid #cfcfcf;
    border-radius: 11px 11px 0 0;
    font-weight: 700;
}
[data-bs-theme='dark'] .card-header {
    background: #4d4949;
    border-bottom-color: #6d6868;
}
/* the pinned-note screws from the Figma cards */
.card:not(.card-borderless)::before,
.card:not(.card-borderless)::after {
    content: '';
    position: absolute;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #8a8585, #3f3b3b);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    z-index: 2;
    pointer-events: none;
}
.card:not(.card-borderless)::before {
    left: 8px;
}
.card:not(.card-borderless)::after {
    right: 8px;
}
.modal .card::before,
.modal .card::after,
.dropdown-menu .card::before,
.dropdown-menu .card::after {
    display: none;
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: 10px;
    font-weight: 700;
}
.btn-primary,
.btn-success {
    --tblr-btn-bg: var(--gtsn-orange);
    --tblr-btn-border-color: var(--gtsn-orange);
    --tblr-btn-color: #2b2929;
    --tblr-btn-hover-bg: #e08a0f;
    --tblr-btn-hover-border-color: #e08a0f;
    --tblr-btn-hover-color: #1f1d1d;
    --tblr-btn-active-bg: #c77700;
    --tblr-btn-active-border-color: #c77700;
    --tblr-btn-active-color: #fff;
    --tblr-btn-focus-shadow-rgb: 251, 156, 24;
}
.btn-outline-primary {
    --tblr-btn-color: var(--gtsn-orange-dark);
    --tblr-btn-border-color: var(--gtsn-orange);
    --tblr-btn-hover-bg: var(--gtsn-orange);
    --tblr-btn-hover-border-color: var(--gtsn-orange);
    --tblr-btn-hover-color: #2b2929;
}
:focus-visible {
    outline: 2px solid var(--gtsn-orange);
    outline-offset: 2px;
}

/* ---------- Forms & tables ---------- */
.form-control,
.form-select {
    border-radius: 10px;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--gtsn-orange);
    box-shadow: 0 0 0 0.2rem rgba(251, 156, 24, 0.25);
}
.form-check-input:checked {
    background-color: var(--gtsn-orange);
    border-color: var(--gtsn-orange);
}
table.dataTable thead th,
.table thead th {
    background: #ececec;
    color: var(--gtsn-contrast);
    font-weight: 700;
}
[data-bs-theme='dark'] .table thead th {
    background: #4d4949;
    color: #f5f5f5;
}
.nav-tabs .nav-link.active {
    border-bottom: 3px solid var(--gtsn-orange);
    font-weight: 700;
}
.badge.bg-primary {
    color: #2b2929 !important;
}

/* ---------- Login: rifle photo backdrop, dark translucent card ---------- */
body:has(.auth-logo-container) {
    min-height: 100vh;
    background: #403d3d;
}
body:has(.auth-logo-container)::before {
    content: '';
    position: fixed;
    inset: -20px;
    z-index: 0;
    background: url('/gtsn/rifle-bg.jpg') center / cover no-repeat;
    filter: blur(10px) brightness(0.65);
    opacity: 1;
}
body:has(.auth-logo-container)::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(56, 55, 55, 0) 0%, rgba(56, 55, 55, 0.55) 60%, rgba(40, 38, 38, 0.9) 100%);
}
body:has(.auth-logo-container) .page,
body:has(.auth-logo-container) .page-center {
    position: relative;
    z-index: 1;
    background: transparent;
}
.auth-logo-container .gtsn-brand-logo {
    max-width: 340px;
    margin: 0 auto 0.25rem;
}
.auth-logo-container .gtsn-brand-admin {
    display: block;
    text-align: center;
    padding: 0;
    margin-bottom: 0.5rem;
}
body:has(.auth-logo-container) .card {
    background: rgba(90, 85, 85, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #f5f5f5;
    backdrop-filter: blur(6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
body:has(.auth-logo-container) .card::before,
body:has(.auth-logo-container) .card::after {
    display: none;
}
body:has(.auth-logo-container) label,
body:has(.auth-logo-container) .form-check-label,
body:has(.auth-logo-container) .card a {
    color: #f5f5f5;
}
body:has(.auth-logo-container) .card a:hover {
    color: var(--gtsn-orange);
}
body:has(.auth-logo-container) .form-control {
    background: #f9f9f9;
    color: #403d3d;
    border-color: transparent;
}
body:has(.auth-logo-container) footer {
    color: #d9d9d9;
}

@media (prefers-reduced-motion: no-preference) {
    .navbar-vertical .nav-link,
    .btn,
    .card {
        transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    }
}

body:has(.auth-logo-container) .card h1,
body:has(.auth-logo-container) .card h2,
body:has(.auth-logo-container) .card h3,
body:has(.auth-logo-container) .card .card-title {
    color: #f9f9f9;
}

/* ---------- Hover / active states: no leftover Tabler blue ---------- */
.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(var(--tblr-primary-rgb), 0.14);
    color: inherit;
}
.dropdown-item.active,
.dropdown-item:active {
    background: var(--gtsn-orange);
    color: #2b2929;
}
.table-hover > tbody > tr:hover > *,
table.dataTable tbody tr:hover > * {
    --tblr-table-hover-bg: rgba(var(--tblr-primary-rgb), 0.1);
    background-color: rgba(var(--tblr-primary-rgb), 0.1);
    color: inherit;
}
.nav-link:hover,
.list-group-item-action:hover,
.page-link:hover,
.page-link:focus {
    color: var(--tblr-link-hover-color);
}
.page-item.active .page-link {
    background: var(--gtsn-orange);
    border-color: var(--gtsn-orange);
    color: #2b2929;
}
/* Backpack hard-codes Google blue for the DataTables column/export menu */
.dataTables_wrapper .dt-buttons .dt-button-collection > div.dropdown-menu ul.dropdown-menu li .dropdown-item.active,
.dataTables_wrapper .dt-buttons .dt-button-collection > div.dropdown-menu ul.dropdown-menu li .dropdown-item.active:hover,
.dataTables_wrapper .dt-buttons .dt-button-collection > div.dropdown-menu ul.dropdown-menu li.buttons-colvis.active .dropdown-item,
.dataTables_wrapper .dt-buttons .dt-button-collection > div.dropdown-menu ul.dropdown-menu li.buttons-colvis.active .dropdown-item:hover,
.dataTables_wrapper .dt-buttons .dt-button-collection > div.dropdown-menu ul.dropdown-menu li.buttons-columnVisibility.active .dropdown-item,
.dataTables_wrapper .dt-buttons .dt-button-collection > div.dropdown-menu ul.dropdown-menu li.buttons-columnVisibility.active .dropdown-item:hover {
    background: var(--gtsn-orange);
    color: #2b2929;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--gtsn-orange) !important;
    color: #2b2929 !important;
}

/* ---------- Dark mode: forms, inputs, widgets stay readable ---------- */
[data-bs-theme='dark'] .card,
[data-bs-theme='dark'] .card-body {
    color: var(--gtsn-text);
}
[data-bs-theme='dark'] label,
[data-bs-theme='dark'] .form-label,
[data-bs-theme='dark'] .help-block,
[data-bs-theme='dark'] .form-text {
    color: var(--gtsn-text);
}
[data-bs-theme='dark'] .form-control,
[data-bs-theme='dark'] .form-select,
[data-bs-theme='dark'] .select2-container--default .select2-selection--single,
[data-bs-theme='dark'] .select2-container--default .select2-selection--multiple {
    background-color: #403d3d;
    border-color: #7a7474;
    color: #f5f5f5;
}
[data-bs-theme='dark'] .form-control::placeholder {
    color: #bdb8b8;
}
[data-bs-theme='dark'] .form-control:disabled,
[data-bs-theme='dark'] .form-control[readonly] {
    background-color: #4a4747;
    color: #d6d2d2;
}
[data-bs-theme='dark'] .dropdown-menu,
[data-bs-theme='dark'] .select2-dropdown,
[data-bs-theme='dark'] .modal-content {
    background: #5a5555;
    color: #f5f5f5;
    border-color: #7a7474;
}
[data-bs-theme='dark'] .table,
[data-bs-theme='dark'] table.dataTable {
    --tblr-table-color: #f5f5f5;
    --tblr-table-bg: transparent;
    --tblr-table-border-color: #6d6868;
    color: #f5f5f5;
}
[data-bs-theme='dark'] .breadcrumb a,
[data-bs-theme='dark'] .page-title small,
[data-bs-theme='dark'] h1 small {
    color: #ffb54d;
}
[data-bs-theme='dark'] .text-muted,
[data-bs-theme='dark'] .text-secondary {
    color: #c9c4c4 !important;
}
[data-bs-theme='dark'] .btn-secondary {
    --tblr-btn-bg: #7a7474;
    --tblr-btn-border-color: #7a7474;
    --tblr-btn-color: #fff;
    --tblr-btn-hover-bg: #8d8787;
    --tblr-btn-hover-border-color: #8d8787;
}
[data-bs-theme='dark'] .card::before,
[data-bs-theme='dark'] .card::after {
    background: radial-gradient(circle at 35% 35%, #bdb8b8, #6d6868);
}

/* ---------- Sidebar polish ---------- */
.navbar-vertical .navbar-brand {
    padding-top: 1.6rem;
}
.navbar-vertical .nav-link {
    position: relative;
}
.navbar-vertical .nav-item.active > .nav-link,
.navbar-vertical .nav-link.active,
.navbar-vertical .dropdown-item.active {
    box-shadow: none;
}
.navbar-vertical .nav-item.active > .nav-link::before,
.navbar-vertical .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 3px;
    background: var(--gtsn-orange);
}

/* Tabler navy hover on icon buttons / transparent list groups -> GTSN tint */
.btn-action.show,
.btn-action:hover,
.list-group-transparent .list-group-item.active,
.list-group-transparent .list-group-item:hover {
    background: rgba(var(--tblr-primary-rgb), 0.16);
    color: inherit;
}

/* Backpack ships its own dark-mode input colours; GTSN values win here. */
html[data-bs-theme='dark'] .form-control,
html[data-bs-theme='dark'] .form-select,
html[data-bs-theme='dark'] textarea.form-control,
html[data-bs-theme='dark'] .select2-container--default .select2-selection--single,
html[data-bs-theme='dark'] .select2-container--default .select2-selection--multiple {
    color: #f5f5f5 !important;
    -webkit-text-fill-color: #f5f5f5;
    background-color: #403d3d !important;
    border-color: #7a7474 !important;
}
html[data-bs-theme='dark'] .form-control:focus,
html[data-bs-theme='dark'] .form-select:focus {
    border-color: var(--gtsn-orange) !important;
}
html[data-bs-theme='dark'] .form-control[readonly],
html[data-bs-theme='dark'] .form-control:disabled {
    color: #d6d2d2 !important;
    -webkit-text-fill-color: #d6d2d2;
    background-color: #4a4747 !important;
}
html[data-bs-theme='dark'] .nav-tabs .nav-link {
    color: #d6d2d2;
}
html[data-bs-theme='dark'] .nav-tabs .nav-link.active {
    color: #fff;
    background: transparent;
}
html[data-bs-theme='dark'] .nav-tabs {
    border-bottom-color: #6d6868;
}
html[data-bs-theme='light'] .nav-tabs .nav-link {
    color: #6f6a6a;
}

/* Native controls (select popups, date pickers, scrollbars) follow the colour mode. */
html[data-bs-theme='light'] {
    color-scheme: light;
}
html[data-bs-theme='dark'] {
    color-scheme: dark;
}
html[data-bs-theme='dark'] select option,
html[data-bs-theme='dark'] select optgroup,
html[data-bs-theme='dark'] datalist option {
    background-color: #403d3d;
    color: #f5f5f5;
}
html[data-bs-theme='dark'] select option:checked,
html[data-bs-theme='dark'] select option:hover {
    background-color: #fb9c18;
    color: #2b2929;
}
.avatar.backpack-avatar-menu-contain,
.avatar.bg-primary {
    color: #2b2929;
}

/* ---------- Striped tables: warm greys instead of Tabler/Backpack navy ---------- */
html[data-bs-theme='light'] .table,
html[data-bs-theme='light'] table.dataTable {
    --tblr-table-striped-bg: #efefef !important;
    --tblr-table-hover-bg: rgba(251, 156, 24, 0.12) !important;
    --tblr-table-border-color: #dcdcdc;
}
html[data-bs-theme='dark'] .table,
html[data-bs-theme='dark'] table.dataTable {
    --tblr-table-striped-bg: #4d4949 !important;
    --tblr-table-hover-bg: rgba(251, 156, 24, 0.18) !important;
    --tblr-table-border-color: #6d6868;
}
html[data-bs-theme='dark'] .table-striped > tbody > tr:nth-of-type(odd) > *,
html[data-bs-theme='dark'] table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * {
    --tblr-table-accent-bg: transparent;
    box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.035);
}
html[data-bs-theme='dark'] .table-striped > tbody > tr:nth-of-type(even) > *,
html[data-bs-theme='dark'] table.dataTable.table-striped > tbody > tr:nth-of-type(even) > * {
    box-shadow: inset 0 0 0 9999px #4d4949;
}
html[data-bs-theme='light'] .table-striped > tbody > tr:nth-of-type(even) > * {
    box-shadow: inset 0 0 0 9999px #efefef;
}
html[data-bs-theme='light'] .table-striped > tbody > tr:nth-of-type(odd) > * {
    box-shadow: none;
}
.table-striped > tbody > tr:hover > *,
table.dataTable.table-striped > tbody > tr:hover > * {
    box-shadow: inset 0 0 0 9999px rgba(251, 156, 24, 0.14) !important;
}

/* colour-mode toggle in the (always dark) sidebar */
.navbar-vertical .la-sun,
.navbar-vertical .la-moon,
.navbar-vertical .la-desktop,
.navbar-vertical .switch-mode,
.navbar-vertical .switch-mode * {
    color: #f5f5f5 !important;
}


/* Labels and secondary text must stay readable on both themes (the Tabler default is too dark on the dark skin). */
.gtsn-label {
    color: var(--gtsn-text);
    opacity: 0.78;
}
[data-bs-theme='dark'] .text-secondary,
[data-bs-theme='dark'] .text-muted {
    color: #d6d2d2 !important;
}
[data-bs-theme='dark'] .form-hint,
[data-bs-theme='dark'] .help-block {
    color: #d6d2d2;
}