/* Shared portal surfaces and accessible controls for the existing page modules. */
.app-body,
.auth-body {
    --surface: var(--portal-surface);
    --surface-2: var(--portal-background);
    --text: var(--portal-ink);
    --muted: var(--portal-muted);
    --border: var(--portal-border);
    --portal-line: var(--portal-border);
    --portal-canvas: var(--portal-background);
}

.skip-link {
    position: fixed;
    z-index: 200;
    top: 12px;
    left: 12px;
    padding: 12px 18px;
    border: 1px solid var(--ust-border-brand);
    border-radius: 8px;
    background: var(--portal-surface);
    color: var(--portal-blue);
    font-weight: 650;
    text-decoration: none;
    transform: translateY(calc(-100% - 24px));
}
.skip-link:focus { transform: translateY(0); }
.topbar .account-profile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
}
.topbar .account-profile:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.topbar .account-profile:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.topbar .notification-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.topbar .notification-button .ui-icon { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.topbar .notification-button .notification-indicator {
    position: absolute; top: calc(50% - 11px); right: calc(50% - 9px); width: 10px; height: 10px;
    border: 2px solid var(--portal-header, #112034); border-radius: 50%; background: #ef3340;
}
.topbar .notification-button .notification-indicator[hidden] { display: none; }
.topbar .account-profile .account-avatar { display: grid; flex-shrink: 0; }
.profile-details { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.profile-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.page-profile .settings-page { width: 100%; max-width: none; margin-inline: 0; }
.page-profile .settings-page > h2 { overflow-wrap: anywhere; }
.page-profile .profile-details { grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); column-gap: 24px; }
.page-profile .profile-details dd { text-align: start; }
.password-recovery { margin-top: 20px; }
.password-recovery > .document-form { padding: 20px; margin-top: 16px; }
.password-recovery .form-actions { justify-content: flex-end; padding: 0; }
#password-heading, #profile-sessions-heading { scroll-margin-top: 96px; }
.profile-session-count { margin: 20px 0 12px; color: var(--portal-muted); }
.profile-session-import-note { margin: 16px 0 0; color: var(--portal-muted); overflow-wrap: anywhere; }
.profile-session-list { display: grid; gap: 12px; margin: 0 0 24px; padding: 0; list-style: none; }
.profile-session { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 20px; min-width: 0; padding: 16px; border: 1px solid var(--portal-border); border-radius: 8px; }
.profile-session-info { min-width: 0; overflow-wrap: anywhere; }
.profile-session-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.profile-session-current { padding: 3px 8px; border-radius: 5px; background: var(--portal-background); color: var(--portal-blue); font-size: 12px; font-weight: 650; }
.profile-session .profile-session-browser { margin: 5px 0 12px; color: var(--portal-muted); }
.profile-session-dates { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; font-size: 12px; }
.profile-session-dates > div { display: grid; gap: 4px; min-width: 0; max-width: 100%; }
.profile-session-dates dt { color: var(--portal-muted); }
.profile-session-dates dd { margin: 0; overflow-wrap: anywhere; }
.profile-session [data-device-network-refresh] { margin-top: 12px; }
.profile-session [data-device-network-message]:empty { display: none; }
.profile-session form { min-width: 0; margin: 0; }
.profile-session button { max-width: 100%; white-space: normal; }
.profile-session-network { margin-top: 16px; min-width: 0; }
.profile-session-network > summary { cursor: pointer; font-size: 13px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.profile-session-network > summary:focus-visible { outline: 3px solid var(--ust-focus-ring); outline-offset: 3px; }
.profile-session .profile-session-network-note { margin: 10px 0 0; color: var(--portal-muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.profile-session-addresses { display: grid; gap: 8px; list-style: none; margin: 12px 0 0; padding: 0; min-width: 0; }
.profile-session-addresses > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 4px 14px; padding: 10px 12px; border: 1px solid var(--portal-border); border-radius: 6px; font-size: 12px; line-height: 1.5; }
.profile-session-addresses :is(code,span,small) { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.profile-session-addresses code { font-size: 13px; color: var(--text); }
.profile-session-addresses small { color: var(--portal-muted); font-size: inherit; }
@media (max-width: 600px) {
    .profile-session { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .profile-session-addresses > li { grid-template-columns: minmax(0, 1fr); }
    .profile-session button { width: 100%; }
}
.app-main > *,
.page-heading > div,
.section-heading > div { min-width: 0; }
.app-main .page-heading { align-items: center; }
.page-heading > :is(a, button, .stage, .ticket-status) { flex-shrink: 0; }
.section-heading { flex-wrap: wrap; gap: 12px; }
.section-heading p { margin: 6px 0 0; color: var(--portal-muted); font-size: 13px; }

.app-main :is(.content-section, .data-surface, .document-form, .conversation, .ticket-aside section, .person-editor, .settings-page, .driver-overview > section) {
    border-color: var(--portal-border);
    border-radius: 8px;
}
.page-order-new .app-main .page-heading { border-radius: 8px 8px 0 0; }
.page-order-new .app-main .order-document-form { border-radius: 0 0 8px 8px; }
.app-main > form.table-toolbar {
    margin: 0 0 20px;
    padding: 22px 24px;
    border: 1px solid var(--portal-border);
    border-radius: 8px;
    background: var(--portal-surface);
}
.settings-page + .settings-page { margin-top: 20px; }
.settings-page > .document-form { padding: 20px; }
.settings-page > .document-form .form-actions { justify-content: flex-end; padding: 20px 0 0; }
.table-toolbar .search-field { border-radius: 8px; transition: border-color .16s ease, box-shadow .16s ease; }
.table-toolbar .search-field:focus-within {
    border-color: var(--ust-border-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ust-focus-ring) 22%, transparent);
}
.table-toolbar .search-field > .ui-icon { flex-shrink: 0; }
.table-toolbar label,
.table-toolbar :is(input, select) { min-width: 0; }
.content-section > .table-toolbar { padding-inline: 0; }
.app-main .empty-state { margin: 0; padding: 40px 24px; line-height: 1.6; }
.app-main .empty-state h3 { margin: 0 0 8px; color: var(--portal-ink); font-size: 17px; }
.app-main .empty-state p { margin: 0; }
.app-main .row-actions { align-items: center; flex-wrap: wrap; }
.app-main .row-actions form { margin: 0; }
.app-main :is(.stage, .status-badge, .ticket-status) { overflow-wrap: normal; word-break: normal; }
.orders-live-table .stage { white-space: nowrap; }
.app-main .edit-details summary {
    padding: 12px 0;
    color: var(--portal-blue);
    font-size: 14px;
    line-height: 1.5;
}
.app-main .edit-details[open] > summary { margin-bottom: 8px; border-bottom: 1px solid var(--portal-border); }
.app-main .edit-details summary:hover { text-decoration: underline; text-underline-offset: 3px; }

:is(button, summary, input, select, textarea):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ust-focus-ring) 55%, transparent);
    outline-offset: 3px;
}
.app-main button:disabled { cursor: not-allowed; opacity: .5; }
.role-master .sidebar .theme-control { border-color: var(--portal-border); background: var(--portal-background); }
.role-master .sidebar .theme-control button { color: var(--portal-muted); }
.role-master .sidebar .theme-control button[aria-pressed="true"] { background: var(--ust-action-primary-default); color: #fff; }
.role-master .sidebar a:hover { background: var(--portal-background); }
.role-master .sidebar a[aria-current="page"] { box-shadow: none; }
.reference-nav { min-width: 0; }
.reference-nav > summary { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; list-style: none; }
.reference-nav > summary::-webkit-details-marker { display: none; }
.reference-nav > summary::after { content: ""; flex: 0 0 7px; width: 7px; height: 7px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.reference-nav[open] > summary::after { transform: rotate(45deg); }
.sidebar-reference-nav { margin: 0 0 3px; }
.sidebar-reference-nav > summary { padding: 11px 14px; border-radius: 8px; color: #fff; font-size: 14px; font-weight: 500; }
.sidebar-reference-nav > summary .ui-icon { flex: 0 0 22px; width: 22px; height: 22px; filter: brightness(0) invert(1); opacity: .78; }
.sidebar-reference-nav > summary:hover, .sidebar-reference-nav:has([aria-current="page"]) > summary { background: #ffffff14; }
.sidebar-reference-nav > .reference-nav-links { margin: 4px 0 8px 24px; padding-left: 8px; border-left: 1px solid #ffffff45; }
.sidebar .reference-nav-links > a { height: auto; min-height: 44px; margin: 0 0 3px; padding: 10px 12px; font-size: 13px; }
.sidebar-reference-nav > summary:focus-visible, .sidebar .reference-nav-links > a:focus-visible { outline: 2px solid #8ac8ff; outline-offset: -2px; }
.role-master .sidebar-reference-nav > summary { color: var(--portal-ink); }
.role-master .sidebar-reference-nav > summary .ui-icon { filter: none; }
.role-master .sidebar-reference-nav > summary:hover, .role-master .sidebar-reference-nav:has([aria-current="page"]) > summary { background: var(--portal-background); }
.role-master .sidebar-reference-nav > .reference-nav-links { border-color: var(--portal-border); }
.top-reference-nav { position: relative; flex-shrink: 0; }
.role-master .master-top-nav { align-items: center; }
.top-reference-nav > summary { gap: 10px; color: #fff; font-weight: 500; }
.top-reference-nav > .reference-nav-links { position: absolute; top: 100%; left: 0; z-index: 2; width: 200px; padding: 8px; border: 1px solid var(--portal-border); border-radius: 8px; background: var(--portal-surface); box-shadow: 0 10px 28px #001c3d33; }
.role-master .master-top-nav .reference-nav-links > a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 6px; color: var(--portal-ink); font-size: 14px; }
.top-reference-nav .reference-nav-links .ui-icon { width: 20px; height: 20px; }
.role-master .master-top-nav .reference-nav-links > a:hover, .role-master .master-top-nav .reference-nav-links > a[aria-current="page"] { color: var(--portal-blue); background: var(--portal-background); }
.top-reference-nav > summary:focus-visible { outline: 2px solid #8ac8ff; outline-offset: 3px; border-radius: 4px; }
.top-reference-nav .reference-nav-links > a:focus-visible { outline: 2px solid var(--portal-blue); outline-offset: -2px; }
:root[data-theme="dark"] .top-reference-nav .reference-nav-links .ui-icon { filter: brightness(0) invert(1); }

/* Public information pages use the same typography and cards as the workspace. */
.information-page {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0;
    color: var(--portal-ink);
    line-height: 1.6;
}
.auth-body:has(.information-page) .guest-main {
    display: block;
    min-height: 100vh;
    padding: 96px clamp(20px, 5vw, 56px) 64px;
    background: var(--portal-background);
}
.information-page > .back-link { min-height: 40px; margin-bottom: 20px; color: var(--portal-muted); font-size: 13px; text-decoration: none; }
.information-page > .back-link:hover { color: var(--portal-blue); }
.information-page .information-heading { justify-content: flex-start; align-items: flex-start; gap: 18px; padding: 0; margin: 0 0 28px; transform: none; }
.information-heading h1 { font-size: clamp(24px, 3vw, 30px); line-height: 1.3; }
.information-heading .eyebrow { margin: 0 0 6px; color: var(--portal-blue); font-size: 11px; font-weight: 650; }
.information-heading .information-intro { max-width: 680px; margin: 10px 0 0; color: var(--portal-muted); font-size: 15px; }
.information-icon {
    display: grid;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--portal-blue) 14%, var(--portal-border));
    border-radius: 12px;
    background: color-mix(in srgb, var(--portal-blue) 8%, var(--portal-surface));
}
.information-icon .ui-icon { width: 28px; height: 28px; }
.information-content { display: grid; gap: 20px; }
.information-card { min-width: 0; padding: 28px; border: 1px solid var(--portal-border); border-radius: 8px; background: var(--portal-surface); }
.information-card h2 { margin: 0 0 12px; color: var(--portal-ink); font-size: 20px; line-height: 1.4; }
.information-card p { margin: 0 0 18px; }
.information-card p:last-child { margin-bottom: 0; }
.information-card > p { max-width: 76ch; }
.information-card ul { margin: 0 0 24px; padding-left: 22px; }
.information-card li + li { margin-top: 8px; }
.information-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 26px 0; }
.information-grid > section { min-width: 0; padding: 20px; border: 1px solid var(--portal-border); border-radius: 8px; background: var(--portal-background); }
.information-grid h3 { margin: 12px 0 8px; font-size: 16px; line-height: 1.4; }
.information-grid p { color: var(--portal-muted); font-size: 13px; line-height: 1.6; }
.information-step { color: var(--portal-blue); font-size: 13px; font-weight: 700; }
.information-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.information-note { margin: 0; padding: 16px 18px; border-left: 3px solid var(--portal-blue); border-radius: 0 6px 6px 0; background: color-mix(in srgb, var(--portal-blue) 6%, var(--portal-surface)); color: var(--portal-muted); font-size: 13px; }
.information-card .information-note { margin-bottom: 20px; }
.information-help-card { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.information-help-card > div { flex: 1 1 320px; }
.information-help-card h2 { font-size: 18px; }
.information-help-card p { margin: 0; color: var(--portal-muted); font-size: 14px; }
.information-contact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 24px 0 0; padding-top: 24px; border-top: 1px solid var(--portal-border); }
.information-contact-list dt { margin-bottom: 8px; color: var(--portal-muted); font-size: 13px; }
.information-contact-list dd { margin: 0; }
.information-contact-list a { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; color: var(--portal-blue); overflow-wrap: anywhere; }
.information-contact-list .ui-icon { width: 18px; height: 18px; }

:root[data-theme="dark"] .app-main :is(.page-heading, .section-heading) a:not(.primary-button),
:root[data-theme="dark"] .app-main .edit-details summary { color: var(--portal-blue); }
:root[data-theme="dark"] .information-page .ui-icon,
:root[data-theme="dark"] .role-master .sidebar .ui-icon,
:root[data-theme="dark"] .app-main :is(.secondary-button, .icon-button, .search-field, .event-summary, .trip-stages, .attachment) .ui-icon { filter: brightness(0) invert(1); }
:root[data-theme="dark"] .app-main .dashboard-orders-head { background: var(--portal-background); }
:root[data-theme="dark"] .app-main .message-avatar { background: color-mix(in srgb, var(--portal-blue) 18%, var(--portal-surface)); }
:root[data-theme="dark"] .app-main .message-avatar .ui-icon { filter: brightness(0) invert(1); }
:root[data-theme="dark"] .mobile-nav a[aria-current="page"] { color: #fff; }
:root[data-theme="dark"] .app-main .api-issued { border-color: #46715e; background: #203d31; }
:root[data-theme="dark"] .auth-body:has(.auth-shell-master) .guest-main,
:root[data-theme="dark"] .auth-shell-master .auth-panel { background: var(--portal-surface); }

@media (min-width: 901px) {
    .page-profile.role-master .app-main { width: calc(100% - 240px); }
    :root:not([data-theme="dark"]) .app-body:not(.role-master) .topbar .notification-button {
        --portal-header: var(--portal-blue-deep);
        background: var(--portal-header);
    }
    .role-admin .app-main,
    .role-driver .app-main { padding-top: 102px; }
    .role-admin .page-heading,
    .role-driver .page-heading { padding-right: 0; }
}
@media (min-width: 901px) and (max-width: 1100px) {
    .app-body:not(.role-master) .topbar .brand { width: 232px; }
    .app-body:not(.role-master) .topbar .brand img { width: 216px; }
}
@media (max-width: 900px) {
    .topbar .brand { min-width: 0; }
    .topbar .account { flex-shrink: 0; }
    /* The drawer collapses at 900px; the content must fill its released width. */
    .app-body .app-main { width: 100%; }
    .app-main > form.table-toolbar { padding: 20px; }
    .app-main .page-heading { flex-wrap: wrap; }
    .app-main .page-heading > div { flex: 1 1 auto; }
    .information-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .information-grid > section { padding: 18px; }
}
@media (max-width: 700px) {
    .information-card { padding: 20px; }
    .information-page .information-heading { gap: 12px; flex-wrap: nowrap; }
    .information-icon { width: 44px; height: 44px; flex-basis: 44px; border-radius: 10px; }
    .information-icon .ui-icon { width: 24px; height: 24px; }
    .information-heading .information-intro { font-size: 14px; }
    .information-contact-list { grid-template-columns: minmax(0, 1fr); }
    .auth-body:has(.information-page) .guest-main { padding: 24px 18px calc(144px + env(safe-area-inset-bottom)); }
    .information-actions > a,
    .information-help-card > a { width: 100%; }
    .app-main .empty-state { padding: 30px 16px; }
    .app-main :is(.portal-table, .responsive-table) td[colspan] { display: block; }
    .app-main :is(.portal-table, .responsive-table) td[colspan]::before { display: none; content: none; }
    .app-main :is(.portal-table, .responsive-table) td.row-actions { display: flex; }
    .app-main :is(.portal-table, .responsive-table) td.row-actions::before { flex-basis: 100%; }
    .app-main :is(.secondary-button, .primary-button, .icon-button, .compact-button) { min-height: 44px; }
    .app-main .portal-table .icon-button { min-width: 44px; width: 44px; height: 44px; }
    .settings-page > .document-form, .password-recovery > .document-form { padding: 16px; }
    .driver-overview .trip-summary { flex-wrap: wrap; }
    .table-toolbar .search-field input { font-size: 16px; }
}
@media (max-width: 600px) {
    .page-profile .profile-details { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .page-profile .profile-details dd:not(:last-child) { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .table-toolbar .search-field { transition: none; }
}