/* TapBiz Order Manager — dashboard styles
   v2: widened for desktop (was capped at 640px — far too narrow, made
   the whole thing look like a mobile-only relic on any real monitor),
   and modernized the visual language (soft shadows instead of flat
   1.5px borders everywhere, more breathing room, refined typography).
   Still white background / black text / Poppins per brand direction,
   still easy to use on a phone in the field — this is a widen-and-
   polish pass, not a different design. */

@font-face { font-family: 'TapbizSans'; src: url('../fonts/Poppins-Regular.ttf'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'TapbizSans'; src: url('../fonts/Poppins-Medium.ttf'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'TapbizSans'; src: url('../fonts/Poppins-SemiBold.ttf'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'TapbizSans'; src: url('../fonts/Poppins-Bold.ttf'); font-weight: 700; font-display: swap; }

.tapbiz-login-wrap, .tapbiz-dash-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 24px 80px;
	font-family: 'TapbizSans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: #16161a;
	background: #ffffff;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}
/* The previous fix used a vw-based "full-bleed" trick on .tapbiz-dash-wrap
   itself to escape a themed container — it turned out unreliable (showed
   white only over part of the screen, black elsewhere, in real testing).
   This is the more robust approach: make the BODY itself white on these
   pages (body is always the true full viewport width, no vw math needed).
   body.tapbiz-app-page is added via PHP (see Tapbiz_Assets::add_body_class)
   whenever our shortcode is on the page — reliable regardless of theme or
   browser. The :has() selector is an extra modern-browser fallback in case
   that class is ever missing for some reason. */
body.tapbiz-app-page,
body:has(.tapbiz-dash-wrap),
body:has(.tapbiz-login-wrap) {
	background: #ffffff !important;
}
.tapbiz-login-wrap { max-width: 460px; }
@media (min-width: 640px) {
	.tapbiz-dash-wrap { padding: 40px 40px 96px; }
}
@media (min-width: 1000px) {
	.tapbiz-dash-wrap { padding: 48px 56px 110px; }
}

/* ---- Login ---- */
.tapbiz-login-wrap { max-width: 460px; }
.tapbiz-login-card {
	margin-top: 12vh;
	padding: 40px 32px;
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.07);
	border: 1px solid #ececec;
}
.tapbiz-login-title { text-align: center; margin: 0 0 28px; font-size: 26px; font-weight: 700; }
.tapbiz-login-form label { display: block; font-size: 13.5px; font-weight: 600; margin: 18px 0 6px; color: #444; }
.tapbiz-login-form input {
	width: 100%; padding: 13px 14px; font-size: 15.5px;
	border: 1.5px solid #ddd; border-radius: 10px; box-sizing: border-box;
	transition: border-color .15s ease;
}
.tapbiz-login-form input:focus { outline: none; border-color: #16161a; }
.tapbiz-login-forgot { text-align: center; margin-top: 20px; }
.tapbiz-login-forgot a { font-size: 13.5px; color: #888; text-decoration: none; }
.tapbiz-login-forgot a:hover { color: #16161a; text-decoration: underline; }

/* ---- Password show/hide toggle ---- */
.tapbiz-password-wrap { position: relative; }
.tapbiz-password-wrap input { padding-right: 44px !important; }
.tapbiz-password-toggle {
	position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
	background: none; border: none; padding: 8px; cursor: pointer;
	color: #888; display: flex; align-items: center; justify-content: center;
	border-radius: 6px;
}
.tapbiz-password-toggle:hover { color: #16161a; background: #f3f3f4; }

/* ---- Dynamic QR client dashboard ---- */
.tapbiz-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.tapbiz-card-header h2 { font-size: 17px; margin: 0; }
.tapbiz-scan-count { font-size: 12.5px; color: #888; background: #f7f7f8; padding: 4px 10px; border-radius: 100px; }
.tapbiz-card-body { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.tapbiz-card-info { flex: 1; min-width: 260px; }
.tapbiz-card-qr { text-align: center; }
.tapbiz-field-label {
	display: block; font-size: 12px; font-weight: 600; color: #666;
	text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px;
}
.tapbiz-copy-row { display: flex; gap: 8px; margin-bottom: 14px; }
.tapbiz-short-url-field, .tapbiz-dest-input {
	flex: 1; width: 100%; padding: 10px 12px; font-size: 14px;
	border: 1.5px solid #ddd; border-radius: 8px; box-sizing: border-box;
}
.tapbiz-short-url-field { font-family: monospace; background: #fafafa; }
.tapbiz-dest-input:focus { outline: none; border-color: #16161a; }
.tapbiz-copy-btn.is-copied { background: #1a6b3c !important; color: #fff !important; }
.tapbiz-qr-canvas-wrap {
	display: inline-block; padding: 12px; background: #fff;
	border: 1px solid #e2e2e2; border-radius: 10px; margin-bottom: 10px;
	min-width: 148px; min-height: 148px;
}
.tapbiz-qr-canvas-wrap img, .tapbiz-qr-canvas-wrap canvas { display: block; }
.tapbiz-download-btn { display: block; width: 100%; }

/* ---- Buttons ---- */
.tapbiz-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 13px 22px; font-size: 15px; font-weight: 600;
	border-radius: 10px; border: none; cursor: pointer; text-decoration: none;
	transition: transform .08s ease, box-shadow .15s ease, opacity .15s ease, background .15s ease;
	white-space: nowrap;
}
.tapbiz-btn-block { width: 100%; margin-top: 22px; }
.tapbiz-btn-primary { background: #16161a; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.tapbiz-btn-primary:hover { background: #2a2a30; }
.tapbiz-btn-primary:active { transform: scale(0.98); }
.tapbiz-btn-secondary { background: #f3f3f4; color: #16161a; }
.tapbiz-btn-secondary:hover { background: #e9e9eb; }
.tapbiz-btn-danger { background: #fdeaea; color: #a12222; }
.tapbiz-btn-danger:hover { background: #fbdcdc; }
.tapbiz-btn-whatsapp { background: #25D366; color: #06301a; }
.tapbiz-btn-whatsapp:hover { background: #21bd5c; }
.tapbiz-btn-sm { padding: 9px 15px; font-size: 13.5px; border-radius: 8px; }
.tapbiz-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---- Alerts ---- */
.tapbiz-alert { padding: 14px 16px; border-radius: 10px; margin-bottom: 18px; font-size: 14px; }
.tapbiz-alert-error { background: #fdeaea; color: #a12222; }
.tapbiz-alert-success { background: #e8f7ee; color: #1a6b3c; }

/* ---- Dashboard header ---- */
.tapbiz-dash-header {
	display: flex; justify-content: space-between; align-items: flex-start;
	margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid #ececec;
	flex-wrap: wrap; gap: 12px;
}
.tapbiz-dash-header h1 { font-size: 24px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.tapbiz-dash-header .tapbiz-role-tag { font-size: 13.5px; color: #888; margin-top: 4px; }

/* ---- Order form ---- */
.tapbiz-form-card {
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 4px 16px rgba(0,0,0,0.045);
	border: 1px solid #ececec;
	padding: 26px 28px;
	margin-bottom: 26px;
	max-width: 720px;
}
.tapbiz-form-card h2 { font-size: 17px; font-weight: 600; margin: 0 0 18px; }
.tapbiz-field { margin-bottom: 18px; }
.tapbiz-field label { display: block; font-weight: 600; margin-bottom: 7px; font-size: 13.5px; color: #333; }
.tapbiz-field input[type="text"],
.tapbiz-field input[type="tel"],
.tapbiz-field input[type="number"],
.tapbiz-field input[type="file"],
.tapbiz-field textarea,
.tapbiz-field select {
	width: 100%; padding: 12px 13px; font-size: 15.5px;
	border: 1.5px solid #ddd; border-radius: 10px; box-sizing: border-box;
	font-family: inherit; transition: border-color .15s ease;
}
.tapbiz-field input:focus, .tapbiz-field textarea:focus, .tapbiz-field select:focus {
	outline: none; border-color: #16161a;
}
.tapbiz-field textarea { min-height: 96px; resize: vertical; }
.tapbiz-field-hint { font-size: 12.5px; color: #999; margin-top: 5px; }

.tapbiz-source-toggle { display: flex; gap: 10px; margin-bottom: 16px; }
.tapbiz-source-toggle button {
	flex: 1; padding: 12px; border-radius: 10px; border: 1.5px solid #ddd;
	background: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
	transition: all .15s ease;
}
.tapbiz-source-toggle button.is-active { background: #16161a; color: #fff; border-color: #16161a; }

/* ---- Order cards / list ---- */
.tapbiz-order-card {
	position: relative;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 2px 10px rgba(0,0,0,0.04);
	border: 1px solid #ececec;
	padding: 18px 20px;
	margin-bottom: 14px;
	max-width: 800px;
	transition: box-shadow .15s ease;
}

/* ---- Notification bell — <details>/<summary>, no JS required ---- */
.tapbiz-notif-bell { position: relative; }
.tapbiz-notif-summary {
	list-style: none; cursor: pointer; font-size: 20px; position: relative;
	width: 40px; height: 40px; border-radius: 50%; background: #f3f3f4;
	display: flex; align-items: center; justify-content: center;
}
.tapbiz-notif-summary::-webkit-details-marker { display: none; }
.tapbiz-notif-badge {
	position: absolute; top: -2px; right: -2px; background: #d92c2c; color: #fff;
	font-size: 10.5px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 100px;
	display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.tapbiz-notif-panel {
	position: absolute; right: 0; top: 46px; z-index: 50;
	width: 300px; max-width: 88vw; max-height: 380px; overflow-y: auto;
	background: #fff; border: 1px solid #e2e2e2; border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.1); padding: 8px;
}
.tapbiz-notif-empty { padding: 16px; text-align: center; color: #999; font-size: 13px; }
.tapbiz-notif-item {
	display: block; padding: 10px 10px; font-size: 13px; color: #16161a;
	text-decoration: none; border-radius: 8px; border-bottom: 1px solid #f3f3f4;
}
.tapbiz-notif-item:hover { background: #f7f7f8; }
.tapbiz-notif-item:last-of-type { border-bottom: none; }
.tapbiz-notif-clear {
	width: 100%; margin-top: 6px; padding: 8px; background: #f3f3f4; border: none;
	border-radius: 8px; font-size: 12.5px; color: #666; cursor: pointer;
}
.tapbiz-notif-clear:hover { background: #e9e9eb; }

/* Dismiss ("mark as done without sending") button — small, top-right,
   deliberately not styled like a delete/remove action since it doesn't
   remove any data, just marks the task handled. */
.tapbiz-dismiss-btn {
	position: absolute; top: 12px; right: 12px;
	width: 26px; height: 26px; border-radius: 50%;
	background: #f3f3f4; color: #888; border: none;
	font-size: 14px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.tapbiz-dismiss-btn:hover { background: #e5e5e7; color: #16161a; }
.tapbiz-order-card:hover { box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 6px 20px rgba(0,0,0,0.06); }
.tapbiz-order-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tapbiz-order-number { font-weight: 700; font-size: 15.5px; }
.tapbiz-order-client { font-size: 13.5px; color: #555; margin-top: 3px; }
.tapbiz-order-price { font-size: 13.5px; color: #444; margin-top: 8px; }
.tapbiz-order-notes {
	margin-top: 12px; padding: 12px 14px; background: #f7f7f8; border-radius: 10px;
	font-size: 13.5px; color: #555; max-height: 140px; overflow-y: auto; white-space: pre-wrap;
}
.tapbiz-order-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* ---- Status badges ---- */
.tapbiz-badge {
	display: inline-block; padding: 5px 12px; border-radius: 100px;
	font-size: 12px; font-weight: 700; white-space: nowrap;
}
.tapbiz-badge-draft              { background: #f0f0f2; color: #555; }
.tapbiz-badge-confirmed          { background: #e6f1fb; color: #0c447c; }
.tapbiz-badge-cancelled          { background: #fcebeb; color: #791f1f; }
.tapbiz-badge-in_progress        { background: #faeeda; color: #854f0b; }
.tapbiz-badge-ready_for_delivery { background: #eeedfe; color: #3c3489; }
.tapbiz-badge-picked             { background: #e1f5ee; color: #085041; }
.tapbiz-badge-delivered          { background: #eaf3de; color: #27500a; }

/* ---- Batch selection (production/delivery queues) ---- */
.tapbiz-order-card.is-selectable { display: flex; align-items: flex-start; gap: 14px; }
.tapbiz-order-card.is-selectable input[type="checkbox"] { width: 22px; height: 22px; margin-top: 4px; flex-shrink: 0; }

.tapbiz-empty-state {
	text-align: center; padding: 48px 20px; color: #999;
	border: 1.5px dashed #e2e2e2; border-radius: 12px; font-size: 14px;
}

/* ---- Desktop: order cards + form cards can breathe more at width ---- */
@media (min-width: 900px) {
	.tapbiz-order-top { align-items: center; }
	.tapbiz-form-card { padding: 32px 36px; }
}

@media (max-width: 480px) {
	.tapbiz-order-top { flex-direction: column; }
}

/* ---- Image gallery + lightbox ---- */
.tapbiz-gallery-thumb {
	cursor: pointer;
	transition: opacity .15s ease, transform .15s ease;
}
.tapbiz-gallery-thumb:hover { opacity: 0.85; transform: scale(1.02); }

.tapbiz-lightbox-overlay {
	display: none;
	position: fixed; inset: 0; z-index: 9999;
	background: rgba(10,10,12,0.92);
	align-items: center; justify-content: center;
	padding: 24px;
}
.tapbiz-lightbox-overlay.is-open { display: flex; }
.tapbiz-lightbox-inner {
	max-width: 92vw; max-height: 86vh;
	display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.tapbiz-lightbox-inner img {
	max-width: 92vw; max-height: 74vh;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.tapbiz-lightbox-actions { display: flex; gap: 10px; }
.tapbiz-lightbox-close {
	position: fixed; top: 20px; right: 24px;
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(255,255,255,0.12); color: #fff;
	border: none; font-size: 22px; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.tapbiz-lightbox-close:hover { background: rgba(255,255,255,0.2); }

/* v2.6.0 — QR scan analytics */
.tapbiz-scan-stats { margin-top: 6px; }
.tapbiz-scan-stats-row { display: flex; gap: 18px; margin-bottom: 10px; }
.tapbiz-scan-stats-row div { display: flex; flex-direction: column; }
.tapbiz-scan-stats-row strong { font-size: 20px; line-height: 1.1; }
.tapbiz-scan-stats-row span { font-size: 11.5px; color: #777; }
.tapbiz-scan-bars { display: flex; align-items: flex-end; gap: 3px; height: 56px; max-width: 320px; }
.tapbiz-scan-bar-col { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.tapbiz-scan-bar { width: 100%; background: #1a1a1a; border-radius: 3px 3px 0 0; min-height: 2px; }
.tapbiz-scan-bar.is-empty { background: #e4e4e7; }
.tapbiz-scan-axis { display: flex; justify-content: space-between; max-width: 320px; font-size: 10.5px; color: #999; margin-top: 3px; }

/* v2.6.0 — cash handover ledger */
.tapbiz-cash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.tapbiz-cash-grid div { background: #f7f7f8; border-radius: 10px; padding: 12px; text-align: center; display: flex; flex-direction: column; }
.tapbiz-cash-grid strong { font-size: 17px; }
.tapbiz-cash-grid span { font-size: 11.5px; color: #777; margin-top: 2px; }
.tapbiz-cash-grid .is-held { background: #fff4e0; }
.tapbiz-cash-grid .is-held strong { color: #a15c00; }
.tapbiz-handover-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #eee; font-size: 13px; margin: 0; }

/* v2.7.0 — areas, check-ins, location pin, delivery by area */
.tapbiz-area-select { width: 100%; padding: 11px 12px; border: 1.5px solid #ddd; border-radius: 8px; background: #fff; font-size: 14.5px; }
.tapbiz-area-filter { width: 100%; padding: 10px 12px; border: 1.5px solid #ddd; border-radius: 8px; margin-bottom: 6px; font-size: 14px; box-sizing: border-box; }
.tapbiz-newarea { margin-top: 8px; font-size: 13px; }
.tapbiz-newarea summary { cursor: pointer; color: #555; }
.tapbiz-newarea-row { display: flex; gap: 8px; margin: 8px 0 4px; flex-wrap: wrap; }
.tapbiz-newarea-row select, .tapbiz-newarea-row input { flex: 1; min-width: 130px; padding: 9px 10px; border: 1.5px solid #ddd; border-radius: 8px; }
.tapbiz-newarea small { color: #888; }
.tapbiz-geo-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.tapbiz-geo-status { font-size: 12.5px; color: #2d6a3e; min-height: 1em; margin-bottom: 6px; }
.tapbiz-geo-status.is-error { color: #a33; }
.tapbiz-geo-map { display: block; width: 100%; height: 220px; border: 1.5px solid #ddd; border-radius: 10px; }
.tapbiz-geo-map[hidden], .tapbiz-geo-btn[hidden], .tapbiz-geo-clear[hidden], .tapbiz-area-filter[hidden], .tapbiz-print-btn[hidden] { display: none; }
.tapbiz-area-group { margin-bottom: 22px; }
.tapbiz-area-group-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 2px 10px; border-bottom: 2px solid #1a1a1a; margin-bottom: 10px; }
.tapbiz-area-group-head strong { font-size: 15.5px; }
.tapbiz-area-count { font-size: 12px; color: #666; background: #f0f0f2; padding: 3px 9px; border-radius: 100px; margin-left: 8px; }
.tapbiz-wait-badge { font-size: 11.5px; background: #fff4e0; color: #a15c00; padding: 3px 9px; border-radius: 100px; font-weight: 600; }
.tapbiz-area-card { border-left: 4px solid #cfd8dc; }
.tapbiz-area-card.is-today { border-left-color: #2d9d5b; }
.tapbiz-area-card.is-stale { border-left-color: #e0a030; }
.tapbiz-area-search { display: flex; gap: 8px; margin: 8px 0 14px; flex-wrap: wrap; }
.tapbiz-area-search input[type=search] { flex: 1; min-width: 160px; padding: 10px 12px; border: 1.5px solid #ddd; border-radius: 8px; }
@media print {
	.tapbiz-no-print, .tapbiz-dash-header, .tapbiz-print-btn, .tapbiz-order-actions, form, nav, header, footer { display: none !important; }
	.tapbiz-order-card { break-inside: avoid; box-shadow: none; }
}

/* v2.7.1 — notification panel on phones: the bell can sit at the far left
   (wrapped header buttons), so a panel anchored to the bell's right edge
   was cut off the screen. On narrow screens the panel is anchored to the
   page container instead and spans its full width, directly under the bell. */
.tapbiz-notif-item { overflow-wrap: anywhere; line-height: 1.4; }
@media (max-width: 700px) {
	.tapbiz-dash-wrap { position: relative; }
	.tapbiz-notif-bell { position: static; }
	.tapbiz-notif-panel {
		left: 12px; right: 12px; top: auto; width: auto; max-width: none;
		max-height: 60vh; margin-top: 8px; box-sizing: border-box;
	}
}