/* ================================================================ UFLOW ERP — Precision Theme v2 Fonts: Lexend (UI) + JetBrains Mono (data) — self-hosted, declared in /fonts/fonts.css (linked early in styles.blade.php) Four themes: indigo=Sky, teal=Midnight, crimson=Ember, green=Jade A pre-minified copy (modern-theme.min.css) is kept alongside this file for future use. After editing this file, regenerate it with: node -e "const C=require('clean-css');const fs=require('fs');const o=new C({level:1}).minify(fs.readFileSync('public/css/admin/modern-theme.css','utf8'));fs.writeFileSync('public/css/admin/modern-theme.min.css',o.styles);" ================================================================ */ /* ================================================================ APPEARANCE TOKENS (user-tunable via Appearance settings) These defaults are overridden at runtime by appearance.js, which writes inline custom properties on . See docs/theme-customization-plan.md. ================================================================ */ :root { --app-font-family: var(--app-font-family); --app-font-weight: 400; --app-font-scale: 1; --app-radius: 6px; } /* ================================================================ THEME VARIABLES ================================================================ */ html[data-theme="indigo"] { --sidebar-bg: #0b1120; --sidebar-hover: rgba(37, 99, 235, 0.16); --sidebar-active: rgba(37, 99, 235, 0.26); --sidebar-text: rgba(255, 255, 255, 0.82); --sidebar-text-active: #ffffff; --sidebar-icon: rgba(255, 255, 255, 0.58); --sidebar-icon-active: #93c5fd; --sidebar-border: rgba(255, 255, 255, 0.08); /* Accent */ --accent: #2563eb; --accent-hover: #1d4ed8; --accent-light: #eff6ff; --accent-light2: #dbeafe; --accent-text: #ffffff; --accent-muted: rgba(37, 99, 235, 0.12); /* Topbar */ --topbar-bg: #ffffff; --topbar-border: #e2e8f0; --topbar-text: #334155; /* Page */ --body-bg: #ffffff; --card-bg: #fafcff; --card-border: #e2e8f0; --card-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --card-shadow-lg: 0 4px 16px rgba(15, 23, 42, 0.08); /* Text — softened from near-black to readable dark gray */ --text-primary: #1e293b; --text-secondary: #475569; --text-muted: #94a3b8; /* Input */ --input-bg: #f8fafc; --input-border: #cbd5e1; --input-focus-ring: rgba(37, 99, 235, 0.18); --input-border-focus: #2563eb; } html[data-theme="teal"] { --sidebar-bg: #07111a; --sidebar-hover: rgba(6, 182, 212, 0.14); --sidebar-active: rgba(6, 182, 212, 0.22); --sidebar-text: rgba(255, 255, 255, 0.82); --sidebar-text-active: #ffffff; --sidebar-icon: rgba(255, 255, 255, 0.58); --sidebar-icon-active: #67e8f9; --sidebar-border: rgba(255, 255, 255, 0.07); --accent: #0891b2; --accent-hover: #0e7490; --accent-light: #ecfeff; --accent-light2: #cffafe; --accent-text: #ffffff; --accent-muted: rgba(8, 145, 178, 0.12); --topbar-bg: #ffffff; --topbar-border: #0e2030; --topbar-text: #94a3b8; --body-bg: #ffffff; --card-bg: #f8fdff; --card-border: #bae6fd; --card-shadow: 0 1px 3px rgba(7, 17, 26, 0.07); --card-shadow-lg: 0 4px 16px rgba(7, 17, 26, 0.10); --text-primary: #1e3347; --text-secondary: #334155; --text-muted: #64748b; --input-bg: #f0f9ff; --input-border: #7dd3fc; --input-focus-ring: rgba(8, 145, 178, 0.18); --input-border-focus: #0891b2; } html[data-theme="crimson"] { --sidebar-bg: #120608; --sidebar-hover: rgba(239, 68, 68, 0.14); --sidebar-active: rgba(239, 68, 68, 0.22); --sidebar-text: rgba(255, 255, 255, 0.82); --sidebar-text-active: #ffffff; --sidebar-icon: rgba(255, 255, 255, 0.58); --sidebar-icon-active: #fca5a5; --sidebar-border: rgba(255, 255, 255, 0.08); --accent: #dc2626; --accent-hover: #b91c1c; --accent-light: #fff1f2; --accent-light2: #fecdd3; --accent-text: #ffffff; --accent-muted: rgba(220, 38, 38, 0.12); --topbar-bg: #ffffff; --topbar-border: #fecdd3; --topbar-text: #44181c; --body-bg: #ffffff; --card-bg: #fffbfb; --card-border: #fecaca; --card-shadow: 0 1px 3px rgba(18, 6, 8, 0.06); --card-shadow-lg: 0 4px 16px rgba(18, 6, 8, 0.09); /* Text — was near-black #0f0203; muted was vivid rose #9f1239 */ --text-primary: #2d1215; --text-secondary: #5c2525; --text-muted: #a07070; --input-bg: #fff5f5; --input-border: #fca5a5; --input-focus-ring: rgba(220, 38, 38, 0.18); --input-border-focus: #dc2626; } html[data-theme="green"] { --sidebar-bg: #030d08; --sidebar-hover: rgba(16, 185, 129, 0.13); --sidebar-active: rgba(16, 185, 129, 0.22); --sidebar-text: rgba(255, 255, 255, 0.82); --sidebar-text-active: #ffffff; --sidebar-icon: rgba(255, 255, 255, 0.58); --sidebar-icon-active: #6ee7b7; --sidebar-border: rgba(255, 255, 255, 0.07); --accent: #059669; --accent-hover: #047857; --accent-light: #ecfdf5; --accent-light2: #d1fae5; --accent-text: #ffffff; --accent-muted: rgba(5, 150, 105, 0.12); --topbar-bg: #ffffff; --topbar-border: #a7f3d0; --topbar-text: #1a4535; --body-bg: #ffffff; --card-bg: #f8fdf9; --card-border: #a7f3d0; --card-shadow: 0 1px 3px rgba(3, 13, 8, 0.06); --card-shadow-lg: 0 4px 16px rgba(3, 13, 8, 0.09); /* Text — was near-black; muted was vivid #10b981 (the accent itself!) */ --text-primary: #1a3a2c; --text-secondary: #2d5c47; --text-muted: #6aad93; --input-bg: #f0fdf6; --input-border: #6ee7b7; --input-focus-ring: rgba(5, 150, 105, 0.18); --input-border-focus: #059669; } html, html[data-theme="purple"] { /* Sidebar — gradient set via dedicated rule below (background-color can't hold gradients; see html[data-theme="purple"] sidebar override) */ --sidebar-bg: #1a0030; --sidebar-hover: rgba(255, 255, 255, 0.12); --sidebar-active: rgba(255, 255, 255, 0.20); --sidebar-text: rgba(255, 255, 255, 0.82); --sidebar-text-active: #ffffff; --sidebar-icon: rgba(255, 255, 255, 0.55); --sidebar-icon-active: #f0d9ff; --sidebar-border: rgba(255, 255, 255, 0.10); /* Accent — design violet #7c3aed → #9333ea (ERP Dashboard handoff) */ --accent: #832d9f; --accent-hover: #6b2384; --accent-light: #f6f1fe; --accent-light2: #ede9fe; --accent-text: #ffffff; --accent-muted: rgba(124, 58, 237, 0.10); /* Topbar — WHITE header */ --topbar-bg: #ffffff; --topbar-border: #ece7fb; --topbar-text: #3f3a55; /* Page — soft lavender-grey per design (#f4f5fb) */ --body-bg: #f4f5fb; --card-bg: #ffffff; --card-border: #ecebf3; --card-shadow: 0 1px 2px rgba(20, 16, 40, 0.05); --card-shadow-lg: 0 8px 22px -10px rgba(124, 58, 237, 0.25); /* Text */ --text-primary: #1f1b30; --text-secondary: #4b4663; --text-muted: #9a98ad; /* Input */ --input-bg: #fdfcff; --input-border: #e4ddf6; --input-focus-ring: rgba(124, 58, 237, 0.18); --input-border-focus: #7c3aed; } html[data-theme="arctic"] { --sidebar-bg: #080d14; --sidebar-hover: rgba(56, 189, 248, 0.14); --sidebar-active: rgba(56, 189, 248, 0.22); --sidebar-text: rgba(255, 255, 255, 0.82); --sidebar-text-active: #ffffff; --sidebar-icon: rgba(255, 255, 255, 0.58); --sidebar-icon-active: #7dd3fc; --sidebar-border: rgba(255, 255, 255, 0.08); --accent: #38bdf8; --accent-hover: #0ea5e9; --accent-light: #f0f9ff; --accent-light2: #e0f2fe; --accent-text: #ffffff; --accent-muted: rgba(56, 189, 248, 0.12); --topbar-bg: #ffffff; --topbar-border: #bae6fd; --topbar-text: #0c4a6e; --body-bg: #ffffff; --card-bg: #f8fdff; --card-border: #bae6fd; --card-shadow: 0 1px 3px rgba(8, 13, 20, 0.06); --card-shadow-lg: 0 4px 16px rgba(8, 13, 20, 0.10); --text-primary: #0c2940; --text-secondary: #1e4a6e; --text-muted: #64a3c4; --input-bg: #f0f9ff; --input-border: #7dd3fc; --input-focus-ring: rgba(56, 189, 248, 0.18); --input-border-focus: #38bdf8; } html[data-theme="gold"] { --sidebar-bg: #0c0800; --sidebar-hover: rgba(202, 138, 4, 0.14); --sidebar-active: rgba(202, 138, 4, 0.22); --sidebar-text: rgba(255, 255, 255, 0.82); --sidebar-text-active: #ffffff; --sidebar-icon: rgba(255, 255, 255, 0.58); --sidebar-icon-active: #fde68a; --sidebar-border: rgba(255, 255, 255, 0.08); --accent: #ca8a04; --accent-hover: #a16207; --accent-light: #fffbeb; --accent-light2: #fef3c7; --accent-text: #ffffff; --accent-muted: rgba(202, 138, 4, 0.12); --topbar-bg: #ffffff; --topbar-border: #fde68a; --topbar-text: #451a03; --body-bg: #ffffff; --card-bg: #fffdf0; --card-border: #fde68a; --card-shadow: 0 1px 3px rgba(12, 8, 0, 0.06); --card-shadow-lg: 0 4px 16px rgba(12, 8, 0, 0.10); --text-primary: #1c1200; --text-secondary: #3d2800; --text-muted: #92764a; --input-bg: #fffdf5; --input-border: #fcd34d; --input-focus-ring: rgba(202, 138, 4, 0.18); --input-border-focus: #ca8a04; } html[data-theme="midnight"] { --sidebar-bg: #0d0d12; --sidebar-hover: rgba(99, 102, 241, 0.16); --sidebar-active: rgba(99, 102, 241, 0.26); --sidebar-text: rgba(255, 255, 255, 0.82); --sidebar-text-active: #ffffff; --sidebar-icon: rgba(255, 255, 255, 0.50); --sidebar-icon-active: #a5b4fc; --sidebar-border: rgba(255, 255, 255, 0.08); --accent: #6366f1; --accent-hover: #4f46e5; --accent-light: rgba(99, 102, 241, 0.15); --accent-light2: rgba(99, 102, 241, 0.25); --accent-text: #ffffff; --accent-muted: rgba(99, 102, 241, 0.12); --topbar-bg: #16181f; --topbar-border: rgba(255, 255, 255, 0.08); --topbar-text: rgba(255, 255, 255, 0.80); --body-bg: #111318; --card-bg: #1a1d25; --card-border: rgba(255, 255, 255, 0.08); --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20); --card-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.40); --text-primary: rgba(255, 255, 255, 0.87); --text-secondary: rgba(255, 255, 255, 0.60); --text-muted: rgba(255, 255, 255, 0.38); --input-bg: #1e2028; --input-border: rgba(255, 255, 255, 0.15); --input-focus-ring: rgba(99, 102, 241, 0.25); --input-border-focus: #6366f1; } /* Classic — matches the legacy AdminLTE skin-blue CMS look: blue header #3c8dbc, dark charcoal sidebar #222d32, primary #1f648b. */ html[data-theme="classic"] { --sidebar-bg: #222d32; --sidebar-hover: #1e282c; --sidebar-active: #1e282c; --sidebar-text: #b8c7ce; --sidebar-text-active: #ffffff; --sidebar-icon: #b8c7ce; --sidebar-icon-active: #3c8dbc; --sidebar-border: rgba(255, 255, 255, 0.05); /* Accent — primary button blue */ --accent: #1f648b; --accent-hover: #18506f; --accent-light: #eef5fa; --accent-light2: #d6e7f2; --accent-text: #ffffff; --accent-muted: rgba(31, 100, 139, 0.12); /* Topbar — classic blue header with white text */ --topbar-bg: #3c8dbc; --topbar-border: #367fa9; --topbar-text: #ffffff; /* Page — classic light-gray content area */ --body-bg: #ecf0f5; --card-bg: #ffffff; --card-border: #d2d6de; --card-shadow: 0 1px 1px rgba(0, 0, 0, 0.10); --card-shadow-lg: 0 3px 8px rgba(0, 0, 0, 0.12); /* Text */ --text-primary: #333333; --text-secondary: #555555; --text-muted: #888888; /* Input */ --input-bg: #ffffff; --input-border: #d2d6de; --input-focus-ring: rgba(60, 141, 188, 0.18); --input-border-focus: #3c8dbc; } /* ================================================================ BASE — FONTS & BODY ================================================================ */ *, *::before, *::after { box-sizing: border-box; } html body, body { font-family: var(--app-font-family) !important; font-weight: var(--app-font-weight); background-color: var(--body-bg) !important; color: var(--text-primary) !important; font-size: calc(13.5px * var(--app-font-scale)); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .content-wrapper { background-color: var(--body-bg) !important; } .skin-blue .wrapper { background-color: var(--body-bg) !important; } /* ================================================================ TYPOGRAPHY ================================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--app-font-family) !important; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; } p, span, a, td, th, label, input, select, textarea, button { font-family: var(--app-font-family) !important; } /* Restore icon fonts — the span rule above kills them via !important */ .glyphicon { font-family: 'Glyphicons Halflings' !important; } /* Exclude .glyphicon: plugins like daterangepicker emit one with BOTH `fa fa-x` and `glyphicon glyphicon-x` classes. The winning ::before glyph is the Glyphicons codepoint (bootstrap loads after font-awesome), so forcing the FontAwesome family here renders a broken glyph. Let such dual-class icons keep the Glyphicons family (set by the .glyphicon rule above) to match their glyph. */ .fa:not(.glyphicon), .fas, .far, .fab, .fal { font-family: 'FontAwesome' !important; } /* ================================================================ SIDEBAR ================================================================ */ .skin-blue .main-sidebar, .skin-blue .left-side { background-color: var(--sidebar-bg) !important; border-right: 1px solid var(--sidebar-border); } /* Sidebar user panel */ .skin-blue .user-panel { border-bottom: none !important; border-top: none !important; padding: 14px 16px 12px; margin-bottom: 0; } /* No separator line — seamless panel */ .skin-blue .sidebar-form { border-bottom: none !important; padding-bottom: 0 !important; margin-bottom: 6px !important; } .skin-blue .user-panel > .info, .skin-blue .user-panel > .info > a, .skin-blue .user-panel > .info p { color: var(--sidebar-text-active) !important; font-family: var(--app-font-family) !important; font-weight: 500; font-size: calc(13px * var(--app-font-scale)); } .skin-blue .user-panel > .info > a { font-size: calc(11.5px * var(--app-font-scale)) !important; color: var(--sidebar-text) !important; font-weight: 400 !important; } .skin-blue .user-panel .img-circle { border: 2px solid var(--sidebar-active); } /* Section headers like "MAIN NAVIGATION" */ .skin-blue .sidebar-menu > li.header { font-family: var(--app-font-family) !important; font-size: calc(9.5px * var(--app-font-scale)) !important; font-weight: 700 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; color: rgba(255,255,255,0.45) !important; background: transparent !important; padding: 16px 18px 6px !important; margin-top: 0; } /* Top-level nav items */ .skin-blue .sidebar-menu > li > a { font-family: var(--app-font-family) !important; font-weight: 400; font-size: calc(13px * var(--app-font-scale)) !important; color: var(--sidebar-text) !important; padding: 10px 14px !important; margin: 1px 10px !important; border-radius: 10px !important; border-left: none !important; transition: background-color 0.15s ease, color 0.15s ease !important; letter-spacing: 0.01em; } .skin-blue .sidebar-menu > li > a > .fa, .skin-blue .sidebar-menu > li > a > .glyphicon, .skin-blue .sidebar-menu > li > a > .ion { color: rgba(255,255,255,0.88) !important; width: 18px !important; font-size: calc(13px * var(--app-font-scale)) !important; margin-right: 10px !important; transition: color 0.15s; } .skin-blue .sidebar-menu > li > a:hover { background-color: var(--sidebar-hover) !important; border-left-color: var(--accent) !important; color: rgba(255, 255, 255, 0.85) !important; } .skin-blue .sidebar-menu > li > a:hover > .fa, .skin-blue .sidebar-menu > li > a:hover > .glyphicon, .skin-blue .sidebar-menu > li > a:hover > .ion { color: var(--sidebar-icon-active) !important; } /* Active top-level item — design: inset 3px white bar + bold */ .skin-blue .sidebar-menu > li.active > a, .skin-blue .sidebar-menu > li.menu-open > a { background-color: var(--sidebar-active) !important; border-left-color: var(--accent) !important; color: var(--sidebar-text-active) !important; font-weight: 700 !important; box-shadow: inset 3px 0 0 #ffffff !important; } .skin-blue .sidebar-menu > li.active > a > .fa, .skin-blue .sidebar-menu > li.menu-open > a > .fa, .skin-blue .sidebar-menu > li.active > a > .glyphicon, .skin-blue .sidebar-menu > li.active > a > .ion { color: var(--sidebar-icon-active) !important; } /* Pull-right chevron arrows on collapsible items. The markup uses a bare `` (no .pull-right-container wrapper), so target both the bare form and the wrapped form. Base app.css already absolutely-centers the bare arrow vertically. */ .skin-blue .sidebar-menu > li > a > .fa-angle-left, .skin-blue .sidebar-menu > li > a > .fa-angle-down, .skin-blue .sidebar-menu > li > a > .pull-right-container > .fa-angle-left, .skin-blue .sidebar-menu > li > a > .pull-right-container > .fa-angle-down { color: rgba(255,255,255,0.35) !important; font-size: calc(12px * var(--app-font-scale)) !important; transition: transform 0.2s ease, color 0.15s ease !important; } /* Rotate arrow when menu is open. AdminLTE's tree JS adds only `menu-open` (not `active`) when a user clicks a treeview open, and base app.css rotates only on `li.active` — so click-opened menus never rotated their arrow. Cover both states, for the bare arrow and the wrapped one. */ .skin-blue .sidebar-menu > li.menu-open > a > .fa-angle-left, .skin-blue .sidebar-menu > li.active > a > .fa-angle-left, .skin-blue .sidebar-menu > li.menu-open > a > .pull-right-container > .fa-angle-left, .skin-blue .sidebar-menu > li.active > a > .pull-right-container > .fa-angle-left { transform: rotate(-90deg) !important; color: var(--sidebar-icon-active) !important; } /* ── Unified "NEW" badges in the sidebar ─────────────────────────────────── One consistent pill for the top-level (bg-red) and submenu (bg-orange) markers, regardless of the original colour class, so they look identical everywhere. Replaces the harsh 1s "condemned" blink (custom.css) with a soft pulse that draws the eye without flickering. */ .skin-blue .sidebar-menu .label.bg-red, .skin-blue .sidebar-menu .label.bg-orange { display: inline-block !important; background: #ef4444 !important; color: #ffffff !important; font-family: var(--app-font-family) !important; font-size: calc(9px * var(--app-font-scale)) !important; font-weight: 800 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; line-height: 1 !important; padding: 3px 7px !important; border-radius: 999px !important; vertical-align: middle !important; margin-left: 8px !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.30) !important; animation: sidebar-badge-pulse 1.8s ease-in-out infinite !important; } @keyframes sidebar-badge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* Reserve space on the right of collapsible items for the absolutely-positioned chevron, so a "NEW" badge or long label at a larger font size never collides with or hides under the arrow. */ .skin-blue .sidebar-menu > li.treeview > a { padding-right: 34px !important; } /* Keep a submenu item and its NEW badge on a single line (never wrap the badge onto its own row) — even at larger font sizes. Scoped to items that actually have a badge, so ordinary long menu names still wrap normally. */ .skin-blue .sidebar-menu .treeview-menu > li > a:has(> .label) { white-space: nowrap !important; } /* Trim the badge's gap a touch in submenus so the text + pill fit the rail. */ .skin-blue .sidebar-menu .treeview-menu > li > a > .label { margin-left: 6px !important; } /* Treeview submenu — transparent, so it blends with the menu (no separate box). overflow:hidden is required for AdminLTE's slide open/close animation to clip the panel while its height animates (otherwise it overlaps the items below). */ .skin-blue .sidebar-menu .treeview-menu { background-color: transparent !important; border-radius: 0 !important; margin: 0 !important; padding: 2px 0 !important; overflow: hidden !important; } .skin-blue .sidebar-menu .treeview-menu > li > a { font-family: var(--app-font-family) !important; font-size: calc(11.5px * var(--app-font-scale)) !important; font-weight: 400; color: var(--sidebar-text) !important; padding: 7px 12px 7px 14px !important; /* Rounded inset pill — consistent with the top-level items */ margin: 1px 10px 1px 16px !important; border-radius: 9px !important; border-left: none !important; transition: background-color 0.15s ease, color 0.15s ease !important; /* Let text wrap — do NOT truncate menu names */ white-space: normal !important; overflow: visible !important; text-overflow: unset !important; line-height: 1.4 !important; } /* ── Third-level sub-menu (sub > sub items) — nested inside the panel, no extra box ── */ .skin-blue .sidebar-menu .treeview-menu .treeview-menu { background-color: transparent !important; border-radius: 0 !important; margin: 1px 0 1px 4px !important; padding: 2px 0 !important; } .skin-blue .sidebar-menu .treeview-menu .treeview-menu > li > a { padding-left: 32px !important; font-size: calc(11px * var(--app-font-scale)) !important; color: rgba(255, 255, 255, 0.65) !important; } .skin-blue .sidebar-menu .treeview-menu .treeview-menu > li > a:hover { color: rgba(255, 255, 255, 0.90) !important; background-color: var(--sidebar-hover) !important; } .skin-blue .sidebar-menu .treeview-menu .treeview-menu > li.active > a { color: #ffffff !important; font-weight: 500 !important; border-left-color: var(--accent) !important; background-color: var(--sidebar-active) !important; } /* NO ::before pseudo-element — blade already renders FontAwesome icons for each item */ .skin-blue .sidebar-menu .treeview-menu > li > a:hover { background-color: var(--sidebar-hover) !important; color: rgba(255, 255, 255, 0.90) !important; border-left-color: var(--accent) !important; } .skin-blue .sidebar-menu .treeview-menu > li.active > a, .skin-blue .sidebar-menu .treeview-menu > li.menu-open > a { color: var(--sidebar-text-active) !important; font-weight: 500 !important; border-left-color: transparent !important; background-color: var(--sidebar-active) !important; } /* Search box in sidebar */ .sidebar-form { border: none !important; background: transparent !important; margin: 8px 12px !important; } .sidebar-form input[type="text"] { background: rgba(255, 255, 255, 0.07) !important; border: none !important; box-shadow: none !important; color: var(--sidebar-text-active) !important; font-family: var(--app-font-family) !important; font-size: calc(12px * var(--app-font-scale)) !important; border-radius: 10px 0 0 10px !important; } .sidebar-form input[type="text"]::placeholder { color: var(--sidebar-text) !important; } .sidebar-form .btn { background: rgba(255, 255, 255, 0.07) !important; border: none !important; box-shadow: none !important; color: var(--sidebar-text) !important; border-radius: 0 10px 10px 0 !important; } /* Slim scrollbar */ .sidebar::-webkit-scrollbar { width: 3px; } .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; } .sidebar::-webkit-scrollbar-track { background: transparent; } /* Fix sidebar jerk — overflow hidden stops layout shift when submenus expand */ .skin-blue .sidebar, .skin-blue .sidebar-menu { overflow: hidden !important; } /* Mini collapsed mode — body has BOTH classes, so must target body.class directly. overflow:visible allows the flyout panel to appear outside the sidebar bounds. */ body.sidebar-mini.sidebar-collapse .sidebar, body.sidebar-mini.sidebar-collapse .sidebar-menu { overflow: visible !important; } /* ================================================================ MINI SIDEBAR FLYOUT (collapsed sidebar hover panel) ================================================================ */ /* The flyout panel that appears to the right of the icon when sidebar is collapsed */ .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu, .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > ul { background-color: var(--sidebar-bg) !important; border-left: 3px solid var(--accent) !important; border-top: 1px solid var(--sidebar-border) !important; border-right: 1px solid var(--sidebar-border) !important; border-bottom: 1px solid var(--sidebar-border) !important; border-radius: 0 10px 10px 0 !important; box-shadow: 6px 6px 24px rgba(0, 0, 0, 0.40) !important; padding: 6px 0 8px !important; min-width: 220px !important; z-index: 1000 !important; /* Ensure fully opaque — no see-through */ opacity: 1 !important; } /* Flyout header — parent item label shown at top */ .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a { background-color: var(--sidebar-active) !important; border-left-color: var(--accent) !important; color: #ffffff !important; width: 50px !important; } /* Parent item label (text) visible in flyout */ .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span:not(.pull-right) { background-color: var(--sidebar-bg) !important; border: 1px solid var(--sidebar-border) !important; border-left: 3px solid var(--accent) !important; border-radius: 0 6px 6px 0 !important; box-shadow: 4px 4px 12px rgba(0,0,0,0.30) !important; font-family: var(--app-font-family) !important; font-size: calc(13px * var(--app-font-scale)) !important; font-weight: 600 !important; color: #ffffff !important; padding: 10px 14px !important; top: 0 !important; margin-top: 0 !important; } /* Items inside flyout */ .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu > li > a, .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > ul > li > a { font-family: var(--app-font-family) !important; font-size: calc(12px * var(--app-font-scale)) !important; font-weight: 400 !important; color: var(--sidebar-text) !important; padding: 8px 16px !important; white-space: normal !important; background: transparent !important; transition: background-color 0.12s ease, color 0.12s ease !important; line-height: 1.4 !important; } .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu > li > a:hover, .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > ul > li > a:hover { background-color: var(--sidebar-hover) !important; color: #ffffff !important; } .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu > li.active > a { background-color: var(--sidebar-active) !important; color: #ffffff !important; font-weight: 500 !important; border-left: 2px solid var(--accent) !important; } /* Icons in flyout items */ .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu > li > a > .fa, .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu > li > a > .glyphicon { color: var(--sidebar-icon) !important; font-size: calc(12px * var(--app-font-scale)) !important; margin-right: 8px !important; } /* ── Purple theme (also the no-JS / unset default): gradient sidebar light→dark (background-color can't hold gradients) ── */ html[data-theme="purple"] .skin-blue .main-sidebar, html[data-theme="purple"] .skin-blue .left-side, html:not([data-theme]) .skin-blue .main-sidebar, html:not([data-theme]) .skin-blue .left-side { /* Fixed-px stops so the gradient looks identical regardless of page height (percent stops stretched it on tall pages). Below 760px it stays solid #0e0020. */ background: #0e0020 linear-gradient(180deg, #c264d9 0px, #832d9f 90px, #3d0070 240px, #1a0030 460px, #0e0020 760px) !important; background-repeat: no-repeat !important; } /* Expanded treeview sub-menus — dark overlay so they always look deep regardless of where they sit in the gradient */ html[data-theme="purple"] .skin-blue .sidebar .treeview-menu, html[data-theme="purple"] .skin-blue .sidebar li.treeview.menu-open > ul, html:not([data-theme]) .skin-blue .sidebar .treeview-menu, html:not([data-theme]) .skin-blue .sidebar li.treeview.menu-open > ul { background: transparent !important; } /* Logo area anchored to gradient top colour */ html[data-theme="purple"] .skin-blue .main-header .logo, html[data-theme="purple"] .skin-blue .main-header .logo:hover, html:not([data-theme]) .skin-blue .main-header .logo, html:not([data-theme]) .skin-blue .main-header .logo:hover { background: #c264d9 !important; } /* Flyout panel in collapsed mini sidebar — solid dark so text is readable */ html[data-theme="purple"] .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu, html[data-theme="purple"] .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > ul, html:not([data-theme]) .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu, html:not([data-theme]) .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > ul { background: #3d0070 !important; } /* ── Arctic theme: gradient sidebar ── */ html[data-theme="arctic"] .skin-blue .main-sidebar, html[data-theme="arctic"] .skin-blue .left-side { background: linear-gradient(180deg, #080d14 0%, #0a1e30 55%, #080d14 100%) !important; } html[data-theme="arctic"] .skin-blue .sidebar .treeview-menu, html[data-theme="arctic"] .skin-blue .sidebar li.treeview.menu-open > ul { background: transparent !important; } html[data-theme="arctic"] .skin-blue .main-header .logo, html[data-theme="arctic"] .skin-blue .main-header .logo:hover { background: #0a1e30 !important; } html[data-theme="arctic"] .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu, html[data-theme="arctic"] .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > ul { background: #0a1e30 !important; } /* ── Gold theme: gradient sidebar ── */ html[data-theme="gold"] .skin-blue .main-sidebar, html[data-theme="gold"] .skin-blue .left-side { background: linear-gradient(180deg, #0c0800 0%, #221700 55%, #0c0800 100%) !important; } html[data-theme="gold"] .skin-blue .sidebar .treeview-menu, html[data-theme="gold"] .skin-blue .sidebar li.treeview.menu-open > ul { background: transparent !important; } html[data-theme="gold"] .skin-blue .main-header .logo, html[data-theme="gold"] .skin-blue .main-header .logo:hover { background: #221700 !important; } html[data-theme="gold"] .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu, html[data-theme="gold"] .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > ul { background: #221700 !important; } /* ── Midnight theme: dark content area overrides ── */ html[data-theme="midnight"] .btn-default { background-color: #252830 !important; border-color: rgba(255, 255, 255, 0.14) !important; color: rgba(255, 255, 255, 0.80) !important; } html[data-theme="midnight"] .btn-default:hover, html[data-theme="midnight"] .btn-default:focus { background-color: #2e3140 !important; border-color: #6366f1 !important; color: #ffffff !important; } /* ── Midnight: AdminLTE .btn-app "small box" tiles (storage crate tiles, etc.) ── .btn-app keeps its light #f4f4f4/#666/#ddd styling from app.css with no midnight override, so it renders as a bright light-grey box on the dark page. */ html[data-theme="midnight"] .btn-app { background-color: var(--card-bg) !important; border-color: var(--card-border) !important; color: var(--text-secondary) !important; } html[data-theme="midnight"] .btn-app:hover { background-color: #20242e !important; border-color: var(--accent) !important; color: var(--text-primary) !important; } html[data-theme="midnight"] .btn-app:active, html[data-theme="midnight"] .btn-app:focus { box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.4) !important; } /* ── Midnight: every coloured .btn-* variant gets the same gradient + glow + lift ── Generic baseline for ALL .btn-xxx colour variants (btn-light-blue, btn-aqua, btn-teal, btn-navy, btn-purple, btn-secondary, etc.) so they feel as solid against the dark background as btn-primary does. The colour-matched rules below (same specificity, declared later) win for primary/danger/success/ warning/info and replace this with a tinted gradient + coloured glow. */ html[data-theme="midnight"] .btn-default, html[data-theme="midnight"] .btn-secondary, html[data-theme="midnight"] .btn-light, html[data-theme="midnight"] .btn-light-blue, html[data-theme="midnight"] .btn-aqua, html[data-theme="midnight"] .btn-inverse, html[data-theme="midnight"] .btn-teal, html[data-theme="midnight"] .btn-navy, html[data-theme="midnight"] .btn-maroon, html[data-theme="midnight"] .btn-pink, html[data-theme="midnight"] .btn-red, html[data-theme="midnight"] .btn-blue, html[data-theme="midnight"] .btn-black, html[data-theme="midnight"] .btn-green, html[data-theme="midnight"] .btn-purple, html[data-theme="midnight"] .btn-orange, html[data-theme="midnight"] .btn-venom-green, html[data-theme="midnight"] .btn-ocean-blue, html[data-theme="midnight"] .btn-deep-pink, html[data-theme="midnight"] .btn-light-green { background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)) !important; box-shadow: 0 4px 14px rgba(0,0,0,.35) !important; transition: transform .12s, box-shadow .15s, filter .15s !important; } html[data-theme="midnight"] .btn-default:hover, html[data-theme="midnight"] .btn-default:focus, html[data-theme="midnight"] .btn-secondary:hover, html[data-theme="midnight"] .btn-secondary:focus, html[data-theme="midnight"] .btn-light:hover, html[data-theme="midnight"] .btn-light:focus, html[data-theme="midnight"] .btn-light-blue:hover, html[data-theme="midnight"] .btn-light-blue:focus, html[data-theme="midnight"] .btn-aqua:hover, html[data-theme="midnight"] .btn-aqua:focus, html[data-theme="midnight"] .btn-inverse:hover, html[data-theme="midnight"] .btn-inverse:focus, html[data-theme="midnight"] .btn-teal:hover, html[data-theme="midnight"] .btn-teal:focus, html[data-theme="midnight"] .btn-navy:hover, html[data-theme="midnight"] .btn-navy:focus, html[data-theme="midnight"] .btn-maroon:hover, html[data-theme="midnight"] .btn-maroon:focus, html[data-theme="midnight"] .btn-pink:hover, html[data-theme="midnight"] .btn-pink:focus, html[data-theme="midnight"] .btn-red:hover, html[data-theme="midnight"] .btn-red:focus, html[data-theme="midnight"] .btn-blue:hover, html[data-theme="midnight"] .btn-blue:focus, html[data-theme="midnight"] .btn-black:hover, html[data-theme="midnight"] .btn-black:focus, html[data-theme="midnight"] .btn-green:hover, html[data-theme="midnight"] .btn-green:focus, html[data-theme="midnight"] .btn-purple:hover, html[data-theme="midnight"] .btn-purple:focus, html[data-theme="midnight"] .btn-orange:hover, html[data-theme="midnight"] .btn-orange:focus, html[data-theme="midnight"] .btn-venom-green:hover,html[data-theme="midnight"] .btn-venom-green:focus, html[data-theme="midnight"] .btn-ocean-blue:hover, html[data-theme="midnight"] .btn-ocean-blue:focus, html[data-theme="midnight"] .btn-deep-pink:hover, html[data-theme="midnight"] .btn-deep-pink:focus, html[data-theme="midnight"] .btn-light-green:hover,html[data-theme="midnight"] .btn-light-green:focus { filter: brightness(1.10) !important; box-shadow: 0 6px 20px rgba(0,0,0,.45) !important; transform: translateY(-1px) !important; } html[data-theme="midnight"] .btn-default:active, html[data-theme="midnight"] .btn-secondary:active, html[data-theme="midnight"] .btn-light:active, html[data-theme="midnight"] .btn-light-blue:active, html[data-theme="midnight"] .btn-aqua:active, html[data-theme="midnight"] .btn-inverse:active, html[data-theme="midnight"] .btn-teal:active, html[data-theme="midnight"] .btn-navy:active, html[data-theme="midnight"] .btn-maroon:active, html[data-theme="midnight"] .btn-pink:active, html[data-theme="midnight"] .btn-red:active, html[data-theme="midnight"] .btn-blue:active, html[data-theme="midnight"] .btn-black:active, html[data-theme="midnight"] .btn-green:active, html[data-theme="midnight"] .btn-purple:active, html[data-theme="midnight"] .btn-orange:active, html[data-theme="midnight"] .btn-venom-green:active, html[data-theme="midnight"] .btn-ocean-blue:active, html[data-theme="midnight"] .btn-deep-pink:active, html[data-theme="midnight"] .btn-light-green:active { transform: translateY(0) !important; filter: brightness(.96) !important; } /* ── Midnight: coloured action buttons — gradient fills + shadow lift ── Bootstrap 3 buttons keep flat colours by default; in midnight we add a subtle gradient + coloured shadow + translateY lift so they feel solid against the dark background. No changes to non-midnight themes. */ html[data-theme="midnight"] .btn-danger, html[data-theme="midnight"] .btn.bg-danger, html[data-theme="midnight"] .btn.bg-red { background: linear-gradient(180deg, #ff5c6a, #e23b4c) !important; border-color: #c7293a !important; color: #fff !important; box-shadow: 0 4px 14px rgba(226, 59, 76, .40) !important; transition: transform .12s, box-shadow .15s, filter .15s !important; } html[data-theme="midnight"] .btn-danger:hover, html[data-theme="midnight"] .btn-danger:focus, html[data-theme="midnight"] .btn.bg-danger:hover, html[data-theme="midnight"] .btn.bg-danger:focus, html[data-theme="midnight"] .btn.bg-red:hover, html[data-theme="midnight"] .btn.bg-red:focus { filter: brightness(1.10) !important; box-shadow: 0 6px 20px rgba(226, 59, 76, .55) !important; transform: translateY(-1px) !important; } html[data-theme="midnight"] .btn-success, html[data-theme="midnight"] .btn.bg-success, html[data-theme="midnight"] .btn.bg-green { background: linear-gradient(180deg, #2bd17a, #16a35e) !important; border-color: #0e8f4f !important; color: #fff !important; box-shadow: 0 4px 14px rgba(22, 163, 94, .40) !important; transition: transform .12s, box-shadow .15s, filter .15s !important; } html[data-theme="midnight"] .btn-success:hover, html[data-theme="midnight"] .btn-success:focus, html[data-theme="midnight"] .btn.bg-success:hover, html[data-theme="midnight"] .btn.bg-success:focus, html[data-theme="midnight"] .btn.bg-green:hover, html[data-theme="midnight"] .btn.bg-green:focus { filter: brightness(1.10) !important; box-shadow: 0 6px 20px rgba(22, 163, 94, .55) !important; transform: translateY(-1px) !important; } html[data-theme="midnight"] .btn-info { background: linear-gradient(180deg, #3ac9f0, #1aa8d4) !important; border-color: #1492b8 !important; color: #fff !important; box-shadow: 0 4px 14px rgba(26, 168, 212, .38) !important; transition: transform .12s, box-shadow .15s, filter .15s !important; } html[data-theme="midnight"] .btn-info:hover, html[data-theme="midnight"] .btn-info:focus { filter: brightness(1.10) !important; box-shadow: 0 6px 20px rgba(26, 168, 212, .52) !important; transform: translateY(-1px) !important; } html[data-theme="midnight"] .btn-warning, html[data-theme="midnight"] .btn.bg-warning, html[data-theme="midnight"] .btn.bg-orange { background: linear-gradient(180deg, #ffb23d, #f08a18) !important; border-color: #d4740f !important; color: #fff !important; box-shadow: 0 4px 14px rgba(240, 138, 24, .38) !important; transition: transform .12s, box-shadow .15s, filter .15s !important; } html[data-theme="midnight"] .btn-warning:hover, html[data-theme="midnight"] .btn-warning:focus, html[data-theme="midnight"] .btn.bg-warning:hover, html[data-theme="midnight"] .btn.bg-warning:focus, html[data-theme="midnight"] .btn.bg-orange:hover, html[data-theme="midnight"] .btn.bg-orange:focus { filter: brightness(1.10) !important; box-shadow: 0 6px 20px rgba(240, 138, 24, .52) !important; transform: translateY(-1px) !important; } html[data-theme="midnight"] .btn-primary, html[data-theme="midnight"] .btn.bg-info, html[data-theme="midnight"] .btn.bg-primary { background: linear-gradient(180deg, #7d8dff, #5a6ef0) !important; border-color: #4557d4 !important; color: #fff !important; box-shadow: 0 4px 14px rgba(91, 124, 250, .40) !important; transition: transform .12s, box-shadow .15s, filter .15s !important; } html[data-theme="midnight"] .btn-primary:hover, html[data-theme="midnight"] .btn-primary:focus, html[data-theme="midnight"] .btn.bg-info:hover, html[data-theme="midnight"] .btn.bg-info:focus, html[data-theme="midnight"] .btn.bg-primary:hover, html[data-theme="midnight"] .btn.bg-primary:focus { filter: brightness(1.10) !important; box-shadow: 0 6px 20px rgba(91, 124, 250, .55) !important; transform: translateY(-1px) !important; } /* Active state — push back down */ html[data-theme="midnight"] .btn-danger:active, html[data-theme="midnight"] .btn-success:active, html[data-theme="midnight"] .btn-info:active, html[data-theme="midnight"] .btn-warning:active, html[data-theme="midnight"] .btn-primary:active, html[data-theme="midnight"] .btn.bg-danger:active, html[data-theme="midnight"] .btn.bg-success:active, html[data-theme="midnight"] .btn.bg-info:active, html[data-theme="midnight"] .btn.bg-warning:active, html[data-theme="midnight"] .btn.bg-primary:active, html[data-theme="midnight"] .btn.bg-red:active, html[data-theme="midnight"] .btn.bg-green:active, html[data-theme="midnight"] .btn.bg-orange:active { transform: translateY(0) !important; filter: brightness(.96) !important; } /* ── Midnight: pastel "light-*-background" filter buttons (e.g. Development Product dashboard) — same gradient + coloured-glow + hover-lift treatment as the .btn.bg-* buttons above, tinted to match each class's status colour. */ html[data-theme="midnight"] .btn.light-pink-background { background: linear-gradient(180deg, #ffb3e0, #ff79c6) !important; border-color: #e85fb0 !important; box-shadow: 0 4px 14px rgba(255, 121, 198, .35) !important; transition: transform .12s, box-shadow .15s, filter .15s !important; } html[data-theme="midnight"] .btn.light-yellow-background { background: linear-gradient(180deg, #c4b5fd, #a78bfa) !important; border-color: #8b5cf6 !important; box-shadow: 0 4px 14px rgba(167, 139, 250, .35) !important; transition: transform .12s, box-shadow .15s, filter .15s !important; } html[data-theme="midnight"] .btn.light-green-background { background: linear-gradient(180deg, #5eead4, #2dd4bf) !important; border-color: #14b8a6 !important; box-shadow: 0 4px 14px rgba(45, 212, 191, .35) !important; transition: transform .12s, box-shadow .15s, filter .15s !important; } html[data-theme="midnight"] .btn.light-green-background-current { background: linear-gradient(180deg, #6ee7b7, #34d399) !important; border-color: #10b981 !important; box-shadow: 0 4px 14px rgba(52, 211, 153, .35) !important; transition: transform .12s, box-shadow .15s, filter .15s !important; } /* White text on these gradient buttons — overrides the generic dark-text-on- light-background rules (a.light-*-background / a.light-*-background:hover), which would otherwise win at (0,3,1)/(0,4,1). The extra .btn class here raises specificity to (0,4,1)/(0,5,1) so it wins regardless of source order. */ html[data-theme="midnight"] .content-wrapper a.btn.light-pink-background, html[data-theme="midnight"] .content-wrapper a.btn.light-yellow-background, html[data-theme="midnight"] .content-wrapper a.btn.light-green-background, html[data-theme="midnight"] .content-wrapper a.btn.light-green-background-current, html[data-theme="midnight"] .content-wrapper a.btn.light-pink-background:hover, html[data-theme="midnight"] .content-wrapper a.btn.light-pink-background:focus, html[data-theme="midnight"] .content-wrapper a.btn.light-yellow-background:hover, html[data-theme="midnight"] .content-wrapper a.btn.light-yellow-background:focus, html[data-theme="midnight"] .content-wrapper a.btn.light-green-background:hover, html[data-theme="midnight"] .content-wrapper a.btn.light-green-background:focus, html[data-theme="midnight"] .content-wrapper a.btn.light-green-background-current:hover, html[data-theme="midnight"] .content-wrapper a.btn.light-green-background-current:focus { color: #ffffff !important; } html[data-theme="midnight"] .btn.light-pink-background:hover, html[data-theme="midnight"] .btn.light-pink-background:focus, html[data-theme="midnight"] .btn.light-yellow-background:hover, html[data-theme="midnight"] .btn.light-yellow-background:focus, html[data-theme="midnight"] .btn.light-green-background:hover, html[data-theme="midnight"] .btn.light-green-background:focus, html[data-theme="midnight"] .btn.light-green-background-current:hover, html[data-theme="midnight"] .btn.light-green-background-current:focus { filter: brightness(1.08) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, .35) !important; transform: translateY(-1px) !important; } html[data-theme="midnight"] .btn.light-pink-background:active, html[data-theme="midnight"] .btn.light-yellow-background:active, html[data-theme="midnight"] .btn.light-green-background:active, html[data-theme="midnight"] .btn.light-green-background-current:active { transform: translateY(0) !important; filter: brightness(.96) !important; } /* Selected filter state (Development Product dashboard "Next/Current Month Target" toggles) — higher specificity (.btn + 2 classes) than the rules above, so an accent ring marks the active filter without disturbing the pastel background/dark text it inherits from the idle rule. */ html[data-theme="midnight"] .btn.light-yellow-background.activeNextMonth { border-color: #4f46e5 !important; box-shadow: 0 0 0 2px rgba(99, 102, 241, .55), 0 4px 14px rgba(99, 102, 241, .35) !important; filter: brightness(1.05) !important; } html[data-theme="midnight"] .btn.light-green-background-current.activeCurrentMonth { border-color: #047857 !important; box-shadow: 0 0 0 2px rgba(16, 185, 129, .55), 0 4px 14px rgba(16, 185, 129, .35) !important; filter: brightness(1.05) !important; } html[data-theme="midnight"] .btn.light-yellow-background.activeNextMonth:hover, html[data-theme="midnight"] .btn.light-yellow-background.activeNextMonth:focus { box-shadow: 0 0 0 2px rgba(99, 102, 241, .65), 0 6px 20px rgba(99, 102, 241, .45) !important; transform: translateY(-1px) !important; } html[data-theme="midnight"] .btn.light-green-background-current.activeCurrentMonth:hover, html[data-theme="midnight"] .btn.light-green-background-current.activeCurrentMonth:focus { box-shadow: 0 0 0 2px rgba(16, 185, 129, .65), 0 6px 20px rgba(16, 185, 129, .45) !important; transform: translateY(-1px) !important; } /* ── Midnight: gradient buttons OFF (user preference "uflow-midnight-buttons") Some users dislike the gradient + coloured glow on buttons in Midnight. When the toggle is off (html[data-midnight-buttons="off"]) flatten every midnight button to a solid fill and drop the glow + hover-lift. Two attributes give this higher specificity than the gradient rules above, and it is declared last, so it wins. Only affects the Midnight theme. */ html[data-theme="midnight"][data-midnight-buttons="off"] .btn { background-image: none !important; box-shadow: none !important; transform: none !important; } html[data-theme="midnight"][data-midnight-buttons="off"] .btn:hover, html[data-theme="midnight"][data-midnight-buttons="off"] .btn:focus, html[data-theme="midnight"][data-midnight-buttons="off"] .btn:active { box-shadow: none !important; transform: none !important; filter: none !important; } /* Coloured buttons used the `background:` gradient shorthand, which zeroed their background-color — restore a flat solid colour (the gradient's base tone). */ html[data-theme="midnight"][data-midnight-buttons="off"] .btn-danger, html[data-theme="midnight"][data-midnight-buttons="off"] .btn.bg-danger, html[data-theme="midnight"][data-midnight-buttons="off"] .btn.bg-red { background-color: #e23b4c !important; } html[data-theme="midnight"][data-midnight-buttons="off"] .btn-success, html[data-theme="midnight"][data-midnight-buttons="off"] .btn.bg-success, html[data-theme="midnight"][data-midnight-buttons="off"] .btn.bg-green { background-color: #16a35e !important; } html[data-theme="midnight"][data-midnight-buttons="off"] .btn-info { background-color: #1aa8d4 !important; } html[data-theme="midnight"][data-midnight-buttons="off"] .btn-warning, html[data-theme="midnight"][data-midnight-buttons="off"] .btn.bg-warning, html[data-theme="midnight"][data-midnight-buttons="off"] .btn.bg-orange { background-color: #f08a18 !important; } html[data-theme="midnight"][data-midnight-buttons="off"] .btn-primary, html[data-theme="midnight"][data-midnight-buttons="off"] .btn.bg-info, html[data-theme="midnight"][data-midnight-buttons="off"] .btn.bg-primary { background-color: #5a6ef0 !important; } html[data-theme="midnight"][data-midnight-buttons="off"] .btn.light-pink-background { background-color: #ff79c6 !important; } html[data-theme="midnight"][data-midnight-buttons="off"] .btn.light-yellow-background { background-color: #a78bfa !important; } html[data-theme="midnight"][data-midnight-buttons="off"] .btn.light-green-background { background-color: #2dd4bf !important; } html[data-theme="midnight"][data-midnight-buttons="off"] .btn.light-green-background-current { background-color: #34d399 !important; } /* ── Midnight: Bootstrap .label-* → soft pill badges ── Bootstrap 3 labels have bright pastel backgrounds that clash on dark. Replace with translucent dark-tuned fills + coloured border + text, matching the pill style from the prototype. */ html[data-theme="midnight"] .label { border-radius: 7px !important; padding: 4px 9px !important; font-size: calc(11px * var(--app-font-scale)) !important; font-weight: 700 !important; border: 1px solid transparent !important; display: inline-block !important; } /* Sidebar NEW badges — same rounded pill as every other theme (top-level AND submenu), so they never render as a square in midnight. Matches the unified `.sidebar-menu .label` pill above. */ html[data-theme="midnight"] .sidebar-menu .label, html[data-theme="midnight"] .sidebar .treeview-menu .label { font-size: calc(9px * var(--app-font-scale)) !important; font-weight: 800 !important; padding: 3px 7px !important; border-radius: 999px !important; line-height: 1 !important; letter-spacing: 0.05em !important; vertical-align: middle !important; } html[data-theme="midnight"] .label-success { background: rgba(40, 210, 130, .15) !important; color: #5fe0a0 !important; border-color: rgba(40, 210, 130, .30) !important; } html[data-theme="midnight"] .label-danger { background: rgba(255, 90, 135, .14) !important; color: #ff7da2 !important; border-color: rgba(255, 90, 135, .30) !important; } html[data-theme="midnight"] .label-warning { background: rgba(245, 180, 40, .15) !important; color: #f6c45a !important; border-color: rgba(245, 180, 40, .30) !important; } html[data-theme="midnight"] .label-info { background: rgba(60, 190, 245, .14) !important; color: #6fd0f7 !important; border-color: rgba(60, 190, 245, .28) !important; } html[data-theme="midnight"] .label-default { background: rgba(120, 130, 255, .14) !important; color: #aeb6ff !important; border-color: rgba(120, 130, 255, .28) !important; } html[data-theme="midnight"] .label-primary { background: rgba(91, 124, 250, .15) !important; color: #9fb0e8 !important; border-color: rgba(91, 124, 250, .30) !important; } /* ── Midnight: box-header accent gradient ── All card headers get a subtle left-to-right accent tint so they feel elevated against the flat card background. */ html[data-theme="midnight"] .box-header { background: linear-gradient(100deg, rgba(99, 102, 241, .10), transparent) !important; } /* Development Product Info dashboard — collapsible section heading. Inline style sets background-color: azure (near-white); content-wrapper text turns white in midnight, leaving white-on-azure (invisible). */ html[data-theme="midnight"] .product_heading { background-color: var(--accent-light) !important; border-bottom-color: rgba(255, 255, 255, 0.10) !important; } html[data-theme="midnight"] .nav-tabs > li > a { background-color: #252830 !important; border-color: rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.60) !important; } html[data-theme="midnight"] .nav-tabs > li.active > a, html[data-theme="midnight"] .nav-tabs > li.active > a:focus, html[data-theme="midnight"] .nav-tabs > li.active > a:hover { background-color: #1a1d25 !important; border-color: rgba(255, 255, 255, 0.08) rgba(255, 255, 255, 0.08) transparent !important; color: #ffffff !important; } html[data-theme="midnight"] .nav-tabs-custom { background: #1a1d25 !important; border-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="midnight"] .nav-tabs-custom > .tab-content { background-color: #1a1d25 !important; } html[data-theme="midnight"] .pagination > li > a, html[data-theme="midnight"] .pagination > li > span { background-color: rgba(255, 255, 255, 0.03) !important; border-color: rgba(255, 255, 255, 0.10) !important; color: rgba(255, 255, 255, 0.65) !important; transition: background-color .12s, color .12s !important; } html[data-theme="midnight"] .pagination > li > a:hover { background-color: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; } html[data-theme="midnight"] .pagination > .active > a, html[data-theme="midnight"] .pagination > .active > a:hover, html[data-theme="midnight"] .pagination > .active > a:focus, html[data-theme="midnight"] .pagination > .active > span { background: linear-gradient(180deg, #7d8dff, #5a6ef0) !important; border-color: #4557d4 !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(91, 124, 250, .50) !important; } /* DataTables pagination — same bespoke dark treatment as .pagination above */ html[data-theme="midnight"] .dataTables_wrapper .dataTables_paginate .paginate_button { background-color: rgba(255, 255, 255, 0.03) !important; border-color: rgba(255, 255, 255, 0.10) !important; color: rgba(255, 255, 255, 0.65) !important; } html[data-theme="midnight"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background-color: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; } html[data-theme="midnight"] .dataTables_wrapper .dataTables_paginate .paginate_button.current, html[data-theme="midnight"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: linear-gradient(180deg, #7d8dff, #5a6ef0) !important; border-color: #4557d4 !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(91, 124, 250, .50) !important; } html[data-theme="midnight"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, html[data-theme="midnight"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, html[data-theme="midnight"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active { background-color: rgba(255, 255, 255, 0.03) !important; border-color: rgba(255, 255, 255, 0.06) !important; color: rgba(255, 255, 255, 0.25) !important; } html[data-theme="midnight"] .select2-container--default .select2-selection--single, html[data-theme="midnight"] .select2-container--default .select2-selection--multiple { background-color: #1e2028 !important; border-color: rgba(255, 255, 255, 0.15) !important; color: rgba(255, 255, 255, 0.87) !important; } html[data-theme="midnight"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: rgba(255, 255, 255, 0.87) !important; } html[data-theme="midnight"] .select2-dropdown { background-color: #1a1d25 !important; border-color: rgba(255, 255, 255, 0.10) !important; } html[data-theme="midnight"] .select2-container--default .select2-results__option { color: rgba(255, 255, 255, 0.80) !important; } html[data-theme="midnight"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #6366f1 !important; } html[data-theme="midnight"] .select2-search--dropdown .select2-search__field { background-color: #252830 !important; border-color: rgba(255, 255, 255, 0.12) !important; color: rgba(255, 255, 255, 0.87) !important; } html[data-theme="midnight"] .table > tbody > tr > td, html[data-theme="midnight"] .table > tbody > tr > th { /* border only — do NOT set background-color here, it overrides status row colours */ border-top-color: rgba(255, 255, 255, 0.06) !important; } html[data-theme="midnight"] .table > thead > tr > th { color: rgba(255, 255, 255, 0.86) !important; background-color: #1a1d25 !important; } html[data-theme="midnight"] .table > tbody > tr { background-color: transparent !important; } /* bg-white rows / bodies (nested tables) must not be white in dark mode */ html[data-theme="midnight"] .table > tbody > tr.bg-white, html[data-theme="midnight"] table tr.bg-white, html[data-theme="midnight"] tbody.bg-white { background-color: var(--card-bg) !important; color: rgba(255, 255, 255, 0.85) !important; } /* nested table cells — dark card bg, readable text */ html[data-theme="midnight"] tbody.bg-white > tr > td { background-color: var(--card-bg) !important; color: rgba(255, 255, 255, 0.82) !important; border-color: rgba(255, 255, 255, 0.07) !important; } html[data-theme="midnight"] .table-bordered, html[data-theme="midnight"] .table-bordered > thead > tr > th, html[data-theme="midnight"] .table-bordered > tbody > tr > td { border-color: rgba(255, 255, 255, 0.07) !important; } /* Striped — NO !important so status row background classes always win */ html[data-theme="midnight"] .table-striped > tbody > tr:nth-of-type(odd) > td, html[data-theme="midnight"] .table-striped > tbody > tr:nth-of-type(odd) > th { background-color: rgba(255, 255, 255, 0.025); } html[data-theme="midnight"] .table-hover > tbody > tr:hover > td, html[data-theme="midnight"] .table-hover > tbody > tr:hover > th { background-color: rgba(99, 102, 241, 0.10) !important; } /* DataTables — transparent base so status row colours show through */ html[data-theme="midnight"] table.dataTable tbody tr { background-color: transparent !important; color: rgba(255, 255, 255, 0.85) !important; } html[data-theme="midnight"] table.dataTable tbody tr.odd { background-color: rgba(255, 255, 255, 0.02); } html[data-theme="midnight"] table.dataTable tbody tr.even { background-color: transparent !important; } html[data-theme="midnight"] table.dataTable tbody tr:hover { /* no background override — preserves coloured status cells */ } html[data-theme="midnight"] table.dataTable tbody td { color: rgba(255, 255, 255, 0.85) !important; } /* Override the hardcoded #1e293b rule (line ~1703) — mirror exact selectors with midnight scope */ html[data-theme="midnight"] .table > tbody > tr > td, html[data-theme="midnight"] .table > tbody > tr > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: rgba(255, 255, 255, 0.85) !important; } html[data-theme="midnight"] .table > tbody > tr > td a:not([class*="btn"]):not([class*="badge"]) { color: inherit !important; } html[data-theme="midnight"] .table > tbody > tr > td a:not([class*="btn"]):not([class*="badge"]):hover { color: inherit !important; } /* Row hover: disable brightness filter — no bg-color override so coloured status cells are preserved */ html[data-theme="midnight"] .table > tbody > tr:hover > td { filter: none !important; } /* Generic td/th fallback */ html[data-theme="midnight"] td, html[data-theme="midnight"] th { color: rgba(255, 255, 255, 0.85) !important; } /* Form controls inside tables */ html[data-theme="midnight"] .table td .form-control, html[data-theme="midnight"] .table td input, html[data-theme="midnight"] .table td select { background-color: #252830 !important; color: rgba(255, 255, 255, 0.87) !important; border-color: rgba(255, 255, 255, 0.15) !important; } html[data-theme="midnight"] .dropdown-menu { background-color: #1a1d25 !important; border-color: rgba(255, 255, 255, 0.10) !important; } html[data-theme="midnight"] .dropdown-menu > li > a { color: rgba(255, 255, 255, 0.80) !important; } html[data-theme="midnight"] .dropdown-menu > li > a:hover { background-color: rgba(99, 102, 241, 0.15) !important; color: #ffffff !important; } html[data-theme="midnight"] .dropdown-menu .divider { background-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="midnight"] .modal-content { background-color: #1a1d25 !important; border-color: rgba(255, 255, 255, 0.10) !important; color: rgba(255, 255, 255, 0.87) !important; } html[data-theme="midnight"] .modal-header { border-bottom-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="midnight"] .modal-footer { border-top-color: rgba(255, 255, 255, 0.08) !important; background-color: #16181f !important; } html[data-theme="midnight"] .alert-info { background-color: rgba(99, 102, 241, 0.15) !important; border-color: rgba(99, 102, 241, 0.30) !important; color: #a5b4fc !important; } /* Content-area text — scoped to avoid sidebar conflicts */ html[data-theme="midnight"] .content-wrapper p, html[data-theme="midnight"] .content-wrapper label, html[data-theme="midnight"] .box-body label, html[data-theme="midnight"] .form-group label, html[data-theme="midnight"] .control-label { color: rgba(255, 255, 255, 0.85) !important; } html[data-theme="midnight"] .content-wrapper .text-muted, html[data-theme="midnight"] .content-wrapper small, html[data-theme="midnight"] .box small { color: rgba(255, 255, 255, 0.45) !important; } /* Sidebar nav links — always white, never blue */ html[data-theme="midnight"] .skin-blue .sidebar-menu li > a, html[data-theme="midnight"] .skin-blue .sidebar-menu li > a > span, html[data-theme="midnight"] .skin-blue .sidebar-menu li > a > i, html[data-theme="midnight"] .skin-blue .sidebar .treeview-menu > li > a { color: rgba(255, 255, 255, 0.82) !important; } html[data-theme="midnight"] .skin-blue .sidebar-menu li.active > a, html[data-theme="midnight"] .skin-blue .sidebar-menu li.active > a > span, html[data-theme="midnight"] .skin-blue .sidebar-menu > li:hover > a { color: #ffffff !important; } /* Midnight: dark text on light-background utility classes anywhere in content (filter tabs, legend chips, non-table elements). Specificity (0,3,0) beats the generic midnight text rules and wins over .content-wrapper a (0,2,1). */ html[data-theme="midnight"] .content-wrapper .light-red-backgorund, html[data-theme="midnight"] .content-wrapper .light-green-background, html[data-theme="midnight"] .content-wrapper .light-green-background-current, html[data-theme="midnight"] .content-wrapper .light-yellow-background, html[data-theme="midnight"] .content-wrapper .light-grey-background, html[data-theme="midnight"] .content-wrapper .dark-grey-background, html[data-theme="midnight"] .content-wrapper .light-white-red-background, html[data-theme="midnight"] .content-wrapper .white-background, html[data-theme="midnight"] .content-wrapper .light-orange-background, html[data-theme="midnight"] .content-wrapper .orange-background, html[data-theme="midnight"] .content-wrapper .light-pink-background, html[data-theme="midnight"] .content-wrapper .light-brown-background, html[data-theme="midnight"] .content-wrapper .sample, html[data-theme="midnight"] .content-wrapper .bill_for_payment, html[data-theme="midnight"] .content-wrapper .pending_bill { color: #1e293b !important; } html[data-theme="midnight"] .content-wrapper .light-red-backgorund *, html[data-theme="midnight"] .content-wrapper .light-green-background *, html[data-theme="midnight"] .content-wrapper .light-green-background-current *, html[data-theme="midnight"] .content-wrapper .light-yellow-background *, html[data-theme="midnight"] .content-wrapper .light-grey-background *, html[data-theme="midnight"] .content-wrapper .dark-grey-background *, html[data-theme="midnight"] .content-wrapper .light-white-red-background *, html[data-theme="midnight"] .content-wrapper .white-background *, html[data-theme="midnight"] .content-wrapper .light-orange-background *, html[data-theme="midnight"] .content-wrapper .orange-background *, html[data-theme="midnight"] .content-wrapper .light-pink-background *, html[data-theme="midnight"] .content-wrapper .light-brown-background *, html[data-theme="midnight"] .content-wrapper .sample *, html[data-theme="midnight"] .content-wrapper .bill_for_payment *, html[data-theme="midnight"] .content-wrapper .pending_bill * { color: #1e293b !important; } /* Midnight: the broad ".content-wrapper .X *" rule above (specificity 0,3,1) also cascades into the NESTED item tables (tbody.bg-white) that live inside status-coloured proforma rows (.sample / .bill_for_payment / .pending_bill / .*-background on the outer ). Those nested tables get their own dark-card bg + light text, but the broad rule was forcing every product name / code / date to #1e293b -> dark-on-dark (only the hovered row looked right, because the hover rule out-specifies it). Re-assert readable light text for nested bg-white cells at (0,3,4)/(0,8,4) so it beats the (0,3,1) rule above. */ html[data-theme="midnight"] .content-wrapper tbody.bg-white > tr > td, html[data-theme="midnight"] .content-wrapper tbody.bg-white > tr > td *:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: rgba(255, 255, 255, 0.85) !important; } /* Midnight: the "all descendants -> #1e293b" rule above also clobbers intentionally-coloured highlight markers inside .sample/.bill_for_payment/ .pending_bill rows -- the "Urgent Bill" (inline color:#ce00ff, no .redText class), the inline-coloured note , and the Note : ... inside the special-note . All three went dark-on-dark on proforma/list. Re-assert at (0,3,2)/(0,4,2) -- beats the (0,3,1) rule above -- reusing the .redText midnight hue so these alerts stay legible and on-brand. */ html[data-theme="midnight"] .content-wrapper .sample marquee, html[data-theme="midnight"] .content-wrapper .bill_for_payment marquee, html[data-theme="midnight"] .content-wrapper .pending_bill marquee, html[data-theme="midnight"] .content-wrapper .sample b.red, html[data-theme="midnight"] .content-wrapper .bill_for_payment b.red, html[data-theme="midnight"] .content-wrapper .pending_bill b.red, html[data-theme="midnight"] .content-wrapper .sample span[style*="color"], html[data-theme="midnight"] .content-wrapper .bill_for_payment span[style*="color"], html[data-theme="midnight"] .content-wrapper .pending_bill span[style*="color"] { color: #ff7da2 !important; } /* The note is ...; the rule above recolours the , but its child is still hit by ".sample *" (0,3,1) and stays dark. Recolour descendants of the inline-coloured note span. */ html[data-theme="midnight"] .content-wrapper .sample span[style*="color"] *, html[data-theme="midnight"] .content-wrapper .bill_for_payment span[style*="color"] *, html[data-theme="midnight"] .content-wrapper .pending_bill span[style*="color"] * { color: #ff7da2 !important; } /* Inner item-table header (thead.inner-table-head) sits inside the status-coloured , so ".sample *" (0,3,1) forced its column headings (#, Material, Code, Product Name, ...) to dark #1e293b -> unreadable. Restore light header text at (0,3,4). Applies to every inner table header, brightening the dim 0.65 too. */ html[data-theme="midnight"] .content-wrapper thead.inner-table-head > tr > th { color: rgba(255, 255, 255, 0.86) !important; } /* Bootstrap bg-* utility classes in content area — light pastel backgrounds need dark text. Exclude .btn elements: real buttons manage their own text colour. */ html[data-theme="midnight"] .content-wrapper .bg-success:not(.btn), html[data-theme="midnight"] .content-wrapper .bg-warning:not(.btn), html[data-theme="midnight"] .content-wrapper .bg-info:not(.btn), html[data-theme="midnight"] .content-wrapper .bg-danger:not(.btn) { color: #1e293b !important; } /* Content-area links only — scoped away from sidebar */ html[data-theme="midnight"] .content-wrapper a:not(.btn), html[data-theme="midnight"] .content-header a:not(.btn) { color: #a5b4fc !important; } html[data-theme="midnight"] .content-wrapper a:not(.btn):hover, html[data-theme="midnight"] .content-header a:not(.btn):hover { color: #c7d2fe !important; } /* ── Midnight: lock dark text on light-background elements (all states) ── Same specificity (0,4,1) as the a:not(.btn) rules above; later in file → wins cascade. Covers filter tabs, legend chips, and any other with a light-bg class. */ html[data-theme="midnight"] .content-wrapper a.light-red-backgorund, html[data-theme="midnight"] .content-wrapper a.light-green-background, html[data-theme="midnight"] .content-wrapper a.light-green-background-current, html[data-theme="midnight"] .content-wrapper a.light-yellow-background, html[data-theme="midnight"] .content-wrapper a.light-grey-background, html[data-theme="midnight"] .content-wrapper a.dark-grey-background, html[data-theme="midnight"] .content-wrapper a.light-white-red-background, html[data-theme="midnight"] .content-wrapper a.white-background, html[data-theme="midnight"] .content-wrapper a.light-orange-background, html[data-theme="midnight"] .content-wrapper a.orange-background, html[data-theme="midnight"] .content-wrapper a.light-pink-background, html[data-theme="midnight"] .content-wrapper a.light-brown-background, html[data-theme="midnight"] .content-wrapper a.sample, html[data-theme="midnight"] .content-wrapper a.bill_for_payment, html[data-theme="midnight"] .content-wrapper a.pending_bill, html[data-theme="midnight"] .content-wrapper a.bg-success:not(.btn), html[data-theme="midnight"] .content-wrapper a.bg-warning:not(.btn), html[data-theme="midnight"] .content-wrapper a.bg-info:not(.btn), html[data-theme="midnight"] .content-wrapper a.bg-danger:not(.btn), html[data-theme="midnight"] .content-wrapper a.light-red-backgorund:hover, html[data-theme="midnight"] .content-wrapper a.light-green-background:hover, html[data-theme="midnight"] .content-wrapper a.light-green-background-current:hover, html[data-theme="midnight"] .content-wrapper a.light-yellow-background:hover, html[data-theme="midnight"] .content-wrapper a.light-grey-background:hover, html[data-theme="midnight"] .content-wrapper a.dark-grey-background:hover, html[data-theme="midnight"] .content-wrapper a.light-white-red-background:hover, html[data-theme="midnight"] .content-wrapper a.white-background:hover, html[data-theme="midnight"] .content-wrapper a.light-orange-background:hover, html[data-theme="midnight"] .content-wrapper a.orange-background:hover, html[data-theme="midnight"] .content-wrapper a.light-pink-background:hover, html[data-theme="midnight"] .content-wrapper a.light-brown-background:hover, html[data-theme="midnight"] .content-wrapper a.sample:hover, html[data-theme="midnight"] .content-wrapper a.bill_for_payment:hover, html[data-theme="midnight"] .content-wrapper a.pending_bill:hover, html[data-theme="midnight"] .content-wrapper a.bg-success:not(.btn):hover, html[data-theme="midnight"] .content-wrapper a.bg-warning:not(.btn):hover, html[data-theme="midnight"] .content-wrapper a.bg-info:not(.btn):hover, html[data-theme="midnight"] .content-wrapper a.bg-danger:not(.btn):hover { color: #1e293b !important; } /* Breadcrumb active item stays muted, not link-blue */ html[data-theme="midnight"] .content-header .breadcrumb > .active { color: rgba(255, 255, 255, 0.40) !important; } /* ================================================================ TOP NAVBAR / HEADER ================================================================ */ /* Navbar side — white background with subtle border */ .skin-blue .main-header .navbar, .skin-blue .main-header > .navbar { background-color: var(--topbar-bg) !important; border-bottom: 1px solid var(--topbar-border) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; } /* Full header element — no extra border or shadow */ .skin-blue .main-header { border-bottom: none !important; box-shadow: none !important; } /* Logo area */ .skin-blue .main-header .logo { background-color: var(--sidebar-bg) !important; color: #ffffff !important; font-family: var(--app-font-family) !important; font-weight: 700 !important; font-size: calc(15px * var(--app-font-scale)) !important; letter-spacing: -0.01em; border-bottom: none !important; border-right: none !important; font-style: normal !important; text-align: left !important; } /* Logo text styling */ .skin-blue .main-header .logo b, .skin-blue .main-header .logo i, .skin-blue .main-header .logo span { font-family: var(--app-font-family) !important; font-style: normal !important; font-weight: 700 !important; } .skin-blue .main-header .logo .logo-lg { display: block !important; visibility: visible !important; opacity: 1 !important; } /* ══ One-panel sidebar ══════════════════════════════════════════════════ The brand (Uf badge + name + Online) lives inside the sidebar/aside as one continuous panel. The AdminLTE header logo box is hidden and the sidebar is pulled to the very top, so there's no header/aside seam. ────────────────── */ .skin-blue .main-header .logo { display: none !important; } .main-sidebar, .left-side { padding-top: 0 !important; } /* Brand block — transparent, so it shows the sidebar's own background */ .sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 20px 16px 16px; overflow: hidden; white-space: nowrap; } /* The clickable link wraps only the logo + text, so the hand cursor never shows over the surrounding padding (e.g. below "Online"). */ .sidebar-brand .sb-link { display: inline-flex; align-items: center; gap: 12px; min-width: 0; } /* The fixed header (z-index 1030) overlaps the top ~50px of the sidebar and intercepts pointer events on the brand link sitting there — making it un-clickable (no hand cursor). Lift the sidebar above the header so the brand is interactive. Header controls (toggle, navbar) sit past the 230px sidebar width, so they are unaffected. */ .main-sidebar { z-index: 1031 !important; } .sidebar-brand, .sidebar-brand:hover, .sidebar-brand:focus, .sidebar-brand:active, .sidebar-brand *, .sidebar-brand:hover *, .sidebar-brand:focus * { text-decoration: none !important; } .sidebar-brand .sb-badge { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: #ffffff; color: var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--app-font-family); font-weight: 800; font-size: calc(15px * var(--app-font-scale)); box-shadow: 0 2px 7px rgba(0, 0, 0, 0.20); } .sidebar-brand .sb-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; white-space: normal; } .sidebar-brand .sb-text > b { font-family: var(--app-font-family); font-size: calc(14px * var(--app-font-scale)); font-weight: 800; color: #ffffff; letter-spacing: -0.01em; white-space: normal; line-height: 1.15; } .sidebar-brand .sb-text > small { font-size: calc(11px * var(--app-font-scale)); font-weight: 600; color: rgba(255, 255, 255, 0.72); margin-top: 2px; } .sidebar-brand .sb-text > small .fa-circle { color: #3ee08a; font-size: 7px; margin-right: 4px; vertical-align: middle; } /* Collapsed (mini) sidebar — brand shows just the centered Uf badge */ body.sidebar-collapse .sidebar-brand { justify-content: center; padding: 14px 0; gap: 0; } body.sidebar-collapse .sidebar-brand .sb-text { display: none; } /* Collapsed (mini) sidebar — keep the user-panel avatar a clean centered circle. AdminLTE hides the panel's text on collapse but leaves the floated image, whose default `width:100%; height:43px` (no object-fit) squeezes it into a stretched "droplet" sliver on the 50px rail. Center it and lock a fixed square + object-fit so it stays a tidy round avatar, the way Uflow ERP's collapsed brand does. */ body.sidebar-mini.sidebar-collapse .main-sidebar .user-panel { padding: 14px 0 12px !important; text-align: center !important; } body.sidebar-mini.sidebar-collapse .main-sidebar .user-panel > .image { float: none !important; display: inline-block !important; margin: 0 auto !important; width: auto !important; } body.sidebar-mini.sidebar-collapse .main-sidebar .user-panel > .image > img { width: 38px !important; height: 38px !important; max-width: 38px !important; object-fit: cover !important; display: block !important; } /* Collapsed (mini) sidebar — nav items go full-width and the icon centers in the 50px rail (drop the inset pill + left padding). NOTE: skin-blue is a class ON , so it must be glued to the body selector (.sidebar-mini.sidebar-collapse), not written as a descendant. */ .sidebar-mini.sidebar-collapse .sidebar-menu > li > a { margin-left: 0 !important; margin-right: 0 !important; border-radius: 0 !important; padding-left: 0 !important; padding-right: 0 !important; text-align: center !important; } .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .fa, .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .glyphicon, .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .ion { margin-right: 0 !important; width: 100% !important; text-align: center !important; } /* Collapsed: hide the top-level chevron — it's a (a span WITHOUT .pull-right), so AdminLTE's flyout rule ".sidebar-mini...sidebar-collapse .sidebar-menu>li:hover>a>span:not(.pull-right)" forces it display:block and floats it (left:180px; top:-22px) as a detached box next to the flyout header. Override it with higher specificity. */ body.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > span.pull-right-container, .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .pull-right-container { display: none !important; } /* …and render the chevron cleanly INSIDE the flyout header label (next to the name, vertically centred) instead. Only for parent (treeview) items. */ .sidebar-mini.sidebar-collapse .sidebar-menu > li.treeview:hover > a > span:not(.pull-right) { display: flex !important; align-items: center !important; } .sidebar-mini.sidebar-collapse .sidebar-menu > li.treeview:hover > a > span:not(.pull-right)::after { content: "\f104"; font-family: FontAwesome; margin-left: 16px; font-size: calc(12px * var(--app-font-scale)); opacity: 0.5; line-height: 1; } /* Sidebar COLLAPSED (mini) — show short "Uf" cleanly, hide full text */ body.sidebar-mini.sidebar-collapse .skin-blue .main-header .logo .logo-lg, body.sidebar-mini .skin-blue .main-header .logo .logo-lg { display: none !important; } body.sidebar-mini.sidebar-collapse .skin-blue .main-header .logo .logo-mini, body.sidebar-mini .skin-blue .main-header .logo .logo-mini { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; font-family: var(--app-font-family) !important; font-size: calc(16px * var(--app-font-scale)) !important; font-weight: 800 !important; font-style: normal !important; color: #ffffff !important; letter-spacing: 0.5px !important; } /* But when sidebar is explicitly opened via hamburger on a mini-sidebar page, show the full logo (AdminLTE adds sidebar-open class) */ body.sidebar-mini.sidebar-open .skin-blue .main-header .logo .logo-lg { display: block !important; } body.sidebar-mini.sidebar-open .skin-blue .main-header .logo .logo-mini { display: none !important; } /* Kill the mobile navbar-toggle on ALL screens — no media query needed, we have our own sidebar-toggle with fa-bars */ .navbar-toggle, .main-header .navbar-toggle { display: none !important; visibility: hidden !important; } .skin-blue .main-header .logo:hover { background-color: var(--sidebar-bg) !important; } /* Navbar links */ .skin-blue .main-header .navbar .nav > li > a { color: var(--topbar-text) !important; font-family: var(--app-font-family) !important; font-size: calc(13px * var(--app-font-scale)) !important; } .skin-blue .main-header .navbar .nav > li > a:hover, .skin-blue .main-header .navbar .nav > li > a:focus { background-color: var(--accent-light) !important; color: var(--accent) !important; } .skin-blue .main-header .navbar .sidebar-toggle { color: var(--topbar-text) !important; font-size: calc(16px * var(--app-font-scale)); } .skin-blue .main-header .navbar .sidebar-toggle:hover { background-color: var(--accent-light) !important; color: var(--accent) !important; } /* User image */ .main-header .navbar .nav > li > a > img.user-image { border: 2px solid var(--accent-light2); border-radius: 50%; } /* User name in topbar */ .main-header .navbar .nav > li > a > span.hidden-xs { font-family: var(--app-font-family) !important; font-weight: 500 !important; font-size: calc(13px * var(--app-font-scale)) !important; color: var(--topbar-text) !important; } /* Topbar dropdowns */ .skin-blue .main-header .navbar .dropdown-menu { border: 1px solid var(--card-border) !important; border-radius: 10px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important; padding: 6px !important; font-family: var(--app-font-family) !important; } .skin-blue .main-header .navbar .dropdown-menu > li > a { border-radius: 6px !important; padding: 8px 12px !important; font-size: calc(13px * var(--app-font-scale)) !important; color: var(--text-secondary) !important; } .skin-blue .main-header .navbar .dropdown-menu > li > a:hover { background-color: var(--accent-light) !important; color: var(--accent) !important; } /* ── User menu dropdown — gradient header + vertical icon actions ── */ .skin-blue .main-header li.user-header { height: auto !important; background: linear-gradient(135deg, var(--accent), var(--accent-hover)) !important; border-radius: 8px 8px 0 0 !important; padding: 20px 14px 18px !important; text-align: center !important; } /* avatar + online status dot */ .skin-blue .main-header li.user-header .user-avatar-wrap { position: relative !important; display: inline-block !important; line-height: 0 !important; } .skin-blue .main-header li.user-header .user-avatar-wrap > img { width: 78px !important; height: 78px !important; border: 3px solid rgba(255, 255, 255, 0.45) !important; background: rgba(255, 255, 255, 0.12) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important; } .skin-blue .main-header li.user-header .user-online-dot { position: absolute !important; right: 4px !important; bottom: 4px !important; width: 15px !important; height: 15px !important; border-radius: 50% !important; background: #22c55e !important; border: 2.5px solid #ffffff !important; } /* name + designation */ .skin-blue .main-header li.user-header > p { margin: 12px 0 0 !important; padding: 0 !important; color: #ffffff !important; font-family: var(--app-font-family) !important; font-weight: 600 !important; font-size: calc(15px * var(--app-font-scale)) !important; line-height: 1.3 !important; } .skin-blue .main-header li.user-header > p > small { display: block !important; margin-top: 4px !important; color: rgba(255, 255, 255, 0.78) !important; font-weight: 400 !important; font-size: calc(11.5px * var(--app-font-scale)) !important; letter-spacing: 0.2px !important; } /* vertical action list */ .skin-blue .main-header li.user-actions { background: var(--card-bg) !important; border-radius: 0 0 8px 8px !important; padding: 6px !important; } .skin-blue .main-header li.user-actions .user-action { display: flex !important; align-items: center !important; gap: 11px !important; padding: 9px 12px !important; border-radius: 7px !important; color: var(--text-secondary) !important; font-family: var(--app-font-family) !important; font-weight: 500 !important; font-size: calc(13px * var(--app-font-scale)) !important; text-decoration: none !important; transition: background 0.15s ease, color 0.15s ease !important; } .skin-blue .main-header li.user-actions .user-action > i { width: 18px !important; text-align: center !important; font-size: 14px !important; color: var(--text-muted) !important; } .skin-blue .main-header li.user-actions .user-action:hover { background: var(--accent-light) !important; color: var(--accent) !important; } .skin-blue .main-header li.user-actions .user-action:hover > i { color: var(--accent) !important; } .skin-blue .main-header li.user-actions .user-action-signout:hover { background: rgba(220, 38, 38, 0.10) !important; color: #dc2626 !important; } .skin-blue .main-header li.user-actions .user-action-signout:hover > i { color: #dc2626 !important; } /* Back To CRM button — outlined ghost style, fits the white topbar */ .navbar-custom-menu .btn-google, .navbar-custom-menu .btn-google:visited { background-color: transparent !important; border: 1.5px solid var(--accent) !important; color: var(--accent) !important; border-radius: 7px !important; font-family: var(--app-font-family) !important; font-size: calc(12px * var(--app-font-scale)) !important; font-weight: 600 !important; padding: 5px 14px !important; box-shadow: none !important; transition: background-color 0.15s, color 0.15s !important; } .navbar-custom-menu .btn-google:hover, .navbar-custom-menu .btn-google:focus, .navbar-custom-menu .btn-google:active { background-color: var(--accent) !important; border-color: var(--accent) !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important; } /* ================================================================ HAMBURGER TOGGLE BUTTON ================================================================ */ /* AdminLTE uses ::before to draw its own hamburger lines. We have an explicit fa-bars icon, so kill the ::before ghost box. */ .sidebar-toggle::before, .skin-blue .main-header .navbar .sidebar-toggle::before { display: none !important; content: none !important; } .skin-blue .main-header .navbar .sidebar-toggle { display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 50px !important; padding: 0 !important; font-size: calc(17px * var(--app-font-scale)) !important; color: var(--topbar-text) !important; background: transparent !important; border: none !important; float: left !important; } .skin-blue .main-header .navbar .sidebar-toggle:hover { background-color: var(--accent-light) !important; color: var(--accent) !important; } .skin-blue .main-header .navbar .sidebar-toggle .fa-bars { font-size: calc(17px * var(--app-font-scale)) !important; line-height: 1 !important; } /* ================================================================ THEME PICKER — single icon with dropdown ================================================================ */ /* Navbar items vertical centering */ .navbar-custom-menu .nav.navbar-nav { display: flex !important; align-items: center !important; height: 50px !important; } .navbar-custom-menu .nav.navbar-nav > li { display: flex !important; align-items: center !important; } /* CRM button alignment */ .navbar-crm-btn { padding: 0 8px !important; } .navbar-crm-btn .btn { margin: 0 !important; vertical-align: middle !important; } /* Theme picker container */ .theme-picker-nav { position: relative !important; padding: 0 6px !important; } /* The palette icon button — plain icon, no box */ .theme-toggle-btn { width: auto !important; height: auto !important; border-radius: 0 !important; border: none !important; background: transparent !important; padding: 4px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: transform 0.15s !important; outline: none !important; } .theme-toggle-btn:hover, .theme-toggle-btn.open { transform: scale(1.12) !important; } .theme-toggle-icon { width: 26px; height: 26px; display: block; } /* Dropdown panel */ .theme-dropdown { display: none; position: absolute !important; top: calc(100% + 6px) !important; right: 0 !important; background: var(--card-bg) !important; border: 1px solid var(--card-border) !important; border-radius: 12px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06) !important; padding: 14px 16px !important; z-index: 9999 !important; min-width: 252px !important; animation: dropdownFadeIn 0.15s ease !important; } .theme-dropdown.open { display: block !important; } @keyframes dropdownFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .theme-dropdown-label { font-family: var(--app-font-family) !important; font-size: calc(10px * var(--app-font-scale)) !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; color: var(--text-muted) !important; margin: 0 0 12px !important; } /* Add breathing room above any label that follows the theme-dot grid (e.g. "FONT SIZE") so it doesn't touch the last row of colour dots. */ .theme-dot-row + .theme-dropdown-label { margin-top: 18px !important; } .theme-dot-row { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 10px 12px !important; } .theme-dot-option { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 5px !important; } .theme-dot-option span { font-family: var(--app-font-family) !important; font-size: calc(10px * var(--app-font-scale)) !important; color: var(--text-muted) !important; font-weight: 500 !important; } .theme-dot { width: 28px !important; height: 28px !important; border-radius: 8px !important; border: 2.5px solid transparent !important; cursor: pointer !important; padding: 0 !important; transition: transform 0.15s, box-shadow 0.15s !important; outline: none !important; display: block !important; } .theme-dot:hover { transform: scale(1.15) !important; } .theme-dot[data-theme="indigo"] { background: #2563eb !important; } .theme-dot[data-theme="teal"] { background: #0891b2 !important; } .theme-dot[data-theme="crimson"]{ background: #dc2626 !important; } .theme-dot[data-theme="green"] { background: #059669 !important; } .theme-dot[data-theme="purple"] { background: linear-gradient(135deg, #832d9f 0%, #1a0030 100%) !important; } .theme-dot[data-theme="arctic"] { background: linear-gradient(135deg, #38bdf8 0%, #0369a1 100%) !important; } .theme-dot[data-theme="gold"] { background: linear-gradient(135deg, #fbbf24 0%, #92400e 100%) !important; } .theme-dot[data-theme="midnight"] { background: linear-gradient(135deg, #6366f1 0%, #0d0d12 100%) !important; } .theme-dot[data-theme="classic"] { background: linear-gradient(135deg, #3c8dbc 0%, #222d32 100%) !important; } .theme-dot.active { border-color: #ffffff !important; box-shadow: 0 0 0 2.5px var(--accent) !important; transform: scale(1.1) !important; } /* Font-size quick buttons in the palette dropdown */ .theme-fontsize-row { display: flex; gap: 6px; margin: 4px 0 6px; } .fontsize-btn { flex: 1; border: 1px solid var(--border-color, #d9dde3); background: transparent; color: var(--text-primary); border-radius: 5px; padding: 4px 0; line-height: 1.2; cursor: pointer; transition: all 0.15s ease; } .fontsize-btn:hover { border-color: var(--accent); } .fontsize-btn.active { border-color: var(--accent); background: var(--accent); color: #fff; } .theme-more-settings { display: block; /* Break out of the dropdown's 14px 16px padding so the footer spans the full width and sits flush against the rounded bottom corners. */ margin: 14px -16px -14px !important; padding: 12px 16px !important; border-top: 1px solid var(--card-border) !important; border-bottom-left-radius: 12px !important; border-bottom-right-radius: 12px !important; font-family: var(--app-font-family) !important; font-size: calc(12px * var(--app-font-scale)) !important; font-weight: 600 !important; text-align: center !important; color: var(--accent) !important; background: transparent !important; text-decoration: none !important; outline: none !important; transition: background 0.15s ease !important; } .theme-more-settings:hover, .theme-more-settings:focus { background: var(--accent-muted) !important; color: var(--accent) !important; text-decoration: none !important; } /* ================================================================ CONTENT HEADER (page title bar) ================================================================ */ .content-header { background: transparent !important; padding: 12px 20px 4px !important; border-bottom: none !important; } .content-header h1 { font-family: var(--app-font-family) !important; font-size: calc(18px * var(--app-font-scale)) !important; font-weight: 600 !important; color: var(--text-primary) !important; letter-spacing: -0.01em !important; line-height: 1.3 !important; } .content-header .breadcrumb { background: transparent !important; padding: 0 !important; margin: 0 !important; font-size: calc(12px * var(--app-font-scale)) !important; font-family: var(--app-font-family) !important; } .content-header .breadcrumb > li > a { color: var(--accent) !important; font-weight: 400 !important; } .content-header .breadcrumb > .active { color: var(--text-muted) !important; } /* ================================================================ BUTTONS ================================================================ */ .btn { font-family: var(--app-font-family) !important; font-weight: 500 !important; font-size: calc(12.5px * var(--app-font-scale)) !important; letter-spacing: 0.01em; border-radius: 7px !important; padding: 6px 14px !important; transition: all 0.15s ease !important; border-width: 1px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important; } .btn:hover, .btn:focus { box-shadow: 0 2px 8px rgba(0,0,0,0.16) !important; } .btn:active { transform: translateY(1px); } .btn-primary, .btn-primary:visited { background-color: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-text) !important; } .btn-primary:hover, .btn-primary:focus { background-color: var(--accent-hover) !important; border-color: var(--accent-hover) !important; color: var(--accent-text) !important; } .btn-default { background-color: #ffffff !important; border-color: var(--input-border) !important; color: var(--text-secondary) !important; } .btn-default:hover, .btn-default:focus { background-color: var(--accent-light) !important; border-color: var(--accent) !important; color: var(--accent) !important; } .btn-info { background-color: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-text) !important; } .btn-info:hover, .btn-info:focus { background-color: var(--accent-hover) !important; border-color: var(--accent-hover) !important; color: var(--accent-text) !important; } .btn-success { background-color: #059669 !important; border-color: #059669 !important; color: #ffffff !important; } .btn-success:hover { background-color: #047857 !important; border-color: #047857 !important; } .btn-warning { background-color: #d97706 !important; border-color: #d97706 !important; color: #ffffff !important; } .btn-warning:hover { background-color: #b45309 !important; border-color: #b45309 !important; } .btn-danger, .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger { background-color: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; } .btn-danger:hover, .btn-danger:focus, .btn-danger:active { background-color: #b91c1c !important; border-color: #b91c1c !important; } .btn-flat { border-radius: 7px !important; } /* AdminLTE btn-* colour variants not covered by btn-primary/info/etc */ .btn-light-blue { background-color: #3b82f6 !important; border-color: #3b82f6 !important; color: #ffffff !important; } .btn-light-blue:hover, .btn-light-blue:focus { background-color: #2563eb !important; border-color: #2563eb !important; } .btn-aqua { background-color: #0891b2 !important; border-color: #0891b2 !important; color: #ffffff !important; } .btn-aqua:hover { background-color: #0e7490 !important; } /* btn-inverse — AdminLTE dark button; soften to slate instead of near-black */ .btn-inverse { background-color: #64748b !important; border-color: #64748b !important; color: #ffffff !important; } .btn-inverse:hover, .btn-inverse:focus { background-color: #475569 !important; border-color: #475569 !important; } .btn-sm { font-size: calc(11.5px * var(--app-font-scale)) !important; padding: 4px 10px !important; } .btn-xs { font-size: calc(11px * var(--app-font-scale)) !important; padding: 2px 8px !important; border-radius: 5px !important; } .btn-lg { font-size: calc(14px * var(--app-font-scale)) !important; padding: 9px 20px !important; } /* ================================================================ BOX / CARD / PANEL (AdminLTE .box) ================================================================ */ .box { background: var(--card-bg) !important; border: 1px solid var(--card-border) !important; border-radius: 12px !important; box-shadow: var(--card-shadow) !important; margin-bottom: 20px !important; } .box.box-primary { border-top: 3px solid var(--accent) !important; } .box.box-info { border-top: 3px solid var(--accent) !important; } .box.box-success { border-top: 3px solid #059669 !important; } .box.box-warning { border-top: 3px solid #d97706 !important; } .box.box-danger { border-top: 3px solid #dc2626 !important; } .box-header { background: var(--card-bg) !important; border-bottom: 1px solid var(--card-border) !important; border-radius: 12px 12px 0 0 !important; padding: 12px 18px !important; } .box-header.with-border { border-bottom: 1px solid var(--card-border) !important; } .box-header .box-title { font-family: var(--app-font-family) !important; font-weight: 600 !important; font-size: calc(13.5px * var(--app-font-scale)) !important; color: var(--text-primary) !important; letter-spacing: -0.01em !important; } .box-body { background: var(--card-bg) !important; border-radius: 0 0 12px 12px !important; padding: 16px 18px !important; } /* When a .box-body is ALSO a .row (e.g. #edit_client on the inquiry edit/view forms), Bootstrap's -15px row gutter margins would leak past the card edge because .box has no overflow:hidden — making the body bulge ~15px wider than the header on each side. The box-body already supplies side padding, so zero out the row's negative margins here. Inner .col-* keep their gutter padding. */ .box-body.row { margin-left: 0 !important; margin-right: 0 !important; } .box-footer { background: var(--body-bg) !important; border-top: 1px solid var(--card-border) !important; border-radius: 0 0 12px 12px !important; padding: 10px 18px !important; } /* Info boxes on dashboard — modernized to match .db-stat-card */ .info-box { display: flex !important; align-items: stretch; background: var(--card-bg) !important; border-radius: 14px !important; box-shadow: var(--card-shadow) !important; border: 1px solid var(--card-border) !important; overflow: hidden; transition: transform .15s, box-shadow .15s; } .info-box:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-lg) !important; } .info-box-icon { float: none; flex: 0 0 64px; width: 64px !important; height: auto !important; min-height: 100%; font-size: calc(26px * var(--app-font-scale)) !important; line-height: normal !important; display: flex; align-items: center; justify-content: center; border-radius: 0 !important; } .info-box-icon > img { max-width: 100%; } .info-box-content { flex: 1; min-width: 0; margin-left: 0 !important; padding: 12px 16px !important; display: flex; flex-direction: column; justify-content: center; color: var(--text-primary); } .info-box-content .info-box-text, .info-box-content .info-box-number { font-family: var(--app-font-family) !important; } .info-box-text { font-size: calc(11px * var(--app-font-scale)) !important; font-weight: 600 !important; color: var(--text-secondary); letter-spacing: .3px; } .info-box-content .info-box-number { font-weight: 800 !important; font-size: calc(20px * var(--app-font-scale)) !important; letter-spacing: -.3px; } .small-box { border-radius: 10px !important; box-shadow: var(--card-shadow-lg) !important; overflow: hidden !important; } .small-box h3, .small-box p { font-family: var(--app-font-family) !important; } /* ================================================================ TABLES + DATATABLES ================================================================ */ .table { font-family: var(--app-font-family) !important; font-size: calc(12.5px * var(--app-font-scale)) !important; } /* ── Table headers — modern minimal ── Headers wrap at word boundaries (max 2 lines naturally) so column width is driven by cell data, not label length. Sort icon is already float:none so it stays inline after the last word. Design: clean white bg, muted text, bold accent bottom border. */ .table > thead > tr > th { font-family: var(--app-font-family) !important; font-size: calc(11px * var(--app-font-scale)) !important; font-weight: 600 !important; color: var(--text-secondary) !important; background-color: var(--card-bg) !important; border-bottom: 3px solid var(--accent) !important; border-top: none !important; padding: 6px 20px 6px 8px !important; line-height: 1.35 !important; white-space: normal !important; overflow-wrap: break-word !important; overflow: hidden !important; min-width: 55px !important; text-align: center !important; vertical-align: middle !important; letter-spacing: 0.01em !important; position: relative !important; } /* 2-line hard cap on sortable column headers via column_sort_link(). inline-block keeps the inline so the sort stays on the same line. max-height clips at exactly 2 lines (font-size 11px × line-height 1.35 × 2). */ .table > thead > tr > th .th-label { display: inline-block !important; max-height: 2.7em !important; overflow: hidden !important; vertical-align: middle !important; } /* Hover: link text turns accent so the column is clearly clickable */ .table > thead > tr > th a { color: var(--text-secondary) !important; text-decoration: none !important; } .table > thead > tr > th a:hover { color: var(--accent) !important; } /* Active sort column: bold accent text */ .table > thead > tr > th.sorting_asc a, .table > thead > tr > th.sorting_desc a { color: var(--accent) !important; font-weight: 700 !important; } /* ── thead.gradient — same modern style, no old gradient ── */ thead.gradient tr { background: var(--card-bg) !important; } thead.gradient tr th { background-color: transparent !important; color: var(--text-secondary) !important; border-bottom: 3px solid var(--accent) !important; border-top: none !important; } thead.gradient tr th a { color: var(--text-secondary) !important; text-decoration: none !important; } thead.gradient tr th a:hover, thead.gradient tr th.sorting_asc a, thead.gradient tr th.sorting_desc a { color: var(--accent) !important; font-weight: 700 !important; } thead.gradient tr th .fa { color: var(--text-muted) !important; opacity: 0.55 !important; } thead.gradient tr th.sorting_asc .fa, thead.gradient tr th.sorting_desc .fa { color: var(--accent) !important; opacity: 1 !important; } /* ── DataTables sort indicator override ── DataTables loads TWO sort indicators: 1. jquery.dataTables.min.css → background-image (sort_both.png etc.) 2. dataTables.bootstrap.css → position:absolute ::after with Glyphicons font column_sort_link ALSO injects . Suppress both DataTables indicators; let the FA icon be the only one. */ table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc { background-image: none !important; } table.dataTable thead .sorting::after, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::after { display: none !important; content: none !important; } /* Normalise padding — no longer reserving space for the now-hidden indicators */ .table > thead > tr > th.sorting, .table > thead > tr > th.sorting_asc, .table > thead > tr > th.sorting_desc { padding-right: 12px !important; } /* Sort icon — absolutely positioned at right-center of the , vertically centered regardless of how many lines the label wraps to */ .table > thead > tr > th .fa.pull-right { position: absolute !important; right: 5px !important; top: 50% !important; transform: translateY(-50%) !important; float: none !important; margin: 0 !important; font-size: calc(10px * var(--app-font-scale)) !important; opacity: 0.55 !important; color: var(--text-muted) !important; } /* Brighter for active sort direction */ .table > thead > tr > th.sorting_asc .fa.pull-right, .table > thead > tr > th.sorting_desc .fa.pull-right { opacity: 1 !important; color: var(--accent) !important; } /* Thin row-separator rows (a single full-width acting as a coloured divider) must not inherit the cell padding/border below — that turns the intended ~2px line into a thick bar. Higher specificity than the cell rule + !important so the inline height/padding:0 is honoured. */ .table > tbody > tr.row-separator-line > td { padding: 0 !important; border: none !important; height: 2px !important; line-height: 0 !important; } /* Opt-in top alignment for list tables whose rows can grow tall (e.g. proforma list, where the Bill No column otherwise floats to the vertical centre beside a tall nested item table). `>` combinators keep this to the outer table only — nested tables inside a cell keep their own alignment. Beats the middle rule below via the extra class + !important. */ .table.vtop-rows > tbody > tr > td { vertical-align: top !important; } .table > tbody > tr > td { font-family: var(--app-font-family) !important; font-size: calc(12.5px * var(--app-font-scale)) !important; vertical-align: middle !important; /* Row separator only — no vertical cell borders */ border-top: 1px solid rgba(0,0,0,0.055) !important; border-left: none !important; border-right: none !important; padding: 7px 10px !important; /* DO NOT override background-color — row colors are intentional status indicators */ } /* Restore FontAwesome font — FA4 sets font-family without !important so Lexend from .table td would otherwise win via inheritance cascade */ .table .fa, .table [class*="fa-"] { font-family: FontAwesome !important; } /* First column (IDs like "PRC - 112930") — never wrap mid-code */ .table > tbody > tr > td:first-child { white-space: nowrap !important; } /* Remove column dividers from header too */ .table > thead > tr > th { border-left: none !important; border-right: none !important; } /* Borderless table-bordered override — app uses table-bordered but we want clean rows */ .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td { border-left: none !important; border-right: none !important; } .table-bordered { border-left: none !important; border-right: none !important; } /* Ensure text on any colored cell background is always readable. Exclude: btn anchors/spans (own color rules), FA/Glyphicon icon spans, badges. */ .table > tbody > tr > td, .table > tbody > tr > td a:not([class*="btn"]):not([class*="badge"]), .table > tbody > tr > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #1e293b !important; } /* ── Preserve .redText/.greenText/etc. status colours inside table cells ── The "readable text" rules above (up to specificity 0,6,4) beat the plain .xxxText utility classes (0,1,0) from custom.css, so status-coloured links /spans/cells silently turn into the default #1e293b cell colour. Re-assert with enough :not() chains + the .xxxText class itself to win the cascade. */ .table > tbody > tr > td.redText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), .table > tbody > tr > td .redText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: red !important; } .table > tbody > tr > td.greenText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), .table > tbody > tr > td .greenText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: green !important; } .table > tbody > tr > td.blueText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), .table > tbody > tr > td .blueText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: blue !important; } .table > tbody > tr > td.orangeText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), .table > tbody > tr > td .orangeText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: orange !important; } .table > tbody > tr > td.yellowText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), .table > tbody > tr > td .yellowText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: yellow !important; } .table > tbody > tr > td.pinkText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), .table > tbody > tr > td .pinkText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: pink !important; } .table > tbody > tr > td.whiteText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), .table > tbody > tr > td .whiteText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: white !important; } /* ── Preserve .text-blue/.text-red/etc. (AdminLTE + Bootstrap text-colour utilities) inside table cells ── same cascade problem as .xxxText above: the "readable text" rule (0,6,4) beats these single-class (0,1,0) utilities from the "TEXT UTILITY COLOR OVERRIDES" block, so e.g. silently turns into the default #1e293b cell colour (reported on raw_material/stock/list — "14 Days to go" rendering dark instead of blue). Re-assert with the same :not() chain escalation (0,7,3), grouping classes that share a colour via :is(). .text-black is omitted — it already matches the base #1e293b. */ .table > tbody > tr > td:is(.text-primary, .text-info):not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), .table > tbody > tr > td :is(.text-primary, .text-info):not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: var(--accent) !important; } .table > tbody > tr > td:is(.text-success, .text-green):not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), .table > tbody > tr > td :is(.text-success, .text-green):not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #059669 !important; } .table > tbody > tr > td:is(.text-danger, .text-red):not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), .table > tbody > tr > td :is(.text-danger, .text-red):not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #dc2626 !important; } .table > tbody > tr > td:is(.text-warning, .text-orange):not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), .table > tbody > tr > td :is(.text-warning, .text-orange):not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #d97706 !important; } .table > tbody > tr > td.text-blue:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), .table > tbody > tr > td .text-blue:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #2563eb !important; } .table > tbody > tr > td.text-yellow:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), .table > tbody > tr > td .text-yellow:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #b45309 !important; } .table > tbody > tr > td.text-aqua:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), .table > tbody > tr > td .text-aqua:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #0891b2 !important; } .table > tbody > tr > td.text-teal:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), .table > tbody > tr > td .text-teal:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #0e9488 !important; } .table > tbody > tr > td.text-navy:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), .table > tbody > tr > td .text-navy:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #1e3a5f !important; } .table > tbody > tr > td.text-purple:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), .table > tbody > tr > td .text-purple:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #7c3aed !important; } .table > tbody > tr > td.text-maroon:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), .table > tbody > tr > td .text-maroon:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #be123c !important; } .table > tbody > tr > td.text-pink:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), .table > tbody > tr > td .text-pink:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #db2777 !important; } /* Spans nested inside .btn elements (e.g. span.text-bold inside a.btn.bg-info) must inherit the button's own color — same specificity (0,6,4) as rule above, later wins */ .table > tbody > tr > td .btn span:not(.label):not(.badge):not([class*="fa"]):not([class*="glyphicon"]) { color: inherit !important; } /* ── Midnight: override the #1e293b hardcode above — placed AFTER to win cascade ── */ html[data-theme="midnight"] .table > tbody > tr > td, html[data-theme="midnight"] .table > tbody > tr > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] td, html[data-theme="midnight"] th { color: rgba(255, 255, 255, 0.85) !important; } html[data-theme="midnight"] .table > tbody > tr > td a:not([class*="btn"]):not([class*="badge"]) { color: inherit !important; } html[data-theme="midnight"] .table > tbody > tr > td a:not([class*="btn"]):not([class*="badge"]):hover { color: inherit !important; } html[data-theme="midnight"] .table > thead > tr > th { color: rgba(255, 255, 255, 0.86) !important; background-color: #1a1d25 !important; } .table > tbody > tr:hover > td { filter: brightness(0.91) !important; } html[data-theme="midnight"] .table > tbody > tr:hover > td { filter: none !important; color: rgba(255, 255, 255, 0.92) !important; /* no background-color override — preserves status row colours on hover */ } /* ── Midnight: Bootstrap bg-* utility anchors have light backgrounds → need dark text ── bg-success=#dff0d8, bg-warning=#fcf8e3, bg-info=#d9edf7, bg-danger=#f2dede. a elements inherit white from parent td or get #a5b4fc from link rule → override both. NOTE: span/div/td/th/.badge variants are NOT included here — the "AdminLTE named bg-* + Bootstrap semantic bg-*" block further down already swaps their background to a translucent dark tint with bright text (e.g. span.bg-danger → rgba(220,75,57,.18) + #ff9090). Forcing #1e293b here at higher specificity (0,4,5) used to beat that (0,3,2) rule and make PROCESS badges render invisible (dark-on-dark). */ html[data-theme="midnight"] .table > tbody > tr > td a.bg-success:not(.btn), html[data-theme="midnight"] .table > tbody > tr > td a.bg-warning:not(.btn), html[data-theme="midnight"] .table > tbody > tr > td a.bg-info:not(.btn), html[data-theme="midnight"] .table > tbody > tr > td a.bg-danger:not(.btn) { color: #1e293b !important; } html[data-theme="midnight"] .table > tbody > tr:hover > td a.bg-success:not(.btn), html[data-theme="midnight"] .table > tbody > tr:hover > td a.bg-warning:not(.btn), html[data-theme="midnight"] .table > tbody > tr:hover > td a.bg-info:not(.btn), html[data-theme="midnight"] .table > tbody > tr:hover > td a.bg-danger:not(.btn) { color: #1e293b !important; } /* ── Midnight: dark text on light status-cell backgrounds ── Must come AFTER the white-text block above to win the cascade. Covers all 11 light-background classes + typo'd light-red-backgorund. Specificity (0,3,4)+(0,8,5) beats the white-text rules (0,2,4)+(0,7,5). */ html[data-theme="midnight"] .table > tbody > tr > td.light-red-backgorund, html[data-theme="midnight"] .table > tbody > tr > td.light-green-background, html[data-theme="midnight"] .table > tbody > tr > td.light-yellow-background, html[data-theme="midnight"] .table > tbody > tr > td.light-grey-background, html[data-theme="midnight"] .table > tbody > tr > td.dark-grey-background, html[data-theme="midnight"] .table > tbody > tr > td.light-white-red-background, html[data-theme="midnight"] .table > tbody > tr > td.white-background, html[data-theme="midnight"] .table > tbody > tr > td.light-orange-background, html[data-theme="midnight"] .table > tbody > tr > td.orange-background, html[data-theme="midnight"] .table > tbody > tr > td.light-pink-background, html[data-theme="midnight"] .table > tbody > tr > td.light-brown-background, html[data-theme="midnight"] .table > tbody > tr > td.sample, html[data-theme="midnight"] .table > tbody > tr > td.bill_for_payment, html[data-theme="midnight"] .table > tbody > tr > td.pending_bill { color: #1e293b !important; } /* spans inside those cells */ html[data-theme="midnight"] .table > tbody > tr > td.light-red-backgorund span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.light-green-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.light-yellow-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.light-grey-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.dark-grey-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.light-white-red-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.white-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.light-orange-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.orange-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.light-pink-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.light-brown-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.sample span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.bill_for_payment span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.pending_bill span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #1e293b !important; } /* links inside those cells — inherit dark text (set on td above) */ html[data-theme="midnight"] .table > tbody > tr > td.light-red-backgorund a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr > td.light-green-background a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr > td.light-yellow-background a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr > td.light-grey-background a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr > td.dark-grey-background a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr > td.light-white-red-background a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr > td.white-background a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr > td.light-orange-background a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr > td.orange-background a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr > td.light-pink-background a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr > td.light-brown-background a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr > td.sample a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr > td.bill_for_payment a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr > td.pending_bill a:not([class*="btn"]):not([class*="badge"]) { color: inherit !important; } /* ── Midnight: lock dark text on HOVER for light-background cells ── tr:hover adds (0,1,0) → total (0,4,3) beats the general hover rule (0,3,3). */ html[data-theme="midnight"] .table > tbody > tr:hover > td.light-red-backgorund, html[data-theme="midnight"] .table > tbody > tr:hover > td.light-green-background, html[data-theme="midnight"] .table > tbody > tr:hover > td.light-yellow-background, html[data-theme="midnight"] .table > tbody > tr:hover > td.light-grey-background, html[data-theme="midnight"] .table > tbody > tr:hover > td.dark-grey-background, html[data-theme="midnight"] .table > tbody > tr:hover > td.light-white-red-background, html[data-theme="midnight"] .table > tbody > tr:hover > td.white-background, html[data-theme="midnight"] .table > tbody > tr:hover > td.light-orange-background, html[data-theme="midnight"] .table > tbody > tr:hover > td.orange-background, html[data-theme="midnight"] .table > tbody > tr:hover > td.light-pink-background, html[data-theme="midnight"] .table > tbody > tr:hover > td.light-brown-background, html[data-theme="midnight"] .table > tbody > tr:hover > td.sample, html[data-theme="midnight"] .table > tbody > tr:hover > td.bill_for_payment, html[data-theme="midnight"] .table > tbody > tr:hover > td.pending_bill { color: #1e293b !important; } /* spans on hover inside light-bg cells — specificity (0,8,4) */ html[data-theme="midnight"] .table > tbody > tr:hover > td.light-red-backgorund span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.light-green-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.light-yellow-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.light-grey-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.dark-grey-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.light-white-red-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.white-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.light-orange-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.orange-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.light-pink-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.light-brown-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.sample span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.bill_for_payment span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.pending_bill span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #1e293b !important; } /* links on hover inside light-bg cells */ html[data-theme="midnight"] .table > tbody > tr:hover > td.light-red-backgorund a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.light-green-background a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.light-yellow-background a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.light-grey-background a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.dark-grey-background a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.light-white-red-background a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.white-background a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.light-orange-background a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.orange-background a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.light-pink-background a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.light-brown-background a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.sample a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.bill_for_payment a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.pending_bill a:not([class*="btn"]):not([class*="badge"]) { color: inherit !important; } /* ── Midnight: dark text when background class is on TR (row level) ── Handles tr.red / tr.orange / tr.blue / tr.info (short names from custom.css) and the named bg classes when applied to the row element. Specificity (0,3,4) beats the generic midnight td white rule (0,2,4). */ html[data-theme="midnight"] .table > tbody > tr.red > td, html[data-theme="midnight"] .table > tbody > tr.orange > td, html[data-theme="midnight"] .table > tbody > tr.blue > td, html[data-theme="midnight"] .table > tbody > tr.info > td, html[data-theme="midnight"] .table > tbody > tr.light-red-backgorund > td, html[data-theme="midnight"] .table > tbody > tr.light-green-background > td, html[data-theme="midnight"] .table > tbody > tr.light-yellow-background > td, html[data-theme="midnight"] .table > tbody > tr.light-grey-background > td, html[data-theme="midnight"] .table > tbody > tr.dark-grey-background > td, html[data-theme="midnight"] .table > tbody > tr.light-white-red-background > td, html[data-theme="midnight"] .table > tbody > tr.white-background > td, html[data-theme="midnight"] .table > tbody > tr.light-orange-background > td, html[data-theme="midnight"] .table > tbody > tr.orange-background > td, html[data-theme="midnight"] .table > tbody > tr.light-pink-background > td, html[data-theme="midnight"] .table > tbody > tr.light-brown-background > td, html[data-theme="midnight"] .table > tbody > tr.sample > td, html[data-theme="midnight"] .table > tbody > tr.bill_for_payment > td, html[data-theme="midnight"] .table > tbody > tr.pending_bill > td { color: #1e293b !important; } /* spans inside tds of light-bg rows — (0,8,5) beats white-text span rule (0,7,5) */ html[data-theme="midnight"] .table > tbody > tr.red > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.orange > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.blue > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.info > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.light-red-backgorund > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.light-green-background > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.light-yellow-background > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.light-grey-background > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.dark-grey-background > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.light-white-red-background > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.white-background > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.light-orange-background > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.orange-background > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.light-pink-background > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.light-brown-background > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.sample > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.bill_for_payment > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.pending_bill > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #1e293b !important; } /* links inside tds of light-bg rows */ html[data-theme="midnight"] .table > tbody > tr.red > td a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr.orange > td a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr.blue > td a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr.info > td a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr.light-red-backgorund > td a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr.light-green-background > td a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr.light-yellow-background > td a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr.light-grey-background > td a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr.dark-grey-background > td a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr.light-white-red-background > td a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr.white-background > td a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr.light-orange-background > td a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr.orange-background > td a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr.light-pink-background > td a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr.light-brown-background > td a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr.sample > td a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr.bill_for_payment > td a:not([class*="btn"]):not([class*="badge"]), html[data-theme="midnight"] .table > tbody > tr.pending_bill > td a:not([class*="btn"]):not([class*="badge"]) { color: inherit !important; } /* ── Midnight: strip opaque gradients custom.css paints on tr.red/orange/blue ── custom.css backgrounds these on the itself with light pastel gradients (#f9f1f1→#f9d9d9 etc.) and !important — painted *under* our translucent wash below, the two combine into a solid opaque patch instead of a wash over the dark surface. Neutralise the row background first so the wash reads as intended (matches the same selector list custom.css uses, scoped to midnight for higher specificity so it wins regardless of source order). */ html[data-theme="midnight"] .table tr.red, html[data-theme="midnight"] .table tr.red:hover, html[data-theme="midnight"] .table tr:nth-of-type(odd).red, html[data-theme="midnight"] .table tr:nth-of-type(odd).red:hover, html[data-theme="midnight"] .table .tableInner tr:nth-of-type(odd).red, html[data-theme="midnight"] .table .tableInner tr:nth-of-type(odd).red:hover, html[data-theme="midnight"] .table tr.orange, html[data-theme="midnight"] .table tr.orange:hover, html[data-theme="midnight"] .table tr:nth-of-type(odd).orange, html[data-theme="midnight"] .table tr:nth-of-type(odd).orange:hover, html[data-theme="midnight"] .table .tableInner tr:nth-of-type(odd).orange, html[data-theme="midnight"] .table .tableInner tr:nth-of-type(odd).orange:hover, html[data-theme="midnight"] .table tr.blue, html[data-theme="midnight"] .table tr.blue:hover, html[data-theme="midnight"] .table tr:nth-of-type(odd).blue, html[data-theme="midnight"] .table tr:nth-of-type(odd).blue:hover, html[data-theme="midnight"] .table .tableInner tr:nth-of-type(odd).blue, html[data-theme="midnight"] .table .tableInner tr:nth-of-type(odd).blue:hover { background: transparent !important; background-image: none !important; background-color: transparent !important; } /* ── Midnight: status-indicator cells — translucent colour-wash + light text ── Supersedes the opaque-pastel/dark-text rules above (same selectors, declared later → wins the cascade): a light-mode swatch dropped onto a dark table reads as a jarring patch. Instead tint the dark surface with the status hue at low opacity and keep the page's light ink — the same language as the reference dark-table mockup's translucent column groups (g-rose/g-emer/g-cyan/...). Each class assigns a --status-tint RGB triplet (inherits tr → td) consumed by the shared wash/text rules via rgba(var(...)). */ html[data-theme="midnight"] .light-red-backgorund { --status-tint: 255, 90, 135; } html[data-theme="midnight"] .light-green-background { --status-tint: 45, 212, 191; } html[data-theme="midnight"] .light-yellow-background { --status-tint: 167, 139, 250; } html[data-theme="midnight"] .light-grey-background { --status-tint: 86, 196, 120; } html[data-theme="midnight"] .dark-grey-background { --status-tint: 148, 163, 184; } html[data-theme="midnight"] .light-white-red-background { --status-tint: 255, 138, 158; } html[data-theme="midnight"] .white-background { --status-tint: 255, 255, 255; } html[data-theme="midnight"] .light-orange-background { --status-tint: 246, 196, 90; } html[data-theme="midnight"] .orange-background { --status-tint: 240, 138, 24; } html[data-theme="midnight"] .light-pink-background { --status-tint: 255, 121, 198; } html[data-theme="midnight"] .light-brown-background { --status-tint: 92, 200, 245; } html[data-theme="midnight"] .sample { --status-tint: 86, 196, 120; } html[data-theme="midnight"] .bill_for_payment { --status-tint: 92, 200, 245; } html[data-theme="midnight"] .pending_bill { --status-tint: 255, 121, 198; } html[data-theme="midnight"] .maroon { --status-tint: 216, 27, 96; } html[data-theme="midnight"] .replacement { --status-tint: 83, 199, 191; } html[data-theme="midnight"] .advance_payment { --status-tint: 255, 151, 187; } html[data-theme="midnight"] .repairing_invoice { --status-tint: 253, 162, 99; } html[data-theme="midnight"] .replacement_approval { --status-tint: 242, 174, 117; } html[data-theme="midnight"] .atomic-tangerine-background { --status-tint: 255, 102, 0; } html[data-theme="midnight"] .table tr.red { --status-tint: 255, 90, 135; } html[data-theme="midnight"] .table tr.orange { --status-tint: 240, 138, 24; } html[data-theme="midnight"] .table tr.blue { --status-tint: 91, 124, 250; } html[data-theme="midnight"] .table tr.info { --status-tint: 56, 189, 248; } html[data-theme="midnight"] .table td.red { --status-tint: 255, 90, 135; } html[data-theme="midnight"] .table td.orange { --status-tint: 240, 138, 24; } html[data-theme="midnight"] .table td.green { --status-tint: 34, 197, 94; } html[data-theme="midnight"] .table > tbody > tr > td.light-red-backgorund, html[data-theme="midnight"] .table > tbody > tr > td.light-green-background, html[data-theme="midnight"] .table > tbody > tr > td.light-yellow-background, html[data-theme="midnight"] .table > tbody > tr > td.light-grey-background, html[data-theme="midnight"] .table > tbody > tr > td.dark-grey-background, html[data-theme="midnight"] .table > tbody > tr > td.light-white-red-background, html[data-theme="midnight"] .table > tbody > tr > td.white-background, html[data-theme="midnight"] .table > tbody > tr > td.light-orange-background, html[data-theme="midnight"] .table > tbody > tr > td.orange-background, html[data-theme="midnight"] .table > tbody > tr > td.light-pink-background, html[data-theme="midnight"] .table > tbody > tr > td.light-brown-background, html[data-theme="midnight"] .table > tbody > tr > td.sample, html[data-theme="midnight"] .table > tbody > tr > td.bill_for_payment, html[data-theme="midnight"] .table > tbody > tr > td.pending_bill, html[data-theme="midnight"] .table > tbody > tr > td.maroon, html[data-theme="midnight"] .table > tbody > tr > td.replacement, html[data-theme="midnight"] .table > tbody > tr > td.advance_payment, html[data-theme="midnight"] .table > tbody > tr > td.repairing_invoice, html[data-theme="midnight"] .table > tbody > tr > td.replacement_approval, html[data-theme="midnight"] .table > tbody > tr > td.atomic-tangerine-background, html[data-theme="midnight"] .table > tbody > tr.light-red-backgorund > td, html[data-theme="midnight"] .table > tbody > tr.light-green-background > td, html[data-theme="midnight"] .table > tbody > tr.light-yellow-background > td, html[data-theme="midnight"] .table > tbody > tr.light-grey-background > td, html[data-theme="midnight"] .table > tbody > tr.dark-grey-background > td, html[data-theme="midnight"] .table > tbody > tr.light-white-red-background > td, html[data-theme="midnight"] .table > tbody > tr.white-background > td, html[data-theme="midnight"] .table > tbody > tr.light-orange-background > td, html[data-theme="midnight"] .table > tbody > tr.orange-background > td, html[data-theme="midnight"] .table > tbody > tr.light-pink-background > td, html[data-theme="midnight"] .table > tbody > tr.light-brown-background > td, html[data-theme="midnight"] .table > tbody > tr.sample > td, html[data-theme="midnight"] .table > tbody > tr.bill_for_payment > td, html[data-theme="midnight"] .table > tbody > tr.pending_bill > td, html[data-theme="midnight"] .table > tbody > tr.maroon > td, html[data-theme="midnight"] .table > tbody > tr.replacement > td, html[data-theme="midnight"] .table > tbody > tr.advance_payment > td, html[data-theme="midnight"] .table > tbody > tr.repairing_invoice > td, html[data-theme="midnight"] .table > tbody > tr.replacement_approval > td, html[data-theme="midnight"] .table > tbody > tr.atomic-tangerine-background > td, html[data-theme="midnight"] .table > tbody > tr.red > td, html[data-theme="midnight"] .table > tbody > tr.orange > td, html[data-theme="midnight"] .table > tbody > tr.blue > td, html[data-theme="midnight"] .table > tbody > tr.info > td, html[data-theme="midnight"] .table > tbody > tr > td.red, html[data-theme="midnight"] .table > tbody > tr > td.orange, html[data-theme="midnight"] .table > tbody > tr > td.green { background-color: rgba(var(--status-tint), 0.12) !important; color: rgba(255, 255, 255, 0.85) !important; border-bottom-color: rgba(var(--status-tint), 0.4) !important; } /* spans inside status cells — inherit the new light ink instead of forced dark (links already inherit from the td via the a:not() rules above, so no override needed) */ html[data-theme="midnight"] .table > tbody > tr > td.light-red-backgorund span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.light-green-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.light-yellow-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.light-grey-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.dark-grey-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.light-white-red-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.white-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.light-orange-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.orange-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.light-pink-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.light-brown-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.sample span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.bill_for_payment span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.pending_bill span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.maroon span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.replacement span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.advance_payment span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.repairing_invoice span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.replacement_approval span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.atomic-tangerine-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.light-red-backgorund > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.light-green-background > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.light-yellow-background > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.light-grey-background > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.dark-grey-background > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.light-white-red-background > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.white-background > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.light-orange-background > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.orange-background > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.light-pink-background > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.light-brown-background > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.sample > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.bill_for_payment > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.pending_bill > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.maroon > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.replacement > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.advance_payment > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.repairing_invoice > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.replacement_approval > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.atomic-tangerine-background > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.red > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.orange > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.blue > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr.info > td span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.red span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.orange span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td.green span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: inherit !important; } /* ── Midnight: notes inside status-tint cells ── ".content-wrapper small" dims all text to 0.45 opacity for visual hierarchy, but on these warm/cool status-tint backgrounds (light-orange-background, light-grey-background, etc.) that dim grey becomes near-invisible. Inherit the cell's own brighter text colour instead — same fix as the span rules above, covering via attribute selectors so the class list stays short. */ html[data-theme="midnight"] .table > tbody > tr > td[class*="background"] small, html[data-theme="midnight"] .table > tbody > tr > td[class*="backgorund"] small, html[data-theme="midnight"] .table > tbody > tr[class*="background"] > td small, html[data-theme="midnight"] .table > tbody > tr[class*="backgorund"] > td small, html[data-theme="midnight"] .table > tbody > tr > td.sample small, html[data-theme="midnight"] .table > tbody > tr > td.bill_for_payment small, html[data-theme="midnight"] .table > tbody > tr > td.pending_bill small, html[data-theme="midnight"] .table > tbody > tr > td.maroon small, html[data-theme="midnight"] .table > tbody > tr > td.replacement small, html[data-theme="midnight"] .table > tbody > tr > td.advance_payment small, html[data-theme="midnight"] .table > tbody > tr > td.repairing_invoice small, html[data-theme="midnight"] .table > tbody > tr > td.replacement_approval small, html[data-theme="midnight"] .table > tbody > tr > td.red small, html[data-theme="midnight"] .table > tbody > tr > td.orange small, html[data-theme="midnight"] .table > tbody > tr > td.green small, html[data-theme="midnight"] .table > tbody > tr.sample > td small, html[data-theme="midnight"] .table > tbody > tr.bill_for_payment > td small, html[data-theme="midnight"] .table > tbody > tr.pending_bill > td small, html[data-theme="midnight"] .table > tbody > tr.maroon > td small, html[data-theme="midnight"] .table > tbody > tr.replacement > td small, html[data-theme="midnight"] .table > tbody > tr.advance_payment > td small, html[data-theme="midnight"] .table > tbody > tr.repairing_invoice > td small, html[data-theme="midnight"] .table > tbody > tr.replacement_approval > td small, html[data-theme="midnight"] .table > tbody > tr.red > td small, html[data-theme="midnight"] .table > tbody > tr.orange > td small, html[data-theme="midnight"] .table > tbody > tr.blue > td small, html[data-theme="midnight"] .table > tbody > tr.info > td small { color: inherit !important; } /* ── Midnight: .text-red/.text-danger notes inside status-tint cells ── The non-table "dark text on light-background utility classes anywhere in content" rule (`.content-wrapper .CLASS *`, specificity 0,3,1 — meant for filter tabs/legend chips) also matches descendants of status-tint table cells, overriding .text-red/.text-danger's own midnight colour (0,2,1) with #1e293b — nearly invisible on the dark wash. Restore the site-wide midnight red (same value as the .text-red/.text-danger rule above) so the colour stays semantically meaningful, using the same attribute-selector coverage as the fix above. */ html[data-theme="midnight"] .table > tbody > tr > td[class*="background"] :is(.text-red, .text-danger), html[data-theme="midnight"] .table > tbody > tr > td[class*="backgorund"] :is(.text-red, .text-danger), html[data-theme="midnight"] .table > tbody > tr[class*="background"] > td :is(.text-red, .text-danger), html[data-theme="midnight"] .table > tbody > tr[class*="backgorund"] > td :is(.text-red, .text-danger), html[data-theme="midnight"] .table > tbody > tr > td.sample :is(.text-red, .text-danger), html[data-theme="midnight"] .table > tbody > tr > td.bill_for_payment :is(.text-red, .text-danger), html[data-theme="midnight"] .table > tbody > tr > td.pending_bill :is(.text-red, .text-danger), html[data-theme="midnight"] .table > tbody > tr > td.maroon :is(.text-red, .text-danger), html[data-theme="midnight"] .table > tbody > tr > td.replacement :is(.text-red, .text-danger), html[data-theme="midnight"] .table > tbody > tr > td.advance_payment :is(.text-red, .text-danger), html[data-theme="midnight"] .table > tbody > tr > td.repairing_invoice :is(.text-red, .text-danger), html[data-theme="midnight"] .table > tbody > tr > td.replacement_approval :is(.text-red, .text-danger), html[data-theme="midnight"] .table > tbody > tr > td.red :is(.text-red, .text-danger), html[data-theme="midnight"] .table > tbody > tr > td.orange :is(.text-red, .text-danger), html[data-theme="midnight"] .table > tbody > tr > td.green :is(.text-red, .text-danger), html[data-theme="midnight"] .table > tbody > tr.sample > td :is(.text-red, .text-danger), html[data-theme="midnight"] .table > tbody > tr.bill_for_payment > td :is(.text-red, .text-danger), html[data-theme="midnight"] .table > tbody > tr.pending_bill > td :is(.text-red, .text-danger), html[data-theme="midnight"] .table > tbody > tr.maroon > td :is(.text-red, .text-danger), html[data-theme="midnight"] .table > tbody > tr.replacement > td :is(.text-red, .text-danger), html[data-theme="midnight"] .table > tbody > tr.advance_payment > td :is(.text-red, .text-danger), html[data-theme="midnight"] .table > tbody > tr.repairing_invoice > td :is(.text-red, .text-danger), html[data-theme="midnight"] .table > tbody > tr.replacement_approval > td :is(.text-red, .text-danger), html[data-theme="midnight"] .table > tbody > tr.red > td :is(.text-red, .text-danger), html[data-theme="midnight"] .table > tbody > tr.orange > td :is(.text-red, .text-danger), html[data-theme="midnight"] .table > tbody > tr.blue > td :is(.text-red, .text-danger), html[data-theme="midnight"] .table > tbody > tr.info > td :is(.text-red, .text-danger) { color: #ff8da3 !important; } /* ── Midnight: stock-comparison Added/Deducted column highlights ── raw_material/stock/qty_comparison & old_new_comparison flag quantity increases/decreases with green/red tinted columns plus matching header cells. Same translucent-wash treatment as the status-tint cells above; specificity (0,3,4) beats the base thead/tbody rules at (0,2,4). */ html[data-theme="midnight"] .table > thead > tr > th.added-col-header, html[data-theme="midnight"] .table > tbody > tr > td.added-col { background-color: rgba(45, 212, 191, 0.12) !important; color: rgba(255, 255, 255, 0.85) !important; } html[data-theme="midnight"] .table > thead > tr > th.deducted-col-header, html[data-theme="midnight"] .table > tbody > tr > td.deducted-col { background-color: rgba(255, 90, 135, 0.12) !important; color: rgba(255, 255, 255, 0.85) !important; } /* nested drill-down table — barely-lighter wrap (mirrors #f9f9f9-on-white in light mode), grand-total row gets a soft neutral highlight since the transparent tfoot/tbody cells have no background of their own to override */ html[data-theme="midnight"] .subtable-wrap { background-color: rgba(255, 255, 255, 0.03) !important; } html[data-theme="midnight"] .table > tfoot > tr.grand-total-row > td, html[data-theme="midnight"] .grand-total-row > td { background-color: rgba(255, 255, 255, 0.05) !important; color: rgba(255, 255, 255, 0.85) !important; } /* hover — same translucent wash, slightly stronger; light text retained */ html[data-theme="midnight"] .table > tbody > tr:hover > td.light-red-backgorund, html[data-theme="midnight"] .table > tbody > tr:hover > td.light-green-background, html[data-theme="midnight"] .table > tbody > tr:hover > td.light-yellow-background, html[data-theme="midnight"] .table > tbody > tr:hover > td.light-grey-background, html[data-theme="midnight"] .table > tbody > tr:hover > td.dark-grey-background, html[data-theme="midnight"] .table > tbody > tr:hover > td.light-white-red-background, html[data-theme="midnight"] .table > tbody > tr:hover > td.white-background, html[data-theme="midnight"] .table > tbody > tr:hover > td.light-orange-background, html[data-theme="midnight"] .table > tbody > tr:hover > td.orange-background, html[data-theme="midnight"] .table > tbody > tr:hover > td.light-pink-background, html[data-theme="midnight"] .table > tbody > tr:hover > td.light-brown-background, html[data-theme="midnight"] .table > tbody > tr:hover > td.sample, html[data-theme="midnight"] .table > tbody > tr:hover > td.bill_for_payment, html[data-theme="midnight"] .table > tbody > tr:hover > td.pending_bill, html[data-theme="midnight"] .table > tbody > tr:hover > td.maroon, html[data-theme="midnight"] .table > tbody > tr:hover > td.replacement, html[data-theme="midnight"] .table > tbody > tr:hover > td.advance_payment, html[data-theme="midnight"] .table > tbody > tr:hover > td.repairing_invoice, html[data-theme="midnight"] .table > tbody > tr:hover > td.replacement_approval, html[data-theme="midnight"] .table > tbody > tr:hover > td.atomic-tangerine-background, html[data-theme="midnight"] .table > tbody > tr:hover > td.red, html[data-theme="midnight"] .table > tbody > tr:hover > td.orange, html[data-theme="midnight"] .table > tbody > tr:hover > td.green { background-color: rgba(var(--status-tint), 0.18) !important; color: rgba(255, 255, 255, 0.85) !important; border-bottom-color: rgba(var(--status-tint), 0.5) !important; } html[data-theme="midnight"] .table > tbody > tr:hover > td.light-red-backgorund span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.light-green-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.light-yellow-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.light-grey-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.dark-grey-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.light-white-red-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.white-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.light-orange-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.orange-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.light-pink-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.light-brown-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.sample span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.bill_for_payment span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.pending_bill span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.maroon span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.replacement span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.advance_payment span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.repairing_invoice span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.replacement_approval span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.atomic-tangerine-background span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.red span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.orange span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr:hover > td.green span:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: inherit !important; } /* ── Midnight: kill opaque light-mode gradient backgrounds on red/orange/blue/maroon rows (and td.maroon). custom.css paints these via `background: linear-gradient(...) !important`, which sets background-image and paints OVER any background-color we set above — so the wash never showed. Mirror custom.css's selector list 1:1 with an extra leading `html[data-theme="midnight"]` so every selector here is exactly one class more specific than its custom.css counterpart (incl. :nth-of-type(odd) and .tableInner variants), guaranteeing it wins despite custom.css's !important. */ html[data-theme="midnight"] .table tr.red, html[data-theme="midnight"] .table tr:nth-of-type(odd).red, html[data-theme="midnight"] .table .tableInner tr:nth-of-type(odd).red, html[data-theme="midnight"] .table tr.orange, html[data-theme="midnight"] .table tr:nth-of-type(odd).orange, html[data-theme="midnight"] .table .tableInner tr:nth-of-type(odd).orange, html[data-theme="midnight"] .table tr.blue, html[data-theme="midnight"] .table tr:nth-of-type(odd).blue, html[data-theme="midnight"] .table .tableInner tr:nth-of-type(odd).blue, html[data-theme="midnight"] .table tr.maroon, html[data-theme="midnight"] .table tr:nth-of-type(odd).maroon, html[data-theme="midnight"] .table .tableInner tr:nth-of-type(odd).maroon, html[data-theme="midnight"] .table td.maroon { background: rgba(var(--status-tint), 0.12) !important; color: rgba(255, 255, 255, 0.85) !important; } html[data-theme="midnight"] .table tr.red:hover, html[data-theme="midnight"] .table tr:nth-of-type(odd).red:hover, html[data-theme="midnight"] .table .tableInner tr:nth-of-type(odd).red:hover, html[data-theme="midnight"] .table tr.orange:hover, html[data-theme="midnight"] .table tr:nth-of-type(odd).orange:hover, html[data-theme="midnight"] .table .tableInner tr:nth-of-type(odd).orange:hover, html[data-theme="midnight"] .table tr.blue:hover, html[data-theme="midnight"] .table tr:nth-of-type(odd).blue:hover, html[data-theme="midnight"] .table .tableInner tr:nth-of-type(odd).blue:hover, html[data-theme="midnight"] .table tr.maroon:hover, html[data-theme="midnight"] .table tr:nth-of-type(odd).maroon:hover, html[data-theme="midnight"] .table .tableInner tr:nth-of-type(odd).maroon:hover, html[data-theme="midnight"] .table td.maroon:hover { background: rgba(var(--status-tint), 0.18) !important; color: rgba(255, 255, 255, 0.85) !important; } /* ── Midnight: inline text-colour utilities (.redText/.greenText/etc.) ── These force literal CSS named colours (red/green/blue/orange/yellow/pink/white) which read as muddy, low-contrast smudges on the dark surface. Swap them for the same vivid hue family used across the status washes and button glows so inline status text stays legible and visually consistent with the rest of the midnight palette. */ html[data-theme="midnight"] .redText { color: #ff7da2 !important; } html[data-theme="midnight"] .greenText { color: #56d98a !important; } html[data-theme="midnight"] .blueText { color: #7d9bff !important; } html[data-theme="midnight"] .orangeText { color: #f6a93f !important; } html[data-theme="midnight"] .yellowText { color: #f5d76e !important; } html[data-theme="midnight"] .pinkText { color: #ff8fcf !important; } html[data-theme="midnight"] .whiteText { color: rgba(255, 255, 255, 0.92) !important; } /* Scoped variants (0,3,1) so coloured text/icons (e.g. a "fa fa-check blueText" sample tick) keep their hue inside status-coloured cells/rows, beating the broad ".content-wrapper .sample *" (0,3,1) dark rule via source order. */ html[data-theme="midnight"] .content-wrapper .redText { color: #ff7da2 !important; } html[data-theme="midnight"] .content-wrapper .greenText { color: #56d98a !important; } html[data-theme="midnight"] .content-wrapper .blueText { color: #7d9bff !important; } html[data-theme="midnight"] .content-wrapper .orangeText { color: #f6a93f !important; } html[data-theme="midnight"] .content-wrapper .yellowText { color: #f5d76e !important; } html[data-theme="midnight"] .content-wrapper .pinkText { color: #ff8fcf !important; } html[data-theme="midnight"] .content-wrapper .whiteText { color: rgba(255, 255, 255, 0.92) !important; } /* ── Midnight: same table-cell escalation as the light-theme block above ── Inside .table cells, midnight's td/span "always readable" rules (up to 0,7,4) beat the plain .xxxText overrides (0,2,0) just above, so status colours disappear into the default light-grey cell text. Re-assert with the same .xxxText + :not() chain escalation used in the light-theme block. */ html[data-theme="midnight"] .table > tbody > tr > td.redText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td .redText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #ff7da2 !important; } html[data-theme="midnight"] .table > tbody > tr > td.greenText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td .greenText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #56d98a !important; } html[data-theme="midnight"] .table > tbody > tr > td.blueText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td .blueText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #7d9bff !important; } html[data-theme="midnight"] .table > tbody > tr > td.orangeText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td .orangeText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #f6a93f !important; } html[data-theme="midnight"] .table > tbody > tr > td.yellowText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td .yellowText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #f5d76e !important; } html[data-theme="midnight"] .table > tbody > tr > td.pinkText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td .pinkText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #ff8fcf !important; } html[data-theme="midnight"] .table > tbody > tr > td.whiteText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td .whiteText:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: rgba(255, 255, 255, 0.92) !important; } /* ── Midnight: same table-cell escalation for .text-blue/.text-red/etc. ── Without this, the midnight "always readable" rule (0,7,5) beats the plain .text-* utilities (0,1,0) from the "TEXT UTILITY COLOR OVERRIDES" block AND the light-theme exception added above (0,7,3), so every .text-blue/.text-red/ .text-primary/etc. inside a table cell collapses to the same flat rgba(255,255,255,.85) — losing its colour-coding entirely. Re-assert with the same .text-* + :not() chain escalation (0,8,3), reusing the vivid hue family already established for .redText/.greenText/.blueText/etc. above so inline status colours stay meaningful and consistent on the dark surface. */ html[data-theme="midnight"] .table > tbody > tr > td:is(.text-primary, .text-info):not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td :is(.text-primary, .text-info):not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #7d9bff !important; } html[data-theme="midnight"] .table > tbody > tr > td:is(.text-success, .text-green):not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td :is(.text-success, .text-green):not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #56d98a !important; } html[data-theme="midnight"] .table > tbody > tr > td:is(.text-danger, .text-red):not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td :is(.text-danger, .text-red):not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #ff8da3 !important; } html[data-theme="midnight"] .table > tbody > tr > td:is(.text-warning, .text-orange):not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td :is(.text-warning, .text-orange):not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #f6a93f !important; } html[data-theme="midnight"] .table > tbody > tr > td.text-blue:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td .text-blue:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #7d9bff !important; } html[data-theme="midnight"] .table > tbody > tr > td.text-yellow:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td .text-yellow:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #f5d76e !important; } html[data-theme="midnight"] .table > tbody > tr > td.text-aqua:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td .text-aqua:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #5eead4 !important; } html[data-theme="midnight"] .table > tbody > tr > td.text-teal:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td .text-teal:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #2dd4bf !important; } html[data-theme="midnight"] .table > tbody > tr > td.text-navy:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td .text-navy:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #a5b4fc !important; } html[data-theme="midnight"] .table > tbody > tr > td.text-purple:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td .text-purple:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #c4b5fd !important; } html[data-theme="midnight"] .table > tbody > tr > td.text-maroon:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td .text-maroon:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #fb7185 !important; } html[data-theme="midnight"] .table > tbody > tr > td.text-pink:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]), html[data-theme="midnight"] .table > tbody > tr > td .text-pink:not(.label):not(.badge):not([class*="btn"]):not([class*="fa"]):not([class*="glyphicon"]) { color: #ff8fcf !important; } /* ── Midnight: soften saturated #dc2626 "fire-engine" red wherever it appears ── .text-red/.text-danger inline text and the .bg-red sidebar "new" badge use a raw #dc2626 — on a near-black surface that reads as a harsh, eye-catching alarm colour rather than a status indicator. Tone it down to the same soft rose family as .redText/.label-danger so red stays meaningful but easy on the eyes; .bg-maroon ("Debit Note Pending" etc.) gets the same gradient language as the other midnight buttons instead of a flat dark-crimson fill. */ html[data-theme="midnight"] .text-red, html[data-theme="midnight"] .text-danger { color: #ff8da3 !important; } html[data-theme="midnight"] .label.bg-red, html[data-theme="midnight"] small.bg-red, html[data-theme="midnight"] .bg-red.blink { background: rgba(255, 90, 135, .22) !important; color: #ff9db4 !important; border-color: rgba(255, 90, 135, .35) !important; text-shadow: none !important; } /* ── Midnight: AdminLTE named bg-* + Bootstrap semantic bg-* on non-button elements ── Covers td, th, .badge, span, div — translucent fill + readable light text. Buttons are excluded (they manage their own colours above). Bootstrap semantic colours also fix the dark-text rule set earlier in this file. */ html[data-theme="midnight"] td.bg-red, html[data-theme="midnight"] th.bg-red, html[data-theme="midnight"] .badge.bg-red:not(.btn), html[data-theme="midnight"] span.bg-red:not(.btn), html[data-theme="midnight"] div.bg-red:not(.btn) { background-color: rgba(220, 75, 57, .18) !important; color: #ff9090 !important; border-color: rgba(220, 75, 57, .30) !important; text-shadow: none !important; } html[data-theme="midnight"] td.bg-green, html[data-theme="midnight"] th.bg-green, html[data-theme="midnight"] .badge.bg-green:not(.btn), html[data-theme="midnight"] span.bg-green:not(.btn), html[data-theme="midnight"] div.bg-green:not(.btn) { background-color: rgba(0, 166, 90, .18) !important; color: #4fd18a !important; border-color: rgba(0, 166, 90, .30) !important; text-shadow: none !important; } html[data-theme="midnight"] td.bg-orange, html[data-theme="midnight"] th.bg-orange, html[data-theme="midnight"] .badge.bg-orange:not(.btn), html[data-theme="midnight"] span.bg-orange:not(.btn), html[data-theme="midnight"] div.bg-orange:not(.btn) { background-color: rgba(255, 133, 27, .18) !important; color: #ffaa5a !important; border-color: rgba(255, 133, 27, .30) !important; text-shadow: none !important; } html[data-theme="midnight"] td.bg-yellow, html[data-theme="midnight"] th.bg-yellow, html[data-theme="midnight"] .badge.bg-yellow:not(.btn), html[data-theme="midnight"] span.bg-yellow:not(.btn), html[data-theme="midnight"] div.bg-yellow:not(.btn) { background-color: rgba(243, 156, 18, .18) !important; color: #f5c842 !important; border-color: rgba(243, 156, 18, .30) !important; text-shadow: none !important; } html[data-theme="midnight"] td.bg-aqua, html[data-theme="midnight"] th.bg-aqua, html[data-theme="midnight"] .badge.bg-aqua:not(.btn), html[data-theme="midnight"] span.bg-aqua:not(.btn), html[data-theme="midnight"] div.bg-aqua:not(.btn) { background-color: rgba(0, 192, 239, .18) !important; color: #5dd4f4 !important; border-color: rgba(0, 192, 239, .30) !important; text-shadow: none !important; } html[data-theme="midnight"] td.bg-blue, html[data-theme="midnight"] th.bg-blue, html[data-theme="midnight"] .badge.bg-blue:not(.btn), html[data-theme="midnight"] span.bg-blue:not(.btn), html[data-theme="midnight"] div.bg-blue:not(.btn) { background-color: rgba(54, 127, 169, .18) !important; color: #7db3d9 !important; border-color: rgba(54, 127, 169, .30) !important; text-shadow: none !important; } html[data-theme="midnight"] td.bg-light-blue, html[data-theme="midnight"] th.bg-light-blue, html[data-theme="midnight"] .badge.bg-light-blue:not(.btn), html[data-theme="midnight"] span.bg-light-blue:not(.btn), html[data-theme="midnight"] div.bg-light-blue:not(.btn) { background-color: rgba(60, 141, 188, .18) !important; color: #7db3d9 !important; border-color: rgba(60, 141, 188, .30) !important; text-shadow: none !important; } html[data-theme="midnight"] td.bg-navy, html[data-theme="midnight"] th.bg-navy, html[data-theme="midnight"] .badge.bg-navy:not(.btn), html[data-theme="midnight"] span.bg-navy:not(.btn), html[data-theme="midnight"] div.bg-navy:not(.btn) { background-color: rgba(0, 31, 63, .35) !important; color: #7895b4 !important; border-color: rgba(0, 31, 63, .50) !important; text-shadow: none !important; } html[data-theme="midnight"] td.bg-teal, html[data-theme="midnight"] th.bg-teal, html[data-theme="midnight"] .badge.bg-teal:not(.btn), html[data-theme="midnight"] span.bg-teal:not(.btn), html[data-theme="midnight"] div.bg-teal:not(.btn) { background-color: rgba(57, 204, 204, .18) !important; color: #5ed8d8 !important; border-color: rgba(57, 204, 204, .30) !important; text-shadow: none !important; } html[data-theme="midnight"] td.bg-maroon, html[data-theme="midnight"] th.bg-maroon, html[data-theme="midnight"] .badge.bg-maroon:not(.btn), html[data-theme="midnight"] span.bg-maroon:not(.btn), html[data-theme="midnight"] div.bg-maroon:not(.btn) { background-color: rgba(216, 27, 96, .18) !important; color: #ff7aa8 !important; border-color: rgba(216, 27, 96, .30) !important; text-shadow: none !important; } html[data-theme="midnight"] td.bg-purple, html[data-theme="midnight"] th.bg-purple, html[data-theme="midnight"] .badge.bg-purple:not(.btn), html[data-theme="midnight"] span.bg-purple:not(.btn), html[data-theme="midnight"] div.bg-purple:not(.btn) { background-color: rgba(96, 92, 168, .18) !important; color: #b0adee !important; border-color: rgba(96, 92, 168, .30) !important; text-shadow: none !important; } html[data-theme="midnight"] td.bg-olive, html[data-theme="midnight"] th.bg-olive, html[data-theme="midnight"] .badge.bg-olive:not(.btn), html[data-theme="midnight"] span.bg-olive:not(.btn), html[data-theme="midnight"] div.bg-olive:not(.btn) { background-color: rgba(61, 153, 112, .18) !important; color: #74c9a0 !important; border-color: rgba(61, 153, 112, .30) !important; text-shadow: none !important; } html[data-theme="midnight"] td.bg-lime, html[data-theme="midnight"] th.bg-lime, html[data-theme="midnight"] .badge.bg-lime:not(.btn), html[data-theme="midnight"] span.bg-lime:not(.btn), html[data-theme="midnight"] div.bg-lime:not(.btn) { background-color: rgba(1, 255, 112, .12) !important; color: #52e87a !important; border-color: rgba(1, 255, 112, .25) !important; text-shadow: none !important; } html[data-theme="midnight"] td.bg-fuchsia, html[data-theme="midnight"] th.bg-fuchsia, html[data-theme="midnight"] .badge.bg-fuchsia:not(.btn), html[data-theme="midnight"] span.bg-fuchsia:not(.btn), html[data-theme="midnight"] div.bg-fuchsia:not(.btn), html[data-theme="midnight"] .content-wrapper span.bg-fuchsia:not(.btn), html[data-theme="midnight"] .content-wrapper div.bg-fuchsia:not(.btn) { background-color: rgba(240, 18, 190, .15) !important; color: #f76ce6 !important; border-color: rgba(240, 18, 190, .28) !important; text-shadow: none !important; } /* Bootstrap semantic — override the dark-text rule set earlier with higher specificity */ html[data-theme="midnight"] td.bg-success, html[data-theme="midnight"] th.bg-success, html[data-theme="midnight"] .content-wrapper td.bg-success:not(.btn), html[data-theme="midnight"] .content-wrapper .badge.bg-success:not(.btn), html[data-theme="midnight"] .badge.bg-success:not(.btn), html[data-theme="midnight"] span.bg-success:not(.btn), html[data-theme="midnight"] div.bg-success:not(.btn), html[data-theme="midnight"] .content-wrapper span.bg-success:not(.btn), html[data-theme="midnight"] .content-wrapper div.bg-success:not(.btn) { background-color: rgba(0, 166, 90, .18) !important; color: #4fd18a !important; border-color: rgba(0, 166, 90, .30) !important; text-shadow: none !important; } html[data-theme="midnight"] td.bg-danger, html[data-theme="midnight"] th.bg-danger, html[data-theme="midnight"] .content-wrapper td.bg-danger:not(.btn), html[data-theme="midnight"] .content-wrapper .badge.bg-danger:not(.btn), html[data-theme="midnight"] .badge.bg-danger:not(.btn), html[data-theme="midnight"] span.bg-danger:not(.btn), html[data-theme="midnight"] div.bg-danger:not(.btn), html[data-theme="midnight"] .content-wrapper span.bg-danger:not(.btn), html[data-theme="midnight"] .content-wrapper div.bg-danger:not(.btn) { background-color: rgba(220, 75, 57, .18) !important; color: #ff9090 !important; border-color: rgba(220, 75, 57, .30) !important; text-shadow: none !important; } html[data-theme="midnight"] td.bg-warning, html[data-theme="midnight"] th.bg-warning, html[data-theme="midnight"] .content-wrapper td.bg-warning:not(.btn), html[data-theme="midnight"] .content-wrapper .badge.bg-warning:not(.btn), html[data-theme="midnight"] .badge.bg-warning:not(.btn), html[data-theme="midnight"] span.bg-warning:not(.btn), html[data-theme="midnight"] div.bg-warning:not(.btn), html[data-theme="midnight"] .content-wrapper span.bg-warning:not(.btn), html[data-theme="midnight"] .content-wrapper div.bg-warning:not(.btn) { background-color: rgba(243, 156, 18, .18) !important; color: #f5c842 !important; border-color: rgba(243, 156, 18, .30) !important; text-shadow: none !important; } html[data-theme="midnight"] td.bg-info, html[data-theme="midnight"] th.bg-info, html[data-theme="midnight"] .content-wrapper td.bg-info:not(.btn), html[data-theme="midnight"] .content-wrapper .badge.bg-info:not(.btn), html[data-theme="midnight"] .badge.bg-info:not(.btn), html[data-theme="midnight"] span.bg-info:not(.btn), html[data-theme="midnight"] div.bg-info:not(.btn), html[data-theme="midnight"] .content-wrapper span.bg-info:not(.btn), html[data-theme="midnight"] .content-wrapper div.bg-info:not(.btn) { background-color: rgba(0, 192, 239, .18) !important; color: #5dd4f4 !important; border-color: rgba(0, 192, 239, .30) !important; text-shadow: none !important; } html[data-theme="midnight"] td.bg-primary, html[data-theme="midnight"] th.bg-primary, html[data-theme="midnight"] .content-wrapper td.bg-primary:not(.btn), html[data-theme="midnight"] .content-wrapper .badge.bg-primary:not(.btn), html[data-theme="midnight"] .badge.bg-primary:not(.btn), html[data-theme="midnight"] span.bg-primary:not(.btn), html[data-theme="midnight"] div.bg-primary:not(.btn), html[data-theme="midnight"] .content-wrapper span.bg-primary:not(.btn), html[data-theme="midnight"] .content-wrapper div.bg-primary:not(.btn) { background-color: rgba(90, 110, 240, .18) !important; color: #a5b4fc !important; border-color: rgba(90, 110, 240, .30) !important; text-shadow: none !important; } /* Midnight: .bg-white on non-table elements (e.g. a "recent update" panel
) -- the base .bg-white rule hardcodes background-color: #ffffff !important and pairs it with color: var(--text-primary), which is near-white in midnight, so white text sits on a white box and the content becomes invisible (proforma/assembly_comment "RECENT UPDATE" panel). Swap to the card surface + standard readable light text, same treatment as tbody.bg-white above. */ html[data-theme="midnight"] td.bg-white, html[data-theme="midnight"] th.bg-white, html[data-theme="midnight"] .badge.bg-white:not(.btn), html[data-theme="midnight"] span.bg-white:not(.btn), html[data-theme="midnight"] div.bg-white:not(.btn) { background-color: var(--card-bg) !important; color: rgba(255, 255, 255, 0.85) !important; border-color: var(--card-border) !important; text-shadow: none !important; } /* ── Midnight: AdminLTE timeline (follow-up tree, comment history) ── Base app.css hardcodes white card bg (#fff) + dark text (#444/#555) and a white time-label, which render as white blocks in the dark theme. */ html[data-theme="midnight"] .timeline > li > .timeline-item { background: var(--card-bg) !important; color: rgba(255, 255, 255, 0.85) !important; border: 1px solid var(--card-border) !important; box-shadow: var(--card-shadow) !important; } html[data-theme="midnight"] .timeline > li > .timeline-item > .timeline-header { color: rgba(255, 255, 255, 0.92) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="midnight"] .timeline > li > .timeline-item > .timeline-header > a { color: var(--accent) !important; } html[data-theme="midnight"] .timeline > li > .timeline-item > .time { color: rgba(255, 255, 255, 0.45) !important; } html[data-theme="midnight"] .timeline > .time-label > span { background-color: var(--card-bg) !important; color: rgba(255, 255, 255, 0.85) !important; } html[data-theme="midnight"] .btn.bg-maroon { background: linear-gradient(180deg, #ff7e96, #e2536c) !important; border-color: #c83a52 !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(226, 83, 108, .35) !important; } html[data-theme="midnight"] .btn.bg-maroon:hover, html[data-theme="midnight"] .btn.bg-maroon:focus { filter: brightness(1.08); box-shadow: 0 6px 18px rgba(226, 83, 108, .48) !important; } /* ── Midnight: amCharts axis/legend/tooltip text is rendered as SVG with a dark fill baked in by the chart theme — invisible on a near-black canvas. amCharts sets fill as a presentation attribute / inline style at runtime, but a real CSS selector still wins over a presentation attribute, and !important wins over an inline style too, so this lights up every chart uniformly without touching the JS config. NOTE: chart container ids do NOT follow one convention — alongside *_chart there's also purchase_sales_comparision, daily_expenses, sales_amount, year_wise, valve_quantity, zonewise_sales, productType, etc. Matching by id would mean chasing every dashboard's naming forever, so target every amCharts renders inside the admin content area instead — robust to any future chart regardless of what its container div is called. */ html[data-theme="midnight"] .content-wrapper svg text, html[data-theme="midnight"] .content-wrapper svg tspan { fill: #cbd5e1 !important; fill-opacity: 1 !important; } /* Left accent bar on hover — inset box-shadow on the first cell avoids layout shift */ .table > tbody > tr:hover > td:first-child { box-shadow: inset 3px 0 0 var(--accent) !important; } /* ── Table legend chips (Sample / Lead Time Pending) ── These are small colored indicator cells in a legend row above the table. Styled as rounded pill chips instead of plain table cells. */ td.text-bold.sample, td.text-bold.orange-background { border-radius: 6px !important; border: none !important; font-size: calc(11.5px * var(--app-font-scale)) !important; font-weight: 600 !important; padding: 5px 16px !important; letter-spacing: 0.3px !important; text-align: center !important; } /* The mini table wrapping the legend — remove borders and shrink margin */ .col-lg-4 > .table, .col-md-4 > .table { margin-bottom: 6px !important; } .col-lg-4 > .table td, .col-md-4 > .table td { border: none !important; padding: 4px 6px !important; } /* Numeric/code data in table — use monospace */ .table > tbody > tr > td:first-child, .table > tbody > tr > td.id-col, .table code { font-family: 'JetBrains Mono', monospace !important; font-size: calc(11.5px * var(--app-font-scale)) !important; font-weight: 500 !important; } /* DataTables controls */ .dataTables_wrapper { font-family: var(--app-font-family) !important; font-size: calc(12.5px * var(--app-font-scale)) !important; } .dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input { font-family: var(--app-font-family) !important; font-size: calc(12.5px * var(--app-font-scale)) !important; border: 1px solid var(--input-border) !important; border-radius: 7px !important; padding: 5px 10px !important; background-color: var(--input-bg) !important; color: var(--text-primary) !important; } .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--input-border-focus) !important; box-shadow: 0 0 0 3px var(--input-focus-ring) !important; outline: none !important; } .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length { font-size: calc(12px * var(--app-font-scale)) !important; color: var(--text-muted) !important; } /* DataTables sort icons */ .sorting:after, .sorting_asc:after, .sorting_desc:after { color: var(--accent) !important; opacity: 0.7 !important; } /* ================================================================ NESTED TABLES — PPC expandable process sub-list ================================================================ */ /* Bootstrap 3 swaps class: collapse → collapsing (during animation) → collapse.in (open). All selectors use :is(tr.collapse, tr.collapsing) so inner styles apply during the opening animation — otherwise only the outer .table th rules fire and the header briefly shows the 3px accent underline before the inner CSS kicks in. */ /* Container cell — left accent bar lives HERE (outside the table, immune to border-collapse). filter:none stops the outer tr:hover brightness rule from darkening the whole sub-table. */ :is(tr.collapse, tr.collapsing) > td { padding: 0 !important; background-color: var(--accent-muted) !important; border-top: none !important; border-left: 3px solid var(--accent) !important; filter: none !important; } /* Inner table — strip old inline border; no border of its own */ :is(tr.collapse, tr.collapsing) > td > table { border: none !important; margin: 0 !important; background: var(--card-bg) !important; } /* Inner thead — muted/small; 1px divider instead of the heavy 3px accent line */ :is(tr.collapse, tr.collapsing) > td > table > thead > tr > th { background-color: rgba(0, 0, 0, 0.025) !important; color: var(--text-muted) !important; font-size: calc(10px * var(--app-font-scale)) !important; font-weight: 600 !important; border-bottom: 1px solid var(--card-border) !important; border-top: none !important; padding: 5px 8px !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; overflow: visible !important; } /* Process item rows (role="row") — clean card bg */ :is(tr.collapse, tr.collapsing) > td > table > tbody > tr[role="row"] > td { background-color: var(--card-bg) !important; border-top: 1px solid rgba(0, 0, 0, 0.05) !important; } /* Sub-item rows (1st Setup…) — muted tint + italic */ :is(tr.collapse, tr.collapsing) > td > table > tbody > tr:not([role="row"]) > td { background-color: var(--body-bg) !important; border-top: 1px solid rgba(0, 0, 0, 0.04) !important; font-size: calc(12px * var(--app-font-scale)) !important; color: var(--text-secondary) !important; } :is(tr.collapse, tr.collapsing) > td > table > tbody > tr:not([role="row"]) > td:first-child { padding-left: 20px !important; font-style: italic; } /* ── Hover: kill outer-table bleed (brightness filter + inset bar) ── */ :is(tr.collapse, tr.collapsing) > td > table > tbody > tr:hover > td { filter: none !important; } :is(tr.collapse, tr.collapsing) > td > table > tbody > tr:hover > td:first-child { box-shadow: none !important; } /* Process row hover — stronger tint + framing borders + 4px left bar */ :is(tr.collapse, tr.collapsing) > td > table > tbody > tr[role="row"]:hover > td { background-color: var(--accent-light2) !important; border-top: 1px solid var(--accent-light2) !important; border-bottom: 1px solid var(--accent-light2) !important; } :is(tr.collapse, tr.collapsing) > td > table > tbody > tr[role="row"]:hover > td:first-child { box-shadow: inset 4px 0 0 var(--accent) !important; } /* Sub-item row hover — lighter tint (visually subordinate to process row) + 3px bar */ :is(tr.collapse, tr.collapsing) > td > table > tbody > tr:not([role="row"]):hover > td { background-color: var(--accent-light) !important; } :is(tr.collapse, tr.collapsing) > td > table > tbody > tr:not([role="row"]):hover > td:first-child { box-shadow: inset 3px 0 0 var(--accent) !important; padding-left: 20px !important; } /* Raw Material Name cell — show the FULL name (client needs it). Wrap onto as many lines as needed (row grows); break long no-space codes so they don't overflow the column. Tooltip (title attr) still carries the full text. */ .raw-name-wrap { min-width: 240px !important; max-width: 340px !important; line-height: 1.45 !important; cursor: default; overflow-wrap: break-word !important; word-break: break-word !important; } /* ================================================================ PAGINATION ================================================================ */ .pagination { font-family: var(--app-font-family) !important; } .pagination > li > a, .pagination > li > span { font-family: var(--app-font-family) !important; font-size: calc(12px * var(--app-font-scale)) !important; font-weight: 500 !important; color: var(--text-secondary) !important; border-color: var(--input-border) !important; padding: 5px 11px !important; transition: all 0.12s !important; } .pagination > li > a:hover { background-color: var(--accent-light) !important; border-color: var(--accent) !important; color: var(--accent) !important; } .pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span { background-color: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-text) !important; font-weight: 600 !important; } .pagination > li:first-child > a, .pagination > li:first-child > span { border-radius: 7px 0 0 7px !important; } .pagination > li:last-child > a, .pagination > li:last-child > span { border-radius: 0 7px 7px 0 !important; } /* DataTables pagination — match the app's .pagination pill style above (jquery.dataTables.css ships its own grey/white gradient buttons that clash with the theme; restyle .paginate_button with the same vars). Selectors are prefixed with `html` (+1 element specificity) because data_table.blade.php pushes jquery.dataTables.min.css onto the 'stylesheets' stack, which renders AFTER this file — without the extra specificity, dataTables.css's equal-specificity !important rules (e.g. .paginate_button.current { color: #333 !important }) win on source order alone and the text stays dark on every theme but midnight (which already has its own higher-specificity override). */ html .dataTables_wrapper .dataTables_paginate { font-family: var(--app-font-family) !important; } html .dataTables_wrapper .dataTables_paginate .paginate_button { box-sizing: border-box; display: inline-block; min-width: unset; margin: 0 0 0 4px; padding: 5px 11px !important; font-family: var(--app-font-family) !important; font-size: calc(12px * var(--app-font-scale)) !important; font-weight: 500 !important; border-radius: 7px !important; color: var(--text-secondary) !important; background: var(--card-bg) !important; border: 1px solid var(--input-border) !important; transition: all 0.12s !important; } html .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background-color: var(--accent-light) !important; border-color: var(--accent) !important; color: var(--accent) !important; } html .dataTables_wrapper .dataTables_paginate .paginate_button.current, html .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-text) !important; font-weight: 600 !important; } html .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, html .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, html .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active { color: var(--text-muted) !important; background: var(--card-bg) !important; border-color: var(--input-border) !important; box-shadow: none !important; cursor: default; } /* ================================================================ FORMS + INPUTS ================================================================ */ .form-control { font-family: var(--app-font-family) !important; font-size: calc(13px * var(--app-font-scale)) !important; color: var(--text-primary) !important; background-color: var(--input-bg) !important; border: 1px solid var(--input-border) !important; border-radius: 7px !important; padding: 6px 11px !important; transition: border-color 0.15s, box-shadow 0.15s !important; box-shadow: none !important; } /* Fixed 34px height for single-line controls only. Textareas are excluded so their height stays free — otherwise an !important height blocks the inline height the browser writes when you drag the resize handle (vertical resize would silently do nothing). */ .form-control:not(textarea) { height: 34px !important; } .form-control:focus { border-color: var(--input-border-focus) !important; box-shadow: 0 0 0 3px var(--input-focus-ring) !important; outline: none !important; background-color: var(--card-bg) !important; } .form-control::placeholder { color: var(--text-muted) !important; font-weight: 300 !important; } /* No forced/important height here — that would override the inline height set by dragging the resize grip. min-height gives a sensible default size while leaving both-direction resize working. */ textarea.form-control { min-height: 76px; resize: both; } /* Theme-aware scroll box — replaces hardcoded inline #FFFFFF/#CCCCCC on list panels (e.g. quotation Certification/Catalogue) so they follow the theme instead of staying white on the Midnight dark background. */ .theme-scroll-box { background: var(--card-bg, #fff) !important; border: 1px solid var(--border-color, #ccc) !important; } /* ── Midnight: CKEditor 4 (kama skin) chrome ── Dark toolbar / outer border / path bar with light icons so the editor frame matches the dark theme. The content iframe is deliberately NOT styled — it is the email canvas (WYSIWYG = what the recipient receives), so it stays light. */ html[data-theme="midnight"] .cke_chrome { border-color: var(--card-border, #2a2f3a) !important; box-shadow: none !important; } html[data-theme="midnight"] .cke_top, html[data-theme="midnight"] .cke_bottom { background: var(--card-bg, #1b1f27) !important; border-color: var(--card-border, #2a2f3a) !important; box-shadow: none !important; } html[data-theme="midnight"] .cke_toolgroup, html[data-theme="midnight"] .cke_combo_button { background: transparent !important; border-color: var(--card-border, #2a2f3a) !important; } html[data-theme="midnight"] .cke_button:hover, html[data-theme="midnight"] .cke_button:focus, html[data-theme="midnight"] .cke_button_on, html[data-theme="midnight"] .cke_combo_on a.cke_combo_button { background: rgba(255, 255, 255, 0.08) !important; border-color: transparent !important; } html[data-theme="midnight"] .cke_button_label, html[data-theme="midnight"] .cke_combo_text, html[data-theme="midnight"] .cke_path_item, html[data-theme="midnight"] .cke_path_empty { color: var(--text-secondary, #aab2c0) !important; } /* kama renders toolbar icons as dark glyph sprites — invert so they read on the dark toolbar. */ html[data-theme="midnight"] .cke_button_icon { filter: invert(0.85) brightness(1.15) !important; } .input-group-addon { font-family: var(--app-font-family) !important; font-size: calc(13px * var(--app-font-scale)) !important; background-color: var(--body-bg) !important; border: 1px solid var(--input-border) !important; border-radius: 7px !important; color: var(--text-muted) !important; padding: 6px 11px !important; } .form-group label { font-family: var(--app-font-family) !important; font-size: calc(12.5px * var(--app-font-scale)) !important; font-weight: 500 !important; color: var(--text-secondary) !important; margin-bottom: 5px !important; letter-spacing: 0.01em; } /* ================================================================ SELECT2 ================================================================ */ .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { font-family: var(--app-font-family) !important; font-size: calc(13px * var(--app-font-scale)) !important; background-color: var(--input-bg) !important; border: 1px solid var(--input-border) !important; border-radius: 7px !important; min-height: 34px !important; transition: border-color 0.15s, box-shadow 0.15s !important; } .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--input-border-focus) !important; box-shadow: 0 0 0 3px var(--input-focus-ring) !important; outline: none !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { font-family: var(--app-font-family) !important; font-size: calc(13px * var(--app-font-scale)) !important; color: var(--text-primary) !important; line-height: 32px !important; padding-left: 11px !important; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--text-muted) !important; font-weight: 300 !important; } .select2-container--default .select2-selection--single .select2-selection__arrow { top: 5px !important; } .select2-dropdown { font-family: var(--app-font-family) !important; font-size: calc(13px * var(--app-font-scale)) !important; border: 1px solid var(--card-border) !important; border-radius: 9px !important; box-shadow: 0 6px 24px rgba(0,0,0,0.10) !important; overflow: hidden !important; } .select2-search--dropdown .select2-search__field { font-family: var(--app-font-family) !important; font-size: calc(13px * var(--app-font-scale)) !important; border: 1px solid var(--input-border) !important; border-radius: 5px !important; padding: 6px 10px !important; } .select2-results__option { font-family: var(--app-font-family) !important; font-size: calc(13px * var(--app-font-scale)) !important; padding: 8px 12px !important; color: var(--text-primary) !important; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--accent) !important; color: var(--accent-text) !important; } .select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--accent-light) !important; color: var(--accent) !important; } /* ================================================================ PROGRESS BARS ================================================================ */ .progress { border-radius: 20px !important; height: 6px !important; background-color: #e2e8f0 !important; box-shadow: none !important; margin-bottom: 4px !important; overflow: hidden !important; } .progress-bar { border-radius: 20px !important; line-height: 6px !important; font-size: 0 !important; box-shadow: none !important; } .progress-bar-success { background-color: #059669 !important; } .progress-bar-info { background-color: var(--accent) !important; } .progress-bar-warning { background-color: #d97706 !important; } .progress-bar-danger { background-color: #e85656 !important; } /* ================================================================ ADMINLTE bg-* UTILITY CLASSES When bg-* is combined with btn-default, Bootstrap sets text to #333. Force white text on all dark backgrounds; dark text on light ones. ================================================================ */ /* Dark backgrounds → white text */ .bg-navy, .bg-navy.btn { background-color: #1e293b !important; color: #ffffff !important; border-color: #1e293b !important; } .bg-black, .bg-black.btn { background-color: #1e293b !important; color: #ffffff !important; border-color: #1e293b !important; } .bg-blue, .bg-blue.btn { background-color: #2563eb !important; color: #ffffff !important; border-color: #2563eb !important; } .bg-light-blue, .bg-light-blue.btn { background-color: #3b82f6 !important; color: #ffffff !important; border-color: #3b82f6 !important; } .bg-aqua, .bg-aqua.btn { background-color: #0891b2 !important; color: #ffffff !important; border-color: #0891b2 !important; } .bg-teal, .bg-teal.btn { background-color: #0e9488 !important; color: #ffffff !important; border-color: #0e9488 !important; } .bg-green, .bg-green.btn { background-color: #059669 !important; color: #ffffff !important; border-color: #059669 !important; } .bg-olive, .bg-olive.btn { background-color: #3d9970 !important; color: #ffffff !important; border-color: #3d9970 !important; } .bg-red, .bg-red.btn { background-color: #dc2626 !important; color: #ffffff !important; border-color: #dc2626 !important; } .bg-maroon, .bg-maroon.btn { background-color: #be123c !important; color: #ffffff !important; border-color: #be123c !important; } .bg-orange, .bg-orange.btn { background-color: #d97706 !important; color: #ffffff !important; border-color: #d97706 !important; } .bg-fuchsia,.bg-fuchsia.btn{ background-color: #c026d3 !important; color: #ffffff !important; border-color: #c026d3 !important; } .bg-purple, .bg-purple.btn { background-color: #7c3aed !important; color: #ffffff !important; border-color: #7c3aed !important; } .bg-muted, .bg-muted.btn { background-color: #64748b !important; color: #ffffff !important; border-color: #64748b !important; } /* Light backgrounds → dark text */ .bg-yellow, .bg-yellow.btn { background-color: #fbbf24 !important; color: #1e293b !important; border-color: #fbbf24 !important; } .bg-lime, .bg-lime.btn { background-color: #a3e635 !important; color: #1e293b !important; border-color: #a3e635 !important; } .bg-gray, .bg-gray.btn { background-color: #94a3b8 !important; color: #ffffff !important; border-color: #94a3b8 !important; } .bg-silver, .bg-silver.btn { background-color: #cbd5e1 !important; color: #1e293b !important; border-color: #cbd5e1 !important; } .bg-white, .bg-white.btn { background-color: #ffffff !important; color: var(--text-primary) !important; border-color: var(--card-border) !important; } /* Table-cell status highlights (e.g. "X days to go" / "X days delay") — a solid bg-{color} block with white text reads fine for one badge but is too heavy repeated down a whole column. Lighten to a tint with the brand color as text; rgba blends with the cell behind it so this works in light AND midnight themes without per-theme overrides. bg-black/bg-navy excluded — their dark text would be unreadable on a midnight card background. */ td.bg-blue, th.bg-blue { background-color: rgba(37, 99, 235, .14) !important; color: #2563eb !important; } td.bg-light-blue, th.bg-light-blue { background-color: rgba(59, 130, 246, .14) !important; color: #3b82f6 !important; } td.bg-aqua, th.bg-aqua { background-color: rgba(8, 145, 178, .14) !important; color: #0891b2 !important; } td.bg-teal, th.bg-teal { background-color: rgba(14, 148, 136, .14) !important; color: #0e9488 !important; } td.bg-green, th.bg-green { background-color: rgba(5, 150, 105, .14) !important; color: #059669 !important; } td.bg-olive, th.bg-olive { background-color: rgba(61, 153, 112, .14) !important; color: #3d9970 !important; } td.bg-red, th.bg-red { background-color: rgba(220, 38, 38, .14) !important; color: #dc2626 !important; } td.bg-maroon, th.bg-maroon { background-color: rgba(190, 18, 60, .14) !important; color: #be123c !important; } td.bg-orange, th.bg-orange { background-color: rgba(217, 119, 6, .16) !important; color: #d97706 !important; } td.bg-fuchsia, th.bg-fuchsia { background-color: rgba(192, 38, 211, .14) !important; color: #c026d3 !important; } td.bg-purple, th.bg-purple { background-color: rgba(124, 58, 237, .14) !important; color: #7c3aed !important; } /* Bootstrap 3 bg-* utility classes (#f2dede, #fcf8e3 etc.) are near-invisible on buttons. Override all of them when used on btn elements. */ .btn.bg-danger { background-color: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; } .btn.bg-success { background-color: #059669 !important; border-color: #059669 !important; color: #ffffff !important; } .btn.bg-info { background-color: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-text) !important; } .btn.bg-warning { background-color: #d97706 !important; border-color: #d97706 !important; color: #ffffff !important; } .btn.bg-danger:hover { background-color: #b91c1c !important; } .btn.bg-success:hover { background-color: #047857 !important; } .btn.bg-info:hover { background-color: var(--accent-hover) !important; } .btn.bg-warning:hover { background-color: #b45309 !important; } /* Catchall: any btn with a bg-* class gets white text unless overridden above */ .btn[class*="bg-"] { color: #ffffff !important; } .btn.bg-yellow, .btn.bg-lime, .btn.bg-silver, .btn.bg-white { color: #1e293b !important; } /* Hover — slightly darker shade */ .btn.bg-navy:hover { background-color: #162032 !important; } .btn.bg-blue:hover { background-color: #1d4ed8 !important; } .btn.bg-aqua:hover { background-color: #0e7490 !important; } .btn.bg-green:hover { background-color: #047857 !important; } .btn.bg-red:hover { background-color: #b91c1c !important; } .btn.bg-orange:hover { background-color: #b45309 !important; } .btn.bg-teal:hover { background-color: #0f766e !important; } .btn.bg-purple:hover { background-color: #6d28d9 !important; } /* ================================================================ TABLE ACTION BUTTONS ================================================================ */ /* Compact xs buttons inside table cells */ .table td .btn, .table td a.btn { font-size: calc(11px * var(--app-font-scale)) !important; padding: 3px 9px !important; border-radius: 5px !important; font-weight: 500 !important; line-height: 1.4 !important; margin: 1px !important; white-space: nowrap !important; } .table td .btn.btn-xs, .table td a.btn.btn-xs { font-size: calc(10.5px * var(--app-font-scale)) !important; padding: 2px 7px !important; border-radius: 4px !important; } /* ── Icon-only action buttons (edit / delete / view) ── Buttons that contain only a FontAwesome icon get a square pill shape. */ /* Edit — pencil icon → clean blue */ .btn .fa-edit, .btn .fa-pencil, .btn .fa-pencil-square-o { font-size: calc(12px * var(--app-font-scale)) !important; color: inherit !important; } a.btn .fa-pencil, a.btn .fa-edit, button.btn .fa-pencil, button.btn .fa-edit { font-size: calc(12px * var(--app-font-scale)) !important; } /* Delete — trash icon → already on btn-danger, just ensure icon is white */ .btn-danger .fa-trash, .btn-danger .fa-trash-o, .btn-danger .fa-times, .btn-danger .fa-remove { color: #ffffff !important; font-size: calc(11px * var(--app-font-scale)) !important; } /* View / Eye */ .btn .fa-eye, .btn .fa-eye-open { font-size: calc(12px * var(--app-font-scale)) !important; color: inherit !important; } /* Icon spacing inside xs buttons */ .btn.btn-xs .fa:only-child, .table td .btn.btn-xs > .fa:only-child { margin: 0 !important; line-height: 1 !important; } /* ── Button icon color consistency ── All solid-background buttons → white icons/glyphicons. Light-background buttons (default, yellow, lime, silver) → dark icons. */ /* Dark-background btn-* variants */ .btn-primary .fa, .btn-primary .glyphicon, .btn-success .fa, .btn-success .glyphicon, .btn-warning .fa, .btn-warning .glyphicon, .btn-danger .fa, .btn-danger .glyphicon, .btn-info .fa, .btn-info .glyphicon, .btn-inverse .fa, .btn-inverse .glyphicon, .btn-aqua .fa, .btn-aqua .glyphicon, .btn-teal .fa, .btn-teal .glyphicon, .btn-navy .fa, .btn-navy .glyphicon, .btn-purple .fa, .btn-purple .glyphicon, .btn-maroon .fa, .btn-maroon .glyphicon, .btn-pink .fa, .btn-pink .glyphicon, .btn-orange .fa, .btn-orange .glyphicon, .btn-red .fa, .btn-red .glyphicon, .btn-blue .fa, .btn-blue .glyphicon, .btn-green .fa, .btn-green .glyphicon, .btn-black .fa, .btn-black .glyphicon, .btn-light-blue .fa, .btn-light-blue .glyphicon { color: #ffffff !important; } /* bg-* buttons → white icons (covers bg-danger/success/info/warning/etc.) */ .btn[class*="bg-"] .fa, .btn[class*="bg-"] .glyphicon, .btn[class*="bg-"] { /* text already handled per-class above; this ensures icon inheritance */ } .btn.bg-danger .fa, .btn.bg-danger .glyphicon, .btn.bg-success .fa, .btn.bg-success .glyphicon, .btn.bg-info .fa, .btn.bg-info .glyphicon, .btn.bg-warning .fa, .btn.bg-warning .glyphicon { color: #ffffff !important; } /* Light-background buttons → dark icons */ .btn-default .fa, .btn-default .glyphicon, .btn.bg-yellow .fa, .btn.bg-yellow .glyphicon, .btn.bg-lime .fa, .btn.bg-lime .glyphicon, .btn.bg-silver .fa, .btn.bg-silver .glyphicon, .btn.bg-white .fa, .btn.bg-white .glyphicon { color: var(--text-secondary) !important; } /* ================================================================ BADGES + LABELS ================================================================ */ .badge, .label { font-family: var(--app-font-family) !important; font-weight: 600 !important; font-size: calc(10.5px * var(--app-font-scale)) !important; letter-spacing: 0.02em !important; } .badge { border-radius: 20px !important; padding: 3px 9px !important; } .label { border-radius: 5px !important; padding: 2.5px 7px !important; } .badge-primary, .label-primary { background-color: var(--accent) !important; color: var(--accent-text) !important; } .label-info { background-color: var(--accent) !important; color: var(--accent-text) !important; } .label-success { background-color: #059669 !important; color: #fff !important; } .label-warning { background-color: #d97706 !important; color: #fff !important; } .label-danger { background-color: #dc2626 !important; color: #fff !important; } /* ================================================================ BREADCRUMBS ================================================================ */ .breadcrumb { font-family: var(--app-font-family) !important; font-size: calc(12px * var(--app-font-scale)) !important; background-color: transparent !important; padding: 6px 0 !important; margin-bottom: 8px !important; } .breadcrumb > li + li::before { color: var(--text-muted) !important; content: "› " !important; font-size: calc(14px * var(--app-font-scale)) !important; } .breadcrumb > li > a { color: var(--accent) !important; font-weight: 400 !important; } .breadcrumb > li > a:hover { color: var(--accent-hover) !important; text-decoration: none !important; } .breadcrumb > .active { color: var(--text-muted) !important; font-weight: 500 !important; } /* ================================================================ MODALS ================================================================ */ .modal-content { font-family: var(--app-font-family) !important; border: none !important; border-radius: 12px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.08) !important; overflow: hidden !important; } .modal-header { background-color: var(--card-bg) !important; border-bottom: 1px solid var(--card-border) !important; padding: 16px 22px !important; } .modal-header .modal-title { font-family: var(--app-font-family) !important; font-weight: 600 !important; font-size: calc(15px * var(--app-font-scale)) !important; color: var(--text-primary) !important; letter-spacing: -0.01em !important; } .modal-header .close { color: var(--text-muted) !important; opacity: 1 !important; font-size: calc(20px * var(--app-font-scale)) !important; font-weight: 300 !important; } .modal-header .close:hover { color: var(--accent) !important; } .modal-body { background: var(--card-bg) !important; padding: 22px !important; } .modal-footer { background: var(--body-bg) !important; border-top: 1px solid var(--card-border) !important; padding: 12px 22px !important; } /* ================================================================ ALERTS ================================================================ */ .alert { font-family: var(--app-font-family) !important; font-size: calc(13px * var(--app-font-scale)) !important; font-weight: 400 !important; border: none !important; border-radius: 9px !important; padding: 12px 16px !important; border-left: 4px solid !important; } .alert-info { background-color: var(--accent-light) !important; color: var(--accent-hover) !important; border-left-color: var(--accent) !important; } .alert-success { background-color: #ecfdf5 !important; color: #065f46 !important; border-left-color: #059669 !important; } .alert-warning { background-color: #fffbeb !important; color: #78350f !important; border-left-color: #d97706 !important; } .alert-danger { background-color: #fef2f2 !important; color: #991b1b !important; border-left-color: #dc2626 !important; } html[data-theme="midnight"] .alert-success { background-color: rgba(5, 150, 105, 0.15) !important; color: #6ee7b7 !important; } html[data-theme="midnight"] .alert-warning { background-color: rgba(217, 119, 6, 0.15) !important; color: #fcd34d !important; } html[data-theme="midnight"] .alert-danger { background-color: rgba(220, 38, 38, 0.15) !important; color: #fca5a5 !important; } /* ================================================================ TOASTR NOTIFICATIONS ================================================================ */ #toast-container > div { font-family: var(--app-font-family) !important; font-size: calc(13px * var(--app-font-scale)) !important; border-radius: 10px !important; box-shadow: 0 6px 24px rgba(0,0,0,0.14) !important; opacity: 1 !important; padding: 12px 16px 12px 50px !important; } #toast-container > .toast-success { background-color: #059669 !important; } #toast-container > .toast-error { background-color: #dc2626 !important; } #toast-container > .toast-warning { background-color: #d97706 !important; } #toast-container > .toast-info { background-color: var(--accent) !important; } /* ================================================================ LOGIN PAGE ================================================================ */ body.background-image { background-attachment: fixed; } body.background-image .login-box { margin: 0 !important; position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 400px !important; max-width: 95vw !important; z-index: 1 !important; } body.background-image .login-logo { margin-bottom: 20px !important; text-align: center !important; } body.background-image .login-logo img { max-height: 64px !important; } body.background-image .login-box-body { font-family: var(--app-font-family) !important; background: rgba(255, 255, 255, 0.96) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-radius: 16px !important; border: none !important; box-shadow: 0 20px 60px rgba(0,0,0,0.22), 0 4px 12px rgba(0,0,0,0.08) !important; padding: 32px 36px !important; } body.background-image .login-box-body .login-box-msg { font-family: var(--app-font-family) !important; font-size: calc(13.5px * var(--app-font-scale)) !important; font-weight: 400 !important; color: #475569 !important; margin-bottom: 22px !important; text-align: center !important; } body.background-image .login-box-body .form-group label { font-size: calc(12px * var(--app-font-scale)) !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.6px !important; color: #64748b !important; } body.background-image .login-box-body .form-control { border-color: #e2e8f0 !important; background: #f8fafc !important; height: 42px !important; border-radius: 8px !important; } body.background-image .login-box-body .btn-primary { width: 100% !important; padding: 11px !important; font-size: calc(14px * var(--app-font-scale)) !important; font-weight: 600 !important; letter-spacing: 0.02em !important; border-radius: 9px !important; background-color: #2563eb !important; border-color: #2563eb !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important; } body.background-image .login-box-body .btn-primary:hover { background-color: #1d4ed8 !important; border-color: #1d4ed8 !important; } /* ================================================================ SEARCH / FILTER PANEL ================================================================ */ /* Container — overflow:hidden lets the browser GPU-composite the slideUp/Down. No border-radius transition here — it would fire AFTER jQuery's slideUp ends, creating a second visible animation jerk. */ #form-advanced-search .box.box-solid { border-left: 3px solid var(--accent) !important; overflow: hidden !important; } /* GPU-accelerate the two sliding elements */ #form-advanced-search .box-body, #form-advanced-search .box-footer { will-change: height; transform: translateZ(0); } /* Header */ #form-advanced-search .box-header.with-border { background: linear-gradient(90deg, var(--accent-light) 0%, var(--card-bg) 60%) !important; display: flex !important; flex-direction: row !important; align-items: center !important; cursor: pointer; padding: 10px 16px !important; min-height: 42px !important; } /* Title stays on the left, tools pushed to the far right */ #form-advanced-search .box-header .box-title { flex: 1 1 auto !important; text-align: left !important; font-size: calc(11px * var(--app-font-scale)) !important; font-weight: 700 !important; letter-spacing: 1.1px !important; text-transform: uppercase !important; color: var(--accent) !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; } /* Filter icon before "Search" title — fa-search (\f002) is universally present in FA4 */ #form-advanced-search .box-header .box-title::before { font-family: 'FontAwesome'; content: "\f0b0"; margin-right: 7px; font-size: calc(11px * var(--app-font-scale)); opacity: 0.7; speak: none; -webkit-font-smoothing: antialiased; } /* display:contents dissolves the wrapper — button becomes a direct flex child of the header, so the header's align-items:center centers it automatically */ #form-advanced-search .box-header .box-tools.pull-right { display: contents !important; float: none !important; } /* Collapse toggle — compact accent pill. Use line-height centering (more reliable than flex for FontAwesome glyphs). */ #form-advanced-search .btn-box-tool { display: inline-block !important; background: var(--accent-muted) !important; color: var(--accent) !important; border-radius: 6px !important; border: 1.5px solid var(--accent-light2) !important; width: 24px !important; height: 20px !important; padding: 0 !important; text-align: center !important; line-height: 17px !important; font-size: calc(10px * var(--app-font-scale)) !important; vertical-align: middle !important; transition: background 0.15s, border-color 0.15s !important; box-sizing: border-box !important; } /* Icon — inherit the line-height centering, no extra spacing */ #form-advanced-search .btn-box-tool .fa { font-size: calc(10px * var(--app-font-scale)) !important; line-height: inherit !important; vertical-align: baseline !important; margin: 0 !important; padding: 0 !important; } #form-advanced-search .btn-box-tool:hover { background: var(--accent-light2) !important; border-color: var(--accent) !important; } /* Field labels — uppercase microlabels */ #form-advanced-search label.text-sm { font-size: calc(10.5px * var(--app-font-scale)) !important; font-weight: 600 !important; letter-spacing: 0.6px !important; text-transform: uppercase !important; color: var(--text-secondary) !important; display: block !important; margin-bottom: 4px !important; line-height: 1.3 !important; } /* ── Input + × as one connected unit ── Override Bootstrap 3's display:table on .input-group with flexbox. */ #form-advanced-search .input-group { display: flex !important; align-items: stretch !important; } /* Text inputs and native selects (visible ones). NO display:block !important — Select2 hides its native

) */ .db-tab-title { font-family: var(--app-font-family); font-size: calc(15px * var(--app-font-scale)); font-weight: 700; color: var(--text-primary); text-align: center; letter-spacing: -.2px; margin: 4px 0 14px; } /* ================================================================ ADDITIONAL BADGE + LABEL VARIANTS ================================================================ */ .badge-default, .label-default { background-color: #64748b !important; color: #ffffff !important; } .badge-primary, .label-primary { background-color: var(--accent) !important; color: #ffffff !important; } .badge-success { background-color: #059669 !important; color: #ffffff !important; } .badge-info { background-color: var(--accent) !important; color: var(--accent-text) !important; } .badge-warning { background-color: #d97706 !important; color: #ffffff !important; } .badge-danger { background-color: #dc2626 !important; color: #ffffff !important; } /* ================================================================ CONTENT-AREA DROPDOWN MENUS (outside .main-header) ================================================================ */ .dropdown-menu { font-family: var(--app-font-family) !important; font-size: calc(13px * var(--app-font-scale)) !important; border: 1px solid var(--card-border) !important; border-radius: 10px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important; padding: 6px !important; background-color: var(--card-bg) !important; } .dropdown-menu > li > a { font-family: var(--app-font-family) !important; font-size: calc(13px * var(--app-font-scale)) !important; color: var(--text-secondary) !important; padding: 8px 12px !important; border-radius: 6px !important; transition: background-color 0.12s, color 0.12s !important; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-color: var(--accent-light) !important; color: var(--accent) !important; } .dropdown-menu > li > a > .fa { color: var(--text-muted) !important; width: 16px !important; margin-right: 6px !important; } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover { background-color: var(--accent) !important; color: var(--accent-text) !important; } .dropdown-menu > .divider { background-color: var(--card-border) !important; margin: 4px 0 !important; } /* Nav pills */ .nav-pills > li > a { font-family: var(--app-font-family) !important; font-size: calc(12.5px * var(--app-font-scale)) !important; font-weight: 500 !important; color: var(--text-secondary) !important; border-radius: 7px !important; padding: 7px 16px !important; transition: background-color 0.15s, color 0.15s !important; } .nav-pills > li > a:hover { background-color: var(--accent-light) !important; color: var(--accent) !important; } .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { background-color: var(--accent) !important; color: #ffffff !important; } /* ================================================================ DASHBOARD — Quote card, Notification banner, Birthday, Anniversary, Belated Birthday ================================================================ */ /* ── Daily quote card ── */ .dash-quote-card { display: flex; align-items: center; gap: 16px; padding: 18px 24px; margin: 0 0 24px; background: var(--card-bg); border: 1px solid var(--card-border); border-left: 4px solid var(--accent); border-radius: 10px; box-shadow: var(--card-shadow); } .dash-quote-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px; background: var(--accent-muted); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: calc(16px * var(--app-font-scale)); } .dash-quote-text { font-family: var(--app-font-family); font-size: calc(13.5px * var(--app-font-scale)); font-weight: 400; color: var(--text-secondary); line-height: 1.7; font-style: italic; flex: 1; } /* ── Notification banner ── */ .dash-notif-wrap { margin-bottom: 20px; } .dash-notif-banner { display: flex; align-items: center; gap: 14px; padding: 13px 20px; border-radius: 10px; background: var(--accent-light); border-left: 4px solid var(--accent); margin-bottom: 8px; animation: dashNotifIn 0.45s ease both; overflow: hidden; } .dash-notif-banner.color-success { background: #ecfdf5; border-left-color: #059669; } .dash-notif-banner.color-danger, .dash-notif-banner.color-red { background: #fef2f2; border-left-color: #dc2626; } .dash-notif-banner.color-warning, .dash-notif-banner.color-orange { background: #fffbeb; border-left-color: #d97706; } .dash-notif-banner.color-navy { background: #f0f4ff; border-left-color: #1e3a5f; } .dash-notif-banner.color-purple { background: #f5f3ff; border-left-color: #7c3aed; } .dash-notif-banner.color-teal { background: #f0fdfa; border-left-color: #0e9488; } .dash-notif-banner.color-green { background: #f0fdf4; border-left-color: #16a34a; } .dash-notif-icon { font-size: calc(18px * var(--app-font-scale)); flex-shrink: 0; opacity: 0.75; } .dash-notif-content { flex: 1; min-width: 0; overflow: hidden; } .dash-notif-content h2 { margin: 0 !important; font-size: calc(13.5px * var(--app-font-scale)) !important; font-weight: 500 !important; white-space: nowrap; display: inline-block; animation: dashNotifScroll 22s linear infinite; } @keyframes dashNotifIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } } @keyframes dashNotifScroll { 0% { transform: translateX(60%); } 100% { transform: translateX(-100%); } } /* ── Birthday card ── */ .dash-bday-card { background: var(--card-bg); border-radius: 12px; overflow: hidden; box-shadow: var(--card-shadow); border: 1px solid var(--card-border); margin-bottom: 20px; } .dash-bday-header { padding: 15px 20px; background: linear-gradient(to right, rgba(244,63,94,0.06) 0%, transparent 70%); border-bottom: 1px solid var(--card-border); display: flex; align-items: center; gap: 13px; } .dash-bday-icon-box { width: 44px; height: 44px; background: linear-gradient(135deg, #fb7185 0%, #f43f5e 100%); border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: calc(22px * var(--app-font-scale)); flex-shrink: 0; box-shadow: 0 4px 12px rgba(244,63,94,0.28); } .dash-bday-header-text { flex: 1; min-width: 0; } .dash-bday-title { color: var(--text-primary) !important; font-size: calc(14.5px * var(--app-font-scale)) !important; font-weight: 700 !important; margin: 0 0 2px !important; letter-spacing: -0.01em !important; line-height: 1.3 !important; } .dash-bday-subtitle { color: var(--text-muted) !important; font-size: calc(12px * var(--app-font-scale)) !important; margin: 0 !important; line-height: 1.4 !important; } .dash-bday-today-tag { background: rgba(244,63,94,0.08); color: #f43f5e; border: 1px solid rgba(244,63,94,0.2); border-radius: 20px; padding: 4px 11px; font-size: calc(11px * var(--app-font-scale)); font-weight: 600; flex-shrink: 0; white-space: nowrap; letter-spacing: 0.01em; } .dash-bday-people { background: var(--card-bg); padding: 0; } .dash-bday-person { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--card-border); transition: background 0.15s; } .dash-bday-person:last-child { border-bottom: none; } .dash-bday-person:hover { background: var(--body-bg); } .dash-bday-avatar { position: relative; flex-shrink: 0; } .dash-bday-avatar img { width: 42px !important; height: 42px !important; object-fit: cover; border-radius: 50% !important; border: 2px solid rgba(244,63,94,0.22) !important; display: block; } .dash-bday-info { flex: 1; min-width: 0; } .dash-bday-name { font-family: var(--app-font-family); font-weight: 600; font-size: calc(13.5px * var(--app-font-scale)); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-bday-dept { font-size: calc(11.5px * var(--app-font-scale)); color: var(--text-muted); font-weight: 400; margin-top: 2px; display: block; } .dash-bday-badge { flex-shrink: 0; font-size: calc(18px * var(--app-font-scale)); } /* ── Belated birthday card ── */ .dash-belated-card { background: var(--card-bg); border-radius: 12px; overflow: hidden; box-shadow: var(--card-shadow); border: 1px solid var(--card-border); margin-bottom: 20px; } .dash-belated-header { padding: 14px 18px; background: linear-gradient(to right, rgba(100,116,139,0.06) 0%, transparent 70%); border-bottom: 1px solid var(--card-border); display: flex; align-items: center; gap: 12px; } .dash-belated-icon-box { width: 38px; height: 38px; background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: calc(18px * var(--app-font-scale)); flex-shrink: 0; } .dash-belated-header-text { flex: 1; } .dash-belated-title { color: var(--text-primary) !important; font-size: calc(14px * var(--app-font-scale)) !important; font-weight: 700 !important; margin: 0 0 2px !important; line-height: 1.3 !important; } .dash-belated-subtitle { color: var(--text-muted) !important; font-size: calc(11.5px * var(--app-font-scale)) !important; margin: 0 !important; } .dash-belated-people { background: var(--card-bg); padding: 0; } .dash-belated-person { display: flex; align-items: center; gap: 11px; padding: 10px 18px; border-bottom: 1px solid var(--card-border); transition: background 0.15s; } .dash-belated-person:last-child { border-bottom: none; } .dash-belated-person:hover { background: var(--body-bg); } .dash-belated-avatar img { width: 38px !important; height: 38px !important; object-fit: cover; border-radius: 50% !important; border: 2px solid var(--card-border) !important; display: block; } .dash-belated-info { flex: 1; } .dash-belated-name { font-family: var(--app-font-family); font-weight: 600; font-size: calc(13px * var(--app-font-scale)); color: var(--text-primary); } .dash-belated-dept { font-size: calc(11px * var(--app-font-scale)); color: var(--text-muted); display: block; margin-top: 1px; } /* ── Anniversary strip (compact chip row) ── */ .dash-anniv-strip { display: flex; align-items: center; gap: 16px; padding: 13px 20px; background: var(--card-bg); border: 1px solid var(--card-border); border-left: 4px solid var(--accent); border-radius: 10px; margin-bottom: 20px; box-shadow: var(--card-shadow); flex-wrap: wrap; } .dash-anniv-label { display: flex; align-items: center; gap: 7px; color: var(--accent); font-family: var(--app-font-family); font-weight: 700; font-size: calc(11px * var(--app-font-scale)); text-transform: uppercase; letter-spacing: 0.9px; white-space: nowrap; flex-shrink: 0; } .dash-anniv-label .fa { font-size: calc(13px * var(--app-font-scale)); color: var(--accent) !important; } .dash-anniv-chips { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; } .dash-anniv-chip { display: flex; align-items: center; gap: 9px; background: var(--accent-muted); border: 1px solid var(--accent-light2); border-radius: 50px; padding: 5px 12px 5px 5px; transition: box-shadow 0.15s, transform 0.15s; } .dash-anniv-chip:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.10); transform: translateY(-1px); } .dash-anniv-yr { background: var(--accent); color: var(--accent-text); border-radius: 50px; padding: 3px 10px; font-family: var(--app-font-family); font-size: calc(11px * var(--app-font-scale)); font-weight: 700; white-space: nowrap; flex-shrink: 0; } .dash-anniv-info { display: flex; flex-direction: column; min-width: 0; } .dash-anniv-name { font-family: var(--app-font-family); font-weight: 600; font-size: calc(12.5px * var(--app-font-scale)); color: var(--text-primary); white-space: nowrap; line-height: 1.3; } .dash-anniv-dept { font-size: calc(10.5px * var(--app-font-scale)); color: var(--text-muted); white-space: nowrap; line-height: 1.3; } .dash-anniv-emoji { font-size: calc(14px * var(--app-font-scale)); flex-shrink: 0; } /* ================================================================ DASHBOARD HOME — db-* component system ================================================================ */ /* ── Greeting header ── */ .db-greeting { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .db-greeting-title { font-size: calc(22px * var(--app-font-scale)) !important; font-weight: 800 !important; color: var(--text-primary) !important; letter-spacing: -.3px; margin: 0 0 4px !important; line-height: 1.25 !important; } .db-greeting-sub { font-size: calc(13.5px * var(--app-font-scale)); color: var(--text-muted); font-weight: 500; margin: 0; } .db-date-pill { display: flex; align-items: center; gap: 9px; font-size: calc(13px * var(--app-font-scale)); color: var(--text-secondary); font-weight: 600; background: var(--card-bg); border: 1px solid var(--card-border); padding: 9px 15px; border-radius: 11px; box-shadow: var(--card-shadow); white-space: nowrap; flex-shrink: 0; } .db-date-pill i { color: var(--accent); font-size: calc(14px * var(--app-font-scale)); } /* ── Quote card ── */ .db-quote-card { position: relative; overflow: hidden; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 26px 32px; box-shadow: var(--card-shadow); display: flex; align-items: center; gap: 24px; margin-bottom: 22px; } .db-quote-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(to bottom, var(--accent), var(--accent-light)); border-radius: 3px 0 0 3px; } .db-quote-deco { position: absolute; right: -30px; top: -30px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(79,111,237,.07), transparent 70%); pointer-events: none; } .db-quote-mark { flex: 0 0 58px; width: 58px; height: 58px; border-radius: 14px; background: var(--accent-muted); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: calc(22px * var(--app-font-scale)); flex-shrink: 0; } .db-quote-body { flex: 1; min-width: 0; } .db-quote-label { font-size: calc(10.5px * var(--app-font-scale)); font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; display: flex; align-items: center; gap: 7px; } .db-quote-text { font-size: calc(17px * var(--app-font-scale)) !important; line-height: 1.55 !important; font-weight: 600 !important; color: var(--text-primary) !important; letter-spacing: -.15px; margin: 0 0 10px !important; } .db-quote-author { font-size: calc(13px * var(--app-font-scale)); color: var(--text-muted); font-weight: 600; } .db-quote-author strong { color: var(--text-secondary); } /* ── 3-column main grid ── */ /* Home dashboard — roomier side padding + centered max-width (scoped to this page only via the body.page-dashboard class, so data-table pages stay full width). */ body.page-dashboard .content { max-width: 1600px; margin: 0 auto; padding-left: 30px !important; padding-right: 30px !important; } @media (max-width: 768px) { body.page-dashboard .content { padding-left: 14px !important; padding-right: 14px !important; } } .db-grid { display: grid; grid-template-columns: 1.05fr 1.45fr 0.95fr; gap: 22px; align-items: start; margin-bottom: 22px; } @media (max-width: 1200px) { .db-grid { grid-template-columns: 1fr 1fr; } .db-card-announce { grid-column: 1 / -1; } } @media (max-width: 768px) { .db-grid { grid-template-columns: 1fr; } .db-card-announce { grid-column: auto; } .db-quote-card { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; } } /* ── 2-column grid (HR dashboard — even split, distinct from the 3-column 1.05/1.45/0.95 home-page grid) ── */ .db-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; margin-bottom: 22px; } .db-grid-2.db-grid-2-lead { grid-template-columns: 7fr 3fr; } /* When only one of the two cards has data, show it at a normal column width (not stretched full-width). */ .db-grid-2.db-grid-2--single { grid-template-columns: minmax(0, 640px); } @media (max-width: 768px) { .db-grid-2, .db-grid-2.db-grid-2-lead { grid-template-columns: 1fr; } } /* ── 3-column balanced layout (marketing dashboard — self-balancing card stacks) ── */ .db-grid-3 { column-count: 3; column-gap: 22px; margin-bottom: 22px; } .db-grid-3 > .db-card, .db-grid-3 > .db-pulse-card, .db-grid-3 > .db-list-card, .db-grid-3 > .db-profile-card { break-inside: avoid; margin-bottom: 22px; } @media (max-width: 1200px) { .db-grid-3 { column-count: 2; } } @media (max-width: 768px) { .db-grid-3 { column-count: 1; } } /* ── Base card ── */ .db-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: var(--card-shadow); overflow: hidden; } /* ── Card header ── */ .db-card-head { display: flex; align-items: center; gap: 12px; padding: 15px 17px 12px; border-bottom: 1px solid var(--card-border); } .db-ico { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: 0 0 38px; font-size: calc(16px * var(--app-font-scale)); } .db-ico-sm { width: 32px; height: 32px; border-radius: 9px; font-size: calc(13px * var(--app-font-scale)); flex: 0 0 32px; } .db-ico-rose { background: #ffe9f0; color: #f43f5e; } .db-ico-amber { background: #fff3dd; color: #f5a524; } .db-ico-violet { background: #efeaff; color: #7c3aed; } .db-ico-teal { background: #e0faf8; color: #0f9488; } .db-card-ttl { font-size: calc(14px * var(--app-font-scale)); font-weight: 700; color: var(--text-primary); letter-spacing: -.15px; line-height: 1.3; } .db-card-cap { font-size: calc(11.5px * var(--app-font-scale)); color: var(--text-muted); font-weight: 500; margin-top: 1px; } .db-count-badge { margin-left: auto; font-size: calc(12px * var(--app-font-scale)); font-weight: 700; padding: 4px 11px; border-radius: 20px; background: var(--body-bg); color: var(--text-secondary); border: 1px solid var(--card-border); flex-shrink: 0; text-decoration: none; } a.db-count-badge:hover { color: var(--accent); border-color: var(--accent-light2); text-decoration: none; } /* ── Letter avatars ── */ .db-av { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: calc(15px * var(--app-font-scale)); color: #fff; position: relative; flex-shrink: 0; font-family: var(--app-font-family); } .db-av-sm { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; font-size: calc(13px * var(--app-font-scale)); } /* ── Birthday hero (today) ── */ .db-bday-hero { margin: 13px 13px 5px; padding: 15px 17px; border-radius: 14px; background: linear-gradient(120deg, #fff5f8, #ffeef4); border: 1px solid #ffd9e6; display: flex; align-items: center; gap: 14px; position: relative; overflow: hidden; } .db-bday-info { flex: 1; min-width: 0; } .db-bday-right { margin-left: auto; display: flex; align-items: center; gap: 9px; flex-shrink: 0; } .db-bday-ribbon { font-size: calc(10.5px * var(--app-font-scale)); font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #fff; background: #f43f5e; padding: 4px 10px; border-radius: 20px; box-shadow: 0 4px 10px rgba(244,63,94,.3); white-space: nowrap; flex-shrink: 0; } .db-bday-name { font-size: calc(14.5px * var(--app-font-scale)); font-weight: 700; color: #2a3346; line-height: 1.3; } .db-bday-dept { font-size: calc(12px * var(--app-font-scale)); color: #a8546f; font-weight: 600; margin-top: 3px; display: flex; align-items: center; gap: 5px; } .db-bday-cake-bg { position: absolute; left: -8px; bottom: -14px; font-size: calc(60px * var(--app-font-scale)); opacity: .07; pointer-events: none; line-height: 1; } /* ── Generic list ── */ .db-list { padding: 6px 9px 10px; } .db-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; transition: background .15s; } .db-row:hover { background: var(--body-bg); } .db-row-nm { font-size: calc(13.5px * var(--app-font-scale)); font-weight: 700; color: var(--text-primary); line-height: 1.3; } .db-row-mt { font-size: calc(11.5px * var(--app-font-scale)); color: var(--text-muted); font-weight: 500; margin-top: 2px; } .db-row-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .db-chip-gray { font-size: calc(11px * var(--app-font-scale)); font-weight: 700; padding: 4px 10px; border-radius: 20px; background: var(--body-bg); color: var(--text-secondary); border: 1px solid var(--card-border); white-space: nowrap; } .db-send-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .15s; font-size: calc(12px * var(--app-font-scale)); } .db-send-btn:hover { color: #f43f5e; border-color: #ffd9e6; background: #fff5f8; } /* ── Wish buttons (send wishes / congratulate): sent state ── */ .db-wish-btn.is-sent, .db-send-btn.is-sent, .db-cong-btn.is-sent, .db-bday-wish.is-sent { color: #13b070 !important; border-color: #b7ebcf !important; background: #e9f9f0 !important; cursor: default !important; } /* Birthday "today" hero send button */ .db-bday-wish { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 9px; border: 1px solid #ffd9e6; background: #fff; color: #f43f5e; font-family: var(--app-font-family); font-size: calc(12px * var(--app-font-scale)); font-weight: 700; cursor: pointer; transition: .15s; position: relative; z-index: 1; } .db-bday-wish:hover { background: #f43f5e; color: #fff; border-color: #f43f5e; } .db-bday-wish i { font-size: calc(12px * var(--app-font-scale)); } /* ── "Your wishes" — pinned sticky notes on a board ── */ .db-wishes-card { margin-bottom: 22px; } .db-noteboard { padding: 24px 18px 22px; display: flex; flex-wrap: wrap; gap: 22px; border-radius: 0 0 16px 16px; background: radial-gradient(circle, rgba(0, 0, 0, .05) 1px, transparent 1.6px) 0 0 / 18px 18px, var(--body-bg); } .db-note { position: relative; width: 200px; min-height: 118px; padding: 20px 16px 14px; border-radius: 3px; color: #3a3344; font-family: var(--app-font-family); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .35), 0 2px 4px rgba(0, 0, 0, .10); transition: transform .18s ease, box-shadow .18s ease; } .db-note-0 { background: #fff3b0; transform: rotate(-2.2deg); } .db-note-1 { background: #ffd6e4; transform: rotate(1.8deg); } .db-note-2 { background: #cfe8ff; transform: rotate(-1.2deg); } .db-note-3 { background: #d4f6dd; transform: rotate(2.4deg); } .db-note:hover { transform: rotate(0) translateY(-3px) scale(1.03); box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .4); z-index: 2; } .db-note-pin { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8aa6, #e0466b 70%); box-shadow: 0 3px 5px rgba(0, 0, 0, .3), inset -1px -1px 2px rgba(0, 0, 0, .2); } .db-note-emoji { font-size: calc(25px * var(--app-font-scale)); line-height: 1; margin-bottom: 8px; } .db-note-msg { font-size: calc(13px * var(--app-font-scale)); font-weight: 600; line-height: 1.5; } .db-note-from { margin-top: 10px; font-size: calc(12px * var(--app-font-scale)); font-weight: 700; color: #6b6478; text-align: right; } /* ── Toast (wish actions) ── */ .db-toast-wrap { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 10001; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; } .db-toast { background: var(--text-primary); color: var(--card-bg); padding: 12px 20px; border-radius: 12px; font-family: var(--app-font-family); font-size: calc(13px * var(--app-font-scale)); font-weight: 700; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(14px); transition: .25s; white-space: nowrap; } .db-toast.show { opacity: 1; transform: none; } .db-toast-celebrate { background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: var(--accent-text, #fff); font-size: calc(14.5px * var(--app-font-scale)); font-weight: 800; padding: 14px 26px; box-shadow: 0 20px 44px -14px var(--accent); } /* ── Anniversary rows ── */ .db-ann-list { padding: 4px 9px 10px; } .db-ann-row { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 12px; transition: background .15s; } .db-ann-row:hover { background: var(--body-bg); } .db-ann-yr-overlay { position: absolute; right: -4px; bottom: -4px; background: #f5a524; color: #fff; font-size: calc(9px * var(--app-font-scale)); font-weight: 800; padding: 2px 5px; border-radius: 7px; border: 2px solid var(--card-bg); white-space: nowrap; line-height: 1.3; } .db-ann-meta { flex: 1; min-width: 0; } .db-ann-nm { font-size: calc(13.5px * var(--app-font-scale)); font-weight: 700; color: var(--text-primary); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .db-ann-dp { font-size: calc(11.5px * var(--app-font-scale)); color: var(--text-muted); font-weight: 500; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .db-yr-big { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 50px; flex: 0 0 50px; padding: 6px 0; border-radius: 11px; background: #fff3dd; } .db-yr-big b { font-size: calc(17px * var(--app-font-scale)); font-weight: 800; color: #b9791a; line-height: 1; } .db-yr-big span { font-size: calc(8.5px * var(--app-font-scale)); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #c79234; margin-top: 2px; } .db-cong-btn { font-size: calc(11.5px * var(--app-font-scale)); font-weight: 700; color: var(--accent); background: var(--accent-muted); padding: 6px 11px; border-radius: 20px; cursor: pointer; border: 1px solid var(--accent-light2); transition: .15s; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; } .db-cong-btn i { font-size: calc(11px * var(--app-font-scale)); } .db-cong-btn:hover { background: var(--accent); color: var(--accent-text); border-color: var(--accent); } /* ── Announcements ── */ .db-announce-list { padding: 4px 6px 8px; display: flex; flex-direction: column; } .db-announce-item { display: flex; gap: 12px; padding: 12px 10px; border-radius: 12px; cursor: pointer; transition: background .15s; position: relative; } .db-announce-item:hover { background: var(--body-bg); } .db-announce-item:not(:last-child) { border-bottom: 1px solid var(--card-border); } .db-pin-icon { position: absolute; top: 12px; right: 10px; color: var(--accent); font-size: calc(12px * var(--app-font-scale)); } .db-announce-tag { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: calc(15px * var(--app-font-scale)); flex-shrink: 0; } .db-tag-blue { background: var(--accent-muted); color: var(--accent); } .db-tag-green { background: #e9f7ef; color: #13b070; } .db-tag-amber { background: #fff3dd; color: #f5a524; } .db-tag-rose { background: #ffe9f0; color: #f43f5e; } .db-tag-violet { background: #efeaff; color: #7c3aed; } .db-tag-teal { background: #e0faf8; color: #0f9488; } .db-tag-gray { background: var(--body-bg); color: var(--text-secondary); } .db-announce-content { flex: 1; min-width: 0; } .db-announce-title { font-size: calc(13px * var(--app-font-scale)); font-weight: 700; color: var(--text-primary); line-height: 1.35; } .db-announce-desc { font-size: calc(12px * var(--app-font-scale)); color: var(--text-secondary); font-weight: 500; margin-top: 4px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .db-announce-meta { font-size: calc(11px * var(--app-font-scale)); color: var(--text-muted); font-weight: 600; margin-top: 6px; display: flex; align-items: center; gap: 8px; } .db-dept-tag { padding: 2px 7px; border-radius: 5px; font-size: calc(10px * var(--app-font-scale)); font-weight: 700; letter-spacing: .2px; background: var(--accent-muted); color: var(--accent); } /* ── Empty state ── */ .db-empty-state { padding: 28px 20px; text-align: center; color: var(--text-muted); font-size: calc(13px * var(--app-font-scale)); font-weight: 500; display: flex; flex-direction: column; align-items: center; gap: 8px; } .db-empty-state i { font-size: calc(24px * var(--app-font-scale)); opacity: .3; } /* ── Avatar photo (birthday / anniversary) ── */ .db-av .db-av-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } /* ── Announcements: featured banner + feed + modal (top of dashboard) ── */ .db-announce-section { margin-bottom: 22px; display: flex; flex-direction: column; gap: 14px; } .db-announce-banner { display: flex; gap: 18px; align-items: flex-start; padding: 20px 22px; border-radius: 16px; position: relative; overflow: hidden; background: linear-gradient(120deg, var(--accent-muted), var(--card-bg) 64%); border: 1px solid var(--accent-light2); box-shadow: var(--card-shadow); } .db-announce-banner-ico { width: 50px; height: 50px; flex: 0 0 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: calc(20px * var(--app-font-scale)); /* vivid brand-accent gradient + colored glow (theme-aware) */ background: linear-gradient(135deg, var(--accent), var(--accent-hover)) !important; color: #fff !important; box-shadow: 0 10px 22px -8px var(--accent); } .db-announce-banner-ico svg { width: 23px; height: 23px; } /* Type icons in the feed + modal — vivid per-type gradients + soft glow (replaces the flat tint so the colours pop, matching the mockup). */ .db-announce-feed-row .db-announce-tag, .db-modal-ann-top .db-announce-tag { color: #fff !important; box-shadow: 0 5px 12px -5px rgba(0, 0, 0, .30); } .db-announce-feed-row .db-announce-tag.db-tag-blue, .db-modal-ann-top .db-announce-tag.db-tag-blue { background: linear-gradient(135deg, #5a8dff, #2f6fed) !important; } .db-announce-feed-row .db-announce-tag.db-tag-green, .db-modal-ann-top .db-announce-tag.db-tag-green { background: linear-gradient(135deg, #1fc189, #0f9b73) !important; } .db-announce-feed-row .db-announce-tag.db-tag-amber, .db-modal-ann-top .db-announce-tag.db-tag-amber { background: linear-gradient(135deg, #f6b73c, #e8911c) !important; } .db-announce-feed-row .db-announce-tag.db-tag-rose, .db-modal-ann-top .db-announce-tag.db-tag-rose { background: linear-gradient(135deg, #ff6f8a, #e0466b) !important; } .db-announce-feed-row .db-announce-tag.db-tag-violet, .db-modal-ann-top .db-announce-tag.db-tag-violet { background: linear-gradient(135deg, #9a6bff, #7c3aed) !important; } .db-announce-feed-row .db-announce-tag.db-tag-teal, .db-modal-ann-top .db-announce-tag.db-tag-teal { background: linear-gradient(135deg, #1ab3ac, #0f9488) !important; } .db-announce-feed-row .db-announce-tag.db-tag-gray, .db-modal-ann-top .db-announce-tag.db-tag-gray { background: linear-gradient(135deg, #9aa3b5, #6b7488) !important; } .db-announce-banner-main { flex: 1; min-width: 0; } .db-announce-banner-top { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; } .db-announce-banner-top b { font-size: calc(16px * var(--app-font-scale)); font-weight: 800; color: var(--text-primary); letter-spacing: -.01em; } .db-pin-chip { display: inline-flex; align-items: center; gap: 5px; font-size: calc(10.5px * var(--app-font-scale)); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); background: var(--accent-muted); padding: 3px 9px; border-radius: 7px; } .db-pin-chip i { font-size: calc(10px * var(--app-font-scale)); transform: rotate(30deg); } .db-announce-banner-body { margin-top: 9px; font-size: calc(13.5px * var(--app-font-scale)); line-height: 1.6; color: var(--text-secondary); font-weight: 500; white-space: pre-line; } .db-announce-banner-meta { margin-top: 10px; font-size: calc(11.5px * var(--app-font-scale)); font-weight: 600; color: var(--text-muted); } .db-announce-feed { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: var(--card-shadow); padding: 6px 8px 8px; } .db-announce-feed-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px 9px; } .db-announce-feed-head > span { font-size: calc(11px * var(--app-font-scale)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); } .db-announce-viewall { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: calc(12.5px * var(--app-font-scale)); font-weight: 700; color: var(--accent); } .db-announce-viewall:hover { text-decoration: underline; } .db-announce-viewall i { font-size: calc(11px * var(--app-font-scale)); } .db-announce-feed-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; cursor: pointer; transition: background .14s; } .db-announce-feed-row:hover { background: var(--body-bg); } .db-announce-feed-row .db-announce-tag { flex: 0 0 34px; width: 34px; height: 34px; font-size: calc(13px * var(--app-font-scale)); } .db-announce-feed-title { flex: 1; min-width: 0; font-size: calc(13px * var(--app-font-scale)); font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .db-announce-feed-date { flex: none; font-size: calc(11.5px * var(--app-font-scale)); font-weight: 600; color: var(--text-muted); white-space: nowrap; } .db-announce-feed-chev { color: var(--text-muted); font-size: calc(15px * var(--app-font-scale)); } /* modal */ .db-modal-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(15, 18, 35, .5); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 28px; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; } .db-modal-overlay.open { opacity: 1; visibility: visible; } .db-modal { width: 100%; max-width: 600px; max-height: 84vh; display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 18px; box-shadow: 0 36px 80px -28px rgba(0, 0, 0, .55); overflow: hidden; transform: translateY(10px) scale(.98); transition: transform .2s; } .db-modal-overlay.open .db-modal { transform: none; } .db-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--card-border); } .db-modal-head-t { display: flex; align-items: center; gap: 12px; } .db-modal-x { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--card-border); background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .14s; } .db-modal-x:hover { color: var(--text-primary); background: var(--body-bg); } .db-modal-body { padding: 6px 14px 14px; overflow: auto; } .db-modal-ann { padding: 15px 6px; border-bottom: 1px solid var(--card-border); } .db-modal-ann:last-child { border-bottom: none; } .db-modal-ann-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .db-modal-ann-top b { font-size: calc(14px * var(--app-font-scale)); font-weight: 800; color: var(--text-primary); } .db-modal-ann-when { margin-left: auto; font-size: calc(11.5px * var(--app-font-scale)); font-weight: 600; color: var(--text-muted); } .db-modal-ann-body { margin-top: 8px; font-size: calc(13px * var(--app-font-scale)); line-height: 1.6; color: var(--text-secondary); font-weight: 500; white-space: pre-line; } /* ── Extra icon-badge tints (Product Stock KPI row) ── */ .db-ico-blue { background: #e0edff; color: #2563eb; } .db-ico-green { background: #e7f9ee; color: #16a34a; } .db-ico-cyan { background: #e0f7fa; color: #0891b2; } .db-ico-indigo { background: #e8e7fd; color: #4f46e5; } /* ── Quick-access launcher tiles (dashboard shortcut row) ── Distinct from .db-stat-card: no number/sparkline, just an icon, title + subtitle, and an arrow that slides on hover. The whole tile is a link. */ .db-quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; } @media (max-width: 992px) { .db-quick-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .db-quick-grid { grid-template-columns: 1fr; } } .db-quick-card { display: flex; align-items: center; gap: 14px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: var(--card-shadow); padding: 18px 20px; text-decoration: none !important; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .db-quick-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-lg); border-color: var(--accent); } .db-quick-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: calc(20px * var(--app-font-scale)); flex: 0 0 48px; } .db-quick-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .db-quick-title { font-family: var(--app-font-family); font-weight: 700; font-size: calc(15px * var(--app-font-scale)); color: var(--text-primary); line-height: 1.3; } .db-quick-sub { font-size: calc(12px * var(--app-font-scale)); color: var(--text-muted); } .db-quick-arrow { margin-left: auto; color: var(--text-muted); font-size: calc(16px * var(--app-font-scale)); flex: 0 0 auto; transition: transform 0.18s ease, color 0.18s ease; } .db-quick-card:hover .db-quick-arrow { transform: translateX(4px); color: var(--accent); } /* ── Pulse cards (compact live-value widgets — chart sidebar) ── Different language again: a thin tone bar along the top edge, an icon + title header, then a row of value cells split by hairlines. No hover motion — these are "ambient" readouts, not links. */ .db-pulse-card { position: relative; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: var(--card-shadow); padding: 16px 18px 14px; margin-bottom: 16px; overflow: hidden; } .db-pulse-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--pulse-tone, var(--accent)); } .db-pulse-rose { --pulse-tone: #f43f5e; --pulse-tone-bg: #ffe9f0; } .db-pulse-cyan { --pulse-tone: #0891b2; --pulse-tone-bg: #e0f7fa; } .db-pulse-violet { --pulse-tone: #7c3aed; --pulse-tone-bg: #efeaff; } .db-pulse-amber { --pulse-tone: #f5a524; --pulse-tone-bg: #fff3dd; } .db-pulse-green { --pulse-tone: #16a34a; --pulse-tone-bg: #e7f9ee; } .db-pulse-blue { --pulse-tone: #2563eb; --pulse-tone-bg: #e0edff; } .db-pulse-teal { --pulse-tone: #0f9488; --pulse-tone-bg: #e0faf8; } .db-pulse-indigo { --pulse-tone: #4f46e5; --pulse-tone-bg: #e8e7fd; } /* Bordered cell row — for stat rows appended below another section inside the same card (e.g. profile card footer) */ .db-pulse-row.db-pulse-row-bordered { padding: 14px 18px; border-top: 1px solid var(--card-border); } .db-pulse-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .db-pulse-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: calc(14px * var(--app-font-scale)); flex: 0 0 34px; background: var(--pulse-tone-bg, var(--accent-muted)); color: var(--pulse-tone, var(--accent)); } .db-pulse-title { font-family: var(--app-font-family); font-weight: 700; font-size: calc(13px * var(--app-font-scale)); color: var(--text-primary); line-height: 1.3; } .db-pulse-sub { font-size: calc(11px * var(--app-font-scale)); color: var(--text-muted); font-weight: 500; } .db-pulse-row { display: flex; } .db-pulse-cell { flex: 1; text-align: center; padding: 0 6px; min-width: 0; } .db-pulse-cell + .db-pulse-cell { border-left: 1px solid var(--card-border); } .db-pulse-label { font-size: calc(10px * var(--app-font-scale)); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin-bottom: 4px; } .db-pulse-value { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: calc(13px * var(--app-font-scale)); color: var(--text-primary); line-height: 1.2; white-space: nowrap; } .db-pulse-value.is-positive { color: #16a34a; } .db-pulse-value.is-negative { color: #f43f5e; } /* ── List cards (table-in-a-card — followup, recent activity, etc.) ── A slim icon+title header band on top of a plain table body. No AdminLTE box chrome (collapse/remove tools, gradient thead). */ .db-list-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: var(--card-shadow); overflow: hidden; margin-bottom: 20px; } .db-list-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--card-border); } .db-list-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: calc(14px * var(--app-font-scale)); flex: 0 0 32px; } .db-list-title { font-family: var(--app-font-family); font-weight: 700; font-size: calc(14px * var(--app-font-scale)); color: var(--text-primary); } .db-list-card .table-responsive { margin: 0; } .db-list-card .table { margin-bottom: 0; } /* ── List card stat row (Today/Delay/Upcoming etc.) ── */ .db-list-stats { display: flex; padding: 12px 18px; border-bottom: 1px solid var(--card-border); } .db-list-stat { flex: 1; text-align: center; min-width: 0; } .db-list-stat + .db-list-stat { border-left: 1px solid var(--card-border); } .db-list-stat-lbl { font-size: calc(10px * var(--app-font-scale)); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin-bottom: 4px; } .db-list-stat-val { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: calc(13px * var(--app-font-scale)); line-height: 1.2; text-decoration: none; display: inline-block; color: var(--text-primary); white-space: nowrap; } a.db-list-stat-val:hover { text-decoration: underline; } .db-list-stat-val.tone-amber { color: #f5a524; } .db-list-stat-val.tone-rose { color: #f43f5e; } .db-list-stat-val.tone-green { color: #16a34a; } .db-list-stat-val.tone-blue { color: #2563eb; } .db-list-stat-val.tone-gray { color: var(--text-secondary); } /* ── List card sub-header (e.g. "Latest Inquiry") ── */ .db-list-subhead { padding: 12px 18px 2px; font-size: calc(10.5px * var(--app-font-scale)); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); } /* ── List card body ── */ .db-list-body { padding: 4px 9px 8px; } .db-list-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; transition: background .15s; text-decoration: none; color: inherit; } .db-list-row:hover { background: var(--body-bg); text-decoration: none; color: inherit; } .db-list-row-main { flex: 1; min-width: 0; } .db-list-row-title { font-size: calc(13px * var(--app-font-scale)); font-weight: 700; color: var(--text-primary); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .db-list-row-sub { font-size: calc(11px * var(--app-font-scale)); color: var(--text-muted); font-weight: 500; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .db-list-row-right { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: 6px; font-size: calc(11px * var(--app-font-scale)); } /* ── List card footer — "View All" link ── */ .db-list-foot { padding: 10px 18px; border-top: 1px solid var(--card-border); text-align: center; } .db-list-foot a { font-size: calc(11.5px * var(--app-font-scale)); font-weight: 700; color: var(--accent); text-decoration: none; text-transform: uppercase; letter-spacing: .3px; } .db-list-foot a:hover { text-decoration: underline; } /* ── Profile card (salesman/customer overview — marketing dashboard) ── */ .db-profile-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: var(--card-shadow); overflow: hidden; margin-bottom: 16px; } .db-profile-head { display: flex; align-items: center; gap: 14px; padding: 18px; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: var(--accent-text); } .db-profile-avatar img { width: 54px; height: 54px; border-radius: 14px; object-fit: cover; border: 2px solid rgba(255,255,255,.5); display: block; } .db-profile-name { font-family: var(--app-font-family); font-weight: 700; font-size: calc(15px * var(--app-font-scale)); line-height: 1.3; } .db-profile-sub { font-size: calc(11.5px * var(--app-font-scale)); opacity: .85; font-weight: 500; margin-top: 3px; } .db-profile-row { display: flex; padding: 12px 18px; border-bottom: 1px solid var(--card-border); } .db-profile-cell { flex: 1; text-align: center; min-width: 0; } .db-profile-cell + .db-profile-cell { border-left: 1px solid var(--card-border); } .db-profile-num { font-size: calc(15px * var(--app-font-scale)); font-weight: 800; font-family: var(--app-font-family); color: var(--text-primary); } .db-profile-lbl { font-size: calc(10px * var(--app-font-scale)); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: var(--text-muted); margin-top: 2px; } /* ── KPI stat row (8-tile, wraps to 2 rows of 4 for bigger tiles) ── */ .db-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; } @media (max-width: 768px) { .db-stat-grid { grid-template-columns: repeat(2, 1fr); } } /* ── KPI stat row (6-tile variant) ── */ .db-stat-grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 22px; } @media (max-width: 1200px) { .db-stat-grid-6 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .db-stat-grid-6 { grid-template-columns: repeat(2, 1fr); } } .db-stat-card { position: relative; overflow: hidden; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: var(--card-shadow); padding: 14px 16px; display: flex; flex-direction: row; align-items: center; gap: 12px; } a.db-stat-card { text-decoration: none; transition: transform .15s, box-shadow .15s; } a.db-stat-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-lg); text-decoration: none; } .db-stat-num { font-size: calc(24px * var(--app-font-scale)); font-weight: 800; letter-spacing: -.5px; color: var(--text-primary); line-height: 1.15; font-family: var(--app-font-family); } .db-stat-lbl { font-size: calc(11px * var(--app-font-scale)); font-weight: 600; color: var(--text-secondary); line-height: 1.3; } .db-stat-detail { font-size: calc(12px * var(--app-font-scale)); font-weight: 600; line-height: 1.7; color: var(--text-primary); } .db-stat-detail:empty { display: none; } .db-stat-cap { font-size: calc(10px * var(--app-font-scale)); font-weight: 500; color: var(--text-muted); line-height: 1.3; } .db-stat-card.db-stat-highlight .db-stat-cap { color: var(--accent-text); opacity: .75; } .db-stat-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .db-stat-card.db-stat-highlight { background: linear-gradient(135deg, var(--accent), var(--accent-hover)); border-color: transparent; } .db-stat-card.db-stat-highlight .db-stat-num, .db-stat-card.db-stat-highlight .db-stat-lbl { color: var(--accent-text); } .db-stat-card.db-stat-highlight .db-ico { background: rgba(255, 255, 255, 0.2); color: var(--accent-text); } /* Edge accent — colored bar revealed on hover, tone matches the tile's icon */ .db-stat-edge { position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; opacity: 0; transition: opacity .18s; } .db-stat-card:hover .db-stat-edge { opacity: 1; } .db-stat-edge-teal { background: #0f9488; } .db-stat-edge-blue { background: #2563eb; } .db-stat-edge-amber { background: #f5a524; } .db-stat-edge-rose { background: #f43f5e; } .db-stat-edge-cyan { background: #0891b2; } .db-stat-edge-violet { background: #7c3aed; } .db-stat-edge-green { background: #16a34a; } .db-stat-edge-indigo { background: #4f46e5; } /* Number tone — big number color matches the tile's icon/edge, as in pf-stat's ps-num */ .db-stat-num-teal { color: #0f9488; } .db-stat-num-blue { color: #2563eb; } .db-stat-num-amber { color: #f5a524; } .db-stat-num-rose { color: #f43f5e; } .db-stat-num-cyan { color: #0891b2; } .db-stat-num-violet { color: #7c3aed; } .db-stat-num-green { color: #16a34a; } .db-stat-num-indigo { color: #4f46e5; } /* Zero state — grey out tiles with no quantity, matching pf-stat's ps-zero */ .db-stat-card.db-stat-zero .db-stat-num { color: var(--text-muted); } .db-stat-card.db-stat-zero .db-ico { filter: saturate(.5); opacity: .8; } /* Bigger, rounder icon badge inside stat cards */ .db-stat-card .db-ico { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 40px; font-size: calc(16px * var(--app-font-scale)); } /* Ghost icon — large, faint duplicate icon in the corner for depth */ .db-stat-ghost { position: absolute; right: -10px; bottom: -14px; font-size: calc(64px * var(--app-font-scale)); line-height: 1; opacity: .07; pointer-events: none; } .db-stat-ghost-teal { color: #0f9488; } .db-stat-ghost-blue { color: #2563eb; } .db-stat-ghost-amber { color: #f5a524; } .db-stat-ghost-rose { color: #f43f5e; } .db-stat-ghost-cyan { color: #0891b2; } .db-stat-ghost-violet { color: #7c3aed; } .db-stat-ghost-green { color: #16a34a; } .db-stat-ghost-indigo { color: #4f46e5; } .db-stat-card.db-stat-highlight .db-stat-ghost { color: var(--accent-text); opacity: .15; } /* Mini bar-chart graphic — decorative, tone-matched, sits at the right edge of the card */ .db-stat-bars { display: flex; align-items: flex-end; gap: 3px; height: 32px; flex: 0 0 auto; } .db-stat-bars span { display: block; width: 4px; border-radius: 2px; background: currentColor; } .db-stat-bars span:nth-child(1) { height: 35%; opacity: .35; } .db-stat-bars span:nth-child(2) { height: 55%; opacity: .45; } .db-stat-bars span:nth-child(3) { height: 45%; opacity: .55; } .db-stat-bars span:nth-child(4) { height: 75%; opacity: .65; } .db-stat-bars span:nth-child(5) { height: 60%; opacity: .8; } .db-stat-bars span:nth-child(6) { height: 100%; opacity: 1; } .db-stat-bars-teal { color: #0f9488; } .db-stat-bars-blue { color: #2563eb; } .db-stat-bars-amber { color: #f5a524; } .db-stat-bars-rose { color: #f43f5e; } .db-stat-bars-cyan { color: #0891b2; } .db-stat-bars-violet { color: #7c3aed; } .db-stat-bars-green { color: #16a34a; } .db-stat-bars-indigo { color: #4f46e5; } .db-stat-card.db-stat-highlight .db-stat-bars { color: var(--accent-text); } .db-stat-card.db-stat-zero .db-stat-bars { opacity: .35; } /* ── Sparkline accent (line + gradient area) — used on the wider product-stock tiles ── */ .db-stat-spark { flex: 0 0 auto; width: 90px; height: 36px; display: block; } .db-stat-spark .db-stat-spark-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .db-stat-spark-teal { color: #0f9488; } .db-stat-spark-blue { color: #2563eb; } .db-stat-spark-amber { color: #f5a524; } .db-stat-spark-rose { color: #f43f5e; } .db-stat-spark-cyan { color: #0891b2; } .db-stat-spark-violet { color: #7c3aed; } .db-stat-spark-green { color: #16a34a; } .db-stat-spark-indigo { color: #4f46e5; } .db-stat-card.db-stat-zero .db-stat-spark { opacity: .35; } /* ── Age-group strip (HR dashboard) — small horizontal pills, distinct from the KPI tiles above: no edge accent or sparkline, just an icon chip + number + label, sized to wrap into a flexible row. ── */ .db-age-strip { display: flex; flex-wrap: wrap; gap: 14px; } .db-age-pill { flex: 1 1 180px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: var(--card-shadow); padding: 13px 15px; display: flex; align-items: center; gap: 12px; } .db-age-num { font-size: calc(19px * var(--app-font-scale)); font-weight: 800; color: var(--text-primary); line-height: 1.2; font-family: var(--app-font-family); } .db-age-lbl { font-size: calc(12px * var(--app-font-scale)); font-weight: 700; color: var(--text-secondary); margin-top: 1px; } .db-age-cap { font-size: calc(10.5px * var(--app-font-scale)); color: var(--text-muted); font-weight: 500; margin-top: 2px; } /* ── Freezed Quantity grid ── */ .db-freeze-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; padding: 16px; } @media (max-width: 1400px) { .db-freeze-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 768px) { .db-freeze-grid { grid-template-columns: repeat(2, 1fr); } } .db-freeze-tile { background: var(--body-bg); border: 1px solid var(--card-border); border-radius: 10px; padding: 12px 14px; } .db-freeze-name { font-size: calc(11.5px * var(--app-font-scale)); font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; line-height: 1.3; } .db-freeze-num { font-size: calc(22px * var(--app-font-scale)); font-weight: 800; font-family: var(--app-font-family); line-height: 1.1; } .db-freeze-num-teal { color: #0f9488; } .db-freeze-num-amber { color: #f5a524; } .db-freeze-num-violet { color: #7c3aed; } .db-freeze-num-rose { color: #f43f5e; } .db-freeze-num-blue { color: #2563eb; } .db-freeze-num-green { color: #16a34a; } .db-freeze-num-cyan { color: #0891b2; } .db-freeze-num-indigo { color: #4f46e5; } /* ── Progress rings (percentage breakdown — Marketing Inquiry Status) ── */ .db-ring-grid { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 18px 10px; padding: 22px 16px; } .db-ring-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 90px; min-width: 84px; } .db-ring { --ring-tone: var(--accent); --pct: 0; width: 76px; height: 76px; border-radius: 50%; background: conic-gradient(var(--ring-tone) calc(var(--pct) * 1%), var(--body-bg) 0); display: flex; align-items: center; justify-content: center; position: relative; } .db-ring::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--card-bg); } .db-ring-pct { position: relative; font-family: var(--app-font-family); font-weight: 800; font-size: calc(14px * var(--app-font-scale)); color: var(--ring-tone); } .db-ring-lbl { font-size: calc(10.5px * var(--app-font-scale)); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-secondary); text-align: center; } .db-ring-count { font-size: calc(10px * var(--app-font-scale)); color: var(--text-muted); font-weight: 600; font-family: 'JetBrains Mono', monospace; } .db-ring-rose { --ring-tone: #f43f5e; } .db-ring-amber { --ring-tone: #f5a524; } .db-ring-violet { --ring-tone: #7c3aed; } .db-ring-teal { --ring-tone: #0f9488; } .db-ring-green { --ring-tone: #16a34a; } .db-ring-blue { --ring-tone: #2563eb; } .db-ring-cyan { --ring-tone: #0891b2; } .db-ring-indigo { --ring-tone: #4f46e5; } /* ── Progress list rows (salesman follow-up completion %) — 2-col on wide screens ── */ .db-progress-list { padding: 6px 18px 16px; column-gap: 24px; } @media (min-width: 900px) { .db-progress-list { column-count: 2; } } .db-progress-row { padding: 10px 0; break-inside: avoid; } .db-progress-row + .db-progress-row { border-top: 1px solid var(--card-border); } .db-progress-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .db-progress-name { font-size: calc(12.5px * var(--app-font-scale)); font-weight: 700; color: var(--text-primary); } .db-progress-zone { font-size: calc(10.5px * var(--app-font-scale)); font-weight: 600; color: var(--text-muted); margin-left: 4px; } .db-progress-pct { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: calc(12px * var(--app-font-scale)); flex-shrink: 0; white-space: nowrap; } .db-progress-track { height: 6px; border-radius: 4px; background: var(--body-bg); overflow: hidden; } .db-progress-fill { height: 100%; border-radius: 4px; } .db-progress-fill.tone-green { background: #16a34a; } .db-progress-fill.tone-amber { background: #f5a524; } .db-progress-fill.tone-rose { background: #f43f5e; } .db-progress-pct.tone-green { color: #16a34a; } .db-progress-pct.tone-amber { color: #f5a524; } .db-progress-pct.tone-rose { color: #f43f5e; } /* ── Generic card body / footer (chart embeds, tables inside .db-card) ── */ .db-card-body { padding: 16px 18px; } .db-card-body.no-pad { padding: 0; } .db-card .table-responsive { margin: 0; } .db-card .table { margin-bottom: 0; } /* DataTables length/search and info/pagination controls sit flush against the card edges in .no-pad cards — give them the body padding back, but leave the table itself untouched (this build has no .row wrapper, the controls are floated .dataTables_length/_filter/_info/_paginate siblings of the table). */ .db-card-body.no-pad .dataTables_wrapper { padding-top: 14px; } .db-card-body.no-pad .dataTables_wrapper > .dataTables_length, .db-card-body.no-pad .dataTables_wrapper > .dataTables_filter { padding: 0 18px; margin-bottom: 12px; } .db-card-body.no-pad .dataTables_wrapper > .dataTables_info, .db-card-body.no-pad .dataTables_wrapper > .dataTables_paginate { padding: 12px 18px; } /* ── Grade / rating chip (e.g. supplier rating A/B/C) ── */ .db-grade { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; padding: 0 8px; border-radius: 8px; font-weight: 800; font-size: calc(12px * var(--app-font-scale)); font-family: var(--app-font-family); } /* ================================================================ PRINT STYLES ================================================================ */ @media print { .main-sidebar, .main-header, .content-header, .theme-picker-nav, .navbar-custom-menu { display: none !important; } .content-wrapper { margin-left: 0 !important; background: #ffffff !important; min-height: auto !important; } body { font-size: calc(11px * var(--app-font-scale)) !important; color: #000 !important; } .box { border: 1px solid #e2e8f0 !important; box-shadow: none !important; page-break-inside: avoid !important; border-radius: 0 !important; } .table > thead > tr > th { background-color: #f1f5f9 !important; color: #1e293b !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .table > tbody > tr > td { box-shadow: none !important; } } /* ================================================================ INVOICE / CHALLAN / PO VIEW PAGES — ALL THEMES ================================================================ */ /* Replace hardcoded cyan (#00b9e6) with the active theme accent across all themes */ .info_header { background: var(--accent) !important; } .info_header h4 { color: #ffffff !important; } /* ================================================================ MIDNIGHT — INVOICE / CHALLAN / PO VIEW PAGES ================================================================ */ html[data-theme="midnight"] .invoice { background: var(--card-bg) !important; border-color: rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.87) !important; } /* Invoice detail text */ html[data-theme="midnight"] .info_detail, html[data-theme="midnight"] .info_detail p, html[data-theme="midnight"] .invoice p, html[data-theme="midnight"] .invoice b, html[data-theme="midnight"] .invoice small, html[data-theme="midnight"] .invoice span:not(.label):not(.badge):not([class*="btn"]) { color: rgba(255, 255, 255, 0.82) !important; } /* Page title (currently cyan #00AAD5 — keep similar but ensure visible on dark) */ html[data-theme="midnight"] .largefontshadow, html[data-theme="midnight"] .largefontshadow1 { color: #67e8f9 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important; } /* Reason/note boxes with light-gray background */ html[data-theme="midnight"] .reason { background-color: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: rgba(255, 255, 255, 0.82) !important; } /* Signature area */ html[data-theme="midnight"] .signature_text { color: rgba(255, 255, 255, 0.82) !important; } /* Bootstrap nested-table rule (.table .table { background: #ebf7ff }) → dark override */ html[data-theme="midnight"] .table .table, html[data-theme="midnight"] .invoice .table .table { background-color: var(--card-bg) !important; color: rgba(255, 255, 255, 0.87) !important; } /* Invoice table header row (dark thead already set) */ html[data-theme="midnight"] .invoice .table > thead > tr > th { background-color: #1a1d25 !important; color: rgba(255, 255, 255, 0.65) !important; border-color: rgba(255, 255, 255, 0.10) !important; } html[data-theme="midnight"] .invoice .table > tbody > tr > td { border-color: rgba(255, 255, 255, 0.06) !important; } /* ================================================================ MIDNIGHT — PROFORMA LIST MODERN CARDS (pf-*) ================================================================ */ /* Stat cards */ html[data-theme="midnight"] .pf-stat { background: var(--card-bg); border-color: var(--card-border); box-shadow: var(--card-shadow); } html[data-theme="midnight"] .pf-stat .ps-lab { color: rgba(255, 255, 255, 0.50); } html[data-theme="midnight"] .pf-stat.ps-zero .ps-num { color: rgba(255, 255, 255, 0.22); } html[data-theme="midnight"] .pf-stat.ps-zero .ps-chip { opacity: .5; } html[data-theme="midnight"] .ps-teal .ps-chip { background: rgba( 13, 148, 136, 0.18); } html[data-theme="midnight"] .ps-blue .ps-chip { background: rgba( 47, 111, 237, 0.18); } html[data-theme="midnight"] .ps-sky .ps-chip { background: rgba( 14, 165, 233, 0.18); } html[data-theme="midnight"] .ps-green .ps-chip { background: rgba( 16, 163, 113, 0.18); } html[data-theme="midnight"] .ps-indigo .ps-chip { background: rgba( 91, 91, 214, 0.18); } html[data-theme="midnight"] .ps-purple .ps-chip { background: rgba(123, 47, 247, 0.18); } /* Flag / attention cards */ html[data-theme="midnight"] .pf-flag { background: var(--card-bg); border-color: var(--card-border); box-shadow: var(--card-shadow); } html[data-theme="midnight"] .pf-flag .pf-lab { color: rgba(255, 255, 255, 0.50); } html[data-theme="midnight"] .pf-flag .pf-go { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.40); } html[data-theme="midnight"] .pf-flag.pf-rose .pf-ic { background: rgba(226, 59, 90, 0.18); } html[data-theme="midnight"] .pf-flag.pf-aqua .pf-ic { background: rgba( 13, 148, 136, 0.18); } html[data-theme="midnight"] .pf-flag.pf-amber .pf-ic { background: rgba(232, 145, 28, 0.18); } html[data-theme="midnight"] .pf-flag.pf-ornge .pf-ic { background: rgba(238, 108, 31, 0.18); } /* Day / schedule cards */ html[data-theme="midnight"] .pf-day { background: var(--card-bg); border-color: var(--card-border); box-shadow: var(--card-shadow); } html[data-theme="midnight"] .pf-day .pd-label { color: rgba(255, 255, 255, 0.87); } html[data-theme="midnight"] .pd-0 .pd-label { color: #f87171; } /* Table card */ html[data-theme="midnight"] .box.box-primary { background: var(--card-bg) !important; border-color: var(--card-border) !important; } html[data-theme="midnight"] .pf-tc-head { background: var(--card-bg); border-color: var(--card-border); } html[data-theme="midnight"] .pf-tc-title { color: rgba(255, 255, 255, 0.87); } html[data-theme="midnight"] .pf-tc-total { color: rgba(255, 255, 255, 0.42); } html[data-theme="midnight"] .pf-tc-sub { color: #93c5fd; } html[data-theme="midnight"] .pf-pager .pagination > li > a, html[data-theme="midnight"] .pf-pager .pagination > li > span { background: var(--card-bg); border-color: var(--card-border); color: rgba(255, 255, 255, 0.70); } html[data-theme="midnight"] .pf-pager .pagination > .active > a, html[data-theme="midnight"] .pf-pager .pagination > .active > span { background: #6366f1; border-color: #6366f1; color: #fff; } /* Category tabs */ html[data-theme="midnight"] .pf-cats { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08); } html[data-theme="midnight"] .pf-cat { opacity: 0.90; } html[data-theme="midnight"] .pf-cat:hover { opacity: 1; } /* Submenu pill strip */ html[data-theme="midnight"] .pf-submenu-wrap .pull-right .btn-primary { background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: rgba(255, 255, 255, 0.72) !important; box-shadow: none !important; } html[data-theme="midnight"] .pf-submenu-wrap .pull-right .btn-primary:hover { background: rgba(255, 255, 255, 0.13) !important; color: #fff !important; } html[data-theme="midnight"] .pf-submenu-wrap .pull-right .btn-warning { background: var(--accent, #6366f1) !important; border-color: var(--accent, #6366f1) !important; color: #fff !important; box-shadow: 0 4px 12px var(--accent-muted, rgba(99, 102, 241, 0.35)) !important; } html[data-theme="midnight"] .pf-submenu-wrap .pull-right .bg-maroon { background: rgba(226, 59, 90, 0.80) !important; border-color: rgba(226, 59, 90, 0.80) !important; } /* ── Midnight: Bootstrap 3 tooltip ─────────────────────────────────────── */ html[data-theme="midnight"] .tooltip .tooltip-inner { background-color: #1e293b !important; color: rgba(255, 255, 255, 0.87) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; } html[data-theme="midnight"] .tooltip.top .tooltip-arrow { border-top-color: #1e293b !important; } html[data-theme="midnight"] .tooltip.bottom .tooltip-arrow { border-bottom-color: #1e293b !important; } html[data-theme="midnight"] .tooltip.left .tooltip-arrow { border-left-color: #1e293b !important; } html[data-theme="midnight"] .tooltip.right .tooltip-arrow { border-right-color: #1e293b !important; } /* ── Midnight: Bootstrap 3 popover ─────────────────────────────────────── */ html[data-theme="midnight"] .popover { background-color: #1e2d45 !important; border-color: rgba(255, 255, 255, 0.13) !important; box-shadow: 0 6px 24px rgba(0, 0, 0, .50) !important; color: rgba(255, 255, 255, 0.87) !important; } html[data-theme="midnight"] .popover-title { background-color: rgba(255, 255, 255, 0.06) !important; border-bottom-color: rgba(255, 255, 255, 0.10) !important; color: #fff !important; } html[data-theme="midnight"] .popover-content { color: rgba(255, 255, 255, 0.82) !important; } /* popover arrow border (outer) + fill (inner ::after) for each direction */ html[data-theme="midnight"] .popover.top > .arrow { border-top-color: rgba(255,255,255,0.15) !important; } html[data-theme="midnight"] .popover.top > .arrow::after { border-top-color: #1e2d45 !important; } html[data-theme="midnight"] .popover.bottom > .arrow { border-bottom-color: rgba(255,255,255,0.15) !important; } html[data-theme="midnight"] .popover.bottom > .arrow::after { border-bottom-color: #1e2d45 !important; } html[data-theme="midnight"] .popover.left > .arrow { border-left-color: rgba(255,255,255,0.15) !important; } html[data-theme="midnight"] .popover.left > .arrow::after { border-left-color: #1e2d45 !important; } html[data-theme="midnight"] .popover.right > .arrow { border-right-color: rgba(255,255,255,0.15) !important; } html[data-theme="midnight"] .popover.right > .arrow::after { border-right-color: #1e2d45 !important; } /* ================================================================ APPEARANCE — user preference override blocks Driven by appearance.js (data-* attributes on ). Each block is opt-in: the default (absent attribute or "off"/"normal") changes nothing. ================================================================ */ /* ── UI density ────────────────────────────────────────────────── Compact = tighter rows/forms for data-heavy screens; Comfortable = roomier. */ html[data-density="compact"] .table > tbody > tr > td, html[data-density="compact"] .table > tbody > tr > th, html[data-density="compact"] .table > thead > tr > td, html[data-density="compact"] .table > thead > tr > th { padding-top: 4px !important; padding-bottom: 4px !important; } html[data-density="compact"] .form-group { margin-bottom: 8px !important; } html[data-density="compact"] .form-control { height: 30px; padding-top: 4px; padding-bottom: 4px; } html[data-density="compact"] .box-body { padding: 8px !important; } html[data-density="comfortable"] .table > tbody > tr > td, html[data-density="comfortable"] .table > tbody > tr > th, html[data-density="comfortable"] .table > thead > tr > td, html[data-density="comfortable"] .table > thead > tr > th { padding-top: 12px !important; padding-bottom: 12px !important; } html[data-density="comfortable"] .form-group { margin-bottom: 20px !important; } html[data-density="comfortable"] .box-body { padding: 20px !important; } /* ── Reduce motion ─────────────────────────────────────────────── Kills transitions/animations app-wide for snappier feel + accessibility. */ html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } /* ── Corner style ──────────────────────────────────────────────── Sharp = square corners (0). Rounded uses --app-radius (default 6px). */ html[data-radius="sharp"] .box, html[data-radius="sharp"] .btn, html[data-radius="sharp"] .form-control, html[data-radius="sharp"] .modal-content, html[data-radius="sharp"] .panel, html[data-radius="sharp"] .alert, html[data-radius="sharp"] .label, html[data-radius="sharp"] .badge, html[data-radius="sharp"] .nav-tabs > li > a { border-radius: 0 !important; } /* ── Flat mode ─────────────────────────────────────────────────── Removes shadows + gradients for a flat look. */ html[data-flat="on"] .box, html[data-flat="on"] .btn, html[data-flat="on"] .modal-content, html[data-flat="on"] .panel, html[data-flat="on"] .dropdown-menu, html[data-flat="on"] .main-header .navbar, html[data-flat="on"] .main-header .logo { box-shadow: none !important; text-shadow: none !important; } /* ── High contrast ─────────────────────────────────────────────── Stronger text + borders for readability. */ html[data-contrast="high"] body { color: #000 !important; } html[data-contrast="high"] .table > tbody > tr > td, html[data-contrast="high"] .table > thead > tr > th, html[data-contrast="high"] .form-control, html[data-contrast="high"] .box { border-color: #555 !important; } html[data-contrast="high"][data-theme="midnight"] body { color: #fff !important; } /* ── Underline links ───────────────────────────────────────────── Always-underline content links (accessibility aid). */ html[data-links="underline"] .content-wrapper a:not(.btn):not(.theme-dot):not(.label):not(.badge) { text-decoration: underline !important; } /* ── Sticky table headers ──────────────────────────────────────── Keeps the header row visible while scrolling long tables. AdminLTE wraps most list tables in `.table-responsive` (overflow-x:auto), which makes that element the scroll container — so a th stuck to the page top never fires. We turn that wrapper into a vertical scroll viewport so the header sticks to the top of the table area while rows scroll under it. */ html[data-sticky="on"] .table-responsive { max-height: calc(100vh - 190px); overflow: auto; } /* The base stylesheet sets `table { border-collapse: collapse }`. With collapsed borders the cell borders/backgrounds belong to the table's own paint layer, so a sticky sticks but scrolled rows bleed OVER it (raising z-index alone doesn't help). Switching to separate borders (spacing 0 keeps the same look) makes each sticky header cell carry its own opaque background + border and stay above the body. Only applied when sticky headers are enabled. */ html[data-sticky="on"] .table { border-collapse: separate !important; border-spacing: 0 !important; } /* position:sticky must beat `.table > thead > tr > th { position: relative !important }` (line ~2547). This selector is more specific AND uses !important, so it wins among the important declarations. */ html[data-sticky="on"] .table > thead > tr > th { position: -webkit-sticky !important; position: sticky !important; top: 0 !important; z-index: 12 !important; background-color: var(--card-bg, #fff) !important; } /* ================================================================ REUSABLE ACTION ICON BUTTONS + STATUS PILLS + GRADIENT CARDS Used across list pages (invoice, payment, planning, …). ================================================================ */ .act-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid transparent; font-size: 14px; cursor: pointer; padding: 0 !important; line-height: 1; transition: filter .15s ease, background .15s ease; } .act-btn-violet { background: var(--accent-light, #f1eafe) !important; color: var(--accent, #7c3aed) !important; border-color: var(--accent-light2, #e9defb) !important; } .act-btn-violet:hover { background: var(--accent-light2, #e9defb) !important; color: var(--accent, #7c3aed) !important; } .act-btn-amber { background: #fdf6e6 !important; color: #d99311 !important; border-color: #f3e7c8 !important; } .act-btn-amber:hover { background: #fbeecb !important; color: #d99311 !important; } .act-btn-green { background: #e6f7ed !important; color: #16a34a !important; border-color: #c5ead4 !important; } .act-btn-green:hover { background: #d7f0e0 !important; color: #16a34a !important; } .act-btn-red { background: #fdecec !important; color: #dc2626 !important; border-color: #f6cccc !important; } .act-btn-red:hover { background: #fbdada !important; color: #dc2626 !important; } .act-btn-solid { background: linear-gradient(135deg, var(--accent, #7c3aed), var(--accent-hover, #6d28d9)) !important; color: #fff !important; box-shadow: 0 4px 10px -3px rgba(124, 58, 237, .5); } .act-btn-solid:hover { filter: brightness(1.06); color: #fff !important; } .act-btn .fa { color: inherit !important; } .st-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.4; white-space: nowrap; } .st-pill-green { background: #e6f7ed; color: #16a34a; } .st-pill-amber { background: #fff2dd; color: #d9870b; } .st-pill-red { background: #fdecec; color: #dc2626; } .st-pill-blue { background: #eaecfd; color: #4f46e5; } .st-pill-grey { background: #eef0f4; color: #7a8190; } /* Gradient stat cards (Total Due / Upcoming) on any .info-box */ .info-box.grad-card { color: #fff !important; border: none !important; border-radius: 14px !important; } .info-box.grad-card .info-box-icon { background: rgba(255, 255, 255, .16) !important; color: #fff !important; } .info-box.grad-card .info-box-text { color: rgba(255, 255, 255, .9) !important; } .info-box.grad-card .info-box-number { color: #fff !important; } .info-box.grad-card-red { background: linear-gradient(180deg, #ef4444, #dc2626) !important; box-shadow: 0 8px 22px -10px rgba(220, 38, 38, .5) !important; } .info-box.grad-card-amber { background: linear-gradient(180deg, #fbbf24, #f59e0b) !important; box-shadow: 0 8px 22px -10px rgba(245, 158, 11, .5) !important; } .info-box.grad-card-green { background: linear-gradient(180deg, #34d399, #16a34a) !important; box-shadow: 0 8px 22px -10px rgba(22, 163, 74, .5) !important; } /* ================================================================ PRODUCT SERIES SELECTOR CARDS (product search / product / design) Soft violet active state + clean NO-IMAGE placeholder. ================================================================ */ .radio-with-Icon { display: flex; flex-wrap: wrap; margin: 0 -7px; } .radio-with-Icon > .col-md-3 { display: flex; padding: 0 7px; } .radio-with-Icon > .col-md-12 { padding: 0 7px; } .ps-series-title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--text-primary, #1f1b30); margin: 0 0 14px; } .radioOption-Item { width: 100%; margin: 0 0 14px; } .radioOption-Item label { width: 100%; margin: 0; display: flex; flex-direction: column; align-items: stretch; padding: 10px; border-radius: 14px; border: 1.5px solid var(--card-border, #ecebf3); background: var(--card-bg, #fff); color: var(--text-secondary, #6b6880); cursor: pointer; font-size: 12.5px; font-weight: 700; text-align: center; box-sizing: border-box; transition: all .2s ease; } .radioOption-Item .ps-img { height: 96px; border-radius: 10px; background: #f3f1f8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #b7b2c8; font-size: 10px; font-weight: 700; letter-spacing: .04em; margin-bottom: 10px; overflow: hidden; } .radioOption-Item .ps-img img { max-width: 100%; max-height: 96px; object-fit: contain; } .radioOption-Item .ps-img .fa { font-size: 22px; } .radioOption-Item .ps-title { padding: 2px 4px 6px; line-height: 1.35; } .radioOption-Item label:hover { border-color: var(--accent-light2, #ddd0f5); } .radioOption-Item input[type="radio"] { display: none; } .radioOption-Item input[type="radio"]:checked ~ label { background: var(--accent-light, #f6f1fe); border-color: var(--accent, #7c3aed); color: var(--accent, #7c3aed); } .radioOption-Item input[type="radio"]:checked ~ label .ps-img { background: #ffffff; } @media (min-width: 992px) { .radio-with-Icon > .col-md-3 { flex: 0 0 25%; max-width: 25%; } } @media (min-width: 576px) and (max-width: 991px) { .radio-with-Icon > .col-md-3 { flex: 0 0 50%; max-width: 50%; } } @media (max-width: 575px) { .radio-with-Icon > .col-md-3 { flex: 0 0 100%; max-width: 100%; } } /* Coil card (product search) — red product code + hide-when-empty */ .coil-card .generated_code { color: var(--accent, #7c3aed); font-weight: 800; font-size: 22px; margin: 0 0 2px; letter-spacing: -.01em; } .coil-card .generated_name { color: var(--text-primary, #1f1b30); font-weight: 700; font-size: 14px; margin: 0 0 6px; line-height: 1.4; } .coil-card .coil-head:not(:empty) { border-bottom: 1px solid var(--card-border, #ecebf3); padding-bottom: 14px; margin-bottom: 16px; } .coil-card { display: none; } .coil-card:has(.generated_code:not(:empty)), .coil-card:has(#product_type > *), .coil-card:has(#product_series_type > *), .coil-card:has(#product_sub_type > *) { display: block; } /* Hide the left (Series/form) card too until a category is selected */ .valve-card { display: none; } .valve-card:has(#product_series_type > *), .valve-card:has(#product_sub_type > *) { display: block; }