/* Shared workspace experience. School appearance settings provide the base colors. */
:root {
  --workspace-ring: color-mix(in srgb, var(--blue) 75%, #1b372f);
  --workspace-soft: color-mix(in srgb, var(--blue) 9%, var(--surface));
  --workspace-border: color-mix(in srgb, var(--text) 12%, var(--surface));
  --workspace-shadow: 0 5px 18px #14362b0b;
}
[hidden] { display: none !important; }
.ui-icon { display: inline-block; width: 1.1em; height: 1.1em; flex: none; vertical-align: middle; }
:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--workspace-ring); outline-offset: 3px;
}
.btn { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; transition: background-color .16s, box-shadow .16s; }
.btn:not(.ghost):not(:disabled):hover { filter: brightness(.93); }
.btn.ghost:hover { background: var(--workspace-soft); border-color: var(--workspace-border); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn.mobile, .mobile { display: none; }
.nav-scrim { display: none; }
.shell { --sidew: 252px; }
.side { padding: 1.15rem .85rem; background: linear-gradient(166deg, var(--nav), color-mix(in srgb, var(--nav) 87%, #050e0d)); }
.side-head { padding: .25rem .35rem 1rem; }
.side-head .brand small { display: block; margin-top: .3rem; font-size: .58rem; letter-spacing: .15em; color: #c7dad3; }
.school-switch { display: flex; align-items: center; gap: .65rem; margin: .15rem 0 .8rem; }
.school-switch b { display: block; overflow-wrap: anywhere; }
.school-symbol { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; background: #ffffff13; border-radius: .6rem; color: #c3efdc; }
.nav-search { display: flex; align-items: center; gap: .5rem; padding: .48rem .65rem; background: #ffffff0d; border: 1px solid #ffffff30; border-radius: .65rem; color: #d7eae2; }
.nav-search input { width: 100%; min-width: 0; border: 0; background: transparent; color: #fff; }
.nav-search input::placeholder { color: #c0d6cd; }
.nav-search:focus-within { outline: 2px solid #a9e2cc; outline-offset: 2px; }
.nav-search input:focus { outline: none; }
.side .nav { gap: .65rem; }
.side .nav .ui-icon { color: #b3d6c7; }
.side .nav.active { background: #ffffff23; border-left-color: #a6ebc9; }
.side .group { border: 0; padding-bottom: 0; margin-top: 1rem; }
.nav-empty { padding: .55rem; color: #dbeae3; }
.workspace-top { height: auto; min-height: 68px; gap: .7rem; flex-wrap: nowrap; }
.workspace-location { display: grid; min-width: 0; }
.workspace-location span { font-size: .62rem; letter-spacing: .14em; font-weight: 800; color: var(--muted); }
.workspace-location b, .workspace-identity b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-actions { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.workspace-profile { text-align: left; padding: .35rem .55rem; max-width: 230px; }
.workspace-avatar { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 50%; background: var(--workspace-soft); color: var(--workspace-ring); font-size: .75rem; }
.workspace-identity { display: grid; min-width: 0; }
.workspace-identity small { font-size: .67rem; color: var(--muted); white-space: nowrap; }
.workspace-logout { padding: .5rem .65rem; }
.sync-badge { overflow: hidden; text-overflow: ellipsis; }
.content { margin-inline: auto; }
.content .title { font-size: clamp(1.5rem, 2.3vw, 2.15rem); line-height: 1.17; letter-spacing: -.035em; }
.content .eyebrow { color: var(--workspace-ring); letter-spacing: .12em; }
.content .page-head > div > .sub { margin-top: .3rem; }
.dashboard-welcome { position: relative; isolation: isolate; overflow: hidden; padding: clamp(1rem, 3vw, 2rem); margin-bottom: 1rem; border-radius: var(--radius); background: linear-gradient(125deg, var(--workspace-soft), var(--surface)); border: 1px solid var(--workspace-border); }
.dashboard-welcome::after { content: ''; position: absolute; z-index: -1; width: 220px; aspect-ratio: 1; border: 1px solid var(--workspace-border); box-shadow: 0 0 0 20px var(--workspace-soft), 0 0 0 40px var(--workspace-border); border-radius: 50%; right: 6%; bottom: -150px; pointer-events: none; }
.dashboard-welcome .count-chip { font-size: .78rem; }
.dashboard-stat { display: grid; align-content: start; gap: .3rem; box-shadow: var(--workspace-shadow); }
.dashboard-stat .metric { margin-top: 0; line-height: 1.15; font-size: clamp(1.65rem, 3vw, 2.25rem); }
.dashboard-stat .sub { min-height: 2.6em; font-weight: 650; }
.module-icon { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: .7rem; background: var(--workspace-soft); color: var(--workspace-ring); font-size: 1rem !important; }
.dashboard-stat[data-tone="tasks"] .module-icon { background: #e9f1ff; color: #305c97; }
.dashboard-stat[data-tone="supervision"] .module-icon { background: #f0eaff; color: #654493; }
.dashboard-stat[data-tone="issues"] .module-icon { background: #fcefe1; color: #8c4f22; }
.content :is(.panel,.tablewrap,.team-table) { box-shadow: var(--workspace-shadow); }
.dash-module-card { background: var(--surface); border-color: var(--workspace-border); }
.dash-module-card:hover { background: var(--workspace-soft); }
.content .empty { background: var(--workspace-soft); border-radius: var(--radius); }
.content .empty.compact { padding: 1.05rem; margin-top: .7rem; }
.content .toolbar { gap: .45rem; }
.content .search-input { background: var(--surface); color: var(--text); }
.tablewrap, .team-table { overflow: auto; }
.tablewrap table { border-collapse: separate; border-spacing: 0; }
.tablewrap th, .team-table th { background: var(--workspace-soft); color: var(--text); font-size: .72rem; }
.tablewrap tbody td { border-top: 0; border-bottom: 1px solid var(--workspace-border); }
.tablewrap tbody tr:hover td, .team-table tbody tr:hover td { background: var(--workspace-soft); }
.tablewrap tbody tr:last-child td { border-bottom: 0; }
.row-actions .btn, .team-actions .btn { min-height: 34px; font-size: .76rem; padding: .4rem .55rem; }
.detail-head { display: flex; align-items: start; justify-content: space-between; gap: .7rem; }
.modal .field { min-width: 0; }
.field > :is(span, label) { font-weight: 650; }
.field > :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]) {
  min-width: 0; width: 100%; padding: .65rem .72rem; border: 1px solid var(--workspace-border); background: var(--surface); color: var(--text);
}
.field > textarea { resize: vertical; }
.service-stack .complaint-entry { min-width: min(100%, 28rem); justify-content: flex-start; }
.team-create { padding: .7rem 0; gap: .65rem; }
.team-create input, .team-actions select { padding: .55rem .65rem; border: 1px solid var(--workspace-border); background: var(--surface); color: var(--text); }

.login { background: radial-gradient(ellipse at 22% 18%, #2b6b58, transparent 60%), #0f332a; }
.auth-wrap { width: min(1060px,100%); }
.auth-brand .brand { font-size: clamp(1.9rem, 4vw, 3rem); }
.auth-brand .brandmark { background: #c7f4da; color: #153f31; }
.auth-overline { display: block; margin-top: 1.4rem; color: #c5f3d8; letter-spacing: .16em; font-size: .68rem; font-weight: 800; }
.auth-brand h1 { font-size: clamp(1.85rem, 3.5vw, 3rem); margin: .7rem 0; letter-spacing: -.05em; }
.auth-intro { color: #d4e9df; line-height: 1.6; max-width: 35ch; }
.auth-points span { display: inline-flex; gap: .35rem; align-items: center; }
.login-card { background: #fff; color: #19392e; }
.login-card h2 { font-size: 1.7rem; }
.login .public-link a { color: #e2f8ed; text-decoration: underline; text-underline-offset: .25em; }
.login .public-link a:focus-visible { outline-color: #d4f4e2; }

.portal-hero { position: relative; isolation: isolate; overflow: hidden; }
.portal-hero::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 85% 30%, #5d9c7844, transparent 60%), repeating-linear-gradient(120deg, transparent 0 32px, #d1f6de08 33px 34px); pointer-events: none; }
.portal .portal-guide { background: #133b33; box-shadow: 0 14px 35px #081f233b; }
.portal .portal-metrics div:nth-child(1) { background: #fff4e3; }
.portal .portal-metrics div:nth-child(2) { background: #edf3ff; }
.portal .portal-metrics div:nth-child(3) { background: #eaf7ef; }
.portal .portal-metrics div:nth-child(1) strong { color: #80501c; }
.portal .portal-metrics div:nth-child(2) strong { color: #34548a; }
.portal .portal-form { scroll-margin-top: 1rem; }
.portal .portal-form:target { outline: 2px solid #67a98f; outline-offset: 3px; }
.portal .portal-form .btn { min-width: 9rem; }
.portal .portal-footer { border-top: 1px solid #d7e5dc; margin-top: 1rem; }

@media (max-width: 850px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .btn.mobile, .side .mobile { display: inline-flex; }
  .side { visibility: hidden; width: min(290px, 90vw); z-index: 12; }
  .side.open { visibility: visible; }
  .side-dismiss { margin-left: auto; border: 0; background: transparent; color: #fff; font-size: 1.5rem; cursor: pointer; }
  .shell:has(.side.open) .nav-scrim { display: block; position: fixed; inset: 0; border: 0; background: #0a221b88; z-index: 11; }
  .workspace-top { padding: .55rem .85rem; min-height: 56px; }
  .workspace-actions { margin-left: auto; }
  .dashboard-stat .sub { min-height: auto; }
}
@media (max-width: 560px) {
  .workspace-location, .workspace-identity { display: none; }
  .workspace-profile { padding: .25rem; }
  .workspace-actions { gap: .28rem; }
  .workspace-actions .sync-badge { max-width: 29vw; }
  .workspace-logout { font-size: .76rem; }
  .login .auth-brand { text-align: left; }
  .auth-overline, .auth-intro, .auth-points { display: none; }
  .auth-brand h1 { font-size: 1.2rem; margin-inline: 0; }
  .portal .portal-guide { box-shadow: none; }
  .portal-login { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .side, .btn, .dash-module-card { transition: none; }
  .dash-module-card:hover { transform: none; }
}
@media print { .nav-scrim { display: none !important; } .dashboard-welcome::after { display: none; } }

.auth-field { display: block; margin: .5rem 0; color: #24443a; font-size: .83rem; font-weight: 650; }
.auth-field :is(input, select) { margin: .22rem 0 0; font-weight: 400; }
.auth-card :focus-visible, .login-card :focus-visible { outline-color: #21826a; }
.content:focus { outline: none; }

/* The public portal shows one task at a time, while retaining each form's input. */
.portal-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .3rem;
  padding: .3rem;
  margin: .35rem 0 .8rem;
  border-radius: .9rem;
  border: 1px solid #cddfd5;
  background: #e6f0e9;
}
.portal-switch button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: .5rem 1rem;
  border: 0;
  border-radius: .65rem;
  background: transparent;
  color: #244a3f;
  font-weight: 750;
  cursor: pointer;
}
.portal-switch button[aria-pressed="true"] { background: #175a47; color: #fff; }
.portal-switch button span { font-size: 1.2em; }
.portal-workspace { max-width: 52rem; }
.portal-workspace .recovery-box { font-size: .86rem; }
.portal .complaint-number { font: 700 1rem ui-monospace, monospace; letter-spacing: .12em; }
.portal .ticket-receipt { background: #edf8f0; padding: 1rem; }
.portal .ticket-receipt p { margin: .3rem 0 .7rem; }
.complaint-conversation { margin-top: 1rem; }
.thread-heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: .55rem; }
.thread-heading h3, .thread-heading p { margin: .3rem 0; }
.thread-messages { display: grid; gap: .5rem; margin-block: 1rem; }
.thread-messages .service-message { width: fit-content; max-width: min(85%, 42rem); margin: 0; border-radius: .7rem; }
.thread-messages .from-reporter { background: #eef3f8; border-color: #9ab5d2; }
.thread-messages .from-school { justify-self: end; background: #e8f5ed; border-color: #8ac5a8; }
.thread-messages .service-text { margin-bottom: .15rem; }
#public-thread:focus { outline: none; }
@media (max-width: 520px) {
  .portal-switch { display: flex; }
  .portal-switch button { flex: 1; padding-inline: .6rem; justify-content: center; }
  .thread-messages .service-message { max-width: 94%; }
}

.school-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
[data-school-logo]:has(.school-logo), .logo-preview { padding: .2rem; background: #fff; border-radius: .45rem; }
.logo-preview { display: inline-block; width: 3.5rem; height: 3.5rem; }
.complaint-photo { width: fit-content; max-width: 100%; margin: .9rem 0; }
.complaint-photo img { display: block; max-width: min(100%, 480px); max-height: 360px; border-radius: .7rem; }
.complaint-photo figcaption { margin-top: .25rem; color: var(--muted); font-size: .8rem; }