/* ===========================================================
   کلینیک — طراحی با الهام از معماری ایرانی و دقت بالینی
   پالت: فیروزه‌ای عمیق + کهربایی (زعفرانی)
   بدون گلس‌مورفیسم، بدون ظاهر پیش‌فرض AI
   =========================================================== */

:root {
  /* پالت Indigo Harbor — ایندیگو + خاکستری‌های سرد بندری */
  --teal: #4f46e5;
  --teal-strong: #4338ca;
  --teal-tint: #eef0fd;
  --amber: #b9822e;
  --amber-strong: #96681f;
  --amber-tint: #f6efe2;
  --red: #c45454;
  --red-tint: #f5e8e8;
  --green: #389e6b;
  --green-tint: #e8f2ed;

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

  /* Light mode (پیش‌فرض) — خاکستری آبی روشن و آرام */
  /* زمینه‌ی صفحه یک درجه تیره‌تر از کادرهای متن است تا کادری که مستقیم روی
     صفحه می‌نشیند (مثل جست‌وجو) از زمینه جدا بماند. */
  --bg: #e6eaf1;
  --surface: #ffffff;
  --surface-hover: #f6f8fb;
  /* زمینه‌ی کادرهای متن یک درجه از کارت تیره‌تر است: روی سفید خالص، نشانگر
     I-شکل ماوس در ویندوز (که سفید با لبه‌ی نازک است) عملاً دیده نمی‌شد. */
  --input-bg: #f5f7fa;
  --input-border: #d4dae4;
  --text-primary: #1e2433;
  --text-secondary: #5d6678;
  --text-muted: #949cab;
  --border: #d4dae4;
  --border-light: #e5e9f0;
  --shadow-sm: 0 1px 3px rgba(30,36,51,0.05);
  --shadow-md: 0 4px 16px rgba(30,36,51,0.06);
  --shadow-lg: 0 8px 32px rgba(30,36,51,0.08);

  /* Compatibility aliases for old iOS color names */
  --ios-blue: #4f46e5;
  --ios-green: #389e6b;
  --ios-red: #c45454;
  --ios-orange: #b9822e;
  --ios-purple: #4f46e5;
  --ios-teal: #4f46e5;

  /* رنگ اختصاصی ماژول جاری — پیش‌فرض (admin) */
  --accent: #4f46e5;
  --accent-strong: #4338ca;
  --accent-tint: #eef0fd;

  /* کهربایی ملایم (هشدارها) */
  --amber: #b9822e;
  --amber-strong: #96681f;
  --amber-tint: #f6efe2;
}

[data-theme="dark"] {
  /* Compatibility aliases for old iOS color names */
  --ios-blue: #7c85cf;
  --ios-green: #59a67a;
  --ios-red: #cc6666;
  --ios-orange: #c7954e;
  --ios-purple: #7c85cf;
  --ios-teal: #7c85cf;
  --bg: #12141a;
  --surface: #1e2129;
  --surface-hover: #262933;
  --input-bg: #1e2129;
  --input-border: #333842;
  --text-primary: #e6e8eb;
  --text-secondary: #9ea2a8;
  --text-muted: #6e7278;
  --border: #333842;
  --border-light: rgba(255,255,255,0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);

  --accent: #7c85cf;
  --accent-strong: #9da6eb;
  --accent-tint: rgba(124, 133, 207, 0.15);

  /* کهربایی — نسخه تاریک */
  --amber: #c7954e;
  --amber-strong: #d9ab6a;
  --amber-tint: rgba(199, 149, 78, 0.15);
}

/* ===========================================================
   Persian geometric background motif
   الگوی هندسی ظریف در پس‌زمینه (الهام از معماری ایرانی)
   =========================================================== */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 15% 20%, rgba(79, 70, 229, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 75%, rgba(93, 102, 120, 0.04) 0%, transparent 50%),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 40px,
      rgba(79, 70, 229, 0.015) 40px,
      rgba(79, 70, 229, 0.015) 41px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 40px,
      rgba(79, 70, 229, 0.015) 40px,
      rgba(79, 70, 229, 0.015) 41px
    );
  pointer-events: none;
  z-index: 0;
}

[data-theme="dark"] body::before {
  background-image:
    radial-gradient(ellipse at 15% 20%, rgba(129, 140, 248, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 75%, rgba(152, 160, 179, 0.04) 0%, transparent 50%),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 40px,
      rgba(129, 140, 248, 0.025) 40px,
      rgba(129, 140, 248, 0.025) 41px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 40px,
      rgba(129, 140, 248, 0.025) 40px,
      rgba(129, 140, 248, 0.025) 41px
    );
}

/* ===========================================================
   رنگ‌بندی یکدست — همه ماژول‌ها از تم زرشکی + طلایی استفاده می‌کنند
   (رنگ اختصاصی هر ماژول به درخواست مشتری حذف شد)
   =========================================================== */

/* ===========================================================
   Base
   =========================================================== */

* {
  box-sizing: border-box;
}

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: 'Vazirmatn', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  transition: background 0.3s ease, color 0.3s ease;
  min-height: 100vh;
  line-height: 1.6;
}

/* ===========================================================
   Common components
   =========================================================== */

/* Card — replaced glassmorphism with clean surface + shadow */
.ios-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
  padding: 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ios-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border);
}

/* کارت‌هایی که داخل‌شان فرم (input/select/textarea) است نباید با هاور برجسته و تکون بخورند */
.ios-card:has(input):hover,
.ios-card:has(select):hover,
.ios-card:has(textarea):hover {
  transform: none;
  box-shadow: var(--shadow-md);
  border-color: var(--border-light);
}

/* Glass — Modal base */
.glass {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* Card variants */
.card-accent {
  border-inline-start: 4px solid var(--accent);
}

.card-amber {
  border-inline-start: 4px solid var(--amber);
}

.card-hoverable {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.card-hoverable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Metric number style */
.metric-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.metric-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 400;
  margin-top: 4px;
}

.metric-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Buttons */
.ios-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  min-height: 44px;
  border-radius: 999px; /* Pill shape for primary actions */
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  line-height: 1.2;
  position: relative;
  overflow: hidden;
}

.ios-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-tint), 0 0 0 1px var(--accent);
}

.ios-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle 70px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.25), transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.ios-btn:hover::before {
  opacity: 1;
}

/* Ensure text and icons stay above the glow */
.ios-btn > * {
  position: relative;
  z-index: 2;
}

.ios-btn:hover {
  transform: scale(1.02);
}

.ios-btn:active {
  transform: scale(0.96);
}

.ios-btn-primary {
  background-color: var(--accent);
  background-image: none;
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
}

.ios-btn-primary:hover {
  background-image: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1));
  box-shadow: 0 6px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12);
}

.ios-btn-secondary {
  background-color: var(--surface);
  background-image: none;
  color: var(--text-primary);
  border: 1px solid var(--border);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
}

.ios-btn-secondary:hover {
  background-color: var(--surface-hover);
  background-image: none;
  border-color: var(--text-muted);
  box-shadow: 0 4px 8px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);
}

.ios-btn-amber {
  background-color: var(--amber);
  background-image: none;
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
}

.ios-btn-amber:hover {
  background-image: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1));
  box-shadow: 0 6px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12);
}

.ios-btn-danger {
  background-color: var(--red);
  background-image: none;
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
}

.ios-btn-danger:hover {
  background-image: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1));
  box-shadow: 0 6px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12);
}

.ios-btn-success {
  background-color: var(--ios-green);
  background-image: none;
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
}

.ios-btn-success:hover {
  background-image: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1));
  box-shadow: 0 6px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12);
}

/* Empty state block.
   When a card has no rows yet, the action that fills it belongs in the middle
   of the empty box, not up in the card header where the eye is not looking. */
.pf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 34px 18px;
  border: 1.5px dashed var(--border);
  border-radius: 16px;
  background: var(--bg-card);
}
.pf-empty > svg { width: 42px; height: 42px; color: var(--text-muted); opacity: .45; }
.pf-empty p { margin: 0; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.pf-empty small { font-size: 11.5px; color: var(--text-muted); max-width: 46ch; }

/* Blue call-to-action.
   Used for "add something here" buttons on empty cards (upload a document,
   register the first wound, issue a consent form). Those must read as the
   obvious next step, so they get the system blue rather than the brand
   accent, which is already spent on page headings. */
.ios-btn-blue {
  background-color: var(--ios-blue);
  background-image: none;
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
}

.ios-btn-blue:hover {
  background-image: linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.12));
  box-shadow: 0 6px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12);
}

.ios-btn-sm {
  padding: 6px 14px;
  font-size: 13px;
  min-height: auto;
  border-radius: 12px; /* Rounded rectangle for smaller inline buttons */
}

/* Inputs */
.ios-input {
  width: 100%;
  padding: 12px 16px;
  min-height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid var(--input-border, var(--border));
  background: var(--input-bg, var(--surface));
  color: var(--text-primary);
  font-size: 15px;
  outline: none;
  cursor: text;
  caret-color: var(--accent);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

select.ios-input {
  cursor: pointer;
}

.ios-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint), 0 0 0 1px var(--accent);
}

.ios-input::placeholder {
  color: var(--text-muted);
}

/* Sidebar */
.ios-sidebar {
  background: var(--surface);
  border-inline-end: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  /* نوار نسخه‌ی آزمایشی (اگر باشد) خودش sticky است و بالای صفحه می‌ماند؛ سایدبار
     زیر آن می‌چسبد و به همان اندازه کوتاه‌تر می‌شود، وگرنه دکمه‌ی خروج از پایین
     صفحه بیرون می‌زند و صفحه یک اسکرول بی‌خودی به اندازه‌ی نوار پیدا می‌کند.
     مقدار --demo-bar-h را layouts/main.php از ارتفاع واقعی نوار می‌گذارد. */
  position: sticky;
  top: var(--demo-bar-h, 0px);
  height: calc(100vh - var(--demo-bar-h, 0px));
  overflow: hidden;
}

/* فقط بخش منوها اسکرول می‌خورد؛ لوگو و دکمه‌ی خروج ثابت می‌مانند */
.ios-sidebar .nav-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.ios-sidebar .logo-area {
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 8px;
}

.ios-sidebar .logo-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal);
  flex-shrink: 0;
}

.ios-sidebar .logo-text {
  font-weight: 800;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.3;
}

.ios-sidebar .nav-section {
  padding: 8px 12px;
}

.ios-sidebar .nav-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 12px 6px;
}

.ios-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 14px;
  transition: background 0.15s ease, color 0.15s ease;
  text-decoration: none;
}

.ios-nav-item:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.ios-nav-item.active {
  background-color: var(--accent);
  background-image: none;
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
  font-weight: 600;
}

.ios-sub-nav-active {
  background-color: var(--accent);
  background-image: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,0.1) 80%, rgba(0,0,0,0.2) 100%);
  color: #fff !important;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 2px 4px rgba(0,0,0,0.05);
  font-weight: 600;
}

.ios-nav-item .nav-icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.ios-sidebar .nav-footer {
  flex-shrink: 0;
  padding: 8px 12px 16px;
  border-top: 1px solid var(--border-light);
}

/* Header */
.ios-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border-light);
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ios-header-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--text-primary);
}

/* Badges */
.ios-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.badge-active {
  background: var(--green-tint);
  color: var(--green);
}

.badge-inactive {
  background: var(--red-tint);
  color: var(--red);
}

.badge-role {
  background: var(--accent-tint);
  color: var(--accent-strong);
}

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

/* Theme Switch Slider (from old project) */
.theme-slider-container {
  width: 58px;
  height: 28px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 9999px;
  border: 1px solid var(--border);
  position: relative;
  cursor: pointer;
  user-select: none;
  display: inline-block;
}
html[data-theme="dark"] .theme-slider-container {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--border-light);
}
.theme-slider-knob {
  width: 22px;
  height: 22px;
  background: var(--surface);
  border-radius: 50%;
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-primary);
}
html[data-theme="dark"] .theme-slider-knob {
  transform: translateX(30px);
}
html[dir="rtl"][data-theme="dark"] .theme-slider-knob {
  transform: translateX(-30px);
}

/* Language Toggle Pill */
.lang-select {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  transition: all 0.2s ease;
}
.lang-select:hover {
  background: var(--surface-hover);
  border-color: var(--text-muted);
}

/* Custom Select Dropdown */
.custom-select-wrapper {
  position: relative;
  width: 100%;
}
.custom-select-trigger {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}
.custom-select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  max-height: 250px;
  overflow-y: auto;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  transform: translateY(-5px);
}
.custom-select-dropdown.dropup {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 6px;
  transform: translateY(5px);
}
.custom-select-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.custom-select-dropdown.dropup.show {
  transform: translateY(0);
}
.custom-select-option {
  padding: 10px 16px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.custom-select-option:hover {
  background: var(--bg-soft);
}
.custom-select-option.selected {
  background: var(--accent-tint);
  color: var(--accent-strong);
  font-weight: 700;
}

/* Icons */
.icon-minimal {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Table styles for reuse */
.table-container {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.table-container table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table-container th {
  padding: 14px 16px;
  text-align: start;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 13px;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface);
}

.table-container td {
  padding: 14px 16px;
  border-top: 1px solid var(--border-light);
  color: var(--text-primary);
}

.table-container tr:hover td {
  background: var(--surface-hover);
}

/* Flash messages */
.flash-success {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--green-tint);
  color: var(--green);
  font-size: 14px;
  font-weight: 500;
}

.flash-error {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--red-tint);
  color: var(--red);
  font-size: 14px;
  font-weight: 500;
}

.flash-warning {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--amber-tint);
  color: var(--amber);
  font-size: 14px;
  font-weight: 500;
}

.flash-info {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
}

/* Empty state */
.empty-state {
  padding: 40px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* Divider */
.divider {
  height: 1px;
  background: var(--border-light);
  margin: 24px 0;
}

.divider-subtle {
  height: 1px;
  background: var(--border-light);
  margin: 8px 0;
}

/* 
  Persian decorative border motif — subtle repeating pattern
  برای کارت‌های خاص مثل لاگین
*/
.decorative-border {
  position: relative;
  overflow: hidden;
}

.decorative-border::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--amber), var(--accent));
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Hide number input spinners */
.no-spinners::-webkit-inner-spin-button, 
.no-spinners::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
.no-spinners {
  -moz-appearance: textfield;
}

.ios-btn-back{position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;padding:12px 22px;padding-inline-start:52px;border-radius:var(--radius-md);background:var(--surface);color:#b91c1c;font-weight:600;font-size:14px;line-height:1;text-decoration:none;border:1px solid var(--border-light);box-shadow:var(--shadow-sm);cursor:pointer;}
.ios-btn-back-label{display:inline-block;text-align:center;transition:opacity .5s ease;white-space:nowrap;}
.ios-btn-back:hover .ios-btn-back-label{opacity:0;}
.ios-btn-back-panel{position:absolute;top:0;bottom:0;inset-inline-start:0;z-index:10;display:grid;place-items:center;width:44px;background:#dc2626;color:#fff;transition:width .5s cubic-bezier(0.4, 0, 0.2, 1);}
.ios-btn-back:hover .ios-btn-back-panel{width:100%;}
.ios-btn-back-panel svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;opacity:1;}

/* ===========================================================
   Global UI Polish
   =========================================================== */

/* Hover-lift for cards */
.ios-card { transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease; }
.ios-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* Table hover & tabular nums */
table { font-variant-numeric: tabular-nums; border-collapse: separate; border-spacing: 0; }
.metric-value { font-variant-numeric: tabular-nums; }
tbody tr { transition: background 0.15s ease; }
tbody tr:hover td { background-color: var(--surface-hover); }

/* Soft focus ring */
.ios-input:focus-visible, .ios-btn:focus-visible, select:focus-visible, button:focus-visible { 
  outline: 2px solid var(--accent); outline-offset: 2px; 
}

/* Subtle header texture */
.ios-header { 
  background-image: radial-gradient(circle at top right, rgba(79, 70, 229, 0.05), transparent 60%); 
}
[data-theme="dark"] .ios-header {
  background-image: radial-gradient(circle at top right, rgba(129, 140, 248, 0.08), transparent 60%); 
}

/* Skeleton Loading */
@keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } }
.skeleton { 
  animation: shimmer 2.5s infinite linear; 
  background: linear-gradient(to right, var(--surface) 4%, var(--surface-hover) 25%, var(--surface) 36%); 
  background-size: 1000px 100%; 
  border-radius: var(--radius-sm);
}

/* Flash Slide */
@keyframes slideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes shrink-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.flash-success, .flash-error, .flash-warning, .flash-info { animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* Thin Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Empty state friendly UI */
.empty-state { text-align: center; padding: 48px 24px; animation: slideDown 0.5s ease both; }
.empty-state-icon { width: 64px; height: 64px; color: var(--text-muted); margin: 0 auto 16px; opacity: 0.5; }
.empty-state-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.empty-state-desc { font-size: 13px; color: var(--text-secondary); }

/* Sticky Table Header */
table th { position: sticky; top: 0; z-index: 10; background: var(--surface); box-shadow: 0 1px 0 var(--border-light); border-bottom: none !important; }

/* ===========================================================
   مرکز پیامک — کنترل گروه هدف، الگوهای آماده و پیش‌نمایش پیام
   =========================================================== */

.sms-seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-hover);
  border: 1px solid var(--border-light);
  border-radius: 999px;
}
.sms-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-secondary);
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.sms-seg-btn:hover { color: var(--text-primary); }
.sms-seg-btn.is-active {
  background: var(--surface);
  color: var(--accent-strong);
  box-shadow: var(--shadow-sm);
}
.sms-seg-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.sms-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-hover);
  border: 1px solid var(--border-light);
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.sms-chip:hover {
  color: var(--accent-strong);
  background: var(--accent-tint);
  border-color: var(--accent);
}

.sms-meter {
  height: 4px;
  border-radius: 999px;
  background: var(--border-light);
  overflow: hidden;
}
.sms-meter > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.2s ease, background 0.2s ease;
}
.sms-meter.is-over > span { background: var(--amber); }

.sms-preview {
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--surface-hover);
  border: 1px dashed var(--border);
}
.sms-preview-bubble {
  padding: 10px 13px;
  border-radius: 14px;
  border-start-start-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  font-size: 13px;
  line-height: 1.9;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}
.sms-preview-bubble.is-empty { color: var(--text-muted); }

.sms-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.sms-toolbar .ios-input { height: 38px; padding-block: 0; font-size: 13px; }

/* ===========================================================
   منوی گوشی
   -----------------------------------------------------------
   تا پیش از این، سایدبار زیر ۷۶۸ پیکسل فقط `hidden` می‌شد و هیچ
   جایگزینی نداشت: روی گوشی هیچ راهی برای رفتن به صفحه‌ی دیگر نبود و
   کاربر مجبور بود در مرورگر «نسخه‌ی دسکتاپ» را بزند. حالا همان سایدبار
   از کنار می‌آید بیرون.

   ⚠️ جهت‌دار است: در فارسی سایدبار سمت راست می‌نشیند و باید به راست
   جمع شود، در انگلیسی به چپ. به‌جای left/right از منطق dir استفاده شده.
   =========================================================== */

/* نوار نسخه‌ی آزمایشی — چسبندگی‌اش اینجاست، نه در استایل خطی، تا مدیای
   گوشی بتواند برش دارد (آنجا هدر پنل باید بچسبد و جای top:0 یکی است). */
.demo-ribbon { position: sticky; top: 0; z-index: 50; }

.ios-nav-toggle,
.ios-nav-overlay { display: none; }

@media (max-width: 767px) {
  .ios-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: var(--radius-sm, 12px);
    color: var(--text-primary);
    background: var(--surface-hover);
  }

  .ios-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 70;
    height: 100dvh;
    box-shadow: var(--shadow-lg);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  [dir="rtl"] .ios-sidebar { transform: translateX(100%); }
  [dir="ltr"] .ios-sidebar { transform: translateX(-100%); }
  .ios-sidebar.is-open     { transform: translateX(0); }

  .ios-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, 0.45);
  }

  /* هدر روی گوشی تنگ است؛ بدون این، دکمه‌ی منو و نام کاربر روی هم می‌افتند */
  .ios-header {
    padding: 0 14px;
    gap: 10px;

    /* دکمه‌ی منو تنها راه رفتن به صفحه‌ی دیگر است؛ اگر با اسکرول برود، کاربر
       باید تا بالای صفحه برگردد. پس هدر می‌چسبد. */
    position: sticky;
    top: 0;
    z-index: 40;
  }

  .ios-header-title { font-size: 14px; }

  /* نوار نسخه‌ی آزمایشی جایش را به هدر می‌دهد و با صفحه بالا می‌رود؛ روی
     گوشی دو نوار چسبیده روی هم می‌افتند و نیمی از صفحه را می‌خورند. */
  .demo-ribbon { position: static; }

  /* ردیف عنوان صفحه‌ها (عنوان + دکمه‌های کنارش) روی گوشی در یک خط جا
     نمی‌شود؛ بدون شکستن به چند خط، دکمه‌ها از پهلوی صفحه بیرون می‌زدند و کل
     صفحه با منوی همبرگری به یک طرف کج می‌شد. */
  main .flex.justify-between,
  main .flex.justify-between > .flex { flex-wrap: wrap; }
  main .flex.justify-between > .flex { row-gap: 8px; }

  /* تور ایمنی: هیچ عنصری نباید صفحه را از پهلو پهن‌تر از گوشی کند.
     clip (نه hidden) تا هدر چسبنده و اسکرول جدول‌ها از کار نیفتد. */
  main { overflow-x: clip; }

  /* جدول‌های پهن داخل .table-container با overflow:hidden بریده می‌شدند */
  .table-container { overflow-x: auto; }
}

/* ===========================================================
   مسیر ناوبری (breadcrumb) — public/assets/js/nav-trail.js
   =========================================================== */
.crumbs{flex:1;min-width:0;display:flex;justify-content:center;padding:0 16px;}
.crumbs[hidden]{display:none;}
@media (max-width:767px){.crumbs{display:none;}}
.crumb-list{display:inline-flex;flex-wrap:nowrap;max-width:100%;overflow:hidden;align-items:center;gap:6px;margin:0;padding:8px 12px;list-style:none;border:1px solid var(--border-light);border-radius:12px;background:var(--surface);box-shadow:var(--shadow-sm);font-size:13px;color:var(--text-muted);}
.crumb-item{display:inline-flex;align-items:center;gap:6px;}
.crumb-link{color:inherit;text-decoration:none;transition:color .15s ease;display:inline-flex;align-items:center;}
.crumb-link:hover{color:var(--text-primary);}
.crumb-home svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.crumb-page{color:var(--text-primary);font-weight:600;}
.crumb-item .crumb-link,.crumb-page{white-space:nowrap;}
.crumb-sep{display:inline-flex;align-items:center;}
.crumb-sep svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.6;}
[dir="rtl"] .crumb-sep svg{transform:scaleX(-1);}
.crumb-more{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:0;border-radius:6px;background:transparent;color:inherit;cursor:pointer;}
.crumb-more:hover{background:var(--bg-soft);color:var(--text-primary);}
.crumb-more svg{width:16px;height:16px;fill:currentColor;}

/* ===== صفحه‌ی تنظیمات: کارت‌های جمع‌شونده =====
   صفحه تمام‌عرض است؛ گزینه‌ها با گرید خودکار (هر ستون حدود ۳۶۰ پیکسل) چیده می‌شوند تا روی
   مانیتور بزرگ از این سر تا آن سر کشیده نشوند. بدنه‌ی کارتِ باز، رنگ زمینه‌ی صفحه را می‌گیرد
   تا مرزش با سرتیتر و با کارت‌های بعدی روشن باشد. */
.set-page { width: 100%; }
.set-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.set-card.is-open {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint), var(--shadow-md);
}
.set-card-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: none;
  border: 0;
  text-align: start;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.set-card-head:hover { background: var(--surface-hover); }
.set-card-head.cursor-default:hover { background: none; }
/* کارتی که همیشه باز است (قالب‌ها): بدنه‌ی رنگی دارد ولی حاشیه‌ی تأکیدیِ «باز شده» نمی‌گیرد */
.set-card-static .set-card-body { padding-top: 16px; }
.set-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.set-card-summary {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 0;
}
.set-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border);
  margin: 0 8px;
}
.set-card-chevron {
  width: 28px;
  height: 28px;
  padding: 4px;
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--text-secondary);
  background: var(--surface-hover);
  transition: transform 0.2s ease, background 0.15s ease, color 0.15s ease;
}
.set-card.is-open .set-card-chevron { transform: rotate(180deg); background: var(--accent-tint); color: var(--accent); }
.set-card-body {
  padding: 20px;
  background: var(--bg);
  border-top: 1px solid var(--border-light);
}
.set-field + .set-field {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
}
.set-field-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.set-field-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
/* گزینه‌ها کنار هم با عرض ثابت، نه هر یکی یک ردیفِ تمام‌عرض */
.set-grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 12px; }
/* یک گزینه: کادرش وقتی انتخاب شده رنگ تأکیدی می‌گیرد (رنگ از inline style می‌آید) */
.set-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.set-option:hover { background: var(--surface-hover); }
.set-option input[type="radio"],
.set-option input[type="checkbox"] { flex-shrink: 0; }
.set-link { justify-content: space-between; text-decoration: none; }
/* نوار ذخیره که با اسکرول پایین صفحه می‌ماند */
.set-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  margin-top: 8px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.06);
}