/* Servicefry sitewide dark theme - toggled via body.dark-mode class.
   Overrides the most common Tailwind utility classes used across customer,
   technician, and admin pages so dark mode applies broadly without needing
   to rewrite every element with dark: variants. */

body.dark-mode {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

/* Backgrounds */
body.dark-mode .bg-white { background-color: #1e293b !important; }
body.dark-mode .bg-gray-50 { background-color: #1e293b !important; }
body.dark-mode .bg-gray-100 { background-color: #273548 !important; }
body.dark-mode .bg-teal-50 { background-color: #0f2e28 !important; }
body.dark-mode .bg-red-50 { background-color: #3f1d1d !important; }
body.dark-mode .bg-amber-50 { background-color: #3f2f12 !important; }
body.dark-mode .bg-emerald-50 { background-color: #0f3328 !important; }
body.dark-mode .bg-green-50 { background-color: #0f3328 !important; }
body.dark-mode .bg-gray-200 { background-color: #334155 !important; }

/* Borders */
body.dark-mode .border-gray-100,
body.dark-mode .border-gray-200,
body.dark-mode .border-gray-50 { border-color: #334155 !important; }

/* Text */
body.dark-mode .text-gray-900 { color: #f1f5f9 !important; }
body.dark-mode .text-gray-800 { color: #e2e8f0 !important; }
body.dark-mode .text-gray-700 { color: #cbd5e1 !important; }
body.dark-mode .text-gray-600 { color: #94a3b8 !important; }
body.dark-mode .text-gray-500 { color: #94a3b8 !important; }
/* text-gray-400 is the panel's secondary text: timestamps, "CLOSED", every helper line under a
   field. It was #64748b, which measures 3.07 against a card and 2.61 against a gray-100 bubble.
   Both are below the 4.5 a normal-sized line needs, and it is why the dim lines in dark mode read
   as "there but not worth reading". #94a3b8 takes those to 5.71 and 4.85 while still sitting
   clearly below the primary text, which is the whole job of this colour. */
body.dark-mode .text-gray-400 { color: #94a3b8 !important; }
body.dark-mode .text-gray-300 { color: #64748b !important; }

/* Shadows look wrong/too-light on dark backgrounds - soften them */
body.dark-mode .shadow-sm,
body.dark-mode .shadow-md,
body.dark-mode .shadow-lg,
body.dark-mode .shadow-teal-100,
body.dark-mode .shadow-gray-200,
body.dark-mode .shadow-emerald-100 {
    box-shadow: 0 4px 14px rgba(0,0,0,0.35) !important;
}

/* Inputs */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder { color: #64748b !important; }
body.dark-mode input:disabled,
body.dark-mode input[readonly] {
    background-color: #273548 !important;
    color: #94a3b8 !important;
}

/* Modal popups (SFModal) stay readable */
body.dark-mode .sf-modal-box { background-color: #1e293b !important; color: #e2e8f0 !important; }
body.dark-mode .sf-modal-msg { color: #f1f5f9 !important; }
body.dark-mode .sf-modal-btn-secondary { background-color: #334155 !important; color: #e2e8f0 !important; }

/* Bottom nav / drawer */
body.dark-mode nav.fixed { background-color: #1e293b !important; border-color: #334155 !important; }

/* Keep brand-color elements (buttons, badges using var(--color-primary) etc.) as-is - they already
   have enough contrast against the dark background. */

/* ============================================================================
   TINT COLOURS  (the pale brand/status backgrounds)
   ============================================================================
   theme-colors.css defines --color-primary-tint and friends as very pale
   backgrounds meant to sit under DARK text: #E7F5F6, #ECFDF5, #FEF2F2 and so
   on. Everything above in this file works on Tailwind's own utility classes
   (.bg-white, .bg-teal-50), so a page written with `bg-[var(--color-primary-tint)]`
   was never touched by dark mode at all.

   The result, seen on Ratingo Support: the highlighted ticket row and the
   tenant's own message bubble kept their near-white background while the text
   inside them was turned light by the text rules above. Pale text on a pale box
   is not "hard to read", it is invisible. 26 pages use these variables, so the
   same hole existed on every one of them.

   Fixed by redefining the VARIABLES rather than chasing the classes. Every
   existing bg-[var(--color-...-tint)] in the codebase, and every one written in
   future, picks this up with no page edit at all. Each value is the same hue as
   its light counterpart, just dark enough for light text to sit on.

   --color-primary-tint-text goes light for the same reason: it is the colour
   written ON the tint, and it was a dark teal chosen to contrast with a near
   white box that no longer exists in this mode.
   ============================================================================ */

body.dark-mode {
    --color-primary-tint: #12333a;
    --color-primary-tint-text: #a5e4ec;
    --color-success-tint: #0f3328;
    --color-success-soft: #1c5442;
    --color-warning-tint: #3f2f12;
    --color-warning-soft: #6b4f1a;
    --color-danger-tint: #3f1d1d;
    --color-danger-soft: #6b2b2b;
    --color-info-tint: #241f45;
    --color-info-soft: #3b3270;
    --color-secondary-soft: #2c5a60;
}

/* ---------------------------------------------------------------------------------------------
   Inline light colours (21 Sep 2026). Some screens paint white cards and near-black text in a
   style="" attribute (appliance cards, donut centres, bill summaries, technician visit log...),
   which the class overrides above cannot reach, so in dark mode they showed as white boxes or
   dark text on a dark page. These match those inline values, case-insensitively, and swap them
   for the dark palette. White text on coloured buttons (color:#fff) is left alone on purpose.
   ------------------------------------------------------------------------------------------- */
body.dark-mode [style*="background:#fff;" i], body.dark-mode [style*="background: #fff;" i],
body.dark-mode [style*="background:#fff\"" i], body.dark-mode [style$="background:#fff" i],
body.dark-mode [style*="background:#ffffff" i], body.dark-mode [style*="background: #ffffff" i],
body.dark-mode [style*="background:white" i], body.dark-mode [style*="background-color:#fff;" i],
body.dark-mode [style*="background:#f9fafb" i], body.dark-mode [style*="background:#f8fafc" i] {
    background-color: #1e293b !important;
}
body.dark-mode [style*="background:#f3f4f6" i], body.dark-mode [style*="background:#f1f5f9" i] {
    background-color: #273548 !important;
}
body.dark-mode [style*="color:#0f172a" i], body.dark-mode [style*="color: #0f172a" i],
body.dark-mode [style*="color:#111827" i], body.dark-mode [style*="color:#1f2937" i],
body.dark-mode [style*="color:#374151" i], body.dark-mode [style*="color:#000;" i] {
    color: #e2e8f0 !important;
}
body.dark-mode [style*="color:#6b7280" i], body.dark-mode [style*="color:#4b5563" i],
body.dark-mode [style*="color:#64748b" i] {
    color: #94a3b8 !important;
}
body.dark-mode [style*="solid #e5e7eb" i], body.dark-mode [style*="solid #e2e8f0" i],
body.dark-mode [style*="solid #eef1f4" i], body.dark-mode [style*="solid #cbd5e1" i],
body.dark-mode [style*="solid #f3f4f6" i], body.dark-mode [style*="dashed #cbd5e1" i] {
    border-color: #334155 !important;
}
/* The "background-color" match above must not catch white text written as color:#fff on the
   same element: re-assert it for elements that set both. */
body.dark-mode [style*="color:#fff" i]:not([style*="background:#fff" i]) { color: #fff !important; }

/* Technician visit log (its own stylesheet, not Tailwind) */
body.dark-mode .vl-top, body.dark-mode .vl-sec, body.dark-mode .vl-bar, body.dark-mode .vl-input,
body.dark-mode .vl-pay button, body.dark-mode .vl-choice button, body.dark-mode .vl-photo,
body.dark-mode .vl-bar .cancel { background: #1e293b !important; color: #e2e8f0 !important; border-color: #334155 !important; }
body.dark-mode .vl-back, body.dark-mode .vl-top h1, body.dark-mode .vl-sec-h span,
body.dark-mode .vl-known .k2, body.dark-mode .vl-check b { color: #e2e8f0 !important; }

/* Console tool output and pickers use the console palette variables */
body.dark-mode .tool-out { color: var(--text, #e2e8f0); }