/* =============================================================================
   home.css — page stylesheet for index.html (מסך הבית).
   WAVE2 RUN E (2026-08-07): the home screen adopts mockup option A
   (docs/ui-proposals-2026-07-28/01-home-shell/home.html) under rule R2 —
   grouped module tiles by workflow + a quick-actions row + inline PIN card.
   Extracted from index.html's former inline <style>; page-scoped, single host.
   Design-language primitives (.purpose, .pill-phase2, .tip, .skeleton-*) come
   from shared/css/design-language-primitives.css — linked, never redefined here.
   ============================================================================= */

/* ---- page base (kept from the pre-dress inline styles) ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Heebo', sans-serif; background: var(--color-gray-100); color: #1a2744; min-height: 100vh; direction: rtl; }

/* ---- pre-login identity header (post-login the app-shell header replaces it) ---- */
.home-header { height: 60px; background: var(--primary); color: var(--color-white); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
.home-header .brand { display: flex; align-items: center; gap: 10px; }
.home-header .brand-icon { font-size: var(--font-size-2xl, 1.8rem); }
.home-header .brand-title { font-size: var(--font-size-xl, 1.5rem); font-weight: 700; }
.home-header .brand-sub { font-size: var(--font-size-sm, .85rem); opacity: .7; margin-inline-end: 4px; }
.home-header .brand-logo,
.home-header .brand-logo-placeholder { width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); object-fit: cover; }
.home-header .hdr-clock { font-size: var(--font-size-sm, .85rem); opacity: .85; }
.home-header .user-info { display: flex; align-items: center; gap: 12px; font-size: var(--font-size-md, .9rem); }
.home-header .user-info.hidden { display: none; }
.home-header .logout-btn { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); color: var(--color-white); padding: 6px 14px; border-radius: 8px; cursor: pointer; font-family: 'Heebo', sans-serif; font-size: var(--font-size-sm, .85rem); transition: background .2s; }
.home-header .logout-btn:hover { background: rgba(255,255,255,.25); }

.hidden { display: none !important; }

/* ---- purpose strips (design language §1·א) — width capped for readability ---- */
.home-purpose { max-width: 1180px; margin: 14px auto 0; padding: 0 20px; }
.home-purpose .purpose { max-width: 90ch; }

/* =============================================================================
   PRE-LOGIN — inline PIN card + keypad + locked-modules preview (option A)
   ============================================================================= */
.prelogin-zone { display: flex; align-items: flex-start; justify-content: center; padding: 26px 20px 46px; gap: 34px; flex-wrap: wrap; }

.pincard { background: var(--color-white); border-radius: 18px; box-shadow: 0 10px 36px rgba(15,23,42,.16); padding: 30px 30px 26px; width: 360px; max-width: 94vw; text-align: center; }
.pincard .pc-logo { width: 52px; height: 52px; border-radius: 50%; background: var(--primary); color: var(--color-white); font-weight: 800; font-size: var(--font-size-xl, 1.4rem); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.pincard h2 { font-size: var(--font-size-xl, 1.2rem); }
.pincard .pc-tenant { font-size: var(--font-size-sm, .85rem); color: var(--color-gray-500); margin-bottom: 16px; }

.pc-steps { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 0 0 14px; }
.pc-steps .st { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-xs, .78rem); color: var(--color-gray-500); font-weight: 600; }
.pc-steps .st .b { width: 22px; height: 22px; border-radius: 50%; background: var(--color-gray-200); color: var(--color-gray-600); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xs, .75rem); font-weight: 800; }
.pc-steps .st.on { color: var(--primary); }
.pc-steps .st.on .b { background: var(--primary); color: var(--color-white); }
.pc-steps .ln { width: 34px; height: 2px; background: var(--color-gray-300); border-radius: 2px; }

.pm-pin-single { direction: ltr; width: 100%; height: 56px; text-align: center; letter-spacing: 10px; font-size: var(--font-size-2xl, 1.6rem); border: 2px solid var(--color-gray-300); border-radius: 12px; outline: none; font-family: 'Heebo', sans-serif; background: var(--color-gray-50); transition: border-color .2s; margin-bottom: 12px; }
.pm-pin-single:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,39,68,.15); }
.pm-pin-single:disabled { background: var(--color-gray-100); cursor: not-allowed; }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 14px; }
.keypad button { font-family: inherit; font-size: var(--font-size-xl, 1.25rem); font-weight: 600; padding: 13px 0; border-radius: 12px; border: 1px solid var(--color-gray-200); background: var(--color-white); cursor: pointer; color: #1a2744; }
.keypad button:hover { background: #eef2ff; border-color: var(--primary); }
.keypad button:disabled { background: var(--color-gray-100); color: var(--color-gray-400); cursor: not-allowed; }
.keypad .fn { font-size: var(--font-size-sm, .88rem); color: var(--color-gray-500); }

.pm-submit { width: 100%; padding: 13px; background: var(--primary); color: var(--color-white); border: none; border-radius: 12px; font-size: var(--font-size-md, 1rem); font-weight: 700; cursor: pointer; font-family: 'Heebo', sans-serif; }
.pm-submit:hover { filter: brightness(1.08); }
.pm-submit:disabled { background: var(--color-gray-400); cursor: not-allowed; }

.pinhelp { margin-top: 12px; font-size: var(--font-size-xs, .8rem); color: var(--color-gray-500); line-height: 1.7; background: var(--color-gray-50); border-radius: 10px; padding: 9px 12px; text-align: start; }

/* the three answer states — drawn like the mockup (council 01-C3), driven by JS */
.pin-state { display: none; margin-top: 10px; border-radius: 10px; padding: 8px 12px; font-size: var(--font-size-sm, .82rem); text-align: start; }
.pin-state.show { display: block; }
.pin-state .pin-sub { opacity: .8; font-size: var(--font-size-xs, .75rem); }
#pm-wait  { background: var(--color-info-light, #eff6ff); border: 1px solid #bfdbfe; color: var(--color-info-dark, #1e40af); }
#pm-error { background: var(--color-error-light, #fee2e2); border: 1px solid #fca5a5; color: var(--color-error-dark, #991b1b); font-weight: 600; }
#pm-error.pin-lock { background: var(--color-warning-light, #fff7ed); border-color: #fdba74; color: var(--color-warning-dark, #9a3412); }

/* locked-modules preview beside the card */
.lockedgrid { width: 420px; max-width: 90vw; }
.lockedgrid .cap { font-size: var(--font-size-sm, .85rem); color: var(--color-gray-500); margin-bottom: 10px; text-align: center; }
.minitiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; filter: grayscale(.35); opacity: .75; }
.minitiles .mt { background: var(--color-white); border-radius: 10px; padding: 13px 6px; text-align: center; font-size: var(--font-size-xs, .78rem); font-weight: 600; color: var(--color-gray-600); box-shadow: 0 2px 8px rgba(0,0,0,.07); position: relative; }
.minitiles .mt .mi { font-size: var(--font-size-lg, 1.1rem); display: block; margin-bottom: 4px; }
.minitiles .mt::after { content: '🔒'; position: absolute; top: 4px; inset-inline-end: 5px; font-size: var(--font-size-xs, 0.75rem); }

/* =============================================================================
   POST-LOGIN — greeting + quick actions + grouped tiles (option A)
   ============================================================================= */
.home-hello { max-width: 1180px; margin: 20px auto 0; padding: 0 20px; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 8px; }
.home-hello h2 { font-size: var(--font-size-2xl, 1.4rem); }
.home-hello .dt { font-size: var(--font-size-sm, .85rem); color: var(--color-gray-500); }

.qa { max-width: 1180px; margin: 14px auto 6px; padding: 0 20px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 12px; }
.qa .q { background: var(--color-white); border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.07); padding: 16px; display: flex; gap: 12px; align-items: center; cursor: pointer; border: 1px solid var(--color-gray-200); text-decoration: none; color: inherit; }
.qa .q:hover { box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.qa .q .qi { width: 44px; height: 44px; border-radius: 12px; background: #eef2ff; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xl, 1.4rem); flex: none; }
.qa .q .ql { font-weight: 700; font-size: var(--font-size-md, .95rem); }
.qa .q .qd { font-size: var(--font-size-xs, .78rem); color: var(--color-gray-500); }
.qa .q.main { background: var(--primary); color: var(--color-white); border-color: var(--primary); }
.qa .q.main .qi { background: rgba(255,255,255,.16); }
.qa .q.main .qd { color: rgba(255,255,255,.75); }

.grp { max-width: 1180px; margin: 18px auto 0; padding: 0 20px; }
.grp:last-of-type { padding-bottom: 30px; }
.grp h3 { font-size: var(--font-size-sm, .85rem); color: var(--color-gray-500); font-weight: 700; letter-spacing: .3px; margin-bottom: 9px; display: flex; align-items: center; gap: 7px; }
.grp h3::after { content: ''; flex: 1; height: 1px; background: var(--color-gray-200); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 12px; }
.tile { background: var(--color-white); border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.07); padding: 16px 14px; display: flex; gap: 11px; align-items: center; cursor: pointer; position: relative; border: 1px solid var(--color-gray-200); transition: transform .15s; text-decoration: none; color: #1a2744; }
.tile:hover { transform: translateY(-2px); }
.tile .ti { font-size: var(--font-size-xl, 1.4rem); flex: none; }
.tile .tl { font-weight: 700; font-size: var(--font-size-md, .9rem); line-height: 1.3; }
.tile .td { font-size: var(--font-size-xs, .74rem); color: var(--color-gray-500); line-height: 1.4; }
/* no permission: dimmed, not clickable, and the lock explains itself (mockup: no silent 🔒) */
.tile.lock { opacity: .62; cursor: not-allowed; }
.tile.lock .lk { position: absolute; top: 8px; inset-inline-end: 8px; }
.tile.lock .lk .tip { background: var(--color-gray-200); }

/* loading skeleton until the session answer arrives (mockup "מצבים שהיו חסרים") */
.home-skeleton { max-width: 1180px; margin: 24px auto; padding: 0 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 12px; }
.home-skeleton .skl { height: 58px; border-radius: 12px; background: linear-gradient(90deg, #e9edf3 25%, #f6f8fb 50%, #e9edf3 75%); background-size: 200% 100%; animation: home-shim 1.4s infinite; }
@keyframes home-shim { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* empty state — logged in, zero permissions (mockup option A, view 3) */
.home-empty { max-width: 520px; margin: 26px auto; background: var(--color-white); border: 1.5px dashed var(--color-gray-300); border-radius: 14px; padding: 28px 26px; text-align: center; }
.home-empty .ic { font-size: var(--font-size-2xl, 1.8rem); margin-bottom: 8px; }
.home-empty h3 { font-size: var(--font-size-lg, 1.05rem); margin-bottom: 6px; }
.home-empty p { font-size: var(--font-size-sm, .85rem); color: var(--color-gray-600); line-height: 1.7; }
.home-empty ol { text-align: start; display: inline-block; margin: 10px 0 0; font-size: var(--font-size-sm, .85rem); color: var(--color-gray-700); line-height: 2; padding-inline-start: 20px; }

.home-footer { text-align: center; padding: 24px; color: var(--color-gray-400); font-size: var(--font-size-xs, .78rem); margin-top: 20px; }

@media (max-width: 900px) {
  .qa { grid-template-columns: 1fr 1fr; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
}