/* CNHS SMEA — semantic component styles used by custom pages, widgets and views (mobile-first). */

/* ---------- Layout helpers ---------- */
.smea-stack > * + * { margin-top: 1rem; }
.smea-grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 1280px) { .smea-grid-2 { grid-template-columns: 1fr 1fr; } }
.smea-muted { color: #64748b; font-size: .85rem; }
.smea-subheading { margin: 1rem 0 .5rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748b; }
.smea-subheading:first-child { margin-top: 0; }
.smea-note { margin-top: .75rem; font-size: .75rem; }
.smea-text-danger { color: #e11d48; }
.smea-subhead { margin: .75rem 0 .5rem; font-weight: 700; color: var(--smea-navy); }
.dark .smea-subhead { color: #e2e8f0; }
.smea-chip--danger { background: #ffe4e6; color: #be123c; }
.smea-matrix--compact td, .smea-matrix--compact th { padding: .4rem .55rem; }
.smea-matrix a { color: var(--smea-royal); font-weight: 600; }
.dark .smea-matrix a { color: #93c5fd; }

/* ---------- KPI tiles ---------- */
.smea-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
@media (min-width: 768px) { .smea-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .smea-kpis--executive { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.smea-kpi { background: #fff; border-radius: var(--smea-radius); padding: 1rem; box-shadow: 0 1px 2px rgba(11, 42, 91, .06), 0 4px 14px rgba(11, 42, 91, .05); border: 1px solid #e2e8f0; }
.dark .smea-kpi { background: #111827; border-color: #1f2937; }
.smea-kpi span { display: block; font-size: 1.6rem; font-weight: 800; color: var(--smea-navy); line-height: 1.15; word-break: break-word; }
.dark .smea-kpi span { color: #f1f5f9; }
.smea-kpi small { display: block; margin-top: .25rem; color: #64748b; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.smea-kpi--navy { background: var(--smea-navy); border-color: var(--smea-navy); }
.smea-kpi--navy span, .smea-kpi--navy small { color: #fff; }
.smea-kpi--gold { background: var(--smea-gold-soft); border-color: #ecd27a; }
.smea-kpi--danger span { color: #e11d48; }
.smea-kpi--success span { color: #059669; }

/* ---------- Progress bar lists ---------- */
.smea-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.smea-bars__label { display: flex; justify-content: space-between; gap: .75rem; font-size: .875rem; margin-bottom: .3rem; }
.smea-bars__label a { color: inherit; font-weight: 600; }
.smea-bars__label a:hover { color: var(--smea-royal); text-decoration: underline; }

/* ---------- Lists and cards ---------- */
.smea-list { list-style: none; margin: 0; padding: 0; }
.smea-list > li { padding: .6rem 0; border-bottom: 1px solid #e2e8f0; }
.smea-list > li:last-child { border-bottom: 0; }
.dark .smea-list > li { border-color: #1f2937; }
.smea-list a { font-weight: 600; color: var(--smea-navy); }
.dark .smea-list a { color: #93c5fd; }
.smea-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .smea-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .smea-cards { grid-template-columns: repeat(3, 1fr); } }
.smea-card { border: 1px solid #e2e8f0; border-top: 3px solid var(--smea-gold); border-radius: var(--smea-radius); padding: 1rem; background: #fff; }
.dark .smea-card { background: #111827; border-color: #1f2937; }
.smea-card h3 { font-weight: 700; color: var(--smea-navy); margin: 0 0 .4rem; }
.dark .smea-card h3, .dark .smea-card h3 a { color: #f1f5f9; }

/* ---------- Definition lists ---------- */
.smea-dl { display: grid; grid-template-columns: 1fr; gap: .6rem 1.5rem; margin: 0; }
@media (min-width: 768px) { .smea-dl { grid-template-columns: 1fr 1fr; } }
.smea-dl dt { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748b; }
.smea-dl dd { margin: 0; font-size: .9rem; white-space: pre-line; }

/* ---------- Area matrix cards (five columns) ---------- */
.smea-matrix-cards { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 768px) { .smea-matrix-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1536px) { .smea-matrix-cards { grid-template-columns: repeat(5, 1fr); } }
.smea-matrix-card { border: 1px solid #dbe4f3; border-radius: 12px; padding: .85rem 1rem; background: #f8fbff; }
.dark .smea-matrix-card { background: rgba(255, 255, 255, .03); border-color: #1f2937; }
.smea-matrix-card h4 { margin: 0 0 .45rem; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--smea-navy); }
.dark .smea-matrix-card h4 { color: var(--smea-gold-soft); }
.smea-matrix-card ul { list-style: disc; padding-inline-start: 1.1rem; margin: 0; font-size: .875rem; }
.smea-matrix-card p { margin: 0; font-size: .875rem; }

/* ---------- Submission items and comments ---------- */
.smea-item { border: 1px solid #e2e8f0; border-radius: 12px; padding: 1rem; }
.dark .smea-item { border-color: #1f2937; }
.smea-item__head { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.smea-comments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.smea-comment { background: #f8fafc; border-radius: 12px; padding: .75rem; }
.dark .smea-comment { background: rgba(255, 255, 255, .04); }
.smea-comment__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; font-size: .8rem; }
.smea-comment__meta span { color: #64748b; }
.smea-comment__body { margin: .25rem 0 0; font-size: .875rem; white-space: pre-line; }
.smea-comments--replies { margin-top: .6rem; padding-inline-start: .75rem; border-inline-start: 2px solid var(--smea-gold); }
.smea-autosave { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; font-size: .75rem; color: #64748b; }

/* ---------- Filters, queue tabs, buttons ---------- */
.smea-filters { display: flex; flex-wrap: wrap; gap: 1rem; }
.smea-filters label { display: flex; flex-direction: column; gap: .3rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; min-width: 12rem; flex: 1 1 12rem; }
.smea-filters select { border: 1px solid #cbd5e1; border-radius: 10px; padding: .5rem .65rem; font-size: .875rem; text-transform: none; letter-spacing: 0; color: #0f172a; background: #fff; }
.dark .smea-filters select { background: #111827; color: #e5e7eb; border-color: #374151; }
.smea-queue-tabs { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; }
.smea-queue-tab { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .65rem .9rem; border-radius: 12px; border: 1px solid #dbe4f3; background: #fff; cursor: pointer; min-width: 9rem; text-align: left; }
.smea-queue-tab span { font-size: .75rem; color: #64748b; }
.smea-queue-tab strong { font-size: 1.3rem; color: var(--smea-navy); }
.smea-queue-tab.is-active { background: var(--smea-navy); border-color: var(--smea-navy); }
.smea-queue-tab.is-active span, .smea-queue-tab.is-active strong { color: #fff; }
.dark .smea-queue-tab { background: #111827; border-color: #1f2937; }
.smea-export-buttons { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Gallery tile, deadlines, comparison ---------- */
.smea-file-icon { display: flex; align-items: center; justify-content: center; height: 120px; font-weight: 800; color: var(--smea-navy); background: var(--smea-sky); }
.smea-deadline { margin: 0 0 .75rem; font-size: .875rem; }
.smea-compare-charts { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; }
@media (min-width: 768px) { .smea-compare-charts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .smea-compare-charts { grid-template-columns: repeat(4, 1fr); } }
.smea-compare h4 { margin: 0 0 .5rem; font-size: .8rem; font-weight: 700; color: var(--smea-navy); }
.dark .smea-compare h4 { color: #e2e8f0; }
.smea-compare .smea-progress { margin-bottom: .45rem; }

/* ---------- Import summary report ---------- */
.smea-report h3 { margin: 1.4rem 0 .5rem; font-weight: 800; color: var(--smea-navy); }
.dark .smea-report h3 { color: #f1f5f9; }
.smea-report__head h2 { font-size: 1.25rem; font-weight: 800; margin: 0; }
.smea-report__head p { color: #64748b; margin: .25rem 0 1rem; }

/* ---------- CMS content blocks ---------- */
.smea-block { overflow-wrap: anywhere; }
.smea-block__heading { font-size: 1.4rem; font-weight: 800; color: var(--smea-navy); margin: 0; }
.smea-block__subheading { font-size: 1.1rem; font-weight: 700; color: var(--smea-navy); margin: 0; }
.smea-block__title { font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; color: var(--smea-navy); }
.dark .smea-block__heading, .dark .smea-block__subheading, .dark .smea-block__title { color: #f1f5f9; }
.smea-block__text { margin: 0; }
.smea-block__rich h2, .smea-block__rich h3 { font-weight: 700; margin: .75rem 0 .25rem; }
.smea-block__rich ul { list-style: disc; padding-inline-start: 1.2rem; }
.smea-block__rich ol { list-style: decimal; padding-inline-start: 1.2rem; }
.smea-block__stat { display: flex; flex-direction: column; }
.smea-block__stat-value { font-size: 2.2rem; font-weight: 900; color: var(--smea-navy); line-height: 1; }
.smea-block__stat-label { font-weight: 700; }
.smea-block__stat-caption { color: #64748b; font-size: .85rem; }
.smea-block__callout { border-inline-start: 4px solid var(--smea-gold); background: #fffbeb; padding: .9rem 1rem; border-radius: 10px; }
.dark .smea-block__callout { background: rgba(212, 160, 23, .08); }
.smea-block__callout p { margin: .35rem 0 0; }
.smea-block__bars { display: flex; flex-direction: column; gap: .5rem; }
.smea-block__bar-row { display: grid; grid-template-columns: minmax(6rem, 30%) 1fr auto; gap: .6rem; align-items: center; font-size: .875rem; }

/* Tables keep a readable width and scroll sideways on small screens. */
.smea-scroll > table { min-width: 720px; }
.smea-term-switcher { margin-inline-end: .75rem; }