html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* ─────────────────────────────────────────────────────────────────────────
 * نظام تصميم DocumentAlert — تصميم متكامل لكل شاشات التطبيق
 * مبني على design-systems/claude من https://github.com/nexu-io/open-design
 * (لوحة "parchment/ivory" دافئة مع لون مميز terracotta).
 * ملاحظة: Bootstrap 5.1 المستخدم هنا لا يدعم متغيرات --bs-* الشاملة (5.2+)،
 * لذا الـ tokens مطبَّقة هنا كمتغيرات خاصة بالمشروع + قواعد مباشرة على classes.
 * ألوان الحالة الدلالية (نجاح/تحذير/خطر/غير محدد) مُعاد تلوينها بنفس ألوان
 * نظام التصميم نفسه (وليست ألوان Bootstrap الخام)، مع الحفاظ الكامل على
 * المعنى الوظيفي (أخضر=ساري، أصفر=قريب الانتهاء، أحمر=منتهي، رمادي=غير محدد).
 * ─────────────────────────────────────────────────────────────────── */

:root {
  --da-bg: #f5f4ed;
  --da-surface: #faf9f5;
  --da-surface-warm: #e8e6dc;
  --da-fg: #141413;
  --da-fg-2: #3d3d3a;
  --da-muted: #5e5d59;
  --da-meta: #87867f;
  --da-border: #e5e3da;
  --da-border-soft: #e8e6dc;
  --da-accent: #c96442;
  --da-accent-hover: #b5573a;
  --da-accent-active: #a14c33;
  --da-accent-on: #faf9f5;

  /* ألوان دلالية (نفس عائلة نظام التصميم) */
  --da-success: #17a34a;
  --da-success-hover: #148a3e;
  --da-warn: #d99a06;
  --da-warn-hover: #b98105;
  --da-danger: #b53333;
  --da-danger-hover: #9c2b2b;
  --da-secondary: #87867f;
  --da-secondary-hover: #706f69;

  --da-radius-sm: 8px;
  --da-radius-md: 12px;
  --da-radius-lg: 16px;

  --da-font-display: Georgia, "Times New Roman", serif;
  --da-font-body: "Segoe UI", Tahoma, Arial, sans-serif;

  --da-shadow-ring: 0 0 0 1px var(--da-border);
  --da-shadow-raised: rgba(0, 0, 0, 0.06) 0px 4px 20px;
}

body {
  background-color: var(--da-bg);
  color: var(--da-fg);
  font-family: var(--da-font-body);
}

h1, h2, h3, .navbar-brand {
  font-family: var(--da-font-display);
  color: var(--da-fg);
}

a {
  color: var(--da-accent);
}
a:hover {
  color: var(--da-accent-hover);
}

/* ─── شريط التنقل العلوي ─────────────────────────────────────────── */
.navbar {
  background-color: var(--da-surface) !important;
  border-bottom: 1px solid var(--da-border) !important;
  box-shadow: none !important;
}
.nav-link {
  color: var(--da-fg-2) !important;
}
.nav-link:hover, .nav-link.active {
  color: var(--da-accent) !important;
}

/* ─── البطاقات والمودالات والجداول ───────────────────────────────── */
.card, .modal-content {
  background-color: var(--da-surface);
  border: 1px solid var(--da-border);
  border-radius: var(--da-radius-md);
  box-shadow: var(--da-shadow-raised);
}

.modal-header, .modal-footer {
  border-color: var(--da-border);
}

table.table {
  background-color: var(--da-surface);
  border-radius: var(--da-radius-sm);
  overflow: hidden;
}
table.table thead.table-light th {
  background-color: var(--da-surface-warm);
  color: var(--da-fg-2);
  border-color: var(--da-border);
}
table.table td, table.table th {
  border-color: var(--da-border);
  vertical-align: middle;
}

/* ─── الأزرار والحقول ─────────────────────────────────────────────── */
.btn {
  border-radius: var(--da-radius-sm);
}

.btn-primary {
  background-color: var(--da-accent);
  border-color: var(--da-accent);
  color: var(--da-accent-on);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--da-accent-hover);
  border-color: var(--da-accent-hover);
}
.btn-primary:active {
  background-color: var(--da-accent-active) !important;
  border-color: var(--da-accent-active) !important;
}

.btn-outline-primary {
  color: var(--da-accent);
  border-color: var(--da-accent);
}
.btn-outline-primary:hover {
  background-color: var(--da-accent);
  border-color: var(--da-accent);
}

.form-control, .form-select {
  border-radius: var(--da-radius-sm);
  border-color: var(--da-border);
  background-color: var(--da-surface);
}
.form-control:focus, .form-select:focus, .form-check-input:focus,
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus {
  border-color: var(--da-accent);
  box-shadow: 0 0 0 0.2rem rgba(201, 100, 66, 0.25);
}

.form-label {
  color: var(--da-fg-2);
  font-weight: 600;
}

.text-muted {
  color: var(--da-meta) !important;
}

/* ─── الحاويات العامة (لتوحيد الشكل عبر كل الشاشات) ────────────────── */
.container {
  padding-top: 8px;
}

/* ─── مفتاح الألوان وشارات الحالة (ألوان جديدة من نفس نظام التصميم) ── */
.badge {
  border-radius: var(--da-radius-sm);
}
.badge.bg-success { background-color: var(--da-success) !important; }
.badge.bg-warning { background-color: var(--da-warn) !important; color: #fff !important; }
.badge.bg-danger  { background-color: var(--da-danger) !important; }
.badge.bg-secondary { background-color: var(--da-secondary) !important; }

/* ─── صفوف الجدول الدلالية (حالة انتهاء المستندات) ─────────────────── */
table.table-hover tbody tr.table-success:hover > *,
tr.table-success > * {
  --bs-table-bg: color-mix(in srgb, var(--da-success) 16%, var(--da-surface));
  color: var(--da-fg);
}
tr.table-warning > * {
  --bs-table-bg: color-mix(in srgb, var(--da-warn) 20%, var(--da-surface));
  color: var(--da-fg);
}
tr.table-danger > * {
  --bs-table-bg: color-mix(in srgb, var(--da-danger) 14%, var(--da-surface));
  color: var(--da-fg);
}
tr.table-secondary > * {
  --bs-table-bg: var(--da-surface-warm);
  color: var(--da-muted);
}

/* ─── أزرار الحالة (حفظ/حذف/تحذير) بألوان نظام التصميم ─────────────── */
.btn-success { background-color: var(--da-success); border-color: var(--da-success); }
.btn-success:hover, .btn-success:focus { background-color: var(--da-success-hover); border-color: var(--da-success-hover); }

.btn-danger { background-color: var(--da-danger); border-color: var(--da-danger); }
.btn-danger:hover, .btn-danger:focus { background-color: var(--da-danger-hover); border-color: var(--da-danger-hover); }

.btn-warning { background-color: var(--da-warn); border-color: var(--da-warn); color: #fff; }
.btn-warning:hover, .btn-warning:focus { background-color: var(--da-warn-hover); border-color: var(--da-warn-hover); color: #fff; }

.btn-secondary { background-color: var(--da-secondary); border-color: var(--da-secondary); }
.btn-secondary:hover, .btn-secondary:focus { background-color: var(--da-secondary-hover); border-color: var(--da-secondary-hover); }

.btn-outline-success { color: var(--da-success); border-color: var(--da-success); }
.btn-outline-success:hover { background-color: var(--da-success); border-color: var(--da-success); }

.btn-outline-danger { color: var(--da-danger); border-color: var(--da-danger); }
.btn-outline-danger:hover { background-color: var(--da-danger); border-color: var(--da-danger); }

.btn-outline-warning { color: var(--da-warn-hover); border-color: var(--da-warn); }
.btn-outline-warning:hover { background-color: var(--da-warn); border-color: var(--da-warn); color: #fff; }

.btn-outline-secondary { color: var(--da-secondary); border-color: var(--da-secondary); }
.btn-outline-secondary:hover { background-color: var(--da-secondary); border-color: var(--da-secondary); }

/* ─── التنبيهات (alerts) ────────────────────────────────────────────── */
.alert-success { background-color: color-mix(in srgb, var(--da-success) 14%, var(--da-surface)); border-color: var(--da-success); color: var(--da-fg); }
.alert-warning { background-color: color-mix(in srgb, var(--da-warn) 16%, var(--da-surface)); border-color: var(--da-warn); color: var(--da-fg); }
.alert-danger  { background-color: color-mix(in srgb, var(--da-danger) 12%, var(--da-surface)); border-color: var(--da-danger); color: var(--da-fg); }