/*
 * Panel design layer (admin + dealer), in the same visual language as the login
 * page: system font, soft colour field, glass header/menus, rounded cards,
 * filled fields, capsule buttons. Light and dark follow the OS setting.
 * Plain CSS, loaded after style.css; not part of the mix build.
 * Selectors are prefixed with body.app to win over CoreUI without !important.
 */

:root {
	--tp-bg: #f5f5f7;
	--tp-glow-1: rgba(10, 132, 255, .10);
	--tp-glow-2: rgba(191, 90, 242, .08);
	--tp-surface: #fff;
	--tp-surface-2: #f5f5f7;
	--tp-glass: rgba(255, 255, 255, .72);
	--tp-menu: rgba(255, 255, 255, .92);
	--tp-separator: rgba(60, 60, 67, .12);
	--tp-text: #1d1d1f;
	--tp-text-2: #6e6e73;
	--tp-fill: rgba(120, 120, 128, .1);
	--tp-fill-hover: rgba(120, 120, 128, .16);
	--tp-stripe: rgba(120, 120, 128, .06);
	--tp-accent: #0a84ff;
	--tp-accent-hover: #0077ed;
	--tp-ring: rgba(10, 132, 255, .3);

	/* Status colours (Apple system palette). *-text is for text on the page,
	   the plain token is a fill that carries white text; both keep >= 3:1. */
	--tp-primary: #0071e3;
	--tp-success: #248a3d;
	--tp-info: #0071a4;
	--tp-warning: #b25000;
	--tp-danger: #d70015;
	--tp-primary-text: #0066cc;
	--tp-success-text: #1e7a36;
	--tp-info-text: #006494;
	--tp-warning-text: #a14700;
	--tp-danger-text: #c20012;
	--tp-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
	--tp-shadow-pop: 0 20px 50px rgba(0, 0, 0, .18);
	--tp-radius: 18px;
	--tp-radius-sm: 10px;

	/* Sidebar: light, macOS-style in the day theme */
	--tp-sb-bg: rgba(246, 246, 248, .86);
	--tp-sb-text: #1d1d1f;
	--tp-sb-icon: #0a84ff;
	--tp-sb-title: #8e8e93;
	--tp-sb-hover: rgba(120, 120, 128, .12);
	--tp-sb-active-bg: rgba(10, 132, 255, .14);
	--tp-sb-active-text: #0a60c9;
	--tp-sb-thumb: rgba(0, 0, 0, .18);
	--tp-sb-minimizer-filter: invert(.55);
}

/* Night theme. data-theme is set on <html> by partials/theme-init before first paint:
   "auto" follows the OS, or the user picks light/dark in the header switch. */
:root[data-theme="light"] {
	color-scheme: light;
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--tp-bg: #000;
	--tp-glow-1: rgba(10, 132, 255, .16);
	--tp-glow-2: rgba(191, 90, 242, .12);
	--tp-surface: #1c1c1e;
	--tp-surface-2: #2c2c2e;
	--tp-glass: rgba(28, 28, 30, .72);
	--tp-menu: rgba(36, 36, 38, .94);
	--tp-separator: rgba(84, 84, 88, .5);
	--tp-text: #f5f5f7;
	--tp-text-2: #a1a1a6;
	--tp-fill: rgba(120, 120, 128, .22);
	--tp-fill-hover: rgba(120, 120, 128, .32);
	--tp-stripe: rgba(255, 255, 255, .035);
	--tp-ring: rgba(10, 132, 255, .45);

	--tp-primary: #0a70d8;
	--tp-success: #248a3d;
	--tp-info: #0077a8;
	--tp-warning: #b25000;
	--tp-danger: #d70015;
	--tp-primary-text: #409cff;
	--tp-success-text: #30d158;
	--tp-info-text: #64d2ff;
	--tp-warning-text: #ffd60a;
	--tp-danger-text: #ff6961;
	--tp-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .35);
	--tp-shadow-pop: 0 20px 50px rgba(0, 0, 0, .6);

	--tp-sb-bg: #0d0d0f;
	--tp-sb-text: #f5f5f7;
	--tp-sb-icon: #a1a1a6;
	--tp-sb-title: #8e8e93;
	--tp-sb-hover: rgba(255, 255, 255, .08);
	--tp-sb-active-bg: rgba(255, 255, 255, .1);
	--tp-sb-active-text: #fff;
	--tp-sb-thumb: rgba(255, 255, 255, .2);
	--tp-sb-minimizer-filter: none;

	/* CoreUI grey tokens used by inline utilities */
	--light: #2c2c2e;
	--gray-100: #1c1c1e;
	--gray-200: #3a3a3c;
	--gray-300: #48484a;
}

/* ---------- Page ---------- */

/* The page canvas: Safari shows it above and below the page (bars, overscroll); the
   body gradient alone left it white in the dark theme */
html {
	background-color: var(--tp-bg);
}

body.app {
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	color: var(--tp-text);
	background:
		radial-gradient(60vmax 60vmax at 0% 0%, var(--tp-glow-1), transparent 60%),
		radial-gradient(60vmax 60vmax at 100% 100%, var(--tp-glow-2), transparent 60%),
		var(--tp-bg);
	background-attachment: fixed;
}

body.app .app-body,
body.app .main {
	background: transparent;
	color: var(--tp-text);
}

body.app h1, body.app h2, body.app h3,
body.app h4, body.app h5, body.app h6,
body.app .h1, body.app .h2, body.app .h3,
body.app .h4, body.app .h5, body.app .h6 {
	color: var(--tp-text);
	letter-spacing: -.015em;
}

body.app .text-muted {
	color: var(--tp-text-2) !important;
}

body.app a {
	color: var(--tp-accent);
}

body.app a:hover {
	color: var(--tp-accent-hover);
}

body.app hr {
	border-top-color: var(--tp-separator);
}

body.app .bg-white,
body.app .bg-light {
	background-color: var(--tp-surface) !important;
}

/* ---------- Header: glass bar at every width ---------- */

/* backdrop-filter makes the header its own stacking context; lift it so its
   dropdowns (theme, account) stay above the page in the dealer layout too */
body.app .app-header.navbar {
	z-index: 1020;
	background-color: var(--tp-glass);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	border-bottom: 1px solid var(--tp-separator);
	color: var(--tp-text);
}

@media (max-width: 991.98px) {
	body.app .app-header.navbar {
		background-color: var(--tp-glass);
		border-bottom-color: var(--tp-separator);
	}
}

body.app .app-header .text-white,
body.app .app-header .nav-item,
body.app .app-header .nav-link,
body.app .app-header label {
	color: var(--tp-text) !important;
}

body.app .app-header .nav-link {
	border-radius: 999px;
	transition: background-color .15s ease;
}

body.app .app-header .nav > li > .nav-link:hover,
body.app .app-header .nav > li > .nav-link.active {
	background: var(--tp-fill);
}

body.app .app-header .form-control {
	background: transparent;
	box-shadow: none;
}

/* Dealer header: brand chip that links to the dashboard (admin has no icon) */
body.app .app-header .logo {
	display: inline-flex;
	align-items: center;
}

body.app .app-header .logo .fa-microchip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	font-size: 1rem;
	color: #fff;
	background:
		linear-gradient(160deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 45%),
		linear-gradient(145deg, #5ac8fa, #0a84ff 55%, #5e5ce6);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), 0 4px 10px rgba(10, 132, 255, .3);
	transition: transform .15s ease;
}

body.app .app-header .logo:hover .fa-microchip {
	transform: scale(1.06);
}

/* Menu toggler sits at the far left of the header */
body.app .app-header.navbar .navbar-toggler {
	border: 0;
	margin-left: .25rem;
}

/* Theme switch in the header */
body.app .theme-switch > .nav-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	margin-right: .5rem;
	font-size: 1rem;
}

body.app .theme-switch .dropdown-menu {
	min-width: 11rem;
}

body.app .theme-switch .dropdown-item {
	display: flex;
	align-items: center;
	gap: .5rem;
}

body.app .theme-switch .dropdown-item > i:first-child {
	width: 1.1em;
	margin: 0;
	color: var(--tp-text-2);
}

body.app .theme-switch .dropdown-item:hover > i:first-child {
	color: #fff;
}

body.app .theme-switch .dropdown-item.active {
	background: transparent;
	color: var(--tp-text);
	font-weight: 600;
}

body.app .theme-switch .dropdown-item:hover {
	background: var(--tp-accent);
	color: #fff;
}

body.app .theme-switch .theme-check {
	margin-left: auto;
	visibility: hidden;
	color: var(--tp-accent);
}

body.app .theme-switch .dropdown-item.active .theme-check {
	visibility: visible;
}

body.app .theme-switch .dropdown-item:hover .theme-check {
	color: #fff;
}

/* ---------- Sidebar (admin, and dealer on mobile) ---------- */

body.app .sidebar {
	background: var(--tp-sb-bg);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	border-right: 1px solid var(--tp-separator);
	color: var(--tp-sb-text);
}

body.app .sidebar .nav-title,
body.app .sidebar .nav-label {
	color: var(--tp-sb-title);
}

body.app .sidebar .nav-link {
	border-radius: var(--tp-radius-sm);
	margin: 1px 8px;
	color: var(--tp-sb-text);
	background: transparent;
}

body.app .sidebar .nav-link i {
	color: var(--tp-sb-icon);
}

body.app .sidebar .nav-link:hover {
	background: var(--tp-sb-hover);
	color: var(--tp-sb-text);
}

body.app .sidebar .nav-link:hover i {
	color: var(--tp-sb-icon);
}

body.app .sidebar .nav-link.active {
	background: var(--tp-sb-active-bg);
	color: var(--tp-sb-active-text);
	font-weight: 600;
}

body.app .sidebar .nav-link.active i {
	color: var(--tp-accent);
}

body.app .sidebar .nav-dropdown.open {
	background: transparent;
}

body.app .sidebar .sidebar-minimizer {
	background: transparent;
	border-top: 1px solid var(--tp-separator);
}

body.app .sidebar .sidebar-minimizer:hover {
	background: var(--tp-sb-hover);
}

body.app .sidebar .sidebar-minimizer::before {
	filter: var(--tp-sb-minimizer-filter);
}

body.app.sidebar-minimized .sidebar .nav > .nav-dropdown > .nav-dropdown-items,
body.app.sidebar-minimized .sidebar .nav > .nav-dropdown:hover {
	background: var(--tp-sb-bg);
}

/* CoreUI fixes .nav at 250px; when the menu scrolls, the scrollbar eats 10px
   and the right edge of the highlighted item was clipped. Fill the scroll area. */
body.app:not(.sidebar-minimized):not(.brand-minimized) .sidebar .nav {
	width: 100%;
}

/* Thin scrollbar instead of CoreUI's grey 10px track (always visible in Safari) */
body.app .sidebar .sidebar-nav {
	scrollbar-width: thin;
	scrollbar-color: var(--tp-sb-thumb) transparent;
}

body.app .sidebar .sidebar-nav::-webkit-scrollbar {
	width: 6px;
	margin-left: 0;
}

body.app .sidebar .sidebar-nav::-webkit-scrollbar-track {
	background: transparent;
	border: 0;
}

body.app .sidebar .sidebar-nav::-webkit-scrollbar-thumb {
	background: var(--tp-sb-thumb);
	background-clip: padding-box;
	border: 0;
	border-radius: 3px;
}

body.app .sidebar .sidebar-nav::-webkit-scrollbar-thumb:hover {
	background: var(--tp-sb-thumb);
	opacity: .8;
}

/* ---------- Breadcrumb and footer ---------- */

body.app .breadcrumb {
	background: transparent;
	border: 0;
}

/* Dealer layout puts the breadcrumb inside .container, which already pads;
   in the admin layout it sits directly in .main and keeps CoreUI's padding. */
body.app .container > .breadcrumb {
	padding-left: .25rem;
	padding-right: .25rem;
}

body.app .breadcrumb-item,
body.app .breadcrumb-item.active,
body.app .breadcrumb-item + .breadcrumb-item::before {
	color: var(--tp-text-2);
}

body.app .app-footer {
	background: transparent;
	border-top: 1px solid var(--tp-separator);
	color: var(--tp-text-2);
}

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

body.app .card,
body.app .tab-content,
body.app .jumbotron {
	background: var(--tp-surface);
	border: 0;
	border-radius: var(--tp-radius);
	box-shadow: var(--tp-shadow);
	color: var(--tp-text);
}

body.app .card {
	overflow: hidden;
}

body.app .card-header,
body.app .card-footer {
	background: transparent;
	border-color: var(--tp-separator);
	font-weight: 600;
}

body.app .card-header {
	position: relative;
	padding-top: .9rem;
	padding-bottom: .9rem;
}

/* Header action buttons (reset / reload): small round buttons, vertically centred */
body.app .card-header .card-actions {
	top: 50%;
	right: .75rem;
	height: auto;
	display: flex;
	gap: 6px;
	transform: translateY(-50%);
}

body.app .card-header .card-actions button,
body.app .card-header .card-actions a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--tp-fill);
	color: var(--tp-text-2);
	transition: background-color .15s ease;
}

body.app .card-header .card-actions button:hover,
body.app .card-header .card-actions a:hover {
	background: var(--tp-fill-hover);
}

/* Dashboard stat tiles: rounded icon block */
body.app .card-body.p-0 > i.float-left {
	border-radius: 14px;
	margin: .5rem;
	color: #fff;
}

/* Callouts keep their colour stripe */
body.app .callout {
	background: transparent;
	border-radius: 0;
}

body.app .callout:not([class*="callout-"]) {
	border-left-color: var(--tp-separator);
}

/* Dashboard per-day stats: title + period on one line, bar chart below */
body.app .day-stat .day-stat-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: .5rem;
}

body.app .day-stat .day-stat-period {
	font-size: .7rem;
	opacity: .8;
	white-space: nowrap;
}

body.app .day-stat .h4 {
	display: block;
	margin: .1rem 0 .25rem;
}

body.app .day-chart-wrapper {
	position: relative;
	height: 64px;
}

body.app .orders-week-wrapper {
	position: relative;
	height: 240px;
}

/* Progress bars (admin servers / plans): track follows the theme */
body.app .progress {
	background-color: var(--tp-fill);
	border-radius: 999px;
}

body.app .progress-bar {
	border-radius: 999px;
}

/* .text-dark is used for links on the admin dashboard; keep it readable in dark mode */
body.app .text-dark {
	color: var(--tp-text) !important;
}

body.app a.text-dark:hover {
	color: var(--tp-accent) !important;
}

/* ---------- Tabs, list groups ---------- */

body.app .nav-tabs {
	border-bottom-color: var(--tp-separator);
}

body.app .nav-tabs .nav-link {
	color: var(--tp-text-2);
	border-radius: var(--tp-radius-sm) var(--tp-radius-sm) 0 0;
}

body.app .nav-tabs .nav-link.active,
body.app .nav-tabs .nav-item.show .nav-link {
	background: var(--tp-surface);
	border-color: var(--tp-separator) var(--tp-separator) var(--tp-surface);
	color: var(--tp-text);
}

body.app .tab-content {
	border-top-left-radius: 0;
}

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

body.app .list-group-item-action:hover {
	background: var(--tp-fill);
}

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

body.app .table {
	color: var(--tp-text);
}

body.app .table th,
body.app .table td {
	border-color: var(--tp-separator);
	vertical-align: middle;
}

body.app .table thead th {
	background: transparent;
	border-bottom: 1px solid var(--tp-separator);
	border-top: 0;
	color: var(--tp-text-2);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

body.app .table-striped tbody tr:nth-of-type(odd) {
	background: var(--tp-stripe);
}

body.app .table-hover tbody tr:hover {
	background: var(--tp-fill-hover);
	color: var(--tp-text);
}

body.app .table-bordered,
body.app .table-bordered th,
body.app .table-bordered td {
	border-color: var(--tp-separator);
}

body.app .dataTables_wrapper .dataTables_length,
body.app .dataTables_wrapper .dataTables_filter,
body.app .dataTables_wrapper .dataTables_info {
	color: var(--tp-text-2);
}

body.app td.dataTables_empty {
	color: var(--tp-text-2);
	background: transparent;
}

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

body.app .form-control,
body.app .custom-select {
	background-color: var(--tp-fill);
	border: 1px solid transparent;
	border-radius: var(--tp-radius-sm);
	color: var(--tp-text);
	transition: background-color .15s ease, box-shadow .15s ease;
}

body.app .form-control:focus,
body.app .custom-select:focus {
	background-color: var(--tp-surface);
	border-color: var(--tp-accent);
	box-shadow: 0 0 0 4px var(--tp-ring);
	color: var(--tp-text);
}

body.app .form-control::placeholder {
	color: var(--tp-text-2);
}

body.app .form-control:disabled,
body.app .form-control[readonly] {
	background-color: var(--tp-surface-2);
	color: var(--tp-text-2);
}

body.app .input-group-text {
	background: var(--tp-surface-2);
	border: 1px solid transparent;
	color: var(--tp-text-2);
	border-radius: var(--tp-radius-sm);
}

body.app .input-group > .form-control:not(:first-child),
body.app .input-group > .custom-select:not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

body.app .input-group > .form-control:not(:last-child),
body.app .input-group > .custom-select:not(:last-child) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

body.app .input-group > .input-group-prepend > .input-group-text {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

body.app .input-group > .input-group-append > .input-group-text,
body.app .input-group > .input-group-append > .btn {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

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

body.app .btn {
	border-radius: var(--tp-radius-sm);
	font-weight: 600;
	transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

body.app .btn:active {
	transform: scale(.98);
}

body.app .btn:focus,
body.app .btn.focus {
	box-shadow: 0 0 0 4px var(--tp-ring);
}

body.app .btn-primary {
	background: var(--tp-accent);
	border-color: var(--tp-accent);
	color: #fff;
}

body.app .btn-primary:hover {
	background: var(--tp-accent-hover);
	border-color: var(--tp-accent-hover);
}

body.app .btn-light,
body.app .btn-secondary,
body.app .btn-link.btn-secondary {
	background: var(--tp-fill);
	border-color: transparent;
	color: var(--tp-text);
}

body.app .btn-light:hover,
body.app .btn-secondary:hover {
	background: var(--tp-fill-hover);
	border-color: transparent;
	color: var(--tp-text);
}

body.app .btn-group > .btn:not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

body.app .btn-group > .btn:not(:last-child) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

/* ---------- Switches (CoreUI switch-3d): iOS-style track and knob ---------- */

body.app .switch-3d .switch-label,
body.app .switch.switch-3d .switch-label {
	background-color: var(--tp-fill-hover);
	border-color: transparent;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12);
}

body.app .switch-3d .switch-handle {
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

/* CoreUI marks checked colours !important; primary follows the panel accent */
body.app .switch-primary > .switch-input:checked ~ .switch-label {
	background: var(--tp-accent) !important;
	border-color: var(--tp-accent);
}

body.app .switch-primary > .switch-input:checked ~ .switch-handle {
	border-color: var(--tp-accent);
}

body.app .switch-input:disabled ~ .switch-label {
	opacity: .5;
}

/* ---------- Pagination ---------- */

body.app .pagination {
	gap: 4px;
}

body.app .page-link {
	border: 0;
	border-radius: 999px !important;
	background: transparent;
	color: var(--tp-accent);
	min-width: 2.1rem;
	text-align: center;
}

body.app .page-link:hover {
	background: var(--tp-fill);
	color: var(--tp-accent);
}

body.app .page-item.active .page-link {
	background: var(--tp-accent);
	color: #fff;
}

body.app .page-item.disabled .page-link {
	background: transparent;
	color: var(--tp-text-2);
	opacity: .6;
}

/* ---------- Dropdowns, modals, popovers: glass ---------- */

body.app .dropdown-menu,
body.app .popover {
	background: var(--tp-menu);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	backdrop-filter: blur(24px) saturate(180%);
	border: 1px solid var(--tp-separator);
	border-radius: 14px;
	box-shadow: var(--tp-shadow-pop);
	color: var(--tp-text);
	overflow: hidden;
	padding: 4px;
}

body.app .dropdown-item,
body.app .dropdown-header {
	border: 0;
	border-radius: 8px;
	color: var(--tp-text);
}

body.app .dropdown-header {
	background: transparent;
	color: var(--tp-text-2);
}

body.app .dropdown-item:hover,
body.app .dropdown-item:focus {
	background: var(--tp-accent);
	color: #fff;
}

body.app .dropdown-item:hover i {
	color: #fff;
}

body.app .dropdown-divider {
	border-top-color: var(--tp-separator);
}

body.app .modal-content {
	background: var(--tp-surface);
	border: 0;
	border-radius: 22px;
	box-shadow: var(--tp-shadow-pop);
	color: var(--tp-text);
	overflow: hidden;
}

body.app .modal-header,
body.app .modal-footer {
	background: transparent;
	border-color: var(--tp-separator);
}

body.app .modal[class*="modal-"] .modal-header {
	background: transparent;
	color: var(--tp-text);
}

body.app .modal-backdrop.show {
	opacity: .35;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

body.app .close {
	color: var(--tp-text);
	text-shadow: none;
}

/* ---------- Badges and alerts ---------- */

body.app .badge {
	border-radius: 999px;
	padding: .3em .65em;
	font-weight: 600;
}

body.app .alert {
	border: 0;
	border-radius: 14px;
}

body.app .badge-light {
	background: var(--tp-fill);
	color: var(--tp-text);
}

body.app .alert-light {
	background: var(--tp-fill);
	color: var(--tp-text);
}

/* ---------- Select2 ---------- */

body.app .select2-container--default .select2-selection--single,
body.app .select2-container--default .select2-selection--multiple,
body.app .select2-container--bootstrap .select2-selection {
	background: var(--tp-fill);
	border: 1px solid transparent;
	border-radius: var(--tp-radius-sm);
	color: var(--tp-text);
}

body.app .select2-container--default .select2-selection__rendered,
body.app .select2-container--bootstrap .select2-selection__rendered {
	color: var(--tp-text);
}

body.app .select2-dropdown {
	background: var(--tp-surface);
	border-color: var(--tp-separator);
	border-radius: var(--tp-radius-sm);
	color: var(--tp-text);
	overflow: hidden;
}

body.app .select2-search__field {
	background: var(--tp-fill);
	color: var(--tp-text);
}

body.app .select2-container--default .select2-results__option[aria-selected=true] {
	background: var(--tp-fill);
}

body.app .select2-container--default .select2-selection--multiple .select2-selection__choice {
	background: var(--tp-surface-2);
	border-color: var(--tp-separator);
	border-radius: 999px;
}

/* ---------- Dealer layout: sidebar brand and account ---------- */

body.dealer-app .sidebar {
	display: flex;
	flex-direction: column;
}

body.dealer-app .sidebar-brand {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: 1.1rem 1.1rem .6rem;
	color: var(--tp-sb-text);
	font-weight: 600;
	text-decoration: none;
}

body.dealer-app .sidebar-brand:hover {
	color: var(--tp-sb-text);
	text-decoration: none;
}

body.dealer-app .sidebar-brand .fa-microchip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	color: #fff;
	background:
		linear-gradient(160deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 45%),
		linear-gradient(145deg, #5ac8fa, #0a84ff 55%, #5e5ce6);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), 0 4px 10px rgba(10, 132, 255, .3);
}

body.dealer-app .sidebar .nav-title {
	text-align: left;
	padding: 1rem 1.25rem .4rem;
	letter-spacing: .06em;
}

/* CoreUI gives the nav the full sidebar height, which pushed the account block below
   the screen; take what is left and scroll inside instead */
body.dealer-app .sidebar .sidebar-nav {
	flex: 1 1 auto;
	height: auto;
	min-height: 0;
}

/* ...and the list inside had a min-height of the same full height: a scrollbar for nothing */
body.dealer-app .sidebar .sidebar-nav > .nav {
	min-height: 0;
}

body.dealer-app .sidebar-account {
	position: relative;
	padding: .6rem;
	padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
	border-top: 1px solid var(--tp-separator);
}

/* On phones 100vh is taller than what Safari shows, so the account block at the bottom
   of the menu sat under the browser's toolbar; dvh is the visible height */
@media (max-width: 991.98px) {
	body.app.sidebar-fixed .sidebar {
		height: calc(100vh - 60px);
		height: calc(100dvh - 60px);
	}
}

/* Account in the header on phones and tablets: the menu is closed there */
body.dealer-app .header-account .nav-link {
	display: inline-flex;
	align-items: center;
	padding: 0 .75rem 0 .25rem;
}

body.dealer-app .header-account .sidebar-account-avatar {
	flex-basis: 32px;
	height: 32px;
}

body.dealer-app .header-account .dropdown-menu {
	min-width: 13rem;
}

body.dealer-app .header-account-name {
	display: flex;
	flex-direction: column;
	padding: .35rem 1rem .5rem;
	line-height: 1.25;
}

body.dealer-app .header-account-name strong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.dealer-app .sidebar-account-button {
	display: flex;
	align-items: center;
	gap: .65rem;
	width: 100%;
	padding: .5rem .6rem;
	border: 0;
	border-radius: var(--tp-radius-sm);
	background: transparent;
	color: var(--tp-sb-text);
	text-align: left;
}

body.dealer-app .sidebar-account-button:hover,
body.dealer-app .sidebar-account.show .sidebar-account-button {
	background: var(--tp-sb-hover);
}

body.dealer-app .sidebar-account-avatar {
	display: inline-flex;
	flex: 0 0 34px;
	align-items: center;
	justify-content: center;
	height: 34px;
	border-radius: 50%;
	background: var(--tp-sb-active-bg);
	color: var(--tp-accent);
	font-size: .75rem;
	font-weight: 700;
}

body.dealer-app .sidebar-account-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	line-height: 1.2;
}

body.dealer-app .sidebar-account-text strong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.dealer-app .sidebar-account-text small {
	color: var(--tp-sb-title);
}

/* Opens upwards; data-display="static" keeps Popper from adding top/transform */
body.dealer-app .sidebar-account .dropdown-menu {
	left: .6rem;
	right: .6rem;
	bottom: calc(100% - .2rem);
	top: auto;
	transform: none;
}

/* Header balance with hide toggle */
body.dealer-app .header-balance {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
}

body.dealer-app .balance-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--tp-text-2);
}

body.dealer-app .balance-toggle:hover {
	background: var(--tp-fill);
}

html.balance-hidden body.dealer-app .balance-value {
	filter: blur(6px);
	user-select: none;
}

/* ---------- Dealer dashboard ---------- */

body.dealer-app .dealer-home {
	padding-top: .5rem;
	padding-bottom: 1.5rem;
}

body.dealer-app .page-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

body.dealer-app .page-head h1 {
	margin: 0 0 .25rem;
	font-size: 1.9rem;
	font-weight: 700;
	letter-spacing: -.02em;
}

body.dealer-app .page-head-action {
	border-radius: 12px;
	padding: .6rem 1.2rem;
	font-size: .95rem;
}

body.dealer-app .stat-row > [class*="col-"] {
	margin-bottom: 1.25rem;
}

body.dealer-app .stat-tile {
	display: block;
	height: 100%;
	padding: 1.1rem 1.2rem;
	border-radius: var(--tp-radius);
	background: var(--tp-surface);
	box-shadow: var(--tp-shadow);
	color: var(--tp-text);
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}

body.dealer-app .stat-tile:hover {
	color: var(--tp-text);
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: var(--tp-shadow-pop);
}

body.dealer-app .stat-tile-head {
	display: flex;
	justify-content: space-between;
	color: var(--tp-text-2);
	font-size: .85rem;
}

body.dealer-app .stat-tile-value {
	margin: .6rem 0 .35rem;
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.1;
}

body.dealer-app .stat-tile-value small {
	font-size: 1rem;
	font-weight: 600;
	color: var(--tp-text-2);
}

body.dealer-app .stat-tile-hint {
	color: var(--tp-text-2);
	font-size: .8rem;
}

body.dealer-app .dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: .35rem;
	border-radius: 50%;
	vertical-align: middle;
}

body.dealer-app .dot-primary { background: #20a8d8; }
body.dealer-app .dot-danger { background: #f86c6b; }
body.dealer-app .dot-warning { background: #ffc107; }
body.dealer-app .dot-success { background: #4dbd74; }

body.dealer-app .card-head-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: .75rem;
}

body.dealer-app .card-heading {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
}

body.dealer-app .big-number {
	font-size: 1.6rem;
	font-weight: 700;
}

body.dealer-app .new-orders-wrapper {
	position: relative;
	height: 180px;
}

body.dealer-app .week-list {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

body.dealer-app .week-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .75rem 0;
	border-bottom: 1px solid var(--tp-separator);
}

body.dealer-app .week-list li:last-child {
	border-bottom: 0;
}

body.dealer-app .week-list strong {
	font-size: 1.05rem;
}

body.dealer-app .attention-tabs {
	gap: 1.25rem;
	border-bottom: 1px solid var(--tp-separator);
}

body.dealer-app .attention-tabs .nav-link {
	padding: .5rem 0 .65rem;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: var(--tp-text-2);
	font-weight: 600;
}

body.dealer-app .attention-tabs .nav-link.active {
	border-bottom-color: var(--tp-accent);
	color: var(--tp-accent);
}

body.dealer-app .attention-tabs .badge {
	margin-left: .25rem;
	background: var(--tp-fill);
	color: var(--tp-text-2);
}

body.dealer-app .attention-card .table {
	margin: 0;
}

body.dealer-app .attention-card .table th:first-child,
body.dealer-app .attention-card .table td:first-child {
	padding-left: 1.25rem;
}

body.dealer-app .empty-state {
	padding: 2rem 1rem;
	text-align: center;
}

body.dealer-app .empty-state-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: .75rem;
	border-radius: 12px;
	background: var(--tp-fill);
	color: var(--tp-text-2);
	font-size: 1.1rem;
}

body.dealer-app .empty-state strong {
	display: block;
	margin-bottom: .25rem;
}

/* ---------- Dealer profile ---------- */

body.dealer-app .profile-hero .card-body {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 1.5rem;
}

body.dealer-app .profile-hero-avatar {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background:
		linear-gradient(160deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 45%),
		linear-gradient(145deg, #5ac8fa, #0a84ff 55%, #5e5ce6);
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
	box-shadow: 0 8px 20px rgba(10, 132, 255, .3);
}

body.dealer-app .profile-hero h1 {
	margin: 0;
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: -.02em;
}

body.dealer-app .profile-hero-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1rem;
	margin-top: .6rem;
	color: var(--tp-text-2);
	font-size: .85rem;
}

body.dealer-app .profile-hero-meta i {
	margin-right: .25rem;
}

body.dealer-app .badge-role {
	background: var(--tp-sb-active-bg);
	color: var(--tp-accent);
}

body.dealer-app .profile-page label {
	font-weight: 600;
	font-size: .85rem;
}

body.dealer-app .profile-page .card-footer {
	border-top: 1px solid var(--tp-separator);
	font-weight: normal;
}

body.dealer-app .access-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5rem 1rem;
	margin: 0 0 .75rem;
	padding: 0;
	list-style: none;
	font-size: .9rem;
}

body.dealer-app .access-list .is-on i {
	color: #34c759;
}

@media (max-width: 575.98px) {
	body.dealer-app .profile-hero .card-body {
		flex-direction: column;
		text-align: center;
	}

	body.dealer-app .profile-hero-meta {
		justify-content: center;
	}
}

/* Tabbed edit modals: a dot marks tabs with unsaved changes */
body.app .nav-tabs .nav-link.tab-dirty::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: .4rem;
	border-radius: 50%;
	background: var(--tp-accent);
	vertical-align: middle;
}

/* Deposit / withdraw lock each other while one has input */
body.app .nav-tabs .nav-link.tab-locked {
	opacity: .45;
}

body.app .money-lock {
	margin-bottom: 1rem;
	font-size: .85rem;
}

/* ---------- Status colours with readable contrast ----------
   CoreUI's brand colours (#20a8d8, #79c447, #67c2ef, #fabb3d) are too light for
   text on white and for white text on top of them (1.7-2.7:1). */

body.app .text-primary { color: var(--tp-primary-text) !important; }
body.app .text-success { color: var(--tp-success-text) !important; }
body.app .text-info, body.app .text-cyan { color: var(--tp-info-text) !important; }
body.app .text-warning { color: var(--tp-warning-text) !important; }
body.app .text-danger { color: var(--tp-danger-text) !important; }

body.app .bg-primary, body.app .badge-primary, body.app .progress-bar:not([class*="bg-"]) { background-color: var(--tp-primary) !important; color: #fff; }
body.app .bg-success, body.app .badge-success { background-color: var(--tp-success) !important; color: #fff; }
body.app .bg-info, body.app .badge-info { background-color: var(--tp-info) !important; color: #fff; }
body.app .bg-warning, body.app .badge-warning { background-color: var(--tp-warning) !important; color: #fff; }
body.app .bg-danger, body.app .badge-danger { background-color: var(--tp-danger) !important; color: #fff; }
body.app .border-primary { border-color: var(--tp-primary) !important; }

body.app .btn-success { background-color: var(--tp-success); border-color: var(--tp-success); color: #fff; }
body.app .btn-info { background-color: var(--tp-info); border-color: var(--tp-info); color: #fff; }
body.app .btn-warning { background-color: var(--tp-warning); border-color: var(--tp-warning); color: #fff; }
body.app .btn-danger { background-color: var(--tp-danger); border-color: var(--tp-danger); color: #fff; }

body.app .btn-outline-primary { color: var(--tp-primary-text); border-color: var(--tp-primary-text); }
body.app .btn-outline-success { color: var(--tp-success-text); border-color: var(--tp-success-text); }
body.app .btn-outline-info { color: var(--tp-info-text); border-color: var(--tp-info-text); }
body.app .btn-outline-warning { color: var(--tp-warning-text); border-color: var(--tp-warning-text); }
body.app .btn-outline-danger { color: var(--tp-danger-text); border-color: var(--tp-danger-text); }

body.app .btn-outline-primary:hover { background-color: var(--tp-primary); border-color: var(--tp-primary); color: #fff; }
body.app .btn-outline-success:hover { background-color: var(--tp-success); border-color: var(--tp-success); color: #fff; }
body.app .btn-outline-info:hover { background-color: var(--tp-info); border-color: var(--tp-info); color: #fff; }
body.app .btn-outline-warning:hover { background-color: var(--tp-warning); border-color: var(--tp-warning); color: #fff; }
body.app .btn-outline-danger:hover { background-color: var(--tp-danger); border-color: var(--tp-danger); color: #fff; }

/* Page actions next to the breadcrumb (Archive, Create, Sort): CoreUI grey #9faecb */
body.app .breadcrumb-menu .btn {
	color: var(--tp-accent);
	font-weight: 600;
}

body.app .breadcrumb-menu .btn:hover {
	color: var(--tp-accent-hover);
	background: var(--tp-fill);
}

/* Period slider (ion.rangeSlider, flat skin) and tags input follow the theme */
body.app .irs--flat .irs-line {
	background-color: var(--tp-fill-hover);
}

body.app .irs--flat .irs-bar,
body.app .irs--flat .irs-handle > i:first-child,
body.app .irs--flat .irs-from,
body.app .irs--flat .irs-to,
body.app .irs--flat .irs-single {
	background-color: var(--tp-primary);
	color: #fff;
}

body.app .irs--flat .irs-from::before,
body.app .irs--flat .irs-to::before,
body.app .irs--flat .irs-single::before {
	border-top-color: var(--tp-primary);
}

body.app .irs--flat .irs-min,
body.app .irs--flat .irs-max {
	background-color: var(--tp-fill);
	color: var(--tp-text-2);
}

body.app .irs--flat .irs-grid-text {
	color: var(--tp-text-2);
}

body.app .irs--flat .irs-grid-pol {
	background-color: var(--tp-separator);
}

body.app div.tagsinput {
	width: 100% !important;
	border: 1px solid transparent;
	border-radius: var(--tp-radius-sm);
	background: var(--tp-fill);
	color: var(--tp-text);
}

body.app div.tagsinput input {
	color: var(--tp-text);
}

body.app div.tagsinput span.tag {
	border: 0;
	border-radius: 999px;
	background: var(--tp-sb-active-bg);
	color: var(--tp-accent);
	font-family: inherit;
	padding: 3px 10px;
}

body.app div.tagsinput span.tag a {
	color: var(--tp-accent);
}

/* ---------- Row action buttons: outline at rest, inverted when pressed ----------
   .active / [aria-pressed=true] marks a toggle that is ON (e.g. a paused order shows
   its resume button filled). :active gives the same inversion while clicking. */

body.app .btn-outline-secondary {
	background: transparent;
	border-color: var(--tp-text-2);
	color: var(--tp-text-2);
}

body.app .btn-outline-secondary:hover {
	background: var(--tp-text-2);
	border-color: var(--tp-text-2);
	color: var(--tp-surface);
}

body.app .btn-outline-primary:not(:disabled):active,
body.app .btn-outline-primary.active { background-color: var(--tp-primary) !important; border-color: var(--tp-primary) !important; color: #fff !important; }
body.app .btn-outline-success:not(:disabled):active,
body.app .btn-outline-success.active { background-color: var(--tp-success) !important; border-color: var(--tp-success) !important; color: #fff !important; }
body.app .btn-outline-info:not(:disabled):active,
body.app .btn-outline-info.active { background-color: var(--tp-info) !important; border-color: var(--tp-info) !important; color: #fff !important; }
body.app .btn-outline-warning:not(:disabled):active,
body.app .btn-outline-warning.active { background-color: var(--tp-warning) !important; border-color: var(--tp-warning) !important; color: #fff !important; }
body.app .btn-outline-danger:not(:disabled):active,
body.app .btn-outline-danger.active { background-color: var(--tp-danger) !important; border-color: var(--tp-danger) !important; color: #fff !important; }
body.app .btn-outline-secondary:not(:disabled):active,
body.app .btn-outline-secondary.active { background-color: var(--tp-text-2) !important; border-color: var(--tp-text-2) !important; color: var(--tp-surface) !important; }

/* pressed toggles sit slightly "in" and stay above neighbours in a button group */
body.app .btn-toggle.active,
body.app .btn[aria-pressed="true"] {
	position: relative;
	z-index: 2;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25);
}

body.app .btn[class*="btn-outline-"]:not(:disabled):active {
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25);
	transform: none;
}

/* Impersonation: lives in the fixed header so the way back is always visible */
.impersonate-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: 12px;
	padding: 4px 4px 4px 12px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--tp-warning) 16%, transparent);
	color: var(--tp-text);
	font-size: 0.875rem;
	white-space: nowrap;
	overflow: hidden;
}
.impersonate-bar > i { color: var(--tp-warning-text); }
.impersonate-bar > span { overflow: hidden; text-overflow: ellipsis; }
.impersonate-bar .btn { border-radius: 999px; flex-shrink: 0; }
@media (max-width: 767.98px) {
	.impersonate-bar { padding: 0; background: none; }
}

/* Confirmation dialog (SweetAlert2): same surface as the modals, buttons by intent.
   The server marks the title with .swal-intent-{danger|warning|primary}. */
.swal2-container.swal2-backdrop-show {
	background: rgba(0, 0, 0, .35);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.swal2-container .swal2-popup {
	width: min(400px, calc(100vw - 32px));
	padding: 28px 24px 22px;
	background: var(--tp-surface);
	border-radius: 22px;
	box-shadow: var(--tp-shadow-pop);
	color: var(--tp-text);
	font-family: inherit;
}
.swal2-container .swal2-popup .swal2-title {
	margin: 0 0 6px;
	color: var(--tp-text);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -.01em;
}
.swal2-container .swal2-popup .swal2-content {
	color: var(--tp-text-2);
	font-size: .9375rem;
	font-weight: 400;
}
.swal2-container .swal2-popup .swal2-actions {
	gap: 10px;
	margin: 22px 0 0;
	flex-wrap: nowrap;
}
.swal2-container .swal2-popup .swal2-actions .btn {
	flex: 1 1 0;
	margin: 0;
	padding: 9px 16px;
	border: 0;
	border-radius: 12px;
	font-weight: 600;
	box-shadow: none;
}
.swal2-container .swal2-popup .swal2-actions .btn:focus {
	box-shadow: 0 0 0 4px var(--tp-ring);
}
/* cancel first, the action on the right, as in macOS dialogs */
.swal2-container .swal2-popup .swal2-cancel {
	order: 1;
	background: var(--tp-fill);
	color: var(--tp-text);
}
.swal2-container .swal2-popup .swal2-cancel:hover { background: var(--tp-fill-hover); color: var(--tp-text); }
.swal2-container .swal2-popup .swal2-confirm {
	order: 2;
	background: var(--tp-accent);
	color: #fff;
}
.swal2-container .swal2-popup .swal2-confirm:hover { background: var(--tp-accent-hover); color: #fff; }
.swal2-container .swal2-popup:has(.swal-intent-danger) .swal2-confirm { background: var(--tp-danger); }
.swal2-container .swal2-popup:has(.swal-intent-warning) .swal2-confirm { background: var(--tp-warning); }
.swal2-container .swal2-popup:has(.swal-intent-danger) .swal2-confirm:hover,
.swal2-container .swal2-popup:has(.swal-intent-warning) .swal2-confirm:hover { filter: brightness(1.08); }

/* ---------- List page (dealer panel: Dealers) ---------- */
body.dealer-app .list-card {
	overflow: hidden;
	padding: 0;
}
body.dealer-app .list-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1rem;
	padding: 1.1rem 1.25rem;
}
body.dealer-app .list-card-title {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
}
body.dealer-app .list-card-count {
	min-width: 1.5rem;
	padding: .1rem .45rem;
	border-radius: 6px;
	background: var(--tp-sb-active-bg);
	color: var(--tp-accent);
	font-size: .75rem;
	font-weight: 700;
	text-align: center;
}
body.dealer-app .list-card-count:empty { display: none; }
body.dealer-app .list-card-tools { display: flex; flex: 0 1 360px; align-items: center; gap: .5rem; }
body.dealer-app .list-card-search { flex: 1 1 auto; }
body.dealer-app .list-tool {
	display: inline-flex;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 10px;
	background: var(--tp-fill);
	color: var(--tp-text);
}
body.dealer-app .list-tool:hover { background: var(--tp-fill-hover); }
body.dealer-app .list-tool.active { background: var(--tp-sb-active-bg); color: var(--tp-accent); }
body.dealer-app .list-card-filters { padding: 0 1.25rem 1rem; }
body.dealer-app .list-card-filters .row > [class*="col-"] { margin-bottom: .5rem; }
body.dealer-app .list-card-filters-foot { display: flex; justify-content: flex-end; }
body.dealer-app .list-sub { display: block; color: var(--tp-text-2); font-size: .8rem; font-weight: 400; }
body.dealer-app .list-strong { font-weight: 600; }
body.dealer-app .list-table td a.list-link { color: var(--tp-text); font-weight: 600; }
body.dealer-app .list-table td a.list-link:hover { color: var(--tp-accent); }
body.dealer-app .list-card-search .dataTables_filter,
body.dealer-app .list-card-search .dataTables_filter label { width: 100%; margin: 0; }
body.dealer-app .list-card-search input.form-control {
	width: 100%;
	height: 40px;
	margin: 0;
	padding-left: 2.25rem;
	border-radius: 10px;
	background: var(--tp-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m14 14-3.2-3.2'/%3E%3C/svg%3E") no-repeat .8rem center;
	border: 1px solid transparent;
}
body.dealer-app .list-card-search input.form-control:focus { border-color: var(--tp-accent); }

body.dealer-app .list-table {
	width: 100% !important;
	margin: 0 !important;
	border-collapse: collapse !important;
}
body.dealer-app .list-table thead th {
	padding: .7rem .75rem;
	border: 0;
	border-top: 1px solid var(--tp-separator);
	border-bottom: 1px solid var(--tp-separator);
	background: var(--tp-stripe);
	color: var(--tp-text-2);
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
}
body.dealer-app .list-table tbody td {
	padding: 1rem .75rem;
	border: 0;
	border-bottom: 1px solid var(--tp-separator);
	vertical-align: middle;
	background: transparent !important;
}
body.dealer-app .list-table tbody tr:last-child td { border-bottom: 0; }
body.dealer-app .list-table tbody tr:hover td { background: var(--tp-stripe) !important; }
body.dealer-app .list-num { font-variant-numeric: tabular-nums; font-weight: 600; }
body.dealer-app .list-muted { color: var(--tp-text-2); font-weight: 400; }
body.dealer-app .list-count-link { color: var(--tp-text); text-decoration: underline; text-decoration-color: var(--tp-separator); text-underline-offset: 3px; }
body.dealer-app .list-count-link:hover { color: var(--tp-accent); text-decoration-color: currentColor; }

body.dealer-app .list-person { display: flex; align-items: center; gap: .85rem; min-width: 0; }
body.dealer-app .list-avatar {
	position: relative;
	display: inline-flex;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	height: 40px;
	border-radius: 11px;
	background: var(--tp-sb-active-bg);
	color: var(--tp-accent);
	font-size: .8rem;
	font-weight: 700;
}
body.dealer-app .list-online {
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 11px;
	height: 11px;
	border: 2px solid var(--tp-surface);
	border-radius: 50%;
	background: var(--tp-success);
}
body.dealer-app .list-person-text { display: flex; flex-direction: column; min-width: 0; }
body.dealer-app .list-table td.list-main { min-width: 180px; }
body.dealer-app .list-table td.list-main.is-tight { min-width: 0; }
body.dealer-app .list-table tr > :first-child { padding-left: 1.25rem; }
body.dealer-app .list-table tr > :last-child { padding-right: 1.25rem; }
body.dealer-app .list-person-name { font-weight: 600; overflow-wrap: break-word; }
body.dealer-app .list-person-id { color: var(--tp-text-2); font-size: .8rem; font-weight: 400; }
body.dealer-app .list-person-sub { color: var(--tp-text-2); font-size: .85rem; overflow-wrap: break-word; word-break: break-word; }

body.dealer-app .status-pill {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .2rem .6rem;
	border: 0;
	border-radius: 7px;
	font-size: .8rem;
	font-weight: 600;
	white-space: nowrap;
}
body.dealer-app .status-pill .status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
body.dealer-app .status-pill.is-on { background: color-mix(in srgb, var(--tp-success) 14%, transparent); color: var(--tp-success-text); }
body.dealer-app .status-pill.is-off { background: var(--tp-fill); color: var(--tp-text-2); }
body.dealer-app .status-pill.is-warn { background: color-mix(in srgb, var(--tp-warning) 14%, transparent); color: var(--tp-warning-text); }
body.dealer-app .status-pill.is-danger { background: color-mix(in srgb, var(--tp-danger) 12%, transparent); color: var(--tp-danger-text); }
body.dealer-app .status-pill.is-info { background: color-mix(in srgb, var(--tp-primary) 12%, transparent); color: var(--tp-primary-text); }
body.dealer-app button.status-pill { cursor: pointer; }
body.dealer-app button.status-pill:hover { filter: brightness(.95); box-shadow: inset 0 0 0 1px currentColor; }
body.dealer-app button.status-pill:focus { outline: 0; box-shadow: 0 0 0 3px var(--tp-ring); }

body.dealer-app .list-actions-row { display: flex; justify-content: flex-end; gap: .35rem; }
body.dealer-app .list-actions-row.is-many .list-action { width: 32px; height: 32px; }
body.dealer-app .list-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--tp-separator);
	border-radius: 10px;
	background: transparent;
	color: var(--tp-text);
}
body.dealer-app .list-action:hover { background: var(--tp-fill); color: var(--tp-accent); }
body.dealer-app .list-action span { display: none; }

body.dealer-app .list-pay.is-in { background: color-mix(in srgb, var(--tp-success) 14%, transparent); color: var(--tp-success-text); }
body.dealer-app .list-pay.is-out { background: var(--tp-fill); color: var(--tp-text-2); }
body.dealer-app .list-in { color: var(--tp-success-text); }
body.dealer-app .list-out { color: var(--tp-text); }
body.dealer-app .list-notes { max-width: 280px; color: var(--tp-text-2); }
body.dealer-app .list-action .list-danger { color: var(--tp-danger-text); }
body.dealer-app .list-action.btn-toggle.active {
	border-color: transparent;
	background: color-mix(in srgb, var(--tp-warning) 18%, transparent);
	color: var(--tp-warning-text);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .15);
}
body.dealer-app .list-person-name a { color: var(--tp-accent); }

body.dealer-app .list-card-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1rem;
	padding: .9rem 1.25rem;
	border-top: 1px solid var(--tp-separator);
	color: var(--tp-text-2);
	font-size: .85rem;
}
body.dealer-app .list-card-foot .dataTables_info { padding: 0; }
body.dealer-app .list-card-paging { display: flex; align-items: center; gap: 1rem; }
body.dealer-app .list-card-paging .dataTables_length label { display: flex; align-items: center; gap: .5rem; margin: 0; white-space: nowrap; }
body.dealer-app .list-card-paging .dataTables_length select { width: auto; height: 34px; padding: 0 1.75rem 0 .6rem; border-radius: 8px; }
body.dealer-app .list-card-paging .pagination { margin: 0; }
body.dealer-app .dataTables_processing {
	top: 50%;
	border: 0;
	border-radius: 10px;
	background: var(--tp-menu);
	color: var(--tp-text);
	box-shadow: var(--tp-shadow);
}

body.dealer-app .list-scroll { overflow-x: auto; }
body.dealer-app .list-card.is-cards .list-scroll { overflow: visible; }
/* auto-renewal pill: icon only in the table, with the word in the card view */
body.dealer-app .list-card:not(.is-cards) .status-pill .pill-label { display: none; }
body.dealer-app .list-card.is-cards .status-pill .pill-label { margin-left: .35rem; }

/* Card view: tpList.mount() sets .is-cards when the table does not fit its card
   (phones, or a narrow window beside the sidebar). Cells by role:
   .list-main full width, .list-num three in a row, .list-field two in a row,
   .list-row "label ... value" on one line, .list-actions the buttons. */
body.dealer-app .list-card.is-cards { background: transparent; box-shadow: none; overflow: visible; }
body.dealer-app .list-card.is-cards .list-card-head { padding: 0 0 .9rem; }
body.dealer-app .list-card.is-cards .list-card-tools { flex: 1 1 100%; }
body.dealer-app .list-card.is-cards .list-card-filters { margin: 0 0 .9rem; padding: 0; border: 0; }
body.dealer-app .list-card.is-cards .list-table thead { display: none; }
body.dealer-app .list-card.is-cards .list-table,
body.dealer-app .list-card.is-cards .list-table tbody { display: block; }
body.dealer-app .list-card.is-cards .list-table tbody tr {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	column-gap: .75rem;
	margin-bottom: .9rem;
	padding: 1rem;
	border: 1px solid var(--tp-separator);
	border-radius: 16px;
	background: var(--tp-surface);
}
body.dealer-app .list-card.is-cards .list-table tbody tr:hover td { background: transparent !important; }
body.dealer-app .list-card.is-cards .list-table tbody td {
	display: block;
	grid-column: span 6;
	min-width: 0;
	padding: .75rem 0;
	border: 0;
	border-top: 1px solid var(--tp-separator);
	text-align: left !important;
	white-space: normal;
}
body.dealer-app .list-card.is-cards .list-table tbody td:first-child { padding-top: 0; border-top: 0; }
body.dealer-app .list-card.is-cards .list-table tbody td.list-num { grid-column: span 2; }
body.dealer-app .list-card.is-cards .list-table tbody td.list-field,
body.dealer-app .list-card.is-cards .list-table tbody td.list-num.list-field { grid-column: span 3; }
body.dealer-app .list-card.is-cards .list-table tbody td[data-label]::before {
	content: attr(data-label);
	display: block;
	margin-bottom: .2rem;
	color: var(--tp-text-2);
	font-size: .75rem;
	font-weight: 400;
}
body.dealer-app .list-card.is-cards .list-table tbody td.list-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
body.dealer-app .list-card.is-cards .list-table tbody td.list-row::before { margin: 0; color: var(--tp-text); font-size: .875rem; }
body.dealer-app .list-card.is-cards .list-actions-row { flex-wrap: wrap; justify-content: stretch; gap: .5rem; }
body.dealer-app .list-card.is-cards .list-action { flex: 1 1 0; width: auto; height: 40px; padding: 0 .5rem; }
body.dealer-app .list-card.is-cards .list-actions-row.is-many .list-action { flex: 1 1 calc(50% - .25rem); }
body.dealer-app .list-card.is-cards .list-action span { display: inline; font-size: .85rem; white-space: nowrap; }
/* an empty result is one plain cell, not a card grid */
body.dealer-app .list-card.is-cards .list-table tbody td.dataTables_empty { padding: 1rem 0; border: 0; text-align: center !important; }
body.dealer-app .list-card.is-cards .list-card-foot { padding: 0; border: 0; }
body.dealer-app .list-card.is-cards .list-card-paging { width: 100%; justify-content: space-between; }

/* style.css underlines every button on hover (button:hover); buttons here are not
   links. .btn-link keeps its own underline. */
body button:not(.btn-link):hover,
body button:not(.btn-link):focus { text-decoration: none; }

/* order status: a non-clickable check/cross square, shaped like the action buttons */
body.dealer-app .status-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	font-size: .85rem;
	vertical-align: middle;
	cursor: default;
}
body.dealer-app .status-icon.is-on { background: color-mix(in srgb, var(--tp-success) 14%, transparent); color: var(--tp-success-text); }
body.dealer-app .status-icon.is-off { background: var(--tp-fill); color: var(--tp-text-2); }
body.dealer-app .status-icon.is-info { background: color-mix(in srgb, var(--tp-primary) 14%, transparent); color: var(--tp-primary-text); }
body.dealer-app button.status-icon { padding: 0; border: 0; cursor: pointer; }
body.dealer-app button.status-icon:hover { box-shadow: inset 0 0 0 1px currentColor; }
body.dealer-app button.status-icon:focus { outline: 0; box-shadow: 0 0 0 3px var(--tp-ring); }
body.dealer-app .list-card:not(.is-cards) .status-icon .pill-label { display: none; }
/* card view: the square grows to hold the word */
body.dealer-app .list-card.is-cards .status-icon:has(.pill-label) { width: auto; padding: 0 .7rem; gap: .4rem; }

/* table view: the row's actions form one segmented group (shared borders,
   rounded only at the ends); the card view keeps separate labelled buttons */
body.dealer-app .list-card:not(.is-cards) .list-actions-row { gap: 0; }
body.dealer-app .list-card:not(.is-cards) .list-actions-row .list-action { border-radius: 0; }
body.dealer-app .list-card:not(.is-cards) .list-actions-row .list-action + .list-action { margin-left: -1px; }
body.dealer-app .list-card:not(.is-cards) .list-actions-row .list-action:first-child { border-radius: 10px 0 0 10px; }
body.dealer-app .list-card:not(.is-cards) .list-actions-row .list-action:last-child { border-radius: 0 10px 10px 0; }
body.dealer-app .list-card:not(.is-cards) .list-actions-row .list-action:only-child { border-radius: 10px; }
body.dealer-app .list-card:not(.is-cards) .list-actions-row .list-action:hover,
body.dealer-app .list-card:not(.is-cards) .list-actions-row .list-action:focus { position: relative; z-index: 1; }

/* Admin (and the dealer overview's tables): row actions look like the dealer
   lists' segmented group - 32px, neutral hairline, red icon for destructive ones.
   Only the btn-group in table cells; count buttons elsewhere keep their style. */
body.app table.dataTable td .btn-group > .btn[class*="btn-outline-"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	min-width: 32px;
	height: 32px;
	padding: 0 .55rem;
	border-color: var(--tp-separator);
	background: transparent;
	color: var(--tp-text);
	font-size: .85rem;
	box-shadow: none;
}
body.app table.dataTable td .btn-group > .btn:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
body.app table.dataTable td .btn-group > .btn:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
body.app table.dataTable td .btn-group > .btn[class*="btn-outline-"]:hover,
body.app table.dataTable td .btn-group > .btn[class*="btn-outline-"]:focus {
	position: relative;
	z-index: 1;
	background: var(--tp-fill);
	color: var(--tp-accent);
	border-color: var(--tp-separator);
}
body.app table.dataTable td .btn-group > .btn.btn-outline-danger { color: var(--tp-danger-text); }
body.app table.dataTable td .btn-group > .btn.btn-outline-danger:hover { color: var(--tp-danger-text); }
/* pressed toggle (paused order: resume) keeps a visible state */
body.app table.dataTable td .btn-group > .btn.btn-toggle.active {
	background: color-mix(in srgb, var(--tp-warning) 18%, transparent);
	color: var(--tp-warning-text);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .15);
}

/* Admin tables: the check/cross and toggle squares (status, can_login, is_enabled,
   auto-renewal...) in the same soft palette as the dealer panel's status icons */
body.app table.dataTable td > .btn-sm.btn-success,
body.app table.dataTable td > .btn-sm.btn-primary,
body.app table.dataTable td > .btn-sm.btn-outline-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	font-size: .85rem;
	box-shadow: none;
	opacity: 1;
}
body.app table.dataTable td > .btn-sm.btn-success { background: color-mix(in srgb, var(--tp-success) 14%, transparent); color: var(--tp-success-text); }
body.app table.dataTable td > .btn-sm.btn-primary { background: color-mix(in srgb, var(--tp-primary) 14%, transparent); color: var(--tp-primary-text); }
body.app table.dataTable td > .btn-sm.btn-outline-secondary { background: var(--tp-fill); color: var(--tp-text-2); }
body.app table.dataTable td > .btn-sm:is(.btn-success, .btn-primary, .btn-outline-secondary):not(:disabled):hover { box-shadow: inset 0 0 0 1px currentColor; }
body.app table.dataTable td > .btn-sm:is(.btn-success, .btn-primary, .btn-outline-secondary):disabled { cursor: default; }


/* ---------- Packages (dealer: plans and their channels) ---------- */
body.dealer-app .package-grid > [class*="col-"] { margin-bottom: 1rem; }
body.dealer-app .page-head-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6rem;
	height: 1.6rem;
	margin-left: .35rem;
	padding: 0 .4rem;
	border: 1px solid var(--tp-separator);
	border-radius: 8px;
	color: var(--tp-text-2);
	font-size: .85rem;
	font-weight: 600;
	vertical-align: middle;
}
body.dealer-app .package-lead { max-width: 34rem; }
body.dealer-app .section-label {
	margin-bottom: .75rem;
	color: var(--tp-text-2);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}
body.dealer-app .package-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	padding: 1.1rem 1.2rem 0;
	color: var(--tp-text);
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
body.dealer-app .package-card:hover { color: var(--tp-text); text-decoration: none; transform: translateY(-1px); box-shadow: var(--tp-shadow-pop); }
body.dealer-app .package-card-head { display: flex; align-items: center; gap: .75rem; }
body.dealer-app .package-card .package-icon { flex-basis: 36px; height: 36px; border-radius: 10px; }
body.dealer-app .package-stats { display: flex; gap: 1rem; margin: 1.4rem 0 1.2rem; }
body.dealer-app .package-stat { display: flex; flex: 1; flex-direction: column; }
body.dealer-app .package-stat-value { font-size: 1.75rem; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
body.dealer-app .package-stat.is-muted .package-stat-value { color: var(--tp-text-2); font-weight: 500; }
body.dealer-app .package-stat-label { margin-top: .2rem; color: var(--tp-text-2); font-size: .8rem; }
body.dealer-app .package-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding: .8rem 0 .9rem;
	border-top: 1px solid var(--tp-separator);
	color: var(--tp-accent);
	font-size: .85rem;
	font-weight: 600;
}
body.dealer-app .package-arrow { transform: rotate(-45deg); }
body.dealer-app .package-icon {
	display: inline-flex;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	height: 44px;
	border: 1px solid var(--tp-separator);
	border-radius: 12px;
	background: var(--tp-fill);
	color: var(--tp-accent);
}
body.dealer-app .package-icon-lg { flex-basis: 56px; height: 56px; border-radius: 16px; font-size: 1.2rem; }
body.dealer-app .package-name { font-weight: 600; overflow-wrap: break-word; }
body.dealer-app .package-head-main { display: flex; align-items: center; gap: 1rem; }
body.dealer-app .package-head-main h1 { margin-bottom: .15rem; }


body.dealer-app .package-logo { overflow: hidden; background: var(--tp-fill); }
body.dealer-app .package-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
body.dealer-app .quality-badge {
	display: inline-block;
	padding: .1rem .4rem;
	border: 1px solid var(--tp-separator);
	border-radius: 6px;
	font-size: .75rem;
	font-weight: 600;
}
body.dealer-app .quality-badge.is-uhd { border-color: transparent; background: var(--tp-sb-active-bg); color: var(--tp-accent); }

/* package channels (dealer: /plans/{plan}) */
body.dealer-app .text-accent { color: var(--tp-accent); }
body.dealer-app .dot-sep { margin: 0 .4rem; color: var(--tp-text-2); }
body.dealer-app .catalog-tools { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
body.dealer-app .catalog-search,
body.dealer-app .catalog-category { position: relative; display: flex; align-items: center; }
body.dealer-app .catalog-search { flex: 1 1 320px; }
body.dealer-app .catalog-category { flex: 0 1 260px; }
body.dealer-app .catalog-search > i,
body.dealer-app .catalog-category > i { position: absolute; left: .9rem; color: var(--tp-text-2); pointer-events: none; }
body.dealer-app .catalog-tools .form-control { width: 100%; height: 44px; padding-left: 2.4rem; border-radius: 12px; }
body.dealer-app .catalog-foot { margin: .6rem 0 0; text-align: right; }

/* ---------- Subscriber profile (dealer: /clients/{client}) ---------- */
body.dealer-app .min-w-0 { min-width: 0; }
body.dealer-app .subscriber-head { display: flex; align-items: center; gap: 1rem; min-width: 0; }
body.dealer-app .subscriber-head h1 { overflow-wrap: anywhere; }
body.dealer-app .subscriber-avatar { flex-basis: 56px; height: 56px; border-radius: 16px; font-size: 1.05rem; }
body.dealer-app .subscriber-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
body.dealer-app .subscriber-btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .6rem 1rem;
	border: 1px solid var(--tp-separator);
	border-radius: 12px;
	background: transparent;
	color: var(--tp-text);
}
body.dealer-app .subscriber-btn:hover { background: var(--tp-fill); }
body.dealer-app .subscriber-notice {
	margin: -.5rem 0 1.25rem;
	padding: .7rem 1rem;
	border-radius: 12px;
	background: var(--tp-fill);
	color: var(--tp-text-2);
	overflow-wrap: anywhere;
}
body.dealer-app .subscriber-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-bottom: 1.75rem;
	border-top: 1px solid var(--tp-separator);
	border-bottom: 1px solid var(--tp-separator);
}
body.dealer-app .subscriber-fact { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.25rem 1rem 0; }
body.dealer-app .subscriber-fact + .subscriber-fact { padding-left: 1.25rem; border-left: 1px solid var(--tp-separator); }
body.dealer-app .subscriber-fact-label { color: var(--tp-text-2); font-size: .8rem; }
body.dealer-app .subscriber-fact-value { font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
body.dealer-app .subscriber-fact-value small { color: var(--tp-text-2); font-size: .85rem; font-weight: 400; }
body.dealer-app .subscriber-fact-value.is-soon { color: var(--tp-warning-text); }
body.dealer-app .subscriber-section { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; font-size: 1.05rem; font-weight: 600; }
body.dealer-app .subscriber-section-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; }
body.dealer-app .subscriber-more { color: var(--tp-accent); font-size: .85rem; font-weight: 600; }

body.dealer-app .access-card { margin-bottom: .9rem; padding: 1.1rem 1.25rem; }
body.dealer-app .access-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
body.dealer-app .access-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; min-width: 0; }
body.dealer-app .access-plan { font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
body.dealer-app .access-term { margin: .9rem 0 .75rem; }
body.dealer-app .access-bar { height: 6px; border-radius: 3px; background: var(--tp-fill); overflow: hidden; }
body.dealer-app .access-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--tp-accent); }
body.dealer-app .access-bar.is-soon > span { background: var(--tp-warning); }
body.dealer-app .access-term-text { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; margin-top: .45rem; font-size: .85rem; }
body.dealer-app .access-meta { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; font-size: .85rem; }
body.dealer-app .access-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--tp-separator); }
body.dealer-app .access-actions .btn { display: inline-flex; align-items: center; gap: .35rem; border-radius: 10px; }
body.dealer-app .list-action-text { border: 1px solid var(--tp-separator); background: transparent; color: var(--tp-text); }
body.dealer-app .list-action-text:hover { background: var(--tp-fill); color: var(--tp-accent); }
body.dealer-app .list-action-text.is-danger { color: var(--tp-danger-text); }
body.dealer-app .access-card.is-expired .access-plan,
body.dealer-app .access-card.is-off .access-plan { color: var(--tp-text-2); }

body.dealer-app .subscriber-list { padding: 0; overflow: hidden; }
body.dealer-app .subscriber-list-row { display: flex; align-items: center; gap: .8rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--tp-separator); }
body.dealer-app .subscriber-list-row:last-child { border-bottom: 0; }
body.dealer-app .subscriber-list-row .list-avatar { flex-basis: 34px; height: 34px; border-radius: 10px; }
body.dealer-app .subscriber-list-text { display: flex; flex: 1; flex-direction: column; min-width: 0; overflow-wrap: anywhere; font-size: .9rem; }
body.dealer-app .subscriber-list-amount { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
body.dealer-app .subscriber-empty { margin: 0; padding: 1rem 1.1rem; }

@media (max-width: 767.98px) {
	body.dealer-app .subscriber-facts { grid-template-columns: 1fr; }
	body.dealer-app .subscriber-fact + .subscriber-fact { padding-left: 0; border-left: 0; border-top: 1px solid var(--tp-separator); }
	body.dealer-app .access-main { flex-direction: column; gap: .5rem; }
	body.dealer-app .access-actions .btn { flex: 1 1 calc(50% - .2rem); justify-content: center; min-height: 40px; }
	body.dealer-app .subscriber-actions { width: 100%; }
	body.dealer-app .subscriber-actions .btn { flex: 1; justify-content: center; }
}
body.dealer-app a.list-row-link { display: block; color: inherit; text-decoration: none; }
body.dealer-app a.list-row-link:hover .list-person-name { color: var(--tp-accent); }

/* ---------- «Сьогодні» (dealer home) ---------- */
body.dealer-app .today-queue-head { margin-top: 0; }
body.dealer-app .today-queue { padding: 0; overflow: hidden; }
body.dealer-app .today-task { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--tp-separator); }
body.dealer-app .today-task:last-child { border-bottom: 0; }
body.dealer-app .today-task-mark { flex: 0 0 3px; align-self: stretch; border-radius: 2px; background: var(--tp-warning); }
body.dealer-app .today-task.is-ended .today-task-mark { background: var(--tp-danger); }
body.dealer-app .today-task-text { display: flex; flex: 1; flex-direction: column; min-width: 0; overflow-wrap: anywhere; font-size: .9rem; }
body.dealer-app .today-task-name { color: var(--tp-text); font-weight: 600; font-size: .95rem; }
body.dealer-app a.today-task-name:hover { color: var(--tp-accent); }
body.dealer-app .today-task-action { display: inline-flex; align-items: center; gap: .4rem; border-radius: 10px; white-space: nowrap; }
body.dealer-app .today-calm { display: flex; flex-direction: row; align-items: center; gap: .9rem; padding: 1rem 1.2rem; }
body.dealer-app .today-calm-icon {
	display: inline-flex;
	flex: 0 0 36px;
	align-items: center;
	justify-content: center;
	height: 36px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--tp-success) 14%, transparent);
	color: var(--tp-success-text);
}
body.dealer-app .today-timeline-head { display: flex; justify-content: space-between; padding: .7rem 1.1rem .3rem; }
body.dealer-app .today-timeline-row { display: grid; grid-template-columns: minmax(0, 9rem) 1fr 3.5rem; align-items: center; gap: .9rem; padding: .55rem 1.1rem; }
body.dealer-app .today-timeline-row:last-child { padding-bottom: .9rem; }
body.dealer-app .today-timeline-name { overflow: hidden; color: var(--tp-text); font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
body.dealer-app a.today-timeline-name:hover { color: var(--tp-accent); }
body.dealer-app .today-timeline-days { color: var(--tp-text-2); font-size: .85rem; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) {
	body.dealer-app .today-task { flex-wrap: wrap; }
	body.dealer-app .today-task-text { flex-basis: calc(100% - 1rem); }
	body.dealer-app .today-task .status-pill { margin-left: .9rem; }
	body.dealer-app .today-task-action { margin-left: auto; min-height: 40px; }
	/* the facts stay one compact row, so the queue (reason and action) comes up first */
	body.dealer-app .today .subscriber-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1.25rem; }
	body.dealer-app .today .subscriber-fact { padding: .7rem .5rem .7rem 0; }
	body.dealer-app .today .subscriber-fact + .subscriber-fact { padding-left: .6rem; border-top: 0; border-left: 1px solid var(--tp-separator); }
	body.dealer-app .today .subscriber-fact-label { font-size: .72rem; line-height: 1.25; }
	body.dealer-app .today .subscriber-fact-value { font-size: 1.2rem; }
}

/* ---------- group extension ---------- */
body.dealer-app .extend-selbar {
	position: fixed;
	left: 50%;
	bottom: 1rem;
	z-index: 1030;
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .55rem .7rem .55rem 1rem;
	border-radius: 14px;
	background: var(--tp-menu);
	box-shadow: var(--tp-shadow-pop);
	transform: translateX(-50%);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}
body.dealer-app .extend-selbar[hidden] { display: none; }
body.dealer-app .extend-selbar .btn { display: inline-flex; align-items: center; gap: .35rem; border-radius: 10px; }
body.dealer-app .today-task-pick,
body.dealer-app .list-pick { flex: 0 0 auto; width: 17px; height: 17px; margin: 0; accent-color: var(--tp-accent); cursor: pointer; }
body.dealer-app .list-pick-cell { flex-direction: row !important; flex-wrap: wrap; align-items: center; column-gap: .55rem; }
body.dealer-app .list-pick-cell .list-person-sub { flex-basis: 100%; padding-left: calc(17px + .55rem); }
body.dealer-app .extend-group-period { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: 1rem; }
body.dealer-app .extend-group-chip { margin: 0; cursor: pointer; }
body.dealer-app .extend-group-chip input { position: absolute; opacity: 0; pointer-events: none; }
body.dealer-app .extend-group-chip span { display: inline-block; padding: .35rem .8rem; border: 1px solid var(--tp-separator); border-radius: 9px; font-size: .85rem; }
body.dealer-app .extend-group-chip input:checked + span { border-color: transparent; background: var(--tp-sb-active-bg); color: var(--tp-accent); font-weight: 600; }
body.dealer-app .extend-group-chip input:focus-visible + span { box-shadow: 0 0 0 3px var(--tp-ring); }
body.dealer-app .extend-group-table { border: 1px solid var(--tp-separator); border-radius: 12px; overflow: hidden; }
body.dealer-app .extend-group-row { display: grid; grid-template-columns: minmax(0, 1.6fr) 1fr 1fr .7fr; align-items: center; gap: .75rem; padding: .6rem .9rem; border-bottom: 1px solid var(--tp-separator); font-size: .88rem; font-variant-numeric: tabular-nums; }
body.dealer-app .extend-group-row:last-child { border-bottom: 0; }
body.dealer-app .extend-group-row.is-head { background: var(--tp-stripe); font-size: .78rem; }
body.dealer-app .extend-group-name { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
body.dealer-app .extend-group-row .js-to { font-weight: 600; }
body.dealer-app .extend-group-sum { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem 1.5rem; margin-top: .9rem; font-variant-numeric: tabular-nums; }
body.dealer-app .extend-group-warning { margin: .9rem 0 0; }
@media (max-width: 575.98px) {
	body.dealer-app .extend-group-row { grid-template-columns: 1fr 1fr; }
	body.dealer-app .extend-group-row.is-head { display: none; }
	body.dealer-app .extend-group-name { grid-column: 1 / -1; }
	body.dealer-app .extend-group-row [data-label]::before { content: attr(data-label); display: block; color: var(--tp-text-2); font-size: .72rem; font-weight: 400; }
	body.dealer-app .extend-group-row .js-price { grid-column: 1 / -1; text-align: left !important; }
	body.dealer-app .extend-group-sum { justify-content: flex-start; }
}

/* Profile: devices that sign in with a passkey (Face ID, Touch ID, fingerprint) */
body.dealer-app .passkeys-list {
	margin: 0 0 .75rem;
	padding: 0;
	list-style: none;
}

body.dealer-app .passkeys-list li {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .55rem 0;
	border-top: 1px solid var(--tp-separator);
}

body.dealer-app .passkeys-list li:first-child {
	border-top: 0;
}

body.dealer-app .passkeys-icon {
	display: inline-flex;
	flex: 0 0 34px;
	align-items: center;
	justify-content: center;
	height: 34px;
	border-radius: 50%;
	background: var(--tp-sb-active-bg);
	color: var(--tp-accent);
}

body.dealer-app .passkeys-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}