/* =====================================================================
   Components: buttons, tables, modals, dialogs.
   Loaded LAST in dashboard/layouts/master (after Bootstrap, DataTables and
   style.css) so every page gets the same sizes and shapes. Colors come from
   the tokens in style.css; do not add new hex values here.

   Buttons in a table row: at most one solid button (the main action, e.g.
   Assign Judge, Score Now); everything else is .btn-outline-secondary, and
   destructive actions are .btn-outline-danger. Join Zoom uses .btn-zoom.
   ===================================================================== */

/* ---------- Buttons ---------- */
.btn {
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.25rem;
    padding: .5rem 1rem;
    border-radius: 8px;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-sm, .btn-group-sm > .btn {
    font-size: .8125rem;
    line-height: 1.125rem;
    padding: .3125rem .75rem;
    border-radius: 6px;
}
.btn-xs {
    font-size: .75rem;
    line-height: 1rem;
    padding: .1875rem .5rem;
    border-radius: 6px;
}
.btn-lg, .btn-group-lg > .btn {
    font-size: 1rem;
    line-height: 1.5rem;
    padding: .625rem 1.25rem;
    border-radius: 10px;
}
.btn .bi, .btn .fa { vertical-align: -1px; }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; }
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px var(--focus-ring); }

/* Join Zoom / Zoom details follow Zoom's blue */
.btn-zoom { color: #fff; background-color: #2563EB; border-color: #2563EB; }
.btn-zoom:hover, .btn-zoom:not(:disabled):not(.disabled):active { color: #fff; background-color: #1D4ED8; border-color: #1D4ED8; }
.btn-zoom:focus { box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); }

/* Neutral outline (secondary actions): white fill so it reads as a button on grey rows */
.btn-outline-secondary { background-color: #fff; }

/* Action cell: same-size buttons in a tidy grid instead of a ragged stack */
.table-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    min-width: 236px;
}
.table-actions > .btn { width: 100%; }
.table-actions > .btn-wide { grid-column: 1 / -1; }
.table-actions.table-actions-stack { grid-template-columns: minmax(0, 1fr); min-width: 140px; }

/* ---------- Tables (Bootstrap .table and DataTables) ---------- */
.table, table.dataTable {
    color: var(--ink);
    font-size: .875rem;
    margin-bottom: 0;
}
.table > thead > tr > th,
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
    background-color: var(--surface-subtle);
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.3;
    vertical-align: middle;
    padding: .75rem 1rem;
    border-top: 0;
    border-bottom: 1px solid var(--border);
}
.table > tbody > tr > td,
.table > tbody > tr > th,
table.dataTable > tbody > tr > td,
table.dataTable > tbody > tr > th {
    padding: .875rem 1rem;
    vertical-align: middle;
    border-top: 1px solid var(--border);
}
.table > tbody > tr:first-child > td,
table.dataTable > tbody > tr:first-child > td { border-top: 0; }
.table-hover > tbody > tr:hover,
table.dataTable.hover > tbody > tr:hover,
table.dataTable.display > tbody > tr:hover,
table.dataTable > tbody > tr:hover { background-color: var(--surface-subtle); }
table.dataTable > tbody > tr,
table.dataTable.stripe > tbody > tr.odd > *,
table.dataTable.display > tbody > tr.odd > * { background-color: transparent; box-shadow: none; }
table.dataTable.no-footer { border-bottom: 1px solid var(--border); }
table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_desc:before, table.dataTable thead > tr > th.sorting_desc:after { color: var(--text-muted); }
.table .text-muted, table.dataTable .text-muted { color: var(--text-muted) !important; }

/* DataTables controls: same field look as the Livewire table filters */
.dataTables_wrapper { font-size: .8125rem; color: var(--text-muted); }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { margin-bottom: 1rem; color: var(--text-muted); }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    height: 36px;
    padding: .375rem .75rem;
    font-size: .875rem;
    color: var(--ink);
    background-color: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
}
.dataTables_wrapper .dataTables_length select { padding-right: 1.75rem; margin: 0 .375rem; }
.dataTables_wrapper .dataTables_filter input { margin-left: .5rem; min-width: 240px; }
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--brand-border); box-shadow: 0 0 0 3px var(--focus-ring); }
.dataTables_wrapper .dataTables_info { padding-top: 1rem; color: var(--text-muted); }
.dataTables_wrapper .dataTables_paginate { padding-top: .75rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 34px;
    padding: .3125rem .75rem !important;
    margin-left: 4px;
    font-size: .8125rem;
    color: var(--text-secondary) !important;
    background: #fff !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
    color: var(--ink) !important;
    background: var(--surface-subtle) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: var(--brand) !important;
    font-weight: 600;
    background: var(--brand-tint) !important;
    border-color: var(--brand-border) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .45; }

/* Bootstrap pagination (Livewire tables) */
.pagination { gap: 4px; }
.page-link {
    min-width: 34px;
    text-align: center;
    padding: .3125rem .75rem;
    font-size: .8125rem;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 8px !important;
    margin-left: 0 !important;
}
.page-link:hover { color: var(--ink); background-color: var(--surface-subtle); border-color: var(--border); }
.page-link:focus { box-shadow: 0 0 0 3px var(--focus-ring); }
.page-item.active .page-link { color: var(--brand); font-weight: 600; background-color: var(--brand-tint); border-color: var(--brand-border); }
.page-item.disabled .page-link { color: var(--text-muted); opacity: .5; }

/* ---------- Modals ---------- */
.modal-backdrop.show { opacity: .45; background-color: #0F172A; }
.modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
    overflow: hidden;
}
.modal-header {
    align-items: center;
    padding: 1.125rem 1.5rem;
    background: #fff;
    color: var(--ink);
    border-bottom: 1px solid var(--border);
}
.modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
}
.modal-title .bi { color: var(--brand); }
.modal-subtitle { display: block; margin-top: 2px; font-size: .8125rem; font-weight: 400; color: var(--text-muted); }
.modal-header .close {
    width: 36px;
    height: 36px;
    padding: 0;
    margin: -.25rem -.5rem -.25rem auto;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    color: var(--text-muted);
    text-shadow: none;
    opacity: 1;
    border-radius: 8px;
}
.modal-header .close:hover { color: var(--ink); background-color: var(--surface-subtle); opacity: 1; }
.modal-header .close:focus { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.modal-body { padding: 1.5rem; color: var(--ink); }
.modal-footer {
    gap: .5rem;
    padding: 1rem 1.5rem;
    background: #fff;
    border-top: 1px solid var(--border);
}
.modal-footer > * { margin: 0; }
.modal label, .modal .col-form-label { font-size: .8125rem; font-weight: 600; color: var(--text-secondary); }
.modal .form-control, .modal .custom-select { border-color: var(--border); border-radius: 8px; }

/* ---------- SweetAlert dialogs ---------- */
.swal2-container.swal2-backdrop-show { background: rgba(15, 23, 42, .45) !important; }
.swal2-popup {
    border-radius: 14px !important;
    padding: 1.75rem 1.5rem 1.5rem !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
    color: var(--ink);
}
.swal2-popup .swal2-icon { font-size: .8rem; margin: .25rem auto 1rem; }
.swal2-popup .swal2-icon.swal2-warning { color: var(--warning); border-color: #FCD34D; }
.swal2-popup .swal2-icon.swal2-question,
.swal2-popup .swal2-icon.swal2-info { color: var(--info); border-color: #93C5FD; }
.swal2-popup .swal2-icon.swal2-error { border-color: #FCA5A5; }
.swal2-popup .swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: var(--danger); }
.swal2-popup .swal2-icon.swal2-success { border-color: #6EE7B7; color: var(--success); }
.swal2-popup .swal2-icon.swal2-success [class^=swal2-success-line] { background-color: var(--success); }
.swal2-popup .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(4, 120, 87, .25); }
.swal2-popup .swal2-title {
    padding: 0 .5rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
}
.swal2-popup .swal2-html-container {
    margin: .625rem .5rem 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--text-secondary);
}
.swal2-popup .swal2-html-container table { font-size: .875rem; }
.swal2-popup .swal2-actions { gap: .5rem; margin-top: 1.5rem; }
.swal2-popup .swal2-styled {
    margin: 0;
    padding: .625rem 1.25rem;
    font-size: .875rem !important;
    font-weight: 600;
    line-height: 1.25rem;
    border-radius: 8px !important;
    box-shadow: none;
}
.swal2-popup .swal2-styled:focus { box-shadow: 0 0 0 3px var(--focus-ring) !important; }
/* Cancel / Close: neutral outline, like .btn-outline-secondary */
.swal2-popup .swal2-styled.swal2-cancel {
    color: var(--text-secondary) !important;
    background: #fff !important;
    border: 1px solid #CBD5E1 !important;
}
.swal2-popup .swal2-styled.swal2-cancel:hover { color: var(--ink) !important; background: var(--surface-subtle) !important; }
.swal2-popup .swal2-styled.swal2-confirm:hover,
.swal2-popup .swal2-styled.swal2-deny:hover { background-image: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)); }
.swal2-popup .swal2-close { color: var(--text-muted); border-radius: 8px; }
.swal2-popup .swal2-close:hover { color: var(--ink); background: var(--surface-subtle); }
.swal2-popup .swal2-input, .swal2-popup .swal2-textarea, .swal2-popup .swal2-select {
    font-size: .9375rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}
.swal2-popup .swal2-input:focus, .swal2-popup .swal2-textarea:focus { border-color: var(--brand-border); box-shadow: 0 0 0 3px var(--focus-ring); }
.swal2-popup .swal2-validation-message { background: var(--danger-tint); color: var(--danger); border-radius: 8px; }

/* Older dialogs draw their own icon + <b>title</b> + <p>text in the HTML body
   (customAlert.js, availability, judge dashboard). Give them the same icon
   size, title and text as the native dialogs above. */
.swal2-popup .swal2-html-container > i.bi:first-child {
    display: block;
    width: auto;
    height: auto;
    margin: 0 auto .25rem;
    font-size: 2.75rem !important;
    line-height: 1;
    color: var(--brand) !important;
}
.swal2-popup .swal2-html-container > i.bi-exclamation-triangle-fill:first-child { color: var(--warning) !important; }
.swal2-popup .swal2-html-container > i.bi-patch-check-fill:first-child { color: var(--success) !important; }
.swal2-popup .swal2-html-container > i.bi:first-child ~ br { display: none; }
.swal2-popup .swal2-html-container > i.bi:first-child ~ b {
    display: block;
    margin-top: .75rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
}
.swal2-popup .swal2-html-container > i.bi:first-child ~ p {
    margin: .5rem 0 0 !important;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--text-secondary);
}
.swal2-popup .swal2-actions .btn-block { width: 100%; }

/* ---------- Small shared pieces ---------- */
/* Segmented toggle (24H / 12H): same look as the calendar view buttons */
.segmented {
    display: inline-flex;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.segmented > .btn {
    padding: .25rem .625rem;
    font-size: .75rem;
    line-height: 1rem;
    color: var(--text-secondary);
    background: #fff;
    border: 0;
    border-radius: 0;
}
.segmented > .btn + .btn { border-left: 1px solid var(--border); }
.segmented > .btn:hover { color: var(--ink); background: var(--surface-subtle); }
.segmented > .btn.active { color: var(--brand); background: var(--brand-tint); }
.segmented > .btn:focus { box-shadow: none; }

/* Soft badges for labels on white (category, age group) */
.badge-brand-soft { color: var(--brand-hover); background: var(--brand-tint); border: 1px solid var(--brand-border); }
.badge-neutral-soft { color: var(--text-secondary); background: var(--surface-subtle); border: 1px solid var(--border); }

/* Read-only label / value pairs inside modals (Zoom details, schedule details) */
.modal-body label + p,
.modal-body label + br + p {
    margin-bottom: .75rem;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink);
    word-break: break-word;
}