* { box-sizing: border-box; margin: 0; padding: 0; }

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/font/ibm-plex-mono-400.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/font/ibm-plex-mono-700.woff2') format('woff2');
}

:root {
    --space-xs: 0.25em;
    --space-sm: 0.4em;
    --space-md: 0.65em;
    --space-lg: 1em;
    --space-xl: 1.618em;

    --bar-height: calc(1.618em + var(--space-xs) * 2);

    --column: 4em;
    --grid-3: calc(var(--column) * 3);
    --grid-4: calc(var(--column) * 4);
    --grid-6: calc(var(--column) * 6);
    --grid-8: calc(var(--column) * 8);
    --grid-9: calc(var(--column) * 9);
    --grid-12: calc(var(--column) * 12);

}

[data-theme="dark"] {
    --color-background: #0d1017;
    --color-surface: #131721;
    --color-border: rgba(230, 225, 207, 0.10);
    --color-row-border: rgba(230, 225, 207, 0.06);
    --color-text: #bfbdb6;
    --color-text-mute: #78716c;
    --color-text-bright: #e6e1cf;
    --color-hover: rgba(230, 225, 207, 0.03);

    --color-red: #f07171;
    --color-orange: #ff8f40;
    --color-yellow: #ffb454;
    --color-green: #aad94c;
    --color-blue: #39bae6;
    --color-purple: #d2a6ff;
    --color-cyan: #95e6cb;
    --color-zinc: #6c7380;

    --color-yellow-background-highlight: #78716c;
    --color-yellow-foreground-highlight: var(--color-text-bright);

    --button-primary-background: var(--color-text-bright);
    --button-primary-color: var(--color-background);
    --button-primary-border: var(--color-text-bright);
}

[data-theme="light"] {
    --color-background: #fcfcfc;
    --color-surface: #f8f9fa;
    --color-border: rgba(26, 31, 41, 0.16);
    --color-row-border: rgba(26, 31, 41, 0.10);
    --color-text: #5c6166;
    --color-text-mute: #8a9199;
    --color-text-bright: #1a1f29;
    --color-hover: rgba(26, 31, 41, 0.03);

    --color-red: #f07171;
    --color-orange: #fa8d3e;
    --color-yellow: #f2ae49;
    --color-green: #86b300;
    --color-blue: #399ee6;
    --color-purple: #a37acc;
    --color-cyan: #4cbf99;
    --color-zinc: #8a9199;

    --color-yellow-background-highlight: #fef08a;
    --color-yellow-foreground-highlight: #18181b;

    --button-primary-background: var(--color-text-bright);
    --button-primary-color: var(--color-background);
    --button-primary-border: var(--color-text-bright);
}

html {
    font-size: clamp(13px, 1.618vw, 21px);
}

body {
    font-family: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', 'Segoe UI Mono', Menlo, Monaco, 'Courier New', monospace;
    font-size: 1em;
    font-weight: 400;
    background: var(--color-background);
    color: var(--color-text);
    line-height: 1.618;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
}

a { color: var(--color-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

svg { vertical-align: middle; }

.color-red { color: var(--color-red); }
.color-orange { color: var(--color-orange); }
.color-yellow { color: var(--color-yellow); }
.color-green { color: var(--color-green); }
.color-blue { color: var(--color-blue); }
.color-purple { color: var(--color-purple); }
.color-cyan { color: var(--color-cyan); }
.color-mute { color: var(--color-text-mute); }
.color-bright { color: var(--color-text-bright); }

.application-shell {
    display: grid;
    grid-template-columns: 14em 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header  header"
        "sidebar content"
        "footer  footer";
    height: 100vh;
    overflow: hidden;
}

.application-header {
    grid-area: header;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: var(--bar-height);
    padding: var(--space-xs) var(--space-md);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    gap: var(--space-md);
}

.application-header__breadcrumb {
    display: flex;
    align-items: center;
    gap: 0;
}

.application-header__brand {
    color: var(--color-text);
    text-decoration: none;
}

.application-header__brand:hover {
    text-decoration: none;
}

.application-header__brand-accent {
    font-weight: bold;
    color: var(--color-text-bright);
}

.application-notice {
    padding: var(--space-xs) var(--space-md);
}

.application-notice--error { color: var(--color-red); }
.application-notice--success { color: var(--color-green); }
.application-notice--notice { color: var(--color-yellow); }
.application-notice--info { color: var(--color-blue); }

.application-header__status {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text);
}

.application-footer__action,
.application-header__action {
    display: inline-flex;
    align-items: center;
    padding: 0;
    font-family: inherit;
    font-size: 1em;
    line-height: 1;
    color: var(--color-text);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.application-footer__action:hover {
    text-decoration: none;
}

.application-sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    padding-top: var(--space-md);
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
}

.application-content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
    overflow-y: auto;
}

.application-footer {
    grid-area: footer;
    border-top: 1px solid var(--color-border);
    min-height: var(--bar-height);
    padding: var(--space-xs) var(--space-md);
    color: var(--color-text-mute);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-section__title {
    padding: var(--space-xs) var(--space-md);
    color: var(--color-text-bright);
}

.sidebar-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-lg);
    color: var(--color-text);
    text-decoration: none;
    line-height: 1;
    border-left: 2px solid transparent;
}

.sidebar-link:hover {
    background: var(--color-background);
    color: var(--color-text-bright);
    text-decoration: none;
}

.sidebar-link--active {
    color: var(--color-text-bright);
    border-left-color: var(--color-text-bright);
    background: var(--color-background);
}

.breadcrumb {
    color: var(--color-text-mute);
}

.breadcrumb a { color: var(--color-text-mute); }
.breadcrumb a:hover { color: var(--color-blue); }
.breadcrumb__separator { margin: 0 var(--space-sm); }

.page-navigation {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    flex-wrap: wrap;
}

.panel {
    border: 1px solid var(--color-border);
}

.panel__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text-bright);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-xs) var(--space-md);
    background: var(--color-surface);
    text-transform: uppercase;
}

.panel__count {
    padding: var(--space-xs) var(--space-md);
    border-top: 1px solid var(--color-row-border);
    text-align: right;
}

.panel__search {
    border-bottom: 1px solid var(--color-border);
}

.panel__search-input {
    display: block;
    width: 100%;
    padding: var(--space-xs) var(--space-md);
    font-family: inherit;
    font-size: 1em;
    line-height: 1.618;
    color: var(--color-text-bright);
    background: transparent;
    border: none;
}

.panel__search-input:focus {
    outline: none;
    background: var(--color-yellow-background-highlight);
    color: var(--color-yellow-foreground-highlight);
}

.panel__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th {
    text-align: left;
    padding: var(--space-xs) var(--space-md);
    color: var(--color-text);
    text-transform: uppercase;
    border-bottom: 1px solid var(--color-row-border);
    white-space: nowrap;
    font-weight: normal;
}

.data-table td {
    padding: var(--space-xs) var(--space-md);
    border-bottom: 1px solid var(--color-row-border);
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table tr:hover td {
    background: var(--color-hover);
}

.data-table a {
    color: var(--color-blue);
}

.data-table__cell--link {
    padding-top: 0;
    padding-bottom: 0;
}

.data-table__cell--link > a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: var(--space-xs) 0;
}

.data-table__cell--action {
    padding: 0;
}

.data-table__cell--action > .data-table__action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: var(--space-xs) var(--space-md);
}

.data-table__action {
    font-family: inherit;
    font-size: 1em;
    color: var(--color-text);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.data-table__action--danger:hover {
    color: var(--color-red);
}

.panel--chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chat-message-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.chat-message {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    padding: var(--space-xs) var(--space-md);
    border-bottom: 1px solid var(--color-row-border);
}

.chat-message:last-child {
    border-bottom: none;
}

.chat-message__user {
    color: var(--color-text-bright);
    flex-shrink: 0;
}

.chat-message__time {
    flex-shrink: 0;
}

.chat-message__body {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.chat-message-form {
    display: flex;
    align-items: stretch;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.chat-message-form__input {
    flex: 1;
}

.badge {
    display: inline-block;
    white-space: nowrap;
}

.badge--red { color: var(--color-red); }
.badge--orange { color: var(--color-orange); }
.badge--yellow { color: var(--color-yellow); }
.badge--green { color: var(--color-green); }
.badge--blue { color: var(--color-blue); }
.badge--purple { color: var(--color-purple); }
.badge--cyan { color: var(--color-cyan); }
.badge--zinc { color: var(--color-zinc); }
.badge--bright { color: var(--color-text-bright); }
.badge--mute { color: var(--color-text-mute); }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: var(--bar-height);
    padding: var(--space-xs) var(--space-md);
    font-family: inherit;
    font-size: 1em;
    line-height: 1;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.button:hover {
    color: var(--button-primary-color);
    background: var(--button-primary-background);
    border-color: var(--button-primary-border);
    text-decoration: none;
}

.button--primary {
    color: var(--button-primary-color);
    background: var(--button-primary-background);
    border-color: var(--button-primary-border);
}

.button--active {
    color: var(--button-primary-color);
    border-color: var(--button-primary-border);
    background: var(--button-primary-background);
}

.button--danger {
    color: var(--color-red);
    border-color: var(--color-red);
}

.button--danger:hover {
    background: var(--color-red);
    color: var(--color-background);
}

[data-theme="dark"] .theme-toggle__icon--sun,
[data-theme="light"] .theme-toggle__icon--moon {
    display: none;
}

.empty-state {
    color: var(--color-text);
    padding: var(--space-xs) var(--space-md);
}

.sidebar-section--footer {
    margin-top: auto;
    border-top: 1px solid var(--color-border);
}

.application-brand-centered {
    text-align: center;
    color: var(--color-text);
    padding: var(--space-md);
}

.container-centered {
    margin: var(--space-xl) auto;
    padding: 0 var(--space-md);
}

.container-3  { max-width: var(--grid-3); }
.container-4  { max-width: var(--grid-4); }
.container-6  { max-width: var(--grid-6); }
.container-8  { max-width: var(--grid-8); }
.container-9  { max-width: var(--grid-9); }
.container-12 { max-width: var(--grid-12); }

.form-field__label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.form-field__input,
.form-field__select {
    display: block;
    width: 100%;
    padding: var(--space-xs) var(--space-md);
    font-family: inherit;
    font-size: 1em;
    line-height: 1.618;
    color: var(--color-text-bright);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-text-bright);
}

.form-field__input--error {
    border-bottom-color: var(--color-red);
}

.form-field__error {
    color: var(--color-red);
}

.form-field__input:focus,
.form-field__select:focus {
    outline: none;
    background: var(--color-yellow-background-highlight);
    color: var(--color-yellow-foreground-highlight);
}

.panel__body form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md) var(--space-lg);
}

.form-grid--single {
    grid-template-columns: 1fr;
}

.form-action {
    display: flex;
    gap: var(--space-sm);
}

.form-action__spacer {
    flex: 1;
}

.pagination {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    color: var(--color-text-mute);
    padding: var(--space-xs) var(--space-md);
}

.pagination a {
    color: var(--color-text);
}

.record-count {
    color: var(--color-text);
    white-space: nowrap;
}

.detail-grid {
    display: grid;
    grid-template-columns: var(--grid-3) 1fr;
    gap: 0;
}

.detail-grid__label {
    padding: var(--space-xs) var(--space-md);
    color: var(--color-text-mute);
    border-bottom: 1px solid var(--color-row-border);
}

.detail-grid__value {
    padding: var(--space-xs) var(--space-md);
    color: var(--color-text-bright);
    border-bottom: 1px solid var(--color-row-border);
}

.detail-grid__label:last-of-type,
.detail-grid__value:last-of-type {
    border-bottom: none;
}

.search-highlight {
    background: var(--color-yellow-background-highlight);
    color: var(--color-yellow-foreground-highlight);
    padding: 0;
}

.htmx-indicator {
    display: none;
    color: var(--color-text-mute);
}

.htmx-request .htmx-indicator {
    display: inline;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-text-bright) transparent;
}

::-webkit-scrollbar {
    width: var(--space-sm);
    height: var(--space-sm);
}

::-webkit-scrollbar-track {
    background: transparent;
    border-left: 1px solid var(--color-border);
}

::-webkit-scrollbar-thumb {
    background: var(--color-text-bright);
}

@media (max-width: 700px) {
    .application-shell {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "content"
            "footer";
    }
    .application-sidebar { display: none; }
    .form-grid { grid-template-columns: 1fr; }
    .detail-grid { grid-template-columns: var(--grid-3) 1fr; }
    .hide-on-small { display: none; }
}

.log-event-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
    overflow-y: auto;
    font-family: var(--font-mono, monospace);
    font-size: 0.8em;
}

.log-event {
    border-left: 2px solid var(--border);
    padding: var(--space-xs) var(--space-sm);
    word-break: break-all;
    white-space: pre-wrap;
}

.log-event--info { border-left-color: var(--blue); }
.log-event--warn { border-left-color: var(--yellow); }
.log-event--error { border-left-color: var(--red); }
.log-event--debug { border-left-color: var(--zinc); }