/* Wuthqa CMS — Admin styles (light, gold-accented) */
:root{ --gold:#c8a84b; --gold-600:#ab8c39; --ink:#141210; --line:#e6e2d8; --bg:#f4f2ec; --muted:#6b6455; --am-top-h:62px; }
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:var(--bg); }
button{ font-family:inherit; cursor:pointer; }
img{ max-width:100%; display:block; }

.am-loading{ padding:40px; color:var(--muted); }
.am-loading.full{ min-height:100vh; display:flex; align-items:center; justify-content:center; }

/* top bar */
.am-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 20px; background:var(--ink); color:#fff; position:sticky; top:0; z-index:20; min-height:var(--am-top-h); }
.am-brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.02em; }
.am-brand img{ width:26px; height:26px; }
.am-top-right{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.am-mode{ font-size:11px; font-weight:700; letter-spacing:.06em; padding:4px 10px; border-radius:999px; }
.am-mode.local{ background:rgba(255,255,255,.12); color:#e9e4d5; }
.am-mode.api{ background:var(--gold); color:#1a1508; }
.am-user{ font-size:13px; color:rgba(255,255,255,.75); }

/* layout */
.am-body{ display:grid; grid-template-columns:250px 1fr; min-height:calc(100vh - var(--am-top-h)); }
.am-side{ background:#fff; border-right:1px solid var(--line); padding:16px 12px;
  position:sticky; top:var(--am-top-h); align-self:start; max-height:calc(100vh - var(--am-top-h)); overflow-y:auto; overscroll-behavior:contain; }
/* Slim scrollbar for the pinned sidebar */
.am-side::-webkit-scrollbar{ width:8px; }
.am-side::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; }
.am-side{ scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.am-side-group{ font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); padding:6px 10px; }
.am-side-item{ width:100%; text-align:left; display:flex; align-items:center; gap:10px; background:none; border:none; padding:10px 12px; border-radius:9px; color:var(--ink); font-size:14px; }
.am-side-item:hover{ background:#faf8f2; }
.am-side-item.active{ background:var(--gold); color:#1a1508; font-weight:600; }
.am-side-item i{ width:17px; height:17px; }
.am-main{ padding:26px 30px; min-width:0; }

/* editor */
.am-editor-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
.am-editor-head h2{ margin:0; font-size:22px; }
.am-sub{ margin:4px 0 0; color:var(--muted); font-size:13px; }
.am-editor-actions{ display:flex; align-items:center; gap:10px; }
.am-status{ font-size:13px; color:var(--gold-600); }
.am-autosave{ font-size:13px; color:var(--muted); display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.am-autosave.saving{ color:var(--gold-600); }
.am-autosave.saved{ color:#2f8f4e; }
.am-autosave.error{ color:#b3261e; }
.am-linkbtn{ border:none; background:none; color:inherit; text-decoration:underline; font:inherit; font-weight:700; cursor:pointer; padding:0; }
.am-btn.danger-ghost{ background:#fff; color:#b3261e; border-color:#ecd9d6; }
.am-btn.danger-ghost:hover{ background:#fdecea; border-color:#e2b8b2; }

.am-list{ display:flex; flex-direction:column; gap:8px; max-width:820px; }
.am-row{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.am-row-thumb{ width:46px; height:46px; border-radius:8px; overflow:hidden; background:#efece3; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#b9b2a0; }
.am-row-thumb img{ width:100%; height:100%; object-fit:cover; }
.am-row-main{ flex:1; min-width:0; }
.am-row-title{ font-weight:600; font-size:15px; }
.am-row-sub{ color:var(--muted); font-size:12.5px; margin-top:2px; }
.am-row-actions{ display:flex; align-items:center; gap:6px; }
.am-empty{ color:var(--muted); font-size:14px; padding:14px; }

/* buttons */
.am-btn{ border:1px solid var(--line); background:#fff; color:var(--ink); padding:9px 16px; border-radius:9px; font-size:14px; font-weight:600; }
.am-btn.small{ padding:6px 12px; font-size:13px; }
.am-btn.gold{ background:var(--gold); border-color:var(--gold); color:#1a1508; }
.am-btn.gold:hover{ background:var(--gold-600); border-color:var(--gold-600); }
.am-btn.ghost{ background:#fff; }
.am-btn.ghost:hover{ background:#faf8f2; }
.am-btn.disabled,.am-btn:disabled{ opacity:.5; cursor:default; }

/* fields */
.af{ margin-bottom:16px; }
.af-label{ display:block; font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:6px; }
.af-input{ width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 11px; font-size:14px; font-family:inherit; background:#fff; }
.af-input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(200,168,75,.18); }
textarea.af-input{ resize:vertical; line-height:1.5; }
.af-i18n{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.af-lang{ position:relative; }
.af-tag{ position:absolute; top:-8px; left:8px; background:#fff; font-size:10px; font-weight:700; color:var(--muted); padding:0 5px; }
.af-listrow{ display:grid; grid-template-columns:1fr 1fr auto auto auto; gap:6px; margin-bottom:6px; align-items:center; }
.af-mini{ border:1px solid var(--line); background:#fff; border-radius:7px; width:30px; height:30px; font-size:13px; color:var(--ink); }
.af-mini:hover{ background:#faf8f2; }
.af-mini.danger{ color:#b3261e; }
.af-mini.danger:hover{ background:#fdecea; }
.af-add{ border:1px dashed var(--gold-600); background:#fff; color:var(--gold-600); border-radius:8px; padding:7px 14px; font-size:13px; font-weight:600; }
.af-add:hover{ background:#fbf7ec; }
.af-img{ display:flex; gap:14px; align-items:flex-start; }
.af-img-preview{ width:96px; height:96px; border-radius:10px; overflow:hidden; background:#efece3; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#b9b2a0; font-size:12px; }
.af-img-preview img{ width:100%; height:100%; object-fit:cover; }
.af-img-ctl{ flex:1; min-width:0; }
.af-img-btns{ display:flex; gap:8px; margin-top:8px; align-items:center; }
.af-check{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--ink); cursor:pointer; }
.af-check input{ width:17px; height:17px; }

/* objlist field (structured list rows, expand inline to edit) */
.af-objlist{ display:flex; flex-direction:column; gap:6px; margin-bottom:6px; }
.af-objrow{ border:1px solid var(--line); border-radius:10px; background:#fff; overflow:hidden; }
.af-objrow.open{ border-color:var(--gold); }
.af-objrow-head{ display:flex; align-items:center; gap:6px; padding:7px 9px; }
.af-objrow-title{ flex:1; min-width:0; text-align:left; border:none; background:none; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--ink); padding:4px 2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.af-objrow-title em{ color:var(--muted); font-weight:400; }
.af-objrow-body{ border-top:1px solid var(--line); padding:14px 12px 2px; background:#fcfbf7; }
.af-objempty{ color:var(--muted); font-size:13px; padding:4px 2px; }

/* divider pseudo-field (section heading inside the item modal) */
.af-divider{ margin:22px 0 14px; padding-top:14px; border-top:1px solid var(--line); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--gold-600); }
.af-divider:first-child{ margin-top:0; padding-top:0; border-top:none; }

/* page-content singleton editor */
.am-pc{ display:flex; flex-direction:column; gap:14px; max-width:820px; }
.am-pc-card{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 20px 6px; }
.am-pc-title{ margin:0 0 14px; font-size:15px; font-weight:700; }

/* inbox */
.am-badge{ margin-left:auto; background:var(--gold); color:#1a1508; font-size:11px; font-weight:800;
  border-radius:999px; padding:2px 8px; line-height:1.4; }
.am-side-item.active .am-badge{ background:#1a1508; color:var(--gold); }
.am-sub-row{ background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.am-sub-head{ width:100%; display:flex; align-items:center; gap:12px; padding:13px 16px; background:none;
  border:none; text-align:left; font-family:inherit; font-size:14px; color:var(--ink); }
.am-sub-head:hover{ background:#faf8f2; }
.am-sub-dot{ width:8px; height:8px; border-radius:50%; background:transparent; flex-shrink:0; }
.am-sub-row.unread .am-sub-dot{ background:var(--gold); }
.am-sub-row.unread .am-sub-title{ font-weight:700; }
.am-sub-main{ flex:1; min-width:0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.am-sub-title{ font-weight:600; }
.am-sub-bit{ color:var(--muted); font-size:12.5px; }
.am-sub-date{ color:var(--muted); font-size:12px; white-space:nowrap; }
.am-sub-detail{ border-top:1px solid var(--line); padding:14px 18px; background:#fcfbf7; }
.am-sub-detail dl{ margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px 22px; }
.am-sub-kv dt{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.am-sub-kv dd{ margin:2px 0 0; font-size:13.5px; word-break:break-word; }
.am-sub-detail-foot{ display:flex; justify-content:flex-end; margin-top:10px; }

/* modal */
.am-overlay{ position:fixed; inset:0; background:rgba(20,16,10,.5); display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; z-index:40; overflow:auto; }
.am-modal{ background:#fff; border-radius:16px; width:100%; max-width:620px; box-shadow:0 30px 80px -20px rgba(0,0,0,.4); }
.am-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); }
.am-modal-head h3{ margin:0; font-size:17px; }
.am-x{ border:none; background:none; font-size:18px; color:var(--muted); }
.am-modal-body{ padding:20px 22px; max-height:65vh; overflow:auto; }
.am-modal-foot{ display:flex; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--line); }

/* login */
.am-login{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--ink); }
.am-login-card{ background:#fff; border-radius:18px; padding:38px 34px; width:100%; max-width:360px; display:flex; flex-direction:column; gap:12px; text-align:center; box-shadow:0 30px 80px -20px rgba(0,0,0,.5); }
.am-login-logo{ width:46px; height:46px; margin:0 auto; }
.am-login-card h1{ margin:6px 0 0; font-size:22px; }
.am-login-card p{ margin:0 0 8px; color:var(--muted); font-size:14px; }
.am-login-err{ color:#b3261e; font-size:13px; }

@media (max-width:720px){
  .am-body{ grid-template-columns:1fr; }
  /* On narrow screens the sidebar is a wrapped top nav — don't pin it. */
  .am-side{ border-right:none; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; gap:6px;
    position:static; max-height:none; overflow:visible; }
  .af-i18n{ grid-template-columns:1fr; }
}

/* ---- Section visibility panel ----------------------------------- */
.am-secvis-intro{ color:var(--muted); font-size:14px; line-height:1.6; margin:0 0 22px; max-width:640px; }
.am-secvis-group{ margin-bottom:26px; }
.am-secvis-page{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-600);
  margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.am-secvis-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 4px;
  border-bottom:1px solid #efece3; }
.am-secvis-row:last-child{ border-bottom:none; }
.am-secvis-label{ font-size:14.5px; font-weight:600; color:var(--ink); }

/* Segmented 3-way control */
.am-seg{ display:inline-flex; flex-shrink:0; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:#fff; }
.am-seg-btn{ border:none; background:transparent; cursor:pointer; padding:7px 14px; font-size:13px; font-weight:600;
  color:var(--muted); font-family:inherit; white-space:nowrap; transition:background .15s, color .15s; }
.am-seg-btn + .am-seg-btn{ border-inline-start:1px solid var(--line); }
.am-seg-btn:hover{ background:#f6f4ee; }
.am-seg-btn.is-show.active{ background:#e7f4ec; color:#1a7f45; }
.am-seg-btn.is-soon.active{ background:#fbf1d8; color:#9a7414; }
.am-seg-btn.is-hide.active{ background:#fbe6e4; color:#b3261e; }

/* Language toggle */
.am-lang{ display:inline-flex; align-items:center; gap:6px; }
.am-lang i{ width:15px; height:15px; }

/* ---- RTL (Arabic admin chrome) ---------------------------------- */
[dir="rtl"] .am-side{ border-right:none; border-left:1px solid var(--line); }
[dir="rtl"] .am-side-item{ text-align:right; }
[dir="rtl"] .am-editor-head,
[dir="rtl"] .am-secvis-intro,
[dir="rtl"] .am-secvis-page{ text-align:right; }
[dir="rtl"] .am-side-item i,
[dir="rtl"] .am-lang i{ transform:scaleX(-1); }
@media (max-width:720px){
  [dir="rtl"] .am-side{ border-left:none; border-bottom:1px solid var(--line); }
}

/* File field (PDF upload) */
.af-file{ display:flex; flex-direction:column; gap:8px; }
.af-file-name{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted); }
.af-file-name i{ width:14px; height:14px; }

/* refs field (pick items from other collections) */
.af-refs{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; border:1px solid var(--line); border-radius:10px; padding:12px; background:#fcfbf7; }
.af-refs-col{ min-width:0; }
.af-refs-h{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--gold-600); margin-bottom:8px; }
.af-refs-item{ padding:5px 0; font-weight:500; font-size:13px; align-items:flex-start; }
.af-refs-item input{ margin-top:2px; flex-shrink:0; }
.af-refs-item span{ line-height:1.4; }
.af-refs-count{ margin-top:8px; font-size:12px; color:var(--muted); }
@media (max-width:900px){ .af-refs{ grid-template-columns:1fr; } }