/* ==========================================================================
   PTCCB Bootstrap Extended Overrides
   Uses design tokens from design-tokens.css
   ========================================================================== */

/* ===== Components ===== */

.card {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
    background-color: var(--color-surface);
    transition: box-shadow var(--transition-normal);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--space-4) var(--space-5);
    font-weight: var(--font-weight-semibold);
}

.card-body {
    padding: var(--space-5);
}

.card-footer {
    background-color: var(--color-secondary-50);
    border-top: 1px solid var(--color-border-light);
}

.dropdown-menu {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
    animation: fadeInDown var(--transition-normal) forwards;
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-base);
    color: var(--color-text);
    transition: background-color var(--transition-fast);
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--color-secondary-50);
    color: var(--color-text);
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
}

.dropdown-divider {
    border-color: var(--color-border-light);
    margin: var(--space-1) 0;
}

.offcanvas-end {
    --bs-offcanvas-width: 320px;
}

/* ===== Background Colors ===== */

.bg-primary { background-color: var(--color-primary) !important; }
.bg-danger { background-color: var(--color-danger) !important; }
.bg-success { background-color: var(--color-success) !important; }
.bg-info { background-color: var(--color-info) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-purple { background-color: var(--color-accent) !important; }
.bg-orange { background-color: var(--color-warning-700) !important; }
.bg-bronze { background-color: var(--color-warning-600) !important; }
.bg-pink { background-color: var(--color-danger-500) !important; }
.bg-tiffany { background-color: var(--color-primary-600) !important; }
.bg-login { background-color: var(--color-secondary-800) !important; }
.bg-surface { background-color: var(--color-body-bg) !important; }
.bg-white-1 { background-color: rgba(255, 255, 255, 0.16) !important; }

/* Light backgrounds */
.bg-light-primary { background-color: var(--color-primary-50) !important; }
.bg-light-success { background-color: var(--color-success-50) !important; }
.bg-light-danger { background-color: var(--color-danger-50) !important; }
.bg-light-info { background-color: var(--color-info-50) !important; }
.bg-light-warning { background-color: var(--color-warning-50) !important; }
.bg-light-purple { background-color: var(--color-accent-50) !important; }
.bg-light-orange { background-color: var(--color-warning-50) !important; }
.bg-light-bronze { background-color: var(--color-warning-50) !important; }
.bg-light-pink { background-color: var(--color-danger-50) !important; }
.bg-light-tiffany { background-color: var(--color-primary-50) !important; }
.bg-light-dark { background-color: var(--color-secondary-100) !important; }

/* Social media colors */
.bg-facebook { background-color: #3b5998 !important; }
.bg-twitter { background-color: #1da1f2 !important; }
.bg-google { background-color: #ea4335 !important; }
.bg-linkedin { background-color: #0a66c2 !important; }

/* Gradients */
.bg-gradient-purple { background: linear-gradient(135deg, var(--color-accent-500), var(--color-danger-500)); }
.bg-gradient-success { background: linear-gradient(135deg, var(--color-success-600), var(--color-success-400)); }
.bg-gradient-danger { background: linear-gradient(135deg, var(--color-danger-600), var(--color-warning-500)); }
.bg-gradient-info { background: linear-gradient(135deg, var(--color-info-600), var(--color-info-400)); }
.bg-gradient-warning { background: linear-gradient(135deg, var(--color-warning-600), var(--color-warning-400)); }
.bg-gradient-voilet { background: linear-gradient(135deg, var(--color-info-500), var(--color-accent-500)); }
.bg-gradient-royal { background: linear-gradient(135deg, var(--color-secondary-700), var(--color-secondary-900)); }

/* ===== Text Colors ===== */

.text-primary { color: var(--color-primary) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-success { color: var(--color-success) !important; }
.text-info { color: var(--color-info) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-purple { color: var(--color-accent) !important; }
.text-orange { color: var(--color-warning-700) !important; }
.text-bronze { color: var(--color-warning-600) !important; }
.text-pink { color: var(--color-danger-500) !important; }
.text-tiffany { color: var(--color-primary) !important; }
.text-option { color: var(--color-text) !important; }
.text-facebook { color: #3b5998 !important; }
.text-twitter { color: #1da1f2 !important; }
.text-youtube { color: #ea4335 !important; }
.text-sky-light { color: var(--color-info-200); }

/* ===== Border Colors ===== */

.border-primary { border-color: var(--color-primary) !important; }
.border-danger { border-color: var(--color-danger) !important; }
.border-success { border-color: var(--color-success) !important; }
.border-info { border-color: var(--color-info) !important; }
.border-warning { border-color: var(--color-warning) !important; }
.border-purple { border-color: var(--color-accent) !important; }
.border-orange { border-color: var(--color-warning-700) !important; }
.border-bronze { border-color: var(--color-warning-600) !important; }
.border-pink { border-color: var(--color-danger-500) !important; }
.border-tiffany { border-color: var(--color-primary) !important; }
.border-light-1 { border-color: rgba(255, 255, 255, 0.24) !important; }

/* ===== Buttons ===== */

.btn {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.5;
}

.btn i {
    vertical-align: middle;
    font-size: 1rem;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
}

.btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
}

.btn-lg {
    padding: 0.65rem 1.5rem;
    font-size: var(--font-size-md);
    border-radius: var(--radius-md);
}

/* Primary */
.btn-primary {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 1px 3px rgba(13, 148, 136, 0.3);
}
.btn-primary:hover {
    color: #fff;
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.35);
    transform: translateY(-1px);
}
.btn-check:focus + .btn-primary, .btn-primary:focus {
    color: #fff;
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    box-shadow: var(--shadow-focus);
}
.btn-check:active + .btn-primary, .btn-check:checked + .btn-primary,
.btn-primary.active, .btn-primary:active, .show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--color-primary-800);
    border-color: var(--color-primary-800);
}
.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: var(--color-primary-400);
    border-color: var(--color-primary-400);
    opacity: 0.65;
    box-shadow: none;
    transform: none;
}

/* Secondary */
.btn-secondary {
    color: #fff;
    background-color: var(--color-secondary-500);
    border-color: var(--color-secondary-500);
}
.btn-secondary:hover {
    color: #fff;
    background-color: var(--color-secondary-600);
    border-color: var(--color-secondary-600);
}
.btn-check:focus + .btn-secondary, .btn-secondary:focus {
    color: #fff;
    background-color: var(--color-secondary-600);
    border-color: var(--color-secondary-600);
    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.25);
}
.btn-check:active + .btn-secondary, .btn-check:checked + .btn-secondary,
.btn-secondary.active, .btn-secondary:active, .show > .btn-secondary.dropdown-toggle {
    color: #fff;
    background-color: var(--color-secondary-700);
    border-color: var(--color-secondary-700);
}
.btn-secondary.disabled, .btn-secondary:disabled {
    color: #fff;
    background-color: var(--color-secondary-400);
    border-color: var(--color-secondary-400);
}

/* Success */
.btn-success {
    color: #fff;
    background-color: var(--color-success);
    border-color: var(--color-success);
}
.btn-success:hover {
    color: #fff;
    background-color: var(--color-success-700);
    border-color: var(--color-success-700);
}
.btn-check:focus + .btn-success, .btn-success:focus {
    color: #fff;
    background-color: var(--color-success-700);
    border-color: var(--color-success-700);
    box-shadow: var(--shadow-focus-success);
}
.btn-check:active + .btn-success, .btn-check:checked + .btn-success,
.btn-success.active, .btn-success:active, .show > .btn-success.dropdown-toggle {
    color: #fff;
    background-color: var(--color-success-700);
    border-color: var(--color-success-700);
}
.btn-success.disabled, .btn-success:disabled {
    color: #fff;
    background-color: var(--color-success-400);
    border-color: var(--color-success-400);
}

/* Info */
.btn-info {
    color: #fff;
    background-color: var(--color-info);
    border-color: var(--color-info);
}
.btn-info:hover {
    color: #fff;
    background-color: var(--color-info-700);
    border-color: var(--color-info-700);
}
.btn-check:focus + .btn-info, .btn-info:focus {
    color: #fff;
    background-color: var(--color-info-700);
    border-color: var(--color-info-700);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.25);
}
.btn-info.disabled, .btn-info:disabled {
    color: #fff;
    background-color: var(--color-info-400);
    border-color: var(--color-info-400);
}

/* Warning */
.btn-warning {
    color: var(--color-secondary-900);
    background-color: var(--color-warning-400);
    border-color: var(--color-warning-400);
}
.btn-warning:hover {
    color: var(--color-secondary-900);
    background-color: var(--color-warning-500);
    border-color: var(--color-warning-500);
}
.btn-check:focus + .btn-warning, .btn-warning:focus {
    color: var(--color-secondary-900);
    background-color: var(--color-warning-500);
    border-color: var(--color-warning-500);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.25);
}
.btn-warning.disabled, .btn-warning:disabled {
    color: var(--color-secondary-900);
    background-color: var(--color-warning-200);
    border-color: var(--color-warning-200);
}

/* Danger */
.btn-danger {
    color: #fff;
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}
.btn-danger:hover {
    color: #fff;
    background-color: var(--color-danger-700);
    border-color: var(--color-danger-700);
}
.btn-check:focus + .btn-danger, .btn-danger:focus {
    color: #fff;
    background-color: var(--color-danger-700);
    border-color: var(--color-danger-700);
    box-shadow: var(--shadow-focus-danger);
}
.btn-check:active + .btn-danger, .btn-check:checked + .btn-danger,
.btn-danger.active, .btn-danger:active, .show > .btn-danger.dropdown-toggle {
    color: #fff;
    background-color: var(--color-danger-700);
    border-color: var(--color-danger-700);
}
.btn-danger.disabled, .btn-danger:disabled {
    color: #fff;
    background-color: var(--color-danger-400);
    border-color: var(--color-danger-400);
}

/* Light */
.btn-light {
    color: var(--color-text);
    background-color: var(--color-secondary-100);
    border-color: var(--color-secondary-200);
}
.btn-light:hover {
    color: var(--color-text);
    background-color: var(--color-secondary-200);
    border-color: var(--color-secondary-300);
}
.btn-check:focus + .btn-light, .btn-light:focus {
    box-shadow: 0 0 0 3px rgba(203, 213, 225, 0.5);
}

/* Dark */
.btn-dark {
    color: #fff;
    background-color: var(--color-secondary-800);
    border-color: var(--color-secondary-800);
}
.btn-dark:hover {
    color: #fff;
    background-color: var(--color-secondary-900);
    border-color: var(--color-secondary-900);
}
.btn-check:focus + .btn-dark, .btn-dark:focus {
    box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.25);
}

/* White */
.btn-white {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}
.btn-white:hover {
    background-color: var(--color-secondary-50);
    border-color: var(--color-secondary-300);
}

/* Outline Buttons */
.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
    padding: 0.35rem 1rem;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
}
.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
    box-shadow: var(--shadow-focus);
}
.btn-check:active + .btn-outline-primary, .btn-check:checked + .btn-outline-primary,
.btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show, .btn-outline-primary:active {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
    color: var(--color-primary-400);
    background-color: transparent;
}

.btn-outline-secondary {
    color: var(--color-secondary-500);
    border-color: var(--color-secondary-300);
    padding: 0.35rem 1rem;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
}
.btn-outline-secondary:hover {
    color: #fff;
    background-color: var(--color-secondary-500);
    border-color: var(--color-secondary-500);
}
.btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus {
    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.2);
}

.btn-outline-success {
    color: var(--color-success);
    border-color: var(--color-success);
    padding: 0.35rem 1rem;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
}
.btn-outline-success:hover {
    color: #fff;
    background-color: var(--color-success);
    border-color: var(--color-success);
}
.btn-check:focus + .btn-outline-success, .btn-outline-success:focus {
    box-shadow: var(--shadow-focus-success);
}

.btn-outline-info {
    color: var(--color-info);
    border-color: var(--color-info);
}
.btn-outline-info:hover {
    color: #fff;
    background-color: var(--color-info);
    border-color: var(--color-info);
}

.btn-outline-warning {
    color: var(--color-warning);
    border-color: var(--color-warning);
}
.btn-outline-warning:hover {
    color: var(--color-secondary-900);
    background-color: var(--color-warning);
    border-color: var(--color-warning);
}

.btn-outline-danger {
    color: var(--color-danger);
    border-color: var(--color-danger);
    padding: 0.35rem 1rem;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
}
.btn-outline-danger:hover {
    color: #fff;
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}
.btn-check:focus + .btn-outline-danger, .btn-outline-danger:focus {
    box-shadow: var(--shadow-focus-danger);
}

.btn-outline-light {
    color: var(--color-secondary-300);
    border-color: var(--color-secondary-300);
}
.btn-outline-light:hover {
    color: var(--color-text);
    background-color: var(--color-secondary-100);
    border-color: var(--color-secondary-200);
}

.btn-outline-dark {
    color: var(--color-secondary-800);
    border-color: var(--color-secondary-800);
}
.btn-outline-dark:hover {
    color: #fff;
    background-color: var(--color-secondary-800);
    border-color: var(--color-secondary-800);
}

.btn-outline-brown {
    color: var(--color-secondary-600);
    border-color: var(--color-secondary-400);
    padding: 0.35rem 1rem;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}
.btn-outline-brown:hover {
    color: #fff;
    background-color: var(--color-secondary-600);
    border-color: var(--color-secondary-600);
}

.btn-link {
    font-weight: var(--font-weight-normal);
    color: var(--color-link);
    text-decoration: none;
}
.btn-link:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

/* ===== Nav Tabs & Pills ===== */

.nav-tabs .nav-link {
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-top-right-radius: var(--radius-md);
    border-top-left-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    padding: 0.65rem 1.25rem;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.nav-tabs .nav-link:hover {
    color: var(--color-text);
    border-color: var(--color-secondary-200) var(--color-secondary-200) transparent;
}

.nav-tabs .nav-link.active {
    color: var(--color-primary);
    border-color: var(--color-primary) var(--color-primary) var(--color-surface);
    font-weight: var(--font-weight-semibold);
}

.nav-pills .nav-link {
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    padding: 0.5rem 1rem;
}

.nav-pills .nav-link.active {
    color: #fff;
    background-color: var(--color-primary);
}

.nav-primary.nav-tabs .nav-link.active {
    color: var(--color-primary);
    border-color: var(--color-primary) var(--color-primary) var(--color-surface);
}

.nav-danger.nav-tabs .nav-link.active {
    color: var(--color-danger);
    border-color: var(--color-danger) var(--color-danger) var(--color-surface);
}

.nav-success.nav-tabs .nav-link.active {
    color: var(--color-success);
    border-color: var(--color-success) var(--color-success) var(--color-surface);
}

.nav-warning.nav-tabs .nav-link.active {
    color: var(--color-warning);
    border-color: var(--color-warning) var(--color-warning) var(--color-surface);
}

.nav-pills-danger.nav-pills .nav-link.active {
    color: #fff;
    background-color: var(--color-danger);
}

.nav-pills-success.nav-pills .nav-link.active {
    color: #fff;
    background-color: var(--color-success);
}

.nav-pills-warning.nav-pills .nav-link.active {
    color: var(--color-secondary-900);
    background-color: var(--color-warning-400);
}

.nav-search input.form-control {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.nav-search button[type=submit] {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* ===== Tables ===== */

.table {
    --bs-table-striped-bg: var(--color-secondary-50);
    --bs-table-hover-bg: var(--color-primary-50);
    font-size: var(--font-size-base);
    color: var(--color-text);
}

.table > thead {
    background-color: var(--color-secondary-50);
    border-bottom: 2px solid var(--color-secondary-200);
}

.table > thead th {
    font-weight: var(--font-weight-semibold);
    color: var(--color-secondary-700);
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    letter-spacing: 0.05em;
    padding: var(--space-3) var(--space-4);
    white-space: nowrap;
}

.table > tbody > tr {
    transition: background-color var(--transition-fast);
}

.table > tbody > tr:hover {
    background-color: var(--color-primary-50);
}

.table > tbody td {
    padding: var(--space-3) var(--space-4);
    vertical-align: middle;
    border-color: var(--color-border-light);
}

.table-light {
    --bs-table-bg: var(--color-secondary-50);
    --bs-table-border-color: var(--color-secondary-200);
}

.color-table .table {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.22);
}

.info-table .table, .warning-table .table {
    color: var(--color-text);
    border-color: var(--color-border-light);
}

/* Syncfusion Grid Overrides - moved to style.css section 11 */

/* ===== Forms ===== */

.form-control {
    height: 44px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-secondary-300);
    font-size: var(--font-size-base);
    color: var(--color-text);
    padding: 0.5rem 0.875rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    background-color: var(--color-surface);
}

.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
    outline: none;
}

.form-control::placeholder {
    color: var(--color-secondary-400);
    opacity: 1;
}

.form-control:disabled, .form-control[readonly] {
    background-color: var(--color-secondary-50);
    color: var(--color-text-secondary);
}

textarea.form-control {
    height: auto;
    min-height: 80px;
}

.form-select {
    height: 44px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-secondary-300);
    font-size: var(--font-size-base);
    color: var(--color-text);
    padding: 0.5rem 2.25rem 0.5rem 0.875rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.form-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-secondary-700);
    margin-bottom: 0.375rem;
}

.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.form-check-input:focus {
    box-shadow: var(--shadow-focus);
    border-color: var(--color-primary);
}

.input-group-text {
    border-radius: var(--radius-md);
    border-color: var(--color-secondary-300);
    background-color: var(--color-secondary-50);
    color: var(--color-text-secondary);
}

.was-validated .form-control:invalid, .form-control.is-invalid {
    border-color: var(--color-danger);
}

.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
    box-shadow: var(--shadow-focus-danger);
}

.was-validated .form-control:valid, .form-control.is-valid {
    border-color: var(--color-success);
}

.invalid-feedback {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
}

.valid-feedback {
    color: var(--color-success);
    font-size: var(--font-size-sm);
}

/* ===== Badges ===== */

.badge {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
    padding: 0.35em 0.75em;
    border-radius: var(--radius-full);
    letter-spacing: 0.02em;
}

.badge.bg-primary { background-color: var(--color-primary-100) !important; color: var(--color-primary-700) !important; }
.badge.bg-success { background-color: var(--color-success-100) !important; color: var(--color-success-700) !important; }
.badge.bg-danger { background-color: var(--color-danger-100) !important; color: var(--color-danger-700) !important; }
.badge.bg-warning { background-color: var(--color-warning-100) !important; color: var(--color-warning-700) !important; }
.badge.bg-info { background-color: var(--color-info-100) !important; color: var(--color-info-700) !important; }
.badge.bg-dark { background-color: var(--color-secondary-700) !important; color: #fff !important; }

/* Solid badges (when explicitly needed) */
.badge-solid.bg-primary { background-color: var(--color-primary) !important; color: #fff !important; }
.badge-solid.bg-success { background-color: var(--color-success) !important; color: #fff !important; }
.badge-solid.bg-danger { background-color: var(--color-danger) !important; color: #fff !important; }

/* ===== Alerts ===== */

.alert {
    border-radius: var(--radius-lg);
    border: 1px solid;
    font-size: var(--font-size-base);
    padding: var(--space-3) var(--space-4);
}

.alert-primary {
    background-color: var(--color-primary-50);
    border-color: var(--color-primary-200);
    color: var(--color-primary-800);
}

.alert-success {
    background-color: var(--color-success-50);
    border-color: var(--color-success-200);
    color: var(--color-success-700);
}

.alert-danger {
    background-color: var(--color-danger-50);
    border-color: var(--color-danger-200);
    color: var(--color-danger-700);
}

.alert-warning {
    background-color: var(--color-warning-50);
    border-color: var(--color-warning-200);
    color: var(--color-warning-700);
}

.alert-info {
    background-color: var(--color-info-50);
    border-color: var(--color-info-200);
    color: var(--color-info-700);
}

/* ===== Modals ===== */

.modal-content {
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}

.modal-header {
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--space-4) var(--space-5);
}

.modal-title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
    color: var(--color-text-heading);
}

.modal-body {
    padding: var(--space-5);
}

.modal-footer {
    border-top: 1px solid var(--color-border-light);
    padding: var(--space-3) var(--space-5);
}

.btn-close:focus {
    box-shadow: var(--shadow-focus);
}

/* ===== Pagination ===== */

.page-link {
    color: var(--color-text-secondary);
    border-color: var(--color-border);
    border-radius: var(--radius-sm);
    margin: 0 2px;
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
}

.page-link:hover {
    color: var(--color-primary);
    background-color: var(--color-primary-50);
    border-color: var(--color-primary-200);
}

.page-item.active .page-link {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ===== Breadcrumbs ===== */

.breadcrumb {
    font-size: var(--font-size-sm);
    margin-bottom: 0;
}

.breadcrumb-item a {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--color-primary);
}

.breadcrumb-item.active {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}

/* ===== Progress ===== */

.progress {
    height: 8px;
    border-radius: var(--radius-full);
    background-color: var(--color-secondary-100);
}

.progress-bar {
    background-color: var(--color-primary);
    border-radius: var(--radius-full);
}

/* ===== Tooltips & Popovers ===== */

.tooltip-inner {
    background-color: var(--color-secondary-800);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    padding: 0.375rem 0.75rem;
}

.popover {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* ===== Accordion ===== */

.accordion-button:not(.collapsed) {
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
}

.accordion-button:focus {
    box-shadow: var(--shadow-focus);
    border-color: var(--color-primary);
}

/* ===== Toast ===== */

.toast {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* PTCCB theme-aware toasts */
.ptccb-toast {
    border: none !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.1) !important;
    overflow: hidden;
    min-width: 320px;
    max-width: 420px;
}

.ptccb-toast .toast-body {
    padding: 0.85rem 1.1rem;
    font-size: var(--font-size-base);
    line-height: 1.5;
}

.ptccb-toast-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Success toast — uses primary theme color */
.ptccb-toast-success {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

.ptccb-toast-success .ptccb-toast-icon {
    color: rgba(255,255,255,0.9);
}

.ptccb-toast-success .fw-semibold {
    color: #fff !important;
}

/* Danger / failure toast — uses danger color */
.ptccb-toast-danger {
    background-color: var(--color-danger) !important;
    color: #fff !important;
}

.ptccb-toast-danger .ptccb-toast-icon {
    color: rgba(255,255,255,0.9);
}

.ptccb-toast-danger .fw-semibold {
    color: #fff !important;
}