/* Telangana Brahmana Subsidy Stores - Rice Booking
   Saffron / cream / gold theme. No dark backgrounds anywhere. */

#tbss-app, #tbss-app * { box-sizing: border-box; }
#tbss-app {
	font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	background: #FFFDF7;
	color: #3a2c1a;
	font-size: 16px;
	/* Wide + neat by default (sidebar + content layout, Admin/Overview tables, etc).
	   The phone-narrow look is applied ONLY to the New Application popup itself
	   (.tbss-modal has its own fixed max-width below) - the rest of the page,
	   including Admin Login / Overview, stays wide and uncramped on every screen. */
	max-width: 1100px;
	margin: 0 auto;
	padding: 14px;
	width: 100%;
}

/* ---------- Sidebar + main content layout ---------- */
.tbss-layout {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}
.tbss-sidebar {
	flex: 0 0 220px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.tbss-sidebar .tbss-btn-top { width: 100%; text-align: center; }
.tbss-sidebar-divider {
	border-top: 2px dashed #E6D3AC;
	margin: 4px 0;
}
.tbss-main {
	flex: 1 1 auto;
	min-width: 0;
}
.tbss-main-topbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-bottom: 10px;
}
.tbss-main-topbar .tbss-lang-toggle { margin-left: auto; }

@media (max-width: 700px) {
	/* Sidebar collapses above the main content on phones. #tbss-app itself keeps
	   using the full screen width here (no artificial narrow cap) so Admin Login /
	   Overview tables stay roomy - only the New Application popup (.tbss-modal)
	   is deliberately phone-narrow. */
	.tbss-layout { flex-direction: column; }
	.tbss-sidebar { flex: none; width: 100%; }
}

/* ---------- Top bar ---------- */
.tbss-topbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
}
.tbss-btn {
	cursor: pointer;
	border: none;
	border-radius: 8px;
	padding: 14px 20px;
	font-size: 16px;
	font-weight: 700;
	transition: transform .1s ease;
}
.tbss-btn:active { transform: scale(0.97); }
.tbss-btn-top {
	position: relative;
	background: linear-gradient(180deg, #E9A23B, #C97A1E);
	color: #fff;
	box-shadow: 0 2px 4px rgba(166,83,26,0.3);
}
.tbss-btn-admin { background: linear-gradient(180deg, #A6531A, #7c3d10); }

/* Nav buttons that have nothing to do yet (no records for that stage, or the
   delivery date hasn't arrived) sit dimmed and non-clickable - only Book Now
   stays active by default; the rest light up on their own once there's
   something to act on. */
.tbss-btn-top.tbss-btn-inactive {
	background: #D8CBAE; color: #8a7a58; box-shadow: none;
	cursor: not-allowed; pointer-events: none;
}
/* Red round blinking badge showing how many records are waiting on a button. */
.tbss-nav-badge {
	position: absolute; top: -8px; right: -8px;
	min-width: 22px; height: 22px; padding: 0 4px; line-height: 22px;
	border-radius: 999px; background: #D32F2F; color: #fff;
	font-size: 12px; font-weight: 900; text-align: center;
	box-shadow: 0 0 0 2px #FFFDF7;
	animation: tbss-badge-blink 1.1s ease-in-out infinite;
}
@keyframes tbss-badge-blink {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.5; transform: scale(1.18); }
}
.tbss-lang-toggle { margin-left: auto; display: flex; gap: 4px; }
.tbss-lang-pill {
	border: 1px solid #C97A1E;
	background: #FFF6E8;
	color: #A6531A;
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}
.tbss-lang-pill.active { background: #C97A1E; color: #fff; }

/* ---------- Store banner ---------- */
.tbss-store-banner {
	text-align: center;
	margin: 6px 0 18px;
	padding: 14px 10px;
	background: #FFF6E8;
	border: 2px solid #E9A23B;
	border-radius: 10px;
}
.tbss-blink {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: .5px;
	color: #A6531A;
	animation: tbss-blink 1.3s infinite;
}
.tbss-store-address {
	font-size: 14px;
	font-weight: 700;
	color: #7c3d10;
	margin-top: 4px;
}
.tbss-stage-title {
	font-size: 16px;
	font-weight: 800;
	color: #C97A1E;
	margin-top: 6px;
	text-transform: uppercase;
	letter-spacing: .5px;
}
.tbss-window-notice {
	text-align: center;
	font-size: 14px;
	font-weight: 800;
	color: #7c3d10;
	background: #FFE9B0;
	border: 2px solid #E9A23B;
	border-radius: 8px;
	padding: 8px 10px;
	margin: -8px 0 16px;
}
.tbss-window-notice:empty { display: none; }
@keyframes tbss-blink {
	0%, 45% { opacity: 1; }
	50%, 95% { opacity: 0.25; }
	100% { opacity: 1; }
}

/* ---------- Cards / generic ---------- */
.tbss-card {
	background: #FFFFFF;
	border: 1px solid #F0DCB8;
	border-radius: 12px;
	padding: 18px;
	margin-bottom: 16px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.tbss-card h3 { margin-top: 0; color: #A6531A; }
.tbss-pin-card { max-width: 360px; margin: 40px auto; text-align: center; }

.tbss-field { margin-bottom: 14px; }
.tbss-field label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #7c3d10;
	margin-bottom: 5px;
}
.tbss-input, .tbss-select {
	width: 100%;
	padding: 12px;
	font-size: 16px;
	font-weight: 700;
	color: #3a2c1a;
	border: 2px solid #E6D3AC;
	border-radius: 8px;
	background: #fff;
}
.tbss-input:focus, .tbss-select:focus {
	outline: none;
	background: #FFF9C4;
	border-color: #C97A1E;
}
.tbss-pin-input { text-align: center; letter-spacing: 6px; font-size: 22px; }

.tbss-error { color: #B3261E; font-weight: 700; margin-top: 8px; font-size: 13px; min-height: 18px; }
.tbss-success { color: #2E7D32; font-weight: 700; margin-top: 8px; font-size: 13px; }

/* ---------- Aadhaar boxes ----------
   Stacked vertically (one 4-digit box per line) rather than 3 side-by-side -
   on a narrow phone screen 3 boxes side by side get squeezed so small that
   digits get clipped/hard to see while typing, which is how digits get missed.
   Full width per box + auto-jump to the box below fixes that. */
.tbss-aadhar-row { display: flex; flex-direction: column; gap: 8px; }
.tbss-aadhar-box {
	width: 100%;
	text-align: center;
	letter-spacing: 8px;
	font-size: 22px;
}
.tbss-aadhar-confirm {
	text-align: center;
	font-size: 22px;
	font-weight: 800;
	color: #A6531A;
	background: #FFF6E8;
	border: 2px dashed #E9A23B;
	border-radius: 8px;
	padding: 10px;
	margin-top: 8px;
}

/* ---------- Qty selector ---------- */
.tbss-qty-row { display: flex; gap: 8px; }
.tbss-qty-btn {
	flex: 1;
	padding: 14px 0;
	font-size: 18px;
	font-weight: 800;
	border: 2px solid #E6D3AC;
	border-radius: 8px;
	background: #FFF6E8;
	color: #3a2c1a;
	cursor: pointer;
}
.tbss-qty-btn.active { background: #C97A1E; color: #fff; border-color: #A6531A; }

.tbss-total-box {
	background: #FFF6E8;
	border: 2px solid #E9A23B;
	border-radius: 8px;
	padding: 14px;
	text-align: center;
	font-size: 20px;
	font-weight: 800;
	color: #A6531A;
	margin-top: 10px;
}

/* ---------- Buttons ---------- */
.tbss-btn-primary { background: linear-gradient(180deg, #E9A23B, #C97A1E); color: #fff; width: 100%; padding: 14px; font-size: 17px; }
.tbss-btn-secondary { background: #FFF6E8; color: #A6531A; border: 2px solid #C97A1E; }
.tbss-btn-green { background: #2E7D32; color: #fff; }
.tbss-btn-orange { background: #C97A1E; color: #fff; }
.tbss-btn-red { background: #B3261E; color: #fff; }
.tbss-btn-small { padding: 6px 12px; font-size: 13px; border-radius: 6px; }

/* ---------- Popup / modal ---------- */
.tbss-overlay {
	position: fixed; inset: 0; z-index: 99999;
	background: rgba(58,44,26,0.45);
	display: flex; align-items: center; justify-content: center;
	padding: 16px;
}
.tbss-modal {
	position: relative;
	background: #FFFDF7;
	border-radius: 14px;
	max-width: 420px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	padding: 22px;
	box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
.tbss-modal h3 { color: #A6531A; margin-top: 0; text-align: center; padding-right: 28px; }
/* Every popup gets this "x" close button so the user is never stuck in one. */
.tbss-modal-close {
	position: absolute; top: 10px; right: 12px;
	width: 32px; height: 32px; line-height: 28px;
	background: #FFF6E8; border: 2px solid #E6D3AC; border-radius: 50%;
	color: #A6531A; font-size: 20px; font-weight: 800; text-align: center;
	cursor: pointer; padding: 0;
}
.tbss-modal-close:active { transform: scale(0.94); }
.tbss-bill-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed #E6D3AC; font-weight: 700; }
.tbss-bill-row span:first-child { color: #7c3d10; }
.tbss-pay-numbers { background: #FFF6E8; border: 2px solid #E9A23B; border-radius: 8px; padding: 12px; margin: 12px 0; text-align: center; font-weight: 800; color: #A6531A; }

/* Payment method chooser inside the "Payment Received" popup (Overview + Payment Checkup). */
.tbss-pay-method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.tbss-pay-method-btn {
	border: 2px solid #E9A23B;
	background: #FFF6E8;
	color: #A6531A;
	font-weight: 800;
	font-size: 14px;
	border-radius: 8px;
	padding: 12px 8px;
	cursor: pointer;
}
.tbss-pay-method-btn.selected { background: #C97A1E; color: #fff; border-color: #A6531A; }

/* Big, unmissable code display in the "Code Allotted" popup after Verification approves. */
.tbss-code-allotted-box {
	font-size: 30px; font-weight: 900; letter-spacing: 1px; text-align: center;
	background: #E4F5E7; border: 3px solid #2E7D32; color: #1b5e20;
	border-radius: 10px; padding: 16px; margin: 4px 0 16px;
}

/* ---------- Admin panel ---------- */
.tbss-admin-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tbss-tab-btn {
	padding: 10px 16px; font-size: 14px; font-weight: 700;
	border: 2px solid #E6D3AC; border-radius: 8px; background: #FFF6E8; color: #7c3d10; cursor: pointer;
}
.tbss-tab-btn.active { background: #C97A1E; color: #fff; border-color: #A6531A; }
.tbss-logout { margin-left: auto; }

.tbss-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.tbss-stat-box {
	flex: 1; min-width: 100px;
	background: #FFF6E8; border: 2px solid #E9A23B; border-radius: 10px;
	padding: 10px; text-align: center;
}
.tbss-stat-box .num { font-size: 22px; font-weight: 800; color: #A6531A; }
.tbss-stat-box .label { font-size: 11px; font-weight: 700; color: #7c3d10; }

.tbss-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; }
.tbss-filter-bar select, .tbss-filter-bar input { padding: 8px; border: 2px solid #E6D3AC; border-radius: 6px; font-weight: 700; }

/* Tables never get squeezed to fit a narrow screen - they keep their natural
   readable column widths and this wrapper scrolls sideways instead ("HORIZONTAL
   VIEW"). This is what makes the Admin Overview / Entry / Verification / Payment /
   Delivery tables stay neat instead of wrapping into a messy multi-line mess. */
.tbss-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #F0DCB8; border-radius: 8px; }
table.tbss-table { width: max-content; min-width: 100%; border-collapse: collapse; background: #fff; font-size: 13px; }
table.tbss-table th, table.tbss-table td {
	border: 1px solid #F0DCB8; padding: 9px 12px; text-align: left;
	white-space: nowrap; font-size: 14px;
}
table.tbss-table th { background: #FFF6E8; color: #7c3d10; position: sticky; top: 0; }
table.tbss-table tr.tbss-row-delivered { opacity: 0.55; }
.tbss-table-hint { font-size: 12px; font-weight: 700; color: #A6531A; margin: 4px 0 8px; }
.tbss-badge { padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; display: inline-block; }
.tbss-badge-pending { background: #FFE9B0; color: #7c3d10; }
.tbss-badge-entry_confirmed { background: #D6E4FF; color: #1e3a8a; }
.tbss-badge-verified { background: #E0D6FF; color: #4c1d95; }
.tbss-badge-paid { background: #C8F0D0; color: #14532d; }
.tbss-badge-delivered { background: #B9E6B9; color: #14532d; }
.tbss-badge-rejected { background: #FFD1CC; color: #7f1d1d; }

.tbss-code-box { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 14px 0; }
.tbss-code-prefix { background: #F0DCB8; color: #7c3d10; font-weight: 800; padding: 12px 14px; border-radius: 8px 0 0 8px; font-size: 18px; }
.tbss-code-input { width: 110px; font-size: 22px; text-align: center; letter-spacing: 4px; border-radius: 0 8px 8px 0; }

.tbss-stock-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.tbss-stock-box { flex: 1; min-width: 120px; background: #FFF6E8; border: 2px solid #E9A23B; border-radius: 10px; padding: 12px; text-align: center; }
.tbss-stock-box .num { font-size: 24px; font-weight: 800; color: #A6531A; }

/* ---------- PIN lock overlay (delivery section) ---------- */
.tbss-lock-overlay {
	position: fixed; inset: 0; z-index: 99998;
	background: #FFFDF7;
	display: flex; align-items: center; justify-content: center;
}
.tbss-relock-banner {
	position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
	background: #B3261E; color: #fff; font-weight: 800;
	padding: 10px 18px; border-radius: 999px; z-index: 100000;
	box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* ---------- Demo button ---------- */
.tbss-demo-btn {
	background: #FFF6E8; color: #A6531A; border: 2px dashed #C97A1E;
	border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; margin-bottom: 10px;
}
.tbss-demo-cursor {
	position: fixed; width: 22px; height: 22px; border-radius: 50%;
	background: rgba(201,122,30,0.55); border: 2px solid #A6531A;
	z-index: 100001; pointer-events: none; transition: all .5s ease;
}
.tbss-demo-caption {
	position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
	background: #A6531A; color: #fff; padding: 8px 16px; border-radius: 8px;
	font-weight: 700; z-index: 100001; max-width: 90%; text-align: center;
}

/* ---------- Public List cards ---------- */
.tbss-public-card {
	background: #fff; border: 2px solid #F0DCB8; border-radius: 12px;
	padding: 14px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.tbss-public-name { font-size: 18px; font-weight: 800; color: #A6531A; margin-bottom: 6px; }
.tbss-public-row { display: flex; justify-content: space-between; padding: 4px 0; font-weight: 700; font-size: 15px; border-bottom: 1px dashed #F0DCB8; }
.tbss-public-row span:first-child { color: #7c3d10; }
.tbss-public-row:last-child { border-bottom: none; }

.tbss-checkbox { width: 22px; height: 22px; }
.tbss-hint { font-size: 12px; color: #7c3d10; margin-top: 4px; }
.tbss-closed-box { text-align:center; padding: 30px; font-weight: 700; color: #A6531A; background:#FFF6E8; border:2px solid #E9A23B; border-radius:10px; }

@media (max-width: 600px) {
	.tbss-lang-toggle { margin-left: 0; width: 100%; justify-content: center; }
	.tbss-btn-top { flex: 1; }
}