/* App-specific helpers layered on top of the Zynix theme.
   Intentionally minimal — the Zynix theme drives layout, colors, buttons, tables. */

/* Avatar initials bubble */
.avatar-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(132, 90, 223, 0.12);
    color: var(--primary-color, #845adf);
    display: inline-grid;
    place-items: center;
    font-weight: 700;
    font-size: .85rem;
    flex: 0 0 auto;
}

/* Dashboard stat tiles */
.jb-stat {
    border-radius: 0.5rem;
    padding: 1.3rem;
    color: #fff;
    height: 100%;
}
.jb-stat-icon { font-size: 2rem; opacity: .85; }
.jb-stat-value { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.jb-stat-label { opacity: .9; font-size: .85rem; }
.bg-grad-purple { background: linear-gradient(135deg, #845adf, #a07ee8); }
.bg-grad-blue   { background: linear-gradient(135deg, #49b6f5, #6cc7f8); }
.bg-grad-green  { background: linear-gradient(135deg, #26bf94, #4ed4af); }
.bg-grad-orange { background: linear-gradient(135deg, #f5b849, #f8cb7a); }
.bg-grad-red    { background: linear-gradient(135deg, #e6533c, #f07a68); }
.bg-grad-teal   { background: linear-gradient(135deg, #0bb5c9, #46d6e6); }

/* Brand logo block (invoice header) */
.jb-logo {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--primary-color, #845adf);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
}

/* Keep the responsive overlay above content on mobile */
#responsive-overlay { position: fixed; inset: 0; z-index: 99; }

/* ── Collapsed (icon-only) sidebar ───────────────────────────────────────
   Clean, centered icons with generous vertical spacing. Category markers
   are hidden (they collided as square+circle). Scoped with :not(:hover)
   so the hover-expanded overlay keeps its labels. Suffixes -close /
   -closed only (NOT the expanded default "close"). */

/* Group separator: a single small bubble dot (replaces the text label) */
[data-toggled$="-close"] .app-sidebar:not(:hover) .main-menu > li.slide__category,
[data-toggled$="-closed"] .app-sidebar:not(:hover) .main-menu > li.slide__category {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0.55rem 0;
    min-height: 0;
}
[data-toggled$="-close"] .app-sidebar:not(:hover) .main-menu > li.slide__category .category-name,
[data-toggled$="-closed"] .app-sidebar:not(:hover) .main-menu > li.slide__category .category-name {
    display: none !important;
}
[data-toggled$="-close"] .app-sidebar:not(:hover) .main-menu > li.slide__category::before,
[data-toggled$="-closed"] .app-sidebar:not(:hover) .main-menu > li.slide__category::before {
    display: none !important;
}
[data-toggled$="-close"] .app-sidebar:not(:hover) .main-menu > li.slide__category::after,
[data-toggled$="-closed"] .app-sidebar:not(:hover) .main-menu > li.slide__category::after {
    content: "" !important;
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(115, 113, 143, 0.45);
}

/* Each icon sits in a centered square tile with a small border-radius.
   Icon size + inner padding match the expanded menu (16px icon, ~10px pad). */
[data-toggled$="-close"] .app-sidebar:not(:hover) .main-menu > li.slide > .side-menu__item,
[data-toggled$="-closed"] .app-sidebar:not(:hover) .main-menu > li.slide > .side-menu__item {
    display: flex !important;
    align-items: center;
    justify-content: center !important;
    width: 38px;
    height: 38px;
    padding: 0 !important;
    margin: 0.35rem auto;
    border-radius: 8px;
    text-align: center;
}
[data-toggled$="-close"] .app-sidebar:not(:hover) .main-menu > li.slide > .side-menu__item .side-menu__icon,
[data-toggled$="-closed"] .app-sidebar:not(:hover) .main-menu > li.slide > .side-menu__item .side-menu__icon {
    margin: 0 !important;
    font-size: 1rem;
}
/* Hover tile */
[data-toggled$="-close"] .app-sidebar:not(:hover) .main-menu > li.slide > .side-menu__item:hover,
[data-toggled$="-closed"] .app-sidebar:not(:hover) .main-menu > li.slide > .side-menu__item:hover {
    background-color: rgba(132, 90, 223, 0.12) !important;
}
/* Selected (active) tile: filled square in the primary colour */
[data-toggled$="-close"] .app-sidebar:not(:hover) .main-menu > li.slide > .side-menu__item.active,
[data-toggled$="-closed"] .app-sidebar:not(:hover) .main-menu > li.slide > .side-menu__item.active {
    background-color: var(--primary-color, #845adf) !important;
    border-radius: 8px !important;
}
[data-toggled$="-close"] .app-sidebar:not(:hover) .main-menu > li.slide > .side-menu__item.active .side-menu__icon,
[data-toggled$="-closed"] .app-sidebar:not(:hover) .main-menu > li.slide > .side-menu__item.active .side-menu__icon {
    color: #fff !important;
}
/* Hide the submenu arrow (Masters) in collapsed mode */
[data-toggled$="-close"] .app-sidebar:not(:hover) .main-menu > li.slide > .side-menu__item .side-menu__angle,
[data-toggled$="-closed"] .app-sidebar:not(:hover) .main-menu > li.slide > .side-menu__item .side-menu__angle {
    display: none !important;
}

/* ── List page header + filter toolbar ───────────────────────────────── */
.list-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.list-header .card-title { margin: 0; font-weight: 600; }
.list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}
.list-toolbar .form-control,
.list-toolbar .form-select {
    width: auto;
    min-width: 150px;
}
.list-toolbar input[type="search"] { min-width: 210px; }
.list-toolbar .btn { white-space: nowrap; }

/* ── Smart confirmation dialog ───────────────────────────────────────── */
.smart-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(20, 22, 40, 0.45);
    opacity: 0;
    transition: opacity 0.18s ease;
}
.smart-confirm-overlay.is-open { opacity: 1; }

.smart-confirm-dialog {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: 14px;
    padding: 1.75rem 1.5rem 1.25rem;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    transform: translateY(12px) scale(0.97);
    transition: transform 0.18s ease;
}
.smart-confirm-overlay.is-open .smart-confirm-dialog {
    transform: translateY(0) scale(1);
}

.smart-confirm-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
}
.smart-confirm-icon svg { width: 32px; height: 32px; }
.smart-confirm-danger  { background: rgba(230, 83, 60, 0.12);  color: #e6533c; }
.smart-confirm-warning { background: rgba(245, 184, 73, 0.15); color: #d99b21; }
.smart-confirm-success { background: rgba(38, 191, 148, 0.12); color: #26bf94; }
.smart-confirm-primary { background: rgba(132, 90, 223, 0.12); color: #845adf; }
.smart-confirm-info    { background: rgba(73, 182, 245, 0.12); color: #49b6f5; }

.smart-confirm-title {
    margin: 0 0 0.35rem;
    font-weight: 600;
    font-size: 1.125rem;
    color: #1c1d22;
}
.smart-confirm-message {
    margin: 0 0 1.25rem;
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.5;
}
.smart-confirm-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}
.smart-confirm-actions .btn { min-width: 110px; }

/* Dark theme support (Zynix toggles data-theme-mode) */
html[data-theme-mode="dark"] .smart-confirm-dialog { background: #1f2333; }
html[data-theme-mode="dark"] .smart-confirm-title   { color: #f1f1f5; }

/* ── Beautiful toasts ────────────────────────────────────────────────── */
.toast-stack {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    max-width: calc(100vw - 2.5rem);
    pointer-events: none;
}
.app-toast {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 360px;
    max-width: 100%;
    padding: 0.9rem 2.25rem 0.9rem 0.9rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(20, 22, 40, 0.16);
    overflow: hidden;
    opacity: 0;
    transform: translateX(120%);
    transition: transform 0.32s cubic-bezier(0.21, 1.02, 0.46, 1), opacity 0.32s ease;
}
.app-toast.is-open { opacity: 1; transform: translateX(0); }
.app-toast.is-leaving { opacity: 0; transform: translateX(120%); }

.app-toast::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
}
.app-toast-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}
.app-toast-icon svg { width: 19px; height: 19px; }
.app-toast-body { flex: 1 1 auto; min-width: 0; }
.app-toast-title {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.2;
    color: #1c1d22;
}
.app-toast-message {
    font-size: 0.82rem;
    color: #6c757d;
    margin-top: 0.15rem;
    word-wrap: break-word;
}
.app-toast-close {
    position: absolute;
    top: 0.45rem;
    right: 0.55rem;
    border: 0;
    background: transparent;
    font-size: 1.15rem;
    line-height: 1;
    color: #adb5bd;
    cursor: pointer;
    padding: 0.15rem;
}
.app-toast-close:hover { color: #6c757d; }
.app-toast-progress {
    position: absolute;
    left: 0; bottom: 0;
    height: 3px;
    width: 100%;
    transform-origin: left;
    transform: scaleX(1);
    opacity: 0.55;
}

/* Type accents */
.app-toast-success::before        { background: #26bf94; }
.app-toast-success .app-toast-icon{ background: rgba(38,191,148,0.13); color: #26bf94; }
.app-toast-success .app-toast-progress { background: #26bf94; }
.app-toast-error::before          { background: #e6533c; }
.app-toast-error .app-toast-icon  { background: rgba(230,83,60,0.13); color: #e6533c; }
.app-toast-error .app-toast-progress   { background: #e6533c; }
.app-toast-warning::before        { background: #f5b849; }
.app-toast-warning .app-toast-icon{ background: rgba(245,184,73,0.15); color: #d99b21; }
.app-toast-warning .app-toast-progress { background: #f5b849; }
.app-toast-info::before           { background: #49b6f5; }
.app-toast-info .app-toast-icon   { background: rgba(73,182,245,0.13); color: #49b6f5; }
.app-toast-info .app-toast-progress    { background: #49b6f5; }

html[data-theme-mode="dark"] .app-toast { background: #1f2333; }
html[data-theme-mode="dark"] .app-toast-title { color: #f1f1f5; }

@media (max-width: 480px) {
    .toast-stack { left: 1rem; right: 1rem; top: 1rem; }
    .app-toast { width: 100%; }
}

/* ── Smart filter dropdowns (Choices.js, toolbar sizing) ─────────────── */
.list-toolbar .choices { margin-bottom: 0; min-width: 160px; }
.list-toolbar .choices__inner {
    min-height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 1.75rem 0.25rem 0.5rem;
    font-size: 0.8125rem;
    border-radius: 0.5rem;
    background: #fff;
}
.list-toolbar .choices__list--single { padding: 0; }
.list-toolbar .choices[data-type*="select-one"]::after { right: 0.65rem; }
.list-toolbar .choices__list--dropdown .choices__item { font-size: 0.8125rem; }
.choices.choices-smart-filter .choices__inner { line-height: 1.4; }
/* Place the clear (✕) button to the left of the chevron */
.list-toolbar .choices[data-type*="select-one"] .choices__button {
    right: 1.9rem;
    opacity: 0.6;
}
.list-toolbar .choices[data-type*="select-one"] .choices__button:hover { opacity: 1; }

html[data-theme-mode="dark"] .list-toolbar .choices__inner { background: #1f2333; }

/* ── Collapsed (icon) sidebar: give icons room to breathe ────────────── */
html[data-toggled="icon-overlay-close"]:not([data-icon-overlay="open"]) .app-sidebar .main-menu > .slide {
    margin-block: 0.35rem;
}
html[data-toggled="icon-overlay-close"]:not([data-icon-overlay="open"]) .app-sidebar .side-menu__item {
    justify-content: center;
    padding-block: 0.6rem;
    margin-inline: 0.5rem;
    border-radius: 0.6rem;
}
html[data-toggled="icon-overlay-close"]:not([data-icon-overlay="open"]) .app-sidebar .side-menu__icon {
    margin-inline-end: 0;
    font-size: 1.15rem;
}
/* Hide the dropdown caret in icon-only mode so it doesn't crowd the glyph */
html[data-toggled="icon-overlay-close"]:not([data-icon-overlay="open"]) .app-sidebar .side-menu__angle {
    display: none;
}

/* ---- Kill the page-load sidebar "blink" ------------------------------ */
/* The Zynix theme animates the sidebar/content width via CSS transitions.
   On first paint (and when defaultmenu.js expands the active submenu after
   DOMContentLoaded) those transitions fire, so the left menu visibly blinks
   between its open and collapsed widths. We freeze every sidebar/content
   transition until the page has fully loaded; app-ui.js adds `is-loaded`
   on window.load, after the menu has settled into its final state. */
html:not(.is-loaded) .app-sidebar,
html:not(.is-loaded) .app-sidebar *,
html:not(.is-loaded) .main-content,
html:not(.is-loaded) .main-sidebar,
html:not(.is-loaded) .side-menu__item,
html:not(.is-loaded) .slide-menu {
    transition: none !important;
    animation: none !important;
}

/* On desktop the expanded sidebar + content carry `transition: all 0.05s ease`.
   When a theme script settles a class after first paint, that transition
   animates the sidebar/content horizontally — the left-to-right "blink". The
   50ms slide is imperceptible as motion anyway, so we drop it entirely: the
   layout snaps straight to its final position with no page-load animation.
   (Mobile keeps its off-canvas slide; this is scoped to >= 992px.) */
@media (min-width: 992px) {
    .app-sidebar,
    .app-content,
    .app-sidebar .main-sidebar-header {
        transition: none !important;
    }
}

/* ---- Submit loader (loader.js) ---------------------------------------- */
/* Keep loading buttons legible despite the disabled state, and stop them
   collapsing in width while the label is swapped for a spinner. */
.btn.is-loading {
    opacity: 1 !important;
    cursor: progress;
    pointer-events: none;
}
.btn.is-loading .spinner-border-sm {
    vertical-align: -0.125em;
}
form[aria-busy="true"] {
    cursor: progress;
}

/* ---- Sidebar submenu items with icons -------------------------------- */
/* The base theme assumes child-menu rows have NO icon: its active rule paints
   the icon white and its hover rule paints label+icon white while forcing the
   row background transparent. Fine for text-only submenus (e.g. Masters), but
   our CRM / HRMS / Access Control groups use icons, so on the light menu style
   the active icon and any hovered text turn white-on-white and disappear.
   Restore legibility below. */

/* Active AND hover sub-item share the same look: a solid primary background
   with white icon + label and rounded corners (mirrors top-level item hover).
   Overrides the theme's transparent-background + white/primary text rules. */
.app-sidebar .slide-menu.child1 .side-menu__item:hover,
.app-sidebar .slide-menu.child2 .side-menu__item:hover,
.app-sidebar .slide-menu.child3 .side-menu__item:hover,
.app-sidebar .slide-menu.child1 .side-menu__item.active,
.app-sidebar .slide-menu.child2 .side-menu__item.active,
.app-sidebar .slide-menu.child3 .side-menu__item.active {
    background-color: var(--primary-color) !important;
    border-radius: 0.35rem;
    /* colour the anchor itself so bare-text items (e.g. Masters, which have
       no .side-menu__label span) turn white too */
    color: #fff !important;
}
.app-sidebar .slide-menu .side-menu__item:hover .side-menu__icon,
.app-sidebar .slide-menu .side-menu__item:hover .side-menu__label,
.app-sidebar .slide-menu .side-menu__item.active .side-menu__icon,
.app-sidebar .slide-menu .side-menu__item.active .side-menu__label {
    color: #fff !important;
    fill: #fff !important;
}

/* ---- Page navigation tabs (x-page-tabs) ------------------------------- */
/* Link-style tabs that navigate to different page URLs, styled as a classic
   tab bar: a shared underline, the active tab marked by a coloured bottom
   border that sits on top of that line. */
.page-tabs {
    gap: 1.5rem;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 1.25rem;
}
.page-tabs .nav-item {
    margin-bottom: -1px; /* pull the tab's border onto the shared underline */
}
.page-tabs .page-tab {
    display: inline-block;
    padding: 0.65rem 0.25rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
    color: #64748b;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.page-tabs .page-tab:hover {
    color: #1e293b;
    border-bottom-color: rgba(0, 0, 0, 0.2);
}
.page-tabs .page-tab.active {
    color: var(--primary-color, #6c5ffc);
    border-bottom-color: var(--primary-color, #6c5ffc);
}