/* ─── Unbedingte Basis-Regeln (kein Media-Query) ─────────────────────────────
   "Versteckt per Default"-Regeln für Elemente, die erst innerhalb eines
   bestimmten Breakpoints sichtbar werden — siehe jeweilige @media-Blöcke
   unten für die "sichtbar machen"-Gegenregel. */

.nav__hamburger { display: none; }
.nav__overlay { display: none; }
.nav__menu { display: contents; }
.nav__menu-header { display: none; }
.nav__settings-label { display: none; }
.tabnav-brandkit-trigger { display: none; }

body.nav-open-lock { overflow: hidden; }

.tabnav-hamburger { display: none; }
.tabnav-overlay { display: none; }
.tabnav-panel { display: contents; }
.tabnav-list { display: none; }

.tabnav-list__group:last-child {
    margin-top: 40px !important;
}
.tabnav-list__group:last-child button {
    border: 1px solid var(--taupe-dark);
    border-radius: var(--radius-pill);
    text-align: center;
    padding: 10px;
    transition: var(--transition);
    justify-content: center;
}
.tabnav-list__group:last-child button:hover {
    color: var(--gold-light);
    border-color: var(--gold-light);
    -webkit-text-stroke: 0.3px var(--gold-light);
}

.tabnav-panel__header { display: none; }
.tabnav-panel__logo { display: none; }
.nav__category { display: none; }

.tabnav-list { flex-direction: column; }
.tabnav-list__group-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--taupe-dark);
    padding: 5px 0px;
    margin-bottom: 12px;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    color: var(--grey);
    cursor: pointer;
    -webkit-text-stroke: 0.3px var(--grey);
}
.tabnav-list__group-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.tabnav-list__group-btn.active {
    color: var(--gold-dark);
    -webkit-text-stroke: 0.3px var(--gold-dark);
}
.tabnav-list__group:not(:first-child) {
    margin-top: 30px;
}
.tabnav-list__subitems {
    display: flex;
    flex-direction: column;
    padding-left: 0px;
}
.tabnav-list__sub-btn {
    width: 100%;
    text-align: left;
    background: none;
    padding: 10px 0px;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--grey);
    border: none;
    opacity: 0.8;
    cursor: pointer;
    transition: var(--transition);
}
.tabnav-list__sub-btn.active {
    color: var(--gold-dark);
    font-weight: 500;
    opacity: 1;
}
.tabnav-list__sub-btn:hover {
    color: var(--gold-light);
}

.tabnav-toggle { display: none; }


/* ─── @media (max-width: 1280px) ────────────────────────────────────────── */

@media (max-width: 1280px) {
    .p-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #project-list-table,
    #customers-list-table,
    #invoice-list-table,
    #quote-list-table,
    #product-list-table,
    #brandkit-list-table {
        min-width: 900px;
    }

    div.tab-content .bk-card {
        max-width: 33%!important;
    }
	
	.bk-card {
		min-width:300px;
	}
}


/* ─── @media (max-width: 1180px) ────────────────────────────────────────── */

@media (max-width: 1180px) {
    .nav--admin {
        padding: 0 20px;
        position: sticky;
    }

    .nav--admin .nav__logo {
        display: none;
    }

    .nav__hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: none;
        background: none;
        color: var(--grey);
        cursor: pointer;
        position: relative;
        z-index: 210;
    }
    .nav__hamburger-icon {
        width: 24px;
        height: 24px;
    }
    .nav__hamburger-icon--close {
        display: none;
    }
    .nav--admin.nav--open .nav__hamburger-icon--open {
        display: none;
    }
    .nav--admin.nav--open .nav__hamburger-icon--close {
        display: block;
    }

    .tabnav-brandkit-trigger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: none;
        background: none;
        color: var(--grey);
        cursor: pointer;
        position: relative;
        z-index: 210;
    }
    .tabnav-brandkit-trigger svg {
        width: 22px;
        height: 22px;
    }
    .tabnav-brandkit-trigger.tabnav-open {
        color: var(--gold-dark);
    }

    .nav__overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(58, 60, 61, 0.5);
        z-index: 150;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition);
    }
    .nav--admin.nav--open .nav__overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .nav__menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        background: var(--white);
        box-shadow: var(--shadow-lg);
        padding: 24px;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform var(--transition);
        z-index: 300;
    }
    .nav--admin.nav--open .nav__menu {
        transform: translateX(0);
    }
    .nav__menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
    }
    .nav__menu-logo {
        display: flex;
        align-items: center;
    }
    .nav__menu-logo img {
        width: 32px;
        height: auto;
    }
    .nav__menu-logo span {
        color: var(--grey);
        margin-left: 12px;
        font-size: var(--fs-base);
        letter-spacing: 2px;
    }
    .nav__menu-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: none;
        background: none;
        color: var(--grey);
        cursor: pointer;
        flex-shrink: 0;
    }
    .nav__menu-close svg {
        width: 20px;
        height: 20px;
    }

    .nav__center {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }
    .nav__center-link {
        padding: 12px 4px;
        border-bottom: 1px solid var(--taupe-light);
        justify-content: flex-start;
    }
    .nav__right {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        margin-top: 40px;
    }
    .nav--admin .nav__logout {
        padding: 12px 4px;
        justify-content: flex-start;
    }
    .nav--admin .nav__settings-label {
        display: inline;
    }

    /* Admin-Header wie beim Brand-Kit-Kundenportal: Logo weg (siehe oben),
       stattdessen der Seitentitel zentriert in der (bereits sticky)
       Nav-Leiste — die Nav selbst dient als verlässlicher weißer
       Hintergrund dafür. */
    .nav--admin + .page-header h1 {
        position: fixed;
        top: 32px;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 20px;
        line-height: 1.2;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 55%;
        z-index: 999;
    }
    /* Aktuelle Kategorie (Brand-Kit-Bearbeiten: aktiver Pill/Sub-Tab) als
       eigene, fest angedockte Zeile direkt unter der Nav — nur vorhanden,
       wenn die jeweilige Seite dafür ein .nav__category-Element anlegt. */
    .nav--admin + .page-header .nav__category {
        display: block;
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--white);
        padding: 10px 16px;
        font-family: var(--font-body);
        font-size: var(--fs-base);
        color: var(--grey);
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        z-index: 998;
    }

    .page-header {
        position: relative;
        padding-top: 0;
        margin-top: -50px;
        padding-bottom: 20px;
    }
    .entity-switch__label {
        font-size: var(--fs-xs);
    }
    .entity-switch {
        margin-top: 10px;
        margin-bottom: 0;
    }
    .page-header h1 {
        font-size: 24px;
    }
    .quote-card h3 {
        font-size: 30px;
    }
    .daily-quote, .stat-tile__value {
        font-size: 25px;
    }
	
	.stat-tile h3, .stat-tile__sub {
		font-size: var(--fs-xs);
	}
	
	.stat-tile__value {
		margin-top: 20px;
	}
	
	.reminders-list__name {
		display: inline-flex;
		align-items: center;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	
	#top-customers-list .reminders-list__name {
        width: 60%;
        display: inline;
        padding-top: 3px;
    }
	
	.sub-tabs {
		margin-top:20px;
	}
	
	.reminders-list li {
		flex-wrap: wrap;
		gap: 5px;
	}

	.reminders-list__right {
		text-align: right;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	
	.reminders-list__amount {
		order:2;
	}

    .tabnav-overlay.tabnav-wide {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(58, 60, 61, 0.5);
        z-index: 150;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition);
    }
    .tabnav-overlay.tabnav-wide.tabnav-open {
        opacity: 1;
        pointer-events: auto;
    }

    .tabnav-panel.tabnav-wide {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        background: var(--white);
        box-shadow: var(--shadow-lg);
        padding: 80px 24px 24px;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform var(--transition);
        z-index: 200;
    }
    .tabnav-panel.tabnav-wide.tabnav-open {
        transform: translateX(0);
    }
    .tabnav-panel.tabnav-wide .tabnav-source {
        display: none;
    }
    .tabnav-panel.tabnav-wide .tabnav-list {
        display: flex;
    }

    .card__body {
        padding: 30px;
    }
	
	.app-main {
		padding:60px;
	}
	
	body:has(.portal-header) .app-toolbar {
		margin-top:-35px;
	}
	
	.color-mode-toggle {
		margin-top:-25px;
	}
	
    .bk-card-grid {
        --card-cols: 3 !important;
    } 
	
    div.tab-content .bk-card,
    div.tab-content[data-name="farbe"] .bk-card,
    div.tab-content[data-name="schrift"] .bk-card {
        max-width: 33.33%!important;
    }
	
	.nav {
		background:none;
	}
}


/* ─── @media (max-width: 1024px) ────────────────────────────────────────── */

@media (max-width: 1024px) {
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr 1fr;
    }
    .invoice-detail-grid,
    .contact-detail-grid {
        grid-template-columns: 1fr;
    }

}


/* ─── @media (max-width: 768px) ─────────────────────────────────────────── */

@media (max-width: 768px) {
    .page-header {
        padding: 24px 16px 20px;
    }
    .page-header__link {
        padding-bottom: 30px;
    }
    .color-tile {
        width: 140px;
    }
    .app-main {
        padding: 40px;
    }
	
	.bk-card__meta {
		margin-bottom:20px;
	}

    .page-header,
    .portal-header--tabbed {
        position: relative;
    }
    .nav__logout svg {
        width: 24px;
        height: 24px;
    }

    .tabnav-hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 40px;
        margin: 0 auto 12px;
        border: none;
        background: none;
        color: var(--grey);
        cursor: pointer;
        position: relative;
        z-index: 210;
    }
    .nav--has-tabnav-hamburger .tabnav-hamburger {
        margin: 0;
    }
    .tabnav-hamburger-icon {
        width: 24px;
        height: 24px;
    }
    .tabnav-hamburger-icon--close {
        display: none;
    }
    .tabnav-hamburger.tabnav-open .tabnav-hamburger-icon--open {
        display: none;
    }
    .tabnav-hamburger.tabnav-open .tabnav-hamburger-icon--close {
        display: block;
    }

    .tabnav-overlay:not(.tabnav-wide) {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(58, 60, 61, 0.5);
        z-index: 150;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition);
    }
    .tabnav-overlay:not(.tabnav-wide).tabnav-open {
        opacity: 1;
        pointer-events: auto;
    }

    .tabnav-panel:not(.tabnav-wide) {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        background: var(--white);
        box-shadow: var(--shadow-lg);
        padding: 30px 40px;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform var(--transition);
        z-index: 9999;
    }
    .tabnav-panel:not(.tabnav-wide).tabnav-open {
        transform: translateX(0);
    }

    .tabnav-panel:not(.tabnav-wide) .tabnav-source {
        display: none;
    }
    .tabnav-panel:not(.tabnav-wide) .tabnav-list {
        display: flex;
        margin-top: 10px;
    }

    .tabnav-panel:not(.tabnav-wide) .tabnav-panel__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
    }
    .tabnav-panel__logo {
        display: flex;
        align-items: center;
    }
    .tabnav-panel__logo img {
        width: 32px;
        height: auto;
    }
    .tabnav-panel__logo span {
        color: var(--grey);
        margin-left: 12px;
        font-size: var(--fs-base);
        letter-spacing: 2px;
    }
    .tabnav-panel__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: none;
        background: none;
        color: var(--grey);
        cursor: pointer;
        flex-shrink: 0;
        margin-right: -10px;
    }
    .tabnav-panel__close svg {
        width: 20px;
        height: 20px;
    }

    .nav--has-tabnav-hamburger {
        position: sticky;
        top: 0;
        z-index: 5;
        flex-wrap: wrap;
        height: auto;
        row-gap: 0px;
        padding-bottom: 20px;
        padding-top: 14px;
        box-shadow: var(--shadow-sm);
		background:white;
    }
    .nav--has-tabnav-hamburger .nav__logo {
        display: none;
    }
    .nav--has-tabnav-hamburger + .portal-header--tabbed .portal-header__name {
        position: fixed;
        top: 34px;
        left: 50%;
        transform: translate(-50%, -50%);
        line-height: 1.2;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 55%;
        z-index: 999;
        font-size: 24px;
    }
    .nav--has-tabnav-hamburger .nav__logout-text {
        display: none;
    }
    .nav--has-tabnav-hamburger .nav__category {
        display: block;
        flex-basis: 100%;
        order: 5;
        text-align: center;
        font-family: var(--font-body);
        font-size: var(--fs-base);
        color: var(--grey);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pdf-carousel__viewport {
        padding: 0;
    }
    .sub-tabs:not([data-tabnav-claimed]) {
        position: relative;
        flex-wrap: wrap;
        row-gap: 0;
    }
    .portal-footer {
        padding: 20px 0;
    }
    .portal-footer__sub {
        font-size: var(--fs-xs);
    }

    .tabnav-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        order: -1;
        padding: 10px 16px;
        border: 1.5px solid var(--grey);
        border-radius: var(--radius-pill);
        background: var(--white);
        color: var(--grey);
        font-family: var(--font-body);
        font-size: var(--fs-base);
        font-weight: 500;
        cursor: pointer;
    }
    .tabnav-toggle svg {
        flex-shrink: 0;
        transition: transform var(--transition);
    }
    .sub-tabs.tabnav-open .tabnav-toggle svg {
        transform: rotate(180deg);
    }
    .sub-tabs:not([data-tabnav-claimed]) > .sub-tab {
        display: none;
        width: 100%;
        text-align: left;
    }
    .sub-tabs:not([data-tabnav-claimed]).tabnav-open > .sub-tab {
        display: block;
    }

    .entity-switch {
        gap: 0;
        padding: 4px;
    }
    .entity-switch__label {
        display: none;
    }

    .app-toolbar__left,
    .app-toolbar__right,
    .cd-toolbar-actions {
        flex-wrap: wrap;
    }
    .app-toolbar__filters {
        flex-wrap: wrap;
        width: 100%;
    }
    .app-toolbar__filters input[type="text"] {
        flex: 1;
        min-width: 0;
    }
    body:has(.portal-header) .app-toolbar {
        margin-top: -15px;
    }

    .p-table-wrap {
        padding: 20px;
    }
    .p-table-wrap--list {
        padding: 16px;
    }
    #project-list-table,
    #customers-list-table,
    #invoice-list-table,
    #quote-list-table,
    #product-list-table,
    #brandkit-list-table {
        min-width: 720px;
    }

    .bk-card-grid {
        --card-cols: 1 !important;
    }
    .bk-card-grid .bk-card,
    div.tab-content .bk-card,
    div.tab-content[data-name="farbe"] .bk-card,
    div.tab-content[data-name="schrift"] .bk-card {
        width: 100%;
        flex-basis: 100%;
    }
    .color-mode-toggle {
        margin-top: 0;
        margin-bottom: 40px;
    }

    .board {
        grid-template-columns: 1fr;
    }
    .board-col {
        width: auto;
    }

    .portal-header--tabbed .pill-nav {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .portal-header--tabbed {
        padding-bottom: 0px;
    }
	
    /* Löst die 3-Spalten-Regel oben ab (gleicher Breakpoint, spätere Regel
       gewinnt) — noch enger gepackt, bevor es bei 768px auf 1 Spalte geht. */
    .bk-card-grid {
        --card-cols: 2 !important;
    }
    div.tab-content .bk-card,
    div.tab-content[data-name="farbe"] .bk-card,
    div.tab-content[data-name="schrift"] .bk-card {
        max-width: 300px!important;
        width: 50%!important;
    }
}


/* ─── @media (max-width: 640px) ─────────────────────────────────────────── */

@media (max-width: 640px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
    .grid-4 + .grid-4 {
        margin-top: 0 !important;
    }
    .form-row.columns-2,
    .form-row.columns-3,
    .form-row.columns-4 {
        grid-template-columns: 1fr;
    }

    .list-table {
        min-width: 0 !important;
    }
    .list-table thead {
        display: none;
    }
    .list-table,
    .list-table tbody,
    .list-table tr {
        display: block;
        width: 100%;
    }
    .list-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 12px;
        background: var(--white);
        border: 1px solid var(--taupe-light);
        border-radius: var(--radius-sm);
        padding: 14px 16px;
    }
    .list-table tr:not(:last-child) {
        margin-bottom: 5px;
    }
    .list-table td {
        display: inline-flex;
        align-items: center;
        width: auto !important;
        min-width: 0;
        border: none;
        background: none;
        padding: 0;
        border-radius: 0 !important;
        font-size: var(--fs-base);
    }
    .list-table td:first-child {
        flex-basis: 100%;
        max-width: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        font-weight: 500;
        margin-bottom: 2px;
    }
    .list-table td.p-table__cat-flag {
        display: none;
    }

    /* Spalten-Label vor dem Wert (Kartenansicht ersetzt die Kopfzeile,
       ohne das wäre z.B. ein nacktes Datum oder ein Betrag ohne Kontext
       nicht mehr zuordenbar) — erste Spalte bleibt ohne Label, die dient
       schon als Kartentitel (z.B. Rechnungsnummer, Artikelnummer). Jede
       weitere Spalte steht auf einer eigenen Zeile (statt nebeneinander
       zu umbrechen), das Label hat überall dieselbe feste Breite, damit
       die Werte dahinter sauber untereinander ausgerichtet stehen. */
    .list-table td:not(:first-child):not(.p-table__row-actions) {
        flex-basis: 100%;
        width: 100%;
    }
    .list-table td:not(:first-child)[class*="col-"]::before {
        display: inline-block;
        flex-shrink: 0;
        width: 85px;
        color: var(--grey);
        opacity: 0.6;
    }
    .list-table td.col-company_name::before { content: "Firma:"; }
    .list-table td.col-name::before { content: "Name:"; }
    .list-table td.col-issue_date::before { content: "Datum:"; }
    .list-table td.col-due_date::before { content: "Fällig:"; }
    .list-table td.col-valid_until::before { content: "Gültig bis:"; }
    .list-table td.col-amount::before { content: "Betrag:"; }
    .list-table td.col-status::before { content: "Status:"; }
    .list-table td.col-product_group::before { content: "Gruppe:"; }
    .list-table td.col-unit::before { content: "Einheit:"; }
    .list-table td.col-price::before { content: "Preis:"; }
    .list-table td.col-tax_rate::before { content: "Steuersatz:"; }
    .list-table td.col-usage_count::before { content: "Zugeordnet:"; }
    .list-table td.col-active::before { content: "Status:"; }
    .list-table td.col-link::before { content: "Link:"; }
    .list-table td.col-expires::before { content: "Gültig bis:"; }
    #project-list-table.list-table td:nth-child(2) {
        flex-basis: 100%;
        max-width: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        font-weight: 500;
        margin-bottom: 2px;
    }
    .list-table td.p-table__row-actions {
        flex-basis: 100%;
        justify-content: flex-end;
        margin-top: 5px;
        padding: 0;
    }
    .list-table td.p-table__row-actions .row-actions {
        justify-content: flex-end;
    }
    .list-table .empty-hint {
        padding: 20px 10px;
    }

    .modal-overlay {
        padding: 20px;
    }
    .modal-box {
        padding: 40px 30px 30px;
        max-height: 92vh;
    }
    .modal-box__actions {
        flex-wrap: wrap;
    }

    .chart-legend {
        grid-template-columns: 1fr;
    }
    .legend,
    .legend-holder {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}


/* ─── @media (max-width: 480px) ─────────────────────────────────────────── */

@media (max-width: 480px) {
    .login-box {
        padding: 32px 24px;
    }
    .login-box__logo img {
        height: 72px;
    }
}


/* ─── @media (max-width: 400px) ─────────────────────────────────────────── */

@media (max-width: 400px) {
    .app-toolbar h3 {
        display: none;
    }
    .app-toolbar .btn {
        width: 100%;
    }
    .app-toolbar {
        gap: 0;
    }
}