/*
  School OS styles that sit on top of the committed Tailwind build in
  /vendor/tailwind.css. Regenerate that build after adding utility classes not
  already present:

    tailwindcss -i static/css/tailwind.src.css -o static/vendor/tailwind.css --minify

  No font is fetched from a CDN. Schools run this on slow or filtered
  connections, and a blocked font host must not delay the fee counter.
*/
:root {
  --so-brand: #1f6f43;
  --so-brand-soft: #eaf5ee;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

.so-brand-bg { background-color: var(--so-brand); }
.so-brand-text { color: var(--so-brand); }
.so-brand-soft { background-color: var(--so-brand-soft); }

.so-nav-link[aria-current="page"] {
  background-color: var(--so-brand-soft);
  color: var(--so-brand);
  font-weight: 600;
}

.so-nav-link.so-disabled {
  opacity: .45;
  cursor: not-allowed;
}

.so-field {
  display: block;
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: .5rem;
  padding: .5rem .75rem;
  font-size: .875rem;
  background: #fff;
}

.so-field:focus {
  outline: 2px solid var(--so-brand);
  outline-offset: -1px;
  border-color: var(--so-brand);
}

.so-label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: .25rem;
}

.so-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  border-radius: .5rem;
  padding: .5rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  background: var(--so-brand);
  color: #fff;
  border: 1px solid var(--so-brand);
  cursor: pointer;
}

.so-btn-ghost {
  background: #fff;
  color: #374151;
  border-color: #d1d5db;
}

.so-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / .04);
}

.so-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.so-table th {
  text-align: left;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #6b7280;
  padding: .625rem .75rem;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}
.so-table td { padding: .625rem .75rem; border-bottom: 1px solid #f3f4f6; }
.so-table tr:last-child td { border-bottom: 0; }

.so-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: .125rem .5rem;
  font-size: .6875rem;
  font-weight: 600;
}
.so-badge-on { background: var(--so-brand-soft); color: var(--so-brand); }
.so-badge-off { background: #f3f4f6; color: #6b7280; }

/*
  Utilities used by School OS templates that are absent from the committed
  Tailwind build (that build was generated from the founder dashboard's markup,
  so it only contains what those templates used). Kept here until the standalone
  CLI regenerates the build from this project's own templates.
*/
.uppercase { text-transform: uppercase; }
.text-right { text-align: right; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.max-w-md { max-width: 28rem; }
.mt-5 { margin-top: 1.25rem; }
.pb-2 { padding-bottom: .5rem; }
.py-2\.5 { padding-top: .625rem; padding-bottom: .625rem; }
.space-y-2 > * + * { margin-top: .5rem; }
.space-y-4 > * + * { margin-top: 1rem; }

@media (min-width: 640px) {
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:flex { display: flex; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Phase 2 additions. */
.grow { flex-grow: 1; }
.mb-4 { margin-bottom: 1rem; }
.h-20 { height: 5rem; }
.w-20 { width: 5rem; }

/* Phase 3 additions. */
.ml-2 { margin-left: .5rem; }
.pt-5 { padding-top: 1.25rem; }

/* Phase 4 — attendance marking. Big tap targets: this screen is used daily,
   often on a phone, and speed is the feature. */
.so-marks { display: inline-flex; gap: .25rem; }
.so-mark { position: relative; display: inline-flex; }
.so-mark input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0;
                 cursor: pointer; }
.so-mark span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; height: 2rem; border: 1px solid #d1d5db; border-radius: .5rem;
  font-size: .8125rem; font-weight: 600; color: #6b7280; background: #fff;
  cursor: pointer; user-select: none;
}
.so-mark input:checked + span { background: var(--so-brand); border-color: var(--so-brand);
                                color: #fff; }
.so-mark input:focus-visible + span { outline: 2px solid var(--so-brand); outline-offset: 1px; }

/* Phase 5 additions. */
.inline { display: inline; }
@media (min-width: 640px) { .sm\:col-span-3 { grid-column: span 3 / span 3; } }

/* Phase 6 additions. */
.hover\:border-gray-300:hover { border-color: #d1d5db; }
@media (min-width: 1024px) { .lg\:col-span-3 { grid-column: span 3 / span 3; } }