/* ============================================================
   posprofile.css  –  Shared PM design system
   Used across: All PM-prefixed list, form, and detail views
   Place in: wwwroot/css/posprofile.css
   Reference via: <link rel="stylesheet" href="~/css/posprofile.css" />
   ============================================================ */

/* ── CSS VARIABLES ── */
:root {
    --pm-bg: #f0f2f7;
    --pm-surface: #ffffff;
    --pm-surface2: #f8f9fc;
    --pm-border: #e4e8f0;
    --pm-border-light: #f0f2f7;
    --pm-text: #1a1d2e;
    --pm-text-2: #5a6082;
    --pm-text-3: #9aa0bb;
    --pm-accent: #5c6ef8;
    --pm-accent-soft: #eef0ff;
    --pm-accent-hover: #4a5ce8;
    --pm-green: #22c55e;
    --pm-green-soft: #f0fdf4;
    --pm-red: #ef4444;
    --pm-red-soft: #fef2f2;
    --pm-amber: #f59e0b;
    --pm-amber-soft: #fffbeb;
    --pm-shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --pm-shadow: 0 4px 16px rgba(0,0,0,.08);
    --pm-shadow-lg: 0 8px 40px rgba(0,0,0,.16);
    --pm-radius: 14px;
    --pm-radius-sm: 8px;
}
/* ══════════════════════════════════════
   BI FORM LAYOUT  (Create / Edit views)
   Used by: Customers, Suppliers, and any
   other bi-tab-based Create/Edit form
══════════════════════════════════════ */

/* ── PAGE HEADER ── */
.bi-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

    .bi-page-header h4 {
        font-size: 19px;
        font-weight: 800;
        color: var(--pm-text);
        margin: 0;
    }

    .bi-page-header small {
        font-size: 12px;
        color: var(--pm-text-3);
    }

/* ── TAB BAR ── */
.bi-tab-bar {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    background: var(--pm-surface2);
    border: 1px solid var(--pm-border);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    padding: 8px 10px 0;
    overflow-x: auto;
    scrollbar-width: none;
}

    .bi-tab-bar::-webkit-scrollbar {
        display: none;
    }

.bi-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--pm-text-3);
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    background: transparent;
    white-space: nowrap;
    transition: all .15s;
    position: relative;
    bottom: -1px;
    user-select: none;
}

    .bi-tab:hover {
        color: var(--pm-text-2);
        background: var(--pm-bg);
    }

    .bi-tab.active {
        color: var(--pm-accent);
        background: var(--pm-surface);
        border-color: var(--pm-border);
        border-bottom-color: var(--pm-surface);
    }

    .bi-tab i {
        font-size: 12px;
        opacity: .7;
    }

    .bi-tab .tab-error-dot {
        width: 7px;
        height: 7px;
        background: var(--pm-red, #e74c3c);
        border-radius: 50%;
        display: none;
        flex-shrink: 0;
    }

    .bi-tab.has-error .tab-error-dot {
        display: inline-block;
    }

/* ── TAB CONTENT WRAPPER ── */
.bi-tab-content-wrap {
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: 0 0 12px 12px;
    padding: 20px;
    margin-bottom: 16px;
    min-height: 300px;
}

.bi-tab-pane {
    display: none;
}

    .bi-tab-pane.active {
        display: block;
    }

/* ── GRIDS ── */
.bi-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.bi-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.bi-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 900px) {
    .bi-grid-3, .bi-grid-4 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .bi-grid-2, .bi-grid-3, .bi-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ── SUB LABEL ── */
.bi-sub-label {
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--pm-text-3);
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--pm-border-light);
}

    .bi-sub-label:first-child {
        margin-top: 0;
    }

/* ── FORM FIELDS (Create/Edit override — bg-tinted inputs) ── */
.bi-tab-content-wrap .pm-form-group {
    margin-bottom: 14px;
}

.bi-tab-content-wrap .pm-form-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--pm-text-2);
    margin-bottom: 5px;
    display: block;
}

.bi-tab-content-wrap .pm-form-input,
.bi-tab-content-wrap .pm-form-textarea {
    width: 100%;
    padding: 8px 12px;
    font-size: 13.5px;
    color: var(--pm-text);
    background: var(--pm-bg);
    border: 1.5px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    transition: border-color .15s;
    font-family: inherit;
    box-sizing: border-box;
}

    .bi-tab-content-wrap .pm-form-input:focus,
    .bi-tab-content-wrap .pm-form-textarea:focus {
        outline: none;
        border-color: var(--pm-accent);
        background: var(--pm-surface);
    }

.bi-tab-content-wrap .pm-form-textarea {
    resize: vertical;
    min-height: 72px;
}

/* Chosen overrides inside bi layout */
.bi-tab-content-wrap .pm-form-group .chosen-container {
    width: 100% !important;
}

.bi-tab-content-wrap .pm-form-group .chosen-single {
    height: 36px !important;
    line-height: 34px !important;
    border: 1.5px solid var(--pm-border) !important;
    border-radius: var(--pm-radius-sm) !important;
    background: var(--pm-bg) !important;
    box-shadow: none !important;
}

/* Inline add button */
.pm-input-with-add {
    display: flex;
    gap: 6px;
    align-items: flex-start;
}

    .pm-input-with-add .chosen-container,
    .pm-input-with-add .form-control {
        flex: 1;
    }

/* ── TAB ERROR DOT ──
   Unified error indicator used on .bi-tab elements.
   Both class names are supported for backward compatibility:
   .bi-tab-dot  (used in BaseItem Edit)
   .tab-error-dot (used in other views)
   ── */
.bi-tab-dot,
.tab-error-dot {
    width: 7px;
    height: 7px;
    background: var(--pm-red);
    border-radius: 50%;
    display: none;
    flex-shrink: 0;
}

.bi-tab.has-error .bi-tab-dot,
.bi-tab.has-error .tab-error-dot {
    display: inline-block;
}

.bi-tab.has-error {
    color: var(--pm-red);
}

/* ══════════════════════════════════════
   BI BASIC LAYOUT  (photo + fields)
   Used by any Create/Edit view with an item photo.
   grid: [80px avatar] [fields area]
══════════════════════════════════════ */
.bi-basic-layout {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 16px;
    align-items: start;
}

/* ══════════════════════════════════════
   BI IMAGE ZONE  (compact photo upload widget)
   Used by: BaseItem Edit, and any other
   Create/Edit form with an item thumbnail.
══════════════════════════════════════ */
.bi-img-zone {
    width: 80px;
    height: 80px;
    border: 2px dashed var(--pm-border);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: all .2s;
    position: relative;
    background: var(--pm-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .bi-img-zone:hover {
        border-color: var(--pm-accent);
        background: var(--pm-accent-soft);
    }

    .bi-img-zone.has-image {
        border-style: solid;
        border-color: var(--pm-border);
    }

    .bi-img-zone img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.bi-img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: var(--pm-text-3);
    text-align: center;
    padding: 6px;
    pointer-events: none;
}

.bi-img-zone:hover .bi-img-placeholder {
    color: var(--pm-accent);
}

.bi-img-placeholder i {
    font-size: 20px;
}

.bi-img-placeholder span {
    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
}

.bi-img-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s;
}

.bi-img-zone.has-image:hover .bi-img-overlay {
    opacity: 1;
}

.bi-img-overlay-inner {
    color: #fff;
    text-align: center;
    font-size: 11px;
}

    .bi-img-overlay-inner i {
        font-size: 16px;
        display: block;
        margin-bottom: 2px;
    }

.bi-img-remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: rgba(239,68,68,.9);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s;
    z-index: 2;
}

.bi-img-zone.has-image:hover .bi-img-remove-btn {
    opacity: 1;
}

.bi-hidden-file {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/* ══════════════════════════════════════
   BI TOGGLE CHIPS  (boolean checkbox grid)
   Used by: BaseItem Settings tab, and any
   form that needs a grid of on/off chips.
══════════════════════════════════════ */
.bi-toggle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

@media (max-width: 768px) {
    .bi-toggle-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.bi-toggle-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    background: var(--pm-bg);
    border: 1.5px solid var(--pm-border);
    border-radius: 10px;
    transition: border-color .15s;
    cursor: pointer;
}

    .bi-toggle-chip:has(input:checked) {
        border-color: var(--pm-accent);
        background: var(--pm-accent-soft);
    }

.bi-toggle-chip-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--pm-text-2);
    line-height: 1.3;
    user-select: none;
}

.bi-toggle-chip:has(input:checked) .bi-toggle-chip-label {
    color: var(--pm-accent);
}

/* ══════════════════════════════════════
   BI SELECT GROUP  (select + inline add button)
   Used by: any field that needs a dropdown
   paired with a quick-add [+] icon button.
══════════════════════════════════════ */
.bi-select-group {
    display: flex;
    gap: 6px;
}

    .bi-select-group select {
        flex: 1;
    }

.bi-add-btn {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--pm-radius-sm);
    border: 1.5px solid var(--pm-border);
    background: var(--pm-bg);
    color: var(--pm-text-2);
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}

    .bi-add-btn:hover {
        border-color: var(--pm-accent);
        color: var(--pm-accent);
        background: var(--pm-accent-soft);
    }

/* ══════════════════════════════════════
   BI TABLE  (compact inner/child table)
   Lighter than .pm-child-table — no outer
   border per cell, just bottom separators.
   Used by: UoM, Barcodes, Reorder tables
   inside tab panes.
══════════════════════════════════════ */
.bi-table {
    width: 100%;
    font-size: 13px;
    border-collapse: collapse;
}

    .bi-table th {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--pm-text-3);
        padding: 8px 10px;
        border-bottom: 2px solid var(--pm-border);
        background: var(--pm-surface2);
    }

    .bi-table td {
        padding: 8px 10px;
        border-bottom: 1px solid var(--pm-border-light);
        vertical-align: middle;
    }

    .bi-table tr:last-child td {
        border-bottom: none;
    }

/* ══════════════════════════════════════
   FILTER BAR
══════════════════════════════════════ */
.pm-filter-bar {
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    padding: 16px 18px;
    margin-bottom: 16px;
    display: none;
}

    .pm-filter-bar.open {
        display: block;
    }

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.pm-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: var(--pm-radius-sm);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .15s;
    font-family: inherit;
    text-decoration: none;
    line-height: 1.4;
}

.pm-btn-primary {
    background: var(--pm-accent);
    color: #fff;
}

    .pm-btn-primary:hover {
        background: var(--pm-accent-hover);
        color: #fff;
    }

.pm-btn-success {
    background: #16a34a;
    color: #fff;
}

    .pm-btn-success:hover {
        background: #15803d;
        color: #fff;
    }

.pm-btn-outline {
    background: transparent;
    color: var(--pm-text-2);
    border: 1.5px solid var(--pm-border);
}

    .pm-btn-outline:hover {
        border-color: var(--pm-accent);
        color: var(--pm-accent);
        background: var(--pm-accent-soft);
    }

.pm-btn-danger {
    background: var(--pm-red);
    color: #fff;
}

    .pm-btn-danger:hover {
        background: #dc2626;
        color: #fff;
    }

.pm-btn-ghost {
    background: transparent;
    color: var(--pm-text-3);
    border: none;
}

    .pm-btn-ghost:hover {
        color: var(--pm-text);
        background: var(--pm-bg);
    }

.pm-btn-sm {
    padding: 6px 12px;
    font-size: 12.5px;
}

/* ══════════════════════════════════════
   FORM CARDS  (Create / Edit / Details)
══════════════════════════════════════ */
.pm-form-card {
    background: var(--pm-surface);
    border-radius: var(--pm-radius);
    border: 1px solid var(--pm-border);
    margin-bottom: 20px;
    overflow: visible;
}

.pm-form-card-header {
    padding: 16px 22px;
    border-bottom: 1px solid var(--pm-border);
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--pm-surface2);
}

.pm-section-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

    .pm-section-icon.blue {
        background: var(--pm-accent-soft);
        color: var(--pm-accent);
    }

    .pm-section-icon.green {
        background: var(--pm-green-soft);
        color: var(--pm-green);
    }

    .pm-section-icon.amber {
        background: var(--pm-amber-soft);
        color: var(--pm-amber);
    }

.pm-section-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--pm-text);
}

.pm-section-sub {
    font-size: 12px;
    color: var(--pm-text-3);
    margin-top: 1px;
}

.pm-form-card-body {
    padding: 20px 22px;
}

/* ── COMPACT CARD overrides (tighter spacing inside tab panes) ── */
.bi-tab-content-wrap .pm-form-card {
    margin-bottom: 16px;
    border-radius: 10px;
}

    .bi-tab-content-wrap .pm-form-card:last-child {
        margin-bottom: 0;
    }

.bi-tab-content-wrap .pm-form-card-header {
    padding: 10px 14px;
}

.bi-tab-content-wrap .pm-form-card-body {
    padding: 14px 16px;
}

.bi-tab-content-wrap .pm-section-icon {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

.bi-tab-content-wrap .pm-section-title {
    font-size: 13px;
}

.bi-tab-content-wrap .pm-section-sub {
    font-size: 11px;
}

/* ── FORM FIELDS ── */
.pm-form-group {
    margin-bottom: 16px;
}

.pm-form-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--pm-text-2);
    margin-bottom: 6px;
}

.pm-form-input,
.pm-form-input.form-control {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    font-size: 13.5px;
    color: var(--pm-text);
    font-family: inherit;
    background: var(--pm-surface);
    outline: none;
    transition: border-color .15s;
    box-shadow: none;
}

    .pm-form-input:focus,
    .pm-form-input.form-control:focus {
        border-color: var(--pm-accent);
        box-shadow: 0 0 0 3px rgba(92,110,248,.1);
    }

/* ── FORM VALIDATION ── */
.pm-form-error {
    font-size: 11px;
    color: var(--pm-red);
    display: none;
    margin-top: 3px;
}

    .pm-form-error.show {
        display: block;
    }

.pm-form-input.is-invalid {
    border-color: var(--pm-red);
}

span.text-danger[data-valmsg-for] {
    font-size: 11px;
    color: var(--pm-red);
}

/* Read-only (Details view) */
.pm-readonly-input {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--pm-border-light);
    border-radius: var(--pm-radius-sm);
    font-size: 13.5px;
    color: var(--pm-text);
    background: var(--pm-bg);
    font-family: inherit;
}

/* Chosen override */
.pm-form-card .chosen-container {
    width: 100% !important;
}

.pm-form-card .chosen-single {
    border: 1.5px solid var(--pm-border) !important;
    border-radius: var(--pm-radius-sm) !important;
    height: auto !important;
    padding: 9px 12px !important;
    font-size: 13.5px !important;
    background: var(--pm-surface) !important;
    box-shadow: none !important;
}

/* ══════════════════════════════════════
   TOGGLE SWITCH ROW  (Create / Edit)
   FIX: label and switch sit close together.
   label fills remaining space, switch pins right — but
   there is NO space-between gap across the full row width.
══════════════════════════════════════ */
.pm-toggle-row {
    display: flex;
    align-items: center;
    gap: 14px; /* tight gap between label and switch */
    padding: 10px 14px;
    background: var(--pm-surface2);
    border: 1.5px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    margin-bottom: 10px;
}

    .pm-toggle-row .pm-toggle-label {
        flex: 1; /* label expands; switch stays at natural size */
        font-size: 13.5px;
        font-weight: 600;
    }

    .pm-toggle-row .pm-toggle-desc {
        font-size: 11.5px;
        color: var(--pm-text-3);
        margin-top: 1px;
    }

/* The toggle widget itself */
.pm-toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
    display: block;
}
    /* The real checkbox is invisible — hidden by dimension, NOT display:none,
   so it stays in the document flow for ASP.NET model-binding */
    .pm-toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

.pm-toggle-track {
    position: absolute;
    inset: 0;
    background: var(--pm-border);
    border-radius: 999px;
    transition: background .2s;
}

.pm-toggle-switch input:checked + .pm-toggle-track {
    background: var(--pm-accent);
}

.pm-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: var(--pm-shadow-sm);
    transition: transform .2s;
    pointer-events: none;
}

.pm-toggle-switch input:checked ~ .pm-toggle-thumb {
    transform: translateX(20px);
}

/* ══════════════════════════════════════
   INDICATOR ROW  (Details — read-only)
   FIX: same gap approach as toggle row.
══════════════════════════════════════ */
.pm-indicator-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: var(--pm-surface2);
    border: 1.5px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    margin-bottom: 10px;
}

    .pm-indicator-row .pm-toggle-label {
        flex: 1;
        font-size: 13.5px;
        font-weight: 600;
    }

.pm-toggle-indicator {
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0; /* never grows; never pushes label away */
}

    .pm-toggle-indicator.on {
        background: var(--pm-green-soft);
        color: var(--pm-green);
    }

    .pm-toggle-indicator.off {
        background: var(--pm-red-soft);
        color: var(--pm-red);
    }

/* ══════════════════════════════════════
   CHILD TABLES  (Payment Methods / Users / Printers)
══════════════════════════════════════ */
.pm-child-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

    .pm-child-table thead th {
        background: var(--pm-bg);
        padding: 8px 12px;
        font-weight: 700;
        color: var(--pm-text-2);
        border: 1px solid var(--pm-border);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .4px;
    }

    .pm-child-table tbody td {
        padding: 8px 12px;
        border: 1px solid var(--pm-border);
        vertical-align: middle;
    }

    .pm-child-table tbody tr:hover {
        background: var(--pm-bg);
    }

    /* Checkbox column — centered, fixed width */
    .pm-child-table td.pm-check-td {
        text-align: center;
        width: 72px;
    }

    .pm-child-table th.pm-check-th {
        text-align: center;
        width: 72px;
    }

/*  Table checkboxes — always visible, styled.
    NOTE: Do NOT use .form-check-input here;
    use .pm-table-check so they are never accidentally hidden. */
.pm-table-check {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: var(--pm-accent);
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

/* ── ADD ROW / REMOVE BUTTONS ── */
.pm-add-row-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 7px 14px;
    background: var(--pm-accent-soft);
    color: var(--pm-accent);
    border: 1.5px dashed var(--pm-accent);
    border-radius: var(--pm-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}

    .pm-add-row-btn:hover {
        background: var(--pm-accent);
        color: #fff;
        border-style: solid;
    }

.pm-remove-btn {
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--pm-red-soft);
    color: var(--pm-red);
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all .15s;
}

    .pm-remove-btn:hover {
        background: var(--pm-red);
        color: #fff;
    }

/* ══════════════════════════════════════
   BADGES  (Details read-only table cells)
══════════════════════════════════════ */
.pm-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
}

.pm-badge-green {
    background: var(--pm-green-soft);
    color: var(--pm-green);
}

.pm-badge-grey {
    background: var(--pm-bg);
    color: var(--pm-text-3);
}

/* ══════════════════════════════════════
   INDEX PAGE — STATS BAR
══════════════════════════════════════ */
.pm-stats-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.pm-stat-card {
    background: var(--pm-surface);
    border-radius: var(--pm-radius);
    padding: 16px 20px;
    border: 1px solid var(--pm-border);
    display: flex;
    align-items: center;
    gap: 14px;
}

.pm-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

    .pm-stat-icon.blue {
        background: var(--pm-accent-soft);
        color: var(--pm-accent);
    }

    .pm-stat-icon.green {
        background: var(--pm-green-soft);
        color: var(--pm-green);
    }

    .pm-stat-icon.amber {
        background: var(--pm-amber-soft);
        color: var(--pm-amber);
    }

.pm-stat-value {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}

.pm-stat-label {
    font-size: 12px;
    color: var(--pm-text-3);
    margin-top: 3px;
    font-weight: 500;
}

/* ── TOOLBAR / SEARCH ── */
.pm-toolbar {
    background: var(--pm-surface);
    border-radius: var(--pm-radius);
    border: 1px solid var(--pm-border);
    padding: 14px 18px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pm-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--pm-bg);
    border: 1.5px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    padding: 8px 14px;
    flex: 1;
    min-width: 200px;
    transition: border-color .15s;
}

    .pm-search-box:focus-within {
        border-color: var(--pm-accent);
    }

    .pm-search-box i {
        color: var(--pm-text-3);
        font-size: 13px;
    }

    .pm-search-box input {
        border: none;
        background: transparent;
        outline: none;
        font-size: 13.5px;
        color: var(--pm-text);
        width: 100%;
    }

        .pm-search-box input::placeholder {
            color: var(--pm-text-3);
        }

/* ── PROFILE GRID ── */
.pm-profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.pm-profile-card {
    background: var(--pm-surface);
    border-radius: var(--pm-radius);
    border: 1.5px solid var(--pm-border);
    overflow: hidden;
    transition: all .2s;
}

    .pm-profile-card:hover {
        box-shadow: var(--pm-shadow);
        border-color: #d0d4e8;
        transform: translateY(-2px);
    }

.pm-profile-card-header {
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--pm-border-light);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.pm-profile-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--pm-accent-soft);
    color: var(--pm-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.pm-profile-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--pm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    padding-top: 6px;
}

.pm-profile-card-body {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pm-profile-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--pm-text-2);
}

    .pm-profile-meta-row i {
        width: 16px;
        text-align: center;
        color: var(--pm-text-3);
        font-size: 11px;
        flex-shrink: 0;
    }

.pm-profile-meta-value {
    font-weight: 600;
    color: var(--pm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-profile-meta-empty {
    color: var(--pm-text-3);
    font-style: italic;
}

.pm-profile-card-footer {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    border-top: 1px solid var(--pm-border-light);
    background: var(--pm-surface2);
}

.pm-card-btn {
    flex: 1;
    padding: 7px 0;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all .15s;
    text-decoration: none;
}

.pm-card-btn-edit {
    background: var(--pm-accent-soft);
    color: var(--pm-accent);
}

    .pm-card-btn-edit:hover {
        background: var(--pm-accent);
        color: #fff;
    }

.pm-card-btn-view {
    background: var(--pm-amber-soft);
    color: var(--pm-amber);
}

    .pm-card-btn-view:hover {
        background: var(--pm-amber);
        color: #fff;
    }

.pm-card-btn-delete {
    background: var(--pm-red-soft);
    color: var(--pm-red);
}

    .pm-card-btn-delete:hover {
        background: var(--pm-red);
        color: #fff;
    }

/* Add-new dashed card */
.pm-profile-card-add {
    background: var(--pm-surface);
    border-radius: var(--pm-radius);
    border: 2px dashed var(--pm-border);
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all .2s;
    color: var(--pm-text-3);
    text-decoration: none;
}

    .pm-profile-card-add:hover {
        border-color: var(--pm-accent);
        color: var(--pm-accent);
        background: var(--pm-accent-soft);
        transform: translateY(-2px);
    }

.pm-add-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--pm-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: background .15s;
}

.pm-profile-card-add:hover .pm-add-card-icon {
    background: rgba(92,110,248,.15);
}

/* ── CONFIRM DIALOG ── */
.pm-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,18,35,.55);
    z-index: 1070;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

    .pm-confirm-overlay.open {
        opacity: 1;
        pointer-events: all;
    }

.pm-confirm-box {
    background: var(--pm-surface);
    border-radius: 16px;
    box-shadow: var(--pm-shadow-lg);
    padding: 28px;
    max-width: 380px;
    width: 100%;
    text-align: center;
}

.pm-confirm-icon {
    font-size: 36px;
    color: var(--pm-red);
    margin-bottom: 12px;
}

.pm-confirm-title {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 6px;
}

.pm-confirm-desc {
    font-size: 13.5px;
    color: var(--pm-text-3);
    margin-bottom: 20px;
}

.pm-confirm-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* ── EMPTY STATE ── */
.pm-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--pm-text-3);
}

.pm-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: .4;
}

.pm-empty-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--pm-text-2);
    margin-bottom: 6px;
}

.pm-empty-sub {
    font-size: 13.5px;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 768px) {
    .pm-stats-bar {
        grid-template-columns: 1fr 1fr;
    }

    .pm-profiles-grid {
        grid-template-columns: 1fr;
    }

    .pm-page-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ══════════════════════════════════════
   PAGE HEADER  (Index views)
══════════════════════════════════════ */
.pm-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.pm-page-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--pm-text);
}

.pm-page-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* ══════════════════════════════════════
   ALERT BANNER
══════════════════════════════════════ */
.pm-alert {
    padding: 10px 16px;
    border-radius: var(--pm-radius-sm);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13.5px;
    gap: 10px;
}

.pm-alert-info {
    background: var(--pm-accent-soft);
    border: 1px solid rgba(92,110,248,.25);
    color: var(--pm-text-2);
}

.pm-alert-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--pm-text-3);
    font-size: 16px;
    line-height: 1;
    padding: 0;
}

/* ══════════════════════════════════════
   LIST TABLE WRAPPER  (.pm-list-wrap / .pm-table-card)
══════════════════════════════════════ */
.pm-list-wrap,
.pm-table-card {
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    overflow: hidden;
}

/* ══════════════════════════════════════
   LIST / INDEX TABLE  (.pm-list-table / .pm-table)
══════════════════════════════════════ */
.pm-list-table,
.pm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

    .pm-list-table thead th,
    .pm-table thead th {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--pm-text-2);
        padding: 10px 14px;
        border-bottom: 1px solid var(--pm-border);
        background: var(--pm-surface2);
        white-space: nowrap;
    }

    .pm-list-table thead th,
    .pm-table thead th {
        color: var(--pm-text-3);
        border-bottom-width: 2px;
    }

    .pm-list-table tbody td,
    .pm-table tbody td {
        padding: 10px 14px;
        border-bottom: 1px solid var(--pm-border-light);
        vertical-align: middle;
        color: var(--pm-text);
    }

    .pm-list-table tbody tr:hover,
    .pm-table tbody tr:hover {
        background: var(--pm-bg);
    }

    .pm-list-table tbody tr:last-child td,
    .pm-table tbody tr:last-child td {
        border-bottom: none;
    }

    /* Sortable column links inside table headers */
    .pm-table thead th a {
        color: var(--pm-text-2);
        text-decoration: none;
    }

        .pm-table thead th a:hover {
            color: var(--pm-accent);
        }

/* ── TABLE FOOTER ── */
.pm-table-footer {
    padding: 10px 16px;
    font-size: 12px;
    color: var(--pm-text-3);
    border-top: 1px solid var(--pm-border-light);
    background: var(--pm-surface2);
}

/* ══════════════════════════════════════
   ROW ACTIONS  (edit / activate / deactivate buttons)
══════════════════════════════════════ */
.pm-row-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
}

.pm-row-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    transition: all .15s;
}

.pm-row-btn-edit {
    color: var(--pm-accent);
    background: var(--pm-accent-soft);
    border-color: rgba(92,110,248,.25);
}

    .pm-row-btn-edit:hover {
        background: var(--pm-accent);
        color: #fff;
        border-color: var(--pm-accent);
        text-decoration: none;
    }

.pm-row-btn-deactivate {
    color: #c0392b;
    background: #fdf0ee;
    border-color: rgba(192,57,43,.2);
}

    .pm-row-btn-deactivate:hover {
        background: #c0392b;
        color: #fff;
        border-color: #c0392b;
        text-decoration: none;
    }

.pm-row-btn-activate {
    color: #27ae60;
    background: #edfaf3;
    border-color: rgba(39,174,96,.2);
}

    .pm-row-btn-activate:hover {
        background: #27ae60;
        color: #fff;
        border-color: #27ae60;
        text-decoration: none;
    }

/* Details / view variant — amber tone */
.pm-row-btn-details {
    color: var(--pm-amber);
    background: var(--pm-amber-soft);
    border-color: rgba(245,158,11,.25);
}

    .pm-row-btn-details:hover {
        background: var(--pm-amber);
        color: #fff;
        border-color: var(--pm-amber);
        text-decoration: none;
    }

/* ══════════════════════════════════════
   BULK ACTION BAR
══════════════════════════════════════ */
.pm-bulk-bar {
    background: var(--pm-accent-soft);
    border: 1.5px solid var(--pm-accent);
    border-radius: var(--pm-radius-sm);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.pm-bulk-count {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--pm-accent);
}

.pm-bulk-clear {
    background: none;
    border: none;
    color: var(--pm-red);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

/* ══════════════════════════════════════
   FILTER LABEL  (inside filter bar rows)
══════════════════════════════════════ */
.pm-filter-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--pm-text-2);
    margin-bottom: 4px;
    display: block;
}

/* Form check (checkbox row) */
.pm-form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--pm-bg);
    border: 1.5px solid var(--pm-border-light);
    border-radius: var(--pm-radius-sm);
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pm-text-2);
}

    .pm-form-check input[type="checkbox"] {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: var(--pm-accent);
    }

/* ── SAVE BAR ── */
.pm-save-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    margin-bottom: 16px;
    box-shadow: var(--pm-shadow-sm);
}

/* ── VALIDATION SUMMARY ── */
.pm-validation-summary {
    background: #fff5f5;
    border: 1.5px solid #fca5a5;
    border-radius: var(--pm-radius-sm);
    padding: 10px 14px;
    font-size: 13px;
    color: #b91c1c;
    margin-bottom: 14px;
}
/* ══════════════════════════════════════
   STATUS BADGE  (list views — Sales Quotations,
   Sales Orders, Purchase Orders, Invoices, etc.)
══════════════════════════════════════ */
.pm-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 20px;
    padding: 3px 11px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.pm-status-open {
    background: var(--pm-accent-soft);
    color: var(--pm-accent);
}

.pm-status-ordered {
    background: var(--pm-green-soft);
    color: var(--pm-green);
}

.pm-status-cancelled {
    background: var(--pm-red-soft);
    color: var(--pm-red);
}

.pm-status-expired {
    background: var(--pm-amber-soft);
    color: var(--pm-amber);
}

.pm-status-draft {
    background: var(--pm-bg);
    color: var(--pm-text-3);
}

.pm-status-submitted {
    background: var(--pm-green-soft);
    color: var(--pm-green);
}

.pm-status-closed {
    background: var(--pm-bg);
    color: var(--pm-text-3);
}

.pm-status-overdue {
    background: var(--pm-red-soft);
    color: var(--pm-red);
}

.pm-status-partial {
    background: var(--pm-amber-soft);
    color: var(--pm-amber);
}

/* ══════════════════════════════════════
   FILTER BAR — form-group spacing fix
   Removes redundant margin-bottom since
   the grid gap already handles row spacing
══════════════════════════════════════ */
.pm-filter-bar .pm-form-group {
    margin-bottom: 0;
}

/* ══════════════════════════════════════
   PAGINATION BAR  (X.PagedList paginated views)
══════════════════════════════════════ */
.pm-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    margin-top: 16px;
    flex-wrap: wrap;
}

.pm-pagination-info {
    font-size: 12.5px;
    color: var(--pm-text-3);
}

.pm-pagination-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pm-pagesize-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--pm-text-2);
}

.pm-pagesize-input {
    width: 60px;
    padding: 5px 8px;
    border: 1.5px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    font-size: 12.5px;
    font-family: inherit;
    color: var(--pm-text);
    background: var(--pm-surface);
    outline: none;
    transition: border-color .15s;
    text-align: center;
}

    .pm-pagesize-input:focus {
        border-color: var(--pm-accent);
    }

/* ── X.PagedList pager — PM style overrides ── */
.pagination {
    margin: 0;
    gap: 4px;
    display: flex;
    flex-wrap: wrap;
}

    .pagination .page-item .page-link {
        border: 1.5px solid var(--pm-border);
        border-radius: var(--pm-radius-sm) !important;
        font-size: 12.5px;
        color: var(--pm-text-2);
        padding: 5px 11px;
        line-height: 1.4;
    }

    .pagination .page-item.active .page-link {
        background: var(--pm-accent);
        border-color: var(--pm-accent);
        color: #fff;
    }

    .pagination .page-item .page-link:hover {
        border-color: var(--pm-accent);
        color: var(--pm-accent);
        background: var(--pm-accent-soft);
    }
/* ══════════════════════════════════════
   ALERT BANNER — danger variant
   (Reusable; add to posprofile.css)
══════════════════════════════════════ */
.pm-alert-danger {
    background: var(--pm-red-soft);
    border: 1px solid rgba(239,68,68,.3);
    color: #b91c1c;
}

/* ══════════════════════════════════════
   INPUT PREFIX ICON  (e.g. globe before URL field)
   Reusable: pair with a .pm-form-input whose
   border-radius left side is zeroed out.
   Usage:
     <span class="pm-input-prefix"><i class="fas fa-globe"></i></span>
     <input class="pm-form-input" style="border-radius:0 8px 8px 0;" />
══════════════════════════════════════ */
.pm-input-prefix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    background: var(--pm-surface2);
    border: 1.5px solid var(--pm-border);
    border-right: none;
    border-radius: var(--pm-radius-sm) 0 0 var(--pm-radius-sm);
    color: var(--pm-text-3);
    font-size: 13px;
    height: 38px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════
   PASSWORD REVEAL WRAPPER
   Positions the toggle eye button
   inside the input. Usage:
     <div class="pm-input-reveal">
       <input type="password" class="pm-form-input" />
       <button class="pm-reveal-btn" onclick="...">
         <i class="fas fa-eye"></i>
       </button>
     </div>
══════════════════════════════════════ */
.pm-input-reveal {
    position: relative;
    display: flex;
    align-items: center;
}

    .pm-input-reveal .pm-form-input {
        padding-right: 40px;
    }

.pm-reveal-btn {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: var(--pm-text-3);
    cursor: pointer;
    padding: 0;
    font-size: 13px;
    line-height: 1;
    transition: color .15s;
}

    .pm-reveal-btn:hover {
        color: var(--pm-accent);
    }

/* ══════════════════════════════════════
   DETAIL FIELD GROUP  (Details / read-only views)
   Reusable across any Details view.
   Usage:
     <div class="pm-detail-group">
       <span class="pm-detail-label">Field Label</span>
       <span class="pm-detail-value">Field Value</span>
     </div>
   Pair with .bi-grid-2, .bi-grid-3, .bi-grid-4
   for multi-column layouts.
══════════════════════════════════════ */
.pm-detail-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    background: var(--pm-bg);
    border: 1.5px solid var(--pm-border-light);
    border-radius: var(--pm-radius-sm);
}

.pm-detail-label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--pm-text-3);
    display: block;
}

.pm-detail-value {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--pm-text);
    display: block;
    word-break: break-word;
}

/* Empty / null placeholder */
.pm-detail-empty {
    color: var(--pm-text-3);
    font-style: italic;
    font-size: 13.5px;
}

/* Ghost button — back / cancel navigation */
.pm-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--pm-radius-sm);
    border: 1.5px solid var(--pm-border);
    background: var(--pm-surface);
    color: var(--pm-text-2);
    cursor: pointer;
    text-decoration: none;
    transition: all .15s;
    white-space: nowrap;
}

    .pm-btn-ghost:hover {
        background: var(--pm-bg);
        border-color: var(--pm-text-3);
        color: var(--pm-text);
        text-decoration: none;
    }
/* ══════════════════════════════════════
   PM ACCORDION  (collapsible module/section panels)
   Reusable across: Role Permissions, and any
   view that needs collapsible grouped sections.
   Usage:
     <div class="pm-accordion [open]">
       <div class="pm-accordion-header" onclick="pmToggleAccordion(this)">
         <div class="pm-accordion-title"><i ...></i> Title</div>
         <i class="fas fa-chevron-down pm-accordion-caret"></i>
       </div>
       <div class="pm-accordion-body"> ... </div>
     </div>
══════════════════════════════════════ */
.pm-accordion {
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    overflow: visible;
}

.pm-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--pm-surface2);
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--pm-border);
    transition: background .15s;
    border-radius: calc(var(--pm-radius-sm) - 1px) calc(var(--pm-radius-sm) - 1px) 0 0;
}

    .pm-accordion-header:hover {
        background: var(--pm-bg);
    }

.pm-accordion-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    color: var(--pm-text);
}

.pm-accordion-caret {
    font-size: 11px;
    color: var(--pm-text-3);
    transition: transform .2s;
    flex-shrink: 0;
}

.pm-accordion-body {
    padding: 16px;
    display: none; /* toggled by JS via pmToggleAccordion() */
    border-top: 1px solid var(--pm-border);
}

.pm-accordion.open .pm-accordion-body {
    display: block;
}

    .pm-accordion.open .pm-accordion-body:last-child {
        /* clip the bottom corners */
        border-radius: 0 0 calc(var(--pm-radius-sm) - 1px) calc(var(--pm-radius-sm) - 1px);
    }

/* ── Inline "All" checkbox label (used inside accordion header) ── */
.pm-check-all-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pm-text-3);
    cursor: pointer;
    margin: 0;
    white-space: nowrap;
}

    .pm-check-all-label input[type="checkbox"] {
        /* Reset Bootstrap .form-check-input overrides */
        position: static !important;
        float: none !important;
        margin: 0 !important;
        width: 14px;
        height: 14px;
        cursor: pointer;
        accent-color: var(--pm-accent);
        flex-shrink: 0;
    }

/* ══════════════════════════════════════
   PM DOCTYPE ROW  (inside accordion body)
   Groups a doc-type title + its claim chips.
══════════════════════════════════════ */
.pm-doctype-row {
    padding: 12px 0;
    border-bottom: 1px solid var(--pm-border-light);
}

    .pm-doctype-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .pm-doctype-row:first-child {
        padding-top: 0;
    }

.pm-doctype-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.pm-doctype-title {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--pm-text-2);
}

/* ══════════════════════════════════════
   PM CLAIM GRID  (checkbox chip grid)
   Responsive grid of selectable permission chips.
   Used by: Role Permissions Details view.
══════════════════════════════════════ */
.pm-claim-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

@media (max-width: 1100px) {
    .pm-claim-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .pm-claim-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .pm-claim-grid {
        grid-template-columns: 1fr;
    }
}

.pm-claim-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--pm-bg);
    border: 1.5px solid var(--pm-border-light);
    border-radius: var(--pm-radius-sm);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pm-text-2);
    transition: border-color .15s, background .15s;
    margin: 0;
    line-height: 1.3;
}

    .pm-claim-chip:hover {
        border-color: var(--pm-accent);
        background: var(--pm-accent-soft);
        color: var(--pm-accent);
    }

    .pm-claim-chip:has(input:checked) {
        border-color: var(--pm-accent);
        background: var(--pm-accent-soft);
        color: var(--pm-accent);
    }

    .pm-claim-chip input[type="checkbox"] {
        /* Reset Bootstrap .form-check-input overrides */
        position: static !important;
        float: none !important;
        margin: 0 !important;
        width: 14px;
        height: 14px;
        cursor: pointer;
        accent-color: var(--pm-accent);
        flex-shrink: 0;
    }
/* ══════════════════════════════════════
   PM ACTION BAR  (form save/cancel footer)
   Reusable bottom action row for Create/Edit
   forms — sits below the form card(s).
   Used by: any Create/Edit view.
══════════════════════════════════════ */
.pm-action-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0 4px;
    border-top: 1px solid var(--pm-border);
    margin-top: 4px;
}

/* ══════════════════════════════════════
   DOCUMENT STATUS BADGES
   Reusable across all Details views for
   document lifecycle status display.
   Usage: <span class="pm-status-badge pm-status-open">Open</span>
══════════════════════════════════════ */
.pm-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .3px;
    vertical-align: middle;
}

    .pm-status-badge::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        flex-shrink: 0;
        opacity: .7;
    }

.pm-status-draft {
    background: var(--pm-bg);
    color: var(--pm-text-3);
}

.pm-status-open {
    background: var(--pm-accent-soft);
    color: var(--pm-accent);
}

.pm-status-ordered {
    background: var(--pm-green-soft);
    color: var(--pm-green);
}

.pm-status-lost {
    background: var(--pm-red-soft);
    color: var(--pm-red);
}

.pm-status-cancelled {
    background: var(--pm-amber-soft);
    color: var(--pm-amber);
}

.pm-status-closed {
    background: var(--pm-bg);
    color: var(--pm-text-2);
}
/* ── /DOCUMENT STATUS BADGES ── */

/* ══════════════════════════════════════════════════════════════
   ADDITIONS TO posprofile.css
   Append these rules to the end of posprofile.css
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════
   PM DOCUMENT META STRIP
   Reusable horizontal strip that shows key
   document metadata (dates, series, user)
   below the page header on any Details view.
   Usage:
     <div class="pm-doc-meta-strip">
       <div class="pm-doc-meta-item">
         <i class="fas fa-calendar-alt"></i>
         <span>Label:</span>
         <strong>Value</strong>
       </div>
       <span class="pm-doc-meta-sep">|</span>
       ...
     </div>
══════════════════════════════════════ */
.pm-doc-meta-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 10px 14px;
    background: var(--pm-surface2);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    margin-bottom: 16px;
    font-size: 12.5px;
}

.pm-doc-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--pm-text-2);
}

    .pm-doc-meta-item i {
        color: var(--pm-text-3);
        font-size: 11px;
    }

    .pm-doc-meta-item strong {
        color: var(--pm-text);
        font-weight: 700;
    }

.pm-doc-meta-sep {
    color: var(--pm-border);
    font-size: 16px;
    line-height: 1;
}
/* ══════════════════════════════════════
   PM MODAL SHELL  (reusable modal chrome)
   Enhances Bootstrap modals with PM design
   tokens. Use pm- prefix classes on modal
   structural elements.

   Usage:
     <div class="modal-content pm-modal-content">
       <div class="modal-header pm-modal-header">
         <div class="pm-modal-title-wrap">
           <div class="pm-modal-icon [blue|green|amber]"><i ...></i></div>
           <h5 class="modal-title">Title</h5>
         </div>
         <button class="pm-modal-close" data-dismiss="modal"><i class="fas fa-times"></i></button>
       </div>
       <div class="modal-body pm-modal-body"> ... </div>
       <div class="modal-footer pm-modal-footer"> ... </div>
     </div>
══════════════════════════════════════ */
.pm-modal-content {
    border: none;
    border-radius: var(--pm-radius);
    box-shadow: var(--pm-shadow-lg);
    /*overflow: hidden;*/
}

.pm-modal-header {
    background: var(--pm-surface2);
    border-bottom: 1px solid var(--pm-border);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pm-modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .pm-modal-title-wrap .modal-title {
        font-size: 15px;
        font-weight: 800;
        color: var(--pm-text);
        margin: 0;
    }

.pm-modal-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--pm-accent-soft);
    color: var(--pm-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

    .pm-modal-icon.green {
        background: var(--pm-green-soft);
        color: var(--pm-green);
    }

    .pm-modal-icon.amber {
        background: var(--pm-amber-soft);
        color: var(--pm-amber);
    }

    .pm-modal-icon.red {
        background: var(--pm-red-soft);
        color: var(--pm-red);
    }

.pm-modal-close {
    background: none;
    border: none;
    color: var(--pm-text-3);
    font-size: 14px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: all .15s;
    line-height: 1;
}

    .pm-modal-close:hover {
        background: var(--pm-bg);
        color: var(--pm-text);
    }

.pm-modal-body {
    padding: 18px;
    background: var(--pm-surface);
}

    /* Chosen overrides inside pm-modal-body */
    .pm-modal-body .chosen-container {
        width: 100% !important;
    }

    .pm-modal-body .chosen-single {
        height: 36px !important;
        line-height: 34px !important;
        border: 1.5px solid var(--pm-border) !important;
        border-radius: var(--pm-radius-sm) !important;
        background: var(--pm-surface) !important;
        box-shadow: none !important;
    }

.pm-modal-footer {
    background: var(--pm-surface2);
    border-top: 1px solid var(--pm-border);
    padding: 12px 18px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ── Modal sub-section label (inside modal body) ── */
.pm-modal-section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--pm-text-3);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--pm-border-light);
}

/* ══════════════════════════════════════
   PM DROPDOWN MENU  (paired with .pm-btn)
   Reusable styled dropdown shell for any
   page-header action menu (View reports,
   export options, etc.)
   Usage:
     <div class="dropdown">
       <button class="pm-btn pm-btn-outline dropdown-toggle" data-toggle="dropdown">...</button>
       <div class="dropdown-menu pm-dropdown-menu">
         <a class="pm-dropdown-item" href="..."><i ...></i> Label</a>
       </div>
     </div>
══════════════════════════════════════ */
.pm-dropdown-menu {
    border: 1.5px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    box-shadow: var(--pm-shadow);
    padding: 6px;
    min-width: 190px;
    background: var(--pm-surface);
}

.pm-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pm-text-2);
    text-decoration: none;
    transition: all .15s;
    white-space: nowrap;
}

    .pm-dropdown-item i {
        width: 14px;
        text-align: center;
        color: var(--pm-text-3);
        font-size: 12px;
        flex-shrink: 0;
    }

    .pm-dropdown-item:hover {
        background: var(--pm-accent-soft);
        color: var(--pm-accent);
        text-decoration: none;
    }

        .pm-dropdown-item:hover i {
            color: var(--pm-accent);
        }

/* ══════════════════════════════════════════════════════════════
   ADDITIONS — append to the end of posprofile.css
   New reusable styles introduced for the Stock Entry Details view
   (and suitable for any other Details view in the system)
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════
   SE DETAIL FIELD  (read-only label/value pair)
   Reusable inside any Details view tab pane.
   Renders a stacked "label above value" cell
   without a full form-group + input.

   Usage:
     <div class="se-detail-field">
       <span class="se-detail-label">Label</span>
       <span class="se-detail-value">Value</span>
     </div>
══════════════════════════════════════ */
.se-detail-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .se-detail-field .se-detail-label {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--pm-text-3);
    }

    .se-detail-field .se-detail-value {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--pm-text);
    }

        .se-detail-field .se-detail-value a {
            color: var(--pm-accent);
            text-decoration: none;
        }

            .se-detail-field .se-detail-value a:hover {
                text-decoration: underline;
            }

/* ══════════════════════════════════════════════════════════════
   ADDITIONS — append to the end of posprofile.css
   New reusable styles introduced for the Asset Create view
   (and suitable for any other form that needs toggle switches)
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════
   PM TOGGLE SWITCH  (iOS-style on/off)
   Pairs with .bi-toggle-chip for flag fields.
   The hidden checkbox drives the checked state;
   .pm-toggle-input is the visible checkbox replacement.

   Usage inside a .bi-toggle-chip:
     <div class="pm-toggle-switch">
       <input class="pm-toggle-input" type="checkbox" asp-for="IsExistingAsset" />
       <span class="pm-toggle-slider"></span>
     </div>
══════════════════════════════════════ */
.pm-toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.pm-toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.pm-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--pm-border);
    border-radius: 20px;
    cursor: pointer;
    transition: background .2s;
}

    .pm-toggle-slider::before {
        content: "";
        position: absolute;
        width: 14px;
        height: 14px;
        left: 3px;
        top: 3px;
        background: #fff;
        border-radius: 50%;
        transition: transform .2s;
        box-shadow: 0 1px 3px rgba(0,0,0,.2);
    }

.pm-toggle-input:checked + .pm-toggle-slider {
    background: var(--pm-accent);
}

    .pm-toggle-input:checked + .pm-toggle-slider::before {
        transform: translateX(16px);
    }

/* ══════════════════════════════════════════════════════════════
   ADDITIONS — append to the end of posprofile.css
   New reusable alert color variants introduced for flash
   messages across all Index/form views.
   (Complements the existing .pm-alert + .pm-alert-info)
   ══════════════════════════════════════════════════════════════ */

/* ── Alert Variants ── */
.pm-alert-success {
    background: var(--pm-green-soft);
    border: 1px solid rgba(34, 197, 94, .3);
    color: var(--pm-text-2);
}

.pm-alert-error {
    background: var(--pm-red-soft);
    border: 1px solid rgba(239, 68, 68, .3);
    color: var(--pm-text-2);
}

.pm-alert-warning {
    background: var(--pm-amber-soft);
    border: 1px solid rgba(245, 158, 11, .3);
    color: var(--pm-text-2);
}

/* ══════════════════════════════════════════════════════════════
   ADDITIONS — Badge color variants for due-date status indicators
   Reusable across any Details view that shows time-sensitive data
   (Asset Maintenance due dates, scheduled tasks, deadlines, etc.)
   ══════════════════════════════════════════════════════════════ */

.pm-badge-red {
    background: var(--pm-red-soft);
    color: var(--pm-red);
}

.pm-badge-amber {
    background: var(--pm-amber-soft);
    color: var(--pm-amber);
}

/* ══════════════════════════════════════════════════════════════
   CHOSEN.JS — Global dropdown overflow fix
   The .chosen-drop is position:absolute and must not be clipped
   by any ancestor with overflow:hidden. This ensures the dropdown
   always renders above/below the trigger without being cut off,
   system-wide — no per-view fix needed.
   ══════════════════════════════════════════════════════════════ */

/* Allow the absolute-positioned drop to escape section containers */
.pm-section,
.bi-tab-content-wrap,
.pm-form-group,
.pm-card,
.pm-card-body {
    overflow: visible;
}

/* The drop itself must always float above everything */
.chosen-container .chosen-drop {
    z-index: 9999;
}