/*
 * Sirius ERP — Compatibility layer for Velzon theme
 * Maps old Spruko utility classes → Velzon / Bootstrap 5.3 equivalents
 * so all existing views work without modification.
 */

/* ── Transparent badge / background colours ─────────────────────────────── */
/* Old theme used bg-*-transparent; Velzon uses bg-*-subtle.
   We define the old names so existing markup keeps working.             */
.bg-primary-transparent   { background-color: var(--vz-primary-bg-subtle)   !important; color: var(--vz-primary)   !important; }
.bg-success-transparent   { background-color: var(--vz-success-bg-subtle)   !important; color: var(--vz-success)   !important; }
.bg-danger-transparent    { background-color: var(--vz-danger-bg-subtle)    !important; color: var(--vz-danger)    !important; }
.bg-warning-transparent   { background-color: var(--vz-warning-bg-subtle)   !important; color: var(--vz-warning)   !important; }
.bg-info-transparent      { background-color: var(--vz-info-bg-subtle)      !important; color: var(--vz-info)      !important; }
.bg-secondary-transparent { background-color: var(--vz-secondary-bg-subtle) !important; color: var(--vz-secondary) !important; }
.bg-dark-transparent      { background-color: rgba(0,0,0,.08)               !important; color: #212529             !important; }

/* ── Text colours (old theme had text-* on badge cells) ─────────────────── */
.text-primary   { color: var(--vz-primary)   !important; }
.text-success   { color: var(--vz-success)   !important; }
.text-danger    { color: var(--vz-danger)    !important; }
.text-warning   { color: var(--vz-warning)   !important; }
.text-info      { color: var(--vz-info)      !important; }

/* ── Custom font sizes (Bootstrap only goes fs-1–fs-6) ──────────────────── */
.fs-10 { font-size: 0.625rem  !important; }
.fs-11 { font-size: 0.6875rem !important; }
.fs-12 { font-size: 0.75rem   !important; }
.fs-13 { font-size: 0.8125rem !important; }
.fs-14 { font-size: 0.875rem  !important; }
.fs-15 { font-size: 0.9375rem !important; }
.fs-16 { font-size: 1rem      !important; }
.fs-18 { font-size: 1.125rem  !important; }
.fs-20 { font-size: 1.25rem   !important; }
.fs-36 { font-size: 2.25rem   !important; }
.fs-40 { font-size: 2.5rem    !important; }

/* ── Extra-small button (btn-xs) ────────────────────────────────────────── */
.btn-xs {
    padding: 0.15rem 0.4rem;
    font-size: 0.7rem;
    border-radius: 0.2rem;
    line-height: 1.4;
}

/* ── Cursor helpers ─────────────────────────────────────────────────────── */
.cursor-pointer { cursor: pointer !important; }

/* ── Table helpers ──────────────────────────────────────────────────────── */
.align-middle td, .align-middle th { vertical-align: middle !important; }

/* Comfortable horizontal padding for data/list tables (Bootstrap table-sm is very tight) */
.table > :not(caption) > * > * {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.table-sm > :not(caption) > * > * {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Tables inside flush card bodies (p-0) — extra inset on first/last column */
.card-body.p-0 .table > :not(caption) > * > *:first-child,
.card-body.p-0 .table-responsive .table > :not(caption) > * > *:first-child {
    padding-left: 1.25rem;
}

.card-body.p-0 .table > :not(caption) > * > *:last-child,
.card-body.p-0 .table-responsive .table > :not(caption) > * > *:last-child {
    padding-right: 1.25rem;
}

/* ── Font monospace (Bootstrap has it but just in case) ─────────────────── */
.font-monospace { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; }

/* ── Opacity helpers ─────────────────────────────────────────────────────── */
.opacity-40 { opacity: 0.4 !important; }

/* ── Table light header refinement ──────────────────────────────────────── */
.table-light th { color: #495057; }

/* ── Card tweaks to match ERP density ───────────────────────────────────── */
.card { box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.card-header { padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--vz-border-color); }

/* ── Page title spacing ─────────────────────────────────────────────────── */
.page-content .page-title-box {
    margin-left: calc(-0.5 * var(--bs-gutter-x, 1.5rem));
    margin-right: calc(-0.5 * var(--bs-gutter-x, 1.5rem));
    padding-left: calc(0.5 * var(--bs-gutter-x, 1.5rem));
    padding-right: calc(0.5 * var(--bs-gutter-x, 1.5rem));
    width: auto;
    padding-bottom: 1.25rem;
}
.page-title-box h4 { font-size: 1.05rem; font-weight: 600; margin-bottom: 0; }
.page-title-box .page-title-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

/* ── Badge refinements ──────────────────────────────────────────────────── */
.badge { font-weight: 600; }
.badge.fw-bold { font-weight: 700 !important; }

/* ── Tom Select (Velzon / Bootstrap 5) ──────────────────────────────────── */
.ts-wrapper {
    position: relative;
}

.ts-wrapper.dropdown-active {
    z-index: 1060;
}

.ts-wrapper.form-select-sm .ts-control {
    min-height: 31px;
    padding: 2px 8px;
    font-size: .875rem;
}

/* Dropdown stays under the control (not document.body) */
.ts-wrapper .ts-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100%;
    margin-top: 1px;
    z-index: 1060 !important;
    background-color: var(--vz-secondary-bg, #fff) !important;
    border: 1px solid var(--vz-border-color, #dee2e6) !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0.5rem 1rem rgba(15, 23, 42, 0.12) !important;
}

.ts-dropdown .ts-dropdown-content {
    background-color: var(--vz-secondary-bg, #fff) !important;
}

.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results {
    background-color: transparent;
}

.ts-dropdown .option.active {
    background-color: var(--vz-primary-bg-subtle, #eef2ff) !important;
    color: var(--vz-primary-text-emphasis, #3730a3) !important;
}

.ts-dropdown .option.selected {
    background-color: var(--vz-primary, #405189) !important;
    color: #fff !important;
}

/* Tabbed forms: avoid clipping the dropdown panel */
.tab-content,
.tab-pane {
    overflow: visible;
}

/* ── Sidebar active state (all sections, same as Portal Admin) ───────────── */
.navbar-menu .nav-link.active {
    color: #fff !important;
}

.navbar-menu .nav-sm .nav-link.active {
    font-weight: 500;
}

.navbar-menu .nav-item.active > .nav-link.menu-link,
.navbar-menu .nav-item.active > a.nav-link[data-bs-toggle="collapse"] {
    color: #fff !important;
}

/* ── Floating controls (theme gear + back-to-top) ─────────────────────────── */
/* Keep Velzon’s right-edge placement; reserve a content rail so tables,
   pagers, and scrollbars stay clear of the fixed buttons. */

:root {
    --sirius-floating-btn-size: 2.5rem;
    --sirius-floating-btn-gap: 0.5rem;
    --sirius-floating-footer-clearance: calc(60px + 1rem);
    --sirius-floating-rail-width: 4.25rem;
}

/* ── Mobile / tablet — minimal side gutters (keep Velzon nav sidebar offset) */
@media (max-width: 991.98px) {
  .page-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .page-content > .container-fluid {
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
    max-width: 100%;
  }

  .footer > .container-fluid {
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
  }

  /* Boxed theme width should not squeeze content on phones */
  [data-layout-width="boxed"] #layout-wrapper,
  [data-layout-width="boxed"] .main-content,
  [data-layout-width="boxed"] .page-content,
  [data-layout-width="boxed"] .layout-width {
    max-width: 100% !important;
    width: 100% !important;
  }

  #back-to-top {
    right: max(0.75rem, env(safe-area-inset-right, 0px));
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 575.98px) {
  .page-content > .container-fluid {
    padding-left: max(0.65rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.65rem, env(safe-area-inset-right, 0px));
  }

  .page-title-box {
    padding-bottom: 0.75rem;
  }
}

.customizer-setting,
#back-to-top {
    z-index: 1040;
}

.customizer-setting {
    right: 1.25rem;
    left: auto;
    bottom: var(--sirius-floating-footer-clearance);
}

.customizer-setting .btn-lg {
    width: var(--sirius-floating-btn-size);
    height: var(--sirius-floating-btn-size);
    padding: 0.4rem !important;
}

.customizer-setting .btn-lg .fs-22 {
    font-size: 1.25rem !important;
}

#back-to-top {
    right: 1.75rem;
    left: auto;
    bottom: calc(var(--sirius-floating-footer-clearance) + var(--sirius-floating-btn-size) + var(--sirius-floating-btn-gap));
    width: var(--sirius-floating-btn-size);
    height: var(--sirius-floating-btn-size);
    padding: 0;
}

body:not(:has(.customizer-setting)) #back-to-top {
    bottom: var(--sirius-floating-footer-clearance);
}

/* Desktop only — reserve space for theme gear + back-to-top */
@media (min-width: 992px) {
    .page-content {
        padding-right: var(--sirius-floating-rail-width);
    }

    /* back-to-top is super-admin only (see _Layout.cshtml) — when it's absent, don't
       reserve a full rail for the lone gear button; it floats over the corner instead.
       Without this, non-admin users saw a large unused strip on the right of every page. */
    body:not(:has(#back-to-top)) .page-content {
        padding-right: 10px;
    }
}

/* ── Mobile / tablet app shell ───────────────────────────────────────────── */
html {
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
}

body {
    touch-action: manipulation;
    overscroll-behavior-y: none;
}

/* Menu icon: hamburger on phone/tablet, Velzon animated bars on desktop */
.sirius-mobile-menu-icon {
    display: none;
    line-height: 1;
}

.sirius-desktop-menu-icon {
    display: inline-flex;
}

@media (max-width: 991.98px) {
    .sirius-mobile-menu-icon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .sirius-desktop-menu-icon {
        display: none !important;
    }

    #topnav-hamburger-icon {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Velzon can collapse the bars into a chevron — force menu icon instead */
    #topnav-hamburger-icon .hamburger-icon span {
        transform: none !important;
        opacity: 1 !important;
    }
}

/* Sidebar overlay must not block clicks when the menu is closed */
body:not(.vertical-sidebar-enable) .vertical-overlay {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* ── Sirius brand logo ───────────────────────────────────────────────────── */
/* Top bar (horizontal) — compact */
[data-topbar=dark] .navbar-brand-box.horizontal-logo .logo-dark {
    display: none !important;
}

[data-topbar=dark] .navbar-brand-box.horizontal-logo .logo-light {
    display: block !important;
}

[data-topbar=light] .navbar-brand-box.horizontal-logo .logo-light {
    display: none !important;
}

[data-topbar=light] .navbar-brand-box.horizontal-logo .logo-dark {
    display: block !important;
}

.navbar-brand-box.horizontal-logo .logo-sm {
    display: none !important;
}

.navbar-brand-box.horizontal-logo .logo-lg {
    display: inline-block !important;
}

.navbar-brand-box.horizontal-logo .logo-lg img,
.navbar-brand-box.horizontal-logo .logo-lg .sirius-brand-logo {
    display: block;
    height: 20px !important;
    max-height: 20px !important;
    width: auto !important;
    max-width: 140px !important;
    object-fit: contain;
}

.navbar-brand-box.horizontal-logo .logo-sm img,
.navbar-brand-box.horizontal-logo .logo-sm .sirius-brand-logo-sm {
    height: 22px !important;
    max-height: 22px !important;
    width: 22px !important;
    max-width: 22px !important;
}

/* Sidebar — larger wordmark, centered in brand box */
.app-menu .navbar-brand-box {
    padding: 18px 1.25rem 14px !important;
}

/* Velzon toggles logo-dark/light and logo-sm/lg — do not force all .logo visible */
[data-sidebar=dark] .app-menu .navbar-brand-box .logo-dark,
[data-sidebar=gradient] .app-menu .navbar-brand-box .logo-dark,
[data-sidebar=gradient-2] .app-menu .navbar-brand-box .logo-dark,
[data-sidebar=gradient-3] .app-menu .navbar-brand-box .logo-dark,
[data-sidebar=gradient-4] .app-menu .navbar-brand-box .logo-dark {
    display: none !important;
}

[data-sidebar=dark] .app-menu .navbar-brand-box .logo-light,
[data-sidebar=gradient] .app-menu .navbar-brand-box .logo-light,
[data-sidebar=gradient-2] .app-menu .navbar-brand-box .logo-light,
[data-sidebar=gradient-3] .app-menu .navbar-brand-box .logo-light,
[data-sidebar=gradient-4] .app-menu .navbar-brand-box .logo-light {
    display: block !important;
    line-height: 0;
}

[data-sidebar=light] .app-menu .navbar-brand-box .logo-light {
    display: none !important;
}

[data-sidebar=light] .app-menu .navbar-brand-box .logo-dark {
    display: block !important;
    line-height: 0;
}

/* Expanded sidebar — full wordmark only (hide icon duplicate) */
.app-menu .navbar-brand-box .logo-sm {
    display: none !important;
}

.app-menu .navbar-brand-box .logo-lg {
    display: inline-block !important;
}

.app-menu .navbar-brand-box .logo-lg img,
.app-menu .navbar-brand-box .logo-lg .sirius-brand-logo {
    display: block;
    height: 30px !important;
    max-height: 30px !important;
    width: auto !important;
    max-width: 180px !important;
    margin: 0 auto;
    object-fit: contain;
}

/* Collapsed sidebar — icon only */
[data-sidebar-size=sm] .app-menu .navbar-brand-box .logo-sm,
[data-sidebar-size=sm-hover] .app-menu .navbar-brand-box .logo-sm {
    display: inline-block !important;
}

[data-sidebar-size=sm] .app-menu .navbar-brand-box .logo-lg,
[data-sidebar-size=sm-hover] .app-menu .navbar-brand-box .logo-lg {
    display: none !important;
}

.app-menu .navbar-brand-box .logo-sm img,
.app-menu .navbar-brand-box .logo-sm .sirius-brand-logo-sm {
    display: block;
    height: 34px !important;
    max-height: 34px !important;
    width: 34px !important;
    max-width: 34px !important;
    margin: 0 auto;
    object-fit: contain;
}

/* Collapsed sidebar icon */
[data-sidebar-size=sm] .app-menu .navbar-brand-box,
[data-sidebar-size=sm-hover] .app-menu .navbar-brand-box {
    padding: 14px 0.5rem !important;
}

[data-sidebar-size=sm] .app-menu .navbar-brand-box .logo-sm img,
[data-sidebar-size=sm] .app-menu .navbar-brand-box .logo-sm .sirius-brand-logo-sm,
[data-sidebar-size=sm-hover] .app-menu .navbar-brand-box .logo-sm img,
[data-sidebar-size=sm-hover] .app-menu .navbar-brand-box .logo-sm .sirius-brand-logo-sm {
    height: 30px !important;
    max-height: 30px !important;
    width: 30px !important;
    max-width: 30px !important;
}

/* Login / auth page */
.auth-logo img,
.auth-logo .sirius-brand-logo-auth {
    display: inline-block;
    height: 44px !important;
    max-height: 44px !important;
    width: auto !important;
    max-width: 220px !important;
    object-fit: contain;
}

@media (max-width: 767.98px) {
    .auth-logo img,
    .auth-logo .sirius-brand-logo-auth {
        height: 36px !important;
        max-height: 36px !important;
        max-width: 190px !important;
    }
}