/* * The single shared dark "charcoal + warm orange" theme for * bilzeeapp.closebee.com admin pages. * * Ported from fusionapp.closebee.com's own theme.css (emerald-green family) * when this product was split off -- see that file's own header comment * for the original consolidation history. Every variable NAME below is * kept identical to the Fusion original on purpose: every copied page's * markup references these names directly (e.g. class="btn-emerald", * var(--emerald-accent)), and renaming them would mean touching all ~69 * copied HTML files for a purely cosmetic reason. Only the VALUES change * here -- one recolor, zero markup risk. */ :root { --bg-base: #171310; --bg-card: #221c17; --bg-card-header: #2b2420; --bg-input: #2b2420; --border-color: #3d332b; --border-color-focus: #ea580c; --primary: #ea580c; --primary-hover: #c2410c; --primary-glow: rgba(234, 88, 12, 0.25); --text-main: #fdf1e7; --text-muted: #b89a86; --text-placeholder: #6b5a4d; --danger: #ef4444; /* ---- Aliases: other files' variable names -> the tokens above ---- */ --emerald-main: var(--primary); --emerald-primary: var(--primary); --emerald-accent: var(--primary); --emerald-hover: var(--primary-hover); --emerald-light: var(--primary-hover); --accent-green: var(--primary); --accent-green-hover: var(--primary-hover); --steel-green: var(--primary); --steel-green-light: var(--primary-hover); --steel-green-hover: var(--primary-hover); --bg-main: var(--bg-base); --bg-dark: var(--bg-base); --bg-hover: var(--bg-card-header); --toolbar-bg: var(--bg-card-header); --input-bg: var(--bg-input); --card-bg: var(--bg-card); --text-light: var(--text-main); --text-bright: var(--text-main); } /* * "Order/Invoice create" family (sales/order/create.css, sales/invoice/create.css) * genuinely uses a different palette under the SAME variable names this * file's own :root already defines -- scoped under a body class so only * these pages opt into their own real values via . */ body.theme-order-create { --bg-dark: #201a15; --bg-card: #27201a; --bg-input: #322921; --border-color: #47392e; --text-main: #fbe9da; --text-muted: #c2a186; --accent-green: #ea580c; --accent-green-hover: #c2410c; --accent-gold: #f2a33d; --danger-red: #e63946; } /* * "Warehouse/Manufacturing" family -- not used by any page in this * product's scope, kept defined anyway so theme.css stays a complete, * valid drop-in copy of the Fusion original. */ body.theme-warehouse { --bg-main: #171310; --bg-card: #221c17; --bg-card-hover: #2b241d; --bg-header: #271f1a; --emerald-bright: #ea580c; --emerald-accent: #c2410c; --emerald-border: #7c3d0f; --text-light: #fdf1e7; --text-muted: #d8b79a; } /* * "Inventory group/category/menu" family (inventory/group/items.html, * inventory/category/items.html, inventory/menu/display.html, * inventory/menu/display_retail.html, inventory/menu/linked_party.html). */ body.theme-inventory-emerald { --emerald-bg: #171310; --emerald-card: #221c17; --emerald-card-hover: #2b241d; --emerald-accent: #ea580c; --emerald-light: #f2864a; --emerald-border: #5a3011; --text-main: #fdf1e7; --text-muted: #d8b79a; } /* * "Inventory group/category/menu listing" family (inventory/group/listing.html, * inventory/category/listing.html, inventory/menu/listing.html). */ body.theme-inventory-listing { --bg-dark: #171310; --bg-card: #241d18; --emerald-accent: #ea580c; --emerald-hover: #c2410c; --emerald-soft: rgba(234, 88, 12, 0.15); --border-color: #3d332b; --text-light: #fdf1e7; --text-muted: #b8a89c; } /* * "Inventory group/menu create form" family (inventory/group/create.html, * inventory/menu/create.html). */ body.theme-inventory-create { --bg-main: #171310; --surface-card: #221c17; --surface-input: #2b241d; --border-color: #3a3128; --primary-emerald: #ea580c; --primary-hover: #c2410c; --emerald-glow: rgba(234, 88, 12, 0.25); --text-main: #fdf1e7; --text-muted: #a89484; } /* * "Config/user/profile" family (profile/media.css, config/upi.html, * config/bank.html) -- kept as a genuinely different accent shade from * the rest of the app's canonical orange, same as the Fusion original's * own reasoning for keeping this family distinct. */ body.theme-config-user { --bg-dark: #191411; --card-bg: #241d18; --card-header-bg: #2c2420; --input-bg: #2b2420; --border-color: #3d332b; --accent-green: #f2600c; --accent-hover: #c2410c; --text-main: #f3e4d8; --text-muted: #ab9284; } /* * "Transaction/payment/expense/receipt" family (payment/listing.html, * expense/listing.html, receipt/listing.html, profile/details.html, and * the whole ledger-create chain). */ body.theme-transaction { --bg-dark: #171310; --bg-card: #221c17; --bg-surface: #2b2420; --border-color: #4a3d33; --text-light: #fdf1e7; --text-muted: #d8b79a; --accent-emerald: #ea580c; --accent-hover: #c2410c; } /* * "Steel Green" family (accounting/ledger/index.html via ledger.css, * accounting/data/index.html) -- recolored to a burnt-rust accent, a * genuinely different hue from the canonical orange, same distinct-family * reasoning as the Fusion original (that one used teal against emerald; * this one uses rust against orange). */ body.theme-steel-green { --steel-green: #b3450c; --steel-green-light: #d9691f; --steel-green-hover: #8f3709; --bg-dark: #201a15; --card-bg: #271f1a; --toolbar-bg: #241d18; --input-bg: #191411; --border-color: #3d332b; } body { background-color: var(--bg-base) !important; color: var(--text-main) !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; overflow-x: hidden; padding-bottom: 20px; } .daterangepicker[style*="display: none"], .daterangepicker[style*="display:none"], .datepicker-container[style*="display: none"], .datepicker-container[style*="display:none"], .datepicker-hide, .daterangepicker-hide { display: none !important; } .daterangepicker { background-color: #221c17 !important; border: 1px solid #ea580c !important; border-radius: 8px !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important; color: #fdf1e7 !important; z-index: 9999 !important; width: 560px !important; /* Forces enough width for both calendars side-by-side */ max-width: none !important; padding: 10px !important; box-sizing: border-box !important; } .daterangepicker .drp-calendars { display: flex !important; flex-direction: row !important; justify-content: space-between !important; width: 100% !important; } .daterangepicker .drp-calendar { width: 260px !important; max-width: 260px !important; padding: 0 !important; float: left !important; } .daterangepicker .calendar-table, .daterangepicker .calendar-table table { background-color: #221c17 !important; border: none !important; width: 100% !important; } .daterangepicker th.prev, .daterangepicker th.next { background-color: #2b241d !important; border-radius: 4px !important; cursor: pointer !important; } .daterangepicker th.prev span, .daterangepicker th.next span { border-color: #ea580c !important; } .daterangepicker th.month, .daterangepicker th.dow { color: #ea580c !important; background-color: #221c17 !important; } .daterangepicker td.available { color: #fdf1e7 !important; background-color: #221c17 !important; } .daterangepicker td.available:hover { background-color: #2b241d !important; color: #ea580c !important; } .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date { color: #5a4f45 !important; background-color: #221c17 !important; opacity: 0.4 !important; } .daterangepicker td.active, .daterangepicker td.active:hover, .daterangepicker td.start-date, .daterangepicker td.end-date { background-color: #ea580c !important; color: #ffffff !important; } .daterangepicker td.in-range { background-color: rgba(234, 88, 12, 0.25) !important; color: #fdf1e7 !important; } .daterangepicker .drp-buttons { clear: both !important; text-align: right !important; background-color: #221c17 !important; border-top: 1px solid rgba(234, 88, 12, 0.25) !important; padding: 8px 0 0 0 !important; margin-top: 8px !important; } .daterangepicker .drp-selected { color: #a8917f !important; float: left !important; line-height: 30px !important; font-size: 12px !important; } .daterangepicker .applyBtn { background-color: #ea580c !important; border: 1px solid #ea580c !important; color: #ffffff !important; padding: 4px 12px !important; border-radius: 4px !important; } .daterangepicker .cancelBtn { background-color: transparent !important; color: #fdf1e7 !important; border: 1px solid rgba(234, 88, 12, 0.3) !important; padding: 4px 12px !important; border-radius: 4px !important; } .datepicker-container { z-index: 9999 !important; background-color: #221c17 !important; border: 1px solid #ea580c !important; border-radius: 8px !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important; padding: 8px !important; width: 245px !important; box-sizing: content-box !important; } .datepicker-panel { background-color: #221c17 !important; } .datepicker-container ul { background-color: #221c17 !important; margin: 0 !important; padding: 0 !important; list-style: none !important; width: 245px !important; } .datepicker-container ul::after { content: "" !important; display: table !important; clear: both !important; } .datepicker-container ul > li { float: left !important; width: 35px !important; height: 30px !important; line-height: 30px !important; text-align: center !important; background-color: #221c17 !important; color: #fdf1e7 !important; border-radius: 4px !important; list-style: none !important; box-sizing: border-box !important; } .datepicker-container ul[data-view="days"] > li[data-view="month current"], .datepicker-container ul[data-view="months"] > li[data-view="year current"], .datepicker-container ul[data-view="years"] > li[data-view="years current"] { width: 175px !important; color: #ea580c !important; font-weight: 600 !important; } .datepicker-container ul > li[data-view="month prev"], .datepicker-container ul > li[data-view="month next"], .datepicker-container ul > li[data-view="year prev"], .datepicker-container ul > li[data-view="year next"], .datepicker-container ul > li[data-view="years prev"], .datepicker-container ul > li[data-view="years next"] { width: 35px !important; color: #ea580c !important; background-color: #2b241d !important; font-weight: bold !important; cursor: pointer !important; } .datepicker-container ul[data-view="week"] > li { color: #ea580c !important; font-weight: 600 !important; } .datepicker-container ul[data-view="days"] > li[data-view="day"]:hover, .datepicker-container ul > li.highlighted { background-color: #2b241d !important; color: #ea580c !important; } .datepicker-container ul[data-view="days"] > li.muted { color: #5a4f45 !important; opacity: 0.5 !important; } .datepicker-container ul > li.picked { background-color: #ea580c !important; color: #ffffff !important; } .trumbowyg-box { background-color: var(--bg-input, #2b2420) !important; border: 1px solid var(--border-color, #3d332b) !important; border-radius: 8px !important; margin-top: 0; overflow: hidden; } .trumbowyg-box:focus-within { border-color: var(--border-color-focus, #ea580c) !important; box-shadow: 0 0 0 3px var(--primary-glow, rgba(234, 88, 12, 0.25)) !important; } .trumbowyg-button-pane { background-color: var(--bg-card-header, #2b2420) !important; border-bottom: 1px solid var(--border-color, #3d332b) !important; } .trumbowyg-button-pane::after { background-color: var(--border-color, #3d332b) !important; } .trumbowyg-button-group::after { background-color: var(--border-color, #3d332b) !important; } .trumbowyg-button-pane button span:not(.trumbowyg-icon) { display: none !important; } .trumbowyg-button-pane button { color: var(--text-main, #fdf1e7) !important; background: transparent !important; } .trumbowyg-button-pane button svg { fill: var(--text-main, #fdf1e7) !important; color: var(--text-main, #fdf1e7) !important; width: 17px !important; height: 17px !important; display: inline-block !important; } .trumbowyg-button-pane button:hover, .trumbowyg-button-pane button:focus, .trumbowyg-button-pane .trumbowyg-active-button { background-color: var(--border-color, #3d332b) !important; } .trumbowyg-editor { background-color: var(--bg-input, #2b2420) !important; color: var(--text-main, #fdf1e7) !important; min-height: 200px; min-height: 250px !important; height: auto !important; overflow-y: hidden !important; } .trumbowyg-dropdown { background-color: var(--bg-card, #221c17) !important; border: 1px solid var(--border-color, #3d332b) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important; } .trumbowyg-dropdown button { color: var(--text-main, #fdf1e7) !important; } .trumbowyg-dropdown button:hover { background-color: var(--border-color, #3d332b) !important; } div.swal2-popup { background-color: var(--bg-card, #221c17) !important; border: 1px solid var(--border-color, #3d332b) !important; border-radius: 14px !important; color: var(--text-main, #fdf1e7) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important; } div.swal2-popup .swal2-title { color: var(--text-main, #fdf1e7) !important; font-size: 1.25rem !important; font-weight: 600 !important; } div.swal2-popup .swal2-html-container, div.swal2-popup .swal2-content { color: var(--text-muted, #b89a86) !important; font-size: 0.95rem !important; } div.swal2-popup .swal2-input, div.swal2-popup .swal2-textarea, div.swal2-popup .swal2-select { background-color: var(--bg-main, #171310) !important; border: 1px solid var(--border-color, #3d332b) !important; color: var(--text-main, #fdf1e7) !important; border-radius: 8px !important; } div.swal2-popup .swal2-input:focus, div.swal2-popup .swal2-textarea:focus { border-color: var(--emerald-primary, #ea580c) !important; box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.2) !important; } div.swal2-popup .swal2-confirm { background-color: var(--emerald-primary, #ea580c) !important; color: #2a1608 !important; font-weight: 600 !important; border-radius: 8px !important; padding: 8px 20px !important; border: none !important; box-shadow: 0 2px 8px rgba(234, 88, 12, 0.3) !important; } div.swal2-popup .swal2-confirm:focus { box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.3) !important; } div.swal2-popup .swal2-cancel { background-color: var(--border-color, #3d332b) !important; color: var(--text-main, #fdf1e7) !important; font-weight: 600 !important; border-radius: 8px !important; padding: 8px 20px !important; border: none !important; } div.swal2-popup .swal2-deny { background-color: #EF4444 !important; color: #FFFFFF !important; border-radius: 8px !important; } div.swal2-popup .swal2-icon.swal2-success { border-color: var(--emerald-primary, #ea580c) !important; color: var(--emerald-primary, #ea580c) !important; } div.swal2-popup .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--emerald-primary, #ea580c) !important; } div.swal2-popup .swal2-icon.swal2-success .swal2-success-ring { border: 4px solid rgba(234, 88, 12, 0.2) !important; } div.swal2-popup .swal2-icon.swal2-success .swal2-success-fix { background-color: transparent !important; } div.swal2-popup .swal2-icon.swal2-error { border-color: #EF4444 !important; color: #EF4444 !important; } div.swal2-popup .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: #EF4444 !important; } div.swal2-popup .swal2-icon.swal2-warning { border-color: #F59E0B !important; color: #F59E0B !important; } div.swal2-popup .swal2-icon.swal2-info { border-color: #3B82F6 !important; color: #3B82F6 !important; } div.swal2-popup .swal2-close { color: var(--text-muted, #b89a86) !important; } div.swal2-popup .swal2-close:hover { color: var(--text-main, #fdf1e7) !important; } .form-control, .form-select, .bootstrap-tagsinput { background-color: var(--bg-input) !important; border: 1px solid var(--border-color) !important; color: var(--text-main) !important; border-radius: 8px !important; padding: 0.6rem 0.85rem; transition: border-color 0.2s, box-shadow 0.2s; } .form-control:focus, .form-select:focus,.bootstrap-tagsinput.focus { background-color: var(--bg-input) !important; border-color: var(--border-color-focus) !important; color: var(--text-main) !important; box-shadow: 0 0 0 3px var(--primary-glow) !important; outline: none; } .form-control::placeholder { color: var(--text-placeholder) !important; } /* .form-group's automatic bottom margin, restored (Bootstrap 5 dropped this as a formal component -- see bs5_compat.css for the same fix, duplicated intentionally so this rule stands on its own if a page ever loads theme.css without also loading the BS5 compat file). */ .form-group { margin-bottom: 1rem; } .btn-emerald { background-color: var(--primary); color: #2a1608; font-weight: 600; border: none; transition: all 0.2s ease; } .btn-emerald:hover, .btn-emerald:focus { background-color: var(--primary-hover); color: #ffffff; box-shadow: 0 0 15px rgba(234, 88, 12, 0.4); } .btn-outline-emerald { background-color: transparent; color: var(--primary); border: 1px solid var(--primary); font-weight: 500; transition: all 0.2s ease; } .btn-outline-emerald:hover { background-color: var(--primary); color: #2a1608; box-shadow: 0 0 12px rgba(234, 88, 12, 0.3); } .text-warning { color: #D9A406 !important; } .empty-state-card { background-color: var(--bg-card); border: 1px dashed var(--border-color); border-radius: 12px; padding: 40px 20px; text-align: center; } .empty-state-icon { font-size: 2.5rem; color: var(--emerald-main); opacity: 0.6; margin-bottom: 12px; } .empty-state-text { font-size: 1.1rem; color: var(--text-muted); font-weight: 600; } /* ---- Shared "thumbnail grid" card component (Product/Group/Category listing pages). ---- */ .thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; width: 100%; padding: 16px; } .thumb-card { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; position: relative; } .thumb-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); border-color: var(--primary); } .thumb-card .thumb-img { background-color: var(--bg-dark); padding: 12px; display: flex; align-items: center; justify-content: center; height: 140px; } .thumb-card .thumb-img img { max-height: 100%; max-width: 100%; object-fit: contain; border-radius: 6px; } .thumb-card .thumb-body { padding: 12px; text-align: center; flex-grow: 1; } .thumb-card .thumb-title { color: var(--text-light); font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .thumb-card .thumb-footer { background-color: rgba(0, 0, 0, 0.15); border-top: 1px solid var(--border-color); padding: 8px; display: flex; justify-content: center; align-items: center; gap: 6px; } @media (max-width: 576px) { .thumb-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 10px; } .thumb-card .thumb-img { height: 100px; } .thumb-card .thumb-title { font-size: 12px; } } /* ---- Shared component classes (modals etc.) ---- */ .modal-content { background-color: var(--bg-card) !important; border: 1px solid var(--border-color) !important; color: var(--text-main) !important; } .modal-header, .modal-footer { background-color: var(--bg-base) !important; border-color: var(--border-color) !important; } .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }