/* Reusable component classes (plain CSS so they work with the Tailwind CDN) */
.card { background: #fff; border-radius: 1rem; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06); border: 1px solid #eef0f4; }
.label { display: block; font-size: .8125rem; font-weight: 600; color: #334155; margin-bottom: .375rem; }
.input { width: 100%; border: 1px solid #e2e8f0; background: #fff; border-radius: .75rem; padding: .625rem .875rem; font-size: .875rem; color: #0f172a; transition: border-color .15s, box-shadow .15s; outline: none; }
.input:focus { border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99,102,241,.12); }
.input:disabled, .input[readonly] { background: #f8fafc; color: #64748b; }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .875rem center; padding-right: 2.25rem; }
textarea.input { min-height: 90px; resize: vertical; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: .75rem; padding: .625rem 1.125rem; font-size: .875rem; font-weight: 600; transition: all .15s; white-space: nowrap; cursor: pointer; border: 1px solid transparent; }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-primary { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; box-shadow: 0 4px 14px -4px rgba(79,70,229,.5); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.07); box-shadow: 0 6px 18px -4px rgba(79,70,229,.55); }
.btn-success { background: #059669; color: #fff; }
.btn-success:hover:not(:disabled) { background: #047857; }
.btn-danger { background: #e11d48; color: #fff; }
.btn-danger:hover:not(:disabled) { background: #be123c; }
.btn-light { background: #fff; color: #334155; border-color: #e2e8f0; }
.btn-light:hover:not(:disabled) { background: #f8fafc; }
.btn-sm { padding: .375rem .75rem; font-size: .8125rem; border-radius: .625rem; }

.table { width: 100%; font-size: .875rem; }
.table th { text-align: left; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #64748b; background: #f8fafc; padding: .75rem 1rem; white-space: nowrap; }
.table td { padding: .75rem 1rem; border-top: 1px solid #f1f5f9; vertical-align: middle; }
.table tbody tr:hover td { background: #fafbff; }

.chip { display: inline-flex; align-items: center; gap: .25rem; border-radius: 9999px; padding: .125rem .5rem; font-size: .7rem; font-weight: 600; }
.spinner { width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .6s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); z-index: 60; display: none; align-items: flex-start; justify-content: center; padding: 5vh 1rem; overflow-y: auto; }
.modal-backdrop.open { display: flex; }
.modal { background: #fff; border-radius: 1.25rem; width: 100%; max-width: 32rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); animation: pop .15s ease-out; }
.modal.modal-lg { max-width: 48rem; }
@keyframes pop { from { transform: translateY(8px) scale(.98); opacity: 0; } }

.toast { animation: pop .2s ease-out; }
.link-cell { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }

/* ---------- Mobile ---------- */
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }
@media (max-width: 640px) {
    /* 16px stops iOS Safari from zooming into inputs on focus */
    .input, select.input, textarea.input { font-size: 16px; }
    .card { border-radius: .875rem; }
    #toasts { top: auto; bottom: 5.5rem; }
}
/* Mobile list rows used instead of wide tables on small screens */
.m-row { padding: .875rem 1rem; border-top: 1px solid #f1f5f9; }
.m-row:first-child { border-top: 0; }