:root {
    --b1: #0f172a; /* deep blue */
    --b2: #2563eb; /* primary blue */
    --b3: #60a5fa; /* soft highlight */
    --ink: #0f172a; /* near-black */
    --muted: #64748b; /* slate text */
    --line: rgba(15,23,42,.10);
    --wash: #f8fbff; /* modern light background */
}


.alert-modern {
    border-radius: 14px;
    border: 1px solid rgba(37,99,235,.18);
    background: linear-gradient(135deg, var(--wash) 0%, #fff 60%);
    box-shadow: 0 8px 20px rgba(0,0,0,.05);
    position: relative;
    padding: 14px 16px;
}

.alert-modern:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, var(--b2) 0%, var(--b1) 100%);
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
}

.alert-modern .hdr {
    display: table;
    width: 100%;
}

.alert-modern .ico {
    display: table-cell;
    width: 44px;
    vertical-align: top;
    color: var(--b1);
    font-size: 20px;
    padding-right: 10px;
}

.alert-modern .txt {
    display: table-cell;
    vertical-align: top;
}

.alert-modern h4 {
    margin: 0;
    font-weight: 700;
    color: var(--ink);
}

.alert-modern .sub {
    margin-top: 4px;
    font-size: 12px;
    color: var(--muted);
}


.welcome-hero {
    position: relative;
    border-radius: 16px;
    padding: 18px 18px 16px 18px;
    border: 1px solid #d9edf7; /* bootstrap info border */
    background: linear-gradient(135deg, #f4fbff 0%, #ffffff 55%, #f2fbff 100%);
    box-shadow: 0 10px 26px rgba(0,0,0,.06);
    overflow: hidden;
    margin: 12px 0 18px 0;
}

/* left accent bar (modern look) */
.welcome-hero.accent:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, var(--b2) 0%, var(--b1) 100%);
}

/* soft decorative bubbles */
.welcome-hero:after {
    content: "";
    position: absolute;
    right: -70px;
    top: -70px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(96,165,250,.22), rgba(96,165,250,0));
}

.welcome-row {
    position: relative;
    z-index: 2;
    display: table;
    width: 100%;
}

.welcome-left {
    display: table-cell;
    vertical-align: top;
}

.welcome-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.welcome-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(37,99,235,.10);
    border: 1px solid rgba(37,99,235,.20);
    color: var(--b1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex: 0 0 auto;
}

.welcome-title {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--ink);
}

.welcome-sub {
    margin: 6px 0 0 0;
    font-size: 12px;
    color: var(--muted);
}

.welcome-pills {
    margin-top: 14px;
}

.w-pill {
    display: inline-block;
    background: #fff;
    border: 1px solid rgba(37,99,235,.18);
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    border-radius: 999px;
    padding: 8px 12px;
    margin: 0 10px 10px 0;
    font-size: 13px;
    color: #333;
}

    .w-pill .glyphicon {
        color: #31708f;
        margin-right: 8px;
        top: 2px;
        position: relative;
    }

    .w-pill .label {
        font-weight: 400;
        color: #567189;
    }

    .w-pill .value {
        font-weight: 700;
        color: #1f2a37;
    }

@media (max-width: 768px) {
    .welcome-left {
        display: block;
        width: auto;
    }
}

/* Card container */
.grid-card {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15,23,42,.08);
    overflow: hidden;
    margin-top: 12px;
}

.grid-scroll {
    overflow-x: auto;
}

/* Table: minimal, modern */
.table.ssbm-grid {
    margin: 0;
}

    /* Header: clean, not heavy */
    .table.ssbm-grid thead > tr > th {
        background: #fff;
        color: var(--ink);
        font-weight: 700;
        font-size: 12px;
        text-transform: none; /* more modern */
        letter-spacing: 0;
        padding: 14px 16px;
        border-bottom: 1px solid var(--line) !important;
        vertical-align: middle;
    }

    /* Rows: no harsh borders */
    .table.ssbm-grid tbody > tr > td {
        padding: 14px 16px;
        border-top: 0;
        vertical-align: middle;
        color: #2b2b2b;
    }

    /* Soft zebra */
    .table.ssbm-grid tbody > tr:nth-child(odd) > td {
        background: var(--wash);
    }

    /* Hover: subtle "surface" lift */
    .table.ssbm-grid.table-hover tbody > tr:hover > td {
        background: rgba(37,99,235,.06);
    }

    /* First column: slightly stronger */
    .table.ssbm-grid tbody > tr > td:first-child {
        font-weight: 400;
        color: #111827;
    }

/* Modern pills for small values */
.grid-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(37,99,235,.18);
    background: rgba(96,165,250,.14);
    color: var(--ink);
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
}

    .grid-pill.gray {
        background: rgba(15,23,42,.04);
        border-color: rgba(15,23,42,.08);
        color: var(--muted);
    }

/* Empty template */
.grid-empty {
    padding: 16px;
    color: #607086;
}

/* Optional: tighten on mobile */
@media (max-width: 768px) {
    .table.ssbm-grid thead > tr > th,
    .table.ssbm-grid tbody > tr > td {
        padding: 12px 12px;
    }
}

.details-rows {
    margin-top: 14px;
}

.details-row {
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

    .details-row:first-child {
        border-top: 0;
        padding-top: 6px;
    }

.details-label {
    color: var(--muted);
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.details-value {
    margin-top: 6px;
    color: var(--ink);
    font-weight: 700;
    font-size: 13px;
    word-break: break-word;
}

.details-label .glyphicon {
    color: var(--b1);
    top: 0;
    position: relative;
}


@media (max-width:768px) {
    .details-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .details-value {
        text-align: left;
    }
}
.grid-pill.danger {
    background: #d9534f; /* bootstrap danger-ish */
    color: #fff;
}

/* Stronger, cleaner outer edge for the table */
.grid-card {
    border: 1px solid rgba(15,23,42,.14); /* slightly stronger */
}

/* Give the table itself a nice frame */
.table.ssbm-grid {
    border: 1px solid rgba(15,23,42,.10);
    border-radius: 14px;
    overflow: hidden; /* ensures rounded corners apply */
}

    /* Improve left/right edges + bottom edge */
    .table.ssbm-grid > thead > tr > th,
    .table.ssbm-grid > tbody > tr > td {
        border-right: 1px solid rgba(15,23,42,.06);
    }

        .table.ssbm-grid > thead > tr > th:last-child,
        .table.ssbm-grid > tbody > tr > td:last-child {
            border-right: 0;
        }

    /* Slightly stronger separator under header */
    .table.ssbm-grid thead > tr > th {
        border-bottom: 1px solid rgba(15,23,42,.12) !important;
    }

    /* Soft bottom edge */
    .table.ssbm-grid tbody > tr:last-child > td {
        border-bottom: 1px solid rgba(15,23,42,.10);
    }