* {
    box-sizing: border-box;
}

img,
svg {
    max-width: 100%;
}

[hidden] {
    display: none !important;
}

@media (max-width: 800px) {
    body.app-body { display: block; width: 100%; margin: 0; }
    body.app-body > .app-sidebar {
        position: static;
        width: 100%;
        height: auto;
        max-width: none;
    }
    body.app-body > .app-main-shell {
        width: 100%;
        max-width: none;
        margin: 0;
        padding-left: 0;
    }
    .app-sidebar > div:first-child {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
    }

    .app-brand {
        width: auto;
        border-bottom: 0 !important;
    }

    .app-company-area {
        min-width: 0;
        padding: 8px 14px 8px 4px !important;
    }

    .app-navigation {
        grid-column: 1 / -1;
        width: 100%;
        scrollbar-width: none;
    }

    .app-navigation::-webkit-scrollbar {
        display: none;
    }

    .app-nav-link {
        min-height: 40px;
        padding: 9px 12px !important;
        font-size: 12px !important;
    }

    .app-topbar {
        top: 0;
    }

    .app-breadcrumb {
        max-width: 45vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-main-shell,
    main[role="main"] {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .app-brand {
        height: 58px;
        padding: 0 14px !important;
    }

    .app-brand .brand-logo {
        width: 112px;
    }

    .app-company-switcher {
        padding: 7px 9px !important;
    }

    .app-company-switcher span:first-child,
    .app-company-switcher > .material-symbols-outlined {
        display: none;
    }

    .app-company-switcher span:nth-child(2) {
        font-size: 10px !important;
    }

    .app-navigation {
        padding: 6px 10px 11px !important;
    }

    .app-nav-link {
        gap: 6px !important;
        padding: 8px 10px !important;
        font-size: 11px !important;
    }

    .app-nav-link .material-symbols-outlined {
        font-size: 17px;
    }

    .app-topbar {
        padding: 0 12px !important;
    }

    .app-breadcrumb {
        max-width: 42vw;
        padding: 5px 8px !important;
        font-size: 10px;
    }

    .app-user-avatar {
        width: 30px !important;
        height: 30px !important;
    }

    main[role="main"] {
        padding: 18px 12px 24px !important;
    }

    .app-main-shell > footer {
        align-items: flex-start !important;
        flex-direction: column;
        font-size: 10px !important;
    }

    /* Genel Bakış */
    .overview-heading time {
        width: 100%;
        text-align: left;
    }

    .overview-company {
        padding: 22px 16px;
    }

    .overview-shortcuts > a {
        min-height: 92px;
        padding: 16px 14px;
    }

    .overview-section-heading {
        align-items: flex-start;
    }

    .overview-bank {
        padding: 18px 14px;
    }

    .overview-bank a {
        width: calc(100% - 54px);
        justify-content: space-between;
    }

    /* Bağlı Bankalar */
    .bank-page__header {
        gap: 12px;
    }

    .bank-page__title {
        font-size: 23px;
    }

    .bank-summary {
        gap: 8px;
    }

    .summary-card {
        padding: 14px;
    }

    .bank-card {
        min-height: 150px;
        padding: 15px;
    }

    .bank-card__footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .bank-card__connection {
        width: 100%;
    }

    .bank-card__actions,
    .bank-card__actions .bank-card__action,
    .bank-card__footer > .bank-card__action {
        width: 100%;
    }

    .bank-card__actions .bank-card__action,
    .bank-card__footer > .bank-card__action {
        justify-content: center;
    }

    .bank-dialog {
        width: calc(100% - 20px);
        max-height: calc(100dvh - 20px);
        overflow-y: auto;
        border-radius: 12px;
    }

    .bank-dialog__form {
        padding: 18px 16px;
    }

    .bank-dialog__icon {
        width: 36px;
        height: 36px;
    }

    /* Hesap Ekstreleri */
    .statement-header__meta {
        width: 100%;
    }

    .statement-query,
    .account-overview,
    .movement-section {
        border-radius: 10px;
    }

    .statement-presets {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .statement-presets__label {
        grid-column: 1 / -1;
    }

    .statement-presets button {
        min-height: 36px;
    }

    .account-cards {
        display: flex;
        margin-inline: -16px;
        padding: 0 16px 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .account-cards::-webkit-scrollbar {
        display: none;
    }

    .account-card {
        min-width: min(82vw, 280px);
        scroll-snap-align: start;
    }

    .selected-account__main,
    .selected-account__main > div {
        min-width: 0;
        width: 100%;
    }

    .selected-account p {
        overflow-wrap: anywhere;
    }

    .statement-stats article {
        align-items: flex-start;
        min-width: 0;
    }

    .statement-stats article > div {
        min-width: 0;
    }

    .statement-stats strong {
        overflow-wrap: anywhere;
    }

    .movement-table-wrap {
        overflow: visible;
    }

    .movement-table {
        display: block;
        min-width: 0;
    }

    .movement-table thead {
        display: none;
    }

    .movement-table tbody {
        display: grid;
    }

    .movement-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 10px;
        padding: 14px 0;
        border-bottom: 1px solid #edf2f7;
    }

    .movement-table td {
        display: block;
        padding: 0;
        border: 0;
    }

    .movement-table td:nth-child(2) {
        grid-column: 1;
        grid-row: 1;
    }

    .movement-table td:nth-child(4) {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
    }

    .movement-table .movement-date {
        grid-column: 1;
        grid-row: 2;
        margin-left: 36px;
        font-size: 9px;
    }

    .movement-mobile-note {
        display: none;
    }

    .movement-table td:nth-child(3),
    .movement-table td:nth-child(5) {
        grid-column: 1 / -1;
        max-width: none;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: left;
        font-size: 12px;
    }
    .movement-reference::before { content: 'Referans: '; }
    .movement-balance::before { content: 'Bakiye: '; }

    .movement-description {
        max-width: none;
    }

    /* API Tokenları */
    .token-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .token-header__status {
        align-self: flex-start;
    }

    .token-created {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .token-created > button[data-copy-token] {
        grid-column: 2;
        justify-self: end;
    }

    .token-created code {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .token-list__heading {
        align-items: flex-start;
    }

    .token-table-wrap {
        margin-inline: -16px;
        padding-inline: 16px;
    }
}

@media (max-width: 380px) {
    .app-nav-link {
        flex-direction: column;
        min-width: 68px;
        gap: 2px !important;
        text-align: center;
    }

    .statement-stats {
        grid-template-columns: 1fr;
    }

    .bank-card__topline {
        gap: 8px;
    }

    .bank-card__name {
        max-width: 135px;
    }
}

.app-main-shell, main[role="main"],
.overview, .statement-page, .token-page, .bank-page,
.overview > *, .statement-page > *, .token-page > *, .bank-page > *,
.movement-table-wrap, .token-table-wrap,
.statement-field, .statement-query__fields > *, .statement-advanced > div > * {
    min-width: 0;
}
.bank-card__identity > span, .bank-dialog__heading, .bank-dialog__heading > div {
    min-width: 0;
}
.bank-dialog { --bank-border: #e2e8f0; max-height: calc(100dvh - 24px); overflow-y: auto; }
.selected-account__icon { flex-shrink: 0; }
.account-card__iban { max-width: 100%; }
.statement-field input, .statement-advanced input { width: 100%; min-width: 0; }
.bank-card__action { text-decoration: none; }

@media (min-width: 801px) and (max-width: 1200px) {
    .bank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bank-card__footer { flex-direction: column; align-items: stretch; }
    .bank-card__actions { justify-content: flex-start; }
    .statement-query__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .statement-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .statement-header, .bank-page__header { flex-wrap: wrap; }
}

@media (max-width: 950px) {
    .login-shell { grid-template-columns: minmax(0, 1fr); }
    .login-hero, .hero-content { min-height: 260px; }
    .hero-content { padding: 28px 24px; }
    .hero-copy { margin-top: 0; }
    .hero-copy h1 { font-size: 30px; letter-spacing: 0; }
    .hero-features { display: none; }
    .login-panel { min-width: 0; min-height: auto; padding: 24px 16px; }
}

@media (max-width: 800px) {
    .app-navigation {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
        overflow: visible;
    }
    .app-navigation > .app-nav-link {
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        min-height: 58px;
        margin-top: 0 !important;
        white-space: normal;
        text-align: center;
        overflow-wrap: anywhere;
    }
    .app-nav-link--active::before { display: none; }
    .app-topbar > div { min-width: 0; }
    .app-topbar > div:last-child { flex-shrink: 0; }
    .app-topbar .app-logout { min-width: 44px; min-height: 44px; }
    .app-topbar .hidden.sm\:flex { display: none; }
}

@media (max-width: 640px) {
    .app-body input:not([type="checkbox"]):not([type="hidden"]),
    .app-body select, .app-body textarea,
    .login-page .input-wrap input { font-size: 16px; min-height: 44px; }
    .app-body button, .app-body .bank-card__action { min-height: 44px; }
    .bank-dialog__close, .bank-password-field button, .token-created button,
    .token-revoke { min-width: 44px; }
    .bank-password-field input { padding-right: 46px; }
    .bank-card__name { white-space: normal; overflow-wrap: anywhere; }
    .bank-card__topline { align-items: center; }
    .bank-dialog__header h2 { font-size: 18px; overflow-wrap: anywhere; }
    .bank-dialog__heading { gap: 8px; }
    .bank-dialog__header { gap: 8px; }
    .bank-dialog__icon { display: none; }
    .bank-dialog__actions { gap: 10px; }
    .statement-query__submit { height: 44px; }
    .account-card { flex: 0 0 min(78vw, 280px); }
    .account-card__balance { overflow-wrap: anywhere; }
    .selected-account__balance strong { font-size: 22px; overflow-wrap: anywhere; }
    .movement-table tr { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .movement-table td:nth-child(2) { grid-column: 1; grid-row: 1; }
    .movement-table td:nth-child(4) { grid-column: 1; grid-row: 2; text-align: left; font-size: 15px; white-space: normal; overflow-wrap: anywhere; }
    .movement-table .movement-date { grid-column: 1; grid-row: 3; margin-left: 0; font-size: 12px; white-space: normal; }
    .movement-description { font-size: 13px; align-items: flex-start; overflow-wrap: anywhere; }
    .movement-description > span:last-child { min-width: 0; }
    .token-list table, .token-list tbody { display: block; width: 100%; min-width: 0; }
    .token-list thead { display: none; }
    .token-list tbody tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 16px 0; border-bottom: 1px solid #e2e8f0; }
    .token-list td { display: block; border: 0; padding: 6px 0; min-width: 0; font-size: 13px; }
    .token-list td small { max-width: 100%; font-size: 12px; }
    .token-list td:nth-child(2)::before { content: 'İzinli IP: '; }
    .token-list td:nth-child(3)::before { content: 'Oluşturan: '; }
    .token-list td:nth-child(4)::before { content: 'Oluşturulma: '; }
    .token-list td:nth-child(5)::before { content: 'Son kullanım: '; }
    .token-list td:nth-child(6)::before { content: 'Durum: '; }
    .token-list td::before { color: #64748b; font-weight: 600; }
    .token-list__heading { gap: 12px; flex-wrap: wrap; }
    .overview-company { flex-direction: column; align-items: flex-start; }
    .overview-company > div { padding-left: 0; border-left: 0; width: 100%; }
    .overview-section-heading { flex-wrap: wrap; gap: 12px; }
    .overview-bank a { margin-left: 0; width: 100%; min-height: 44px; }
    .overview-shortcuts div > span, .bank-card__connection { font-size: 12px; }
    .login-card { padding: 24px 18px; }
    .login-page .form-options { gap: 12px; flex-wrap: wrap; }
    .login-page .password-toggle { min-width: 36px; min-height: 44px; right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .app-body *, .login-page * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}