@charset "UTF-8"; /* ===================================================================== SMTC Premium UI layer (additive — safe to remove to fully revert) Loaded AFTER style.css so it refines, never restructures. Brand: navy #092C4C · accent sky #28b7f9 ===================================================================== */ :root { --smtc-navy: #092C4C; --smtc-navy-600: #0e3a63; --smtc-sky: #28b7f9; /* brand accent = template's primary (orange). RGB for translucent rings. */ --smtc-accent: #ff9f43; --smtc-accent-rgb: 255,159,67; --smtc-ink: #1b2733; --smtc-muted: #64748b; --smtc-line: #eaeef3; --smtc-surface: #ffffff; --smtc-canvas: #f5f7fa; --smtc-thead-bg: #f7f9fc; --smtc-input-border: #dfe5ec; --smtc-toast-bg: rgba(255,255,255,.92); --smtc-hover: #f1f4f8; --smtc-success: #16a34a; --smtc-danger: #e11d48; --smtc-warning: #f59e0b; --smtc-info: #0ea5e9; --smtc-radius: 14px; --smtc-radius-sm: 10px; --smtc-shadow-sm: 0 1px 2px rgba(9,44,76,.06), 0 1px 3px rgba(9,44,76,.04); --smtc-shadow: 0 4px 12px rgba(9,44,76,.06), 0 12px 32px rgba(9,44,76,.07); --smtc-shadow-lg: 0 18px 50px rgba(9,44,76,.14); --smtc-ease: cubic-bezier(.22,.61,.36,1); } /* Dark theme — flip premium surface tokens to match the template's dark palette (#0D0D0D grounds, #1F2228 lines, #D8DFEE ink). Template sets data-theme on . */ [data-theme="dark"] { --smtc-ink: #D8DFEE; --smtc-muted: #93a1b2; --smtc-line: #1F2228; --smtc-surface: #0D0D0D; --smtc-thead-bg: #15171c; --smtc-input-border: #2b2f45; --smtc-toast-bg: rgba(18,19,23,.94); --smtc-hover: #17181d; --smtc-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --smtc-shadow: 0 6px 20px rgba(0,0,0,.45); --smtc-shadow-lg: 0 20px 55px rgba(0,0,0,.6); } /* ---- global rendering polish ---- */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ---- refined slim scrollbar ---- */ * { scrollbar-width: thin; scrollbar-color: #c3ccd8 transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: #c3ccd8; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: #9aa8ba; background-clip: content-box; } /* ---- cards ---- */ .card { border: 1px solid var(--smtc-line) !important; border-radius: var(--smtc-radius) !important; box-shadow: var(--smtc-shadow-sm) !important; transition: box-shadow .25s var(--smtc-ease), transform .25s var(--smtc-ease); } .card:hover { box-shadow: var(--smtc-shadow) !important; } .card .card-header { border-bottom: 1px solid var(--smtc-line); background: transparent; } /* ---- buttons: smooth lift + press ---- */ .btn { border-radius: var(--smtc-radius-sm) !important; font-weight: 600; letter-spacing: .1px; transition: transform .15s var(--smtc-ease), box-shadow .2s var(--smtc-ease), background-color .2s var(--smtc-ease), border-color .2s var(--smtc-ease) !important; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } /* Respect the template's brand colour — only add depth + motion, not a new hue. */ .btn.btn-primary { box-shadow: 0 4px 14px rgba(var(--smtc-accent-rgb), .28); } .btn.btn-primary:hover { box-shadow: 0 8px 22px rgba(var(--smtc-accent-rgb), .36); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--smtc-accent-rgb), .40) !important; } /* ---- form controls: refined focus ---- */ .form-control, .form-select { border-radius: var(--smtc-radius-sm) !important; border-color: var(--smtc-input-border) !important; transition: border-color .2s var(--smtc-ease), box-shadow .2s var(--smtc-ease) !important; } /* dark: explicit high-specificity override so the input border lands on the dark token */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { border-color: var(--smtc-input-border) !important; } .form-control:focus, .form-select:focus { border-color: var(--smtc-accent) !important; box-shadow: 0 0 0 4px rgba(var(--smtc-accent-rgb), .16) !important; } .form-label { font-weight: 600; color: var(--smtc-ink); letter-spacing: .1px; } .select2-container--default .select2-selection--single { border-radius: var(--smtc-radius-sm) !important; border-color: var(--smtc-input-border) !important; } .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--smtc-accent) !important; box-shadow: 0 0 0 4px rgba(var(--smtc-accent-rgb), .16) !important; } /* ---- tables: premium header + row hover ---- */ .table > thead th { text-transform: uppercase; font-size: 11.5px; letter-spacing: .6px; font-weight: 700; color: var(--smtc-muted); background: var(--smtc-thead-bg); border-bottom: 1px solid var(--smtc-line) !important; white-space: nowrap; } .table > tbody > tr { transition: background-color .15s var(--smtc-ease); } .table > tbody > tr:hover > * { background-color: rgba(var(--smtc-accent-rgb), .07); } .table td, .table th { vertical-align: middle; } .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--smtc-navy) !important; border-color: var(--smtc-navy) !important; border-radius: 8px !important; color: #fff !important; } /* ---- modals: softer, elevated, blurred backdrop ---- */ .modal-content { border: none !important; border-radius: 18px !important; box-shadow: var(--smtc-shadow-lg) !important; overflow: hidden; } .modal-header { border-bottom: 1px solid var(--smtc-line); padding: 1.1rem 1.4rem; } .modal-body { padding: 1.4rem; } .modal-footer { border-top: 1px solid var(--smtc-line); } .modal-backdrop.show { backdrop-filter: blur(3px); opacity: .5; } /* ---- page header polish ---- */ .page-header .page-title h4 { font-weight: 700; letter-spacing: -.2px; } .page-header .page-title h6 { color: var(--smtc-muted); } /* ---- badges ---- */ .badge { border-radius: 8px; font-weight: 600; letter-spacing: .2px; padding: .4em .7em; } /* ---- gentle content entrance ---- */ @keyframes smtcFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .page-wrapper .content { animation: smtcFadeUp .35s var(--smtc-ease); } /* ===================================================================== SweetAlert2 — premium theme (restyles all existing Swal.fire calls) ===================================================================== */ .swal2-popup { border-radius: 20px !important; box-shadow: var(--smtc-shadow-lg) !important; padding: 2rem 1.75rem 1.75rem !important; } .swal2-title { font-weight: 700 !important; color: var(--smtc-ink) !important; font-size: 1.4rem !important; } .swal2-html-container { color: var(--smtc-muted) !important; } .swal2-actions { gap: .6rem; } .swal2-styled { border-radius: 11px !important; font-weight: 600 !important; padding: .62em 1.5em !important; box-shadow: none !important; transition: transform .15s var(--smtc-ease), box-shadow .2s var(--smtc-ease) !important; } .swal2-styled:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(9,44,76,.18) !important; } .swal2-styled.swal2-confirm { background: var(--smtc-navy) !important; } .swal2-styled.swal2-deny { background: var(--smtc-danger) !important; } .swal2-icon { border-width: 3px !important; } /* ===================================================================== Premium toast (used by SMTC.notify — see smtc-ui.js) ===================================================================== */ .smtc-toast-container { position: fixed; top: 20px; right: 20px; z-index: 12000; display: flex; flex-direction: column; gap: 12px; max-width: 380px; width: calc(100% - 40px); pointer-events: none; } .smtc-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; background: var(--smtc-toast-bg); backdrop-filter: blur(10px) saturate(120%); border: 1px solid var(--smtc-line); border-radius: var(--smtc-radius); box-shadow: var(--smtc-shadow); padding: 14px 14px 14px 16px; position: relative; overflow: hidden; transform: translateX(120%); opacity: 0; transition: transform .45s var(--smtc-ease), opacity .35s var(--smtc-ease); } .smtc-toast.show { transform: translateX(0); opacity: 1; } .smtc-toast.hide { transform: translateX(120%); opacity: 0; } .smtc-toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--smtc-navy); } .smtc-toast__icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; color: #fff; } .smtc-toast__body { flex: 1 1 auto; min-width: 0; } .smtc-toast__title { margin: 0; font-weight: 700; font-size: 14px; color: var(--smtc-ink); line-height: 1.25; } .smtc-toast__msg { margin: 2px 0 0; font-size: 13px; color: var(--smtc-muted); line-height: 1.4; word-wrap: break-word; } .smtc-toast__close { flex: 0 0 auto; background: none; border: none; cursor: pointer; color: #9aa8ba; font-size: 16px; line-height: 1; padding: 2px; border-radius: 6px; transition: background .15s, color .15s; } .smtc-toast__close:hover { background: var(--smtc-hover); color: var(--smtc-ink); } .smtc-toast__progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; opacity: .5; } .smtc-toast--success::before { background: var(--smtc-success); } .smtc-toast--success .smtc-toast__icon { background: var(--smtc-success); } .smtc-toast--success .smtc-toast__progress { background: var(--smtc-success); } .smtc-toast--error::before { background: var(--smtc-danger); } .smtc-toast--error .smtc-toast__icon { background: var(--smtc-danger); } .smtc-toast--error .smtc-toast__progress { background: var(--smtc-danger); } .smtc-toast--warning::before { background: var(--smtc-warning); } .smtc-toast--warning .smtc-toast__icon { background: var(--smtc-warning); } .smtc-toast--warning .smtc-toast__progress { background: var(--smtc-warning); } .smtc-toast--info::before { background: var(--smtc-info); } .smtc-toast--info .smtc-toast__icon { background: var(--smtc-info); } .smtc-toast--info .smtc-toast__progress { background: var(--smtc-info); } @media (max-width: 575px) { .smtc-toast-container { top: 12px; right: 12px; left: 12px; width: auto; max-width: none; } } /* ===================================================================== Premium polish — chrome (sidebar / header), theme toggle, login All theme-aware via the tokens above. ===================================================================== */ /* ---- header: subtle depth + smooth icon buttons ---- */ .header { box-shadow: var(--smtc-shadow-sm); } .header .nav-item-box > a, .header .nav-item-box > .nav-link { transition: background-color .18s var(--smtc-ease), color .18s var(--smtc-ease), transform .18s var(--smtc-ease); border-radius: 10px; } .header .nav-item-box > a:hover { transform: translateY(-1px); } /* ---- sidebar: smooth hover, brand-tinted resting hover ---- */ .sidebar .sidebar-menu ul li a { transition: background-color .18s var(--smtc-ease), color .18s var(--smtc-ease), padding-left .18s var(--smtc-ease); border-radius: 8px; } .sidebar .sidebar-menu > ul > li > a:not(.active):hover { background: rgba(var(--smtc-accent-rgb), .10); } /* ---- premium theme toggle (wires into template's .toggle-switch script) ---- */ .smtc-theme-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; margin: 0; -webkit-tap-highlight-color: transparent; } .smtc-theme-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .smtc-theme-toggle__track { position: relative; width: 54px; height: 28px; border-radius: 999px; background: #e7ebf1; border: 1px solid var(--smtc-line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 7px; box-sizing: border-box; transition: background-color .25s var(--smtc-ease), border-color .25s var(--smtc-ease); } .smtc-theme-toggle__track i { font-size: 14px; line-height: 1; z-index: 1; } .smtc-theme-toggle__track .ti-sun { color: #f59e0b; } .smtc-theme-toggle__track .ti-moon { color: #8b97a8; } .smtc-theme-toggle__thumb { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #ffffff; box-shadow: 0 2px 6px rgba(9,44,76,.28); transition: transform .28s var(--smtc-ease), background-color .28s var(--smtc-ease); } .smtc-theme-toggle input:checked ~ .smtc-theme-toggle__track { background: #202a37; border-color: #2b3644; } .smtc-theme-toggle input:checked ~ .smtc-theme-toggle__track .smtc-theme-toggle__thumb { transform: translateX(26px); background: #0D0D0D; } .smtc-theme-toggle input:focus-visible ~ .smtc-theme-toggle__track { box-shadow: 0 0 0 3px rgba(var(--smtc-accent-rgb), .40); } /* ---- login page: premium first impression ---- */ .account-page .login-content .card { border: none !important; border-radius: 20px !important; box-shadow: var(--smtc-shadow-lg) !important; } .account-page .login-userheading h3 { font-weight: 700; letter-spacing: -.3px; } .account-page .login-userheading h4 { color: var(--smtc-muted); font-weight: 500; } .account-page .login-form .btn-primary { letter-spacing: .3px; padding-top: 11px; padding-bottom: 11px; } .account-page .input-group-text { border-radius: var(--smtc-radius-sm); } /* ===================================================================== View mode switch (Accounting / Stock) + sidebar/dashboard filtering ===================================================================== */ .smtc-view-switch { position: relative; display: inline-flex; background: #e7ebf1; border: 1px solid var(--smtc-line); border-radius: 999px; padding: 3px; gap: 2px; } [data-theme="dark"] .smtc-view-switch { background: #17181d; border-color: var(--smtc-line); } .smtc-view-switch__opt { position: relative; z-index: 1; border: none; background: transparent; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--smtc-muted); padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: color .2s var(--smtc-ease); white-space: nowrap; } .smtc-view-switch__opt[aria-checked="true"] { color: #3d2400; } [data-theme="dark"] .smtc-view-switch__opt[aria-checked="true"] { color: #2a1a08; } .smtc-view-switch__pill { position: absolute; top: 3px; left: 3px; width: calc(50% - 3px); height: calc(100% - 6px); background: var(--smtc-accent); border-radius: 999px; box-shadow: 0 2px 8px rgba(var(--smtc-accent-rgb), .35); transition: transform .25s var(--smtc-ease); } .smtc-view-switch[data-active="stock"] .smtc-view-switch__pill { transform: translateX(100%); } /* Hide sidebar groups / dashboard sections that don't match the active view. [data-mode="both"] (or untagged) is always visible. */ body[data-view-mode="accounting"] [data-mode="stock"] { display: none !important; } body[data-view-mode="stock"] [data-mode="accounting"] { display: none !important; } @media (max-width: 767px) { .smtc-view-switch__opt { padding: 6px 10px; font-size: 11.5px; } } /* ===================================================================== Locked select2 (view-mode enforced fields, e.g. Supplier lock on /all-account in Stock mode). Field stays enabled for form submission; this only blocks/greys out interaction. ===================================================================== */ .select2-container.smtc-locked-select2 .select2-selection { background: var(--smtc-hover) !important; cursor: not-allowed !important; } .select2-container.smtc-locked-select2 .select2-selection__arrow { display: none !important; } .select2-container.smtc-locked-select2 .select2-selection__rendered { color: var(--smtc-muted) !important; } /* ===================================================================== Purchase / Loading list polish (#2/#6): PO status badges + filter bar ===================================================================== */ .badge.po-status { font-weight: 600; letter-spacing: .2px; padding: .42em .7em; border-radius: 8px; } .badge.po-status-1 { background: rgba(100,116,139,.15); color: #475569; } /* Place Order */ .badge.po-status-2 { background: rgba(245,158,11,.16); color: #92600a; } /* On The Way */ .badge.po-status-3 { background: rgba(14,165,233,.16); color: #0369a1; } /* Partial Dispatch */ .badge.po-status-4 { background: rgba(255,159,67,.18); color: #9a5410; } /* Dispatch */ .badge.po-status-5 { background: rgba(22,163,74,.16); color: #157f3a; } /* Received */ [data-theme="dark"] .badge.po-status-1 { background: rgba(148,163,184,.20); color: #cbd5e1; } [data-theme="dark"] .badge.po-status-2 { background: rgba(245,158,11,.22); color: #f4c56b; } [data-theme="dark"] .badge.po-status-3 { background: rgba(14,165,233,.22); color: #7fc4ee; } [data-theme="dark"] .badge.po-status-4 { background: rgba(255,159,67,.24); color: #ffbb7a; } [data-theme="dark"] .badge.po-status-5 { background: rgba(22,163,74,.24); color: #7bd39c; } /* filter toolbar in list card headers */ .card-header .table-dropdown input[type="date"], .card-header .table-dropdown .form-select { min-height: 34px; } .card-header .table-dropdown { gap: 8px; } /* PO order type badge (Normal vs Back Order) in the Purchase list */ .badge.po-ordertype { font-weight: 600; font-size: 10.5px; letter-spacing: .3px; padding: .28em .6em; border-radius: 7px; width: fit-content; } .badge.po-ordertype-normal { background: rgba(22,163,74,.14); color: #157f3a; } .badge.po-ordertype-back { background: rgb(0 0 0 / 28%); color: #413c37; } [data-theme="dark"] .badge.po-ordertype-normal { background: rgba(22,163,74,.22); color: #7bd39c; } [data-theme="dark"] .badge.po-ordertype-back { background: rgba(255,159,67,.24); color: #ffbb7a; } /* ===================================================================== Fixes: filter-toolbar select2 sizing + view switch on mobile ===================================================================== */ /* select2 in list card-header filter toolbars -> match form-control-sm */ .card-header .table-dropdown .select2-container { line-height: normal; } .card-header .table-dropdown .select2-container--default .select2-selection--single { height: 31px; display: flex; align-items: center; border-radius: var(--smtc-radius-sm) !important; border: 1px solid var(--smtc-input-border) !important; background: var(--smtc-surface); } .card-header .table-dropdown .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 29px; padding-left: 10px; padding-right: 22px; font-size: 13px; color: var(--smtc-ink); } .card-header .table-dropdown .select2-container--default .select2-selection--single .select2-selection__arrow { height: 29px; right: 4px; } .card-header .table-dropdown .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--smtc-muted); } /* keep the date-range input aligned with the select2 boxes */ .card-header .table-dropdown .date-range.bookingrange { height: 31px; padding-left: 30px; font-size: 13px; } .card-header .table-dropdown .input-icon-left { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--smtc-muted); font-size: 14px; pointer-events: none; } .card-header .table-dropdown .form-check-label { white-space: nowrap; } /* Header view switch + bell on mobile. The template hides .user-menu under 991px and lays the header out as three absolutely-positioned zones: hamburger (left, 60px), logo (centred, width:100%, z-index 1) and the 3-dot menu (right, 60px). So we re-show ONLY the flagged items and dock them as their own right-hand cluster, then reserve padding on the logo box so the centred logo can never slide underneath either cluster. */ @media (max-width: 991.98px) { .header .user-menu { display: flex !important; align-items: center; gap: 4px; position: absolute; top: 0; right: 54px; /* clear the 3-dot menu */ height: 60px; margin: 0; padding: 0; z-index: 11; /* above the centred logo */ background: transparent; } .header .user-menu > li { display: none !important; } .header .user-menu > li.smtc-mobile-visible { display: flex !important; align-items: center; padding: 0; margin: 0; } /* reserve space either side of the centred logo */ .header .header-left { padding-left: 90px !important; padding-right: 198px !important; } .header .header-left .logo { width: auto !important; } .header .header-left .logo img { width: auto !important; max-width: 100%; max-height: 50px; } /* compact controls so the cluster fits narrow screens */ .smtc-view-switch { padding: 2px; } .smtc-view-switch__opt { padding: 4px 9px; font-size: 10.5px; } .smtc-notif-bell { font-size: 18px; } .smtc-notif-badge { top: -2px; right: -5px; min-width: 15px; height: 15px; line-height: 15px; font-size: 9px; } /* dropdown must not overflow the viewport from an absolute parent */ .smtc-notif-drop { /*position: fixed !important;*/ top: 58px; right: 8px; left: 8px; width: auto; max-width: none; } } @media (max-width: 400px) { .header .header-left { padding-right: 178px !important; } .smtc-view-switch__opt { padding: 4px 7px; font-size: 10px; } } /* ===================================================================== Notification bell + dropdown (SignalR module) ===================================================================== */ .smtc-notif-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; } .smtc-notif-badge { position: absolute; top: -4px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--smtc-danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--smtc-surface); } .smtc-notif-drop { width: 340px; max-width: calc(100vw - 24px); padding: 0; overflow: hidden; border: 1px solid var(--smtc-line); border-radius: var(--smtc-radius); box-shadow: var(--smtc-shadow-lg); background: var(--smtc-surface); } .smtc-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--smtc-line); font-weight: 700; font-size: 13.5px; color: var(--smtc-ink); } .smtc-notif-actions { display: flex; gap: 10px; } .smtc-notif-actions a { font-size: 11.5px; font-weight: 600; color: var(--smtc-muted); text-decoration: none; } .smtc-notif-actions a:hover { color: var(--smtc-accent); } .smtc-notif-list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; } .smtc-notif-empty { padding: 26px 14px; text-align: center; color: var(--smtc-muted); font-size: 13px; } .smtc-notif > a, .smtc-notif > div { display: flex; gap: 10px; padding: 11px 14px; text-decoration: none; border-bottom: 1px solid var(--smtc-line); transition: background-color .15s var(--smtc-ease); } .smtc-notif > a:hover, .smtc-notif > div:hover { background: var(--smtc-hover); } .smtc-notif.is-unread > a, .smtc-notif.is-unread > div { background: rgba(var(--smtc-accent-rgb), .07); } .smtc-notif__icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; } .smtc-notif__icon--success { background: var(--smtc-success); } .smtc-notif__icon--error { background: var(--smtc-danger); } .smtc-notif__icon--warning { background: var(--smtc-warning); } .smtc-notif__icon--info { background: var(--smtc-info); } .smtc-notif__body { display: flex; flex-direction: column; min-width: 0; } .smtc-notif__title { font-weight: 600; font-size: 13px; color: var(--smtc-ink); } .smtc-notif__msg { font-size: 12.5px; color: var(--smtc-muted); word-wrap: break-word; } .smtc-notif__time { font-size: 11px; color: var(--smtc-muted); margin-top: 2px; } /* Admin broadcast affordance + broadcast tag on received notifications */ .smtc-notif-actions a.smtc-notif-broadcast { color: var(--smtc-accent); font-weight: 700; } .smtc-notif-actions a.smtc-notif-broadcast:hover { color: var(--smtc-ink); } .smtc-notif__tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: rgba(var(--smtc-accent-rgb), .18); color: #9a5410; font-size: 9.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; vertical-align: middle; } [data-theme="dark"] .smtc-notif__tag { background: rgba(var(--smtc-accent-rgb), .24); color: #ffbb7a; } /* ===================================================================== FIX: template sets `.select2-container { min-width: 100% !important; }` which made the searchable filter dropdowns span the full row and stack. Undo it *only* inside list card-header filter toolbars so they sit inline. ===================================================================== */ .card-header .table-dropdown .select2-container { min-width: 0 !important; width: auto !important; } .card-header .table-dropdown .filter-select + .select2-container { width: 172px !important; } /* keep the whole toolbar on one line, aligned right, and let it wrap sanely */ .card-header .table-dropdown { flex-wrap: wrap; justify-content: flex-end; align-items: center; } .card-header .table-dropdown > * { flex: 0 0 auto; } @media (max-width: 767px) { .card-header .table-dropdown { justify-content: flex-start; } .card-header .table-dropdown .filter-select + .select2-container { width: 100% !important; } .card-header .table-dropdown .input-icon-start { width: 100%; } } /* ===================================================================== Receiving — product-wise location allocation ===================================================================== */ .alloc-cell { min-width: 170px; } .alloc-summary { font-size: 11.5px; line-height: 1.35; margin-top: 4px; max-width: 240px; } .alloc-summary__none { color: var(--smtc-muted); font-style: italic; } .alloc-summary__ok { color: #157f3a; font-weight: 600; } .alloc-summary__warn { color: #b45309; font-weight: 600; } [data-theme="dark"] .alloc-summary__ok { color: #7bd39c; } [data-theme="dark"] .alloc-summary__warn { color: #f4c56b; } .alloc-stat { background: var(--smtc-thead-bg); border: 1px solid var(--smtc-line); border-radius: var(--smtc-radius-sm); padding: 8px 12px; display: flex; flex-direction: column; } .alloc-stat__lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--smtc-muted); font-weight: 600; } .alloc-stat__val { font-size: 18px; font-weight: 700; color: var(--smtc-ink); font-variant-numeric: tabular-nums; } .alloc-stat__val.is-bad { color: var(--smtc-danger); }