/* Login page layout. Scoped to html.s3l-on, which only the login script sets.
   Reuses the tokens from s3curity-wazuh.css.
   Desktop: exactly one viewport tall, no scrolling. Everything scales with the
   viewport height, and lower-priority blocks drop out on short screens. */

html.s3l-on, html.s3l-on body { height: 100%; overflow: hidden; }

.s3l-host {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(360px, 1fr);
  width: 100% !important;
  max-width: none !important;
  height: 100vh;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0;
  overflow: hidden;
}

/* ---- left: identity panel ---- */
.s3l-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.8vh, 20px);
  height: 100vh;
  min-height: 0;
  padding: clamp(14px, 3.2vh, 40px) clamp(24px, 4vw, 64px);
  overflow: hidden;
  background:
    linear-gradient(var(--s3-bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--s3-bg-grid) 1px, transparent 1px),
    var(--s3-bg);
  background-size: 44px 44px, 44px 44px, auto;
  border-right: 1px solid var(--s3-line);
  color: var(--s3-text);
}

.s3l-logo { height: clamp(26px, 5vh, 48px); width: auto; max-width: 70%; display: block; align-self: flex-start; }

.s3l-eyebrow {
  margin: 0;
  font-family: var(--s3-mono);
  font-size: clamp(9.5px, 1.4vh, 11px);
  letter-spacing: var(--s3-track);
  color: var(--s3-dim);
}

.s3l-heading {
  margin: 0;
  font-family: var(--s3-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.04;
  font-size: clamp(20px, min(5.2vh, 3.6vw), 50px);
  letter-spacing: -0.005em;
}
.s3l-h1, .s3l-h2 { display: block; }
.s3l-h1 { color: var(--s3-text-strong); }
.s3l-h2 { color: var(--s3-accent); }

.s3l-term { margin: 0; font-family: var(--s3-mono); font-size: clamp(10.5px, 1.6vh, 13px); color: var(--s3-term); }
.s3l-cursor { animation: s3l-blink 1.1s steps(1) infinite; }
@keyframes s3l-blink { 50% { opacity: 0; } }

/* Cards take whatever vertical space is left, so the stats and status strip
   below always stay on screen. */
.s3l-cards {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: clamp(8px, 1.6vh, 14px);
  overflow: hidden;
}
.s3l-card {
  position: relative;
  min-height: 0;
  overflow: hidden;
  padding: clamp(8px, 1.6vh, 16px) 16px;
  background-color: var(--s3-panel);
  border: 1px solid var(--s3-line);
  background-image:
    linear-gradient(var(--s3-accent), var(--s3-accent)),
    linear-gradient(var(--s3-accent), var(--s3-accent)),
    linear-gradient(var(--s3-accent), var(--s3-accent)),
    linear-gradient(var(--s3-accent), var(--s3-accent));
  background-repeat: no-repeat;
  background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px;
  background-position: left top, left top, right bottom, right bottom;
}
.s3l-card::after {
  content: "|||";
  position: absolute; top: 8px; right: 14px;
  font-family: var(--s3-mono); font-size: 11px; letter-spacing: 0.22em;
  color: var(--s3-dim);
}
.s3l-card-tag { font-family: var(--s3-mono); font-size: clamp(9.5px, 1.4vh, 10.5px); letter-spacing: var(--s3-track); color: var(--s3-term); }
.s3l-card-title {
  margin: 4px 0; font-family: var(--s3-display); font-size: clamp(11.5px, 1.8vh, 14px);
  text-transform: uppercase; color: var(--s3-text-strong);
}
.s3l-card-body { margin: 0; font-size: clamp(10.5px, 1.55vh, 12.5px); line-height: 1.45; color: var(--s3-text); }

.s3l-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.s3l-stat { display: flex; flex-direction: column; gap: 3px; }
.s3l-stat::after {
  content: ""; height: 2px; width: 64px; margin-top: 4px;
  background: linear-gradient(90deg, var(--s3-term), rgba(0, 224, 138, 0));
}
.s3l-stat-label { order: 0; font-family: var(--s3-mono); font-size: clamp(9px, 1.35vh, 10px); letter-spacing: var(--s3-track); color: var(--s3-dim); }
.s3l-stat-value { order: 1; font-family: var(--s3-display); font-size: clamp(15px, 2.7vh, 20px); color: var(--s3-accent); white-space: nowrap; }

.s3l-status { margin: 0; font-family: var(--s3-mono); font-size: clamp(9.5px, 1.4vh, 11px); letter-spacing: var(--s3-track); color: var(--s3-term); }
.s3l-footer { margin: 0; font-family: var(--s3-mono); font-size: clamp(9px, 1.35vh, 10.5px); letter-spacing: var(--s3-track); color: var(--s3-dim); }

/* ---- right: form column, full height from the top, form centred ---- */
.s3l-card-form {
  height: 100vh;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  padding: clamp(16px, 4vh, 48px) clamp(20px, 3vw, 48px) !important;
  background-color: var(--s3-panel) !important;
  border: 0 !important;
  border-left: 1px solid var(--s3-line) !important;
}
.s3l-card-form > * { width: min(100%, 400px); }

/* ---- short screens: shed the least important blocks ---- */
@media (max-height: 680px) { .s3l-card-body { display: none; } }
@media (max-height: 560px) { .s3l-cards, .s3l-term { display: none; } }

/* ---- narrow screens: stack, and allow scrolling again ---- */
@media (max-width: 900px) {
  html.s3l-on, html.s3l-on body { height: auto; overflow: auto; }
  .s3l-host { grid-template-columns: 1fr; height: auto; overflow: visible; }
  .s3l-panel { height: auto; padding: 24px; gap: 12px; border-right: 0; border-bottom: 1px solid var(--s3-line); }
  .s3l-eyebrow, .s3l-term, .s3l-cards, .s3l-stats, .s3l-status, .s3l-footer { display: none; }
  .s3l-heading { font-size: 22px; }
  .s3l-h2 { display: none; }
  .s3l-card-form { height: auto; min-height: 60vh; border-left: 0 !important; }
}
@media (max-width: 600px) {
  .s3l-panel { display: none; }
  .s3l-card-form { min-height: 100vh; }
}
@media (prefers-reduced-motion: reduce) {
  .s3l-cursor { animation: none; }
}