/*
 * The single shared dark "charcoal + deep indigo" theme for
 * bhairavapp.closebee.com admin pages.
 *
 * Ported from fusionapp.closebee.com's own theme.css (emerald-green family)
 * per this product family's own convention (Bilzee did the same when it
 * split off) -- every variable NAME below is kept identical to the Fusion
 * original on purpose so any page built against this file's classes
 * matches without needing markup changes if ever cross-referenced. Only
 * the VALUES change here.
 */
:root {
	--bg-base: #14151a;
	--bg-card: #1c1e26;
	--bg-card-header: #23262f;
	--bg-input: #23262f;
	--border-color: #34384a;
	--border-color-focus: #4338ca;
	--primary: #4338ca;
	--primary-hover: #6366f1;
	--primary-glow: rgba(67, 56, 202, 0.3);
	--text-main: #eef0fa;
	--text-muted: #9a9fc2;
	--text-placeholder: #5b5f7a;
	--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);
}

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;
}

.trumbowyg-box {
	background-color: var(--bg-input, #23262f) !important;
	border: 1px solid var(--border-color, #34384a) !important;
	border-radius: 8px !important;
	margin-top: 0;
	overflow: hidden;
}
.trumbowyg-box:focus-within {
	border-color: var(--border-color-focus, #4338ca) !important;
	box-shadow: 0 0 0 3px var(--primary-glow, rgba(67, 56, 202, 0.3)) !important;
}
.trumbowyg-button-pane {
	background-color: var(--bg-card-header, #23262f) !important;
	border-bottom: 1px solid var(--border-color, #34384a) !important;
}
.trumbowyg-button-pane::after {
	background-color: var(--border-color, #34384a) !important;
}
.trumbowyg-button-group::after {
	background-color: var(--border-color, #34384a) !important;
}
.trumbowyg-button-pane button span:not(.trumbowyg-icon) {
	display: none !important;
}
.trumbowyg-button-pane button {
	color: var(--text-main, #eef0fa) !important;
	background: transparent !important;
}
.trumbowyg-button-pane button svg {
	fill: var(--text-main, #eef0fa) !important;
	color: var(--text-main, #eef0fa) !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, #34384a) !important;
}
.trumbowyg-editor {
	background-color: var(--bg-input, #23262f) !important;
	color: var(--text-main, #eef0fa) !important;
	min-height: 200px;
	min-height: 250px !important;
    height: auto !important;
    overflow-y: hidden !important;
}
.trumbowyg-dropdown {
	background-color: var(--bg-card, #1c1e26) !important;
	border: 1px solid var(--border-color, #34384a) !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}
.trumbowyg-dropdown button {
	color: var(--text-main, #eef0fa) !important;
}
.trumbowyg-dropdown button:hover {
	background-color: var(--border-color, #34384a) !important;
}
/* --border-color (#34384a) barely separates from this popup's own
   background (--bg-card, #1c1e26) -- both dark blue-grays close enough in
   luminance that the border was reading as basically invisible against the
   backdrop. A lighter, higher-contrast neutral (rather than reusing
   --border-color) plus a softer/deeper shadow and a touch more radius give
   the popup a real, visible edge and more presence sitting on top of the
   page instead of blending into it. */
div.swal2-popup {
    background-color: var(--bg-card, #1c1e26) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 16px !important;
    color: var(--text-main, #eef0fa) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(99, 102, 241, 0.08) !important;
}
div.swal2-popup .swal2-title {
    color: var(--text-main, #eef0fa) !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, #9a9fc2) !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, #14151a) !important;
    border: 1px solid var(--border-color, #34384a) !important;
    color: var(--text-main, #eef0fa) !important;
    border-radius: 8px !important;
}
div.swal2-popup .swal2-input:focus,
div.swal2-popup .swal2-textarea:focus {
    border-color: var(--emerald-primary, #4338ca) !important;
    box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.25) !important;
}
div.swal2-popup .swal2-confirm {
    background-color: var(--emerald-primary, #4338ca) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 8px 20px !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(67, 56, 202, 0.4) !important;
}
div.swal2-popup .swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.3) !important;
}
div.swal2-popup .swal2-cancel {
    background-color: var(--border-color, #34384a) !important;
    color: var(--text-main, #eef0fa) !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, #4338ca) !important;
    color: var(--emerald-primary, #4338ca) !important;
}
div.swal2-popup .swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: var(--emerald-primary, #4338ca) !important;
}
div.swal2-popup .swal2-icon.swal2-success .swal2-success-ring {
    border: 4px solid rgba(67, 56, 202, 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, #9a9fc2) !important;
}

div.swal2-popup .swal2-close:hover {
    color: var(--text-main, #eef0fa) !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;
	/* Bootstrap's own stock .form-control padding, not a bigger custom
	   value -- a bigger value here doesn't just look different, it makes
	   .form-control taller than an adjacent Bootstrap .btn (which keeps its
	   own stock padding, since nothing here touches .btn), and it also
	   silently out-specificities .form-control-sm's own smaller padding
	   (equal selector specificity, this file loads after bootstrap.css, so
	   this always wins the tie) -- both add up to visibly mismatched
	   input/button pairs on every page still using plain Bootstrap sizing. */
	padding: 0.375rem 0.75rem;
	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 {
	margin-bottom: 1rem;
}

.btn-emerald {
	background-color: var(--primary);
	color: #ffffff;
	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(67, 56, 202, 0.5);
}
.btn-outline-emerald {
	background-color: transparent;
	color: var(--primary-hover);
	border: 1px solid var(--primary);
	font-weight: 500;
	transition: all 0.2s ease;
}
.btn-outline-emerald:hover {
	background-color: var(--primary);
	color: #ffffff;
	box-shadow: 0 0 12px rgba(67, 56, 202, 0.35);
}
.text-warning {
    color: #D9A406 !important;
}
.text-muted {
	color: var(--text-muted) !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;
}

.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;
	}
}

.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%);
}

/* ---- Bhairav-specific additions (accordion records view + dashboard) ---- */
.card {
	background-color: var(--bg-card);
	border: 1px solid var(--border-color);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.card-header, .card-footer {
	background-color: var(--bg-card-header);
	border-color: var(--border-color);
}
.badge-indigo {
	background-color: rgba(67, 56, 202, 0.22);
	color: #ffffff;
	border: 1px solid rgba(67, 56, 202, 0.4);
	font-weight: 500;
}
.btn-indigo {
	background-color: var(--primary);
	border-color: var(--primary);
	color: #fff;
	font-weight: 600;
}
.btn-indigo:hover {
	background-color: var(--primary-hover);
	border-color: var(--primary-hover);
	color: #fff;
}
.btn-outline-indigo {
	background-color: transparent;
	border: 1px solid var(--border-color);
	color: var(--text-main);
}
.btn-outline-indigo:hover {
	background-color: var(--primary);
	border-color: var(--primary);
	color: #fff;
}

/* "Warehouse" family (view/warehouse/listing.html, view/warehouse/items.html)
 * -- ported from Fusion's own body.theme-warehouse scope, which uses a
 * genuinely separate green ("emerald") accent family there. Bhairav has no
 * such per-page-family accents -- one indigo identity everywhere -- so the
 * variable NAMES are kept (same reasoning as this file's own top comment)
 * but every value maps to the shared indigo/charcoal tokens above instead
 * of Fusion's green hex values.
 */
body.theme-warehouse {
	--bg-main: var(--bg-base);
	--bg-card-hover: var(--bg-card-header);
	--bg-header: var(--bg-card-header);
	--emerald-bright: var(--primary-hover);
	--emerald-accent: var(--primary);
	--emerald-border: var(--border-color);
	--text-light: var(--text-main);
}

/* "Inventory group/category/menu listing" family (inventory/group/listing.html,
 * and inventory/category|menu/listing.html if those ever get ported) --
 * same reasoning as body.theme-warehouse above: names kept, values remapped
 * to the shared indigo/charcoal tokens instead of Fusion's green ones.
 */
body.theme-inventory-listing {
	--bg-dark: var(--bg-base);
	--emerald-accent: var(--primary);
	--emerald-hover: var(--primary-hover);
	--emerald-soft: var(--primary-glow);
	--text-light: var(--text-main);
}

/* "Inventory group/category/menu" detail family (inventory/group/items.html,
 * and inventory/category/items.html, inventory/menu/*.html if those ever
 * get ported) -- same reasoning again.
 */
body.theme-inventory-emerald {
	--emerald-bg: var(--bg-base);
	--emerald-card: var(--bg-card);
	--emerald-card-hover: var(--bg-card-header);
	--emerald-accent: var(--primary);
	--emerald-light: var(--primary-hover);
	--emerald-border: var(--border-color);
}

/* Scrollbars hidden everywhere on this shared theme -- scrolling itself is
 * untouched, only the bar's paint is suppressed (same technique already
 * used ad hoc on a couple of pages, now applied platform-wide). */
html, body, * {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* Stops the browser's scroll-anchoring from nudging the page a few px
 * whenever content loads/re-renders above the fold (e.g. a page's own
 * $.getJSON populating its list after the sticky header has already
 * painted) -- the exact signature of a sticky header appearing to
 * "shift" a few px on scroll. Scoped to html/body (the actual scroll
 * root in every page here), not every element, so it can't interfere
 * with anything else. */
html, body {
	overflow-anchor: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
	display: none;
}