/* ===========================================================================
   CostiLabels - Costiway Healthcare

   Built to the delivered design system, not to the system being replaced.
   Tokens and sizes come from docs/brand/handoff/DESIGN-HANDOFF.md; every value
   here is theirs, not estimated.

   Three colour rules from that document are non-negotiable and easy to undo by
   accident:
     - Blue #0069A8 is the ONLY action colour. If it is blue, it does something.
     - Orange is NEVER a button. Logo and the active-nav marker only. In the old
       app orange status text sat beside real buttons and operators misclicked.
     - QA status is a chip with a dot, never anything button-shaped.
   =========================================================================== */

@import url('/assets/css/fonts.css');

:root {
    --ink:        #14110F;
    --ink-2:      #3C4450;
    --ink-3:      #5B6470;
    --line:       #DFE1E5;
    --line-2:     #C8CCD2;
    --page:       #F4F5F7;
    --card:       #FFFFFF;

    --action:     #0069A8;
    --action-dk:  #00537F;

    --bar:        #0A0C0E;
    --bar-2:      #1B1F24;
    --bar-ink:    #F7F5F1;
    --bar-ink-2:  #B8BEC6;
    --bar-ink-3:  #9AA1AA;

    --brand:      #EF7F1A;      /* logo and active-nav marker ONLY */

    --pending:    #8A5000;  --pending-ln: #E4C48A;  --pending-bg: #FDF6E7;
    --passed:     #00713C;  --passed-ln:  #A9D8BC;  --passed-bg:  #F0F9F3;
    --danger:     #B3261E;  --danger-ln:  #E8C4BF;  --danger-bg:  #FBE9E7;

    --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

    --radius: 8px;
    --side-w: 240px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font: 400 15.5px/1.45 var(--sans);
    color: var(--ink);
    background: var(--page);
    -webkit-font-smoothing: antialiased;
}

/* --- shell -------------------------------------------------------------- */
.shell { display: flex; min-height: 100vh; }

.side {
    width: var(--side-w); flex: 0 0 var(--side-w);
    background: var(--bar); color: var(--bar-ink-2);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
}
.side__brand {
    display: flex; align-items: center; gap: .65rem;
    padding: 20px 18px 18px; color: var(--bar-ink); text-decoration: none;
}
.side__brand img { height: 34px; width: 34px; flex: 0 0 34px; }
.side__brand b { font: 600 19px/1.1 var(--sans); letter-spacing: -.015em; display: block; }
.side__brand span { font-size: 12.5px; color: var(--bar-ink-3); }

.side__nav { padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; }
.side__link {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; border-radius: 7px;
    color: var(--bar-ink-2); text-decoration: none;
    font: 400 16px/1 var(--sans);
    border-left: 3px solid transparent;
}
.side__link:hover { background: var(--bar-2); color: var(--bar-ink); }
.side__link.is-active {
    background: var(--bar-2); color: var(--bar-ink); font-weight: 600;
    border-left-color: var(--brand);        /* the ONLY place orange appears in chrome */
}
.side__link svg { width: 18px; height: 18px; flex: 0 0 18px; }
.side__spacer { flex: 1; }

.side__user {
    display: flex; align-items: center; gap: 10px;
    margin: 10px; padding: 11px 12px;
    background: var(--bar-2); border-radius: 7px;
}
.side__avatar {
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
    background: #2A3039; color: var(--bar-ink);
    display: grid; place-items: center; font: 600 12px var(--mono);
}
.side__user b { display: block; color: var(--bar-ink); font: 500 14.5px/1.2 var(--sans); }
.side__user .role { font: 400 12px var(--mono); color: var(--bar-ink-3); text-transform: uppercase; }
.side__signout { margin-left: auto; color: var(--bar-ink-2); font-size: 13px; text-decoration: none; }
.side__signout:hover { color: var(--bar-ink); text-decoration: underline; }

/* --- main --------------------------------------------------------------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.head {
    background: var(--card); border-bottom: 1px solid var(--line);
    padding: 26px 32px 0;
}
.head__row { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.head__row h1 { font: 600 30px/1.15 var(--sans); letter-spacing: -.015em; margin: 0; }
.head__sub { color: var(--ink-3); font-size: 14.5px; margin: 4px 0 0; }
.head__actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.body { padding: 18px 32px 24px; }

/* --- tabs --------------------------------------------------------------- */
.tabs { display: flex; gap: 26px; margin-top: 18px; }
.tab {
    padding: 0 0 12px; text-decoration: none; color: var(--ink-3);
    font: 400 16px var(--sans); border-bottom: 3px solid transparent;
    display: flex; align-items: center; gap: 8px;
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.tab .count {
    font: 500 12.5px var(--mono); padding: 2px 7px; border-radius: 999px;
    background: var(--line); color: var(--ink-2);
}
.tab.is-active .count { background: var(--ink); color: #fff; }

/* --- buttons ------------------------------------------------------------ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 40px; padding: 0 15px; border-radius: 7px;
    font: 500 15px var(--sans); cursor: pointer; text-decoration: none;
    border: 1px solid var(--line-2); background: var(--card); color: var(--ink);
}
.btn:hover { border-color: var(--ink-3); }
.btn--primary { background: var(--action); border-color: var(--action); color: #fff; font-weight: 600; }
.btn--primary:hover { background: var(--action-dk); border-color: var(--action-dk); }
.btn--icon { width: 44px; padding: 0; }
.btn--danger { color: var(--danger); border-color: var(--danger-ln); }
.btn--sm { height: 32px; padding: 0 11px; font-size: 13.5px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn svg { width: 17px; height: 17px; }

/* --- QA chips: never button-shaped -------------------------------------- */
.chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 11px; border-radius: 999px;
    font: 500 13px var(--sans); border: 1.5px solid currentColor; background: transparent;
}
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip--pending  { color: var(--pending); background: var(--pending-bg); border-color: var(--pending-ln); }
.chip--passed   { color: var(--passed);  background: var(--passed-bg);  border-color: var(--passed-ln); }
.chip--rejected { color: var(--danger);  background: var(--danger-bg);  border-color: var(--danger-ln); }

/* --- job rows ----------------------------------------------------------- */
/* A grid that must not wrap. An earlier flex version wrapped at 1280px, and a
   wrapped row is 163px tall, which pushes the sixth job below the fold.
   Collapsing the data cells and actions into ONE fixed grid child means only
   the description resizes between 1440 and 1280. Do not "simplify" this. */
.joblist { display: flex; flex-direction: column; gap: 10px; }
.job {
    display: grid; grid-template-columns: 88px minmax(150px, 1fr) 636px;
    align-items: center; gap: 20px; padding: 13px 18px;
    background: var(--card); border: 1px solid var(--line);
    border-left: 4px solid var(--pending-ln); border-radius: var(--radius);
}
.job.is-passed   { border-left-color: var(--passed); }
.job.is-rejected { border-left-color: var(--danger); }
.job__no   { font: 600 21px var(--mono); letter-spacing: -.02em; }
.job__when { font: 400 13px var(--mono); color: var(--ink-3); }
.job__code { font: 600 16.5px var(--mono); }
.job__name { font: 400 15.5px/1.35 var(--sans); color: var(--ink-2);
             max-height: 43px; overflow: hidden; }
.job__data { display: grid; grid-template-columns: 104px 104px 104px 112px 156px;
             gap: 14px; align-items: center; }
.job__val   { font: 500 16.5px var(--mono); }
.job__plain { font: 500 15.5px var(--sans); }
.job__muted { color: var(--ink-3); font-weight: 400; }
.job__act   { display: flex; gap: 8px; justify-content: flex-end; }
.cell__label { font: 400 11.5px var(--mono); color: var(--ink-3);
               text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }

@media (max-width: 1200px) {
    .job { grid-template-columns: 88px minmax(150px, 1fr); }
    .job__data { grid-column: 1 / -1; justify-content: start; }
}

/* --- tables, forms, misc ------------------------------------------------ */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font: 400 11.5px var(--mono); text-transform: uppercase;
          letter-spacing: .04em; color: var(--ink-3); padding: 9px 10px;
          border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th a { color: inherit; text-decoration: none; }
.tbl td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tbody tr.is-clickable { cursor: pointer; }
.tbl tbody tr.is-clickable:hover { background: var(--page); }
.tbl .code { font: 600 15.5px var(--mono); white-space: nowrap; }
.tbl .num  { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.tbl .chev { text-align: right; color: var(--ink-3); width: 24px; }

.field { margin-bottom: 18px; max-width: 440px; }
.field > label { display: block; font: 500 13.5px var(--sans); color: var(--ink-2); margin-bottom: 6px; }
.field .hint { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.input, .select {
    width: 100%; height: 44px; padding: 0 12px;
    font: 500 16px var(--mono); color: var(--ink);
    border: 1px solid var(--line-2); border-radius: 7px; background: #fff;
}
.input--key { border-width: 1.5px; border-color: var(--ink); height: 52px; font-size: 20px; font-weight: 600; }
.input:focus, .select:focus { outline: 2px solid var(--action); outline-offset: 1px; border-color: var(--action); }
.toggle { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 15px; }
.toggle input { width: 18px; height: 18px; accent-color: var(--action); }

.msg { padding: 11px 14px; border-radius: 7px; margin-bottom: 16px; font-size: 14.5px; }
.msg--error { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-ln); }
.msg--ok    { background: var(--passed-bg); color: var(--passed); border: 1px solid var(--passed-ln); }
.msg--warn  { background: var(--pending-bg); color: var(--pending); border: 1px solid var(--pending-ln); }
.empty { padding: 48px 16px; text-align: center; color: var(--ink-3); }
.search { height: 40px; padding: 0 12px; width: 260px;
          border: 1px solid var(--line-2); border-radius: 7px; font: 400 14.5px var(--sans); }

.detail__facts { display: flex; flex-wrap: wrap; gap: 0 44px; margin: 18px 0 0; }
.fact dt { font: 400 11.5px var(--mono); text-transform: uppercase; letter-spacing: .04em;
           color: var(--ink-3); margin-bottom: 3px; }
.fact dd { margin: 0 0 16px; font: 500 16px var(--mono); }


/* --- expanded product detail (in the products table) -------------------- */
.detail { background: var(--page); padding: 18px 20px; border-bottom: 1px solid var(--line); }
.detail__head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.detail__title { flex: 1; min-width: 0; cursor: pointer; }
.detail__title h2 { margin: 0 0 2px; font: 600 20px var(--mono); letter-spacing: -.01em; }
.detail__title p { margin: 0; color: var(--ink-2); font-size: 15px; }

.contents {
    margin-top: 16px; max-width: 560px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden;
}
.contents__head {
    display: flex; align-items: center;
    padding: 8px 14px; background: var(--page);
    font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .04em;
    color: var(--ink-3); border-bottom: 1px solid var(--line);
}
.contents__head .qty { margin-left: auto; }
.contents__row {
    display: flex; align-items: baseline; gap: 12px;
    padding: 7px 14px; border-bottom: 1px solid var(--line); font-size: 14.5px;
}
.contents__row:last-child { border-bottom: 0; }
.contents__row .name { flex: 1; min-width: 0; }
.contents__row .qty { margin-left: auto; font: 500 14.5px var(--mono); font-variant-numeric: tabular-nums; }
.contents__row.is-separator {
    background: var(--page); color: var(--ink-3);
    font: 600 11.5px var(--mono); text-transform: uppercase; letter-spacing: .05em;
}
.contents__row.is-unlinked .name::after {
    content: " (unlinked)"; color: var(--ink-3); font-size: 12.5px; font-style: italic;
}

/* --- login -------------------------------------------------------------- */
.login { max-width: 400px; margin: 9vh auto; }
.login__logo { display: block; margin: 0 auto 28px; max-width: 260px; height: auto; }

/* --- the TCH endorsement: the only TCH element in the system ------------- */
.endorse { margin-top: 28px; display: flex; align-items: center; justify-content: center;
           gap: 7px; font-size: 12.5px; color: var(--ink-3); }
.endorse__mark { font: 600 16px/1 var(--sans); color: #383838; letter-spacing: -.02em; }
.endorse__mark .h { color: #D32027; }

@media (max-width: 860px) {
    .shell { flex-direction: column; }
    .side { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; }
    .side__nav { flex-direction: row; }
    .head, .body { padding-left: 16px; padding-right: 16px; }
}
@media print {
    .side, .head__actions, .btn, .endorse, .tabs { display: none !important; }
    body, .main { background: #fff; }
}