/* ==========================================================================
   ERPSync — modern panel layer
   Loaded after the Velzon bundle for every signed-in role. Visual only:
   no layout widths change. Tenant themes (theme-css) still override the
   --vz-* tokens because they load after this file.
   ========================================================================== */

:root {
    --vz-body-font-family: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --pm-accent: var(--accent, var(--vz-primary, #635bff));
    --pm-accent-2: #22b8f0;
    --pm-grad: linear-gradient(135deg, var(--pm-accent) 0%, color-mix(in srgb, var(--pm-accent) 55%, var(--pm-accent-2)) 100%);
    --pm-ink: #0f1b33;
    --pm-muted: #6b7a93;
    --pm-line: rgba(15, 35, 75, 0.08);
    --pm-bg: #f5f7fb;
    --pm-card: #ffffff;
    --pm-hover: color-mix(in srgb, var(--pm-accent) 7%, transparent);
    --pm-radius: 14px;
    --pm-radius-sm: 10px;
    --pm-shadow-sm: 0 1px 2px rgba(15, 27, 51, 0.04), 0 2px 8px -2px rgba(15, 27, 51, 0.06);
    --pm-shadow: 0 2px 4px rgba(15, 27, 51, 0.04), 0 10px 28px -10px rgba(15, 27, 51, 0.14);
    --pm-shadow-lg: 0 8px 18px rgba(15, 27, 51, 0.06), 0 24px 48px -16px rgba(15, 27, 51, 0.22);
    --pm-ring: 0 0 0 4px color-mix(in srgb, var(--pm-accent) 22%, transparent);
    --pm-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --pm-fast: 160ms;
    --pm-mid: 260ms;
}

[data-layout-mode="dark"] {
    --pm-ink: #e7ecf5;
    --pm-muted: #97a3b8;
    --pm-line: rgba(255, 255, 255, 0.07);
    --pm-bg: #121722;
    --pm-card: #1a2130;
    --pm-hover: color-mix(in srgb, var(--pm-accent) 14%, transparent);
    --pm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --pm-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.55);
    --pm-shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.7);
}

/* ---------- Base & typography ---------- */
body {
    background: var(--pm-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01";
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { letter-spacing: -0.015em; color: var(--pm-ink); }
.page-content { background: transparent; }
.text-muted { color: var(--pm-muted) !important; }
a { transition: color var(--pm-fast) ease; }
::selection { background: color-mix(in srgb, var(--pm-accent) 25%, transparent); }

/* Thin, quiet scrollbars */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--pm-muted) 40%, transparent) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--pm-muted) 35%, transparent); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--pm-muted) 60%, transparent); }

/* Page title / breadcrumb */
.page-title-box { background: transparent !important; box-shadow: none !important; border: 0 !important; }
.page-title-box h4 { font-weight: 700; font-size: 1.15rem; }
.breadcrumb-item a { color: var(--pm-muted); }
.breadcrumb-item a:hover { color: var(--pm-accent); }

/* ---------- Topbar ---------- */
#page-topbar {
    background: color-mix(in srgb, var(--pm-card) 82%, transparent) !important;
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--pm-line);
    box-shadow: none;
    transition: box-shadow var(--pm-mid) var(--pm-ease), background-color var(--pm-mid) ease;
}
#page-topbar.pm-scrolled { box-shadow: 0 8px 24px -16px rgba(15, 27, 51, 0.35); }
#page-topbar .header-item { transition: background-color var(--pm-fast) ease, color var(--pm-fast) ease; }
#page-topbar .btn-topbar,
#page-topbar .btn-icon.btn-ghost-secondary,
#page-topbar .topbar-head-dropdown > .btn {
    border-radius: 12px !important;
    transition: background-color var(--pm-fast) ease, transform var(--pm-fast) var(--pm-ease), color var(--pm-fast) ease;
}
#page-topbar .btn-topbar:hover,
#page-topbar .topbar-head-dropdown > .btn:hover { background: var(--pm-hover) !important; color: var(--pm-accent) !important; transform: translateY(-1px); }
#page-topbar .topbar-badge { box-shadow: 0 0 0 2px var(--pm-card); animation: pm-pop 400ms var(--pm-ease) both; }
.topbar-user { background: transparent !important; }
.topbar-user .btn { border-radius: 14px; padding: 6px 10px !important; transition: background-color var(--pm-fast) ease; }
.topbar-user .btn:hover { background: var(--pm-hover); }
.topbar-user img.header-profile-user { box-shadow: 0 0 0 2px var(--pm-card), 0 0 0 4px color-mix(in srgb, var(--pm-accent) 35%, transparent); }
.hamburger-icon span { border-radius: 2px; transition: transform var(--pm-mid) var(--pm-ease), width var(--pm-mid) var(--pm-ease); }

/* ---------- Sidebar ---------- */
.app-menu.navbar-menu {
    background: var(--pm-card);
    border-right: 1px solid var(--pm-line);
    box-shadow: none;
}
.navbar-brand-box { border-bottom: 1px solid var(--pm-line); }
#navbar-nav { padding-top: 2px; padding-bottom: 12px; }
#navbar-nav .menu-title span {
    padding: 0 !important; line-height: 1.2;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pm-muted);
}
/* Menu groups: clickable headings that fold their menus away. */
#navbar-nav .menu-title[data-pm-group] {
    display: flex; align-items: center; justify-content: space-between;
    margin: 6px 8px 1px; padding: 5px 10px !important; border-radius: 7px;
    cursor: pointer; user-select: none; transition: background-color .15s ease;
}
#navbar-nav .menu-title[data-pm-group]:first-child { margin-top: 2px; }
#navbar-nav .menu-title[data-pm-group]:hover { background: var(--pm-line); }
#navbar-nav .menu-title[data-pm-group]:focus-visible { outline: 2px solid var(--vz-primary, #405189); outline-offset: 1px; }
#navbar-nav .menu-title .pm-group-chevron {
    display: inline-block !important; font-size: 0.9rem; line-height: 1; color: var(--pm-muted); opacity: .6; transition: transform .2s cubic-bezier(.16, 1, .3, 1), opacity .15s ease;
}
#navbar-nav .menu-title[data-pm-group]:hover .pm-group-chevron { opacity: 1; }
#navbar-nav .menu-title.pm-collapsed .pm-group-chevron { transform: rotate(-90deg); }
#navbar-nav .menu-title.pm-empty-group { display: none !important; }
#navbar-nav:not(.pm-searching) .pm-group-hidden { display: none !important; }
[data-sidebar-size="sm"] #navbar-nav .menu-title[data-pm-group],
[data-sidebar-size="sm-hover"] #navbar-nav .menu-title[data-pm-group] { display: none; }
[data-sidebar-size^="sm"] #navbar-nav:not(.pm-searching) .pm-group-hidden { display: revert !important; }
@media (prefers-reduced-motion: reduce) { #navbar-nav .menu-title .pm-group-chevron { transition: none; } }
#navbar-nav .nav-link.menu-link {
    position: relative;
    margin: 1px 8px;
    padding: 5px 10px !important;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--pm-ink) 78%, transparent) !important;
    transition: background-color var(--pm-fast) ease, color var(--pm-fast) ease, transform var(--pm-fast) var(--pm-ease);
}
#navbar-nav .nav-link.menu-link i {
    display: inline-grid; place-items: center;
    width: 26px; height: 26px; min-width: 26px;
    margin-right: 9px;
    border-radius: 8px;
    font-size: 15px !important;
    line-height: 1;
    background: color-mix(in srgb, var(--pm-accent) 8%, transparent);
    color: var(--pm-accent);
    transition: background var(--pm-fast) ease, color var(--pm-fast) ease, transform var(--pm-mid) var(--pm-ease);
}
#navbar-nav .nav-link.menu-link:hover { background: var(--pm-hover); color: var(--pm-ink) !important; transform: translateX(2px); }
#navbar-nav .nav-link.menu-link:hover i { transform: scale(1.06) rotate(-4deg); }
#navbar-nav .nav-link.menu-link.active,
#navbar-nav .nav-link.menu-link[aria-expanded="true"] {
    background: color-mix(in srgb, var(--pm-accent) 11%, transparent);
    color: var(--pm-ink) !important;
    font-weight: 600;
}
#navbar-nav .nav-link.menu-link.active i,
#navbar-nav .nav-link.menu-link[aria-expanded="true"] i { background: var(--pm-grad); color: #fff; box-shadow: 0 6px 14px -6px var(--pm-accent); }
#navbar-nav .nav-link.menu-link.active::before {
    content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--pm-grad);
}
#navbar-nav .nav-link.menu-link[data-bs-toggle="collapse"]::after { transition: transform var(--pm-mid) var(--pm-ease); }

/* Sub-menu: same rows as the main menu (icon tile + label), slightly
   smaller and indented under the parent. */
#navbar-nav .menu-dropdown { padding: 1px 0 4px; }
#navbar-nav .menu-dropdown .nav-sm { position: relative; margin-left: 14px; padding-left: 0 !important; border-left: 0; }
#navbar-nav .nav-sm .nav-link {
    display: flex; align-items: center;
    margin: 1px 8px 1px 0; padding: 4px 10px !important; border-radius: 10px;
    font-size: 0.845rem; font-weight: 500; line-height: 1.35;
    color: color-mix(in srgb, var(--pm-ink) 68%, transparent) !important;
    transition: background-color var(--pm-fast) ease, color var(--pm-fast) ease, transform var(--pm-fast) var(--pm-ease);
}
#navbar-nav .nav-sm .nav-link::before { display: none !important; }
#navbar-nav .nav-sm .nav-link i {
    display: inline-grid; place-items: center;
    width: 24px; height: 24px; min-width: 24px;
    margin-right: 9px; border-radius: 7px;
    font-size: 14px !important; line-height: 1;
    background: color-mix(in srgb, var(--pm-muted) 10%, transparent);
    color: var(--pm-muted);
    transition: background var(--pm-fast) ease, color var(--pm-fast) ease, transform var(--pm-mid) var(--pm-ease);
}
#navbar-nav .nav-sm .nav-link span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#navbar-nav .nav-sm .nav-link:hover { color: var(--pm-ink) !important; background: var(--pm-hover); transform: translateX(2px); }
#navbar-nav .nav-sm .nav-link:hover i { background: color-mix(in srgb, var(--pm-accent) 10%, transparent); color: var(--pm-accent); transform: scale(1.06); }
#navbar-nav .nav-sm .nav-link.active {
    color: var(--pm-accent) !important; font-weight: 600;
    background: color-mix(in srgb, var(--pm-accent) 9%, transparent);
}
#navbar-nav .nav-sm .nav-link.active i { background: var(--pm-grad); color: #fff; box-shadow: 0 5px 12px -6px var(--pm-accent); }
@media (prefers-reduced-motion: reduce) {
    #navbar-nav .nav-sm .nav-link, #navbar-nav .nav-sm .nav-link i { transition: none; }
    #navbar-nav .nav-sm .nav-link:hover, #navbar-nav .nav-sm .nav-link:hover i { transform: none; }
}

/* Collapsed (icon-only) sidebar */
[data-sidebar-size="sm"] #navbar-nav .nav-link.menu-link { margin: 3px 8px; justify-content: center; }
[data-sidebar-size="sm"] #navbar-nav .nav-link.menu-link i { margin-right: 0; }
[data-sidebar-size="sm"] #navbar-nav .nav-link.menu-link.active::before { display: none; }
[data-sidebar-size="sm"] .pm-menu-search { display: none; }

/* Sidebar quick filter (injected by panel-modern.js) */
.pm-menu-search { position: relative; margin: 10px 10px 4px; }
.pm-menu-search input {
    width: 100%; height: 38px; padding: 0 12px 0 34px;
    border: 1px solid var(--pm-line); border-radius: 11px;
    background: color-mix(in srgb, var(--pm-muted) 7%, transparent);
    color: var(--pm-ink); font-size: 0.86rem; outline: none;
    transition: border-color var(--pm-fast) ease, box-shadow var(--pm-fast) ease, background-color var(--pm-fast) ease;
}
.pm-menu-search input:focus { border-color: color-mix(in srgb, var(--pm-accent) 55%, transparent); box-shadow: var(--pm-ring); background: var(--pm-card); }
.pm-menu-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--pm-muted); font-size: 16px; pointer-events: none; }
.pm-menu-search kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; padding: 2px 6px; border-radius: 6px; background: var(--pm-card); color: var(--pm-muted); border: 1px solid var(--pm-line); box-shadow: none; }
.pm-menu-empty { padding: 10px 22px; font-size: 0.82rem; color: var(--pm-muted); display: none; }
#navbar-nav mark.pm-hit { padding: 0 1px; border-radius: 3px; background: color-mix(in srgb, var(--pm-accent) 22%, transparent); color: inherit; }

/* ---------- Cards & widgets ---------- */
.card {
    border: 1px solid var(--pm-line) !important;
    border-radius: var(--pm-radius) !important;
    background: var(--pm-card);
    box-shadow: var(--pm-shadow-sm);
    transition: box-shadow var(--pm-mid) var(--pm-ease), transform var(--pm-mid) var(--pm-ease), border-color var(--pm-mid) ease;
}
.card-header { background: transparent !important; border-bottom: 1px solid var(--pm-line) !important; padding: 1rem 1.25rem; }
.card-header .card-title, .card-title { font-weight: 650; letter-spacing: -0.01em; }
.card-footer { background: transparent !important; border-top: 1px solid var(--pm-line) !important; }
.card.card-animate:hover,
.card.pm-lift:hover,
.row > [class*="col"] > .card.card-height-100:hover { transform: translateY(-3px); box-shadow: var(--pm-shadow); border-color: color-mix(in srgb, var(--pm-accent) 20%, var(--pm-line)) !important; }
.avatar-title { border-radius: 12px; transition: transform var(--pm-mid) var(--pm-ease); }
.card:hover .avatar-title { transform: scale(1.05) rotate(-3deg); }
.counter-value, .ff-secondary { font-feature-settings: "tnum"; letter-spacing: -0.02em; }

/* Staggered entrance (panel-modern.js adds .pm-in) */
.pm-reveal { opacity: 0; transform: translateY(10px); }
.pm-reveal.pm-in { opacity: 1; transform: none; transition: opacity 500ms var(--pm-ease), transform 500ms var(--pm-ease); transition-delay: var(--pm-d, 0ms); }

/* Empty states */
.card .text-center > i.display-4, .card .text-center > i.fs-48, .card .text-center .avatar-xl { opacity: 0.85; }

/* ---------- Buttons ---------- */
.btn {
    border-radius: var(--pm-radius-sm);
    font-weight: 600;
    letter-spacing: 0.005em;
    position: relative;
    transition: background-color var(--pm-fast) ease, border-color var(--pm-fast) ease, color var(--pm-fast) ease,
        box-shadow var(--pm-fast) ease, transform var(--pm-fast) var(--pm-ease);
}
.btn:focus-visible { box-shadow: var(--pm-ring) !important; outline: none; }
.btn:not(:disabled):not(.disabled):active { transform: translateY(0) scale(0.97); }
.btn-sm { border-radius: 9px; }
.btn-lg { border-radius: 13px; }
.btn-primary {
    background: var(--pm-grad) !important;
    border-color: transparent !important;
    box-shadow: 0 6px 16px -8px var(--pm-accent);
}
.btn-primary:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px var(--pm-accent); filter: saturate(1.1); }
.btn-success:not(:disabled):hover, .btn-danger:not(:disabled):hover, .btn-info:not(:disabled):hover,
.btn-warning:not(:disabled):hover, .btn-secondary:not(:disabled):hover, .btn-dark:not(:disabled):hover { transform: translateY(-1px); box-shadow: var(--pm-shadow); }
[class*="btn-soft-"]:not(:disabled):hover, [class*="btn-outline-"]:not(:disabled):hover { transform: translateY(-1px); }
.btn-light { background: color-mix(in srgb, var(--pm-muted) 10%, transparent); border-color: transparent; }
.btn-light:hover { background: color-mix(in srgb, var(--pm-muted) 18%, transparent); }
.btn-icon { border-radius: 10px !important; }
.btn:disabled, .btn.disabled { transform: none !important; box-shadow: none !important; }

/* Click ripple (panel-modern.js) — own clipping box so badges on buttons aren't cut off */
.pm-ripple-wrap { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.pm-ripple {
    position: absolute; border-radius: 50%; pointer-events: none;
    background: currentColor; opacity: 0.18; transform: scale(0);
    animation: pm-ripple 550ms var(--pm-ease) forwards;
}
.btn-primary .pm-ripple, .btn-success .pm-ripple, .btn-danger .pm-ripple, .btn-info .pm-ripple, .btn-dark .pm-ripple { background: #fff; opacity: 0.3; }

/* ---------- Forms ---------- */
.form-label, label.form-label { font-weight: 600; font-size: 0.82rem; color: color-mix(in srgb, var(--pm-ink) 80%, transparent); margin-bottom: 0.4rem; }
.form-control, .form-select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.choices__inner {
    border-radius: var(--pm-radius-sm) !important;
    border-color: color-mix(in srgb, var(--pm-muted) 28%, transparent) !important;
    background-color: var(--pm-card);
    transition: border-color var(--pm-fast) ease, box-shadow var(--pm-fast) ease, background-color var(--pm-fast) ease;
}
.form-control, .form-select { min-height: 40px; }
.form-control-sm, .form-select-sm { min-height: 32px; border-radius: 8px !important; }
.form-control:hover, .form-select:hover { border-color: color-mix(in srgb, var(--pm-muted) 45%, transparent) !important; }
.form-control:focus, .form-select:focus,
.select2-container--focus .select2-selection,
.select2-container--open .select2-selection,
.choices.is-focused .choices__inner {
    border-color: color-mix(in srgb, var(--pm-accent) 60%, transparent) !important;
    box-shadow: var(--pm-ring) !important;
}
.form-control::placeholder { color: color-mix(in srgb, var(--pm-muted) 75%, transparent); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--vz-danger) !important; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--vz-danger) 20%, transparent) !important; }
.invalid-feedback { font-weight: 500; animation: pm-fade-down 220ms var(--pm-ease) both; }
.input-group-text { border-radius: var(--pm-radius-sm); background: color-mix(in srgb, var(--pm-muted) 8%, transparent); border-color: color-mix(in srgb, var(--pm-muted) 28%, transparent); }
.input-group > .form-control:not(:last-child), .input-group > .form-select:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > :not(:first-child):not(.dropdown-menu) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.form-check-input { border-color: color-mix(in srgb, var(--pm-muted) 45%, transparent); transition: background-color var(--pm-fast) ease, border-color var(--pm-fast) ease, box-shadow var(--pm-fast) ease, background-position var(--pm-mid) var(--pm-ease); }
.form-check-input:checked { background-color: var(--pm-accent); border-color: var(--pm-accent); }
.form-check-input:focus { box-shadow: var(--pm-ring); border-color: color-mix(in srgb, var(--pm-accent) 60%, transparent); }
.form-switch .form-check-input { height: 1.2em; width: 2.2em; }
.select2-dropdown { border-radius: var(--pm-radius-sm) !important; border-color: var(--pm-line) !important; box-shadow: var(--pm-shadow-lg); overflow: hidden; animation: pm-fade-down 180ms var(--pm-ease) both; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--pm-accent) !important; }

/* ---------- Tables & DataTables ---------- */
.table { --vz-table-hover-bg: var(--pm-hover); color: var(--pm-ink); }
.table > thead th, .table thead.table-light th {
    background: color-mix(in srgb, var(--pm-muted) 7%, var(--pm-card)) !important;
    color: var(--pm-muted) !important;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 1px solid var(--pm-line) !important;
    white-space: nowrap;
}
.table > thead th:first-child { border-top-left-radius: 10px; }
.table > thead th:last-child { border-top-right-radius: 10px; }
.table > :not(caption) > * > * { border-bottom-color: var(--pm-line); padding-top: 0.8rem; padding-bottom: 0.8rem; }
.table > tbody > tr { transition: background-color var(--pm-fast) ease; }
.table > tbody > tr:hover > * { background-color: var(--pm-hover) !important; }
.table-card { border-radius: var(--pm-radius); overflow: hidden; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: var(--pm-radius-sm); border: 1px solid color-mix(in srgb, var(--pm-muted) 28%, transparent); min-height: 36px; padding: 4px 10px;
    transition: border-color var(--pm-fast) ease, box-shadow var(--pm-fast) ease;
}
.dataTables_wrapper .dataTables_filter input:focus { outline: none; border-color: color-mix(in srgb, var(--pm-accent) 60%, transparent); box-shadow: var(--pm-ring); }
.dataTables_wrapper .dataTables_info { color: var(--pm-muted); font-size: 0.82rem; }
table.dataTable > thead .sorting::before, table.dataTable > thead .sorting::after { opacity: 0.35; }

/* Pagination */
.pagination { gap: 4px; }
.page-link {
    border-radius: 9px !important; border: 1px solid transparent; min-width: 34px; text-align: center;
    color: var(--pm-muted); background: transparent;
    transition: background-color var(--pm-fast) ease, color var(--pm-fast) ease, transform var(--pm-fast) var(--pm-ease);
}
.page-link:hover { background: var(--pm-hover); color: var(--pm-accent); transform: translateY(-1px); }
.page-item.active .page-link { background: var(--pm-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 14px -8px var(--pm-accent); }
.page-item.disabled .page-link { background: transparent; opacity: 0.5; }

/* ---------- Badges ---------- */
.badge { font-weight: 600; letter-spacing: 0.02em; border-radius: 8px; padding: 0.38em 0.65em; }
.badge.rounded-pill { border-radius: 99px; }
[class*="badge-soft-"], [class*="bg-"][class*="-subtle"].badge { border: 1px solid color-mix(in srgb, currentColor 18%, transparent); }

/* ---------- Dropdowns ---------- */
.dropdown-menu {
    border: 1px solid var(--pm-line) !important;
    border-radius: var(--pm-radius) !important;
    box-shadow: var(--pm-shadow-lg) !important;
    padding: 6px;
    background: var(--pm-card);
}
.dropdown-menu.show { animation: pm-drop 180ms var(--pm-ease) both; }
.dropdown-item { border-radius: 9px; padding: 8px 12px; font-weight: 500; transition: background-color var(--pm-fast) ease, color var(--pm-fast) ease, padding var(--pm-fast) var(--pm-ease); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--pm-hover); color: var(--pm-ink); padding-left: 15px; }
.dropdown-item.active, .dropdown-item:active { background: var(--pm-grad); color: #fff; }
.dropdown-divider { border-color: var(--pm-line); margin: 6px 4px; }
.dropdown-header { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--pm-muted); }

/* ---------- Modals & offcanvas ---------- */
.modal-content, .offcanvas { border: 1px solid var(--pm-line); border-radius: 18px; box-shadow: var(--pm-shadow-lg); background: var(--pm-card); }
.offcanvas { border-radius: 0; }
.offcanvas.offcanvas-end { border-top-left-radius: 18px; border-bottom-left-radius: 18px; }
.offcanvas.offcanvas-start { border-top-right-radius: 18px; border-bottom-right-radius: 18px; }
.modal-header { border-bottom: 1px solid var(--pm-line); padding: 1.1rem 1.4rem; }
.modal-footer { border-top: 1px solid var(--pm-line); }
.modal-title { font-weight: 700; letter-spacing: -0.01em; }
.modal.fade .modal-dialog { transform: translateY(12px) scale(0.97); opacity: 0; transition: transform var(--pm-mid) var(--pm-ease), opacity var(--pm-mid) var(--pm-ease); }
.modal.show .modal-dialog { transform: none; opacity: 1; }
.modal-backdrop.show { opacity: 0.4; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.btn-close { border-radius: 8px; transition: background-color var(--pm-fast) ease, transform var(--pm-mid) var(--pm-ease); }
.btn-close:hover { background-color: var(--pm-hover); transform: rotate(90deg); }

/* ---------- Tabs & pills ---------- */
.nav-tabs { border-bottom: 1px solid var(--pm-line); gap: 4px; }
.nav-tabs .nav-link { border: 0; border-radius: 10px 10px 0 0; color: var(--pm-muted); font-weight: 600; position: relative; transition: color var(--pm-fast) ease, background-color var(--pm-fast) ease; }
.nav-tabs .nav-link:hover { color: var(--pm-ink); background: var(--pm-hover); }
.nav-tabs .nav-link.active { color: var(--pm-accent); background: transparent; }
.nav-tabs .nav-link.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--pm-grad); animation: pm-grow 260ms var(--pm-ease) both; }
.nav-pills .nav-link { border-radius: 10px; font-weight: 600; color: var(--pm-muted); transition: background-color var(--pm-fast) ease, color var(--pm-fast) ease; }
.nav-pills .nav-link:hover { background: var(--pm-hover); color: var(--pm-ink); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--pm-grad); color: #fff; box-shadow: 0 6px 14px -8px var(--pm-accent); }

/* ---------- Alerts, toasts, progress ---------- */
.alert { border-radius: var(--pm-radius-sm); border-width: 1px; animation: pm-fade-down 280ms var(--pm-ease) both; }
.toast { border-radius: var(--pm-radius) !important; box-shadow: var(--pm-shadow-lg) !important; border: 1px solid var(--pm-line) !important; backdrop-filter: blur(8px); }
.progress { border-radius: 99px; background: color-mix(in srgb, var(--pm-muted) 14%, transparent); overflow: hidden; }
.progress-bar { border-radius: 99px; transition: width 700ms var(--pm-ease); }

/* Tooltips / popovers */
.tooltip-inner { border-radius: 8px; padding: 6px 10px; font-weight: 500; font-size: 0.78rem; }
.popover { border-radius: var(--pm-radius); border-color: var(--pm-line); box-shadow: var(--pm-shadow-lg); }

/* Avatars */
.avatar-group .avatar-group-item { transition: transform var(--pm-fast) var(--pm-ease); }
.avatar-group .avatar-group-item:hover { transform: translateY(-3px); z-index: 2; }

/* ---------- Footer & floating action button ---------- */
.footer { background: transparent !important; border-top: 1px solid var(--pm-line); color: var(--pm-muted); }
.quick-create-fab, [class*="quick-create"] .btn-floating, .btn-floating {
    background: var(--pm-grad) !important; border: 0 !important;
    box-shadow: 0 12px 28px -10px var(--pm-accent) !important;
    transition: transform var(--pm-mid) var(--pm-ease), box-shadow var(--pm-mid) var(--pm-ease) !important;
}
.quick-create-fab:hover, .btn-floating:hover { transform: translateY(-2px) rotate(90deg); }

/* ---------- Keyframes ---------- */
@keyframes pm-drop { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes pm-fade-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes pm-pop { 0% { transform: scale(0.4); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes pm-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pm-ripple { to { transform: scale(2.6); opacity: 0; } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .pm-reveal { opacity: 1; transform: none; }
}

/* Bootstrap 5.3 "subtle" utilities used by newer views (Velzon only ships bg-soft-*) */
.bg-primary-subtle { background-color: color-mix(in srgb, var(--vz-primary, #405189) 12%, transparent) !important; }
.bg-secondary-subtle { background-color: color-mix(in srgb, var(--vz-secondary, #3577f1) 12%, transparent) !important; }
.bg-success-subtle { background-color: color-mix(in srgb, var(--vz-success, #0ab39c) 12%, transparent) !important; }
.bg-info-subtle { background-color: color-mix(in srgb, var(--vz-info, #299cdb) 12%, transparent) !important; }
.bg-warning-subtle { background-color: color-mix(in srgb, var(--vz-warning, #f7b84b) 14%, transparent) !important; }
.bg-danger-subtle { background-color: color-mix(in srgb, var(--vz-danger, #f06548) 12%, transparent) !important; }
.bg-dark-subtle { background-color: color-mix(in srgb, var(--pm-ink) 10%, transparent) !important; }
.bg-light-subtle { background-color: color-mix(in srgb, var(--pm-muted) 6%, transparent) !important; }
.text-primary-emphasis { color: var(--vz-primary, #405189) !important; }
.text-success-emphasis { color: var(--vz-success, #0ab39c) !important; }
.text-warning-emphasis { color: #b45309 !important; }
.text-danger-emphasis { color: var(--vz-danger, #f06548) !important; }
.text-info-emphasis { color: var(--vz-info, #299cdb) !important; }