/* Buchungsmanager v4.7 — native/mobile UI layer
   Loaded after component styles so every admin form shares one control system. */

:root {
    --bm-surface: #ffffff;
    --bm-page: #f7f7f6;
    --bm-text: #3e4241;
    --bm-muted: #7b817e;
    --bm-line: #d7dbd8;
    --bm-line-strong: #bfc5c1;
    --bm-accent: #444946;
    --bm-active: #f1f2f1;
    --bm-control-height: 48px;
    --bm-radius: 8px;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--bm-page);
}

button,
a,
input,
textarea,
select {
    -webkit-tap-highlight-color: transparent;
}

button,
a {
    touch-action: manipulation;
}

/* ---------- Shared admin form language ---------- */

.admin-content input:not([type="checkbox"]):not([type="radio"]):not(.money-input),
.admin-content select,
.admin-content .ui-field {
    box-sizing: border-box !important;
    width: 100% !important;
    height: var(--bm-control-height) !important;
    min-height: var(--bm-control-height) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 14px !important;
    border: 1px solid var(--bm-line) !important;
    border-radius: var(--bm-radius) !important;
    background: var(--bm-surface) !important;
    color: #333735 !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.admin-content input[type="date"],
.admin-content input[type="time"],
.admin-content input[type="datetime-local"] {
    display: block !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    color-scheme: light;
    text-align: left !important;
}

.admin-content input[type="date"]::-webkit-date-and-time-value,
.admin-content input[type="time"]::-webkit-date-and-time-value,
.admin-content input[type="datetime-local"]::-webkit-date-and-time-value {
    min-height: 1.2em;
    padding: 0;
    text-align: left;
}

.admin-content input[type="date"]::-webkit-datetime-edit,
.admin-content input[type="time"]::-webkit-datetime-edit,
.admin-content input[type="datetime-local"]::-webkit-datetime-edit {
    padding: 0;
}

.admin-content input[type="date"]::-webkit-calendar-picker-indicator,
.admin-content input[type="time"]::-webkit-calendar-picker-indicator,
.admin-content input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    margin-left: auto;
    opacity: .65;
}

.admin-content textarea {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 112px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--bm-line) !important;
    border-radius: var(--bm-radius) !important;
    background: var(--bm-surface) !important;
    color: #333735 !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    outline: 0 !important;
    box-shadow: none !important;
    resize: vertical;
}

.admin-content .large-textarea textarea {
    min-height: 300px !important;
}

.admin-content input:not([type="checkbox"]):not([type="radio"]):focus,
.admin-content select:focus,
.admin-content textarea:focus,
.admin-content .ui-field:focus,
.admin-content .ui-field:focus-within {
    border-color: #717874 !important;
    box-shadow: 0 0 0 1px #717874 !important;
}

.admin-content .money-control {
    display: flex !important;
    justify-content: space-between !important;
    gap: .55rem !important;
}

.admin-content .money-control .money-input {
    width: auto !important;
    flex: 1 1 auto !important;
}

.admin-content .select-trigger {
    display: flex !important;
    justify-content: space-between !important;
    cursor: pointer;
}

.admin-content input[type="checkbox"] {
    accent-color: var(--bm-accent);
}

.admin-content .admin-form,
.admin-content .user-create {
    gap: 18px !important;
}

.admin-content .two-columns,
.admin-content .three-columns {
    gap: 16px !important;
}

.admin-content label {
    gap: 8px !important;
    color: #717775;
}

.admin-content .admin-form label,
.admin-content .user-create label {
    font-size: .92rem !important;
}

/* ---------- Actions ---------- */

.admin-content .admin-primary,
.admin-content .admin-secondary,
.admin-content .admin-danger,
.admin-content .action-button {
    min-height: 46px !important;
    border-radius: 8px !important;
}

.admin-content .action-link {
    min-height: 40px;
    padding: .45rem .65rem !important;
    border: 1px solid #d8dcda !important;
    border-radius: 8px !important;
    background: #fff !important;
}

.admin-content .action-link:hover {
    background: #f4f5f4 !important;
}

/* ---------- Mobile ---------- */

@media (max-width: 760px) {
    :root {
        --bm-control-height: 52px;
        --bm-radius: 10px;
    }

    .admin-content {
        overflow-x: hidden;
    }

    .admin-page-header {
        margin-bottom: 1.35rem !important;
        gap: .85rem !important;
    }

    .admin-kicker {
        margin-bottom: .55rem !important;
        font-size: .65rem !important;
        letter-spacing: .26em !important;
    }

    .admin-title {
        font-size: clamp(2rem, 10vw, 2.7rem) !important;
        line-height: 1.02 !important;
    }

    .admin-card {
        padding: 1rem !important;
        border-color: #dfe2e0 !important;
    }

    .admin-card h2 {
        font-size: clamp(1.45rem, 7.3vw, 2rem) !important;
        line-height: 1.1 !important;
    }

    .admin-content .two-columns,
    .admin-content .three-columns {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    .admin-content input:not([type="checkbox"]):not([type="radio"]):not(.money-input),
    .admin-content select,
    .admin-content textarea,
    .admin-content .ui-field {
        font-size: 16px !important; /* prevents iOS focus zoom */
    }

    .admin-content .admin-form,
    .admin-content .user-create {
        gap: 20px !important;
    }

    .admin-content .admin-form label,
    .admin-content .user-create label {
        font-size: .95rem !important;
    }

    .admin-content .admin-actions {
        gap: .55rem !important;
    }

    .admin-content .admin-actions > a,
    .admin-content .admin-actions > button,
    .admin-content .admin-form > .admin-primary,
    .admin-content .admin-form > .admin-secondary,
    .admin-content .admin-form > .admin-danger {
        width: 100% !important;
        min-height: 50px !important;
    }

    .metric {
        font-size: 2.5rem !important;
    }

    .admin-grid > .admin-card {
        min-height: 118px !important;
    }

    /* list/table -> touch-friendly cards */
    .list-card,
    .users-table-wrap {
        overflow: visible !important;
    }

    .admin-table {
        min-width: 0 !important;
        width: 100% !important;
        display: block;
        background: transparent !important;
    }

    .admin-table thead {
        display: none;
    }

    .admin-table tbody {
        display: grid;
        gap: .7rem;
    }

    .admin-table tr {
        display: block;
        padding: .8rem .9rem;
        border: 1px solid #e0e3e1;
        border-radius: 11px;
        background: #fff;
    }

    .admin-table td {
        display: grid;
        grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
        align-items: start;
        gap: .7rem;
        padding: .48rem 0 !important;
        border: 0 !important;
        overflow-wrap: anywhere;
    }

    .admin-table td::before {
        content: attr(data-label);
        color: #969c99;
        font-size: .67rem;
        font-weight: 600;
        letter-spacing: .09em;
        line-height: 1.4;
        text-transform: uppercase;
    }

    .admin-table td[data-label="Aktionen"] {
        display: block;
        padding-top: .7rem !important;
    }

    .admin-table td[data-label="Aktionen"]::before {
        display: none;
    }

    .admin-table .action-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .45rem !important;
    }

    .admin-table .action-link {
        min-height: 44px;
        justify-content: center;
        padding: .55rem .65rem !important;
    }

    .status-pill {
        width: fit-content;
    }
}

@media (max-width: 390px) {
    .admin-content {
        padding-left: .8rem !important;
        padding-right: .8rem !important;
    }

    .admin-card {
        padding: .9rem !important;
    }

    .admin-table .action-list {
        grid-template-columns: 1fr;
    }
}

/* ---------- Installed-app polish ---------- */

@media (display-mode: standalone) {
    body {
        min-height: 100dvh;
    }

    .admin-sidebar {
        padding-top: max(.8rem, env(safe-area-inset-top)) !important;
    }

    .mobile-admin-footer {
        padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    }
}