/* ZAVGO — small additions on top of Tailwind */

html { color-scheme: light; -webkit-tap-highlight-color: transparent; }
html.dark { color-scheme: dark; }
body { background: #f5f5f5; }
html.dark body { background: #0a0a0a; }

/* ── Splash (plain CSS so it renders before Tailwind compiles) ── */
#splash {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: #0a0a0a; font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  transition: opacity .35s ease, visibility .35s ease;
}
html:not(.dark) #splash { background: #f5f5f5; }
#splash.is-hidden { opacity: 0; visibility: hidden; }
/* Logo: white "Zav" on dark, black "Zav" on light — "Go" stays orange in both */
.splash-wordmark { display: block; width: 220px; max-width: 70vw; height: auto; }
html:not(.dark) .splash-on-dark,
html.dark .splash-on-light { display: none; }
.splash-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid rgba(249, 115, 22, .2); border-top-color: #f97316;
  animation: zef-spin .8s linear infinite;
}
@keyframes zef-spin { to { transform: rotate(360deg); } }

/* Hide the app until the first render finishes */
body:not(.is-ready) #app { visibility: hidden; }

/* ── Form niceties ── */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type='number'] { -moz-appearance: textfield; }
input[type='date']::-webkit-calendar-picker-indicator,
input[type='month']::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; }

/* ── Scrollbars ── */
/* position: relative keeps absolutely-positioned .sr-only cells inside the scroll box */
.thin-scroll { position: relative; scrollbar-width: thin; scrollbar-color: rgba(115, 115, 115, .4) transparent; }
.thin-scroll::-webkit-scrollbar { height: 8px; width: 8px; }
.thin-scroll::-webkit-scrollbar-thumb { background: rgba(115, 115, 115, .4); border-radius: 8px; }

/* ── Toasts ── */
.toast { transform: translateY(-8px); opacity: 0; transition: transform .25s ease, opacity .25s ease; }
.toast.is-in { transform: translateY(0); opacity: 1; }

/* ── Modals ── */
.modal-backdrop { opacity: 0; transition: opacity .2s ease; }
.modal-panel { opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .2s ease, transform .2s ease; }
.modal-open .modal-backdrop { opacity: 1; }
.modal-open .modal-panel { opacity: 1; transform: none; }

/* ── Views ── */
.view-enter { animation: view-in .25s ease both; }
@keyframes view-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.spinner {
  display: inline-block; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: zef-spin .7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  #sidebar, header, #toast-root, [data-noprint] { display: none !important; }
  .lg\:pl-64 { padding-left: 0 !important; }
}

/* ── Permissions: hide controls the signed-in user cannot use (the server enforces the same rules) ── */
body.perm-readonly :is([data-action="log-entry"], [data-action="edit-entry"], [data-action="delete-entry"],
  [data-action="add-expense"], [data-action="edit-expense"], [data-action="delete-expense"],
  [data-action="service-done"], [data-action="edit-car"], [data-action="toggle-active"]),
body:not(.perm-admin) :is([data-action="add-car"], [data-action="delete-car"], [data-action="import-json"],
  [data-action="load-demo"], [data-action="reset-all"], [data-action="import-local"],
  [data-action="add-user"], [data-action="edit-user"], [data-action="delete-user"]) {
  display: none !important;
}

/* ── Brand texture: subtle dot grid for hero panels ── */
.zav-grid {
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 18px 18px;
}