/* Hermes UI — shared styles across all pages */

/* ── Reset ───────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:15px;background:#9eb0d1}

/* ── Header ──────────────────────────────────────────────────────────── */
.header{height:80px;background-color:#003c71;background-blend-mode:luminosity;background-size:cover;background-position:center;position:sticky;top:0;z-index:10}
.nav-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;height:100%;color:#fff;padding:0 16px 0 10px;gap:14px}
.nailor-logo{height:36px;object-fit:contain;flex-shrink:0}
.nailor-logo-text{font-size:20px;font-weight:700;color:#fff;letter-spacing:2px;flex-shrink:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.header-title{display:flex;flex-direction:column;justify-content:center;flex-shrink:0}
.header-title-main{font-size:16px;font-weight:600;color:#fff;white-space:nowrap}
.header-title-sub{font-size:12px;color:rgba(255,255,255,.80);margin-top:1px}
.header-divider{width:1px;height:28px;background:rgba(255,255,255,.15);flex-shrink:0}
.header-spacer{flex:1}
.av{width:30px;height:30px;border-radius:50%;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(255,255,255,.2)}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.sidebar{background:#fff;border-right:1px solid #e5e5e3;display:flex;flex-direction:column;overflow:hidden}
.sb-head{padding:12px 14px;border-bottom:1px solid #e5e5e3;flex-shrink:0}
.sb-title{font-size:17px;font-weight:500;color:#1a1a1a;margin-bottom:8px}
.pbar-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pbar{flex:1;height:5px;background:#f1efe8;border-radius:3px;overflow:hidden}
.pfill{height:100%;border-radius:3px;transition:width .3s}
.plbl{font-size:13px;color:#3a3937;white-space:nowrap}
.mstats{display:grid;gap:6px}
.mst{border-radius:8px;padding:8px 10px;text-align:center;background:#f1efe8}
.mstv{font-size:24px;font-weight:500}
.mstl{font-size:14px;color:#5c5b57;margin-top:2px}
.qlist{flex:1;overflow-y:auto;padding:8px}

/* ── Queue items ─────────────────────────────────────────────────────── */
.qlist .qi.act{border-left-color:#003c71;border-left-width:5px;box-shadow:0 0 0 2px #003c71;background:#d6e4f7}
.qi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;gap:8px}
.qi-so{font-size:19px;font-weight:500;color:#1a1a1a}
.qi-cl{font-size:15px;color:#3a3937;margin-bottom:3px}
.qi-meta{font-size:13px;color:#5c5b57;display:flex;gap:6px}

/* Multi-shipment marker on a queue row. The order ships in separate lots
   (several tblHermes_SO_Hdr ship sequences) but is worked as one order, so the
   queue shows one row and this badge carries the split. Same values as
   cs-queue.html's .qi-badge / .qi-badge-ship, which shows the same fact. */
.qi-ship{font-size:12px;font-weight:700;padding:2px 7px;border-radius:10px;flex-shrink:0;background:#E8EEF6;color:#185FA5}

/* ── Badges ──────────────────────────────────────────────────────────── */
.bdg{font-size:13px;font-weight:500;padding:2px 8px;border-radius:10px;flex-shrink:0}
.bp{background:#EAF3DE;color:#27500A}.bf{background:#FAEEDA;color:#633806}
.be{background:#FCEBEB;color:#791F1F}.bn{background:#E6F1FB;color:#0C447C}.bd{background:#EEEDFE;color:#3C3489}

/* ── Content & cards ─────────────────────────────────────────────────── */
.content{padding:14px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.card{background:#fff;border:1px solid #e5e5e3;border-radius:12px;padding:14px 16px}

/* ── Order header ────────────────────────────────────────────────────── */
.oh-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.oh-num{font-size:26px;font-weight:600;color:#1a1a1a}
.oh-sub{font-size:18px;color:#3a3937;margin-top:3px}

/* ── Status pills ────────────────────────────────────────────────────── */
.spill{font-size:13px;font-weight:600;padding:4px 12px;border-radius:20px;flex-shrink:0}
.sp-f{background:#FAEEDA;color:#633806}.sp-p{background:#EAF3DE;color:#27500A}
.sp-e{background:#FCEBEB;color:#791F1F}.sp-n{background:#E6F1FB;color:#0C447C}.sp-d{background:#EEEDFE;color:#3C3489}
.sp-rush{background:#FCEBEB;color:#791F1F}.sp-priority{background:#EDE9FE;color:#4C1D95}.sp-standard{background:#f1efe8;color:#3a3937}

/* ── Meta grid ───────────────────────────────────────────────────────── */
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mf{background:#f8f8f6;border-radius:8px;padding:8px 10px}
.mfl{font-size:16px;color:#5c5b57;margin-bottom:2px}
.mfv{font-size:16px;font-weight:600;color:#1a1a1a}
.mok{color:#3B6D11}.mwn{color:#854F0B}.mer{color:#A32D2D}

/* ── Two-column layout ───────────────────────────────────────────────── */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ── Card title ──────────────────────────────────────────────────────── */
.ctitle{font-size:20px;font-weight:600;color:#1a1a1a;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}

/* ── Validation result rows ──────────────────────────────────────────── */
.rrow{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px solid #f1efe8}
.rrow:last-child{border-bottom:none;padding-bottom:0}
.ric{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.rip{background:#EAF3DE}.rif{background:#FAEEDA}.rie{background:#FCEBEB}
.rbody{flex:1}
.rname{font-size:16px;font-weight:600;color:#1a1a1a}
/* Rule details are newline-joined server-side (one line per finding). Without pre-line
   every bullet ran together into one paragraph, which is how a two-part detail could look
   like it only mentioned the first part. */
.rdet{font-size:16px;color:#3a3937;margin-top:1px;white-space:pre-line}
.rdet-w{color:#854F0B}.rdet-e{color:#A32D2D}
.rtag{font-size:16px;font-weight:600;flex-shrink:0}

/* ── Flag boxes ──────────────────────────────────────────────────────── */
.flagbox{border:1px solid #FAC775;border-radius:8px;padding:10px 12px;margin-bottom:8px;background:#FAEEDA}
.flagbox:last-child{margin-bottom:0}
.flagbox.errbox{border-color:#F09595;background:#FCEBEB}
.flagbox-t{font-size:16px;font-weight:600;color:#412402;margin-bottom:4px}
.errbox .flagbox-t{color:#791F1F}
.flagbox-d{font-size:16px;color:#633806;line-height:1.5;margin-bottom:7px;white-space:pre-line}
.errbox .flagbox-d{color:#A32D2D}
.flagbox-res{font-size:13px;color:#3a3937;margin-top:5px;padding-top:5px;border-top:1px solid rgba(0,0,0,.06)}
.rsel{width:100%;font-size:16px;padding:5px 7px;border-radius:8px;background:#fff;color:#1a1a1a;cursor:pointer;border:1px solid #FAC775}
.errbox .rsel{border-color:#F09595}
.rsel:focus{outline:none}
/* One-click "Not applicable" tick, shown under the dropdown on the factory mounted
   controls flag only. */
.flag-na{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:14px;color:#633806;cursor:pointer;user-select:none}
.flag-na input{width:15px;height:15px;flex-shrink:0;cursor:pointer;accent-color:#639922;margin:0}
.flag-na input:disabled{cursor:not-allowed;opacity:.6}
/* A flag turns blue once a resolution is picked (stays blue through escalation/review). */
.flagbox.resolved{border-color:#A9CCE8;background:#E6F1FB}
.resolved .flagbox-t{color:#1B4F72}
.resolved .flagbox-d{color:#1F618D}
.flagbox.resolved .rsel{border-color:#A9CCE8}
.flagbox.resolved .flag-na{color:#1F618D}

/* ── Notes textarea ──────────────────────────────────────────────────── */
.narea{width:100%;font-size:13px;padding:7px 9px;border:1px solid #d3d1c7;border-radius:8px;background:#fff;color:#1a1a1a;resize:none;height:58px;font-family:inherit}
.narea:focus{outline:none;border-color:#5c5b57}
/* Maximized by the button beside the Notes title. Two classes beat the single-class rule
   above on specificity, so no !important. Only index.html and escalation-manager.html
   render a .narea at all — the other pages that load this file have no notes box. */
.narea.narea-max{height:60vh;min-height:220px}

/* ── Action bar ──────────────────────────────────────────────────────── */
.abar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.hint{font-size:13px;font-weight:500}
.hok{color:#3B6D11}.hwn{color:#854F0B}.her{color:#A32D2D}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn{padding:6px 14px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;border:1px solid #d3d1c7;background:#fff;color:#1a1a1a;transition:background .1s}
.btn:hover:not(:disabled){background:#f1efe8}
.btn:disabled{opacity:0.35;cursor:not-allowed}
.btn-p{background:#185FA5;color:#fff;border-color:#185FA5}
.btn-p:hover:not(:disabled){background:#0C447C}
.btn-d{background:#FCEBEB;color:#791F1F;border-color:#F09595}
.btn-d:hover:not(:disabled){background:#F7C1C1}
.btn-w{background:#FAEEDA;color:#633806;border-color:#FAC775}
.btn-w:hover:not(:disabled){background:#FAC775}
.btn-primary{background:#003c71;color:#fff;border-color:#003c71}
.btn-primary:hover:not(:disabled){background:#002a52}
.btn-sm{padding:4px 10px;font-size:11px}

/* ── Nav rows / pagination ───────────────────────────────────────────── */
.nav-row{display:flex;align-items:center;gap:8px}
.nbtn{font-size:13px;padding:4px 10px;border-radius:8px;border:1px solid #d3d1c7;background:#fff;color:#3a3937;cursor:pointer}
.nbtn:hover:not(:disabled){background:#f1efe8}
.nbtn:disabled{opacity:0.3;cursor:not-allowed}
.npos{font-size:13px;color:#5c5b57;flex:1;text-align:center}
.etag{font-size:11px;padding:1px 6px;border-radius:4px;background:#E6F1FB;color:#0C447C;font-weight:600;margin-left:6px;vertical-align:middle}

/* ── Empty / loading states ──────────────────────────────────────────── */
.noflag{text-align:center;padding:20px 0;font-size:14px;color:#5c5b57}
.empty{display:flex;align-items:center;justify-content:center;height:300px;color:#5c5b57;font-size:15px}
.feed-empty{background:#fff;border:1px solid #e5e5e3;border-radius:12px;padding:48px 0;text-align:center;font-size:13px;color:#5c5b57}
.feed-loading{text-align:center;padding:48px 0;font-size:12px;color:#5c5b57}

/* ── SO detail cards ─────────────────────────────────────────────────── */
.sod-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sod-field{margin-bottom:8px}
.sod-field:last-child{margin-bottom:0}
.sod-lbl{font-size:14px;color:#1a1a1a;margin-bottom:2px;font-weight:500}
.sod-val{font-size:18px;font-weight:600;color:#1a1a1a}
.sod-val-muted{font-size:16px;color:#1a1a1a;font-weight:400;line-height:1.5}
.sod-warn{color:#854F0B}
.sod-ca{color:#534AB7}
.sod-rush{font-size:13px;font-weight:700;background:#FAEEDA;color:#633806;padding:2px 8px;border-radius:4px;display:inline-block}

/* ── Line items table ────────────────────────────────────────────────── */
.li-tbl{width:100%;border-collapse:collapse;font-size:18px}
.li-tbl th{font-size:14px;font-weight:600;color:#5c5b57;padding:6px 8px;text-align:left;border-bottom:1px solid #e5e5e3;white-space:nowrap;background:#f8f8f6}
.li-tbl th.r,.li-tbl td.r{text-align:right}
.li-tbl td{padding:6px 8px;border-bottom:1px solid #f1efe8;vertical-align:middle;font-size:18px}
.li-tbl tr:last-child td,.li-tbl tbody tr:last-child td{border-bottom:none}
.li-tbl tfoot td{font-weight:600;border-top:1px solid #e5e5e3;padding-top:7px}
.li-tbl tr.li-total td{font-weight:600;background:#f8f8f6;border-top:1px solid #e5e5e3}
.li-model{font-weight:600;color:#185FA5}
.li-pln,.li-desc{font-size:16px;color:#5c5b57;margin-top:1px}
.li-badge{font-size:16px;font-weight:700;padding:1px 5px;border-radius:3px;display:inline-block}
.li-badge-rush{background:#FAEEDA;color:#633806}
.li-badge-status{background:#f1efe8;color:#3a3937}
.li-badge-mfg{background:#E6F1FB;color:#0C447C}
.li-loading{font-size:11px;color:#5c5b57;padding:10px 0;text-align:center}

/* ── Modal overlay ───────────────────────────────────────────────────── */
.modal-overlay,.stop-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;display:flex;align-items:center;justify-content:center}

/* ── Navigation dropdown items ───────────────────────────────────────── */
.nav-item{display:block;padding:8px 12px;font-size:13px;color:#3a3937;text-decoration:none;border-bottom:1px solid #f1efe8}
.nav-item:last-child{border-bottom:none}
.nav-item:hover{background:#f8f8f6;color:#185FA5}

/* ── Inline SO field edit ────────────────────────────────────────────── */
.edit-pencil-btn{background:none;border:none;cursor:pointer;padding:2px 4px;border-radius:4px;color:#5c5b57;display:inline-flex;align-items:center;vertical-align:middle;margin-left:6px;line-height:1}
.edit-pencil-btn:hover{background:#f1efe8;color:#185FA5}
.sod-edit-inp,.sod-edit-ta{width:100%;box-sizing:border-box;font-size:18px;padding:5px 8px;border:1px solid #d3d1c7;border-radius:6px;background:#fff;color:#1a1a1a;font-family:inherit}
.sod-edit-inp:focus,.sod-edit-ta:focus{outline:none;border-color:#185FA5;box-shadow:0 0 0 2px rgba(24,95,165,.12)}
.sod-edit-ta{resize:vertical}
.sod-edit-actions{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid #f1efe8}

/* ── Controls checklist ──────────────────────────────────────────────── */
.ccs-step{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px solid #f1efe8}
.ccs-step:last-child{border-bottom:none;padding-bottom:0}
.ccs-cb{margin-top:2px;width:15px;height:15px;flex-shrink:0;cursor:pointer;accent-color:#639922}
.ccs-cb:disabled{cursor:not-allowed;opacity:0.6}
.ccs-label{font-size:13px;color:#1a1a1a}
.ccs-meta{font-size:11px;color:#3B6D11;margin-top:2px}

/* ── Editor tabs ─────────────────────────────────────────────────────── */
.etab{font-size:18px;font-weight:500;padding:9px 14px;border:none;background:none;color:#5c5b57;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.etab:hover{color:#1a1a1a}
.etab.active{color:#185FA5;border-bottom-color:#185FA5}

/* ── Attachments ─────────────────────────────────────────────────────── */
.attach-list{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.attach-item{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#f8f8f6;border:1px solid #e5e5e3;border-radius:8px;font-size:12px}
.attach-icon{font-size:16px;flex-shrink:0}
.attach-name{font-weight:600;color:#1a1a1a;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach-meta{font-size:10px;color:#5c5b57;white-space:nowrap;flex-shrink:0}
.attach-dl{font-size:11px;color:#185FA5;text-decoration:none;white-space:nowrap;flex-shrink:0}
.attach-dl:hover{text-decoration:underline}
.attach-spinner{display:inline-block;width:14px;height:14px;border:2px solid #d3d1c7;border-top-color:#185FA5;border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.attach-uploading{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#EBF4FD;border:1px solid #b3d4f5;border-radius:8px;font-size:12px;color:#185FA5}

/* ── Engineering / drafting sections ────────────────────────────────── */
.section{padding:14px 16px;border-top:1px solid #f1efe8}
.section-title{font-size:16px;font-weight:700;color:#003c71;text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.action-bar{background:#fff;border:1px solid #e5e5e3;border-radius:12px;padding:14px 16px}
.action-title{font-size:16px;font-weight:700;color:#003c71;text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px}
.action-notes{width:100%;font-size:12px;padding:7px 9px;border:1px solid #d3d1c7;border-radius:8px;resize:vertical;height:60px;font-family:inherit;color:#1a1a1a;background:#fff;margin-bottom:10px}
.action-notes:focus{outline:none;border-color:#185FA5}

/* ── Sidebar queue (engineering / drafting) ──────────────────────────── */
.sidebar-list{flex:1;overflow-y:auto}
.sq-item{padding:10px 14px;border-bottom:1px solid #f1efe8;cursor:pointer;transition:background .1s;border-left:3px solid transparent}
.sq-item:hover{background:#f8f8f6}
.sq-item.active{border-left-color:#003c71;border-left-width:5px;box-shadow:0 0 0 2px #003c71;background:#d6e4f7}
.sq-so{font-size:20px;font-weight:700;color:#1a1a1a}
.sq-client{font-size:16px;color:#3a3937;margin-top:1px}
.sq-meta{font-size:16px;color:#5c5b57;margin-top:3px}
.sq-empty{padding:24px 14px;text-align:center;color:#5c5b57;font-size:12px}
.detail-wrap{flex:1;overflow-y:auto;background:#F5F5F3;padding:16px;display:flex;flex-direction:column;gap:12px}
.order-card{background:#fff;border:1px solid #e5e5e3;border-radius:12px;overflow:hidden}
.oc-head{padding:14px 16px;border-bottom:1px solid #f1efe8}

/* ── Rush badges ─────────────────────────────────────────────────────── */
.rush-badge{font-size:9px;font-weight:700;padding:1px 5px;border-radius:4px;background:#FAEEDA;color:#633806}
.rush-badge.priority{background:#EDE9FE;color:#4C1D95}

/* ── Color utilities ─────────────────────────────────────────────────── */
.vpass{color:#3B6D11}.vflag{color:#854F0B}.verr{color:#A32D2D}
.vesc{color:#3C3489}.vrel{color:#3B6D11}.vpend{color:#854F0B}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media(max-width:680px){.mgrid{grid-template-columns:repeat(2,1fr)}}