:root {
  color-scheme: light;
  --bg: #f4f7f8;
  --panel: #ffffff;
  --panel-2: #eef5f4;
  --text: #1f2a30;
  --muted: #617178;
  --line: #d9e2e4;
  --primary: #0f3d4a;
  --primary-2: #14606f;
  --accent: #0f766e;
  --warn: #b7791f;
  --danger: #b63d21;
  --ok: #28734d;
  --focus: #f5c542;
  --shadow: 0 16px 40px rgba(31, 42, 48, 0.11);
  font-family: Arial, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

html,
body,
#app {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

button {
  border: 0;
  cursor: pointer;
}

.skip-link {
  position: absolute;
  top: 10px;
  right: 10px;
  transform: translateY(-140%);
  z-index: 100;
  background: var(--primary);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 800;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

.accessibility-corner {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 80;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 2px solid var(--accent);
  box-shadow: 0 10px 28px rgba(31, 42, 48, 0.2);
  text-decoration: none;
}

.accessibility-corner img {
  width: 34px;
  height: 34px;
  display: block;
}

.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;
}

.app-shell {
  min-height: 100vh;
  display: block;
  max-width: 100%;
  overflow-x: hidden;
}

.sidebar {
  background: var(--primary);
  color: #fff;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr) minmax(180px, 260px);
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}

/* ===== DESKTOP LAYOUT (>750px) ===== */
@media (min-width: 751px) {
  /* ----- App shell: horizontal split ----- */
  .app-shell {
    display: grid !important;
    grid-template-columns: 260px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "sidebar topbar"
      "sidebar main";
    height: 100vh;
    max-width: 100vw;
    overflow: hidden;
  }

  /* ----- Fixed dark left sidebar ----- */
  .sidebar {
    grid-area: sidebar;
    width: 260px;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 18px 14px;
    background: var(--primary);
    color: #fff;
  }

  /* restore original children layout inside sidebar */
  .sidebar .brand {
    justify-self: unset;
    margin-bottom: 20px;
  }

  .sidebar .nav {
    justify-self: unset;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 100%;
  }

  .sidebar .nav button {
    justify-content: flex-start;
    text-align: right;
    padding: 10px 14px;
    width: 100%;
    min-height: 44px;
  }

  .nav-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  /* ----- Wide dark top header bar ----- */
  .sidebar-footer {
    grid-area: topbar;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 10px 24px;
    background: var(--primary);
    color: #fff;
    min-height: 56px;
    border-inline-start: 0;
    border-top: 0;
  }

  .sidebar-footer .tenant-admin-label {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    text-align: left;
    direction: ltr;
  }

  .sidebar-footer .tenant-admin-label span {
    font-size: 11px;
  }

  .sidebar-footer .tenant-admin-label strong {
    font-size: 13px;
  }

  .sidebar-footer .logout {
    white-space: nowrap;
    min-height: 36px;
    padding: 0 14px;
    font-size: 13px;
    flex-shrink: 0;
  }

  .sidebar-footer a:not(.logout):not(.accessibility-link) {
    display: none;
  }

  /* ----- Scrollable main content area ----- */
  .main {
    grid-area: main;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 56px);
    background: var(--bg);
    padding: 26px 32px 80px;
  }
}

.owner-shell .sidebar {
  background:
    linear-gradient(180deg, #092c35 0%, #0f3d4a 52%, #10313a 100%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.08);
}

.brand {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  gap: 10px;
  min-width: 0;
}

.brand-logo {
  width: 72px;
  height: 54px;
  border-radius: 8px;
  background: #fff;
  padding: 9px 12px;
  object-fit: contain;
  flex: 0 0 auto;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

.brand-copy {
  max-width: 100%;
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #fff;
  display: grid;
  place-items: center;
  color: var(--primary);
  font-weight: 800;
}

.brand h1 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
}

.brand p {
  margin: 4px 0 0;
  color: #c9dddd;
  font-size: 13px;
  line-height: 1.45;
}

.nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
  min-width: 0;
}

.nav button,
.logout {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  text-align: right;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.nav-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.12);
  color: var(--focus);
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.nav-icon svg,
.owner-kpi-icon svg,
.owner-command > span svg,
.owner-status-item > span svg,
.activity-icon svg,
.company-access-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav button.active,
.nav button:hover,
.logout:hover {
  background: rgba(255, 255, 255, 0.14);
}

.nav button.active .nav-icon,
.nav button:hover .nav-icon {
  background: var(--focus);
  color: var(--primary);
}

.message-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: var(--focus);
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  margin-inline-start: auto;
  margin-inline-end: 8px;
}

.sidebar-footer {
  display: grid;
  gap: 12px;
  padding-top: 0;
  padding-inline-start: 14px;
  border-top: 0;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.18);
  color: #c9dddd;
  font-size: 13px;
  min-width: 0;
}

.sidebar-footer a,
.accessibility-link {
  color: inherit;
  font-weight: 800;
}

.tenant-admin-label {
  display: grid;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.tenant-admin-label span {
  color: #f5c542;
  font-size: 12px;
  font-weight: 900;
}

.tenant-admin-label strong {
  color: #fff;
  font-size: 14px;
}

.main {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  padding: 26px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 20px;
}

.topbar h2 {
  margin: 0;
  font-size: 28px;
}

.topbar p {
  margin: 6px 0 0;
  color: var(--muted);
}

.owner-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid rgba(15, 61, 74, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(15, 61, 74, 0.98), rgba(20, 96, 111, 0.92)),
    radial-gradient(circle at 18% 20%, rgba(245, 197, 66, 0.22), transparent 34%);
  color: #fff;
  box-shadow: var(--shadow);
}

.owner-eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--focus);
  font-size: 12px;
  font-weight: 900;
}

.owner-hero h2 {
  margin: 0;
  font-size: 30px;
}

.owner-hero p {
  max-width: 760px;
  margin: 8px 0 0;
  color: #d7e7e7;
  line-height: 1.6;
}

.owner-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.owner-hero-actions .primary,
.owner-hero-actions .secondary {
  min-height: 42px;
  white-space: nowrap;
}

.owner-hero-actions .secondary {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
}

.user-pill {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  min-width: 190px;
  box-shadow: 0 8px 24px rgba(31, 42, 48, 0.06);
}

.user-pill strong,
.user-pill span {
  display: block;
}

.user-pill span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
}

.user-pill .ghost {
  margin-top: 10px;
  width: 100%;
}

.grid {
  display: grid;
  gap: 16px;
}

.kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.category-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 0 16px;
  margin-bottom: 2px;
}

.category-strip button,
.category-summary button {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: 8px;
}

.category-strip button {
  min-height: 42px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-weight: 700;
}

.category-strip button.selected {
  border-color: var(--accent);
  background: var(--panel-2);
  color: var(--primary);
}

.category-dot {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-block;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 28px;
  text-align: center;
  direction: ltr;
  letter-spacing: 0;
  flex: 0 0 auto;
  padding: 0;
  vertical-align: middle;
  overflow: hidden;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 -5px 9px rgba(0, 0, 0, 0.22),
    0 5px 10px rgba(31, 42, 48, 0.18);
}

.category-dot::before {
  content: "";
  position: absolute;
  inset: 2px 3px auto 3px;
  height: 42%;
  border-radius: 7px 7px 12px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.05));
  pointer-events: none;
}

.category-dot::after {
  content: "";
  position: absolute;
  inset: auto 3px 3px 3px;
  height: 20%;
  border-radius: 0 0 7px 7px;
  background: rgba(0, 0, 0, 0.12);
  pointer-events: none;
}

.category-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--primary);
}

.kpi {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(31, 42, 48, 0.06);
}

.kpi-action {
  width: 100%;
  text-align: inherit;
  cursor: pointer;
}

.kpi-action:hover {
  border-color: rgba(17, 132, 119, 0.45);
  box-shadow: 0 10px 28px rgba(17, 132, 119, 0.13);
}

.kpi span {
  color: var(--primary);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
}

.kpi strong {
  display: block;
  margin-top: 10px;
  font-size: 34px;
}

.owner-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 14px;
}

.owner-kpi {
  min-height: 154px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(31, 42, 48, 0.06);
  display: grid;
  align-content: start;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.owner-kpi::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background: var(--accent);
}

.owner-kpi.warning::before {
  background: var(--warn);
}

.owner-kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #e6f4f2;
  color: var(--accent);
  font-weight: 900;
}

.owner-kpi-icon svg,
.owner-command > span svg,
.owner-status-item > span svg {
  width: 22px;
  height: 22px;
}

.owner-kpi.warning .owner-kpi-icon {
  background: #fff4db;
  color: var(--warn);
}

.owner-kpi span:not(.owner-kpi-icon) {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.owner-kpi strong {
  font-size: 32px;
  line-height: 1;
}

.owner-kpi small {
  color: var(--muted);
  line-height: 1.4;
}

.owner-control-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, 0.85fr);
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}

.owner-backup-panel {
  margin-top: 16px;
}

.owner-backup-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
}

.owner-backup-body strong,
.owner-backup-body small {
  display: block;
}

.owner-backup-body small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.45;
}

.owner-backup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.owner-command-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}

.owner-command {
  min-height: 142px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfd;
  color: var(--text);
  padding: 14px;
  text-align: right;
  display: grid;
  gap: 8px;
  align-content: start;
}

.owner-command:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 24px rgba(15, 118, 110, 0.12);
}

.owner-command > span {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #e6f4f2;
  color: var(--accent);
  font-size: 18px;
  font-weight: 900;
}

.owner-command strong {
  font-size: 16px;
}

.owner-command small {
  color: var(--muted);
  line-height: 1.45;
}

.owner-status-list {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.owner-status-item {
  min-height: 70px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfd;
  padding: 10px;
}

.owner-status-item > span {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  font-weight: 900;
}

.owner-status-item strong,
.owner-status-item small {
  display: block;
}

.owner-status-item small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.35;
}

.owner-status-item b {
  color: var(--primary);
  font-size: 24px;
}

.content-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.75fr);
  align-items: start;
}

.dashboard-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  align-items: start;
}

.dashboard-task-list {
  display: grid;
  gap: 10px;
}

.dashboard-task-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfd;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.dashboard-task-card > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dashboard-task-card strong,
.dashboard-task-card span,
.dashboard-task-card small {
  display: block;
}

.dashboard-task-card small,
.dashboard-task-card div:first-child span {
  color: var(--muted);
}

.archive-access-panel {
  display: grid;
  gap: 12px;
}

.archive-access-panel p {
  margin: 0;
  color: var(--muted);
}

.owner-grid {
  margin-top: 16px;
  grid-template-columns: minmax(0, 1fr);
}

.owner-panel-main .table-wrap {
  overflow-x: visible;
}

.owner-panel-main table {
  min-width: 0;
}

.owner-company-filters {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(160px, 0.8fr) minmax(170px, 0.8fr) auto;
  gap: 12px;
  align-items: end;
}

.owner-company-filters .field {
  margin: 0;
}

.owner-company-filters input,
.owner-company-filters select {
  min-height: 42px;
}

.filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
}

.owner-panel-side .panel-body {
  padding: 14px;
}

.activity-list,
.company-access-list {
  display: grid;
  gap: 12px;
}

.owner-panel-side .activity-list,
.owner-panel-side .company-access-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.activity-item,
.company-access-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfd;
  padding: 12px;
}

.activity-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
}

.activity-icon,
.company-access-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #e6f4f2;
  color: var(--accent);
  font-weight: 900;
}

.activity-item strong,
.activity-item span {
  grid-column: 2;
}

.activity-icon {
  grid-row: 1 / span 2;
}

.activity-item strong,
.activity-item span,
.company-access-item strong,
.company-access-item span {
  display: block;
}

.activity-item span,
.company-access-item span {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.owner-panel-side .activity-list {
  gap: 10px;
}

.owner-panel-side .activity-item {
  min-height: 0;
  padding: 12px;
}

.owner-panel-side .activity-item strong {
  font-size: .98rem;
  line-height: 1.35;
}

.owner-panel-side .activity-item span:not(.activity-icon) {
  line-height: 1.45;
}

.owner-panel-side .activity-icon {
  align-self: center;
}

.security-panel-header {
  border-top: 1px solid var(--line);
  margin-top: 4px;
}

.security-activity-list {
  padding-top: 0;
}

.security-event.warning {
  background: #fff8df;
  border-color: #f0d993;
}

.security-event.success {
  background: #eef8f4;
  border-color: #b6dbd0;
}

.security-lock-note {
  color: var(--danger);
  font-weight: 800;
}

.company-access-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.company-access-item .button-row {
  justify-content: flex-end;
}

.category-summary {
  display: grid;
  gap: 10px;
}

.category-summary button {
  min-height: 48px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  text-align: right;
}

.category-summary strong {
  color: var(--primary);
  font-size: 18px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.category-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(31, 42, 48, 0.06);
  padding: 18px;
  display: grid;
  gap: 14px;
  min-height: 190px;
}

.category-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
}

.category-card h3 {
  margin: 0;
  font-size: 20px;
}

.category-card p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
  scroll-margin-top: 24px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: #fbfdfd;
}

.panel-header h3 {
  margin: 0;
  font-size: 18px;
}

.panel-body {
  padding: 18px;
}

.button-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.backup-panel {
  display: grid;
  gap: 14px;
}

.backup-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.messages-layout {
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  align-items: start;
}

.message-list {
  display: grid;
  gap: 12px;
}

.archived-conversations {
  margin-top: 16px;
}

.message-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
  display: grid;
  gap: 12px;
}

.message-card.unread {
  border-color: var(--focus);
  box-shadow: inset 4px 0 0 var(--focus);
}

.message-meta {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.message-meta strong,
.message-meta span {
  display: block;
}

.message-meta span,
.message-parent {
  color: var(--muted);
  font-size: 13px;
}

.message-card p {
  margin: 0;
  line-height: 1.6;
  white-space: pre-wrap;
}

.message-parent {
  margin: 0;
  padding: 10px 12px;
  border-right: 3px solid var(--line);
  background: #f8fbfb;
}

.unread-pill {
  border-radius: 999px;
  background: #fff2cc;
  color: var(--warn);
  padding: 4px 10px;
  font-weight: 800;
}

.message-reply-form {
  display: grid;
  gap: 10px;
}

.conversation-thread {
  display: grid;
  gap: 10px;
  max-height: 420px;
  overflow: auto;
  padding: 4px;
}

.thread-message {
  width: min(82%, 560px);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fbfb;
}

.thread-message.sent {
  justify-self: end;
  background: #eef5f4;
  border-color: #c8dcda;
}

.thread-message.received {
  justify-self: start;
}

.thread-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}

.primary,
.secondary,
.ghost {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 8px;
  font-weight: 700;
}

.primary {
  background: var(--accent);
  color: #fff;
}

.secondary {
  background: var(--primary);
  color: #fff;
}

.ghost {
  background: #edf4f5;
  color: var(--primary);
  border: 1px solid var(--line);
}

.file-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.small {
  min-height: 34px;
  padding: 0 10px;
  font-size: 13px;
}

.danger {
  color: var(--danger);
  background: #fff4ef;
  border-color: #f2c7b8;
}

.table-wrap {
  overflow-x: auto;
  max-width: 100%;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

th,
td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  vertical-align: top;
}

th {
  background: var(--panel-2);
  color: var(--primary);
  font-size: 13px;
}

td {
  font-size: 14px;
}

.admin-grid {
  display: grid;
  gap: 16px;
}

.admin-panel .admin-table {
  min-width: 720px;
}

.admin-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.admin-editor {
  margin-bottom: 16px;
  scroll-margin-top: 24px;
}

.system-task-editor {
  margin-bottom: 16px;
  scroll-margin-top: 24px;
}

.system-task-kpis {
  margin-bottom: 16px;
}

.system-task-list-panel {
  overflow: visible;
}

.system-task-list-panel .table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  padding-bottom: 8px;
}

.system-tasks-table {
  min-width: 0;
  table-layout: fixed;
}

.system-tasks-table td:nth-child(2) {
  width: 30%;
}

.system-tasks-table small {
  color: var(--muted);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.system-tasks-table th,
.system-tasks-table td {
  padding: 10px 8px;
  overflow-wrap: anywhere;
}

.system-tasks-table th:nth-child(1),
.system-tasks-table td:nth-child(1) {
  width: 88px;
}

.system-tasks-table th:nth-child(3),
.system-tasks-table td:nth-child(3),
.system-tasks-table th:nth-child(4),
.system-tasks-table td:nth-child(4),
.system-tasks-table th:nth-child(5),
.system-tasks-table td:nth-child(5) {
  width: 94px;
}

.system-tasks-table th:nth-child(6),
.system-tasks-table td:nth-child(6),
.system-tasks-table th:nth-child(7),
.system-tasks-table td:nth-child(7) {
  width: 92px;
}

.system-tasks-table th:nth-child(8),
.system-tasks-table td:nth-child(8) {
  width: 92px;
}

.system-tasks-table .admin-actions {
  align-items: stretch;
  flex-direction: column;
}

.system-tasks-table .admin-actions .small {
  width: 100%;
  padding: 0 6px;
}

.priority-pill {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  border: 1px solid var(--line);
  background: #f8fafb;
}

.priority-גבוהה {
  background: #fff4ef;
  border-color: #f2c7b8;
  color: var(--danger);
}

.priority-בינונית {
  background: #fff8df;
  border-color: #f0d993;
  color: var(--warn);
}

.priority-נמוכה {
  background: #e8f5f1;
  border-color: #b6dbd0;
  color: var(--ok);
}

.color-swatch {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid var(--line);
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}

.status {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.status.planned {
  background: #e6f0f6;
  color: #19516b;
}

.status.soon {
  background: #fff2cc;
  color: var(--warn);
}

.status.overdue {
  background: #fce4d6;
  color: var(--danger);
}

.status.done {
  background: #e2f0d9;
  color: var(--ok);
}

.status.not-done {
  background: #fff4ef;
  color: var(--danger);
}

.icon-button {
  min-width: 38px;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

.task-expand-button {
  min-width: 82px;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
}

.task-row-open td {
  border-bottom-color: transparent;
}

.tasks-table .task-number-cell {
  background: #f5fafb;
  color: var(--primary);
  font-weight: 900;
}

.tasks-table .task-number-cell strong {
  font-size: 1.08rem;
}

.task-detail-row > td {
  background: #fbfdfd;
  padding-top: 0;
}

.task-detail-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
  display: grid;
  gap: 14px;
  box-shadow: 0 8px 24px rgba(31, 42, 48, 0.06);
}

.task-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.task-detail-grid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f8fbfb;
}

.task-detail-grid .full {
  grid-column: 1 / -1;
}

.task-detail-grid span,
.task-detail-grid strong {
  display: block;
}

.task-detail-grid span {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 5px;
}

.task-photo-detail {
  display: grid;
  gap: 8px;
}

.task-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.task-photo-grid figure {
  margin: 0;
  display: grid;
  gap: 8px;
}

.task-photo-grid figcaption {
  font-weight: 800;
  color: var(--primary);
}

.task-photo-grid figcaption small {
  display: block;
  margin-top: 3px;
  font-weight: 600;
}

.task-photo-detail small {
  color: var(--muted);
}

.task-photo-preview {
  width: min(100%, 360px);
  max-height: 260px;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: contain;
  background: #fff;
}

.task-detail-actions {
  justify-content: flex-start;
}

.archive-task-button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.tasks-table {
  min-width: 760px;
}

.status-done-button {
  background: var(--ok);
}

.status-not-done-button {
  background: #fff4ef;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.field {
  display: grid;
  gap: 6px;
}

.field.full {
  grid-column: 1 / -1;
}

.permission-grid {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.permission-grid legend {
  padding: 0 6px;
  color: var(--primary);
  font-weight: 800;
  font-size: 13px;
}

.check-option {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-weight: 700;
}

.check-option input {
  width: 18px;
  min-height: 18px;
  padding: 0;
}

.authorized-table {
  min-width: 680px;
}

label {
  font-weight: 700;
  color: var(--primary);
  font-size: 13px;
}

.field-hint {
  color: var(--muted);
  line-height: 1.45;
}

.segmented-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.segmented-control label {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-weight: 800;
  cursor: pointer;
}

.segmented-control input {
  width: auto;
  min-height: auto;
  accent-color: var(--accent);
}

.message-scope small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 42px;
  padding: 9px 12px;
  background: #fff;
  color: var(--text);
}

textarea {
  min-height: 92px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid rgba(245, 197, 66, 0.34);
  border-color: var(--focus);
}

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(15, 61, 74, 0.94), rgba(20, 96, 111, 0.88)),
    radial-gradient(circle at top right, rgba(245, 197, 66, 0.28), transparent 34%);
}

.login-card {
  width: min(460px, 100%);
  background: var(--panel);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.login-hero {
  padding: 28px;
  background: var(--primary);
  color: #fff;
}

.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  font-weight: 900;
  letter-spacing: 0;
}

.login-brand img {
  width: min(320px, 100%);
  height: 96px;
  background: #fff;
  border-radius: 8px;
  padding: 14px 18px;
  object-fit: contain;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.login-key-icon {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  background: rgba(245, 197, 66, 0.16);
  border: 1px solid rgba(245, 197, 66, 0.44);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 12px 28px rgba(0, 0, 0, 0.18);
}

.login-key-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--focus);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-hero h1 {
  margin: 0;
  font-size: 28px;
}

.login-hero p {
  margin: 8px 0 0;
  color: #d7e7e7;
}

.login-form {
  padding: 24px;
  display: grid;
  gap: 16px;
}

.login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.remember-login {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.4;
}

.remember-login input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.reset-login {
  white-space: nowrap;
}

.demo-users {
  background: #f8fbfb;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.demo-users strong {
  display: block;
  color: var(--text);
  margin-bottom: 8px;
}

.quick-login-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.quick-login-ran {
  grid-column: 1 / -1;
  min-height: 46px;
  font-size: 16px;
  font-weight: 900;
  color: var(--primary);
  border-color: rgba(17, 132, 119, 0.35);
  background: #eef8f6;
}

.demo-users dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.demo-users dl div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.demo-users dt,
.demo-users dd {
  margin: 0;
}

.demo-users dt {
  color: var(--muted);
}

.demo-users dd {
  color: var(--text);
  font-weight: 800;
  direction: ltr;
}

.toast {
  position: fixed;
  left: 18px;
  bottom: 18px;
  background: var(--primary);
  color: #fff;
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: var(--shadow);
  z-index: 20;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.empty {
  color: var(--muted);
  text-align: center;
  padding: 28px;
}

.install-banner {
  display: none;
  position: fixed;
  right: 16px;
  left: 16px;
  bottom: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 14px;
  z-index: 15;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.install-banner.show {
  display: flex;
}

.mobile-app-shell {
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
}

.mobile-app-header {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 82px;
  gap: 12px;
  align-items: center;
  padding: 14px 12px;
  background: var(--primary);
  color: #fff;
}

.mobile-brand-logo {
  width: 96px;
  height: 64px;
  border-radius: 8px;
  background: #fff;
  padding: 4px;
  object-fit: contain;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.mobile-user-summary {
  min-width: 0;
  display: grid;
  gap: 4px;
  align-content: center;
}

.mobile-user-summary strong,
.mobile-user-summary span {
  overflow-wrap: anywhere;
}

.mobile-user-summary strong {
  color: var(--focus);
  font-size: 19px;
  line-height: 1.2;
}

.mobile-user-summary span {
  color: #c9dddd;
  font-size: 13px;
}

.mobile-header-actions {
  display: grid;
  gap: 6px;
  width: 82px;
}

.mobile-accessibility-badge {
  width: 100%;
  min-height: 48px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  display: grid;
  place-items: center;
  gap: 2px;
  text-align: center;
  text-decoration: none;
}

.mobile-accessibility-badge img {
  width: 26px;
  height: 26px;
  display: block;
}

.mobile-accessibility-badge strong {
  font-size: 12px;
  line-height: 1.2;
}

.mobile-logout-button {
  min-height: 36px;
  padding: 0 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff;
  font-weight: 800;
  text-align: center;
}

.mobile-logout-button:hover {
  background: rgba(255, 255, 255, 0.16);
}

.mobile-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  background: var(--primary);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.mobile-nav button {
  min-height: 48px;
  padding: 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: grid;
  place-items: center;
  gap: 4px;
  text-align: center;
}

.mobile-nav button.active {
  background: rgba(255, 255, 255, 0.18);
}

.mobile-nav button:disabled,
.nav button:disabled {
  cursor: default;
  opacity: 0.72;
}

.mobile-nav .nav-label {
  display: grid;
  place-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 1.2;
}

.mobile-nav .nav-icon {
  width: 30px;
  height: 30px;
}

.mobile-nav button > span[aria-hidden="true"] {
  display: none;
}

.mobile-shell-footer {
  display: grid;
  gap: 8px;
  padding: 10px 14px;
  background: var(--primary);
  color: #d7e7e7;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.mobile-shell-footer a {
  color: #fff;
  font-weight: 800;
}

.mobile-shell-footer .logout[data-logout] {
  display: none;
}

.mobile-accessibility-link {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  text-align: center;
}

.mobile-main {
  width: 100%;
  max-width: 100vw;
  min-width: 0;
  overflow-x: hidden;
  padding: 18px 14px 96px;
}

.force-mobile-layout .app-shell {
  display: block !important;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 100vw;
  min-width: 0;
  overflow-x: hidden;
}

.force-mobile-layout .sidebar {
  display: grid !important;
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  max-width: 100vw;
  min-width: 0;
  overflow: hidden;
  padding: 14px 14px 14px 72px;
  gap: 14px;
}

.force-mobile-layout .nav {
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.force-mobile-layout .nav button {
  justify-content: center;
  text-align: center;
  padding: 0 8px;
}

.force-mobile-layout .main {
  display: block !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  padding: 18px 14px 96px;
}

.force-mobile-layout,
.force-mobile-layout body,
.force-mobile-layout #app,
.force-mobile-layout .mobile-app-shell,
.force-mobile-layout .mobile-main {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.force-mobile-layout body {
  position: relative;
  overscroll-behavior-x: none;
  touch-action: pan-y;
}

.force-mobile-layout .accessibility-corner {
  display: none !important;
}

.force-mobile-layout .panel,
.force-mobile-layout .table-wrap,
.force-mobile-layout .topbar,
.force-mobile-layout .category-strip,
.force-mobile-layout .button-row {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.force-mobile-layout .topbar .button-row,
.force-mobile-layout .button-row {
  display: grid;
  grid-template-columns: 1fr;
}

.force-mobile-layout .category-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.force-mobile-layout .category-strip button {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 8px 10px 8px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  justify-items: stretch;
  align-items: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  text-align: right;
  line-height: 1.25;
}

.force-mobile-layout .category-strip button:has(.category-dot) {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 8px;
}

.force-mobile-layout .category-strip .category-dot {
  width: 34px;
  height: 34px;
  line-height: 34px;
  justify-self: end;
  grid-column: 1;
}

.force-mobile-layout .toast,
.force-mobile-layout .install-banner {
  max-width: calc(100% - 28px);
}

.force-mobile-layout .brand,
.force-mobile-layout .brand-copy,
.force-mobile-layout .sidebar-footer,
.force-mobile-layout .tenant-admin-label {
  min-width: 0;
  max-width: 100%;
}

.force-mobile-layout .brand-logo {
  max-width: min(220px, 100%);
  width: min(220px, 100%);
  height: 72px;
}

.force-mobile-layout .topbar {
  align-items: stretch;
  flex-direction: column;
}

.force-mobile-layout select {
  min-height: 48px;
  padding: 10px 12px;
  font-size: 1rem;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.force-mobile-layout #assetId,
.force-mobile-layout #physicalAssetId,
.force-mobile-layout #departmentSelect,
.force-mobile-layout #technician {
  font-weight: 700;
}

.force-mobile-layout .kpi-grid,
.force-mobile-layout .owner-kpi-grid,
.force-mobile-layout .owner-control-grid,
.force-mobile-layout .content-grid,
.force-mobile-layout .owner-grid,
.force-mobile-layout .dashboard-grid,
.force-mobile-layout .messages-layout,
.force-mobile-layout .task-detail-grid,
.force-mobile-layout .form-grid,
.force-mobile-layout .permission-grid,
.force-mobile-layout .category-grid {
  grid-template-columns: 1fr;
}

.force-mobile-layout table {
  min-width: 0;
}

.force-mobile-layout .owner-hero {
  grid-template-columns: 1fr;
}

.force-mobile-layout .tasks-table {
  min-width: 0;
}

.force-mobile-layout .tasks-table,
.force-mobile-layout .tasks-table thead,
.force-mobile-layout .tasks-table tbody,
.force-mobile-layout .tasks-table tr,
.force-mobile-layout .tasks-table th,
.force-mobile-layout .tasks-table td {
  display: block;
  width: 100%;
}

.force-mobile-layout .tasks-table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.force-mobile-layout .tasks-table tbody {
  display: grid;
  gap: 12px;
}

.force-mobile-layout .tasks-table tr {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}

.force-mobile-layout .tasks-table td {
  min-height: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.force-mobile-layout .system-task-list-panel .table-wrap {
  overflow-x: hidden;
}

.force-mobile-layout .system-tasks-table,
.force-mobile-layout .system-tasks-table thead,
.force-mobile-layout .system-tasks-table tbody,
.force-mobile-layout .system-tasks-table tr,
.force-mobile-layout .system-tasks-table th,
.force-mobile-layout .system-tasks-table td {
  display: block;
  width: 100%;
}

.force-mobile-layout .system-tasks-table {
  table-layout: auto;
}

.force-mobile-layout .system-tasks-table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.force-mobile-layout .system-tasks-table tbody {
  display: grid;
  gap: 14px;
}

.force-mobile-layout .system-tasks-table tr {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
  padding: 0;
  box-shadow: 0 10px 24px rgba(15, 61, 74, .08);
}

.force-mobile-layout .system-tasks-table td {
  display: grid;
  grid-template-columns: minmax(82px, 30%) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 0;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  overflow-wrap: normal;
  word-break: normal;
}

.force-mobile-layout .system-tasks-table td:last-child {
  border-bottom: 0;
}

.force-mobile-layout .system-tasks-table td::before {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
  white-space: normal;
}

.force-mobile-layout .system-tasks-table td:nth-child(1)::before { content: "מספר"; }
.force-mobile-layout .system-tasks-table td:nth-child(2)::before { content: "משימה"; }
.force-mobile-layout .system-tasks-table td:nth-child(3)::before { content: "תחום"; }
.force-mobile-layout .system-tasks-table td:nth-child(4)::before { content: "עדיפות"; }
.force-mobile-layout .system-tasks-table td:nth-child(5)::before { content: "סטטוס"; }
.force-mobile-layout .system-tasks-table td:nth-child(6)::before { content: "אחראי"; }
.force-mobile-layout .system-tasks-table td:nth-child(7)::before { content: "תאריך יעד"; }
.force-mobile-layout .system-tasks-table td:nth-child(8)::before { content: "פעולות"; }

.force-mobile-layout .system-tasks-table td:nth-child(2) {
  display: block;
  width: 100%;
  padding-top: 14px;
  padding-bottom: 16px;
}

.force-mobile-layout .system-tasks-table td:nth-child(1) {
  background: #f5fafb;
  padding-top: 14px;
  padding-bottom: 14px;
}

.force-mobile-layout .system-tasks-table td:nth-child(1) strong {
  font-size: 1.15rem;
}

.force-mobile-layout .system-tasks-table td:nth-child(2)::before {
  display: block;
  margin-bottom: 8px;
}

.force-mobile-layout .system-tasks-table td:nth-child(2) {
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.45;
}

.force-mobile-layout .system-tasks-table td:nth-child(2) small {
  display: block;
  margin-top: 8px;
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.65;
}

.force-mobile-layout .system-tasks-table small {
  overflow-wrap: anywhere;
  word-break: normal;
}

.force-mobile-layout .system-tasks-table .priority-pill,
.force-mobile-layout .system-tasks-table .status {
  justify-self: start;
  min-width: 124px;
  text-align: center;
}

.force-mobile-layout .system-tasks-table .admin-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-top: 12px;
  padding-bottom: 14px;
}

.force-mobile-layout .system-tasks-table .admin-actions::before {
  grid-column: 1 / -1;
}

.force-mobile-layout .system-tasks-table .admin-actions .small {
  min-height: 46px;
  width: 100%;
  font-size: 1rem;
}

@media (max-width: 750px), (pointer: coarse), (hover: none) {
  .app-shell {
    display: block !important;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    overflow-x: hidden;
  }

  .sidebar {
    display: grid !important;
    position: sticky;
    top: 0;
    z-index: 10;
    grid-template-columns: 1fr;
    padding: 14px 14px 14px 72px;
    gap: 14px;
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    overflow: hidden;
  }

  .nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nav button {
    justify-content: center;
    text-align: center;
    padding: 0 8px;
  }

  .sidebar-footer {
    margin-top: 0;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    padding-inline-start: 0;
    border-inline-start: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  .main {
    padding: 18px 14px 96px;
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    overflow-x: hidden;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .kpi-grid,
  .owner-kpi-grid,
  .owner-control-grid,
  .content-grid,
  .owner-grid,
  .dashboard-grid,
  .messages-layout,
  .task-detail-grid,
  .form-grid,
  .permission-grid,
  .category-grid {
    grid-template-columns: 1fr;
  }

  table {
    min-width: 0;
  }

  .tasks-table {
    min-width: 0;
  }

  .tasks-table,
  .tasks-table thead,
  .tasks-table tbody,
  .tasks-table tr,
  .tasks-table th,
  .tasks-table td {
    display: block;
    width: 100%;
  }

  .tasks-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .tasks-table tbody {
    display: grid;
    gap: 12px;
  }

  .tasks-table tr {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    overflow: hidden;
  }

  .tasks-table tr.task-detail-row {
    margin-top: -12px;
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: #fbfdfd;
  }

  .tasks-table td {
    min-height: 0;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    overflow-wrap: anywhere;
  }

  .tasks-table td:last-child {
    border-bottom: 0;
  }

  .tasks-table tr:not(.task-detail-row) td {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }

  .tasks-table tr:not(.task-detail-row) td::before {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
  }

  .tasks-table tr:not(.task-detail-row) td:nth-child(1)::before { content: "מספר קריאה"; }
  .tasks-table tr:not(.task-detail-row) td:nth-child(2)::before { content: "קטגוריה"; }
  .tasks-table tr:not(.task-detail-row) td:nth-child(3)::before { content: "מבנה / מיקום"; }
  .tasks-table tr:not(.task-detail-row) td:nth-child(4)::before { content: "נכס"; }
  .tasks-table tr:not(.task-detail-row) td:nth-child(5)::before { content: "סוג עבודה"; }
  .tasks-table tr:not(.task-detail-row) td:nth-child(6)::before { content: "אחראי"; }
  .tasks-table tr:not(.task-detail-row) td:nth-child(7)::before { content: "תאריך יעד"; }
  .tasks-table tr:not(.task-detail-row) td:nth-child(8)::before { content: "סטטוס"; }
  .tasks-table tr:not(.task-detail-row) td:nth-child(9)::before { content: "מידע נוסף"; }

  .task-photo-grid {
    grid-template-columns: 1fr;
  }

  .tasks-table .icon-button,
  .tasks-table .task-expand-button {
    justify-self: start;
  }

  .tasks-table .task-detail-row > td {
    display: block;
    padding: 0;
  }

  .admin-panel .table-wrap,
  .admin-editor .table-wrap {
    overflow-x: hidden;
  }

  .admin-table,
  .admin-table thead,
  .admin-table tbody,
  .admin-table tr,
  .admin-table th,
  .admin-table td {
    display: block;
    width: 100%;
  }

  .admin-panel .admin-table,
  .authorized-table {
    min-width: 0;
  }

  .admin-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .admin-table tbody {
    display: grid;
    gap: 12px;
  }

  .admin-table tr {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(15, 61, 74, 0.07);
  }

  .admin-table td {
    display: grid;
    grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-height: 0;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .admin-table td:last-child {
    border-bottom: 0;
  }

  .admin-table td::before {
    color: var(--primary);
    font-weight: 800;
    line-height: 1.35;
  }

  .admin-table td[colspan] {
    display: block;
    text-align: center;
  }

  .admin-table td[colspan]::before {
    content: none;
  }

  .admin-table-tasks td:nth-child(1)::before { content: "מספר"; }
  .admin-table-tasks td:nth-child(2)::before { content: "קטגוריה"; }
  .admin-table-tasks td:nth-child(3)::before { content: "מבנה"; }
  .admin-table-tasks td:nth-child(4)::before { content: "סטטוס"; }
  .admin-table-tasks td:nth-child(5)::before { content: "אחראי"; }
  .admin-table-tasks td:nth-child(6)::before { content: "פעולות"; }

  .admin-table-assets td:nth-child(1)::before { content: "קוד"; }
  .admin-table-assets td:nth-child(2)::before { content: "נכס"; }
  .admin-table-assets td:nth-child(3)::before { content: "סוג"; }
  .admin-table-assets td:nth-child(4)::before { content: "מיקום"; }
  .admin-table-assets td:nth-child(5)::before { content: "סידורי"; }
  .admin-table-assets td:nth-child(6)::before { content: "פעולות"; }

  .admin-table-systems td:nth-child(1)::before { content: "קוד"; }
  .admin-table-systems td:nth-child(2)::before { content: "נכס"; }
  .admin-table-systems td:nth-child(3)::before { content: "מחלקה"; }
  .admin-table-systems td:nth-child(4)::before { content: "סוג מערכת"; }
  .admin-table-systems td:nth-child(5)::before { content: "מיקום / סידורי"; }
  .admin-table-systems td:nth-child(6)::before { content: "פעולות"; }

  .admin-table-categories td:nth-child(1)::before { content: "קוד"; }
  .admin-table-categories td:nth-child(2)::before { content: "שם"; }
  .admin-table-categories td:nth-child(3)::before { content: "סימון"; }
  .admin-table-categories td:nth-child(4)::before { content: "צבע"; }
  .admin-table-categories td:nth-child(5)::before { content: "סדר"; }
  .admin-table-categories td:nth-child(6)::before { content: "פעולות"; }

  .admin-table-users td:nth-child(1)::before { content: "משתמש"; }
  .admin-table-users td:nth-child(2)::before { content: "שם מלא"; }
  .admin-table-users td:nth-child(3)::before { content: "תפקיד"; }
  .admin-table-users td:nth-child(4)::before { content: "הרשאות"; }
  .admin-table-users td:nth-child(5)::before { content: "טלפון"; }
  .admin-table-users td:nth-child(6)::before { content: "פעולות"; }

  .force-mobile-layout .employee-table,
  .force-mobile-layout .employee-table thead,
  .force-mobile-layout .employee-table tbody,
  .force-mobile-layout .employee-table tr,
  .force-mobile-layout .employee-table td {
    display: block;
    width: 100%;
  }

  .force-mobile-layout .employee-table thead {
    display: none;
  }

  .force-mobile-layout .employee-table tr {
    padding: 12px 14px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
  }

  .force-mobile-layout .employee-table td {
    display: grid;
    grid-template-columns: minmax(88px, 34%) 1fr;
    gap: 10px;
    text-align: start;
    padding: 8px 0;
    border: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .force-mobile-layout .employee-table td::before {
    color: var(--primary);
    font-weight: 800;
  }

  .force-mobile-layout .employee-table td:nth-child(1)::before { content: "שם"; }
  .force-mobile-layout .employee-table td:nth-child(2)::before { content: "תפקיד"; }
  .force-mobile-layout .employee-table td:nth-child(3)::before { content: "מחלקה"; }
  .force-mobile-layout .employee-table td:nth-child(4)::before { content: "טלפון"; }
  .force-mobile-layout .employee-table td:nth-child(5)::before { content: "סטטוס"; }

  .authorized-table td:nth-child(1)::before { content: "שם"; }
  .authorized-table td:nth-child(2)::before { content: "תפקיד"; }
  .authorized-table td:nth-child(3)::before { content: "הרשאות פעילות"; }
  .authorized-table td:nth-child(4)::before { content: "טלפון"; }

  .admin-table .admin-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .admin-table .admin-actions::before {
    grid-column: 1 / -1;
  }

  .admin-table .admin-actions .small {
    width: 100%;
    min-height: 44px;
  }

  .owner-hero {
    grid-template-columns: 1fr;
  }

  .owner-hero-actions {
    justify-content: flex-start;
  }

  .owner-command-list {
    grid-template-columns: 1fr;
  }

  .company-access-item {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .company-access-item .button-row {
    grid-column: 2;
  }

  .owner-panel-main .table-wrap {
    overflow-x: auto;
  }

  .owner-panel-main table {
    min-width: 760px;
  }

  .force-mobile-layout .owner-panel-main .table-wrap:has(.new-users-table) {
    overflow-x: visible;
  }

  .force-mobile-layout .owner-panel-main .new-users-table {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0 12px;
  }

  .force-mobile-layout .new-users-table thead {
    display: none;
  }

  .force-mobile-layout .new-users-table tbody,
  .force-mobile-layout .new-users-table tr,
  .force-mobile-layout .new-users-table td {
    display: block;
    width: 100%;
  }

  .force-mobile-layout .new-users-table tr {
    padding: 14px;
    border: 1px solid rgba(15, 61, 74, 0.14);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 61, 74, 0.08);
  }

  .force-mobile-layout .new-users-table td {
    padding: 10px 0;
    border: 0;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    text-align: right;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .force-mobile-layout .new-users-table td + td {
    border-top: 1px solid rgba(15, 61, 74, 0.1);
  }

  .force-mobile-layout .new-users-table td::before {
    color: var(--teal);
    font-weight: 800;
  }

  .force-mobile-layout .new-users-table td:nth-child(1)::before {
    content: "משתמש";
  }

  .force-mobile-layout .new-users-table td:nth-child(2)::before {
    content: "חברה";
  }

  .force-mobile-layout .new-users-table td:nth-child(3)::before {
    content: "תפקיד";
  }

  .force-mobile-layout .new-users-table td:nth-child(4)::before {
    content: "נוצר";
  }

  .force-mobile-layout .new-users-table td:nth-child(5)::before {
    content: "סטטוס";
  }

  .force-mobile-layout .new-users-table small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
  }

  .owner-panel-side .activity-list,
  .owner-panel-side .company-access-list {
    grid-template-columns: 1fr;
  }

  .owner-company-filters {
    grid-template-columns: 1fr;
  }

  .filter-actions {
    justify-content: flex-start;
  }

  .segmented-control {
    grid-template-columns: 1fr;
  }

  .login-options {
    align-items: stretch;
    flex-direction: column;
  }

  .reset-login {
    width: 100%;
  }
}
/* העלמת שאריות התפריט הישן שנזרקו לתוך הדף */
#view-target-container > .sidebar,
#view-target-container > aside,
.main-content > .sidebar {
    display: none !important;
}

/* סידור כפתורי הניווט החדשים ב-Sidebar שייראו יפה אחד מתחת לשני */
.sidebar-menu {
    display: flex;
    flex-direction: column;
}
.sidebar-menu .nav-link {
    display: block;
    padding: 12px 20px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.2s;
    border-right: 4px solid transparent;
}
.sidebar-menu .nav-link:hover, 
.sidebar-menu .nav-link.active {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-right-color: #3498db;
}
/* ==========================================================================
   FacilityPro - Modern Responsive Upgrade (Desktop & Mobile)
   ========================================================================== */

/* עיצוב המכולה הראשית של האפליקציה */
#app, .main-content, #mainContent {
    background-color: #f4f6f8; /* הרקע האפרפר הרך מהתמונה */
    min-height: 100vh;
    font-family: system-ui, -apple-system, sans-serif;
    padding: 15px;
    box-sizing: border-box;
}

/* שדרוג מבנה הכרטיסיות (Cards) שייראה בדיוק כמו קריאת השירות בתמונה */
.card, .summary-card, .status-card, .ticket-card, .asset-card {
    background: #ffffff !important;
    border-radius: 16px !important; /* הפינות המעוגלות החזקות */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important; /* הצל העדין */
    padding: 20px !important;
    margin-bottom: 20px !important;
    border: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* התאמה למסכי מחשב רחבים (Desktop) - פריסת כרטיסיות ברשת צבעונית ומרווחת */
@media (min-width: 992px) {
    .dashboard-grid, .stats-container, .grid-container {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
        gap: 20px !important;
        margin-bottom: 25px !important;
    }
    
    .card:hover, .summary-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
    }
}

/* סידור כפתורי הפעולה (כמו שחזור/מחיקה בתמונה) */
.btn-action-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
}
/* תיקון פריסת הבלוקים והמדדים בדשבורד הראשי */
#mainContent ul, #app ul, .dashboard-container ul {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 16px !important;
    padding: 0 !important;
    margin: 0 0 25px 0 !important;
    list-style: none !important;
}

/* עיצוב הריבועים הפנימיים (הפיכתם לקוביות מעוצבות וממורכזות) */
#mainContent li, #app li, .dashboard-container li {
    background: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04) !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* מרכזה של התוכן לכל קובייה */
    justify-content: center !important;
    text-align: center !important;
    min-height: 110px !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
}

/* הגדלת המספרים והמדדים בתוך הקוביות שייראו ברור */
#mainContent li strong, #app li span.count, #app li b {
    font-size: 2rem !important;
    color: #0f3d4a !important; /* הצבע הכהה והיוקרתי מהמובייל */
    margin-bottom: 6px !important;
    display: block !important;
}

/* עיצוב טקסט הכותרת הקטן מתחת למספר */
#mainContent li span, #app li span.label {
    font-size: 0.95rem !important;
    color: #64748b !important;
    font-weight: 500 !important;
}
/* ==========================================================================
   שדרוג וסידור כרטיסיות המדדים (Summary Cards) במחשב ובנייד
   ========================================================================== */

/* מכולה ראשית שמסדרת את הכרטיסיות ברשת קוביות מודרנית במחשב */
.dashboard-summary, 
div:has(> .summary-card), 
.summary-cards-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
    padding: 10px 0 !important;
    width: 100% !important;
}

/* עיצוב כל קוביית מדד בנפרד - ממורכזת, נקייה ומוצלת בדיוק כמו במובייל */
.summary-card {
    background: #ffffff !important;
    border-radius: 16px !important; /* הפינות המעוגלות מהמובייל */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important; /* הצל העדין */
    padding: 24px 15px !important;
    display: flex !important;
    flex-direction: column !important; /* הופך את השורה לטור ממורכז */
    align-items: center !important; /* מרכוז האייקון, המספר והטקסט */
    justify-content: center !important;
    text-align: center !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
    margin: 0 !important; /* מבטל מתיחה ישנה */
    width: 100% !important;
}

/* אפקט ריחוף יוקרתי במחשב */
@media (min-width: 992px) {
    .summary-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
    }
}

/* עיצוב האייקון הריבועי העליון */
.summary-card-icon {
    font-size: 1.8rem !important;
    margin-bottom: 12px !important;
    color: var(--card-accent, #0f3d4a) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* הגדלת המדד הדינמי (המספר הגדול) וצביעתו בצבע המותג */
.summary-card-value {
    font-size: 2.4rem !important;
    font-weight: 700 !important;
    color: #0f3d4a !important; /* הכחול העמוק והיוקרתי מהמובייל */
    line-height: 1 !important;
    margin-bottom: 8px !important;
}

/* עיצוב הכיתוב הקטן מתחת למספר */
.summary-card-label {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #64748b !important; /* אפור פלדה אלגנטי */
    margin: 0 !important;
}

/* שחזור מראה תלת-ממדי יוקרתי לכל קוביות הנכסים מהגרסה הקודמת */
.fp-content-area div, [class*="content"] div, .fp-main-layout div {
    border-radius: 12px !important;
    box-shadow: 0 4px 0px #cbd5e0, 0 8px 16px rgba(15, 61, 74, 0.04) !important;
    border: 1px solid #cbd5e0 !important;
}

/* עיצוב גלובלי לכל הקופסאות הלבנות בדף הנכסים */
.fp-content-area div[style*="background"], 
.fp-content-area div[style*="#fff"], 
#mainContent div {
    border-radius: 14px !important;
    box-shadow: 0 5px 0px #cbd5e0, 0 10px 20px rgba(15, 61, 74, 0.04) !important;
    border: 1px solid #cbd5e0 !important;
}

/* Strip capsule/bubble — uses #mainContent ID to beat specificity (1,0,1) of #mainContent div rule */
#mainContent .asset-tree-workspace,
#mainContent .asset-tree-header,
#mainContent .asset-tree-header > div {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* שחזור מנגנון האייקונים המקצועי והצבעוני לתפריט הימני */
.fp-side-nav .fp-nav-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 10px 15px !important;
    position: relative !important;
}

/* יצירת קופסת האייקון הריבועית המעוצבת */
.fp-side-nav .fp-nav-item .fp-nav-icon {
    width: 26px !important;
    height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    font-size: 0.95rem !important;
    font-weight: bold !important;
    color: #ffffff !important;
    order: 2 !important; /* דוחף את האייקון לצד ימין הקיצוני */
}

.fp-side-nav .fp-nav-item .fp-nav-text {
    order: 1 !important; /* שומר על הטקסט בצד שמאל */
    font-size: 0.95rem !important;
}

/* התאמת צבעים ואייקונים מדויקת לפי תמונת המסך שלכם */
.fp-nav-icon.dashboard { background: #d69e2e !important; }
.fp-nav-icon.dashboard::before { content: "🏠" !important; }

.fp-nav-icon.open-ticket { background: #3182ce !important; }
.fp-nav-icon.open-ticket::before { content: "➕" !important; }

.fp-nav-icon.tickets { background: #dd6b20 !important; }
.fp-nav-icon.tickets::before { content: "⚠️" !important; font-size: 0.8rem !important; }

.fp-nav-icon.paused-tickets { background: #4a5568 !important; }
.fp-nav-icon.paused-tickets::before { content: "⏸️" !important; font-size: 0.8rem !important; }

.fp-nav-icon.employees { background: #4a5568 !important; }
.fp-nav-icon.employees::before { content: "👥" !important; }

.fp-nav-icon.audit-prep { background: #319795 !important; }
.fp-nav-icon.audit-prep::before { content: "🛡️" !important; }

.fp-nav-icon.messages { background: #d69e2e !important; }
.fp-nav-icon.messages::before { content: "✉️" !important; }

.fp-nav-icon.assets { background: #319795 !important; }
.fp-nav-icon.assets::before { content: "🏢" !important; }

.fp-nav-icon.system-manage { background: #718096 !important; }
.fp-nav-icon.system-manage::before { content: "⚙️" !important; }

.fp-nav-icon.archive { background: #dd6b20 !important; }
.fp-nav-icon.archive::before { content: "📋" !important; font-size: 0.8rem !important; }

/* העברת האייקונים לצד ימין של המילים בתפריט הצידי */
.fp-side-nav .fp-nav-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* יישור הכל לימין */
    gap: 12px !important; /* רווח קבוע ונוח בין האייקון למילה */
    direction: rtl !important; /* שמירה על סדר קריאה נכון בעברית */
}

.fp-side-nav .fp-nav-item .fp-nav-icon {
    order: 1 !important; /* האייקון יופיע ראשון מימין */
}

.fp-side-nav .fp-nav-item .fp-nav-text {
    order: 2 !important; /* המילה תופיע מיד אחריו משמאל */
    text-align: right !important;
}

/* הגדרת גלילה חלקה וקבועה לסרגל הצידי הימני */
.fp-sidebar-right {
    max-height: calc(100vh - 60px) !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding-bottom: 30px !important;
}

/* עיצוב פס הגלילה של התפריט שיהיה עדין וכמעט שקוף */
.fp-sidebar-right::-webkit-scrollbar {
    width: 5px !important;
}
.fp-sidebar-right::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px !important;
}

/* שדרוג הריבועים הצבעוניים למראה תלת-ממדי ובולט */
.fp-side-nav .fp-nav-item .fp-nav-icon {
    box-shadow: 0 3px 0px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.25) !important;
    transition: all 0.1s ease-in-out !important;
}

/* אפקט לחיצה קטן ותלת-ממדי ברגע שנוגעים באייקון */
.fp-side-nav .fp-nav-item:active .fp-nav-icon {
    transform: translateY(1px) !important;
    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2) !important;
}


/* === שחזור עיצוב אפליקציית אריחים למובייל (Grid Layout) === */
@media (max-width: 768px) {
    /* סידור אנכי כללי */
    .fp-main-layout {
        flex-direction: column !important;
        display: flex !important;
    }

    /* הפיכת הסרגל הצידי לתפריט עליון רחב המכיל את האריחים */
    .fp-sidebar-right {
        width: 100% !important;
        max-height: none !important;
        background: #0d2c34 !important; /* צבע כחול-אוקיינוס עמוק התואם לתמונה */
        padding: 15px !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    }

    /* שינוי תיבת המשתמש העליונה והתאמתה למובייל */
    .fp-user-box {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        color: white !important;
        margin-bottom: 15px !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 6px 0 !important;
        border-radius: 0 !important;
    }
    .fp-user-name {
        font-size: 1.1rem !important;
        font-weight: bold !important;
        color: #f6ad55 !important;
        border: none !important;
        outline: none !important;
        background: none !important;
        box-shadow: none !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        padding: 0 !important;
    }

    /* הפיכת רשת הניווט ל-Grid של 3 עמודות בדיוק */
    .fp-side-nav {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* עיצוב כל אריח בנפרד כפתור ריבועי קשיח ותלת-ממדי */
    .fp-side-nav .fp-nav-item {
        flex-direction: column !important; /* אייקון מעל טקסט */
        justify-content: center !important;
        align-items: center !important;
        background: #143e49 !important; /* צבע אריח פנימי */
        border: 1px solid rgba(255,255,255,0.1) !important;
        border-radius: 8px !important;
        padding: 12px 5px !important;
        height: 75px !important;
        gap: 6px !important;
        box-shadow: 0 3px 0px rgba(0,0,0,0.2) !important;
    }

    /* הגדרת כפתור אקטיבי לחוץ */
    .fp-side-nav .fp-nav-item.active {
        background: #0f3d4a !important;
        border: 1px solid #d69e2e !important;
    }

    /* התאמת הטקסט בתוך האריח */
    .fp-side-nav .fp-nav-item .fp-nav-text {
        font-size: 0.8rem !important;
        color: #e2e8f0 !important;
        white-space: nowrap !important;
    }

    /* התאמת ריבוע האייקון הקיים בתוך האריח */
    .fp-side-nav .fp-nav-item .fp-nav-icon {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.85rem !important;
        box-shadow: none !important;
        border-bottom: none !important;
    }

    /* התאמת אזור התוכן המרכזי שיופיע מתחת לאריחים */
    .fp-content-area {
        width: 100% !important;
        padding: 15px 15px 80px !important;
        background: #f7fafc !important;
    }
}

/* === שיפור תצוגת השדות והטפסים במובייל === */
@media (max-width: 768px) {
    /* הפיכת כל רשתות השדות לשורה אחת מלאה לכל שדה */
    .fp-content-area div[style*="display: grid"],
    #ticketForm div[style*="display: grid"],
    form div[style*="display: grid"] {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* הגדלת תיבות הבחירה והקלט שיהיו נוחות למגע אצבע */
    .fp-content-area input, 
    .fp-content-area select, 
    .fp-content-area textarea {
        width: 100% !important;
        padding: 12px !important;
        font-size: 1rem !important;
    }
}

/* ----- FacilityPro: Mobile Form Frame Fix ----- */
@media (max-width: 480px) {
    .location-group .form-item,
    .grid-container > div {
        width: 100% !important;
        max-width: 100% !important;
    }

    select, 
    input, 
    .form-item select, 
    .form-item input {
        height: 38px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        padding-right: 28px !important;
        padding-left: 20px !important;
        font-size: 16px !important;
        font-weight: bold !important;
    }

    .form-item {
        margin-bottom: 8px !important;
    }
}
/* ---------------------------------------------- */

/* ----- FacilityPro: Universal Mobile Flatten Fix ----- */
@media (max-width: 600px) {
    /* תופס את כל תיבות הבחירה והקלט ומוריד להן גובה ואוויר מיותר */
    select, 
    input, 
    textarea,
    [role="combobox"] {
        height: 38px !important;
        padding: 4px 12px !important;
        font-size: 16px !important;
        font-weight: bold !important;
    }

    /* מאלץ את כל ריבועי המיקום והשדות להפרס לרוחב מלא במקום להצטופף */
    form div, 
    .grid-container > div,
    main div {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }
}
/* ----------------------------------------------------- */

/* ----- FacilityPro: Safe Mobile Flatten Fix ----- */
@media (max-width: 600px) {
    /* העלמת הקופסאות והמסגרות המנופחות מסביב לשדות */
    .form-item, .grid-container > div, [class*="-group"], div[class*="container"], .card {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin-bottom: 16px !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* העלאת כותרות השדות מעל התיבות */
    .form-item label, label {
        position: relative !important;
        top: 0 !important;
        transform: none !important;
        margin-bottom: 6px !important;
        font-size: 15px !important;
        font-weight: bold !important;
        color: #1e293b !important;
        display: block !important;
    }

    /* עיצוב התיבות עצמן - שטוחות, מרווחות וצרות */
    select, input, textarea, .form-control {
        width: 100% !important;
        height: 42px !important;
        background-color: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;
        padding: 4px 10px !important;
        font-size: 16px !important;
    }
}
/* ------------------------------------------------ */

/* Asset Tree Workspace */
.asset-tree-workspace {
  direction: rtl;
  padding: 12px 14px 18px;
  max-width: 1180px;
  margin: 0 auto;
}

.asset-tree-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.asset-tree-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--primary);
}

.asset-tree-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.asset-tree-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.asset-tree-btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.82rem;
  font-weight: 700;
}

.asset-tree-btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.asset-tree-btn-danger {
  background: #fff5f5;
  border-color: #fed7d7;
  color: #c53030;
}

.asset-tree-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 4px;
}

.asset-tree-branch {
  position: relative;
}

.asset-tree-children {
  margin-right: 14px;
  padding-right: 10px;
  border-right: 1px solid #d7e2e6;
}

.asset-tree-row {
  display: grid;
  grid-template-columns: 20px 22px 1fr auto;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 2px 8px;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.asset-tree-row:hover {
  background: #f1f5f7;
}

.asset-tree-row.depth-0 { background: #fbfcfd; }
.asset-tree-row.depth-1 { background: #f8fafb; }
.asset-tree-row.depth-2 { background: #f6f8f9; }
.asset-tree-row.depth-3 { background: #f4f7f8; }
.asset-tree-row.depth-4 { background: #f2f6f7; }

.asset-tree-toggle {
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1;
  padding: 0;
}

.asset-tree-toggle.is-leaf {
  opacity: 0.35;
  cursor: default;
}

.asset-tree-icon {
  font-size: 0.9rem;
}

.asset-tree-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asset-tree-inline-input {
  width: 100%;
  height: 26px;
  border: 1px solid #b7c7cd;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 0.86rem;
}

.asset-tree-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.asset-tree-row:hover .asset-tree-actions {
  opacity: 1;
  pointer-events: auto;
}

.asset-tree-act {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font-size: 0.78rem;
}

.asset-tree-act:hover {
  background: #e8eef1;
}

.asset-tree-empty,
.asset-tree-loading,
.asset-tree-error,
.asset-tree-denied {
  padding: 18px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.asset-tree-denied h2 {
  margin: 0 0 8px;
  color: var(--danger);
  font-size: 1.05rem;
}

.asset-tree-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 61, 74, 0.35);
  display: grid;
  place-items: center;
  z-index: 120;
}

.asset-tree-modal[hidden] {
  display: none;
}

.asset-tree-modal-card {
  width: min(92vw, 380px);
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 16px;
  box-shadow: var(--shadow);
}

.asset-tree-modal-card p {
  margin: 0 0 14px;
  font-size: 0.92rem;
}

.asset-tree-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Twin-tree layout — vertical stack, full width on all viewports */
.asset-twin-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.asset-tree-pane {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.asset-tree-pane-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: #f5f8fa;
}

.asset-tree-pane-header h3 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--primary);
}

.asset-tree-pane > .asset-tree-panel {
  border: none;
  border-radius: 0;
}

/* Toast notification */
.fp-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: #0f3d4a; color: #fff; padding: 11px 22px; border-radius: 9px;
  font-size: 0.88rem; font-weight: 600; z-index: 9999; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  animation: fp-toast-in 0.22s ease;
}
@keyframes fp-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (max-width: 480px) { .fp-toast { width: 90vw; text-align: center; white-space: normal; } }

/* Ticket cards */
.tkt-list    { display:flex; flex-direction:column; gap:12px; padding:10px; direction:rtl; }
.tkt-card    { background:#fff; border:2px solid #cbd5e0; border-radius:10px; overflow:hidden; direction:rtl; }
.tkt-card.is-open { border-color:var(--primary); }
.tkt-card-top { display:flex; align-items:center; gap:8px; padding:10px 14px; background:#f8fafc; border-bottom:2px solid #e2e8f0; flex-wrap:wrap; direction:rtl; }
.tkt-body    { padding:10px 14px; }
.tkt-row     { display:flex; flex-direction:column; gap:2px; padding:6px 0; direction:rtl; border-bottom:1px solid #f1f5f7; }
.tkt-row:last-child { border-bottom:none; }
.tkt-lbl     { font-size:0.76rem; font-weight:800; color:#718096; text-align:right; }
.tkt-val     { font-size:0.92rem; color:#1a202c; font-weight:600; text-align:right; word-break:break-word; overflow-wrap:break-word; }
.tkt-desc    { white-space:pre-wrap; font-weight:400; color:#4a5568; word-break:break-word; }
.tkt-extra   { display:none; padding:10px 14px; background:#fafbfc; border-top:2px solid #e2e8f0; }
.tkt-card.is-open .tkt-extra { display:block; }
.tkt-expand  { background:none; border:1px solid #cbd5e0; border-radius:6px; padding:4px 10px; font-size:0.8rem; cursor:pointer; margin-right:auto; color:#4a5568; }
.tkt-expand:hover { background:#edf2f7; }
.tkt-badge   { display:inline-block; border-radius:4px; padding:3px 9px; font-size:0.78rem; font-weight:700; }
.tkt-act     { font-size:0.82rem; padding:4px 10px; white-space:nowrap; }
.tkt-restore { font-size:0.82rem; padding:4px 10px; white-space:nowrap; }
.tkt-delete  { background:none; border:1px solid #fca5a5; border-radius:6px; padding:4px 9px; cursor:pointer; color:#dc2626; font-size:0.82rem; white-space:nowrap; }
.tkt-delete:hover { background:#fef2f2; }
.tkt-hidden  { display:none !important; }
/* Filter bar */
.tkt-filters { display:flex; align-items:center; gap:8px; padding:8px 10px; background:#f1f5f9; border-bottom:1px solid #e2e8f0; flex-wrap:wrap; direction:rtl; }
.tkt-tabs    { display:flex; gap:4px; flex-wrap:wrap; }
.tkt-tab     { background:#fff; border:1px solid #cbd5e0; border-radius:6px; padding:4px 10px; font-size:0.78rem; cursor:pointer; color:#4a5568; }
.tkt-tab.is-active { background:var(--primary); border-color:var(--primary); color:#fff; font-weight:700; }
.tkt-search  { border:1px solid #cbd5e0; border-radius:6px; padding:4px 10px; font-size:0.82rem; min-width:140px; flex:1; direction:rtl; }
/* User-box — flat, no frame, no shadow — .fp-sidebar-right doubles class specificity to beat .fp-main-layout div (0,1,1) */
.fp-sidebar-right .fp-user-box { background:none !important; box-shadow:none !important; border:none !important; border-radius:0 !important; }
.fp-user-name  { display:inline; color:#f6ad55; font-weight:700; font-size:0.95rem; border:none !important; outline:none !important; background:none !important; box-shadow:none !important; padding:0; }
.fp-logout-btn { -webkit-appearance:none; appearance:none; background:rgba(255,255,255,0.1); border:none !important; outline:none !important; box-shadow:none !important; border-radius:6px; color:#e2e8f0; padding:5px 12px; cursor:pointer; font-size:0.82rem; }
.fp-logout-btn:hover { background:rgba(255,255,255,0.2); }
/* Employee form — reuses tkt-* card classes */
.emp-form-wrap  { padding:10px 10px 0; }
.emp-form       { display:flex; flex-direction:column; gap:8px; background:#f8fafc; border:2px solid #e2e8f0; border-radius:10px; padding:14px; }
.emp-form-title { margin:0 0 4px; font-size:1rem; font-weight:800; color:#0f3d4a; }
.emp-name       { font-size:1rem; font-weight:800; flex:1; }
.emp-owner-badge{ background:#0f3d4a; color:#fff; font-size:.72rem; padding:2px 8px; border-radius:12px; margin-left:6px; }
.emp-pin        { background:#1e293b; color:#f59e0b; font-family:monospace; font-size:1rem; padding:2px 7px; border-radius:6px; letter-spacing:3px; }
.emp-act        { font-size:.75rem; padding:2px 7px; border-radius:6px; background:#e2e8f0; border:1px solid #cbd5e1; cursor:pointer; margin-right:4px; }
.emp-act:hover  { background:#cbd5e1; }
.emp-perms-details { margin:6px 0 0; border-top:1px solid #e2e8f0; padding-top:6px; }
.emp-perms-details summary { cursor:pointer; font-size:.82rem; font-weight:700; color:#0f3d4a; padding:2px 0; }
.emp-perms-grid { display:flex; flex-wrap:wrap; gap:6px 14px; padding:8px 0 4px; }
.emp-perm-lbl   { font-size:.82rem; display:flex; align-items:center; gap:4px; cursor:pointer; }
.emp-toggle-wrap{ font-size:.85rem; display:flex; align-items:center; gap:6px; cursor:pointer; }
.emp-perm-save  { margin-top:6px; font-size:.78rem; padding:4px 10px; border-radius:6px; background:#0f3d4a; color:#fff; border:none; cursor:pointer; }
.emp-perm-save:hover { background:#1e4d5e; }
/* Dashboard */
.dash-stats      { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; padding:12px 10px 4px; }
.dash-stat       { background:#fff; border:2px solid #e2e8f0; border-radius:10px; padding:16px 14px; text-align:center; }
.dash-stat-n     { display:block; font-size:2rem; font-weight:900; color:#0f3d4a; line-height:1.1; }
.dash-stat-l     { display:block; font-size:0.8rem; font-weight:700; color:#4a5568; margin-top:5px; }
.dash-analytics  { display:flex; gap:14px; padding:10px; flex-wrap:wrap; }
.dash-bars       { flex:1; min-width:0; background:#fff; border:2px solid #e2e8f0; border-radius:10px; padding:14px 16px; }
.dash-bar-row    { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; direction:rtl; }
.dash-bar-lbl    { font-size:0.8rem; font-weight:800; color:#4a5568; width:100%; text-align:right; }
.dash-bar-inner  { display:flex; align-items:center; gap:8px; width:100%; }
.dash-bar-track  { flex:1; min-width:0; height:14px; background:#f1f5f9; border-radius:7px; overflow:hidden; }
.dash-bar-fill   { height:100%; border-radius:7px; transition:width .6s ease; }
.dash-bar-pct    { font-size:0.82rem; font-weight:800; color:#0f3d4a; white-space:nowrap; flex-shrink:0; min-width:40px; text-align:center; padding:0 6px; }
.dash-ring-wrap  { background:#fff; border:2px solid #e2e8f0; border-radius:10px; padding:14px 16px; min-width:160px; display:flex; flex-direction:column; align-items:center; }
.dash-ring       { width:130px; height:130px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.dash-ring-hole  { width:88px; height:88px; background:#fff; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.dash-ring-hole span  { font-size:1.5rem; font-weight:900; color:#0f3d4a; line-height:1; }
.dash-ring-hole small { font-size:0.72rem; color:#718096; }
.dash-sec-title  { margin:0 0 12px; font-size:0.9rem; font-weight:800; color:#0f3d4a; }
/* Quick-login button */

/* Open Ticket Form */
.ot-wrap  { max-width: 680px; padding-bottom: 48px; }
.fp-content-area { overflow-y: auto; padding-bottom: 96px; }
.ot-form  { display: flex; flex-direction: column; gap: 10px; }
.ot-set   { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px 12px; background: #fafcfd; }
.ot-set legend { font-weight: 800; font-size: 0.82rem; color: var(--primary); padding: 0 5px; letter-spacing: 0.01em; }
.ot-row   { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.ot-row label, .ot-full { display: flex; flex-direction: column; gap: 4px; font-size: 0.79rem; font-weight: 700; color: #4a5568; flex: 1; min-width: 140px; }
.ot-full  { flex: unset; width: 100%; margin-top: 8px; }
.ot-sel, .ot-inp {
  height: 32px; border: 1px solid #cbd5e0; border-radius: 6px;
  padding: 0 10px; font-size: 0.82rem; background: #fff; width: 100%;
  transition: border-color 0.15s;
}
.ot-sel:focus, .ot-inp:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px rgba(15,61,74,0.1); }
.ot-sel:disabled { background: #f1f5f7; color: var(--muted); cursor: not-allowed; }
.ot-ta    { border: 1px solid #cbd5e0; border-radius: 6px; padding: 7px 10px; font-size: 0.82rem; width: 100%; resize: vertical; min-height: 68px; }
.ot-ta:focus { border-color: var(--primary); outline: none; }
.ot-upload { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 180px; }
.ot-cam   { cursor: pointer; border: 1px dashed #b0bec5; border-radius: 6px; padding: 5px 12px; font-size: 0.82rem; background: #f0f4f6; white-space: nowrap; user-select: none; }
.ot-cam:hover { background: #e2eaed; }
.ot-upload input[type="file"] { display: none; }
.ot-fname { font-size: 0.73rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 6px; }

@media (max-width: 768px) {
  .asset-tree-header { flex-direction: column; }
  .asset-tree-actions { opacity: 1; pointer-events: auto; }
  .ot-row label, .ot-upload { min-width: 100%; flex: unset; width: 100%; }
  .ot-actions { flex-direction: column-reverse; }
  .ot-actions button { width: 100%; }
}
/* ------------------------------------------------ */

/* ── Login form ───────────────────────────────── */
.fp-login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:#f0f4f8; padding:20px; box-sizing:border-box; }
.fp-login-box  { background:#fff; padding:36px 32px; border-radius:14px; box-shadow:0 4px 24px rgba(0,0,0,.10); max-width:380px; width:100%; text-align:center; direction:rtl; }
.fp-login-logo { background:#0f3d4a; color:#fff; padding:14px; border-radius:10px; font-weight:800; font-size:1.15rem; margin-bottom:22px; }
.fp-login-title{ color:#0f3d4a; font-size:1.25rem; font-weight:800; margin:0 0 22px; }
.fp-login-inp  { width:100%; box-sizing:border-box; padding:11px 14px; border:2px solid #e2e8f0; border-radius:8px; font-size:1rem; margin-bottom:12px; direction:rtl; font-family:inherit; }
.fp-login-inp:focus { border-color:#0f3d4a; outline:none; }
.fp-login-btn  { width:100%; background:#0f3d4a; color:#fff; border:none; padding:13px; font-size:1.05rem; font-weight:700; border-radius:8px; cursor:pointer; margin-top:4px; font-family:inherit; }
.fp-login-btn:hover { background:#1a5068; }
.fp-login-btn:disabled { opacity:.6; cursor:not-allowed; }
.fp-login-err  { color:#e53e3e; font-size:.9rem; margin-bottom:10px; padding:8px 10px; background:#fff5f5; border:1px solid #fed7d7; border-radius:6px; }
.fp-login-rem  { display:flex; align-items:center; gap:8px; font-size:.9rem; color:#4a5568; margin-bottom:12px; cursor:pointer; user-select:none; }
.fp-login-rem input[type="checkbox"] { width:16px; height:16px; accent-color:#0f3d4a; cursor:pointer; flex-shrink:0; }

/* ── Public Landing Page (fp-home) ─────────────────────────────────────────── */
.fp-home { direction:rtl; font-family:Arial,"Segoe UI",sans-serif; color:#1f2a30; background:#fff; min-height:100vh; overflow-x:hidden; }

/* Navbar */
.fp-home-nav { background:#fff; border-bottom:1px solid #d9e2e4; position:sticky; top:0; z-index:50; }
.fp-home-nav-inner { max-width:1180px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.fp-home-brand { font-weight:900; font-size:1.25rem; color:#0f3d4a; display:flex; align-items:center; gap:6px; letter-spacing:-.01em; }
.fp-home-nav-links { display:flex; align-items:center; gap:20px; font-size:.9rem; font-weight:700; }
.fp-home-nav-links a { color:#617178; text-decoration:none; white-space:nowrap; }
.fp-home-nav-links a:hover { color:#0f3d4a; }
.fp-home-login-btn { background:#0f3d4a; color:#fff; border:none; padding:10px 18px; border-radius:8px; font-size:.9rem; font-weight:700; cursor:pointer; white-space:nowrap; }
.fp-home-login-btn:hover { background:#1a5068; }

/* Login overlay */
.fp-login-overlay { position:fixed; inset:0; background:rgba(7,30,42,.72); z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; }
.fp-login-close { position:absolute; top:12px; left:14px; background:none; border:none; font-size:1.3rem; color:#617178; cursor:pointer; padding:4px 8px; border-radius:4px; }
.fp-login-close:hover { color:#0f3d4a; background:#f0f4f6; }
.fp-login-box { position:relative; }

/* Hero */
.fp-home-hero { position:relative; min-height:72vh; background:linear-gradient(175deg,#071e2a 0%,#0d3444 45%,#155567 80%,#1a6277 100%); display:flex; align-items:center; justify-content:center; overflow:hidden; padding:70px 24px 0; }
.fp-home-hero-glow { position:absolute; inset:0; background:radial-gradient(ellipse 70% 60% at 25% 35%,rgba(30,110,140,.45),transparent),radial-gradient(ellipse 50% 40% at 80% 20%,rgba(15,61,74,.35),transparent); pointer-events:none; }
.fp-home-hero-bldg { position:absolute; bottom:0; left:0; right:0; width:100%; height:220px; pointer-events:none; }
.fp-home-hero-content { position:relative; z-index:2; max-width:720px; text-align:center; color:#fff; padding-bottom:90px; }
.fp-home-eyebrow { font-size:.8rem; font-weight:700; color:#7bd65f; text-transform:uppercase; letter-spacing:.1em; margin-bottom:18px; }
.fp-home-h1 { font-size:clamp(1.9rem,4.8vw,3.2rem); line-height:1.1; font-weight:900; margin:0 0 20px; }
.fp-home-lead { font-size:1.05rem; line-height:1.68; color:#b8d4dd; margin:0 0 28px; }
.fp-home-proof { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:28px; }
.fp-home-proof-item { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.13); border-radius:8px; padding:14px 10px; text-align:center; }
.fp-home-proof-item strong { display:block; font-size:.95rem; color:#fff; margin-bottom:4px; }
.fp-home-proof-item span { font-size:.78rem; color:#8db8c6; line-height:1.4; }
.fp-home-cta-pill { background:#ffd23f; color:#071e2a; border:none; padding:14px 30px; border-radius:8px; font-size:1rem; font-weight:800; cursor:pointer; }
.fp-home-cta-pill:hover { background:#ffe270; }

/* Content sections */
.fp-home-sect { padding:58px 24px; }
.fp-home-sect-inner { max-width:1100px; margin:0 auto; }
.fp-home-sect-band { padding:58px 24px; background:#f3f8f8; border-top:1px solid #d9e2e4; border-bottom:1px solid #d9e2e4; }
.fp-home-sh2 { font-size:clamp(1.5rem,3.2vw,2.2rem); color:#0f3d4a; margin:0 0 10px; line-height:1.2; }
.fp-home-sp { color:#617178; font-size:1rem; line-height:1.65; margin:0 0 30px; max-width:680px; }

/* Features grid */
.fp-home-features { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.fp-home-feat { background:#fff; border:2px solid #d9e2e4; border-radius:10px; padding:24px 20px; }
.fp-home-feat h3 { font-size:1.1rem; color:#0f3d4a; margin:0 0 8px; }
.fp-home-feat p { margin:0; color:#617178; font-size:.9rem; line-height:1.6; }
.fp-home-feat-ico { width:40px; height:40px; border-radius:8px; background:#eef4f5; color:#0f3d4a; font-size:1.2rem; font-weight:900; display:inline-grid; place-items:center; margin-bottom:14px; }

/* Workflow grid */
.fp-home-workflow { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#d9e2e4; border:1px solid #d9e2e4; border-radius:10px; overflow:hidden; }
.fp-home-step { background:#fff; padding:22px 18px; }
.fp-home-step-n { display:block; color:#1f6f8b; font-size:.85rem; font-weight:900; margin-bottom:10px; }
.fp-home-step strong { display:block; font-size:1rem; color:#0f3d4a; margin-bottom:8px; }
.fp-home-step p { margin:0; color:#617178; font-size:.88rem; line-height:1.55; }

/* Dark CTA band */
.fp-home-dark-cta { background:#0f3d4a; color:#fff; padding:52px 24px; text-align:center; }
.fp-home-dark-cta h2 { font-size:clamp(1.4rem,3vw,2rem); color:#fff; margin:0 0 12px; }
.fp-home-dark-cta p { color:#a8cdd8; font-size:1rem; line-height:1.6; margin:0 0 24px; max-width:680px; display:block; margin-left:auto; margin-right:auto; }

/* Footer */
.fp-home-footer { background:#071e2a; color:#8db8c6; text-align:center; padding:18px 24px; font-size:.82rem; }

/* Responsive */
@media (max-width:900px) {
  .fp-home-features { grid-template-columns:repeat(2,1fr); }
  .fp-home-workflow  { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px) {
  .fp-home-proof     { grid-template-columns:1fr; }
  .fp-home-features  { grid-template-columns:1fr; }
  .fp-home-workflow  { grid-template-columns:1fr; }
  .fp-home-nav-inner { flex-wrap:wrap; gap:10px; }
  .fp-home-nav-links { width:100%; justify-content:flex-end; }
}

/* ── Hero two-column grid (inline login card) ──────────────────────────────── */
.fp-home-hero { display:block; padding:0; }
.fp-home-hero-grid { position:relative; z-index:2; max-width:1160px; width:100%; margin:0 auto; display:grid; grid-template-columns:1fr 370px; gap:40px 48px; align-items:center; padding:64px 28px 118px; }
.fp-home-hero-copy { color:#fff; }
.fp-home-hero-copy .fp-home-proof { grid-template-columns:repeat(3,1fr); }
.fp-login-inline { max-width:none; width:100%; background:rgba(255,255,255,.97); box-shadow:0 8px 40px rgba(4,16,24,.45); }
.fp-login-inline .fp-login-logo { font-size:1rem; padding:12px; margin-bottom:16px; }
.fp-login-inline .fp-login-title { font-size:1.1rem; margin:0 0 16px; }

@media (max-width:860px) {
  .fp-home-hero-grid { grid-template-columns:1fr; padding:48px 20px 110px; gap:32px; }
  .fp-home-hero-copy .fp-home-proof { grid-template-columns:1fr; gap:8px; }
}

/* ── Hero: real background photo ──────────────────────────────────────────── */
/* Replace gradient sky with the FacilityPro factory scene image */
.fp-home-hero {
  background: url('/assets/hero-bg.png') top center / cover no-repeat;
}

/* Dark overlay for text readability; left-top kept lighter so the in-image
   FacilityPro logo stays visible, centre/right darkened for the two-column grid */
.fp-home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(4, 16, 28, .18) 0%,
    rgba(4, 16, 28, .60) 35%,
    rgba(4, 16, 28, .72) 70%,
    rgba(4, 16, 28, .78) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Glow and SVG silhouette are no longer needed with the real photo */
.fp-home-hero-glow { display: none; }
.fp-home-hero-bldg { display: none; }

/* ── v2: single-column layout, marketing RIGHT (clear logo zone), horizontal bar login ── */

/* 1. Single column, RTL natural flow, push content below the in-image logo */
.fp-home-hero-grid {
  direction: rtl !important;
  grid-template-columns: 1fr !important;
  padding-top: 165px !important;
  align-items: start;
  gap: 22px;
}

/* 2. Marketing copy: explicit left-margin pushes block into right 58% of viewport
      → the top-left 42% (logo zone) stays clear and fully visible */
.fp-home-hero-copy {
  margin-left: 40%;
}

/* 3. Login card: collapsed to a slim horizontal bar */
.fp-login-inline {
  padding: 14px 18px !important;
  border-radius: 8px !important;
}
.fp-login-inline .fp-login-logo { display: none !important; }
.fp-login-inline .fp-login-title {
  font-size: .68rem !important;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin: 0 0 8px !important;
  opacity: .65;
}
.fp-login-inline form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.fp-login-inline .fp-login-inp {
  flex: 1 1 120px;
  width: auto !important;
  margin-bottom: 0 !important;
  padding: 9px 12px;
}
.fp-login-inline .fp-login-rem {
  flex: 0 0 auto;
  margin-bottom: 0 !important;
  white-space: nowrap;
  font-size: .82rem;
}
.fp-login-inline .fp-login-btn {
  flex: 0 0 auto;
  width: auto !important;
  margin-top: 0 !important;
  padding: 10px 22px;
}
.fp-login-inline #fpLoginErr { flex: 0 0 100%; }

/* 4. Mobile: full-width copy, stacked form inputs */
@media (max-width: 640px) {
  .fp-home-hero-copy { margin-left: 0; }
  .fp-login-inline .fp-login-inp { flex: 1 1 100%; }
  .fp-login-inline .fp-login-btn { width: 100% !important; }
  .fp-home-hero-grid { padding-top: 72px !important; }
}

/* ── Login card: glassmorphism semi-transparent dark blue ────────────────────── */
.fp-login-inline {
  background: rgba(0, 38, 76, 0.76) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 44px rgba(2, 12, 28, 0.55);
}

/* Card header logo strip */
.fp-login-inline .fp-login-logo {
  background: rgba(255, 255, 255, 0.10);
  color: #e8f4f8;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

/* Card title */
.fp-login-inline .fp-login-title { color: #ddeef6; }

/* Input fields: near-white bg for high-contrast readability */
.fp-login-inline .fp-login-inp {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.25);
  color: #0d2030;
}
.fp-login-inline .fp-login-inp::placeholder { color: #6a8a9a; }
.fp-login-inline .fp-login-inp:focus { border-color: #7bd6f5; outline: none; }

/* Remember-me label */
.fp-login-inline .fp-login-rem { color: #b0cfe0; }
.fp-login-inline .fp-login-rem input[type="checkbox"] { accent-color: #7bd6f5; }

/* Submit button stays solid dark-blue with high contrast */
.fp-login-inline .fp-login-btn {
  background: #0f3d4a;
  border: 1px solid rgba(123, 214, 245, 0.3);
}
.fp-login-inline .fp-login-btn:hover { background: #1a5a6e; }

/* Error box: semi-transparent red */
.fp-login-inline .fp-login-err {
  background: rgba(180, 30, 30, 0.25);
  border-color: rgba(255, 100, 100, 0.4);
  color: #ffb3b3;
}

/* ── SchedulesModule ─────────────────────────────────────────────────────── */
/* Frequency tab bar (shared by creation form + filter view) */
.sch-tabs { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 4px; }
.sch-tab-btn {
  padding:5px 14px; border-radius:20px; border:1px solid #b2c8d8;
  background:#f4f8fb; color:#2d6a80; font-size:.82rem; cursor:pointer;
  transition:background .15s, color .15s;
}
.sch-tab-btn:hover { background:#d9eef5; }
.sch-tab-active { background:#0f3d4a !important; color:#fff !important; border-color:#0f3d4a !important; }
.sch-cnt { font-size:.75rem; opacity:.75; margin-right:2px; }

/* Side-by-side select row in creation form */
.sch-row2 { display:flex; gap:8px; }
.sch-row2 .sch-sel { flex:1; min-width:0; }
.sch-sel { font-size:.88rem; }

/* External provider fields (hidden by default, toggled via JS) */
.sch-ext-toggle { font-size:.85rem; margin:8px 0 4px; display:flex; align-items:center; gap:6px; }
.sch-ext-fields { display:flex; flex-direction:column; gap:6px; margin-top:4px; }

/* Overdue date highlight */
.sch-overdue { color:#c0392b !important; font-weight:700; }

/* Frequency badge on card */
.sch-freq-badge { background:#1a5a6e; color:#e8f5f9; font-size:.72rem; padding:2px 8px; border-radius:10px; }

/* History section inside card */
.sch-hist { margin-top:8px; }
.sch-hist summary { cursor:pointer; font-size:.82rem; color:#2d6a80; font-weight:600; }
.sch-hist-tbl { width:100%; border-collapse:collapse; font-size:.8rem; margin-top:6px; }
.sch-hist-tbl th { background:#f0f6fa; padding:4px 8px; text-align:right; border-bottom:1px solid #cde; }
.sch-hist-tbl td { padding:4px 8px; border-bottom:1px solid #e8f0f4; text-align:right; }

/* Confirm button */
.sch-confirm-btn { background:#1e7e34 !important; }
.sch-confirm-btn:hover { background:#155724 !important; }

/* "בוצע" permanent completion badge (replaces confirm button after click) */
.sch-done-badge {
  width:100%; margin-top:6px; padding:9px 14px; border-radius:6px;
  background:#d4edda; border:1px solid #c3e6cb; color:#155724;
  font-weight:700; font-size:.92rem; text-align:center; box-sizing:border-box;
}

/* Anchor date picker row in creation form */
.sch-anchor-wrap { margin:6px 0; }
.sch-anchor-val  { color:#0f3d4a; font-weight:600; }

/* Form wrapper card */
.sch-form-wrap { background:#f8fbfd; border:1px solid #cde; border-radius:8px; padding:14px; margin-bottom:16px; }

/* Mobile adjustments */
@media (max-width:600px) {
  .sch-row2 { flex-direction:column; }
}

/* ── Schedule module: header add button + empty-state button ── */
/* Header ➕ button — prominent, stands out against the workspace background */
.sch-add-toggle {
  background: #0f3d4a !important;
  color: #fff !important;
  border-color: #0f3d4a !important;
  padding: 8px 16px !important;
  font-size: .88rem !important;
  border-radius: 8px !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.sch-add-toggle:hover { background: #1a5a6e !important; }

/* Empty-state action button — full-width, high-accessibility touch target */
.sch-empty-state { padding: 28px 20px !important; }
.sch-empty-state p { color: #718096; margin: 0 0 14px; font-size: .92rem; }
.sch-add-from-empty {
  display: inline-block;
  background: #0f3d4a;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  min-width: 200px;
  transition: background .15s;
}
.sch-add-from-empty:hover { background: #1a5a6e; }

/* On mobile: make header button full-width so it's impossible to miss */
@media (max-width: 600px) {
  .sch-add-toggle {
    width: 100% !important;
    padding: 12px 0 !important;
    font-size: .95rem !important;
    margin-top: 6px;
  }
  .sch-add-from-empty { width: 100%; padding: 14px 0; }
}

/* ── View-mode toggle (Active / History) ── */
.sch-view-toggle { display:flex; gap:8px; margin:10px 0 14px; }
.sch-view-btn {
  flex:1; padding:8px 0; border-radius:6px; border:1px solid #b2c8d8;
  background:#f4f8fb; color:#2d6a80; font-size:.88rem; font-weight:600; cursor:pointer;
  transition:background .15s, color .15s;
}
.sch-view-active { background:#0f3d4a !important; color:#fff !important; border-color:#0f3d4a !important; }

/* ── History Log panel ── */
.sch-hist-panel { padding:4px 0; }
.sch-hist-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; align-items:center; }

/* One-liner row: ultra-compact, max data density */
.sch-hist-rows { border:1px solid #dce8ef; border-radius:6px; overflow:hidden; }
.sch-hist-row {
  display:flex; flex-wrap:wrap; align-items:center; gap:4px;
  padding:6px 10px; font-size:.8rem; border-bottom:1px solid #edf3f7;
  direction:rtl; background:#fff;
}
.sch-hist-row:last-child { border-bottom:none; }
.sch-hist-row:nth-child(even) { background:#f9fbfc; }
.sch-hr-date  { color:#0f3d4a; font-weight:700; white-space:nowrap; min-width:86px; }
.sch-hr-title { font-weight:600; color:#1a2e38; }
.sch-hr-freq  { background:#e6f2f8; color:#1a5a70; border-radius:10px; padding:1px 7px; font-size:.72rem; white-space:nowrap; }
.sch-hr-loc   { color:#4a7080; font-size:.77rem; }
.sch-hr-by    { margin-right:auto; color:#2d6a80; font-weight:600; white-space:nowrap; }
.sch-hr-sep   { color:#c8d8e0; font-size:.75rem; }
/* Delete button on history row — compact, no visual noise */
.sch-hist-del {
  flex:0 0 auto; background:none; border:none; cursor:pointer;
  font-size:.8rem; color:#a0b0ba; padding:0 4px; line-height:1;
  margin-left:auto;  /* pushes to the far left (LTR side) in RTL row */
}
.sch-hist-del:hover { color:#c0392b; }