/* ==========================================================================
   Medikaplus — auth & status template
   Design source : master_template_login2, layout "36 — Mesh Kobalt Split"
                   (frame split, shell+brand = mesh-cobalt, card = raised,
                    width max-w-md, align left, radius soft)
   Orientation   : brand/info panel LEFT, credentials card RIGHT (desktop).
                   Mobile / narrow: credentials card on TOP, info stacked under.

   Self-contained on purpose — no Tailwind build, no vendor framework, no
   reference to the master template folder. Safe to delete
   /Users/devhub/htdocs/master_template_login2 once this file exists.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   sRGB hex first so old browsers still render; the @supports block upgrades
   every token to the source design's OKLCH values where they are understood.
   -------------------------------------------------------------------------- */
.mp-auth {
  --mp-radius:        0.75rem;   /* inputs / buttons  (soft) */
  --mp-radius-card:   1rem;      /* card              (soft) */

  --mp-card:              #ffffff;
  --mp-card-foreground:   #1e2b34;
  --mp-foreground:        #1e2b34;
  --mp-muted-foreground:  #64757f;
  --mp-border:            #e0e6ea;
  --mp-input:             #e0e6ea;
  --mp-primary:           #3358d4;
  --mp-primary-fg:        #fbfcff;
  --mp-ring:              #3358d4;
  --mp-destructive:       #e5484d;
  --mp-brand-fg:          #fbfcff;

  /* mesh-cobalt */
  --mp-mesh-base:  #101733;
  --mp-mesh-1:     rgba(51, 88, 212, 0.90);
  --mp-mesh-2:     rgba(27, 84, 134, 0.85);
  --mp-mesh-3:     rgba(74, 65, 196, 0.80);
}

@supports (color: oklch(0.5 0.1 260)) {
  .mp-auth {
    --mp-card:              oklch(1 0 0);
    --mp-card-foreground:   oklch(0.23 0.035 220);
    --mp-foreground:        oklch(0.23 0.035 220);
    --mp-muted-foreground:  oklch(0.53 0.026 220);
    --mp-border:            oklch(0.915 0.014 210);
    --mp-input:             oklch(0.915 0.014 210);
    --mp-primary:           oklch(0.52 0.19 258);
    --mp-primary-fg:        oklch(0.99 0.008 260);
    --mp-ring:              oklch(0.52 0.19 258);
    --mp-destructive:       oklch(0.577 0.245 27.325);
    --mp-brand-fg:          oklch(0.99 0.008 260);

    --mp-mesh-base:  oklch(0.17 0.06 262);
    --mp-mesh-1:     oklch(0.52 0.2 258 / 90%);
    --mp-mesh-2:     oklch(0.4 0.14 232 / 85%);
    --mp-mesh-3:     oklch(0.46 0.18 275 / 80%);
  }
}

/* --------------------------------------------------------------------------
   2. Shell — full-viewport mesh-cobalt surface
   position:fixed so the host template's wrappers (Metronic app-root, footer,
   scrolltop) can never reshape or bleed into the auth screen.
   -------------------------------------------------------------------------- */
.mp-auth-page #kt_app_footer,
.mp-auth-page #kt_scrolltop,
.mp-auth-page .app-footer,
.mp-auth-page footer {
  display: none !important;
}

/* The host template (Metronic) ships html{font-size:13px}, which would shrink
   every rem in this file by ~19%. The auth screen is a full takeover, so pin
   the root back to 16px for the duration — nothing else is visible anyway. */
html.mp-auth-page { font-size: 16px !important; }

.mp-auth-page body {
  background: #101733 !important;
  overflow: hidden !important;
}

.mp-auth {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--mp-brand-fg);

  background-color: var(--mp-mesh-base);
  background-image:
    radial-gradient(at 78% 20%, var(--mp-mesh-1) 0px, transparent 50%),
    radial-gradient(at 15% 30%, var(--mp-mesh-2) 0px, transparent 55%),
    radial-gradient(at 50% 95%, var(--mp-mesh-3) 0px, transparent 55%);
  background-attachment: fixed;
}

.mp-auth *,
.mp-auth *::before,
.mp-auth *::after { box-sizing: border-box; }

.mp-auth a { text-decoration: none; }

/* --------------------------------------------------------------------------
   3. Split frame
   Mobile   : [1] credentials card, [2] brand panel  (stacked)
   >=1024px : [1] brand panel (left), [2] credentials card (right)
   -------------------------------------------------------------------------- */
.mp-split {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100%;
}

.mp-col-form {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
}

.mp-col-brand {
  order: 2;
}

@media (min-width: 640px) {
  .mp-col-form { padding: 2.5rem 2rem; }
}

@media (min-width: 1024px) {
  .mp-split {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
  }
  .mp-col-brand { order: 1; }
  .mp-col-form  { order: 2; }
}

/* --------------------------------------------------------------------------
   4. Brand panel (the Medikaplus info side)
   -------------------------------------------------------------------------- */
.mp-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  height: 100%;
  overflow: hidden;
  padding: 2.5rem 1.5rem;
}

@media (min-width: 640px) { .mp-brand { padding: 2.5rem; } }
@media (min-width: 1024px) { .mp-brand { padding: 3.5rem; } }

.mp-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.mp-logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  border-radius: var(--mp-radius);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.mp-logo-mark svg { width: 1.25rem; height: 1.25rem; }

.mp-logo-text {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.mp-logo-text span { opacity: 0.7; }

/* light variant — used on the card side (status pages) */
.mp-logo--light .mp-logo-mark {
  background: var(--mp-primary);
  color: var(--mp-primary-fg);
}
.mp-logo--light .mp-logo-text { color: var(--mp-foreground); }
.mp-logo--light .mp-logo-text span { color: var(--mp-primary); opacity: 1; }

.mp-brand h2 {
  margin: 0;
  color: var(--mp-brand-fg);   /* host frameworks set their own heading colour */
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

@media (min-width: 640px)  { .mp-brand h2 { font-size: 1.5rem; } }
@media (min-width: 1024px) { .mp-brand h2 { font-size: 1.875rem; } }

.mp-brand-lead {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  line-height: 1.65;
  opacity: 0.8;
}

.mp-features {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  opacity: 0.9;
}

.mp-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 0.625rem;
  line-height: 1.4;
}

.mp-features li:first-child { margin-top: 0; }

.mp-features svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  margin-top: 0.125rem;
}

/* --------------------------------------------------------------------------
   5. Card (the credentials side)
   raised = bg-card + shadow-2xl (primary tinted) + hairline border
   -------------------------------------------------------------------------- */
.mp-card {
  width: 100%;
  max-width: 28rem;              /* max-w-md */
  padding: 1.5rem;
  border-radius: var(--mp-radius-card);
  background: var(--mp-card);
  color: var(--mp-card-foreground);
  border: 1px solid rgba(224, 230, 234, 0.4);
  box-shadow: 0 25px 50px -12px rgba(51, 88, 212, 0.25);
}

@media (min-width: 640px) { .mp-card { padding: 2rem; } }

.mp-stack > * + * { margin-top: 1.25rem; }

.mp-head h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mp-card-foreground);
}

.mp-head p {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  color: var(--mp-muted-foreground);
}

.mp-head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.75rem;
  border-radius: var(--mp-radius-card);
  background: rgba(51, 88, 212, 0.1);
  color: var(--mp-primary);
}

.mp-head-icon svg { width: 1.25rem; height: 1.25rem; }

/* --------------------------------------------------------------------------
   6. Form controls
   -------------------------------------------------------------------------- */
.mp-field + .mp-field { margin-top: 1.25rem; }

.mp-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--mp-card-foreground);
}

.mp-input {
  display: block;
  width: 100%;
  padding: 0.625rem 1rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--mp-foreground);
  background: var(--mp-card);
  border: 1px solid var(--mp-input);
  border-radius: var(--mp-radius);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.mp-input::placeholder { color: var(--mp-muted-foreground); }

.mp-input:focus {
  border-color: var(--mp-primary);
  box-shadow: 0 0 0 3px rgba(51, 88, 212, 0.3);
}

.mp-input.is-error {
  border-color: var(--mp-destructive);
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.2);
}

.mp-input-wrap { position: relative; }
.mp-input-wrap .mp-input { padding-right: 2.75rem; }

.mp-eye {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--mp-muted-foreground);
  transition: color 0.15s ease;
}

.mp-eye:hover { color: var(--mp-foreground); }
.mp-eye svg { width: 1rem; height: 1rem; }

.mp-err {
  display: none;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--mp-destructive);
}

.mp-err.is-shown { display: block; }

/* OTP boxes */
.mp-otp {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.mp-otp input {
  width: 100%;
  min-width: 0;
  height: 3rem;
  padding: 0;
  font: inherit;
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
  color: var(--mp-foreground);
  background: var(--mp-card);
  border: 1px solid var(--mp-input);
  border-radius: var(--mp-radius);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

@media (min-width: 640px) { .mp-otp input { height: 3.5rem; } }

.mp-otp input:focus {
  border-color: var(--mp-primary);
  box-shadow: 0 0 0 3px rgba(51, 88, 212, 0.3);
}

.mp-otp.is-error input {
  border-color: var(--mp-destructive);
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.mp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--mp-radius);
  cursor: pointer;
  transition: filter 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}

.mp-btn--primary {
  background: var(--mp-primary);
  color: var(--mp-primary-fg);
}

.mp-btn--primary:hover { filter: brightness(1.1); }

.mp-btn--ghost {
  background: var(--mp-card);
  color: var(--mp-foreground);
  border-color: var(--mp-input);
}

.mp-btn--ghost:hover { background: rgba(224, 230, 234, 0.35); }

.mp-btn--block {
  display: flex;
  width: 100%;
  padding: 0.75rem 1rem;
}

.mp-btn[disabled] { opacity: 0.7; cursor: not-allowed; }

.mp-btn svg { width: 1rem; height: 1rem; }

.mp-btn .mp-spin { display: none; }
.mp-btn.is-loading .mp-spin { display: inline-block; animation: mp-spin 1s linear infinite; }

@keyframes mp-spin { to { transform: rotate(360deg); } }

.mp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

/* --------------------------------------------------------------------------
   8. Small type — links, meta row, hotline, status code
   -------------------------------------------------------------------------- */
.mp-link {
  color: var(--mp-primary);
  font-weight: 500;
}

.mp-link:hover { text-decoration: underline; }

.mp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
}

.mp-meta .mp-muted { color: var(--mp-muted-foreground); }

.mp-meta .mp-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.mp-meta svg { width: 0.875rem; height: 0.875rem; }

.mp-hotline {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(224, 230, 234, 0.7);
  font-size: 0.75rem;
  color: var(--mp-muted-foreground);
}

.mp-hotline a { color: var(--mp-primary); font-weight: 600; }
.mp-hotline a:hover { text-decoration: underline; }

.mp-code {
  margin: 0;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--mp-primary);
}

@media (min-width: 640px) { .mp-code { font-size: 3.75rem; } }

.mp-status-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mp-card-foreground);
}

@media (min-width: 640px) { .mp-status-title { font-size: 1.5rem; } }

.mp-status-desc {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--mp-muted-foreground);
}

.mp-details {
  margin: 0;
  font-size: 0.75rem;
  color: var(--mp-muted-foreground);
}

.mp-details summary { cursor: pointer; font-weight: 600; }

.mp-details pre {
  margin: 0.5rem 0 0;
  padding: 0.75rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(224, 230, 234, 0.35);
  border-radius: var(--mp-radius);
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 0.6875rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   9. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mp-auth *,
  .mp-auth *::before,
  .mp-auth *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}