/* =============================================================================
   Albasrawie Admin — Cloudflare Inspired Layout & Ionic Components
   Brand Identity: Albasrawie Sky Blue (#7FC1FE) & Deep Navy (#031E4A)
   ========================================================================== */

:root {
  /* Albasrawie Brand Colors */
  --al-navy: #031E4A;
  --al-sky: #7FC1FE;
  --al-blue: #1D68BD;
  --al-blue-hover: #155196;
  --al-blue-subtle: rgba(29, 104, 189, 0.08);
  --al-sky-subtle: rgba(127, 193, 254, 0.16);

  /* Cloudflare Layout & Surface Tokens (Light Mode) */
  --cf-bg: #F8FAFC;
  --cf-surface: #FFFFFF;
  --cf-surface-2: #F1F5F9;
  --cf-surface-hover: #F1F5F9;
  --cf-border: #E2E8F0;
  --cf-border-strong: #CBD5E1;
  --cf-text: #0F172A;
  --cf-text-secondary: #475569;
  --cf-text-muted: #64748B;
  
  /* Status Colors */
  --cf-success: #10B981;
  --cf-success-subtle: rgba(16, 185, 129, 0.12);
  --cf-warning: #F59E0B;
  --cf-warning-subtle: rgba(245, 158, 11, 0.12);
  --cf-error: #EF4444;
  --cf-error-subtle: rgba(239, 68, 68, 0.12);
  --cf-info: #0284C7;
  --cf-info-subtle: rgba(2, 132, 199, 0.12);

  /* Ionic Framework Official Design Tokens — Albasrawie Palette */
  --ion-color-primary: #1D68BD;
  --ion-color-primary-rgb: 29, 104, 189;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-shade: #1858a1;
  --ion-color-primary-tint: #3477c4;

  --ion-color-secondary: #7FC1FE;
  --ion-color-secondary-rgb: 127, 193, 254;
  --ion-color-secondary-contrast: #031E4A;

  --ion-color-dark: #031E4A;
  --ion-color-dark-rgb: 3, 30, 74;
  --ion-color-dark-contrast: #ffffff;

  --ion-color-success: #10B981;
  --ion-color-success-rgb: 16, 185, 129;
  --ion-color-warning: #F59E0B;
  --ion-color-warning-rgb: 245, 158, 11;
  --ion-color-danger: #EF4444;
  --ion-color-danger-rgb: 239, 68, 68;

  --ion-font-family: 'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ion-background-color: var(--cf-bg);
  --ion-text-color: var(--cf-text);
  --ion-item-background: var(--cf-surface);
  --ion-border-color: var(--cf-border);

  /* Metrics & Accent Tints */
  --cf-card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
  --cf-dropdown-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* Layout dimensions */
  --cf-header-h: 3rem;     /* 48px */
  --cf-subbar-h: 0rem;
  --cf-side-w: 15rem;      /* 256px */
  --cf-side-collapsed-w: 3.75rem; /* 60px */

  /* Motion */
  --cf-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --cf-dur: 0.22s;
}

/* Dark Mode Tokens */
:root[data-theme="dark"] {
  --cf-bg: #070D18;
  --cf-surface: #0E1726;
  --cf-surface-2: #162235;
  --cf-surface-hover: #1E2D44;
  --cf-border: #1E2D44;
  --cf-border-strong: #2E3E56;
  --cf-text: #F8FAFC;
  --cf-text-secondary: #CBD5E1;
  --cf-text-muted: #94A3B8;
  --al-blue: #3B82F6;
  --al-blue-hover: #60A5FA;
  --al-blue-subtle: rgba(59, 130, 246, 0.16);
  --cf-card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
  --cf-dropdown-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cf-bg: #070D18;
    --cf-surface: #0E1726;
    --cf-surface-2: #162235;
    --cf-surface-hover: #1E2D44;
    --cf-border: #1E2D44;
    --cf-border-strong: #2E3E56;
    --cf-text: #F8FAFC;
    --cf-text-secondary: #CBD5E1;
    --cf-text-muted: #94A3B8;
    --al-blue: #3B82F6;
    --al-blue-hover: #60A5FA;
    --al-blue-subtle: rgba(59, 130, 246, 0.16);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cf-bg);
  color: var(--cf-text);
  font-family: var(--font, 'Hanken Grotesk', system-ui, -apple-system, sans-serif);
  font-size: 0.9375rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
code { font-size: 0.85em; background: var(--cf-surface-2); padding: 0.15em 0.4em; border-radius: 0.25rem; font-family: ui-monospace, monospace; }
:focus-visible { outline: 2px solid var(--al-blue); outline-offset: 2px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -999px; top: 0.5rem; background: var(--al-navy); color: #fff; padding: 0.5rem 0.9rem; border-radius: 0.375rem; z-index: 1000; }
.skip:focus { left: 0.5rem; }
.ico { flex: none; display: inline-block; vertical-align: middle; }

/* =============================================================================
   4. Buttons & Badges (Cloudflare Style)
   ========================================================================== */
.cf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: 0.375rem;
  transition: all var(--cf-dur) ease;
  white-space: nowrap;
}
.cf-btn--sm {
  font-size: 0.78rem;
  padding: 0.3rem 0.65rem;
}
.cf-btn--primary {
  background: var(--al-blue);
  color: #FFFFFF;
  border: 1px solid transparent;
}
.cf-btn--primary:hover {
  background: var(--al-blue-hover);
}
.cf-btn--secondary {
  background: var(--cf-surface);
  color: var(--cf-text);
  border: 1px solid var(--cf-border-strong);
}
.cf-btn--secondary:hover {
  background: var(--cf-surface-2);
}
.cf-btn--danger {
  background: var(--cf-error-subtle);
  color: var(--cf-error);
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.cf-btn--danger:hover {
  background: var(--cf-error);
  color: #FFFFFF;
}

/* =============================================================================
   5. Ionic Component: ion-toggle (Fluid iOS/Ionic Switch)
   ========================================================================== */
.ion-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  gap: 0.625rem;
}
.ion-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.ion-toggle__track {
  width: 44px;
  height: 24px;
  background-color: var(--cf-border-strong);
  border-radius: 9999px;
  position: relative;
  transition: background-color 0.22s var(--cf-ease);
  flex-shrink: 0;
}
.ion-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: #FFFFFF;
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.1);
  transition: transform 0.22s var(--cf-ease);
}
.ion-toggle input:checked + .ion-toggle__track {
  background-color: var(--al-blue);
}
.ion-toggle input:checked + .ion-toggle__track .ion-toggle__thumb {
  transform: translateX(20px);
}
.ion-toggle:active .ion-toggle__thumb {
  width: 24px;
}
.ion-toggle input:checked:active + .ion-toggle__track .ion-toggle__thumb {
  transform: translateX(16px);
}
.ion-toggle__label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--cf-text);
}

/* =============================================================================
   6. Ionic Component: ion-segment (Segmented Tabs / Filter Group)
   ========================================================================== */
.ion-segment {
  display: inline-flex;
  align-items: center;
  background: var(--cf-surface-2);
  border-radius: 0.5rem;
  padding: 0.2rem;
  gap: 0.15rem;
  border: 1px solid var(--cf-border);
}
.ion-segment__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--cf-text-secondary);
  transition: all var(--cf-dur) ease;
  white-space: nowrap;
}
.ion-segment__btn:hover {
  color: var(--cf-text);
}
.ion-segment__btn.is-active {
  background: var(--cf-surface);
  color: var(--al-blue);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.ion-segment__btn .tab-count {
  font-size: 0.72rem;
  padding: 0.1rem 0.4rem;
  border-radius: 9999px;
  background: var(--cf-surface-2);
  color: var(--cf-text-muted);
}
.ion-segment__btn.is-active .tab-count {
  background: var(--al-blue-subtle);
  color: var(--al-blue);
}

/* =============================================================================
   7. Ionic Component: ion-alert (Cards & Notice Banners)
   ========================================================================== */
.ion-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.45;
  margin-bottom: 1.25rem;
  border: 1px solid transparent;
}
.ion-alert .ico { flex: none; margin-top: 0.1rem; }
.ion-alert__content { flex: 1; }
.ion-alert__title { font-weight: 600; margin-bottom: 0.2rem; }
.ion-alert--info {
  background: var(--cf-info-subtle);
  border-color: rgba(2, 132, 199, 0.25);
  color: #0369A1;
}
.ion-alert--success {
  background: var(--cf-success-subtle);
  border-color: rgba(16, 185, 129, 0.25);
  color: #065F46;
}
.ion-alert--warning {
  background: var(--cf-warning-subtle);
  border-color: rgba(245, 158, 11, 0.25);
  color: #92400E;
}
.ion-alert--danger {
  background: var(--cf-error-subtle);
  border-color: rgba(239, 68, 68, 0.25);
  color: #991B1B;
}

/* Floating Toasts */
.toasts {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  box-shadow: var(--cf-dropdown-shadow);
  color: var(--cf-text);
  font-size: 0.85rem;
  animation: toastSlideIn 0.25s var(--cf-ease);
}
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.toast--success .ico { color: var(--cf-success); }
.toast--error .ico { color: var(--cf-error); }
.toast--warning .ico { color: var(--cf-warning); }
.toast--info .ico { color: var(--al-blue); }
.toast__close {
  margin-left: auto;
  color: var(--cf-text-muted);
}
.toast__close:hover { color: var(--cf-text); }

/* =============================================================================
   8. Ionic Component: ion-chip & ion-badge
   ========================================================================== */
.ion-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--cf-surface-2);
  color: var(--cf-text-secondary);
  border: 1px solid var(--cf-border);
}
.ion-chip--active {
  background: var(--cf-success-subtle);
  color: #065F46;
  border-color: rgba(16, 185, 129, 0.3);
}
.ion-chip--draft {
  background: var(--cf-surface-2);
  color: var(--cf-text-muted);
}
.ion-chip--review {
  background: var(--cf-warning-subtle);
  color: #92400E;
  border-color: rgba(245, 158, 11, 0.3);
}
.ion-chip--scheduled {
  background: var(--al-blue-subtle);
  color: var(--al-blue);
  border-color: rgba(29, 104, 189, 0.25);
}
.ion-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: currentColor;
}

/* =============================================================================
   9. Cloudflare Data Tables (.cf-table-card)
   ========================================================================== */
.cf-card {
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: 0.5rem;
  box-shadow: var(--cf-card-shadow);
  overflow: hidden;
}

.cf-table-toolbar {
  padding: 0.875rem 1.125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--cf-border);
  background: var(--cf-surface);
}

.cf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  text-align: left;
}
.cf-table th {
  padding: 0.75rem 1rem;
  background: var(--cf-surface-2);
  color: var(--cf-text-muted);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--cf-border);
}
.cf-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--cf-border);
  color: var(--cf-text);
  vertical-align: middle;
}
.cf-table tr:last-child td { border-bottom: none; }
.cf-table tbody tr:hover td {
  background: var(--cf-surface-hover);
}
.cf-table__title {
  font-weight: 600;
  color: var(--cf-text);
}
.cf-table__title a:hover {
  color: var(--al-blue);
}
.cf-table__slug {
  font-size: 0.75rem;
  color: var(--cf-text-muted);
}
.cf-table-footer {
  padding: 0.75rem 1.125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--cf-border);
  font-size: 0.8125rem;
  color: var(--cf-text-muted);
}

/* =============================================================================
   10. Cloudflare Dashboard Overview Widgets
   ========================================================================== */
.cf-overview-hero {
  margin-bottom: 1.75rem;
}
.cf-overview-hero h1 {
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cf-text);
  margin-bottom: 0.35rem;
}
.cf-overview-hero p {
  color: var(--cf-text-muted);
  font-size: 0.95rem;
}

.cf-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.125rem;
  margin-bottom: 1.75rem;
}
.cf-metric-card {
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: 0.5rem;
  padding: 1.25rem;
  box-shadow: var(--cf-card-shadow);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
}
.cf-metric-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--cf-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cf-metric-card__value {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--cf-text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.cf-metric-card__trend {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cf-success);
}

/* Mini visual chart line in card */
.cf-metric-spark {
  height: 24px;
  width: 100%;
  margin-top: 0.25rem;
}

/* Quick Actions Cards */
.cf-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.cf-action-box {
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: 0.5rem;
  padding: 1.125rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all var(--cf-dur) ease;
}
.cf-action-box:hover {
  border-color: var(--al-blue);
  box-shadow: var(--cf-card-shadow);
  transform: translateY(-1px);
}
.cf-action-box__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background: var(--al-blue-subtle);
  color: var(--al-blue);
  display: grid;
  place-items: center;
  flex: none;
}
.cf-action-box__body { flex: 1; }
.cf-action-box__title { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.15rem; }
.cf-action-box__desc { font-size: 0.78rem; color: var(--cf-text-muted); }

/* Activity Stream */
.cf-activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cf-activity-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.125rem;
  border-bottom: 1px solid var(--cf-border);
  font-size: 0.84rem;
}
.cf-activity-item:last-child { border-bottom: none; }
.cf-activity-item:hover { background: var(--cf-surface-hover); }

/* =============================================================================
   11. Popover Menu & Dropdowns (.cf-popover)
   ========================================================================== */
.cf-popover {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 100;
  min-width: 14rem;
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: 0.75rem;
  box-shadow: var(--cf-dropdown-shadow);
  padding: 0.5rem;
  animation: popoverFadeIn 0.18s var(--cf-ease);
}
@keyframes popoverFadeIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.cf-popover__user {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--cf-border);
  margin-bottom: 0.35rem;
}
.cf-popover__item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.84rem;
  color: var(--cf-text);
  width: 100%;
  text-align: left;
  transition: background var(--cf-dur);
}
.cf-popover__item:hover {
  background: var(--cf-surface-hover);
}
.cf-popover__item.is-danger {
  color: var(--cf-error);
}
.cf-popover__item.is-danger:hover {
  background: var(--cf-error-subtle);
}



/* Save Indicator in Topbar */
.save-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--cf-text-muted);
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
  background: var(--cf-surface-2);
}
.save-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--cf-success);
}
.save-indicator.is-saving .save-dot {
  background: var(--cf-warning);
  animation: pulse 1s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* =============================================================================
   14. Ionic Components & Tiptap Rich-Text Editor System
   ========================================================================== */

/* Official Ionic Component Integration */
ion-searchbar {
  --background: var(--cf-surface-2);
  --color: var(--cf-text);
  --placeholder-color: var(--cf-text-muted);
  --icon-color: var(--cf-text-muted);
  --clear-button-color: var(--cf-text-muted);
  --border-radius: 0.375rem;
  --box-shadow: none;
  padding: 0;
  min-height: 2.25rem;
  font-family: var(--font, 'Hanken Grotesk', sans-serif);
}
ion-searchbar .searchbar-input-container {
  border: 1px solid var(--cf-border);
  border-radius: 0.375rem;
  transition: border-color var(--cf-dur), box-shadow var(--cf-dur);
}
ion-searchbar.searchbar-has-focus .searchbar-input-container {
  border-color: var(--al-blue);
  box-shadow: 0 0 0 2px var(--al-blue-subtle);
}

ion-segment {
  --background: var(--cf-surface-2);
  border: 1px solid var(--cf-border);
  border-radius: 0.5rem;
  padding: 0.2rem;
  font-family: var(--font, 'Hanken Grotesk', sans-serif);
  display: inline-flex;
}
ion-segment-button {
  --color: var(--cf-text-secondary);
  --color-checked: var(--al-blue);
  --indicator-color: var(--cf-surface);
  --indicator-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-size: 0.8125rem;
  font-weight: 500;
  min-height: 2rem;
  text-transform: none;
  letter-spacing: normal;
  border-radius: 0.375rem;
  transition: color var(--cf-dur) ease;
}
ion-segment-button.ion-checked {
  font-weight: 600;
}

ion-toggle {
  --track-background: var(--cf-border);
  --track-background-checked: var(--al-blue);
  --handle-background: #ffffff;
  --handle-background-checked: #ffffff;
  font-size: 0.875rem;
  font-family: var(--font, 'Hanken Grotesk', sans-serif);
  color: var(--cf-text);
}

ion-chip {
  --background: var(--cf-surface-2);
  --color: var(--cf-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  height: 1.5rem;
  border-radius: 9999px;
  border: 1px solid var(--cf-border);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 0.55rem;
}
ion-chip.ion-chip--active, ion-chip[color="success"] {
  --background: var(--cf-success-subtle);
  --color: #047857;
  border-color: rgba(16, 185, 129, 0.25);
}
:root[data-theme="dark"] ion-chip.ion-chip--active,
:root[data-theme="dark"] ion-chip[color="success"] {
  --color: #34D399;
}
ion-chip.ion-chip--draft {
  --background: var(--cf-surface-2);
  --color: var(--cf-text-muted);
  border-color: var(--cf-border);
}
ion-chip.ion-chip--review, ion-chip[color="warning"] {
  --background: var(--cf-warning-subtle);
  --color: #B45309;
  border-color: rgba(245, 158, 11, 0.25);
}
:root[data-theme="dark"] ion-chip.ion-chip--review,
:root[data-theme="dark"] ion-chip[color="warning"] {
  --color: #FBBF24;
}
ion-chip.ion-chip--scheduled, ion-chip[color="primary"] {
  --background: var(--al-blue-subtle);
  --color: var(--al-blue);
  border-color: rgba(29, 104, 189, 0.25);
}

/* ProseMirror Canvas Typography */
.ProseMirror {
  outline: none;
  min-height: 28rem;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--cf-text);
  font-family: var(--font, 'Hanken Grotesk', system-ui, sans-serif);
}

.ProseMirror p {
  margin: 0 0 1.2rem;
}

.ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--cf-text-muted);
  pointer-events: none;
  height: 0;
  font-style: normal;
}

.ProseMirror h2 {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 2.25rem 0 0.75rem;
  color: var(--cf-text);
  line-height: 1.3;
}

.ProseMirror h3 {
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 1.75rem 0 0.6rem;
  color: var(--cf-text);
  line-height: 1.35;
}

.ProseMirror ul, .ProseMirror ol {
  padding-left: 1.5rem;
  margin: 0 0 1.25rem;
}
.ProseMirror li {
  margin-bottom: 0.4rem;
}

.ProseMirror blockquote {
  border-left: 3px solid var(--al-blue);
  padding: 0.5rem 0 0.5rem 1.25rem;
  margin: 1.5rem 0;
  color: var(--cf-text-secondary);
  font-style: italic;
  background: var(--al-blue-subtle);
  border-radius: 0 0.375rem 0.375rem 0;
}
.ProseMirror blockquote p {
  margin: 0;
}

.ProseMirror pre {
  background: #031E4A;
  color: #E2E8F0;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
  font-size: 0.88rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.ProseMirror code {
  font-size: 0.88em;
  background: var(--cf-surface-2);
  padding: 0.15em 0.35em;
  border-radius: 0.25rem;
  font-family: ui-monospace, monospace;
  color: var(--al-blue);
}
.ProseMirror pre code {
  background: none;
  padding: 0;
  color: inherit;
}

.ProseMirror hr {
  border: none;
  border-top: 1px solid var(--cf-border);
  margin: 2rem 0;
}

.ProseMirror a {
  color: var(--al-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Framed Figure (Albasrawie Identity) */
.art-fig {
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 100%;
}
.art-fig__frame {
  border: 1px solid var(--cf-border);
  border-radius: 0.5rem;
  padding: 0.5rem;
  background: var(--cf-surface);
  box-shadow: var(--cf-card-shadow);
  max-width: 100%;
  overflow: hidden;
  transition: all var(--cf-dur) ease;
}
.art-fig__frame img,
.art-fig__frame video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 0.3rem;
}
.art-fig__frame video {
  max-height: 30rem;
  background: #061c12;
  object-fit: contain;
}
.art-fig--video .art-fig__frame,
.art-fig--yt .art-fig__frame {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.art-fig figcaption {
  font-size: 0.8125rem;
  color: var(--cf-text-muted);
  text-align: center;
}
.art-fig figcaption .art-fig__credit {
  font-style: italic;
  opacity: 0.8;
}

/* Frame Tints */
.art-fig--frame-sand .art-fig__frame {
  background: #FAF8F5;
  border-color: #E7DFD5;
}
:root[data-theme="dark"] .art-fig--frame-sand .art-fig__frame {
  background: #1C1917;
  border-color: #292524;
}
.art-fig--frame-blue .art-fig__frame {
  background: rgba(127, 193, 254, 0.1);
  border-color: rgba(127, 193, 254, 0.4);
}
.art-fig--frame-lilac .art-fig__frame {
  background: #F8F5FB;
  border-color: #E6DCF0;
}
:root[data-theme="dark"] .art-fig--frame-lilac .art-fig__frame {
  background: #1B1524;
  border-color: #2E233D;
}
.art-fig--frame-dark .art-fig__frame {
  background: #031E4A;
  border-color: #031E4A;
}

/* =============================================================================
   15. Media Library Layout
   ========================================================================== */
.media__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.media__bar .search {
  position: relative;
  flex: 1;
  max-width: 24rem;
}
.media__bar .search .ico {
  position: absolute;
  left: 0.75rem;
  top: 0.55rem;
  color: var(--cf-text-muted);
}
.media__bar .search input {
  width: 100%;
  height: 2.125rem;
  padding: 0 0.75rem 0 2.25rem;
  border-radius: 0.375rem;
  border: 1px solid var(--cf-border);
  background: var(--cf-surface);
  color: var(--cf-text);
  font-size: 0.84rem;
  outline: none;
}

.media__layout {
  display: flex;
  gap: 1.5rem;
}
.media__main {
  flex: 1;
  min-width: 0;
}

.drop {
  border: 2px dashed var(--cf-border-strong);
  border-radius: 0.5rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: var(--cf-surface);
  cursor: pointer;
  margin-bottom: 1.5rem;
  transition: all var(--cf-dur) ease;
}
.drop:hover, .drop.is-dragover {
  border-color: var(--al-blue);
  background: var(--al-blue-subtle);
}
.drop p { margin: 0.5rem 0 0.2rem; font-size: 0.95rem; }
.drop small { color: var(--cf-text-muted); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.grid__item {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 0.375rem;
  border: 1px solid var(--cf-border);
  overflow: hidden;
  background: var(--cf-surface);
  cursor: pointer;
  transition: all var(--cf-dur) ease;
}
.grid__item:hover {
  border-color: var(--al-blue);
  box-shadow: var(--cf-card-shadow);
  transform: translateY(-2px);
}
.grid__item.is-selected {
  outline: 2px solid var(--al-blue);
  outline-offset: 1px;
}
.grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail {
  width: 20rem;
  flex: none;
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: 0.5rem;
  padding: 1.25rem;
  box-shadow: var(--cf-card-shadow);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.detail__preview {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 0.375rem;
  overflow: hidden;
  background: var(--cf-surface-2);
}
.detail__preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.detail__name { font-weight: 600; font-size: 0.875rem; word-break: break-all; }
.detail__meta { font-size: 0.75rem; color: var(--cf-text-muted); }

/* Auth Sign-in Card */
.auth .authwrap {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--cf-bg);
}
.authcard {
  width: 100%;
  max-width: 25rem;
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: 0.75rem;
  padding: 2.5rem 2rem;
  box-shadow: var(--cf-dropdown-shadow);
}
.authcard__logo {
  display: block;
  margin-bottom: 1.25rem;
}
.authcard h1 {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cf-text);
}
.authcard__sub {
  color: var(--cf-text-muted);
  font-size: 0.875rem;
  margin: 0.35rem 0 1.5rem;
}

/* =============================================================================
   Ionic form controls, list toolbar, editor blocks (added with the Ionic pass)
   ========================================================================== */
.editor-top-actions { display: flex; align-items: center; gap: 0.4rem; }

.cf-seg-wrap { margin-bottom: 1rem; overflow-x: auto; }
.cf-table-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
.cf-toolbar-search { flex: 1 1 16rem; max-width: 26rem; }
.cf-toolbar-filters { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
ion-select.cf-select { min-width: 9.5rem; --min-height: 2.5rem; font-size: 0.84rem; }
ion-searchbar { --border-radius: 0.375rem; --box-shadow: none; --background: var(--cf-surface-2); padding-inline: 0; }

/* Blocks inside the writing canvas */
.ProseMirror figure.art-fig--editing { cursor: pointer; }
.ProseMirror figure.art-fig--editing:hover .art-fig__frame { outline: 2px solid var(--al-sky); }
.ProseMirror figure.art-fig--editing figcaption.is-empty { font-style: italic; opacity: 0.7; }
.ProseMirror .ProseMirror-selectednode .art-fig__frame { outline: 2px solid var(--al-blue); }
.art-fig--frame-green .art-fig__frame { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.35); }
.art-fig--frame-none .art-fig__frame { background: transparent; border-color: transparent; box-shadow: none; padding: 0; }
.ProseMirror .art-callout { margin: 1.25rem 0; padding: 0.85rem 1rem; border-radius: 0.5rem; border: 1px solid var(--cf-border); background: var(--cf-surface-2); }
.ProseMirror .art-callout p { margin: 0; }
.ProseMirror .art-callout--info { background: var(--cf-info-subtle); }
.ProseMirror .art-callout--success { background: var(--cf-success-subtle); }
.ProseMirror .art-callout--warning { background: var(--cf-warning-subtle); }
.ProseMirror .art-callout--danger { background: var(--cf-error-subtle); }
.ProseMirror table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
.ProseMirror th, .ProseMirror td { border: 1px solid var(--cf-border); padding: 0.45rem 0.65rem; text-align: left; vertical-align: top; min-width: 4rem; }
.ProseMirror th { background: var(--cf-surface-2); font-weight: 600; }
.ProseMirror mark { background: rgba(250, 204, 21, 0.4); color: inherit; padding: 0 0.15em; border-radius: 0.2em; }
ion-modal.cf-figure-modal {
  --width: min(32rem, 94vw);
  --height: min(35rem, 90dvh);
  --max-height: 90dvh;
  --border-radius: 0.9rem;
}
ion-modal.cf-figure-modal ion-content {
  --background: var(--cf-surface);
  --color: var(--cf-text);
}
ion-modal.cf-figure-modal .ed-form { padding-bottom: 0.5rem; }
ion-modal.cf-figure-modal ion-input, ion-modal.cf-figure-modal ion-select { margin-bottom: 0.9rem; }

/* ---- Dashboard (Ionic cards) ---------------------------------------------- */
.cf-page-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 1rem; }
ion-card { --background: var(--cf-surface); margin: 0; border: 1px solid var(--cf-border); border-radius: 0.75rem; box-shadow: var(--cf-card-shadow); color: var(--cf-text); }
.cf-banner-card { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.cf-banner-card__art { width: 3.2rem; height: 3.2rem; border-radius: 0.6rem; display: grid; place-items: center; background: linear-gradient(135deg, var(--al-sky), var(--al-blue)); color: #fff; flex: none; }
.cf-banner-card__body { flex: 1 1 14rem; }
.cf-banner-card__body h2 { font-size: 1rem; font-weight: 600; }
.cf-banner-card__body p { font-size: 0.84rem; color: var(--cf-text-muted); }
.cf-section-head { display: flex; align-items: center; justify-content: space-between; margin: 1.5rem 0 0.75rem; }
.cf-section-head h2 { font-size: 1rem; font-weight: 600; }
.cf-metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.cf-metric { padding: 1rem 1.1rem; }
.cf-metric__label { font-size: 0.78rem; color: var(--cf-text-muted); font-weight: 500; }
.cf-metric__value { font-size: 2rem; font-weight: 600; line-height: 1.2; margin: 0.15rem 0; }
.cf-metric__value--sm { font-size: 1rem; }
.cf-metric__note { font-size: 0.75rem; color: var(--cf-text-muted); }
.cf-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.cf-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.cf-bars li { display: grid; grid-template-columns: minmax(6rem, 40%) 1fr 2.2rem; align-items: center; gap: 0.6rem; font-size: 0.84rem; }
.cf-bars__n { text-align: right; color: var(--cf-text-muted); font-variant-numeric: tabular-nums; }
.cf-bars ion-progress-bar { --background: var(--cf-surface-2); --progress-background: var(--al-blue); border-radius: 9999px; height: 0.4rem; }
.cf-empty { color: var(--cf-text-muted); font-size: 0.875rem; padding: 0.5rem 0; }
.cf-activity ion-item, .cf-actions ion-item { --background: transparent; }
.cf-mono { font-family: ui-monospace, monospace; font-size: 0.72rem; }
.cf-toolbar-filters ion-select.cf-select { width: 11rem; flex: none; }
.cf-table-toolbar { padding: 0.75rem 1rem; }
.authcard form { display: grid; gap: 1rem; margin-top: 1rem; }
.authcard ion-input { min-height: 3.4rem; }
.authcard ion-checkbox { font-size: 0.875rem; }