/* Consolidated custom styles from ui/*.html */
/* Each block is scoped by page body class to avoid cross-page style collisions. */

/* Source: ui/carrier_assigned.html */
.ckn-carrier-assigned {
    & {
        background-color: #f5f6fa;
        font-size: 0.9rem;
    }

    .page-header {
        background: #ffffff;
        border-bottom: 1px solid #dee2e6;
        position: sticky;
        top: 0;
        z-index: 1020;
    }

    .page-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 0;
    }

    .section-title {
        font-weight: 600;
        font-size: 0.95rem;
    }

    .card-header {
        border-bottom: 1px solid #edf0f3;
    }

    .badge-soft {
        background-color: #f1f3f5;
        color: #495057;
    }

    .job-card {
        border-left: 3px solid transparent;
        cursor: pointer;
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    .job-card:hover {
        background-color: #f8f9fb;
    }

    .job-card.selected {
        border-left-color: #0d6efd;
        background-color: #f0f6ff;
    }

    .job-meta {
        font-size: 0.8rem;
        color: #6c757d;
    }

    .pill-toggle .btn {
        font-size: 0.8rem;
    }

    .pill-toggle .btn-check:checked+.btn-outline-primary {
        color: #fff;
    }

    .table-sm th,
    .table-sm td {
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
    }

    .offcanvas-header {
        border-bottom: 1px solid #dee2e6;
    }

    .offcanvas-footer {
        border-top: 1px solid #dee2e6;
    }

    .truck-status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 4px;
    }

    .nav-tabs-sm .nav-link {
        padding: 0.35rem 0.75rem;
        font-size: 0.8rem;
    }

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

/* Source: ui/delivery_order_center.html */
.ckn-delivery-order-center {
    & {
        background-color: #f5f6fa;
        font-size: 0.875rem;
    }

    .page-header {
        background: #ffffff;
        border-bottom: 1px solid #dee2e6;
        position: sticky;
        top: 0;
        z-index: 20;
    }

    .page-title {
        font-size: 1.1rem;
        font-weight: 600;
    }

    .page-subtitle {
        font-size: 0.75rem;
        color: #94a3b8;
    }

    .breadcrumb {
        font-size: 0.75rem;
        margin-bottom: 0;
    }

    .card {
        border-radius: 0.5rem;
        box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
    }

    .card-header {
        background-color: #ffffff;
        border-bottom: 1px solid #f1f1f1;
    }

    .card-header-title {
        font-size: 0.85rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #64748b;
    }

    .badge-status {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
        border-radius: 999px;
    }

    .badge-status-valid {
        background: #dcfce7;
        color: #166534;
    }

    .badge-status-warning {
        background: #fef9c3;
        color: #854d0e;
    }

    .badge-status-error {
        background: #fee2e2;
        color: #b91c1c;
    }

    .badge-status-pending {
        background: #e0f2fe;
        color: #075985;
    }

    .table thead th {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #94a3b8;
        border-top: none;
        border-bottom: 1px solid #e2e8f0;
        background-color: #f8fafc;
    }

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

    .table-sm> :not(caption)>*>* {
        padding: 0.35rem 0.5rem;
    }

    .filter-toggle {
        font-size: 0.75rem;
    }

    .summary-label {
        font-size: 0.75rem;
        color: #64748b;
    }

    .summary-value {
        font-size: 1.1rem;
        font-weight: 600;
    }

    .mini-title {
        font-size: 0.8rem;
        font-weight: 600;
        color: #0f172a;
    }

    .form-label {
        font-size: 0.75rem;
        color: #64748b;
        margin-bottom: 0.15rem;
    }

    .form-control,
    .form-select {
        font-size: 0.8rem;
    }

    .pill-chip {
        display: inline-flex;
        align-items: center;
        padding: 0.15rem 0.5rem;
        border-radius: 999px;
        font-size: 0.7rem;
        background-color: #e2e8f0;
        color: #475569;
    }

    .pill-chip-dot {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        margin-right: 0.3rem;
    }

    .pill-dot-green {
        background-color: #16a34a;
    }

    .pill-dot-amber {
        background-color: #f97316;
    }

    .pill-dot-red {
        background-color: #dc2626;
    }

    .btn-ckn-primary {
        background: #ef4444;
        border-color: #ef4444;
        color: #fff;
    }

    .btn-ckn-primary:hover {
        background: #dc2626;
        border-color: #dc2626;
        color: #fff;
    }

    .btn-ckn-outline {
        border-color: #cbd5f5;
        color: #475569;
        background: #ffffff;
    }

    .btn-ckn-outline:hover {
        border-color: #94a3b8;
        background: #f8fafc;
    }

    .error-list {
        max-height: 220px;
        overflow-y: auto;
    }

    .error-list-item {
        font-size: 0.78rem;
        border-bottom: 1px dashed #e2e8f0;
        padding-bottom: 0.35rem;
        margin-bottom: 0.35rem;
    }

    .error-list-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

    .progress {
        background-color: #e5e7eb;
    }

    .priority-level {
        font-size: 0.7rem;
        padding: 0.15rem 0.45rem;
        border-radius: 999px;
        font-weight: 600;
    }

    .priority-high {
        background: #fee2e2;
        color: #b91c1c;
    }

    .priority-medium {
        background: #fef9c3;
        color: #854d0e;
    }

    .priority-low {
        background: #dcfce7;
        color: #166534;
    }

    .status-pill-assigned {
        background: #dcfce7;
        color: #15803d;
    }

    .status-pill-partial {
        background: #fef9c3;
        color: #854d0e;
    }

    .status-pill-unassigned {
        background: #fee2e2;
        color: #b91c1c;
    }

    .status-pill {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
        border-radius: 999px;
    }

    .mini-stat-label {
        font-size: 0.7rem;
        color: #64748b;
    }

    .mini-stat-value {
        font-size: 0.95rem;
        font-weight: 600;
    }

    .striped-bg {
        background: linear-gradient(135deg, #f9fafb 25%, #f3f4f6 25%, #f3f4f6 50%, #f9fafb 50%, #f9fafb 75%, #f3f4f6 75%, #f3f4f6 100%);
        background-size: 14px 14px;
    }
}

/* Source: ui/planning.html */
.ckn-planning {
    & {
        background-color: #f5f6fa;
        font-size: 0.9rem;
    }

    .page-header {
        background: #ffffff;
        border-bottom: 1px solid #dee2e6;
        position: sticky;
        top: 0;
        z-index: 1020;
    }

    .page-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 0;
    }

    .breadcrumb {
        font-size: 0.75rem;
        margin-bottom: 0;
    }

    .card {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
        border-radius: 0.6rem;
    }

    .card-header {
        background: #ffffff;
        border-bottom: 1px solid #f1f1f1;
    }

    .filter-toggle-btn {
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .kpi-card-value {
        font-size: 1.4rem;
        font-weight: 700;
    }

    .kpi-card-label {
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #6c757d;
    }

    .kpi-trend {
        font-size: 0.75rem;
    }

    .planning-layout {
        min-height: calc(100vh - 180px);
    }

    .panel-title {
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #6c757d;
        margin-bottom: 0.35rem;
    }

    .unplanned-list-table thead th {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #6c757d;
    }

    .unplanned-list-table tbody td {
        vertical-align: middle;
        font-size: 0.8rem;
    }

    .planning-lane {
        border-radius: 0.6rem;
        border: 1px dashed #dee2e6;
        background: #ffffff;
        display: flex;
        flex-direction: column;
    }

    .planning-lane-header {
        padding: 0.6rem 0.75rem;
        border-bottom: 1px solid #f1f1f1;
        background: #f8f9fa;
    }

    .planning-lane-body {
        padding: 0.5rem 0.75rem;
        gap: 0.35rem;
        display: flex;
        flex-direction: column;
    }

    .shipment-card {
        border-radius: 0.45rem;
        border: 1px solid #e5e7eb;
        background: #ffffff;
        padding: 0.45rem 0.55rem;
        cursor: grab;
        transition: box-shadow 0.15s ease, transform 0.15s ease;
    }

    .shipment-card:hover {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
    }

    .shipment-card small {
        font-size: 0.7rem;
    }

    .capacity-bar {
        height: 6px;
        border-radius: 999px;
        background: #e9ecef;
        overflow: hidden;
    }

    .capacity-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, #dc3545, #fd7e14);
    }

    .capacity-bar-fill-ok {
        height: 100%;
        background: linear-gradient(90deg, #198754, #20c997);
    }

    .bottom-status-bar {
        position: sticky;
        bottom: 0;
        z-index: 1010;
        background: rgba(255, 255, 255, 0.96);
        border-top: 1px solid #dee2e6;
        backdrop-filter: blur(8px);
    }

    .badge-pill {
        border-radius: 999px;
        font-weight: 500;
        padding: 0.3rem 0.55rem;
        font-size: 0.7rem;
    }

    .form-label {
        font-size: 0.78rem;
        color: #6c757d;
    }

    .modal-title {
        font-size: 0.95rem;
        font-weight: 600;
    }

    .map-placeholder {
        background: radial-gradient(circle at top, #e7f1ff, #d0e3ff);
        border-radius: 0.75rem;
        border: 1px solid #cfe2ff;
        height: 220px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0d6efd;
        font-size: 0.85rem;
        font-weight: 500;
    }

    .route-step {
        font-size: 0.8rem;
    }

    /* ER-specific chips / labels */
    .er-chip {
        font-size: 0.68rem;
        border-radius: 999px;
        padding: 0.15rem 0.5rem;
        background-color: #f3f4f6;
        color: #4b5563;
    }

    .mini-badge {
        font-size: 0.7rem;
        border-radius: 999px;
        padding: 0.1rem 0.45rem;
    }

    .mini-badge-soldto {
        background-color: #e0ecff;
        color: #1d4ed8;
    }

    .mini-badge-shipto {
        background-color: #dcfce7;
        color: #15803d;
    }

    .shipment-id {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 0.78rem;
    }

    .leg-label {
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #6c757d;
        margin-top: 0.15rem;
        margin-bottom: 0.15rem;
    }

    .tree-connector {
        position: relative;
        padding-left: 1rem;
    }

    .tree-connector::before {
        content: "";
        position: absolute;
        top: 0.45rem;
        left: 0;
        width: 0.7rem;
        height: 1px;
        background-color: #d1d5db;
    }

    .tree-connector::after {
        content: "";
        position: absolute;
        top: 0.45rem;
        left: 0;
        width: 1px;
        height: 100%;
        background-color: #d1d5db;
    }

    .tree-connector:last-child::after {
        height: 0.45rem;
    }

    .er-box-title {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #6b7280;
    }

    .er-box {
        border-radius: 0.5rem;
        border: 1px dashed #d1d5db;
        padding: 0.4rem 0.6rem;
        background-color: #f9fafb;
    }

    /* NEW: loading time display style (DO) */
    .loading-time-display {
        font-size: 0.7rem;
        color: #6c757d;
    }

    /* NEW: loading slot badge for shipment */
    .loading-slot-badge {
        font-size: 0.7rem;
        border-radius: 999px;
        padding: 0.15rem 0.6rem;
        background-color: #ffffff;
        border: 1px dashed #d1d5db;
        color: #495057;
    }
}

/* Source: ui/queuing.html */
.ckn-queuing {
    & {
        background-color: #f5f6fa;
        font-size: 0.9rem;
    }

    .page-header {
        background: linear-gradient(135deg, #ffffff 0%, #f5f6fa 60%, #e9f0ff 100%);
        border-bottom: 1px solid #e0e4f0;
    }

    .page-title {
        font-size: 1.4rem;
        font-weight: 600;
        color: #1f2933;
    }

    .breadcrumb {
        font-size: 0.8rem;
    }

    .breadcrumb-item+.breadcrumb-item::before {
        content: "›";
    }

    .breadcrumb a {
        text-decoration: none;
        color: #64748b;
    }

    .breadcrumb .active {
        color: #111827;
        font-weight: 500;
    }

    .section-title {
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #6b7280;
    }

    .card {
        border-radius: 0.6rem;
        border: 1px solid #e5e7eb;
    }

    .card-header {
        border-bottom: 1px solid #e5e7eb;
    }

    .stats-card-title {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #6b7280;
    }

    .stats-card-value {
        font-size: 1.2rem;
        font-weight: 600;
        color: #111827;
    }

    .stats-card-sub {
        font-size: 0.75rem;
        color: #9ca3af;
    }

    .filter-label {
        font-size: 0.8rem;
        color: #4b5563;
    }

    .form-control,
    .form-select {
        font-size: 0.85rem;
    }

    .toggle-advanced.collapsed i {
        transform: rotate(0deg);
        transition: transform 0.15s ease;
    }

    .toggle-advanced i {
        transform: rotate(90deg);
        transition: transform 0.15s ease;
    }

    .pill-tabs .nav-link {
        padding: 0.35rem 0.8rem;
        font-size: 0.8rem;
        border-radius: 999px;
        color: #4b5563;
    }

    .pill-tabs .nav-link.active {
        background-color: #111827;
        color: #ffffff;
    }

    .table thead th {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #6b7280;
        border-top: none;
        border-bottom: 1px solid #e5e7eb;
        background-color: #f9fafb;
        vertical-align: middle;
    }

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

    .table tbody tr:hover {
        background-color: #f3f4f6;
        cursor: pointer;
    }

    .table-sm> :not(caption)>*>* {
        padding: 0.55rem 0.5rem;
    }

    .mono {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 0.8rem;
    }

    .badge-status {
        font-size: 0.7rem;
        padding: 0.25rem 0.55rem;
        border-radius: 999px;
    }

    .badge-q-wait {
        background-color: #eff6ff;
        color: #1d4ed8;
    }

    .badge-q-reg {
        background-color: #ecfdf3;
        color: #15803d;
    }

    .badge-q-loading {
        background-color: #fef3c7;
        color: #b45309;
    }

    .badge-q-finish {
        background-color: #e5f9f2;
        color: #047857;
    }

    .badge-q-cancel {
        background-color: #e5e7eb;
        color: #374151;
    }

    .mini-pill {
        font-size: 0.7rem;
        border-radius: 999px;
        padding: 0.12rem 0.5rem;
        background-color: #f3f4f6;
        color: #4b5563;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        margin-right: 0.25rem;
        margin-bottom: 0.25rem;
        white-space: nowrap;
    }

    .mini-pill-blue {
        background-color: #e0ecff;
        color: #1d4ed8;
    }

    .mini-pill-green {
        background-color: #dcfce7;
        color: #15803d;
    }

    .mini-pill-amber {
        background-color: #fef3c7;
        color: #b45309;
    }

    .mini-pill-red {
        background-color: #fee2e2;
        color: #b91c1c;
    }

    .table-actions .btn {
        font-size: 0.75rem;
        padding: 0.2rem 0.45rem;
    }

    .sticky-toolbar {
        border-top: 1px solid #e5e7eb;
        padding-top: 0.5rem;
        margin-top: 0.25rem;
    }

    .hint {
        font-size: 0.78rem;
        color: #64748b;
    }

    @media (max-width: 991.98px) {
        .page-header .d-flex.justify-content-between {
            flex-direction: column;
            align-items: flex-start !important;
            gap: 0.75rem;
        }

        .sticky-toolbar {
            flex-direction: column;
            align-items: flex-start !important;
            gap: 0.5rem;
        }
    }
}

/* Source: ui/shipment_management.html */
.ckn-shipment-management {
    & {
        background-color: #f5f6fa;
        font-size: 0.9rem;
    }

    .page-header {
        background: linear-gradient(135deg, #ffffff 0%, #f5f6fa 60%, #e9f0ff 100%);
        border-bottom: 1px solid #e0e4f0;
    }

    .page-title {
        font-size: 1.4rem;
        font-weight: 600;
        color: #1f2933;
    }

    .breadcrumb {
        font-size: 0.8rem;
    }

    .breadcrumb-item+.breadcrumb-item::before {
        content: "›";
    }

    .breadcrumb a {
        text-decoration: none;
        color: #64748b;
    }

    .breadcrumb .active {
        color: #111827;
        font-weight: 500;
    }

    .section-title {
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #6b7280;
    }

    .card {
        border-radius: 0.6rem;
        border: 1px solid #e5e7eb;
    }

    .card-header {
        border-bottom: 1px solid #e5e7eb;
    }

    .stats-card-title {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #6b7280;
    }

    .stats-card-value {
        font-size: 1.2rem;
        font-weight: 600;
        color: #111827;
    }

    .stats-card-sub {
        font-size: 0.75rem;
        color: #9ca3af;
    }

    .filter-label {
        font-size: 0.8rem;
        color: #4b5563;
    }

    .form-control,
    .form-select {
        font-size: 0.85rem;
    }

    .toggle-advanced.collapsed i {
        transform: rotate(0deg);
        transition: transform 0.15s ease;
    }

    .toggle-advanced i {
        transform: rotate(90deg);
        transition: transform 0.15s ease;
    }

    .pill-tabs .nav-link {
        padding: 0.35rem 0.8rem;
        font-size: 0.8rem;
        border-radius: 999px;
        color: #4b5563;
    }

    .pill-tabs .nav-link.active {
        background-color: #111827;
        color: #ffffff;
    }

    .table thead th {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #6b7280;
        border-top: none;
        border-bottom: 1px solid #e5e7eb;
        background-color: #f9fafb;
    }

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

    .table tbody tr:hover {
        background-color: #f3f4f6;
        cursor: pointer;
    }

    .table-sm> :not(caption)>*>* {
        padding: 0.55rem 0.5rem;
    }

    .shipment-id {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 0.8rem;
    }

    .badge-status {
        font-size: 0.7rem;
        padding: 0.25rem 0.55rem;
        border-radius: 999px;
    }

    .badge-status-planning {
        background-color: #eff6ff;
        color: #1d4ed8;
    }

    .badge-status-dispatched {
        background-color: #ecfdf3;
        color: #15803d;
    }

    .badge-status-in-transit {
        background-color: #fef3c7;
        color: #b45309;
    }

    .badge-status-completed {
        background-color: #e5f9f2;
        color: #047857;
    }

    .badge-status-delayed {
        background-color: #fef2f2;
        color: #b91c1c;
    }

    .badge-status-cancelled {
        background-color: #e5e7eb;
        color: #374151;
    }

    .badge-priority {
        font-size: 0.7rem;
        border-radius: 999px;
        padding: 0.15rem 0.5rem;
    }

    .badge-priority-high {
        background-color: #fee2e2;
        color: #b91c1c;
    }

    .badge-priority-normal {
        background-color: #e5f3ff;
        color: #1d4ed8;
    }

    .badge-priority-low {
        background-color: #e5e7eb;
        color: #374151;
    }

    .table-actions .btn {
        font-size: 0.75rem;
        padding: 0.2rem 0.45rem;
    }

    .progress {
        height: 0.45rem;
    }

    .relation-label {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #9ca3af;
    }

    .relation-pill {
        font-size: 0.7rem;
        border-radius: 999px;
        padding: 0.1rem 0.5rem;
        background-color: #f3f4f6;
        color: #4b5563;
    }

    .mini-badge {
        font-size: 0.7rem;
        border-radius: 999px;
        padding: 0.1rem 0.45rem;
    }

    .mini-badge-soldto {
        background-color: #e0ecff;
        color: #1d4ed8;
    }

    .mini-badge-shipto {
        background-color: #dcfce7;
        color: #15803d;
    }

    .sticky-toolbar {
        border-top: 1px solid #e5e7eb;
        padding-top: 0.5rem;
        margin-top: 0.25rem;
    }

    .er-box-title {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #6b7280;
    }

    .er-box {
        border-radius: 0.5rem;
        border: 1px dashed #d1d5db;
        padding: 0.5rem 0.75rem;
        background-color: #f9fafb;
    }

    .er-arrow {
        font-size: 0.7rem;
        color: #9ca3af;
    }

    .er-label {
        font-size: 0.7rem;
        color: #4b5563;
    }

    .tree-connector {
        position: relative;
        padding-left: 1rem;
    }

    .tree-connector::before {
        content: "";
        position: absolute;
        top: 0.4rem;
        left: 0;
        width: 0.6rem;
        height: 1px;
        background-color: #d1d5db;
    }

    .tree-connector::after {
        content: "";
        position: absolute;
        top: 0.4rem;
        left: 0;
        width: 1px;
        height: 100%;
        background-color: #d1d5db;
    }

    .tree-connector:last-child::after {
        height: 0.4rem;
    }

    @media (max-width: 1199.98px) {
        .main-layout {
            flex-direction: column;
        }
    }

    @media (max-width: 991.98px) {
        .page-header .d-flex.justify-content-between {
            flex-direction: column;
            align-items: flex-start !important;
            gap: 0.75rem;
        }

        .sticky-toolbar {
            flex-direction: column;
            align-items: flex-start !important;
            gap: 0.5rem;
        }
    }
}