@charset "UTF-8";
/* Must stay the FIRST bytes of this file - a @charset rule is only honoured at
   byte 0; without it a browser falls back to a locale default and separators
   render as mojibake. */

/* LipiSearch Account - admin console styles.
   Visual language ported from LipiSearch-Insights (insights.css). Account is
   Techgrains's own product, so the theme values below are the static Techgrains
   palette (LipiSearch-Config/white-label/techgrains/config/branding/theme.json)
   baked in - there is no runtime themeCss override here. */

:root {
    /* Brand triad. primary carries actions, links and active states; secondary
       is the product half of the brand lockup and section labels; hint marks
       guidance (notes, empty states). secondary and hint are saturated brand
       hues - use them on icons, borders and tints, never as body text. */
    --acc-primary: #1864AD;
    --acc-secondary: #7CC242;
    --acc-hint: #FF9E12;

    --acc-danger: #d64550;
    --acc-warning: #f59e0b;
    --acc-success: #2f9e5f;

    --acc-background: #f4f5fb;
    --acc-surface: #ffffff;
    --acc-header-bg: #ffffff;
    --acc-on-color: #ffffff;

    --acc-text: #1f2333;
    --acc-muted: #6b7c92;

    --acc-border: #e7eaf3;
    --acc-shadow: #0f172a;

    /* Two shadow depths: the resting shadow cards use, and the deeper one
       elevated surfaces (dialogs, dropdowns, hover) add on top. */
    --acc-shadow-light: 0 1px 3px color-mix(in srgb, var(--acc-shadow) 6%, transparent);
    --acc-shadow-strong: color-mix(in srgb, var(--acc-shadow) 25%, transparent);

    --acc-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

    --acc-control-height: 40px;
    --acc-radius-control: 10px;
    --acc-border-radius: 0.85rem;

    /* Header floor height, shared with everything that sticks underneath it
       (the sidebar rail). Must clear the tallest content variant - 36px
       controls + padding + rule. */
    --acc-header-min-height: 55px;

    --acc-sidebar-width: 230px;
}

body.acc-body {
    background: var(--acc-background);
    color: var(--acc-text);
    font-family: var(--acc-font-family);
    /* header / shell as a column, so the footer never floats mid-screen */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* ---------- Header ---------- */
.acc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--acc-header-bg);
    border-bottom: 1px solid var(--acc-border);
    padding: 0.55rem 1.25rem;
    min-height: var(--acc-header-min-height);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Left cluster: rail toggle + brand. The brand is the header's elastic
   element: it truncates first so the controls on the right are never pushed
   off the edge on a phone. */
.acc-brand-group {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
}

.acc-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    text-decoration: none;
    color: var(--acc-text);
}

.acc-brand:hover {
    color: var(--acc-text);
}

.acc-header-logo {
    height: 28px;
    width: auto;
}

.acc-separator-left {
    margin-left: 0.5rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--acc-border);
}

/* The product half of the lockup wears the SECONDARY color, so the two halves
   ("LipiSearch Account") read as the brand's own pairing. */
.acc-brand-product {
    color: var(--acc-secondary);
    font-weight: 700;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acc-header-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.acc-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.acc-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.acc-user-chip .bi {
    color: var(--acc-primary);
    font-size: 1.15rem;
}

.acc-logout {
    display: flex;
    margin: 0;
}

/* Square, quiet utility control; warms toward danger on approach. */
.acc-logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--acc-border);
    border-radius: 8px;
    background: var(--acc-surface);
    color: var(--acc-muted);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.acc-logout-btn:hover {
    color: var(--acc-danger);
    border-color: color-mix(in srgb, var(--acc-danger) 35%, var(--acc-border));
    background: color-mix(in srgb, var(--acc-danger) 7%, var(--acc-surface));
}

/* Sidebar toggle sits at the header's left edge, same 36px language. */
.acc-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin-right: 0.75rem;
    font-size: 1.1rem;
    border: 1px solid var(--acc-border);
    border-radius: 8px;
    background: var(--acc-surface);
    color: var(--acc-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.acc-nav-toggle:hover {
    color: var(--acc-primary);
    border-color: color-mix(in srgb, var(--acc-primary) 45%, var(--acc-border));
}

.acc-nav {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* ---------- Shell: sidebar rail + main column ---------- */
.acc-shell {
    display: flex;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.acc-sidebar {
    flex: 0 0 var(--acc-sidebar-width);
    padding: 0.9rem 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    /* the rail keeps its own scroll under the sticky header on short screens */
    position: sticky;
    top: var(--acc-header-min-height);
    align-self: flex-start;
    height: calc(100vh - var(--acc-header-min-height));
    overflow-y: auto;
    transition: margin-left 0.25s ease;
}

/* Collapsed: the rail slides out; content takes the full width. */
body.acc-nav-collapsed .acc-sidebar {
    margin-left: calc(-1 * var(--acc-sidebar-width));
    visibility: hidden;
}

/* Small uppercase group label between rail clusters */
.acc-nav-group {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--acc-secondary);
    margin: 0.95rem 0.9rem 0.3rem;
}

.acc-nav-group:first-child {
    margin-top: 0.35rem;
}

/* Nav entries: the Insights pill language. The server-rendered menu delivers
   inline SVG icons; size them like the icon font glyphs. */
.acc-sidebar a,
.acc-nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--acc-muted);
    font-weight: 500;
    font-size: 0.85rem;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.12s ease, background 0.12s ease;
}

.acc-sidebar a svg,
.acc-nav-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.85;
}

.acc-sidebar a .bi,
.acc-nav-link .bi {
    font-size: 1rem;
    opacity: 0.85;
}

.acc-sidebar a:hover,
.acc-nav-link:hover {
    color: var(--acc-text);
    background: color-mix(in srgb, var(--acc-text) 5%, transparent);
}

.acc-sidebar a.active,
.acc-nav-link.active {
    color: var(--acc-primary);
    background: color-mix(in srgb, var(--acc-primary) 12%, transparent);
}

.acc-sidebar a.active svg,
.acc-sidebar a.active .bi {
    opacity: 1;
}

/* Themed keyboard-focus ring; the rail clips ink, so draw it just inside. */
.acc-sidebar a:focus-visible,
.acc-nav-link:focus-visible {
    outline: 2px solid var(--acc-primary);
    outline-offset: -2px;
}

.acc-sidebar a:focus:not(:focus-visible) {
    outline: none;
}

/* Sign-out entry pinned at the rail's foot, reading as destructive on approach */
.acc-nav-footer {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--acc-border);
}

.acc-sidebar .acc-nav-logout:hover {
    color: var(--acc-danger);
    background: color-mix(in srgb, var(--acc-danger) 8%, transparent);
}

/* ---------- Main column ---------- */
.acc-main-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.acc-main {
    flex: 1;
    width: 100%;
    padding: 1rem 1.25rem 0.5rem;
}

.acc-footer {
    padding: 0 0 0.5rem 0;
    color: var(--acc-muted);
    text-align: center;
    font-size: 0.7rem;
}

/* ---------- Page head: title row + actions ---------- */
.acc-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.acc-page-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0;
}

.acc-page-desc {
    color: var(--acc-muted);
    font-size: 0.86rem;
    margin: 0.1rem 0 0;
}

.acc-page-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.acc-page-actions form {
    margin: 0;
}

/* ---------- Cards ---------- */
.acc-card {
    background: var(--acc-surface);
    border: 1px solid var(--acc-border);
    border-radius: var(--acc-border-radius);
    box-shadow: var(--acc-shadow-light);
    min-width: 0;
}

.acc-card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.65rem 0.95rem;
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--acc-border);
}

/* Anything that should sit at the head's right edge (counts, small actions) */
.acc-card-head > .ms-auto,
.acc-card-head-actions {
    margin-left: auto;
}

.acc-card-head .bi {
    color: var(--acc-muted);
}

.acc-card-body {
    padding: 0.95rem;
}

/* ---------- Buttons ---------- */
/* Shared base for every variant; each rule below adds only its differences. */
.acc-btn-primary,
.acc-btn-ghost,
.acc-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: var(--acc-control-height);
    padding: 0 1.1rem;
    border: 0;
    border-radius: var(--acc-radius-control);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.acc-btn-primary {
    background: var(--acc-primary);
    color: var(--acc-on-color);
}

.acc-btn-primary:hover {
    filter: brightness(1.07);
    color: var(--acc-on-color);
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--acc-primary) 65%, transparent);
}

/* Quiet sibling of the primary button - page actions that should not compete */
.acc-btn-ghost {
    border: 1px solid var(--acc-border);
    background: var(--acc-surface);
    color: var(--acc-muted);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.acc-btn-ghost:hover {
    border-color: var(--acc-primary);
    color: var(--acc-primary);
}

.acc-btn-danger {
    background: var(--acc-danger);
    color: var(--acc-on-color);
}

.acc-btn-danger:hover {
    filter: brightness(1.07);
    color: var(--acc-on-color);
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--acc-danger) 65%, transparent);
}

.acc-btn-sm {
    height: 32px;
    padding: 0 0.75rem;
    font-size: 0.8rem;
    border-radius: 8px;
}

.acc-btn-primary:disabled,
.acc-btn-danger:disabled {
    filter: saturate(0.4) brightness(1.1);
    cursor: not-allowed;
    box-shadow: none;
}

/* ---------- Forms ---------- */
.acc-field {
    display: block;
    margin-bottom: 0.95rem;
}

.acc-label,
.acc-field > label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--acc-muted);
    margin-bottom: 0.3rem;
}

.acc-input,
.acc-select,
.acc-textarea {
    display: block;
    width: 100%;
    height: var(--acc-control-height);
    padding: 0 0.85rem;
    border: 1px solid var(--acc-border);
    border-radius: var(--acc-radius-control);
    background: var(--acc-surface);
    color: var(--acc-text);
    font-size: 0.9rem;
    font-family: var(--acc-font-family);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.acc-textarea {
    height: auto;
    min-height: 84px;
    padding: 0.6rem 0.85rem;
    resize: vertical;
}

/* Read-only fields (view pages) read as values, not editable inputs */
.acc-input[readonly],
.acc-input:disabled,
.acc-select:disabled {
    background: color-mix(in srgb, var(--acc-muted) 6%, var(--acc-surface));
    color: color-mix(in srgb, var(--acc-text) 85%, var(--acc-muted));
}

.acc-input::placeholder,
.acc-textarea::placeholder {
    color: color-mix(in srgb, var(--acc-muted) 55%, transparent);
}

/* One focus ring for every control */
.acc-input:focus,
.acc-select:focus,
.acc-textarea:focus,
.acc-search-input:focus {
    outline: none;
    border-color: var(--acc-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc-primary) 12%, transparent);
}

/* Native selects keep the themed field look plus their own caret. */
.acc-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.2rem;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%236b7c92" height="16" viewBox="0 0 20 20" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M5.516 7.548a.75.75 0 0 1 1.06 0L10 10.97l3.424-3.422a.75.75 0 0 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    cursor: pointer;
}

/* Validation */
.acc-input.invalid,
.acc-select.invalid,
.acc-textarea.invalid {
    border-color: var(--acc-danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc-danger) 12%, transparent);
}

.acc-error-msg {
    color: var(--acc-danger);
    font-size: 0.78rem;
    margin-top: 0.25rem;
}

/* Inline alerts (login errors, form-level messages) */
.acc-alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: calc(var(--acc-border-radius) / 1.6);
    padding: 0.55rem 0.8rem;
    font-size: 0.84rem;
    margin-bottom: 1rem;
}

.acc-alert-error {
    background: color-mix(in srgb, var(--acc-danger) 9%, var(--acc-surface));
    color: color-mix(in srgb, var(--acc-danger) 76%, black);
}

.acc-alert-info {
    background: color-mix(in srgb, var(--acc-success) 9%, var(--acc-surface));
    color: color-mix(in srgb, var(--acc-success) 65%, black);
}

.acc-alert-hint {
    background: color-mix(in srgb, var(--acc-hint) 8%, var(--acc-surface));
    color: var(--acc-hint);
}

/* ---------- One themed checkbox, used everywhere ----------
   Custom-drawn so the tick is always white regardless of accent luminance. */
.acc-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin: 0;
    border: 1.5px solid var(--acc-border);
    border-radius: 4px;
    background: var(--acc-surface);
    cursor: pointer;
    position: relative;
}

.acc-checkbox:checked {
    background: var(--acc-primary);
    border-color: var(--acc-primary);
}

.acc-checkbox:checked::after {
    content: "";
    position: absolute;
    /* center the 4x8 tick in the 13px content box (16px minus the borders) */
    left: 4.5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid var(--acc-on-color);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.acc-checkbox:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc-primary) 25%, transparent);
}

/* A row that pairs the checkbox with its text label */
.acc-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.acc-check .acc-label {
    margin-bottom: 0;
}

/* ---------- Toggle switch ---------- */
.acc-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    margin: 0;
    flex-shrink: 0;
}

.acc-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.acc-switch-slider {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--acc-muted) 35%, var(--acc-surface));
    border-radius: 99px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.acc-switch-slider::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    background: var(--acc-on-color);
    border-radius: 50%;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--acc-shadow) 25%, transparent);
    transition: transform 0.2s ease;
}

.acc-switch input:checked + .acc-switch-slider {
    background: var(--acc-primary);
}

.acc-switch input:checked + .acc-switch-slider::before {
    transform: translateX(18px);
}

.acc-switch input:focus-visible + .acc-switch-slider {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc-primary) 25%, transparent);
}

/* Variant for switches whose underlying checkbox stores a NEGATIVE flag
   (e.g. "disabled"): the visual reads ON/colored while unchecked, so the lit
   state always means "active" regardless of how the field is stored. */
.acc-switch--invert input:not(:checked) + .acc-switch-slider {
    background: var(--acc-primary);
}

.acc-switch--invert input:not(:checked) + .acc-switch-slider::before {
    transform: translateX(18px);
}

.acc-switch--invert input:checked + .acc-switch-slider {
    background: color-mix(in srgb, var(--acc-muted) 35%, var(--acc-surface));
}

.acc-switch--invert input:checked + .acc-switch-slider::before {
    transform: none;
}

/* ---------- Tables ---------- */
/* The wrap is a card that lets wide tables scroll sideways inside it. */
.acc-table-wrap {
    background: var(--acc-surface);
    border: 1px solid var(--acc-border);
    border-radius: var(--acc-border-radius);
    box-shadow: var(--acc-shadow-light);
    overflow-x: auto;
}

.acc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.acc-table th {
    color: var(--acc-muted);
    background: var(--acc-background);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    text-align: left;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--acc-border);
}

.acc-table td {
    padding: 0.55rem 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--acc-border);
}

.acc-table tr:last-child td {
    border-bottom: 0;
}

.acc-table tbody tr:hover {
    background: color-mix(in srgb, var(--acc-primary) 4%, transparent);
}

/* Rows that navigate on click (JS binds .clickable-row / .selectable-row) */
.acc-table .clickable-row,
.acc-table .selectable-row {
    cursor: pointer;
}

.selectable-row.selected,
.selectable-row.selected:hover {
    background: color-mix(in srgb, var(--acc-primary) 14%, var(--acc-surface));
}

/* Sort controls in a header cell */
.acc-sort,
.sort-icon {
    cursor: pointer;
    margin-left: 0.3rem;
    color: color-mix(in srgb, var(--acc-muted) 55%, transparent);
    font-size: 0.9rem;
    vertical-align: middle;
    transition: color 0.15s ease;
}

.acc-sort:hover,
.sort-icon:hover {
    color: var(--acc-muted);
}

.acc-sort.active,
.sort-icon.active {
    color: var(--acc-primary);
}

/* Row action buttons (edit / delete) - quiet squares like the header controls */
.acc-row-actions {
    display: flex;
    gap: 0.4rem;
}

.acc-row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    height: 28px;
    min-width: 28px;
    padding: 0 0.5rem;
    border: 1px solid var(--acc-border);
    border-radius: 7px;
    background: var(--acc-surface);
    color: var(--acc-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.acc-row-btn:hover {
    color: var(--acc-primary);
    border-color: color-mix(in srgb, var(--acc-primary) 45%, var(--acc-border));
    background: color-mix(in srgb, var(--acc-primary) 6%, var(--acc-surface));
}

.acc-row-btn--danger:hover {
    color: var(--acc-danger);
    border-color: color-mix(in srgb, var(--acc-danger) 35%, var(--acc-border));
    background: color-mix(in srgb, var(--acc-danger) 7%, var(--acc-surface));
}

/* ---------- Badges / status pills ---------- */
.acc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 99px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

.acc-badge-success {
    color: color-mix(in srgb, var(--acc-success) 80%, black);
    background: color-mix(in srgb, var(--acc-success) 12%, var(--acc-surface));
}

.acc-badge-danger {
    color: color-mix(in srgb, var(--acc-danger) 80%, black);
    background: color-mix(in srgb, var(--acc-danger) 10%, var(--acc-surface));
}

.acc-badge-warning {
    color: color-mix(in srgb, var(--acc-warning) 65%, black);
    background: color-mix(in srgb, var(--acc-warning) 14%, var(--acc-surface));
}

.acc-badge-muted {
    color: var(--acc-muted);
    background: color-mix(in srgb, var(--acc-muted) 12%, var(--acc-surface));
}

/* Plain status words on view pages */
.status-active {
    color: var(--acc-success);
    font-weight: 600;
}

.status-inactive {
    color: var(--acc-danger);
    font-weight: 600;
}

/* ---------- Toolbar: search + filters above a table ---------- */
/* Search + filters sit together on the left; push something right with ms-auto */
.acc-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.acc-search {
    position: relative;
    display: block;
}

.acc-search > .bi {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--acc-muted);
    font-size: 0.95rem;
    pointer-events: none;
}

.acc-search-input {
    height: var(--acc-control-height);
    width: 260px;
    max-width: 100%;
    padding: 0 0.8rem 0 2.2rem;
    border: 1px solid var(--acc-border);
    border-radius: var(--acc-radius-control);
    background: var(--acc-surface);
    color: var(--acc-text);
    font-size: 0.85rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.acc-search-input::placeholder {
    color: color-mix(in srgb, var(--acc-muted) 55%, transparent);
}

/* Filter panel (logs page): one card, fields in a wrapping row */
.acc-filters {
    background: var(--acc-surface);
    border: 1px solid var(--acc-border);
    border-radius: var(--acc-border-radius);
    box-shadow: var(--acc-shadow-light);
    padding: 0.85rem 0.95rem;
    margin-bottom: 0.9rem;
}

.acc-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.acc-filters-row .acc-field {
    margin-bottom: 0;
    min-width: 200px;
    flex: 1 1 220px;
}

.acc-filters-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Quick date-range links under the filters */
.acc-range-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--acc-muted);
}

.acc-range-links a {
    color: var(--acc-primary);
    text-decoration: none;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
}

.acc-range-links a:hover {
    background: color-mix(in srgb, var(--acc-primary) 10%, transparent);
}

/* ---------- Pagination ---------- */
.acc-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.acc-pagination-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--acc-muted);
    font-size: 0.82rem;
}

/* Page-size choices as one segmented control */
.acc-page-sizes {
    display: inline-flex;
    border: 1px solid var(--acc-border);
    border-radius: 8px;
    background: var(--acc-surface);
    overflow: hidden;
}

.acc-page-sizes .page-size-box {
    padding: 0.25rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--acc-muted);
    background: transparent;
    border: 0;
    border-right: 1px solid var(--acc-border);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.acc-page-sizes .page-size-box:last-child {
    border-right: 0;
}

.acc-page-sizes .page-size-box:hover {
    color: var(--acc-primary);
}

.acc-page-sizes .page-size-box.selected {
    background: var(--acc-primary);
    color: var(--acc-on-color);
}

.acc-pagination {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.acc-pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 0.5rem;
    border: 1px solid var(--acc-border);
    border-radius: 8px;
    background: var(--acc-surface);
    color: var(--acc-text);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.acc-pagination .page-link:hover {
    color: var(--acc-primary);
    border-color: color-mix(in srgb, var(--acc-primary) 45%, var(--acc-border));
}

.acc-pagination .page-link.active,
.acc-pagination .active > .page-link {
    background: var(--acc-primary);
    border-color: var(--acc-primary);
    color: var(--acc-on-color);
}

.acc-pagination .disabled .page-link,
.acc-pagination .page-link.disabled {
    color: color-mix(in srgb, var(--acc-muted) 45%, transparent);
    pointer-events: none;
    background: transparent;
}

/* ---------- Dropdown menus (bootstrap + the searchable pickers) ---------- */
.dropdown-menu.acc-menu {
    min-width: 220px;
    max-height: 320px;
    overflow-y: auto;
    padding: 0.3rem;
    background: var(--acc-surface);
    border: 1px solid var(--acc-border);
    border-radius: var(--acc-radius-control);
    box-shadow: 0 12px 28px -12px var(--acc-shadow-strong);
}

.acc-menu .dropdown-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.42rem 0.6rem;
    border-radius: 7px;
    font-size: 0.86rem;
    color: var(--acc-text);
    white-space: normal;
    cursor: pointer;
}

.acc-menu li:not(:last-child) {
    margin-bottom: 2px;
}

.acc-menu .dropdown-item:hover,
.acc-menu .dropdown-item:focus,
.acc-menu .dropdown-item.active {
    background: color-mix(in srgb, var(--acc-primary) 10%, var(--acc-surface));
    color: var(--acc-text);
}

.acc-menu .dropdown-item .acc-menu-main {
    font-weight: 600;
}

.acc-menu .dropdown-item .acc-menu-sub {
    font-size: 0.75rem;
    color: var(--acc-muted);
}

.acc-menu .acc-menu-empty {
    color: var(--acc-muted);
    cursor: default;
}

/* The searchable business/agent pickers render their results into an absolutely
   positioned list under the input. */
.searchable-dropdown {
    position: relative;
}

.searchable-dropdown .dropdown-list,
.acc-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0.3rem;
    background: var(--acc-surface);
    border: 1px solid var(--acc-border);
    border-radius: var(--acc-radius-control);
    box-shadow: 0 12px 28px -12px var(--acc-shadow-strong);
    max-height: 260px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
}

/* ---------- Modals (bootstrap-hosted and hand-rolled) ---------- */
.modal-content.acc-modal,
.acc-modal .modal-content {
    border: 1px solid var(--acc-border);
    border-radius: var(--acc-border-radius);
    box-shadow: 0 18px 45px -18px var(--acc-shadow-strong);
}

.acc-modal .modal-header {
    border-bottom: 1px solid var(--acc-border);
    padding: 0.85rem 1.1rem;
}

.acc-modal .modal-title,
.acc-modal-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.acc-modal-title .bi {
    color: var(--acc-primary);
}

.acc-modal .modal-body {
    padding: 1rem 1.1rem;
}

.acc-modal .modal-footer {
    border-top: 1px solid var(--acc-border);
    padding: 0.7rem 1.1rem;
    gap: 0.5rem;
}

/* Hand-rolled overlay modals (logs detail, confirms on older pages):
   hidden until .show, centered card on a dim scrim. */
.acc-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: color-mix(in srgb, var(--acc-shadow) 45%, transparent);
    overflow: auto;
    animation: accFadeIn 0.2s ease;
}

.acc-overlay.show {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4rem 1rem 2rem;
}

.acc-overlay-card {
    width: min(640px, 100%);
    background: var(--acc-surface);
    border: 1px solid var(--acc-border);
    border-radius: var(--acc-border-radius);
    box-shadow: 0 18px 45px -18px var(--acc-shadow-strong);
    padding: 1.1rem 1.25rem;
    position: relative;
    animation: accSlideDown 0.2s ease;
}

.acc-overlay-close {
    position: absolute;
    top: 0.7rem;
    right: 0.9rem;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--acc-muted);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color 0.15s ease;
}

.acc-overlay-close:hover {
    color: var(--acc-text);
}

@keyframes accFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes accSlideDown {
    from { transform: translateY(-14px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Label-over-value detail rows in view pages and the log dialog */
.acc-detail-row {
    display: flex;
    gap: 0.75rem;
    padding: 0.45rem 0;
    font-size: 0.85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--acc-border) 60%, transparent);
}

.acc-detail-row:last-child {
    border-bottom: 0;
}

.acc-detail-label {
    flex: 0 0 150px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--acc-muted);
    padding-top: 0.1rem;
}

.acc-detail-value {
    flex: 1;
    min-width: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---------- Toasts ----------
   Rides on Bootstrap's Toast for show/hide timing; only the look is ours.
   #actionToast lives in the layout's toast fragment; main.js showToast()
   fills the message and swaps the variant class + icon. */
.toast.acc-toast {
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    background: var(--acc-surface);
    border: 1px solid var(--acc-border);
    border-left: 4px solid var(--acc-primary);
    border-radius: 10px;
    box-shadow: 0 12px 28px -12px var(--acc-shadow-strong);
    color: var(--acc-text);
    font-size: 0.85rem;
}

.toast.acc-toast.show {
    display: flex;
    animation: accToastIn 0.25s ease;
}

.acc-toast .toast-body {
    padding: 0;
    flex: 1;
}

.acc-toast > .bi {
    font-size: 1.05rem;
    color: var(--acc-primary);
}

.acc-toast.acc-toast-success {
    border-left-color: var(--acc-success);
}

.acc-toast.acc-toast-success > .bi {
    color: var(--acc-success);
}

.acc-toast.acc-toast-error {
    border-left-color: var(--acc-danger);
}

.acc-toast.acc-toast-error > .bi {
    color: var(--acc-danger);
}

@keyframes accToastIn {
    from { transform: translateX(30px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ---------- Login ---------- */
body.acc-login-body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: var(--acc-font-family);
    color: var(--acc-text);
    background: radial-gradient(56rem 32rem at 85% -12%,
            color-mix(in srgb, var(--acc-primary) 16%, transparent), transparent 60%),
        radial-gradient(44rem 30rem at -12% 112%,
            color-mix(in srgb, var(--acc-secondary) 13%, transparent), transparent 55%),
        var(--acc-background);
}

.acc-login {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    padding: 2rem 1rem;
}

.acc-login-card {
    width: min(400px, 100%);
    background: var(--acc-surface);
    border: 1px solid var(--acc-border);
    border-radius: calc(var(--acc-border-radius) * 1.25);
    box-shadow: 0 18px 45px -18px var(--acc-shadow-strong), var(--acc-shadow-light);
    padding: 2rem 2rem 1.8rem;
}

/* Brand lockup atop the card: logo + product name in one row, like the header */
.acc-login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--acc-border);
    margin-bottom: 1.4rem;
}

.acc-login-brand .acc-brand-product {
    font-size: 1.12rem;
}

.acc-login-logo {
    height: 36px;
    width: auto;
}

.acc-login-title {
    font-size: 1.35rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.15rem;
}

.acc-login-sub {
    color: var(--acc-muted);
    font-size: 0.86rem;
    text-align: center;
    margin-bottom: 1.4rem;
}

.acc-login-form {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}

.acc-login-field {
    display: block;
    margin: 0;
}

.acc-login-input {
    position: relative;
    display: block;
}

.acc-login-input .bi {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--acc-muted);
    font-size: 0.95rem;
    pointer-events: none;
}

.acc-login-input input {
    width: 100%;
    height: var(--acc-control-height);
    padding: 0 0.85rem 0 2.35rem;
    border: 1px solid var(--acc-border);
    border-radius: var(--acc-radius-control);
    background: var(--acc-surface);
    color: var(--acc-text);
    font-size: 0.9rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.acc-login-input input::placeholder {
    color: color-mix(in srgb, var(--acc-muted) 55%, transparent);
}

.acc-login-input input:focus {
    outline: none;
    border-color: var(--acc-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc-primary) 12%, transparent);
}

.acc-login-remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.84rem;
    color: var(--acc-muted);
    cursor: pointer;
}

.acc-login-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    height: var(--acc-control-height);
    margin-top: 0.35rem;
    border: 0;
    border-radius: var(--acc-radius-control);
    background: var(--acc-primary);
    color: var(--acc-on-color);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.acc-login-submit:hover {
    filter: brightness(1.07);
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--acc-primary) 65%, transparent);
}

.acc-login-footer {
    color: var(--acc-muted);
    font-size: 0.76rem;
    text-align: center;
}

/* ---------- Empty / error states ---------- */
.acc-centered {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 4rem;
    min-height: 60vh;
}

.acc-empty {
    text-align: center;
    color: var(--acc-muted);
    padding: 2.5rem 1rem;
    font-size: 0.9rem;
}

.acc-empty .bi {
    display: block;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: color-mix(in srgb, var(--acc-muted) 60%, transparent);
}

.acc-error-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 3rem 1rem;
    text-align: center;
}

.acc-error-code {
    font-size: 3.2rem;
    font-weight: 800;
    color: color-mix(in srgb, var(--acc-primary) 60%, var(--acc-muted));
    line-height: 1;
}

.acc-error-text {
    color: var(--acc-muted);
    font-size: 0.95rem;
}

/* ---------- Scroll regions: custom scrollbar (see insights.css rationale:
   a custom webkit scrollbar is never an overlay bar, so the lane it takes is
   stable across macOS pointer modes). Applied to inner scroll regions only. */
.acc-table-wrap,
.acc-overlay-card,
.dropdown-list,
.acc-menu {
    scrollbar-gutter: stable;
}

.acc-table-wrap::-webkit-scrollbar,
.acc-overlay-card::-webkit-scrollbar,
.dropdown-list::-webkit-scrollbar,
.acc-menu::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.acc-table-wrap::-webkit-scrollbar-track,
.acc-overlay-card::-webkit-scrollbar-track,
.dropdown-list::-webkit-scrollbar-track,
.acc-menu::-webkit-scrollbar-track {
    background: transparent;
}

.acc-table-wrap::-webkit-scrollbar-thumb,
.acc-overlay-card::-webkit-scrollbar-thumb,
.dropdown-list::-webkit-scrollbar-thumb,
.acc-menu::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--acc-text) 16%, transparent);
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 999px;
}

.acc-table-wrap::-webkit-scrollbar-thumb:hover,
.acc-overlay-card::-webkit-scrollbar-thumb:hover,
.dropdown-list::-webkit-scrollbar-thumb:hover,
.acc-menu::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--acc-text) 38%, transparent);
    background-clip: padding-box;
}

@supports not selector(::-webkit-scrollbar) {
    .acc-table-wrap,
    .acc-overlay-card,
    .dropdown-list,
    .acc-menu {
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--acc-text) 16%, transparent) transparent;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .acc-sidebar {
        position: fixed;
        left: 0;
        top: var(--acc-header-min-height);
        bottom: 0;
        z-index: 99;
        background: var(--acc-surface);
        border-right: 1px solid var(--acc-border);
        box-shadow: 0 12px 28px -12px var(--acc-shadow-strong);
        transition: transform 0.25s ease;
    }

    /* On a phone the rail overlays content and hides by default; the header
       toggle shows it. The collapsed class is reused with inverted meaning
       handled in JS (see main.js). */
    body.acc-nav-collapsed .acc-sidebar {
        margin-left: 0;
        visibility: visible;
        transform: translateX(-105%);
    }

    .acc-main {
        padding: 0.85rem 0.85rem 0.5rem;
    }

    .acc-filters-row .acc-field {
        min-width: 100%;
    }

    .acc-search-input {
        width: 100%;
    }

    .acc-pagination-bar {
        justify-content: center;
    }
}