/* =============================================================
   Dvelopin Cloud — Custom Styles
   Built on Bootstrap 5.3.8 (no SB Admin)
   ============================================================= */

/* -------------------------------------------------------------
   1. CSS Custom Properties
   ------------------------------------------------------------- */
:root {
    --bs-primary: #086686;
    --bs-primary-rgb: 8, 102, 134;
    --dv-navy: #0c2635;
    --dv-teal: #367c94;
    --dv-dark-accent: #18303e;
    --dv-sidebar-width: 60px;
    --dv-navbar-height: 56px;
    --dv-page-bg: #f2f6fc;
}

/* -------------------------------------------------------------
   2. Global
   ------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--dv-page-bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.925rem;
    font-weight: 400;
    line-height: 1.5;
    color: #3e4756;
    overflow-x: hidden;
}

a { color: var(--bs-primary); }
a:hover { color: #064d66; }

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: #1a2332;
}

/* -------------------------------------------------------------
   3. Top Navbar
   ------------------------------------------------------------- */
.top-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    height: var(--dv-navbar-height);
    background-color: var(--dv-navy);
    display: flex;
    align-items: center;
    padding: 0 1rem;
}

.top-navbar .navbar-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.top-navbar .navbar-brand img {
    height: 26px;
    width: auto;
    filter: brightness(0) invert(1);
}

/* Hamburger — mobile only */
.hamburger-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.25rem;
    padding: 0.25rem 0.5rem;
    margin-right: 0.75rem;
    cursor: pointer;
}

/* Navbar right section (avatar dropdown) */
.navbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
}

/* Avatar toggle button */
.avatar-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 1;
}

/* Avatar circle */
.avatar-circle-small {
    width: 36px;
    height: 36px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--dv-navy);
    line-height: 1;
    flex-shrink: 0;
}

/* Remove dropdown caret */
.top-navbar .dropdown-toggle::after {
    display: none;
}

/* User dropdown */
.top-navbar .dropdown-menu {
    min-width: 220px;
    border: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    padding: 0;
    border-radius: 0.375rem;
    overflow: hidden;
}

/* User dropdown header */
.dropdown-header-user {
    background-color: var(--dv-teal);
    color: #fff;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}

.dropdown-header-user strong {
    display: block;
    font-weight: 600;
}

.dropdown-header-user span {
    font-size: 0.8rem;
    opacity: 0.8;
}

.top-navbar .dropdown-item {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.top-navbar .dropdown-item:hover {
    background-color: #f0f4f8;
}

/* -------------------------------------------------------------
   4. Sidebar (desktop ≥992px only)
   ------------------------------------------------------------- */
.sidebar {
    position: fixed;
    top: var(--dv-navbar-height);
    left: 0;
    bottom: 0;
    width: var(--dv-sidebar-width);
    background-color: var(--dv-teal);
    z-index: 1020;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Nav icons wrapper — enables drill-down sliding */
.sidebar-nav-wrapper {
    flex: 1;
    position: relative;
    overflow: hidden;
}

/* Each nav level (for drill-down animation) */
.sidebar-nav-level {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    transition: transform 0.2s ease;
}

.sidebar-nav-level.active {
    transform: translateX(0);
}

.sidebar-nav-level.slide-out-left {
    transform: translateX(-100%);
}

.sidebar-nav-level.slide-in-right {
    transform: translateX(100%);
}

/* Individual sidebar nav items (links and buttons) */
.sidebar-nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    position: relative;
    transition: color 0.15s, background-color 0.15s;
    font-size: 1.1rem;
}

.sidebar-nav-item:hover {
    color: #fff;
    background-color: rgba(255,255,255,0.1);
}

.sidebar-nav-item.active {
    color: #fff;
    background-color: rgba(255,255,255,0.15);
}

/* Active left bar indicator */
.sidebar-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: #fff;
    border-radius: 0 2px 2px 0;
}

.sidebar-nav-item i {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
}

/* Back arrow in drill-down */
.sidebar-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    color: rgba(255,255,255,0.6);
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.sidebar-back:hover {
    color: #fff;
    background-color: rgba(255,255,255,0.08);
}

/* Divider between sections */
.sidebar-divider {
    height: 1px;
    background: rgba(255,255,255,0.15);
    margin: 0.25rem 0;
}

/* Gear icon pinned to bottom — height matches footer */
.sidebar-bottom {
    flex-shrink: 0;
    border-top: 1px solid rgba(255,255,255,0.15);
}

.sidebar-bottom .sidebar-nav-item {
    height: 44.79px;
}

/* Hide sidebar on mobile */
@media (max-width: 991.98px) {
    .sidebar {
        display: none;
    }
}

/* -------------------------------------------------------------
   5. Content Wrapper
   ------------------------------------------------------------- */
.content-wrapper {
    margin-top: var(--dv-navbar-height);
    min-height: calc(100vh - var(--dv-navbar-height));
    display: flex;
    flex-direction: column;
}

@media (min-width: 992px) {
    .content-wrapper {
        margin-left: var(--dv-sidebar-width);
    }
}

.content-wrapper main {
    flex: 1;
}

/* -------------------------------------------------------------
   6. Page Header Bar
   ------------------------------------------------------------- */
.page-header-bar {
    background-color: #fff;
    border-bottom: 1px solid #e0e5ec;
    padding: 1.1rem 1.5rem;
}

.page-header-bar h1 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    color: var(--dv-navy);
}

/* -------------------------------------------------------------
   7. Footer
   ------------------------------------------------------------- */
.site-footer {
    background-color: var(--dv-navy);
    color: rgba(255,255,255,0.5);
    padding: 0.8rem 1rem;
    font-size: 0.8rem;
    margin-top: auto;
}

@media (max-width: 991.98px) {
    .site-footer {
        padding: 1.25rem 1rem;
    }
}

/* -------------------------------------------------------------
   8. Offcanvas — Mobile Menu
   ------------------------------------------------------------- */
.offcanvas.mobile-nav {
    width: 280px;
    background-color: var(--dv-teal);
    color: #fff;
    border-right: none;
}

.offcanvas.mobile-nav .offcanvas-header {
    border-bottom: 1px solid rgba(255,255,255,0.15);
    padding: 1rem;
}

.offcanvas.mobile-nav .offcanvas-body {
    padding: 0.5rem 0;
}

.mobile-nav-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.625rem 1.25rem;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 0.9rem;
    border: none;
    background: none;
    cursor: pointer;
    transition: background-color 0.15s;
}

.mobile-nav-item:hover,
.mobile-nav-item:focus {
    color: #fff;
    background-color: rgba(255,255,255,0.1);
}

.mobile-nav-item.active {
    color: #fff;
    background-color: rgba(255,255,255,0.2);
}

.mobile-nav-item i,
.mobile-nav-item svg {
    width: 24px;
    text-align: center;
    margin-right: 1rem;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Mobile nav drill-down wrapper */
.mobile-nav-wrapper {
    position: relative;
    overflow: hidden;
    min-height: 100%;
}

.mobile-nav-level {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 100%;
    padding: 0.5rem 0;
    transition: transform 0.2s ease;
}

.mobile-nav-level.active {
    transform: translateX(0);
}

.mobile-nav-level.slide-out-left {
    transform: translateX(-100%);
}

.mobile-nav-level.slide-in-right {
    transform: translateX(100%);
}

/* Mobile back button */
.mobile-nav-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1.25rem;
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 0.25rem;
}

.mobile-nav-back:hover {
    color: #fff;
    background-color: rgba(255,255,255,0.08);
}

/* Chevron on parent items */
.mobile-nav-chevron {
    margin-left: auto;
    font-size: 0.7rem;
    opacity: 0.5;
}

.mobile-nav-heading {
    padding: 0.75rem 1.25rem 0.25rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.5);
    font-weight: 600;
}

/* -------------------------------------------------------------
   9. Auth Pages (preserved from previous work)
   ------------------------------------------------------------- */
body.auth-page {
    background: linear-gradient(135deg, #0c2635 0%, #086686 50%, #367c94 100%);
    min-height: 100vh;
}

.auth-brand {
    text-align: center;
    margin-bottom: 1.5rem;
}

.auth-brand-logo {
    display: block;
    margin: 0 auto;
    filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.auth-brand-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
}

body.auth-page .card {
    border: none;
    border-radius: 0.5rem;
    overflow: hidden;
}

body.auth-page .card-header {
    background-color: #fff;
    border-bottom: 2px solid #086686;
}

body.auth-page .card-header h3 {
    color: #0c2635;
    font-size: 1.35rem;
    margin: 0;
}

body.auth-page .card-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

#layoutAuthentication {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#layoutAuthentication_content {
    flex: 1;
}

body.auth-page #layoutAuthentication_footer footer {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.5);
}

body.auth-page #layoutAuthentication_footer .text-muted {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* -------------------------------------------------------------
   10. Component Overrides
   ------------------------------------------------------------- */

/* Buttons */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #065a76;
    --bs-btn-hover-border-color: #065a76;
    --bs-btn-active-bg: #054a63;
    --bs-btn-active-border-color: #054a63;
    --bs-btn-focus-shadow-rgb: 8, 102, 134;
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: #065a76;
    --bs-btn-active-border-color: #065a76;
}

/* Cards */
.card {
    border: 1px solid #e0e5ec;
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid #edf0f5;
    font-weight: 600;
}

/* Dashboard cards */
.dash-card {
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s;
    display: block;
}

.dash-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    color: inherit;
}

.dash-card .card-body {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dash-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Dropdown active */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--bs-primary);
}

/* Form focus */
.form-control:focus,
.form-select:focus {
    border-color: var(--dv-teal);
    box-shadow: 0 0 0 0.2rem rgba(54, 124, 148, 0.2);
}

/* Focus outlines — accessible: hide the ring for mouse/touch, but always show a
   clear focus ring for keyboard and switch users (:focus-visible). Previously
   *:focus{outline:none} removed focus indication entirely, an accessibility
   failure for keyboard navigation.
   !important is required: Bootstrap's own component rules (.btn:focus-visible,
   .form-control:focus, .nav-link:focus-visible, .page-link:focus, …) set
   `outline: 0` at specificity (0,2,0), which beats a plain :focus-visible
   (0,1,0). The theme also zeroes Bootstrap's box-shadow ring, so without this
   buttons and inputs get NO visible keyboard focus indicator at all (verified
   live). !important on the outline wins the cascade regardless of specificity
   and never affects layout; the mouse-focus suppression below stays scoped. */
:focus:not(:focus-visible) {
    outline: none;
}
:focus-visible {
    outline: 2px solid var(--dv-teal) !important;
    outline-offset: 2px;
}

/* Buttons: suppress the Bootstrap box-shadow ring on mouse focus/active; the
   :focus-visible outline above still shows for keyboard users. */
button:active,
.btn:active,
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
    box-shadow: none;
}

/* Pagination */
.page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.page-link { color: var(--bs-primary); }

/* CSP-safe utility classes — moved out of inline style="" attributes, which the
   nonce-based CSP (no style-src 'unsafe-inline') silently strips. */
.scan-report-pre {
    max-height: 480px;
    overflow: auto;
    font-size: .8rem;
    white-space: pre-wrap;
    word-break: break-all;
}
.mw-220 { max-width: 220px; }

/* Touch targets: on coarse pointers (phones) give small in-table action buttons
   a comfortable tap size (~WCAG 2.5.5) without changing desktop table density. */
@media (pointer: coarse) {
    .table td .btn-sm { min-height: 40px; min-width: 38px; }
}
.page-link:hover { color: #064d66; }

/* Nav tabs */
.nav-tabs-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.nav-tabs-scroll::-webkit-scrollbar { display: none; }
.nav-tabs-scroll .nav-tabs { border-bottom: 1px solid #dee2e6; }
.nav-tabs-scroll .nav-link { white-space: nowrap; }
@media (max-width: 767.98px) {
    .nav-tabs-scroll {
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 2.5rem), transparent);
        mask-image: linear-gradient(to right, black calc(100% - 2.5rem), transparent);
    }
    .nav-tabs-scroll.scrolled-end {
        -webkit-mask-image: none;
        mask-image: none;
    }
}
.nav-tabs .nav-link {
    color: #6c757d;
    font-size: 0.9rem;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.5rem 1rem;
    background: none;
}
.nav-tabs .nav-link:hover {
    color: var(--bs-primary);
    border-bottom-color: #ccc;
    background: none;
}
.nav-tabs .nav-link.active {
    color: var(--bs-primary);
    font-weight: 600;
    border: none;
    border-bottom: 2px solid var(--bs-primary);
    background: none;
}

/* Tables */
.table > thead {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6c757d;
}

/* Tooltips */
.tooltip {
    font-size: 0.8rem;
}

.tooltip .tooltip-inner {
    background-color: var(--dv-navy);
    padding: 0.35rem 0.65rem;
}

.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^='right'] .tooltip-arrow::before {
    border-right-color: var(--dv-navy);
}

/* Alerts */
.alert {
    font-size: 0.88rem;
    border-radius: 0.375rem;
}

/* Badges */
.badge.bg-primary {
    background-color: var(--bs-primary) !important;
}

/* Dropdowns general */
.dropdown-menu {
    font-size: 0.88rem;
    border: 0;
    box-shadow: 0 0.25rem 1rem rgba(0,0,0,.12);
    border-radius: 0.375rem;
}

/* Form check */
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* -------------------------------------------------------------
   11. AJAX Loading Bar
   ------------------------------------------------------------- */
#ajax-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: rgba(255,255,255,0.85);
    z-index: 9999;
    opacity: 0;
    width: 0;
    pointer-events: none;
}

#ajax-loading-bar.loading {
    opacity: 1;
    animation: ajax-load 1.2s ease-in-out forwards;
}

#ajax-loading-bar.done {
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s 0.1s;
}

@keyframes ajax-load {
    0%   { width: 0; }
    30%  { width: 40%; }
    60%  { width: 70%; }
    100% { width: 90%; }
}

/* -------------------------------------------------------------
   12. Toast Notifications
   ------------------------------------------------------------- */
.toast-container {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 1090;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    max-width: 360px;
    pointer-events: none;
}

.dv-toast {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    color: #fff;
    font-size: 0.875rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.3s, transform 0.3s;
}

.dv-toast.show {
    opacity: 1;
    transform: translateX(0);
}

.dv-toast.hiding {
    opacity: 0;
    transform: translateX(100%);
}

.dv-toast-success { background-color: #198754; }
.dv-toast-error   { background-color: #dc3545; }
.dv-toast-warning { background-color: #d9842a; }
.dv-toast-info    { background-color: var(--bs-primary); }

.dv-toast-icon {
    flex-shrink: 0;
    margin-right: 0.625rem;
    font-size: 1.1rem;
}

.dv-toast-body {
    flex: 1;
}

.dv-toast-close {
    flex-shrink: 0;
    margin-left: 0.5rem;
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    line-height: 1;
}

.dv-toast-close:hover {
    color: #fff;
}

/* -------------------------------------------------------------
   13. Banner Notifications
   ------------------------------------------------------------- */
.banner-container {
    position: sticky;
    top: var(--dv-navbar-height);
    z-index: 1030;
}

.dv-banner {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    border-bottom: 1px solid transparent;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.35s ease;
    padding-top: 0;
    padding-bottom: 0;
}

.dv-banner.show {
    max-height: 80px;
    opacity: 1;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.dv-banner-success {
    background-color: #d1e7dd;
    color: #0a3622;
    border-color: #badbcc;
}

.dv-banner-error {
    background-color: #f8d7da;
    color: #58151c;
    border-color: #f1aeb5;
}

.dv-banner-warning {
    background-color: #fff3cd;
    color: #664d03;
    border-color: #ffe69c;
}

.dv-banner-info {
    background-color: #cff4fc;
    color: #055160;
    border-color: #9eeaf9;
}

.dv-banner-icon {
    flex-shrink: 0;
    margin-right: 0.625rem;
    font-size: 1.1rem;
}

.dv-banner-body {
    flex: 1;
}

.dv-banner-close {
    flex-shrink: 0;
    margin-left: 0.75rem;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.5;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.dv-banner-close:hover {
    opacity: 1;
}

@media (max-width: 767.98px) {
    .toast-container {
        right: 0.75rem;
        bottom: 0.75rem;
        left: 0.75rem;
        max-width: none;
    }
    .dv-toast {
        width: 100%;
        transform: translateY(100%);
    }
    .dv-toast.show {
        transform: translateY(0);
    }
    .dv-toast.hiding {
        transform: translateY(100%);
    }
}

/* Inline-style replacements (APP-2 Stage B) */
.dash-card-icon-primary { background-color: rgba(8,102,134,0.1); color: var(--bs-primary); }
.dash-card-icon-success { background-color: rgba(25,135,84,0.12); color: #198754; }
.dash-card-icon-warning { background-color: rgba(255,193,7,0.16); color: #b5850b; }
.dash-card-icon-danger  { background-color: rgba(220,53,69,0.12); color: #dc3545; }
.icon-passkey           { width: 16px; height: 16px; vertical-align: text-bottom; }
.icon-passkey-lg        { width: 20px; height: 20px; vertical-align: text-bottom; }
.logo-invert            { filter: brightness(0) invert(1); }
.btn-close-invert       { filter: invert(1); }
.mw-200                 { max-width: 200px; }
.mw-300                 { max-width: 300px; }
.stripe-card-element    { padding-top: 10px; height: auto; }
/* admin server-detail metric chart (static parts; bar height/colour set via CSSOM) */
.metric-chart           { height: 80px; gap: 1px; }
.metric-bar             { flex: 1; opacity: 0.7; }
/* Stripe split card fields — vertically center the iframe inside .form-control */
.stripe-input           { padding-top: 0.55rem; padding-bottom: 0.55rem; }