/* ------------------------------------------------------------------
   Shared styling for the administration screens: User Master, User Group
   Master, User Group Permissions and the Audit Log. Builds on the tokens
   in site.css so these screens sit inside the same shell as the rest of
   the app instead of each page carrying its own copy of the form CSS.
   ------------------------------------------------------------------ */

:root {
    --admin-outline: #C6C5D4;
    --admin-surface-bright: #F9FAFB;
    --admin-on-variant: #454652;
    --admin-error: #BA1A1A;
    --admin-ok: #2F855A;
    --admin-ok-bg: #C6F6D5;
    --admin-muted-bg: #EDF2F7;
    --admin-muted-fg: #718096;
}

/* ---------- Alerts ---------- */

.admin-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 18px;
    font-size: 0.9rem;
}

.admin-alert.error {
    color: #93000A;
    background: #FFDAD6;
    border: 1px solid #F5C2C0;
}

.admin-alert.success {
    color: #1B5E20;
    background: #D7F3DC;
    border: 1px solid #A9DFB5;
}

.admin-alert.info {
    color: #1A237E;
    background: #E8EAF6;
    border: 1px solid #C5CAE9;
}

/* ---------- Forms ---------- */

.admin-form-wrap {
    max-width: 760px;
    margin: 0 auto;
}

.admin-form-wrap.wide {
    max-width: 100%;
}

.admin-card {
    background: var(--bg-white);
    border: 1px solid var(--admin-outline);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
}

.admin-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 4px;
}

.admin-section-sub {
    font-size: 0.8rem;
    color: var(--admin-on-variant);
    margin-bottom: 18px;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
}

.admin-grid.single {
    grid-template-columns: minmax(0, 1fr);
}

.admin-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
    min-width: 0;
}

.admin-field.span-2 {
    grid-column: 1 / -1;
}

.admin-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--admin-on-variant);
    display: flex;
    align-items: center;
}

.admin-required {
    color: var(--admin-error);
    margin-left: 3px;
}

.admin-input {
    width: 100%;
    height: 42px;
    padding: 8px 14px;
    border: 1px solid var(--admin-outline);
    border-radius: 8px;
    background: var(--admin-surface-bright);
    color: #1A1C1C;
    font-size: 14px;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}

.admin-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(26, 35, 126, 0.12);
}

.admin-input:disabled,
.admin-input[readonly] {
    background: #EEEEEE;
    color: var(--admin-muted-fg);
}

.admin-validation {
    color: var(--admin-error);
    font-size: 0.8rem;
}

.admin-hint {
    font-size: 12px;
    color: var(--admin-on-variant);
}

/* Toggle switch, matching the one on the UOM form */
.admin-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    gap: 20px;
}

.admin-toggle-text {
    display: flex;
    flex-direction: column;
}

.admin-toggle-title {
    font-size: 13px;
    font-weight: 600;
    color: #1A1C1C;
}

.admin-toggle-sub {
    font-size: 12px;
    color: var(--admin-on-variant);
}

.admin-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.admin-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.admin-switch .track {
    width: 44px;
    height: 24px;
    background: #E2E2E2;
    border-radius: 9999px;
    transition: background .15s;
    position: relative;
}

.admin-switch .track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    height: 20px;
    width: 20px;
    background: #FFF;
    border: 1px solid #D1D5DB;
    border-radius: 9999px;
    transition: transform .15s;
}

.admin-switch input:checked ~ .track {
    background: var(--primary-color);
}

.admin-switch input:checked ~ .track::after {
    transform: translateX(20px);
    border-color: #FFF;
}

.admin-switch input:focus-visible ~ .track {
    box-shadow: 0 0 0 2px rgba(26, 35, 126, 0.25);
}

/* ---------- Buttons ---------- */

.admin-actions {
    display: flex;
    gap: 10px;
    padding-top: 8px;
    flex-wrap: wrap;
}

.admin-btn {
    min-width: 150px;
    height: 44px;
    padding: 0 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s, background .15s, opacity .15s;
}

.admin-btn:active {
    transform: scale(0.98);
}

.admin-btn-primary {
    background: var(--primary-color);
    color: #FFF;
    border: none;
}

.admin-btn-primary:hover {
    background: var(--primary-dark);
}

.admin-btn-secondary {
    background: #FFF;
    color: var(--admin-on-variant);
    border: 1px solid #767683;
}

.admin-btn-secondary:hover {
    background: #E8E8E8;
}

.admin-btn-sm {
    min-width: 0;
    height: 34px;
    padding: 0 12px;
    font-size: 12px;
}

/* ---------- Badges ---------- */

.admin-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

.admin-badge.on {
    color: var(--admin-ok);
    background: var(--admin-ok-bg);
}

.admin-badge.off {
    color: var(--admin-muted-fg);
    background: var(--admin-muted-bg);
}

.admin-badge.insert {
    color: #1B5E20;
    background: #D7F3DC;
}

.admin-badge.update {
    color: #8A5300;
    background: #FDEBC8;
}

.admin-badge.delete {
    color: #93000A;
    background: #FFDAD6;
}

.admin-badge.neutral {
    color: #1A237E;
    background: #E8EAF6;
}

.admin-empty {
    text-align: center;
    padding: 30px;
    color: var(--admin-muted-fg);
}

/* ---------- Pagination ---------- */

.admin-pager {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.admin-pager a,
.admin-pager span {
    padding: 5px 10px;
    border: 1px solid #CCC;
    border-radius: 4px;
    text-decoration: none;
    color: #000;
    font-size: 0.85rem;
}

.admin-pager a.current {
    background: var(--primary-color);
    color: #FFF;
    border-color: var(--primary-color);
}

.admin-pager .ellipsis {
    border: none;
}

/* ---------- Permission matrix ---------- */

.perm-group {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 16px;
    overflow: hidden;
}

.perm-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    background: #F8FAFC;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.perm-group-name {
    font-weight: 700;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.perm-group-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 0.8rem;
}

.perm-link {
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    font-size: 0.8rem;
    font-family: inherit;
    text-decoration: underline;
    padding: 2px 4px;
}

.perm-table {
    width: 100%;
    border-collapse: collapse;
}

.perm-table th,
.perm-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    font-size: 0.88rem;
}

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

.perm-table th {
    font-weight: 600;
    color: #475569;
    background: #FCFDFF;
}

.perm-table th.perm-col,
.perm-table td.perm-col {
    text-align: center;
    width: 92px;
}

.perm-table tbody tr:hover {
    background: #F1F5F9;
}

.perm-table input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

/* A row with no Access granted has its detail flags switched off. */
.perm-table tr.perm-locked td.perm-col input:not(.perm-access) {
    opacity: 0.35;
    cursor: not-allowed;
}

.perm-func-code {
    font-size: 0.72rem;
    color: var(--admin-muted-fg);
    display: block;
}

.perm-sticky-bar {
    position: sticky;
    bottom: 0;
    background: var(--bg-white);
    border-top: 1px solid var(--border-color);
    padding: 14px 0 4px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* ---------- Audit log ---------- */

.audit-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    align-items: end;
    margin-bottom: 6px;
}

.audit-filters .admin-field {
    margin-bottom: 0;
}

/* Below this the change column collapses into an unreadable ribbon, so the
   surrounding .table-responsive scrolls instead. */
.audit-table {
    min-width: 1100px;
}

.audit-table td {
    vertical-align: top;
}

.audit-changes {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.audit-change {
    font-size: 0.8rem;
    line-height: 1.5;
}

.audit-change .field {
    font-weight: 600;
    color: #475569;
}

.audit-old {
    color: #93000A;
    background: #FFF1F0;
    padding: 1px 5px;
    border-radius: 4px;
    text-decoration: line-through;
    word-break: break-word;
}

.audit-new {
    color: #1B5E20;
    background: #EFF9F1;
    padding: 1px 5px;
    border-radius: 4px;
    word-break: break-word;
}

.audit-arrow {
    color: var(--admin-muted-fg);
    margin: 0 4px;
}

.audit-more {
    font-size: 0.75rem;
    color: var(--admin-muted-fg);
    font-style: italic;
}

.audit-when {
    white-space: nowrap;
}

.audit-when .rel {
    display: block;
    font-size: 0.75rem;
    color: var(--admin-muted-fg);
}

/* ---------- Recent-changes panel (embedded in every list screen) ---------- */

.recent-changes {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    padding: 16px 20px;
    margin-bottom: 20px;
}

.recent-changes-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.recent-changes-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.recent-changes-title .count {
    font-weight: 500;
    color: var(--admin-muted-fg);
    font-size: 0.8rem;
}

.recent-changes-link {
    font-size: 0.8rem;
    color: var(--primary-color);
    text-decoration: none;
    white-space: nowrap;
}

.recent-changes-link:hover {
    text-decoration: underline;
}

.recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.recent-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 9px 0;
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem;
}

.recent-item:first-child {
    border-top: none;
}

.recent-item .body {
    flex: 1;
    min-width: 0;
}

.recent-item .meta {
    font-size: 0.75rem;
    color: var(--admin-muted-fg);
    margin-top: 2px;
}

.recent-item .who {
    font-weight: 600;
    color: #475569;
}

.recent-empty {
    font-size: 0.85rem;
    color: var(--admin-muted-fg);
    padding: 6px 0;
}

/* ---------- Recent changes as a top-right icon ----------
   The trail used to occupy the top of every list screen. It is consulted occasionally, so
   it now sits as an icon and opens over the page when asked for. The anchor has no height
   of its own — it lets the button hang to the right of whatever follows it. */

/* The audit button reserves its own strip at the top right rather than floating over the
   page. It used to be zero-height, which dropped it straight on top of whatever sat in the
   right-hand corner of the screen below — on every list screen, the New button. */
.recent-anchor {
    position: relative;
    display: flex;
    justify-content: flex-end;
    height: 44px;
    z-index: 40;
}

.recent-icon {
    position: relative;
    top: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-white);
    color: var(--admin-muted-fg);
    cursor: pointer;
    box-shadow: var(--shadow-md);
}

.recent-icon:hover,
.recent-icon.is-open {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* How many changes are waiting to be read, so the icon is worth looking at or ignoring. */
.recent-icon-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--primary-color);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

/* [hidden] is only display:none at the lowest specificity, so the display rule below would
   quietly beat it and the panel would render open however many times it was closed. */
.recent-pop[hidden] {
    display: none;
}

.recent-pop {
    position: absolute;
    top: 48px;
    right: 0;
    width: min(520px, calc(100vw - 40px));
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    overflow: hidden;
}

.recent-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-color);
    background: #f7f8fc;
}

.recent-pop-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--admin-muted-fg);
    font-size: 0.95rem;
    padding: 2px 4px;
}

.recent-pop-close:hover {
    color: var(--primary-color);
}

.recent-pop-body {
    overflow-y: auto;
    padding: 4px 14px;
}

.recent-pop-foot {
    padding: 10px 14px;
    border-top: 1px solid var(--border-color);
    text-align: right;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 768px) {
    .admin-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-btn {
        width: 100%;
    }

    .perm-table th.perm-col,
    .perm-table td.perm-col {
        width: 60px;
        padding: 10px 6px;
    }

    .perm-table th,
    .perm-table td {
        padding: 10px 8px;
        font-size: 0.8rem;
    }
}

/* =====================================================================
   List pager — shared by the product, purchase order, goods receipt and
   purchase invoice lists. It lives here rather than in each page so the
   four screens page identically instead of drifting apart in four copies.

   Bottom left: how many rows per page, beside the count it governs.
   Bottom right: the page links, and a box to jump straight to one.
   ===================================================================== */

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 15px; }
.pager-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pager-count { font-size: 0.8rem; color: #6b7280; }

.pager-size { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: #6b7280; }
.pager-size select { height: 32px; padding: 0 6px; border: 1px solid #ccc; border-radius: 4px; font-size: 0.85rem; background: #fff; }
.pager-size select:focus { outline: none; border-color: var(--primary-color); }
.pager-links { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

.pager-btn {
    min-width: 34px; height: 32px; padding: 0 9px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #ccc; border-radius: 4px; background: #fff;
    color: #000; text-decoration: none; font-size: 0.85rem; line-height: 1;
}
.pager-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }

.pager-btn.is-current { background: var(--primary-color); border-color: var(--primary-color); color: #fff; font-weight: 700; }
.pager-btn.is-current:hover { color: #fff; }

/* Nowhere to go: visibly inert, and not a link at all. */
.pager-btn.is-off { color: #c4c4cc; background: #f6f6f9; cursor: default; }
.pager-btn.is-off:hover { border-color: #ccc; color: #c4c4cc; }

.pager-gap { padding: 0 2px; color: #9aa0a6; font-size: 0.85rem; }

.pager-jump { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; font-size: 0.8rem; color: #6b7280; }
.pager-jump input[type=number] { width: 68px; height: 32px; padding: 0 6px; border: 1px solid #ccc; border-radius: 4px; font-size: 0.85rem; }
.pager-jump button { height: 32px; padding: 0 11px; border: 1px solid #ccc; border-radius: 4px; background: #fff; cursor: pointer; font-size: 0.8rem; }
.pager-jump button:hover { border-color: var(--primary-color); color: var(--primary-color); }

/* ---------------------------------------------------------------------
   List filter bar — the same shape on every document list: a row of
   labelled controls that wraps, with the actions pinned to the right.
   --------------------------------------------------------------------- */

.list-filters {
    display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end;
    padding: 0 0 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border-color);
}
.list-filter { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 150px; }
.list-filter label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--admin-muted-fg); }
.list-filter input, .list-filter select {
    height: 36px; padding: 6px 9px; border: 1px solid var(--border-color);
    border-radius: 6px; background: #fff; font-size: 0.85rem; width: 100%; min-width: 0;
}
.list-filter input:focus, .list-filter select:focus { outline: none; border-color: var(--primary-color); }

/* The free-text search takes the longest values, so it earns more room. */
.list-filters .list-filter.wide { flex: 2 1 220px; }
/* A date is a fixed width — it gains nothing from stretching. */
.list-filters .list-filter.date { flex: 0 1 150px; }

/* margin-left:auto pushes the actions to the right edge, whatever the controls wrap to. */
.list-filter-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }

.list-icon-btn {
    width: 36px; height: 36px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-color); border-radius: 6px;
    background: #fff; color: var(--admin-muted-fg);
    cursor: pointer; text-decoration: none; font-size: 0.85rem;
}
.list-icon-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }
.list-icon-btn.primary { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.list-icon-btn.primary:hover { opacity: .9; color: #fff; }
.list-icon-btn.add { background: #1b5e20; border-color: #1b5e20; color: #fff; }
.list-icon-btn.add:hover { opacity: .9; color: #fff; }

/* Nothing to clear: the button holds its place so the row does not shift, but is inert. */
.list-icon-btn.is-off { opacity: .3; cursor: default; }
.list-icon-btn.is-off:hover { border-color: var(--border-color); color: var(--admin-muted-fg); }

@media (max-width: 900px) {
    .list-filter, .list-filters .list-filter.wide { flex: 1 1 100%; }
    .list-filters .list-filter.date { flex: 1 1 45%; }
    .list-filter-actions { width: 100%; justify-content: flex-end; }
}

@media (max-width: 700px) {
    .pager { justify-content: center; }
    .pager-jump { margin-left: 0; }
}

/* =========================================================================
   THE CUSTOMER PICKER

   A search box standing in for a dropdown of every account. Sized to sit in a
   .list-filter without looking different from the controls beside it, and
   overridable per screen for the document forms, which run taller.
   See Pages/Shared/_CustomerPicker.cshtml.
   ========================================================================= */

.cust-pick { position: relative; min-width: 0; }

.cust-pick-box { position: relative; display: flex; align-items: center; }

/* Room on the right for the clear button; the left edge is a plain text field. */
.cust-pick-input {
    width: 100%; min-width: 0; height: 36px; padding: 6px 30px 6px 9px;
    border: 1px solid var(--border-color); border-radius: 6px;
    background: #fff; font-size: 0.85rem; font-family: inherit; color: inherit;
}
.cust-pick-input:focus { outline: none; border-color: var(--primary-color); }
.cust-pick-input::placeholder { color: #a0aec0; }
.cust-pick-input:disabled { background: #f1f2f7; color: #454652; }

.cust-pick-clear {
    position: absolute; right: 6px; width: 22px; height: 22px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 4px; background: transparent;
    color: var(--admin-muted-fg); cursor: pointer; font-size: 0.72rem;
}
.cust-pick-clear:hover { background: #eef0fb; color: var(--primary-color); }
.cust-pick-clear.is-hidden { display: none; }

/* The value is carried by a select the operator never sees. It is there so the posted
   field and each screen's own customer script stay exactly as they were. */
.cust-pick-value {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.cust-pick-results {
    position: absolute; z-index: 40; top: 100%; left: 0; right: 0;
    margin: 3px 0 0; padding: 0; list-style: none; display: none;
    background: #fff; border: 1px solid var(--border-color); border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    max-height: 290px; overflow-y: auto; min-width: 260px;
}
.cust-pick-results.is-open { display: block; }

.cust-pick-row {
    padding: 7px 11px; cursor: pointer; font-size: 0.8rem;
    border-bottom: 1px solid #f4f4f8; line-height: 1.35;
}
.cust-pick-row:last-child { border-bottom: none; }
.cust-pick-row:hover, .cust-pick-row.is-active { background: #eef0fb; }
.cust-pick-row .n { display: block; font-weight: 600; color: #1a1c1c; }
.cust-pick-row small { display: block; color: var(--admin-muted-fg); font-size: 0.68rem; margin-top: 1px; }

.cust-pick-empty {
    padding: 9px 11px; font-size: 0.78rem; font-style: italic;
    color: var(--admin-muted-fg); cursor: default;
}

.cust-pick-note {
    margin-top: 4px; font-size: 0.68rem; font-weight: 600; color: #9b2226;
    display: flex; align-items: center; gap: 5px;
}