* {
    box-sizing: border-box;
}
body {
    margin: 0;
    background: #f3f5f8;
    color: #203044;
    font:
        15px/1.5 system-ui,
        sans-serif;
}
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #142b3d;
    color: white;
    padding: 20px 4%;
}
header strong {
    font-size: 23px;
    letter-spacing: 1px;
}
header strong span {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    margin-left: 20px;
}
nav {
    display: flex;
    gap: 24px;
    align-items: center;
}
header a {
    color: white;
}
.test {
    font-size: 12px;
    color: #ffdc92;
}
main {
    max-width: 1400px;
    margin: auto;
    padding: 32px 4%;
}
h1 {
    font-size: 30px;
    margin: 4px 0;
}
h2 {
    font-size: 22px;
}
h3 {
    font-size: 17px;
}
.eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #557388;
}
.intro p {
    margin: 5px 0 22px;
}
button,
.link {
    font: inherit;
    border: 1px solid #c8d4df;
    background: white;
    color: #23485f;
    border-radius: 6px;
    padding: 8px 13px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
button:hover,
.link:hover {
    background: #eaf2f7;
}
button:disabled {
    opacity: 0.45;
    cursor: default;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
    outline: 3px solid #dd9b33;
    outline-offset: 3px;
}
input,
select,
textarea {
    font: inherit;
    padding: 10px;
    border: 1px solid #bccbd6;
    border-radius: 6px;
    width: 100%;
    background: white;
}
label {
    display: block;
    font-size: 13px;
    font-weight: 600;
}
#search {
    display: flex;
    gap: 12px;
    align-items: end;
    margin: 25px 0;
}
#search label:first-child {
    flex: 1;
}
#search label:nth-child(2) {
    width: 200px;
}
.listhead {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #607385;
    padding: 10px 20px;
}
.order {
    background: white;
    border: 1px solid #d9e1e7;
    border-radius: 9px;
    margin-bottom: 10px;
    overflow: hidden;
}
summary {
    cursor: pointer;
    padding: 17px 20px;
}
.order > summary {
    display: flex;
    gap: 15px;
    align-items: center;
}
.order > summary:before {
    content: '▸';
    color: #587588;
}
.order[open] > summary:before {
    content: '▾';
}
.identity {
    flex: 1;
}
.identity strong {
    display: block;
    font-size: 16px;
}
.muted {
    color: #617486;
    font-size: 13px;
}
.badge {
    background: #edf3f6;
    padding: 4px 9px;
    border-radius: 20px;
    font-size: 12px;
}
.branches {
    margin: 0 22px 18px 36px;
    border-left: 2px solid #d9e4eb;
    padding-left: 18px;
}
.scope {
    border-top: 1px solid #e4ebf0;
}
.scope > summary {
    padding: 14px 8px;
    font-weight: 600;
}
.scope .badge {
    margin-left: 12px;
    font-weight: 400;
}
.scope-body {
    padding: 0 10px 18px;
}
.actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0;
}
.doc {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    margin: 5px 0;
    border-color: #e0e8ee;
    gap: 12px;
}
.doc strong {
    min-width: 90px;
}
.doc span {
    flex: 1;
}
.doc small {
    color: #617486;
}
footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}
#notice {
    color: #435d70;
}
#panel {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    width: min(620px, 100%);
    background: white;
    box-shadow: -12px 0 50px #142b3d40;
    z-index: 10;
    padding: 24px;
    overflow: auto;
}
#panel-content label {
    margin: 15px 0;
}
textarea {
    min-height: 180px;
}
#panel-content iframe {
    width: 100%;
    height: 80vh;
    border: 0;
}
.description {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    padding: 18px;
    background: #f4f7f9;
    border-radius: 8px;
}
.file {
    display: block;
    margin: 8px 0;
}
#panel[hidden] {
    display: none;
}
@media (max-width: 700px) {
    header {
        align-items: start;
    }
    header strong span,
    .test {
        display: none;
    }
    #search {
        flex-wrap: wrap;
    }
    #search label:first-child {
        flex-basis: 100%;
    }
    .order > summary {
        flex-wrap: wrap;
    }
    .identity {
        min-width: 60%;
    }
    .listhead {
        display: none;
    }
    .branches {
        margin-left: 14px;
        padding-left: 10px;
    }
    .doc {
        flex-wrap: wrap;
    }
    .doc small {
        width: 100%;
    }
    main {
        padding: 22px 12px;
    }
    h1 {
        font-size: 24px;
    }
}
:root {
    --deadline-alarm: #f4a5a5;
    --deadline-alert: #ffe48a;
}
.order > summary {
    flex-wrap: wrap;
}
.deadline {
    font-size: 12px;
    border-radius: 5px;
    padding: 4px 8px;
    color: #111;
    white-space: normal;
}
.order > summary > .deadline {
    margin-left: 24px;
}
.alarm {
    background: var(--deadline-alarm);
}
.alert {
    background: var(--deadline-alert);
}
.has-alarm {
    border-left: 4px solid #b42318;
}
.has-alert {
    border-left: 4px solid #b88700;
}
.deadline-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}
.date-chip {
    font-size: 13px;
    border: 1px solid #ccd5df;
    padding: 5px 9px;
    border-radius: 5px;
    color: #111;
}

.identity strong a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: #9cb2c2;
    text-underline-offset: 3px;
}
.identity strong a:hover {
    color: #136b9a;
}

.client-results {
    max-height: 270px;
    overflow-y: auto;
    border: 1px solid #b8cad7;
    border-radius: 6px;
    background: white;
    margin-top: 4px;
    box-shadow: 0 5px 16px #142b3d14;
    font-weight: 400;
}
.client-results[hidden] {
    display: none;
}
.client-results [role='option'] {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #edf1f5;
}
.client-results [role='option']:hover,
.client-results [aria-selected='true'] {
    background: #e5f1fa;
    color: #123e59;
}

.order-dates {
    display: flex;
    flex-direction: column;
    gap: 4px;
    white-space: nowrap;
}
.ok-date {
    background: #f4b6d2;
    color: #203044;
    border-radius: 5px;
    padding: 3px 7px;
    font-size: 12px;
}

.quick-status {
    width: auto;
    max-width: 230px;
    cursor: pointer;
    padding: 4px 9px;
}

.order.is-cancelled > summary > .identity,
.order.is-cancelled > summary > .identity strong a {
    text-decoration: line-through;
    text-decoration-color: currentColor;
}

.order.is-cancelled > summary > .order-dates > span {
    text-decoration: line-through;
    text-decoration-color: currentColor;
}

.history-event {
    border-left: 3px solid #98b8cb;
    background: #f5f8fb;
    padding: 14px 18px;
    margin: 14px 0;
    overflow-wrap: anywhere;
}
.history-event small {
    display: block;
    color: #617486;
}
.history-event h3 {
    margin: 8px 0;
}
.history-event ul {
    padding-left: 20px;
}

#search {
    flex-wrap: wrap;
}
#search label:has(#year) {
    width: 150px;
}
#search label:first-child {
    min-width: 240px;
}

/* Keep filters and list actions together, wrapping only when space is limited. */
#search {
    flex-wrap: wrap;
    gap: 8px;
}
#search label:first-child {
    flex: 1 1 220px;
    min-width: 220px;
}
#search label:nth-child(2) {
    flex: 0 0 170px;
    width: 170px;
}
#search label:nth-child(3) {
    flex: 0 0 110px;
    width: 110px;
}
#search > button {
    flex: 0 0 auto;
    white-space: nowrap;
}
@media (max-width: 700px) {
    #search label:first-child {
        flex-basis: 100%;
        min-width: 0;
    }
}

.list-output-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    border-left: 1px solid #bccbd6;
    padding-left: 12px;
    margin-left: 4px;
}
.list-output-actions > button {
    white-space: nowrap;
}

.list-page {
    background: #eaf3fb;
    border-left: 4px solid #356b94;
    border-radius: 5px;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 700;
    color: #23485f;
    scroll-margin-top: 18px;
}
.list-page:empty { display: none; }
.list-page:focus { outline: 2px solid #356b94; outline-offset: 3px; }

.delivery-mini-list {
    display: flex;
    flex: 0 1 340px;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
}
.delivery-mini {
    font-size: max(11px, calc(var(--alert-text-size, 12px) - 2px));
    line-height: 1.4;
    padding: 3px 6px;
    border-radius: 5px;
    color: #111;
    overflow-wrap: anywhere;
    border: 1px solid rgba(90, 40, 20, .25);
}
.delivery-mini:focus-visible { outline: 2px solid #23485f; outline-offset: 2px; }
.strong-alerts .delivery-mini.alarm {
    background: #ffd9d5;
    color: #731a12;
    border: 2px solid #a32318;
    font-weight: 700;
}
@media (max-width: 700px) {
    .order > summary > .delivery-mini-list { flex-basis: 100%; margin-left: 24px; }
}

/* Keep the order subject visible beside its number, wrapping long text. */
.identity strong.project-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.project-heading > a { flex-shrink: 0; white-space: nowrap; }
.project-subject { flex: 1 1 180px; min-width: 0; font-size: 16px; font-weight: 400; line-height: 1.4; overflow-wrap: anywhere; }

/* Personal project favorites: always the last item on the summary row. */
.order > summary > .project-favorite{order:100;flex:0 0 40px;width:40px;height:40px;padding:0;border:1px solid transparent;background:transparent;color:#62798b;font-size:30px;line-height:1;border-radius:8px;display:inline-flex;align-items:center;justify-content:center}
.order > summary > .project-favorite:hover{background:#fbe8ef;border-color:#e5b6c8;color:#b02b58}
.order > summary > .project-favorite.is-favorite{color:#bd2856}
.order > summary > .project-favorite:focus-visible{outline:3px solid #4b86ba;outline-offset:2px}
.order > summary > .project-favorite:disabled{opacity:.45;cursor:wait}

.list-page-bar{display:flex;align-items:center;gap:16px;background:#eaf3fb;border-left:4px solid #356b94;border-radius:5px;margin:16px 0;padding-right:16px}
.list-page-bar .list-page{flex:1;min-width:0;margin:0;border:0;background:transparent}
#clear-favorites{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;padding:4px 8px;color:#b02b58;background:transparent;border:1px solid transparent;border-radius:8px;min-height:40px}
#favorites-heart{font-size:30px;line-height:1}#favorites-count{font-size:13px;font-weight:700;color:#36566c}
#clear-favorites:hover:enabled{background:#fbe8ef;border-color:#e5b6c8}#clear-favorites:disabled{opacity:.45;cursor:default}
#clear-favorites:focus-visible{outline:3px solid #4b86ba;outline-offset:2px}

.progress-documents-warning{display:block;margin-top:5px;color:#8a4b00;font-size:12px;font-weight:600;white-space:normal;line-height:1.4}

/* Hidden document options must stay hidden despite label display rules. */
#panel-content form [hidden]{display:none!important}
.document-delivery{margin:14px 0}
.document-delivery > button{margin-bottom:8px}
.document-delivery > p{margin:0 0 8px}

.document-cloud-files{border:1px solid #bdceda;border-radius:8px;padding:12px;margin:16px 0;overflow-wrap:anywhere}
.document-cloud-files h3,.document-cloud-files h4{margin:8px 0}
.document-cloud-files small{font-size:12px;color:#526678}
.document-cloud-files button{margin:4px 8px 4px 0}
.document-cloud-files input[type=file]{max-width:100%}

/* Shared dispatch flag; independent from personal favorites. */
.project-dispatch{flex:0 0 auto;width:38px;height:38px;padding:0;border:1px solid #b8a777;border-radius:8px;background:#fffaf0;color:#725400;font-size:27px;line-height:1;cursor:pointer}
.project-dispatch.is-dispatch{color:#875c00;background:#fff0bd;border-color:#ac7c15}
.project-dispatch.has-notes{animation:dispatch-pulse 2.8s ease-in-out infinite}
.project-dispatch:focus-visible{outline:3px solid #235b91;outline-offset:3px}
@keyframes dispatch-pulse{0%,100%{box-shadow:0 0 0 0 rgba(170,119,0,.08)}50%{box-shadow:0 0 0 4px rgba(170,119,0,.25)}}
@media(prefers-reduced-motion:reduce){.project-dispatch.has-notes{animation:none;box-shadow:0 0 0 2px #ac7c15}}
.dispatch-filter{display:flex;align-items:center;gap:7px}.dispatch-filter input{width:auto}
.dispatch-dialog{width:min(520px,calc(100vw - 48px));max-height:85vh;overflow:auto;border:1px solid #b7c7d5;border-radius:12px;padding:24px;color:#203044;box-shadow:0 12px 48px #0003}
.dispatch-dialog::backdrop{background:#10233670}.dispatch-dialog h2{font-size:21px;margin:0 0 16px}
.dispatch-dialog label{display:block}.dispatch-dialog textarea{display:block;box-sizing:border-box;width:100%;margin-top:8px;padding:10px;font:inherit;resize:vertical}
.dispatch-notes{white-space:pre-wrap;overflow-wrap:anywhere}.dispatch-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.dispatch-actions button{padding:9px 14px;cursor:pointer}.dispatch-dialog small{display:block;margin-top:12px}