/* Global theme overrides to modernize the UI */
:root{
  --brand:#4f46e5; /* indigo-600 */
  --brand-700:#4338ca; /* indigo-700 */
  --text:#111827; /* gray-900 */
  --muted:#6b7280; /* gray-500 */
  --bg:#f9fafb; /* gray-50 */
  --card:#ffffff; /* white */
  --border:#e5e7eb; /* gray-200 */
}

html,body{height:100%}

/**************** Layout ****************/
body{
  background-color:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container, .max-w-7xl{scroll-margin-top:5rem}

/**************** Navigation ****************/
nav.app-nav{box-shadow:0 1px 0 0 var(--border)}
nav.app-nav .brand{color:var(--text)}

/**************** Buttons ****************/
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:.5rem;font-weight:600}
.btn-primary{background:var(--brand);color:#fff;border:1px solid transparent}
.btn-primary:hover{background:var(--brand-700)}

/* Utility: make a button match the visual height of adjacent inputs
   Use when the button sits next to an input inside a flex row. This
   doesn't rely on CSS variables and will align height by matching
   padding and using a consistent line-height/box-sizing. */
.btn.match-input {
  /* Let the button grow/shrink with its container like the input */
  height: auto; /* keep natural height unless constrained by container */
  padding-top: .5rem;
  padding-bottom: .5rem;
  /* Ensure vertical centering for icon/text */
  display: inline-flex;
  align-items: center;
  /* Use same font-size and line-height as inputs for parity */
  font-size: 0.95rem;
  line-height: 1.25rem;
}

/* Alternate approach when inputs have a fixed height: wrap input+button in a flex container
   and use align-items: stretch; then set .btn.match-input { height: auto; } so both match */
.form-row {
  display: flex;
  align-items: center; /* center by default */
  gap: .5rem;
}
.form-row.align-stretch {
  align-items: stretch;
}
.btn-ghost{background:#fff;border:1px solid var(--border);color:#374151}
.btn-ghost:hover{background:#f9fafb}
.btn-danger{background:#dc2626;color:#fff;border:1px solid transparent}
.btn-danger:hover{background:#b91c1c}

/**************** Cards & Tables ****************/
.card{background:var(--card);border:1px solid var(--border);border-radius:.75rem;box-shadow:0 1px 2px rgb(0 0 0 / 4%)}
.table-base thead th{font-size:.75rem;letter-spacing:.04em;color:#6b7280;text-transform:uppercase}
.table-base tbody tr:hover{background:#f9fafb}

/**************** Forms ****************/
input[type="text"],input[type="number"],input[type="time"],select,textarea{
  border:1px solid var(--border);border-radius:.5rem;padding:.5rem .75rem
}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(79,70,229,.25)}

/**************** Progress ****************/
.progress{height:.5rem;background:#e5e7eb;border-radius:999px;overflow:hidden}
.progress > .bar{height:100%;background:var(--brand)}

/* Fallback utilities for responsive visibility when using static CSS
   Ensures elements like <span class="hidden md:block"> appear at md breakpoint */
@media (min-width: 768px) {
  .md\:block { display: block; }
}

@media (min-width: 640px) {
  .sm\:block { display: block; }
}