/* ============================================
   Tema Email Resmi Pemkab Batu Bara v2
   Single card layout (like Gmail/Outlook)
   ============================================ */

:root {
  --pmk-dark: #0a1628;
  --pmk-blue: #112240;
  --pmk-blue-l: #1a3a6b;
  --pmk-accent: #00639a;
  --pmk-accent-l: #0082c9;
  --pmk-card: #ffffff;
  --pmk-input-bg: #f7f9fc;
  --pmk-input-bd: #e0e5ee;
  --pmk-text: #1e293b;
  --pmk-text-muted: #65748c;
  --pmk-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html, body, #rl-app {
  height: 100%;
  overflow: hidden;
  font-family: var(--pmk-font);
}

/* Loading screen */
#rl-loading {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: linear-gradient(135deg, var(--pmk-dark), var(--pmk-blue) 50%, var(--pmk-blue-l));
  color: #fff;
}
#rl-loading-desc {
  font-size: 18px;
  font-weight: 600;
  opacity: 0.9;
}
#rl-loading .icon-spinner {
  font-size: 28px;
  margin-top: 12px;
  opacity: 0.6;
}

/* Main container - column layout */
#rl-content:not([hidden]) {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(135deg, var(--pmk-dark), var(--pmk-blue) 50%, var(--pmk-blue-l));
  gap: 32px;
  overflow: hidden;
}

/* Branding above card */
#rl-left {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: none !important;
  width: auto !important;
  flex-shrink: 0;
}
#rl-left::before {
  content: '';
  display: block;
  width: 80px;
  height: 80px;
  background: url('https://batubarakab.go.id/img/bb-s.png') no-repeat center/contain;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.3));
}
#rl-left::after {
  content: 'PEMKAB BATU BARA';
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 3px;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  line-height: 1.2;
}

/* Login card */
#rl-right {
  width: 380px !important;
  max-width: calc(100vw - 32px);
  background: var(--pmk-card) !important;
  border-radius: 16px !important;
  padding: 32px 28px 24px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

/* Form title */
#Login .descWrapper {
  font-size: 17px;
  font-weight: 600;
  color: var(--pmk-blue-l);
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid #eef2f7;
}

/* Inputs */
#Login .controls {
  margin-bottom: 14px !important;
  position: relative;
}
#Login .controls .fontastic {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 15px;
  z-index: 1;
  pointer-events: none;
}
#Login .controls .input-block-level {
  width: 100%;
  padding: 12px 14px 12px 42px !important;
  border: 2px solid var(--pmk-input-bd) !important;
  border-radius: 10px !important;
  font-size: 15px;
  color: var(--pmk-text);
  background: var(--pmk-input-bg) !important;
  box-sizing: border-box;
  outline: none;
  min-height: 46px;
}
#Login .controls .input-block-level:focus {
  border-color: var(--pmk-accent) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(0,99,154,0.12);
}

/* Error */
#Login .alert {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 14px;
}
#Login .alert .close {
  float: right;
  color: #dc2626;
  opacity: 0.6;
  text-decoration: none;
  font-size: 18px;
  cursor: pointer;
}

/* Checkbox row - force below submit button with flex ordering */
#Login form {
  display: flex;
  flex-direction: column;
}
#Login .controls[style*="flex"] {
  order: 10;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px !important;
  margin-bottom: 4px !important;
}
#Login .e-checkbox {
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
#Login .e-checkbox span {
  font-size: 14px;
  color: var(--pmk-text-muted);
}

/* Language buttons - hide from original position, show at bottom */
#Login .controls[style*="flex"] .language-buttons {
  display: flex;
  gap: 4px;
}
.language-button {
  padding: 4px 12px !important;
  border-radius: 14px !important;
  font-size: 12px !important;
  color: var(--pmk-text-muted) !important;
  background: #f1f4f9 !important;
  text-decoration: none;
  transition: all 0.2s;
}
.language-button:hover {
  background: #e2e8f0 !important;
  color: var(--pmk-text) !important;
}

/* Submit button */
.btn.buttonLogin {
  width: 100%;
  padding: 12px !important;
  background: linear-gradient(135deg, var(--pmk-accent), var(--pmk-accent-l)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,99,154,0.35);
  transition: all 0.2s;
  min-height: 46px;
}
.btn.buttonLogin:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,99,154,0.4);
  background: linear-gradient(135deg, var(--pmk-blue-l), var(--pmk-blue)) !important;
}

/* Mobile */
@media (max-width: 500px) {
  #rl-content:not([hidden]) { gap: 20px; }
  #rl-left::before { width: 64px; height: 64px; }
  #rl-left::after { font-size: 17px; letter-spacing: 2px; }
  #rl-right { padding: 24px 20px !important; }
  #Login .controls .input-block-level { font-size: 16px; padding: 10px 12px 10px 38px !important; min-height: 42px; }
}