/* ============================================
   COMPONENTS.CSS - v2.0 Modern Theme
   Uses theme.css variables
   REVERT: Replace with components.css.bak
   ============================================ */

/* Card styling */
.card {
    border-radius: var(--t-card-radius);
    box-shadow: var(--t-card-shadow);
    border: 1px solid var(--t-card-border);
}

.card-header {
    background-color: var(--t-card-header-bg);
    border-bottom: 1px solid var(--t-border);
    padding: 14px 20px;
}

.card-body {
    padding: 20px;
}

/* Table styling */
.table {
    margin-bottom: 0;
}

.table th {
    background-color: var(--t-table-header-bg);
    font-weight: 500;
    color: var(--t-table-header-text);
    border-top: none;
    font-size: 13px;
}

.table td, .table th {
    padding: 12px 15px;
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: var(--t-table-row-hover);
}

/* Button spacing */
.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.me-1 {
    margin-right: 0.25rem;
}

.me-2 {
    margin-right: 0.5rem;
}

/* Form controls */
.form-control:focus {
    border-color: var(--t-input-focus-border);
    box-shadow: var(--t-input-focus-shadow);
}

.input-group-text {
    background-color: var(--t-card-header-bg);
    border-right: none;
    border-color: var(--t-input-border);
}

.input-group .form-control {
    border-left: none;
}

/* Modal backdrop */
.modal-backdrop {
    opacity: 0.5;
}

/* Bootstrap color overrides - Brand Cyan #00BCE4 */
.bg-primary {
    background-color: var(--t-secondary) !important;  /* Brand Teal #22B2A8 */
}

.btn-primary {
    background-color: var(--t-btn-primary-bg) !important;
    border-color: var(--t-btn-primary-bg) !important;
}

.btn-primary:hover {
    background-color: var(--t-btn-primary-hover) !important;
    border-color: var(--t-btn-primary-hover) !important;
}

.btn-outline-primary {
    color: var(--t-primary) !important;
    border-color: var(--t-primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--t-primary) !important;
    border-color: var(--t-primary) !important;
    color: #fff !important;
}

/* Modal headers - Brand Teal */
.modal-header.bg-primary {
    background-color: var(--t-secondary) !important;
}

/* Badges - Brand Cyan */
.badge.bg-primary {
    background-color: var(--t-primary) !important;
}

/* Border and text - Brand colors */
.border-primary {
    border-color: var(--t-secondary) !important;
}

.text-primary {
    color: var(--t-primary) !important;
}

/* Spinners */
.spinner-border {
    width: 3rem;
    height: 3rem;
}