/* The helpdesk's own rules, only where css.css and /css/app.css have nothing that fits; dark counterparts at the end as css-dk.css does */

.h-grid {display:grid; grid-template-columns:1fr 1fr; gap:0 3ex;}
.h-grid .formfields {min-width:0;}
.h-grid .inputfield {max-width:none;}
@media (max-width:640px) {
.h-grid {grid-template-columns:1fr;}
}
/* The OS row only for the topics Category::needsSystem() names: in CSS too, so it does not vanish when the script runs and move the page */
form:not(:has(#category option:checked:is([value="question"], [value="problem"]))) .formfields:has(#os) {display:none;}
.h-language {margin:0 0 1ex;}
.h-tips ul {margin-top:0;}
/* One tip at a time (helpdesk.js), so its name says nothing the dropdown does not */
.h-live [data-category] > .bold {display:none;}

/* The queue's four lists, then its owners */
.h-tabs {display:flex; flex-wrap:wrap; justify-content:space-between; gap:1ex 3ex; margin:0 0 2ex;}
.h-tabs ul {display:flex; flex-wrap:wrap; gap:0.6ex; margin:0; padding:0; list-style:none;}
.h-tabs li {margin:0; line-height:inherit;}
.h-tabs a, .h-tabs .on {display:inline-block; padding:0.5ex 1.2ex; border:1px solid #BBB; border-radius:6px; font-size:small; text-decoration:none;}
.h-tabs .on {background:#00668E; border-color:#00668E; color:#FFF; font-weight:bold;}
.h-empty {margin:0 0 3ex;}

/* A status beside a subject */
.f-badge.h-us {color:#FFF; background:#B06A00;}
.f-badge.h-customer {color:#FFF; background:#00668E;}
.f-badge.h-pending {color:#FFF; background:#7A4E9A;}

/* The ticket's details, the customer's other tickets and the people on it, in the right column */
.h-details {display:grid; grid-template-columns:auto minmax(0, 1fr); gap:1ex 2ex; margin:0;}
.h-details dt {font-size:small; font-weight:bold;}
.h-details dd {margin:0; text-align:right; overflow-wrap:anywhere;}
.h-others {margin:0; padding:0; list-style:none;}
.h-others li {margin:0 0 1.2ex; line-height:inherit; overflow-wrap:anywhere;}
.h-others li:last-child {margin-bottom:0;}
.h-spread {display:flex; justify-content:space-between; align-items:center; gap:1ex;}

/* The ticket page: what the form lands on, and who is on the ticket */
.h-received {background-color:#EEF7DC; border-color:#6AA800;}
.h-received p {margin:0 0 1ex;}
.h-received > p .ic {color:#6AA800;}
.h-received .h-fold {display:inline; margin:0;}
.h-received .h-fold summary {display:inline; text-decoration:none;}
.h-received .h-fold summary span {text-decoration:underline;}
.h-code {white-space:nowrap;}
.h-fold {margin:1ex 0 0;}
/* Looks as .f-linkbutton does, its icon in place of the marker */
.h-fold summary {display:inline-flex; align-items:center; cursor:pointer; text-decoration:underline; list-style:none;}
.h-fold summary::-webkit-details-marker {display:none;}
.f-linkbutton.smalltext {font-size:small;}
.h-inline {display:flex; flex-wrap:wrap; align-items:center; gap:1ex; margin:1ex 0 0;}
.h-inline .errors {flex-basis:100%;}
.h-inline .inputfield {flex:1; width:auto; min-width:24ex; max-width:none;}

/* The staff page: the reply box's extras, and what sits beside the thread */
.h-canned {display:flex; flex-wrap:wrap; align-items:center; gap:1ex; margin:0 0 1.5ex;}
.h-canned select {flex:1; width:auto; min-width:24ex; max-width:none;}
.h-box {display:block; width:100%; max-width:none; box-sizing:border-box;}
.h-number {width:10ex; max-width:none;}
.h-actions {display:flex; flex-wrap:wrap; gap:1ex;}
.h-others form {display:inline;}
.h-canned-list {margin:0 0 3ex;}

/* What a thread needs on a phone: a long unbroken line stays in its card */
.h-thread .f-body {overflow-wrap:anywhere;}

@media screen and (prefers-color-scheme: dark) {
.h-received {background-color:#2F3D1C; border-color:#7CC400;}
.h-received > p .ic {color:#7CC400;}
.h-tabs a {border-color:#515151;}
.h-tabs .on {background:#0092B2; border-color:#0092B2;}
.f-badge.h-us {background:#A36400;}
.f-badge.h-customer {background:#0092B2;}
.f-badge.h-pending {background:#8A5FAA;}
}