/* ==========================================================================
   YouPay Wallet — Admin Console
   Premium UI layer. Loaded AFTER bootstrap.min.css and styles.css and is the
   single source of truth for the admin look: flat surfaces, hairline borders,
   one accent colour, generous whitespace.

   Nothing here changes markup contracts — it re-skins the existing Bootstrap 3
   / Lumino classes so every page inherits the new design without edits.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
	/* Brand */
	--ypw-brand:        #ED1E79;
	--ypw-brand-600:    #D01366;
	--ypw-brand-700:    #B00E56;
	--ypw-brand-soft:   #FDF1F7;
	--ypw-brand-ring:   rgba(237, 30, 121, .16);

	/* Neutrals */
	--ypw-canvas:       #F5F6F8;
	--ypw-surface:      #FFFFFF;
	--ypw-surface-alt:  #FAFBFC;
	--ypw-line:         #E7E9ED;
	--ypw-line-soft:    #F0F1F4;

	--ypw-ink:          #0F1115;
	--ypw-ink-2:        #3D4351;
	--ypw-muted:        #79808F;
	--ypw-faint:        #A3A9B5;

	/* Sidebar */
	--ypw-nav:          #101116;
	--ypw-nav-alt:      #17191F;
	--ypw-nav-line:     rgba(255, 255, 255, .07);
	--ypw-nav-text:     #9BA1AE;
	--ypw-nav-active:   #FFFFFF;

	/* Semantic */
	--ypw-success:      #12A150;
	--ypw-success-soft: #E8F7EE;
	--ypw-warn:         #B96A00;
	--ypw-warn-soft:    #FFF4E5;
	--ypw-danger:       #DC2B2B;
	--ypw-danger-soft:  #FDECEC;
	--ypw-info:         #0B72CE;
	--ypw-info-soft:    #E9F3FC;

	/* Shape */
	--ypw-r-lg:  16px;
	--ypw-r:     12px;
	--ypw-r-sm:  9px;
	--ypw-r-pill: 999px;

	/* Elevation — deliberately restrained */
	--ypw-shadow-sm: 0 1px 2px rgba(15, 17, 21, .04);
	--ypw-shadow:    0 1px 2px rgba(15, 17, 21, .04), 0 12px 28px -18px rgba(15, 17, 21, .25);
	--ypw-shadow-lg: 0 24px 60px -24px rgba(15, 17, 21, .35);

	/* Metrics */
	--ypw-topbar: 64px;
	--ypw-rail:   264px;

	--ypw-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html, body {
	height: auto;
	min-height: 100%;
}

body {
	background: var(--ypw-canvas);
	color: var(--ypw-ink-2);
	font-family: var(--ypw-font);
	font-size: 14px;
	line-height: 1.55;
	letter-spacing: -0.005em;
	padding-top: var(--ypw-topbar);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

p { color: var(--ypw-ink-2); }

a { color: var(--ypw-brand); text-decoration: none; transition: color .15s ease; }
a:hover, a:focus { color: var(--ypw-brand-600); text-decoration: none; outline: none; }

h1, h2, h3, h4, h5, h6 {
	color: var(--ypw-ink);
	font-family: var(--ypw-font);
	font-weight: 600;
	letter-spacing: -0.02em;
}

h1 { font-size: 26px; font-weight: 600; }
h2 { font-size: 21px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }

.text-muted { color: var(--ypw-muted); }
.large { font-size: 1.9em; }

hr { border-top: 1px solid var(--ypw-line); }

::selection { background: var(--ypw-brand-ring); color: var(--ypw-ink); }

/* Tabular figures wherever money or counts are shown */
.ypw-num, .ypw-stat__value, td, .large { font-variant-numeric: tabular-nums; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: #D2D6DD transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D2D6DD; border: 3px solid transparent; background-clip: content-box; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #B9BEC8; background-clip: content-box; }

/* --------------------------------------------------------------------------
   3. Topbar
   -------------------------------------------------------------------------- */
.navbar.navbar-fixed-top,
.navbar-inverse {
	background: var(--ypw-surface);
	border: 0;
	border-bottom: 1px solid var(--ypw-line);
	border-radius: 0;
	box-shadow: none;
	min-height: var(--ypw-topbar);
	margin: 0;
}

.navbar-fixed-top .container-fluid { padding: 0; }

.navbar-header {
	display: flex;
	align-items: center;
	height: var(--ypw-topbar);
	width: 100%;
	float: none;
	padding: 0 24px;
	gap: 14px;
}

/* Brand lives in the rail on desktop; shown in the bar on mobile */
.navbar-header .navbar-brand {
	display: none;
	height: var(--ypw-topbar);
	padding: 0;
	line-height: var(--ypw-topbar);
	color: var(--ypw-ink);
	font-size: 15px;
	font-weight: 650;
	letter-spacing: -0.02em;
	text-transform: none;
}
.navbar-header .navbar-brand span { color: var(--ypw-ink); }

/*
 * Hamburger.
 *
 * flex-direction MUST stay column: the three .icon-bar spans are flex items,
 * so the default row direction lines them up side by side into one wide dash
 * instead of stacking them.
 */
.navbar-toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	float: none;
	margin: 0;
	padding: 0;
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	border: 1px solid var(--ypw-line);
	border-radius: var(--ypw-r-sm);
	background: var(--ypw-surface);
	transition: background .15s ease, border-color .15s ease;
}
.navbar-toggle:hover, .navbar-toggle:focus { background: var(--ypw-surface-alt); border-color: #D9DCE2; }
.navbar-inverse .navbar-toggle { border-color: var(--ypw-line); background: var(--ypw-surface); }
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { background: var(--ypw-surface-alt); }
.navbar-inverse .navbar-toggle .icon-bar {
	display: block;
	background: var(--ypw-ink-2);
	width: 16px;
	height: 1.5px;
	border-radius: 2px;
	margin: 0;
	flex: 0 0 1.5px;
}
.navbar-inverse .navbar-toggle .icon-bar + .icon-bar { margin-top: 0; }

/* Contextual title rendered by nav.php */
.ypw-topbar__title {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	margin-right: auto;
}
.ypw-topbar__eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ypw-faint);
	line-height: 1.2;
}
.ypw-topbar__name {
	font-size: 15px;
	font-weight: 600;
	color: var(--ypw-ink);
	letter-spacing: -0.02em;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Right-hand actions */
.ypw-topbar__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.ypw-env {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 30px;
	padding: 0 12px;
	border: 1px solid var(--ypw-line);
	border-radius: var(--ypw-r-pill);
	background: var(--ypw-surface);
	color: var(--ypw-muted);
	font-size: 12px;
	font-weight: 550;
	white-space: nowrap;
}
.ypw-env .ypw-dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--ypw-success);
	box-shadow: 0 0 0 3px var(--ypw-success-soft);
}

.user-menu {
	display: flex;
	align-items: center;
	float: none;
	margin: 0;
	padding: 0;
	list-style: none;
}
.user-menu > li { position: relative; }
.user-menu a { color: var(--ypw-ink-2); }

.user-menu .dropdown-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	padding: 0 10px 0 6px;
	border: 1px solid transparent;
	border-radius: var(--ypw-r-pill);
	font-size: 13px;
	font-weight: 550;
	color: var(--ypw-ink);
	transition: background .15s ease, border-color .15s ease;
}
.user-menu .dropdown-toggle:hover,
.user-menu .open > .dropdown-toggle {
	background: var(--ypw-surface-alt);
	border-color: var(--ypw-line);
}

.ypw-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px; height: 30px;
	flex: 0 0 30px;
	border-radius: 50%;
	background: var(--ypw-ink);
	color: #fff;
	font-size: 12px;
	font-weight: 650;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.ypw-avatar--brand { background: var(--ypw-brand); }

.ypw-user-meta { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.ypw-user-meta strong { font-weight: 600; color: var(--ypw-ink); font-size: 13px; }
.ypw-user-meta small { color: var(--ypw-faint); font-size: 11px; font-weight: 500; }

.user-menu .caret { color: var(--ypw-faint); margin-left: 2px; }

/* --------------------------------------------------------------------------
   4. Dropdowns
   -------------------------------------------------------------------------- */
.dropdown-menu {
	border: 1px solid var(--ypw-line);
	border-radius: var(--ypw-r);
	box-shadow: var(--ypw-shadow);
	padding: 6px;
	margin-top: 8px;
	min-width: 210px;
	background: var(--ypw-surface);
}
.dropdown-menu > li > a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: var(--ypw-r-sm);
	color: var(--ypw-ink-2);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	background: var(--ypw-surface-alt);
	color: var(--ypw-ink);
}
.dropdown-menu > li > a i { font-size: 15px; color: var(--ypw-muted); width: 16px; text-align: center; }
.dropdown-menu .divider { background: var(--ypw-line-soft); margin: 6px 4px; }
.dropdown-menu .ypw-danger-item:hover { background: var(--ypw-danger-soft); color: var(--ypw-danger); }
.dropdown-menu .ypw-danger-item:hover i { color: var(--ypw-danger); }
.ypw-dropdown-head {
	padding: 10px 10px 8px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--ypw-line-soft);
	line-height: 1.35;
}
.ypw-dropdown-head strong { display: block; font-size: 13px; font-weight: 600; color: var(--ypw-ink); }
.ypw-dropdown-head small { display: block; font-size: 11.5px; color: var(--ypw-faint); }

/* --------------------------------------------------------------------------
   5. Sidebar rail
   -------------------------------------------------------------------------- */
.sidebar {
	background: var(--ypw-nav);
	padding: 0;
	border: 0;
	box-shadow: none;
}

/* Rail header: brand lockup on the left, drawer close on the right (mobile). */
.ypw-rail-head {
	display: flex;
	align-items: center;
	gap: 8px;
	height: var(--ypw-topbar);
	flex: 0 0 var(--ypw-topbar);
	padding: 0 14px 0 20px;
	border-bottom: 1px solid var(--ypw-nav-line);
}

.ypw-rail-brand {
	display: flex;
	align-items: center;
	gap: 11px;
	flex: 1 1 auto;
	min-width: 0;
	color: #fff;
}
.ypw-rail-brand:hover, .ypw-rail-brand:focus { color: #fff; text-decoration: none; }

.ypw-rail-brand__text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.ypw-rail-brand__text strong {
	font-size: 13.5px;
	font-weight: 650;
	letter-spacing: -0.015em;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ypw-rail-brand__text small {
	font-size: 9.5px;
	font-weight: 650;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: #6C7280;
}

/* Hidden on desktop, where the rail is always docked. */
.ypw-rail-close {
	display: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	padding: 0;
	border: 0;
	border-radius: var(--ypw-r-sm);
	background: transparent;
	color: var(--ypw-nav-text);
	font-size: 15px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.ypw-rail-close:hover, .ypw-rail-close:focus { background: var(--ypw-nav-alt); color: #fff; outline: none; }

/*
 * Brand lockup. The wordmark artwork already carries the name and the
 * "Digital Wallet" descriptor, so the rail pairs it with a small badge rather
 * than repeating the company name as text.
 *   logo-light.png — white wordmark, for the dark rail
 *   icon_wide.png  — dark wordmark, for white surfaces (topbar, login card)
 */
.ypw-brand-logo {
	display: block;
	width: auto;
	height: 30px;
	max-width: 100%;
	-webkit-user-select: none;
	user-select: none;
}
.navbar-header .navbar-brand .ypw-brand-logo { height: 35px; }

/* Square app mark — transparent outside the gradient disc, so it needs no
   plate or radius of its own. */
.ypw-brand-mark {
	display: block;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	-webkit-user-select: none;
	user-select: none;
}
.ypw-brand-mark--sm { width: 34px; height: 34px; flex: 0 0 34px; }

.ypw-rail-scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 14px 12px 8px;
}
.ypw-rail-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); background-clip: content-box; }
.ypw-rail-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.24); background-clip: content-box; }

.ypw-rail-label {
	padding: 14px 10px 6px;
	font-size: 10px;
	font-weight: 650;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: #616674;
}
.ypw-rail-label:first-child { padding-top: 2px; }

.sidebar ul.nav { padding: 0; margin: 0; }
.sidebar ul.nav > li { margin: 0 0 2px; }

.sidebar ul.nav > li > a {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 11px;
	border-radius: var(--ypw-r-sm);
	color: var(--ypw-nav-text);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.005em;
	background: transparent;
	border: 0;
	transition: background .15s ease, color .15s ease;
}

.sidebar ul.nav > li > a:hover,
.sidebar ul.nav > li > a:focus,
.sidebar ul.nav li.parent ul li a:hover {
	background: var(--ypw-nav-alt);
	color: #fff;
	text-decoration: none;
}

.sidebar ul.nav > li.active > a,
.sidebar ul.nav > li.current > a {
	background: var(--ypw-brand);
	color: var(--ypw-nav-active) !important;
	font-weight: 550;
	box-shadow: 0 8px 20px -12px var(--ypw-brand);
}
.sidebar ul.nav > li.active > a i,
.sidebar ul.nav > li.current > a i { color: #fff; opacity: 1; }

/* A parent whose child is active stays quiet — the child carries the accent */
.sidebar ul.nav > li.parent.active > a {
	background: var(--ypw-nav-alt);
	color: #fff !important;
	box-shadow: none;
}

.sidebar ul.nav > li > a i,
.sidebar ul.nav > li > a .glyph {
	font-size: 16px;
	width: 18px;
	flex: 0 0 18px;
	text-align: center;
	opacity: .9;
	margin: 0;
}

/*
 * Count pill on a rail item — pending deposits, withdrawals, recharges,
 * enquiries. margin-left:auto parks it at the right edge; on a parent row the
 * caret then needs a fixed gap instead of its own auto margin, or the two
 * share the free space and the pill drifts into the middle.
 */
.sidebar ul.nav .ypw-rail-count {
	margin-left: auto;
	min-width: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--ypw-brand);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	flex: 0 0 auto;
}
.sidebar ul.nav > li > a:has(.ypw-rail-count) .caret,
.sidebar ul.nav li.parent > a:has(.ypw-rail-count) .caret { margin-left: 8px; }

/* An active row is already brand-filled, so a brand pill would vanish into it. */
.sidebar ul.nav > li.active > a .ypw-rail-count,
.sidebar ul.nav li.parent ul li.active > a .ypw-rail-count {
	background: rgba(255, 255, 255, .26);
	color: #fff;
}
/* Children sit on the dark rail, not on the brand fill. */
.sidebar ul.nav li.parent ul li > a .ypw-rail-count {
	line-height: 16px;
	font-size: 10px;
}

.sidebar ul.nav .caret {
	margin-left: auto;
	border: 0;
	width: auto; height: auto;
	transition: transform .2s ease;
}
.sidebar ul.nav .caret::before {
	content: "\F282"; /* bi-chevron-down */
	font-family: "bootstrap-icons";
	font-size: 11px;
	opacity: .7;
}
.sidebar ul.nav > li > a[aria-expanded="true"] .caret { transform: rotate(180deg); }

/* Submenus */
.sidebar ul.nav ul.children {
	background: transparent;
	padding: 3px 0 5px 20px;
	margin: 2px 0 4px;
	position: relative;
	width: auto;
}
.sidebar ul.nav ul.children::before {
	content: "";
	position: absolute;
	left: 21px; top: 4px; bottom: 8px;
	width: 1px;
	background: var(--ypw-nav-line);
}
.sidebar ul.nav li.parent ul li a,
.sidebar ul.nav ul.children li a {
	display: flex;
	align-items: center;
	gap: 10px;
	height: auto;
	line-height: 20px;
	padding: 8px 11px !important;
	margin-left: 8px;
	border-radius: var(--ypw-r-sm);
	background: transparent;
	color: var(--ypw-nav-text) !important;
	font-size: 13px;
	font-weight: 450;
	border: 0;
}
.sidebar ul.nav ul.children li a i { font-size: 14px; width: 16px; flex: 0 0 16px; opacity: .75; }
.sidebar ul.nav ul.children li a:hover { background: var(--ypw-nav-alt); color: #fff !important; }
.sidebar ul.nav ul.children li.active a {
	background: var(--ypw-brand) !important;
	color: #fff !important;
	font-weight: 550;
}
.sidebar ul.nav ul.children li.active a i { opacity: 1; }

.sidebar ul.nav li.divider {
	border-bottom: 1px solid var(--ypw-nav-line);
	margin: 12px 10px;
	height: 0;
}

/* Rail footer */
.ypw-rail-foot {
	flex: 0 0 auto;
	padding: 14px 20px 16px;
	border-top: 1px solid var(--ypw-nav-line);
	color: #5C6170;
	font-size: 11px;
	line-height: 1.5;
}
.ypw-rail-foot strong { color: #8A90A0; font-weight: 600; display: block; }

.sidebar .attribution { position: static; border: 0; color: #5C6170; }

/* --------------------------------------------------------------------------
   6. Main column
   -------------------------------------------------------------------------- */
.main {
	background: transparent;
	padding: 0 28px 48px;
}

.main > .row { margin-left: -12px; margin-right: -12px; }
.main > .row > [class*="col-"] { padding-left: 12px; padding-right: 12px; }

/*
 * Equal-height cards. Bootstrap 3 floats its columns, so a row of tiles ends
 * up ragged whenever one card wraps to a second line. Opting a row into flex
 * keeps the percentage widths and levels the heights.
 */
.ypw-row-equal { display: flex; flex-wrap: wrap; }
.ypw-row-equal > [class*="col-"] { display: flex; flex-direction: column; float: none; }
.ypw-row-equal > [class*="col-"] > .ypw-stat,
.ypw-row-equal > [class*="col-"] > .panel { flex: 1 1 auto; }

/* Breadcrumb — reduced to a quiet trail */
.breadcrumb {
	background: transparent;
	box-shadow: none;
	border: 0;
	border-radius: 0;
	padding: 22px 12px 0;
	margin: 0;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ypw-faint);
}
.breadcrumb > li + li:before {
	content: "/";
	color: #C7CBD3;
	padding: 0 8px;
}
.breadcrumb > li > a { color: var(--ypw-muted); }
.breadcrumb > li > a:hover { color: var(--ypw-brand); }
.breadcrumb > .active,
.breadcrumb > .active > a { color: var(--ypw-ink-2); font-weight: 550; }
.breadcrumb .glyph { width: 15px; height: 15px; stroke: currentColor; vertical-align: -2px; }

h1.page-header {
	margin: 6px 0 22px;
	padding: 0;
	border: 0;
	font-size: 26px;
	font-weight: 650;
	letter-spacing: -0.03em;
	color: var(--ypw-ink);
}

/* Page header with an action on the right */
.ypw-page-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 6px 0 22px;
}
.ypw-page-head h1.page-header { margin: 0; }
.ypw-page-head p { margin: 4px 0 0; color: var(--ypw-muted); font-size: 13.5px; }

/* --------------------------------------------------------------------------
   7. Panels → cards
   -------------------------------------------------------------------------- */
.panel {
	background: var(--ypw-surface);
	border: 1px solid var(--ypw-line);
	border-radius: var(--ypw-r-lg);
	box-shadow: var(--ypw-shadow-sm);
	margin-bottom: 24px;
	overflow: hidden;
}

.panel-default { border-color: var(--ypw-line); }

/*
 * styles.css pins .panel-heading to `height: 66px; line-height: 45px`, which
 * silently clips any header taller than one line — the title/subtitle lockups
 * and the filter rows overflowed the box and collided with the panel body.
 * Both must be reset here, not just the paint properties.
 */
.panel-heading,
.panel-default > .panel-heading {
	background: var(--ypw-surface);
	border-bottom: 1px solid var(--ypw-line-soft);
	color: var(--ypw-ink);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.45;
	height: auto;
	min-height: 0;
	padding: 16px 20px;
	border-radius: 0;
}
.panel-heading .panel-title { font-size: 15px; font-weight: 600; color: var(--ypw-ink); }
.panel-heading label { font-size: 12px !important; font-weight: 600; color: var(--ypw-muted); margin: 0 8px 0 0; }
.panel-heading .glyph { width: 18px; height: 18px; }

.panel-body { padding: 20px; }
.panel-footer {
	background: var(--ypw-surface-alt);
	border-top: 1px solid var(--ypw-line-soft);
	padding: 12px 20px;
	color: var(--ypw-muted);
	font-size: 13px;
}

/* Card header with a trailing toolbar */
.ypw-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}
.ypw-card-head__title { display: flex; flex-direction: column; gap: 2px; }
.ypw-card-head__title strong { font-size: 15px; font-weight: 600; color: var(--ypw-ink); letter-spacing: -0.015em; }
.ypw-card-head__title span { font-size: 12.5px; font-weight: 450; color: var(--ypw-muted); }
.ypw-card-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ypw-card-tools .form-control { height: 36px; font-size: 13px; width: auto; display: inline-block; }

/* Legacy coloured widget panels are normalised to neutral cards */
.panel-blue, .panel-teal, .panel-orange, .panel-red {
	background: var(--ypw-surface);
	color: var(--ypw-ink);
}
.panel-blue .text-muted, .panel-teal .text-muted,
.panel-orange .text-muted, .panel-red .text-muted { color: var(--ypw-muted); }
.panel-widget { border: 1px solid var(--ypw-line); }
.panel-widget .widget-left,
.panel-blue .widget-left, .panel-teal .widget-left,
.panel-orange .widget-left, .panel-red .widget-left {
	background: var(--ypw-surface-alt);
	color: var(--ypw-ink);
}

/* --------------------------------------------------------------------------
   8. Stat tiles (dashboard)
   -------------------------------------------------------------------------- */
.ypw-stat {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	overflow: hidden;
	padding: 18px 20px 20px;
	background: var(--ypw-surface);
	border: 1px solid var(--ypw-line);
	border-radius: var(--ypw-r-lg);
	box-shadow: var(--ypw-shadow-sm);
	margin-bottom: 24px;
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ypw-stat:hover { border-color: #D9DDE4; transform: translateY(-1px); box-shadow: var(--ypw-shadow); }

.ypw-stat__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ypw-stat__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--ypw-muted);
}
.ypw-stat__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	flex: 0 0 34px;
	border-radius: 10px;
	background: var(--ypw-surface-alt);
	border: 1px solid var(--ypw-line-soft);
	color: var(--ypw-ink-2);
	font-size: 16px;
}
.ypw-stat__icon--brand   { background: var(--ypw-brand-soft);   border-color: transparent; color: var(--ypw-brand); }
.ypw-stat__icon--success { background: var(--ypw-success-soft); border-color: transparent; color: var(--ypw-success); }
.ypw-stat__icon--warn    { background: var(--ypw-warn-soft);    border-color: transparent; color: var(--ypw-warn); }
.ypw-stat__icon--info    { background: var(--ypw-info-soft);    border-color: transparent; color: var(--ypw-info); }
.ypw-stat__icon--danger  { background: var(--ypw-danger-soft);  border-color: transparent; color: var(--ypw-danger); }

.ypw-stat__value {
	font-size: 30px;
	font-weight: 650;
	line-height: 1.1;
	letter-spacing: -0.035em;
	color: var(--ypw-ink);
	/* Never let an unexpectedly long figure push the tile open sideways. */
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.ypw-stat__value small { font-size: 16px; font-weight: 550; color: var(--ypw-faint); letter-spacing: -0.02em; white-space: nowrap; }

.ypw-stat__foot {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	font-size: 12.5px;
	color: var(--ypw-muted);
	flex-wrap: wrap;
}

.ypw-trend {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: var(--ypw-r-pill);
	font-size: 11.5px;
	font-weight: 600;
	background: var(--ypw-surface-alt);
	color: var(--ypw-muted);
}
.ypw-trend--up   { background: var(--ypw-success-soft); color: var(--ypw-success); }
.ypw-trend--down { background: var(--ypw-danger-soft);  color: var(--ypw-danger); }
.ypw-trend--flat { background: var(--ypw-surface-alt);  color: var(--ypw-muted); }

/* Compact metric rows inside a card */
.ypw-metric-list { list-style: none; margin: 0; padding: 0; }
.ypw-metric-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 20px;
	border-bottom: 1px solid var(--ypw-line-soft);
	font-size: 13.5px;
	line-height: 1.45;
}
.ypw-metric-list li:last-child { border-bottom: 0; }
.ypw-metric-list__key {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	color: var(--ypw-ink-2);
	font-weight: 500;
}
.ypw-metric-list__key i { color: var(--ypw-faint); font-size: 15px; width: 16px; flex: 0 0 16px; text-align: center; }
.ypw-metric-list__val {
	flex: 0 0 auto;
	max-width: 55%;
	text-align: right;
	font-weight: 600;
	color: var(--ypw-ink);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

/* Quick-action grid */
.ypw-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ypw-action {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
	padding: 13px 14px;
	border: 1px solid var(--ypw-line);
	border-radius: var(--ypw-r);
	background: var(--ypw-surface);
	color: var(--ypw-ink-2);
	font-size: 13px;
	font-weight: 550;
	transition: border-color .15s ease, background .15s ease, transform .15s ease, color .15s ease;
}
.ypw-action:hover {
	border-color: var(--ypw-brand);
	background: var(--ypw-brand-soft);
	color: var(--ypw-brand-700);
	transform: translateY(-1px);
}
.ypw-action i { font-size: 17px; color: var(--ypw-muted); }
.ypw-action:hover i { color: var(--ypw-brand); }
.ypw-action .ypw-action__count {
	margin-left: auto;
	font-size: 11px;
	font-weight: 650;
	color: var(--ypw-muted);
	background: var(--ypw-surface-alt);
	border-radius: var(--ypw-r-pill);
	padding: 1px 8px;
}
.ypw-action .ypw-action__count--alert { background: var(--ypw-warn-soft); color: var(--ypw-warn); }

/* Empty state */
.ypw-empty { padding: 34px 20px; text-align: center; color: var(--ypw-muted); }
.ypw-empty i { font-size: 26px; color: #C9CDD5; display: block; margin-bottom: 10px; }
.ypw-empty p { margin: 0; font-size: 13px; color: var(--ypw-muted); }

/*
 * Bar sparkline used on the dashboard trend card.
 *
 * The bars are sized in pixels against a fixed-height track rather than as a
 * percentage of the column: a percentage height inside an auto-height flex
 * column has nothing to resolve against and collapses to the min-height.
 */
.ypw-spark { display: flex; align-items: flex-end; gap: 6px; padding: 4px 0 0; }
.ypw-spark__col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.ypw-spark__track { width: 100%; height: 108px; display: flex; align-items: flex-end; justify-content: center; }
.ypw-spark__bar {
	width: 100%;
	max-width: 34px;
	background: var(--ypw-brand-soft);
	border-radius: 6px 6px 3px 3px;
	min-height: 3px;
	transition: background .15s ease;
}
.ypw-spark__col:hover .ypw-spark__bar { background: var(--ypw-brand); }
.ypw-spark__col:last-child .ypw-spark__bar { background: var(--ypw-brand); }
.ypw-spark__key { font-size: 10.5px; font-weight: 600; color: var(--ypw-faint); white-space: nowrap; }

/*
 * Money-flow chart: two bars per day, in and out, on a shared scale.
 *
 * Sized in pixels against a fixed-height track for the same reason as
 * .ypw-spark above — a percentage height inside an auto-height flex column has
 * nothing to resolve against and collapses. Both series are scaled against the
 * SAME maximum, otherwise a day with 100 in and 10 out draws two equal bars.
 */
.ypw-flow { display: flex; align-items: flex-end; gap: 10px; padding: 4px 0 0; }
.ypw-flow__col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.ypw-flow__track {
	width: 100%; height: 132px;
	display: flex; align-items: flex-end; justify-content: center; gap: 3px;
}
.ypw-flow__bar { width: 100%; max-width: 15px; border-radius: 5px 5px 2px 2px; min-height: 3px; transition: opacity .15s ease; }
.ypw-flow__bar--in  { background: var(--ypw-success); opacity: .78; }
.ypw-flow__bar--out { background: var(--ypw-warn);    opacity: .78; }
.ypw-flow__col:hover .ypw-flow__bar { opacity: 1; }
.ypw-flow__key { font-size: 10.5px; font-weight: 600; color: var(--ypw-faint); white-space: nowrap; }

.ypw-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.ypw-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ypw-muted); }
.ypw-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.ypw-legend .is-in  { background: var(--ypw-success); }
.ypw-legend .is-out { background: var(--ypw-warn); }

/*
 * Split bar for a share-of-total readout (recharge mix, enquiry mix). A zero
 * segment must not render as a hairline, hence the explicit 0 width check in
 * the template rather than a min-width here.
 */
.ypw-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--ypw-line-soft); }
.ypw-bar > span { display: block; height: 100%; }
.ypw-bar__a { background: var(--ypw-success); }
.ypw-bar__b { background: var(--ypw-info); }
.ypw-bar__c { background: var(--ypw-warn); }
.ypw-bar__d { background: var(--ypw-danger); }

/* Status filter tabs above a grid. */
.ypw-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ypw-filters .btn-group { flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   9. Buttons
   -------------------------------------------------------------------------- */
.btn {
	border-radius: var(--ypw-r-sm);
	font-family: var(--ypw-font);
	font-size: 13px;
	font-weight: 550;
	letter-spacing: -0.005em;
	padding: 8px 15px;
	border: 1px solid transparent;
	box-shadow: none;
	text-shadow: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:focus, .btn:active:focus, .btn.active:focus {
	outline: none;
	box-shadow: 0 0 0 3px var(--ypw-brand-ring);
}
a.btn:hover, button:hover { opacity: 1; }
a.btn:active, button:active { box-shadow: none; }
.btn-lg { font-size: 15px; padding: 11px 20px; border-radius: var(--ypw-r); }
.btn-sm { font-size: 12.5px; padding: 6px 12px; }
.btn-xs { font-size: 11.5px; padding: 4px 9px; border-radius: 7px; font-weight: 600; }

.btn-primary,
.btn-primary:focus,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
	background-color: var(--ypw-brand);
	border-color: var(--ypw-brand);
	color: #fff;
}
.btn-primary:hover,
.btn-primary:active { background-color: var(--ypw-brand-600) !important; border-color: var(--ypw-brand-600) !important; color: #fff; }

.btn-default,
.btn-default:focus {
	background-color: var(--ypw-surface);
	border-color: var(--ypw-line);
	color: var(--ypw-ink-2);
}
.btn-default:hover,
.btn-default:active,
.open > .dropdown-toggle.btn-default {
	background-color: var(--ypw-surface-alt) !important;
	border-color: #D9DCE2 !important;
	color: var(--ypw-ink) !important;
}

.btn-success, .btn-success:focus { background-color: var(--ypw-success); border-color: var(--ypw-success); color: #fff; }
.btn-success:hover, .btn-success:active { background-color: #0E8B45 !important; border-color: #0E8B45 !important; color: #fff; }

.btn-danger, .btn-danger:focus { background-color: var(--ypw-danger); border-color: var(--ypw-danger); color: #fff; }
.btn-danger:hover, .btn-danger:active { background-color: #C22323 !important; border-color: #C22323 !important; color: #fff; }

.btn-warning, .btn-warning:focus { background-color: #F0A020; border-color: #F0A020; color: #fff; }
.btn-warning:hover, .btn-warning:active { background-color: #D98C12 !important; border-color: #D98C12 !important; color: #fff; }

.btn-info, .btn-info:focus { background-color: var(--ypw-info); border-color: var(--ypw-info); color: #fff; }
.btn-info:hover, .btn-info:active { background-color: #0A63B4 !important; border-color: #0A63B4 !important; color: #fff; }

.btn.disabled, .btn[disabled], fieldset[disabled] .btn { opacity: .5; box-shadow: none; }

/* Ghost button used in card toolbars */
.ypw-btn-ghost {
	background: transparent;
	border-color: var(--ypw-line);
	color: var(--ypw-ink-2);
}
.ypw-btn-ghost:hover { background: var(--ypw-surface-alt); border-color: #D9DCE2; color: var(--ypw-ink); }

/* --------------------------------------------------------------------------
   10. Forms
   -------------------------------------------------------------------------- */
label { font-size: 13px; font-weight: 550; color: var(--ypw-ink-2); margin-bottom: 6px; }

.form-control {
	height: 40px;
	padding: 8px 13px;
	border: 1px solid var(--ypw-line);
	border-radius: var(--ypw-r-sm);
	background: var(--ypw-surface);
	color: var(--ypw-ink);
	font-family: var(--ypw-font);
	font-size: 13.5px;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-control::-webkit-input-placeholder { color: var(--ypw-faint); }
.form-control::placeholder { color: var(--ypw-faint); }
.form-control:hover { border-color: #D9DCE2; }
.form-control:focus {
	border: 1px solid var(--ypw-brand);
	box-shadow: 0 0 0 3px var(--ypw-brand-ring);
	outline: 0;
	background: var(--ypw-surface);
}
.form-control[disabled], .form-control[readonly] { background: var(--ypw-surface-alt); color: var(--ypw-muted); }
textarea.form-control { height: auto; min-height: 90px; padding: 11px 13px; }
select.form-control { padding-right: 30px; }
.form-group { margin-bottom: 16px; }
.help-block { font-size: 12px; color: var(--ypw-faint); }

.input-group-addon {
	background: var(--ypw-surface-alt);
	border-color: var(--ypw-line);
	border-radius: var(--ypw-r-sm);
	color: var(--ypw-muted);
	font-size: 13px;
}

label.error { color: var(--ypw-danger); font-size: 12px; font-weight: 500; margin-top: 6px; }
.has-error .form-control { border-color: var(--ypw-danger); }
.has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(220, 43, 43, .14); }

/* Select2 */
.select2-container--default .select2-selection--single {
	height: 40px;
	border: 1px solid var(--ypw-line);
	border-radius: var(--ypw-r-sm);
	background: var(--ypw-surface);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; padding-left: 13px; color: var(--ypw-ink); font-size: 13.5px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--ypw-brand);
	box-shadow: 0 0 0 3px var(--ypw-brand-ring);
}
.select2-dropdown { border-color: var(--ypw-line); border-radius: var(--ypw-r); box-shadow: var(--ypw-shadow); overflow: hidden; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--ypw-brand); }
.select2-search--dropdown .select2-search__field { border-radius: var(--ypw-r-sm); border-color: var(--ypw-line); padding: 7px 10px; }

/* Datepicker */
.datepicker { border-radius: var(--ypw-r); border-color: var(--ypw-line); box-shadow: var(--ypw-shadow); padding: 10px; }
.datepicker table tr td, .datepicker table tr th { border-radius: 7px; font-size: 12.5px; }
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active {
	background: var(--ypw-brand) !important;
	background-image: none !important;
	border-color: var(--ypw-brand) !important;
	text-shadow: none;
	color: #fff;
}
.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused,
.datepicker table tr td span:hover { background: var(--ypw-brand-soft); color: var(--ypw-brand-700); }
.datepicker table tr td.today { background: var(--ypw-brand-soft) !important; background-image: none !important; color: var(--ypw-brand-700); }

/* --------------------------------------------------------------------------
   11. Tables & DataTables
   -------------------------------------------------------------------------- */
.table { margin-bottom: 0; color: var(--ypw-ink-2); font-size: 13px; }

.table > thead > tr > th {
	background: var(--ypw-surface-alt);
	border-bottom: 1px solid var(--ypw-line) !important;
	border-top: 0;
	color: var(--ypw-muted);
	font-size: 11px;
	font-weight: 650;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 11px 14px;
	white-space: nowrap;
	vertical-align: middle;
}

.table > tbody > tr > td {
	border-top: 1px solid var(--ypw-line-soft);
	padding: 13px 14px;
	vertical-align: middle;
	color: var(--ypw-ink-2);
}
.table > tbody > tr:first-child > td { border-top: 0; }

.table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }
.table-hover > tbody > tr:hover { background: var(--ypw-surface-alt); }
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border: 0; }
.table-bordered > thead > tr > th { border-bottom: 1px solid var(--ypw-line) !important; }

.table a { font-weight: 500; }
.table .btn-xs + .btn-xs { margin-left: 4px; }
.table img { border-radius: 7px; }

/* Card-hosted tables sit flush with the card edges */
.panel-body > .table,
.panel-body > .dataTables_wrapper { margin: 0; }

/* DataTables chrome */
.dataTables_wrapper { padding: 0; }
.dataTables_wrapper .row { margin-left: 0; margin-right: 0; }
.dataTables_wrapper .row > [class*="col-"] { padding-left: 0; padding-right: 0; }

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
	font-size: 12.5px;
	color: var(--ypw-muted);
	padding: 12px 0;
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
	font-weight: 500;
	color: var(--ypw-muted);
	font-size: 12.5px;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.dataTables_wrapper .dataTables_filter { text-align: right; }
.dataTables_wrapper .dataTables_filter label { justify-content: flex-end; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
	height: 36px;
	margin: 0;
	border: 1px solid var(--ypw-line);
	border-radius: var(--ypw-r-sm);
	padding: 6px 12px;
	font-size: 13px;
	color: var(--ypw-ink);
	background: var(--ypw-surface);
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.dataTables_wrapper .dataTables_filter input { min-width: 220px; }
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
	border-color: var(--ypw-brand);
	box-shadow: 0 0 0 3px var(--ypw-brand-ring);
	outline: none;
}

.dataTables_wrapper .dataTables_paginate .pagination { margin: 0; }
.pagination > li > a,
.pagination > li > span {
	border: 1px solid var(--ypw-line);
	color: var(--ypw-ink-2);
	background: var(--ypw-surface);
	margin-left: 5px;
	border-radius: var(--ypw-r-sm) !important;
	padding: 6px 12px;
	font-size: 12.5px;
	font-weight: 550;
	min-width: 34px;
	text-align: center;
}
.pagination > li > a:hover { background: var(--ypw-surface-alt); border-color: #D9DCE2; color: var(--ypw-ink); }
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > a:focus {
	background: var(--ypw-brand);
	border-color: var(--ypw-brand);
	color: #fff;
}
.pagination > .disabled > a,
.pagination > .disabled > span { color: var(--ypw-faint); background: var(--ypw-surface); border-color: var(--ypw-line-soft); }

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { cursor: pointer; }
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child { padding: 12px 16px; background: var(--ypw-surface-alt); }
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before {
	background: var(--ypw-brand);
	box-shadow: none;
	border: 0;
	line-height: 16px;
	top: 50%;
	margin-top: -8px;
}
table.dataTable > tbody > tr.child ul.dtr-details > li { border-bottom-color: var(--ypw-line-soft); padding: 7px 0; }
table.dataTable > tbody > tr.child span.dtr-title { color: var(--ypw-muted); font-weight: 600; font-size: 12px; }

.dataTables_wrapper .dataTables_processing {
	border: 1px solid var(--ypw-line);
	border-radius: var(--ypw-r);
	box-shadow: var(--ypw-shadow);
	background: var(--ypw-surface);
	color: var(--ypw-ink-2);
	font-size: 13px;
	font-weight: 550;
	padding: 14px 22px;
	height: auto;
}

/* Legacy bootstrap-table container */
.fixed-table-container { border-color: var(--ypw-line); border-radius: var(--ypw-r); }
.fixed-table-container thead th { background: var(--ypw-surface-alt); border-color: var(--ypw-line); }

/* --------------------------------------------------------------------------
   12. Labels, badges, alerts
   -------------------------------------------------------------------------- */
.label, .badge {
	display: inline-block;
	padding: 4px 9px;
	border-radius: var(--ypw-r-pill);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
	text-shadow: none;
	white-space: nowrap;
}
.label-default { background: var(--ypw-surface-alt); color: var(--ypw-ink-2); box-shadow: inset 0 0 0 1px var(--ypw-line); }
.label-primary { background: var(--ypw-brand-soft);   color: var(--ypw-brand-700); }
.label-success { background: var(--ypw-success-soft); color: var(--ypw-success); }
.label-info    { background: var(--ypw-info-soft);    color: var(--ypw-info); }
.label-warning { background: var(--ypw-warn-soft);    color: var(--ypw-warn); }
.label-danger  { background: var(--ypw-danger-soft);  color: var(--ypw-danger); }
.badge { background: var(--ypw-ink); color: #fff; }

/* Status pip variant */
.ypw-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px 3px 8px;
	border-radius: var(--ypw-r-pill);
	font-size: 11.5px;
	font-weight: 600;
	background: var(--ypw-surface-alt);
	color: var(--ypw-ink-2);
}
.ypw-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ypw-pill--success { background: var(--ypw-success-soft); color: var(--ypw-success); }
.ypw-pill--warn    { background: var(--ypw-warn-soft);    color: var(--ypw-warn); }
.ypw-pill--danger  { background: var(--ypw-danger-soft);  color: var(--ypw-danger); }
.ypw-pill--info    { background: var(--ypw-info-soft);    color: var(--ypw-info); }

.alert {
	border: 1px solid var(--ypw-line);
	border-radius: var(--ypw-r);
	padding: 13px 16px;
	font-size: 13.5px;
	box-shadow: none;
}
.alert-success { background: var(--ypw-success-soft); border-color: transparent; color: #0C6E38; }
.alert-info    { background: var(--ypw-info-soft);    border-color: transparent; color: #08548F; }
.alert-warning { background: var(--ypw-warn-soft);    border-color: transparent; color: #8A5000; }
.alert-danger  { background: var(--ypw-danger-soft);  border-color: transparent; color: #A81E1E; }

.bg-primary { background: var(--ypw-brand-soft); color: var(--ypw-brand-700); }
.bg-success { background: var(--ypw-success-soft); color: var(--ypw-success); }
.bg-info    { background: var(--ypw-info-soft);    color: var(--ypw-info); }
.bg-warning { background: var(--ypw-warn-soft);    color: var(--ypw-warn); }
.bg-danger  { background: var(--ypw-danger-soft);  color: var(--ypw-danger); }

.color-blue { color: var(--ypw-brand); }
.color-gray { color: var(--ypw-ink-2); }

/* --------------------------------------------------------------------------
   13. Modals
   -------------------------------------------------------------------------- */
.modal-backdrop.in { opacity: .45; background: #0F1115; }
.modal-content {
	border: 0;
	border-radius: var(--ypw-r-lg);
	box-shadow: var(--ypw-shadow-lg);
	overflow: hidden;
}
.modal-header {
	border-bottom: 1px solid var(--ypw-line-soft);
	padding: 18px 22px;
	background: var(--ypw-surface);
}
.modal-header .modal-title { font-size: 16px; font-weight: 650; color: var(--ypw-ink); letter-spacing: -0.02em; }
.modal-header .close {
	font-size: 22px;
	font-weight: 400;
	color: var(--ypw-faint);
	opacity: 1;
	text-shadow: none;
	margin-top: -2px;
	transition: color .15s ease;
}
.modal-header .close:hover { color: var(--ypw-ink); opacity: 1; }
.modal-body { padding: 22px; }
.modal-footer {
	border-top: 1px solid var(--ypw-line-soft);
	padding: 14px 22px;
	background: var(--ypw-surface-alt);
}
@media (min-width: 768px) { .modal-dialog { margin: 40px auto; } }

/* jQuery-confirm */
.jconfirm .jconfirm-box {
	border-radius: var(--ypw-r-lg) !important;
	box-shadow: var(--ypw-shadow-lg) !important;
	padding: 26px !important;
	font-family: var(--ypw-font);
}
.jconfirm .jconfirm-title { font-size: 17px !important; font-weight: 650 !important; color: var(--ypw-ink) !important; letter-spacing: -0.02em; }
.jconfirm .jconfirm-content { font-size: 13.5px; color: var(--ypw-ink-2); }
.jconfirm .jconfirm-buttons button {
	border-radius: var(--ypw-r-sm) !important;
	font-family: var(--ypw-font);
	font-size: 13px !important;
	font-weight: 550 !important;
	text-transform: none !important;
	padding: 8px 16px !important;
	border: 1px solid transparent !important;
}
.jconfirm .jconfirm-buttons .btn-blue { background: var(--ypw-brand) !important; color: #fff !important; }
.jconfirm .jconfirm-buttons .btn-default { background: var(--ypw-surface) !important; border-color: var(--ypw-line) !important; color: var(--ypw-ink-2) !important; }

/*
 * Toast: left to the plugin's own stylesheet on purpose.
 *
 * jquery.toast.css reserves the icon strip with `.jq-has-icon { padding: 10px
 * 10px 10px 50px }` and paints the tick/cross as a background-image at
 * `background-position: 10px`. An `!important` padding override here collapsed
 * that 50px gutter, so the icon rendered underneath the message text. Restyle
 * the toast only by re-declaring .jq-has-icon's padding alongside, never by
 * overriding .jq-toast-single's padding on its own.
 */

/* --------------------------------------------------------------------------
   14. Tabs, progress, misc plugin surfaces
   -------------------------------------------------------------------------- */
.nav-tabs { border-bottom: 1px solid var(--ypw-line); background: transparent; }
.nav-tabs > li > a {
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	margin-right: 4px;
	padding: 11px 14px;
	color: var(--ypw-muted);
	font-size: 13.5px;
	font-weight: 550;
	background: transparent;
}
.nav-tabs > li > a:hover { background: transparent; color: var(--ypw-ink); border-bottom-color: var(--ypw-line); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	background: transparent;
	border: 0;
	border-bottom: 2px solid var(--ypw-brand);
	color: var(--ypw-brand);
}
.tab-content { background: transparent; padding: 20px 0 0; }

.nav-pills > li > a { border-radius: var(--ypw-r-sm); color: var(--ypw-muted); font-weight: 550; font-size: 13px; }
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover { background: var(--ypw-brand); color: #fff; }

.progress { height: 8px; border-radius: var(--ypw-r-pill); background: var(--ypw-line-soft); box-shadow: none; margin-bottom: 0; }
.progress-bar { background: var(--ypw-brand); box-shadow: none; border-radius: var(--ypw-r-pill); }

.well { background: var(--ypw-surface-alt); border: 1px solid var(--ypw-line); border-radius: var(--ypw-r); box-shadow: none; }
.jumbotron { background: var(--ypw-surface); border: 1px solid var(--ypw-line); border-radius: var(--ypw-r-lg); }

/* Indeterminate loader — retuned to the brand */
.linear-activity {
	height: 2px;
	background: var(--ypw-line-soft);
	margin: 0 0 16px;
	border-radius: var(--ypw-r-pill);
	overflow: hidden;
}
.indeterminate:before { background: var(--ypw-brand); }
.indeterminate:after  { background: var(--ypw-brand-600); }
.determinate { background: var(--ypw-brand); }

/*
 * Icons.
 *
 * styles.css pins EVERY Bootstrap Icon to `width:16px; height:16px;
 * margin:0 10px 0 0`. That squashed the larger icons into a 16px box — the
 * empty-state icon rendered as a left-aligned 16px block instead of centring —
 * and doubled icon-to-label spacing everywhere premium.css already uses flex
 * `gap`. Icons are sized contextually here instead. Safe to reset outright:
 * .bi appears only in nav.php, dashboard.php and index.php.
 */
.bi {
	width: auto;
	height: auto;
	margin: 0;
	line-height: 1;
}

/* Lumino SVG glyphs (still used by the breadcrumbs on legacy pages) */
.sidebar .glyph, .user-menu .glyph, .bi { vertical-align: middle; }
.glyph { width: 18px; height: 18px; }
.glyph.stroked { stroke: currentColor; fill: none; }
.panel-widget .glyph { width: 40px; height: 40px; }

/* --------------------------------------------------------------------------
   15. Login screen
   -------------------------------------------------------------------------- */
body.ypw-auth {
	padding-top: 0;
	min-height: 100vh;
	background: var(--ypw-nav);
	color: var(--ypw-nav-text);
}

.ypw-auth__stage {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 32px 20px;
	overflow: hidden;
}
/* Two soft brand washes — the only non-flat element in the system */
.ypw-auth__stage::before,
.ypw-auth__stage::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	pointer-events: none;
}
.ypw-auth__stage::before {
	width: 520px; height: 520px;
	top: -180px; left: -140px;
	background: rgba(237, 30, 121, .30);
}
.ypw-auth__stage::after {
	width: 460px; height: 460px;
	bottom: -200px; right: -120px;
	background: rgba(120, 60, 220, .22);
}

.ypw-auth__card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 400px;
	background: var(--ypw-surface);
	border-radius: 20px;
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6);
	padding: 34px 32px 30px;
}

.ypw-auth__brand {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-bottom: 26px;
}
.ypw-auth__brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ypw-auth__brand-text strong {
	font-size: 16px;
	font-weight: 650;
	color: var(--ypw-ink);
	letter-spacing: -0.02em;
}
.ypw-auth__brand-text small {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ypw-faint);
}

.ypw-auth__title { font-size: 21px; font-weight: 650; color: var(--ypw-ink); letter-spacing: -0.03em; margin: 0 0 4px; }
.ypw-auth__sub { font-size: 13.5px; color: var(--ypw-muted); margin: 0 0 24px; }

.ypw-auth__card .form-group { margin-bottom: 14px; }
.ypw-auth__card label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--ypw-ink-2);
	margin-bottom: 6px;
}
.ypw-auth__card .form-control { height: 44px; font-size: 14px; }
.ypw-auth__card .btn-primary { width: 100%; height: 44px; font-size: 14px; font-weight: 600; border-radius: var(--ypw-r-sm); margin-top: 8px; }

.ypw-auth__field { position: relative; }
.ypw-auth__field .form-control { padding-left: 40px; }
.ypw-auth__field > i {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 15px;
	color: var(--ypw-faint);
	pointer-events: none;
}
.ypw-auth__field.has-toggle .form-control { padding-right: 42px; }
.ypw-auth__toggle {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px; height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ypw-faint);
	border-radius: 7px;
	cursor: pointer;
	transition: color .15s ease, background .15s ease;
}
.ypw-auth__toggle:hover { color: var(--ypw-ink-2); background: var(--ypw-surface-alt); }

.ypw-auth__note {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--ypw-line-soft);
	font-size: 12px;
	color: var(--ypw-faint);
	line-height: 1.5;
}
.ypw-auth__note i { font-size: 14px; color: var(--ypw-muted); margin-top: 1px; }

.ypw-auth__foot {
	position: relative;
	z-index: 1;
	margin-top: 20px;
	text-align: center;
	font-size: 12px;
	color: rgba(255, 255, 255, .38);
}

/* Neutralise the legacy login styling */
.body-bg { background-image: none; }
.login-panel { height: auto; }

/* --------------------------------------------------------------------------
   16. Layout — desktop
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.navbar-fixed-top { left: var(--ypw-rail); width: auto; right: 0; }
	.navbar-header { padding: 0 28px; }

	.sidebar,
	#sidebar-collapse.sidebar {
		display: flex !important;
		flex-direction: column;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		width: var(--ypw-rail);
		max-width: var(--ypw-rail);
		height: 100%;
		z-index: 1030;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background: var(--ypw-nav);
		box-shadow: none;
	}

	.main {
		width: auto !important;
		float: none !important;
		margin-left: var(--ypw-rail) !important;
		padding: 0 28px 48px;
	}
	.col-sm-offset-3, .col-lg-offset-2 { margin-left: 0; }
}

@media (min-width: 1600px) {
	.main { padding: 0 40px 56px; }
	.navbar-header { padding: 0 40px; }
}

/* --------------------------------------------------------------------------
   17. Layout — mobile / tablet
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.navbar-header { padding: 0 16px; gap: 12px; }
	.navbar-toggle { display: inline-flex; align-items: center; justify-content: center; }
	.navbar-header .navbar-brand { display: inline-flex; align-items: center; margin-right: auto; }
	.ypw-topbar__title { display: none; }
	.ypw-env { display: none; }
	.ypw-user-meta { display: none; }
	.user-menu .dropdown-toggle { padding: 0 4px; }
	.user-menu .dropdown-menu { right: 0; left: auto; }

	.ypw-rail-close { display: inline-flex; }

	/*
	 * Off-canvas drawer.
	 *
	 * Driven by an `is-open` class from nav.php rather than Bootstrap's
	 * collapse plugin: collapse animates HEIGHT and cycles through
	 * `collapsing`/`collapse in` with a 350ms wait on each end, which for a
	 * horizontal drawer meant a dead pause before it moved and a hard cut on
	 * the way out. A single state class transitions cleanly both ways.
	 */
	.sidebar,
	#sidebar-collapse.sidebar {
		display: flex !important;
		flex-direction: column;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		width: 280px;
		height: 100% !important;
		z-index: 1045;
		overflow: hidden;
		background: var(--ypw-nav);
		transform: translateX(-100%);
		transition: transform .26s cubic-bezier(.4, 0, .2, 1), visibility .26s;
		box-shadow: none;
		visibility: hidden;
	}
	#sidebar-collapse.sidebar.is-open {
		transform: translateX(0);
		visibility: visible;
		box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
	}

	.main {
		width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		padding: 0 16px 40px;
	}
	.breadcrumb { padding: 16px 0 0; }
	h1.page-header, .ypw-page-head { margin-bottom: 18px; }
	h1.page-header { font-size: 22px; }

	.panel-body { padding: 16px; }
	.panel-heading { padding: 14px 16px; }
	.ypw-stat { padding: 16px; }
	.ypw-stat__value { font-size: 26px; }

	.dataTables_wrapper .dataTables_filter,
	.dataTables_wrapper .dataTables_filter label { text-align: left; justify-content: flex-start; }
	.dataTables_wrapper .dataTables_filter input { min-width: 0; width: 100%; }
	.dataTables_wrapper .dataTables_paginate { text-align: center; }
	.panel-heading .form-control { width: 100% !important; }

	/* Two action tiles per row leaves no room for a long label plus its count. */
	.ypw-actions { grid-template-columns: 1fr; }
}

/* Mobile backdrop */
.ypw-rail-backdrop {
	display: none;
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	background: rgba(15, 17, 21, .45);
	z-index: 1044;
	opacity: 0;
	transition: opacity .2s ease;
}
.ypw-rail-backdrop.is-open { display: block; opacity: 1; }
@media (min-width: 768px) { .ypw-rail-backdrop { display: none !important; } }

/* Print */
@media print {
	.sidebar, .navbar, .ypw-rail-backdrop, .ypw-card-tools, .breadcrumb { display: none !important; }
	body { padding-top: 0; background: #fff; }
	.main { margin-left: 0 !important; padding: 0 !important; }
	.panel { border-color: #DDD; box-shadow: none; }
}

/* --------------------------------------------------------------------------
   19. Row action menu (three dots)

   Namespaced `ypw-rowmenu`, deliberately NOT `ypw-actions`/`ypw-action` — those
   belong to the dashboard's quick-action tiles (section 8). Sharing them made
   the trigger a full-width grid, so inside a DataTables responsive child row it
   stretched across the table and the menu right-aligned to the table edge
   instead of the button; the items also inherited the tile's box.

   The menu itself carries almost no styling of its own — section 4 already
   dresses .dropdown-menu, and matching it is the point.
   -------------------------------------------------------------------------- */
.ypw-rowmenu { position: relative; display: inline-block; }

/*
 * Borderless by design: a row of bordered kebabs down a table column reads as
 * a column of empty boxes. The affordance is the hover/open tint instead.
 */
.ypw-rowmenu > .dropdown-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--ypw-r-sm);
	background: transparent;
	color: var(--ypw-muted);
	line-height: 1;
	transition: background-color .15s ease, color .15s ease;
}
.ypw-rowmenu > .dropdown-toggle .fa { font-size: 14px; }

/* !important beats `.btn-default:hover` and `.open > .dropdown-toggle`. */
.ypw-rowmenu > .dropdown-toggle:hover,
.ypw-rowmenu > .dropdown-toggle:focus {
	background-color: var(--ypw-surface-alt) !important;
	border-color: transparent !important;
	color: var(--ypw-ink) !important;
}
.ypw-rowmenu.open > .dropdown-toggle {
	background-color: var(--ypw-brand-soft) !important;
	border-color: transparent !important;
	color: var(--ypw-brand) !important;
}
.ypw-rowmenu > .dropdown-toggle:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--ypw-brand-ring);
}

/* Sits flush to the trigger, unlike the roomier nav dropdowns. Its final
   position is set by ypwPlaceActionMenu() in js/ajaxScript.js. */
.ypw-rowmenu .dropdown-menu { margin-top: 4px; }

/* Above the panel it escapes from, and above DataTables' own chrome. */
.ypw-rowmenu .dropdown-menu { z-index: 1060; }

/*
 * Icon colour by action type, applied at rest so the menu is scannable before
 * hovering. dt_actions() derives the tone from the glyph when the call site
 * does not name one. Two classes beat `.dropdown-menu > li > a i`.
 */
.ypw-rowmenu__item .ypw-ico--success { color: var(--ypw-success); }
.ypw-rowmenu__item .ypw-ico--warning { color: var(--ypw-warn); }
.ypw-rowmenu__item .ypw-ico--danger  { color: var(--ypw-danger); }
.ypw-rowmenu__item .ypw-ico--info    { color: var(--ypw-info); }
.ypw-rowmenu__item .ypw-ico--brand   { color: var(--ypw-brand); }

/* Tone variants, following the .ypw-danger-item convention from section 4:
   neutral row at rest, tinted on hover. Only explicitly toned actions get this
   — an informational item keeps the plain hover. */
.dropdown-menu .ypw-success-item:hover,
.dropdown-menu .ypw-success-item:focus { background: var(--ypw-success-soft); color: var(--ypw-success); }
.dropdown-menu .ypw-success-item:hover i,
.dropdown-menu .ypw-success-item:focus i { color: var(--ypw-success); }

.dropdown-menu .ypw-warn-item:hover,
.dropdown-menu .ypw-warn-item:focus { background: var(--ypw-warn-soft); color: var(--ypw-warn); }
.dropdown-menu .ypw-warn-item:hover i,
.dropdown-menu .ypw-warn-item:focus i { color: var(--ypw-warn); }

.dropdown-menu .ypw-danger-item:focus { background: var(--ypw-danger-soft); color: var(--ypw-danger); }
.dropdown-menu .ypw-danger-item:focus i { color: var(--ypw-danger); }

/* --------------------------------------------------------------------------
   20. App settings

   A settings page is a list of switches, not a form of text inputs, and the
   Bootstrap 3 checkbox reads as neither. The switch below is the only new
   control in this sheet; everything else here is layout.

   The state card renders ALL of its messages and reveals one by
   [data-state], so the copy lives in the markup once instead of being
   duplicated into app-settings.js and re-injected on save. The page is also
   correct before any script runs.
   -------------------------------------------------------------------------- */

/* Settings read badly at 1400px wide — cap the column rather than filling it. */
.ypw-settings { max-width: 860px; }

/* ---- State card ---- */
.ypw-state {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 18px;
	margin-bottom: 24px;
	border: 1px solid var(--ypw-line);
	border-radius: var(--ypw-r-lg);
	background: var(--ypw-surface);
	box-shadow: var(--ypw-shadow-sm);
}
.ypw-state__icon {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	background: var(--ypw-surface-alt);
	color: var(--ypw-muted);
}
.ypw-state__body { min-width: 0; }
.ypw-state__title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ypw-ink);
	letter-spacing: -0.015em;
	margin-bottom: 2px;
}
.ypw-state__msg { display: none; font-size: 13px; color: var(--ypw-muted); margin: 0; }
.ypw-state__msg code { font-size: 12px; }

/* One message, one icon, one pill per state. */
.ypw-state [data-for]           { display: none; }
.ypw-state[data-state="live"] [data-for="live"],
.ypw-state[data-state="soft"] [data-for="soft"],
.ypw-state[data-state="hard"] [data-for="hard"] { display: inline-flex; }
.ypw-state[data-state="live"] p[data-for="live"],
.ypw-state[data-state="soft"] p[data-for="soft"],
.ypw-state[data-state="hard"] p[data-for="hard"] { display: block; }

.ypw-state[data-state="live"] .ypw-state__icon { background: var(--ypw-success-soft); color: var(--ypw-success); }
.ypw-state[data-state="soft"] .ypw-state__icon { background: var(--ypw-warn-soft);    color: var(--ypw-warn); }
.ypw-state[data-state="hard"] .ypw-state__icon { background: var(--ypw-danger-soft);  color: var(--ypw-danger); }
.ypw-state[data-state="hard"] { border-color: rgba(220, 43, 43, .28); }

/* ---- Setting rows ---- */
.ypw-setting-list { margin: 0; }
.ypw-setting {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 17px 0;
	border-top: 1px solid var(--ypw-line-soft);
}
.ypw-setting:first-child { border-top: 0; padding-top: 2px; }
.ypw-setting__text { min-width: 0; }
.ypw-setting__label {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ypw-ink);
	margin: 0 0 3px;
	letter-spacing: -0.01em;
	cursor: pointer;
}
.ypw-setting__help { font-size: 12.5px; color: var(--ypw-muted); margin: 0; }
.ypw-setting__help code { font-size: 11.5px; }
.ypw-setting--danger .ypw-setting__label { color: var(--ypw-danger); }

/* Fields belonging to the switch above them: no hairline, or they would read
   as a setting of their own rather than as that switch's detail. */
.ypw-setting-sub { padding: 2px 0 18px; max-width: 560px; }
.ypw-setting-sub .form-group:last-child { margin-bottom: 0; }
.ypw-setting-sub .help-block { margin: 6px 0 0; }

/* ---- Switch ----
   The input is the hit target: it is stretched transparently over the track,
   so there is exactly one <label for> per control and the row keeps a single
   accessible name. A second wrapping <label> would announce the name twice. */
.ypw-switch {
	position: relative;
	flex: 0 0 auto;
	display: inline-block;
	width: 44px;
	height: 26px;
	margin-top: 1px;
}
.ypw-switch input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}
.ypw-switch__track {
	position: absolute;
	inset: 0;
	border-radius: var(--ypw-r-pill);
	background: #D7DAE1;
	transition: background .18s ease, box-shadow .15s ease;
}
.ypw-switch__track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 17, 21, .25);
	transition: transform .18s ease;
}
.ypw-switch input:hover + .ypw-switch__track { background: #C8CCD5; }
.ypw-switch input:checked + .ypw-switch__track { background: var(--ypw-brand); }
.ypw-switch input:checked:hover + .ypw-switch__track { background: var(--ypw-brand-600); }
.ypw-switch input:checked + .ypw-switch__track::after { transform: translateX(18px); }
.ypw-switch input:focus-visible + .ypw-switch__track { box-shadow: 0 0 0 3px var(--ypw-brand-ring); }
.ypw-switch input[disabled] { cursor: not-allowed; }
.ypw-switch input[disabled] + .ypw-switch__track { opacity: .5; }

/* The hard-maintenance switch is the one control that can take the app down. */
.ypw-switch--danger input:checked + .ypw-switch__track { background: var(--ypw-danger); }
.ypw-switch--danger input:checked:hover + .ypw-switch__track { background: #C42424; }
.ypw-switch--danger input:focus-visible + .ypw-switch__track { box-shadow: 0 0 0 3px rgba(220, 43, 43, .16); }

/* ---- Save bar ---- */
.ypw-form-foot {
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0 20px;
	background: linear-gradient(to bottom, rgba(245, 246, 248, 0), var(--ypw-canvas) 45%);
}
.ypw-form-foot__hint { font-size: 12.5px; color: var(--ypw-muted); }
.ypw-form-foot__hint[hidden] { display: none; }

/* ---- Inline on/off readout ----
   Both readings are in the markup; only the one matching [data-on] shows, so a
   save flips one attribute instead of rewriting a sentence in JavaScript. */
.ypw-readout { font-size: 12.5px; color: var(--ypw-muted); margin: 16px 0 0; }
.ypw-readout [data-on] { display: none; }
.ypw-readout[data-on="1"] [data-on="1"],
.ypw-readout[data-on="0"] [data-on="0"] { display: inline; }
.ypw-readout i { margin-right: 4px; }
.ypw-readout[data-on="1"] i { color: var(--ypw-success); }
.ypw-readout[data-on="0"] i { color: var(--ypw-faint); }

/* A footnote under a card's settings, separated by the same hairline. */
.ypw-note {
	margin: 18px 0 0;
	padding-top: 15px;
	border-top: 1px solid var(--ypw-line-soft);
	font-size: 12.5px;
	color: var(--ypw-muted);
}
.ypw-note code { font-size: 11.5px; }

@media (max-width: 767px) {
	.ypw-setting { gap: 14px; }
	.ypw-form-foot { flex-wrap: wrap; }
}