/* =============================================================================
   Nodra — компоненты (Carbon-стиль: квадратные углы, плотная типографика).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Button — .n-btn
   Варианты: primary, secondary, tertiary, ghost, danger
   Размеры: sm (32), md (40), lg (48, по умолчанию), xl (64)
   ----------------------------------------------------------------------------- */
.n-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    column-gap: var(--n-spacing-07);
    position: relative;
    max-width: 20rem;
    min-height: 3rem;
    margin: 0;
    padding: calc(0.875rem - 1px) 60px calc(0.875rem - 1px) 15px;
    border: 1px solid transparent;
    border-radius: 0;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.28572;
    letter-spacing: 0.16px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    vertical-align: top;
    outline: none;
    transition: background var(--n-duration-fast) var(--n-easing-standard),
                border-color var(--n-duration-fast) var(--n-easing-standard),
                color var(--n-duration-fast) var(--n-easing-standard),
                box-shadow var(--n-duration-fast) var(--n-easing-standard);
}

.n-btn:focus-visible {
    box-shadow: inset 0 0 0 1px var(--n-focus), inset 0 0 0 2px var(--n-focus-inset);
}

/* Кнопка без иконки: симметричный паддинг, текст слева */
.n-btn--no-icon {
    justify-content: flex-start;
    padding-right: 15px;
}

.n-btn__label { white-space: nowrap; }

.n-btn__icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.n-btn__icon svg { width: 100%; height: 100%; fill: currentColor; }

/* Варианты */
.n-btn--primary   { background: var(--n-button-primary);   color: var(--n-text-on-color); }
.n-btn--primary:hover  { background: var(--n-button-primary-hover); }
.n-btn--primary:active { background: var(--n-button-primary-active); }

.n-btn--secondary { background: var(--n-button-secondary); color: var(--n-text-on-color); }
.n-btn--secondary:hover  { background: var(--n-button-secondary-hover); }
.n-btn--secondary:active { background: var(--n-button-secondary-active); }

.n-btn--tertiary  { background: transparent; color: var(--n-button-tertiary); border-color: var(--n-button-tertiary); }
.n-btn--tertiary:hover  { background: var(--n-button-tertiary-hover); color: var(--n-text-inverse); border-color: var(--n-button-tertiary-hover); }
.n-btn--tertiary:active { background: var(--n-button-tertiary-active); color: var(--n-text-inverse); }

.n-btn--ghost     { background: transparent; color: var(--n-link-primary); padding-right: 15px; }
.n-btn--ghost:hover  { background: var(--n-background-hover); color: var(--n-link-primary-hover); }
.n-btn--ghost:active { background: var(--n-background-active); }

.n-btn--danger    { background: var(--n-button-danger); color: var(--n-text-on-color); }
.n-btn--danger:hover  { background: var(--n-button-danger-hover); }
.n-btn--danger:active { background: var(--n-button-danger-active); }

/* Размеры */
.n-btn--sm { min-height: 2rem;   padding-top: calc(0.4375rem - 1px); padding-bottom: calc(0.4375rem - 1px); }
.n-btn--md { min-height: 2.5rem; padding-top: calc(0.6875rem - 1px); padding-bottom: calc(0.6875rem - 1px); }
.n-btn--lg { min-height: 3rem; }
.n-btn--xl { min-height: 4rem; align-items: flex-start; padding-top: var(--n-spacing-05); }

/* Во всю ширину контейнера */
.n-btn--full { max-width: none; width: 100%; }

/* Disabled */
.n-btn:disabled,
.n-btn[aria-disabled="true"] {
    background: var(--n-button-disabled);
    color: var(--n-text-on-color);
    border-color: transparent;
    cursor: not-allowed;
    opacity: 0.5;
}
.n-btn--tertiary:disabled,
.n-btn--ghost:disabled,
.n-btn--tertiary[aria-disabled="true"],
.n-btn--ghost[aria-disabled="true"] {
    background: transparent;
    color: var(--n-text-disabled);
    border-color: var(--n-button-disabled);
    opacity: 1;
}

/* -----------------------------------------------------------------------------
   Tile / Card — .n-tile
   ----------------------------------------------------------------------------- */
.n-tile {
    position: relative;
    display: block;
    background: var(--n-layer-01);
    color: var(--n-text-primary);
    padding: var(--n-spacing-05);
    border: 1px solid transparent;
    min-block-size: 4rem;
}

.n-tile--clickable {
    cursor: pointer;
    width: 100%;
    text-align: left;
    font: inherit;
    transition: background var(--n-duration-fast) var(--n-easing-standard);
}
.n-tile--clickable:hover { background: var(--n-layer-hover-01); }
.n-tile--clickable:focus-visible { outline: 2px solid var(--n-focus); outline-offset: -2px; }

.n-tile--selected { outline: 2px solid var(--n-border-interactive); outline-offset: -2px; }

.n-tile__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--n-spacing-05);
    margin-bottom: var(--n-spacing-03);
}
.n-tile__title { font-size: 1.25rem; line-height: 1.4; font-weight: 400; color: var(--n-text-primary); }
.n-tile__subtitle { font-size: 0.75rem; line-height: 1.33333; color: var(--n-text-helper); }

/* -----------------------------------------------------------------------------
   Tag — .n-tag (статусные метки, скруглённые)
   ----------------------------------------------------------------------------- */
.n-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--n-spacing-02);
    height: 1.5rem;
    max-width: 100%;
    padding: 0 var(--n-spacing-03);
    border-radius: 0.9375rem;
    font-size: 0.75rem;
    line-height: 1;
    font-weight: 400;
    white-space: nowrap;
    background: var(--n-tag-gray-bg);
    color: var(--n-tag-gray-text);
}
.n-tag--sm { height: 1.125rem; padding: 0 var(--n-spacing-02); }

.n-tag--blue    { background: var(--n-tag-blue-bg);    color: var(--n-tag-blue-text); }
.n-tag--green   { background: var(--n-tag-green-bg);   color: var(--n-tag-green-text); }
.n-tag--red     { background: var(--n-tag-red-bg);     color: var(--n-tag-red-text); }
.n-tag--purple  { background: var(--n-tag-purple-bg);  color: var(--n-tag-purple-text); }
.n-tag--gray    { background: var(--n-tag-gray-bg);    color: var(--n-tag-gray-text); }
.n-tag--warning { background: var(--n-tag-warning-bg); color: var(--n-tag-warning-text); }

.n-tag__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* -----------------------------------------------------------------------------
   Списки — .n-list (ul/ol) и структурированный список .n-structured-list
   ----------------------------------------------------------------------------- */
.n-list { margin: 0; padding: 0; }
.n-list--unordered { list-style: disc; padding-left: var(--n-spacing-07); }
.n-list--ordered   { list-style: decimal; padding-left: var(--n-spacing-07); }
.n-list__item { font-size: 0.875rem; line-height: 1.42857; margin-bottom: var(--n-spacing-02); }

.n-structured-list { display: table; width: 100%; border-collapse: collapse; }
.n-structured-list__head .n-structured-list__cell {
    color: var(--n-text-secondary);
    font-weight: 600;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--n-border-subtle-02);
}
.n-structured-list__row { display: table-row; }
.n-structured-list__row--clickable { cursor: pointer; }
.n-structured-list__body .n-structured-list__row { border-bottom: 1px solid var(--n-border-subtle); }
.n-structured-list__body .n-structured-list__row:hover { background: var(--n-layer-hover-01); }
.n-structured-list__cell {
    display: table-cell;
    padding: var(--n-spacing-05);
    vertical-align: top;
    font-size: 0.875rem;
    line-height: 1.28572;
    color: var(--n-text-primary);
}

/* -----------------------------------------------------------------------------
   Поле ввода — .n-field / .n-input
   ----------------------------------------------------------------------------- */
.n-field { display: flex; flex-direction: column; }

.n-field__label {
    font-size: 0.75rem;
    line-height: 1.33333;
    color: var(--n-text-secondary);
    margin-bottom: var(--n-spacing-03);
}

.n-input {
    height: 2.5rem;
    width: 100%;
    padding: 0 var(--n-spacing-05);
    background: var(--n-field-01);
    color: var(--n-text-primary);
    border: none;
    border-bottom: 1px solid var(--n-border-strong);
    border-radius: 0;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.28572;
    transition: background var(--n-duration-fast) var(--n-easing-standard),
                outline var(--n-duration-fast) var(--n-easing-standard);
}
.n-input::placeholder { color: var(--n-text-placeholder); }
.n-input:focus { outline: 2px solid var(--n-focus); outline-offset: -2px; }
.n-input:disabled { color: var(--n-text-disabled); border-bottom-color: transparent; cursor: not-allowed; }

textarea.n-input { height: auto; min-height: 5rem; padding: var(--n-spacing-04) var(--n-spacing-05); resize: vertical; }

.n-field__helper { font-size: 0.75rem; line-height: 1.33333; color: var(--n-text-helper); margin-top: var(--n-spacing-02); }

.n-field--invalid .n-input { outline: 2px solid var(--n-support-error); outline-offset: -2px; border-bottom-color: transparent; }
.n-field__error { font-size: 0.75rem; line-height: 1.33333; color: var(--n-text-error); margin-top: var(--n-spacing-02); }

/* -----------------------------------------------------------------------------
   Select (выпадающий список) — .n-select
   ----------------------------------------------------------------------------- */
.n-select {
    height: 2.5rem;
    width: 100%;
    padding: 0 2.5rem 0 var(--n-spacing-05);
    background-color: var(--n-field-01);
    color: var(--n-text-primary);
    border: none;
    border-bottom: 1px solid var(--n-border-strong);
    border-radius: 0;
    font-family: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23f4f4f4'%3E%3Cpath d='M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--n-spacing-05) center;
}
.n-select:focus { outline: 2px solid var(--n-focus); outline-offset: -2px; }
.n-select:disabled { color: var(--n-text-disabled); cursor: not-allowed; }
.n-select option { background: var(--n-layer-02); color: var(--n-text-primary); }

/* -----------------------------------------------------------------------------
   Checkbox — .n-checkbox (нативный input + подпись)
   ----------------------------------------------------------------------------- */
.n-checkbox-field { display: inline-flex; align-items: center; gap: var(--n-spacing-03); cursor: pointer; user-select: none; }
.n-checkbox {
    appearance: none;
    width: 1rem;
    height: 1rem;
    margin: 0;
    border: 1px solid var(--n-text-secondary);
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}
.n-checkbox:checked { background: var(--n-text-primary); border-color: var(--n-text-primary); }
.n-checkbox:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid var(--n-background);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.n-checkbox:focus-visible { outline: 2px solid var(--n-focus); outline-offset: 1px; }
.n-checkbox-field__label { font-size: 0.875rem; color: var(--n-text-primary); }

/* -----------------------------------------------------------------------------
   Data table — .n-table (Carbon data table)
   ----------------------------------------------------------------------------- */
.n-table-wrap { width: 100%; overflow-x: auto; background: var(--n-layer-01); }
.n-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.n-table thead th {
    text-align: left;
    height: 3rem;
    padding: 0 var(--n-spacing-05);
    background: var(--n-layer-02);
    color: var(--n-text-primary);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.28572;
    border-bottom: 1px solid var(--n-border-subtle);
    white-space: nowrap;
}
.n-table tbody td {
    height: 3rem;
    padding: var(--n-spacing-04) var(--n-spacing-05);
    color: var(--n-text-secondary);
    border-bottom: 1px solid var(--n-border-subtle);
    vertical-align: middle;
}
.n-table tbody tr { background: var(--n-layer-01); transition: background var(--n-duration-fast) var(--n-easing-standard); }
.n-table tbody tr:hover { background: var(--n-layer-hover-01); }
.n-table tbody tr:hover td { color: var(--n-text-primary); }
.n-table__actions { display: flex; gap: var(--n-spacing-02); }
.n-table__empty { padding: var(--n-spacing-07); text-align: center; color: var(--n-text-helper); background: var(--n-layer-01); }

/* Иконочная кнопка (для действий в таблицах/шапке) */
.n-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--n-icon-primary);
    cursor: pointer;
    transition: background var(--n-duration-fast) var(--n-easing-standard);
}
.n-icon-btn:hover { background: var(--n-background-hover); }
.n-icon-btn:focus-visible { outline: 2px solid var(--n-focus); outline-offset: -2px; }
.n-icon-btn svg { width: 1rem; height: 1rem; fill: currentColor; }

/* -----------------------------------------------------------------------------
   Шапка страницы / секции
   ----------------------------------------------------------------------------- */
.n-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--n-spacing-05);
    flex-wrap: wrap;
    margin-bottom: var(--n-spacing-07);
}
.n-page-header__title { font-size: 2rem; line-height: 1.25; font-weight: 400; color: var(--n-text-primary); }
.n-page-header__subtitle { font-size: 0.875rem; color: var(--n-text-helper); margin-top: var(--n-spacing-02); }

.n-breadcrumb { display: flex; gap: var(--n-spacing-03); align-items: center; font-size: 0.875rem; margin-bottom: var(--n-spacing-05); }
.n-breadcrumb a { color: var(--n-link-primary); }
.n-breadcrumb__sep { color: var(--n-text-helper); }

/* Стат-плитка дашборда */
.n-stat { display: flex; flex-direction: column; gap: var(--n-spacing-03); }
.n-stat__label { font-size: 0.75rem; line-height: 1.33333; color: var(--n-text-helper); text-transform: none; }
.n-stat__value { font-size: 2.625rem; line-height: 1.199; font-weight: 300; color: var(--n-text-primary); }
.n-stat__icon { width: 1.5rem; height: 1.5rem; fill: var(--n-icon-secondary); }

.n-divider { height: 1px; background: var(--n-border-subtle); border: none; margin: var(--n-spacing-06) 0; }

/* -----------------------------------------------------------------------------
   Meter — полоска (аптайм и т.п.)
   ----------------------------------------------------------------------------- */
.n-meter { position: relative; width: 100%; height: 6px; background: var(--n-layer-02); overflow: hidden; }
.n-meter__fill { position: absolute; inset: 0 auto 0 0; background: var(--n-support-success); }
.n-meter__fill--warn { background: var(--n-support-warning); }
.n-meter__fill--bad { background: var(--n-support-error); }

/* Строка списка мониторов/инцидентов */
.n-row {
    display: flex;
    align-items: center;
    gap: var(--n-spacing-05);
    padding: var(--n-spacing-04) var(--n-spacing-05);
    border-bottom: 1px solid var(--n-border-subtle);
    text-decoration: none;
    color: inherit;
    transition: background var(--n-duration-fast) var(--n-easing-standard);
}
.n-row:last-child { border-bottom: none; }
a.n-row:hover { background: var(--n-layer-hover-01); text-decoration: none; }
.n-row__main { flex: 1 1 auto; min-width: 0; }
.n-row__title { font-size: 0.875rem; color: var(--n-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n-row__sub { font-size: 0.75rem; color: var(--n-text-helper); }
.n-row__aside { flex-shrink: 0; text-align: right; }
.n-row__value { font-size: 0.875rem; color: var(--n-text-primary); font-variant-numeric: tabular-nums; }

/* -----------------------------------------------------------------------------
   Wizard — пошаговая инструкция (напр. привязка Telegram)
   ----------------------------------------------------------------------------- */
.n-wiz-step { display: flex; gap: var(--n-spacing-04); align-items: flex-start; padding: var(--n-spacing-03) 0; }
.n-wiz-num {
    flex-shrink: 0; width: 1.5rem; height: 1.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--n-background-selected); color: var(--n-text-primary);
    font-size: 0.75rem; font-weight: 600;
}
.n-wiz-step--done .n-wiz-num { background: var(--n-support-success); color: #ffffff; }
.n-wiz-body { flex: 1 1 auto; min-width: 0; }
.n-wiz-title { font-size: 0.875rem; color: var(--n-text-primary); margin-bottom: var(--n-spacing-03); }

/* -----------------------------------------------------------------------------
   Modal — .n-modal
   ----------------------------------------------------------------------------- */
.n-modal__backdrop {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--n-spacing-05);
    background: rgba(0, 0, 0, 0.55);
    animation: n-fade-in var(--n-duration-moderate) var(--n-easing-entrance);
}
.n-modal {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 32rem;
    max-height: 90vh;
    background: var(--n-layer-01);
    color: var(--n-text-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.n-modal--sm { max-width: 24rem; }
.n-modal--md { max-width: 32rem; }
.n-modal--lg { max-width: 48rem; }

.n-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--n-spacing-05);
    padding: var(--n-spacing-05) var(--n-spacing-05) 0;  /* верх 16px, низа нет — зазор до тела даёт body */
}
.n-modal__title { font-size: 1.25rem; line-height: 1.4; font-weight: 400; color: var(--n-text-primary); }
.n-modal__close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; margin: -0.5rem -0.5rem 0 0;
    border: none; background: transparent; color: var(--n-icon-primary); cursor: pointer;
    transition: background var(--n-duration-fast) var(--n-easing-standard);
}
.n-modal__close:hover { background: var(--n-background-hover); }
.n-modal__close:focus-visible { outline: 2px solid var(--n-focus); outline-offset: -2px; }
.n-modal__close svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }

.n-modal__body { padding: var(--n-spacing-05) var(--n-spacing-05) var(--n-spacing-09); overflow-y: auto; color: var(--n-text-secondary); font-size: 0.875rem; line-height: 1.42857; }
/* заголовок → тело = $spacing-05 (16px), низ тела = $spacing-09 (48px) — по спецификации Carbon */

.n-modal__footer { display: flex; margin-top: auto; }
.n-modal__footer .n-btn { flex: 1 1 0; max-width: none; min-height: 4rem; }
.n-modal__footer .n-btn + .n-btn { border-left: 1px solid var(--n-background); }

@keyframes n-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* -----------------------------------------------------------------------------
   Toast — .n-toast (всплывающие уведомления)
   ----------------------------------------------------------------------------- */
.n-toast-region {
    position: fixed;
    top: 3.5rem;
    right: var(--n-spacing-05);
    z-index: 9500;
    display: flex;
    flex-direction: column;
    gap: var(--n-spacing-03);
    width: 22rem;
    max-width: calc(100vw - 2rem);
    pointer-events: none;
}
.n-toast {
    display: flex;
    gap: var(--n-spacing-04);
    padding: var(--n-spacing-04) var(--n-spacing-05);
    background: var(--n-layer-02);
    border-left: 3px solid var(--n-support-info);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    pointer-events: auto;
    animation: n-toast-in var(--n-duration-moderate) var(--n-easing-entrance);
}
.n-toast--success { border-left-color: var(--n-support-success); }
.n-toast--error   { border-left-color: var(--n-support-error); }
.n-toast--warning { border-left-color: var(--n-support-warning); }
.n-toast--info    { border-left-color: var(--n-support-info); }

.n-toast__icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: 1px; }
.n-toast__icon svg { width: 100%; height: 100%; }
.n-toast--success .n-toast__icon svg { fill: var(--n-support-success); }
.n-toast--error   .n-toast__icon svg { fill: var(--n-support-error); }
.n-toast--warning .n-toast__icon svg { fill: var(--n-support-warning); }
.n-toast--info    .n-toast__icon svg { fill: var(--n-support-info); }

.n-toast__body { flex: 1 1 auto; min-width: 0; }
.n-toast__title { font-size: 0.875rem; font-weight: 600; color: var(--n-text-primary); }
.n-toast__msg { font-size: 0.875rem; line-height: 1.33; color: var(--n-text-secondary); word-wrap: break-word; }
.n-toast__close {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border: none; background: transparent; color: var(--n-icon-primary); cursor: pointer;
}
.n-toast__close:hover { background: var(--n-background-hover); }
.n-toast__close svg { width: 1rem; height: 1rem; fill: currentColor; }

@keyframes n-toast-in { from { opacity: 0; transform: translateX(1rem); } to { opacity: 1; transform: translateX(0); } }

/* -----------------------------------------------------------------------------
   Toolbar — строка действий над списком
   ----------------------------------------------------------------------------- */
.n-toolbar { display: flex; gap: var(--n-spacing-05); align-items: center; flex-wrap: wrap; margin-bottom: var(--n-spacing-06); }
.n-toolbar__grow { flex: 1 1 16rem; min-width: 12rem; }

/* -----------------------------------------------------------------------------
   Search — поле поиска (Carbon)
   ----------------------------------------------------------------------------- */
.n-search { position: relative; display: flex; align-items: center; width: 100%; }
.n-search__icon { position: absolute; left: var(--n-spacing-05); width: 1rem; height: 1rem; fill: var(--n-icon-secondary); pointer-events: none; }
.n-search input {
    height: 2.5rem; width: 100%;
    padding: 0 var(--n-spacing-05) 0 2.75rem;
    background: var(--n-field-01); color: var(--n-text-primary);
    border: none; border-bottom: 1px solid var(--n-border-strong); border-radius: 0;
    font-family: inherit; font-size: 0.875rem;
}
.n-search input::placeholder { color: var(--n-text-placeholder); }
.n-search input:focus { outline: 2px solid var(--n-focus); outline-offset: -2px; }
.n-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* -----------------------------------------------------------------------------
   Avatar / monogram — квадрат с инициалами
   ----------------------------------------------------------------------------- */
.n-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; flex-shrink: 0;
    font-size: 0.875rem; font-weight: 600; color: #ffffff; text-transform: uppercase;
}
.n-avatar--lg { width: 3rem; height: 3rem; font-size: 1rem; }

/* -----------------------------------------------------------------------------
   Сетка карточек
   ----------------------------------------------------------------------------- */
.n-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--n-spacing-05); }

/* Карточка проекта */
.n-pcard { display: flex; flex-direction: column; gap: var(--n-spacing-05); min-height: 11rem; cursor: pointer; outline: none; }
.n-pcard:hover { background: var(--n-layer-hover-01); }
.n-pcard:focus-visible { outline: 2px solid var(--n-focus); outline-offset: -2px; }
.n-pcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--n-spacing-04); }
.n-pcard__actions { display: flex; gap: var(--n-spacing-02); }
.n-pcard__body { flex: 1 1 auto; min-width: 0; }
.n-pcard__title { font-size: 1.25rem; line-height: 1.4; color: var(--n-text-primary); margin-bottom: var(--n-spacing-02); word-break: break-word; }
.n-pcard__group { font-size: 0.75rem; color: var(--n-text-helper); }
.n-pcard__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--n-spacing-04); }
.n-pcard__open { display: inline-flex; align-items: center; gap: var(--n-spacing-02); font-size: 0.875rem; color: var(--n-link-primary); white-space: nowrap; }
.n-pcard__open svg { width: 1rem; height: 1rem; fill: currentColor; }

/* -----------------------------------------------------------------------------
   Empty state — пустое состояние
   ----------------------------------------------------------------------------- */
.n-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--n-spacing-05); padding: var(--n-spacing-12) var(--n-spacing-05); background: var(--n-layer-01); }
.n-empty__icon svg { width: 3rem; height: 3rem; fill: var(--n-icon-secondary); opacity: 0.55; }
.n-empty__title { font-size: 1.25rem; line-height: 1.4; color: var(--n-text-primary); }
.n-empty__text { font-size: 0.875rem; line-height: 1.42857; color: var(--n-text-helper); max-width: 28rem; }

/* -----------------------------------------------------------------------------
   Skeleton — заглушка загрузки
   ----------------------------------------------------------------------------- */
.n-skeleton {
    background: linear-gradient(90deg, var(--n-layer-01) 0%, var(--n-layer-hover-01) 50%, var(--n-layer-01) 100%);
    background-size: 200% 100%;
    animation: n-shimmer 1.3s ease-in-out infinite;
}
.n-skeleton-card { height: 11rem; }
@keyframes n-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* -----------------------------------------------------------------------------
   Form aside — боковая подсказка к форме
   ----------------------------------------------------------------------------- */
.n-aside { background: var(--n-layer-02); padding: var(--n-spacing-06); }
.n-aside__title { font-size: 0.875rem; font-weight: 600; color: var(--n-text-primary); margin-bottom: var(--n-spacing-04); }
.n-aside__step { display: flex; gap: var(--n-spacing-04); margin-bottom: var(--n-spacing-05); }
.n-aside__num { flex-shrink: 0; width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; background: var(--n-background); color: var(--n-link-primary); font-size: 0.75rem; font-weight: 600; }
.n-aside__step p { font-size: 0.8125rem; line-height: 1.4; color: var(--n-text-secondary); }

/* Компактный блок статуса (SSL/домен и т.п.) — легче, чем .n-aside */
.n-status-box {
    background: var(--n-layer-01);
    padding: var(--n-spacing-05);
    display: flex;
    flex-direction: column;
    gap: var(--n-spacing-03);
}
.n-status-box__title { font-size: 0.875rem; font-weight: 600; color: var(--n-text-primary); }

/* -----------------------------------------------------------------------------
   Дашборд — раскладка (чтобы короткие карточки не раздувались рядом с длинными)
   ----------------------------------------------------------------------------- */
/* KPI-полоса: ровный перенос 2 → 3 → 6 колонок, без карточки-сироты на новой строке */
.n-dash-kpis {
    display: grid;
    gap: var(--n-spacing-05);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 672px)  { .n-dash-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1056px) { .n-dash-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Основная зона: широкая колонка (списки) + рейл коротких карточек.
   align-items: start — карточки держат СВОЮ высоту и не растягиваются под соседа. */
.n-dash-main {
    display: grid;
    gap: var(--n-spacing-05);
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 1056px) { .n-dash-main { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); } }

/* Вертикальный стек карточек внутри рейла */
.n-dash-stack { display: flex; flex-direction: column; gap: var(--n-spacing-05); }

/* Онбординг-чеклист на /app */
.n-onb { display: flex; flex-direction: column; gap: var(--n-spacing-05); }
.n-onb__step { display: flex; align-items: flex-start; gap: var(--n-spacing-04); }
.n-onb__step svg { flex-shrink: 0; margin-top: 2px; }
.n-onb__title { font-weight: 600; }

/* Метрики герой-карточки монитора */
.n-hero-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--n-spacing-05); margin-top: var(--n-spacing-05); }
.n-hero-metric__label { font-size: 0.72rem; color: var(--n-text-helper); text-transform: uppercase; letter-spacing: 0.02em; }
.n-hero-metric__value { font-size: 1.5rem; font-weight: 600; margin-top: 2px; line-height: 1.1; }

/* Статус-чипы SSL/домена: рамка+левый акцент по состоянию; фон-заливка только для проблем (ok — без заливки) */
.n-status-row { display: flex; flex-wrap: wrap; gap: var(--n-spacing-04); margin-top: var(--n-spacing-05); }
.n-status-chip {
    display: inline-flex; align-items: center; gap: var(--n-spacing-03);
    padding: var(--n-spacing-03) var(--n-spacing-05);
    border: 1px solid var(--n-border-subtle-02);
    border-left: 3px solid var(--n-border-strong);
    font-size: 0.8125rem; background: transparent;
}
.n-status-chip__icon { font-size: 0.95rem; }
.n-status-chip__label { color: var(--n-text-helper); text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.72rem; }
.n-status-chip__value { font-weight: 600; }
.n-status-chip--ok { border-left-color: var(--n-support-success); }
.n-status-chip--warn {
    border-color: color-mix(in srgb, var(--n-support-warning) 45%, var(--n-border-subtle-02));
    border-left-color: var(--n-support-warning);
    background: color-mix(in srgb, var(--n-support-warning) 14%, transparent);
}
.n-status-chip--bad {
    border-color: color-mix(in srgb, var(--n-support-error) 45%, var(--n-border-subtle-02));
    border-left-color: var(--n-support-error);
    background: color-mix(in srgb, var(--n-support-error) 14%, transparent);
}

/* Полоса кратких KPI на /app — выровнена по краю контента (без grid-margin, как у NGrid) */
.n-kpi-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--n-spacing-05); margin-top: var(--n-spacing-05);
}

/* Status-board (много мониторов): строка = имя + тепловая карта аптайма по дням + аптайм/латентность */
.n-board-row {
    display: grid; grid-template-columns: minmax(140px, 220px) 1fr auto;
    align-items: center; gap: var(--n-spacing-05);
    padding: var(--n-spacing-04) var(--n-spacing-05);
    border-top: 1px solid var(--n-border-subtle);
}
.n-board-row__head { display: flex; align-items: center; gap: var(--n-spacing-03); min-width: 0; }
.n-board-row__title { font-size: 0.875rem; font-weight: 500; color: var(--n-text-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n-board-row__title:hover { text-decoration: underline; }
.n-board-row__aside { text-align: right; white-space: nowrap; }

.n-heatmap { display: flex; gap: 2px; align-items: stretch; min-width: 0; }
.n-heatmap__cell { flex: 1 1 0; min-width: 3px; max-width: 12px; height: 26px; border-radius: 1px; background: var(--n-border-subtle-02); }
.n-heatmap__cell--ok { background: var(--n-support-success); }
.n-heatmap__cell--warn { background: var(--n-support-warning); }
.n-heatmap__cell--bad { background: var(--n-support-error); }
.n-heatmap__cell--empty { background: var(--n-border-subtle-02); opacity: 0.5; }

/* На узких экранах строка борда переносится: карта во всю ширину под именем */
@media (max-width: 671px) {
    .n-board-row { grid-template-columns: 1fr auto; }
    .n-board-row .n-heatmap { grid-column: 1 / -1; order: 3; }
}

/* ============ Логотип Nodra: «квадратный пульс» ============ */
/* Знак — нода (узел), из которой расходится сигнал. Цвет берётся из --n-logo-accent
   (по умолчанию primary), поэтому знак автоматически живёт в обеих темах. */
.n-logo {
    display: inline-flex;
    width: var(--n-logo-size, 1.5rem);
    height: var(--n-logo-size, 1.5rem);
    flex: 0 0 auto;
    line-height: 0;
}

.n-logo__mark { display: block; width: 100%; height: 100%; }

.n-logo__ring,
.n-logo__ripple {
    fill: none;
    stroke: var(--n-logo-accent, var(--n-button-primary));
}
.n-logo__ring--outer { stroke-width: 2.5; opacity: 0.3; }
.n-logo__ring--mid { stroke-width: 3; opacity: 0.62; }
.n-logo__core { fill: var(--n-logo-accent, var(--n-button-primary)); }

/* Пульс: кольцо рождается у ядра и плавно уходит наружу, затухая. */
.n-logo__ripple {
    stroke-width: 2.5;
    transform-box: fill-box;
    transform-origin: center;
    animation: n-logo-ripple 2.6s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.n-logo__ripple--2 { animation-delay: 1.3s; }

@keyframes n-logo-ripple {
    0%   { transform: scale(0.4);  opacity: 0.7; }
    70%  { opacity: 0; }
    100% { transform: scale(1.18); opacity: 0; }
}

/* Уважаем настройку «меньше движения» — знак остаётся статичным и полным. */
@media (prefers-reduced-motion: reduce) {
    .n-logo__ripple { display: none; }
}