/* Theme system
 *
 * - Bootstrap 5.3 color modes are controlled via `data-bs-theme` (we set this to "dark" only for the Dark theme).
 * - App-specific theme palettes are controlled via `data-app-theme` (white/light/medium/dark).
 * - Custom overrides below should never force light-only colors (e.g., `#fff`) so Dark mode remains usable.
 */
html {
	/* Default palette (light) */
	--app-bg: #f7f9fc;
	--app-surface: #ffffff;
	--app-surface-2: #f8f9fa;
	--app-border: #e9ecef;
	/* Utility sizing */
	--app-table-body-font-size-sm: 0.8125rem;
}

html[data-app-theme="white"] {
	--app-bg: #ffffff;
	--app-surface: #ffffff;
	--app-surface-2: #f8f9fa;
	--app-border: #dee2e6;
}

html[data-app-theme="light"] {
	--app-bg: #f7f9fc;
	--app-surface: #ffffff;
	--app-surface-2: #f8f9fa;
	--app-border: #e9ecef;
}

html[data-app-theme="medium"] {
	--app-bg: #e4e7eb;
	--app-surface: #f7f9fc;
	--app-surface-2: #ffffff;
	--app-border: #c7ced8;
}

html[data-app-theme="dark"] {
	/* Slightly lifted dark palette (less "inky", still high-contrast) */
	/* More neutral/greyscale with a subtle blue tint */
	/* --app-bg: #14172a; */
	/* --app-surface: #1d233c; */
	/* --app-surface-2: #1b2037; */
	/* --app-border: #323c6a; */
	--app-bg: #07091d;
	--app-surface: #191f39;
	--app-surface-2: #131830;
	--app-border: #303b6a;
}

html[data-app-theme="babyblue"] {
	--app-bg: #cfebf1;
	--app-surface: #f3fbfe;
	--app-surface-2: #f1f7f7;
	--app-border: #aedde7;
}

html[data-app-theme="beige"] {
	--app-bg: #f2f1ea;
	--app-surface: #fefefc;
	--app-surface-2: #f9f7f2;
	--app-border: #e6e3d3;
}

html[data-app-theme="brown"] {
	--app-bg: #191811;
	--app-surface: #37321b;
	--app-surface-2: #2e2a15;
	--app-border: #665c34;
}


body {
	background-color: var(--app-bg);
	color: var(--bs-body-color);
}

/* Surfaces + borders used across the app */
.app-header .navbar,
.app-footer {
	background-color: var(--app-surface) !important;
	border-color: var(--app-border) !important;
}

.card,
.modal-content,
.dropdown-menu {
	background-color: var(--app-surface);
	border-color: var(--app-border);
}

.list-group-item {
	background-color: var(--app-surface);
	border-color: var(--app-border);
	color: var(--bs-body-color);
}

/* App shell: make footer sit at the bottom on short pages */
.app-shell {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* App chrome sizing + fixed positioning */
.app-shell.has-app-chrome {
	--app-header-height: 56px;
	--app-footer-height: 56px;
	padding-top: var(--app-header-height);
	padding-bottom: var(--app-footer-height);
}

.app-shell.has-app-chrome .app-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1030; /* Bootstrap navbar z-index */
}

.app-shell.has-app-chrome .app-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1020;
}

/* Footer: match header sizing and styling */
.app-footer-inner {
	min-height: 56px; /* roughly matches Bootstrap navbar height */
	display: flex;
	align-items: center;
}

/* Logout button styling */
.nav-link.logout-btn {
	background-color: #ff8c00 !important;
	color: #ffffff !important;
	border-radius: 4px;
	padding: 0.375rem 0.75rem !important;
	margin-left: 0.5rem;
}

.nav-link.logout-btn:hover {
	background-color: #ff7f00 !important;
	color: #ffffff !important;
}

/* User info container - reduce spacing */
.user-info-container {
	gap: 0.125rem !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.user-info-container .navbar-text {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
	line-height: 1.2 !important;
}

.user-info-container .user-name {
	margin-bottom: 0 !important;
	font-size: 0.875rem !important;
	padding: 0.125rem 0 !important;
}

.user-info-container .caller-id {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Phone status widget (Call Path users) */
.phone-status-widget {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0.5rem;
	border: 1px solid var(--app-border);
	border-radius: 999px;
	background: var(--app-surface);
}

.phone-status-icon {
	width: 22px;
	height: 22px;
	display: block;
}

.phone-status-text {
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.02em;
}

.phone-status-timer {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 0.875rem;
	color: #6c757d;
	min-width: 4.5rem;
	text-align: right;
}

/* Utility: smaller table body rows (keep headers default) */
.table-body-sm tbody td {
	font-size: var(--app-table-body-font-size-sm);
}

/* Utility: smaller “data” text (keep titles default) */
.app-data-sm {
	font-size: var(--app-table-body-font-size-sm);
}

/* Utility: readable command/log output across all app themes */
.app-console-output {
	background: #f8f9fa !important;
	border-color: var(--app-border, var(--bs-border-color)) !important;
	color: #212529 !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	line-height: 1.45;
}

.app-console-output:empty::before {
	color: rgba(33, 37, 41, .55);
	content: "\00a0";
}

html[data-bs-theme="dark"] .app-console-output {
	background: #050505 !important;
	border-color: rgba(25, 135, 84, .45) !important;
	color: #d7fbe8 !important;
}

html[data-bs-theme="dark"] .app-console-output:empty::before {
	color: rgba(215, 251, 232, .55);
}

/* Sales reports: emphasize totals in header */
.sales-report-total {
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--bs-body-color);
}

/* Wallet card: make Credit Cards tab look like primary button */
#walletTabs .nav-item.wallet-cards-tab-item {
	/* The Credit Cards tab is intentionally more compact, so bottom-align it
	   with the other tabs in the row. */
	align-self: flex-end;
}

#walletTabs .nav-link.wallet-cards-tab-btn {
	background-color: var(--bs-primary);
	color: #ffffff;
	border-color: var(--bs-primary);
	/* Compact sizing so the tab doesn't feel oversized */
	padding: 0.25rem 0.65rem;
	font-size: 0.875rem;
	line-height: 1.2;
}

#walletTabs .nav-link.wallet-cards-tab-btn:hover,
#walletTabs .nav-link.wallet-cards-tab-btn:focus {
	background-color: var(--bs-primary);
	color: #ffffff;
	filter: brightness(0.95);
}

#walletTabs .nav-link.wallet-cards-tab-btn.active {
	background-color: var(--bs-primary);
	color: #ffffff;
	border-color: var(--bs-primary);
}