/**
 * Oliver POS admin styles.
 *
 * @package    OliverPOS
 * @subpackage OliverPOS/assets/css
 * @since      1.0.0
 */

/* Dashboard grid */
.oliver-pos-dashboard .postbox {
	margin: 0;
}

.oliver-pos-dashboard .postbox .inside {
	padding: 12px;
}

.oliver-pos-dashboard .postbox .inside table td {
	padding: 6px 8px;
	border: 0;
}

/* Stock table in product editor */
.oliver-pos-stock-table {
	border-collapse: collapse;
}

.oliver-pos-stock-table th,
.oliver-pos-stock-table td {
	padding: 8px 12px;
	text-align: left;
}

.oliver-pos-stock-table thead th {
	font-weight: 600;
}

.oliver-pos-stock-table tfoot th {
	font-weight: 600;
	border-top: 2px solid #ddd;
}

.oliver-pos-stock-table input[type="number"] {
	width: 80px;
	text-align: center;
}

/* Variation outlet stock */
.oliver-pos-variation-stock {
	margin: 10px 0;
	padding: 10px;
	background: #f9f9f9;
	border: 1px solid #eee;
}

.oliver-pos-variation-stock p > strong {
	display: block;
	margin-bottom: 8px;
}

/* Order meta box */
.oliver-pos-order-meta td {
	padding: 4px 8px;
	vertical-align: top;
}

.oliver-pos-order-meta td:first-child {
	white-space: nowrap;
	width: 100px;
}

/* POS badge in order list */
.oliver-pos-badge {
	display: inline-block;
	background: #0A8FAF;
	color: #fff;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
}

.oliver-pos-source-online {
	color: #6B8A93;
}

/* Outlet edit screen */
.oliver-pos-pairing-code {
	font-size: 32px;
	font-weight: bold;
	letter-spacing: 8px;
	font-family: monospace;
	text-align: center;
}

/* Settings page */
.oliver-pos-settings-content .form-table th {
	width: 250px;
}

/* Staff Permissions */
.oliver-pos-permissions {
	max-width: 800px;
}

.oliver-pos-permissions-card {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	margin-bottom: 16px;
}

.oliver-pos-permissions-card-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid #f0f0f1;
	background: #f6f7f7;
}

.oliver-pos-permissions-user {
	font-weight: 600;
	font-size: 14px;
	color: #1d2327;
}

.oliver-pos-permissions-role {
	font-size: 12px;
	color: #646970;
	background: #e0e0e0;
	padding: 2px 8px;
	border-radius: 3px;
}

.oliver-pos-permissions-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	padding: 4px 0;
}

.oliver-pos-permissions-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	cursor: pointer;
	transition: background-color 0.15s;
	font-size: 13px;
	color: #2c3338;
}

.oliver-pos-permissions-item:hover {
	background: #f0f0f1;
}

.oliver-pos-permissions-item input[type="checkbox"] {
	margin: 0;
}

@media screen and (max-width: 960px) {
	.oliver-pos-permissions-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 600px) {
	.oliver-pos-permissions-grid {
		grid-template-columns: 1fr;
	}
}

/* Note preset pills */
.oliver-pos-preset-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-height: 32px;
}

.oliver-pos-preset-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #f0f0f1;
	border: 1px solid #c3c4c7;
	border-radius: 16px;
	padding: 4px 8px 4px 12px;
	font-size: 13px;
	color: #2c3338;
	line-height: 1.4;
}

.oliver-pos-preset-pill-text {
	white-space: nowrap;
}

.oliver-pos-preset-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: #646970;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.oliver-pos-preset-remove:hover {
	background: #d63638;
	color: #fff;
}

.oliver-pos-preset-add {
	display: flex;
	gap: 8px;
	align-items: center;
}

/* Product data tab icon */
#woocommerce-product-data ul.wc-tabs li.oliver_pos_stock_options a::before {
	content: "\f513";
	font-family: dashicons;
}

/* ===== POS Reports ===== */

/* Tab navigation */
.oliver-pos-report-tabs {
	display: flex;
	gap: 0;
	border-bottom: 1px solid #c3c4c7;
	margin: 20px 0 0;
}

.oliver-pos-report-tab {
	display: inline-block;
	padding: 10px 16px;
	font-size: 13px;
	font-weight: 500;
	color: #50575e;
	text-decoration: none;
	border: 1px solid transparent;
	border-bottom: none;
	margin-bottom: -1px;
	border-radius: 4px 4px 0 0;
	transition: color 0.15s, background-color 0.15s;
}

.oliver-pos-report-tab:hover {
	color: #1d2327;
	background: #f6f7f7;
}

.oliver-pos-report-tab.active {
	color: #1d2327;
	background: #fff;
	border-color: #c3c4c7;
	font-weight: 600;
}

/* Filter bar */
.oliver-pos-report-filters {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-top: none;
	padding: 16px;
	margin-bottom: 20px;
}

.oliver-pos-report-filters-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
}

.oliver-pos-filter-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.oliver-pos-filter-group label {
	font-size: 12px;
	font-weight: 600;
	color: #646970;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.oliver-pos-filter-group input[type="date"],
.oliver-pos-filter-group select {
	min-width: 160px;
	height: 36px;
}

.oliver-pos-filter-actions {
	display: flex;
	gap: 8px;
	align-items: flex-end;
	margin-left: auto;
}

.oliver-pos-date-presets {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #f0f0f1;
}

.oliver-pos-date-preset {
	font-size: 12px !important;
	padding: 2px 10px !important;
	min-height: 28px !important;
}

/* Summary cards */
.oliver-pos-summary-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin-bottom: 20px;
}

.oliver-pos-summary-card {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.oliver-pos-summary-value {
	font-size: 24px;
	font-weight: 600;
	color: #1d2327;
	line-height: 1.2;
}

.oliver-pos-summary-label {
	font-size: 12px;
	font-weight: 500;
	color: #646970;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Negative variance highlighting */
.oliver-pos-negative .oliver-pos-summary-value,
td.oliver-pos-negative {
	color: #d63638;
}

.oliver-pos-negative-row {
	background-color: #fcf0f1 !important;
}

/* Report table */
.oliver-pos-report-table {
	margin-top: 0;
}

.oliver-pos-report-table th.num,
.oliver-pos-report-table td.num {
	text-align: right;
}

.oliver-pos-report-table thead th {
	font-weight: 600;
	white-space: nowrap;
}

/* Percentage bar (inline in table cells) */
.oliver-pos-bar-container {
	display: block;
	width: 100%;
	height: 4px;
	background: #f0f0f1;
	border-radius: 2px;
	margin-top: 4px;
}

.oliver-pos-bar {
	height: 100%;
	background: #7c3aed;
	border-radius: 2px;
	transition: width 0.3s ease;
}

/* Responsive */
@media screen and (max-width: 782px) {
	.oliver-pos-report-tabs {
		flex-wrap: wrap;
	}

	.oliver-pos-report-filters-row {
		flex-direction: column;
		align-items: stretch;
	}

	.oliver-pos-filter-actions {
		margin-left: 0;
	}

	.oliver-pos-summary-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.oliver-pos-report-table {
		font-size: 12px;
	}
}

/* ================================================================
   Oliver POS Modern Design System
   Mapped from Color.kt / Material 3 tokens (light mode)
   All overrides scoped under .oliver-pos-wrap
   ================================================================ */

/* ── Scoped Reset ──────────────────────────────────────────────── */
.oliver-pos-wrap,
.oliver-pos-wrap *,
.oliver-pos-wrap *::before,
.oliver-pos-wrap *::after {
	box-sizing: border-box;
}

.oliver-pos-wrap {
	font-size: 14px;
	line-height: 1.5;
	color: #1F5160;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ── Design Tokens ─────────────────────────────────────────────── */
.oliver-pos-wrap {
	/* Brand */
	--oliver-primary: #14BDD1;
	--oliver-primary-dark: #0A8FAF;
	--oliver-primary-light: #CDEBF0;
	--oliver-primary-lightest: #E6F7FA;
	--oliver-deep: #1F5160;
	--oliver-darkest: #0F232B;
	/* Semantic */
	--oliver-error: #E55A48;
	--oliver-error-container: #FBDDD8;
	--oliver-warning: #F47A35;
	--oliver-success: #28E279;
	--oliver-success-container: #D4F9E4;
	--oliver-info: #2797E8;
	/* Surfaces */
	--oliver-surface: #FAFCFD;
	--oliver-surface-container-low: #F5F9FA;
	--oliver-surface-container: #EFF5F7;
	--oliver-surface-container-high: #E6EEF0;
	--oliver-on-surface: #1F5160;
	--oliver-on-surface-variant: #3A5A66;
	--oliver-outline: #6B8A93;
	--oliver-outline-variant: #BDD1D7;
	/* UI constants */
	--oliver-card-shadow: 0 1px 3px rgba(15, 35, 43, 0.06), 0 1px 2px rgba(15, 35, 43, 0.04);
	--oliver-card-radius: 8px;
	--oliver-transition: 0.15s ease;
}

/* ── Dashboard branded header ──────────────────────────────────── */
.oliver-pos-header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 4px;
	padding-top: 18px;
}

.oliver-pos-header img {
	height: 48px;
	width: auto;
}

/*
 * "Pair a device" button rendered on the right edge of the dashboard
 * header. Always-on affordance so merchants can mint a fresh QR /
 * connection key after disconnecting, reinstalling, or losing the
 * paired device — without drilling into Outlets -> edit -> Stations.
 */
.oliver-pos-dash-pair-btn {
	margin-left: auto;
}

.oliver-pos-wrap h1 {
	color: var(--oliver-deep, #1F5160);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.3;
}

/* ── Dashboard grid layout ─────────────────────────────────────── */
.oliver-pos-wrap .oliver-pos-dashboard {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 20px;
	max-width: 1200px;
}

@media screen and (max-width: 782px) {
	.oliver-pos-wrap .oliver-pos-dashboard {
		grid-template-columns: 1fr;
	}
}

/* ── Cards (postbox overrides) ─────────────────────────────────── */
.oliver-pos-wrap .postbox {
	border: 1px solid var(--oliver-outline-variant, #BDD1D7);
	border-radius: var(--oliver-card-radius, 8px);
	box-shadow: var(--oliver-card-shadow, 0 1px 3px rgba(15, 35, 43, 0.06), 0 1px 2px rgba(15, 35, 43, 0.04));
	overflow: hidden;
}

.oliver-pos-wrap .postbox .hndle {
	background: var(--oliver-surface, #FAFCFD);
	border-bottom: 1px solid var(--oliver-outline-variant, #BDD1D7);
	padding: 14px 20px;
	font-size: 14px;
	font-weight: 600;
	color: var(--oliver-on-surface, #1F5160);
}

.oliver-pos-wrap .postbox .inside {
	padding: 20px;
}

.oliver-pos-wrap .postbox .inside table.widefat {
	border: 0;
}

.oliver-pos-wrap .postbox .inside table td {
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid var(--oliver-surface-container, #EFF5F7);
	color: var(--oliver-on-surface-variant, #3A5A66);
}

.oliver-pos-wrap .postbox .inside table tr:last-child td {
	border-bottom: 0;
}

.oliver-pos-wrap .postbox .inside table td strong {
	color: var(--oliver-on-surface, #1F5160);
}

/* ── Dashboard outlet indent + status ──────────────────────────── */
.oliver-pos-wrap .oliver-pos-outlet-indent {
	padding-left: 20px;
}

.oliver-pos-status-active {
	color: #0A8FAF;
	font-weight: 600;
}

.oliver-pos-status-inactive {
	color: #E55A48;
	font-weight: 600;
}

/* ── Dashboard quick links ─────────────────────────────────────── */
.oliver-pos-wrap .oliver-pos-quick-links {
	list-style: disc;
	margin-left: 20px;
}

.oliver-pos-wrap .oliver-pos-quick-links a {
	color: var(--oliver-primary-dark, #0A8FAF);
	text-decoration: none;
	transition: color var(--oliver-transition, 0.15s ease);
}

.oliver-pos-wrap .oliver-pos-quick-links a:hover {
	color: var(--oliver-primary, #14BDD1);
}

/* ── Buttons ───────────────────────────────────────────────────── */
.oliver-pos-wrap .button {
	border-radius: 6px;
	padding: 6px 16px;
	transition: all var(--oliver-transition, 0.15s ease);
	border-color: var(--oliver-outline-variant, #BDD1D7);
}

.oliver-pos-wrap .button:hover {
	border-color: var(--oliver-outline, #6B8A93);
}

.oliver-pos-wrap .button-primary,
.oliver-pos-wrap .button-primary:active {
	background: var(--oliver-primary, #14BDD1);
	border-color: var(--oliver-primary, #14BDD1);
	color: #fff;
	border-radius: 6px;
	padding: 6px 20px;
	font-weight: 500;
	box-shadow: 0 1px 2px rgba(20, 189, 209, 0.2);
	transition: all var(--oliver-transition, 0.15s ease);
	text-shadow: none;
}

.oliver-pos-wrap .button-primary:hover,
.oliver-pos-wrap .button-primary:focus {
	background: var(--oliver-primary-dark, #0A8FAF);
	border-color: var(--oliver-primary-dark, #0A8FAF);
	color: #fff;
	box-shadow: 0 2px 4px rgba(10, 143, 175, 0.3);
}

/* ── Tab Navigation ────────────────────────────────────────────── */
.oliver-pos-wrap .nav-tab-wrapper {
	border-bottom: 2px solid var(--oliver-surface-container-high, #E6EEF0);
	padding: 0;
	margin-bottom: 0;
}

.oliver-pos-wrap .nav-tab {
	border: none;
	background: transparent;
	padding: 12px 20px;
	margin-bottom: -2px;
	font-weight: 500;
	font-size: 13px;
	color: var(--oliver-on-surface-variant, #3A5A66);
	transition: color var(--oliver-transition, 0.15s ease);
}

.oliver-pos-wrap .nav-tab:hover,
.oliver-pos-wrap .nav-tab:focus {
	background: transparent;
	color: var(--oliver-on-surface, #1F5160);
}

.oliver-pos-wrap .nav-tab-active,
.oliver-pos-wrap .nav-tab-active:hover,
.oliver-pos-wrap .nav-tab-active:focus {
	background: transparent;
	color: var(--oliver-primary-dark, #0A8FAF);
	border: none;
	border-bottom: 2px solid var(--oliver-primary, #14BDD1);
	font-weight: 600;
	box-shadow: none;
}

/* ── Settings content area ─────────────────────────────────────── */
.oliver-pos-wrap .oliver-pos-settings-content {
	padding-top: 24px;
	max-width: 880px;
}

.oliver-pos-wrap .oliver-pos-settings-content h2 {
	color: var(--oliver-on-surface, #1F5160);
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 4px;
	letter-spacing: -0.01em;
}

.oliver-pos-wrap .oliver-pos-settings-content > p.description {
	color: var(--oliver-on-surface-variant, #3A5A66);
	margin: 0 0 16px;
	font-size: 13px;
}

.oliver-pos-wrap .oliver-pos-preset-add {
	margin-top: 8px;
}

/* ── Settings card sections ────────────────────────────────────── */
.oliver-pos-wrap .oliver-pos-settings-content form,
.oliver-pos-wrap .oliver-pos-settings-content .oliver-pos-settings-section {
	background: #fff;
	border: 1px solid var(--oliver-surface-container-high, #E6EEF0);
	border-radius: var(--oliver-card-radius, 8px);
	box-shadow: var(--oliver-card-shadow, 0 1px 3px rgba(15, 35, 43, 0.06), 0 1px 2px rgba(15, 35, 43, 0.04));
	padding: 24px;
	margin-bottom: 20px;
}

.oliver-pos-wrap .oliver-pos-settings-content form h2,
.oliver-pos-wrap .oliver-pos-settings-content .oliver-pos-settings-section h2 {
	padding-bottom: 12px;
	border-bottom: 1px solid var(--oliver-surface-container, #EFF5F7);
	margin-bottom: 8px;
}

.oliver-pos-wrap .oliver-pos-settings-content form h2 + p.description {
	margin-top: -4px;
}

.oliver-pos-wrap .oliver-pos-settings-content form h2:not(:first-child),
.oliver-pos-wrap .oliver-pos-settings-content .oliver-pos-settings-section h2:not(:first-child) {
	margin-top: 28px;
}

.oliver-pos-wrap .oliver-pos-settings-content form .submit {
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--oliver-surface-container, #EFF5F7);
}

/* ── Form Tables ───────────────────────────────────────────────── */
.oliver-pos-wrap .form-table {
	margin-top: 0;
}

.oliver-pos-wrap .form-table th {
	font-weight: 500;
	color: var(--oliver-on-surface, #1F5160);
	padding: 14px 16px 14px 0;
	font-size: 13px;
	vertical-align: top;
}

.oliver-pos-wrap .form-table td {
	padding: 14px 0;
}

.oliver-pos-wrap .form-table tr {
	border-bottom: 1px solid var(--oliver-surface-container, #EFF5F7);
}

.oliver-pos-wrap .form-table tr:last-child {
	border-bottom: none;
}

.oliver-pos-wrap .form-table .description {
	color: var(--oliver-on-surface-variant, #3A5A66);
	font-size: 12px;
	margin-top: 6px;
	line-height: 1.45;
}

/* ── Inputs & text fields ──────────────────────────────────────── */
.oliver-pos-wrap .form-table input[type="text"],
.oliver-pos-wrap .form-table input[type="number"],
.oliver-pos-wrap .form-table input[type="url"],
.oliver-pos-wrap .form-table input[type="email"] {
	border: 1px solid var(--oliver-outline-variant, #BDD1D7);
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--oliver-on-surface, #1F5160);
	background: #fff;
	transition: border-color var(--oliver-transition, 0.15s ease), box-shadow var(--oliver-transition, 0.15s ease);
}

.oliver-pos-wrap .form-table input[type="text"]:focus,
.oliver-pos-wrap .form-table input[type="number"]:focus,
.oliver-pos-wrap .form-table input[type="url"]:focus,
.oliver-pos-wrap .form-table input[type="email"]:focus {
	border-color: var(--oliver-primary, #14BDD1);
	box-shadow: 0 0 0 3px var(--oliver-primary-lightest, #E6F7FA);
	outline: none;
}

.oliver-pos-wrap .form-table input[readonly] {
	background: var(--oliver-surface-container-low, #F5F9FA);
	color: var(--oliver-on-surface-variant, #3A5A66);
	cursor: default;
}

/* ── Custom Select ─────────────────────────────────────────────── */
.oliver-pos-wrap select,
.oliver-pos-wrap .form-table select,
.oliver-pos-wrap .oliver-pos-settings-content select {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	border: 1px solid var(--oliver-outline-variant, #BDD1D7);
	border-radius: 6px;
	padding: 8px 36px 8px 12px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--oliver-on-surface, #1F5160);
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%233A5A66' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 8px !important;
	cursor: pointer;
	min-height: 38px;
	max-width: 100%;
	transition: border-color var(--oliver-transition, 0.15s ease), box-shadow var(--oliver-transition, 0.15s ease);
}

.oliver-pos-wrap select:hover,
.oliver-pos-wrap .form-table select:hover {
	border-color: var(--oliver-outline, #6B8A93);
}

.oliver-pos-wrap select:focus,
.oliver-pos-wrap .form-table select:focus {
	border-color: var(--oliver-primary, #14BDD1);
	box-shadow: 0 0 0 3px var(--oliver-primary-lightest, #E6F7FA);
	outline: none;
}

.oliver-pos-wrap select::-ms-expand {
	display: none;
}

/* ── Section actions (buttons below a status table) ────────────── */
.oliver-pos-wrap .oliver-pos-section-actions {
	display: flex;
	gap: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--oliver-surface-container, #EFF5F7);
	margin-top: 4px;
}

/* ── Toggle Switch ─────────────────────────────────────────────── */
.oliver-pos-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

/*
 * Row that lays a toggle out next to its plan-tier badge so the pill
 * sits to the right of the description rather than stacked underneath
 * (which made it look like a sub-row label of the row above it).
 */
.oliver-pos-toggle-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
}

.oliver-pos-toggle-row .oliver-pos-toggle {
	flex: 1 1 auto;
	min-width: 0;
}

.oliver-pos-toggle input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	width: 38px;
	height: 22px;
	background: var(--oliver-outline-variant, #BDD1D7);
	border-radius: 11px;
	position: relative;
	cursor: pointer;
	transition: background var(--oliver-transition, 0.15s ease);
	flex-shrink: 0;
	margin: 0;
	border: none;
	outline: none;
}

.oliver-pos-toggle input[type="checkbox"]::before {
	display: none;
}

.oliver-pos-toggle input[type="checkbox"]::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	background: #fff;
	border-radius: 50%;
	transition: transform var(--oliver-transition, 0.15s ease);
	box-shadow: 0 1px 3px rgba(15, 35, 43, 0.15);
}

.oliver-pos-toggle input[type="checkbox"]:checked {
	background: var(--oliver-primary, #14BDD1);
}

.oliver-pos-toggle input[type="checkbox"]:checked::after {
	transform: translateX(16px);
}

.oliver-pos-toggle input[type="checkbox"]:focus-visible {
	box-shadow: 0 0 0 3px var(--oliver-primary-lightest, #E6F7FA);
}

/* ── Permissions cards (refined) ───────────────────────────────── */
.oliver-pos-wrap .oliver-pos-permissions-card {
	background: #fff;
	border: 1px solid var(--oliver-outline-variant, #BDD1D7);
	border-radius: var(--oliver-card-radius, 8px);
	box-shadow: var(--oliver-card-shadow, 0 1px 3px rgba(15, 35, 43, 0.06), 0 1px 2px rgba(15, 35, 43, 0.04));
}

.oliver-pos-wrap .oliver-pos-permissions-card-header {
	background: var(--oliver-surface, #FAFCFD);
	border-bottom: 1px solid var(--oliver-surface-container-high, #E6EEF0);
	padding: 14px 16px;
}

.oliver-pos-wrap .oliver-pos-permissions-user {
	color: var(--oliver-on-surface, #1F5160);
}

.oliver-pos-wrap .oliver-pos-permissions-role {
	background: var(--oliver-primary-lightest, #E6F7FA);
	color: var(--oliver-primary-dark, #0A8FAF);
	font-weight: 500;
	border-radius: 4px;
}

.oliver-pos-wrap .oliver-pos-permissions-item {
	color: var(--oliver-on-surface-variant, #3A5A66);
}

.oliver-pos-wrap .oliver-pos-permissions-item:hover {
	background: var(--oliver-surface-container-low, #F5F9FA);
}

/* ── Preset pills (refined) ───────────────────────────────────── */
.oliver-pos-wrap .oliver-pos-preset-pill {
	background: var(--oliver-surface-container-low, #F5F9FA);
	border-color: var(--oliver-outline-variant, #BDD1D7);
	color: var(--oliver-on-surface, #1F5160);
}

.oliver-pos-wrap .oliver-pos-preset-remove {
	color: var(--oliver-outline, #6B8A93);
}

.oliver-pos-wrap .oliver-pos-preset-remove:hover {
	background: var(--oliver-error, #E55A48);
	color: #fff;
}

/* ── Stock table refinements ───────────────────────────────────── */
.oliver-pos-stock-table tfoot th {
	border-top-color: var(--oliver-outline-variant, #BDD1D7);
}

.oliver-pos-stock-table input[type="number"] {
	border-radius: 6px;
	border: 1px solid var(--oliver-outline-variant, #BDD1D7);
	transition: border-color var(--oliver-transition, 0.15s ease), box-shadow var(--oliver-transition, 0.15s ease);
}

.oliver-pos-stock-table input[type="number"]:focus {
	border-color: var(--oliver-primary, #14BDD1);
	box-shadow: 0 0 0 3px var(--oliver-primary-lightest, #E6F7FA);
	outline: none;
}

.oliver-pos-variation-stock {
	background: var(--oliver-surface-container-low, #F5F9FA);
	border-color: var(--oliver-outline-variant, #BDD1D7);
	border-radius: 6px;
}

/* ================================================================
   Reports — Tab Navigation, Filters, Summary Cards, Tables, Bars
   ================================================================ */

/* ── Report tab navigation ─────────────────────────────────────── */
.oliver-pos-report-tabs {
	display: flex;
	gap: 0;
	border-bottom: 2px solid var(--oliver-surface-container-high, #E6EEF0);
	margin-bottom: 20px;
}

.oliver-pos-report-tab {
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 500;
	color: var(--oliver-on-surface-variant, #3A5A66);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.oliver-pos-report-tab:hover,
.oliver-pos-report-tab:focus {
	color: var(--oliver-on-surface, #1F5160);
	text-decoration: none;
}

.oliver-pos-report-tab.active {
	color: var(--oliver-primary-dark, #0A8FAF);
	border-bottom-color: var(--oliver-primary, #14BDD1);
	font-weight: 600;
}

/* ── Filter bar ────────────────────────────────────────────────── */
.oliver-pos-report-filters {
	background: #fff;
	border: 1px solid var(--oliver-outline-variant, #BDD1D7);
	border-radius: var(--oliver-card-radius, 8px);
	box-shadow: var(--oliver-card-shadow, 0 1px 3px rgba(15,35,43,0.06));
	padding: 16px 20px;
	margin-bottom: 20px;
}

.oliver-pos-report-filters-row {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	flex-wrap: wrap;
}

.oliver-pos-filter-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.oliver-pos-filter-group label {
	font-size: 12px;
	font-weight: 600;
	color: var(--oliver-on-surface-variant, #3A5A66);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.oliver-pos-filter-group input[type="date"] {
	border: 1px solid var(--oliver-outline-variant, #BDD1D7);
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 13px;
	color: var(--oliver-on-surface, #1F5160);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.oliver-pos-filter-group input[type="date"]:focus {
	border-color: var(--oliver-primary, #14BDD1);
	box-shadow: 0 0 0 3px var(--oliver-primary-lightest, #E6F7FA);
	outline: none;
}

.oliver-pos-filter-actions {
	display: flex;
	gap: 8px;
	align-items: center;
}

/* ── Date preset pills ─────────────────────────────────────────── */
.oliver-pos-date-presets {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--oliver-surface-container, #EFF5F7);
}

.oliver-pos-date-preset {
	padding: 4px 12px !important;
	font-size: 12px !important;
	border-radius: 14px !important;
	border-color: var(--oliver-outline-variant, #BDD1D7) !important;
	color: var(--oliver-on-surface-variant, #3A5A66) !important;
	background: var(--oliver-surface-container-low, #F5F9FA) !important;
	transition: all 0.15s ease !important;
	line-height: 1.4 !important;
}

.oliver-pos-date-preset:hover,
.oliver-pos-date-preset:focus {
	background: var(--oliver-primary-lightest, #E6F7FA) !important;
	border-color: var(--oliver-primary-light, #CDEBF0) !important;
	color: var(--oliver-primary-dark, #0A8FAF) !important;
}

/* ── Summary cards ─────────────────────────────────────────────── */
.oliver-pos-summary-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.oliver-pos-summary-card {
	background: #fff;
	border: 1px solid var(--oliver-outline-variant, #BDD1D7);
	border-radius: var(--oliver-card-radius, 8px);
	box-shadow: var(--oliver-card-shadow, 0 1px 3px rgba(15,35,43,0.06));
	padding: 20px 24px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.oliver-pos-summary-value {
	font-size: 24px;
	font-weight: 700;
	color: var(--oliver-on-surface, #1F5160);
	line-height: 1.2;
}

.oliver-pos-summary-label {
	font-size: 12px;
	font-weight: 500;
	color: var(--oliver-on-surface-variant, #3A5A66);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.oliver-pos-summary-card.oliver-pos-negative .oliver-pos-summary-value {
	color: var(--oliver-error, #E55A48);
}

/* ── Report data table ─────────────────────────────────────────── */
.oliver-pos-report-table {
	border: 1px solid var(--oliver-outline-variant, #BDD1D7) !important;
	border-radius: var(--oliver-card-radius, 8px) !important;
	overflow: hidden;
	border-collapse: separate !important;
	border-spacing: 0 !important;
}

.oliver-pos-report-table thead th {
	background: var(--oliver-surface, #FAFCFD);
	color: var(--oliver-on-surface, #1F5160);
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 12px 14px;
	border-bottom: 2px solid var(--oliver-surface-container-high, #E6EEF0);
	white-space: nowrap;
}

.oliver-pos-report-table thead th.num {
	text-align: right;
}

.oliver-pos-report-table tbody td {
	padding: 10px 14px;
	color: var(--oliver-on-surface-variant, #3A5A66);
	font-size: 13px;
	border-bottom: 1px solid var(--oliver-surface-container, #EFF5F7);
}

.oliver-pos-report-table tbody td.num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.oliver-pos-report-table tbody tr:last-child td {
	border-bottom: none;
}

.oliver-pos-report-table tbody tr:hover td {
	background: var(--oliver-surface-container-low, #F5F9FA);
}

/* Negative variance highlighting */
.oliver-pos-negative {
	color: var(--oliver-error, #E55A48) !important;
	font-weight: 600;
}

.oliver-pos-negative-row td {
	background: var(--oliver-error-container, #FBDDD8) !important;
}

.oliver-pos-negative-row:hover td {
	background: #f8cfca !important;
}

/* ── Percentage bar (payments & channel) ───────────────────────── */
.oliver-pos-bar-container {
	width: 100%;
	height: 6px;
	background: var(--oliver-surface-container, #EFF5F7);
	border-radius: 3px;
	margin-top: 4px;
	overflow: hidden;
}

.oliver-pos-bar {
	height: 100%;
	background: linear-gradient(90deg, var(--oliver-primary, #14BDD1), var(--oliver-primary-dark, #0A8FAF));
	border-radius: 3px;
	transition: width 0.3s ease;
}

/* ── Responsive for report filters ─────────────────────────────── */
@media screen and (max-width: 782px) {
	.oliver-pos-report-filters-row {
		flex-direction: column;
		align-items: stretch;
	}

	.oliver-pos-filter-actions {
		justify-content: flex-start;
	}

	.oliver-pos-summary-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.oliver-pos-report-tabs {
		flex-wrap: wrap;
	}
}

@media screen and (max-width: 480px) {
	.oliver-pos-summary-cards {
		grid-template-columns: 1fr;
	}
}

/* ══════════════════════════════════════════════════════════════════
   Staff page
   ══════════════════════════════════════════════════════════════════ */

/* ── Header bar (count + add button) ────────────────────────────── */
.oliver-pos-staff-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 16px 0;
}

.oliver-pos-staff-count {
	font-size: 14px;
	color: var(--oliver-on-surface-variant, #5f6368);
	margin: 0;
}

/* ── Empty state ────────────────────────────────────────────────── */
.oliver-pos-empty-state {
	text-align: center;
	padding: 48px 24px;
	background: var(--oliver-surface, #fff);
	border: 1px solid var(--oliver-outline-variant, #c3c4c7);
	border-radius: var(--oliver-card-radius, 8px);
}

.oliver-pos-empty-state p {
	color: var(--oliver-on-surface-variant, #5f6368);
	font-size: 14px;
	margin: 0;
}

/* ── Staff member cards ─────────────────────────────────────────── */
.oliver-pos-wrap .oliver-pos-staff-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
	gap: 16px !important;
}

.oliver-pos-wrap .oliver-pos-staff-card {
	background: var(--oliver-surface, #fff) !important;
	border: 1px solid var(--oliver-outline-variant, #c3c4c7) !important;
	border-radius: var(--oliver-card-radius, 8px) !important;
	box-shadow: var(--oliver-card-shadow, 0 1px 3px rgba(0, 0, 0, 0.06)) !important;
	overflow: hidden;
	transition: var(--oliver-transition, 0.2s ease);
}

.oliver-pos-wrap .oliver-pos-staff-card:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.oliver-pos-wrap .oliver-pos-staff-card-header {
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 16px;
	border-bottom: 1px solid var(--oliver-outline-variant, #c3c4c7);
}

.oliver-pos-staff-card-header img {
	border-radius: 50%;
	flex-shrink: 0;
}

.oliver-pos-staff-card-info {
	flex: 1;
	min-width: 0;
}

.oliver-pos-staff-name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--oliver-on-surface, #1e293b);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.oliver-pos-staff-email {
	display: block;
	font-size: 12px;
	color: var(--oliver-on-surface-variant, #5f6368);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Role badges ────────────────────────────────────────────────── */
.oliver-pos-role-badge {
	display: inline-block;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 12px;
	white-space: nowrap;
	background: var(--oliver-primary-lightest, #e0f5f9);
	color: var(--oliver-primary-dark, #0A8FAF);
}

.oliver-pos-role-owner {
	background: #fef3c7;
	color: #92400e;
}

.oliver-pos-role-admin {
	background: #dbeafe;
	color: #1e40af;
}

.oliver-pos-role-manager {
	background: #d1fae5;
	color: #065f46;
}

.oliver-pos-role-cashier {
	background: var(--oliver-primary-lightest, #e0f5f9);
	color: var(--oliver-primary-dark, #0A8FAF);
}

/* ── Staff card meta ────────────────────────────────────────────── */
.oliver-pos-wrap .oliver-pos-staff-card-meta {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 1px;
	padding: 0;
	background: var(--oliver-outline-variant, #c3c4c7);
}

.oliver-pos-staff-meta-item {
	display: flex;
	flex-direction: column;
	padding: 10px 12px;
	background: var(--oliver-surface, #fff);
}

.oliver-pos-meta-label {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--oliver-on-surface-variant, #5f6368);
	margin-bottom: 2px;
}

.oliver-pos-meta-value {
	font-size: 13px;
	color: var(--oliver-on-surface, #1e293b);
}

/* ── Staff card actions ─────────────────────────────────────────── */
.oliver-pos-staff-card-actions {
	display: flex;
	gap: 6px;
	padding: 12px 16px;
	border-top: 1px solid var(--oliver-outline-variant, #c3c4c7);
}

.oliver-pos-btn-danger {
	color: var(--oliver-error, #d32f2f) !important;
	border-color: var(--oliver-error, #d32f2f) !important;
}

.oliver-pos-btn-danger:hover {
	background: var(--oliver-error-container, #FBDDD8) !important;
}

/* ── Role cards ─────────────────────────────────────────────────── */
.oliver-pos-wrap .oliver-pos-roles-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
	gap: 16px !important;
}

.oliver-pos-wrap .oliver-pos-role-card {
	background: var(--oliver-surface, #fff) !important;
	border: 1px solid var(--oliver-outline-variant, #c3c4c7) !important;
	border-radius: var(--oliver-card-radius, 8px) !important;
	box-shadow: var(--oliver-card-shadow, 0 1px 3px rgba(0, 0, 0, 0.06)) !important;
	padding: 16px;
	transition: var(--oliver-transition, 0.2s ease);
}

.oliver-pos-wrap .oliver-pos-role-card:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.oliver-pos-role-card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.oliver-pos-role-name {
	font-size: 15px;
	font-weight: 600;
	color: var(--oliver-on-surface, #1e293b);
}

.oliver-pos-role-perm-count {
	font-size: 12px;
	color: var(--oliver-on-surface-variant, #5f6368);
	white-space: nowrap;
}

.oliver-pos-role-description {
	font-size: 13px;
	color: var(--oliver-on-surface-variant, #5f6368);
	margin: 0 0 12px;
	line-height: 1.4;
}

.oliver-pos-role-card-meta {
	display: flex;
	gap: 16px;
	font-size: 12px;
	color: var(--oliver-on-surface-variant, #5f6368);
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--oliver-outline-variant, #c3c4c7);
}

.oliver-pos-role-card-actions {
	display: flex;
	gap: 6px;
}

.oliver-pos-badge {
	display: inline-block;
	padding: 2px 8px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 10px;
	background: var(--oliver-primary-dark, #0A8FAF);
	color: #fff;
	vertical-align: middle;
	margin-left: 6px;
}

/* ── Form wrap (add/edit) ───────────────────────────────────────── */
.oliver-pos-form-wrap {
	max-width: 800px;
}

.oliver-pos-back-link {
	display: inline-block;
	margin-bottom: 16px;
	text-decoration: none;
	font-size: 13px;
	color: var(--oliver-primary-dark, #0A8FAF);
}

.oliver-pos-back-link:hover {
	text-decoration: underline;
}

.oliver-pos-form-section {
	background: var(--oliver-surface, #fff);
	border: 1px solid var(--oliver-outline-variant, #c3c4c7);
	border-radius: var(--oliver-card-radius, 8px);
	padding: 16px 20px;
	margin-bottom: 16px;
}

.oliver-pos-form-section h3 {
	margin: 0 0 12px;
	padding: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--oliver-on-surface, #1e293b);
	border-bottom: 1px solid var(--oliver-outline-variant, #c3c4c7);
}

/* ── User source switcher (add staff) ──────────────────────────── */
.oliver-pos-form-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

.oliver-pos-user-source-btn.active {
	background: var(--oliver-primary, #14BDD1);
	color: #fff;
	border-color: var(--oliver-primary, #14BDD1);
}

/* ── Edit user header ──────────────────────────────────────────── */
.oliver-pos-edit-user-header {
	display: flex;
	align-items: center;
	gap: 16px;
}

.oliver-pos-edit-user-header img {
	border-radius: 50%;
}

.oliver-pos-edit-user-header h3 {
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.oliver-pos-edit-user-header p {
	margin: 2px 0 0;
	color: var(--oliver-on-surface-variant, #5f6368);
	font-size: 13px;
}

/* ── Permission accordion ──────────────────────────────────────── */
.oliver-pos-permissions-accordion {
	border: 1px solid var(--oliver-outline-variant, #c3c4c7);
	border-radius: var(--oliver-card-radius, 8px);
	overflow: hidden;
}

.oliver-pos-accordion-section + .oliver-pos-accordion-section {
	border-top: 1px solid var(--oliver-outline-variant, #c3c4c7);
}

.oliver-pos-accordion-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	cursor: pointer;
	background: var(--oliver-surface-container, #f8fafc);
	user-select: none;
	transition: background 0.15s;
}

.oliver-pos-accordion-header:hover {
	background: var(--oliver-surface-container-high, #f1f5f9);
}

.oliver-pos-accordion-toggle {
	transition: transform 0.2s;
	color: var(--oliver-on-surface-variant, #5f6368);
}

.oliver-pos-accordion-section.open .oliver-pos-accordion-toggle {
	transform: rotate(90deg);
}

.oliver-pos-accordion-header strong {
	flex: 1;
	font-size: 13px;
	font-weight: 600;
	color: var(--oliver-on-surface, #1e293b);
}

.oliver-pos-accordion-count {
	font-size: 11px;
	color: var(--oliver-on-surface-variant, #5f6368);
	padding: 2px 8px;
	background: var(--oliver-surface, #fff);
	border-radius: 10px;
	border: 1px solid var(--oliver-outline-variant, #c3c4c7);
}

.oliver-pos-grant-all {
	font-size: 12px;
	color: var(--oliver-primary-dark, #0A8FAF);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: 4px;
}

.oliver-pos-accordion-body {
	padding: 12px 14px;
	background: var(--oliver-surface, #fff);
}

.oliver-pos-accordion-body .oliver-pos-permissions-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 6px;
}

.oliver-pos-accordion-body .oliver-pos-permissions-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	font-size: 13px;
	color: var(--oliver-on-surface, #1e293b);
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s;
}

.oliver-pos-accordion-body .oliver-pos-permissions-item:hover {
	background: var(--oliver-surface-container, #f8fafc);
}

.oliver-pos-accordion-body .oliver-pos-permissions-item input[type="checkbox"] {
	flex-shrink: 0;
}

/* ── Category toggle switch ─────────────────────────────────────── */
.oliver-pos-category-toggle {
	position: relative;
	display: inline-block;
	width: 36px;
	height: 20px;
	flex-shrink: 0;
	cursor: pointer;
}

.oliver-pos-category-toggle input {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
}

.oliver-pos-category-toggle-slider {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #cbd5e1;
	border-radius: 10px;
	transition: background 0.2s;
}

.oliver-pos-category-toggle-slider::before {
	content: "";
	position: absolute;
	height: 16px;
	width: 16px;
	left: 2px;
	bottom: 2px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.2s;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.oliver-pos-category-toggle input:checked + .oliver-pos-category-toggle-slider {
	background: var(--oliver-primary, #14BDD1);
}

.oliver-pos-category-toggle input:checked + .oliver-pos-category-toggle-slider::before {
	transform: translateX(16px);
}

/* ── Disabled category state ───────────────────────────────────── */
.oliver-pos-category-disabled > .oliver-pos-accordion-header {
	opacity: 0.55;
}

.oliver-pos-category-disabled > .oliver-pos-accordion-header .oliver-pos-category-toggle {
	opacity: 1;
}

.oliver-pos-category-disabled .oliver-pos-accordion-body {
	opacity: 0.4;
	pointer-events: none;
}

.oliver-pos-category-disabled .oliver-pos-accordion-count {
	text-decoration: line-through;
}

/* ── Responsive for staff page ─────────────────────────────────── */
@media screen and (max-width: 782px) {
	.oliver-pos-wrap .oliver-pos-staff-grid {
		grid-template-columns: 1fr !important;
	}

	.oliver-pos-wrap .oliver-pos-roles-grid {
		grid-template-columns: 1fr !important;
	}

	.oliver-pos-wrap .oliver-pos-staff-card-meta {
		grid-template-columns: 1fr !important;
	}

	.oliver-pos-wrap .oliver-pos-accordion-body .oliver-pos-permissions-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ------------------------------------------------------------------
   Getting Started checklist
   ------------------------------------------------------------------ */

.oliver-pos-getting-started {
	--gs-ink:        #0d0d12;
	--gs-ink-2:      #3a3a45;
	--gs-ink-3:      #6b6b78;
	--gs-line:       #e7e7ee;
	--gs-line-soft:  #f0f0f5;
	--gs-surface:    #ffffff;
	--gs-success:    #14a44d;
	--gs-success-bg: #e8f8ef;

	position: relative;
	background: var(--gs-surface);
	border: 1px solid var(--gs-line);
	border-radius: 20px;
	padding: 28px 32px 24px;
	margin: 0 0 24px;
	max-width: 1200px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	             "Helvetica Neue", Arial, sans-serif;
	color: var(--gs-ink);
	box-shadow: 0 1px 2px rgba(15, 15, 20, 0.04),
	            0 8px 24px rgba(15, 15, 20, 0.05);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.oliver-pos-getting-started *,
.oliver-pos-getting-started *::before,
.oliver-pos-getting-started *::after {
	box-sizing: border-box;
}

.oliver-pos-getting-started__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: 8px;
	color: var(--gs-ink-3);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
	padding: 0;
}

.oliver-pos-getting-started__close:hover,
.oliver-pos-getting-started__close:focus-visible {
	background: var(--gs-line-soft);
	color: var(--gs-ink);
	outline: none;
}

.oliver-pos-getting-started__head {
	max-width: 640px;
	padding-right: 36px;
	margin-bottom: 20px;
}

.oliver-pos-getting-started__eyebrow {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gs-ink-3);
}

.oliver-pos-getting-started__title {
	margin: 0 0 6px;
	font-size: 22px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--gs-ink);
}

.oliver-pos-getting-started__sub {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--gs-ink-3);
}

.oliver-pos-getting-started__sub strong {
	color: var(--gs-ink);
	font-weight: 700;
}

.oliver-pos-getting-started__progress {
	height: 6px;
	background: var(--gs-line-soft);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 8px;
}

.oliver-pos-getting-started__progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #14a44d 0%, #1ec672 100%);
	border-radius: 999px;
	transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.oliver-pos-getting-started__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 24px;
}

.oliver-pos-getting-started__item {
	border-bottom: 1px solid var(--gs-line-soft);
}

/* On the 2-col layout, the last visual row never has anything beneath
   it — drop the border on the trailing pair so it doesn't float. */
.oliver-pos-getting-started__item:nth-last-child(-n+2) {
	border-bottom: 0;
}

.oliver-pos-getting-started__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	color: var(--gs-ink);
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	transition: color 0.15s ease;
}

a.oliver-pos-getting-started__row:hover,
a.oliver-pos-getting-started__row:focus-visible {
	color: var(--gs-ink);
	outline: none;
}

a.oliver-pos-getting-started__row:hover .oliver-pos-getting-started__cta,
a.oliver-pos-getting-started__row:focus-visible .oliver-pos-getting-started__cta {
	background: var(--gs-ink);
	color: #fff;
	border-color: var(--gs-ink);
	transform: translateX(2px);
}

.oliver-pos-getting-started__icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 1.5px solid var(--gs-line);
	background: var(--gs-surface);
	color: transparent;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.oliver-pos-getting-started__item.is-done .oliver-pos-getting-started__icon {
	background: var(--gs-success);
	border-color: var(--gs-success);
	color: #fff;
}

.oliver-pos-getting-started__item.is-done .oliver-pos-getting-started__row {
	color: var(--gs-ink-3);
}

.oliver-pos-getting-started__item.is-done .oliver-pos-getting-started__label {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(107, 107, 120, 0.4);
}

.oliver-pos-getting-started__label {
	flex: 1 1 auto;
	min-width: 0;
}

.oliver-pos-getting-started__cta {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 1px solid var(--gs-line);
	background: var(--gs-surface);
	color: var(--gs-ink-2);
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

@media (max-width: 782px) {
	.oliver-pos-getting-started {
		padding: 22px 20px 18px;
		border-radius: 16px;
	}

	.oliver-pos-getting-started__title {
		font-size: 19px;
	}

	.oliver-pos-getting-started__list {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* Single-column on mobile — only the literal last item has no bottom
	   border; the second-to-last must reclaim its divider. */
	.oliver-pos-getting-started__item:nth-last-child(2) {
		border-bottom: 1px solid var(--gs-line-soft);
	}

	.oliver-pos-getting-started__item:last-child {
		border-bottom: 0;
	}
}

/* ================================================================
   Dashboard — Business Intelligence Layout
   ================================================================ */

/* ── Dashboard tokens (shared with onboarding) ─────────────────── */
.oliver-pos-dash {
	--op-surface:    #ffffff;
	--op-bg:         #f7f7f9;
	--op-ink:        #0d0d12;
	--op-ink-2:      #3a3a45;
	--op-ink-3:      #6b6b78;
	--op-line:       #e7e7ee;
	--op-line-2:     #f0f0f5;
	--op-accent:     #111111;
	--op-accent-ink: #ffffff;
	--op-accent-soft: #f1f1f4;
	--op-success:    #14a44d;
	--op-success-bg: #e8f8ef;
	--op-warn:       #b17000;
	--op-warn-bg:    #fff4e0;
	--op-danger:     #b1281e;
	--op-danger-bg:  #fde8e6;
	--op-radius-sm:  8px;
	--op-radius:     14px;
	--op-radius-lg:  20px;
	--op-shadow:     0 1px 2px rgba(15, 15, 20, 0.04),
	                 0 8px 24px rgba(15, 15, 20, 0.05);

	max-width: 1200px;
	margin-top: 16px;
	color: var(--op-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	             "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.oliver-pos-dash *,
.oliver-pos-dash *::before,
.oliver-pos-dash *::after {
	box-sizing: border-box;
}

/* ── Welcome header ────────────────────────────────────────────── */
.oliver-pos-dash-welcome {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.oliver-pos-wrap .oliver-pos-dash-welcome h1 {
	margin: 0 0 4px;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--op-ink);
	line-height: 1.15;
}

.oliver-pos-dash-subtitle {
	font-size: 13px;
	color: var(--op-ink-3);
	margin: 0;
}

/* ── Segmented control (date presets + chart toggle) ───────────── */
.oliver-pos-dash-date-picker,
.oliver-pos-dash-chart-toggle {
	display: inline-flex;
	gap: 2px;
	background: var(--op-line-2);
	border-radius: 10px;
	padding: 3px;
	flex-shrink: 0;
}

.oliver-pos-dash-preset,
.oliver-pos-dash-chart-btn {
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 500;
	font-family: inherit;
	background: transparent;
	border: 0;
	border-radius: 7px;
	cursor: pointer;
	color: var(--op-ink-3);
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	white-space: nowrap;
	letter-spacing: -0.005em;
}

.oliver-pos-dash-preset:hover,
.oliver-pos-dash-chart-btn:hover {
	color: var(--op-ink);
}

.oliver-pos-dash-preset.active,
.oliver-pos-dash-chart-btn.active {
	background: var(--op-surface);
	color: var(--op-ink);
	font-weight: 600;
	box-shadow: 0 1px 2px rgba(15, 15, 20, 0.06),
	            0 1px 3px rgba(15, 15, 20, 0.04);
}

/* ── KPI cards row ─────────────────────────────────────────────── */
.oliver-pos-wrap .oliver-pos-dash-kpis {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr) !important;
	gap: 16px !important;
	margin-bottom: 24px;
}

.oliver-pos-wrap .oliver-pos-dash-kpi {
	background: var(--op-surface) !important;
	border: 1px solid var(--op-line) !important;
	border-radius: var(--op-radius) !important;
	box-shadow: var(--op-shadow) !important;
	padding: 22px 24px;
	display: flex !important;
	flex-direction: column;
	gap: 6px;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
	position: relative;
	overflow: hidden;
}

.oliver-pos-dash-kpi:hover {
	transform: translateY(-1px);
	border-color: var(--op-line);
	box-shadow: 0 1px 2px rgba(15, 15, 20, 0.04),
	            0 12px 32px rgba(15, 15, 20, 0.08);
}

.oliver-pos-dash-kpi-loaded {
	animation: oliverKpiFadeIn 0.4s ease forwards;
}

@keyframes oliverKpiFadeIn {
	from { opacity: 0.6; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.oliver-pos-dash-kpi-value {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--op-ink);
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

.oliver-pos-dash-kpi-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--op-ink-3);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.oliver-pos-dash-kpi-delta {
	font-size: 12px;
	font-weight: 600;
	min-height: 18px;
	color: var(--op-ink-3);
}

.oliver-pos-dash-delta-up {
	color: var(--op-success);
}

.oliver-pos-dash-delta-down {
	color: var(--op-danger);
}

/* ── Skeleton loading ──────────────────────────────────────────── */
.oliver-pos-dash-skeleton {
	background: linear-gradient(90deg, var(--op-line-2) 25%, var(--op-line) 50%, var(--op-line-2) 75%);
	background-size: 200% 100%;
	animation: oliverSkeleton 1.5s ease infinite;
	border-radius: 6px;
	display: inline-block;
	min-width: 80px;
	min-height: 28px;
	color: transparent !important;
}

@keyframes oliverSkeleton {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ── Cards (shared) ────────────────────────────────────────────── */
.oliver-pos-wrap .oliver-pos-dash-card {
	background: var(--op-surface) !important;
	border: 1px solid var(--op-line) !important;
	border-radius: var(--op-radius-lg) !important;
	box-shadow: var(--op-shadow) !important;
	overflow: hidden;
}

.oliver-pos-wrap .oliver-pos-dash-card-header {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 24px;
	border-bottom: 1px solid var(--op-line-2);
}

.oliver-pos-wrap .oliver-pos-dash-card-header h2 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--op-ink);
}

.oliver-pos-wrap .oliver-pos-dash-view-all {
	font-size: 12px;
	font-weight: 600;
	color: var(--op-ink-2);
	text-decoration: none;
	transition: color 0.15s ease, transform 0.15s ease;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.oliver-pos-wrap .oliver-pos-dash-view-all:hover {
	color: var(--op-ink);
	transform: translateX(2px);
}

/* ── Chart card ────────────────────────────────────────────────── */
.oliver-pos-dash-chart-card {
	margin-bottom: 24px;
}

.oliver-pos-wrap .oliver-pos-dash-chart-wrap {
	padding: 20px 24px 24px;
	position: relative;
	height: 300px;
	max-height: 300px;
	overflow: hidden;
}

/* ── Two-column grid ───────────────────────────────────────────── */
.oliver-pos-wrap .oliver-pos-dash-columns {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 24px !important;
	margin-bottom: 24px;
}

.oliver-pos-wrap .oliver-pos-dash-col {
	display: flex !important;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

/* ── Channel donut ─────────────────────────────────────────────── */
.oliver-pos-wrap .oliver-pos-dash-channel-wrap {
	display: flex !important;
	align-items: center;
	gap: 28px;
	padding: 24px;
}

.oliver-pos-wrap .oliver-pos-dash-channel-chart {
	flex-shrink: 0;
	width: 140px !important;
	height: 140px !important;
	max-width: 140px !important;
	max-height: 140px !important;
	position: relative;
	overflow: hidden;
}

.oliver-pos-dash-channel-legend {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.oliver-pos-dash-legend-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--op-ink-2);
}

.oliver-pos-dash-legend-dot {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	flex-shrink: 0;
}

.oliver-pos-dash-legend-label {
	min-width: 48px;
	color: var(--op-ink-2);
}

.oliver-pos-dash-legend-row strong {
	font-weight: 700;
	color: var(--op-ink);
	font-variant-numeric: tabular-nums;
}

.oliver-pos-dash-legend-amount {
	color: var(--op-ink-3);
	font-size: 12px;
	margin-left: auto;
	font-variant-numeric: tabular-nums;
}

/* ── Payment method bars ───────────────────────────────────────── */
.oliver-pos-dash-payments {
	padding: 8px 24px 16px;
}

.oliver-pos-dash-payment-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 6px 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--op-line-2);
	align-items: center;
}

.oliver-pos-dash-payment-row:last-child {
	border-bottom: 0;
}

.oliver-pos-dash-payment-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.oliver-pos-dash-payment-method {
	font-size: 13px;
	font-weight: 600;
	color: var(--op-ink);
	letter-spacing: -0.005em;
}

.oliver-pos-dash-payment-amount {
	font-size: 13px;
	color: var(--op-ink-3);
	font-variant-numeric: tabular-nums;
}

.oliver-pos-dash-payment-bar-wrap {
	grid-column: 1;
	height: 6px;
	background: var(--op-line-2);
	border-radius: 999px;
	overflow: hidden;
}

.oliver-pos-dash-payment-bar {
	height: 100%;
	background: linear-gradient(90deg, var(--op-ink-2), var(--op-ink));
	border-radius: 999px;
	transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.oliver-pos-dash-payment-pct {
	font-size: 12px;
	font-weight: 600;
	color: var(--op-ink-3);
	text-align: right;
	font-variant-numeric: tabular-nums;
	grid-row: 1 / 3;
	grid-column: 2;
}

/* ── Outlet performance rows ───────────────────────────────────── */
.oliver-pos-dash-outlets {
	padding: 4px 0;
}

.oliver-pos-dash-outlet-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 24px;
	border-bottom: 1px solid var(--op-line-2);
	transition: background 0.15s ease;
}

.oliver-pos-dash-outlet-row:last-child {
	border-bottom: 0;
}

.oliver-pos-dash-outlet-row:hover {
	background: var(--op-line-2);
}

.oliver-pos-dash-outlet-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--op-ink);
	flex: 1;
	letter-spacing: -0.005em;
}

.oliver-pos-dash-outlet-revenue {
	font-size: 14px;
	font-weight: 700;
	color: var(--op-ink);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

.oliver-pos-dash-outlet-orders {
	font-size: 12px;
	color: var(--op-ink-3);
	min-width: 70px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* ── Recent orders ─────────────────────────────────────────────── */
.oliver-pos-dash-recent {
	padding: 0;
}

.oliver-pos-dash-order-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 24px;
	border-bottom: 1px solid var(--op-line-2);
	text-decoration: none;
	transition: background 0.15s ease;
}

.oliver-pos-dash-order-row:last-child {
	border-bottom: 0;
}

.oliver-pos-dash-order-row:hover {
	background: var(--op-line-2);
}

.oliver-pos-dash-order-number {
	font-size: 13px;
	font-weight: 600;
	color: var(--op-ink);
	min-width: 80px;
	letter-spacing: -0.005em;
}

.oliver-pos-dash-order-total {
	font-size: 13px;
	font-weight: 600;
	color: var(--op-ink);
	font-variant-numeric: tabular-nums;
	flex: 1;
}

.oliver-pos-dash-order-status {
	font-size: 11px;
	font-weight: 600;
	text-transform: capitalize;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--op-success-bg);
	color: var(--op-success);
	letter-spacing: 0.01em;
}

.oliver-pos-dash-status-processing {
	background: var(--op-accent-soft);
	color: var(--op-ink);
}

.oliver-pos-dash-status-on-hold {
	background: var(--op-warn-bg);
	color: var(--op-warn);
}

.oliver-pos-dash-status-refunded {
	background: var(--op-danger-bg);
	color: var(--op-danger);
}

.oliver-pos-dash-order-ago {
	font-size: 12px;
	color: var(--op-ink-3);
	min-width: 64px;
	text-align: right;
}

/* ── Empty state ───────────────────────────────────────────────── */
.oliver-pos-dash-empty {
	text-align: center;
	padding: 32px 24px;
	color: var(--op-ink-3);
	font-size: 13px;
	margin: 0;
}

/* ── System health strip ───────────────────────────────────────── */
.oliver-pos-wrap .oliver-pos-dash-health {
	display: flex !important;
	align-items: center;
	gap: 24px;
	padding: 14px 22px;
	background: var(--op-surface);
	border: 1px solid var(--op-line);
	border-radius: var(--op-radius);
	box-shadow: var(--op-shadow);
	font-size: 13px;
	color: var(--op-ink-2);
	flex-wrap: wrap;
}

.oliver-pos-dash-health-item {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.oliver-pos-dash-health-item .dashicons {
	color: var(--op-ink-3);
}

.oliver-pos-dash-health-item strong {
	color: var(--op-ink);
	font-weight: 600;
}

.oliver-pos-dash-health-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--op-line);
}

.oliver-pos-dash-dot-healthy {
	background: var(--op-success);
	box-shadow: 0 0 0 3px rgba(20, 164, 77, 0.18);
}

.oliver-pos-dash-dot-warning {
	background: var(--op-warn);
	box-shadow: 0 0 0 3px rgba(177, 112, 0, 0.18);
}

.oliver-pos-dash-dot-stale {
	background: var(--op-danger);
	box-shadow: 0 0 0 3px rgba(177, 40, 30, 0.18);
}

.oliver-pos-dash-dot-none {
	background: var(--op-line);
}

.oliver-pos-dash-health-versions {
	margin-left: auto;
	font-size: 12px;
	color: var(--op-ink-3);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.oliver-pos-dash-separator {
	color: var(--op-line);
}

.oliver-pos-dash-health-link {
	font-size: 12px;
	font-weight: 600;
	color: var(--op-ink-2);
	text-decoration: none;
	transition: color 0.15s ease, transform 0.15s ease;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.oliver-pos-dash-health-link:hover {
	color: var(--op-ink);
	transform: translateX(2px);
}

/* ── Responsive ────────────────────────────────────────────────── */
@media screen and (max-width: 1200px) {
	.oliver-pos-wrap .oliver-pos-dash-kpis {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

@media screen and (max-width: 782px) {
	.oliver-pos-wrap .oliver-pos-dash-welcome {
		flex-direction: column;
		align-items: flex-start;
	}

	.oliver-pos-wrap .oliver-pos-dash-date-picker {
		align-self: stretch;
		overflow-x: auto;
	}

	.oliver-pos-wrap .oliver-pos-dash-welcome h1 {
		font-size: 24px;
	}

	.oliver-pos-wrap .oliver-pos-dash-kpis {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.oliver-pos-wrap .oliver-pos-dash-columns {
		grid-template-columns: 1fr !important;
	}

	.oliver-pos-wrap .oliver-pos-dash-kpi-value {
		font-size: 22px;
	}

	.oliver-pos-wrap .oliver-pos-dash-chart-wrap {
		height: 240px;
		padding: 16px 20px 20px;
	}

	.oliver-pos-wrap .oliver-pos-dash-channel-wrap {
		flex-direction: column;
		text-align: center;
		gap: 16px;
	}

	.oliver-pos-wrap .oliver-pos-dash-health {
		gap: 14px;
	}

	.oliver-pos-wrap .oliver-pos-dash-health-versions {
		margin-left: 0;
	}
}

@media screen and (max-width: 480px) {
	.oliver-pos-wrap .oliver-pos-dash-kpis {
		grid-template-columns: 1fr !important;
	}

	.oliver-pos-wrap .oliver-pos-dash-kpi {
		padding: 16px 18px;
	}
}

/* ================================================================
   Outlet Screens — Modern styling for the CPT list & edit pages
   ================================================================ */

/* ── Outlet status badges ──────────────────────────────────────── */
.oliver-pos-outlet-badge {
	display: inline-block;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 12px;
	white-space: nowrap;
}

.oliver-pos-outlet-badge-active {
	background: #D4F9E4;
	color: #065f46;
}

.oliver-pos-outlet-badge-inactive {
	background: #FBDDD8;
	color: #991b1b;
}

.oliver-pos-outlet-badge-online {
	background: #E6F7FA;
	color: #0A8FAF;
}

.oliver-pos-outlet-badge-not-paired {
	background: #f3f4f6;
	color: #6B8A93;
}

.oliver-pos-outlet-badge-muted {
	color: #BDD1D7;
	font-size: 14px;
}

/* ── Outlet list table ─────────────────────────────────────────── */
.post-type-oliver_outlet .wp-list-table {
	border: 1px solid #BDD1D7;
	border-radius: 8px;
	overflow: hidden;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	box-shadow: 0 1px 3px rgba(15, 35, 43, 0.06), 0 1px 2px rgba(15, 35, 43, 0.04);
}

.post-type-oliver_outlet .wp-list-table thead th,
.post-type-oliver_outlet .wp-list-table tfoot th {
	background: #FAFCFD;
	color: #1F5160;
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-bottom: 2px solid #E6EEF0;
	padding: 12px 14px;
}

.post-type-oliver_outlet .wp-list-table tfoot th {
	border-bottom: none;
	border-top: 2px solid #E6EEF0;
}

.post-type-oliver_outlet .wp-list-table tbody td {
	padding: 12px 14px;
	color: #3A5A66;
	border-bottom: 1px solid #EFF5F7;
	vertical-align: middle;
}

.post-type-oliver_outlet .wp-list-table tbody tr:last-child td {
	border-bottom: none;
}

.post-type-oliver_outlet .wp-list-table tbody tr:hover td {
	background: #F5F9FA;
}

.post-type-oliver_outlet .wp-list-table .column-title strong a {
	color: #0A8FAF;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}

.post-type-oliver_outlet .wp-list-table .column-title strong a:hover {
	color: #14BDD1;
}

.post-type-oliver_outlet .wp-list-table .row-actions a {
	color: #3A5A66;
}

.post-type-oliver_outlet .wp-list-table .row-actions a:hover {
	color: #0A8FAF;
}

.post-type-oliver_outlet .wp-list-table .row-actions .trash a:hover {
	color: #E55A48;
}

.post-type-oliver_outlet .wp-list-table .check-column {
	border-right: none;
}

.post-type-oliver_outlet .oliver-pos-status-active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: #D4F9E4;
	border-radius: 50%;
	color: #065f46;
	font-size: 13px;
}

.post-type-oliver_outlet .oliver-pos-status-inactive {
	color: #6B8A93;
	font-weight: 400;
}

.post-type-oliver_outlet .wrap > h1 {
	color: #1F5160;
	font-weight: 700;
	font-size: 22px;
}

.post-type-oliver_outlet .page-title-action {
	background: #14BDD1 !important;
	border-color: #14BDD1 !important;
	color: #fff !important;
	border-radius: 6px !important;
	padding: 4px 16px !important;
	font-weight: 500 !important;
	text-shadow: none !important;
	box-shadow: 0 1px 2px rgba(20, 189, 209, 0.2) !important;
	transition: all 0.15s ease !important;
}

.post-type-oliver_outlet .page-title-action:hover {
	background: #0A8FAF !important;
	border-color: #0A8FAF !important;
	color: #fff !important;
}

.post-type-oliver_outlet .subsubsub a {
	color: #3A5A66;
}

.post-type-oliver_outlet .subsubsub a:hover,
.post-type-oliver_outlet .subsubsub a.current {
	color: #0A8FAF;
}

.post-type-oliver_outlet .tablenav .actions select,
.post-type-oliver_outlet .tablenav .actions .button {
	border-radius: 6px;
	border-color: #BDD1D7;
}

.post-type-oliver_outlet .search-box input[type="search"] {
	border-radius: 6px;
	border-color: #BDD1D7;
	padding: 4px 10px;
}

.post-type-oliver_outlet .search-box input[type="search"]:focus {
	border-color: #14BDD1;
	box-shadow: 0 0 0 3px #E6F7FA;
}

.post-type-oliver_outlet .search-box .button {
	border-radius: 6px;
	border-color: #BDD1D7;
}

/* ── Outlet edit screen ────────────────────────────────────────── */
.post-type-oliver_outlet #poststuff #post-body.columns-2 #postbox-container-1 .postbox,
.post-type-oliver_outlet #poststuff #post-body.columns-2 #postbox-container-2 .postbox {
	border: 1px solid #BDD1D7;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(15, 35, 43, 0.06), 0 1px 2px rgba(15, 35, 43, 0.04);
	overflow: hidden;
}

.post-type-oliver_outlet .postbox .postbox-header {
	border-bottom: 1px solid #E6EEF0;
}

.post-type-oliver_outlet .postbox .postbox-header h2 {
	color: #1F5160;
	font-size: 14px;
	font-weight: 600;
}

.post-type-oliver_outlet #titlewrap #title {
	border: 1px solid #BDD1D7;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 18px;
	font-weight: 600;
	color: #1F5160;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.post-type-oliver_outlet #titlewrap #title:focus {
	border-color: #14BDD1;
	box-shadow: 0 0 0 3px #E6F7FA;
	outline: none;
}

.post-type-oliver_outlet .postbox .inside .form-table th {
	color: #1F5160;
	font-weight: 500;
	font-size: 13px;
}

.post-type-oliver_outlet .postbox .inside .form-table input[type="text"],
.post-type-oliver_outlet .postbox .inside .form-table input[type="email"] {
	border: 1px solid #BDD1D7;
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 13px;
	color: #1F5160;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.post-type-oliver_outlet .postbox .inside .form-table input[type="text"]:focus,
.post-type-oliver_outlet .postbox .inside .form-table input[type="email"]:focus {
	border-color: #14BDD1;
	box-shadow: 0 0 0 3px #E6F7FA;
	outline: none;
}

.post-type-oliver_outlet #publish {
	background: #14BDD1 !important;
	border-color: #14BDD1 !important;
	color: #fff !important;
	border-radius: 6px !important;
	padding: 4px 20px !important;
	font-weight: 500 !important;
	text-shadow: none !important;
	box-shadow: 0 1px 2px rgba(20, 189, 209, 0.2) !important;
	transition: all 0.15s ease !important;
}

.post-type-oliver_outlet #publish:hover {
	background: #0A8FAF !important;
	border-color: #0A8FAF !important;
}

.post-type-oliver_outlet .oliver-pos-pairing-code {
	background: #F5F9FA;
	border: 2px dashed #BDD1D7;
	border-radius: 8px;
	padding: 16px;
	margin: 12px 0;
	color: #1F5160;
}

.post-type-oliver_outlet #oliver-pos-generate-pairing {
	background: #14BDD1;
	border-color: #14BDD1;
	color: #fff;
	border-radius: 6px;
	font-weight: 500;
	text-shadow: none;
	padding: 6px 20px;
}

.post-type-oliver_outlet #oliver-pos-generate-pairing:hover {
	background: #0A8FAF;
	border-color: #0A8FAF;
}

/* ── Device Pairing layout ─────────────────────────────────────── */
.oliver-pos-pairing-layout {
	display: flex;
	gap: 32px;
	align-items: flex-start;
	padding: 8px 0;
}

.oliver-pos-pairing-status-col {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.oliver-pos-pairing-qr-col {
	flex-shrink: 0;
	width: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.oliver-pos-pairing-status-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	border-radius: 8px;
	border: 1px solid #E6EEF0;
	background: #FAFCFD;
}

.oliver-pos-pairing-paired {
	border-color: #D4F9E4;
	background: #f0fdf4;
}

.oliver-pos-pairing-unpaired {
	border-color: #f3f4f6;
	background: #f9fafb;
}

.oliver-pos-pairing-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
	background: #BDD1D7;
}

.oliver-pos-pairing-dot-active {
	background: #28E279;
	box-shadow: 0 0 0 3px rgba(40, 226, 121, 0.2);
}

.oliver-pos-pairing-status-text {
	font-size: 13px;
	color: #3A5A66;
	margin: 0;
}

.oliver-pos-pairing-help {
	font-size: 12px;
	color: #6B8A93;
	margin: 0;
	line-height: 1.5;
}

.oliver-pos-pairing-help em {
	color: #F47A35;
	font-style: normal;
}

.oliver-pos-pairing-qr-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 200px;
	height: 200px;
	border: 2px dashed #E6EEF0;
	border-radius: 12px;
	background: #FAFCFD;
	text-align: center;
}

.oliver-pos-pairing-qr-placeholder p {
	font-size: 12px;
	color: #BDD1D7;
	margin: 0;
	padding: 0 16px;
	line-height: 1.4;
}

.oliver-pos-pairing-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 24px;
	text-align: center;
}

.oliver-pos-pairing-empty p {
	font-size: 13px;
	color: #6B8A93;
	margin: 0;
}

.oliver-pos-pairing-qr-col #oliver-pos-qr-code {
	margin: 0;
}

.oliver-pos-pairing-qr-col #oliver-pos-copy-key {
	margin-top: 8px;
}

@media screen and (max-width: 782px) {
	.oliver-pos-pairing-layout {
		flex-direction: column;
	}

	.oliver-pos-pairing-qr-col {
		width: 100%;
	}
}

/* ── Stations list (multi-device pairing) ─────────────────────── */
.oliver-pos-stations-wrapper {
	padding: 4px 0;
}

.oliver-pos-stations-table {
	border: 1px solid #E6EEF0;
	border-radius: 8px;
	overflow: hidden;
}

.oliver-pos-stations-table th {
	background: #F5F9FA;
	color: #1F5160;
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 10px 14px;
}

.oliver-pos-stations-table td {
	padding: 10px 14px;
	vertical-align: middle;
	font-size: 13px;
}

.oliver-pos-station-name {
	font-weight: 500;
	color: #1F5160;
}

.oliver-pos-station-rename-input {
	width: 160px;
	font-size: 13px;
	padding: 4px 8px;
	border: 1px solid #BDD1D7;
	border-radius: 4px;
}

.oliver-pos-station-actions {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.oliver-pos-station-actions .button-small {
	font-size: 12px;
	padding: 2px 10px;
	min-height: 26px;
	line-height: 24px;
}

.oliver-pos-station-revoke-btn {
	color: #cc1818 !important;
	border-color: #cc1818 !important;
}

.oliver-pos-station-revoke-btn:hover {
	background: #cc1818 !important;
	color: #fff !important;
}

.oliver-pos-stations-empty {
	text-align: center;
	color: #6B8A93;
	font-size: 13px;
	padding: 24px;
	margin: 0;
}

.oliver-pos-stations-actions {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.oliver-pos-stations-actions #oliver-pos-add-station,
.oliver-pos-stations-actions span.button.oliver-pos-gated {
	background: #14BDD1;
	border-color: #14BDD1;
	color: #fff;
	border-radius: 6px;
	font-weight: 500;
	text-shadow: none;
	padding: 6px 20px;
	align-self: flex-start;
}

.oliver-pos-stations-actions #oliver-pos-add-station:hover {
	background: #0A8FAF;
	border-color: #0A8FAF;
}

.oliver-pos-station-seat-meter {
	color: #6B8A93;
	font-size: 13px;
}

/* ── Station pairing modal ─────────────────────────────────────── */
.oliver-pos-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100100;
	display: flex;
	align-items: center;
	justify-content: center;
}

.oliver-pos-modal-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(15, 35, 43, 0.55);
	animation: oliverModalFadeIn 0.2s ease;
}

@keyframes oliverModalFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes oliverModalSlideIn {
	from { opacity: 0; transform: translateY(16px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.oliver-pos-modal-content {
	position: relative;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(15, 35, 43, 0.25), 0 4px 16px rgba(15, 35, 43, 0.1);
	width: 420px;
	max-width: calc(100vw - 40px);
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	animation: oliverModalSlideIn 0.25s ease;
}

.oliver-pos-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px 0;
}

.oliver-pos-modal-header h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #1F5160;
}

.oliver-pos-modal-close {
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	color: #6B8A93;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 6px;
	transition: background 0.15s, color 0.15s;
}

.oliver-pos-modal-close:hover {
	background: #EFF5F7;
	color: #1F5160;
}

.oliver-pos-modal-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px 24px;
	gap: 16px;
}

.oliver-pos-modal-instruction {
	font-size: 13px;
	color: #3A5A66;
	text-align: center;
	margin: 0;
	line-height: 1.5;
}

.oliver-pos-modal-body #oliver-pos-qr-code {
	background: #fff;
	border: 1px solid #E6EEF0;
	border-radius: 8px;
	padding: 16px;
}

.oliver-pos-modal-divider {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 12px;
	color: #BDD1D7;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.oliver-pos-modal-divider::before,
.oliver-pos-modal-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #E6EEF0;
}

.oliver-pos-modal-body #oliver-pos-copy-key {
	width: 100%;
	text-align: center;
}

.oliver-pos-modal-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 0 24px 20px;
}

.oliver-pos-modal-warning {
	font-size: 12px;
	color: #F47A35;
	text-align: center;
	margin: 0;
	line-height: 1.4;
	background: #FFF8F0;
	border: 1px solid #FDE8D0;
	border-radius: 6px;
	padding: 8px 12px;
	width: 100%;
}

.oliver-pos-modal-footer > .button {
	width: 100%;
	text-align: center;
}

/* ── Storefront promo banner ──────────────────────────────────────── */

.oliver-pos-storefront-promo {
	display: flex;
	gap: 20px;
	padding: 24px 28px;
	margin-bottom: 24px;
	background: linear-gradient(135deg, var(--oliver-primary-lightest, #E6F7FA) 0%, #fff 100%);
	border: 1px solid var(--oliver-primary-light, #CDEBF0);
	border-radius: var(--oliver-card-radius, 8px);
	box-shadow: var(--oliver-card-shadow);
}

.oliver-pos-storefront-promo__icon {
	flex-shrink: 0;
	display: flex;
	align-items: flex-start;
	padding-top: 2px;
	color: var(--oliver-primary, #14BDD1);
}

.oliver-pos-storefront-promo__content h3 {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
	color: var(--oliver-deep, #1F5160);
	line-height: 1.3;
}

.oliver-pos-storefront-promo__content p {
	margin: 0 0 12px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--oliver-on-surface-variant, #3A5A66);
}

.oliver-pos-storefront-promo__content ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oliver-pos-storefront-promo__content ul li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 6px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--oliver-on-surface-variant, #3A5A66);
}

.oliver-pos-storefront-promo__content ul li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--oliver-success, #28E279);
	font-weight: 700;
	font-size: 14px;
}

@media (max-width: 600px) {
	.oliver-pos-storefront-promo {
		flex-direction: column;
		gap: 12px;
	}
}

/* ── Shortcode copy row ───────────────────────────────────────────── */

.oliver-pos-shortcode-copy {
	display: flex;
	gap: 8px;
	align-items: center;
}

.oliver-pos-shortcode-copy input.code {
	font-family: Menlo, Consolas, Monaco, monospace;
	font-size: 13px;
	background: var(--oliver-surface-container-low, #F5F9FA);
}

/* ── Clickable report rows ──────────────────────────────────────── */

.oliver-pos-clickable-table tbody tr.oliver-pos-clickable-row {
	cursor: pointer;
}

.oliver-pos-clickable-table tbody tr.oliver-pos-clickable-row:hover td {
	background: var(--oliver-primary-lightest, #E6F7FA);
}

.oliver-pos-clickable-table tbody tr.oliver-pos-clickable-row td a {
	color: var(--oliver-primary, #14BDD1);
	text-decoration: none;
	font-weight: 600;
}

.oliver-pos-clickable-table tbody tr.oliver-pos-clickable-row td a:hover {
	text-decoration: underline;
}

/* ── Shift Detail / Z-Report ────────────────────────────────────── */

.oliver-pos-shift-detail-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.oliver-pos-back-link {
	color: var(--oliver-primary, #14BDD1);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
}

.oliver-pos-back-link:hover {
	text-decoration: underline;
}

.oliver-pos-print-btn {
	margin-left: auto;
}

.oliver-pos-shift-detail-title h2 {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
	color: var(--oliver-deep, #1F5160);
}

.oliver-pos-shift-detail-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	font-size: 13px;
	color: var(--oliver-on-surface-variant, #3A5A66);
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--oliver-outline-variant, #BDD1D7);
}

.oliver-pos-shift-detail-meta strong {
	color: var(--oliver-on-surface, #1F5160);
}

.oliver-pos-shift-section {
	margin: 24px 0;
}

.oliver-pos-shift-section h3 {
	font-size: 15px;
	font-weight: 600;
	color: var(--oliver-deep, #1F5160);
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--oliver-surface-container-high, #E6EEF0);
}

/* ── Variance Box ───────────────────────────────────────────────── */

.oliver-pos-variance-box {
	padding: 16px 20px;
	border-radius: var(--oliver-card-radius, 8px);
	margin: 16px 0 24px;
	border-left: 4px solid;
}

.oliver-pos-variance-box h3 {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 12px;
	border-bottom: none;
	padding-bottom: 0;
}

.oliver-pos-variance-box p {
	margin: 4px 0;
	font-size: 13px;
}

.oliver-pos-variance-short {
	background: var(--oliver-error-container, #FBDDD8);
	border-color: var(--oliver-error, #E55A48);
	color: #7f1d1d;
}

.oliver-pos-variance-over {
	background: #FEF9C3;
	border-color: #F59E0B;
	color: #713f12;
}

.oliver-pos-variance-zero {
	background: #D1FAE5;
	border-color: var(--oliver-success, #28E279);
	color: #065f46;
}

.oliver-pos-variance-amount {
	font-size: 18px;
	font-weight: 700;
}

/* ── Positive highlighting ──────────────────────────────────────── */

.oliver-pos-positive {
	color: var(--oliver-success, #28E279) !important;
	font-weight: 600;
}

.oliver-pos-summary-card.oliver-pos-positive .oliver-pos-summary-value {
	color: #059669;
}

/* ── Ledger badges ──────────────────────────────────────────────── */

.oliver-pos-ledger-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}

.oliver-pos-ledger-badge-success {
	background: #D1FAE5;
	color: #065f46;
}

.oliver-pos-ledger-badge-warning {
	background: #FEF3C7;
	color: #92400e;
}

.oliver-pos-ledger-badge-error {
	background: var(--oliver-error-container, #FBDDD8);
	color: var(--oliver-error, #E55A48);
}

.oliver-pos-ledger-badge-info {
	background: var(--oliver-primary-lightest, #E6F7FA);
	color: var(--oliver-primary, #14BDD1);
}

/* ── Rejected row ───────────────────────────────────────────────── */

.oliver-pos-rejected-row td {
	background: #FEF2F2 !important;
	text-decoration: line-through;
	color: #9CA3AF;
}

.oliver-pos-rejected-row:hover td {
	background: #FEE2E2 !important;
}

.oliver-pos-rejected-row .oliver-pos-ledger-badge {
	text-decoration: none;
}

/* ── Denomination / tfoot ───────────────────────────────────────── */

.oliver-pos-report-table tfoot th {
	padding: 12px 14px;
	font-size: 13px;
	font-weight: 700;
	color: var(--oliver-on-surface, #1F5160);
	background: var(--oliver-surface, #FAFCFD);
	border-top: 2px solid var(--oliver-surface-container-high, #E6EEF0);
}

.oliver-pos-report-table tfoot th.num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* ── Print styles ───────────────────────────────────────────────── */

@media print {
	#adminmenumain,
	#wpadminbar,
	.oliver-pos-report-tabs,
	.oliver-pos-report-filters,
	.oliver-pos-shift-detail-header,
	.oliver-pos-date-presets,
	.notice,
	.update-nag,
	#screen-meta,
	#screen-meta-links,
	.wp-header-end,
	#wpfooter,
	form > input[type="hidden"] {
		display: none !important;
	}

	#wpcontent {
		margin-left: 0 !important;
		padding-left: 0 !important;
	}

	.wrap {
		margin: 0 !important;
	}

	.oliver-pos-summary-cards {
		page-break-inside: avoid;
	}

	.oliver-pos-shift-section {
		page-break-inside: avoid;
	}

	.oliver-pos-variance-box {
		page-break-inside: avoid;
	}

	.oliver-pos-report-table {
		font-size: 11px;
	}
}

/* ── Clickable row JS ───────────────────────────────────────────── */
/* Inline script added by reports — this CSS ensures pointer cursor */