/* ================================================================ * AIO ERP — css/bundle-foundation.css * Auto-generated by: php artisan css:bundle * Generated at: 2026-06-24 23:07:52 * 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: var(--brand-font-sans); --font-display: var(--brand-font-display); --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; /* Semantic type scale — role-based aliases (mirrors brand-tokens.css) */ /* Headings use fluid clamp() for responsive scaling without media queries. */ --type-display: clamp(1.75rem, 3vw + 1rem, 2.25rem); --type-headline: clamp(1.5rem, 2.5vw + 0.75rem, 1.875rem); --type-title: clamp(1.25rem, 2vw + 0.5rem, 1.5rem); --type-subhead: clamp(1.1rem, 1.5vw + 0.5rem, 1.25rem); --type-body: var(--font-size-md, 1rem); --type-small: var(--font-size-sm, 0.875rem); --type-caption: var(--font-size-xs, 0.75rem); /* Semantic leading scale */ --leading-tight: var(--line-height-tight); --leading-snug: var(--line-height-snug); --leading-body: var(--line-height-normal); --leading-relaxed: var(--line-height-relaxed); } /* ============================================================================= 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 --- Uses semantic type tokens so headings scale with the token layer. Headings use --font-display (can differ from body font for brand expression). !important removed — let the cascade work; utility classes (.aio-text-*) can override when needed via their own !important. */ h1, .h1 { font-family: var(--font-display); font-size: var(--type-display); font-weight: var(--font-weight-bold, 700); } h2, .h2 { font-family: var(--font-display); font-size: var(--type-headline); font-weight: var(--font-weight-bold, 700); } h3, .h3 { font-family: var(--font-display); font-size: var(--type-title); font-weight: var(--font-weight-semibold, 600); } h4, .h4 { font-family: var(--font-display); font-size: var(--type-subhead); font-weight: var(--font-weight-semibold, 600); } h5, .h5 { font-family: var(--font-display); font-size: var(--type-body); font-weight: var(--font-weight-semibold, 600); } h6, .h6 { font-family: var(--font-display); font-size: var(--type-small); 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; } /* ============================================================================= AIO ERP — Semantic Typography Utilities (.aio-text-*) ------------------------------------------------------------------------------ Role-based utility classes that consume the semantic token layer. Use these instead of inline style="font-size:..." so components stay theme-aware and maintainable. ============================================================================= */ .aio-text-display { font-size: var(--type-display) !important; line-height: var(--leading-tight) !important; } .aio-text-headline { font-size: var(--type-headline) !important; line-height: var(--leading-tight) !important; } .aio-text-title { font-size: var(--type-title) !important; line-height: var(--leading-snug) !important; } .aio-text-subhead { font-size: var(--type-subhead) !important; line-height: var(--leading-snug) !important; } .aio-text-body { font-size: var(--type-body) !important; line-height: var(--leading-body) !important; } .aio-text-small { font-size: var(--type-small) !important; line-height: var(--leading-body) !important; } .aio-text-caption { font-size: var(--type-caption) !important; line-height: var(--leading-body) !important; } /* Weight companions (keep separate so size + weight can be composed) */ .aio-font-light { font-weight: var(--font-weight-light, 300) !important; } .aio-font-normal { font-weight: var(--font-weight-normal, 400) !important; } .aio-font-medium { font-weight: var(--font-weight-medium, 500) !important; } .aio-font-semibold { font-weight: var(--font-weight-semibold, 600) !important; } .aio-font-bold { font-weight: var(--font-weight-bold, 700) !important; } /* ============================================================================= AIO ERP — Font Rendering & OpenType Optimizations ------------------------------------------------------------------------------ One-liners that dramatically improve perceived quality: - antialiased = crisper text on macOS / Retina - optimizeLegibility = better kerning & ligatures - font-variant-numeric = tabular figures for financial data ============================================================================= */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Light text on dark backgrounds gets heavier — keep it crisp */ .dark-mode body, html[data-color-mode="dark"] body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Tabular numbers: currency amounts, quantities, codes — prevents jitter */ td.numeric, td.price, td.qty, .aio-tabular-nums { font-variant-numeric: tabular-nums; } /* Slashed zero for reference numbers, codes */ .aio-slashed-zero { font-variant-numeric: tabular-nums slashed-zero; } /* ============================================================================= AIO ERP — Print Font Quarantine ------------------------------------------------------------------------------ Receipts and print output should NEVER use the user's decorative brand font. Thermal printers, PDF generators, and paper need legible, compact fonts. This rule overrides --font-primary for all @media print contexts. ============================================================================= */ @media print { body, .receipt, .invoice, .print_section { font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important; font-size: 12pt !important; line-height: 1.4 !important; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important; } /* Force all children to inherit the print-safe font */ body *, .receipt *, .invoice *, .print_section * { font-family: inherit !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: 36px; /* 36px — unified with select2-premium.css */ /* --- 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, var(--brand-font-sans)); -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; } .treeview-menu a { padding-left: 20px !important; font-size: 13px !important; opacity: 0.8; transition: opacity 0.2s; } .treeview-menu a:hover { opacity: 1; } .treeview-menu a::before { content: "• "; margin-right: 5px; color: var(--primary); font-weight: bold; } /* 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, var(--brand-font-sans)) !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):not(textarea):not(.select2-search__field) { 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; } /* btn-default flanking buttons (icon-only) should match the addon tinted background */ .input-group-btn > .btn.btn-default { background-color: var(--input-addon-bg, #f8fafc) !important; } /* 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 inside input-group-btn — inherit the btn corner rules */ .input-group-btn:last-child > .select2-container .select2-selection--single, .input-group-btn:last-child > .select2-container .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; } .input-group-btn:first-child > .select2-container .select2-selection--single, .input-group-btn:first-child > .select2-container .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; } /* 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 — DELEGATED to select2-premium.css for unified styling */ .select2-container--open { z-index: 9999999 !important; } /* File Inputs */ .file-input { width: 100%; position: relative; display: table; } .file-input .file-caption { height: var(--input-height) !important; min-height: var(--input-height) !important; margin-bottom: 0 !important; } .file-input .btn-file { height: var(--input-height) !important; min-height: var(--input-height) !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 — select2 handled by select2-premium.css */ .input-group > .select2-container, .input-group > .select2-container--default, .input-group > .select2-container--classic { height: auto !important; min-height: auto !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-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 ========================================================================== */ /* ========================================================================== 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 ONLY the active .print_section container(s) (receipts, reports, etc.). Previously this block revealed .print_section but never hid the rest of the page, so the app shell + DataTable printed alongside the receipt AND the on-screen table was left mis-sized after the print dialog closed. Hiding everything else via visibility (not display) keeps the printed content's own layout intact, and absolute positioning lifts it out of the now-hidden chrome's flow so it doesn't create blank leading pages. Kept as .print_section (not #receipt_section) so the dedicated report/print pages that use their own .print_section still print. */ body * { visibility: hidden !important; } .print_section, .print_section * { visibility: visible !important; } .print_section { display: block !important; position: absolute !important; left: 0; top: 0; width: 100% !important; } .print_section .box, .print_section .table, .print_section .product_box { box-shadow: none !important; border: 1px solid #ddd !important; } #toast-container, ::-webkit-scrollbar, a:after { display: none !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: var(--input-height) !important; } } /* ========================================================================== SELECT2: TRANSPARENCY FIX + ROUNDED CORNERS ========================================================================== */ /* Select2 Dropdown — DELEGATED to select2-premium.css for unified styling */ .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; border-bottom-left-radius: 8px !important; border-bottom-right-radius: 8px !important; overflow: hidden !important; } .select2-search--dropdown { background-color: #ffffff !important; padding: 8px !important; border-bottom: 1px solid #f3f4f6; } .select2-search--dropdown .select2-search__field { background-color: #ffffff !important; border: 1px solid #d1d5db !important; border-radius: 6px !important; box-shadow: none !important; color: #333 !important; } .select2-results { background-color: #ffffff !important; } .select2-results__option { background-color: #ffffff !important; color: #333 !important; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #147cbb !important; color: #ffffff !important; } .select2-results__options { overflow-x: auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } .select2-results__option { width: max-content !important; min-width: 100% !important; box-sizing: border-box !important; } /* Balance Color Fix for Dropdowns */ .balance-debit { color: #d9534f !important; font-weight: bold; } .balance-credit { color: #28a745 !important; font-weight: bold; } .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; -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; } /* ========================================================================== INPUT-GROUP BORDER-RADIUS CORRECTIONS Fix three specific junctions where inner-edge corners are wrongly rounded. ========================================================================== */ /* 1. Product search bar: the text input sits between two .input-group-btn elements so ALL four corners must be flat (no left or right rounding). */ #search_product_input_group #search_product { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* 2. Payment Terms: the number input is immediately followed by a select inside .input-group-btn, so its right corners must be flat. */ .input-group [name="pay_term_number"] { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* 3. Quick Add (+) button: last element in the product search input-group — ensure right corners are rounded to close the group cleanly. */ .pos_add_quick_product { 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; } /* 4. Textarea addon height: ensure the :has() flex stretch rule also covers the inner flex alignment so the icon addon grows with the textarea. Redundant guard for browsers where :has() computes display:table first. */ .input-group:has(textarea.form-control) { display: flex !important; align-items: stretch !important; flex-wrap: nowrap !important; } .input-group:has(textarea.form-control) > .input-group-addon { display: flex !important; align-items: center !important; justify-content: center !important; height: auto !important; min-height: unset !important; align-self: stretch !important; } .input-group:has(textarea.form-control) > textarea.form-control { flex: 1 1 auto !important; width: 1% !important; min-width: 0 !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; } /* ----------------------------------------------------------------------------- AIO premium modal header — tokenized replacement for the repeated Tailwind gradient-header utility soup baked into module modals (Accounting/Crm/Fleet). Markup:

Title

Defined after .modal-header so the gradient wins the !important cascade. -------------------------------------------------------------------------- */ /* Selectors are prefixed with .modal-content and compound .modal-header.aio-modal-header to outrank theme rules like `body.premium-ui .modal-header { ... !important }` (specificity 0,2,1) regardless of theme. */ .modal-content .modal-header.aio-modal-header { position: relative; overflow: hidden; border: 0 !important; border-bottom: 0 !important; /* Square top — the .modal-content (overflow:hidden + its own radius) clips the header to whatever corner radius the modal uses, so the gradient never leaves a white corner regardless of --radius-lg vs --premium-radius-lg vs tw-rounded. */ border-radius: 0 !important; background: linear-gradient(to right, var(--primary, #147cbb), var(--primary-dark, #0e5a8a)) !important; padding: var(--space-4, 16px) var(--space-6, 24px) !important; /* Make the header a flex row so .aio-modal-header-icon + .modal-title sit side-by-side whether the icon is a direct child of the header (sibling pattern) or nested inside .modal-title (icon-in-h4 pattern). The close button is absolutely positioned so it does not participate in the flex flow. */ display: flex !important; align-items: center; gap: var(--space-2, 8px); } /* Guarantee the clip on any modal-content that hosts the gradient header. */ .modal-content:has(> .modal-header.aio-modal-header), .modal-content:has(> form > .modal-header.aio-modal-header) { overflow: hidden !important; } .modal-content .modal-header.aio-modal-header::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.10), transparent); } .modal-content .modal-header.aio-modal-header .modal-title { position: relative; z-index: 1; flex: 1 1 0; /* grow to fill space left by the icon flex-item */ min-width: 0; /* allow text truncation */ display: flex; /* keeps icon-inside-h4 pattern working */ align-items: center; gap: var(--space-2, 8px); /* leave room for the absolutely-positioned close button */ padding-right: 44px; font-size: var(--font-size-md, 16px); font-weight: var(--font-weight-semibold, 600) !important; letter-spacing: 0.02em; color: var(--primary-foreground, #ffffff) !important; } .modal-content .modal-header.aio-modal-header .aio-modal-header-icon { display: inline-flex; height: 28px; width: 28px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--radius-md, 10px); background: rgba(255, 255, 255, 0.20); color: var(--primary-foreground, #ffffff); font-size: var(--font-size-sm, 14px); } .modal-content .modal-header.aio-modal-header .close { position: absolute; right: 16px; top: 16px; z-index: 5; display: flex; height: 32px; width: 32px; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-full, 9999px); background: rgba(255, 255, 255, 0.20) !important; color: var(--primary-foreground, #ffffff) !important; opacity: 0.8; text-shadow: none; transition: all var(--duration-fast, 150ms) ease; } .modal-content .modal-header.aio-modal-header .close:hover, .modal-content .modal-header.aio-modal-header .close:focus { background: rgba(255, 255, 255, 0.30) !important; opacity: 1; color: var(--primary-foreground, #ffffff) !important; } /* Square the footer's bottom corners too, so the modal-content's overflow:hidden clips them to its own radius (the footer's larger --premium radius otherwise leaves white gaps at the bottom corners, mirroring the header fix). */ .modal-content:has(.modal-header.aio-modal-header) .modal-footer { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* Payment modal summary/detail card — the contact + balance/amount-due block at the top of the add/edit/view payment modals. Tokenized replacement for the repeated inline hex so the card is identical across all payment surfaces. */ .aio-payment-summary { background: var(--bg-card-alt, #f8f9fe); border: 1px solid var(--border-color, #d2d6de); padding: var(--space-4, 16px); border-radius: var(--radius-md, 10px); } /* ============================================================================= 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: wrap; overflow: visible !important; scrollbar-width: none; -ms-overflow-style: none; } body.premium-ui .nav-tabs-custom > .nav-tabs::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } 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 > .tab-content { padding: 20px 18px 18px; } body.premium-ui .location-settings-tabs > .tab-content { padding: 0; } body.premium-ui .location-settings-tabs .location-settings-pane { padding: 20px 18px 18px; } body.premium-ui .location-settings-tabs .location-settings-pane > .row { margin-left: -10px; margin-right: -10px; } body.premium-ui .location-settings-tabs .location-settings-pane > .row > [class*='col-'] { padding-left: 10px; padding-right: 10px; } body.premium-ui .dt-nowrap { white-space: nowrap !important; } body.premium-ui .dt-wrap { white-space: normal !important; } 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.25rem); 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 #toast-container { z-index: 200000 !important; } body.premium-ui #toast-container.toast-top-right { top: 1rem !important; right: 1rem !important; bottom: auto !important; left: auto !important; } body.premium-ui #toast-container > div { /* Block layout + reserved left padding so the absolutely-positioned logo badge (::before, ~2.35rem at left:1rem) never overlaps the text. The old `padding` shorthand reset padding-left to 1rem, putting the logo on top of the message. Right padding leaves room for the close button. */ display: block !important; padding: 0.95rem 2.5rem 0.95rem 4.25rem !important; background: #fff !important; border: 1px solid var(--premium-border) !important; border-radius: 14px !important; box-shadow: var(--premium-shadow) !important; color: var(--premium-text) !important; min-width: 18rem !important; max-width: 26rem !important; width: auto !important; background-image: none !important; border-left: 4px solid var(--premium-border) !important; } body.premium-ui #toast-container > .toast-success { border-left-color: #16a34a !important; } body.premium-ui #toast-container > .toast-error { border-left-color: #dc2626 !important; } body.premium-ui #toast-container > .toast-warning { border-left-color: #f59e0b !important; } body.premium-ui #toast-container > .toast-info { border-left-color: var(--premium-primary) !important; } body.premium-ui #toast-container > div .toast-title { color: var(--premium-text) !important; } body.premium-ui #toast-container > div .toast-message { color: var(--premium-muted) !important; } body.premium-ui .swal2-popup, body.premium-ui .swal2-popup.aio-standard-modal { width: min(560px, calc(100vw - 2rem)) !important; border-radius: 18px !important; border: 1px solid var(--premium-border) !important; box-shadow: var(--premium-shadow) !important; } body.premium-ui .swal2-image { width: auto !important; max-width: min(200px, 70%) !important; max-height: 60px !important; object-fit: contain !important; } body.premium-ui .swal2-actions { flex-wrap: wrap !important; gap: 0.5rem !important; } body.premium-ui .swal2-icon { width: 4.25rem !important; height: 4.25rem !important; } @media (max-width: 640px) { body.premium-ui #toast-container.toast-top-right { top: 0.75rem !important; right: 0.75rem !important; left: 0.75rem !important; } body.premium-ui #toast-container > div { min-width: 0 !important; max-width: 100% !important; width: 100% !important; } } 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 { /* Re-add the custom SVG arrow (native selects only — select2 keeps its own native triangle; adding the chevron here too caused a double 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[data-theme='dark'] body.premium-ui select.form-control { 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.25rem); background: var(--background, #fff); } body.premium-ui .premium-file-input { display: block; width: 100%; min-height: var(--input-height, 2.25rem); 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 (min-width: 768px) and (max-width: 1199px) { body.premium-ui .business-settings-modern .pos-tab-menu { margin-bottom: 0; } body.premium-ui .business-settings-modern .nav-pills-mobile { flex-direction: column !important; flex-wrap: nowrap !important; gap: 4px !important; overflow-x: hidden !important; overflow-y: auto !important; align-items: stretch !important; width: 100% !important; height: 100% !important; padding: 10px 8px !important; scrollbar-width: thin !important; } body.premium-ui .business-settings-modern .premium-settings-tab { min-width: 0 !important; width: 100% !important; padding: 9px 12px !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; } /* Keep the notification dropdown closed until Bootstrap toggles the `.open` class. The rules below force `display: flex` for layout, which would otherwise override Bootstrap's default `display: none` and leave the dropdown permanently visible. */ .notifications-menu:not(.open) > .app-header-notification-menu { display: none !important; } 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: 70vh; overflow-x: hidden; overflow-y: hidden; 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); display: flex; flex-direction: column; } body.premium-ui .app-header-notification-menu > li { flex: 0 0 auto; } body.premium-ui .app-header-notification-menu > li.notif-list-wrapper { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } body.premium-ui #notifications_list.app-header-notification-list { flex: 1 1 auto; min-height: 0; max-height: 100%; overflow-y: auto; overflow-x: hidden; list-style: none; padding: 0.25rem; margin: 0; } body.premium-ui .app-header-notification-list > li.notification-li { padding: 0; margin: 0; } body.premium-ui .app-header-notification-list > li.notification-li.unread { background: rgba(20, 124, 187, 0.07); border-radius: var(--premium-radius-md); } body.premium-ui .app-header-notification-list .notif-link { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.5rem 0.75rem; color: var(--premium-text); text-decoration: none; border-radius: var(--premium-radius-md); transition: background 0.15s ease; } body.premium-ui .app-header-notification-list .notif-link:hover, body.premium-ui .app-header-notification-list .notif-link:focus { background: rgba(15, 23, 42, 0.05); outline: none; } body.premium-ui .app-header-notification-list .notif-main { display: flex; align-items: flex-start; gap: 0.5rem; } body.premium-ui .app-header-notification-list .notif-icon { flex: 0 0 auto; margin-top: 0.15rem; margin-right: 0 !important; font-size: 0.85rem; color: inherit; } body.premium-ui .app-header-notification-list .notif-info { flex: 1 1 auto; line-height: 1.45; word-break: break-word; } body.premium-ui .app-header-notification-list .notif-time { font-size: 0.75rem; color: #64748b; padding-left: 1.35rem; } body.premium-ui .app-header-notification-list > li.no-notification { padding: 0.75rem; color: #64748b; } 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: 36px; --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 36px 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 Standardize border-radius and font-size across all internal forms to match the premium login form aesthetics. ========================================================================== */ 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 Allow long menu labels (e.g. "Business Intelligence") to wrap instead of being clipped with ellipsis. ========================================================================== */ 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 Override the business theme-color on the theme-toggle button so it always uses a neutral slate background regardless of session theme. ========================================================================== */ 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) Darken inactive nav-tab text from ~3.5:1 to >4.5:1 contrast ratio. ========================================================================== */ body.premium-ui .nav-tabs > li > a, body.premium-ui .nav-tabs .nav-link:not(.active) { color: #475569 !important; /* slate-600, ~5.9:1 on white */ } 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 Ensure Bootstrap dismissible alerts have a visible close button. ========================================================================== */ body.premium-ui .alert:not(.alert-dismissible) { padding-right: 2.5rem; position: relative; } 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; }