/* ================================================================
   Components — Reusable CSS Classes (Phase 2)
   ================================================================ */

/* ── Base Input / Select / Textarea ── */
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--input-padding-y) var(--input-padding-x);
    border: var(--input-border);
    border-radius: var(--input-radius);
    box-sizing: border-box;
    font-family: inherit;
    font-size: var(--font-base);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--input-focus-ring);
}

/* ── Smaller variant for filter inputs ── */
.form-input-sm,
.form-select-sm {
    padding: 6px 10px;
    font-size: var(--font-md);
}

/* ── Buttons ── */
.btn, .btn-sm,
.btn-primary, .btn-secondary, .btn-danger, .btn-success, .btn-purple, .btn-amber {
    cursor: pointer;
}
.btn {
    padding: 10px 24px;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-base);
    font-weight: var(--font-weight-semibold);
    transition: background var(--transition-fast);
}
.btn-sm { padding: 4px 10px; font-size: var(--font-sm); }
.btn-primary { background: var(--color-primary); color: #fff; border: none; }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-secondary { background: var(--color-gray-100); color: var(--color-text-secondary); border: var(--input-border); }
.btn-secondary:hover { background: var(--color-gray-200); }
.btn-danger { background: var(--color-danger); color: #fff; border: none; }
.btn-danger:hover { background: var(--color-danger-hover); }
.btn-success { background: var(--color-success); color: #fff; border: none; }
.btn-success:hover { background: #16a34a; }

/* ── Cards ── */
.card {
    background: var(--color-card);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-xl);
}

/* ── Tables ── */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-md);
}
.table th {
    background: var(--color-gray-50);
    padding: 8px 12px;
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-500);
}
.table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border-light);
}
.table tr:hover { background: #fafafa; }

/* ── Modals ── */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    overflow-y: auto;
}
.modal-content {
    background: var(--color-card);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
}

/* ── Form Layout ── */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.form-row-3 {
    grid-template-columns: 1fr 1fr 1fr;
}
.form-group {
    margin-bottom: var(--space-md);
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-size: var(--font-base);
}
.form-label-required::after {
    content: ' *';
    color: var(--color-danger);
}

.btn-purple { background: var(--color-purple); color: #fff; border: none; }
.btn-purple:hover { background: #7c3aed; }
.btn-amber { background: var(--color-warning); color: #fff; border: none; }
.btn-amber:hover { background: #d97706; }

/* ── View / Detail Buttons ── */
.btn-view {
    padding: 4px 10px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    color: #333;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}
.btn-view:hover {
    background: #e5e5e5;
}

.table-th {
    padding: 8px 12px;
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-500);
}
.form-label {
    display: block;
    margin-bottom: 5px;
    font-size: var(--font-base);
}

/* ── Utility Spacing ── */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* ── Flex Helpers ── */
.flex-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── Grid (2-col form) ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }

/* ── Table Cell ── */
.td-center { padding: 10px 12px; text-align: center; }
.td-pad { padding: 10px 12px; }
.td-sm-center { padding: 8px 10px; text-align: center; }

/* ── Typography ── */
.text-muted { font-size: var(--font-md); color: var(--color-text-secondary); }
.text-xs { font-size: var(--font-sm); color: var(--color-gray-500); }
.text-base { font-size: var(--font-base); }
.text-lg { font-size: var(--font-lg); }

/* ── State Placeholders ── */
.state-empty { text-align: center; color: var(--color-gray-400); padding: 30px; font-size: var(--font-base); }
.state-error { text-align: center; color: var(--color-danger); padding: 20px; }
.loading { text-align: center; color: var(--color-gray-400); padding: 20px; }

.td-num { padding: 5px 8px; text-align: right; }
.td-cell { padding: 5px 8px; }
.badge { padding: 2px 10px; border-radius: var(--radius-full); font-size: var(--font-sm); }

/* ── Filter Bar ── */
.filter-select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: var(--radius-md);
    font-size: var(--font-md);
    background: #fff;
    min-width: 150px;
}
.filter-input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: var(--radius-md);
    font-size: var(--font-md);
    width: 180px;
}