/* =========================================================
   NUSUK MARHABA - UNIFIED LIST / FILTER / STAT UI
   ========================================================= */

/* ---------- بطاقات الإحصائيات ---------- */

.stats-bar,
.stats-grid,
.summary-grid,
.cards-grid,
.top-cards,
.kpi-grid,
.metrics-grid,
.dashboard-cards,
.readiness-top-one-row{
    gap:10px !important;
}

.stat-box,
.stat-card,
.summary-card,
.metric-card,
.kpi-card,
.quick-card,
.action-card,
.readiness-page-card,
.dashboard-card{
    box-sizing:border-box !important;

    background:rgba(255,250,243,.90) !important;
    border:1px solid rgba(180,135,87,.25) !important;
    border-radius:18px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.72),
        0 6px 18px rgba(78,52,46,.07) !important;

    backdrop-filter:blur(12px) saturate(150%) !important;
    -webkit-backdrop-filter:blur(12px) saturate(150%) !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease !important;
}

.stat-box:hover,
.stat-card:hover,
.summary-card:hover,
.metric-card:hover,
.kpi-card:hover,
.quick-card:hover,
.action-card:hover,
.readiness-page-card:hover,
.dashboard-card:hover{
    transform:translateY(-2px) !important;
    border-color:rgba(188,150,100,.55) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8),
        0 10px 24px rgba(78,52,46,.10) !important;
}


/* الأيقونات */
.readiness-page-card .ico,
.stat-icon,
.metric-icon,
.kpi-icon,
.quick-card .ico,
.action-card .ico{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:42px !important;
    height:42px !important;

    margin-left:auto !important;
    margin-right:auto !important;
    margin-bottom:8px !important;

    border-radius:13px !important;
    background:rgba(234,219,200,.72) !important;
}


/* الأرقام */
.stat-num,
.stat-value,
.metric-value,
.kpi-value,
.top-card-count,
.summary-card > b{
    color:#4E342E !important;
    font-weight:800 !important;
}


/* عناوين البطاقات */
.stat-lbl,
.stat-title,
.metric-title,
.kpi-title,
.readiness-page-card > b,
.quick-card > b,
.action-card > b{
    color:#4E342E !important;
    font-weight:700 !important;
}


/* ---------- مناطق الفلاتر ---------- */

.controls,
.filters,
.filter-bar,
.filters-bar,
.filter-box,
.filter-panel,
.filter-section,
.search-filters,
.report-filters,
.table-filters,
.toolbar-filters{
    box-sizing:border-box !important;

    background:rgba(255,250,243,.92) !important;
    border:1px solid rgba(180,135,87,.25) !important;
    border-radius:18px !important;

    padding:14px !important;
    gap:10px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.72),
        0 6px 18px rgba(78,52,46,.07) !important;

    backdrop-filter:blur(14px) saturate(160%) !important;
    -webkit-backdrop-filter:blur(14px) saturate(160%) !important;
}


/* label داخل الفلاتر */
.controls label,
.filters label,
.filter-bar label,
.filters-bar label,
.filter-box label,
.filter-panel label,
.filter-section label,
.search-filters label,
.report-filters label,
.table-filters label,
.toolbar-filters label{
    color:#6d5345 !important;
    font-weight:700 !important;
}


/* كل select / input داخل مناطق الفلاتر */
.controls select,
.controls input,
.filters select,
.filters input,
.filter-bar select,
.filter-bar input,
.filters-bar select,
.filters-bar input,
.filter-box select,
.filter-box input,
.filter-panel select,
.filter-panel input,
.filter-section select,
.filter-section input,
.search-filters select,
.search-filters input,
.report-filters select,
.report-filters input,
.table-filters select,
.table-filters input,
.toolbar-filters select,
.toolbar-filters input{
    height:48px !important;
    min-height:48px !important;

    width:100% !important;
    box-sizing:border-box !important;

    padding:0 13px !important;

    font-family:inherit !important;
    font-size:14px !important;
    font-weight:700 !important;

    color:#4E342E !important;
    background:rgba(255,255,255,.92) !important;

    border:1px solid rgba(188,150,100,.38) !important;
    border-radius:12px !important;

    outline:none !important;
}


/* focus */
.controls select:focus,
.controls input:focus,
.filters select:focus,
.filters input:focus,
.filter-bar select:focus,
.filter-bar input:focus,
.filters-bar select:focus,
.filters-bar input:focus,
.filter-box select:focus,
.filter-box input:focus,
.filter-panel select:focus,
.filter-panel input:focus,
.filter-section select:focus,
.filter-section input:focus,
.search-filters select:focus,
.search-filters input:focus,
.report-filters select:focus,
.report-filters input:focus,
.table-filters select:focus,
.table-filters input:focus,
.toolbar-filters select:focus,
.toolbar-filters input:focus{
    border-color:#bc9664 !important;
    box-shadow:0 0 0 3px rgba(188,150,100,.11) !important;
}


/* ---------- searchable dropdown ---------- */

.nusuk-filter-select-original{
    position:absolute !important;
    opacity:0 !important;
    pointer-events:none !important;
    width:1px !important;
    height:1px !important;
}

.nusuk-filter-select{
    position:relative !important;
    width:100% !important;
    min-width:0 !important;
}

.nusuk-filter-select-btn{
    width:100% !important;
    height:48px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;

    padding:0 13px !important;

    font-family:inherit !important;
    font-size:14px !important;
    font-weight:700 !important;

    color:#4E342E !important;
    background:rgba(255,255,255,.92) !important;

    border:1px solid rgba(188,150,100,.38) !important;
    border-radius:12px !important;

    cursor:pointer !important;
}

.nusuk-filter-select.open .nusuk-filter-select-btn{
    border-color:#bc9664 !important;
    box-shadow:0 0 0 3px rgba(188,150,100,.11) !important;
}

.nusuk-filter-select-menu{
    display:none !important;

    position:absolute !important;
    top:calc(100% + 6px) !important;
    right:0 !important;
    left:0 !important;

    z-index:999999 !important;

    padding:8px !important;

    background:#fffdfa !important;
    border:1px solid rgba(188,150,100,.35) !important;
    border-radius:14px !important;

    box-shadow:0 14px 34px rgba(78,52,46,.18) !important;
}

.nusuk-filter-select.open .nusuk-filter-select-menu{
    display:block !important;
}

.nusuk-filter-search{
    width:100% !important;
    height:42px !important;

    margin:0 0 7px !important;
    padding:0 11px !important;

    box-sizing:border-box !important;

    border:1px solid rgba(188,150,100,.32) !important;
    border-radius:10px !important;

    background:#fff !important;
    color:#4E342E !important;

    font-family:inherit !important;
}

.nusuk-filter-options{
    max-height:270px !important;
    overflow-y:auto !important;
}

.nusuk-filter-option{
    display:block !important;
    width:100% !important;

    padding:10px 11px !important;
    margin:2px 0 !important;

    text-align:right !important;

    background:transparent !important;
    color:#4E342E !important;

    border:0 !important;
    border-radius:9px !important;

    font-family:inherit !important;
    font-size:13px !important;
    font-weight:650 !important;

    cursor:pointer !important;
}

.nusuk-filter-option:hover,
.nusuk-filter-option.selected{
    background:rgba(234,219,200,.64) !important;
}


/* ---------- Responsive ---------- */

@media(max-width:1100px){

    .stats-bar,
    .stats-grid,
    .summary-grid,
    .cards-grid,
    .top-cards,
    .kpi-grid,
    .metrics-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }
}

@media(max-width:700px){

    .stats-bar,
    .stats-grid,
    .summary-grid,
    .cards-grid,
    .top-cards,
    .kpi-grid,
    .metrics-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}