/* =========================================================================
   Xenith — App overrides
   - Layout fixes for AdminLTE leftover classes (card-tools, card-title, ...)
     that the Argon (Bootstrap 5) theme does not define.
   - Completes dark mode (body.dark-version) for tables, DataTables, Select2,
     form controls, labels and muted text so every page in resources/views/pages
     is themed consistently without editing each file.
   Palette follows Argon dark-version: body #051139, surface #111C44.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. LAYOUT (applies in both light & dark)
   ------------------------------------------------------------------------- */

/* AdminLTE card header: when it holds a .card-tools (usually an action button),
   lay it out as a flex row so the title is left and the tools are right. */
.card-header:has(.card-tools) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
}

.card-tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* The "btn-block" on AdminLTE action buttons stretched them full width inside
   the header; keep them compact next to the title. */
.card-header .card-tools .btn-block {
    width: auto;
}

/* AdminLTE .card-title rendered as a heading inside the header: normalise
   size/spacing so it aligns with the action button instead of pushing the
   row taller. Scoped to the header to avoid touching other card-title usage. */
.card-header .card-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0;
}

/* Colored card variants (card-primary, card-secondary, ...) from AdminLTE:
   give them a subtle accent border so they read as intended. */
.card.card-primary    { border-top: 3px solid #5e72e4; }
.card.card-secondary  { border-top: 3px solid #8392ab; }
.card.card-info       { border-top: 3px solid #11cdef; }
.card.card-success    { border-top: 3px solid #2dce89; }
.card.card-warning    { border-top: 3px solid #fb6340; }
.card.card-danger     { border-top: 3px solid #f5365c; }

/* Consistent page spacing: the AdminLTE-style <section class="content"> pages
   had no vertical padding (content stuck right under the topnav), while other
   pages used container-fluid py-4. Normalise them so every page breathes the
   same. */
.main-content section.content {
    display: block;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.main-content section.content > .container-fluid,
.main-content > .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Keep tables readable on small screens by letting them scroll. */
.card-body > .table-responsive,
.card-body > .table {
    width: 100%;
}

/* -------------------------------------------------------------------------
   1c. TWO-COLUMN FORMS (.form-2col on add/edit <form> tags)
   Lays the form's field groups into a tidy responsive 2-column grid.
   Fields that should span the full width (textarea, file upload) are detected
   automatically with :has(); the submit button always spans full width.
   ------------------------------------------------------------------------- */
.form-2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
    row-gap: 0;
    align-items: start;
}

/* Full-width groups: anything containing a textarea or a file input, plus
   explicit opt-outs, headings, the submit button and the buttons row. */
.form-2col > div:has(textarea),
.form-2col > div:has(input[type="file"]),
.form-2col > table,
.form-2col > .table-responsive,
.form-2col > div:has(> table),
.form-2col > div:has(> .mb-3),
.form-2col > div:has(> .form-group),
.form-2col > .form-col-full,
.form-2col > hr,
.form-2col > h1,
.form-2col > h2,
.form-2col > h3,
.form-2col > h4,
.form-2col > h5,
.form-2col > h6,
.form-2col > button,
.form-2col > .btn,
.form-2col > [type="submit"],
.form-2col > .d-flex,
.form-2col > .text-end,
.form-2col > .form-buttons {
    grid-column: 1 / -1;
}

/* Keep the submit button its natural size on the left of its full row. */
.form-2col > button,
.form-2col > .btn,
.form-2col > [type="submit"] {
    justify-self: start;
    margin-top: .5rem;
}

@media (max-width: 767.98px) {
    .form-2col {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------
   1b. MINIMIZED SIDENAV (navbarMinimize → body.g-sidenav-hidden)
   The menu section headers (BuildMenu renders them as
   <li class="nav-item d-flex"><div class="ps-4"><i></i></div><h6>…</h6></li>)
   are not .nav-link-text, so Argon does not collapse them when the sidebar is
   minimized — the label overflows the 6rem rail and the icon is pushed off by
   the ps-4 padding. These rules collapse the label and centre the icon, and
   restore everything when the rail is hovered (Argon's expand-on-hover).
   Only relevant at >=1200px where the minimize toggle and 6rem rail exist.
   ------------------------------------------------------------------------- */
@media (min-width: 1200px) {
    /* Collapsed state: hide the section label, centre the icon */
    .g-sidenav-hidden .sidenav .nav-item.d-flex {
        justify-content: center;
    }

    .g-sidenav-hidden .sidenav .nav-item.d-flex > .ps-4 {
        padding-left: 0 !important;
        transition: padding-left .3s ease;
    }

    .g-sidenav-hidden .sidenav .nav-item.d-flex > h6 {
        opacity: 0;
        width: 0;
        margin-left: 0 !important;
        overflow: hidden;
        white-space: nowrap;
        transition: opacity .3s ease, width .3s ease;
    }

    /* Expand-on-hover: bring the section header back to its normal look */
    .g-sidenav-hidden .sidenav:hover .nav-item.d-flex {
        justify-content: flex-start;
    }

    .g-sidenav-hidden .sidenav:hover .nav-item.d-flex > .ps-4 {
        padding-left: 1.5rem !important;
    }

    .g-sidenav-hidden .sidenav:hover .nav-item.d-flex > h6 {
        opacity: .6;
        width: auto;
    }

    /* Tidy the menu-item icons on the collapsed rail so they line up centred */
    .g-sidenav-hidden .sidenav .nav-item .nav-link {
        justify-content: center;
    }

    .g-sidenav-hidden .sidenav .nav-item .nav-link .icon {
        margin-right: 0 !important;
    }

    .g-sidenav-hidden .sidenav:hover .nav-item .nav-link {
        justify-content: flex-start;
    }

    .g-sidenav-hidden .sidenav:hover .nav-item .nav-link .icon {
        margin-right: .5rem !important;
    }
}

/* -------------------------------------------------------------------------
   2. DARK MODE COMPLETIONS  (body.dark-version)
   ------------------------------------------------------------------------- */

/* Headings / titles inside cards */
.dark-version .card-title,
.dark-version .card .card-header h1,
.dark-version .card .card-header h2,
.dark-version .card .card-header h3,
.dark-version .card .card-header h4,
.dark-version .card .card-header h5,
.dark-version .card .card-header h6 {
    color: #ffffff !important;
}

/* Generic muted / dark text that would vanish on the dark surface */
.dark-version .text-dark,
.dark-version .text-muted,
.dark-version .text-secondary,
.dark-version .text-body {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ---- Tables --------------------------------------------------------------*/
.dark-version .table {
    color: rgba(255, 255, 255, 0.8);
}

.dark-version .table > thead > tr > th {
    color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    background-color: transparent;
}

.dark-version .table > tbody > tr > td,
.dark-version .table > tbody > tr > th {
    color: rgba(255, 255, 255, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.dark-version .table.table-bordered,
.dark-version .table.table-bordered > :not(caption) > * > * {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.dark-version .table-hover > tbody > tr:hover > * {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

.dark-version .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.03);
}

/* ---- Form controls -------------------------------------------------------*/
.dark-version .form-control,
.dark-version .form-select,
.dark-version select.form-control,
.dark-version textarea.form-control {
    background-color: #0b1437;
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.dark-version .form-control:focus,
.dark-version .form-select:focus {
    background-color: #0b1437;
    border-color: #5e72e4;
    color: #ffffff;
    box-shadow: 0 0 0 2px rgba(94, 114, 228, 0.25);
}

.dark-version .form-control::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.dark-version .form-select option {
    background-color: #111C44;
    color: #ffffff;
}

.dark-version .input-group-text {
    background-color: #0b1437;
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
}

/* ---- Alerts (most pages add text-white already, this is a safety net) ----*/
.dark-version .alert {
    color: #ffffff;
}

/* ---- DataTables generated controls --------------------------------------*/
.dark-version .dataTables_wrapper,
.dark-version .dataTables_wrapper .dataTables_length,
.dark-version .dataTables_wrapper .dataTables_filter,
.dark-version .dataTables_wrapper .dataTables_info,
.dark-version .dataTables_wrapper .dataTables_processing,
.dark-version .dataTables_wrapper .dataTables_paginate {
    color: rgba(255, 255, 255, 0.8) !important;
}

.dark-version .dataTables_wrapper .dataTables_length select,
.dark-version .dataTables_wrapper .dataTables_filter input {
    background-color: #0b1437;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.dark-version .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: rgba(255, 255, 255, 0.8) !important;
}

.dark-version .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dark-version .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #5e72e4;
    border-color: #5e72e4;
    color: #ffffff !important;
}

.dark-version .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
}

/* DataTables export buttons */
.dark-version .dt-buttons .dt-button {
    background: #0b1437;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* ---- Select2 (bootstrap theme) ------------------------------------------*/
.dark-version .select2-container--bootstrap .select2-selection,
.dark-version .select2-container--default .select2-selection--single,
.dark-version .select2-container--default .select2-selection--multiple {
    background-color: #0b1437;
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.dark-version .select2-container--bootstrap .select2-selection__rendered,
.dark-version .select2-container--default .select2-selection__rendered {
    color: #ffffff !important;
}

.dark-version .select2-dropdown {
    background-color: #111C44;
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.dark-version .select2-results__option {
    background-color: #111C44;
    color: rgba(255, 255, 255, 0.85);
}

.dark-version .select2-results__option--highlighted {
    background-color: #5e72e4 !important;
    color: #ffffff !important;
}

.dark-version .select2-search--dropdown .select2-search__field {
    background-color: #0b1437;
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* ---- Flatpickr calendar --------------------------------------------------*/
.dark-version .flatpickr-calendar {
    background: #111C44;
    color: #ffffff;
    box-shadow: 0 3px 13px rgba(0, 0, 0, 0.5);
}

.dark-version .flatpickr-day {
    color: rgba(255, 255, 255, 0.85);
}

.dark-version .flatpickr-day.selected {
    background: #5e72e4;
    border-color: #5e72e4;
}

.dark-version .flatpickr-months .flatpickr-month,
.dark-version .flatpickr-weekdays,
.dark-version span.flatpickr-weekday {
    color: #ffffff;
    fill: #ffffff;
}

/* ---- Misc surfaces -------------------------------------------------------*/
.dark-version hr {
    border-color: rgba(255, 255, 255, 0.15);
}

.dark-version .modal-content {
    background-color: #111C44;
    color: #ffffff;
}

.dark-version .modal-header,
.dark-version .modal-footer {
    border-color: rgba(255, 255, 255, 0.15);
}

.dark-version .list-group-item {
    background-color: #111C44;
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
}

/* =========================================================================
   3. MODERN CLEAN UPLIFT  (applies to every page in pages/*, light & dark)
   A tasteful global theme layer: softer cards, cleaner tables, modern forms
   and buttons, refined alerts/badges. Purely additive — dark-version rules in
   section 2 keep higher specificity and continue to win in dark mode.
   ========================================================================= */

/* ---- Cards ---------------------------------------------------------------*/
.main-content .card {
    border: 1px solid rgba(20, 20, 43, 0.06);
    border-radius: 1rem;
    box-shadow: 0 2px 6px rgba(20, 20, 43, 0.04);
    transition: box-shadow 0.28s ease;
}

.main-content .card:hover {
    box-shadow: 0 10px 28px rgba(20, 20, 43, 0.08);
}

.main-content .card-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(20, 20, 43, 0.06);
    padding: 1.1rem 1.5rem;
}

.main-content .card-header.pb-0 {
    border-bottom: none;
}

.main-content .card-body {
    padding: 1.5rem;
}

/* ---- Tables: clean, airy, modern ----------------------------------------*/
.main-content .table {
    margin-bottom: 0;
}

.main-content .table thead th {
    text-transform: uppercase;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #8392ab;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e9ecef;
    background-color: transparent;
}

.main-content .table tbody td {
    padding: 0.85rem 1rem;
    vertical-align: middle;
    font-size: 0.825rem;
    color: #495057;
    border-top: 1px solid #f0f2f5;
}

.main-content .table tbody tr {
    transition: background-color 0.15s ease;
}

.main-content .table:not(.table-bordered) tbody tr:hover td {
    background-color: #f8f9fc;
}

/* Lighten the heavy default borders of bordered tables */
.main-content .table-bordered,
.main-content .table-bordered > :not(caption) > * > * {
    border-color: #eef0f3;
}

/* ---- Buttons -------------------------------------------------------------*/
.btn {
    border-radius: 0.6rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.btn:not(.btn-link):hover {
    box-shadow: 0 6px 14px rgba(20, 20, 43, 0.12);
}

.btn-sm {
    border-radius: 0.5rem;
}

/* ---- Form controls -------------------------------------------------------*/
.main-content .form-control,
.main-content .form-select {
    border-radius: 0.6rem;
    border-color: #e3e6ec;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.main-content .form-control:focus,
.main-content .form-select:focus {
    border-color: #5e72e4;
    box-shadow: 0 0 0 3px rgba(94, 114, 228, 0.12);
}

.main-content .form-label,
.main-content label {
    font-weight: 600;
    color: #344767;
    margin-bottom: 0.35rem;
}

/* ---- Alerts & badges -----------------------------------------------------*/
.main-content .alert {
    border: none;
    border-radius: 0.75rem;
}

.badge {
    border-radius: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* ---- Modern dark-mode counterparts for the uplift -----------------------*/
.dark-version .main-content .card {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.dark-version .main-content .card:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.dark-version .main-content .card-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.dark-version .main-content .table thead th {
    color: rgba(255, 255, 255, 0.6) !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

.dark-version .main-content .table:not(.table-bordered) tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff !important;
}

.dark-version .main-content .form-label,
.dark-version .main-content label {
    color: rgba(255, 255, 255, 0.85);
}

/* ---- Dashboard-specific dark fixes --------------------------------------*/
/* .bg-light is hardcoded on some dashboard table headers / cards and stays
   light in dark mode; map it onto the dark surface instead. */
.dark-version .bg-light {
    background-color: #0b1437 !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Hover cards (pt dashboard) use a hardcoded light-grey hover background. */
.dark-version .hover-card:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* ---- Contextual table rows / dark headers ------------------------------- */
/* Keep .table-dark headers white (the muted uplift above would dim them). */
.main-content .table-dark thead th,
.main-content .table-dark th,
.main-content .table-dark td {
    color: #ffffff !important;
}

/* .table-secondary rows (e.g. date separators) stay light otherwise. */
.dark-version .table-secondary,
.dark-version .table-secondary > th,
.dark-version .table-secondary > td {
    background-color: rgba(255, 255, 255, 0.07) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ---- FullCalendar (calendar pages) -------------------------------------- */
/* Modern brand-coloured toolbar buttons in both themes. */
.main-content .fc {
    --fc-button-bg-color: #5e72e4;
    --fc-button-border-color: #5e72e4;
    --fc-button-hover-bg-color: #4a5cd0;
    --fc-button-hover-border-color: #4a5cd0;
    --fc-button-active-bg-color: #3f51c5;
    --fc-button-active-border-color: #3f51c5;
}

/* Dark-mode calendar surface, borders and text. */
.dark-version .fc {
    --fc-border-color: rgba(255, 255, 255, 0.12);
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: rgba(255, 255, 255, 0.04);
    --fc-today-bg-color: rgba(94, 114, 228, 0.18);
    --fc-list-event-hover-bg-color: rgba(255, 255, 255, 0.08);
}

.dark-version .fc,
.dark-version .fc .fc-col-header-cell-cushion,
.dark-version .fc .fc-daygrid-day-number,
.dark-version .fc .fc-timegrid-slot-label-cushion,
.dark-version .fc .fc-timegrid-axis-cushion,
.dark-version .fc .fc-list-day-text,
.dark-version .fc .fc-list-day-side-text,
.dark-version .fc .fc-toolbar-title {
    color: rgba(255, 255, 255, 0.88);
}

.dark-version .fc .fc-list,
.dark-version .fc .fc-list-event:hover td {
    background-color: transparent;
}