/* =========================================================
   FENIXPACE THEME
   ========================================================= */

html,
body {
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.theme-toggle {
  width: 38px;
  height: 38px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.88);
  border: 1px solid #e6e9ed;

  color: #6b7280;

  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 4px 12px rgba(0, 0, 0, 0.03);

  cursor: pointer;

  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.theme-toggle:hover {
  transform: translateY(-1px);
  background: #f9fafb;
  color: #1f2937;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html.dark body {
  background: #0f1117 !important;
  color: #e5e7eb !important;
}

/* Main backgrounds */

html.dark .bg-bgsoft {
  background-color: #0f1117 !important;
}

html.dark .bg-white {
  background-color: #171a21 !important;
}

html.dark .bg-gray-50 {
  background-color: #13161c !important;
}

html.dark .bg-gray-100 {
  background-color: #1c2028 !important;
}


/* Glass surfaces */

html.dark .glass {
  background: rgba(23, 26, 33, 0.88);
  border-color: #272c35 !important;
}


/* Borders */

html.dark .border-gray-100,
html.dark .border-gray-200 {
  border-color: #292e38 !important;
}

html.dark .border {
  border-color: #292e38;
}


/* Text */

html.dark .text-gray-800,
html.dark .text-gray-700,
html.dark .text-gray-600 {
  color: #e5e7eb !important;
}

html.dark .text-gray-500 {
  color: #9ca3af !important;
}

html.dark .text-gray-400 {
  color: #7d8694 !important;
}

html.dark .text-gray-300 {
  color: #5f6875 !important;
}


/* Hover backgrounds */

html.dark .hover\:bg-gray-50:hover {
  background-color: #1d222b !important;
}

html.dark .hover\:bg-gray-100:hover {
  background-color: #222833 !important;
}

html.dark .hover\:bg-white:hover {
  background-color: #1c2028 !important;
}


/* Search */

html.dark .flow-search-box {
  background: rgba(23, 26, 33, 0.92);
  border-color: #2a303a;
}

html.dark .flow-search-box:focus-within {
  background: #171a21;
  border-color: #414957;
}

html.dark .flow-search-input {
  color: #e5e7eb;
}

html.dark .flow-search-input::placeholder {
  color: #737c89;
}

html.dark .flow-search-hint {
  background: #1c2028;
  border-color: #303641;
  border-bottom-color: #414957;
  color: #7d8694;
}


/* Theme toggle */

html.dark .theme-toggle {
  background: #171a21;
  border-color: #2a303a;
  color: #f4c95d;
}

html.dark .theme-toggle:hover {
  background: #1d222b;
  color: #ffd978;
}


/* Post cards / dropdowns */

html.dark .post-action-dropdown {
  background: #171a21;
  border-color: #292e38;
}

html.dark .post-text code {
  background: #1c2028;
  color: #e5e7eb;
}

html.dark .post-text hr {
  border-top-color: #303641;
}

html.dark .post-text blockquote {
  color: #9ca3af;
}


/* Composer */

html.dark .composer-card {
  background: #171a21;
  border-color: #292e38;
}

html.dark .composer-header,
html.dark .composer-footer {
  border-color: #292e38;
  background: #171a21;
}

html.dark .composer-name {
  color: #f3f4f6;
}

html.dark .composer-subtitle {
  color: #8c95a3;
}

html.dark .audience-wrapper {
  background: #1c2028;
  border-color: #303641;
  color: #a0a8b4;
}

html.dark .audience-select {
  color: #d1d5db;
}

html.dark .rich-editor {
  color: #e5e7eb;
}

html.dark .rich-editor\:empty::before {
  color: #737c89;
}

html.dark .composer-tool {
  color: #9ca3af;
}

html.dark .composer-tool:hover {
  background: #252a33;
}

html.dark .composer-cancel {
  background: #222731;
  color: #b4bcc8;
}

html.dark .composer-cancel:hover {
  background: #2b313c;
}

html.dark .composer-clear {
  color: #7d8694;
}

html.dark .toolbar-btn {
  background: #171a21;
  border-color: #303641;
}

html.dark .emoji-popover {
  background: #171a21;
  border-color: #303641;
}

html.dark .emoji-item:hover {
  background: #252a33;
}

html.dark .existing-attachment,
html.dark .composer-attachment {
  background: #1c2028;
  border-color: #303641;
}


/* Android notifier */

html.dark .android-app-notifier {
  background: rgba(23, 26, 33, 0.97);
  border-color: #303641;
}

html.dark .android-app-title {
  color: #f3f4f6;
}

html.dark .android-app-text {
  color: #9ca3af;
}

html.dark .android-app-close:hover {
  background: #252a33;
  color: #e5e7eb;
}


/* Pagination */

html.dark .paginator nav {
  background: #171a21;
  border-color: #292e38;
}

html.dark .paginator a {
  color: #c2c8d0;
}


/* Subscription warning */

html.dark .subscription-renewal-alert {
  background: linear-gradient(
    135deg,
    #211d15,
    #282116
  );

  border-color: #4b3b1d;
}

html.dark .subscription-renewal-icon {
  background: #3a2f18;
  color: #e0b64d;
}

html.dark .subscription-renewal-title {
  color: #f3d98b;
}

html.dark .subscription-renewal-text {
  color: #b9a77c;
}


/* Mobile nav */

html.dark nav.bg-white {
  background: #171a21 !important;
  border-color: #292e38 !important;
}


/* Small supporting surfaces */

html.dark .file-chip {
  background: #1c2028;
  border-color: #303641;
  color: #cbd1d9;
}
html.dark .text-gray-900 {
color: #f3f4f6 !important;
}

html.dark .text-gray-800 {
color: #e5e7eb !important;
}

html.dark .text-gray-700 {
color: #d1d5db !important;
}

html.dark .text-gray-600 {
color: #b4bcc8 !important;
}

html.dark .text-gray-500 {
color: #939dab !important;
}

html.dark .text-gray-400 {
color: #7d8694 !important;
}

html.dark .text-gray-300 {
color: #626c7a !important;
}

/* ---------------------------------------------------------
Hero background
Fixes the hardcoded white gradient on the About page
--------------------------------------------------------- */

html.dark .hero-glow {
background:
radial-gradient(
circle at 12% 20%,
rgba(239, 119, 34, 0.09),
transparent 34%
),
radial-gradient(
circle at 88% 15%,
rgba(11, 166, 223, 0.09),
transparent 34%
),
linear-gradient(
180deg,
#12151c 0%,
#0f1117 100%
) !important;

border-color: #292e38 !important;
}

/* ---------------------------------------------------------
Soft gradient sections and feature panels
--------------------------------------------------------- */

html.dark .soft-gradient {
background:
linear-gradient(
135deg,
rgba(239, 119, 34, 0.09),
rgba(11, 166, 223, 0.08)
),
#171a21 !important;

border-color: #292e38 !important;
}

/* ---------------------------------------------------------
White borders and translucent gray borders
--------------------------------------------------------- */

html.dark .border-white {
border-color: #292e38 !important;
}

html.dark [class~="border-gray-200/70"] {
border-color: rgba(65, 73, 87, 0.7) !important;
}

/* ---------------------------------------------------------
Pastel feature icons
Preserve the orange / blue / warm accent identity,
but make the backgrounds appropriate for dark mode.
--------------------------------------------------------- */

html.dark .bg-orange-50 {
background-color: rgba(239, 119, 34, 0.13) !important;
}

html.dark .bg-sky-50 {
background-color: rgba(11, 166, 223, 0.13) !important;
}

html.dark .bg-amber-50 {
background-color: rgba(245, 158, 11, 0.13) !important;
}

html.dark .bg-rose-50 {
background-color: rgba(244, 63, 94, 0.13) !important;
}

html.dark .text-amber-600 {
color: #fbbf24 !important;
}

html.dark .text-rose-600 {
color: #fb7185 !important;
}

/* ---------------------------------------------------------
Cards and shadows
--------------------------------------------------------- */

html.dark .card-shadow {
box-shadow:
0 8px 26px rgba(0, 0, 0, 0.18),
0 1px 3px rgba(0, 0, 0, 0.16) !important;
}

html.dark .hover-card {
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.24),
0 2px 5px rgba(0, 0, 0, 0.16) !important;
}

/* ---------------------------------------------------------
Map illustration
--------------------------------------------------------- */

html.dark .map-path::before {
border-left-color: rgba(147, 157, 171, 0.25);
}

html.dark .map-node .bg-gray-800 {
background-color: #343c49 !important;
}

/* ---------------------------------------------------------
Hover text
Fix links that otherwise turn nearly black on hover.
--------------------------------------------------------- */

html.dark [class~="hover"] {
color: #f3f4f6 !important;
}

html.dark [class~="hover"] {
color: #e5e7eb !important;
}

html.dark [class~="hover"] {
color: #d1d5db !important;
}