/*
 * RealSmart — Markenschicht über der gekauften Vorlage.
 *
 * Diese Datei wird als LETZTES Stylesheet geladen und überschreibt nur Farben,
 * Abstände und Rundungen. Bewusst kein Eingriff in die SCSS-Quellen der
 * Vorlage: die wird irgendwann aktualisiert, und dann wäre jede Änderung dort
 * wieder weg. Außerdem braucht diese Datei keinen Build-Schritt — sie liegt
 * fertig in `public/` und ist damit auch nach einem `git pull` sofort aktiv.
 *
 * Die Farben stammen aus der Ergebnisseite des Rechners, damit Anwendung,
 * PDF und Kundenansicht dieselbe Handschrift haben.
 */

:root {
    --rs-tief: #16544c;        /* Navigation, Bänder */
    --rs-tief-2: #11403a;      /* Verlaufsende unten */
    --rs-gruen: #28887b;       /* Markenfarbe, aktive Zustände */
    --rs-gruen-hell: #e8f2f0;  /* Flächen */
    --rs-mint: #bfe3dc;        /* Schrift auf dunklem Grund */
    --rs-papier: #f4f7f6;      /* Seitenhintergrund */
    --rs-linie: #e4ecea;       /* Hairlines */
    --rs-text: #1f2a2e;
    --rs-grau: #6b7b80;

    --primary-rgb: 40, 136, 123;
    --body-bg-rgb: 244, 247, 246;
}

body {
    background-color: var(--rs-papier);
    color: var(--rs-text);
    letter-spacing: -0.005em;
}

/* ---------------------------------------------------------------- Navigation */

html[data-menu-styles="dark"] .app-sidebar,
.app-sidebar {
    background: linear-gradient(180deg, var(--rs-tief) 0%, var(--rs-tief-2) 100%);
    border-right: 0;
}

/* Die Vorlage legt eine halbdurchsichtige Fläche in der Primärfarbe über die
   Navigation. Das trübt den Verlauf — weg damit. */
html[data-menu-styles="dark"][data-theme-mode="light"] .app-sidebar::before,
html[data-menu-styles="dark"][data-theme-mode="light"] .main-sidebar-header::before {
    opacity: 0;
}

.app-sidebar .main-sidebar-header {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Rubriküberschriften („Beratung", „Firma" …) */
.app-sidebar .slide__category {
    color: rgba(191, 227, 220, 0.55);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 22px 24px 8px 24px;
}

.app-sidebar .side-menu__item {
    color: rgba(255, 255, 255, 0.78);
    border-radius: 10px;
    margin: 2px 12px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Die Vorlage schreibt diese Zustände mit html[data-menu-styles=dark] davor —
   dieselbe Spezifität ist nötig, sonst gewinnt sie. */
html[data-menu-styles="dark"] .app-sidebar .side-menu__item:hover,
html[data-menu-styles="dark"] .app-sidebar .side-menu__item:focus,
.app-sidebar .side-menu__item:hover,
.app-sidebar .side-menu__item:focus {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* Aktiver Punkt: gefüllt in der Markenfarbe, dazu eine helle Fahne links.
   Die Fahne trägt die Information auch dann, wenn jemand Farben schlecht
   unterscheidet. */
html[data-menu-styles="dark"] .app-sidebar .side-menu__item.active,
html[data-menu-styles="dark"] .app-sidebar .side-menu__item.active:hover,
.app-sidebar .side-menu__item.active,
.app-sidebar .side-menu__item.active:hover {
    background-color: var(--rs-gruen);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

/* Die Vorlage färbt das Symbol des aktiven Punktes in der Primärfarbe — und
   zwar mit !important. Auf unserer grünen Fläche wäre es damit unsichtbar.
   Hier ist !important deshalb die einzige Möglichkeit. */
.app-sidebar .side-menu__item.active .side-menu__icon,
.app-sidebar .side-menu__item.active .side-menu__label {
    color: #fff !important;
    fill: #fff !important;
}

.app-sidebar .side-menu__item.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background-color: var(--rs-mint);
}

.app-sidebar .side-menu__item {
    position: relative;
}

/* Die Symbole vor den Einträgen. Feste Breite, damit die Beschriftungen
   bündig stehen — und damit bei eingeklappter Navigation nur das Symbol
   übrig bleibt und mittig sitzt. */
.app-sidebar .side-menu__icon {
    width: 22px;
    min-width: 22px;
    margin-inline-end: 12px;
    font-size: 19px;
    line-height: 1;
    text-align: center;
    opacity: 0.92;
}

.app-sidebar .side-menu__item.active .side-menu__icon {
    opacity: 1;
}

/* Eingeklappte Navigation: Beschriftung weg, Symbol mittig, kein Rand. */
html[data-toggled="icon-overlay-close"] .app-sidebar .side-menu__icon,
html[data-toggled="icon-text-close"] .app-sidebar .side-menu__icon,
html[data-toggled="detached-close"] .app-sidebar .side-menu__icon {
    margin-inline-end: 0;
}

html[data-toggled="icon-overlay-close"] .app-sidebar .slide__category,
html[data-toggled="icon-text-close"] .app-sidebar .slide__category {
    padding-inline: 0;
    text-align: center;
}

/* ------------------------------------------------------------------- Kopfzeile */

.app-header {
    background-color: #fff;
    border-bottom: 1px solid var(--rs-linie);
    box-shadow: none;
}

.app-header .header-link-icon {
    fill: var(--rs-grau);
}

.main-profile-user .fs-13 {
    color: var(--rs-text);
}

.main-profile-user .fs-10 {
    color: var(--rs-grau);
}

/* ---------------------------------------------------------- Profilbild / Kürzel */

.rs-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--rs-gruen-hell);
    color: var(--rs-gruen);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid var(--rs-linie);
}

.rs-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rs-avatar--gross {
    width: 104px;
    height: 104px;
    flex: 0 0 104px;
    font-size: 32px;
}

/* ------------------------------------------------- Profilfoto: ablegen & schneiden */

/* Solange JavaScript nicht gelaufen ist, bleibt das gewöhnliche Dateifeld
   stehen. Erst die Klasse rs-foto--bereit tauscht es gegen die Ablegefläche. */
.rs-foto--bereit [data-rs="datei"],
.rs-foto--bereit .rs-foto__ohne-js {
    display: none !important;
}

.rs-foto__bildunterschrift {
    margin-top: 8px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rs-grau);
}

.rs-foto__zone {
    border: 2px dashed #cfdedb;
    border-radius: 14px;
    background-color: #fafcfb;
    padding: 26px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.rs-foto__zone:hover,
.rs-foto__zone--bereit {
    border-color: var(--rs-gruen);
    background-color: var(--rs-gruen-hell);
}

.rs-foto__zone-symbol {
    font-size: 30px;
    color: var(--rs-gruen);
    display: block;
    margin-bottom: 8px;
}

.rs-foto__zone-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--rs-text);
}

.rs-foto__zone-text span {
    display: block;
    font-weight: 400;
    color: var(--rs-grau);
    margin-top: 2px;
}

.rs-foto__zone-klein {
    margin-top: 10px;
    font-size: 11.5px;
    color: var(--rs-grau);
}

.rs-foto__leinwand {
    display: block;
    border-radius: 14px;
    background-color: #0f2b28;
    cursor: grab;
    touch-action: none;   /* sonst scrollt das Wischen die Seite statt das Bild */
    max-width: 100%;
}

.rs-foto__leinwand--zieht {
    cursor: grabbing;
}

.rs-foto__regler {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 300px;
    margin: 14px 0 4px 0;
    color: var(--rs-grau);
}

.rs-foto__regler .ri-image-line {
    font-size: 13px;
}

.rs-foto__regler .ri-image-fill {
    font-size: 19px;
}

.rs-foto__regler input[type="range"] {
    flex: 1;
    accent-color: var(--rs-gruen);
}

.rs-foto__erklaerung {
    font-size: 12px;
    color: var(--rs-grau);
    max-width: 320px;
    margin: 0 0 14px 0;
    line-height: 1.5;
}

/* ----------------------------------------------------------------- Seiteninhalt */

.page-header {
    padding-bottom: 14px;
    margin-bottom: 22px !important;
    border-bottom: 1px solid var(--rs-linie) !important;
}

.page-header .page-title {
    font-size: 21px;
    font-weight: 700;
    color: var(--rs-tief);
    margin: 0;
}

.breadcrumb-item.active,
.breadcrumb-item a {
    color: var(--rs-gruen);
}

.card {
    border: 1px solid var(--rs-linie);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(25, 93, 84, 0.04);
    margin-bottom: 22px;
}

.card .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--rs-linie);
    padding: 16px 22px;
}

.card .card-header .card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--rs-tief);
    margin: 0;
}

.card .card-body {
    padding: 22px;
}

/* Kennzahlenkacheln auf der Übersicht */
.card .card-body h2,
.card .card-body .fs-24,
.card .card-body .display-6 {
    color: var(--rs-tief);
    font-weight: 700;
}

/* ------------------------------------------------------------------- Bedienung */

.btn-primary {
    background-color: var(--rs-gruen);
    border-color: var(--rs-gruen);
    border-radius: 9px;
    padding: 8px 18px;
    font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #20705f;
    border-color: #20705f;
}

.btn-link {
    color: var(--rs-gruen);
}

a {
    color: var(--rs-gruen);
}

.form-control,
.form-select {
    border-color: #dde7e4;
    border-radius: 9px;
    padding: 9px 13px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--rs-gruen);
    box-shadow: 0 0 0 3px rgba(40, 136, 123, 0.12);
}

.form-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--rs-grau);
    margin-bottom: 5px;
}

.form-check-input:checked {
    background-color: var(--rs-gruen);
    border-color: var(--rs-gruen);
}

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

.table > :not(caption) > * > * {
    padding: 12px 14px;
}

.table thead th {
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rs-grau);
    font-weight: 600;
    border-bottom: 1px solid var(--rs-linie);
    background-color: transparent;
}

.table tbody td {
    border-bottom: 1px solid var(--rs-linie);
    vertical-align: middle;
}

/* --------------------------------------------------------------------- Fußzeile */

.footer {
    background-color: transparent;
    border-top: 1px solid var(--rs-linie);
    box-shadow: none;
    color: var(--rs-grau);
    font-size: 12.5px;
}