/* FriesenWerk Brand Colors:
   Primary:   #FFCC00 (yellow/gold)
   Secondary: #1D1D1B (near-black)
   Accent:    #D53192 (magenta)
   Text:      #FFFFFF (white)
   Dark BGs:  #222222, #2A2A2A
*/

/* ===================== Logo ===================== */
/* The same logo component is used in both the portal and emails.
   Emails have a white background and don't load client CSS files,
   so the SVG keeps its original dark fills (#1d1f1c and #161616) there.
   The portal uses a dark theme (#1D1D1B), where dark fills would be invisible.
   Instead of maintaining two separate logo files, we override the fills via CSS. */
path[fill="#1d1f1c"], path[fill="#161616"] {
    fill: #ffffff;
}

/* ===================== Page & Body ===================== */
body {
    background-color: #1D1D1B;
    color: #fff;
}

/* ===================== Links ===================== */
a, .btn-link {
    color: #fff;
    text-decoration: none !important;
}

a:hover, a:focus, .btn-link:hover, .btn-link:focus {
    background-color: transparent;
    color: #FFCC00;
    text-decoration: underline !important;
}

a.btn:hover, a.btn:focus,
a.nav-link:hover, a.nav-link:focus,
a.dropdown-item:hover, a.dropdown-item:focus,
a.navbar-brand:hover, a.navbar-brand:focus,
a.breadcrumb-link:hover, a.breadcrumb-link:focus,
a.list-elements-button:hover, a.list-elements-button:focus,
a#link-logo-guest:hover, a#link-logo-guest:focus {
    text-decoration: none !important;
}

a#link-logo-guest:hover {
    background-color: transparent;
}

a#link-logo-guest:hover img {
    background-color: transparent;
}

/* ===================== Navigation ===================== */
header {
    background-color: #222222;
}

#main-nav .nav-link {
    color: #ccc;
    font-size: 1rem;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    transition: color 0.2s ease, background-color 0.2s ease;
    text-decoration: none;
}

#main-nav .nav-link svg {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

#main-nav .nav-link:hover svg {
    opacity: 1;
}

#main-nav .active.nav-link, #main-nav .active.dropdown-item {
    color: #FFCC00;
    background-color: transparent;
    font-weight: bolder;
}

#main-nav .active.nav-link svg {
    opacity: 1;
}

#main-nav a.nav-link:hover, #main-nav a.nav-link:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    text-decoration: none;
}

#main-nav .dropdown-menu {
    background-color: #2A2A2A;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    padding: 0.4rem 0;
    margin-top: 0.3rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

#main-nav .dropdown-item {
    color: #ccc;
    padding: 0.5rem 1rem;
    transition: color 0.2s ease, background-color 0.2s ease;
    text-decoration: none;
}

#main-nav .dropdown-item:hover, #main-nav .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    text-decoration: none;
}

#main-nav .dropdown-item.active {
    color: #FFCC00;
    background-color: rgba(255, 204, 0, 0.1);
}

/* ===================== Mobile Navigation ===================== */
#mobile-nav {
    background-color: #222222 !important;
    border-top-color: #333 !important;
}

/* Brand the hamburger toggler: rounded, yellow bars, keyboard-only focus ring */
#mobile-nav .navbar-toggler {
    color: #FFCC00;                    /* burger bars inherit this via currentColor */
    border: 1px solid #3a3a3a;
    border-radius: 10px;
    padding: 0.4rem 0.6rem;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Only on real-pointer (mouse) devices — otherwise the hover state "sticks"
   on touch screens after a tap and looks like the button stays active. */
@media (hover: hover) {
    #mobile-nav .navbar-toggler:hover {
        border-color: #FFCC00;
        background-color: rgba(255, 204, 0, 0.08);
    }
}

/* Keyboard users get the yellow ring; a tap (:focus without :focus-visible)
   gets none, so it no longer stays highlighted after opening the menu. */
#mobile-nav .navbar-toggler:focus {
    box-shadow: none;
}

#mobile-nav .navbar-toggler:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(255, 204, 0, 0.25);
}

/* Breathing room around the expanded panel */
#mobile-nav .navbar-collapse {
    margin-top: 0.75rem;
}

/* Each section turns into a single rounded, clipped card */
#mobile-nav .nav-item > .border {
    border: 1px solid #333 !important;
    border-radius: 14px;
    overflow: hidden;
    background-color: #2A2A2A;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* Normalise every Bootstrap button variant into one consistent menu row */
#mobile-nav .nav-item .btn {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.95rem 1.1rem !important;
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #333 !important;
    border-radius: 0 !important;
    color: #f1f1f1 !important;
    font-size: 1.05rem;
    font-weight: 500;
    text-align: left;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

/* Drop the divider on the last row of each card */
#mobile-nav .nav-item .btn:last-child {
    border-bottom: 0 !important;
}

/* Consistent, brand-coloured icons */
#mobile-nav .nav-item .btn svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0 !important;
    color: #FFCC00;
    fill: #FFCC00;
}

/* Hover / focus: subtle lift with the brand magenta accent (matches list rows) */
#mobile-nav .nav-item .btn:hover,
#mobile-nav .nav-item .btn:focus {
    background-color: #353535 !important;
    color: #fff !important;
    box-shadow: inset 4px 0 0 0 #D53192;
    text-decoration: none;
}

/* Unread-message badge pushed to the trailing edge of its row */
#mobile-nav .nav-item .btn .badge {
    margin-left: auto;
}

/* WhatsApp keeps its recognisable green icon */
#mobile-nav .nav-item .btn-success svg {
    color: #25D366;
    fill: #25D366;
}

/* Logout stays danger-tinted */
#mobile-nav .nav-item .btn-outline-danger,
#mobile-nav .nav-item .btn-outline-danger svg {
    color: #ff6b6b !important;
    fill: #ff6b6b;
}

#mobile-nav .nav-item .btn-outline-danger:hover,
#mobile-nav .nav-item .btn-outline-danger:focus {
    background-color: rgba(220, 53, 69, 0.12) !important;
    box-shadow: inset 4px 0 0 0 #dc3545;
}

#mobile-nav a {
    color: #fff;
}

/* ===================== Breadcrumb ===================== */
#breadcrumb {
    background-color: #222222;
}

/* ===================== Cards ===================== */
.card {
    background-color: #2A2A2A;
    border-color: #333;
    color: #fff;
}

.card-header {
    background-color: #222222 !important;
    color: #fff;
    border-bottom-color: #333;
}

.card-footer {
    background-color: #2A2A2A !important;
    border-top-color: #333;
}

.info-head {
    color: #ccc;
}

/* ===================== Icons ===================== */
.info-and-action-card svg {
    color: #FFCC00;
    fill: #FFCC00;
}

.card-header svg {
    color: #FFCC00;
    fill: #FFCC00;
}

i.bi {
    color: #FFCC00;
}

/* ===================== Buttons ===================== */
.customer-button {
    background-color: #D53192;
    color: #fff;
    border-radius: 50px;
    border: 2px solid #D53192;
    text-decoration: none;
}

.customer-button:hover {
    background-color: #b22876;
    color: #fff;
    border-color: #b22876;
    text-decoration: none;
}

.toggle-offcanvas-button {
    background-color: #333;
    color: #ccc;
    border-color: #444;
}

.toggle-offcanvas-button:hover {
    background-color: #3a3a3a;
    text-decoration: none;
    color: #fff;
    border-color: #555;
}

/* ===================== Tables ===================== */
.table {
    --bs-table-bg: #2A2A2A;
    --bs-table-striped-bg: #252525;
    --bs-table-striped-color: #fff;
    --bs-table-hover-bg: #333333;
    --bs-table-hover-color: #fff;
    --bs-table-color: #fff;
    --bs-table-border-color: #444;
    color: #fff;
}

.thead, .table > :not(caption) > * > * {
    background-color: #2A2A2A !important;
    color: #fff;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #252525;
    color: #fff;
}

.table-hover > tbody > tr:hover > * {
    background-color: #333 !important;
    color: #fff;
}

/* ===================== Forms ===================== */
.form-control, .form-select {
    background-color: #333;
    color: #fff;
    border-color: #444;
}

.form-control::placeholder {
    color: #aaa;
}

.form-text {
    color: #999;
}

.text-muted {
    color: #aaa !important;
}

.form-control:focus, .form-select:focus {
    background-color: #3a3a3a;
    color: #fff;
    border-color: #FFCC00;
    box-shadow: 0 0 0 0.25rem rgba(255, 204, 0, 0.25);
}

.form-check-input {
    background-color: #333;
    border-color: #555;
}

.form-check-input:focus {
    border-color: #FFCC00;
    box-shadow: 0 0 0 0.25rem rgba(255, 204, 0, 0.25);
}

.form-check-input:checked {
    background-color: #FFCC00;
    border-color: #FFCC00;
}

.form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231D1D1B' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked[type="radio"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%231D1D1B'/%3e%3c/svg%3e");
}

.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23888'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231D1D1B'/%3e%3c/svg%3e");
}

/* ===================== Offcanvas ===================== */
.offcanvas {
    background-color: #1D1D1B;
    color: #fff;
}

.offcanvas-header {
    background-color: #222222 !important;
    border-bottom-color: #333 !important;
    color: #fff;
}

.offcanvas-title {
    color: #fff;
}

.btn-close {
    filter: invert(1);
}

/* ===================== Dropdowns ===================== */
.own-user-info .dropdown-menu {
    background-color: #2A2A2A;
    border-color: #333;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
}

.own-user-info .dropdown-item {
    color: #fff;
}

.own-user-info .dropdown-item:hover, .own-user-info .dropdown-item:active {
    background-color: #333;
    color: #fff;
}

.own-user-info .user-info {
    color: #ccc;
    border-bottom-color: #444;
}

.own-user-info .user-email {
    color: #999;
}

/* ===================== Modals ===================== */
.modal-content {
    background-color: #2A2A2A;
    color: #fff;
    border-color: #333;
}

.modal-header {
    border-bottom-color: #333;
}

.modal-footer {
    border-top-color: #333;
}

/* ===================== List Groups ===================== */
.list-group-item {
    background-color: #333;
    color: #fff;
    border-color: #444;
}

/* Buttons without a Bootstrap color variant (e.g. plain .btn) set their own
   --bs-btn-color instead of inheriting the parent's color, so on the dark
   .list-group-item background they render with near-black text and become
   hard to read. Force them to white here. */
.list-group-item .btn {
    color: #fff;
}

.list-group-item.border {
    border-color: #444 !important;
}

.list-group-item-action {
    color: #fff;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.list-group-item-action:not(.active):hover,
.list-group-item-action:not(.active):focus {
    background-color: #3a3a3a;
    color: #fff;
    box-shadow: inset 4px 0 0 0 #D53192;
}

.list-group-item-action .list-elements-button {
    color: #fff;
}

.list-group-item-action:hover .list-elements-button,
.list-group-item-action:focus .list-elements-button {
    color: #fff;
}

/* ===================== Footer ===================== */
footer {
    color: #999;
}

footer .nav a {
    color: #fff;
    text-decoration: none;
}

footer .nav a:hover, footer .nav a:focus {
    color: #FFCC00;
    background-color: transparent;
    text-decoration: none;
}

footer .border-bottom {
    border-bottom-color: #333 !important;
}

/* ===================== Chat ===================== */
#mailbox-chat .chat-message-company .card {
    background-color: #333;
    border-color: #444;
    border-left: 4px solid #FFCC00;
    color: #fff;
}

#mailbox-chat .chat-message-customer .card {
    background-color: #2A2A2A;
    border-color: #444;
    border-right: 4px solid #D53192;
    color: #fff;
}

#mailbox-chat .chat-message-company .card-header {
    background-color: #2A2A2A !important;
    border-bottom-color: #444;
    color: #fff;
}

#mailbox-chat .chat-message-customer .card-header {
    background-color: #333 !important;
    border-bottom-color: #444;
    color: #fff;
}

#mailbox-chat .chat-message-company .card-body,
#mailbox-chat .chat-message-customer .card-body {
    color: #ddd;
}

#mailbox-chat .chat-message-company .card-body strong,
#mailbox-chat .chat-message-customer .card-body strong {
    color: #fff;
}

#mailbox-chat .chat-message-company .card-footer,
#mailbox-chat .chat-message-customer .card-footer {
    background-color: #2A2A2A !important;
    border-top-color: #444;
    color: #888;
}

#mailbox-chat .card-body a {
    color: #fff !important;
}

#mailbox-chat .card-body a:hover,
#mailbox-chat .card-body a:focus {
    color: #FFCC00;
}

#mailbox-chat .text-muted {
    color: #888 !important;
}

#mailbox-chat .card-body p,
#mailbox-chat .card-body ul,
#mailbox-chat .card-body li {
    color: #ddd;
}

/* ===================== Code ===================== */
/* The Zählernummer in the Zählerstände offcanvas is rendered as
   <code class="text-dark">. Bootstrap's text-dark is invisible on
   the dark FriesenWerk background — force it to white. */
code, code.text-dark {
    color: #fff !important;
}

/* ===================== Misc ===================== */
.bg-light {
    background-color: #222222 !important;
}

.border-bottom {
    border-bottom-color: #333 !important;
}

.text-center {
    color: #ccc;
}

.breadcrumb-link {
    color: #fff;
}

/* Slider */
#installment_slider::-webkit-slider-thumb {
    background-color: #D53192 !important;
}
#installment_slider::-moz-range-thumb {
    background-color: #D53192 !important;
}
#installment_slider::-ms-thumb {
    background-color: #D53192 !important;
}

/* ===================== Zählerstände Offcanvas =====================
   Dedicated, ID-scoped redesign of the meter-readings panel. Scoped to
   #meterCountsOffcanvas so the generic .offcanvas / .table rules above keep
   theming the other offcanvases (files, payments) unchanged. */

/* Panel: full-height depth gradient, soft left edge + shadow.
   The inline width:600px stays on desktop; collapse to full width on phones. */
#meterCountsOffcanvas {
    background: linear-gradient(180deg, #242421 0%, #1D1D1B 240px);
    border-left: 1px solid #333;
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.45);
}

@media (max-width: 575.98px) {
    #meterCountsOffcanvas {
        width: 100% !important;
        max-width: 100%;
    }
}

/* Header: roomier, with a yellow accent fading out along the bottom edge. */
#meterCountsOffcanvas .offcanvas-header {
    position: relative;
    padding: 1.4rem 1.5rem;
    background: #222 !important;
    border-bottom: 1px solid #303030 !important;
}

#meterCountsOffcanvas .offcanvas-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, #FFCC00 0%, rgba(255, 204, 0, 0) 60%);
}

/* Title: flex row with the speedometer in a rounded, tinted icon badge. */
#meterCountsOffcanvas .offcanvas-title {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
}

/* The speedometer glyph lives here (not in the shared blade) so it shows only
   for FriesenWerk — other clients get the bare "Zählerstände" title text.
   Rendered as a background-image data URI tinted to the brand yellow. */
#meterCountsOffcanvas .offcanvas-title::before {
    content: "";
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0.5rem;
    box-sizing: content-box;
    background-color: rgba(255, 204, 0, 0.12);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFCC00' viewBox='0 0 16 16'%3e%3cpath d='M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4M3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707M2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10m9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5m.754-4.246a.39.39 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.39.39 0 0 0-.029-.518z'/%3e%3cpath fill-rule='evenodd' d='M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A8 8 0 0 1 0 10m8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.35rem 1.35rem;
    border: 1px solid rgba(255, 204, 0, 0.25);
    border-radius: 12px;
}

#meterCountsOffcanvas .btn-close {
    padding: 0.7rem;
    border-radius: 8px;
    opacity: 0.55;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

#meterCountsOffcanvas .btn-close:hover,
#meterCountsOffcanvas .btn-close:focus {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.08);
}

#meterCountsOffcanvas .offcanvas-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

/* Table reset: drop Bootstrap's forced cell backgrounds and the zebra striping
   in favour of airy rows with hairline dividers. */
#meterCountsOffcanvas .table {
    --bs-table-bg: transparent;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: #fff;
}

#meterCountsOffcanvas .table > :not(caption) > * > * {
    background: transparent !important;
    border: 0;
    box-shadow: none;
}

#meterCountsOffcanvas .table-striped > tbody > tr:nth-of-type(odd) > * {
    background: transparent !important;
}

/* Column headers: small uppercase labels in muted grey. */
#meterCountsOffcanvas thead th {
    padding: 0.4rem 0.75rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8c8c87;
    white-space: nowrap;
    vertical-align: bottom;
}

/* Divider sits under the last header row (works for both the single-row ET
   header and the two-row HT/NT header). */
#meterCountsOffcanvas thead tr:last-child > th {
    border-bottom: 1px solid #3a3a38 !important;
}

#meterCountsOffcanvas thead tr.table-secondary > th {
    padding-top: 0.3rem;
}

/* HT / NT sub-labels become small yellow pills. */
#meterCountsOffcanvas thead tr.table-secondary abbr[title] {
    display: inline-block;
    padding: 0.12rem 0.55rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
    color: #FFCC00;
    background: rgba(255, 204, 0, 0.10);
    border: 1px solid rgba(255, 204, 0, 0.22);
    border-radius: 999px;
    cursor: help;
}

/* Body rows: generous spacing, hairline dividers, subtle hover. */
#meterCountsOffcanvas tbody td {
    padding: 0.85rem 0.75rem;
    vertical-align: middle;
    font-size: 0.92rem;
    color: #e8e8e3;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

#meterCountsOffcanvas tbody tr:last-child td {
    border-bottom: 0 !important;
}

#meterCountsOffcanvas .table-hover > tbody > tr:hover > * {
    background: rgba(255, 255, 255, 0.035) !important;
    color: #fff;
}

/* Date column: white and prominent. */
#meterCountsOffcanvas tbody td:first-child {
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}

/* Reading values: bold, tabular figures so digits line up column to column. */
#meterCountsOffcanvas tbody td.text-center {
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Right-align the Zählerstand column (values + its HT/NT/group headers).
   Numeric data reads better flush-right, and with tabular figures the place
   values line up cleanly down the column. Scoped to .text-center cells
   inside the table only, so unrelated .text-center elements (e.g. the
   empty-state panel) keep their intended centered alignment. */
#meterCountsOffcanvas .table .text-center {
    text-align: right !important;
}

/* Meter number: a quiet monospace chip instead of raw <code>. */
#meterCountsOffcanvas tbody code {
    padding: 0.18rem 0.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    color: #d7d7d2 !important;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
}

/* Reading kind (Ableseart): muted supporting text. */
#meterCountsOffcanvas tbody td:last-child {
    font-size: 0.85rem;
    color: #aaa9a3;
}

/* Empty state: quiet, centered, with the icon in a faint badge. */
#meterCountsOffcanvas .meter-counts-empty {
    color: #8c8c87 !important;
}

#meterCountsOffcanvas .meter-counts-empty-icon {
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto;
    color: rgba(255, 204, 0, 0.65);
    background: rgba(255, 204, 0, 0.08);
    border: 1px solid rgba(255, 204, 0, 0.18);
    border-radius: 16px;
}

#meterCountsOffcanvas .meter-counts-empty-title {
    color: #fff;
}

/* Slim, themed scrollbar for the body. */
#meterCountsOffcanvas .offcanvas-body::-webkit-scrollbar {
    width: 10px;
}

#meterCountsOffcanvas .offcanvas-body::-webkit-scrollbar-thumb {
    background: #3a3a38;
    border: 2px solid #1D1D1B;
    border-radius: 10px;
}

#meterCountsOffcanvas .offcanvas-body::-webkit-scrollbar-thumb:hover {
    background: #4a4a46;
}

/* ===================== Anschreiben Offcanvas =====================
   ID-scoped redesign of the contract-files panel. Shares the visual language
   of #meterCountsOffcanvas so the two data panels read as a set. Scoped to
   #contractFilesOffcanvas; the generic .offcanvas / .list-group rules above
   keep theming the other offcanvases (payments) unchanged. */

/* Panel: full-height depth gradient, soft left edge + shadow. The inline
   width:600px stays on desktop; collapse to full width on phones. */
#contractFilesOffcanvas {
    background: linear-gradient(180deg, #242421 0%, #1D1D1B 240px);
    border-left: 1px solid #333;
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.45);
}

@media (max-width: 575.98px) {
    #contractFilesOffcanvas {
        width: 100% !important;
        max-width: 100%;
    }
}

/* Header: roomier, with a yellow accent fading out along the bottom edge. */
#contractFilesOffcanvas .offcanvas-header {
    position: relative;
    padding: 1.4rem 1.5rem;
    background: #222 !important;
    border-bottom: 1px solid #303030 !important;
}

#contractFilesOffcanvas .offcanvas-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, #FFCC00 0%, rgba(255, 204, 0, 0) 60%);
}

/* Title: white, tight tracking; the envelope sits in a tinted rounded badge. */
/* Title: flex row with the envelope in a rounded, tinted icon badge. The badge
   is a ::before on the title itself, so align-items centres it against the text
   line directly (no font-dependent nudging needed). */
#contractFilesOffcanvas .offcanvas-title {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0;
    letter-spacing: -0.01em;
    color: #fff;
}

/* The envelope glyph lives here (not in the shared blade) so it shows only for
   FriesenWerk. Rendered as a background-image data URI tinted to the brand yellow. */
#contractFilesOffcanvas .offcanvas-title::before {
    content: "";
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0.5rem;
    box-sizing: content-box;
    background-color: rgba(255, 204, 0, 0.12);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFCC00' viewBox='0 0 16 16'%3e%3cpath d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.35rem 1.35rem;
    border: 1px solid rgba(255, 204, 0, 0.25);
    border-radius: 12px;
}

#contractFilesOffcanvas .btn-close {
    padding: 0.7rem;
    border-radius: 8px;
    opacity: 0.55;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

#contractFilesOffcanvas .btn-close:hover,
#contractFilesOffcanvas .btn-close:focus {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.08);
}

#contractFilesOffcanvas .offcanvas-body {
    padding: 1rem 1.5rem 1.5rem;
}

/* List rows: drop the blade's neutral-theme card border/radius/margin in favour
   of flush rows with hairline dividers on the dark panel. */
#contractFilesOffcanvas .contract-file {
    position: relative;
    margin: 0 !important;
    padding: 0.9rem 0.4rem 0.9rem 0.6rem !important;
    color: #fff;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 0 !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

#contractFilesOffcanvas .contract-file:last-child {
    border-bottom: 0 !important;
}

/* The whole row is the link: quiet by default, lifts on hover/focus with a
   yellow left accent (overrides the generic pink list hover for this panel). */
#contractFilesOffcanvas .contract-file:hover,
#contractFilesOffcanvas .contract-file:focus {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.035) !important;
    box-shadow: inset 3px 0 0 0 #FFCC00;
}

/* Leading file glyph: bare brand-yellow icon, no chip. */
#contractFilesOffcanvas .contract-file-icon {
    color: #FFCC00;
}

/* Name + date stack: truncates inside the flex row. */
#contractFilesOffcanvas .contract-file-body {
    min-width: 0;
}

#contractFilesOffcanvas .contract-file-name {
    font-size: 0.97rem;
    font-weight: 600 !important;
    color: #fff;
}

/* Creation date: quiet supporting line under the name. */
#contractFilesOffcanvas .contract-file-meta {
    margin-top: 0.15rem;
    font-size: 0.78rem !important;
    color: #8c8c87 !important;
}

/* Trailing chevron affordance (FriesenWerk only); muted, brightens and slides
   right on hover. Rendered as a masked data URI so it inherits no fill. */
#contractFilesOffcanvas .contract-file::after {
    content: "";
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    margin-left: 0.25rem;
    background-color: #6f6f6a;
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") center / contain no-repeat;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

#contractFilesOffcanvas .contract-file:hover::after,
#contractFilesOffcanvas .contract-file:focus::after {
    background-color: #FFCC00;
    transform: translateX(3px);
}

/* Keyboard focus: a clear yellow ring (the hover accent alone isn't enough). */
#contractFilesOffcanvas .contract-file:focus-visible {
    outline: 2px solid #FFCC00;
    outline-offset: -2px;
}

/* Reduced motion: keep the colour state changes, drop the movement. */
@media (prefers-reduced-motion: reduce) {
    #contractFilesOffcanvas .contract-file,
    #contractFilesOffcanvas .contract-file-icon,
    #contractFilesOffcanvas .contract-file::after,
    #contractFilesOffcanvas .btn-close {
        transition: none;
    }

    #contractFilesOffcanvas .contract-file:hover::after,
    #contractFilesOffcanvas .contract-file:focus::after {
        transform: none;
    }
}

/* Empty state: quiet, centered, with the open-envelope in a faint badge. */
#contractFilesOffcanvas .contract-files-empty {
    color: #8c8c87 !important;
}

#contractFilesOffcanvas .contract-files-empty-icon {
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto;
    color: rgba(255, 204, 0, 0.65);
    background: rgba(255, 204, 0, 0.08);
    border: 1px solid rgba(255, 204, 0, 0.18);
    border-radius: 16px;
}

#contractFilesOffcanvas .contract-files-empty-title {
    color: #fff;
}

/* Slim, themed scrollbar for the body. */
#contractFilesOffcanvas .offcanvas-body::-webkit-scrollbar {
    width: 10px;
}

#contractFilesOffcanvas .offcanvas-body::-webkit-scrollbar-thumb {
    background: #3a3a38;
    border: 2px solid #1D1D1B;
    border-radius: 10px;
}

#contractFilesOffcanvas .offcanvas-body::-webkit-scrollbar-thumb:hover {
    background: #4a4a46;
}

/* ===================== Guest / Auth Pages =====================
   Login, password reset, account setup and e-mail verification all extend
   layout.guest and share the #login wrapper. The generic dark theme above
   already covers colours; this section shapes the pages: a centered,
   width-capped auth card in the offcanvas panels' visual language (depth
   gradient, hairline border, yellow accent edge). */

#customer-portal-guest #login {
    max-width: 480px;
    margin: 0 auto;
}

/* Keep flash messages aligned with the card. */
#customer-portal-guest .alert {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* Card: depth gradient + soft shadow, clipped for the accent edge. */
#customer-portal-guest #login .card {
    position: relative;
    margin-top: 2.5rem !important;
    background: linear-gradient(180deg, #242421 0%, #1D1D1B 240px);
    border: 1px solid #333;
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

/* Yellow accent fading out along the top edge, like the offcanvas headers. */
#customer-portal-guest #login .card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #FFCC00 0%, rgba(255, 204, 0, 0) 60%);
}

#customer-portal-guest #login .card-body {
    padding: 2rem 2rem 1.75rem;
}

@media (max-width: 575.98px) {
    #customer-portal-guest #login .card-body {
        padding: 1.5rem 1.25rem;
    }
}

/* The beacon glow below overshoots the viewport on narrow screens; clip it
   instead of letting it cause horizontal scrolling. clip (unlike hidden)
   creates no scroll container, so sticky/vertical behaviour is unaffected. */
#customer-portal-guest {
    overflow-x: clip;
}

/* A quiet pool of warm light behind the logo — a beacon on the dark page. */
#customer-portal-guest #link-logo-guest {
    position: relative;
    display: inline-block;
}

#customer-portal-guest #link-logo-guest::before {
    content: "";
    position: absolute;
    inset: -45% -35%;
    background: radial-gradient(ellipse at center, rgba(255, 204, 0, 0.09) 0%, rgba(255, 204, 0, 0) 65%);
    pointer-events: none;
}

/* Greeting ("Moin!") and other card headings. */
#customer-portal-guest #login h1 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    padding-bottom: 0;
    margin-bottom: 0.5rem;
}

/* Intro copy: quiet supporting text. */
#customer-portal-guest #login .card-body p {
    font-size: 1rem;
    color: #b9b9b3;
}

/* Field labels: small uppercase labels in muted grey, matching the
   offcanvas column headers. */
#customer-portal-guest #login .form-label {
    margin-bottom: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8c8c87;
}

#customer-portal-guest #login .form-check-label {
    font-size: 1rem;
    color: #e8e8e3;
}

/* Password eye-toggle: match the dark inputs instead of Bootstrap's
   outline-secondary grey. */
#customer-portal-guest #login .input-group .btn-outline-secondary {
    border-color: #444;
    color: #aaa;
}

#customer-portal-guest #login .input-group .btn-outline-secondary:hover,
#customer-portal-guest #login .input-group .btn-outline-secondary:focus {
    background-color: #3a3a3a;
    border-color: #444;
    color: #fff;
}

/* Submit: full-width magenta pill, matching the portal's .customer-button.
   The shared auth-submit component ships as .btn-dark, which would vanish
   on this background — override its button variables instead. */
#customer-portal-guest #login .btn-dark {
    --bs-btn-bg: #D53192;
    --bs-btn-border-color: #D53192;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #b22876;
    --bs-btn-hover-border-color: #b22876;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #9c2267;
    --bs-btn-active-border-color: #9c2267;
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: 213, 49, 146;
    margin-top: 1.5rem;
    border-radius: 50px;
    font-weight: 700;
}