/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.menu .app-brand.demo {
  height: 64px;
  margin-top: 12px;
}

.app-brand-logo.demo svg {
  width: 22px;
  height: 38px;
}

.app-brand-text.demo {
  font-size: 1.75rem;
  letter-spacing: -0.5px;
  text-transform: lowercase;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
/* Detached navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
  padding-top: 76px !important;
}
/* Default navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}

/* =====================================================
   DYNAMIC COMPONENT THEME OVERRIDES
   ===================================================== */
/* Force Buttons to use Dynamic Primary */
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--level-gradient-end) !important;
    border-color: var(--level-gradient-end) !important;
}
.btn-outline-primary {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* Force Sidebar to use Dynamic Primary */
.light-style .bg-menu-theme .menu-inner > .menu-item.active > .menu-link,
.dark-style .bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
    color: var(--bs-primary) !important;
    background-color: var(--bs-menu-active-bg) !important;
}
.light-style .bg-menu-theme .menu-inner > .menu-item.active:before,
.dark-style .bg-menu-theme .menu-inner > .menu-item.active:before {
    background: var(--bs-primary) !important;
}
.light-style .bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):before,
.dark-style .bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):before {
    background-color: var(--bs-primary) !important;
    border: 3px solid var(--bs-menu-active-bg) !important;
}

/* Force Global Links and Utilities */
a {
    color: var(--bs-primary);
}
a:hover {
    color: var(--bs-primary);
    opacity: 0.8;
}

.app-brand .layout-menu-toggle {
    background-color: var(--bs-primary) !important;
    border: 7px solid var(--bs-body-bg) !important;
}

.bg-primary {
    background-color: var(--bs-primary) !important;
}
.text-primary {
    color: var(--bs-primary) !important;
}

/* Modals & Badges */
.modal-header .bg-primary {
    background-color: var(--bs-primary) !important;
}
.bg-label-primary {
    background-color: rgba(var(--bs-primary-rgb), 0.16) !important;
    color: var(--bs-primary) !important;
}

/* =====================================================
   DARK MODE OVERRIDES (Native Bootstrap 5 Data Theme)
   ===================================================== */
html[data-bs-theme="dark"] body,
html[data-bs-theme="dark"] .layout-wrapper,
html[data-bs-theme="dark"] .layout-container {
    background-color: #232333 !important;
    color: #a3a4cc !important;
}
html[data-bs-theme="dark"] .card {
    background-color: #2b2c40 !important;
    color: #a3a4cc !important;
}
html[data-bs-theme="dark"] .bg-menu-theme {
    background-color: #2b2c40 !important;
    color: #a3a4cc !important;
}
html[data-bs-theme="dark"] .bg-footer-theme {
    background-color: #2b2c40 !important;
}
html[data-bs-theme="dark"] .navbar {
    background-color: rgba(43, 44, 64, 0.95) !important;
}
html[data-bs-theme="dark"] .text-heading,
html[data-bs-theme="dark"] h1,
html[data-bs-theme="dark"] h2,
html[data-bs-theme="dark"] h3,
html[data-bs-theme="dark"] h4,
html[data-bs-theme="dark"] h5,
html[data-bs-theme="dark"] h6 {
    color: #cbcbe2 !important;
}
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select {
    background-color: #2c2a3f !important;
    color: #a3a4cc !important;
    border-color: #444564 !important;
}
html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus {
    border-color: var(--bs-primary) !important;
}
html[data-bs-theme="dark"] .dropdown-menu {
    background-color: #2b2c40 !important;
    border-color: #444564 !important;
}
html[data-bs-theme="dark"] .dropdown-item {
    color: #a3a4cc !important;
}
html[data-bs-theme="dark"] .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
    color: var(--bs-primary) !important;
}
html[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: #a3a4cc;
    --bs-table-border-color: #444564;
}
html[data-bs-theme="dark"] .border-bottom {
    border-bottom-color: #444564 !important;
}
html[data-bs-theme="dark"] .border-top {
    border-top-color: #444564 !important;
}

/* Sidebar Branding Names */
.app-brand .brand-system-name,
.app-brand .brand-parish-name,
.app-brand .app-brand-text {
    color: var(--bs-primary) !important;
}

/* =====================================================
   MODERN BROWSER SCROLLBAR REDESIGN
   ===================================================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(150, 150, 150, 0.4); /* Grayish color */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(150, 150, 150, 0.7);
}

html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(163, 164, 204, 0.3);
}
html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(163, 164, 204, 0.6);
}

/* =====================================================
   SIDEBAR SCROLL FIX
   ===================================================== */
.layout-menu .menu-inner {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
}
/* Hide perfect-scrollbar if native is used */
.ps__rail-y {
    display: none !important;
}

/* =====================================================
   RESPONSIVE TABLES (MOBILE CARD VIEW FOR PWAs)
   ===================================================== */
@media (max-width: 767.98px) {
    .table-responsive table {
        border: 0;
    }
    .table-responsive table thead {
        display: none;
    }
    .table-responsive table tr {
        display: block;
        margin-bottom: 1rem;
        background-color: var(--bs-card-bg, #fff);
        border: 1px solid rgba(0,0,0,0.125);
        border-radius: 0.5rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        padding: 0.5rem;
    }
    .table-responsive table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        padding: 0.75rem 0.5rem;
    }
    .table-responsive table td:last-child {
        border-bottom: 0;
        justify-content: center;
    }
    .table-responsive table td::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        padding-right: 1rem;
        color: var(--bs-heading-color, #32475c);
    }
    .table-responsive table td[data-label="Actions"]::before,
    .table-responsive table td[data-label="Select"]::before {
        display: none;
    }
    .table-responsive table td[data-label="Actions"],
    .table-responsive table td[data-label="Select"] {
        justify-content: center;
    }
    html[data-bs-theme="dark"] .table-responsive table tr {
        background-color: #2b2c40;
        border-color: #444564;
    }
    html[data-bs-theme="dark"] .table-responsive table td {
        border-bottom-color: #444564;
    }
    html[data-bs-theme="dark"] .table-responsive table td::before {
        color: #cbcbe2;
    }
}

/* =====================================================
   PWA / MOBILE APP BUTTON REFINEMENTS
   ===================================================== */
@media (max-width: 768px) {
    .btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
        border-radius: 50rem !important; /* Fully rounded buttons */
    }
    .btn-sm {
        padding: 0.35rem 0.8rem !important;
        font-size: 0.8rem !important;
    }
    .btn-lg {
        padding: 0.65rem 1.25rem !important;
        font-size: 1rem !important;
    }

    /* Make nav-pills look like a mobile segmented control */
    .nav-pills .nav-link {
        padding: 0.5rem 1rem !important;
        border-radius: 50rem !important;
        font-size: 0.875rem !important;
    }
}