/* Hallmark · macrostructure: Operations Console · tone: modern-minimal · anchor hue: cobalt
 * pre-emit critique: P5 H5 E5 S5 R5 V4 · contrast: pass (40–41)
 */

html,
body {
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-body);
    margin: 0;
    min-height: 100%;
    overflow-x: clip;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

button,
input,
select,
textarea {
    font: inherit;
}

a,
.btn-link {
    color: var(--color-accent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: var(--rule-focus) solid var(--color-focus);
    outline-offset: var(--rule-focus);
}

h1,
h2,
h3 {
    color: var(--color-ink);
    font-style: normal;
}

h1 {
    overflow-wrap: anywhere;
}

code {
    font-family: var(--font-mono);
}

.configuration-header,
.workspace-header,
.templates-header,
.conversation-header {
    margin-block-end: var(--space-xl);
}

.configuration-header > p,
.context-line {
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    margin: 0 0 var(--space-xs);
}

.configuration-header h1,
.workspace-header h1,
.templates-header h1,
.conversation-header h1,
.page-state h1 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 650;
    letter-spacing: -.035em;
    margin: 0 0 var(--space-sm);
    min-width: 0;
    overflow-wrap: anywhere;
}

.configuration-header > span {
    color: var(--color-muted);
    display: block;
}

.configuration-panel,
.workbench-panel,
.template-list-panel,
.template-create-panel,
.message-history,
.conversation-layout,
.endpoint-summary,
.tenant-strip,
.meta-rules {
    border-radius: var(--radius-md);
}

.configuration-panel,
.workbench-panel,
.template-list-panel,
.template-create-panel,
.message-history {
    background: var(--color-surface);
    border: var(--rule-thin) solid var(--color-rule);
}

.field {
    min-width: 0;
}

.field label {
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 650;
}

.helper,
.file-hint,
.validation-message {
    font-size: var(--text-xs);
    min-height: 1lh;
}

.helper,
.file-hint {
    color: var(--color-muted);
}

.validation-message {
    color: var(--color-error);
}

.control,
.conversation-search input,
.contact-editor input,
.reply-composer textarea,
.reply-composer select,
.attachment-composer input[type="file"],
.attachment-composer input[type="text"] {
    background: var(--color-paper);
    border: var(--rule-thin) solid var(--color-rule-strong);
    border-radius: var(--radius-sm);
    color: var(--color-ink);
    min-height: var(--control-height);
    min-width: 0;
    outline: var(--rule-focus) solid transparent;
    outline-offset: var(--rule-thin);
    padding-inline: var(--space-md);
}

.control:focus-visible,
.conversation-search input:focus-visible,
.contact-editor input:focus-visible,
.reply-composer textarea:focus-visible,
.reply-composer select:focus-visible,
.attachment-composer input:focus-visible {
    outline-color: var(--color-focus);
}

.control:disabled,
.conversation-search input:disabled,
.contact-editor input:disabled,
.reply-composer textarea:disabled,
.reply-composer select:disabled,
.attachment-composer input:disabled {
    color: var(--color-muted);
    cursor: not-allowed;
    opacity: .55;
}

.invalid,
.control.invalid {
    border-color: var(--color-error);
}

.valid.modified:not([type="checkbox"]) {
    border-color: var(--color-success);
}

.primary-action,
.secondary-action {
    align-items: center;
    border-radius: var(--radius-sm);
    display: inline-flex;
    justify-content: center;
    min-height: var(--control-height);
    padding-inline: var(--space-lg);
    text-decoration: none;
    white-space: nowrap;
}

.primary-action {
    background: var(--color-accent);
    border: var(--rule-thin) solid var(--color-accent);
    color: var(--color-accent-ink);
}

.secondary-action {
    background: var(--color-paper);
    border: var(--rule-thin) solid var(--color-rule-strong);
    color: var(--color-ink);
}

.primary-action:active,
.secondary-action:active {
    transform: translateY(var(--rule-thin));
}

.primary-action:disabled,
.secondary-action:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.token-state,
.provider-badge,
.status-badge,
.save-result,
.result-panel,
.template-alert {
    border-radius: var(--radius-sm);
}

.error-panel,
.save-result.is-error,
.result-panel.is-error,
.template-alert.is-error {
    background: var(--color-error-soft);
    border-color: var(--color-error);
    color: var(--color-error);
}

.page-state {
    background: var(--color-surface);
    border: var(--rule-thin) solid var(--color-rule);
    border-radius: var(--radius-md);
    max-width: 42rem;
    padding: clamp(var(--space-xl), 6vw, var(--space-2xl));
}

.page-state > p:not(.context-line) {
    color: var(--color-muted);
    max-width: 60ch;
}

.page-state dl {
    background: var(--color-surface-muted);
    border-radius: var(--radius-sm);
    display: grid;
    gap: var(--space-xs);
    margin-block: var(--space-lg);
    padding: var(--space-md);
}

.page-state dt {
    color: var(--color-muted);
    font-size: var(--text-xs);
}

.page-state dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.page-state.is-error {
    border-color: var(--color-error);
}

.blazor-error-boundary {
    background: var(--color-error);
    color: var(--color-accent-ink);
    padding: var(--space-md);
}

.blazor-error-boundary::after {
    content: "Si è verificato un errore.";
}

@media (hover: hover) and (pointer: fine) {
    .control:hover,
    .secondary-action:hover {
        background: var(--color-surface-muted);
    }

    .primary-action:hover {
        transform: translateY(calc(var(--rule-thin) * -1));
    }
}

@media (max-width: 40rem) {
    .configuration-header,
    .workspace-header,
    .templates-header,
    .conversation-header {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-md);
    }
}

@media (prefers-reduced-motion: reduce) {
    .primary-action,
    .secondary-action {
        transition-duration: var(--dur-reduced);
    }
}
/* Portal login */
.login-page {
    align-items: center;
    background: var(--color-paper);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-xl);
}

.login-panel {
    background: var(--color-surface);
    border: var(--rule-thin) solid var(--color-rule);
    border-radius: var(--radius-md);
    max-width: 28rem;
    padding: var(--space-xl);
    width: 100%;
}

.login-panel form {
    display: grid;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

.login-panel .field {
    display: grid;
    gap: var(--space-sm);
}

.login-panel .control {
    width: 100%;
}