/* SDN Sales Workspace - canonical UI tokens */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Cairo";
  src: url("../assets/fonts/Cairo-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Cairo";
  src: url("../assets/fonts/Cairo-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --sdn-font-en: "Inter", Arial, sans-serif;
  --sdn-font-ar: "Cairo", Tahoma, sans-serif;

  --sdn-ink: #171a1d;
  --sdn-text: #312d2a;
  --sdn-muted: #6f6a65;
  --sdn-faint: #918b85;
  --sdn-canvas: #f7f6f3;
  --sdn-paper: #ffffff;
  --sdn-line: #dfddd8;
  --sdn-line-soft: #eceae6;
  --sdn-charcoal: #252422;
  --sdn-charcoal-soft: #312f2d;

  --sdn-cyan: #087ea4;
  --sdn-cyan-bright: #0b91bd;
  --sdn-cyan-soft: #e8f4f8;
  --sdn-cyan-soft-strong: #d7eef5;
  --sdn-teal: #137e72;
  --sdn-teal-soft: #e3f3ef;
  --sdn-green: #2c6e49;
  --sdn-green-soft: #e6f2ea;
  --sdn-amber: #a66800;
  --sdn-amber-soft: #fff2d7;
  --sdn-coral: #c74634;
  --sdn-coral-soft: #fbe9e5;
  --sdn-purple: #69529b;
  --sdn-purple-soft: #efeaf8;

  --sdn-shadow-xs: 0 1px 2px rgb(23 26 29 / 4%);
  --sdn-shadow-sm: 0 4px 12px rgb(23 26 29 / 7%);
  --sdn-shadow-md: 0 12px 32px rgb(23 26 29 / 14%);
  --sdn-scrim: rgb(23 26 29 / 46%);

  --sdn-radius-xs: 6px;
  --sdn-radius-sm: 8px;
  --sdn-radius-md: 10px;
  --sdn-radius-lg: 12px;
  --sdn-radius-xl: 14px;
  --sdn-radius-pill: 999px;

  --sdn-space-1: 4px;
  --sdn-space-2: 8px;
  --sdn-space-3: 12px;
  --sdn-space-4: 16px;
  --sdn-space-5: 20px;
  --sdn-space-6: 24px;
  --sdn-space-8: 32px;
  --sdn-space-10: 40px;

  --sdn-header-height: 64px;
  --sdn-sidebar-width: 244px;
  --sdn-content-max: 1440px;
  --sdn-control-height: 38px;
  --sdn-field-height: 42px;
  --sdn-transition: 160ms ease;

  --sdn-brand-panel: linear-gradient(135deg, #ddf1f6 0%, #edf6f6 55%, #f7f6f3 100%);
  --sdn-brand-accent: linear-gradient(90deg, #087ea4 0%, #2cb5d7 100%);
}

html[lang="en"] body,
[dir="ltr"] {
  font-family: var(--sdn-font-en);
}

html[lang="ar"] body,
[dir="rtl"] {
  font-family: var(--sdn-font-ar);
}

body {
  margin: 0;
  color: var(--sdn-text);
  background: var(--sdn-canvas);
  font-size: 14px;
  line-height: 1.45;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.sdn-card {
  background: var(--sdn-paper);
  border: 1px solid var(--sdn-line-soft);
  border-radius: var(--sdn-radius-lg);
  box-shadow: var(--sdn-shadow-xs);
}

.sdn-button {
  min-height: var(--sdn-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-inline: 18px;
  border-radius: var(--sdn-radius-pill);
  border: 1px solid transparent;
  font: 700 12px/1 var(--sdn-font-en);
  transition: background-color var(--sdn-transition), border-color var(--sdn-transition), color var(--sdn-transition);
}

[dir="rtl"] .sdn-button {
  font-family: var(--sdn-font-ar);
}

.sdn-button--primary {
  color: #fff;
  background: var(--sdn-cyan);
  border-color: var(--sdn-cyan);
}

.sdn-button--secondary {
  color: var(--sdn-text);
  background: var(--sdn-paper);
  border-color: var(--sdn-line);
}

.sdn-button--danger {
  color: var(--sdn-coral);
  background: var(--sdn-coral-soft);
  border-color: var(--sdn-coral-soft);
}

.sdn-field {
  width: 100%;
  min-height: var(--sdn-field-height);
  padding-inline: 12px;
  color: var(--sdn-text);
  background: var(--sdn-paper);
  border: 1px solid var(--sdn-line);
  border-radius: var(--sdn-radius-xs);
  outline: 0;
}

.sdn-field:focus-visible {
  border-color: var(--sdn-cyan);
  box-shadow: 0 0 0 3px rgb(8 126 164 / 16%);
}

.sdn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding-inline: 12px;
  border-radius: var(--sdn-radius-pill);
  font-size: 11px;
  font-weight: 700;
}

.sdn-badge--info { color: var(--sdn-cyan); background: var(--sdn-cyan-soft); }
.sdn-badge--success { color: var(--sdn-green); background: var(--sdn-green-soft); }
.sdn-badge--warning { color: var(--sdn-amber); background: var(--sdn-amber-soft); }
.sdn-badge--danger { color: var(--sdn-coral); background: var(--sdn-coral-soft); }
.sdn-badge--purple { color: var(--sdn-purple); background: var(--sdn-purple-soft); }

.sdn-modal-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--sdn-scrim);
}

.sdn-modal {
  width: min(1020px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--sdn-paper);
  border: 1px solid var(--sdn-line);
  border-radius: var(--sdn-radius-lg);
  box-shadow: var(--sdn-shadow-md);
}

.sdn-modal__body {
  min-height: 0;
  overflow: auto;
}

.sdn-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  background: #fbfaf8;
  border-top: 1px solid var(--sdn-line);
}

[dir="rtl"] .sdn-modal__footer {
  justify-content: flex-start;
}

@media (max-width: 1023px) {
  :root { --sdn-sidebar-width: 84px; }
  .sdn-modal { width: min(920px, calc(100vw - 32px)); }
}

@media (max-width: 767px) {
  .sdn-modal-layer { padding: 0; }
  .sdn-modal {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }
}

@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}