/* Hero banner */
.menu-hero {
    background: linear-gradient(135deg,#0D47A1 0%,#1565C0 55%,#0277BD 100%);
    border-radius: 12px;
    padding: 28px 32px;
    margin-bottom: 20px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(21,101,192,.35);
}

    .menu-hero::after {
        content: '💧';
        font-size: 220px;
        position: absolute;
        right: -30px;
        bottom: -50px;
        opacity: .06;
        line-height: 1;
        pointer-events: none;
    }

.menu-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.menu-hero-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.3px;
    margin-bottom: 4px;
}

.menu-hero-sub {
    font-size: 12px;
    opacity: .82;
    line-height: 1.55;
}

.hero-badge {
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.3);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
/* KPI strip inside hero */
.hero-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(120px,1fr));
    gap: 10px;
    margin-top: 20px;
}

.hero-kpi {
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all .2s;
    position: relative;
}

    .hero-kpi:hover {
        background: rgba(255,255,255,.22);
        transform: translateY(-2px);
    }

    .hero-kpi .hk-val {
        font-size: 26px;
        font-weight: 800;
        line-height: 1;
    }

    .hero-kpi .hk-lbl {
        font-size: 10px;
        opacity: .8;
        text-transform: uppercase;
        letter-spacing: .4px;
        margin-top: 3px;
    }

    .hero-kpi .hk-chg {
        font-size: 10px;
        margin-top: 5px;
        opacity: .9;
    }

.hk-chg.up {
    color: #A5D6A7;
}

.hk-chg.dn {
    color: #EF9A9A;
}

.hk-chg.neu {
    color: rgba(255,255,255,.65);
}

/*=====================
quick navigation 
====================*/

.quick-dashboard {
    background: #fdfdfd;
    padding: 20px;
    border-radius: 12px;
}

/* Header */
.quick-header {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.quick-logo {
    font-size: 28px;
    margin-bottom: 8px;
}

.quick-search {
    max-width: 300px;
    margin: 15px auto 0;
    border-radius: 8px;
}

/* CARD BASE */
.q-card {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
    text-align: left;
    color: #fff;
    background: linear-gradient(90deg, #8f63dc, #af8deb);
}

    /* ICON FIX (instead of ::before) */
    .q-card::before {
        content: "➤";
        margin-right: 8px;
        font-weight: bold;
        color: #fff;
    }

    /* LINK FIX */
    .q-card a {
        color: #fff;
        text-decoration: none;
        flex: 1;
    }

    /* Hover */
    .q-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    }

    /* Highlight card */
    .q-card.highlight {
        background: #f2c2b5;
        font-weight: 600;
    }

/* NEW badge */
.new-badge {
    background: red;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 6px;
}

/* TAB COLORS */
.tab-blue {
    background: linear-gradient(90deg, #2196F3, #64B5F6);
}

.tab-green {
    background: linear-gradient(90deg, #43A047, #81C784);
}

.tab-orange {
    background: linear-gradient(90deg, #FB8C00, #FFB74D);
}

/* =========================
   MODERN DASHBOARD TABLE
========================= */

.tbl-wrap {
    background: #fff;
    border-radius: 12px;
    overflow-x: auto;
    padding: 0px 10px;
}

    /* Table base */
    .tbl-wrap table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 14px;
    }

    /* Header */
    .tbl-wrap thead th {
        background: #f7f9fc;
        color: #333;
        font-weight: 600;
        padding: 12px 14px;
        border-bottom: 1px solid #eaeaea;
        position: sticky;
        top: 0;
        z-index: 1;
        white-space: nowrap;
    }
    
    /* Body cells */
    .tbl-wrap tbody td {
        padding: 12px 14px;
        border-bottom: 1px solid #f0f0f0;
        color: #0e0d0d;
        vertical-align: middle;
    }

    /* Row hover */
    .tbl-wrap tbody tr:hover {
        background: #f9fbff;
        transition: 0.2s;
    }

    /* First column highlight (Parameter) */
    .tbl-wrap tbody td:first-child {
        font-weight: 600;
        color: #222;
    }

/* Center helper */
.text-center {
    text-align: center;
}

/* Value colors */
.text-yellow {
    color: #f5a623 !important;
    font-weight: 600 !important;
}

.text-orange {
    color: #ff7a00 !important;
    font-weight: 600 !important;
}

.text-green {
    color: #28a745 !important;
    font-weight: 600 !important;
}

.text-red {
    color: #e74c3c !important;
    font-weight: 600 !important;
}

/* Pills (Risk Level) */
.pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* Risk colors */
.p-warn {
    background: #fff3cd;
    color: #856404;
}

.p-fail {
    background: #f8d7da;
    color: #721c24;
}

.p-ok {
    background: #d4edda;
    color: #155724;
}

/* Subtle table shadow like dashboard card */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.tbl-wrap table {
    width: 100%;
    border-collapse: collapse; /* IMPORTANT: removes extra gaps */
    border-spacing: 0;
}

.tbl-wrap th,
.tbl-wrap td {
    padding: 6px 10px; /* reduce spacing */
    font-size: 13px; /* compact text */
    vertical-align: middle;
    line-height: 1.2; /* tight row height */
    white-space: nowrap;
}

/* Row height control */
.tbl-wrap tbody tr {
    height: 34px; /* compact rows */
}

/* Optional: better header look */
.tbl-wrap thead th {
    font-weight: 600;
    padding: 8px 10px;
}

/* Reduce card padding if needed */
.card {
    padding: 10px;
}

/* Remove extra bootstrap gap effect if applied */
.table-responsive, .tbl-wrap {
    overflow-x: auto;
}

.txt-bg-blue {
    background: #E3F2FD !important;
    color: #0D47A1 !important;
}
.txt-bg-green {
    background: #E8F5E9 !important;
    color: #1B5E20 !important;
}

.txt-bg-yellow {
    background: #FFF8E1;
    color: #7B5E00;
}

.txt-bg-Lightgreen {
    background: #E0F7FA !important;
    color: #006064 !important;
}

.txt-bg-red {
    background: #FFF8E1 !important;
    color: #7B5E00 !important;
}

.txt-bg-grey {
    background: #FBE9E7 !important;
    color: #BF360C !important;
}

table thead th {
    background: linear-gradient(180deg, #0D47A1, #1565C0) !important;
    color: white !important;
}