@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");
/* Color palette from docs */
:root{
	--primary:#1976D2; /* Primary Blue */
	--accent:#43A047;  /* Accent Green */
	--warning:#FFA726; /* Warning Orange */
	--error:#E53935;   /* Error Red */
	--bg:#F5F5F5;      /* Background Gray */
	--card:#FFFFFF;    /* Card White */
	--text:#212121;    /* Text Dark */
	--text2:#757575;   /* Text Light */

	/* Density tokens (auto defaults via media queries below) */
	--container-margin-y:40px;
	--container-pad-x:16px;
	--panel-pad:16px;
	--panel-radius:8px;
	--panel-border:#e5e7eb;

	--gap-1:8px;
	--gap-2:12px;
	--gap-3:16px;

	--control-font:14px;
	--control-pad-y:10px;
	--control-pad-x:12px;
	--control-radius:8px;
	--control-height:38px;

	--btn-pad-y:10px;
	--btn-pad-x:16px;
}

html,body{margin:0;padding:0;font-family:system-ui,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}
/* Global form box model normalization (approved rollout) */
input, select, textarea{box-sizing:border-box;max-width:100%}
.container{max-width:960px;margin:var(--container-margin-y) auto;padding:0 var(--container-pad-x)}
.page-panel{background:var(--card);padding:var(--panel-pad);border-radius:var(--panel-radius);border:1px solid var(--panel-border)}
.stack{display:grid;gap:var(--gap-3)}
.row{display:flex;gap:var(--gap-2);flex-wrap:wrap;align-items:center}

/* Icon buttons */
.icon-btn{
	display:inline-flex;
	align-items:center;
	gap:8px;
	text-decoration:none;
}
.icon-btn .icon{
	width:16px;
	height:16px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
}
.icon-btn .icon svg{width:16px;height:16px;display:block}
.icon-btn i{font-size:16px;line-height:1}
.icon-only{
	min-width:34px;
	justify-content:center;
	padding-left:10px;
	padding-right:10px;
}
.flow-nav{
	display:flex;
	gap:8px;
	flex-wrap:wrap;
	align-items:center;
}

/* Auto density defaults */
@media (max-width:600px){
	:root{
		--container-margin-y:16px;
		--container-pad-x:10px;
		--panel-pad:14px;
		--gap-2:12px;
		--gap-3:14px;
		--control-font:15px;
		--control-pad-y:12px;
		--control-pad-x:12px;
		--control-height:44px;
		--btn-pad-y:12px;
		--btn-pad-x:14px;
	}
}
@media (min-width:601px) and (max-width:900px){
	:root{
		--container-margin-y:24px;
		--container-pad-x:14px;
		--panel-pad:16px;
		--gap-3:16px;
		--control-font:14px;
		--control-pad-y:11px;
		--control-pad-x:12px;
		--control-height:40px;
		--btn-pad-y:10px;
		--btn-pad-x:16px;
	}
}
@media (min-width:901px){
	:root{
		--container-margin-y:20px;
		--container-pad-x:16px;
		--panel-pad:14px;
		--gap-3:14px;
		--control-font:13px;
		--control-pad-y:8px;
		--control-pad-x:10px;
		--control-height:34px;
		--btn-pad-y:8px;
		--btn-pad-x:12px;
	}
}

/* Manual density override (set by JS via localStorage) */
html[data-density="compact"]{
	--container-margin-y:20px;
	--container-pad-x:16px;
	--panel-pad:14px;
	--gap-3:14px;
	--control-font:13px;
	--control-pad-y:8px;
	--control-pad-x:10px;
	--control-height:34px;
	--btn-pad-y:8px;
	--btn-pad-x:12px;
}
html[data-density="comfortable"]{
	--container-margin-y:24px;
	--container-pad-x:14px;
	--panel-pad:16px;
	--gap-3:16px;
	--control-font:14px;
	--control-pad-y:11px;
	--control-pad-x:12px;
	--control-height:40px;
	--btn-pad-y:10px;
	--btn-pad-x:16px;
}
html[data-density="touch"]{
	--container-margin-y:16px;
	--container-pad-x:10px;
	--panel-pad:14px;
	--gap-3:14px;
	--control-font:15px;
	--control-pad-y:12px;
	--control-pad-x:12px;
	--control-height:44px;
	--btn-pad-y:12px;
	--btn-pad-x:14px;
}

/* Keep Referral Letter fixed */
html[data-layout="fixed"]{
	--container-margin-y:40px;
	--container-pad-x:16px;
	--panel-pad:20px;
	--control-font:14px;
	--control-pad-y:10px;
	--control-pad-x:12px;
	--control-height:38px;
	--btn-pad-y:10px;
	--btn-pad-x:16px;
}
html[data-layout="fixed"] #densityControl{display:none}

.topbar{display:flex;justify-content:center;align-items:center;padding:12px 16px;background:var(--primary);color:#fff;position:sticky;top:0;z-index:100}
.logo-wrap{display:flex;align-items:center;margin-right:8px}
.logo{height:28px;width:auto;display:block}
@media (max-width:600px){.logo{height:28px}}
.burger{display:none;background:transparent;border:0;color:#fff;font-size:22px;margin-left:auto;margin-right:8px;cursor:pointer}
.mainnav ul{list-style:none;margin:0;padding:0;display:flex;gap:10px}
.mainnav a{color:#fff;text-decoration:none;padding:6px 8px;border-radius:4px}
.mainnav a.active,.mainnav a:hover{background:rgba(255,255,255,.12)}
.mainnav a.patients{background:#b4c6e7;color:#0b2540}
.mainnav a.patients.active{background:#b4c6e7}
.mainnav a.pretest{background:#ffe599;color:#5c4a00}
.mainnav a.pretest.active{background:#ffe599}
.mainnav a.othertest{background:#edabe5;color:#4a183f}
.mainnav a.othertest.active{background:#edabe5}
.mainnav a.refraction{background:#a8d08d;color:#1a3a1a}
.mainnav a.refraction.active{background:#a8d08d}
.mainnav a.fundus-oct{background:#8f3a72;color:#fff}
.mainnav a.fundus-oct.active{background:#8f3a72}
.mainnav a.slit-lamp{background:#f4b083;color:#5c2a00}
.mainnav a.slit-lamp.active{background:#f4b083}
.mainnav a.lab-order{background:#d5dce4;color:#2a2a2a}
.mainnav a.lab-order.active{background:#d5dce4}
.mainnav a.referral-letter{background:#f6231e;color:#fff}
.mainnav a.referral-letter.active{background:#f6231e}
.mainnav a.contact-lenses{background:#56c8ce;color:#003a3a}
.mainnav a.contact-lenses.active{background:#56c8ce}
.mainnav a.admin{background:#1976D2;color:#fff}
.mainnav a.admin.active{background:#1976D2}
.mainnav a.logout,.authnav a.logout{background:#5b7d56;color:#fff}
.authnav a{color:#fff;text-decoration:none;margin-left:12px}
.topbar a{color:#fff;text-decoration:none;margin-left:16px}
.brand{font-weight:700}
.only-mobile{display:none}

/* Density view menu */
.density-control{position:relative;display:flex;align-items:center}
.density-float{
	position:fixed;
	left:16px;
	bottom:24px;
	z-index:220;
}
.density-float .density-button{
	background:rgba(25,118,210,.95);
	border:1px solid rgba(255,255,255,.2);
	box-shadow:0 8px 18px rgba(0,0,0,.18);
	padding:10px;
	border-radius:12px;
}
.density-float .density-button:hover{filter:brightness(.98)}
.density-float .density-menu{
	left:0;
	right:auto;
	top:auto;
	bottom:calc(100% + 10px);
}
.density-float .density-menu button{justify-content:space-between}
.density-float .density-icon{width:18px;height:18px}
.density-float .density-button .density-label{display:none}
.density-float .density-menu{min-width:240px}
.density-float .density-menu button{padding:10px 12px}
.density-float .density-menu button span:first-child{font-weight:600}
.density-float .density-menu .density-hint{font-weight:500}
.density-float .density-divider{margin:6px 6px}
.density-float{pointer-events:auto}
.density-float:has(.density-menu.open){pointer-events:auto}
.density-float{ }
.density-button{
	display:inline-flex;
	align-items:center;
	gap:8px;
	background:rgba(255,255,255,.12);
	border:1px solid rgba(255,255,255,.22);
	color:#fff;
	border-radius:8px;
	padding:6px 10px;
	cursor:pointer;
	font-size:13px;
}
.density-button:hover{background:rgba(255,255,255,.16)}
.density-button:focus{outline:2px solid #90CAF9;outline-offset:2px}
.density-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px}
.density-menu{
	position:absolute;
	right:0;
	top:calc(100% + 8px);
	background:#fff;
	color:var(--text);
	border:1px solid #e5e7eb;
	border-radius:10px;
	min-width:220px;
	box-shadow:0 10px 28px rgba(0,0,0,.18);
	padding:6px;
	display:none;
	z-index:300;
}
.density-menu.open{display:block}
.density-menu button{
	width:100%;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	background:transparent;
	border:0;
	padding:10px 10px;
	border-radius:8px;
	cursor:pointer;
	font-size:14px;
	color:var(--text);
	text-align:left;
}
.density-menu button:hover{background:#f3f4f6}
.density-menu button[aria-checked="true"]{background:#e8f0fe}
.density-hint{font-size:12px;color:var(--text2)}
.density-divider{height:1px;background:#e5e7eb;margin:6px 4px}

@media (max-width:600px){
	.density-float{left:12px;bottom:18px}
}

@media (max-width:900px){
	.burger{display:block}
	.mainnav{display:none;position:absolute;left:0;right:0;top:56px;background:var(--primary);padding:8px 16px}
	.mainnav.open{display:block}
	.mainnav ul{flex-direction:column;gap:4px;align-items:stretch}
	.mainnav li{display:block;width:100%}
	.mainnav a{display:block;width:100%;text-align:left;padding:8px 12px;margin:0}
	.authnav{display:none}
	.only-mobile{display:list-item}
}

/* Floating Action Button (Start Exam) */
.fab{
	position:fixed;
	right:20px;
	bottom:24px;
	width:52px;
	height:52px;
	border-radius:50%;
	background:#1976D2;
	color:#fff;
	font-size:28px;
	line-height:52px;
	text-align:center;
	text-decoration:none;
	box-shadow:0 6px 14px rgba(0,0,0,.2);
	z-index:200;
}
.fab:hover{filter:brightness(.95)}
.fab:focus{outline:2px solid #90CAF9;outline-offset:2px}

/* Login/Register hero */
.hero{background:var(--primary);color:#fff;padding:40px 16px;text-align:center}
.hero .logo-hero{width:112px;height:112px;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.15);margin:0 auto}
.hero .logo-hero img{width:80px;height:auto}
.hero .title{font-size:20px;font-weight:700;margin-top:12px;line-height:1.35;text-shadow:0 1px 2px rgba(0,0,0,.1);max-width:820px;margin-left:auto;margin-right:auto;padding:0 8px}
@media (max-width:600px){
    .hero .logo-hero{width:96px;height:96px}
    .hero .logo-hero img{width:64px}
    .hero .title{font-size:16px}
}

.auth{max-width:420px;background:var(--card);padding:24px;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.06)}
label{display:block;margin:12px 0 6px;font-size:14px;color:var(--text2)}
input{width:100%;padding:var(--control-pad-y) var(--control-pad-x);border:1px solid #ddd;border-radius:6px;font-size:var(--control-font)}
textarea{font-size:var(--control-font)}
.select, select{width:100%;padding:var(--control-pad-y) var(--control-pad-x);border:1px solid #A5D6A7;border-radius:var(--control-radius);font-size:var(--control-font);background:#fff;height:var(--control-height);line-height:var(--control-height)}
select[multiple]{height:auto;line-height:1.4;padding:8px 10px}
.btn{display:inline-block;padding:var(--btn-pad-y) var(--btn-pad-x);border:none;border-radius:6px;cursor:pointer}
.btn.primary{background:var(--primary);color:#fff}
.btn.primary:hover{filter:brightness(.95)}
.muted{color:var(--text2)}
.alert{padding:10px 12px;border-radius:6px;margin:8px 0}
.alert-error{background:#fdecea;color:var(--error);border:1px solid #facdca}

/* PIN-once notice styling */
.pin-once-notice{
	background:#e3f2fd;
	border:1px solid #bbdefb;
	border-radius:6px;
	padding:12px;
	margin:12px 0;
	color:#1565c0;
}

.pin-once-notice.permanent{
	background:#e8f5e8;
	border:1px solid #c8e6c9;
	color:#2e7d32;
}

/* Password/PIN field with reveal toggle */
.password-field-wrapper{
	position:relative;
	display:flex;
	align-items:center;
}

.password-field-wrapper input{
	padding-right:40px;
}

.toggle-visibility{
	position:absolute;
	right:12px;
	background:none;
	border:none;
	cursor:pointer;
	color:var(--text2);
	font-size:16px;
	padding:0;
	width:20px;
	height:20px;
	display:flex;
	align-items:center;
	justify-content:center;
}

.toggle-visibility:hover{
	color:var(--text);
}

.toggle-visibility:focus{
	outline:2px solid var(--primary);
	outline-offset:2px;
	border-radius:2px;
}

/* Generic dropdown-with-add wrapper (also used without the add button) */
.dropdown-with-add{position:relative;display:flex;align-items:center}
.dropdown-with-add select{flex:1;padding-right:40px;border:1px solid #A5D6A7;border-radius:8px;background:#fff;height:38px;line-height:38px}
.dropdown-with-add .add-option-btn{position:absolute;right:5px;background:#3182ce;color:#fff;border:none;border-radius:3px;width:30px;height:30px;cursor:pointer;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:background-color .3s ease}
.dropdown-with-add .add-option-btn:hover{background:#2c5aa0}
.dropdown-with-add .add-option-btn:focus{outline:2px solid #3182ce;outline-offset:2px}

.section-card{background:var(--card);border-radius:8px;padding:16px;margin:12px 0;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.section-title{font-weight:700;color:#1a365d;margin-bottom:10px}
.prescription-grid{display:grid;grid-template-columns: 1fr 1fr 1fr;gap:12px}
.prescription-field .text-input, .prescription-field select{width:100%}

@media (max-width: 900px){
  .prescription-grid{grid-template-columns: 1fr 1fr}
}

@media (max-width: 600px){
  .container{padding:0 8px}
  .section-card{padding:12px}
  .prescription-grid{grid-template-columns: 1fr}
  .prescription-field > div{flex-wrap:wrap}
  .prescription-field .btn{margin-top:8px}
}

/* EMR History: ghost previous values + Ctrl+H drawer */
input.ghost-value::placeholder,
textarea.ghost-value::placeholder,
select.ghost-value option[value=""]{
  opacity:0.45;
  transition:opacity 0.2s ease;
  color:#94a3b8;
  font-style:italic;
}

input.ghost-value-focused::placeholder,
textarea.ghost-value-focused::placeholder{
  opacity:0;
}

select.ghost-value-focused option[value=""]{
  opacity:0;
}

.history-drawer-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.25);
  z-index:90;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.25s ease;
}

.history-drawer-backdrop.open{
  opacity:1;
  pointer-events:auto;
}

#historyDrawer,
.history-drawer{
  position:fixed;
  right:0;
  top:0;
  height:100vh;
  width:380px;
  max-width:100vw;
  background:rgba(255,255,255,0.98);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transform:translateX(100%);
  transition:transform 0.25s ease;
  box-shadow:-4px 0 12px rgba(0,0,0,0.15);
  z-index:100;
  display:flex;
  flex-direction:column;
}

#historyDrawer.open,
.history-drawer.open{
  transform:translateX(0);
}

body.history-drawer-open{
  overflow:hidden;
}

.history-drawer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  border-bottom:1px solid #e2e8f0;
  background:#f8fafc;
}

.history-drawer-title{
  margin:0;
  font-size:18px;
  font-weight:700;
  color:#1e293b;
}

.history-drawer-close{
  border:none;
  background:transparent;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  color:#64748b;
  padding:0 4px;
}

.history-drawer-close:hover{
  color:#1e293b;
}

.history-drawer-body{
  flex:1;
  overflow-y:auto;
  padding:14px 16px 24px;
}

.history-drawer-hint{
  font-size:12px;
  color:#94a3b8;
  margin:0 0 12px;
}

.history-drawer-hint kbd{
  background:#f1f5f9;
  border:1px solid #cbd5e1;
  border-radius:4px;
  padding:1px 5px;
  font-size:11px;
}

.history-drawer-loading,
.history-drawer-empty{
  color:#64748b;
  font-size:14px;
}

.history-drawer-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.history-drawer-timeline{
  list-style:none;
  margin:0;
  padding:4px 0 0 0;
  position:relative;
}

.history-drawer-timeline::before{
  content:'';
  position:absolute;
  left:7px;
  top:8px;
  bottom:8px;
  width:2px;
  background:#cbd5e1;
  border-radius:1px;
}

.history-drawer-timeline-item{
  position:relative;
  margin:0 0 10px 0;
  padding:0 0 0 22px;
}

.history-drawer-timeline-item:last-child{
  margin-bottom:0;
}

.history-drawer-timeline-details{
  border:1px solid #e2e8f0;
  border-radius:10px;
  background:#fff;
  overflow:hidden;
}

.history-drawer-timeline-item.is-latest .history-drawer-timeline-details{
  border-color:#86efac;
  background:#f8fffb;
}

.history-drawer-timeline-summary{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 12px 10px 8px;
  cursor:pointer;
  list-style:none;
  position:relative;
}

.history-drawer-timeline-summary::-webkit-details-marker{
  display:none;
}

.history-drawer-timeline-summary::after{
  content:'';
  position:absolute;
  right:12px;
  top:16px;
  width:8px;
  height:8px;
  border-right:2px solid #64748b;
  border-bottom:2px solid #64748b;
  transform:rotate(45deg);
  transition:transform 0.2s ease;
}

.history-drawer-timeline-details[open] > .history-drawer-timeline-summary::after{
  transform:rotate(-135deg);
  top:18px;
}

.history-drawer-timeline-dot{
  position:absolute;
  left:-22px;
  top:14px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#94a3b8;
  border:2px solid #fff;
  box-shadow:0 0 0 1px #cbd5e1;
  z-index:1;
}

.history-drawer-timeline-item.is-latest .history-drawer-timeline-dot{
  background:#16a34a;
  box-shadow:0 0 0 1px #86efac;
}

.history-drawer-timeline-heading{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 8px;
  padding-right:18px;
}

.history-drawer-timeline-date{
  font-weight:700;
  color:#1e293b;
  font-size:14px;
}

.history-drawer-timeline-test{
  font-size:11px;
  font-weight:600;
  color:#64748b;
  background:#f1f5f9;
  border-radius:999px;
  padding:2px 8px;
}

.history-drawer-timeline-preview{
  font-size:12px;
  color:#475569;
  line-height:1.35;
  padding-right:18px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.history-drawer-timeline-details[open] .history-drawer-timeline-preview{
  white-space:normal;
}

.history-drawer-timeline-body{
  padding:0 12px 12px;
  border-top:1px solid #e2e8f0;
}

.history-drawer-section{
  margin-top:10px;
}

.history-drawer-section:first-child{
  margin-top:8px;
}

.history-drawer-section-title{
  font-size:12px;
  font-weight:700;
  color:#334155;
  margin-bottom:6px;
}

.history-drawer-iop{
  font-size:13px;
  color:#334155;
}

.history-drawer-card{
  border:1px solid #e2e8f0;
  border-radius:10px;
  padding:12px;
  background:#fff;
}

.history-drawer-card-latest{
  border-color:#86efac;
  background:#f0fdf4;
}

.history-drawer-card-date{
  font-weight:700;
  color:#1e293b;
  font-size:14px;
}

.history-drawer-card-meta{
  font-size:12px;
  color:#64748b;
  margin-top:2px;
}

.history-drawer-card-summary{
  font-size:13px;
  color:#334155;
  margin-top:8px;
  line-height:1.4;
}

.history-drawer-table{
  width:100%;
  border-collapse:collapse;
  margin-top:4px;
  font-size:12px;
}

.history-drawer-table th,
.history-drawer-table td{
  border:1px solid #e2e8f0;
  padding:6px 8px;
  text-align:center;
}

.history-drawer-table th{
  background:#f8fafc;
  font-weight:600;
  color:#475569;
}

.history-drawer-table td:first-child{
  text-align:left;
  background:#f8fafc;
}

@media (max-width:600px){
  #historyDrawer,
  .history-drawer{
    width:100vw;
  }
}