/* ── Time Grid (Week + Day views) ── */
    .tg-wrapper { font-size:0.82rem; }
    .tg-scroll  { overflow-y:auto; max-height:600px; position:relative; }
    .tg-inner   { position:relative; }

    .tg-day-headers {
      display: flex;
      position: sticky;
      top: 0;
      background: #ffffff;
      z-index: 10;
      border-bottom: 2px solid var(--border);
      margin-bottom: 0;
    }
    .tg-time-gutter { width: 52px; flex-shrink: 0; }
    .tg-day-head {
      flex: 1;
      text-align: center;
      padding: 0.4rem 0.25rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      border-left: 1px solid var(--border);
    }
    .tg-day-head:hover { background: var(--surface2); }
    .tg-today-head { background: var(--violet-light, #ede9f7); }
    .tg-dow { font-size: 0.7rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
    .tg-daynum { font-size: 1rem; font-weight: 700; color: var(--text); }
    .tg-today-num { color: var(--violet); }

    .tg-body {
      display: flex;
      position: relative;
    }
    .tg-time-labels {
      position: relative;
      width: 52px;
      flex-shrink: 0;
    }
    .tg-hour-label {
      position: absolute;
      right: 6px;
      font-size: 0.65rem;
      color: var(--muted);
      transform: translateY(-50%);
      white-space: nowrap;
    }
    .tg-col {
      flex: 1;
      position: relative;
      border-left: 1px solid var(--border);
      min-width: 0;
      cursor: cell;
    }
    .tg-today { background: rgba(107,79,160,0.03); }
    .tg-hour-line {
      position: absolute;
      left: 0; right: 0;
      border-top: 1.5px solid rgba(13,31,45,0.15);
      pointer-events: none;
      z-index: 0;
    }
    .tg-half-line {
      position: absolute;
      left: 0; right: 0;
      border-top: 1px dashed rgba(13,31,45,0.1);
      pointer-events: none;
      z-index: 0;
    }
    .tg-quarter-line {
      position: absolute;
      left: 0; right: 0;
      border-top: 1px dotted rgba(13,31,45,0.055);
      pointer-events: none;
      z-index: 0;
    }
    .tg-five-line {
      position: absolute;
      left: 0; right: 0;
      border-top: 1px solid rgba(13,31,45,0.028);
      pointer-events: none;
      z-index: 0;
    }
    .tg-avail-block {
      position: absolute;
      left: 0; right: 0;
      background: rgba(42,157,143,0.10);
      border-left: 3px solid #2a9d8f;
      pointer-events: none;
      z-index: 1;
    }
    .tg-unavail-block {
      position: absolute;
      left: 0; right: 0;
      background: repeating-linear-gradient(
        45deg,
        rgba(0,0,0,0.035),
        rgba(0,0,0,0.035) 4px,
        transparent 4px,
        transparent 10px
      );
      background-color: rgba(0,0,0,0.055);
      pointer-events: none;
      z-index: 1;
    }
    .tg-event {
      position: absolute;
      left: 3px; right: 3px;
      background: var(--violet);
      color: #fff;
      border-radius: 6px;
      padding: 3px 6px;
      cursor: pointer;
      overflow: hidden;
      z-index: 4;
      box-shadow: 0 1px 4px rgba(0,0,0,0.15);
      transition: filter 0.12s;
    }
    .tg-event:hover { filter: brightness(1.1); }
    .tg-event-title { font-weight: 700; font-size: 0.72rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tg-event-time  { font-size: 0.65rem; opacity: 0.85; }
    .tg-event-names { font-size: 0.65rem; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tg-blockout-block {
      position: absolute;
      left: 0; right: 0;
      background: repeating-linear-gradient(
        45deg,
        rgba(224,92,92,0.10),
        rgba(224,92,92,0.10) 4px,
        transparent 4px,
        transparent 10px
      );
      background-color: rgba(224,92,92,0.08);
      border-left: 3px solid rgba(224,92,92,0.5);
      pointer-events: none;
      z-index: 3;
    }
    .tg-now-line { z-index: 5;
      position: absolute;
      left: 0; right: 0;
      border-top: 2px solid #e05c5c;
      z-index: 5;
      pointer-events: none;
    }
    .tg-now-line::before {
      content: '';
      position: absolute;
      left: -4px; top: -4px;
      width: 8px; height: 8px;
      background: #e05c5c;
      border-radius: 50%;
    }


    .av-cal-chip { font-size:0.68rem; padding:1px 5px; border-radius:4px; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; transition: filter 0.12s; }
    .av-cal-chip:hover { filter: brightness(0.92); }
    .av-chip-avail { background:#d4f0ec; color:#1a6e5c; border:1px solid #2a9d8f; }
    .av-chip-block  { background:#ffe8d6; color:#c47a3a; border:1px solid #e8916a; }


    .nav-group { margin-bottom: 2px; }
    .nav-group-toggle {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.55rem 1rem;
      background: rgba(255,255,255,0.05);
      border: none;
      border-radius: 8px;
      color: rgba(255,255,255,0.6);
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      cursor: pointer;
      text-align: left;
      transition: background 0.15s, color 0.15s;
      margin-bottom: 2px;
    }
    .nav-group-toggle:hover { background: rgba(255,255,255,0.1); color: #fff; }
    .nav-group-toggle.open  { background: rgba(255,255,255,0.08); color: #fff; }
    .nav-group-arrow {
      margin-left: auto;
      font-size: 0.7rem;
      transition: transform 0.2s;
      display: inline-block;
    }
    .nav-group-toggle.open .nav-group-arrow { transform: rotate(0deg); }
    .nav-group-toggle:not(.open) .nav-group-arrow { transform: rotate(-90deg); }
    .nav-group-items { padding-left: 0.5rem; overflow: hidden; }
    .nav-group-items .nav-item { font-size: 0.82rem; padding: 0.45rem 0.85rem; }


    .sp-tab {
      padding: 0.35rem 0.85rem; border-radius: 6px; border: none; cursor: pointer;
      font-size: 0.78rem; font-weight: 600; background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.55); transition: all 0.15s;
    }
    .sp-tab:hover { background: rgba(255,255,255,0.15); color: #fff; }
    .sp-tab.active { background: var(--violet); color: #fff; }
    .sp-row { display:flex; justify-content:space-between; align-items:flex-start; padding:0.55rem 0.75rem; border-bottom:1px solid #dce8ee; font-size:0.85rem; background:#fff; border-radius:0; }
    .sp-row:first-of-type { border-radius:8px 8px 0 0; }
    .sp-rows-wrap { background:#fff; border-radius:8px; overflow:hidden; margin-bottom:0.75rem; box-shadow:0 1px 3px rgba(13,31,45,0.07); }
    .sp-row:last-child { border-bottom:none; }
    .sp-label { color:var(--muted); font-size:0.78rem; min-width:110px; }
    .sp-section-title { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#6b8fa3; margin:1rem 0 0.4rem; padding-left:2px; }
    .sp-event-row { display:flex; align-items:flex-start; gap:0.75rem; padding:0.65rem 0.9rem; border-radius:10px; background:#fff; margin-bottom:0.5rem; cursor:pointer; box-shadow:0 1px 3px rgba(13,31,45,0.07); border:1px solid #dce8ee; }
    .sp-event-row:hover { background:#eef4f8; border-color:#b8cdd9; }
    .sp-event-icon { font-size:1.1rem; flex-shrink:0; margin-top:1px; }
    .sp-empty { text-align:center; padding:1.5rem; color:var(--muted); font-size:0.85rem; }


    /* ── Skater Profile Popout ── */
    #skater-profile-modal {
      position: fixed;
      inset: 0;
      background: rgba(13,31,45,0.55);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      backdrop-filter: blur(3px);
      animation: sp-fade-in 0.15s ease;
    }
    @keyframes sp-fade-in {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    #skater-profile-modal .sp-modal-inner {
      background: #f0f5f9;
      border-radius: 16px;
      width: 100%;
      max-width: 680px;
      max-height: 88vh;
      overflow-y: auto;
      box-shadow: 0 20px 60px rgba(13,31,45,0.4), 0 0 0 1px rgba(13,31,45,0.08);
      animation: sp-slide-up 0.18s ease;
    }
    @keyframes sp-slide-up {
      from { transform: translateY(24px); opacity: 0; }
      to   { transform: translateY(0);    opacity: 1; }
    }


    /* ════════════════════════════
       MOBILE RESPONSIVE
    ════════════════════════════ */
    @media (max-width: 768px) {

      /* Sidebar slides in/out */
      aside {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 500;
        width: 260px;
      }
      aside.mobile-open { transform: translateX(0); }

      /* Overlay behind open sidebar */
      #sidebar-overlay {
        display: none;
        position: fixed; inset: 0;
        background: rgba(13,31,45,0.5);
        z-index: 499;
      }
      #sidebar-overlay.active { display: block; }

      /* Main takes full width */
      main {
        margin-left: 0;
        max-width: 100%;
        padding: 0.75rem 1rem 5rem;
      }

      /* Top bar for mobile */
      #mobile-topbar {
        display: flex !important;
        align-items: center;
        gap: 0.75rem;
        background: var(--plum);
        padding: 0.75rem 1rem;
        position: sticky;
        top: 0;
        z-index: 200;
        margin: -0.75rem -1rem 1rem;
      }
      #mobile-topbar h2 {
        color: #fff;
        font-size: 0.95rem;
        font-weight: 700;
        flex: 1;
      }
      #mobile-topbar h2 span { color: var(--lilac); }
      #hamburger {
        background: none; border: none; cursor: pointer;
        display: flex; flex-direction: column; gap: 4px; padding: 4px;
      }
      #hamburger span {
        display: block; width: 22px; height: 2px;
        background: #fff; border-radius: 2px; transition: all 0.2s;
      }

      /* Section header wraps */
      .section-header {
        flex-wrap: wrap;
        gap: 0.5rem;
      }
      .section-header h1 { font-size: 1.25rem; }

      /* Tables scroll horizontally */
      .data-table { font-size: 0.78rem; }
      .card-body > .data-table,
      .card-body[style*="padding:0"] { overflow-x: auto; display: block; }

      /* Form grids collapse to single column */
      .form-grid, .form-grid.cols-3 {
        grid-template-columns: 1fr !important;
      }
      .form-full { grid-column: span 1 !important; }

      /* Stats grid 2 columns */
      .stats-grid { grid-template-columns: repeat(2, 1fr); }

      /* Skater cards 1 column */
      .skater-cards-grid { grid-template-columns: 1fr !important; }

      /* Calendar cells smaller text */
      .cal-cell { min-height: 48px; }
      .cal-lesson-chip { font-size: 0.62rem; padding: 1px 4px; }
      .cal-day-label { font-size: 0.7rem; }

      /* Time grid scrolls */
      .tg-scroll { max-height: 500px; }
      .tg-wrapper { overflow-x: auto; }
      .tg-body, .cal-week-grid { min-width: 500px; }

      /* Modal boxes full width */
      .modal-box, .sp-modal-inner,
      #skater-profile-modal > div { max-width: 100% !important; margin: 0.5rem; }

      /* Invoice table — hide date cols on small screens, keep skater+total+status+actions */
      #invoices-table th:nth-child(3),
      #invoices-table td:nth-child(3),
      #invoices-table th:nth-child(4),
      #invoices-table td:nth-child(4) { display: none; }

      /* Skaters table — hide USFS col */
      #skaters-table th:nth-child(4),
      #skaters-table td:nth-child(4) { display: none; }

      /* Analytics skater table — hide lessons + attendance on tiny screens */
      #analytics-skater-tbody td:nth-child(5),
      #analytics-skater-tbody td:nth-child(6),
      #analytics-skater-table th:nth-child(5),
      #analytics-skater-table th:nth-child(6) { display: none; }

      /* Skater picker wraps nicely */
      .skater-picker { max-height: 180px; }

      /* Nav group items slightly smaller */
      .nav-group-items .nav-item { font-size: 0.8rem; }

      /* lt-grid 1 column */
      .lt-grid { grid-template-columns: 1fr !important; }

      /* Section sub smaller */
      .section-sub { font-size: 0.78rem; }

      /* Card header wraps */
      .card-header { flex-wrap: wrap; gap: 0.5rem; }

      /* Attendance chips wrap */
      .att-chips { gap: 0.25rem; }
      .att-chip { font-size: 0.68rem; padding: 2px 7px; }

      /* Sp tabs scroll */
      #sp-header > div:last-child { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
      .sp-tab { white-space: nowrap; font-size: 0.72rem; padding: 0.3rem 0.65rem; }

      /* Analytics — 2-col grid collapses to 1 col */
      #section-analytics [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
      }
      #analytics-kpis { grid-template-columns: repeat(2, 1fr) !important; }

      /* Better touch targets for buttons */
      .btn { min-height: 36px; }
      .btn-sm { min-height: 32px; font-size: 0.78rem; padding: 0.3rem 0.75rem; }

      /* Section header actions wrap cleanly */
      .section-header > div:last-child {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
      }

      /* Modals: make close button bigger for touch */
      .modal-close { width: 36px; height: 36px; font-size: 1.2rem; }

      /* Filter/toolbar wraps */
      .cal-header { flex-wrap: wrap; gap: 0.5rem; }
      .cal-header > div:last-child { margin-left: 0 !important; }

      /* Lessons: action buttons wrap in table */
      .data-table td:last-child {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        border: none;
        padding: 0.5rem;
      }
    }

    /* Extra small screens (iPhone SE etc) */
    @media (max-width: 390px) {
      #analytics-kpis { grid-template-columns: 1fr 1fr !important; }
      .section-header h1 { font-size: 1.1rem; }
      .card-body { padding: 0.85rem 0.9rem; }
      #mobile-topbar { padding: 0.6rem 0.75rem; }
      #mobile-topbar h2 { font-size: 0.85rem; }
    }

    /* Hide mobile topbar on desktop */
    #mobile-topbar { display: none; }

    /* ── ADA: Reduced motion ── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }



    /* ── Drag & Drop Lessons ── */
    .tg-event.dragging { opacity: 0.4; cursor: grabbing !important; }
    .tg-drag-ghost {
      position: absolute;
      left: 3px; right: 3px;
      background: var(--violet);
      border: 2px dashed rgba(255,255,255,0.7);
      border-radius: 6px;
      opacity: 0.85;
      pointer-events: none;
      z-index: 10;
      display: flex;
      flex-direction: column;
      padding: 3px 6px;
      color: #fff;
      font-size: 0.72rem;
      font-weight: 700;
      box-shadow: 0 4px 16px rgba(107,79,160,0.4);
    }
    .tg-drag-time-tooltip {
      position: fixed;
      background: var(--deep);
      color: #fff;
      font-size: 0.78rem;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 6px;
      pointer-events: none;
      z-index: 1000;
      white-space: nowrap;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    .tg-drop-confirm {
      position: fixed;
      inset: 0;
      background: rgba(13,31,45,0.55);
      z-index: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(3px);
    }
    .tg-drop-confirm-box {
      background: #fff;
      border-radius: 14px;
      padding: 1.5rem;
      max-width: 380px;
      width: 90%;
      box-shadow: 0 20px 60px rgba(13,31,45,0.3);
      text-align: center;
    }


    /* Participant hover tooltip */
    .participant-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      background: var(--violet);
      color: #fff;
      font-size: 0.75rem;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 99px;
      cursor: default;
      position: relative;
    }
    .participant-tooltip {
      display: none;
      position: fixed;
      background: var(--deep);
      color: #fff;
      border-radius: 8px;
      padding: 0.5rem 0.75rem;
      min-width: 160px;
      max-width: 240px;
      font-size: 0.78rem;
      font-weight: 400;
      line-height: 1.7;
      z-index: 9999;
      box-shadow: 0 4px 20px rgba(13,31,45,0.3);
      white-space: nowrap;
      pointer-events: none;
    }
    .participant-tooltip.visible { display: block; }


    /* Master schedule hover tooltip */
    .ms-event-tooltip {
      display: none;
      position: fixed;
      background: var(--deep);
      color: #fff;
      border-radius: 10px;
      padding: 0.7rem 0.9rem;
      min-width: 200px;
      max-width: 280px;
      font-size: 0.8rem;
      line-height: 1.5;
      z-index: 9999;
      box-shadow: 0 4px 24px rgba(13,31,45,0.35);
      pointer-events: none;
    }
    .ms-event-tooltip.visible { display: block; }
    .ms-event-tooltip .tt-title { font-weight: 700; font-size: 0.88rem; margin-bottom: 0.35rem; }
    .ms-event-tooltip .tt-row { font-size: 0.78rem; opacity: 0.85; display: flex; align-items: flex-start; gap: 0.4rem; }


    /* ── Folder/File Grid ── */
    .file-folder-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
      gap: 1rem;
      padding: 0.5rem 0;
    }
    .file-folder-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.4rem;
      padding: 0.85rem 0.5rem 0.65rem;
      border-radius: 10px;
      border: 1.5px solid transparent;
      cursor: pointer;
      transition: background 0.12s, border-color 0.12s;
      position: relative;
      text-align: center;
    }
    .file-folder-item:hover { background: rgba(107,79,160,0.06); border-color: var(--violet); }
    .file-folder-item:hover .file-folder-actions { opacity: 1; }
    .file-folder-icon { font-size: 2.8rem; line-height: 1; position: relative; }
    .file-folder-badge {
      position: absolute; bottom: -4px; right: -4px;
      background: var(--violet); color: #fff;
      font-size: 0.55rem; font-weight: 700;
      padding: 1px 4px; border-radius: 4px;
      text-transform: uppercase; letter-spacing: 0.05em;
    }
    .file-folder-name {
      font-size: 0.78rem; font-weight: 600; color: var(--deep);
      word-break: break-word; line-height: 1.3; max-width: 100%;
    }
    .file-folder-sub {
      font-size: 0.68rem; color: var(--muted); line-height: 1.2;
    }
    .file-folder-filename {
      font-size: 0.68rem; color: var(--muted); line-height: 1.2;
      max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      opacity: 0; max-height: 0; transition: opacity 0.15s, max-height 0.15s;
      pointer-events: none;
    }
    .file-folder-item:hover .file-folder-filename {
      opacity: 1; max-height: 20px;
    }
    .file-folder-actions {
      display: flex; gap: 4px; opacity: 0;
      transition: opacity 0.15s; margin-top: 2px;
    }
    /* List view */
    .file-list-item {
      display: flex; align-items: center; gap: 0.85rem;
      padding: 0.55rem 0.85rem; border-radius: 8px;
      border: 1px solid var(--border); background: #fff;
      margin-bottom: 0.4rem; transition: border-color 0.12s;
    }
    .file-list-item:hover { border-color: var(--violet); }
    .file-list-icon { font-size: 1.5rem; flex-shrink: 0; }
    .file-list-info { flex: 1; min-width: 0; }
    .file-list-name { font-weight: 600; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .file-list-sub { font-size: 0.73rem; color: var(--muted); margin-top: 1px; }
    /* Group header */
    .file-group-header {
      font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.08em; color: var(--muted);
      padding: 0.75rem 0 0.4rem; margin-bottom: 0.25rem;
      border-bottom: 1px solid var(--border);
    }