/* ============================================================
   MYKA PRO — ERP Cloud Sign-in
   Layout : brand column (left) + sign-in panel (right), one flat
            white surface, no photographic backdrop.
   Palette: Graphite #17191E · product accent from app/common/brand.php
   Fonts  : Open Sans
   Desktop-first, responsive down to 360px.

   The accent is NOT hardcoded here. views/login/login.php reads
   mykaAccent() and emits --accent / --accent-rgb inline, so a sibling
   product (CONNECT, FRESH, TEAM) recolours the page by changing one
   constant. The values below are the TRENDS fallback if that ever fails
   to render. Every accent-tinted surface derives from --accent-rgb —
   never add a second hardcoded tint.
   ============================================================ */

:root {
  /* --- brand (overridden inline by login.php) ---------------- */
  --accent: #D6452F;
  --accent-rgb: 214, 69, 47;
  --ink: #17191E;
  --ink-soft: #414753;

  /* --- neutrals --------------------------------------------- */
  --surface: #FFFFFF;
  --canvas: #F7F6F4;
  --text-muted: #6B7280;
  --text-faint: #9AA0AA;
  --border: #E3E4E8;
  --border-soft: #EDEEF1;
  --field-bg: #FAFAFB;
  --danger: #C22F1E;
  --online: #16A34A;

  --font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--canvas); }

body {
  font-family: var(--font-body);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 24px;
}

/* ============================================================
   1. Shell
   ============================================================ */

.auth-shell {
  position: relative;
  width: 100%;
  max-width: 1240px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
}

/* --- decoration: one brand-derived mark, deliberately faint ---
   A dot matrix in the accent colour, behind and to the right of the
   lockup. It should register only after the content does. */

.auth-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.decor-dots {
  position: absolute;
  top: 46px;
  left: 30%;
  width: 210px;
  height: 130px;
  background-image: radial-gradient(rgba(var(--accent-rgb), .28) 1.1px, transparent 1.1px);
  background-size: 13px 13px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 30%, #000 20%, transparent 78%);
          mask-image: radial-gradient(ellipse at 30% 30%, #000 20%, transparent 78%);
}

.auth-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 452px;
  gap: 64px;
  align-items: center;
  padding: 54px 56px;
}

/* ============================================================
   2. Brand column
   ============================================================ */

.auth-brand { min-width: 0; }

/* The lockup is sized on ITS OWN aspect ratio (649.4 x 181.175 = 3.585:1),
   not on any container inherited from the previous identity. Width is the
   only dimension set; height follows the artwork. */
.brand-lockup {
  display: block;
  width: 250px;
  max-width: 78%;
  height: auto;
}

.brand-rule {
  width: 44px;
  height: 3px;
  margin: 34px 0 26px;
  border: 0;
  background: var(--accent);
}

.brand-headline {
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.024em;
  color: var(--ink);
}

.brand-headline .accent { color: var(--accent); }

.brand-copy {
  margin: 20px 0 0;
  max-width: 40ch;
  font-size: 14px;
  line-height: 1.68;
  color: var(--ink-soft);
}

/* --- capability strip: text and hairlines only, no tiles ----- */

.brand-capabilities {
  display: flex;
  align-items: flex-start;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.capability {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 16px;
  border-left: 1px solid var(--border-soft);
  font-size: 11.5px;
  line-height: 1.42;
  color: var(--ink-soft);
}

.capability:first-child { padding-left: 0; border-left: 0; }

.capability svg {
  display: block;
  width: 19px;
  height: 19px;
  margin-bottom: 11px;
  color: var(--accent);
}

/* --- assurance line ----------------------------------------- */

.brand-trust {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 44px 0 0;
}

.trust-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .07);
  color: var(--accent);
}

.trust-ico svg { width: 19px; height: 19px; }

.brand-trust p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.trust-title { display: block; font-weight: 700; color: var(--ink); }

/* ============================================================
   3. Sign-in panel
   ============================================================ */

.auth-panel { min-width: 0; }

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 34px 38px 36px;
}

/* --- status strip ------------------------------------------- */

.card-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 24px;
  font-size: 11.5px;
}

.status-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  color: var(--ink);
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--online);
}

.status-env {
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--text-faint);
}

/* --- heading ------------------------------------------------ */

.login-head h1 {
  margin: 0;
  font-size: 29px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
}

.login-head p {
  margin: 7px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* --- form --------------------------------------------------- */

.login-form { margin-top: 28px; }

.form-group + .form-group { margin-top: 18px; }

.form-group label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

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

.input-icon {
  position: absolute;
  left: 14px;
  width: 16px;
  height: 16px;
  color: var(--text-faint);
  pointer-events: none;
  transition: color .2s var(--ease);
}

.input-wrap input {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 42px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--field-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}

.input-wrap input::placeholder { color: var(--text-faint); }
.input-wrap input:hover { border-color: #D2D5DB; }

.input-wrap input:focus {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .13);
}

.input-wrap:focus-within .input-icon { color: var(--accent); }

.password-input input { padding-right: 44px; }

.toggle-password {
  position: absolute;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--text-faint);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease);
}

.toggle-password:hover { color: var(--ink-soft); background: #EFF0F3; }
.toggle-password:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- inline error (shown/populated by login.js) -------------- */

.error-message {
  display: none;
  margin-top: 9px;
  font-size: 12px;
  font-weight: 600;
  color: var(--danger);
}

/* --- remember / forgot -------------------------------------- */

.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 18px 0 22px;
}

.checkbox-container {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}

.checkbox-container input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkmark {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: var(--surface);
  border: 1.5px solid #C6CAD2;
  border-radius: 4px;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}

.checkbox-container:hover .checkmark { border-color: var(--accent); }

.checkbox-container input:checked ~ .checkmark {
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
  border-color: var(--accent);
}

.checkbox-container input:focus-visible ~ .checkmark {
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}

.forgot-password {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.forgot-password:hover { text-decoration: underline; }

/* --- submit -------------------------------------------------- */

/* Flat fill, no gradient. login.js replaces the button's innerHTML with
   plain text on failure, so the layout must survive losing the arrow. */
.submit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 48px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: filter .2s var(--ease);
}

.submit-button:hover:not(:disabled) { filter: brightness(.93); }
.submit-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.submit-button:disabled { opacity: .7; cursor: not-allowed; }

.btn-arrow {
  width: 17px;
  height: 17px;
  transition: transform .25s var(--ease);
}

.submit-button:hover:not(:disabled) .btn-arrow { transform: translateX(3px); }

/* login.js swaps the button content for
   `<span class="spinner"></span> Logging in...` while the request is in flight. */
.spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: -2px;
  margin-right: 7px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

.spinner.hidden, .hidden { display: none; }

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

/* --- administrator notice ----------------------------------- */

.card-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 24px;
  padding: 14px 15px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  background: rgba(var(--accent-rgb), .045);
  border: 1px solid rgba(var(--accent-rgb), .16);
  border-radius: 8px;
}

.card-note svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--accent);
}

.card-note p { margin: 0; }

/* ============================================================
   4. Footer
   ============================================================ */

.auth-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 18px 56px 20px;
  font-size: 11.5px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
}

.auth-footer .footer-sep { color: #D5D7DD; }
.auth-footer a { font-weight: 700; color: var(--accent); text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }

/* ============================================================
   5. Responsive

   Three real layouts, not one layout shrunk:
     1024 and up  two columns, brand leads
     768 to 1023  one column, brand block condensed above the card
     under 768    brand reduced to the lockup and the headline so the
                  form is reachable without scrolling past marketing copy
   ============================================================ */

/* Narrow desktop / small laptop */
@media (max-width: 1300px) {
  .auth-grid { grid-template-columns: minmax(0, 1fr) 424px; gap: 48px; padding: 46px 44px; }
  .brand-headline { font-size: 35px; }
  .auth-footer { padding: 16px 44px 18px; }
}

@media (max-width: 1120px) {
  .auth-grid { grid-template-columns: minmax(0, 1fr) 392px; gap: 36px; padding: 40px 36px; }
  .brand-lockup { width: 268px; }
  .brand-headline { font-size: 31px; }
  .brand-rule { margin: 28px 0 22px; }
  .capability { padding: 0 11px; font-size: 11px; }
  .login-card { padding: 28px 28px 30px; }
  .auth-footer { padding: 15px 36px 17px; }
}

/* Short desktop screens — 1366x768 is the common one, and at the desktop
   padding the panel is 788px tall and scrolls by 20px. Vertical padding only,
   so the horizontal rules above keep their values. */
@media (min-width: 1024px) and (max-height: 820px) {
  body { padding-top: 16px; padding-bottom: 16px; }
  .auth-grid { padding-top: 42px; padding-bottom: 42px; }
}

/* Tablet — single column. The brand block stays, but loses the tall
   rhythm it needs on desktop and the capability strip wraps to a grid. */
@media (max-width: 1023px) {
  body { align-items: flex-start; padding: 18px 16px; }

  .auth-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    padding: 36px 32px;
    max-width: 640px;
    margin: 0 auto;
  }

  .decor-dots { left: auto; right: 34px; top: 30px; width: 150px; height: 100px; }

  .brand-lockup { width: 274px; max-width: 84%; }
  .brand-headline { font-size: 30px; }
  .brand-copy { max-width: none; }
  .brand-rule { margin: 26px 0 20px; }

  /* Five across, not a 3+2 grid: the second row cost ~80px and pushed the
     sign-in card past the fold on a 1024-tall tablet. */
  .brand-capabilities {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-top: 28px;
  }

  .capability { padding: 0; border-left: 0; font-size: 11px; }
  .capability svg { margin-bottom: 9px; }
  .brand-trust { margin-top: 26px; }
  .auth-footer { padding: 16px 32px 18px; }
}

/* Mobile — the form comes first. Marketing copy and the capability strip
   are dropped rather than stacked above the fold; the lockup and the
   headline carry the identity. */
@media (max-width: 767px) {
  body { padding: 12px 10px; }

  .auth-grid {
    padding: 26px 18px 28px;
    gap: 24px;
    max-width: none;
  }

  .decor-dots { display: none; }

  .brand-lockup { width: 228px; max-width: 72%; }
  .brand-rule { width: 36px; margin: 22px 0 18px; }
  .brand-headline { font-size: 25px; }

  .brand-copy,
  .brand-capabilities,
  .brand-trust { display: none; }

  .login-card { padding: 24px 20px 26px; border-radius: 10px; }
  .login-head h1 { font-size: 24px; }
  .card-status { padding-bottom: 20px; }
  .input-wrap input { height: 44px; }
  .submit-button { height: 46px; }

  .auth-footer { padding: 14px 18px 16px; text-align: center; }
}

@media (max-width: 400px) {
  .auth-shell { border-radius: 8px; }
  .brand-headline { font-size: 22px; }
  .form-row { flex-wrap: wrap; row-gap: 10px; }
}

/* ============================================================
   6. Motion preferences
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}