/* =========================================================
   Графикът за годишен отчет — само това, което UniversalLook не покрива.
   Всичко е под .ul-scope, защото там живеят токените (--navy, --border, ...).
   Цветове и разстояния само през токени: инлайн стойности се чупят при смяна на тема.
   ========================================================= */

/* Хоризонталният отстъп е един и същ за заглавието и за картата — дефиниран на едно място,
   за да не се разминават левите им ръбове, когато на тесен екран и двете опират ръба. */
.ul-scope .grafik-head,
.ul-scope .grafik-page {
    padding-left: 16px;
    padding-right: 16px;
}

/* Заглавието живее отделно от картата, за да не е стегнато в нейната ширина.
   Центрирано е, за да върви с центрираната карта под него. */
.ul-scope .grafik-head {
    padding-top: 24px;
    text-align: center;
}

.ul-scope .grafik-page {
    max-width: 560px;
    margin: 0 auto;
    padding-top: 16px;
    padding-bottom: 48px;
}

/* Резултатът носи адреси и часове по входове — 560px не му стигат. */
.ul-scope .grafik-page-wide {
    max-width: 760px;
}

.ul-scope .grafik-head .page-title {
    /* inline-flex, за да е широко колкото текста и да се центрира от родителя. Без
       white-space: nowrap — така на широк екран е един ред, а на тесен се пренася само
       ако наистина няма място, вместо да изкара хоризонтален скрол. */
    display: inline-flex;
    /* flex-start, не center: при пренасяне центрирана иконка увисва между редовете. */
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    text-align: left;
}

.ul-scope .grafik-title-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Картинката беше с border="1" и естествен размер — сега се вписва в картата. */
.ul-scope .grafik-hero {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    margin-bottom: 18px;
}

.ul-scope .grafik-intro {
    color: var(--text-light);
    margin: 0 0 20px;
}

/* Honeypot. Изнесено извън екрана, а не display:none или visibility:hidden — ботовете
   вече прескачат така скритите полета, но следват само CSS-а, който им е под носа.
   Нарочно без .ul-scope префикс — полето трябва да остане скрито дори ако някой ден
   маркъпът излезе извън scope-а. Скрито поле, което се покаже, е видим бъг. */
.grafik-hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ValidationSummary рендира <ul> — изчистваме булитите и го боядисваме като грешка. */
.ul-scope .grafik-summary {
    margin: 0 0 16px;
    color: var(--danger);
    font-size: 13px;
}

.ul-scope .grafik-summary ul {
    margin: 0;
    padding-left: 18px;
}

.ul-scope .grafik-card .btn {
    width: 100%;
    justify-content: center;
}

/* ---- Резултат ---- */

/* Съдържанието идва като готов HTML от SharedServices — порталът не го рисува и не може
   да му диктува структурата. Затова: предпазител, който го държи в картата дори ако
   услугата пак реши да зададе фиксирана ширина. !important е нужен, защото ширината
   идва като inline style. */
.ul-scope .grafik-result-body {
    overflow-x: auto;
}

.ul-scope .grafik-result-body table {
    width: 100% !important;
    max-width: 100%;
}

.ul-scope .grafik-result-body td {
    vertical-align: top;
    overflow-wrap: anywhere;
}

/* ---- Резултат: списък с адреси ---- */

.ul-scope .grafik-address {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.ul-scope .grafik-addresses tr:last-child .grafik-address {
    border-bottom: none;
}

.ul-scope .grafik-address-code {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    font-size: 13px;
    flex-shrink: 0;
}

/* Беше style="color:red" инлайн — линк към адрес не е грешка. */
.ul-scope .grafik-address-link {
    color: var(--navy);
    text-decoration: none;
}

.ul-scope .grafik-address-link:hover {
    text-decoration: underline;
}

.ul-scope .grafik-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.ul-scope .grafik-actions .btn {
    flex: 1;
}

@media (max-width: 480px) {
    .ul-scope .grafik-head,
    .ul-scope .grafik-page {
        padding-left: 12px;
        padding-right: 12px;
    }

    .ul-scope .grafik-page {
        padding-bottom: 32px;
    }

    /* На тесен екран заглавието и без това пълни ширината — центрирането само отмества
       левия ръб спрямо картата. */
    .ul-scope .grafik-head {
        text-align: left;
    }

    /* 52 знака при 28px са 4 реда на телефон. На широк екран размерът остава пълен —
       смаляваме само там, където физически няма място. */
    .ul-scope .grafik-head .page-title {
        font-size: 21px;
    }

    .ul-scope .grafik-title-icon {
        width: 22px;
        height: 22px;
        margin-top: 1px;
    }

    .ul-scope .grafik-actions {
        flex-direction: column;
    }
}