/* ==========================================================================
   IMS design system
   --------------------------------------------------------------------------
   Loaded AFTER the theme stylesheets so it overrides them. This is the one
   place the whole product's look lives. The theme (Skodash) still provides the
   layout skeleton (wrapper/toggled/metismenu) — this file restyles it into a
   calm, enterprise ERP surface.

   Design language: white surfaces on a light canvas, one teal accent, slate
   text, an 8px spacing rhythm, and lucide icons everywhere. Data grids carry a
   solid teal header band and status is always a filled, saturated badge — the
   point is that a row's meaning is readable at a glance, not that the page is
   uniformly quiet.
   ========================================================================== */

:root {
    /* Palette — one teal accent, calm neutrals, saturated status fills. */
    --ims-accent:        #0f6f6f;
    --ims-accent-hover:  #0b5757;
    --ims-accent-strong: #0d7d7d;
    --ims-accent-soft:   #e6f2f2;
    --ims-accent-ring:   rgba(15, 111, 111, .18);

    --ims-text:          #101828;
    --ims-muted:         #5b6b83;
    --ims-faint:         #98a2b3;

    --ims-border:        #e7ebf3;
    --ims-border-strong: #d6dce8;
    --ims-surface:       #ffffff;
    --ims-canvas:        #f6f8fb;
    --ims-row-hover:     #f1f7f7;
    --ims-row-stripe:    #fafcfc;

    /* Semantic — soft-bg / strong-text pairs for alerts and stat icons.
       Badges do NOT use these: they are filled (see the badge scale below). */
    --ims-success-bg:    #dcfce7;  --ims-success:    #15803d;
    --ims-warning-bg:    #fef3c7;  --ims-warning:    #b45309;
    --ims-danger-bg:     #fee2e2;  --ims-danger:     #b91c1c;
    --ims-info-bg:       #e0f2fe;  --ims-info:       #0369a1;

    /* Badge scale — filled, saturated, one color per *meaning*. The same value
       is always the same color everywhere it appears (list, detail, print).
       Pending and Medium priority deliberately share amber. Source of truth for
       which value maps to which variant is App\Support\StatusBadge. */
    --ims-badge-draft-bg:     #374151;  --ims-badge-draft-fg:     #ffffff;
    --ims-badge-pending-bg:   #f0a41b;  --ims-badge-pending-fg:   #3d2b00;
    --ims-badge-approved-bg:  #16a34a;  --ims-badge-approved-fg:  #ffffff;
    --ims-badge-rejected-bg:  #dc2626;  --ims-badge-rejected-fg:  #ffffff;
    --ims-badge-info-bg:      #0ea5c4;  --ims-badge-info-fg:      #ffffff;
    --ims-badge-neutral-bg:   #eef1f6;  --ims-badge-neutral-fg:   #475467;
    --ims-badge-dark-bg:      #111827;  --ims-badge-dark-fg:      #ffffff;
    --ims-badge-code-bg:      #0f6f6f;  --ims-badge-code-fg:      #ffffff;

    /* Radii — 8px grid. */
    --ims-radius:        14px;
    --ims-radius-sm:     10px;
    --ims-radius-xs:     8px;

    /* Shadows — flat and quiet, never heavy. */
    --ims-shadow:        0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05);
    --ims-shadow-lg:     0 4px 6px -2px rgba(16, 24, 40, .04), 0 12px 20px -6px rgba(16, 24, 40, .10);

    /* Layout constants — kept in sync with the collapsed breakpoints. */
    --ims-sidebar-w:     260px;
    --ims-sidebar-w-collapsed: 76px;
    --ims-topbar-h:      64px;

    /* Font — one family, everywhere. Inter is the app typeface. Bootstrap
       renders buttons, forms, dropdowns and pagination in --bs-body-font-family,
       which defaults to system-ui — that mix of Inter + system-ui was what made
       the app read as "template". Point the Bootstrap variables at Inter. */
    --ims-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bs-font-sans-serif: var(--ims-font);
    --bs-body-font-family: var(--ims-font);
    --bs-body-font-size: .875rem;
    --bs-body-line-height: 1.5;
    --bs-btn-font-family: var(--ims-font);
    --bs-pagination-font-family: var(--ims-font);

    /* Bootstrap's primary utilities (text-primary, bg-primary, role badges,
       stat tiles) default to the theme's blue #3461ff. Point them at the app
       accent so everything is one teal. */
    --bs-primary: var(--ims-accent);
    --bs-primary-rgb: 15, 111, 111;
    --bs-success: #15803d;  --bs-success-rgb: 21, 128, 61;
    --bs-warning: #b45309;  --bs-warning-rgb: 180, 83, 9;
    --bs-danger:  #b91c1c;  --bs-danger-rgb: 185, 28, 28;
    --bs-info:    #0369a1;  --bs-info-rgb: 3, 105, 161;
}

/* --- Base ---------------------------------------------------------------- */

body,
.btn,
.form-control,
.form-select,
.table,
.dropdown-menu,
.modal,
.input-group-text,
.dataTables_wrapper,
.dataTables_wrapper * {
    font-family: var(--ims-font);
}

body {
    background-color: var(--ims-canvas);
    color: var(--ims-text);
    font-size: .875rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Brand selection color — small, but it signals "designed". */
::selection {
    background: var(--ims-accent-soft);
    color: var(--ims-accent);
}

.page-content {
    padding: 1.75rem;
    margin-top: var(--ims-topbar-h);
    transition: margin-left .25s ease, margin-top .2s ease;
}

/* --- Lucide --------------------------------------------------------------
   Icons render as <svg class="lucide">. Size them with the text they sit in
   so font-size utilities (me-1, fs-3, …) keep working. */

svg.lucide {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

/* --- Topbar -------------------------------------------------------------- */

.top-header .navbar {
    left: var(--ims-sidebar-w);
    height: var(--ims-topbar-h);
    background: var(--ims-surface);
    border-bottom: 1px solid var(--ims-border);
    padding: 0 1.25rem;
    z-index: 1030;
}

.wrapper.toggled .top-header .navbar {
    left: var(--ims-sidebar-w-collapsed);
}

/* Icon-only utility buttons in the topbar (bell, hamburger). */
.top-header .icon-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ims-radius-xs);
    color: var(--ims-muted);
    position: relative;
    transition: background-color .15s ease, color .15s ease;
}

.top-header .icon-btn:hover {
    background: var(--ims-row-hover);
    color: var(--ims-text);
}

.top-header .icon-btn svg.lucide {
    width: 20px;
    height: 20px;
}

.mobile-toggle-icon {
    color: var(--ims-muted);
    background: none;
    border: 0;
    font-size: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--ims-radius-xs);
}

.mobile-toggle-icon:hover {
    background: var(--ims-row-hover);
    color: var(--ims-text);
}

/* Notification badge dot. */
.notify-badge {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ims-danger);
    border: 2px solid var(--ims-surface);
}

/* Company switcher pill. */
.company-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 38px;
    padding: 0 .75rem 0 .5rem;
    border: 1px solid var(--ims-border);
    border-radius: var(--ims-radius-xs);
    background: var(--ims-surface);
    color: var(--ims-text);
    font-weight: 500;
    font-size: .8125rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.company-pill:hover {
    border-color: var(--ims-border-strong);
}

.company-pill-icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--ims-accent-soft);
    color: var(--ims-accent);
}

.company-pill-icon svg.lucide {
    width: 14px;
    height: 14px;
}

.company-pill-chevron {
    color: var(--ims-faint);
    display: inline-flex;
}

/* User menu trigger. */
.user-setting {
    padding: 4px 6px;
    border-radius: var(--ims-radius-xs);
    transition: background-color .15s ease;
}

.user-setting:hover {
    background: var(--ims-row-hover);
}

.user-meta {
    line-height: 1.15;
    text-align: left;
}

.user-meta .user-name {
    display: block;
    font-weight: 600;
    font-size: .8125rem;
    color: var(--ims-text);
}

.user-meta .user-role {
    display: block;
    font-size: .6875rem;
    color: var(--ims-muted);
    text-transform: capitalize;
}

/* Dropdowns from the topbar. */
.top-header .dropdown-menu {
    margin-top: .6rem;
    min-width: 230px;
}

.notifications-dropdown .dropdown-header {
    padding: .75rem .9rem .5rem;
}

.notifications-dropdown .header-notifications-list {
    max-height: 300px;
}

.notif-empty {
    color: var(--ims-muted);
    font-size: .8125rem;
}

.notif-empty svg.lucide {
    width: 28px;
    height: 28px;
    color: var(--ims-faint);
}

.user-dropdown-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .75rem 0;
}

.user-dropdown-head small {
    display: block;
    color: var(--ims-muted);
}

/* --- Sidebar -------------------------------------------------------------- */

.sidebar-wrapper {
    width: var(--ims-sidebar-w);
    background: var(--ims-surface);
    border-right: 1px solid var(--ims-border);
}

.sidebar-wrapper .sidebar-header {
    width: var(--ims-sidebar-w);
    height: var(--ims-topbar-h);
    background: var(--ims-surface);
    border-bottom: 1px solid var(--ims-border);
    padding: 0 1rem;
}

.sidebar-brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: var(--ims-text);
    text-decoration: none;
}

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

.brand-mark {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ims-radius-xs);
    background: linear-gradient(135deg, var(--ims-accent-strong), var(--ims-accent-hover));
    color: #fff;
}

.brand-mark svg.lucide {
    width: 19px;
    height: 19px;
}

.brand-name {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.toggle-icon {
    font-size: 1.15rem;
    color: var(--ims-muted);
    transition: color .15s ease;
}

.toggle-icon:hover {
    color: var(--ims-accent);
}

/* The theme's .sidebar-header is position:fixed, so the menu must start below
   it or the first items slide underneath. */
.sidebar-menu {
    padding: var(--ims-topbar-h) 0 1rem;
}

.sidebar-wrapper .metismenu {
    margin-top: 0;
    padding: 0 .75rem;
    display: flex;
    flex-direction: column;
}

.sidebar-wrapper .metismenu li + li {
    margin-top: 2px;
}

/* Section labels. */
.sidebar-wrapper .metismenu .menu-label {
    padding: 1.35rem .65rem .4rem;
    margin: 0;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ims-faint);
    border: 0;
}

.sidebar-wrapper .metismenu .menu-label + li {
    margin-top: 2px;
}

/* Top-level items. */
.sidebar-wrapper .metismenu a {
    padding: .55rem .7rem;
    font-size: .84375rem;
    font-weight: 500;
    color: var(--ims-muted);
    border-radius: var(--ims-radius-xs);
    border: 0;
    margin: 0;
    gap: .65rem;
    letter-spacing: 0;
    transition: color .15s ease, background-color .15s ease, transform .1s ease;
}

.sidebar-wrapper .metismenu a .parent-icon {
    font-size: 1.05rem;
    line-height: 1;
    display: inline-flex;
}

.sidebar-wrapper .metismenu a .menu-title {
    margin-left: 0;
}

.sidebar-wrapper .metismenu a:hover {
    background-color: var(--ims-accent-soft);
    color: var(--ims-accent);
}

/* An open accordion parent gets accent text only — no fill, no bar. The bar
   belongs to the one page you are actually on. */
.sidebar-wrapper .metismenu > li.mm-active > a {
    background-color: transparent;
    color: var(--ims-accent);
    font-weight: 600;
}

/* …unless the top-level item *is* the page (Dashboard has no submenu), in
   which case it gets the same teal wash as an active sub-item. */
.sidebar-wrapper .metismenu > li.mm-active:not(:has(ul)) > a {
    background-color: var(--ims-accent-soft);
    color: var(--ims-accent);
}

/* Active page: soft wash + a left indicator bar sitting on the submenu guide. */
.sidebar-wrapper .metismenu ul .mm-active > a {
    background-color: var(--ims-accent-soft);
    color: var(--ims-accent);
    font-weight: 600;
}

.sidebar-wrapper .metismenu ul .mm-active > a::before {
    content: '';
    position: absolute;
    left: -1.15rem;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 3px;
    background: var(--ims-accent);
}

/* Sub-menu. */
.sidebar-wrapper .metismenu ul {
    border: 0;
    margin-left: .4rem;
    padding-left: 1.15rem;
    border-left: 1px solid var(--ims-border);
}

.sidebar-wrapper .metismenu ul a {
    padding: .45rem .65rem;
    font-size: .8125rem;
    color: var(--ims-muted);
    display: flex;
    align-items: center;
    gap: .55rem;
}

.sidebar-wrapper .metismenu ul a svg.lucide {
    width: 15px;
    height: 15px;
    color: var(--ims-faint);
    transition: color .15s ease;
}

.sidebar-wrapper .metismenu ul a:hover svg.lucide,
.sidebar-wrapper .metismenu ul .mm-active > a svg.lucide {
    color: var(--ims-accent);
}

.sidebar-wrapper .metismenu ul .mm-active > a {
    background-color: var(--ims-accent-soft);
    color: var(--ims-accent);
    font-weight: 600;
}

/* Has-arrow chevron: quieter than the theme's default. */
.sidebar-wrapper .metismenu .has-arrow:after {
    right: .7rem;
    border-width: 1.5px;
    border-color: var(--ims-faint);
    opacity: .7;
    transition: transform .2s ease;
}

.sidebar-wrapper .metismenu .mm-active > a.has-arrow:after {
    transform: rotate(-135deg) translate(0, 0);
}

/* Collapsed rail (desktop). */
@media screen and (min-width: 1025px) {
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper {
        width: var(--ims-sidebar-w-collapsed);
    }

    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header {
        width: var(--ims-sidebar-w-collapsed);
        justify-content: center;
        padding: 0;
    }

    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .brand-name,
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .toggle-icon {
        display: none;
    }

    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu {
        padding: 0 .55rem;
    }

    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu > li > a {
        justify-content: center;
        padding: .6rem 0;
    }

    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu li.menu-label,
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu .has-arrow:after {
        display: none;
    }

    /* Fly-out submenu on hover of the collapsed rail. */
    .wrapper.toggled.sidebar-hovered .sidebar-wrapper {
        box-shadow: var(--ims-shadow-lg);
    }

    .wrapper.toggled .page-content {
        margin-left: var(--ims-sidebar-w-collapsed);
    }
}

/* --- Page header ----------------------------------------------------------
   Consistent title / breadcrumb / actions row on every page. */

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 1.25rem;
    margin-bottom: 1.5rem;
}

.page-title {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ims-text);
    margin: 0;
    line-height: 1.25;
}

.page-header .breadcrumb {
    margin: 0 0 .35rem;
}

.page-header .breadcrumb-item {
    font-size: .75rem;
    font-weight: 500;
}

.page-header .breadcrumb-item a {
    color: var(--ims-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.page-header .breadcrumb-item a svg.lucide {
    width: 14px;
    height: 14px;
}

.page-header .breadcrumb-item a:hover {
    color: var(--ims-accent);
}

.page-header .breadcrumb-item.active {
    color: var(--ims-text);
    font-weight: 600;
}

.page-header .breadcrumb-item + .breadcrumb-item::before {
    color: var(--ims-faint);
}

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

/* --- Cards ---------------------------------------------------------------- */

.card {
    background: var(--ims-surface);
    border: 1px solid var(--ims-border);
    border-radius: var(--ims-radius) !important;
    box-shadow: var(--ims-shadow);
    margin-bottom: 1.25rem;
}

.card:hover {
    box-shadow: var(--ims-shadow-lg);
    transition: box-shadow .2s ease;
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--ims-border);
    padding: 1rem 1.35rem;
    font-weight: 600;
    font-size: .875rem;
}

.card-body {
    padding: 1.35rem;
}

/* --- Section card header (<x-ims.card>) ------------------------------------
   A small lucide icon plus a short uppercase label — "REQUISITION INFORMATION",
   "SUPPLIER INFORMATION", "RECEIVED ITEMS". Gives every block on a detail page
   an identifiable heading instead of a bare sentence. */

.ims-card-header {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1.35rem;
    background: var(--ims-row-hover);
    border-bottom: 1px solid var(--ims-border);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ims-muted);
}

.ims-card-header svg.lucide {
    width: 14px;
    height: 14px;
    color: var(--ims-accent);
}

.ims-card-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .4rem;
    text-transform: none;
    letter-spacing: 0;
}

/* A card whose body is a full-bleed table gets no body padding. */
.ims-card-flush > .card-body { padding: 0; }
.ims-card-flush > .card-body > .table-responsive > .table > thead > tr > th:first-child { border-top-left-radius: 0; }
.ims-card-flush > .card-body > .table-responsive > .table > thead > tr > th:last-child  { border-top-right-radius: 0; }

/* --- Label / value pairs (<x-ims.field>) ----------------------------------- */

.ims-field {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.ims-field-label {
    font-size: .75rem;
    font-weight: 500;
    color: var(--ims-muted);
}

.ims-field-value {
    font-size: .875rem;
    font-weight: 500;
    color: var(--ims-text);
    word-break: break-word;
}

.ims-field-value a { color: var(--ims-accent); text-decoration: none; }
.ims-field-value a:hover { text-decoration: underline; }

/* --- Document header (<x-ims.doc-header>) ---------------------------------- */

.ims-doc-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin-bottom: 1.25rem;
}

.ims-doc-number {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ims-accent);
    margin: 0;
}

.ims-doc-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
}

.ims-doc-meta {
    font-size: .8125rem;
    color: var(--ims-muted);
}

/* Quiet footer action bar at the bottom of a detail page. */
.ims-doc-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    margin-top: .25rem;
    border-top: 1px solid var(--ims-border);
}

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

.btn {
    border-radius: 10px;
    font-weight: 500;
    padding: .5rem .95rem;
    font-size: .84375rem;
    letter-spacing: -.01em;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    transition: all .15s ease;
}

.btn svg.lucide {
    width: 1.05em;
    height: 1.05em;
}

/* The primary action is filled teal. (This replaces an earlier rule that kept
   "Add New" buttons background-less — the app now signals its primary action
   with the accent, the same way the reference screens do.) */
.btn-primary {
    background-color: var(--ims-accent);
    border-color: var(--ims-accent);
    color: #fff;
    box-shadow: 0 1px 2px rgba(15, 111, 111, .18);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ims-accent-hover) !important;
    border-color: var(--ims-accent-hover) !important;
    color: #fff !important;
}

.btn-primary:active {
    background-color: var(--ims-accent-hover) !important;
    border-color: var(--ims-accent-hover) !important;
    color: #fff !important;
}

.btn-outline-primary {
    color: var(--ims-accent);
    border-color: #a9cfcf;
    background: var(--ims-surface);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--ims-accent-soft);
    border-color: var(--ims-accent);
    color: var(--ims-accent);
}

.btn-outline-secondary {
    color: var(--ims-muted);
    border-color: var(--ims-border);
    background: var(--ims-surface);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--ims-row-hover);
    border-color: var(--ims-border-strong);
    color: var(--ims-text);
}

.btn-ghost {
    color: var(--ims-muted);
    background: transparent;
    border-color: transparent;
}

.btn-ghost:hover {
    background: var(--ims-row-hover);
    color: var(--ims-text);
}

.btn-link {
    font-weight: 500;
    color: var(--ims-accent);
}

.btn-sm {
    padding: .3rem .7rem;
    border-radius: 7px;
    font-size: .8125rem;
}

.btn:disabled {
    opacity: .6;
    pointer-events: none;
}

/* --- Intent buttons -------------------------------------------------------
   Document actions are distinguished by intent, not by being uniformly grey.
   Outline = a step you can take back; solid = a commitment. Each carries a
   leading lucide icon at the call site. */

.btn-draft {
    background: var(--ims-surface);
    border-color: var(--ims-border-strong);
    color: var(--ims-muted);
}

.btn-draft:hover,
.btn-draft:focus {
    background: var(--ims-row-hover);
    border-color: var(--ims-faint);
    color: var(--ims-text);
}

.btn-initiate {
    background: var(--ims-surface);
    border-color: var(--ims-accent);
    color: var(--ims-accent);
}

.btn-initiate:hover,
.btn-initiate:focus {
    background: var(--ims-accent-soft);
    border-color: var(--ims-accent);
    color: var(--ims-accent-hover);
}

.btn-approve {
    background: var(--ims-badge-approved-bg);
    border-color: var(--ims-badge-approved-bg);
    color: #fff;
    box-shadow: 0 1px 2px rgba(22, 163, 74, .2);
}

.btn-approve:hover,
.btn-approve:focus {
    background: #15803d;
    border-color: #15803d;
    color: #fff;
}

.btn-pending {
    background: var(--ims-surface);
    border-color: var(--ims-badge-pending-bg);
    color: #a16207;
}

.btn-pending:hover,
.btn-pending:focus {
    background: #fffbeb;
    border-color: #d18e0f;
    color: #854d0e;
}

.btn-outline-danger {
    background: var(--ims-surface);
    border-color: #f3b4b4;
    color: var(--ims-danger);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background: var(--ims-danger-bg);
    border-color: var(--ims-danger);
    color: var(--ims-danger);
}

/* Icon-only square button — the "+" add-row control on line-item tables. */
.btn-icon {
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
    border-radius: var(--ims-radius-xs);
}

.btn-icon svg.lucide { width: 16px; height: 16px; }

/* Row action kebab (DataTables action column). */
.row-actions {
    position: relative;
    display: inline-block;
}

.row-actions-toggle {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--ims-radius-xs);
    background: transparent;
    color: var(--ims-muted);
    transition: all .15s ease;
}

.row-actions-toggle:hover {
    background: var(--ims-row-hover);
    border-color: var(--ims-border);
    color: var(--ims-text);
}

.row-actions-menu {
    min-width: 168px;
    padding: .35rem;
}

.row-actions-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .8125rem;
    padding: .45rem .65rem;
    border-radius: 7px;
}

.row-actions-menu .dropdown-item svg.lucide {
    width: 16px;
    height: 16px;
    color: var(--ims-muted);
}

.row-actions-menu .dropdown-item:hover svg.lucide {
    color: inherit;
}

.row-actions-menu .dropdown-item.text-danger svg.lucide {
    color: var(--ims-danger);
}

.row-actions-menu .dropdown-item.text-danger:hover {
    background: var(--ims-danger-bg);
}

.row-actions-menu .dropdown-divider {
    margin: .3rem 0;
}

/* --- Badges ----------------------------------------------------------------
   Filled, saturated, bold. A badge is a *signal*, so it carries weight — the
   earlier pale-pill treatment made Approved and Rejected read as the same
   thing at a glance, which is the whole failure this system fixes.

   Two ways in, one look:
     .ims-badge.ims-badge-<variant>  — the canonical form, emitted by
                                       <x-ims.badge> and by IMS.badge() in JS.
     .badge.bg-*                     — Bootstrap's classes, remapped onto the
                                       same fills so pages not yet migrated
                                       still render correctly. */

.ims-badge,
.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-weight: 700;
    font-size: .6875rem;
    line-height: 1.35;
    padding: .3em .6em;
    border-radius: 6px;
    letter-spacing: .02em;
    white-space: nowrap;
    vertical-align: middle;
}

.ims-badge svg.lucide { width: 12px; height: 12px; }

.ims-badge-draft    { background: var(--ims-badge-draft-bg);    color: var(--ims-badge-draft-fg); }
.ims-badge-pending  { background: var(--ims-badge-pending-bg);  color: var(--ims-badge-pending-fg); }
.ims-badge-approved { background: var(--ims-badge-approved-bg); color: var(--ims-badge-approved-fg); }
.ims-badge-rejected { background: var(--ims-badge-rejected-bg); color: var(--ims-badge-rejected-fg); }
.ims-badge-info     { background: var(--ims-badge-info-bg);     color: var(--ims-badge-info-fg); }
.ims-badge-neutral  { background: var(--ims-badge-neutral-bg);  color: var(--ims-badge-neutral-fg); }
.ims-badge-dark     { background: var(--ims-badge-dark-bg);     color: var(--ims-badge-dark-fg); }
.ims-badge-code     { background: var(--ims-badge-code-bg);     color: var(--ims-badge-code-fg); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Slightly larger badge for document detail headers. */
.ims-badge-lg {
    font-size: .78125rem;
    padding: .4em .8em;
    border-radius: 7px;
}

/* Bootstrap class bridge — same fills, so an un-migrated page still reads
   correctly. New markup should use .ims-badge-* instead. */
.badge.bg-success   { background-color: var(--ims-badge-approved-bg) !important; color: var(--ims-badge-approved-fg) !important; }
.badge.bg-warning   { background-color: var(--ims-badge-pending-bg) !important;  color: var(--ims-badge-pending-fg) !important; }
.badge.bg-danger    { background-color: var(--ims-badge-rejected-bg) !important; color: var(--ims-badge-rejected-fg) !important; }
.badge.bg-info      { background-color: var(--ims-badge-info-bg) !important;     color: var(--ims-badge-info-fg) !important; }
.badge.bg-secondary { background-color: var(--ims-badge-neutral-bg) !important;  color: var(--ims-badge-neutral-fg) !important; }
.badge.bg-dark      { background-color: var(--ims-badge-dark-bg) !important;     color: var(--ims-badge-dark-fg) !important; }
.badge.bg-primary   { background-color: var(--ims-badge-code-bg) !important;     color: var(--ims-badge-code-fg) !important; }

.badge.bg-light {
    background-color: var(--ims-badge-neutral-bg) !important;
    color: var(--ims-badge-neutral-fg) !important;
}

/* --- Tables --------------------------------------------------------------- */

.table {
    --bs-table-bg: transparent;
    color: var(--ims-text);
    margin-bottom: 0;
}

/* Kill the theme's grid lines. */
.table.table-bordered,
.table.table-bordered > :not(caption) > * > * {
    border: 0 !important;
}

.table.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent;
    background-color: transparent !important;
    color: var(--ims-text);
}

/* The teal header band. This is what makes a data grid read as a data grid
   instead of a list of text — it lands on every .table in the app at once. */
.table > thead > tr > th {
    background-color: var(--ims-accent) !important;
    color: #fff !important;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .8rem 1rem;
    border: 0 !important;
    /* Bootstrap paints cell backgrounds with an inset shadow (--bs-table-accent-bg);
       clear it or the band shows through as the theme's grey. */
    box-shadow: none !important;
    white-space: nowrap;
    vertical-align: middle;
}

.table > thead > tr > th:first-child { border-top-left-radius: var(--ims-radius-sm); }
.table > thead > tr > th:last-child  { border-top-right-radius: var(--ims-radius-sm); }

/* Numeric columns line up on the decimal, not on the left edge. */
.table th.num,
.table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* A quieter header for small inline tables inside a card (totals, summaries)
   where a full teal band would shout. Opt in per table. */
.table.table-quiet > thead > tr > th {
    background-color: var(--ims-row-hover) !important;
    color: var(--ims-muted) !important;
    border-bottom: 1px solid var(--ims-border) !important;
}

.table > tbody > tr > td {
    padding: .8rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--ims-border);
    vertical-align: middle;
    color: var(--ims-text);
    font-size: .84375rem;
}

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

.table > tbody > tr { transition: background-color .1s ease; }

.table > tbody > tr:hover > td { background-color: var(--ims-row-hover); }

/* Very subtle zebra — only where the page opted into striped. */
.table-striped > tbody > tr:nth-of-type(even) > td {
    background-color: var(--ims-row-stripe);
}

/* Thumbnails inside cells (items). */
.item-thumb {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: var(--ims-radius-xs);
    border: 1px solid var(--ims-border);
}

.item-thumb-empty {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ims-radius-xs);
    background: var(--ims-row-hover);
    color: var(--ims-faint);
}

/* Compact thumbnail for component / BOM tables. */
.item-thumb-sm {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 7px;
    border: 1px solid var(--ims-border);
    flex-shrink: 0;
}

.item-thumb-sm.item-thumb-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ims-row-hover);
    color: var(--ims-faint);
}

.item-thumb-sm svg.lucide {
    width: 15px;
    height: 15px;
}

/* Inline status toggle. */
.status-switch {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding-left: 0;
    min-height: auto;
}

.status-switch .form-check-input {
    float: none;
    margin: 0;
    width: 2.15rem;
    height: 1.15rem;
    cursor: pointer;
    flex-shrink: 0;
}

.status-switch .form-check-input:disabled {
    opacity: .5;
    cursor: wait;
}

.status-switch .status-label {
    font-size: .8rem;
    font-weight: 500;
    color: var(--ims-muted);
    cursor: pointer;
    user-select: none;
}

/* The switch and its own label must agree on what "on" means — green means
   Active in both, not indigo-track-but-green-text. */
.status-switch .form-check-input:checked {
    background-color: var(--ims-success);
    border-color: var(--ims-success);
}

.status-switch .form-check-input:focus {
    border-color: var(--ims-success);
    box-shadow: 0 0 0 .2rem rgba(21, 128, 61, .16);
}

.status-switch .form-check-input:checked ~ .status-label {
    color: var(--ims-success);
}

/* --- Table toolbar (<x-ims.table-toolbar>) ---------------------------------
   Records-per-page · Columns Visibility · date range · search, sitting above
   the grid. Rendered as real markup (not DataTables' `dom` string) so all four
   controls can be styled identically and laid out sensibly on small screens.
   Wired to the table by ims-table.js. */

.ims-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin-bottom: 1.15rem;
}

.ims-toolbar-group {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: .75rem;
}

.ims-toolbar-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.ims-toolbar-label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ims-faint);
}

/* One control shape shared by the select, the date inputs and the search box —
   the reference's toolbar reads as a set because they all match. */
.ims-control {
    height: 38px;
    border: 1px solid var(--ims-border-strong);
    border-radius: var(--ims-radius-xs);
    background-color: var(--ims-surface);
    color: var(--ims-text);
    font-size: .8125rem;
    padding: 0 .75rem;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ims-control:focus {
    border-color: var(--ims-accent);
    box-shadow: 0 0 0 3px var(--ims-accent-ring);
}

select.ims-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.1rem;
    min-width: 5.5rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2398a2b3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: 11px 8px;
}

select.ims-control::-ms-expand { display: none; }

.ims-search {
    min-width: 260px;
    padding-left: 2.2rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='11' cy='11' r='8'/%3e%3cpath d='m21 21-4.3-4.3'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left .7rem center;
    background-size: 15px;
}

/* Date range: two inputs reading as one control. */
.ims-daterange {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.ims-daterange .ims-control { min-width: 9.25rem; }
.ims-daterange-sep { color: var(--ims-faint); font-size: .8125rem; }

/* Columns Visibility */
.ims-colvis { position: relative; }

.ims-colvis-toggle {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 38px;
    font-weight: 500;
}

.ims-colvis-toggle svg.lucide { width: 15px; height: 15px; }

.ims-colvis-menu {
    min-width: 210px;
    max-height: 320px;
    overflow-y: auto;
    padding: .35rem;
}

.ims-colvis-menu .form-check {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .6rem;
    margin: 0;
    border-radius: 7px;
    cursor: pointer;
}

.ims-colvis-menu .form-check:hover { background: var(--ims-row-hover); }

.ims-colvis-menu .form-check-input {
    margin: 0;
    float: none;
    cursor: pointer;
}

.ims-colvis-menu .form-check-label {
    font-size: .8125rem;
    color: var(--ims-text);
    cursor: pointer;
    user-select: none;
}

@media (max-width: 767.98px) {
    .ims-toolbar { flex-direction: column; align-items: stretch; }
    .ims-toolbar-group { width: 100%; }
    .ims-search { min-width: 0; width: 100%; }
}

/* --- DataTables ----------------------------------------------------------- */

.dataTables_wrapper .row { align-items: center; }
.dataTables_wrapper .row:first-child { margin-bottom: 1rem; }

/* The toolbar is the "filters" row — length, search, table-level filters. */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    color: var(--ims-muted);
    font-size: .8125rem;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 0;
}

.dataTables_wrapper .dataTables_length select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid var(--ims-border);
    border-radius: var(--ims-radius-xs);
    padding: .45rem 2.1rem .45rem .75rem;
    min-width: 5.25rem;
    color: var(--ims-text);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2398a2b3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: 11px 8px;
    cursor: pointer;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.dataTables_wrapper .dataTables_length select::-ms-expand { display: none; }

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--ims-border);
    border-radius: var(--ims-radius-xs);
    padding: .45rem .75rem .45rem 2.2rem;
    min-width: 260px;
    color: var(--ims-text);
    background-color: #fff;
    outline: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='11' cy='11' r='8'/%3e%3cpath d='m21 21-4.3-4.3'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left .7rem center;
    background-size: 15px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--ims-accent);
    box-shadow: 0 0 0 3px var(--ims-accent-ring);
}

.dataTables_wrapper .dataTables_filter { text-align: right; }
.dataTables_wrapper .dataTables_filter label { justify-content: flex-end; }
.dataTables_wrapper .dataTables_filter input { margin-left: 0; }

.dataTables_wrapper .dataTables_info {
    color: var(--ims-muted);
    font-size: .8125rem;
    padding-top: 1rem;
}

.dataTables_wrapper .dataTables_paginate {
    display: flex;
    justify-content: flex-end;
    padding-top: 1rem;
}

.dataTables_wrapper .pagination {
    margin: 0;
    gap: .25rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.dataTables_wrapper .page-link {
    border: 1px solid var(--ims-border);
    border-radius: var(--ims-radius-xs) !important;
    color: var(--ims-muted);
    padding: 0;
    height: 34px;
    min-width: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8125rem;
    line-height: 1;
    transition: all .15s ease;
}

.dataTables_wrapper .page-link:hover {
    background-color: var(--ims-row-hover);
    color: var(--ims-text);
    border-color: var(--ims-border-strong);
}

.dataTables_wrapper .page-item.active .page-link {
    background-color: var(--ims-accent);
    border-color: var(--ims-accent);
    color: #fff;
    box-shadow: 0 1px 2px rgba(15, 111, 111, .25);
}

.dataTables_wrapper .page-item.disabled .page-link {
    color: var(--ims-faint);
    background-color: transparent;
    border-color: var(--ims-border);
}

/* Sort arrows sit on the teal band, so they're white — dimmed when the column
   isn't the active sort, solid when it is. */
table.dataTable > thead .sorting:before,
table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_desc:before,
table.dataTable > thead .sorting_desc:after {
    opacity: .45;
    font-size: .7em;
    color: #fff;
}

table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_desc:after {
    opacity: 1;
    color: #fff;
}

table.dataTable > thead > tr > th.sorting:hover {
    background-color: var(--ims-accent-hover) !important;
}

.dataTables_wrapper .dataTables_processing {
    border: 1px solid var(--ims-border);
    border-radius: var(--ims-radius-sm);
    box-shadow: var(--ims-shadow-lg);
    background: #fff;
    color: var(--ims-text);
    padding: 1rem 1.5rem;
}

/* Empty state. */
.dataTables_wrapper .dataTables_empty {
    padding: 3.5rem 1rem;
    color: var(--ims-muted);
    font-size: .875rem;
}

/* Stack the table footer on small screens. */
@media (max-width: 575.98px) {
    .dataTables_wrapper .dataTables_paginate,
    .dataTables_wrapper .pagination { justify-content: center; }
    .dataTables_wrapper .dataTables_info { text-align: center; padding-top: .5rem; }
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_filter label { justify-content: flex-start; text-align: left; }
    .dataTables_wrapper .dataTables_filter input { min-width: 0; width: 100%; }
}

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

.form-control,
.form-select {
    border: 1px solid #cfd6e4;
    border-radius: 10px;
    padding: .6rem .85rem;
    color: var(--ims-text);
    font-size: .875rem;
    background-color: var(--ims-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ims-accent);
    box-shadow: 0 0 0 4px var(--ims-accent-ring);
}

/* Required fields get a quiet asterisk. */
.form-label:has(+ input[required])::after,
.form-label:has(+ select[required])::after {
    content: ' *';
    color: var(--ims-danger);
}

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2398a2b3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-label {
    font-weight: 500;
    font-size: .8125rem;
    margin-bottom: .4rem;
    color: var(--ims-text);
}

.form-text {
    color: var(--ims-muted);
    font-size: .75rem;
}

/* Validation feedback. */
.is-invalid {
    border-color: #fca5a5 !important;
}

.is-invalid:focus {
    border-color: #f87171 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12) !important;
}

.invalid-feedback {
    font-size: .75rem;
    margin-top: .3rem;
}

/* File input. */
.form-control[type="file"] {
    padding: .45rem .6rem;
    cursor: pointer;
}

.form-control[type="file"]::file-selector-button {
    border: 0;
    background: var(--ims-accent-soft);
    color: var(--ims-accent);
    font-weight: 500;
    font-size: .8125rem;
    padding: .4rem .8rem;
    margin-right: .75rem;
    border-radius: 6px;
    cursor: pointer;
}

/* Switches + checkboxes. */
.form-check-input:checked {
    background-color: var(--ims-accent);
    border-color: var(--ims-accent);
}

.form-check-input:focus {
    border-color: var(--ims-accent);
    box-shadow: 0 0 0 3px var(--ims-accent-ring);
}

/* --- Modals --------------------------------------------------------------- */

.modal-content {
    border: 0;
    border-radius: var(--ims-radius);
    box-shadow: 0 24px 40px -12px rgba(16, 24, 40, .18);
    overflow: hidden;
    animation: ims-modal-in .18s ease;
}

@keyframes ims-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* A thin brand accent across the top of every dialog. */
.modal-header {
    position: relative;
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--ims-border);
    align-items: center;
}

.modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ims-accent), var(--ims-badge-info-bg));
}

/* Neutral modal headers (the theme ships solid blue — ours are quiet). */
.modal-header.bg-primary {
    background: var(--ims-surface) !important;
    color: var(--ims-text) !important;
}

.modal-header .modal-title {
    color: var(--ims-text);
    font-size: 1rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.modal-header .modal-title svg.lucide {
    width: 18px;
    height: 18px;
    color: var(--ims-accent);
}

.modal-header .btn-close.btn-close-white {
    filter: none;
    background-size: .8em;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--ims-border);
    background: var(--ims-row-hover);
    gap: .5rem;
}

/* --- Dropdowns ------------------------------------------------------------ */

.dropdown-menu {
    border: 1px solid var(--ims-border);
    border-radius: var(--ims-radius-sm);
    box-shadow: var(--ims-shadow-lg);
    padding: .4rem;
    animation: ims-dropdown-in .16s ease;
    transform-origin: top right;
}

@keyframes ims-dropdown-in {
    from { opacity: 0; transform: translateY(-4px) scale(.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dropdown-item {
    border-radius: 7px;
    padding: .5rem .75rem;
    font-size: .84375rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.dropdown-item svg.lucide {
    width: 16px;
    height: 16px;
    color: var(--ims-muted);
}

.dropdown-item:hover {
    background-color: var(--ims-row-hover);
    color: var(--ims-text);
}

.dropdown-item:hover svg.lucide { color: inherit; }

.dropdown-item.active {
    background-color: var(--ims-accent-soft);
    color: var(--ims-accent);
}

.dropdown-header {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ims-faint);
    font-weight: 700;
}

.dropdown-divider {
    border-color: var(--ims-border);
    margin: .35rem 0;
}

/* --- Alerts ----------------------------------------------------------------
   Bootstrap's stock .alert ships solid, saturated backgrounds — restyled here
   to the same soft-bg / strong-text pairs as badges and stat icons, so a
   login-page error or an inline warning box reads as part of this design
   system instead of a raw Bootstrap component. */

.alert {
    border: 1px solid transparent;
    border-radius: var(--ims-radius-sm);
    font-size: .84375rem;
    padding: .85rem 1.1rem;
}

.alert-success { background-color: var(--ims-success-bg); border-color: #bbf7d0; color: var(--ims-success); }
.alert-warning { background-color: var(--ims-warning-bg); border-color: #fde68a; color: var(--ims-warning); }
.alert-danger  { background-color: var(--ims-danger-bg);  border-color: #fecaca; color: var(--ims-danger); }
.alert-info    { background-color: var(--ims-info-bg);    border-color: #bae6fd; color: var(--ims-info); }

.alert svg.lucide { width: 15px; height: 15px; }

/* --- Toastr --------------------------------------------------------------- */

#toast-container > div {
    border-radius: var(--ims-radius-sm) !important;
    box-shadow: var(--ims-shadow-lg) !important;
    border: 1px solid var(--ims-border);
    opacity: 1;
    padding: 14px 16px 14px 50px;
    background-size: 20px;
    background-position: 15px center;
    background-repeat: no-repeat;
    font-family: 'Inter', sans-serif;
    font-size: .84375rem;
}

/* toastr's stock icon is a white PNG meant to sit on a solid, saturated
   background. We use a light "alert card" look instead (same pastel bg +
   dark text as .alert-success/.alert-danger above), so the white icon was
   invisible on the near-white bg. Swap in a lucide-style check/x icon
   stroked in the matching dark color instead of relying on toastr's icon. */
#toast-container > .toast-success {
    background-color: #f0fdf4 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E") !important;
    color: var(--ims-success) !important;
}
#toast-container > .toast-error {
    background-color: #fef2f2 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E") !important;
    color: var(--ims-danger) !important;
}

#toast-container .toast-title { color: var(--ims-text); }
#toast-container .toast-message { color: var(--ims-text); }
#toast-container .toast-message a,
#toast-container .toast-message label { color: var(--ims-text); text-decoration: underline; }
#toast-container .toast-close-button { color: var(--ims-faint); text-shadow: none; }

/* --- Utilities ------------------------------------------------------------ */

/* Letter avatars. */
.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--ims-accent-strong), var(--ims-accent-hover));
    flex-shrink: 0;
}

.user-avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.user-avatar-md { width: 46px; height: 46px; font-size: 18px; }
.user-avatar-lg { width: 56px; height: 56px; font-size: 22px; }

/* Dashboard stat tiles. */
.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.stat-icon svg.lucide { width: 21px; height: 21px; }
.stat-icon-sm { width: 38px; height: 38px; font-size: 16px; }
.stat-icon-sm svg.lucide { width: 17px; height: 17px; }

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--ims-text);
}

/* Image previews in the item form and details modal. */
.image-preview {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--ims-radius-xs);
    border: 1px solid var(--ims-border);
}

.image-preview-lg {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--ims-radius-sm);
    border: 1px solid var(--ims-border);
}

/* Product detail hero image. */
.product-hero-img {
    width: 112px;
    height: 112px;
    object-fit: cover;
    border-radius: var(--ims-radius-sm);
    border: 1px solid var(--ims-border);
    box-shadow: var(--ims-shadow);
    flex-shrink: 0;
}

.product-hero-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ims-accent-soft), #f8fafc);
    color: var(--ims-accent);
}

.product-hero-empty svg.lucide {
    width: 42px;
    height: 42px;
}

/* Stat-tile icon tints (soft bg / strong glyph, matching the badge pairs).
   Color is a status signal, not decoration — a plain count (Categories,
   Team Members, Roles) stays neutral slate; only a tile that reports a real
   status (Active vs Inactive) earns the accent color. This keeps a 4-tile
   row from reading as four unrelated hues. */
.stat-icon.bg-secondary { background: #eef1f6; color: var(--ims-muted); }
.stat-icon.bg-primary   { background: var(--ims-accent-soft); color: var(--ims-accent); }
.stat-icon.bg-info      { background: var(--ims-info-bg);    color: var(--ims-info); }
.stat-icon.bg-warning   { background: var(--ims-warning-bg); color: var(--ims-warning); }
.stat-icon.bg-success   { background: var(--ims-success-bg); color: var(--ims-success); }

/* Section label above a card ("QUICK ACTIONS"). */
.text-uppercase {
    letter-spacing: .05em;
    font-size: .75rem;
    font-weight: 700;
    color: var(--ims-faint) !important;
}

h1, h2, h3, h4, h5, h6 { color: var(--ims-text); font-weight: 600; }

.text-secondary { color: var(--ims-muted) !important; }

hr { border-color: var(--ims-border); opacity: 1; }

/* --- Animations ----------------------------------------------------------- */

.page-content > * { animation: ims-fade-up .25s ease; }

@keyframes ims-fade-up {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Responsive ----------------------------------------------------------- */

/* Tablet: keep the rail but allow the off-canvas on small screens. */
@media screen and (max-width: 1025px) {
    .sidebar-wrapper { left: calc(-1 * var(--ims-sidebar-w)); }
    .page-content    { margin-left: 0; }
    .top-header .navbar { left: 0; }
    .wrapper.toggled .sidebar-wrapper { left: 0; }
    .wrapper.toggled .page-content   { margin-left: 0; }
}

/* Mobile: tighten padding, hide long labels. */
@media (max-width: 767.98px) {
    .page-content { padding: 1.25rem; }
    .company-pill-name,
    .company-pill-chevron { display: none !important; }
    .company-pill { padding: 0 .45rem; }
}