/* ==========================================================================
   Courses & Classes tab (Phase 5 — CRM replacement)

   Everything here is namespaced `crm-` (plus a few small utility classes the
   admin stylesheet doesn't define) so this file can never restyle an existing
   admin screen. Colours follow the portal's own palette.
   ========================================================================== */

/* utilities the main admin stylesheet doesn't provide */
.btn-sm { padding: .3rem .6rem !important; font-size: .8rem !important; }
.modal-body { padding: 1rem 1.25rem; }
.modal-footer { padding: .85rem 1.25rem; border-top: 1px solid #e5e7eb; }

.crm-hidden { display: none !important; }

/* ------------------------------------------------------------------ cards */
/* Matches .admin-card in the admin stylesheet — same radius, same border, same
   shadow. The two appear on the same pages, and a card that is subtly rounder
   or flatter than its neighbour reads as an accident. */
.crm-card {
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem; margin-bottom: 1rem;
}
.crm-card h3 {
  margin: 0 0 .9rem; font-size: .95rem; color: var(--primary, #222E66);
  display: flex; align-items: center; gap: .5rem;
}
.crm-card h4.crm-sub {
  margin: 1.2rem 0 .6rem; font-size: .82rem; color: var(--primary, #222E66);
  display: flex; align-items: baseline; gap: .5rem;
}
.crm-card h4.crm-sub span { font-weight: 400; font-size: .75rem; color: #94a3b8; }

/* ----------------------------------------------------------------- layout */
.crm-split {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 1rem; align-items: start;
}
@media (max-width: 1200px) { .crm-split { grid-template-columns: 1fr; } }
.crm-sticky { position: sticky; top: 1rem; }

.crm-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: .75rem; }
.crm-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: .75rem; }
@media (max-width: 900px) { .crm-grid3, .crm-grid4 { grid-template-columns: 1fr; } }
@media (min-width: 901px) and (max-width: 1200px) { .crm-grid4 { grid-template-columns: repeat(2, 1fr); } }

.crm-rowline {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.2fr auto;
  gap: .5rem; align-items: end; margin-bottom: .5rem;
}
.crm-rowline-2 { grid-template-columns: 1fr auto; }
@media (max-width: 900px) { .crm-rowline { grid-template-columns: 1fr; } }

.crm-card label {
  display: block; font-size: .72rem; font-weight: 600;
  color: var(--text-muted, #64748b); margin-bottom: .25rem;
}

/* ---------------------------------------------------------------- preview */
.crm-prev-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .4rem; }
.crm-prev-count { font-size: 1.8rem; font-weight: 700; color: var(--primary, #222E66); line-height: 1; }
.crm-scroll { max-height: 55vh; overflow: auto; margin-top: .5rem; }
.crm-mini th, .crm-mini td { padding: .3rem .45rem !important; font-size: .8rem; }

.crm-hint { font-size: .78rem; color: var(--text-muted, #64748b); font-weight: 400; }
.crm-note {
  border-left: 3px solid var(--accent, #EA5B0C); background: #fff7ed;
  padding: .6rem .75rem; border-radius: 0 6px 6px 0; font-size: .8rem; margin: .6rem 0;
}

/* ------------------------------------------------------------------ pills */
/* Matches .acct-pill in the admin stylesheet — the two sit side by side on the
   Accounting and Bill Records pages, and differing by a hair read as sloppy. */
.crm-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem; border-radius: 999px;
  font-size: .6875rem; font-weight: 600; letter-spacing: .2px; white-space: nowrap;
}
.crm-pill-group   { background: #dbeafe; color: #1e40af; }
.crm-pill-private { background: #fce7f3; color: #9d174d; }
.crm-pill-semi    { background: #ede9fe; color: #5b21b6; }
.crm-pill-ok      { background: #dcfce7; color: #15803d; }
.crm-pill-cancel  { background: #fee2e2; color: #b91c1c; }
.crm-pill-manual  { background: #f1f5f9; color: #475569; margin-left: .3rem; }

/* ------------------------------------------------------------------ table */
tr.crm-row { cursor: pointer; }
tr.crm-row:hover { background: #f8fafc; }
tr.crm-row-cancelled td { opacity: .55; }
tr.crm-row-cancelled td:first-child { text-decoration: line-through; }

.crm-danger { color: #b91c1c !important; border-color: #fecaca !important; }
.crm-danger:hover { background: #fef2f2 !important; }

/* multi-select checkbox grids (teacher locations, certifications) */
.crm-checkgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .35rem .75rem;
  margin-top: .4rem;
}
.crm-check {
  display: flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 500; color: var(--text-primary, #1e293b);
  padding: .3rem .1rem; cursor: pointer; margin-bottom: 0;
}
.crm-check input { width: auto; margin: 0; cursor: pointer; }


/* Row actions: a fixed-width icon button each, so the column stays straight
   however many actions a row happens to offer. Bills used to mix an icon with
   "Open" / "Mark paid" / "Void" text buttons, which left the column ragged
   because each status shows a different set. */
.crm-actions { text-align: right; white-space: nowrap; }
.crm-actions .btn-sm {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: .25rem;
    vertical-align: middle;
}
.crm-actions .btn-sm i { font-size: .78rem; }

/* Placement tests: the one decision staff actually make about a submission. */
.pt-reviewed-toggle {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .85rem; font-weight: 600; color: #334155; cursor: pointer;
}
.pt-reviewed-toggle input { accent-color: #15803d; width: 16px; height: 16px; cursor: pointer; }