/* ============================================================
   community-components.css

   PURPOSE:
   This file contains ALL shared component styling.

   Component selectors belong here:
   - .app-page-header
   - .app-card
   - .app-chip
   - .app-action-toolbar
   - .app-empty-state
   - .btn-brand-*

   This file should be loaded AFTER:
   - Bootstrap
   - community-theme.css
   - community-layout.css
   ============================================================ */


/* Navbar / Header */

.app-header-gradient,
.app-navbar {
    background: linear-gradient(90deg, var(--brand-primary-dark), var(--brand-primary));
    color: #FFFFFF;
}

.app-navbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: var(--app-shadow-sm);
}

.app-navbar .navbar-brand,
.app-navbar .nav-link,
.app-navbar a {
    color: #FFFFFF;
}

.app-navbar .nav-link:hover,
.app-navbar a:hover {
    color: var(--brand-highlight-light);
}


/* PageHeader component default theme */

.app-page-header {
    background: linear-gradient(
        90deg,
        var(--brand-primary-dark),
        var(--brand-primary)
    );
    color: #FFFFFF;
    border: 1px solid var(--brand-primary-dark);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-sm);
    padding: 1rem;
    margin-bottom: 1rem;
}

.app-page-header-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.app-page-header-title {
    color: #FFFFFF;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.app-page-header-subtitle {
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 0;
}

.app-page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 575.98px) {
    .app-page-header-actions,
    .app-page-header-actions .btn {
        width: 100%;
    }
}


/* AppCard component */

.app-card {
    background-color: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-sm);
    color: var(--app-text);
    overflow: hidden;
}

.app-card-elevated {
    box-shadow: var(--app-shadow);
}

.app-card-header {
    background-color: var(--app-surface-muted);
    border-bottom: 1px solid var(--app-border);
    padding: 0.85rem 1rem;
}

.app-card-title {
    color: var(--app-text);
    font-weight: 700;
    margin-bottom: 0;
}

.app-card-subtitle {
    color: var(--app-text-muted);
    margin-top: 0.25rem;
    margin-bottom: 0;
}

.app-card-body {
    padding: 1rem;
}

.app-card-footer {
    background-color: var(--app-surface-muted);
    border-top: 1px solid var(--app-border);
    padding: 0.85rem 1rem;
}


/* Buttons */

.btn-brand-primary {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--brand-primary-dark);
    --bs-btn-hover-border-color: var(--brand-primary-dark);
    --bs-btn-focus-shadow-rgb: 60, 133, 174;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--brand-primary-dark);
    --bs-btn-active-border-color: var(--brand-primary-dark);
}

.btn-brand-accent {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--brand-accent);
    --bs-btn-border-color: var(--brand-accent);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--brand-accent-dark);
    --bs-btn-hover-border-color: var(--brand-accent-dark);
    --bs-btn-focus-shadow-rgb: 111, 191, 115;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--brand-accent-dark);
    --bs-btn-active-border-color: var(--brand-accent-dark);
}

.btn-brand-highlight {
    --bs-btn-color: var(--app-text);
    --bs-btn-bg: var(--brand-highlight);
    --bs-btn-border-color: var(--brand-highlight);
    --bs-btn-hover-color: var(--app-text);
    --bs-btn-hover-bg: var(--brand-highlight-dark);
    --bs-btn-hover-border-color: var(--brand-highlight-dark);
    --bs-btn-focus-shadow-rgb: 242, 185, 94;
    --bs-btn-active-color: var(--app-text);
    --bs-btn-active-bg: var(--brand-highlight-dark);
    --bs-btn-active-border-color: var(--brand-highlight-dark);
}

.btn-outline-brand-primary {
    --bs-btn-color: var(--brand-primary-dark);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb: 60, 133, 174;
}


/* StatusChip component / badges / chips */

.app-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1;
    border: 1px solid var(--app-border);
    background-color: var(--app-surface);
    color: var(--app-text);
    white-space: nowrap;
}

.app-chip-dot,
.app-status-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    display: inline-block;
    background-color: currentColor;
}

.app-chip-primary,
.badge-brand-primary {
    background-color: var(--brand-primary-light);
    color: var(--brand-primary-dark);
    border-color: color-mix(in srgb, var(--brand-primary), white 55%);
}

.app-chip-accent,
.app-chip-success,
.badge-brand-accent {
    background-color: var(--brand-accent-light);
    color: var(--brand-accent-dark);
    border-color: color-mix(in srgb, var(--brand-accent), white 50%);
}

.app-chip-highlight,
.app-chip-warning,
.badge-brand-highlight {
    background-color: var(--brand-highlight-light);
    color: #7A541C;
    border-color: color-mix(in srgb, var(--brand-highlight), white 45%);
}

.app-chip-danger {
    background-color: #FBEAEA;
    color: var(--status-danger);
    border-color: #E8B8B8;
}

.app-chip-info {
    background-color: var(--brand-primary-light);
    color: var(--brand-primary-dark);
    border-color: color-mix(in srgb, var(--brand-primary), white 55%);
}


/* ActionToolbar component */

.app-action-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.app-action-toolbar-between {
    justify-content: space-between;
}

.app-action-toolbar-end {
    justify-content: flex-end;
}

@media (max-width: 575.98px) {
    .app-action-toolbar {
        align-items: stretch;
    }

    .app-action-toolbar .btn {
        width: 100%;
    }
}


/* EmptyStatePanel component */

.app-empty-state {
    background-color: var(--app-surface);
    border: 1px dashed var(--app-border-dark);
    border-radius: var(--app-radius-lg);
    padding: 2rem 1rem;
    text-align: center;
    color: var(--app-text);
}

.app-empty-state-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    margin: 0 auto 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--brand-primary-light);
    color: var(--brand-primary-dark);
    font-size: 1.5rem;
}

.app-empty-state-title {
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.app-empty-state-message {
    color: var(--app-text-muted);
    margin-bottom: 1rem;
}


/* Callouts */

.app-callout {
    border: 1px solid var(--app-border);
    border-left: 0.35rem solid var(--brand-primary);
    background-color: var(--app-surface);
    border-radius: var(--app-radius);
    padding: 1rem;
}

.app-callout-info {
    border-left-color: var(--status-info);
    background-color: var(--brand-primary-light);
}

.app-callout-success {
    border-left-color: var(--status-success);
    background-color: var(--brand-accent-light);
}

.app-callout-warning {
    border-left-color: var(--status-warning);
    background-color: var(--brand-highlight-light);
}

.app-callout-danger {
    border-left-color: var(--status-danger);
    background-color: #FBEAEA;
}


/* Forms */

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: var(--app-focus-ring);
}

.form-label {
    color: var(--app-text);
    font-weight: 600;
}

.form-text {
    color: var(--app-text-muted);
}

/* Checkbox Styling */

.form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1875rem;
    border: 2px solid var(--app-border-dark);
    border-radius: 0.35rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-check-input:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem rgba(60, 133, 174, 0.15);
}

.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem rgba(60, 133, 174, 0.25);
}

.form-check-input:checked:hover {
    background-color: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
    box-shadow: 0 0 0 0.2rem rgba(60, 133, 174, 0.35);
}

.form-check-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem rgba(60, 133, 174, 0.25);
}

.form-check-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


/* Tables */

.table-app {
    --bs-table-bg: var(--app-surface);
    --bs-table-color: var(--app-text);
    --bs-table-border-color: var(--app-border);
}

.table-app thead th {
    background-color: var(--brand-primary-light);
    color: var(--brand-primary-dark);
    border-bottom-color: var(--app-border-dark);
}

.table-app tbody tr:hover {
    background-color: var(--app-surface-muted);
}


/* Syncfusion wrappers */

.app-syncfusion-surface {
    background-color: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-sm);
    overflow: hidden;
}


/* Utility helpers */

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

.text-brand-accent {
    color: var(--brand-accent-dark) !important;
}

.text-brand-muted {
    color: var(--app-text-muted) !important;
}

.bg-app {
    background-color: var(--app-bg) !important;
}

.bg-surface {
    background-color: var(--app-surface) !important;
}

.border-app {
    border-color: var(--app-border) !important;
}

.shadow-app-sm {
    box-shadow: var(--app-shadow-sm) !important;
}

.shadow-app {
    box-shadow: var(--app-shadow) !important;
}

.rounded-app {
    border-radius: var(--app-radius) !important;
}

.rounded-app-lg {
    border-radius: var(--app-radius-lg) !important;
}