/* The coordinator portal (coordinators.py): My Ideal's look, a neutral name, and a
   dashboard. Loaded after portal.css, only on the coordinator service's pages. */
.cbrand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); line-height: 1; }
.cbrand img { display: block; width: 44px; height: 44px; }
.cbt { display: flex; flex-direction: column; }
.cb-1 { font: 500 26px/1 "Oswald", Impact, sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.cb-2 { font: 400 11px/1.4 "Lato", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .18em;
        color: var(--accent); margin-top: 4px; }
.coordbar { background: var(--wash); border-bottom: 1px solid var(--line); padding: 8px var(--gutter);
            font-size: 14px; color: var(--ink-2); text-align: center; }
.wrap.cwide { max-width: 1180px; }
.sel { font: 400 17px/1.3 "Lato", system-ui, sans-serif; padding: 11px; border: 1px solid #BDBDBD;
       border-radius: 4px; background: var(--ground); width: 100%; color: var(--ink); }
.linkcard input { width: 100%; font-size: 14px; }

.whofilter { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.whofilter a { text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px;
               font-size: 15px; color: var(--ink-2); min-height: 36px; display: inline-flex; align-items: center; gap: 6px; }
.whofilter a span { font-size: 13px; color: var(--ink-2); }
.whofilter a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.whofilter a[aria-current="page"] span { color: #ccc; }

/* THE STRIP (Kenyon, 2026-10-11): the four tiles on black, edge to edge, to break up the
   white. The black runs to both edges by shadow and clip, so it never adds sideways
   scrolling. Each tile is a link; the current page's tile is outlined in white. */
.strip { background: #000; box-shadow: 0 0 0 100vmax #000; clip-path: inset(0 -100vmax);
         padding: 20px 0; margin: 4px 0 28px; }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.stat { display: block; text-decoration: none; color: #fff; background: #161616;
        border: 1px solid #2E2E2E; border-radius: 6px; padding: 14px 16px; min-height: 44px; }
.stat:hover, .stat:focus-visible { border-color: #8A8A8A; }
.stat:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.stat[aria-current="page"] { border-color: #fff; box-shadow: inset 0 0 0 1px #fff; }
.stat .sv { font: 500 34px/1 "Oswald", Impact, sans-serif; }
.stat .sk { font-weight: 700; font-size: 14px; margin-top: 6px; }
.stat .sd { font-size: 13px; color: #B5B5B5; }
.stat.hot .sv { color: #F0566B; }

/* A tile's whole list. */
.lgroup { margin: 0 0 24px; }
.lgroup h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
             border-bottom: 2px solid var(--ink); padding-bottom: 6px; }
.ltotal { font-size: 18px; }
.lrow { display: grid; grid-template-columns: minmax(0, 1fr) 140px 130px auto; gap: 12px;
        align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.lmain { display: flex; flex-direction: column; min-width: 0; }
.lmain a { text-decoration: none; overflow-wrap: anywhere; }
.lwhen, .lamt { display: flex; flex-direction: column; gap: 2px; }
.lwhen { align-items: flex-start; }
.lamt { align-items: flex-end; }
.lrow .btn.small { display: inline-flex; align-items: center; justify-content: center; }
.lamt { text-align: right; font: 500 18px/1.2 "Oswald", Impact, sans-serif; }
.lamt .help { font: 300 13px/1.3 "Lato", system-ui, sans-serif; }
.lnotes { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 15px; }
.lnotes li { margin: 4px 0; }
.lcard { margin-bottom: 12px; }
.lhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lhead h2 { margin: 0; }
.lhead h2 a { text-decoration: none; }
.lreqs { list-style: none; margin: 10px 0 0; padding: 0; }
.lreqs li { border-top: 1px solid var(--line); padding: 10px 0; }
.lreqs a { text-decoration: none; }
.lq { margin: 4px 0 0 !important; }
@media (max-width: 640px) {
  .lrow { grid-template-columns: minmax(0, 1fr) auto; }
  .lwhen { grid-column: 1; }
  .lamt { grid-column: 2; grid-row: 1; }
  .lrow .btn { grid-column: 2; grid-row: 2; justify-self: end; }
}

.dmain { min-width: 0; }
.monthlab { margin: 8px 0 10px; font-size: 15px; color: var(--ink-2); }
.dmain .monthlab:first-child { margin-top: 0; }

.evrow { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: start; margin-bottom: 12px; }
.evdate { display: flex; flex-direction: column; align-items: center; border-right: 1px solid var(--line); padding-right: 12px; }
.evdate .d { font: 500 30px/1 "Oswald", Impact, sans-serif; }
.evdate .m { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.evdate .w { font-size: 12px; color: var(--ink-2); }
.evbody h3 { font: 500 21px/1.2 "Oswald", Impact, sans-serif; text-transform: uppercase; margin: 0 0 4px; letter-spacing: .02em; }
.evbody h3 a { text-decoration: none; }
.evbody h3 a:hover { text-decoration: underline; }
.evmeta { font-size: 15px; color: var(--ink-2); margin: 0 0 6px !important; }
.vtag { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
        border: 1px solid var(--ink); border-radius: 3px; padding: 1px 6px; margin-right: 6px; color: var(--ink); vertical-align: 1px; }
/* VENUE COLOURS (Kenyon, 2026-10-11): The Ideal's red, The Olympic's blue -- the same
   two Event Day uses (static/app.css --ideal / --olympic). */
.vtag.ideal { background: #BD2035; border-color: #BD2035; color: #fff; }
.vtag.oly { background: #3E5D88; border-color: #3E5D88; color: #fff; }
.filters { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0 0 18px; }
.filters .whofilter { margin: 0 0 8px; }
.venuefilter a.ideal[aria-current="page"] { background: #BD2035; border-color: #BD2035; }
.venuefilter a.olympic[aria-current="page"] { background: #3E5D88; border-color: #3E5D88; }
.evnext { font-size: 15px; margin: 0 0 8px !important; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 !important; }
.chip { font-size: 13px; border-radius: 999px; padding: 3px 10px; background: var(--wash); color: var(--ink);
        text-decoration: none; }
.chip.hot { background: #FBEDEF; color: var(--accent); font-weight: 700; }
.chip.quiet { background: none; color: var(--ink-2); padding-left: 0; }
.evopen { margin-top: 0 !important; }


@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .evrow { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
  .evopen { grid-column: 1 / -1; width: 100%; }
  .cb-1 { font-size: 21px; }
}

/* Dashboard search (2026-10-11). */
.evsearch { margin: 0 0 18px; }
.evsearch input { width: 100%; max-width: 520px; font: 400 17px/1.3 "Lato", system-ui, sans-serif;
  padding: 12px 14px; border: 1px solid #BDBDBD; border-radius: 4px; }
.evsearch .help { margin: 8px 0 0; }

/* A card that opens on a click (2026-10-12): Payments' Add an invoice. */
details.collapsible > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; }
details.collapsible > summary::-webkit-details-marker { display: none; }
details.collapsible > summary h2 { margin: 0; }
details.collapsible > summary::after { content: "+"; font: 500 22px/1 "Oswald", Impact, sans-serif; }
details.collapsible[open] > summary::after { content: "\2212"; }
details.collapsible[open] > summary { margin-bottom: 14px; }

/* PHONES: EVERYTHING FITS THE SCREEN (Kenyon, 2026-10-12: rows that swiped sideways read
   as the page scrolling sideways). The filter pills wrap, made compact so they take two
   or three short rows; the tiles sit two to a row, the first -- Upcoming events -- across
   the full width with its number beside its words, so five tiles leave none on its own. */
@media (max-width: 640px) {
  .filters { display: block; }
  .whofilter, .filters .whofilter { flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
  .whofilter a { min-height: 36px; padding: 4px 12px; font-size: 14px; }
  .whofilter a span { font-size: 12px; }
  .strip { padding: 14px 0; margin-bottom: 22px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat { padding: 10px 12px; }
  .stat .sv { font-size: 26px; }
  .stat .sk { font-size: 13px; margin-top: 4px; line-height: 1.25; }
  .stat .sd { font-size: 12px; line-height: 1.3; }
  /* Only when the count is odd (Event Planner's five): an even set -- Sales' four -- pairs up. */
  .stats > .stat:first-child:nth-last-child(odd) { grid-column: 1 / -1; display: grid;
    grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .stats > .stat:first-child:nth-last-child(odd) .sv { grid-row: 1 / span 2; }
  .stats > .stat:first-child:nth-last-child(odd) .sk { margin-top: 0; }
}
details.collapsible { padding: 16px 20px; }
details.collapsible > summary { min-height: 32px; }
details.collapsible:not([open]):hover { border-color: #BDBDBD; }
details.upload-doc { margin: 12px 0 28px; }
fieldset.access { border: 0; padding: 0; margin: 14px 0 4px; } fieldset.access legend { font-weight: 400; font-size: 15px; margin-bottom: 6px; padding: 0; }
fieldset.access .check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 8px; font-size: 15px; } fieldset.access .check input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--ink); }

/* THE FILTER LINE AND COMPACT TILES ON PHONES (design review, 2026-10-16). */
.filterbox > summary { display: none; }
@media (max-width: 640px) {
  .filterbox > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer;
    list-style: none; min-height: 40px; padding: 8px 12px; margin: 0 0 10px; border: 1px solid var(--line);
    border-radius: 6px; font-size: 14px; font-weight: 700; }
  .filterbox > summary::-webkit-details-marker { display: none; }
  .filterbox > summary::after { content: "\25BE"; font-weight: 400; color: var(--ink-2); }
  .filterbox[open] > summary::after { content: "\25B4"; }
  .strip { padding: 10px 0; margin-bottom: 16px; }
  .stats { gap: 6px; }
  .stats > .stat, .stats > .stat:first-child:nth-last-child(odd) { display: flex; align-items: baseline; gap: 8px;
    padding: 8px 10px; min-height: 40px; }
  .stats > .stat:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  .stat .sv, .stats > .stat:first-child:nth-last-child(odd) .sv { font-size: 20px; grid-row: auto; }
  .stat .sk { margin-top: 0; font-size: 13px; }
  .stat .sd { display: none; }
}

/* THE TEAM AS A LIST (design review, 2026-10-16). */
.teamlist { padding: 0; }
.teamrow { border-bottom: 1px solid var(--line); }
.teamrow:last-child { border-bottom: 0; }
.teamrow > summary { list-style: none; cursor: pointer; display: grid; align-items: center; gap: 4px 16px;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; padding: 14px 20px; }
.teamrow > summary::-webkit-details-marker { display: none; }
.teamrow > summary:hover { background: #FAFAFA; }
.tname { display: flex; flex-direction: column; min-width: 0; }
.tname .small { overflow-wrap: anywhere; }
.tedit { font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.teamrow[open] .tedit { font-weight: 700; }
.teamrow > .form { padding: 0 20px 18px; max-width: 520px; }
.tacts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.tacts .btn { width: auto; margin: 0; }
.teamadd { margin-top: 28px; }
.teamadd .card { max-width: 560px; }
@media (max-width: 640px) {
  .teamrow > summary { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 14px; }
  .teamrow .taccess, .teamrow .tstatus { grid-column: 1; }
  .tedit { grid-column: 2; grid-row: 1; }
  .teamrow > .form { padding: 0 14px 16px; }
}
/* Tablets: the five tiles stay on one row, smaller (design review, 2026-10-16). */
@media (min-width: 641px) and (max-width: 900px) {
  .stat { padding: 10px 12px; }
  .stat .sv { font-size: 28px; }
  .stat .sd { display: none; }
}