/* ==========================================================================
   Noxo Theme – modernes Erscheinungsbild für den WB-Manager
   --------------------------------------------------------------------------
   Wird in jeder Oberfläche als LETZTES Stylesheet geladen und überlagert nur
   das Aussehen (Farben, Schrift, Radien, Schatten, Abstände).
   Bewusst NIE gesetzt: "display" von Modals, Popups, Dropdowns und Zeilen –
   das steuert das JavaScript der App über style.display.

   Akzentfarbe wechseln: nur die --akzent-* Tokens unten ändern.
   ========================================================================== */

:root {
    /* Marke (Noxo) */
    --akzent: #7500F8;
    --akzent-stark: #6200D1;
    --akzent-text: #6200D1;
    --akzent-weich: #F7F0FF;
    --akzent-rgb: 117 0 248;

    /* Neutrale Flächen */
    --grund: #FAFAF9;
    --flaeche: #FFFFFF;
    --flaeche-gedaempft: #F5F5F4;
    --rand: #E7E5E4;
    --rand-stark: #D6D3D1;

    /* Text */
    --text: #1C1917;
    --text-leise: #57534E;
    --text-still: #78716C;

    /* Status */
    --status-aktiv: #15803D;
    --status-aktiv-weich: #DCFCE7;
    --status-warn: #D97706;
    --status-warn-weich: #FEF3C7;
    --status-kritisch: #B91C1C;
    --status-kritisch-weich: #FEE2E2;
    --status-info: #1D4ED8;
    --status-info-weich: #DBEAFE;

    /* Form */
    --radius: 10px;
    --radius-gross: 14px;
    --schatten-karte: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 3px 0 rgb(0 0 0 / 0.06);
    --schatten-dialog: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --fokus-ring: 0 0 0 3px rgb(var(--akzent-rgb) / 0.18);

    --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Grundlagen ---------------------------------------------------- */

body {
    font-family: var(--font);
    background-color: var(--grund);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
    font-family: var(--font);
}

::selection {
    background: rgb(var(--akzent-rgb) / 0.18);
}

a {
    color: var(--akzent-text);
}

:is(.main-content, .main-content-customer, .main-content-decline) {
    background-color: var(--grund);
    box-sizing: border-box;
    min-height: 100vh;
    padding: 32px;
    color: var(--text);
}

:is(.main-content, .main-content-customer, .main-content-decline) h1 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0 0 20px;
    color: var(--text);
}

:is(.main-content, .main-content-customer, .main-content-decline) h2 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    margin: 28px 0 12px;
    color: var(--text);
}

:is(.main-content, .main-content-customer, .main-content-decline) h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--text);
}

/* ---------- Marken-Lockup: Noxo × Wäscherei Beck -------------------------- */

.brand-lockup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 16px;
    border-bottom: 1px solid var(--rand);
    margin-bottom: 8px;
    background: var(--flaeche);
}

.brand-lockup img {
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
    background: none;
}

.brand-lockup .brand-noxo {
    height: 36px;
}

.brand-lockup .brand-beck {
    height: 50px;
}

.brand-lockup .brand-x {
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    color: var(--text-still);
}

/* Login-Seite: größer, ohne Trennlinie */
.brand-lockup--login {
    border-bottom: 0;
    background: transparent;
    margin-bottom: 0;
    gap: 20px;
}

.brand-lockup--login .brand-noxo {
    height: 64px;
}

.brand-lockup--login .brand-beck {
    height: 88px;
}

.brand-lockup--login .brand-x {
    font-size: 22px;
}

/* ---------- Seitenleiste --------------------------------------------------- */

.sidebar {
    background-color: var(--flaeche);
    color: var(--text);
    border-right: 1px solid var(--rand);
    box-sizing: border-box;
    overflow-y: auto;
}

.sidebar h2 {
    text-align: left;
    background-color: transparent;
    margin: 0;
    padding: 12px 24px 8px;
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-still);
}

.sidebar ul.sidebuttons {
    display: block;
    padding: 0 12px 16px;
    border-radius: 0;
    font-weight: 400;
    text-align: left;
}

.sidebar .sidebuttons .buttoninside {
    color: var(--text-leise) !important;
    text-decoration: none !important;
}

.sidebar ul li {
    padding: 8px 12px;
    margin: 2px 0;
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 20px;
    color: var(--text-leise);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar ul li:hover,
.sidebar ul a li:hover,
.dropdown-toggle-side:hover {
    background-color: var(--flaeche-gedaempft);
    color: var(--text);
}

.sidebar .dropdown-toggle-side {
    padding: 8px 12px;
    font-weight: 500;
    color: var(--text);
}

.sidebar .right-arrow::after {
    margin-left: 6px;
    font-size: 9px;
    color: var(--text-still);
}

.sidebar .dropdown-content-side {
    margin: 2px 0 6px 12px;
    padding-left: 8px;
    border-left: 1px solid var(--rand);
}

.sidebar .dropdown-content-side a li {
    padding: 6px 12px;
    font-size: 13.5px;
}

/* ---------- Karten (Dashboard) -------------------------------------------- */

.card {
    background-color: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten-karte);
    padding: 20px;
}

.stat-card {
    text-align: left;
}

.stat-card h3 {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-leise) !important;
    margin: 0 0 4px !important;
}

.stat-card p {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    color: var(--text);
}

/* Farbige Kreise: Umsatz (lila), Ausgaben (rot), Gewinn (grün) */
/* 80px = Maß der Kreise im SVG (cx/cy 40, r 35) – nicht verkleinern, sonst wird der Ring abgeschnitten */
.stat-card .circle-wrapper {
    position: relative;
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
}

.stat-card .circle-wrapper svg {
    display: block;
    width: 80px;
    height: 80px;
}

.stat-card .circle-bg {
    stroke-width: 8;
}

.stat-card .circle-progress {
    stroke-width: 8;
    stroke-dashoffset: 0 !important;
}

.turnover {
    stroke: var(--akzent);
}

.expenses {
    stroke: var(--status-kritisch);
}

.profit {
    stroke: var(--status-aktiv);
}

.circle-wrapper:has(.turnover) .circle-bg {
    fill: var(--akzent-weich);
    stroke: var(--akzent-weich);
}

.circle-wrapper:has(.expenses) .circle-bg {
    fill: var(--status-kritisch-weich);
    stroke: var(--status-kritisch-weich);
}

.circle-wrapper:has(.profit) .circle-bg {
    fill: var(--status-aktiv-weich);
    stroke: var(--status-aktiv-weich);
}

.stat-card .circle-wrapper::after {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
}

.circle-wrapper:has(.turnover)::after {
    content: "\2197";
    color: var(--akzent);
}

.circle-wrapper:has(.expenses)::after {
    content: "\2198";
    color: var(--status-kritisch);
}

.circle-wrapper:has(.profit)::after {
    content: "\20AC";
    color: var(--status-aktiv);
}

.stat-card:has(.turnover) p {
    color: var(--akzent-text);
}

.stat-card:has(.expenses) p {
    color: var(--status-kritisch);
}

.stat-card:has(.profit) p {
    color: var(--status-aktiv);
}

.bank_balance_card {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten-karte);
    padding: 20px 24px;
    gap: 6px;
}

.bank_balance_card p {
    margin: 0;
}

.bank_balance_card p:first-child {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-still);
}

.bank_balance_card p.balance {
    font-size: 30px;
    font-weight: 600;
    color: var(--text);
}

.header-bar {
    background-color: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten-karte);
    padding: 20px 24px;
    gap: 16px;
}

.header-bar .headline {
    font-size: 22px;
    font-weight: 600;
}

/* ---------- Tabellen ------------------------------------------------------ */

:is(.main-content, .main-content-customer, .main-content-decline) table:not(.summary-table) {
    border-collapse: separate !important;
    border-spacing: 0;
    background-color: var(--flaeche) !important;
    border: 1px solid var(--rand) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--schatten-karte) !important;
    font-size: 14px;
    color: var(--text);
}

:is(.main-content, .main-content-customer, .main-content-decline) table:not(.summary-table) th {
    background: var(--flaeche-gedaempft) !important;
    color: var(--text-still) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: left;
    padding: 10px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rand) !important;
}

:is(.main-content, .main-content-customer, .main-content-decline) table:not(.summary-table) td {
    padding: 12px 16px;
    border: 0 !important;
    border-bottom: 1px solid var(--rand) !important;
    vertical-align: middle;
}

:is(.main-content, .main-content-customer, .main-content-decline) table:not(.summary-table) tr:last-child > td {
    border-bottom: 0 !important;
}

:is(.main-content, .main-content-customer, .main-content-decline) table:not(.summary-table) tr:nth-child(even) {
    background-color: transparent;
}

:is(.main-content, .main-content-customer, .main-content-decline) table:not(.summary-table) tbody tr {
    transition: background-color 0.12s ease;
}

:is(.main-content, .main-content-customer, .main-content-decline) table:not(.summary-table) tbody tr:hover {
    background-color: var(--grund);
}

/* abgerundete Ecken der äußeren Zellen */
:is(.main-content, .main-content-customer, .main-content-decline) table:not(.summary-table) > :first-child > tr:first-child > :first-child {
    border-top-left-radius: var(--radius);
}

:is(.main-content, .main-content-customer, .main-content-decline) table:not(.summary-table) > :first-child > tr:first-child > :last-child {
    border-top-right-radius: var(--radius);
}

.table-container {
    margin-bottom: 32px;
}

.table-container.whitebackground,
tbody.whitebackground {
    background-color: transparent;
}

.tableFixHead {
    border-radius: var(--radius);
    height: auto;
    max-height: 400px;
}

/* Aktionsspalte als echte Tabellenzelle, damit Trennlinien durchlaufen */
:is(.main-content, .main-content-customer, .main-content-decline) td.buttonHover-C {
    display: table-cell !important;
    text-align: right;
    white-space: nowrap;
}

td.buttonHover-C > a {
    display: inline-block;
    margin-left: 6px;
}

.buttonHover button,
.buttonHover-C button,
.action-buttons button,
.action-buttons-customer button {
    white-space: nowrap;
}

.header-bar h1.headline {
    margin: 0;
}

/* Inline gesetzter blauer Knopf im Manager-Dashboard */
button[onclick="syncToDB()"] {
    background: var(--akzent) !important;
    border: 1px solid var(--akzent) !important;
    border-radius: var(--radius) !important;
    color: #fff !important;
    font-weight: 500;
    margin-top: 24px !important;
}

button[onclick="syncToDB()"]:hover {
    background: var(--akzent-stark) !important;
}

.bigchild a {
    color: var(--text);
    font-weight: 600;
}

.bigchild a:hover {
    color: var(--akzent-text);
    text-decoration: none;
}

.bigchild span {
    color: var(--text-still);
    font-size: 13px;
}

.paused-row {
    background-color: var(--status-kritisch-weich) !important;
}

.linked-row {
    border-left: 3px solid var(--status-aktiv) !important;
    background-color: var(--status-aktiv-weich) !important;
}

.link-label {
    background: var(--status-aktiv);
    color: #fff;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
}

/* ---------- Knöpfe -------------------------------------------------------- */

/* Basis = Nebenknopf (weiß mit Rahmen). Icon-Knöpfe bleiben unberührt. */
button:not([class*="icon-button"]) {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    min-height: 36px;
    padding: 8px 14px;
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius);
    background-color: var(--flaeche);
    color: var(--text);
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

button:not([class*="icon-button"]):hover {
    background-color: var(--flaeche-gedaempft);
}

button:focus-visible,
a:focus-visible,
.sidebar li:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

button:disabled,
button.disabled-btn {
    opacity: 0.5;
    cursor: not-allowed;
}

.buttonHover button:hover,
.buttonHover a:hover button,
.buttonHover-C button:hover,
.buttonHover-C a:hover button {
    background-color: var(--flaeche-gedaempft);
    box-shadow: none;
}

.buttonHover,
.buttonHover-C {
    gap: 6px;
}

.buttonHover button,
.buttonHover-C button:not([class*="icon-button"]) {
    min-height: 32px;
    padding: 6px 12px;
    font-size: 13px;
}

/* Hauptknopf (flacher Akzent) */
.action-buttons button,
.invoicefill button,
.modal-content button,
.customer-info-grid button,
.customer-buttons,
.reset-button,
.year-dropdown button,
.datev-connect-bar button,
.datev-client-form button,
.datev-clients-table button,
.datev-upload-form button,
.drag-area button,
.login-form button,
#sortBtn,
#loadClientsBtn,
#submitPayment,
#submitcomment,
#customerEmailSender #sendEmailBtn,
#customerEmailSender #saveEmailBtn {
    background-color: var(--akzent);
    border: 1px solid var(--akzent);
    border-radius: var(--radius);
    color: #fff;
    font-weight: 500;
}

.action-buttons button:hover,
.invoicefill button:hover,
.modal-content button:hover,
.customer-info-grid button:hover,
.customer-buttons:hover,
.reset-button:hover,
.year-dropdown button:hover,
.datev-connect-bar button:hover,
.datev-client-form button:hover,
.datev-clients-table button:hover,
.datev-upload-form button:hover,
.drag-area button:hover,
.login-form button:hover,
#sortBtn:hover,
#loadClientsBtn:hover,
#submitPayment:hover,
#submitcomment:hover,
#customerEmailSender #sendEmailBtn:hover,
#customerEmailSender #saveEmailBtn:hover {
    background-color: var(--akzent-stark);
    border-color: var(--akzent-stark);
}

/* In einer Aktionsleiste trägt nur der erste Knopf die volle Farbe */
.action-buttons button:not(:first-child) {
    background-color: var(--akzent-weich);
    border-color: transparent;
    color: var(--akzent-text);
}

.action-buttons button:not(:first-child):hover {
    background-color: #EFE0FF;
    border-color: transparent;
}

.action-buttons {
    flex-wrap: wrap;
    gap: 8px;
}

/* Kopfleiste der Kundenseite: ruhige Nebenknöpfe */
.action-buttons-customer {
    gap: 8px;
}

.action-buttons-customer button {
    background-color: var(--flaeche);
    border: 1px solid var(--rand-stark);
    color: var(--text);
    border-radius: var(--radius);
    padding: 8px 14px;
}

.action-buttons-customer button:hover {
    background-color: var(--flaeche-gedaempft);
}

/* Abbrechen / Schließen */
button.close-btn,
.invoicefill button.close-btn,
#customerEmailSender button[onclick="customerEmailClose()"] {
    background-color: var(--flaeche);
    border: 1px solid var(--rand-stark);
    color: var(--text);
}

button.close-btn:hover,
.invoicefill button.close-btn:hover,
#customerEmailSender button[onclick="customerEmailClose()"]:hover {
    background-color: var(--flaeche-gedaempft);
    border-color: var(--rand-stark);
}

/* Weicher Akzentknopf */
.month-dropdown button {
    background-color: var(--akzent-weich);
    border: 0;
    color: var(--akzent-text);
    border-radius: 8px;
    min-height: 32px;
}

.month-dropdown button:hover {
    background-color: #EFE0FF;
}

.ellipsis-btn {
    background: var(--flaeche-gedaempft);
    border: 1px solid var(--rand);
    border-radius: 8px;
}

/* Paginierung */
#pagination1,
#pagination2,
#pagination3 {
    align-items: center;
    flex-wrap: wrap;
}

#pagination1 button,
#pagination2 button,
#pagination3 a {
    min-width: 34px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius);
    background-color: var(--flaeche);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    line-height: 32px;
    box-sizing: border-box;
}

#pagination1 button:hover,
#pagination2 button:hover,
#pagination3 a:hover {
    background-color: var(--flaeche-gedaempft);
    border-color: var(--rand-stark);
}

#pagination1 button.pagactive,
#pagination2 button.pagactive,
#pagination1 button.active,
#pagination2 button.active,
#pagination3 a.active,
.pagactive {
    background-color: var(--akzent);
    border: 1px solid var(--akzent);
    color: #fff;
    font-weight: 600;
    padding: 0 10px;
}

/* ---------- Formularfelder ------------------------------------------------ */

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]),
select,
textarea {
    font-size: 14px;
    color: var(--text);
    background-color: var(--flaeche);
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius);
    padding: 8px 12px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--akzent);
    box-shadow: var(--fokus-ring);
    background-color: var(--flaeche);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-still);
}

input:disabled,
select:disabled,
textarea:disabled,
.disabled-input {
    background-color: var(--flaeche-gedaempft) !important;
    color: var(--text-still) !important;
    cursor: not-allowed;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--akzent);
}

input[type="file"] {
    font-size: 13px;
    color: var(--text-leise);
}

input[type="file"]::file-selector-button {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    margin-right: 10px;
    padding: 7px 12px;
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius);
    background: var(--flaeche);
    color: var(--text);
    cursor: pointer;
}

.search-container {
    margin-bottom: 12px;
}

.search-box {
    min-height: 38px;
}

#paymentText,
#commentText {
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius);
    background: var(--flaeche);
}

#paymentText:focus,
#commentText:focus {
    border-color: var(--akzent);
    box-shadow: var(--fokus-ring);
}

.form-group label,
.invoicefill-content label,
.popup-content label,
.datev-client-form label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-leise);
}

.form-container {
    gap: 14px;
}

/* ---------- Dialoge / Popups ---------------------------------------------- */

.invoicefill,
.modal,
.overlay,
#ItemSpecificCustomerID,
#customerEmailSender {
    background-color: rgb(12 10 9 / 0.45);
    backdrop-filter: blur(2px);
}

.invoicefill-content,
.modal-content,
.modal-content-specific-item,
.popup,
.popup_for_JSON,
.customer-info-grid,
#customerEmailSender .invoicefill-content-email {
    background-color: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten-dialog);
    color: var(--text);
}

.invoicefill-content,
.modal-content,
.popup {
    padding: 24px;
}

.invoicefill-content h2,
.invoicefill-content h3,
.popup-content h2,
.modal-content h3,
#customerEmailSender h2 {
    margin-top: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}

.customer-info-grid h2 {
    color: var(--text);
}

.customer-info-grid div {
    background-color: var(--grund);
    border: 1px solid var(--rand);
    border-radius: 8px;
    font-size: 14px;
}

.customer-info-grid strong {
    font-weight: 500;
    color: var(--text-leise);
}

#customerEmailSender label {
    color: var(--text-leise);
}

#customerEmailSender input,
#customerEmailSender textarea,
#customerEmailSender select {
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 14px;
}

#customerEmailSender input:focus,
#customerEmailSender textarea:focus,
#customerEmailSender select:focus {
    border-color: var(--akzent);
    box-shadow: var(--fokus-ring);
}

#customerEmailSender #emailStatusText {
    color: var(--text-still);
}

.invoice-list {
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background-color: var(--grund);
}

.invoice-option {
    border-bottom: 1px solid var(--rand);
}

.invoice-option label {
    color: var(--text);
    font-size: 14px;
}

.invoice-option:hover {
    background-color: var(--akzent-weich);
}

/* Datei-Ablage */
.drag-area {
    border: 2px dashed var(--rand-stark);
    border-radius: var(--radius);
    background-color: var(--grund);
}

.drag-area.active {
    border: 2px solid var(--akzent);
    background-color: var(--akzent-weich);
}

.drag-area .icon {
    color: var(--text-still);
}

.drag-area header,
.drag-area span {
    color: var(--text);
}

/* ---------- Dropdowns ----------------------------------------------------- */

.dropdown-content,
.dropdown-menu,
.year-options,
.month-dropdown {
    background-color: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten-dialog);
}

.dropdown-content a,
.year-options div {
    color: var(--text);
    border-radius: 6px;
}

.dropdown-content a:hover,
.year-options div:hover {
    background-color: var(--flaeche-gedaempft);
}

.dropdown-toggle {
    background: var(--flaeche);
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius);
}

/* Tom Select (Logistik) */
.ts-wrapper .ts-control {
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius);
    padding: 8px 12px;
    font-family: var(--font);
    font-size: 14px;
    box-shadow: none;
}

.ts-wrapper.focus .ts-control {
    border-color: var(--akzent);
    box-shadow: var(--fokus-ring);
}

.ts-dropdown {
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten-dialog);
    font-family: var(--font);
}

.ts-dropdown .active {
    background-color: var(--akzent-weich);
    color: var(--akzent-text);
}

/* ---------- Dokumentenmanager / DATEV -------------------------------------- */

#summaryResult {
    background-color: var(--flaeche);
    border: 1px solid var(--rand);
    border-left: 4px solid var(--status-aktiv);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 16px;
    box-shadow: var(--schatten-karte);
}

.year-dropdown-select {
    background-color: var(--flaeche);
}

.datev-flash {
    border-radius: var(--radius);
}

.datev-flash-ok {
    background-color: var(--status-aktiv-weich);
    color: var(--status-aktiv);
    border: 1px solid #BBF7D0;
}

.datev-flash-err {
    background-color: var(--status-kritisch-weich);
    color: var(--status-kritisch);
    border: 1px solid #FECACA;
}

.datev-connect-bar,
.datev-clients-panel {
    background-color: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten-karte);
}

.datev-connected-badge,
.status-badge.status-sent {
    background-color: var(--status-aktiv-weich);
    color: var(--status-aktiv);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.status-local {
    background-color: var(--flaeche-gedaempft);
    color: var(--text-leise);
    border-radius: 999px;
    font-size: 12px;
}

.datev-clients-warning {
    color: var(--status-kritisch);
}

.datev-logout-link,
.datev-hint {
    color: var(--text-leise);
}

/* ---------- Login ----------------------------------------------------------- */

.login-container {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten-dialog);
    padding: 32px;
}

.login-form h2 {
    margin: 0 0 24px;
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
}

.login-form .form-group {
    margin-bottom: 16px;
}

.login-form .form-group label {
    text-align: left;
    margin-bottom: 6px;
}

.login-form .form-group input {
    max-width: none;
    min-height: 42px;
}

.login-form button {
    min-height: 42px;
    margin-top: 8px;
    font-size: 15px;
}

.error-message {
    color: var(--status-kritisch);
}

/* ---------- Admin-Konfiguration (admin-panel) ------------------------------ */

#config-form {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten-karte);
    padding: 24px;
}

body > h2:first-child {
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
}

#config-form label {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-leise);
}

#config-form button[type="submit"] {
    margin-top: 16px;
    min-height: 42px;
    background-color: var(--akzent);
    border: 1px solid var(--akzent);
    color: #fff;
}

#config-form button[type="submit"]:hover {
    background-color: var(--akzent-stark);
    border-color: var(--akzent-stark);
}

/* ---------- Kleine Bildschirme -------------------------------------------- */

@media (max-width: 600px) {
    :is(.main-content, .main-content-customer, .main-content-decline) {
        padding: 16px;
    }

    :is(.main-content, .main-content-customer, .main-content-decline) table:not(.summary-table) th,
    :is(.main-content, .main-content-customer, .main-content-decline) table:not(.summary-table) td {
        padding: 8px 10px !important;
    }

    .login-container {
        padding: 24px 20px;
    }

    .brand-lockup--login .brand-noxo {
        height: 48px;
    }

    .brand-lockup--login .brand-beck {
        height: 66px;
    }
}

/* ==========================================================================
   Responsive
   Desktop > 1024px · Tablet 768–1024px · Smartphone < 768px
   ========================================================================== */

/* Manager-Dashboard: Tabellenblöcke (Inline-Layout mit 10rem Abstand) umbrechen statt überlaufen */
.main-content > div[style*="gap: 10rem"] {
    flex-wrap: wrap;
    gap: 32px !important;
}

.main-content > div[style*="gap: 10rem"] > div {
    flex: 1 1 420px !important;
    min-width: 0 !important;
}

#table1,
#table2,
#table3 {
    min-width: 0 !important;
}

/* Mobile Navigation – wird von sidebar.js erzeugt, auf dem Desktop ausgeblendet */
.mobile-topbar,
.nav-backdrop,
.sidebar .nav-close {
    display: none;
}

/* ---------- Tablet und Smartphone ---------------------------------------- */

@media (max-width: 1024px) {
    html,
    body {
        overflow-x: hidden;
    }

    /* Kopfleiste mit Menü-Knopf */
    .mobile-topbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 900;
        display: flex;
        align-items: center;
        gap: 12px;
        height: 56px;
        padding: 0 16px;
        box-sizing: border-box;
        background: var(--flaeche);
        border-bottom: 1px solid var(--rand);
    }

    .mobile-topbar .nav-toggle {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0;
        border: 1px solid var(--rand);
        border-radius: var(--radius);
        background: var(--flaeche);
    }

    .mobile-topbar .nav-toggle:hover {
        background: var(--flaeche-gedaempft);
    }

    .nav-toggle-bar {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: var(--text);
    }

    .mobile-topbar .brand-lockup--topbar {
        justify-content: flex-start;
        gap: 8px;
        padding: 0;
        margin: 0;
        border: 0;
        background: transparent;
    }

    .brand-lockup--topbar .brand-noxo {
        height: 26px;
    }

    .brand-lockup--topbar .brand-beck {
        height: 36px;
    }

    .brand-lockup--topbar .brand-x {
        font-size: 12px;
    }

    /* Sidebar als ausfahrbares Menü */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1000;
        width: min(300px, 86vw);
        height: 100%;
        transform: translateX(-100%);
        visibility: hidden;
        box-shadow: var(--schatten-dialog);
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
    }

    body.nav-open .sidebar {
        transform: none;
        visibility: visible;
        transition: transform 0.25s ease;
    }

    .sidebar .nav-close {
        position: absolute;
        top: 12px;
        right: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        min-height: 36px;
        padding: 0;
        border: 0;
        border-radius: var(--radius);
        background: transparent;
        color: var(--text-leise);
        font-size: 24px;
        line-height: 1;
    }

    .sidebar .nav-close:hover {
        background: var(--flaeche-gedaempft);
        color: var(--text);
    }

    .sidebar .brand-lockup {
        justify-content: flex-start;
        padding-right: 56px;
    }

    .sidebar ul li {
        padding: 10px 12px;
    }

    .nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 999;
        display: block;
        background: rgb(12 10 9 / 0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0s linear 0.25s;
    }

    body.nav-open .nav-backdrop {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.25s ease;
    }

    /* Inhalt nutzt die volle Breite */
    body.has-mobile-nav :is(.main-content, .main-content-customer, .main-content-decline) {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 80px 24px 32px;
    }

    /* Dialoge liegen über der Kopfleiste */
    .invoicefill,
    .modal,
    .overlay,
    .popup,
    .popup_for_JSON {
        z-index: 1100;
    }

    .customer-info-grid {
        z-index: 1101;
    }

    /* Typografie */
    :is(.main-content, .main-content-customer, .main-content-decline) h1 {
        font-size: 22px;
        margin-bottom: 16px;
    }

    :is(.main-content, .main-content-customer, .main-content-decline) h2 {
        font-size: 17px;
        margin: 24px 0 10px;
    }

    .header-bar {
        padding: 16px 20px;
    }

    .header-bar .headline {
        font-size: 20px;
    }

    /* Dashboard */
    .dashboard-elements {
        flex-wrap: wrap;
        gap: 16px;
    }

    .dashboard-elements > .card {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
        box-sizing: border-box;
    }

    .main-content > div[style*="gap: 10rem"] {
        gap: 24px !important;
    }

    .main-content > div[style*="gap: 10rem"] > div {
        flex: 1 1 100% !important;
    }

    /* Breite Tabellen scrollen in ihrem Bereich statt die Seite zu verbreitern */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Suche und Formulare */
    .search-box {
        width: 100%;
        max-width: 360px;
        box-sizing: border-box;
    }

    .datev-connect-bar,
    .datev-client-form,
    .datev-upload-form {
        flex-wrap: wrap;
    }

    #summaryResult {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Dialoge passen in den Bildschirm */
    .tablewidth,
    .max-order-table {
        max-width: calc(100vw - 48px) !important;
    }

    .invoicefill-content,
    .modal-content-specific-item {
        max-width: calc(100vw - 48px);
        max-height: calc(100dvh - 48px);
        box-sizing: border-box;
    }

    .modal-content {
        width: min(400px, calc(100vw - 48px));
        box-sizing: border-box;
    }

    .popup {
        width: min(420px, calc(100vw - 48px));
        max-height: calc(100dvh - 48px);
        overflow-y: auto;
        box-sizing: border-box;
    }

    .popup_for_JSON {
        width: calc(100vw - 48px);
        box-sizing: border-box;
    }

    .customer-info-grid {
        width: calc(100vw - 48px);
        max-height: calc(100dvh - 48px);
        overflow-y: auto;
        box-sizing: border-box;
    }

    #paymentText {
        width: 100%;
        box-sizing: border-box;
    }
}

/* ---------- Smartphone ---------------------------------------------------- */

@media (max-width: 767px) {
    :is(.main-content, .main-content-customer, .main-content-decline) {
        padding: 16px;
    }

    body.has-mobile-nav :is(.main-content, .main-content-customer, .main-content-decline) {
        padding: 72px 16px 24px;
    }

    .mobile-topbar {
        padding: 0 12px;
    }

    .brand-lockup--topbar .brand-noxo {
        height: 28px;
    }

    .brand-lockup--topbar .brand-beck {
        height: 40px;
    }

    /* Tabellenzeilen einzeilig halten – die Tabelle wird stattdessen seitlich gewischt */
    :is(.main-content, .main-content-customer, .main-content-decline) table:not(.summary-table) td:not(.bigchild):not(.wrap-text):not(.buttonHover-C) {
        white-space: nowrap;
    }

    /* Dashboard-Tabellen ohne eigenen Scroll-Container */
    .main-content > div[style*="gap: 10rem"] > div {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #table3 {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .invoicefill-content,
    .modal-content-specific-item {
        overflow-x: auto;
    }

    /* Typografie */
    :is(.main-content, .main-content-customer, .main-content-decline) h1 {
        font-size: 20px;
        margin-bottom: 14px;
    }

    :is(.main-content, .main-content-customer, .main-content-decline) h2 {
        font-size: 16px;
        margin: 20px 0 8px;
    }

    :is(.main-content, .main-content-customer, .main-content-decline) h3 {
        font-size: 14px;
    }

    /* Tabellen */
    :is(.main-content, .main-content-customer, .main-content-decline) table:not(.summary-table) {
        font-size: 13px;
    }

    :is(.main-content, .main-content-customer, .main-content-decline) table:not(.summary-table) th {
        font-size: 11px;
    }

    :is(.main-content, .main-content-customer, .main-content-decline) table:not(.summary-table) th,
    :is(.main-content, .main-content-customer, .main-content-decline) table:not(.summary-table) td {
        padding: 10px 12px !important;
    }

    :is(.main-content, .main-content-customer, .main-content-decline) td.buttonHover-C {
        white-space: normal;
    }

    td.buttonHover-C > a {
        margin: 2px 0 2px 4px;
    }

    .bigchild span {
        display: block;
        margin-top: 2px;
    }

    .table-container {
        margin-bottom: 24px;
    }

    /* Knöpfe: gut antippbar */
    .action-buttons button,
    .action-buttons-customer button {
        min-height: 40px;
    }

    .buttonHover button,
    .buttonHover-C button:not([class*="icon-button"]) {
        min-height: 34px;
    }

    /* Dashboard */
    .dashboard-elements > .card {
        flex: 1 1 100%;
    }

    .stat-card {
        padding: 16px;
        gap: 16px;
    }

    .stat-card p {
        font-size: 20px;
    }

    .bank_balance_card {
        padding: 16px 20px;
    }

    .bank_balance_card p.balance {
        font-size: 24px;
    }

    /* Kundenseite */
    .header-bar {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
        gap: 12px;
    }

    .header-bar .headline {
        font-size: 18px;
    }

    .action-buttons-customer {
        justify-content: flex-start;
    }

    /* Formulare: 16px verhindert automatisches Zoomen auf iOS */
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]),
    select,
    textarea {
        font-size: 16px;
    }

    .search-box {
        max-width: none;
    }

    .form-group {
        width: 100%;
    }

    .multi-dropdown {
        width: 100%;
    }

    .datev-client-form input[type="text"] {
        width: 100%;
    }

    /* Dialoge */
    .tablewidth,
    .max-order-table,
    .invoicefill-content,
    .modal-content-specific-item {
        max-width: calc(100vw - 32px) !important;
        max-height: calc(100dvh - 32px);
    }

    .invoicefill-content,
    .modal-content,
    .modal-content-specific-item,
    .popup {
        padding: 20px;
    }

    .modal-content,
    .popup,
    .popup_for_JSON,
    .customer-info-grid {
        width: calc(100vw - 32px);
        max-height: calc(100dvh - 32px);
    }

    .customer-info-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 20px;
    }

    .customer-info-grid h2 {
        grid-column: 1 / -1;
    }

    /* Admin-Konfiguration */
    body:has(#config-form) {
        margin: 24px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    body.nav-open .sidebar,
    .nav-backdrop,
    body.nav-open .nav-backdrop {
        transition: none;
    }
}