/* =====================================================
   CLIENT PORTAL - CSS Custom Properties
   ===================================================== */

/* Universal layout variables (theme-independent) */
:root {
    --portal-radius: 8px;
    --portal-radius-sm: 4px;
    --portal-gap: 1rem;
    --portal-gap-lg: 1.5rem;
    --portal-max-width: 1200px;
    --portal-font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Light theme variables */
html[data-theme='light'] {
    --portal-bg: #f8fafc;
    --portal-surface: #ffffff;
    --portal-surface-muted: #f1f5f9;
    --portal-border: #e2e8f0;
    --portal-text: #0f172a;
    --portal-text-muted: #64748b;
    --portal-primary: #0f172a;
    --portal-primary-hover: #1e293b;
    --portal-primary-contrast: #ffffff;
    --portal-on-primary-border: rgba(255, 255, 255, 0.3);
    --portal-on-primary-hover: rgba(255, 255, 255, 0.1);
    --portal-success: #16a34a;
    --portal-warning: #d97706;
    --portal-danger: #dc2626;
    --portal-info: #0284c7;
    --portal-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06);

    --portal-badge-bg: #f1f5f9;
    --portal-badge-text: #0f172a;
    --portal-badge-success-bg: #dcfce7;
    --portal-badge-success-text: #166534;
    --portal-badge-warning-bg: #fef3c7;
    --portal-badge-warning-text: #92400e;
    --portal-badge-danger-bg: #fee2e2;
    --portal-badge-danger-text: #991b1b;
    --portal-badge-info-bg: #dbeafe;
    --portal-badge-info-text: #1e40af;

    --portal-message-success-bg: #dcfce7;
    --portal-message-success-border: #86efac;
    --portal-message-success-text: #166534;
    --portal-message-warning-bg: #fef3c7;
    --portal-message-warning-border: #fcd34d;
    --portal-message-warning-text: #92400e;
    --portal-message-danger-bg: #fee2e2;
    --portal-message-danger-border: #fca5a5;
    --portal-message-danger-text: #991b1b;
    --portal-message-info-bg: #dbeafe;
    --portal-message-info-border: #93c5fd;
    --portal-message-info-text: #1e40af;
}

/* Dark theme variables */
html[data-theme='dark'] {
    --portal-bg: #0f172a;
    --portal-surface: #1e293b;
    --portal-surface-muted: #334155;
    --portal-border: #334155;
    --portal-text: #f1f5f9;
    --portal-text-muted: #94a3b8;
    --portal-primary: #38bdf8;
    --portal-primary-hover: #0ea5e9;
    --portal-primary-contrast: #0f172a;
    --portal-on-primary-border: rgba(15, 23, 42, 0.35);
    --portal-on-primary-hover: rgba(15, 23, 42, 0.2);
    --portal-success: #4ade80;
    --portal-warning: #fbbf24;
    --portal-danger: #f87171;
    --portal-info: #38bdf8;
    --portal-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4);

    --portal-badge-bg: #334155;
    --portal-badge-text: #f1f5f9;
    --portal-badge-success-bg: #14532d;
    --portal-badge-success-text: #bbf7d0;
    --portal-badge-warning-bg: #78350f;
    --portal-badge-warning-text: #fde68a;
    --portal-badge-danger-bg: #7f1d1d;
    --portal-badge-danger-text: #fecaca;
    --portal-badge-info-bg: #1e3a5f;
    --portal-badge-info-text: #bfdbfe;

    --portal-message-success-bg: #14532d;
    --portal-message-success-border: #166534;
    --portal-message-success-text: #bbf7d0;
    --portal-message-warning-bg: #78350f;
    --portal-message-warning-border: #92400e;
    --portal-message-warning-text: #fde68a;
    --portal-message-danger-bg: #7f1d1d;
    --portal-message-danger-border: #991b1b;
    --portal-message-danger-text: #fecaca;
    --portal-message-info-bg: #1e3a5f;
    --portal-message-info-border: #1e40af;
    --portal-message-info-text: #bfdbfe;
}

/* Auto theme - light values initially */
html[data-theme='auto'] {
    --portal-bg: #f8fafc;
    --portal-surface: #ffffff;
    --portal-surface-muted: #f1f5f9;
    --portal-border: #e2e8f0;
    --portal-text: #0f172a;
    --portal-text-muted: #64748b;
    --portal-primary: #0f172a;
    --portal-primary-hover: #1e293b;
    --portal-primary-contrast: #ffffff;
    --portal-on-primary-border: rgba(255, 255, 255, 0.3);
    --portal-on-primary-hover: rgba(255, 255, 255, 0.1);
    --portal-success: #16a34a;
    --portal-warning: #d97706;
    --portal-danger: #dc2626;
    --portal-info: #0284c7;
    --portal-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06);

    --portal-badge-bg: #f1f5f9;
    --portal-badge-text: #0f172a;
    --portal-badge-success-bg: #dcfce7;
    --portal-badge-success-text: #166534;
    --portal-badge-warning-bg: #fef3c7;
    --portal-badge-warning-text: #92400e;
    --portal-badge-danger-bg: #fee2e2;
    --portal-badge-danger-text: #991b1b;
    --portal-badge-info-bg: #dbeafe;
    --portal-badge-info-text: #1e40af;

    --portal-message-success-bg: #dcfce7;
    --portal-message-success-border: #86efac;
    --portal-message-success-text: #166534;
    --portal-message-warning-bg: #fef3c7;
    --portal-message-warning-border: #fcd34d;
    --portal-message-warning-text: #92400e;
    --portal-message-danger-bg: #fee2e2;
    --portal-message-danger-border: #fca5a5;
    --portal-message-danger-text: #991b1b;
    --portal-message-info-bg: #dbeafe;
    --portal-message-info-border: #93c5fd;
    --portal-message-info-text: #1e40af;
}

/* Auto theme - dark values when the OS prefers dark */
@media (prefers-color-scheme: dark) {
    html[data-theme='auto'] {
        --portal-bg: #0f172a;
        --portal-surface: #1e293b;
        --portal-surface-muted: #334155;
        --portal-border: #334155;
        --portal-text: #f1f5f9;
        --portal-text-muted: #94a3b8;
        --portal-primary: #38bdf8;
        --portal-primary-hover: #0ea5e9;
        --portal-primary-contrast: #0f172a;
        --portal-on-primary-border: rgba(15, 23, 42, 0.35);
        --portal-on-primary-hover: rgba(15, 23, 42, 0.2);
        --portal-success: #4ade80;
        --portal-warning: #fbbf24;
        --portal-danger: #f87171;
        --portal-info: #38bdf8;
        --portal-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4);

        --portal-badge-bg: #334155;
        --portal-badge-text: #f1f5f9;
        --portal-badge-success-bg: #14532d;
        --portal-badge-success-text: #bbf7d0;
        --portal-badge-warning-bg: #78350f;
        --portal-badge-warning-text: #fde68a;
        --portal-badge-danger-bg: #7f1d1d;
        --portal-badge-danger-text: #fecaca;
        --portal-badge-info-bg: #1e3a5f;
        --portal-badge-info-text: #bfdbfe;

        --portal-message-success-bg: #14532d;
        --portal-message-success-border: #166534;
        --portal-message-success-text: #bbf7d0;
        --portal-message-warning-bg: #78350f;
        --portal-message-warning-border: #92400e;
        --portal-message-warning-text: #fde68a;
        --portal-message-danger-bg: #7f1d1d;
        --portal-message-danger-border: #991b1b;
        --portal-message-danger-text: #fecaca;
        --portal-message-info-bg: #1e3a5f;
        --portal-message-info-border: #1e40af;
        --portal-message-info-text: #bfdbfe;
    }
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

.portal-body {
    background: var(--portal-bg);
    color: var(--portal-text);
    font-family: var(--portal-font-stack);
    font-size: 16px;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--portal-info);
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: underline;
}

/* === Header === */
.portal-header {
    background: var(--portal-primary);
    color: var(--portal-primary-contrast);
    box-shadow: var(--portal-shadow);
}

.portal-header__inner {
    max-width: var(--portal-max-width);
    margin: 0 auto;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.portal-header__brand {
    color: var(--portal-primary-contrast);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.portal-header__brand:hover,
.portal-header__brand:focus {
    text-decoration: none;
}

.portal-header__brand-logo {
    height: 2em;
    width: auto;
    display: block;
}

.portal-nav {
    display: flex;
    gap: 0.875rem;
    flex-wrap: nowrap;
}

.portal-nav__link {
    color: var(--portal-primary-contrast);
    opacity: 0.9;
    font-weight: 500;
    white-space: nowrap;
}

.portal-nav__link:hover,
.portal-nav__link:focus {
    opacity: 1;
}

.portal-nav__group {
    position: relative;
}

.portal-nav__trigger {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--portal-primary-contrast);
    opacity: 0.9;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.portal-nav__trigger:hover,
.portal-nav__trigger:focus {
    opacity: 1;
}

.portal-nav__chevron {
    font-size: 0.75em;
    line-height: 1;
    transition: transform 120ms ease;
}

.portal-nav__trigger[aria-expanded='true'] .portal-nav__chevron {
    transform: rotate(180deg);
}

.portal-nav__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    margin-left: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    background: var(--portal-danger);
    color: #ffffff;
}

.portal-nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin: 0;
    padding: 0.25rem;
    list-style: none;
    min-width: 11rem;
    background: var(--portal-surface);
    color: var(--portal-text);
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius-sm);
    box-shadow: var(--portal-shadow);
    display: none;
    z-index: 20;
}

.portal-nav__trigger[aria-expanded='true'] + .portal-nav__menu {
    display: block;
}

@media (hover: hover) {
    .portal-nav__group:hover .portal-nav__menu,
    .portal-nav__group:focus-within .portal-nav__menu {
        display: block;
    }

    .portal-nav__group:hover .portal-nav__chevron,
    .portal-nav__group:focus-within .portal-nav__chevron {
        transform: rotate(180deg);
    }
}

.portal-nav__menu-link {
    display: block;
    padding: 0.5rem 0.75rem;
    color: var(--portal-text);
    border-radius: var(--portal-radius-sm);
    white-space: nowrap;
}

.portal-nav__menu-link:hover,
.portal-nav__menu-link:focus {
    background: var(--portal-surface-muted);
    text-decoration: none;
}

.portal-header__logout {
    margin: 0;
}

.portal-header__logout-button {
    background: transparent;
    border: 1px solid var(--portal-on-primary-border);
    color: var(--portal-primary-contrast);
    padding: 0.375rem 0.875rem;
    border-radius: var(--portal-radius-sm);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.portal-header__logout-button:hover,
.portal-header__logout-button:focus {
    background: var(--portal-on-primary-hover);
}

.portal-theme-switcher {
    display: flex;
    gap: 0.25rem;
}

.portal-theme-switcher__button {
    background: transparent;
    border: 1px solid var(--portal-on-primary-border);
    border-radius: var(--portal-radius-sm);
    color: var(--portal-primary-contrast);
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
}

.portal-theme-switcher__button:hover,
.portal-theme-switcher__button:focus {
    background: var(--portal-on-primary-hover);
}

.portal-theme-switcher__button[aria-pressed='true'] {
    background: var(--portal-on-primary-hover);
    border-color: var(--portal-primary-contrast);
}

@media (min-width: 768px) {
    .portal-header__inner {
        flex-direction: row;
        align-items: center;
        gap: 2rem;
    }

    .portal-theme-switcher {
        margin-left: auto;
    }
}

@media (max-width: 767px) {
    .portal-nav {
        flex-wrap: wrap;
    }

    .portal-nav__menu {
        position: static;
        margin-top: 0.25rem;
        background: var(--portal-on-primary-hover);
        color: var(--portal-primary-contrast);
        border-color: var(--portal-on-primary-border);
        box-shadow: none;
        min-width: 0;
        width: 100%;
    }

    .portal-nav__menu-link {
        color: var(--portal-primary-contrast);
    }

    .portal-nav__menu-link:hover,
    .portal-nav__menu-link:focus {
        background: var(--portal-on-primary-border);
    }
}

/* === Main + footer === */
.portal-main {
    max-width: var(--portal-max-width);
    margin: 0 auto;
    padding: 1.5rem 1rem;
    width: 100%;
    flex: 1;
}

.portal-footer {
    background: var(--portal-surface);
    border-top: 1px solid var(--portal-border);
    margin-top: 2rem;
    padding: 1rem;
    text-align: center;
}

.portal-footer__text {
    color: var(--portal-text-muted);
    font-size: 0.875rem;
    margin: 0;
}

/* === Auth page === */
.portal-page--auth {
    align-items: center;
}

.portal-card--auth {
    width: 100%;
    max-width: 28rem;
    margin: 2rem auto;
}

/* === Page header === */
.portal-page {
    display: flex;
    flex-direction: column;
    gap: var(--portal-gap-lg);
}

.portal-page__header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.portal-page__title {
    font-size: 1.5rem;
    margin: 0;
}

.portal-page__subtitle {
    color: var(--portal-text-muted);
    margin: 0;
}

/* === Cards === */
.portal-card {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius);
    box-shadow: var(--portal-shadow);
    display: flex;
    flex-direction: column;
}

.portal-card__header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--portal-border);
}

.portal-card__header--with-action {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
}

.portal-card__title {
    font-size: 1.125rem;
    margin: 0;
}

.portal-card__subtitle {
    font-size: 0.875rem;
    color: var(--portal-text-muted);
    margin: 1rem 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.portal-card__hint {
    color: var(--portal-text-muted);
    font-size: 0.875rem;
    font-style: italic;
    margin: 0.25rem 0 0;
}

.portal-card__body {
    padding: 1rem 1.25rem;
}

.portal-card__empty {
    color: var(--portal-text-muted);
    margin: 0;
}

/* === Grid (dashboard) === */
.portal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--portal-gap-lg);
}

@media (min-width: 768px) {
    .portal-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .portal-card--span-2 {
        grid-column: span 2;
    }
}

/* === Stack (profile) === */
.portal-stack {
    display: flex;
    flex-direction: column;
    gap: var(--portal-gap-lg);
}

/* === Lists === */
.portal-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.portal-list__item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--portal-border);
}

.portal-list__item:last-child {
    border-bottom: none;
}

.portal-list__primary {
    font-weight: 500;
}

.portal-list__meta {
    color: var(--portal-text-muted);
    font-size: 0.875rem;
}

@media (min-width: 480px) {
    .portal-list__item {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .portal-list--assignments .portal-list__item {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }

    .portal-list--assignments .portal-list__meta {
        justify-self: center;
        text-align: center;
    }

    .portal-list--assignments .portal-list__actions {
        justify-self: end;
    }
}

/* === Definition lists === */
.portal-deflist {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.portal-deflist__row {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.portal-deflist__term {
    font-weight: 600;
    color: var(--portal-text-muted);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.portal-deflist__desc {
    margin: 0;
}

@media (min-width: 640px) {
    .portal-deflist__row {
        flex-direction: row;
        gap: 1rem;
    }

    .portal-deflist__term {
        flex: 0 0 12rem;
        text-transform: none;
        letter-spacing: normal;
        font-size: 1rem;
        color: var(--portal-text-muted);
    }
}

/* === Status badges === */
.portal-badge {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--portal-badge-bg);
    color: var(--portal-badge-text);
}

.portal-badge--success {
    background: var(--portal-badge-success-bg);
    color: var(--portal-badge-success-text);
}

.portal-badge--warning {
    background: var(--portal-badge-warning-bg);
    color: var(--portal-badge-warning-text);
}

.portal-badge--danger {
    background: var(--portal-badge-danger-bg);
    color: var(--portal-badge-danger-text);
}

.portal-badge--info {
    background: var(--portal-badge-info-bg);
    color: var(--portal-badge-info-text);
}

/* === Tables === */
.portal-table {
    width: 100%;
    border-collapse: collapse;
}

.portal-table th,
.portal-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--portal-border);
}

.portal-table th {
    color: var(--portal-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.portal-table__num {
    text-align: right;
    white-space: nowrap;
}

.portal-table-scroll {
    overflow-x: auto;
}

/* === Forms === */
.portal-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 640px;
}

.portal-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.portal-form--inline .portal-form__field {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 0.5rem 1rem;
    align-items: center;
}

.portal-form--inline .portal-form__label {
    margin: 0;
}

.portal-form--inline .portal-form__hint,
.portal-form--inline .portal-form__errors {
    grid-column: 2;
}

@media (max-width: 640px) {
    .portal-form--inline .portal-form__field {
        grid-template-columns: 1fr;
        align-items: start;
    }
    .portal-form--inline .portal-form__hint,
    .portal-form--inline .portal-form__errors {
        grid-column: 1;
    }
}

.portal-form__label {
    font-weight: 600;
    font-size: 0.875rem;
}

.portal-form__input,
.portal-form__textarea,
.portal-form__select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius-sm);
    font: inherit;
    background: var(--portal-surface);
    color: var(--portal-text);
}

.portal-form__input:focus,
.portal-form__textarea:focus,
.portal-form__select:focus {
    outline: 2px solid var(--portal-info);
    outline-offset: 1px;
}

.portal-combobox {
    position: relative;
    width: 100%;
}

.portal-combobox__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius-sm);
    font: inherit;
    background: var(--portal-surface);
    color: var(--portal-text);
    cursor: pointer;
    text-align: left;
}

.portal-combobox__toggle:focus {
    outline: 2px solid var(--portal-info);
    outline-offset: 1px;
}

.portal-combobox__value[data-empty] {
    color: var(--portal-text-muted);
}

.portal-combobox__caret {
    opacity: 0.7;
    font-size: 0.75rem;
}

.portal-combobox__panel {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius-sm);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 16rem;
}

.portal-combobox__panel[hidden] {
    display: none;
}

.portal-combobox__filter {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius-sm);
    font: inherit;
    background: var(--portal-surface);
    color: var(--portal-text);
}

.portal-combobox__options {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    max-height: 12rem;
}

.portal-combobox__option {
    padding: 0.4rem 0.6rem;
    border-radius: var(--portal-radius-sm);
    cursor: pointer;
    color: var(--portal-text);
}

.portal-combobox__option:hover,
.portal-combobox__option:focus {
    background: var(--portal-hover, rgba(255, 255, 255, 0.08));
    outline: none;
}

.portal-combobox__option[hidden] {
    display: none;
}

.portal-form__hint {
    color: var(--portal-text-muted);
    font-size: 0.8125rem;
    font-style: italic;
}

.portal-form__error {
    color: var(--portal-danger);
    font-size: 0.875rem;
}

.portal-form__required {
    color: var(--portal-danger);
    margin-left: 0.125rem;
}

.portal-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* === Actions === */
.portal-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.portal-action {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: var(--portal-radius-sm);
    background: var(--portal-primary);
    color: var(--portal-primary-contrast);
    font: inherit;
    font-weight: 500;
    line-height: 1.25;
    border: 1px solid var(--portal-primary);
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.portal-action:hover,
.portal-action:focus {
    text-decoration: none;
    background: var(--portal-primary-hover);
    border-color: var(--portal-primary-hover);
}

.portal-action--danger {
    background: var(--portal-danger);
    border-color: var(--portal-danger);
}

.portal-action--danger:hover,
.portal-action--danger:focus {
    background: var(--portal-danger);
    border-color: var(--portal-danger);
    filter: brightness(0.9);
}

.portal-action--ghost {
    background: transparent;
    color: var(--portal-text);
    border-color: var(--portal-border);
}

.portal-action--ghost:hover,
.portal-action--ghost:focus {
    background: var(--portal-surface-muted);
    border-color: var(--portal-border);
    color: var(--portal-text);
}

.portal-action--warning {
    background: var(--portal-warning);
    border-color: var(--portal-warning);
    color: #ffffff;
}

.portal-action--warning:hover,
.portal-action--warning:focus {
    background: var(--portal-warning);
    border-color: var(--portal-warning);
    color: #ffffff;
    filter: brightness(0.9);
}

.portal-actions__form {
    display: contents;
}

/* === Developer impersonation banner === */
.portal-developer-banner {
    background: var(--portal-badge-warning-bg);
    color: var(--portal-badge-warning-text);
    border-bottom: 1px solid var(--portal-warning);
    padding: 0.5rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.portal-developer-banner__actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* === Flash messages === */
.portal-messages {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.portal-message {
    padding: 0.75rem 1rem;
    border-radius: var(--portal-radius-sm);
    border: 1px solid var(--portal-border);
    background: var(--portal-surface);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.portal-message__text {
    flex: 1;
}

.portal-message__close {
    position: relative;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
}

.portal-message__close:hover,
.portal-message__close:focus {
    opacity: 1;
}

.portal-message__close-icon {
    position: relative;
    z-index: 1;
    width: 0.75rem;
    height: 0.75rem;
    display: block;
}

.portal-message__timer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
}

.portal-message__timer-ring {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-dasharray: 100.5;
    stroke-dashoffset: 0;
    opacity: 0.5;
    animation: portal-toast-timer 5s linear forwards;
}

@keyframes portal-toast-timer {
    to { stroke-dashoffset: 100.5; }
}

.portal-message--success {
    background: var(--portal-message-success-bg);
    border-color: var(--portal-message-success-border);
    color: var(--portal-message-success-text);
}

.portal-message--warning {
    background: var(--portal-message-warning-bg);
    border-color: var(--portal-message-warning-border);
    color: var(--portal-message-warning-text);
}

.portal-message--error,
.portal-message--danger {
    background: var(--portal-message-danger-bg);
    border-color: var(--portal-message-danger-border);
    color: var(--portal-message-danger-text);
}

.portal-message--info {
    background: var(--portal-message-info-bg);
    border-color: var(--portal-message-info-border);
    color: var(--portal-message-info-text);
}

/* === Utilities === */
.portal-text-muted {
    color: var(--portal-text-muted);
}

/* === Charts === */
.portal-chart {
    position: relative;
    height: 280px;
}

.portal-chart--mini {
    height: 180px;
}

.portal-stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--portal-gap-lg);
}

@media (min-width: 720px) {
    .portal-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
}