/* ============================================================
   Sulaiman Portfolio — Admin Panel Styles
   ============================================================ */
:root{
  --adm-bg:#141416;
  --adm-panel:#1c1c1f;
  --adm-panel2:#232327;
  --adm-border:#33333a;
  --adm-accent:#ff5b2e;
  --adm-accent2:#4dabf7;
  --adm-text:#eee;
  --adm-text-dim:#9a9aa1;
  --adm-radius:10px;
}

/* ---------- Admin Portal trigger inside offcanvas ---------- */
.admin-portal-trigger{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:transparent;
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  padding:8px 16px;
  border-radius:30px;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.5px;
  cursor:pointer;
  transition:.25s;
}
.admin-portal-trigger:hover{ background:var(--adm-accent); border-color:var(--adm-accent); }

/* ---------- Generic overlay ----------
   NOTE: the site's own 9-dot slide-out menu (.twoffcanvas) uses
   z-index:999999, which used to sit ON TOP of this overlay/login box
   and the admin dock, making it impossible to see or use the admin
   panel while the menu was open. Every admin z-index below is now
   pushed above that (2,000,000+) so the admin UI always wins, while
   the menu itself stays visible/clickable in the space the dock
   doesn't cover — exactly as intended for editing it with Free Editor. */
.adm-overlay{
  position:fixed; inset:0; background:rgba(10,10,12,.72);
  z-index:2000000; display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(3px);
}
.adm-hidden{ display:none !important; }

/* ---------- Login modal ---------- */
.adm-login-box{
  width:340px; max-width:92vw; background:var(--adm-panel); border:1px solid var(--adm-border);
  border-radius:var(--adm-radius); padding:28px 26px; color:var(--adm-text);
  font-family:Arial,Helvetica,sans-serif; box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.adm-login-box h3{ margin:0 0 4px; font-size:18px; }
.adm-login-box p{ margin:0 0 18px; font-size:12.5px; color:var(--adm-text-dim); }
.adm-pass-wrap{ position:relative; margin-bottom:14px; }
.adm-pass-wrap input{
  width:100%; box-sizing:border-box; background:var(--adm-panel2); border:1px solid var(--adm-border);
  color:#fff; padding:11px 40px 11px 12px; border-radius:7px; font-size:14px;
}
.adm-pass-wrap input:focus{ outline:none; border-color:var(--adm-accent); }
.adm-eye{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  cursor:pointer; color:var(--adm-text-dim); font-size:17px; user-select:none;
}
.adm-eye:hover{ color:#fff; }
.adm-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--adm-accent); color:#fff; border:none; padding:10px 16px;
  border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; width:100%;
  text-transform:uppercase; letter-spacing:.4px; transition:.2s;
}
.adm-btn:hover{ filter:brightness(1.08); }
.adm-btn.adm-btn-ghost{ background:transparent; border:1px solid var(--adm-border); color:var(--adm-text); }
.adm-btn.adm-btn-sm{ padding:6px 10px; font-size:11.5px; width:auto; }
.adm-btn.adm-btn-danger{ background:#d9483b; }
.adm-btn.adm-btn-block{ width:100%; margin-top:4px; }
.adm-error{ color:#ff6b6b; font-size:12px; margin:-6px 0 12px; min-height:14px; }
.adm-close-x{
  position:absolute; top:10px; right:12px; background:none; border:none; color:var(--adm-text-dim);
  font-size:20px; cursor:pointer;
}

/* ---------- Floating launcher (after login) ---------- */
#admFab{
  position:fixed; bottom:22px; right:22px; z-index:2000001;
  width:56px; height:56px; border-radius:50%; background:var(--adm-accent);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:24px;
  box-shadow:0 8px 24px rgba(0,0,0,.4); cursor:pointer; border:none;
}
#admFab:hover{ filter:brightness(1.08); }
#admFab.adm-fab-left{ right:auto; left:22px; }

/* ---------- Main dock panel ---------- */
#admDock{
  position:fixed; top:0; right:0; height:100vh; width:340px; max-width:92vw;
  background:var(--adm-panel); border-left:1px solid var(--adm-border);
  z-index:2000001; color:var(--adm-text); font-family:Arial,Helvetica,sans-serif;
  display:flex; flex-direction:column; box-shadow:-10px 0 40px rgba(0,0,0,.4);
  transform:translateX(100%); transition:transform .28s ease;
}
#admDock.adm-open{ transform:translateX(0); }
/* ---------- Dock docked to the LEFT instead of the right ----------
   Toggled by the arrows button in the dock header, so the panel can be
   moved out of the way of whichever side of the page needs editing. */
#admDock.adm-dock-left{
  left:0; right:auto; border-left:none; border-right:1px solid var(--adm-border);
  box-shadow:10px 0 40px rgba(0,0,0,.4); transform:translateX(-100%);
}
#admDock.adm-dock-left.adm-open{ transform:translateX(0); }
.adm-dock-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--adm-border); gap:8px;
}
.adm-dock-head-left{ display:flex; align-items:center; flex-wrap:wrap; gap:0; min-width:0; }
.adm-dock-head-actions{ display:flex; align-items:center; gap:6px; flex:none; }
.adm-dock-side-btn{
  background:transparent; border:1px solid var(--adm-border); color:var(--adm-text-dim);
  width:28px; height:28px; border-radius:6px; cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; font-size:14px; transition:.2s;
}
.adm-dock-side-btn:hover{ color:#fff; border-color:var(--adm-accent); }
.adm-dock-head strong{ font-size:14px; letter-spacing:.3px; }
.adm-status{ font-size:10.5px; padding:3px 8px; border-radius:20px; margin-left:8px; }
.adm-status.online{ background:#1f4d2b; color:#7be495; }
.adm-status.offline{ background:#4d1f1f; color:#ff9d9d; }
.adm-dock-body{ flex:1; overflow-y:auto; padding:14px 16px 90px; }
.adm-dock-body::-webkit-scrollbar{ width:6px; }
.adm-dock-body::-webkit-scrollbar-thumb{ background:#3a3a40; border-radius:6px; }

.adm-section{ border:1px solid var(--adm-border); border-radius:var(--adm-radius); margin-bottom:12px; background:var(--adm-panel2); overflow:hidden; }
.adm-section-head{
  display:flex; align-items:center; justify-content:space-between; padding:12px 14px; cursor:pointer;
  font-size:13px; font-weight:600;
}
.adm-section-head i{ color:var(--adm-accent); margin-right:6px; }
.adm-section-body{ padding:0 14px 14px; display:none; font-size:12.5px; }
.adm-section.adm-active .adm-section-body{ display:block; }
.adm-section.adm-active .adm-caret{ transform:rotate(90deg); }
.adm-caret{ transition:.2s; color:var(--adm-text-dim); }

.adm-row{ margin-bottom:10px; }
.adm-row label{ display:block; font-size:11px; color:var(--adm-text-dim); margin-bottom:4px; text-transform:uppercase; letter-spacing:.4px; }
.adm-row input[type=text], .adm-row input[type=number], .adm-row input[type=url],
.adm-row select, .adm-row textarea{
  width:100%; box-sizing:border-box; background:var(--adm-bg); border:1px solid var(--adm-border);
  color:#fff; padding:8px 9px; border-radius:6px; font-size:12.5px;
}
.adm-row textarea{ min-height:60px; resize:vertical; }
.adm-row input[type=color]{ width:44px; height:30px; border:1px solid var(--adm-border); background:var(--adm-bg); border-radius:6px; padding:2px; }
.adm-row input[type=range]{ width:100%; }
.adm-flex{ display:flex; gap:8px; }
.adm-flex > *{ flex:1; }
.adm-toggle-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; font-size:12.5px; font-weight:600; }
.adm-switch{ position:relative; width:42px; height:22px; }
.adm-switch input{ opacity:0; width:0; height:0; }
.adm-slider{ position:absolute; cursor:pointer; inset:0; background:#444; border-radius:22px; transition:.2s; }
.adm-slider:before{ content:""; position:absolute; height:16px; width:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.adm-switch input:checked + .adm-slider{ background:var(--adm-accent); }
.adm-switch input:checked + .adm-slider:before{ transform:translateX(20px); }

.adm-hint{ font-size:11px; color:var(--adm-text-dim); line-height:1.5; margin:6px 0 10px; }
.adm-mini-list{ list-style:none; margin:0 0 10px; padding:0; }
.adm-mini-list li{ display:flex; align-items:center; gap:8px; padding:7px 8px; background:var(--adm-bg); border-radius:6px; margin-bottom:6px; }
.adm-mini-list li i{ color:var(--adm-accent); }
.adm-mini-list li input{ flex:1; background:transparent; border:none; color:#fff; font-size:12px; }
.adm-mini-list li input:focus{ outline:none; }
.adm-mini-list li button{ background:none; border:none; color:#ff6b6b; cursor:pointer; font-size:14px; }

/* ---------- Live-edit affordances on the page itself ---------- */
.adm-mode-active [data-adm-editable]:hover,
.adm-mode-active.adm-free [data-adm-el]:hover{
  outline:2px dashed var(--adm-accent2) !important;
  outline-offset:2px;
  cursor:pointer !important;
}
.adm-selected{
  outline:2px solid var(--adm-accent) !important;
  outline-offset:2px;
}
.adm-hover-target{
  outline:2px dashed var(--adm-accent2) !important;
  outline-offset:2px;
  cursor:pointer !important;
}
.adm-hidden-by-admin{ display:none !important; }
.adm-unclickable{ pointer-events:none !important; cursor:default !important; }
[data-adm-added]{ position:relative; }

/* floating quick-toolbar attached to a selected element */
#admQuickPanel{
  position:absolute; z-index:2000002; background:var(--adm-panel); border:1px solid var(--adm-border);
  border-radius:10px; padding:12px; width:280px; color:var(--adm-text); font-family:Arial,Helvetica,sans-serif;
  box-shadow:0 12px 30px rgba(0,0,0,.5); font-size:12.5px;
}
#admQuickPanel h4{ margin:0 0 8px; font-size:12.5px; color:var(--adm-accent); text-transform:uppercase; letter-spacing:.5px; }
#admQuickPanel .adm-row{ margin-bottom:8px; }
#admQuickPanel .adm-close-x{ top:6px; right:8px; font-size:16px; }

.adm-toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:#1f1f22; color:#fff; padding:10px 18px; border-radius:30px; font-size:12.5px;
  z-index:2000003; border:1px solid var(--adm-border); box-shadow:0 8px 24px rgba(0,0,0,.4);
  font-family:Arial,Helvetica,sans-serif;
}

.adm-img-drop{
  border:1px dashed var(--adm-border); border-radius:8px; padding:14px; text-align:center;
  font-size:11.5px; color:var(--adm-text-dim); cursor:pointer; margin-bottom:10px;
}
.adm-img-drop:hover{ border-color:var(--adm-accent); color:#fff; }

/* ---------- No-color-change checkbox ---------- */
.adm-checkbox-row{ margin-bottom:10px; }
.adm-checkbox-label{
  display:flex; align-items:center; gap:7px; font-size:12px; color:var(--adm-text);
  text-transform:none; letter-spacing:0; cursor:pointer;
}
.adm-checkbox-label input{ width:auto; margin:0; }

/* ---------- Media Library ---------- */
.adm-media-item{
  display:flex; align-items:center; gap:9px; padding:7px; background:var(--adm-bg);
  border-radius:6px; margin-bottom:6px;
}
.adm-media-thumb{
  width:44px; height:44px; object-fit:cover; border-radius:5px; flex-shrink:0; background:#111;
}
.adm-media-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.adm-media-name{
  font-size:11px; color:var(--adm-text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.adm-media-info .adm-flex{ gap:6px; }
.adm-media-info .adm-btn-sm{ padding:5px 8px; }

/* ---------- Contact form status (renders on the live site itself) ---------- */
.adm-contact-status{
  font-size:12.5px; margin-top:10px; min-height:14px; color:#fff; font-family:Arial,Helvetica,sans-serif;
}

@media (max-width:600px){
  #admDock{ width:100vw; }
}

/* ---------- Resize handles (Text Editor / Free Editor box resize) ---------- */
.adm-resize-handle{
  position:absolute; width:12px; height:12px; background:var(--adm-accent2);
  border:2px solid #fff; border-radius:3px; z-index:2000004; box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.adm-resize-n, .adm-resize-s{ cursor:ns-resize; }
.adm-resize-e, .adm-resize-w{ cursor:ew-resize; }
.adm-resize-ne, .adm-resize-sw{ cursor:nesw-resize; }
.adm-resize-nw, .adm-resize-se{ cursor:nwse-resize; }

/* ---------- Animation controls ---------- */
.adm-row select#admQpAos,
.adm-row select#admQpFont{ cursor:pointer; }