/* PostDelegate shared interface layer. Native social post previews keep their own palette. */
@font-face {
  font-family: Manrope;
  src: url("../fonts/manrope-latin.101877a7a906.woff2") format('woff2');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
/* Arabic fallback. Manrope has no Arabic glyphs, so the browser falls through the
   font stack to this face and downloads it only when a page contains Arabic text. */
@font-face {
  font-family: 'Noto Sans Arabic';
  src: url("../fonts/noto-sans-arabic-arabic.24794b313a2d.woff2") format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
html[data-theme="postdelegate"] { color-scheme: dark; }
body { color: var(--text-primary); font-family: var(--font-body); }
/* In Tailwind's base layer (it joins the layer declared by styles.css): unlayered, this reset
   beat every layered rule, so .btn-brand and font-* / text-* utilities on controls were ignored. */
@layer base { button, input, textarea, select { font: inherit; } }
button, a, input, textarea, select, summary { -webkit-tap-highlight-color: transparent; }
:where(button, a, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--brand-green-500);
  outline-offset: 3px;
}
::selection { color: var(--text-primary); background: var(--brand-200); }
.pd-workspace-brand {
  display: flex; align-items: center; gap: 10px; min-height: 62px;
  padding: 16px; color: var(--text-primary); text-decoration: none;
  font-size: 17px; font-weight: 800; letter-spacing: -.6px;
}
.pd-workspace-brand img { flex-shrink: 0; }
.sidebar-collapsed .pd-workspace-brand { padding: 16px; }
.sidebar-nav-item.active { color: var(--brand-700); box-shadow: inset 2px 0 var(--brand-400); }
[dir="rtl"] .sidebar-nav-item.active { box-shadow: inset -2px 0 var(--brand-400); }
.sidebar-section-label { color: var(--text-tertiary); }
.sidebar-logo-mark:not(img) { background: var(--brand-100); color: var(--brand-700); border: 1px solid var(--brand-200); }
/* Legacy utility classes on menus, settings forms and dialogs use the same tokens. */
html[data-theme="postdelegate"] :where(.bg-white):not([data-platform-preview], [data-platform-preview] *) { background-color: var(--surface-0); }
html[data-theme="postdelegate"] :where(.bg-gray-50,.bg-stone-50,.bg-slate-50):not([data-platform-preview], [data-platform-preview] *) { background-color: var(--surface-1); }
html[data-theme="postdelegate"] :where(.bg-gray-100,.bg-stone-100,.bg-slate-100):not([data-platform-preview], [data-platform-preview] *) { background-color: var(--surface-2); }
html[data-theme="postdelegate"] :where(.text-gray-900,.text-gray-800,.text-stone-900,.text-stone-800,.text-slate-900):not([data-platform-preview], [data-platform-preview] *) { color: var(--text-primary); }
html[data-theme="postdelegate"] :where(.text-gray-700,.text-gray-600,.text-stone-700,.text-stone-600,.text-slate-600):not([data-platform-preview], [data-platform-preview] *) { color: var(--text-secondary); }
html[data-theme="postdelegate"] :where(.text-gray-500,.text-gray-400,.text-stone-500,.text-stone-400):not([data-platform-preview], [data-platform-preview] *) { color: var(--text-tertiary); }
html[data-theme="postdelegate"] :where(.border-gray-200,.border-gray-100,.border-stone-200,.border-slate-200):not([data-platform-preview], [data-platform-preview] *) { border-color: var(--border); }
html[data-theme="postdelegate"] :where(.hover\:bg-gray-50,.hover\:bg-gray-100,.hover\:bg-stone-100):hover:not([data-platform-preview], [data-platform-preview] *) { background-color: var(--surface-2); }
.flatpickr-calendar { background: var(--surface-0); border: 1px solid var(--border); box-shadow: 0 20px 60px rgb(0 0 0 / 0.53); }
.flatpickr-day, .flatpickr-weekday, .flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months { color: var(--text-primary); background: transparent; }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--text-tertiary); }
.flatpickr-day:hover { background: var(--surface-2); border-color: var(--border); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--primary); border-color: var(--primary); color: var(--text-inverse); }
.flatpickr-months svg { fill: var(--text-secondary); }
@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]), textarea, select { font-size: 16px; }
}
/* Reduced motion: no decorative movement, but progress indicators keep running
   (slowly) so a loading state is still visible. Alpine x-transition and Tailwind
   duration-* classes are covered because both resolve to CSS transition-duration. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .animate-spin, .animate-pulse, .pd-spinner {
    animation-duration: 2.4s !important;
    animation-iteration-count: infinite !important;
  }
  .animate-pulse { animation-name: pd-fade-pulse; animation-timing-function: ease-in-out; }
  @keyframes pd-fade-pulse { 50% { opacity: .55; } }
}
/* Tailwind's default border follows text color; set a quiet dark-theme divider. */
html[data-theme="postdelegate"] :where(.divide-y > *):not([data-platform-preview], [data-platform-preview] *) { border-color: var(--border); }
html[data-theme="postdelegate"] :where(.border,.border-b,.border-t,.border-l,.border-r):not([data-platform-preview], [data-platform-preview] *) { border-color: var(--border); }
html[data-theme="postdelegate"] :where(.bg-orange-50,.bg-orange-100):not([data-platform-preview], [data-platform-preview] *) { background-color: var(--primary-soft); }
html[data-theme="postdelegate"] :where(.bg-orange-500,.bg-orange-600):not([data-platform-preview], [data-platform-preview] *) { background-color: var(--primary); }
html[data-theme="postdelegate"] :where(.text-orange-500,.text-orange-600,.text-orange-700):not([data-platform-preview], [data-platform-preview] *) { color: var(--text-brand); }
html[data-theme="postdelegate"] :where(.border-orange-100,.border-orange-200,.border-orange-300):not([data-platform-preview], [data-platform-preview] *) { border-color: var(--primary-ring); }
/* Checked toggles and day chips (peer-checked:bg-orange-500) follow the primary colour too. */
html[data-theme="postdelegate"] :where(.peer:checked ~ .peer-checked\:bg-orange-500):not([data-platform-preview], [data-platform-preview] *) { background-color: var(--primary); }
html[data-theme="postdelegate"] :where(.peer:checked ~ .peer-checked\:border-orange-500):not([data-platform-preview], [data-platform-preview] *) { border-color: var(--primary); }
html[data-theme="postdelegate"] :where(.hover\:bg-orange-50,.hover\:bg-orange-100):hover:not([data-platform-preview], [data-platform-preview] *) { background-color: var(--primary-muted); }
.pd-main { border-color: var(--border); }
html[data-theme="postdelegate"] textarea:not([data-platform-preview] *) { background-color: var(--surface-1); color: var(--text-primary); border-color: var(--border); }
html[data-theme="postdelegate"] textarea::placeholder { color: var(--text-tertiary); opacity: 1; }
html[data-theme="postdelegate"] :where(.bg-red-50,.bg-red-100):not([data-platform-preview], [data-platform-preview] *) { background-color: var(--error-50); }
html[data-theme="postdelegate"] :where(.text-red-500,.text-red-600,.text-red-700,.text-red-800,.text-red-900):not([data-platform-preview], [data-platform-preview] *) { color: var(--error-700); }
html[data-theme="postdelegate"] :where(.bg-green-50,.bg-green-100):not([data-platform-preview], [data-platform-preview] *) { background-color: var(--success-50); }
html[data-theme="postdelegate"] :where(.text-green-600,.text-green-700,.text-green-800):not([data-platform-preview], [data-platform-preview] *) { color: var(--success-700); }
html[data-theme="postdelegate"] :where(.bg-blue-50,.bg-blue-100):not([data-platform-preview], [data-platform-preview] *) { background-color: var(--info-50); }
html[data-theme="postdelegate"] :where(.text-blue-600,.text-blue-700,.text-blue-800):not([data-platform-preview], [data-platform-preview] *) { color: var(--info-700); }
/* The remaining light tints (warning amber/yellow, accents) follow the same dark surfaces; their dark text shades become the light accent so notices stay legible. */
html[data-theme="postdelegate"] :where(.bg-amber-50,.bg-amber-100,.bg-yellow-50,.bg-yellow-100):not([data-platform-preview], [data-platform-preview] *) { background-color: var(--warning-50); }
html[data-theme="postdelegate"] :where(.hover\:bg-amber-100,.hover\:bg-amber-200):hover:not([data-platform-preview], [data-platform-preview] *) { background-color: var(--warning-50); }
html[data-theme="postdelegate"] :where(.text-amber-600,.text-amber-700,.text-amber-800,.text-amber-900,.text-yellow-700):not([data-platform-preview], [data-platform-preview] *) { color: var(--warning-700); }
html[data-theme="postdelegate"] :where(.border-amber-100,.border-amber-200,.border-amber-300):not([data-platform-preview], [data-platform-preview] *) { border-color: color-mix(in srgb, var(--warning-500) 35%, transparent); }
html[data-theme="postdelegate"] :where(.bg-emerald-50,.bg-emerald-100,.bg-teal-50):not([data-platform-preview], [data-platform-preview] *) { background-color: var(--accent-emerald-soft); }
html[data-theme="postdelegate"] :where(.text-emerald-600,.text-emerald-800,.text-teal-600,.text-teal-700):not([data-platform-preview], [data-platform-preview] *) { color: var(--accent-emerald); }
html[data-theme="postdelegate"] :where(.border-emerald-100,.border-emerald-200,.border-teal-100):not([data-platform-preview], [data-platform-preview] *) { border-color: color-mix(in srgb, var(--accent-emerald) 30%, transparent); }
html[data-theme="postdelegate"] :where(.bg-sky-50,.bg-sky-100):not([data-platform-preview], [data-platform-preview] *) { background-color: var(--accent-sky-soft); }
html[data-theme="postdelegate"] :where(.text-sky-700,.text-sky-900):not([data-platform-preview], [data-platform-preview] *) { color: var(--accent-sky); }
html[data-theme="postdelegate"] :where(.border-sky-100):not([data-platform-preview], [data-platform-preview] *) { border-color: color-mix(in srgb, var(--accent-sky) 30%, transparent); }
html[data-theme="postdelegate"] :where(.bg-indigo-50):not([data-platform-preview], [data-platform-preview] *) { background-color: var(--accent-indigo-soft); }
html[data-theme="postdelegate"] :where(.text-indigo-600,.text-indigo-700):not([data-platform-preview], [data-platform-preview] *) { color: var(--accent-indigo); }
html[data-theme="postdelegate"] :where(.border-indigo-100):not([data-platform-preview], [data-platform-preview] *) { border-color: color-mix(in srgb, var(--accent-indigo) 30%, transparent); }
html[data-theme="postdelegate"] :where(.bg-violet-50,.bg-purple-50):not([data-platform-preview], [data-platform-preview] *) { background-color: var(--primary-soft); }
html[data-theme="postdelegate"] :where(.text-purple-800):not([data-platform-preview], [data-platform-preview] *) { color: var(--text-brand); }
html[data-theme="postdelegate"] :where(.bg-rose-50):not([data-platform-preview], [data-platform-preview] *) { background-color: var(--accent-rose-soft); }
html[data-theme="postdelegate"] :where(.text-rose-600):not([data-platform-preview], [data-platform-preview] *) { color: var(--accent-rose); }
/* Plan & billing (apps/billing). */
.pd-billing-heading { color: var(--text-primary); }
.pd-billing-muted { color: var(--text-secondary); }
.pd-billing-faint { color: var(--text-tertiary); }
.pd-billing-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.pd-billing-card--current { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.pd-billing-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--radius-full); font-size: 12px; font-weight: 600; background: var(--primary-muted); color: var(--brand-700); }
.pd-billing-badge--warning { background: var(--warning-50); color: var(--warning-700); }
.pd-billing-badge--error { background: var(--error-50); color: var(--error-700); }
.pd-billing-notice { border-radius: var(--radius-lg); padding: 12px 16px; border: 1px solid var(--info-500); background: var(--info-50); color: var(--text-primary); }
.pd-billing-notice--warning { border-color: var(--warning-500); background: var(--warning-50); }
.pd-billing-notice--error { border-color: var(--error-500); background: var(--error-50); }
.pd-billing-over { color: var(--error-700); }
.pd-billing-action { width: auto; }
.pd-billing-check { color: var(--brand-green-500); flex-shrink: 0; }
.pd-billing-price { color: var(--text-primary); font-size: 30px; font-weight: 800; letter-spacing: -.8px; line-height: 1; }
.pd-billing-toggle { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-full); background: var(--surface-2); border: 1px solid var(--border); }
.pd-billing-toggle label { cursor: pointer; padding: 6px 14px; border-radius: var(--radius-full); font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.pd-billing-toggle label:has(input:checked) { background: var(--surface-0); color: var(--text-primary); box-shadow: var(--shadow-xs); }
.pd-billing-toggle label:has(input:focus-visible) { outline: 2px solid var(--brand-green-500); outline-offset: 2px; }
.pd-meter { display: block; width: 100%; height: 8px; border: 0; border-radius: var(--radius-full); background: var(--surface-3); appearance: none; -webkit-appearance: none; }
.pd-meter::-webkit-meter-bar { background: var(--surface-3); border: 0; border-radius: var(--radius-full); height: 8px; }
.pd-meter::-webkit-meter-optimum-value { background: var(--primary); border-radius: var(--radius-full); }
.pd-meter::-webkit-meter-suboptimum-value { background: var(--warning-500); border-radius: var(--radius-full); }
.pd-meter::-webkit-meter-even-less-good-value { background: var(--error-500); border-radius: var(--radius-full); }
.pd-meter:-moz-meter-optimum::-moz-meter-bar { background: var(--primary); }
.pd-meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--warning-500); }
.pd-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--error-500); }
