/* modules/deps/styles/dark/style.css
 * Client theme — DARK. Mirrors the .control aesthetic: dark surfaces, cream
 * pills, teal accent. Self-contained: defines the full --client- variable set
 * and every component the client_login / client_landing modules use. Does NOT
 * import from .control's nextjob.css. The --client- prefix avoids collision
 * with the admin surface's --nj- variables if both ever co-render.
 */

:root {
  /* Surfaces */
  --client-bg:          #1d1d1d;
  --client-bg-elevated: #262626;
  --client-bg-input:    #161616;
  --client-cream:       #f3ead6;

  /* Text */
  --client-text:        #ffffff;
  --client-text-muted:  #aaaaaa;
  --client-text-faint:  #6a6a6a;
  --client-text-ink:    #14110a;   /* on cream pills */

  /* Accents / state */
  --client-accent:      #10a1aa;   /* teal */
  --client-accent-ink:  #051416;
  --client-error:       #d6453d;
  --client-success:     #3fb27f;
  --client-border:      #3a3a3a;
  --client-border-soft: #2c2c2c;

  /* Radius */
  --client-radius-sm: 6px;
  --client-radius-md: 10px;
  --client-radius-lg: 16px;

  /* Type scale */
  --client-fs-xs:  12px;
  --client-fs-sm:  13px;
  --client-fs-md:  15px;
  --client-fs-lg:  18px;
  --client-fs-xl:  24px;
  --client-fs-2xl: 34px;

  /* Spacing */
  --client-space-1: 4px;
  --client-space-2: 8px;
  --client-space-3: 12px;
  --client-space-4: 16px;
  --client-space-5: 24px;
  --client-space-6: 32px;
  --client-space-7: 48px;

  --client-shadow-md: 0 6px 24px rgba(0,0,0,0.45);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--client-bg);
  color: var(--client-text);
  font-size: var(--client-fs-md);
  line-height: 1.5;
}

/* ── Auth layout ───────────────────────────────────────────────── */
.client-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--client-space-5);
}
.client-card {
  width: 100%;
  max-width: 420px;
  background: var(--client-bg-elevated);
  border: 1px solid var(--client-border);
  border-radius: var(--client-radius-lg);
  padding: var(--client-space-6);
  box-shadow: var(--client-shadow-md);
}

/* ── Brand block ───────────────────────────────────────────────── */
.client-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--client-space-3);
  margin-bottom: var(--client-space-5);
}
.client-logo { max-height: 64px; max-width: 220px; object-fit: contain; }
.client-business {
  font-size: var(--client-fs-xl);
  font-weight: 700;
  color: var(--client-text);
}
.client-pill {
  display: inline-flex;
  align-items: center;
  background: var(--client-cream);
  color: var(--client-text-ink);
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 14px;
  font-size: var(--client-fs-md);
}
.client-subtitle {
  text-align: center;
  color: var(--client-text-muted);
  font-size: var(--client-fs-md);
  margin-bottom: var(--client-space-4);
}
.client-help {
  color: var(--client-text-muted);
  font-size: var(--client-fs-sm);
  margin-bottom: var(--client-space-4);
}

/* ── Form fields ───────────────────────────────────────────────── */
.client-field { margin-bottom: var(--client-space-3); }
.client-field label {
  display: block;
  font-size: var(--client-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--client-text-muted);
  margin-bottom: 4px;
}
.client-field input,
.client-field select {
  width: 100%;
  padding: 10px 12px;
  background: var(--client-bg-input);
  border: 1px solid var(--client-border);
  border-radius: var(--client-radius-sm);
  color: var(--client-text);
  font-size: var(--client-fs-md);
  font-family: inherit;
  outline: none;
}
.client-field input[readonly] { color: var(--client-text-muted); background: #0e0e0e; }
.client-field input:focus,
.client-field select:focus {
  border-color: var(--client-accent);
  box-shadow: 0 0 0 2px rgba(16,161,170,0.25);
}

/* Password field with show/hide eye toggle */
.client-password-field { position: relative; width: 100%; }
.client-password-field input { padding-right: var(--client-space-7); }
.client-password-field__toggle {
  position: absolute;
  right: var(--client-space-2);
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: var(--client-space-1);
  color: var(--client-text-muted);
}
.client-password-field__toggle:hover { color: var(--client-text); }
.client-password-field__toggle svg { display: block; width: 18px; height: 18px; }

/* 2FA pin entry */
.client-pin-input {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 28px;
  letter-spacing: 10px;
  text-align: center;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.client-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--client-space-2);
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--client-radius-sm);
  font-size: var(--client-fs-md);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.client-btn--primary { background: var(--client-accent); color: var(--client-accent-ink); }
.client-btn--primary:hover { background: #0c8087; }
.client-btn--secondary {
  background: transparent;
  color: var(--client-text);
  border-color: var(--client-border);
}
.client-btn--secondary:hover { background: var(--client-bg-input); }
.client-btn--block { width: 100%; }

/* ── Messages ──────────────────────────────────────────────────── */
.client-error {
  background: rgba(214,69,61,0.12);
  color: var(--client-error);
  border: 1px solid rgba(214,69,61,0.3);
  border-radius: var(--client-radius-sm);
  padding: 10px 12px;
  font-size: var(--client-fs-sm);
  margin-bottom: var(--client-space-3);
}
.client-flash {
  background: rgba(63,178,127,0.12);
  color: var(--client-success);
  border: 1px solid rgba(63,178,127,0.3);
  border-radius: var(--client-radius-sm);
  padding: 10px 12px;
  font-size: var(--client-fs-sm);
  margin-bottom: var(--client-space-3);
}
.client-links {
  margin-top: var(--client-space-4);
  text-align: center;
  font-size: var(--client-fs-sm);
}
.client-links a { color: var(--client-accent); text-decoration: none; }
.client-links a:hover { text-decoration: underline; }

/* ── Modal (in-page dialogs, no browser-native prompts) ────────── */
.client-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.client-modal {
  background: var(--client-bg-elevated);
  border: 1px solid var(--client-border);
  border-radius: var(--client-radius-lg);
  padding: var(--client-space-5);
  max-width: 420px; width: 100%;
  box-shadow: var(--client-shadow-md);
}

/* ── Landing page ──────────────────────────────────────────────── */
.client-landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--client-space-4);
  text-align: center;
  padding: var(--client-space-5);
}
.client-landing__logo { max-height: 140px; max-width: 360px; object-fit: contain; }
.client-landing__name { font-size: var(--client-fs-2xl); font-weight: 800; }
.client-landing__user { color: var(--client-text-muted); font-size: var(--client-fs-md); }


/* nj-client-module-system v1 - app header bar + landing module card grid + module page placeholder. Themed via --client- tokens (single client style source). */
.client-appbar{display:flex;align-items:center;justify-content:space-between;gap:var(--client-space-4);padding:var(--client-space-3) var(--client-space-5);background:var(--client-bg-elevated);border-bottom:1px solid var(--client-border);}
.client-appbar__brand{display:inline-flex;align-items:center;gap:var(--client-space-3);text-decoration:none;color:var(--client-text);}
.client-appbar__logo{height:34px;width:auto;display:block;}
.client-appbar__name{font-size:var(--client-fs-lg);font-weight:700;color:var(--client-text);}
.client-appbar__nav a{color:var(--client-text-muted);text-decoration:none;font-size:var(--client-fs-sm);}
.client-appbar__nav a:hover{color:var(--client-text);}
.client-app-main{max-width:1100px;margin:0 auto;padding:var(--client-space-6) var(--client-space-5);}
.client-landing__title,.client-page__title{font-size:var(--client-fs-2xl);font-weight:700;color:var(--client-text);margin:0 0 var(--client-space-6);}
.client-landing__title{text-align:center;}
.client-card-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--client-space-4);}
@media (min-width:768px){.client-card-grid{grid-template-columns:repeat(9,1fr);}}
@media (min-width:1200px){.client-card-grid{grid-template-columns:repeat(12,1fr);}}
.client-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--client-space-2);padding:var(--client-space-4) var(--client-space-2);background:var(--client-bg-elevated);border:1px solid var(--client-border);border-radius:var(--client-radius-md);text-decoration:none;color:var(--client-text);aspect-ratio:1/1;transition:border-color .15s,transform .15s;}
.client-tile:hover{border-color:var(--client-accent);transform:translateY(-2px);}
.client-tile__logo{width:48px;height:48px;display:flex;align-items:center;justify-content:center;}
.client-tile__logo img{max-width:100%;max-height:100%;object-fit:contain;}
.client-tile__logo-fallback{width:48px;height:48px;border-radius:var(--client-radius-md);background:var(--client-cream);color:var(--client-text-ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--client-fs-lg);}
.client-tile__name{font-size:var(--client-fs-sm);font-weight:600;text-align:center;color:var(--client-text);line-height:1.2;}
.client-placeholder{padding:var(--client-space-7);text-align:center;color:var(--client-text-muted);background:var(--client-bg-elevated);border:1px dashed var(--client-border);border-radius:var(--client-radius-md);font-size:var(--client-fs-lg);}
.client-landing__empty{grid-column:1/-1;text-align:center;color:var(--client-text-muted);padding:var(--client-space-6);}

/* nj-client-stage-watermark v1 - faint top-right stage pill (~100x50). Themed via --client- tokens. */
.client-stage-wm{position:fixed;top:10px;right:10px;z-index:2147483000;width:100px;height:50px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--client-cream);color:var(--client-text-ink);border:1px solid var(--client-border);font-size:var(--client-fs-sm);font-weight:700;letter-spacing:1px;text-transform:uppercase;opacity:.28;pointer-events:none;box-shadow:var(--client-shadow-md);}

/* nj-client-brand-logos v1 - NextJob primary (on top, larger) + client logo secondary (beneath, smaller), card + appbar. */
.client-logo--primary{max-height:72px;max-width:240px;}
.client-logo--secondary{max-height:40px;max-width:170px;margin-top:6px;opacity:.92;}
.client-appbar__logos{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;}
.client-appbar__logo--secondary{height:22px;opacity:.92;}