/* ==========================================================================
   Energy System Builder - shared stylesheet
   Loaded on every page alongside the Tailwind CDN script. Only holds the
   handful of things Tailwind's utility classes don't cover directly:
   reusable form-control classes, and small framework-glue fixes (Alpine's
   x-cloak needs an actual CSS rule to do anything).
   ========================================================================== */

:root {
  /* Change this single value to update all dashboard pieces */
  --dashboard-radius: 0.25rem; /* 16px - equivalent to rounded-xl */
}


.curve {
  border-radius: var(--dashboard-radius);
}

.curve-t {
  border-top-left-radius: var(--dashboard-radius);
  border-top-right-radius: var(--dashboard-radius);
}


/* Alpine.js: hide [x-cloak] elements until Alpine has initialized, so the
   mobile sidebar overlay doesn't flash visible on page load. */
[x-cloak] {
  display: none !important;
}

/* Shared form-control classes, used on the Inputs and Presets forms. */
.field {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid rgb(203 213 225); /* slate-300 */
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  background-color: #fff;
  color: rgb(30 41 59); /* slate-800 */
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field:focus {
  outline: none;
  border-color: rgb(59 130 246); /* blue-500 */
  box-shadow: 0 0 0 1px rgb(59 130 246);
}

.field::placeholder {
  color: rgb(148 163 184); /* slate-400 */
}

.lbl {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(51 65 85); /* slate-700 */
}

/* Thin, unobtrusive scrollbar for the wide tables on the Presets page. */
.table-scroll::-webkit-scrollbar {
  height: 8px;
}
.table-scroll::-webkit-scrollbar-thumb {
  background-color: rgb(203 213 225);
  border-radius: 9999px;
}

/* Sidebar nav links get a smooth color transition instead of an abrupt swap. */
aside nav a {
  transition: background-color 0.15s ease, color 0.15s ease;
}