/* ============================================================
   Ejari Virtual - Admin CSS
   ============================================================ */

:root {
  --admin-bg: #0e1117;
  --admin-card: #161b27;
  --admin-border: #1e2740;
  --admin-accent: #3b82f6;
  --royal-700: #1e3a8a;
  --gold: #FDB913;
  --whatsapp: #25D366;
  --font-body: 'Inter', sans-serif;
  --font-heading: 'Outfit', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-body); color: #e2e8f0; background: var(--admin-bg); line-height: 1.5; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }
img { max-width: 100%; display: block; }

/* -- Login ---------------------------------------------------- */
.admin-login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--admin-bg); }
.login-card { background: var(--admin-card); border: 1px solid var(--admin-border); border-radius: 1.5rem; padding: 2.5rem; width: 100%; max-width: 26rem; box-shadow: 0 25px 60px rgba(0,0,0,.4); }
.login-logo-wrap { text-align: center; margin-bottom: 1.25rem; }
.login-logo { max-height: 3rem; margin: 0 auto; background: #fff; padding: .75rem 1.5rem; border-radius: .75rem; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.login-subtitle { text-align: center; color: #6b7280; font-size: .875rem; margin-bottom: 2.5rem; }
.login-form { display: flex; flex-direction: column; gap: 1.25rem; }
.login-error { display: flex; align-items: center; gap: .5rem; color: #f87171; font-size: .75rem; margin-top: .5rem; }
.login-footer { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--admin-border); text-align: center; }
.login-footer p { font-size: .75rem; color: #4b5563; margin-bottom: .25rem; }
.login-footer code { color: #9ca3af; background: rgba(255,255,255,.05); padding: .125rem .5rem; border-radius: .25rem; }

/* -- Layout --------------------------------------------------- */
.admin-body { min-height: 100vh; background: var(--admin-bg); }
.admin-layout { display: flex; min-height: 100vh; }

/* -- Sidebar --------------------------------------------------- */
.admin-sidebar { width: 15rem; background: var(--admin-card); border-right: 1px solid var(--admin-border); display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 100; }
.admin-brand { padding: 1.5rem; border-bottom: 1px solid var(--admin-border); }
.admin-logo { height: 2rem; object-fit: contain; filter: brightness(0) invert(1); }
.admin-nav { flex-grow: 1; padding: 1rem; display: flex; flex-direction: column; gap: .25rem; overflow-y: auto; }
.admin-nav-item { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-radius: .75rem; color: #6b7280; font-size: .875rem; font-weight: 500; transition: all .2s; }
.admin-nav-item:hover { background: rgba(255,255,255,.05); color: #e2e8f0; }
.admin-nav-item.active { background: rgba(30,58,138,.3); color: #fff; border: 1px solid rgba(30,58,138,.5); }
.admin-sidebar-footer { padding: 1rem; border-top: 1px solid var(--admin-border); display: flex; flex-direction: column; gap: .25rem; }
.admin-logout { color: #ef4444 !important; }
.admin-logout:hover { background: rgba(239,68,68,.1) !important; }

/* -- Main ------------------------------------------------------ */
.admin-main { margin-left: 15rem; flex-grow: 1; display: flex; flex-direction: column; min-height: 100vh; }
.admin-topbar { padding: 1.25rem 2rem; border-bottom: 1px solid var(--admin-border); display: flex; justify-content: space-between; align-items: center; background: var(--admin-card); position: sticky; top: 0; z-index: 10; }
.admin-topbar-left { display: flex; align-items: center; gap: 1rem; }
.admin-page-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; color: #fff; }
.admin-badge { background: rgba(59,130,246,.2); color: #93c5fd; padding: .25rem .75rem; border-radius: 9999px; font-size: .75rem; font-weight: 700; border: 1px solid rgba(59,130,246,.3); }
.admin-content { padding: 2rem; flex-grow: 1; }

/* -- Cards ---------------------------------------------------- */
.admin-card { background: var(--admin-card); border: 1px solid var(--admin-border); border-radius: 1rem; overflow: hidden; }
.admin-card-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--admin-border); }
.admin-card-header h2 { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: #e2e8f0; }
.admin-link { color: var(--admin-accent); font-size: .875rem; font-weight: 600; transition: color .2s; }
.admin-link:hover { color: #93c5fd; }

/* -- Dashboard Stats ------------------------------------------ */
.dashboard-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 1.5rem; margin-bottom: 1.5rem; }
.stat-card { background: var(--admin-card); border: 1px solid var(--admin-border); border-radius: 1rem; padding: 1.5rem; display: flex; align-items: center; gap: 1rem; }
.stat-icon { width: 3rem; height: 3rem; border-radius: .75rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.stat-blue { background: rgba(59,130,246,.15); color: #60a5fa; }
.stat-green { background: rgba(34,197,94,.15); color: #4ade80; }
.stat-gold { background: rgba(253,185,19,.15); color: var(--gold); }
.stat-purple { background: rgba(168,85,247,.15); color: #c084fc; }
.stat-num { font-family: var(--font-heading); font-weight: 900; font-size: 1.875rem; color: #fff; }
.stat-card p { color: #6b7280; font-size: .875rem; }
.mt-6 { margin-top: 1.5rem; }

/* -- Table ---------------------------------------------------- */
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.admin-table thead { background: rgba(255,255,255,.03); }
.admin-table th { padding: .75rem 1rem; text-align: left; color: #4b5563; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--admin-border); white-space: nowrap; }
.admin-table td { padding: .875rem 1rem; color: #d1d5db; border-bottom: 1px solid rgba(30,39,64,.5); vertical-align: middle; }
.admin-table tr:hover td { background: rgba(255,255,255,.02); }
.msg-cell { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -- Status Badges -------------------------------------------- */
.status-badge { display: inline-flex; align-items: center; padding: .25rem .625rem; border-radius: 9999px; font-size: .6875rem; font-weight: 700; }
.status-new       { background: rgba(59,130,246,.15); color: #60a5fa; }
.status-contacted { background: rgba(253,185,19,.15); color: var(--gold); }
.status-converted { background: rgba(34,197,94,.15); color: #4ade80; }
.status-lost      { background: rgba(239,68,68,.15); color: #f87171; }
.status-select { background: var(--admin-bg); border: 1px solid var(--admin-border); color: #d1d5db; border-radius: .5rem; padding: .25rem .5rem; font-size: .75rem; outline: none; cursor: pointer; }

/* -- Buttons --------------------------------------------------- */
.btn-admin-primary { display: inline-flex; align-items: center; gap: .5rem; background: var(--royal-700); color: #fff; font-weight: 700; padding: .625rem 1.25rem; border-radius: .75rem; transition: all .2s; font-size: .875rem; border: none; cursor: pointer; }
.btn-admin-primary:hover { background: #1d3493; }
.btn-admin-ghost { display: inline-flex; align-items: center; gap: .5rem; background: transparent; color: #6b7280; border: 1px solid var(--admin-border); font-weight: 600; padding: .625rem 1.25rem; border-radius: .75rem; transition: all .2s; font-size: .875rem; cursor: pointer; }
.btn-admin-ghost:hover { color: #e2e8f0; border-color: #374151; }
.btn-admin-danger { display: inline-flex; align-items: center; gap: .5rem; background: rgba(239,68,68,.12); color: #f87171; border: 1px solid rgba(239,68,68,.2); font-weight: 700; padding: .5rem 1rem; border-radius: .75rem; transition: all .2s; font-size: .875rem; cursor: pointer; }
.btn-admin-danger:hover { background: rgba(239,68,68,.2); }
.btn-admin-icon { width: 2rem; height: 2rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: .5rem; display: inline-flex; align-items: center; justify-content: center; color: #9ca3af; font-size: .75rem; transition: all .2s; cursor: pointer; }
.btn-admin-icon:hover { background: rgba(255,255,255,.1); color: #e2e8f0; }
.btn-admin-icon--red:hover { background: rgba(239,68,68,.15); color: #f87171; border-color: rgba(239,68,68,.2); }
.action-btns { display: flex; gap: .5rem; }
.admin-actions { display: flex; gap: .75rem; }

/* -- Toggle ---------------------------------------------------- */
.toggle { position: relative; display: inline-block; width: 2.5rem; height: 1.375rem; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #374151; border-radius: 9999px; transition: .3s; }
.toggle-slider::before { content: ''; position: absolute; height: 1rem; width: 1rem; left: .1875rem; bottom: .1875rem; background: #fff; border-radius: 50%; transition: .3s; }
.toggle input:checked + .toggle-slider { background: var(--admin-accent); }
.toggle input:checked + .toggle-slider::before { transform: translateX(1.125rem); }

/* -- Modal ---------------------------------------------------- */
.admin-modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; overflow-y: auto; }
.admin-modal-inner { background: var(--admin-card); border: 1px solid var(--admin-border); border-radius: 1.25rem; width: 100%; max-width: 36rem; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 25px 60px rgba(0,0,0,.5); }
.admin-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--admin-border); flex-shrink: 0; }
.admin-modal-header h3 { font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem; color: #fff; }
.modal-close { width: 2rem; height: 2rem; background: rgba(255,255,255,.05); border: none; border-radius: .5rem; color: #6b7280; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s; }
.modal-close:hover { background: rgba(239,68,68,.15); color: #f87171; }
.admin-modal-body { padding: 1.5rem; overflow-y: auto; flex: 1; }
.admin-modal-footer { display: flex; justify-content: flex-end; gap: .75rem; padding: 1.25rem 1.5rem; border-top: 1px solid var(--admin-border); flex-shrink: 0; background: var(--admin-card); border-radius: 0 0 1.25rem 1.25rem; }

/* -- Form ------------------------------------------------------ */
.admin-form-group { display: flex; flex-direction: column; gap: .375rem; }
.admin-form-group label { font-size: .75rem; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; }
.admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.admin-col-2 { grid-column: span 2; }
.admin-input {
  width: 100%; padding: .625rem 1rem;
  border-radius: .5rem; background: var(--admin-bg);
  border: 1px solid var(--admin-border);
  color: #e2e8f0; font-size: .875rem; outline: none;
  transition: border-color .2s; font-family: inherit;
}
.admin-input:focus { border-color: var(--admin-accent); box-shadow: 0 0 0 2px rgba(59,130,246,.15); }
.admin-input::placeholder { color: #4b5563; }
.admin-textarea { min-height: 8rem; resize: vertical; }
.toggle-label { display: flex; align-items: center; gap: .75rem; color: #d1d5db; font-size: .875rem; font-weight: 500; cursor: pointer; }
.toggle-label input { width: 1rem; height: 1rem; }

/* -- Alert ----------------------------------------------------- */
.admin-alert { display: flex; align-items: center; gap: .75rem; padding: .75rem 1.25rem; border-radius: .75rem; font-size: .875rem; font-weight: 600; margin-bottom: 1.5rem; }
.admin-alert--success { background: rgba(34,197,94,.12); color: #4ade80; border: 1px solid rgba(34,197,94,.2); }

/* -- Settings Form -------------------------------------------- */
.admin-settings-form .admin-card { margin-bottom: 0; }

/* -- Responsive ------------------------------------------------ */
.admin-hamburger { display: none; background: rgba(255,255,255,.05); border: 1px solid var(--admin-border); color: #9ca3af; width: 2.25rem; height: 2.25rem; border-radius: .5rem; align-items: center; justify-content: center; font-size: 1rem; cursor: pointer; flex-shrink: 0; transition: all .2s; }
.admin-hamburger:hover { background: rgba(255,255,255,.1); color: #e2e8f0; }
.admin-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); z-index: 99; }

@media (max-width: 768px) {
  .admin-hamburger { display: inline-flex; }
  .admin-sidebar { transform: translateX(-100%); transition: transform .3s ease; z-index: 100; }
  .admin-sidebar.sidebar-open { transform: translateX(0); }
  .admin-sidebar.sidebar-open ~ .admin-sidebar-overlay { display: block; }
  .admin-main { margin-left: 0; }
  .admin-topbar { padding: 1rem 1.25rem; }
  .admin-content { padding: 1rem; }
  .admin-form-grid { grid-template-columns: 1fr; }
  .admin-col-2 { grid-column: span 1; }
  .dashboard-stats { grid-template-columns: 1fr 1fr; gap: 1rem; }
}

/* -- Page Editor Tabs ----------------------------------------- */
.page-editor-tabs { display: flex; flex-direction: column; gap: 1.5rem; }
.pe-tab-nav { display: flex; gap: .5rem; flex-wrap: wrap; background: var(--admin-card); border: 1px solid var(--admin-border); border-radius: 1rem; padding: .75rem; }
.pe-tab { display: inline-flex; align-items: center; gap: .5rem; padding: .625rem 1.125rem; border-radius: .625rem; background: transparent; border: none; color: #6b7280; font-size: .8125rem; font-weight: 600; cursor: pointer; transition: all .2s; font-family: inherit; }
.pe-tab:hover { background: rgba(255,255,255,.06); color: #e2e8f0; }
.pe-tab--active { background: rgba(30,58,138,.35); color: #93c5fd; border: 1px solid rgba(59,130,246,.3); }
.pe-panel { display: none; flex-direction: column; gap: 1.5rem; }
.pe-panel--active { display: flex; }
.pe-hint { font-size: .75rem; color: #4b5563; font-style: italic; }
.pe-field-hint { font-size: .7rem; color: #4b5563; margin-top: .2rem; }

/* -- Modal Tabs ------------------------------------------ */
.blog-modal-tabs, .svc-modal-tabs { display: flex; gap: .375rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--admin-border); background: rgba(255,255,255,.02); flex-wrap: wrap; }
.bmt-tab, .smt-tab { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: .5rem; background: transparent; border: none; color: #6b7280; font-size: .8125rem; font-weight: 600; cursor: pointer; transition: all .2s; font-family: inherit; }
.bmt-tab:hover, .smt-tab:hover { background: rgba(255,255,255,.06); color: #e2e8f0; }
.bmt-tab--active, .smt-tab--active { background: rgba(30,58,138,.35); color: #93c5fd; border: 1px solid rgba(59,130,246,.3); }
.bmt-panel, .smt-panel { display: none; }
.bmt-panel--active, .smt-panel--active { display: block; }

/* -- SERP Preview --------------------------------------------- */
.serp-preview { background: #fff; border-radius: .75rem; padding: 1.25rem; font-family: Arial, sans-serif; }
.serp-url { font-size: .75rem; color: #202124; margin-bottom: .25rem; }
.serp-title { font-size: 1.125rem; color: #1a0dab; font-weight: 400; margin-bottom: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.serp-desc { font-size: .875rem; color: #4d5156; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.seo-char-count { font-size: .7rem; color: #4b5563; margin-top: .25rem; text-align: right; transition: color .2s; }

/* -- Rich Content Tab ----------------------------------------- */
.rich-info-banner { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem; background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.2); border-radius: .75rem; color: #93c5fd; font-size: .875rem; line-height: 1.5; margin-bottom: 1.5rem; }
.rich-info-banner i { font-size: 1.25rem; color: #60a5fa; margin-top: .125rem; }
.rich-label { font-size: .8125rem; font-weight: 600; color: #e2e8f0; margin-bottom: .5rem; display: block; }
.rich-toolbar { display: flex; gap: .25rem; flex-wrap: wrap; background: rgba(0,0,0,.2); padding: .5rem; border: 1px solid var(--admin-border); border-bottom: none; border-radius: .75rem .75rem 0 0; }
.rich-toolbar-btn { background: var(--admin-card); border: 1px solid var(--admin-border); color: #e2e8f0; padding: .25rem .75rem; font-size: .75rem; border-radius: .375rem; cursor: pointer; transition: all .2s; }
.rich-toolbar-btn:hover { background: rgba(255,255,255,.1); }
.rich-textarea { width: 100%; min-height: 250px; background: var(--admin-input-bg); border: 1px solid var(--admin-border); border-radius: 0 0 .75rem .75rem; padding: 1rem; color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .875rem; line-height: 1.5; resize: vertical; margin-bottom: 0; box-sizing: border-box; }
.rich-textarea:focus { outline: none; border-color: rgba(59,130,246,.5); box-shadow: 0 0 0 3px rgba(59,130,246,.1); }

/* -- SEO Manager -------------------------------------------- */
.seo-score-bar { background: var(--admin-card); border: 1px solid var(--admin-border); border-radius: 1rem; padding: 1.5rem; margin-bottom: 0; }
.seo-score-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.seo-score-label { font-weight: 600; color: #e2e8f0; font-size: .9rem; }
.seo-score-num { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; }
.seo-score-track { height: .5rem; background: rgba(255,255,255,.06); border-radius: 9999px; overflow: hidden; margin-bottom: 1rem; }
.seo-score-fill { height: 100%; border-radius: 9999px; transition: width .4s ease; }
.seo-checklist { display: flex; flex-wrap: wrap; gap: .5rem; }
.seo-check { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem; border-radius: 9999px; font-size: .6875rem; font-weight: 600; }
.seo-check--ok { background: rgba(74,222,128,.12); color: #4ade80; border: 1px solid rgba(74,222,128,.2); }
.seo-check--no { background: rgba(239,68,68,.1); color: #f87171; border: 1px solid rgba(239,68,68,.2); }
.seo-char-row { display: flex; align-items: center; gap: .5rem; margin-top: .375rem; }
.seo-char-bar-wrap { flex: 1; height: 3px; background: rgba(255,255,255,.06); border-radius: 9999px; overflow: hidden; }
.seo-char-bar { height: 100%; width: 0; border-radius: 9999px; transition: width .2s, background .2s; background: #3b82f6; }
.seo-char-count { font-size: .7rem; color: #6b7280; white-space: nowrap; }
.seo-sitemap-info { display: flex; flex-wrap: wrap; gap: 1rem; }
.sitemap-stat { display: flex; align-items: center; gap: .5rem; color: #9ca3af; font-size: .875rem; }
.sitemap-stat strong { color: #e2e8f0; }

.hidden { display: none !important; }