/* ── App Styles — נתראה בשמחות ────────────────────────────────────────────── */

/* Reset & base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  direction: rtl;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-primary-dark);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary-light); text-decoration: underline; }

/* ── Layout ────────────────────────────────────────────────────────────────── */

#app { min-height: 100vh; display: flex; flex-direction: column; }

.layout {
  display: flex;
  flex: 1;
  margin-top: var(--topbar-height);
}

/* ── Topbar ────────────────────────────────────────────────────────────────── */

.topbar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--topbar-height);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--space-6);
  box-shadow: var(--shadow-md);
  z-index: 100;
}

.topbar__brand {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-gold-light);
  letter-spacing: 0.01em;
}

/* ── Sidebar ───────────────────────────────────────────────────────────────── */

.sidebar {
  width: var(--sidebar-width);
  background: var(--color-white);
  border-inline-end: 1px solid var(--color-border);
  padding-block: var(--space-6);
  flex-shrink: 0;
}

.sidebar__nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sidebar__link {
  display: block;
  padding: var(--space-3) var(--space-6);
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
  border-radius: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebar__link:hover {
  background: var(--color-surface);
  color: var(--color-primary);
  text-decoration: none;
}
.sidebar__link--active {
  background: var(--color-accent-sky-light);
  color: var(--color-primary-dark);
  border-inline-start: 3px solid var(--color-primary);
}

/* ── Main content ──────────────────────────────────────────────────────────── */

.main-content {
  flex: 1;
  padding: var(--space-8);
  max-width: calc(var(--content-max) - var(--sidebar-width));
  overflow-y: auto;
}

/* ── Login page ────────────────────────────────────────────────────────────── */

.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-sky) 100%);
  padding: var(--space-6);
}

.login-header {
  margin-block-end: var(--space-8);
  text-align: center;
}

.brand {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  color: var(--color-white);
  text-shadow: 0 2px 8px rgb(0 0 0 / 0.25);
}

.login-card {
  background: var(--color-surface-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-10);
  width: 100%;
  max-width: 420px;
}

.login-card__title {
  font-size: var(--text-2xl);
  text-align: center;
  margin-block-end: var(--space-6);
  color: var(--color-primary-dark);
}

.login-card__hint {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-align: center;
  margin-block-end: var(--space-6);
}

/* ── Form components ───────────────────────────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-end: var(--space-5);
}

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.field__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: var(--font-body);
  color: var(--color-text-primary);
  background: var(--color-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}
.field__input:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgb(127 182 230 / 0.25);
}
.field__input--code {
  letter-spacing: 0.3em;
  text-align: center;
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
}

.field--checkbox { flex-direction: row; align-items: center; }

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  text-decoration: none;
}
.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
}
.btn--primary:hover { background: var(--color-primary-light); color: var(--color-white); text-decoration: none; }

.btn--ghost {
  background: transparent;
  color: var(--color-text-inverse);
  border: 1px solid rgb(255 255 255 / 0.4);
}
.btn--ghost:hover { background: rgb(255 255 255 / 0.1); color: var(--color-text-inverse); text-decoration: none; }

.btn--full { width: 100%; margin-block-start: var(--space-4); }

/* ── Alerts ────────────────────────────────────────────────────────────────── */

.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-block-end: var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.alert--error   { background: var(--color-error-bg);   color: var(--color-error);   border: 1px solid var(--color-error); }
.alert--success { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success); }
.alert--warning { background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid var(--color-warning); }

/* ── Toast container ───────────────────────────────────────────────────────── */

#toast-container {
  position: fixed;
  inset-block-end: var(--space-6);
  inset-inline-end: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  z-index: 999;
}

/* ── Dashboard ─────────────────────────────────────────────────────────────── */

.dashboard {
  padding: var(--space-6);
}
.dashboard h2 {
  font-size: var(--text-2xl);
  margin-block-end: var(--space-4);
}

/* ── Page header ───────────────────────────────────────────────────────────── */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--space-6);
}
.page-header__title {
  font-size: var(--text-2xl);
  color: var(--color-primary-dark);
}

/* ── Filter bar ────────────────────────────────────────────────────────────── */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-block-end: var(--space-5);
}
.filter-bar__group { display: flex; flex-direction: column; gap: var(--space-1); }
.filter-bar__search { min-width: 220px; }
.filter-bar__select { min-width: 140px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Results meta ──────────────────────────────────────────────────────────── */

.results-meta {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-block-end: var(--space-4);
}

/* ── Data table ────────────────────────────────────────────────────────────── */

.table-wrap {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  background: var(--color-surface);
  padding: var(--space-3) var(--space-4);
  text-align: right;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  border-block-end: 1px solid var(--color-border);
  white-space: nowrap;
}

.data-table__row {
  cursor: pointer;
  transition: background var(--transition-fast);
}
.data-table__row:hover { background: var(--color-surface); }

.data-table td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  border-block-end: 1px solid var(--color-border);
  vertical-align: middle;
}
.data-table__row:last-child td { border-block-end: none; }

.data-table__name a {
  font-weight: var(--weight-medium);
  color: var(--color-primary);
}

/* ── Badges ────────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}
.badge--available        { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success); }
.badge--active_proposal  { background: var(--color-info-bg);    color: var(--color-info);    border-color: var(--color-info); }
.badge--on_hold          { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning); }
.badge--not_relevant     { background: var(--color-surface);    color: var(--color-text-muted); }
.badge--client-active_client   { background: var(--color-accent-sky-light); color: var(--color-primary-dark); border-color: var(--color-accent-sky); }
.badge--client-not_client      { background: var(--color-surface); color: var(--color-text-muted); }
.badge--client-inactive_client { background: var(--color-warning-bg); color: var(--color-warning); }
.badge--client-former_client   { background: var(--color-error-bg); color: var(--color-error); border-color: var(--color-error); }

/* ── Pagination ────────────────────────────────────────────────────────────── */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-block-start: var(--space-6);
}
.pagination__info {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.pagination__btn { font-size: var(--text-sm); }

/* ── Profile ───────────────────────────────────────────────────────────────── */

.profile { max-width: 900px; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-block-end: var(--space-6);
}
.breadcrumb a { color: var(--color-primary); }
.breadcrumb__sep { color: var(--color-text-muted); }

.profile__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  margin-block-end: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

.profile__avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.profile__avatar-initials {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  font-family: var(--font-heading);
}

.profile__name {
  font-size: var(--text-2xl);
  margin-block-end: var(--space-2);
}
.profile__sub {
  color: var(--color-text-secondary);
  margin-block-end: var(--space-3);
}
.profile__badges { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ── Tabs ──────────────────────────────────────────────────────────────────── */

.tabs {
  display: flex;
  gap: 0;
  border-block-end: 2px solid var(--color-border);
  margin-block-end: var(--space-6);
}

.tab {
  padding: var(--space-3) var(--space-5);
  background: none;
  border: none;
  border-block-end: 2px solid transparent;
  margin-block-end: -2px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tab:hover { color: var(--color-primary); }
.tab--active {
  color: var(--color-primary);
  border-block-end-color: var(--color-primary);
}

.tab-panel { display: block; }
.tab-panel[hidden] { display: none; }

/* ── Detail list ───────────────────────────────────────────────────────────── */

.detail-list {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.detail-list__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  border-block-end: 1px solid var(--color-border);
}
.detail-list__row:last-child { border-block-end: none; }
.detail-list__label {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border-inline-end: 1px solid var(--color-border);
}
.detail-list__value {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.placeholder-text {
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--space-6);
  text-align: center;
}