/* =========================================================
   SRT FARM ERP
   EXECUTIVE DASHBOARD
   approval.css
========================================================= */


/* =========================================================
   TITLE
========================================================= */

.approval-title-only {
    margin:
        0
        0
        16px;
}


.approval-title-only h1 {
    margin: 0;

    color: #102d44;

    font:
        700
        32px
        Georgia,
        serif;

    line-height: 1.1;
}


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

.approval-filter-bar {
    display: flex;

    align-items: flex-end;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 14px;
}


.approval-filter-field {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.approval-filter-field > span {
    color: #657a89;

    font-size: 10px;

    font-weight: 700;
}


.approval-filter-bar select,
.approval-filter-bar input {
    height: 40px;

    border:
        1px
        solid
        #dce5e8;

    border-radius: 8px;

    padding:
        6px
        11px;

    background: #fff;

    color: #102d44;

    font: inherit;

    font-weight: 600;
}


.approval-filter-bar select {
    min-width: 150px;
}


.approval-filter-bar input {
    min-width: 158px;
}


.approval-to-text {
    padding-bottom: 11px;

    color: #657a89;
}


#approvalRefresh {
    height: 40px;

    border:
        1px
        solid
        #dce5e8;

    border-radius: 8px;

    padding:
        0
        15px;

    background: #fff;

    color: #102d44;
}


#approvalRefresh:hover {
    border-color: #16825d;

    color: #16825d;
}


#approvalRefresh:disabled {
    opacity: .6;

    cursor: wait;
}


/* =========================================================
   KPI GRID
========================================================= */

.approval-kpis {
    display: grid !important;

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

    gap: 10px !important;

    width: 100%;

    margin-bottom: 12px;
}


/* =========================================================
   KPI CARD - COMPACT
========================================================= */

.approval-kpi-card {
    position: relative;

    width: 100%;

    min-width: 0;

    min-height: 148px !important;

    height: 148px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    padding:
        12px
        14px
        10px !important;
}


/* =========================================================
   KPI LABEL
========================================================= */

.approval-kpi-label {
    display: block;

    min-height: 15px;

    margin:
        0
        0
        7px;

    color: #657a89;

    font-size: 11px;

    font-weight: 700;

    line-height: 1.2;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   KPI VALUE
========================================================= */

.approval-kpi-value {
    display: block !important;

    width: 100%;

    min-width: 0;

    max-width: 100%;

    margin:
        0
        !important;

    color: #102d44;

    font:
        700
        23px
        Georgia,
        serif
        !important;

    line-height: 1.08;

    letter-spacing: -.4px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: clip;
}


/*
   IMPORTANT:

   No symbol is added here.

   Your existing ERP styles already provide the
   black currency symbol for monetary KPI cards.

   This prevents the double-symbol problem.
*/


/* =========================================================
   KPI NOTE
========================================================= */

.approval-kpi-note {
    display: block;

    min-height: 14px;

    margin:
        5px
        0
        3px
        !important;

    color: #16825d;

    font-size: 10px;

    font-style: normal;

    line-height: 1.2;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   KPI SPARK
========================================================= */

.approval-kpi-spark {
    width: 100%;

    min-width: 0;

    height: 44px;

    margin-top: auto;

    overflow: hidden;

    display: flex;

    align-items: flex-end;
}


.approval-kpi-spark svg {
    display: block;

    width: 100%;

    max-width: 155px;

    height: 40px;

    margin: 0;
}


/* =========================================================
   ANALYSIS GRID
========================================================= */

.analysis-grid {
    display: grid;

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

    gap: 12px;

    margin-top: 12px;
}


.analysis-grid .span2 {
    grid-column:
        span 2;
}


.analysis-grid .card {
    min-width: 0;

    overflow: hidden;
}


.analysis-grid .card h2 {
    margin:
        0
        0
        4px;

    color: #102d44;

    font:
        700
        18px
        Georgia,
        serif;
}


.analysis-grid .card > p {
    margin:
        0
        0
        10px;

    color: #657a89;

    line-height: 1.4;
}


/* =========================================================
   QUAD CHART
========================================================= */

.quad-chart {
    min-height: 190px;

    display: flex;

    align-items: flex-end;

    gap: 7px;

    padding:
        12px
        8px
        25px;

    border-bottom:
        1px
        solid
        #dce5e8;
}


.quad-chart > div {
    flex: 1;

    height: 155px;

    position: relative;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    gap: 2px;
}


.quad-chart i,
.quad-chart b,
.quad-chart em,
.quad-chart u {
    width: 19%;

    display: block;

    border-radius:
        3px
        3px
        0
        0;
}


.quad-chart i {
    background: #2768c7;
}


.quad-chart b {
    background: #b9a15a;
}


.quad-chart em {
    background: #879ca0;
}


.quad-chart u {
    background: #16825d;
}


.quad-chart small {
    position: absolute;

    left: 50%;

    bottom: -21px;

    transform:
        translateX(
            -50%
        );

    color: #657a89;

    font-size: 9px;

    text-decoration: none;
}


/* =========================================================
   LEGEND
========================================================= */

.legend {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 11px;

    color: #657a89;

    font-size: 10px;
}


/* =========================================================
   DONUT
========================================================= */

.donut {
    width: 125px;

    height: 125px;

    margin:
        12px
        auto;

    border-radius: 50%;

    display: grid;

    place-items: center;

    background:
        conic-gradient(
            #16825d 0 78%,
            #e4ecea 78% 100%
        );

    position: relative;
}


.donut::after {
    content: "";

    position: absolute;

    inset: 20px;

    background: #fff;

    border-radius: 50%;
}


.donut strong {
    position: relative;

    z-index: 2;

    color: #102d44;

    text-align: center;

    font:
        700
        21px
        Georgia,
        serif;
}


.donut strong small {
    display: block;

    margin-top: 2px;

    color: #657a89;

    font:
        10px
        "Segoe UI",
        Arial,
        sans-serif;
}


.donut.channel {
    background:
        conic-gradient(
            #16825d 0 28%,
            #2768c7 28% 55%,
            #b9a15a 55% 80%,
            #879ca0 80% 100%
        );
}


/* =========================================================
   MINI LIST
========================================================= */

.mini-list {
    display: flex;

    flex-direction: column;

    gap: 6px;

    margin-top: 7px;
}


.mini-list span {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 9px;

    color: #657a89;
}


.mini-list b {
    color: #102d44;
}


/* =========================================================
   LINE CHART
========================================================= */

.line-chart {
    width: 100%;

    min-height: 125px;

    display: flex;

    align-items: center;

    overflow: hidden;
}


.line-chart svg {
    width: 100%;

    height: 125px;
}


/* =========================================================
   METRIC ROW
========================================================= */

.metric-row {
    display: grid;

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

    gap: 10px;

    margin-top: 10px;
}


.metric-row span {
    color: #657a89;

    min-width: 0;
}


.metric-row b {
    display: block;

    margin-top: 3px;

    color: #102d44;
}


/* =========================================================
   MINI BAR CHART
========================================================= */

.mini-bars {
    height: 150px;

    display: flex;

    align-items: flex-end;

    gap: 7px;

    padding:
        7px
        3px
        23px;

    border-bottom:
        1px
        solid
        #dce5e8;
}


.mini-bars > div {
    flex: 1;

    height: 100%;

    position: relative;

    display: flex;

    align-items: flex-end;

    justify-content: center;
}


.mini-bars i {
    width: 58%;

    display: block;

    background: #16825d;

    border-radius:
        3px
        3px
        0
        0;
}


.mini-bars small {
    position: absolute;

    bottom: -20px;

    left: 50%;

    transform:
        translateX(
            -50%
        );

    color: #657a89;

    font-size: 9px;
}


.mini-bars.drivers i {
    background: #2768c7;
}


.mini-bars.cycles i {
    background: #16825d;
}


.mini-bars.labour i {
    background: #b9a15a;
}


/* =========================================================
   TRIPLE BAR
========================================================= */

.triple-bars {
    height: 185px;

    display: flex;

    align-items: flex-end;

    gap: 8px;

    padding:
        8px
        6px
        25px;

    border-bottom:
        1px
        solid
        #dce5e8;
}


.triple-bars > div {
    flex: 1;

    height: 100%;

    position: relative;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    gap: 2px;
}


.triple-bars i,
.triple-bars b,
.triple-bars em {
    width: 25%;

    display: block;

    border-radius:
        3px
        3px
        0
        0;
}


.triple-bars i {
    background: #2768c7;
}


.triple-bars b {
    background: #b9a15a;
}


.triple-bars em {
    background: #16825d;
}


.triple-bars span {
    position: absolute;

    bottom: -21px;

    left: 50%;

    transform:
        translateX(
            -50%
        );

    color: #657a89;

    font-size: 9px;

    white-space: nowrap;
}


/* =========================================================
   INVENTORY STACK
========================================================= */

.stack {
    width: 100%;

    height: 20px;

    display: flex;

    overflow: hidden;

    margin:
        20px
        0
        15px;

    border-radius: 6px;

    background: #edf2f1;
}


.stack i,
.stack b,
.stack em {
    display: block;

    height: 100%;
}


.stack i {
    background: #16825d;
}


.stack b {
    background: #b9a15a;
}


.stack em {
    background: #d85454;
}


/* =========================================================
   FUNNEL
========================================================= */

.funnel {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;

    margin:
        12px
        0;
}


.funnel span {
    display: block;

    padding:
        6px
        9px;

    background: #e8f3ef;

    color: #155f4d;

    text-align: center;

    border-radius: 5px;

    font-size: 10px;
}


/* =========================================================
   EXCEPTION CONTROL
========================================================= */

.exception {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 10px;

    padding:
        9px
        0;

    border-bottom:
        1px
        solid
        #dce5e8;
}


.exception:last-child {
    border-bottom: 0;
}


.exception b {
    color: #102d44;

    font-size: 11px;
}


.risk {
    flex:
        0
        0
        auto;

    padding:
        4px
        7px;

    border-radius: 6px;

    background: #edf2f1;

    color: #657a89;

    font-size: 9px;
}


.risk.high {
    background: #fde8e8;

    color: #b93838;
}


/* =========================================================
   LOWER SECTIONS
========================================================= */

.approval-section {
    margin-top: 14px;

    padding: 16px;

    background: #fff;

    border:
        1px
        solid
        #dce5e8;

    border-radius: 9px;
}


.approval-section h2 {
    margin:
        4px
        0;

    color: #102d44;

    font:
        700
        20px
        Georgia,
        serif;
}


.approval-section > div > p {
    color: #657a89;
}


/* =========================================================
   WORKFLOW GRID
========================================================= */

.workflow-grid {
    display: grid;

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

    gap: 10px;

    margin-top: 14px;
}


.workflow-grid article {
    min-width: 0;

    padding: 12px;

    border:
        1px
        solid
        #dce5e8;

    border-radius: 8px;

    background: #f9fbfa;
}


.workflow-grid article > b {
    color: #102d44;

    font-size: 12px;
}


.workflow-grid article p {
    min-height: 40px;

    color: #657a89;

    line-height: 1.4;
}


.workflow-grid article span {
    color: #16825d;

    font-size: 10px;
}


/* =========================================================
   ATTACHMENTS
========================================================= */

.attachment-grid {
    display: grid;

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

    gap: 8px;

    margin-top: 14px;
}


.attachment-grid article {
    min-width: 0;

    padding: 11px;

    border:
        1px
        solid
        #dce5e8;

    border-radius: 8px;
}


.attachment-grid article b,
.attachment-grid article span,
.attachment-grid article small {
    display: block;
}


.attachment-grid article b {
    color: #102d44;

    margin-bottom: 4px;
}


.attachment-grid article span {
    color: #657a89;

    margin-bottom: 4px;
}


.attachment-grid article small {
    color: #89989f;

    margin-bottom: 8px;
}


.attachment-grid article button {
    width: 100%;

    border:
        1px
        solid
        #dce5e8;

    border-radius: 6px;

    padding: 6px;

    background: #fff;

    color: #16825d;
}


/* =========================================================
   TRACE
========================================================= */

.trace-flow {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 11px;
}


.trace-flow span {
    padding:
        7px
        9px;

    border-radius: 7px;

    background: #edf5f2;

    color: #155f4d;

    font-weight: 700;

    font-size: 10px;
}


.trace-flow i {
    color: #82959c;

    font-style: normal;
}


/* =========================================================
   LARGE SCREEN
========================================================= */

@media (max-width: 1650px) {

    .approval-kpi-value {
        font-size:
            21px
            !important;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1350px) {

    .approval-kpis {
        grid-template-columns:
            repeat(
                4,
                minmax(
                    0,
                    1fr
                )
            ) !important;
    }


    .approval-kpi-card {
        height: 142px;

        min-height:
            142px
            !important;
    }


    .approval-kpi-value {
        font-size:
            22px
            !important;
    }


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


    .attachment-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(
                    0,
                    1fr
                )
            );
    }

}


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

@media (max-width: 1050px) {

    .approval-kpis {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            ) !important;
    }


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


    .analysis-grid .span2 {
        grid-column:
            span 2;
    }


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


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

}


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

@media (max-width: 720px) {

    .approval-title-only h1 {
        font-size: 26px;
    }


    .approval-filter-bar {
        display: grid;

        grid-template-columns: 1fr;
    }


    .approval-filter-field,
    .approval-filter-bar select,
    .approval-filter-bar input,
    #approvalRefresh {
        width: 100%;
    }


    .approval-to-text {
        display: none;
    }


    .approval-kpis {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            ) !important;
    }


    .approval-kpi-card {
        height: 138px;

        min-height:
            138px
            !important;
    }


    .approval-kpi-value {
        font-size:
            19px
            !important;
    }


    .analysis-grid {
        grid-template-columns:
            1fr;
    }


    .analysis-grid .span2 {
        grid-column:
            auto;
    }


    .workflow-grid {
        grid-template-columns:
            1fr;
    }


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


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

}


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

@media (max-width: 450px) {

    .approval-kpis {
        grid-template-columns:
            1fr
            !important;
    }


    .attachment-grid {
        grid-template-columns:
            1fr;
    }

}