/* System-wide typeface: Arial everywhere (Bootstrap/AdminLTE read these vars). */
:root,
[data-bs-theme] {
	--bs-font-sans-serif: Arial, Helvetica, sans-serif;
	--bs-body-font-family: Arial, Helvetica, sans-serif;
}

html,
body,
button,
input,
select,
textarea,
.sophia-admin,
.sweetalert2-popup,
.swal2-popup,
.ui-widget,
.ui-dialog,
.dataTables_wrapper,
.select2-container {
	font-family: Arial, Helvetica, sans-serif;
}

/* Small stock AdminLTE4 tweaks, same as the swarm app's theme.css. */
.small-box-icon {
	opacity: .35;
}

code {
	word-break: break-all;
}

:root {
	/* Stock Bootstrap 5 / AdminLTE4 tokens - no custom brand palette, matching
	   the swarm app's plain admin-lte@4 look instead of a branded skin. */
	--brand-navy: #212529;
	--brand-teal: #0d6efd;
	--brand-teal-dark: #0b5ed7;
	--brand-amber: #ffc107;
	--body-bg: #f3f8f9;
	--body-fg: #000000;
	--card-bg: #ffffff;
	--card-border: #d8e5e8;
	--card-header-bg: #f8fafc;
	--card-header-gradient-end: #eef6f7;
	--row-alt-bg: #eef8f9;
	--muted-fg: #637481;
	--accent: var(--brand-teal);
	--accent-hover: var(--brand-teal-dark);

	/* Django's own admin chrome (forms, tables, breadcrumbs) — keep its text true black too. */
	--body-quiet-color: #1a1a1a;
	--body-loud-color: #000000;
}

html[data-bs-theme="dark"] {
	--body-bg: #14181d;
	--body-fg: #ffffff;
	--card-bg: #1c2128;
	--card-border: #2d333b;
	--card-header-bg: #232931;
	--card-header-gradient-end: #1c2128;
	--row-alt-bg: #262c36;
	--muted-fg: #9aa4af;

	/* Keep Django's own admin chrome (forms, tables, breadcrumbs) in sync with the same toggle. */
	--primary: #264b5d;
	--primary-fg: #f7f7f7;
	--body-quiet-color: #e0e0e0;
	--body-loud-color: #ffffff;
	--breadcrumbs-link-fg: #e0e0e0;
	--breadcrumbs-bg: var(--primary);
	--link-fg: #81d4fa;
	--link-hover-color: #4ac1f7;
	--link-selected-fg: #6f94c6;
	--hairline-color: #272727;
	--border-color: #353535;
	--error-fg: #e35f5f;
	--message-success-bg: #006b1b;
	--message-warning-bg: #583305;
	--message-error-bg: #570808;
	--darkened-bg: #212121;
	--selected-bg: #1b1b1b;
	--selected-row: #00363a;
	--close-button-bg: #333333;
	--close-button-hover-bg: #666666;
}

html,
body.sophia-admin,
.sophia-admin .app-wrapper {
	min-height: 100%;
}

body.sophia-admin {
	background: var(--body-bg);
	color: var(--body-fg);
	font-size: 0.9375rem;
}

.sophia-admin a {
	text-decoration: none;
}

.sophia-admin .app-wrapper {
	min-width: 0;
}

.sophia-admin #header {
	align-items: center;
	border-bottom: 1px solid var(--card-border);
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	min-height: 4rem;
	padding: 0.65rem 1rem;
}

.sophia-admin .navbar-nav,
.sophia-admin .navbar-nav li,
.sophia-admin .dropdown-menu,
.sophia-admin .dropdown-menu li {
	list-style: none;
}

.sophia-admin #header .nav-link {
	align-items: center;
	display: flex;
	gap: 0.35rem;
	padding: 0.4rem 0.6rem;
	border: 1px solid transparent;
	border-radius: 0.5rem;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sophia-admin #header .nav-link:hover,
.sophia-admin #header .nav-link:focus,
.sophia-admin #header .nav-link.show {
	background: var(--card-header-bg);
	border-color: var(--card-border);
}

.sophia-admin #header .nav-link > i {
	font-size: 1.2rem;
	line-height: 1;
}

.sophia-admin #header .sophia-caret {
	font-size: 0.7rem !important;
	opacity: 0.7;
	margin-left: 0.15rem;
}

/* Dropdown menus — bigger, evenly spaced icons and a clear visual hierarchy. */
.sophia-admin .sophia-dropdown {
	padding: 0.5rem 0;
	border: 0;
	border-radius: 0.75rem;
	box-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.18);
}

.sophia-admin .sophia-dropdown .dropdown-header {
	padding: 0.35rem 1rem 0.5rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted-fg);
}

.sophia-admin .sophia-dropdown .dropdown-item {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.6rem 1rem;
	font-size: 0.9rem;
}

.sophia-admin .sophia-dropdown .dropdown-item > i:first-child {
	font-size: 1.1rem;
	width: 1.3rem;
	flex: 0 0 auto;
	text-align: center;
	color: var(--muted-fg);
}

.sophia-admin .sophia-dropdown .dropdown-item:hover > i:first-child,
.sophia-admin .sophia-dropdown .dropdown-item:focus > i:first-child {
	color: var(--accent);
}

.sophia-admin .sophia-dropdown .dropdown-item.active > i:first-child,
.sophia-admin .sophia-dropdown .dropdown-item[aria-pressed="true"] > i:first-child {
	color: var(--accent);
}

.sophia-admin .sophia-dropdown .sophia-dropdown-check {
	margin-left: auto;
	color: var(--accent);
}

.sophia-admin .sophia-dropdown .dropdown-item[aria-pressed="true"] .sophia-dropdown-check {
	display: inline-block !important;
}

.sophia-admin #sophia-logout-form {
	display: block;
	margin: 0;
}

.sophia-admin .sophia-dropdown .sophia-logout {
	color: #dc3545;
	width: 100%;
	border: 0;
	background: transparent;
	text-align: left;
}

.sophia-admin .sophia-dropdown .sophia-logout > i:first-child {
	color: #dc3545;
}

.sophia-admin .sophia-dropdown li:last-child {
	margin-bottom: 0.15rem;
}

.sophia-admin .sophia-operator-form .form-select {
	font-size: 0.85rem;
}

.sophia-admin .sophia-operator-form .form-label {
	color: var(--muted-fg);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.sophia-admin .sophia-operator-status-badge {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.65rem;
	border-radius: 0.5rem;
	background: rgba(255, 193, 7, 0.14);
	border: 1px solid rgba(255, 193, 7, 0.35);
}

.sophia-admin .sophia-operator-status-badge > i {
	font-size: 1.3rem;
	color: var(--brand-amber);
	flex: 0 0 auto;
}

.sophia-admin .sophia-operator-status-label {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--muted-fg);
}

.sophia-admin .sophia-operator-status-name {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--body-fg);
	word-break: break-word;
}

/* User menu — avatar-style header, matching AdminLTE4's profile dropdown pattern. */
.sophia-admin .sophia-user-dropdown {
	min-width: 17rem;
}

.sophia-admin .sophia-user-dropdown-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem 0.5rem;
}

.sophia-admin .sophia-user-avatar {
	font-size: 2.75rem;
	line-height: 1;
	color: var(--accent);
	flex: 0 0 auto;
}

.sophia-admin .sophia-user-name {
	font-weight: 700;
	font-size: 1rem;
	color: var(--body-fg);
}

.sophia-admin .sophia-user-meta {
	font-size: 0.8rem;
	color: var(--muted-fg);
}

.sophia-admin #user-tools {
	align-items: center;
	color: var(--body-fg);
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	justify-content: flex-end;
	margin-left: auto;
}

.sophia-admin #user-tools a,
.sophia-admin #user-tools button {
	color: var(--body-fg);
}

/* .dropdown-menu content sits in the DOM under #user-tools but renders popped-out on a
   theme-aware (not chrome) background, so it needs to win over the #user-tools a/button
   rule above despite that rule's ID selector -- !important is simpler and more reliably
   supported than scoping #user-tools a with :not(.dropdown-menu *). */
.sophia-admin .sophia-dropdown .dropdown-item {
	color: var(--body-fg) !important;
}

.sophia-admin #user-tools a:hover:not(.dropdown-menu *),
.sophia-admin #user-tools button:hover:not(.dropdown-menu *) {
	color: var(--brand-teal);
}

.sophia-admin #user-tools > li > form {
	display: inline-flex;
	margin: 0;
}

.sophia-admin #user-tools > li > button {
	background: transparent;
	border: 0;
	padding: 0;
}

.sophia-admin .dropdown-menu .sophia-operator-form {
	min-width: 14rem;
}

.sophia-admin .sidebar-brand .sophia-brand-icon {
	background: #fff;
	border-radius: 0.5rem;
	flex: 0 0 auto;
	height: 2.25rem;
	object-fit: contain;
	padding: 0.2rem;
	width: 2.25rem;
}

.sophia-admin .sidebar-brand .brand-text {
	line-height: 1.2;
}

.sophia-admin .sidebar-brand .sophia-brand-subtitle {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.7rem;
	font-weight: 400;
	white-space: nowrap;
}

.sophia-admin #nav-sidebar {
	border-right: 0;
	overflow: auto;
	padding: 0.5rem 0.45rem 0.75rem;
}

/* #nav-sidebar is a position:sticky CSS Grid item; Chromium keeps its rendered box at
   the item's specified width even when min-width/max-width are collapsed to 0 (only the
   "auto" grid track responds to that, so the box would overflow the now-empty track).
   So min/max-width still needs to collapse to reclaim the grid track for the main content,
   but the actual hide/show has to happen via transform, which Chromium reliably honors. */
#nav-sidebar {
	transition: min-width 0.28s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.sidebar-collapse:not(.sidebar-mini) #nav-sidebar {
	min-width: 0 !important;
	max-width: 0 !important;
	transform: translateX(-100%);
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
}

.sophia-admin .toggle-nav-sidebar {
	color: var(--brand-amber);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 23px;
	order: 2;
}

.sophia-admin .toggle-nav-sidebar:hover,
.sophia-admin .toggle-nav-sidebar:focus {
	background: rgba(255, 255, 255, 0.08);
}

.sophia-admin .sophia-sidebar-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.sophia-admin .sophia-sidebar-menu,
.sophia-admin .sophia-sidebar-menu ul,
.sophia-admin .sophia-sidebar-menu li {
	list-style: none;
	width: 100%;
}

.sophia-admin .sophia-dashboard-link,
.sophia-admin .sophia-app-link,
.sophia-admin .sophia-model-link {
	align-items: center;
	border-radius: 0.75rem;
	box-sizing: border-box;
	color: #e5e7eb;
	display: flex;
	min-height: 2.75rem;
	padding: 0.65rem 0.8rem;
	width: 100%;
}

.sophia-admin .sophia-model-link {
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: left;
}

.sophia-admin .sophia-dashboard-link,
.sophia-admin .sophia-app-link {
	gap: 0.65rem;
	font-weight: 600;
	margin: 0;
}

.sophia-admin .sophia-model-link {
	gap: 0.55rem;
	margin: 0;
	min-height: 2.45rem;
	padding-left: 0.9rem;
}

.sophia-admin .sophia-dashboard-link:hover,
.sophia-admin .sophia-dashboard-link:focus,
.sophia-admin .sophia-app-link:hover,
.sophia-admin .sophia-app-link:focus,
.sophia-admin .sophia-model-link:hover,
.sophia-admin .sophia-model-link:focus {
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}

.sophia-admin .sophia-dashboard-link.active,
.sophia-admin .sophia-app-link.active,
.sophia-admin .sophia-app.current-app > .sophia-app-link {
	background: var(--brand-teal);
	color: #fff;
}

.sophia-admin .sophia-app {
	margin: 0.1rem 0 0.25rem;
}

.sophia-admin .sophia-app > .nav-link {
	position: relative;
}

.sophia-admin .sophia-app > .nav-link .nav-arrow {
	margin-left: auto;
}

.sophia-admin .sophia-model-list {
	margin: 0.1rem 0 0.3rem;
	padding: 0;
}

.sophia-admin .sophia-settings-menu .sophia-model-list .sophia-model-list {
	padding-left: 0.75rem;
}

.sophia-admin .sophia-model-link.disabled {
	color: rgba(229, 231, 235, 0.45);
}

.sophia-admin .sophia-model.current-model > .sophia-model-link,
.sophia-admin .sophia-model-link.active {
	background: rgba(13, 110, 253, 0.28);
	color: #fff;
	font-weight: 600;
}

.sophia-admin #nav-sidebar .current-model,
.sophia-admin #nav-sidebar .current-app {
	background: transparent;
}

.sophia-admin #nav-sidebar .current-model > .sophia-model-link,
.sophia-admin #nav-sidebar .current-model > .nav-link,
.sophia-admin #nav-sidebar .current-app > .sophia-app-link {
	background: rgba(13, 110, 253, 0.28);
	color: #fff;
}

.sophia-admin .sophia-sidebar-menu .nav-icon {
	color: #b8eef1;
	width: 1.5rem;
	font-size: 1.35rem;
	text-align: center;
	flex: 0 0 auto;
}

.sophia-admin .sophia-sidebar-menu .sophia-model-link .nav-icon {
	font-size: 1.35rem;
}

.sophia-admin .sophia-sidebar-menu .nav-arrow {
	color: rgba(229, 231, 235, 0.65);
	margin-left: auto;
}

.sophia-admin .sophia-sidebar-menu .nav-link p {
	margin: 0;
}

.sophia-admin .sophia-sidebar-menu .nav-item,
.sophia-admin .sophia-sidebar-menu .nav-item > .nav-link,
.sophia-admin .sophia-sidebar-menu .nav-treeview {
	width: 100%;
}

.sophia-admin .sophia-sidebar-menu .nav-item.menu-open > .nav-link .nav-arrow,
.sophia-admin .sophia-sidebar-menu .nav-link.active .nav-arrow {
	color: #fff;
}

.sophia-admin .app-content {
	background: var(--body-bg);
	min-height: calc(100vh - 6.5rem);
	padding: 1rem 1.25rem 1.5rem;
}

.sophia-admin #content,
.sophia-admin #content-main {
	color: var(--body-fg);
}

.sophia-admin #content {
	display: block !important;
	opacity: 1 !important;
	padding: 0;
	visibility: visible !important;
}

.sophia-admin h1 {
	color: var(--body-fg);
	font-size: 1.8rem;
	font-weight: 600;
}

.sophia-admin .app-content-header {
	padding: 0.35rem 0 0.9rem;
}

.sophia-admin .app-content-header .container-fluid {
	position: relative;
}

.sophia-admin .app-content-header h1 {
	color: var(--body-fg);
	font-size: 1.8rem;
}

.sophia-admin .breadcrumb {
	font-size: 0.875rem;
}

.sophia-dashboard-header,
.sophia-section-header {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
}

.sophia-dashboard-header {
	margin-bottom: 1.25rem;
}

.sophia-dashboard-header h2,
.sophia-section-header h3 {
	color: var(--body-fg);
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
}

.sophia-dashboard-header h2 {
	font-size: 1.8rem;
}

.sophia-section-header {
	margin: 0 0 0.75rem;
}

.sophia-section-header h3 {
	font-size: 1.2rem;
}

.sophia-kicker {
	color: var(--muted-fg);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0;
	margin: 0 0 0.2rem;
	text-transform: uppercase;
}

.sophia-module-card,
.sophia-widget-card,
.sophia-admin .module,
.sophia-admin fieldset.module,
.sophia-admin .inline-group,
.sophia-admin #changelist,
.sophia-admin .login #content-main {
	background: var(--card-bg) !important;
	border: 1px solid var(--card-border);
	border-radius: 0.75rem;
	box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.06);
	overflow: hidden;
}

.sophia-admin #changelist {
	padding: 1rem;
	position: relative;
}

.sophia-admin #changelist-filter {
	display: none;
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 17rem;
	max-height: calc(100% - 1rem);
	overflow-y: auto;
	z-index: 30;
	border: 1px solid var(--card-border) !important;
	border-radius: 0.65rem;
	box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.4);
}

.sophia-admin #changelist-filter.sophia-filter-open {
	display: block;
}

.sophia-admin .sophia-filter-toggle-btn {
	align-items: center;
	background: transparent;
	border: 1px solid var(--card-border);
	border-radius: 0.375rem;
	color: var(--body-fg);
	display: inline-flex;
	gap: 0.4rem;
	font-weight: 600;
}

.sophia-admin .sophia-filter-toggle-btn:hover,
.sophia-admin .sophia-filter-toggle-btn:focus,
.sophia-admin .sophia-filter-toggle-btn[aria-expanded="true"] {
	background: var(--row-alt-bg);
	color: var(--body-fg);
}

.sophia-admin .sophia-filter-toggle-btn.sophia-filter-active {
	border-color: var(--brand-amber);
	color: var(--brand-amber);
}

.sophia-admin .sophia-filter-toggle-standalone {
	position: absolute;
	right: 0;
	top: 0.35rem;
}

.sophia-module-card .card-header,
.sophia-widget-card .card-header,
.sophia-admin .module h2,
.sophia-admin .module caption,
.sophia-admin .inline-group h2 {
	align-items: center;
	background: var(--card-header-bg);
	border-bottom: 1px solid var(--card-border);
	color: var(--body-fg);
	display: flex;
	font-size: 0.95rem;
	font-weight: 600;
	min-height: 3.25rem;
	padding: 0.85rem 1rem;
}

.sophia-module-card .card-title,
.sophia-widget-card .card-title {
	color: var(--body-fg);
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
}

.sophia-model-row {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	min-height: 4rem;
}

.sophia-model-title a,
.sophia-model-title span {
	color: var(--body-fg);
	font-weight: 600;
}

.sophia-model-title a:hover {
	color: var(--accent);
}

.sophia-model-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: flex-end;
}

.sophia-admin .sophia-model-actions .btn {
	align-items: center;
	border-radius: 0.375rem;
	display: inline-flex;
	font-weight: 700;
	gap: 0.35rem;
	min-height: 2rem;
}

.sophia-admin .sophia-model-actions .btn-outline-primary {
	background: var(--brand-teal);
	border-color: var(--brand-teal);
	color: #fff !important;
}

.sophia-admin .sophia-model-actions .btn-outline-primary:hover,
.sophia-admin .sophia-model-actions .btn-outline-primary:focus {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	color: #fff !important;
}

.sophia-admin .sophia-model-actions .btn-outline-secondary {
	background: var(--brand-navy);
	border-color: var(--brand-navy);
	color: #fff !important;
}

.sophia-admin .sophia-model-actions .btn-outline-secondary:hover,
.sophia-admin .sophia-model-actions .btn-outline-secondary:focus {
	background: #1c1f23;
	border-color: #1c1f23;
	color: #fff !important;
}

.sophia-admin .small-box .inner span {
	display: block;
	font-size: 0.82rem;
	opacity: 0.82;
}

.sophia-status-row {
	align-items: center;
	border-bottom: 1px solid var(--card-border);
	display: flex;
	justify-content: space-between;
	padding: 0.7rem 0;
}

.sophia-status-row:first-child {
	padding-top: 0;
}

.sophia-status-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.sophia-attention-row,
.sophia-service-link {
	align-items: center;
	color: var(--body-fg);
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	font-weight: 600;
}

.sophia-attention-row span,
.sophia-service-link span {
	align-items: center;
	color: var(--body-fg);
	display: inline-flex;
	gap: 0.55rem;
}

.sophia-attention-row i,
.sophia-service-link i {
	color: var(--brand-teal);
}

.sophia-attention-row .badge,
.sophia-attention-row > strong,
.sophia-attention-row > span:last-child,
.sophia-service-link > i:last-child {
	color: var(--brand-teal-dark) !important;
	font-weight: 800;
}

.sophia-admin a.sophia-service-link:link,
.sophia-admin a.sophia-service-link:visited {
	color: var(--body-fg) !important;
}

.sophia-admin a.sophia-service-link:hover,
.sophia-admin a.sophia-service-link:focus {
	background: rgba(13, 110, 253, 0.08);
	color: var(--brand-teal-dark) !important;
}

.sophia-admin a.sophia-service-link:hover span,
.sophia-admin a.sophia-service-link:focus span {
	color: var(--brand-teal-dark);
}

.sophia-admin table {
	border-collapse: collapse;
}

.sophia-admin thead th {
	background: var(--card-header-bg);
	color: var(--body-fg);
	font-weight: 600;
}

.sophia-admin #changelist table thead th,
.sophia-admin #changelist table thead th .text a:link,
.sophia-admin #changelist table thead th .text a:visited,
.sophia-admin #changelist table thead th .text a:hover,
.sophia-admin #changelist table thead th .text a:focus,
.sophia-admin #changelist table thead th:hover {
	background: var(--card-header-bg) !important;
	color: var(--body-fg) !important;
}

/* Scoped to the title link (inside .text) only -- a plain "th a" selector here would
   also match the tiny sortremove/toggle icon links inside .sortoptions and wreck their
   sizing (they'd stack into a tall block instead of sitting inline as 14px icons), and
   the background shorthand above would wipe out their sprite background-image too. */
.sophia-admin #changelist table thead th .text a {
	display: block;
	padding: 0.65rem 0.75rem;
	text-decoration: none;
}

.sophia-admin #changelist table thead th .sortoptions {
	display: none;
}

.sophia-admin #changelist table thead th.sorted .text {
	padding-right: 0;
}

.sophia-admin #changelist table thead th.sorted {
	background: var(--row-alt-bg) !important;
}

.sophia-admin #changelist table thead th.sorted:hover,
.sophia-admin #changelist table thead th.sorted .text a:hover,
.sophia-admin #changelist table thead th.sorted .text a:focus {
	background: var(--row-alt-bg) !important;
}

.sophia-admin #changelist .dataTables_wrapper {
	padding-top: 0.25rem;
}

.sophia-admin #changelist .dataTables_wrapper .dt-toolbar,
.sophia-admin #changelist .dataTables_wrapper .dt-footer {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: space-between;
}

.sophia-admin #changelist .dataTables_wrapper .dt-footer .dt-footer-left,
.sophia-admin #changelist .dataTables_wrapper .dt-footer .dt-footer-right {
	align-items: center;
	display: flex;
	gap: 0.5rem;
}

.sophia-admin #changelist .dataTables_wrapper .dt-footer .dt-footer-right {
	margin-left: auto;
}

.sophia-admin #changelist .dataTables_wrapper .dt-footer .dt-footer-right .dt-footer-summary {
	color: var(--body-fg);
	font-size: 0.95rem;
	font-weight: 500;
	white-space: nowrap;
}

.sophia-admin #changelist .dataTables_wrapper .dt-footer .dt-footer-actions {
	align-items: center;
	display: flex;
	gap: 0.5rem;
	flex: 0 0 auto;
}

.sophia-admin #changelist .dataTables_wrapper .dt-footer .dt-footer-actions .actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	width: auto;
}

.sophia-admin #changelist-form .actions {
	display: none;
}

.sophia-admin #changelist .actions {
	background: var(--card-bg);
}

.sophia-admin #changelist .actions label.sophia-action-label,
.sophia-admin #changelist .dataTables_wrapper .dt-footer .dt-footer-actions .actions label.sophia-action-label {
	align-items: center;
	display: flex;
	gap: 0.45rem;
	margin: 0;
	font-size: 0;
}

.sophia-admin #changelist .actions label.sophia-action-label select,
.sophia-admin #changelist .dataTables_wrapper .dt-footer .dt-footer-actions .actions label.sophia-action-label select {
	font-size: 0.9375rem;
}

.sophia-admin #changelist .actions select.sophia-action-select,
.sophia-admin #changelist .dataTables_wrapper .dt-footer .dt-footer-actions .actions select.sophia-action-select {
	min-width: 12rem;
	max-width: 12rem;
	border-radius: 0.375rem;
}

.sophia-admin #changelist .actions button.sophia-action-go,
.sophia-admin #changelist .dataTables_wrapper .dt-footer .dt-footer-actions .actions button.sophia-action-go {
	margin: 0;
	min-height: calc(2.25rem + 2px);
	padding-left: 0.9rem;
	padding-right: 0.9rem;
	border-radius: 0.375rem;
}

.sophia-admin #changelist .dataTables_wrapper .dt-footer .dt-footer-actions .actions label {
	align-items: center;
	display: flex;
	gap: 0.45rem;
	margin: 0;
	font-size: 0;
}

.sophia-admin #changelist .dataTables_wrapper .dt-footer .dt-footer-actions .actions label select,
.sophia-admin #changelist .dataTables_wrapper .dt-footer .dt-footer-actions .actions label .button {
	font-size: 0.9375rem;
}

.sophia-admin #changelist .dataTables_wrapper .dt-footer .dt-footer-actions .actions label select {
	min-width: 12rem;
}

.sophia-admin #changelist .dataTables_wrapper .dt-footer .dt-footer-actions .actions select {
	max-width: 12rem;
}

.sophia-admin #changelist .dataTables_wrapper .dt-footer .dt-footer-actions .actions button {
	margin: 0;
	min-height: calc(2.25rem + 2px);
	padding-left: 0.9rem;
	padding-right: 0.9rem;
}

.sophia-admin #changelist .dataTables_wrapper .dt-footer .dt-footer-actions .actions select.form-select {
	border-radius: 0.375rem;
}

.sophia-admin #changelist .dataTables_wrapper .dt-footer .dt-footer-actions .actions button.btn {
	border-radius: 0.375rem;
}

.sophia-admin #changelist .dataTables_wrapper .dt-footer .dt-footer-actions .actions .dt-action-go,
.sophia-admin #changelist .dt-bulk-actions #customerBulkGo {
	font-size: 0.8125rem;
	border: 1px solid var(--border-color) !important;
	border-radius: 4px;
	background: var(--body-bg) !important;
	box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset;
	cursor: pointer;
	height: 1.5rem;
	line-height: 1;
	padding: 4px 8px;
	margin: 0;
	color: var(--body-fg) !important;
}

.sophia-admin #changelist .dataTables_wrapper .dt-footer .dt-footer-actions .actions .dt-action-go:hover,
.sophia-admin #changelist .dataTables_wrapper .dt-footer .dt-footer-actions .actions .dt-action-go:focus,
.sophia-admin #changelist .dt-bulk-actions #customerBulkGo:hover,
.sophia-admin #changelist .dt-bulk-actions #customerBulkGo:focus {
	background: var(--row-alt-bg) !important;
	border-color: var(--border-color) !important;
}

.sophia-admin #changelist .dt-bulk-actions #customerBulkGo {
	height: 2.35rem;
	padding-left: 0.9rem;
	padding-right: 0.9rem;
}

.sophia-admin #changelist .dataTables_wrapper .dt-footer .dt-footer-actions .actions .action-counter,
.sophia-admin #changelist .dataTables_wrapper .dt-footer .dt-footer-actions .actions .all,
.sophia-admin #changelist .dataTables_wrapper .dt-footer .dt-footer-actions .actions .question,
.sophia-admin #changelist .dataTables_wrapper .dt-footer .dt-footer-actions .actions .clear {
	display: none !important;
}

.sophia-admin #changelist .dataTables_wrapper .dt-footer .dt-footer-actions .dt-bulk-actions {
	align-items: center;
	display: flex;
	gap: 0.5rem;
}

.sophia-admin #changelist .dataTables_wrapper .dt-footer .dt-footer-actions .dt-bulk-actions .form-select {
	min-width: 10rem;
}

.sophia-admin #changelist .dataTables_wrapper .dt-actions {
	align-items: center;
	display: flex;
	justify-content: flex-end;
	margin-left: auto;
}

.sophia-admin #changelist .dataTables_wrapper .dt-info {
	align-items: center;
	color: var(--muted-fg);
	display: flex;
	font-size: 0.875rem;
	margin-left: auto;
	white-space: nowrap;
}

.sophia-admin #changelist .dataTables_wrapper .dataTables_length,
.sophia-admin #changelist .dataTables_wrapper .dataTables_filter,
.sophia-admin #changelist .dataTables_wrapper .dataTables_info {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.sophia-admin #changelist .dataTables_wrapper .dataTables_filter input,
.sophia-admin #changelist .dataTables_wrapper .dataTables_length select {
	border: 1px solid #cbd5e1;
	border-radius: 0.375rem;
	min-height: 2.25rem;
	padding: 0.35rem 0.6rem;
}

.sophia-admin #changelist .dataTables_wrapper .dataTables_filter input {
	min-width: 24rem;
	width: 24rem;
}

.sophia-admin #changelist table .column-row_actions,
.sophia-admin #changelist table .column-row_actions a,
.sophia-admin #changelist table .column-row_actions button {
	white-space: nowrap;
}

.sophia-admin #changelist table .column-row_actions {
	text-align: center;
	width: 1%;
}

.sophia-admin tbody tr:hover {
	background: var(--card-header-bg);
	color: var(--body-fg) !important;
}

.sophia-admin tbody tr:hover,
.sophia-admin tbody tr:hover th,
.sophia-admin tbody tr:hover td,
.sophia-admin tbody tr:hover a {
	color: var(--body-fg) !important;
}

.sophia-admin .row1,
.sophia-admin .row2,
.sophia-admin tr:nth-child(odd),
.sophia-admin tr:nth-child(even),
.sophia-admin tr.odd,
.sophia-admin tr.even {
	/* --row-alt-bg (not --card-bg) so the table body reads as distinct from the
	   #changelist card it sits inside, which also uses --card-bg. */
	background: var(--row-alt-bg) !important;
	color: var(--body-fg);
}

.sophia-admin .row1 a,
.sophia-admin .row2 a,
.sophia-admin tr:nth-child(odd) a,
.sophia-admin tr:nth-child(even) a,
.sophia-admin tr.odd a,
.sophia-admin tr.even a {
	color: var(--body-fg) !important;
}

.sophia-admin #changelist table tbody tr.selected > th,
.sophia-admin #changelist table tbody tr.selected > td {
	background-color: rgb(2, 238, 250) !important;
	background-image: none !important;
	border-color: rgba(30, 236, 247, 0.22) !important;
	color: #0f172a !important;
}

.sophia-admin #changelist table tbody tr.selected > th a,
.sophia-admin #changelist table tbody tr.selected > td a {
  color: #0f172a !important;
}

.sophia-admin #changelist tbody tr:has(.action-select:checked) > th,
.sophia-admin #changelist tbody tr:has(.action-select:checked) > td {
  background-color: #00edff !important;
  background-image: none !important;
  color: #0f172a !important;
}

.sophia-admin #changelist tbody tr:has(.action-select:checked) > th a,
.sophia-admin #changelist tbody tr:has(.action-select:checked) > td a {
  color: #0f172a !important;
}

.sophia-admin #changelist table tbody tr.selected td.column-row_actions .btn {
  border-color: var(--brand-teal);
  color: var(--brand-teal) !important;
}

.sophia-admin #changelist table tbody tr.selected td.column-row_actions .btn:hover,
.sophia-admin #changelist table tbody tr.selected td.column-row_actions .btn:focus {
	background: var(--brand-teal);
	color: #fff !important;
}

.sophia-admin #changelist-filter {
	background: var(--card-bg);
	border-left: 1px solid var(--card-border);
	color: var(--body-fg);
}

.sophia-admin #toolbar,
.sophia-admin .actions {
	background: var(--card-header-bg);
	border-color: var(--card-border);
	color: var(--body-fg);
}

.sophia-admin #toolbar {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: stretch;
	min-height: 4.25rem;
}

.sophia-admin #toolbar .sophia-toolbar-search,
.sophia-admin #toolbar .sophia-toolbar-actions {
	align-items: center;
	display: flex;
	flex: 0 0 calc(50% - 0.5rem);
	min-width: 0;
}

.sophia-admin #toolbar .sophia-toolbar-search {
	justify-content: flex-start;
}

.sophia-admin #toolbar .sophia-toolbar-actions {
	justify-content: flex-end;
}

.sophia-admin #toolbar #changelist-search {
	align-items: center;
	display: flex;
	gap: 0.25rem;
	margin: 0;
	min-width: 0;
	width: 100%;
}

.sophia-admin #toolbar .actions {
	align-items: center;
	background: transparent;
	border: 0;
	display: flex;
	flex: 0 1 auto;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: flex-end;
	margin-left: auto;
	min-height: 0;
	padding: 0;
	width: 100%;
}

.sophia-admin #toolbar .actions label {
	align-items: center;
	display: flex;
	gap: 0.45rem;
	margin: 0;
}

.sophia-admin #toolbar .actions select {
	max-width: 16rem;
}

/* Same design as the DataTables-driven Go buttons (.dt-action-go / #customerBulkGo)
   so the native Django "Go" button on non-DataTables changelists (Users, Roles, etc.)
   matches instead of falling back to Django's own light-mode button styling. */
.sophia-admin #toolbar .actions button {
	font-size: 0.8125rem;
	border: 1px solid var(--border-color) !important;
	border-radius: 4px;
	background: var(--body-bg) !important;
	box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset;
	cursor: pointer;
	height: 1.5rem;
	line-height: 1;
	padding: 4px 8px;
	margin: 0;
	color: var(--body-fg) !important;
}

.sophia-admin #toolbar .actions button:hover,
.sophia-admin #toolbar .actions button:focus {
	background: var(--row-alt-bg) !important;
	border-color: var(--border-color) !important;
}

.sophia-admin #toolbar .actions label,
.sophia-admin #toolbar .actions span,
.sophia-admin #changelist .paginator,
.sophia-admin #changelist .paginator *,
.sophia-admin #changelist table,
.sophia-admin #changelist table th,
.sophia-admin #changelist table td,
.sophia-admin #changelist-filter h2,
.sophia-admin #changelist-filter h3,
.sophia-admin #changelist-filter li,
.sophia-admin #changelist-filter li a,
.sophia-admin #changelist-filter li.selected a {
	color: var(--body-fg) !important;
}

.sophia-admin #changelist table thead th,
.sophia-admin #changelist table thead th a:link,
.sophia-admin #changelist table thead th a:visited {
	color: var(--body-fg) !important;
}

.sophia-admin #toolbar .actions span.all,
.sophia-admin #toolbar .actions span.action-counter,
.sophia-admin #changelist-filter li a:not(:hover),
.sophia-admin #changelist-filter li.selected a:not(:hover) {
	color: var(--muted-fg) !important;
}

.sophia-admin #changelist-filter h2 {
	background: var(--card-header-bg);
	border-bottom: 1px solid var(--card-border);
	font-size: 0.95rem;
	min-height: 2.75rem;
	padding: 0.65rem 1rem;
}

.sophia-admin #changelist-filter h3 {
	font-size: 0.85rem;
	font-weight: 600;
	margin: 0.85rem 1rem 0.35rem;
}

.sophia-admin #changelist-filter li.selected {
	border-left-color: var(--brand-amber);
}

.sophia-admin #changelist-filter details summary {
	font-size: 0.85rem;
	line-height: 1.25;
}

.sophia-admin #changelist-filter ul {
	margin-bottom: 0.85rem;
}

.sophia-admin #changelist-filter li {
	font-size: 0.8rem;
	line-height: 1.35;
	margin-bottom: 0.15rem;
}

.sophia-admin #changelist-filter li a {
	font-size: inherit;
}

.sophia-admin input[type="text"],
.sophia-admin input[type="password"],
.sophia-admin input[type="email"],
.sophia-admin input[type="url"],
.sophia-admin input[type="number"],
.sophia-admin input[type="time"],
.sophia-admin textarea,
.sophia-admin select,
.sophia-admin .vTextField {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 0.375rem;
	color: var(--body-fg);
	min-height: 2.35rem;
	padding: 0.45rem 0.65rem;
}

/* The native <select> popup list is browser/OS-rendered and always light, regardless of
   our page theme, so its options need their own explicit (always-dark) text color. */
.sophia-admin select option {
	background: #fff;
	color: #111827;
}

.sophia-admin input:focus,
.sophia-admin textarea:focus,
.sophia-admin select:focus {
	border-color: var(--brand-teal);
	box-shadow: 0 0 0 0.22rem rgba(13, 110, 253, 0.18);
	outline: 0;
}

.sophia-admin .form-row,
.sophia-admin .form-row div,
.sophia-admin .form-row p,
.sophia-admin .form-row label,
.sophia-admin .form-row label.required,
.sophia-admin .aligned label,
.sophia-admin .readonly,
.sophia-admin .help,
.sophia-admin .help li,
.sophia-admin .datetime,
.sophia-admin .datetime br + span {
	color: var(--body-fg) !important;
}

.sophia-admin .form-row label,
.sophia-admin .aligned label,
.sophia-admin .form-row label.required {
	font-weight: 600;
}

.sophia-admin .readonly {
	font-weight: 500;
}

.sophia-admin .form-row .help,
.sophia-admin .form-row .help li,
.sophia-admin .datetime span,
.sophia-admin .quiet {
	color: var(--muted-fg) !important;
}

/* Role permissions grouped by module - card grid, one card per app, each
   permission a bordered checkbox row with name + codename subtitle.
   Rendered by PermissionsByModuleWidget (apps/accounts/forms.py) instead of
   Django's default dual-list-box. */
/* .flex-container (Django's label+field wrapper) is display:flex, so its
   lone child - our permissions card, with no label next to it - only
   shrinks to fit its content instead of filling the row. Force it wide. */
.sophia-admin .form-row.field-permissions .flex-container {
	width: 100%;
}
.sophia-admin .permissions-card {
	width: 100%;
	border: 1px solid var(--bs-border-color);
	border-radius: 0.5rem;
	background: var(--bs-body-bg);
	overflow: hidden;
}
.sophia-admin .permissions-card-header {
	padding: 0.6rem 1rem;
	background: var(--bs-secondary-bg);
	font-weight: 600;
	font-size: 0.95rem;
	border-bottom: 1px solid var(--bs-border-color);
}
.sophia-admin .permissions-card-body {
	padding: 1rem;
}
.sophia-admin .permissions-by-module {
	display: grid;
	/* auto-fit (not auto-fill) collapses/reclaims empty tracks, so cards
	   stretch to fill the full row instead of staying pinned to 260px with
	   leftover whitespace when there are only 3-4 of them. */
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
	/* Grid rows stretch every item to the tallest one by default - cards
	   with fewer permissions would otherwise grow to match a taller
	   neighbor instead of staying their own height, top-aligned. */
	align-items: start;
}
.sophia-admin .permissions-module-card {
	border: 1px solid var(--bs-border-color);
	border-radius: 0.5rem;
	padding: 0.75rem;
	background: var(--bs-body-bg);
	/* Grid items default to min-width:auto, which lets a long unbroken
	   string (e.g. a codename) push the card wider than its track instead
	   of wrapping - min-width:0 lets it shrink and actually wrap inside. */
	min-width: 0;
}
.sophia-admin .permissions-module-card h4 {
	margin: 0 0 0.5rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--body-fg);
}
.sophia-admin .permissions-select-all {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	cursor: pointer;
}
/* Apps with far more models/permissions than everything else (pos) get a
   card spanning every column instead of squeezing into one. */
.sophia-admin .permissions-module-card--wide {
	grid-column: 1 / -1;
}
/* Every card (not just the wide pos one) lays its models out as a grid of
   bordered sub-cards, instead of one long stack of plain headings. */
.sophia-admin .permissions-by-module-sub {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0.75rem;
	align-items: start;
}
.sophia-admin .permissions-model-group {
	border: 1px solid var(--bs-border-color);
	border-radius: 0.375rem;
	background: var(--bs-tertiary-bg, var(--bs-secondary-bg));
	padding: 0.65rem;
	min-width: 0;
}
.sophia-admin .permissions-model-group:last-child {
	margin-bottom: 0;
}
.sophia-admin .permissions-model-group h5 {
	grid-column: 1 / -1;
	margin: 0 0 0.4rem;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--muted-fg);
}
/* Plain list rows instead of a boxed "card" per checkbox - the model
   sub-card they already sit inside is the only border/background needed;
   stacking another one on every single row was just visual noise. */
.sophia-admin .permission-checkbox-row {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.2rem 0;
	cursor: pointer;
	font-weight: normal;
	font-size: 0.85rem;
	color: var(--body-fg);
	min-width: 0;
}
.sophia-admin .permission-checkbox-row:hover {
	color: var(--brand-teal);
}
.sophia-admin .permission-checkbox-row span {
	min-width: 0;
	overflow-wrap: anywhere;
}
.sophia-admin .permission-checkbox-row input[type="checkbox"] {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin: 0;
}
/* Django's default "Permissions:" label chip would just duplicate the
   widget's own card header above - RoleForm already sets the field label
   to "" for this, this is a fallback in case that ever regresses. */
.sophia-admin .field-permissions > div > .flex-container > label {
	display: none;
}

.sophia-admin .datetimeshortcuts,
.sophia-admin .datetimeshortcuts a,
.sophia-admin .related-widget-wrapper-link,
.sophia-admin .related-widget-wrapper-link:link,
.sophia-admin .related-widget-wrapper-link:visited {
	color: var(--brand-teal) !important;
}

.sophia-admin .datetimeshortcuts {
	display: none !important;
}

.sophia-admin .related-widget-wrapper-link:hover,
.sophia-admin .datetimeshortcuts a:hover {
	color: var(--accent-hover) !important;
}

.sophia-admin .related-widget-wrapper {
	color: var(--body-fg);
}

.sophia-admin .datetime {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
}

.sophia-admin .datetime br {
	display: none;
}

.sophia-admin .datetime input.vDateField,
.sophia-admin .datetime input.vTimeField {
	border: 1px solid #cbd5e1;
	border-radius: 0.375rem;
	box-shadow: none;
	min-height: 2.35rem;
	padding: 0.45rem 0.65rem;
	width: 10rem;
}

.sophia-admin .datetime input.vTimeField::-webkit-calendar-picker-indicator {
	opacity: 0.65;
}

.sophia-admin .datepicker {
	border: 1px solid #cbd5e1;
	border-radius: 0.5rem;
	box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.18);
	color: var(--body-fg);
	font-size: 0.85rem;
	padding: 0.4rem;
}

.sophia-admin .datepicker .datepicker-picker,
.sophia-admin .datepicker .datepicker-view,
.sophia-admin .datepicker .days,
.sophia-admin .datepicker .dow,
.sophia-admin .datepicker .datepicker-cell {
	background: var(--card-bg);
	color: var(--body-fg) !important;
}

.sophia-admin .datepicker .datepicker-cell:hover,
.sophia-admin .datepicker .datepicker-cell.focused {
	background: var(--card-header-bg);
	color: var(--body-fg) !important;
}

.sophia-admin .datepicker .datepicker-cell.selected,
.sophia-admin .datepicker .datepicker-cell.selected:hover {
	background: var(--brand-teal);
	color: #fff !important;
}

.sophia-admin .datepicker .datepicker-cell.disabled {
	color: #94a3b8 !important;
}

.sophia-admin .datepicker .datepicker-controls .button {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	color: var(--body-fg) !important;
	min-height: 2rem;
}

.sophia-admin .calendarbox,
.sophia-admin .clockbox {
	color: var(--body-fg);
}

.sophia-admin .calendarbox table.calendar,
.sophia-admin .calendarbox table.calendar tbody,
.sophia-admin .calendarbox table.calendar tr,
.sophia-admin .calendarbox table.calendar th,
.sophia-admin .calendarbox table.calendar td {
	background: #fff !important;
}

.sophia-admin .calendarbox table.calendar caption,
.sophia-admin .calendarbox table.calendar thead th {
	background: var(--card-header-bg) !important;
	color: var(--body-fg) !important;
}

.sophia-admin .calendarbox table.calendar tbody td:hover,
.sophia-admin .calendarbox table.calendar tbody td.selected {
	background: #dff5f6 !important;
}

.sophia-admin .calendarbox table.calendar tbody td.nonday {
	background: var(--card-header-bg) !important;
}

.sophia-admin .calendarbox table,
.sophia-admin .calendarbox caption,
.sophia-admin .calendarbox th,
.sophia-admin .calendarbox td,
.sophia-admin .calendarbox a,
.sophia-admin .calendarbox a:link,
.sophia-admin .calendarbox a:visited,
.sophia-admin .clockbox h2,
.sophia-admin .clockbox a,
.sophia-admin .clockbox a:link,
.sophia-admin .clockbox a:visited {
	color: var(--body-fg) !important;
}

.sophia-admin .calendarbox td:hover,
.sophia-admin .calendarbox td:hover a,
.sophia-admin .calendarbox td.selected,
.sophia-admin .calendarbox td.selected a,
.sophia-admin .calendarbox a:hover,
.sophia-admin .calendarbox a:focus,
.sophia-admin .clockbox a:hover,
.sophia-admin .clockbox a:focus {
	color: var(--body-fg) !important;
}

.sophia-admin .button,
.sophia-admin input[type="submit"],
.sophia-admin input[type="button"],
.sophia-admin .submit-row input,
.sophia-admin a.button {
	border-radius: 0.375rem;
	font-weight: 600;
	min-height: 2.25rem;
	padding: 0.45rem 0.8rem;
}

/* Every button gets a consistent 1px border; leave border-color alone here so Bootstrap's
   own variants (btn-primary, btn-outline-*, etc.) keep their own semantic colors. */
.sophia-admin .btn {
	border-width: 1px;
	border-style: solid;
}

/* The neutral/secondary button variants don't carry a brand color, so their border should
   follow the theme instead of Bootstrap's fixed gray. */
.sophia-admin .btn-secondary,
.sophia-admin .btn-outline-secondary,
.sophia-admin .btn-light,
.sophia-admin .btn-outline-light {
	border-color: var(--card-border);
}

.sophia-admin .btn-primary,
.sophia-admin .button.default,
.sophia-admin input[type="submit"].default {
	background: var(--brand-teal);
	border-color: var(--brand-teal);
	color: #fff !important;
}

/* Per-model "Add X" header buttons (customer/supplier/etc. use a custom modal instead of
   Django's native .object-tools) -- match the same 6px/12px padding as .object-tools a
   so every "Add" button in the header row looks consistent regardless of which template
   pattern the page uses. */
.sophia-admin .js-customer-add,
.sophia-admin .js-supplier-add {
	padding: 6px 12px !important;
}

.sophia-admin .btn-primary:hover,
.sophia-admin .button.default:hover,
.sophia-admin input[type="submit"].default:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
}

.sophia-admin .object-tools {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.sophia-admin .object-tools li {
	margin: 0;
}

.sophia-admin .object-tools a:link,
.sophia-admin .object-tools a:visited {
	background: var(--brand-teal);
	border-radius: 0.375rem;
	color: #fff;
	/* Django's own .addlink/.viewsitelink rules add asymmetric padding (icon-reserved
	   padding-left/right on top of the base padding: 3px 12px) -- flatten to a uniform
	   size since we don't use those icon backgrounds. */
	padding: 6px 12px !important;
}

.sophia-admin .object-tools a:hover,
.sophia-admin .object-tools a:focus {
	background: var(--accent-hover);
}

.sophia-admin .submit-row {
	align-items: center;
	background: #fff;
	border: 1px solid var(--card-border);
	border-radius: 0.75rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	justify-content: flex-start;
}

.sophia-admin .deletelink,
.sophia-admin .submit-row a.deletelink {
	align-items: center;
	background: #c51f2b;
	border: 1px solid #c51f2b;
	border-radius: 0.375rem;
	color: #fff !important;
	display: inline-flex;
	font-weight: 700;
	justify-content: center;
	margin-left: auto;
	min-height: 2.25rem;
	min-width: 4.75rem;
	padding: 0.45rem 0.85rem;
	text-decoration: none;
}

.sophia-admin .deletelink:hover,
.sophia-admin .deletelink:focus,
.sophia-admin .submit-row a.deletelink:hover,
.sophia-admin .submit-row a.deletelink:focus {
	background: #9f1823;
	border-color: #9f1823;
	color: #fff !important;
}

.sophia-admin .selector {
	width: 100%;
}

.sophia-admin .selector select,
.sophia-admin .selector option,
.sophia-admin .selector .selector-available select,
.sophia-admin .selector .selector-chosen select {
	color: var(--body-fg);
}

.sophia-admin .selector option:checked,
.sophia-admin .selector option:hover,
.sophia-admin .selector option:focus {
	color: var(--body-fg);
}

.sophia-admin .selector a,
.sophia-admin .selector a:link,
.sophia-admin .selector a:visited {
	color: var(--body-fg) !important;
}

.sophia-admin .app-footer {
	border-top: 1px solid var(--card-border);
	color: var(--muted-fg);
}

.sophia-admin .pos-document-card {
	border: 1px solid var(--card-border);
	border-radius: 0.75rem;
	box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.06);
	overflow: hidden;
}

.sophia-admin .pos-document-card .card-header {
	align-items: center;
	background: var(--card-header-bg);
	border-bottom: 1px solid var(--card-border);
	display: flex;
	justify-content: space-between;
}

.sophia-admin .product-popup-shell {
	align-items: center;
	background: rgba(16, 24, 40, 0.62);
	display: flex;
	inset: 0;
	justify-content: center;
	min-height: 100vh;
	padding: 5rem 1rem 1rem;
	position: fixed;
	z-index: 2000;
}

.sophia-admin.product-popup-open {
	overflow: hidden;
}

.sophia-admin .product-popup-card {
	max-width: 64rem;
	width: 100%;
}

.sophia-admin .product-popup-header {
	align-items: flex-start;
	background: linear-gradient(180deg, var(--card-header-bg) 0%, var(--card-header-gradient-end) 100%);
	border-bottom: 1px solid var(--card-border);
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 1.25rem;
}

.sophia-admin .product-popup-title {
	color: var(--body-fg);
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1.2;
	margin: 0;
}

.sophia-admin .product-popup-lede {
	color: var(--body-fg);
	font-size: 0.92rem;
}

.sophia-admin .product-popup-chip {
	align-items: center;
	background: rgba(13, 110, 253, 0.12);
	border-radius: 999px;
	color: var(--brand-teal-dark);
	display: inline-flex;
	font-size: 0.78rem;
	font-weight: 800;
	min-height: 2rem;
	padding: 0.25rem 0.75rem;
}

.sophia-admin .product-popup-body {
	padding: 1.25rem;
}

.sophia-admin .product-popup-footer {
	align-items: center;
	background: var(--card-header-bg);
	border-top: 1px solid var(--card-border);
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
	padding: 1rem 1.25rem;
}

.sophia-admin .product-field {
	display: grid;
	gap: 0.35rem;
}

.sophia-admin .product-field label,
.sophia-admin .product-field .form-check-label,
.sophia-admin .product-field .form-text {
	color: var(--body-fg);
}

.sophia-admin .product-field .form-control,
.sophia-admin .product-field input[type="text"],
.sophia-admin .product-field input[type="number"] {
	width: 100%;
}

.sophia-admin .product-field .form-check {
	margin-top: 0.25rem;
}

.sophia-admin .product-field .related-widget-wrapper-link {
	display: none !important;
}

.sophia-admin .customers-popup-shell {
	align-items: center;
	background: rgba(16, 24, 40, 0.62);
	display: none;
	inset: 0;
	justify-content: center;
	min-height: 100vh;
	padding: 5rem 1rem 1rem;
	position: fixed;
	z-index: 2000;
}

.sophia-admin .customers-popup-shell.open {
	display: flex;
}

.sophia-admin .customers-popup-backdrop {
	inset: 0;
	position: absolute;
}

.sophia-admin .customers-popup-card {
	max-width: 64rem;
	width: 100%;
}

.sophia-admin .customers-popup-header {
	align-items: flex-start;
	background: linear-gradient(180deg, var(--card-header-bg) 0%, var(--card-header-gradient-end) 100%);
	border-bottom: 1px solid var(--card-border);
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 1.25rem;
}

.sophia-admin .customers-popup-meta {
	align-items: center;
	display: flex;
	gap: 0.5rem;
}

.sophia-admin .customers-popup-title {
	color: var(--body-fg);
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1.2;
	margin: 0;
}

.sophia-admin .customers-popup-lede {
	color: var(--body-fg);
	font-size: 0.92rem;
}

.sophia-admin .customers-popup-chip {
	align-items: center;
	background: rgba(13, 110, 253, 0.12);
	border-radius: 999px;
	color: var(--brand-teal-dark);
	display: inline-flex;
	font-size: 0.78rem;
	font-weight: 800;
	min-height: 2rem;
	padding: 0.25rem 0.75rem;
}

.sophia-admin .customers-popup-body {
	padding: 1.25rem;
}

.sophia-admin .customers-popup-footer {
	align-items: center;
	background: var(--card-header-bg);
	border-top: 1px solid var(--card-border);
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
	padding: 1rem 1.25rem;
}

.sophia-admin .customers-popup-close {
	align-items: center;
	background: rgba(15, 23, 42, 0.08);
	border: 0;
	border-radius: 999px;
	color: var(--body-fg);
	display: inline-flex;
	font-size: 1.5rem;
	font-weight: 700;
	height: 2rem;
	justify-content: center;
	line-height: 1;
	width: 2rem;
}

.sophia-admin .customers-popup-close:hover,
.sophia-admin .customers-popup-close:focus {
	background: rgba(13, 110, 253, 0.14);
	color: var(--brand-teal-dark);
}

.sophia-admin .pos-document-field {
	display: grid;
	gap: 0.2rem;
}

.sophia-admin .pos-document-field span {
	color: var(--muted-fg);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.sophia-admin .doc-picker {
	background: var(--card-bg);
	color: var(--body-fg);
	padding: 0.75rem;
	border-radius: 0.5rem;
	font-size: 0.95rem;
	border: 1px solid var(--card-border);
}

.sophia-admin .doc-picker .picker-body {
	border: 1px solid var(--card-border);
	min-height: 300px;
	display: flex;
	background: var(--card-bg);
}

.sophia-admin .doc-picker .picker-left {
	width: 220px;
	border-right: 1px solid var(--card-border);
	padding: 0;
	background: var(--card-header-bg);
}

.sophia-admin .doc-picker .picker-right {
	flex: 1;
	padding: 0;
	background: var(--card-bg);
}

.sophia-admin .doc-picker .list-group-item {
	background: transparent;
	color: var(--body-fg);
	border: 0;
	border-radius: 0;
	cursor: pointer;
	padding: 0.75rem 0.9rem;
	user-select: none;
}

.sophia-admin .doc-picker .list-group-item.active {
	background: rgba(13, 110, 253, 0.14);
	color: var(--brand-teal-dark);
}

.sophia-admin .doc-picker .doc-item {
	padding: 0.75rem 0.9rem;
	cursor: pointer;
	border-bottom: 1px solid var(--card-border);
	color: var(--body-fg);
}

.sophia-admin .doc-picker .doc-item:hover {
	background: var(--row-alt-bg);
}

.sophia-admin .doc-picker .doc-item.active {
	background: rgba(13, 110, 253, 0.12);
	outline: 1px solid rgba(13, 110, 253, 0.35);
}

.sophia-admin .doc-picker .btn-outline-secondary {
	border-color: var(--brand-teal);
	color: var(--brand-teal-dark);
}

.sophia-admin .doc-picker .btn-outline-secondary:hover,
.sophia-admin .doc-picker .btn-outline-secondary:focus {
	background: var(--brand-teal);
	border-color: var(--brand-teal);
	color: #ffffff;
}

.sophia-admin .pos-workspace-shell {
	display: grid;
	gap: 1rem;
}

/* Transactions tab strip (pinned "Transactions" list tab + dynamic draft tabs
   opened by New/Walk-in Sale) -- see sale-transaction-tabs.js. */
.sophia-admin .pos-transaction-tabs,
.sophia-admin .pos-transaction-tabs li {
	list-style: none;
}

.sophia-admin .pos-transaction-tabs {
	border-bottom: 1px solid var(--card-border);
	margin-bottom: 1rem;
	padding-left: 0;
}

.sophia-admin .pos-transaction-tabs .nav-link {
	align-items: center;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: var(--muted-fg);
	display: inline-flex;
	gap: 0.3rem;
	padding: 0.6rem 1rem;
}

.sophia-admin .pos-transaction-tabs .nav-link:hover {
	color: var(--body-fg);
}

.sophia-admin .pos-transaction-tabs .nav-link.active {
	background: transparent;
	border-bottom-color: var(--brand-teal);
	color: var(--body-fg);
	font-weight: 600;
}

.sophia-admin .pos-transaction-tabs .pos-tab-close {
	border-radius: 999px;
	display: inline-flex;
	margin-left: 0.3rem;
	padding: 0.05rem;
}

.sophia-admin .pos-transaction-tabs .pos-tab-close:hover {
	background: var(--row-alt-bg);
	color: var(--error-fg, #e35f5f);
}

/* thepaddle-style icon toolbar (New / Walk-in Sale / Reload / Print). AdminLTE4
   doesn't ship a .btn-app component (that was an AdminLTE3-era class), so this
   is a small custom equivalent: icon on top, label below, in a bordered box. */
.sophia-admin .pos-toolbar-row {
	align-items: stretch;
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.sophia-admin .pos-app-btn {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 0.5rem;
	color: var(--body-fg);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.75rem;
	font-weight: 500;
	min-width: 4.75rem;
	padding: 0.6rem 0.5rem;
}

.sophia-admin .pos-app-btn i {
	font-size: 1.15rem;
}

.sophia-admin .pos-app-btn:hover,
.sophia-admin .pos-app-btn:focus {
	background: var(--row-alt-bg);
	border-color: var(--brand-teal);
	color: var(--body-fg);
}

.sophia-admin .pos-toolbar-divider {
	border-left: 1px solid var(--card-border);
	margin: 0.25rem 0.25rem;
}

.sophia-admin .pos-transactions-card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 0.75rem;
	overflow: hidden;
}

.sophia-admin .pos-transactions-card .card-header {
	background: var(--card-header-bg);
	border-bottom: 1px solid var(--card-border);
	color: var(--body-fg);
}

/* The native Django "Add Transaction" object-tools link is replaced by the
   toolbar's "New" button above -- hide it instead of showing two Add controls. */
.sophia-admin #saleListTabPane .object-tools {
	display: none;
}

.sophia-admin .pos-panel-card {
	border: 1px solid var(--card-border);
	border-radius: 0.85rem;
	box-shadow: 0 0.125rem 0.6rem rgba(15, 23, 42, 0.06);
	overflow: hidden;
}

.sophia-admin .pos-panel-card > .card-header {
	align-items: center;
	background: linear-gradient(180deg, var(--card-header-bg) 0%, var(--card-header-gradient-end) 100%);
	border-bottom: 1px solid var(--card-border);
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: 3.25rem;
}

.sophia-admin .pos-panel-card .card-body {
	background: var(--card-bg);
}

.sophia-admin .pos-workspace-grid {
	align-items: stretch;
}

.sophia-admin .pos-tree {
	border: 1px solid var(--card-border);
	border-radius: 0.5rem;
	overflow: hidden;
}

.sophia-admin .pos-tree-empty {
	background: var(--card-header-bg);
	border: 1px dashed var(--card-border);
	border-radius: 0.5rem;
	padding: 1rem;
}

.sophia-admin .pos-tree-group {
	border-bottom: 1px solid var(--card-border);
}

.sophia-admin .pos-tree-group:last-child {
	border-bottom: none;
}

.sophia-admin .pos-tree-group > summary {
	align-items: center;
	background: var(--card-header-bg);
	color: var(--body-fg);
	cursor: pointer;
	display: flex;
	font-size: 0.8rem;
	font-weight: 700;
	justify-content: space-between;
	letter-spacing: 0.02em;
	list-style: none;
	padding: 0.4rem 0.65rem;
	text-transform: uppercase;
}

.sophia-admin .pos-tree-group > summary::-webkit-details-marker {
	display: none;
}

.sophia-admin .pos-tree-group[open] > summary {
	border-bottom: 1px solid var(--card-border);
}

.sophia-admin .pos-tree-branch {
	display: flex;
	flex-direction: column;
}

.sophia-admin .pos-tree-subgroups {
	border-top: 1px solid var(--card-border);
	padding-left: 0.85rem;
}

.sophia-admin .pos-tree-subgroups .pos-tree-group {
	border-bottom: 1px solid var(--card-border);
}

.sophia-admin .pos-tree-subgroups .pos-tree-group:last-child {
	border-bottom: none;
}

.sophia-admin .pos-tree-subgroups .pos-tree-group > summary {
	background: transparent;
	font-size: 0.76rem;
}

.sophia-admin .pos-tree-item {
	align-items: center;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--card-border);
	color: var(--body-fg);
	display: flex;
	gap: 0.5rem;
	justify-content: space-between;
	padding: 0.4rem 0.65rem;
	text-align: left;
	transition: background-color 0.1s ease;
	width: 100%;
}

.sophia-admin .pos-tree-branch .pos-tree-item:last-child {
	border-bottom: none;
}

.sophia-admin .pos-tree-item:hover,
.sophia-admin .pos-tree-item:focus {
	background-color: var(--card-header-bg);
}

.sophia-admin .pos-tree-item-main {
	display: grid;
	gap: 0;
	min-width: 0;
}

.sophia-admin .pos-tree-item-main strong,
.sophia-admin .pos-tree-item-main small {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sophia-admin .pos-tree-item-main strong {
	font-size: 0.85rem;
	font-weight: 600;
}

.sophia-admin .pos-tree-item-main small {
	color: var(--muted-fg);
	font-size: 0.72rem;
}

.sophia-admin .pos-tree-item-meta {
	align-items: center;
	display: flex;
	gap: 0.4rem;
	flex: 0 0 auto;
	font-size: 0.8rem;
}

.sophia-admin .pos-tree-item-meta .badge {
	font-size: 0.65rem;
	font-weight: 600;
	padding: 0.25em 0.45em;
}

.sophia-admin .pos-tree-group > summary .badge {
	font-size: 0.65rem;
	font-weight: 600;
}

.sophia-admin .pos-item-table thead th {
	border-bottom: 1px solid var(--card-border);
	color: var(--body-fg);
}

.sophia-admin .pos-qty-group {
	align-items: center;
	flex-wrap: nowrap;
	min-width: 4rem;
	width: 4rem;
}

.sophia-admin .pos-qty-input {
	font-size: 0.8rem;
	min-height: 1.9rem;
	width: 4rem;
}

.sophia-admin .pos-qty-input::-webkit-outer-spin-button,
.sophia-admin .pos-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.sophia-admin .pos-qty-input {
	-moz-appearance: textfield;
}

.sophia-admin .pos-item-table td:nth-child(2),
.sophia-admin .pos-item-table th:nth-child(2) {
	width: 6rem;
}

.sophia-admin .pos-mini-summary,
.sophia-admin .pos-total-card {
	background: linear-gradient(180deg, var(--card-header-bg) 0%, var(--card-header-gradient-end) 100%);
	border: 1px solid var(--card-border);
	border-radius: 0.75rem;
	display: grid;
	gap: 0.45rem;
	padding: 0.9rem 1rem;
}

.sophia-admin .pos-mini-row,
.sophia-admin .pos-total-row {
	align-items: center;
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
}

.sophia-admin .pos-mini-row span,
.sophia-admin .pos-total-row span {
	color: var(--muted-fg);
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
}

.sophia-admin .pos-mini-total,
.sophia-admin .pos-total-row strong {
	color: var(--body-fg);
	font-size: 1rem;
}

.sophia-admin .pos-mini-total strong,
.sophia-admin .pos-total-row strong {
	font-weight: 800;
}

.sophia-admin .js-stock-filter.active {
	background: var(--brand-teal);
	border-color: var(--brand-teal);
	color: #fff;
}

.sophia-admin .pos-payment-body {
	min-height: 22rem;
}

.sophia-admin .pos-payment-items {
	border-right: 1px solid var(--card-border);
	display: flex;
	flex-direction: column;
	padding: 1rem;
}

.sophia-admin .pos-payment-item-list {
	flex: 1 1 auto;
	max-height: 16rem;
	overflow-y: auto;
}

.sophia-admin .pos-payment-item-row {
	border-bottom: 1px solid var(--card-border);
	padding: 0.5rem 0;
}

.sophia-admin .pos-payment-item-row:last-child {
	border-bottom: none;
}

.sophia-admin .pos-payment-summary {
	margin-top: 0.75rem;
}

.sophia-admin .pos-payment-summary .pos-total-row {
	padding: 0.25rem 0;
}

.sophia-admin .pos-payment-discount-input {
	max-width: 6.5rem;
	text-align: right;
}

.sophia-admin .pos-payment-pay {
	background: var(--card-header-bg);
	padding: 1.5rem;
}

.sophia-admin .pos-payment-label {
	color: var(--muted-fg);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
}

.sophia-admin .pos-payment-amount {
	font-size: 2.25rem;
	font-weight: 800;
}

.sophia-admin .pos-payment-pay-input {
	font-size: 1.75rem;
	font-weight: 700;
}

.sophia-popup {
	padding: 1rem;
}

.sophia-admin.login-page {
	align-items: center;
	background:
		radial-gradient(circle at 20% 20%, rgba(13, 110, 253, 0.14), transparent 30%),
		radial-gradient(circle at 80% 80%, rgba(255, 193, 7, 0.1), transparent 26%), linear-gradient(135deg, #f6fbfc 0%, #edf4f5 100%);
	display: flex;
	justify-content: center;
	min-height: 100vh;
	padding: 1.5rem;
}

.sophia-admin.login-page .app-wrapper {
	display: block;
	grid-template-areas: none;
	grid-template-columns: 1fr;
	width: 100%;
}

.sophia-admin.login-page .app-main {
	grid-area: auto;
}

.sophia-admin.login-page .content {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: calc(100vh - 3rem);
	padding: 0;
}

.sophia-admin.login-page #content-start {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* The admin base wraps content in .app-content (themed background, fixed
   min-height) > .container-fluid > #content; none of it should show on the
   login screen, and the card must sit centred in the full-width wrapper. */
.sophia-admin.login-page .app-main,
.sophia-admin.login-page .app-content {
	background: transparent;
	min-height: 0;
	padding: 0;
	width: 100%;
}

.sophia-admin.login-page .app-content > .container-fluid,
.sophia-admin.login-page #content {
	display: flex !important;
	justify-content: center;
	padding: 0;
	width: 100%;
}

.sophia-admin.login-page .login-shell {
	background: rgba(255, 255, 255, 0.86);
	border: 1px solid rgba(16, 40, 80, 0.08);
	border-radius: 1.2rem;
	box-shadow: 0 1.75rem 4rem rgba(16, 40, 80, 0.14);
	overflow: hidden;
	width: min(100%, 560px);
}

.sophia-admin.login-page .login-brand-bar {
	align-items: center;
	background: linear-gradient(135deg, rgba(169, 173, 183, 0.92) 0%, rgba(93, 103, 122, 0.92) 52%, rgba(31, 49, 85, 0.96) 100%);
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	min-height: 13.5rem;
	padding: 1.4rem 1.5rem 1.35rem;
	text-align: center;
}

.sophia-admin.login-page .login-brand {
	flex: 0 0 auto;
}

.sophia-admin.login-page .login-brand img {
	display: block;
	height: auto;
	max-width: 11.5rem;
	margin: 0 auto;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
	width: min(100%, 11.5rem);
}

.sophia-admin.login-page .login-brand-copy h1 {
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 0.2rem;
}

.sophia-admin.login-page .login-brand-copy p {
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.88rem;
	line-height: 1.4;
	margin: 0;
	max-width: 22rem;
}

.sophia-admin.login-page .login-card-body {
	background: #fff;
	padding: 1.5rem 1.5rem 1.65rem;
}

.sophia-admin.login-page .login-box-msg {
	color: var(--brand-navy);
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 1rem;
	text-align: left;
}

.sophia-admin.login-page .login-field {
	position: relative;
}

.sophia-admin.login-page .login-field input {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 0.75rem;
	color: var(--body-fg);
	min-height: 3rem;
	padding: 0.7rem 0.9rem 0.7rem 2.7rem;
	width: 100%;
}

.sophia-admin.login-page .login-field input:focus {
	border-color: var(--brand-teal);
	box-shadow: 0 0 0 0.22rem rgba(13, 110, 253, 0.14);
	outline: 0;
}

.sophia-admin.login-page .login-field-icon {
	align-items: center;
	color: var(--brand-teal);
	display: flex;
	height: 100%;
	left: 0.85rem;
	pointer-events: none;
	position: absolute;
	top: 0;
}

.sophia-admin.login-page .login-actions {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	margin-top: 0.25rem;
}

.sophia-admin.login-page .login-actions a {
	color: var(--brand-navy);
	font-weight: 600;
}

.sophia-admin.login-page .login-actions .btn {
	min-width: 8rem;
	min-height: 2.8rem;
}

.sophia-admin.login-page .login-register {
	color: var(--muted-fg);
	font-size: 0.9rem;
	margin: 0.75rem 0 0;
}

.sophia-admin.login-page .login-register a {
	color: var(--brand-navy);
	font-weight: 600;
}

.sophia-admin .login-card-body .errorlist {
	color: #dc3545;
	font-size: 0.875rem;
	list-style: none;
	margin: -0.5rem 0 0.75rem;
	padding-left: 0;
}

@media (max-width: 767.98px) {
	.sophia-admin #header {
		align-items: flex-start;
		flex-direction: column;
	}

	.sophia-admin #user-tools {
		justify-content: flex-start;
		margin-left: 0;
	}

	.sophia-dashboard-header,
	.sophia-model-row,
	.sophia-section-header {
		align-items: stretch;
		flex-direction: column;
	}

	.sophia-model-actions {
		justify-content: flex-start;
	}

	.sophia-admin #toolbar {
		align-items: stretch;
		flex-direction: column;
		gap: 0.75rem;
	}

	.sophia-admin #toolbar .sophia-toolbar-search,
	.sophia-admin #toolbar .sophia-toolbar-actions {
		flex-basis: auto;
		width: 100%;
	}

	.sophia-admin #toolbar form {
		flex-wrap: wrap;
	}

	.sophia-admin #toolbar .actions {
		justify-content: flex-start;
		margin-left: 0;
		width: auto;
	}

	.sophia-admin.login-page .login-shell {
		width: min(100%, 100%);
	}

	.sophia-admin.login-page .login-brand-bar {
		align-items: center;
		flex-direction: column;
		min-height: 0;
	}

	.sophia-admin.login-page .login-brand img {
		max-width: 10rem;
		width: min(100%, 10rem);
	}

	.sophia-admin.login-page .login-card-body {
		padding: 1.5rem;
	}

	.sophia-admin.login-page .login-actions {
		align-items: stretch;
		flex-direction: column-reverse;
	}

	.sophia-admin.login-page .login-actions .btn {
		width: 100%;
	}
}

.flatpickr-time {
	margin-bottom: .5rem;
	/* flatpickr.min.css's own .flatpickr-time loads after this stylesheet
	   (it's included via {% block extrahead %}, which renders after
	   {% block extrastyle %} where this file is linked), so on equal
	   selector specificity its overflow: hidden would otherwise win. */
	overflow: visible !important;
	line-height: 35px;
	max-height: 35px;
}

.flatpickr-time .numInputWrapper {
	height: 35px;
}

/* Scoped to :not(.dark) so the official flatpickr dark theme (loaded
   alongside the default/light theme, activated by adding the "dark" class
   to .flatpickr-calendar - see sophia-datetimepicker.js applyTheme()) keeps
   its own native hover/footer colors instead of these light-mode tweaks. */
.flatpickr-calendar:not(.dark) .flatpickr-time .numInputWrapper:hover {
	background: #eee;
}

.flatpickr-calendar:not(.dark) .flatpickr-time .numInputWrapper:hover input,
.flatpickr-calendar:not(.dark) .flatpickr-time .numInputWrapper:hover span {
	color: #000;
}

.sophia-flatpickr-footer {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	padding: .5rem;
	margin-top: .5rem;
}

.flatpickr-calendar:not(.dark) .sophia-flatpickr-footer {
	border-top: 1px solid #dee2e6;
	background: #fff;
}

.flatpickr-calendar:not(.dark) .sophia-flatpickr-footer .sophia-fp-cancel {
	color: #333;
	background: #fff;
	border-color: #ced4da;
}

.flatpickr-calendar:not(.dark) .sophia-flatpickr-footer .sophia-fp-cancel:hover,
.flatpickr-calendar:not(.dark) .sophia-flatpickr-footer .sophia-fp-cancel:focus {
	color: #fff;
	background: #6c757d;
	border-color: #6c757d;
}

.flatpickr-calendar.dark .sophia-flatpickr-footer {
	border-top: 1px solid #565656;
	background: #3f3f3f;
}

.flatpickr-calendar.dark .sophia-flatpickr-footer .sophia-fp-cancel {
	color: #f0f0f0;
	background: #3f3f3f;
	border-color: #6b6b6b;
}

.flatpickr-calendar.dark .sophia-flatpickr-footer .sophia-fp-cancel:hover,
.flatpickr-calendar.dark .sophia-flatpickr-footer .sophia-fp-cancel:focus {
	color: #fff;
	background: #565656;
	border-color: #6b6b6b;
}

/* OK stays brand-blue in both themes - hardcoded (not theme-variable-based)
   so it reads clearly regardless of theme, since the calendar renders
   outside the normal .sophia-admin cascade context. */
.sophia-flatpickr-footer .sophia-fp-ok {
	color: #fff;
	background: #0d6efd;
	border-color: #0d6efd;
}

.sophia-flatpickr-footer .sophia-fp-ok:hover,
.sophia-flatpickr-footer .sophia-fp-ok:focus {
	color: #fff;
	background: #0b5ed7;
	border-color: #0a58ca;
}

/* Django's own admin/css/base.css ships "#changelist table thead th {
   padding: 0; }" - that ID selector outranks a plain class selector
   regardless of source order, so this needs to match its specificity
   (prefixed with an id-bearing ancestor) to actually take effect. */
#changelist .pos-unpaid-reservations-table thead th {
	padding: 0.75rem 0.5rem;
}

/* Django's own admin/css/base.css ships ".module h3 { margin-top: .6em; }",
   which stacks with our wrapper's own top padding and doubles up the gap
   above this heading - override it back to 0 here specifically. */
.module h3.pos-unpaid-reservations-title {
	margin-top: 0;
}

.sophia-admin .pos-cashier {
	padding-top: 0.5rem;
}

/* jQuery UI's autocomplete widget ships no visual styling of its own here
   (we only load the JS, not jquery-ui.min.css, to avoid it clashing with
   Bootstrap 5's own button/dialog look) - style the dynamically-created
   dropdown list ourselves to match the rest of this page. */
.ui-autocomplete {
	/* This isn't just cosmetic - jquery-ui.css normally ships
	   ".ui-autocomplete { position: absolute; top: 0; left: 0; }" as core
	   widget CSS. We only load the JS (not the theme stylesheet) to avoid
	   clashing with Bootstrap, so that structural rule has to be replicated
	   here too - without it the dropdown renders in normal document flow
	   and pushes the rest of the page down instead of floating over it. */
	position: absolute;
	top: 0;
	left: 0;
	max-height: 18rem;
	overflow-y: auto;
	overflow-x: hidden;
	border-radius: 0.5rem;
	background: #fff;
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
	list-style: none;
	margin: 0.25rem 0 0;
	padding: 0;
	z-index: 1060;
}

.ui-autocomplete li {
	padding: 0;
}

.ui-autocomplete .ui-menu-item-wrapper {
	padding: 0.75rem 1rem;
	cursor: pointer;
}

.ui-autocomplete .ui-menu-item-wrapper:hover,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
	background: #f1f3f5;
}

/* This dropdown is a small, deliberately theme-independent light popup
   (matches the reference product this page is modeled on), not something
   that should follow the admin's dark/light toggle. Force text color on
   every descendant with !important - the admin's dark theme sets `color`
   on <body>, which normally inherits down through every element including
   whatever jQuery UI/our JS creates inside this popup, silently winning
   over non-!important rules regardless of selector specificity. */
.ui-autocomplete,
.ui-autocomplete * {
	color: #212529 !important;
}

.ui-autocomplete .text-danger,
.ui-autocomplete .text-danger * {
	color: #dc3545 !important;
}

.ui-autocomplete .text-muted,
.ui-autocomplete .text-muted * {
	color: #6c757d !important;
}

.sophia-admin .pos-search-clear {
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
}

.sophia-admin .pos-action-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 5.5rem;
	font-weight: 700;
}

.sophia-admin .pos-action-btn i {
	font-size: 1.5rem;
}

/* Point of Sale is a full-bleed cashier screen - drop the app-content
   padding that every other admin page uses so the two panels stretch to
   fill the whole viewport, then re-apply comfortable padding inside
   .pos-cashier itself instead. */
.sophia-admin.pos-fullscreen .app-content {
	padding: 0;
}

.sophia-admin .pos-cashier {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - 6.5rem);
	padding: 1rem 1.25rem 1.5rem;
}

.sophia-admin .pos-cashier > .row {
	flex: 1 1 auto;
}

.sophia-admin .pos-action-grid {
	flex: 0 0 auto;
}

/* DataTables' Bootstrap5 pagination (Previous/1/Next on the User/Role/
   UserProfile/EmailVerificationToken dialog-based admin pages) was
   rendering each page-item as its own separated, rounded button with a
   large gap instead of Bootstrap's normal joined pill bar -- force the
   standard connected look explicitly rather than depend on whichever
   broader rule was leaking margin/border-radius onto it. */
.sophia-admin .dataTables_paginate .pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.sophia-admin .dataTables_paginate .page-item {
	margin: 0 !important;
}

.sophia-admin .dataTables_paginate .page-item .page-link {
	border-radius: 0;
	margin-left: -1px;
}

.sophia-admin .dataTables_paginate .page-item:first-child .page-link {
	margin-left: 0;
	border-top-left-radius: 0.375rem;
	border-bottom-left-radius: 0.375rem;
}

.sophia-admin .dataTables_paginate .page-item:last-child .page-link {
	border-top-right-radius: 0.375rem;
	border-bottom-right-radius: 0.375rem;
}

/* The actual source of the gap: DataTables' own base stylesheet
   (jquery.dataTables.min.css, loaded alongside the Bootstrap5 one) still
   applies .paginate_button's non-Bootstrap padding/margin on top of the
   .page-link styling above. */
.dataTables_wrapper .dataTables_paginate .paginate_button {
	padding: 0 !important;
	margin-left: 0 !important;
}