/* Shared component classes (plain CSS so they work with the Tailwind CDN build). */
:root { --brand: #4f46e5; --brand-dark: #4338ca; }
body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.tabular-nums, .num { font-variant-numeric: tabular-nums; }

.card { background: #fff; border: 1px solid #e2e8f0; border-radius: .75rem; padding: 1.25rem; }
.card-title { font-weight: 600; font-size: 1rem; margin-bottom: .75rem; color: #0f172a; }

.lbl { display: block; font-size: .75rem; font-weight: 600; color: #475569; margin-bottom: .25rem; text-transform: uppercase; letter-spacing: .03em; }
.inp { width: 100%; border: 1px solid #cbd5e1; border-radius: .5rem; padding: .5rem .75rem; background: #fff; font-size: .9rem; color: #0f172a; min-height: 2.4rem; }
.inp:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.18); }
select.inp { padding-right: 2rem; }
.req::after { content: " *"; color: #e11d48; }

.btn, .btn-primary, .btn-danger, .btn-success { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; border-radius: .5rem; padding: .5rem 1rem; font-size: .875rem; font-weight: 600; min-height: 2.4rem; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .15s; }
.btn { background: #fff; border-color: #cbd5e1; color: #334155; }
.btn:hover { background: #f8fafc; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-danger { background: #e11d48; color: #fff; }
.btn-danger:hover { background: #be123c; }
.btn-success { background: #059669; color: #fff; }
.btn-success:hover { background: #047857; }
.btn-sm { padding: .25rem .6rem; min-height: 1.9rem; font-size: .8rem; }
button:disabled, .btn-primary:disabled, .btn-success:disabled { opacity: .5; cursor: not-allowed; }

.tbl-wrap { overflow-x: auto; background: #fff; border: 1px solid #e2e8f0; border-radius: .75rem; }
.tbl { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tbl th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #64748b; background: #f8fafc; padding: .65rem .85rem; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.tbl td { padding: .6rem .85rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: #f8fafc; }
.tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tfoot td { font-weight: 700; background: #f8fafc; border-top: 2px solid #e2e8f0; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(15,23,42,.5); display: none; align-items: center; justify-content: center; z-index: 60; padding: 1rem; }
.modal.open { display: flex; }
.modal-box { background: #fff; border-radius: .9rem; width: 100%; max-width: 32rem; max-height: 92vh; overflow-y: auto; padding: 1.5rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.35); }

@media print {
  .no-print { display: none !important; }
  body { background: #fff !important; }
  main { padding: 0 !important; }
  .lg\:ml-64 { margin-left: 0 !important; }
  .card, .tbl-wrap { border: 0 !important; }
}

/* Let grid columns shrink so wide tables scroll inside their box instead of widening the page on phones. */
.grid > * { min-width: 0; }