/* CAM Operations Console — admin-only styles */

.admin-shell { max-width: 1240px; margin: 0 auto; padding: 2rem 1.25rem 5rem; }

.admin-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 60%, var(--accent-deep) 100%);
  color: white; border-radius: 22px; padding: 2.25rem 2.5rem;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center;
  margin-bottom: 2.5rem;
}
@media (max-width: 900px) { .admin-hero { grid-template-columns: 1fr; padding: 1.75rem; } }
.admin-hero h1 { color: white; margin: 0.5rem 0 1rem; font-size: clamp(1.5rem, 3vw, 2.25rem); }
.admin-hero p { color: rgba(255,255,255,0.85); margin: 0; max-width: 56ch; }
.admin-eyebrow { color: var(--gold-light); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; }

.admin-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.stat-tile { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; padding: 0.85rem 1rem; }
.stat-tile .num { display: block; font-family: 'Fraunces', serif; font-size: 1.65rem; font-weight: 600; color: var(--gold-light); }
.stat-tile .num.warn { color: #f0c43d; }
.stat-tile .num.good { color: #5dd39e; }
.stat-tile .num.alert { color: #ff8576; }
.stat-tile .label { font-size: 0.74rem; letter-spacing: 0.04em; color: rgba(255,255,255,0.7); text-transform: uppercase; }

.admin-section-title {
  color: var(--navy); margin: 2.5rem 0 1rem; font-size: 0.95rem;
  font-family: 'Inter', sans-serif; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  border-top: 1px solid var(--line); padding-top: 1.5rem;
}

.quick-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 0; }
@media (max-width: 900px) { .quick-row { grid-template-columns: 1fr; } }
.quick-card {
  background: white; border: 1px solid var(--line); border-radius: 14px; padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--accent-deep); transition: all 0.2s;
}
.quick-card.urgent { border-left-color: #c84d3a; background: linear-gradient(180deg, #fff 0%, #fef5f3 100%); }
.quick-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -22px rgba(11,37,69,0.3); }
.quick-tag { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--accent-deep); }
.quick-card.urgent .quick-tag { color: #c84d3a; }
.quick-card h3 { color: var(--navy); margin: 0.4rem 0 0.5rem; font-size: 1.1rem; }
.quick-card p { color: var(--muted); margin: 0; font-size: 0.92rem; line-height: 1.55; }
.quick-link { display: inline-block; margin-top: 0.85rem; font-weight: 600; color: var(--accent-deep); font-size: 0.88rem; }
.quick-card.urgent .quick-link { color: #c84d3a; }

.grid-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 1000px) { .grid-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .grid-cards { grid-template-columns: 1fr; } }

.admin-card {
  background: white; border: 1px solid var(--line); border-radius: 14px; padding: 1.5rem;
  display: flex; flex-direction: column; text-decoration: none; transition: all 0.22s;
  color: var(--ink);
}
.admin-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(11,37,69,0.25); border-color: var(--gold-light); color: var(--ink); }
.admin-card .card-section { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--gold); margin-bottom: 0.4rem; }
.admin-card .card-section.emergency { color: #c84d3a; }
.admin-card h3 { color: var(--navy); margin: 0 0 0.5rem; font-size: 1.1rem; line-height: 1.3; }
.admin-card p { color: var(--muted); margin: 0; font-size: 0.9rem; line-height: 1.55; flex: 1; }
.admin-card .card-meta { font-size: 0.75rem; color: var(--muted); margin-top: 0.85rem; padding-top: 0.6rem; border-top: 1px dashed var(--line); }
.admin-card.emergency { border-left: 4px solid #c84d3a; background: linear-gradient(180deg, #fff 0%, #fef8f7 100%); }
.admin-card.subtle { background: #fafaf7; }
.admin-card code { background: #f3efe5; padding: 0.05rem 0.3rem; border-radius: 4px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.78rem; color: var(--navy); }

.admin-foot { color: var(--muted); font-size: 0.78rem; text-align: center; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }

/* Manual viewer */
.manual-shell { max-width: 1240px; margin: 0 auto; padding: 2rem 0 5rem; display: grid; grid-template-columns: 280px 1fr; gap: 2rem; }
@media (max-width: 900px) { .manual-shell { grid-template-columns: 1fr; padding: 1rem; } }
.manual-toc {
  position: sticky; top: 90px; align-self: start; background: white; border: 1px solid var(--line); border-radius: 14px; padding: 1rem;
  max-height: calc(100vh - 110px); overflow-y: auto; font-size: 0.88rem;
}
@media (max-width: 900px) { .manual-toc { position: static; max-height: none; } }
.manual-toc h4 { color: var(--navy); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 0.5rem; padding: 0 0.25rem; }
.manual-toc ul { list-style: none; padding: 0; margin: 0; }
.manual-toc li { margin: 0; }
.manual-toc a { display: block; padding: 0.4rem 0.6rem; color: var(--ink); border-radius: 6px; text-decoration: none; }
.manual-toc a:hover, .manual-toc a.active { background: rgba(0,167,216,0.1); color: var(--navy); font-weight: 600; }
.manual-toc .sub { padding-left: 0.85rem; }
.manual-toc .sub a { font-size: 0.82rem; padding: 0.3rem 0.55rem; color: var(--muted); }
.manual-search { width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 0.75rem; font: inherit; }

.manual-content { background: white; border: 1px solid var(--line); border-radius: 14px; padding: 2rem 2.25rem; box-shadow: 0 6px 24px -16px rgba(11,37,69,0.15); }
.manual-content h1 { color: var(--navy); margin-top: 0; }
.manual-content h2 { color: var(--navy); margin-top: 2.5rem; padding-top: 1rem; border-top: 2px solid var(--line); font-size: 1.5rem; }
.manual-content h2:first-of-type { border-top: 0; padding-top: 0; }
.manual-content h3 { color: var(--navy); margin-top: 1.75rem; font-size: 1.15rem; }
.manual-content h4 { color: var(--navy); margin: 1.1rem 0 0.4rem; font-size: 0.95rem; font-family: 'Inter', sans-serif; letter-spacing: 0.04em; }
.manual-content p { color: var(--ink); line-height: 1.7; margin: 0.6rem 0; }
.manual-content ul, .manual-content ol { padding-left: 1.4rem; margin: 0.6rem 0; }
.manual-content li { margin-bottom: 0.35rem; line-height: 1.6; color: var(--ink); }
.manual-content code { background: #f3efe5; padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.85em; color: var(--navy); font-family: 'JetBrains Mono', ui-monospace, monospace; }
.manual-content blockquote { border-left: 3px solid var(--gold); margin: 1rem 0; padding: 0.5rem 1rem; background: #fff7e0; color: #5a4810; border-radius: 6px; }
.manual-content a { color: var(--accent-deep); }
.manual-content .anchor { scroll-margin-top: 100px; }
.manual-content .video-pill { display: inline-block; padding: 0.1rem 0.55rem; background: rgba(0,167,216,0.15); color: var(--accent-deep); font-size: 0.74rem; border-radius: 999px; margin-left: 0.4rem; font-weight: 600; }

.callout-box { background: #fff7e0; border: 1px solid #f0d68c; border-radius: 10px; padding: 1rem 1.25rem; margin: 1rem 0; color: #5a4810; }
.callout-box.danger { background: #fbeae6; border-color: #f0c4ba; color: #9b2f1a; }
.callout-box.info   { background: #eef3fb; border-color: #d3e0f1; color: var(--navy); }
.callout-box strong { color: inherit; }

/* Checklist pages */
.cl-shell { max-width: 880px; margin: 0 auto; padding: 2rem 1.25rem 5rem; }
.cl-head { background: linear-gradient(135deg, var(--navy), var(--navy-light)); color: white; border-radius: 16px; padding: 1.75rem 2rem; margin-bottom: 1.5rem; }
.cl-head .crumbs { font-size: 0.78rem; color: var(--gold-light); letter-spacing: 0.08em; }
.cl-head .crumbs a { color: var(--gold-light); }
.cl-head h1 { color: white; margin: 0.5rem 0 0.5rem; font-size: 1.6rem; }
.cl-head p { color: rgba(255,255,255,0.85); margin: 0; font-size: 0.92rem; }
.cl-meta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; align-items: center; }
.cl-meta .meta-pill { background: rgba(255,255,255,0.12); padding: 0.35rem 0.85rem; border-radius: 999px; font-size: 0.8rem; color: white; }
.cl-meta .meta-pill strong { color: var(--gold-light); }
.cl-meta select { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); color: white; padding: 0.35rem 0.65rem; border-radius: 8px; font: inherit; font-size: 0.85rem; }
.cl-meta select option { color: var(--ink); }

.cl-progress { background: white; border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 1rem; border: 1px solid var(--line); }
.cl-progress .bar { flex: 1; height: 8px; background: var(--line); border-radius: 8px; overflow: hidden; }
.cl-progress .bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-deep), var(--gold)); transition: width 0.4s; }
.cl-progress .count { color: var(--navy); font-weight: 600; font-size: 0.92rem; min-width: 80px; text-align: right; }

.cl-section {
  background: white; border-radius: 14px; padding: 1.5rem 1.75rem;
  border: 1px solid var(--line); margin-bottom: 1rem;
  box-shadow: 0 6px 24px -20px rgba(11,37,69,0.1);
}
.cl-section h2 { color: var(--navy); margin: 0 0 0.25rem; font-size: 1.25rem; }
.cl-section h3 { color: var(--navy); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 1.25rem 0 0.5rem; font-family: 'Inter', sans-serif; }
.cl-section .timing { color: var(--gold); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }

.cl-item {
  display: flex; gap: 0.85rem; align-items: flex-start;
  padding: 0.7rem 0.75rem; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
}
.cl-item:hover { background: #fafaf7; border-color: var(--line); }
.cl-item input { margin-top: 3px; transform: scale(1.2); accent-color: var(--gold); flex-shrink: 0; }
.cl-item .label { color: var(--ink); font-size: 0.95rem; line-height: 1.5; }
.cl-item .label .sub { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 0.15rem; }
.cl-item.done .label { color: var(--muted); text-decoration: line-through; }
.cl-item.done { background: rgba(26,107,59,0.04); }

.cl-section.danger { border-left: 4px solid #c84d3a; background: linear-gradient(180deg, white 0%, #fef8f7 100%); }
.cl-section.danger h2 { color: #c84d3a; }

.role-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.role-tabs button {
  background: white; border: 1px solid var(--line); padding: 0.6rem 1.2rem; border-radius: 999px; font: inherit; font-weight: 600; font-size: 0.88rem;
  cursor: pointer; color: var(--ink);
}
.role-tabs button.active { background: var(--navy); color: white; border-color: var(--navy); }
.role-tabs button.danger { border-color: #c84d3a; color: #c84d3a; }
.role-tabs button.danger.active { background: #c84d3a; color: white; }

.phase-card {
  background: white; border-radius: 14px; padding: 1.5rem 1.75rem; border: 1px solid var(--line);
  margin-bottom: 1rem; border-left: 4px solid var(--accent-deep); position: relative;
}
.phase-card.complete { border-left-color: #1a6b3b; }
.phase-card.active   { border-left-color: var(--gold); background: linear-gradient(180deg, white 0%, #fff7e0 100%); }
.phase-card .phase-num { font-family: 'Fraunces', serif; font-size: 0.95rem; color: var(--gold); letter-spacing: 0.06em; font-weight: 600; }
.phase-card h3 { color: var(--navy); margin: 0.25rem 0 0.5rem; font-size: 1.2rem; }
.phase-card .phase-window { color: var(--muted); font-size: 0.85rem; margin-bottom: 0.75rem; }
.phase-card .phase-status {
  position: absolute; top: 1.25rem; right: 1.5rem; font-size: 0.74rem; padding: 0.25rem 0.65rem;
  border-radius: 999px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.phase-status.pending { background: rgba(11,37,69,0.08); color: var(--navy); }
.phase-status.active  { background: rgba(201,161,74,0.18); color: #8a6a1f; }
.phase-status.complete { background: rgba(26,107,59,0.12); color: #1a6b3b; }

/* =====================================================
   GLOBAL: kill sticky panels at tablet/mobile widths
   so two-column "form-on-left + preview-on-right" layouts
   don't trap the rest of the page scrolling behind the
   pinned panel after the grid collapses to one column.
   Keeps the .site-header sticky (we want that).
   ===================================================== */
@media (max-width: 1000px) {
  .admin-shell [style*="position:sticky"],
  .admin-shell [style*="position: sticky"],
  .admin-shell aside[class*="sticky"],
  .admin-shell .nola-fields,
  .admin-shell .reserve-fields,
  .admin-shell .mr-fields,
  .admin-shell .mr-controls,
  .admin-shell .controls,
  .admin-shell .sticky-panel,
  .admin-shell .form-rail,
  .admin-shell .preview-rail {
    position: static !important;
    top: auto !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* =====================================================
   GLOBAL MOBILE POLISH (≤860px)
   Catches inline grids, bare tables, flex rows, etc.
   without needing to edit every admin/*.html file.
   ===================================================== */
@media (max-width: 860px) {
  /* Any grid inside the admin shell with 3+ columns collapses to 1 column.
     Targets inline style="grid-template-columns:repeat(3,1fr)..." up to repeat(8,1fr). */
  .admin-shell [style*="grid-template-columns:repeat(3"],
  .admin-shell [style*="grid-template-columns: repeat(3"],
  .admin-shell [style*="grid-template-columns:repeat(4"],
  .admin-shell [style*="grid-template-columns: repeat(4"],
  .admin-shell [style*="grid-template-columns:repeat(5"],
  .admin-shell [style*="grid-template-columns: repeat(5"],
  .admin-shell [style*="grid-template-columns:repeat(6"],
  .admin-shell [style*="grid-template-columns: repeat(6"],
  .admin-shell [style*="grid-template-columns:repeat(7"],
  .admin-shell [style*="grid-template-columns: repeat(7"],
  .admin-shell [style*="grid-template-columns:repeat(8"],
  .admin-shell [style*="grid-template-columns: repeat(8"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem !important;
  }
  /* Even narrower phones — collapse to single column */
  @media (max-width: 520px) {
    .admin-shell [style*="grid-template-columns:repeat(4"],
    .admin-shell [style*="grid-template-columns: repeat(4"],
    .admin-shell [style*="grid-template-columns:repeat(5"],
    .admin-shell [style*="grid-template-columns: repeat(5"],
    .admin-shell [style*="grid-template-columns:repeat(6"],
    .admin-shell [style*="grid-template-columns: repeat(6"],
    .admin-shell [style*="grid-template-columns:repeat(7"],
    .admin-shell [style*="grid-template-columns: repeat(7"],
    .admin-shell [style*="grid-template-columns:repeat(8"],
    .admin-shell [style*="grid-template-columns: repeat(8"] {
      grid-template-columns: 1fr !important;
    }
  }
  /* Two-column inline grids → single column on phones */
  .admin-shell [style*="grid-template-columns:repeat(2"],
  .admin-shell [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
  }
  /* Two-column "1fr 1fr" / "2fr 1fr" / etc. patterns */
  .admin-shell [style*="grid-template-columns:1fr 1fr"],
  .admin-shell [style*="grid-template-columns: 1fr 1fr"],
  .admin-shell [style*="grid-template-columns:2fr 1fr"],
  .admin-shell [style*="grid-template-columns: 2fr 1fr"],
  .admin-shell [style*="grid-template-columns:1fr 2fr"],
  .admin-shell [style*="grid-template-columns: 1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }

  /* All tables in the admin shell get horizontal scroll containment.
     Wraps the table itself as a scroll region. */
  .admin-shell table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    white-space: nowrap;
    font-size: 0.88rem;
  }
  .admin-shell table thead, .admin-shell table tbody, .admin-shell table tr {
    /* keep table semantics intact while still scrolling */
  }

  /* Inline flex rows wrap by default on mobile */
  .admin-shell [style*="display:flex"],
  .admin-shell [style*="display: flex"] {
    flex-wrap: wrap;
  }
  /* Don't wrap things explicitly told not to */
  .admin-shell [style*="flex-wrap:nowrap"],
  .admin-shell [style*="flex-wrap: nowrap"] {
    flex-wrap: nowrap;
  }

  /* Collapse the .quick-row, .grid-cards at the proper breakpoint too */
  .quick-row { grid-template-columns: 1fr !important; }
  .grid-cards { grid-template-columns: 1fr !important; }
  .admin-hero { grid-template-columns: 1fr !important; padding: 1.5rem !important; }
  .admin-stats { grid-template-columns: 1fr 1fr !important; }

  /* Tighter shell padding on phones */
  .admin-shell { padding: 1.25rem 1rem 3rem; }

  /* Card padding tighter on phones */
  .admin-card, .quick-card, .phase-card { padding: 1rem 1.1rem; }

  /* Long crumb breadcrumbs wrap */
  .crumbs { font-size: 0.78rem; line-height: 1.6; }

  /* Any `.cl-meta`, `.callout-box`, etc. with inline-flex children — wrap */
  .cl-meta, .pill-row { flex-wrap: wrap; }

  /* h1 in admin pages stays under viewport width */
  .admin-shell h1, .cl-head h1 { font-size: clamp(1.5rem, 6vw, 2rem); word-break: break-word; }
}

/* Print mode for checklist export */
@media print {
  .internal-banner, .site-header, .footer, .role-tabs, .quick-link { display: none !important; }
  .cl-shell, .admin-shell { padding: 1rem; }
  .cl-section, .admin-card, .quick-card { break-inside: avoid; box-shadow: none; }
}