/* =====================================================================
   Dashboard BI Rawat Inap RS Arun - stylesheet utama
   Mengikuti desain UI proposal (sidebar biru tua, kartu putih bersih).
   Warna identitas indikator & status dibaca dari config/indicators.php
   dan di-inject sebagai CSS variable inline oleh layout.
   ===================================================================== */
:root {
    --navy: #082b73;
    --navy2: #0a357f;
    --blue: #2f62e9;
    --blue-soft: #edf3ff;
    --text: #18314f;
    --muted: #6e7f95;
    --line: #dfe7f2;
    --bg: #F1F5F9;
    /* slate-100: latar halaman yang kalem */
    --white: #fff;
    --green: #18a56b;
    --green-soft: #eaf9f2;
    --yellow: #f0b429;
    --yellow-soft: #fff6e5;
    --red: #d94e5a;
    --red-soft: #fdecee;
    --shadow: 0 8px 30px rgba(19, 44, 78, .08);
    --radius: 12px;
    /* setara rounded-xl (card/kontainer) */
    --radius-sm: 8px;
    /* setara rounded-lg (tombol/input/elemen kecil) */
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    background: var(--bg);
    color: var(--text)
}

button,
input,
select,
textarea {
    font: inherit
}

.hidden {
    display: none !important
}

/* ---------- Kerangka aplikasi ---------- */
.app-shell {
    min-height: 100vh;
    display: flex
}

.sidebar {
    width: 242px;
    background: linear-gradient(180deg, #07266a, #093b8f);
    color: #fff;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    padding: 18px 14px;
    z-index: 10;
    display: flex;
    flex-direction: column
}

.brand {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 7px 10px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .12)
}

.brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #fff;
    display: grid;
    place-items: center;
    color: var(--navy);
    font-weight: 800;
    font-size: 12px;
    flex: none
}

.brand h1 {
    font-size: 14px;
    line-height: 1.2;
    margin: 0;
    font-weight: 800
}

.brand span {
    font-size: 10px;
    opacity: .8;
    display: block
}

.nav {
    padding-top: 18px
}

.nav a {
    width: 100%;
    border: 0;
    background: transparent;
    color: #e8f0ff;
    padding: 12px;
    text-decoration: none;
    border-radius: 9px;
    text-align: left;
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px
}

.nav a:hover,
.nav a.active {
    background: rgba(255, 255, 255, .14)
}

.nav .caption {
    font-size: 10px;
    letter-spacing: .1em;
    opacity: .65;
    margin: 12px 10px 6px;
    font-weight: 700;
    white-space: nowrap
}

.sidebar-bottom {
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: 10px
}

.logout-link {
    color: #ffd9dd !important
}

/* Tombol logout mengikuti gaya tautan navigasi sidebar */
.nav form {
    margin: 0
}

.nav .nav-logout {
    width: 100%;
    border: 0;
    background: transparent;
    color: #e8f0ff;
    padding: 12px;
    border-radius: 9px;
    text-align: left;
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
    cursor: pointer
}

.nav .nav-logout:hover {
    background: rgba(255, 255, 255, .14);
    color: #ffd9dd
}

/* Utilitas penyejajaran sel tabel */
.ctr {
    text-align: center
}

.main {
    margin-left: 242px;
    width: calc(100% - 242px);
    min-height: 100vh;
    padding: 26px
}

.topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px
}

.title h2 {
    margin: 0;
    font-size: 23px;
    font-weight: 800
}

.title p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 12px
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.profile-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 99px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700
}

.profile-chip .avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 11px
}

/* ---------- Komponen dasar ---------- */
.select,
.btn,
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=search] {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 9px 11px;
    color: var(--text);
    font-size: 12px
}

.select:focus,
.btn:focus,
input:focus {
    outline: 2px solid var(--blue-soft);
    border-color: var(--blue)
}

.btn {
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 12px
}

.btn.primary {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff
}

.btn.primary:hover {
    background: #254fd0
}

.btn.ghost {
    background: #fff
}

.btn.danger {
    background: var(--red-soft);
    border-color: #ffd2d8;
    color: #b82738
}

.btn.small {
    padding: 6px 9px;
    font-size: 11px
}

.dropdown {
    position: relative
}

.dropdown-menu {
    position: absolute;
    right: 0;
    top: 42px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 6px;
    width: 170px;
    z-index: 30
}

.dropdown-menu a {
    display: block;
    width: 100%;
    padding: 9px;
    border: 0;
    background: transparent;
    text-align: left;
    border-radius: 6px;
    font-size: 12px;
    color: var(--text);
    text-decoration: none
}

.dropdown-menu a:hover {
    background: var(--blue-soft)
}

/* Menu aksi ringkas (dropdown ⋮) untuk baris tabel */
.action-menu {
    position: relative;
    display: inline-block
}

.action-toggle {
    min-width: 32px;
    justify-content: center
}

.action-items {
    position: absolute;
    right: 0;
    top: 34px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 6px;
    width: 180px;
    z-index: 40
}

.action-items a,
.action-items button {
    display: block;
    width: 100%;
    padding: 9px;
    border: 0;
    background: transparent;
    text-align: left;
    border-radius: 6px;
    font-size: 12px;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    font-weight: 600
}

.action-items a:hover,
.action-items button:hover {
    background: var(--blue-soft)
}

.action-items button.danger,
.action-items button.danger:hover {
    color: #b82738;
    background: var(--red-soft)
}

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px
}

.card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px
}

.card-title {
    font-size: 12px;
    font-weight: 800
}

.card-sub {
    font-size: 10px;
    color: var(--muted)
}

.badge {
    display: inline-flex;
    padding: 4px 9px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 700;
    background: var(--blue-soft);
    color: var(--blue)
}

.badge.temporary {
    background: #fff5e5;
    color: #bb7512
}

.badge.manual {
    background: var(--blue-soft);
    color: var(--blue)
}

/* ---------- Filter bar / toolbar atas (clean toolbar) ---------- */
.filter-bar {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 14px;
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 16px
}

.filter-bar label {
    display: block;
    font-size: 9px;
    color: var(--muted);
    font-weight: 800;
    margin-bottom: 4px;
    letter-spacing: .05em
}


/* ---------- Banner sumber data ---------- */
.source-note {
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #f0d8a6;
    background: #fff9e9;
    border-radius: var(--radius-sm);
    color: #6b5316;
    font-size: 11.5px
}

.source-note b {
    color: #614a0f
}

.info-banner {
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #cfe0ff;
    background: var(--blue-soft);
    border-radius: var(--radius-sm);
    color: #274a8f;
    font-size: 11.5px
}

/* Notifikasi info minimalis (data kosong) */
.info-note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    padding: 7px 12px;
    background: #f7f9fc;
    border: 1px solid #e3eaf3;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 11.5px
}

.info-note .info-note-ico {
    font-weight: 800;
    color: var(--blue);
    font-size: 14px
}

/* ---------- KPI cards ---------- */
.kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 14px
}

/* Baris berisi2 kartu (NDR/GDR): menempati kolom tengah, bukan menempel kiri. */
.kpis.kpis-tengah > .kpi:nth-child(1) {
    grid-column: 2
}

.kpis.kpis-tengah > .kpi:nth-child(2) {
    grid-column: 3
}

.kpis.kpis-tengah > .kpi:nth-child(n+3) {
    grid-column: auto
}

.kpi-group-label {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 8px
}

.kpi-group-hint {
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    font-size: 11px;
    color: #8a97a8
}

/* Label kecil untuk metadata/pemetaan kolom pada halaman impor. */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #f4f7fb;
    color: #40506a;
    font-size: 11px;
    line-height: 1.6
}

.chip code {
    background: none;
    padding: 0;
    font-size: 11px
}

.chip.muted {
    background: #f7f8fa;
    color: #8a97a8;
    text-decoration: line-through
}

.chip.ok {
    background: #eaf6ef;
    border-color: #cbe6d6;
    color: #1f7a4d
}

.chip.warn {
    background: #fff4e5;
    border-color: #f3ddb8;
    color: #a4690c
}

.form-stack > * + * {
    margin-top: 14px
}

.kpi {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0;
    box-shadow: var(--shadow);
    overflow: hidden
}

.kpi-accent {
    height: 4px
}

.kpi-body {
    padding: 13px 15px
}

.kpi-head {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.kpi-name {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em
}

.kpi-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center
}

.kpi-icon svg {
    width: 17px;
    height: 17px
}

.kpi small.std {
    color: var(--muted);
    font-size: 10px;
    display: block;
    margin-top: 3px
}

.kpi h3 {
    font-size: 23px;
    margin: 8px 0 1px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em
}

.kpi h3 .unit {
    font-size: 11px;
    color: var(--muted);
    font-weight: 600;
    margin-left: 3px
}

.status-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    border-radius: 99px;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 800
}

.lamp {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
    display: inline-block
}

.lamp.pulse {
    animation: lampPulse 2.4s ease-in-out infinite
}

@keyframes lampPulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .55
    }
}

/* ---------- TEKS KECIL (footer) ---------- */
.text-xs {
    font-size: .6875rem;
    line-height: 1.6
}

/* ---------- ANIMASI MODAL LOGIN TERSEMBUNYI ---------- */
@keyframes modalIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.98)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal-overlay {
        animation: none !important
    }
}

@media (prefers-reduced-motion: reduce) {
    .lamp.pulse {
        animation: none
    }
}

/* ---------- Grafik ---------- */
.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.chart-wrap {
    height: 225px;
    position: relative
}

.chart-wrap.large {
    height: 360px
}

/* kartu tren terpadu */
.chart-card {
    margin-bottom: 12px
}

/* ---------- Tabel ---------- */
.table-card {
    margin-top: 12px
}

.table-wrap {
    overflow: auto
}

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 900px
}

.table th,
.table td {
    padding: 9px;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    text-align: left;
    white-space: nowrap
}

.table th {
    color: var(--muted);
    font-weight: 700;
    background: #fbfdff
}

.table tbody tr:hover {
    background: #f7fafe
}

.table tr:last-child td {
    border-bottom: 0
}

.num {
    text-align: right !important
}

.table tfoot td {
    font-weight: 800;
    background: #fbfdff
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 99px;
    padding: 3px 9px;
    font-size: 9.5px;
    font-weight: 800
}

.page-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px
}

.toolbar {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap
}

.toolbar-left,
.toolbar-right {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap
}

.search {
    width: 210px
}

.empty {
    padding: 44px 10px;
    text-align: center;
    color: var(--muted);
    font-size: 12px
}

/* ---------- Form ---------- */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.field label {
    display: block;
    font-size: 10px;
    color: var(--muted);
    margin-bottom: 5px;
    font-weight: 800;
    letter-spacing: .03em
}

.field input,
.field select,
.field textarea {
    width: 100%
}

.field .hint {
    font-size: 9.5px;
    color: var(--muted);
    margin-top: 4px
}

/* Kontainer input password + tombol lihat/sembunyikan */
.pw-wrap {
    position: relative
}

.pw-wrap input {
    padding-right: 38px
}

.pw-toggle {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 14px;
    line-height: 1;
    padding: 5px;
    cursor: pointer;
    border-radius: var(--radius-sm)
}

.pw-toggle:hover,
.pw-toggle:focus-visible {
    color: var(--blue)
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px
}

.radio-group {
    display: flex;
    gap: 14px;
    align-items: center;
    font-size: 12px
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    font-size: 12px
}

/* ---------- Pesan ---------- */
.alert {
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    font-size: 12px;
    margin-bottom: 14px;
    border: 1px solid
}

.alert.success {
    background: var(--green-soft);
    border-color: #bdebd6;
    color: #0c7c4d
}

.alert.error {
    background: var(--red-soft);
    border-color: #f3bfc5;
    color: #8f2231
}

.alert.warning {
    background: #fff9e9;
    border-color: #f0d8a6;
    color: #6b5316
}

.validation-errors {
    background: var(--red-soft);
    border: 1px solid #f3bfc5;
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 12px;
    color: #8f2231
}

.validation-errors ul {
    margin: 4px 0 0;
    padding-left: 18px
}

.pagination {
    display: flex;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    flex-wrap: wrap
}

.pagination li a,
.pagination li span {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 11px;
    color: var(--text);
    text-decoration: none;
    display: block
}

.pagination .active span {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy)
}

.pagination li.disabled span {
    color: #b6c2d1
}

/* ---------- Login ---------- */
.login {
    max-height: 100dvh;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    background: #f5f7fb;
    overflow: hidden
}

.login-visual {
    position: relative;
    overflow: hidden;
    background: #000;
}

.login-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right;
    display: block;
}

/* Lapisan hitam transparan di atas gambar */
.login-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.login-box {
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px
}

.login-card {
    width: min(400px, 100%);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow)
}

.login-card .brand-mark {
    margin: 0 auto 12px;
    background: var(--blue-soft)
}

.login-card h2 {
    text-align: center;
    margin: 0;
    font-size: 18px
}

.login-card p {
    text-align: center;
    color: var(--muted);
    font-size: 11px;
    margin: 6px 0 20px
}

.login-card .field {
    margin-bottom: 12px
}

.login-card .btn {
    width: 100%;
    padding: 11px;
    justify-content: center
}

.login-foot {
    text-align: center;
    color: #9aa8ba;
    font-size: 9.5px;
    margin-top: 18px;
    line-height: 1.6
}

/* ---------- Responsif ---------- */
@media(max-width:1020px) {
    .kpis {
        grid-template-columns: repeat(2, 1fr)
    }

    .kpis.kpis-tengah > .kpi:nth-child(1),
    .kpis.kpis-tengah > .kpi:nth-child(2) {
        grid-column: auto
    }

    .grid2 {
        grid-template-columns: 1fr
    }

    .login {
        grid-template-columns: 1fr
    }

    .login-visual {
        display: none
    }
}

@media(max-width:720px) {
    .sidebar {
        width: 64px
    }

    .brand h1,
    .brand span,
    .nav span,
    .nav .caption {
        display: none
    }

    .brand {
        justify-content: center;
        padding: 10px 0 16px
    }

    .nav a {
        justify-content: center
    }

    .nav .nav-logout {
        justify-content: center
    }

    .main {
        margin-left: 64px;
        width: calc(100% - 64px);
        padding: 14px
    }

    .topbar {
        flex-direction: column
    }

    .kpis {
        grid-template-columns: 1fr
    }

    .form-grid {
        grid-template-columns: 1fr
    }

    .login-box {
        padding: 20px
    }
}

/* ---------- Master Ruang Rawat & Tempat Tidur ---------- */
.subheader {
    font-size: 12px;
    color: var(--muted);
    margin: 5px 0 0
}

/* Banner KPI total kapasitas */
.total-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    text-decoration: none;
    background: linear-gradient(135deg, #082b73, #2f62e9);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 14px;
    box-shadow: var(--shadow);
    transition: transform .14s ease, box-shadow .14s ease
}

.total-banner { cursor: default; }

.total-banner .tb-title {
    font-size: 13px;
    font-weight: 800;
    color: #fff
}

.total-banner .tb-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, .75);
    margin-top: 3px
}

.total-banner .tb-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right
}

.total-banner .tb-number {
    font-size: 34px;
    font-weight: 800;
    color: #fff;
    line-height: 1
}

.total-banner .tb-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #fff;
    opacity: .9;
    margin-top: 4px
}

/* Grid 6 ruangan: 3 kolom x 2 baris */
.room-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px
}

.room-card {
    position: relative;
    background: #f6f9fd;
    border: 1.5px solid #dde6f2;
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    cursor: pointer;
    display: block;
    text-decoration: none;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
    box-shadow: 0 1px 2px rgba(19, 44, 78, .04)
}

.room-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(19, 44, 78, .14);
    border-color: var(--blue)
}

.room-card .rc-kode {
    font-size: 11px;
    color: #64789a;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em
}

.room-card .rc-tt {
    font-size: 28px;
    font-weight: 800;
    color: var(--navy);
    margin: 6px 0 2px
}

.room-card .rc-label {
    font-size: 10px;
    color: #64789a
}

@media(max-width:820px) {
    .room-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .total-banner {
        flex-direction: column;
        align-items: flex-start
    }

    .total-banner .tb-stat {
        align-items: flex-start;
        text-align: left
    }
}

@media(max-width:520px) {
    .room-grid {
        grid-template-columns: 1fr
    }
}

/* Badge kelas per ruangan di modal header */
.klass-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px
}

.klass-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #eef3fb;
    border: 1px solid #dfe7f2;
    border-radius: 99px;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 700;
    color: #3b4f6e
}

.klass-badge b {
    color: var(--navy)
}

/* Tab kelas kamar dinamis pada modal detail bed */
.bed-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px
}

.bed-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
    font-family: inherit
}

.bed-tab:hover {
    border-color: var(--blue)
}

.bed-tab.active {
    border-color: var(--blue);
    background: var(--blue-soft)
}

.bed-tab .tt-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    border-radius: 99px;
    background: var(--navy);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 0 6px
}

.bed-tab.active .tt-num {
    background: var(--blue)
}

.bed-tab .tt-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text)
}

.bed-legend {
    font-size: 10.5px;
    color: var(--muted);
    line-height: 1.5;
    margin: 0 0 10px
}

.bed-legend b {
    color: var(--text)
}

/* ---------- Modal ---------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(9, 28, 60, .5);
    backdrop-filter: blur(2px);
    z-index: 60;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5vh 16px;
    overflow-y: auto
}

.modal {
    background: #fff;
    width: min(720px, 100%);
    border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(9, 28, 60, .3);
    overflow: hidden
}

.modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #f8fbff, #fff)
}

.modal-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--navy)
}

.modal-head .m-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px
}

.modal-close {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: var(--radius-sm);
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 16px;
    color: var(--muted);
    flex: none;
    line-height: 1
}

.modal-close:hover {
    background: var(--blue-soft);
    color: var(--navy)
}

.modal-body {
    padding: 16px 20px;
    max-height: 52vh;
    overflow-y: auto
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    background: #fbfdff;
    flex-wrap: wrap
}

@media(max-width:720px) {
    .modal-overlay {
        padding: 2vh 8px
    }

    .modal-body {
        max-height: 65vh
    }
}

/* Grid bed dalam modal */
.bed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 9px
}

.bed-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color .12s ease, box-shadow .12s ease
}

.bed-card:hover {
    border-color: var(--blue);
    box-shadow: 0 4px 14px rgba(19, 44, 78, .08)
}

.bed-card .bed-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--text)
}

.bed-card .bed-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap
}

.bed-detail {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 10.5px;
    color: var(--muted);
    padding-top: 2px
}

.bed-detail .d-item {
    display: flex;
    justify-content: space-between;
    gap: 8px
}

.bed-detail .d-item .d-k {
    color: #8a9ab2;
    font-weight: 700;
    letter-spacing: .2px
}

.bed-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--green-soft);
    color: #0c7c4d;
    border-radius: 99px;
    padding: 3px 9px;
    font-size: 9.5px;
    font-weight: 800;
    margin-top: 2px
}

.bed-status .lamp {
    background: var(--green)
}

.bed-status.off {
    background: #f1f4f9;
    color: #6e7f95
}

.bed-status.off .lamp {
    background: #b6c2d1
}

/* Varian badge kelas */
.badge.b-k1 {
    background: #e6f0ff;
    color: #1e5ec9
}

.badge.b-k2 {
    background: #eef5ea;
    color: #3d7a2f
}

.badge.b-k3 {
    background: #f1f4f9;
    color: #51617c
}

.badge.b-vip {
    background: #fdeef3;
    color: #b2336b
}

.badge.b-utama {
    background: #eaeefe;
    color: #5b5bd6
}

.badge.b-peri {
    background: #fdf3e3;
    color: #b06a0e
}

.badge.b-icu {
    background: #fdecee;
    color: #b82738
}

.badge.soft {
    background: #eef3fb;
    color: #51617c
}

/* Miringkan hint dokumentasi agar tampak non-operasional */
.doc-hint {
    font-size: 10.5px;
    color: #93a3b8;
    line-height: 1.6;
    border-top: 1px dashed var(--line);
    padding-top: 10px;
    margin-bottom: 10px
}

/* =====================================================================
   SINGLE-PAGE BI DASHBOARD (refactor)
   ===================================================================== */
html {
    scroll-behavior: smooth
}

.app-shell {
    min-height: 100vh
}

/* Sidebar sticky di dalam scroll halaman (bukan fixed) agar tetap sejajar */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin
}

.sidebar::-webkit-scrollbar {
    width: 6px
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .2);
    border-radius: 99px
}

/* Tombol profil pada sidebar */
.nav-profile-btn {
    width: 100%;
    border: 0;
    background: transparent;
    color: #e8f0ff;
    padding: 12px;
    border-radius: 9px;
    text-align: left;
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
    cursor: pointer;
    font-family: inherit
}

.nav-profile-btn:hover {
    background: rgba(255, 255, 255, .14)
}

.avatar.mini {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #2f62e9;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 11px;
    flex: none
}

/* Ciptakan offset antar section agar nyaman di-scroll */
.section {
    scroll-margin-top: 16px;
    margin-bottom: 28px
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap
}

.section-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--navy);
    margin: 0
}

.section-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px
}

.section-rule {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 6px 0 18px
}

/* KPI cards jadi klik (interactive) */
.kpi.clickable {
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease
}

.kpi.clickable:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(19, 44, 78, .16)
}

.kpi.clickable .kpi-body {
    position: relative
}

.kpi.clickable .kpi-body::after {
    content: "▸";
    position: absolute;
    right: 10px;
    top: 10px;
    color: var(--muted);
    font-size: 12px;
    opacity: .5
}

/* Link tombol pada hover kartu KPI */
.kpi-action-hint {
    display: none;
    margin-top: 10px;
    font-size: 10px;
    color: var(--muted);
    font-weight: 700
}

.kpi.clickable:hover .kpi-action-hint {
    display: block
}

/* Chip profil di topbar */
.pc-name {
    font-weight: 700
}

.pc-role {
    font-size: 9.5px;
    color: #1E40AF;
    background: #E0E7FF;
    border-radius: 99px;
    padding: 2px 8px;
    font-weight: 600
}

/* Profile modal */
.profile-modal {
    width: min(680px, 100%)
}

.profile-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line)
}

.avatar.lg {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 20px;
    font-weight: 800
}

.ps-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--text)
}

.ps-role {
    font-size: 11px;
    color: var(--muted);
    font-weight: 700
}

/* Analisis per ruang - row klik */
.room-analytics-row {
    cursor: pointer;
    transition: background .12s ease
}

.room-analytics-row:hover {
    background: var(--blue-soft) !important
}

.room-analytics-row.clicked {
    background: #e7efff !important
}

/* Mini sparkline / ring untuk detail ruang */
.ring-holder {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px
}

.ring-cell {
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 6px;
    background: #fbfdff
}

.ring-cell .rc-val {
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums
}

.ring-cell .rc-lbl {
    font-size: 9.5px;
    color: var(--muted);
    font-weight: 700;
    margin-top: 3px
}

.ring-cell .rc-status {
    margin-top: 5px
}

/* Drawer (panel sisi kanan) untuk detail ruang */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(9, 28, 60, .45);
    z-index: 70;
    display: flex;
    justify-content: flex-end
}

.drawer {
    background: #fff;
    width: min(520px, 100%);
    height: 100vh;
    overflow-y: auto;
    box-shadow: -16px 0 50px rgba(9, 28, 60, .25);
    padding: 20px
}

.drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px
}

.drawer-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--navy)
}

.drawer-kode {
    font-size: 11px;
    color: var(--muted);
    font-weight: 700
}

.drawer-section {
    margin-top: 16px
}

.drawer-section h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin: 0 0 6px
}

.drawer-interpret {
    font-size: 12px;
    line-height: 1.65;
    color: var(--text)
}

/* Expandable panel (accordion) */
.expand {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 8px;
    background: #fff
}

.expand-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    background: #fbfdff;
    user-select: none;
    font-weight: 700;
    font-size: 12px;
    color: var(--text)
}

.expand-head:hover {
    background: var(--blue-soft)
}

.expand-head .chev {
    transition: transform .18s ease;
    font-size: 11px;
    color: var(--muted)
}

.expand.open .chev {
    transform: rotate(90deg)
}

.expand-body {
    display: none;
    padding: 12px 14px;
    border-top: 1px solid var(--line)
}

.expand.open .expand-body {
    display: block
}

/* KPI detail modal */
.kpi-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px
}

.kpd-item {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    background: #fbfdff
}

.kpd-item .kpd-lbl {
    font-size: 9.5px;
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em
}

.kpd-item .kpd-val {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    margin-top: 3px;
    font-variant-numeric: tabular-nums
}

.formula-box {
    background: var(--navy);
    color: #eaf2ff;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 700;
    font-family: "Segoe UI", system-ui, sans-serif;
    margin-top: 4px
}

.interpret-box {
    background: var(--blue-soft);
    border: 1px solid #cfe0ff;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.65;
    color: #274a8f
}

/* Badge status pada analisis per ruang */
.room-status-tile {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 99px;
    padding: 3px 9px;
    font-size: 9.5px;
    font-weight: 800
}

/* Tombol mini actions */
.btn.icon {
    padding: 5px 7px;
    font-size: 11px
}

/* Jajaran tabel pada single page agar bersih */
.table-short .table {
    min-width: 760px
}

/* Sticky filter saat scroll */
.sticky-filter {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(241, 245, 249, .96);
    backdrop-filter: blur(4px);
    padding: 10px 0 12px;
    margin: -8px 0 6px
}

/* Progres scroll tipis di atas layar */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #2f62e9, #18a56b);
    width: 0;
    z-index: 100;
    transition: width .1s linear
}

/* Section badge (nomor urut) */
.sec-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: var(--navy);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    margin-right: 8px
}

/* Responsive tambahan untuk single page */
@media(max-width:720px) {
    .section-head {
        flex-direction: column
    }

    .kpi-detail-grid {
        grid-template-columns: 1fr
    }

    .ring-holder {
        grid-template-columns: repeat(2, 1fr)
    }

    .pc-role,
    .pc-name {
        display: none
    }
}

/* =====================================================================
   VIEWER PUBLIK (BI monitoring rawat inap, tanpa autentikasi)
   Memakai warna identitas yang sama namun tanpa sidebar.
   ===================================================================== */
/* Footer publik (copyright) menempel di paling bawah halaman dan rata tengah.
   Flex column + min-height 100vh membuat konten dorong footer ke bawah
   ketika halaman lebih pendek dari satu viewport. */
.viewer-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh
}

.viewer-shell > .viewer-main {
    flex: 1 0 auto
}

.viewer-footer {
    flex: 0 0 auto;
    margin-top: auto;
    padding: 22px 40px 18px;
    border-top: 1px solid var(--line);
    background: var(--white);
    text-align: center;
    color: var(--muted);
    font-size: 10.5px;
    line-height: 1.7
}

.viewer-footer strong {
    color: var(--text);
    font-weight: 700
}

/* ---------- Baris kolaborasi (teks kecil, interaktif, halus) ---------- */
.collab-line {
    margin-top: 7px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1.6;
    text-align: center;
    color: var(--muted)
}

.collab-line.terakhir {
    margin-top: 16px;
    padding-bottom: 4px
}

.collab-line .collab-text {
    display: inline-block;
    color: var(--muted);
    background-image: linear-gradient(100deg, var(--navy) 0%, var(--blue) 26%, var(--muted) 50%, var(--blue) 74%, var(--navy) 100%);
    background-size: 260% 100%;
    background-position: 100% 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: collabSheen 9s linear infinite;
    transition: filter 180ms cubic-bezier(.23, 1, .32, 1)
}

@keyframes collabSheen {
    from {
        background-position: 100% 0
    }

    to {
        background-position: -160% 0
    }
}

/* Cahaya lembut hanya pada perangkat yang benar-benar punya kursor. */
@media (hover: hover) and (pointer: fine) {
    .collab-line:hover .collab-text {
        filter: drop-shadow(0 0 7px rgba(47, 98, 233, .45))
    }
}

@media (prefers-reduced-motion: reduce) {
    .collab-line .collab-text {
        animation: none;
        background-position: 45% 0
    }
}

/* Mode kontras tinggi: gradasi dibuang, teks ikut warna sistem. */
@media (forced-colors: active) {
    .collab-line .collab-text {
        background-image: none;
        -webkit-text-fill-color: currentColor;
        color: inherit
    }
}

.viewer-header {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 22px;
    height: 62px;
    background: linear-gradient(90deg, var(--navy), var(--navy2));
    color: #fff;
    box-shadow: 0 2px 14px rgba(8, 43, 115, .18)
}

.viewer-header .vh-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 210px
}

.viewer-header .vh-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 9px;
    background: #fff;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, .15);
    flex: none
}

.viewer-header .vh-brand h1 {
    margin: 0;
    font-size: 15px;
    line-height: 1.15
}

.viewer-header .vh-brand h1 span {
    display: block;
    font-size: 11px;
    font-weight: 600;
    opacity: .85
}

.viewer-header .vh-brand small {
    display: block;
    font-size: 9px;
    opacity: .7;
    margin-top: 2px
}

.viewer-header .vh-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.viewer-header .vh-nav::-webkit-scrollbar {
    display: none
}

.viewer-header .vh-nav a {
    color: rgba(255, 255, 255, .82);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 8px;
    white-space: nowrap;
    transition: background .15s
}

.viewer-header .vh-nav a:hover,
.viewer-header .vh-nav a.active {
    background: rgba(255, 255, 255, .14);
    color: #fff
}

.viewer-header .vh-actions {
    display: flex;
    gap: 8px
}

.viewer-header .vh-actions .btn {
    color: #fff;
    border-color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .08)
}

.viewer-main {
    padding: 18px 40px 40px
}

/* Full-width (edge-to-edge): konten memakai seluruh lebar layar,
   hanya menyisakan padding horizontal agar kartu tidak menabrak tepi. */
.viewer-main > .section {
    width: 100%;
    max-width: none
}

/* Viewer tidak memakai sidebar admin (.main default margin-left:242px),
   jadi margin tersebut dinolkan agar layout memakai seluruh lebar layar.
   Konten dibatasi max-width dan diratakan tengah agar tidak terlalu melebar. */
.viewer-main {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto
}

/* Layout compact & proporsional khusus dashboard publik:
   KPI umum hanya 4 (BOR · AvLOS · TOI · BTO) = satu baris mengisi lebar
   penuh tanpa di-tengah. */
.viewer-main .kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px
}

.viewer-main .filter-bar {
    margin-bottom: 20px;
    padding-bottom: 14px
}

.viewer-main .filter-bar .select {
    padding: 6px 10px;
    font-size: 11.5px
}

.viewer-main .filter-bar label {
    margin-bottom: 3px
}

.viewer-main .section {
    margin-bottom: 22px
}

.viewer-main .section-head {
    margin-bottom: 10px
}

/* Alert "kritis/overload": tetap full-width, padding lebih efisien */
.viewer-main .exec-strip {
    padding: 12px 16px;
    margin-bottom: 12px
}

.viewer-main .exec-strip .es-badge {
    font-size: 18px
}

/* Card KPI: tinggi konsisten, padding proporsional, tanpa ruang berlebih */
.viewer-main .kpi-body {
    padding: 10px 12px
}

.viewer-main .kpi h3 {
    margin: 6px 0 1px;
    font-size: 20px
}

.viewer-main .kpi-icon {
    width: 28px;
    height: 28px
}

.viewer-main .kpi-icon svg {
    width: 15px;
    height: 15px
}

.viewer-main .status-line {
    margin-top: 6px;
    padding: 3px 9px
}

@media (max-width: 1020px) {
    .viewer-main .kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width: 720px) {
    .viewer-main {
        margin: 0 auto;
        width: 100%;
        max-width: none
    }

    .viewer-main .kpis {
        grid-template-columns: minmax(0, 1fr)
    }
}

.exec-strip {
    border-radius: 14px;
    padding: 14px 16px;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px
}

.exec-strip .es-badge {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: .4px
}

.exec-strip .es-note {
    font-size: 11.5px;
    opacity: .95;
    line-height: 1.5;
    max-width: 640px
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px
}

.stat {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff
}

.stat .st-lbl {
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 800;
    letter-spacing: .3px
}

.stat .st-val {
    font-size: 20px;
    font-weight: 900;
    color: #22304a;
    margin-top: 2px
}

.stat .st-sub {
    font-size: 10px;
    color: var(--muted)
}

.issue {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 8px;
    background: #fff;
    align-items: flex-start
}

.issue .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-top: 4px;
    flex: 0 0 auto
}

.empty-state {
    padding: 26px;
    text-align: center;
    color: var(--muted);
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: #fbfcfe
}

.empty-state b {
    display: block;
    color: #22304a;
    margin-bottom: 4px
}

.delta {
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px
}

.delta.up {
    background: var(--green-soft);
    color: #0c7c4d
}

.delta.down {
    background: var(--red-soft);
    color: #b82738
}

.insight-block .ib-title {
    font-weight: 800;
    font-size: 12.5px;
    color: #22304a;
    margin-bottom: 4px
}

.insight-block .ib-body {
    font-size: 12px;
    line-height: 1.6;
    color: #40516b
}

.insight-tone-line {
    display: inline-block;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .4px;
    padding: 3px 8px;
    border-radius: 20px;
    margin-bottom: 8px
}

.quality-chip {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: .3px
}

.kpi-target {
    display: block;
    font-size: 10.5px;
    color: var(--muted);
    margin-top: 2px
}

@media (max-width: 900px) {
    .viewer-header {
        flex-wrap: wrap;
        height: auto;
        padding: 10px 16px;
        gap: 10px
    }

    .viewer-header .vh-brand {
        min-width: 0
    }

    .viewer-header .vh-nav {
        order: 3;
        width: 100%;
        padding-bottom: 2px
    }

    .viewer-main {
        padding: 14px 12px 30px
    }
}


.card-hoverable:hover{
  box-shadow:0 6px 18px -6px rgba(15,23,42,.12);
  border-color:#bfdbfe;
  transform:translateY(-1px);
}