/* ============================================================
   JahFeel Client Portal — styles
   Brand tokens mirror projects/jahfeelautomation-deploy/css/tokens.css
   (warm cream + teal, Plus Jakarta Sans). Self-contained so the portal
   has no cross-site CSS dependency. Mobile-first.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --color-bg:            #FAF9F7;
  --color-bg-subtle:     #F5F2EE;
  --color-card:          #FFFFFF;
  --color-card-hover:    #FDFCFA;
  --color-border:        #ECE9E4;
  --color-border-strong: #D6D1C9;

  --color-text:          #1F2937;
  --color-text-strong:   #0F172A;
  --color-text-muted:    #6B7280;
  --color-text-faint:    #9CA3AF;
  --color-text-on-accent:#FFFFFF;

  --color-accent:        #0D9488;
  --color-accent-hover:  #0F766E;
  --color-accent-soft:   #CCFBF1;
  --color-accent-faint:  #F0FDFA;

  --color-success:       #15803D;
  --color-success-soft:  #D1FAE5;
  --color-warning:       #B45309;
  --color-warning-soft:  #FEF3C7;
  --color-danger:        #B91C1C;
  --color-danger-soft:   #FEE2E2;
  --color-info:          #1D4ED8;
  --color-info-soft:     #DBEAFE;

  --shadow-card:       0 1px 2px rgba(20,14,8,.04), 0 1px 6px rgba(20,14,8,.05);
  --shadow-card-hover: 0 1px 2px rgba(20,14,8,.05), 0 4px 12px rgba(20,14,8,.08);
  --shadow-overlay:    0 8px 32px rgba(20,14,8,.16);
  --shadow-pill:       0 1px 3px rgba(13,148,136,.18);

  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-sm: 6px;  --radius-md: 10px;  --radius-lg: 14px;
  --radius-xl: 20px; --radius-full: 9999px;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;

  --motion-fast: 140ms;
  --motion-easing: cubic-bezier(0.16, 1, 0.3, 1);

  --tabbar-h: 64px;
  --header-h: 56px;
}

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

html, body {
  margin: 0; padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--color-text-strong); margin: 0 0 var(--space-3); }
h2 { font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: var(--color-text-strong); margin: 0 0 var(--space-2); }
h3 { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--color-text-strong); margin: 0 0 var(--space-2); }
p  { margin: 0 0 var(--space-3); }
.muted { color: var(--color-text-muted); font-size: 14px; }
.faint { color: var(--color-text-faint); font-size: 12px; font-weight: 300; }
strong { font-weight: 600; color: var(--color-text-strong); }

/* ---- Cards ---- */
.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}

/* ---- Buttons ---- */
.btn {
  font-family: var(--font-sans); font-size: 15px; font-weight: 500;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  min-height: 44px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  text-decoration: none;
  transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease, transform 80ms ease;
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-accent-faint), 0 0 0 4px var(--color-accent); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-primary { background: var(--color-accent); color: var(--color-text-on-accent); font-weight: 700; }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-secondary { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); }
.btn-secondary:hover { background: var(--color-bg-subtle); }
.btn-ghost { background: transparent; color: var(--color-accent); }
.btn-ghost:hover { background: var(--color-accent-faint); }
.btn-danger-ghost { background: transparent; color: var(--color-danger); border-color: transparent; }
.btn-danger-ghost:hover { background: var(--color-danger-soft); }
.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: var(--space-2) var(--space-3); font-size: 14px; }

/* ---- Inputs ---- */
label {
  display: block; font-size: 13px; font-weight: 500;
  color: var(--color-text); margin: var(--space-4) 0 var(--space-1);
}
input[type="text"], input[type="email"], input[type="password"] {
  font-family: var(--font-sans); font-size: 16px; /* >=16px stops iOS zoom-on-focus */
  background: var(--color-card); color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  min-height: 48px; width: 100%;
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-faint); }

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 64px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; cursor: pointer;
  color: var(--color-accent); font-weight: 600; font-size: 13px;
  padding: var(--space-2) var(--space-3); min-height: 36px; border-radius: var(--radius-sm);
}
.pw-toggle:hover { background: var(--color-accent-faint); }

.form-error {
  margin: var(--space-3) 0 0;
  background: var(--color-danger-soft); color: var(--color-danger);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  font-size: 14px; font-weight: 500;
}

/* ---- Pills ---- */
.pill {
  font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: var(--radius-full);
  background: var(--color-bg-subtle); color: var(--color-text-muted);
  display: inline-flex; align-items: center; gap: 4px;
}
.pill-success { background: var(--color-success-soft); color: var(--color-success); }
.pill-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.pill-accent  { background: var(--color-accent-soft);  color: var(--color-accent); }
.pill-info    { background: var(--color-info-soft);    color: var(--color-info); }

/* ---- Brand ---- */
.brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.brand-mark { border-radius: var(--radius-md); display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-weight: 800; font-size: 18px; color: var(--color-text-strong); letter-spacing: -0.01em; }
.brand-sub { font-size: 12px; color: var(--color-text-muted); }
.brand-sm { margin-bottom: 0; gap: var(--space-2); }
.brand-sm .brand-name { font-size: 16px; }

/* ---- Views / layout ---- */
/* The [hidden] attribute must beat the display rules below (.view-center,
   .view-app, etc. all set display:flex, which would otherwise override the
   UA [hidden]{display:none} and stack every view on top of each other). */
[hidden] { display: none !important; }
.view { min-height: 100vh; min-height: 100dvh; }
.view-center {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6);
  padding-top: max(var(--space-6), env(safe-area-inset-top));
  padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
}

/* ---- Spinner ---- */
.spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid var(--color-border); border-top-color: var(--color-accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Auth cards ---- */
.auth-card { width: 100%; max-width: 400px; }
.auth-intro { margin-bottom: var(--space-5); }
.auth-foot { margin: var(--space-5) 0 0; text-align: center; }
#login-form .btn-block, #setpw-form .btn-block { margin-top: var(--space-6); }

/* ============================================================
   App shell
   ============================================================ */
.view-app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

.app-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  height: calc(var(--header-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--space-4) 0;
  background: rgba(250,249,247,.9);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.app-header-right { display: flex; align-items: center; gap: var(--space-2); }
.app-greeting { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }

.app-main {
  flex: 1;
  width: 100%; max-width: 640px; margin: 0 auto;
  padding: var(--space-5) var(--space-4);
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-6));
}

.panel-head { margin-bottom: var(--space-5); }
.panel-head h2 { margin-bottom: var(--space-1); }

.tab-panel { animation: fade var(--motion-fast) var(--motion-easing); }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---- Credential cards ---- */
.cred-list { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.cred-item {
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4);
  box-shadow: var(--shadow-card);
  display: flex; align-items: flex-start; gap: var(--space-3);
}
.cred-item-icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-md);
  background: var(--color-accent-faint); color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
}
.cred-item-body { flex: 1; min-width: 0; }
.cred-item-label { font-weight: 600; color: var(--color-text-strong); }
.cred-item-user { font-size: 14px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cred-item-meta { margin-top: var(--space-2); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cred-item-actions { flex: 0 0 auto; }

.cred-form-card { margin-top: var(--space-2); }
.cred-form-help { margin-bottom: var(--space-2); }
.cred-form-actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
.cred-form-actions .btn-primary { flex: 1; }

/* ---- Empty / work states ---- */
.empty-state { text-align: center; padding: var(--space-10) var(--space-6); }
.empty-emoji { font-size: 40px; margin-bottom: var(--space-3); }
.work-list { display: flex; flex-direction: column; gap: var(--space-3); }
.work-item {
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-card);
}
.work-item-addr { font-weight: 600; color: var(--color-text-strong); }

/* ---- Bottom tab bar ---- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: space-around; align-items: stretch;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-top: 1px solid var(--color-border);
}
.tabbar-btn {
  flex: 1; background: transparent; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--color-text-muted); font-family: var(--font-sans);
  padding: var(--space-2) 0; min-height: 44px;
  transition: color var(--motion-fast) ease;
}
.tabbar-icon { display: flex; }
.tabbar-label { font-size: 11px; font-weight: 600; letter-spacing: 0.01em; }
.tabbar-btn.is-active { color: var(--color-accent); }
.tabbar-btn:active { transform: scale(0.96); }

/* ---- Toast ---- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-4));
  z-index: 50;
  max-width: calc(100vw - 32px);
  background: var(--color-text-strong); color: #fff;
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-full);
  box-shadow: var(--shadow-overlay); font-size: 14px; font-weight: 500;
  opacity: 0; transition: opacity var(--motion-fast) ease, transform var(--motion-fast) ease;
}
.toast.show { opacity: 1; }
.toast.toast-error { background: var(--color-danger); }
.toast.toast-success { background: var(--color-success); }

/* ---- Larger screens: center the app, keep it phone-width ---- */
@media (min-width: 720px) {
  .tabbar { max-width: 640px; left: 50%; transform: translateX(-50%); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
}

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