/* ==========================================================================
   TechPigeon Device Inventory — Portal Stylesheet
   Visual language matched to Makks Enterprise's brand: deep green sidebar
   (sampled from the client logo, #0a6603) and a brighter green accent,
   ElaAdmin-style gradient KPI cards, rounded panels.
   ========================================================================== */

:root {
	--tpdi-page:        #ffffff;
	--tpdi-sidebar:      #0a6603;
	--tpdi-sidebar-rgb:  10,102,3;
	--tpdi-sidebar-dark: #073f02;
	--tpdi-card:         #ffffff;
	--tpdi-card2:        #f5f7fa;
	--tpdi-topbar:       #ffffff;

	--tpdi-bd:  #e3e8ef;
	--tpdi-bd2: #c9d3df;
	--tpdi-bd3: #9ca3af;

	--tpdi-t1: #1a2332;
	--tpdi-t2: #5a6a7e;
	--tpdi-t3: #8fa0b3;
	--tpdi-t4: #c9d3df;

	--tpdi-input: #f9fafb;

	/* These five (plus --tpdi-sidebar/-dark and --tpdi-*-rgb above) are the
	   full set a custom brand color regenerates — see TPDI_Branding::css_overrides().
	   Everything else in this file should reference these variables (or the
	   *-rgb ones inside an rgba()) rather than hardcoding a green, so Settings
	   → Brand Color actually reaches every part of the UI, including the
	   login page and printed receipt. */
	--tpdi-accent:       #2e8b3d;
	--tpdi-accent-rgb:   46,139,61;
	--tpdi-accent-dark:  #1f6b2c;
	--tpdi-accent-light: #6fbf6b;
	--tpdi-accent-glow:  rgba(var(--tpdi-accent-rgb),.20);
	--tpdi-accent-bg:    #eaf6e9;

	--tpdi-kpi-green:  #4cae8a;
	--tpdi-kpi-purple: #9b6dcc;
	--tpdi-kpi-blue:   #5ba4d4;
	--tpdi-kpi-orange: #e8835c;
	--tpdi-kpi-teal:   #3ab0a8;
	--tpdi-kpi-slate:  #64748b;
	--tpdi-kpi-red:    #dc2626;
	--tpdi-kpi-indigo: #4f46e5;

	--tpdi-green:  #16a34a; --tpdi-green-bg: #f0fdf4; --tpdi-green-bd: #bbf7d0; --tpdi-green-t: #15803d;
	--tpdi-red:    #dc2626; --tpdi-red-bg:   #fef2f2; --tpdi-red-bd:   #fecaca; --tpdi-red-t:   #b91c1c;
	--tpdi-amber:  #d97706; --tpdi-amber-bg: #fffbeb; --tpdi-amber-bd: #fde68a; --tpdi-amber-t: #b45309;
	--tpdi-blue:   #2563eb; --tpdi-blue-bg:  #eff6ff; --tpdi-blue-bd:  #bfdbfe; --tpdi-blue-t:  #1d4ed8;
	--tpdi-purple: #7c3aed; --tpdi-purple-bg:#f5f3ff; --tpdi-purple-bd:#ddd6fe; --tpdi-purple-t:#6d28d9;
	--tpdi-teal:   #0d9488; --tpdi-teal-bg:  #f0fdfa; --tpdi-teal-bd:  #99f6e4; --tpdi-teal-t:  #0f766e;
	--tpdi-indigo: #4f46e5; --tpdi-indigo-bg:#eef2ff; --tpdi-indigo-bd:#c7d2fe; --tpdi-indigo-t:#4338ca;

	--tpdi-shadow-xs: 0 1px 4px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
	--tpdi-shadow:    0 2px 10px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.05);
	--tpdi-shadow-md: 0 4px 20px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
	--tpdi-shadow-lg: 0 8px 36px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.07);

	--tpdi-r:    10px;
	--tpdi-r-lg: 14px;
	--tpdi-r-xl: 18px;

	--tpdi-sidebar-w: 270px;
	--tpdi-sidebar-collapsed-w: 76px;
	--tpdi-font: 'Times New Roman', Times, Georgia, serif;
	--tpdi-mono: 'JetBrains Mono', 'Courier New', monospace;
}

/* ─── RESET & BASE ────────────────────────────────────────────── */
.tpdi-portal *, .tpdi-login-page * { box-sizing: border-box; margin: 0; padding: 0; text-decoration: none !important; }
.tpdi-portal a, .tpdi-portal a:hover, .tpdi-portal a:visited,
.tpdi-login-page a, .tpdi-login-page a:hover { text-decoration: none !important; }
.tpdi-portal, .tpdi-login-page { font-family: var(--tpdi-font); color: var(--tpdi-t1); -webkit-font-smoothing: antialiased; }
.tpdi-portal-body { margin: 0; padding: 0; }
.tpdi-portal { min-height: 100vh; background: var(--tpdi-page); display: flex; }
.tpdi-portal button { font-family: var(--tpdi-font); cursor: pointer; }

/* ─── LOGIN PAGE ──────────────────────────────────────────────── */
.tpdi-login-page {
	min-height: 100vh;
	background: linear-gradient(145deg, #e8edf4 0%, #dde4ed 100%);
	display: flex; align-items: center; justify-content: center;
	padding: 40px 20px;
}
.tpdi-login-card {
	background: #fff; border-radius: 24px;
	box-shadow: 0 20px 60px rgba(var(--tpdi-sidebar-rgb),.14), 0 6px 20px rgba(var(--tpdi-sidebar-rgb),.08);
	padding: 48px 44px 32px; width: 100%; max-width: 440px;
	text-align: center; position: relative;
}
.tpdi-login-brand { margin-bottom: 28px; }
.tpdi-login-logo { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin: 0 auto 20px; display: block; box-shadow: 0 8px 28px rgba(var(--tpdi-sidebar-rgb),.3); }
.tpdi-login-logo-fallback {
	width: 90px; height: 90px; border-radius: 50%;
	background: linear-gradient(135deg, var(--tpdi-accent) 0%, var(--tpdi-sidebar) 100%);
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 24px; box-shadow: 0 8px 28px rgba(var(--tpdi-sidebar-rgb),.3);
}
.tpdi-login-logo-fallback .dashicons { font-size: 2.4rem; width: 2.4rem; height: 2.4rem; color: #fff; }
.tpdi-login-brand h1 { font-size: 1.25rem; font-weight: 800; color: var(--tpdi-t1); letter-spacing: -.01em; margin-bottom: 6px; line-height: 1.3; }
.tpdi-login-brand p { font-size: .84rem; color: #8fa0b3; font-weight: 600; line-height: 1.5; }

.tpdi-login-error {
	display: flex; align-items: center; gap: 9px;
	background: #fef2f2; border: 1.5px solid #fecaca; color: #c0392b;
	padding: 12px 16px; border-radius: 12px; font-size: .83rem; font-weight: 600;
	margin-bottom: 22px; text-align: left;
}
.tpdi-login-notice {
	display: flex; align-items: center; gap: 9px;
	background: var(--tpdi-green-bg); border: 1.5px solid var(--tpdi-green-bd); color: var(--tpdi-green-t);
	padding: 12px 16px; border-radius: 12px; font-size: .83rem; font-weight: 600;
	margin-bottom: 22px; text-align: left;
}

.tpdi-login-form { text-align: left; }
.tpdi-hp-wrap { position: absolute; left: -9999px; top: -9999px; }
.tpdi-field { margin-bottom: 18px; }
.tpdi-field label { display: block; font-size: .78rem; font-weight: 700; color: var(--tpdi-t2); margin-bottom: 8px; }
.tpdi-login-form input[type="text"],
.tpdi-login-form input[type="password"] {
	width: 100%; padding: 14px 16px;
	background: #f4f7fb; border: 1.5px solid #e3e8ef; border-radius: 12px;
	font-family: var(--tpdi-font); font-size: .95rem; color: var(--tpdi-t1);
	outline: none; transition: border-color .15s, box-shadow .15s;
}
.tpdi-login-form input:focus { border-color: var(--tpdi-accent); box-shadow: 0 0 0 3px rgba(var(--tpdi-accent-rgb),.18); }

.tpdi-field-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.tpdi-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: .83rem; color: #5a6a7e; font-weight: 600; cursor: pointer; }
.tpdi-forgot-link { font-size: .82rem; color: var(--tpdi-accent); font-weight: 700; }

.tpdi-login-btn {
	width: 100%; padding: 16px;
	background: linear-gradient(135deg, var(--tpdi-accent) 0%, var(--tpdi-sidebar) 100%);
	border: none; border-radius: 14px;
	font-size: 1.02rem; font-weight: 800; color: #fff; letter-spacing: .14em;
	box-shadow: 0 8px 24px rgba(var(--tpdi-sidebar-rgb),.3);
	transition: transform .15s, box-shadow .15s;
}
.tpdi-login-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(var(--tpdi-sidebar-rgb),.4); }

.tpdi-login-footer {
	font-size: .72rem; color: #8fa0b3; margin-top: 26px;
	padding-top: 18px; border-top: 1px solid #e8edf4;
}
.tpdi-login-credit a { color: var(--tpdi-accent); font-weight: 700; text-decoration: none; }
.tpdi-login-credit a:hover { text-decoration: underline; }

/* ─── SIDEBAR ─────────────────────────────────────────────────── */
.tpdi-sidebar {
	width: var(--tpdi-sidebar-w); min-height: 100vh; height: 100%;
	background: var(--tpdi-sidebar);
	display: flex; flex-direction: column;
	position: fixed; top: 0; left: 0; bottom: 0; z-index: 200;
	overflow-y: auto; scrollbar-width: none;
	transition: transform .22s cubic-bezier(.4,0,.2,1);
	box-shadow: 4px 0 20px rgba(0,0,0,.22);
}
.tpdi-sidebar::-webkit-scrollbar { display: none; }

.tpdi-sb-brand {
	display: flex; align-items: center; gap: 12px;
	padding: 22px 18px 18px; border-bottom: 1px solid rgba(255,255,255,.08);
	flex-shrink: 0; overflow: hidden;
}
.tpdi-sb-logo { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
.tpdi-sb-logo-icon { font-size: 1.5rem; width: 1.5rem; height: 1.5rem; color: #fff; flex-shrink: 0; }
.tpdi-sb-brand-text { font-size: 1rem; font-weight: 800; color: #fff; line-height: 1.25; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tpdi-sb-nav { flex: 1; padding: 18px 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.tpdi-sb-link {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 14px; border-radius: var(--tpdi-r);
	color: rgba(255,255,255,.78); font-size: .95rem; font-weight: 700;
	transition: background .14s, color .12s; position: relative;
}
.tpdi-sb-link .dashicons { font-size: 1.1rem; width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.tpdi-sb-link:hover { color: #fff; background: rgba(255,255,255,.1); }
.tpdi-sb-link.is-active { background: var(--tpdi-accent); color: #fff; font-weight: 800; }
.tpdi-sb-link.is-active::before {
	content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
	width: 4px; background: #fff; border-radius: 0 4px 4px 0;
}

.tpdi-sb-footer { padding: 16px 18px 20px; border-top: 1px solid rgba(255,255,255,.08); }
.tpdi-sb-tagline { font-size: .68rem; color: rgba(255,255,255,.4); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tpdi-sb-credit { display: inline-block; text-decoration: none; transition: color .12s; }
.tpdi-sb-credit:hover { color: rgba(255,255,255,.75); }

/* ─── SIDEBAR COLLAPSED (desktop icon-only mode) ──────────────── */
.tpdi-portal.tpdi-sb-collapsed .tpdi-sidebar { width: var(--tpdi-sidebar-collapsed-w); }
.tpdi-portal.tpdi-sb-collapsed .tpdi-main { margin-left: var(--tpdi-sidebar-collapsed-w); }
.tpdi-portal.tpdi-sb-collapsed .tpdi-sb-brand-text,
.tpdi-portal.tpdi-sb-collapsed .tpdi-sb-link span:not(.dashicons),
.tpdi-portal.tpdi-sb-collapsed .tpdi-sb-tagline {
	opacity: 0; width: 0; overflow: hidden; white-space: nowrap;
}
.tpdi-portal.tpdi-sb-collapsed .tpdi-sb-brand { justify-content: center; padding-left: 0; padding-right: 0; }
.tpdi-portal.tpdi-sb-collapsed .tpdi-sb-link { justify-content: center; padding-left: 0; padding-right: 0; }
.tpdi-portal.tpdi-sb-collapsed .tpdi-sb-footer { padding-left: 0; padding-right: 0; text-align: center; }
.tpdi-sidebar, .tpdi-main, .tpdi-sb-brand-text, .tpdi-sb-link span, .tpdi-sb-tagline {
	transition: width .2s ease, margin-left .2s ease, opacity .15s ease;
}

/* Hover-to-peek: while collapsed, hovering the sidebar temporarily expands
   it back to full width as an overlay (does NOT shift .tpdi-main, so the
   page underneath doesn't reflow every time the mouse passes near the
   edge) — snaps back the instant the mouse leaves. Mirrors the standard
   "peek" pattern used by VS Code / Slack style collapsed sidebars. */
.tpdi-portal.tpdi-sb-collapsed .tpdi-sidebar:hover {
	width: var(--tpdi-sidebar-w);
	box-shadow: 6px 0 28px rgba(0,0,0,.32);
}
.tpdi-portal.tpdi-sb-collapsed .tpdi-sidebar:hover .tpdi-sb-brand-text,
.tpdi-portal.tpdi-sb-collapsed .tpdi-sidebar:hover .tpdi-sb-link span:not(.dashicons),
.tpdi-portal.tpdi-sb-collapsed .tpdi-sidebar:hover .tpdi-sb-tagline {
	opacity: 1; width: auto; overflow: visible;
}
.tpdi-portal.tpdi-sb-collapsed .tpdi-sidebar:hover .tpdi-sb-brand,
.tpdi-portal.tpdi-sb-collapsed .tpdi-sidebar:hover .tpdi-sb-link {
	justify-content: flex-start; padding-left: 18px; padding-right: 18px;
}
.tpdi-portal.tpdi-sb-collapsed .tpdi-sidebar:hover .tpdi-sb-link { padding-left: 14px; }
.tpdi-portal.tpdi-sb-collapsed .tpdi-sidebar:hover .tpdi-sb-footer { padding-left: 18px; padding-right: 18px; text-align: left; }

/* Click flourish: a brief "close then open" pulse layered on top of the
   normal width transition above, purely for tactile feedback when the
   toggle is clicked. Doesn't change the actual collapsed/expanded state —
   the class is added and removed by JS around the real toggle. */
@keyframes tpdi-sb-pulse {
	0%   { transform: scaleX(1); }
	35%  { transform: scaleX(.94); }
	100% { transform: scaleX(1); }
}
.tpdi-sb-flourish { animation: tpdi-sb-pulse .32s cubic-bezier(.4,0,.2,1); transform-origin: left center; }

/* ─── MAIN AREA ───────────────────────────────────────────────── */
.tpdi-main { flex: 1; margin-left: var(--tpdi-sidebar-w); display: flex; flex-direction: column; min-height: 100vh; background: #fff; }

.tpdi-topbar {
	height: 62px; background: var(--tpdi-topbar); border-bottom: 1px solid var(--tpdi-bd);
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 28px; flex-shrink: 0; position: sticky; top: 0; z-index: 100; gap: 16px;
}
.tpdi-sb-toggle {
	display: flex; align-items: center; justify-content: center;
	background: none; border: none; padding: 6px;
	border-radius: 8px; color: var(--tpdi-t2); cursor: pointer;
	transition: background .12s;
}
.tpdi-sb-toggle:hover { background: var(--tpdi-card2); }
.tpdi-sb-toggle .dashicons { font-size: 1.3rem; width: 1.3rem; height: 1.3rem; }
.tpdi-topbar-title { font-size: 1.05rem; font-weight: 800; color: var(--tpdi-t1); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpdi-topbar-right { display: flex; align-items: center; gap: 14px; }

.tpdi-topbar-search { position: relative; width: 300px; flex-shrink: 0; }
.tpdi-topbar-search-icon {
	position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
	color: var(--tpdi-t3); font-size: 1rem; width: 1rem; height: 1rem; pointer-events: none;
}
.tpdi-topbar-search-input {
	width: 100%; padding: 9px 14px 9px 34px; border-radius: 50px; box-sizing: border-box;
	border: 1.5px solid var(--tpdi-bd2); background: var(--tpdi-card2);
	font-family: var(--tpdi-font); font-size: .82rem; color: var(--tpdi-t1);
	transition: border-color .14s, background .14s, box-shadow .14s;
}
.tpdi-topbar-search-input::placeholder { color: var(--tpdi-t3); }
.tpdi-topbar-search-input:focus {
	outline: none; border-color: var(--tpdi-accent); background: #fff;
	box-shadow: 0 0 0 3px var(--tpdi-accent-glow);
}
.tpdi-topbar-search-results {
	position: absolute; top: calc(100% + 8px); left: 0; width: 380px; max-height: 400px; overflow-y: auto;
	background: #fff; border: 1px solid var(--tpdi-bd2); border-radius: 14px;
	box-shadow: 0 12px 40px rgba(0,0,0,.14); display: none; z-index: 400;
}
.tpdi-topbar-search-results.is-open { display: block; }
.tpdi-search-result-row {
	display: flex; align-items: center; gap: 12px; padding: 10px 14px;
	border-bottom: 1px solid var(--tpdi-bd); cursor: pointer; transition: background .1s;
}
.tpdi-search-result-row:last-child { border-bottom: none; }
.tpdi-search-result-row:hover, .tpdi-search-result-row.is-active { background: var(--tpdi-accent-bg); }
.tpdi-search-result-info { flex: 1; min-width: 0; }
.tpdi-search-result-title { font-size: .84rem; font-weight: 700; color: var(--tpdi-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpdi-search-result-imei { font-family: var(--tpdi-mono); font-size: .72rem; color: var(--tpdi-t2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpdi-search-result-empty, .tpdi-search-result-loading { padding: 18px 14px; text-align: center; color: var(--tpdi-t3); font-size: .82rem; }

.tpdi-notif-bell { position: relative; width: 38px; height: 38px; border-radius: 50%; background: var(--tpdi-card2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s; }
.tpdi-notif-bell:hover { background: var(--tpdi-accent-bg); }
.tpdi-notif-bell .dashicons { color: var(--tpdi-t2); }
.tpdi-notif-count {
	position: absolute; top: -4px; right: -4px;
	background: var(--tpdi-red); color: #fff; font-size: .62rem; font-weight: 800;
	border-radius: 50px; min-width: 18px; height: 18px; line-height: 18px; text-align: center; padding: 0 4px;
}

.tpdi-user-menu { position: relative; }
.tpdi-user-btn {
	display: flex; align-items: center; gap: 9px; padding: 6px 10px 6px 6px;
	border-radius: 50px; border: 1.5px solid var(--tpdi-bd2); background: var(--tpdi-card);
	transition: border-color .14s, box-shadow .14s;
}
.tpdi-user-btn:hover { border-color: var(--tpdi-accent); box-shadow: 0 0 0 3px var(--tpdi-accent-glow); }
.tpdi-user-avatar {
	width: 32px; height: 32px; border-radius: 50%;
	background: linear-gradient(135deg, var(--tpdi-sidebar) 0%, var(--tpdi-accent-dark) 100%);
	display: flex; align-items: center; justify-content: center;
	font-size: .75rem; font-weight: 800; color: #fff; flex-shrink: 0;
	border: 2px solid rgba(var(--tpdi-accent-rgb),.4);
}
.tpdi-user-info { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.tpdi-user-name { font-size: .8rem; font-weight: 700; color: var(--tpdi-t1); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpdi-user-role { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.tpdi-role-admin { color: var(--tpdi-purple-t); }
.tpdi-role-supervisor { color: var(--tpdi-blue-t); }
.tpdi-role-staff { color: var(--tpdi-t3); }
.tpdi-user-btn .dashicons { color: var(--tpdi-t3); font-size: 1rem; width: 1rem; height: 1rem; }

.tpdi-user-dropdown {
	position: absolute; top: calc(100% + 8px); right: 0; min-width: 180px;
	background: #fff; border: 1px solid var(--tpdi-bd2); border-radius: 14px;
	box-shadow: 0 12px 40px rgba(0,0,0,.14); overflow: hidden; display: none; z-index: 400;
}
.tpdi-user-dropdown.is-open { display: block; }
.tpdi-dropdown-logout {
	display: flex; align-items: center; gap: 10px; width: 100%;
	padding: 12px 16px; font-size: .84rem; font-weight: 600;
	color: var(--tpdi-red); background: none; border: none;
}
.tpdi-dropdown-logout:hover { background: var(--tpdi-red-bg); }

.tpdi-content { padding: 28px 28px 50px; flex: 1; }

/* ─── BANNER ──────────────────────────────────────────────────── */
.tpdi-banner {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 18px; border-radius: var(--tpdi-r); margin-bottom: 22px;
	font-size: .88rem; font-weight: 600;
}
.tpdi-banner-warning { background: var(--tpdi-amber-bg); border: 1px solid var(--tpdi-amber-bd); color: var(--tpdi-amber-t); }
.tpdi-banner .dashicons { flex-shrink: 0; }

/* ─── LOW STOCK PANEL ─────────────────────────────────────────── */
.tpdi-low-stock-panel { border: 1px solid var(--tpdi-amber-bd); border-left: 4px solid var(--tpdi-amber); }
.tpdi-low-stock-panel .tpdi-panel-header { background: var(--tpdi-amber-bg); }
.tpdi-low-stock-panel .tpdi-panel-header h2 { display: flex; align-items: center; gap: 8px; color: var(--tpdi-amber-t); }
.tpdi-low-stock-panel .tpdi-panel-header h2 .dashicons { color: var(--tpdi-amber); }
.tpdi-badge-out { background: var(--tpdi-red-bg); color: var(--tpdi-red-t); }
.tpdi-badge-low { background: var(--tpdi-amber-bg); color: var(--tpdi-amber-t); }

/* ─── KPI CARDS (ElaAdmin-style gradient) ────────────────────── */
.tpdi-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 18px; margin-bottom: 26px; }
.tpdi-kpi-card {
	position: relative; display: flex; align-items: center; gap: 14px;
	padding: 20px; border-radius: var(--tpdi-r-lg); overflow: hidden;
	box-shadow: 0 6px 20px rgba(0,0,0,.13);
	transition: transform .18s, box-shadow .18s;
}
.tpdi-kpi-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.tpdi-kpi-card-wide { grid-column: span 2; align-items: flex-start; }
.tpdi-kpi-green  { background: linear-gradient(135deg, var(--tpdi-kpi-green) 0%, #3a9878 100%); }
.tpdi-kpi-purple { background: linear-gradient(135deg, var(--tpdi-kpi-purple) 0%, #8558b8 100%); }
.tpdi-kpi-blue   { background: linear-gradient(135deg, var(--tpdi-kpi-blue) 0%, #4690c0 100%); }
.tpdi-kpi-orange { background: linear-gradient(135deg, var(--tpdi-kpi-orange) 0%, #d4704a 100%); }
.tpdi-kpi-teal   { background: linear-gradient(135deg, var(--tpdi-kpi-teal) 0%, #2c8f88 100%); }
.tpdi-kpi-slate  { background: linear-gradient(135deg, var(--tpdi-kpi-slate) 0%, #47536b 100%); }
.tpdi-kpi-red    { background: linear-gradient(135deg, var(--tpdi-kpi-red) 0%, #a91b1b 100%); }
.tpdi-kpi-indigo { background: linear-gradient(135deg, var(--tpdi-kpi-indigo) 0%, #3c33b8 100%); }
.tpdi-kpi-icon {
	width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
	background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center;
}
.tpdi-kpi-icon .dashicons { color: #fff; font-size: 1.15rem; width: 1.15rem; height: 1.15rem; }
.tpdi-kpi-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tpdi-kpi-label { font-size: .7rem; font-weight: 800; color: rgba(255,255,255,.88); text-transform: uppercase; letter-spacing: .09em; }
.tpdi-kpi-value {
	font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1.2; letter-spacing: -.02em;
	font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* A KPI value built from fmtMoneyKpi() renders the currency code smaller
   and lighter than the amount — keeps e.g. "GH₵ 13,350.00" from reading as
   two equally-heavy chunks, and (combined with the trimmed font-size above)
   is what actually stops it wrapping onto its own line in a narrow card. */
.tpdi-kpi-currency { font-size: .62em; font-weight: 700; opacity: .82; margin-right: 1px; }

/* Combined "Profit" card — Today/This Week/This Month as compact inline
   stats instead of three separate full-size cards, so related figures
   read as one grouped metric rather than adding to the card count. */
.tpdi-kpi-stat-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 12px; }
.tpdi-kpi-stat { display: flex; flex-direction: column; gap: 3px; padding-right: 22px; border-right: 1px solid rgba(255,255,255,.25); }
.tpdi-kpi-stat:last-child { padding-right: 0; border-right: none; }
.tpdi-kpi-stat-value {
	font-size: 1.2rem; font-weight: 800; color: #fff; line-height: 1.15; letter-spacing: -.01em;
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tpdi-kpi-stat-label { font-size: .66rem; font-weight: 700; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .06em; }

/* ─── PANELS ──────────────────────────────────────────────────── */
.tpdi-grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; margin-bottom: 22px; }
.tpdi-panel { background: var(--tpdi-card); border: 1px solid var(--tpdi-bd); border-radius: var(--tpdi-r-lg); overflow: hidden; box-shadow: var(--tpdi-shadow-xs); margin-bottom: 22px; }
.tpdi-panel-header { padding: 18px 22px; border-bottom: 1px solid var(--tpdi-bd); display: flex; align-items: center; justify-content: space-between; }
.tpdi-panel-header h2 { font-size: .92rem; font-weight: 800; color: var(--tpdi-t1); }
.tpdi-panel-header-row { flex-wrap: wrap; gap: 12px; }
.tpdi-panel-body { padding: 22px; }

.tpdi-btn-icon { background: var(--tpdi-card2); border: 1px solid var(--tpdi-bd2); border-radius: 8px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--tpdi-t2); transition: background .12s; }
.tpdi-btn-icon:hover { background: var(--tpdi-accent-bg); color: var(--tpdi-accent-dark); }
.tpdi-btn-icon .dashicons { font-size: 1rem; width: 1rem; height: 1rem; }

/* ─── ACTION PANELS (Add Device, Add Accessory, Record Sale, etc.) ───
   A more self-explanatory variant of .tpdi-panel-header for every
   "do something" panel across the portal (Devices, Accessories,
   Accessory Sales, Suppliers, Sales, Swaps, Returns, Users): an icon +
   one-line description makes it clear what the panel is for before it's
   even expanded, and a labeled pill button reads as an action rather
   than a bare "+" glyph. Scoped to .tpdi-action-panel. */
.tpdi-action-panel-header { flex-wrap: wrap; gap: 14px; }
.tpdi-action-panel-heading { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.tpdi-action-panel-icon {
	flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
	background: var(--tpdi-accent-bg); color: var(--tpdi-accent-dark);
	display: flex; align-items: center; justify-content: center;
}
.tpdi-action-panel-icon .dashicons { font-size: 1.25rem; width: 1.25rem; height: 1.25rem; }
.tpdi-action-panel-text { min-width: 0; }
.tpdi-action-panel-text h2 { margin-bottom: 4px; }
.tpdi-action-panel-sub { font-size: .78rem; font-weight: 400; color: var(--tpdi-t3); line-height: 1.45; max-width: 52ch; }
.tpdi-panel-toggle-btn { flex: 0 0 auto; white-space: nowrap; }
.tpdi-panel-toggle-btn.tpdi-btn-ghost .dashicons { transform: rotate(45deg); transition: transform .15s; }
.tpdi-panel-toggle-btn .dashicons { transition: transform .15s; }

.tpdi-empty-note { font-size: .85rem; color: var(--tpdi-t3); text-align: center; padding: 20px 0; }

/* ─── TABLE CONTROLS ──────────────────────────────────────────── */
.tpdi-table-controls { display: flex; gap: 10px; flex-wrap: wrap; }
.tpdi-search-input, .tpdi-select-sm, .tpdi-table-controls input[type="date"], .tpdi-table-controls input[type="datetime-local"] {
	padding: 9px 14px; border-radius: 50px; border: 1.5px solid var(--tpdi-bd2);
	background: var(--tpdi-input); font-family: var(--tpdi-font); font-size: .85rem; color: var(--tpdi-t1);
	outline: none; transition: border-color .15s;
}
.tpdi-search-input { min-width: 220px; }
.tpdi-search-input:focus, .tpdi-select-sm:focus, .tpdi-table-controls input[type="date"]:focus, .tpdi-table-controls input[type="datetime-local"]:focus { border-color: var(--tpdi-accent); }

/* ─── TABLE ───────────────────────────────────────────────────── */
.tpdi-table-wrap { overflow-x: auto; padding: 0; }
.tpdi-panel .tpdi-table-wrap { padding: 0; }
.tpdi-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tpdi-table thead th {
	padding: 13px 18px; background: var(--tpdi-card2);
	font-size: .72rem; font-weight: 700; color: var(--tpdi-t2);
	text-transform: uppercase; letter-spacing: .06em;
	border-bottom: 1px solid var(--tpdi-bd); text-align: left; white-space: nowrap;
}
.tpdi-table tbody td { padding: 14px 18px; border-bottom: 1px solid var(--tpdi-bd); color: var(--tpdi-t1); vertical-align: middle; }
.tpdi-table tbody tr:last-child td { border-bottom: none; }
.tpdi-table tbody tr:hover { background: var(--tpdi-card2); }
.tpdi-table-loading { text-align: center; color: var(--tpdi-t3); padding: 30px 0 !important; }

/* ─── PAGINATION ──────────────────────────────────────────────── */
.tpdi-pagination {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
	padding: 14px 22px; border-top: 1px solid var(--tpdi-bd); background: var(--tpdi-card);
}
.tpdi-pagination:empty { display: none; padding: 0; border-top: none; }
.tpdi-pagination-info { font-size: .78rem; color: var(--tpdi-t3); white-space: nowrap; letter-spacing: .01em; }
.tpdi-pagination-info strong { color: var(--tpdi-t1); font-weight: 700; }
.tpdi-pagination-controls { display: flex; align-items: center; gap: 14px; }

/* Plain chevrons, floating outside the pill track. */
.tpdi-page-nav {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	box-sizing: border-box; width: 30px; height: 30px; padding: 0; flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	border: none; outline: none; background: transparent; border-radius: 50%;
	color: var(--tpdi-t2); box-shadow: none; -webkit-tap-highlight-color: transparent;
	transition: background .14s ease, color .14s ease, transform .1s ease;
}
.tpdi-page-nav .dashicons { font-size: 1.05rem; width: 1.05rem; height: 1.05rem; }
.tpdi-page-nav:hover:not(:disabled) { background: var(--tpdi-card2); color: var(--tpdi-t1); }
.tpdi-page-nav:active:not(:disabled) { transform: scale(.92); }
.tpdi-page-nav:focus-visible { outline: 2px solid var(--tpdi-accent); outline-offset: 2px; }
.tpdi-page-nav:disabled { opacity: .32; cursor: not-allowed; }
.tpdi-page-nav::-moz-focus-inner { border: 0; }

/* The pill-shaped track holding page numbers + ellipses. */
.tpdi-page-track {
	display: flex; align-items: center; gap: 2px;
	background: var(--tpdi-card2); border-radius: 999px; padding: 5px;
}
.tpdi-page-btn {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	box-sizing: border-box; width: 32px; height: 32px; padding: 0; flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	border: none; outline: none; background: transparent; border-radius: 10px;
	font-family: var(--tpdi-font); font-size: .84rem; font-weight: 600; color: var(--tpdi-t3); line-height: 1;
	box-shadow: none; -webkit-tap-highlight-color: transparent;
	transition: background .14s ease, color .14s ease, box-shadow .14s ease, transform .1s ease;
}
.tpdi-page-btn::-moz-focus-inner { border: 0; }
.tpdi-page-btn:hover:not(:disabled):not(.is-active) { color: var(--tpdi-t1); }
.tpdi-page-btn:active:not(:disabled):not(.is-active) { transform: scale(.94); }
.tpdi-page-btn:focus-visible { outline: 2px solid var(--tpdi-accent); outline-offset: 2px; }
.tpdi-page-btn.is-active {
	background: #fff; color: var(--tpdi-t1); font-weight: 700; cursor: default;
	box-shadow: 0 1px 3px rgba(20,30,45,.16), 0 1px 2px rgba(20,30,45,.08);
}
.tpdi-page-ellipsis {
	width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
	color: var(--tpdi-t3); font-size: .84rem; font-weight: 600; user-select: none;
}

@media (max-width: 640px) {
	.tpdi-pagination { justify-content: center; text-align: center; padding: 14px 16px; }
	.tpdi-pagination-info { order: 2; width: 100%; text-align: center; }
	.tpdi-pagination-controls { order: 1; width: 100%; justify-content: center; }

	.tpdi-action-panel-header { flex-direction: column; align-items: stretch; }
	.tpdi-panel-toggle-btn { justify-content: center; }
}

/* ─── SORTABLE TABLE HEADERS (Audit Log) ─────────────────────── */
.tpdi-sortable { cursor: pointer; user-select: none; }
.tpdi-sortable:hover { color: var(--tpdi-t1); }
.tpdi-sort-arrow { display: inline-block; width: 10px; margin-left: 4px; opacity: .35; }
.tpdi-sort-arrow::after { content: '▲'; font-size: .65em; }
.tpdi-sortable.is-sorted { color: var(--tpdi-accent-dark); }
.tpdi-sortable.is-sorted .tpdi-sort-arrow { opacity: 1; }
.tpdi-sortable.is-sorted-desc .tpdi-sort-arrow::after { content: '▼'; }

/* ─── BADGES ──────────────────────────────────────────────────── */
.tpdi-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 11px; border-radius: 50px; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.tpdi-badge-in_stock  { background: var(--tpdi-green-bg); color: var(--tpdi-green-t); }
.tpdi-badge-sold      { background: var(--tpdi-blue-bg);  color: var(--tpdi-blue-t); }
.tpdi-badge-returned  { background: var(--tpdi-amber-bg); color: var(--tpdi-amber-t); }
.tpdi-badge-defective { background: var(--tpdi-red-bg);   color: var(--tpdi-red-t); }
.tpdi-badge-pending   { background: var(--tpdi-amber-bg); color: var(--tpdi-amber-t); }
.tpdi-badge-approved  { background: var(--tpdi-green-bg); color: var(--tpdi-green-t); }
.tpdi-badge-rejected  { background: var(--tpdi-red-bg);   color: var(--tpdi-red-t); }
.tpdi-badge-neutral   { background: var(--tpdi-card2); color: var(--tpdi-t2); border: 1px solid var(--tpdi-bd2); }

/* Expense categories */
.tpdi-badge-cat-utilities        { background: var(--tpdi-blue-bg);   color: var(--tpdi-blue-t); }
.tpdi-badge-cat-staff_payment    { background: var(--tpdi-purple-bg); color: var(--tpdi-purple-t); }
.tpdi-badge-cat-maintenance      { background: var(--tpdi-teal-bg);   color: var(--tpdi-teal-t); }
.tpdi-badge-cat-repairs          { background: var(--tpdi-amber-bg);  color: var(--tpdi-amber-t); }
.tpdi-badge-cat-returned_iphones { background: var(--tpdi-red-bg);    color: var(--tpdi-red-t); }
.tpdi-badge-cat-rent             { background: var(--tpdi-indigo-bg); color: var(--tpdi-indigo-t); }
.tpdi-badge-cat-marketing        { background: var(--tpdi-green-bg);  color: var(--tpdi-green-t); }
.tpdi-badge-cat-system_cost      { background: var(--tpdi-purple-bg); color: var(--tpdi-purple-t); }
.tpdi-badge-cat-packaging        { background: var(--tpdi-teal-bg);   color: var(--tpdi-teal-t); }
.tpdi-badge-cat-other            { background: var(--tpdi-card2);     color: var(--tpdi-t2); border: 1px solid var(--tpdi-bd2); }

/* Supplier ledger */
.tpdi-ledger-balance-positive { color: var(--tpdi-red-t); font-weight: 800; }
.tpdi-ledger-balance-zero     { color: var(--tpdi-green-t); font-weight: 800; }
.tpdi-badge-txn-debit   { background: var(--tpdi-red-bg);   color: var(--tpdi-red-t); }
.tpdi-badge-txn-payment { background: var(--tpdi-green-bg); color: var(--tpdi-green-t); }
.tpdi-badge-role-admin { background: var(--tpdi-purple-bg); color: var(--tpdi-purple-t); }
.tpdi-badge-retail   { background: var(--tpdi-card2); color: var(--tpdi-t2); border: 1px solid var(--tpdi-bd2); }
.tpdi-badge-dealer   { background: var(--tpdi-purple-bg); color: var(--tpdi-purple-t); }

.tpdi-positive { color: var(--tpdi-green-t); font-weight: 700; }
.tpdi-negative { color: var(--tpdi-red-t); font-weight: 700; }
.tpdi-subtext { font-size: .74rem; color: var(--tpdi-t3); margin-top: 2px; font-weight: 500; }

/* ─── RANGE PILLS ─────────────────────────────────────────────── */
.tpdi-reports-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.tpdi-range-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.tpdi-pill {
	padding: 8px 16px; border-radius: 50px; font-size: .8rem; font-weight: 700;
	border: 1px solid var(--tpdi-bd2); background: #fff; color: var(--tpdi-t2);
	transition: all .12s;
}
.tpdi-pill:hover { border-color: var(--tpdi-accent); color: var(--tpdi-accent-dark); }
.tpdi-pill.is-active { background: var(--tpdi-accent); border-color: var(--tpdi-accent); color: #fff; }
.tpdi-pill-custom { display: inline-flex; align-items: center; gap: 6px; }
.tpdi-pill-custom .dashicons { font-size: .95rem; width: .95rem; height: .95rem; }

/* ─── CUSTOM DATE RANGE ───────────────────────────────────────── */
/* Shared "quick pills + custom popover" date filter, used on Reports,
   Devices, and Audit Log — same pill row (Today/This Week/etc.), plus a
   Custom pill that reveals a From/To popover. */
.tpdi-custom-range { position: relative; }
.tpdi-custom-range-popover {
	position: absolute; top: calc(100% + 8px); left: 0; z-index: 400;
	display: none; align-items: flex-end; gap: 10px; flex-wrap: wrap;
	background: #fff; border: 1px solid var(--tpdi-bd2); border-radius: 14px;
	box-shadow: 0 12px 40px rgba(0,0,0,.14); padding: 14px;
}
.tpdi-custom-range-popover.is-open { display: flex; }
.tpdi-custom-range-field { display: flex; flex-direction: column; gap: 6px; }
.tpdi-custom-range-field label { font-size: .72rem; font-weight: 700; color: var(--tpdi-t2); }
.tpdi-custom-range-field input[type="date"] {
	padding: 8px 10px; border-radius: 8px; border: 1.5px solid var(--tpdi-bd2);
	background: var(--tpdi-input); color: var(--tpdi-t1); font-size: .82rem; font-family: var(--tpdi-font);
	outline: none; transition: border-color .15s, box-shadow .15s;
}
.tpdi-custom-range-field input[type="date"]:focus { border-color: var(--tpdi-accent); box-shadow: 0 0 0 3px var(--tpdi-accent-glow); }

/* ─── EXPORT MENU (Reports) ──────────────────────────────────── */
.tpdi-export-menu { position: relative; flex-shrink: 0; }
.tpdi-export-menu .dashicons-arrow-down-alt2 { margin-left: -2px; opacity: .85; }
/* Solid, high-contrast treatment (vs. the soft pastel .tpdi-btn-secondary
   used elsewhere) so the Export action reads clearly against the white
   toolbar instead of blending in next to the range pills. */
.tpdi-btn-export {
	background: linear-gradient(135deg, var(--tpdi-kpi-green) 0%, var(--tpdi-green-t) 100%);
	color: #fff; box-shadow: 0 6px 18px rgba(21,128,61,.28);
}
.tpdi-btn-export:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(21,128,61,.36); }
.tpdi-export-dropdown {
	position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px;
	background: #fff; border: 1px solid var(--tpdi-bd2); border-radius: 14px;
	box-shadow: 0 12px 40px rgba(0,0,0,.14); overflow: hidden; display: none; z-index: 400;
}
.tpdi-export-dropdown.is-open { display: block; }
.tpdi-export-option {
	display: flex; align-items: center; gap: 10px; width: 100%;
	padding: 11px 16px; font-size: .84rem; font-weight: 600; color: var(--tpdi-t1);
	background: none; border: none; text-align: left; font-family: var(--tpdi-font);
}
.tpdi-export-option:hover { background: var(--tpdi-accent-bg); color: var(--tpdi-accent-dark); }
.tpdi-export-option .dashicons { color: var(--tpdi-t3); font-size: 1.05rem; width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.tpdi-export-option:hover .dashicons { color: var(--tpdi-accent-dark); }

/* ─── FORMS ───────────────────────────────────────────────────── */
.tpdi-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 18px; align-items: start; }
.tpdi-field-wide { grid-column: 1 / -1; }
.tpdi-split-payment-fields { background: var(--tpdi-card2); border: 1px solid var(--tpdi-bd); border-radius: 10px; padding: 14px 16px; }
.tpdi-split-payment-row.tpdi-form-grid { gap: 14px; }
#sale-split-remaining.tpdi-split-balanced { color: var(--tpdi-green-t); }
#sale-split-remaining.tpdi-split-unbalanced { color: var(--tpdi-red-t); }
.tpdi-field-checkbox { grid-column: 1 / -1; }
.tpdi-field label { display: block; font-size: .78rem; font-weight: 700; color: var(--tpdi-t2); margin-bottom: 7px; }
.tpdi-field input[type="text"], .tpdi-field input[type="number"],
.tpdi-field input[type="date"], .tpdi-field input[type="email"],
.tpdi-field select, .tpdi-field textarea {
	width: 100%; padding: 10px 14px; border-radius: var(--tpdi-r);
	border: 1.5px solid var(--tpdi-bd2); background: var(--tpdi-input);
	color: var(--tpdi-t1); font-size: .88rem; font-family: var(--tpdi-font);
	outline: none; transition: border-color .15s, box-shadow .15s;
}
.tpdi-field textarea { resize: vertical; min-height: 70px; }
.tpdi-field input:focus, .tpdi-field select:focus, .tpdi-field textarea:focus { border-color: var(--tpdi-accent); box-shadow: 0 0 0 3px var(--tpdi-accent-glow); }
.tpdi-field-hint { font-size: .74rem; color: var(--tpdi-t3); margin-top: 6px; }
.tpdi-field-hint.tpdi-field-warning { color: var(--tpdi-amber-t); font-weight: 600; }
.tpdi-static-value { padding: 10px 14px; border-radius: var(--tpdi-r); background: var(--tpdi-accent-bg); color: var(--tpdi-accent-dark); font-weight: 700; font-size: .95rem; }
.tpdi-form-actions { grid-column: 1 / -1; display: flex; gap: 12px; margin-top: 6px; }
.tpdi-form-subhead {
	font-size: .82rem; font-weight: 800; color: var(--tpdi-accent-dark); text-transform: uppercase;
	letter-spacing: .04em; margin: 4px 0 -4px; padding-top: 14px; border-top: 1px solid var(--tpdi-bd);
}
.tpdi-form-grid > .tpdi-field-wide:first-child .tpdi-form-subhead { border-top: none; padding-top: 0; }

/* Input + inline button (e.g. IMEI field + camera scan button) */
.tpdi-input-group { display: flex; gap: 8px; align-items: stretch; }
.tpdi-input-group input { flex: 1 1 auto; }
.tpdi-input-group .tpdi-btn-icon { flex: 0 0 auto; width: 42px; height: auto; }

/* Device search picker (Sales / Swap forms — find a device in stock by
   IMEI/serial, brand, or model instead of scrolling a long dropdown).
   The results dropdown is positioned with fixed coordinates computed in
   JS and lives in <body> — the form fields sit inside .tpdi-panel, which
   uses overflow:hidden to keep the table's corners clean, and that would
   otherwise clip an absolutely-positioned dropdown taller than the panel. */
.tpdi-device-picker { position: relative; }
.tpdi-device-picker-results {
	max-height: 320px; overflow-y: auto;
	background: #fff; border: 1px solid var(--tpdi-bd2); border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0,0,0,.16); display: none; z-index: 450;
}
.tpdi-device-picker-results.is-open { display: block; }
.tpdi-search-result-stock { font-size: .7rem; font-weight: 700; color: var(--tpdi-t3); white-space: nowrap; flex-shrink: 0; text-align: right; line-height: 1.5; }
.tpdi-device-picker-selected {
	display: flex; align-items: center; gap: 12px; padding: 9px 12px;
	border: 1.5px solid var(--tpdi-accent); border-radius: var(--tpdi-r); background: var(--tpdi-accent-bg);
}
.tpdi-device-picker-selected .dashicons-smartphone { color: var(--tpdi-accent-dark); font-size: 1.3rem; width: 1.3rem; height: 1.3rem; flex-shrink: 0; }
.tpdi-device-picker-selected-info { flex: 1; min-width: 0; }
.tpdi-device-picker-selected-title { font-size: .88rem; font-weight: 700; color: var(--tpdi-t1); }
.tpdi-device-picker-selected-imei { font-family: var(--tpdi-mono); font-size: .76rem; color: var(--tpdi-t2); margin-top: 2px; }
.tpdi-device-picker-selected .tpdi-btn-icon { flex-shrink: 0; }

/* Inline "add new" panel nested inside a field (e.g. quick-add supplier) */
.tpdi-quickadd-panel {
	margin-top: 10px; padding: 12px; border-radius: var(--tpdi-r);
	background: var(--tpdi-card2); border: 1px dashed var(--tpdi-bd2);
	display: flex; flex-direction: column; gap: 8px;
}
.tpdi-quickadd-panel input {
	width: 100%; padding: 8px 12px; border-radius: var(--tpdi-r);
	border: 1.5px solid var(--tpdi-bd2); background: #fff; font-size: .85rem; font-family: var(--tpdi-font);
}
.tpdi-supplier-quickadd-actions { display: flex; gap: 8px; }

/* ─── BUTTONS ─────────────────────────────────────────────────── */
.tpdi-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 22px; border-radius: 50px; border: none;
	font-size: .85rem; font-weight: 700; font-family: var(--tpdi-font);
	transition: transform .12s, box-shadow .12s, opacity .12s;
}
.tpdi-btn .dashicons { font-size: .95rem; width: .95rem; height: .95rem; }
.tpdi-btn-primary { background: linear-gradient(135deg, var(--tpdi-accent) 0%, var(--tpdi-sidebar) 100%); color: #fff; box-shadow: 0 6px 18px rgba(var(--tpdi-sidebar-rgb),.25); }
.tpdi-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(var(--tpdi-sidebar-rgb),.32); }
.tpdi-btn-secondary { background: var(--tpdi-accent-bg); color: var(--tpdi-accent-dark); }
.tpdi-btn-secondary:hover { opacity: .8; }
.tpdi-btn-whatsapp { background: #25d366; color: #fff; }
.tpdi-btn-whatsapp:hover { background: #1da851; }
.tpdi-btn-whatsapp:disabled { background: var(--tpdi-card2); color: var(--tpdi-t3); cursor: not-allowed; }
.tpdi-btn-whatsapp svg { flex-shrink: 0; }
.tpdi-btn-ghost { background: var(--tpdi-card2); color: var(--tpdi-t2); border: 1px solid var(--tpdi-bd2); }
.tpdi-btn-ghost:hover { opacity: .8; }
.tpdi-btn-sm { padding: 6px 14px; font-size: .76rem; }
.tpdi-btn-approve { background: var(--tpdi-green-bg); color: var(--tpdi-green-t); border: 1px solid var(--tpdi-green-bd); }
.tpdi-btn-reject { background: var(--tpdi-red-bg); color: var(--tpdi-red-t); border: 1px solid var(--tpdi-red-bd); }
.tpdi-btn-danger-icon { background: var(--tpdi-red-bg); color: var(--tpdi-red-t); border: 1px solid var(--tpdi-red-bd); border-radius: 8px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; }
.tpdi-row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ─── QUICK ACTIONS ───────────────────────────────────────────── */
.tpdi-quick-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ─── LOGO UPLOADER (Settings) ────────────────────────────────── */
/* flex-wrap so the buttons drop below the thumbnail on narrow screens
   instead of overflowing — the parent .tpdi-panel clips overflow, so
   without this the "Remove" button (and on Swap Phones, part of the
   longer "Capture / Choose Photo" label) gets cut off and unreachable
   on phones ~375px and narrower. */
.tpdi-logo-uploader { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.tpdi-logo-uploader img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; border: 1px solid var(--tpdi-bd2); }

/* ─── BRAND COLOR PICKER (Settings) ───────────────────────────── */
.tpdi-color-field { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tpdi-color-field input[type="color"] {
	width: 44px; height: 44px; padding: 0; border: 1px solid var(--tpdi-bd2); border-radius: 10px;
	cursor: pointer; background: none; flex-shrink: 0;
}
.tpdi-color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
.tpdi-color-field input[type="color"]::-webkit-color-swatch { border: none; border-radius: 7px; }
.tpdi-color-field input[type="text"] { width: 110px; font-family: monospace; text-transform: uppercase; }

/* ─── DEVICE PHOTO THUMBNAIL (table) ──────────────────────────── */
.tpdi-device-thumb { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; border: 1px solid var(--tpdi-bd2); display: block; }
.tpdi-device-thumb-placeholder {
	width: 42px; height: 42px; border-radius: 8px; background: var(--tpdi-card2);
	border: 1px solid var(--tpdi-bd2); display: flex; align-items: center; justify-content: center;
	color: var(--tpdi-t3); font-size: 1.1rem !important; width: 42px !important; height: 42px !important;
}

/* ─── RECEIPT / INVOICE MODAL ─────────────────────────────────── */
.tpdi-modal-overlay {
	position: fixed; inset: 0; background: rgba(20,30,42,.55);
	display: none; align-items: center; justify-content: center;
	z-index: 500; padding: 24px; backdrop-filter: blur(2px);
}
.tpdi-modal-overlay.is-open { display: flex; }
.tpdi-modal {
	background: #fff; border-radius: var(--tpdi-r-lg);
	box-shadow: var(--tpdi-shadow-lg); width: 100%; max-width: 480px;
	max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
}
.tpdi-modal-header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 18px; border-bottom: 1px solid var(--tpdi-bd); flex-shrink: 0;
}
.tpdi-doc-toggle { display: flex; gap: 4px; background: var(--tpdi-card2); border-radius: 50px; padding: 3px; }
.tpdi-doc-toggle-btn {
	padding: 7px 16px; border-radius: 50px; border: none; background: transparent;
	font-size: .8rem; font-weight: 700; color: var(--tpdi-t2); transition: all .12s;
}
.tpdi-doc-toggle-btn.is-active { background: var(--tpdi-sidebar); color: #fff; }
.tpdi-modal-close { background: none; border: none; color: var(--tpdi-t3); padding: 6px; border-radius: 8px; }
.tpdi-modal-close:hover { background: var(--tpdi-card2); }
.tpdi-modal-close .dashicons { font-size: 1.1rem; width: 1.1rem; height: 1.1rem; }
.tpdi-modal-body { padding: 24px; overflow-y: auto; flex: 1; background: var(--tpdi-card2); }
.tpdi-modal-footer { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--tpdi-bd); flex-shrink: 0; flex-wrap: wrap; }
.tpdi-modal-footer .tpdi-btn { flex: 1; justify-content: center; }
/* The receipt modal footer has three buttons once WhatsApp is added —
   "Send via WhatsApp" is the longest label, so rather than let three
   flex:1 buttons squeeze it on a narrow screen, it gets a dedicated
   full-width row below Print/Download PDF on every screen size. This
   also gives it visual priority as the primary "get this to the
   customer" action, not just an equal third option. */
.tpdi-modal-footer #tpdi-receipt-whatsapp { flex: 1 1 100%; }

.tpdi-scanner-modal { max-width: 420px; }
.tpdi-scanner-modal .tpdi-modal-body { background: #000; padding: 0; }
#tpdi-scanner-viewport { width: 100%; min-height: 280px; background: #000; }
#tpdi-scanner-viewport video { width: 100% !important; }

/* ─── STOCK BY MODEL → DEVICE LIST MODAL ──────────────────────── */
.tpdi-stock-model-modal { max-width: 760px; }
.tpdi-stock-model-tab {
	padding: 7px 16px; border-radius: 50px; border: none; background: transparent;
	font-size: .8rem; font-weight: 700; color: var(--tpdi-t2); transition: all .12s;
}
.tpdi-stock-model-tab.is-active { background: var(--tpdi-sidebar); color: #fff; }
.tpdi-model-link {
	background: none; border: none; padding: 0; margin: 0; font: inherit;
	color: var(--tpdi-accent-dark); font-weight: 700; cursor: pointer; text-align: left;
}
.tpdi-model-link:hover { text-decoration: underline; }

/* ─── SUPPLIER LEDGER MODAL ────────────────────────────────────── */
.tpdi-ledger-modal { max-width: 780px; }
.tpdi-ledger-summary {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
	background: var(--tpdi-card2); border-radius: var(--tpdi-r-lg);
	padding: 16px; margin-bottom: 18px;
}
.tpdi-ledger-summary-stat { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.tpdi-ledger-summary-label { font-size: .7rem; font-weight: 700; color: var(--tpdi-t3); text-transform: uppercase; letter-spacing: .03em; }
.tpdi-ledger-summary-value { font-size: 1.15rem; font-weight: 800; color: var(--tpdi-t1); }
#tpdi-ledger-balance.tpdi-ledger-balance-positive { color: var(--tpdi-red-t); }
#tpdi-ledger-balance.tpdi-ledger-balance-zero { color: var(--tpdi-green-t); }
@media (max-width: 560px) {
	.tpdi-ledger-summary { grid-template-columns: 1fr; }
}
.tpdi-scanner-modal #tpdi-scanner-hint { color: #fff; background: rgba(0,0,0,.65); padding: 12px 16px; margin: 0; text-align: center; }

/* ─── PERMISSIONS MODAL ───────────────────────────────────────── */
.tpdi-permissions-modal { max-width: 520px; }
.tpdi-permissions-list { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.tpdi-permission-row {
	display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
	background: #fff; border: 1px solid var(--tpdi-bd); border-radius: 8px; cursor: pointer;
}
.tpdi-permission-row:hover { border-color: var(--tpdi-bd2); }
.tpdi-permission-row + .tpdi-permission-row { margin-top: 8px; }
.tpdi-permission-row input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; }
.tpdi-permission-text { display: flex; flex-direction: column; gap: 2px; font-size: .85rem; color: var(--tpdi-t1); }
.tpdi-permission-desc { font-size: .76rem; color: var(--tpdi-t3); font-weight: 400; }

.tpdi-receipt-doc { background: #fff; border-radius: var(--tpdi-r); padding: 28px 26px; box-shadow: var(--tpdi-shadow-xs); }
.tpdi-receipt-inner { max-width: 380px; margin: 0 auto; }
.tpdi-receipt-head { text-align: center; margin-bottom: 18px; border-bottom: 2px solid var(--tpdi-sidebar); padding-bottom: 14px; }
.tpdi-receipt-logo { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; margin: 0 auto 8px; display: block; }
.tpdi-receipt-shop-name { font-size: 1.1rem; font-weight: 800; color: var(--tpdi-t1); }
.tpdi-receipt-shop-contact { font-size: .72rem; color: var(--tpdi-t3); margin-top: 2px; }
.tpdi-receipt-doc-title { font-size: .78rem; font-weight: 700; letter-spacing: .12em; color: var(--tpdi-t2); margin-top: 6px; }
.tpdi-receipt-doc-number { font-size: .78rem; color: var(--tpdi-t3); margin-top: 2px; }
.tpdi-receipt-meta { display: flex; justify-content: space-between; font-size: .78rem; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.tpdi-receipt-meta span { display: block; color: var(--tpdi-t3); }
.tpdi-receipt-billto { font-size: .82rem; margin-bottom: 14px; padding: 10px 0; border-top: 1px solid var(--tpdi-bd); border-bottom: 1px solid var(--tpdi-bd); }
.tpdi-receipt-billto span { display: block; color: var(--tpdi-t3); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.tpdi-receipt-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: .85rem; }
.tpdi-receipt-table th { text-align: left; font-size: .7rem; text-transform: uppercase; color: var(--tpdi-t3); border-bottom: 1px solid var(--tpdi-bd); padding: 6px 0; }
.tpdi-receipt-table td { padding: 10px 0; border-bottom: 1px solid var(--tpdi-card2); color: var(--tpdi-t1); }
.tpdi-receipt-amt { text-align: right; }
.tpdi-receipt-total { display: flex; justify-content: space-between; font-size: 1.05rem; font-weight: 800; color: var(--tpdi-t1); border-top: 2px solid var(--tpdi-sidebar); padding-top: 12px; margin-bottom: 8px; }
.tpdi-receipt-warranty { display: flex; justify-content: space-between; font-size: .78rem; color: var(--tpdi-t3); margin-bottom: 18px; }
.tpdi-receipt-terms { font-size: .72rem; color: var(--tpdi-t3); line-height: 1.5; margin-bottom: 14px; }
.tpdi-receipt-footer { text-align: center; font-size: .82rem; font-weight: 700; color: var(--tpdi-t2); }

/* ─── TOASTS ──────────────────────────────────────────────────── */
.tpdi-toast-stack { position: fixed; top: 20px; right: 20px; z-index: 999; display: flex; flex-direction: column; gap: 10px; }
.tpdi-toast {
	padding: 14px 20px; border-radius: var(--tpdi-r); box-shadow: var(--tpdi-shadow-lg);
	font-size: .85rem; font-weight: 600; color: #fff; min-width: 240px; max-width: 360px;
	animation: tpdi-toast-in .2s ease;
}
.tpdi-toast-success { background: linear-gradient(135deg, var(--tpdi-kpi-green) 0%, #3a9878 100%); }
.tpdi-toast-error { background: linear-gradient(135deg, #e05c5c 0%, #c0392b 100%); }
@keyframes tpdi-toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

/* ─── MOBILE / RESPONSIVE ─────────────────────────────────────── */
.tpdi-sb-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.32); z-index: 199; backdrop-filter: blur(2px); }

@media (max-width: 980px) {
	.tpdi-grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 880px) {
	.tpdi-sidebar { transform: translateX(-100%); }
	.tpdi-portal.tpdi-sb-open .tpdi-sidebar { transform: translateX(0); }
	.tpdi-portal.tpdi-sb-open .tpdi-sb-overlay { display: block; }
	.tpdi-main { margin-left: 0; }
	.tpdi-sb-toggle { display: flex; }
	.tpdi-topbar { padding: 0 16px; }
	.tpdi-content { padding: 18px 16px 40px; }
	.tpdi-user-info { display: none; }
	.tpdi-topbar-search { width: 200px; }
	.tpdi-topbar-search-results { width: 300px; }

	.tpdi-table thead { display: none; }
	.tpdi-table tbody tr {
		display: block; border-bottom: 8px solid var(--tpdi-card2);
		padding: 10px 0;
	}
	.tpdi-table tbody td {
		display: flex; justify-content: space-between; align-items: center;
		border-bottom: 1px solid var(--tpdi-bd); padding: 10px 16px; text-align: right;
	}
	.tpdi-table tbody td:last-child { border-bottom: none; }
	.tpdi-table tbody td::before {
		content: attr(data-label); font-weight: 700; color: var(--tpdi-t2);
		font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
		text-align: left; margin-right: 12px;
	}

	/* The Actions cell holds 1-3 buttons — cramming those next to the
	   "ACTIONS" label in the same row (like every other field) leaves too
	   little width for comfortable tap targets. Let it take the full row
	   instead, with the label above and evenly-sized buttons below. */
	.tpdi-table tbody td[data-label="Actions"] {
		flex-direction: column; align-items: stretch; gap: 8px;
	}
	.tpdi-table tbody td[data-label="Actions"]::before { margin-right: 0; }
	.tpdi-table tbody td[data-label="Actions"] .tpdi-row-actions { justify-content: stretch; }
	.tpdi-table tbody td[data-label="Actions"] .tpdi-btn-sm { flex: 1 1 0; justify-content: center; }

	/* Bigger tap targets on touch screens, closer to the ~44px minimum
	   recommended for comfortable, mis-tap-free tapping. */
	.tpdi-btn-sm { min-height: 38px; padding: 8px 16px; }
	.tpdi-btn-danger-icon, .tpdi-btn-icon { width: 38px; height: 38px; }

	/* Search + filter fields stack full-width rather than squeezing
	   side by side, matching how form fields already stack on mobile. */
	.tpdi-table-controls { flex-direction: column; align-items: stretch; }
	.tpdi-table-controls .tpdi-search-input,
	.tpdi-table-controls .tpdi-select-sm,
	.tpdi-table-controls input[type="date"],
	.tpdi-table-controls input[type="datetime-local"] {
		width: 100%; min-width: 0;
	}

	/* "Loading…" / "No records found" rows are a single colspan message,
	   not a labeled field — without this they'd inherit the same
	   label::before + space-between treatment as real data cells above,
	   but with no data-label set, leaving an empty label box that shoves
	   the message off to the right instead of centering it. */
	.tpdi-table tbody td.tpdi-table-loading {
		display: block; text-align: center;
	}
	.tpdi-table tbody td.tpdi-table-loading::before { content: none; margin-right: 0; }

	/* Stock by Model → device popup: color-code each device card by
	   status on mobile. In the generic stacked-table layout above, the
	   only status signal is a small badge buried among five other
	   label/value rows — easy to miss while scanning quickly through a
	   long device list. A colored left edge + a soft background tint
	   (the same status colors used everywhere else — badges, KPIs) let
	   a device's status register at a glance, before you've even read
	   the card, and make each device visually distinct from the next. */
	#tpdi-stock-model-table tbody tr {
		border-left: 4px solid var(--tpdi-bd2);
		border-bottom: none;
		border-radius: var(--tpdi-r);
		margin-bottom: 10px;
		background: var(--tpdi-card2);
		box-shadow: var(--tpdi-shadow-xs);
	}
	#tpdi-stock-model-table tbody tr:last-child { margin-bottom: 0; }
	#tpdi-stock-model-table tbody td { border-bottom-color: rgba(0,0,0,.06); }
	#tpdi-stock-model-table tbody td:last-child { border-bottom: none; }

	#tpdi-stock-model-table tbody tr[data-status="in_stock"]  { border-left-color: var(--tpdi-green);  background: var(--tpdi-green-bg); }
	#tpdi-stock-model-table tbody tr[data-status="sold"]      { border-left-color: var(--tpdi-blue);   background: var(--tpdi-blue-bg); }
	#tpdi-stock-model-table tbody tr[data-status="returned"]  { border-left-color: var(--tpdi-amber);  background: var(--tpdi-amber-bg); }
	#tpdi-stock-model-table tbody tr[data-status="defective"] { border-left-color: var(--tpdi-red);    background: var(--tpdi-red-bg); }
}

@media (max-width: 600px) {
	.tpdi-topbar-title { display: none; }
	.tpdi-topbar-search { width: auto; flex: 1; }
	.tpdi-topbar-search-results { width: 100%; max-width: 320px; }
	.tpdi-login-card { padding: 36px 26px 28px; }
	.tpdi-kpi-grid { grid-template-columns: 1fr 1fr; }
	.tpdi-form-grid { grid-template-columns: 1fr; }
	.tpdi-modal-overlay { padding: 0; align-items: flex-end; }
	.tpdi-modal { max-width: 100%; max-height: 95vh; border-radius: var(--tpdi-r-lg) var(--tpdi-r-lg) 0 0; }
	.tpdi-receipt-doc { padding: 20px 16px; }

	.tpdi-custom-range-popover { max-width: calc(100vw - 40px); flex-wrap: wrap; }
	.tpdi-custom-range-field { flex: 1 1 130px; }
	.tpdi-custom-range-popover .tpdi-btn { flex: 1 1 100%; justify-content: center; }
}

/* Narrowest phones (older/smaller devices, ~360px and below) — the 2-up
   KPI grid and inline picker/quick-action rows get uncomfortably tight
   at this width, so relax them to single-column / fully-stacked. */
@media (max-width: 400px) {
	.tpdi-kpi-grid { grid-template-columns: 1fr; }
	.tpdi-kpi-value { font-size: 1.3rem; }
	.tpdi-kpi-stat-row { gap: 16px; }
	.tpdi-kpi-stat { padding-right: 16px; }
	.tpdi-kpi-stat-value { font-size: 1.05rem; }
	.tpdi-quick-actions { flex-direction: column; align-items: stretch; }
	.tpdi-quick-actions .tpdi-btn { justify-content: center; }
	.tpdi-search-result-row { flex-wrap: wrap; }
	.tpdi-search-result-stock { width: 100%; text-align: left; margin-left: 54px; }
}