/* ISPbills behavior layered over the licensed Metronic Demo 1 runtime.
   Visual primitives deliberately inherit Metronic v9.5's native tokens. */
.demo1 {
    /* Accessible semantic aliases shared by native and migrated screens. */
    --primary: var(--color-blue-600);
    --primary-light: var(--color-blue-50);
    --primary-active: var(--color-blue-700);
    --primary-clarity: color-mix(in srgb, var(--primary) 22%, transparent);
    --success: var(--color-green-700);
    --success-light: var(--color-green-50);
    --warning: var(--color-yellow-800);
    --warning-light: var(--color-yellow-50);
    --danger: var(--destructive);
    --danger-light: var(--color-red-50);
    --info: var(--color-violet-700);
    --info-light: var(--color-violet-50);
    --secondary-light: var(--color-zinc-50);
    --gray-100: var(--color-gray-100);
    --coal-900: var(--color-gray-900);
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.demo1-skip-link {
    position:fixed;
    z-index:10000;
    inset-block-start:.5rem;
    inset-inline-start:.5rem;
    transform:translateY(calc(-100% - 1rem));
    padding:.625rem .875rem;
    border-radius:calc(var(--radius) - 2px);
    background:var(--mono);
    color:var(--mono-foreground);
    font-size:.875rem;
    font-weight:600;
    transition:transform .15s ease;
}
.demo1-skip-link:focus,
.demo1-skip-link:focus-visible {
    transform:translateY(0);
    outline:3px solid var(--ring);
    outline-offset:2px;
}

.demo1 .kt-wrapper { background:var(--background); }
.demo1 .kt-content { padding-block:1.25rem 2rem; background:var(--background); }
/* Bootstrap's unlayered semantic element defaults can otherwise override
   Metronic's layered grid utility on section/article elements. */
.demo1 .grid { display:grid; min-width:0; }
.demo1 .grid > * { min-width:0; }
.demo1 #kt_content_container > .flex.pb-7\.5 { padding-bottom:1.25rem; }
.demo1 #kt_content_container > .flex.pb-7\.5 h1 {
    color:var(--mono);
    font-size:1.25rem !important;
    font-weight:500;
    line-height:1 !important;
    letter-spacing:normal;
}
.demo1 #kt_content_container > .flex.pb-7\.5 p { color:var(--secondary-foreground); font-size:.875rem; }

/* Keep supporting copy compact without removing context from assistive or
   sighted users. */
.demo1 .demo1-content-title :is(h1,h2,h3,h4) + p,
.demo1 .kt-card-header :is(h1,h2,h3,h4) + p,
.demo1 .kt-content section > :is(.mb-3,.mb-4,.mb-5,.mb-6) :is(h1,h2,h3,h4) + p {
    margin-block-start:.25rem;
    color:var(--secondary-foreground);
    font-size:.8125rem;
    line-height:1.375rem;
}

.demo1 .kt-header {
    border-bottom:1px solid var(--border);
    background:var(--background);
}

.demo1 .kt-card {
    border-color:var(--border);
    border-radius:calc(var(--radius) + 4px);
    box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.demo1 .kt-card-header { min-height:3.5rem; padding-inline:1.25rem; }
.demo1 .kt-card-title { color:var(--mono); font-size:1rem !important; font-weight:600; letter-spacing:normal; }
.demo1 .kt-card-content { padding:1.25rem; }
.demo1 .kt-card-footer { padding:1rem 1.25rem; }

/* Bootstrap's unlayered heading defaults also override Tailwind typography
   utilities. Preserve the size declared by native compact subheadings and
   the 600 weight requested by Demo 1 card titles. */
body.demo1 h3.text-sm {
    font-size:var(--text-sm) !important;
    line-height:var(--text-sm--line-height) !important;
}
body.demo1 h3.font-semibold { font-weight:var(--font-weight-semibold) !important; }
body.demo1 .kt-card-content :is(h2,h3,h4).font-semibold:not(.text-xs):not(.text-sm):not(.text-base):not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl) {
    font-size:var(--text-base) !important;
    line-height:1.5rem !important;
}
body.demo1 .kt-card-content legend:not(.text-xs):not(.text-sm):not(.text-base):not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl) {
    float:none;
    width:auto;
    max-width:100%;
    margin:0;
    font-size:var(--text-sm) !important;
    line-height:1.25rem !important;
}

/* Bootstrap 4 ships an unlayered `.p-5` declaration with `!important`, which
   otherwise turns native Demo 1 card/form padding into 48px. Keep the
   correction limited to native panel surfaces; legacy Bootstrap spacing
   remains untouched. */
body.demo1 :is(.kt-card,.kt-card-content).p-5,
body.demo1 form.p-5 {
    padding:1.25rem !important;
}

.demo1 .kt-form-label { color:var(--foreground); font-size:.875rem; font-weight:500; letter-spacing:normal; }
.demo1 :is(.kt-input,.kt-select,.kt-textarea) {
    border-color:var(--input);
    border-radius:calc(var(--radius) - 2px);
    background:var(--background);
    color:var(--foreground);
    font-size:.8125rem;
    box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.demo1 .kt-btn { font-size:.8125rem; font-weight:500; letter-spacing:normal; }
.demo1 :is(.kt-input,.kt-select,.kt-textarea)[aria-invalid="true"] {
    border-color:var(--danger) !important;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent);
}

/* Navigation and button-like links use component affordances. Links inside
   prose retain a non-colour cue for reliable recognition. */
.demo1 :is(.kt-menu-link,.kt-btn,.dropdown-item,.demo1-filter-toggle) {
    text-decoration:none !important;
}
.demo1 .kt-content :is(p,li,dd,.form-text,.help-block) > a:not(.kt-btn) {
    color:var(--primary);
    text-decoration:underline;
    text-decoration-thickness:.08em;
    text-underline-offset:.16em;
}
/* Component and navigation links must not inherit Bootstrap's anchor
   underline. Authors can opt a link inside a control region back into prose
   styling with `.demo1-content-link`. */
.demo1 :is(button,summary,[role="button"]),
.demo1 a:is(.btn,.nav-link,.page-link,.kt-tabs-link,.badge,.kt-badge,[onclick],[data-toggle],[data-bs-toggle],[data-kt-menu-trigger],[data-kt-modal-toggle]),
.demo1 :is(nav,[role="navigation"],[role="menu"],[role="tablist"],.demo1-topbar,.kt-card,.kt-card-header,.kt-card-content,.kt-card-body,.kt-card-footer,.kt-card-toolbar,.card,.card-header,.card-body,.card-footer,.card-tools,.dropdown-menu,.pagination,.breadcrumb,.input-group,.btn-group,.list-group,.kt-table,.table) a:not(.demo1-content-link) {
    text-decoration:none !important;
}
.demo1 .kt-content a.demo1-content-link {
    color:var(--primary);
    text-decoration:underline !important;
    text-decoration-thickness:.08em !important;
    text-underline-offset:.16em;
}

/* The Demo 1 shell still loads Bootstrap for legacy widgets, whose
   `a:hover { text-decoration: underline }` re-underlines content links that
   are not inside the component containers enumerated above (e.g. table-cell
   record links, hero/detail links wrapped in plain divs). In the Demo 1
   design, content links are colour-cued, not underlined, except deliberate
   prose links and `.demo1-content-link`. Neutralise Bootstrap's anchor
   underline for every remaining kt-content link, in all states, while
   keeping the intentional prose / opt-in underline rules above authoritative
   (those use `!important` and win by cascade order). */
.demo1 .kt-content a:not(.demo1-content-link):not([class*="kt-link"]),
.demo1 .kt-content a:not(.demo1-content-link):not([class*="kt-link"]):hover,
.demo1 .kt-content a:not(.demo1-content-link):not([class*="kt-link"]):focus {
    text-decoration:none;
}
/* Re-assert the prose underline so it survives the broad reset above,
   regardless of source order. */
.demo1 .kt-content :is(p,li,dd,.form-text,.help-block) > a:not(.kt-btn):not(.demo1-content-link) {
    text-decoration:underline;
}

/* Semantic utilities used by migrated Blade views but absent from the pinned
   vendor build. Keep these aliases here until Demo 1 has an application build. */
.demo1 .text-success { color:var(--success) !important; }
.demo1 .text-warning { color:var(--warning) !important; }
.demo1 .text-danger { color:var(--danger) !important; }
.demo1 .text-info { color:var(--info) !important; }
.demo1 .bg-primary-light { background-color:var(--primary-light) !important; }
.demo1 .bg-success-light { background-color:var(--success-light) !important; }
.demo1 .bg-warning-light { background-color:var(--warning-light) !important; }
.demo1 .bg-danger-light { background-color:var(--danger-light) !important; }
.demo1 .bg-info-light { background-color:var(--info-light) !important; }
.demo1 .bg-success { background-color:var(--success) !important; }
.demo1 .bg-warning { background-color:var(--warning) !important; }
.demo1 .bg-danger { background-color:var(--danger) !important; }
.demo1 .bg-info { background-color:var(--info) !important; }
.demo1 .border-success { border-color:var(--success) !important; }
.demo1 .border-warning { border-color:var(--warning) !important; }
.demo1 .border-danger { border-color:var(--danger) !important; }
.demo1 .border-info { border-color:var(--info) !important; }
.demo1 .border-primary\/20 { border-color:color-mix(in srgb, var(--primary) 20%, transparent) !important; }
.demo1 .border-primary\/30 { border-color:color-mix(in srgb, var(--primary) 30%, transparent) !important; }
.demo1 .border-success\/20 { border-color:color-mix(in srgb, var(--success) 20%, transparent) !important; }
.demo1 .border-success\/25 { border-color:color-mix(in srgb, var(--success) 25%, transparent) !important; }
.demo1 .border-success\/30 { border-color:color-mix(in srgb, var(--success) 30%, transparent) !important; }
.demo1 .border-warning\/20 { border-color:color-mix(in srgb, var(--warning) 20%, transparent) !important; }
.demo1 .border-warning\/25 { border-color:color-mix(in srgb, var(--warning) 25%, transparent) !important; }
.demo1 .border-warning\/30 { border-color:color-mix(in srgb, var(--warning) 30%, transparent) !important; }
.demo1 .border-warning\/40 { border-color:color-mix(in srgb, var(--warning) 40%, transparent) !important; }
.demo1 .border-danger\/20 { border-color:color-mix(in srgb, var(--danger) 20%, transparent) !important; }
.demo1 .border-danger\/30 { border-color:color-mix(in srgb, var(--danger) 30%, transparent) !important; }
.demo1 .border-info\/20 { border-color:color-mix(in srgb, var(--info) 20%, transparent) !important; }

/* High-frequency layout utilities missing from the pinned Metronic snapshot. */
.demo1 .max-w-xs { max-width:20rem; }
.demo1 .max-w-sm { max-width:24rem; }
.demo1 .max-w-md { max-width:28rem; }
.demo1 .max-w-lg { max-width:32rem; }
.demo1 .max-w-xl { max-width:36rem; }
.demo1 .max-w-3xl { max-width:48rem; }
.demo1 .max-w-4xl { max-width:56rem; }
.demo1 .max-w-5xl { max-width:64rem; }
.demo1 .max-w-6xl { max-width:72rem; }
.demo1 .max-w-\[85\%\] { max-width:85%; }
.demo1 .max-w-\[900px\] { max-width:900px; }
.demo1 .w-\[calc\(100\%-2rem\)\] { width:calc(100% - 2rem); }
.demo1 .top-\[3\%\] { top:3%; }
.demo1 .top-\[5\%\] { top:5%; }
.demo1 .top-\[10\%\] { top:10%; }
.demo1 .max-h-\[70vh\] { max-height:70vh; }
.demo1 .max-h-\[75vh\] { max-height:75vh; }
.demo1 .max-h-\[80vh\] { max-height:80vh; }
.demo1 .max-h-\[90vh\] { max-height:90vh; }
.demo1 .max-h-\[94vh\] { max-height:94vh; }
.demo1 .min-h-4 { min-height:1rem; }
.demo1 .min-h-11 { min-height:2.75rem; }
.demo1 .min-h-14 { min-height:3.5rem; }
.demo1 .min-h-24 { min-height:6rem; }
.demo1 .min-h-28 { min-height:7rem; }
.demo1 .min-h-32 { min-height:8rem; }
.demo1 .min-h-36 { min-height:9rem; }
.demo1 .min-h-40 { min-height:10rem; }
.demo1 .min-h-64 { min-height:16rem; }
.demo1 .min-h-72 { min-height:18rem; }
.demo1 .rounded-e-none { border-start-end-radius:0 !important; border-end-end-radius:0 !important; }
.demo1 .font-mono { font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* The pinned utility build only contains a small subset of the responsive
   classes used by group-admin views. Keep this contract together so a class
   never changes behavior simply because the vendor snapshot omitted it. */
@media (min-width:640px) {
    .demo1 .sm\:hidden { display:none !important; }
    .demo1 .sm\:block { display:block !important; }
    .demo1 .sm\:inline { display:inline !important; }
    .demo1 .sm\:inline-flex { display:inline-flex !important; }
    .demo1 .sm\:flex { display:flex !important; }
    .demo1 .sm\:grid { display:grid !important; }
    .demo1 .sm\:flex-row { flex-direction:row; }
    .demo1 .sm\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .demo1 .sm\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .demo1 .sm\:grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .demo1 .sm\:grid-cols-\[12rem_1fr\] { grid-template-columns:12rem 1fr; }
    .demo1 .sm\:grid-cols-\[minmax\(0\,14rem\)_minmax\(0\,1fr\)_auto\] { grid-template-columns:minmax(0,14rem) minmax(0,1fr) auto; }
    .demo1 .sm\:grid-cols-\[minmax\(0\,1fr\)_auto\] { grid-template-columns:minmax(0,1fr) auto; }
    .demo1 .sm\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)_auto\] { grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; }
    .demo1 .sm\:grid-cols-\[minmax\(12rem\,18rem\)_auto\] { grid-template-columns:minmax(12rem,18rem) auto; }
    .demo1 .sm\:grid-cols-\[minmax\(12rem\,1fr\)_minmax\(12rem\,1fr\)_auto\] { grid-template-columns:minmax(12rem,1fr) minmax(12rem,1fr) auto; }
    .demo1 .sm\:col-span-2 { grid-column:span 2 / span 2; }
    .demo1 .sm\:items-center { align-items:center; }
    .demo1 .sm\:items-end { align-items:flex-end; }
    .demo1 .sm\:self-end { align-self:flex-end; }
    .demo1 .sm\:w-auto { width:auto; }
    .demo1 .sm\:p-5 { padding:1.25rem !important; }
    .demo1 .sm\:text-sm { font-size:.875rem; line-height:1.25rem; }
}

/* Solid vendor badges use mid-tone backgrounds with white 11–12px text. Soft
   semantic badges preserve meaning and meet contrast requirements. */
.demo1 .kt-badge-success:not(.kt-badge-outline) { background:var(--success-light); color:var(--success); }
.demo1 .kt-badge-warning:not(.kt-badge-outline) { background:var(--warning-light); color:var(--warning); }
.demo1 .kt-badge-info:not(.kt-badge-outline) { background:var(--info-light); color:var(--info); }
.demo1 .kt-badge-danger:not(.kt-badge-outline) { background:var(--danger-light); color:var(--danger); }

/* Group-admin filter panels are progressively enhanced by
   ispbills-demo1-filters.js. The selectors are intentionally opt-in so
   other roles and explicit non-filter collapses retain their behavior. */
.demo1 .demo1-filter-toggle-host { gap:.75rem; }
.demo1 .demo1-filter-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    min-width:8.5rem;
    text-decoration:none !important;
}
.demo1 .demo1-filter-toggle-label { display:inline-flex; align-items:center; gap:.5rem; min-width:0; }
.demo1 .demo1-filter-active { flex:0 0 auto; white-space:nowrap; }
.demo1 .demo1-filter-chevron { transition:transform .18s ease; }
.demo1 .demo1-filter-toggle[aria-expanded="true"] .demo1-filter-chevron { transform:rotate(180deg); }
.demo1 .demo1-filter-panel[hidden] { display:none !important; }

/*
 * FIX (Batch B / FIX 1): Restore visibility for expanded Bootstrap collapse panels.
 * Metronic core (public/metronic/css/styles.css @layer utilities) defines an
 * unscoped `.collapse { visibility: collapse; }`. Bootstrap's `.collapse.show`
 * restores `display:block` but NOT `visibility`, so server-rendered expanded
 * filter panels (`class="collapse ... show"`) and the demo1 filter enhancer's
 * open state can render invisible. These selectors are bootstrap/enhancer-specific
 * (low collision risk), so we defensively force visibility back on.
 */
.collapse.show,
.collapsing,
.demo1-filter-panel-open { visibility: visible !important; }
.demo1 .demo1-filter-standalone-toggle {
    display:flex;
    justify-content:flex-end;
    margin-bottom:.75rem;
}
.demo1 .demo1-filter-details > summary { user-select:none; }
.demo1 .demo1-filter-details > summary::-webkit-details-marker { display:none; }
.demo1 .demo1-filter-details .demo1-filter-active { margin-inline-start:.5rem; }

.demo1 .kt-table { color:var(--foreground); font-size:.875rem; }

.demo1 .demo1-sidebar-dark {
    background:#111827;
    border-color:#263244;
    box-shadow:10px 0 30px rgba(15,23,42,.08);
}
.demo1 .demo1-sidebar-dark #sidebar_menu .kt-menu-heading {
    color:#94a3b8 !important;
    font-size:.6875rem;
    font-weight:700;
    letter-spacing:.085em;
}
.demo1 .demo1-sidebar-dark #sidebar_menu > .kt-menu-item > .kt-menu-link,
.demo1 .demo1-sidebar-dark #sidebar_menu .kt-menu-accordion .kt-menu-link {
    min-height:2.35rem;
    border-radius:.55rem;
    color:#cbd5e1;
}
.demo1 .demo1-sidebar-dark #sidebar_menu .kt-menu-link:hover { background:rgba(59,130,246,.11); }
.demo1 .demo1-sidebar-dark #sidebar_menu .kt-menu-link.kt-menu-item-active {
    position:relative;
    background:rgba(59,130,246,.22);
    box-shadow:inset 0 0 0 1px rgba(96,165,250,.34);
}
.demo1 #sidebar_menu .kt-menu-link.kt-menu-item-active::before {
    position:absolute;
    inset-block:.45rem;
    inset-inline-start:0;
    width:3px;
    border-radius:999px;
    background:var(--primary);
    content:"";
}
.demo1 #sidebar_menu .kt-menu-link.kt-menu-item-active .kt-menu-title {
    font-weight:700;
}
.demo1 #sidebar_menu button.kt-menu-link {
    width:100%;
    border:0;
    background-color:transparent;
    font:inherit;
    text-align:start;
}
.demo1 #sidebar_menu button.kt-menu-link:focus-visible {
    outline:2px solid #93c5fd;
    outline-offset:2px;
}

[data-sidebar-theme="light"] body.demo1 .demo1-sidebar-dark #sidebar_menu button.kt-menu-link:focus-visible {
    outline-color:#175cd3;
}

.dark body.demo1 #header .text-muted-foreground,
.dark body.demo1 #header .kt-input::placeholder,
.dark body.demo1 .demo1-footer-container .text-muted-foreground {
    color:#a1a1aa !important;
}

.demo1 .demo1-footer-container a:focus-visible {
    border-radius:.25rem;
    outline:2px solid var(--ring);
    outline-offset:3px;
}

/* Keep the remaining role-safe compatibility surfaces visually coherent. */
.demo1 .ga-settings-context :is(.card,.sgw-card,.side-card),
.demo1 .ga-finance-page .card,
.demo1 .ga-network-page .card {
    border-color:var(--border) !important;
    border-radius:calc(var(--radius) + 4px) !important;
    box-shadow:0 1px 2px rgba(0,0,0,.05) !important;
}
.demo1 :is(.ga-settings-context,.ga-finance-page,.ga-network-page) :is(.form-control,.custom-select) {
    min-height:2.125rem;
    border-color:var(--input) !important;
    border-radius:calc(var(--radius) - 2px) !important;
    font-size:.8125rem;
}
.demo1 :is(.ga-settings-context,.ga-finance-page,.ga-network-page) :is(.btn,.btn-sm) {
    border-radius:calc(var(--radius) - 2px) !important;
    font-size:.8125rem;
    font-weight:500 !important;
}

@media (max-width:767.98px) {
    .demo1 .kt-content { padding-block:1rem 1.5rem; }
    .demo1 .kt-container-fixed { padding-inline:1rem; }
    .demo1 #kt_content_container > .flex.pb-7\.5 { gap:.75rem; padding-bottom:1rem; }
    .demo1 .kt-card-content { padding:1rem; }
    .demo1 .demo1-footer-container { align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce) {
    .demo1-skip-link,
    .demo1 .demo1-filter-chevron { transition:none; }
}

/* =====================================================================
   Legacy AdminLTE dashboard support inside the Demo 1 shell.
   The shared admins/components/dashboard(+widgets) views use the Bootstrap
   grid and AdminLTE info-box / section-header / progress markup, none of
   which the KTUI stylesheet provides. These rules give that markup a
   native Metronic look. Everything is scoped to `.demo1 .kt-content` so it
   only ever affects page content, never the shell, and cannot collide with
   KTUI's own kt-* components (which don't use these class names).
   ===================================================================== */

/* --- Bootstrap-compatible 12-column grid --- */
.demo1 .kt-content .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -.75rem;
    margin-left: -.75rem;
}
.demo1 .kt-content [class^="col-"],
.demo1 .kt-content [class*=" col-"],
.demo1 .kt-content .col {
    position: relative;
    width: 100%;
    padding-right: .75rem;
    padding-left: .75rem;
}
.demo1 .kt-content .col { flex: 1 0 0%; }
.demo1 .kt-content .col-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
.demo1 .kt-content .col-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
.demo1 .kt-content .col-3  { flex: 0 0 25%;         max-width: 25%; }
.demo1 .kt-content .col-4  { flex: 0 0 33.333333%;  max-width: 33.333333%; }
.demo1 .kt-content .col-5  { flex: 0 0 41.666667%;  max-width: 41.666667%; }
.demo1 .kt-content .col-6  { flex: 0 0 50%;         max-width: 50%; }
.demo1 .kt-content .col-7  { flex: 0 0 58.333333%;  max-width: 58.333333%; }
.demo1 .kt-content .col-8  { flex: 0 0 66.666667%;  max-width: 66.666667%; }
.demo1 .kt-content .col-9  { flex: 0 0 75%;         max-width: 75%; }
.demo1 .kt-content .col-10 { flex: 0 0 83.333333%;  max-width: 83.333333%; }
.demo1 .kt-content .col-11 { flex: 0 0 91.666667%;  max-width: 91.666667%; }
.demo1 .kt-content .col-12 { flex: 0 0 100%;        max-width: 100%; }
@media (min-width: 576px) {
    .demo1 .kt-content .col-sm-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
    .demo1 .kt-content .col-sm-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .demo1 .kt-content .col-sm-3  { flex: 0 0 25%;         max-width: 25%; }
    .demo1 .kt-content .col-sm-4  { flex: 0 0 33.333333%;  max-width: 33.333333%; }
    .demo1 .kt-content .col-sm-6  { flex: 0 0 50%;         max-width: 50%; }
    .demo1 .kt-content .col-sm-12 { flex: 0 0 100%;        max-width: 100%; }
}
@media (min-width: 768px) {
    .demo1 .kt-content .col-md-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .demo1 .kt-content .col-md-3  { flex: 0 0 25%;         max-width: 25%; }
    .demo1 .kt-content .col-md-4  { flex: 0 0 33.333333%;  max-width: 33.333333%; }
    .demo1 .kt-content .col-md-5  { flex: 0 0 41.666667%;  max-width: 41.666667%; }
    .demo1 .kt-content .col-md-6  { flex: 0 0 50%;         max-width: 50%; }
    .demo1 .kt-content .col-md-8  { flex: 0 0 66.666667%;  max-width: 66.666667%; }
    .demo1 .kt-content .col-md-12 { flex: 0 0 100%;        max-width: 100%; }
}
@media (min-width: 992px) {
    .demo1 .kt-content .col-lg-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .demo1 .kt-content .col-lg-3  { flex: 0 0 25%;         max-width: 25%; }
    .demo1 .kt-content .col-lg-4  { flex: 0 0 33.333333%;  max-width: 33.333333%; }
    .demo1 .kt-content .col-lg-6  { flex: 0 0 50%;         max-width: 50%; }
    .demo1 .kt-content .col-lg-8  { flex: 0 0 66.666667%;  max-width: 66.666667%; }
    .demo1 .kt-content .col-lg-12 { flex: 0 0 100%;        max-width: 100%; }
}

/* --- Small flex/spacing helpers used by the dashboard markup --- */
.demo1 .kt-content .d-flex { display: flex; }
.demo1 .kt-content .align-items-center { align-items: center; }
.demo1 .kt-content .section-header { margin: .25rem 0 1rem; }
.demo1 .kt-content .section-header h4 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--foreground);
}

/* --- AdminLTE info-box widgets as Metronic cards --- */
.demo1 .kt-content .info-box {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-height: 78px;
    padding: .8rem 1rem;
    margin-bottom: 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius, .75rem);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}
.demo1 .kt-content .info-box:hover {
    box-shadow: 0 8px 20px rgba(16, 24, 40, .1);
    transform: translateY(-1px);
}
.demo1 .kt-content .info-box.border-left { border-left-width: 4px; }
.demo1 .kt-content .info-box.border-primary   { border-left-color: var(--primary, #1B84FF); }
.demo1 .kt-content .info-box.border-info      { border-left-color: #7239EA; }
.demo1 .kt-content .info-box.border-success   { border-left-color: #17C653; }
.demo1 .kt-content .info-box.border-warning   { border-left-color: #F6B100; }
.demo1 .kt-content .info-box.border-danger    { border-left-color: #F8285A; }
.demo1 .kt-content .info-box.border-secondary { border-left-color: #6B7280; }
.demo1 .kt-content .info-box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: .65rem;
    color: #fff;
    font-size: 1.15rem;
}
.demo1 .kt-content .info-box-icon.bg-primary   { background-color: var(--primary, #1B84FF); }
.demo1 .kt-content .info-box-icon.bg-info      { background-color: #7239EA; }
.demo1 .kt-content .info-box-icon.bg-success   { background-color: #17C653; }
.demo1 .kt-content .info-box-icon.bg-warning   { background-color: #F6B100; }
.demo1 .kt-content .info-box-icon.bg-danger    { background-color: #F8285A; }
.demo1 .kt-content .info-box-icon.bg-secondary { background-color: #6B7280; }
.demo1 .kt-content .info-box-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.demo1 .kt-content .info-box-text {
    font-size: .8rem;
    font-weight: 500;
    color: var(--muted-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.demo1 .kt-content .info-box-number {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--foreground);
}

/* --- AdminLTE progress bars --- */
.demo1 .kt-content .progress {
    height: .5rem;
    margin: .4rem 0;
    background: var(--muted, #eef1f5);
    border-radius: 1rem;
    overflow: hidden;
}
.demo1 .kt-content .progress-bar {
    height: 100%;
    background: var(--primary, #1B84FF);
}
.demo1 .kt-content .progress-description {
    font-size: .78rem;
    color: var(--muted-foreground);
}

/* --- Bootstrap modal skeleton ---------------------------------------
   The Demo1 shell loads Bootstrap's JS (which opens/closes modals) but NOT
   Bootstrap's CSS, so a plain `.modal` div has no default hidden state and
   renders inline on page load (the stuck "Loading" overlay and the inline
   "Welcome" prompt). Restore Bootstrap's positioning/hidden defaults here;
   the compat shim already styles the inner header/body/footer/content.
   Scoped away from KTUI's own `kt-modal` via :not([class*="kt-"]). --- */
.demo1 .modal:not([class*="kt-"]) {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1055;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}
.demo1 .modal.show:not([class*="kt-"]) { display: block; }
.demo1 .modal:not([class*="kt-"]) .modal-dialog {
    position: relative;
    width: auto;
    max-width: 500px;
    margin-inline: auto;
    pointer-events: none;
}
.demo1 .modal:not([class*="kt-"]) .modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
}
.demo1 .modal:not([class*="kt-"]) .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
}
.demo1 .modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    width: 100vw;
    height: 100vh;
    background: #0f172a;
}
.demo1 .modal-backdrop.fade { opacity: 0; }
.demo1 .modal-backdrop.show { opacity: .48; }

/* --- Runtime responsive layouts ------------------------------------
   Demo1 ships a pinned utility bundle, so newer responsive/arbitrary
   Tailwind class names are not guaranteed to exist in production. Keep
   important workspace layouts on stable semantic classes instead. --- */
.demo1 .demo1-online-filter-grid,
.demo1 .demo1-offline-filter-grid,
.demo1 .demo1-form-action-grid,
.demo1 .demo1-main-sidebar-grid,
.demo1 .demo1-content-aside-grid {
    display: grid;
    min-width: 0;
}
.demo1 .demo1-full-grid-row { min-width: 0; }
.demo1 .demo1-chart-frame { min-height: 260px; }
.demo1 .demo1-chart-frame > canvas {
    display: block;
    width: 100% !important;
    height: 220px !important;
}
.demo1 .demo1-search-input { width: 100%; }

@media (min-width: 640px) {
    .demo1 .demo1-offline-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo1 .demo1-search-input { width: 12rem; }
}
@media (min-width: 768px) {
    .demo1 .demo1-online-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo1 .demo1-full-grid-row { grid-column: 1 / -1; }
    .demo1 .demo1-form-action-grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
        align-items: end;
    }
}
@media (min-width: 992px) {
    .demo1 .demo1-offline-filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .demo1 .demo1-content-aside-grid { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); }
}
@media (min-width: 1280px) {
    .demo1 .demo1-online-filter-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .demo1 .demo1-offline-filter-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .demo1 .demo1-main-sidebar-grid { grid-template-columns: 22rem minmax(0, 1fr); }
}

/* Legacy Bootstrap fragments inherit Demo1 tokens in dark mode. */
.dark body.demo1 .kt-content .dropdown-item:not([class*="kt-"]),
.dark body.demo1 .kt-content .pagination:not([class*="kt-"]) .page-link,
.dark body.demo1 .modal:not([class*="kt-"]) .modal-title,
.dark body.demo1 .modal:not([class*="kt-"]) .modal-body {
    color: var(--foreground);
}
.dark body.demo1 .kt-content .pagination:not([class*="kt-"]) .page-item.disabled .page-link,
.dark body.demo1 .modal:not([class*="kt-"]) .close {
    border-color: var(--border);
    background: var(--muted);
    color: var(--muted-foreground);
}
.dark body.demo1 .modal:not([class*="kt-"]) .modal-content {
    border-color: var(--border);
}
[data-panel="beta-metronic-demo1"] .swal2-container.swal2-top-end,
[data-panel="beta-metronic-demo1"] .swal2-container.swal2-top-right {
    pointer-events: none;
}

@media (max-width: 639px) {
    [data-panel="beta-metronic-demo1"] .swal2-container.swal2-top-end,
    [data-panel="beta-metronic-demo1"] .swal2-container.swal2-top-right {
        top: 0 !important;
        padding: calc(var(--header-height, 70px) + .5rem) .5rem .5rem !important;
    }

    [data-panel="beta-metronic-demo1"] .swal2-popup.swal2-toast {
        width: min(22rem, calc(100vw - 1rem));
        max-width: calc(100vw - 1rem);
    }
}