/* ===================================================================
bootstrap-shadcn.css — IMPROVED
A shadcn-flavored skin layered on top of Bootstrap 3.4.1.
Load this AFTER bootstrap.css and AFTER your existing site.css.
No Bootstrap reference changes required.
NOTE ON BROWSER SUPPORT:
This relies on CSS custom properties (--vars), which IE11 does not
support. If your MVC5 app still has IE11 traffic, either drop a
PostCSS custom-properties fallback build, or replace var(--x) with
literal values for production. Edge/Chrome/Firefox/Safari are fine.
=================================================================== */
/* ================= TOKENS ================= */
:root {
/* Surfaces */
--bg: #ffffff;
--fg: #0f172a;
--muted: #64748b;
--muted-fg: #94a3b8;
--border: #e5e7eb;
--primary: #111827;
--primary-fg: #ffffff;
--secondary: #f9fafb;
--danger: #dc2626;
--danger-bg: #fef2f2;
--success: #16a34a;
--success-bg: #f0fdf4;
--warning: #d97706;
--warning-bg: #fffbeb;
--info: #2563eb;
--info-bg: #eff6ff;
--ring: rgba(17, 24, 39, 0.15);
/* Radius scale (derive everything from one base, like shadcn does) */
--radius: 8px;
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
/* Shadows (kept subtle, consistent elevation steps) */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-md: 0 6px 24px rgba(0, 0, 0, 0.05);
--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);
--shadow-xl: 0 10px 30px rgba(0, 0, 0, 0.10);
/* Layout */
--navbar-height: 50px; /* matches Bootstrap 3's default .navbar-fixed-top height */
--content-max-width: 1320px;
/* Motion */
--ease: cubic-bezier(0.16, 1, 0.3, 1);
}
/* Optional dark mode — uncomment and wire up a `data-theme="dark"`
attribute on or if you ever want it. Left inert by
default so it changes nothing unless you opt in. */
/*
[data-theme="dark"] {
--bg: #0b0f17;
--fg: #f1f5f9;
--muted: #94a3b8;
--border: #1f2937;
--primary: #f1f5f9;
--primary-fg: #0b0f17;
--secondary: #111827;
}
*/
/* ================= BASE / RESET ================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
padding-top: calc(var(--navbar-height) + 10px);
padding-bottom: 24px;
background: var(--bg);
color: var(--fg);
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}
.body-content {
padding-left: 15px;
padding-right: 15px;
}
.dl-horizontal dt {
white-space: normal;
}
/* Visible keyboard focus everywhere — Bootstrap 3 mostly relies on
default browser outlines, which look inconsistent next to the rest
of this skin. Don't remove outlines without replacing them. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--ring);
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition-duration: 0.001ms !important;
animation-duration: 0.001ms !important;
}
.panel:hover {
transform: none;
}
}
/* Container: rather than removing the width cap entirely (which gets
uncomfortable to read on ultra-wide monitors), give it a generous
but bounded max-width. Delete this block if you genuinely want
full-bleed layouts everywhere. */
.container {
max-width: min(100% - 30px, var(--content-max-width));
}
/* ================= NAVBAR ================= */
.navbar {
background: #fff;
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-sm);
min-height: var(--navbar-height);
}
.navbar-nav > li > a {
color: var(--muted);
padding: 14px 16px;
border-radius: var(--radius-md);
transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
background: var(--secondary);
color: var(--fg);
}
.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
background: var(--secondary);
color: var(--fg);
font-weight: 600;
}
/* ================= DROPDOWN ================= */
.dropdown-menu {
border-radius: var(--radius-lg);
border: 1px solid var(--border);
box-shadow: var(--shadow-xl);
padding: 6px;
}
.dropdown-menu > li > a {
padding: 8px 12px;
border-radius: var(--radius-md);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background: var(--secondary);
}
/* ================= SUBMENU ================= */
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -4px;
margin-left: 0;
border-radius: var(--radius-lg);
}
/* Hover for mouse users, focus-within for keyboard/tab users —
a hover-only submenu is invisible to anyone tabbing through. */
.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu:focus-within > .dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
content: "";
float: right;
border: solid var(--muted);
border-width: 0 1.5px 1.5px 0;
display: inline-block;
padding: 3px;
transform: rotate(-45deg);
margin-top: 6px;
}
.dropdown-submenu:hover > a:after,
.dropdown-submenu:focus-within > a:after {
border-color: var(--fg);
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 8px;
}
/* ================= BUTTONS ================= */
.btn {
border-radius: var(--radius-md);
border: 1px solid var(--border);
background: #fff;
color: var(--fg);
transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.btn:hover {
background: var(--secondary);
}
.btn-primary {
background: var(--primary);
border-color: var(--primary);
color: var(--primary-fg);
}
.btn-primary:hover {
background: #000;
border-color: #000;
}
/* Bootstrap's stock .btn-success / .btn-danger / .btn-warning /
.btn-info are saturated and will visually fight this neutral skin.
Retint them so the whole button family stays cohesive. */
.btn-success {
background: var(--success-bg);
border-color: var(--success);
color: var(--success);
}
.btn-success:hover {
background: var(--success);
color: #fff;
}
.btn-danger {
background: var(--danger-bg);
border-color: var(--danger);
color: var(--danger);
}
.btn-danger:hover {
background: var(--danger);
color: #fff;
}
.btn-warning {
background: var(--warning-bg);
border-color: var(--warning);
color: var(--warning);
}
.btn-warning:hover {
background: var(--warning);
color: #fff;
}
.btn-info {
background: var(--info-bg);
border-color: var(--info);
color: var(--info);
}
.btn-info:hover {
background: var(--info);
color: #fff;
}
/* A quiet/ghost variant — shadcn's most-used button is rarely the
filled primary one. Add class="btn btn-ghost" where you want it. */
.btn-ghost {
background: transparent;
border-color: transparent;
}
.btn-ghost:hover {
background: var(--secondary);
border-color: transparent;
}
/* Outline variant — same accent color as .btn-success but quieter,
for when the action repeats once per row (e.g. a "Renew" button
next to every item in a list). A solid green button works fine
once; ten of them down a list reads as noise. */
.btn-outline-success {
background: transparent;
border-color: var(--success);
color: var(--success);
}
.btn-outline-success:hover {
background: var(--success);
color: #fff;
}
/* ================= PANELS / CARDS ================= */
.panel {
border-radius: var(--radius-xl);
border: 1px solid var(--border);
box-shadow: var(--shadow-md);
transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.panel:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.panel-heading {
background: var(--secondary);
border-bottom: 1px solid var(--border);
border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
}
/* ================= FORMS ================= */
.form-control {
border-radius: var(--radius-lg);
border: 1px solid var(--border);
/* Bootstrap 3 ships an inset box-shadow on .form-control by default;
clear it first so our own focus ring below is the only shadow. */
box-shadow: none;
/* iOS Safari auto-zooms the page when focusing any field under
16px — Bootstrap 3's default form font-size is 14px, which
triggers it on every field on this site. */
font-size: 16px;
}
select,
textarea {
font-size: 16px;
}
.form-control:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--ring);
}
.has-error .form-control {
border-color: var(--danger);
}
.has-error .form-control:focus {
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.has-success .form-control {
border-color: var(--success);
}
.has-success .form-control:focus {
box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}
.help-block {
color: var(--muted);
font-size: 0.85em;
}
.has-error .help-block {
color: var(--danger);
}
/* Width cap for inputs: scoped to .form-control specifically (not a
blanket input/select rule) so checkboxes/radios aren't affected.
Applies everywhere by default, including inside .input-group and
.form-inline — Bootstrap's own .form-control defaults to width:100%,
so leaving this cap off in those contexts lets fields stretch to
fill the page, which is what broke the SKU field.
Opt a specific field OUT with class="form-control-full". */
.form-control:not(textarea) {
max-width: 320px;
}
.form-control-full {
max-width: none !important;
}
/* ================= TABLE ================= */
.table {
border: none;
}
.table thead th {
background: var(--secondary);
border-bottom: 1px solid var(--border);
font-weight: 600;
color: var(--fg);
}
.table tbody tr {
border-bottom: 1px solid #f1f5f9;
}
.table-hover tbody tr:hover {
background: var(--secondary);
}
/* ================= ALERTS ================= */
.alert {
border-radius: var(--radius-lg);
border: 1px solid transparent;
box-shadow: var(--shadow-sm);
}
.alert-success {
background: var(--success-bg);
border-color: rgba(22, 163, 74, 0.25);
color: #14532d;
}
.alert-danger {
background: var(--danger-bg);
border-color: rgba(220, 38, 38, 0.25);
color: #7f1d1d;
}
.alert-warning {
background: var(--warning-bg);
border-color: rgba(217, 119, 6, 0.25);
color: #78350f;
}
.alert-info {
background: var(--info-bg);
border-color: rgba(37, 99, 235, 0.25);
color: #1e3a8a;
}
/* ================= BADGES / LABELS ================= */
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--secondary);
color: var(--fg);
border: 1px solid var(--border);
border-radius: 999px;
font-weight: 600;
line-height: 1.3;
}
/* Severity badges — color by how urgent the situation is, not by
which channel/category it belongs to. A fixed "SMS is always blue"
color is just decoration; a red "0 remaining" vs amber "low" badge
is actually informative. */
.badge-critical {
background: var(--danger-bg);
color: var(--danger);
border: 1px solid rgba(220, 38, 38, 0.25);
}
.badge-low {
background: var(--warning-bg);
color: var(--warning);
border: 1px solid rgba(217, 119, 6, 0.25);
}
.badge-ok {
background: var(--success-bg);
color: var(--success);
border: 1px solid rgba(22, 163, 74, 0.25);
}
/* Channel-identity badges — same colors as the original inline styles
(#337ab7 / #5cb85c), just as reusable classes instead of inline
styles so they can't get overridden or drift out of sync. */
.badge-sms {
background: #337ab7;
color: #fff;
}
.badge-whatsapp {
background: #5cb85c;
color: #fff;
}
.label {
border-radius: var(--radius-sm);
font-weight: 600;
}
/* ================= LIST GROUP ================= */
.list-group-item {
border-color: var(--border);
}
.list-group-item:first-child {
border-top-left-radius: var(--radius-lg);
border-top-right-radius: var(--radius-lg);
}
.list-group-item:last-child {
border-bottom-left-radius: var(--radius-lg);
border-bottom-right-radius: var(--radius-lg);
}
.list-group-item.active,
.list-group-item.active:hover {
background: var(--primary);
border-color: var(--primary);
color: var(--primary-fg);
}
/* For rows that pair a label on the left with one or more badges on
the right (e.g. a store name + status badges) — keeps them aligned
on wide screens and wraps cleanly on narrow ones, instead of the
text and badges running together inline. */
.list-group-item-split {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
.list-group-item-split .badges {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
/* ================= PAGINATION ================= */
.pagination > li > a,
.pagination > li > span {
border-color: var(--border);
color: var(--fg);
}
.pagination > li > a:hover {
background: var(--secondary);
}
.pagination > .active > a,
.pagination > .active > a:hover {
background: var(--primary);
border-color: var(--primary);
}
/* ================= MODAL ================= */
.modal-content {
border-radius: var(--radius-xl);
border: none;
box-shadow: var(--shadow-xl);
}
.modal-header {
border-bottom: 1px solid var(--border);
}
.modal-footer {
border-top: 1px solid var(--border);
}
/* For a long, dynamically-rendered list (e.g. one row per store) so
the modal itself doesn't grow taller than the viewport. */
.modal-body-scroll {
max-height: 320px;
overflow-y: auto;
}
/* A line of explanatory text in the footer reads oddly jammed against
right-aligned buttons by default — give it its own line, left-aligned. */
.modal-footer-note {
margin: 0 0 10px;
text-align: left;
color: var(--muted);
}
/* ================= WELL ================= */
.well {
background: var(--secondary);
border: 1px solid var(--border);
box-shadow: none;
border-radius: var(--radius-lg);
}
/* ================= TOGGLE SWITCH ================= */
/* Drop-in replacement for a plain checkbox in dense tables/forms —
markup stays a real , so form posting and
model binding work exactly as before. Just wrap it:
*/
.toggle {
position: relative;
display: inline-block;
width: 40px;
height: 22px;
vertical-align: middle;
}
.toggle input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.toggle .toggle-track {
position: absolute;
inset: 0;
background: var(--secondary);
border: 1px solid var(--border);
border-radius: 999px;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.toggle .toggle-track::before {
content: "";
position: absolute;
width: 14px;
height: 14px;
left: 4px;
top: 4px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transition: transform 0.15s ease;
}
.toggle input:checked ~ .toggle-track {
background: var(--success);
border-color: var(--success);
}
.toggle input:checked ~ .toggle-track::before {
transform: translateX(18px);
}
.toggle input:focus-visible ~ .toggle-track {
box-shadow: 0 0 0 3px var(--ring);
}
.toggle input:disabled ~ .toggle-track {
opacity: 0.5;
cursor: not-allowed;
}
/* ================= STICKY-COLUMN TABLE ================= */
/* Wrap a wide table:
First column stays put while the rest scrolls horizontally. */
.table-responsive-sticky {
overflow-x: auto;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
.table-responsive-sticky > .table {
margin-bottom: 0;
}
.table-sticky-col > thead > tr > th:first-child {
position: sticky;
left: 0;
z-index: 3;
background: var(--secondary);
border-right: 1px solid var(--border);
}
.table-sticky-col > tbody > tr > td:first-child {
position: sticky;
left: 0;
z-index: 2;
border-right: 1px solid var(--border);
}
.table-sticky-col > tbody > tr:nth-of-type(odd) > td {
background: #fff;
}
.table-sticky-col > tbody > tr:nth-of-type(even) > td {
background: var(--secondary);
}
.table-sticky-col > tbody > tr:hover > td {
background: var(--secondary);
}
/* ================= GROUPED TABLE HEADERS ================= */
/* A two-row : first row has rowspan="2" cells for any columns
that don't belong to a group, plus colspan cells (class
table-group-label) naming each group; second row holds the actual
per-column labels (class table-subhead). */
.table-group-label {
text-align: center;
color: var(--muted);
font-weight: 600;
border-left: 1px solid var(--border);
}
.table-subhead {
text-align: center;
color: var(--muted);
font-weight: 600;
font-size: 12px;
}
/* ================= LOCKED / CALCULATED BADGE ================= */
/* For a value that's computed, not entered — swap the disabled-look
input for this, plus a hidden input alongside it so the value still
posts with the form. */
.badge-locked {
background: var(--secondary);
color: var(--muted);
border: 1px solid var(--border);
cursor: help;
}
.badge-locked .glyphicon {
font-size: 10px;
margin-left: 2px;
}
/* For a readonly/calculated text input (e.g. IGST) — keeps it a real
input so existing JS that does $(...).val(x) on it keeps working;
just makes it look visually locked instead of like a plain editable
field that happens to be grayed out. */
.form-control-locked {
background: var(--secondary);
color: var(--muted);
cursor: not-allowed;
}