/* ==========================================================================
   حالت تاریک + کلید تغییر ظاهر (theme.css)
   - فقط «اضافه» می‌کند؛ هیچ قاعده‌ای از style.css عوض نشده است. اگر theme.css لود نشود، سایت دقیقاً مثل قبل است.
   - انتخاب ظاهر با data-theme روی <html> (توسط theme.js) انجام می‌شود: light | dark
   ========================================================================== */

/* رنگ نمودارها (مانیتورینگ)؛ مقدار روشن = همان رنگ‌های قبلی */
:root {
  --chart-teal: #2C4A45;
  --chart-sepia: #8B6F47;
  --chart-danger: #A8432E;
  --chart-success: #3D6B4F;
  --chart-amber: #C08A1E;
}
:root[data-theme="light"] { color-scheme: light; }

/* ---------- هدر: جا برای کلید تغییر ظاهر ----------
   با آمدن کلید (و لینک‌های بیشتر مثل «مانیتورینگ») نوار ۹۲۰ پیکسلی دو خطه می‌شد؛ فاصله‌ها را کمی فشرده می‌کنیم. */
.app-header { gap: 8px; }
.app-header .theme-switch { margin-inline: 0; }
.header-nav { gap: 2px; }
.header-nav a { padding: 7px 9px; gap: 5px; }

/* ---------- منوی هدر: یک رنگ برای همه‌ی لینک‌ها و فونت پررنگ ----------
   «پنل مدیریت» و «مانیتورینگ» (کلاس admin-link) طلایی بودند و بقیه خاکستری؛ حالا همه یکسان‌اند.
   لینکِ صفحه‌ی فعلی با پس‌زمینه و رنگِ پررنگ‌تر (--ink) مشخص می‌ماند. */
.header-nav a,
.header-nav a.admin-link { color: var(--ink-soft); font-weight: 700; }
.header-nav a:hover,
.header-nav a.admin-link:hover { background: var(--paper-raised); color: var(--ink); }
.header-nav a.nav-active,
.header-nav a.admin-link.nav-active { background: var(--paper-raised); color: var(--ink); font-weight: 700; }

/* ---------- کلید تغییر ظاهر ---------- */
.theme-switch { position: relative; flex-shrink: 0; margin-inline: 8px; }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; cursor: pointer;
  background: var(--paper-raised, #F3EEE3); color: var(--ink, #1C1A17);
  border: 1px solid var(--line, #D8CFC0); border-radius: 50%;
  transition: border-color .15s, background-color .15s;
}
.theme-toggle:hover { border-color: var(--sepia, #8B6F47); }
.theme-toggle:focus-visible, .theme-menu button:focus-visible { outline: 2px solid var(--sepia, #8B6F47); outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .ico-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ico-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ico-moon { display: block; }
.theme-menu {
  display: none; position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 300; min-width: 170px;
  background: var(--surface, #fff); border: 1px solid var(--line, #D8CFC0); border-radius: 10px;
  box-shadow: 0 6px 20px rgba(28,26,23,.14); padding: 4px; margin: 0;
}
.theme-switch.open .theme-menu { display: block; }
.theme-menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 8px 12px; font: inherit; font-size: 13px; text-align: start; cursor: pointer;
  color: var(--ink, #1C1A17); background: transparent; border: none; border-radius: 7px;
}
.theme-menu button:hover { background: var(--paper-raised, #F3EEE3); }
.theme-menu button[aria-checked="true"] { font-weight: 600; }
.theme-menu button .tick { visibility: hidden; color: var(--sepia-deep, #6B5537); }
.theme-menu button[aria-checked="true"] .tick { visibility: visible; }
.theme-switch-floating { position: fixed; top: 14px; inset-inline-start: 14px; z-index: 400; margin: 0; }
.theme-switch-floating .theme-menu { inset-inline-end: auto; inset-inline-start: 0; }

/* ==========================================================================
   پالت تاریک
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --ink: #ECE6DA;
  --ink-soft: #B8B0A2;
  --ink-faint: #958D81;
  --paper: #15130F;
  --paper-raised: #1F1C17;
  --surface: #26221C;            /* جایگزین #fff کارت‌ها و پنل‌ها */
  --surface-soft: #1B1814;       /* فیلدهای ورودی و ردیف hover */
  --sepia: #C9A66B;
  --sepia-deep: #DDBF8C;
  --sepia-pale: #2D2618;
  --teal: #2F5A52;
  --line: #3D382F;
  --line-soft: #2C2821;
  --danger: #EC8D78;
  --success: #86C79F;
  --success-pale: #1E2C23;
  --danger-pale: #3A211B;
  --warn-pale: #33291A;
  --warn-text: #E3B453;

  /* نسخه‌ی «پرشده و تیره» برای زمینه‌ی دکمه‌ها/نشان‌هایی که متن سفید دارند */
  --sepia-solid: #8B6F47;
  --danger-solid: #A8432E;
  --success-solid: #3D6B4F;

  --chart-teal: #6FB8AA;
  --chart-sepia: #D2AE73;
  --chart-danger: #EC8D78;
  --chart-success: #86C79F;
  --chart-amber: #E3B453;
}

/* ---------- سطح‌ها (همه‌ی #fff های style.css) ---------- */
:root[data-theme="dark"] .auth-card,
:root[data-theme="dark"] .chat-box,
:root[data-theme="dark"] .admin-container,
:root[data-theme="dark"] .upload-card,
:root[data-theme="dark"] .app-header,
:root[data-theme="dark"] .user-menu-dropdown,
:root[data-theme="dark"] .chat-sidebar,
:root[data-theme="dark"] .entry-modal-box,
:root[data-theme="dark"] .kpi-tile,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .count-pill,
:root[data-theme="dark"] .review-row,
:root[data-theme="dark"] .btn-mini,
:root[data-theme="dark"] .btn-ghost,
:root[data-theme="dark"] .toolbar-check,
:root[data-theme="dark"] .users-sidebar,
:root[data-theme="dark"] .upload-card .instructions code,
:root[data-theme="dark"] .schema-line code { background: var(--surface); }

/* ---------- فیلدهای ورودی ---------- */
/* پایه برای همه‌ی فیلدها (با ویژگی صفر: هر قاعده‌ی صریحِ سایت که پس‌زمینه بدهد، برنده است) */
:where(:root[data-theme="dark"]) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="file"]), textarea, select) {
  background-color: var(--surface-soft);
  color: var(--ink);
}
:root[data-theme="dark"] .auth-card input[type="text"],
:root[data-theme="dark"] .auth-card input[type="password"],
:root[data-theme="dark"] .filters-row input,
:root[data-theme="dark"] .toolbar-select,
:root[data-theme="dark"] .ask-mode-select,
:root[data-theme="dark"] .mon-select,
:root[data-theme="dark"] .editor-field input[type="text"],
:root[data-theme="dark"] .editor-field textarea,
:root[data-theme="dark"] .prompt-editor-textarea { background: var(--surface-soft); color: var(--ink); }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--ink-faint); opacity: 1; }
:root[data-theme="dark"] .data-table tr:hover td { background: var(--surface-soft); }

/* ---------- پیام‌ها و نشان‌های رنگی ---------- */
:root[data-theme="dark"] .msg-box.error,
:root[data-theme="dark"] .btn-mini-no:hover:not(:disabled),
:root[data-theme="dark"] .badge-pending,
:root[data-theme="dark"] .ua-conv-deleted-badge,
:root[data-theme="dark"] .admin-title-badge.mon-stale,
:root[data-theme="dark"] .mon-badge.bad { background: var(--danger-pale); }
:root[data-theme="dark"] .msg-box.success,
:root[data-theme="dark"] .badge-approved,
:root[data-theme="dark"] .prompt-history-item.active-version,
:root[data-theme="dark"] .mon-badge.ok { background: var(--success-pale); }
:root[data-theme="dark"] .kpi-tile.kpi-alert { background: #33201B; }
:root[data-theme="dark"] .mon-badge.warn { background: var(--warn-pale); color: var(--warn-text); }
:root[data-theme="dark"] .verdict-summary.lvl-warn { color: var(--warn-text); }

/* ---------- دکمه‌ها و نشان‌هایی که متن سفید روی رنگِ «پرشده» دارند ---------- */
:root[data-theme="dark"] .btn-approve,
:root[data-theme="dark"] .btn-mini-yes,
:root[data-theme="dark"] .prompt-history-badge,
:root[data-theme="dark"] .count-pill.lvl-pill-ok { background: var(--success-solid); border-color: var(--success-solid); color: #fff; }
:root[data-theme="dark"] .count-pill.hot,
:root[data-theme="dark"] .count-pill.lvl-pill-bad { background: var(--danger-solid); border-color: var(--danger-solid); color: #fff; }
:root[data-theme="dark"] .user-menu-btn .user-avatar { background: var(--sepia-solid); color: #fff; }
:root[data-theme="dark"] .mon-tip { background: var(--paper-raised); color: var(--ink); border: 1px solid var(--line); }
:root[data-theme="dark"] .mon-bar i { background: var(--chart-teal); }

/* ---------- پس‌زمینه‌ی مودال‌ها ---------- */
:root[data-theme="dark"] .entry-modal-overlay,
:root[data-theme="dark"] .ua-modal-overlay { background: rgba(0, 0, 0, 0.66); }

/* ---------- اسناد (documents.php): قاعده‌های داخل خودِ صفحه ---------- */
:root[data-theme="dark"] .docs-search-row input,
:root[data-theme="dark"] .sort-control select { background: var(--surface-soft); color: var(--ink); }
:root[data-theme="dark"] .pagination-bar button,
:root[data-theme="dark"] .doc-card,
:root[data-theme="dark"] .entry-card,
:root[data-theme="dark"] .detail-panel,
:root[data-theme="dark"] .btn-delete-here { background: var(--surface); }
:root[data-theme="dark"] .btn-edit-here { background: var(--sepia-solid); color: #fff; }
:root[data-theme="dark"] .btn-delete-here:hover { background: var(--danger-solid); color: #fff; }
:root[data-theme="dark"] .doc-card:hover,
:root[data-theme="dark"] .entry-card:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }

/* ---------- لیست انتخابی ثبت‌نام و دکمه‌ی «صفحه‌ی فعال» ---------- */
:root[data-theme="dark"] .auth-card select { background: var(--surface-soft); color: var(--ink); }
:root[data-theme="dark"] .pagination-bar button.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ==========================================================================
   چشم گذرواژه (کنار هر فیلد رمز در همه‌ی صفحه‌ها؛ با theme.js ساخته می‌شود)
   ========================================================================== */
.pw-wrap { position: relative; display: block; }
.pw-eye {
  position: absolute; left: 0; transform: translateY(-50%);
  width: var(--pw-size, 32px); height: var(--pw-size, 32px); padding: 0; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 6px; cursor: pointer;
  color: var(--ink-soft, #5C564C);
}
.pw-eye:hover { color: var(--ink, #1C1A17); background: var(--paper-raised, #F3EEE3); }
.pw-eye:focus-visible { outline: 2px solid var(--sepia, #8B6F47); outline-offset: 1px; }
.pw-eye svg { width: calc(var(--pw-size, 32px) * 0.56); height: calc(var(--pw-size, 32px) * 0.56); display: block; }
.pw-eye .pw-ico-hide { display: none; }
.pw-eye[aria-pressed="true"] .pw-ico-show { display: none; }
.pw-eye[aria-pressed="true"] .pw-ico-hide { display: block; }

/* پیام‌هایی که با ویژگی hidden پنهان می‌شوند (مثلاً «گذرواژه‌ها یکسان نیستند» در ثبت‌نام)، حتی اگر CSS سایت display بدهد */
.msg-box[hidden] { display: none; }