/* ==========================================================================
   Odissee Component System
   Semantic CSS classes that layer on Bootstrap 5.
   See .claude/context-frontend.md for full documentation.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons — Prominence Tiers
   Usage: .btn.btn-hero.btn-primary, .btn.btn-compact.btn-outline-secondary
   -------------------------------------------------------------------------- */

/* Hero: large, eye-catching CTAs (login, submit, start survey) */
.btn-hero {
    padding: 0.5rem 1.5rem;
    font-size: 1.125rem;
}
/* Match Bootstrap's btn-lg line-height for consistency */
.btn-hero {
    line-height: 1.5;
    border-radius: var(--bs-border-radius-lg);
}

/* Compact: small inline actions (edit, view all, delete in lists) */
.btn-compact {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: var(--bs-border-radius-sm);
}

/* --------------------------------------------------------------------------
   Cards — Section Card
   Usage: .section-card (replaces .card.shadow-sm.mb-4)
   -------------------------------------------------------------------------- */

.section-card {
    box-shadow: var(--bs-box-shadow-sm);
    margin-bottom: 1.5rem;      /* mb-4 = 1.5rem */
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-radius: var(--bs-card-border-radius);
    background-color: var(--bs-card-bg);
    display: flex;
    flex-direction: column;
    word-wrap: break-word;
    background-clip: border-box;
}

/* Inherit Bootstrap card internals */
.section-card > .card-header,
.section-card > .card-body,
.section-card > .card-footer,
.section-card > .list-group {
    /* These already inherit from Bootstrap's .card children selectors,
       but section-card isn't .card, so we re-apply key properties. */
}
.section-card > .card-header {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    background-color: var(--bs-card-cap-bg);
    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
.section-card > .card-header:first-child {
    border-radius: calc(var(--bs-card-border-radius) - var(--bs-card-border-width))
                   calc(var(--bs-card-border-radius) - var(--bs-card-border-width))
                   0 0;
}
.section-card > .card-body {
    flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
}
.section-card > .card-footer {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    background-color: var(--bs-card-cap-bg);
    border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
.section-card > .card-footer:last-child {
    border-radius: 0 0
                   calc(var(--bs-card-border-radius) - var(--bs-card-border-width))
                   calc(var(--bs-card-border-radius) - var(--bs-card-border-width));
}
.section-card > .list-group {
    border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
.section-card > .card-header + .list-group,
.section-card > .list-group + .card-footer {
    border-top: 0;
}

/* --------------------------------------------------------------------------
   Card Header Variants
   Usage: .card-header.card-header-primary, .card-header.card-header-danger
   -------------------------------------------------------------------------- */

.card-header-primary {
    background-color: var(--accent-color);
    color: #fff;
    border-bottom-color: var(--accent-color);
}
.card-header-primary a:not(.btn),
.card-header-primary .btn-close {
    color: #fff;
}
.card-header-primary select.btn {
    color: #000;
    background-color: var(--bs-light);
    border-color: var(--bs-light);
}
.card-header-primary .btn-outline-light {
    --bs-btn-border-color: rgba(255, 255, 255, 0.5);
    --bs-btn-hover-border-color: #fff;
}

.card-header-danger {
    background-color: var(--bs-danger);
    color: #fff;
    border-bottom-color: var(--bs-danger);
}

/* Card header with actions (title left, buttons right) */
.card-header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.card-header-actions > :first-child {
    min-width: 0;
}
.card-header-actions > .btn,
.card-header-actions > .btn-group,
.card-header-actions > .d-flex:last-child {
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Empty States
   Usage: .empty-state, .empty-state-sm
   -------------------------------------------------------------------------- */

.empty-state {
    text-align: center;
    color: var(--bs-secondary-color);
    padding: 3rem 1rem;
}
.empty-state .empty-state-icon {
    font-size: 3rem;
    opacity: 0.4;
    margin-bottom: 0.75rem;
    display: block;
}
.empty-state .empty-state-message {
    margin: 0;
}
.empty-state .empty-state-submessage {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    opacity: 0.7;
}

/* Compact variant for inline/smaller contexts */
.empty-state-sm {
    padding: 1.5rem 1rem;
}
.empty-state-sm .empty-state-icon {
    font-size: 2rem;
}

/* --------------------------------------------------------------------------
   Form Labels
   Usage: .form-label.form-label-secondary
   -------------------------------------------------------------------------- */

.form-label-secondary {
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Thumbnails — Image with icon fallback
   Usage: {% include "includes/_thumbnail.html" with image=url icon="bi-graph-up" %}
   -------------------------------------------------------------------------- */

.thumbnail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    flex-shrink: 0;
}
.thumbnail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.thumbnail-fallback {
    color: var(--bs-secondary-color);
    opacity: 0.4;
}

/* Size variants */
.thumbnail-sm  { width: 48px;  height: 48px; }
.thumbnail-sm .thumbnail-fallback  { font-size: 1.5rem; }

.thumbnail-md  { width: 64px;  height: 64px; }
.thumbnail-md .thumbnail-fallback  { font-size: 2rem; }

.thumbnail-lg  { width: 80px;  height: 80px; }
.thumbnail-lg .thumbnail-fallback  { font-size: 2.5rem; }

/* --------------------------------------------------------------------------
   Print — hide component chrome
   -------------------------------------------------------------------------- */

@media print {
    .section-card {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;
    }
    .empty-state {
        display: none;
    }
}