/*
 * Balaji's shared dark theme -- deep navy (repointed from Balaji's neutral
 * charcoal, cloned from that same reusable template) with a gold accent
 * used sparingly, matching the conch-shell icon's own navy-and-gold palette
 * (assets/images/conch_icon.png / balaji_logo_*.svg -- border navy below is
 * that icon's exact badge blue, #2A3A63). Variable names kept as
 * --maroon-* since they're referenced by var() across 14+ content pages in
 * package/closebee-balaji-enterprise/ -- only the values changed here.
 * This file, plus index.html and the logo assets in assets/images/,
 * together form the reusable template: to spin up the next product on the
 * same lines, clone this project, repoint the :root values below to the
 * new brand palette, and swap the three logo files in assets/images/.
 */
:root {
	--bg-dark: #0c0f1a;
	--maroon-mid: #1a2140;
	--maroon-card: #12172a;
	--maroon-border: #2A3A63;
	--gold-accent: #8A5D1A;
	--gold-hover: #A9792A;
	--gold-bright: #E8B04B;
	--text-light: #F3E8E0;
	/* Brightened from #C4A691 -- this drives every secondary/small-text
	   label across the app (addresses, table headers, timestamps), and a
	   CA's typical user skews older; legibility matters more than a subtle
	   muted tone here. */
	--text-muted: #E3CBB6;
}

* { padding: 0; margin: 0; box-sizing: border-box; }

/* Shared page-load loader (see assets/js/page_loader.js) -- covers the
   page until its JS has resolved its own initial state (topbar context,
   first data fetch fired), so navigating between pages doesn't flash a
   bare/wrong-state topbar before settling. Same fade pattern as
   balajiweb's own #page-loader/#page-content on register.html, ported
   here for the app side. */
#page-loader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background-color: var(--bg-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.35s ease, visibility 0.35s ease;
}
#page-loader.fade-out {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
#page-loader .spinner {
	width: 44px;
	height: 44px;
	border: 3px solid var(--maroon-border);
	border-top-color: var(--gold-hover);
	border-right-color: var(--gold-accent);
	border-radius: 50%;
	animation: page-loader-spin 0.85s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
}
@keyframes page-loader-spin {
	to { transform: rotate(360deg); }
}
/* Flex column so .main-footer's margin-top:auto can push it to the bottom
   of the viewport on short pages (e.g. an empty "No records found" state)
   instead of leaving a dead gap below it, without every page's own content
   wrapper needing to know about this. */
#page-content {
	opacity: 0;
	transition: opacity 0.3s ease;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
#page-content.loaded {
	opacity: 1;
}

/* Shared topbar -- was copy-pasted into every page's own <style> block
   (and had quietly drifted: brand-plate logo height was 28px on some pages,
   26px on others). One definition here so every page matches exactly and
   future drift isn't possible. Structure now mirrors Fusion's own shell
   (package/closebee-fusion-enterprise/index.html): icon-box brand + toggle
   + org-name pill on the left, notification bell + user profile dropdown
   on the right -- same layout, Balaji's own maroon/gold palette instead
   of Fusion's dark-steel/green. The nav itself lives in .nav-links, a left
   sidebar (see below), not inline here. */
.topbar { background: var(--maroon-card); border-bottom: 1px solid var(--maroon-border); padding: 14px 24px; display: flex; align-items: center; gap: 10px; position: relative; z-index: 160; }
.topbar .topbar-left { display: flex; align-items: center; gap: 12px; }
.brand-icon-box { background: #fff; border-radius: 10px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 2.5px; }
.brand-icon-box img { width: 100%; height: 100%; object-fit: contain; display: block; }
.org-name-pill { background: rgba(156,107,31,0.28); color: var(--gold-bright); border: 1px solid rgba(156,107,31,0.55); font-size: 13.5px; font-weight: 800; padding: 6px 14px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
/* Groups the notification bell / user dropdown / demo toggle into one flex
   item so they stay close together, and margin-left:auto pushes the whole
   group to the far right. */
.topbar .topbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.topbar .user-chip { display: flex; align-items: center; gap: 8px; color: var(--text-light); font-size: 13.5px; font-weight: 600; }
.topbar .user-chip .user-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--gold-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.topbar .user-chip .firm-name { color: var(--text-muted); font-weight: 400; font-size: 12px; display: block; }

/* Custom dropdowns -- notification bell + user profile menu, ported
   structurally from Fusion's own .custom-dropdown/.notif-* (package/
   closebee-fusion-enterprise/index.css) with Balaji's maroon/gold colors
   swapped in for Fusion's dark-steel/green. */
.custom-dropdown { position: relative; }
.custom-dropdown-toggle { display: flex; align-items: center; gap: 8px; color: var(--text-light); text-decoration: none; padding: 5px 10px 5px 5px; border: 1px solid var(--maroon-border); border-radius: 10px; background: var(--bg-dark); }
.custom-dropdown-toggle:hover { border-color: var(--gold-accent); }
.custom-dropdown-toggle .fa-chevron-down { font-size: 11px; color: var(--text-muted); }
.custom-dropdown-menu { display: none; position: absolute; right: 0; top: calc(100% + 8px); background: var(--maroon-card); border: 1px solid var(--maroon-border); border-radius: 10px; min-width: 170px; box-shadow: 0 8px 20px rgba(0,0,0,0.35); z-index: 170; }
.custom-dropdown-menu.show { display: block; }
.custom-dropdown-menu .dropdown-item { display: block; color: var(--text-light); text-decoration: none; padding: 10px 14px; font-size: 13.5px; }
.custom-dropdown-menu .dropdown-item:hover { background: rgba(156,107,31,0.15); }

.notif-icon-wrap { position: relative; display: inline-flex; color: var(--text-light); font-size: 16px; }
.notification-badge { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; line-height: 1; border-radius: 999px; background: #dc2626; color: #fff; box-shadow: 0 0 0 2px var(--maroon-card); }
.notif-dropdown { width: 380px; max-width: calc(100vw - 32px); }
.notif-dropdown-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--maroon-border); }
.notif-dropdown-title { font-weight: 700; font-size: 14px; color: var(--text-light); }
.notif-clear-link { font-size: 11.5px; font-weight: 600; color:var(--gold-hover); text-decoration: none; }
.notif-clear-link:hover { text-decoration: underline; }
.notif-close-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--text-muted); font-size: 13px; cursor: pointer; }
.notif-close-btn:hover { background: rgba(156,107,31,0.15); color: var(--text-light); }
.notif-list { max-height: 340px; overflow-y: auto; }
.notif-item { padding: 10px 16px; border-bottom: 1px solid var(--maroon-border); }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: rgba(156,107,31,0.06); }

/* Bell jump on a genuinely new notification arriving mid-session -- same
   bump mechanism (and reduced-motion guard) as Fusion's own bell, driven
   from bumpNotificationBell() in index.html's inline script. */
@keyframes notifBellBump {
	0%   { transform: translateY(0); }
	25%  { transform: translateY(-6px); }
	45%  { transform: translateY(0); }
	62%  { transform: translateY(-3px); }
	80%  { transform: translateY(0); }
	100% { transform: translateY(0); }
}
@keyframes notifBadgePop {
	0% { transform: scale(1); }
	35% { transform: scale(1.4); }
	100% { transform: scale(1); }
}
.notif-icon-wrap.notif-bump { animation: notifBellBump 0.6s cubic-bezier(.34, 1.56, .64, 1); }
.notif-icon-wrap.notif-bump .notification-badge { animation: notifBadgePop 0.6s ease; }
@media (prefers-reduced-motion: reduce) {
	.notif-icon-wrap.notif-bump, .notif-icon-wrap.notif-bump .notification-badge { animation: none; }
}

/* Shared page footer, same "Powered by Closebee" convention as Fusion's
   own shell (package/closebee-fusion-enterprise/index.html's
   .main-footer) -- Balaji has no persistent shell to hang this on since
   each page is standalone, so every page carries its own copy at the
   bottom of #page-content. margin-top:auto (its flex-column parent is
   #page-content) is what actually pins it to the viewport bottom. */
.main-footer { background: var(--maroon-card); border-top: 1px solid var(--maroon-border); color: var(--text-muted); font-size: 12.5px; padding: 14px 24px; margin-top: auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.main-footer a { color:var(--gold-hover); text-decoration: none; }
.main-footer a:hover { color: var(--gold-hover); text-decoration: underline; }

/* Every Bootstrap modal across Balaji, centralized here instead of each
   page redefining it locally (a few pages used a "-dark" suffixed class
   for the same purpose, e.g. .modal-content-dark -- the plain .modal-content
   selector still matches those too, so this covers both conventions with
   no per-page markup changes needed). Two things this fixes app-wide:
   1. The header used to have no background of its own -- it just inherited
      .modal-content's, so header and body read as one continuous block.
      A light gold band with near-black text makes "this is the header"
      unambiguous at a glance, rather than relying on a subtler dark-on-dark
      shade difference. The close icon (many modals hardcode the
      "btn-close-white" class, meant for a dark header) needs its invert
      filter cancelled here specifically, or it would render an
      invisible-on-light-gold white-on-white icon.
   2. Bootstrap's default backdrop is 50% black -- barely a shade different
      from this theme's already-near-black background, so the "page
      blocked" effect a modal is supposed to have was effectively
      invisible. Darker + more opaque actually reads as an overlay. Only
      dims the container the modal is IN (its own document -- e.g. a
      client's own nested detail iframe), not the whole browser window;
      a known, accepted limitation of the iframe-per-page architecture. */
.modal-content { background: var(--maroon-card); color: var(--text-light); border: 1px solid var(--maroon-border); }
.modal-header { background: var(--gold-bright); border-bottom: 1px solid var(--maroon-border); color: #1a1006; }
.modal-header .modal-title { color: #1a1006; }
.modal-header .btn-close { filter: none; }
.modal-footer { border-top: 1px solid var(--maroon-border); }
.modal-backdrop { background: #000; }
.modal-backdrop.show { opacity: 0.8; }

/* Left sidebar nav -- permanently visible on desktop (fixed column, content
   sits beside it via #content_frame's left offset in the shell's own
   style), off-canvas overlay on mobile via the same drawer mechanism
   Fusion's own shell uses for this exact problem (package/closebee-fusion-
   enterprise/index.js|css: hamburger -> a body toggle class -> an
   off-canvas panel + backdrop) rather than inventing a new one. --sidebar-
   width is also read by the shell's own #content_frame/#shell_topbar CSS,
   so it only needs changing in one place. */
:root { --sidebar-width: 220px; --sidebar-width-collapsed: 64px; }
/* .nav-links is just the fixed-position/off-canvas shell; the actual nav
   items are a real <ul>/<li> list (.nav-sidebar-list) inside it -- not a
   flat row of sibling <a> tags -- so a later nested submenu (an <li>
   holding both its own <a> and a child <ul class="nav-treeview">, the same
   shape pn.app.wadmin's own AdminLTE-style sidebar already uses) is a
   markup addition, not a restructuring. */
.nav-links {
	position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width);
	background: var(--maroon-card); border-right: 1px solid var(--maroon-border);
	display: flex; flex-direction: column; padding: 16px 12px;
	overflow-y: auto; z-index: 150;
	/* Same width/margin easing Fusion's own .main-sidebar/.content-wrapper
	   use for their collapse toggle (package/closebee-fusion-enterprise/
	   index.css) -- without it the rail snaps to its new width instantly,
	   which reads as jumpy next to #content_frame's own transition below. */
	transition: width 0.25s ease-in-out;
}
.nav-sidebar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav-sidebar-list a { position: relative; display: flex; align-items: center; color: var(--text-muted); text-decoration: none; font-size: 13.5px; font-weight: 600; padding: 11px 14px; border-radius: 8px; }
.nav-sidebar-list a:hover, .nav-sidebar-list a.active { color: var(--text-light); background: rgba(156, 107, 31, 0.15); }
.nav-sidebar-list a .nav-icon { width: 20px; flex-shrink: 0; text-align: center; margin-right: 12px; font-size: 14px; }
/* The background pill alone read as too subtle to tell which page is
   active at a glance -- a side accent bar is the vertical-nav equivalent
   of the underline this used when nav-links was still a horizontal row. */
.nav-sidebar-list a.active::after { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; border-radius: 2px; background: var(--gold-accent); }
/* Ready for a future nested submenu: an <li> with children indents its own
   <ul class="nav-treeview"> one level and drops the active accent bar (the
   bar marks a real destination, not a parent that's merely expanded). */
.nav-sidebar-list .nav-treeview { list-style: none; margin: 4px 0 0; padding: 0 0 0 14px; display: flex; flex-direction: column; gap: 2px; }
.nav-sidebar-list .nav-treeview a.active::after { display: none; }
/* Visible at every width now -- on mobile it opens the off-canvas drawer,
   on desktop it collapses the sidebar to an icon rail (body.sidebar-
   collapsed below), the same one-button-two-jobs pattern Fusion's own
   .toggle-sidebar uses. */
.nav-drawer-toggle { display: inline-flex; background: transparent; border: none; color: var(--text-light); font-size: 18px; width: 34px; height: 34px; border-radius: 8px; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-drawer-toggle:hover { background: rgba(156, 107, 31, 0.15); }
.nav-drawer-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 149; }
.nav-drawer-close { display: none; }

/* Desktop collapsed rail: icon-only, driven by the same toggle button as
   the mobile drawer. #content_frame/#nav_links_panel's own `left` shrinks
   to match (see index.html's inline style) and positionFrame() re-reads it
   on toggle, so the content area always fills the remaining width. */
@media (min-width: 768px) {
	body.sidebar-collapsed .nav-links { width: var(--sidebar-width-collapsed); padding-left: 0; padding-right: 0; }
	body.sidebar-collapsed .nav-sidebar-list a { justify-content: center; padding: 12px 0; }
	body.sidebar-collapsed .nav-sidebar-list a .nav-icon { margin-right: 0; font-size: 16px; }
	body.sidebar-collapsed .nav-sidebar-list a .nav-label,
	body.sidebar-collapsed .nav-sidebar-list .nav-treeview { display: none; }
	body.sidebar-collapsed .nav-sidebar-list a.active::after { display: none; }
}

@media (max-width: 767.98px) {
	.topbar { padding: 10px 14px; gap: 8px; }
	.org-name-pill { display: none; }
	.nav-drawer-toggle { order: -1; }
	.nav-links {
		width: 78vw; max-width: 300px; align-items: stretch;
		transform: translateX(-100%); transition: transform 0.25s ease;
	}
	body.nav-drawer-open .nav-links { transform: translateX(0); }
	body.nav-drawer-open .nav-drawer-backdrop { display: block; }
	.nav-links a { padding: 12px 14px; font-size: 14.5px; }
	.nav-drawer-close { display: flex; align-items: center; justify-content: flex-end; padding: 0 0 12px; }
	.nav-drawer-close button { background: transparent; border: none; color: var(--text-muted); font-size: 20px; width: 32px; height: 32px; }
	.topbar .user-chip .firm-name { display: none; }
	.main-footer { flex-direction: column; text-align: center; gap: 4px; padding: 12px 14px; }
}

html, body {
	min-height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
	background: radial-gradient(circle at center, var(--maroon-mid) 0%, var(--bg-dark) 100%);
	color: var(--text-light);
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Poppins used everywhere now (same as the marketing site, balajiweb.closebee.com/
   assets/css/site.css) -- headings just go bolder/tighter than body text. */
h1, h2, h3, h4, h5, h6, .display {
	font-family: 'Poppins', 'Segoe UI', sans-serif;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* Scrollbars hidden everywhere (content still scrolls normally) -- same
   convention Fusion's own view/user/listing.html already uses. */
html, body {
	-ms-overflow-style: none;
	scrollbar-width: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important;
}
* {
	-ms-overflow-style: none !important;
	scrollbar-width: none !important;
}

/* Every content page redefines .form-control-dark locally rather than
   sharing one -- fixed once here instead of in each file, since a disabled
   dark input/select otherwise falls back to the browser's light-gray
   disabled styling (Bootstrap's #e9ecef), breaking the theme. */
.form-control-dark:disabled, select.form-control-dark:disabled {
	background: #0c0f1a;
	color: var(--text-muted);
	opacity: 1;
	border-color: var(--maroon-border);
}

/* A <input type="file" class="form-control-dark"> otherwise renders its
   button half using the browser's own default light-gray "Choose File"
   button (a native, unstyled OS control) regardless of every other rule
   above, since it lives in its own pseudo-element -- WebKit/Blink and the
   newer standard pseudo-element both need targeting for this to hold
   across browsers. */
.form-control-dark[type="file"]::file-selector-button,
.form-control-dark[type="file"]::-webkit-file-upload-button {
	background: var(--gold-accent);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 6px 12px;
	margin: -6px 12px -6px -12px;
	cursor: pointer;
	font-weight: 600;
	font-size: 13px;
}
.form-control-dark[type="file"]::file-selector-button:hover,
.form-control-dark[type="file"]::-webkit-file-upload-button:hover {
	background: var(--gold-hover);
}

.scrollcontainer {
	overflow-y: auto;
	min-height: 10vh;
	max-height: 50vh;
}

.bg-app {
	background-color: #0c0d0e !important;
	border-bottom: 1px solid var(--maroon-border);
}

/* Card & UI Overrides */
.card {
	background-color: var(--maroon-card);
	border: 1px solid var(--maroon-border);
	color: var(--text-light);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
	border-radius: 12px;
}

.card-header, .card-footer {
	background-color: rgba(0, 0, 0, 0.3);
	border-color: var(--maroon-border);
}

.form-control {
	background-color: #0c0f1a;
	border: 1px solid var(--maroon-border);
	color: #ffffff;
}

.form-control:focus {
	background-color: #1a2140;
	border-color: var(--gold-accent);
	color: #ffffff;
	box-shadow: 0 0 0 0.2rem rgba(156, 107, 31, 0.35);
}

.form-control::placeholder {
	color: var(--text-muted);
	opacity: 0.6;
}

/* Gold Buttons */
.btn-gold {
	background-color: var(--gold-accent);
	border-color: var(--gold-accent);
	color: #ffffff;
	font-weight: 500;
}

.btn-gold:hover, .btn-gold:focus {
	background-color: var(--gold-hover);
	border-color: var(--gold-hover);
	color: #ffffff;
}

.btn-outline-gold {
	border-color: var(--maroon-border);
	color: var(--text-light);
	background-color: rgba(0, 0, 0, 0.3);
}

.btn-outline-gold:hover {
	background-color: var(--gold-accent);
	border-color: var(--gold-accent);
	color: #ffffff;
}

a {
	color: #E0AC4D;
}
a:hover {
	color: #F0C878;
	text-decoration: underline;
}

.border-dark-maroon {
	border-color: var(--maroon-border) !important;
}

/* Password Toggle */
.input-group-text {
	background-color: #0c0f1a;
	border: 1px solid var(--maroon-border);
	color: var(--text-muted);
	cursor: pointer;
}
.input-group-text:hover {
	color: var(--text-light);
}

/* Single shared content container -- every Balaji view should use this
   instead of defining its own .wrap, so page widths stay consistent
   ("all views should fall in a single container"). Now that the nav is a
   left sidebar (permanent on desktop, off-canvas on mobile) rather than a
   full-width topbar, the content area already sits framed beside/under it
   -- the old 80%-centered desktop treatment (meant for a full-width
   marketing-style topbar) just wasted space here, so this is 100% width on
   both desktop and mobile. No baked-in vertical padding: add py-3/py-4
   etc. in markup per page as needed. */
.wrap {
	width: 100%;
	margin: 0;
	padding: 0 20px;
}
@media (max-width: 768px) {
	.wrap {
		padding: 0 16px;
	}
}

/* Bootstrap dropdown-menu ships light by default -- theme it to match, same
   as every other surface in this file. */
.dropdown-menu {
	background-color: var(--maroon-card);
	border: 1px solid var(--maroon-border);
}
.dropdown-item {
	color: var(--text-light);
}
.dropdown-item:hover, .dropdown-item:focus {
	background-color: rgba(156, 107, 31, 0.15);
	color: var(--text-light);
}

/* Canonical "no records" empty state -- was triplicated identically in
   index.html/services.html/group_clients.html and diverged into a
   differently-structured .no-data-card in groups.html and a plain
   alert-info box in transactions.html. One template now: an icon, then a
   line of text, in a dashed-border card. Usage:
   <div class="empty-state"><i class="fa-solid fa-ICON fa-2x mb-3"></i><br>Message</div> */
.empty-state {
	text-align: center;
	color: var(--text-muted);
	padding: 60px 20px;
	border: 1px dashed var(--maroon-border);
	border-radius: 12px;
}

/* Ported byte-for-byte from Fusion's .thumb-grid/.thumb-card (see
   fusionapp.closebee.com/assets/css/theme.css) for the Groups listing page
   -- same component, Balaji's own tokens (--maroon-card/--maroon-border/
   --gold-accent) swapped in for Fusion's (--bg-card/--border-color/
   --primary). */
.thumb-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	width: 100%;
	padding: 16px;
}
.thumb-card {
	background-color: var(--maroon-card);
	border: 1px solid var(--maroon-border);
	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(--gold-accent);
}
.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(--maroon-border);
	padding: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
}
.badge-count {
	background-color: rgba(156, 107, 31, 0.15);
	color:var(--gold-hover);
	border: 1px solid var(--gold-accent);
	font-weight: 600;
	font-size: 11px;
	padding: 3px 6px;
	border-radius: 12px;
}
@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;
	}
}