/* Custom Theme Colors for BPMS Commercial */

/* Global page background - override Bootstrap */
:root {
    --bs-body-bg: #e9ecef;
}

/* Shared compact request document workspace */
.request-documents-workspace { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); gap: 10px; align-items: stretch; }
.request-documents-workspace-list-only { grid-template-columns: 1fr; }
.request-documents-upload { min-width: 0; }
.request-documents-workspace .document-upload-zone { display: flex; align-items: center; justify-content: flex-start; min-height: 68px; height: 100%; padding: 10px 12px; border: 1px dashed var(--app-primary); border-radius: var(--app-radius); background: var(--app-primary-subtle); text-align: left; cursor: pointer; }
.request-documents-workspace .document-upload-zone:hover { border-color: var(--app-primary-strong); background: var(--app-primary-subtle); }
.request-documents-workspace .document-upload-zone .dz-message { width: 100%; margin: 0; }
.request-documents-workspace .document-upload-zone .dz-preview { display: none; }
.document-upload-compact { display: flex; align-items: center; gap: 10px; }
.document-upload-compact > i { flex: 0 0 auto; color: var(--app-primary); font-size: 20px; }
.document-upload-copy { min-width: 0; }
.document-upload-title { display: block; color: var(--app-text); font-size: 11px; font-weight: 650; }
.document-upload-meta { display: block; margin-top: 2px; color: var(--app-text-muted); font-size: 9px; line-height: 1.3; }
.request-documents-list { min-width: 0; border: 1px solid var(--app-border); border-radius: var(--app-radius); background: var(--app-surface); overflow: hidden; }
.request-documents-list:empty { display: none; }
.document-list-compact .list-group { border-radius: 0; }
.document-list-compact .list-group-item { min-height: 44px; padding: 6px 8px; border-right: 0; border-left: 0; }
.document-list-compact .list-group-item:first-child { border-top: 0; }
.document-list-compact .list-group-item:last-child { border-bottom: 0; }
.document-list-icon { width: 24px; color: var(--app-text-muted); font-size: 14px; text-align: center; }
.document-list-name { overflow: hidden; margin: 0; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.document-list-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--app-text-muted); font-size: 9px; }
.document-empty-compact { display: flex; align-items: center; gap: 8px; min-height: 68px; padding: 10px 12px; color: var(--app-text-muted); font-size: 10px; }
.document-empty-compact i { font-size: 14px; }

@media (max-width: 767.98px) {
    .request-documents-workspace { grid-template-columns: 1fr; }
}

html body,
body {
    background-color: #e9ecef !important;
}

/* Navigation Styles */
.navbar-custom {
    background-color: #142437 !important;
    background-image: linear-gradient(135deg, #142437 0%, #1a2b42 100%);
    border-bottom: 2px solid #2c3e50;
    box-shadow: 0 2px 10px rgba(20, 36, 55, 0.3);
}

.navbar-custom .navbar-brand {
    color: #ffffff !important;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.navbar-custom .navbar-brand:hover {
    color: #e8f4fd !important;
}

.navbar-custom .navbar-nav .nav-link {
    color: #d4e6f1 !important;
    font-weight: 500;
    transition: all 0.3s ease;
}

.navbar-custom .navbar-nav .nav-link:hover,
.navbar-custom .navbar-nav .nav-link:focus {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.navbar-custom .navbar-nav .nav-link.active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

/* Light navigation theme (portal setting) */
.navbar-custom-light {
    background-color: #f8f9fa !important;
    background-image: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    border-bottom: 1px solid #dee2e6;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.navbar-custom-light .navbar-brand {
    color: #212529 !important;
    font-weight: 600;
}

.navbar-custom-light .navbar-brand:hover {
    color: #0d6efd !important;
}

.navbar-custom-light .navbar-nav .nav-link {
    color: #495057 !important;
    font-weight: 500;
    transition: all 0.3s ease;
}

.navbar-custom-light .navbar-nav .nav-link:hover,
.navbar-custom-light .navbar-nav .nav-link:focus {
    color: #212529 !important;
    background-color: rgba(0, 0, 0, 0.06);
    border-radius: 4px;
}

.navbar-custom-light .navbar-nav .nav-link.active {
    color: #0d6efd !important;
    background-color: rgba(13, 110, 253, 0.1);
    border-radius: 4px;
}

.navbar-custom-light .navbar-toggler {
    border-color: rgba(0, 0, 0, 0.15);
    color: #212529;
}

.navbar-custom-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(33, 37, 41, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Badge Styles for Tables */
.badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.4em 0.6em;
    border-radius: 0.375rem;
}

/* Transportation Type Badges */
.badge.bg-transport-sea {
    background-color: #0dcaf0 !important;
    color: #000 !important;
}

.badge.bg-transport-truck {
    background-color: #198754 !important;
    color: #fff !important;
}

.badge.bg-transport-air {
    background-color: #0d6efd !important;
    color: #fff !important;
}

.badge.bg-transport-rail {
    background-color: #ffc107 !important;
    color: #000 !important;
}

/* Direction Badges */
.badge.bg-direction {
    background-color: #6f42c1 !important;
    color: #fff !important;
}

/* Sales Band Badges */
.badge.bg-sales-band {
    background-color: #142437 !important;
    color: #fff !important;
}

/* Status Badges with better contrast */
.badge.bg-status-draft {
    background-color: #6c757d !important;
    color: #fff !important;
}

.badge.bg-status-submitted {
    background-color: #fd7e14 !important;
    color: #fff !important;
}

.badge.bg-status-progress {
    background-color: #20c997 !important;
    color: #fff !important;
}

.badge.bg-status-completed {
    background-color: #198754 !important;
    color: #fff !important;
}

.badge.bg-status-cancelled {
    background-color: #dc3545 !important;
    color: #fff !important;
}

/* Table improvements */
.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: rgba(20, 36, 55, 0.02);
}

.table > tbody > tr:hover {
    background-color: rgba(20, 36, 55, 0.05);
    transition: background-color 0.15s ease-in-out;
}

/* Card headers */
.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

/* Button improvements */
.btn-primary {
    background-color: #142437;
    border-color: #142437;
}

.btn-primary:hover {
    background-color: #1a2b42;
    border-color: #1a2b42;
}

/* Form controls */
.form-control:focus {
    border-color: #142437;
    box-shadow: 0 0 0 0.2rem rgba(20, 36, 55, 0.25);
}

.form-select:focus {
    border-color: #142437;
    box-shadow: 0 0 0 0.2rem rgba(20, 36, 55, 0.25);
}

/* Responsive improvements */
@media (max-width: 768px) {
    .navbar-custom .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .badge {
        font-size: 0.7rem;
        padding: 0.3em 0.5em;
    }
}

/* Tom Select: match Bootstrap .form-control height and alignment when on same line */
/* Use same height as Bootstrap 5 form-control: calc(1.5em + 0.75rem + 2px) ≈ 38px */
.ts-wrapper {
    min-height: calc(1.5em + 0.75rem + 2px) !important;
    display: flex !important;
    align-items: stretch !important;
    /* Avoid being shifted up by baseline/inline alignment next to form-control */
    vertical-align: top !important;
    margin: 0 !important;
}
/* Same vertical spacing as .form-control when inside .mb-3 (label + control) */
.mb-3 > .ts-wrapper {
    display: block !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.ts-wrapper .ts-control {
    /* Exact same height as Bootstrap .form-control for alignment in one row */
    min-height: calc(1.5em + 0.75rem + 2px) !important;
    height: calc(1.5em + 0.75rem + 2px) !important;
    padding: 0.375rem 0.75rem !important;
    padding-right: max(0.75rem, 2.25rem) !important;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    font-size: 1rem;
    line-height: 1.5;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    box-sizing: border-box !important;
}
.ts-wrapper .ts-control > input {
    line-height: 1.5 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}
.ts-wrapper.single .ts-control .item {
    line-height: 1.5;
    padding: 0;
}
.ts-wrapper.focus .ts-control,
.ts-wrapper .ts-control.focus {
    border-color: #142437;
    box-shadow: 0 0 0 0.2rem rgba(20, 36, 55, 0.25);
}

/* Sea transport: Tom Select in same row as form-control — align height and position */
.sea-transport-port-control {
    display: block;
    min-height: calc(1.5em + 0.75rem + 2px);
    position: relative;
}
/* Hidden original input must not affect layout — fully out of flow */
.sea-transport-port-control .ts-hidden-accessible {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}
.sea-transport-port-control .ts-wrapper {
    margin: 0 !important;
    margin-top: 0 !important;
    position: relative !important;
    top: 0 !important;
}

/* Port TomSelect Styles (keep border/radius, rest inherited from above) */
.port-tomselect .ts-control {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}

.port-tomselect .ts-control.focus {
    border-color: #142437;
    box-shadow: 0 0 0 0.2rem rgba(20, 36, 55, 0.25);
}

.port-option {
    padding: 8px 12px;
}

.port-option .port-name {
    font-weight: 500;
    color: #333;
    margin-bottom: 2px;
}

.port-option .port-locode {
    font-size: 0.85em;
    color: #666;
    font-family: monospace;
}

/* Airport Autocomplete Styles (for consistency) */
.airport-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-top: 2px;
}

.airport-suggestion {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s ease;
}

.airport-suggestion:hover,
.airport-suggestion.active {
    background-color: #f8f9fa;
}

.airport-suggestion:last-child {
    border-bottom: none;
}

.airport-name {
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.airport-location {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 2px;
}

.airport-code {
    font-size: 0.8em;
    color: #007bff;
    font-weight: 500;
    font-family: monospace;
}

/* Calm Operations design system */
:root {
    --app-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --app-bg: #f6f7f9;
    --app-surface: #ffffff;
    --app-surface-subtle: #f9fafb;
    --app-surface-muted: #f2f4f7;
    --app-text: #182230;
    --app-text-secondary: #667085;
    --app-text-tertiary: #98a2b3;
    --app-border: #e4e7ec;
    --app-border-strong: #d0d5dd;
    --app-primary: #175cd3;
    --app-primary-hover: #1849a9;
    --app-primary-subtle: #eff8ff;
    --app-sidebar: #102a43;
    --app-sidebar-hover: #173b5e;
    --app-sidebar-text: #d7e3ee;
    --app-sidebar-muted: #8fa9bf;
    --app-success: #067647;
    --app-success-subtle: #ecfdf3;
    --app-warning: #b54708;
    --app-warning-subtle: #fffaeb;
    --app-danger: #b42318;
    --app-danger-subtle: #fef3f2;
    --app-info: #175cd3;
    --app-info-subtle: #eff8ff;
    --app-radius-sm: 6px;
    --app-radius: 8px;
    --app-radius-lg: 12px;
    --app-shadow-dropdown: 0 12px 32px rgba(16, 24, 40, 0.14);
    --app-sidebar-width: 240px;
    --app-sidebar-collapsed-width: 72px;
    --app-topbar-height: 56px;
    --bs-body-font-family: var(--app-font);
    --bs-body-font-size: 0.875rem;
    --bs-body-color: var(--app-text);
    --bs-body-bg: var(--app-bg);
    --bs-primary: var(--app-primary);
    --bs-primary-rgb: 23, 92, 211;
    --bs-border-color: var(--app-border);
    --bs-border-radius: var(--app-radius-sm);
}

html,
html body,
body.app-body {
    min-height: 100%;
    background: var(--app-bg) !important;
    color: var(--app-text);
    font-family: var(--app-font);
    font-size: 14px;
    line-height: 1.45;
    overflow-x: hidden;
}

.app-shell {
    min-height: 100vh;
}

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    display: flex;
    width: var(--app-sidebar-width);
    flex-direction: column;
    overflow: hidden;
    background: var(--app-sidebar);
    color: var(--app-sidebar-text);
    transition: width 180ms ease, transform 180ms ease;
}

.app-brand {
    display: flex;
    min-height: var(--app-topbar-height);
    align-items: center;
    gap: 11px;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    text-decoration: none;
}

.app-brand:hover { color: #fff; }

.app-brand-mark {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    overflow: hidden;
    position: relative;
    border-radius: var(--app-radius);
    background: rgba(255, 255, 255, 0.11);
    font-size: 17px;
}

.app-brand-logo {
    position: absolute;
    inset: 4px;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.app-brand-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.15;
    white-space: nowrap;
}

.app-brand-copy strong {
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
}

.app-brand-copy small {
    margin-top: 3px;
    color: var(--app-sidebar-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.app-nav {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px 10px;
}

.app-nav-label {
    display: block;
    margin: 14px 10px 6px;
    color: var(--app-sidebar-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-nav-label:first-child { margin-top: 2px; }

.app-nav-link {
    display: flex;
    min-height: 38px;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border-radius: var(--app-radius-sm);
    color: var(--app-sidebar-text);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 120ms ease, color 120ms ease;
}

.app-nav-link > i:first-child {
    width: 20px;
    flex: 0 0 20px;
    color: var(--app-sidebar-muted);
    font-size: 15px;
    text-align: center;
}

.app-nav-link:hover {
    background: var(--app-sidebar-hover);
    color: #fff;
}

.app-nav-link.active {
    background: rgba(77, 166, 255, 0.15);
    color: #fff;
}

.app-nav-link.active > i:first-child { color: #74b9ff; }

.app-nav-group summary { list-style: none; }
.app-nav-group summary::-webkit-details-marker { display: none; }
.app-nav-chevron {
    margin-left: auto;
    color: var(--app-sidebar-muted);
    font-size: 10px;
    transition: transform 120ms ease;
}
.app-nav-group[open] .app-nav-chevron { transform: rotate(180deg); }

.app-nav-submenu {
    display: grid;
    gap: 2px;
    padding: 3px 0 5px 41px;
}

.app-nav-submenu a {
    overflow: hidden;
    padding: 6px 8px;
    border-radius: var(--app-radius-sm);
    color: var(--app-sidebar-muted);
    font-size: 12px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-nav-submenu a:hover {
    background: var(--app-sidebar-hover);
    color: #fff;
}

.app-sidebar-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--app-sidebar-muted);
    font-size: 10px;
    white-space: nowrap;
}

.app-version {
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
}

.app-workspace {
    display: flex;
    min-height: 100vh;
    margin-left: var(--app-sidebar-width);
    flex-direction: column;
    transition: margin-left 180ms ease;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    min-height: var(--app-topbar-height);
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid var(--app-border);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
}

.app-icon-button {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--app-radius-sm);
    background: transparent;
    color: var(--app-text-secondary);
}

.app-icon-button:hover {
    border-color: var(--app-border);
    background: var(--app-surface-subtle);
    color: var(--app-text);
}

.app-topbar-title {
    color: var(--app-text-secondary);
    font-size: 12px;
    font-weight: 500;
}

.app-user-button {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 7px 4px 4px;
    border: 0;
    border-radius: var(--app-radius);
    background: transparent;
    color: var(--app-text);
    text-align: left;
}

.app-user-button:hover { background: var(--app-surface-muted); }
.app-user-button::after { color: var(--app-text-tertiary); }

.app-user-avatar {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    background: var(--app-primary-subtle);
    color: var(--app-primary);
    font-size: 12px;
    font-weight: 700;
}

.app-user-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.app-user-copy strong { font-size: 12px; font-weight: 600; }
.app-user-copy small { margin-top: 2px; color: var(--app-text-tertiary); font-size: 10px; }
.app-user-menu { min-width: 190px; }

.app-main {
    width: 100%;
    flex: 1;
    padding: 20px;
}

.app-footer {
    padding: 10px 20px 14px;
    color: var(--app-text-tertiary);
    font-size: 11px;
    text-align: right;
}

.app-sidebar-overlay { display: none; }

.app-sidebar-collapsed .app-sidebar { width: var(--app-sidebar-collapsed-width); }
.app-sidebar-collapsed .app-workspace { margin-left: var(--app-sidebar-collapsed-width); }
.app-sidebar-collapsed .app-brand { padding-inline: 18px; }
.app-sidebar-collapsed .app-brand-copy,
.app-sidebar-collapsed .app-nav-label,
.app-sidebar-collapsed .app-nav-link span,
.app-sidebar-collapsed .app-nav-chevron,
.app-sidebar-collapsed .app-nav-submenu,
.app-sidebar-collapsed .app-sidebar-footer-copy { display: none; }
.app-sidebar-collapsed .app-nav-link { justify-content: center; padding-inline: 10px; }
.app-sidebar-collapsed .app-nav-link > i:first-child { margin: 0; }
.app-sidebar-collapsed .app-sidebar-footer { justify-content: center; padding-inline: 8px; }

.app-shell-anonymous .app-workspace { margin-left: 0; }
.app-public-brand { color: var(--app-text); font-weight: 650; text-decoration: none; }

/* Shared surfaces and controls */
h1, .h1 { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.025em; }
h2, .h2 { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.015em; }
h3, .h3 { font-size: 1.125rem; font-weight: 600; }
h4, .h4, h5, .h5 { font-size: 1rem; font-weight: 600; }
h6, .h6 { font-size: 0.875rem; font-weight: 600; }

.card {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    background: var(--app-surface);
    box-shadow: none;
}

.card-header,
.card-header.bg-primary,
.card-header.bg-success,
.card-header.bg-warning,
.card-header.bg-info {
    padding: 12px 16px;
    border-bottom: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg) var(--app-radius-lg) 0 0 !important;
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
}

.card-body { padding: 16px; }

.btn {
    min-height: 36px;
    border-radius: var(--app-radius-sm);
    font-size: 13px;
    font-weight: 550;
}

.btn-sm { min-height: 30px; padding: 0.25rem 0.55rem; font-size: 12px; }
.btn-primary,
.btn-info {
    border-color: var(--app-primary);
    background: var(--app-primary);
    color: #fff;
}
.btn-primary:hover,
.btn-info:hover {
    border-color: var(--app-primary-hover);
    background: var(--app-primary-hover);
    color: #fff;
}

.btn-success { border-color: var(--app-success); background: var(--app-success); }
.btn-secondary { border-color: var(--app-border-strong); background: var(--app-surface); color: var(--app-text-secondary); }
.btn-secondary:hover { border-color: var(--app-border-strong); background: var(--app-surface-muted); color: var(--app-text); }

.form-label { margin-bottom: 5px; color: var(--app-text-secondary); font-size: 12px; font-weight: 550; }
.form-control,
.form-select {
    min-height: 36px;
    border-color: var(--app-border-strong);
    border-radius: var(--app-radius-sm);
    background-color: var(--app-surface);
    color: var(--app-text);
    font-size: 13px;
}
.form-control:focus,
.form-select:focus {
    border-color: #84adff;
    box-shadow: 0 0 0 3px rgba(23, 92, 211, 0.1);
}
.form-control::placeholder { color: var(--app-text-tertiary); }

.dropdown-menu {
    padding: 5px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-dropdown);
    font-size: 13px;
}
.dropdown-item { padding: 7px 9px; border-radius: 5px; }
.dropdown-item:hover { background: var(--app-surface-muted); }

.table { margin-bottom: 0; color: var(--app-text); font-size: 13px; }
.table > :not(caption) > * > * { padding: 9px 12px; border-bottom-color: var(--app-border); }
.table > thead > tr > th {
    border-bottom-width: 1px;
    background: var(--app-surface-subtle);
    color: var(--app-text-secondary);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    white-space: nowrap;
}
.table-striped > tbody > tr:nth-of-type(odd) > td { background: transparent; }
.table > tbody > tr:hover > * { background: var(--app-primary-subtle); }

.badge {
    padding: 0.32rem 0.48rem;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.01em;
}
.badge.bg-transport-sea,
.badge.bg-transport-truck,
.badge.bg-transport-air,
.badge.bg-transport-rail,
.badge.bg-direction,
.badge.bg-sales-band { background: var(--app-surface-muted) !important; color: var(--app-text-secondary) !important; }
.badge.bg-status-draft { background: var(--app-surface-muted) !important; color: var(--app-text-secondary) !important; }
.badge.bg-status-progress,
.badge.bg-status-completed { background: var(--app-success-subtle) !important; color: var(--app-success) !important; }
.badge.bg-status-submitted { background: var(--app-warning-subtle) !important; color: var(--app-warning) !important; }
.badge.bg-status-cancelled { background: var(--app-danger-subtle) !important; color: var(--app-danger) !important; }

.alert { padding: 10px 12px; border-radius: var(--app-radius); font-size: 13px; }
.pagination { gap: 4px; }
.page-link { border-radius: var(--app-radius-sm) !important; color: var(--app-text-secondary); font-size: 12px; }
.page-item.active .page-link { border-color: var(--app-primary); background: var(--app-primary); }

@media (max-width: 991.98px) {
    .app-sidebar { width: min(280px, 86vw); transform: translateX(-100%); }
    .app-workspace,
    .app-sidebar-collapsed .app-workspace { margin-left: 0; }
    .app-sidebar-collapsed .app-sidebar { width: min(280px, 86vw); }
    .app-sidebar-collapsed .app-brand-copy,
    .app-sidebar-collapsed .app-nav-label,
    .app-sidebar-collapsed .app-nav-link span,
    .app-sidebar-collapsed .app-nav-chevron,
    .app-sidebar-collapsed .app-nav-submenu,
    .app-sidebar-collapsed .app-sidebar-footer-copy { display: initial; }
    .app-sidebar-collapsed .app-nav-link { justify-content: flex-start; }
    .app-sidebar-open .app-sidebar { transform: translateX(0); }
    .app-sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 1035;
        display: block;
        border: 0;
        background: rgba(16, 24, 40, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease;
    }
    .app-sidebar-open .app-sidebar-overlay { opacity: 1; pointer-events: auto; }
    .app-main { padding: 16px; }
}

@media (max-width: 575.98px) {
    .app-main { padding: 12px; }
    .app-topbar { padding-inline: 12px; }
    .app-user-copy, .app-topbar-title { display: none; }
}