:root{
	--bg: #f4f7fb;
	--card: #ffffff;
	--text: #0f172a;
	--muted: #6b7280;
	--accent: #0b66ff;
	--accent-2: #06b6d4;
	--border: #e6eef8;
	--surface-1: #f8fafc;
	--success: #16a34a;
	--danger: #ef4444;
  --bg-grad-start: #f7fbff;
  --bg-grad-end: var(--bg);
}

/* Dark theme variables (applied when .theme-dark is present on the root element) */
.theme-dark {
  --bg: #0b1220;
  --card: #0f1724;
	--text: #e6eef8;
	--muted: #9aa4b2;
	--accent: #4ea8ff;
  --accent-2: #06b6d4;
  --border: #122032;
  --surface-1: #071022;
  --success: #34d399;
  --danger: #fb7185;
	--bg-grad-start: #071022;
	--bg-grad-end: #0b1220;
}

*{box-sizing:border-box}
html,body{height:100%}
	body{
	margin:0;
	font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	background: linear-gradient(180deg, var(--bg-grad-start) 0%, var(--bg-grad-end) 100%);
	color: var(--text);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

.container{
	max-width: 1100px;
	margin: 28px auto;
	padding: 0 18px;
}

.header{
	margin-bottom: 14px;
}
.header h1{margin:0;font-weight:700;font-size:1.45rem}
.muted{color:var(--muted);margin-top:6px}

.card{
	background:var(--card);
	color:var(--text);
	padding:22px;
	border-radius:14px;
	box-shadow: 0 8px 24px rgba(2,6,23,0.08);
	border: 1px solid var(--border);
}

label{display:block;margin:10px 0 6px 0;font-weight:600;color:var(--text)}
/* adapt label color for dark theme */
.theme-dark label{color:var(--muted)}
input[type="text"], input[type="number"], textarea, select{
	width:100%;
	padding:12px 14px;
	border:1px solid var(--border);
	border-radius:10px;
	background: var(--card) !important;
	outline: none;
	font-size:0.98rem;
	color: var(--text) !important;
	-webkit-text-fill-color: var(--text) !important;
	font-weight: 500;
}
input:focus, textarea:focus, select:focus{box-shadow:0 6px 18px rgba(14,142,255,0.08);border-color:var(--accent)}
textarea{min-height:100px}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:760px){.grid-2{grid-template-columns:1fr}}

.rows{margin:10px 0}
.row-item{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.row-item .small{flex:1}
.row-item input.small{padding:10px}
.row-item .remove{background:var(--card);color:var(--danger);border:1px solid rgba(239,68,68,0.12);padding:8px 10px;border-radius:8px;cursor:pointer}
.row-item .remove:hover{background:rgba(239,68,68,0.04)}

.row-summary{margin-top:10px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.row-summary .value{font-size:1.08rem;font-weight:800;color:var(--accent)}

h2{font-size:1.02rem;margin:14px 0 8px 0;color:var(--text)}
.section-total{display:flex;justify-content:space-between;align-items:center;background:var(--surface-1);padding:12px;border-radius:10px;margin-top:8px;border:1px solid var(--border)}

.totals-visual{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.total-pill{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:160px;padding:14px 18px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));border:1px solid var(--border)}
.total-pill .label{font-size:0.85rem;color:var(--text);margin-bottom:6px}
/* Keep labels muted in dark theme for visual balance */
.theme-dark .total-pill .label{ color: var(--muted) }
.total-pill .amount{font-weight:800;font-size:1.4rem;color:var(--accent)}

.calc-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0}

.form-actions{display:flex;gap:12px;align-items:center;margin-top:20px}
.form-actions button{background:var(--accent);color:#fff;border:none;padding:12px 18px;border-radius:10px;cursor:pointer;font-weight:700}
.form-actions .link{background:transparent;color:var(--accent);padding:10px 12px;border-radius:10px;text-decoration:none;border:1px solid transparent}
.form-actions button:hover{box-shadow:0 12px 30px rgba(11,102,255,0.12)}

.search-wrap{position:relative}
.suggestions{position:absolute;left:0;right:0;top:100%;background:var(--card);border:1px solid var(--border);max-height:260px;overflow:auto;z-index:40;border-radius:10px;margin-top:8px;padding:6px 0}
.suggestions li{list-style:none;padding:10px 12px;cursor:pointer;color:var(--text)}
.suggestions li:hover{background:rgba(0,0,0,0.06)}
/* active suggestion (keyboard) */
.suggestions li.active{background:rgba(11,102,255,0.1);font-weight:700}

/* Hidden helper */
.hidden{display:none !important}

/* Larger, clearer search input for pharmacy selector */
.search-wrap.large{max-width:760px}
.search-wrap.large input{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--border);font-size:1.05rem;background:var(--card);box-shadow:0 8px 20px rgba(2,6,23,0.06)}
.search-wrap.large input::placeholder{color:var(--muted)}

/* Ensure suggestion list stands out in dark mode */
.theme-dark .suggestions{background:var(--card);border:1px solid rgba(255,255,255,0.04)}
.theme-dark .search-wrap.large input{background:var(--card);color:var(--text)}

.signature-wrap{display:flex;gap:12px;align-items:flex-start}

canvas{border-radius:10px;background:var(--card);border:1px solid var(--border);width:100%;height:120px}
.sig-actions{display:flex;flex-direction:column;gap:8px}
.sig-actions button{background:var(--card);color:var(--text);border-radius:8px;padding:10px;border:1px solid var(--border);cursor:pointer}
.sig-actions button:hover{background:rgba(255,255,255,0.02)}

/* small theme toggle button styles */
/* Unified header button appearance for exact parity */
.btn-secondary, .theme-toggle-btn{
	background: transparent;
	border: 1px solid var(--accent);
	color: var(--accent);
	padding: 6px 14px;
	border-radius: 8px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px; /* explicit pixel size for identical rendering */
	font-weight: 400;
	line-height: 36px; /* match height to ensure identical vertical metrics */
	min-height: 36px;
	height: 36px;
	box-sizing: border-box;
	vertical-align: middle;
	text-decoration: none;
	font-family: inherit;
	letter-spacing: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.btn-secondary:hover, .theme-toggle-btn:hover{ background: rgba(11,102,255,0.06); }

/* ensure canvas borders adapt */

.theme-dark canvas{border:1px solid rgba(255,255,255,0.04);background:transparent}

/* make inputs stand out in dark theme with subtle inner shadow */
.theme-dark input[type="text"], .theme-dark input[type="search"], .theme-dark input[type="number"], .theme-dark textarea, .theme-dark select {
	background: #0e1622 !important;
	border: 1px solid rgba(255,255,255,0.06) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

/* stronger contrast for typed text in dark mode */
.theme-dark input, .theme-dark textarea, .theme-dark select {
	color: var(--text) !important;
	-webkit-text-fill-color: var(--text) !important;
}

/* Target specific inputs that use inline styles or date widgets to ensure readable text */
.theme-dark #pharmacy_search,
.theme-dark #filter-pharmacy,
.theme-dark #filter-from,
.theme-dark #filter-to,
.theme-dark #new-code,
.theme-dark #new-name,
.theme-dark input[type="search"],
.theme-dark input[type="text"],
.theme-dark input[type="number"] {
	color: var(--text) !important;
	-webkit-text-fill-color: var(--text) !important;
	caret-color: var(--accent) !important;
}

/* Force white input fields with black text for key search/filter fields so typed text is always black */
#pharmacy_search,
#filter-pharmacy,
#new-code,
#new-name {
	background: #ffffff !important;
	color: #0b1220 !important;
	-webkit-text-fill-color: #0b1220 !important;
	caret-color: #0b1220 !important;
	border: 1px solid #d6e6ff !important;
}

/* Also ensure date filters keep readable black text on white background */
#filter-from, #filter-to {
	background: #ffffff !important;
	color: #0b1220 !important;
	-webkit-text-fill-color: #0b1220 !important;
	caret-color: #0b1220 !important;
	border: 1px solid #d6e6ff !important;
}

/* Make date inputs and their parts show black text and visible picker in dark mode */
.theme-dark #filter-from,
.theme-dark #filter-to {
	background: #ffffff !important;
	color: #0b1220 !important;
	-webkit-text-fill-color: #0b1220 !important;
}
.theme-dark #filter-from::-webkit-datetime-edit,
.theme-dark #filter-from::-webkit-datetime-edit-text,
.theme-dark #filter-from::-webkit-datetime-edit-fields-wrapper,
.theme-dark #filter-to::-webkit-datetime-edit,
.theme-dark #filter-to::-webkit-datetime-edit-text,
.theme-dark #filter-to::-webkit-datetime-edit-fields-wrapper {
	color: #0b1220 !important;
	-webkit-text-fill-color: #0b1220 !important;
}
.theme-dark #filter-from::-webkit-calendar-picker-indicator,
.theme-dark #filter-to::-webkit-calendar-picker-indicator {
	filter: invert(0) !important; /* ensure icon contrast */
}
/* Firefox date field internal text */
.theme-dark input[type="date"]::-moz-focus-inner,
.theme-dark input[type="date"]::-moz-datetime-edit {
	color: #0b1220 !important;
}

/* Aggressive override for pharmacy search and similar fields to guarantee black text */
.theme-dark #pharmacy_search,
.theme-dark #pharmacy_search:focus,
.theme-dark #filter-pharmacy,
.theme-dark #new-code,
.theme-dark #new-name {
	color: #0b1220 !important;
	-webkit-text-fill-color: #0b1220 !important;
	opacity: 1 !important;
	filter: none !important;
	mix-blend-mode: normal !important;
	text-shadow: none !important;
	font-weight: 600 !important;
}

/* ensure placeholder still readable */
.theme-dark #pharmacy_search::placeholder,
.theme-dark #filter-pharmacy::placeholder,
.theme-dark #new-code::placeholder,
.theme-dark #new-name::placeholder {
	color: rgba(0,0,0,0.45) !important;
}

/* vendor-specific filled text color */
.theme-dark #pharmacy_search::-webkit-text-fill-color { color: #0b1220 !important; }

/* Chrome/Edge date/time parts */
.theme-dark input[type="date"]::-webkit-datetime-edit,
.theme-dark input[type="date"]::-webkit-datetime-edit-text,
.theme-dark input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.theme-dark input[type="datetime-local"]::-webkit-datetime-edit,
.theme-dark input[type="datetime-local"]::-webkit-datetime-edit-text,
.theme-dark input[type="time"]::-webkit-datetime-edit {
	color: var(--text) !important;
	-webkit-text-fill-color: var(--text) !important;
}

/* Firefox date placeholder & text */
.theme-dark input[type="date"], .theme-dark input[type="datetime-local"], .theme-dark input[type="time"] {
	color: var(--text) !important;
}

/* make placeholder slightly stronger in dark mode */
.theme-dark input::placeholder, .theme-dark textarea::placeholder { color: rgba(255,255,255,0.6) !important }

/* nav adjustments for admin: make active item use accent and adapt in dark */
.nav li{color:var(--text)}
.nav li.active{background:linear-gradient(90deg, rgba(14,102,255,0.12), rgba(255,255,255,0.02));font-weight:700;color:var(--accent)}
.theme-dark .nav li.active{background:linear-gradient(90deg, rgba(78,168,255,0.06), rgba(255,255,255,0.01));color:var(--accent)}

/* small helpers */
.muted small{color:var(--muted)}
.suggestions li, input, textarea, select { color: var(--text); }
/* Force high-contrast input text and caret so typed text is always readable */
input, textarea, select, input[type="search"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="number"] {
	color: var(--text) !important;
	-webkit-text-fill-color: var(--text) !important;
	caret-color: var(--accent) !important;
}

/* Ensure admin login inputs and admin panel controls are high-contrast in dark mode */
.theme-dark #admin-panel input, .theme-dark #admin-panel textarea, .theme-dark #admin-panel select,
#admin-panel input, #admin-panel textarea, #admin-panel select,
.theme-dark #login-user, .theme-dark #login-pass,
#login-user, #login-pass {
	color: var(--text) !important;
	-webkit-text-fill-color: var(--text) !important;
	caret-color: var(--accent) !important;
	opacity: 1 !important;
}

/* Force placeholder for admin login to be visible but not too light */
.theme-dark #login-user::placeholder, .theme-dark #login-pass::placeholder { color: rgba(230,238,248,0.6) !important }

/* Very high-specificity strong overrides to prevent any blending/opacity making input text appear gray */
.theme-dark #admin-panel input, .theme-dark #admin-panel textarea, .theme-dark #admin-panel select,
.theme-dark #admin-panel input[type="text"], .theme-dark #admin-panel input[type="password"],
.theme-dark #login-user, .theme-dark #login-pass {
	color: var(--text) !important;
	-webkit-text-fill-color: var(--text) !important;
	opacity: 1 !important;
	filter: none !important;
	mix-blend-mode: normal !important;
	text-shadow: none !important;
}

/* even more aggressive: apply to value rendering pseudo-elements used by some engines */
.theme-dark input::-webkit-text-fill-color, .theme-dark textarea::-webkit-text-fill-color { color: var(--text) !important }
.theme-dark input:focus, .theme-dark textarea:focus, .theme-dark select:focus { color: var(--text) !important; -webkit-text-fill-color: var(--text) !important }
.theme-dark input, .theme-dark textarea, .theme-dark select { background: var(--card) !important }

/* For Chromium autofill states */
.theme-dark input:-webkit-autofill, .theme-dark textarea:-webkit-autofill { -webkit-text-fill-color: var(--text) !important; background-color: var(--card) !important }

/* Final fallback: super-specific rules to override any browser blending or extensions */
html .theme-dark body input, html .theme-dark body textarea, html .theme-dark body select,
html.theme-dark body input, html.theme-dark body textarea, html.theme-dark body select {
	color: var(--text) !important;
	-webkit-text-fill-color: var(--text) !important;
	opacity: 1 !important;
	filter: none !important;
	mix-blend-mode: normal !important;
}
/* Placeholder styling: slightly muted but readable */
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.95 }
/* Chromium autofill fix: ensure text remains readable when autofilled */
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
	-webkit-text-fill-color: var(--text) !important;
	background-color: transparent !important;
}
.link{display:inline-block}

/* totals alignment helper for the main totals area */
.totals-row{display:flex;gap:16px;align-items:stretch;flex-wrap:wrap}
.totals-row .total-pill{flex:1}

/* Secondary button style used for sign-up and secondary actions */
.btn-secondary{
	background: transparent;
	border: 1px solid var(--accent);
	color: var(--accent);
	padding: 8px 12px;
	border-radius: 8px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.98rem;
	font-weight: 400;
	min-height:36px;
}
.btn-secondary:hover{ background: rgba(11,102,255,0.06); }
.theme-dark .btn-secondary{ border-color: var(--accent); color: var(--accent); }

/* ensure secondary buttons don't show underlines when anchors */
.btn-secondary{ text-decoration: none; }
.btn-secondary:hover, .btn-secondary:focus { text-decoration: none; }

/* current-user display (small) */
#current-user{ font-size:0.9rem; color:var(--muted); padding:6px 10px; }

/* Primary button for sign-in */
.btn-primary{ background:var(--accent); color:#fff; padding:8px 12px; border-radius:8px; border: none; cursor: pointer; }
.btn-primary:hover{ box-shadow:0 10px 24px rgba(11,102,255,0.12) }

/* generic wide input used in login UI */
.wide-input{ width:100%; padding:8px; border-radius:8px; border:1px solid var(--border); box-sizing:border-box }

/* Ensure login inputs, filters and pharmacy inputs always show readable text and don't get hidden by autofill styles */
#login-user, #login-pass, #filter-pharmacy, #pharmacy_search, #new-code, #new-name, #filter-from, #filter-to {
	background: #ffffff !important;
	color: #0b1220 !important;
	-webkit-text-fill-color: #0b1220 !important;
	caret-color: #0b1220 !important;
	border: 1px solid #d6e6ff !important;
}

/* Ensure the full name input on the submission form stays readable (dark + autofill) */
#full_name, input[name="full_name"] {
	background: #ffffff !important;
	color: #0b1220 !important;
	-webkit-text-fill-color: #0b1220 !important;
	caret-color: #0b1220 !important;
	border: 1px solid #d6e6ff !important;
}

/* Autofill overrides for full name */
#full_name:-webkit-autofill, input[name="full_name"]:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
	-webkit-text-fill-color: #0b1220 !important;
}

/* Strong autofill overrides for Chrome/Chromium */
#login-user:-webkit-autofill, #login-pass:-webkit-autofill, #filter-pharmacy:-webkit-autofill, #pharmacy_search:-webkit-autofill, #new-code:-webkit-autofill, #new-name:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
	-webkit-text-fill-color: #0b1220 !important;
}

/* Also ensure dark theme doesn't make these fields unreadable */
.theme-dark #login-user, .theme-dark #login-pass, .theme-dark #filter-pharmacy, .theme-dark #pharmacy_search, .theme-dark #new-code, .theme-dark #new-name, .theme-dark #filter-from, .theme-dark #filter-to {
	background: #ffffff !important;
	color: #0b1220 !important;
	-webkit-text-fill-color: #0b1220 !important;
}

/* Submission confirmation panel */
#submit-confirm{box-shadow:0 14px 40px rgba(2,6,23,0.35);border-radius:12px;padding:14px;border:1px solid var(--border);background:var(--card)}
#submit-confirm pre{white-space:pre-wrap;max-height:240px;overflow:auto;background:transparent;border-radius:6px;padding:8px;font-size:0.9rem}

/* Autofill/readability improvements: force the browser to render autofilled inputs with the card background and readable text */
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px var(--card) inset !important;
	box-shadow: 0 0 0px 1000px var(--card) inset !important;
	-webkit-text-fill-color: var(--text) !important;
}
.theme-dark input:-webkit-autofill, .theme-dark textarea:-webkit-autofill, .theme-dark select:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px var(--card) inset !important;
	box-shadow: 0 0 0px 1000px var(--card) inset !important;
	-webkit-text-fill-color: var(--text) !important;
}

/* Centering and modern auth card styles when in auth-mode */
.auth-mode .admin-shell{ flex-direction:column; align-items:center; gap:0 }
.auth-mode .nav{ display:none !important }
.auth-mode .panel{ max-width:520px; width:100%; }
.auth-mode main.container{ min-height:72vh; display:flex; align-items:center; justify-content:center }
.auth-mode #admin-panel form{ background: var(--card); padding:20px; border-radius:12px; box-shadow:0 12px 40px rgba(2,6,23,0.25); border:1px solid var(--border) }
.auth-mode #admin-panel h2{ text-align:left; margin-bottom:12px }
.auth-mode #admin-panel .small-muted{ margin-top:10px }

/* Placeholder color overrides for affected inputs to ensure readability */
#login-user::placeholder, #login-pass::placeholder, #filter-pharmacy::placeholder, #pharmacy_search::placeholder, #new-code::placeholder, #new-name::placeholder {
	color: rgba(11,17,34,0.45) !important;
}
.theme-dark #login-user::placeholder, .theme-dark #login-pass::placeholder, .theme-dark #filter-pharmacy::placeholder, .theme-dark #pharmacy_search::placeholder, .theme-dark #new-code::placeholder, .theme-dark #new-name::placeholder {
	color: rgba(11,17,34,0.45) !important;
}

/* Strongest final overrides for inputs used in Reports and Manage Pharmacies to guarantee readability */
html .theme-dark input, html .theme-dark input[type="text"], html .theme-dark input[type="email"], html .theme-dark input[type="password"], html .theme-dark input[type="search"], html .theme-dark input[type="number"], html .theme-dark textarea, html .theme-dark select {
	background: #ffffff !important;
	color: #0b1220 !important;
	-webkit-text-fill-color: #0b1220 !important;
	caret-color: #0b1220 !important;
	opacity: 1 !important;
	filter: none !important;
	mix-blend-mode: normal !important;
	text-shadow: none !important;
	border-color: #d6e6ff !important;
}

/* Also ensure inputs inside admin panels, reports and tools area are readable */
.theme-dark #reports-list input, .theme-dark #reports-list textarea, .theme-dark #tools-area input, .theme-dark #tools-area textarea,
.theme-dark #outstanding-list input, .theme-dark #outstanding-list textarea {
	background: #ffffff !important;
	color: #0b1220 !important;
	-webkit-text-fill-color: #0b1220 !important;
}

/* Placeholder contrast for those fields */
.theme-dark input::placeholder, .theme-dark textarea::placeholder { color: rgba(11,17,34,0.45) !important; }

/* Autofill safeguard: ensure autofilled text remains dark on white background */
html .theme-dark input:-webkit-autofill, html .theme-dark textarea:-webkit-autofill, html .theme-dark select:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
	-webkit-text-fill-color: #0b1220 !important;
}

/* Extra-specific overrides for the reports filter input to fix placeholder/contrast issues */
html.theme-dark body #filter-pharmacy, html .theme-dark body #filter-pharmacy, .theme-dark #filter-pharmacy {
	background: #ffffff !important;
	color: #0b1220 !important;
	-webkit-text-fill-color: #0b1220 !important;
	caret-color: #0b1220 !important;
	border: 1px solid #d6e6ff !important;
	opacity: 1 !important;
	filter: none !important;
	mix-blend-mode: normal !important;
}

html.theme-dark body #filter-pharmacy::placeholder, html .theme-dark body #filter-pharmacy::placeholder, .theme-dark #filter-pharmacy::placeholder {
	color: rgba(11,17,34,0.55) !important;
	opacity: 1 !important;
}

/* Autofill (Chrome) specific for this field */
html.theme-dark body #filter-pharmacy:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
	-webkit-text-fill-color: #0b1220 !important;
}