/*
  اجزای مشترک رابط کاربری سامانه‌ی تیکتینگ گروه مهندسی اسپاد (روی Bootstrap 5.3 RTL).

  رنگ‌های برند و فونت فقط در spad-theme.css تعریف می‌شوند و اینجا از توکن‌ها خوانده می‌شوند.
  از ویژگی‌های منطقی (inline-start/end) استفاده شده تا چیدمان راست‌چین سالم بماند.
*/

/* ---------- پایه ---------- */
.spad-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.85;
  font-size: 0.9375rem;
}

.spad-container {
  width: 100%;
  max-width: var(--spad-content-max);
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 768px) {
  .spad-container {
    padding-inline: 1.5rem;
  }
}

.spad-skip-link {
  position: absolute;
  inset-inline-start: 0.75rem;
  top: -4rem;
  z-index: 1100;
  padding: 0.5rem 1rem;
  background: var(--spad-surface);
  color: var(--spad-ink);
  border: 2px solid var(--spad-green);
  border-radius: var(--spad-radius);
}
.spad-skip-link:focus {
  top: 0.75rem;
}

/* ---------- هدر ---------- */
.spad-header {
  background: var(--spad-surface);
  box-shadow: var(--spad-shadow);
}
/* نوار رنگی بالای صفحه مطابق سربرگ سازمان: سرمه‌ای در گوشه، سبز در بقیه */
.spad-stripe {
  height: 0.375rem;
  background: linear-gradient(to right, var(--spad-navy) 0 14%, var(--spad-green) 14% 100%);
}
.spad-topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 0.625rem;
  flex-wrap: wrap;
}
.spad-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--spad-ink);
  text-decoration: none;
  margin-inline-end: auto;
}
.spad-brand:hover {
  color: var(--spad-ink);
}
.spad-brand__logo {
  height: 2.5rem;
  width: auto;
  flex: 0 0 auto;
}
.spad-brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.spad-brand__org {
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--spad-navy);
}
.spad-brand__system {
  font-size: 0.8125rem;
  color: var(--spad-muted);
}
.spad-header__side {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--spad-muted);
}
.spad-user {
  font-weight: 600;
  color: var(--spad-ink);
}

/* ---------- ناوبری گروه‌بندی‌شده ---------- */
.spad-navbar {
  background: var(--spad-navy);
  padding-block: 0;
}
.spad-navbar .navbar-toggler {
  margin-block: 0.4rem;
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  font-size: 0.875rem;
  padding: 0.25rem 0.75rem;
}
.spad-navbar .nav-link {
  color: #e8ebf7;
  padding: 0.7rem 1rem;
  border-bottom: 3px solid transparent;
}
.spad-navbar .nav-link:hover,
.spad-navbar .nav-link:focus,
.spad-navbar .nav-link.show {
  color: #fff;
  background: var(--spad-navy-700);
}
.spad-navbar .nav-link.active {
  color: #fff;
  font-weight: 600;
  border-bottom-color: var(--spad-green);
}
.spad-navbar .dropdown-menu {
  min-width: 13rem;
  border: 0;
  border-radius: 0 0 var(--spad-radius) var(--spad-radius);
  box-shadow: var(--spad-shadow);
  padding-block: 0.25rem;
}
.spad-navbar .dropdown-item {
  padding: 0.5rem 1rem;
}
.spad-navbar .dropdown-item.active,
.spad-navbar .dropdown-item:active {
  background: var(--spad-green-50);
  color: var(--spad-green-700);
  font-weight: 600;
}
@media (max-width: 991.98px) {
  .spad-navbar .dropdown-menu {
    border-radius: 0;
    background: var(--spad-navy-700);
    box-shadow: none;
  }
  .spad-navbar .dropdown-item {
    color: #e8ebf7;
  }
  .spad-navbar .dropdown-item:hover,
  .spad-navbar .dropdown-item:focus {
    background: var(--spad-navy-900);
    color: #fff;
  }
  .spad-navbar .dropdown-item.active {
    background: var(--spad-navy-900);
    color: #fff;
    border-inline-start: 3px solid var(--spad-green);
  }
}

/* ---------- محتوا ---------- */
.spad-main {
  flex: 1 0 auto;
  padding-block: 1.75rem 2.5rem;
}
.spad-main:focus {
  outline: none;
}
.spad-main h1.h4 {
  color: var(--spad-navy);
  font-weight: 700;
}
.spad-main h2.h6 {
  color: var(--spad-navy);
  font-weight: 700;
  font-size: 1rem;
  padding-bottom: 0.35rem;
  margin-bottom: 0.75rem;
  border-bottom: 2px solid var(--spad-green-50);
}
.spad-messages {
  margin-bottom: 1rem;
}

/* ---------- دکمه‌ها ---------- */
.btn-primary {
  --bs-btn-bg: var(--spad-green-600);
  --bs-btn-border-color: var(--spad-green-600);
  --bs-btn-hover-bg: var(--spad-green-700);
  --bs-btn-hover-border-color: var(--spad-green-700);
  --bs-btn-active-bg: var(--spad-green-700);
  --bs-btn-active-border-color: var(--spad-green-700);
  --bs-btn-disabled-bg: var(--spad-green-600);
  --bs-btn-disabled-border-color: var(--spad-green-600);
}
.btn-outline-primary {
  --bs-btn-color: var(--spad-green-600);
  --bs-btn-border-color: var(--spad-green-600);
  --bs-btn-hover-bg: var(--spad-green-600);
  --bs-btn-hover-border-color: var(--spad-green-600);
  --bs-btn-active-bg: var(--spad-green-700);
  --bs-btn-active-border-color: var(--spad-green-700);
  --bs-btn-disabled-color: var(--spad-green-600);
  --bs-btn-disabled-border-color: var(--spad-green-600);
}
.btn-outline-success {
  --bs-btn-color: var(--spad-green-600);
  --bs-btn-border-color: var(--spad-green-600);
  --bs-btn-hover-bg: var(--spad-green-600);
  --bs-btn-hover-border-color: var(--spad-green-600);
  --bs-btn-active-bg: var(--spad-green-700);
  --bs-btn-active-border-color: var(--spad-green-700);
}
/* دکمه‌ی «خروج» روی زمینه‌ی روشن هدر */
.spad-header .btn-outline-light {
  --bs-btn-color: var(--spad-navy);
  --bs-btn-border-color: var(--spad-navy);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--spad-navy);
  --bs-btn-hover-border-color: var(--spad-navy);
  --bs-btn-active-bg: var(--spad-navy-700);
  --bs-btn-active-border-color: var(--spad-navy-700);
}

/* ---------- فرم‌ها و فیلترها ---------- */
.form-label {
  font-weight: 600;
  color: var(--spad-ink);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--spad-green);
  box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}
.form-check-input:checked {
  background-color: var(--spad-green-600);
  border-color: var(--spad-green-600);
}
/* فرم‌های فیلتر (GET) داخل کارت قرار می‌گیرند */
.spad-main form.row.g-2.align-items-end {
  background: var(--spad-surface);
  border: 1px solid var(--spad-rule);
  border-radius: var(--spad-radius);
  box-shadow: var(--spad-shadow);
  margin-inline: 0;
  padding: 0.75rem 0.5rem 1rem;
}
/* فیلد دارای خطا (پیام خطا بلافاصله پس از فیلد می‌آید) */
.mb-3:has(> .text-danger) > .form-control,
.mb-3:has(> .text-danger) > .form-select {
  border-color: var(--bs-danger);
}

/* ---------- جدول‌ها ---------- */
.table-responsive {
  background: var(--spad-surface);
  border: 1px solid var(--spad-rule);
  border-radius: var(--spad-radius);
  box-shadow: var(--spad-shadow);
}
.table-responsive > .table {
  margin-bottom: 0;
}
.spad-main .table > thead > tr > th {
  background: var(--spad-navy-50);
  color: var(--spad-navy);
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 2px solid var(--spad-rule);
}
.spad-main .table > :not(caption) > * > * {
  padding: 0.6rem 0.75rem;
}
.table-hover > tbody > tr:hover > * {
  --bs-table-hover-bg: var(--spad-green-50);
}

/* ---------- پیام‌ها و صفحه‌بندی ---------- */
.alert {
  border-radius: var(--spad-radius);
}
.pagination {
  --bs-pagination-active-bg: var(--spad-navy);
  --bs-pagination-active-border-color: var(--spad-navy);
  --bs-pagination-color: var(--spad-navy);
  --bs-pagination-hover-color: var(--spad-navy-900);
  --bs-pagination-focus-color: var(--spad-navy-900);
}

/* ---------- فوتر ---------- */
.spad-footer {
  padding-block: 1rem;
  font-size: 0.8125rem;
  color: var(--spad-muted);
  border-top: 1px solid var(--spad-rule);
  background: var(--spad-surface);
}

/* ---------- دسترس‌پذیری ---------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--spad-green);
  outline-offset: 2px;
}

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

/* اعداد و مبالغ در جدول‌ها خوانا و هم‌عرض باشند */
.spad-num {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

/* آیکن دکمه‌ی منو در موبایل (سفید روی زمینه‌ی سرمه‌ای) */
.spad-navbar {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- یکپارچگی فونت فارسی و لاتین ----------
  Bootstrap برای code/kbd/pre/samp فونت monospace می‌گذارد و فرم‌ها/جدول‌ها در برخی مرورگرها فونت خودشان را
  دارند؛ پس همه صریحاً از فونت سامانه (فارسی و لاتین یکسان) می‌گیرند. */
body,
button,
input,
select,
textarea,
optgroup,
table,
summary,
code,
kbd,
pre,
samp,
.font-monospace {
  font-family: var(--spad-font);
}
code {
  font-size: 0.9em;
  color: var(--spad-navy);
  direction: ltr;
  unicode-bidi: isolate;
}
/* متن لاتین، نام کاربری، ایمیل و IP: چپ‌به‌راست و جدا از متن فارسی، با همان فونت */
.spad-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

/* ---------- جزئیات سوابق فعالیت ---------- */
.spad-audit-details {
  min-width: 18rem;
}
.spad-audit-details > summary {
  cursor: pointer;
  color: var(--spad-navy);
  font-weight: 600;
}
.spad-audit-section {
  margin-top: 0.5rem;
}
.spad-audit-section__title {
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--spad-navy);
  margin-bottom: 0.25rem;
}
.spad-main .table.spad-audit-table {
  font-size: 0.8125rem;
  margin-bottom: 0.5rem;
  background: var(--spad-surface);
}
.spad-audit-table tbody th[scope="row"] {
  width: 10rem;
  font-weight: 600;
  color: var(--spad-muted);
  background: var(--spad-navy-50);
}
.spad-audit-list {
  margin: 0;
  padding-inline-start: 1.1rem;
}
.spad-audit-nested {
  margin: 0;
}
.spad-audit-nested dt {
  font-weight: 600;
  color: var(--spad-muted);
}
.spad-audit-nested dd {
  margin-inline-start: 0.75rem;
  margin-bottom: 0.25rem;
}

/* ترتیب نمایش: دستگیره و حالت کشیدن */
.spad-handle-col { width: 2rem; }
.spad-drag-handle { cursor: grab; user-select: none; text-align: center; }
.spad-draggable.spad-dragging { opacity: .5; }
.spad-back .btn { min-width: 6rem; }