@charset "utf-8";
/* ==========================================================================
   نورسينا — طبقة التصميم
   --------------------------------------------------------------------------
   PART A — design tokens (colour, spacing, radii, type).
   PART B — the component classes every screen is written against.
   PART C — components specific to this panel: filter bar, pager, combo
            fields, pipeline board, image gallery, timeline.
   PART D/E — responsive and print.

   No framework, no build step, no external font. RTL throughout.
   ========================================================================== */

/* ===== PART A — tokens =================================================== */

:root {
  /* Brand: navy (ink), red (primary accent), blue (secondary/info accent).
     Fixed at all times. */
  --color-navy: #14163d;
  --color-navy-soft: #3d4173;

  --color-ink: #14163d;
  --color-ink-soft: #3d4173;
  --color-accent: #ed1c24;
  --color-accent-hover: #c8161e;
  --color-accent-soft: #fbe2e3;

  --color-info: #1c75bc;
  --color-info-hover: #155d94;
  --color-info-soft: #e2eef8;

  --color-bg: #f4f3ef;
  --color-bg-alt: #faf9f5;
  --color-surface: #ffffff;

  --color-border: rgba(20, 22, 61, 0.12);
  --color-border-strong: rgba(20, 22, 61, 0.22);

  --color-success: #1f8a4c;
  --color-success-soft: #e6f4ec;
  --color-warning: #b8791b;
  --color-warning-soft: #faf0dd;
  --color-danger: var(--color-accent);
  --color-danger-soft: var(--color-accent-soft);
  --color-muted: #6b7280;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --shadow-subtle: 0 1px 2px rgba(20, 22, 61, 0.05), 0 1px 1px rgba(20, 22, 61, 0.04);
  --shadow-lift: 0 4px 16px rgba(20, 22, 61, 0.08);

  --font-family: 'Segoe UI', Tahoma, 'Cairo', Arial, sans-serif;
}

/* ===== PART B — component layer ========================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-family);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
}

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

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-3);
  font-weight: 700;
  color: var(--color-ink);
}

p {
  margin: 0 0 var(--space-3);
}

/* ---- App shell / top nav ---- */

.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.top-nav {
  flex-shrink: 0;
  height: 56px;
  background: var(--color-navy);
  color: #fff;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: 0 var(--space-4);
}

.top-nav-logo {
  display: block;
  height: 28px;
  width: auto;
  flex-shrink: 0;
}

/* Brand link slot in the top bar (currently unused). */
.top-nav-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Hamburger — hidden on desktop, the only way to reach the sections on a
   phone. Without it the bar cannot fit 390px and forces a horizontal
   overflow that .app-shell's overflow:hidden then CLIPS, so every page
   appears shifted and cut off on a phone. */
.top-nav-burger {
  display: none;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm);
  background: transparent;
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
}
.top-nav-burger:hover {
  background: rgba(255, 255, 255, 0.1);
}

.top-nav-sections {
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: var(--space-1);
  height: 100%;
  min-width: 0;
  /* NO overflow here. An earlier version set overflow-x:auto/overflow-y:hidden
     to let nine section labels scroll on a narrow screen — but that turns this
     56px-tall row into a clipping box, and every dropdown starts at top:100%,
     i.e. exactly at its bottom edge, so all of them were clipped away
     entirely. The labels shrink at 1024px instead (see the media query
     below), and the row is allowed to squeeze rather than scroll. */
  flex-wrap: nowrap;
}

.top-nav-section {
  position: relative;
  display: flex;
  align-items: center;
}

.top-nav-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: 100%;
  padding: 0 var(--space-3);
  background: none;
  border: none;
  color: rgba(244, 243, 239, 0.75);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.top-nav-label:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.top-nav-label.active {
  color: #fff;
  box-shadow: inset 0 -3px var(--color-accent);
}

.top-nav-label.open {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.top-nav-chevron {
  display: inline-block;
  font-size: 0.7rem;
  transition: transform 0.15s;
}

.top-nav-label.open .top-nav-chevron,
.top-nav-user-btn.open .top-nav-chevron {
  transform: rotate(180deg);
}

.top-nav-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  list-style: none;
  margin: 0;
  padding: var(--space-2);
  min-width: 210px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  max-height: calc(100vh - 56px - var(--space-3));
  overflow-y: auto;
  overscroll-behavior: contain;
  display: none;
}

.top-nav-section.open > .top-nav-dropdown {
  display: block;
}

/* CSS-only fallback so the menus still open on hover if app.js fails to
   run for any reason — navigation must not depend on JavaScript. */
.top-nav-section:hover > .top-nav-dropdown {
  display: block;
}

.top-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-size: 0.86rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.top-nav-link:hover {
  background: var(--color-bg);
  color: var(--color-ink);
}

.top-nav-link.active {
  background: var(--color-accent);
  color: #fff;
}
.top-nav-link.active:hover {
  background: var(--color-accent-hover);
  color: #fff;
}

/* ---- second level: a branch inside a dropdown opens as a side flyout ----
   The flyout is position:fixed, NOT absolute:
   .top-nav-dropdown is a scroll box (max-height + overflow-y), so an
   absolutely positioned child would be clipped inside it — the same class of
   bug that hid this panel's menus once already. The script computes the
   coordinates from the branch label's own rect. */
.top-nav-dropdown-group {
  position: relative;
}

.top-nav-dropdown-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  text-align: right;
}

.top-nav-dropdown-group-label .top-nav-chevron {
  font-size: 0.7rem;
  color: var(--color-muted);
  transform: rotate(90deg);   /* points toward the flyout side when closed */
  transition: transform 0.15s;
}

.top-nav-dropdown-group.is-open > .top-nav-dropdown-group-label .top-nav-chevron {
  transform: rotate(270deg);
}
.top-nav-dropdown-group.is-open > .top-nav-dropdown-group-label {
  background: var(--color-bg);
  color: var(--color-ink);
}

.top-nav-dropdown-subgroup {
  position: fixed;
  z-index: 40;
  display: none;
  margin: 0;
  padding: var(--space-2);
  min-width: 210px;
  max-height: calc(100vh - var(--space-3));
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
}

.top-nav-dropdown-group.is-open > .top-nav-dropdown-subgroup {
  display: block;
}

/* noursina addition: the user menu keeps a small identity header, and the
   pending-members alert that this panel already had. */
.top-nav-dropdown-head {
  padding: var(--space-2) var(--space-3) var(--space-3);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.top-nav-dropdown-head strong {
  display: block;
  font-size: 0.88rem;
  color: var(--color-ink);
}
.top-nav-dropdown-head span {
  font-size: 0.76rem;
  color: var(--color-muted);
}

.top-nav-user {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.82rem;
  color: rgba(244, 243, 239, 0.75);
}

.top-nav-user .btn {
  border-color: rgba(244, 243, 239, 0.3);
  color: #fff;
}

.top-nav-user .btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.top-nav-user-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color: rgba(244, 243, 239, 0.85);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.top-nav-user-btn:hover,
.top-nav-user-btn.open {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.top-nav-alert {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: rgba(244, 243, 239, 0.8);
  font-size: 0.9rem;
}
.top-nav-alert:hover {
  color: #fff;
}

/* ---- Global search ---- */

.global-search {
  position: relative;
  flex-shrink: 1;
  min-width: 0;
  width: 240px;
  margin: 0;
}

@media (max-width: 1024px) {
  .top-nav-user-name {
    display: none;
  }

  .global-search {
    width: 150px;
  }

  .top-nav-label {
    padding: 0 var(--space-2);
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .global-search {
    width: 110px;
  }
}

.global-search-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: rgba(244, 243, 239, 0.55);
  display: flex;
  pointer-events: none;
}

.global-search-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 0.82rem;
  padding: 7px 34px 7px var(--space-3);
}

.global-search-input::placeholder {
  color: rgba(244, 243, 239, 0.55);
}

.global-search-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
}

.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-y: auto;
}

.page-content {
  padding: var(--space-6);
  flex: 1;
  min-width: 0;
}

/* ---- Back link ---- */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-muted);
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.back-link:hover {
  color: var(--color-accent);
}

/* ---- Tabs ---- */

.tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-5);
}

.tab-btn {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--color-muted);
  font-weight: 600;
  font-size: 0.94rem;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  margin-bottom: -1px;
}

.tab-btn:hover {
  color: var(--color-ink);
}

.tab-btn.active {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ---- Cards / surfaces ---- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-subtle);
}

.card + .card {
  margin-top: var(--space-4);
}

.card-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: var(--space-4);
}

/* ---- Buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.55;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  white-space: nowrap;
  text-shadow: none;
  box-shadow: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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

.btn-primary:hover:not(:disabled),
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: #fff;
}

.btn-secondary {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-ink);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-bg-alt);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-muted);
}

.btn-ghost:hover:not(:disabled) {
  color: var(--color-ink);
  background: transparent;
}

.btn-danger {
  background: transparent;
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.btn-danger:hover:not(:disabled),
.btn-danger:focus,
.btn-danger:active {
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: 0.8rem;
}

/* ---- Forms ---- */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  margin: 0;
}

.field-hint {
  font-size: 0.78rem;
  color: var(--color-muted);
}

.field-error {
  font-size: 0.78rem;
  color: var(--color-danger);
}

.input {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: 0.92rem;
  background: var(--color-surface);
  color: var(--color-ink);
  width: 100%;
}

.input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}

textarea.input {
  resize: vertical;
  min-height: 80px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--space-4);
}

@media (max-width: 780px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* align-items:start is deliberate: grid
   rows stretch by default, so a short card next to a tall one grew to match
   it and showed a large empty white area under its own content. */
.responsive-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
}

.responsive-grid-main-side {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-4);
  align-items: start;
}

@media (max-width: 900px) {
  .responsive-grid-2col,
  .responsive-grid-main-side {
    grid-template-columns: 1fr;
  }
}

/* ---- Tables ---- */

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

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.89rem;
}

table.data-table th {
  text-align: right;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-alt);
  font-weight: 700;
  color: var(--color-ink-soft);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

table.data-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

table.data-table tbody tr:hover {
  background: var(--color-bg-alt);
}

table.data-table tbody tr:last-child td {
  border-bottom: none;
}

table.data-table tbody tr.clickable {
  cursor: pointer;
}

/* ---- Badges ---- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--space-2);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  /* neutralises Bootstrap 3's own grey .badge before a variant paints it */
  background: var(--color-border);
  color: var(--color-muted);
  line-height: 1.55;
  min-width: 0;
  text-shadow: none;
}

.badge-success {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.badge-warning {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.badge-danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.badge-muted {
  background: var(--color-border);
  color: var(--color-muted);
}

.badge-accent {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.badge-info {
  background: var(--color-info-soft);
  color: var(--color-info);
}

/* ---- Stat tiles ---- */

.stat-tiles {
  display: grid;
  /* 210px, not 180px: at 180 a 1440px screen fits seven per row, so the
     eighth tile sat alone on a second row beside a long empty gap. */
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.stat-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}

a.stat-tile {
  display: block;
  width: 100%;
  text-align: inherit;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.stat-tile-value {
  font-size: 1.7rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.stat-tile-label {
  font-size: 0.82rem;
  color: var(--color-muted);
  margin-top: var(--space-1);
}

/* -- coloured variants --
   Each tile/card carries one identity colour: a tinted surface, a solid edge
   and a coloured figure, so the dashboard reads at a glance instead of being
   a wall of white. Every colour and tint below is a brand token (the navy
   tint is the navy token at 6% — no new hex is introduced). */
.tile-navy    { --tile: var(--color-navy);    --tile-soft: rgba(20, 22, 61, 0.09); }
.tile-accent  { --tile: var(--color-accent);  --tile-soft: var(--color-accent-soft); }
.tile-info    { --tile: var(--color-info);    --tile-soft: var(--color-info-soft); }
.tile-success { --tile: var(--color-success); --tile-soft: var(--color-success-soft); }
.tile-warning { --tile: var(--color-warning); --tile-soft: var(--color-warning-soft); }

.stat-tile[class*="tile-"] {
  background: var(--tile-soft);
  border-color: transparent;
  /* explicit border-right, not border-inline-start: this panel is always
     dir="rtl", and an explicit side leaves no doubt that the colour bar sits
     on the edge the eye starts from. */
  border-right: 5px solid var(--tile);
  transition: transform 0.15s, box-shadow 0.15s;
}

.stat-tile[class*="tile-"] .stat-tile-value {
  font-size: 1.85rem;
}

a.stat-tile[class*="tile-"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

.stat-tile[class*="tile-"] .stat-tile-value {
  color: var(--tile);
}

.stat-tile[class*="tile-"] .stat-tile-label {
  color: var(--color-ink-soft);
}

/* Analytics cards: a coloured top edge and a coloured section title. */
.card[class*="tile-"] {
  border-top: 3px solid var(--tile);
}

.card[class*="tile-"] > .row-between .report-section-title,
.card[class*="tile-"] > .report-section-title {
  color: var(--tile);
}

/* ---- Horizontal bar chart ---- */

.chart-hbar-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  position: relative;
  padding: var(--space-1) 0;
}

.chart-hbar-label {
  width: 150px;
  flex-shrink: 0;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-hbar-track {
  flex: 1;
  background: var(--color-bg-alt);
  border-radius: 6px;
  height: 14px;
  overflow: hidden;
}

.chart-hbar-fill {
  height: 100%;
  border-radius: 6px;
  min-width: 6px;
}

.chart-hbar-value {
  width: 70px;
  flex-shrink: 0;
  text-align: left;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
  white-space: nowrap;
}

/* ---- Report field grid (label/value pairs) ---- */

.report-section-title {
  font-weight: 700;
  font-size: 0.92rem;
  margin: 0;
  color: var(--color-ink);
}

.report-field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-5);
  font-size: 0.9rem;
  margin: 0;
}

.report-field-grid dt {
  color: var(--color-muted);
  display: inline;
  font-weight: 400;
}

.report-field-grid dd {
  display: inline;
  margin-inline-start: var(--space-2);
  font-weight: 600;
}

.report-field-row {
  padding: var(--space-1) 0;
}

@media (max-width: 780px) {
  .report-field-grid {
    grid-template-columns: 1fr;
  }
}

.report-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
}

.report-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  transition: opacity 0.15s;
}

.report-photo:hover {
  opacity: 0.85;
}

.report-notes-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: 0.9rem;
  min-height: 60px;
  white-space: pre-wrap;
  background: var(--color-bg-alt);
}

/* ---- Misc ---- */

.empty-state {
  text-align: center;
  padding: var(--space-7) var(--space-4);
  color: var(--color-muted);
}

.muted {
  color: var(--color-muted);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* ---- Login ---- */

.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-navy);
  padding: var(--space-4);
}

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

.login-brand {
  text-align: center;
  margin-bottom: var(--space-6);
}

.login-brand-logo {
  height: 56px;
  width: auto;
  display: inline-block;
}

.login-brand-sub {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-top: var(--space-2);
}

.login-error {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.login-notice {
  background: var(--color-success-soft);
  color: var(--color-success);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}


/* ===== PART C — components this app adds ================================
   Written against the same tokens as PART B. Nothing here introduces a new
   colour: every value is a var() from PART A.
   ======================================================================== */

/* ---- Page header: title on one side, actions on the other ---- */

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.page-head h1 {
  margin: 0;
  font-size: 1.35rem;
}

.page-head-sub {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-top: 2px;
}

.page-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ---- Flash messages ---- */

.flash {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.flash-success { background: var(--color-success-soft); color: var(--color-success); border-color: var(--color-success); }
.flash-error   { background: var(--color-danger-soft);  color: var(--color-danger);  border-color: var(--color-danger); }
.flash-warning { background: var(--color-warning-soft); color: var(--color-warning); border-color: var(--color-warning); }
.flash-info    { background: var(--color-info-soft);    color: var(--color-info);    border-color: var(--color-info); }

/* ---- Filter bar: the "choose or type" toolbar above every list ---- */

.filterbar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.filterbar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-weight: 700;
  font-size: 0.92rem;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-3);
  align-items: end;
}

.filter-grid .field {
  margin-bottom: 0;
}

.filter-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

/* A range pair sits in one cell so the grid does not split min from max. */
.range-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-1);
}

.range-pair span {
  color: var(--color-muted);
  font-size: 0.8rem;
}

/*  اختر أو اكتب  — an <input list> keeps its native dropdown arrow only on
    WebKit, and only while focused; showing it always makes the combo read as
    a select, which is what it behaves like. */
.combo::-webkit-calendar-picker-indicator {
  opacity: 0.45;
  cursor: pointer;
}

.combo:focus::-webkit-calendar-picker-indicator {
  opacity: 0.85;
}

/* ---- Totals strip under the filters ---- */

.totals-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: 0.88rem;
}

.totals-strip strong {
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.totals-strip .totals-label {
  color: var(--color-muted);
  margin-left: var(--space-1);
}

/* ---- Pagination ---- */

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

.pager a,
.pager span {
  min-width: 34px;
  height: 34px;
  padding: 0 var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.pager a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.pager .pager-current {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.pager .pager-gap {
  border: none;
  background: none;
  color: var(--color-muted);
}

.pager-summary {
  text-align: center;
  font-size: 0.82rem;
  color: var(--color-muted);
  margin-top: var(--space-2);
}

/* ---- Empty states ---- */

.empty-state h3 {
  font-size: 1rem;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-2);
}

.empty-state p {
  max-width: 460px;
  margin: 0 auto var(--space-4);
  font-size: 0.88rem;
}

.empty-state-icon {
  font-size: 2rem;
  opacity: 0.35;
  margin-bottom: var(--space-2);
}

/* ---- Detail view: label / value pairs ---- */

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4) var(--space-5);
}

.detail-item {
  min-width: 0;
}

.detail-label {
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-bottom: 2px;
}

.detail-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.detail-value.is-empty {
  font-weight: 400;
  color: var(--color-muted);
}

/* ---- Timeline (activities on a contact / property / deal) ---- */

.timeline {
  position: relative;
  padding-right: var(--space-5);
}

.timeline::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  right: 6px;
  width: 2px;
  background: var(--color-border);
}

.timeline-item {
  position: relative;
  padding-bottom: var(--space-4);
}

.timeline-item::before {
  content: "";
  position: absolute;
  right: -20px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-border-strong);
}

.timeline-item.is-done::before { border-color: var(--color-success); background: var(--color-success); }
.timeline-item.is-due::before  { border-color: var(--color-warning); background: var(--color-warning); }
.timeline-item.is-late::before { border-color: var(--color-danger);  background: var(--color-danger); }

.timeline-when {
  font-size: 0.78rem;
  color: var(--color-muted);
}

.timeline-body {
  font-size: 0.9rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---- Pipeline board ---- */

.pipeline {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-3);
}

.pipeline-col {
  flex: 0 0 240px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.pipeline-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-3);
}

.pipeline-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  font-size: 0.84rem;
}

.pipeline-card:hover {
  border-color: var(--color-accent);
}

.pipeline-card-title {
  font-weight: 700;
  margin-bottom: 2px;
}

.pipeline-card-meta {
  color: var(--color-muted);
  font-size: 0.78rem;
}

/* ---- Image gallery ---- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
}

.gallery-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}

.gallery-item.is-cover {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.gallery-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-bg-alt);
}

.gallery-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  padding: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.gallery-bar form {
  display: inline;
}

.gallery-empty {
  grid-column: 1 / -1;
}

/* ---- Commission calculator card ---- */

.calc-card {
  background: var(--color-info-soft);
  border: 1px solid var(--color-info);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.calc-formula {
  font-size: 0.8rem;
  color: var(--color-info-hover);
  margin-bottom: var(--space-3);
  font-variant-numeric: tabular-nums;
}

.calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
}

.calc-cell {
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  text-align: center;
}

.calc-cell span {
  display: block;
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-bottom: 2px;
}

.calc-cell strong {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.calc-cell.is-net strong {
  color: var(--color-success);
}

.calc-note {
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: var(--space-3);
}

/* ---- Confirmation panel for destructive actions ---- */

.confirm-panel {
  border: 1px solid var(--color-danger);
  background: var(--color-danger-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.confirm-panel h2 {
  color: var(--color-danger);
  font-size: 1.05rem;
}

.confirm-target {
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin: var(--space-3) 0;
  font-weight: 600;
}

/* ---- Duplicate warning ---- */

.dup-warning {
  border: 1px solid var(--color-warning);
  background: var(--color-warning-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 0.88rem;
}

.dup-warning strong {
  color: var(--color-warning);
}

.dup-warning ul {
  margin: var(--space-2) 0 0;
  padding-right: var(--space-4);
}

/* ---- Small helpers ---- */

.nowrap { white-space: nowrap; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.tabular { font-variant-numeric: tabular-nums; }
.w-full { width: 100%; }
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.gap-2 { gap: var(--space-2); }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.small { font-size: 0.82rem; }

.masked-phone {
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}

.masked-phone::after {
  content: " (مخفي)";
  font-size: 0.72rem;
}

.inline-form { display: inline; }

.required::after {
  content: " *";
  color: var(--color-accent);
}

.divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-4) 0;
}

.section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-ink-soft);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  margin: var(--space-5) 0 var(--space-4);
}

.section-title:first-child { margin-top: 0; }

/* Skip link — keyboard users should not tab the whole nav on every page. */
.skip-link {
  position: absolute;
  right: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-accent);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.skip-link:focus {
  right: var(--space-4);
  color: #fff;
}

/* ===== PART D — responsive ==============================================
   The agents use this on a phone in the field, so the list screens have to
   collapse to something readable rather than scroll sideways.
   ======================================================================== */

@media (max-width: 900px) {
  .page-content { padding: var(--space-4); }
  .detail-grid  { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  .top-nav { gap: var(--space-3); padding: 0 var(--space-3); }
  .top-nav-burger { display: inline-flex; align-items: center; justify-content: center; }

  /* The nav collapses into a single stacked sheet under the bar. */
  .top-nav-sections {
    display: none;
    position: absolute;
    top: 56px;
    right: 0;
    left: 0;
    z-index: 30;
    flex-direction: column;
    height: auto;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    background: var(--color-navy);
    padding: var(--space-2);
    gap: 0;
  }

  .top-nav-sections.is-open { display: flex; }
  .top-nav-section { display: block; width: 100%; }
  .top-nav-label { width: 100%; height: auto; padding: var(--space-3); justify-content: space-between; }

  .top-nav-dropdown {
    position: static;
    display: none;
    width: 100%;
    max-height: none;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0 0 var(--space-2) var(--space-3);
  }

  .top-nav-section.open > .top-nav-dropdown { display: block; }
  /* Hover-to-open is wrong on touch: it fires on the tap that follows. */
  .top-nav-section:hover > .top-nav-dropdown { display: none; }
  .top-nav-section.open > .top-nav-dropdown { display: block; }
  .top-nav-link { color: rgba(255,255,255,0.85); }
  .top-nav-link:hover { background: rgba(255,255,255,0.08); }
  .global-search { display: none; }

  .page-content { padding: var(--space-3); }
  .page-head { gap: var(--space-2); }
  .page-head h1 { font-size: 1.15rem; }
  .detail-grid { grid-template-columns: 1fr; }
  .filter-grid { grid-template-columns: 1fr; }
  .stat-tiles { grid-template-columns: 1fr 1fr; }

  /*  Each row becomes a stacked card with its own labels. The labels come
      from data-label on the cell, set by the list templates. */
  .table-wrap.is-stacked { border: none; background: transparent; overflow: visible; }
  .table-wrap.is-stacked table.data-table thead { display: none; }
  .table-wrap.is-stacked table.data-table,
  .table-wrap.is-stacked table.data-table tbody,
  .table-wrap.is-stacked table.data-table tr,
  .table-wrap.is-stacked table.data-table td { display: block; width: 100%; }

  .table-wrap.is-stacked table.data-table tr {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    padding: var(--space-2);
  }

  .table-wrap.is-stacked table.data-table td {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    border-bottom: 1px dashed var(--color-border);
    padding: var(--space-2);
  }

  .table-wrap.is-stacked table.data-table td:last-child { border-bottom: none; }

  .table-wrap.is-stacked table.data-table td::before {
    content: attr(data-label);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-muted);
    flex-shrink: 0;
  }

  .table-wrap.is-stacked table.data-table td[data-label=""]::before { content: none; }
}

@media (max-width: 480px) {
  .stat-tiles { grid-template-columns: 1fr; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; }
}

/* ===== PART E — print =================================================== */

@media print {
  .top-nav, .filterbar, .page-actions, .pager, .skip-link, .flash { display: none !important; }
  .app-shell { height: auto; overflow: visible; }
  .main-area { overflow: visible; }
  body { background: #fff; }
  .card, .table-wrap { border-color: #999; box-shadow: none; }
  a[href]::after { content: ""; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}