/* C/TPA Drug & Alcohol workspace (owner's approved mock-ups of 2026-10-08). The portal's own dark colors.
   Phone first: a bottom bar with five places under 768px, a sidebar from 768px up. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: #070d24; color: #e8eefc; font-family: "Segoe UI", Arial, sans-serif; font-size: 15px; line-height: 1.4; }
a { color: #5eead4; }
button { font: inherit; cursor: pointer; }
.shell { display: flex; min-height: 100vh; }
.side { flex: 0 0 216px; background: #050a1c; border-right: 1px solid #1d2b52; display: none; flex-direction: column; padding: 14px 10px; position: sticky; top: 0; height: 100vh; }
.brand { font-weight: 800; color: #5eead4; margin: 2px 8px 2px; } .brand2 { font-size: 12px; color: #a9b7d0; margin: 0 8px 14px; }
.tab { padding: 10px 12px; border-radius: 10px; color: #c9d4ea; display: flex; gap: 10px; align-items: center; font-weight: 600; border: 1px solid transparent; margin-bottom: 2px; text-decoration: none; background: none; width: 100%; text-align: left; min-height: 44px; }
.tab.on { background: #0f1a3a; color: #fff; border-color: #23345f; }
.tab .n { margin-left: auto; font-size: 12px; background: #7f1d1d; color: #fff; border-radius: 999px; padding: 1px 7px; }
.logout { margin-top: auto; border-top: 1px solid #1d2b52; padding-top: 10px; } .who { font-size: 12px; color: #a9b7d0; margin: 0 12px 6px; word-break: break-all; }
.main { flex: 1; min-width: 0; padding: 14px 12px 84px; }
.bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; border-top: 1px solid #1d2b52; background: #050a1c; z-index: 5; }
.bar a { flex: 1; text-align: center; padding: 7px 0 8px; font-size: 11.5px; color: #a9b7d0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-decoration: none; border-top: 2px solid transparent; }
.bar a span { font-size: 19px; line-height: 1; } .bar a.on { color: #5eead4; font-weight: 700; border-top-color: #14b8a6; }
@media (min-width: 768px) { .side { display: flex; } .bar { display: none; } .main { padding: 18px 22px 28px; } }
.h1 { font-size: 21px; font-weight: 800; margin: 0; } .h2 { font-size: 16px; font-weight: 800; margin: 16px 0 8px; }
.head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.back { display: inline-block; font-size: 13px; color: #a9b7d0; margin-bottom: 6px; text-decoration: none; min-height: 28px; }
.muted { color: #a9b7d0; } .small { font-size: 13px; color: #a9b7d0; } .rule { font-size: 11.5px; color: #8494b5; }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; } @media (min-width: 768px) { .cards { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
.card { background: #0b1430; border: 1px solid #1d2b52; border-radius: 12px; padding: 10px 12px; }
.card .k { font-size: 13px; color: #a9b7d0; } .num { font-size: 28px; font-weight: 800; line-height: 1.15; } .num small { font-size: 15px; font-weight: 600; color: #a9b7d0; }
.meter { height: 8px; background: #1d2b52; border-radius: 6px; overflow: hidden; margin: 6px 0 5px; } .meter i { display: block; height: 100%; background: #14b8a6; } .meter.warn i { background: #f59e0b; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; border: 1px solid; white-space: nowrap; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip.ok { color: #5eead4; border-color: #155e63; background: #0c2b33; } .chip.warn { color: #fcd34d; border-color: #7a5c12; background: #2a2208; }
.chip.off { color: #c9d4ea; border-color: #3a4870; background: #141d3a; } .chip.bad { color: #fca5a5; border-color: #7f1d1d; background: #2a0f14; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.list { background: #0b1430; border: 1px solid #1d2b52; border-radius: 12px; overflow: hidden; }
.row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #1d2b52; text-decoration: none; color: inherit; width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; }
.row:last-child { border-bottom: 0; } .row .grow { flex: 1; min-width: 0; } a.row:hover, button.row:hover { background: #0f1a3a; }
.dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; } .dot.red { background: #ef4444; } .dot.orange { background: #f59e0b; } .dot.yellow { background: #fcd34d; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border-radius: 11px; font-weight: 700; font-size: 14px; color: #5eead4; border: 2px solid #155e63; background: #0f1a3a; white-space: nowrap; text-decoration: none; min-height: 44px; }
.btn.solid { background: #14b8a6; color: #04121f; border-color: #14b8a6; } .btn.big { min-height: 50px; font-size: 16px; padding: 10px 18px; }
.btn.quiet { border-color: #23345f; color: #c9d4ea; } .btn.danger { color: #fca5a5; border-color: #7f1d1d; } .btn[disabled] { opacity: .5; cursor: default; }
.acts { display: flex; gap: 9px; margin-top: 14px; flex-direction: column; } .acts .btn { width: 100%; }
@media (min-width: 768px) { .acts { flex-direction: row; flex-wrap: wrap; gap: 12px; } .acts .btn { width: auto; } }
.acts.three { display: grid; grid-template-columns: 1fr 1fr; } .acts.three .btn:last-child { grid-column: 1 / -1; }
@media (min-width: 768px) { .acts.three { display: flex; } }
/* While a form is open on the driver or carrier page, the rest of that page is folded away (about 1.5 screens at most). */
#main:has(#carrierAsk form) [data-rest], #main:has(#removeAsk form) [data-rest], #main:has(#linkBox .sheet) [data-rest]:not(:has(#linkBox)) { display: none; }
.list:has([data-form] form) > .row:not(:has(form)) { display: none; }
.tools { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.search, .input, select.input, textarea.input { width: 100%; background: #070d24; border: 1px solid #23345f; border-radius: 10px; padding: 11px 12px; font-size: 16px; min-height: 46px; color: #e8eefc; font-family: inherit; }
.search { flex: 1; min-width: 160px; } .input:focus, .search:focus { outline: 2px solid #14b8a6; outline-offset: 1px; }
.seg { display: flex; background: #0b1430; border: 1px solid #23345f; border-radius: 11px; overflow: hidden; width: 100%; } @media (min-width: 768px) { .seg { width: auto; } }
.seg button, .seg a { flex: 1; padding: 9px 12px; font-weight: 700; font-size: 14px; color: #c9d4ea; min-height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: 0; text-decoration: none; white-space: nowrap; }
.seg .on { background: #14b8a6; color: #04121f; }
label { display: block; color: #a9b7d0; font-size: 13px; margin: 11px 0 4px; }
.two { display: flex; gap: 12px; } .two > div { flex: 1; min-width: 0; }
.panel { background: #0b1430; border: 1px solid #1d2b52; border-radius: 14px; padding: 12px; max-width: 680px; } @media (min-width: 768px) { .panel { padding: 16px 18px; } }
.note { background: #2a2208; border: 1px solid #7a5c12; color: #fde68a; border-radius: 10px; padding: 9px 12px; font-size: 13.5px; margin-top: 12px; }
.info { background: #0f1a3a; border: 1px solid #23345f; color: #c9d4ea; border-radius: 10px; padding: 9px 12px; font-size: 13.5px; margin-top: 12px; }
.err { color: #fca5a5; font-size: 13px; margin-top: 4px; } .okmsg { background: #0c2b33; border: 1px solid #155e63; color: #99f6e4; border-radius: 10px; padding: 9px 12px; margin-top: 12px; }
.choice { display: flex; gap: 8px; } .choice button { flex: 1; border: 2px solid #23345f; border-radius: 11px; padding: 10px 8px; font-weight: 700; min-height: 48px; color: #c9d4ea; background: none; }
.choice button.on { border-color: #14b8a6; background: #0c2b33; color: #5eead4; }
.steps { display: flex; gap: 6px; align-items: center; font-size: 13px; color: #a9b7d0; margin-bottom: 8px; } .steps i { width: 26px; height: 6px; border-radius: 4px; background: #23345f; display: inline-block; } .steps i.on { background: #14b8a6; }
details.fold { border-bottom: 1px solid #1d2b52; } details.fold:last-child { border-bottom: 0; }
details.fold > summary { padding: 12px; font-weight: 700; cursor: pointer; list-style: none; display: flex; gap: 10px; align-items: center; min-height: 48px; }
details.fold > summary::-webkit-details-marker { display: none; } details.fold > summary .c { margin-left: auto; color: #a9b7d0; font-weight: 600; font-size: 13px; }
details.fold > div { padding: 2px 12px 10px; }
.kv { display: flex; padding: 6px 0; border-bottom: 1px solid #1d2b52; gap: 10px; } .kv:last-child { border-bottom: 0; } .kv .k { flex: 0 0 122px; color: #a9b7d0; font-size: 13.5px; }
.hist { padding: 8px 0; border-bottom: 1px solid #1d2b52; } .hist:last-child { border-bottom: 0; }
.center { max-width: 420px; margin: 40px auto; text-align: center; }
/* Training & Links: the link sheet and the rows with one button each. */
a.plain { color: inherit; text-decoration: none; } .row .btn { flex: 0 0 auto; } .row > .small { flex: 0 0 auto; }
.sheet textarea { resize: none; overflow: hidden; font-size: 15px; line-height: 1.35; min-height: 120px; }
#linkBox .sheet { border: 0; padding: 8px 0 0; }
#sheet:not(:empty) { margin-bottom: 12px; } .tools .rule { flex: 1 0 100%; } @media (min-width: 768px) { .tools .rule { flex: 0 1 auto; } }
/* A phone has no sidebar: Log out sits at the top of Home. */
.phone { display: inline-flex; } @media (min-width: 768px) { .phone { display: none; } }
.hide { position: absolute; left: -9999px; }
/* The carrier page: its four tabs fit a phone, and the Policy box folds away while the link sheet is open. */
.seg { overflow-x: auto; } #main:has(#linkBox .sheet) [data-fold] { display: none; }
/* Certificates & reports (owner, 2026-10-12): the two buttons on the carrier's page, the dates to tap, what will print. */
.docs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 10px 0 2px; }
.docs .btn { white-space: normal; text-align: center; line-height: 1.2; padding: 7px 8px; }
@media (min-width: 768px) { .docs { display: flex; gap: 12px; } .docs .btn { padding: 8px 14px; } }
.pick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pick button { border: 1px solid #23345f; background: #0b1430; color: #c9d4ea; border-radius: 999px; padding: 7px 12px; font-weight: 700; font-size: 13px; min-height: 36px; }
.pick button.on { border-color: #14b8a6; background: #0c2b33; color: #5eead4; }
.kv .grow { flex: 1; min-width: 0; } .papers .kv .k { flex: 0 0 138px; } .papers .kv b { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
#main:has(#changeBox form) .papers > :not(#changeBox), .papers .list:has([data-form] form) ~ .acts { display: none; }
/* Clear drivers, Add from portal (owner, 2026-10-12): three answers side by side on a phone, the papers of an answer,
   and the two answers on the driver's page. */
.choice.three { gap: 6px; } .choice.three button { padding: 8px 4px; font-size: 13.5px; line-height: 1.2; }
.paper { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #1d2b52; }
.paper .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; } .paper .btn { min-height: 38px; padding: 5px 12px; margin: 0; flex: 0 0 auto; }
.paper [data-links] { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.clear .kv .k { flex: 0 0 112px; } .clear .kv b { font-weight: 600; overflow-wrap: anywhere; }
.btn.mini { min-height: 40px; padding: 4px 14px; font-size: 13.5px; flex: 0 0 auto; }
.linkbtn { background: none; border: 0; padding: 3px 0; color: #5eead4; font: inherit; text-decoration: underline; text-align: left; } .linkbtn[disabled] { color: #a9b7d0; text-decoration: none; }
.acts.pair { flex-direction: row; } .acts.pair .btn { width: auto; flex: 1; } .acts.pair .btn.solid { flex: 2; }
/* Add driver on a phone: the main button on its own line, the other two side by side (about 1.5 screens). */
@media (max-width: 767px) { #driverForm > .acts { display: grid; grid-template-columns: 2fr 1fr; } #driverForm > .acts > :first-child, #driverForm > .acts > :last-child:nth-child(2) { grid-column: 1 / -1; } }
#dPicked { margin-top: 12px; }
/* The carrier's page on a phone: "+ Add driver" and "+ Add from portal" share one line, so the page is no longer than before. */
.pairrow { display: flex; gap: 9px; } .pairrow .btn { flex: 1; width: auto; white-space: normal; text-align: center; line-height: 1.15; padding: 8px 6px; }
@media (min-width: 768px) { .pairrow { display: contents; } .pairrow .btn { flex: 0 0 auto; padding: 10px 18px; } }
/* New Entrant D&A packet (owner, 2026-10-12): the third button on the carrier's page; on the review screen a
   highlighted line for what is missing ("Fill in" / "Mark N/A"), a line marked N/A, the box to tick, who signs. */
.docs .btn.wide { grid-column: 1 / -1; }
.packet { max-width: 680px; }
.need { border: 1px solid #7a5c12; background: #2a2208; border-radius: 10px; padding: 7px 9px; margin-top: 7px; }
.need b { color: #fde68a; } .need .small { color: #e6d9a8; } .plainbox { margin-top: 7px; }
.needrow { display: flex; gap: 7px; align-items: center; } .needrow .grow { flex: 1; min-width: 0; } .needrow .input { flex: 1; min-width: 0; }
.needrow .btn { margin: 0; } .needrow .btn.mini { padding: 4px 10px; }
.nabox { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #1d2b52; } .nabox .grow { flex: 1; min-width: 0; }
.tickline { display: flex; gap: 10px; align-items: flex-start; color: #e8eefc; font-size: 14.5px; margin-top: 8px; }
.tickline input { flex: 0 0 24px; width: 24px; height: 24px; margin: 0; accent-color: #14b8a6; }
.signer { display: flex; align-items: center; gap: 10px; } .signer .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pk-signer { padding: 9px 12px; }
.auditfold { margin-top: 6px; } .auditfold > summary { cursor: pointer; font-size: 13px; color: #a9b7d0; min-height: 30px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; list-style: none; }
.auditfold > summary::-webkit-details-marker { display: none; } .auditfold > summary::before { content: "+"; color: #5eead4; font-weight: 800; } .auditfold[open] > summary::before { content: "-"; }
.packet details.fold > summary { padding: 8px 12px; min-height: 44px; } .packet details.fold > summary .c { text-align: right; } .packet details.fold > summary span:nth-child(2) { min-width: 0; }
.pk-foot .acts { margin-top: 10px; } .pk-foot .acts.pair .btn { white-space: normal; text-align: center; line-height: 1.15; padding: 8px 6px; } .pk-foot p { margin: 8px 0 0; }
/* While a "Fill in" form is open, the rest of the review screen folds away (about 1.5 screens at most). */
.packet:has([data-fillbox] form) .pk-foot, .packet:has([data-fillbox] form) #pkTop, .packet:has([data-fillbox] form) .need:not(:has(form)):not(.signer), .packet:has([data-fillbox] form) .nabox,
.packet:has([data-fillbox] form) details.fold:not(:has(form)), .packet:has([data-fillbox] form) .auditfold, .packet:has(details.fold [data-fillbox] form) .pk-signer, .packet:has(.pk-signer [data-fillbox] form) > .list { display: none; }
.filerow { margin-top: 10px; padding-top: 10px; border-top: 1px solid #1d2b52; } .filerow .small { overflow-wrap: anywhere; } .filerow .acts.pair { margin-top: 6px; }
/* Draws: the Random Selections screen fills the tab (one space). */
.main:has(.drawsframe) { padding: 0; }
.drawsframe { display: block; width: 100%; border: 0; background: #070d24; height: calc(100vh - 58px); height: calc(100dvh - 58px); }
@media (min-width: 768px) { .drawsframe { height: 100vh; } }