/* ============================================
   Dark Mode
   Plik ladowany na WSZYSTKICH stronach.
   Aktywowany klasa html.dark
   ============================================ */

/* --- Toggle button --- */
.dark-toggle {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    font-size: 14px;
    cursor: pointer;
    padding: 6px 14px;
    border-radius: 20px;
    line-height: 1;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    white-space: nowrap;
}

.dark-toggle:hover {
    background: rgba(255,255,255,0.2);
}

.dark-toggle-label {
    font-size: 13px;
    font-weight: 500;
}

/* Login page: toggle needs different colors (no green header) */
.login-card .dark-toggle {
    color: #666;
    background: #f0f0f0;
    border-color: #ddd;
}

.login-card .dark-toggle:hover {
    background: #e0e0e0;
}

html.dark .login-card .dark-toggle {
    color: #e0e0e0;
    background: #333;
    border-color: #444;
}

html.dark .login-card .dark-toggle:hover {
    background: #444;
}

/* Public header: make room for toggle */
.header-content {
    justify-content: space-between !important;
}

/* --- Heat map custom properties (light defaults) --- */
:root {
    --heat-0: #f5f5f5;
    --heat-1: #c8e6c9;
    --heat-2: #81c784;
    --heat-3: #43a047;
    --heat-4: #1b5e20;
}

/* ================================================
   PUBLIC PAGES — CSS variable overrides
   ================================================ */
html.dark {
    color-scheme: dark;

    --primary: #66bb6a;
    --primary-dark: #4caf50;
    --primary-bg: #1a3a1c;
    --accent: #ffb74d;
    --accent-light: #3d2e1a;
    --bg: #121212;
    --card: #1e1e1e;
    --text: #e0e0e0;
    --text-secondary: #a0a0a0;
    --text-light: #757575;
    --border: #333333;
    --border-light: #2a2a2a;

    --member-bg: #2e5e30;
    --member-border: #66bb6a;
    --member-text: #a5d6a7;
    --guest-bg: #1a3550;
    --guest-border: #64b5f6;
    --guest-text: #90caf9;
    --admin-bg: #37474f;
    --admin-border: #78909c;
    --admin-text: #ffffff;
    --blocked-bg: #2c2c2c;
    --blocked-border: #616161;
    --blocked-text: #9e9e9e;

    --available-bg: #1e2e1f;
    --available-hover: #2a4a2c;
    --selected-bg: #e68a00;
    --selected-border: #ff9800;
    --past-bg: #181818;
    --today-bg: #1a2a3d;

    --shadow: 0 2px 12px rgba(0,0,0,0.3);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);

    --heat-0: #252525;
    --heat-1: #1a3a1c;
    --heat-2: #2e5e30;
    --heat-3: #388e3c;
    --heat-4: #66bb6a;
}

/* --- Public: header --- */
html.dark .header {
    background: #1b5e20;
}

/* --- Public: booking overlays hover --- */
html.dark .tl-booking.bk-member:hover { background: #3a7a3d; }
html.dark .tl-booking.bk-guest:hover { background: #1e4468; }
html.dark .tl-booking.bk-admin:hover { background: #455a64; }
html.dark .mob-cell.booked.bk-member:hover { background: #3a7a3d; }
html.dark .mob-cell.booked.bk-guest:hover { background: #1e4468; }
html.dark .mob-cell.booked.bk-admin:hover { background: #455a64; }

/* --- Public: booking tooltip --- */
html.dark .tl-booking[data-tooltip]:hover::after {
    background: #444;
}

/* --- Public: past slot stripes (lighter lines on dark bg) --- */
html.dark .tl-cell.past,
html.dark .mob-cell.past {
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        rgba(255, 255, 255, 0.12) 4px,
        rgba(255, 255, 255, 0.12) 5px
    );
}

/* --- Public: now line (brighter on dark) --- */
html.dark .tl-now-line {
    background: #42a5f5;
}

/* --- Public: buttons (keep dark green for white text contrast) --- */
html.dark .btn-book,
html.dark .btn-book-floating,
html.dark .btn-accept {
    background: #2e7d32;
    color: #fff;
}

html.dark .btn-book:hover,
html.dark .btn-book-floating:hover,
html.dark .btn-accept:hover {
    background: #388e3c;
}

html.dark .week-nav-btn {
    border-color: #66bb6a;
    color: #66bb6a;
    background: #1e1e1e;
}

html.dark .week-nav-btn:hover {
    background: #2e7d32;
    color: #fff;
    border-color: #2e7d32;
}

html.dark .week-nav-btn:disabled {
    border-color: #444;
    color: #555;
    background: #1e1e1e;
}

html.dark .mobile-day-btn {
    border-color: #66bb6a;
    color: #66bb6a;
    background: #1e1e1e;
}

html.dark .mobile-day-btn:hover {
    background: #2e7d32;
    color: #fff;
}

html.dark .mobile-day-btn:disabled {
    border-color: #444;
    color: #555;
    background: #1e1e1e;
}

/* --- Public: rules overlay --- */
html.dark .rules-box {
    background: #1e1e1e;
}

html.dark .rules-accept-top {
    background: #1e1e1e;
    border-bottom-color: #333;
}

html.dark .rules-content h3 {
    color: #e0e0e0;
}

html.dark .rules-content p,
html.dark .rules-content li {
    color: #a0a0a0;
}

html.dark .rules-placeholder {
    background: #252525;
    color: #757575;
}

/* --- Public: modals --- */
html.dark .modal {
    background: #1e1e1e;
}

html.dark .modal-close:hover {
    background: #333;
}

/* --- Public: selection bar --- */
html.dark .selection-bar {
    background: #1e1e1e;
    border-top-color: var(--selected-border);
}

html.dark .btn-cancel-sel {
    background: #333;
    color: #a0a0a0;
    border-color: #444;
}

html.dark .btn-cancel-sel:hover {
    background: #444;
}

/* --- Public: form inputs --- */
html.dark .form-group input[type="text"],
html.dark .form-group input[type="email"],
html.dark .form-group input[type="tel"] {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}

html.dark .form-group input:focus {
    border-color: #66bb6a;
    box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.2);
}

html.dark .phone-prefix {
    background: #333;
    border-color: #444;
    color: #e0e0e0;
}

html.dark .phone-prefix:focus {
    border-color: #66bb6a;
    box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.2);
}

/* --- Public: checkbox --- */
html.dark .checkbox-custom {
    border-color: #555;
}

html.dark .checkbox-label input:checked + .checkbox-custom {
    background: #4caf50;
    border-color: #4caf50;
}

/* --- Public: price display --- */
html.dark .price-display {
    background: #3d2e1a;
}

html.dark .price-display.free {
    background: #1a3a1c;
}

/* --- Public: form error --- */
html.dark .form-error {
    background: #3d1a1a;
    color: #ef9a9a;
}

/* --- Public: success modal --- */
html.dark .success-icon {
    background: #4caf50;
}

/* --- Public: legend dots --- */
html.dark .lg-available { background: #1e2e1f; border-color: #4caf50; }
html.dark .lg-member { background: #2e5e30; border-color: #66bb6a; }
html.dark .lg-guest { background: #1a3550; border-color: #64b5f6; }
html.dark .lg-admin { background: #37474f; border-color: #78909c; }
html.dark .lg-blocked { background: #2c2c2c; border-color: #616161; }

/* --- Public: footer --- */
html.dark .footer {
    background: #1e1e1e;
    border-top-color: #333;
}

/* --- Public: loading text --- */
html.dark .loading {
    color: #757575;
}

/* --- Public: waitlist modal text --- */
html.dark .waitlist-desc {
    color: #a0a0a0 !important;
}

/* ================================================
   CANCEL PAGE
   ================================================ */
html.dark .cancel-card {
    background: #1e1e1e;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

html.dark .cancel-card h1 {
    color: #e0e0e0;
}

html.dark .info-table td:first-child {
    color: #a0a0a0;
}

html.dark .info-table td:last-child {
    color: #e0e0e0;
}

html.dark .btn-cancel {
    background: #d32f2f;
}

html.dark .btn-cancel:hover {
    background: #b71c1c;
}

html.dark .btn-back {
    color: #66bb6a;
}

html.dark .alert-error {
    background: #3d1a1a;
    color: #ef9a9a;
}

html.dark .alert-success {
    background: #1a3a1c;
    color: #a5d6a7;
}

/* ================================================
   ADMIN — common (used by all admin pages)
   ================================================ */
html.dark body {
    background: #121212;
    color: #e0e0e0;
}

html.dark .admin-header {
    background: #1b5e20;
}

html.dark .section,
html.dark .kpi-card {
    background: #1e1e1e;
    box-shadow: 0 1px 6px rgba(0,0,0,0.3);
}

html.dark .section h2 {
    color: #e0e0e0;
}

html.dark .section h2 .period {
    color: #757575;
}

/* Admin: forms */
html.dark .add-form input,
html.dark .add-form select,
html.dark .filter-group select,
html.dark .filter-group input,
html.dark .filters input,
html.dark .filters select {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}

html.dark .add-form label,
html.dark .filter-group label {
    color: #a0a0a0;
}

/* Admin: tables */
html.dark .booking-table th,
html.dark .data-table th {
    color: #a0a0a0;
    border-bottom-color: #333;
}

html.dark .booking-table td,
html.dark .data-table td {
    border-bottom-color: #2a2a2a;
}

/* Admin: badges */
html.dark .badge-member {
    background: #1a3a1c;
    color: #a5d6a7;
}

html.dark .badge-guest {
    background: #1a2e3d;
    color: #90caf9;
}

html.dark .badge-admin {
    background: #3d2e1a;
    color: #ffb74d;
}

html.dark .badge-cancelled {
    background: #3d1a1a;
    color: #ef9a9a;
}

/* Admin: messages */
html.dark .msg-success {
    background: #1a3a1c;
    color: #a5d6a7;
}

html.dark .msg-error {
    background: #3d1a1a;
    color: #ef9a9a;
}

/* Admin: buttons */
html.dark .btn-primary {
    background: #2e7d32;
    color: #fff;
}

html.dark .btn-primary:hover {
    background: #388e3c;
}

html.dark .btn-danger {
    background: #3d1a1a;
    color: #ef9a9a;
}

html.dark .btn-danger:hover {
    background: #d32f2f;
    color: #fff;
}

html.dark .empty {
    color: #616161;
}

/* ================================================
   ADMIN — login page
   ================================================ */
html.dark .login-card {
    background: #1e1e1e;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

html.dark .login-card h1 {
    color: #66bb6a;
}

html.dark .login-card .subtitle {
    color: #a0a0a0;
}

html.dark .login-card label {
    color: #a0a0a0;
}

html.dark .login-card input {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}

html.dark .login-card input:focus {
    border-color: #66bb6a;
    box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.2);
}

html.dark .login-card button {
    background: #2e7d32;
}

html.dark .login-card button:hover {
    background: #388e3c;
}

html.dark .login-card .back {
    color: #66bb6a;
}

html.dark .login-card .error {
    background: #3d1a1a;
    color: #ef9a9a;
}

html.dark .login-card .timeout {
    background: #3d2e1a;
    color: #ffb74d;
}

/* ================================================
   ADMIN — dashboard specifics
   ================================================ */

/* KPI */
html.dark .kpi-label {
    color: #757575;
}

html.dark .kpi-value {
    color: #e0e0e0;
}

html.dark .kpi-value small {
    color: #a0a0a0;
}

html.dark .kpi-sub {
    color: #757575;
}

/* Heatmap */
html.dark .hm-label,
html.dark .hm-header {
    color: #757575;
}

html.dark .hm-cell.empty {
    background: #252525 !important;
}

/* Bar chart */
html.dark .bar-label {
    color: #a0a0a0;
}

html.dark .bar-track {
    background: #333;
}

html.dark .bar-count {
    color: #757575;
}

/* Daily trend */
html.dark .dt-bar {
    background: #2e5e30;
}

html.dark .dt-bar:hover {
    background: #4caf50;
}

html.dark .dt-bar.today {
    background: #66bb6a;
}

html.dark .dt-bar .dt-tip {
    background: #444;
}

html.dark .dt-labels span {
    color: #616161;
}

/* Donut */
html.dark .donut-center {
    background: #1e1e1e;
    color: #e0e0e0;
}

html.dark .donut-legend {
    color: #e0e0e0;
}

/* Court compare */
html.dark .court-card {
    background: #252525;
}

html.dark .court-card h3 {
    color: #e0e0e0;
}

html.dark .court-metric .label {
    color: #757575;
}

html.dark .court-metric .val {
    color: #e0e0e0;
}

html.dark .occupancy-bar {
    background: #333;
}

/* Admin: inline style overrides (elements with hardcoded style attrs) */
html.dark [style*="border-top:1px solid #eee"] {
    border-top-color: #333 !important;
}

html.dark [style*="color:#888"] {
    color: #757575 !important;
}

html.dark [style*="color:#666"] {
    color: #a0a0a0 !important;
}