/* ---------------------------------------------------------------------
   Sport Center Admin — design system layered on top of Bootstrap 5.
   Bootstrap (+ its RTL build, switched in includes/lang.php) handles
   layout, direction-mirroring, and responsiveness. This file sets the
   brand tokens, the app shell (sidebar/topbar), and the handful of
   things Bootstrap has no opinion on.

   To rebrand, change --brand / --brand-hover / --sa-brand-tint only.
   White text on --brand must stay at 4.5:1 contrast or better.
--------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Sans+Arabic:wght@400;500;600&display=swap');

:root {
    --brand: #15803D;
    --brand-hover: #166534;
    --brand-rgb: 21, 128, 61;
    --sa-brand-tint: #DCFCE7;
    --sa-violet-tint: var(--sa-brand-tint); /* legacy name, still used by .icon-chip-violet */

    --sa-ink: #0F172A;
    --sa-text: #334155;
    --sa-muted: #64748B;
    --sa-surface: #FFFFFF;
    --sa-surface-muted: #F1F5F9;
    --sa-sidebar-bg: #0F172A;
    --sa-sidebar-text: #CBD5E1;
    --sa-sidebar-muted: #94A3B8;

    --sa-amber: #B45309; --sa-amber-tint: #FEF3C7;
    --sa-green: #166534; --sa-green-tint: #DCFCE7;
    --sa-red: #B91C1C; --sa-red-tint: #FEE2E2;

    --sa-radius: 10px;
    --sa-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);

    --bs-body-bg: #F8FAFC;
    --bs-body-color: var(--sa-text);
    --bs-border-color: #E2E8F0;
    --bs-primary: var(--brand);
    --bs-primary-rgb: var(--brand-rgb);
    --bs-link-color: var(--brand);
    --bs-link-color-rgb: var(--brand-rgb);
    --bs-link-hover-color: var(--brand-hover);
    --bs-link-hover-color-rgb: 22, 101, 52;
    --bs-secondary-color: var(--sa-muted);
    --bs-font-sans-serif: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html[lang="ar"] body { font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif; }

body { color: var(--sa-text); font-size: 0.9375rem; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--sa-ink); font-weight: 600; }

.text-muted { color: var(--sa-muted) !important; }
.text-primary { color: var(--brand) !important; }

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Direct overrides of Bootstrap components — loaded after bootstrap.min.css,
   so these win on equal specificity. Bootstrap's compiled CSS redeclares
   local custom properties directly on selectors like .card and .btn-primary
   (not just at :root), so overriding :root-level variables alone does not
   reliably retheme them — these rules target the same selectors Bootstrap
   itself uses, which is the only reliable way to override its CDN build. */
.card {
    --bs-card-bg: var(--sa-surface);
    --bs-card-border-radius: var(--sa-radius);
    --bs-card-inner-border-radius: calc(var(--sa-radius) - 1px);
    background-color: var(--sa-surface);
    border-radius: var(--sa-radius);
    box-shadow: var(--sa-shadow);
    overflow: hidden;
}

.card-header {
    background-color: var(--sa-surface);
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0.85rem 1.1rem;
    font-weight: 600;
    color: var(--sa-ink);
}

.table {
    --bs-table-bg: var(--sa-surface);
    --bs-table-color: var(--sa-text);
    background-color: var(--sa-surface);
    color: var(--sa-text);
}

.table thead th {
    background-color: var(--sa-surface-muted);
    color: var(--sa-muted) !important;
    font-size: 0.75rem;
    font-weight: 600 !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--bs-border-color) !important;
}
html[lang="ar"] .table thead th { letter-spacing: 0; font-size: 0.8125rem; }

.table > :not(caption) > * > * {
    padding: 0.8rem 1.1rem;
}

.table tbody tr:last-child > * { border-bottom: 0; }

.table tbody tr {
    transition: background-color 0.15s ease-in-out;
}
.table tbody tr:hover {
    --bs-table-bg: #F8FAFC;
    background-color: #F8FAFC;
}

.btn { font-weight: 500; border-radius: 8px; }
.btn i { font-size: 1.1em; }

.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-hover);
    --bs-btn-hover-border-color: var(--brand-hover);
    --bs-btn-active-bg: var(--brand-hover);
    --bs-btn-active-border-color: var(--brand-hover);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
    --bs-btn-focus-shadow-rgb: var(--brand-rgb);
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background-color: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important;
}

.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-focus-shadow-rgb: var(--brand-rgb);
    color: var(--brand) !important;
    border-color: var(--brand) !important;
}
.btn-outline-primary:hover {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #FFFFFF !important;
}

/* Selected state (e.g. .btn-check:checked + label, used by the slot picker) */
.btn-check:checked + .btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary:active {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #FFFFFF !important;
}

/* Applied via JS to the other periods in a multi-period selection, so
   the whole booked range is visually highlighted, not just the exact
   slot that was clicked. */
.court-range-highlight {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #FFFFFF !important;
}

.btn-light {
    --bs-btn-bg: var(--sa-surface);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-bg: var(--sa-surface-muted);
    --bs-btn-hover-border-color: #CBD5E1;
    --bs-btn-color: var(--sa-text);
}

.form-label { color: var(--sa-ink); font-weight: 500; }

.form-control, .form-select { border-color: #CBD5E1; border-radius: 8px; }

.form-control:focus, .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-rgb), 0.2);
}

.form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}
.form-check-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-rgb), 0.2);
}

.pagination {
    --bs-pagination-color: var(--sa-text);
    --bs-pagination-hover-color: var(--brand-hover);
    --bs-pagination-focus-color: var(--brand-hover);
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(var(--brand-rgb), 0.2);
    --bs-pagination-active-bg: var(--brand);
    --bs-pagination-active-border-color: var(--brand);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--brand);
    --bs-dropdown-border-color: var(--bs-border-color);
    --bs-dropdown-border-radius: var(--sa-radius);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.alert { border-radius: var(--sa-radius); }

.modal-content { border: 0; border-radius: 14px; }

/* FullCalendar (calendar-view.php) picks its chrome up from these. */
.fc {
    --fc-button-bg-color: var(--brand);
    --fc-button-border-color: var(--brand);
    --fc-button-hover-bg-color: var(--brand-hover);
    --fc-button-hover-border-color: var(--brand-hover);
    --fc-button-active-bg-color: var(--brand-hover);
    --fc-button-active-border-color: var(--brand-hover);
    --fc-border-color: var(--bs-border-color);
    --fc-today-bg-color: var(--sa-brand-tint);
}

/* ---------------------------------------------------------------------
   App shell
--------------------------------------------------------------------- */

/* Bootstrap forces .offcanvas-lg transparent (with !important) at lg+,
   so the sidebar background has to be set with matching weight. */
#sidebarOffcanvas {
    width: 248px;
    background-color: var(--sa-sidebar-bg) !important;
    color: var(--sa-sidebar-text);
}
#sidebarOffcanvas .offcanvas-header { border-color: rgba(255, 255, 255, 0.08) !important; color: #FFFFFF; }

@media (min-width: 992px) {
    #sidebarOffcanvas {
        position: sticky;
        top: 0;
        height: 100vh;
        flex-shrink: 0;
        overflow-y: auto;
    }
}

.sidebar-brand {
    padding: 1.1rem 1.25rem;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 1rem;
}

.sidebar-logo-mark {
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--brand);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 18px; flex-shrink: 0;
}

.sidebar-group-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--sa-sidebar-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 16px 22px 6px;
}
html[lang="ar"] .sidebar-group-label { letter-spacing: 0; font-size: 12px; }

.sidebar-link {
    display: flex; align-items: center; gap: 12px;
    min-height: 44px;
    padding: 8px 12px;
    margin: 2px 10px;
    border-radius: 8px;
    color: var(--sa-sidebar-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar-link i { font-size: 20px; color: var(--sa-sidebar-muted); transition: color 0.15s ease; }
.sidebar-link:hover { background: rgba(255, 255, 255, 0.07); color: #FFFFFF; }
.sidebar-link:hover i { color: #FFFFFF; }
.sidebar-link.active { background: var(--brand); color: #FFFFFF; }
.sidebar-link.active i { color: #FFFFFF; }
.sidebar-link:focus-visible { outline-color: #FFFFFF; }

.app-topbar {
    background-color: var(--sa-surface);
    border-bottom: 1px solid var(--bs-border-color);
    min-height: 60px;
}

.topbar-company {
    display: flex; align-items: center; gap: 8px;
    color: var(--sa-ink);
    font-weight: 600;
    min-width: 0;
}
.topbar-company i { font-size: 20px; color: var(--brand); }

.topbar-icon-btn {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    color: var(--sa-muted);
    font-size: 20px;
}
.topbar-icon-btn:hover { background: var(--sa-surface-muted); color: var(--sa-ink); }

.avatar-circle {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--sa-brand-tint); color: var(--brand-hover);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; flex-shrink: 0;
}

.app-content { max-width: 1400px; }

/* ---------------------------------------------------------------------
   Shared bits used across pages
--------------------------------------------------------------------- */

.icon-chip { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-chip i { font-size: 20px; }
.icon-chip-violet { background: var(--sa-brand-tint); } .icon-chip-violet i { color: var(--brand); }
.icon-chip-amber { background: var(--sa-amber-tint); } .icon-chip-amber i { color: var(--sa-amber); }
.icon-chip-green { background: var(--sa-green-tint); } .icon-chip-green i { color: var(--sa-green); }
.icon-chip-red { background: var(--sa-red-tint); } .icon-chip-red i { color: var(--sa-red); }

.badge { font-weight: 500; padding: 0.4em 0.75em; }
.badge-tint-green { background: var(--sa-green-tint); color: var(--sa-green); }
.badge-tint-amber { background: var(--sa-amber-tint); color: var(--sa-amber); }
.badge-tint-red { background: var(--sa-red-tint); color: var(--sa-red); }
.badge.bg-light { background-color: var(--sa-surface-muted) !important; }

.stat-card { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
a:hover > .stat-card, a:focus-visible > .stat-card {
    border-color: var(--brand) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.stat-label { color: var(--sa-muted); font-size: 0.8125rem; font-weight: 500; }
.stat-value {
    color: var(--sa-ink);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.stat-value small { font-size: 0.8125rem; font-weight: 500; color: var(--sa-muted); }

.row-link { color: var(--sa-ink); font-weight: 500; text-decoration: none; }
.row-link:hover { color: var(--brand); }

/* Table row actions: small buttons that stay on one line where possible. */
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.table td .btn-sm { margin-block: 2px; white-space: nowrap; }

/* Bordered sub-section inside a long form (branding, pricing, photos). */
.form-section {
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    background: #F8FAFC;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--sa-radius);
}

/* Quill editors (venue/court descriptions). Quill sets height:100% on its
   container, which inside a Bootstrap column resolves against the whole
   stretched column (label + toolbar included), so the editor spills out
   below the row and covers whatever follows. Size it by content instead.
   quill.snow.css loads after this file, hence the extra specificity. */
.card .ql-container.ql-snow { height: auto; }
.card .ql-container.ql-snow .ql-editor { min-height: 120px; }
.card .ql-toolbar.ql-snow { border-color: #CBD5E1; border-radius: 8px 8px 0 0; background: var(--sa-surface); }
.card .ql-container.ql-snow { border-color: #CBD5E1; border-radius: 0 0 8px 8px; }

/* Time-slot picker on the new-booking form. */
.slot-btn {
    min-width: 96px;
    min-height: 44px;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    font-variant-numeric: tabular-nums;
}
.slot-note { font-size: 12px; line-height: 1.2; }
.btn-check:disabled + .slot-btn { opacity: 1; background: var(--sa-surface-muted); border-color: var(--bs-border-color); }

.photo-remove-btn {
    position: absolute; top: -8px; inset-inline-end: -8px;
    width: 28px; height: 28px; padding: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.photo-remove-btn i { font-size: 14px; }

/* Confirmation dialog for data-confirm links (includes/footer.php). */
.confirm-dialog {
    width: min(420px, calc(100vw - 32px));
    padding: 24px;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    color: var(--sa-text);
}
.confirm-dialog::backdrop { background: rgba(15, 23, 42, 0.45); }

.empty-state { color: var(--sa-muted); text-align: center; padding: 2.5rem 1rem; }
.empty-state i { display: block; font-size: 32px; margin-bottom: 0.5rem; color: #94A3B8; }

.notif-dot {
    position: absolute; top: 8px;
    inset-inline-end: 9px;
    width: 8px; height: 8px;
    background: var(--sa-red); border-radius: 50%;
    border: 2px solid var(--sa-surface);
    box-sizing: content-box;
}

/* Sign-in, change-password, and language pages (no app shell). */
.auth-page {
    background:
        radial-gradient(900px 500px at 100% 0%, rgba(var(--brand-rgb), 0.10), transparent 60%),
        var(--bs-body-bg);
    padding: 16px;
}
.auth-page .card { border-radius: 16px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important; }
.auth-page .form-control, .auth-page .btn { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}