/* ============================================================
   Golna — Shared UI: modals + toasts
   /assets/css/ui.css
   ============================================================ */

.gm-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(8, 20, 14, 0.55);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; opacity: 0; transition: opacity .18s ease;
}
.gm-overlay.show { opacity: 1; }

.gm-modal {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 18px; box-shadow: var(--shadow3, 0 24px 60px rgba(0,0,0,.25));
  width: min(560px, 100%); max-height: calc(100vh - 48px);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(8px) scale(.98); transition: transform .18s ease;
}
.gm-overlay.show .gm-modal { transform: none; }
.gm-modal.wide { width: min(820px, 100%); }

.gm-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border); gap: 12px;
}
.gm-modal-head h3 {
  font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 900;
  color: var(--text); letter-spacing: -.3px; margin: 0;
}
html[dir="rtl"] .gm-modal-head h3 { font-family: 'Noto Kufi Arabic', sans-serif; letter-spacing: 0; }
.gm-x {
  border: none; background: var(--bg3); color: var(--text2);
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  font-size: 18px; line-height: 1; flex-shrink: 0; transition: var(--t);
}
.gm-x:hover { background: var(--border); color: var(--text); }

.gm-modal-body { padding: 20px 22px; overflow-y: auto; }
.gm-modal-body .form-field { margin-bottom: 14px; }
.gm-modal-body label { display:block; font-size:13px; font-weight:700; color:var(--text2); margin-bottom:6px; }

.gm-modal-foot {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 16px 22px; border-top: 1px solid var(--border); background: var(--bg3);
}

/* صف إعداد (Settings) */
.gm-set-row {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 0; border-bottom:1px solid var(--border);
}
.gm-set-row:last-child { border-bottom:none; }
.gm-set-row .lbl { font-weight:700; font-size:14px; color:var(--text); }
.gm-set-row .sub { font-size:12px; color:var(--text3); margin-top:2px; }

/* toggle بسيط */
.gm-switch { position:relative; width:46px; height:26px; flex-shrink:0; }
.gm-switch input { display:none; }
.gm-switch .track {
  position:absolute; inset:0; background:var(--border); border-radius:30px; transition:var(--t); cursor:pointer;
}
.gm-switch .track::after {
  content:''; position:absolute; top:3px; inset-inline-start:3px; width:20px; height:20px;
  background:#fff; border-radius:50%; transition:var(--t); box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.gm-switch input:checked + .track { background:var(--green, #16a34a); }
.gm-switch input:checked + .track::after { inset-inline-start:23px; }

/* toasts */
.gm-toasts {
  position: fixed; bottom: 20px; inset-inline: 0; z-index: 1100;
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
.gm-toast {
  background: #0c2418; color: #fff; padding: 11px 18px; border-radius: 12px;
  font-size: 14px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.3);
  opacity: 0; transform: translateY(10px); transition: all .22s ease; max-width: 90vw;
}
.gm-toast.show { opacity: 1; transform: none; }
.gm-toast.ok { background: #0f7d39; }
.gm-toast.err { background: #b4231f; }