/* ============================================================
   REALTEEK ADMIN — dashboard styling
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

:root{
  --sky:#db1351; --sky-deep:#9E0E3B; --sky-soft:#FCE6EB;
  --ink:#131A21; --ink-2:#1a2632; --ink-soft:#A0AAB5;
  --paper:#F0F2F5; --white:#fff; --black:#0A0E14;
  --line:rgba(12,22,32,.1); --line-dark:rgba(255,255,255,.08);
  --ok:#2bb673; --warn:#E5A23B; --danger:#e5484d;
  --r:14px; --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 18px 40px -22px rgba(12,22,32,.3);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Hanken Grotesk",system-ui,sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.bricolage{font-family:"Bricolage Grotesque",sans-serif}

/* ---------- login ---------- */
.login-screen{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(120% 90% at 50% -10%, #cfeafd, #a9d8f6 45%, #eef3f6 100%)}
.login-card{width:min(420px,92vw);background:#fff;border-radius:24px;padding:42px 38px;box-shadow:0 40px 90px -30px rgba(12,22,32,.4)}
.login-brand{display:flex;align-items:center;gap:.55rem;margin-bottom:8px;font-weight:700}
.login-brand svg{width:30px;height:30px;color:var(--ink)}
.login-brand span{font-family:"Bricolage Grotesque",sans-serif;font-size:1.35rem}
.login-card h1{font-family:"Bricolage Grotesque",sans-serif;font-size:1.5rem;margin:14px 0 4px}
.login-card .muted{color:var(--ink-soft);font-size:.92rem;margin-bottom:26px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.field input:not([type="checkbox"]),.field select,.field textarea{
  width:100%;border:1px solid var(--line);border-radius:11px;padding:.8em 1em;font-family:inherit;font-size:.95rem;
  background:#fff;color:var(--ink);outline:none;transition:.2s}
.field input:not([type="checkbox"]):focus,.field select:focus,.field textarea:focus{border-color:var(--sky);box-shadow:0 0 0 4px var(--sky-soft)}
.field textarea{resize:vertical;min-height:90px;line-height:1.55}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:600;font-size:.95rem;
  border:none;border-radius:11px;padding:.85em 1.4em;transition:.25s var(--ease)}
.btn-primary{background:var(--black);color:#fff;width:100%}
.btn-primary:hover{background:var(--sky-deep)}
.btn-sky{background:var(--sky);color:#fff}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-danger{background:#fdecec;color:var(--danger)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-sm{padding:.5em .9em;font-size:.86rem;border-radius:9px}
.form-msg{font-size:.88rem;margin-top:14px;padding:.7em 1em;border-radius:10px;display:none}
.form-msg.err{display:block;background:#fdecec;color:var(--danger)}
.form-msg.ok{display:block;background:#e7f7ef;color:var(--ok)}

/* ---------- app shell ---------- */
.shell{display:grid;grid-template-columns:256px 1fr;min-height:100vh}
.sidebar{background:var(--ink);color:#aeb8c4;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sb-brand{display:flex;align-items:center;gap:.55rem;padding:22px 24px;color:#fff;border-bottom:1px solid var(--line-dark)}
.sb-brand svg{width:28px;height:28px}
.sb-brand b{font-family:"Bricolage Grotesque",sans-serif;font-size:1.25rem;font-weight:700;flex:1}

/* EN/AR animated toggle — always laid out left-to-right (EN left, AR right)
   regardless of page direction, so the control itself never mirrors. */
.admin-lang-switch{
  position:relative;direction:ltr;display:inline-flex;align-items:center;flex:none;
  width:56px;height:28px;padding:3px;border-radius:999px;cursor:pointer;
  font-family:inherit;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);transition:background .2s,border-color .2s;
}
.admin-lang-switch:hover{background:rgba(255,255,255,.22)}
.admin-lang-switch .ls-thumb{
  position:absolute;top:3px;left:3px;width:24px;height:20px;border-radius:999px;
  background:var(--sky);box-shadow:0 3px 10px -3px rgba(12,22,32,.5);
  transition:transform .35s cubic-bezier(.65,0,.35,1);
}
.admin-lang-switch[data-lang="ar"] .ls-thumb{transform:translateX(24px)}
.admin-lang-switch .ls-opt{
  position:relative;z-index:1;flex:1;text-align:center;
  font-size:.62rem;font-weight:800;letter-spacing:.02em;
  color:rgba(255,255,255,.6);transition:color .3s;
}
.admin-lang-switch[data-lang="en"] .ls-en,.admin-lang-switch[data-lang="ar"] .ls-ar{color:#fff}
/* on login.html the switch is a direct child of <body> (a sibling of
   .login-screen, not a descendant) — target that structure directly */
body > .admin-lang-switch{
  position:fixed;top:18px;inset-inline-end:18px;background:#f1f4f7;
  border:1px solid var(--line);box-shadow:var(--shadow);
}
body > .admin-lang-switch:hover{border-color:var(--ink-soft)}
body > .admin-lang-switch .ls-opt{color:var(--ink-soft)}
body > .admin-lang-switch[data-lang="en"] .ls-en,body > .admin-lang-switch[data-lang="ar"] .ls-ar{color:#fff}
.sb-nav{padding:16px 14px;flex:1;overflow-y:auto}
.sb-section{font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;color:#5d6b7a;padding:14px 12px 6px}
.sb-link{display:flex;align-items:center;gap:.7rem;padding:.7em .9em;border-radius:10px;font-size:.93rem;font-weight:500;color:#aeb8c4;transition:.2s;border:none;background:none;width:100%;text-align:start}
.sb-link svg{width:19px;height:19px;flex:none}
.sb-link:hover{background:rgba(255,255,255,.05);color:#fff}
.sb-link.active{background:var(--sky);color:#fff}
.sb-link .badge{margin-inline-start:auto;background:rgba(255,255,255,.12);border-radius:999px;font-size:.72rem;padding:.1em .6em;font-weight:600}
.sb-link.active .badge{background:rgba(255,255,255,.25)}
.sb-foot{padding:16px;border-top:1px solid var(--line-dark)}
.sb-user{display:flex;align-items:center;gap:.6rem;padding:.5em;margin-bottom:8px;font-size:.85rem}
.sb-user .av{width:34px;height:34px;border-radius:9px;background:var(--sky);color:#fff;display:grid;place-items:center;font-weight:700;font-family:"Bricolage Grotesque"}
.sb-user small{display:block;color:#5d6b7a}

/* ---------- main ---------- */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{position:sticky;top:0;z-index:20;background:rgba(244,246,248,.85);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);padding:18px 32px;display:flex;align-items:center;gap:1rem}
.topbar h1{font-family:"Bricolage Grotesque",sans-serif;font-size:1.45rem;font-weight:700;letter-spacing:-.01em}
.topbar .sub{color:var(--ink-soft);font-size:.9rem}
.topbar .spacer{flex:1}
.content{padding:28px 32px 60px}
#menuBtn{display:none}

/* setup notice */
.notice{background:#fff;border:1px solid var(--line);border-inline-start:4px solid var(--warn);border-radius:var(--r);padding:22px 24px;margin-bottom:24px}
.notice h3{font-family:"Bricolage Grotesque",sans-serif;margin-bottom:6px}
.notice p{color:var(--ink-soft);font-size:.92rem;line-height:1.6}
.notice code{background:var(--paper);padding:.1em .4em;border-radius:5px;font-size:.85em}

/* stat cards (overview) */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;margin-bottom:28px}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
.stat-card .ic{width:40px;height:40px;border-radius:11px;background:var(--sky-soft);color:var(--sky-deep);display:grid;place-items:center;margin-bottom:14px}
.stat-card .ic svg{width:21px;height:21px}
.stat-card .n{font-family:"Bricolage Grotesque",sans-serif;font-size:2rem;font-weight:700;line-height:1}
.stat-card .l{color:var(--ink-soft);font-size:.88rem;margin-top:4px}

/* table */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.panel-head{display:flex;align-items:center;gap:1rem;padding:16px 20px;border-bottom:1px solid var(--line)}
.panel-head .search{flex:1;max-width:340px;display:flex;align-items:center;gap:.5rem;background:var(--paper);border-radius:10px;padding:.5em .9em}
.panel-head .search svg{width:17px;height:17px;color:var(--ink-soft)}
.panel-head .search input{border:none;background:none;outline:none;width:100%;font-family:inherit;font-size:.92rem}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:start;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);font-weight:600;padding:12px 20px;border-bottom:1px solid var(--line);background:#fafbfc}
.tbl td{padding:12px 20px;border-bottom:1px solid var(--line);font-size:.92rem;vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:#fafbfc}
.tbl .thumb{width:52px;height:40px;border-radius:8px;object-fit:cover;background:var(--paper)}
.tbl tr.inq-new td{background:rgba(245,166,35,.07)}
.tbl tr.inq-new:hover td{background:rgba(245,166,35,.12)}
.inq-status{padding:5px 8px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:.85rem;background:#fff;cursor:pointer}
.tbl .name{font-weight:600}
.row-actions{display:flex;gap:.4rem;justify-content:flex-end}
.icon-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--ink-soft);transition:.2s}
.icon-btn svg{width:16px;height:16px}
.icon-btn:hover{color:var(--ink);border-color:var(--ink)}
.icon-btn.del:hover{color:#fff;background:var(--danger);border-color:var(--danger)}
.pill{display:inline-flex;align-items:center;gap:.35em;font-size:.74rem;font-weight:600;padding:.3em .7em;border-radius:999px}
.pill.on{background:#e7f7ef;color:var(--ok)}
.pill.off{background:#f0f2f4;color:var(--ink-soft)}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor}
.tag-mini{display:inline-block;background:var(--sky-soft);color:var(--sky-deep);font-size:.72rem;font-weight:600;padding:.2em .6em;border-radius:6px;margin:1px}
.empty-row{text-align:center;color:var(--ink-soft);padding:48px}

/* ---------- slide-over form ---------- */
.overlay{position:fixed;inset:0;background:rgba(8,12,18,.45);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:.3s;z-index:50}
.overlay.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;inset-inline-end:0;height:100vh;width:min(560px,94vw);background:#fff;box-shadow:-20px 0 60px -20px rgba(0,0,0,.4);
  transform:translateX(100%);transition:transform .4s var(--ease);z-index:51;display:flex;flex-direction:column}
[dir="rtl"] .drawer{box-shadow:20px 0 60px -20px rgba(0,0,0,.4);transform:translateX(-100%)}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;gap:1rem;padding:20px 26px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-family:"Bricolage Grotesque",sans-serif;font-size:1.25rem;flex:1}
.drawer-body{padding:22px 26px;overflow-y:auto;flex:1}
.drawer-foot{padding:16px 26px;border-top:1px solid var(--line);display:flex;gap:.7rem;justify-content:flex-end}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field-hint{font-size:.78rem;color:var(--ink-soft);margin-top:4px}
/* .field label{display:block} (0,1,1) otherwise beats this (0,1,0) since the
   toggle is a <label class="switch"> inside a .field — collapsing the track
   span's width/height (inline elements ignore them) and leaving its
   absolutely-positioned thumb floating loose over the label text */
label.switch{position:relative;display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;font-weight:500}
/* visually-hidden (not display:none) so the shared .field input border/
   padding/radius rules can never bleed through and render the native
   checkbox on top of the custom track */
.switch input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
/* a near-transparent var(--line) fill made the "off" state nearly invisible
   against the white drawer — use a clearly visible gray + border instead */
.switch .track{width:42px;height:24px;border-radius:999px;background:#ccd3da;border:1px solid #b9c2cb;position:relative;transition:.25s;flex:none}
.switch .track::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked + .track{background:var(--ok);border-color:var(--ok)}
.switch input:checked + .track::after{transform:translateX(18px)}
[dir="rtl"] .switch input:checked + .track::after{transform:translateX(-18px)}

/* image / gallery field */
.img-field{display:flex;gap:12px;align-items:flex-start}
.img-prev{width:84px;height:64px;border-radius:10px;object-fit:cover;background:var(--paper);border:1px solid var(--line);flex:none}
.img-controls{flex:1;display:flex;flex-direction:column;gap:8px}
.upload-row{display:flex;gap:8px}
.gallery-edit{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.gallery-edit .g-item{position:relative;width:84px;height:64px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.gallery-edit .g-item img{width:100%;height:100%;object-fit:cover}
.gallery-edit .g-item button{position:absolute;top:3px;inset-inline-end:3px;width:20px;height:20px;border-radius:50%;background:rgba(8,12,18,.7);color:#fff;border:none;display:grid;place-items:center;font-size:12px}
.add-img{width:84px;height:64px;border-radius:10px;border:1.5px dashed var(--line);background:var(--paper);color:var(--ink-soft);display:grid;place-items:center;font-size:24px}
.add-img:hover{border-color:var(--sky);color:var(--sky)}
.add-img-pick{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:600;line-height:1.2;text-align:center;padding:4px}
.add-img-pick svg{width:18px;height:18px}

/* media picker — reuse an already-uploaded file instead of re-uploading it */
.mp-overlay{position:fixed;inset:0;background:rgba(8,12,18,.55);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:.25s;z-index:70;display:grid;place-items:center;padding:24px}
.mp-overlay.open{opacity:1;visibility:visible}
.mp-modal{background:#fff;border-radius:16px;width:min(680px,92vw);max-height:82vh;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.mp-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.mp-search{padding:12px 20px;border-bottom:1px solid var(--line)}
.mp-search input{width:100%;border:1px solid var(--line);border-radius:10px;padding:.6em .9em;font:inherit;outline:none}
.mp-search input:focus{border-color:var(--sky)}
.mp-grid{padding:16px 20px;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.mp-item{cursor:pointer;border:1px solid var(--line);border-radius:10px;overflow:hidden;aspect-ratio:1;background:var(--paper);padding:0;transition:.2s}
.mp-item:hover{border-color:var(--sky);transform:scale(1.04)}
.mp-item img{width:100%;height:100%;object-fit:cover;display:block}
.mp-pdf{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px;font-size:.68rem;color:var(--ink-soft);text-align:center;word-break:break-word}
.mp-pdf svg{width:26px;height:26px;color:var(--sky-deep)}

/* PDF field */
.pdf-prev{width:84px;height:64px;border-radius:10px;background:var(--paper);border:1px solid var(--line);flex:none;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.78rem;color:var(--ink-soft);padding:6px}
.pdf-prev a{color:var(--sky-deep);font-weight:600}

/* executive consultants field */
.consultants-edit{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.consultant-row{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:10px}
.consultant-logo-prev{width:44px;height:44px;border-radius:8px;object-fit:contain;background:var(--paper);border:1px solid var(--line);flex:none;padding:4px;cursor:pointer;transition:border-color .2s}
.consultant-logo-prev:hover{border-color:var(--sky)}
.consultant-row input[type="text"]{flex:1;border:1px solid var(--line);border-radius:8px;padding:.55em .8em;font-family:inherit;font-size:.92rem;background:#fff;color:var(--ink);outline:none}
.consultant-row input[type="text"]:focus{border-color:var(--sky);box-shadow:0 0 0 3px var(--sky-soft)}

/* project/blog content field — a full-screen studio (.bs-*) replaces the
   old drawer-embedded editor: a language tab (English/Arabic), a sidebar
   toolbox of block types, a live-editable canvas, and a real-CSS preview */
.blocks-i18n-summary{font-size:.85rem;color:var(--ink-soft);margin:6px 0 10px}
.blocks-i18n-actions{display:flex;gap:.6rem}
.btn-danger-ghost{background:#fff;border:1px solid rgba(217,60,60,.35);color:var(--danger)}
.btn-danger-ghost:hover{background:var(--danger);border-color:var(--danger);color:#fff}

.bs-overlay{position:fixed;inset:0;background:rgba(8,12,18,.6);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:.25s;z-index:90;display:grid;place-items:center;padding:18px}
.bs-overlay.open{opacity:1;visibility:visible}
.bs-modal{background:#fff;border-radius:18px;width:min(1180px,98vw);height:92vh;display:flex;flex-direction:column;box-shadow:var(--shadow);overflow:hidden}
.bs-head{display:flex;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid var(--line);flex:none}
.bs-title{flex:none;margin-inline-end:auto;font-size:1.05rem}
.bs-lang-tabs,.bs-mode-tabs{display:flex;gap:2px;background:var(--paper);border-radius:10px;padding:3px;flex:none}
.bs-tab{font-size:.85rem;font-weight:600;padding:.5em 1em;border-radius:8px;border:none;background:none;color:var(--ink-soft);cursor:pointer;transition:.15s}
.bs-tab.active{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.bs-tab:hover:not(.active){color:var(--ink)}

.bs-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 20px;border-bottom:1px solid var(--line);background:var(--paper);flex:none;position:relative}

.bs-body{flex:1;display:grid;grid-template-columns:200px 1fr;min-height:0}
.bs-sidebar{border-inline-end:1px solid var(--line);padding:16px 12px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.bs-sidebar-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);padding:0 .5em 6px}
.bs-type-btn{text-align:start;font-size:.88rem;font-weight:600;padding:.6em .8em;border-radius:8px;border:1px solid transparent;background:none;color:var(--ink);cursor:pointer;transition:.15s}
.bs-type-btn:hover{background:var(--sky-soft);color:var(--sky-deep)}

.bs-canvas{overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:12px}
.bs-empty-hint{padding:40px 0;text-align:center}
.bs-preview-frame{width:100%;height:100%;border:0;grid-column:1/-1}

.bs-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;flex:none}
.bs-foot .btn-primary{width:auto;padding:.6em 1.8em}

@media(max-width:860px){
  .bs-modal{height:96vh}
  .bs-body{grid-template-columns:1fr}
  .bs-sidebar{border-inline-end:none;border-bottom:1px solid var(--line);flex-direction:row;flex-wrap:wrap;padding:10px 12px}
  .bs-sidebar-title{display:none}
}

/* toggled via classList (not the [hidden] attribute) so it reliably wins
   over this file's own display:flex rules on the same elements — declared
   last so equal-specificity source order settles it */
.bs-hidden{display:none}

/* block cards inside the studio canvas (.bs-canvas already provides the
   flex/gap layout) — full inline editing, not a further nested popup, so
   every effect is visible as you type */
.block-row{border:1px solid var(--line);border-radius:10px;padding:10px}
.block-row-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.block-type-badge{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--sky-deep);background:var(--sky-soft);border-radius:999px;padding:.25em .8em}
.block-row-actions{display:flex;gap:4px;margin-inline-start:auto}
.block-row.drag-over{border-color:var(--sky);box-shadow:0 0 0 2px var(--sky-soft)}
.block-row input[type="text"],.block-row textarea,.block-row input[type="number"]{width:100%;border:1px solid var(--line);border-radius:8px;padding:.55em .8em;font-family:inherit;font-size:.92rem;background:#fff;color:var(--ink);outline:none}
.block-row textarea{min-height:80px;resize:vertical}
.block-row input[type="text"]:focus,.block-row textarea:focus{border-color:var(--sky);box-shadow:0 0 0 3px var(--sky-soft)}

.drag-handle{width:26px;height:26px;border:none;background:none;color:var(--ink-soft);cursor:grab;display:grid;place-items:center;flex:none}
.drag-handle:hover{color:var(--ink)}
.drag-handle svg{width:16px;height:16px}

.block-img-row{display:flex;align-items:center;gap:10px}
.block-img-prev{width:64px;height:48px;border-radius:8px;object-fit:cover;background:var(--paper);border:1px solid var(--line);flex:none;cursor:pointer;transition:border-color .2s}
.block-img-prev:hover{border-color:var(--sky)}
.fmt-btn{min-width:28px;height:26px;padding:0 .5em;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font-size:.8rem;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;justify-content:center}
.fmt-btn:hover{background:#fff;border-color:var(--sky)}
.fmt-btn svg{width:15px;height:15px}
.fmt-color{width:28px;height:26px;padding:1px;border:1px solid var(--line);border-radius:6px;cursor:pointer;background:#fff}
.fmt-size{height:26px;border:1px solid var(--line);border-radius:6px;font-size:.78rem;background:#fff;color:var(--ink);padding:0 .3em}
.icon-popover{position:absolute;top:calc(100% + 6px);left:0;z-index:95;display:grid;grid-template-columns:repeat(6,32px);gap:4px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;box-shadow:var(--shadow);max-width:260px}
.icon-popover[hidden]{display:none}
.icon-pick-opt{width:32px;height:32px;border:1px solid transparent;border-radius:8px;background:none;display:grid;place-items:center;cursor:pointer;color:var(--ink-soft);transition:.15s}
.icon-pick-opt:hover{background:var(--sky-soft);color:var(--sky-deep);border-color:var(--sky)}
.icon-pick-opt svg{width:18px;height:18px}
.inline-icon{display:inline-flex;vertical-align:-.15em}
.inline-icon svg{width:1em;height:1em}

/* rich-text (contenteditable) block body — same look/feel as the plain
   textareas it replaces, so old and new blocks stay visually consistent */
.rte{width:100%;min-height:80px;border:1px solid var(--line);border-radius:8px;padding:.55em .8em;font-family:inherit;font-size:.92rem;background:#fff;color:var(--ink);outline:none}
.rte:focus{border-color:var(--sky);box-shadow:0 0 0 3px var(--sky-soft)}
.rte a{color:var(--sky-deep)}

/* table block editor */
.table-size-row{display:flex;align-items:flex-end;gap:14px;margin-bottom:10px;flex-wrap:wrap}
.table-size-row label{font-size:.78rem;color:var(--ink-soft);display:flex;flex-direction:column;gap:4px}
.table-size-row input[type="number"]{width:70px;border:1px solid var(--line);border-radius:8px;padding:.4em .6em;font-family:inherit}
.block-table-edit{width:100%;border-collapse:collapse}
.block-table-edit td{border:1px solid var(--line);padding:6px;vertical-align:top}
.cell-color{width:22px;height:20px;padding:0;border:1px solid var(--line);border-radius:5px;cursor:pointer;margin-bottom:4px}
.cell-rte{min-height:50px;font-size:.85rem}

/* icon-row block editor */
.icon-row-edit{display:flex;flex-direction:column;gap:8px}
.icon-row-item{display:flex;align-items:center;gap:8px}
.icon-row-item input[type="text"]{flex:1}
.icon-pick-trigger{width:36px;height:36px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--sky);display:grid;place-items:center;cursor:pointer;flex:none}
.icon-pick-trigger svg{width:18px;height:18px}

/* columns block editor */
.columns-edit{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.column-slot-tabs{display:flex;gap:4px;margin-bottom:6px}
.tab-btn{font-size:.76rem;padding:.3em .8em;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink-soft);cursor:pointer}
.tab-btn.active{background:var(--sky);color:#fff;border-color:var(--sky)}
@media(max-width:640px){.columns-edit{grid-template-columns:1fr}}

/* callout block editor */
.callout-color-row{margin-bottom:8px}
.callout-color-row label{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--ink-soft)}
.callout-color{width:26px;height:24px;padding:1px;border:1px solid var(--line);border-radius:6px;cursor:pointer}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;
  padding:.9em 1.4em;border-radius:12px;font-size:.92rem;font-weight:500;opacity:0;transition:.3s;z-index:60;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--danger)}

.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:860px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;inset-inline-start:0;top:0;z-index:40;transform:translateX(-100%);transition:transform .3s;width:256px}
  [dir="rtl"] .sidebar{transform:translateX(100%)}
  .sidebar.open{transform:none}
  .content{padding:20px}
  .grid-2{grid-template-columns:1fr}
  #menuBtn{display:grid}
}

/* ============================================================
   RTL (Arabic)
   ============================================================ */
[dir="rtl"] body{font-family:"Cairo","Hanken Grotesk",system-ui,sans-serif}
[dir="rtl"] *{font-family:"Cairo",sans-serif !important;font-style:normal !important}