.wlc-ops-dashboard {

    --ops-navy: #081a4b;

    --ops-indigo: #30339b;

    --ops-blue: #1677ff;

    --ops-border: #dbe5f2;

    --ops-muted: #667085;

    --ops-soft: #f7f9fc;

    --ops-shadow: 0 18px 50px rgba(15, 31, 71, .08);

    width: calc(100vw - 32px);

    max-width: 1800px;

    margin-left: 50%;

    transform: translateX(-50%);

    padding: 46px 16px 70px;

    color: #101828;

    font-family: Inter, Arial, sans-serif;

}



.wlc-ops-dashboard * {

    box-sizing: border-box;

}



.wlc-ops-hero {

    display: flex;

    justify-content: space-between;

    gap: 28px;

    align-items: flex-start;

    margin-bottom: 28px;

}



.wlc-ops-eyebrow,

.wlc-ops-panel-eyebrow {

    display: block;

    margin-bottom: 8px;

    color: var(--ops-indigo);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: .1em;

    text-transform: uppercase;

}



.wlc-ops-hero h1 {

    margin: 0 0 8px;

    color: #101828;

    font-size: clamp(30px, 4vw, 44px);

    line-height: 1.08;

}



.wlc-ops-hero p {

    margin: 0;

    max-width: 720px;

    color: var(--ops-muted);

    font-size: 15px;

    line-height: 1.6;

}



.wlc-ops-user-card {

    min-width: 210px;

    padding: 20px 22px;

    border: 1px solid var(--ops-border);

    border-radius: 16px;

    background: #fff;

    box-shadow: var(--ops-shadow);

}



.wlc-ops-user-card span,

.wlc-ops-user-card strong,

.wlc-ops-user-card small {

    display: block;

}



.wlc-ops-user-card span,

.wlc-ops-user-card small {

    color: var(--ops-muted);

    font-size: 12px;

}



.wlc-ops-user-card strong {

    margin: 6px 0;

    color: var(--ops-indigo);

    font-size: 16px;

}



.wlc-ops-notice {

    display: flex;

    gap: 10px;

    align-items: center;

    margin-bottom: 22px;

    padding: 16px 18px;

    border-radius: 14px;

}



.wlc-ops-notice.success {

    border: 1px solid #abefc6;

    background: #ecfdf3;

    color: #067647;

}



.wlc-ops-notice span {

    color: #344054;

}



.wlc-ops-kpis {

    display: grid;

    grid-template-columns: repeat(7, minmax(0, 1fr));

    gap: 14px;

    margin-bottom: 24px;

}



.wlc-ops-kpi {

    min-width: 0;

    padding: 20px;

    border: 1px solid var(--ops-border);

    border-radius: 16px;

    background: #fff;

    box-shadow: 0 10px 30px rgba(15, 31, 71, .05);

}



.wlc-ops-kpi-label,

.wlc-ops-kpi small {

    display: block;

}



.wlc-ops-kpi-label {

    color: #475467;

    font-size: 12px;

    font-weight: 800;

}



.wlc-ops-kpi strong {

    display: block;

    margin: 8px 0 4px;

    color: var(--ops-navy);

    font-size: 30px;

    line-height: 1;

}



.wlc-ops-kpi small {

    color: #98a2b3;

    font-size: 11px;

    line-height: 1.4;

}



.wlc-ops-kpi.delivered {

    border-color: #abefc6;

    background: #f6fef9;

}



.wlc-ops-kpi.returned {

    border-color: #d0d5dd;

    background: #f9fafb;

}



.wlc-ops-workspace {

    display: grid;

    grid-template-columns: minmax(0, 1fr) 240px;

    gap: 22px;

    align-items: start;

}



.wlc-ops-main,

.wlc-ops-quick {

    border: 1px solid var(--ops-border);

    border-radius: 18px;

    background: #fff;

    box-shadow: var(--ops-shadow);

}



.wlc-ops-main {

    min-width: 0;

    overflow: hidden;

}



.wlc-ops-quick {

    position: sticky;

    top: 24px;

    padding: 22px;

}



.wlc-ops-panel-header {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    align-items: center;

    padding: 24px 26px 12px;

}



.wlc-ops-panel-header.compact {

    padding: 0 0 16px;

}



.wlc-ops-panel-header h2 {

    margin: 0;

    color: #101828;

    font-size: 23px;

}



.wlc-ops-count {

    padding: 8px 12px;

    border-radius: 999px;

    background: #eef2ff;

    color: var(--ops-indigo);

    font-size: 12px;

    font-weight: 800;

}



.wlc-ops-filters {

    display: grid;

    grid-template-columns: minmax(220px, 1.5fr) minmax(170px, .8fr) minmax(170px, .8fr) auto auto;

    gap: 12px;

    align-items: end;

    padding: 12px 26px 22px;

    border-bottom: 1px solid var(--ops-border);

}



.wlc-ops-filter label {

    display: block;

    margin-bottom: 7px;

    color: #344054;

    font-size: 12px;

    font-weight: 800;

}



.wlc-ops-filter input,

.wlc-ops-filter select {

    width: 100%;

    min-height: 44px;

    padding: 9px 12px;

    border: 1px solid #d0d5dd;

    border-radius: 10px;

    background: #fff;

    color: #101828;

    font-size: 13px;

}



.wlc-ops-filter.checkbox {

    align-self: center;

    padding-top: 20px;

}



.wlc-ops-filter.checkbox label {

    display: flex;

    gap: 8px;

    align-items: center;

    margin: 0;

    white-space: nowrap;

}



.wlc-ops-filter.checkbox input {

    width: 16px;

    min-height: 16px;

}



.wlc-ops-filter-actions {

    display: flex;

    gap: 8px;

}



.wlc-ops-btn {

    display: inline-flex;

    min-height: 44px;

    align-items: center;

    justify-content: center;

    padding: 0 15px;

    border: 0;

    border-radius: 10px;

    font-size: 12px;

    font-weight: 900;

    text-decoration: none;

    cursor: pointer;

    white-space: nowrap;

}



.wlc-ops-btn.primary {

    background: var(--ops-indigo);

    color: #fff;

}



.wlc-ops-btn.secondary {

    border: 1px solid #d0d5dd;

    background: #fff;

    color: #344054;

}



.wlc-ops-table-wrap {

    overflow-x: visible;

}



.wlc-ops-table {

    width: 100%;

    min-width: 0;

    table-layout: fixed;

    border-collapse: collapse;

}



.wlc-ops-table th,

.wlc-ops-table td {

    padding: 12px 8px;

    border-bottom: 1px solid #e9edf4;

    text-align: left;

    vertical-align: middle;

}



.wlc-ops-table th {

    background: #f8fafc;

    color: #475467;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: .04em;

    text-transform: uppercase;

}



.wlc-ops-table td {

    color: #344054;

    font-size: 12px;

}



.wlc-ops-table tbody tr:hover {

    background: #fbfcff;

}



.wlc-ops-table strong,

.wlc-ops-table small {

    display: block;

}



.wlc-ops-table small {

    margin-top: 4px;

    color: #98a2b3;

    line-height: 1.4;

}



.wlc-ops-awb {

    color: var(--ops-indigo);

    font-weight: 900;

    text-decoration: none;

}



.wlc-ops-mp {

    color: var(--ops-navy);

    font-size: 13px;

}



.wlc-ops-no-mp,

.wlc-ops-muted {

    color: #98a2b3;

}



.wlc-ops-status {

    display: inline-flex;

    align-items: center;

    min-height: 28px;

    padding: 5px 10px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 900;

    white-space: nowrap;

}



.wlc-ops-status.created {

    background: #eef2ff;

    color: #3538cd;

}



.wlc-ops-status.received {

    background: #e0f2fe;

    color: #026aa2;

}



.wlc-ops-status.gl {

    background: #fef7c3;

    color: #854a0e;

}



.wlc-ops-status.flight {

    background: #f4f3ff;

    color: #5925dc;

}



.wlc-ops-status.customs {

    background: #fffaeb;

    color: #b54708;

}



.wlc-ops-status.delivered {

    background: #ecfdf3;

    color: #067647;

}



.wlc-ops-status.returned {

    background: #f2f4f7;

    color: #344054;

}



.wlc-ops-status.canceled {

    background: #fef3f2;

    color: #b42318;

}



.wlc-ops-status.unknown {

    background: #f2f4f7;

    color: #667085;

}



.wlc-ops-comment {

    display: inline-block;

    max-width: 180px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.wlc-ops-update-btn {

    min-height: 36px;

    padding: 0 14px;

    border: 1px solid #c7d7fe;

    border-radius: 9px;

    background: #eef2ff;

    color: var(--ops-indigo);

    font-size: 12px;

    font-weight: 900;

    cursor: pointer;

}



.wlc-ops-update-btn:hover {

    background: var(--ops-indigo);

    color: #fff;

}



.wlc-ops-new-row {

    animation: wlcOpsHighlight 5s ease both;

}



@keyframes wlcOpsHighlight {

    0%, 60% {

        background: #eff8ff;

    }

    100% {

        background: transparent;

    }

}



.wlc-ops-empty {

    padding: 50px !important;

    color: #667085;

    text-align: center !important;

}



.wlc-ops-quick-links {

    display: grid;

    gap: 10px;

}



.wlc-ops-quick-links a {

    display: flex;

    gap: 10px;

    align-items: center;

    min-height: 48px;

    padding: 0 14px;

    border: 1px solid var(--ops-border);

    border-radius: 11px;

    color: #101828;

    font-size: 13px;

    font-weight: 800;

    text-decoration: none;

}



.wlc-ops-quick-links a:hover {

    border-color: #a4bcfd;

    background: #f5f8ff;

    color: var(--ops-indigo);

}



.wlc-ops-quick-links span {

    color: var(--ops-indigo);

    font-size: 18px;

}



.wlc-ops-legend {

    margin-top: 24px;

    padding-top: 20px;

    border-top: 1px solid var(--ops-border);

}



.wlc-ops-legend h3 {

    margin: 0 0 12px;

    color: #344054;

    font-size: 13px;

}



.wlc-ops-legend div {

    display: flex;

    gap: 8px;

    align-items: center;

    margin-bottom: 8px;

    color: #667085;

    font-size: 11px;

}



.wlc-ops-dot {

    width: 9px;

    height: 9px;

    border-radius: 999px;

    background: #98a2b3;

}



.wlc-ops-dot.created { background: #6172f3; }

.wlc-ops-dot.received { background: #0ba5ec; }

.wlc-ops-dot.gl { background: #fdb022; }

.wlc-ops-dot.flight { background: #7f56d9; }

.wlc-ops-dot.customs { background: #f79009; }

.wlc-ops-dot.delivered { background: #12b76a; }

.wlc-ops-dot.returned { background: #667085; }

.wlc-ops-dot.canceled { background: #f04438; }





.wlc-ops-table th:nth-child(1),

.wlc-ops-table td:nth-child(1) { width: 7%; }



.wlc-ops-table th:nth-child(2),

.wlc-ops-table td:nth-child(2) { width: 7%; }



.wlc-ops-table th:nth-child(3),

.wlc-ops-table td:nth-child(3) { width: 10%; }



.wlc-ops-table th:nth-child(4),

.wlc-ops-table td:nth-child(4) { width: 18%; }



.wlc-ops-table th:nth-child(5),

.wlc-ops-table td:nth-child(5) { width: 14%; }



.wlc-ops-table th:nth-child(6),

.wlc-ops-table td:nth-child(6) { width: 10%; }



.wlc-ops-table th:nth-child(7),

.wlc-ops-table td:nth-child(7) { width: 11%; }



.wlc-ops-table th:nth-child(8),

.wlc-ops-table td:nth-child(8) { width: 15%; }



.wlc-ops-table th:nth-child(9),

.wlc-ops-table td:nth-child(9) { width: 8%; }



.wlc-ops-table td {

    overflow-wrap: anywhere;

    word-break: normal;

}



.wlc-ops-status {

    white-space: normal;

    text-align: center;

    line-height: 1.25;

}



.wlc-ops-comment {

    display: block;

    max-width: none;

    white-space: normal;

    line-height: 1.35;

}



.wlc-ops-update-btn {

    width: 100%;

    padding: 0 8px;

}



@media (max-width: 1100px) {

    .wlc-ops-kpis {

        grid-template-columns: repeat(4, minmax(0, 1fr));

    }



    .wlc-ops-workspace {

        grid-template-columns: 1fr;

    }



    .wlc-ops-quick {

        position: static;

    }



    .wlc-ops-filters {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



@media (max-width: 720px) {

    .wlc-ops-dashboard {

        width: calc(100vw - 16px);

        padding: 30px 8px 50px;

    }



    .wlc-ops-hero {

        flex-direction: column;

    }



    .wlc-ops-user-card {

        width: 100%;

    }



    .wlc-ops-kpis {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



    .wlc-ops-filters {

        grid-template-columns: 1fr;

    }



    .wlc-ops-filter.checkbox {

        padding-top: 0;

    }



    .wlc-ops-filter-actions {

        flex-direction: column;

    }



    .wlc-ops-btn {

        width: 100%;

    }

}





/* Update modal */

.wlc-ops-modal {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 24px;

}



.wlc-ops-modal.is-open {

    display: flex;

}



.wlc-ops-modal-backdrop {

    position: absolute;

    inset: 0;

    background: rgba(15, 23, 42, .58);

    backdrop-filter: blur(3px);

}



.wlc-ops-modal-dialog {

    position: relative;

    z-index: 1;

    width: min(680px, 100%);

    max-height: calc(100vh - 48px);

    overflow-y: auto;

    padding: 28px;

    border: 1px solid var(--ops-border);

    border-radius: 20px;

    background: #fff;

    box-shadow: 0 30px 90px rgba(15, 23, 42, .28);

}



.wlc-ops-modal-close {

    position: absolute;

    top: 14px;

    right: 16px;

    width: 36px;

    height: 36px;

    border: 0;

    border-radius: 10px;

    background: #f2f4f7;

    color: #475467;

    font-size: 24px;

    line-height: 1;

    cursor: pointer;

}



.wlc-ops-modal-header {

    padding-right: 45px;

    margin-bottom: 20px;

}



.wlc-ops-modal-header h2 {

    margin: 0 0 7px;

    color: #101828;

    font-size: 25px;

}



.wlc-ops-modal-header p {

    margin: 0;

    color: #667085;

    font-size: 13px;

    line-height: 1.5;

}



.wlc-ops-modal-summary {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 10px;

    margin-bottom: 22px;

}



.wlc-ops-modal-summary div {

    min-width: 0;

    padding: 13px;

    border: 1px solid #e4e7ec;

    border-radius: 12px;

    background: #f8fafc;

}



.wlc-ops-modal-summary span,

.wlc-ops-modal-summary strong {

    display: block;

}



.wlc-ops-modal-summary span {

    margin-bottom: 5px;

    color: #667085;

    font-size: 10px;

    font-weight: 800;

    text-transform: uppercase;

}



.wlc-ops-modal-summary strong {

    overflow: hidden;

    color: #101828;

    font-size: 13px;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.wlc-ops-modal-form {

    display: grid;

    gap: 16px;

}



.wlc-ops-modal-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 14px;

}



.wlc-ops-modal-field label {

    display: block;

    margin-bottom: 7px;

    color: #344054;

    font-size: 12px;

    font-weight: 900;

}



.wlc-ops-modal-field input,

.wlc-ops-modal-field select,

.wlc-ops-modal-field textarea {

    width: 100%;

    min-height: 46px;

    padding: 10px 12px;

    border: 1px solid #d0d5dd;

    border-radius: 10px;

    background: #fff;

    color: #101828;

    font-size: 13px;

}



.wlc-ops-modal-field textarea {

    min-height: 90px;

    resize: vertical;

}



.wlc-ops-modal-field input:focus,

.wlc-ops-modal-field select:focus,

.wlc-ops-modal-field textarea:focus {

    outline: none;

    border-color: var(--ops-indigo);

    box-shadow: 0 0 0 3px rgba(48, 51, 155, .12);

}



.wlc-ops-modal-message {

    min-height: 20px;

    padding: 0;

    color: #b42318;

    font-size: 12px;

    font-weight: 800;

}



.wlc-ops-modal-message.success {

    padding: 10px 12px;

    border: 1px solid #abefc6;

    border-radius: 10px;

    background: #ecfdf3;

    color: #067647;

}



.wlc-ops-modal-message.error {

    padding: 10px 12px;

    border: 1px solid #fecdca;

    border-radius: 10px;

    background: #fef3f2;

    color: #b42318;

}



.wlc-ops-modal-actions {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    padding-top: 4px;

}



body.wlc-ops-modal-open {

    overflow: hidden;

}



@media (max-width: 720px) {

    .wlc-ops-modal {

        padding: 10px;

    }



    .wlc-ops-modal-dialog {

        max-height: calc(100vh - 20px);

        padding: 22px 16px;

    }



    .wlc-ops-modal-summary,

    .wlc-ops-modal-grid {

        grid-template-columns: 1fr;

    }



    .wlc-ops-modal-actions {

        flex-direction: column-reverse;

    }

}

/* =========================================================

   WLC OPERATIONS — STATUS COLOR SYSTEM

   ========================================================= */



/* Base status badge */

.wlc-ops-status {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 30px;

    padding: 6px 12px;

    border: 1px solid transparent;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: 0.01em;

    white-space: nowrap;

}



/* CREATED */

.wlc-ops-status.created {

    background: #eef2f6;

    border-color: #d8e0ea;

    color: #475467;

}



/* RECEIVED */

.wlc-ops-status.received {

    background: #e8f1ff;

    border-color: #bdd3ff;

    color: #175cd3;

}



/* GREEN LIGHT */

.wlc-ops-status.gl {

    background: #e9f9ef;

    border-color: #a9dfba;

    color: #087443;

}



/* IN FLIGHT */

.wlc-ops-status.flight {

    background: #e7e9ff;

    border-color: #b9bdf7;

    color: #2f3192;

}



/* CUSTOMS */

.wlc-ops-status.customs {

    background: #fff5d6;

    border-color: #f3d57b;

    color: #9a6700;

}



/* DELIVERED */

.wlc-ops-status.delivered {

    background: #dcfce7;

    border-color: #86d9a3;

    color: #067647;

}



/* RETURNED */

.wlc-ops-status.returned {

    background: #fff0df;

    border-color: #f4bd83;

    color: #b54708;

}



/* CANCELED */

.wlc-ops-status.canceled {

    background: #feeceb;

    border-color: #f5b2ae;

    color: #b42318;

}



/* UNKNOWN */

.wlc-ops-status.unknown {

    background: #f2f4f7;

    border-color: #d0d5dd;

    color: #667085;

}


/* =========================================================

   STATUS LEGEND COLORS

   ========================================================= */



.wlc-ops-dot {

    display: inline-block;

    width: 10px;

    height: 10px;

    margin-right: 8px;

    border-radius: 50%;

    background: #98a2b3;

}



.wlc-ops-dot.created {

    background: #98a2b3;

}



.wlc-ops-dot.received {

    background: #4f8df7;

}



.wlc-ops-dot.gl {

    background: #22a45d;

}



.wlc-ops-dot.flight {

    background: #4f46c8;

}



.wlc-ops-dot.customs {

    background: #e0a800;

}



.wlc-ops-dot.delivered {

    background: #12b76a;

}



.wlc-ops-dot.returned {

    background: #f79009;

}



.wlc-ops-dot.canceled {

    background: #d92d20;

}


.wlc-ops-dashboard .wlc-ops-table .wlc-ops-status {

    display: inline-flex !important;

    align-items: center !important;

    min-height: 30px !important;

    padding: 6px 12px !important;

    border-radius: 999px !important;

    font-size: 11px !important;

    font-weight: 800 !important;

    white-space: nowrap !important;

}



.wlc-ops-dashboard .wlc-ops-status.created {

    background: #eef2f6 !important;

    border: 1px solid #d8e0ea !important;

    color: #475467 !important;

}



.wlc-ops-dashboard .wlc-ops-status.received {

    background: #e8f1ff !important;

    border: 1px solid #bdd3ff !important;

    color: #175cd3 !important;

}



.wlc-ops-dashboard .wlc-ops-status.gl {

    background: #e9f9ef !important;

    border: 1px solid #a9dfba !important;

    color: #087443 !important;

}



.wlc-ops-dashboard .wlc-ops-status.flight {

    background: #e7e9ff !important;

    border: 1px solid #b9bdf7 !important;

    color: #2f3192 !important;

}



.wlc-ops-dashboard .wlc-ops-status.customs {

    background: #fff5d6 !important;

    border: 1px solid #f3d57b !important;

    color: #9a6700 !important;

}



.wlc-ops-dashboard .wlc-ops-status.delivered {

    background: #dcfce7 !important;

    border: 1px solid #86d9a3 !important;

    color: #067647 !important;

}



.wlc-ops-dashboard .wlc-ops-status.returned {

    background: #fff0df !important;

    border: 1px solid #f4bd83 !important;

    color: #b54708 !important;

}



.wlc-ops-dashboard .wlc-ops-status.canceled {

    background: #feeceb !important;

    border: 1px solid #f5b2ae !important;

    color: #b42318 !important;

}