/* Small hand-written overrides layered on top of the Tailwind Play CDN
   build used for Phase 0. The Play CDN only scans class names present in
   HTML -- it does not process @apply in a linked stylesheet -- so status
   badges are written as plain CSS here instead. Swap the CDN script for a
   compiled Tailwind build before production. */

[x-cloak] {
  display: none !important;
}

/* Ties native form-control chrome (date/month calendar icon, checkbox
   styling, select arrow) to the app's OWN dark/light state, not the
   OS's. Without this, a browser whose OS is set to dark can render a
   light-colored calendar icon on top of the plain white date/month
   inputs below -- invisible icon on a white field, regardless of
   which theme RentFlow itself is in. */
html:not(.dark) { color-scheme: light; }
html.dark { color-scheme: dark; }

/* forms.py doesn't set widget classes, so `{{ field }}` in every
   generic form template (record payment, start occupancy, add
   expense, add staff, waivers, void reasons, and more) renders bare
   OS-default controls: a plain white box in every theme, with no
   dark counterpart. One shared rule here instead of touching every
   form template individually. */
form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
form select,
form textarea {
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid rgb(203 213 225); /* slate-300 */
  background-color: #fff;
  color: rgb(15 23 42); /* slate-900 */
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.dark form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.dark form select,
.dark form textarea {
  border-color: rgb(51 65 85); /* slate-700 */
  background-color: rgb(2 6 23); /* slate-950 */
  color: rgb(241 245 249); /* slate-100 */
}
form input:focus, form select:focus, form textarea:focus {
  border-color: rgb(2 132 199); /* sky-600 */
  box-shadow: 0 0 0 3px rgb(2 132 199 / 0.2);
}
form input[type="checkbox"], form input[type="radio"] {
  accent-color: rgb(2 132 199); /* sky-600 */
}
form textarea { resize: vertical; }

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  border-width: 1px;
  border-style: solid;
}

/* Light-mode text colors below are darker shades (700-weight) of the
   same hue so they hold ~4.5:1+ contrast on the near-white 15%-opacity
   chip background -- the original single set of colors was tuned for
   the near-black dark background only and read as low-contrast pastel
   text on white (~1.7-2.7:1), i.e. "wordings getting disappeared" in
   light mode specifically. Found by a dedicated contrast audit, not
   guessed. */
.status-paid {
  background-color: rgb(16 185 129 / 0.15);
  color: rgb(4 120 87); /* emerald-700 */
  border-color: rgb(16 185 129 / 0.3);
}
.status-partial {
  background-color: rgb(245 158 11 / 0.15);
  color: rgb(180 83 9); /* amber-700 */
  border-color: rgb(245 158 11 / 0.3);
}
.status-unpaid {
  background-color: rgb(244 63 94 / 0.15);
  color: rgb(190 18 60); /* rose-700 */
  border-color: rgb(244 63 94 / 0.3);
}
.status-vacant {
  background-color: rgb(100 116 139 / 0.15);
  color: rgb(51 65 85); /* slate-700 */
  border-color: rgb(100 116 139 / 0.3);
}
.status-credit {
  background-color: rgb(14 165 233 / 0.15);
  color: rgb(3 105 161); /* sky-700 */
  border-color: rgb(14 165 233 / 0.3);
}
.dark .status-paid { color: rgb(52 211 153); }
.dark .status-partial { color: rgb(251 191 36); }
.dark .status-unpaid { color: rgb(251 113 133); }
.dark .status-vacant { color: rgb(148 163 184); }
.dark .status-credit { color: rgb(56 189 248); }