/* SWC — Componentes globais reutilizaveis (opt-in)

   Cada componente eh ativado por classe explicita. Nada se aplica sem opt-in,
   logo nenhuma tela existente eh afetada ate adotar.

   Componentes:
     .swc-btn (+ variantes --primary, --secondary, --ghost, --danger, --sm, --lg)
     .swc-pill (+ data-tom)
     .swc-empty
     .swc-page-header (+ __eyebrow, __title, __lede, __actions)
     .swc-listcard (+ __icon, __body, __title, __meta, __aside)
     .swc-timeline (+ __item, __dot, __body)
     .swc-actionbar (+ __item)
     Utilitarios: .swc-stack-* (gap vertical), .swc-cluster (gap horizontal),
                  .swc-tablecards (tabela vira lista vertical em mobile)
*/

/* ======= Botoes ======= */

.swc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: var(--swc-radius-sm, 10px);
    font-family: var(--swc-font-sans);
    font-weight: var(--swc-fw-semibold);
    font-size: var(--swc-fs-md);
    line-height: 1.15;
    border: 1px solid transparent;
    background: var(--swc-surface);
    color: var(--swc-ink-1);
    cursor: pointer;
    text-decoration: none;
    transition:
        background var(--swc-duration-fast) var(--swc-ease),
        border-color var(--swc-duration-fast) var(--swc-ease),
        color var(--swc-duration-fast) var(--swc-ease),
        box-shadow var(--swc-duration) var(--swc-ease);
}

.swc-btn:disabled,
.swc-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

.swc-btn:focus-visible {
    outline: 2px solid var(--swc-violet);
    outline-offset: 2px;
}

.swc-btn--primary {
    background: var(--swc-blue);
    color: var(--swc-surface);
    border-color: var(--swc-blue);
    box-shadow: 0 1px 0 oklch(0.40 0.18 255 / 0.4);
}
.swc-btn--primary:hover:not(:disabled) {
    background: var(--swc-blue-700);
    border-color: var(--swc-blue-700);
    box-shadow: var(--swc-shadow-2);
    color: var(--swc-surface);
}

.swc-btn--secondary {
    background: var(--swc-surface);
    color: var(--swc-violet-700);
    border-color: var(--swc-violet);
}
.swc-btn--secondary:hover:not(:disabled) {
    background: var(--swc-violet-tint);
    color: var(--swc-violet-700);
}

.swc-btn--ghost {
    background: transparent;
    color: var(--swc-ink-2);
    border-color: var(--swc-line);
}
.swc-btn--ghost:hover:not(:disabled) {
    color: var(--swc-ink-1);
    border-color: var(--swc-violet);
    background: var(--swc-violet-tint);
}

.swc-btn--danger {
    background: var(--swc-surface);
    color: var(--swc-danger);
    border-color: oklch(0.82 0.14 25);
}
.swc-btn--danger:hover:not(:disabled) {
    background: var(--swc-danger-tint);
    border-color: var(--swc-danger);
    color: var(--swc-danger);
}

.swc-btn--sm {
    padding: 0.4rem 0.75rem;
    font-size: var(--swc-fs-sm);
    border-radius: var(--swc-radius-xs, 8px);
}

.swc-btn--lg {
    padding: 0.75rem 1.25rem;
    font-size: var(--swc-fs-lg);
}

/* ======= Pill / Badge semantico ======= */

.swc-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.55rem;
    border-radius: var(--swc-radius-pill);
    font-size: var(--swc-fs-xs);
    font-weight: var(--swc-fw-semibold);
    line-height: 1;
    letter-spacing: 0.01em;
    background: var(--swc-surface-2);
    color: var(--swc-ink-2);
    border: 1px solid var(--swc-line);
}

.swc-pill i { font-size: 0.85rem; }

.swc-pill[data-tom="ok"]      { background: var(--swc-ok-tint); color: oklch(0.30 0.13 155); border-color: oklch(0.82 0.10 155); }
.swc-pill[data-tom="warn"]    { background: var(--swc-warn-tint); color: oklch(0.32 0.12 65); border-color: oklch(0.82 0.12 85); }
.swc-pill[data-tom="danger"]  { background: var(--swc-danger-tint); color: oklch(0.34 0.18 25); border-color: oklch(0.80 0.14 25); }
.swc-pill[data-tom="info"]    { background: var(--swc-info-tint); color: oklch(0.30 0.14 225); border-color: oklch(0.82 0.10 225); }
.swc-pill[data-tom="violet"]  { background: var(--swc-violet-tint); color: var(--swc-violet-700); border-color: oklch(0.88 0.06 285); }
.swc-pill[data-tom="neutral"] { background: var(--swc-surface-2); color: var(--swc-ink-2); border-color: var(--swc-line); }

/* ======= Page header (cabecalho de pagina padronizado) ======= */

.swc-page-header {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.5rem 0 1rem;
}

.swc-page-header__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.swc-page-header__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--swc-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: var(--swc-fw-semibold);
    color: var(--swc-violet-700);
}

.swc-page-header__eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--swc-violet);
    display: inline-block;
}

.swc-page-header__title {
    font-size: var(--swc-fs-3xl);
    font-weight: var(--swc-fw-bold);
    letter-spacing: -0.015em;
    color: var(--swc-ink-1);
    margin: 0;
    line-height: var(--swc-lh-tight);
}

.swc-page-header__lede {
    font-size: var(--swc-fs-lg);
    color: var(--swc-ink-2);
    max-width: 62ch;
    margin: 0;
    line-height: var(--swc-lh-normal);
}

.swc-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 720px) {
    .swc-page-header__title { font-size: var(--swc-fs-2xl); }
}

/* ======= Empty state ======= */

.swc-empty {
    padding: 2rem 1rem;
    text-align: center;
    background: var(--swc-surface);
    border: 1px dashed var(--swc-line);
    border-radius: var(--swc-radius);
    color: var(--swc-ink-2);
}

.swc-empty__icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 0.75rem;
    border-radius: 16px;
    background: var(--swc-violet-tint);
    color: var(--swc-violet-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.swc-empty__title {
    font-size: var(--swc-fs-lg);
    font-weight: var(--swc-fw-semibold);
    color: var(--swc-ink-1);
    margin: 0 0 0.3rem;
}

.swc-empty__body {
    margin: 0 auto;
    font-size: var(--swc-fs-sm);
    max-width: 44ch;
    line-height: var(--swc-lh-normal);
}

.swc-empty__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.swc-empty--compact { padding: 1.2rem 1rem; }

/* ======= List card (linha de modulo, veiculo, lista, etc.) ======= */

.swc-listcard {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
    padding: 0.85rem 1rem;
    background: var(--swc-surface);
    border: 1px solid var(--swc-line);
    border-radius: var(--swc-radius);
    box-shadow: var(--swc-shadow-1);
    transition: border-color var(--swc-duration-fast) var(--swc-ease), box-shadow var(--swc-duration) var(--swc-ease);
}

.swc-listcard:hover {
    border-color: oklch(0.85 0.05 285);
    box-shadow: var(--swc-shadow-2);
}

.swc-listcard__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--swc-violet-tint);
    color: var(--swc-violet-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex: none;
}

.swc-listcard__body { min-width: 0; }

.swc-listcard__title {
    font-size: var(--swc-fs-md);
    font-weight: var(--swc-fw-semibold);
    color: var(--swc-ink-1);
    margin: 0;
    line-height: 1.25;
}

.swc-listcard__meta {
    font-size: var(--swc-fs-sm);
    color: var(--swc-ink-2);
    margin-top: 0.15rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.swc-listcard__aside {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.swc-listcard.is-muted { background: var(--swc-surface-2); }
.swc-listcard.is-muted .swc-listcard__icon { background: var(--swc-bg-deep); color: var(--swc-ink-3); }

@media (max-width: 720px) {
    .swc-listcard { grid-template-columns: 40px minmax(0, 1fr); }
    .swc-listcard__aside { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ======= Timeline (historico / eventos) ======= */

.swc-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.swc-timeline__item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: start;
    padding: 0.85rem 1rem;
    background: var(--swc-surface);
    border: 1px solid var(--swc-line);
    border-radius: var(--swc-radius);
    box-shadow: var(--swc-shadow-1);
}

.swc-timeline__dot {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    background: var(--swc-violet-tint);
    color: var(--swc-violet-700);
    flex: none;
}

.swc-timeline__dot[data-tom="ok"]     { background: var(--swc-ok-tint); color: var(--swc-ok); }
.swc-timeline__dot[data-tom="warn"]   { background: var(--swc-warn-tint); color: var(--swc-orange-700); }
.swc-timeline__dot[data-tom="danger"] { background: var(--swc-danger-tint); color: var(--swc-danger); }
.swc-timeline__dot[data-tom="info"]   { background: var(--swc-info-tint); color: var(--swc-blue-700); }

.swc-timeline__body { min-width: 0; }

.swc-timeline__title {
    font-size: var(--swc-fs-md);
    font-weight: var(--swc-fw-semibold);
    color: var(--swc-ink-1);
    margin: 0 0 0.15rem;
}

.swc-timeline__meta {
    font-size: var(--swc-fs-sm);
    color: var(--swc-ink-2);
    line-height: var(--swc-lh-normal);
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.swc-timeline__aside {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-end;
}

@media (max-width: 720px) {
    .swc-timeline__item { grid-template-columns: 38px minmax(0, 1fr); }
    .swc-timeline__aside { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
}

/* ======= Actionbar (faixa de pendencias / quick actions) ======= */

.swc-actionbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.55rem;
    padding: 0.9rem 1rem;
    background: var(--swc-surface);
    border: 1px solid var(--swc-line);
    border-radius: var(--swc-radius);
    box-shadow: var(--swc-shadow-1);
    margin-bottom: 1.25rem;
}

.swc-actionbar__item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.7rem 0.6rem;
    background: var(--swc-surface-2);
    border: 1px solid var(--swc-line);
    border-radius: var(--swc-radius-xs, 8px);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: border-color var(--swc-duration-fast) var(--swc-ease), background var(--swc-duration-fast) var(--swc-ease);
}

.swc-actionbar__item:hover {
    border-color: var(--swc-violet);
    background: var(--swc-surface);
}

.swc-actionbar__item.is-zero { opacity: 0.55; pointer-events: none; }

.swc-actionbar__label {
    font-size: var(--swc-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--swc-fw-semibold);
    color: var(--swc-ink-3);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.swc-actionbar__value {
    font-size: 1.45rem;
    font-weight: var(--swc-fw-bold);
    color: var(--swc-ink-1);
    letter-spacing: -0.01em;
    line-height: 1;
}

.swc-actionbar__value--ok     { color: var(--swc-ok); }
.swc-actionbar__value--warn   { color: var(--swc-orange-700); }
.swc-actionbar__value--danger { color: var(--swc-danger); }
.swc-actionbar__value--info   { color: var(--swc-blue-700); }

.swc-actionbar__sub {
    font-size: var(--swc-fs-xs);
    color: var(--swc-ink-3);
}

/* ======= Utilitarios leves ======= */

.swc-stack-1 > * + * { margin-top: var(--swc-space-1); }
.swc-stack-2 > * + * { margin-top: var(--swc-space-2); }
.swc-stack-3 > * + * { margin-top: var(--swc-space-3); }
.swc-stack-4 > * + * { margin-top: var(--swc-space-4); }
.swc-stack-5 > * + * { margin-top: var(--swc-space-5); }

.swc-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--swc-space-2);
    align-items: center;
}
.swc-cluster--lg { gap: var(--swc-space-3); }

/* Tabela responsiva: linhas viram cards em telas pequenas.
   Uso: <table class="swc-tablecards">. Marca cada <td data-label="Coluna">.
   Acima de 720px se comporta como tabela normal. */

@media (max-width: 720px) {
    table.swc-tablecards thead { display: none; }
    table.swc-tablecards, table.swc-tablecards tbody { display: block; }
    table.swc-tablecards tr {
        display: block;
        background: var(--swc-surface);
        border: 1px solid var(--swc-line);
        border-radius: var(--swc-radius);
        margin-bottom: 0.6rem;
        padding: 0.6rem 0.75rem;
        box-shadow: var(--swc-shadow-1);
    }
    table.swc-tablecards td {
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.35rem 0;
        border: none;
        font-size: var(--swc-fs-sm);
    }
    table.swc-tablecards td[data-label]::before {
        content: attr(data-label);
        font-weight: var(--swc-fw-semibold);
        color: var(--swc-ink-3);
        text-transform: uppercase;
        font-size: var(--swc-fs-xs);
        letter-spacing: 0.04em;
    }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .swc-btn, .swc-listcard, .swc-actionbar__item {
        transition: none;
    }
}