/* ==========================================================================
   BulkBuys SMS — Filament-inspired light theme
   Phase 1: shell (layout, sidebar, navbar, login, forms, cards)
   Loaded after AdminLTE so these rules win without relying on !important
   where possible.
   ========================================================================== */

:root {
	--bb-bg: #f9fafb;
	--bb-surface: #ffffff;
	--bb-border: #e5e7eb;
	--bb-border-strong: #d1d5db;
	--bb-text: #111827;
	--bb-text-muted: #6b7280;
	--bb-text-subtle: #9ca3af;
	--bb-sidebar-bg: #ffffff;
	--bb-sidebar-text: #374151;
	--bb-sidebar-muted: #6b7280;
	--bb-sidebar-hover: #f3f4f6;
	--bb-sidebar-active: #eff6ff;

	/* BulkBuys brand (kept from the current theme) */
	--bb-primary: #3678b5;
	--bb-primary-hover: #2c659b;
	--bb-primary-soft: #eaf2f9;
	--bb-accent: #16a34a;
	--bb-accent-hover: #15803d;
	--bb-danger: #dc2626;
	--bb-warning: #d97706;

	--bb-radius: 0.5rem;
	--bb-radius-sm: 0.375rem;
	--bb-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--bb-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
	--bb-shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 6px -2px rgb(0 0 0 / 0.05);

	--bb-header-h: 3.75rem;
	--bb-sidebar-w: 16rem;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html {
	background: var(--bb-bg);
}

body {
	background: var(--bb-bg);
	color: var(--bb-text);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	font-size: 0.9375rem;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--bb-text);
	font-weight: 600;
	letter-spacing: -0.011em;
}

a {
	color: var(--bb-primary);
}

a:hover,
a:focus {
	color: var(--bb-primary-hover);
}

hr {
	border-top-color: var(--bb-border);
}

.text-muted {
	color: var(--bb-text-muted) !important;
}

.page-header-title {
	font-size: 1.375rem;
	font-weight: 650;
	letter-spacing: -0.015em;
	color: var(--bb-text);
	margin: 0 0 0.25rem;
}

.page-header-subtitle {
	color: var(--bb-text-muted);
	font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Layout shell
   -------------------------------------------------------------------------- */

.wrapper {
	background: var(--bb-bg);
}

.content-wrapper {
	background: var(--bb-bg);
	min-height: 100vh;
	padding: 1.5rem 1.75rem 2.5rem;
}

.content-wrapper > .content > .container-fluid {
	padding: 0;
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   Top navbar
   -------------------------------------------------------------------------- */

.main-header.navbar {
	background: var(--bb-surface) !important;
	border-bottom: 1px solid var(--bb-border) !important;
	box-shadow: none !important;
	min-height: var(--bb-header-h);
	padding: 0.5rem 1.25rem;
	z-index: 1035;
}

.main-header .nav-link {
	color: var(--bb-text-muted) !important;
	border-radius: var(--bb-radius-sm);
	padding: 0.4rem 0.6rem;
	font-size: 0.875rem;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.main-header .nav-link:hover,
.main-header .nav-link:focus {
	background: var(--bb-sidebar-hover);
	color: var(--bb-text) !important;
}

.main-header .navbar-nav {
	align-items: center;
	gap: 0.25rem;
}

.main-header .nav-item {
	display: flex;
	align-items: center;
}

/* Header action buttons: quiet, Filament-style */
.main-header .bb-header-compose-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0;
}

.main-header .bb-header-compose-group .btn {
	border-radius: var(--bb-radius-sm);
	font-size: 0.8125rem;
	font-weight: 500;
	padding: 0.4rem 0.75rem;
	box-shadow: none !important;
	border: 1px solid transparent;
}

.main-header .bb-header-compose-group .btn-success {
	background: var(--bb-primary) !important;
	border-color: var(--bb-primary) !important;
	color: #fff !important;
}

.main-header .bb-header-compose-group .btn-success:hover {
	background: var(--bb-primary-hover) !important;
	border-color: var(--bb-primary-hover) !important;
}

.main-header .bb-header-compose-group .btn-info,
.main-header .bb-header-compose-group .btn-warning,
.main-header .bb-header-compose-group .btn-outline-light {
	background: var(--bb-surface) !important;
	border-color: var(--bb-border-strong) !important;
	color: var(--bb-text) !important;
}

.main-header .bb-header-compose-group .btn-info:hover,
.main-header .bb-header-compose-group .btn-warning:hover,
.main-header .bb-header-compose-group .btn-outline-light:hover {
	background: var(--bb-sidebar-hover) !important;
	color: var(--bb-text) !important;
}

.main-header .bb-header-compose-group .bb-texter-dashboard-btn {
	background: var(--bb-surface) !important;
	border-color: var(--bb-border-strong) !important;
	color: var(--bb-text) !important;
	font-weight: 500;
}

.main-header .bb-header-compose-group .bb-texter-dashboard-btn:hover {
	background: var(--bb-sidebar-hover) !important;
	color: var(--bb-text) !important;
	filter: none;
}

.bb-header-account-credit,
.bb-header-sender-id {
	color: var(--bb-text-muted) !important;
	font-size: 0.8125rem;
	padding: 0.4rem 0.7rem;
	border-radius: var(--bb-radius-sm);
	white-space: nowrap;
}

.bb-header-account-credit:hover {
	color: var(--bb-text) !important;
	background: var(--bb-sidebar-hover);
	text-decoration: none !important;
}

.bb-header-account-credit strong,
.bb-header-sender-id strong {
	color: var(--bb-text);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

.main-sidebar {
	background: var(--bb-sidebar-bg) !important;
	border-right: 1px solid var(--bb-border);
	box-shadow: none !important;
	width: var(--bb-sidebar-w);
	padding-top: 0;
	transition: margin-left 0.2s ease, transform 0.2s ease;
}

.main-sidebar .sidebar {
	padding: 0.75rem 0.75rem 2rem;
	height: auto;
	overflow-y: auto;
}

.nav-sidebar.nav-pills .nav-link {
	color: var(--bb-sidebar-text);
	border-radius: var(--bb-radius-sm);
	font-size: 0.875rem;
	font-weight: 500;
	margin: 0.1rem 0;
	padding: 0.55rem 0.7rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-sidebar.nav-pills .nav-link p {
	margin: 0;
	font-weight: 500;
}

.nav-sidebar.nav-pills .nav-link:hover {
	background: var(--bb-sidebar-hover) !important;
	color: var(--bb-text);
}

.nav-sidebar.nav-pills .nav-link.active,
.nav-sidebar.nav-pills .nav-item.active > .nav-link {
	background: var(--bb-sidebar-active) !important;
	color: var(--bb-primary) !important;
	box-shadow: none !important;
	font-weight: 600;
}

.nav-sidebar .nav-icon {
	color: var(--bb-text-subtle);
	font-size: 0.9rem;
	width: 1.1rem;
	text-align: center;
	margin-right: 0;
}

.nav-sidebar .nav-link.active .nav-icon,
.nav-sidebar .nav-item.active > .nav-link .nav-icon {
	color: var(--bb-primary);
}

.nav-sidebar .nav-header {
	color: var(--bb-text-subtle);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 1rem 0.7rem 0.35rem;
	margin: 0;
}

.nav-sidebar .nav-treeview {
	background: transparent;
	padding-left: 0.5rem;
}

.nav-sidebar .nav-treeview .nav-link {
	font-weight: 400;
	font-size: 0.84rem;
	color: var(--bb-sidebar-muted);
	padding: 0.45rem 0.7rem;
}

.nav-sidebar .nav-treeview .nav-link:hover {
	color: var(--bb-text);
}

.nav-sidebar .nav-treeview .nav-link.active {
	color: var(--bb-primary) !important;
	background: transparent !important;
}

.nav-sidebar .right.fa-angle-left {
	font-size: 0.75rem;
	color: var(--bb-text-subtle);
	margin-left: auto;
}

.sidebar .user-panel {
	display: none;
}

/* Keep the mobile off-canvas behaviour working.
   AdminLTE owns mobile sidebar behaviour via the sidebar-collapse / sidebar-open
   classes on <body>. The legacy main.css only handled `.sidebar-open`, so a
   collapsed body left the sidebar visible and laid out inline (taking up half
   the screen). We restore a proper off-canvas drawer here. */
@media (max-width: 991.98px) {
	.main-sidebar {
		position: fixed !important;
		top: var(--bb-header-h) !important;
		height: calc(100vh - var(--bb-header-h)) !important;
		width: var(--bb-sidebar-w) !important;
		max-width: 85vw;
		background: var(--bb-surface) !important;
		box-shadow: none !important;
		z-index: 1038;
		overflow-y: auto;
		transition: transform 0.2s ease !important;
	}

	/* Hidden by default on mobile */
	.main-sidebar,
	.sidebar-mini.sidebar-collapse .main-sidebar {
		transform: translateX(-100%);
		margin-left: 0 !important;
	}

	/* Visible when opened */
	.sidebar-mini.sidebar-open .main-sidebar,
	.main-sidebar.sidebar-open,
	body.sidebar-open .main-sidebar {
		transform: translateX(0);
	}

	/* Dim the page behind the open drawer */
	.main-sidebar::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(17, 24, 39, 0.45);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s ease;
	}

	.sidebar-mini.sidebar-open .main-sidebar::before,
	.main-sidebar.sidebar-open::before {
		opacity: 1;
		pointer-events: auto;
	}

	/* Content takes the full width on mobile */
	.content-wrapper,
	.sidebar-mini.sidebar-collapse .content-wrapper,
	.sidebar-mini.sidebar-open .content-wrapper {
		margin-left: 0 !important;
	}
}

/* --------------------------------------------------------------------------
   Cards / panels
   -------------------------------------------------------------------------- */

.card {
	background: var(--bb-surface);
	border: 1px solid var(--bb-border);
	border-radius: var(--bb-radius);
	box-shadow: var(--bb-shadow-sm);
	margin-bottom: 1.25rem;
}

.card.card-outline {
	border-top-width: 1px;
	border-top-color: var(--bb-border);
}

.card.card-primary,
.card.card-outline.card-primary {
	border-top-color: var(--bb-border);
}

.card-header {
	background: var(--bb-surface);
	border-bottom: 1px solid var(--bb-border);
	padding: 0.9rem 1.15rem;
	border-top-left-radius: var(--bb-radius);
	border-top-right-radius: var(--bb-radius);
}

.card-header .card-title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--bb-text);
}

.card-body {
	padding: 1.15rem;
}

.card-footer {
	background: #fcfcfd;
	border-top: 1px solid var(--bb-border);
	padding: 0.75rem 1.15rem;
}

/* Legacy boxed panels */
.box,
.portlet {
	background: var(--bb-surface);
	border: 1px solid var(--bb-border) !important;
	border-radius: var(--bb-radius);
	box-shadow: var(--bb-shadow-sm) !important;
}

.box-header {
	border-bottom: 1px solid var(--bb-border);
}

/* Small info / stat box */
.small-box {
	border-radius: var(--bb-radius);
	box-shadow: var(--bb-shadow-sm);
	overflow: hidden;
}

.small-box .inner h3 {
	font-weight: 650;
}

.info-box {
	border-radius: var(--bb-radius);
	box-shadow: var(--bb-shadow-sm);
	background: var(--bb-surface);
	min-height: 4.5rem;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

label,
.col-form-label,
.control-label {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--bb-text);
	margin-bottom: 0.3rem;
}

.form-control,
select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
textarea {
	background: var(--bb-surface) !important;
	border: 1px solid var(--bb-border-strong) !important;
	border-radius: var(--bb-radius-sm) !important;
	color: var(--bb-text) !important;
	font-size: 0.875rem !important;
	padding: 0.45rem 0.7rem !important;
	height: auto !important;
	min-height: 2.375rem;
	box-shadow: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	max-width: none;
}

.form-control:focus,
select:focus,
input:focus,
textarea:focus {
	border-color: var(--bb-primary) !important;
	box-shadow: 0 0 0 3px var(--bb-primary-soft) !important;
	outline: none !important;
}

.form-control:disabled,
.form-control[readonly],
input:disabled,
select:disabled {
	background: #f3f4f6 !important;
	color: var(--bb-text-muted) !important;
}

.form-control::placeholder,
input::placeholder {
	color: var(--bb-text-subtle);
}

.input-group-text {
	background: #f9fafb;
	border: 1px solid var(--bb-border-strong);
	border-radius: var(--bb-radius-sm);
	color: var(--bb-text-muted);
	font-size: 0.8125rem;
}

/* Keep the existing width guardrails but with modern values */
.bb-constrained-form .form-control,
.bb-constrained-form select.form-control,
.content-wrapper .card-body .form-group.row > [class*="col-"] > .form-control,
.content-wrapper .card-body .form-group.row > [class*="col-"] > select.form-control,
.content-wrapper table.playsms-table:not(.playsms-table-list) tbody td input,
.content-wrapper table.playsms-table:not(.playsms-table-list) tbody td select,
.content-wrapper table.playsms-table:not(.playsms-table-list) tbody td textarea {
	max-width: 32rem;
}

.bb-constrained-form textarea.form-control,
.content-wrapper .card-body .form-group.row > [class*="col-"] > textarea.form-control,
.content-wrapper table.playsms-table:not(.playsms-table-list) tbody td textarea {
	max-width: 42rem;
}

.search_form_box .form-control,
.bb-search-form-row .form-control,
div.dataTables_filter input,
div.dataTables_length select,
.phonebook-contact-groups .form-check-input {
	max-width: none;
}

/* Custom checkboxes / radios */
.form-check-input,
input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--bb-primary);
	width: 1rem;
	height: 1rem;
	min-height: 0;
	margin-top: 0.2rem;
}

.form-check-label {
	font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn,
input[type="button"],
input[type="submit"],
input.button,
button.button,
.btn-default {
	border-radius: var(--bb-radius-sm) !important;
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
	padding: 0.44rem 0.9rem !important;
	line-height: 1.35 !important;
	box-shadow: var(--bb-shadow-sm) !important;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	text-shadow: none !important;
}

.btn-sm,
.btn-group-sm > .btn {
	padding: 0.3rem 0.65rem !important;
	font-size: 0.78rem !important;
}

.btn-primary,
input[type="submit"],
input[type="button"],
input.button,
button.button {
	background-color: var(--bb-primary) !important;
	border: 1px solid var(--bb-primary) !important;
	color: #fff !important;
}

.btn-primary:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input.button:hover,
button.button:hover {
	background-color: var(--bb-primary-hover) !important;
	border-color: var(--bb-primary-hover) !important;
}

.btn-success {
	background-color: var(--bb-accent) !important;
	border-color: var(--bb-accent) !important;
	color: #fff !important;
}

.btn-success:hover {
	background-color: var(--bb-accent-hover) !important;
	border-color: var(--bb-accent-hover) !important;
}

.btn-info {
	background-color: #0891b2 !important;
	border-color: #0891b2 !important;
	color: #fff !important;
}

.btn-info:hover {
	background-color: #0e7490 !important;
	border-color: #0e7490 !important;
}

.btn-warning {
	background-color: var(--bb-warning) !important;
	border-color: var(--bb-warning) !important;
	color: #fff !important;
}

.btn-warning:hover {
	background-color: #b45309 !important;
	border-color: #b45309 !important;
}

.btn-danger,
input[value="Delete"],
input[value="Remove"] {
	background-color: var(--bb-danger) !important;
	border-color: var(--bb-danger) !important;
	color: #fff !important;
}

.btn-danger:hover,
input[value="Delete"]:hover {
	background-color: #b91c1c !important;
	border-color: #b91c1c !important;
}

.btn-default,
.btn-secondary,
.btn-light {
	background-color: var(--bb-surface) !important;
	border: 1px solid var(--bb-border-strong) !important;
	color: var(--bb-text) !important;
}

.btn-default:hover,
.btn-secondary:hover,
.btn-light:hover {
	background-color: var(--bb-sidebar-hover) !important;
	color: var(--bb-text) !important;
}

.btn-link {
	box-shadow: none !important;
	color: var(--bb-primary) !important;
}

.btn:focus,
.btn:active {
	box-shadow: 0 0 0 3px var(--bb-primary-soft) !important;
}

.btn i,
.btn .fas,
.btn .far {
	margin-right: 0.3rem;
}

.btn i:only-child {
	margin-right: 0;
}

/* Icon-only action buttons in tables */
table.playsms-table-list tbody td a.btn {
	border-radius: var(--bb-radius-sm) !important;
	min-width: 2rem;
	padding: 0.28rem 0.5rem !important;
}

.bb-page-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-bottom: 1rem;
}

.bb-page-toolbar .btn,
.bb-page-toolbar a.button {
	margin: 0 !important;
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.table {
	color: var(--bb-text);
	font-size: 0.875rem;
	margin-bottom: 0;
}

.table thead th,
table.playsms-table-list thead th,
table.playsms-table thead th {
	background: #fcfcfd;
	border-bottom: 1px solid var(--bb-border) !important;
	border-top: none !important;
	color: var(--bb-text-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 0.65rem 0.9rem;
	white-space: nowrap;
}

.table td,
.table th {
	border-top: 1px solid var(--bb-border);
	padding: 0.7rem 0.9rem !important;
	vertical-align: middle;
}

.table-hover tbody tr:hover {
	background-color: #fafafa;
}

.table-striped tbody tr:nth-of-type(odd) {
	background-color: #fcfcfd;
}

.table-bordered,
.table-bordered td,
.table-bordered th {
	border-color: var(--bb-border) !important;
}

table.playsms-table-list,
table.playsms-table {
	background: var(--bb-surface);
	border: 1px solid var(--bb-border);
	border-radius: var(--bb-radius);
	overflow: hidden;
}

table.playsms-table:not(.playsms-table-list) td.label-sizer,
table.playsms-table:not(.playsms-table-list) td:first-child {
	color: var(--bb-text-muted);
	font-weight: 500;
}

/* DataTables */
.dataTables_wrapper {
	font-size: 0.875rem;
}

div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
	border: 1px solid var(--bb-border-strong) !important;
	border-radius: var(--bb-radius-sm) !important;
	padding: 0.35rem 0.6rem !important;
	min-height: 2.25rem;
}

div.dataTables_wrapper div.dataTables_info,
div.dataTables_wrapper div.dataTables_length,
div.dataTables_wrapper div.dataTables_filter {
	color: var(--bb-text-muted);
	font-size: 0.8125rem;
	padding: 0.75rem;
}

.page-link,
.paginate_button .page-link {
	border: 1px solid var(--bb-border);
	border-radius: var(--bb-radius-sm) !important;
	color: var(--bb-text);
	margin: 0 2px;
	font-size: 0.8125rem;
}

.page-item.active .page-link,
.paginate_button.current {
	background: var(--bb-primary) !important;
	border-color: var(--bb-primary) !important;
	color: #fff !important;
}

/* playsms nav bar pagination */
.playsms-nav-bar a,
.playsms-nav-bar u {
	display: inline-block;
	padding: 0.25rem 0.55rem;
	margin: 0 2px;
	border: 1px solid var(--bb-border);
	border-radius: var(--bb-radius-sm);
	color: var(--bb-text);
	text-decoration: none;
	font-size: 0.8125rem;
	background: var(--bb-surface);
}

.playsms-nav-bar u {
	background: var(--bb-primary);
	border-color: var(--bb-primary);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
}

.playsms-nav-bar a:hover {
	background: var(--bb-sidebar-hover);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Badges / labels / alerts
   -------------------------------------------------------------------------- */

.badge,
.label {
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 0.28em 0.65em;
}

.badge-success,
.label-success {
	background: #dcfce7 !important;
	color: #15803d !important;
}

.badge-danger,
.label-danger {
	background: #fee2e2 !important;
	color: #b91c1c !important;
}

.badge-warning,
.label-warning {
	background: #fef3c7 !important;
	color: #b45309 !important;
}

.badge-info,
.label-info {
	background: #cffafe !important;
	color: #0e7490 !important;
}

.badge-primary,
.label-primary {
	background: var(--bb-primary-soft) !important;
	color: var(--bb-primary) !important;
}

.badge-secondary,
.label-default {
	background: #f3f4f6 !important;
	color: var(--bb-text-muted) !important;
}

.alert {
	border: 1px solid var(--bb-border);
	border-radius: var(--bb-radius);
	font-size: 0.875rem;
	box-shadow: var(--bb-shadow-sm);
}

.alert-info {
	background: #eff6ff;
	border-color: #bfdbfe;
	color: #1e40af;
}

.alert-success {
	background: #f0fdf4;
	border-color: #bbf7d0;
	color: #15803d;
}

.alert-warning {
	background: #fffbeb;
	border-color: #fde68a;
	color: #b45309;
}

.alert-danger {
	background: #fef2f2;
	border-color: #fecaca;
	color: #b91c1c;
}

/* Keep legacy colored icons legible inside colored buttons */
.btn .text-green,
.btn .text-red,
.btn .text-blue,
.btn .text-aqua,
.btn .text-navy,
.btn .text-orange,
.btn .text-gray,
.btn .text-yellow {
	color: inherit !important;
}

/* --------------------------------------------------------------------------
   Modals / dropdowns / tooltips
   -------------------------------------------------------------------------- */

.modal-content {
	border: 1px solid var(--bb-border);
	border-radius: var(--bb-radius);
	box-shadow: var(--bb-shadow-md);
}

.modal-header {
	border-bottom: 1px solid var(--bb-border);
	padding: 1rem 1.15rem;
}

.modal-title {
	font-size: 1rem;
	font-weight: 600;
}

.modal-footer {
	border-top: 1px solid var(--bb-border);
	padding: 0.85rem 1.15rem;
}

.dropdown-menu {
	border: 1px solid var(--bb-border);
	border-radius: var(--bb-radius);
	box-shadow: var(--bb-shadow-md);
	font-size: 0.875rem;
	padding: 0.3rem;
}

.dropdown-item {
	border-radius: var(--bb-radius-sm);
	padding: 0.4rem 0.6rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
	background: var(--bb-sidebar-hover);
	color: var(--bb-text);
}

.dropdown-divider {
	border-top-color: var(--bb-border);
}

.select2-container-multi .select2-choices {
	border: 1px solid var(--bb-border-strong) !important;
	border-radius: var(--bb-radius-sm) !important;
	background-image: none !important;
	min-height: 2.375rem !important;
	padding: 0.2rem 0.35rem;
}

.select2-container-multi .select2-choices .select2-search-choice {
	background: var(--bb-primary-soft) !important;
	border: 1px solid #c7dff2 !important;
	border-radius: var(--bb-radius-sm) !important;
	color: var(--bb-primary) !important;
	font-size: 0.8125rem;
	box-shadow: none !important;
	padding: 0.2rem 0.45rem 0.2rem 1.3rem;
}

.select2-results .select2-highlighted {
	background-color: var(--bb-primary) !important;
	color: #fff !important;
}

.select2-container .select2-choice {
	border: 1px solid var(--bb-border-strong) !important;
	border-radius: var(--bb-radius-sm) !important;
	height: 2.375rem;
	line-height: 2.25rem;
	background-image: none !important;
}

.bootstrap-datetimepicker-widget {
	border: 1px solid var(--bb-border) !important;
	border-radius: var(--bb-radius) !important;
	box-shadow: var(--bb-shadow-md) !important;
}

/* --------------------------------------------------------------------------
   Help panels (BulkBuys)
   -------------------------------------------------------------------------- */

.bb-page-help {
	background: var(--bb-surface);
	border: 1px solid var(--bb-border);
	border-left: 3px solid var(--bb-primary);
	border-radius: var(--bb-radius);
	box-shadow: var(--bb-shadow-sm);
	color: var(--bb-text-muted);
	font-size: 0.8125rem;
	line-height: 1.6;
	margin-bottom: 1.25rem;
	padding: 0.9rem 1.1rem 1rem;
}

.bb-page-help-title {
	color: var(--bb-text);
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.bb-page-help code {
	background: #f3f4f6;
	border-radius: var(--bb-radius-sm);
	color: var(--bb-text);
	font-size: 0.78rem;
	padding: 0.05rem 0.35rem;
}

.bb-page-help-example {
	background: #111827;
	border: 1px solid #1f2937;
	border-radius: var(--bb-radius-sm);
	color: #e5e7eb;
	font-size: 0.78rem;
}

/* Toast notifications */
#playsms-toast-container .playsms-toast {
	border: 1px solid var(--bb-border);
	border-radius: var(--bb-radius);
	box-shadow: var(--bb-shadow-md);
	overflow: hidden;
}

#playsms-toast-container .playsms-toast .toast-header {
	font-size: 0.8125rem;
	font-weight: 600;
	border-bottom: none;
}

#playsms-toast-container .playsms-toast .toast-body {
	color: var(--bb-text);
	font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   Login page (auth_login.html + auth_forgot/register share these classes)
   -------------------------------------------------------------------------- */

.bb-auth-page {
	background: var(--bb-bg);
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2.5rem 1rem;
}

.bb-auth-page table,
.bb-auth-page tbody,
.bb-auth-page tr,
.bb-auth-page td {
	display: block;
	width: 100%;
}

.bb-auth-card {
	background: var(--bb-surface);
	border: 1px solid var(--bb-border);
	border-radius: 0.75rem;
	box-shadow: var(--bb-shadow-md);
	margin: 0 auto;
	max-width: 26rem;
	padding: 2rem 2rem 1.75rem;
	width: 100%;
}

.bb-auth-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
}

.bb-auth-brand img,
.bb-auth-brand .playsms-logo {
	height: 2.5rem;
	margin: 0;
	max-width: 12rem;
	object-fit: contain;
}

.bb-auth-title {
	font-size: 1.125rem;
	font-weight: 650;
	letter-spacing: -0.01em;
	margin: 0 0 0.25rem;
	text-align: center;
}

.bb-auth-subtitle {
	color: var(--bb-text-muted);
	font-size: 0.875rem;
	margin-bottom: 1.5rem;
	text-align: center;
}

.bb-auth-field {
	margin-bottom: 1rem;
}

.bb-auth-label {
	color: var(--bb-text);
	display: block;
	font-size: 0.8125rem;
	font-weight: 500;
	margin-bottom: 0.3rem;
}

.bb-auth-card .form-control {
	min-height: 2.6rem;
	font-size: 0.9rem !important;
}

.bb-auth-submit {
	width: 100%;
	background: var(--bb-primary) !important;
	border: 1px solid var(--bb-primary) !important;
	border-radius: var(--bb-radius-sm) !important;
	color: #fff !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	margin-top: 0.5rem;
	padding: 0.6rem 1rem !important;
	width: 100% !important;
}

.bb-auth-submit:hover {
	background: var(--bb-primary-hover) !important;
	border-color: var(--bb-primary-hover) !important;
}

.bb-auth-links {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--bb-border);
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	text-align: center;
}

.bb-auth-links a {
	color: var(--bb-text-muted);
	font-size: 0.8125rem;
	text-decoration: none;
}

.bb-auth-links a:hover {
	color: var(--bb-primary);
	text-decoration: underline;
}

.bb-auth-captcha {
	margin: 1rem 0 0.5rem;
	display: flex;
	justify-content: center;
}

@media (max-width: 480px) {
	.bb-auth-card {
		padding: 1.5rem 1.25rem;
	}
}

/* Login page: the workspace theme wraps auth pages in the full shell */
.bb-auth-page .wrapper,
.bb-auth-noshell .wrapper {
	background: var(--bb-bg);
}

/* --------------------------------------------------------------------------
   Utility tweaks onto AdminLTE defaults
   -------------------------------------------------------------------------- */

.elevation-1,
.elevation-2,
.elevation-3,
.elevation-4 {
	box-shadow: var(--bb-shadow-sm) !important;
}

.bg-primary {
	background-color: var(--bb-primary) !important;
}

.text-primary {
	color: var(--bb-primary) !important;
}

.progress {
	background: #f3f4f6;
	border-radius: 999px;
	height: 0.5rem;
}

.progress-bar {
	background-color: var(--bb-primary);
}

/* --------------------------------------------------------------------------
   Header action row: keep it on one line at every width.
   There are up to 5 action buttons plus credit/Sender ID, which otherwise
   wrap onto several rows and make the header very tall (and on mobile eat
   the top of the viewport). Let the button row scroll horizontally instead.
   -------------------------------------------------------------------------- */

.main-header.navbar {
	flex-wrap: nowrap;
	overflow: hidden;
}

.main-header .navbar-nav {
	flex-wrap: nowrap;
	min-width: 0;
}

.main-header .bb-header-compose-group {
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	max-width: 100%;
	padding-bottom: 1px;
}

.main-header .bb-header-compose-group::-webkit-scrollbar {
	display: none;
}

.main-header .bb-header-compose-group .btn {
	flex: 0 0 auto;
}

/* Mobile: hide the Sender ID to save horizontal room */
@media (max-width: 991.98px) {
	.main-header .bb-header-sender-id {
		display: none;
	}

	.main-header .bb-header-account-credit {
		font-size: 0.75rem;
		padding: 0.35rem 0.5rem;
	}
}

/* Very small screens: shorten the credit label to just the balance */
@media (max-width: 575.98px) {
	.main-header .bb-header-account-credit .bb-credit-sms-estimate {
		display: none;
	}
}

/* Mobile spacing */
@media (max-width: 768px) {
	.content-wrapper {
		padding: 1rem 0.9rem 2rem;
	}

	.main-header.navbar {
		padding: 0.5rem 0.75rem;
	}

	.bb-auth-card {
		box-shadow: none;
		border-radius: var(--bb-radius);
	}
}

/* --------------------------------------------------------------------------
   Phase 2 — page-level surfaces
   -------------------------------------------------------------------------- */

/* Search / filter panels should read as subtle inset bars, not heavy boxes */
.search_form_box,
.bb-search-form-row {
	background: #fcfcfd;
	border: 1px solid var(--bb-border);
	border-radius: var(--bb-radius);
	padding: 0.85rem 1rem;
	margin-bottom: 1.15rem;
}

.search_form_box .bb-search-label,
.bb-search-form-row .bb-search-label {
	color: var(--bb-text-muted);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	margin-bottom: 0.35rem;
}

/* Compose SMS: make the message box and metadata feel deliberate */
#msg,
textarea[name="message"],
textarea#message {
	border-radius: var(--bb-radius-sm);
	font-size: 0.9rem !important;
	line-height: 1.5;
	min-height: 9rem;
}

#msg_counter,
.playsms-msg-counter {
	color: var(--bb-text-muted);
	font-size: 0.78rem;
}

/* Compose page helper chips (#MYGROUP etc.) */
.bb-compose-group-btn,
.compose_group_btn,
a.bb-page-btn.bb-compose-group {
	border-radius: 999px !important;
	font-size: 0.75rem !important;
	padding: 0.22rem 0.7rem !important;
}

/* Report / inbox split view */
.bb-mailbox-conv-messages {
	background: #f9fafb;
	border: 1px solid var(--bb-border);
	border-radius: var(--bb-radius);
}

.bb-conv-bubble {
	border-radius: 0.9rem;
	box-shadow: var(--bb-shadow-sm);
	font-size: 0.85rem;
}

.bb-conv-bubble.bb-conv-in {
	background: var(--bb-surface);
	border: 1px solid var(--bb-border);
}

.bb-conv-bubble.bb-conv-out {
	background: var(--bb-primary-soft);
	border: 1px solid #c7dff2;
}

.bb-conv-meta {
	color: var(--bb-text-subtle);
	font-size: 0.68rem;
}

/* Active / selected rows in mailbox lists */
.bb-mailbox-layout tr.bb-mailbox-thread.table-active {
	background-color: var(--bb-primary-soft);
}

.bb-mailbox-layout .mailbox-date,
.bb-mailbox-layout .mailbox-subject {
	color: var(--bb-text-muted);
}

.bb-mailbox-layout tr.bb-mailbox-thread-unread .mailbox-subject {
	color: var(--bb-text);
}

/* Phonebook group code chips */
#phonebook_group_list_table .phonebook-group-code {
	background: #f3f4f6;
	border-radius: var(--bb-radius-sm);
	color: var(--bb-text);
	font-size: 0.8rem;
	padding: 0.15rem 0.45rem;
}

/* Account settings / preferences tables (label column) */
table.playsms-table:not(.playsms-table-list) td.label-sizer {
	color: var(--bb-text-muted);
	font-size: 0.8125rem;
	font-weight: 500;
	width: 28%;
}

/* Keep long report previews readable */
.report-outgoing-preview,
.report-incoming-preview {
	color: var(--bb-text);
}

/* Sidebar tree chevron rotation on open */
.nav-sidebar .menu-open > .nav-link .right.fa-angle-left {
	transform: rotate(-90deg);
	transition: transform 0.2s ease;
}

/* Empty-state text */
.table tbody td .text-muted,
.py-4.text-muted {
	color: var(--bb-text-muted) !important;
}