/* =========================================================
   AL HABIB TRAVEL CRM
   ADMIN DASHBOARD
========================================================= */


/* =========================================================
   DESIGN TOKENS
========================================================= */

:root {

    --admin-bg:
        #f3f5f6;

    --admin-surface:
        #ffffff;

    --admin-surface-soft:
        #f8faf9;


    --admin-teal-950:
        #003f3e;

    --admin-teal-900:
        #004b49;

    --admin-teal-850:
        #075653;

    --admin-teal-800:
        #0c625d;

    --admin-teal-700:
        #247168;

    --admin-teal-600:
        #347d72;


    --admin-green-soft:
        #e2f3ef;

    --admin-green-text:
        #117668;


    --admin-amber:
        #ffb31a;

    --admin-amber-dark:
        #d78c00;

    --admin-amber-soft:
        #fff3d6;


    --admin-red:
        #c33c47;

    --admin-red-soft:
        #fdeced;


    --admin-blue:
        #3479a8;

    --admin-blue-soft:
        #eaf3fa;


    --admin-text:
        #20383b;

    --admin-text-soft:
        #64787b;

    --admin-muted:
        #879699;


    --admin-border:
        #dce5e4;

    --admin-border-soft:
        #e9eeee;


    --admin-shadow:
        0 10px 30px
        rgba(
            20,
            55,
            56,
            0.07
        );


    --admin-radius:
        14px;

}


/* =========================================================
   PAGE
========================================================= */

body {

    background:
        var(--admin-bg);

}


.admin-dashboard {

    width: 100%;

    max-width: 1600px;

    margin:
        0
        auto;

    padding:
        18px
        22px
        40px;

    color:
        var(--admin-text);

}


/* =========================================================
   TOP COMMAND BAR
========================================================= */

.admin-command-bar {

    position: relative;

    min-height: 135px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    margin-bottom: 16px;

    padding:
        24px
        30px;

    overflow: hidden;

    border-radius:
        20px;

    background:

        radial-gradient(
            circle at 95% 0%,
            rgba(
                255,
                255,
                255,
                0.11
            ) 0,
            rgba(
                255,
                255,
                255,
                0.02
            ) 22%,
            transparent 23%
        ),

        linear-gradient(
            118deg,
            #004544 0%,
            #005452 55%,
            #376f63 100%
        );

    box-shadow:
        0 14px 34px
        rgba(
            0,
            63,
            62,
            0.16
        );

}


.admin-command-bar::after {

    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    right: -70px;

    top: -135px;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.045
        );

    pointer-events: none;

}


.admin-command-main {

    position: relative;

    z-index: 2;

}


.admin-command-eyebrow {

    display: block;

    margin-bottom: 5px;

    color:
        var(--admin-amber);

    font-size: 11px;

    font-weight: 850;

    letter-spacing: 1.4px;

    text-transform: uppercase;

}


.admin-command-title h1 {

    margin: 0;

    color: #ffffff;

    font-size: 30px;

    font-weight: 850;

    letter-spacing:
        -0.8px;

    line-height: 1.1;

}


.admin-command-title p {

    margin:
        6px
        0
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.66
        );

    font-size: 12px;

    font-weight: 550;

}


.admin-command-actions {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 10px;

}


.admin-action {

    height: 40px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        0
        18px;

    border-radius:
        10px;

    font-size: 12px;

    font-weight: 800;

    text-decoration: none;

    transition:
        transform 140ms ease,
        box-shadow 140ms ease,
        background 140ms ease;

}


.admin-action:hover {

    transform:
        translateY(-1px);

}


.admin-action-secondary {

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.65
        );

    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    color:
        var(--admin-text);

}


.admin-action-primary {

    border:
        1px solid
        var(--admin-amber);

    background:
        var(--admin-amber);

    color:
        #123f42;

    box-shadow:
        0 8px 18px
        rgba(
            255,
            179,
            26,
            0.22
        );

}


.admin-action-primary:hover {

    background:
        #ffbc32;

}


/* =========================================================
   MAIN PANEL
========================================================= */

.admin-panel {

    margin-bottom:
        14px;

    padding:
        16px;

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

    border-radius:
        var(--admin-radius);

    background:
        var(--admin-surface);

    box-shadow:
        0 3px 14px
        rgba(
            29,
            58,
            59,
            0.035
        );

}


/* =========================================================
   PANEL HEADER
========================================================= */

.admin-panel-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom:
        12px;

}


.admin-panel-heading {

    min-width: 0;

}


.admin-panel-kicker {

    display: block;

    margin-bottom:
        3px;

    color:
        #819093;

    font-size:
        8px;

    font-weight:
        850;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

}


.admin-panel-heading h2 {

    margin: 0;

    color:
        #173f42;

    font-size:
        18px;

    font-weight:
        850;

    line-height: 1.2;

    letter-spacing:
        -0.35px;

}


.admin-panel-heading p {

    margin:
        4px
        0
        0;

    color:
        var(--admin-muted);

    font-size:
        9px;

    font-weight:
        550;

}


.admin-panel-title-row {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

}


/* =========================================================
   PERIOD CHIPS
========================================================= */

.admin-period-chip,
.admin-live-chip {

    min-height: 24px;

    display: inline-flex;

    align-items: center;

    padding:
        0
        8px;

    border-radius:
        7px;

    border:
        1px solid
        #dce8e6;

    background:
        #f6f9f8;

    color:
        #537174;

    font-size:
        7px;

    font-weight:
        800;

    white-space:
        nowrap;

}


.admin-live-chip {

    background:
        var(--admin-green-soft);

    border-color:
        #c9e8e1;

    color:
        var(--admin-green-text);

}


/* =========================================================
   FILTER BAR
========================================================= */

.admin-filter-bar {

    display: flex;

    align-items: flex-end;

    flex-wrap: wrap;

    gap: 6px;

    margin: 0;

}


.admin-filter-field {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.admin-filter-field label {

    color:
        #809092;

    font-size:
        6.5px;

    font-weight:
        850;

    letter-spacing:
        0.55px;

    text-transform:
        uppercase;

}


.admin-filter-field input,
.admin-filter-field select {

    height: 29px;

    border:
        1px solid
        #d4dfde;

    border-radius:
        7px;

    outline: none;

    background:
        #fbfcfc;

    color:
        #294548;

    font-size:
        8px;

    font-weight:
        700;

    cursor: pointer;

}


.admin-filter-field input {

    width:
        128px;

    padding:
        0
        7px;

}


.admin-filter-field select {

    width:
        150px;

    padding:
        0
        7px;

}


.admin-filter-field input:hover,
.admin-filter-field select:hover {

    border-color:
        #aec6c3;

}


.admin-filter-field input:focus,
.admin-filter-field select:focus {

    border-color:
        var(--admin-teal-700);

    box-shadow:
        0 0 0 2px
        rgba(
            36,
            113,
            104,
            0.08
        );

}


.admin-filter-apply {

    height:
        29px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0
        12px;

    border:
        1px solid
        var(--admin-teal-900);

    border-radius:
        7px;

    background:
        var(--admin-teal-900);

    color:
        #ffffff;

    font-size:
        8px;

    font-weight:
        850;

    cursor:
        pointer;

}


.admin-filter-apply:hover {

    background:
        var(--admin-teal-800);

}


/* =========================================================
   COMPANY METRIC GRID
========================================================= */

.admin-metric-grid {

    display: grid;

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

    gap: 8px;

}


.admin-metric-card {

    position: relative;

    min-width: 0;

    min-height:
        100px;

    padding:
        12px;

    overflow: hidden;

    border:
        1px solid
        #e0e7e6;

    border-radius:
        10px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdfc 100%
        );

}


.admin-metric-card::after {

    content: "";

    position: absolute;

    width:
        70px;

    height:
        70px;

    right:
        -32px;

    bottom:
        -35px;

    border-radius:
        50%;

    background:
        rgba(
            0,
            79,
            77,
            0.025
        );

}


.admin-metric-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 7px;

    margin-bottom:
        12px;

}


.admin-metric-header > span:first-child {

    overflow: hidden;

    color:
        #6e7e81;

    font-size:
        8px;

    font-weight:
        850;

    letter-spacing:
        0.25px;

    text-transform:
        uppercase;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

}


.admin-metric-icon {

    width:
        25px;

    height:
        25px;

    flex:
        0 0 25px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        7px;

    background:
        #edf4f3;

    color:
        var(--admin-teal-800);

    font-size:
        9px;

    font-weight:
        900;

}


.admin-metric-card > strong {

    position: relative;

    z-index: 1;

    display: block;

    overflow: hidden;

    color:
        #1d4144;

    font-size:
        20px;

    font-weight:
        850;

    line-height:
        1.05;

    letter-spacing:
        -0.55px;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

}


.admin-metric-card > small {

    position: relative;

    z-index: 1;

    display: block;

    margin-top:
        7px;

    overflow: hidden;

    color:
        #8a9698;

    font-size:
        7.5px;

    font-weight:
        550;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

}


.admin-metric-positive {

    border-top:
        2px solid
        #3b9e8a;

}


.admin-metric-positive
.admin-metric-icon {

    background:
        #e2f4ef;

    color:
        #12806d;

}


.admin-metric-positive > strong {

    color:
        #12776b;

}


.admin-metric-warning {

    border-top:
        2px solid
        var(--admin-amber);

}


.admin-metric-warning
.admin-metric-icon {

    background:
        var(--admin-amber-soft);

    color:
        #a86d00;

}


.admin-metric-warning > strong {

    color:
        #aa7000;

}


.admin-metric-cash {

    border-top:
        2px solid
        var(--admin-teal-700);

}


/* =========================================================
   NEEDS ATTENTION
========================================================= */

.admin-attention-area {

    margin-top:
        10px;

    padding-top:
        10px;

    border-top:
        1px solid
        var(--admin-border-soft);

}


.admin-subsection-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom:
        6px;

}


.admin-subsection-heading strong {

    color:
        #536a6d;

    font-size:
        8px;

    font-weight:
        700;

}


.admin-attention-grid {

    display: grid;

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

    gap:
        7px;

}


.admin-attention-item {

    min-height:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        9px
        11px;

    border:
        1px solid
        #e0e7e6;

    border-left:
        3px solid
        var(--admin-amber);

    border-radius:
        8px;

    background:
        #ffffff;

    text-decoration:
        none;

    transition:
        background 120ms ease,
        border-color 120ms ease,
        transform 120ms ease;

}


.admin-attention-item:hover {

    transform:
        translateY(-1px);

    background:
        #fafcfb;

    border-color:
        #cbdad8;

}


.admin-attention-item > div {

    min-width: 0;

}


.admin-attention-item span {

    display: block;

    color:
        #31494c;

    font-size:
        8.5px;

    font-weight:
        800;

}


.admin-attention-item small {

    display: block;

    margin-top:
        3px;

    overflow:
        hidden;

    color:
        #8a9698;

    font-size:
        7px;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

}


.admin-attention-item > strong {

    flex:
        0
        0
        auto;

    color:
        #24474a;

    font-size:
        19px;

    font-weight:
        850;

}


.admin-attention-danger {

    border-left-color:
        #d74a54;

}


.admin-attention-danger > strong {

    color:
        #bd3540;

}


/* =========================================================
   FINANCIAL POSITION
========================================================= */

.admin-finance-grid {

    display: grid;

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

    gap:
        8px;

}


.admin-finance-card {

    min-width:
        0;

    min-height:
        96px;

    padding:
        12px;

    border:
        1px solid
        #dfe7e6;

    border-radius:
        10px;

    background:
        #ffffff;

}


.admin-finance-primary {

    border-top:
        3px solid
        var(--admin-teal-900);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f6fbfa 100%
        );

}


.admin-finance-label {

    display:
        block;

    color:
        #708184;

    font-size:
        8px;

    font-weight:
        850;

    text-transform:
        uppercase;

    letter-spacing:
        0.3px;

}


.admin-finance-card > strong {

    display:
        block;

    margin-top:
        12px;

    overflow:
        hidden;

    color:
        #124f50;

    font-size:
        19px;

    font-weight:
        850;

    letter-spacing:
        -0.45px;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

}


.admin-finance-card > small {

    display:
        block;

    margin-top:
        6px;

    overflow:
        hidden;

    color:
        #899698;

    font-size:
        7px;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

}


.admin-finance-supplier {

    grid-column:
        1
        /
        -1;

    min-height:
        auto;

    padding:
        12px
        14px;

    border-top:
        3px solid
        var(--admin-teal-700);

    background:
        linear-gradient(
            105deg,
            #ffffff 0%,
            #f4faf8 100%
        );

}


.admin-finance-supplier-main {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        12px;

}


.admin-finance-supplier-main strong {

    display:
        block;

    margin-top:
        4px;

    color:
        #0e5352;

    font-size:
        21px;

    font-weight:
        850;

}


.admin-finance-supplier-main small {

    display:
        block;

    margin-top:
        3px;

    color:
        #869496;

    font-size:
        7px;

}


.admin-finance-rate {

    flex:
        0
        0
        auto;

    padding:
        5px
        8px;

    border:
        1px solid
        #d8e5e2;

    border-radius:
        7px;

    background:
        #ffffff;

    color:
        #597275;

    font-size:
        7px;

    font-weight:
        750;

}


.admin-finance-breakdown {

    display: grid;

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

    gap:
        7px;

    margin-top:
        10px;

}


.admin-finance-breakdown > div {

    padding:
        7px
        9px;

    border:
        1px solid
        #dfe9e7;

    border-radius:
        8px;

    background:
        rgba(
            255,
            255,
            255,
            0.75
        );

}


.admin-finance-breakdown span {

    display:
        block;

    color:
        #819092;

    font-size:
        6.5px;

    font-weight:
        800;

    text-transform:
        uppercase;

}


.admin-finance-breakdown strong {

    display:
        block;

    margin-top:
        3px;

    color:
        #315154;

    font-size:
        9px;

    font-weight:
        850;

}


/* =========================================================
   VALUE STATES
========================================================= */

.admin-value-negative,
.negative {

    color:
        #bd3540 !important;

}


.admin-value-warning {

    color:
        #b47a05 !important;

}


.positive {

    color:
        #12806d !important;

}


/* =========================================================
   UPCOMING DEPARTURES TOOLBAR
========================================================= */

.admin-departures-header {

    align-items:
        flex-end;

}


.admin-departure-toolbar {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        flex-end;

    flex-wrap:
        wrap;

    gap:
        7px;

}


.admin-range-control {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

}


.admin-range-control > span {

    color:
        #809092;

    font-size:
        6.5px;

    font-weight:
        850;

    letter-spacing:
        0.45px;

    text-transform:
        uppercase;

}


.admin-range-buttons {

    display:
        flex;

    align-items:
        center;

    gap:
        2px;

    padding:
        2px;

    border:
        1px solid
        #dce5e4;

    border-radius:
        7px;

    background:
        #f6f8f8;

}


.admin-range-button {

    min-width:
        28px;

    height:
        24px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0
        6px;

    border:
        1px solid
        transparent;

    border-radius:
        5px;

    color:
        #607477;

    font-size:
        7px;

    font-weight:
        850;

    text-decoration:
        none;

}


.admin-range-button:hover {

    background:
        #ffffff;

    color:
        var(--admin-teal-900);

}


.admin-range-button.active {

    border-color:
        var(--admin-teal-900);

    background:
        var(--admin-teal-900);

    color:
        #ffffff;

}


.admin-departure-condition {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

}


.admin-departure-condition label {

    color:
        #809092;

    font-size:
        6.5px;

    font-weight:
        850;

    letter-spacing:
        0.45px;

    text-transform:
        uppercase;

}


.admin-departure-condition select {

    width:
        145px;

    height:
        28px;

    padding:
        0
        7px;

    border:
        1px solid
        #d5dfde;

    border-radius:
        7px;

    outline:
        none;

    background:
        #fbfcfc;

    color:
        #304b4e;

    font-size:
        8px;

    font-weight:
        700;

    cursor:
        pointer;

}


.admin-result-count {

    height:
        28px;

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    padding:
        0
        9px;

    border:
        1px solid
        #dce6e5;

    border-radius:
        7px;

    background:
        #f7faf9;

}


.admin-result-count strong {

    color:
        var(--admin-teal-900);

    font-size:
        11px;

    font-weight:
        900;

}


.admin-result-count span {

    color:
        #708184;

    font-size:
        7px;

    font-weight:
        750;

}


/* =========================================================
   TABLE CARD
========================================================= */

.admin-table-card {

    overflow:
        hidden;

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

    border-radius:
        10px;

    background:
        #ffffff;

}


.admin-table-scroll {

    width:
        100%;

    overflow-x:
        auto;

}


.admin-data-table {

    width:
        100%;

    border-collapse:
        collapse;

    table-layout:
        auto;

}


.admin-data-table thead {

    background:
        #f6f8f8;

}


.admin-data-table th {

    padding:
        9px
        10px;

    border-bottom:
        1px solid
        #dde6e5;

    color:
        #758487;

    font-size:
        7px;

    font-weight:
        850;

    letter-spacing:
        0.35px;

    text-align:
        left;

    text-transform:
        uppercase;

    white-space:
        nowrap;

}


.admin-data-table td {

    padding:
        9px
        10px;

    border-bottom:
        1px solid
        #edf1f1;

    color:
        #354e51;

    font-size:
        8px;

    vertical-align:
        middle;

}


.admin-data-table tbody tr:last-child td {

    border-bottom:
        none;

}


.admin-data-table tbody tr:hover {

    background:
        #fafcfc;

}


.text-center {

    text-align:
        center !important;

}


.text-right {

    text-align:
        right !important;

}


/* =========================================================
   BOOKING LINK
========================================================= */

.admin-booking-link {

    color:
        var(--admin-teal-800);

    font-size:
        8px;

    font-weight:
        850;

    text-decoration:
        none;

}


.admin-booking-link:hover {

    text-decoration:
        underline;

}


/* =========================================================
   PERSON CELL
========================================================= */

.admin-person-cell {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    min-width:
        145px;

}


.admin-avatar {

    width:
        27px;

    height:
        27px;

    flex:
        0
        0
        27px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        8px;

    background:
        linear-gradient(
            145deg,
            #e6f2f0,
            #d5e9e5
        );

    color:
        var(--admin-teal-900);

    font-size:
        9px;

    font-weight:
        900;

}


.admin-person-cell strong {

    display:
        block;

    color:
        #29474a;

    font-size:
        8px;

    font-weight:
        800;

}


.admin-person-cell small {

    display:
        block;

    margin-top:
        2px;

    color:
        #879496;

    font-size:
        6.5px;

}


/* =========================================================
   TRAVEL DATE
========================================================= */

.admin-travel-date {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

    min-width:
        90px;

}


.admin-travel-date strong {

    color:
        #2f4b4e;

    font-size:
        8px;

}


.admin-travel-date span {

    color:
        #819092;

    font-size:
        6.5px;

    font-weight:
        700;

}


.admin-travel-date span.urgent {

    color:
        #c43d48;

    font-weight:
        850;

}


/* =========================================================
   BALANCE
========================================================= */

.admin-balance {

    white-space:
        nowrap;

}


.admin-balance.due {

    color:
        #ba7b00;

}


.admin-balance.clear {

    color:
        #16806f;

}


/* =========================================================
   SERVICE STATUS
========================================================= */

.admin-service-status {

    min-width:
        57px;

    min-height:
        20px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0
        6px;

    border-radius:
        999px;

    font-size:
        6.5px;

    font-weight:
        800;

    white-space:
        nowrap;

}


.admin-service-status.confirmed {

    background:
        #ddf2ed;

    color:
        #137364;

}


.admin-service-status.reserved {

    background:
        #e8f2f9;

    color:
        #34739d;

}


.admin-service-status.pending {

    background:
        var(--admin-amber-soft);

    color:
        #a56b00;

}


.admin-service-status.none {

    background:
        #f0f2f2;

    color:
        #879294;

}


/* =========================================================
   TABLE ACTION
========================================================= */

.admin-table-action {

    min-height:
        23px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0
        8px;

    border:
        1px solid
        #cbdcda;

    border-radius:
        6px;

    background:
        #ffffff;

    color:
        var(--admin-teal-900);

    font-size:
        7px;

    font-weight:
        800;

    text-decoration:
        none;

}


.admin-table-action:hover {

    background:
        var(--admin-teal-900);

    border-color:
        var(--admin-teal-900);

    color:
        #ffffff;

}


/* =========================================================
   TABLE FOOTER
========================================================= */

.admin-table-footer {

    min-height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    padding:
        8px
        10px;

    border-top:
        1px solid
        #e7eded;

    background:
        #fafbfb;

    color:
        #809092;

    font-size:
        7px;

}


.admin-table-footer a {

    color:
        var(--admin-teal-800);

    font-weight:
        800;

    text-decoration:
        none;

}


.admin-table-footer a:hover {

    text-decoration:
        underline;

}


/* =========================================================
   EMPTY STATE
========================================================= */

.admin-empty-state {

    padding:
        24px
        18px;

    text-align:
        center;

}


.admin-empty-state strong {

    display:
        block;

    color:
        #29474a;

    font-size:
        11px;

}


.admin-empty-state p {

    margin:
        5px
        0
        0;

    color:
        #879496;

    font-size:
        8px;

}


/* =========================================================
   AGENT PERFORMANCE
========================================================= */

.admin-agent-table
.admin-rank {

    width:
        25px;

    height:
        25px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        7px;

    background:
        #eff3f3;

    color:
        #617578;

    font-size:
        8px;

    font-weight:
        850;

}


.admin-agent-table
.admin-rank.first {

    background:
        var(--admin-amber);

    color:
        #183f42;

    box-shadow:
        0 4px 10px
        rgba(
            255,
            179,
            26,
            0.24
        );

}


.admin-money-detail {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        2px;

}


.admin-money-detail strong {

    font-size:
        8px;

}


.admin-money-detail small {

    color:
        #879496;

    font-size:
        6.5px;

}


/* =========================================================
   RECENT ACTIVITY
========================================================= */

.admin-activity-list {

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

    border-radius:
        10px;

    overflow:
        hidden;

    background:
        #ffffff;

}


.admin-activity-item {

    display:
        grid;

    grid-template-columns:
        70px
        14px
        minmax(
            0,
            1fr
        )
        auto;

    align-items:
        center;

    gap:
        8px;

    min-height:
        48px;

    padding:
        7px
        10px;

    border-bottom:
        1px solid
        #edf1f1;

}


.admin-activity-item:last-child {

    border-bottom:
        none;

}


.admin-activity-item:hover {

    background:
        #fafcfc;

}


.admin-activity-time {

    display:
        flex;

    flex-direction:
        column;

    gap:
        1px;

}


.admin-activity-time strong {

    color:
        #466164;

    font-size:
        8px;

}


.admin-activity-time span {

    color:
        #8b9698;

    font-size:
        6.5px;

}


.admin-activity-dot {

    width:
        8px;

    height:
        8px;

    display:
        block;

    border-radius:
        50%;

    background:
        #8aa09e;

}


.activity-booking_created {

    background:
        #3479a8;

}


.activity-customer_payment {

    background:
        #24a58b;

}


.activity-supplier_payment {

    background:
        var(--admin-amber);

}


.activity-flight_confirmed,
.activity-hotel_confirmed,
.activity-visa_confirmed,
.activity-transport_confirmed {

    background:
        #5a897e;

}


.admin-activity-content {

    min-width:
        0;

}


.admin-activity-content > div {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        6px;

}


.admin-activity-content > div > strong {

    color:
        #2d4a4d;

    font-size:
        8px;

}


.admin-activity-content a {

    color:
        var(--admin-teal-700);

    font-size:
        7px;

    font-weight:
        800;

    text-decoration:
        none;

}


.admin-activity-content p {

    margin:
        2px
        0
        0;

    overflow:
        hidden;

    color:
        #829092;

    font-size:
        7px;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

}


.admin-activity-content p span {

    margin-left:
        5px;

}


.admin-activity-value {

    text-align:
        right;

    white-space:
        nowrap;

}


.admin-activity-value strong {

    color:
        #2e5556;

    font-size:
        8px;

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1500px) {

    .admin-dashboard {

        max-width:
            1750px;

    }


    .admin-metric-card {

        min-height:
            104px;

    }

}


/* =========================================================
   MEDIUM DESKTOP
========================================================= */

@media (max-width: 1250px) {

    .admin-metric-grid {

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

    }


    .admin-finance-grid {

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

    }


    .admin-departure-toolbar {

        width:
            100%;

        justify-content:
            flex-start;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .admin-dashboard {

        padding:
            14px
            12px
            30px;

    }


    .admin-command-bar {

        min-height:
            auto;

        padding:
            20px;

        align-items:
            flex-start;

    }


    .admin-command-title h1 {

        font-size:
            25px;

    }


    .admin-panel-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .admin-filter-bar {

        width:
            100%;

    }


    .admin-attention-grid {

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

    }


    .admin-finance-grid {

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

    }


    .admin-finance-supplier {

        grid-column:
            1
            /
            -1;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {

    .admin-command-bar {

        flex-direction:
            column;

    }


    .admin-command-actions {

        width:
            100%;

    }


    .admin-action {

        flex:
            1;

    }


    .admin-panel {

        padding:
            12px;

    }


    .admin-metric-grid {

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

    }


    .admin-metric-card {

        min-height:
            92px;

    }


    .admin-metric-card > strong {

        font-size:
            17px;

    }


    .admin-attention-grid {

        grid-template-columns:
            1fr;

    }


    .admin-finance-grid {

        grid-template-columns:
            1fr;

    }


    .admin-finance-supplier {

        grid-column:
            auto;

    }


    .admin-finance-breakdown {

        grid-template-columns:
            1fr;

    }


    .admin-filter-field {

        flex:
            1
            1
            120px;

    }


    .admin-filter-field input,
    .admin-filter-field select {

        width:
            100%;

    }


    .admin-filter-apply {

        flex:
            1
            1
            70px;

    }


    .admin-range-control {

        width:
            100%;

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .admin-range-buttons {

        flex-wrap:
            wrap;

    }


    .admin-departure-condition {

        width:
            100%;

    }


    .admin-departure-condition select {

        width:
            100%;

    }


    .admin-result-count {

        width:
            100%;

        justify-content:
            center;

    }


    .admin-activity-item {

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

    }


    .admin-activity-value {

        grid-column:
            3;

        text-align:
            left;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .admin-metric-grid {

        grid-template-columns:
            1fr;

    }


    .admin-command-title h1 {

        font-size:
            22px;

    }

}


/* =========================================================
   ADMIN DASHBOARD
   SECTION COLOUR SYSTEM
========================================================= */


/* =========================================================
   PAGE BACKGROUND
========================================================= */

body {
    background:
        #edf2f2;
}


.admin-dashboard {
    background:
        transparent;
}


/* =========================================================
   GENERAL PANEL

   Remove the plain white page feeling.
========================================================= */

.admin-panel {
    position: relative;

    overflow: hidden;

    border:
        1px solid
        rgba(31, 88, 85, 0.12);

    box-shadow:
        0 6px 20px
        rgba(24, 65, 65, 0.055);
}


/* =========================================================
   COMPANY PERFORMANCE

   Very light teal
========================================================= */

.admin-performance-panel {
    background:
        linear-gradient(
            135deg,
            #f3faf8 0%,
            #ffffff 52%,
            #eef7f5 100%
        );

    border-top:
        4px solid
        #075653;
}


.admin-performance-panel::before {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    top: -210px;
    right: -130px;

    border-radius: 50%;

    background:
        rgba(19, 126, 111, 0.04);

    pointer-events: none;
}


/* =========================================================
   PERFORMANCE CARDS
========================================================= */

.admin-performance-panel
.admin-metric-card {
    background:
        rgba(255, 255, 255, 0.82);

    border-color:
        #d9e8e5;
}


.admin-performance-panel
.admin-metric-card:hover {
    background:
        #ffffff;

    border-color:
        #bcd4d0;
}


/* =========================================================
   NEEDS ATTENTION AREA

   Warm background to visually separate action items.
========================================================= */

.admin-attention-area {
    margin-top: 12px;

    padding:
        10px;

    border:
        1px solid
        #eadfca;

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            #fffaf0 0%,
            #fffdf8 100%
        );
}


.admin-attention-item {
    background:
        rgba(255, 255, 255, 0.9);
}


.admin-attention-danger {
    background:
        linear-gradient(
            135deg,
            #fff9f9,
            #ffffff
        );
}


/* =========================================================
   FINANCIAL POSITION

   Soft blue green tone
========================================================= */

.admin-finance-panel {
    background:
        linear-gradient(
            135deg,
            #f1f8f7 0%,
            #f8fbfb 52%,
            #edf6f4 100%
        );

    border-top:
        4px solid
        #247168;
}


.admin-finance-panel::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -140px;
    top: -190px;

    border-radius: 50%;

    background:
        rgba(25, 105, 97, 0.045);

    pointer-events: none;
}


/* =========================================================
   FINANCE CARDS
========================================================= */

.admin-finance-card {
    background:
        rgba(255, 255, 255, 0.84);

    border-color:
        #d5e5e2;
}


.admin-finance-primary {
    background:
        linear-gradient(
            145deg,
            #e8f4f2,
            #ffffff
        );

    border-top:
        3px solid
        #004b49;
}


.admin-finance-primary > strong {
    color:
        #004b49;
}


/* CUSTOMER RECEIVABLE */

.admin-finance-card:nth-child(2) {
    border-top:
        3px solid
        #d49a1b;

    background:
        linear-gradient(
            145deg,
            #fffaf0,
            #ffffff
        );
}


/* AVAILABLE CASH */

.admin-finance-card:nth-child(3) {
    border-top:
        3px solid
        #1c8978;

    background:
        linear-gradient(
            145deg,
            #eef9f6,
            #ffffff
        );
}


/* EXPECTED COST */

.admin-finance-card:nth-child(4) {
    border-top:
        3px solid
        #dd9e20;

    background:
        linear-gradient(
            145deg,
            #fff8e8,
            #ffffff
        );
}


/* RESERVED */

.admin-finance-card:nth-child(5) {
    border-top:
        3px solid
        #4c82a5;

    background:
        linear-gradient(
            145deg,
            #eff6fb,
            #ffffff
        );
}


/* =========================================================
   SUPPLIER OUTSTANDING

   Stronger visual financial liability section.
========================================================= */

.admin-finance-supplier {
    background:
        linear-gradient(
            115deg,
            #eaf5f2 0%,
            #f8fcfb 55%,
            #edf6f4 100%
        );

    border:
        1px solid
        #bdd8d2;

    border-top:
        4px solid
        #176f67;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.7);
}


.admin-finance-breakdown > div {
    background:
        rgba(255, 255, 255, 0.76);

    border-color:
        #cfe0dd;
}


/* =========================================================
   UPCOMING DEPARTURES

   Light blue operational tone
========================================================= */

.admin-departures-panel {
    background:
        linear-gradient(
            135deg,
            #f1f7fa 0%,
            #ffffff 50%,
            #edf5f8 100%
        );

    border-top:
        4px solid
        #397a9c;
}


.admin-departures-panel::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    top: -170px;
    right: -110px;

    border-radius: 50%;

    background:
        rgba(59, 121, 157, 0.045);

    pointer-events: none;
}


/* =========================================================
   UPCOMING TABLE
========================================================= */

.admin-departures-panel
.admin-table-card {
    border-color:
        #d4e2e8;

    background:
        rgba(255, 255, 255, 0.88);
}


.admin-departures-panel
.admin-data-table thead {
    background:
        #edf5f8;
}


/* =========================================================
   AGENT PERFORMANCE

   Soft green sales tone
========================================================= */

.admin-agent-panel {
    background:
        linear-gradient(
            135deg,
            #f1f8f5 0%,
            #ffffff 52%,
            #edf7f3 100%
        );

    border-top:
        4px solid
        #25816e;
}


.admin-agent-panel::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    top: -185px;
    right: -120px;

    border-radius: 50%;

    background:
        rgba(40, 135, 111, 0.04);

    pointer-events: none;
}


.admin-agent-panel
.admin-table-card {
    background:
        rgba(255, 255, 255, 0.9);

    border-color:
        #d4e5df;
}


.admin-agent-panel
.admin-data-table thead {
    background:
        #eef7f4;
}


/* =========================================================
   RECENT ACTIVITY

   Soft neutral purple / grey tone
========================================================= */

.admin-activity-panel {
    background:
        linear-gradient(
            135deg,
            #f6f6f9 0%,
            #ffffff 52%,
            #f2f4f6 100%
        );

    border-top:
        4px solid
        #697b85;
}


.admin-activity-list {
    background:
        rgba(255, 255, 255, 0.88);

    border-color:
        #dce2e5;
}


/* =========================================================
   HEADINGS GET THEIR OWN ACCENT
========================================================= */

.admin-performance-panel
.admin-panel-kicker {
    color:
        #177c70;
}


.admin-finance-panel
.admin-panel-kicker {
    color:
        #247168;
}


.admin-departures-panel
.admin-panel-kicker {
    color:
        #397a9c;
}


.admin-agent-panel
.admin-panel-kicker {
    color:
        #25816e;
}


.admin-activity-panel
.admin-panel-kicker {
    color:
        #697b85;
}


/* =========================================================
   SECTION HEADERS

   Small coloured marker beside title.
========================================================= */

.admin-panel-heading h2 {
    position: relative;

    padding-left:
        10px;
}


.admin-panel-heading h2::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 3px;
    height: 17px;

    border-radius:
        10px;

    transform:
        translateY(-50%);

    background:
        #075653;
}


.admin-finance-panel
.admin-panel-heading h2::before {
    background:
        #247168;
}


.admin-departures-panel
.admin-panel-heading h2::before {
    background:
        #397a9c;
}


.admin-agent-panel
.admin-panel-heading h2::before {
    background:
        #25816e;
}


.admin-activity-panel
.admin-panel-heading h2::before {
    background:
        #697b85;
}


/* =========================================================
   TABLE HOVER

   Slight tint rather than generic grey.
========================================================= */

.admin-departures-panel
.admin-data-table tbody tr:hover {
    background:
        #f2f8fa;
}


.admin-agent-panel
.admin-data-table tbody tr:hover {
    background:
        #f2f9f6;
}


.admin-activity-item:hover {
    background:
        #f5f7f8;
}


/* =========================================================
   FILTER AREA

   Give filters a visible container instead of floating
   inside white space.
========================================================= */

.admin-filter-bar {
    padding:
        7px;

    border:
        1px solid
        rgba(67, 112, 108, 0.12);

    border-radius:
        9px;

    background:
        rgba(255, 255, 255, 0.68);
}


.admin-departure-toolbar {
    padding:
        7px;

    border:
        1px solid
        rgba(73, 120, 145, 0.13);

    border-radius:
        9px;

    background:
        rgba(255, 255, 255, 0.7);
}


/* =========================================================
   IMPROVE PANEL SPACING
========================================================= */

.admin-performance-panel,
.admin-finance-panel,
.admin-departures-panel,
.admin-agent-panel,
.admin-activity-panel {
    padding:
        15px
        16px;

    margin-bottom:
        14px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .admin-performance-panel,
    .admin-finance-panel,
    .admin-departures-panel,
    .admin-agent-panel,
    .admin-activity-panel {
        padding:
            12px;
    }


    .admin-attention-area {
        padding:
            8px;
    }

}


/* =========================================================
   AGENT 
========================================================= */


/* =========================================================
   AGENT DASHBOARD
========================================================= */


/* =========================================================
   AGENT COMMAND BAR
========================================================= */

.agent-command-bar {
    min-height: 120px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 14px;

    padding:
        22px
        28px;

    border-radius: 18px;

    background:
        linear-gradient(
            118deg,
            #004544 0%,
            #005452 58%,
            #3d7568 100%
        );

    box-shadow:
        0 12px 30px
        rgba(0, 63, 62, 0.14);
}


.agent-command-eyebrow {
    display: block;

    margin-bottom: 5px;

    color:
        #ffb31a;

    font-size: 10px;
    font-weight: 850;

    letter-spacing: 1.3px;

    text-transform: uppercase;
}


.agent-command-bar h1 {
    margin: 0;

    color: #ffffff;

    font-size: 27px;
    font-weight: 850;

    letter-spacing: -0.6px;
}


.agent-command-bar p {
    margin:
        6px
        0
        0;

    color:
        rgba(255, 255, 255, 0.68);

    font-size: 11px;
}


.agent-command-actions {
    display: flex;
    align-items: center;

    gap: 8px;
}


.agent-action {
    min-height: 37px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0
        15px;

    border-radius: 9px;

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}


.agent-action-secondary {
    background: #ffffff;

    color: #244447;

    border:
        1px solid
        rgba(255, 255, 255, 0.65);
}


.agent-action-primary {
    background:
        #ffb31a;

    color:
        #173f42;

    border:
        1px solid
        #ffb31a;
}


/* =========================================================
   MAIN AGENT PANEL
========================================================= */

.agent-panel {
    margin-bottom: 14px;

    padding: 15px;

    border:
        1px solid
        #cfe0dc;

    border-top:
        4px solid
        #147668;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #f2faf7 0%,
            #ffffff 55%,
            #edf7f4 100%
        );

    box-shadow:
        0 5px 18px
        rgba(32, 72, 70, 0.05);
}


/* =========================================================
   PANEL HEADER
========================================================= */

.agent-panel-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 12px;
}


.agent-panel-kicker {
    display: block;

    margin-bottom: 3px;

    color:
        #16786c;

    font-size: 7px;
    font-weight: 850;

    letter-spacing: 0.9px;

    text-transform: uppercase;
}


.agent-panel-title-row {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;
}


.agent-panel-title-row h2 {
    margin: 0;

    color:
        #1b4547;

    font-size: 18px;
    font-weight: 850;

    letter-spacing: -0.35px;
}


.agent-panel-header p {
    margin:
        4px
        0
        0;

    color:
        #819092;

    font-size: 8px;
}


.agent-period-chip {
    min-height: 23px;

    display: inline-flex;
    align-items: center;

    padding:
        0
        8px;

    border:
        1px solid
        #d3e5e1;

    border-radius: 7px;

    background:
        rgba(255, 255, 255, 0.8);

    color:
        #567275;

    font-size: 7px;
    font-weight: 800;
}


/* =========================================================
   FILTER
========================================================= */

.agent-filter-bar {
    display: flex;

    align-items: flex-end;

    flex-wrap: wrap;

    gap: 6px;

    padding: 7px;

    border:
        1px solid
        #d7e6e3;

    border-radius: 9px;

    background:
        rgba(255, 255, 255, 0.72);
}


.agent-filter-field {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.agent-filter-field label {
    color:
        #7d8d8f;

    font-size: 6px;
    font-weight: 850;

    letter-spacing: 0.45px;

    text-transform: uppercase;
}


.agent-filter-field input {
    width: 126px;
    height: 29px;

    padding:
        0
        7px;

    border:
        1px solid
        #d4dfde;

    border-radius: 7px;

    outline: none;

    background:
        #ffffff;

    color:
        #294649;

    font-size: 8px;
    font-weight: 700;

    cursor: pointer;
}


.agent-filter-field input:focus {
    border-color:
        #147668;

    box-shadow:
        0 0 0 2px
        rgba(20, 118, 104, 0.08);
}


.agent-filter-apply {
    height: 29px;

    padding:
        0
        12px;

    border:
        1px solid
        #075653;

    border-radius: 7px;

    background:
        #075653;

    color:
        #ffffff;

    font-size: 8px;
    font-weight: 850;

    cursor: pointer;
}


/* =========================================================
   AGENT METRIC GRID
========================================================= */

.agent-metric-grid {
    display: grid;

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

    gap: 8px;
}


.agent-metric-card {
    min-width: 0;

    min-height: 96px;

    padding:
        12px;

    border:
        1px solid
        #dce7e5;

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.88);

    overflow: hidden;
}


.agent-metric-label {
    display: block;

    margin-bottom: 13px;

    color:
        #718184;

    font-size: 7.5px;
    font-weight: 850;

    letter-spacing: 0.25px;

    text-transform: uppercase;
}


.agent-metric-card > strong {
    display: block;

    overflow: hidden;

    color:
        #1d4749;

    font-size: 19px;
    font-weight: 850;

    line-height: 1.05;

    letter-spacing: -0.45px;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.agent-metric-card > small {
    display: block;

    margin-top: 7px;

    overflow: hidden;

    color:
        #879496;

    font-size: 7px;

    white-space: nowrap;

    text-overflow: ellipsis;
}


/* =========================================================
   METRIC STATES
========================================================= */

.agent-metric-positive {
    border-top:
        3px solid
        #248b77;

    background:
        linear-gradient(
            145deg,
            #eef9f6,
            #ffffff
        );
}


.agent-metric-positive > strong {
    color:
        #147a68;
}


.agent-metric-warning {
    border-top:
        3px solid
        #e3a525;

    background:
        linear-gradient(
            145deg,
            #fff8e9,
            #ffffff
        );
}


.agent-metric-warning > strong {
    color:
        #ae7506;
}


.agent-metric-average {
    border-top:
        3px solid
        #4f82a2;

    background:
        linear-gradient(
            145deg,
            #f0f6fa,
            #ffffff
        );
}


/* =========================================================
   HOVER
========================================================= */

.agent-metric-card {
    transition:
        transform 120ms ease,
        border-color 120ms ease,
        box-shadow 120ms ease;
}


.agent-metric-card:hover {
    transform:
        translateY(-1px);

    border-color:
        #bfd5d1;

    box-shadow:
        0 7px 16px
        rgba(35, 79, 76, 0.06);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1250px) {

    .agent-metric-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 800px) {

    .agent-command-bar {
        align-items: flex-start;

        flex-direction: column;
    }


    .agent-panel-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .agent-filter-bar {
        width: 100%;
    }

}


@media (max-width: 620px) {

    .agent-command-bar {
        padding: 18px;
    }


    .agent-command-actions {
        width: 100%;
    }


    .agent-action {
        flex: 1;
    }


    .agent-metric-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .agent-filter-field {
        flex:
            1
            1
            120px;
    }


    .agent-filter-field input {
        width: 100%;
    }


    .agent-filter-apply {
        flex:
            1
            1
            70px;
    }

}


@media (max-width: 420px) {

    .agent-metric-grid {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   AGENT ATTENTION
========================================================= */

.agent-attention-panel {
    background:
        linear-gradient(
            135deg,
            #fffaf1 0%,
            #ffffff 55%,
            #f8fbfa 100%
        );

    border-top-color:
        #d99b19;
}


.agent-attention-grid {
    display: grid;

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

    gap: 8px;
}


.agent-attention-card {
    min-height: 64px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding:
        10px
        11px;

    border:
        1px solid
        #dfe7e6;

    border-left:
        3px solid
        #d99b19;

    border-radius: 9px;

    background:
        rgba(255, 255, 255, 0.9);

    text-decoration: none;

    transition:
        transform 120ms ease,
        border-color 120ms ease,
        background 120ms ease;
}


.agent-attention-card:hover {
    transform:
        translateY(-1px);

    background:
        #ffffff;

    border-color:
        #c9d9d6;
}


.agent-attention-card > div {
    min-width: 0;
}


.agent-attention-label {
    display: block;

    color:
        #30494c;

    font-size: 8px;
    font-weight: 850;
}


.agent-attention-card small {
    display: block;

    margin-top: 3px;

    overflow: hidden;

    color:
        #879496;

    font-size: 6.5px;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.agent-attention-card > strong {
    flex: 0 0 auto;

    color:
        #23484a;

    font-size: 19px;
    font-weight: 850;
}


.agent-attention-warning {
    border-left-color:
        #e1a11e;
}


.agent-attention-danger {
    border-left-color:
        #c94b55;
}


.agent-attention-danger > strong {
    color:
        #b53b45;
}


.agent-attention-info {
    border-left-color:
        #4b83a6;
}


@media (max-width: 1100px) {

    .agent-attention-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 560px) {

    .agent-attention-grid {
        grid-template-columns:
            1fr;
    }

}




/* =========================================================
   AGENT UPCOMING DEPARTURES
========================================================= */

.agent-departures-panel {
    border-top-color:
        #3d7c98;

    background:
        linear-gradient(
            135deg,
            #f3f8fb 0%,
            #ffffff 55%,
            #eef6f9 100%
        );
}


/* =========================================================
   TOOLBAR
========================================================= */

.agent-departure-toolbar {
    display: flex;

    align-items: flex-end;
    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 7px;

    padding: 7px;

    border:
        1px solid
        #d7e3e8;

    border-radius: 9px;

    background:
        rgba(255, 255, 255, 0.72);
}


.agent-range-control {
    display: flex;

    align-items: center;

    gap: 5px;
}


.agent-range-control > span {
    color:
        #7c8c90;

    font-size: 6px;
    font-weight: 850;

    letter-spacing: 0.45px;

    text-transform: uppercase;
}


.agent-range-buttons {
    display: flex;

    align-items: center;

    gap: 2px;

    padding: 2px;

    border:
        1px solid
        #dce6e9;

    border-radius: 7px;

    background:
        #f6f9fa;
}


.agent-range-button {
    min-width: 28px;
    height: 24px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        0
        6px;

    border:
        1px solid
        transparent;

    border-radius: 5px;

    color:
        #61767b;

    font-size: 7px;
    font-weight: 850;

    text-decoration: none;
}


.agent-range-button:hover {
    background:
        #ffffff;

    color:
        #0b5d59;
}


.agent-range-button.active {
    border-color:
        #0b5d59;

    background:
        #0b5d59;

    color:
        #ffffff;
}


/* =========================================================
   CONDITION FILTER
========================================================= */

.agent-departure-condition {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.agent-departure-condition label {
    color:
        #7d8c8f;

    font-size: 6px;
    font-weight: 850;

    letter-spacing: 0.45px;

    text-transform: uppercase;
}


.agent-departure-condition select {
    width: 145px;
    height: 28px;

    padding:
        0
        7px;

    border:
        1px solid
        #d4dfe2;

    border-radius: 7px;

    outline: none;

    background:
        #ffffff;

    color:
        #30494c;

    font-size: 8px;
    font-weight: 700;

    cursor: pointer;
}


.agent-departure-condition select:focus {
    border-color:
        #3d7c98;

    box-shadow:
        0 0 0 2px
        rgba(61, 124, 152, 0.08);
}


/* =========================================================
   RESULT COUNT
========================================================= */

.agent-result-count {
    height: 28px;

    display: flex;

    align-items: center;

    gap: 5px;

    padding:
        0
        9px;

    border:
        1px solid
        #dce6e9;

    border-radius: 7px;

    background:
        #f8fafb;
}


.agent-result-count strong {
    color:
        #0b5d59;

    font-size: 11px;
    font-weight: 900;
}


.agent-result-count span {
    color:
        #728286;

    font-size: 7px;
    font-weight: 750;
}


/* =========================================================
   TABLE CARD
========================================================= */

.agent-table-card {
    overflow: hidden;

    border:
        1px solid
        #d8e3e6;

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.9);
}


.agent-table-scroll {
    width: 100%;

    overflow-x: auto;
}


.agent-data-table {
    width: 100%;

    border-collapse: collapse;

    table-layout: auto;
}


.agent-data-table thead {
    background:
        #eef5f8;
}


.agent-data-table th {
    padding:
        9px
        10px;

    border-bottom:
        1px solid
        #dce6e9;

    color:
        #748489;

    font-size: 7px;
    font-weight: 850;

    letter-spacing: 0.35px;

    text-align: left;

    text-transform: uppercase;

    white-space: nowrap;
}


.agent-data-table td {
    padding:
        9px
        10px;

    border-bottom:
        1px solid
        #edf1f2;

    color:
        #354f52;

    font-size: 8px;

    vertical-align: middle;
}


.agent-data-table tbody tr:last-child td {
    border-bottom: none;
}


.agent-data-table tbody tr:hover {
    background:
        #f5f9fb;
}


/* =========================================================
   TRAVEL DATE
========================================================= */

.agent-travel-date {
    display: flex;

    flex-direction: column;

    gap: 2px;

    min-width: 90px;
}


.agent-travel-date strong {
    color:
        #304c50;

    font-size: 8px;
}


.agent-travel-date span {
    color:
        #819095;

    font-size: 6.5px;
    font-weight: 700;
}


.agent-travel-date span.urgent {
    color:
        #c33e48;

    font-weight: 850;
}


/* =========================================================
   BOOKING LINK
========================================================= */

.agent-booking-link {
    color:
        #0b6761;

    font-size: 8px;
    font-weight: 850;

    text-decoration: none;
}


.agent-booking-link:hover {
    text-decoration: underline;
}


/* =========================================================
   PERSON CELL
========================================================= */

.agent-person-cell {
    display: flex;

    align-items: center;

    gap: 7px;

    min-width: 145px;
}


.agent-avatar {
    width: 27px;
    height: 27px;

    flex:
        0
        0
        27px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            #e5f1ef,
            #d7e9e5
        );

    color:
        #075653;

    font-size: 9px;
    font-weight: 900;
}


.agent-person-cell strong {
    color:
        #2d494c;

    font-size: 8px;
    font-weight: 800;
}


/* =========================================================
   BALANCE
========================================================= */

.agent-balance {
    white-space: nowrap;
}


.agent-balance.due {
    color:
        #b77800;
}


.agent-balance.clear {
    color:
        #157d6b;
}


/* =========================================================
   SERVICE STATUS
========================================================= */

.agent-service-status {
    min-width: 57px;
    min-height: 20px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        0
        6px;

    border-radius: 999px;

    font-size: 6.5px;
    font-weight: 800;

    white-space: nowrap;
}


.agent-service-status.confirmed {
    background:
        #dff2ed;

    color:
        #137465;
}


.agent-service-status.reserved {
    background:
        #e8f1f8;

    color:
        #39749a;
}


.agent-service-status.pending {
    background:
        #fff2d5;

    color:
        #a36b00;
}


.agent-service-status.none {
    background:
        #eff2f2;

    color:
        #849194;
}


/* =========================================================
   ACTION BUTTON
========================================================= */

.agent-table-action {
    min-height: 23px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        0
        8px;

    border:
        1px solid
        #cadbd8;

    border-radius: 6px;

    background:
        #ffffff;

    color:
        #075653;

    font-size: 7px;
    font-weight: 800;

    text-decoration: none;
}


.agent-table-action:hover {
    background:
        #075653;

    border-color:
        #075653;

    color:
        #ffffff;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.agent-empty-state {
    padding:
        24px
        18px;

    text-align: center;
}


.agent-empty-state strong {
    display: block;

    color:
        #29474a;

    font-size: 11px;
}


.agent-empty-state p {
    margin:
        5px
        0
        0;

    color:
        #879496;

    font-size: 8px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .agent-departure-toolbar {
        width: 100%;

        justify-content: flex-start;
    }

}


@media (max-width: 650px) {

    .agent-range-control {
        width: 100%;

        align-items: flex-start;

        flex-direction: column;
    }


    .agent-range-buttons {
        flex-wrap: wrap;
    }


    .agent-departure-condition {
        width: 100%;
    }


    .agent-departure-condition select {
        width: 100%;
    }


    .agent-result-count {
        width: 100%;

        justify-content: center;
    }

}



/* =========================================================
   AGENT RECENT BOOKINGS
========================================================= */

.agent-recent-bookings-panel {
    border-top-color:
        #147668;

    background:
        linear-gradient(
            135deg,
            #f5faf9 0%,
            #ffffff 55%,
            #f1f7f6 100%
        );
}


.agent-value-positive {
    color:
        #147a68;
}


.agent-booking-status {
    min-width: 62px;
    min-height: 20px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        0
        7px;

    border-radius:
        999px;

    font-size:
        6.5px;

    font-weight:
        800;

    text-transform:
        capitalize;
}


.agent-booking-status.status-pending {
    background:
        #fff2d5;

    color:
        #a36b00;
}


.agent-booking-status.status-confirmed {
    background:
        #dff2ed;

    color:
        #137465;
}


.agent-booking-status.status-travelling {
    background:
        #e8f1f8;

    color:
        #39749a;
}


.agent-booking-status.status-completed {
    background:
        #edf3ef;

    color:
        #587269;
}


.agent-booking-status.status-cancelled {
    background:
        #f7e4e6;

    color:
        #b23c47;
}


/* =========================================================
   AGENT RECENT ACTIVITY
========================================================= */

.agent-activity-panel {
    border-top-color: #6a7f8a;

    background:
        linear-gradient(
            135deg,
            #f7f9fa 0%,
            #ffffff 55%,
            #f3f6f7 100%
        );
}


.agent-activity-list {
    display: flex;

    flex-direction: column;
}


.agent-activity-item {
    display: grid;

    grid-template-columns:
        58px
        14px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 10px;

    padding:
        10px
        4px;

    border-bottom:
        1px solid
        #e8eeee;
}


.agent-activity-item:last-child {
    border-bottom: none;
}


.agent-activity-time {
    display: flex;

    flex-direction: column;

    gap: 2px;
}


.agent-activity-time strong {
    color:
        #30484b;

    font-size: 8px;
}


.agent-activity-time span {
    color:
        #879496;

    font-size: 6.5px;
}


.agent-activity-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        #8ea0a3;
}


.agent-activity-dot.activity-booking_created {
    background:
        #3d7c98;
}


.agent-activity-dot.activity-customer_payment {
    background:
        #18806d;
}


.agent-activity-dot.activity-flight_confirmed,
.agent-activity-dot.activity-hotel_confirmed,
.agent-activity-dot.activity-visa_confirmed,
.agent-activity-dot.activity-transport_confirmed {
    background:
        #d79a1e;
}


.agent-activity-content {
    min-width: 0;
}


.agent-activity-content > div {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 6px;
}


.agent-activity-content strong {
    color:
        #2d494c;

    font-size: 8px;
}


.agent-activity-content a {
    color:
        #0b6761;

    font-size: 7px;
    font-weight: 800;

    text-decoration: none;
}


.agent-activity-content a:hover {
    text-decoration: underline;
}


.agent-activity-content p {
    margin:
        3px
        0
        0;

    color:
        #879496;

    font-size: 7px;
}


.agent-activity-value {
    white-space: nowrap;

    text-align: right;
}


.agent-activity-value strong {
    color:
        #2e4d50;

    font-size: 8px;
    font-weight: 800;
}


@media (max-width: 650px) {

    .agent-activity-item {
        grid-template-columns:
            48px
            10px
            minmax(0, 1fr);
    }


    .agent-activity-value {
        grid-column:
            3;

        text-align: left;
    }

}