/* ─── Variables ───────────────────────────────────────────────────────── */
:root {
    --navy-light: #1A2C38;
    --navy-border: rgb(47, 69, 83);
    --navy-hover: #2f4553;
    --navy-bg: #0F2130;

    --accent-blue: #1475E1;
    --accent-blue-hover: #2685FF;
    --accent-green: #0C8A1C;
    --accent-red: #E9113C;

    --brand-blue: #0866FF; /* NEW (for custom buttons) */
    --brand-blue-hover: #0f5ec2; /* NEW */

    --text-main: rgb(177, 186, 211);
    --text-light: #fff;

    --radius: 6px;
    --radius-lg: 10px;
}

/* ─── Sidebar & Navigation ────────────────────────────────────────────── */
#sidebarToggle {
    padding-left: 24px;
    text-decoration: none;
}

#navbarDropdown {
    color: var(--accent-blue);
}

.nav {
    margin-top: 20px;
}

.header-shadow {
    box-shadow: #0003 0 4px 6px -1px, #0000001f 0 2px 4px -1px;
}

.sb-sidenav-menu {
    background: var(--navy-bg);
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.sb-sidenav-menu .nav-link {
    font-size: 14px;
    font-weight: 700;
    background: var(--navy-light);
    color: var(--text-light) !important;
    margin: 5px 10px;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

.sb-sidenav-menu .nav-link:hover {
    background-color: var(--navy-hover);
}

#layoutSidenav_content {
    background: var(--navy-light);
}

/* Hide hamburger on desktop
@media (min-width: 992px) {
  #sidebarToggle { display: none !important; }
} */


.sb-sidenav .nav .nav {
    margin-top: 0 !important;
}

/* ─── Form Elements ───────────────────────────────────────────────────── */
input, select, textarea, .form-control {
    background-color: var(--navy-bg);
    color: var(--text-light);
    border: 1px solid var(--accent-blue);
    border-radius: var(--radius);
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Segoe UI', sans-serif;
    letter-spacing: 0.3px;
    transition: all 0.2s ease-in-out;
}

input::placeholder, textarea::placeholder {
    color: #7e97a7;
}

input:focus, select:focus, textarea:focus, .form-control:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 0.15rem rgba(20, 117, 225, 0.45);
}

input:hover, select:hover, textarea:hover, .form-control:hover {
    border-color: var(--accent-blue-hover);
    box-shadow: 0 0 5px rgba(38, 133, 255, 0.4);
}

label, .form-floating > label {
    color: var(--text-main);
    font-weight: 500;
}

/* ─── Betting UI ──────────────────────────────────────────────────────── */
.bet-container {
    background-color: var(--navy-light);
    border: 1px solid var(--navy-border);
    padding: 8px 12px;
    border-radius: var(--radius);
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    justify-content: space-between;
    align-items: center;
}

.bet-option {
    background-color: var(--navy-bg);
    color: var(--text-light);
    font-weight: 600;
    font-size: 14px;
    padding: 8px 10px;
    border-radius: var(--radius);
    flex: 1;
    min-width: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bet-option:hover {
    background-color: #172b3a;
}

/* could map to a var if desired */
.bet-odds {
    color: var(--accent-blue-hover);
    font-weight: 700;
    margin-left: auto;
}

/* ─── Scroll Controls ─────────────────────────────────────────────────── */
.scroll-row-wrapper {
    margin: 16px 0;
    position: relative;
}

.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--accent-red);
    color: white;
    border: none;
    padding: 6px 10px;
    cursor: pointer;
    z-index: 10;
    border-radius: var(--radius);
}

.scroll-arrow.left {
    left: 0;
}

.scroll-arrow.right {
    right: 0;
}

.horizontal-scroll-wrapper {
    overflow-x: auto;
    white-space: nowrap;
    padding: 8px 32px;
    scroll-behavior: smooth;
}

.horizontal-scroll-wrapper::-webkit-scrollbar {
    height: 6px;
}

.horizontal-scroll-wrapper::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: var(--navy-border); /* ensure visible */
}

/* ─── Buttons ─────────────────────────────────────────────────────────── */
.btn-custom {
    background-color: var(--brand-blue);
    color: black;
    border: none;
}

.btn-custom:hover {
    background-color: var(--brand-blue);
}

.btn-primary-action {
    background-color: var(--accent-green);
    color: var(--text-light);
    border: none;
    transition: background-color 0.3s ease;
}

.btn-primary-action:hover {
    background-color: #0a7317;
}

/* Account / Logout Buttons */
.account-btn, .logout-btn {
    font-weight: 600;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: all 0.2s ease-in-out;
}

.account-btn {
    background-color: var(--brand-blue);
    color: white;
}

.account-btn:hover {
    background-color: var(--brand-blue-hover);
}

.logout-btn {
    background-color: var(--navy-border);
    color: white;
}

.logout-btn:hover {
    background-color: transparent;
    border: 1px solid var(--navy-border);
}

/* ─── Modals ──────────────────────────────────────────────────────────── */
.custom-modal {
    background-color: var(--navy-light);
    color: var(--text-main);
    border: 1px solid var(--navy-border);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.custom-modal .modal-header {
    border-bottom: 1px solid var(--navy-border);
}

.custom-modal .modal-title {
    color: var(--text-light);
}

.custom-modal input, .custom-modal textarea, .custom-modal select {
    background-color: var(--navy-bg);
    color: var(--text-main);
    border: 1px solid var(--navy-border);
}

.custom-modal input:focus,
.custom-modal textarea:focus,
.custom-modal select:focus {
    border-color: var(--accent-green);
    box-shadow: 0 0 0 0.2rem rgba(12, 138, 28, 0.25);
}

.custom-modal .btn {
    background-color: var(--accent-green);
    color: var(--text-light);
}

.custom-modal .btn:hover {
    background-color: #0b7e19;
}

/* ─── Tables & Alerts ─────────────────────────────────────────────────── */
.card, .card-body, .card-header {
    background-color: var(--navy-light);
    border: 1px solid var(--navy-border);
    color: var(--text-main);
}

.card-header {
    color: var(--text-light);
    border-bottom: 1px solid var(--navy-border);
}

th {
    color: var(--text-light);
}

.alert {
    background-color: var(--navy-bg);
    border-color: var(--navy-border);
    color: var(--text-main);
}

.alert-success {
    border-left: 4px solid var(--accent-green);
}

.alert-danger, .alert-error {
    border-left: 4px solid #dc3545;
}

/* ─── Misc ────────────────────────────────────────────────────────────── */
.svg-icon {
    color: #e5e7eb;
}

.nav-link:hover .svg-icon {
    color: white;
}

.session-status::before {
    content: "";
    display: inline-block;
    height: 8px;
    width: 8px;
    margin-right: 6px;
    background-color: #1FFF20;
    border-radius: 50%;
}

p {
    line-height: 1.2;
}

/* ─── Form Active State (kept; overlaps intentionally for clarity) ───── */
input:focus, select:focus, textarea:focus, .form-control:focus {
    background-color: var(--navy-bg);
    color: var(--text-light);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 0.15rem rgba(20, 117, 225, 0.45);
}

input, textarea, select {
    background-color: var(--navy-bg);
    color: var(--text-light);
}

input::placeholder, textarea::placeholder {
    color: #7e97a7;
}

input:hover, select:hover, textarea:hover, .form-control:hover {
    border-color: var(--accent-blue-hover);
    box-shadow: 0 0 5px rgba(38, 133, 255, 0.4);
}

/* Make Bootstrap alert close button white */
.alert .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 1;
}

/* ─── Admin Table (DataTables + Bootstrap 5) — Themed ─────────────────── */
#adminTable {
    background-color: var(--navy-light);
    color: var(--text-main);
    border: 1px solid var(--navy-border);
    border-radius: var(--radius);
    overflow: hidden;
}

/* Header */
#adminTable thead th {
    background: var(--navy-bg);
    color: var(--text-light);
    border-bottom: 1px solid var(--navy-border) !important;
    font-weight: 700;
    letter-spacing: .3px;
    vertical-align: middle;
}

/* Body rows (striped + hover) */
#adminTable tbody tr {
    background-color: var(--navy-light);
}

#adminTable.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #132635;
}

#adminTable.table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: var(--navy-light);
}

#adminTable tbody tr:hover > * {
    background-color: #1c3344 !important;
}

/* Cells and borders */
#adminTable.table > :not(caption) > * > * {
    border-bottom: 1px solid var(--navy-border);
    padding-top: .55rem;
    padding-bottom: .55rem;
    vertical-align: middle;
}

/* Force body cell text color */
#adminTable tbody td {
    color: var(--text-main) !important;
}

/* Keep readable on stripes */
#adminTable.table-striped > tbody > tr:nth-of-type(odd) > * {
    color: var(--text-main) !important;
}

#adminTable.table-striped > tbody > tr:nth-of-type(even) > * {
    color: var(--text-main) !important;
}

/* Links in table */
#adminTable a {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 600;
}

#adminTable a:hover {
    color: var(--accent-blue-hover);
    text-decoration: underline;
}

/* Checkboxes */
#adminTable .active-toggle, #adminTable .waiting-toggle {
    accent-color: var(--accent-green);
}

#adminTable .suspend-toggle {
    accent-color: var(--accent-red);
}

/* DataTables: Search */
.dataTables_wrapper .dataTables_filter label {
    color: var(--text-main);
    font-weight: 600;
}

.dataTables_wrapper .dataTables_filter input {
    background-color: var(--navy-bg) !important;
    color: var(--text-light) !important;
    border: 1px solid var(--accent-blue) !important;
    border-radius: var(--radius);
    padding: 6px 10px;
    outline: none;
    box-shadow: 0 0 0 0.15rem rgba(20, 117, 225, 0.25);
}

.dataTables_wrapper .dataTables_filter input::placeholder {
    color: #7e97a7;
}

/* DataTables: Info + Pagination */
.dataTables_wrapper .dataTables_info {
    color: var(--text-main) !important;
}

.dataTables_wrapper .dataTables_paginate .pagination {
    gap: .25rem;
}

.dataTables_wrapper .dataTables_paginate .page-link {
    background-color: var(--navy-bg);
    border: 1px solid var(--navy-border);
    color: var(--text-main);
    border-radius: var(--radius);
}

.dataTables_wrapper .dataTables_paginate .page-link:hover {
    background-color: var(--navy-hover);
    color: var(--text-light);
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #fff;
}

.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
    background-color: var(--navy-bg);
    color: #7e97a7;
    border-color: var(--navy-border);
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_paginate {
    color: var(--text-main);
}

/* DataTables: Sorting icons (FIXED: clean, themeable inline SVGs) */
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc {
    background-repeat: no-repeat;
    background-position: right .75rem center;
    padding-right: 1.75rem;
}

table.dataTable thead > tr > th.sorting {
    /* up+down chevrons (neutral) */
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='10' height='14' fill='%23b1bad3'>\
<path d='M5 0l5 6H0zM0 8l5 6 5-6z'/></svg>");
}

table.dataTable thead > tr > th.sorting_asc {
    /* up chevron in accent-blue */
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%231475E1'>\
<path d='M5 0l5 6H0z'/></svg>");
}

table.dataTable thead > tr > th.sorting_desc {
    /* down chevron in accent-blue */
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%231475E1'>\
<path d='M0 0l5 6 5-6z'/></svg>");
}

/* Responsive control icon — white triangle, no background */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    background: none !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
}

/* Wrap tweaks for long email/text */
#adminTable td {
    word-break: break-word;
}

/* Card headers gradient */
.card-header.text-white.fw-semibold {
    background: linear-gradient(180deg, var(--navy-bg), #142a3a);
    border-bottom: 1px solid var(--navy-border);
}

/* White close button for Add Block modal */
.custom-modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 1;
}

.custom-modal .btn-close:hover {
    opacity: 0.75;
}

/*************** Ledger **/
#ledgerCard .table {
    table-layout: fixed;
}

#ledgerTable {
    border: 1px solid var(--navy-border);
    border-radius: var(--radius);
}

#ledgerTable thead th {
    background: var(--navy-bg);
    color: var(--text-light);
    border-bottom: 1px solid var(--navy-border) !important;
    font-weight: 700;
    letter-spacing: .3px;
    text-align: center;
}

/* Base striping */
#ledgerTable tbody tr:nth-of-type(odd) > * {
    background-color: #132635;
    color: var(--text-main) !important;
}

#ledgerTable tbody tr:nth-of-type(even) > * {
    background-color: var(--navy-light);
    color: var(--text-main) !important;
}

#ledgerTable tbody tr:hover > * {
    background-color: #1c3344 !important;
}

#ledgerTable td {
    vertical-align: middle;
    padding-top: .55rem;
    padding-bottom: .55rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Inputs: centered values + dark theme */
#ledgerTable input[type="number"] {
    background-color: var(--navy-bg);
    color: var(--text-light);
    border: 1px solid var(--accent-blue);
    border-radius: var(--radius);
    padding: 4px 8px;
    font-size: 14px;
    max-width: 110px;
    text-align: center;
}

#ledgerTable input[type="number"]:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 0.15rem rgba(20, 117, 225, .45);
}

#ledgerTable input[type="number"]:disabled {
    opacity: .75;
}

/* Hide number spinners */
#ledgerTable input[type="number"]::-webkit-outer-spin-button,
#ledgerTable input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#ledgerTable input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* TODAY highlight */
#ledgerTable tr.table-today {
    border: 2px solid var(--accent-green);
}

#ledgerTable tr.table-today td:first-child {
    font-weight: 700;
}

#ledgerTable tr.table-today input[type="number"] {
    border-color: var(--accent-green);
    box-shadow: 0 0 0 0.15rem rgba(12, 138, 28, .25);
}

/* Card headers */
.outer-card > .card-header,
.outer-card .card > .card-header {
    background: linear-gradient(180deg, var(--navy-bg), #142a3a);
    border-bottom: 1px solid var(--navy-border);
    color: var(--text-light);
}

/* --- MOBILE OPTIMIZATION --- */
@media (max-width: 576px) {
    form.p-3.rounded {
        padding: 0.5rem !important;
    }

    #ledgerTable td, #ledgerTable th {
        padding: 0.35rem !important;
        font-size: 13px;
    }

    #ledgerTable input[type="number"] {
        max-width: 80px;
        padding: 2px 4px;
        font-size: 13px;
    }
}

.total-calculated {
    text-align: right;
}

.race-number, .horse-number {
    text-align: center;
}

h1, h2, h3, h4, h5, h6, p {
    color: var(--text-main) !important;
}

td {
    color: var(--text-main) !important;
}


#raceCardToggleBtn {
    color: #fff;
}

#raceCardToggleBtn i {
    color: #fff;
}




.social-icons {
    display: flex;
    align-items: center;
    gap: 1rem;          /* space between icons */
}

.social-icons .social-icon {
    color: #ffffff;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.social-icons .social-icon:hover {
    opacity: 0.85;
}

/* 18+ badge */
.no-under-18-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
}