html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

:root {
    --rubino-dark: #1f334d;
    --rubino-blue: #2f75b5;
    --rubino-light: #f3f7fb;
    --rubino-border: #d8e3ec;
    --rubino-green: #0b9f3a;
    --rubino-red: #a61e1e;
    --rubino-gold: #b88a20;
}

body {
    background: #eef3f8;
    color: #243447;
}

.rubino-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 16px 48px;
}

.hero-card {
    background: linear-gradient(135deg, #ffffff 0%, #f3f7fb 48%, #e9f1fb 100%);
    border: 1px solid var(--rubino-border);
    border-radius: 22px;
    padding: 34px 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 14px 34px rgba(31, 51, 77, 0.08);
}

.eyebrow {
    color: var(--rubino-gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.hero-card h1 {
    color: var(--rubino-dark);
    font-size: 42px;
    font-weight: 800;
    margin: 0;
}

.hero-card p {
    color: #617287;
    font-size: 16px;
    margin: 10px 0 0;
}

.hero-status {
    background: #e4f7ea;
    color: var(--rubino-green);
    border: 1px solid #bce7c9;
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 700;
    display: flex;
    gap: 8px;
    align-items: center;
    white-space: nowrap;
}

.status-dot {
    width: 10px;
    height: 10px;
    background: var(--rubino-green);
    border-radius: 50%;
    display: inline-block;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 18px;
}

.metric-card {
    background: #ffffff;
    border: 1px solid var(--rubino-border);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 10px 26px rgba(31, 51, 77, 0.06);
}

.metric-title {
    color: #617287;
    font-size: 13px;
    font-weight: 700;
}

.metric-value {
    color: var(--rubino-dark);
    font-size: 34px;
    font-weight: 800;
    margin-top: 8px;
    line-height: 1.05;
}

    .metric-value.small {
        font-size: 26px;
    }

    .metric-value.success {
        color: var(--rubino-green);
    }

.metric-subtitle {
    color: #7b8998;
    font-size: 13px;
    margin-top: 7px;
}

.content-card {
    background: #ffffff;
    border: 1px solid var(--rubino-border);
    border-radius: 20px;
    margin-top: 18px;
    padding: 24px;
    box-shadow: 0 10px 26px rgba(31, 51, 77, 0.06);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

    .section-header h2 {
        color: var(--rubino-dark);
        font-size: 24px;
        font-weight: 800;
        margin: 0;
    }

    .section-header p {
        color: #617287;
        margin: 4px 0 0;
    }

.rubino-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
}

    .rubino-table th {
        background: #f3f7fb;
        color: #344a63;
        font-size: 13px;
        text-align: left;
        padding: 12px;
        border-bottom: 1px solid var(--rubino-border);
    }

    .rubino-table td {
        padding: 13px 12px;
        border-bottom: 1px solid #edf2f6;
        color: #243447;
    }

.code-badge {
    background: #eef5ff;
    color: #1f5c99;
    border: 1px solid #cfe1f5;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 700;
}

.pill {
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
}

    .pill.ok {
        background: #e4f7ea;
        color: var(--rubino-green);
        border: 1px solid #bce7c9;
    }

    .pill.inactive {
        background: #f8e7e7;
        color: var(--rubino-red);
        border: 1px solid #efc1c1;
    }

@media (max-width: 900px) {
    .hero-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .hero-card h1 {
        font-size: 32px;
    }
}

.hero-card.compact {
    padding: 26px 32px;
}

.chat-form {
    display: grid;
    gap: 16px;
}

.form-row {
    display: grid;
    gap: 7px;
}

    .form-row label {
        font-size: 13px;
        font-weight: 800;
        color: #344a63;
    }

    .form-row select,
    .form-row textarea {
        width: 100%;
        border: 1px solid var(--rubino-border);
        border-radius: 14px;
        padding: 11px 13px;
        font-size: 14px;
        color: #243447;
        background: #f8fbfe;
        outline: none;
    }

        .form-row select:focus,
        .form-row textarea:focus {
            border-color: var(--rubino-blue);
            box-shadow: 0 0 0 3px rgba(47, 117, 181, 0.14);
        }

.form-actions {
    display: flex;
    justify-content: flex-end;
}

.rubino-button {
    background: linear-gradient(135deg, #dff0ff 0%, #cfe4fb 100%);
    border: 1px solid #8ebae5;
    color: #174a7a;
    border-radius: 999px;
    padding: 10px 26px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

    .rubino-button:hover {
        background: linear-gradient(135deg, #d2eaff 0%, #bddcf7 100%);
    }

.status-message {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #e4f7ea;
    color: var(--rubino-green);
    border: 1px solid #bce7c9;
    font-weight: 700;
}

.chat-list {
    display: grid;
    gap: 12px;
}

.empty-state {
    color: #7b8998;
    background: #f8fbfe;
    border: 1px dashed var(--rubino-border);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
}

.chat-message {
    display: grid;
    gap: 6px;
}

    .chat-message.portal {
        justify-items: end;
    }

    .chat-message.branch {
        justify-items: start;
    }

.chat-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    color: #718095;
    font-size: 12px;
}

    .chat-meta strong {
        color: #243447;
    }

.chat-bubble {
    max-width: 72%;
    border-radius: 18px;
    padding: 12px 15px;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 8px 18px rgba(31, 51, 77, 0.06);
}

.chat-message.portal .chat-bubble {
    background: #dff4cf;
    border: 1px solid #bde7a8;
    color: #1f4d22;
    border-top-right-radius: 6px;
}

.chat-message.branch .chat-bubble {
    background: #ffffff;
    border: 1px solid var(--rubino-border);
    color: #243447;
    border-top-left-radius: 6px;
}

.metric-value.danger {
    color: var(--rubino-red);
}

.age-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.age-card {
    background: #f8fbfe;
    border: 1px solid var(--rubino-border);
    border-radius: 16px;
    padding: 15px;
}

.age-label {
    color: #617287;
    font-size: 13px;
    font-weight: 800;
}

.age-value {
    color: var(--rubino-dark);
    font-size: 30px;
    font-weight: 900;
    margin-top: 4px;
}

.age-bar {
    height: 8px;
    background: #e3ebf4;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 10px;
}

.age-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #2f75b5, #76a9d8);
    border-radius: 999px;
}

.age-percent {
    color: #7b8998;
    font-size: 12px;
    margin-top: 7px;
}

.pill.error {
    background: #f8e7e7;
    color: var(--rubino-red);
    border: 1px solid #efc1c1;
}

@media (max-width: 900px) {
    .age-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .age-grid {
        grid-template-columns: 1fr;
    }
}

.filter-card {
    margin-top: 18px;
}

.filter-form {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 14px;
    align-items: end;
}

.filter-actions {
    display: flex;
    justify-content: flex-end;
    align-items: end;
}

.filter-summary {
    margin-top: 16px;
    background: #f3f7fb;
    border: 1px solid var(--rubino-border);
    border-radius: 14px;
    padding: 12px 14px;
    color: #516275;
    font-size: 14px;
}

    .filter-summary strong {
        color: var(--rubino-dark);
    }

.dashboard-grid.single-row {
    grid-template-columns: repeat(4, 1fr);
    margin-top: 16px;
}

    .dashboard-grid.single-row .metric-card {
        grid-column: span 1;
    }

@media (max-width: 900px) {
    .filter-form {
        grid-template-columns: 1fr 1fr;
    }

    .filter-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .filter-form {
        grid-template-columns: 1fr;
    }

    .dashboard-grid.single-row {
        grid-template-columns: 1fr;
    }
}

.bar-chart {
    display: grid;
    gap: 8px;
    align-items: end;
    min-height: 220px;
    background: #f8fbfe;
    border: 1px solid var(--rubino-border);
    border-radius: 18px;
    padding: 18px 14px 12px;
    overflow-x: auto;
}

.daily-chart {
    grid-template-columns: repeat(31, minmax(24px, 1fr));
}

.hourly-chart {
    grid-template-columns: repeat(19, minmax(42px, 1fr));
}

.bar-column {
    display: grid;
    grid-template-rows: 18px 150px 18px;
    gap: 6px;
    align-items: end;
    justify-items: center;
    min-width: 24px;
}

.hourly-chart .bar-column {
    min-width: 42px;
}

.bar-value {
    color: #344a63;
    font-size: 11px;
    font-weight: 800;
    min-height: 16px;
}

.bar-track {
    position: relative;
    width: 18px;
    height: 150px;
    background: #e3ebf4;
    border-radius: 999px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.hourly-chart .bar-track {
    width: 24px;
}

.bar-fill {
    width: 100%;
    min-height: 2px;
    background: linear-gradient(180deg, #76a9d8 0%, #2f75b5 100%);
    border-radius: 999px 999px 0 0;
}

    .bar-fill.hour-fill {
        background: linear-gradient(180deg, #8fd6a4 0%, #0b9f3a 100%);
    }

.bar-label {
    color: #617287;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .bar-chart {
        display: flex;
        align-items: end;
    }

    .bar-column {
        flex: 0 0 28px;
    }

    .hourly-chart .bar-column {
        flex-basis: 48px;
    }
}

.metric-value.warning {
    color: #b88a20;
}

.thermostat-filter-form {
    grid-template-columns: 2fr auto;
}

.thermostat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.thermostat-card {
    background: #f8fbfe;
    border: 1px solid var(--rubino-border);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 10px 24px rgba(31, 51, 77, 0.05);
}

    .thermostat-card.status-ok {
        border-color: #bce7c9;
        background: #f5fff7;
    }

    .thermostat-card.status-low {
        border-color: #f0d596;
        background: #fffaf0;
    }

    .thermostat-card.status-critical {
        border-color: #efb8b8;
        background: #fff5f5;
    }

    .thermostat-card.status-outdated {
        border-color: #d5dde6;
        background: #f2f4f7;
    }

.thermostat-card-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.thermostat-name {
    color: var(--rubino-dark);
    font-size: 17px;
    font-weight: 900;
}

.thermostat-branch {
    color: #617287;
    font-size: 12px;
    margin-top: 3px;
    font-weight: 700;
}

.thermostat-status {
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 900;
    background: #eef5ff;
    color: #1f5c99;
    border: 1px solid #cfe1f5;
    white-space: nowrap;
}

.status-ok .thermostat-status {
    background: #e4f7ea;
    color: var(--rubino-green);
    border-color: #bce7c9;
}

.status-low .thermostat-status {
    background: #fff3cd;
    color: #8a6400;
    border-color: #f0d596;
}

.status-critical .thermostat-status {
    background: #f8e7e7;
    color: var(--rubino-red);
    border-color: #efc1c1;
}

.status-outdated .thermostat-status {
    background: #e8edf3;
    color: #617287;
    border-color: #cbd5df;
}

.battery-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    margin-top: 22px;
}

.battery-shell {
    height: 18px;
    background: #e3ebf4;
    border: 1px solid #cfdbe7;
    border-radius: 999px;
    overflow: hidden;
}

.battery-fill {
    height: 100%;
    background: linear-gradient(90deg, #8fd6a4 0%, #0b9f3a 100%);
    border-radius: 999px;
}

.status-low .battery-fill {
    background: linear-gradient(90deg, #ffe08a 0%, #d69b00 100%);
}

.status-critical .battery-fill {
    background: linear-gradient(90deg, #ff9b9b 0%, #a61e1e 100%);
}

.status-outdated .battery-fill {
    background: linear-gradient(90deg, #c8d2df 0%, #7b8998 100%);
}

.battery-value {
    color: var(--rubino-dark);
    font-size: 20px;
    font-weight: 900;
    min-width: 58px;
    text-align: right;
}

.thermostat-time {
    color: #7b8998;
    font-size: 12px;
    margin-top: 14px;
}

@media (max-width: 1000px) {
    .thermostat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .thermostat-grid {
        grid-template-columns: 1fr;
    }

    .thermostat-filter-form {
        grid-template-columns: 1fr;
    }
}

.login-body {
    min-height: 100vh;
    margin: 0;
    background: radial-gradient(circle at top left, rgba(47, 117, 181, 0.20), transparent 34%), linear-gradient(135deg, #eef3f8 0%, #f8fbfe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #243447;
}

.login-shell {
    width: 100%;
    max-width: 560px;
    padding: 24px;
}

.login-card {
    background: #ffffff;
    border: 1px solid var(--rubino-border);
    border-radius: 26px;
    padding: 34px;
    box-shadow: 0 22px 60px rgba(31, 51, 77, 0.14);
    width: 100%;
    max-width: 520px;
}

.login-brand {
    text-align: center;
}

    .login-brand .eyebrow {
        text-align: center;
    }

    .login-brand p {
        color: #617287;
        margin: 18px 0 24px;
        text-align: center;
    }

.login-logo {
    display: block;
    width: 420px;
    max-width: 100%;
    height: auto;
    margin: 24px auto 34px auto;
    object-fit: contain;
}

.login-brand h1 {
    color: var(--rubino-dark);
    font-size: 38px;
    font-weight: 900;
    margin: 0;
}

.login-brand p {
    color: #617287;
    margin: 10px 0 24px;
}

.login-form {
    display: grid;
    gap: 16px;
}

    .login-form input {
        width: 92%;
        max-width: 360px;
        justify-self: center;
        border: 1px solid var(--rubino-border);
        border-radius: 14px;
        padding: 12px 13px;
        font-size: 15px;
        background: #f8fbfe;
        color: #243447;
        outline: none;
    }

        .login-form input:focus {
            border-color: var(--rubino-blue);
            box-shadow: 0 0 0 3px rgba(47, 117, 181, 0.14);
        }

.login-error {
    background: #f8e7e7;
    color: var(--rubino-red);
    border: 1px solid #efc1c1;
    border-radius: 14px;
    padding: 12px 14px;
    font-weight: 700;
}

.login-button {
    width: 92%;
    max-width: 360px;
    justify-self: center;
    justify-content: center;
    margin-top: 4px;
}

.login-form .form-row {
    display: grid;
    justify-items: center;
}

    .login-form .form-row label {
        width: 92%;
        max-width: 360px;
    }

.branch-form {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: 14px;
    align-items: end;
}

.api-key-card {
    border-color: #f0d596;
    background: #fffaf0;
}

.api-key-box {
    background: #1f334d;
    color: #ffffff;
    border-radius: 14px;
    padding: 16px;
    font-size: 14px;
    overflow-x: auto;
}

    .api-key-box code {
        color: #ffffff;
        font-weight: 800;
        word-break: break-all;
    }

.api-key-warning {
    margin-top: 14px;
    background: #fff3cd;
    color: #6f5200;
    border: 1px solid #f0d596;
    border-radius: 14px;
    padding: 12px 14px;
    line-height: 1.5;
}

.inline-form {
    display: inline-block;
    margin: 2px 4px 2px 0;
}

.small-action-button {
    border: 1px solid #8ebae5;
    background: #dff0ff;
    color: #174a7a;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

    .small-action-button:hover {
        background: #cfe4fb;
    }

    .small-action-button.danger-button {
        border-color: #efc1c1;
        background: #f8e7e7;
        color: var(--rubino-red);
    }

        .small-action-button.danger-button:hover {
            background: #f3d3d3;
        }

@media (max-width: 900px) {
    .branch-form {
        grid-template-columns: 1fr;
    }
}

.bar-fill.wifi-fill {
    background: linear-gradient(180deg, #9ec5fe 0%, #2f75b5 100%);
}

.bar-fill.wifi-hour-fill {
    background: linear-gradient(180deg, #c5b3ff 0%, #6f42c1 100%);
}

.reports-filter-form {
    grid-template-columns: 2fr 1fr 1fr 1.4fr auto;
}

@media (max-width: 1000px) {
    .reports-filter-form {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 650px) {
    .reports-filter-form {
        grid-template-columns: 1fr;
    }
}

.settings-form {
    display: grid;
    gap: 16px;
    max-width: 520px;
}

    .settings-form input,
    .settings-form select {
        width: 100%;
        border: 1px solid var(--rubino-border);
        border-radius: 14px;
        padding: 12px 13px;
        font-size: 15px;
        background: #f8fbfe;
        color: #243447;
        outline: none;
    }

        .settings-form input:focus,
        .settings-form select:focus {
            border-color: var(--rubino-blue);
            box-shadow: 0 0 0 3px rgba(47, 117, 181, 0.14);
        }

.password-hint {
    background: #f3f7fb;
    border: 1px solid var(--rubino-border);
    border-radius: 14px;
    padding: 12px 14px;
    color: #617287;
    font-size: 13px;
    font-weight: 700;
}

.settings-error {
    max-width: 1180px;
    margin: 18px auto 0;
}

.mini-info {
    background: #f3f7fb;
    border: 1px solid var(--rubino-border);
    border-radius: 999px;
    padding: 8px 13px;
    color: #617287;
    font-size: 13px;
    font-weight: 700;
}

    .mini-info strong {
        color: var(--rubino-dark);
    }

.branch-status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.branch-status-card {
    border: 1px solid var(--rubino-border);
    background: #f8fbfe;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 10px 24px rgba(31, 51, 77, 0.05);
}

    .branch-status-card.online {
        background: #f5fff7;
        border-color: #bce7c9;
    }

    .branch-status-card.offline {
        background: #fffaf0;
        border-color: #f0d596;
    }

    .branch-status-card.inactive {
        background: #f2f4f7;
        border-color: #d5dde6;
    }

.branch-status-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.branch-status-name {
    color: var(--rubino-dark);
    font-size: 17px;
    font-weight: 900;
}

.branch-status-code {
    color: #617287;
    font-size: 12px;
    font-weight: 800;
    margin-top: 3px;
}

.branch-status-pill {
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
    background: #eef5ff;
    color: #1f5c99;
    border: 1px solid #cfe1f5;
}

.branch-status-card.online .branch-status-pill {
    background: #e4f7ea;
    color: var(--rubino-green);
    border-color: #bce7c9;
}

.branch-status-card.offline .branch-status-pill {
    background: #fff3cd;
    color: #8a6400;
    border-color: #f0d596;
}

.branch-status-card.inactive .branch-status-pill {
    background: #e8edf3;
    color: #617287;
    border-color: #cbd5df;
}

.branch-status-time {
    color: #7b8998;
    font-size: 12px;
    margin-top: 16px;
}

    .branch-status-time strong {
        color: #344a63;
    }

.quick-link-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.quick-link-card {
    display: block;
    text-decoration: none;
    background: #f8fbfe;
    border: 1px solid var(--rubino-border);
    border-radius: 18px;
    padding: 18px;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

    .quick-link-card:hover {
        transform: translateY(-2px);
        border-color: #8ebae5;
        box-shadow: 0 12px 26px rgba(31, 51, 77, 0.10);
    }

.quick-link-title {
    color: var(--rubino-dark);
    font-size: 18px;
    font-weight: 900;
}

.quick-link-subtitle {
    color: #617287;
    font-size: 13px;
    margin-top: 5px;
}

@media (max-width: 1000px) {
    .branch-status-grid,
    .quick-link-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .branch-status-grid,
    .quick-link-grid {
        grid-template-columns: 1fr;
    }

    .mini-info {
        border-radius: 14px;
    }
}

.user-form {
    display: grid;
    grid-template-columns: 1.2fr 1.6fr 1.4fr 1fr auto;
    gap: 14px;
    align-items: end;
}

    .user-form input,
    .user-form select {
        width: 100%;
        border: 1px solid var(--rubino-border);
        border-radius: 14px;
        padding: 11px 13px;
        font-size: 14px;
        color: #243447;
        background: #f8fbfe;
        outline: none;
    }

        .user-form input:focus,
        .user-form select:focus {
            border-color: var(--rubino-blue);
            box-shadow: 0 0 0 3px rgba(47, 117, 181, 0.14);
        }

@media (max-width: 1100px) {
    .user-form {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 650px) {
    .user-form {
        grid-template-columns: 1fr;
    }
}

.systemlog-filter-form {
    grid-template-columns: 2fr 1.2fr 1.4fr auto;
}

.log-level {
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    border: 1px solid var(--rubino-border);
}

.level-debug {
    background: #eef1f5;
    color: #617287;
    border-color: #d5dde6;
}

.level-info {
    background: #eef5ff;
    color: #1f5c99;
    border-color: #cfe1f5;
}

.level-warning {
    background: #fff3cd;
    color: #8a6400;
    border-color: #f0d596;
}

.level-error {
    background: #f8e7e7;
    color: var(--rubino-red);
    border-color: #efc1c1;
}

.level-critical {
    background: #5a0f0f;
    color: #ffffff;
    border-color: #5a0f0f;
}

.log-message {
    max-width: 520px;
    word-break: break-word;
}

.log-table td {
    vertical-align: top;
}

@media (max-width: 1000px) {
    .systemlog-filter-form {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 650px) {
    .systemlog-filter-form {
        grid-template-columns: 1fr;
    }
}

.wide-metric-card {
    grid-column: span 2;
}

.metric-value.text-value {
    font-size: 18px;
    line-height: 1.25;
    color: var(--rubino-dark);
    word-break: break-word;
    margin-top: 10px;
}

@media (max-width: 900px) {
    .wide-metric-card {
        grid-column: span 1;
    }
}

.backup-hint {
    margin-top: 16px;
}

.backup-hint {
    margin-top: 16px;
}

.backup-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.backup-table {
    table-layout: fixed;
    width: 100%;
}

    .backup-table th:nth-child(1),
    .backup-table td:nth-child(1) {
        width: 22%;
    }

    .backup-table th:nth-child(2),
    .backup-table td:nth-child(2) {
        width: 16%;
    }

    .backup-table th:nth-child(3),
    .backup-table td:nth-child(3) {
        width: 22%;
    }

    .backup-table th:nth-child(4),
    .backup-table td:nth-child(4) {
        width: 9%;
    }

    .backup-table th:nth-child(5),
    .backup-table td:nth-child(5) {
        width: 21%;
    }

    .backup-table th:nth-child(6),
    .backup-table td:nth-child(6) {
        width: 10%;
    }

.backup-name {
    display: inline-block;
    max-width: 100%;
    background: #eef5ff;
    border: 1px solid #cfe1f5;
    color: #174a7a;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.backup-date {
    white-space: nowrap;
}

.backup-downloads {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.backup-download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    border: 1px solid #8ebae5;
    background: #dff0ff;
    color: #174a7a;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

    .backup-download-button:hover {
        background: #cfe4fb;
        color: #174a7a;
        text-decoration: none;
    }

.backup-size {
    color: var(--rubino-dark);
    font-weight: 900;
    white-space: nowrap;
}

.backup-path {
    display: block;
    color: #617287;
    font-size: 11px;
    line-height: 1.35;
    max-height: 42px;
    overflow: hidden;
    word-break: break-all;
}

.login-logo {
    display: block;
    max-width: 400px;
    width: 100%;
    height: auto;
    margin: 8px auto 10px auto;
    object-fit: contain;
}

.backup-delete-button {
    border: 1px solid #efc1c1;
    background: #f8e7e7;
    color: var(--rubino-red);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}

    .backup-delete-button:hover {
        background: #f3d3d3;
    }

.retention-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.retention-item {
    border: 1px solid #dbeafe;
    background: #f8fbff;
    border-radius: 18px;
    padding: 16px;
}

.retention-title {
    font-size: 13px;
    font-weight: 800;
    color: #334155;
    margin-bottom: 8px;
}

.retention-value {
    font-size: 28px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1;
    margin-bottom: 10px;
}

.retention-note {
    font-size: 12px;
    color: #64748b;
    line-height: 1.35;
}

.retention-keep-box {
    margin-top: 16px;
    border: 1px dashed #bfdbfe;
    background: #f1f7ff;
    border-radius: 18px;
    padding: 16px;
}

.retention-keep-title {
    font-size: 13px;
    font-weight: 900;
    color: #1e3a8a;
    margin-bottom: 10px;
}

.retention-keep-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    .retention-keep-list span {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        background: #ffffff;
        border: 1px solid #dbeafe;
        color: #334155;
        font-size: 12px;
        font-weight: 700;
        padding: 7px 10px;
    }

@media (max-width: 1100px) {
    .retention-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .retention-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Rubino-Infotainment Global Theme
   Ergänzung/Override für das komplette Portal
   ========================================================= */

:root {
    --rubino-dark: #17151b;
    --rubino-navy: #1d2b3e;
    --rubino-ink: #211821;
    --rubino-red: #b30018;
    --rubino-red-2: #e20d22;
    --rubino-red-dark: #71000d;
    --rubino-gold: #d7a928;
    --rubino-gold-soft: #fff3ce;
    --rubino-cream: #fffaf1;
    --rubino-paper: #ffffff;
    --rubino-soft: #f8f1e8;
    --rubino-border: #ead8c5;
    --rubino-border-strong: #d7b98e;
    --rubino-green: #0b9f3a;
    --rubino-blue: #7b1b24;
    --rubino-shadow: 0 18px 42px rgba(43, 19, 19, 0.13);
    --rubino-shadow-soft: 0 10px 26px rgba(43, 19, 19, 0.08);
}

html {
    min-height: 100%;
}

body.rubino-shell,
body {
    min-height: 100vh;
    margin: 0;
    color: #2c2630;
    background: radial-gradient(circle at 12% 4%, rgba(226, 13, 34, 0.16), transparent 28%), radial-gradient(circle at 88% 0%, rgba(215, 169, 40, 0.17), transparent 26%), linear-gradient(135deg, #fff9ef 0%, #f7efe5 38%, #eef2f6 100%);
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    margin-bottom: 0;
}

    body.rubino-shell::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.34) 45%, transparent 70%), radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.52), transparent 32%);
        opacity: 0.65;
        z-index: -1;
    }

.rubino-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: 12px 18px 8px;
    background: linear-gradient(180deg, rgba(255, 250, 241, 0.96), rgba(255, 250, 241, 0.70));
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(215, 185, 142, 0.48);
}

.rubino-navbar {
    min-height: 76px;
    border-radius: 24px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(32, 23, 26, 0.97) 0%, rgba(82, 8, 16, 0.96) 50%, rgba(23, 21, 27, 0.97) 100%);
    border: 1px solid rgba(215, 169, 40, 0.45);
    box-shadow: 0 16px 38px rgba(75, 12, 18, 0.26);
}

.rubino-nav-container {
    max-width: 1380px;
    gap: 16px;
}

.rubino-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 250px;
    color: #ffffff;
    text-decoration: none;
}

    .rubino-brand:hover {
        color: #ffffff;
    }

.rubino-brand-logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    min-height: 48px;
    padding: 4px 10px;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #fff4e2 100%);
    border: 1px solid rgba(215, 169, 40, 0.72);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.75), 0 10px 24px rgba(0,0,0,0.18);
}

.rubino-nav-logo {
    display: block;
    width: 128px;
    max-height: 42px;
    object-fit: contain;
}

.rubino-brand-text {
    display: grid;
    gap: 0;
    line-height: 1.1;
}

.rubino-brand-title {
    color: #ffffff;
    font-size: 19px;
    font-weight: 950;
    letter-spacing: 0.01em;
}

.rubino-brand-subtitle {
    color: #f5ce6a;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.rubino-nav-collapse {
    gap: 18px;
}

.rubino-nav-primary,
.rubino-nav-secondary {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rubino-nav-primary {
    flex: 1 1 auto;
}

.rubino-nav-secondary {
    justify-content: flex-end;
}

.rubino-nav-link,
.rubino-logout-link,
.rubino-user-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.16s ease;
}

.rubino-nav-link {
    color: rgba(255, 255, 255, 0.84);
    border: 1px solid transparent;
}

    .rubino-nav-link:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.10);
        border-color: rgba(255, 255, 255, 0.14);
        transform: translateY(-1px);
    }

    .rubino-nav-link.active {
        color: #2b1216;
        background: linear-gradient(135deg, #fff4d3 0%, #d7a928 100%);
        border-color: rgba(255, 244, 211, 0.86);
        box-shadow: 0 8px 18px rgba(215, 169, 40, 0.22);
    }

    .rubino-nav-link.admin-link {
        color: #ffd9df;
    }

.rubino-user-pill {
    color: #fff3ce;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(215, 169, 40, 0.30);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rubino-logout-link {
    color: #ffffff;
    background: linear-gradient(135deg, var(--rubino-red-2) 0%, var(--rubino-red-dark) 100%);
    border: 1px solid rgba(255, 210, 210, 0.36);
    box-shadow: 0 8px 20px rgba(179, 0, 24, 0.26);
}

    .rubino-logout-link:hover {
        color: #ffffff;
        filter: brightness(1.08);
        transform: translateY(-1px);
    }

.rubino-admin-divider {
    width: 1px;
    height: 28px;
    margin: 0 4px;
    background: rgba(215, 169, 40, 0.28);
}

.rubino-toggler {
    border: 1px solid rgba(215, 169, 40, 0.55);
    background: #fffaf1;
    border-radius: 14px;
}

    .rubino-toggler:focus {
        box-shadow: 0 0 0 0.2rem rgba(215, 169, 40, 0.22);
    }

.rubino-main-shell {
    width: 100%;
}

.rubino-main-content {
    max-width: 1220px;
    margin: 0 auto;
    padding: 18px 16px 54px;
}

.rubino-footer {
    border-top: 1px solid rgba(215, 185, 142, 0.52);
    background: rgba(255, 250, 241, 0.72);
    backdrop-filter: blur(14px);
    color: #6c5c52;
    padding: 16px;
}

.rubino-footer-inner {
    max-width: 1220px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 650;
}

.rubino-footer a {
    color: var(--rubino-red);
    font-weight: 800;
}

.rubino-footer-separator {
    color: var(--rubino-gold);
}

.rubino-page {
    max-width: 1180px;
    padding: 18px 0 48px;
}

.hero-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255,255,255,0.96) 0%, rgba(255,248,235,0.94) 42%, rgba(255,236,238,0.90) 100%);
    border: 1px solid rgba(215, 185, 142, 0.74);
    border-radius: 28px;
    box-shadow: var(--rubino-shadow);
}

    .hero-card::before {
        content: "RUBINO";
        position: absolute;
        right: 28px;
        bottom: -36px;
        color: rgba(179, 0, 24, 0.045);
        font-size: 132px;
        font-weight: 1000;
        letter-spacing: -0.08em;
        line-height: 1;
        pointer-events: none;
    }

    .hero-card::after {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 7px;
        background: linear-gradient(180deg, var(--rubino-gold) 0%, var(--rubino-red-2) 100%);
    }

    .hero-card > * {
        position: relative;
        z-index: 1;
    }

.eyebrow {
    color: #b78713;
    letter-spacing: 0.12em;
    font-weight: 950;
}

.hero-card h1,
.section-header h2,
.login-brand h1,
.quick-link-title,
.branch-status-name,
.thermostat-name {
    color: var(--rubino-ink);
    letter-spacing: -0.025em;
}

.hero-card h1 {
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 1000;
}

.hero-card p,
.section-header p,
.metric-subtitle,
.filter-summary,
.thermostat-time,
.branch-status-time,
.quick-link-subtitle {
    color: #75665d;
}

.hero-status,
.status-message,
.status-pill.status-ok,
.pill.ok,
.branch-status-card.online .branch-status-pill {
    background: linear-gradient(135deg, #e9faef 0%, #d4f4df 100%);
    color: var(--rubino-green);
    border-color: #afe3c0;
}

.content-card,
.metric-card,
.portal-card,
.branch-status-card,
.quick-link-card,
.thermostat-card,
.age-card,
.filter-summary,
.empty-state {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(215, 185, 142, 0.62);
    box-shadow: var(--rubino-shadow-soft);
}

.content-card,
.portal-card {
    border-radius: 24px;
}

.metric-card,
.quick-link-card,
.branch-status-card,
.thermostat-card {
    border-radius: 20px;
}

.metric-card {
    position: relative;
    overflow: hidden;
}

    .metric-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--rubino-red-2), var(--rubino-gold));
    }

.metric-title,
.retention-title,
.form-row label,
.rubino-table th {
    color: #5d4a43;
}

.metric-value,
.age-value,
.battery-value,
.backup-size,
.retention-value {
    color: var(--rubino-ink);
}

    .metric-value.success,
    .metric-value.warning,
    .metric-value.danger {
        text-shadow: none;
    }

    .metric-value.warning {
        color: #b78713;
    }

    .metric-value.danger,
    .level-error,
    .pill.error {
        color: var(--rubino-red);
    }

.rubino-button,
.small-action-button,
.backup-download-button {
    background: linear-gradient(135deg, #fff4d3 0%, #e9c65d 46%, #d7a928 100%);
    border: 1px solid #be8b19;
    color: #3a2411;
    box-shadow: 0 10px 20px rgba(215, 169, 40, 0.20);
}

    .rubino-button:hover,
    .small-action-button:hover,
    .backup-download-button:hover {
        background: linear-gradient(135deg, #fff8df 0%, #f0cd69 48%, #d09912 100%);
        color: #2b160b;
        transform: translateY(-1px);
    }

    .backup-delete-button,
    .small-action-button.danger-button {
        background: linear-gradient(135deg, #fff0f1 0%, #ffd8dc 100%);
        border-color: #ee9aa4;
        color: var(--rubino-red);
    }

        .backup-delete-button:hover,
        .small-action-button.danger-button:hover {
            background: linear-gradient(135deg, #ffe0e4 0%, #ffc5cc 100%);
        }

.form-row input,
.form-row select,
.form-row textarea,
.settings-form input,
.settings-form select,
.user-form input,
.user-form select,
.login-form input {
    background: rgba(255, 252, 247, 0.98);
    border-color: rgba(215, 185, 142, 0.78);
    color: var(--rubino-ink);
}

    .form-row input:focus,
    .form-row select:focus,
    .form-row textarea:focus,
    .settings-form input:focus,
    .settings-form select:focus,
    .user-form input:focus,
    .user-form select:focus,
    .login-form input:focus {
        border-color: var(--rubino-red-2);
        box-shadow: 0 0 0 3px rgba(226, 13, 34, 0.13);
    }

.rubino-table th {
    background: linear-gradient(135deg, #fff7e8 0%, #f4e5d2 100%);
    border-bottom-color: rgba(215, 185, 142, 0.70);
}

.rubino-table td {
    border-bottom-color: rgba(234, 216, 197, 0.70);
}

.code-badge,
.backup-name,
.thermostat-status,
.branch-status-pill,
.mini-info,
.retention-keep-list span {
    background: #fff8ea;
    color: #6d4204;
    border-color: #e2c47f;
}

.status-ok .thermostat-status,
.thermostat-card.status-ok,
.branch-status-card.online {
    background: #f4fff6;
    border-color: #b9eac6;
}

.thermostat-card.status-low,
.branch-status-card.offline,
.status-low .thermostat-status {
    background: #fff8e5;
    border-color: #edcf7d;
}

.thermostat-card.status-critical,
.status-critical .thermostat-status,
.login-error,
.settings-error {
    background: #fff1f2;
    border-color: #ef9aa4;
    color: var(--rubino-red);
}

.bar-track,
.age-bar,
.battery-shell {
    background: #eadfd2;
}

.bar-fill,
.age-bar-fill,
.bar-fill.wifi-fill {
    background: linear-gradient(180deg, #ff727d 0%, var(--rubino-red) 100%);
}

    .bar-fill.hour-fill,
    .bar-fill.wifi-hour-fill {
        background: linear-gradient(180deg, #f2d675 0%, var(--rubino-gold) 100%);
    }

.battery-fill {
    background: linear-gradient(90deg, #7ad895 0%, var(--rubino-green) 100%);
}

.login-body {
    background: radial-gradient(circle at top left, rgba(226, 13, 34, 0.24), transparent 34%), radial-gradient(circle at bottom right, rgba(215, 169, 40, 0.20), transparent 32%), linear-gradient(135deg, #fffaf1 0%, #f3e6d7 100%);
}

.login-card {
    border-color: rgba(215, 185, 142, 0.78);
    box-shadow: 0 24px 68px rgba(75, 12, 18, 0.18);
}

.login-logo {
    filter: drop-shadow(0 10px 16px rgba(75, 12, 18, 0.13));
}

.password-hint,
.backup-hint,
.retention-keep-box {
    background: rgba(255, 248, 234, 0.88);
    border-color: rgba(215, 185, 142, 0.72);
    color: #6d5b51;
}

.retention-item {
    background: rgba(255, 252, 247, 0.95);
    border-color: rgba(215, 185, 142, 0.72);
}

.retention-keep-title {
    color: var(--rubino-red-dark);
}

.level-info {
    background: #fff8ea;
    color: #6d4204;
    border-color: #e2c47f;
}

.level-warning {
    background: #fff3cd;
    color: #8a6400;
    border-color: #e5c56b;
}

.level-critical {
    background: linear-gradient(135deg, #5a0f0f 0%, #9c0012 100%);
    color: #ffffff;
    border-color: #9c0012;
}

.quick-link-card:hover,
.metric-card:hover,
.content-card:hover,
.portal-card:hover {
    border-color: rgba(226, 13, 34, 0.34);
}

@media (max-width: 1199px) {
    .rubino-navbar {
        align-items: flex-start;
    }

    .rubino-nav-collapse {
        width: 100%;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(215, 169, 40, 0.28);
    }

    .rubino-nav-primary,
    .rubino-nav-secondary {
        align-items: stretch;
        gap: 8px;
    }

    .rubino-nav-link,
    .rubino-logout-link,
    .rubino-user-pill {
        justify-content: flex-start;
        width: 100%;
    }

    .rubino-admin-divider {
        width: 100%;
        height: 1px;
        margin: 6px 0;
    }
}

@media (max-width: 700px) {
    .rubino-topbar {
        padding: 8px;
    }

    .rubino-navbar {
        border-radius: 18px;
    }

    .rubino-brand {
        min-width: auto;
    }

    .rubino-brand-logo-wrap {
        width: 118px;
    }

    .rubino-nav-logo {
        width: 100px;
    }

    .rubino-brand-text {
        display: none;
    }

    .rubino-main-content {
        padding: 12px 10px 42px;
    }

    .hero-card {
        border-radius: 22px;
    }
}

/* Rubino Header Feinschliff */
.rubino-brand-text {
    display: none !important;
}

.rubino-brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 130px !important;
    flex-shrink: 0 !important;
}

.rubino-brand-logo-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.rubino-brand-logo {
    display: block !important;
    max-height: 48px !important;
    width: auto !important;
}

.rubino-nav-main {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.rubino-nav-admin {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.rubino-topbar,
.rubino-header,
.rubino-navbar {
    max-width: 1840px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =========================================================
   Rubino Layout Zentrierung / Breiten-Fix
   ========================================================= */

/* Bootstrap-Container im Rubino-Layout breiter und sauber mittig */
body > .container,
header .container,
footer .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
}

/* Hauptinhalt sauber mittig */
main[role="main"] {
    width: 100%;
}

/* Seiteninhalt nicht nach rechts schieben */
.rubino-page {
    max-width: 1180px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Obere Rubino-Navigation sauber begrenzen und zentrieren */
.rubino-topbar,
.rubino-header,
.rubino-navbar,
.rubino-nav-shell {
    max-width: 1760px !important;
    width: calc(100% - 56px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Falls dein Header eine innere Flex-Leiste hat */
.rubino-nav-inner,
.rubino-header-inner,
.rubino-topbar-inner {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Logo links kompakt halten */
.rubino-brand {
    flex: 0 0 auto !important;
    margin-right: 18px !important;
}

/* Navigation mittig ausrichten */
.rubino-nav-main {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Admin-/Userbereich rechts, aber nicht alles nach rechts ziehen */
.rubino-nav-admin,
.rubino-nav-user {
    flex: 0 0 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Brand-Text neben Logo sicher ausblenden */
.rubino-brand-text {
    display: none !important;
}

/* Rubino-Logo kompakt */
.rubino-brand-logo {
    max-height: 46px !important;
    width: auto !important;
}

/* =========================================================
   Rubino Hauptbereich korrekt zentrieren
   ========================================================= */

.rubino-main-shell {
    width: 100%;
    max-width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

    .rubino-main-shell main {
        width: 100%;
    }

.rubino-page {
    max-width: 1180px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.rubino-shell,
.rubino-header-shell,
.rubino-nav-shell {
    max-width: 1760px !important;
    width: calc(100% - 56px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Rubino Header Rand sauber */
.rubino-topbar {
    width: 100% !important;
    max-width: none !important;
    margin: 14px 0 24px 0 !important;
    padding: 0 12px !important;
    background: transparent !important;
}

.rubino-navbar {
    max-width: none !important;
    width: 100% !important;
    margin: 0 auto !important;
    border-radius: 24px !important;
    padding: 12px 28px !important;
    background: linear-gradient(135deg, #24151c 0%, #5a1018 48%, #1b1720 100%) !important;
}

.rubino-nav-container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
}

.rubino-brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 10px 0 0 !important;
    flex: 0 0 auto !important;
}

.rubino-brand-logo-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.rubino-brand-logo {
    max-height: 52px !important;
    width: auto !important;
    display: block !important;
}

.rubino-nav-collapse {
    flex: 0 1 auto !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

.rubino-nav-primary,
.rubino-nav-secondary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.rubino-admin-divider {
    width: 1px !important;
    height: 28px !important;
    margin: 0 8px !important;
    background: rgba(218, 165, 32, 0.35) !important;
}

.rubino-user-pill {
    display: none !important;
}

.rubino-nav-link,
.rubino-logout-link {
    white-space: nowrap !important;
}

/* Hauptinhalt sauber mittig lassen */
.rubino-main-shell {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.rubino-main-content {
    width: 100% !important;
}

.rubino-page {
    max-width: 1180px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Hauptinhalt bleibt sauber mittig */
.rubino-main-shell {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.rubino-main-content {
    width: 100% !important;
}

.rubino-page {
    max-width: 1180px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.chat-broadcast-info {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    border: 1px solid rgba(218, 165, 32, 0.45);
    background: rgba(255, 248, 225, 0.78);
    color: #4a2b16;
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 800;
}

    .chat-broadcast-info span {
        color: #8a6400;
    }

/* =========================================================
   Rubino Design Korrektur: weniger rosa, mehr Rubino-Rot
   ========================================================= */

:root {
    --rubino-dark: #1b1b1f;
    --rubino-red: #b00016;
    --rubino-red-dark: #7f0010;
    --rubino-red-soft: #fff1f2;
    --rubino-gold: #d6a735;
    --rubino-border: #ead6b8;
    --rubino-green: #0b9f3a;
}

/* Hintergrund weniger rosa, mehr helles warmes Weiß */
body {
    background: radial-gradient(circle at top left, rgba(176, 0, 22, 0.10), transparent 34%), linear-gradient(135deg, #fff8ef 0%, #fffdf8 42%, #f8f4ec 100%) !important;
    color: #1f1f25 !important;
}

/* Navigation heller, nicht mehr fast schwarz */
.rubino-navbar {
    background: linear-gradient(135deg, #7f0010 0%, #b00016 42%, #66101a 100%) !important;
    border: 1px solid rgba(214, 167, 53, 0.45) !important;
    box-shadow: 0 16px 34px rgba(127, 0, 16, 0.22) !important;
}

    /* Optional: leichter Glanz in der Navi */
    .rubino-navbar::before {
        background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.16) 45%, transparent 100% ) !important;
    }

/* Nav-Links etwas klarer */
.rubino-nav-link {
    color: #fff8ef !important;
}

    .rubino-nav-link:hover {
        background: rgba(255, 255, 255, 0.14) !important;
        color: #ffffff !important;
    }

    .rubino-nav-link.active {
        background: linear-gradient(135deg, #fff2b8 0%, #d6a735 100%) !important;
        color: #3a1600 !important;
        border-color: rgba(255, 255, 255, 0.55) !important;
        box-shadow: 0 8px 18px rgba(214, 167, 53, 0.25) !important;
    }

/* Admin-Trenner dezenter */
.rubino-admin-divider {
    background: rgba(255, 226, 160, 0.35) !important;
}

/* Logout bleibt rot, aber passend */
.rubino-logout-link {
    background: linear-gradient(135deg, #e0001b 0%, #a40014 100%) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

/* Hero-Karte weniger rosa */
.hero-card {
    background: linear-gradient(135deg, #ffffff 0%, #fffaf3 55%, #fff4ee 100%) !important;
    border: 1px solid #e8cfa8 !important;
    box-shadow: 0 14px 34px rgba(127, 0, 16, 0.08) !important;
    overflow: hidden !important;
}

    /* Großes blasses RUBINO-Wasserzeichen im Hero entfernen */
    .hero-card::after,
    .hero-card::before {
        display: none !important;
        content: none !important;
    }

/* Falls das Wasserzeichen über Background gesetzt wurde */
.hero-card {
    background-image: linear-gradient(135deg, #ffffff 0%, #fffaf3 55%, #fff4ee 100%) !important;
}

/* Linker roter Akzent am Hero klarer */
.hero-card {
    border-left: 7px solid var(--rubino-red) !important;
}

/* Eyebrow mehr Rubino-Gold */
.eyebrow {
    color: #b98200 !important;
}

/* Überschriften dunkler und klarer */
.hero-card h1,
.section-header h2,
.content-card h2 {
    color: #1b1b1f !important;
}

/* Karten: weniger rosa, mehr neutral weiß mit roter Linie */
.metric-card,
.content-card {
    background: #ffffff !important;
    border-color: #ead6b8 !important;
    box-shadow: 0 10px 26px rgba(127, 0, 16, 0.06) !important;
}

.metric-card {
    border-top: 4px solid var(--rubino-red) !important;
}

    /* Alte rot/gold-Verläufe auf Karten entschärfen */
    .metric-card::before,
    .content-card::before {
        background: linear-gradient(90deg, var(--rubino-red), var(--rubino-gold)) !important;
    }

/* Buttons stärker Rubino */
.rubino-button {
    background: linear-gradient(135deg, #e0001b 0%, #a40014 100%) !important;
    border-color: #8b0011 !important;
    color: #ffffff !important;
}

    .rubino-button:hover {
        background: linear-gradient(135deg, #f00022 0%, #b00016 100%) !important;
        color: #ffffff !important;
    }

/* Inputs nicht rosa, sondern warm neutral */
.form-row select,
.form-row textarea,
.settings-form input,
.settings-form select,
.user-form input,
.user-form select {
    background: #fffdfa !important;
    border-color: #e4c99e !important;
}

    .form-row select:focus,
    .form-row textarea:focus,
    .settings-form input:focus,
    .settings-form select:focus,
    .user-form input:focus,
    .user-form select:focus {
        border-color: var(--rubino-red) !important;
        box-shadow: 0 0 0 3px rgba(176, 0, 22, 0.14) !important;
    }

/* Status grün bleibt, aber neutraler */
.hero-status {
    background: #e8f8ed !important;
    border-color: #bce7c9 !important;
    color: var(--rubino-green) !important;
}

/* =========================================================
   Bold Schließzylinder
   ========================================================= */

.bold-lock-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.bold-lock-card {
    background: #fffdfa;
    border: 1px solid var(--rubino-border);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 10px 24px rgba(127, 0, 16, 0.05);
}

    .bold-lock-card.status-ok {
        border-color: #bce7c9;
        background: #f5fff7;
    }

    .bold-lock-card.status-low {
        border-color: #f0d596;
        background: #fffaf0;
    }

    .bold-lock-card.status-critical {
        border-color: #efb8b8;
        background: #fff5f5;
    }

    .bold-lock-card.status-outdated {
        border-color: #d5dde6;
        background: #f2f4f7;
    }

    .bold-lock-card.status-unknown {
        border-color: #d5dde6;
        background: #f8fbfe;
    }

.bold-lock-card-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.bold-lock-name {
    color: var(--rubino-dark);
    font-size: 17px;
    font-weight: 900;
}

.bold-lock-branch {
    color: #617287;
    font-size: 12px;
    margin-top: 3px;
    font-weight: 700;
}

.bold-lock-status {
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 900;
    background: #eef5ff;
    color: #1f5c99;
    border: 1px solid #cfe1f5;
    white-space: nowrap;
}

.status-ok .bold-lock-status {
    background: #e4f7ea;
    color: var(--rubino-green);
    border-color: #bce7c9;
}

.status-low .bold-lock-status {
    background: #fff3cd;
    color: #8a6400;
    border-color: #f0d596;
}

.status-critical .bold-lock-status {
    background: #f8e7e7;
    color: var(--rubino-red);
    border-color: #efc1c1;
}

.status-outdated .bold-lock-status,
.status-unknown .bold-lock-status {
    background: #e8edf3;
    color: #617287;
    border-color: #cbd5df;
}

.bold-lock-details {
    display: grid;
    gap: 5px;
    margin-top: 14px;
    color: #617287;
    font-size: 12px;
    line-height: 1.35;
}

    .bold-lock-details strong {
        color: #344a63;
    }

@media (max-width: 1000px) {
    .bold-lock-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .bold-lock-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Dashboard: kompakte Bold-Sammelkachel
   ========================================================= */

.bold-dashboard-card {
    grid-column: span 2;
    display: block;
    text-decoration: none;
    color: inherit;
    min-height: 100%;
    transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

    .bold-dashboard-card:hover {
        color: inherit;
        text-decoration: none;
        transform: translateY(-2px);
        border-color: rgba(179, 0, 24, 0.38) !important;
        box-shadow: 0 16px 34px rgba(179, 0, 24, 0.12) !important;
    }

    .bold-dashboard-card::before {
        background: linear-gradient(90deg, var(--rubino-red), var(--rubino-gold), var(--rubino-green)) !important;
    }

.bold-dashboard-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.bold-dashboard-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 7px 11px;
    background: #fff8ea;
    border: 1px solid #e2c47f;
    color: #6d4204;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.bold-dashboard-statusline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

    .bold-dashboard-statusline span {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        padding: 7px 10px;
        font-size: 12px;
        font-weight: 900;
        border: 1px solid transparent;
    }

    .bold-dashboard-statusline .ok {
        background: #e4f7ea;
        color: var(--rubino-green);
        border-color: #bce7c9;
    }

    .bold-dashboard-statusline .warning {
        background: #fff3cd;
        color: #8a6400;
        border-color: #f0d596;
    }

    .bold-dashboard-statusline .danger {
        background: #f8e7e7;
        color: var(--rubino-red);
        border-color: #efc1c1;
    }

@media (max-width: 900px) {
    .bold-dashboard-card {
        grid-column: span 1;
    }
}

/* =========================================================
   Dashboard: kompakte Sammelkacheln für Thermostate + Bold
   ========================================================= */

.summary-dashboard-card {
    grid-column: span 2;
    display: block;
    text-decoration: none;
    color: inherit;
    min-height: 100%;
    transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

    .summary-dashboard-card:hover {
        color: inherit;
        text-decoration: none;
        transform: translateY(-2px);
        border-color: rgba(179, 0, 24, 0.38) !important;
        box-shadow: 0 16px 34px rgba(179, 0, 24, 0.12) !important;
    }

    .summary-dashboard-card::before {
        background: linear-gradient(90deg, var(--rubino-red), var(--rubino-gold), var(--rubino-green)) !important;
    }

.thermostat-dashboard-card::before {
    background: linear-gradient(90deg, var(--rubino-red), var(--rubino-gold), #2f75b5) !important;
}

.summary-dashboard-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.summary-dashboard-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 7px 11px;
    background: #fff8ea;
    border: 1px solid #e2c47f;
    color: #6d4204;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.summary-dashboard-statusline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

    .summary-dashboard-statusline span {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        padding: 7px 10px;
        font-size: 12px;
        font-weight: 900;
        border: 1px solid transparent;
    }

    .summary-dashboard-statusline .ok {
        background: #e4f7ea;
        color: var(--rubino-green);
        border-color: #bce7c9;
    }

    .summary-dashboard-statusline .warning {
        background: #fff3cd;
        color: #8a6400;
        border-color: #f0d596;
    }

    .summary-dashboard-statusline .danger {
        background: #f8e7e7;
        color: var(--rubino-red);
        border-color: #efc1c1;
    }

/* Kompatibilität, falls die vorherigen Bold-Klassen noch im CSS stehen */
.bold-dashboard-card {
    grid-column: span 2;
}

.bold-dashboard-top {
    display: contents;
}

.bold-dashboard-pill,
.bold-dashboard-statusline {
    display: none;
}

@media (max-width: 900px) {
    .summary-dashboard-card,
    .bold-dashboard-card {
        grid-column: span 1;
    }
}

/* =========================================================
   Dashboard: Thermostat-Status "veraltet" separat anzeigen
   ========================================================= */

.summary-dashboard-statusline .outdated {
    background: #e8edf3;
    color: #617287;
    border-color: #cbd5df;
}

.thermostat-dashboard-card .summary-dashboard-statusline {
    gap: 7px;
}

/* =========================================================
   Dashboard: Hauptwert für veraltete Thermostate
   ========================================================= */

.metric-value.outdated-main {
    color: #617287;
}

/* =========================================================
   Privacy / Interner Datenschutzhinweis
   ========================================================= */

.privacy-card {
    line-height: 1.65;
}

.privacy-note {
    background: #fff8ea;
    border: 1px solid #e2c47f;
    color: #6d4204;
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 22px;
    font-size: 14px;
}

.privacy-section {
    padding: 18px 0;
    border-top: 1px solid rgba(215, 185, 142, 0.45);
}

    .privacy-section:first-of-type {
        border-top: none;
    }

    .privacy-section h3 {
        color: var(--rubino-ink);
        font-size: 21px;
        font-weight: 950;
        margin: 0 0 10px;
    }

    .privacy-section p {
        color: #5f504a;
        margin: 8px 0;
    }

    .privacy-section ul {
        margin: 12px 0 0;
        padding-left: 22px;
        color: #5f504a;
    }

    .privacy-section li {
        margin: 6px 0;
    }

.privacy-contact-box {
    background: rgba(255, 250, 241, 0.95);
    border: 1px solid rgba(215, 185, 142, 0.70);
    border-radius: 16px;
    padding: 16px;
    color: #5f504a;
}

/* =========================================================
   Systemprotokoll: Filter, Schnellfilter und Kartenliste
   ========================================================= */

.systemlog-filter-form {
    grid-template-columns: 1.15fr 0.8fr 1fr 1fr auto;
}

.systemlog-quickfilters {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 14px 0 0;
}

.quick-filter-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 8px 12px;
    background: #fff8ea;
    border: 1px solid rgba(215, 185, 142, 0.85);
    color: #6d4204;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

    .quick-filter-pill:hover {
        color: #6d4204;
        text-decoration: none;
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(109, 66, 4, 0.10);
    }

    .quick-filter-pill.active {
        background: linear-gradient(135deg, #fff4c8, #e2bc47);
        border-color: #c69a24;
        color: #321909;
    }

    .quick-filter-pill.danger {
        background: #fff1f1;
        border-color: #efc1c1;
        color: var(--rubino-red);
    }

        .quick-filter-pill.danger.active {
            background: linear-gradient(135deg, #c9001c, #8f0014);
            border-color: #8f0014;
            color: #fff;
        }

.systemlog-card {
    overflow: hidden;
}

.systemlog-list {
    display: grid;
    gap: 10px;
}

.systemlog-entry {
    position: relative;
    border: 1px solid rgba(215, 185, 142, 0.50);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    padding: 14px 16px;
    box-shadow: 0 10px 22px rgba(51, 26, 17, 0.05);
    overflow: hidden;
}

    .systemlog-entry::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 5px;
        background: #94a3b8;
    }

    .systemlog-entry.level-info::before,
    .systemlog-entry.level-debug::before {
        background: #64748b;
    }

    .systemlog-entry.level-warning::before {
        background: var(--rubino-gold);
    }

    .systemlog-entry.level-error::before {
        background: var(--rubino-red);
    }

    .systemlog-entry.level-critical::before {
        background: #5c000b;
    }

    .systemlog-entry.level-warning {
        background: linear-gradient(135deg, rgba(255, 248, 234, 0.96), rgba(255, 255, 255, 0.92));
        border-color: rgba(226, 188, 71, 0.65);
    }

    .systemlog-entry.level-error,
    .systemlog-entry.level-critical {
        background: linear-gradient(135deg, rgba(255, 241, 241, 0.96), rgba(255, 255, 255, 0.92));
        border-color: rgba(201, 0, 28, 0.35);
    }

.systemlog-entry-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.systemlog-category,
.systemlog-source {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid rgba(215, 185, 142, 0.65);
    background: #fff8ea;
    color: #6d4204;
}

.systemlog-source {
    background: #f3f6f9;
    border-color: #d7e0ea;
    color: #526174;
}

.systemlog-message {
    color: var(--rubino-ink);
    font-size: 14px;
    line-height: 1.45;
    word-break: break-word;
}

.systemlog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
    color: #7a6a62;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 1100px) {
    .systemlog-filter-form {
        grid-template-columns: 1fr 1fr;
    }

        .systemlog-filter-form .filter-actions {
            grid-column: span 2;
        }
}

@media (max-width: 700px) {
    .systemlog-filter-form {
        grid-template-columns: 1fr;
    }

        .systemlog-filter-form .filter-actions {
            grid-column: span 1;
        }
}

/* =========================================================
   Filialen: Löschen-Button und Fehlermeldung
   ========================================================= */

.danger-status-message {
    background: #f8e7e7 !important;
    border-color: #efc1c1 !important;
    color: var(--rubino-red) !important;
}

.branch-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

    .branch-actions .inline-form {
        display: inline-flex;
        margin: 0;
    }

.small-action-button.delete-button {
    background: #f8e7e7;
    border-color: #efc1c1;
    color: var(--rubino-red);
}

    .small-action-button.delete-button:hover {
        background: var(--rubino-red);
        border-color: var(--rubino-red);
        color: #ffffff;
    }

/* =========================================================
   Benutzerverwaltung: Rollen, Aktionen und Löschen
   ========================================================= */

.users-table td {
    vertical-align: middle;
}

.user-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

    .user-actions .inline-form,
    .role-inline-form {
        display: inline-flex;
        gap: 7px;
        align-items: center;
        margin: 0;
    }

.role-select {
    min-width: 112px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid rgba(215, 185, 142, 0.85);
    background: #fffaf1;
    color: var(--rubino-ink);
    padding: 0 12px;
    font-weight: 800;
    font-size: 12px;
}

.user-self-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 7px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e4f7ea;
    border: 1px solid #bce7c9;
    color: var(--rubino-green);
    font-size: 11px;
    font-weight: 900;
}

.small-action-button.delete-button {
    background: #f8e7e7;
    border-color: #efc1c1;
    color: var(--rubino-red);
}

    .small-action-button.delete-button:hover:not(:disabled) {
        background: var(--rubino-red);
        border-color: var(--rubino-red);
        color: #ffffff;
    }

.small-action-button:disabled,
.role-select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* =========================================================
   Einstellungen: Datenaufbewahrung optisch entzerren
   ========================================================= */

.retention-section,
.data-retention-section {
    padding: 34px 38px !important;
}

    .retention-section .eyebrow,
    .data-retention-section .eyebrow {
        display: block;
        margin-bottom: 10px;
    }

    .retention-section h2,
    .data-retention-section h2 {
        margin-top: 0;
        margin-bottom: 10px;
        font-size: 30px;
    }

    .retention-section > p,
    .data-retention-section > p {
        margin-bottom: 18px;
        color: #6f5f58;
    }

.retention-active,
.cleanup-active,
.retention-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin: 8px 0 22px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #e4f7ea;
    border: 1px solid #bce7c9;
    color: var(--rubino-green);
    font-size: 13px;
    font-weight: 900;
}

.retention-grid,
.cleanup-grid,
.data-retention-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
    margin-bottom: 22px;
}

.retention-card,
.cleanup-card,
.data-retention-card {
    padding: 22px 18px !important;
    min-height: 126px;
}

    .retention-card h3,
    .cleanup-card h3,
    .data-retention-card h3 {
        margin-bottom: 10px;
    }

.retention-value,
.cleanup-value,
.data-retention-value {
    display: block;
    margin: 6px 0 8px;
    font-size: 28px;
    font-weight: 950;
}

.retention-keep-box,
.not-deleted-box,
.cleanup-exclude-box {
    margin-top: 22px;
    padding: 20px !important;
    border-radius: 18px;
}

    .retention-keep-box strong,
    .not-deleted-box strong,
    .cleanup-exclude-box strong {
        display: block;
        margin-bottom: 12px;
    }

    .retention-keep-box .pill,
    .not-deleted-box .pill,
    .cleanup-exclude-box .pill {
        margin: 4px 5px 4px 0;
    }

@media (max-width: 1100px) {
    .retention-grid,
    .cleanup-grid,
    .data-retention-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .retention-section,
    .data-retention-section {
        padding: 24px 20px !important;
    }

    .retention-grid,
    .cleanup-grid,
    .data-retention-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Einstellungen: Datenaufbewahrung entzerrt
   ========================================================= */

.retention-card-wide {
    padding: 34px 38px !important;
}

.retention-header {
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 22px;
}

    .retention-header h2 {
        margin-top: 2px;
        margin-bottom: 8px;
        font-size: 30px;
    }

    .retention-header p {
        margin: 0;
        color: #6f5f58;
    }

.retention-status-pill {
    flex: 0 0 auto;
    margin-top: 4px;
}

.retention-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 20px 0 22px;
}

.retention-item {
    position: relative;
    padding: 22px 18px !important;
    min-height: 132px;
    border-radius: 18px;
    border: 1px solid rgba(215, 185, 142, 0.75);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 22px rgba(51, 26, 17, 0.045);
    overflow: hidden;
}

    .retention-item::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 4px;
        background: linear-gradient(90deg, var(--rubino-red), var(--rubino-gold));
    }

.retention-title {
    color: var(--rubino-ink);
    font-size: 14px;
    font-weight: 950;
    margin-bottom: 10px;
}

.retention-value {
    display: block;
    color: var(--rubino-ink);
    font-size: 30px;
    line-height: 1;
    font-weight: 950;
    margin: 4px 0 12px;
}

.retention-note {
    color: #5f6f87;
    font-size: 13px;
    line-height: 1.35;
}

.retention-keep-box {
    margin-top: 24px;
    padding: 20px 22px !important;
    border-radius: 18px;
    border: 1px dashed rgba(215, 185, 142, 0.95);
    background: #fff8ea;
}

.retention-keep-title {
    color: var(--rubino-red);
    font-size: 14px;
    font-weight: 950;
    margin-bottom: 12px;
}

.retention-keep-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

    .retention-keep-list span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        padding: 8px 12px;
        background: #fffaf1;
        border: 1px solid rgba(215, 185, 142, 0.85);
        color: #6d4204;
        font-size: 12px;
        font-weight: 900;
    }

@media (max-width: 1150px) {
    .retention-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .retention-card-wide {
        padding: 24px 20px !important;
    }

    .retention-header {
        flex-direction: column;
    }

    .retention-grid {
        grid-template-columns: 1fr;
    }
}