/* ================================================================ * AIO ERP — css/bundle-foundation.css * Auto-generated by: php artisan css:bundle * Generated at: 2026-03-23 03:43:31 * DO NOT EDIT — edit the source files and re-run the command. * ================================================================ */ /* === Source: css/tokens.css === */ /* ============================================================================= AIO ERP — MASTER DESIGN TOKENS (tokens.css) ----------------------------------------------------------------------------- Single source of truth for every design value in the app. Load this file FIRST in the CSS cascade, before all other app stylesheets. All other stylesheets should consume these variables via var(--token-name). Theme overrides live in premium-themes.css (per [data-theme] selector). Dark-mode component rules live in dark-mode.css. ============================================================================= SECTIONS 0. Color Primitives — raw palette, never used directly in components 1. Semantic Color Aliases — light-mode defaults 2. Elevation / Shadows 3. Shape / Radii 4. Spacing Scale 5. Typography Scale 6. Motion / Transitions 7. Z-Index Layers 8. Form & Input Tokens 9. Button Tokens 10. Card / Panel Tokens 11. Sidebar Accent Tokens 12. Dark-Mode Token Overrides ============================================================================= */ /* ============================================================================= 0. COLOR PRIMITIVES Raw palette values — only referenced by Section 1 semantic aliases. Components must never use primitives directly. ============================================================================= */ :root { /* Brand blues */ --palette-blue-50: #eff6ff; --palette-blue-100: #dbeafe; --palette-blue-200: #bfdbfe; --palette-blue-400: #60a5fa; --palette-blue-500: #3b82f6; --palette-blue-600: #2563eb; --palette-blue-700: #1d4ed8; --palette-blue-800: #1e40af; --palette-blue-900: #1e3a8a; /* Brand (AIO house blue) */ --palette-aio-400: #3a9bdc; --palette-aio-500: #147cbb; --palette-aio-600: #0e5a8a; --palette-aio-100: #e0f2fe; /* Slate neutrals */ --palette-slate-50: #f8fafc; --palette-slate-100: #f1f5f9; --palette-slate-200: #e2e8f0; --palette-slate-300: #cbd5e1; --palette-slate-400: #94a3b8; --palette-slate-500: #64748b; --palette-slate-600: #475569; --palette-slate-700: #334155; --palette-slate-800: #1e293b; --palette-slate-900: #0f172a; /* Semantic status */ --palette-green-100: #dcfce7; --palette-green-500: #22c55e; --palette-green-700: #15803d; --palette-green-900: #166534; --palette-red-100: #fee2e2; --palette-red-400: #f87171; --palette-red-500: #ef4444; --palette-red-700: #b91c1c; --palette-red-900: #991b1b; --palette-yellow-100:#fef3c7; --palette-yellow-500:#f59e0b; --palette-yellow-700:#b45309; --palette-yellow-900:#92400e; --palette-orange-500:#fca424; --palette-cyan-100: #cffafe; --palette-cyan-400: #22d3ee; --palette-cyan-500: #06b6d4; /* Dark surfaces */ --palette-dark-50: #1e2125; --palette-dark-100: #282c30; --palette-dark-200: #1a1d20; --palette-dark-900: #121416; } /* ============================================================================= 1. SEMANTIC COLOR ALIASES — LIGHT-MODE DEFAULTS These are what components should reference. Theme overrides (premium-themes.css) will replace these per [data-theme] selector with higher specificity. ============================================================================= */ :root { /* Brand / Primary */ --primary: var(--palette-aio-500); --primary-dark: var(--palette-aio-600); --primary-light: var(--palette-aio-100); --primary-color: var(--palette-blue-600); /* premium-themes alias */ --accent-color: #7c3aed; /* Secondary & Status */ --secondary: var(--palette-slate-500); --warning: var(--palette-orange-500); --danger: var(--palette-red-500); --success: var(--palette-green-500); --info: var(--palette-cyan-500); --gold: #bca474; --soft-blue: #8090b4; --highlight: #ff9048; /* Backgrounds */ --bg-body: #f3f4f6; --bg-surface: #ffffff; --bg-sidebar: var(--palette-slate-800); --bg-input: #ffffff; --bg-white: #ffffff; --bg-card: #ffffff; --bg-card-alt: #f8fbff; --surface-raised: #ffffff; --surface-muted: #eef4ff; /* Text */ --text-main: #1f2937; --text-color: #1f2937; /* premium-themes alias */ --text-muted: var(--palette-slate-400); --text-inverse: #ffffff; /* Borders */ --border-color: var(--palette-slate-200); --border-focus: var(--primary); /* Badges */ --badge-success-bg: var(--palette-green-100); --badge-success-text: var(--palette-green-900); --badge-danger-bg: var(--palette-red-100); --badge-danger-text: var(--palette-red-900); --badge-warning-bg: var(--palette-yellow-100); --badge-warning-text: var(--palette-yellow-900); --badge-info-bg: var(--palette-blue-100); --badge-info-text: var(--palette-blue-800); } /* ============================================================================= 2. ELEVATION / SHADOWS ============================================================================= */ :root { --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025); --shadow-float: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02); --shadow-xl: 0 32px 80px rgba(15, 23, 42, 0.14); } /* ============================================================================= 3. SHAPE / RADII ============================================================================= */ :root { --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* Aliases used by components */ --border-radius: 18px; /* premium-themes default card radius */ } /* ============================================================================= 4. SPACING SCALE ============================================================================= */ :root { --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; } /* ============================================================================= 5. TYPOGRAPHY SCALE ============================================================================= */ :root { --font-primary: 'Sirucanorm Bold', 'Inter', system-ui, -apple-system, sans-serif; --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-md: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold:600; --font-weight-bold: 700; --font-weight-extrabold:800; --line-height-none: 1; --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-normal: 1.6; --line-height-relaxed: 1.75; --line-height-loose: 2; --letter-spacing-tight: -0.025em; --letter-spacing-normal: 0em; --letter-spacing-wide: 0.025em; --letter-spacing-wider: 0.05em; } /* ============================================================================= 6. MOTION / TRANSITIONS ============================================================================= */ :root { --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --easing-decelerate: cubic-bezier(0, 0, 0.2, 1); --easing-accelerate: cubic-bezier(0.4, 0, 1, 1); --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-instant: 75ms; --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 500ms; --duration-slower: 700ms; --transition-fast: 0.15s var(--easing-standard); --transition-smooth: 0.3s var(--easing-standard); --transition-slow: 0.5s var(--easing-standard); --transition-bounce: 0.4s var(--easing-spring); } /* ============================================================================= 7. Z-INDEX LAYERS ============================================================================= */ :root { --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; --z-loader: 700; --z-max: 9999; } /* ============================================================================= 8. FORM & INPUT TOKENS ============================================================================= */ :root { --input-height: 2.375rem; /* 38px — consistent across all form elements */ --input-radius: var(--radius-md); --input-border: var(--border-color); --input-bg: var(--bg-input); --input-text: var(--text-main); --input-placeholder:var(--text-muted); --input-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.15); --input-disabled-bg:#f1f5f9; --input-disabled-text:var(--text-muted); } /* ============================================================================= 9. BUTTON TOKENS ============================================================================= */ :root { --aio-btn-radius: 12px; --aio-btn-height: 40px; --aio-btn-padding-x: 16px; --aio-btn-shadow: 0 10px 24px rgba(15, 23, 42, 0.10); --aio-btn-shadow-hover:0 14px 30px rgba(15, 23, 42, 0.16); --aio-btn-border: rgba(148, 163, 184, 0.24); --aio-btn-bg-muted: #ffffff; --aio-btn-text-muted: #334155; } /* ============================================================================= 10. CARD / PANEL TOKENS ============================================================================= */ :root { --card-bg: var(--bg-surface); --card-alt-bg: var(--bg-card-alt); --card-border: var(--border-color); --card-radius: var(--radius-lg); --card-shadow: var(--shadow-md); --card-padding: var(--space-6); --panel-header-bg: #f8fbff; --panel-header-border: var(--border-color); --metric-accent: linear-gradient(90deg, var(--primary-color, #2563eb) 0%, var(--accent-color, #7c3aed) 100%); --widget-icon-bg: linear-gradient(135deg, var(--primary-color, #2563eb) 0%, var(--accent-color, #7c3aed) 100%); --header-gradient: linear-gradient(135deg, #1d4ed8 0%, #7c3aed 100%); --sidebar-gradient: var(--bg-sidebar); --header-surface: rgba(255, 255, 255, 0.12); --header-surface-hover: rgba(255, 255, 255, 0.2); --header-text: #ffffff; --focus-ring: rgba(37, 99, 235, 0.28); --link-color: #1d4ed8; --link-hover-color:#1e40af; --premium-primary: var(--palette-aio-500); --premium-primary-soft: rgba(20, 124, 187, 0.1); --premium-accent: var(--palette-aio-600); --premium-bg: #f4f7fb; --premium-surface: #ffffff; --premium-border: #dbe4ef; --premium-text: var(--palette-slate-900); --premium-muted: var(--palette-slate-500); --premium-radius-lg: var(--radius-lg); --premium-radius-md: var(--radius-md); --premium-shadow: var(--shadow-md); } /* ============================================================================= 11. SIDEBAR ACCENT TOKENS ============================================================================= */ :root { --sb-text: #cfd6e4; --sb-text-hover: #ffffff; --sb-accent-1: #22c1c3; --sb-accent-2: #7b2ff7; --sb-accent-3: #ff4ecd; --sb-hover-bg: rgba(255, 255, 255, 0.04); --sb-open-bg: rgba(255, 255, 255, 0.06); } /* ============================================================================= 13. SHADCN/UI v4 CSS VARIABLES (fully aligned with shadcn/ui 4.1.0) All variable names match shadcn's globals.css exactly so any component built following shadcn conventions works without remapping. ============================================================================= */ :root { /* ── Core semantics ─────────────────────────────────────────────────────── */ --background: #ffffff; --foreground: #0f172a; --card: #ffffff; /* ── Input group addon — always neutral, never themed ───────────────────── */ --input-addon-bg: #f8fafc; /* light neutral */ --card-foreground: #0f172a; --popover: #ffffff; --popover-foreground: #0f172a; --primary: #147cbb; --primary-foreground: #ffffff; --secondary: #f1f5f9; --secondary-foreground: #1e293b; --muted: #f1f5f9; --muted-foreground: #64748b; --accent: #f1f5f9; --accent-foreground: #1e293b; --destructive: #ef4444; --destructive-foreground: #fef2f2; --border: #e2e8f0; --input: #e2e8f0; --ring: #147cbb; --radius: 0.625rem; /* shadcn v4 default */ /* ── Surface (shadcn v4 new token) ──────────────────────────────────────── */ --surface: #f8fafc; --surface-foreground: #0f172a; /* ── Chart tokens (shadcn v4) ───────────────────────────────────────────── */ --chart-1: #3b82f6; --chart-2: #6366f1; --chart-3: #8b5cf6; --chart-4: #ec4899; --chart-5: #14b8a6; /* ── Sidebar token set (shadcn v4 complete) ─────────────────────────────── */ --sidebar: #f8fafc; --sidebar-foreground: #0f172a; --sidebar-primary: #147cbb; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #f1f5f9; --sidebar-accent-foreground: #1e293b; --sidebar-border: #e2e8f0; --sidebar-ring: #147cbb; /* ── Header ─────────────────────────────────────────────────────────────── */ --header-bg: #ffffff; --header-border: #e2e8f0; --header-text: #0f172a; --header-btn-bg: transparent; --header-btn-bg-hover: #f1f5f9; --header-btn-text: #475569; --header-btn-text-hover: #0f172a; --header-btn-ring: #e2e8f0; /* ── Code block tokens (shadcn v4.1.0) ─────────────────────────────────── */ --code: #f8fafc; --code-foreground: #0f172a; --code-highlight: #f1f5f9; --code-number: #64748b; /* ── Selection tokens (shadcn v4.1.0) ───────────────────────────────────── */ --selection: #0f172a; --selection-foreground: #ffffff; /* ── Legacy sidebar aliases (referenced in shadcn-ui.css) ───────────────── */ --sidebar-bg: #0f172a; --sidebar-text: #94a3b8; --sidebar-text-hover: #f1f5f9; --sidebar-accent-bg: rgba(255,255,255,0.06); --sidebar-accent-text: #ffffff; --sidebar-logo-border: rgba(255,255,255,0.08); } /* ============================================================================= 12. DARK-MODE TOKEN OVERRIDES Applied via both html.dark-mode and body.dark-mode (some selectors need both). Component-level dark mode rules remain in dark-mode.css. ============================================================================= */ .dark-mode, html.dark-mode, html[data-color-mode="dark"] { --primary: #147cbb; --primary-dark: #3a9bdc; --primary-light: rgba(20, 124, 187, 0.15); --secondary: #a4a4a4; --warning: #fca424; --danger: #f87171; --success: #4ade80; --bg-body: #121416; --bg-surface: #1e2125; --bg-white: #1e2125; --bg-sidebar: #1a1d20; --bg-input: #282c30; --bg-card: #1e2125; --bg-card-alt: #23272b; --surface-raised: #282c30; --surface-muted: #1a1d20; --text-main: #e1e1e1; --text-color: #e1e1e1; --text-muted: #9ca3af; --text-inverse: #1e2125; --border-color: #3a3f44; --border-focus: #147cbb; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3); --aio-btn-border: rgba(148, 163, 184, 0.26); --aio-btn-bg-muted: rgba(30, 41, 59, 0.92); --aio-btn-text-muted: #e5e7eb; --card-bg: #1e2125; --card-border: #3a3f44; --panel-header-bg: #23272b; --panel-header-border:#3a3f44; --premium-bg: #121416; --premium-surface: #1e2125; --premium-border: #3a3f44; --premium-text: #e1e1e1; --premium-muted: #9ca3af; --premium-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); --input-bg: #282c30; --input-border: #3a3f44; --input-text: #e1e1e1; --input-placeholder: #9ca3af; --input-disabled-bg: #1a1d20; --input-addon-bg: #282c30; /* dark neutral for addons */ /* ── shadcn v4 complete token set — dark mode ───────────────────────────── */ --background: #0f172a; --foreground: #f1f5f9; --card: #1e2125; --card-foreground: #f1f5f9; --popover: #1e2125; --popover-foreground: #f1f5f9; --primary: #3a9bdc; --primary-foreground: #ffffff; --secondary: #1e293b; --secondary-foreground: #f1f5f9; --muted: #1e293b; --muted-foreground: #94a3b8; --accent: rgba(255,255,255,0.07); --accent-foreground: #f1f5f9; --destructive: #f87171; --destructive-foreground: #7f1d1d; --border: rgba(255,255,255,0.10); --input: rgba(255,255,255,0.15); --ring: #3a9bdc; /* ── Surface (shadcn v4) — dark ─────────────────────────────────────────── */ --surface: #1e2125; --surface-foreground: #94a3b8; /* ── Chart tokens — dark (brighter for dark bg) ─────────────────────────── */ --chart-1: #60a5fa; --chart-2: #818cf8; --chart-3: #a78bfa; --chart-4: #f472b6; --chart-5: #2dd4bf; /* ── Code block tokens — dark (shadcn v4.1.0) ──────────────────────────── */ --code: #1e2125; --code-foreground: #94a3b8; --code-highlight: #282c30; --code-number: #64748b; /* ── Selection tokens — dark (shadcn v4.1.0) ────────────────────────────── */ --selection: #e2e8f0; --selection-foreground: #1e2125; /* ── Sidebar token set — dark ───────────────────────────────────────────── */ --sidebar: #1a1d20; --sidebar-foreground: #f1f5f9; --sidebar-primary: #3a9bdc; --sidebar-primary-foreground: #ffffff; --sidebar-accent: rgba(255,255,255,0.06); --sidebar-accent-foreground: #f1f5f9; --sidebar-border: rgba(255,255,255,0.08); --sidebar-ring: #3a9bdc; /* ── Header — dark ──────────────────────────────────────────────────────── */ --header-bg: #1a1d20; --header-border: #3a3f44; --header-text: #f1f5f9; --header-btn-bg: transparent; --header-btn-bg-hover: rgba(255,255,255,0.06); --header-btn-text: #94a3b8; --header-btn-text-hover: #f1f5f9; --header-btn-ring: #3a3f44; color-scheme: dark; } /* === Source: css/typography-static.css === */ /* ============================================================================= AIO ERP — Typography Static Rules (typography-static.css) ----------------------------------------------------------------------------- Static portions of the typography engine. Extracted from css.blade.php. The dynamic parts (--font-primary, font-size px value) remain inline in css.blade.php because they depend on per-business PHP settings. ============================================================================= Load order: after tokens.css, before app.css ============================================================================= */ /* --- Global Font Inheritance --- */ body, .content-wrapper { font-family: var(--font-primary) !important; font-size: 1rem !important; } body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.glyphicon) { font-family: inherit; } /* Keep major UI containers tied to the root typography scale */ .main-header, .main-sidebar, .content-wrapper, .main-footer, .modal, .dropdown-menu, .table, .nav, .list-group-item, .pagination, .select2-container, .swal-modal, #toast-container { font-size: 1rem; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary) !important; } /* --- Heading Scale --- */ h1, .h1 { font-size: 2.2rem !important; font-weight: var(--font-weight-bold, 700); } h2, .h2 { font-size: 1.75rem !important; font-weight: var(--font-weight-bold, 700); } h3, .h3 { font-size: 1.5rem !important; font-weight: var(--font-weight-semibold, 600); } h4, .h4 { font-size: 1.25rem !important; font-weight: var(--font-weight-semibold, 600); } h5, .h5 { font-size: 1rem !important; font-weight: var(--font-weight-semibold, 600); } h6, .h6 { font-size: 0.875rem!important; font-weight: var(--font-weight-medium, 500); } /* --- Form Controls & Select2 --- */ .form-control, .btn, .input-group-addon, .select2-container .select2-selection--single .select2-selection__rendered, .select2-results__option { font-size: 1rem !important; font-family: var(--font-primary) !important; } .select2-container .select2-selection--single, .input-group-addon, .form-control { height: 2.5rem !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 2.5rem !important; } /* --- DataTables --- */ table.table td, table.table th { font-size: 0.95rem !important; } /* --- Select native arrow cleanup (prevents double-arrow with Select2) --- */ select.form-control, select.input-sm, select.input-lg { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: none !important; padding-right: 2.4rem !important; } select.form-control::-ms-expand, select.input-sm::-ms-expand, select.input-lg::-ms-expand { display: none; } /* --- Select2 custom arrow --- */ .select2-container--default .select2-selection--single { background-image: none !important; padding-right: 2.2rem !important; position: relative; } .select2-container--default .select2-selection--single .select2-selection__arrow { width: 2rem !important; height: 100% !important; right: 0.4rem !important; top: 0 !important; background: transparent !important; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #94a3b8 transparent transparent transparent !important; border-style: solid !important; border-width: 6px 5px 0 5px !important; width: 0 !important; height: 0 !important; margin-left: -5px !important; margin-top: -2px !important; } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #94a3b8 transparent !important; border-width: 0 5px 6px 5px !important; margin-top: -3px !important; } /* --- Select2 Dark Mode --- */ html.dark-mode select.form-control, html.dark-mode select.input-sm, html.dark-mode select.input-lg, html[data-color-mode="dark"] select.form-control, html[data-color-mode="dark"] select.input-sm, html[data-color-mode="dark"] select.input-lg { background-image: none !important; } html.dark-mode .select2-container--default .select2-selection--single, html[data-color-mode="dark"] .select2-container--default .select2-selection--single { background-color: #1f2937 !important; color: #e5e7eb !important; border-color: rgba(71, 85, 105, 0.95) !important; } html.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered, html[data-color-mode="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: #e5e7eb !important; } html.dark-mode .select2-container--default .select2-selection--single .select2-selection__placeholder, html[data-color-mode="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #94a3b8 !important; } html.dark-mode .select2-dropdown, html[data-color-mode="dark"] .select2-dropdown { background: #111827 !important; border-color: rgba(71, 85, 105, 0.95) !important; } html.dark-mode .select2-search--dropdown .select2-search__field, html[data-color-mode="dark"] .select2-search--dropdown .select2-search__field { background: #0f172a !important; color: #e5e7eb !important; border-color: rgba(71, 85, 105, 0.95) !important; } html.dark-mode .select2-results__option, html[data-color-mode="dark"] .select2-results__option { background: transparent !important; color: #e5e7eb !important; } html.dark-mode .select2-results__option--highlighted[aria-selected], html[data-color-mode="dark"] .select2-results__option--highlighted[aria-selected] { background: #2563eb !important; color: #ffffff !important; } html.dark-mode .select2-container--default .select2-results__option[aria-selected="true"], html[data-color-mode="dark"] .select2-container--default .select2-results__option[aria-selected="true"] { background: #1e293b !important; color: #ffffff !important; } /* === Source: css/app.css === */ /* ========================================================================== AIO ERP SOLUTIONS - MAIN STYLESHEET Professionalized & Merged | 2025 Edition Optimized for Performance & Modern UI (Canvas Mode) ========================================================================== */ /* ========================================================================== 1. VARIABLES & BASE SETTINGS ========================================================================== */ :root { /* --- Brand Identity --- */ --primary: #147cbb; /* Brand Blue */ --primary-dark: #0e5a8a; --primary-light: #e0f2fe; /* Light Blue for hovers/backgrounds */ --secondary: #64748b; /* Modern Slate Grey (Replaces old grey) */ --warning: #fca424; /* Orange/Warning */ --danger: #ef4444; /* Standardized Red */ --success: #22c55e; /* Standardized Green */ --gold: #bca474; --soft-blue: #8090b4; --highlight: #ff9048; /* --- System Palette --- */ --bg-body: #f3f4f6; /* Soft Light Grey */ --bg-surface: #ffffff; /* Pure White for Cards */ --bg-sidebar: #1e293b; /* Deep Slate */ --text-main: #1f2937; /* High Contrast Dark */ --text-muted: #9ca3af; /* Medium Grey */ --border-color: #e2e8f0; /* Subtle Border */ /* --- Modern Depth (Soft Shadows) --- */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025); --shadow-float: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02); /* --- Structure --- */ --radius-sm: 6px; --radius-md: 10px; /* Standard 2025 Radius */ --radius-lg: 16px; /* Card Radius */ --input-height: 2.375rem; /* 38px — matches shadcn-components.css single source of truth */ /* --- Animation --- */ --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1); color-scheme: light !important; } /* --- Base Typography & Reset --- */ body { font-family: var(--font-primary, 'Sirucanorm Bold', 'Inter', system-ui, -apple-system, sans-serif); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 0.95rem; line-height: 1.6; background-color: var(--bg-body) !important; color: var(--text-main) !important; transition: opacity ease-in 0.2s; } /* Global Component Backgrounds */ .content-wrapper, .modal-content, .box, .select2-dropdown { background-color: var(--bg-body) !important; color: var(--text-main) !important; } /* Link Styling */ a { color: var(--primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--primary-dark); } ::selection { background: var(--primary); color: #fff; } .action-link, .cursor-pointer { cursor: pointer; } /* ========================================================================== 2. UTILITIES & HELPERS ========================================================================== */ /* Spacing */ .p-0, .pa-0 { padding: 0px !important; } .pt-0 { padding-top: 0px !important; } .pb-0 { padding-bottom: 0px !important; } .p-4 { padding: 4px; } .p-5-5 { padding: 5px 5px !important; } .p-10, .padding-10 { padding: 10px !important; } .padding-5 { padding: 5px !important; } .m-2 { margin: 2px !important; } .m-4 { margin: 4px; } .m-5 { margin: 5px; } .m-8 { margin: 8px; } .mt-0 { margin-top: 0 !important; } .mt-5 { margin-top: 5px !important; } .mt-10 { margin-top: 10px; } .mt-15 { margin-top: 15px; } .mt-56 { margin-top: 56px !important; } .mb-0 { margin-bottom: 0 !important; } .mb-5 { margin-bottom: 5px !important; } .mb-10 { margin-bottom: 10px; } .mb-12 { margin-bottom: 12px !important; } .mb-20, .margin-bottom-20 { margin-bottom: 20px !important; } .mb-40 { margin-bottom: 40px !important; } .mr-8 { margin-right: 8px !important; } .margin-left-10 { margin-left: 10px; } .spacer { margin-top: 20px; } /* Text & Alignment */ .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .f-left { float: left; } .f-right { float: right; } .v-center { vertical-align: middle !important; } .text-bold { font-weight: 700; } .text-white, .color-white { color: white !important; } .text-muted-imp { color: var(--text-muted) !important; } .text-primary { color: var(--primary) !important; } .color-555 { color: #555555 !important; } .ws-nowrap { white-space: nowrap; } .word-wrap { word-wrap: break-word !important; } /* Financial Indicators */ .text-payable { color: #dc2626 !important; font-weight: 600; } .text-receivable { color: var(--primary) !important; font-weight: 600; } /* Font Sizes */ .font-17 { font-size: 17px !important; } .font-23 { font-size: 23px !important; } .font-30 { font-size: 30px !important; } .fs-10 { font-size: 10px; } /* Sizing */ .width-40 { width: 40% !important; } .width-50 { width: 50% !important; } .width-60 { width: 60% !important; } .width-100 { width: 100% !important; } /* Colors & Backgrounds */ .bg-white { background-color: var(--bg-white); } .bg-light-gray { background-color: #f3f4f6 !important; } .bg-lightgray { background-color: #F0EDED !important; } .bg-danger { background-color: #fecaca !important; color: #991b1b !important; } .bg-info { background-color: var(--primary) !important; } .bg-info > a { color: #FFFFFF !important; } .bg-manufacturing { background-color: var(--highlight); } .bg-aqua-lite { background-color: #7FFFD4; } .bg-woocommerce { background-color: #9E458B !important; } .bg-light-green { background-color: #98D973 !important; color: #fff !important; } .bg-transparent { background-color: transparent !important; } /* Scrollbars */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } .jquery-top-scrollbar { height: 6px !important; } .scroll-top-bottom { width: 100%; overflow: scroll; } /* Scroll to Top */ .scrolltop { display: none; width: 100%; margin: 0 auto; position: fixed; bottom: 20px; right: 10px; z-index: 99; } .scroll { position: absolute; right: 20px; bottom: 20px; background: rgba(20, 124, 187, 0.8); color: #fff; padding: 10px 14px; text-align: center; cursor: pointer; transition: 0.3s; border-radius: 50%; box-shadow: var(--shadow-md); } .scroll:hover { background: var(--primary); transform: translateY(-2px); } .scroll .fas { font-size: 20px; margin-top: 0; } /* ========================================================================== 3. LAYOUT & ARCHITECTURE ========================================================================== */ /* Header & Sidebar */ .main-header .sidebar-toggle:before { content: "" !important; } .main-header .navbar { box-shadow: var(--shadow-sm); border-bottom: 1px solid rgba(0,0,0,0.05); } body .main-sidebar { background-color: var(--bg-sidebar) !important; min-height: 100vh !important; height: 100% !important; overflow-y: auto !important; padding-bottom: 50px; } /* Skin Overrides */ .skin-black .main-header, .skin-black-light .main-header { color: #525f7f !important; } .skin-black .main-header .navbar .nav .open>a, .skin-black .main-header .navbar .nav>li>a:hover, .skin-black .main-header .navbar > .sidebar-toggle:hover { color: #999 !important; } /* User Menu */ .navbar-nav>.user-menu>.dropdown-menu>li.user-header>img { border: 3px solid rgba(255,255,255,0.2); box-shadow: var(--shadow-md); height: auto; width: 100%; max-height: 120px; } html[dir="rtl"] #main_profile_dropdown > ul.tw-absolute { left: 0 !important; right: auto !important; } .dropdown-menu > li > a > i, .dropdown-menu > li > a > svg, .dropdown-menu > li > a > .fa, .dropdown-menu > li > a > .fas { margin-right: 10px !important; min-width: 20px; text-align: center; vertical-align: middle; color: var(--primary); } .dropdown-menu > li > a:hover { background-color: #f5f5f5; color: var(--primary-dark); } /* Notifications */ .navbar-nav>.notifications-menu>.dropdown-menu>li .menu { max-height: 350px; } .navbar-nav>.notifications-menu>.dropdown-menu>li .menu>li>a { white-space: normal; } /* Treeview Navigation */ .treeview-menu i { display: none !important; } /* Kill the container top/bottom breathing room that vendor.css adds */ .sidebar-menu > li > .treeview-menu, ul.treeview-menu { padding-top: 2px !important; padding-bottom: 2px !important; } /* Kill item-level margin */ .treeview-menu > li, .sidebar-menu .treeview-menu > li { padding: 0 !important; margin: 0 !important; } /* Tighten link padding */ .treeview-menu > li > a, .sidebar-menu .treeview-menu > li > a, .treeview-menu a { padding: 4px 8px 4px 22px !important; font-size: 12.5px !important; line-height: 1.35 !important; opacity: 0.82; transition: opacity 0.2s; display: block !important; } .treeview-menu a:hover { opacity: 1; } .treeview-menu a::before { content: "• "; margin-right: 5px; color: var(--primary); font-weight: bold; } /* ── Universal Search Modal ── */ #searchModal .aio-search-dialog { margin-top: 8vh !important; } #searchModal .modal-content { border-radius: var(--radius-lg) !important; border: 1px solid var(--border-color) !important; box-shadow: var(--shadow-xl, 0 20px 60px rgba(15,23,42,.18)) !important; } #searchModal .aio-search-header { padding: 16px 20px !important; border-bottom: 1px solid var(--border-color) !important; background: var(--card-bg, #fff) !important; border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; } #searchModal .aio-search-input-group { margin: 0 !important; display: flex !important; width: 100% !important; } #searchModal .aio-search-addon { background: var(--input-addon-bg, #f8fafc) !important; border-color: var(--border-color) !important; color: var(--primary) !important; font-size: 1rem; } #searchModal .aio-search-field { font-size: 1rem !important; height: 42px !important; min-height: 42px !important; border-color: var(--border-color) !important; } #searchModal .aio-search-field:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(20,124,187,0.15) !important; } #searchModal .aio-search-body { padding: 16px 20px !important; max-height: 60vh; overflow-y: auto; } .premium-search-portal { border-radius: var(--radius-md); } .premium-search-results { padding: 4px 0; } /* Login Page */ .left-col { background: linear-gradient(0deg, rgba(0, 0, 0, 0.76), rgba(51, 51, 51, 0.32)), url(../img/home-bg.jpg); text-align: center; background-size: cover; background-position: center; } .right-col { background: linear-gradient(135deg, var(--primary), var(--soft-blue)); height: 100%; } .login-header { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; } .login-header a { color: #fff; } /* Overlays */ .overlay { width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.8); position: fixed; top: 0; left: 0; display: none; z-index: 20; } .small-view-side-active { display: flex !important; flex-direction: column !important; z-index: 1001 !important; position: fixed !important; top: 0; left: 0; width: 260px !important; height: 100vh !important; background-color: #fff !important; transition: all 0.3s ease-in-out; box-shadow: 2px 0 10px rgba(0,0,0,0.1); } .tw-dw-btn.tw-dw-btn-xs.tw-dw-btn-outline { width: max-content; margin: 2px; } #scrollable-container { position: relative; } /* ========================================================================== 4. COMPONENTS ========================================================================== */ /* Containers */ .modal-xl { width: 90%; margin-left: auto !important; margin-right: auto !important; } .modal-content, .box, .info-box, .product_box { border: none !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm); transition: transform 0.2s; } /* ADD THIS TO FIX BLEEDING CORNERS */ .modal-content { overflow: hidden !important; } /* Buttons (Standard) */ .btn-primary, .btn-info, .tw-dw-btn-primary { background-color: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; } .btn-success { background-color: #28a745 !important; border-color: #28a745 !important; color: #fff !important; } .btn-danger { background-color: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; } .btn-warning { background-color: var(--warning) !important; border-color: var(--warning) !important; color: #fff !important; } /* Button Hover Effects */ .btn-primary:hover, .btn-info:hover { background-color: var(--primary-dark) !important; box-shadow: var(--shadow-md); transform: translateY(-1px); } .btn-success:hover { background-color: #218838 !important; box-shadow: var(--shadow-md); transform: translateY(-1px); } .btn-danger:hover { background-color: #b91c1c !important; box-shadow: var(--shadow-md); transform: translateY(-1px); } /* Icons in Buttons */ .btn-primary i, .btn-info i, .tw-dw-btn-primary i, .btn-success i, .btn-danger i, .btn-warning i { color: #fff !important; } /* Special Button Classes */ .btn-big { padding: 10px 30px; font-size: 18px; } .btn-login { padding: 6px 52px !important; } /* Table Icon Buttons (No Box Style) */ #commission_rules_table .btn-xs, #commission_tiers_table .btn-xs { background-color: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; outline: none !important; } #commission_rules_table .btn-xs:hover, #commission_tiers_table .btn-xs:hover { background-color: transparent !important; box-shadow: none !important; transform: scale(1.2); } #commission_rules_table thead .btn-primary i { color: var(--primary) !important; font-size: 18px; } #commission_tiers_table thead .btn-success i { color: #28a745 !important; font-size: 18px; } #commission_rules_table tbody .btn-danger i, #commission_tiers_table tbody .btn-danger i { color: #dc2626 !important; font-size: 18px; } /* Tabs */ .nav-tabs { border-bottom: 2px solid #e5e7eb; } .nav-tabs>li>a { border: none; color: var(--text-muted); font-weight: 600; padding: 12px 20px; font-size: 16px; } .nav-tabs>li.active>a { border: none; border-bottom: 2px solid var(--primary); color: var(--primary); background: transparent; } .pos-tab .pos-tab-content { display: none; } .pos-tab .pos-tab-content.active { display: block; } div.pos-tab-container { background-color: #ffffff; padding: 0 !important; border-radius: var(--radius-md); border: 1px solid #ddd; margin-bottom: 28px; box-shadow: var(--shadow-md); } div.pos-tab-menu div.list-group>a.active { background: linear-gradient(to right, var(--primary), var(--soft-blue)); color: #ffffff; } /* ========================================================================== SWEETALERT2 PROFESSIONAL BRANDING (v11) Solid Modal + Frosted Glass Backdrop + Brand Font ========================================================================== */ /* 1. The Modal Container: Solid Background & Rounded Corners */ .swal2-popup.aio-standard-modal { background-color: var(--bg-body) !important; /* Solid Light Grey */ border-radius: 20px !important; /* Force 20px rounded corners */ box-shadow: var(--shadow-lg) !important; border: none !important; padding: 2rem 1rem !important; } /* 2. Global Brand Font Inheritance */ .swal2-title, .swal2-html-container, .swal2-confirm, .swal2-cancel { font-family: var(--font-primary, 'Sirucanorm Bold', sans-serif) !important; } .swal2-title { color: var(--text-main) !important; font-size: 24px !important; font-weight: 700 !important; } /* 3. Dark Mode Support for Solid Modal */ html.dark-mode .swal2-popup.aio-standard-modal { background-color: #121416 !important; /* Matches app.blade dark-mode body */ color: #ffffff !important; } html.dark-mode .swal2-title, html.dark-mode .swal2-html-container { color: #ffffff !important; } /* 4. Branded Action Buttons */ .swal2-styled.swal2-confirm { background-color: var(--primary) !important; /* #147cbb */ border-radius: var(--radius-md) !important; font-weight: 600 !important; padding: 10px 24px !important; } .swal2-styled.swal2-cancel { background-color: var(--secondary) !important; /* #64748b */ border-radius: var(--radius-md) !important; color: white !important; } /* 5. Process Spinner Branding */ .swal2-loader { border-color: var(--primary) transparent var(--primary) transparent !important; } /* 6. Frosted Glass Backdrop (Applied to Background Only) */ .swal2-backdrop-show { backdrop-filter: blur(10px) saturate(180%) !important; /* Frost Effect */ -webkit-backdrop-filter: blur(10px) saturate(180%) !important; background: rgba(255, 255, 255, 0.2) !important; } /* Dark Mode Frost Adjustment */ html.dark-mode .swal2-backdrop-show { background: rgba(0, 0, 0, 0.5) !important; } /* ========================================================================== SWEETALERT2 MOBILE FIX (Robust Centering) ========================================================================== */ @media (max-width: 550px) { .swal2-popup.aio-standard-modal { width: 92% !important; margin: 0 auto !important; top: 50% !important; transform: translateY(-50%) !important; position: fixed !important; } } /* ========================================================================== 5. FORMS & INPUTS ========================================================================== */ /* Global Input Styling */ .form-control, .input-group-addon, .input-group-btn .btn, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple, .select2-dropdown, .btn:not(.btn-file):not(.btn-link), .button, .dt-button { border-radius: var(--radius-md) !important; background-color: #ffffff !important; color: var(--text-main) !important; border: 1px solid var(--border-color) !important; font-size: 14px; box-shadow: var(--shadow-sm); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } /* Height Enforcement — single source of truth: var(--input-height) */ .input-group-addon, .input-group-btn .btn, .form-control:not(.file-caption), .select2-container .select2-selection--single, .select2-container .select2-selection--multiple, .select2-selection, .select2-selection--single, .select2-selection--multiple { height: var(--input-height) !important; min-height: var(--input-height) !important; line-height: 1.5 !important; } textarea.form-control { display: block !important; height: auto !important; min-height: 80px !important; } textarea.form-control[style*="display: none"] { display: none !important; } /* Focus States */ .form-control:focus, .select2-container--default.select2-container--open .select2-selection--single, .select2-container--default.select2-container--focus .select2-selection--multiple, .input-group-btn .btn:focus, input[type="file"]:focus, .upload-element:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(20, 124, 187, 0.15) !important; outline: none !important; z-index: 10; } /* Validation States */ .has-error .form-control, .has-error .select2-selection, .has-error .select2-selection--single, .has-error .select2-selection--multiple, .form-control.is-invalid, .is-invalid .form-control { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important; } .has-error .help-block, .has-error .control-label, .invalid-feedback { color: #dc2626 !important; font-size: 12px !important; display: block; } .has-success .form-control, .form-control.is-valid, .is-valid .form-control { border-color: #16a34a !important; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12) !important; } /* Inline Buttons — match input height in form, filter, and DataTables header contexts */ .form-inline .btn:not(.btn-lg):not(.btn-xs), .datatable-header-flex .btn:not(.btn-lg):not(.btn-xs), .filter-box .btn:not(.btn-lg):not(.btn-xs) { height: var(--input-height) !important; min-height: var(--input-height) !important; display: inline-flex !important; align-items: center !important; line-height: 1 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Input Groups (Squared Joints Logic) */ .input-group { display: table !important; width: 100% !important; border-collapse: separate; } .input-group-addon, .input-group-btn, .input-group .form-control { display: table-cell !important; vertical-align: middle; } .input-group .select2-container { display: table-cell !important; width: 100% !important; float: none !important; vertical-align: middle; } .input-group-btn { width: 1% !important; white-space: nowrap; } /* Input Addons */ .input-group-addon { box-shadow: none !important; background-color: var(--input-addon-bg, #f8fafc) !important; font-weight: 700 !important; color: #555; min-width: 40px; text-align: center; } .input-group-addon:not(:first-child) { border-left: 0 !important; } .input-group .form-control:not(:first-child) { margin-left: -1px; z-index: 2; } /* Squared Corners for Groups */ /* Left Elements */ .input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child > .btn, .input-group .select2-container:first-child .select2-selection--single, .input-group .select2-container:first-child .select2-selection--multiple { border-top-left-radius: var(--radius-md) !important; border-bottom-left-radius: var(--radius-md) !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* Right Elements */ .input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child > .btn, .input-group .select2-container:last-child .select2-selection--single, .input-group .select2-container:last-child .select2-selection--multiple { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-top-right-radius: var(--radius-md) !important; border-bottom-right-radius: var(--radius-md) !important; } /* Middle Elements */ .input-group .form-control:not(:first-child):not(:last-child), .input-group-addon:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child) > .btn, .input-group .select2-container:not(:first-child):not(:last-child) .select2-selection { border-radius: 0 !important; } /* Select2 after Addon Fix */ .input-group-addon + .select2-container--default .select2-selection--single, .input-group-addon + .select2-container--default .select2-selection--multiple, .input-group-addon + .select2-container .select2-selection { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-left: 0 !important; } /* Select2 Customization */ .select2-container--open { z-index: 9999999 !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-main) !important; line-height: var(--input-height) !important; text-align: left !important; padding-left: 12px !important; padding-right: 20px !important; display: block !important; margin-top: -1px !important; } .select2-container--default .select2-selection--single { display: flex !important; align-items: center !important; padding: 0 !important; } .select2-container--default .select2-selection--single .select2-selection__arrow, .select2-container--classic .select2-selection--single .select2-selection__arrow { height: var(--input-height) !important; top: 0 !important; display: none !important; } /* Custom Arrow for Selects */ select.form-control, .select2-container--default .select2-selection--single { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 30px !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Multi-Select Tags */ .select2-container--default .select2-selection--multiple { max-height: var(--input-height) !important; overflow-y: auto !important; justify-content: flex-start !important; padding: 0 4px !important; } .select2-container--default .select2-selection--multiple .select2-selection__rendered { min-height: var(--input-height) !important; padding: 2px 6px !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 4px !important; box-sizing: border-box !important; } .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #e0f2fe !important; border: 1px solid #bae6fd !important; color: var(--primary-dark) !important; border-radius: 4px !important; margin-top: 5px !important; margin-right: 4px !important; padding: 0 6px !important; font-size: 13px; line-height: 22px !important; } .select2-container--default .select2-selection--multiple .select2-search__field { margin-top: 6px !important; height: 24px !important; line-height: 24px !important; } /* Select2 Dropdown Highlighting (Brand Consistency) */ .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--primary) !important; color: #ffffff !important; } .select2-container--default .select2-results__option--highlighted[aria-selected] * { color: #ffffff !important; } .select2-container--default .select2-results__option--highlighted[aria-selected] div[style*="background"] { background-color: rgba(255,255,255,0.2) !important; } /* File Inputs */ .file-input { width: 100%; position: relative; display: table; } .file-input .file-caption { height: var(--input-height) !important; min-height: 38px !important; margin-bottom: 0 !important; } .file-input .btn-file { height: var(--input-height) !important; min-height: 38px !important; line-height: 24px !important; padding: 6px !important; background-color: #eee !important; border: 1px solid #d1d5db !important; color: #333 !important; margin-bottom: 0 !important; } .file-caption-name { padding-left: 12px !important; line-height: 1.5 !important; text-align: left !important; color: #555 !important; } /* Native File Input Styling */ input[type="file"], .upload-element { width: 100% !important; height: var(--input-height) !important; min-height: var(--input-height) !important; border-radius: var(--radius-md) !important; background-color: var(--bg-white) !important; color: var(--text-main) !important; border: 1px solid var(--border-color) !important; box-shadow: var(--shadow-sm) !important; padding: 6px 10px !important; overflow: hidden; } input[type="file"]::file-selector-button, .upload-element::file-selector-button, input[type="file"]::-webkit-file-upload-button, .upload-element::-webkit-file-upload-button { height: calc(var(--input-height) - 2px) !important; margin: -6px 10px -6px -10px; padding: 0 12px !important; border: 0 !important; border-right: 1px solid var(--border-color) !important; background: #eee !important; color: #333 !important; cursor: pointer; transition: background-color 0.15s ease-in-out; } input[type="file"]:hover::file-selector-button, .upload-element:hover::file-selector-button { background-color: #e5e7eb !important; } /* Input Group Height Sync */ .input-group > .select2-container, .input-group > .select2-container--default, .input-group > .select2-container--classic { height: var(--input-height) !important; min-height: var(--input-height) !important; } .input-group > .select2-container .select2-selection--single, .input-group > .select2-container .select2-selection--multiple, .input-group > .input-group-btn > .btn, .input-group > .input-group-btn > .form-control, .input-group > .input-group-btn > .select2-container .select2-selection--single, .input-group > .input-group-btn > .select2-container .select2-selection--multiple { height: 100% !important; min-height: var(--input-height) !important; } .input-group > .input-group-btn > .form-control, .input-group > .input-group-btn > .select2-container .select2-selection--single, .input-group > .input-group-btn > .select2-container .select2-selection--multiple { border-left: 0 !important; } .input-group > .select2-container .select2-selection--single .select2-selection__rendered { margin-top: 0 !important; } /* Stretch multi-line and upload groups so addons/buttons match field height */ .input-group:has(textarea.form-control), .input-group:has(.file-input), .input-group:has(input[type="file"]) { display: flex !important; align-items: stretch !important; } .input-group:has(textarea.form-control) > .input-group-addon, .input-group:has(.file-input) > .input-group-addon, .input-group:has(input[type="file"]) > .input-group-addon, .input-group:has(textarea.form-control) > .input-group-btn, .input-group:has(.file-input) > .input-group-btn, .input-group:has(input[type="file"]) > .input-group-btn { display: flex !important; align-items: stretch !important; } .input-group:has(textarea.form-control) > .input-group-addon, .input-group:has(.file-input) > .input-group-addon, .input-group:has(input[type="file"]) > .input-group-addon { height: auto !important; min-height: 100% !important; padding-top: 0 !important; padding-bottom: 0 !important; justify-content: center !important; align-items: center !important; } .input-group:has(textarea.form-control) > textarea.form-control, .input-group:has(.file-input) > .file-input, .input-group:has(input[type="file"]) > input[type="file"] { flex: 1 1 auto !important; width: 1% !important; } /* File input caption/button alignment */ .file-input { display: flex !important; align-items: stretch !important; } .file-input .file-caption, .file-input .btn-file { display: flex !important; align-items: center !important; } .file-input .btn-file { justify-content: center !important; } /* Checkboxes & Radios (Square Blue Style) */ .input-icheck[type="checkbox"], .input-icheck[type="radio"] { display: none !important; } .icheckbox_square-blue, .iradio_square-blue { background: #ffffff !important; border: 1px solid #d1d5db !important; border-radius: 4px !important; width: 18px !important; height: 18px !important; display: inline-block !important; vertical-align: middle; margin-right: 8px !important; position: relative; transition: all 0.2s ease; cursor: pointer; } .iradio_square-blue { border-radius: 50% !important; } .icheckbox_square-blue.checked { border-color: var(--primary) !important; background-color: var(--primary) !important; } .icheckbox_square-blue.checked::after { content: '\2713'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #ffffff; font-size: 12px; font-weight: bold; } .iradio_square-blue.checked { border-color: var(--primary) !important; } .iradio_square-blue.checked::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; background: var(--primary); border-radius: 50%; } .icheckbox_square-blue .iCheck-helper, .iradio_square-blue .iCheck-helper { position: absolute !important; top: -20% !important; left: -20% !important; width: 140% !important; height: 140% !important; display: block !important; opacity: 0 !important; cursor: pointer !important; z-index: 5; margin: 0 !important; padding: 0 !important; border: 0 !important; } .checkbox label, .radio label { cursor: pointer !important; display: flex !important; align-items: center !important; width: 100% !important; padding: 8px 4px !important; } /* Password Toggle */ .form-group .tw-relative input#password.form-control { padding-right: 2.5rem !important; } .form-group .tw-relative button#togglePassword { position: absolute !important; top: 50% !important; right: 0 !important; transform: translateY(-50%) !important; border: none !important; background: transparent !important; padding: 0 0.75rem !important; height: 100%; z-index: 5; } /* ========================================================================== 6. TABLES & DATATABLES ========================================================================== */ /* Wrapper & Layout */ .dataTables_wrapper { border-radius: 6px !important; /* UPDATED: Reduced Radius */ background: #fff; padding: 15px; box-shadow: var(--shadow-sm); margin-top: 10px; overflow: visible !important; width: 100% !important; } /* Table Layout: Separate borders for rounding, transparent background */ table, .table, .dataTable { width: 100% !important; max-width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; background-color: transparent !important; border: none !important; margin-bottom: 0 !important; /* CRITICAL: Ensures no margin pushes footer down */ } .table-responsive { width: 100%; border: none !important; } /* Background Fix: Remove backgrounds from parents to prevent "boxed" corners */ .table thead, .table tfoot, .table tr, .dataTables_scrollHead, .dataTables_scrollFoot { background-color: transparent !important; border: none !important; } /* Headers & Cells */ .table thead th, .table th, th, .table tfoot th, .table tfoot td, .dataTables_wrapper tfoot th, .dataTables_wrapper tfoot td { font-weight: bold !important; font-family: var(--font-primary) !important; color: #1f2937 !important; text-transform: none !important; font-size: 13px; background-color: #e0e2e5 !important; border-color: #d1d5db !important; border-bottom: 2px solid #a3a3a3 !important; padding: 12px 10px !important; background-clip: padding-box !important; } /* --- ROUNDED CORNERS (UPDATED TO 6px) --- */ /* Top Left & Right (Header) */ .table thead tr:first-child th:first-child { border-top-left-radius: 6px !important; border-left: 1px solid #d1d5db !important; } .table thead tr:first-child th:last-child { border-top-right-radius: 6px !important; border-right: 1px solid #d1d5db !important; } /* Bottom Left & Right (Footer) */ .table tfoot tr:last-child th:first-child, .table tfoot tr:last-child td:first-child { border-bottom-left-radius: 6px !important; border-left: 1px solid #d1d5db !important; } .table tfoot tr:last-child th:last-child, .table tfoot tr:last-child td:last-child { border-bottom-right-radius: 6px !important; border-right: 1px solid #d1d5db !important; } /* Standard Borders */ .table tfoot th, .table tfoot td { border-top: 2px solid #a3a3a3 !important; border-bottom: none !important; } .table tbody td { padding: 12px 10px !important; vertical-align: middle; border-color: #f3f4f6 !important; font-size: 14px; } /* Interactive Rows */ table.dataTable tbody tr { cursor: pointer; } table.dataTable tbody>tr.selected, table.dataTable tbody tr:hover { background-color: #e0f2fe !important; } /* --- DataTables Controls --- */ .datatable-header-flex { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 15px; padding-bottom: 15px; width: 100% !important; } @media (min-width: 768px) { .datatable-header-flex { flex-direction: row !important; justify-content: space-between !important; flex-wrap: nowrap !important; } .dt-buttons { flex: 1 !important; display: flex !important; justify-content: center !important; } div.dataTables_wrapper .dataTables_filter { flex: 0 0 auto !important; text-align: right !important; display: flex !important; justify-content: flex-end !important; } div.dataTables_wrapper .dataTables_length { flex: 0 0 auto !important; } } .dt-buttons { display: flex !important; justify-content: center !important; flex-wrap: wrap !important; gap: 5px; } div.dataTables_wrapper .dataTables_length label, div.dataTables_wrapper .dataTables_filter label { display: inline-flex !important; align-items: center !important; margin: 0 !important; font-weight: normal !important; white-space: nowrap !important; gap: 8px; } div.dataTables_wrapper .dataTables_length select, div.dataTables_wrapper .dataTables_filter input[type="search"] { height: var(--input-height) !important; min-height: var(--input-height) !important; line-height: 1.5 !important; padding: 0 10px !important; font-size: 13px !important; border-radius: var(--radius-sm) !important; border: 1px solid #d1d5db !important; background-color: #fff !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--primary) !important; color: white !important; border: none !important; border-radius: 4px; box-shadow: var(--shadow-sm); } table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc { background-color: #e5e7eb !important; color: var(--primary) !important; background-position: right 10px center !important; } /* --- SCROLL GAP FIX (UPDATED) --- */ .dataTables_scrollBody { border-bottom: none !important; margin-bottom: 0 !important; /* Removes gap from container */ padding-bottom: 0 !important; } .dataTables_scrollBody table { margin-bottom: 0 !important; /* Removes gap from table element itself */ } .dataTables_scrollFoot { background-color: transparent !important; margin-top: 0 !important; /* Ensures footer sits tight against body */ border-top: none !important; } .dataTables_scrollFootInner, .dataTables_scrollFootInner table { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Processing Spinner */ .dataTables_wrapper .dataTables_processing { background: transparent !important; border: none !important; box-shadow: none !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 100%; max-width: 200px; z-index: 200 !important; } .table-spinner { width: 40px; height: 40px; border: 4px solid rgba(20, 124, 187, 0.1); border-left-color: var(--primary); border-radius: 50%; animation: table-spin 0.8s linear infinite; margin: 0 auto; } @keyframes table-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Scrollable Tables: Flatten connections */ .dataTables_scrollHead .table-bordered { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; border-bottom: none !important; } .dataTables_scrollBody .table-bordered { border-radius: 0 !important; border-top: none !important; border-bottom: none !important; } .dataTables_scrollFoot .table-bordered { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-top: none !important; } .dataTables_scrollBody thead { visibility: collapse !important; height: 0 !important; overflow: hidden !important; } /* Modal Tables */ .modal-xl .table:not(.no-border), .view_modal .table:not(.no-border) { border-radius: 6px !important; border-collapse: separate !important; border-spacing: 0 !important; overflow: hidden !important; border: 1px solid #d1d5db !important; } .modal-xl .table:not(.no-border) > thead > tr > th, .modal-xl .table:not(.no-border) > tbody > tr > td { border-top: 1px solid #d1d5db !important; border-bottom: none !important; border-left: none !important; border-right: none !important; } .modal-xl .table:not(.no-border) > tbody > tr > th + td, .view_modal .table:not(.no-border) > tbody > tr > th + td { text-align: center !important; vertical-align: middle !important; } /* ========================================================================== 7. MODULES: POS & PRODUCTS ========================================================================== */ /* POS dropdown fix — vendor.css sets overflow-x:hidden on .box-body which clips Select2 and datepicker dropdowns. Override for the POS form container only. */ #add_pos_sell_form .box-body, section.content .tw-rounded-2xl .box-body { overflow: visible !important; } /* Nav-tabs-custom inside POS must not clip dropdowns */ #add_pos_sell_form .nav-tabs-custom, #add_pos_sell_form .tab-content { overflow: visible !important; } /* Ensure Select2 dropdowns sit above the product grid column */ #add_pos_sell_form .select2-container--open, #add_pos_sell_form .select2-dropdown { z-index: 9999999 !important; } .pos-form-row { margin-left: -5px !important; margin-right: -5px !important; } .pos-form-row > [class*='col-'] { padding-left: 5px !important; padding-right: 5px !important; } /* Layout Grid */ .pos_product_div { overflow-y: scroll !important; overflow-x: auto !important; height: calc(100vh - 400px) !important; background-color: #f1f5f9; min-height: 300px; border-radius: var(--radius-md); padding: 5px; flex-grow: 1; } .pos_product_div table tbody tr, #pos_table tbody tr { background-color: var(--bg-white) !important; } #product_list_body { height: calc(100vh - 220px) !important; overflow-y: scroll; overflow-x: hidden; padding-bottom: 120px; padding-right: 5px; flex-grow: 1; } /* Product Cards */ .product_box { width: 100%; margin-bottom: 10px; text-align: center; cursor: pointer; font-weight: 600; background-color: #fff; padding: 10px; border: 1px solid transparent !important; overflow: hidden; } .product_box:hover { border-color: var(--primary) !important; transform: translateY(-4px); box-shadow: var(--shadow-md); } .product_box .image-container { height: 50px; margin: auto; width: 100%; margin-bottom: 4px; } .product_box .image-container img { height: 100%; width: 100%; border-radius: 8px; object-fit: cover; } .product_box .text { width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; max-height: 14px; font-size: 13px; margin-top: 8px; } .discount-badge { position: absolute; top: 6px; right: 10px; font-size: 18px; padding: 7px; } /* POS Footer & Totals */ .pos-form-actions { width: 100%; padding: 12px; position: fixed; bottom: 0; z-index: 300; display: flex; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-top: 1px solid rgba(0,0,0,0.05); box-shadow: 0 -4px 20px rgba(0,0,0,0.05); } .pos-express-btn { font-size: 23px !important; height: 73px !important; white-space: normal; font-weight: 700; } .pos-total span.number { font-size: 26px; font-weight: bolder; } .col-fit-content { width: 1% !important; white-space: nowrap !important; padding-right: 15px !important; } .pos-qty-wrapper { display: flex; flex-direction: column; width: 100%; min-width: 110px; } .pos-qty-wrapper .select2-container { width: 100% !important; min-width: 100% !important; } /* Product Search (jQuery UI Autocomplete) */ .ui-autocomplete .ui-menu-item-wrapper.ui-state-active, .ui-autocomplete .ui-menu-item-wrapper.ui-state-focus { background: var(--primary) !important; color: #ffffff !important; border-color: var(--primary) !important; } .ui-autocomplete .ui-menu-item-wrapper.ui-state-active *, .ui-autocomplete .ui-state-focus * { color: #ffffff !important; } .ui-autocomplete .ui-state-active div[style*="background"] { background-color: rgba(255,255,255,0.2) !important; } /* ========================================================================== 8. PLUGINS & WIDGETS ========================================================================== */ /* ── Tooltip trigger icons: always inline beside their label, never on own line ── */ label [data-toggle="tooltip"], .control-label [data-toggle="tooltip"], .form-group > label [data-toggle="tooltip"], th [data-toggle="tooltip"], td [data-toggle="tooltip"] { display: inline !important; vertical-align: middle; margin-left: 4px; cursor: help; font-size: 0.85em; opacity: 0.6; position: static !important; } label [data-toggle="tooltip"]:hover, .control-label [data-toggle="tooltip"]:hover { opacity: 1; } /* Prevent tooltip icon from wrapping to a new line */ label, .control-label { white-space: normal; } label [data-toggle="tooltip"] i, .control-label [data-toggle="tooltip"] i { vertical-align: middle; line-height: inherit; } /* ========================================================================== 9. PAGE LOADER (GLASS EFFECT - CLEAN) ========================================================================== */ #page-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; /* GLASS BACKGROUND */ /* Semi-transparent white to show colors behind */ background-color: rgba(255, 255, 255, 0.5) !important; /* Strong Blur for the "Frosted Glass" look */ backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; z-index: 99999; display: flex; justify-content: center; align-items: center; transition: opacity 0.4s ease; } .loader-content { /* REMOVED: Background box, shadows, and borders */ background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; /* LAYOUT: Keep items stacked and centered */ display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .loader-spinner { border: 3px solid rgba(20, 124, 187, 0.2); border-left-color: var(--primary); border-radius: 50%; width: 50px; height: 50px; animation: spin-animation 1s linear infinite; margin-bottom: 20px; } @keyframes spin-animation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } body:not([unresolved]) #page-loader { opacity: 0; pointer-events: none; } /* ========================================================================== MODERN DATEPICKER & DATERANGEPICKER (LIGHT MODE) ========================================================================== */ .datepicker { z-index: 10000 !important; } /* Universal Dropdown Styling */ .daterangepicker, .datepicker.dropdown-menu { border: 1px solid var(--border-color) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-lg) !important; font-family: var(--font-primary) !important; padding: 12px !important; background-color: #ffffff !important; z-index: 10000 !important; /* Always on top */ } /* Select Inputs (Month/Year dropdowns) */ .daterangepicker select.monthselect, .daterangepicker select.yearselect { background-color: transparent !important; border: 1px solid transparent !important; box-shadow: none !important; color: var(--text-main) !important; font-weight: bold !important; cursor: pointer !important; height: auto !important; padding: 4px 8px !important; border-radius: var(--radius-sm) !important; outline: none !important; transition: all var(--transition-fast); } .daterangepicker select.monthselect:hover, .daterangepicker select.yearselect:hover { background-color: rgba(0, 0, 0, 0.05) !important; border-color: var(--border-color) !important; } .daterangepicker select.monthselect:focus, .daterangepicker select.yearselect:focus { outline: none !important; border-color: var(--primary) !important; } /* Daterangepicker Sidebar (Ranges) */ .daterangepicker .ranges li { border-radius: var(--radius-sm) !important; padding: 8px 14px !important; margin-bottom: 4px !important; font-weight: 600 !important; color: var(--text-main); transition: all var(--transition-fast); background-color: transparent !important; border: none !important; } .daterangepicker .ranges li:hover { background-color: var(--primary-light) !important; color: var(--primary-dark) !important; } .daterangepicker .ranges li.active { background-color: var(--primary) !important; color: #ffffff !important; box-shadow: var(--shadow-sm); } /* Calendar Tables & Cells */ .daterangepicker .calendar-table { border: none !important; background-color: #ffffff !important; } .daterangepicker td.active, .daterangepicker td.active:hover, .datepicker table tr td.active, .datepicker table tr td.active:hover { background-color: var(--primary) !important; border-color: var(--primary) !important; color: #ffffff !important; border-radius: var(--radius-sm) !important; box-shadow: var(--shadow-sm); } .daterangepicker td.in-range { background-color: var(--primary-light) !important; color: var(--primary-dark) !important; border-radius: 0 !important; } /* Today's Highlight */ .daterangepicker td.today, .datepicker table tr td.today { background-color: var(--warning) !important; color: #ffffff !important; border-radius: var(--radius-sm) !important; } .daterangepicker td.available:hover, .daterangepicker th.available:hover, .datepicker table tr td.day:hover, .datepicker table tr th.next:hover, .datepicker table tr th.prev:hover { background-color: var(--bg-body) !important; border-radius: var(--radius-sm) !important; } /* Modernized Buttons */ .daterangepicker .applyBtn { background-color: var(--primary) !important; border-color: var(--primary) !important; color: #ffffff !important; border-radius: var(--radius-md) !important; padding: 6px 18px !important; font-weight: 600; box-shadow: var(--shadow-sm); } .daterangepicker .cancelBtn { background-color: #f3f4f6 !important; border-color: #d1d5db !important; color: var(--text-main) !important; border-radius: var(--radius-md) !important; padding: 6px 18px !important; font-weight: 600; } .daterangepicker .cancelBtn:hover { background-color: #e5e7eb !important; } /* ========================================================================== GLOBAL STICKY FILTER BOX ========================================================================== */ .aio-global-sticky-filter { position: sticky !important; top: 50px !important; /* Adjust if your header navbar is taller/shorter */ z-index: 95 !important; /* Below the pickers, above the table */ box-shadow: var(--shadow-md) !important; border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important; background-color: #ffffff !important; /* Solid bg prevents table bleeding through */ padding: 15px !important; margin-bottom: 20px !important; border-bottom: 1px solid var(--border-color); } /* Prevent Select2 dropdowns from getting trapped inside the sticky box */ .aio-global-sticky-filter .select2-container { z-index: 96 !important; } /* Intl Tel Input */ .iti { display: flex !important; width: 100%; } .iti__flag-container { border: 1px solid var(--border-color); border-right: none; border-radius: var(--radius-md) 0 0 var(--radius-md) !important; background-color: #eee; } .iti__tel-input.form-control { border-radius: 0 var(--radius-md) var(--radius-md) 0 !important; margin-left: -1px; } .iti.iti-focused .iti__tel-input.form-control { border-color: var(--primary); z-index: 3; } /* Pattern Lock */ .patt-circ.hovered { background-color: #e0f2fe; border: none; } .patt-circ.dir { background-image: url("/img/pattern-directionicon-arrow.png"); } /* ========================================================================== 9. PRINT STYLES ========================================================================== */ .print_section { display: none; } @media print { .print_section { display: inline !important; } .modal-xl { width: 100% !important; } ::-webkit-scrollbar, #toast-container, a:after { display: none !important; } .box, .table, .product_box { box-shadow: none !important; border: 1px solid #ddd !important; } } /* ========================================================================== 10. RESPONSIVE DESIGN (MEDIA QUERIES) ========================================================================== */ /* Desktops */ @media (min-width: 768px) { .datatable-header-flex { flex-wrap: nowrap; } .datatable-controls-left { flex: 1; display: flex; justify-content: flex-start; } .datatable-controls-center { flex: 0 1 auto; display: flex; justify-content: center; } .datatable-controls-right { flex: 1; display: flex; justify-content: flex-end; } .pulse-logo { width: 200px; } /* Touch devices on desktop (iPad Pro etc) */ @media (pointer: coarse) { .side-bar { display: none !important; } .side-bar.small-view-side-active { display: flex !important; } } } @media (min-width: 992px) { .small-view-button { display: none !important; } } @media (min-width: 1200px) { .pulse-logo { width: 250px; } } /* Tablets & Mobile */ @media (max-width: 991px) { .pos-form-row > .col-md-4, .pos-form-row > .col-md-8 { flex: 1 1 100%; margin-bottom: 10px; } } /* Mobile Only (Merged) */ @media (max-width: 768px) { .content-wrapper { padding-top: 10px; } .modal-xl { width: 95%; } /* POS Mobile */ .pos-express-btn { font-size: 16px !important; height: 60px !important; padding: 5px !important; } .pos-qty-wrapper { min-width: 90px; } .pos-form-row { display: flex; flex-direction: column-reverse; } .pos_product_div { height: auto !important; max-height: 40vh !important; min-height: 200px !important; overflow-y: auto !important; } #product_list_body { height: auto !important; max-height: 45vh !important; } .pos-tab-container .pos-tab-menu .list-group { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; } .pos-tab-container .pos-tab-menu .list-group a .tab-txt { display: none; } /* Responsive Grid fixes */ .eq-height-row { flex-direction: column; } .eq-height-row > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } .eq-height-row .input-group, .eq-height-row .form-control, .eq-height-row .select2-container, .select2-container { width: 100% !important; max-width: 100% !important; } /* Header/DataTables Mobile */ .main-header .navbar-custom-menu { float: none !important; display: block !important; } .datatable-header-flex { flex-direction: column; align-items: center; } div.dataTables_wrapper div.dataTables_filter { width: 100%; justify-content: center !important; margin-top: 10px; } div.dataTables_wrapper div.dataTables_filter input[type="search"] { width: 100% !important; max-width: 300px; margin-left: 0 !important; } .filter-box { position: sticky; top: 0; z-index: 100; background: #fff; padding: 10px; box-shadow: var(--shadow-sm); } /* ========================================================================== POS TABLE MOBILE & TABLET FIXES ========================================================================== */ .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; /* Enables momentum scrolling on iOS */ width: 100%; border: none !important; padding-bottom: 10px; /* Space for the scrollbar */ } #pos_table { /* Force the table to maintain a minimum readable width, triggering the horizontal scroll */ min-width: 850px !important; } /* Prevent text in data cells from wrapping and increasing row height awkwardly */ #pos_table tbody td { white-space: nowrap !important; } /* Exception: The Product Name column should still wrap so long names are readable */ #pos_table tbody td:first-child, #pos_table th.col-product { white-space: normal !important; min-width: 200px !important; } /* Ensure inputs remain touch-friendly and don't collapse */ #pos_table tbody td input.form-control { min-width: 90px !important; height: 38px !important; } } /* ========================================================================== SELECT2: TRANSPARENCY FIX + ROUNDED CORNERS ========================================================================== */ /* 1. Main Dropdown Container: Solid White + Bottom Radius */ .select2-dropdown { background-color: #ffffff !important; border: 1px solid #d1d5db !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; z-index: 999999 !important; /* ADDED: Bottom Rounded Corners */ border-bottom-left-radius: 8px !important; border-bottom-right-radius: 8px !important; /* ADDED: Clips the content so the white background doesn't poke out */ overflow: hidden !important; } /* 2. Fix Search Box Transparency */ .select2-search--dropdown { background-color: #ffffff !important; padding: 8px !important; border-bottom: 1px solid #f3f4f6; } /* 3. Fix Search Input Field */ .select2-search--dropdown .select2-search__field { background-color: #ffffff !important; border: 1px solid #d1d5db !important; border-radius: 6px !important; /* Slightly smaller radius for the inner input */ box-shadow: none !important; color: #333 !important; } /* 4. Fix Results Container Transparency */ .select2-results { background-color: #ffffff !important; } /* 5. Fix Option Transparency & Colors */ .select2-results__option { background-color: #ffffff !important; color: #333 !important; } /* Hover/Selected State - Brand Blue */ .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #147cbb !important; color: #ffffff !important; } /* ========================================================================== GLASS BACKGROUND EFFECT (MODALS & SWEETALERT) ========================================================================== */ /* 1. Bootstrap Modal Backdrop (The dark overlay) */ .modal-backdrop, .modal-backdrop.in, .modal-backdrop.show { /* Make the background semi-transparent black (Smoked Glass) */ background-color: rgba(0, 0, 0, 0.4) !important; /* Reset default opacity so our rgba handles the transparency */ opacity: 1 !important; /* The Glass Effect: Blurs content BEHIND the overlay */ backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; /* Safari support */ } /* 2. SweetAlert Overlay */ .swal-overlay { /* Semi-transparent black */ background-color: rgba(0, 0, 0, 0.4) !important; /* The Glass Effect */ backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } /* Optional: Add a subtle shine/border to the modals themselves to enhance the glass look */ .modal-content, .swal-modal { border: 1px solid rgba(255, 255, 255, 0.2) !important; /* Subtle white border */ box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important; /* Deep soft shadow */ } /* ========================================================================== SELECT2 HORIZONTAL SCROLL FIX (Mobile & Desktop) ========================================================================== */ /* 1. Allow the list container to scroll horizontally */ .select2-results__options { overflow-x: auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } /* 2. Force the row (LI) to expand to fit the inner content width This ensures the Blue Highlight covers the whole 350px width. */ .select2-results__option { width: max-content !important; /* Grow to fit the inner div */ min-width: 100% !important; /* Never be smaller than the dropdown */ box-sizing: border-box !important; } /* ========================================================================== BALANCE COLOR FIX FOR DROPDOWNS ========================================================================== */ /* 1. Define Standard Colors */ .balance-debit { color: #d9534f !important; font-weight: bold; } .balance-credit { color: #28a745 !important; font-weight: bold; } /* 2. When the row is HIGHLIGHTED (Blue Background): Add a white background pill so the Red/Green text remains readable */ .select2-results__option--highlighted .balance-debit, .select2-results__option--highlighted .balance-credit { background-color: white !important; padding: 1px 6px !important; border-radius: 4px !important; box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important; /* Ensure the text color stays Red/Green and doesn't turn white */ -webkit-text-fill-color: initial !important; } /* Prevent flicker during theme switch */ .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; animation: none !important; } /* Premium pricing card (uses your brand vars) */ .price_card.aio-price-card { position: relative; border-radius: var(--radius-lg); background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-fast); will-change: transform; } /* Top “premium” accent */ .price_card.aio-price-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 999px 999px; background: linear-gradient(90deg, var(--primary), var(--primary-dark)); opacity: 0.95; } /* Hover (force it with CSS so it can’t be blocked by utility ordering) */ .price_card.aio-price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); border-color: rgba(20, 124, 187, 0.25); /* matches your brand blue vibe */ } /* Soft glow on hover */ .price_card.aio-price-card:hover::after { content: ""; position: absolute; inset: -10px; border-radius: calc(var(--radius-lg) + 10px); background: radial-gradient(circle at 30% 20%, rgba(20, 124, 187, 0.18), transparent 55%); pointer-events: none; } /* Popular badge polish */ .price_card .aio-popular-pill { background: linear-gradient(135deg, var(--warning), var(--highlight)); box-shadow: var(--shadow-md); } /* Price styling */ .price_card .aio-price { letter-spacing: -0.02em; } /* Button polish (keeps your gradient, adds premium hover lift) */ .price_card .aio-cta { transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast); } .price_card .aio-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); filter: saturate(1.05); } @media (max-width: 420px) { .input-group { flex-wrap: wrap !important; } .input-group-addon, .input-group-btn { flex: 1 0 100% !important; border-radius: var(--radius-md) !important; margin-bottom: 6px !important; } .input-group .form-control, .input-group .select2-container { flex: 1 0 100% !important; border-radius: var(--radius-md) !important; border-left: 1px solid var(--border-color) !important; } } /* ========================================================================== GLOBAL STATUS LABEL COLORS (Colors only, preserves structure) ========================================================================== */ .label-success, .bg-green, .bg-success { background-color: var(--success) !important; color: #ffffff !important; border: none !important; } .label-danger, .bg-red { background-color: var(--danger) !important; color: #ffffff !important; border: none !important; } .label-warning, .bg-yellow, .bg-warning { background-color: var(--warning) !important; color: #ffffff !important; border: none !important; } .label-info, .bg-blue { background-color: var(--primary) !important; color: #ffffff !important; border: none !important; } .label-default, .bg-gray { background-color: var(--secondary) !important; color: #ffffff !important; border: none !important; } /* ========================================================================== POS TABLE SPECIFIC COLUMN WIDTHS ========================================================================== */ #pos_table { table-layout: auto; /* Allows browser to adapt widths smoothly */ width: 100% !important; } /* Base Columns */ #pos_table th.col-product { min-width: 240px; width: 35%; text-align: left; } #pos_table th.col-qty { min-width: 140px; width: 15%; } #pos_table th.col-price { min-width: 120px; width: 12%; } #pos_table th.col-total { min-width: 120px; width: 12%; } #pos_table th.col-action { min-width: 45px; width: 3%; text-align: center; } /* Dynamic Columns (Discount, Tax, Lot, Warranty) */ #pos_table th.discount_column { min-width: 110px; width: 10%; } #pos_table th.tax_column { min-width: 110px; width: 10%; } #pos_table th.lot_details_column { min-width: 130px; width: 12%; } #pos_table th.warranty_column { min-width: 110px; width: 10%; } /* Input sizing within the table to respect the min-widths */ #pos_table tbody td input.form-control { min-width: 80px; width: 100%; } .payment-close-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background-color: #fee2e2; color: #ef4444; border: none; outline: none; transition: all 0.2s ease-in-out; cursor: pointer; } .payment-close-btn:hover { background-color: #fecaca; color: #dc2626; transform: scale(1.05); } /* ========================================================================== AGEING REPORT — Semantic status colors (token-driven) ========================================================================== */ .text-ageing-current { color: var(--success, #22c55e) !important; } .text-ageing-1 { color: var(--warning, #fca424) !important; } .text-ageing-2 { color: var(--color-cta, #ff9048) !important; } .text-ageing-3 { color: var(--danger, #ef4444) !important; } .text-ageing-4 { color: #b91c1c !important; } /* === Source: css/components.css === */ /* ============================================================================= AIO ERP — Shared Component Primitives (components.css) ----------------------------------------------------------------------------- Reusable component classes built on top of design tokens. All values use CSS custom properties → fully theme-aware + dark-mode-aware. Import order: after tokens.css, before app-premium.css. ============================================================================= SECTIONS 1. Page Shell / Layout 2. Section Headers 3. Cards & Panels 4. KPI / Stat Widgets 5. Tables 6. Badges & Status Pills 7. Alerts 8. Buttons (extensions) 9. Form Primitives 10. Filters & Filter Bar 11. Tabs 12. Modals 13. Chart Containers 14. Loading / Skeleton States 15. Empty States 16. Error States 17. Responsive Utilities ============================================================================= */ /* ============================================================================= 1. PAGE SHELL / LAYOUT ============================================================================= */ .aio-page { padding: var(--space-5, 20px); } .aio-page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3, 12px); margin-bottom: var(--space-5, 20px); } .aio-page-title { font-size: var(--font-size-2xl, 1.5rem); font-weight: var(--font-weight-bold, 700); color: var(--text-main); line-height: var(--line-height-tight, 1.25); margin: 0; } .aio-page-subtitle { font-size: var(--font-size-sm, 0.875rem); color: var(--text-muted); margin-top: var(--space-1, 4px); } .aio-breadcrumb { display: flex; align-items: center; gap: var(--space-1, 4px); font-size: var(--font-size-sm, 0.875rem); color: var(--text-muted); } .aio-breadcrumb a { color: var(--primary); transition: color var(--transition-fast); } .aio-breadcrumb a:hover { color: var(--primary-dark); } /* ============================================================================= 2. SECTION HEADERS ============================================================================= */ .aio-section-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3, 12px); padding-bottom: var(--space-3, 12px); border-bottom: 1px solid var(--border-color); margin-bottom: var(--space-4, 16px); } .aio-section-title { font-size: var(--font-size-lg, 1.125rem); font-weight: var(--font-weight-semibold, 600); color: var(--text-main); margin: 0; } .aio-section-actions { display: flex; align-items: center; gap: var(--space-2, 8px); flex-wrap: wrap; } /* ============================================================================= 3. CARDS & PANELS ============================================================================= */ .aio-card { background: var(--card-bg, #ffffff); border: 1px solid var(--card-border, var(--border-color)); border-radius: var(--card-radius, var(--radius-lg, 16px)); box-shadow: var(--card-shadow, var(--shadow-md)); overflow: hidden; transition: box-shadow var(--transition-fast), border-color var(--transition-fast); } .aio-card:hover { box-shadow: var(--shadow-lg); } .aio-card-header { padding: var(--space-4, 16px) var(--card-padding, var(--space-6, 24px)); border-bottom: 1px solid var(--panel-header-border, var(--border-color)); background: var(--panel-header-bg, #f8fbff); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px); } .aio-card-title { font-size: var(--font-size-md, 1rem); font-weight: var(--font-weight-semibold, 600); color: var(--text-main); margin: 0; } .aio-card-body { padding: var(--card-padding, var(--space-6, 24px)); } .aio-card-footer { padding: var(--space-4, 16px) var(--card-padding, var(--space-6, 24px)); border-top: 1px solid var(--panel-header-border, var(--border-color)); background: var(--panel-header-bg, #f8fbff); } /* ============================================================================= 4. KPI / STAT WIDGETS ============================================================================= */ .aio-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4, 16px); } .aio-kpi-card { background: var(--card-bg, #ffffff); border: 1px solid var(--card-border, var(--border-color)); border-radius: var(--card-radius, var(--radius-lg, 16px)); box-shadow: var(--card-shadow, var(--shadow-md)); padding: var(--space-5, 20px); position: relative; overflow: hidden; transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .aio-kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .aio-kpi-icon { width: 44px; height: 44px; border-radius: var(--radius-md, 10px); background: var(--widget-icon-bg); display: flex; align-items: center; justify-content:center; color: #ffffff; font-size: 1.25rem; flex-shrink: 0; margin-bottom: var(--space-3, 12px); } .aio-kpi-value { font-size: var(--font-size-2xl, 1.5rem); font-weight: var(--font-weight-bold, 700); color: var(--text-main); line-height: var(--line-height-tight, 1.25); } .aio-kpi-label { font-size: var(--font-size-sm, 0.875rem); color: var(--text-muted); margin-top: var(--space-1, 4px); } .aio-kpi-trend { display: inline-flex; align-items: center; gap: var(--space-1, 4px); font-size: var(--font-size-xs, 0.75rem); font-weight: var(--font-weight-semibold, 600); margin-top: var(--space-2, 8px); } .aio-kpi-trend--up { color: var(--success); } .aio-kpi-trend--down { color: var(--danger); } /* ============================================================================= 5. TABLES ============================================================================= */ .aio-table-wrapper { border-radius: var(--radius-lg, 16px); border: 1px solid var(--border-color); overflow: hidden; background: var(--card-bg, #ffffff); box-shadow: var(--shadow-sm); } /* Horizontal scroll on small screens */ .aio-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .aio-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm, 0.875rem); } .aio-table thead tr { background: var(--panel-header-bg, #f8fbff); border-bottom: 2px solid var(--border-color); } .aio-table thead th { padding: var(--space-3, 12px) var(--space-4, 16px); font-weight: var(--font-weight-semibold, 600); color: var(--text-muted); text-align: left; white-space: nowrap; font-size: var(--font-size-xs, 0.75rem); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide, 0.025em); } .aio-table tbody td { padding: var(--space-3, 12px) var(--space-4, 16px); color: var(--text-main); border-bottom: 1px solid var(--border-color); vertical-align: middle; } .aio-table tbody tr:last-child td { border-bottom: none; } .aio-table tbody tr:hover { background: var(--surface-muted, #eef4ff); transition: background var(--transition-fast); } /* ============================================================================= 6. BADGES & STATUS PILLS ============================================================================= */ .aio-badge { display: inline-flex; align-items: center; gap: var(--space-1, 4px); padding: 3px 10px; border-radius: var(--radius-full, 9999px); font-size: var(--font-size-xs, 0.75rem); font-weight: var(--font-weight-semibold, 600); white-space: nowrap; line-height: 1.4; } .aio-badge--success { background: var(--badge-success-bg); color: var(--badge-success-text); } .aio-badge--danger { background: var(--badge-danger-bg); color: var(--badge-danger-text); } .aio-badge--warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); } .aio-badge--info { background: var(--badge-info-bg); color: var(--badge-info-text); } .aio-badge--neutral { background: var(--surface-muted, #eef4ff); color: var(--text-muted); } /* ============================================================================= 7. ALERTS ============================================================================= */ .aio-alert { display: flex; align-items: flex-start; gap: var(--space-3, 12px); padding: var(--space-4, 16px); border-radius: var(--radius-md, 10px); border-left: 4px solid transparent; font-size: var(--font-size-sm, 0.875rem); margin-bottom: var(--space-4, 16px); } .aio-alert--success { background: var(--badge-success-bg); color: var(--badge-success-text); border-color:var(--success); } .aio-alert--danger { background: var(--badge-danger-bg); color: var(--badge-danger-text); border-color:var(--danger); } .aio-alert--warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); border-color:var(--warning); } .aio-alert--info { background: var(--badge-info-bg); color: var(--badge-info-text); border-color:var(--primary); } .aio-alert-icon { flex-shrink: 0; font-size: 1rem; margin-top: 2px; } /* ============================================================================= 8. BUTTONS (extensions to aio-button-uniform.css) ============================================================================= */ .aio-btn-group { display: inline-flex; flex-wrap: wrap; gap: var(--space-2, 8px); } .aio-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--aio-btn-height, 40px); height: var(--aio-btn-height, 40px); padding: 0; border-radius: var(--aio-btn-radius, 12px); border: 1px solid var(--aio-btn-border); background: var(--aio-btn-bg-muted); color: var(--aio-btn-text-muted); box-shadow: var(--aio-btn-shadow); cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; } .aio-btn-icon:hover { transform: translateY(-1px); box-shadow: var(--aio-btn-shadow-hover); } /* ============================================================================= 9. FORM PRIMITIVES ============================================================================= */ .aio-form-group { margin-bottom: var(--space-4, 16px); } .aio-form-label { display: block; font-size: var(--font-size-sm, 0.875rem); font-weight: var(--font-weight-medium, 500); color: var(--text-main); margin-bottom: var(--space-2, 8px); } .aio-form-label.required::after { content: ' *'; color: var(--danger); } .aio-form-hint { font-size: var(--font-size-xs, 0.75rem); color: var(--text-muted); margin-top: var(--space-1, 4px); } .aio-form-error { font-size: var(--font-size-xs, 0.75rem); color: var(--danger); margin-top: var(--space-1, 4px); } /* ============================================================================= 10. FILTERS & FILTER BAR ============================================================================= */ .aio-filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3, 12px); padding: var(--space-4, 16px); background: var(--card-bg, #ffffff); border: 1px solid var(--border-color); border-radius: var(--radius-lg, 16px); margin-bottom: var(--space-4, 16px); box-shadow: var(--shadow-sm); } .aio-filter-group { display: flex; align-items: center; gap: var(--space-2, 8px); flex-wrap: wrap; } .aio-filter-label { font-size: var(--font-size-sm, 0.875rem); font-weight: var(--font-weight-medium, 500); color: var(--text-muted); white-space: nowrap; } /* Active filter chip */ .aio-filter-chip { display: inline-flex; align-items: center; gap: var(--space-1, 4px); padding: 4px 12px; background: var(--primary-light, #e0f2fe); color: var(--primary-dark, #0e5a8a); border-radius: var(--radius-full, 9999px); font-size: var(--font-size-xs, 0.75rem); font-weight: var(--font-weight-medium, 500); } .aio-filter-chip button { background: none; border: none; cursor: pointer; color: inherit; padding: 0; line-height: 1; opacity: 0.7; transition: opacity var(--transition-fast); } .aio-filter-chip button:hover { opacity: 1; } /* ============================================================================= 11. TABS ============================================================================= */ .aio-tabs { display: flex; border-bottom: 2px solid var(--border-color); gap: var(--space-1, 4px); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .aio-tabs::-webkit-scrollbar { display: none; } .aio-tab { padding: var(--space-3, 12px) var(--space-5, 20px); font-size: var(--font-size-sm, 0.875rem); font-weight: var(--font-weight-medium, 500); color: var(--text-muted); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; transition: color var(--transition-fast), border-color var(--transition-fast); } .aio-tab:hover { color: var(--primary); } .aio-tab.active, .aio-tab[aria-selected="true"] { color: var(--primary); border-color: var(--primary); font-weight: var(--font-weight-semibold, 600); } /* ============================================================================= 12. MODALS ============================================================================= */ /* Ensures modals honour theme tokens */ .modal-content { background: var(--card-bg, #ffffff) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-lg, 16px) !important; box-shadow: var(--shadow-xl) !important; color: var(--text-main) !important; } .modal-header { background: var(--panel-header-bg, #f8fbff) !important; border-bottom: 1px solid var(--panel-header-border, var(--border-color)) !important; border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0 !important; padding: var(--space-4, 16px) var(--space-5, 20px) !important; } .modal-title { font-weight: var(--font-weight-semibold, 600) !important; color: var(--text-main) !important; } .modal-footer { background: var(--panel-header-bg, #f8fbff) !important; border-top: 1px solid var(--panel-header-border, var(--border-color)) !important; border-radius: 0 0 var(--radius-lg, 16px) var(--radius-lg, 16px) !important; padding: var(--space-4, 16px) var(--space-5, 20px) !important; } /* ============================================================================= 12b. MODAL FORM CONSISTENCY All modals inherit the same input/button/file-upload styles as the rest of the app. ============================================================================= */ /* Inputs + Select2 inside modals */ .modal .form-control:not(textarea) { height: var(--input-height) !important; min-height: var(--input-height) !important; border-radius: var(--radius-md) !important; border-color: var(--border-color) !important; background-color: var(--bg-white, #fff) !important; color: var(--text-main) !important; box-shadow: var(--shadow-sm) !important; } .modal textarea.form-control { height: auto !important; min-height: 80px !important; border-radius: var(--radius-md) !important; resize: vertical; } .modal .select2-selection--single, .modal .select2-selection--multiple { height: var(--input-height) !important; min-height: var(--input-height) !important; border-radius: var(--radius-md) !important; border-color: var(--border-color) !important; } .modal .input-group-addon { background-color: var(--input-addon-bg, #f8fafc) !important; border-color: var(--border-color) !important; } /* Buttons inside modals */ .modal .btn { border-radius: var(--radius-md) !important; font-weight: 500 !important; } .modal .btn-primary { background-color: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; } .modal .btn-primary:hover { background-color: var(--primary-dark, #1069a3) !important; border-color: var(--primary-dark, #1069a3) !important; } .modal .btn-default { background-color: var(--bg-white, #fff) !important; border-color: var(--border-color) !important; color: var(--text-main) !important; } .modal .btn-default:hover { background-color: var(--input-addon-bg, #f8fafc) !important; } .modal .btn-danger { background-color: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; } /* File upload inputs inside modals */ .modal .fileinput-button, .modal .btn-file { height: var(--input-height) !important; min-height: var(--input-height) !important; background-color: var(--input-addon-bg, #f8fafc) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-md) !important; color: var(--text-main) !important; display: inline-flex !important; align-items: center !important; padding: 0 12px !important; } .modal input[type="file"] { border-radius: var(--radius-md) !important; border: 1px solid var(--border-color) !important; background-color: var(--bg-white, #fff) !important; color: var(--text-main) !important; } .modal input[type="file"]::file-selector-button, .modal input[type="file"]::-webkit-file-upload-button { background: var(--input-addon-bg, #f8fafc) !important; border: 0 !important; border-right: 1px solid var(--border-color) !important; color: var(--text-main) !important; padding: 0 12px !important; margin-right: 10px; cursor: pointer; } /* Labels in modals */ .modal .control-label, .modal .form-group > label { font-weight: 600 !important; color: var(--text-main) !important; font-size: 13px !important; } /* Help text */ .modal .help-block { font-size: 12px !important; color: var(--text-muted, #64748b) !important; } /* ============================================================================= 13. CHART CONTAINERS ============================================================================= */ .aio-chart-wrapper { position: relative; background: var(--card-bg, #ffffff); border: 1px solid var(--border-color); border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-md); overflow: hidden; } .aio-chart-header { padding: var(--space-4, 16px) var(--space-5, 20px); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px); } .aio-chart-title { font-size: var(--font-size-md, 1rem); font-weight: var(--font-weight-semibold, 600); color: var(--text-main); margin: 0; } .aio-chart-subtitle { font-size: var(--font-size-xs, 0.75rem); color: var(--text-muted); margin-top: var(--space-1, 4px); } .aio-chart-body { padding: var(--space-4, 16px) var(--space-5, 20px); } /* Chart loading shimmer overlay */ .aio-chart-loading { position: absolute; inset: 0; background: var(--card-bg, #ffffff); display: flex; align-items: center; justify-content: center; z-index: var(--z-raised, 10); } /* ============================================================================= 14. LOADING / SKELETON STATES ============================================================================= */ @keyframes aio-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .aio-skeleton { background: linear-gradient( 90deg, var(--surface-muted, #eef4ff) 25%, var(--border-color) 50%, var(--surface-muted, #eef4ff) 75% ); background-size: 400px 100%; animation: aio-shimmer 1.4s ease-in-out infinite; border-radius: var(--radius-sm, 6px); } .aio-skeleton-text { height: 1em; margin-bottom: var(--space-2, 8px); border-radius: var(--radius-sm, 6px); } .aio-skeleton-text.wide { width: 75%; } .aio-skeleton-text.short { width: 45%; } .aio-skeleton-text.tiny { width: 25%; } .aio-skeleton-card { height: 120px; border-radius: var(--radius-lg, 16px); } .aio-skeleton-avatar { width: 40px; height: 40px; border-radius: var(--radius-full, 9999px); flex-shrink: 0; } /* Show/hide helpers for skeleton states */ .aio-loading { display: block !important; } .aio-loaded { display: block; } .aio-is-loading .aio-content { visibility: hidden; } .aio-is-loading .aio-skeleton { display: block; } .aio-skeleton { display: none; } .aio-is-loading .aio-skeleton { display: block; } /* ============================================================================= 15. EMPTY STATES ============================================================================= */ .aio-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-16, 64px) var(--space-8, 32px); color: var(--text-muted); } .aio-empty-icon { font-size: 3rem; opacity: 0.35; margin-bottom: var(--space-4, 16px); line-height: 1; } .aio-empty-title { font-size: var(--font-size-lg, 1.125rem); font-weight: var(--font-weight-semibold, 600); color: var(--text-main); margin-bottom: var(--space-2, 8px); } .aio-empty-description { font-size: var(--font-size-sm, 0.875rem); max-width: 360px; margin-bottom: var(--space-5, 20px); } /* ============================================================================= 16. ERROR STATES ============================================================================= */ .aio-error { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-12, 48px) var(--space-8, 32px); } .aio-error-icon { font-size: 3rem; color: var(--danger); margin-bottom: var(--space-4, 16px); } .aio-error-title { font-size: var(--font-size-xl, 1.25rem); font-weight: var(--font-weight-bold, 700); color: var(--text-main); margin-bottom: var(--space-2, 8px); } .aio-error-description { font-size: var(--font-size-sm, 0.875rem); color: var(--text-muted); max-width: 360px; margin-bottom: var(--space-5, 20px); } /* ============================================================================= 17. RESPONSIVE UTILITIES ============================================================================= */ /* Overflow-safe table wrapper (fixes cramped tables on mobile) */ .aio-responsive-table { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg, 16px); } /* Responsive grid that collapses sensibly */ .aio-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4, 16px); } .aio-grid-2 { grid-template-columns: repeat(2, 1fr); } .aio-grid-3 { grid-template-columns: repeat(3, 1fr); } .aio-grid-4 { grid-template-columns: repeat(4, 1fr); } /* Collapse multi-column grids on tablet */ @media (max-width: 1024px) { .aio-grid-4 { grid-template-columns: repeat(2, 1fr); } .aio-grid-3 { grid-template-columns: repeat(2, 1fr); } } /* Collapse to single column on mobile */ @media (max-width: 640px) { .aio-page { padding: var(--space-3, 12px); } .aio-kpi-grid { grid-template-columns: 1fr 1fr; } .aio-grid-4, .aio-grid-3, .aio-grid-2 { grid-template-columns: 1fr; } .aio-page-header { flex-direction: column; align-items: flex-start; } .aio-section-header { flex-direction: column; align-items: flex-start; } .aio-card-header { flex-direction: column; align-items: flex-start; } .aio-filter-bar { flex-direction: column; align-items: stretch; } .aio-btn-group { width: 100%; justify-content: stretch; } .aio-btn-group .btn { flex: 1; } } /* Hide overflow text, show ellipsis in table cells on mobile */ @media (max-width: 768px) { .aio-table td.aio-truncate { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aio-tabs { gap: 0; } .aio-tab { padding: var(--space-2, 8px) var(--space-3, 12px); font-size: var(--font-size-xs, 0.75rem); } .modal-dialog { margin: var(--space-3, 12px); } .modal-content { border-radius: var(--radius-md, 10px) !important; } } /* Improve touch target size on mobile */ @media (hover: none) and (pointer: coarse) { .btn, .aio-btn-icon, .aio-tab { min-height: 44px; } .aio-table td, .aio-table th { padding: var(--space-4, 16px) var(--space-4, 16px); } } /* ----------------------------------------------------------------------------- Page Heading — standardizes all content-header h1 titles Replaces the scattered tw-text-black tw-font-bold pattern across 30+ views. ----------------------------------------------------------------------------- */ .aio-page-heading { color: var(--text-main); font-weight: var(--font-weight-bold, 700); line-height: var(--line-height-tight, 1.25); } .aio-page-heading small, .aio-page-subheading { color: var(--text-muted); font-size: var(--font-size-sm, 0.875rem); } /* ----------------------------------------------------------------------------- Stat / KPI Icon circles — replaces hardcoded tw-bg-sky-100 tw-text-sky-500 Used by components/static.blade.php icon wrapper. ----------------------------------------------------------------------------- */ .aio-stat-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; } .aio-stat-icon--blue { background: var(--primary-light, rgba(20,124,187,.12)); color: var(--primary); } .aio-stat-icon--green { background: rgba(34, 197, 94, 0.12); color: var(--success, #22c55e); } .aio-stat-icon--amber { background: rgba(252,164, 36, 0.12); color: var(--warning, #fca424); } .aio-stat-icon--red { background: rgba(239, 68, 68, 0.12); color: var(--danger, #ef4444); } .aio-stat-icon--purple { background: rgba(139, 92,246, 0.12); color: #8b5cf6; } .aio-stat-icon--teal { background: rgba( 6, 182,212, 0.12); color: var(--info, #06b6d4); } /* ----------------------------------------------------------------------------- Action Buttons — theme-aware primary button (replaces hardcoded gradient) ----------------------------------------------------------------------------- */ .premium-action-btn { background: var(--primary); color: #fff; border: none; border-radius: var(--radius-full, 9999px); font-weight: 600; transition: background 0.2s, opacity 0.2s; } .premium-action-btn:hover, .premium-action-btn:focus { background: var(--primary-dark); color: #fff; } /* ----------------------------------------------------------------------------- Dropdown Menu — theme-aware surface (replaces tw-bg-white + tw-ring-gray-200) ----------------------------------------------------------------------------- */ .premium-dropdown-menu { background: var(--surface-raised); border: 1px solid var(--border-color); border-radius: var(--radius-md, 10px); box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.12)); list-style: none; margin: 0; padding: 0.5rem; } .premium-dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; color: var(--text-main); border-radius: var(--radius-sm, 6px); text-decoration: none; transition: background 0.15s, color 0.15s; } .premium-dropdown-item:hover, .premium-dropdown-item:focus { background: var(--surface-muted); color: var(--text-main); text-decoration: none; } /* Print cleanup */ @media print { .aio-filter-bar, .aio-page-header .aio-section-actions, .aio-btn-group { display: none !important; } } /* === Source: css/app-premium.css === */ :root { --premium-primary: #147cbb; --premium-primary-soft: rgba(20, 124, 187, 0.1); --premium-accent: #0f5b8a; --premium-bg: #f4f7fb; --premium-surface: #ffffff; --premium-border: #dbe4ef; --premium-text: #0f172a; --premium-muted: #64748b; --premium-radius-lg: 16px; --premium-radius-md: 12px; --premium-shadow: 0 10px 30px rgba(15, 23, 42, 0.06); } body.premium-ui { background: linear-gradient(180deg, #f8fbff 0%, var(--premium-bg) 100%); color: var(--premium-text); } body.premium-ui .app-premium-main, body.premium-ui .app-premium-scroll { background: transparent; } body.premium-ui .content-header { padding: 18px 20px 8px; } body.premium-ui .content { padding: 0 20px 20px; } body.premium-ui .box, body.premium-ui .card, body.premium-ui .modal-content, body.premium-ui .premium-panel { background: var(--premium-surface); border: 1px solid var(--premium-border); border-radius: var(--premium-radius-lg); box-shadow: var(--premium-shadow); } /* ADD THIS JUST BELOW */ body.premium-ui .modal-content { overflow: hidden !important; } body.premium-ui .box-header, body.premium-ui .card-header { border-bottom: 1px solid var(--premium-border); border-top-left-radius: var(--premium-radius-lg); border-top-right-radius: var(--premium-radius-lg); background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); padding: 14px 16px; } body.premium-ui .box-title, body.premium-ui .card-title { font-weight: 700; color: #1e293b; } body.premium-ui .premium-panel { margin-bottom: 16px; } body.premium-ui .premium-panel .box-body, body.premium-ui .premium-panel .card-body { padding: 16px; } body.premium-ui .premium-panel--filters .box-header { cursor: pointer; } body.premium-ui .premium-panel--filters .box-title a { color: #334155; font-weight: 700; } body.premium-ui .premium-panel--filters .box-title a:hover { color: var(--premium-primary); } body.premium-ui .nav-tabs-custom { border: 1px solid var(--premium-border); border-radius: var(--premium-radius-lg); overflow: hidden; box-shadow: var(--premium-shadow); background: #fff; } body.premium-ui .nav-tabs-custom > .nav-tabs { border-bottom: 1px solid var(--premium-border); background: #f8fbff; display: flex; flex-wrap: nowrap; overflow-x: auto; } body.premium-ui .nav-tabs-custom > .nav-tabs > li { float: none; } body.premium-ui .nav-tabs-custom > .nav-tabs > li > a { border: 0; border-bottom: 3px solid transparent; color: #64748b; font-weight: 600; padding: 14px 16px; white-space: nowrap; } body.premium-ui .nav-tabs-custom > .nav-tabs > li.active > a, body.premium-ui .nav-tabs-custom > .nav-tabs > li.active > a:hover, body.premium-ui .nav-tabs-custom > .nav-tabs > li.active > a:focus { color: var(--premium-primary); border-bottom-color: var(--premium-primary); background: #fff; } body.premium-ui .form-control, body.premium-ui .input-group-addon, body.premium-ui .select2-container--default .select2-selection--single, body.premium-ui .select2-container--default .select2-selection--multiple { border: 1px solid var(--border, #c9d8e8); border-radius: var(--radius, 0.625rem); min-height: var(--input-height, 2.375rem); background: var(--background, #fff); box-shadow: none; } body.premium-ui .form-control:focus, body.premium-ui .select2-container--default.select2-container--focus .select2-selection--single, body.premium-ui .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: rgba(20, 124, 187, 0.5); box-shadow: 0 0 0 3px var(--premium-primary-soft); } body.premium-ui .select2-container { width: 100% !important; } body.premium-ui .btn, body.premium-ui .tw-dw-btn { border-radius: 10px; font-weight: 600; } body.premium-ui .btn-primary, body.premium-ui .tw-dw-btn-primary { background: linear-gradient(135deg, #147cbb, #1b8dd2); border-color: #147cbb; } body.premium-ui .btn-default, body.premium-ui .tw-dw-btn-neutral { border-color: #cfd9e5; background: #fff; color: #334155; } body.premium-ui .table-responsive { border: 1px solid var(--premium-border); border-radius: var(--premium-radius-md); background: #fff; } body.premium-ui table.table { margin-bottom: 0; } body.premium-ui table.table > thead > tr > th { border-bottom: 2px solid #d7e2ef; color: #475569; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; background: #f8fbff; vertical-align: middle; } body.premium-ui table.table > tbody > tr > td { border-top: 1px solid #edf2f7; vertical-align: middle; color: #334155; } body.premium-ui .dataTables_wrapper .dataTables_filter input, body.premium-ui .dataTables_wrapper .dataTables_length select { border: 1px solid #c9d8e8; border-radius: 8px; padding: 6px 10px; } body.premium-ui .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 8px !important; border: 1px solid #d6e1ec !important; background: #fff !important; } body.premium-ui .dataTables_wrapper .dataTables_paginate .paginate_button.current { border-color: #147cbb !important; color: #147cbb !important; background: #ecf6fd !important; } body.premium-ui .modal-header, body.premium-ui .modal-footer { border-color: var(--premium-border); background: #f8fbff; } body.premium-ui .modal-title { font-weight: 700; color: #1e293b; } body.premium-ui .badge, body.premium-ui .label { border-radius: 999px; } body.premium-ui .label-success, body.premium-ui .badge-success { background: #e8f8ef; color: #16794f; } body.premium-ui .label-danger, body.premium-ui .badge-danger { background: #ffecef; color: #b42335; } body.premium-ui .label-warning, body.premium-ui .badge-warning { background: #fff7e6; color: #a85a00; } body.premium-ui .app-header { border-bottom: 0; box-shadow: 0 10px 24px rgba(20, 124, 187, 0.2); } body.premium-ui .side-bar { border-right: 1px solid #dbe4ef; box-shadow: 6px 0 24px rgba(15, 23, 42, 0.04); } body.premium-ui .premium-table-head-center th, body.premium-ui .premium-table-head-center .dataTables_scrollHead thead th, body.premium-ui .premium-table-head-center .dataTables_scrollHeadInner table thead th { text-align: center !important; vertical-align: middle !important; } body.premium-ui .premium-dropdown-menu { top: 100%; margin-top: 0.5rem; } body.premium-ui .premium-shadow-none, body.premium-ui .premium-surface-wrap { box-shadow: none !important; } body.premium-ui .premium-scroll-y { max-height: 500px; overflow-y: auto; } body.premium-ui .premium-row-gap { margin-bottom: 8px; } body.premium-ui .premium-w-100 { width: 100% !important; } @media (max-width: 991px) { body.premium-ui .content-header { padding: 14px 14px 6px; } body.premium-ui .content { padding: 0 14px 14px; } body.premium-ui .box, body.premium-ui .card, body.premium-ui .modal-content, body.premium-ui .premium-panel, body.premium-ui .nav-tabs-custom { border-radius: 12px; } body.premium-ui .box-header, body.premium-ui .card-header { padding: 12px; } body.premium-ui .nav-tabs-custom > .nav-tabs > li > a { padding: 12px; } } body.premium-ui .premium-tabs-shell { box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.08); } body.premium-ui .aio-main-tabs .nav-tabs, body.premium-ui #ledger_format_tabs { border-bottom: 1px solid var(--premium-border); background: #f8fbff; } body.premium-ui .aio-main-tabs .nav-tabs > li > a, body.premium-ui #ledger_format_tabs > li > a { color: #64748b; font-weight: 600; border: none !important; border-bottom: 3px solid transparent !important; border-radius: 0; } body.premium-ui .aio-main-tabs .nav-tabs > li.active > a, body.premium-ui .aio-main-tabs .nav-tabs > li.active > a:hover, body.premium-ui .aio-main-tabs .nav-tabs > li.active > a:focus, body.premium-ui #ledger_format_tabs > li.active > a, body.premium-ui #ledger_format_tabs > li.active > a:hover, body.premium-ui #ledger_format_tabs > li.active > a:focus { color: var(--premium-primary) !important; border-bottom-color: var(--premium-primary) !important; background: #fff !important; } body.premium-ui .premium-logo-img { max-height: 40px; max-width: 100%; } body.premium-ui .premium-business-list { max-height: 60vh; overflow-y: auto; } body.premium-ui .premium-search-portal { z-index: 2147483647; } body.premium-ui .premium-search-results { max-height: calc(100vh - 150px); min-width: 320px; } body.premium-ui .premium-mobile-search-overlay { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483646; background: #fff; } body.premium-ui .premium-mobile-search-top { padding: 12px; border-bottom: 1px solid #e5e7eb; background: #fff; gap: 12px; } body.premium-ui .premium-mobile-search-input-wrap { position: relative; flex: 1; } body.premium-ui .premium-mobile-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #6b7280; pointer-events: none; } body.premium-ui .premium-mobile-search-input { width: 100%; padding: 8px 12px 8px 36px; font-size: 14px; border: 1px solid #bfdbfe; border-radius: 8px; background: #fff; color: #1f2937; } body.premium-ui .premium-mobile-search-close { padding: 6px; color: #6b7280; background: transparent; border: none; cursor: pointer; border-radius: 6px; } body.premium-ui .premium-mobile-search-close:hover { background: #f3f4f6; } body.premium-ui .premium-mobile-search-close-icon { width: 22px; height: 22px; } body.premium-ui .premium-mobile-search-results { flex: 1; overflow-y: auto; background: #fff; min-height: 0; } body.premium-ui #purchase_table th { white-space: nowrap; } body.premium-ui #purchase_table th i.fa, body.premium-ui #purchase_table th i.fas, body.premium-ui #purchase_table th i.glyphicon { display: inline-block; margin-left: 5px; } body.premium-ui #contact_table tbody tr[data-href] { cursor: pointer; } body.premium-ui .premium-inline-gap-right { margin-right: 5px; } body.premium-ui .premium-padding-0 { padding: 0 !important; } body.premium-ui .premium-margin-5 { margin: 5px; } body.premium-ui .premium-mt-15 { margin-top: 15px; } body.premium-ui .contact-info-overflow-fix .box, body.premium-ui .contact-info-overflow-fix .box-body { overflow: visible !important; } body.premium-ui .contact-payments-table > thead > tr > th:nth-child(1) { width: 18%; } body.premium-ui .contact-payments-table > thead > tr > th:nth-child(2), body.premium-ui .contact-payments-table > thead > tr > th:nth-child(3), body.premium-ui .contact-payments-table > thead > tr > th:nth-child(4), body.premium-ui .contact-payments-table > thead > tr > th:nth-child(5) { width: 15%; } body.premium-ui .contact-payments-table > thead > tr > th:nth-child(6) { width: 12%; } body.premium-ui .contact-payments-table > thead > tr > th:nth-child(7) { width: 10%; } body.premium-ui .premium-payment-row { padding: 15px; background: #f8f9fe; border: 1px solid #d2d6de; border-radius: 8px; margin-bottom: 15px; position: relative; } body.premium-ui .premium-payment-row-remove { position: absolute; top: 10px; right: 10px; } body.premium-ui .premium-payment-summary { background: #f8f9fe; border: 1px solid #d2d6de; padding: 15px; border-radius: 8px; } body.premium-ui .premium-balance-highlight { background: #dff0d8; padding: 10px; border-radius: 6px; } body.premium-ui .premium-balance-title { font-size: 16px; } body.premium-ui .premium-balance-amount { font-size: 24px; } body.premium-ui .premium-modal-header { border-bottom: 1px solid #f3f4f6; padding: 15px 20px; } body.premium-ui .premium-modal-close { font-size: 24px; opacity: 0.6; margin-top: -5px; } body.premium-ui .premium-modal-title { font-weight: 700; color: var(--premium-primary); } body.premium-ui .premium-inline-icon-gap { margin-right: 8px; } body.premium-ui .premium-modal-body { padding: 20px; } body.premium-ui .premium-modal-footer { border-top: 1px solid #f3f4f6; padding: 15px 20px; } body.premium-ui .premium-modal-save { background-color: var(--premium-primary); border-color: var(--premium-primary); } html.dark-mode body.premium-ui .premium-payment-row, html.dark-mode body.premium-ui .premium-payment-summary { background: rgba(15, 23, 42, 0.6); border-color: rgba(148, 163, 184, 0.3); } html.dark-mode body.premium-ui .premium-balance-highlight { background: rgba(22, 101, 52, 0.25); } html.dark-mode body.premium-ui .contact-payments-table > thead > tr > th { background: rgba(15, 23, 42, 0.65); } body.premium-ui .premium-inline-title-row { display: inline-flex; align-items: center; gap: 8px; } body.premium-ui .premium-nowrap { white-space: nowrap; } body.premium-ui .premium-contact-subtitle { padding-left: 28px; display: block; } body.premium-ui .premium-contact-info-value { padding-left: 20px; } body.premium-ui .premium-contact-map { height: 450px; } body.premium-ui .premium-toolbar-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } @media (max-width: 767px) { body.premium-ui .aio-main-tabs .nav-tabs > li > a { padding: 10px 12px; font-size: 12px; } body.premium-ui .premium-payment-row { padding: 12px; } body.premium-ui .premium-payment-row [class*='col-'] { margin-bottom: 8px; } body.premium-ui .dataTables_wrapper .dataTables_filter, body.premium-ui .dataTables_wrapper .dataTables_length { float: none; text-align: left; } body.premium-ui .dataTables_wrapper .dataTables_paginate { text-align: left; margin-top: 8px; } } /* Unified dark-mode selectors for premium system */ html[data-theme="dark"] body.premium-ui, html.dark-mode body.premium-ui, body.dark-mode.premium-ui { --premium-bg: #0f141a; --premium-surface: #151b22; --premium-border: rgba(148, 163, 184, 0.28); --premium-text: #e2e8f0; --premium-muted: #94a3b8; background: linear-gradient(180deg, #0f141a 0%, #0b1016 100%); color: var(--premium-text); } html.dark-mode body.premium-ui .box, html.dark-mode body.premium-ui .card, html.dark-mode body.premium-ui .modal-content, html.dark-mode body.premium-ui .premium-panel, html.dark-mode body.premium-ui .nav-tabs-custom, html.dark-mode body.premium-ui .table-responsive, html[data-theme="dark"] body.premium-ui .box, html[data-theme="dark"] body.premium-ui .card, html[data-theme="dark"] body.premium-ui .modal-content, html[data-theme="dark"] body.premium-ui .premium-panel, html[data-theme="dark"] body.premium-ui .nav-tabs-custom, html[data-theme="dark"] body.premium-ui .table-responsive, body.dark-mode.premium-ui .box, body.dark-mode.premium-ui .card, body.dark-mode.premium-ui .modal-content, body.dark-mode.premium-ui .premium-panel, body.dark-mode.premium-ui .nav-tabs-custom, body.dark-mode.premium-ui .table-responsive { background: var(--premium-surface); border-color: var(--premium-border); color: var(--premium-text); } html.dark-mode body.premium-ui .box-header, html.dark-mode body.premium-ui .card-header, html.dark-mode body.premium-ui .modal-header, html.dark-mode body.premium-ui .modal-footer, html.dark-mode body.premium-ui .nav-tabs-custom > .nav-tabs, html.dark-mode body.premium-ui table.table > thead > tr > th, html[data-theme="dark"] body.premium-ui .box-header, html[data-theme="dark"] body.premium-ui .card-header, html[data-theme="dark"] body.premium-ui .modal-header, html[data-theme="dark"] body.premium-ui .modal-footer, html[data-theme="dark"] body.premium-ui .nav-tabs-custom > .nav-tabs, html[data-theme="dark"] body.premium-ui table.table > thead > tr > th, body.dark-mode.premium-ui .box-header, body.dark-mode.premium-ui .card-header, body.dark-mode.premium-ui .modal-header, body.dark-mode.premium-ui .modal-footer, body.dark-mode.premium-ui .nav-tabs-custom > .nav-tabs, body.dark-mode.premium-ui table.table > thead > tr > th { background: rgba(30, 41, 59, 0.72); border-color: var(--premium-border); color: #cbd5e1; } html.dark-mode body.premium-ui table.table > tbody > tr > td, html[data-theme="dark"] body.premium-ui table.table > tbody > tr > td, body.dark-mode.premium-ui table.table > tbody > tr > td { border-color: rgba(71, 85, 105, 0.35); color: var(--premium-text); } html.dark-mode body.premium-ui table.table > tbody > tr:hover > td, html[data-theme="dark"] body.premium-ui table.table > tbody > tr:hover > td, body.dark-mode.premium-ui table.table > tbody > tr:hover > td { background: rgba(51, 65, 85, 0.35); } html.dark-mode body.premium-ui .form-control, html.dark-mode body.premium-ui .input-group-addon, html.dark-mode body.premium-ui .select2-container--default .select2-selection--single, html.dark-mode body.premium-ui .select2-container--default .select2-selection--multiple, html.dark-mode body.premium-ui .dropdown-menu, html[data-theme="dark"] body.premium-ui .form-control, html[data-theme="dark"] body.premium-ui .input-group-addon, html[data-theme="dark"] body.premium-ui .select2-container--default .select2-selection--single, html[data-theme="dark"] body.premium-ui .select2-container--default .select2-selection--multiple, html[data-theme="dark"] body.premium-ui .dropdown-menu, body.dark-mode.premium-ui .form-control, body.dark-mode.premium-ui .input-group-addon, body.dark-mode.premium-ui .select2-container--default .select2-selection--single, body.dark-mode.premium-ui .select2-container--default .select2-selection--multiple, body.dark-mode.premium-ui .dropdown-menu { background: #1e293b; border-color: rgba(148, 163, 184, 0.35); color: #e2e8f0; } html.dark-mode body.premium-ui .select2-dropdown, html.dark-mode body.premium-ui .select2-results__option, html[data-theme="dark"] body.premium-ui .select2-dropdown, html[data-theme="dark"] body.premium-ui .select2-results__option, body.dark-mode.premium-ui .select2-dropdown, body.dark-mode.premium-ui .select2-results__option { background: #1e293b; color: #e2e8f0; } html.dark-mode body.premium-ui .dataTables_wrapper .dataTables_filter input, html.dark-mode body.premium-ui .dataTables_wrapper .dataTables_length select, html[data-theme="dark"] body.premium-ui .dataTables_wrapper .dataTables_filter input, html[data-theme="dark"] body.premium-ui .dataTables_wrapper .dataTables_length select, body.dark-mode.premium-ui .dataTables_wrapper .dataTables_filter input, body.dark-mode.premium-ui .dataTables_wrapper .dataTables_length select { background: #0f172a; border-color: rgba(148, 163, 184, 0.35); color: #e2e8f0; } html.dark-mode body.premium-ui .dataTables_wrapper .dataTables_paginate .paginate_button, html[data-theme="dark"] body.premium-ui .dataTables_wrapper .dataTables_paginate .paginate_button, body.dark-mode.premium-ui .dataTables_wrapper .dataTables_paginate .paginate_button { background: #1e293b !important; border-color: rgba(148, 163, 184, 0.35) !important; color: #cbd5e1 !important; } html.dark-mode body.premium-ui .dataTables_wrapper .dataTables_paginate .paginate_button.current, html[data-theme="dark"] body.premium-ui .dataTables_wrapper .dataTables_paginate .paginate_button.current, body.dark-mode.premium-ui .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: rgba(20, 124, 187, 0.22) !important; color: #7dd3fc !important; border-color: rgba(56, 189, 248, 0.45) !important; } html.dark-mode body.premium-ui .dropdown-menu > li > a, html.dark-mode body.premium-ui .select2-container--default .select2-results__option, html.dark-mode body.premium-ui .modal-title, html[data-theme="dark"] body.premium-ui .dropdown-menu > li > a, html[data-theme="dark"] body.premium-ui .select2-container--default .select2-results__option, html[data-theme="dark"] body.premium-ui .modal-title, body.dark-mode.premium-ui .dropdown-menu > li > a, body.dark-mode.premium-ui .select2-container--default .select2-results__option, body.dark-mode.premium-ui .modal-title { color: #e2e8f0; } html.dark-mode body.premium-ui .premium-modal-close, html.dark-mode body.premium-ui .modal-header .close, html[data-theme="dark"] body.premium-ui .premium-modal-close, html[data-theme="dark"] body.premium-ui .modal-header .close, body.dark-mode.premium-ui .premium-modal-close, body.dark-mode.premium-ui .modal-header .close { color: #cbd5e1; opacity: 0.8; } html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; animation: none !important; } body.premium-ui .premium-balance-footer { text-align: right; width: 100%; font-weight: 700; } body.premium-ui .premium-option-strong { font-weight: 700; } body.premium-ui .premium-flex-row-full { display: flex; width: 100%; } body.premium-ui .premium-mb-4 { margin-bottom: 4px; } body.premium-ui .premium-mb-5 { margin-bottom: 5px; } body.premium-ui .premium-mt-20 { margin-top: 20px; } body.premium-ui .permission-table { margin-bottom: 20px; border: 1px solid #ddd; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } body.premium-ui .permission-table thead > tr > th { background-color: #f9f9f9; font-weight: 600; border-bottom-width: 2px; border-color: #ddd; } body.premium-ui .permission-table > tbody > tr > td:first-child { font-weight: 600; vertical-align: top; width: 25%; padding: 15px; } body.premium-ui .permission-table > tbody > tr > td:last-child { vertical-align: top; padding: 10px 15px; } body.premium-ui .permission-table .permission-group-row { display: flex; flex-wrap: wrap; width: 100%; margin-left: -5px; margin-right: -5px; } body.premium-ui .permission-table .permission-group-row > [class*='col-'] { padding-left: 5px; padding-right: 5px; } body.premium-ui .permission-table hr { margin-top: 10px; margin-bottom: 10px; border-color: #eee; width: 100%; } body.premium-ui .permission-table .check_all_row { margin-top: 10px; } @media (max-width: 767px) { body.premium-ui .permission-table { font-size: 14px; } body.premium-ui .permission-table > tbody > tr > td:first-child { width: 100% !important; display: block; padding: 12px 10px; border-bottom: 1px solid #eee; background-color: #f8f9fa; } body.premium-ui .permission-table > tbody > tr > td:last-child { display: block; width: 100% !important; padding: 12px 10px; } body.premium-ui .permission-table .permission-group-row { margin-left: 0; margin-right: 0; } body.premium-ui .permission-table .permission-group-row > [class*='col-'] { flex: 0 0 100% !important; max-width: 100% !important; margin-bottom: 8px; padding-left: 0; padding-right: 0; } body.premium-ui .permission-table .permission-group-row > .col-md-4, body.premium-ui .permission-table .permission-group-row > .col-md-6, body.premium-ui .permission-table .permission-group-row > .col-md-8, body.premium-ui .permission-table .permission-group-row > .col-md-12 { flex: 0 0 100% !important; max-width: 100% !important; } body.premium-ui .permission-group-row .checkbox, body.premium-ui .permission-group-row .radio { margin-bottom: 10px; padding: 8px; border: 1px solid #f0f0f0; border-radius: 6px; background: #fff; } body.premium-ui .permission-table label { display: flex !important; align-items: center; padding: 8px 4px; margin: 0 !important; min-height: 44px; cursor: pointer; } body.premium-ui .permission-table strong { display: block; margin-bottom: 10px; font-size: 15px; color: #333; } body.premium-ui .permission-table hr { margin: 15px 0; } body.premium-ui .text-center .btn { width: 100%; margin-bottom: 10px; } } @media (min-width: 768px) and (max-width: 991px) { body.premium-ui .permission-table .permission-group-row > .col-md-4 { flex: 0 0 50% !important; max-width: 50% !important; } body.premium-ui .permission-table > tbody > tr > td:first-child { width: 30%; } } html.dark-mode body.premium-ui .permission-table, html[data-theme='dark'] body.premium-ui .permission-table, body.dark-mode.premium-ui .permission-table { border-color: rgba(148, 163, 184, 0.3); box-shadow: 0 2px 6px rgba(2, 6, 23, 0.45); } html.dark-mode body.premium-ui .permission-table thead > tr > th, html[data-theme='dark'] body.premium-ui .permission-table thead > tr > th, body.dark-mode.premium-ui .permission-table thead > tr > th { background: rgba(30, 41, 59, 0.72); border-color: rgba(148, 163, 184, 0.3); color: #cbd5e1; } html.dark-mode body.premium-ui .permission-table > tbody > tr > td:first-child, html[data-theme='dark'] body.premium-ui .permission-table > tbody > tr > td:first-child, body.dark-mode.premium-ui .permission-table > tbody > tr > td:first-child { background: rgba(30, 41, 59, 0.35); color: #e2e8f0; } body.premium-ui .premium-module-shell { padding-top: 4px; } /* AdvancedReports renderer cleanup utilities */ body.premium-ui .premium-ar-card { flex: 0 1 var(--premium-ar-card-width, calc(25% - 8px)); min-width: 200px; margin-bottom: 10px; } body.premium-ui .premium-ar-info-box { margin: 0; } body.premium-ui .premium-ar-text-xs { font-size: 11px; } body.premium-ui .premium-ar-text-sm { font-size: 12px; } body.premium-ui .premium-ar-text-md { font-size: 14px; } body.premium-ui .premium-ar-text-lg { font-size: 16px; } body.premium-ui .premium-ar-progress-3 { height: 3px; } body.premium-ui .premium-ar-progress-4 { height: 4px; } body.premium-ui .premium-ar-summary-row { display: flex; justify-content: space-between; align-items: center; } body.premium-ui .premium-ar-table-row { font-size: 12px; } body.premium-ui .premium-ar-invoice { font-size: 11px; } body.premium-ui .premium-ar-label { font-size: 10px; } body.premium-ui .premium-ar-product-ellipsis { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.premium-ui .premium-ar-total-row { font-weight: 700; } body.premium-ui .premium-ar-td-center { text-align: center; } body.premium-ui .premium-ar-td-right { text-align: right; } html.dark-mode body.premium-ui .premium-ar-product-ellipsis, html[data-theme='dark'] body.premium-ui .premium-ar-product-ellipsis, body.dark-mode.premium-ui .premium-ar-product-ellipsis { color: #e2e8f0; } html.dark-mode body.premium-ui .premium-ar-table-row .label, html[data-theme='dark'] body.premium-ui .premium-ar-table-row .label, body.dark-mode.premium-ui .premium-ar-table-row .label { filter: brightness(0.92) saturate(1.1); } @media (max-width: 992px) { body.premium-ui .premium-ar-card { flex-basis: calc(50% - 8px); min-width: 180px; } } @media (max-width: 576px) { body.premium-ui .premium-ar-card { flex-basis: 100%; min-width: 160px; } } body.premium-ui .premium-ar-table-scroll { max-height: 400px; overflow-y: auto; } body.premium-ui .premium-ar-sticky-head { position: sticky; top: 0; z-index: 10; background: #f5f7fb; } body.premium-ui .premium-ar-col-80 { width: 80px; } body.premium-ui .premium-ar-col-90 { width: 90px; } body.premium-ui .premium-ar-col-100 { width: 100px; } body.premium-ui .premium-ar-col-120 { width: 120px; } body.premium-ui .premium-ar-col-min-200 { min-width: 200px; } html.dark-mode body.premium-ui .premium-ar-sticky-head, html[data-theme='dark'] body.premium-ui .premium-ar-sticky-head, body.dark-mode.premium-ui .premium-ar-sticky-head { background: #1f2937; } /* POS/plain-layout runtime hardening utilities */ body.premium-ui .premium-pos-hidden { display: none !important; } body.premium-ui .premium-pos-z-4000 { z-index: 4000; } body.premium-ui .premium-pos-title-tight { margin-bottom: 0 !important; margin-top: 5px; } body.premium-ui .premium-pos-title-reset { margin-bottom: 0 !important; margin-top: 0 !important; font-size: inherit; font-weight: inherit; } body.premium-ui .premium-pos-card-body-tight { margin-bottom: -20px; } body.premium-ui .premium-pos-inline-link { padding: 0 5px; } body.premium-ui .premium-pos-label-top { padding-top: 5px; } body.premium-ui .premium-pos-history-info { display: none; border-radius: 8px; border: 1px solid #e5e7eb; } body.premium-ui .premium-pos-history-image { max-height: 60px; border-radius: 8px; } body.premium-ui .premium-pos-text-13 { font-size: 13px; } body.premium-ui .premium-pos-tabs-hidden { display: none; } body.premium-ui .premium-pos-tab-content { padding-top: 15px; } body.premium-ui .premium-pos-loading { display: none; text-align: center; padding: 50px; } body.premium-ui .premium-pos-step-hidden { display: none; } body.premium-ui .premium-pos-mt-20 { margin-top: 20px; } html.dark-mode body.premium-ui .premium-pos-history-info, html[data-theme='dark'] body.premium-ui .premium-pos-history-info, body.dark-mode.premium-ui .premium-pos-history-info { border-color: rgba(148, 163, 184, 0.35); background: rgba(15, 23, 42, 0.45); } /* ========================================================================== FIX: FORCE ROUNDED CORNERS ON PANELS & INNER BODIES ========================================================================== */ /* 1. Force the main panel to clip any square children */ body.premium-ui .premium-panel { overflow: hidden !important; } /* 2. Explicitly round the bottom of the inner content areas just in case */ body.premium-ui .premium-panel .panel-collapse, body.premium-ui .premium-panel .box-body { border-bottom-left-radius: var(--premium-radius-lg) !important; border-bottom-right-radius: var(--premium-radius-lg) !important; } /* ========================================================================== FIX: RESTORE DROPDOWN ARROWS ========================================================================== */ body.premium-ui select.form-control, body.premium-ui .select2-container--default .select2-selection--single { /* Re-add the custom SVG arrow */ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 16px !important; padding-right: 30px !important; /* Hide default browser styling */ -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; } /* Dark Mode: Use a lighter colored arrow so it shows up on dark backgrounds */ html.dark-mode body.premium-ui select.form-control, html.dark-mode body.premium-ui .select2-container--default .select2-selection--single, html[data-theme='dark'] body.premium-ui select.form-control, html[data-theme='dark'] body.premium-ui .select2-container--default .select2-selection--single { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23cbd5e1' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e") !important; } /* ========================================================================== FIX: TABLE & NOTES ROUNDED CORNERS (Prevent Bleeding) ========================================================================== */ /* 1. Force table wrappers to allow horizontal scroll while clipping vertical overflow */ body.premium-ui .table-responsive { border-radius: var(--premium-radius-md) !important; overflow-x: auto !important; overflow-y: hidden !important; border: 1px solid var(--premium-border) !important; background-color: var(--premium-surface) !important; } /* 2. Ensure the table sits flush inside the wrapper without double borders */ body.premium-ui .table-responsive .table { margin-bottom: 0 !important; border-style: hidden !important; } /* 3. Round the corners of the "Notes" sections (.well) */ body.premium-ui .well { border-radius: var(--premium-radius-md) !important; border: 1px solid var(--premium-border) !important; overflow: hidden !important; box-shadow: none !important; } /* ========================================================================== PREMIUM SETTINGS MODULE ========================================================================== */ body.premium-ui .pos-tab-content.premium-settings-pane { display: none; } body.premium-ui .pos-tab-content.premium-settings-pane.active { display: block; } body.premium-ui .premium-settings-nav-shell { overflow: visible; } body.premium-ui .premium-settings-tab { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; text-align: left !important; font-weight: 600 !important; color: var(--premium-muted) !important; background: var(--premium-surface) !important; border: 1px solid var(--premium-border) !important; border-radius: 999px !important; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05); padding: 12px 16px !important; margin-bottom: 8px; } body.premium-ui .premium-settings-tab:hover { background: var(--premium-primary-soft) !important; color: var(--premium-primary) !important; } body.premium-ui .premium-settings-tab.active { background: linear-gradient(135deg, var(--premium-primary), #1b8dd2) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 4px 10px rgba(20, 124, 187, 0.25) !important; } body.premium-ui .premium-settings-tab.active i { color: #fff !important; opacity: 1 !important; } body.premium-ui .premium-settings-pane { padding: 2px; } body.premium-ui .premium-settings-hero { margin-bottom: 18px; padding: 20px 22px; border-radius: 18px; border: 1px solid rgba(20, 124, 187, 0.10); background: linear-gradient(135deg, rgba(20,124,187,.12), rgba(20,124,187,.04)); } body.premium-ui .premium-settings-hero__title { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; color: var(--premium-text); } body.premium-ui .premium-settings-hero__desc { margin: 8px 0 0; color: var(--premium-muted); font-size: 13px; line-height: 1.65; } body.premium-ui .premium-settings-card { margin-bottom: 18px; padding: 20px; border: 1px solid var(--premium-border); border-radius: 18px; background: var(--premium-surface); box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05); } body.premium-ui .premium-settings-card__title { margin: 0 0 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--premium-text); } body.premium-ui .premium-settings-section-label { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--premium-muted); } body.premium-ui .premium-settings-subcard { height: 100%; padding: 16px; border: 1px solid var(--premium-border); border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.9)); } body.premium-ui .premium-settings-subcard__title { margin: 0 0 12px; font-size: 15px; font-weight: 700; } body.premium-ui .premium-settings-muted { color: var(--premium-muted); font-size: 13px; } body.premium-ui .premium-inline-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; } body.premium-ui .premium-settings-tip { margin-top: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(59, 130, 246, 0.14); background: rgba(59, 130, 246, 0.07); color: #1e3a8a; } body.premium-ui .premium-settings-tip--soft { margin-top: 0; } body.premium-ui .premium-settings-collapse-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--premium-border); border-radius: 14px; background: #fff; color: inherit; font-weight: 600; } body.premium-ui .premium-settings-collapse-box { margin-top: 12px; padding: 16px; border: 1px solid var(--premium-border); border-radius: 16px; background: rgba(248, 250, 252, .75); } /* Settings layout discipline */ body.premium-ui .premium-settings-pane .row, body.premium-ui .premium-settings-card .row, body.premium-ui .premium-settings-subcard .row, body.premium-ui .premium-settings-collapse-box .row { margin-left: -10px; margin-right: -10px; } body.premium-ui .premium-settings-pane .row > [class*='col-'], body.premium-ui .premium-settings-card .row > [class*='col-'], body.premium-ui .premium-settings-subcard .row > [class*='col-'], body.premium-ui .premium-settings-collapse-box .row > [class*='col-'] { padding-left: 10px; padding-right: 10px; } body.premium-ui .premium-settings-pane .form-group, body.premium-ui .premium-settings-card .form-group, body.premium-ui .premium-settings-subcard .form-group, body.premium-ui .premium-settings-collapse-box .form-group { margin-bottom: 18px; } body.premium-ui .premium-settings-pane .input-group, body.premium-ui .premium-settings-card .input-group, body.premium-ui .premium-settings-subcard .input-group, body.premium-ui .premium-settings-collapse-box .input-group { width: 100%; table-layout: fixed; } body.premium-ui .premium-settings-pane .input-group .form-control, body.premium-ui .premium-settings-card .input-group .form-control, body.premium-ui .premium-settings-subcard .input-group .form-control, body.premium-ui .premium-settings-collapse-box .input-group .form-control, body.premium-ui .premium-settings-pane .select2-container, body.premium-ui .premium-settings-card .select2-container, body.premium-ui .premium-settings-subcard .select2-container, body.premium-ui .premium-settings-collapse-box .select2-container { width: 100% !important; } body.premium-ui .premium-settings-pane .input-group-addon, body.premium-ui .premium-settings-card .input-group-addon, body.premium-ui .premium-settings-subcard .input-group-addon, body.premium-ui .premium-settings-collapse-box .input-group-addon { min-width: 44px; width: 44px; padding: 0 10px; text-align: center; vertical-align: middle; } /* File input fixes */ body.premium-ui .premium-file-input-group { width: 100%; table-layout: fixed; } body.premium-ui .premium-file-input-wrap { position: relative; width: 100%; overflow: hidden; border: 1px solid var(--border, #c9d8e8); border-left: 0; border-radius: 0 var(--radius, 0.625rem) var(--radius, 0.625rem) 0; min-height: var(--input-height, 2.375rem); background: var(--background, #fff); } body.premium-ui .premium-file-input { display: block; width: 100%; min-height: var(--input-height, 2.375rem); padding: 8px 12px; } body.premium-ui .premium-settings-file-group .help-block { margin-top: 8px; } /* Custom labels arrangement */ body.premium-ui .premium-custom-labels-card { height: 100%; } body.premium-ui .premium-custom-label-split { display: flex; width: 100%; gap: 0; } body.premium-ui .premium-custom-label-split__main { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; } body.premium-ui .premium-custom-label-split__side { border-top-left-radius: 0; border-bottom-left-radius: 0; min-width: 115px; } body.premium-ui .premium-custom-label-options { background: #fffbea; } body.premium-ui .premium-custom-label-checks { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; } body.premium-ui .premium-custom-label-checks label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #475569; } body.premium-ui .premium-add-field-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--premium-primary); font-weight: 700; } body.premium-ui .premium-add-field-btn .count-text { color: var(--premium-muted); font-weight: 600; } @media (max-width: 1199px) { body.premium-ui .pos-tab-menu { margin-bottom: 20px; } body.premium-ui .nav-pills-mobile { display: flex !important; flex-wrap: nowrap !important; gap: 10px !important; overflow-x: auto !important; overflow-y: hidden !important; justify-content: flex-start !important; align-items: stretch !important; width: 100% !important; padding: 4px 2px 10px !important; scroll-behavior: smooth; scrollbar-width: none !important; -ms-overflow-style: none !important; } body.premium-ui .nav-pills-mobile::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } body.premium-ui .premium-settings-tab { min-width: max-content; padding: 10px 16px !important; } } @media (max-width: 767px) { body.premium-ui .premium-settings-hero { padding: 16px; } body.premium-ui .premium-settings-card { padding: 16px; } body.premium-ui .premium-settings-hero__title { font-size: 18px; } body.premium-ui .premium-settings-pane .row, body.premium-ui .premium-settings-card .row, body.premium-ui .premium-settings-subcard .row, body.premium-ui .premium-settings-collapse-box .row { margin-left: -6px; margin-right: -6px; } body.premium-ui .premium-settings-pane .row > [class*='col-'], body.premium-ui .premium-settings-card .row > [class*='col-'], body.premium-ui .premium-settings-subcard .row > [class*='col-'], body.premium-ui .premium-settings-collapse-box .row > [class*='col-'] { padding-left: 6px; padding-right: 6px; } } html.dark-mode body.premium-ui .premium-settings-tab, html[data-theme='dark'] body.premium-ui .premium-settings-tab, body.dark-mode.premium-ui .premium-settings-tab { color: #cbd5e1 !important; } html.dark-mode body.premium-ui .premium-settings-tab:hover, html[data-theme='dark'] body.premium-ui .premium-settings-tab:hover, body.dark-mode.premium-ui .premium-settings-tab:hover { background-color: rgba(51, 65, 85, 0.5) !important; color: #7dd3fc !important; } html.dark-mode body.premium-ui .premium-settings-tab.active, html[data-theme='dark'] body.premium-ui .premium-settings-tab.active, body.dark-mode.premium-ui .premium-settings-tab.active { background: linear-gradient(135deg, var(--premium-primary), #0f5b8a) !important; color: #ffffff !important; box-shadow: 0 4px 10px rgba(15, 91, 138, 0.4) !important; } html.dark-mode body.premium-ui .premium-settings-card, html[data-theme='dark'] body.premium-ui .premium-settings-card, body.dark-mode.premium-ui .premium-settings-card, html.dark-mode body.premium-ui .premium-settings-subcard, html[data-theme='dark'] body.premium-ui .premium-settings-subcard, body.dark-mode.premium-ui .premium-settings-subcard, html.dark-mode body.premium-ui .premium-settings-collapse-toggle, html[data-theme='dark'] body.premium-ui .premium-settings-collapse-toggle, body.dark-mode.premium-ui .premium-settings-collapse-toggle, html.dark-mode body.premium-ui .premium-settings-collapse-box, html[data-theme='dark'] body.premium-ui .premium-settings-collapse-box, body.dark-mode.premium-ui .premium-settings-collapse-box, html.dark-mode body.premium-ui .premium-file-input-wrap, html[data-theme='dark'] body.premium-ui .premium-file-input-wrap, html[data-theme='premium-dark'] body.premium-ui .premium-file-input-wrap, html[data-theme='midnight-gold'] body.premium-ui .premium-file-input-wrap, body.dark-mode.premium-ui .premium-file-input-wrap { background: var(--background, rgba(15, 23, 42, 0.7)); border-color: var(--border, rgba(148, 163, 184, 0.18)); color: var(--foreground, #e2e8f0); } html.dark-mode body.premium-ui .premium-settings-hero, html[data-theme='dark'] body.premium-ui .premium-settings-hero, body.dark-mode.premium-ui .premium-settings-hero { background: linear-gradient(135deg, rgba(20,124,187,.16), rgba(15,23,42,.9)); border-color: rgba(56, 189, 248, 0.18); } html.dark-mode body.premium-ui .premium-settings-hero__title, html[data-theme='dark'] body.premium-ui .premium-settings-hero__title, body.dark-mode.premium-ui .premium-settings-hero__title { color: #f8fafc; } html.dark-mode body.premium-ui .premium-settings-tip, html[data-theme='dark'] body.premium-ui .premium-settings-tip, body.dark-mode.premium-ui .premium-settings-tip { background: rgba(30, 64, 175, 0.16); border-color: rgba(96, 165, 250, 0.24); color: #bfdbfe; } body.premium-ui .premium-report-shell { display: grid; gap: 1.5rem; } body.premium-ui .premium-report-table { width: 100% !important; } body.premium-ui .premium-report-date-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 0.15rem; white-space: nowrap; min-width: 85px; } body.premium-ui .premium-report-date-cell__time { display: block; font-size: 12px; } body.premium-ui .premium-report-toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } body.premium-ui .premium-report-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } body.premium-ui .premium-report-summary-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } body.premium-ui .premium-report-metric-card { position: relative; overflow: hidden; padding: 1.25rem; border-radius: 20px; color: #fff; box-shadow: 0 20px 45px rgba(15, 23, 42, 0.14); } body.premium-ui .premium-report-metric-card__label { display: block; margin-bottom: 0.35rem; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; opacity: 0.85; text-transform: uppercase; } body.premium-ui .premium-report-metric-card__value { display: block; font-size: 28px; font-weight: 700; line-height: 1.1; } body.premium-ui .premium-report-metric-card__meta { display: block; margin-top: 0.4rem; font-size: 13px; opacity: 0.92; } body.premium-ui .premium-report-metric-card--blue { background: linear-gradient(135deg, #0f4c81, #2b8ac6); } body.premium-ui .premium-report-metric-card--red { background: linear-gradient(135deg, #a61b3f, #e15368); } body.premium-ui .premium-report-metric-card--green { background: linear-gradient(135deg, #0f6b53, #22b07d); } body.premium-ui .premium-report-metric-card--gold { background: linear-gradient(135deg, #9a6400, #f0aa2b); } body.premium-ui .premium-report-metric-card--slate { background: linear-gradient(135deg, #334155, #64748b); } body.premium-ui .premium-report-metric-card--teal { background: linear-gradient(135deg, #155e75, #22c1c3); } body.premium-ui .premium-report-stat-table > tbody > tr > th, body.premium-ui .premium-report-stat-table > tbody > tr > td { border-top: 1px solid rgba(148, 163, 184, 0.18); padding: 0.95rem 0.75rem; } body.premium-ui .premium-report-stat-table > tbody > tr:first-child > th, body.premium-ui .premium-report-stat-table > tbody > tr:first-child > td { border-top: 0; } body.premium-ui .premium-report-highlight { font-weight: 700; color: #147cbb; } body.premium-ui .premium-report-negative { color: #dc2626; } body.premium-ui .premium-report-total-row { background: rgba(20, 124, 187, 0.08) !important; font-weight: 700; } body.premium-ui .premium-report-kpi-note { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; } body.premium-ui .premium-report-section-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } body.premium-ui .premium-report-empty { padding: 2rem; text-align: center; color: #64748b; } body.premium-ui .premium-report-inline-spacer { margin-top: 0.75rem; } body.premium-ui .premium-report-header-note { color: #64748b; font-size: 0.95em; font-weight: 600; } body.premium-ui .premium-report-modal-loader { padding: 2.5rem 1rem; text-align: center; } html.dark-mode body.premium-ui .premium-report-total-row, html[data-theme="dark"] body.premium-ui .premium-report-total-row, body.dark-mode.premium-ui .premium-report-total-row { background: rgba(96, 165, 250, 0.12) !important; } html.dark-mode body.premium-ui .premium-report-empty, html[data-theme="dark"] body.premium-ui .premium-report-empty, body.dark-mode.premium-ui .premium-report-empty, html.dark-mode body.premium-ui .premium-report-header-note, html[data-theme="dark"] body.premium-ui .premium-report-header-note, body.dark-mode.premium-ui .premium-report-header-note { color: #cbd5e1; } /* -------------------------------------------------------------------------- Premium Header Notifications + Select2 Width Hardening -------------------------------------------------------------------------- */ body.premium-ui .app-header { position: relative; z-index: 1100; overflow: visible; isolation: isolate; } body.premium-ui .app-header-actions, body.premium-ui .app-header-notifications, body.premium-ui .app-header-notification, body.premium-ui .navbar-custom-menu, body.premium-ui .navbar-nav { position: relative; overflow: visible; } body.premium-ui .app-header-notification-menu { left: auto !important; right: 0 !important; min-width: 20rem; max-width: min(24rem, calc(100vw - 24px)); max-height: 40vh; overflow-x: hidden; overflow-y: auto; z-index: 2147483000 !important; border: 1px solid var(--premium-border); border-radius: var(--premium-radius-md); box-shadow: 0 20px 44px rgba(15, 23, 42, 0.18); } body.premium-ui .app-header-notification-list { max-height: none; } body.premium-ui .sell-location-select2-dropdown { box-sizing: border-box; max-width: 100%; } body.premium-ui #select_location_id + .select2-container { width: 100% !important; max-width: 100% !important; } /* Preserve semantic status colors from feature markup instead of premium recoloring. */ body.premium-ui .label-success, body.premium-ui .bg-green, body.premium-ui .bg-success { background: #00a65a !important; color: #ffffff !important; border-color: #00a65a !important; } body.premium-ui .label-danger, body.premium-ui .bg-red, body.premium-ui .bg-danger { background: #dd4b39 !important; color: #ffffff !important; border-color: #dd4b39 !important; } body.premium-ui .label-warning, body.premium-ui .bg-yellow, body.premium-ui .bg-warning { background: #f39c12 !important; color: #ffffff !important; border-color: #f39c12 !important; } body.premium-ui .label-info, body.premium-ui .bg-aqua, body.premium-ui .bg-blue, body.premium-ui .bg-info { background: #00c0ef !important; color: #ffffff !important; border-color: #00c0ef !important; } /* -------------------------------------------------------------------------- Unified Select + Select2 Form System -------------------------------------------------------------------------- */ body.premium-ui { --premium-select-height: 40px; --premium-select-radius: var(--premium-radius-md); --premium-select-padding-x: 12px; --premium-select-padding-right: 38px; --premium-select-border: #c9d8e8; --premium-select-border-hover: #b8cbe0; --premium-select-bg: #ffffff; --premium-select-text: #334155; --premium-select-placeholder: #64748b; --premium-select-disabled-bg: #f8fafc; --premium-select-disabled-text: #94a3b8; --premium-select-error: #dc2626; --premium-select-error-ring: rgba(220, 38, 38, 0.14); --premium-select-dropdown-shadow: 0 20px 44px rgba(15, 23, 42, 0.16); --premium-select-option-hover: #f8fbff; --premium-select-option-selected: #ecf6fd; --premium-select-tag-bg: #e0f2fe; --premium-select-tag-border: #bae6fd; --premium-select-tag-text: #0f5b8a; } body.premium-ui select.form-control, body.premium-ui .dataTables_wrapper .dataTables_length select, body.premium-ui .select2-container--default .select2-selection--single, body.premium-ui .select2-container--default .select2-selection--multiple, body.premium-ui .select2-dropdown, body.premium-ui .select2-search--dropdown .select2-search__field { border: 1px solid var(--premium-select-border) !important; border-radius: var(--premium-select-radius) !important; background: var(--premium-select-bg) !important; color: var(--premium-select-text) !important; box-shadow: none !important; } body.premium-ui select.form-control, body.premium-ui .dataTables_wrapper .dataTables_length select, body.premium-ui .select2-container--default .select2-selection--single { min-height: var(--premium-select-height) !important; height: var(--premium-select-height) !important; } body.premium-ui .select2-container--default .select2-selection--multiple { min-height: var(--premium-select-height) !important; height: auto !important; max-height: none !important; overflow: hidden !important; padding: 4px 36px 4px 8px !important; } body.premium-ui select.form-control, body.premium-ui .dataTables_wrapper .dataTables_length select { padding: 8px var(--premium-select-padding-right) 8px var(--premium-select-padding-x) !important; line-height: 1.4 !important; background-color: var(--premium-select-bg) !important; } body.premium-ui select.form-control:not([multiple]):not([size]), body.premium-ui .dataTables_wrapper .dataTables_length select { background-position: right 12px center !important; background-size: 16px !important; } body.premium-ui .select2-container { width: 100% !important; } body.premium-ui .select2-container--default .select2-selection--single { display: flex !important; align-items: center !important; padding: 0 38px 0 12px !important; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease !important; } body.premium-ui .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 0 !important; padding-right: 0 !important; line-height: 1.4 !important; color: var(--premium-select-text) !important; } body.premium-ui .select2-container--default .select2-selection--single .select2-selection__placeholder, body.premium-ui .select2-container--default .select2-search--inline .select2-search__field::placeholder, body.premium-ui .select2-search--dropdown .select2-search__field::placeholder { color: var(--premium-select-placeholder) !important; } body.premium-ui .select2-container--default .select2-selection--single .select2-selection__arrow { display: flex !important; align-items: center; justify-content: center; width: 32px !important; height: 100% !important; right: 4px !important; } body.premium-ui .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--premium-select-placeholder) transparent transparent transparent !important; border-style: solid !important; border-width: 5px 5px 0 5px !important; margin: 0 !important; position: static !important; } body.premium-ui .select2-container--open.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--premium-select-placeholder) transparent !important; border-width: 0 5px 5px 5px !important; } body.premium-ui .select2-container--default .select2-selection--single .select2-selection__clear { color: var(--premium-select-placeholder) !important; font-size: 16px; line-height: 1; margin-right: 8px !important; } body.premium-ui .select2-container--default .select2-selection--multiple .select2-selection__rendered { display: flex !important; flex-wrap: wrap; gap: 4px; align-items: center; padding: 0 !important; } body.premium-ui .select2-container--default .select2-selection--multiple .select2-selection__choice { margin: 0 !important; padding: 2px 8px !important; border-radius: 999px !important; background: var(--premium-select-tag-bg) !important; border: 1px solid var(--premium-select-tag-border) !important; color: var(--premium-select-tag-text) !important; line-height: 1.4 !important; } body.premium-ui .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: inherit !important; margin-right: 6px; border: 0 !important; } body.premium-ui .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field { margin: 0 !important; height: 28px !important; min-height: 28px !important; color: var(--premium-select-text) !important; } body.premium-ui select.form-control:hover, body.premium-ui .dataTables_wrapper .dataTables_length select:hover, body.premium-ui .select2-container--default:hover .select2-selection--single, body.premium-ui .select2-container--default:hover .select2-selection--multiple { border-color: var(--premium-select-border-hover) !important; } body.premium-ui select.form-control:focus, body.premium-ui .dataTables_wrapper .dataTables_length select:focus, body.premium-ui .select2-container--default.select2-container--open .select2-selection--single, body.premium-ui .select2-container--default.select2-container--focus .select2-selection--single, body.premium-ui .select2-container--default.select2-container--focus .select2-selection--multiple, body.premium-ui .select2-search--dropdown .select2-search__field:focus { border-color: rgba(20, 124, 187, 0.5) !important; box-shadow: 0 0 0 3px var(--premium-primary-soft) !important; outline: none !important; } body.premium-ui .has-error select.form-control, body.premium-ui .has-error .select2-container--default .select2-selection--single, body.premium-ui .has-error .select2-container--default .select2-selection--multiple, body.premium-ui select.form-control.is-invalid, body.premium-ui .is-invalid + .select2-container .select2-selection--single, body.premium-ui .is-invalid + .select2-container .select2-selection--multiple { border-color: var(--premium-select-error) !important; } body.premium-ui .has-error select.form-control:focus, body.premium-ui .has-error .select2-container--default.select2-container--focus .select2-selection--single, body.premium-ui .has-error .select2-container--default.select2-container--focus .select2-selection--multiple, body.premium-ui select.form-control.is-invalid:focus, body.premium-ui .is-invalid + .select2-container.select2-container--focus .select2-selection--single, body.premium-ui .is-invalid + .select2-container.select2-container--focus .select2-selection--multiple { box-shadow: 0 0 0 3px var(--premium-select-error-ring) !important; } body.premium-ui select.form-control[disabled], body.premium-ui select.form-control[readonly], body.premium-ui .select2-container--default.select2-container--disabled .select2-selection--single, body.premium-ui .select2-container--default.select2-container--disabled .select2-selection--multiple { background: var(--premium-select-disabled-bg) !important; color: var(--premium-select-disabled-text) !important; border-color: #dbe4ef !important; cursor: not-allowed !important; opacity: 1 !important; } body.premium-ui .select2-container--default.select2-container--disabled .select2-selection__rendered, body.premium-ui .select2-container--default.select2-container--disabled .select2-selection__placeholder, body.premium-ui .select2-container--default.select2-container--disabled .select2-selection__choice { color: var(--premium-select-disabled-text) !important; } body.premium-ui .select2-dropdown { border-radius: var(--premium-select-radius) !important; box-shadow: var(--premium-select-dropdown-shadow) !important; overflow: hidden !important; z-index: 9999999 !important; } body.premium-ui .select2-search--dropdown { padding: 8px !important; background: var(--premium-select-bg) !important; border-bottom: 1px solid #edf2f7 !important; } body.premium-ui .select2-search--dropdown .select2-search__field { min-height: 36px !important; padding: 8px 10px !important; } body.premium-ui .select2-results { background: var(--premium-select-bg) !important; } body.premium-ui .select2-results__options { padding: 6px !important; } body.premium-ui .select2-results__option { padding: 9px 10px !important; border-radius: 6px !important; color: var(--premium-select-text) !important; background: transparent !important; } body.premium-ui .select2-results__option[aria-disabled='true'] { color: var(--premium-select-disabled-text) !important; } body.premium-ui .select2-container--default .select2-results__option[aria-selected='true'] { background: var(--premium-select-option-selected) !important; color: var(--premium-select-tag-text) !important; } body.premium-ui .select2-container--default .select2-results__option--highlighted[aria-selected], body.premium-ui .select2-results__option:hover { background: var(--premium-primary) !important; color: #ffffff !important; } body.premium-ui .select2-container--default .select2-results__option--highlighted[aria-selected] *, body.premium-ui .select2-results__option:hover * { color: inherit !important; } /* -------------------------------------------------------------------------- Header seam + connected dropdown polish -------------------------------------------------------------------------- */ body.premium-ui { --app-header-sidebar-bleed: 250px; --app-dropdown-connected-radius: var(--premium-radius-md); --app-dropdown-option-hover-bg: #f3f8ff; --app-dropdown-option-selected-bg: #e8f3ff; --app-dropdown-option-selected-text: var(--premium-primary); --app-dropdown-option-accent: rgba(20, 124, 187, 0.78); } body.sidebar-collapse.premium-ui { --app-header-sidebar-bleed: 86px; } body.premium-ui .app-header--blended { border-bottom: 0 !important; box-shadow: none !important; background-image: linear-gradient(90deg, rgba(15, 23, 42, 0.94) 0, rgba(15, 23, 42, 0.94) var(--app-header-sidebar-bleed), rgba(15, 23, 42, 0) calc(var(--app-header-sidebar-bleed) + 72px) ), linear-gradient(135deg, #1d4ed8 0%, #2563eb 42%, #7c3aed 100%) !important; } body.premium-ui .app-header-notification-badge:empty { display: none !important; } body.premium-ui .app-header-search-input { border-top-right-radius: 999px !important; border-bottom-right-radius: 999px !important; } body.premium-ui .dropdown-menu, body.premium-ui .tw-dw-menu, body.premium-ui .select2-dropdown { overflow: hidden; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-bottom-left-radius: var(--app-dropdown-connected-radius) !important; border-bottom-right-radius: var(--app-dropdown-connected-radius) !important; } body.premium-ui .dropdown-menu > li > a, body.premium-ui .tw-dw-menu > li > a, body.premium-ui .select2-results__option { position: relative; transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease; } body.premium-ui .dropdown-menu > li > a:hover, body.premium-ui .dropdown-menu > li > a:focus, body.premium-ui .tw-dw-menu > li > a:hover, body.premium-ui .tw-dw-menu > li > a:focus, body.premium-ui .select2-results__option--highlighted[aria-selected], body.premium-ui .select2-results__option--highlighted[aria-selected="false"] { background: var(--app-dropdown-option-hover-bg) !important; color: var(--premium-text) !important; box-shadow: inset 3px 0 0 rgba(20, 124, 187, 0.34); } body.premium-ui .dropdown-menu > .active > a, body.premium-ui .dropdown-menu > .active > a:hover, body.premium-ui .tw-dw-menu > li.active > a, body.premium-ui .tw-dw-menu > li.active > a:hover, body.premium-ui .select2-results__option[aria-selected="true"] { background: var(--app-dropdown-option-selected-bg) !important; color: var(--app-dropdown-option-selected-text) !important; box-shadow: inset 3px 0 0 var(--app-dropdown-option-accent); } body.premium-ui .dropdown-menu > li > a:focus-visible, body.premium-ui .tw-dw-menu > li > a:focus-visible, body.premium-ui .select2-results__option:focus-visible { outline: none !important; box-shadow: inset 3px 0 0 var(--app-dropdown-option-accent), 0 0 0 3px rgba(20, 124, 187, 0.16) !important; } /* -------------------------------------------------------------------------- Force themed app header surface -------------------------------------------------------------------------- */ body.premium-ui .app-header.app-header--blended { color: #ffffff; background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 42%, #7c3aed 100%) !important; background-color: #1d4ed8 !important; } body.premium-ui .app-header.app-header--blended, body.premium-ui .app-header.app-header--blended > div, body.premium-ui .app-header.app-header--blended .app-header-actions { color: #ffffff !important; } /* -------------------------------------------------------------------------- Final select arrow normalization + stable header search visibility -------------------------------------------------------------------------- */ body.premium-ui select.form-control, body.premium-ui .dataTables_wrapper .dataTables_length select { background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 16px !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; } body.premium-ui select.form-control::-ms-expand, body.premium-ui .dataTables_wrapper .dataTables_length select::-ms-expand { display: none !important; } body.premium-ui .select2-container--default .select2-selection--single, body.premium-ui .select2-container--default .select2-selection--multiple { background-image: none !important; } body.premium-ui .select2-container--default .select2-selection--single::before, body.premium-ui .select2-container--default .select2-selection--single::after, body.premium-ui .select2-container--default .select2-selection--multiple::before, body.premium-ui .select2-container--default .select2-selection--multiple::after { content: none !important; display: none !important; } body.premium-ui .select2-container--default .select2-selection--single .select2-selection__arrow { display: flex !important; background: none !important; } body.premium-ui .select2-container--default .select2-selection--multiple { padding-right: 8px !important; } body.premium-ui .app-header-search-shell .app-header-search-panel { width: 0 !important; max-width: 0 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } body.premium-ui .app-header-search-shell.is-open .app-header-search-panel { width: clamp(160px, 34vw, 600px) !important; max-width: min(600px, 70vw) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* ========================================================================== RESTORE ROUNDED CORNERS (Forms, Select2, Dropdowns, Input Groups) ========================================================================== */ /* 1. Fully round Dropdown Menus and Select2 lists (removes the flat tops) */ body.premium-ui .dropdown-menu, body.premium-ui .tw-dw-menu, body.premium-ui .select2-dropdown { border-radius: 12px !important; margin-top: 4px !important; /* Adds a small gap so it floats nicely */ } /* 2. Standardize all individual inputs, selects, and Select2 containers */ body.premium-ui .form-control, body.premium-ui select.form-control, body.premium-ui .input-group-addon, body.premium-ui .input-group-text, body.premium-ui .select2-container--default .select2-selection--single, body.premium-ui .select2-container--default .select2-selection--multiple { border-radius: 10px !important; } /* 3. Keep Input Groups connected but ensure outer corners are perfectly rounded */ body.premium-ui .input-group > .form-control:not(:first-child), body.premium-ui .input-group > .input-group-addon:not(:first-child), body.premium-ui .input-group > .select2-container:not(:first-child) .select2-selection { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } body.premium-ui .input-group > .form-control:not(:last-child), body.premium-ui .input-group > .input-group-addon:not(:last-child), body.premium-ui .input-group > .select2-container:not(:last-child) .select2-selection { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } body.premium-ui .input-group > .form-control:first-child, body.premium-ui .input-group > .input-group-addon:first-child, body.premium-ui .input-group > .select2-container:first-child .select2-selection { border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; } body.premium-ui .input-group > .form-control:last-child, body.premium-ui .input-group > .input-group-addon:last-child, body.premium-ui .input-group > .select2-container:last-child .select2-selection { border-top-right-radius: 10px !important; border-bottom-right-radius: 10px !important; } /* ============================================================================= GLOBAL DARK-MODE + THEME-AWARE OVERRIDES Added systematically — do not duplicate or split across files. SECTION A: Tailwind hardcoded color utility overrides for dark mode SECTION B: Gradient button → theme-primary normalization (30+ buttons) SECTION C: app-premium.css hardcoded hex → design token corrections ============================================================================= */ /* -------------------------------------------------------------------------- A. Dark-mode Tailwind utility overrides Tailwind compiles to hardcoded values that don't respond to .dark-mode. These selectors re-map the most harmful hardcoded utilities to CSS tokens so every page gains dark-mode readability without touching Blade files. -------------------------------------------------------------------------- */ /* Text colors */ .dark-mode .tw-text-black { color: var(--text-main) !important; } .dark-mode .tw-text-gray-900 { color: var(--text-main) !important; } .dark-mode .tw-text-gray-800 { color: var(--text-main) !important; } .dark-mode .tw-text-gray-700 { color: var(--text-main) !important; } .dark-mode .tw-text-gray-600 { color: var(--text-muted) !important; } .dark-mode .tw-text-gray-500 { color: var(--text-muted) !important; } .dark-mode .tw-text-gray-400 { color: var(--text-muted) !important; } /* Background colors — exclude interactive elements that deliberately need white */ .dark-mode .tw-bg-white:not(.tw-dw-btn):not(button):not(a):not(input):not(select) { background-color: var(--surface-raised) !important; } /* Ring / border utilities */ .dark-mode .tw-ring-gray-200 { --tw-ring-color: var(--border-color) !important; } .dark-mode .tw-ring-gray-300 { --tw-ring-color: var(--border-color) !important; } /* Hover utilities */ .dark-mode .hover\:tw-bg-gray-100:hover { background-color: var(--surface-muted) !important; } .dark-mode .hover\:tw-bg-gray-50:hover { background-color: var(--surface-muted) !important; } /* Status / colored icon backgrounds in dark mode */ .dark-mode .tw-bg-sky-100 { background-color: rgba(20, 124, 187, 0.18) !important; } .dark-mode .tw-bg-sky-50 { background-color: rgba(20, 124, 187, 0.10) !important; } .dark-mode .tw-text-sky-500, .dark-mode .tw-text-sky-600 { color: var(--primary) !important; } .dark-mode .tw-bg-green-100 { background-color: rgba(34, 197, 94, 0.18) !important; } .dark-mode .tw-bg-green-50 { background-color: rgba(34, 197, 94, 0.10) !important; } .dark-mode .tw-text-green-500, .dark-mode .tw-text-green-600 { color: var(--success) !important; } .dark-mode .tw-bg-amber-100, .dark-mode .tw-bg-yellow-100 { background-color: rgba(252, 164, 36, 0.18) !important; } .dark-mode .tw-text-amber-500, .dark-mode .tw-text-yellow-500 { color: var(--warning) !important; } .dark-mode .tw-bg-red-100 { background-color: rgba(239, 68, 68, 0.18) !important; } .dark-mode .tw-text-red-500, .dark-mode .tw-text-red-600 { color: var(--danger) !important; } .dark-mode .tw-bg-purple-100 { background-color: rgba(139, 92, 246, 0.18) !important; } .dark-mode .tw-text-purple-500 { color: #a78bfa !important; } .dark-mode .tw-bg-indigo-100 { background-color: rgba(99, 102, 241, 0.18) !important; } .dark-mode .tw-text-indigo-500 { color: #818cf8 !important; } /* Table stripe / alternate rows */ .dark-mode .tw-bg-gray-50, .dark-mode .tw-bg-gray-100 { background-color: var(--surface-muted) !important; } /* Dividers and borders */ .dark-mode .tw-border-gray-200, .dark-mode .tw-border-gray-300 { border-color: var(--border-color) !important; } .dark-mode .tw-divide-gray-200 > :not(:first-child) { border-color: var(--border-color) !important; } /* -------------------------------------------------------------------------- B. Gradient action button → theme-primary normalization Every "Add" button in 30+ views uses tw-from-indigo-600 tw-to-blue-500. We override the Tailwind gradient CSS custom properties to inject the active theme's primary color without touching any Blade file. -------------------------------------------------------------------------- */ .tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600, a.tw-dw-btn.tw-from-indigo-600, button.tw-dw-btn.tw-from-indigo-600 { --tw-gradient-from: var(--primary) !important; --tw-gradient-to: var(--primary-dark) !important; --tw-gradient-stops: var(--primary), var(--primary-dark) !important; border-color: transparent !important; color: #fff !important; } .tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600:hover, .tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600:focus { --tw-gradient-from: var(--primary-dark) !important; --tw-gradient-to: var(--primary) !important; } /* -------------------------------------------------------------------------- C. Fix hardcoded hex values inside app-premium.css premium-ui rules Replace literals that were written before tokens existed. -------------------------------------------------------------------------- */ body.premium-ui .box-title, body.premium-ui .card-title { color: var(--text-main); } body.premium-ui .box-header, body.premium-ui .card-header { background: var(--surface-raised) !important; border-bottom-color: var(--border-color) !important; } body.premium-ui .premium-panel--filters .box-title a, body.premium-ui .premium-panel--filters .box-title a:hover { color: var(--text-main); } body.premium-ui .premium-panel, body.premium-ui .box, body.premium-ui .card { border-color: var(--border-color); } /* FIX: FORM INPUT STYLE CONSISTENCY */ body.premium-ui .form-control, body.premium-ui .input-group .form-control, body.premium-ui select.form-control { border-radius: 8px !important; font-size: 13px !important; border: 1px solid rgba(148, 163, 184, 0.5) !important; transition: border-color .15s ease, box-shadow .15s ease !important; } body.premium-ui .input-group > .form-control:not(:last-child) { border-radius: 8px 0 0 8px !important; } body.premium-ui .input-group > .form-control:last-child, body.premium-ui .input-group > .input-group-addon + .form-control { border-radius: 0 8px 8px 0 !important; } body.premium-ui .form-control:focus, body.premium-ui select.form-control:focus { border-color: var(--primary, #147cbb) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #147cbb) 12%, transparent) !important; outline: none !important; } body.premium-ui label { font-size: 13px !important; font-weight: 500 !important; } /* FIX 6: SIDEBAR MENU ITEM TEXT TRUNCATION */ body.premium-ui .side-bar a span, body.premium-ui .side-bar .nav-item a span, body.premium-ui .side-bar .tree-menu a span, body.premium-ui .side-bar a .nav-text, body.premium-ui .side-bar [class*="menu"] a span { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: break-word; } /* FIX 7: DARK MODE TOGGLE BUTTON — NEUTRAL COLOR */ body.premium-ui #theme-toggle, body.premium-ui button[data-theme-toggle] { background-color: rgba(100, 116, 139, 0.15) !important; border-color: rgba(100, 116, 139, 0.3) !important; } body.premium-ui #theme-toggle:hover, body.premium-ui button[data-theme-toggle]:hover { background-color: rgba(100, 116, 139, 0.25) !important; } /* FIX 8: INACTIVE TAB CONTRAST (WCAG AA) */ body.premium-ui .nav-tabs > li > a, body.premium-ui .nav-tabs .nav-link:not(.active) { color: #475569 !important; } body.premium-ui .nav-tabs > li > a:hover, body.premium-ui .nav-tabs .nav-link:not(.active):hover { color: #1e293b !important; } /* FIX 10: INLINE ALERT DISMISS BUTTON */ body.premium-ui .alert .close { position: absolute; top: 0.5rem; right: 0.75rem; opacity: 0.6; font-size: 1.1rem; line-height: 1; color: inherit; background: none; border: none; cursor: pointer; } body.premium-ui .alert .close:hover { opacity: 1; }