/* =====================================================================
   FILE PATH: app/static/mapcare/entity-workstation.css
   PURPOSE  : MAP CARE - Entity/Hospital Workstation Stylesheet (SCR-179 to SCR-182, SCR-050, SCR-007)
   TOKENS   : Primary: #0e2b5d, Accent: #0083ff, Surface: #edf8ff, Radius: 22px
   RULES    : 100% Zero-Emoji Parity, Dual Form-Factor Harmony
   ===================================================================== */

:root {
  --mc-primary: #0e2b5d;
  --mc-primary-dark: #071938;
  --mc-accent: #0083ff;
  --mc-accent-light: #e0f2fe;
  --mc-surface: #edf8ff;
  --mc-surface-card: #ffffff;
  --mc-bg: #f8fafc;
  --mc-text-main: #0f172a;
  --mc-text-muted: #64748b;
  --mc-border: #e2e8f0;
  --mc-radius-card: 22px;
  --mc-radius-pill: 9999px;
  --mc-radius-btn: 14px;
  --mc-shadow-sm: 0 1px 3px rgba(14, 43, 93, 0.05);
  --mc-shadow-md: 0 4px 16px rgba(14, 43, 93, 0.08);
  --mc-shadow-lg: 0 12px 32px rgba(14, 43, 93, 0.12);
  --mc-success: #10b981;
  --mc-warning: #f59e0b;
  --mc-danger: #ef4444;
}

/* =====================================================================
   UNIVERSAL MOBILE WORKSTATION GUARD (SCR-293)
   Stationary screens (SCR-179 to SCR-182) enforce >=1440px / desktop view
   ===================================================================== */
.mc-workstation-guard {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--mc-primary-dark);
  color: #ffffff;
  padding: 24px;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

@media (max-width: 1023px) {
  .mc-workstation-body .mc-workstation-guard:not(.mc-guard-dismissed) {
    display: flex;
  }
}

.mc-guard-box {
  background: #ffffff;
  color: var(--mc-text-main);
  max-width: 440px;
  width: 100%;
  border-radius: var(--mc-radius-card);
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.mc-guard-icon {
  width: 64px;
  height: 64px;
  background: var(--mc-surface);
  color: var(--mc-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.mc-guard-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mc-accent);
  display: block;
  margin-bottom: 6px;
}

.mc-guard-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--mc-primary);
  margin: 0 0 10px;
}

.mc-guard-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--mc-text-muted);
  margin: 0 0 20px;
}

.mc-guard-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mc-btn-guard {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--mc-radius-btn);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
}

.mc-btn-guard-primary {
  background: var(--mc-primary);
  color: #ffffff;
}

.mc-btn-guard-secondary {
  background: var(--mc-surface);
  color: var(--mc-primary);
}

/* =====================================================================
   WORKSTATION DESKTOP LAYOUT (SCR-179 to SCR-182)
   ===================================================================== */
.mc-workstation-body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--mc-bg);
  color: var(--mc-text-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.mc-workstation-header {
  height: 72px;
  background: #ffffff;
  border-bottom: 1px solid var(--mc-border);
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mc-header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mc-brand-logo {
  width: 38px;
  height: 38px;
  background: var(--mc-primary);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.mc-brand-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--mc-primary);
  margin: 0;
  letter-spacing: -0.02em;
}

.mc-brand-subtitle {
  font-size: 11px;
  color: var(--mc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.mc-header-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mc-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--mc-radius-pill);
  font-size: 12px;
  font-weight: 700;
  background: var(--mc-surface);
  color: var(--mc-primary);
}

.mc-terminal-badge {
  font-size: 11px;
  font-weight: 800;
  color: var(--mc-text-muted);
  background: #f1f5f9;
  padding: 6px 10px;
  border-radius: 6px;
  font-family: monospace;
}

/* Authentication Container */
.mc-auth-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.mc-auth-split-wrapper {
  max-width: 1100px;
  width: 100%;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: #ffffff;
  border-radius: var(--mc-radius-card);
  box-shadow: var(--mc-shadow-lg);
  border: 1px solid var(--mc-border);
  overflow: hidden;
}

/* Left Hero Panel */
.mc-auth-hero-panel {
  background: linear-gradient(145deg, var(--mc-primary) 0%, var(--mc-primary-dark) 100%);
  color: #ffffff;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mc-hero-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #38bdf8;
  display: block;
  margin-bottom: 10px;
}

.mc-hero-heading {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 16px;
}

.mc-hero-lead {
  font-size: 14px;
  line-height: 1.6;
  color: #cbd5e1;
  margin: 0 0 32px;
}

.mc-hero-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mc-feature-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.mc-feature-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  flex-shrink: 0;
}

.mc-feature-title {
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
  margin: 0 0 2px;
}

.mc-feature-desc {
  font-size: 12px;
  color: #94a3b8;
  margin: 0;
  line-height: 1.4;
}

.mc-hero-footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #94a3b8;
}

/* Right Interactive Auth Panel */
.mc-auth-form-panel {
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mc-auth-nav-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 12px;
}

.mc-auth-tab {
  flex: 1;
  text-align: center;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--mc-text-muted);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.mc-auth-tab.active {
  background: #ffffff;
  color: var(--mc-primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.mc-card-header-block {
  margin-bottom: 24px;
}

.mc-card-header-block h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--mc-primary);
  margin: 0 0 6px;
}

.mc-card-header-block p {
  font-size: 13px;
  color: var(--mc-text-muted);
  margin: 0;
}

/* QR Card Presentation (SCR-179) */
.mc-qr-display-box {
  background: var(--mc-surface);
  border: 2px dashed var(--mc-accent);
  border-radius: 18px;
  padding: 24px;
  text-align: center;
  margin-bottom: 24px;
}

.mc-qr-frame {
  width: 200px;
  height: 200px;
  background: #ffffff;
  border-radius: 14px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--mc-shadow-md);
  position: relative;
}

.mc-qr-svg-mock {
  width: 170px;
  height: 170px;
}

.mc-qr-countdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--mc-primary);
  background: #ffffff;
  padding: 4px 12px;
  border-radius: var(--mc-radius-pill);
}

.mc-qr-status-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  color: var(--mc-text-muted);
  font-weight: 600;
}

.mc-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mc-accent);
  animation: mcPulse 1.5s infinite;
}

@keyframes mcPulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

/* OTP Segmented Inputs (SCR-180) */
.mc-otp-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 20px 0;
}

.mc-otp-input {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  color: var(--mc-primary);
  border: 2px solid var(--mc-border);
  border-radius: 12px;
  background: #ffffff;
  outline: none;
  transition: all 0.2s ease;
}

.mc-otp-input:focus {
  border-color: var(--mc-accent);
  box-shadow: 0 0 0 3px rgba(0, 131, 255, 0.15);
}

/* Forms & Inputs (SCR-181) */
.mc-form-group {
  margin-bottom: 18px;
}

.mc-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--mc-text-main);
  margin-bottom: 6px;
}

.mc-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.mc-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1.5px solid var(--mc-border);
  border-radius: 12px;
  font-size: 14px;
  color: var(--mc-text-main);
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.mc-input:focus {
  border-color: var(--mc-accent);
  box-shadow: 0 0 0 3px rgba(0, 131, 255, 0.12);
}

.mc-input-icon {
  position: absolute;
  right: 14px;
  color: var(--mc-text-muted);
  cursor: pointer;
}

.mc-btn-submit {
  width: 100%;
  height: 52px;
  background: var(--mc-primary);
  color: #ffffff;
  border: none;
  border-radius: var(--mc-radius-btn);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s ease;
  margin-top: 10px;
}

.mc-btn-submit:hover {
  background: var(--mc-primary-dark);
}

/* Multi-Branch Entity Selector (SCR-182) */
.mc-entity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.mc-entity-card {
  background: #ffffff;
  border: 2px solid var(--mc-border);
  border-radius: var(--mc-radius-card);
  padding: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mc-entity-card:hover, .mc-entity-card.selected {
  border-color: var(--mc-accent);
  box-shadow: var(--mc-shadow-md);
  transform: translateY(-2px);
}

.mc-card-top {
  margin-bottom: 16px;
}

.mc-entity-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--mc-primary);
  margin: 0 0 6px;
}

.mc-entity-reg {
  font-size: 11px;
  font-family: monospace;
  font-weight: 700;
  color: var(--mc-text-muted);
  background: #f1f5f9;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 10px;
}

.mc-entity-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.mc-tag-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--mc-radius-pill);
  background: var(--mc-surface);
  color: var(--mc-primary);
}

.mc-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 12px;
  text-align: center;
  margin-bottom: 16px;
}

.mc-metric-item span:first-child {
  font-size: 16px;
  font-weight: 800;
  color: var(--mc-primary);
  display: block;
}

.mc-metric-item span:last-child {
  font-size: 10px;
  font-weight: 700;
  color: var(--mc-text-muted);
  text-transform: uppercase;
}

.mc-unit-selector-dropdown {
  margin-bottom: 16px;
}

.mc-unit-select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1.5px solid var(--mc-border);
  font-size: 13px;
  color: var(--mc-text-main);
  background: #ffffff;
}

/* =====================================================================
   MOBILE FLUID PORTRAIT VIEWS (SCR-050 & SCR-007)
   Fluid 360px-430px, 100dvh portrait view
   ===================================================================== */
.mc-mobile-canvas {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.08);
}

.mc-mobile-top-bar {
  height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--mc-border);
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 100;
}

.mc-top-action-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mc-text-main);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.mc-mobile-header-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--mc-primary);
  margin: 0;
}

.mc-mobile-body {
  flex: 1;
  padding: 16px;
}

.mc-hospital-banner-card {
  border-radius: var(--mc-radius-card);
  overflow: hidden;
  background: var(--mc-primary);
  color: #ffffff;
  padding: 24px 20px;
  margin-bottom: 16px;
  position: relative;
}

.mc-hospital-hero-title {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 6px;
}

.mc-hospital-reg-badge {
  font-size: 11px;
  font-family: monospace;
  background: rgba(255, 255, 255, 0.15);
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 12px;
}

.mc-hospital-meta-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--mc-radius-pill);
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.mc-quick-contact-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.mc-contact-action-btn {
  height: 48px;
  border-radius: var(--mc-radius-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.mc-contact-action-btn.call-er {
  background: #fee2e2;
  color: #b91c1c;
}

.mc-contact-action-btn.nav-map {
  background: var(--mc-surface);
  color: var(--mc-accent);
}

.mc-section-heading {
  font-size: 15px;
  font-weight: 800;
  color: var(--mc-primary);
  margin: 0 0 12px;
}

.mc-dept-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.mc-dept-pill {
  padding: 8px 14px;
  border-radius: var(--mc-radius-pill);
  background: #f1f5f9;
  font-size: 12px;
  font-weight: 600;
  color: var(--mc-text-main);
}