/*
 * Kentron site theme: the page background and dark mode.
 * Loaded by layout/header.php after Bootstrap 3, so these rules win over Bootstrap's.
 *
 * Dark mode follows the visitor's device setting (prefers-color-scheme). Light mode is
 * Bootstrap's normal look; only the background changes.
 */

/* ---------- Background: plain off-white (charcoal in dark mode) ---------- */
body {
    background-color: #f6f4ef;
}

/* ---------- Club map (Find us card and map.php) ---------- */
.club-map { position: relative; border-radius: 4px; overflow: hidden; background: #e8e6e1; }
.club-map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.club-directions .btn { margin-bottom: 5px; }

/* ---------- Landing page: three cards of equal height, same text size ---------- */
.landing-cards { display: flex; flex-wrap: wrap; }
.landing-cards > [class*="col-"] { display: flex; }
.landing-cards .panel { flex: 1; display: flex; flex-direction: column; margin-bottom: 20px; }
.landing-cards .panel-title { font-size: 16px; }
.landing-cards .panel-body { flex: 1; display: flex; flex-direction: column; font-size: 14px; }
.landing-cards .panel-body > :last-child { margin-bottom: 0; }
/* The map grows to fill the Find us card; the buttons stay at the bottom */
.landing-cards .club-map { flex: 1; min-height: 220px; height: auto !important; }
.fee-list { flex: 1; margin-bottom: 0; }
.fee-list .list-group-item { display: flex; justify-content: space-between; align-items: baseline; border-left: 0; border-right: 0; font-size: 14px; }
.fee-list .list-group-item:first-child { border-top: 0; }
.fee-amount { font-weight: bold; white-space: nowrap; }
.fee-amount small { font-weight: normal; color: #777; }
@media (max-width: 991px) { .landing-cards > [class*="col-"] { width: 100%; } }

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme: dark) {
    :root { color-scheme: dark; }

    body {
        background-color: #17181b;
        color: #dcdcdf;
    }

    a, .btn-link { color: #7fb3e6; }
    a:hover, a:focus, .btn-link:hover, .btn-link:focus { color: #a9cdf0; }
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: #ececee; }
    small, .small, .text-muted, .help-block, .list-group-item-text { color: #9b9da4; }
    hr { border-top-color: #33353a; }
    code { background-color: #3a2228; color: #f2a5b8; }
    .close { color: #fff; text-shadow: none; }

    /* Navbar (members' menu; the admin pages keep their red bar) */
    .navbar-default { background-color: #1f2023; border-color: #2b2c30; }
    .navbar-default .navbar-nav > li > a, .navbar-default .navbar-brand, .navbar-default .navbar-text { color: #c8c9cc; }
    .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #fff; }
    .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus,
    .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { background-color: #2b2c30; color: #fff; }
    .navbar-default .btn-link { color: #c8c9cc; }
    .navbar-default .btn-link:hover, .navbar-default .btn-link:focus { color: #fff; }
    .navbar-default .navbar-toggle { border-color: #3a3b40; }
    .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #2b2c30; }
    .navbar-default .navbar-toggle .icon-bar { background-color: #c8c9cc; }
    .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #2b2c30; }
    /* Admin pages: their red bar (set inline in menubar.php) becomes a deep red with light links */
    .navbar-default[style*="ff7a7a"] { background-color: #6e2626 !important; border-color: #5a1f1f; }
    .navbar-default[style*="ff7a7a"] .navbar-nav > li > a, .navbar-default[style*="ff7a7a"] .btn-link { color: #f3dede; }
    .navbar-default[style*="ff7a7a"] .navbar-nav > .active > a, .navbar-default[style*="ff7a7a"] .navbar-nav > .open > a { background-color: #852f2f; color: #fff; }
    .dropdown-menu { background-color: #26272b; border-color: #3a3b40; }
    .dropdown-menu > li > a { color: #dcdcdf; }
    .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-color: #33353a; color: #fff; }
    .dropdown-menu .divider { background-color: #3a3b40; }
    @media (max-width: 767px) {
        .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #c8c9cc; }
        .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover { color: #fff; }
    }

    /* Panels, wells, cards */
    .panel, .well, .jumbotron, .thumbnail, .modal-content, .popover, .card, .card.hovercard {
        background-color: #212226;
        border-color: #33353a;
        color: #dcdcdf;
    }
    .panel-default > .panel-heading { background-color: #2a2b30; border-color: #33353a; color: #ececee; }
    .panel-footer { background-color: #26272b; border-top-color: #33353a; }
    .panel-primary > .panel-heading { color: #fff; }
    .panel-info > .panel-heading { background-color: #1b3040; border-color: #24435a; color: #a9cfe8; }
    .panel-info { border-color: #24435a; }
    .panel-success > .panel-heading { background-color: #1e3a26; border-color: #2a5235; color: #a8d5b0; }
    .panel-warning > .panel-heading { background-color: #3b331a; border-color: #544823; color: #e8d18a; }
    .panel-danger > .panel-heading { background-color: #3d1f1f; border-color: #5a2a2a; color: #f0a8a8; }
    .panel > .table, .panel > .table-responsive > .table { border-color: #33353a; }
    .modal-header, .modal-footer { border-color: #33353a; }
    .modal-backdrop.in { opacity: 0.7; }
    .popover-title { background-color: #2a2b30; border-bottom-color: #33353a; }
    .popover.top > .arrow:after { border-top-color: #212226; }
    .popover.bottom > .arrow:after { border-bottom-color: #212226; }
    .popover.left > .arrow:after { border-left-color: #212226; }
    .popover.right > .arrow:after { border-right-color: #212226; }

    /* Tables, including the contextual row colours */
    .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th,
    .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td,
    .table > thead > tr > th { border-color: #33353a; }
    .table-striped > tbody > tr:nth-of-type(odd) { background-color: #26272b; }
    .table-hover > tbody > tr:hover { background-color: #2c2d32; }
    .table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td { border-color: #33353a; }
    .table > thead > tr > td.active, .table > tbody > tr > td.active, .table > thead > tr.active > td, .table > tbody > tr.active > td, .table > tbody > tr.active > th, .table > tbody > tr > th.active { background-color: #2a2b30; }
    .table > tbody > tr.success > td, .table > tbody > tr > td.success, .table > tbody > tr.success > th { background-color: #1e3a26; }
    .table > tbody > tr.info > td, .table > tbody > tr > td.info, .table > tbody > tr.info > th { background-color: #1b3040; }
    .table > tbody > tr.warning > td, .table > tbody > tr > td.warning, .table > tbody > tr.warning > th { background-color: #3b331a; }
    .table > tbody > tr.danger > td, .table > tbody > tr > td.danger, .table > tbody > tr.danger > th { background-color: #3d1f1f; }

    /* Lists (the booking slots are list-group items) */
    .list-group-item { background-color: #212226; border-color: #33353a; color: #dcdcdf; }
    a.list-group-item, button.list-group-item { color: #dcdcdf; }
    a.list-group-item:hover, a.list-group-item:focus, button.list-group-item:hover, button.list-group-item:focus { background-color: #2a2b30; color: #fff; }
    .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus { background-color: #2a5d8f; border-color: #2a5d8f; }
    .list-group-item-heading, a.list-group-item .list-group-item-heading, button.list-group-item .list-group-item-heading { color: #ececee; }
    .list-group-item-success, a.list-group-item-success, button.list-group-item-success { background-color: #1e3a26; color: #a8d5b0; }
    a.list-group-item-success:hover, button.list-group-item-success:hover { background-color: #26492f; color: #c3e6c9; }
    .list-group-item-info, a.list-group-item-info, button.list-group-item-info { background-color: #1b3040; color: #a9cfe8; }
    a.list-group-item-info:hover, button.list-group-item-info:hover { background-color: #223b4f; color: #c6e0f2; }
    .list-group-item-warning, a.list-group-item-warning, button.list-group-item-warning { background-color: #3b331a; color: #e8d18a; }
    a.list-group-item-warning:hover, button.list-group-item-warning:hover { background-color: #4a4021; color: #f2e0a6; }
    .list-group-item-danger, a.list-group-item-danger, button.list-group-item-danger { background-color: #3d1f1f; color: #f0a8a8; }
    a.list-group-item-danger:hover, button.list-group-item-danger:hover { background-color: #4c2626; color: #f6c3c3; }

    /* Alerts */
    .alert-success { background-color: #1e3a26; border-color: #2a5235; color: #a8d5b0; }
    .alert-info { background-color: #1b3040; border-color: #24435a; color: #a9cfe8; }
    .alert-warning { background-color: #3b331a; border-color: #544823; color: #e8d18a; }
    .alert-danger { background-color: #3d1f1f; border-color: #5a2a2a; color: #f0a8a8; }
    .alert .alert-link { color: inherit; }
    .text-success { color: #7fcf8f; }
    .text-info { color: #7fbde6; }
    .text-warning { color: #e6c46a; }
    .text-danger { color: #f08a8a; }
    .text-primary { color: #7fb3e6; }
    .bg-success { background-color: #1e3a26; }
    .bg-info { background-color: #1b3040; }
    .bg-warning { background-color: #3b331a; }
    .bg-danger { background-color: #3d1f1f; }

    /* Forms */
    .form-control, .input-group-addon, select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="date"], input[type="search"] {
        background-color: #1b1c1f;
        border-color: #3a3b40;
        color: #ececee;
    }
    .form-control:focus { border-color: #4f86bf; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px rgba(79,134,191,.5); }
    .form-control::placeholder { color: #7d7f86; }
    .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background-color: #26272b; color: #9b9da4; }
    .input-group-addon { color: #c8c9cc; }
    legend { color: #ececee; border-bottom-color: #33353a; }
    .checkbox label::before, .radio label::before { background-color: #1b1c1f; border-color: #55575e; }

    /* Buttons and navigation */
    .btn-default { background-color: #2a2b30; border-color: #3a3b40; color: #dcdcdf; }
    .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { background-color: #33353a; border-color: #45474d; color: #fff; }
    .nav-tabs { border-bottom-color: #33353a; }
    .nav-tabs > li > a:hover { background-color: #2a2b30; border-color: #33353a; }
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { background-color: #212226; border-color: #33353a #33353a transparent; color: #ececee; }
    .nav > li > a:hover, .nav > li > a:focus { background-color: #2a2b30; }
    .nav-pills > li.active > a, .nav-pills > li.active > a:hover { background-color: #2a5d8f; }
    .pagination > li > a, .pagination > li > span { background-color: #212226; border-color: #33353a; color: #7fb3e6; }
    .pagination > li > a:hover { background-color: #2a2b30; }
    .pagination > .active > a, .pagination > .active > span { background-color: #2a5d8f; border-color: #2a5d8f; color: #fff; }
    .label-default, .badge { background-color: #55575e; }

    /* Plugins: bootstrap-table and the date picker */
    .bootstrap-table .fixed-table-container, .fixed-table-container thead th { border-color: #33353a; }
    .bootstrap-table .fixed-table-toolbar .dropdown-menu { background-color: #26272b; }
    .datepicker.dropdown-menu, .datepicker table tr td, .datepicker table tr th { color: #dcdcdf; }
    .datepicker table tr td.day:hover, .datepicker table tr td.focused, .datepicker table tr td span:hover { background: #33353a; }
    .datepicker table tr td.old, .datepicker table tr td.new { color: #6f7178; }
    .datepicker-dropdown:after { border-bottom-color: #26272b; }

    /* Page-specific bits that set their own colours */
    .admin-tile .fa { color: #7fb3e6; }
    .admin-tile p { color: #9b9da4; }
    a.admin-tile:hover, a.admin-tile:focus { border-color: #7fb3e6; }
    .card.hovercard .card-info { color: #b5b7bd; }

    .club-map { background: #2a2b30; }
    .fee-amount small { color: #9b9da4; }
    /* The free Google embed has no dark style: invert it and turn the hues back,
       so the map goes dark while greens, water and the red pin keep roughly their colours */
    .club-map iframe { filter: invert(90%) hue-rotate(180deg) brightness(0.95) contrast(0.9); }

    /* Images with white backgrounds (logos) shouldn't glare */
    img[src*="logo"] { filter: brightness(0.92); }
}

/* Printing always uses the light look */
@media print {
    body { background: #fff !important; color: #000 !important; }
}