/* ==========================================================================
   Overlays — النوافذ المنبثقة (Bootstrap modal بهويتنا) + الإشعارات (toasts)
   ========================================================================== */

/* ---------- Modal ---------- */
.modal {
  --bs-modal-bg: var(--color-surface); /* Bootstrap ياخذها من خلفية الصفحة (الرمادية) */
  --bs-modal-border-radius: var(--radius-xl);
  --bs-modal-inner-border-radius: var(--radius-xl);
  --bs-modal-border-width: 0;
  --bs-modal-box-shadow: var(--shadow-lg);
  --bs-modal-padding: var(--space-6);
  --bs-modal-header-padding: var(--space-6) var(--space-6) 0;
  --bs-modal-footer-gap: var(--space-2);
  --bs-backdrop-bg: var(--gray-950);
  --bs-backdrop-opacity: .45;
}

.ui-modal .modal-header {
  align-items: flex-start;
  gap: var(--space-3);
  border-block-end: 0;
}

.ui-modal .modal-title {
  font-size: var(--text-base);
  line-height: var(--leading-base);
  font-weight: var(--weight-bold);
}

.ui-modal .modal-body {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.ui-modal .modal-footer {
  border-block-start: 0;
  padding: 0 var(--space-6) var(--space-6);
}

.ui-modal .btn-close {
  margin: 0;
  margin-inline-start: auto;
}

/* أيقونة في رأس النافذة (تأكيد الحذف مثلاً) */
.ui-modal__icon {
  display: inline-grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}

.ui-modal__icon--danger {
  background: var(--color-danger-subtle);
  color: var(--color-danger);
}

/* ---------- Toasts — إشعارات تختفي تلقائياً ---------- */
.ui-toasts {
  position: fixed;
  inset-block-start: calc(var(--header-height) + var(--space-2));
  inset-inline-end: var(--space-4);
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  inline-size: min(24rem, calc(100vw - var(--space-8)));
  pointer-events: none;
}

.ui-toast {
  --tone: var(--color-info);
  --tone-bg: var(--color-info-subtle);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-inline-start: 4px solid var(--tone);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  pointer-events: auto;
  animation: ui-toast-in var(--duration-base) var(--ease-standard);
}

.ui-toast--success { --tone: var(--color-success); --tone-bg: var(--color-success-subtle); }
.ui-toast--warning { --tone: var(--orange-700);    --tone-bg: var(--color-secondary-subtle); }
.ui-toast--danger  { --tone: var(--color-danger);  --tone-bg: var(--color-danger-subtle); }

.ui-toast__icon {
  display: inline-grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--tone-bg);
  color: var(--tone);
}

.ui-toast__text {
  flex: 1;
  margin: 0;
  padding-block-start: 2px;
}

.ui-toast__close {
  display: inline-grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-subtle);
  cursor: pointer;
}

.ui-toast__close:hover { background: var(--color-surface-muted); color: var(--color-text); }

.ui-toast.is-leaving {
  opacity: 0;
  transform: translateY(-.5rem);
  transition: opacity var(--duration-base), transform var(--duration-base);
}

@keyframes ui-toast-in {
  from { opacity: 0; transform: translateY(-.5rem); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 767.98px) {
  .ui-toasts {
    inset-inline: var(--space-4);
    inline-size: auto;
  }
}

/* ---------- Alerts — قائمة جرس التنبيهات في الهيدر ---------- */
.ui-alerts__menu {
  inline-size: min(22rem, calc(100vw - var(--space-8)));
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.ui-alerts__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3) var(--space-3);
  font-size: var(--text-sm);
}

.ui-alerts__item {
  --tone: var(--color-primary);
  --tone-bg: var(--color-primary-subtle);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text);
}

.ui-alerts__item:hover { background: var(--color-surface-muted); color: var(--color-text); }

.ui-alerts__item--danger    { --tone: var(--color-danger); --tone-bg: var(--color-danger-subtle); }
.ui-alerts__item--secondary { --tone: var(--orange-700);   --tone-bg: var(--color-secondary-subtle); }

.ui-alerts__icon {
  display: inline-grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--tone-bg);
  color: var(--tone);
}

.ui-alerts__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-inline-size: 0;
}

.ui-alerts__label {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--weight-semibold);
}

.ui-alerts__detail {
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  color: var(--color-text-muted);
}

.ui-alerts__count {
  flex-shrink: 0;
  padding-block-start: 2px;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--tone);
  font-variant-numeric: tabular-nums;
}

.ui-alerts__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0 var(--space-3) var(--space-2);
  margin-inline-start: calc(var(--space-3) + 2rem + var(--space-3)); /* محاذاة مع نص التنبيه */
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.ui-alerts__action:hover { background: var(--color-primary-subtle); }
.ui-alerts__action:disabled { opacity: .5; cursor: wait; }

.ui-alerts__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ---------- Image viewer — ui/components/image_viewer.html + ui/js/image_viewer.js ---------- */
.ui-viewer-open { overflow: hidden; }
.ui-viewer {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgb(15 23 42 / .78);
  backdrop-filter: blur(2px);
}
.ui-viewer[hidden] { display: none; }
.ui-viewer__panel {
  display: flex;
  flex-direction: column;
  inline-size: min(1100px, 100%);
  max-block-size: 100%;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: #0f172a;
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.ui-viewer__head, .ui-viewer__toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.ui-viewer__head { border-block-end: 1px solid rgb(255 255 255 / .1); }
.ui-viewer__toolbar { flex-wrap: wrap; border-block-start: 1px solid rgb(255 255 255 / .1); }
.ui-viewer__title { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); }
.ui-viewer__icon-btn { display: inline-grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border: 0; border-radius: var(--radius-full); background: rgb(255 255 255 / .1); color: #fff; cursor: pointer; }
.ui-viewer__icon-btn:hover { background: rgb(255 255 255 / .2); }
.ui-viewer__canvas {
  display: grid;
  place-items: center;
  min-block-size: 40vh;
  max-block-size: 74vh;
  overflow: auto;
  padding: var(--space-4);
  background: #020617;
}
.ui-viewer__canvas.is-zoomed { place-items: start; cursor: grab; }
.ui-viewer__canvas.is-dragging { cursor: grabbing; user-select: none; }
.ui-viewer__image { display: block; max-inline-size: 100%; max-block-size: 72vh; transition: transform .18s ease; }
.ui-viewer__message { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); max-inline-size: 26rem; color: #cbd5e1; text-align: center; font-size: var(--text-sm); }
.ui-viewer__message[hidden] { display: none; }
.ui-viewer__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ui-viewer__tool {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: 2rem;
  padding: 0 var(--space-3);
  border: 1px solid rgb(255 255 255 / .25);
  border-radius: var(--radius-full);
  background: none;
  color: #fff;
  font: inherit;
  font-size: var(--text-xs);
  text-decoration: none;
  cursor: pointer;
}
.ui-viewer__tool:hover { background: rgb(255 255 255 / .1); color: #fff; }
.ui-viewer__tool--primary { border-color: var(--color-secondary); background: var(--color-secondary); }
.ui-viewer__tool--primary:hover { background: var(--color-secondary-hover); }
.ui-viewer__zoom { min-inline-size: 3rem; text-align: center; font-variant-numeric: tabular-nums; font-size: var(--text-xs); }
@media (max-width: 575.98px) {
  .ui-viewer { padding: 0; }
  .ui-viewer__panel { block-size: 100%; border-radius: 0; }
  .ui-viewer__canvas { flex: 1; max-block-size: none; }
}

/* نافذة تذكير المذكرة الشخصية (ui/partials/reminder_modal.html) */
.ui-reminder__body { display: flex; flex-direction: column; gap: var(--space-2); }
.ui-reminder__note { white-space: pre-line; overflow-wrap: anywhere; }
.ui-reminder__actions { flex-wrap: wrap; gap: var(--space-2); }