/*
 * The Hawk Apps UI kit without React: Spark's look for any app (vanilla, Preact, React, Next without MUI).
 *   import '@bridgeline-digital/hawk-app-ui/css';      (a bundler), or
 *   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@bridgeline-digital/hawk-app-ui@0.1/dist/css/hawk.css">
 * Colors, corner radius and light or dark follow the host: the bridge sets its theme tokens as --hawk-* variables and
 * <html data-hawk-theme>. Without them (outside a host), Spark's own. The font is always Spark's (Montserrat, below).
 * The same mapping as the React kit's createHawkTheme. Classes are prefixed hawk-; the custom elements (/elements)
 * use them too.
 */
@import url('./fonts.css');

:root {
    --hawk-ui-font: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --hawk-ui-accent: var(--hawk-color-button-accent-background, #ff7416);
    --hawk-ui-accent-text: var(--hawk-color-button-accent-text, #ffffff);
    --hawk-ui-accent-soft: color-mix(in srgb, var(--hawk-ui-accent) 8%, transparent);
    --hawk-ui-bg: var(--hawk-color-background, #f3f4f6);
    --hawk-ui-surface: var(--hawk-color-background-container, #ffffff);
    --hawk-ui-text: var(--hawk-color-text-default, rgba(0, 0, 0, 0.87));
    --hawk-ui-text-secondary: var(--hawk-color-text-secondary, rgba(0, 0, 0, 0.6));
    --hawk-ui-border: var(--hawk-color-border-default, rgba(0, 0, 0, 0.12));
    --hawk-ui-hover: #e5e7eb;
    --hawk-ui-radius: var(--hawk-border-radius, 4px);
    --hawk-ui-success: #2e7d32;
    --hawk-ui-error: #d32f2f;
    --hawk-ui-warning: #ed6c02;
    --hawk-ui-info: #0288d1;
    --hawk-ui-gap: 16px;
    color-scheme: light;
}

/* Dark: the host's dark tokens, else MUI's dark defaults (as the React kit). */
html[data-hawk-theme='dark'] {
    --hawk-ui-bg: var(--hawk-color-background, #121212);
    --hawk-ui-surface: var(--hawk-color-background-container, #1e1e1e);
    --hawk-ui-text: var(--hawk-color-text-default, #ffffff);
    --hawk-ui-text-secondary: var(--hawk-color-text-secondary, rgba(255, 255, 255, 0.7));
    --hawk-ui-border: var(--hawk-color-border-default, rgba(255, 255, 255, 0.12));
    --hawk-ui-hover: rgba(255, 255, 255, 0.08);
    --hawk-ui-success: #66bb6a;
    --hawk-ui-error: #f44336;
    --hawk-ui-warning: #ffa726;
    --hawk-ui-info: #29b6f6;
    color-scheme: dark;
}

/* ---- Page and type ---------------------------------------------------------------------------------------------- */

body {
    margin: 0;
    padding: var(--hawk-ui-gap);
    font-family: var(--hawk-ui-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--hawk-ui-text);
    background: var(--hawk-ui-bg);
    -webkit-font-smoothing: antialiased;
}

/* A view (an app inside another page) is transparent: the host's page shows through. */
html[data-hawk-view] body {
    background: transparent;
    padding: 0;
}

h1,
.hawk-h1 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 8px;
}
h2,
.hawk-h2 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 8px;
}
h3,
.hawk-h3 {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 4px;
}
p {
    margin: 0 0 8px;
}

/* A headline number (Spark's featuredValue). */
.hawk-value {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}
.hawk-muted {
    color: var(--hawk-ui-text-secondary);
}
.hawk-caption {
    font-size: 0.75rem;
    color: var(--hawk-ui-text-secondary);
}
.hawk-error-text {
    color: var(--hawk-ui-error);
}
.hawk-num {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ---- Layout ----------------------------------------------------------------------------------------------------- */

.hawk-stack {
    display: flex;
    flex-direction: column;
    gap: var(--hawk-ui-gap);
}
.hawk-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.hawk-spacer {
    flex: 1;
}
/* Tiles side by side: 2 per row on phones, as many as fit (up to 5) on wider screens. */
.hawk-kpi-row {
    display: grid;
    gap: var(--hawk-ui-gap);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
    .hawk-kpi-row {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

/* ---- Section (Spark's card) ------------------------------------------------------------------------------------- */

.hawk-section {
    background: var(--hawk-ui-surface);
    border: 1px solid var(--hawk-ui-border);
    border-radius: var(--hawk-ui-radius);
    padding: 16px;
    min-width: 0;
}
.hawk-section-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
}
.hawk-section-header > :first-child {
    flex: 1;
    min-width: 0;
}
.hawk-section-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}
.hawk-section-subtitle {
    font-size: 0.75rem;
    color: var(--hawk-ui-text-secondary);
    margin: 2px 0 0;
}

/* ---- KPI tile (<hawk-kpi> renders this) ------------------------------------------------------------------------- */

.hawk-kpi {
    display: block;
    background: var(--hawk-ui-surface);
    border: 1px solid var(--hawk-ui-border);
    border-radius: var(--hawk-ui-radius);
    padding: 16px;
    min-width: 0;
}
.hawk-kpi.is-highlight,
hawk-kpi[highlight] .hawk-kpi {
    border-color: var(--hawk-ui-accent);
    background: var(--hawk-ui-accent-soft);
}
.hawk-kpi-label {
    font-size: 0.875rem;
    color: var(--hawk-ui-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hawk-kpi-value {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.25;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.hawk-kpi-hint,
.hawk-kpi-change {
    display: block;
    font-size: 0.75rem;
    color: var(--hawk-ui-text-secondary);
    margin-top: 4px;
}
.hawk-kpi-change b {
    font-weight: 600;
}
.hawk-kpi-change .is-good {
    color: var(--hawk-ui-success);
}
.hawk-kpi-change .is-bad {
    color: var(--hawk-ui-error);
}

/* ---- Table (<hawk-data-table> renders this) --------------------------------------------------------------------- */

.hawk-table-wrap {
    overflow-x: auto;
}
.hawk-table-wrap[data-max-height] {
    overflow-y: auto;
}
.hawk-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
/* Rows: 10px above and below; lines that show even when the host's border color is too faint to see on its own
   (HawkSearch's is #f5f7fa), and every other body row tinted with the text color (light and dark alike). */
.hawk-table th,
.hawk-table td {
    padding: 10px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--hawk-ui-text) 12%, var(--hawk-ui-border));
    text-align: left;
    vertical-align: middle;
}
.hawk-table th {
    font-weight: 600;
    white-space: nowrap;
    background: var(--hawk-ui-surface);
}
.hawk-table-wrap[data-max-height] thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}
.hawk-table .is-right {
    text-align: right;
}
.hawk-table .is-center {
    text-align: center;
}
.hawk-table tfoot td {
    font-weight: 700;
    border-bottom: 0;
}
.hawk-table tbody tr:nth-of-type(even) {
    background: color-mix(in srgb, var(--hawk-ui-text) 3%, transparent);
}
.hawk-table tbody tr.is-clickable {
    cursor: pointer;
}
.hawk-table tbody tr.is-clickable:hover {
    background: var(--hawk-ui-hover);
}
.hawk-sort {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.hawk-sort:focus-visible {
    outline: 2px solid var(--hawk-ui-accent);
    outline-offset: 2px;
}
.hawk-sort::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    opacity: 0;
}
.hawk-sort[aria-sort='descending']::after {
    border-top: 5px solid currentColor;
    opacity: 0.8;
}
.hawk-sort[aria-sort='ascending']::after {
    border-bottom: 5px solid currentColor;
    opacity: 0.8;
}
.hawk-sort:hover::after {
    opacity: 0.4;
    border-top: 5px solid currentColor;
}
.hawk-table-tools {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

/* ---- Buttons and inputs ----------------------------------------------------------------------------------------- */

.hawk-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font: inherit;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.75;
    padding: 6px 16px;
    border-radius: var(--hawk-ui-radius);
    border: 1px solid var(--hawk-ui-accent);
    background: var(--hawk-ui-accent);
    color: var(--hawk-ui-accent-text);
    cursor: pointer;
    text-decoration: none;
}
.hawk-button:hover {
    filter: brightness(0.94);
}
.hawk-button:focus-visible {
    outline: 2px solid var(--hawk-ui-accent);
    outline-offset: 2px;
}
.hawk-button:disabled {
    opacity: 0.5;
    cursor: default;
    filter: none;
}
.hawk-button.is-outlined {
    background: transparent;
    color: var(--hawk-ui-accent);
}
.hawk-button.is-text {
    background: transparent;
    border-color: transparent;
    color: var(--hawk-ui-accent);
}
.hawk-button.is-small {
    font-size: 0.8125rem;
    padding: 3px 10px;
}

.hawk-field {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--hawk-ui-text-secondary);
}
.hawk-input,
.hawk-select {
    font: inherit;
    font-size: 0.875rem;
    color: var(--hawk-ui-text);
    background: var(--hawk-ui-surface);
    border: 1px solid var(--hawk-ui-border);
    border-radius: var(--hawk-ui-radius);
    padding: 8px 12px;
    min-width: 0;
}
.hawk-input:focus,
.hawk-select:focus {
    outline: none;
    border-color: var(--hawk-ui-accent);
    box-shadow: 0 0 0 1px var(--hawk-ui-accent);
}

/* ---- Notices, chips, empty and loading -------------------------------------------------------------------------- */

.hawk-notice {
    --hawk-notice-color: var(--hawk-ui-info);
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 16px;
    border-radius: var(--hawk-ui-radius);
    border-left: 4px solid var(--hawk-notice-color);
    background: color-mix(in srgb, var(--hawk-notice-color) 10%, var(--hawk-ui-surface));
}
.hawk-notice.is-success {
    --hawk-notice-color: var(--hawk-ui-success);
}
.hawk-notice.is-warning {
    --hawk-notice-color: var(--hawk-ui-warning);
}
.hawk-notice.is-error {
    --hawk-notice-color: var(--hawk-ui-error);
}

.hawk-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    line-height: 1.5;
    padding: 1px 8px;
    border-radius: 12px;
    border: 1px solid var(--hawk-ui-border);
    color: var(--hawk-ui-text);
}
.hawk-chip.is-accent {
    border-color: var(--hawk-ui-accent);
    color: var(--hawk-ui-accent);
}

.hawk-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--hawk-ui-text-secondary);
}
.hawk-empty strong {
    display: block;
    color: var(--hawk-ui-text);
    font-weight: 600;
    margin-bottom: 4px;
}

.hawk-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--hawk-ui-border);
    border-top-color: var(--hawk-ui-accent);
    border-radius: 50%;
    animation: hawk-spin 0.8s linear infinite;
}
.hawk-skeleton {
    display: block;
    height: 1em;
    border-radius: var(--hawk-ui-radius);
    background: var(--hawk-ui-hover);
    animation: hawk-pulse 1.5s ease-in-out infinite;
}
@keyframes hawk-spin {
    to {
        transform: rotate(360deg);
    }
}
@keyframes hawk-pulse {
    50% {
        opacity: 0.4;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hawk-spinner,
    .hawk-skeleton {
        animation: none;
    }
}

/* ---- Charts (<hawk-bar-list>, <hawk-column-chart>) -------------------------------------------------------------- */

.hawk-bars {
    display: grid;
    gap: 4px;
}
.hawk-bar {
    all: unset;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(96px, 38%) 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 6px 4px;
    border-radius: var(--hawk-ui-radius);
}
button.hawk-bar {
    cursor: pointer;
}
button.hawk-bar:hover {
    background: var(--hawk-ui-hover);
}
button.hawk-bar:focus-visible {
    outline: 2px solid var(--hawk-ui-accent);
}
.hawk-bar-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hawk-bar-track {
    height: 8px;
    border-radius: 4px;
    background: var(--hawk-ui-hover);
    overflow: hidden;
}
.hawk-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--hawk-chart-color, var(--hawk-ui-accent));
}
.hawk-bar-value {
    color: var(--hawk-ui-text-secondary);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.hawk-columns {
    display: grid;
    align-items: end;
}
.hawk-column {
    background: var(--hawk-chart-color, var(--hawk-ui-accent));
    border-radius: 6px 6px 0 0;
}
.hawk-column-labels {
    display: grid;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--hawk-ui-text-secondary);
    text-align: center;
    white-space: nowrap;
}