:root { --portal-surface: #fff; --portal-background: #f5f7fb; --portal-border: #e0e7f1; --portal-ink: #101a35; --portal-muted: #61718d; --portal-blue: #005bff; }
:root[data-theme="dark"] { --portal-surface: #20242b; --portal-background: #15181d; --portal-border: #3c4553; --portal-ink: #f0f3f9; --portal-muted: #b4bfce; --portal-blue: #80b6ff; }
[hidden] { display: none !important; }
.password-field { display: flex; align-items: center; gap: 8px; }
.password-field input { flex: 1; min-width: 0; }
.auth-method-tabs a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 8px; color: var(--portal-muted); font-size: 13px; }
.auth-method-tabs a[aria-current="page"] { background: #005bff; color: white; border-radius: 5px; }
.auth-method-tabs a[aria-current="page"] .ui-icon { filter: brightness(0) invert(1); }
body { letter-spacing: 0; }
input, select, textarea { font-weight: 400; font-size: 14px; }
label { font-weight: 500; }
.portal-table th { text-transform: none; }
.back-link { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.master-top-nav a { text-decoration: none; font-weight: 500; }
.primary-button .ui-icon, .qr-camera-button .ui-icon { filter: brightness(0) invert(1); }
.role-admin .app-main, .role-driver .app-main { padding-top: 28px; }
.role-admin .page-heading, .role-driver .page-heading { padding-right: 250px; }
.role-admin .sidebar, .role-driver .sidebar { background: #073b7e; }
.role-master.page-order-new .sidebar { display: none; }
.role-master.page-order-new .app-main { width: 100%; margin: 0 auto; max-width: 1450px; padding: 94px 28px 28px; }
.page-order-new .page-heading { background: var(--portal-surface); border: 1px solid var(--portal-border); border-bottom: 0; padding: 24px 28px; margin-bottom: 0; border-radius: 6px 6px 0 0; }
.page-order-new .page-heading h1 { font-size: 24px; }
.page-order-new .page-heading .back-link { margin-bottom: 8px; }
.route-form-layout > div > label { margin-bottom: 0; }
.order-document-form .form-grid { gap: 28px; }
.route-form-layout > label { margin-bottom: 0; }
.landing-intro h1 { font-size: 38px; line-height: 1.3; }
.landing-intro > p { font-size: 19px; }
.landing-features { bottom: 60px; }
.landing-features strong { font-weight: 500; font-size: 14px; }
.landing-features small { font-size: 13px; }
.landing-qr { min-height: 378px; padding: 28px 24px 24px; }
.landing-qr h2 { font-weight: 600; }
.qr-camera-button { min-height: 40px; font-size: 14px; font-weight: 500; white-space: normal; }
.qr-image-button { min-height: 40px; font-size: 14px; font-weight: 500; }
.landing-role h2 { font-size: 21px; font-weight: 600; }
.landing-role p { font-size: 13px; max-width: 340px; }
.landing-advantages { padding-inline: 48px; }
.landing-advantages h2 { font-size: 20px; font-weight: 500; }
.public-nav a, .support-link { font-weight: 500; font-size: 14px; }
.app-body { background: var(--portal-background); color: var(--portal-ink); }
.app-main .page-heading { transform: none; margin: 0 0 28px; min-height: 50px; }
.page-order-new .app-main .page-heading { margin-bottom: 0; }
.page-order-new .order-document-form { border-radius: 0 0 6px 6px; }
.order-document-form .route-form-layout label { margin-bottom: 0; }
.order-document-form [data-swap-route] { margin-top: 16px; }
.order-document-form .document-comment { padding-block: 16px; }
.order-document-form .document-comment label { margin-bottom: 0; }
.order-document-form .remove-cargo { color: #d72836; border-color: #f3bfc3; }
.role-admin .metrics article > div { display: flex; flex-direction: column; gap: 8px; }
.role-admin .metrics article > div > span { order: -1; color: var(--portal-ink); }
.role-admin .donut { width: 190px; height: 190px; }
.role-admin .donut::before { width: 112px; }
.role-admin .status-overview { grid-template-columns: 190px minmax(0, 1fr); align-content: start; gap: 24px; min-width: 0; padding: 24px; }
.role-admin .status-overview .status-legend { align-self: stretch; align-content: space-between; gap: 12px; min-width: 0; }
.dashboard-orders-row { font-size: 12px; }
.dashboard-orders-head { font-size: 12px; }
.page-heading h1 { font-size: 28px; line-height: 1.25; }
.page-heading p { margin: 8px 0 0; color: var(--portal-muted); }
.app-main { padding-top: 102px; }
.sidebar { overflow-y: auto; padding-bottom: 24px; }
.sidebar > * { flex-shrink: 0; }
.sidebar > a { height: auto; min-height: 44px; margin: 0 0 3px; font-size: 14px; padding: 11px 14px; white-space: normal; }
.sidebar a > span:first-of-type { min-width: 0; overflow-wrap: anywhere; }
.sidebar-help { margin-top: 28px !important; }
.sidebar-help small { display: block; margin-top: 6px; font-size: 12px; }
.sidebar-theme { position: static; margin-top: 26px; }
.master-top-nav { display: none; }
.role-master .topbar { inset: 0 0 auto; height: 76px; background: #073b7d; color: #fff; padding-left: 32px; }
.role-master .topbar .brand { position: static; width: 230px; padding: 0; }
.role-master .topbar .brand img { width: 230px; }
.role-master .master-top-nav { display: flex; gap: 32px; margin-right: auto; margin-left: 44px; font-size: 15px; }
.role-master .master-top-nav a { color: #fff; }
.role-master .account small, .role-master .account strong { color: #fff; }
.role-master .account :is(.notification-button, .topbar-action) .ui-icon { filter: brightness(0) invert(1); }
.role-master .sidebar { top: 76px; width: 240px; padding: 36px 12px 24px; background: var(--portal-surface); color: var(--portal-ink); border-right: 1px solid var(--portal-border); }
.role-master .sidebar a { color: var(--portal-ink); margin-bottom: 8px; }
.role-master .sidebar a .ui-icon { filter: none; }
.role-master .sidebar a[aria-current="page"] { color: var(--portal-blue); background: #eaf3ff; }
.role-master .sidebar-label { color: var(--portal-muted); }
.role-master .app-main { margin-left: 240px; padding: 108px 28px 36px; }
.topbar .account-copy { max-width: 230px; }
.topbar .notification-button { text-decoration: none; }
.app-menu-toggle { display: none; }
.data-surface, .document-form, .conversation, .ticket-aside section, .person-editor, .settings-page { background: var(--portal-surface); color: var(--portal-ink); border: 1px solid var(--portal-border); border-radius: 6px; }
.data-surface { min-width: 0; overflow: hidden; }
.data-surface > h2 { padding: 20px; margin: 0; }
.table-toolbar { display: flex; align-items: end; gap: 20px; flex-wrap: wrap; padding: 24px; border-bottom: 1px solid var(--portal-border); }
.table-toolbar label { display: grid; gap: 8px; margin: 0; font-size: 13px; color: var(--portal-muted); flex: 1 1 150px; }
.table-toolbar .search-field { display: flex; align-items: center; border: 1px solid var(--portal-border); border-radius: 5px; padding: 0 12px; flex: 2 1 240px; }
.search-field input { border: 0; box-shadow: none; padding-left: 0; background: transparent; min-width: 0; }
.table-scroll { overflow-x: auto; width: 100%; }
.portal-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
.portal-table th { background: var(--portal-background); color: var(--portal-ink); font-size: 12px; font-weight: 600; white-space: nowrap; padding: 18px 16px; }
.portal-table td { padding: 22px 16px; border-bottom: 1px solid var(--portal-border); vertical-align: middle; line-height: 1.65; overflow-wrap: anywhere; }
.portal-table td small { display: block; margin-top: 4px; color: var(--portal-muted); }
.portal-table td strong { font-weight: 600; }
.portal-table td a { color: var(--portal-blue); }
.portal-table .icon-button { min-width: 34px; width: 34px; height: 34px; padding: 7px; }
.orders-live-table { min-width: 1100px; table-layout: fixed; }
.orders-live-table th { white-space: normal; padding: 16px 10px; }
.orders-live-table td { font-size: 12px; padding: 18px 10px; max-width: 200px; white-space: normal; }
.orders-live-table th:nth-child(1) { width: 5%; }
.orders-live-table th:nth-child(2) { width: 10%; }
.orders-live-table th:nth-child(3) { width: 9%; }
.orders-live-table th:nth-child(4), .orders-live-table th:nth-child(5) { width: 13%; }
.orders-live-table th:nth-child(6), .orders-live-table th:nth-child(7) { width: 9%; }
.orders-live-table th:nth-child(8) { width: 10%; }
.orders-live-table th:nth-child(9) { width: 13%; }
.orders-live-table th:nth-child(10) { width: 9%; }
.orders-live-table .stage { white-space: normal; }
.orders-live-table .compact-button { padding-inline: 6px; gap: 4px; font-size: 11px; }
.orders-live-table .compact-button { white-space: normal; overflow-wrap: anywhere; }
.orders-live-table .compact-button .ui-icon { width: 14px; height: 14px; }
.order-detail-primary, .order-detail-secondary, .order-detail-grid .content-section { min-width: 0; }
.workflow-panel .timeline li strong { padding: 0; overflow-wrap: normal; }
.scanner-dialog:has(.scanner-status[data-state="error"]) #qr-reader { display: none; }
.settings-page > .theme-control { position: static; width: min(100%, 360px); box-shadow: none; margin-bottom: 24px; }
.metrics article > div > strong { white-space: nowrap; }
.public-qr { padding: 88px 24px 40px; }
.public-qr-heading { padding-right: 0; }
.public-qr h1 { overflow-wrap: anywhere; }
.guest-main > .error-page { padding: 88px 24px 40px; }
:root[data-theme="dark"] .role-master .sidebar a .ui-icon,
:root[data-theme="dark"] .mobile-nav .ui-icon,
:root[data-theme="dark"] .secondary-button .ui-icon { filter: brightness(0) invert(1); }
.orders-live-table .stage { font-size: 11px; border-radius: 4px; }
.table-pagination { padding: 22px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--portal-muted); font-size: 13px; }
.table-pagination > div { display: flex; align-items: center; gap: 12px; }
.table-pagination select { width: 160px; }
.table-pagination [data-page] { background: #005bff; color: white; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 4px; }
.icon-flip { display: inline-flex; transform: rotate(180deg); }
.ticket-status { display: inline-block; white-space: nowrap; font-size: 12px; padding: 3px 9px; border-radius: 4px; background: #edf1f5; color: #475571; }
.ticket-status::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; }
.status-new, .status-answered { background: #eaf2ff; color: #0057f0; }
.status-in_progress { background: #fff2df; color: #a95700; }
.status-resolved { background: #e4f7ed; color: #087746; }
.ticket-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(290px, 1fr); gap: 24px; align-items: start; }
.conversation > header { padding: 24px; border-bottom: 1px solid var(--portal-border); }
.conversation h2, .ticket-aside h2, .person-editor h2, .document-form h2 { font-size: 18px; line-height: 1.4; margin: 0 0 16px; }
.conversation > header h2 { margin: 12px 0 0; }
.conversation-label { margin: 20px 24px 0; font-size: 16px; }
.message-row { display: flex; gap: 16px; padding: 24px; }
.message-row > div { flex: 1; min-width: 0; }
.message-row header { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 14px; }
.message-row time, .message-row small { color: var(--portal-muted); font-size: 12px; }
.message-row p { white-space: normal; overflow-wrap: anywhere; font-size: 14px; line-height: 1.7; margin-bottom: 0; }
.support-message { background: var(--portal-background); border-block: 1px solid var(--portal-border); }
.message-avatar { border-radius: 50%; width: 34px; height: 34px; flex: 0 0 34px; background: #e8f0ff; display: grid; place-items: center; }
.message-composer { padding: 20px; display: grid; gap: 12px; border-top: 1px solid var(--portal-border); }
.message-composer button { justify-self: end; }
.ticket-aside { display: grid; gap: 20px; min-width: 0; }
.ticket-aside section { padding: 24px; }
.detail-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: 13px; }
.detail-list dt { color: var(--portal-muted); }
.detail-list dd { text-align: right; margin: 0; overflow-wrap: anywhere; }
.attachment { display: flex; gap: 12px; align-items: center; border: 1px solid var(--portal-border); padding: 12px; margin: 12px 0; border-radius: 5px; font-size: 13px; }
.attachment span { flex: 1; overflow-wrap: anywhere; }
.attachment small { display: block; color: var(--portal-muted); margin-top: 4px; }
.document-form > section { padding: 28px; border-bottom: 1px solid var(--portal-border); }
.route-form-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px 36px; }
.route-input { display: flex; align-items: center; gap: 14px; min-width: 0; }
.route-input select, .route-input input { min-width: 0; flex: 1; }
.route-input button { flex-shrink: 0; margin-top: 8px; }
.order-document-form .cargo-editor { display: block; border: 1px solid var(--portal-border); border-radius: 6px; padding: 20px; margin-bottom: 16px; background: transparent; }
.cargo-editor > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.cargo-editor h3 { font-size: 16px; margin: 0; }
.cargo-fields { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.document-form .cargo-editor label { margin-bottom: 12px; }
.document-form label, .editor-fields label, .ticket-aside label { display: block; font-size: 13px; margin: 0 0 22px; }
.document-form input, .document-form select, .document-form textarea, .editor-fields input, .editor-fields select, .editor-fields textarea, .ticket-aside input, .ticket-aside select { margin-top: 8px; }
.form-actions { display: flex; justify-content: space-between; gap: 16px; padding: 24px; }
.form-actions > div { display: flex; gap: 16px; }
.required { color: #d72836; }
[data-character-output] { display: block; text-align: right; color: var(--portal-muted); margin-top: 5px; }
.staff-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.staff-layout:has(.person-editor:not([hidden])) { grid-template-columns: minmax(0, 1fr) 320px; }
.staff-table { min-width: 740px; }
.staff-table td { padding: 18px 12px; font-size: 12px; }
.staff-table td:nth-child(2) { min-width: 150px; max-width: 230px; }
.person-editor { position: sticky; top: 94px; max-height: calc(100dvh - 110px); overflow-y: auto; }
.person-editor header { display: flex; align-items: center; justify-content: space-between; padding: 24px 20px 14px; }
.person-editor header h2 { margin: 0; font-size: 16px; }
.editor-fields { padding: 10px 20px 0; }
.editor-fields h3 { font-size: 14px; border-top: 1px solid var(--portal-border); padding-top: 18px; }
.editor-fields output { overflow-wrap: anywhere; user-select: all; display: block; padding: 8px 0; }
.person-editor .form-actions { position: sticky; bottom: 0; background: var(--portal-surface); border-top: 1px solid var(--portal-border); padding: 16px; }
.settings-page { padding: 28px; max-width: 900px; }
.settings-page h2 { font-size: 18px; margin: 0 0 20px; }
.settings-page h2:not(:first-child) { margin-top: 36px; }
[data-sms-settings] fieldset { min-width: 0; margin: 28px 0; padding: 20px; border: 1px solid var(--portal-border); border-radius: 6px; }
[data-sms-settings] legend { padding-inline: 8px; font-weight: 650; }
[data-sms-settings] p { font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
[data-sms-settings] small { display: block; margin-top: 6px; color: var(--portal-muted); line-height: 1.6; }
[data-sms-settings] input:not([type="checkbox"]):not([type="hidden"]), [data-sms-settings] select { width: 100%; min-width: 0; }
[data-sms-settings] label:has(input[type="checkbox"]) { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
[data-sms-settings] input[type="checkbox"] { flex: 0 0 20px; width: 20px; height: 20px; min-height: 20px; margin: 0; accent-color: var(--portal-blue); }
.portal-table.role-permissions-table { table-layout: fixed; min-width: 0; max-width: 100%; }
.role-permissions-table th, .role-permissions-table td { white-space: normal; overflow-wrap: break-word; }
.information-page { max-width: 900px; padding: 48px 28px; margin: 0 auto; line-height: 1.8; color: var(--portal-ink); }
.information-page h1 { font-size: 30px; }
.information-page h2 { font-size: 20px; }
.document-upload { padding: 0 0 24px; border: 0; }
.row-actions { display: flex; gap: 12px; }
.compact-button { padding: 8px 12px; min-height: 34px; font-size: 12px; }
.metrics article > div > strong { font-size: 28px; line-height: 1.15; }
.role-admin .metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.metrics article { min-width: 0; }
.metrics article > div > span { font-size: 13px; line-height: 1.45; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.muted { color: var(--portal-muted); }
.driver-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.driver-overview > section { min-width: 0; background: var(--portal-surface); border: 1px solid var(--portal-border); border-radius: 6px; padding: 22px; }
.driver-overview h2 { font-size: 18px; margin: 0 0 20px; }
.driver-overview .wide-button { margin-top: 16px; }
.trip-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--portal-border); text-decoration: none; font-size: 14px; }
.trip-summary p { color: var(--portal-ink); margin: 6px 0; }
.trip-summary small { color: var(--portal-muted); }
.trip-stages { list-style: none; display: flex; padding: 20px 0; margin: 0; justify-content: space-around; }
.trip-stages li { display: grid; justify-items: center; gap: 12px; font-size: 13px; color: var(--portal-muted); }
.trip-stages .current { color: var(--portal-blue); font-weight: 600; }
.event-summary { display: flex; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--portal-border); color: var(--portal-ink); text-decoration: none; font-size: 14px; }
.event-summary small { display: block; margin-top: 5px; color: var(--portal-muted); }
:root[data-theme="dark"] .role-master .sidebar a[aria-current="page"] { background: #263e53; }
:root[data-theme="dark"] .portal-table input, :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { color: var(--portal-ink); background: var(--portal-surface); border-color: var(--portal-border); }
@media (max-width: 1250px) { .role-master .master-top-nav { gap: 18px; margin-left: 26px; font-size: 13px; } .account-copy { display: none; } .role-admin .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } .staff-layout:has(.person-editor:not([hidden])) { grid-template-columns: minmax(0, 1fr); } .person-editor { position: fixed; top: 76px; right: 0; bottom: 0; width: 360px; max-width: 100%; max-height: none; z-index: 65; box-shadow: -10px 0 40px #0002; } }
@media (max-width: 1300px) { .role-admin .admin-analytics { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
    .role-admin .status-overview { grid-template-columns: minmax(0, 1fr); }
    .role-admin .donut { width: 156px; height: 156px; }
    .role-admin .status-overview .donut { justify-self: center; }
    .public-header-inner { gap: 12px; }
    .public-brand { flex: 1; min-width: 0; }
    .public-brand img { width: 100%; max-width: 230px; }
    .public-header-actions { flex: 0 0 44px; }
    .public-menu-toggle { width: 44px; height: 44px; }
    .qr-camera-button { width: 100%; white-space: normal; line-height: 1.4; font-size: 13px; }
    .driver-overview { grid-template-columns: minmax(0, 1fr); }
    .orders-live-table, .orders-live-table tbody { display: block; min-width: 0; }
    .orders-live-table thead { display: none; }
    .orders-live-table tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 16px; border-bottom: 1px solid var(--portal-border); }
    .orders-live-table td { display: flex; justify-content: space-between; gap: 16px; max-width: none; border: 0; padding: 5px 0; text-align: right; }
    .orders-live-table td[data-label]::before { content: attr(data-label); color: var(--portal-muted); text-align: left; flex: 0 0 35%; }
    .orders-live-table td:last-child a { width: 100%; margin-top: 10px; }
    .role-admin .app-main, .role-driver .app-main { padding-top: 96px; }
    .role-admin .page-heading, .role-driver .page-heading { padding-right: 0; }
    .role-master.page-order-new .app-main { padding: 90px 16px 100px; }
    .role-master.page-order-new .sidebar.is-open { display: block; }
    .app-menu-toggle { background: transparent; border-color: #ffffff55; }
    .landing-advantages { padding-inline: 0; }
    .landing-intro h1 { font-size: 30px; }
    .landing-features { bottom: 32px; }
    .route-form-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .route-input { gap: 8px; }
    .route-input button { font-size: 12px; padding-inline: 10px; }
    .cargo-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .topbar, .role-master .topbar { left: 0; height: 70px; padding: 0 16px; background: #074683; color: white; gap: 14px; }
    .topbar .brand, .role-master .topbar .brand { position: static; width: auto; padding: 0; flex: 1; }
    .topbar .brand img, .role-master .topbar .brand img { width: 195px; max-width: 100%; }
    .app-menu-toggle { display: inline-grid; flex-shrink: 0; }
    .app-menu-toggle .ui-icon { filter: brightness(0) invert(1); }
    .role-master .master-top-nav { display: none; }
    .sidebar, .role-master .sidebar { display: none; top: 70px; width: 270px; bottom: 0; height: auto; z-index: 60; padding: 18px 12px 100px; box-shadow: 12px 0 35px #0003; }
    .sidebar.is-open { display: block; }
    .sidebar::before { display: none; }
    .app-main, .role-master .app-main { margin: 0; padding: 96px 18px 100px; }
    .ticket-layout { grid-template-columns: minmax(0, 1fr); }
    .page-heading h1 { font-size: 24px; }
    .table-toolbar { padding: 18px; gap: 14px; }
    .portal-table { min-width: 680px; }
    .table-pagination { align-items: start; flex-direction: column; }
    .table-pagination > div { width: 100%; justify-content: end; }
    .table-pagination select { width: 146px; }
    .role-admin .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .document-form > section { padding: 20px; }
    .form-actions { padding: 20px; flex-wrap: wrap; }
    .form-actions > div { flex-wrap: wrap; }
    .public-footer { display: flex !important; flex-wrap: wrap; gap: 20px; padding: 28px 22px 105px; }
    .public-footer nav { display: flex; flex-wrap: wrap; gap: 16px; }
    .public-footer .footer-actions { flex-wrap: wrap; }
    .settings-page { overflow-x: auto; }
    .admin-users-layout { grid-template-columns: minmax(0, 1fr); }
    .admin-users-layout > * { min-width: 0; }
    .admin-create h2 { overflow-wrap: anywhere; }
}
@media (max-width: 480px) { .topbar .account-avatar { display: none; } .topbar .account { gap: 6px; } .topbar .brand img { width: 160px; } .page-heading { gap: 14px; flex-wrap: wrap; } .role-admin .metrics { gap: 10px; } .metrics article { padding: 15px; } .metrics .metric-icon { display: none; } .table-toolbar .search-field { flex-basis: 100%; } .document-upload { padding: 0 0 20px; } .form-actions > *, .form-actions > div { width: 100%; } .form-actions button { flex: 1; } }
@media print { .topbar, .sidebar, .mobile-nav, button, .page-heading a { display: none !important; } .app-main, .role-master .app-main { margin: 0; padding: 0; } body { background: white; color: black; } }

/* Preserve readable column labels and actions across all mobile directories. */
@media (max-width: 820px) {
    .auth-shell-master .auth-brand { position: relative; inset: auto; height: auto; }
    .auth-shell-master .auth-benefits { display: none; }
}
@media (max-width: 700px) {
    .auth-shell-master .auth-brand { position: relative; inset: auto; height: auto; min-height: 0; padding: 22px; }
    .auth-shell-master .auth-master-shield { width: 64px; height: 64px; margin: 0 auto 12px; }
    .auth-shell-master .auth-master-shield .ui-icon { width: 36px; height: 36px; }
    .auth-shell-master .auth-master-copy h2 { margin: 0; font-size: 22px; }
    .auth-shell-master .auth-benefits { display: none; }
    .auth-public-header { display: block; }
    .auth-public-header .public-header-actions { display: none; }
    .auth-shell-master .auth-panel { padding: 24px 20px; }
    .auth-body:has(.auth-shell-master) .guest-main { padding: 0; }
    .auth-master-stage { min-height: calc(100dvh - 70px); padding: 20px 0 36px; }
    .public-qr { padding: 88px 20px 32px; }
    .public-qr h1 { font-size: 28px; line-height: 1.25; }
    .role-admin .metrics article > div > strong { font-size: 26px; }
    .order-detail-grid { grid-template-columns: minmax(0, 1fr); }
    .order-detail-grid .route-line { grid-template-columns: minmax(0, 1fr); }
    .order-detail-grid .route-truck { justify-self: start; }
    .workflow-panel .timeline { display: grid; overflow: visible; margin: 20px 0; }
    .workflow-panel .timeline li { grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto; min-height: 46px; min-width: 0; align-items: start; text-align: left; }
    .workflow-panel .timeline li span { margin: 0; }
    .workflow-panel .timeline li strong { padding: 4px 0 0; font-size: 13px; }
    .workflow-panel .timeline li::after { top: 23px; bottom: 0; left: 10px; right: auto; width: 1px; height: auto; }
    .detail-cargo-section .cargo-item { grid-template-columns: minmax(0, 1fr); }
    .detail-cargo-section .cargo-item > * { min-width: 0; overflow-wrap: anywhere; }
    .portal-table, .portal-table tbody, .responsive-table table, .responsive-table tbody { display: block; min-width: 0; width: 100%; }
    .portal-table thead, .responsive-table thead { display: none; }
    .portal-table tr, .responsive-table tr { display: block; width: 100%; padding: 16px; border-bottom: 1px solid var(--portal-border); }
    .portal-table td, .responsive-table td {
        display: grid; grid-template-columns: minmax(90px, 36%) minmax(0, 1fr); gap: 12px;
        min-width: 0; max-width: none; width: 100%; height: auto; padding: 7px 0;
        border: 0; white-space: normal; text-align: left; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere;
    }
    .portal-table td::before, .responsive-table td::before { content: attr(data-label); min-width: 0; color: var(--portal-muted); font-size: 12px; font-weight: 400; text-align: left; }
    .portal-table td > *, .responsive-table td > * { min-width: 0; max-width: 100%; }
    .portal-table td:last-child a { margin-top: 0; }
    .staff-table td:nth-child(2) { min-width: 0; max-width: none; }
    .staff-table .icon-button { width: 44px; height: 44px; }
    .table-scroll { overflow: visible; }
    .settings-page { padding: 20px; }
    .settings-page .portal-table tr { padding-inline: 0; }
    .person-editor { top: 70px; bottom: 68px; max-height: calc(100dvh - 138px); }
}

.scanner-dialog { max-height: calc(100dvh - 24px); overflow-y: auto; }
.scanner-dialog [hidden] { display: none !important; }
.scanner-controls { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 10px; margin-top: 14px; }
.scanner-controls .secondary-button { min-width: 0; min-height: 44px; justify-content: center; }
.scanner-torch { width: 44px; height: 44px; }
.scanner-torch[aria-pressed="true"] { color: #674c00; background: #fff0ab; border-color: #b08c21; }
:root[data-theme="dark"] .scanner-torch[aria-pressed="true"] { color: #ffec9a; background: #473a12; border-color: #b08c21; }
.scanner-torch:disabled { opacity: .45; cursor: not-allowed; }
.scanner-zoom { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--portal-border); }
.scanner-zoom-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.scanner-zoom-heading label { margin: 0; color: var(--portal-ink); font-size: 13px; font-weight: 600; }
.scanner-zoom-heading output { min-width: 44px; color: var(--portal-ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.scanner-zoom-controls { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 10px; }
.scanner-zoom-step { width: 44px; height: 44px; min-height: 44px; border-color: var(--portal-border); background: var(--portal-surface); color: var(--portal-blue); font-size: 24px; font-weight: 500; line-height: 1; }
.scanner-zoom-step:hover:not(:disabled) { border-color: var(--portal-blue); background: color-mix(in srgb, var(--portal-blue) 8%, var(--portal-surface)); }
.scanner-zoom-controls input[type="range"] { display: block; width: 100%; min-width: 0; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; accent-color: var(--portal-blue); cursor: pointer; }
.scanner-zoom-controls :is(button, input):focus-visible { outline: 3px solid color-mix(in srgb, var(--portal-blue) 45%, transparent); outline-offset: 2px; box-shadow: none; }
.scanner-zoom-controls :disabled { opacity: .5; cursor: not-allowed; }
.scanner-zoom-hint { margin: 7px 0 0; color: var(--portal-muted); font-size: 12px; line-height: 1.5; }
.scanner-zoom-hint[data-state="error"] { color: var(--danger); }
:root[data-theme="dark"] .scanner-dialog .icon-button .ui-icon { filter: brightness(0) saturate(100%) invert(78%) sepia(21%) saturate(698%) hue-rotate(174deg) brightness(96%) contrast(95%); }
.scanner-status { margin-top: 16px; line-height: 1.5; }
#qr-reader { min-height: 180px; }
#qr-reader video { display: block; width: 100%; }

/* Personal planner startup choices share the account form on the planner settings page. */
[data-planner-preferences] .planner-startup-options {display:grid;gap:12px;margin:20px 0;padding:0;border:0;min-width:0}
[data-planner-preferences] .planner-startup-options legend {font-weight:600;margin-bottom:12px;overflow-wrap:anywhere}
[data-planner-preferences] .document-form .planner-startup-choice {display:flex;align-items:flex-start;gap:12px;min-height:44px;margin:0;padding:12px;border:1px solid var(--portal-border);border-radius:6px;cursor:pointer;box-sizing:border-box}
[data-planner-preferences] .planner-startup-choice input[type=checkbox] {flex:none;width:20px;height:20px;min-height:20px;margin:1px 0 0;accent-color:var(--portal-blue)}
[data-planner-preferences] .planner-startup-choice span {min-width:0;overflow-wrap:anywhere}
[data-planner-preferences] .planner-startup-choice small {display:block;color:var(--portal-muted);line-height:1.5;margin-top:5px}
.planner-manage>[data-planner-preferences] {max-width:none;margin-bottom:20px}