/* ============================================================
   V2 — Section Card
   ============================================================
   Базовий атом Pattern 02 (Card with subsections).
   Self-contained. Жодних !important. Жодних залежностей від legacy.

   Структура HTML:
     <section class="v2-section-card">
       <header class="v2-section-card-head">
         <h3 class="v2-section-card-title">...</h3>
         <div class="v2-section-card-aside">...</div>
       </header>
       <div class="v2-section-card-body">
         ...content...
       </div>
     </section>
   ============================================================ */

/* Локальний box-sizing reset для всього, що всередині v2-section-card.
   Платформенний tokens.css не виставляє глобального box-sizing: border-box,
   тому без цього reset'у inputs з width:100% + padding вилазять за межі
   grid-клітинок і візуально налягають на сусідні колонки. */
.v2-section-card,
.v2-section-card *,
.v2-section-card *::before,
.v2-section-card *::after {
    box-sizing: border-box;
}

.v2-section-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
    margin-bottom: var(--s-6);
    box-shadow: var(--shadow-xs-v2);
    /* Локальний reset, щоб legacy body-rules не лізли всередину */
    color: var(--text-primary);
    /* Захист від legacy *-правил, які могли б обрізати дочірні елементи */
    overflow: visible;
    position: relative;
}

.v2-section-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    padding: var(--s-5) var(--s-6);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-card);
}

.v2-section-card-title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: -0.005em;
    color: var(--text-primary);
}

.v2-section-card-eyebrow {
    margin-bottom: 2px;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.v2-section-card-aside {
    display: inline-flex;
    align-items: center;
    gap: var(--s-4);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.v2-section-card-body {
    padding: var(--s-6) var(--s-6) var(--s-7);
    /* Нижній padding більше за верхній/боковий — щоб hint/error під полем
       завжди мали запас простору між собою і нижньою рамкою секції. */
}

.v2-section-card-body > p {
    margin: 0 0 var(--s-4);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
}

.v2-section-card-body > p:last-child {
    margin-bottom: 0;
}

.v2-section-card .v2-section-card {
    border-color: var(--border-subtle);
    box-shadow: none;
}

.v2-section-card .v2-tablewrap,
.v2-section-card .v2-toolbar {
    box-shadow: none;
}

/* Hint під заголовком (наприклад "Авто-збереження активне") */
.v2-section-card-hint {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.v2-section-card-hint .v2-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    display: inline-block;
}

.v2-section-card-hint.is-saving .v2-dot {
    background: var(--warning);
    animation: v2-section-card-pulse 1.2s ease-in-out infinite;
}

.v2-section-card-hint.is-warning .v2-dot {
    background: var(--warning);
}

.v2-section-card-hint.is-danger .v2-dot {
    background: var(--danger);
}

@keyframes v2-section-card-pulse {
    50% { opacity: 0.35; }
}

/* Стани секції */
.v2-section-card.is-dirty {
    border-color: var(--warning);
}

.v2-section-card.is-error {
    border-color: var(--danger);
}

/* Compact density override */
[data-v2-density="compact"] .v2-section-card {
    margin-bottom: var(--s-4);
}

[data-v2-density="compact"] .v2-section-card-head {
    padding: var(--s-4) var(--s-5);
}

[data-v2-density="compact"] .v2-section-card-body {
    padding: var(--s-4) var(--s-5) var(--s-5);
}

[data-v2-density="compact"] .v2-section-card-title {
    font-size: var(--text-md);
}

/* Spacious density override */
[data-v2-density="spacious"] .v2-section-card-head {
    padding: var(--s-6) var(--s-7);
}

[data-v2-density="spacious"] .v2-section-card-body {
    padding: var(--s-7) var(--s-7) var(--s-8);
}


/* Brevo-style flattening profile section base */
.v2-profile-section {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--border-subtle);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.v2-profile-section:first-of-type {
    border-top: 0;
}
/* Бічних відступів немає: заголовки і вміст секцій сідають на один лівий
   край з рештою сторінки — ширші таблиці (уніфікація меж 2026-07-16). */
.v2-profile-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-4) 0 var(--s-2);
    border: 0;
    border-radius: 0;
    background: transparent;
}
.v2-profile-section-body {
    padding: 0 0 var(--s-4);
    border: 0;
    background: transparent;
}
.v2-profile-section-title {
    margin: 0;
    font-size: var(--text-md, 1rem);
    font-weight: 700;
    color: var(--text-primary);
}