/* === START OF APP.CSS ===

/* ==== MUSICTREE GLOBAL THEME ==== */
/* Apply MusicTree colors to global elements */

/* Primary color overrides */
:root {
  --bs-primary: var(--color-grigio-blu);
  --bs-primary-rgb: 99,104,130;
}

/* Links and interactive elements */
a, .link {
  color: var(--color-grigio-blu);
}

a:hover, .link:hover {
  color: #4a4f62;
}

/* Button styling */
.btn-outline-primary {
  color: var(--color-grigio-blu);
  border-color: var(--color-grigio-blu);
}

.btn-outline-primary:hover {
  background-color: var(--color-grigio-blu);
  border-color: var(--color-grigio-blu);
  color: white;
}

/* Navigation active states */
.nav-link.active {
  color: var(--color-grigio-blu) !important;
}

/* Table row hover */
.table-hover tbody tr:hover {
  background-color: rgba(99,104,130,0.05);
}

/* ==== MUSICTREE TYPOGRAPHY ==== */
/* Apply Montserrat fonts globally */

body, .body-text {
  font-family: var(--font-body) !important;
}

h1, h2, h3, h4, h5, h6, .heading {
  font-family: var(--font-admin-heading) !important;
}

.card-title, .modal-title, .page-title {
  font-family: var(--font-admin-heading) !important;
  font-weight: 600;
}

.btn {
  font-family: var(--font-body) !important;
  font-weight: 500;
}

.nav-link {
  font-family: var(--font-body) !important;
  font-weight: 500;
}

/* ==== ORIGINAL APP.CSS ==== */

/* Day-of-week grid styles per mandate */
.dow-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.dow-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .6rem;
    border: 1px solid var(--border-light-grey, rgba(99, 104, 130, 0.3));
    border-radius: 999px;
    font-size: .9rem;
    user-select: none;
    cursor: pointer;
    background: var(--bs-body-bg);
    transition: all 0.2s ease;
}

.dow-chip:hover {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary);
}

.dow-chip input[type="checkbox"] {
    margin: 0;
}

/* List card badge styles per mandate */
.badge-dim {
    padding: .2rem .5rem;
    border-radius: 999px;
    background: var(--bs-secondary-bg);
    border: 1px solid var(--border-light-grey, rgba(99, 104, 130, 0.3));
    font-size: .85rem;
    color: var(--bs-body-color);
}

.sep {
    opacity: .6;
    margin: 0 .35rem;
}

.class-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

/* Compact class card styles per mandate - minimal row layout */
.classes-list.is-compact .class-card {
    margin-bottom: 0.5rem;
}

.classes-list.is-compact .class-card .card-body {
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.classes-list.is-compact .class-card__head {
    flex: 1;
    min-width: 200px;
}

.classes-list.is-compact .class-card__head h3 {
    margin-bottom: 0;
    font-size: 1rem;
}

.classes-list.is-compact .class-card__code {
    display: none;
}

.classes-list.is-compact .class-card__meta {
    display: flex !important;
    flex-direction: row;
    gap: 1rem;
    margin: 0;
    align-items: center;
    flex: 1;
    min-width: 300px;
}

.classes-list.is-compact .class-card__meta li {
    margin-bottom: 0;
    white-space: nowrap;
}

.classes-list.is-compact .class-card__meta li:not(:nth-child(1)):not(:nth-child(6)) {
    display: none; /* Hide all except teacher (1st) and enrolled count (6th) */
}

.classes-list.is-compact .class-card__actions {
    margin: 0;
    flex-shrink: 0;
}

/* Compact class page header (calendar → class detail) */
.page-header--compact{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}
.ph-left{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.back-link{font-weight:600;text-decoration:none;color:var(--bs-primary)}
.back-link:hover{color:var(--bs-primary);text-decoration:underline}
.crumb{display:flex;align-items:center;gap:.35rem;font-size:.9rem;opacity:.85}
.crumb .sep{opacity:.6}
.crumb a{color:var(--bs-primary);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.ph-right{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.pill.code{padding:.25rem .5rem;border-radius:.4rem;border:1px solid var(--bs-border-color);font-family:monospace;font-size:.85rem;background:var(--bs-secondary-bg)}
.badge-success{background:#2ecc71; color:#0b2e1a; padding:.2rem .5rem; border-radius:.4rem;font-size:.75rem}
.badge-muted{background:#5a6271; color:#fff; padding:.2rem .5rem; border-radius:.4rem;font-size:.75rem}
.inline{display:inline}

/* Card title styling */
.card-title{padding:1rem;margin-bottom:0;font-weight:600;font-size:1.1rem;border-bottom:1px solid var(--border-subtle-grey, rgba(99, 104, 130, 0.15))}

/* Key-value pairs for class overview */
.kv{display:grid;grid-template-columns:1fr 2fr;gap:.5rem 1rem;align-items:start}
.kv .k{font-weight:600;opacity:.85}
.kv .v{font-weight:400}

/* Drawer (left sidebar) — compact + tidy */
.drawer {
  position: fixed;
  top: 0; left: 0;
  height: 100%;
  width: 256px;                  /* was 280px */
  max-width: 86vw;
  background: var(--bs-body-bg);
  z-index: 1040;
  transform: translateX(-100%);
  transition: transform .18s ease;
  will-change: transform;
  box-shadow: var(--bs-box-shadow-lg);
  display: flex;
  flex-direction: column;
}
.drawer.is-open { transform: translateX(0); }

.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem .9rem;         /* tighter */
  border-bottom: 1px solid var(--bs-border-color);
}
.drawer-title { font-weight: 600; letter-spacing: .3px; margin: 0; }

.drawer-close {
  background: transparent;
  border: 0;
  color: var(--bs-body-color);
  font-size: 1.35rem;            /* slightly smaller */
  line-height: 1;
}

.drawer-body {
  padding: .25rem 0;             /* tighter vertical padding */
  overflow-y: auto;
}

/* ── Menu (Mobile Drawer Only) ───────────────────────────────────────────── */
.drawer .admin-menu { list-style: none; margin: 0; padding: 0; }
.drawer .admin-menu li { margin: 0; }

.drawer .admin-menu li a.nav-link,
.drawer .admin-menu li a {
  display: flex;
  align-items: center;
  gap: .5rem;                    /* icon ↔ label gap */
  padding: .5rem .75rem;         /* ↓ tighter than .9rem 1.1rem */
  font-size: .95rem;
  line-height: 1.25;
  color: var(--bs-body-color);
  text-decoration: none;
  border-left: 3px solid transparent;
  border-radius: .35rem;         /* softer hover shape */
}

.drawer .admin-menu li a:hover,
.drawer .admin-menu li a:focus-visible {
  background: var(--bs-secondary-bg);
  border-left-color: var(--brand-accent);
  outline: none;
}

.drawer .admin-menu li a.active {
  background: var(--bs-secondary-bg);
  border-left-color: var(--brand-accent);
  font-weight: 600;
}

.drawer .admin-menu li.logout a { color: var(--bs-danger); }

/* Icon sizing inside mobile drawer links */
.drawer .sidebar-nav .nav-link .nav-ico,
.drawer .admin-menu .nav-ico {
  width: 1.1rem;
  height: 1.1rem;
  font-size: 1.1rem;
  margin-right: .1rem;
  opacity: .9;
}

/* ── Scrim ──────────────────────────────────────────── */
.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1035;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.drawer-scrim.is-open { opacity: 1; pointer-events: auto; }
.drawer-scrim[hidden] { display: none; }

/* Hamburger icon */
.hamburger { background: transparent; border: 0; padding: .5rem; margin-right: .5rem; }
.hamburger span { display:block; width: 24px; height: 2px; background:var(--bs-body-color); margin:5px 0; }

@media (min-width: 992px) {
  /* Keep same behavior on desktop for now; we can pin later if desired */
}

/* === sidebar icon sizing === */
.sidebar-nav .nav-link .nav-ico {
  display:inline-block;
  font-size:1em;          /* inherit from link font-size */
  width:1.25em;           /* consistent visual width */
  line-height:1;          /* avoid tall line boxes */
  margin-right:.5rem;
  vertical-align:middle;  /* tidy alignment */
  opacity:.9;
}
.sidebar-nav .nav-link:hover .nav-ico { opacity:1; }

/* Optional: make active item icon a touch brighter */
.sidebar-nav .nav-link.active .nav-ico { opacity:1; }

.loc-pill{
  display:inline-block;
  padding: .25rem .5rem;
  border-radius: 999px;
  background: var(--loc-color, #6c757d);
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
}
.loc-pill .muted{ opacity:.8; font-weight:500; }

/* Page-scoped to admin classes only */
.admin-classes .class-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.admin-classes .class-thumb {
  width: 120px !important;
  height: 90px !important;
  border-radius: 8px;
  overflow: hidden;
  flex: 0 0 120px !important;
  background: var(--bs-secondary-bg);
  border: 1px solid var(--border-light-grey, rgba(99, 104, 130, 0.3));
}
.admin-classes .class-thumb .thumb-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Neutralize any global "make images full width" rules on this page */
.admin-classes img {
  max-width: none !important;
  width: auto !important;
  height: auto !important;
}

/* If your old markup used background-image on a container, kill it safely */
.admin-classes [style*="background-image"] {
  background: none !important;
}

/* Layout shell spacing */
.admin-classes .page-title,
.admin-classes .filters-section { margin-bottom: 20px; }

/* Page title icon */
.admin-classes .page-title { display:flex; align-items:center; gap:10px; }
.admin-classes .cap-icon { font-size: 1.25rem; color: var(--bs-primary); }

/* Responsive grid */
.admin-classes .classes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 20px;
}

/* Card */
.admin-classes .class-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--border-light-grey, rgba(99, 104, 130, 0.3));
  border-radius: 12px;
  background: var(--bs-body-bg);
  box-shadow: var(--bs-box-shadow-sm);
}
.admin-classes .class-card:hover {
  border-color: var(--bs-primary);
  background: var(--bs-secondary-bg);
}

/* Thumbnail (reuse sizes from prior mandate) */
.admin-classes .card-thumb {
  width: 120px !important;
  height: 90px !important;
  border-radius: 8px;
  overflow: hidden;
  flex: 0 0 120px !important;
  background: var(--bs-secondary-bg);
  border: 1px solid var(--border-light-grey, rgba(99, 104, 130, 0.3));
}
.admin-classes .card-thumb .thumb-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Main column */
.admin-classes .card-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.admin-classes .card-header {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.admin-classes .card-title {
  font-size: 1.05rem; font-weight: 600; margin: 0; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-classes .card-title a { text-decoration: none; }
.admin-classes .card-title a:hover { text-decoration: underline; }

.admin-classes .code-badge {
  font-size: .70rem; font-weight: 600; letter-spacing: .02em;
  padding: 2px 6px; border-radius: 6px; background: var(--bs-secondary-bg); color: var(--bs-body-color);
  border: 1px solid var(--border-light-grey, rgba(99, 104, 130, 0.3)); white-space: nowrap;
}

/* Meta lines */
.admin-classes .card-meta { display: grid; gap: 4px; color: var(--bs-body-color); }
.admin-classes .meta-line { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.admin-classes .meta-key { color: var(--bs-secondary); font-size: .87rem; }
.admin-classes .meta-val { font-size: .90rem; }
.admin-classes .dot { color: var(--bs-secondary); }
/* clamp helper for long strings */
.admin-classes .clamp-1 {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* Actions row */
.admin-classes .card-actions {
  margin-top: 6px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.admin-classes .btn-link {
  color: var(--bs-link-color); font-weight: 600; text-decoration: none; font-size: .92rem;
}
.admin-classes .btn-link:hover { text-decoration: underline; }
.admin-classes .actions-slot { margin-left: auto; }

/* Mobile: stack image on top for narrow cards */
@media (max-width: 430px) {
  .admin-classes .class-card {
    grid-template-columns: 1fr;
  }
  .admin-classes .card-thumb {
    width: 100% !important; height: 160px !important; flex: none !important;
  }
}

/* ----- Class image thumbnails (overview + edit) ----- */
.class-thumb {
  width: 140px;           
  height: 90px;           
  object-fit: cover;      
  border-radius: 8px;
  display: inline-block;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.class-thumb--sm {
  width: 110px;
  height: 70px;
}

@media (min-width: 992px){
  .class-thumb { width: 160px; height: 100px; }
}

/* Age Group badge styling per mandate */
.badge-age {
  display: inline-block;
  padding: .15rem .4rem;
  border-radius: 999px;
  font-size: .72rem;
  line-height: 1;
  border: 1px solid var(--bs-secondary);
  background: transparent;
  color: var(--bs-secondary);
  margin-right: .25rem;
  margin-bottom: .25rem;
  white-space: nowrap;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Navbar width alignment with pages */
.navbar .container-xxl{
  max-width:1320px;
  margin:0 auto;
  padding-left:16px;
  padding-right:16px;
}

/* Admin Classes — undo compact/hide rules from generic lists */
.route-admin-classes .classes-list.is-compact .class-card__chips,
.route-admin-classes .classes-list.is-compact .class-card__meta--row2 { display: flex !important; }
.route-admin-classes .class-card .card-body { opacity: 1 !important; }

/* === GLOBAL FULL-WIDTH OVERRIDE (desktops) === */
@media (min-width: 992px) {
  .container,
  .container-fluid,
  .container-xxl,
  .container-lg,
  .container-md,
  .container-sm {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .navbar .container-xxl {
    max-width: 100% !important;
  }
}

/* === Modal z-index safety net === */
.modal { z-index: 20010 !important; }
.modal-backdrop { z-index: 20000 !important; }

/* If any custom drawer/backdrop exists, hide it while modal is open */
.modal-open .drawer-backdrop,
.modal-open .enrollment-move-backdrop { display: none !important; }

/* Ensure modal is clickable even if a global overlay set pointer-events:none */
.modal, .modal * { pointer-events: auto !important; }

/* === MEDIA CONSENT BADGES (Phase 1) === */
.consent-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.consent-badge.consent-ok {
  background: #e6f7ea;
  color: #116b2a;
  border: 1px solid #a6d9b3;
}

.consent-badge.consent-no {
  background: #fdecea;
  color: #a1261d;
  border: 1px solid #f0b4ad;
}

.consent-badge.consent-pending {
  background: #eef1f6;
  color: #31456a;
  border: 1px solid #cbd3e0;
}

.consent-badge i {
  font-size: 0.85em;
}

/* === MUSIC TREE: COMPACT SCHEDULE (rebuilt) === */
@media (max-width: 640px) {
  /* Card shell created by JS */
  .mtc-card {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1fr 20px;
    gap: 8px 10px;
    align-items: center;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    padding: 10px 12px;
    min-height: 56px;
  }
  .mtc-card + .mtc-card { margin-top: 8px; }
  
  /* Apply teacher colors to mobile cards */
  .mtc-card[data-color-token] {
    background: var(--teacher-color-tint, color-mix(in srgb, var(--teacher-color-core, #5B8CFF) 18%, white)) !important;
  }
  .mtc-card[data-color-token]:hover,
  .mtc-card[data-color-token]:active {
    background: var(--teacher-color-tint-hover, color-mix(in srgb, var(--teacher-color-core, #5B8CFF) 28%, white)) !important;
  }

  /* Time pill */
  .mtc-time {
    justify-self: start;
    font-weight: 700;
    font-size: 12px;
    line-height: 14px;
    color: #C3497E;               /* Malva */
    background: rgba(195,73,126,.08);
    border-radius: 8px;
    padding: 6px 8px;
    min-width: 64px;
    text-align: center;
    white-space: nowrap;
  }

  /* Title + meta (2-line block) */
  .mtc-title {
    margin: 0;
    font-weight: 800;
    font-size: 15px;
    line-height: 20px;
    color: #1b1b1b;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mtc-meta {
    grid-column: 2 / 3;
    font-size: 12px;
    line-height: 16px;
    color: #636882;               /* Grigio Blu */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Chevron */
  .mtc-card::after {
    content: '▾';
    font-size: 16px;
    line-height: 16px;
    color: #ABAEBB;               /* Zucchero */
    justify-self: end;
  }
  .mtc-card.is-open::after {
    content: '▴';
    color: #636882;
  }

  /* Details (original chunky markup lives here) */
  .mtc-details {
    grid-column: 1 / -1;
    display: none;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed rgba(0,0,0,0.08);
    font-size: 13px;
    line-height: 18px;
    color: #2c2c2c;
  }
  .mtc-card.is-open .mtc-details { display: block; }

  /* Hide obvious bulky elements we move to details */
  .mtc-ghost-hidden { display: none !important; }

  /* Day header tidy */
  .mtc-day {
    padding: 8px 10px !important;
    border-radius: 12px;
  }
}

/* ============================================
   MY TEACHING TOOLS PANEL - Teacher Dashboard
   ============================================ */

/* Soft gradient background panel - Music Tree lavender aesthetic (matches other headers) */
.gradient-soft {
  background-color: #E6E0F4;
}

.teaching-tools-panel h2 {
  color: #636882 !important;
}

/* Grid layout for tools (auto-responsive) */
.teaching-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

/* White elevated button cards */
.tool-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #394150;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* Hover effect */
.tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  color: #394150;
  text-decoration: none;
}

/* Icon styling */
.tool-icon {
  font-size: 1.6rem;
  margin-bottom: 6px;
  color: #C3497E;
}

/* Label styling */
.tool-label {
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .teaching-tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   ATTENDANCE DONE STATE - Teacher Dashboard
   ============================================ */

/* Subtle visual difference for sessions with completed attendance */
.session-card-complete {
  opacity: 0.92;
}

/* ============================================
   CALM VISUAL HIERARCHY - Catch Up Card
   ============================================ */

/* Softer catch-up card with light red border instead of red background */
.attendance-catchup-card {
  background-color: #ffffff;
  border-radius: 18px;
  border: 1px solid #fecaca;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.attendance-catchup-card h6 {
  color: #374151;
}

.attendance-catchup-card .badge.bg-danger {
  font-weight: 600;
}

/* === END OF APP.CSS === */