/* ============================================================================
* ninatrans-theme.css — Brand refresh overlay for Ninatrans WMS
*
* Load AFTER css/style.css. It only re-tunes design tokens (and flattens the
* primary button + page background), so the change cascades through every
* template that already uses hsl(var(--primary)) etc. Nothing else changes.
*
* To revert: remove the single in base.html. That's it.
* ========================================================================== */
:root {
/* Exact brand primary = #AB0534 --------------------------------------- */
--primary: 343 94% 34%; /* #AB0534 */
--primary-foreground: 0 0% 100%;
--primary-light: 343 90% 88%; /* soft tint for hover rows / chips */
--primary-dark: 342 94% 27%; /* #85042A — link/button hover */
--ring: 343 94% 34%;
/* Pure-white base, light-neutral secondary surfaces --------------------- */
--background: 0 0% 100%; /* #FFFFFF */
--foreground: 240 6% 10%; /* #18181B strong body text */
--card: 0 0% 100%;
--secondary: 240 5% 96%; /* #F4F4F5 sidebars / table stripes */
--muted: 240 5% 96%;
/* Flat brand fills — no gradients, matches the prototype ---------------- */
--gradient-primary: hsl(343 94% 34%);
--gradient-subtle: #ffffff;
/* Softer, flatter elevation -------------------------------------------- */
--shadow-card: 0 1px 3px hsl(240 5% 0% / 0.06);
--shadow-primary: 0 4px 12px hsl(343 94% 34% / 0.18);
}
/* Pure-white app shell (drops the subtle gradient) ------------------------- */
body.wms-app { background: #ffffff; }
/* Primary button: solid fill, flat hover (no lift), brand hover shade ------ */
/* ---------------------------------------------------------------------------
* Every button variant renders IDENTICALLY to the primary red button.
* We set the SAME direct properties wms-style.css uses on .btn-primary
* (not just --bs-btn-* variables), so all variants take the same code path.
* ------------------------------------------------------------------------- */
.btn-primary,
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary {
--bs-btn-color: #fff;
--bs-btn-bg: hsl(var(--primary));
--bs-btn-border-color: hsl(var(--primary));
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: hsl(var(--primary-dark));
--bs-btn-hover-border-color: hsl(var(--primary-dark));
--bs-btn-focus-shadow-rgb: 171, 5, 52;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: hsl(var(--primary-dark));
--bs-btn-active-border-color: hsl(var(--primary-dark));
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: hsl(var(--primary));
--bs-btn-disabled-border-color: hsl(var(--primary));
background: hsl(var(--primary));
border: none;
color: #fff;
border-radius: var(--radius);
box-shadow: var(--shadow-primary);
transition: background-color .12s ease, box-shadow .12s ease;
}
.btn-primary:hover,
.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-primary:focus,
.btn-secondary:focus,
.btn-outline-primary:focus,
.btn-outline-secondary:focus,
.btn-primary:active,
.btn-secondary:active,
.btn-outline-primary:active,
.btn-outline-secondary:active {
background: hsl(var(--primary-dark));
border: none;
color: #fff;
transform: none; /* remove the translateY lift */
box-shadow: var(--shadow-primary);
}
/* Pagination / page selector in brand red ---------------------------------- */
.pagination {
--bs-pagination-color: hsl(var(--primary));
--bs-pagination-hover-color: hsl(var(--primary-dark));
--bs-pagination-hover-bg: hsl(var(--primary) / 0.08);
--bs-pagination-hover-border-color: hsl(var(--card-border));
--bs-pagination-focus-color: hsl(var(--primary-dark));
--bs-pagination-focus-box-shadow: 0 0 0 3px hsl(var(--primary) / 0.13);
--bs-pagination-active-color: #fff;
--bs-pagination-active-bg: hsl(var(--primary));
--bs-pagination-active-border-color: hsl(var(--primary));
}
/* Focus ring on inputs picks up the brand ---------------------------------- */
.form-control:focus,
.form-select:focus {
border-color: hsl(var(--primary));
box-shadow: 0 0 0 3px hsl(var(--primary) / 0.13);
}
/* Table row hover reads as a faint brand tint (dense-table friendly) -------- */
.table > tbody > tr:hover > * {
background: hsl(var(--primary) / 0.04);
}
/* ============================================================================
* LAYOUT UPDATES — reusable patterns lifted from the prototype
*
* Everything below is OPT-IN via class names, so no existing template changes
* appearance unless you add the class. Markup examples are in the comments.
* ========================================================================== */
/* ---- 1. Roomier table density (prototype density level 5) ----------------
* Overrides the compact operational-listing rule with more breathing room.
* Applies to the standard listing tables (`.table.table-hover`); finance
* tables keep their own spacing. Remove this block to stay compact. */
.table.table-hover:not(.wms-table-finance) > :not(caption) > * > * {
padding: 0.8rem 0.95rem;
}
.table.table-hover:not(.wms-table-finance) > thead th {
padding-top: 0.7rem;
padding-bottom: 0.7rem;
}
/* ---- 2. Segmented tab bar --------------------------------------------------
* Replaces Bootstrap pill-tabs for status filters (Expected / Receiving / …).
* */
.wms-seg {
display: inline-flex;
gap: 2px;
padding: 3px;
background: hsl(var(--muted));
border: 1px solid hsl(var(--card-border));
border-radius: 9px;
}
.wms-seg__item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.9rem;
border: 0;
background: transparent;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
line-height: 1;
color: hsl(var(--muted-foreground));
text-decoration: none;
cursor: pointer;
transition: color 120ms ease, background 120ms ease;
}
.wms-seg__item:hover { color: hsl(var(--primary)); }
.wms-seg__item.is-active {
background: #fff;
color: hsl(var(--primary));
font-weight: 600;
box-shadow: 0 1px 2px hsl(240 5% 0% / 0.08);
}
.wms-seg__count {
font-size: 11px;
font-weight: 600;
padding: 1px 7px;
border-radius: 999px;
background: hsl(var(--card-border));
color: hsl(var(--muted-foreground));
}
.wms-seg__item.is-active .wms-seg__count {
background: hsl(var(--primary));
color: #fff;
}
/* ---- 3. In-table progress bar ---------------------------------------------
* Pick / receipt completion inside a table cell.
* */
.wms-progress {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 120px;
}
.wms-progress__track {
flex: 1;
min-width: 70px;
height: 6px;
background: hsl(var(--muted));
border-radius: 999px;
overflow: hidden;
}
.wms-progress__bar {
height: 100%;
background: hsl(var(--primary));
border-radius: 999px;
}
.wms-progress__label {
font-size: 11.5px;
color: hsl(var(--muted-foreground));
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* ---- 4. Inline column-filter row ------------------------------------------
* A second header row of compact inputs/selects for per-column filtering.
*
* … normal column headers …
*
* |
* |
*
* */
.table thead tr.wms-filter-row th {
background: hsl(var(--card));
padding: 0.45rem 0.6rem;
border-bottom: 1px solid hsl(var(--card-border));
vertical-align: middle;
}
.wms-filter-row .form-control,
.wms-filter-row .form-select {
height: 30px;
min-height: 30px;
font-size: 12px;
padding: 0 0.5rem;
line-height: 1.2;
}
/* ---- 5. Page-header action toolbar ----------------------------------------
* Right-aligned button group next to the page title.
* */
.wms-toolbar {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
/* ---- 6. Extra status-pill aliases used by the prototype -------------------
* Complements the existing .wms-status-pill--* set. */
.wms-status-pill--expected { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.wms-status-pill--receiving { background: hsl(var(--warning-light)); color: hsl(32 95% 30%); }
.wms-status-pill--completed { background: hsl(var(--success-light)); color: hsl(var(--success)); }
.wms-status-pill--picking { background: hsl(var(--primary) / 0.12); color: hsl(var(--primary)); }
.wms-status-pill--draft { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.wms-status-pill--held { background: hsl(0 85% 96%); color: hsl(0 70% 38%); }