/*
 * Portal styles for our own views. Plain CSS on top of Filament's compiled
 * theme, so no Node build step is needed on the server.
 * Published to public/css/app/portal.css by `php artisan filament:assets`.
 */

:root {
    --hp-border: var(--gray-200);
    --hp-muted: var(--gray-500);
    --hp-surface: var(--gray-50);
    --hp-radius: 0.75rem;
}

.dark {
    --hp-border: rgba(255, 255, 255, 0.1);
    --hp-muted: var(--gray-400);
    --hp-surface: rgba(255, 255, 255, 0.04);
}

.hp-stack { display: flex; flex-direction: column; gap: 1.25rem; }
.hp-grid-2 { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .hp-grid-2 { grid-template-columns: 1fr 1fr; } }
.hp-scroll-x { overflow-x: auto; }

.hp-muted { color: var(--hp-muted); }
.hp-small { font-size: 0.8125rem; }
.hp-danger { color: var(--danger-600); font-weight: 600; }
.hp-link { color: var(--primary-600); text-decoration: underline; text-underline-offset: 2px; }
.dark .hp-link { color: var(--primary-400); }
.hp-icon-sm { width: 1rem; height: 1rem; display: inline-block; vertical-align: -2px; }

/* Lists and tables */
.hp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.hp-list li { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.hp-list-row { justify-content: space-between; border-bottom: 1px solid var(--hp-border); padding-bottom: 0.5rem; }
.hp-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.hp-table th { text-align: left; font-weight: 600; color: var(--hp-muted); padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--hp-border); white-space: nowrap; }
.hp-table td { padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--hp-border); vertical-align: top; }
.hp-table tr.hp-conflict td { background: var(--warning-50); }
.dark .hp-table tr.hp-conflict td { background: rgba(245, 158, 11, 0.12); }
.hp-grid-table th, .hp-grid-table td { padding-right: 1rem; }
.fi-ta-row.hp-row-disabled { opacity: 0.55; }

.hp-meta { display: grid; grid-template-columns: 1fr; gap: 0.625rem; margin: 0; }
.hp-meta > div { display: grid; grid-template-columns: minmax(9rem, 35%) 1fr; gap: 0.75rem; }
.hp-meta dt { color: var(--hp-muted); font-size: 0.875rem; }
.hp-meta dd { margin: 0; font-size: 0.875rem; }
@media (min-width: 768px) { .hp-meta-2 { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }

/* Callouts */
.hp-callout { border: 1px solid var(--hp-border); border-left-width: 4px; border-radius: 0.5rem; padding: 0.75rem 1rem; background: var(--hp-surface); font-size: 0.875rem; }
.hp-callout-info { border-left-color: var(--info-500, var(--primary-500)); }
.hp-callout-warning { border-left-color: var(--warning-500); }
.hp-callout-success { border-left-color: var(--success-500); }
.hp-callout-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; }
.hp-callout .hp-list { margin-top: 0.5rem; }

/* Club header */
.hp-club-header { display: flex; gap: 1rem; align-items: center; }
.hp-club-name { font-size: 1.25rem; font-weight: 700; }
.hp-club-logo { border-radius: 0.75rem; object-fit: cover; flex: none; }
.hp-club-logo-md { width: 3.5rem; height: 3.5rem; }
.hp-club-logo-lg { width: 5rem; height: 5rem; }
.hp-club-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--primary-600); color: #fff; font-weight: 700; letter-spacing: 0.04em; }

/* Form cards */
.hp-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.hp-card { border: 1px solid var(--hp-border); border-radius: var(--hp-radius); padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.hp-card-top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.hp-card-title { font-weight: 600; font-size: 1rem; margin: 0; }
.hp-card-actions { margin-top: auto; padding-top: 0.25rem; }

/* Submission summary */
.hp-summary { display: flex; flex-direction: column; }
.hp-summary-step { font-size: 1.125rem; font-weight: 700; margin: 1.5rem 0 0.5rem; padding-bottom: 0.375rem; border-bottom: 2px solid var(--primary-600); }
.hp-summary-step:first-child { margin-top: 0; }
.hp-summary-section { font-size: 1rem; font-weight: 600; margin: 1rem 0 0.25rem; }
.hp-summary-item { font-size: 0.9375rem; font-weight: 600; margin: 0.75rem 0 0.25rem; color: var(--primary-700); }
.dark .hp-summary-item { color: var(--primary-300); }
.hp-summary-row { display: grid; grid-template-columns: 1fr; gap: 0.125rem; padding: 0.5rem 0; border-bottom: 1px solid var(--hp-border); }
@media (min-width: 768px) { .hp-summary-row { grid-template-columns: minmax(12rem, 40%) 1fr; gap: 1rem; } }
.hp-summary-label { font-weight: 600; font-size: 0.875rem; }
.hp-summary-value { font-size: 0.875rem; display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-start; }
.hp-summary-info { font-size: 0.8125rem; color: var(--hp-muted); margin: 0.5rem 0; }
.hp-summary-row.hp-changed { background: var(--warning-50); border-left: 3px solid var(--warning-500); padding-left: 0.5rem; }
.dark .hp-summary-row.hp-changed { background: rgba(245, 158, 11, 0.12); }
.hp-file { color: var(--primary-600); text-decoration: underline; text-underline-offset: 2px; }
.dark .hp-file { color: var(--primary-400); }
.hp-signature { max-height: 4rem; background: #fff; border-radius: 0.25rem; }

/* Read-only text in forms */
.portal-prose { font-size: 0.875rem; line-height: 1.6; }
.portal-prose p { margin: 0 0 0.75rem; }
.portal-prose ol, .portal-prose ul { margin: 0 0 0.75rem 1.25rem; }
.portal-prose ol { list-style: decimal; }
.portal-prose ul { list-style: disc; }
.portal-prose strong { font-weight: 600; }

/* Wizard submit */
.hp-submit-note { font-size: 0.875rem; color: var(--hp-muted); margin: 0 0 0.75rem; max-width: 40rem; }

/* Signature pad */
.hp-signature-pad { display: block; width: 100%; max-width: 32rem; height: 10rem; border: 1px solid var(--gray-300); border-radius: 0.5rem; background: #fff; touch-action: none; }
.dark .hp-signature-pad { border-color: rgba(255, 255, 255, 0.15); }

/* Documents */
.hp-search { max-width: 28rem; }
.hp-doc-list { list-style: none; margin: 0; padding: 0; }
.hp-doc { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--hp-border); }
.hp-doc:last-child { border-bottom: 0; }
.hp-doc-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1 1 18rem; }
.hp-doc-title { font-weight: 600; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.hp-doc-actions { display: flex; gap: 0.5rem; align-items: center; }

/* System page */
.hp-output { white-space: pre-wrap; font-size: 0.75rem; max-height: 24rem; overflow: auto; margin-top: 0.5rem; background: rgba(0,0,0,0.04); padding: 0.75rem; border-radius: 0.375rem; }
.hp-ok { color: var(--success-600); }
.hp-warn { color: var(--warning-600); }