@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap");*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }

/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Noto Sans Thai,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:IBM Plex Mono,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}*{box-sizing:border-box}body,html{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}body{margin:0;min-width:320px;font-family:Noto Sans Thai,sans-serif;--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity,1));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,input,select,textarea{font:inherit}a[href],button:not(:disabled){cursor:pointer}button:disabled{cursor:not-allowed}.field-label{margin-bottom:.5rem;display:block;font-size:.875rem;line-height:1.25rem;font-weight:600;--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.field{width:100%;border-radius:.75rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));padding:.75rem .875rem;font-size:1rem;line-height:1.5rem;--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity,1));outline:2px solid transparent;outline-offset:2px;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.field::-moz-placeholder{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.field::placeholder{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.field:focus{--tw-border-opacity:1;border-color:rgb(20 168 154/var(--tw-border-opacity,1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(214 247 243/var(--tw-ring-opacity,1))}.user-nav-button{display:inline-flex;min-height:42px;align-items:center;justify-content:center;gap:.5rem;border-radius:.75rem;border-width:1px;border-color:transparent;padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;font-weight:600;--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.user-nav-button:hover{--tw-border-opacity:1;border-color:rgb(175 236 228/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(239 252 251/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(17 91 85/var(--tw-text-opacity,1));--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.user-nav-button:focus-visible{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(214 247 243/var(--tw-ring-opacity,1))}.user-nav-button:active{--tw-bg-opacity:1;background-color:rgb(214 247 243/var(--tw-bg-opacity,1))}.user-nav-button:disabled{opacity:.5}.user-nav-logout:hover{--tw-border-opacity:1;border-color:rgb(254 205 211/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 241 242/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(190 18 60/var(--tw-text-opacity,1))}.user-nav-logout:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(255 228 230/var(--tw-ring-opacity,1))}.static{position:static}.absolute{position:absolute}.mx-auto{margin-left:auto;margin-right:auto}.my-4{margin-top:1rem;margin-bottom:1rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-7{margin-bottom:1.75rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-8{margin-top:2rem}.mt-9{margin-top:2.25rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-6{height:1.5rem}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-6{width:1.5rem}.w-full{width:100%}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.flex-1{flex:1 1 0%}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-slate-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(241 245 249/var(--tw-divide-opacity,1))}.overflow-hidden{overflow:hidden}.break-words{overflow-wrap:break-word}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-hospital-100{--tw-border-opacity:1;border-color:rgb(214 247 243/var(--tw-border-opacity,1))}.bg-hospital-50{--tw-bg-opacity:1;background-color:rgb(239 252 251/var(--tw-bg-opacity,1))}.bg-hospital-600{--tw-bg-opacity:1;background-color:rgb(13 137 127/var(--tw-bg-opacity,1))}.bg-hospital-700{--tw-bg-opacity:1;background-color:rgb(15 111 104/var(--tw-bg-opacity,1))}.bg-rose-50{--tw-bg-opacity:1;background-color:rgb(255 241 242/var(--tw-bg-opacity,1))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.fill-current{fill:currentColor}.p-1{padding:.25rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-6{padding-bottom:1.5rem}.pt-5{padding-top:1.25rem}.text-center{text-align:center}.font-sans{font-family:Noto Sans Thai,sans-serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.leading-6{line-height:1.5rem}.leading-7{line-height:1.75rem}.leading-relaxed{line-height:1.625}.text-amber-800{--tw-text-opacity:1;color:rgb(146 64 14/var(--tw-text-opacity,1))}.text-hospital-700{--tw-text-opacity:1;color:rgb(15 111 104/var(--tw-text-opacity,1))}.text-hospital-800{--tw-text-opacity:1;color:rgb(17 91 85/var(--tw-text-opacity,1))}.text-rose-700{--tw-text-opacity:1;color:rgb(190 18 60/var(--tw-text-opacity,1))}.text-rose-800{--tw-text-opacity:1;color:rgb(159 18 57/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity,1))}.text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.shadow-card{--tw-shadow:0 10px 35px rgba(15,118,110,.08);--tw-shadow-colored:0 10px 35px var(--tw-shadow-color)}.shadow-card,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.auth-fade-in{animation:auth-fade-in .26s ease-out both}.auth-fade-out{animation:auth-fade-out .16s ease-in both;pointer-events:none}@keyframes auth-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes auth-fade-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.auth-fade-in,.auth-fade-out{animation:none}}.detail-fade-in,.page-fade-in{animation:simple-fade-in .22s ease-out both}.detail-fade-out{animation:auth-fade-out .16s ease-in both;pointer-events:none}.detail-panel-in{animation:detail-panel-in .24s ease-out both}.detail-panel-out{animation:detail-panel-out .16s ease-in both}@keyframes simple-fade-in{0%{opacity:0}to{opacity:1}}@keyframes detail-panel-in{0%{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}@keyframes detail-panel-out{0%{opacity:1;transform:none}to{opacity:0;transform:translateX(8px)}}@media (prefers-reduced-motion:reduce){.detail-fade-in,.detail-fade-out,.detail-panel-in,.detail-panel-out,.page-fade-in{animation:none}}.first\:pt-0:first-child{padding-top:0}.hover\:bg-hospital-700:hover{--tw-bg-opacity:1;background-color:rgb(15 111 104/var(--tw-bg-opacity,1))}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:p-9{padding:2.25rem}.sm\:py-12{padding-top:3rem;padding-bottom:3rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}}@media (min-width:1024px){.lg\:grid-cols-\[0\.9fr_1\.1fr\]{grid-template-columns:.9fr 1.1fr}.lg\:border-b-0{border-bottom-width:0}.lg\:border-r{border-right-width:1px}.lg\:p-12{padding:3rem}}


/* Modern Minimal UI Design System - Thamai Hospital Auth */
:root {
  --hospital-primary: #0d9488;
  --hospital-hover: #0f766e;
  --hospital-active: #115e59;
  --hospital-light: #f0fdfa;
  --hospital-border: #ccfbf1;
  --hospital-text: #115e59;
  --hospital-ring: rgba(13, 148, 136, 0.18);
  --soft-shadow: 0 4px 20px -2px rgba(13, 148, 136, 0.07), 0 2px 8px -2px rgba(0, 0, 0, 0.04);
  --hover-shadow: 0 12px 30px -4px rgba(13, 148, 136, 0.12), 0 4px 12px -2px rgba(0, 0, 0, 0.04);
}

.shadow-card {
  box-shadow: var(--soft-shadow) !important;
}

.ui-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  box-shadow: var(--soft-shadow);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease;
}

.ui-card-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--hover-shadow);
  border-color: #cbd5e1;
}

.field {
  width: 100%;
  border-radius: 0.875rem;
  border: 1px solid #cbd5e1;
  background-color: #ffffff;
  padding: 0.6875rem 1rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #0f172a;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

select.field,
.select-custom {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230d9488' stroke-width='2.2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 1rem) center !important;
  background-size: 1.125rem !important;
  padding-right: 2.75rem !important;
  border-radius: 0.875rem !important;
  border: 1px solid #cbd5e1 !important;
  cursor: pointer !important;
}

select.field:hover,
.select-custom:hover {
  border-color: #0d9488 !important;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.1) !important;
}

select.field:focus,
.select-custom:focus {
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.18) !important;
  outline: none !important;
}

/* Custom Floating Dropdown Menu Component */
.dropdown-wrapper {
  position: relative;
  width: 100%;
}

.dropdown-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 0.875rem;
  padding: 0.6875rem 1rem;
  font-size: 0.875rem;
  color: #0f172a;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.dropdown-trigger:hover {
  border-color: #0d9488;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.1);
}

.dropdown-trigger.is-open {
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.18);
}

.dropdown-chevron {
  width: 1.125rem;
  height: 1.125rem;
  color: #0d9488;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.dropdown-trigger.is-open .dropdown-chevron {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 12px 32px -4px rgba(13, 148, 136, 0.15), 0 4px 12px -2px rgba(0, 0, 0, 0.05);
  padding: 0.375rem;
  max-height: 260px;
  overflow-y: auto;
  display: none;
}

.dropdown-menu.is-open {
  display: block;
  animation: dropdown-pop 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes dropdown-pop {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  border-radius: 0.625rem;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  background: transparent;
  text-align: left;
}

.dropdown-item:hover {
  background-color: #f0fdfa;
  color: #0d9488;
}

.dropdown-item.is-selected {
  background-color: #f0fdfa;
  color: #0f766e;
  font-weight: 600;
}

.field:hover {
  border-color: #94a3b8;
}

.field:focus,
select.field:focus,
.select-custom:focus {
  border-color: var(--hospital-primary);
  box-shadow: 0 0 0 3px var(--hospital-ring);
  outline: none;
}

.field-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 0.4375rem;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--hospital-primary);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.625rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  box-shadow: 0 1px 3px 0 rgba(13, 148, 136, 0.2);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  text-decoration: none;
}

.btn-primary:hover {
  background-color: var(--hospital-hover);
  box-shadow: 0 4px 12px 0 rgba(13, 148, 136, 0.25);
  transform: translateY(-1px);
}

.btn-primary:active {
  background-color: var(--hospital-active);
  transform: translateY(0);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--hospital-light);
  color: var(--hospital-text);
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.75rem;
  border: 1px solid var(--hospital-border);
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}

.btn-secondary:hover {
  background-color: #e6f7f5;
  border-color: #99f6e4;
  color: #0f766e;
}

.btn-danger-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: #fff1f2;
  color: #be123c;
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.75rem;
  border: 1px solid #fecdd3;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-danger-soft:hover {
  background-color: #ffe4e6;
  border-color: #fda4af;
}

.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

.pill-approved {
  background-color: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.pill-pending {
  background-color: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.pill-rejected {
  background-color: #fff1f2;
  color: #be123c;
  border: 1px solid #fecdd3;
}

.pill-suspended {
  background-color: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.pill-primary {
  background-color: var(--hospital-light);
  color: var(--hospital-text);
  border: 1px solid var(--hospital-border);
}

.user-avatar-badge {
  width: 48px;
  height: 48px;
  border-radius: 0.875rem;
  background: var(--hospital-light);
  color: var(--hospital-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  border: 1px solid var(--hospital-border);
  flex-shrink: 0;
}

.card-meta-box {
  background-color: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 0.875rem;
  padding: 0.875rem 1rem;
  font-size: 0.8125rem;
  color: #475569;
}

.card-subform {
  background-color: #fafbfc;
  border: 1px solid #f1f5f9;
  border-radius: 0.875rem;
  padding: 1rem;
}

.grid-cards-2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1.5rem;
}

.grid-cards-3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

@media (max-width: 640px) {
  .grid-cards-2, .grid-cards-3 {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}


/* Direct Bulletproof Hospital Colors & Page Centering */
.bg-hospital-50 {
  background-color: #f0fdfa !important;
}
.bg-hospital-100 {
  background-color: #ccfbf1 !important;
}
.bg-hospital-600 {
  background-color: #0d9488 !important;
}
.bg-hospital-700 {
  background-color: #0f766e !important;
}
.text-hospital-600 {
  color: #0d9488 !important;
}
.text-hospital-700 {
  color: #0f766e !important;
}
.text-hospital-800 {
  color: #115e59 !important;
}
.border-hospital-100 {
  border-color: #ccfbf1 !important;
}
.border-hospital-200 {
  border-color: #99f6e4 !important;
}

body {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background-color: #f8fafc !important;
  margin: 0 !important;
}

header {
  flex-shrink: 0 !important;
}

main {
  flex: 1 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

footer {
  flex-shrink: 0 !important;
  margin-top: auto !important;
}

/* Opacity class fallbacks without Tailwind JIT */
.bg-hospital-50\/60,
.bg-hospital-50\/50,
.bg-hospital-50\/80,
.bg-hospital-50\/90 {
  background-color: #f0fdfa !important;
}
.bg-hospital-50\/20 {
  background-color: #f7fdfc !important;
}
.bg-rose-50\/90 {
  background-color: #fff1f2 !important;
}
.border-rose-200\/80 {
  border-color: #fecdd3 !important;
}
.border-slate-200\/60 {
  border-color: #e2e8f0 !important;
}
.bg-white\/95 {
  background-color: #ffffff !important;
}

/* Screen reader / accessible native select hide */
.sr-only-select {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  pointer-events: none !important;
}

.dropdown-trigger.is-disabled,
.dropdown-trigger:disabled {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* ========================================================
   Tailwind Static Class Fallbacks for Standalone XAMPP Server
   ======================================================== */

/* Layout & Grid utilities */
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (min-width: 640px) {
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .sm\:gap-5 { gap: 1.25rem !important; }
  .sm\:p-5 { padding: 1.25rem !important; }
  .sm\:p-7 { padding: 1.75rem !important; }
}
.min-w-\[240px\] { min-width: 240px !important; }
.min-h-\[44px\] { min-height: 44px !important; }
.min-w-0 { min-width: 0px !important; }
.flex-shrink-0, .shrink-0 { flex-shrink: 0 !important; }
.inline-flex { display: inline-flex !important; }
.inline { display: inline !important; }
.items-start { align-items: flex-start !important; }
.justify-center { justify-content: center !important; }

/* SVG Icon sizes */
.h-3 { height: 0.75rem !important; }
.w-3 { width: 0.75rem !important; }
.h-3\.5 { height: 0.875rem !important; }
.w-3\.5 { width: 0.875rem !important; }
.h-4 { height: 1rem !important; }
.w-4 { width: 1rem !important; }
.h-5 { height: 1.25rem !important; }
.w-5 { width: 1.25rem !important; }

/* Borders & Rounded & Backdrops */
.border-dashed { border-style: dashed !important; }
.border-slate-100 { border-color: #f1f5f9 !important; }
.border-slate-300 { border-color: #cbd5e1 !important; }
.rounded-full { border-radius: 9999px !important; }
.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* Spacing (Margin & Padding) */
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-8 { margin-bottom: 2rem !important; }
.mb-10 { margin-bottom: 2.5rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.mt-0\.5 { margin-top: 0.125rem !important; }
.mt-1\.5 { margin-top: 0.375rem !important; }
.mt-5 { margin-top: 1.25rem !important; }
.mt-6 { margin-top: 1.5rem !important; }
.mt-12 { margin-top: 3rem !important; }
.mt-auto { margin-top: auto !important; }
.my-8 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
.gap-2\.5 { gap: 0.625rem !important; }
.gap-3\.5 { gap: 0.875rem !important; }
.p-1\.5 { padding: 0.375rem !important; }
.p-3 { padding: 0.75rem !important; }
.p-8 { padding: 2rem !important; }
.p-10 { padding: 2.5rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 0.75rem !important; }
.pt-4 { padding-top: 1rem !important; }
.px-3\.5 { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }
.px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-3\.5 { padding-top: 0.875rem !important; padding-bottom: 0.875rem !important; }
.last\:pb-0:last-child { padding-bottom: 0 !important; }

/* Space-y utilities */
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem !important; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem !important; }
.space-y-3\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.875rem !important; }

/* Typography & Colors */
.font-medium { font-weight: 500 !important; }
.font-mono { font-family: IBM Plex Mono, monospace !important; }
.leading-tight { line-height: 1.25 !important; }
.text-base { font-size: 1rem !important; line-height: 1.5rem !important; }
.text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
.text-slate-400 { color: #94a3b8 !important; }
.text-slate-700 { color: #334155 !important; }
.tracking-tight { letter-spacing: -0.025em !important; }

/* Interactions */
.cursor-pointer { cursor: pointer !important; }
.select-none { user-select: none !important; }
.transition { transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important; }
.hover\:opacity-90:hover { opacity: 0.9 !important; }
.hover\:text-hospital-800:hover { color: #115e59 !important; }
.focus\:ring-hospital-100:focus { box-shadow: 0 0 0 3px #ccfbf1 !important; outline: none !important; }


/* ========================================================
   Auth page: smooth transitions & refined form
   ======================================================== */
:root {
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Card entrance */
main > section.grid {
  animation: auth-card-in 0.6s var(--ease-out-soft) both;
}
@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* Segmented tabs with sliding indicator */
.auth-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0.375rem;
  border-radius: 1rem;
  background: #f1f5f9;
  isolation: isolate;
}
.auth-tabs-indicator {
  position: absolute;
  z-index: -1;
  top: 0.375rem;
  bottom: 0.375rem;
  left: 0.375rem;
  width: calc(50% - 0.375rem);
  border-radius: 0.75rem;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px -2px rgba(13, 148, 136, 0.14);
}
.auth-tabs.is-ready .auth-tabs-indicator {
  transition: transform 0.38s var(--ease-out-soft);
}
.auth-tabs[data-active="register"] .auth-tabs-indicator {
  transform: translateX(100%);
}
.auth-tab {
  padding: 0.625rem 0.75rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: #64748b;
  border-radius: 0.75rem;
  transition: color 0.25s ease;
}
.auth-tab:hover { color: #1e293b; }
.auth-tab.is-active { color: #115e59; }
.auth-tab:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; }

/* Panel fade in / out */
.auth-panel {
  animation: auth-panel-in 0.45s var(--ease-out-soft) both;
}
.auth-panel.is-leaving {
  animation: auth-panel-out 0.24s ease-in both;
  pointer-events: none;
}
@keyframes auth-panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes auth-panel-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-6px); }
}

/* Staggered field reveal */
.auth-form > * {
  animation: auth-field-in 0.5s var(--ease-out-soft) both;
}
.auth-form > *:nth-child(2) { animation-delay: 0.04s; }
.auth-form > *:nth-child(3) { animation-delay: 0.08s; }
.auth-form > *:nth-child(4) { animation-delay: 0.12s; }
.auth-form > *:nth-child(5) { animation-delay: 0.16s; }
.auth-form > *:nth-child(6) { animation-delay: 0.20s; }
.auth-form > *:nth-child(7) { animation-delay: 0.24s; }
.auth-form > *:nth-child(8) { animation-delay: 0.28s; }
.auth-form > *:nth-child(9) { animation-delay: 0.32s; }
.auth-form > *:nth-child(n+10) { animation-delay: 0.36s; }
@keyframes auth-field-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Input with icon */
.field-wrap {
  position: relative;
}
.field-icon {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  width: 1.125rem;
  height: 1.125rem;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
  transition: color 0.2s ease, transform 0.2s ease;
}
.field-icon svg { width: 100%; height: 100%; }
.field.has-icon { padding-left: 2.75rem !important; }
.field.has-action { padding-right: 2.9rem !important; }
.field-wrap .field {
  min-height: 3rem;
  background-color: #f8fafc;
  border-color: #e2e8f0;
  transition: border-color 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease;
}
.field-wrap .field:hover {
  border-color: #cbd5e1;
  background-color: #ffffff;
}
.field-wrap .field:focus {
  background-color: #ffffff;
  border-color: #0d9488;
  box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.14);
  outline: none;
}
.field-wrap:focus-within .field-icon {
  color: #0d9488;
  transform: translateY(-50%) scale(1.06);
}
.field-label {
  transition: color 0.2s ease;
}
.block:focus-within > .field-label {
  color: #0f766e;
}

/* Password eye toggle */
.field-eye {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 0.625rem;
  color: #94a3b8;
  background: transparent;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.field-eye:hover { color: #0d9488; background: #f0fdfa; }
.field-eye:focus-visible { outline: 2px solid #0d9488; outline-offset: 1px; }
.field-eye svg { width: 1.125rem; height: 1.125rem; }
.field-eye .eye-off { display: none; }
.field[type="text"] ~ .field-eye .eye-on { display: none; }
.field[type="text"] ~ .field-eye .eye-off { display: block; }

/* Toggle switch (show password) */
.auth-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: #475569;
  cursor: pointer;
  user-select: none;
}
.auth-switch-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.auth-switch-track {
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: #cbd5e1;
  transition: background-color 0.25s ease;
  flex-shrink: 0;
}
.auth-switch-track::after {
  content: "";
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
  transition: transform 0.3s var(--ease-out-soft);
}
.auth-switch-input:checked + .auth-switch-track { background: #0d9488; }
.auth-switch-input:checked + .auth-switch-track::after { transform: translateX(1rem); }
.auth-switch-input:focus-visible + .auth-switch-track { box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.25); }

/* Submit button */
.auth-submit {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  margin-top: 0.5rem;
  border-radius: 0.875rem !important;
  box-shadow: 0 6px 16px -6px rgba(13, 148, 136, 0.55);
  transition: transform 0.2s var(--ease-out-soft), box-shadow 0.25s ease, background-color 0.2s ease !important;
}
.auth-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(13, 148, 136, 0.6);
}
.auth-submit:active { transform: translateY(0) scale(0.99); }
.auth-submit-arrow {
  width: 1rem;
  height: 1rem;
  transition: transform 0.25s var(--ease-out-soft);
}
.auth-submit:hover .auth-submit-arrow { transform: translateX(3px); }
.auth-submit-spinner {
  display: none;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  animation: auth-spin 0.7s linear infinite;
}
.auth-submit.is-loading { pointer-events: none; opacity: 0.92; }
.auth-submit.is-loading .auth-submit-arrow { display: none; }
.auth-submit.is-loading .auth-submit-spinner { display: inline-block; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* Custom dropdowns inside auth form match inputs */
.auth-form .dropdown-trigger {
  min-height: 3rem;
  background-color: #f8fafc;
  border-color: #e2e8f0;
}
.auth-form .dropdown-trigger:hover { background-color: #ffffff; }

@media (prefers-reduced-motion: reduce) {
  main > section.grid,
  .auth-panel,
  .auth-panel.is-leaving,
  .auth-form > * { animation: none !important; }
  .auth-tabs.is-ready .auth-tabs-indicator,
  .auth-switch-track::after,
  .auth-submit,
  .auth-submit-arrow { transition: none !important; }
}