/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}
[hidden] { display: none !important; }

/* iOS WebKit adds native month-input padding outside width:100% (bug 301648).
   Keep decoration on the wrapper so the native picker has no extra width. */
.report-month-control { min-width: 0; }
.report-month-input {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 44px;
  text-align: left;
  appearance: none;
}
.report-month-input:focus { outline: none; }
.report-month-input::-webkit-date-and-time-value { text-align: left; }

/* Keep the existing utility palette consistent across every screen. White button
   labels stay white; surfaces and strong button fills have separate dark colors. */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-stone-50: #081d20;
  --color-stone-100: #18373b;
  --color-stone-200: #2c494d;
  --color-stone-300: #537074;
  --color-slate-500: #a4b9bc;
  --color-slate-600: #b9cbcd;
  --color-slate-700: #cfddde;
  --color-slate-900: #edf5f4;
  --color-teal-50: #123e3f;
  --color-teal-700: #83ddd0;
  --color-teal-800: #99e8db;
  --color-teal-900: #bbf1e7;
  --color-red-50: #40282a;
  --color-red-700: #ffb4ad;
  --color-red-800: #ffc7c1;
  --color-amber-50: #393323;
  --color-amber-900: #f4d795;
}
:root[data-theme="dark"] .bg-white { background-color: #102c30; }
:root[data-theme="dark"] .bg-teal-800 { background-color: #0f766e; }
@media (hover: hover) {
  :root[data-theme="dark"] .hover\:bg-teal-900:hover { background-color: #115e59; }
}