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

.card{
    background:var(--surface-light);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
}

.card:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow);
}

.card-header{
    padding:20px 24px;
    border-bottom:1px solid var(--border);
}

.card-title{
    font-size:18px;
    font-weight:600;
}

.card-subtitle{
    margin-top:6px;
    color:var(--text-muted);
    font-size:14px;
}

.card-body{
    padding:24px;
}

/* ===========================
   BUTTONS
=========================== */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:12px 20px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    transition:var(--transition);

    font-weight:600;

    text-decoration:none;
}

.btn i{

font-size:14px;

}

.btn-primary{

background:var(--primary);

color:white;

}

.btn-primary:hover{

background:var(--primary-hover);

}

.btn-secondary{

background:var(--surface);

color:var(--text);

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

}

.btn-secondary:hover{

background:var(--surface-light);

}

.btn-success{

background:var(--success);

color:white;

}

.btn-danger{

background:var(--danger);

color:white;

}

.btn-warning{

background:var(--warning);

color:black;

}

.btn-sm{

padding:8px 14px;

font-size:13px;

}

.btn-lg{

padding:15px 28px;

font-size:16px;

}

/* ===========================
   BADGE
=========================== */

.badge{

display:inline-flex;

align-items:center;

justify-content:center;

padding:6px 10px;

border-radius:999px;

font-size:12px;

font-weight:600;

}

.badge-success{

background:rgba(23,59,95,.10);

color:var(--forest);

border:1px solid rgba(23,59,95,.16);

}

.badge-danger{

background:rgba(189,101,75,.10);

color:var(--terracotta);

border:1px solid rgba(189,101,75,.16);

}

.badge-warning{

background:rgba(183,137,67,.12);

color:var(--brass);

border:1px solid rgba(183,137,67,.18);

}

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

.page-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:28px;

}

.page-title{

font-size:30px;

font-weight:700;

}

.page-description{

margin-top:6px;

color:var(--text-muted);

}

/* =========================================================
   TOAST
========================================================= */

.toast-container{

    position:fixed;

    top:20px;

    right:20px;

    z-index:5000;

    width:min(
        380px,
        calc(100vw - 40px)
    );

    display:flex;

    flex-direction:column;

    gap:10px;

    pointer-events:none;

}


.toast{

    display:flex;

    align-items:center;

    gap:12px;

    min-height:54px;

    padding:12px 14px;

    background:var(--surface);

    color:var(--text);

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

    border-radius:12px;

    box-shadow:var(--shadow);

    pointer-events:auto;

    opacity:0;

    transform:translateY(-8px);

    transition:
        opacity .2s ease,
        transform .2s ease;

}


.toast.toast-visible{

    opacity:1;

    transform:translateY(0);

}


.toast.toast-removing{

    opacity:0;

    transform:translateY(-8px);

}


.toast > i{

    flex-shrink:0;

    font-size:18px;

}


.toast-success > i{

    color:var(--success);

}


.toast-error > i{

    color:var(--danger);

}


.toast-warning > i{

    color:var(--warning);

}


.toast-info > i{

    color:var(--primary);

}


.toast-content{

    flex:1;

    min-width:0;

}


.toast-message{

    display:block;

    color:var(--text);

    font-size:14px;

    line-height:1.45;

    overflow-wrap:anywhere;

}


.toast-close{

    width:30px;

    min-width:30px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:0;

    border-radius:8px;

    background:transparent;

    color:var(--text-muted);

    cursor:pointer;

}


.toast-close:hover{

    background:var(--surface-light);

    color:var(--text);

}

/* =========================================================
   MODAL
========================================================= */

.modal-overlay{

    position:fixed;

    inset:0;

    z-index:4000;

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:100%;

    padding:20px;

    box-sizing:border-box;

    background:rgba(0,0,0,.55);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .2s ease,
        visibility .2s ease;

}


/* =========================================================
   OPEN STATE
========================================================= */

.modal-overlay.show{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}


/* =========================================================
   MODAL CONTAINER
========================================================= */

.modal{

    position:relative;

    width:100%;

    max-width:560px;

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

    display:flex;

    flex-direction:column;

    box-sizing:border-box;

    background:var(--surface);

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

    border-radius:14px;

    box-shadow:var(--shadow);

    overflow:hidden;

    transform:
        translateY(-8px)
        scale(.98);

    transition:
        transform .2s ease;

}


/* =========================================================
   MODAL OPEN ANIMATION
========================================================= */

.modal-overlay.show .modal{

    transform:
        translateY(0)
        scale(1);

}


/* =========================================================
   MODAL SIZES
========================================================= */

.modal-small{

    max-width:400px;

}


.modal-medium{

    max-width:560px;

}


.modal-large{

    max-width:800px;

}


/* =========================================================
   MODAL HEADER
========================================================= */

.modal-header{

    min-height:64px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    padding:16px 20px;

    box-sizing:border-box;

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

    flex-shrink:0;

}


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

.modal-title{

    min-width:0;

    margin:0;

    color:var(--text);

    font-size:18px;

    font-weight:600;

    line-height:1.4;

    overflow-wrap:anywhere;

}


/* =========================================================
   MODAL CLOSE BUTTON
========================================================= */

.modal-close{

    width:36px;

    min-width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    border:0;

    border-radius:9px;

    background:transparent;

    color:var(--text-muted);

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease;

}


.modal-close:hover{

    background:var(--surface-light);

    color:var(--text);

}


.modal-close:focus{

    outline:none;

}


.modal-close:focus-visible{

    outline:2px solid var(--primary);

    outline-offset:2px;

}


.modal-close i{

    font-size:15px;

    pointer-events:none;

}


/* =========================================================
   MODAL BODY
========================================================= */

.modal-body{

    min-height:0;

    flex:1;

    padding:20px;

    box-sizing:border-box;

    overflow-y:auto;

    overflow-x:hidden;

    color:var(--text);

    font-size:14px;

    line-height:1.6;

    overflow-wrap:anywhere;

}


/* =========================================================
   MODAL FOOTER
========================================================= */

.modal-footer{

    min-height:60px;

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:10px;

    padding:12px 20px;

    box-sizing:border-box;

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

    color:var(--text-muted);

    font-size:14px;

    line-height:1.5;

    white-space:pre-wrap;

    overflow-wrap:anywhere;

    flex-shrink:0;

}


/* =========================================================
   MODAL BUTTON SUPPORT
========================================================= */

.modal-footer .btn{

    flex-shrink:0;

}


/* =========================================================
   BODY LOCK
========================================================= */

body.modal-open{

    overflow:hidden;

}


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

@media(max-width:600px){

    .modal-overlay{

        align-items:center;

        padding:12px;

    }


    .modal{

        width:100%;

        max-width:none;

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

        border-radius:12px;

    }


    .modal-header{

        min-height:58px;

        padding:14px 16px;

        gap:12px;

    }


    .modal-title{

        font-size:17px;

    }


    .modal-body{

        padding:16px;

    }


    .modal-footer{

        min-height:58px;

        padding:12px 16px;

        flex-wrap:wrap;

    }


    .modal-footer .btn{

        max-width:100%;

    }

}


/* =========================================================
   VERY SMALL SCREENS
========================================================= */

@media(max-width:380px){

    .modal-overlay{

        padding:8px;

    }


    .modal{

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

    }


    .modal-header{

        padding:12px 14px;

    }


    .modal-body{

        padding:14px;

    }


    .modal-footer{

        padding:10px 14px;

        justify-content:stretch;

    }


    .modal-footer .btn{

        flex:1;

    }

}

/* ===========================
   LOADER
=========================== */

#loader-overlay{

position:fixed;

inset:0;

background:rgba(0,0,0,.55);

display:flex;

justify-content:center;

align-items:center;

opacity:0;

visibility:hidden;

transition:.25s;

z-index:9999;

}

#loader-overlay.show{

opacity:1;

visibility:visible;

}

.loader-box{

width:220px;

padding:30px;

background:var(--surface);

border-radius:16px;

text-align:center;

}

.loader-spinner{

width:48px;

height:48px;

margin:auto;

border:4px solid rgba(255,255,255,.15);

border-top:4px solid var(--primary);

border-radius:50%;

animation:spin 1s linear infinite;

margin-bottom:20px;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}
}

.notification-dot{

position:absolute;

top:8px;

right:8px;

width:8px;

height:8px;

background:#bd654b;

border-radius:50%;

}

.icon-button{

position:relative;

}

/* =========================================================
   DROPDOWN
========================================================= */

.dropdown{

    position:relative;

    width:100%;

}


.dropdown-toggle{

    width:100%;

    min-height:44px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    padding:0 14px;

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

    border-radius:10px;

    background:var(--surface);

    color:var(--text);

    cursor:pointer;

    font-family:inherit;

    font-size:14px;

    text-align:left;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}


.dropdown-toggle:hover{

    border-color:var(--text-muted);

}


.dropdown.open .dropdown-toggle{

    border-color:var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(36,95,143,.12);

}


.dropdown-label{

    min-width:0;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}


.dropdown-label.placeholder{

    color:var(--text-muted);

}


.dropdown-toggle > i{

    flex-shrink:0;

    font-size:12px;

    transition:
        transform .2s ease;

}


.dropdown.open
.dropdown-toggle > i{

    transform:rotate(180deg);

}


.dropdown-menu{

    position:absolute;

    top:calc(100% + 6px);

    left:0;

    right:0;

    z-index:2000;

    max-height:260px;

    overflow-y:auto;

    padding:6px;

    background:var(--surface);

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

    border-radius:10px;

    box-shadow:var(--shadow);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:translateY(-4px);

    transition:
        opacity .15s ease,
        visibility .15s ease,
        transform .15s ease;

}


.dropdown.open .dropdown-menu{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateY(0);

}


.dropdown-item{

    width:100%;

    min-height:40px;

    display:flex;

    align-items:center;

    padding:9px 11px;

    border:0;

    border-radius:8px;

    background:transparent;

    color:var(--text);

    cursor:pointer;

    font-family:inherit;

    font-size:14px;

    text-align:left;

}


.dropdown-item:hover{

    background:var(--surface-light);

}


.dropdown-item.selected{

    background:var(--surface-light);

    color:var(--primary);

    font-weight:600;

}


.dropdown-empty{

    padding:12px;

    color:var(--text-muted);

    font-size:13px;

    text-align:center;

}
/* ===========================
   PROGRESS
=========================== */

.progress-component{

width:100%;

}

.progress-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:8px;

font-size:13px;

}

.progress-label{

color:var(--text-muted);

}

.progress-value{

font-weight:600;

}

.progress-track{

height:9px;

width:100%;

background:var(--border);

border-radius:999px;

overflow:hidden;

}

.progress-fill{

height:100%;

background:var(--primary);

border-radius:inherit;

transition:width .3s ease;

}

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

.empty-state{

min-height:260px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

padding:40px 20px;

}

.empty-icon{

width:64px;

height:64px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:18px;

border-radius:18px;

background:var(--surface-light);

color:var(--text-muted);

font-size:25px;

}

.empty-state h3{

margin-bottom:8px;

}

.empty-state p{

max-width:420px;

font-size:14px;

}

.empty-action{

margin-top:20px;

}

/* ===========================
   SKELETON
=========================== */

.skeleton{

display:block;

background:linear-gradient(
90deg,
var(--surface-light) 25%,
var(--border) 50%,
var(--surface-light) 75%
);

background-size:200% 100%;

animation:skeleton-loading 1.5s infinite;

}

@keyframes skeleton-loading{

0%{

background-position:200% 0;

}

100%{

background-position:-200% 0;

}

}

.skeleton-card{

pointer-events:none;

}

/* ===========================
   TOOLTIP
=========================== */

[data-tooltip]{

position:relative;

}

.tooltip{

position:absolute;

left:50%;

bottom:calc(100% + 8px);

transform:translateX(-50%) translateY(4px);

padding:7px 10px;

border-radius:8px;

background:#172536;

color:#fff;

font-size:12px;

white-space:nowrap;

opacity:0;

visibility:hidden;

pointer-events:none;

transition:.2s;

z-index:6000;

}

[data-tooltip]:hover .tooltip{

opacity:1;

visibility:visible;

transform:translateX(-50%) translateY(0);

}

/* =========================================================
   DATA TABLE
========================================================= */

.datatable{

    width:100%;

    min-width:0;

}


.datatable-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    margin-bottom:18px;

}


.datatable-search{

    position:relative;

    width:320px;

    max-width:100%;

}


.datatable-search > i{

    position:absolute;

    left:14px;

    top:50%;

    transform:translateY(-50%);

    color:var(--text-muted);

    pointer-events:none;

}


.datatable-search-input{

    width:100%;

    height:44px;

    padding:0 15px 0 42px;

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

    border-radius:10px;

    outline:none;

    background:var(--surface);

    color:var(--text);

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}


.datatable-search-input:focus{

    border-color:var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(36,95,143,.12);

}


/* =========================================================
   TABLE WRAPPER
========================================================= */

.datatable-wrapper{

    width:100%;

    overflow-x:auto;

    overflow-y:hidden;

    -webkit-overflow-scrolling:touch;

}


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

.datatable-table{

    width:100%;

    min-width:600px;

    border-collapse:collapse;

}


/*
 * IMPORTANT:
 * Keep DataTable cells aligned with the card.
 */

.datatable-table th,
.datatable-table td{

    padding-left:14px;

    padding-right:14px;

}


/*
 * First column should sit closer to
 * the left edge of the card.
 */

.datatable-table th:first-child,
.datatable-table td:first-child{

    padding-left:0;

}


/*
 * Last column should not have
 * unnecessary right spacing.
 */

.datatable-table th:last-child,
.datatable-table td:last-child{

    padding-right:0;

}


.datatable-table tbody tr{

    transition:
        background .2s ease;

}


.datatable-table tbody tr:hover{

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

}


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

.datatable-empty{

    height:220px;

}


.datatable-empty-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:10px;

    color:var(--text-muted);

}


.datatable-empty-content i{

    font-size:28px;

}


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

.datatable-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    padding-top:18px;

}


.datatable-info{

    font-size:13px;

    color:var(--text-muted);

}


/* =========================================================
   PAGINATION
========================================================= */

.datatable-pagination,
.pagination{

    display:flex;

    align-items:center;

    gap:6px;

}


.pagination-button{

    min-width:36px;

    height:36px;

    padding:0 10px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

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

    border-radius:9px;

    background:var(--surface);

    color:var(--text);

    font-size:13px;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;

}


.pagination-button:hover:not(:disabled){

    background:var(--surface-light);

    border-color:var(--primary);

}


.pagination-button.active{

    background:var(--primary);

    border-color:var(--primary);

    color:#fff;

}


.pagination-button:disabled{

    opacity:.4;

    cursor:not-allowed;

}

/* =========================================================
   SEARCH BOX
========================================================= */

.search-box{

    position:relative;

    display:flex;

    align-items:center;

    width:100%;

}


/* =========================================================
   SEARCH ICON
========================================================= */

.search-box > i{

    position:absolute;

    left:14px;

    color:var(--text-muted);

    pointer-events:none;

    font-size:14px;

    z-index:1;

}


/* =========================================================
   SEARCH INPUT
========================================================= */

.search-box input{

    width:100%;

    height:44px;

    min-width:0;

    padding:0 42px;

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

    border-radius:10px;

    background:var(--surface);

    color:var(--text);

    outline:none;

    font-family:inherit;

    font-size:14px;

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

}


.search-box input::placeholder{

    color:var(--text-muted);

    opacity:1;

}


.search-box input:hover{

    border-color:var(--text-muted);

}


.search-box input:focus{

    border-color:var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(36,95,143,.12);

}


/* =========================================================
   SEARCH CLEAR BUTTON
========================================================= */

.search-clear{

    position:absolute;

    right:8px;

    width:30px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    border:0;

    border-radius:7px;

    background:transparent;

    color:var(--text-muted);

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease;

}


.search-clear:hover{

    background:var(--surface-light);

    color:var(--text);

}


.search-clear:focus-visible{

    outline:2px solid var(--primary);

    outline-offset:2px;

}


/* =========================================================
   SEARCH CLEAR ICON
========================================================= */

.search-clear i{

    font-size:13px;

    pointer-events:none;

}


/* =========================================================
   SMALL SCREENS
========================================================= */

@media(max-width:480px){

    .search-box input{

        height:42px;

        padding-left:38px;

        padding-right:38px;

    }


    .search-box > i{

        left:12px;

    }


    .search-clear{

        right:6px;

    }

}
/* ===========================
   TABS
=========================== */

.tabs{

display:flex;

align-items:center;

gap:4px;

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

overflow-x:auto;

}

.tab-button{

position:relative;

padding:12px 16px;

border:none;

background:transparent;

color:var(--text-muted);

font-weight:500;

white-space:nowrap;

cursor:pointer;

}

.tab-button:hover{

color:var(--text);

}

.tab-button.active{

color:var(--text);

}

.tab-button.active::after{

content:"";

position:absolute;

left:12px;

right:12px;

bottom:-1px;

height:2px;

background:var(--primary);

border-radius:2px;

}

.tab-panel{

padding-top:24px;

}

.tab-panel[hidden]{

display:none;

}


/* ===========================
   ACCORDION
=========================== */

.accordion{

width:100%;

}

.accordion-item{

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

border-radius:12px;

margin-bottom:10px;

overflow:hidden;

background:var(--surface);

}

.accordion-trigger{

width:100%;

display:flex;

align-items:center;

justify-content:space-between;

gap:15px;

padding:18px;

background:transparent;

color:var(--text);

text-align:left;

cursor:pointer;

font-weight:600;

}

.accordion-trigger i{

transition:.25s;

color:var(--text-muted);

}

.accordion-item.open
.accordion-trigger i{

transform:rotate(180deg);

}

.accordion-content{

max-height:0;

overflow:hidden;

transition:max-height .25s ease;

}

.accordion-content-inner{

padding:0 18px 18px;

color:var(--text-muted);

line-height:1.6;

}


/* ===========================
   ALERT
=========================== */

.alert{

display:flex;

align-items:flex-start;

gap:14px;

padding:16px;

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

border-radius:12px;

background:var(--surface);

}

.alert-icon{

font-size:20px;

line-height:1;

}

.alert-content{

display:flex;

flex-direction:column;

gap:5px;

flex:1;

font-size:14px;

}

.alert-content strong{

font-weight:600;

color:var(--text);

}

.alert-content span{

color:var(--text-muted);

line-height:1.5;

}

.alert-close{

width:30px;

height:30px;

display:flex;

align-items:center;

justify-content:center;

border-radius:7px;

color:var(--text-muted);

}

.alert-close:hover{

background:var(--surface-light);

color:var(--text);

}

.alert-info{

border-color:rgba(36,95,143,.35);

}

.alert-info .alert-icon{

color:var(--primary);

}

.alert-success{

border-color:rgba(36,95,143,.35);

}

.alert-success .alert-icon{

color:var(--success);

}

.alert-warning{

border-color:rgba(245,158,11,.35);

}

.alert-warning .alert-icon{

color:var(--warning);

}

.alert-danger{

border-color:rgba(239,68,68,.35);

}

.alert-danger .alert-icon{

color:var(--danger);

}


/* ===========================
   BREADCRUMB
=========================== */

.breadcrumb{

display:flex;

align-items:center;

flex-wrap:wrap;

gap:8px;

margin-bottom:18px;

font-size:13px;

}

.breadcrumb-link{

display:inline-flex;

align-items:center;

gap:7px;

color:var(--text-muted);

transition:.2s;

}

.breadcrumb-link:hover{

color:var(--text);

}

.breadcrumb-current{

display:inline-flex;

align-items:center;

gap:7px;

color:var(--text);

font-weight:500;

}

.breadcrumb-separator{

font-size:9px;

color:var(--text-muted);

}

/* =========================================================
   PROGRESS
========================================================= */

.progress{

    width:100%;

}


.progress-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    margin-bottom:8px;

    font-size:13px;

}


.progress-label{

    color:var(--text);

    font-weight:500;

}


.progress-value{

    color:var(--text-muted);

    font-size:12px;

    font-weight:600;

}


.progress-track{

    width:100%;

    height:8px;

    overflow:hidden;

    border-radius:999px;

    background:var(--surface-light);

}


.progress-fill{

    width:var(--progress-value, 0%);

    height:100%;

    border-radius:inherit;

    background:var(--primary);

    transition:width .3s ease;

}


.progress-small .progress-track{

    height:5px;

}


.progress-large .progress-track{

    height:12px;

}

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

.dashboard{

    display:flex;

    flex-direction:column;

    gap:24px;

}


.dashboard-stats{

    display:grid;

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

    gap:18px;

}


.stat-card{

    display:flex;

    align-items:center;

    gap:16px;

    padding:20px;

    background:var(--surface);

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

    border-radius:14px;

}


.stat-card-icon{

    width:48px;

    height:48px;

    min-width:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:var(--surface-light);

    color:var(--primary);

    font-size:20px;

}


.stat-card-content{

    display:flex;

    flex-direction:column;

    gap:5px;

}


.stat-card-content span{

    font-size:13px;

    color:var(--text-muted);

}


.stat-card-content strong{

    font-size:24px;

    line-height:1;

    color:var(--text);

}


.dashboard-grid{

    display:grid;

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

    gap:18px;

}


.dashboard-card{

    min-width:0;

}


.card-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    padding:20px 20px 0;

}


.card-header h3{

    margin:0;

}


.card-header p{

    margin:5px 0 0;

    font-size:13px;

}


.text-link{

    color:var(--primary);

    font-size:13px;

    font-weight:600;

    white-space:nowrap;

}


.storage-note{

    margin-top:14px;

    font-size:13px;

}


.activity-list{

    padding:8px 20px 20px;

}


.activity-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:15px 0;

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

}


.activity-item:last-child{

    border-bottom:0;

}


.activity-icon{

    width:40px;

    height:40px;

    min-width:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    background:var(--surface-light);

    color:var(--primary);

}


.activity-content{

    min-width:0;

    flex:1;

    display:flex;

    flex-direction:column;

    gap:3px;

}


.activity-content strong{

    font-size:14px;

}


.activity-content span{

    color:var(--text-muted);

    font-size:13px;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}


.activity-time{

    color:var(--text-muted);

    font-size:12px;

    white-space:nowrap;

}

/* =========================================================
   DASHBOARD - RECENT DEPLOYMENTS TABLE
========================================================= */

#dashboard-deployments{

    width:100%;

    min-width:0;

}


#dashboard-deployments .datatable{

    width:100%;

}


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

#dashboard-deployments
.datatable-table{

    width:100%;

    min-width:600px;

    border-collapse:collapse;

    border-spacing:0;

}


/* =========================================================
   CELLS
========================================================= */

#dashboard-deployments
.datatable-table th,
#dashboard-deployments
.datatable-table td{

    padding-top:12px;

    padding-bottom:12px;

    padding-left:12px;

    padding-right:12px;

    text-align:left;

}


/* =========================================================
   FIRST COLUMN
========================================================= */

/*
 * Keep a small left inset.
 * Do NOT set this to 0.
 */

#dashboard-deployments
.datatable-table th:first-child,
#dashboard-deployments
.datatable-table td:first-child{

    padding-left:12px;

}


/* =========================================================
   LAST COLUMN
========================================================= */

#dashboard-deployments
.datatable-table th:last-child,
#dashboard-deployments
.datatable-table td:last-child{

    padding-right:12px;

}


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

#dashboard-deployments
.datatable-table th{

    color:var(--text-muted);

    font-size:12px;

    font-weight:600;

    line-height:1.4;

    white-space:nowrap;

}


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

#dashboard-deployments
.datatable-table td{

    color:var(--text);

    font-size:13px;

    line-height:1.5;

}


/* =========================================================
   ROWS
========================================================= */

#dashboard-deployments
.datatable-table tbody tr{

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

}


#dashboard-deployments
.datatable-table tbody tr:hover{

    background:var(--surface-light);

}

/* =========================================================
   NOTIFICATIONS
========================================================= */

.notification-button{

    position:relative;

}


.notification-dot{

    position:absolute;

    top:8px;

    right:8px;

    width:7px;

    height:7px;

    border-radius:50%;

    background:var(--danger);

    border:2px solid var(--surface);

}


.notification-dot[hidden]{

    display:none;

}


.notification-panel{

    position:fixed;

    z-index:3500;

    max-height:
        min(520px, calc(100vh - 80px));

    display:flex;

    flex-direction:column;

    background:var(--surface);

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

    border-radius:14px;

    box-shadow:var(--shadow);

    overflow:hidden;

}


.notification-panel-header{

    min-height:58px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    padding:12px 16px;

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

}


.notification-panel-header h3{

    margin:0;

    font-size:15px;

}


.notification-mark-all{

    border:0;

    background:transparent;

    color:var(--primary);

    font-size:12px;

    cursor:pointer;

}


.notification-mark-all:hover{

    text-decoration:underline;

}


.notification-panel-content{

    overflow-y:auto;

}


.notification-item{

    width:100%;

    display:flex;

    align-items:flex-start;

    gap:12px;

    padding:13px 16px;

    border:0;

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

    background:transparent;

    color:var(--text);

    text-align:left;

    cursor:pointer;

}


.notification-item:hover{

    background:var(--surface-light);

}


.notification-item.unread{

    background:
        rgba(36,95,143,.06);

}


.notification-item-icon{

    width:34px;

    min-width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:9px;

    background:var(--surface-light);

    color:var(--primary);

}


.notification-item-content{

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:3px;

}


.notification-item-content strong{

    font-size:13px;

}


.notification-item-content span{

    font-size:12px;

    color:var(--text-muted);

    line-height:1.4;

}


.notification-item-content small{

    font-size:11px;

    color:var(--text-muted);

}


.notification-empty{

    padding:35px 20px;

    text-align:center;

    color:var(--text-muted);

    font-size:13px;

}


@media(max-width:768px){

    .notification-panel{

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

    }

}

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

.deploy-page{

    display:flex;

    flex-direction:column;

    gap:24px;

}


/* =========================================================
   DEPLOY DROPZONE
========================================================= */

.deploy-dropzone{

    min-height:280px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:30px;

    border:2px dashed var(--border);

    border-radius:14px;

    background:var(--surface-light);

    text-align:center;

    cursor:pointer;

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

}


.deploy-dropzone:hover{

    border-color:var(--primary);

    background:
        rgba(36,95,143,.04);

}


.deploy-dropzone.dragover{

    border-color:var(--primary);

    background:
        rgba(36,95,143,.08);

    box-shadow:
        0 0 0 3px
        rgba(36,95,143,.10);

}


.deploy-dropzone:focus-visible{

    outline:none;

    border-color:var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(36,95,143,.12);

}


.deploy-dropzone.has-file{

    min-height:180px;

}


/* =========================================================
   DROPZONE ICON
========================================================= */

.deploy-dropzone-icon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:var(--surface);

    color:var(--primary);

    font-size:24px;

}


.deploy-dropzone h3{

    margin:4px 0 0;

    font-size:17px;

    font-weight:600;

}


.deploy-dropzone p{

    margin:0;

    color:var(--text-muted);

    font-size:13px;

}


.deploy-file-hint{

    font-size:11px !important;

}


/* =========================================================
   SELECTED FILE
========================================================= */

.deploy-file-preview{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    margin-top:18px;

    padding:14px;

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

    border-radius:12px;

    background:var(--surface-light);

}


.deploy-file-info{

    min-width:0;

    display:flex;

    align-items:center;

    gap:12px;

}


.deploy-file-icon{

    width:42px;

    min-width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    background:var(--surface);

    color:var(--primary);

    font-size:17px;

}


.deploy-file-details{

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:3px;

}


.deploy-file-details strong{

    max-width:100%;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    font-size:13px;

}


.deploy-file-details span{

    color:var(--text-muted);

    font-size:12px;

}


/* =========================================================
   DEPLOY OPTIONS
========================================================= */

.deploy-options{

    display:grid;

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

    gap:18px;

    margin-top:20px;

    padding-top:20px;

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

}


.deploy-options .form-group{

    display:flex;

    flex-direction:column;

    gap:7px;

}


.deploy-options label{

    font-size:13px;

    font-weight:600;

    color:var(--text);

}


.deploy-options .form-control{

    width:100%;

    min-height:44px;

    padding:
        0 12px;

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

    border-radius:10px;

    background:var(--surface);

    color:var(--text);

    outline:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}


.deploy-options .form-control:hover{

    border-color:
        var(--text-muted);

}


.deploy-options .form-control:focus{

    border-color:var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(36,95,143,.12);

}


.deploy-submit{

    grid-column:
        1 / -1;

    justify-content:center;

}


.deploy-submit:disabled{

    opacity:.6;

    cursor:not-allowed;

}


/* =========================================================
   DEPLOY PROGRESS
========================================================= */

.deploy-progress{

    margin-top:20px;

    padding:18px;

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

    border-radius:12px;

    background:var(--surface-light);

}


.deploy-progress-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    margin-bottom:10px;

    font-size:13px;

}


.deploy-progress-header strong{

    font-weight:600;

}


.deploy-progress-header span{

    color:var(--text-muted);

}


.deploy-status-text{

    margin:10px 0 0;

    color:var(--text-muted);

    font-size:12px;

    line-height:1.5;

}


.deploy-progress.success{

    border-color:
        var(--success);

}


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

@media(max-width:768px){

    .deploy-options{

        grid-template-columns:1fr;

    }


    .deploy-submit{

        grid-column:auto;

    }


    .deploy-dropzone{

        min-height:240px;

        padding:22px;

    }

}


@media(max-width:480px){

    .deploy-dropzone{

        min-height:220px;

        padding:18px;

    }


    .deploy-dropzone h3{

        font-size:15px;

    }


    .deploy-file-preview{

        align-items:flex-start;

    }


    .deploy-file-info{

        min-width:0;

    }

}

/* THEABS sidebar logout */
.sidebar-logout{display:flex;align-items:center;justify-content:flex-start;gap:9px;width:100%;min-height:34px;margin-bottom:8px;padding:0 10px;border:1px solid rgba(189,101,75,.13);border-radius:8px;background:rgba(189,101,75,.035);color:#bd654b;font:inherit;font-size:10px;font-weight:700;cursor:pointer;transition:background .18s,border-color .18s,color .18s}.sidebar-logout:hover{background:rgba(189,101,75,.07);border-color:rgba(189,101,75,.25);color:#bd654b}.sidebar-logout:disabled{opacity:.55;cursor:wait}.sidebar.collapsed .sidebar-logout{justify-content:center;padding:0}.sidebar.collapsed .sidebar-logout span{display:none}.sidebar-logout.is-loading i{animation:theabs-spin .8s linear infinite}@keyframes theabs-spin{to{transform:rotate(360deg)}}


/* =========================================================
   THEABS DASHBOARD - QUICK ACTIONS
========================================================= */
.theabs-dashboard-actions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}

.theabs-action-card{
    min-width:0;
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:18px;
    border:1px solid var(--border);
    background:var(--surface);
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.theabs-action-card:hover{
    transform:translateY(-2px);
    border-color:rgba(36,95,143,.35);
    box-shadow:var(--shadow);
}

.theabs-action-icon{
    width:42px;
    height:42px;
    min-width:42px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:rgba(36,95,143,.10);
    color:var(--primary);
    font-size:16px;
}

.theabs-action-content{
    min-width:0;
    flex:1;
}

.theabs-action-card h3{
    margin:0;
    color:var(--text);
    font-size:15px;
    font-weight:750;
}

.theabs-action-card p{
    margin:5px 0 13px;
    color:var(--text-muted);
    font-size:11px;
    line-height:1.5;
}

.theabs-action-card .btn{
    min-height:34px;
    padding:0 11px;
    font-size:10px;
}

@media(max-width:1100px){
    .theabs-dashboard-actions{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:640px){
    .theabs-dashboard-actions{
        grid-template-columns:1fr;
        gap:12px;
    }

    .theabs-action-card{
        padding:15px;
    }
}


/* =========================================================
   THEABS GLOBAL HEADING HARMONIZER
   Keeps page titles visually consistent with Post.
========================================================= */
.page-header .page-title,
.page-header h1,
.dashboard .page-header h1,
.deploy-page .page-header h1,
.users-page .page-header h1,
.membership-page .page-header h1 {
    color:var(--primary);
}

.page-header .page-description,
.page-header p {
    color:var(--text-muted);
}

.section-title,
.page-section-title,
.section-heading,
.page-eyebrow,
.eyebrow {
    color:var(--primary);
}




.btn,
.nav-item,
.sidebar-link,
.tab,
.card,
.table tbody tr,
.form-control,
.form-select,
.user-role-select,
.membership-search-field,
.icon-button,
.action-button {
    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.btn-primary:hover,
.btn-success:hover,
.btn:hover:not(:disabled) {
    border-color:var(--primary-hover);
    box-shadow:0 0 0 3px var(--accent-soft);
}

.btn-primary:active,
.btn-success:active,
.btn:active:not(:disabled) {
    transform:translateY(1px);
}

.card:hover {
    border-color:var(--accent-border);
}

.form-control:hover,
.form-select:hover,
.user-role-select:hover {
    border-color:var(--primary-hover);
}

.form-control:focus,
.form-select:focus,
.user-role-select:focus,
.membership-search-field:focus-within {
    border-color:var(--primary);
    box-shadow:0 0 0 3px var(--focus-ring);
    outline:none;
}

.nav-item:hover,
.sidebar-link:hover,
.tab:hover {
    border-color:var(--accent-border);
    color:var(--primary);
}

.table tbody tr:hover {
    background:var(--panel-hover);
}

.icon-button:hover,
.action-button:hover {
    color:var(--primary);
    border-color:var(--accent-border);
    background:var(--accent-soft);
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .nav-item,
    .sidebar-link,
    .tab,
    .card,
    .table tbody tr,
    .form-control,
    .form-select,
    .user-role-select,
    .membership-search-field,
    .icon-button,
    .action-button {
        transition:none;
    }
}



.btn-secondary i,
.btn-secondary svg,
.action-button i,
.action-button svg,
.icon-button i,
.icon-button svg {
    color:var(--primary);
}

.btn-secondary:hover i,
.btn-secondary:hover svg,
.action-button:hover i,
.action-button:hover svg,
.icon-button:hover i,
.icon-button:hover svg {
    color:var(--primary-hover);
}

/* Font Awesome action icons must never inherit white from light-theme buttons. */
.btn-secondary .fa-solid.fa-rotate,
.btn-secondary .fa-regular.fa-eye,
.btn-secondary .fa-solid.fa-rotate-left,
.action-button .fa-solid.fa-rotate,
.action-button .fa-regular.fa-eye,
.action-button .fa-solid.fa-rotate-left {
    color:var(--primary) !important;
}

/* ARCTIC CYAN — unified icon treatment */
:where(.icon,.icon i,.nav-icon,.action-icon,.stat-icon,.card-icon,.btn-icon,.section-icon){
    color:var(--primary);
    transition:color .2s ease,transform .2s ease,background-color .2s ease;
}
:where(.icon,.nav-icon,.action-icon,.card-icon):hover{
    color:var(--primary-hover);
    transform:translateY(-1px);
}
:where(.icon-box,.stat-icon-box,.card-icon-box){
    color:var(--primary);
    background:color-mix(in srgb,var(--primary) 10%,transparent);
    border:1px solid color-mix(in srgb,var(--primary) 22%,transparent);
}