:root {
  --bg:#f4f6f8; --card:#fff; --text:#1a1f2b; --muted:#626976;
  --primary:#0b6cf2; --primary-dark:#0852bc; --danger:#c53030;
  --border:#e5e7eb;
}
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }

.nav { display:flex; align-items:center; gap:1rem; padding:.75rem 1rem; background:#0f172a; color:#fff; }
.nav .brand { color:#fff; font-weight:700; }
.nav nav { display:flex; gap:1rem; flex:1; }
.nav nav a { color:#cbd5e1; padding:.25rem .5rem; border-radius:6px; }
.nav nav a.active, .nav nav a:hover { background:#1e293b; color:#fff; text-decoration:none; }
.nav .logout { display:flex; align-items:center; gap:.5rem; }
.nav .user { color:#cbd5e1; font-size:.9rem; }
.nav button { background:transparent; color:#cbd5e1; border:1px solid #334155; padding:.3rem .6rem; border-radius:6px; cursor:pointer; }
.nav button:hover { background:#1e293b; }

.topbar { display:flex; align-items:center; gap:1rem; padding:.75rem 1rem; background:#0f172a; color:#fff; position:sticky; top:0; z-index:50; }
.topbar .brand { color:#fff; font-weight:700; font-size:1.05rem; flex:1; display:flex; align-items:center; gap:.55rem; text-decoration:none; }
.topbar .brand-logo { width:32px; height:32px; border-radius:6px; background:#fff; object-fit:contain; flex:none; }
.topbar .logout { display:flex; align-items:center; gap:.5rem; }
.topbar .user { color:#cbd5e1; font-size:.9rem; }
.topbar button[type=submit] { background:transparent; color:#cbd5e1; border:1px solid #334155; padding:.3rem .6rem; border-radius:6px; cursor:pointer; }
.topbar button[type=submit]:hover { background:#1e293b; }

.menu-toggle { background:transparent; border:0; padding:.4rem; cursor:pointer; display:inline-flex; flex-direction:column; gap:4px; width:36px; height:36px; justify-content:center; align-items:center; border-radius:6px; }
.menu-toggle:hover { background:#1e293b; }
.menu-toggle span { display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:transform .2s, opacity .2s; }
body.menu-open .menu-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2){ opacity:0; }
body.menu-open .menu-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.sidemenu { position:fixed; top:0; left:0; bottom:0; width:240px; background:#0f172a; color:#fff; transform:translateX(-100%); transition:transform .2s ease; z-index:60; padding-top:64px; display:flex; flex-direction:column; }
.nav-close { position:absolute; top:10px; right:12px; min-height:44px; padding:.4rem .65rem; border:1px solid #64748b; border-radius:6px; background:transparent; color:#cbd5e1; font:inherit; cursor:pointer; }
body.menu-open .sidemenu { box-shadow:2px 0 12px rgba(0,0,0,.15); }
.sidemenu nav { display:flex; flex-direction:column; padding:.5rem; flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.sidemenu nav a { display:flex; align-items:center; gap:.6rem; color:#cbd5e1; padding:.6rem .85rem; border-radius:8px; margin:.08rem 0; font-size:.95rem; }
.sidemenu nav a.active, .sidemenu nav a:hover { background:#1e293b; color:#fff; text-decoration:none; }
.sidemenu nav a:focus-visible, .menu-toggle:focus-visible, .topbar button:focus-visible, .nav-section:focus-visible { outline:2px solid #60a5fa; outline-offset:2px; }
.nav-ico { width:18px; height:18px; flex:none; opacity:.8; }
.sidemenu nav a.active .nav-ico { opacity:1; }

/* Collapsible section headers */
.nav-sec { display:flex; flex-direction:column; }
.nav-section { display:flex; align-items:center; justify-content:space-between; gap:.5rem; width:100%; background:transparent; border:0; cursor:pointer; font:inherit; color:#94a3b8; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:.6rem .85rem .25rem; border-radius:6px; }
.nav-section:hover { color:#94a3b8; }
.nav-caret { width:14px; height:14px; flex:none; transition:transform .15s ease; }
.nav-sec.collapsed .nav-caret { transform:rotate(-90deg); }
.nav-sec.collapsed .nav-group { display:none; }
.nav-group { display:flex; flex-direction:column; }
.sidemenu nav > .nav-sec:first-child .nav-section { padding-top:.1rem; }
.nav-divider { height:1px; background:#1e293b; margin:.5rem; }
.scrim { position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .2s; z-index:55; }
body.menu-open .sidemenu { transform:translateX(0); }
body.menu-open .scrim { opacity:1; pointer-events:auto; }

/* Desktop (≥1024px): the menu docks as a left rail (open by default). The
   hamburger stays available so it can be collapsed to reclaim space. */
@media (min-width:1024px) {
  .nav-close { display:none; }
  .scrim { display:none !important; }
  .sidemenu { box-shadow:none; z-index:40; border-right:1px solid #1e293b; }
  body.menu-open .container { margin-left:264px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidemenu, .scrim, .menu-toggle span, .hub-card, .nav-caret { transition:none; }
}

.container { max-width: 1100px; margin: 1.5rem auto; padding: 0 1rem; }
.page-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; gap:.5rem; flex-wrap:wrap; }
.page-header h1 { margin:0; font-size:1.5rem; }
.count { color:var(--muted); font-weight:400; font-size:1rem; margin-left:.5rem; }

.card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:1rem 1.25rem; margin-bottom:1rem; }
.grid { display:grid; gap:1rem; grid-template-columns: 1fr; }
.grid > * { min-width:0; }
.grid > .card-wide { grid-column:1 / -1; }
@media(min-width: 800px){ .grid { grid-template-columns: 1fr 1fr; } }

.filters { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.filters input, .filters select { padding:.5rem .6rem; border:1px solid var(--border); border-radius:8px; background:#fff; font-family:inherit; }
.filters button { padding:.5rem .9rem; border:0; background:var(--primary); color:#fff; border-radius:8px; cursor:pointer; font-family:inherit; }

.table-wrap { overflow-x:auto; background:#fff; border:1px solid var(--border); border-radius:10px; }
table { width:100%; border-collapse: collapse; }
th, td { text-align:left; padding:.55rem .75rem; border-bottom:1px solid var(--border); font-size:.95rem; }
th { background:#f9fafb; font-weight:600; color:#374151; }
tr:last-child td { border-bottom:none; }
.empty { color:var(--muted); text-align:center; padding:1rem; }

.contact-history table { table-layout:fixed; }
.contact-history th, .contact-history td { overflow-wrap:anywhere; }

.promotion-dialog { width:calc(100% - 2rem); max-width:32rem; max-height:calc(100% - 2rem); overflow:auto; overflow-wrap:anywhere; border:1px solid var(--border); border-radius:10px; padding:1.25rem; color:var(--text); }
.promotion-dialog::backdrop { background:rgba(0,0,0,.45); }
.promotion-dialog h2 { margin-top:0; }
.promotion-dialog .form { border:0; padding:0; }
.promotion-dialog .actions { flex-wrap:wrap; }

.btn, button.btn { display:inline-block; padding:.5rem .9rem; border-radius:8px; border:1px solid var(--border); background:#fff; color:var(--text); cursor:pointer; font:inherit; }
.btn.primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn.primary:hover { background:var(--primary-dark); }
.btn.danger { background:#fff; color:var(--danger); border-color:#f1c0c0; }
.btn.danger:hover { background:#fdecec; }
.btn.small { padding:.25rem .55rem; font-size:.85rem; }
.btn-link { color:var(--muted); padding:.5rem .25rem; }
.btn.disabled { color:var(--muted); background:#f9fafb; cursor:default; pointer-events:none; }

.student-nav { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:1rem; }
.student-nav .btn-link { text-align:center; }

.form { background:#fff; border:1px solid var(--border); border-radius:10px; padding:1rem 1.25rem; }
.form label { display:block; margin-bottom:.75rem; font-size:.9rem; color:#374151; }
.form input, .form select, .form textarea { width:100%; padding:.55rem .65rem; border:1px solid var(--border); border-radius:8px; font:inherit; margin-top:.25rem; background:#fff; }
.form .row { display:grid; gap:.75rem; grid-template-columns: 1fr; }
@media(min-width: 700px){ .form .row { grid-template-columns: repeat(3, 1fr); } }
.form.inline { display:flex; flex-wrap:wrap; gap:.5rem; align-items:end; }
.form.inline label { flex:1 1 180px; margin-bottom:0; }
.actions { display:flex; gap:.5rem; align-items:center; margin-top:.5rem; }

dl { display:grid; grid-template-columns: 140px 1fr; gap:.35rem .75rem; margin:0; }
dt { color:var(--muted); }
dd { margin:0; }
.stat { font-size:1.1rem; margin:.25rem 0 1rem; }

/* Free-text fields (notes) keep the line breaks exactly as typed. */
.multiline { white-space: pre-wrap; overflow-wrap: anywhere; }
td.multiline { min-width: 10rem; }
.sd-privacy { color:var(--muted); font-size:.82rem; margin-top:1rem; max-width:46ch; }

.checks { display:grid; gap:.4rem; grid-template-columns: 1fr; }
@media(min-width: 600px){ .checks { grid-template-columns: 1fr 1fr; } }
@media(min-width: 1000px){ .checks { grid-template-columns: 1fr 1fr 1fr; } }
.check { display:flex; align-items:center; gap:.5rem; padding:.4rem .5rem; border:1px solid var(--border); border-radius:8px; background:#fafbfc; cursor:pointer; }
.check input { width:18px; height:18px; }
.check small { color:var(--muted); margin-left:.25rem; }

.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; background:linear-gradient(135deg,#0f172a,#0b6cf2); }
.login-card { background:#fff; padding:2rem; border-radius:14px; width:100%; max-width:360px; box-shadow:0 20px 60px rgba(0,0,0,.25); text-align:center; }
.login-logo { display:block; width:160px; max-width:60%; height:auto; margin:0 auto 1rem; }
.login-card form { text-align:left; }
.login-card h1 { margin:0 0 .25rem; }
.login-card .subtitle { color:var(--muted); margin-top:0; }
.login-card label { display:block; margin-bottom:.75rem; font-size:.9rem; color:#374151; }
.login-card input { width:100%; padding:.55rem .65rem; border:1px solid var(--border); border-radius:8px; font:inherit; margin-top:.25rem; }
.login-card button { width:100%; padding:.65rem; background:var(--primary); color:#fff; border:0; border-radius:8px; font-weight:600; cursor:pointer; }
.login-card button:hover { background:var(--primary-dark); }
.alert { background:#fdecec; color:var(--danger); padding:.55rem .75rem; border-radius:8px; margin-bottom:.75rem; font-size:.9rem; }
.muted-note { color:var(--muted); margin:.25rem 0 1rem; font-size:.95rem; }
.tag { display:inline-block; padding:.1rem .5rem; border-radius:999px; font-size:.8rem; background:#e5e7eb; color:#374151; margin-right:.25rem; }
.tag-sensei { background:#dcfce7; color:#166534; }
.tag-coach { background:#dbeafe; color:#1e3a8a; }
.tag-volunteer { background:#ede9fe; color:#5b21b6; }
.tag-owner { background:#fef3c7; color:#92400e; }
.tag-warn { background:#fee2e2; color:#991b1b; }
.row-warn { background:#fef2f2; }
.alert.success { background:#dcfce7; color:#166534; }
.checkbox { display:flex; align-items:center; gap:.5rem; font-weight:normal; }
.checkbox input { width:auto; }
.row-archived { color:var(--muted); }
.row-archived td a { color:#6b7280; }
.chart { width:100%; }
.chart svg { width:100%; height:auto; display:block; }
.chart-grid { stroke:#eef0f3; stroke-width:1; }
.chart-axis-line { stroke:#cbd5e1; stroke-width:1; }
.chart-axis { fill:#6b7280; font-size:11px; }
.chart-empty { padding:1rem 0; }
.chart-legend { display:flex; flex-wrap:wrap; gap:1rem; margin-top:.5rem; font-size:.85rem; color:#374151; }
.chart-legend-item { display:inline-flex; align-items:center; gap:.35rem; }
.chart-swatch { display:inline-block; width:12px; height:12px; border-radius:3px; }
.inline-label { display:flex; align-items:center; gap:.4rem; font-size:.9rem; color:#374151; }
.inline-label input { padding:.4rem .55rem; border:1px solid var(--border); border-radius:8px; font:inherit; }
a.tag { text-decoration:none; }
a.tag:hover { text-decoration:underline; }
.hub-card { display:block; text-decoration:none; color:inherit; transition:transform .1s, box-shadow .1s; }
.hub-card:hover { transform: translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,.06); text-decoration:none; }
.hub-card h3 { margin:0 0 .25rem; color:var(--primary); }
.hub-card p { margin:0; color:var(--muted); }
.hint { display:block; color:var(--muted); font-size:.8rem; margin-top:.25rem; }
.subnav { display:flex; gap:.5rem; margin:0 0 1rem; }
.subnav a { padding:.35rem .75rem; border-radius:8px; background:#fff; border:1px solid var(--border); color:var(--text); }
.subnav a.active { background:var(--primary); color:#fff; border-color:var(--primary); }

/* ---- Mobile (≤640px) ---- */
@media (max-width: 640px) {
  /* Record tables: turn wide tables into stacked cards.
     Add class `table-cards` to a table's wrapper, `data-label="Col"` to each
     <td>, `cell-title` to the heading cell, and `cell-action` to a cell that
     holds the row's buttons. */
  .table-cards { overflow-x: visible; border: 0; background: transparent; }
  .table-cards table,
  .table-cards tbody,
  .table-cards tfoot,
  .table-cards tr,
  .table-cards td { display: block; width: 100%; }
  .table-cards thead { display: none; }
  /* Each record is a compact card: the title and actions span the full
     width, the remaining label/value pairs flow in a two-column grid. */
  .table-cards tr {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: .6rem;
    padding: .45rem .9rem .6rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: .75rem;
    align-items: start;
    grid-auto-flow: row dense;
  }
  .table-cards td {
    border: 0;
    padding: .3rem 0;
    font-size: .95rem;
    display: block;
    width: auto;
    text-align: left;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  /* Keep state-row colors that the card background would otherwise mask */
  .table-cards tr.row-warn { background: #fef2f2; }
  .table-cards tr.row-archived { color: var(--muted); }
  .table-cards tr.row-archived td a { color: #6b7280; }
  .table-cards td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-weight: 600;
    font-size: .72rem;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .02em;
  }
  .table-cards td[data-label=""]::before { display: none; }
  /* Low-value columns, and cells with nothing to show, are hidden on phones */
  .table-cards td.cell-optional,
  .table-cards td.is-empty,
  .table-cards td:empty { display: none; }
  /* Heading cell reads like a card header */
  .table-cards td.cell-title {
    grid-column: 1 / -1;
    font-weight: 700;
    font-size: 1.05rem;
    padding: .1rem 0 .2rem;
  }
  .table-cards td.cell-title::before { display: none; }
  .table-cards td.cell-title > a:first-of-type { display: inline-block; padding: .75rem 0; margin: -.55rem 0; }
  /* Action cell: a row of full-width tap targets */
  .table-cards td.cell-action {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding-top: .5rem;
  }
  .table-cards td.cell-action::before { display: none; }
  .table-cards td.cell-action > * { flex: 1 1 0; min-width: 0; margin: 0; }
  .table-cards td.cell-action .btn,
  .table-cards td.cell-action button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: .55rem;
    font-size: 1rem;
    margin: 0;
  }
  .table-cards td.cell-action form { display: flex !important; margin: 0; }
  /* Empty / message rows that span all columns */
  .table-cards td[colspan] { grid-column: 1 / -1; text-align: center; }
  .table-cards td[colspan]::before { display: none; }
  /* Cells holding a form or list, or long text: full card width */
  .table-cards td.cell-block,
  .table-cards td.cell-wide { grid-column: 1 / -1; }
  .table-cards td.cell-block::before { margin-bottom: .25rem; }
  /* Lists whose remaining values are short (numbers, times) fit three a row. */
  .table-cards.cards-3 tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Filters stack and go full-width */
  .filters { flex-direction: column; align-items: stretch; }
  .filters input,
  .filters select,
  .filters button,
  .filters .btn-link,
  .filters .inline-label { width: 100%; }
  .filters .inline-label { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: center; gap: .4rem; }
  .filters .inline-label input { width: 100%; min-width: 0; }

  /* Forms: comfortable full-width actions */
  .form .actions { flex-direction: column; align-items: stretch; }
  .form .actions .btn,
  .form .actions button { width: 100%; text-align: center; }

  /* Page-header action clusters wrap to full width */
  .page-header > div { display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; }
  .page-header > div form { display: inline-flex; margin: 0; }

  /* Detail description lists stack */
  dl { grid-template-columns: 1fr; gap: .15rem .5rem; }
  dl dt { margin-top: .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; }
  dl dt:first-child { margin-top: 0; }

  /* Take-attendance specifics */
  .attendance-detail { padding: 1rem; }
  .attendance-detail .filters input#attLive { padding: .7rem .75rem; font-size: 1rem; }
  .checks { grid-template-columns: 1fr; gap: .5rem; }
  .check {
    padding: .8rem .75rem;
    border-radius: 10px;
    font-size: 1.05rem;
    gap: .75rem;
  }
  .check input { width: 24px; height: 24px; flex: 0 0 auto; }
  .check small { display: block; margin-left: 0; font-size: .85rem; }
  /* Sticky save bar so it's always reachable */
  .attendance-detail .save-bar {
    position: sticky;
    bottom: 0;
    margin: .5rem -1rem -1rem;
    padding: .75rem 1rem;
    background: var(--card);
    border-top: 1px solid var(--border);
  }
  .attendance-detail .save-bar .btn {
    width: 100%;
    padding: .85rem;
    font-size: 1.05rem;
  }
}

/* --- Smart Dojo (AI chat) ------------------------------------------------- */
.sd-layout { display:grid; grid-template-columns:240px 1fr; gap:1rem; align-items:start; }
.sd-sidebar { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:.75rem; }
.sd-sidebar h3 { margin:.25rem .25rem .5rem; font-size:.95rem; }
.sd-conv-list { display:flex; flex-direction:column; gap:.25rem; max-height:60vh; overflow:auto; }
.sd-conv { display:flex; align-items:center; gap:.25rem; }
.sd-conv a { flex:1; padding:.5rem .6rem; border-radius:8px; color:var(--text); font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sd-conv a:hover, .sd-conv a.active { background:#eef2ff; text-decoration:none; }
.sd-conv button { background:transparent; border:0; color:var(--muted); cursor:pointer; padding:.25rem .4rem; border-radius:6px; }
.sd-conv button:hover { background:#fde8e8; color:var(--danger); }

.sd-chat { background:var(--card); border:1px solid var(--border); border-radius:12px; display:flex; flex-direction:column; min-height:65vh; }
.sd-messages { flex:1; overflow:auto; padding:1rem; display:flex; flex-direction:column; gap:.85rem; }
.sd-empty { color:var(--muted); margin:auto; text-align:center; max-width:34rem; }
.sd-empty .sd-suggestions { display:flex; flex-direction:column; gap:.5rem; margin-top:1rem; }
.sd-empty .sd-suggestions button { background:#f8fafc; border:1px solid var(--border); border-radius:10px; padding:.6rem .8rem; text-align:left; cursor:pointer; font-size:.92rem; }
.sd-empty .sd-suggestions button:hover { background:#eef2ff; }

.sd-msg { display:flex; }
.sd-msg .bubble { padding:.7rem .9rem; border-radius:14px; max-width:80%; line-height:1.45; font-size:.95rem; }
.sd-msg.user { justify-content:flex-end; }
.sd-msg.user .bubble { background:var(--primary); color:#fff; border-bottom-right-radius:4px; }
.sd-msg.assistant .bubble { background:#f1f5f9; color:var(--text); border-bottom-left-radius:4px; }
.sd-msg.assistant .bubble table { border-collapse:collapse; margin:.5rem 0; font-size:.88rem; }
.sd-msg.assistant .bubble th, .sd-msg.assistant .bubble td { border:1px solid var(--border); padding:.3rem .5rem; text-align:left; }
.sd-msg.assistant .bubble ul { margin:.4rem 0; padding-left:1.2rem; }
.sd-sql { margin-top:.5rem; font-size:.82rem; }
.sd-sql summary { cursor:pointer; color:var(--muted); }
.sd-sql pre { background:#0f172a; color:#e2e8f0; padding:.6rem .7rem; border-radius:8px; overflow:auto; margin:.4rem 0 0; }

.sd-form { display:flex; gap:.5rem; padding:.75rem; border-top:1px solid var(--border); }
.sd-form textarea { flex:1; resize:none; border:1px solid var(--border); border-radius:10px; padding:.6rem .75rem; font:inherit; font-size:.95rem; max-height:140px; }
.sd-form button { padding:0 1.1rem; border-radius:10px; border:0; background:var(--primary); color:#fff; cursor:pointer; font-weight:600; }
.sd-form button:disabled { opacity:.5; cursor:default; }
.sd-typing { color:var(--muted); font-style:italic; }
.sd-disabled-note { background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; padding:.75rem 1rem; border-radius:10px; margin-bottom:1rem; }

@media (max-width:760px) {
  .sd-layout { grid-template-columns:1fr; }
  .sd-sidebar { order:2; }
  .sd-msg .bubble { max-width:92%; }
}

/* Trial leads */
.nav-badge { margin-left:auto; min-width:1.4rem; padding:0 .4rem; border-radius:999px; background:#f59e0b; color:#1a1f2b; font-size:.75rem; font-weight:700; line-height:1.4rem; text-align:center; }
.tag-trial { background:#fef3c7; color:#92400e; font-weight:600; }
.tag-lead { background:#fef3c7; color:#92400e; }
.tag-ok { background:#dcfce7; color:#166534; }
.tick-yes { color:#166534; font-weight:700; }
.tick-no { color:#991b1b; font-weight:700; }

/* Promotion tracker */
.tag-ready { background:#dcfce7; color:#166534; font-weight:600; }
.tag-getting-ready { background:#dbeafe; color:#1e40af; }
.tag-selected { outline:2px solid var(--primary); outline-offset:1px; }
.status-chips { display:flex; flex-wrap:wrap; gap:.35rem; margin:0 0 .75rem; }
.row-ready { background:#f0fdf4; }
.table-cards tr.row-ready { background:#f0fdf4; }
.req-skills, .req-list { list-style:none; padding-left:0; margin:.35rem 0 0; }
.req-list > li { margin-bottom:.35rem; }
.req-skills { padding-left:1.1rem; }
.skill-checklist { margin:.4rem 0 0; }
.skill-checklist ul { list-style:none; padding:0; margin:0 0 .5rem; }
.skill-checklist label { display:flex; align-items:center; gap:.6rem; min-height:44px; padding:.15rem .35rem; border-radius:6px; cursor:pointer; font-weight:400; margin:0; }
.skill-checklist label:hover { background:#f3f4f6; }
.skill-checklist label.met .skill-name { color:#166534; }
.skill-checklist input[type="checkbox"] { width:22px; height:22px; flex:0 0 22px; margin:0; accent-color:#166534; }
.skill-checklist .skill-name { flex:1; }
.skill-checklist .btn { min-height:44px; }
html { scroll-padding-top:4rem; }
.skill-picker { border:1px solid var(--border); border-radius:8px; padding:.75rem; }
.skill-picker input[type="search"] { width:100%; margin-bottom:.5rem; }
.skill-group { margin-bottom:.35rem; }
.skill-group summary { cursor:pointer; font-weight:600; }
.skill-options { display:grid; grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr)); gap:.15rem .75rem; padding:.35rem 0 .35rem 1rem; }
.row-due { background:#fffbeb; }
.table-cards tr.row-due { background:#fffbeb; }
.tabs { display:flex; gap:.25rem; flex-wrap:wrap; margin:0 0 1rem; border-bottom:1px solid var(--border); }
.tabs a { padding:.5rem .9rem; border-radius:8px 8px 0 0; color:var(--muted); text-decoration:none; border:1px solid transparent; border-bottom:0; margin-bottom:-1px; }
.tabs a.active { background:#fff; color:var(--text); border-color:var(--border); font-weight:600; }
.tabs a .count { margin-left:.35rem; font-size:.8rem; color:var(--muted); }
.check.check-trial { border-color:#f59e0b; background:#fffbeb; }
.alert.warn { background:#fef3c7; color:#92400e; }
.funnel { display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); margin-bottom:1rem; }
.funnel .hub-card span { font-size:1.6rem; }
.walk-in { margin-bottom:.75rem; }
.walk-in summary { cursor:pointer; font-weight:600; }

/* Management key indicators */
.gauges { display:grid; gap:.75rem; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
.kpi-row .gauges { grid-template-columns:minmax(140px, 180px); }
.gauge { margin:0; padding:.5rem; border:1px solid var(--border); border-radius:10px; background:#fff; text-align:center; }
.gauge svg { width:100%; max-width:160px; height:auto; display:block; margin:0 auto; }
.gauge .gauge-value { font-size:18px; font-weight:700; fill:var(--text); }
.gauge figcaption { font-size:.85rem; line-height:1.25; }
.gauge figcaption small { color:var(--muted); }
.kpi-row { display:grid; gap:1rem; grid-template-columns:1fr; align-items:start; }
@media (min-width: 720px) { .kpi-row { grid-template-columns:180px 1fr; } }
.kpi-detail .muted-note { margin-top:0; }

/* --- Student days checkboxes & KPI period controls ------------------------ */
.form fieldset.days-field { border:0; padding:0; margin:0 0 .75rem; display:flex; flex-wrap:wrap; gap:.25rem .9rem; }
.form fieldset.days-field legend { font-size:.9rem; color:#374151; margin-bottom:.25rem; width:100%; }
.form fieldset.days-field label.check { display:inline-flex; align-items:center; gap:.35rem; margin:0; }
.form fieldset.days-field label.check input { width:auto; margin:0; }
.kpi-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:.75rem; }
.kpi-toolbar .muted-note { margin:0; flex:1 1 260px; }
.kpi-toolbar .inline-form { display:inline; margin:0; }
.kpi-toolbar button[disabled] { opacity:.5; cursor:default; }
.kpi-range { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:.25rem 0 .5rem; font-size:.9rem; color:#374151; }
.kpi-range input { padding:.3rem .45rem; border:1px solid var(--border); border-radius:6px; font:inherit; }
.kpi-range .kpi-number { width:5rem; }
/* --- Parent portal ------------------------------------------------------- */
.family-nav { display:flex; gap:.25rem; flex-wrap:wrap; }
.family-nav a { color:#cbd5e1; padding:.35rem .6rem; border-radius:6px; text-decoration:none; font-size:.95rem; }
.family-nav a:hover { background:#1e293b; }
.family-nav a.active { background:#1e293b; color:#fff; }
@media (max-width: 640px) {
  .family-portal .topbar { flex-wrap:wrap; }
  .family-portal .family-nav { order:3; width:100%; }
}
.login-alt { margin:.75rem 0 0; font-size:.9rem; color:var(--muted); }
.login-or { margin:.5rem 0; color:var(--muted); font-size:.85rem; }
.login-card .google-btn { display:block; width:100%; text-align:center; font-weight:600; }
fieldset.plain { border:0; padding:0; margin:0 0 .75rem; }
fieldset.plain legend { font-weight:600; margin-bottom:.25rem; }
.invite-link { width:100%; padding:.45rem .6rem; border:1px solid var(--border); border-radius:8px; font:inherit; font-size:.85rem; background:#fff; color:var(--text); }

/* --- Wix import preview ---------------------------------------------------- */
.wix-summary { display:grid; gap:.5rem; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); margin-bottom:.75rem; }
.wix-summary .hub-card { display:block; text-decoration:none; color:inherit; }
.wix-summary .hub-card span { font-size:1.5rem; font-weight:700; }
.wix-group-new { border-left:4px solid var(--primary); }
.wix-group-possible_duplicate, .wix-group-cancelled_imported { border-left:4px solid #d97706; }
tr.wix-message td { padding-top:0; color:var(--muted); }
.wix-choice label { display:flex; align-items:center; gap:.35rem; white-space:nowrap; font-size:.9rem; margin:.1rem 0; }
.wix-choice input { width:auto; margin:0; }
.wix-confirm { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; }
.wix-confirm p { margin:0; flex:1 1 320px; }

/* --- Skills: proficiency forms and competitor tag --------------------------- */
.tag-competitor { background:#fee2e2; color:#991b1b; }
.inline-form { display:inline-flex; flex-wrap:wrap; align-items:center; gap:.35rem; margin:0; }
.inline-form select { padding:.3rem .45rem; border:1px solid var(--border); border-radius:6px; font:inherit; }

/* --- Mobile usability pass -------------------------------------------------- */
/* Progressive-enhancement helpers: `js` is set on <html> by the header script. */
.js .js-hide { display:none !important; }
.nav-account { display:none; }
.jump-links { display:none; }

/* Inline per-row inputs (event results, skill ratings) share the field look. */
.inline-result { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; margin:0; }
.inline-result input, .inline-form input:not([type=hidden]) { flex:1 1 9rem; min-width:0; padding:.4rem .55rem; border:1px solid var(--border); border-radius:8px; font:inherit; background:#fff; }

/* Section header with a trailing action that wraps under the title on phones. */
.card-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; margin:0 0 .5rem; }
.card-header h3 { margin:0; }

/* Danger zone (irreversible actions at the bottom of a record). */
.danger-zone { border-color:#f1c0c0; }
.danger-zone h3 { color:var(--danger); margin-top:0; }

/* Staff chips (class form) reuse the attendance `.check` look in a wrapping row. */
.check-chips { display:flex; flex-wrap:wrap; gap:.4rem; margin:.25rem 0 0; }
.check-chips .check { margin:0; }
.form .check-chips .check input, .form .skill-options input { width:auto; margin:0; }
fieldset.plain-field { border:0; padding:0; margin:0 0 .75rem; min-width:0; }
fieldset.plain-field legend { font-size:.9rem; color:#374151; padding:0; margin-bottom:.25rem; }

/* Charts: scroll sideways on phones instead of shrinking text to ~5px. */
.chart-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Collapsible management sections. The summary carries the heading plus the
   headline figure so a closed section still says something useful. */
.mgmt-sec { border-top:1px solid var(--border); margin-top:.75rem; }
.mgmt-sec:first-of-type { border-top:0; }
.fold > summary { cursor:pointer; display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem .75rem; padding:.6rem 0; list-style:none; }
.fold > summary::-webkit-details-marker { display:none; }
.fold > summary::before { content:"▸"; color:var(--muted); transition:transform .15s; }
.fold[open] > summary::before { transform:rotate(90deg); }
.fold > summary h3, .fold > summary h4 { margin:0; }
.card.fold > summary { padding-top:0; }
.headline { color:var(--muted); font-size:.9rem; }
.headline strong { color:var(--text); }
section.card.mgmt-card > .mgmt-sec { border-top:0; margin-top:0; }
.mgmt-jump { display:flex; flex-wrap:wrap; gap:.35rem; margin:0 0 1rem; }
.mgmt-jump a { padding:.3rem .7rem; border-radius:999px; background:#fff; border:1px solid var(--border); color:var(--text); font-size:.9rem; white-space:nowrap; }
.mgmt-jump a:hover { background:#eef2ff; text-decoration:none; }

/* Classes list: Upcoming / Recent group headings. */
.list-group-title { font-size:1.05rem; margin:1.25rem 0 .5rem; }
.list-group-title:first-of-type { margin-top:0; }

/* Attendance: present counter in the save bar. */
.save-bar { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; }
.present-count { color:var(--muted); font-weight:600; }
.class-summary { display:none; }

/* Below the desktop breakpoint: no iOS zoom on focus (fields under 16px zoom
   the page), lock the page behind the open menu, and keep the hamburger above
   the menu so it can close it. */
@media (max-width:1023px) {
  :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea) { font-size:16px; }
  body.menu-open { overflow:hidden; }
  .topbar { z-index:65; }
}

/* Touch screens: 44px tap targets. */
@media (pointer:coarse) {
  .btn, button.btn { min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  .btn-link { display:inline-flex; align-items:center; min-height:44px; }
  .filters input, .filters select, .filters button,
  .form input:not([type=checkbox]):not([type=radio]), .form select,
  .inline-form input:not([type=hidden]), .inline-form select, .inline-result input,
  .kpi-range input, .inline-label input, .login-card input, .login-card button { min-height:44px; }
  .menu-toggle { width:44px; height:44px; }
  .topbar button[type=submit] { min-height:44px; }
  .sidemenu nav a, .nav-section, .nav-logout { min-height:44px; }
  .checkbox, .skill-options label, .form fieldset.days-field label.check, .check-chips .check { min-height:44px; }
  .skill-options { gap:0 .75rem; }
  .skill-options label { display:flex; align-items:center; gap:.6rem; }
  .skill-options input[type=checkbox] { width:22px; height:22px; flex:0 0 22px; }
  .checks .checkbox input { width:22px; height:22px; }
  details > summary { padding-top:.6rem; padding-bottom:.6rem; min-height:44px; }
  .topbar .brand { min-height:44px; }
  .tabs a, .subnav a, .mgmt-jump a, .jump-links a { display:inline-flex; align-items:center; min-height:44px; }
}

/* Phones. */
@media (max-width:640px) {
  /* Compact topbar: the account controls move into the side menu. */
  .topbar { padding:.25rem .6rem; gap:.4rem; }
  .topbar .brand { white-space:nowrap; min-width:0; font-size:1rem; }
  /* Staff header only: the family portal has no side menu, so it keeps Logout. */
  body:not(.family-portal) .topbar .logout { display:none; }
  .sidemenu { padding-top:52px; }
  .nav-account { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.25rem .85rem .5rem; color:#94a3b8; font-size:.9rem; }
  .nav-account form { margin:0; }
  .nav-logout { background:transparent; color:#cbd5e1; border:1px solid #334155; padding:.3rem .8rem; border-radius:8px; font:inherit; cursor:pointer; }

  /* Tabs scroll sideways instead of wrapping. */
  .tabs { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .tabs::-webkit-scrollbar { display:none; }
  .tabs a { white-space:nowrap; flex:none; }

  /* Login: the logo must not push "Sign in" below the fold. */
  .login-page { padding:1rem; }
  .login-card { padding:1.25rem 1.25rem 1.5rem; }
  .login-logo { width:auto; max-width:60%; max-height:22vh; margin-bottom:.5rem; }

  /* In-page jump links (student page). */
  .jump-links { display:flex; flex-wrap:wrap; gap:.4rem; margin:-.25rem 0 .75rem; }
  .jump-links a { padding:.25rem .75rem; border-radius:999px; background:#fff; border:1px solid var(--border); font-size:.95rem; }

  /* Student page: Promotion and Skills first, Profile last. */
  .student-grid .sec-promotion { order:1; }
  .student-grid .sec-skills { order:2; }
  .student-grid .sec-attendance { order:3; }
  .student-grid .sec-events { order:4; }
  .student-grid .sec-profile { order:5; }
  .student-grid .danger-zone { order:6; }

  /* Attendance: one compact line of class info so students start near the top. */
  .attendance-page .page-header h1 { font-size:1.2rem; }
  .attendance-page .class-info { display:none; }
  .attendance-page .class-summary { display:block; margin:0 0 .75rem; font-size:.9rem; color:#374151; }
  .attendance-page .class-summary details summary { padding:.25rem 0; color:var(--muted); }
  .attendance-detail .save-bar .present-count { width:100%; text-align:center; }

  /* New sale: items table as cards; totals as plain lines under the cards. */
  .sale-items select.prod { width:100%; }
  .sale-items td.lineTotal { align-self:end; font-weight:600; padding-bottom:.6rem; }
  .sale-items tfoot tr { grid-template-columns:1fr auto; background:transparent; border:0; border-radius:0; margin:0; padding:.1rem .25rem; }
  .sale-items tfoot td[colspan] { grid-column:auto; text-align:left !important; }
  .sale-items tfoot td { padding:.15rem 0; font-size:1.05rem; }
  .desk-inline { display:none; }

  /* Charts keep readable axis labels (~10px) and scroll sideways. */
  .chart-scroll svg { min-width:680px; }

  /* Management jump links stay reachable while scrolling. */
  .mgmt-jump { position:sticky; top:52px; z-index:20; background:var(--bg); flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -1rem .75rem; padding:.4rem 1rem; }
  .mgmt-jump::-webkit-scrollbar { display:none; }

}
/* Edit hours: keep the destructive button away from Save. */
.delete-entry { margin:1.5rem 0 1rem; }

/* Checkbox chips and the skill picker inside `.form` (whose label rule is block). */
.form .check-chips .check { display:inline-flex; margin:0; }
.form .skill-options label { margin:0; }
.phone-inline { display:none; }
@media (min-width:641px) {
  .sale-items .qty { width:5rem; }
  .sale-items .price { width:7rem; }
  .sale-items .rate { width:6rem; }
}
@media (max-width:640px) { .phone-inline { display:inline; } }

/* Billing status and cancellation notices. */
.plain-list { list-style:none; padding:0; margin:.5rem 0 0; }
.plain-list li { padding:.4rem 0; border-top:1px solid var(--border); overflow-wrap:anywhere; }
.form label.checkbox { display:flex; align-items:flex-start; gap:.5rem; }
.form label.checkbox input { width:auto; margin-top:.2rem; flex:0 0 auto; }
.cancel-summary { display:grid; gap:.5rem; grid-template-columns:repeat(auto-fit, minmax(10rem, 1fr)); margin:.75rem 0; }
.cancel-summary div { background:#f9fafb; border:1px solid var(--border); border-radius:8px; padding:.6rem .75rem; }
.cancel-summary strong { display:block; font-size:1.15rem; }
.form-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.form-actions form { margin:0; }

/* --- Message center ------------------------------------------------------ */
.menu-toggle { position:relative; }
.menu-dot { position:absolute; top:-2px; right:-4px; min-width:1.15rem; height:1.15rem; padding:0 .3rem; border-radius:999px; background:#f59e0b; color:#1a1f2b; font-size:.7rem; font-weight:700; line-height:1.15rem; text-align:center; }
.family-nav .nav-badge { display:inline-block; margin-left:.25rem; }
.tag-new { background:#dbeafe; color:#1e40af; font-weight:600; }
.tabs-sub { border-bottom:0; margin-top:-.5rem; }
.tabs-sub a.active { border-color:var(--border); border-radius:8px; }
.table-cards tr.row-unread td.cell-title a, .inbox tr.row-unread td { font-weight:600; }
.thread-list { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.thread-list a { display:block; padding:.75rem 1rem; background:var(--card); border:1px solid var(--border); border-radius:10px; color:var(--text); text-decoration:none; }
.thread-list li.is-unread a { border-left:4px solid var(--primary); }
.thread-list li.is-unread .thread-subject { font-weight:700; }
.thread-top { display:flex; justify-content:space-between; gap:.5rem; align-items:baseline; }
.thread-subject { min-width:0; overflow-wrap:anywhere; }
.thread-when { color:var(--muted); font-size:.85rem; white-space:nowrap; }
.thread-meta { display:block; color:var(--muted); font-size:.88rem; margin-top:.2rem; overflow-wrap:anywhere; }
.thread-head h1 { margin:0; font-size:1.35rem; overflow-wrap:anywhere; }
.thread-head .thread-meta { margin:.25rem 0 1rem; }
.chat { list-style:none; margin:0 0 1rem; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.bubble { max-width:min(85%, 40rem); padding:.6rem .8rem; border-radius:14px; border:1px solid var(--border); background:#fff; overflow-wrap:anywhere; }
.bubble-theirs { align-self:flex-start; border-bottom-left-radius:4px; }
.bubble-mine { align-self:flex-end; background:#e8f1fe; border-color:#c7dcfb; border-bottom-right-radius:4px; }
.bubble-author { font-size:.8rem; font-weight:600; color:#374151; margin-bottom:.15rem; }
.bubble-when { font-size:.75rem; color:var(--muted); margin-top:.25rem; text-align:right; }
.reply-box textarea { min-height:5.5rem; }
.thread-status-form { margin:.75rem 0 1.5rem; }
.audience-choice { border:0; padding:0; margin:0 0 .75rem; display:grid; gap:.5rem; min-width:0; }
.audience-choice legend { font-size:.9rem; color:#374151; margin-bottom:.35rem; padding:0; }
.audience-choice .check { align-items:flex-start; margin:0; }
.audience-choice .check input { flex:0 0 auto; margin-top:.2rem; width:20px; height:20px; }
.audience-choice .check small { display:block; margin:.15rem 0 0; }
.chat .bubble { scroll-margin-top:5rem; }

/* --- Family home: service prices and charges by month -------------------- */
.muted { color:var(--muted); }
.services-total { margin:.5rem 0 0; text-align:right; }
.charges { margin-top:1rem; }
.charge-months { list-style:none; margin:0; padding:0; border-top:1px solid var(--border); }
.charge-months > li { border-bottom:1px solid var(--border); }
.charge-row { display:flex; justify-content:space-between; gap:.75rem; padding:.6rem .25rem; min-height:44px; align-items:center; }
.charge-months summary.charge-row { cursor:pointer; }
.charge-months summary.charge-row span:first-child::before { content:'▸ '; color:var(--muted); }
.charge-months details[open] summary.charge-row span:first-child::before { content:'▾ '; }
.charge-months summary.charge-row::-webkit-details-marker { display:none; }
.charge-months summary { list-style:none; }
.charge-total { font-weight:600; white-space:nowrap; }
.charge-items { list-style:none; margin:0 0 .6rem; padding:0 .25rem 0 1.25rem; font-size:.92rem; color:#374151; }
.charge-items li { display:flex; justify-content:space-between; gap:.75rem; padding:.2rem 0; }
.charge-items li span:first-child { min-width:0; overflow-wrap:anywhere; }
.charge-items li span:last-child { white-space:nowrap; }
.thread-visibility { margin-top:-.5rem !important; }
.visibility-form { margin:0 0 1.5rem; max-width:32rem; }