/**
 * Müşteri portalı — ortak bileşen sözlüğü.
 * Tek kaynak: docs/ortak-tasarim-dili.md (§5–§6).
 * Eşleri: ios/BuMuhasebeClient/UIComponentsView.swift, android-client/.../MainActivity.kt
 *
 * portal-shell.css'ten SONRA yüklenir; kabuğun eski çekmece menüsünü alt sekme çubuğu
 * ile değiştirir, kartları tokenlara bağlar.
 */

/* ——— Kabuk ——— */

.portal-body {
    background: var(--ds-bg);
    font-family: var(--ds-font);
    color: var(--ds-text);
    /* Alt sekme çubuğu sabit; içerik onun altında kalmasın */
    padding-bottom: calc(5.25rem + env(safe-area-inset-bottom));
}

.portal-main__title {
    font: var(--ds-title);
    color: var(--ds-text);
    margin: 0 0 var(--ds-space-4);
}

.portal-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-card);
    box-shadow: var(--ds-shadow);
    padding: var(--ds-space-5);
    margin-bottom: var(--ds-space-3);
}

.portal-card h2 {
    font: var(--ds-section);
    color: var(--ds-text);
    margin: 0 0 var(--ds-space-2);
}

.portal-muted {
    font: var(--ds-body);
    color: var(--ds-text-muted);
}

/* ——— Gezinti: dar ekranda alt sekme çubuğu, geniş ekranda üst satır ——— */

.ds-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--ds-space-1);
    padding: var(--ds-space-2) var(--ds-space-2) calc(var(--ds-space-2) + env(safe-area-inset-bottom));
    background: var(--ds-surface);
    border-top: 1px solid var(--ds-border);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06);
}

.ds-tabbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: var(--ds-space-1) 2px;
    border-radius: var(--ds-radius-control);
    font: var(--ds-label);
    font-size: 0.6875rem;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    color: var(--ds-text-muted);
}

.ds-tabbar__item:visited {
    color: var(--ds-text-muted);
}

.ds-tabbar__item svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 1.7;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ds-tabbar__item.is-active {
    color: var(--ds-brand);
    background: var(--ds-brand-soft);
}

@media (min-width: 761px) {
    .portal-body {
        padding-bottom: 2rem;
    }

    .ds-tabbar {
        position: static;
        grid-template-columns: repeat(5, auto);
        justify-content: start;
        gap: var(--ds-space-2);
        padding: var(--ds-space-2);
        margin-bottom: var(--ds-space-4);
        border: 1px solid var(--ds-border);
        border-radius: var(--ds-radius-card);
        box-shadow: var(--ds-shadow);
    }

    .ds-tabbar__item {
        flex-direction: row;
        gap: var(--ds-space-2);
        padding: var(--ds-space-2) var(--ds-space-4);
        font: var(--ds-label);
    }
}

/* ——— Ekran başlığı ——— */

.ds-screen-head {
    margin-bottom: var(--ds-space-3);
}

.ds-screen-head__title {
    font: var(--ds-title);
    color: var(--ds-text);
    margin: 0;
}

.ds-screen-head__sub {
    font: var(--ds-body);
    color: var(--ds-text-muted);
    margin: var(--ds-space-1) 0 0;
}

.ds-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ds-space-3);
    margin: var(--ds-space-5) 0 var(--ds-space-3);
}

.ds-section-title__text {
    font: var(--ds-section);
    color: var(--ds-text);
    margin: 0;
}

.ds-section-title__count {
    font: var(--ds-caption);
    color: var(--ds-text-muted);
}

/* ——— Metrik kartları ——— */

.ds-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-space-3);
    margin-bottom: var(--ds-space-3);
}

.ds-metric {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: var(--ds-space-4);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-card);
    box-shadow: var(--ds-shadow);
}

.ds-metric--wide {
    grid-column: 1 / -1;
    padding: var(--ds-space-5);
}

.ds-metric__icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ds-metric--wide .ds-metric__icon svg {
    width: 24px;
    height: 24px;
}

.ds-metric--brand .ds-metric__icon { color: var(--ds-brand); }
.ds-metric--success .ds-metric__icon { color: var(--ds-success); }
.ds-metric--warning .ds-metric__icon { color: var(--ds-warning); }

.ds-metric__label {
    font: var(--ds-label);
    color: var(--ds-text-muted);
}

.ds-metric__value {
    font: var(--ds-section);
    color: var(--ds-text);
}

.ds-metric--wide .ds-metric__value {
    font: var(--ds-title);
}

@media (min-width: 761px) {
    .ds-metrics {
        grid-template-columns: repeat(3, 1fr);
    }

    .ds-metric--wide {
        grid-column: auto;
    }
}

/* ——— Satır kartları: dar ekranda kart, geniş ekranda tablo ——— */

.ds-rows {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ds-rows__head {
    display: none;
}

.ds-row-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--ds-space-1) var(--ds-space-3);
    padding: var(--ds-space-4);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-card);
    box-shadow: var(--ds-shadow);
}

.ds-row-card__title {
    font: var(--ds-section);
    color: var(--ds-text);
    min-width: 0;
}

.ds-row-card__date {
    font: var(--ds-caption);
    color: var(--ds-text-muted);
    text-align: right;
}

.ds-row-card__meta {
    grid-column: 1 / -1;
    font: var(--ds-caption);
    color: var(--ds-text-muted);
}

.ds-row-card__amounts {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: var(--ds-space-4);
    margin-top: var(--ds-space-1);
}

.ds-amount {
    font: var(--ds-label);
}

.ds-amount--debit { color: var(--ds-warning); }
.ds-amount--credit { color: var(--ds-success); }
.ds-amount--total { color: var(--ds-text); }

.ds-amount--balance {
    margin-left: auto;
    color: var(--ds-text-muted);
}

.ds-row-card__link {
    font: var(--ds-label);
    color: var(--ds-brand);
}

@media (min-width: 761px) {
    .ds-rows {
        gap: 0;
        background: var(--ds-surface);
        border: 1px solid var(--ds-border);
        border-radius: var(--ds-radius-card);
        box-shadow: var(--ds-shadow);
        overflow: hidden;
    }

    .ds-rows__head,
    .ds-row-card {
        display: grid;
        grid-template-columns: var(--ds-cols, 7rem minmax(0, 1.2fr) minmax(0, 1fr) repeat(3, 7.5rem));
        align-items: center;
        gap: var(--ds-space-3);
        padding: var(--ds-space-3) var(--ds-space-4);
        border: 0;
        border-bottom: 1px solid var(--ds-border);
        border-radius: 0;
        box-shadow: none;
    }

    .ds-rows__head {
        font: var(--ds-label);
        color: var(--ds-text-muted);
        background: var(--ds-surface-alt);
    }

    .ds-rows .ds-row-card:last-child {
        border-bottom: 0;
    }

    .ds-row-card__date { order: 1; text-align: left; }
    .ds-row-card__title { order: 2; font: var(--ds-body); font-weight: 600; }
    .ds-row-card__meta { order: 3; grid-column: auto; }
    .ds-row-card__amounts { display: contents; }
    .ds-amount { order: 4; text-align: right; margin: 0; }
}

/* ——— Boş durum, hata, dönem seçici, hap ——— */

.ds-empty {
    padding: var(--ds-space-6);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-card);
    box-shadow: var(--ds-shadow);
    font: var(--ds-body);
    color: var(--ds-text-muted);
}

.ds-error {
    padding: var(--ds-space-4);
    background: var(--ds-danger-soft);
    border-radius: var(--ds-radius-card);
    font: var(--ds-body);
    color: var(--ds-danger);
}

.ds-period {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    padding: var(--ds-space-3) var(--ds-space-4);
    margin-bottom: var(--ds-space-3);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-control);
    box-shadow: var(--ds-shadow);
}

.ds-period__label {
    font: var(--ds-label);
    color: var(--ds-text-muted);
}

.ds-period select,
.ds-period input[type="month"] {
    font: var(--ds-section);
    color: var(--ds-text);
    background: transparent;
    border: 0;
    padding: 0;
    margin-left: auto;
}

.ds-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2);
    margin-bottom: var(--ds-space-3);
}

.ds-pill {
    padding: var(--ds-space-2) var(--ds-space-4);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface);
    font: var(--ds-label);
    color: var(--ds-text);
    text-decoration: none;
}

.ds-pill:visited {
    color: var(--ds-text);
}

.ds-pill.is-active {
    background: var(--ds-brand);
    border-color: var(--ds-brand);
    color: #fff;
}

.ds-pill.is-active:visited {
    color: #fff;
}

/* ——— Bildirim akışı (mesaj + evrak) ——— */

.portal-feed {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.portal-feed__item {
    padding: var(--ds-space-4);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-card);
    box-shadow: var(--ds-shadow);
}

.portal-feed__meta {
    font: var(--ds-caption);
    color: var(--ds-text-muted);
    margin-bottom: var(--ds-space-1);
}

.portal-feed__title {
    font: var(--ds-section);
    color: var(--ds-text);
    margin: 0 0 var(--ds-space-1);
}

.portal-doc-link {
    font: var(--ds-label);
    color: var(--ds-brand);
}

/* ——— Form ve düğmeler ——— */

.portal-form label {
    display: block;
    font: var(--ds-label);
    color: var(--ds-text-muted);
    margin-bottom: var(--ds-space-1);
}

.portal-form textarea,
.portal-form input[type="text"],
.portal-form input[type="email"],
.portal-form input[type="tel"] {
    width: 100%;
    font: var(--ds-body);
    color: var(--ds-text);
    padding: var(--ds-space-3);
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-control);
}

.portal-btn {
    display: inline-block;
    margin-top: var(--ds-space-3);
    padding: var(--ds-space-3) var(--ds-space-5);
    font: var(--ds-section);
    color: #fff;
    background: var(--ds-brand);
    border: 0;
    border-radius: var(--ds-radius-control);
    cursor: pointer;
}

.portal-btn:hover {
    background: var(--ds-brand-strong);
}

/* ——— Üst başlık: solda ofis markası, sağda profil avatarı ve çıkış ——— */

.portal-user-panel {
    align-items: center;
    padding: var(--ds-space-3) var(--ds-space-4);
    border-radius: var(--ds-radius-card);
    flex-wrap: nowrap;
}

.ds-brandmark__name {
    font: var(--ds-section);
    color: var(--ds-text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-brandmark__sub {
    font: var(--ds-label);
    color: var(--ds-brand);
    margin: 0;
}

.ds-header-actions {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    flex-shrink: 0;
}

/* Eski çekmece menüsü avatarı kendi içinde taşıdığı için portal-shell.css
   dar ekranda başlıktaki avatarı gizliyordu; artık profil girişi orada. */
@media (max-width: 760px) {
    .portal-user-panel__avatar {
        display: block;
    }
}

/* ——— Giriş ekranı: iOS ve Android ile aynı düzen ——— */

.ds-login {
    width: 100%;
    max-width: 30rem;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: 28px;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.10);
    overflow: hidden;
    box-sizing: border-box;
}

.ds-login__hero {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
    padding: var(--ds-space-6);
    background: var(--ds-hero-bg);
}

.ds-login__eyebrow {
    margin: 0;
    font: var(--ds-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ds-hero-eyebrow);
}

.ds-login__headline {
    margin: 0;
    font: var(--ds-title);
    color: #fff;
}

.ds-login__sub {
    margin: 0;
    font: var(--ds-body);
    color: var(--ds-hero-body);
}

.ds-login__body {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-4);
    padding: var(--ds-space-6);
}

.ds-login__mark {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: var(--ds-brand);
}

.ds-login__mark svg {
    width: 30px;
    height: 30px;
    stroke: #fff;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ds-login__logo {
    max-width: 10rem;
    max-height: 3rem;
    object-fit: contain;
}

.ds-login__title {
    margin: 0;
    font: var(--ds-display);
    color: var(--ds-text);
}

.ds-login__lead {
    margin: 0;
    font: var(--ds-body);
    color: var(--ds-text-muted);
}

.ds-login__form {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
}

.ds-login__label {
    display: block;
    margin-bottom: var(--ds-space-1);
    font: var(--ds-label);
    color: var(--ds-text-muted);
}

.ds-login__input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--ds-space-3);
    font: var(--ds-body);
    color: var(--ds-text);
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-control);
}

.ds-login__input:focus {
    outline: 2px solid var(--ds-brand);
    outline-offset: 1px;
}

.ds-login__remember {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    font: var(--ds-body);
    color: var(--ds-text-muted);
}

.ds-login__submit {
    width: 100%;
    padding: var(--ds-space-3);
    font: var(--ds-section);
    color: #fff;
    background: var(--ds-brand);
    border: 0;
    border-radius: var(--ds-radius-control);
    cursor: pointer;
}

.ds-login__submit:hover {
    background: var(--ds-brand-strong);
}

.ds-login__alert {
    margin: 0;
    padding: var(--ds-space-3) var(--ds-space-4);
    font: var(--ds-body);
    color: var(--ds-danger);
    background: var(--ds-danger-soft);
    border-radius: var(--ds-radius-control);
}

.ds-login__note {
    margin: 0;
    font: var(--ds-caption);
    color: var(--ds-text-muted);
}

.ds-login__aside {
    padding-top: var(--ds-space-4);
    border-top: 1px solid var(--ds-border);
}

.ds-login__aside-title {
    margin: 0 0 var(--ds-space-1);
    font: var(--ds-label);
    color: var(--ds-text);
}

.ds-login__aside p,
.ds-login__aside span {
    font: var(--ds-caption);
    color: var(--ds-text-muted);
}

.ds-login__aside a {
    font: var(--ds-label);
    color: var(--ds-brand);
}

/* auth.css dar ekranda sayfa dolgusunu sıfırlıyor (eski tam genişlik kart için);
   yeni giriş kartı iOS/Android'deki gibi kenar boşluğuyla dursun. */
@media (max-width: 760px) {
    .auth-page--client {
        padding: var(--ds-space-5) var(--ds-space-4);
    }
}