/**
 * Contractors4Christ — Shared Component Library (v2.0)
 *
 * Every reusable UI primitive the product needs, built once on top of
 * design-tokens.css and reused everywhere: search results, category pages,
 * contractor cards, contractor profile, homeowner dashboard, contractor
 * CRM, forms. No page defines its own one-off button/card/badge style —
 * everything composes from these classes, which is what keeps a 15-page
 * product feeling like ONE product instead of a pile of custom screens.
 *
 * Depends on: design-tokens.css (must load first — see AssetLoader).
 * Scoped under the same wrapper classes c4c-base.css resets
 * (.c4c-canvas/.c4c-app/.c4c-card-grid/.c4c-search-app/.c4c-profile/
 * .c4c-group-archive/.c4c-auth-card/.c4c-journey) so it never touches the
 * active theme's own buttons/cards/tables.
 */

/* =========================================================================
   BUTTONS
   ========================================================================= */
.c4c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 600 15px/1 var(--c4c-font);
    padding: 12px 20px;
    border-radius: var(--c4c-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none !important;
    transition: transform var(--c4c-dur-fast) var(--c4c-ease),
                box-shadow var(--c4c-dur-fast) var(--c4c-ease),
                background-color var(--c4c-dur-fast) var(--c4c-ease),
                border-color var(--c4c-dur-fast) var(--c4c-ease);
    min-height: 44px; /* touch target */
}
.c4c-btn:focus-visible {
    outline: 2px solid var(--c4c-brand-gold);
    outline-offset: 2px;
}
.c4c-btn--sm { padding: 8px 14px; font-size: 13px; min-height: 36px; border-radius: var(--c4c-radius-sm); }
.c4c-btn--lg { padding: 14px 28px; font-size: 16px; min-height: 52px; }
.c4c-btn--block { width: 100%; }

.c4c-btn--primary {
    background: linear-gradient(135deg, var(--c4c-brand-gold), var(--c4c-brand-gold-strong));
    color: var(--c4c-gold-ink, #171203);
    box-shadow: var(--c4c-shadow-gold);
}
.c4c-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(201,155,63,.45); }
.c4c-btn--primary:active { transform: translateY(0); }

.c4c-btn--secondary {
    background: var(--c4c-surface);
    color: var(--c4c-text);
    border-color: var(--c4c-border-strong);
}
.c4c-btn--secondary:hover { border-color: var(--c4c-text-secondary); background: var(--c4c-surface-2); }

.c4c-btn--ghost {
    background: transparent;
    color: var(--c4c-text);
}
.c4c-btn--ghost:hover { background: var(--c4c-surface-2); }

.c4c-btn--danger {
    background: var(--c4c-danger-soft);
    color: var(--c4c-danger);
}
.c4c-btn--danger:hover { background: rgba(220,38,38,.18); }

.c4c-btn--icon { padding: 10px; min-width: 44px; }
.c4c-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* =========================================================================
   INPUTS
   ========================================================================= */
.c4c-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--c4c-space-2); }
.c4c-field__label { font: 600 14px/1.3 var(--c4c-font); color: var(--c4c-text); }
.c4c-field__hint { font: var(--c4c-caption); color: var(--c4c-text-tertiary); }
.c4c-field__error { font: var(--c4c-caption); color: var(--c4c-danger); }

.c4c-input,
.c4c-select,
.c4c-textarea {
    width: 100%;
    font: var(--c4c-body);
    font-size: 15px;
    padding: 12px 14px;
    border: 1px solid var(--c4c-border-strong);
    border-radius: var(--c4c-radius-sm);
    background: var(--c4c-surface);
    color: var(--c4c-text);
    min-height: 44px;
    transition: border-color var(--c4c-dur-fast) var(--c4c-ease), box-shadow var(--c4c-dur-fast) var(--c4c-ease);
}
.c4c-textarea { min-height: 120px; resize: vertical; }
.c4c-input:focus, .c4c-select:focus, .c4c-textarea:focus {
    outline: none;
    border-color: var(--c4c-brand-gold);
    box-shadow: 0 0 0 3px var(--c4c-brand-gold-soft);
}
.c4c-input--error, .c4c-textarea--error { border-color: var(--c4c-danger); }
.c4c-input--error:focus, .c4c-textarea--error:focus { box-shadow: 0 0 0 3px var(--c4c-danger-soft); }

/* Large hero-style search input (search bar, dashboards) */
.c4c-search-input {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--c4c-surface);
    border: 1px solid var(--c4c-border);
    border-radius: var(--c4c-radius-full);
    padding: 6px 8px 6px 20px;
    box-shadow: var(--c4c-shadow-md);
}
.c4c-search-input input {
    flex: 1;
    border: none;
    outline: none;
    font: 500 16px/1.3 var(--c4c-font);
    background: transparent;
    color: var(--c4c-text);
    min-height: 44px;
}

/* =========================================================================
   CARDS (generic surface — specific card components extend this)
   ========================================================================= */
.c4c-ui-card {
    background: var(--c4c-surface);
    border: 1px solid var(--c4c-border);
    border-radius: var(--c4c-radius-lg);
    box-shadow: var(--c4c-shadow-sm);
    padding: var(--c4c-space-3);
    transition: box-shadow var(--c4c-dur-base) var(--c4c-ease), transform var(--c4c-dur-base) var(--c4c-ease);
}
.c4c-ui-card--hoverable:hover { box-shadow: var(--c4c-shadow-md); transform: translateY(-2px); }
.c4c-ui-card__title { font: var(--c4c-card-title); color: var(--c4c-text); margin: 0 0 4px; }
.c4c-ui-card__subtitle { font: var(--c4c-secondary); color: var(--c4c-text-secondary); margin: 0 0 var(--c4c-space-2); }

/* Section-card pattern for forms — replaces long unstructured forms */
.c4c-section-card {
    background: var(--c4c-surface);
    border: 1px solid var(--c4c-border);
    border-radius: var(--c4c-radius-lg);
    padding: var(--c4c-space-3);
    margin-bottom: var(--c4c-space-3);
}
.c4c-section-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--c4c-space-2); margin-bottom: var(--c4c-space-2); }
.c4c-section-card__title { font: var(--c4c-h3); color: var(--c4c-text); margin: 0; }
.c4c-section-card__desc { font: var(--c4c-secondary); color: var(--c4c-text-secondary); margin: 4px 0 0; }

/* =========================================================================
   BADGES / STATUS CHIPS
   ========================================================================= */
.c4c-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font: var(--c4c-caption);
    padding: 4px 10px;
    border-radius: var(--c4c-radius-full);
    white-space: nowrap;
}
.c4c-badge--gold    { background: var(--c4c-brand-gold-soft); color: var(--c4c-brand-gold-strong); }
.c4c-badge--success { background: var(--c4c-success-soft); color: var(--c4c-success); }
.c4c-badge--warning { background: var(--c4c-warning-soft); color: var(--c4c-warning-ink, #92610a); }
.c4c-badge--danger  { background: var(--c4c-danger-soft); color: var(--c4c-danger); }
.c4c-badge--info    { background: var(--c4c-info-soft); color: var(--c4c-info); }
.c4c-badge--neutral { background: var(--c4c-surface-2); color: var(--c4c-text-secondary); }

/* Filter chips — toggleable, used on search/results */
.c4c-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 600 14px/1 var(--c4c-font);
    padding: 10px 17px;
    border-radius: var(--c4c-radius-full);
    border: 1px solid var(--c4c-border-strong) !important;
    background: var(--c4c-surface) !important;
    color: var(--c4c-text-secondary) !important;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--c4c-dur-fast) var(--c4c-ease);
    min-height: 40px;
}
.c4c-chip:hover { border-color: var(--c4c-brand-gold); color: var(--c4c-text); }
/* Same root-cause fix as dashboard.css's My Requests chips (v2.5.4): the
   active state used to paint itself with --c4c-text, which is near-white
   in dark mode — a bright white pill against the dark UI, not the plain
   "invisible label" bug it looked like at first. --c4c-active-bg/
   --c4c-active-ink are independent of ink/text and render as the gold
   accent in dark mode instead. */
.c4c-chip.is-active {
    background: var(--c4c-active-bg) !important;
    border-color: var(--c4c-active-bg) !important;
    color: var(--c4c-active-ink, #fff) !important;
}
.c4c-chip.is-active--gold {
    background: var(--c4c-brand-gold);
    border-color: var(--c4c-brand-gold);
    color: var(--c4c-gold-ink, #171203);
}

/* =========================================================================
   TABS
   ========================================================================= */
.c4c-tabs { display: flex; gap: var(--c4c-space-1); border-bottom: 1px solid var(--c4c-border); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.c4c-tabs::-webkit-scrollbar { display: none; }
.c4c-tab {
    font: 600 15px/1 var(--c4c-font);
    color: var(--c4c-text-secondary);
    padding: 13px 4px;
    border-bottom: 2px solid transparent;
    background: none;
    border-top: none; border-left: none; border-right: none;
    cursor: pointer;
    white-space: nowrap;
    margin-right: var(--c4c-space-3);
    transition: color var(--c4c-dur-fast) var(--c4c-ease), border-color var(--c4c-dur-fast) var(--c4c-ease);
}
.c4c-tab:hover { color: var(--c4c-text); }
.c4c-tab.is-active { color: var(--c4c-text); border-bottom-color: var(--c4c-brand-gold); }

/* =========================================================================
   TABLES
   ========================================================================= */
.c4c-table { width: 100%; border-collapse: collapse; font: var(--c4c-secondary); }
.c4c-table th {
    text-align: left;
    font: 600 12px/1.3 var(--c4c-font);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--c4c-text-tertiary);
    padding: 12px 16px;
    border-bottom: 1px solid var(--c4c-border);
}
.c4c-table td { padding: 14px 16px; border-bottom: 1px solid var(--c4c-border); color: var(--c4c-text); }
.c4c-table tr:last-child td { border-bottom: none; }
.c4c-table tr:hover td { background: var(--c4c-surface-2); }

/* =========================================================================
   PROGRESS BAR
   ========================================================================= */
.c4c-progress { height: 8px; border-radius: var(--c4c-radius-full); background: var(--c4c-surface-2); overflow: hidden; }
.c4c-progress__bar { height: 100%; border-radius: var(--c4c-radius-full); background: linear-gradient(90deg, var(--c4c-brand-gold), var(--c4c-brand-gold-strong)); transition: width var(--c4c-dur-slow) var(--c4c-ease); }

/* =========================================================================
   SKELETON LOADERS
   ========================================================================= */
@keyframes c4c-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.c4c-skeleton {
    background: linear-gradient(90deg, var(--c4c-surface-2) 25%, var(--c4c-skeleton-mid, #eceff3) 37%, var(--c4c-surface-2) 63%);
    background-size: 400% 100%;
    animation: c4c-shimmer 1.4s ease infinite;
    border-radius: var(--c4c-radius-sm);
}
.c4c-skeleton--text { height: 14px; margin-bottom: 8px; }
.c4c-skeleton--title { height: 22px; width: 60%; margin-bottom: 12px; }
.c4c-skeleton--card { height: 220px; border-radius: var(--c4c-radius-lg); }
.c4c-skeleton--avatar { width: 56px; height: 56px; border-radius: 50%; }

/* =========================================================================
   NOTIFICATIONS / TOASTS
   ========================================================================= */
.c4c-toast-stack { position: fixed; bottom: calc(var(--c4c-bottomnav-h) + 16px); left: 50%; transform: translateX(-50%); z-index: var(--c4c-z-toast); display: flex; flex-direction: column; gap: 8px; width: min(92vw, 420px); }
.c4c-toast {
    display: flex; align-items: center; gap: 10px;
    /* Same root-cause family as the chip/pagination fix (v2.5.4): a toast
       conventionally stays a neutral dark bubble regardless of theme (the
       standard mobile-toast look), so this is now a fixed pair rather
       than one that flips near-white in dark mode and reappears as a
       stray bright bubble over a dark screen. */
    background: #1F2430; color: #FFFFFF;
    font: 600 14.5px/1.35 var(--c4c-font);
    padding: 12px 16px; border-radius: var(--c4c-radius-md);
    box-shadow: var(--c4c-shadow-lg);
    animation: c4c-toast-in var(--c4c-dur-base) var(--c4c-ease);
    transition: opacity var(--c4c-dur-base) var(--c4c-ease), transform var(--c4c-dur-base) var(--c4c-ease);
}
.c4c-toast--success { background: var(--c4c-success); }
.c4c-toast--danger { background: var(--c4c-danger); }
@keyframes c4c-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================================================
   DIALOGS / MODALS
   ========================================================================= */
.c4c-modal-overlay {
    position: fixed; inset: 0; z-index: var(--c4c-z-modal);
    background: var(--c4c-overlay);
    display: flex; align-items: center; justify-content: center;
    padding: var(--c4c-space-2);
    animation: c4c-fade-in var(--c4c-dur-base) var(--c4c-ease);
}
.c4c-modal {
    background: var(--c4c-surface);
    border-radius: var(--c4c-radius-xl);
    box-shadow: var(--c4c-shadow-lg);
    width: min(92vw, 480px);
    max-height: 88vh;
    overflow-y: auto;
    padding: var(--c4c-space-4);
    animation: c4c-scale-in var(--c4c-dur-base) var(--c4c-ease);
}
.c4c-modal__title { font: var(--c4c-h3); color: var(--c4c-text); margin: 0 0 8px; }
.c4c-modal__body { font: var(--c4c-body); color: var(--c4c-text-secondary); margin-bottom: var(--c4c-space-3); }
.c4c-modal__actions { display: flex; gap: var(--c4c-space-2); flex-wrap: wrap; }
.c4c-modal__close { position: absolute; top: 12px; right: 12px; }

/* =========================================================================
   BOTTOM SHEETS (mobile)
   ========================================================================= */
.c4c-sheet-overlay {
    position: fixed; inset: 0; z-index: var(--c4c-z-sheet);
    background: var(--c4c-overlay);
    animation: c4c-fade-in var(--c4c-dur-base) var(--c4c-ease);
}
.c4c-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--c4c-z-sheet);
    background: var(--c4c-surface);
    border-radius: var(--c4c-radius-xl) var(--c4c-radius-xl) 0 0;
    padding: var(--c4c-space-2) var(--c4c-space-3) calc(var(--c4c-space-3) + env(safe-area-inset-bottom, 0));
    max-height: 85vh; overflow-y: auto;
    box-shadow: 0 -8px 30px rgba(17,24,39,.14);
    animation: c4c-slide-up var(--c4c-dur-base) var(--c4c-ease);
}
.c4c-sheet__handle { width: 40px; height: 4px; border-radius: 999px; background: var(--c4c-border-strong); margin: 4px auto 16px; }

/* =========================================================================
   EMPTY STATES
   ========================================================================= */
.c4c-empty {
    text-align: center;
    padding: var(--c4c-space-6) var(--c4c-space-3);
    color: var(--c4c-text-secondary);
}
.c4c-empty__icon { width: 64px; height: 64px; margin: 0 auto var(--c4c-space-2); color: var(--c4c-text-tertiary); }
.c4c-empty__title { font: var(--c4c-h3); color: var(--c4c-text); margin: 0 0 6px; }
.c4c-empty__desc { font: var(--c4c-body); max-width: 380px; margin: 0 auto var(--c4c-space-3); }

/* =========================================================================
   ANIMATIONS (shared keyframes + utility classes)
   ========================================================================= */
@keyframes c4c-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes c4c-scale-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes c4c-slide-up { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes c4c-slide-in-right { from { transform: translateX(16px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.c4c-anim-fade { animation: c4c-fade-in var(--c4c-dur-base) var(--c4c-ease); }
.c4c-anim-scale { animation: c4c-scale-in var(--c4c-dur-base) var(--c4c-ease); }
.c4c-anim-slide-up { animation: c4c-slide-up var(--c4c-dur-base) var(--c4c-ease); }

@media (prefers-reduced-motion: reduce) {
    .c4c-anim-fade, .c4c-anim-scale, .c4c-anim-slide-up,
    .c4c-modal-overlay, .c4c-modal, .c4c-sheet, .c4c-sheet-overlay, .c4c-toast,
    .c4c-skeleton { animation: none !important; }
    .c4c-ui-card, .c4c-btn { transition: none !important; }
}

/* =========================================================================
   ACCESSIBILITY UTILITIES
   ========================================================================= */
.c4c-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:where(.c4c-canvas, .c4c-app, .c4c-card-grid, .c4c-search-app, .c4c-profile, .c4c-group-archive, .c4c-auth-card, .c4c-journey) :focus-visible {
    outline: 2px solid var(--c4c-brand-gold);
    outline-offset: 2px;
}