/*
 * Qari Booking — Unified Manager Styles
 * ──────────────────────────────────────────────────────────────────
 * Single source of truth for all admin manager UIs:
 *   [teacher_manager]     .tcm-*
 *   [customer_manager]    .cum-*
 *   [user_manager]        .usm-*
 *   [lesson_manager]      .lsm-*
 *   [trial_manager]       .trm-*
 *   [attendance_manager]  .atm-*
 *
 * Architecture:
 *  1. CSS custom properties on :root  — all managers share one token set
 *  2. .mgr-btn base + modifiers       — unified button system
 *  3. .mgr-modal-close                — unified close button
 *  4. Per-prefix token aliases        — map existing class names to shared tokens
 *
 * This file is enqueued via assets.php on every page that contains
 * any manager shortcode.
 * ──────────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════════
 * 1. DESIGN TOKENS
 *    All manager UIs share these values. Override via admin color
 *    palette (Settings → Style & Colors) which writes --qb-* vars.
 * ══════════════════════════════════════════════════════════════════ */

:root {
    /* Brand */
    --mgr-primary:        var(--qb-blue,       #1a56db);
    --mgr-primary-dark:   var(--qb-blue-dark,  #1e40af);
    --mgr-primary-light:  var(--qb-blue-light, #eff6ff);
    --mgr-primary-ring:   var(--qb-blue-ring,  rgba(26,86,219,.3));
    --mgr-danger:         var(--qb-red,        #dc2626);
    --mgr-danger-dark:    var(--qb-red-dark,   #b91c1c);
    --mgr-danger-light:   var(--qb-red-light,  #fef2f2);
    --mgr-danger-ring:    var(--qb-red-ring,   rgba(220,38,38,.3));
    --mgr-success:        #16a34a;
    --mgr-success-dark:   #15803d;
    --mgr-success-light:  #f0fdf4;
    --mgr-success-ring:   rgba(22,163,74,.3);
    --mgr-warning:        #d97706;
    --mgr-warning-light:  #fffbeb;

    /* Surfaces */
    --mgr-border:         var(--qb-border,   #e2e8f0);
    --mgr-surface:        var(--qb-surface,  #f8fafc);
    --mgr-text:           var(--qb-text,     #1e293b);
    --mgr-muted:          var(--qb-muted,    #64748b);
    --mgr-bg-hover:       #f1f5f9;

    /* Button tokens — primary */
    --mgr-btn-p-bg:          var(--qb-btn-p-bg,        var(--mgr-primary));
    --mgr-btn-p-color:       var(--qb-btn-p-color,     #fff);
    --mgr-btn-p-border:      var(--qb-btn-p-border,    var(--mgr-primary));
    --mgr-btn-p-hover-bg:    var(--qb-btn-p-hover-bg,  var(--mgr-primary-dark));
    --mgr-btn-p-hover-bdr:   var(--qb-btn-p-hover-bdr, var(--mgr-primary-dark));

    /* Button tokens — ghost / secondary */
    --mgr-btn-g-bg:          var(--qb-btn-g-bg,        #f1f5f9);
    --mgr-btn-g-color:       var(--qb-btn-g-color,     #374151);
    --mgr-btn-g-border:      var(--qb-btn-g-border,    #d1d5db);
    --mgr-btn-g-hover-bg:    var(--qb-btn-g-hover-bg,  #e2e8f0);
    --mgr-btn-g-hover-color: var(--qb-btn-g-hover-color, #1e293b);
    --mgr-btn-g-hover-bdr:   #c0c8d4;

    /* Typography */
    --mgr-font:     -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --mgr-radius:   6px;
    --mgr-radius-lg:10px;
    --mgr-shadow:   0 20px 60px rgba(0,0,0,.22);
}

/* ══════════════════════════════════════════════════════════════════
 * 2. UNIFIED BUTTON SYSTEM
 *
 *  Base:     .mgr-btn
 *  Variants: .mgr-btn--primary  .mgr-btn--secondary  .mgr-btn--danger
 *            .mgr-btn--switch   .mgr-btn--icon
 *  Sizes:    .mgr-btn--sm  .mgr-btn--xs
 * ══════════════════════════════════════════════════════════════════ */

/* ── Standard text-action button sizes ─────────────────────────────
 * Single font-size and padding for ALL text buttons (View, Edit,
 * Delete, Cancel, Save, Close-text) so they look identical
 * regardless of context (table row vs modal footer).
 * The X-icon close button (.mgr-modal-close) is a SEPARATE component.
 * ─────────────────────────────────────────────────────────────────── */
:root {
    --mgr-btn-font-size: 13px;
    --mgr-btn-pad-v:     7px;
    --mgr-btn-pad-h:     13px;
}

.mgr-btn {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    gap:              5px;
    padding:          var(--mgr-btn-pad-v) var(--mgr-btn-pad-h);
    border-radius:    var(--mgr-radius);
    font-family:      var(--mgr-font);
    font-size:        var(--mgr-btn-font-size);
    font-weight:      500;
    line-height:      1;
    cursor:           pointer;
    text-decoration:  none;
    white-space:      nowrap;
    border:           1px solid transparent;
    box-sizing:       border-box;
    vertical-align:   middle;
    outline:          none;
    transition:
        background .14s ease,
        border-color .14s ease,
        color .14s ease,
        box-shadow .14s ease,
        opacity .14s ease;
    -webkit-user-select: none;
    user-select:      none;
}
.mgr-btn:disabled,
.mgr-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary */
.mgr-btn--primary {
    background:    var(--mgr-btn-p-bg);
    color:         var(--mgr-btn-p-color);
    border-color:  var(--mgr-btn-p-border);
}
.mgr-btn--primary:hover:not(:disabled),
.mgr-btn--primary:focus-visible:not(:disabled) {
    background:    var(--mgr-btn-p-hover-bg);
    border-color:  var(--mgr-btn-p-hover-bdr);
    color:         var(--mgr-btn-p-color);
    text-decoration: none;
}
.mgr-btn--primary:active:not(:disabled) { opacity: .88; }
.mgr-btn--primary:focus-visible { box-shadow: 0 0 0 3px var(--mgr-primary-ring); }

/* Secondary / ghost */
.mgr-btn--secondary {
    background:    var(--mgr-btn-g-bg);
    color:         var(--mgr-btn-g-color);
    border-color:  var(--mgr-btn-g-border);
}
.mgr-btn--secondary:hover:not(:disabled),
.mgr-btn--secondary:focus-visible:not(:disabled) {
    background:    var(--mgr-btn-g-hover-bg);
    color:         var(--mgr-btn-g-hover-color);
    border-color:  var(--mgr-btn-g-hover-bdr);
    text-decoration: none;
}
.mgr-btn--secondary:active:not(:disabled) { opacity: .88; }
.mgr-btn--secondary:focus-visible { box-shadow: 0 0 0 3px var(--mgr-primary-ring); }

/* Danger */
.mgr-btn--danger {
    background:   var(--mgr-danger);
    color:        #fff;
    border-color: var(--mgr-danger);
}
.mgr-btn--danger:hover:not(:disabled),
.mgr-btn--danger:focus-visible:not(:disabled) {
    background:   var(--mgr-danger-dark);
    border-color: var(--mgr-danger-dark);
    color:        #fff;
    text-decoration: none;
}
.mgr-btn--danger:active:not(:disabled) { opacity: .88; }
.mgr-btn--danger:focus-visible { box-shadow: 0 0 0 3px var(--mgr-danger-ring); }

/* Switch / view-as user */
.mgr-btn--switch {
    background:   var(--mgr-success-light);
    color:        var(--mgr-success-dark);
    border-color: #bbf7d0;
    font-size:    12px;
    padding:      5px 10px;
    font-weight:  500;
}
.mgr-btn--switch:hover:not(:disabled),
.mgr-btn--switch:focus-visible:not(:disabled) {
    background:   #dcfce7;
    border-color: #86efac;
    color:        var(--mgr-success-dark);
    text-decoration: none;
}
.mgr-btn--switch:focus-visible { box-shadow: 0 0 0 3px var(--mgr-success-ring); }

/* Compact variant — same font-size, less padding (e.g. inside tight table cells) */
.mgr-btn--sm { padding: 5px 10px; font-size: var(--mgr-btn-font-size); }
.mgr-btn--xs { padding: 3px  8px; font-size: 11px; }

/* Icon-only */
.mgr-btn--icon {
    padding: 6px;
    width: 30px;
    height: 30px;
    border-color: var(--mgr-border);
    background:   transparent;
    color:        var(--mgr-muted);
}
.mgr-btn--icon:hover:not(:disabled) {
    background:   var(--mgr-bg-hover);
    border-color: var(--mgr-border);
    color:        var(--mgr-text);
}

/* ══════════════════════════════════════════════════════════════════
 * 3. UNIFIED MODAL CLOSE BUTTON
 * ══════════════════════════════════════════════════════════════════ */

/* ── X icon close button — SEPARATE COMPONENT, not related to .mgr-btn ──
 * Only shares color tokens with text buttons. No text, no label.
 * Never combine with .mgr-btn — that would inherit text-button sizing.
 * ─────────────────────────────────────────────────────────────────── */
.mgr-modal-close {
    /* Layout: fixed 32×32 icon target */
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    width:            32px;
    height:           32px;
    padding:          0;

    /* Appearance — shares color tokens only, NOT text-button sizing */
    background:       transparent;
    border:           1px solid transparent;
    border-radius:    var(--mgr-radius);
    color:            var(--mgr-muted);   /* shared color token */

    /* Icon sizing — independent from --mgr-btn-font-size */
    font-size:        18px;
    line-height:      1;

    cursor:           pointer;
    box-sizing:       border-box;
    outline:          none;
    transition:       background .14s, color .14s, border-color .14s, box-shadow .14s;
}
.mgr-modal-close:hover {
    background:   var(--mgr-bg-hover);
    border-color: var(--mgr-border);
    color:        var(--mgr-text);      /* shared color token */
}
.mgr-modal-close:focus-visible {
    border-color: var(--mgr-primary);
    box-shadow:   0 0 0 3px var(--mgr-primary-ring);
    color:        var(--mgr-text);
}
.mgr-modal-close:active { opacity: .7; }

/* Per-prefix aliases removed — all managers now emit mgr-btn classes directly */

/* ══════════════════════════════════════════════════════════════════
 * LIST-ROW ACTION BUTTONS  (v3.9.20 appearance restored)
 *
 * Scoped to the functional hook classes so ONLY table-row buttons
 * in the three manager lists are affected. Modal footer buttons
 * continue to use the base .mgr-btn system untouched.
 *
 * TCM list:  .tcm-vb  .tcm-eb  .tcm-db
 * CUM list:  .cum-vb  .cum-eb  .cum-db
 * USM list:  .usm-view-btn  .usm-edit-btn  .usm-delete-btn
 * ══════════════════════════════════════════════════════════════════ */

/* ── Shared base reset for list buttons ─────────────────────────── */
.tcm-vb, .tcm-eb, .tcm-db,
.cum-vb, .cum-eb, .cum-db,
.usm-view-btn, .usm-edit-btn, .usm-delete-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             4px;
    padding:         6px 12px;
    border-radius:   5px;
    font-size:       13px;
    font-weight:     500;
    line-height:     1;
    cursor:          pointer;
    white-space:     nowrap;
    text-decoration: none;
    border:          1px solid transparent;
    box-sizing:      border-box;
    vertical-align:  middle;
    transition:      background .14s, border-color .14s, color .14s, opacity .14s;
    outline:         none;
}
.tcm-vb:disabled, .tcm-eb:disabled, .tcm-db:disabled,
.cum-vb:disabled, .cum-eb:disabled, .cum-db:disabled,
.usm-view-btn:disabled, .usm-edit-btn:disabled, .usm-delete-btn:disabled {
    opacity: .5; cursor: not-allowed; pointer-events: none;
}

/* ── View (secondary) ───────────────────────────────────────────── */
.tcm-vb, .cum-vb, .usm-view-btn {
    background:  #f1f5f9;
    color:       #374151;
    border-color:#d1d5db;
}
.tcm-vb:hover:not(:disabled), .cum-vb:hover:not(:disabled), .usm-view-btn:hover:not(:disabled),
.tcm-vb:focus-visible:not(:disabled), .cum-vb:focus-visible:not(:disabled), .usm-view-btn:focus-visible:not(:disabled) {
    background:  #e2e8f0;
    border-color:#c0c8d4;
    color:       #1e293b;
}
.tcm-vb:focus-visible, .cum-vb:focus-visible, .usm-view-btn:focus-visible {
    box-shadow: 0 0 0 3px var(--mgr-primary-ring);
}

/* ── Edit (primary) ─────────────────────────────────────────────── */
.tcm-eb, .cum-eb, .usm-edit-btn {
    background:  var(--mgr-primary, #1a56db);
    color:       #fff;
    border-color:var(--mgr-primary, #1a56db);
}
.tcm-eb:hover:not(:disabled), .cum-eb:hover:not(:disabled), .usm-edit-btn:hover:not(:disabled),
.tcm-eb:focus-visible:not(:disabled), .cum-eb:focus-visible:not(:disabled), .usm-edit-btn:focus-visible:not(:disabled) {
    background:  var(--mgr-primary-dark, #1e40af);
    border-color:var(--mgr-primary-dark, #1e40af);
    color:       #fff;
}
.tcm-eb:focus-visible, .cum-eb:focus-visible, .usm-edit-btn:focus-visible {
    box-shadow: 0 0 0 3px var(--mgr-primary-ring);
}

/* ── Delete (danger) ────────────────────────────────────────────── */
.tcm-db, .cum-db, .usm-delete-btn {
    background:  var(--mgr-danger, #dc2626);
    color:       #fff;
    border-color:var(--mgr-danger, #dc2626);
}
.tcm-db:hover:not(:disabled), .cum-db:hover:not(:disabled), .usm-delete-btn:hover:not(:disabled),
.tcm-db:focus-visible:not(:disabled), .cum-db:focus-visible:not(:disabled), .usm-delete-btn:focus-visible:not(:disabled) {
    background:  var(--mgr-danger-dark, #b91c1c);
    border-color:var(--mgr-danger-dark, #b91c1c);
    color:       #fff;
}
.tcm-db:focus-visible, .cum-db:focus-visible, .usm-delete-btn:focus-visible {
    box-shadow: 0 0 0 3px var(--mgr-danger-ring);
}

/* ══════════════════════════════════════════════════════════════════
 * 4. SHARED STRUCTURAL PATTERNS
 *    Common layout patterns extracted from all managers to avoid
 *    per-prefix duplication in the PHP <style> blocks.
 * ══════════════════════════════════════════════════════════════════ */

/* Shared pagination button sizing */
.tcm-pagination .tcm-btn,
.cum-pagination .cum-btn,
.lsm-pagination .lsm-btn,
.atm-pagination .atm-btn { min-width: 34px; justify-content: center; }

/* Shared modal animation — reuse across all managers */
@keyframes mgr-modal-in {
    from { transform: translateY(-12px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
.tcm-modal, .cum-modal, .lsm-modal { animation: mgr-modal-in .18s ease; }
.trm-modal-box                     { animation: mgr-modal-in .18s ease; }
.atm-modal-box                     { animation: mgr-modal-in .18s ease; }

/* Remove duplicate keyframe declarations from inline styles */
/* (tcm-in, cum-in, lsm-in are now aliases of mgr-modal-in) */
@keyframes tcm-in { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cum-in { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lsm-in { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ══════════════════════════════════════════════════════════════════
 * 5. AVAIL-MANAGER BUTTON FIXES
 *    avail-manager.js uses .qb-btn variants from booking.css,
 *    but the avail-manager page doesn't always load booking.css.
 *    Alias here so avail buttons are always styled.
 * ══════════════════════════════════════════════════════════════════ */

.qb-inline-form .qb-btn--primary   { background: var(--mgr-btn-p-bg);  color: var(--mgr-btn-p-color); border: 1px solid var(--mgr-btn-p-border); border-radius: var(--mgr-radius); padding: 7px 13px; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .14s, border-color .14s; }
.qb-inline-form .qb-btn--primary:hover { background: var(--mgr-btn-p-hover-bg); border-color: var(--mgr-btn-p-hover-bdr); }
.qb-inline-form .qb-btn--ghost     { background: var(--mgr-btn-g-bg);  color: var(--mgr-btn-g-color); border: 1px solid var(--mgr-btn-g-border); border-radius: var(--mgr-radius); padding: 7px 13px; font-size: 13px; cursor: pointer; transition: background .14s; }
.qb-inline-form .qb-btn--ghost:hover { background: var(--mgr-btn-g-hover-bg); }