/* Tickets: the Admin queue (list + detail), the Users' request page, the ticket form, and the top-bar badge. */

/* Open-ticket count on the Tickets link */
.nav-badge {
   display: inline-block;
   min-width: 18px;
   margin-left: 6px;
   padding: 0 5px;
   border-radius: 99px;
   background: var(--bar-fg);
   color: var(--bar);
   font-family: var(--font-mono);
   font-size: 11px;
   font-weight: 600;
   line-height: 18px;
   text-align: center;
   vertical-align: 1px;
}

/* In-progress status pill: the school's accent, so it reads as "being handled" */
.pill.accent {
   background: var(--accent-soft);
   color: var(--accent);
}

/* ---- Admin queue ---- */
.ticket-toolbar {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 4px 12px;
   flex-wrap: wrap;
}
.ticket-toolbar .tabs {
   flex: 1 1 auto;
   min-width: 0;
}
.mine-toggle {
   display: flex;
   align-items: center;
   gap: 6px;
   padding-bottom: 10px;
   font-size: 13px;
   font-weight: 600;
   color: color-mix(in srgb, var(--bar-fg) 85%, transparent);
   cursor: pointer;
   white-space: nowrap;
}
.mine-toggle input {
   accent-color: var(--bar-fg);
   width: 16px;
   height: 16px;
}

.tickets-grid {
   display: grid;
   grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
   gap: 16px;
   align-items: start;
}
@media (max-width: 900px) {
   .tickets-grid {
      grid-template-columns: minmax(0, 1fr);
   }
}
.ticket-list-card {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 8px;
   overflow: hidden;
   position: sticky;
   top: 12px;
}
@media (max-width: 900px) {
   .ticket-list-card {
      position: static;
   }
}
.ticket-list {
   list-style: none;
   margin: 0;
   padding: 0;
   max-height: 72vh;
   overflow-y: auto;
}
@media (max-width: 900px) {
   .ticket-list {
      max-height: 45vh;
   }
}
.ticket-row {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 10px;
   width: 100%;
   text-align: left;
   background: none;
   border: 0;
   border-bottom: 1px solid var(--line);
   padding: 11px 14px;
   cursor: pointer;
}
.ticket-row:hover {
   background: var(--surface-2);
}
.ticket-row[aria-current="true"] {
   background: var(--accent-soft);
   box-shadow: inset 3px 0 0 var(--accent);
}
.t-top {
   display: flex;
   align-items: baseline;
   gap: 8px;
   min-width: 0;
}
.t-top b {
   font-weight: 600;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.t-no {
   flex: none;
   font-size: 12px;
   color: var(--muted);
}
.ticket-row small,
.my-ticket small {
   display: block;
   margin-top: 2px;
   color: var(--muted);
   font-size: 12px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.ticket-row .t-who .pill {
   font-size: 10px;
   padding: 0 6px;
}
.ticket-row > .prio {
   flex: none;
   margin-top: 1px;
}

/* Selected ticket */
.ticket-detail {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 8px;
   min-width: 0;
   padding: 20px;
   display: flex;
   flex-direction: column;
   gap: 22px;
}
.ticket-head {
   display: flex;
   justify-content: space-between;
   align-items: start;
   gap: 12px;
}
.ticket-head h2 {
   margin: 2px 0 0;
   font-family: var(--font-display);
   font-size: 28px;
   line-height: 1.15;
   overflow-wrap: anywhere;
   text-wrap: balance;
}
.ticket-head p:not(.eyebrow) {
   margin: 6px 0 0;
   color: var(--muted);
}
.ticket-controls {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
   padding: 12px;
   border: 1px solid var(--line);
   border-radius: 8px;
   background: var(--surface-2);
}
.ticket-controls .full {
   grid-column: 1 / -1;
}
@media (max-width: 600px) {
   .ticket-controls {
      grid-template-columns: minmax(0, 1fr);
   }
}
.ticket-desc {
   white-space: pre-wrap;
   overflow-wrap: anywhere;
   line-height: 1.55;
   max-width: 70ch;
}
/* When the requester is free for a visit */
.ticket-free {
   margin: 12px 0 0;
   display: flex;
   align-items: baseline;
   gap: 10px;
   flex-wrap: wrap;
   padding: 9px 12px;
   border: 1px solid var(--line);
   border-radius: 8px;
   background: var(--surface-2);
   overflow-wrap: anywhere;
}
.ticket-free span {
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--muted);
}
.ticket-photo-full {
   display: block;
   margin-top: 12px;
   max-width: 420px;
   border: 1px solid var(--line);
   border-radius: 8px;
   overflow: hidden;
}
.ticket-photo-full img {
   display: block;
   width: 100%;
   height: auto;
}

/* Activity: system events as quiet lines, notes as cards */
.timeline {
   list-style: none;
   margin: 0;
   padding: 0 0 0 14px;
   border-left: 2px solid var(--line);
   display: flex;
   flex-direction: column;
   gap: 10px;
}
.tl-event {
   position: relative;
   font-size: 13px;
   color: var(--muted);
}
.tl-event b {
   color: var(--fg);
   font-weight: 600;
}
.tl-event::before,
.tl-comment::before {
   content: "";
   position: absolute;
   left: -20px;
   top: 6px;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: var(--surface);
   border: 2px solid var(--line);
}
.tl-comment {
   position: relative;
   background: var(--surface-2);
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 10px 12px;
}
.tl-comment::before {
   background: var(--accent);
   border-color: var(--accent);
   top: 14px;
}
.tl-meta {
   font-size: 12px;
   color: var(--muted);
   margin-bottom: 4px;
}
.tl-meta b {
   color: var(--fg);
}
.tl-body {
   white-space: pre-wrap;
   overflow-wrap: anywhere;
}
.tl-when {
   white-space: nowrap;
   font-size: 12px;
}
.comment-form {
   margin-top: 14px;
   display: flex;
   flex-direction: column;
   gap: 6px;
}
.comment-form textarea {
   border: 1px solid var(--line);
   border-radius: 6px;
   padding: 8px 10px;
   width: 100%;
   resize: vertical;
   background: var(--surface);
}
.comment-form textarea:focus {
   border-color: var(--accent);
   outline: none;
   box-shadow: 0 0 0 3px var(--accent-soft);
}
.ticket-foot {
   display: flex;
   justify-content: flex-end;
   border-top: 1px solid var(--line);
   padding-top: 14px;
}

/* ---- Users' request page ---- */
.request-hero {
   padding-bottom: 28px;
   gap: 6px;
}
.request-hero .eyebrow {
   color: color-mix(in srgb, var(--bar-fg) 75%, transparent);
}
.request-hero h1 {
   margin: 0;
   font-family: var(--font-display);
   font-size: 34px;
   line-height: 1.1;
}
.request-hero p:not(.eyebrow) {
   margin: 0;
   max-width: 60ch;
   color: color-mix(in srgb, var(--bar-fg) 85%, transparent);
}
.request-wrap {
   display: grid;
   grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
   gap: 16px;
   align-items: start;
}
@media (max-width: 900px) {
   .request-wrap {
      grid-template-columns: minmax(0, 1fr);
   }
}
.request-card {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 10px;
   padding: 20px;
   min-width: 0;
}
.request-card h2 {
   margin: 0 0 12px;
   font-family: var(--font-display);
   font-size: 22px;
}
.my-tickets {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
}
.my-ticket {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   padding: 10px 0;
   border-bottom: 1px solid var(--line);
}
.my-ticket:last-child {
   border-bottom: 0;
}
.my-ticket-tags {
   flex: none;
   display: flex;
   align-items: center;
   gap: 6px;
}

/* ---- Ticket form (dialog for Admins, on the page for Users) ---- */
.ticket-modal {
   width: min(620px, 100%);
}
.ticket-form.in-page .form-grid {
   padding: 0;
}
.ticket-form.in-page footer {
   padding: 16px 0 0;
   border-top: 0;
}
.ticket-form.in-page footer .right {
   margin-left: 0;
}
.field-label {
   font-size: 12px;
   font-weight: 600;
   color: var(--muted);
}
.ticket-photo {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
}
.ticket-photo-preview {
   width: 72px;
   height: 72px;
   border-radius: 8px;
   border: 1px solid var(--line);
   overflow: hidden;
   background: var(--surface-2);
}
.ticket-photo-preview img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

/* ---- Priority: green (Low) to red (Urgent) ----
   Each level sets three variables from tokens.css; the badge and the picker only read those.
   A matching emoji (🟢 🟡 🟠 🔴) sits beside the word label. */
[data-prio="low"] {
   --prio-bg: var(--prio-low-bg);
   --prio-fg: var(--prio-low-fg);
   --prio-mark: var(--prio-low-mark);
}
[data-prio="normal"] {
   --prio-bg: var(--prio-normal-bg);
   --prio-fg: var(--prio-normal-fg);
   --prio-mark: var(--prio-normal-mark);
}
[data-prio="high"] {
   --prio-bg: var(--prio-high-bg);
   --prio-fg: var(--prio-high-fg);
   --prio-mark: var(--prio-high-mark);
}
[data-prio="urgent"] {
   --prio-bg: var(--prio-urgent-bg);
   --prio-fg: var(--prio-urgent-fg);
   --prio-mark: var(--prio-urgent-mark);
}

.prio-emoji {
   flex: none;
   font-size: 11px;
   line-height: 1;
}
.prio-top .prio-emoji {
   font-size: 13px;
}

/* Badge: list rows and "Your requests" */
.prio {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 3px 9px 3px 8px;
   border-radius: 99px;
   background: var(--prio-bg);
   color: var(--prio-fg);
   font-size: 10px;
   font-weight: 700;
   line-height: 1.2;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   white-space: nowrap;
}
/* Urgent is the one level that should catch the eye from across the list. */
.prio[data-prio="urgent"] {
   box-shadow: inset 0 0 0 1px var(--prio-mark);
}

/* Picker: four chips, Low to Urgent. Every chip carries a light wash of its color so the scale
   reads at a glance; the chosen one fills with its full pastel and gets a ring. */
.prio-picker {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 6px;
}
@media (max-width: 520px) {
   .prio-picker {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}
.prio-opt {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 3px;
   min-width: 0;
   padding: 9px 11px;
   border: 1px solid color-mix(in srgb, var(--prio-mark) 30%, var(--line));
   border-radius: 8px;
   background: color-mix(in srgb, var(--prio-bg) 50%, var(--surface));
   cursor: pointer;
   transition:
      background-color 0.15s ease-out,
      border-color 0.15s ease-out,
      box-shadow 0.15s ease-out;
}
.prio-opt input {
   position: absolute;
   opacity: 0;
   pointer-events: none;
}
.prio-top {
   display: flex;
   align-items: center;
   gap: 7px;
   font-size: 13px;
   font-weight: 700;
   color: var(--prio-fg);
}
.prio-hint {
   font-size: 11.5px;
   line-height: 1.3;
   color: var(--muted);
}
.prio-opt:hover {
   border-color: var(--prio-mark);
   background: color-mix(in srgb, var(--prio-bg) 80%, var(--surface));
}
.prio-opt:has(input:checked) {
   background: var(--prio-bg);
   border-color: var(--prio-mark);
   box-shadow:
      inset 0 0 0 1px var(--prio-mark),
      0 1px 3px color-mix(in srgb, var(--prio-mark) 30%, transparent);
}
.prio-opt:has(input:checked) .prio-top,
.prio-opt:has(input:checked) .prio-hint {
   color: var(--prio-fg);
}
.prio-opt:has(input:focus-visible) {
   outline: 2px solid var(--prio-mark);
   outline-offset: 2px;
}
.prio-opt:has(input:disabled) {
   cursor: progress;
   opacity: 0.7;
}
.prio-picker.compact .prio-opt {
   padding: 7px 10px;
}
.prio-picker.compact .prio-hint {
   display: none;
}
@media (prefers-reduced-motion: reduce) {
   .prio-opt {
      transition: none;
   }
}