/* NavajoIQ Shipper Portal
   Application shell, data surfaces, and form chrome. Reuses the marketing brand tokens from
   app.css (--niq-*) so the portal reads as the same company while behaving like a SaaS app. */

.portal {
    --portal-sidebar-w: 16.5rem;
    --portal-radius: 0.75rem;
    --portal-radius-sm: 0.5rem;
    --portal-shadow: 0 1px 2px rgba(18, 22, 28, 0.06), 0 8px 24px rgba(18, 22, 28, 0.06);
    --portal-shadow-sm: 0 1px 2px rgba(18, 22, 28, 0.08);
    display: flex;
    min-height: 100vh;
    min-height: 100svh;
    background: var(--niq-paper);
    color: var(--niq-ink);
    font-family: var(--niq-font-body);
}

/* ---------- Sidebar ---------- */

.portal-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex: 0 0 var(--portal-sidebar-w);
    width: var(--portal-sidebar-w);
    padding: 1.5rem 1.15rem 1.25rem;
    background: var(--niq-ink);
    color: rgba(255, 255, 255, 0.82);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.portal-sidebar__brand {
    display: block;
    text-decoration: none;
    color: var(--niq-white);
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--niq-line-on-dark);
}

.portal-sidebar__brand:hover {
    color: var(--niq-white);
}

.portal-sidebar__brand-mark {
    display: block;
    font-family: var(--niq-font-display);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.portal-sidebar__brand-mark em {
    font-style: normal;
    color: var(--niq-accent);
}

.portal-sidebar__brand-sub {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.5);
}

.portal-sidebar__org {
    display: flex;
    gap: 0.7rem;
    align-items: center;
}

.portal-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--niq-accent);
    color: var(--niq-white);
    font-family: var(--niq-font-display);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.portal-sidebar__org-name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--niq-white);
    line-height: 1.25;
}

.portal-sidebar__user {
    display: block;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.3;
    word-break: break-word;
}

.portal-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 auto;
}

.portal-nav__group-label {
    margin: 0.9rem 0 0.35rem 0.65rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.38);
}

.portal-nav a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.52rem 0.65rem;
    border-radius: var(--portal-radius-sm);
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.18s var(--niq-ease), color 0.18s var(--niq-ease);
}

.portal-nav a:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--niq-white);
}

.portal-nav a.active {
    background: rgba(255, 255, 255, 0.11);
    color: var(--niq-white);
    box-shadow: inset 2px 0 0 var(--niq-accent);
}

.portal-nav__icon {
    flex: 0 0 1rem;
    width: 1rem;
    text-align: center;
    opacity: 0.75;
    font-size: 0.95rem;
}

.portal-sidebar__footer {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-top: 1rem;
    border-top: 1px solid var(--niq-line-on-dark);
}

.portal-sidebar__footer a {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
    text-decoration: none;
}

.portal-sidebar__footer a:hover {
    color: var(--niq-white);
}

.portal-signout {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.72);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.portal-signout:hover {
    color: var(--niq-accent);
}

/* ---------- Content shell ---------- */

.portal-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.portal-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem clamp(1rem, 3vw, 2rem);
    background: var(--niq-white);
    border-bottom: 1px solid var(--niq-line);
}

.portal-topbar__meta {
    font-size: 0.78rem;
    color: var(--niq-muted);
}

.portal-topbar__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.portal-content {
    flex: 1 1 auto;
    padding: clamp(1.25rem, 3vw, 2rem);
    width: 100%;
    max-width: 84rem;
    margin: 0 auto;
}

.portal-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.portal-page-header__eyebrow {
    margin: 0 0 0.3rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--niq-muted);
}

.portal-page-header h1 {
    margin: 0;
    font-family: var(--niq-font-display);
    font-size: clamp(1.45rem, 2.6vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.15;
}

.portal-page-header p {
    margin: 0.4rem 0 0;
    max-width: 48rem;
    color: var(--niq-slate);
    font-size: 0.92rem;
}

.portal-page-header__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ---------- Cards and panels ---------- */

.portal-card {
    background: var(--niq-white);
    border: 1px solid var(--niq-line);
    border-radius: var(--portal-radius);
    box-shadow: var(--portal-shadow-sm);
}

.portal-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--niq-line);
}

.portal-card__header h2,
.portal-card__header h3 {
    margin: 0;
    font-family: var(--niq-font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.portal-card__hint {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: var(--niq-muted);
}

.portal-card__body {
    padding: 1.15rem;
}

.portal-card__body--flush {
    padding: 0;
}

.portal-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1.15rem;
    border-top: 1px solid var(--niq-line);
    background: var(--niq-paper);
    border-radius: 0 0 var(--portal-radius) var(--portal-radius);
}

.portal-grid {
    display: grid;
    gap: 1rem;
}

.portal-grid--kpis {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.portal-grid--split {
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    align-items: start;
}

.portal-grid--thirds {
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    align-items: start;
}

.portal-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ---------- KPI cards ---------- */

.kpi-card {
    display: block;
    padding: 1.05rem 1.15rem;
    background: var(--niq-white);
    border: 1px solid var(--niq-line);
    border-radius: var(--portal-radius);
    border-top: 3px solid var(--niq-ink);
    box-shadow: var(--portal-shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s var(--niq-ease), box-shadow 0.18s var(--niq-ease);
}

a.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--portal-shadow);
    color: inherit;
}

.kpi-card--accent {
    border-top-color: var(--niq-accent);
}

.kpi-card--alert {
    border-top-color: #b4231a;
}

.kpi-card--calm {
    border-top-color: #2f6f4f;
}

.kpi-card__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--niq-muted);
}

.kpi-card__value {
    display: block;
    margin-top: 0.4rem;
    font-family: var(--niq-font-display);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.kpi-card__hint {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--niq-slate);
}

/* ---------- Status pills ---------- */

.status-pill,
.tender-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.status-pill::before,
.tender-pill::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
}

.status-pill--draft {
    background: #eef1f4;
    border-color: #d8dee5;
    color: #4b5563;
}

.status-pill--tendered,
.status-pill--accepted {
    background: #e8f0fb;
    border-color: #c6d9f4;
    color: #1d4f91;
}

.status-pill--planning,
.status-pill--covered {
    background: #eceaf8;
    border-color: #d3cdee;
    color: #4a3f9c;
}

.status-pill--dispatched,
.status-pill--at-pickup,
.status-pill--transit,
.status-pill--at-delivery {
    background: #fdeee9;
    border-color: #f7d2c7;
    color: #a4381f;
}

.status-pill--delivered,
.status-pill--completed {
    background: #e8f3ec;
    border-color: #c8e2d2;
    color: #22603f;
}

.status-pill--cancelled {
    background: #f4f1f1;
    border-color: #e0d9d9;
    color: #7b6f6f;
}

.status-pill--attention {
    background: #fdf5e4;
    border-color: #f2e0b4;
    color: #86661c;
}

.tender-pill--none {
    background: #f1f3f5;
    border-color: #dfe3e8;
    color: #5b6472;
}

.tender-pill--pending {
    background: #fdf5e4;
    border-color: #f2e0b4;
    color: #86661c;
}

.tender-pill--sent,
.tender-pill--accepted {
    background: #e8f3ec;
    border-color: #c8e2d2;
    color: #22603f;
}

.tender-pill--rejected,
.tender-pill--failed {
    background: #fdeaea;
    border-color: #f5c9c9;
    color: #9c2320;
}

.tender-pill--cancelled {
    background: #f4f1f1;
    border-color: #e0d9d9;
    color: #7b6f6f;
}

.portal-review-heading {
    margin: 1.5rem 0 0.75rem;
    font-family: var(--niq-font-display);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--niq-ink);
}

.portal-list {
    margin: 0 0 0.85rem;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.45rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--niq-slate);
}

.portal-code {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    background: var(--niq-white);
    border: 1px solid var(--niq-line);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    letter-spacing: 0.04em;
    color: var(--niq-ink);
    user-select: all;
}

.portal-list code {
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    background: var(--niq-paper-warm);
    border: 1px solid var(--niq-line);
    font-size: 0.82em;
}

.portal-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--niq-paper-warm);
    border: 1px solid var(--niq-line);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--niq-slate);
}

.portal-chip--hazmat {
    background: #fdeee9;
    border-color: #f7d2c7;
    color: #a4381f;
}

/* ---------- Tables ---------- */

.portal-table-wrap {
    overflow-x: auto;
}

.portal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.portal-table thead th {
    position: sticky;
    top: 0;
    padding: 0.6rem 0.9rem;
    background: var(--niq-paper);
    border-bottom: 1px solid var(--niq-line);
    text-align: left;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--niq-muted);
    white-space: nowrap;
}

.portal-table tbody td {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--niq-line);
    vertical-align: top;
}

.portal-table tbody tr:last-child td {
    border-bottom: 0;
}

.portal-table tbody tr:hover {
    background: rgba(18, 22, 28, 0.02);
}

.portal-table__primary {
    display: block;
    font-weight: 600;
    color: var(--niq-ink);
    text-decoration: none;
}

.portal-table__primary:hover {
    color: var(--niq-accent);
}

.portal-table__secondary {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--niq-muted);
}

.portal-table__numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.portal-table__actions {
    white-space: nowrap;
    text-align: right;
}

.portal-lane {
    display: block;
    font-weight: 500;
}

.portal-muted {
    color: var(--niq-muted);
}

.portal-small {
    font-size: 0.8rem;
}

/* ---------- Buttons ---------- */

.portal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    border-radius: var(--portal-radius-sm);
    border: 1px solid transparent;
    background: var(--niq-ink);
    color: var(--niq-white);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s var(--niq-ease), border-color 0.18s var(--niq-ease), color 0.18s var(--niq-ease);
}

.portal-btn:hover {
    background: var(--niq-ink-soft);
    color: var(--niq-white);
}

.portal-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.portal-btn--primary {
    background: var(--niq-accent);
}

.portal-btn--primary:hover {
    background: var(--niq-accent-hover);
}

.portal-btn--ghost {
    background: var(--niq-white);
    border-color: var(--niq-line);
    color: var(--niq-ink);
}

.portal-btn--ghost:hover {
    background: var(--niq-paper);
    border-color: var(--niq-slate);
    color: var(--niq-ink);
}

.portal-btn--danger {
    background: var(--niq-white);
    border-color: #e3bfbd;
    color: #9c2320;
}

.portal-btn--danger:hover {
    background: #fdeaea;
    border-color: #c98f8c;
    color: #7d1b19;
}

.portal-btn--sm {
    padding: 0.32rem 0.65rem;
    font-size: 0.78rem;
}

.portal-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.portal-btn-row--end {
    justify-content: flex-end;
}

/* ---------- Forms ---------- */

.portal-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.portal-field > label,
.portal-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--niq-slate);
}

.portal-field__hint {
    font-size: 0.75rem;
    color: var(--niq-muted);
}

.portal-field input[type="text"],
.portal-field input[type="email"],
.portal-field input[type="password"],
.portal-field input[type="search"],
.portal-field input[type="number"],
.portal-field input[type="tel"],
.portal-field input[type="date"],
.portal-field input[type="time"],
.portal-field select,
.portal-field textarea,
.portal-input {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--niq-line);
    border-radius: var(--portal-radius-sm);
    background: var(--niq-white);
    color: var(--niq-ink);
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.35;
}

.portal-field textarea {
    min-height: 5rem;
    resize: vertical;
}

.portal-field input:focus-visible,
.portal-field select:focus-visible,
.portal-field textarea:focus-visible,
.portal-input:focus-visible {
    outline: 2px solid var(--niq-accent);
    outline-offset: 1px;
    border-color: var(--niq-accent);
}

.portal-field--check {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.portal-field--check label {
    font-weight: 500;
    color: var(--niq-ink);
}

.portal-field--check input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--niq-accent);
}

.portal-form-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.portal-form-grid--wide {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.portal-span-2 {
    grid-column: span 2;
}

@media (max-width: 36rem) {
    .portal-span-2 {
        grid-column: span 1;
    }
}

.portal-fieldset {
    margin: 0 0 1rem;
    padding: 1rem;
    border: 1px solid var(--niq-line);
    border-radius: var(--portal-radius);
    background: var(--niq-white);
}

.portal-fieldset > legend {
    padding: 0 0.4rem;
    font-family: var(--niq-font-display);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.portal-validation {
    color: #9c2320;
    font-size: 0.78rem;
}

/* ---------- Filters ---------- */

.portal-filters {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    align-items: end;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--niq-line);
}

.portal-quick-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid var(--niq-line);
    background: var(--niq-paper);
}

.portal-quick-filter {
    padding: 0.28rem 0.7rem;
    border: 1px solid var(--niq-line);
    border-radius: 999px;
    background: var(--niq-white);
    color: var(--niq-slate);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.portal-quick-filter:hover {
    border-color: var(--niq-slate);
    color: var(--niq-ink);
}

.portal-quick-filter--active {
    background: var(--niq-ink);
    border-color: var(--niq-ink);
    color: var(--niq-white);
}

.portal-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.15rem;
    border-top: 1px solid var(--niq-line);
    font-size: 0.82rem;
    color: var(--niq-slate);
}

/* ---------- Banners ---------- */

.portal-alert {
    display: flex;
    gap: 0.7rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--niq-line);
    border-left-width: 3px;
    border-radius: var(--portal-radius-sm);
    background: var(--niq-white);
    font-size: 0.875rem;
    color: var(--niq-ink);
}

.portal-alert__body {
    flex: 1 1 auto;
    min-width: 0;
}

.portal-alert__title {
    margin: 0 0 0.2rem;
    font-weight: 700;
}

.portal-alert ul {
    margin: 0.35rem 0 0;
    padding-left: 1.1rem;
}

.portal-alert--info {
    border-left-color: #1d4f91;
    background: #f3f7fd;
}

.portal-alert--success {
    border-left-color: #2f6f4f;
    background: #f1f8f3;
}

.portal-alert--warning {
    border-left-color: #b8871c;
    background: #fdf8ec;
}

.portal-alert--error {
    border-left-color: #9c2320;
    background: #fdf3f2;
}

.portal-alert__dismiss {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--niq-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.portal-alert__dismiss:hover {
    color: var(--niq-ink);
}

/* ---------- Empty state ---------- */

.portal-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--niq-slate);
}

.portal-empty__icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--niq-paper-warm);
    color: var(--niq-slate);
    font-size: 1.1rem;
}

.portal-empty__title {
    margin: 0;
    font-family: var(--niq-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--niq-ink);
}

.portal-empty p {
    margin: 0;
    max-width: 30rem;
    font-size: 0.875rem;
}

/* ---------- Wizard ---------- */

.portal-wizard-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
    counter-reset: wizard;
}

.portal-wizard-steps li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 8rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--niq-line);
    border-radius: var(--portal-radius-sm);
    background: var(--niq-white);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--niq-muted);
}

.portal-wizard-steps li::before {
    counter-increment: wizard;
    content: counter(wizard);
    display: grid;
    place-items: center;
    flex: 0 0 1.35rem;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--niq-paper-warm);
    color: var(--niq-slate);
    font-size: 0.7rem;
}

.portal-wizard-steps li.is-complete {
    color: var(--niq-ink);
}

.portal-wizard-steps li.is-complete::before {
    content: "\2713";
    background: #2f6f4f;
    color: var(--niq-white);
}

.portal-wizard-steps li.is-current {
    border-color: var(--niq-ink);
    color: var(--niq-ink);
    box-shadow: inset 0 -2px 0 var(--niq-accent);
}

.portal-wizard-steps li.is-current::before {
    background: var(--niq-accent);
    color: var(--niq-white);
}

.portal-wizard-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--niq-line);
}

/* ---------- Review / detail lists ---------- */

.portal-dl {
    display: grid;
    gap: 0.75rem 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    margin: 0;
}

.portal-dl > div {
    min-width: 0;
}

.portal-dl dt {
    margin: 0 0 0.15rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--niq-muted);
}

.portal-dl dd {
    margin: 0;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

/* ---------- Route / stops ---------- */

.portal-route {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.portal-route__stop {
    position: relative;
    padding: 0 0 1.1rem 1.6rem;
    border-left: 2px solid var(--niq-line);
}

.portal-route__stop:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
}

.portal-route__stop::before {
    content: "";
    position: absolute;
    left: -0.41rem;
    top: 0.3rem;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--niq-white);
    border: 2px solid var(--niq-slate);
}

.portal-route__stop--pickup::before {
    border-color: var(--niq-accent);
}

.portal-route__stop--delivery::before {
    background: var(--niq-ink);
    border-color: var(--niq-ink);
}

.portal-route__kind {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--niq-muted);
}

.portal-route__name {
    margin: 0.1rem 0 0.15rem;
    font-weight: 600;
}

.portal-route__detail {
    margin: 0;
    font-size: 0.84rem;
    color: var(--niq-slate);
}

/* ---------- Timeline ---------- */

.portal-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.portal-timeline li {
    position: relative;
    padding: 0 0 1rem 1.5rem;
    border-left: 2px solid var(--niq-line);
}

.portal-timeline li:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
}

.portal-timeline li::before {
    content: "";
    position: absolute;
    left: -0.3rem;
    top: 0.35rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--niq-slate);
}

.portal-timeline__type {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--niq-muted);
}

.portal-timeline__text {
    margin: 0.15rem 0;
    font-size: 0.875rem;
}

.portal-timeline__meta {
    font-size: 0.75rem;
    color: var(--niq-muted);
}

/* ---------- Upcoming schedule ---------- */

.portal-schedule {
    margin: 0;
    padding: 0;
    list-style: none;
}

.portal-schedule__group {
    margin: 0 0 0.9rem;
}

.portal-schedule__group:last-child {
    margin-bottom: 0;
}

.portal-schedule__group-label {
    margin: 0 0 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--niq-muted);
}

.portal-schedule__item {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--niq-line);
}

.portal-schedule__item:last-child {
    border-bottom: 0;
}

.portal-schedule__when {
    flex: 0 0 6.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--niq-slate);
    font-variant-numeric: tabular-nums;
}

.portal-schedule__what {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.86rem;
}

.portal-schedule__what a {
    font-weight: 600;
    text-decoration: none;
    color: var(--niq-ink);
}

.portal-schedule__what a:hover {
    color: var(--niq-accent);
}

/* ---------- Attention list ---------- */

.portal-attention {
    margin: 0;
    padding: 0;
    list-style: none;
}

.portal-attention li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    align-items: center;
    padding: 0.75rem 1.15rem;
    border-bottom: 1px solid var(--niq-line);
}

.portal-attention li:last-child {
    border-bottom: 0;
}

.portal-attention__body {
    flex: 1 1 16rem;
    min-width: 0;
}

.portal-attention__title {
    display: block;
    font-weight: 600;
    text-decoration: none;
    color: var(--niq-ink);
}

.portal-attention__title:hover {
    color: var(--niq-accent);
}

.portal-attention__reason {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--niq-slate);
}

/* ---------- Documents ---------- */

.portal-doc-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.portal-doc-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--niq-line);
}

.portal-doc-list li:last-child {
    border-bottom: 0;
}

.portal-doc-list__name {
    flex: 1 1 14rem;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--niq-ink);
    overflow-wrap: anywhere;
}

.portal-doc-list__name:hover {
    color: var(--niq-accent);
}

.portal-upload {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    align-items: end;
    padding: 0.9rem;
    border: 1px dashed var(--niq-line);
    border-radius: var(--portal-radius-sm);
    background: var(--niq-paper);
}

.portal-upload input[type="file"] {
    font-size: 0.82rem;
}

/* ---------- Auth pages ---------- */

.portal-auth {
    display: flex;
    min-height: 100vh;
    min-height: 100svh;
    background: var(--niq-ink);
    color: var(--niq-white);
    font-family: var(--niq-font-body);
}

.portal-auth__aside {
    flex: 1 1 50%;
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding: clamp(2rem, 6vw, 5rem);
    background:
        radial-gradient(circle at 20% 20%, rgba(214, 69, 46, 0.22), transparent 55%),
        var(--niq-ink);
}

@media (min-width: 60rem) {
    .portal-auth__aside {
        display: flex;
    }
}

.portal-auth__aside h2 {
    margin: 0;
    font-family: var(--niq-font-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.portal-auth__aside p {
    margin: 0;
    max-width: 30rem;
    color: rgba(255, 255, 255, 0.72);
}

.portal-auth__aside ul {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9rem;
}

.portal-auth__panel {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 5vw, 3rem);
    background: var(--niq-paper);
    color: var(--niq-ink);
}

.portal-auth__card {
    width: min(100%, 25rem);
    padding: clamp(1.5rem, 4vw, 2.25rem);
    background: var(--niq-white);
    border: 1px solid var(--niq-line);
    border-radius: var(--portal-radius);
    box-shadow: var(--portal-shadow);
}

.portal-auth__brand {
    display: block;
    margin-bottom: 1.25rem;
    font-family: var(--niq-font-display);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--niq-ink);
    text-decoration: none;
}

.portal-auth__brand em {
    font-style: normal;
    color: var(--niq-accent);
}

.portal-auth__card h1 {
    margin: 0 0 0.35rem;
    font-family: var(--niq-font-display);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.portal-auth__card > p {
    margin: 0 0 1.25rem;
    font-size: 0.9rem;
    color: var(--niq-slate);
}

.portal-auth__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.portal-auth__footer {
    margin: 1.25rem 0 0;
    font-size: 0.8rem;
    color: var(--niq-muted);
}

.portal-auth__footer a {
    color: var(--niq-accent);
}

.portal-demo-hint {
    margin-top: 1rem;
    padding: 0.7rem 0.85rem;
    border: 1px dashed var(--niq-line);
    border-radius: var(--portal-radius-sm);
    background: var(--niq-paper);
    font-size: 0.78rem;
    color: var(--niq-slate);
}

.portal-demo-hint code {
    font-size: 0.78rem;
    color: var(--niq-ink);
}

/* ---------- Load tracking map ---------- */

.portal-tracking-map__viewport {
    position: relative;
    isolation: isolate;
}

.portal-tracking-map__canvas {
    height: clamp(20rem, 48vh, 30rem);
    min-width: 0;
    width: 100%;
    z-index: 0;
    background: var(--niq-paper);
    font-family: var(--niq-font-body);
}

.portal-tracking-map__notice {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: var(--niq-paper);
    color: var(--niq-slate);
    text-align: center;
    font-size: 0.9rem;
}

.portal-tracking-map__footer {
    padding: 0.8rem 1.25rem;
    border-top: 1px solid var(--niq-line);
    font-size: 0.8rem;
    color: var(--niq-muted);
}

@media (max-width: 40rem) {
    .portal-tracking-map .portal-card__header {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ---------- Responsive shell ---------- */

@media (max-width: 64rem) {
    .portal {
        flex-direction: column;
    }

    .portal-sidebar {
        flex: 0 0 auto;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem 1.25rem;
        padding: 0.9rem 1rem;
    }

    .portal-sidebar__brand {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .portal-sidebar__org {
        margin-left: auto;
    }

    .portal-nav {
        flex: 1 1 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .portal-nav__group-label {
        display: none;
    }

    .portal-nav a.active {
        box-shadow: inset 0 -2px 0 var(--niq-accent);
    }

    .portal-sidebar__footer {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        padding-top: 0;
        border-top: 0;
    }
}

@media print {
    .portal-sidebar,
    .portal-topbar,
    .portal-page-header__actions,
    .portal-btn-row {
        display: none !important;
    }

    .portal {
        display: block;
    }
}

/* Master administration: scoped to the company workspace and master shell. */
.portal-icon { width: 1.15rem; height: 1.15rem; flex: 0 0 1.15rem; display: inline-block; vertical-align: middle; }
:is(.portal--master, .portal--customer) { --niq-ink: #0e2030; --niq-muted: #63758a; --niq-line: #e5eaf0; --portal-sidebar-w: 16rem; }
:is(.portal--master, .portal--customer) .portal-sidebar { background: linear-gradient(155deg,#101e29,#0b1822); gap: 1.25rem; padding: 1.25rem 1rem; }
.admin-brand-logo { width: 9.3rem; height: auto; }
:is(.portal--master, .portal--customer) .portal-sidebar__brand { padding-bottom: 1.2rem; position: relative; }
:is(.portal--master, .portal--customer) .portal-sidebar__brand::after { content: ''; width: 3.5rem; height: 2px; background: var(--niq-accent); position: absolute; bottom: -1px; left: 1rem; }
:is(.portal--master, .portal--customer) .portal-sidebar__brand-sub { color: #adb8c4; margin-top: .3rem; }
:is(.portal--master, .portal--customer) .portal-sidebar__org { padding: 0 0 1rem; border-bottom: 1px solid #ffffff14; }
:is(.portal--master, .portal--customer) .portal-sidebar__org-name { font-size: .8rem; }
:is(.portal--master, .portal--customer) .portal-sidebar__user { color: #a6b3c0; margin-top: .25rem; }
:is(.portal--master, .portal--customer) .portal-nav a { padding: .8rem .7rem; font-size: .8rem; gap: .8rem; }
:is(.portal--master, .portal--customer) .portal-nav a.active .portal-icon { color: #ee624c; }
:is(.portal--master, .portal--customer) .portal-topbar { min-height: 3.5rem; padding-top: .55rem; padding-bottom: .55rem; }
:is(.portal--master, .portal--customer) .portal-content { max-width: 94rem; padding: 1.5rem; }
.admin-breadcrumb { display: flex; gap: .7rem; align-items: center; font-size: .75rem; }
.admin-breadcrumb a { color: #485e78; text-decoration: none; }
.admin-profile { display: flex; align-items: center; gap: .5rem; font-size: .7rem; line-height: 1.4; }
.admin-profile small { display: block; color: #576b82; font-size: .64rem; }
:is(.portal--master, .portal--customer) .portal-sidebar__footer { border: 0; }
:is(.portal--master, .portal--customer) .admin-site-preview { display: grid; grid-template-columns: 1fr auto; border: 1px solid #ffffff12; border-radius: .6rem; overflow: hidden; padding-bottom: .6rem; }
.admin-site-preview > img { width: 100%; height: 5rem; object-fit: cover; grid-column: 1/-1; margin-bottom: .6rem; }
.admin-site-preview > span { padding-left: .7rem; }
.admin-site-preview strong { color: #eef4fa; font-size: .75rem; display: block; }
.admin-site-preview small { display: block; color: #acbac8; font-size: .7rem; }
.admin-site-preview > .portal-icon { align-self: center; margin-right: .7rem; }
.admin-companies { color: #152a40; }
.admin-companies .portal-page-header { align-items: center; margin-bottom: 1.5rem; }
.admin-companies .portal-page-header h1 { font-family: var(--niq-font-body); font-size: 2.15rem; font-weight: 750; letter-spacing: -.055rem; }
.admin-companies .portal-page-header__eyebrow { font-size: .7rem; letter-spacing: .16em; color: #4e627b; margin-bottom: .3rem; }
.admin-companies .portal-page-header p:not(.portal-page-header__eyebrow) { font-size: .85rem; }
.admin-companies .portal-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-size: .75rem; min-height: 2.4rem; border-radius: .5rem; padding: .55rem .85rem; white-space: nowrap; line-height: 1.3; }
.admin-companies .portal-page-header .portal-btn { padding: .7rem 1.3rem; }
.admin-companies .portal-btn--primary { background: var(--niq-accent); color: white; border-color: var(--niq-accent); }
.admin-companies .portal-btn--primary:hover { background: var(--niq-accent-hover); }
.admin-companies button:disabled { opacity: .6; cursor: wait; }
.admin-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.admin-metric { display: flex; align-items: flex-start; gap: 1rem; padding: 1.2rem; border-radius: .8rem; border: 1px solid #fff; background: linear-gradient(115deg,#edf5ff,#f7faff); box-shadow: 0 2px 10px #132a4510; min-width: 0; }
.admin-metric h2 { margin: 0; font-size: .78rem; line-height: 1.5; font-family: var(--niq-font-body); font-weight: 600; }
.admin-metric strong { display: block; font-size: 1.85rem; line-height: 1.2; color: #0c1e30; font-weight: 750; font-variant-numeric: tabular-nums; }
.admin-metric p { margin: .35rem 0 0; color: #506880; font-size: .68rem; line-height: 1.4; }
.admin-metric--green { background: linear-gradient(115deg,#eff9f5,#f8fcfa); }
.admin-metric--purple { background: linear-gradient(115deg,#f5f1ff,#fbf9ff); }
.admin-metric--red { background: linear-gradient(115deg,#fff3f2,#fffafa); }
.admin-icon-disc { display: inline-flex; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; flex: 0 0 2.9rem; border-radius: 50%; color: #1260d8; background: #deedff; }
.admin-icon-disc .portal-icon { width: 1.45rem; height: 1.45rem; }
.admin-metric--green .admin-icon-disc { background: #d6f1e7; color: #008675; }
.admin-metric--purple .admin-icon-disc { background: #ebe2ff; color: #7031d9; }
.admin-metric--red .admin-icon-disc, .admin-icon-disc--red { background: #fde8e4; color: #d23b28; }
.admin-card { background: #fff; border: 1px solid #e9edf2; border-radius: .85rem; box-shadow: 0 2px 9px #122c4810; margin-bottom: 1rem; padding: 1.2rem; }
.admin-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.admin-section-title { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.admin-section-title h2 { margin: 0; font-family: var(--niq-font-body); font-weight: 700; letter-spacing: -.025rem; font-size: 1.1rem; line-height: 1.35; }
.admin-section-title p { margin: .15rem 0 0; font-size: .78rem; color: #50647e; line-height: 1.45; }
.admin-companies .admin-btn-subtle { background: #f1f4f7; border: 1px solid transparent; color: #20364f; }
.admin-companies .admin-btn-subtle:hover { background: #e5ebf2; border-color: #d9e1ea; }
.admin-create-fields { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 1rem; padding: 0; margin: 0; border: 0; align-items: start; min-width: 0; }
.admin-create-fields .portal-field { margin: 0; min-width: 0; }
.admin-create-fields label { font-size: .73rem; font-weight: 650; display: block; margin-bottom: .35rem; }
.admin-required { color: #c23523; }
.admin-optional { font-weight: 400; }
.admin-create-submit { margin-top: 1.85rem; min-width: 10rem; }
.admin-input-icon { position: relative; min-width: 0; }
.admin-input-icon > .portal-icon { position: absolute; left: .7rem; top: .68rem; width: 1rem; height: 1rem; pointer-events: none; color: #6d819b; }
.admin-companies .admin-input-icon input { display: block; height: 2.4rem; width: 100%; padding: .55rem .65rem .55rem 2.2rem; background: #fcfdff; border: 1px solid #d6deea; border-radius: .45rem; font: inherit; font-size: .75rem; color: #152a40; box-shadow: inset 0 1px 2px #122c4803; }
.admin-companies input::placeholder { color: #718199; opacity: 1; }
.admin-companies input:focus, .admin-companies select:focus { border-color: #6086b4; outline: 2px solid #b9d4f0; outline-offset: 1px; }
.admin-companies .validation-message { color: #af2c21; font-size: .7rem; padding-top: .25rem; }
.admin-companies input.invalid { border-color: #c54032; }
.admin-filters { display: flex; gap: .7rem; align-items: center; }
.admin-filters .admin-input-icon { width: 14.5rem; }
.admin-status-filter { display: flex; align-items: center; gap: .5rem; }
.admin-status-filter > .portal-icon { color: #51657e; width: 1rem; }
.admin-status-filter select { height: 2.4rem; border: 1px solid #d6deea; border-radius: .45rem; background: #fcfdff; color: #243950; font: inherit; font-size: .72rem; padding: .4rem 1.8rem .4rem .7rem; }
.admin-company-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .74rem; text-align: left; }
.admin-company-table th { background: #f5f7fa; color: #526882; font-size: .63rem; font-weight: 600; text-transform: uppercase; padding: .5rem .45rem; }
.admin-company-table th:nth-child(1) { width: 22%; }
.admin-company-table th:nth-child(2) { width: 18%; }
.admin-company-table th:nth-child(3) { width: 10%; }
.admin-company-table th:nth-child(4) { width: 7%; }
.admin-company-table th:nth-child(5) { width: 11%; }
.admin-company-table th:nth-child(6) { width: 13%; }
.admin-company-table th:nth-child(7) { width: 19%; }
.admin-company-table td { border-bottom: 1px solid #eaf0f5; padding: .55rem .45rem; vertical-align: middle; overflow-wrap: anywhere; line-height: 1.5; }
.admin-company-table tbody tr:hover { background: #f8fafd; }
.admin-company-name { display: flex; gap: .7rem; align-items: center; }
.admin-company-name strong { font-size: .76rem; font-weight: 650; }
.company-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: 50%; background: #143249; color: white; font-size: .72rem; font-weight: 650; box-shadow: inset 0 0 0 3px #ffffff12; }
.company-avatar--1 { background: #145bbc; }.company-avatar--2 { background: #087a70; }.company-avatar--3 { background: #783bc0; }.company-avatar--4 { background: #a94e13; }
.admin-user-count { display: inline-flex; align-items: center; gap: .4rem; font-variant-numeric: tabular-nums; }
.admin-user-count .portal-icon { color: #2462d4; width: .95rem; height: .95rem; }
.admin-number { text-align: center; }
.admin-status { display: inline-flex; gap: .35rem; align-items: center; border-radius: 2rem; font-size: .7rem; line-height: 1.5; padding: .15rem .55rem; white-space: nowrap; }
.admin-status > span { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.admin-status--active { color: #087b2e; background: #e3f7e9; }.admin-status--inactive { color: #b62d26; background: #fce9e7; }
.admin-company-table time { font-variant-numeric: tabular-nums; }
.admin-company-table time small { display: block; color: #6b7c92; font-size: .67rem; }
.admin-row-actions { display: flex; gap: .4rem; align-items: center; }
.admin-row-actions .portal-btn { min-height: 2.05rem; padding: .4rem .6rem; font-size: .68rem; gap: .35rem; }
.admin-row-actions .portal-icon { width: .9rem; height: .9rem; flex-basis: .9rem; }
.admin-overflow { position: relative; }
.admin-companies .admin-more { color: #314b66; min-width: 2rem; font-size: 1rem; background: #fff; border: 1px solid #dce3ec; }
.admin-overflow-panel { position: absolute; right: 0; bottom: calc(100% + .25rem); min-width: 11rem; padding: .35rem; background: white; border: 1px solid #dce3ec; box-shadow: 0 6px 20px #102c4526; border-radius: .45rem; z-index: 5; }
.admin-overflow-panel button { font: inherit; width: 100%; padding: .55rem; border: 0; border-radius: .3rem; background: white; color: #243950; text-align: left; cursor: pointer; }
.admin-overflow-panel button:hover { background: #f1f4f8; }
.admin-table-footer { padding-top: .9rem; color: #697b91; font-size: .7rem; }
.admin-empty { text-align: center; padding: 2rem 1rem; }
.admin-empty .admin-icon-disc { margin-bottom: .8rem; }
.admin-empty h3 { margin: 0 0 .4rem; font-size: 1.1rem; }
.admin-empty p { margin: 0 auto 1.1rem; max-width: 34rem; font-size: .85rem; color: #62758c; }
.admin-toast { position: fixed; right: 1.5rem; top: 4.5rem; width: min(28rem,calc(100vw - 3rem)); z-index: 20; filter: drop-shadow(0 6px 15px #16304620); }
.admin-toast .portal-alert { margin: 0; }
.admin-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.admin-skeleton { border-radius: .8rem; background: linear-gradient(100deg,#e5ebf1 30%,#f8faff 50%,#e5ebf1 70%); background-size: 200% 100%; animation: admin-shimmer 1.4s linear infinite; }
.admin-skeleton--metric { height: 7rem; }.admin-skeleton--form { height: 10rem; margin-bottom: 1rem; }.admin-skeleton--table { height: 18rem; }
.admin-spinner { width: .9rem; height: .9rem; border: 2px solid #ffffff70; border-top-color: white; border-radius: 50%; animation: admin-spin .7s linear infinite; }
@keyframes admin-shimmer { to { background-position: -200% 0; } } @keyframes admin-spin { to { transform: rotate(360deg); } }
@media (min-width: 901px) { :is(.portal--master, .portal--customer) .portal-sidebar { position: sticky; top: 0; height: 100svh; } }
@media (max-width: 1450px) {
    :is(.portal--master, .portal--customer) { --portal-sidebar-w: 14rem; }
    .admin-card-heading { flex-wrap: wrap; }
    .admin-filters { margin-left: auto; }
    .admin-company-table th:nth-child(1) { width: 22%; }.admin-company-table th:nth-child(2) { width: 17%; }.admin-company-table th:nth-child(5) { width: 10%; }.admin-company-table th:nth-child(6) { width: 14%; }.admin-company-table th:nth-child(7) { width: 20%; }
    .admin-metric { gap: .65rem; padding: 1rem .8rem; }
}
@media (max-width: 1150px) {
    .admin-create-fields { grid-template-columns: 1fr 1fr 1fr; }
    .admin-create-submit { grid-column: 3; justify-self: end; margin-top: 0; }
    .admin-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .admin-company-table th:nth-child(2), .admin-company-table td:nth-child(2) { display: none; }
    .admin-company-table th:nth-child(1) { width: 27%; }.admin-company-table th:nth-child(3) { width: 12%; }.admin-company-table th:nth-child(4) { width: 8%; }.admin-company-table th:nth-child(5) { width: 14%; }.admin-company-table th:nth-child(6) { width: 17%; }.admin-company-table th:nth-child(7) { width: 22%; }
}
@media (max-width: 900px) {
    :is(.portal--master, .portal--customer) .portal-sidebar { width: 100%; flex-basis: auto; gap: .7rem; }
    :is(.portal--master, .portal--customer) .portal-sidebar__brand { border: 0; padding-bottom: 0; }
    :is(.portal--master, .portal--customer) .portal-sidebar__brand::after, :is(.portal--master, .portal--customer) .portal-sidebar__org { display: none; }
    :is(.portal--master, .portal--customer) .admin-site-preview { display: flex; gap: .5rem; align-items: center; padding: 0; border: 0; }
    :is(.portal--master, .portal--customer) .admin-site-preview > img, :is(.portal--master, .portal--customer) .admin-site-preview small { display: none; }
    :is(.portal--master, .portal--customer) .admin-site-preview > span { padding: 0; }
    :is(.portal--master, .portal--customer) .portal-sidebar__footer { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
    :is(.portal--master, .portal--customer) .portal-sidebar__footer { padding-top: 0; }
    :is(.portal--master, .portal--customer) .portal-nav { flex-direction: row; }
    :is(.portal--master, .portal--customer) { flex-direction: column; }
    :is(.portal--master, .portal--customer) .portal-content { padding: 1rem; }
    .admin-profile { display: none; }
}
@media (max-width: 620px) {
    .admin-companies .portal-page-header h1 { font-size: 1.8rem; }
    .admin-metrics { gap: .6rem; }.admin-metric { flex-direction: column; gap: .5rem; }.admin-metric .admin-icon-disc { width: 2.25rem; height: 2.25rem; flex-basis: 2.25rem; }
    .admin-card { padding: 1rem; }.admin-section-title .admin-icon-disc { display: none; }
    .admin-create-fields { grid-template-columns: 1fr; }.admin-create-submit { grid-column: auto; justify-self: stretch; }
    .admin-filters { flex-wrap: wrap; width: 100%; }.admin-filters .admin-input-icon { width: 100%; }.admin-status-filter { width: 100%; }.admin-status-filter select { flex: 1; }
    .admin-company-table, .admin-company-table tbody, .admin-company-table tr, .admin-company-table td { display: block; width: 100%; }
    .admin-company-table thead { display: none; }.admin-company-table tr { border: 1px solid #e1e7ee; border-radius: .6rem; margin-bottom: .75rem; padding: .6rem; }
    .admin-company-table td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: right; padding: .4rem 0; border: 0; }
    .admin-company-table td::before { content: attr(data-label); color: #63768d; font-size: .7rem; text-align: left; flex: 0 0 4rem; }
    .admin-company-table td:first-child { border-bottom: 1px solid #eaf0f5; padding-bottom: .65rem; margin-bottom: .4rem; text-align: left; }.admin-company-table td:first-child::before { display: none; }
    .admin-company-table td:nth-child(2) { display: flex; }.admin-company-table td > :not(:first-child) { min-width: 0; }
    .admin-row-actions { justify-content: flex-end; }.admin-company-table time small { display: inline; margin-left: .3rem; }
}
@media (prefers-reduced-motion: reduce) { .admin-skeleton, .admin-spinner { animation: none; } }


/* Email verification remains static SSR; these styles are isolated from other auth pages. */
.portal-verify { min-height: 100svh; display: grid; place-items: center; padding: clamp(1rem,4vw,3rem); background: radial-gradient(ellipse at 25% 20%,#fff 0,#f5f8fb 55%,#edf2f7 100%); color: #112338; }
.portal-verify__card { width: min(100%,31rem); padding: clamp(1.4rem,4vw,2.5rem); border: 1px solid #e4eaf1; border-radius: 1.1rem; background: #fff; box-shadow: 0 16px 48px #1b3c6010,0 2px 5px #203c6010; }
.portal-verify__brand { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; text-decoration: none; color: #102238; font-size: 1rem; font-weight: 700; margin-bottom: 1.9rem; }
.portal-verify__brand img { width: 8.5rem; height: auto; }
.portal-verify__brand span { padding-left: .7rem; border-left: 1px solid #dce4ed; }
.portal-verify__symbol { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; position: relative; border-radius: 50%; background: #fcebe7; margin-bottom: 1rem; }
.portal-verify__symbol > .portal-icon { width: 1.8rem; height: 1.8rem; }
.portal-verify__symbol > span { position: absolute; bottom: -.05rem; right: -.05rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 3px solid white; border-radius: 50%; color: white; background: var(--niq-accent); }
.portal-verify__symbol > span .portal-icon { width: .9rem; height: .9rem; }
.portal-verify h1 { margin: 0 0 .65rem; font-family: var(--niq-font-body); font-size: clamp(1.8rem,3.5vw,2.25rem); letter-spacing: -.06rem; line-height: 1.2; font-weight: 750; }
.portal-verify__intro { color: #526680; font-size: .95rem; line-height: 1.65; margin: 0 0 1.6rem; }
.portal-verify__label { display: block; font-size: .86rem; font-weight: 650; margin-bottom: .6rem; }
.portal-otp { position: relative; margin-bottom: .5rem; height: 3.65rem; }
.portal-otp input { width: 100%; height: 100%; padding: .5rem 1rem; border: 1px solid #c9d5e3; border-radius: .55rem; background: #fff; font: 650 1.8rem monospace; letter-spacing: .55rem; color: #12273e; }
.portal-otp__digits { display: none; }
.portal-otp.is-enhanced input { position: absolute; inset: 0; opacity: 1; color: transparent; caret-color: transparent; background: transparent; border: 0; letter-spacing: 0; -webkit-text-fill-color: transparent; z-index: 1; }
.portal-otp.is-enhanced input:focus { outline: none; }
.portal-otp.is-enhanced .portal-otp__digits { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: .55rem; height: 100%; pointer-events: none; }
.portal-otp__digits span { display: grid; place-items: center; border: 1px solid #cbd7e5; border-radius: .55rem; background: linear-gradient(#fff,#fbfcfe); box-shadow: 0 2px 4px #12273e07; font-size: 1.8rem; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }
.portal-otp__digits span.is-current { border-color: var(--niq-accent); outline: 3px solid #d6452e24; outline-offset: 1px; }
.portal-otp:has(input[aria-invalid="true"]) .portal-otp__digits span, .portal-otp:has(input.invalid) .portal-otp__digits span { border-color: #c14437; }
.portal-verify .validation-message { font-size: .8rem; color: #aa2b21; margin: .45rem 0; }
.portal-verify__button { display: flex; align-items: center; justify-content: center; gap: .7rem; width: 100%; min-height: 3rem; padding: .75rem 1rem; border-radius: .55rem; font: 650 .94rem var(--niq-font-body); cursor: pointer; transition: background .15s ease,box-shadow .15s ease; }
.portal-verify__button--primary { margin-top: 1.2rem; border: 1px solid var(--niq-accent); color: white; background: var(--niq-accent); box-shadow: 0 4px 10px #d6452e14; }
.portal-verify__button--primary:hover { background: var(--niq-accent-hover); }
.portal-verify__resend { margin-top: .7rem; }
.portal-verify__button--secondary { border: 1px solid #cbd6e3; background: white; color: #152b43; }
.portal-verify__button--secondary:hover { background: #f4f7fa; }
.portal-verify__button:disabled { opacity: .7; cursor: wait; }
.portal-verify__help { margin: .9rem 0 0; text-align: center; color: #5a6e87; font-size: .77rem; line-height: 1.65; }
.portal-verify__footer { border-top: 1px solid #e0e7ef; padding-top: 1.1rem; margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: center; justify-content: center; font-size: .8rem; }
.portal-verify__footer > span { color: #62758c; }
.portal-verify__footer a { color: #214e7d; text-underline-offset: 3px; font-weight: 600; }
.portal-verify__spinner { display: none; width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: admin-spin .75s linear infinite; }
.portal-verify__button.is-submitting .portal-verify__spinner { display: inline-block; }
.portal-verify__button.is-submitting > .portal-icon { display: none; }
.portal-verify .portal-alert { font-size: .8rem; margin: 0 0 1rem; }
@media (max-width: 420px) { .portal-verify { padding: .8rem; }.portal-verify__card { padding: 1.3rem; }.portal-verify__brand { gap: .5rem; font-size: .85rem; }.portal-verify__brand img { width: 7.5rem; }.portal-otp { height: 3.2rem; }.portal-otp.is-enhanced .portal-otp__digits { gap: .35rem; }.portal-otp__digits span { font-size: 1.55rem; } }
@media (prefers-reduced-motion: reduce) { .portal-verify__spinner { animation: none; } }


/* Customer dashboard: real shipment data with compact operational panels. */
.portal--customer .portal-topbar__meta { flex: 1; min-width: 0; }
.portal-global-search { display: flex; align-items: center; gap: .65rem; width: min(100%,32rem); border: 1px solid #dce4ed; border-radius: .5rem; background: #f8fafc; padding: .35rem .65rem; }
.portal-global-search > .portal-icon { color: #506983; }
.portal-global-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: #1c344e; font: inherit; font-size: .75rem; padding: .2rem 0; }
.portal-global-search button { display: grid; place-items: center; border: 0; background: transparent; color: #516c87; padding: .3rem; cursor: pointer; border-radius: .25rem; }
.portal-global-search:focus-within { outline: 2px solid #c3d8ef; outline-offset: 1px; }
.customer-dashboard { color: #12273c; }
.dashboard-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem; margin: -1.5rem -1.5rem 0; min-height: 8.3rem; background: linear-gradient(90deg,#f1f5f9 20%,#f1f5f9f2 55%,#f1f5f9ba),url('/images/hero-freight.svg') right center/cover; }
.dashboard-eyebrow { font-size: .65rem !important; letter-spacing: .12em; text-transform: uppercase; color: #596d84; margin: 0 0 .3rem !important; }
.dashboard-hero h1 { font: 750 clamp(1.7rem,2.5vw,2.15rem)/1.2 var(--niq-font-body); letter-spacing: -.055rem; margin: 0; }
.dashboard-hero p { margin: .3rem 0 0; font-size: .9rem; }
.customer-dashboard .portal-btn { font-size: .73rem; padding: .65rem .85rem; border-radius: .45rem; gap: .5rem; }
.customer-dashboard .portal-btn--ghost { color: #253c54; border-color: #dfe6ef; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .7rem; margin-bottom: 1rem; }
.customer-dashboard .dashboard-metric { display: flex; align-items: flex-start; gap: .8rem; border: 1px solid #e1e8f0; background: #fff; padding: .95rem .85rem; border-radius: .6rem; box-shadow: 0 2px 5px #17345106; min-width: 0; text-decoration: none; transition: box-shadow .15s ease,transform .15s ease; }
.customer-dashboard a.dashboard-metric:hover { box-shadow: 0 5px 15px #16375712; transform: translateY(-2px); }
.dashboard-metric__icon { display: grid; place-items: center; flex: 0 0 2.55rem; height: 2.55rem; border-radius: 50%; color: #0869da; background: #eef6ff; }
.dashboard-metric__icon .portal-icon { width: 1.25rem; height: 1.25rem; }
.dashboard-metric--accent .dashboard-metric__icon { background: #fff5e8; color: #ad6000; }
.dashboard-metric--alert .dashboard-metric__icon { background: #ffedeb; color: #d3372a; }
.dashboard-metric--calm .dashboard-metric__icon { background: #e6f7ef; color: #078a5c; }
.dashboard-metric--violet .dashboard-metric__icon { background: #f5ecff; color: #803bd0; }
.dashboard-metric__body { display: flex; flex-direction: column; min-width: 0; }
.customer-dashboard .kpi-card__label { text-transform: none; letter-spacing: normal; font-size: .71rem; font-weight: 600; line-height: 1.4; color: #132b43; }
.customer-dashboard .kpi-card__value { font-family: var(--niq-font-body); color: #0e2134; font-size: 1.6rem; line-height: 1.2; font-weight: 750; margin: .1rem 0; font-variant-numeric: tabular-nums; }
.customer-dashboard .kpi-card__hint { font-size: .64rem; line-height: 1.5; color: #5a7089; margin: 0; }
.dashboard-panels { display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: .8rem; align-items: stretch; margin-bottom: .8rem; }
.dashboard-panel { min-width: 0; border: 1px solid #e0e7ef; border-radius: .6rem; background: #fff; box-shadow: 0 2px 6px #122b4205; padding: .85rem; }
.dashboard-panel__header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.dashboard-panel__header h2 { display: flex; align-items: center; gap: .5rem; font-family: var(--niq-font-body); font-size: .94rem; font-weight: 700; letter-spacing: -.015rem; margin: 0; }
.dashboard-panel__header h2 .portal-icon { color: #1069d2; }
#needs-attention .dashboard-panel__header h2 .portal-icon { color: #d13b2b; }
.dashboard-panel__header > a { color: #1262bd; text-decoration: none; font-size: .66rem; white-space: nowrap; }
.dashboard-panel__header > a:hover { text-decoration: underline; }
.dashboard-panel__meta { color: #73849a; font-size: .62rem; }
.dashboard-empty { padding: 1.15rem .5rem; color: #526b84; font-size: .75rem; }
.dashboard-empty__icon { display: inline-grid; place-items: center; background: #f0f5fc; color: #55779b; width: 2.2rem; height: 2.2rem; border-radius: 50%; margin-bottom: .6rem; }
.dashboard-empty--success .dashboard-empty__icon { background: #e6f7ef; color: #088351; }
.dashboard-empty h3 { margin: 0 0 .25rem; color: #243d55; font-size: .86rem; }
.dashboard-empty p { margin: 0; line-height: 1.65; max-width: 30rem; }
.dashboard-empty .portal-btn { margin-top: .85rem; }
.dashboard-attention { list-style: none; padding: 0; margin: 0; max-height: 20rem; overflow-y: auto; }
.dashboard-attention li + li { border-top: 1px solid #e7edf3; }
.dashboard-attention a { display: block; position: relative; padding: .8rem .8rem .8rem 1rem; text-decoration: none; color: #1b334b; }
.dashboard-attention a::before { content: ''; position: absolute; left: 0; top: 1.1rem; width: .4rem; height: .4rem; border-radius: 50%; background: #d6452e; }
.dashboard-attention a:hover { background: #fafbfd; }
.dashboard-attention__top { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .2rem; }
.dashboard-attention strong { font-size: .76rem; overflow-wrap: anywhere; }
.dashboard-issue { color: #b52920; background: #fdecea; font-size: .6rem; padding: .1rem .4rem; border-radius: .35rem; }
.dashboard-attention__lane { font-size: .7rem; display: block; }
.dashboard-attention p { font-size: .7rem; line-height: 1.55; margin: .25rem 0; color: #576f89; }
.dashboard-attention small { color: #637a94; font-size: .65rem; }
.dashboard-chevron { position: absolute; right: 0; top: 1.5rem; color: #5f7791; }
.dashboard-schedule-controls { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .2rem 0 .7rem; }
.dashboard-schedule-controls > span { font-size: .6rem; color: #657b93; }
.dashboard-schedule-controls > div { display: flex; gap: .15rem; padding: .15rem; border-radius: .4rem; background: #f0f3f7; }
.dashboard-schedule-controls button { border: 0; border-radius: .3rem; padding: .3rem .55rem; background: transparent; font: 600 .62rem var(--niq-font-body); color: #586d85; cursor: pointer; }
.dashboard-schedule-controls button[aria-pressed="true"] { color: #174e92; background: #fff; box-shadow: 0 1px 3px #24436612; }
.dashboard-schedule { max-height: 18rem; overflow-y: auto; }
.dashboard-schedule__group { background: #f4f7fa; color: #4a627c; padding: .3rem .4rem; margin: .45rem 0 0; font-size: .66rem; font-weight: 600; }
.dashboard-schedule__group:first-child { margin-top: 0; }
.dashboard-schedule__row { display: grid; grid-template-columns: 3.1rem minmax(0,1fr) auto .4rem; gap: .45rem; align-items: center; padding: .55rem .35rem; border-bottom: 1px solid #edf1f5; color: #314d6c; text-decoration: none; font-size: .68rem; }
.dashboard-schedule__row:hover { background: #f8fbff; }
.dashboard-schedule__time { font-variant-numeric: tabular-nums; font-size: .64rem; }
.dashboard-schedule__time small { display: block; font-size: .62rem; color: #6d8196; }
.dashboard-schedule__detail { min-width: 0; overflow-wrap: anywhere; }
.dashboard-schedule__detail strong { font-size: .68rem; color: #213b56; }
.dashboard-schedule__detail > span, .dashboard-schedule__detail small { display: block; font-size: .62rem; line-height: 1.5; }
.dashboard-schedule__status { display: flex; flex-direction: column; gap: .2rem; align-items: flex-start; }
.customer-dashboard .status-pill, .customer-dashboard .tender-pill { font-size: .6rem; padding: .12rem .4rem; }
.dashboard-activity { list-style: none; margin: 0; padding: .2rem 0 0; max-height: 20rem; overflow-y: auto; }
.dashboard-activity li { display: grid; grid-template-columns: 1.7rem 2.7rem minmax(0,1fr); gap: .6rem; position: relative; padding-bottom: .8rem; }
.dashboard-activity li:not(:last-child)::before { content: ''; position: absolute; left: .8rem; top: 1.65rem; bottom: 0; border-left: 1px solid #e4edf6; }
.dashboard-activity__icon { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #edf6ff; color: #1d6cc3; }
.dashboard-activity__icon .portal-icon { width: .85rem; height: .85rem; }
.dashboard-activity time { color: #536e8a; font-size: .64rem; padding-top: .12rem; }
.dashboard-activity time small { display: block; font-size: .58rem; color: #74869a; }
.dashboard-activity a { font-size: .7rem; line-height: 1.45; text-decoration: none; overflow-wrap: anywhere; padding-top: .1rem; }
.dashboard-activity a strong { display: block; font-weight: 500; color: #1b324a; }
.dashboard-activity a span { display: block; color: #58718c; font-size: .64rem; }
.dashboard-activity a:hover strong { color: #155eac; text-decoration: underline; }
.dashboard-recent { margin-bottom: 1rem; }
.dashboard-recent .dashboard-panel__header { margin-bottom: .8rem; }
.dashboard-table { border-collapse: collapse; width: 100%; table-layout: fixed; text-align: left; font-size: .65rem; }
.dashboard-table th { color: #536d87; background: #f4f7fa; font-size: .55rem; text-transform: uppercase; font-weight: 600; padding: .4rem .35rem; }
.dashboard-table td { color: #3c5672; padding: .5rem .35rem; border-bottom: 1px solid #e9eef5; vertical-align: middle; overflow-wrap: anywhere; }
.dashboard-table th:nth-child(1) { width: 10%; }.dashboard-table th:nth-child(2) { width: 14%; }.dashboard-table th:nth-child(3),.dashboard-table th:nth-child(4) { width: 14%; }.dashboard-table th:nth-child(5),.dashboard-table th:nth-child(6) { width: 11%; }.dashboard-table th:nth-child(7) { width: 9%; }.dashboard-table th:nth-child(8) { width: 11%; }.dashboard-table th:last-child { width: 6%; text-align: center; }
.dashboard-table td:first-child a { font-weight: 600; color: #183955; text-decoration: none; }.dashboard-table td:first-child a:hover { text-decoration: underline; }
.dashboard-table tbody tr:hover { background: #f8fbfe; }
.dashboard-table__statuses { display: flex; flex-wrap: wrap; gap: .2rem; }
.dashboard-table td:last-child { text-align: center; }
.dashboard-open { display: inline-grid; place-items: center; border: 1px solid #dce5ef; color: #496882; border-radius: .4rem; width: 1.8rem; height: 1.8rem; }
.dashboard-open .portal-icon { width: .9rem; height: .9rem; }
@media (max-width: 1350px) { .dashboard-panels { grid-template-columns: repeat(2,minmax(0,1fr)); }.dashboard-panels > :last-child { grid-column: 1/-1; }.dashboard-panels .dashboard-activity { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .4rem 1rem; max-height: 13rem; }.dashboard-metric__icon { flex-basis: 2.1rem; height: 2.1rem; }.customer-dashboard .dashboard-metric { gap: .6rem; padding: .85rem .65rem; } }
@media (max-width: 1100px) { .dashboard-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }.dashboard-table th:nth-child(7),.dashboard-table td:nth-child(7) { display: none; }.dashboard-hero { padding: 1.25rem 1.5rem; }.dashboard-table th:nth-child(2) { width: 12%; }.dashboard-table th:nth-child(3),.dashboard-table th:nth-child(4) { width: 14%; } }
@media (max-width: 900px) { .dashboard-hero { margin: -1rem -1rem 0; padding: 1.2rem 1rem; }.portal--customer .portal-topbar { padding: .65rem 1rem; }.portal-global-search { width: 100%; } }
@media (max-width: 650px) {
    .dashboard-panels { grid-template-columns: 1fr; }.dashboard-panels > :last-child { grid-column: auto; }.dashboard-panels .dashboard-activity { display: block; max-height: 20rem; }
    .dashboard-hero .portal-btn-row { width: 100%; }.dashboard-hero .portal-btn-row .portal-btn { flex: 1; padding: .7rem .6rem; font-size: .68rem; }
    .customer-dashboard .dashboard-metric { flex-direction: column; gap: .6rem; }.dashboard-metric__icon { flex-basis: auto; width: 2.1rem; }.customer-dashboard .kpi-card__label { text-transform: none; letter-spacing: normal; font-size: .72rem; }
    .dashboard-table,.dashboard-table tbody,.dashboard-table tr,.dashboard-table td { display: block; width: 100%; }.dashboard-table thead { display: none; }.dashboard-table tr { padding: .6rem; margin-bottom: .6rem; border: 1px solid #e0e8f1; border-radius: .5rem; }.dashboard-table td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: right; border: 0; padding: .3rem 0; font-size: .7rem; }.dashboard-table td::before { content: attr(data-label); color: #6a7e94; text-align: left; flex: 0 0 5rem; }.dashboard-table td:nth-child(7) { display: flex; }.dashboard-table td:first-child { border-bottom: 1px solid #e5ecf4; padding-bottom: .6rem; margin-bottom: .3rem; }.dashboard-table__statuses { justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .customer-dashboard a.dashboard-metric:hover { transform: none; } }


.portal--customer .portal-sidebar { gap: .8rem; padding: 1.1rem .8rem .9rem; overflow-y: auto; }
.portal--customer .portal-nav a { padding: .55rem .65rem; }
.portal--customer .portal-nav__group-label { margin-top: .65rem; }
.portal--customer .admin-site-preview > img { height: 3.7rem; }
.customer-dashboard .dashboard-panels { align-items: stretch; }
.customer-dashboard .dashboard-panel { display: flex; flex-direction: column; min-height: 100%; }
.customer-dashboard .dashboard-activity { flex: 1 1 auto; max-height: 17rem; overflow-y: auto; }
.customer-dashboard .dashboard-empty,
.customer-dashboard .dashboard-attention,
.customer-dashboard .dashboard-schedule { flex: 1 1 auto; }

/* Shipment workspace: compact, responsive logistics forms. */
.shipment-workspace,.shipment-list-workspace{color:#112335;max-width:1700px;margin:0 auto}
.shipment-workspace .portal-card{border:1px solid #e0e6ed;border-radius:12px;box-shadow:0 3px 14px #152c4205;overflow:visible}
.shipment-workspace .portal-card__header{padding:22px 24px;border-bottom:1px solid #e7edf2}
.shipment-workspace .portal-card__header h2{font-size:1.25rem;margin:0 0 5px}
.shipment-workspace .portal-card__body{padding:24px}
.shipment-workspace .portal-card__footer{padding:18px 24px;gap:15px;flex-wrap:wrap;border-top:1px solid #e7edf2}
.shipment-workspace .portal-field{gap:6px;margin-bottom:14px;min-width:0}
.shipment-workspace .portal-field label{font-size:.79rem;font-weight:650;letter-spacing:0;text-transform:none}
.shipment-workspace input,.shipment-workspace select,.shipment-workspace textarea{font:inherit;font-size:.84rem;min-height:39px;border-radius:7px;border:1px solid #cdd7e2;background:#fff;color:#142a42;max-width:100%}
.shipment-workspace textarea{min-height:70px;resize:vertical}
.shipment-workspace .portal-field__hint{font-size:.75rem;line-height:1.45;color:#61748b}
.shipment-details-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px 22px!important}
.shipment-route-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:0}
.portal-card__header-actions{align-items:center;flex-wrap:wrap;justify-content:flex-end}
.shipment-stop-editor{padding:20px;border:1px solid #dfe6ed;border-radius:10px;min-width:0;margin:0}
.shipment-stop-editor legend{font-size:1.08rem;font-weight:750;padding:0 8px;color:#142a42}
.shipment-stop-editor .portal-form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.shipment-stop-editor .portal-span-2{grid-column:1/-1}
.shipment-contact-picker{border-top:1px solid #e1e8ef;padding-top:18px;margin-top:8px}
.shipment-text-action{background:none;border:0;padding:4px 0;color:#1c527f;text-align:left;font:inherit;font-size:.8rem;font-weight:650;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.shipment-field-error{color:#ba2921;font-size:.77rem;line-height:1.45;display:block}
.shipment-validation{border:1px solid #f1aaa4;background:#fff3f2;border-radius:10px;padding:20px 24px;margin:18px 0;color:#7c211c}
.shipment-validation h2{font-size:1rem;margin:0 0 6px}.shipment-validation p{font-size:.83rem;margin:0 0 12px}
.shipment-validation ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 20px;padding:0;list-style:none;margin:0}
.shipment-validation li{display:flex;flex-direction:column;font-size:.8rem;border-left:2px solid #e88d85;padding-left:12px}
.shipment-stepper{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px!important;counter-reset:none;margin:22px 0!important;padding:0!important;background:none!important;border:0!important}
.shipment-stepper li{position:relative;display:flex!important;gap:12px;align-items:center;padding:14px!important;background:#fff;border:1px solid #e1e7ef;border-radius:8px;font-size:.8rem;min-width:0;flex:unset!important}
.shipment-stepper li:before,.shipment-stepper li:after{display:none!important}
.shipment-stepper li.is-current{border-top:3px solid #da452d;padding-top:12px!important}
.shipment-step-number{display:grid;place-items:center;border-radius:50%;background:#edf1f5;color:#58667a;min-width:32px;height:32px;font-weight:750}
.is-current .shipment-step-number{background:#da452d;color:white}.is-complete .shipment-step-number{background:#23845f;color:white}
.shipment-stepper small{display:block;font-size:.7rem;color:#6a7a8e;margin-top:4px}.shipment-stepper .shipment-text-action{color:inherit;text-decoration:none}
.shipment-review-section{padding:20px;border:1px solid #e1e7ef;border-radius:9px;margin-bottom:16px}
.shipment-review-section header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.shipment-review-section h3{font-size:1rem;display:flex;align-items:center;gap:10px;margin:0}.shipment-review-section h3 svg{width:22px;height:22px}
.shipment-review-section .portal-dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0}
.shipment-review-section dt{font-size:.75rem;color:#63758b;margin-bottom:5px}.shipment-review-section dd{font-size:.85rem;margin:0;overflow-wrap:anywhere}
.shipment-review-stop{background:#f8fafc;border:1px solid #e0e7ed;padding:18px;border-radius:8px;min-width:0}
.shipment-review-stop h4{display:flex;align-items:center;gap:8px;margin:0 0 12px}.shipment-review-stop h4 svg{width:20px;height:20px;color:#da452d}
.shipment-review-stop>strong{display:block;margin-top:12px}.shipment-review-stop p{font-size:.84rem;line-height:1.5}.shipment-review-stop .portal-dl{grid-template-columns:1fr 1fr}
.shipment-extra-stop{margin-bottom:20px}.shipment-extra-stop>.portal-btn-row{margin-bottom:8px}
.shipment-suggestions{list-style:none;padding:6px;margin:0;border:1px solid #cdd7e2;border-radius:7px}.shipment-suggestions button{padding:10px;border:0;background:white;text-align:left;width:100%;color:#142a42}
.shipment-list-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:20px 0}
.shipment-list-metric{display:flex;align-items:center;gap:18px;background:white;border:1px solid #e0e7ef;border-radius:10px;padding:20px;text-align:left;color:#112335;cursor:pointer}
.shipment-list-metric>span{background:#edf4fd;color:#2768ad;border-radius:12px;padding:14px;display:flex}.shipment-list-metric svg{width:25px;height:25px}.shipment-list-metric strong{font-size:1.7rem;display:block;line-height:1.2}.shipment-list-metric small{display:block;margin-top:4px;font-size:.83rem}
.shipment-list-metric:nth-child(3)>span{background:#fff0ec;color:#d5442d}.shipment-list-metric:nth-child(4)>span{background:#eaf8f0;color:#198559}
.shipment-list-workspace .portal-quick-filters{padding:16px 18px;gap:9px;display:flex;flex-wrap:wrap;border-bottom:1px solid #e6ecf2}
.shipment-list-workspace .portal-quick-filter{border-radius:22px;padding:8px 13px;font-size:.78rem;border:1px solid #e4eaf0;background:#f8fafc;color:#20364c;display:flex;gap:9px;align-items:center}
.shipment-list-workspace .portal-quick-filter--active{background:#172b43;color:#fff}.shipment-filter-count{border-radius:14px;background:#e9eef4;color:#20364c;padding:1px 6px;font-size:.7rem}
.shipment-list-workspace .portal-filters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:18px;background:white}
.shipment-list-workspace .portal-filters .portal-field:first-child{grid-column:span 2}.shipment-list-workspace .portal-field label{font-size:.72rem;text-transform:none;letter-spacing:0}.shipment-list-workspace .portal-field{margin:0}.shipment-list-workspace .portal-filters input,.shipment-list-workspace .portal-filters select{font-size:.8rem;min-width:0;width:100%}
.shipment-list-workspace .portal-table{font-size:.79rem}.shipment-list-workspace .portal-table th{font-size:.72rem;white-space:nowrap}.shipment-list-workspace .portal-table td{padding:13px 14px}.shipment-list-workspace .portal-table__secondary{font-size:.72rem;margin-top:4px}
.shipment-workspace :focus-visible,.shipment-list-workspace :focus-visible{outline:3px solid #3b78b7;outline-offset:3px}
@media(max-width:1200px){.shipment-route-grid{grid-template-columns:1fr}.shipment-list-workspace .portal-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.shipment-stepper li{gap:7px;padding:10px!important}.shipment-stepper small{font-size:.65rem}}
@media(max-width:700px){.shipment-details-grid{grid-template-columns:1fr!important}.shipment-stepper{grid-template-columns:1fr!important;gap:5px!important}.shipment-stepper li:not(.is-current){display:none!important}.shipment-list-metrics{grid-template-columns:1fr 1fr;gap:8px}.shipment-list-metric{padding:12px;gap:10px}.shipment-list-metric>span{padding:8px}.shipment-list-metric strong{font-size:1.3rem}.shipment-list-metric small{font-size:.7rem}.shipment-workspace .portal-card__body{padding:14px}.shipment-stop-editor{padding:12px}.shipment-stop-editor .portal-form-grid{grid-template-columns:1fr}.shipment-review-section .portal-dl{grid-template-columns:1fr 1fr}.shipment-review-section{padding:14px}.shipment-validation ul{grid-template-columns:1fr}.shipment-list-workspace .portal-filters{grid-template-columns:1fr 1fr}.shipment-workspace .portal-card__footer{padding:14px}.shipment-workspace .portal-card__footer>.portal-btn-row{width:100%;justify-content:space-between;flex-wrap:wrap}}

.shipment-notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.shipment-workspace .portal-form-grid{margin-bottom:10px}
.shipment-workspace .portal-field--check input{min-height:0}
.shipment-workspace h2,.shipment-workspace h3,.shipment-list-workspace h1{font-family:inherit;letter-spacing:-.03em}
.shipment-list-workspace .portal-table__secondary{max-width:165px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shipment-list-workspace .portal-filters{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:1000px){.shipment-list-workspace .portal-filters{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.shipment-notes-grid{grid-template-columns:1fr}.shipment-list-workspace .portal-filters{grid-template-columns:1fr 1fr}}

.shipment-upload__hint{margin:0 0 14px}
.shipment-upload{display:grid;grid-template-columns:minmax(11rem,14rem) minmax(0,1fr) auto;gap:14px 16px;align-items:end;border:1px dashed #aebfd0;background:#f8fafc;padding:16px 18px;border-radius:10px}
.shipment-upload .portal-field{margin-bottom:0}
.shipment-upload__action{display:flex;align-items:end;padding-bottom:1px}
.shipment-upload__input,.shipment-upload input[type=file]{display:block;width:100%;min-height:39px;height:39px;padding:7px 10px;border:1px solid #cdd7e2;border-radius:7px;background:#fff;cursor:pointer;box-sizing:border-box}
@media(max-width:800px){.shipment-upload{grid-template-columns:1fr}.shipment-upload__action{justify-content:stretch}.shipment-upload__action .portal-btn{width:100%}}
.shipment-workspace progress{width:100%;accent-color:#d7442d}
.shipment-workspace .portal-field label>span[aria-hidden]{color:#bf3527}

/* Login-only presentation; authentication continues to use native SSR form posts. */
.portal-login { background:#f3f6f9; color:#112033; }
.portal-login .login-story { flex:0 0 47.5%; box-sizing:border-box; position:relative; isolation:isolate; padding:clamp(40px,5.8vw,90px); justify-content:space-between; gap:42px; background:#0b2030; overflow:hidden; }
.login-story::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(5,23,38,.3),rgba(5,23,38,.15) 45%,#061522 100%),url('/images/hero-freight.svg') 57% center/auto 100%; opacity:.85; }
.login-brand { display:inline-flex; flex-direction:column; align-items:flex-start; gap:10px; text-decoration:none; color:#344256; width:fit-content; }
.login-brand img { display:block; width:218px; max-width:100%; height:auto; }
.login-brand span { font-size:.86rem; font-weight:650; text-transform:uppercase; letter-spacing:.16em; }
.login-brand--light { color:#c3d0da; }
.login-story__accent { display:block; width:68px; height:4px; background:#e5472b; margin-bottom:36px; }
.portal-login .login-story h2 { color:white; font-family:var(--niq-font-body); font-size:clamp(2rem,3.1vw,3rem); line-height:1.17; font-weight:750; letter-spacing:-.035em; margin:0 0 20px; }
.portal-login .login-story p { color:#e4ebf0; line-height:1.6; font-size:clamp(1rem,1.35vw,1.25rem); max-width:26rem; }
.portal-login .login-features { display:grid; gap:22px; list-style:none; padding:0; margin:60px 0 0; }
.login-features li { display:flex; align-items:center; gap:20px; }
.login-feature-icon { display:grid; place-items:center; width:52px; height:52px; flex-shrink:0; border-radius:12px; background:#ffffff12; color:white; }
.login-feature-icon svg { width:27px; height:27px; }
.login-features strong,.login-features div>span { display:block; color:#f2f5f8; }
.login-features strong { font-size:1rem; margin-bottom:3px; }
.login-features div>span { font-size:.9rem; line-height:1.5; color:#d0dbe4; }
.portal-login .login-panel { min-width:0; min-height:100svh; box-sizing:border-box; padding:48px clamp(24px,5vw,76px); background:radial-gradient(ellipse at center,#fff,#f2f5f8 80%); }
.portal-login .login-card { width:100%; max-width:550px; padding:clamp(28px,3.1vw,48px); box-sizing:border-box; border:1px solid #e9edf2; border-radius:13px; box-shadow:0 14px 40px #10283e08,0 2px 4px #10283e05; }
.login-card .login-brand { margin-bottom:28px; }
.portal-login .login-card h1 { font-family:var(--niq-font-body); font-size:2.25rem; font-weight:750; letter-spacing:-.04em; line-height:1.2; margin:0 0 8px; }
.portal-login .login-card .login-intro { color:#516074; font-size:1rem; line-height:1.5; margin-bottom:26px; }
.login-card .portal-auth__form { gap:20px; }
.login-card .portal-field { gap:7px; }
.login-card .portal-field label { font-size:.92rem; color:#344256; font-weight:500; }
.login-input { position:relative; }
.login-input>svg { position:absolute; left:16px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:#425166; pointer-events:none; }
.login-card .login-input input { width:100%; box-sizing:border-box; padding:14px 16px 14px 48px; min-height:52px; border:1px solid #c8d1dd; border-radius:8px; background:white; font-size:1rem; color:#112033; box-shadow:0 1px 2px #11203305; }
.login-card .login-input--password input { padding-right:54px; }
.login-card input::placeholder { color:#788597; opacity:1; }
.login-password-toggle { position:absolute; right:5px; top:5px; width:42px; height:42px; display:grid; place-items:center; background:transparent; color:#5e6b7c; border:0; border-radius:5px; cursor:pointer; }
.login-password-toggle[hidden] { display:none; }
.login-password-toggle svg { width:21px; height:21px; }
.login-password-toggle[aria-pressed=true] { background:#edf2f7; color:#102b45; }
.login-password-toggle:hover { background:#f0f3f7; }
.login-card .login-remember { display:flex; align-items:center; gap:10px; }
.login-remember input { width:19px; height:19px; flex-shrink:0; accent-color:#ce3c26; }
.login-card .login-submit { width:100%; min-height:54px; border-radius:8px; background:#d63e27; border-color:#d63e27; font-size:1.05rem; font-weight:650; justify-content:center; gap:12px; }
.login-card .login-submit:hover { background:#bb321e; border-color:#bb321e; }
.login-card .login-submit:disabled { cursor:wait; opacity:.7; }
.login-card .login-submit svg { width:20px; height:20px; }
.login-card :is(input,button,a):focus-visible { outline:3px solid #236aaa; outline-offset:3px; }
.login-card .login-input input:focus { border-color:#236aaa; }
.login-recovery { display:flex; align-items:center; gap:16px; margin:26px 0; text-align:center; font-size:.95rem; }
.login-recovery::before,.login-recovery::after { content:""; height:1px; flex:1; background:#e8edf2; }
.login-card a:not(.login-brand) { color:#b83522; text-underline-offset:3px; }
.login-access { display:flex; gap:16px; background:#f2f4f7; padding:20px; border-radius:10px; }
.login-access__icon { display:grid; place-items:center; background:#e3e8ee; color:#172c41; width:44px; height:44px; border-radius:50%; flex-shrink:0; }
.login-access__icon svg { width:23px; height:23px; }
.login-card .login-access h2 { font-family:var(--niq-font-body); font-size:.96rem; margin:0 0 4px; letter-spacing:0; }
.login-access p { margin:0; color:#516074; font-size:.91rem; line-height:1.6; }
@media (min-width:60rem) and (max-width:75rem) { .portal-login .login-story { flex-basis:42%; padding:38px; }.portal-login .login-panel { padding:32px; }.login-features li { gap:12px; } }
@media (max-width:59.99rem) { .portal-login .login-panel { padding:36px 24px; }.portal-login .login-card { max-width:520px; } }
@media (max-width:35rem) { .portal-login .login-panel { padding:20px 14px; }.portal-login .login-card { padding:28px 22px; }.login-brand img { width:190px; }.portal-login .login-card h1 { font-size:2rem; }.login-access { padding:16px; gap:12px; }.login-card .login-remember label { font-size:.85rem; }.login-access__icon { width:36px; height:36px; } }