/* * Design tokens inspired by shadcn/ui, adapted for this app's Blade/Tailwind * setup (no React). CSS variables here are the single source of truth for * color, radius and focus ring — component classes below reference them so * the whole look can be retuned from one place instead of per-view hex * values. Keep this file loading after tailwind/app.css and vendor.css so * its rules win without needing !important everywhere. */ :root { /* * Neutral scale derived from the system's fixed blue-gray palette * (graphite family: #33415C/#5C677D/#7D8597/#979DAC, hue ~220), instead * of a generic gray, so borders/muted text/surfaces read as part of the * same palette as the brand blue rather than an unrelated gray. */ --background: 0 0% 100%; --foreground: 220 29% 16%; --card: 0 0% 100%; --popover: 0 0% 100%; --muted: 222 25% 96%; --muted-foreground: 220 15% 43%; --border: 222 20% 89%; --input: 222 20% 89%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 100%; --success: 142 71% 30%; --success-foreground: 0 0% 100%; --warning: 38 92% 40%; --warning-foreground: 0 0% 100%; --info: 199 89% 38%; --info-foreground: 0 0% 100%; --radius: 0.625rem; /* * Fixed brand color for the whole system (--theme-700/800/900, set in * layouts/partials/css.blade.php). These are plain hex values (not HSL * components like the tokens above), so anything needing the brand * color uses --primary-solid/--primary-foreground directly rather than * wrapping in hsl(). Falls back to the same blue if --theme-700 is * somehow unset (e.g. a view that doesn't load that partial). */ --primary-solid: var(--theme-700, #0466C8); --primary-hover-solid: var(--theme-800, #0353A4); --primary-active-solid: var(--theme-900, #023E7D); --primary-foreground: 0 0% 100%; --ring-solid: var(--theme-700, #0466C8); } /* * Dark mode: applied either explicitly via [data-theme="dark"] on * (set by the toggle in layouts/partials/header.blade.php, persisted to * localStorage) or automatically via prefers-color-scheme when the user * hasn't chosen explicitly ([data-theme] absent). [data-theme="light"] * forces light regardless of OS preference by simply matching neither rule * below. --theme-700/800/900 (the brand blue) are left untouched in dark * mode; only the neutral surface/text/border tokens change. Uses a plain * neutral dark gray (not tinted from the brand palette) — a punchier navy * background here read as too harsh/saturated for a full-page surface. */ :root[data-theme="dark"] { --background: 240 6% 10%; --foreground: 210 20% 92%; --card: 240 6% 13%; --popover: 240 6% 13%; --muted: 240 5% 18%; --muted-foreground: 240 5% 65%; --border: 240 5% 24%; --input: 240 5% 24%; --destructive: 0 72% 55%; --success: 142 60% 42%; --warning: 38 85% 55%; --info: 199 80% 55%; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --background: 240 6% 10%; --foreground: 210 20% 92%; --card: 240 6% 13%; --popover: 240 6% 13%; --muted: 240 5% 18%; --muted-foreground: 240 5% 65%; --border: 240 5% 24%; --input: 240 5% 24%; --destructive: 0 72% 55%; --success: 142 60% 42%; --warning: 38 85% 55%; --info: 199 80% 55%; } } /* ---------- Card ---------- */ .sc-card { background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); } .sc-card-hover { transition: box-shadow 0.2s ease; } .sc-card-hover:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06); } /* * .box-header defaults to AdminLTE's float-based layout (.box-tools{float:right}), * which leaves no gap between the title and an action button placed right * next to it. Give the card header an explicit flex layout with breathing * room instead, without removing the legacy .box-header/.box-title classes * other CSS may still target. */ .sc-card-header { display: flex !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; float: none !important; } /* vendor.css's Bootstrap 3 clearfix (`.box-header:before{content:" "; display:table}`) becomes an actual flex item once .box-header is flex, inserting an invisible first child that throws off space-between. */ .sc-card-header::before, .sc-card-header::after { content: none !important; display: none !important; } .sc-card-header-title { display: flex; align-items: center; gap: 8px; min-width: 0; } .sc-card-header-tools { display: flex; align-items: center; gap: 8px; float: none !important; margin: 0 !important; } /* AdminLTE's .box-tools floats right with negative margins to align inside a non-flex .box-header; rtl.css additionally absolutely-positions it (`.box-header>.box-tools{right:auto;left:10px}`) assuming a non-flex, position:relative header. Both assumptions break inside the new flex header, so neutralize them explicitly here. */ .sc-card-header .box-tools { float: none !important; margin: 0 !important; position: static !important; left: auto !important; right: auto !important; inset-inline-end: auto !important; } /* Same problem, different culprit: many index pages put "pull-right" (or "pull-left") directly on the action button/link itself inside the tool slot (e.g. resources/views/sell/index.blade.php), which floats it out of the flex flow and re-creates the same broken layout. Neutralize float utility classes anywhere inside the new header. */ .sc-card-header .pull-right, .sc-card-header .pull-left { float: none !important; } /* ---------- Form field ---------- */ .sc-field-row { display: flex; gap: 16px; } .sc-field-row .sc-field { flex: 1 1 0; min-width: 0; } @media (max-width: 640px) { .sc-field-row { flex-direction: column; gap: 0; } } .sc-field { margin-bottom: 20px; } .sc-field label { display: block; font-size: 14px; font-weight: 600; color: hsl(var(--foreground)); margin-bottom: 8px; } .sc-input { width: 100%; height: 44px; border: 1px solid hsl(var(--input)); border-radius: var(--radius); background: hsl(var(--background)); color: hsl(var(--foreground)); font-size: 14px; padding: 10px 14px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .sc-input::placeholder { color: hsl(var(--muted-foreground)); } .sc-input:focus { outline: none; border-color: var(--ring-solid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring-solid) 25%, transparent); } .sc-field.has-error .sc-input { border-color: hsl(var(--destructive)); } .sc-field.has-error .sc-input:focus { box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.2); } .sc-field-error { display: block; margin-top: 6px; font-size: 13px; color: hsl(var(--destructive)); } .sc-field-hint { display: block; margin-top: 6px; font-size: 13px; color: hsl(var(--muted-foreground)); } /* jQuery Validate injects "label.error" right after the input it flags */ .sc-field label.error { display: block; margin-top: 6px; font-size: 13px; font-weight: 400; color: hsl(var(--destructive)); } .sc-field:has(label.error) .sc-input { border-color: hsl(var(--destructive)); } /* ---------- Buttons ---------- */ .sc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; width: 100%; border-radius: var(--radius); font-size: 14px; font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; } .sc-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring-solid) 35%, transparent); } .sc-btn-primary { background: var(--primary-solid); color: hsl(var(--primary-foreground)); } .sc-btn-primary:hover { background: color-mix(in srgb, var(--primary-solid) 90%, black); } .sc-btn-outline { background: transparent; border-color: hsl(var(--border)); color: hsl(var(--foreground)); } .sc-btn-outline:hover { background: hsl(var(--muted)); } .sc-btn-link { height: auto; width: auto; display: inline; padding: 0; color: var(--primary-solid); font-weight: 500; font-size: 13px; } .sc-btn-link:hover { text-decoration: underline; } /* ---------- Global form-control restyle ---------- * Retheme Bootstrap's .form-control (used app-wide via LaravelCollective * Form::text/select/etc, ~1,750 fields across 230+ views) to match the new * tokens, without touching any Blade view. Height is kept closer to the * Bootstrap original (36px vs .sc-input's 44px) since many of these fields * sit in dense contexts (POS rows, inline tables) where 44px would break * existing layouts. */ .form-control { height: 36px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: hsl(var(--foreground)); background-color: hsl(var(--background)); background-image: none; border: 1px solid hsl(var(--input)); border-radius: calc(var(--radius) * 0.7); box-shadow: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .form-control:focus { border-color: var(--ring-solid); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring-solid) 25%, transparent); } .form-control::placeholder { color: hsl(var(--muted-foreground)); opacity: 1; } .form-control:disabled, .form-control[readonly] { background-color: hsl(var(--muted)); opacity: 1; cursor: not-allowed; } textarea.form-control { height: auto; } .has-error .form-control { border-color: hsl(var(--destructive)); } .has-error .form-control:focus { box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.2); } /* ---------- select2 (skinned to match .form-control) ---------- */ .select2-container--default .select2-selection--single { height: 36px; border: 1px solid hsl(var(--input)); border-radius: calc(var(--radius) * 0.7); background-color: hsl(var(--background)); } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 34px; color: hsl(var(--foreground)); padding-inline-start: 12px; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 34px; } .select2-container--default .select2-selection--multiple { border: 1px solid hsl(var(--input)); border-radius: calc(var(--radius) * 0.7); background-color: hsl(var(--background)); min-height: 36px; } .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(--ring-solid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring-solid) 25%, transparent); } .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) * 0.5); color: hsl(var(--foreground)); } .select2-dropdown { border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) * 0.7); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--primary-solid); color: hsl(var(--primary-foreground)); } .select2-search--dropdown .select2-search__field { border: 1px solid hsl(var(--input)); border-radius: calc(var(--radius) * 0.5); } /* ---------- Global button restyle ---------- * The app has two parallel button systems in active use: legacy Bootstrap 3 * (.btn/.btn-primary/.btn-default/...) in ~67 views + 5 controllers, and * DaisyUI (.tw-dw-btn/.tw-dw-btn-primary/...) in ~219 views + ~15 * controllers (the majority). Both are retoned here to the tenant's theme * color, without touching any Blade/PHP file. Structural classes that * drive Bootstrap's JS dropdown (.btn-group, .dropdown-toggle, * .dropdown-menu, .caret) are left untouched — only color/radius/shadow. */ .btn, .tw-dw-btn { border-radius: calc(var(--radius) * 0.6) !important; transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease !important; box-shadow: none !important; text-transform: none !important; } /* * DaisyUI's own default button size is height:3rem/48px (public/css/tailwind/app.css), * noticeably larger than the rest of the UI (form fields are 36px). Buttons * that don't ask for an explicit size (tw-dw-btn-xs/sm/lg, which set their * own height and win the cascade normally) fall back to this smaller default * instead of DaisyUI's oversized one. */ .tw-dw-btn { height: 2.25rem; min-height: 2.25rem; font-size: 0.8125rem; padding-left: 0.875rem; padding-right: 0.875rem; } .btn:focus, .btn:focus-visible, .tw-dw-btn:focus, .tw-dw-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring-solid) 35%, transparent) !important; } .btn:disabled, .btn[disabled], .tw-dw-btn:disabled, .tw-dw-btn[disabled] { opacity: 0.6; cursor: not-allowed; } /* Primary / brand actions -> tenant theme color */ .btn-primary, .tw-dw-btn-primary, .tw-dw-btn-neutral { background-color: var(--primary-solid) !important; border-color: var(--primary-solid) !important; color: #fff !important; } .btn-primary:hover, .btn-primary:focus, .tw-dw-btn-primary:hover, .tw-dw-btn-neutral:hover { background-color: var(--primary-hover-solid) !important; border-color: var(--primary-hover-solid) !important; } .btn-primary:active, .tw-dw-btn-primary:active, .tw-dw-btn-neutral:active { background-color: var(--primary-active-solid) !important; border-color: var(--primary-active-solid) !important; } /* Neutral / secondary actions */ .btn-default, .tw-dw-btn-outline { background-color: hsl(var(--background)) !important; border-color: hsl(var(--border)) !important; color: hsl(var(--foreground)) !important; } .btn-default:hover, .tw-dw-btn-outline:hover { background-color: hsl(var(--muted)) !important; } /* Destructive actions */ .btn-danger, .tw-dw-btn-error { background-color: hsl(var(--destructive)) !important; border-color: hsl(var(--destructive)) !important; color: #fff !important; } .btn-danger:hover, .tw-dw-btn-error:hover { background-color: hsl(0 74% 50%) !important; border-color: hsl(0 74% 50%) !important; } /* Link-style buttons keep the brand color as text, no fill */ .btn-link { color: var(--primary-solid) !important; } .btn-link:hover { color: var(--primary-hover-solid) !important; } /* ---------- Checkbox ---------- */ .sc-checkbox-row { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; } .sc-checkbox-row input[type="checkbox"] { width: 16px; height: 16px; border-radius: calc(var(--radius) / 2); border: 1px solid hsl(var(--input)); accent-color: var(--primary-solid); } .sc-checkbox-row label { font-size: 13px; font-weight: 500; color: hsl(var(--foreground)); margin: 0; cursor: pointer; } /* ---------- Dark mode: app shell & Tailwind utility overrides ---------- * The header, sidebar and a handful of live views (auth pages, POS screen, * language switcher) were built with compiled Tailwind utility classes * (tw-bg-white, tw-text-gray-900, ...) that bake a fixed RGB value into * each class via --tw-bg-opacity/--tw-text-opacity/--tw-border-opacity * (see public/css/tailwind/app.css). Re-pointing those same classes here * to dark-appropriate RGB values re-themes every view that uses them * without editing any Blade file. * * Two activation paths, kept as separate rule sets so light mode (today's * look) is never touched unless one of them actually matches: * 1. [data-theme="dark"] on - explicit user choice, applies * regardless of OS preference. * 2. No data-theme attribute at all + OS prefers dark - automatic, * via the media query. [data-theme="light"] (explicit opt-out) and * an OS light preference both fall through to the untouched defaults. */ :root[data-theme="dark"] body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); } :root[data-theme="dark"] .tw-bg-white { background-color: hsl(var(--card)) !important; } :root[data-theme="dark"] .tw-bg-gray-100, :root[data-theme="dark"] .tw-bg-gray-50 { background-color: hsl(var(--muted)) !important; } :root[data-theme="dark"] .tw-border-gray-200 { border-color: hsl(var(--border)) !important; } :root[data-theme="dark"] .tw-text-gray-900, :root[data-theme="dark"] .tw-text-black { color: hsl(var(--foreground)) !important; } :root[data-theme="dark"] .tw-text-gray-600, :root[data-theme="dark"] .tw-text-gray-500, :root[data-theme="dark"] .tw-text-gray-400 { color: hsl(var(--muted-foreground)) !important; } :root[data-theme="dark"] .side-bar, :root[data-theme="dark"] .lang-switcher-menu { background-color: hsl(var(--card)) !important; color: hsl(var(--foreground)); } :root[data-theme="dark"] .lang-switcher-menu li a { color: hsl(var(--foreground)) !important; } :root[data-theme="dark"] .lang-switcher-menu li a:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)) !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); } :root:not([data-theme]) .tw-bg-white { background-color: hsl(var(--card)) !important; } :root:not([data-theme]) .tw-bg-gray-100, :root:not([data-theme]) .tw-bg-gray-50 { background-color: hsl(var(--muted)) !important; } :root:not([data-theme]) .tw-border-gray-200 { border-color: hsl(var(--border)) !important; } :root:not([data-theme]) .tw-text-gray-900, :root:not([data-theme]) .tw-text-black { color: hsl(var(--foreground)) !important; } :root:not([data-theme]) .tw-text-gray-600, :root:not([data-theme]) .tw-text-gray-500, :root:not([data-theme]) .tw-text-gray-400 { color: hsl(var(--muted-foreground)) !important; } :root:not([data-theme]) .side-bar, :root:not([data-theme]) .lang-switcher-menu { background-color: hsl(var(--card)) !important; color: hsl(var(--foreground)); } :root:not([data-theme]) .lang-switcher-menu li a { color: hsl(var(--foreground)) !important; } :root:not([data-theme]) .lang-switcher-menu li a:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)) !important; } } /* Theme toggle button (sun/moon) in the header: swap icon by active mode */ .theme-toggle-btn .theme-toggle-icon-dark { display: none; } :root[data-theme="dark"] .theme-toggle-btn .theme-toggle-icon-light { display: none; } :root[data-theme="dark"] .theme-toggle-btn .theme-toggle-icon-dark { display: inline-flex; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-toggle-btn .theme-toggle-icon-light { display: none; } :root:not([data-theme]) .theme-toggle-btn .theme-toggle-icon-dark { display: inline-flex; } } /* POS product cards (sale_pos/partials/product_list.blade.php and featured_products.blade.php): tw-bg-white is already retoned to hsl(var(--card)) above; only the arbitrary-value border/price colors (not covered by the generic Tailwind-class overrides) need a nudge. */ :root[data-theme="dark"] .product_box { border-color: hsl(var(--border)) !important; } :root[data-theme="dark"] .product_box.product_out_of_stock { background-color: hsl(var(--muted)) !important; } :root[data-theme="dark"] .product_price { color: hsl(var(--success)) !important; } /* ---------- Chart type switcher ---------- * Small icon toolbar injected above every Highcharts chart (see * public/js/functions.js __init_chart_type_switchers) letting the user * flip between line/column/area/pie without reloading. */ .chart-type-switcher-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) * 0.5); background: hsl(var(--background)); color: hsl(var(--muted-foreground)); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .chart-type-switcher-btn:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); } .chart-type-switcher-btn.is-active { background: var(--primary-solid); border-color: var(--primary-solid); color: #fff; } /* ---------- Stat card icon badge (components/static.blade.php) ---------- * One semantic variant per icon badge instead of two raw Tailwind * background/text classes passed in from each caller — the old approach * let dashboard cards across the app (home + 7 modules) pass arbitrary, * inconsistent colors (cyan/purple/orange/yellow-400 with white icons in * some modules, light-tint backgrounds with colored icons in others), and * a few callers even swapped the bg/text props by mistake. These four * variants cover every real use: primary for neutral totals, success for * positive/net figures, warning for amounts due/returned, destructive for * expenses and losses. */ .sc-static-icon--primary { background-color: color-mix(in srgb, var(--primary-solid) 12%, hsl(var(--background))); color: var(--primary-solid); } .sc-static-icon--success { background-color: hsl(var(--success) / 0.12); color: hsl(var(--success)); } .sc-static-icon--warning { background-color: hsl(var(--warning) / 0.14); color: hsl(var(--warning)); } .sc-static-icon--destructive { background-color: hsl(var(--destructive) / 0.12); color: hsl(var(--destructive)); } /* ---------- Tables ---------- * ~210 views use Bootstrap 3's .table/.table-bordered/.table-striped * (heavy grid lines, dated zebra striping) with jQuery DataTables 1.10 for * server-side paging/search/sort (the JS lib itself, and its default dom * layout in public/js/common.js, are left alone — only visual restyling * here). Re-themed to a flat, bordered card table: no internal vertical * rules, a light header, hairline row dividers and a subtle hover instead * of alternating stripes, all on the shared tokens so it follows dark mode * and the tenant's brand color automatically. */ .table { color: hsl(var(--foreground)); border-color: hsl(var(--border)); } .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { border-color: hsl(var(--border)); padding: 10px 12px; vertical-align: middle; } .table.table-bordered { border: 1px solid hsl(var(--border)); } .table.table-bordered > thead > tr > th, .table.table-bordered > thead > tr > td { border-bottom-width: 1px; } /* Bootstrap 3's .table-bordered draws a border around every cell; keep the outer edge and header underline but drop the internal vertical rules for a flatter look. */ .table.table-bordered > thead > tr > th + th, .table.table-bordered > thead > tr > td + td, .table.table-bordered > tbody > tr > th + th, .table.table-bordered > tbody > tr > td + td, .table.table-bordered > tfoot > tr > th + th, .table.table-bordered > tfoot > tr > td + td { border-left: none; } .table > thead > tr > th { background-color: hsl(var(--muted)); color: hsl(var(--muted-foreground)); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; } /* Swap alternating-row stripes for a plain background + hover highlight - flatter and easier to scan on wide, many-column tables. */ .table.table-striped > tbody > tr:nth-of-type(odd) { background-color: transparent; } .table > tbody > tr:hover { background-color: hsl(var(--muted) / 0.6); } .table-responsive { border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) * 0.7); } .table-responsive > .table.table-bordered { border: none; } /* ---------- DataTables chrome (search box, length select, pagination) ---------- * Defaults from resources/plugins/AdminLTE/plugins/DataTables/DataTables-1.10.16. */ .dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input { height: 34px; padding: 4px 10px; border: 1px solid hsl(var(--input)); border-radius: calc(var(--radius) * 0.6); background-color: hsl(var(--background)); color: hsl(var(--foreground)); } .dataTables_wrapper .dataTables_filter input:focus, .dataTables_wrapper .dataTables_length select:focus { outline: none; border-color: var(--ring-solid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring-solid) 25%, transparent); } .dataTables_wrapper .dataTables_info { color: hsl(var(--muted-foreground)); font-size: 13px; } .dataTables_wrapper .dataTables_paginate .paginate_button { border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) * 0.6); color: hsl(var(--foreground)) !important; background: hsl(var(--background)) !important; margin-left: 4px; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: hsl(var(--muted)) !important; border-color: hsl(var(--border)) !important; color: hsl(var(--foreground)) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--primary-solid) !important; border-color: var(--primary-solid) !important; color: #fff !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { color: hsl(var(--muted-foreground)) !important; background: hsl(var(--background)) !important; border-color: hsl(var(--border)) !important; } .dataTables_wrapper .dt-buttons .btn { border-radius: calc(var(--radius) * 0.6); } table.dataTable { border-collapse: separate !important; } /* ---------- Status badges (Bootstrap 3 .label, built server-side in controllers' DataTables row callbacks — e.g. app/Http/Controllers/ SellController.php, BarcodeController.php) ---------- */ .label { display: inline-block; padding: 3px 9px; border-radius: calc(var(--radius) * 0.5); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; line-height: 1.5; color: #fff; background-color: hsl(var(--muted-foreground)); } .label-default { background-color: hsl(var(--muted)); color: hsl(var(--muted-foreground)); } .label-primary { background-color: var(--primary-solid); } .label-success { background-color: hsl(var(--success)); } .label-warning { background-color: hsl(var(--warning)); } .label-danger { background-color: hsl(var(--destructive)); } /* ---------- Modals (Bootstrap 3, ~168 views) ---------- * Opened via .btn-modal (public/js/app.js) which AJAX-loads a partial into * a shared .modal container and calls jQuery's .modal('show') - standard * Bootstrap 3 modal JS/markup, untouched here; only the chrome is retoned. */ .modal-content { background-color: hsl(var(--card)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) * 1.1); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); } .modal-header { border-bottom: 1px solid hsl(var(--border)); padding: 16px 20px; } .modal-title { color: hsl(var(--foreground)); font-weight: 700; } .modal-body { padding: 20px; } .modal-footer { border-top: 1px solid hsl(var(--border)); padding: 14px 20px; } .modal-backdrop { background-color: hsl(220 29% 8%); } .modal-backdrop.in { opacity: 0.6; } /* Bootstrap 3's .close is a bare "x" glyph (font-size 21px, gray) sitting flush in the corner; give it the same rounded hit-target treatment as every other icon-only button in the app instead of a raw text glyph. */ .close { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: -4px -4px -4px 0; border-radius: calc(var(--radius) * 0.6); color: hsl(var(--muted-foreground)); opacity: 1; text-shadow: none; transition: background-color 0.15s ease, color 0.15s ease; } .close:hover, .close:focus { color: hsl(var(--foreground)); background-color: hsl(var(--muted)); opacity: 1; } /* ---------- Toastr notifications ---------- * Configured in public/js/common.js ($.extend(toastr.options, ...)); only * the default 2.1.x skin (resources/plugins/toastr/toastr.min.css) is * restyled here, JS config is untouched. Drop the base64 background-image * icons in favor of a plain left accent bar - simpler and matches the * flat, icon-badge-based feedback style used elsewhere (e.g. stat cards). */ #toast-container > div { background-image: none !important; padding: 14px 16px 14px 18px; border-radius: calc(var(--radius) * 0.7); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); border-inline-start: 4px solid rgba(255, 255, 255, 0.6); opacity: 1; } #toast-container > div:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24); opacity: 1; } .toast-success { background-color: hsl(var(--success)) !important; } .toast-error { background-color: hsl(var(--destructive)) !important; } .toast-info { background-color: var(--primary-solid) !important; } .toast-warning { background-color: hsl(var(--warning)) !important; } .toast-close-button { text-shadow: none; } /* ---------- Tooltips & popovers (Bootstrap 3, ~26 views) ---------- */ .tooltip-inner { background-color: hsl(220 29% 12%); color: #fff; border-radius: calc(var(--radius) * 0.5); padding: 6px 10px; font-size: 12px; } .tooltip.top .tooltip-arrow { border-top-color: hsl(220 29% 12%); } .tooltip.bottom .tooltip-arrow { border-bottom-color: hsl(220 29% 12%); } .tooltip.left .tooltip-arrow { border-left-color: hsl(220 29% 12%); } .tooltip.right .tooltip-arrow { border-right-color: hsl(220 29% 12%); } .popover { background-color: hsl(var(--popover)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) * 0.7); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .popover-title { background-color: hsl(var(--muted)); color: hsl(var(--foreground)); border-bottom: 1px solid hsl(var(--border)); border-top-left-radius: calc(var(--radius) * 0.7); border-top-right-radius: calc(var(--radius) * 0.7); font-weight: 700; } .popover.top > .arrow::after { border-top-color: hsl(var(--popover)); } .popover.bottom > .arrow::after { border-bottom-color: hsl(var(--popover)); } .popover.left > .arrow::after { border-left-color: hsl(var(--popover)); } .popover.right > .arrow::after { border-right-color: hsl(var(--popover)); } /* ---------- select2 dark-mode gaps ---------- * The base select2 rules above already read from the shared tokens and * follow dark mode automatically; these two were the only pieces left on * select2's own default white background/black text, invisible once the * surrounding tokens go dark. */ .select2-dropdown { background-color: hsl(var(--popover)); color: hsl(var(--foreground)); } .select2-results__option { color: hsl(var(--foreground)); } .select2-search--dropdown .select2-search__field { background-color: hsl(var(--background)); color: hsl(var(--foreground)); } .select2-container--default .select2-selection--single .select2-selection__placeholder, .select2-container--default .select2-selection--multiple .select2-selection__placeholder { color: hsl(var(--muted-foreground)); } /* ---------- Dropzone (file upload, 4 views) ---------- */ .dropzone { background-color: hsl(var(--background)); border: 2px dashed hsl(var(--border)); border-radius: calc(var(--radius) * 0.8); } .dropzone:hover { border-color: var(--primary-solid); } .dropzone .dz-message { color: hsl(var(--muted-foreground)); } .dropzone .dz-preview .dz-details { background-color: hsl(var(--muted)); color: hsl(var(--foreground)); } /* ---------- Checkboxes & radios (iCheck plugin, ~51 views) ---------- * public/js/app.js initializes every .input-icheck as * icheckbox_square-blue/iradio_square-blue - a sprite-image skin * (resources/plugins .../icheck/skins/square/blue.png) from the * iCheck jQuery plugin (2013-era, no longer maintained). The plugin still * renders its usual DOM (a
/ pair replacing the native input) * and toggles the same .hover/.checked/.disabled classes it always has - * only the visual skin is replaced here, with a flat two-tone box instead * of the sprite, drawn with plain CSS on the shared tokens so it also * follows dark mode and the tenant's brand color. */ .icheckbox_square-blue, .iradio_square-blue { background-image: none !important; background-color: hsl(var(--background)); border: 1.5px solid hsl(var(--input)); box-sizing: border-box; transition: background-color 0.15s ease, border-color 0.15s ease; } .iradio_square-blue { border-radius: 50%; } .icheckbox_square-blue.hover, .iradio_square-blue.hover { border-color: var(--primary-solid); } .icheckbox_square-blue.checked, .iradio_square-blue.checked { background-color: var(--primary-solid); border-color: var(--primary-solid); } .icheckbox_square-blue.checked::after { content: ""; display: block; width: 6px; height: 11px; margin: 2px auto 0; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); } .iradio_square-blue.checked::after { content: ""; display: block; width: 8px; height: 8px; margin: 6px auto 0; border-radius: 50%; background: #fff; } .icheckbox_square-blue.disabled, .iradio_square-blue.disabled { background-color: hsl(var(--muted)); border-color: hsl(var(--border)); cursor: not-allowed; } .icheckbox_square-blue.checked.disabled, .iradio_square-blue.checked.disabled { background-color: hsl(var(--muted-foreground)); border-color: hsl(var(--muted-foreground)); } /* ---------- Tabs (AdminLTE .nav-tabs-custom, ~21 views) ---------- */ .nav-tabs-custom { background-color: hsl(var(--card)); border-radius: calc(var(--radius) * 0.8); box-shadow: none; border: 1px solid hsl(var(--border)); } .nav-tabs-custom > .nav-tabs { border-bottom: 1px solid hsl(var(--border)); } .nav-tabs-custom > .nav-tabs > li > a { color: hsl(var(--muted-foreground)); border-radius: 0; } .nav-tabs-custom > .nav-tabs > li > a:hover { background-color: hsl(var(--muted)); color: hsl(var(--foreground)); border-color: transparent; } .nav-tabs-custom > .nav-tabs > li.active > a, .nav-tabs-custom > .nav-tabs > li.active:hover > a { background-color: hsl(var(--card)); color: var(--primary-solid); border-color: hsl(var(--border)); border-bottom-color: transparent; font-weight: 600; } .nav-tabs-custom > .nav-tabs.pull-right > li.active > a { border-color: hsl(var(--border)); } /* ---------- Alerts (Bootstrap 3, danger/info/warning in use) ---------- */ .alert { border-radius: calc(var(--radius) * 0.7); border-width: 1px; border-style: solid; padding: 12px 16px; } .alert-danger { background-color: hsl(var(--destructive) / 0.08); border-color: hsl(var(--destructive) / 0.3); color: hsl(var(--destructive)); } .alert-warning { background-color: hsl(var(--warning) / 0.1); border-color: hsl(var(--warning) / 0.35); color: hsl(var(--warning)); } .alert-info { background-color: color-mix(in srgb, var(--primary-solid) 8%, hsl(var(--background))); border-color: color-mix(in srgb, var(--primary-solid) 30%, transparent); color: var(--primary-solid); } .alert-success { background-color: hsl(var(--success) / 0.1); border-color: hsl(var(--success) / 0.35); color: hsl(var(--success)); } /* ---------- Pagination (Laravel's ->links(), non-DataTable) ---------- * Two vendor pagination views are published (resources/views/vendor/ * pagination/): "default" (Bootstrap 3 structure, .pagination > li > a, * also used as-is by sale_pos/partials/product_list_paginator.blade.php) * and "bootstrap-4" (.page-item/.page-link) - AppServiceProvider calls * both Paginator::useBootstrapThree() and ::useBootstrap(), with the * latter winning, but both markups are covered here since either could be * in play depending on Blade cache/version drift. */ .pagination > li > a, .pagination > li > span, .page-link { color: hsl(var(--foreground)); background-color: hsl(var(--background)); border: 1px solid hsl(var(--border)); margin-inline-start: -1px; } .pagination > li:first-child > a, .pagination > li:first-child > span, .page-item:first-child .page-link { border-start-start-radius: calc(var(--radius) * 0.6); border-end-start-radius: calc(var(--radius) * 0.6); } .pagination > li:last-child > a, .pagination > li:last-child > span, .page-item:last-child .page-link { border-start-end-radius: calc(var(--radius) * 0.6); border-end-end-radius: calc(var(--radius) * 0.6); } .pagination > li > a:hover, .pagination > li > span:hover, .page-link:hover { background-color: hsl(var(--muted)); color: hsl(var(--foreground)); border-color: hsl(var(--border)); } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .page-item.active .page-link { background-color: var(--primary-solid); border-color: var(--primary-solid); color: #fff; } .pagination > .disabled > a, .pagination > .disabled > span, .pagination > .disabled > a:hover, .pagination > .disabled > span:hover, .page-item.disabled .page-link { color: hsl(var(--muted-foreground)); background-color: hsl(var(--background)); border-color: hsl(var(--border)); } /* ---------- RTL popover positioning fix ---------- * Bootstrap 3's tooltip/popover JS (applyPlacement in bootstrap.js) always * computes and writes an inline `left` (a physical, direction-agnostic * pixel offset from getBoundingClientRect) regardless of dir="rtl" - * that inline value already lands the popover next to its trigger * correctly in both directions and must be left alone. public/css/rtl.css * is a blanket, mechanical left<->right flip of the whole Bootstrap * stylesheet and includes `.popover{left:auto;right:0}` - the `right:0` * half of that then competes with the correct inline left (both are * separate CSS properties, so both apply), pinning every popover to the * right edge of its offset parent instead. Since @show_tooltip's popovers * use data-container="body", that edge is the right edge of the whole * page - far from whatever icon triggered them (e.g. the dashboard * stat-card info icons). Only neutralize `right`; leaving `left` alone * (no !important, no value) so Bootstrap's inline style keeps governing. */ .popover { right: auto !important; } /* Same fix for the little triangle pointer: replaceArrow() in bootstrap.js sets an inline left (percentage, for top/bottom placements like the "auto bottom" used by @show_tooltip) that rtl.css's arrow rules similarly compete with via a mirrored `right`. */ .popover > .arrow { right: auto !important; } /* ---------- Active subscription popover (Superadmin header icon) ---------- * Content built in Modules/Superadmin/.../active_subscription.blade.php; * was a raw , replaced with this * card-like list so it reads as a small popover, not a plain data table. */ .sc-subscription-popover { min-width: 200px; } .sc-subscription-popover-name { font-weight: 700; color: hsl(var(--foreground)); margin-bottom: 2px; } .sc-subscription-popover-dates { font-size: 12px; color: hsl(var(--muted-foreground)); margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid hsl(var(--border)); } .sc-subscription-popover-list { list-style: none; margin: 0; padding: 0; } .sc-subscription-popover-list li { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 13px; color: hsl(var(--foreground)); } .sc-subscription-popover-list li svg { color: hsl(var(--success)); flex-shrink: 0; }