/* ============================================================
   Te'utza - Brand styles
   Primary navy: #1A2F6F
   Accent coral: #F23D5E
   ============================================================ */

:root {
  --brand-primary:         #1A2F6F;
  --brand-primary-light:   #2A4190;
  --brand-primary-dark:    #11204D;
  --brand-primary-50:      #E8EDFA;
  --brand-primary-100:     #D0DAF5;

  --brand-accent:          #F23D5E;
  --brand-accent-light:    #FF6078;
  --brand-accent-dark:     #D12848;
  --brand-accent-50:       #FDE8EC;

  --bg:                    #F4F6FB;
  --surface:               #FFFFFF;
  --border:                #E4E8F1;
  --text:                  #1F2437;
  --muted:                 #6B7280;

  /* Section color palette — each functional area has its own identity */
  --sec-sales:             #3B82F6;   /* leads + jobs */
  --sec-sales-50:          #DBEAFE;
  --sec-sales-100:         #BFDBFE;

  --sec-employees:         #14B8A6;   /* employees + docs */
  --sec-employees-50:      #CCFBF1;
  --sec-employees-100:     #99F6E4;

  --sec-payroll:           #10B981;   /* salary + gemel */
  --sec-payroll-50:        #D1FAE5;
  --sec-payroll-100:       #A7F3D0;

  --sec-billing:           #8B5CF6;   /* billing + rates */
  --sec-billing-50:        #EDE9FE;
  --sec-billing-100:       #DDD6FE;

  --sec-office:            #F97316;   /* field + users + 101 */
  --sec-office-50:         #FFEDD5;
  --sec-office-100:        #FED7AA;

  --sec-slate:             #64748B;   /* branches + neutral operational */
  --sec-slate-50:          #F1F5F9;
  --sec-slate-100:         #E2E8F0;

  --sec-alert:             #EF4444;   /* requires action */
  --sec-alert-50:          #FEE2E2;
  --sec-alert-100:         #FECACA;
}

html { font-family: 'Heebo', system-ui, -apple-system, sans-serif; }
body { background: var(--bg); color: var(--text); }

/* Brand header */
.te-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 30;
}

.te-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.te-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  color: var(--text);
}

.te-brand img { height: 40px; width: auto; }

.te-brand-text { line-height: 1.1; }
.te-brand-text .name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--brand-primary);
}
.te-brand-text .tagline {
  font-size: .7rem;
  color: var(--brand-accent);
  letter-spacing: .01em;
}

/* Nav */
.te-nav {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.te-nav a {
  color: var(--muted);
  padding: .5rem .75rem;
  border-radius: .5rem;
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.te-nav a:hover { background: var(--brand-primary-50); color: var(--brand-primary); }
.te-nav a.active {
  background: var(--brand-primary);
  color: white;
}

/* Mobile hamburger */
.te-hamburger {
  display: none;
  background: none;
  border: none;
  padding: .5rem;
  cursor: pointer;
}
.te-hamburger svg { width: 24px; height: 24px; color: var(--brand-primary); }

@media (max-width: 768px) {
  .te-nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: .5rem;
    gap: 0;
  }
  .te-nav.open { display: flex; }
  .te-nav a { width: 100%; }
  .te-hamburger { display: block; }
  .te-brand-text .tagline { display: none; }
  .te-brand img { height: 32px; }
}

/* Utility surfaces */
.te-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: 1.25rem;
}

.te-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  transition: transform .15s, box-shadow .15s;
}
.te-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(26, 47, 111, 0.12);
}
.te-stat .label {
  font-size: .75rem;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: .25rem;
}
.te-stat .value {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--brand-primary);
  line-height: 1.2;
}
.te-stat .sub {
  font-size: .7rem;
  color: var(--muted);
  margin-top: .5rem;
}
.te-stat.accent .value { color: var(--brand-accent); }

/* Button */
.te-btn {
  background: var(--brand-primary);
  color: white;
  border: none;
  border-radius: .5rem;
  padding: .5rem 1rem;
  font-weight: 600;
  font-size: .875rem;
  cursor: pointer;
  transition: background .15s, transform .05s;
}
.te-btn:hover  { background: var(--brand-primary-light); }
.te-btn:active { transform: translateY(1px); }
.te-btn.accent { background: var(--brand-accent); }
.te-btn.accent:hover { background: var(--brand-accent-light); }
.te-btn.ghost  { background: transparent; color: var(--brand-primary); border: 1px solid var(--border); }
.te-btn.ghost:hover { background: var(--brand-primary-50); }
.te-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Input */
.te-input, .te-select {
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .5rem .75rem;
  font-size: .875rem;
  background: var(--surface);
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.te-input:focus, .te-select:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(26, 47, 111, 0.1);
}

/* Table */
.te-table {
  width: 100%;
  font-size: .875rem;
  border-collapse: collapse;
}
.te-table thead {
  background: var(--bg);
  color: var(--muted);
}
.te-table th {
  text-align: right;
  padding: .5rem .5rem;
  font-weight: 600;
  font-size: .7rem;
  text-transform: none;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--bg);
}
/* Sticky header */
.te-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
}
.te-table td {
  padding: .35rem .5rem;
  border-top: 1px solid var(--border);
  font-size: .78rem;
  white-space: nowrap;
}
/* Compact mode */
.te-table-compact td   { padding: .25rem .4rem; font-size: .75rem; }
.te-table-compact th   { padding: .4rem .4rem; font-size: .65rem; }
.te-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.te-table th.sortable:hover { background: var(--brand-primary-50); color: var(--brand-primary); }
.te-table th .sort-indicator {
  display: inline-block;
  margin-right: .25rem;
  font-size: .7rem;
  opacity: .4;
}
.te-table th.sorted .sort-indicator { opacity: 1; color: var(--brand-primary); }
.te-table tbody tr:hover {
  background: var(--brand-primary-50);
  cursor: default;
}
/* Sticky columns for wide tables */
.te-col-sticky-1 { position: sticky; z-index: 2; background: inherit; }
.te-col-sticky-1 { right: 0; }
.te-col-sticky-2 { position: sticky; z-index: 2; background: inherit; right: 2.5rem; }
.te-col-sticky-3 { position: sticky; z-index: 2; background: inherit; right: 6rem; }
.te-table thead .te-col-sticky-1,
.te-table thead .te-col-sticky-2,
.te-table thead .te-col-sticky-3 { z-index: 4; }
.te-table tbody td.te-col-sticky-1,
.te-table tbody td.te-col-sticky-2,
.te-table tbody td.te-col-sticky-3 {
  background: var(--surface);
  border-inline-start: 1px solid var(--border);
}
.te-table tbody tr:hover td.te-col-sticky-1,
.te-table tbody tr:hover td.te-col-sticky-2,
.te-table tbody tr:hover td.te-col-sticky-3 {
  background: var(--brand-primary-50);
}
.te-table tbody tr.te-row-approved td.te-col-sticky-1,
.te-table tbody tr.te-row-approved td.te-col-sticky-2,
.te-table tbody tr.te-row-approved td.te-col-sticky-3 {
  background: #F0FDF4;
}
.te-table tbody tr.te-row-inactive td.te-col-sticky-1,
.te-table tbody tr.te-row-inactive td.te-col-sticky-2,
.te-table tbody tr.te-row-inactive td.te-col-sticky-3 {
  background: #FAFBFD;
}

/* Scroll container with max height so header can stick inside */
.te-scroll-box {
  max-height: 75vh;
  overflow: auto;
  position: relative;
}

/* Truncate long text in columns (e.g., name / workplace / recruiter notes).
   Cell shows ellipsis with tooltip; on focus the editable span expands
   so the user can see and edit the full content. */
.te-col-truncate-sm,
.te-col-truncate-md,
.te-col-truncate-lg {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.te-col-truncate-sm { max-width: 9rem; }
.te-col-truncate-md { max-width: 12rem; }
.te-col-truncate-lg { max-width: 15rem; }
.te-col-truncate-sm .te-edit,
.te-col-truncate-md .te-edit,
.te-col-truncate-lg .te-edit {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.te-col-truncate-sm .te-edit:focus,
.te-col-truncate-md .te-edit:focus,
.te-col-truncate-lg .te-edit:focus {
  max-width: 28rem;
  white-space: normal;
  background: #FEF3C7;
  position: relative;
  z-index: 5;
  outline: 2px solid var(--brand-primary);
  padding: .15rem .25rem;
}

/* Inactive row */
.te-row-inactive td {
  color: #B0B5C1 !important;
  text-decoration: line-through;
  background: #FAFBFD;
}
.te-row-inactive .te-badge {
  text-decoration: none;
}

/* Approved row */
.te-row-approved {
  background: #F0FDF4;
}
.te-row-approved td { border-top-color: #BBF7D0 !important; }

/* Department separator row - one full-width colored band (single TD with colspan).
   Black text on LIGHT bg so RTL text stays readable at either edge.
   Two levels:
     .te-sep-branch  (bolder, lavender bg, city name)
     .te-sep-dept    (lighter, small, chain+segment like "אושר עד זרים") */
.te-row-separator {
  background: transparent !important;
}
.te-sep-cell {
  letter-spacing: .01em;
  text-align: right; /* RTL: title hugs right edge */
  font-weight: 700;
  color: #111 !important;
}

/* Level 1: branch (city) - prominent light band with accent bar */
.te-sep-cell.te-sep-branch {
  background: var(--brand-primary-50) !important;
  color: #111 !important;
  padding: .7rem 1.25rem !important;
  border-top: 3px solid var(--brand-accent) !important;
  border-bottom: 1px solid var(--brand-primary-100) !important;
  font-size: 1.05rem;
  box-shadow: inset 0 -1px 0 rgba(26, 47, 111, .08);
}
.te-sep-cell.te-sep-branch .te-sep-title {
  color: #111 !important;
  font-weight: 900;
  font-size: 1.1rem;
  margin-inline-end: 1rem;
}
.te-sep-cell.te-sep-branch .te-sep-title::before {
  content: '▌';
  color: var(--brand-accent);
  margin-inline-end: .5rem;
  font-weight: 900;
}
.te-sep-cell.te-sep-branch .te-sep-count {
  color: #111 !important;
  font-size: .8rem;
  font-weight: 600;
  background: #fff;
  padding: .15rem .6rem;
  border-radius: 999px;
  margin-inline-start: .5rem;
  border: 1px solid var(--brand-primary-100);
}

/* Level 2: department (chain + segment) - subtle inset row with black text */
.te-sep-cell.te-sep-dept {
  background: #F7F9FF !important;
  color: #111 !important;
  padding: .35rem 2.25rem !important;
  border-bottom: 1px solid var(--brand-primary-100) !important;
  font-size: .85rem;
}
.te-sep-cell.te-sep-dept .te-sep-title {
  color: #111 !important;
  font-weight: 700;
  font-size: .9rem;
  margin-inline-end: .75rem;
}
.te-sep-cell.te-sep-dept .te-sep-title::before {
  content: '●';
  color: var(--brand-accent);
  margin-inline-end: .5rem;
  font-size: .7rem;
}
.te-sep-cell.te-sep-dept .te-sep-count {
  color: #111 !important;
  font-size: .75rem;
  font-weight: 500;
  background: #fff;
  padding: .1rem .5rem;
  border-radius: 999px;
  margin-inline-start: .25rem;
  border: 1px solid var(--brand-primary-100);
}

/* Editable cell */
.te-edit {
  display: inline-block;
  min-width: 1rem;
  min-height: 1.25rem;
  padding: 2px 4px;
  margin: -2px -4px;
  border-radius: 3px;
  cursor: text;
  border: 1px dashed transparent;
  transition: border-color .12s, background .12s;
}
.te-edit:empty::before {
  content: '—';
  color: #CBD5E1;
}
.te-edit:hover { border-color: #CBD5E1; background: #FEFCE8; }
.te-edit:focus {
  outline: none;
  border-color: var(--brand-primary);
  background: #FFF;
  box-shadow: 0 0 0 2px rgba(26, 47, 111, 0.15);
}
.te-edit.saving  { background: #FEF3C7; border-color: #FDE68A; }
.te-edit.saved   { background: #D1FAE5; border-color: #A7F3D0; }
.te-edit.err     { background: #FEE2E2; border-color: #FCA5A5; }
.te-row-approved .te-edit:hover { background: #DEFAE4; }

/* Badge */
.te-badge {
  display: inline-block;
  padding: .125rem .5rem;
  border-radius: .375rem;
  font-size: .7rem;
  font-weight: 500;
}
.te-badge.blue   { background: var(--brand-primary-50);   color: var(--brand-primary); }
.te-badge.red    { background: var(--brand-accent-50);    color: var(--brand-accent-dark); }
.te-badge.green  { background: #DEF7E7; color: #14532D; }
.te-badge.amber  { background: #FEF3C7; color: #78350F; }
.te-badge.gray   { background: #F0F2F7; color: var(--muted); }
.te-badge.pink   { background: #FCE7F3; color: #9D174D; }
.te-badge.purple { background: #EDE9FE; color: #4C1D95; }

/* Alpine cloak - hide elements until Alpine initializes */
[x-cloak] { display: none !important; }

/* Modal backdrop */
.te-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 40, .5);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* Loading spinner */
.te-spinner {
  display: inline-block;
  width: 2.5rem; height: 2.5rem;
  border: 3px solid var(--brand-primary-100);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: te-spin .8s linear infinite;
}
@keyframes te-spin { to { transform: rotate(360deg); } }

/* Action icon button */
.te-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: .375rem;
  color: var(--muted);
  transition: background .15s, color .15s;
  cursor: pointer;
  border: none;
  background: transparent;
}
.te-icon-btn:hover { background: var(--brand-primary-50); color: var(--brand-primary); }
.te-icon-btn.whatsapp:hover { background: #DCFCE7; color: #15803D; }
.te-icon-btn svg { width: 1.125rem; height: 1.125rem; }

/* Main container */
.te-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}
@media (max-width: 768px) {
  .te-main { padding: 1rem .75rem; }
}
/* Wide variant for data-heavy pages */
.te-main-wide {
  max-width: none;
  margin: 0;
  padding: 1.25rem 1rem;
}

/* Grid helpers */
.te-grid { display: grid; gap: 1rem; }
.te-grid-stats  { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.te-grid-2      { grid-template-columns: 1fr; }
@media (min-width: 768px) { .te-grid-2 { grid-template-columns: 1fr 1fr; } }
.te-grid-3      { grid-template-columns: 1fr; }
@media (min-width: 768px) { .te-grid-3 { grid-template-columns: 2fr 1fr; } }
.te-grid-filters { grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 640px) { .te-grid-filters { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .te-grid-filters { grid-template-columns: repeat(4, 1fr); } }

/* Section heading */
.te-section-title {
  font-weight: 600;
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 1rem;
}

/* Tabs (used by employee card) */
.te-tabs {
  display: flex;
  gap: .25rem;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1rem;
  overflow-x: auto;
}
.te-tab {
  padding: .6rem 1.25rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
.te-tab:hover { color: var(--brand-primary); background: var(--brand-primary-50); }
.te-tab.active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-accent);
  background: #fff;
}
.te-tab .te-tab-count {
  display: inline-block;
  margin-inline-start: .4rem;
  padding: .05rem .4rem;
  background: var(--brand-primary-50);
  color: var(--brand-primary);
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
}
.te-tab.active .te-tab-count { background: var(--brand-accent-50); color: var(--brand-accent); }

/* Employee card header */
.te-emp-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1.25rem;
  background: linear-gradient(135deg, #fff 0%, var(--brand-primary-50) 100%);
  border: 1px solid var(--brand-primary-100);
  border-radius: .5rem;
  margin-bottom: 1rem;
}
.te-emp-photo {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--brand-primary-50);
  color: var(--brand-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 800;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(26, 47, 111, .15);
}
.te-emp-photo img { width:100%; height:100%; object-fit:cover; }
.te-emp-name { font-size: 1.5rem; font-weight: 700; color: var(--brand-primary); margin-bottom: .25rem; }
.te-emp-meta { color: var(--muted); font-size: .875rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.te-emp-meta strong { color: #111; font-weight: 500; }

/* Document card (for documents tab) */
.te-doc-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: border-color .15s, box-shadow .15s;
}
.te-doc-card:hover { border-color: var(--brand-primary-100); box-shadow: 0 2px 4px rgba(26,47,111,.06); }
.te-doc-card.has-doc { border-color: #BBF7D0; background: #F0FDF4; }
.te-doc-card.missing  { border-color: var(--brand-accent); background: #FEF7F8; }
.te-doc-card.expiring { border-color: #F59E0B; background: #FFFBEB; }
.te-doc-card.expired  { border-color: var(--brand-accent); background: #FEF2F2; }
.te-doc-card .doc-title { font-weight: 600; color: var(--brand-primary); font-size: .9rem; }
.te-doc-card .doc-status { font-size: .7rem; color: var(--muted); }
.te-doc-card .doc-actions { display: flex; gap: .25rem; margin-top: .25rem; }
.te-doc-card input[type="file"] { display: none; }

/* Page title */
.te-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand-primary);
  margin-bottom: .25rem;
}
.te-page-subtitle {
  color: var(--muted);
  font-size: .875rem;
  margin-bottom: 1.5rem;
}

/* ============================================================
   Section color accents — apply via class on <body> or container
   ============================================================ */
body.section-sales     { --sec: var(--sec-sales);     --sec-50: var(--sec-sales-50);     --sec-100: var(--sec-sales-100); }
body.section-employees { --sec: var(--sec-employees); --sec-50: var(--sec-employees-50); --sec-100: var(--sec-employees-100); }
body.section-payroll   { --sec: var(--sec-payroll);   --sec-50: var(--sec-payroll-50);   --sec-100: var(--sec-payroll-100); }
body.section-billing   { --sec: var(--sec-billing);   --sec-50: var(--sec-billing-50);   --sec-100: var(--sec-billing-100); }
body.section-office    { --sec: var(--sec-office);    --sec-50: var(--sec-office-50);    --sec-100: var(--sec-office-100); }

/* Page header with section accent bar */
.te-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, var(--sec-50, var(--brand-primary-50)) 0%, #fff 70%);
  border-radius: .75rem;
  margin-bottom: 1.5rem;
  border-right: 4px solid var(--sec, var(--brand-primary));
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.te-page-head .te-page-title {
  margin-bottom: .15rem;
}
.te-page-head .te-page-subtitle {
  margin-bottom: 0;
}

/* Section-accent strip on cards */
.section-accent-sales     { border-right: 4px solid var(--sec-sales); }
.section-accent-employees { border-right: 4px solid var(--sec-employees); }
.section-accent-payroll   { border-right: 4px solid var(--sec-payroll); }
.section-accent-billing   { border-right: 4px solid var(--sec-billing); }
.section-accent-office    { border-right: 4px solid var(--sec-office); }

/* Info / explainer card */
.te-info-card {
  background: #F9FAFB;
  border: 1px solid var(--border);
  border-right: 3px solid var(--sec, var(--brand-primary));
  border-radius: .5rem;
  padding: .85rem 1.1rem;
  margin-bottom: 1.5rem;
  font-size: .875rem;
  color: var(--text);
}

/* Modern grouped navigation (replaces the flat list) */
.te-nav-grouped {
  display: flex;
  gap: 1.25rem;
  /* No horizontal scroll — the collapsed variant sizes each item to fit. */
  flex-wrap: nowrap;
  min-width: 0;
}
.te-nav-group {
  display: flex;
  align-items: center;
  padding: 0 .5rem;
  border-radius: .5rem;
  position: relative;
}
.te-nav-group::after {
  content: '';
  display: block;
  width: 3px;
  height: 1.4rem;
  background: var(--group-color, var(--brand-primary));
  border-radius: 999px;
  position: absolute;
  left: -.65rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: .4;
}
.te-nav-group:last-child::after { display: none; }
.te-nav-group a {
  position: relative;
  color: var(--text);
  text-decoration: none;
  padding: .4rem .7rem;
  border-radius: .4rem;
  font-size: .82rem;
  font-weight: 500;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.te-nav-group a:hover {
  background: var(--group-bg-50, var(--brand-primary-50));
  color: var(--group-color, var(--brand-primary));
}
.te-nav-group a.active {
  background: var(--group-color, var(--brand-primary));
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--group-color, var(--brand-primary)) 40%, transparent);
}

/* Highlight entire group when one of its pages is active */
.te-nav-group.active-group {
  background: var(--group-bg-50, var(--brand-primary-50));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--group-color) 35%, transparent);
}
.te-nav-group.active-group::after {
  opacity: 1;
  background: var(--group-color, var(--brand-primary));
}

/* ============================================================
   Premium nav style — SaaS-grade (Stripe / Linear inspired).
   Clean white surface · typographic hierarchy · underline accents.
   No pastel pills. Subtle but confident.
   ============================================================ */
.te-nav-collapsed {
  gap: .05rem;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

/* Each group is a clean text button with a colored underline on hover/active */
.te-nav-collapsed .te-nav-group,
.te-nav-collapsed a.te-nav-group-single {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem .65rem;
  border-radius: .5rem;
  background: transparent;
  cursor: pointer;
  position: relative;
  font-weight: 600;
  color: #334155;
  font-size: .82rem;
  letter-spacing: .01em;
  text-decoration: none;
  border: none;
  transition: color .15s, background .15s;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Narrower screens — tighten the padding so everything fits without scroll */
@media (max-width: 1300px) {
  .te-nav-collapsed .te-nav-group,
  .te-nav-collapsed a.te-nav-group-single {
    padding: .55rem .45rem;
    font-size: .78rem;
    gap: .3rem;
  }
  .te-nav-collapsed .te-nav-group-caret {
    display: none;
  }
}
@media (max-width: 1150px) {
  .te-header-modern .te-brand-text { display: none; }
  .te-nav-collapsed .te-nav-group,
  .te-nav-collapsed a.te-nav-group-single {
    padding: .5rem .4rem;
    font-size: .75rem;
  }
}
.te-nav-collapsed .te-nav-group::after,
.te-nav-collapsed a.te-nav-group-single::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -.1rem;
  left: .5rem;
  right: .5rem;
  height: 2px;
  background: var(--group-color, var(--brand-primary));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
  opacity: 0;
}
.te-nav-collapsed .te-nav-group:hover,
.te-nav-collapsed a.te-nav-group-single:hover {
  color: var(--group-color, var(--brand-primary));
  background: color-mix(in srgb, var(--group-color, var(--brand-primary)) 6%, transparent);
}
.te-nav-collapsed .te-nav-group:hover::after,
.te-nav-collapsed a.te-nav-group-single:hover::after {
  transform: scaleX(1);
  opacity: 1;
}

/* Active group — solid underline + filled label color (no background fill) */
.te-nav-collapsed .te-nav-group.active-group,
.te-nav-collapsed a.te-nav-group-single.active-group {
  color: var(--group-color, var(--brand-primary));
  background: transparent;
}
.te-nav-collapsed .te-nav-group.active-group::after,
.te-nav-collapsed a.te-nav-group-single.active-group::after {
  transform: scaleX(1);
  opacity: 1;
  height: 3px;
  bottom: -.3rem;
}

.te-nav-collapsed .te-nav-group-icon {
  font-size: .95rem;
  line-height: 1;
  filter: grayscale(.2);
  opacity: .85;
}
.te-nav-collapsed .te-nav-group:hover .te-nav-group-icon,
.te-nav-collapsed .te-nav-group.active-group .te-nav-group-icon,
.te-nav-collapsed a.te-nav-group-single:hover .te-nav-group-icon,
.te-nav-collapsed a.te-nav-group-single.active-group .te-nav-group-icon {
  filter: none;
  opacity: 1;
}
.te-nav-collapsed .te-nav-group-label { font-weight: 600; }
.te-nav-collapsed .te-nav-group-caret {
  font-size: .6rem;
  opacity: .4;
  margin-inline-start: .1rem;
  transition: transform .15s;
}
.te-nav-collapsed .te-nav-group:hover .te-nav-group-caret,
.te-nav-collapsed .te-nav-group.open .te-nav-group-caret {
  transform: rotate(180deg);
  opacity: .8;
}

/* Premium dropdown — subtle shadow, refined spacing */
.te-nav-dropdown {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  min-width: 240px;
  background: #fff;
  border-radius: .65rem;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, .05),
    0 20px 40px -12px rgba(15, 23, 42, .15),
    0 8px 16px -4px rgba(15, 23, 42, .06);
  padding: .5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(.98);
  transform-origin: top right;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 100;
}
.te-nav-dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 1.25rem;
  width: 12px;
  height: 12px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: -1px -1px 0 rgba(15, 23, 42, .05);
}
.te-nav-collapsed .te-nav-group:hover .te-nav-dropdown,
.te-nav-collapsed .te-nav-group:focus-within .te-nav-dropdown,
.te-nav-collapsed .te-nav-group.open .te-nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.te-nav-dropdown a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .75rem;
  border-radius: .4rem;
  color: #1e293b;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 500;
  transition: background .1s, color .1s, padding .15s;
  white-space: nowrap;
  border-inline-start: 3px solid transparent;
}
.te-nav-dropdown a:hover {
  background: color-mix(in srgb, var(--group-color, var(--brand-primary)) 6%, transparent);
  color: var(--group-color, var(--brand-primary));
  border-inline-start-color: var(--group-color, var(--brand-primary));
  padding-inline-start: 1rem;
}
.te-nav-dropdown a.active {
  background: color-mix(in srgb, var(--group-color, var(--brand-primary)) 10%, transparent);
  color: var(--group-color, var(--brand-primary));
  font-weight: 600;
  border-inline-start-color: var(--group-color, var(--brand-primary));
}

/* User badge — compact premium chip on the far left */
.te-user-badge {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem .5rem .35rem .75rem;
  border-radius: 2rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: box-shadow .15s, transform .15s;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
}
.te-user-badge:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
  transform: translateY(-1px);
}
.te-user-menu {
  position: absolute;
  top: calc(100% + .35rem);
  inset-inline-end: 0;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: .55rem;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .15);
  min-width: 12rem;
  padding: .35rem 0;
  z-index: 200;
  display: none;
}
.te-user-badge.open .te-user-menu { display: block; }
.te-user-menu a {
  display: block;
  padding: .55rem .85rem;
  color: #1e293b;
  font-size: .82rem;
  text-decoration: none;
  white-space: nowrap;
}
.te-user-menu a:hover {
  background: var(--brand-primary-50);
  color: var(--brand-primary);
}
.te-user-menu a#te-logout-link {
  border-top: 1px solid rgba(15, 23, 42, .08);
  color: #b91c1c;
  margin-top: .25rem;
}
.te-user-menu a#te-logout-link:hover {
  background: #FEE2E2;
  color: #991B1B;
}
.te-user-badge-text { line-height: 1.15; text-align: end; }
.te-user-badge-name {
  font-weight: 700; font-size: .78rem; color: #1e293b;
  letter-spacing: .01em;
  white-space: nowrap;
}
.te-user-badge-role {
  font-size: .65rem;
  color: var(--brand-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.te-user-badge-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.3), transparent 60%),
    linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-primary) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .03em;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .15);
  flex-shrink: 0;
}

/* Modern header shell — clean, restrained, premium */
.te-header-modern {
  background: #fff;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
}
.te-header-modern .te-header-inner {
  padding: .6rem 1.5rem;
  gap: 1rem;
  max-width: 1480px;
  align-items: center;
}
.te-header-modern .te-brand {
  flex-shrink: 0;
  padding-inline-end: 1rem;
  margin-inline-end: .5rem;
  border-inline-end: 1px solid rgba(15, 23, 42, .08);
}
.te-header-modern .te-brand img { height: 36px; }
.te-header-modern .te-brand-text .name {
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .01em;
}
.te-header-modern .te-brand-text .tagline {
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--brand-accent);
}

/* Mobile — stack groups vertically with colored left bar */
@media (max-width: 900px) {
  .te-nav-collapsed {
    flex-direction: column;
    gap: .4rem;
    padding: .5rem;
    align-items: stretch;
  }
  .te-nav-collapsed .te-nav-group {
    justify-content: flex-start;
    border-inline-end: 4px solid var(--group-color, var(--brand-primary));
    background: var(--group-bg-50, var(--brand-primary-50));
  }
  .te-nav-collapsed .te-nav-group-caret { margin-inline-start: auto; }
  .te-nav-dropdown {
    position: static;
    box-shadow: none;
    border: none;
    background: transparent;
    padding-inline-start: 1.5rem;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
  }
  .te-nav-dropdown a {
    padding: .4rem .5rem;
    font-size: .8rem;
  }
  .te-user-badge { display: none; }
}

/* Fallback for older non-collapsed nav */
@media (max-width: 768px) {
  .te-nav-grouped:not(.te-nav-collapsed) {
    flex-direction: column;
    gap: .5rem;
    padding: .5rem;
  }
  .te-nav-grouped:not(.te-nav-collapsed) .te-nav-group {
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
    padding: .5rem;
    border-inline-end: 4px solid var(--group-color, var(--brand-primary));
    background: var(--group-bg-50, var(--brand-primary-50));
  }
  .te-nav-grouped:not(.te-nav-collapsed) .te-nav-group::after { display: none; }
  .te-nav-grouped:not(.te-nav-collapsed) .te-nav-group a { width: 100%; padding: .5rem .75rem; }
}

/* User card — colored avatar + role coloring */
.te-user-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: .6rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  transition: transform .15s, box-shadow .15s;
}
.te-user-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
}
.te-user-card.role-ops_manager { border-top: 3px solid var(--brand-accent); }
.te-user-card.role-field_rep   { border-top: 3px solid var(--sec-office); }
.te-user-card.role-office      { border-top: 3px solid var(--sec-sales); }
.te-user-card.role-payroll     { border-top: 3px solid var(--sec-payroll); }
.te-user-card.inactive {
  opacity: .55;
  background: #F9FAFB;
}

.te-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}

/* Permission matrix (settings page) */
.te-perm-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .85rem;
  background: #fff;
  border-radius: .5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.te-perm-matrix th {
  background: #F3F4F6;
  font-weight: 600;
  padding: .6rem .5rem;
  text-align: center;
  color: var(--brand-primary);
  font-size: .75rem;
}
.te-perm-matrix th:first-child { text-align: right; min-width: 12rem; }
.te-perm-matrix td {
  padding: .35rem .4rem;
  text-align: center;
  border-top: 1px solid var(--border);
}
.te-perm-matrix td:first-child {
  text-align: right;
  font-weight: 500;
  padding-inline-start: 1rem;
}
.te-perm-matrix tbody tr:hover { background: #FAFBFC; }
.te-perm-matrix .section-row td {
  background: var(--sec-50, #F3F4F6);
  font-weight: 700;
  color: var(--sec, var(--brand-primary));
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.te-perm-cell {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .5rem;
  border-radius: .25rem;
  font-size: .7rem;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  transition: all .12s;
}
.te-perm-cell.none   { background: #FEE2E2; color: #991B1B; }
.te-perm-cell.view   { background: #E0E7FF; color: #3730A3; }
.te-perm-cell.edit   { background: #FEF3C7; color: #78350F; }
.te-perm-cell.full   { background: #D1FAE5; color: #065F46; }
.te-perm-cell:hover  { border-color: currentColor; }

/* Modern stat cards with gradients — each variant sets --sec so .value can pick it up */
.te-stat.sec-sales     { --sec: var(--sec-sales);     background: linear-gradient(135deg, var(--sec-sales-50), #fff); border-top-color: var(--sec-sales); }
.te-stat.sec-employees { --sec: var(--sec-employees); background: linear-gradient(135deg, var(--sec-employees-50), #fff); border-top-color: var(--sec-employees); }
.te-stat.sec-payroll   { --sec: var(--sec-payroll);   background: linear-gradient(135deg, var(--sec-payroll-50), #fff); border-top-color: var(--sec-payroll); }
.te-stat.sec-billing   { --sec: var(--sec-billing);   background: linear-gradient(135deg, var(--sec-billing-50), #fff); border-top-color: var(--sec-billing); }
.te-stat.sec-office    { --sec: var(--sec-office);    background: linear-gradient(135deg, var(--sec-office-50), #fff); border-top-color: var(--sec-office); }
.te-stat.sec-slate     { --sec: var(--sec-slate);     background: linear-gradient(135deg, var(--sec-slate-50), #fff); border-top-color: var(--sec-slate); }
.te-stat.sec-alert     { --sec: var(--sec-alert);     background: linear-gradient(135deg, var(--sec-alert-50), #fff); border-top-color: var(--sec-alert); }
.te-stat[class*="sec-"] .value { color: var(--sec); }
.te-stat .stat-emoji { font-size: 1.4rem; opacity: .55; margin-inline-end: .25rem; vertical-align: -2px; }

/* Row dividers between stat groups (e.g. "ניהולי" vs "תפעולי") */
.te-row-label {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  margin: .5rem 0 .35rem 0;
}
.te-row-label:first-of-type { margin-top: 0; }

/* Page footer — credit + version, rendered by layout.js */
.te-footer {
  text-align: center;
  color: var(--muted);
  font-size: .7rem;
  padding: 1.5rem 1rem 1rem 1rem;
  margin-top: 2rem;
  opacity: .8;
}

/* ============================================================ */
/* Month picker (year stepper + 4×3 month grid)                 */
/* ============================================================ */
.te-mp { position: relative; }
.te-mp-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .5rem .75rem;
  font: inherit;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.te-mp-trigger:hover { border-color: var(--brand-primary); }
.te-mp-trigger:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
.te-mp-trigger-label { font-weight: 600; color: var(--text); }
.te-mp-trigger-arrow { color: var(--muted); transition: transform .15s; }
.te-mp-trigger-arrow.open { transform: rotate(180deg); }

.te-mp-pop {
  position: absolute;
  top: calc(100% + .35rem);
  inset-inline-start: 0;
  z-index: 50;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .65rem;
  box-shadow: 0 12px 32px rgba(26, 47, 111, .15);
  padding: .65rem;
  min-width: 280px;
}

.te-mp-year-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .25rem .5rem .65rem .5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .65rem;
}
.te-mp-year { font-weight: 700; font-size: 1.05rem; color: var(--brand-primary); }
.te-mp-step {
  background: var(--brand-primary-50);
  color: var(--brand-primary);
  border: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 1.1rem; font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .05s;
}
.te-mp-step:hover:not(:disabled) { background: var(--brand-primary); color: #fff; }
.te-mp-step:active:not(:disabled) { transform: scale(.92); }
.te-mp-step:disabled { opacity: .3; cursor: not-allowed; }

.te-mp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .35rem;
}
.te-mp-cell {
  background: transparent;
  border: 1px solid transparent;
  border-radius: .4rem;
  padding: .55rem .25rem;
  font: inherit; font-weight: 500;
  color: #C7CCD3;            /* greyed when no data */
  cursor: not-allowed;
  text-align: center;
  transition: all .12s;
}
.te-mp-cell.has-data {
  color: var(--text);
  background: var(--brand-primary-50);
  cursor: pointer;
}
.te-mp-cell.has-data:hover {
  background: var(--brand-primary);
  color: #fff;
  transform: translateY(-1px);
}
.te-mp-cell.selected {
  background: var(--brand-primary) !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(26,47,111,.3);
}

/* Cross-month search toggle (summaries.html) */
.te-toggle-allmonths {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--sec-payroll-50);
  color: var(--sec-payroll);
  border: 1px solid transparent;
  padding: .4rem .7rem;
  border-radius: .5rem;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: all .15s;
}
.te-toggle-allmonths:hover { border-color: var(--sec-payroll); }
.te-toggle-allmonths.active {
  background: var(--sec-payroll);
  color: #fff;
  box-shadow: 0 2px 6px rgba(16, 185, 129, .3);
}
.te-toggle-allmonths input { margin: 0; cursor: pointer; }

[x-cloak] { display: none !important; }
.te-stat {
  border-top: 3px solid var(--brand-primary);
  border-radius: .5rem;
  padding: 1rem 1.1rem;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
  transition: transform .15s, box-shadow .15s;
}
.te-stat:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}