/* Emdad additions on top of Gentelella v4. Only app-specific pieces live here. */

/* English: Outfit. Arabic (html lang=ar or dir=rtl): Almarai.
   Vendor main-v4.css is not edited. It sets --font to Inter and body,
   buttons, and inputs use that variable or inherit. These rules load
   after it, so they win. */
html[lang="en"],
html:not([lang="ar"]):not([dir="rtl"]) {
  --font: "Outfit", sans-serif;
  font-family: "Outfit", sans-serif;
}

html[lang="ar"],
html[dir="rtl"],
[dir="rtl"] {
  --font: "Almarai", sans-serif;
  font-family: "Almarai", sans-serif;
}

body,
.sidebar,
.topbar,
button,
.btn,
input,
textarea,
select,
.form-control {
  font-family: "Outfit", sans-serif;
}

html[lang="ar"] body,
html[lang="ar"] .sidebar,
html[lang="ar"] .topbar,
html[lang="ar"] button,
html[lang="ar"] .btn,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] .form-control,
[dir="rtl"] body,
[dir="rtl"] .sidebar,
[dir="rtl"] .topbar,
[dir="rtl"] button,
[dir="rtl"] .btn,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] .form-control {
  font-family: "Almarai", sans-serif;
}

/* Brand lockup: the header logo replaces the template's letter tile.
   Center the mark in the brand area for LTR, RTL, and the collapsed rail. */
.sidebar-brand.emdad-brand,
[dir="rtl"] .sidebar-brand.emdad-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-inline: var(--space-3);
}

body.sidebar-rail .sidebar-brand.emdad-brand,
[dir="rtl"] body.sidebar-rail .sidebar-brand.emdad-brand {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0;
}

.emdad-brand {
  text-decoration: none;
  gap: 0;
}

.emdad-logo {
  display: block;
  height: 32px;
  width: auto;
  max-width: min(168px, 100%);
  margin-inline: auto;
  object-fit: contain;
  object-position: center center;
}

.emdad-logo-dark { display: none; }

[data-theme="dark"] .emdad-logo-light { display: none; }
[data-theme="dark"] .emdad-logo-dark { display: block; }

.auth-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 22px;
}

.emdad-userchip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
  padding: 2px 10px 2px 2px;
  border-radius: 999px;
  max-width: 220px;
}
.emdad-userchip:hover { background: var(--bg-surface-secondary, rgba(127,127,127,.08)); }
.emdad-userchip-photo,
.emdad-userchip-initials,
.emdad-avatar-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.emdad-userchip-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--primary);
  color: #fff;
}
.emdad-userchip-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.emdad-userchip-meta strong {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.emdad-userchip-meta small {
  font-size: 10.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emdad-status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 18px var(--space-6);
  padding: 14px 18px;
  margin-bottom: 18px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-surface);
}
.emdad-status-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 140px;
}
.emdad-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
  box-shadow: 0 0 0 3px rgba(140, 155, 171, 0.18);
  flex: 0 0 auto;
}
.emdad-dot.is-on {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(38, 185, 154, 0.2);
}
.emdad-dot.is-off {
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.18);
}
.emdad-status-name {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 500;
}
.emdad-status-state { font-size: 13.5px; font-weight: 600; }
.emdad-status-detail { font-size: var(--fs-xs); color: var(--text-muted); }

.emdad-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
  margin: 0;
}
.emdad-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.emdad-switch-track {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: #c5cdd6;
  transition: background 0.15s;
  flex: 0 0 auto;
}
.emdad-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s;
}
.emdad-switch input:checked + .emdad-switch-track { background: var(--green); }
.emdad-switch input:checked + .emdad-switch-track::after { transform: translateX(18px); }
.emdad-switch-label { font-size: var(--fs-sm2); }
.emdad-switch-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.emdad-modal[hidden] { display: none !important; }
.emdad-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.emdad-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}
.emdad-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, var(--radius-sm));
  padding: 18px 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
.emdad-modal-title { font-weight: 650; font-size: var(--fs-lg); margin-bottom: 10px; }
.emdad-modal-body { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary, var(--text)); }
.emdad-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.emdad-toasts {
  position: fixed;
  /* 16px under the 56px top bar, so the account chip stays clear in LTR and RTL. */
  top: calc(56px + 16px);
  right: 16px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: min(360px, calc(100vw - 32px));
}
.emdad-toast {
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  font-size: var(--fs-sm2);
}
.emdad-toast.is-success { border-left: 3px solid var(--green); }
.emdad-toast.is-error { border-left: 3px solid var(--red); }
.emdad-toast.is-warning { border-left: 3px solid var(--yellow); }
.emdad-toast.is-info { border-left: 3px solid var(--blue); }

/* Collapsed rail: the wordmark is too wide, so show the mark, centered */
body.sidebar-rail .emdad-logo,
[dir="rtl"] body.sidebar-rail .emdad-logo {
  height: 28px;
  width: 28px;
  max-width: 28px;
  margin-inline: auto;
  object-fit: cover;
  object-position: left center;
}

/* Live refresh badge in the topbar */
.emdad-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 0 var(--space-1);
  white-space: nowrap;
}

.emdad-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent);
}

.emdad-live.stale .emdad-live-dot {
  background: var(--red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 20%, transparent);
}

/* Bot on/off pill used on dashboard + bot pages */
.emdad-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Deal profit figures line up better right-aligned and tabular */
.cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-muted-sm {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* Log viewer */
.emdad-log {
  margin: 0;
  max-height: 560px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-sm);
  line-height: 1.55;
  background: var(--bg-surface-secondary);
  color: var(--text);
  padding: 14px var(--space-4);
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------------------------------------------------------- AI pages ---- */

.emdad-prose {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text);
}

.emdad-subhead {
  margin: 18px 0 var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.emdad-bullets {
  margin: 0;
  padding-left: 18px;
  font-size: var(--fs-sm2);
  line-height: 1.75;
  color: var(--text);
}

.emdad-bullets li { margin-bottom: 6px; }

/* Expected-scenario blocks with a probability meter */
.emdad-scenarios {
  display: grid;
  gap: var(--space-3);
}

.emdad-scenario {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  background: var(--bg-surface-secondary);
}

.emdad-scenario-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 7px;
  font-size: var(--fs-sm2);
}

.emdad-prob {
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.emdad-meter {
  height: 5px;
  border-radius: 3px;
  background: var(--border-color);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.emdad-meter span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--teal), var(--blue));
}

/* News feed */
.emdad-news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.emdad-news-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.emdad-news-card:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.emdad-news-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.emdad-news-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
}

.emdad-news-title a { color: inherit; text-decoration: none; }
.emdad-news-title a:hover { color: var(--primary); text-decoration: underline; }

.emdad-news-summary {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  flex: 1;
}

.emdad-news-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  font-size: 11.5px;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-color);
}

/* AI Lab chat */
.emdad-chat-card {
  display: flex;
  flex-direction: column;
  min-height: 560px;
}

.emdad-chat-body {
  flex: 1;
  overflow-y: auto;
  max-height: 520px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.emdad-msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.emdad-msg.is-user { flex-direction: row-reverse; }

.emdad-msg-avatar {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
}

.emdad-msg.is-user .emdad-msg-avatar { background: var(--blue); }

.emdad-msg-body { max-width: 80%; }

.emdad-msg-text {
  padding: 10px 13px;
  border-radius: var(--radius);
  font-size: var(--fs-sm2);
  line-height: 1.65;
  background: var(--bg-surface-secondary);
  color: var(--text);
  border: 1px solid var(--border-color);
  overflow-wrap: anywhere;
}

.emdad-msg.is-user .emdad-msg-text {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.emdad-msg-text ul { margin: 6px 0; padding-left: 18px; }
.emdad-msg-text code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-sm);
  padding: 1px var(--space-1);
  border-radius: 3px;
  background: rgba(127, 127, 127, 0.16);
}

.emdad-msg-meta {
  margin-top: var(--space-1);
  font-size: 10.5px;
  color: var(--text-muted);
}

.emdad-msg.is-user .emdad-msg-meta { text-align: right; }

.emdad-typing {
  display: inline-flex;
  gap: var(--space-1);
  padding: 13px;
}

.emdad-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: emdad-bounce 1.2s infinite ease-in-out;
}

.emdad-typing span:nth-child(2) { animation-delay: 0.15s; }
.emdad-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes emdad-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.emdad-chat-foot { display: block; }

.emdad-chat-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.emdad-chat-input { flex: 1; min-width: 220px; }

.emdad-suggestions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: stretch;
}

.emdad-suggestions .btn {
  justify-content: flex-start;
  text-align: left;
  height: auto;
  padding: var(--space-2) 11px;
  line-height: 1.45;
  white-space: normal;
}

.emdad-window-tabs { margin-bottom: 14px; }

.emdad-insight-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: var(--space-2);
  font-size: 13.5px;
}

.emdad-insight-foot {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}

/* Chart containers need an explicit height for ECharts */
.emdad-chart {
  width: 100%;
  height: 260px;
}

.emdad-chart-sm {
  width: 100%;
  height: 200px;
}

.page-header-row {
  align-items: flex-start;
  gap: var(--space-4);
}
.page-actions {
  margin-left: auto;
}
.emdad-period-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.emdad-period-range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.emdad-period-range label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0;
}
.emdad-period-range input[type="date"] {
  height: 32px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: inherit;
  font-size: 12.5px;
}

.emdad-active-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
}
.emdad-active-icon svg {
  width: 18px;
  height: 18px;
}
.emdad-active-icon.is-on { color: var(--green); }
.emdad-active-icon.is-off { color: var(--red); }

.emdad-avatar-upload {
  display: flex;
  align-items: center;
  gap: 14px;
}
.emdad-avatar-preview {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--bg-surface-secondary);
}
.emdad-avatar-preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-2);
}
.emdad-crop-dialog { width: min(420px, 100%); }
.emdad-crop-stage {
  display: flex;
  justify-content: center;
  margin: var(--space-2) 0 14px;
}
.emdad-crop-stage canvas {
  width: min(320px, 100%);
  height: auto;
  border-radius: var(--radius-sm);
  cursor: grab;
  touch-action: none;
  background: var(--bg-surface-secondary);
}
.emdad-crop-zoom {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm2);
  color: var(--text-secondary, var(--text));
}
.emdad-crop-zoom input { flex: 1; }

.emdad-app-switch {
  padding: var(--space-3) 14px 6px;
}
.emdad-app-switch .nav-label {
  margin-bottom: 6px;
}
.emdad-app-switch select {
  width: 100%;
  height: 36px;
  padding: 0 var(--space-2);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  font: inherit;
  font-size: var(--fs-sm2);
}
.emdad-app-switch option {
  color: #1e2633;
  background: #fff;
}
.sidebar-rail .emdad-app-switch { display: none; }

.emdad-lang {
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  overflow: hidden;
}
.emdad-lang a {
  padding: var(--space-1) 9px;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--text-muted);
}
.emdad-lang a.is-on {
  background: var(--primary);
  color: #fff;
}

[dir="rtl"] {
  --font: "Almarai", sans-serif;
  font-family: "Almarai", sans-serif;
}
[dir="rtl"] .sidebar { left: auto; right: 0; }
[dir="rtl"] .main { margin-left: 0; margin-right: var(--sidebar-w); }
/* One mirror of the English bar. The top bar starts at the right, beside
   the sidebar, so the menu group stays on that edge and the account
   group sits on the left. Flex direction does that reorder once.
   direction:ltr on the trail, the language pill, and the account chip
   stops a second reversal: ‹ stays aimed at the current page, EN stays
   before عربي, and the avatar stays glued to the name. */
[dir="rtl"] .topbar {
  left: 0;
  right: var(--sidebar-w);
  direction: rtl;
  flex-direction: row;
}
[dir="rtl"] .topbar-left {
  direction: rtl;
  flex-direction: row;
}
[dir="rtl"] .topbar-right {
  direction: ltr;
  flex-direction: row-reverse;
}
[dir="rtl"] .breadcrumb {
  direction: ltr;
  flex-direction: row-reverse;
}
[dir="rtl"] .topbar .emdad-userchip {
  direction: ltr;
  flex-direction: row;
}
[dir="rtl"] .topbar .emdad-lang {
  direction: ltr;
  flex-direction: row;
}
[dir="rtl"] .cell-num { text-align: left; }
[dir="rtl"] .emdad-toasts { right: auto; left: 16px; }
@media (max-width: 768px) {
  [dir="rtl"] .main { margin-right: 0; }
  [dir="rtl"] .topbar { right: 0; }
  /* The sidebar sits on the right in Arabic, so hide it off the right edge. */
  [dir="rtl"] .sidebar { transform: translateX(100%); }
  [dir="rtl"] .sidebar.open { transform: translateX(0); }
}

.wms-split {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.wms-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 640px;
  overflow: auto;
}
.wms-list button {
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: var(--space-2) 10px;
  border-radius: 6px;
  cursor: pointer;
}
.wms-list button.is-active,
.wms-list button:hover {
  background: var(--bg-surface-secondary);
}
.wms-note-title {
  width: 100%;
  border: 0;
  background: transparent;
  font-size: 28px;
  font-weight: 650;
  color: var(--text);
  margin-bottom: var(--space-2);
}
.wms-note-title:focus { outline: none; }
.wms-note-body {
  width: 100%;
  min-height: 420px;
  border: 0;
  resize: vertical;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  line-height: 1.6;
}
.wms-note-body:focus { outline: none; }
.wms-indent { padding-left: var(--space-4); }
@media (max-width: 900px) {
  .wms-split { grid-template-columns: 1fr; }
}

/* Brand primary. Vendor :root stays teal; these win because this file loads after it.
   --green (profit / success) is unchanged. */
:root {
  --font: "Outfit", sans-serif;
  --primary: #7d4f50;
  --primary-dk: #684244;
  --primary-lt: #7d4f500f;
  --sidebar-active: #7d4f5014;
}

[data-theme="dark"] {
  --primary: #7d4f50;
  --primary-dk: #684244;
  --primary-lt: #7d4f5024;
  --sidebar-active: #7d4f5014;
}

/* After :root so Arabic keeps Almarai when the brand block sets --font to Outfit. */
html[lang="ar"],
html[dir="rtl"],
[dir="rtl"] {
  --font: "Almarai", sans-serif;
}

/* Custom select. The native control stays in the form for value, change, and submit.
   It is clipped only after JS wraps it, so the page still works if JS does not run. */
.emdad-select {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.emdad-select > select,
.emdad-app-switch .emdad-select > select,
.emdad-select > select.form-control {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  background: transparent !important;
  background-image: none !important;
  appearance: none !important;
  pointer-events: none !important;
}
button.emdad-select-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 0 var(--space-3);
  box-sizing: border-box;
  appearance: none;
  font-size: var(--fs-sm2);
  font-weight: 500;
  line-height: 1.2;
  text-align: start;
  color: var(--text);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: none;
  cursor: pointer;
}
button.emdad-select-trigger:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(125, 79, 80, 0.16);
}
button.emdad-select-trigger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.emdad-select-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.emdad-select-chevron {
  flex: 0 0 auto;
  margin-inline-start: auto;
  transition: transform 0.15s ease;
}
button.emdad-select-trigger[aria-expanded="true"] .emdad-select-chevron {
  transform: rotate(180deg);
}
.emdad-select--sidebar > button.emdad-select-trigger {
  height: 36px;
  padding: 0 10px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
}
.emdad-select--sidebar > button.emdad-select-trigger:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(125, 79, 80, 0.35);
}
.emdad-select-menu {
  position: fixed;
  z-index: 1300;
  box-sizing: border-box;
  margin: 0;
  padding: var(--space-1);
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--text);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
}
.emdad-select-menu[hidden] {
  display: none !important;
}
.emdad-select-option {
  padding: var(--space-2) 10px;
  border-radius: 4px;
  font-size: var(--fs-sm2);
  font-weight: 400;
  line-height: 1.35;
  text-align: start;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.emdad-select-option.is-active:not(.is-selected):not(.is-disabled),
.emdad-select-option:hover:not(.is-selected):not(.is-disabled) {
  background: rgba(125, 79, 80, 0.12);
}
.emdad-select-option.is-selected {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}
.emdad-select-option.is-disabled {
  color: var(--text-disabled);
  cursor: default;
}
.emdad-select-menu.emdad-select--sidebar {
  color: #c5d0dc;
  background: #1a2332;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.emdad-select-menu.emdad-select--sidebar .emdad-select-option.is-active:not(.is-selected):not(.is-disabled),
.emdad-select-menu.emdad-select--sidebar .emdad-select-option:hover:not(.is-selected):not(.is-disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.emdad-select-menu.emdad-select--sidebar .emdad-select-option.is-selected {
  background: var(--brand);
  color: #fff;
}
html[lang="en"] .emdad-select-trigger,
html[lang="en"] .emdad-select-menu,
html:not([lang="ar"]):not([dir="rtl"]) .emdad-select-trigger,
html:not([lang="ar"]):not([dir="rtl"]) .emdad-select-menu {
  font-family: "Outfit", sans-serif;
}
html[lang="ar"] .emdad-select-trigger,
html[lang="ar"] .emdad-select-menu,
html[dir="rtl"] .emdad-select-trigger,
html[dir="rtl"] .emdad-select-menu,
[dir="rtl"] .emdad-select-trigger,
[dir="rtl"] .emdad-select-menu {
  font-family: "Almarai", sans-serif;
}
@media (prefers-reduced-motion: reduce) {
  .emdad-select-chevron { transition: none; }
}

/* Compact list search and filters. Same 36px control as form fields and custom menus. */
.card:has(> .card-header .emdad-filters) {
  container-type: inline-size;
  container-name: emdad-card;
}
.card-header:has(.emdad-filters) {
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}
.card-header:has(.emdad-filters) > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.card-header:has(.emdad-filters) > .btn,
.card-header:has(.emdad-filters) > a.btn {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 var(--space-3);
  font-size: var(--fs-sm2);
  box-shadow: none;
}
.emdad-filters {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 0;
  margin-inline-start: auto;
}
.emdad-filters .emdad-filter-search,
.emdad-filters button.emdad-select-trigger,
.emdad-filters .emdad-filter-date {
  height: 36px;
  box-sizing: border-box;
  font-size: var(--fs-sm2);
  line-height: 1.2;
  border-radius: var(--radius-sm);
}
.emdad-filters .emdad-filter-search {
  width: 180px;
  flex: 1 1 160px;
  min-width: 0;
  max-width: 220px;
  padding: 0 var(--space-3);
  appearance: none;
}
.emdad-filters .emdad-filter-search::-webkit-search-decoration,
.emdad-filters .emdad-filter-search::-webkit-search-cancel-button,
.emdad-filters .emdad-filter-search::-webkit-search-results-button,
.emdad-filters .emdad-filter-search::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.emdad-filters .emdad-select {
  width: auto;
  flex: 1 1 136px;
  min-width: 0;
  max-width: 180px;
}
.emdad-filter-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 168px;
  margin: 0;
  padding: 0 var(--space-2) 0 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-muted);
  white-space: nowrap;
}
.emdad-filter-date input[type="date"] {
  width: 118px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm2);
  line-height: 1;
  color-scheme: light;
}
.emdad-filter-date:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(125, 79, 80, 0.16);
}
[data-theme="dark"] .emdad-filter-date,
[data-theme="dark"] .emdad-filter-date input[type="date"] {
  color-scheme: dark;
}
@container emdad-card (max-width: 820px) {
  .card-header:has(.emdad-filters) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
  }
  .card-header:has(.emdad-filters) > :first-child {
    grid-column: 1;
    grid-row: 1;
  }
  .card-header:has(.emdad-filters) > .btn,
  .card-header:has(.emdad-filters) > a.btn {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .card-header:has(.emdad-filters) > .emdad-filters {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin-inline-start: 0;
    justify-content: stretch;
    flex-wrap: wrap;
  }
  .emdad-filters .emdad-filter-search,
  .emdad-filters .emdad-select,
  .emdad-filters .emdad-filter-date {
    flex: 1 1 200px;
    width: auto;
    max-width: none;
    min-width: min(100%, 160px);
  }
}

.wms-list .empty-state {
  padding: 28px var(--space-3);
}
.wms-list .empty-state .empty-state-desc {
  margin-bottom: 0;
}

/* Above every other modal, so a confirm opened from an edit dialog is visible. */
#emdadConfirm { z-index: 1100; }
.emdad-user-dialog { width: min(640px, 100%); }

html:has(body.auth-body),
body.auth-body {
  min-height: 100%;
  height: 100%;
  background-color: #e8eef6;
  background-image:
    radial-gradient(ellipse 80% 58% at 12% 8%, rgba(125, 79, 80, 0.26), transparent 56%),
    radial-gradient(ellipse 70% 52% at 92% 94%, rgba(104, 66, 68, 0.18), transparent 54%),
    linear-gradient(165deg, #f7f3f3 0%, #e6edf6 46%, #efe6e6 100%);
  background-attachment: fixed;
}
body.auth-body {
  min-height: 100vh;
  margin: 0;
}
body.auth-body .auth-page {
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}
html[data-theme="dark"]:has(body.auth-body),
html[data-theme="dark"] body.auth-body {
  background-color: #12151c;
  background-image:
    radial-gradient(ellipse 80% 58% at 12% 8%, rgba(125, 79, 80, 0.5), transparent 58%),
    radial-gradient(ellipse 70% 52% at 92% 94%, rgba(201, 162, 39, 0.14), transparent 54%),
    linear-gradient(165deg, #17131a 0%, #12151c 48%, #1a1520 100%);
}
.emdad-login-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 40px 36px 28px;
  border-radius: 16px;
  box-shadow: 0 28px 64px rgba(30, 38, 51, 0.12);
}
.emdad-login-card .auth-brand {
  justify-content: center;
  margin-bottom: 20px;
}
.emdad-login-logo {
  height: 92px !important;
  max-width: 220px;
  width: auto;
}
.emdad-login-form .form-control {
  height: 44px;
}
.emdad-login-submit {
  width: 100%;
  height: 44px;
  justify-content: center;
  font-weight: 600;
  margin-top: 6px;
}
.emdad-login-card .emdad-lang.emdad-login-lang {
  display: flex;
  justify-content: center;
  align-self: center;
  width: auto;
  margin: var(--space-4) 0 0;
}
[dir="rtl"] .emdad-login-card .input-icon {
  left: auto;
  right: 11px;
}
.emdad-perm-table th,
.emdad-perm-table td { vertical-align: middle; }
.emdad-perm-table input[type="checkbox"] { width: 16px; height: 16px; }

/* Arabic (RTL): input icon sits on the right, so pad the text away from it. */
[dir="rtl"] .input-group .input-icon { left: auto; right: 11px; }
[dir="rtl"] .input-group .form-control { padding-left: var(--space-3); padding-right: 36px; }

/* Phone: top bar keeps only the menu button and the user chip; language, theme
   and logout move to the bottom of the sidebar. */
.emdad-sidebar-foot { display: none; }
@media (max-width: 768px) {
  .topbar .breadcrumb,
  .topbar .emdad-lang,
  .topbar .theme-toggle,
  .topbar .emdad-topbar-logout { display: none !important; }
  .topbar .emdad-userchip { max-width: 70vw; }
  .sidebar { display: flex; flex-direction: column; }
  .sidebar .sidebar-nav { flex: 1 1 auto; overflow-y: auto; }
  .emdad-sidebar-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border, rgba(127,127,127,.2));
    flex: 0 0 auto;
  }
  [dir="rtl"] .emdad-sidebar-foot .emdad-lang { direction: ltr; }
}
.emdad-theme-mini .theme-icon-light { display: none; }
[data-theme="dark"] .emdad-theme-mini .theme-icon-light { display: block; }
[data-theme="dark"] .emdad-theme-mini .theme-icon-dark { display: none; }
.emdad-sidebar-foot .tb-btn { color: var(--sidebar-text-hover, inherit); }
.emdad-sidebar-foot .emdad-lang a:not(.is-on) { color: var(--sidebar-text-hover, inherit); }
/* Text-only credit at the very bottom of the sidebar. */
.emdad-sidebar-credit {
  flex: 0 0 auto;
  padding: 10px var(--space-4) 12px;
  border-top: 1px solid var(--sidebar-border, rgba(127,127,127,.2));
  color: var(--sidebar-text, inherit);
  opacity: .6;
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 769px) { body.sidebar-rail .emdad-sidebar-credit { display: none; } }

/* Slightly larger text. Most template sizes are fixed px, so larger screens scale
   the whole page a little; phones only raise the base text size to avoid overflow. */
:root { --font-size: .9375rem; }
@media (min-width: 769px) {
  html { zoom: 1.06; }
}

/* ---------------------------------------------------------------------------
   Minimal look: calm surfaces, one accent, fewer borders and shadows.
   Styling only; every page, action and setting stays where it was.
   --------------------------------------------------------------------------- */
:root {
  --body-bg: #f7f8fa;
  --bg-surface: #ffffff;
  --bg-surface-secondary: #f3f4f6;
  --border-color: #eceef1;
  --border-color-light: #f2f3f5;
  --shadow: none;
  --shadow-card: none;
  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 14px;
  --sidebar-bg: #ffffff;
  --sidebar-hover: #f3f4f6;
  --sidebar-active: #7d4f5014;
  --sidebar-text: #5b6472;
  --sidebar-text-hover: #1e2633;
  --sidebar-text-active: #7d4f50;
  --sidebar-border: #eceef1;
}
[data-theme="dark"] {
  --body-bg: #0e131b;
  --bg-surface: #151b25;
  --bg-surface-secondary: #1b2230;
  --border-color: #ffffff10;
  --border-color-light: #ffffff0a;
  --shadow: none;
  --shadow-card: none;
  --sidebar-bg: #121821;
  --sidebar-hover: #ffffff08;
  --sidebar-active: #7d4f502e;
  --sidebar-text: #8a93a3;
  --sidebar-text-hover: #e6ebf2;
  --sidebar-text-active: #ffffff;
  --sidebar-border: #ffffff0d;
}

/* Cards: no shadow, hairline border, more breathing room. */
.card { box-shadow: none !important; border-color: var(--border-color); }
.card:hover { box-shadow: none !important; }
.card-header { border-bottom: 0; padding-bottom: var(--space-1); }
.card-footer { border-top: 1px solid var(--border-color-light); background: transparent; }
.card-title { font-weight: 600; letter-spacing: -0.01em; }
.card-subtitle { color: var(--text-muted); }

/* Page header: quieter eyebrow, clear title. */
.page-header { margin-bottom: 20px; }
.page-pretitle { letter-spacing: .06em; font-size: var(--fs-xs); color: var(--text-muted); }
.page-title { font-weight: 650; letter-spacing: -0.02em; }

/* Sidebar and top bar: flat, separated by a hairline only. */
.sidebar { border-inline-end: 1px solid var(--sidebar-border); box-shadow: none; }
.sidebar .nav-label { font-size: 10.5px; letter-spacing: .08em; opacity: .8; }
.sidebar .nav-link { border-radius: var(--radius-sm); }
.topbar { box-shadow: none; border-bottom: 1px solid var(--border-color); background: var(--bg-surface); }
.emdad-app-switch select { background: var(--bg-surface-secondary); border: 0; border-radius: var(--radius-sm); color: inherit; }

/* Tables: no zebra, row separators only. */
.table th { font-weight: 500; color: var(--text-muted); text-transform: none; letter-spacing: 0; background: transparent; }
.table td, .table th { border-color: var(--border-color-light); }
.table tbody tr:nth-child(odd), .table tbody tr:nth-child(even) { background: transparent; }
.table tbody tr:hover { background: var(--bg-surface-secondary); }

/* Buttons and inputs: soft corners, outline buttons become quiet. */
.btn { border-radius: var(--radius-sm); box-shadow: none; }
.btn-outline, .btn-ghost { border-color: var(--border-color); }
.form-control, select.form-control { border-radius: var(--radius-sm); box-shadow: none; border-color: var(--border-color); }
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-lt); }

/* Status pills: tinted text instead of heavy fills. */
.status { border-radius: 999px; font-weight: 500; }

/* Stat tiles and tabs: lighter. */
.tabs-pill { background: var(--bg-surface-secondary); border: 0; }
.footer { border-top: 0; color: var(--text-muted); }
.emdad-modal-dialog { box-shadow: 0 20px 50px rgba(15, 23, 42, .18); border-radius: 16px; }

/* Sidebar app picker follows the light/dark sidebar. */
.emdad-select--sidebar > button.emdad-select-trigger {
  color: var(--sidebar-text-hover);
  background: var(--sidebar-hover);
  border: 1px solid var(--sidebar-border);
}
.emdad-select-menu.emdad-select--sidebar {
  color: var(--text);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
}
.emdad-select-menu.emdad-select--sidebar .emdad-select-option.is-active:not(.is-selected):not(.is-disabled),
.emdad-select-menu.emdad-select--sidebar .emdad-select-option:hover:not(.is-selected):not(.is-disabled) {
  background: var(--bg-surface-secondary);
  color: var(--text);
}

/* Change history timeline (Logs page). */
.emdad-history-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.emdad-history-filters .form-control { width: auto; min-width: 140px; flex: 1 1 140px; }
.emdad-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.emdad-timeline::before { content: ""; position: absolute; inset-inline-start: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--border-color); }
.emdad-timeline-day { font-size: var(--fs-xs); letter-spacing: .06em; color: var(--text-muted); margin: 18px 0 var(--space-2); padding-inline-start: var(--space-5); }
.emdad-timeline-day:first-child { margin-top: 0; }
.emdad-timeline-item { position: relative; display: flex; gap: var(--space-3); padding: var(--space-2) 0; }
.emdad-timeline-dot { position: relative; z-index: 1; width: 11px; height: 11px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; padding: 0; border: 2px solid var(--bg-surface); }
.emdad-timeline-dot.status-blue { background: var(--blue); }
.emdad-timeline-dot.status-yellow { background: var(--yellow); }
.emdad-timeline-dot.status-green { background: var(--green); }
.emdad-timeline-dot.status-purple { background: var(--purple); }
.emdad-timeline-dot.status-red { background: var(--red); }
.emdad-timeline-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.emdad-timeline-details { color: var(--text-secondary); margin-top: 2px; overflow-wrap: anywhere; }
.emdad-timeline-meta { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }

.emdad-period-select { width: auto; min-width: 150px; height: 34px; }
.emdad-period-range[hidden] { display: none; }

/* Contacts directory. */
.emdad-contacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); }
.emdad-contact[hidden] { display: none; }
.emdad-contact-head { display: flex; align-items: center; gap: var(--space-3); }
.emdad-contact-photo { width: 44px !important; height: 44px !important; font-size: var(--fs-md); }
.emdad-contact-lines { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-3); font-size: var(--fs-sm2); overflow-wrap: anywhere; }
.emdad-contact-lines a { color: var(--text-secondary); text-decoration: none; }
.emdad-contact-lines a:hover { color: var(--primary); }
[dir="rtl"] .emdad-contact-lines a { text-align: right; }

/* Delete actions are red in every theme. */
.emdad-delete, .btn.emdad-delete { color: var(--red) !important; border-color: color-mix(in srgb, var(--red) 35%, transparent) !important; }
.emdad-delete:hover, .btn.emdad-delete:hover { background: color-mix(in srgb, var(--red) 10%, transparent) !important; color: var(--red) !important; }
.btn-primary.emdad-delete, .btn-danger.emdad-delete { background: var(--red) !important; color: #fff !important; border-color: var(--red) !important; }
#emdadConfirmOk.btn-danger { background: var(--red); border-color: var(--red); color: #fff; }

/* AI decisions. */
.emdad-market-now { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-bottom: var(--space-3); }
.emdad-market-num { font-size: var(--fs-xl); font-weight: 600; }
.emdad-deals { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.emdad-deal { border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: 10px; }
.emdad-deal-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.emdad-deal-levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.emdad-deal-levels span { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
.emdad-deal-levels strong { font-size: var(--fs-md); }
.emdad-deal-actions { display: flex; gap: var(--space-2); margin-top: auto; }
.emdad-deal-actions .btn { flex: 1; }
@media (max-width: 480px) { .emdad-deal-levels { grid-template-columns: repeat(2, 1fr); } }

/* Sortable table headers. */
th.emdad-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.emdad-sortable::after { content: "\2195"; opacity: .35; margin-inline-start: var(--space-1); font-size: .85em; }
th.emdad-sortable[aria-sort="ascending"]::after { content: "\2191"; opacity: .9; }
th.emdad-sortable[aria-sort="descending"]::after { content: "\2193"; opacity: .9; }

/* Table alignment: a header and its cells always share alignment (LTR + RTL). */
.table th, .table td { text-align: start; vertical-align: middle; }
.table th.cell-num, .table td.cell-num { text-align: end; font-variant-numeric: tabular-nums; }
[dir="rtl"] .table th.cell-num, [dir="rtl"] .table td.cell-num { text-align: end; }
.table td.cell-mono { font-family: inherit; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.table td .emdad-switch { display: inline-flex; vertical-align: middle; margin: 0; }
.table td .row-actions { display: flex; align-items: center; justify-content: flex-start; gap: 6px; flex-wrap: nowrap; }
.table td .row-actions .btn { margin: 0; }

/* Bot master switch. */
.emdad-master-switch .emdad-master-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.emdad-master-title { font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.emdad-master-text .card-subtitle { margin-top: 2px; }
.emdad-master-pill { font-size: var(--fs-xs); }



/* ===== Spacing system: one scale, used everywhere. ===== */
:root {
  --brand: #7d4f50;
  --brand-dark: #684244;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-sm2: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --section-gap: var(--space-5);   /* between cards / sections */
  --card-pad-x: var(--space-5);
  --card-pad-y: var(--space-4);
  --grid-gap: var(--space-4);
  --control-gap: var(--space-2);
  --pill-ok-bg: rgba(38, 166, 91, .12);  --pill-ok-fg: #1e8a4c;
  --pill-bad-bg: rgba(220, 53, 69, .10); --pill-bad-fg: #c0392b;
  --pill-info-bg: rgba(52, 120, 246, .10); --pill-info-fg: #2f5fbf;
  --pill-muted-bg: var(--border-color-light); --pill-muted-fg: var(--text-muted);
}

/* Sections: every card / alert on a page is separated by the same gap. */
.card { margin: 0 0 var(--section-gap); }
.card:last-child { margin-bottom: 0; }
.page-header { margin-bottom: var(--section-gap); }
#pageAlert:not(:empty), .alert { margin-bottom: var(--section-gap); }
.row, .grid, [class*="col-"] > .card { gap: var(--grid-gap); }
.row > .card, .grid > .card { margin-bottom: 0; }

/* Card insides. */
.card-header { padding: var(--card-pad-y) var(--card-pad-x) var(--space-2); gap: var(--space-3); }
.card-body { padding: var(--card-pad-y) var(--card-pad-x); }
.card-body.p-0 { padding: 0; }
.card-footer { padding: var(--space-3) var(--card-pad-x); }
.card-subtitle { margin-top: var(--space-1); }
.table th, .table td { padding: var(--space-3) var(--space-4); }
.table th:first-child, .table td:first-child { padding-inline-start: var(--card-pad-x); }
.table th:last-child, .table td:last-child { padding-inline-end: var(--card-pad-x); }

/* Forms and controls. */
.form-group { margin-bottom: var(--space-4); }
.form-row { display: flex; flex-wrap: wrap; gap: var(--grid-gap); }
.form-row > .form-group { margin-bottom: 0; }
.form-label { margin-bottom: var(--space-1); }
.row-actions, .emdad-filters, .btn-group { gap: var(--control-gap); }
.toggle-row { gap: var(--space-4); padding: var(--space-3) 0; }

/* Status pills: soft, same shape everywhere. */
.badge { display: inline-flex; align-items: center; padding: 2px var(--space-2); border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.6; border: 0; white-space: nowrap; }
.badge-teal, .badge-green, .badge-success { background: var(--pill-ok-bg); color: var(--pill-ok-fg); }
.badge-red, .badge-danger { background: var(--pill-bad-bg); color: var(--pill-bad-fg); }
.badge-blue, .badge-info { background: var(--pill-info-bg); color: var(--pill-info-fg); }
.badge-gray, .badge-muted, .badge-secondary { background: var(--pill-muted-bg); color: var(--pill-muted-fg); }
.emdad-master-pill.is-on { background: var(--pill-ok-bg); color: var(--pill-ok-fg); }
.emdad-master-pill.is-off { background: var(--pill-bad-bg); color: var(--pill-bad-fg); }
.emdad-master-switch .emdad-master-row { padding: var(--card-pad-y) var(--card-pad-x); }

@media (max-width: 768px) {
  :root { --section-gap: var(--space-4); --card-pad-x: var(--space-4); --card-pad-y: var(--space-3); }
}

/* ===== Mantine-style components (Mantine v7 default theme, Emdad brand as primary). ===== */
:root {
  --m-gray-0: #f8f9fa; --m-gray-1: #f1f3f5; --m-gray-2: #e9ecef; --m-gray-3: #dee2e6;
  --m-gray-4: #ced4da; --m-gray-5: #adb5bd; --m-gray-6: #868e96; --m-gray-7: #495057;
  --m-gray-9: #212529;
  --m-primary: var(--brand); --m-primary-hover: var(--brand-dark); --m-primary-light: rgba(125, 79, 80, .1);
  --m-radius: 8px; --m-radius-sm: 4px; --m-radius-xl: 32px;
  --m-input-h: 36px; --m-input-h-sm: 30px;
  --m-shadow-xs: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.1);
  --m-shadow-md: 0 1px 3px rgba(0,0,0,.05), 0 10px 15px -5px rgba(0,0,0,.05), 0 7px 7px -5px rgba(0,0,0,.04);
  --m-focus: 0 0 0 2px var(--m-primary-light), 0 0 0 1px var(--m-primary);
  --m-border: 1px solid var(--m-gray-3);
  --radius: var(--m-radius); --radius-sm: var(--m-radius-sm); --radius-lg: 12px;
}
:root[data-theme="dark"] { --m-gray-0: #2e2e2e; --m-gray-1: #2a2a2a; --m-gray-2: #3b3b3b; --m-gray-3: #424242; --m-gray-4: #4f4f4f; --m-border: 1px solid #424242; }

/* Buttons */
.btn { height: var(--m-input-h); padding: 0 18px; border-radius: var(--m-radius); font-weight: 600; font-size: var(--fs-md); line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); transition: background .15s, border-color .15s, transform .05s; }
.btn:active { transform: translateY(1px); }
.btn-sm { height: var(--m-input-h-sm); padding: 0 14px; font-size: var(--fs-sm2); }
.btn-primary { background: var(--m-primary); border: 1px solid var(--m-primary); color: #fff; }
.btn-primary:hover { background: var(--m-primary-hover); border-color: var(--m-primary-hover); }
.btn-outline { background: transparent; border: 1px solid var(--m-primary); color: var(--m-primary); }
.btn-outline:hover { background: var(--m-primary-light); }
.btn-ghost { background: transparent; border: 1px solid transparent; color: var(--m-primary); }
.btn-ghost:hover { background: var(--m-primary-light); }
.btn-danger { background: #fa5252; border-color: #fa5252; color: #fff; }
.btn-danger:hover { background: #e03131; border-color: #e03131; }
.btn:focus-visible { outline: none; box-shadow: var(--m-focus); }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* Inputs / selects / textareas */
.form-control, select.form-control, .emdad-filters input, .emdad-filters select {
  min-height: var(--m-input-h); padding: 0 var(--space-3); border: var(--m-border); border-radius: var(--m-radius);
  font-size: var(--fs-md); background-color: var(--card-bg, #fff); box-shadow: none; transition: border-color .1s;
}
textarea.form-control { padding: var(--space-2) var(--space-3); min-height: 72px; }
.form-control:focus, .emdad-filters input:focus, .emdad-filters select:focus { border-color: var(--m-primary); box-shadow: none; outline: none; }
.form-label { font-size: var(--fs-md); font-weight: 500; color: var(--text-color, var(--m-gray-9)); }
.form-help { font-size: var(--fs-sm); color: var(--m-gray-6); margin-top: var(--space-1); }

/* Cards (Mantine Paper withBorder) */
.card { border: var(--m-border); border-radius: var(--m-radius); box-shadow: none; }

/* Tables (Mantine Table, highlightOnHover) */
.table thead th { font-size: var(--fs-sm); font-weight: 600; color: var(--m-gray-7); background: transparent; border-bottom: var(--m-border); }
.table tbody td { border-top: 1px solid var(--m-gray-2); font-size: var(--fs-md); }
.table tbody tr:hover { background: var(--m-gray-0); }

/* Switch (Mantine Switch md) */
.emdad-switch-track { background: var(--m-gray-4); }
.emdad-switch input:checked + .emdad-switch-track { background: var(--m-primary); }
.emdad-switch input:focus-visible + .emdad-switch-track { box-shadow: var(--m-focus); }

/* Badges (Mantine Badge variant="light") */
.badge { border-radius: var(--m-radius-xl); text-transform: uppercase; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .25px; padding: 0 10px; height: 20px; }

/* Modals (Mantine Modal) */
.emdad-modal-dialog, .emdad-modal .modal-content { border-radius: var(--m-radius); box-shadow: var(--m-shadow-md); border: 0; }
.emdad-modal-backdrop { background: rgba(0, 0, 0, .6); }

/* Tabs (Mantine Tabs default) */
.emdad-tabs, .nav-tabs { border-bottom: 2px solid var(--m-gray-3); gap: 0; }
.emdad-tabs a, .nav-tabs a, .nav-tabs .nav-link { padding: 10px var(--space-4); border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px; font-size: var(--fs-md); color: var(--m-gray-7); border-radius: var(--m-radius-sm) var(--m-radius-sm) 0 0; }
.emdad-tabs a:hover, .nav-tabs a:hover { background: var(--m-gray-0); }
.emdad-tabs a.active, .nav-tabs a.active, .nav-tabs .nav-link.active { border-bottom-color: var(--m-primary); color: var(--text-color, var(--m-gray-9)); font-weight: 500; }

/* Dropdowns / menus (Mantine Menu) */
.dropdown-menu { border: var(--m-border); border-radius: var(--m-radius); box-shadow: var(--m-shadow-md); padding: var(--space-1); }
.dropdown-item, .dropdown-menu a { border-radius: var(--m-radius-sm); padding: 6px var(--space-3); font-size: var(--fs-md); }
.dropdown-item:hover, .dropdown-menu a:hover { background: var(--m-gray-1); }

/* Toasts (Mantine Notification) */
.emdad-toast, .toast { border-radius: var(--m-radius); box-shadow: var(--m-shadow-md); border: var(--m-border); border-inline-start: 4px solid var(--m-primary); padding: var(--space-3) var(--space-4); font-size: var(--fs-md); }
.emdad-toast.is-error { border-inline-start-color: #fa5252; }
.emdad-toast.is-success { border-inline-start-color: #40c057; }

/* Alerts (Mantine Alert light) */
.alert { border-radius: var(--m-radius); border: 0; padding: var(--space-3) var(--space-4); font-size: var(--fs-md); }

/* Wide tables stay inside their card: action buttons wrap, and anything still too wide scrolls inside the card. */
.card .table-responsive { overflow-x: auto; max-width: 100%; }
.card .table-responsive > .table { min-width: 100%; }
.table td .row-actions { flex-wrap: wrap; gap: var(--space-1); }
.table td .row-actions .btn-sm { padding: 0 10px; }
.table td .row-actions { max-width: 240px; }
.table th, .table td { white-space: normal; }
.table td.cell-mono, .table td.cell-num { white-space: nowrap; }

/* Stop pages sliding sideways: nothing may be wider than the screen. */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
.main, .main > *, .row, .card { min-width: 0; max-width: 100%; }
.emdad-chart, .emdad-chart canvas { max-width: 100%; }

/* Phone header logo: only shown when the sidebar is hidden. */
.emdad-topbar-logo { display: none; }
@media (max-width: 768px) {
  .emdad-topbar-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
  .emdad-topbar-logo img { height: 28px; width: auto; max-width: 120px; object-fit: contain; }
  .topbar .breadcrumb { display: none; }
}

/* Page controls added under long tables and lists. */
.emdad-auto-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-color-light); }
.emdad-auto-pager[hidden] { display: none; }

/* Telegram tracker */
.emdad-nav-child { padding-left: calc(var(--space-6) + var(--space-2)); font-size: var(--fs-sm); }
html[dir="rtl"] .emdad-nav-child { padding-left: 12px; padding-right: calc(var(--space-6) + var(--space-2)); }
.emdad-track-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.emdad-track-chip { border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-secondary); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.emdad-track-chip b { margin-left: 4px; color: var(--text); }
.emdad-track-chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.emdad-track-chip.active b { color: #fff; }
.emdad-track-list { display: flex; flex-direction: column; gap: var(--space-3); }
.emdad-track-item { border: 1px solid var(--border-color); border-radius: var(--radius); padding: var(--space-3) var(--space-4); background: var(--bg-surface); min-width: 0; }
.emdad-track-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.emdad-track-title { font-weight: 600; color: var(--text); }
.emdad-track-text { margin: var(--space-3) 0 0; padding: var(--space-3); background: var(--bg-surface-secondary); border-radius: var(--radius-sm); white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: var(--fs-sm); color: var(--text); max-height: 240px; overflow: auto; }
.emdad-track-fields { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.emdad-track-field { font-size: var(--fs-xs); background: var(--bg-surface-secondary); border-radius: var(--radius-sm); padding: 3px 8px; color: var(--text); word-break: break-all; }
.emdad-track-field span { color: var(--text-muted); margin-right: 6px; }
.emdad-track-steps { margin-top: var(--space-3); }
.emdad-track-steps summary { cursor: pointer; font-size: var(--fs-xs); color: var(--text-muted); }
.emdad-track-steps ol { list-style: none; margin: var(--space-2) 0 0; padding: 0; border-left: 2px solid var(--border-color); }
.emdad-track-step { display: flex; gap: var(--space-3); padding: 3px 0 3px var(--space-3); font-size: var(--fs-xs); color: var(--text-secondary); position: relative; }
.emdad-track-step time { flex-shrink: 0; font-family: var(--font-mono, monospace); color: var(--text-muted); }
.emdad-track-step span { min-width: 0; word-break: break-word; white-space: pre-wrap; }
.emdad-track-step.ok span { color: var(--green); }
.emdad-track-step.bad span { color: var(--red); }
.emdad-track-step.warn span { color: var(--yellow); }
.emdad-track-step.ai span { color: var(--purple); }
@media (max-width: 768px) { .emdad-track-head { flex-direction: column; } }

/* Popups (message preview, picture preview) */
.emdad-clickable { cursor: pointer; border-radius: var(--radius-sm); }
.emdad-clickable:hover { background: var(--bg-surface-secondary); }
.emdad-dialog { border: 1px solid var(--border-color); border-radius: var(--radius); padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 64px); background: var(--bg-surface); color: var(--text); box-shadow: 0 12px 32px rgba(15, 23, 42, .18); }
.emdad-dialog::backdrop { background: rgba(15, 23, 42, .45); }
.emdad-dialog-inner { padding: var(--space-4); }
.emdad-dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.emdad-raw-message { white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: var(--fs-sm); line-height: 1.6; background: var(--bg-surface-secondary); border-radius: var(--radius-sm); padding: var(--space-3); margin: 0 0 var(--space-3); max-height: 50vh; overflow: auto; }
.emdad-dialog-meta { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); margin: 0; font-size: var(--fs-xs); }
.emdad-dialog-meta dt { color: var(--text-muted); }
.emdad-dialog-meta dd { margin: 0; word-break: break-all; }
.emdad-img-dialog { background: transparent; border: 0; padding: 0; max-width: 92vw; max-height: 92vh; }
.emdad-img-dialog::backdrop { background: rgba(15, 23, 42, .75); }
/* Native popups (message details, photo preview): keep them centered even after a margin reset. */
.emdad-dialog[open], .emdad-img-dialog[open] { position: fixed; inset: 0; margin: auto; }
.emdad-img-dialog img { display: block; max-width: 92vw; max-height: 92vh; border-radius: var(--radius); }

/* Light ring around profile pictures, visible in light and dark mode. */
.emdad-avatar-photo, .emdad-userchip-photo, .emdad-avatar-img, img[src*="uploads/avatars"], .cell-avatar img, .avatar img {
  border: 2px solid color-mix(in srgb, var(--border-color) 70%, #fff 30%);
  box-sizing: border-box;
}
[data-theme="dark"] .emdad-avatar-photo, [data-theme="dark"] .emdad-userchip-photo, [data-theme="dark"] img[src*="uploads/avatars"],
[data-theme="dark"] .cell-avatar img, [data-theme="dark"] .avatar img {
  border-color: rgba(255, 255, 255, .22);
}

/* Popups fit the screen: above the header, title and buttons fixed, body scrolls. */
.emdad-modal { z-index: 1000; padding: var(--space-4); }
.emdad-modal-dialog { box-sizing: border-box; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
/* Popups with a body section keep the title and buttons fixed and scroll the body. */
.emdad-modal-dialog:has(.emdad-modal-body) { display: flex; flex-direction: column; overflow: hidden; }
.emdad-modal-dialog > form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.emdad-modal-title { flex-shrink: 0; }
.emdad-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.emdad-modal-actions { flex-shrink: 0; padding-top: var(--space-3); border-top: 1px solid var(--border-color-light, var(--border-color)); }
@media (max-width: 600px) {
  .emdad-modal { padding: var(--space-2); align-items: flex-end; }
  .emdad-modal-dialog { width: 100%; max-height: calc(100dvh - 16px); padding: var(--space-4); }
}

/* Mantine-style light badges: roles, access, skills. */
.emdad-badge-group { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; }
.emdad-badge {
  --b-c: var(--text-secondary);
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; white-space: nowrap; line-height: 1;
  color: var(--b-c); background: color-mix(in srgb, var(--b-c) 12%, transparent);
}
.emdad-badge-brand { --b-c: var(--brand); }
.emdad-badge-blue { --b-c: var(--blue); }
.emdad-badge-teal { --b-c: var(--teal, var(--primary)); }
.emdad-badge-green { --b-c: var(--green); }
.emdad-badge-purple { --b-c: var(--purple); }
.emdad-badge-gray { --b-c: var(--text-muted); }
[data-theme="dark"] .emdad-badge-brand { --b-c: color-mix(in srgb, var(--brand) 55%, #fff); }
.emdad-badge-lg { height: 28px; padding: 0 12px; font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text); background: var(--bg-surface-secondary); border: 1px solid var(--border-color); }

/* LinkedIn-style profile */
.emdad-profile-hero { padding: 0; overflow: hidden; }
.emdad-profile-cover { height: 140px; background: linear-gradient(120deg, var(--brand) 0%, var(--brand-dark, var(--brand)) 55%, color-mix(in srgb, var(--brand) 40%, #1f2937) 100%); }
.emdad-profile-main { position: relative; padding: 0 var(--space-6) var(--space-5); }
.emdad-profile-photo { margin-top: -64px; width: 128px; height: 128px; border-radius: 50%; border: 4px solid var(--bg-surface); background: var(--bg-surface); overflow: hidden; box-shadow: 0 2px 8px rgba(15, 23, 42, .12); }
.emdad-profile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; border: 0 !important; }
.emdad-profile-initials { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 600; color: #fff; background: var(--brand); }
.emdad-profile-actions { position: absolute; top: var(--space-4); right: var(--space-6); display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
html[dir="rtl"] .emdad-profile-actions { right: auto; left: var(--space-6); }
.emdad-profile-name { margin: var(--space-3) 0 2px; font-size: 22px; font-weight: 650; color: var(--text); line-height: 1.25; }
.emdad-profile-headline { font-size: var(--fs-md, 15px); color: var(--text-secondary); }
.emdad-profile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--text-muted); }
.emdad-profile-about { margin: 0; line-height: 1.65; color: var(--text); white-space: normal; }
.emdad-qual-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.emdad-qual-list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.emdad-qual-list li + li { padding-top: var(--space-4); border-top: 1px solid var(--border-color-light, var(--border-color)); }
.emdad-qual-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius); background: var(--bg-surface-secondary); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.emdad-skill-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.emdad-profile-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-3) var(--space-4); margin: 0; font-size: var(--fs-sm); }
.emdad-profile-facts dt { color: var(--text-muted); }
.emdad-profile-facts dd { margin: 0; color: var(--text); word-break: break-word; }
@media (max-width: 600px) {
  .emdad-profile-cover { height: 96px; }
  .emdad-profile-main { padding: 0 var(--space-4) var(--space-4); }
  .emdad-profile-photo { width: 96px; height: 96px; margin-top: -48px; }
  .emdad-profile-actions { position: static; justify-content: flex-start; margin-top: var(--space-3); }
}

/* Filter bar added above tables */
.emdad-auto-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-color-light, var(--border-color)); }
.emdad-auto-filters[hidden] { display: none; }
.emdad-auto-filters input[type=search] { flex: 1 1 200px; max-width: 320px; }
.emdad-auto-filters select { flex: 0 1 180px; width: auto; }
@media (max-width: 600px) { .emdad-auto-filters input[type=search], .emdad-auto-filters select { flex: 1 1 100%; max-width: none; } }

/* Dark mode: inputs, selects and search boxes use the dark surface, readable text, no white boxes. */
[data-theme="dark"] .form-control,
[data-theme="dark"] select.form-control,
[data-theme="dark"] textarea.form-control,
[data-theme="dark"] .emdad-filters input,
[data-theme="dark"] .emdad-filters select,
[data-theme="dark"] .emdad-auto-filters input,
[data-theme="dark"] .emdad-auto-filters select,
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"] {
  background-color: #25262b;
  color: #e9ecef;
  border-color: #3b3d44;
  color-scheme: dark;
}
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #8b8f98; opacity: 1; }
[data-theme="dark"] .form-control:disabled { background-color: #1f2024; color: #8b8f98; }
[data-theme="dark"] select.form-control option { background: #25262b; color: #e9ecef; }
/* Browser autofill (login) paints a light yellow box with dark text; keep it dark and readable. */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus {
  -webkit-text-fill-color: #e9ecef;
  caret-color: #e9ecef;
  -webkit-box-shadow: 0 0 0 1000px #25262b inset;
  box-shadow: 0 0 0 1000px #25262b inset;
  transition: background-color 9999s ease-out 0s;
}
[data-theme="dark"] .emdad-login-card .form-label { color: #dee2e6; }

/* Profit colours in tables: green gain, red loss, grey breakeven; brighter shades in dark mode. */
.text-green { color: #2f9e44; }
.text-red { color: #e03131; }
.text-flat { color: var(--text-muted, #868e96); }
[data-theme="dark"] .text-green { color: #51cf66; }
[data-theme="dark"] .text-red { color: #ff6b6b; }
[data-theme="dark"] .text-flat { color: #909296; }

/* Breakeven status pill, clickable table rows, filter chip */
.status-gray{color:var(--text-muted,#868e96)}
.status-gray:before{background:var(--text-muted,#868e96)}
.emdad-row-link{cursor:pointer}
.emdad-row-link:hover td,.emdad-row-link:focus-visible td{background:var(--bg-hover,rgba(34,139,230,.06))}
.emdad-row-link:focus-visible{outline:2px solid var(--primary,#228be6);outline-offset:-2px}
.emdad-filter-chip{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 4px 0 10px;border-radius:999px;font-size:13px;font-weight:500;background:rgba(34,139,230,.12);color:var(--primary,#228be6);white-space:nowrap;max-width:220px}
.emdad-filter-chip button{border:0;background:none;color:inherit;font-size:16px;line-height:1;width:22px;height:22px;border-radius:50%;cursor:pointer;padding:0}
.emdad-filter-chip button:hover{background:rgba(34,139,230,.2)}

/* Per-session table under the Sessions chart */
.emdad-session-table{margin-top:8px;font-size:13px}
.emdad-session-table th,.emdad-session-table td{padding:6px 8px}

/* Top bar: light divider between language, theme, user and logout */
.topbar-right { gap: 0; }
.topbar-right > * { position: relative; margin-inline: 6px; }
.topbar-right > * + *::before {
  content: ""; position: absolute; left: -7px; top: 50%;
  width: 1px; height: 22px; transform: translateY(-50%);
  background: var(--border, rgba(0,0,0,.12)); pointer-events: none;
}
[data-theme="dark"] .topbar-right > * + *::before { background: rgba(255,255,255,.14); }
/* In Arabic the top bar runs right to left (reversed row), so the previous item sits on the right. */
[dir="rtl"] .topbar-right > * + *::before { left: auto; right: -7px; }
/* Phone: only the user chip is left in the top bar, so no dividers. */
@media (max-width: 768px) { .topbar-right > * + *::before { display: none; } }

/* Booking-style date range (common.js EmdadRange): one field, one calendar popup. */
.emdad-range { display: inline-flex; min-width: 0; }
.emdad-range > [hidden] { display: none !important; }
.emdad-range-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  min-width: 210px;
  max-width: 100%;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm2);
  white-space: nowrap;
  cursor: pointer;
}
.emdad-range-btn svg { color: var(--text-muted); flex: none; }
.emdad-range-btn.is-empty .emdad-range-text { color: var(--text-muted); }
.emdad-range-btn:hover { border-color: var(--brand); }
.emdad-range-btn:focus-visible,
.emdad-range-btn[aria-expanded="true"] {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(125, 79, 80, 0.16);
}
.emdad-range-text { overflow: hidden; text-overflow: ellipsis; }
.emdad-filters .emdad-filter-range .emdad-range-btn { height: 36px; }
.emdad-range-pop {
  position: absolute;
  width: max-content;
  max-width: calc(100vw - 16px);
  z-index: 1060;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-surface);
  color: var(--text);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  font-size: var(--fs-sm2);
}
.emdad-range-pop[hidden] { display: none; }
[data-theme="dark"] .emdad-range-pop { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); border-color: rgba(255, 255, 255, 0.1); }
.emdad-range-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.emdad-range-hint { color: var(--text-muted); font-size: var(--fs-sm); }
.emdad-range-nav {
  width: 30px; height: 30px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-size: 18px; line-height: 1;
  cursor: pointer;
}
.emdad-range-nav:hover { background: var(--bg-surface-secondary); }
[dir="rtl"] .emdad-range-nav { transform: scaleX(-1); }
.emdad-range-months { display: flex; gap: 20px; }
.emdad-range-title { text-align: center; font-weight: 600; margin-bottom: 6px; }
.emdad-range-grid { display: grid; grid-template-columns: repeat(7, 36px); row-gap: 2px; }
.emdad-range-wd { text-align: center; font-size: var(--fs-xs); color: var(--text-muted); padding: 4px 0; }
.emdad-range-day {
  height: 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.emdad-range-day:hover:not(:disabled) { background: var(--bg-surface-secondary); border-radius: var(--radius-sm); }
.emdad-range-day:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: var(--radius-sm); }
.emdad-range-day:disabled { color: var(--text-muted); opacity: .4; cursor: default; }
.emdad-range-day.is-today { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.emdad-range-day.in-range,
.emdad-range-day.in-range:hover { background: rgba(125, 79, 80, 0.12); border-radius: 0; }
[data-theme="dark"] .emdad-range-day.in-range { background: rgba(125, 79, 80, 0.32); }
.emdad-range-day.is-start,
.emdad-range-day.is-end,
.emdad-range-day.is-start:hover,
.emdad-range-day.is-end:hover { background: var(--brand); color: #fff; border-radius: var(--radius-sm); }
.emdad-range-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
@media (max-width: 640px) {
  .emdad-range-btn { min-width: 0; width: 100%; }
  .emdad-range-grid { grid-template-columns: repeat(7, minmax(34px, 1fr)); }
}

/* Count badge next to a card title (e.g. Signal sources). */
.card-title .emdad-badge { margin-inline-start: 6px; vertical-align: 1px; letter-spacing: 0; }

.mt5-status-err { max-width: 220px; white-space: normal; word-break: break-word; }

/* Row actions behind a 3-dot button (common.js EmdadApi.rowMenu). */
.emdad-row-menu { position: relative; display: inline-flex; }
.emdad-kebab {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-muted);
  cursor: pointer;
}
.emdad-kebab svg { fill: currentColor; }
.emdad-kebab:hover, .emdad-kebab[aria-expanded="true"] { color: var(--brand); border-color: var(--brand); }
.emdad-kebab:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(125, 79, 80, 0.2); border-color: var(--brand); }
.emdad-kebab.has-attention::after {
  content: ""; position: absolute; top: -3px; inset-inline-end: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 2px var(--bg-surface);
}
.emdad-row-menu-list {
  z-index: 1070;
  min-width: 150px;
  padding: 4px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}
.emdad-row-menu-list[hidden] { display: none; }
[data-theme="dark"] .emdad-row-menu-list { border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); }
.emdad-menu-item {
  display: flex; align-items: center; width: 100%;
  padding: 8px 10px;
  border: 0; border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit; font-size: var(--fs-sm2);
  text-align: start; white-space: nowrap;
  cursor: pointer;
}
.emdad-menu-item:hover, .emdad-menu-item:focus-visible { outline: none; background: var(--bg-surface-secondary); }
.emdad-menu-item.is-attention { color: var(--brand); font-weight: 600; }
.emdad-menu-item.emdad-delete { color: var(--red, #d64545); }
.emdad-menu-item.emdad-delete:hover, .emdad-menu-item.emdad-delete:focus-visible { background: rgba(214, 69, 69, 0.1); }
.emdad-menu-item:disabled { opacity: .5; cursor: default; }
[data-theme="dark"] .emdad-menu-item.is-attention { color: #d6a5a6; }

/* Telegram channel settings: TP1-TP7 checkboxes in one row, entry price choice. */
.emdad-tp-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding-top: 2px; }
.emdad-check { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; user-select: none; font-size: var(--fs-sm2); }
.emdad-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.emdad-segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; max-width: 100%; border-radius: var(--radius-sm); background: var(--bg-surface-secondary); }
.emdad-segmented label { position: relative; margin: 0; cursor: pointer; }
.emdad-segmented input { position: absolute; opacity: 0; width: 0; height: 0; }
.emdad-segmented span { display: block; padding: 6px 14px; border-radius: 6px; font-size: var(--fs-sm2); font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
.emdad-segmented input:checked + span { background: var(--bg-surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.emdad-segmented input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Sidebar bot groups (layout.php): bot link + toggle, its pages in a dropdown, a light line between bots. */
.emdad-nav-bot + .emdad-nav-bot::before {
  content: "";
  display: block;
  height: 1px;
  margin: 6px 12px;
  background: var(--sidebar-border, var(--border-color));
}
.emdad-nav-bot-row { display: flex; align-items: center; gap: 2px; }
.emdad-nav-bot-row > .nav-link { flex: 1 1 auto; min-width: 0; margin-bottom: 1px; }
.emdad-nav-toggle {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 0; border-radius: var(--radius-sm);
  background: transparent;
  color: var(--sidebar-text);
  cursor: pointer;
}
.emdad-nav-toggle:hover { background: var(--sidebar-hover); color: var(--sidebar-text-hover); }
.emdad-nav-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.emdad-nav-toggle svg { transition: transform .15s ease; }
.emdad-nav-bot.is-open .emdad-nav-toggle svg { transform: rotate(180deg); }
/* Pages slide open and closed; visibility keeps closed links out of the tab order. */
.emdad-nav-sub {
  display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows .22s ease, opacity .18s ease, visibility 0s linear .22s;
}
.emdad-nav-bot.is-open > .emdad-nav-sub {
  grid-template-rows: 1fr; opacity: 1; visibility: visible;
  transition: grid-template-rows .22s ease, opacity .18s ease, visibility 0s;
}
.emdad-nav-sub-in { min-height: 0; overflow: hidden; }
.emdad-nav-sub-in > :last-child { margin-bottom: 2px; }
.emdad-nav-instant .emdad-nav-sub, .emdad-nav-instant .emdad-nav-toggle svg { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .emdad-nav-toggle svg, .emdad-nav-sub { transition: none !important; } }

/* Drop lists (selects, date range, row menus) fade and slide in and out. */
/* clip-path + opacity only: no transform, so the zoom math that measures these popups stays exact. */
@keyframes emdadDropIn { from { opacity: 0; clip-path: inset(0 0 85% 0 round 8px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 0); } }
@keyframes emdadDropOut { from { opacity: 1; clip-path: inset(0 0 0 0 round 0); } to { opacity: 0; clip-path: inset(0 0 85% 0 round 8px); } }
.emdad-select-menu:not([hidden]), .emdad-range-pop:not([hidden]), .emdad-row-menu-list:not([hidden]) {
  animation: emdadDropIn .18s ease-out;
}
.emdad-select-menu.emdad-closing, .emdad-range-pop.emdad-closing, .emdad-row-menu-list.emdad-closing {
  animation: emdadDropOut .12s ease-in forwards; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .emdad-select-menu, .emdad-range-pop, .emdad-row-menu-list { animation: none !important; }
}
@media (min-width: 769px) {
  body.sidebar-rail .emdad-nav-toggle,
  body.sidebar-rail .emdad-nav-sub { display: none; }
  body.sidebar-rail .emdad-nav-bot + .emdad-nav-bot::before { margin: 6px 8px; }
}

/* TradingView indicators (settings modal + tables) */
.form-section-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 14px 0 6px; }
.emdad-ind-notes { max-width: 260px; white-space: pre-wrap; word-break: break-word; font-size: 12.5px; color: var(--text-muted); }