/* shadcn/ui-inspired theme layer — scoped to .shadcn-ui, sits on top of Bootstrap 5 */
.shadcn-ui {
--sc-border: #e4e4e7;
--sc-bg-muted: #f4f4f5;
--sc-muted-fg: #71717a;
--sc-fg: #18181b;
--sc-primary: #5D87FF;
--sc-primary-dark: #4570ea;
--sc-primary-soft: #eef2ff;
--sc-ring: rgba(93, 135, 255, .18);
--sc-radius-lg: 0.75rem;
--sc-radius-md: 0.5rem;
--sc-radius-sm: 0.375rem;
color: var(--sc-fg);
font-size: 0.9rem;
}
/* The admin theme's own CSS sets a hard `.container-fluid{max-width:1200px}`
cap (meant for a centered `margin:0 auto` layout). Every admin page in this
design system uses `.container-fluid.mx-0` to kill that centering so content
sits flush against the sidebar — but mx-0 only zeroes the margin, not the
max-width, so on any viewport wider than ~1200px+sidebar the leftover width
has nowhere to go but the right edge (no margin left to distribute it into),
producing a lopsided gap. Uncapping max-width here fixes it everywhere at
once instead of patching every page's wrapper div individually. */
.shadcn-ui .container-fluid.mx-0 { max-width: none !important; padding-top: .25rem !important; padding-bottom: .25rem !important; }
/* Double scrollbar on the sidebar nav. SimpleBar's own CSS sets
`.simplebar-wrapper { height: inherit }`, which copies the parent
[data-simplebar] element's AUTHORED CSS height (`calc(100vh - 80px)`,
the theme's value) rather than its actual post-flex rendered height. Now
that the sidebar is a flex column with a footer below the nav, the nav's
real height is smaller than that calc() value, so the inherited-height
wrapper overflows the nav by the difference — triggering the nav's own
native overflow-y:auto scrollbar IN ADDITION TO SimpleBar's own intended
custom scrollbar further inside. `height:100%` instead resolves against
the nav's actual flexed height, closing the gap. */
.shadcn-ui .left-sidebar [data-simplebar] > .simplebar-wrapper { height: 100% !important; }
/* Typography */
.shadcn-ui h2, .shadcn-ui h3, .shadcn-ui h4, .shadcn-ui h5, .shadcn-ui h6 {
color: var(--sc-fg);
letter-spacing: -0.01em;
}
.shadcn-ui .text-muted { color: var(--sc-muted-fg) !important; }
/* Cards */
.shadcn-ui .card {
background: #fff;
border: 1px solid var(--sc-border);
border-radius: var(--sc-radius-lg);
box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
/* Bootstrap's .border utility is !important and a different gray — neutralize it
so pages that still stack `card border shadow-sm` (older markup) match anyway. */
.shadcn-ui .card.border { border-color: var(--sc-border) !important; }
.shadcn-ui .card-header {
background: transparent;
border-bottom: 1px solid var(--sc-border);
font-weight: 600;
font-size: .875rem;
}
/* Bootstrap's .bg-light/.bg-white utilities carry !important and show up stacked
on card-header across older markup ("card-header bg-light") — neutralize so
every card header stays the flat transparent-with-border look. */
.shadcn-ui .card-header.bg-light,
.shadcn-ui .card-header.bg-white { background: transparent !important; }
/* Keep table headers visibly separated from the rows while overriding the
older Bootstrap background utility. */
.shadcn-ui .table > thead.bg-light,
.shadcn-ui .table > thead.bg-light th { background: var(--sc-bg-muted) !important; }
.shadcn-ui .card-footer {
background: transparent;
border-top: 1px solid var(--sc-border);
}
/* Buttons */
.shadcn-ui .btn {
border-radius: var(--sc-radius-md);
font-size: .875rem;
font-weight: 500;
padding: .5rem .9rem;
box-shadow: none;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.shadcn-ui .btn-sm { padding: .3rem .6rem; font-size: .8rem; }
.shadcn-ui .btn-primary {
background: var(--sc-primary);
border-color: var(--sc-primary);
color: #fff;
}
.shadcn-ui .btn-primary:hover,
.shadcn-ui .btn-primary:focus {
background: var(--sc-primary-dark);
border-color: var(--sc-primary-dark);
color: #fff;
}
.shadcn-ui .btn-outline-secondary,
.shadcn-ui .btn-outline-danger {
background: #fff;
border-color: var(--sc-border);
color: var(--sc-fg);
}
.shadcn-ui .btn-outline-primary {
background: #fff;
border-color: var(--sc-primary);
color: var(--sc-primary);
}
.shadcn-ui .btn-outline-secondary:hover { background: var(--sc-bg-muted); border-color: var(--sc-border); color: var(--sc-fg); }
.shadcn-ui .btn-outline-primary:hover { background: var(--sc-primary-soft); border-color: var(--sc-primary); color: var(--sc-primary-dark); }
.shadcn-ui .btn-outline-danger:hover { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.shadcn-ui .btn:focus { box-shadow: 0 0 0 3px var(--sc-ring); }
.shadcn-ui .btn-group .btn { border-radius: var(--sc-radius-md); }
/* Soft/light-tint action buttons — for row-level icon actions (view/edit/delete) */
.shadcn-ui .btn-soft-primary { background: var(--sc-primary-soft); border-color: transparent; color: var(--sc-primary-dark); }
.shadcn-ui .btn-soft-primary:hover { background: #dfe7ff; color: var(--sc-primary-dark); }
.shadcn-ui .btn-soft-warning { background: #fef9c3; border-color: transparent; color: #854d0e; }
.shadcn-ui .btn-soft-warning:hover { background: #fef08a; color: #854d0e; }
.shadcn-ui .btn-soft-danger { background: #fee2e2; border-color: transparent; color: #991b1b; }
.shadcn-ui .btn-soft-danger:hover { background: #fecaca; color: #991b1b; }
/* Solid success/warning/danger/secondary buttons — the admin theme's own defaults
for these (mint-teal #13DEB9, orange #FFAE1F, salmon #FA896B, and a bright CYAN
#49BEFF for "secondary" of all things) are saturated/neon and clash hard with the
muted zinc+one-accent palette. These aren't row-level icon actions (that's what
.btn-soft-* above is for) — they're real CTAs in modals/forms (confirm, cancel,
report-issue, mark-done), so they stay solid/filled, just toned down. Found via
the admin receive-inventory modal, which still used these raw theme colors. */
.shadcn-ui .btn-success {
--bs-btn-bg: #16a34a; --bs-btn-border-color: #16a34a;
--bs-btn-hover-bg: #15803d; --bs-btn-hover-border-color: #15803d;
--bs-btn-active-bg: #15803d; --bs-btn-active-border-color: #166534;
--bs-btn-disabled-bg: #16a34a; --bs-btn-disabled-border-color: #16a34a;
--bs-btn-focus-shadow-rgb: 22,163,74;
}
.shadcn-ui .btn-warning {
--bs-btn-color: #fff; --bs-btn-bg: #d97706; --bs-btn-border-color: #d97706;
--bs-btn-hover-color: #fff; --bs-btn-hover-bg: #b45309; --bs-btn-hover-border-color: #b45309;
--bs-btn-active-color: #fff; --bs-btn-active-bg: #b45309; --bs-btn-active-border-color: #92400e;
--bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #d97706; --bs-btn-disabled-border-color: #d97706;
--bs-btn-focus-shadow-rgb: 217,119,6;
}
.shadcn-ui .btn-danger {
--bs-btn-bg: #dc2626; --bs-btn-border-color: #dc2626;
--bs-btn-hover-bg: #b91c1c; --bs-btn-hover-border-color: #b91c1c;
--bs-btn-active-bg: #b91c1c; --bs-btn-active-border-color: #991b1b;
--bs-btn-disabled-bg: #dc2626; --bs-btn-disabled-border-color: #dc2626;
--bs-btn-focus-shadow-rgb: 220,38,38;
}
.shadcn-ui .btn-secondary {
--bs-btn-color: var(--sc-fg); --bs-btn-bg: var(--sc-bg-muted); --bs-btn-border-color: var(--sc-border);
--bs-btn-hover-color: var(--sc-fg); --bs-btn-hover-bg: #e4e4e7; --bs-btn-hover-border-color: var(--sc-border);
--bs-btn-active-color: var(--sc-fg); --bs-btn-active-bg: #d4d4d8; --bs-btn-active-border-color: var(--sc-border);
--bs-btn-disabled-color: var(--sc-muted-fg); --bs-btn-disabled-bg: var(--sc-bg-muted); --bs-btn-disabled-border-color: var(--sc-border);
--bs-btn-focus-shadow-rgb: 161,161,170;
}
/* Inputs */
.shadcn-ui .form-control,
.shadcn-ui .form-select {
border: 1px solid var(--sc-border);
border-radius: var(--sc-radius-md);
font-size: .875rem;
padding: .5rem .75rem;
box-shadow: none;
}
.shadcn-ui .form-control:focus,
.shadcn-ui .form-select:focus {
border-color: var(--sc-primary);
box-shadow: 0 0 0 3px var(--sc-ring);
}
.shadcn-ui .form-label { font-size: .8rem; font-weight: 600; color: var(--sc-fg); margin-bottom: .35rem; }
.shadcn-ui .input-group-text { background: #fff; border-color: var(--sc-border); color: var(--sc-muted-fg); }
.shadcn-ui .form-text { color: var(--sc-muted-fg); font-size: .78rem; }
/* Tables */
.shadcn-ui .table { font-size: .875rem; color: var(--sc-fg); }
.shadcn-ui .table > thead {
background: transparent;
}
.shadcn-ui .table > thead th {
border-bottom: 1px solid var(--sc-border);
border-top: none;
text-transform: uppercase;
font-size: .72rem;
letter-spacing: .04em;
font-weight: 600;
color: var(--sc-muted-fg);
padding: .75rem 1rem;
background: transparent;
}
.shadcn-ui .table > tbody td {
border-bottom: 1px solid var(--sc-border);
border-top: none;
padding: .75rem 1rem;
vertical-align: middle;
}
.shadcn-ui .table > tbody tr:last-child td { border-bottom: none; }
.shadcn-ui .table-hover > tbody > tr:hover > * { background: var(--sc-bg-muted); }
.shadcn-ui .table > tbody > tr.table-danger > * { background: #fef2f2 !important; }
/* .table-sm is dead everywhere otherwise: Bootstrap's own .table-sm rule
(.table-sm > :not(caption) > * > *, 1 class) always loses the specificity
fight against the two rules above (.shadcn-ui .table > thead th /
.shadcn-ui .table > tbody td, 2 classes + element), so every "compact"
table in the app silently renders at full padding. This rule has one more
class than those (.shadcn-ui + .table-sm + :not(caption) pseudo-class = 3)
so it actually wins and table-sm does something again. */
.shadcn-ui .table-sm > :not(caption) > * > * { padding: .45rem .6rem; }
/* Badges — soft/muted, rounded-md instead of pill */
.shadcn-ui .badge {
font-weight: 500;
font-size: .74rem;
border-radius: var(--sc-radius-sm);
padding: .3rem .55rem;
}
.shadcn-ui .badge.rounded-pill { border-radius: 999px; }
.shadcn-ui .badge.bg-primary-subtle { background: var(--sc-primary-soft) !important; color: var(--sc-primary-dark) !important; }
.shadcn-ui .badge.bg-success { background: #dcfce7 !important; color: #166534 !important; }
.shadcn-ui .badge.bg-warning { background: #fef9c3 !important; color: #854d0e !important; }
.shadcn-ui .badge.bg-danger { background: #fee2e2 !important; color: #991b1b !important; }
.shadcn-ui .badge.bg-info { background: #dbeafe !important; color: #1e40af !important; }
.shadcn-ui .badge.bg-secondary { background: var(--sc-bg-muted) !important; color: var(--sc-muted-fg) !important; }
.shadcn-ui .badge.bg-primary { background: var(--sc-primary-soft) !important; color: var(--sc-primary-dark) !important; }
/* Orders module (purchase/sales/inbound/outbound) uses `badge bg-light text-dark` for
plain quantity chips in the products table — not a status badge, so it's not in the
list above, but left alone it keeps Bootstrap's own `bg-light` fill (a slightly
different, harsher gray than our zinc tokens). Soften it the same way bg-secondary
is softened. */
.shadcn-ui .badge.bg-light { background: var(--sc-bg-muted) !important; color: var(--sc-fg) !important; }
/* Same saturated-fill problem, but on arbitrary non-badge elements (a modal-header,
a banner div) using the bare `bg-success`/`bg-warning`/etc. utility instead of a
`.badge`. Found on the admin "Report Shortage/Damage Claims" modal header
(`class="modal-header bg-warning"` — a solid orange bar). These rules are
intentionally LESS specific than the `.badge.bg-*` ones above, so a real badge
still gets the badge treatment; this only catches everything else. */
.shadcn-ui .bg-success:not(.badge) { background: #dcfce7 !important; color: #166534 !important; }
.shadcn-ui .bg-warning:not(.badge) { background: #fef9c3 !important; color: #854d0e !important; }
.shadcn-ui .bg-danger:not(.badge) { background: #fee2e2 !important; color: #991b1b !important; }
/* Dropdown */
.shadcn-ui .dropdown-menu {
border: 1px solid var(--sc-border);
border-radius: var(--sc-radius-md);
box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
padding: .35rem;
}
.shadcn-ui .dropdown-item {
border-radius: var(--sc-radius-sm);
font-size: .85rem;
padding: .5rem .6rem;
}
.shadcn-ui .dropdown-item:hover, .shadcn-ui .dropdown-item:focus { background: var(--sc-bg-muted); }
/* The theme sets --bs-dropdown-divider-bg: transparent, which makes a stock
invisible. Set border-top-color directly so it
doesn't matter what that variable resolves to. */
.shadcn-ui .dropdown-divider {
border-top-color: var(--sc-border);
opacity: 1;
margin: .35rem 0;
}
/* Modal — bounded to viewport height so long forms always scroll internally,
regardless of ancestor layout quirks (%-height chains can break under
transformed/animated sidebar containers; vh is always viewport-relative).
!important because Bootstrap's own .modal-dialog-scrollable .modal-content
rule has equal specificity and was winning unpredictably depending on
stylesheet order. */
.shadcn-ui .modal-dialog {
margin-top: 1.75rem;
margin-bottom: 1.75rem;
}
.shadcn-ui .modal-content {
/* Custom overlay modals (plain divs, not Bootstrap's real .modal wrapper)
never get --bs-modal-bg defined (Bootstrap scopes that var to .modal
itself), so var(--bs-modal-bg) resolves to transparent with no fallback.
Set background explicitly so every modal variant is opaque regardless
of whether it's a real .modal or a hand-rolled overlay. */
background: #fff;
border: 1px solid var(--sc-border);
border-radius: var(--sc-radius-lg);
box-shadow: 0 20px 50px rgba(0, 0, 0, .15);
max-height: calc(100vh - 3.5rem) !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
.shadcn-ui .modal-body {
overflow-y: auto !important;
min-height: 0;
}
.shadcn-ui .modal-header, .shadcn-ui .modal-footer { border-color: var(--sc-border); flex-shrink: 0; }
/* When a