/* ============================================================
   4R TMS — THEME (CONSOLIDATED + DENSE STAFF TABLE LAYOUT)
   - Removes conflicting “boxed-in” gutters
   - Staff pages default wide/dense (tables-first)
   - Portals remain scoped + mobile-safe
   ============================================================ */

/* ============================================================
   TOKENS
   ============================================================ */
:root {
    --tms-bg-app: #e4e4e4;
    --tms-bg-surface: #ffffff;
    --tms-bg-panel: #fafafa;

    --tms-text: #111;
    --tms-text-muted: #555;

    --tms-border: #c4c4c4;
    --tms-border-strong: #b5b5b5;

    --tms-link: #0645AD;

    --tms-btn-bg: #f2f2f2;
    --tms-btn-border: #777;
    --tms-btn-danger: #b22222;

    --tms-gap-xs: 6px;
    --tms-gap-sm: 8px;
    --tms-gap-md: 12px;
    --tms-gap-lg: 16px;
    --tms-gap-xl: 20px;

    --tms-radius: 2px;

    --tms-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ============================================================
   APP FRAME
   ============================================================ */
/* Header (remove inline styles; keep dense enterprise bar) */
.tms-header {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 600;
    background: #f3f3f3;
    border-bottom: 1px solid #c2c2c2;
}

.tms-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tms-header-user {
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tms-header-logout {
    margin: 0;
}

.tms-header-logout-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 12px;
}
   body {
    background-color: var(--tms-bg-app);
    color: var(--tms-text);
    font-size: 14px;
    font-family: var(--tms-font);
}

.tms-brand-link {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    text-decoration: none;
}

.tms-brand-logo {
    display: block;
    width: 120px;
    height: auto;
}

.tms-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tms-header {
    height: 52px;
}

/* STAFF DEFAULT: wide/dense container (tables-first) */
.content-wrapper {
    max-width: none;
    margin: 12px 12px;
    /* tighter side gutters */
    padding: 16px 16px;
    /* tighter inner padding */
    background-color: var(--tms-bg-surface);
    border: 1px solid var(--tms-border);
    border-radius: var(--tms-radius);
    box-sizing: border-box;
}

/* Desktop: even denser */
@media (min-width: 1100px) {
    .content-wrapper {
        margin: 10px 8px;
        padding: 14px 14px;
    }
}

/* Large desktop: max density (use the screen) */
@media (min-width: 1400px) {
    .content-wrapper {
        margin: 8px 6px;
        padding: 12px 12px;
    }
}

.tms-breadcrumb-row {
    margin-top: 4px;
    margin-bottom: var(--tms-gap-sm);
}

.muted {
    color: #666;
}

/* ============================================================
   PAGE HEADER
   ============================================================ */
.tms-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--tms-gap-md);
}

.tms-page-title {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tms-page-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--tms-gap-sm);
}

/* ============================================================
   TABLES (ENTERPRISE GRID)
   ============================================================ */
.tms-table {
    width: 100%;
    border-collapse: collapse;
}

.tms-table thead th {
    background-color: #d6d6d6;
    border-bottom: 1px solid var(--tms-border-strong);
    padding: 6px 8px;
    text-align: left;

    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tms-table thead th a,
.tms-table thead th a:visited {
    color: var(--tms-text);
    text-decoration: none;
}

.tms-table thead th a:hover {
    text-decoration: underline;
}

.tms-table tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid #e1e1e1;
    font-size: 0.85rem;
}

.tms-table tbody tr:nth-child(odd) {
    background-color: var(--tms-bg-surface);
}

.tms-table tbody tr:nth-child(even) {
    background-color: #f7f7f7;
}

.tms-table tbody tr:hover {
    background-color: #ececec;
}

.tms-table-row-clickable {
    cursor: pointer;
}

/* ============================================================
   SORTABLE TABLE HEADERS
   ============================================================ */
.tms-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.tms-sortable::after {
    content: "";
    margin-left: 4px;
    font-size: 0.7em;
}

.tms-sortable.tms-sort-asc::after {
    content: "▲";
}

.tms-sortable.tms-sort-desc::after {
    content: "▼";
}

/* ============================================================
   DISPATCH BOARD — DATE GROUP SEPARATORS
   ============================================================ */
.tms-table tr.dispatch-date-row th {
    background-color: #d9d9d9;
    border-top: 2px solid #8f8f8f;
    border-bottom: 2px solid #8f8f8f;

    padding: 7px 10px;
    text-align: left;

    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8rem;
}

.tms-table tr.dispatch-date-row th span {
    font-weight: 800;
}

.tms-table tr.dispatch-date-row+tr td {
    border-top: 6px solid #f0f0f0;
}

/* Sticky group headers */
.tms-table tr.dispatch-date-row th {
    position: sticky;
    top: 0;
    z-index: 5;
}

/* ============================================================
   FORMS — ENTERPRISE LAYOUT
   ============================================================ */
.tms-form-shell {
    margin-top: var(--tms-gap-sm);
}

.tms-form-panel {
    border: 1px solid var(--tms-border);
    background-color: var(--tms-bg-panel);
    padding: var(--tms-gap-lg) 20px;
}

.tms-form-panel--spaced {
    margin-top: 12px;
}

.tms-form-grid {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    column-gap: var(--tms-gap-md);
    row-gap: var(--tms-gap-sm);
    align-items: center;
}

.tms-form-row-label {
    font-size: 0.85rem;
    color: #333;
    text-align: left;
    padding-right: var(--tms-gap-sm);
    white-space: nowrap;
}

.tms-form-row-field {
    width: 100%;
}

.tms-form-row-field input[type="text"],
.tms-form-row-field input[type="number"],
.tms-form-row-field input[type="date"],
.tms-form-row-field input[type="time"],
.tms-form-row-field input[type="tel"],
.tms-form-row-field input[type="email"],
.tms-form-row-field select,
.tms-form-row-field textarea {
    box-sizing: border-box;
    padding: 4px 6px;
    border: 1px solid #b8b8b8;
    border-radius: var(--tms-radius);
    font-size: 0.85rem;
}

.tms-form-row-field input[type="text"],
.tms-form-row-field input[type="number"],
.tms-form-row-field input[type="tel"],
.tms-form-row-field input[type="email"],
.tms-form-row-field select {
    width: 380px;
    max-width: 100%;
}

.tms-form-row-field input[type="date"],
.tms-form-row-field input[type="time"],
.tms-time-select {
    width: 200px !important;
    max-width: 100% !important;
}

.tms-form-row-field textarea {
    width: 600px;
    max-width: 100%;
    min-height: 70px;
    resize: vertical;
}

.tms-form-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: var(--tms-gap-sm);
}

.tms-form-actions,
.form-actions.action-bar {
    margin: var(--tms-gap-lg) 0;
    display: flex;
    justify-content: flex-start;
    gap: var(--tms-gap-sm);
}

/* Keep load form panels from stretching too wide (intentional) */
.tms-load-form-page .tms-form-shell {
    max-width: 1100px;
}

/* ============================================================
   MODULE WRAP (SUB-PANELS INSIDE A FORM PANEL)
   ============================================================ */
.tms-module-wrap {
    border: 1px solid #c4c4c4;
    background: #ffffff;
}

.tms-module-header {
    padding: 8px 10px;
    background: #f3f3f3;
    border-bottom: 1px solid #c4c4c4;
}

.tms-module-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #222;
}

.tms-module-body {
    padding: 10px;
}

.tms-panel-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e1e1e1;
    display: flex;
    justify-content: flex-start;
    gap: 8px;
}

.tms-docs-table thead th {
    background-color: #d6d6d6;
}

.tms-docs-table tbody td {
    vertical-align: middle;
}

/* ============================================================
   BUTTONS — SYSTEM STYLE, ADMIN-SAFE
   ============================================================ */
.tms-btn,
.tms-btn:link,
.tms-btn:visited,
#content a.tms-btn,
#content a.tms-btn:link,
#content a.tms-btn:visited {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 400;
    padding: 3px 10px;
    border: 1px solid var(--tms-btn-border);
    background-color: var(--tms-btn-bg);
    color: var(--tms-text);
    cursor: pointer;
    border-radius: var(--tms-radius);
    text-decoration: none;
    line-height: 1.4;
}

.tms-btn:hover,
.tms-btn:active,
#content a.tms-btn:hover,
#content a.tms-btn:active {
    background-color: #e6e6e6;
    color: var(--tms-text);
    text-decoration: none;
}

.tms-btn-add {
    font-weight: 600;
}

.tms-btn-sm {
    min-width: auto;
    text-align: center;
    padding: 3px 10px;
}

.tms-btn-secondary,
.tms-btn-link,
.btn-link {
    background: none !important;
    border: none !important;
    padding: 3px 6px !important;
    color: var(--tms-link) !important;
    text-decoration: underline;
    font-size: 0.85rem;
    cursor: pointer;
}

.tms-btn-secondary:hover,
.tms-btn-link:hover,
.btn-link:hover {
    text-decoration: none;
}

.tms-btn-danger,
.tms-btn-danger:link,
.tms-btn-danger:visited,
#content a.tms-btn-danger,
#content a.tms-btn-danger:link,
#content a.tms-btn-danger:visited {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 400;
    padding: 3px 10px;
    border: 1px solid var(--tms-btn-border);
    background-color: var(--tms-btn-bg);
    color: var(--tms-btn-danger);
    cursor: pointer;
    border-radius: var(--tms-radius);
    text-decoration: none;
    line-height: 1.4;
}

.tms-btn-danger:hover,
.tms-btn-danger:active,
#content a.tms-btn-danger:hover,
#content a.tms-btn-danger:active {
    background-color: #e6e6e6;
    color: #951b1b;
    text-decoration: none;
}

/* Force all tms-btn links to behave like buttons (Django admin collisions) */
#content a.tms-btn,
#content a.tms-btn:link,
#content a.tms-btn:visited,
#content a.tms-btn:hover,
#content a.tms-btn:active {
    color: var(--tms-text) !important;
    text-decoration: none !important;
    background-color: var(--tms-btn-bg) !important;
    border: 1px solid var(--tms-btn-border) !important;
    padding: 3px 10px !important;
    border-radius: var(--tms-radius) !important;
}

/* ============================================================
   FILTER / INPUT / BUTTON SPACING
   ============================================================ */
.content-wrapper input[type="text"],
.content-wrapper input[type="number"],
.content-wrapper input[type="date"],
.content-wrapper select {
    margin-right: var(--tms-gap-xs);
}

.tms-actions,
.tms-filter-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--tms-gap-sm);
}

.tms-filter-actions {
    display: flex;
    gap: var(--tms-gap-sm);
    margin-top: 10px;
    padding-top: 4px;
    width: 100%;
    clear: both;
}

/* ============================================================
   INPUT PREFIX (CURRENCY, ETC.)
   ============================================================ */
.tms-input-with-prefix {
    display: flex;
    align-items: center;
    gap: var(--tms-gap-xs);
}

.tms-prefix {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

/* ============================================================
   NAVIGATION BAR (ENTERPRISE)
   - Tight, dense layout
   - Built-in separators between items
   - Internal Tools gets a stronger divider without double pipes
   ============================================================ */
/* Dropdown behavior */
.tms-nav-item.has-menu {
    position: relative;
}

.tms-nav-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 180px;
    background: #f3f3f3;
    border: 1px solid #c2c2c2;
    padding: 6px 0;
    z-index: 1000;
}

.tms-nav-item.has-menu:hover .tms-nav-menu,
.tms-nav-item.has-menu:focus-within .tms-nav-menu {
    display: block;
}

.tms-nav-menu-link {
    display: block;
    padding: 6px 12px;
    color: #222;
    text-decoration: none;
    white-space: nowrap;
}

.tms-nav-menu-link:hover {
    background: #e9e9e9;
}

.tms-nav {
    background-color: #f3f3f3;
    border-bottom: 1px solid #c2c2c2;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (min-width: 1100px) {
    .tms-nav {
        padding: 6px 12px;
    }
}

@media (min-width: 1400px) {
    .tms-nav {
        padding: 6px 10px;
    }
}

.tms-nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tms-nav-left,
.tms-nav-right {
    display: flex;
    align-items: center;
}

/* default spacing + default thin separator between adjacent nav items */
.tms-nav-left>*+*,
.tms-nav-right>*+* {
    margin-left: 24px;
    position: relative;
}

.tms-nav-left>*+*::before,
.tms-nav-right>*+*::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background-color: #c2c2c2;
}

.tms-nav-link,
.tms-nav-link:visited {
    color: #222;
    text-decoration: none;
    font-weight: inherit;
}

.tms-nav-link:hover {
    text-decoration: underline;
}

.tms-logo {
    font-weight: 700;
}

/* ============================================================
   Internal Tools – stronger boundary (no duplicate divider)
   Requires: the Internal Tools wrapper has class "tms-nav-internal"
   ============================================================ */

/* remove the default thin separator immediately before Internal Tools */
.tms-nav-left>.tms-nav-internal::before {
    content: none !important;
}

/* add a stronger divider before Internal Tools */
.tms-nav-left>.tms-nav-internal {
    position: relative;
    margin-left: 28px;
    /* replaces the normal 24px gap */
}

.tms-nav-left>.tms-nav-internal::after {
    content: "";
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 18px;
    background-color: #c2c2c2;
}

/* optional: subtle de-emphasis */
.tms-nav-left>.tms-nav-internal .tms-nav-link {
    opacity: 0.9;
}
/* ============================================================
   DROPDOWN MENUS (MATCH NAVBAR TYPOGRAPHY)
   ============================================================ */
.tms-nav-has-menu {
    position: relative;
}

.tms-nav-menu,
.tms-nav-user-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #ffffff;
    border: 1px solid #c2c2c2;
    min-width: 180px;
    padding: 4px 0;
    display: none;
    z-index: 1000;

    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tms-nav-has-menu:hover .tms-nav-menu,
.tms-nav-user:hover .tms-nav-user-menu {
    display: block;
}

.tms-nav-menu-link,
.tms-nav-user-menu .tms-nav-link {
    display: block;
    padding: 6px 12px;
    color: #222;
    text-decoration: none;
    font-weight: inherit;
}

.tms-nav-menu-link:hover,
.tms-nav-user-menu .tms-nav-link:hover {
    background-color: #f1f1f1;
}

/* Dropdown: make form/button items match menu links (Logout typography) */
.tms-nav-user-menu form {
    margin: 0;
    padding: 0;
}

.tms-nav-user-menu button {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;

    display: block;
    padding: 6px 12px;

    color: #222;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;

    cursor: pointer;
}

.tms-nav-user-menu button:hover {
    background-color: #f1f1f1;
    text-decoration: none;
}

/* ============================================================
   PORTAL HEADER (DRIVER/EXTERNAL): MOBILE-SAFE LOGOUT BUTTON
   ============================================================ */
.portal-header {
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.portal-logout-form {
    margin: 0;
}

/* Default: link-style */
.portal-logout-btn {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-decoration: underline;
}

/* Mobile: button-style (prevents iOS white button) */
@media (max-width: 767.98px) {
    .portal-logout-btn {
        background: var(--tms-btn-bg);
        border: 1px solid var(--tms-btn-border);
        color: var(--tms-text);
        padding: 3px 10px;
        line-height: 1.4;
        border-radius: var(--tms-radius);
        text-decoration: none;
        font-weight: 600;
    }

    .portal-logout-btn:hover,
    .portal-logout-btn:focus,
    .portal-logout-btn:active {
        background-color: #e6e6e6;
        color: var(--tms-text);
        outline: none;
    }
}

/* ============================================================
   AUTH / LOGIN (FLAT TMS)
   ============================================================ */
html,
body.auth-body {
    height: 100%;
}

body.auth-body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0b1120;
    color: #111827;
    font-family: var(--tms-font);
}

body.auth-body .auth-wrapper {
    width: 100%;
    max-width: 440px;
    padding: 24px 16px;
    box-sizing: border-box;
}

body.auth-body .auth-card {
    background: #f3f4f6;
    border: 1px solid #1f2937;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.45);
    padding: 24px 24px 20px 24px;
}

body.auth-body .auth-header {
    text-align: center;
    margin-bottom: 28px;
    margin-top: 6px;
}

body.auth-body .auth-logo {
    display: block;
    margin: 0 auto 12px auto;
    max-width: 180px;
    height: auto;
}

body.auth-body .auth-logo-artemis {
    max-width: 190px;
    margin-bottom: 24px;
}

body.auth-body .auth-title {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin: 0 0 4px 0;
    color: #4b5563;
}

body.auth-body .auth-subtitle {
    margin: 0;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #374151;
    font-weight: 600;
}

body.auth-body .auth-messages {
    margin-bottom: 16px;
}

body.auth-body .auth-message {
    font-size: 0.9rem;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid transparent;
    margin-bottom: 6px;
}

body.auth-body .auth-message-error,
body.auth-body .auth-message-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

body.auth-body .auth-message-success {
    background: #ecfdf3;
    border-color: #bbf7d0;
    color: #166534;
}

body.auth-body .auth-message-info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

body.auth-body .auth-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.auth-body .auth-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.9rem;
}

body.auth-body .auth-label {
    font-weight: 500;
    color: #1f2937;
}

body.auth-body .auth-form-field input,
body.auth-body .auth-form-field select,
body.auth-body .auth-form-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid #9ca3af;
    background: #ffffff;
    color: #111827;
    font-size: 0.9rem;
}

body.auth-body .auth-form-field input:focus,
body.auth-body .auth-form-field select:focus,
body.auth-body .auth-form-field textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: none;
}

body.auth-body .auth-nonfield-errors {
    margin-bottom: 8px;
    padding: 8px 10px;
    border-radius: 4px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 0.9rem;
}

body.auth-body .auth-error {
    margin: 0;
    font-size: 0.8rem;
    color: #b91c1c;
}

body.auth-body .auth-form-field.has-error input,
body.auth-body .auth-form-field.has-error select,
body.auth-body .auth-form-field.has-error textarea {
    border-color: #dc2626;
}

body.auth-body .auth-submit {
    margin-top: 10px;
    width: 100%;
    padding: 8px 10px;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 4px;
    border: 1px solid #111827;
    background: #111827;
    color: #f9fafb;
    cursor: pointer;
}

body.auth-body .auth-submit:hover {
    background: #020617;
    border-color: #020617;
}

body.auth-body .auth-footer-text {
    margin-top: 12px;
    text-align: center;
    font-size: 0.8rem;
    color: #9ca3af;
}

@media (min-width: 768px) {
    body.auth-body .auth-wrapper {
        max-width: 480px;
        padding: 32px 0;
    }

    body.auth-body .auth-card {
        padding: 28px 28px 22px 28px;
    }
}

/* ============================================================
   DRIVER PORTAL (SCOPED)
   ============================================================ */
.driver-portal .driver-portal-page {
    max-width: 980px;
    margin: 0 auto;
    padding: 16px;
}

.driver-portal .dp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.driver-portal .dp-section {
    border: 1px solid var(--tms-border);
    background: var(--tms-bg-surface);
    padding: 12px;
    margin: 12px 0;
}

.driver-portal .dp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.driver-portal .dp-kv {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 8px;
    margin: 6px 0;
}

.driver-portal .dp-kv .k {
    opacity: 0.75;
}

.driver-portal .dp-notes {
    white-space: pre-wrap;
    margin: 0;
}

.driver-facts {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.driver-fact {
    line-height: 1.45;
    font-size: 14px;
    color: #444;
}

.driver-fact strong {
    font-weight: 600;
    color: #222;
    margin-right: 4px;
}

/* ============================================================
   MOBILE (GLOBAL)
   ============================================================ */
@media (max-width: 640px) {
    .content-wrapper {
        margin: 10px 8px !important;
        padding: 12px !important;
        border-radius: 0;
    }

    .tms-nav {
        padding: 6px 8px;
        font-size: 0.75rem;
    }

    .tms-nav-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .tms-nav-left,
    .tms-nav-right {
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    .tms-nav-left>*::before,
    .tms-nav-right>*::before {
        content: none;
    }

    .tms-nav-link {
        padding: 0 2px;
    }

    .tms-breadcrumb-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .tms-form-actions,
    .form-actions.action-bar {
        margin: 12px 0;
        display: flex;
        justify-content: flex-start;
        gap: 8px;
    }

    .tms-filter-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .tms-filter-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .tms-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tms-table {
        min-width: 700px;
    }

    .tms-table thead th,
    .tms-table tbody td {
        padding: 4px 6px;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .tms-form-grid {
        grid-template-columns: 1fr;
    }

    .tms-form-row-label {
        text-align: left;
        margin-bottom: 2px;
    }
}

/* ============================================================
   MOBILE (DRIVER/EXTERNAL PORTALS)
   ============================================================ */
@media (max-width: 768px) {
    .drivers-portal * {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .drivers-portal .tms-form-panel .tms-form-grid {
        display: grid !important;
        grid-template-columns: 120px 1fr !important;
        column-gap: 12px !important;
        row-gap: 10px !important;
        align-items: start !important;
    }

    .drivers-portal .tms-form-panel .tms-form-row-label,
    .drivers-portal .tms-form-panel .tms-form-row-field {
        margin: 0 !important;
    }

    .drivers-portal .tms-form-panel .tms-form-row-label {
        font-weight: 600;
        font-size: 0.9rem;
    }

    .drivers-portal .tms-form-panel .tms-form-row-field {
        font-size: 0.95rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .drivers-portal .tms-module-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .drivers-portal .tms-table {
        width: 100%;
        max-width: 100%;
    }

    .drivers-portal .tms-table th,
    .drivers-portal .tms-table td {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .drivers-portal .tms-form-panel {
        padding: 14px;
        margin-bottom: 14px;
        background: #ffffff;
    }

    .drivers-portal .tms-form-section-title {
        font-size: 0.95rem;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .drivers-portal .muted {
        font-size: 0.9rem;
        line-height: 1.4;
        word-break: break-word;
    }
}
/* ============================================================
   DISPATCH: EDGE-TO-EDGE / TABLE-FIRST (STAFF)
   ============================================================ */
.scope-staff.page-dispatch .content-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* tighten vertical chrome above the grid */
.scope-staff.page-dispatch .tms-page-header {
    margin: 10px 12px 6px 12px;
}

.scope-staff.page-dispatch .tms-page-subtitle {
    margin-top: 2px;
}

/* keep tabs close to the table */
.scope-staff.page-dispatch .tms-tab-row,
.scope-staff.page-dispatch .tms-subtab-row {
    margin-left: 12px;
    margin-right: 12px;
}

.scope-staff.page-dispatch .tms-divider {
    margin: 6px 12px 10px 12px;
}

/* the actual grid surface */
.scope-staff.page-dispatch .tms-table-wrapper {
    margin: 0 8px 10px 8px;
    background: var(--tms-bg-surface);
    border-top: 1px solid var(--tms-border);
    border-bottom: 1px solid var(--tms-border);
}

/* sticky column headers (below top bars) */
.scope-staff.page-dispatch .tms-table thead th {
    position: sticky;
    top: 76px;
    /* adjust if needed */
    z-index: 6;
}

/* date group headers should stick below thead */
.scope-staff.page-dispatch .tms-table tr.dispatch-date-row th {
    position: sticky;
    top: 104px;
    /* adjust if needed */
    z-index: 5;
}

/* ============================================================
   DISPATCH: STATUS CLARITY (COLORBLIND-SAFE, CLEAN)
   ============================================================ */

/* Left rail — primary scan cue (position > color) */
.dispatch-row.status-dispatched {
    box-shadow: inset 4px 0 0 #0072B2;
    /* blue */
}

.dispatch-row.status-in_transit {
    box-shadow: inset 4px 0 0 #E69F00;
    /* orange */
}

.dispatch-row.status-delivered {
    box-shadow: inset 4px 0 0 #009E73;
    /* teal/green */
}

.dispatch-row.status-assigned {
    box-shadow: inset 4px 0 0 #56B4E9;
    /* sky blue */
}

.dispatch-row.status-unassigned {
    box-shadow: inset 4px 0 0 #666666;
    /* neutral gray */
}

.dispatch-row.status-pending {
    box-shadow: inset 4px 0 0 #CC79A7;
    /* magenta */
}
/* ============================================================
   DISPATCH — STATUS BADGE + ACTION BUTTONS (CLEAN / NON-DUPED)
   Goal: badge + buttons INLINE, strong active state, colorblind-safe
   ============================================================ */

/* Status cell: badge + buttons inline and vertically centered */
.dispatch-status-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    vertical-align: middle;
}

/* Explicit status badge (outline-first; readable without color) */
.dispatch-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 10px;
    border: 2px solid #444;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #ffffff;
    color: #111;
}

/* Badge color = outline only (colorblind-safe hues) */
.dispatch-status-badge.status-dispatched {
    border-color: #0072B2;
    color: #0072B2;
}

.dispatch-status-badge.status-in_transit {
    border-color: #E69F00;
    color: #7a4f00;
}

.dispatch-status-badge.status-delivered {
    border-color: #009E73;
    color: #006b4e;
}

.dispatch-status-badge.status-assigned {
    border-color: #111827;
    color: #111827;
}

.dispatch-status-badge.status-unassigned {
    border-color: #4b5563;
    color: #4b5563;
}

.dispatch-status-badge.status-pending {
    border-color: #7a5a00;
    color: #7a5a00;
}

/* Action buttons row */
.dispatch-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}

/* Neutral buttons by default */
.dispatch-status-btn {
    border: 1px solid var(--tms-btn-border);
    background: #ffffff;
    color: #111;
}

/* Active state — unmistakable even without color */
.dispatch-status-btn--active {
    border-width: 2px;
    font-weight: 800;
    text-decoration: underline;
}

/* Active fills (colorblind-safe hues) */
.dispatch-status-btn--active[data-status="dispatched"] {
    background: #0072B2;
    border-color: #0072B2;
    color: #ffffff;
}

.dispatch-status-btn--active[data-status="in_transit"] {
    background: #E69F00;
    border-color: #E69F00;
    color: #111111;
}

.dispatch-status-btn--active[data-status="delivered"] {
    background: #009E73;
    border-color: #009E73;
    color: #ffffff;
}

/* Normalize vertical alignment across dispatch rows */
.dispatch-table td {
    vertical-align: middle;
}

.dispatch-driver-cell select {
    vertical-align: middle;
}
/* ============================================================
   DISPATCH: DENSITY PASS (REMOVE WASTED VERTICAL SPACE)
   ============================================================ */

/* kill the giant “card” feeling on dispatch */
.scope-staff.page-dispatch .content-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* pull content up tight under navbar */
.scope-staff.page-dispatch .tms-page-header {
    margin: 8px 12px 6px 12px !important;
    padding: 0 !important;
}

/* header: make right meta a single row */
.scope-staff.page-dispatch .dispatch-header-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    font-size: 12px;
}

/* remove extra margins on bucket rows */
.scope-staff.page-dispatch .tms-tab-row {
    margin: 6px 12px 4px 12px !important;
}

.scope-staff.page-dispatch .tms-subtab-row {
    margin: 4px 12px 6px 12px !important;
}

/* thinner divider */
.scope-staff.page-dispatch .tms-divider {
    margin: 4px 12px 8px 12px !important;
}

/* grid surface: minimal borders, minimal padding */
.scope-staff.page-dispatch .tms-table-wrapper {
    margin: 0 8px 10px 8px;
    background: var(--tms-bg-surface);
    border-top: 1px solid var(--tms-border);
    border-bottom: 1px solid var(--tms-border);
}

/* section bars: reduce height */
.scope-staff.page-dispatch .dispatch-section-header {
    padding: 4px 10px !important;
    margin-top: 10px !important;
    border-top-width: 1px !important;
}

/* table cells slightly tighter */
.scope-staff.page-dispatch .tms-table thead th,
.scope-staff.page-dispatch .tms-table tbody td {
    padding-top: 5px;
    padding-bottom: 5px;
}
/* DISPATCH HOTFIX: disable sticky header rows (they're causing blank bands) */
.scope-staff.page-dispatch .tms-table thead th,
.scope-staff.page-dispatch .tms-table tr.dispatch-date-row th {
    position: static !important;
    top: auto !important;
}
/* DISPATCH: sticky headers (correct offsets, no blank band) */
.scope-staff.page-dispatch .tms-table thead th {
    position: sticky;
    top: 0;
    z-index: 20;
}

.scope-staff.page-dispatch .tms-table tr.dispatch-date-row th {
    position: sticky;
    top: 32px;
    /* approx one header row height */
    z-index: 19;
}

/* DISPATCH: remove white band above section headers */
.scope-staff.page-dispatch .tms-table-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.scope-staff.page-dispatch .dispatch-table-scroll {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.scope-staff.page-dispatch .dispatch-section-header {
    margin-top: 0 !important;
}
/* Dispatch date group rows — condensed */
.dispatch-date-row th {
    padding: 4px 8px !important;
    /* was ~8–10px */
    font-size: 0.75rem !important;
    /* smaller than data rows */
    font-weight: 600;
    background-color: #e1e1e1;
    /* lighter than header */
    color: #222;
    border-top: 1px solid #bcbcbc;
    border-bottom: 1px solid #bcbcbc;
}

/* Dispatch date group rows — tight, Excel-like */
.scope-staff.page-dispatch .dispatch-date-row th {
    background: #e0e0e0;
    border-top: 1px solid #9c9c9c;
    border-bottom: 1px solid #9c9c9c;
    padding: 1px 8px !important;
    /* tighter than before */
    font-size: 10.5px !important;
    font-weight: 700;
    text-transform: none !important;
    /* prevent uppercase */
    letter-spacing: 0 !important;
    line-height: 1.2;
}

.scope-staff.page-dispatch .dispatch-date-row th .date-label {
    font-weight: 600;
    color: #444;
    margin-right: 4px;
    text-transform: none !important;
}

.scope-staff.page-dispatch .dispatch-date-row th .date-value {
    font-weight: 600;
    color: #111;
    text-transform: none !important;
}

/* Dispatch: remove the spacer under date group rows */
.scope-staff.page-dispatch .dispatch-date-row+tr td {
    border-top: 0 !important;
}

/* ============================================================
   DISPATCH — ALIGNMENT: BH / PAID / RATE (LEFT, CONSISTENT)
   ============================================================ */

/* Ensure these columns don’t look “detached” on the right */
.dispatch-bh-cell,
.dispatch-paid-cell,
.dispatch-rate-cell {
    text-align: left !important;
    padding-left: 8px;
}

/* Make checkboxes line up visually with text rows */
.dispatch-bh-cell input[type="checkbox"],
.dispatch-paid-cell input[type="checkbox"] {
    margin: 0;
    transform: translateY(1px);
}

/* If you had rate right-aligned anywhere, force left */
.dispatch-rate-cell {
    white-space: nowrap;
}
/* DISPATCH: remove the thin underline artifact on active status buttons */
.dispatch-status-btn--active {
    text-decoration: none !important;
}
/* DISPATCH: delivered rows — remove the extra thin rule look */
.dispatch-delivered-table tbody td {
    border-bottom: 0 !important;
}

/* Add a single, calmer separator between delivered rows */
.dispatch-delivered-table tbody tr {
    border-bottom: 1px solid #e6e6e6;
}
/* ============================================================
   DISPATCH — ROW DENSITY + VERTICAL ALIGNMENT (DRIVER/STATUS/BH)
   ============================================================ */

/* Make dispatch rows feel like a tight grid */
.dispatch-table tbody td {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    vertical-align: middle !important;
}

/* Driver select: consistent height and vertical centering */
.dispatch-driver-cell select {
    height: 30px !important;
    line-height: 30px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Status cell: badge + buttons on one line */
.dispatch-status-cell {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Status badge: force true vertical centering */
.dispatch-status-badge {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
    height: 30px !important;
    min-height: 30px !important;

    padding: 0 12px !important;

    line-height: 30px !important;
    /* force baseline alignment */
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;

    border: 2px solid #444 !important;
    border-radius: 999px !important;
    background: #ffffff !important;

    margin: 0 !important;
    /* kill any inherited margins */
}

/* Buttons: match badge/select height */
.dispatch-status-cell .dispatch-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dispatch-status-cell .dispatch-status-btn {
    box-sizing: border-box !important;
    height: 30px !important;
    line-height: 28px !important;
    /* inside border */
    padding: 0 10px !important;
}
/* ============================================================
   DISPATCH — STATUS BADGE: PENDING (match header; colorblind-safe)
   ============================================================ */

/* Pending badge: use header-gold fill + black text (high contrast) */
.dispatch-status-badge.status-pending {
    border-color: #B45309;
    /* darker gold-brown outline */
    color: #111111;
    /* black text */
    background: #F4C430;
    /* same family as pending header */
}

/* If you also use "assigned" as a status, make it neutral and distinct */
.dispatch-status-badge.status-assigned {
    border-color: #374151;
    color: #111111;
    background: #FFFFFF;
}

/* ============================================================
   DISPATCH — Pending status dropdown should look like a pill
   (colorblind-safe: use fill + border + bold + uppercase)
   ============================================================ */

.dispatch-status-select {
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 28px;
    border: 2px solid #444;
    background: #fff;
}

/* Pending: match the pending header family (gold) but distinct from In-Transit */
.dispatch-status-select.status-pending {
    background: #F4C430;
    /* gold */
    border-color: #8A6A00;
    /* darker gold/brown border */
    color: #111;
}

/* Unassigned: neutral */
.dispatch-status-select.status-unassigned {
    background: #fff;
    border-color: #444;
    color: #111;
}

/* Assigned: gray (distinct from pending + dispatched + transit) */
.dispatch-status-select.status-assigned {
    background: #E6E6E6;
    border-color: #555;
    color: #111;
}

/* Optional: ensure the native arrow stays readable */
.dispatch-status-select {
    -webkit-appearance: menulist;
    appearance: menulist;
}

/* ============================================================
   DISPATCH — kill the “top row” underline under status buttons
   (only affects the first load row in Active)
   ============================================================ */

/* First actual load row (not the date separator row) */
.dispatch-active+.dispatch-table-scroll .dispatch-table tbody tr.dispatch-row:first-of-type .dispatch-status-btn,
.dispatch-active+.dispatch-table-scroll .dispatch-table tbody tr.dispatch-row:first-of-type .dispatch-actions {
    box-shadow: none !important;
    background-image: none !important;
}

/* Also remove any accidental underline decoration on the first row buttons */
.dispatch-active+.dispatch-table-scroll .dispatch-table tbody tr.dispatch-row:first-of-type .dispatch-status-btn {
    text-decoration: none !important;
}
/* ============================================================
   DISPATCH — remove “double line” under first load after date header
   (fixes the phantom thin border you only see on the first row)
   ============================================================ */

/* The date separator row already has its own border; kill the next row's top border */
.dispatch-table tbody tr.dispatch-date-row+tr>td,
.dispatch-table tbody tr.dispatch-date-row+tr>th {
    border-top: 0 !important;
}

/* If any control adds an inset/shadow line, force it off on that first row */
.dispatch-table tbody tr.dispatch-date-row+tr td.dispatch-status-cell *,
.dispatch-table tbody tr.dispatch-date-row+tr td.dispatch-driver-cell *,
.dispatch-table tbody tr.dispatch-date-row+tr td.dispatch-bh-cell * {
    box-shadow: none !important;
}
/* Dispatch: remove the ghost divider line under the FIRST data row after each date row */
.dispatch-table .dispatch-date-row+tr td {
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}
/* Force logout button visibility on mobile */
.logout-btn {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.logout-btn:hover,
.logout-btn:focus {
    background-color: #dc3545 !important;
    color: #fff !important;
}

@media (max-width: 768px) {
    .navbar .logout-btn {
        color: #dc3545 !important;
    }
}
/* Logout button – consistent across desktop and mobile */
.logout-btn {
    background: transparent;
    color: #dc3545 !important;
    border: 1px solid #dc3545 !important;
    box-shadow: none !important;
}

/* Hover (desktop) */
.logout-btn:hover {
    background-color: #dc3545 !important;
    color: #fff !important;
}

/* Kill bootstrap + mobile focus/active states */
.logout-btn:focus,
.logout-btn:active,
.logout-btn:focus-visible {
    background: transparent !important;
    color: #dc3545 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Mobile tap highlight (iOS/Android) */
.logout-btn {
    -webkit-tap-highlight-color: transparent;
}

/* Logout should look like other header links (e.g., ADMIN) but be red and consistent on mobile */
.tms-logout-link {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;

    color: #dc3545 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Kill browser/Bootstrap focus/active artifacts (blue/purple box) */
.tms-logout-link:focus,
.tms-logout-link:active,
.tms-logout-link:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Prevent mobile navbar link color rules from overriding logout */
@media (max-width: 768px) {
    .navbar .tms-logout-link {
        color: #dc3545 !important;
    }
}
/* === Normalize dispatch row borders (eliminate double lines) === */

/* The row owns the border */
.dispatch-row,
.dispatch-board-row,
tr.dispatch-row td {
    border-top: 1px solid #d0d0d0 !important;
    border-bottom: 1px solid #d0d0d0 !important;
}
/* Ensure adjacent rows don't double up */
.dispatch-row+.dispatch-row,
.dispatch-board-row+.dispatch-board-row {
    border-top: none !important;
}

/* Prevent sub-pixel blur */
.dispatch-row,
.dispatch-board-row {
    box-sizing: border-box;
    background-clip: padding-box;
}
/* === Dispatch row border normalization (does not touch pills/buttons) === */

/* Give rows a single, crisp divider */
.dispatch-row,
.dispatch-board-row {
    border-top: 1px solid #d0d0d0 !important;
    border-bottom: 1px solid #d0d0d0 !important;
    background-clip: padding-box;
}

/* Prevent double-thickness between adjacent rows */
.dispatch-row+.dispatch-row,
.dispatch-board-row+.dispatch-board-row {
    border-top: 0 !important;
}

/* If the table itself is drawing competing rules, disable only table cell bottom rules */
.dispatch-board-table tbody td,
.dispatch-board-table tbody th {
    border-bottom: 0 !important;
}

/* ============================================================
   DISPATCH BOARD OVERRIDES (BOTTOM-OF-FILE WINS)
   Fix: phantom borders under status controls + restore left rail
   ============================================================ */

/* 1) Restore left status rail (works with your existing row classes) */
.scope-staff.page-dispatch tr.dispatch-row.status-dispatched {
    box-shadow: inset 4px 0 0 #0072B2 !important;
}

.scope-staff.page-dispatch tr.dispatch-row.status-in_transit {
    box-shadow: inset 4px 0 0 #E69F00 !important;
}

.scope-staff.page-dispatch tr.dispatch-row.status-delivered {
    box-shadow: inset 4px 0 0 #009E73 !important;
}

.scope-staff.page-dispatch tr.dispatch-row.status-assigned {
    box-shadow: inset 4px 0 0 #56B4E9 !important;
}

.scope-staff.page-dispatch tr.dispatch-row.status-unassigned {
    box-shadow: inset 4px 0 0 #666666 !important;
}

.scope-staff.page-dispatch tr.dispatch-row.status-pending {
    box-shadow: inset 4px 0 0 #CC79A7 !important;
}

/* 2) The “line under buttons” is almost always the TD border showing through.
      Remove the bottom border ONLY for the status cell, and re-apply it on the row. */
.scope-staff.page-dispatch .dispatch-table tbody td.dispatch-status-cell {
    border-bottom: 0 !important;
    background-clip: padding-box;
}

/* Recreate a single clean divider across the row (not through the controls) */
.scope-staff.page-dispatch .dispatch-table tbody tr.dispatch-row {
    border-bottom: 1px solid #d0d0d0;
}

/* 3) Ensure controls don’t contribute shadows/underlines */
.scope-staff.page-dispatch .dispatch-status-btn,
.scope-staff.page-dispatch .dispatch-actions,
.scope-staff.page-dispatch .dispatch-status-inline {
    box-shadow: none !important;
    text-decoration: none !important;
    background-image: none !important;
}

/* 4) Date group row: avoid double-rule under the date header */
.scope-staff.page-dispatch .dispatch-date-row th {
    border-bottom: 0 !important;
}

.scope-staff.page-dispatch .dispatch-date-row+tr td {
    border-top: 0 !important;
}
/* DISPATCH: row owns separators (prevents lines cutting through pills/buttons) */
.scope-staff.page-dispatch .dispatch-table tbody td {
    border-bottom: 0 !important;
}

.scope-staff.page-dispatch .dispatch-table tbody tr.dispatch-row {
    border-bottom: 1px solid #e1e1e1;
}
/* ============================================================
   DISPATCH — SINGLE ROW BORDER OWNER (fixes line under pills)
   Put at VERY bottom of tms_theme.css
   ============================================================ */

/* 1) Dispatch cells never draw borders (prevents lines through pills/buttons) */
.scope-staff.page-dispatch .dispatch-table tbody td {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* 2) Row draws the divider (single crisp separator) */
.scope-staff.page-dispatch .dispatch-table tbody tr.dispatch-row {
    border-bottom: 1px solid #d0d0d0;
}

/* 3) Prevent any “double” border stacking */
.scope-staff.page-dispatch .dispatch-table tbody tr.dispatch-row+tr.dispatch-row {
    border-top: 0 !important;
}

/* 4) Date header → first row: no border above */
.scope-staff.page-dispatch .dispatch-date-row+tr.dispatch-row {
    border-top: 0 !important;
}

/* ================================
   State modifiers (rows, badges)
   Keep small and global.
   ================================ */

.tms-row-inactive {
    opacity: 0.65;
}

.tms-badge-muted {
    border: 1px solid var(--border-color);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 12px;
    opacity: 0.85;
}
/* Canonical list toolbar (Loads baseline) */
.tms-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
}

/* Keep the filter form compact and inline */
.tms-list-toolbar .tms-filter-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    flex: 1 1 auto;
    justify-content: center;
    /* keeps filters in the middle */
}

/* Fields inline (label + control on one line) */
.tms-list-toolbar .tms-filter-inline .tms-filter-field {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.tms-list-toolbar .tms-filter-inline .tms-filter-field span {
    display: inline;
    white-space: nowrap;
}

/* Buttons inline with fields */
.tms-list-toolbar .tms-filter-inline .tms-filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* Right-side actions stay right and tight */
.tms-list-toolbar .tms-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.tms-alert {
    border: 1px solid;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 13px;
}

.tms-alert-error {
    background: #fbeaea;
    border-color: #d9534f;
    color: #7a1f1f;
}

.tms-alert-info {
    background: #eef4ff;
    border-color: #9db7e8;
    color: #1f3f73;
}

body.auth-body .auth-password-wrap {
    position: relative;
}

body.auth-body .auth-password-wrap input {
    width: 100%;
    padding-right: 64px;
}

body.auth-body .auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 24px;
    padding: 0 6px;
    margin: 0;
    border: 0;
    background: transparent;
    color: #6b7280;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
}

body.auth-body .auth-password-toggle:hover {
    background: #e5e7eb;
    color: #111827;
}

body.auth-body .auth-password-toggle:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}

body.auth-body .auth-password-toggle[aria-pressed="true"] {
    color: #111827;
}

/* ================================
    Pagination (global, small, compact)
   ================================ */

.tms-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    font-size: 13px;
}

.tms-pagination__controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tms-pagination__summary,
.tms-pagination__current {
    color: #555;
    white-space: nowrap;
}