/* שער הצוות בעקרונות העיצוב של פורטל הלקוחות: רקע בהיר, סרגל עליון לבן, כחול-סגול של ישרים, כרטיסים מעוגלים.
   הקובץ נטען אחרי style.css (הבסיס של כלי החתימה) ומחליף את הצבעים והמבנה. */
:root {
  --night: #0F2547;
  --deep: #37399A;
  --purple: #4B3FB8;
  --lavender: #8C5BF0;
  --mist: #D2CCEB;
  --slate: #3A3857;
  --ground: #F6F5FC;
  --card: #FFFFFF;
  --line: #E7E4F3;
  --line-soft: #EFEDF7;
  --muted: #5B5F75;
  --tint: #EEF0FD;
  --navy-tint: #DCD6F7;
  --red-ink: #8E1F3B;
  --red-soft: #FDEEEF;
}
body { background: var(--ground); color: var(--night); }
.field:focus { box-shadow: 0 0 0 3px rgba(47,45,134,.15); }
.btn { border-radius: 14px; }
.btn.block { min-height: 54px; }
.notice { background: var(--tint); color: #2E2C7A; }

/* ---- כניסה: כמו מסך הכניסה של הפורטל ---- */
.auth { background: var(--ground); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 30px; padding: 56px 20px 32px; }
.auth .card { width: 100%; max-width: 440px; padding: 28px 22px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 1px 2px rgba(27,26,58,.06), 0 8px 24px rgba(27,26,58,.06); }
.auth .card h1 { font-size: 26px; }
.auth .lead { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
.logo-block { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.logo-block img { width: 96px; height: auto; }
.logo-block .word { font-weight: 900; font-size: 38px; line-height: 1; }
.logo-block .sub { font-size: 16px; color: var(--muted); letter-spacing: .5px; }
.authfoot { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.btn.google { background: #fff; color: var(--night); border: 1.5px solid var(--mist); gap: 12px; font-size: 17px; }
.btn.google:hover { background: #FAFAFD; color: var(--night); border-color: var(--purple); }

/* ---- מבנה המסכים הפנימיים: סרגל עליון לבן ---- */
.page { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; background: var(--card); border-bottom: 1px solid var(--line); color: var(--night); position: sticky; top: 0; z-index: 5; }
.topbar .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--night); }
.topbar .brand:hover { color: var(--night); }
.topbar .brand img { width: 38px; height: auto; }
.topbar .brand b { display: block; font-weight: 900; font-size: 23px; line-height: 1; }
.topbar .brand small { display: block; font-size: 12px; color: var(--muted); font-weight: 500; }
.topbar .end { display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--muted); }
.topbar .end form { margin: 0; }
.topbar .linkbtn { color: var(--purple); }
.topbar .linkbtn:hover { color: var(--deep); }
.tabs { display: flex; gap: 6px; padding: 12px 24px 0; max-width: 1040px; width: 100%; margin: 0 auto; flex-wrap: wrap; }
.tabs a { padding: 9px 16px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--muted); }
.tabs a:hover { background: var(--line-soft); color: var(--night); }
.tabs a.on { background: var(--purple); color: #fff; }
.main { max-width: 1040px; width: 100%; margin: 0 auto; padding: 22px 24px 48px; display: flex; flex-direction: column; gap: 20px; }
.pagehead h1 { font-size: 26px; }
.foot-meta { margin-top: auto; padding: 18px; text-align: center; font-size: 13px; color: var(--muted); }

/* כרטיס פתיחה כמו כרטיס התיק בפורטל */
.hero { background: linear-gradient(135deg, var(--deep), var(--lavender)); color: #fff; border-radius: 20px; padding: 24px 22px; display: flex; flex-direction: column; gap: 6px; }
.hero h1 { font-size: 26px; }
.hero p { color: var(--navy-tint); font-size: 15px; }

/* כרטיסי הכלים, כמו כפתורי יצירת הקשר בפורטל */
.sect { font-size: 17px; color: var(--muted); font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tile { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px; border-radius: 16px; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.tile.primary { background: linear-gradient(135deg, var(--deep), var(--purple)); color: #fff; }
.tile.primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(55,57,154,.8); }
.tile.secondary { background: #fff; border: 1.5px solid var(--mist); color: var(--night); }
.tile.secondary:hover { color: var(--night); border-color: var(--purple); transform: translateY(-2px); }
.tile-mark { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 800; }
.tile.primary .tile-mark { background: rgba(255,255,255,.16); color: #fff; }
.tile.secondary .tile-mark { background: #E9E8F7; color: var(--purple); }
.tile-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.tile-txt b { font-size: 17px; }
.tile-txt small { font-size: 14px; line-height: 1.35; }
.tile.primary small { color: var(--navy-tint); }
.tile.secondary small { color: var(--muted); }
.tile .chev, .tile .out { flex-shrink: 0; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .tile { transition: none; } .tile:hover { transform: none; } }

/* ניהול */
.tag { background: var(--line-soft); color: var(--deep); }
.tag.off { background: #ECEBEF; color: var(--muted); }
.rowlink { text-decoration: none; color: var(--night); border-radius: 12px; padding-inline: 8px; }
.rowlink:hover { background: var(--ground); color: var(--night); }
.checkcell { display: flex; align-items: flex-end; padding-bottom: 12px; }
.access { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 16px 14px; margin: 0; }
.access legend { font-weight: 700; padding: 0 6px; }
.access-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.access-row:first-of-type { border-top: 0; }
.field.sm { height: 42px; width: auto; min-width: 150px; font-size: 15px; }

@media (max-width: 760px) {
  .topbar, .tabs { padding-inline: 16px; }
  .main { padding: 18px 16px 40px; }
  .formgrid { grid-template-columns: 1fr; }
  .topbar .brand small, .topbar .end > span { display: none; }
}