/* رابط — تنسيقات البرنامج | Rabt app styles (Bootstrap 5.3 + Cairo) */
:root {
  --brand: #0E7C66;
  --brand-dark: #0A5E4D;
  --brand-soft: #D5EEE7;
  --ink: #13211C;
  --muted: #5A6B65;
  --line: #D9E2DE;
  --canvas: #F2F5F3;
  --gold: #9A6312;
  --gold-soft: #F5E6C8;
  --ok: #1C7337;
  --ok-soft: #D9F0E0;
  --off: #B42318;
  --off-soft: #FBE2DE;
  --bs-body-font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --bs-body-color: var(--ink);
  --bs-link-color: var(--brand);
  --bs-link-hover-color: var(--brand-dark);
  --bs-link-color-rgb: 14, 124, 102;
  --bs-border-color: var(--line);
}

body { font-family: var(--bs-body-font-family); }
body.app { background: var(--canvas); color: var(--ink); min-height: 100vh; }
h1, h2, h3, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 700; text-wrap: balance; }
.min-w-0 { min-width: 0; }
.num { font-variant-numeric: tabular-nums; }

/* App bar */
.app-bar { background: #fff; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--ink); }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: .9rem; }
.app-bar .nav-link { border-radius: 999px; padding-inline: .9rem !important; color: var(--muted); font-weight: 600; }
.app-bar .nav-link.active { background: var(--brand-soft); color: var(--ink); }

/* Buttons & forms */
.btn { font-weight: 600; }
.btn-brand { --bs-btn-color: #fff; --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-color: #fff; --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); }
.btn-icon { width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); background: #fff; display: inline-grid; place-items: center; }
.btn-icon:disabled { opacity: .35; }
.form-control:focus, .form-select:focus, .btn:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(14, 124, 102, .2); }
.nav-underline .nav-link { color: var(--muted); font-weight: 600; }
.nav-underline .nav-link.active { color: var(--ink); border-bottom-color: var(--brand); }

/* Surfaces */
.panel { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.25rem; }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--muted); border: 1px dashed var(--line); border-radius: 14px; background: #fff; }
.auth-card { max-width: 420px; margin: 2rem auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 2rem; }

.chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 700; padding: .1rem .6rem; border-radius: 999px; white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-ok { background: var(--ok-soft); color: var(--ok); }
.chip-off { background: var(--off-soft); color: var(--off); }
.chip-draft { background: var(--gold-soft); color: var(--gold); }
.chip-role { background: var(--brand-soft); color: var(--ink); }
.chip-role::before { display: none; }
.chip-editor { background: var(--gold-soft); color: var(--gold); }
.chip-editor::before { display: none; }
.pick-list { max-height: 180px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: .5rem .75rem; background: #fff; }
.pick-list .form-check { margin-bottom: .25rem; }
.roles-explain { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.roles-explain > div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem; }
.roles-explain p { margin: .4rem 0 0; font-size: .85rem; color: var(--muted); }
.av.shape-rounded, .pav.shape-rounded { border-radius: 22%; }

.slug { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; color: var(--muted); direction: ltr; unicode-bidi: isolate; text-decoration: none; }

.av { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; display: inline-grid; place-items: center; font-weight: 700; font-size: 1.1rem; background: var(--brand); color: #fff; }
.av-sm { width: 36px; height: 36px; font-size: .9rem; }
.av-lg { width: 80px; height: 80px; font-size: 1.8rem; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem; }
.stat-num { font-size: 1.7rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }

.page-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.admin-table { min-width: 860px; }
.admin-table th { font-size: .75rem; color: var(--muted); font-weight: 700; white-space: nowrap; }
.admin-table select { min-width: 150px; }

/* Editor */
.editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.5rem; align-items: start; }
@media (max-width: 991.98px) { .editor-grid { grid-template-columns: minmax(0, 1fr); } }
.phone-wrap { position: sticky; top: 84px; }
.phone { border: 10px solid var(--ink); border-radius: 40px; overflow: hidden; height: 640px; max-width: 340px; margin-inline: auto; }
.phone .pub { min-height: 100%; height: 100%; overflow-y: auto; padding-top: 2rem; }

.link-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
.link-row.editing { display: block; background: #fff; border-color: var(--brand); }
.link-row.is-hidden { opacity: .6; }
.link-main { min-width: 0; }
.link-url { font-size: .8rem; color: var(--muted); text-align: start; }
.link-acts { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
@media (max-width: 575.98px) { .link-row { grid-template-columns: auto minmax(0, 1fr); } .link-acts { grid-column: 1 / -1; justify-content: flex-start; } }

.pf { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .72rem; flex: none; direction: ltr; }

.preset { border: 2px solid var(--line); border-radius: 12px; padding: 3px; background: none; }
.preset.on { border-color: var(--brand); }
.preset span { display: grid; place-items: center; width: 70px; height: 46px; border-radius: 8px; }
.preset i { font-style: normal; font-size: .72rem; font-weight: 700; padding: 1px 9px; border-radius: 99px; }

.member { display: flex; align-items: center; gap: .75rem; padding: .7rem; border: 1px solid var(--line); border-radius: 12px; flex-wrap: wrap; }
.setting { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; }

/* Public page (also used in the editor preview) */
.public-body { margin: 0; min-height: 100vh; }
.pub { background: var(--pbg); color: var(--ptxt); min-height: 100vh; padding: 3rem 1.25rem 2rem; display: flex; flex-direction: column; align-items: center; gap: .8rem; text-align: center; font-family: 'Cairo', system-ui, sans-serif; }
.pub .pav { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-size: 2.4rem; font-weight: 700; border: 3px solid color-mix(in srgb, var(--ptxt) 20%, transparent); }
.pub-name { font-size: 1.4rem; font-weight: 800; margin: .2rem 0 0; color: var(--ptxt); }
.pub-bio { margin: 0; max-width: 36ch; opacity: .85; font-size: .95rem; line-height: 1.7; }
.pub-links { display: grid; gap: .75rem; width: 100%; max-width: 460px; margin-top: .75rem; }
.pub a.pl { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; background: var(--pbtn); color: var(--pbtntxt); text-decoration: none; font-weight: 700; transition: transform .15s ease, box-shadow .15s ease; }
.pub a.pl:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.pub a.pl .pl-text { flex: 1; text-align: center; overflow-wrap: anywhere; }
.pub a.pl i { width: 28px; flex: none; }
.pub a.pl .pf { width: 28px; height: 28px; border-radius: 8px; font-size: .62rem; background: rgba(0, 0, 0, .2) !important; color: inherit; }
.st-pill a.pl { border-radius: 999px; }
.st-rounded a.pl { border-radius: 14px; }
.st-square a.pl { border-radius: 3px; }
.st-outline a.pl { background: transparent; color: var(--ptxt); border: 2px solid var(--pbtn); border-radius: 14px; }
.st-outline a.pl .pf { background: var(--pbtn) !important; color: var(--pbtntxt); }
.pub-foot { margin-top: auto; padding-top: 2rem; font-size: .75rem; opacity: .6; }
.pub-lang { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); inset-inline-end: 12px; z-index: 2; }
.pub-lang .btn { background: rgba(255, 255, 255, .85); border-color: transparent; color: #13211C; }
.team-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1rem; padding: .5rem 1rem; background: #13211C; color: #fff; font-size: .85rem; }
.team-bar a { color: #8EE3CC; font-weight: 700; }
body.public-body:has(.team-bar) .pub-lang { top: 52px; }

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