:root{font-family:system-ui,sans-serif;color:#193747;background:#f1f6f7;line-height:1.5}
*{box-sizing:border-box}
body{margin:0}
[hidden]{display:none!important}
header{background:#fff;border-bottom:1px solid #cadce1;min-height:68px;display:flex;align-items:center;gap:18px;padding:12px max(18px,calc((100vw - 1040px)/2));white-space:nowrap}
.brand{font-size:28px;letter-spacing:-1.8px;color:#ec8800}.brand span{color:#08728d}
header a{margin-left:auto}
a{color:#075e77}
main{max-width:1040px;margin:auto;padding:22px 18px 36px}
h1{font-size:clamp(26px,4vw,40px);letter-spacing:-.035em;margin:8px 0 20px}
h2{font-size:21px;margin:0 0 14px}
p{margin:0 0 14px}
form,.panel,article{background:#fff;border:1px solid #cadce1;border-radius:12px;padding:clamp(15px,3vw,25px);margin:0 0 16px}
form.public{max-width:640px}
label{display:grid;gap:5px;margin-bottom:14px;font-weight:600}
input,select,textarea,button{font:inherit}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid #91acb5;border-radius:7px;color:inherit;background:#fff}
textarea{min-height:92px;resize:vertical}
button{cursor:pointer;background:#086881;border:1px solid #086881;color:#fff;font-weight:650;border-radius:7px;padding:9px 15px;margin:0 8px 5px 0}
button.secondary{background:white;color:#075e77}
button:disabled{opacity:.65;cursor:wait}
:focus-visible{outline:3px solid #e99b23;outline-offset:3px}
#notice{white-space:pre-wrap;padding:10px 13px;background:#d6eef1;border-radius:7px;margin-bottom:16px}
#notice.error{background:#ffebeb;color:#851a1a}
.meta{color:#476373;font-size:.92rem;overflow-wrap:anywhere}
.description{white-space:pre-wrap;overflow-wrap:anywhere}
article form{border:0;border-top:1px solid #cadce1;border-radius:0;padding:14px 0 0;margin-bottom:0}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
summary{cursor:pointer;font-weight:600;color:#075e77}
li{padding:5px 0;overflow-wrap:anywhere}
@media(max-width:550px){header{gap:8px;flex-wrap:wrap;white-space:normal}header a{margin-left:0}.row{grid-template-columns:1fr;gap:0}}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tabs button[aria-pressed=true]{background:#086881;color:#fff}
.filters{display:grid;grid-template-columns:1fr 1.35fr 1fr 1.5fr;gap:12px}
.status{display:inline-block;justify-self:start;font-size:.82rem;font-weight:700;padding:3px 8px;border-radius:6px;line-height:1.45}
.status-blue{background:#e0edff;color:#164589}.status-teal{background:#d5f3ef;color:#075950}
.status-yellow{background:#fff0bf;color:#6d4e02}.status-purple{background:#eedffc;color:#593180}
.status-orange{background:#ffdec6;color:#843b00}.status-green{background:#d9f1df;color:#16572e}
.status-grey{background:#e8edef;color:#40515a}
.case-product{overflow-wrap:anywhere}
article>.status{margin-bottom:12px}
article details,.upload-link{margin-top:12px}


.message-preview {
  border-left: 3px solid #20829a;
  padding-left: 1rem;
  margin: 1rem 0;
}
.message-preview:empty { display: none; }
.communication-log > li { margin-bottom: .9rem; }
form input[type="checkbox"] { width: auto; margin-inline-start: .55rem; }

.form-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.form-options .panel { margin: 0; }
.form-options button { margin-top: 0; }
fieldset { border: 1px solid #a5bcc5; border-radius: 8px; margin: 1rem 0; padding: .75rem; }
.deadline-label { display: block; margin-top: .3rem; }
.deadline-alert { color: #8a2920; font-weight: 700; }
@media (max-width: 750px) { .form-options { grid-template-columns: 1fr; } }

/* Internal workspace */
.staff-layout {
  --sidebar-width: 212px;
  --staff-border: #d7e0e7;
  --staff-ink: #132c45;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  background: #eff3f7;
}
.staff-layout.staff-menu-closed { --sidebar-width: 64px; }
.staff-layout > header {
  grid-column: 1 / -1;
  min-height: 58px;
  padding: 8px 22px;
  gap: 16px;
  background: #102d49;
  color: #fff;
  border: 0;
}
.staff-layout > header a,
.staff-layout .brand span { color: #fff; }
.staff-layout > main { width: 100%; max-width: none; margin: 0; padding: 20px clamp(14px, 2vw, 32px) 32px; }
.staff-layout h1 { margin: 0 0 16px; font-size: clamp(25px, 3vw, 34px); color: var(--staff-ink); }
.staff-layout h2 { font-size: 19px; color: var(--staff-ink); }
.staff-account { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }
.staff-account button { margin: 0; padding: 6px 10px; }
.staff-sidebar {
  align-self: stretch;
  padding: 14px 8px;
  background: #163754;
  color: #fff;
}
.staff-sidebar nav { display: grid; gap: 7px; }
.staff-sidebar button,
.staff-sidebar .module-locked {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 8px 9px;
  border: 0;
  border-radius: 6px;
  color: inherit;
  background: transparent;
  text-align: left;
}
.staff-sidebar .menu-toggle { margin-bottom: 12px; }
.staff-sidebar button[aria-current] { background: #2c5276; }
.staff-sidebar button:hover { background: #254968; }
.staff-sidebar nav > * { display: grid; align-items: center; grid-template-columns: 24px minmax(0, 1fr); gap: 0 7px; }
.staff-sidebar .module-locked { color: #d9e5ef; }
.module-state { grid-column: 2; font-size: .8rem; }
.module-icon { font-size: .72rem; font-weight: 750; }
.module-lock {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 11px;
  margin: 7px 0 0 3px;
  border: 2px solid currentColor;
  border-radius: 2px;
}
.module-lock::before {
  position: absolute;
  content: '';
  width: 8px;
  height: 7px;
  top: -8px;
  left: 1px;
  border: 2px solid currentColor;
  border-radius: 5px 5px 0 0;
}
.staff-menu-closed .module-label { display: none; }
.staff-menu-closed .staff-sidebar nav > * { display: flex; justify-content: center; }
.staff-menu-closed .menu-toggle { padding-inline: 0; text-align: center; font-size: .8rem; }
.staff-list-tools { display: flex; justify-content: end; margin-bottom: 10px; }
.staff-list-tools button, .ticket-back { margin-right: 0; }
.staff-workspace form { border-color: var(--staff-border); }
.staff-listing {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--staff-border);
  border-radius: 10px;
  overflow: hidden;
}
.staff-listing .tabs { gap: 4px 8px; margin: 0; padding: 12px 14px 4px; }
.staff-listing .tabs button { margin-right: 0; }
.staff-listing .filters {
  grid-template-columns: repeat(4,minmax(0,1fr)) minmax(175px,1.4fr);
  padding: 9px 14px 0;
  border-bottom: 1px solid var(--staff-border);
}
.staff-listing .filters label { font-size: .9rem; }
.staff-listing .case-list > h2,
.staff-listing .case-list section > h2,
.staff-listing .case-list > p,
.staff-listing .case-list section > p { margin: 0; padding: 10px 14px; }
.case-list section + section { margin-top: 12px; }
.case-table-scroll { overflow-x: auto; }
.case-table { width: 100%; border-collapse: collapse; text-align: left; font-size: .9rem; }
.case-table th { background: #e8eef4; color: var(--staff-ink); font-weight: 700; }
.case-table th, .case-table td { padding: 10px 14px; border-bottom: 1px solid var(--staff-border); }
.case-table tr:last-child td { border-bottom: 0; }
.case-table tbody tr:nth-child(even) { background: #f5f8fa; }
.case-table tbody tr:hover, .case-table tbody tr:focus-within { background: #e9f2fb; }
.case-table td a { font-weight: 750; }
.case-table .order-number { display: block; white-space: nowrap; }
.case-table td:nth-child(2) { width: 25%; }
.case-table td:last-child { min-width: 180px; width: 26%; }
.ticket-header { padding: 14px 18px; margin: 8px 0 12px; }
.ticket-header h2, .ticket-header p { margin-bottom: 8px; }
.ticket-header p:last-child { margin-bottom: 0; }
.ticket-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 3px 3px 0;
}
.ticket-tabs button {
  white-space: nowrap;
  background: #e6edf4;
  color: var(--staff-ink);
  border-color: var(--staff-border);
  margin: 0;
  border-radius: 7px 7px 0 0;
}
.ticket-tabs button[aria-selected='true'] { background: #fff; border-top: 3px solid #08728d; }
.ticket-panels {
  background: #fff;
  border: 1px solid var(--staff-border);
  border-radius: 0 9px 9px;
  padding: clamp(14px, 2vw, 24px);
}
.ticket-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.ticket-description .description { max-width: 70ch; }
.ticket-work { padding-inline-start: 24px; border-inline-start: 1px solid var(--staff-border); }
.ticket-work > form { padding: 0; }
.ticket-work > form, .ticket-communication > form { border: 0; }
.ticket-work details form { padding: 12px 0 0; border: 0; }
.ticket-work details { margin-top: 12px; }
.ticket-communication .description { max-width: 70ch; }
.ticket-panels > section > form, .ticket-communication { max-width: 760px; }
@media (max-width: 1100px) {
  .staff-listing .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-table { min-width: 760px; }
}
@media (max-width: 850px) {
  .staff-layout { --sidebar-width: 170px; }
  .ticket-overview { grid-template-columns: 1fr; }
  .ticket-work { padding-inline-start: 0; padding-top: 14px; border-inline-start: 0; border-top: 1px solid var(--staff-border); }
}
@media (max-width: 620px) {
  .staff-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .staff-layout > header { padding-inline: 12px; }
  .staff-layout > header > span, .staff-user { display: none; }
  .staff-sidebar { display: flex; align-items: center; padding: 4px 8px; }
  .staff-sidebar .menu-toggle { width: auto; margin: 0 6px 0 0; }
  .staff-sidebar nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .staff-sidebar nav > * { width: auto; }
  .staff-layout > main { padding-inline: 10px; }
  .staff-listing .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-table { min-width: 0; }
  .case-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .case-table tbody, .case-table tr { display: block; }
  .case-table tr { padding: 8px; border-top: 1px solid var(--staff-border); }
  .case-table td, .case-table td:nth-child(2), .case-table td:last-child {
    display: grid;
    grid-template-columns: minmax(82px,.4fr) minmax(0,1fr);
    width: auto;
    min-width: 0;
    padding: 3px 6px;
    border: 0;
  }
  .case-table td::before { content: attr(data-col); font-weight: 700; }
  .case-table td > .order-number, .case-table td > .deadline-label { grid-column: 2; }
}