/* =========================================================
   DASHBOARD HEADER
========================================================= */

.dashboard-header {

    width: 100%;

    background:
        linear-gradient(
            135deg,
            #2448A6 0%,
            #3159C4 50%,
            #3C67DD 100%
        );

    border-radius: 24px;

    padding: 34px 42px 38px;

    color: #ffffff;

    margin-bottom: 24px;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, .20);

    box-sizing: border-box;

}


/* =========================================================
   HEADER TOP
========================================================= */

.header-top {

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 30px;

    margin-bottom: 32px;

}


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

.header-title {

    display: flex;

    align-items: center;

    gap: 16px;

    min-width: 0;

}


.header-title-icon {

    width: 54px;

    height: 54px;

    border-radius: 15px;

    background: rgba(255, 255, 255, .13);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}


.header-title-icon i {

    font-size: 28px;

    color: #ffffff;

}


.header-title-content {

    min-width: 0;

}


.header-title h2 {

    margin: 0;

    color: #ffffff;

    font-size: 34px;

    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -.5px;

}


.header-title p {

    margin: 7px 0 0;

    color: rgba(255, 255, 255, .82);

    font-size: 16px;

    line-height: 1.4;

}


/* =========================================================
   LAST UPDATE
========================================================= */

.header-right {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    justify-content: center;

    text-align: right;

    flex-shrink: 0;

    padding-top: 3px;

}


.last-update-label {

    display: block;

    color: rgba(255, 255, 255, .75);

    font-size: 14px;

    line-height: 1.2;

    margin-bottom: 6px;

}


.header-right strong {

    display: block;

    color: #ffffff;

    font-size: 17px;

    font-weight: 700;

    line-height: 1.2;

}


/* =========================================================
   HEADER BODY
========================================================= */

.header-body {

    width: 100%;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

}


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

.header-filter {

    flex: 1;

    min-width: 0;

}


.filter-item {

    width: 100%;

}


.filter-item label {

    display: block;

    margin: 0 0 9px;

    color: #ffffff;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.2;

}


/* =========================================================
   DATE GROUP
========================================================= */

.date-group {

    display: flex;

    align-items: center;

    gap: 10px;

}


.date-input-wrapper {

    position: relative;

    width: 220px;

    flex-shrink: 0;

}


.dashboard-input {

    width: 100%;

    height: 52px;

    box-sizing: border-box;

    border: none;

    border-radius: 14px;

    background: rgba(255, 255, 255, .18);

    color: #ffffff;

    padding: 0 48px 0 18px;

    font-size: 15px;

    font-weight: 500;

    font-family: inherit;

    outline: none;

    transition:
        background .2s ease,
        box-shadow .2s ease;

}


/* Hover */

.dashboard-input:hover {

    background: rgba(255, 255, 255, .23);

}


/* Focus */

.dashboard-input:focus {

    background: rgba(255, 255, 255, .25);

    box-shadow:
        0 0 0 2px rgba(255, 255, 255, .30);

}


/* Calendar icon */

.date-input-wrapper i {

    position: absolute;

    top: 50%;

    right: 17px;

    transform: translateY(-50%);

    color: #ffffff;

    font-size: 17px;

    pointer-events: none;

}


/* Native date picker */

.dashboard-input::-webkit-calendar-picker-indicator {

    opacity: 0;

    position: absolute;

    right: 12px;

    width: 22px;

    height: 22px;

    cursor: pointer;

}


/* Date text */

.dashboard-input::-webkit-datetime-edit {

    color: #ffffff;

}


.dashboard-input::-webkit-datetime-edit-text {

    color: rgba(255, 255, 255, .85);

}


.dashboard-input::-webkit-datetime-edit-month-field,
.dashboard-input::-webkit-datetime-edit-day-field,
.dashboard-input::-webkit-datetime-edit-year-field {

    color: #ffffff;

}


/* =========================================================
   DATE SEPARATOR
========================================================= */

.date-separator {

    width: 16px;

    flex-shrink: 0;

    color: #ffffff;

    text-align: center;

    font-size: 20px;

    font-weight: 600;

}


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

.header-action {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 14px;

    flex-shrink: 0;

}


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

.btn-header {

    height: 52px;

    min-width: 150px;

    padding: 0 24px;

    border: none;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    color: #ffffff;

    font-family: inherit;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


/* Button icon */

.btn-header i {

    font-size: 17px;

}


/* Hover */

.btn-header:hover {

    transform: translateY(-2px);

    box-shadow:
        0 8px 18px rgba(0, 0, 0, .15);

}


/* Active */

.btn-header:active {

    transform: translateY(0);

}


/* =========================================================
   REFRESH
========================================================= */

.btn-refresh {

    background: #64748B;

}


.btn-refresh:hover {

    background: #556579;

}


/* =========================================================
   EXPORT
========================================================= */

.btn-export {

    background: #22C55E;

}


.btn-export:hover {

    background: #16A34A;

}


/* =========================================================
   AI
========================================================= */

.btn-ai {

    background:
        linear-gradient(
            135deg,
            #7C3AED,
            #5B5EF7
        );

}


.btn-ai:hover {

    background:
        linear-gradient(
            135deg,
            #6D28D9,
            #4F46E5
        );

}


/* =========================================================
   DISABLED
========================================================= */

.btn-header:disabled {

    opacity: .65;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;

}


/* =========================================================
   LOADING REFRESH
========================================================= */

.btn-refresh.loading i {

    animation:
        dashboard-spin .8s linear infinite;

}


@keyframes dashboard-spin {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}


/* =========================================================
   RESPONSIVE 1400px
========================================================= */

@media (max-width: 1400px) {

    .dashboard-header {

        padding: 30px 34px 34px;

    }


    .date-input-wrapper {

        width: 200px;

    }


    .btn-header {

        min-width: 135px;

        padding: 0 20px;

    }

}


/* =========================================================
   RESPONSIVE 1200px
========================================================= */

@media (max-width: 1200px) {

    .header-body {

        flex-direction: column;

        align-items: stretch;

    }


    .header-filter {

        width: 100%;

    }


    .header-action {

        justify-content: flex-end;

    }

}


/* =========================================================
   RESPONSIVE 992px
========================================================= */

@media (max-width: 992px) {

    .header-top {

        flex-direction: column;

        gap: 18px;

    }


    .header-right {

        align-items: flex-start;

        text-align: left;

    }


    .date-input-wrapper {

        flex: 1;

        width: auto;

    }


    .header-action {

        width: 100%;

    }


    .btn-header {

        flex: 1;

    }

}


/* =========================================================
   RESPONSIVE 768px
========================================================= */

@media (max-width: 768px) {

    .dashboard-header {

        padding: 24px 20px 26px;

        border-radius: 18px;

    }


    .header-top {

        margin-bottom: 26px;

    }


    .header-title {

        gap: 12px;

    }


    .header-title-icon {

        width: 46px;

        height: 46px;

        border-radius: 13px;

    }


    .header-title-icon i {

        font-size: 23px;

    }


    .header-title h2 {

        font-size: 26px;

    }


    .header-title p {

        font-size: 14px;

    }


    .date-group {

        width: 100%;

    }


    .date-input-wrapper {

        width: 100%;

        flex: 1;

    }


    .header-action {

        flex-direction: column;

        align-items: stretch;

        gap: 10px;

    }


    .btn-header {

        width: 100%;

        min-width: 0;

    }

}


/* =========================================================
   RESPONSIVE 480px
========================================================= */

@media (max-width: 480px) {

    .dashboard-header {

        padding: 20px 16px 22px;

    }


    .header-title h2 {

        font-size: 22px;

    }


    .header-title p {

        font-size: 13px;

    }


    .date-group {

        gap: 6px;

    }


    .date-separator {

        width: 10px;

        font-size: 16px;

    }


    .dashboard-input {

        height: 48px;

        padding-left: 13px;

        padding-right: 38px;

        font-size: 13px;

    }


    .date-input-wrapper i {

        right: 12px;

        font-size: 15px;

    }


    .btn-header {

        height: 48px;

        font-size: 14px;

    }

}