/* ==========================================================================
Modern UI overlay — SSTPL admin
Added 2026-08-22.
Loaded LAST in , after app.min.css and every vendor stylesheet, so it
wins on specificity without any existing file being edited.
Deliberately additive: this file only changes colour, radius, shadow, spacing,
borders and type. It never touches display / position / float / width on
structural elements, so sidebar flyouts, DataTables and select2 keep working
exactly as before.
To roll back completely: remove the single to this file in
resources/views/admin/layouts/app.blade.php.
========================================================================== */
:root {
/* brand — kept close to the existing navy so nothing feels foreign */
--ui-navy-900: #14243d;
--ui-navy-800: #1b3054;
--ui-navy-700: #233d6b;
--ui-primary: #2563eb;
--ui-primary-600: #1d4ed8;
--ui-primary-050: #eff4ff;
--ui-success: #0f9d58;
--ui-success-050: #e8f6ef;
--ui-warning: #d97706;
--ui-warning-050: #fef4e6;
--ui-danger: #dc2626;
--ui-danger-050: #fdecec;
--ui-info: #0891b2;
--ui-info-050: #e6f6fa;
/* neutrals */
--ui-bg: #f4f6fa;
--ui-surface: #ffffff;
--ui-border: #e4e8f0;
--ui-border-strong: #d3d9e4;
--ui-text: #1f2937;
--ui-text-muted: #6b7280;
--ui-radius-sm: 8px;
--ui-radius: 12px;
--ui-radius-lg: 16px;
--ui-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
--ui-shadow-sm: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
--ui-shadow-md: 0 4px 12px rgba(16, 24, 40, .07), 0 2px 4px rgba(16, 24, 40, .04);
--ui-shadow-lg: 0 12px 28px rgba(16, 24, 40, .10), 0 4px 10px rgba(16, 24, 40, .05);
--ui-ring: 0 0 0 3px rgba(37, 99, 235, .16);
--ui-transition: 140ms cubic-bezier(.4, 0, .2, 1);
}
/* --------------------------------------------------------------- base ---- */
body {
background: var(--ui-bg);
color: var(--ui-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.005em;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
color: #111827;
font-weight: 600;
letter-spacing: -0.018em;
}
a { text-decoration: none; }
hr { border-color: var(--ui-border); opacity: 1; }
::selection { background: rgba(37, 99, 235, .16); }
/* thin, unobtrusive scrollbars */
* { scrollbar-width: thin; scrollbar-color: #c7cedb transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #c7cedb; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #aab4c6; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }
/* -------------------------------------------------------------- cards ---- */
.card,
.card.widget {
background: var(--ui-surface);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius);
box-shadow: var(--ui-shadow-sm);
transition: box-shadow var(--ui-transition), transform var(--ui-transition);
}
.card.widget:hover { box-shadow: var(--ui-shadow-md); }
.card-header {
background: transparent;
border-bottom: 1px solid var(--ui-border);
font-weight: 600;
color: #111827;
padding: .85rem 1.15rem;
border-radius: var(--ui-radius) var(--ui-radius) 0 0 !important;
}
.card-header.bg-primary,
.card-header.bg-dark {
border-bottom: none;
color: #fff;
}
.card-header.bg-primary { background: var(--ui-primary) !important; }
.card-header.bg-dark { background: var(--ui-navy-800) !important; }
.card-body { padding: 1.15rem; }
.card-footer { background: transparent; border-top: 1px solid var(--ui-border); }
/* ------------------------------------------------------------ buttons ---- */
.btn {
--bs-btn-focus-box-shadow: var(--ui-ring);
border-radius: var(--ui-radius-sm);
font-weight: 500;
letter-spacing: -0.006em;
padding: .5rem .95rem;
transition: background-color var(--ui-transition), border-color var(--ui-transition),
box-shadow var(--ui-transition), transform var(--ui-transition), color var(--ui-transition);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--ui-ring); outline: none; }
.btn-sm { padding: .32rem .68rem; border-radius: 7px; font-size: .82rem; }
.btn-lg { padding: .7rem 1.3rem; border-radius: var(--ui-radius); }
.btn-primary {
background: var(--ui-primary);
border-color: var(--ui-primary);
box-shadow: var(--ui-shadow-xs);
}
.btn-primary:hover { background: var(--ui-primary-600); border-color: var(--ui-primary-600); }
.btn-dark { background: var(--ui-navy-800); border-color: var(--ui-navy-800); }
.btn-dark:hover { background: var(--ui-navy-900); border-color: var(--ui-navy-900); }
.btn-success { background: var(--ui-success); border-color: var(--ui-success); }
.btn-danger { background: var(--ui-danger); border-color: var(--ui-danger); }
.btn-warning { background: var(--ui-warning); border-color: var(--ui-warning); color: #fff; }
.btn-info { background: var(--ui-info); border-color: var(--ui-info); color: #fff; }
.btn-outline-primary { color: var(--ui-primary); border-color: var(--ui-border-strong); }
.btn-outline-primary:hover { background: var(--ui-primary); border-color: var(--ui-primary); color: #fff; }
.btn-outline-secondary { color: #495566; border-color: var(--ui-border-strong); }
.btn-outline-secondary:hover { background: #f3f5f9; border-color: var(--ui-border-strong); color: #111827; }
.btn-outline-danger { color: var(--ui-danger); border-color: #f0c4c4; }
.btn-outline-danger:hover { background: var(--ui-danger); border-color: var(--ui-danger); color: #fff; }
.btn i, .btn .uil { vertical-align: -1px; }
/* ------------------------------------------------- forms & dropdowns ----- */
.form-label {
font-weight: 500;
font-size: .86rem;
color: #374151;
margin-bottom: .35rem;
}
.form-control,
.form-select,
.input-group-text {
border-radius: var(--ui-radius-sm);
border: 1px solid var(--ui-border-strong);
padding: .52rem .8rem;
font-size: .92rem;
color: var(--ui-text);
background-color: #fff;
transition: border-color var(--ui-transition), box-shadow var(--ui-transition), background-color var(--ui-transition);
}
.form-control::placeholder { color: #9aa3b2; }
.form-control:hover:not(:disabled),
.form-select:hover:not(:disabled) { border-color: #bcc5d4; }
.form-control:focus,
.form-select:focus {
border-color: var(--ui-primary);
box-shadow: var(--ui-ring);
background-color: #fff;
}
.form-control:disabled, .form-control[readonly],
.form-select:disabled { background-color: #f6f8fb; color: #8a93a3; }
.form-control-sm, .form-select-sm { padding: .34rem .6rem; font-size: .84rem; border-radius: 7px; }
.input-group-text { background: #f6f8fb; color: #5b6577; }
/* native select caret */
.form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
background-position: right .7rem center;
background-size: 15px 15px;
}
/* checkboxes / switches */
.form-check-input {
border-color: var(--ui-border-strong);
transition: background-color var(--ui-transition), border-color var(--ui-transition), box-shadow var(--ui-transition);
}
.form-check-input:checked { background-color: var(--ui-primary); border-color: var(--ui-primary); }
.form-check-input:focus { border-color: var(--ui-primary); box-shadow: var(--ui-ring); }
.form-check-label { font-size: .9rem; color: #374151; }
.form-text { color: var(--ui-text-muted); }
/* ---- select2: the biggest single win, its stock theme is what reads dated - */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
border-radius: var(--ui-radius-sm) !important;
border: 1px solid var(--ui-border-strong) !important;
min-height: 40px;
padding: 2px 4px;
transition: border-color var(--ui-transition), box-shadow var(--ui-transition);
}
.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--multiple:hover { border-color: #bcc5d4 !important; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
border-color: var(--ui-primary) !important;
box-shadow: var(--ui-ring);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 36px;
color: var(--ui-text);
padding-left: 10px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; right: 6px; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #9aa3b2; }
.select2-dropdown {
border: 1px solid var(--ui-border) !important;
border-radius: var(--ui-radius) !important;
box-shadow: var(--ui-shadow-lg);
overflow: hidden;
padding: 4px;
}
.select2-container--default .select2-results__option {
border-radius: 7px;
padding: .48rem .65rem;
font-size: .91rem;
transition: background-color var(--ui-transition), color var(--ui-transition);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background: var(--ui-primary-050) !important;
color: var(--ui-primary-600) !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background: #f2f5fa;
color: #111827;
font-weight: 500;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border-radius: var(--ui-radius-sm);
border: 1px solid var(--ui-border-strong);
padding: .42rem .6rem;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
border-color: var(--ui-primary);
box-shadow: var(--ui-ring);
outline: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
background: var(--ui-primary-050);
border: 1px solid #d3e0fb;
color: var(--ui-primary-600);
border-radius: 6px;
padding: 2px 8px;
font-size: .85rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--ui-primary-600); }
/* ---- bootstrap dropdown menus ---- */
.dropdown-menu {
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius);
box-shadow: var(--ui-shadow-lg);
padding: 6px;
font-size: .92rem;
}
.dropdown-item {
border-radius: 7px;
padding: .48rem .7rem;
color: #374151;
transition: background-color var(--ui-transition), color var(--ui-transition);
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--ui-primary-050); color: var(--ui-primary-600); }
.dropdown-item.active, .dropdown-item:active { background: var(--ui-primary); color: #fff; }
.dropdown-divider { border-color: var(--ui-border); }
.dropdown-header { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ui-text-muted); font-weight: 600; }
/* ------------------------------------------------------------- tables ---- */
.table {
--bs-table-hover-bg: #f7f9fc;
color: var(--ui-text);
border-color: var(--ui-border);
font-size: .91rem;
}
.table > thead > tr > th {
background: #f7f9fc;
color: #55607280;
color: #556072;
font-weight: 600;
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .045em;
border-bottom: 1px solid var(--ui-border) !important;
padding: .7rem .8rem;
/* deliberately NOT nowrap: these tables run 10+ columns, and letting headers
wrap keeps more of the row visible before horizontal scrolling kicks in */
}
.table > tbody > tr > td { padding: .72rem .8rem; vertical-align: middle; border-color: #eef1f6; }
.table > tbody > tr:last-child > td { border-bottom: none; }
.table-hover > tbody > tr { transition: background-color var(--ui-transition); }
.table-light > :not(caption) > * > * { background: #f7f9fc; }
.table-responsive { border-radius: var(--ui-radius); }
/* DataTables chrome */
div.dt-container .dt-search input,
div.dt-container .dt-length select,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
border-radius: var(--ui-radius-sm);
border: 1px solid var(--ui-border-strong);
padding: .38rem .65rem;
}
div.dt-container .dt-search input:focus,
.dataTables_wrapper .dataTables_filter input:focus {
border-color: var(--ui-primary);
box-shadow: var(--ui-ring);
outline: none;
}
div.dt-container .dt-paging .dt-paging-button,
.dataTables_wrapper .dataTables_paginate .paginate_button {
border-radius: 7px !important;
border: 1px solid transparent !important;
padding: .3rem .62rem !important;
margin: 0 2px;
color: #4b5563 !important;
transition: background-color var(--ui-transition), color var(--ui-transition);
}
div.dt-container .dt-paging .dt-paging-button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: #eef2f8 !important;
border-color: transparent !important;
color: #111827 !important;
}
div.dt-container .dt-paging .dt-paging-button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
background: var(--ui-primary) !important;
border-color: var(--ui-primary) !important;
color: #fff !important;
}
/* --------------------------------------------------- badges & alerts ----- */
.badge {
font-weight: 600;
font-size: .72rem;
letter-spacing: .015em;
padding: .34em .62em;
border-radius: 6px;
}
.badge.bg-success { background: var(--ui-success) !important; }
.badge.bg-danger { background: var(--ui-danger) !important; }
.badge.bg-warning { background: var(--ui-warning) !important; color: #fff !important; }
.badge.bg-info { background: var(--ui-info) !important; color: #fff !important; }
.badge.bg-light { background: #f2f4f8 !important; color: #4b5563 !important; border-color: var(--ui-border) !important; }
.alert {
border-radius: var(--ui-radius);
border: 1px solid transparent;
padding: .8rem 1rem;
font-size: .92rem;
box-shadow: var(--ui-shadow-xs);
}
.alert-success { background: var(--ui-success-050); border-color: #bfe5d3; color: #0b5f38; }
.alert-danger { background: var(--ui-danger-050); border-color: #f3c6c6; color: #9b1c1c; }
.alert-warning { background: var(--ui-warning-050); border-color: #f5d9a8; color: #8a5108; }
.alert-info { background: var(--ui-info-050); border-color: #b9e3ee; color: #0b5c70; }
.alert-light { background: #f8fafc; border-color: var(--ui-border); color: #4b5563; }
/* ------------------------------------------------------------- modals ---- */
.modal-content {
border: none;
border-radius: var(--ui-radius-lg);
box-shadow: 0 24px 60px rgba(16, 24, 40, .18);
}
.modal-header { border-bottom: 1px solid var(--ui-border); padding: 1.05rem 1.25rem; }
.modal-title { font-weight: 600; letter-spacing: -0.015em; }
.modal-body { padding: 1.25rem; }
.modal-footer { border-top: 1px solid var(--ui-border); padding: .9rem 1.25rem; }
.modal-backdrop.show { opacity: .45; }
/* --------------------------------------------------------- navigation ---- */
.breadcrumb { font-size: .86rem; margin-bottom: 0; }
.breadcrumb-item a { color: var(--ui-primary); }
.breadcrumb-item a:hover { color: var(--ui-primary-600); text-decoration: underline; }
.breadcrumb-item.active { color: var(--ui-text-muted); }
.breadcrumb h5 { letter-spacing: -0.02em; }
.nav-tabs { border-bottom: 1px solid var(--ui-border); }
.nav-tabs .nav-link {
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
color: var(--ui-text-muted);
font-weight: 500;
padding: .6rem .9rem;
transition: color var(--ui-transition), border-color var(--ui-transition);
}
.nav-tabs .nav-link:hover { color: var(--ui-text); border-bottom-color: var(--ui-border-strong); }
.nav-tabs .nav-link.active { color: var(--ui-primary); border-bottom-color: var(--ui-primary); background: transparent; }
.pagination { --bs-pagination-border-radius: 7px; }
.page-link { border-radius: 7px; margin: 0 2px; border-color: transparent; color: #4b5563; }
.page-link:hover { background: #eef2f8; color: #111827; }
.page-item.active .page-link { background: var(--ui-primary); border-color: var(--ui-primary); }
/* ------------------------------------------------------------ sidebar ---- */
/* colour and spacing only — the flyout positioning is JS-driven, untouched */
.menu.bg-dark { background: var(--ui-navy-900) !important; }
.menu-body ul li > a {
border-radius: var(--ui-radius-sm);
margin: 1px 8px;
padding: .55rem .7rem;
color: #b6c2d6;
font-size: .9rem;
font-weight: 450;
transition: background-color var(--ui-transition), color var(--ui-transition);
}
.menu-body ul li > a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.menu-body ul li > a.active {
background: var(--ui-primary) !important;
color: #fff !important;
box-shadow: 0 2px 8px rgba(37, 99, 235, .35);
}
.menu-body ul li > a.active .nav-link-icon { color: #fff; }
.menu-body .nav-link-icon { opacity: .92; }
.submenu-name {
background: var(--ui-navy-800);
border-radius: var(--ui-radius);
box-shadow: var(--ui-shadow-lg);
padding: 5px;
border: 1px solid rgba(255, 255, 255, .06);
}
.submenu-name li > a {
border-radius: 7px;
font-size: .875rem;
color: #c3cddd;
padding: .45rem .65rem;
margin: 1px 2px;
}
.submenu-name li > a:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.menu-header { border-bottom: 1px solid rgba(255, 255, 255, .07); }
/* ------------------------------------------------------- login screen ---- */
.login-card, .card.login {
border-radius: var(--ui-radius-lg);
box-shadow: 0 20px 50px rgba(8, 18, 35, .28);
border: none;
}
/* ------------------------------------------------------------- misc ------ */
.progress { border-radius: 99px; background: #eaeef5; height: 8px; }
.progress-bar { border-radius: 99px; }
.list-group-item {
border-color: var(--ui-border);
padding: .8rem 1rem;
font-size: .92rem;
}
.list-group-item:first-child { border-top-left-radius: var(--ui-radius); border-top-right-radius: var(--ui-radius); }
.list-group-item:last-child { border-bottom-left-radius: var(--ui-radius); border-bottom-right-radius: var(--ui-radius); }
.text-muted { color: var(--ui-text-muted) !important; }
code {
background: #f2f4f8;
color: #b3306e;
padding: 1px 5px;
border-radius: 5px;
font-size: .875em;
}
.tooltip-inner { border-radius: 7px; font-size: .82rem; padding: .35rem .6rem; }
/* dropzone + tagsinput, so they don't stay square while everything else softens */
.dropzone { border-radius: var(--ui-radius) !important; border: 2px dashed var(--ui-border-strong) !important; background: #fbfcfe !important; }
.dropzone:hover { border-color: var(--ui-primary) !important; background: var(--ui-primary-050) !important; }
.bootstrap-tagsinput { border-radius: var(--ui-radius-sm); border: 1px solid var(--ui-border-strong); box-shadow: none; padding: .3rem .5rem; }
.bootstrap-tagsinput .tag { background: var(--ui-primary-050); color: var(--ui-primary-600); border-radius: 6px; padding: 2px 7px; }
/* ------------------------------------- app.min.css reconciliation -------- */
/* Fixes for places where the existing theme's own rules fight this overlay.
Each of these was verified in the browser against the live pages. */
/* app.min.css sets `padding: 10px 15px` on .card itself, so a .card-header sits
inset from the card edge instead of flush — it reads as a detached coloured bar.
Pull it back out over that padding and restore real header padding.
(No `overflow: hidden` on .card: it would clip select2 menus opened inside cards.) */
/* app.min.css has `.card.widget .card-header { padding-top: 0 }` — a DESCENDANT
selector, so it also hits cards nested inside the page's outer `.card widget`
wrapper. It scores (0,3,0); the doubled class below matches that and wins on
source order without needing !important. */
.card > .card-header.card-header {
margin: -10px -15px 0;
padding: .8rem 1.15rem;
border-radius: var(--ui-radius) var(--ui-radius) 0 0;
}
.card > .card-header.card-header + .card-body { padding-top: 1rem; }
/* The sidebar icon carries a pale lilac chip from the old theme, which reads as a
stray box once the active row itself is coloured. */
.menu-body ul li > a .nav-link-icon {
background: transparent !important;
border-radius: 0;
}
/* Section headings inside cards were relying on the old flat look */
.card > .card-header h1, .card > .card-header h2, .card > .card-header h3,
.card > .card-header h4, .card > .card-header h5, .card > .card-header h6 { margin: 0; font-size: 1rem; }
/* ------------------------------------------------------- header bar ----- */
/* The theme ships `.header` hidden, so the top bar never appeared. Logout was moved
out of the sidebar into it (2026-08-24), so it has to be visible — otherwise there
is no way to sign out at all. The dead search box is kept hidden. */
.layout-wrapper > .header {
display: flex !important;
align-items: center;
background: var(--ui-surface);
border-bottom: 1px solid var(--ui-border);
box-shadow: var(--ui-shadow-xs);
padding: 0 1rem;
min-height: 56px;
}
.layout-wrapper > .header .search-form { display: none; }
.layout-wrapper > .header .logo img { max-height: 30px; width: auto; }
/* respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
/* print: drop the chrome */
@media print {
.menu, .layout-wrapper > .header, .d-print-none { display: none !important; }
.card, .card.widget { box-shadow: none; border-color: #ddd; }
body { background: #fff; }
}
/* ---------------------------------------------------------------------------
Card headers that carry a subtitle
app.min.css pins `.card.widget .card-header` to a hard height:50px, which is
fine for a bare title but clips any header with a strapline under it
(the Sales Order dashboard needs 61px). Let the header grow instead, keeping
50px as the floor so single-line headers are unchanged.
Selector is doubled (.card-header.card-header) to beat app.min.css's (0,3,0).
--------------------------------------------------------------------------- */
.card.widget .card-header.card-header {
height: auto;
min-height: 50px;
}
.card .card-header .dashboard-section-title {
display: block;
line-height: 1.35;
}