html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}
header {
    flex-shrink: 0;
}

main {
    flex: 1 0 auto; /* grow and push footer down */
    min-height: 0;
}

footer {
    flex-shrink: 0; /* footer stays at bottom */
}

/* Card */
.zs-card {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
    border: 1px solid #eef1f4;
}
:root {
    --brand-50: #eaf5fc; /* very light tint */
    --brand-100: #cfe9f9;
    --brand-600: #126eb3; /* your logo blue */
    --brand-700: #0e5a90; /* darker hover/active text */
    --menu-text: #2b2f36;
    --menu-muted: #6b7280;
}

.zs-card .zs-card-header {
    padding: .85rem 1rem;
    border-bottom: 1px solid #eef1f4;
    font-weight: 600;
    color: #126eb3;
}

.zs-card .zs-card-body {
    padding: 1rem;
}

/* Table */
.zs-table-wrap {
    overflow: auto;
    border: 1px solid #eef1f4;    
}

table.zs-table {
    font-size: small;
}

table.zs-table thead th {
    background-color: #126eb3;
    color: white;
    font-weight: 300;
}

table.zs-table tbody tr:hover {
    background: #f5f9ff;
}

table.zs-table td, table.zs-table th {
    vertical-align: middle;
}

.zs-table-compact td, .zs-table-compact th {
    padding: .5rem .75rem;
}

/* Actions */
.zs-actions {
    display: flex;
    gap: .5rem;
    justify-content: flex-start;
}

.zs-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: .65rem;
    padding: .35rem .65rem;
    border: 1px solid transparent;
    text-decoration: none;
}

    .zs-btn:hover {
        text-decoration: none;
    }

.zs-btn-edit {
    background: #eef7ff;
    border-color: #cfe6ff;
}

.zs-btn-details {
    background: #f6f5ff;
    border-color: #e0dcff;
}

.zs-btn-delete {
    background: #fff2f2;
    border-color: #ffd5d5;
    color: #b42318;
}


/* Gradient token reused for button & avatar */
:root {
    --ez-grad-start: #0d6efd;
    --ez-grad-end: #4f46e5;
    --nav-h: 72px;
}

html {
    scroll-padding-top: var(--nav-h);
}
/* anchors/scroll-to-top won't get covered */

.btn-login {
    background: #126eb3;
    color: #fff;
    border: none;
    transition: transform .06s ease, box-shadow .2s ease;
}

    .btn-login:hover,
    .btn-login:focus {
        color: #26689c;
        border-color: #26689c;
        box-shadow: 0 .25rem .75rem rgba(13,110,253,.25);
        transform: translateY(-1px);
    }

    .btn-login:active {
        transform: translateY(0);
        box-shadow: 0 .125rem .5rem rgba(13,110,253,.2);
    }

.avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #126eb3;
    color: #fff;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .5px;
    box-shadow: 0 .25rem .75rem rgba(13,110,253,.25);
}

@media (max-width: 576px) {
    .avatar-circle {
        width: 44px;
        height: 44px;
        font-size: 1.05rem;
    }
}

.navbar-brand img {
    width: 28px;
    height: 28px;
}

ez-nav-link {
    border-radius: .5rem;
    transition: background-color .15s ease,color .15s ease;
}

.ez-nav-link:hover, .ez-nav-link:focus {
    background-color: rgba(0,0,0,.05);
}

.ez-nav-link.active {
    background-color: rgba(13,110,253,.12);
    color: #0d6efd;
}

:root {
    --ez-blue: #126eb3; /* avatar color */
    --ez-blue-soft: rgba(18,110,179,.08); /* sidebar bg */
    --nav-h: 64px; /* approx navbar height */
    --sidebar-footer-bg: #e9ecef; /* help bar bg */
}

/* Break out of parent .container to go edge-to-edge */
.full-bleed {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
}

/* Shell: sidebar + content; full height under navbar */
.product-shell {
    display: grid;
    grid-template-columns: 300px 1fr;
    min-height: calc(100vh - var(--nav-h));
    gap: 0;
}

@media (max-width: 992px) {
    .product-shell {
        grid-template-columns: 1fr;
    }
}

/* Sidebar container */
.product-sidebar {
    background: var(--ez-blue-soft);
    border-right: 1px solid rgba(0,0,0,.06);
}
/* Sticky on desktop, fixed height; on mobile, height auto when expanded */
@media (min-width:992px) {
    .product-sidebar {
        position: sticky;
        top: var(--nav-h); /* matches real navbar height */
        height: calc(100vh - var(--nav-h)); /* fills to bottom */
    }
}

/* Sidebar internal layout: header + scrollable body + fixed footer */
.sidebar-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sidebar-header {
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-body {
    padding: .5rem;
    overflow: auto;
}

.sidebar-footer {
    margin-top: auto;
    background: var(--sidebar-footer-bg);
    padding: .75rem 1rem;
    border-top: 1px solid rgba(0,0,0,.06);
}

/* Keep Help always visible by ensuring only .sidebar-body scrolls */
.sidebar-body .list-group-item-action:hover {
    background: rgba(0,0,0,.05);
}

.help-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    color: #343a40;
    text-decoration: none;
}

    .help-link:hover {
        color: #212529;
    }

/* Makes the page header (title + Save/Cancel) stick to the top while scrolling */
.pp-sticky-pagehead {
    position: sticky;
    top: 0; /* adjust if you have a fixed navbar */
    z-index: 1030; /* above content; similar to .navbar */
    background: var(--bs-body-bg);
    padding-block: .25rem;
    border-bottom: 1px solid var(--bs-border-color);
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

/* Right column: sticky aside on lg+ (mobile remains flow for comfort) */
.pp-sticky-lg {
    position: static;
}

@media (min-width: 992px) {
    .pp-sticky-lg {
        position: sticky;
        top: 1rem;
    }
}

/* Card headers that remain visible as you scroll past long sections */
.pp-sticky-section {
    position: sticky;
    top: 3.25rem; /* space for the sticky page header; tweak to taste */
    z-index: 2;
    background: var(--bs-card-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

/* Mobile ergonomics for long <pre> blocks in preview/JSON */
@media (max-width: 991.98px) {
    pre.small {
        max-height: 40vh;
        overflow: auto;
    }
}

.pp-card-body-scroll {
    max-height: calc(100vh - 14rem);
    overflow: auto;
}

/* Makes the page header (title + Save/Cancel) stick to the top while scrolling */
.pp-sticky-pagehead {
    position: sticky;
    top: 0; /* adjust if you have a fixed navbar */
    z-index: 1030; /* above content; similar to .navbar */
    background: var(--bs-body-bg);
    padding-block: .25rem;
    border-bottom: 1px solid var(--bs-border-color);
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

/* Right column: sticky aside on lg+ (mobile remains flow for comfort) */
.pp-sticky-lg {
    position: static;
}

@media (min-width: 992px) {
    .pp-sticky-lg {
        position: sticky;
        top: 1rem;
    }
}

/* Card headers that remain visible as you scroll past long sections */
.pp-sticky-section {
    position: sticky;
    top: 3.25rem; /* space for the sticky page header; tweak to taste */
    z-index: 2;
    background: var(--bs-card-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

/* Mobile ergonomics for long <pre> blocks in preview/JSON */
@media (max-width: 991.98px) {
    pre.small {
        max-height: 40vh;
        overflow: auto;
    }
}

.zsi-green {
    color: rgba(115,180,103,.9);
}
.zsi-blue {
    color: #126eb3;
}
h1.zsi-green {
    color: rgba(115,180,103,.9) !important;
}

h1.zsi-blue {
    color: #126eb3 !important;
}

.zsi-btn-size {
    flex: 1;
    min-width: 120px;
    min-height: 50px;
    padding: 10px 20px;
    text-align: center;
}
/* --- Sidebar Layout --- */
.app-sidebar {
    min-width: 240px;
    padding-top: .5rem;
}

    /* Section Header */
    .app-sidebar .section-title {
        color: var(--menu-muted);
        letter-spacing: .05em;
        font-weight: 600;
        font-size: .75rem;
        margin-bottom: .25rem;
    }

    /* Sidebar Group */
    .app-sidebar .list-group {
        border-radius: 12px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
        margin-bottom: .5rem;
    }

    /* List Items */
    .app-sidebar .list-group-item {
        border: 0 !important;
        border-left: 3px solid transparent;
        padding: .625rem .875rem;
        color: var(--menu-text);
        background: transparent;
        transition: all .15s ease-in-out;
    }

        /* Hover / Focus */
        .app-sidebar .list-group-item:hover,
        .app-sidebar .list-group-item:focus {
            background: var(--brand-50);
            color: var(--brand-700);
            text-decoration: none;
        }

        /* Active Item */
        .app-sidebar .list-group-item.active {
            background: linear-gradient(90deg, var(--brand-50), #fff 60%);
            color: var(--brand-700);
            font-weight: 600;
            border-left-color: var(--brand-600);
        }

    /* Divider between section groups */
    .app-sidebar .list-group + .list-group {
        margin-top: .25rem;
    }

/* Responsive */
@media (max-width: 991.98px) {
    .app-sidebar {
        min-width: 100%;
        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .05);
    }
}