/* ==========================================================================
   contedi Tool – CI-Anpassung von Bootstrap 5.3
   Farben aus Logo und altem Tool. Änderungen an der Palette nur hier oben.
   ========================================================================== */

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/open-sans-v17-latin-regular.woff2") format("woff2"),
         url("../fonts/open-sans-v17-latin-regular.woff") format("woff");
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/open-sans-v17-latin-700.woff2") format("woff2"),
         url("../fonts/open-sans-v17-latin-700.woff") format("woff");
}

:root {
    /* Palette */
    --ct-petrol:        #005A78;   /* Logo, Primärfarbe */
    --ct-petrol-dunkel: #00445B;   /* Hover / aktiv */
    --ct-petrol-hell:   #D6EFF6;   /* Flächen, Hinweise */
    --ct-petrol-hell-2: #EAF6FA;   /* Tabellen-Hover, Hintergründe */
    --ct-mint:          #91E4BF;   /* Erfolg, aktiv */
    --ct-mint-text:     #0E4A32;
    --ct-pfirsich:      #FDD6AB;   /* Warnung, deaktiviert */
    --ct-pfirsich-text: #6B3E0A;
    --ct-rose:          #E1A09E;   /* Fehler */
    --ct-rose-text:     #5C1F1D;
    --ct-rot:           #B5423E;   /* Gefahr-Buttons */
    --ct-grau:          #C4C4C4;
    --ct-grau-hell:     #E9ECEF;
    --ct-text:          #1F2A30;
    --ct-text-muted:    #5F6B72;
    --ct-seite:         #F4F8FA;

    /* Bootstrap-Variablen */
    --bs-primary:            var(--ct-petrol);
    --bs-primary-rgb:        0, 90, 120;
    --bs-link-color:         var(--ct-petrol);
    --bs-link-color-rgb:     0, 90, 120;
    --bs-link-hover-color:   var(--ct-petrol-dunkel);
    --bs-link-hover-color-rgb: 0, 68, 91;
    --bs-body-font-family:   "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-color:         var(--ct-text);
    --bs-body-bg:            var(--ct-seite);
    --bs-secondary-color:    var(--ct-text-muted);
    --bs-focus-ring-color:   rgba(0, 90, 120, .25);
    --bs-border-radius:      .5rem;
    --bs-border-radius-sm:   .375rem;
}

body { min-height: 100vh; background-color: var(--ct-seite); }
h1, h2, h3, h4, .navbar-brand { font-weight: 700; letter-spacing: -.01em; }
.text-muted { color: var(--ct-text-muted) !important; }
a { text-decoration: none; }
a:hover { text-decoration: none; color: var(--ct-petrol-dunkel); }
code { color: var(--ct-text); background: var(--ct-grau-hell); padding: .1em .4em; border-radius: .3rem; font-size: .85em; }
.kennung { font-size: .85rem; letter-spacing: .03em; color: var(--ct-text-muted); }

/* --- Navigation ---------------------------------------------------------- */
.navbar-tool { background: #fff; border-top: 4px solid var(--ct-petrol); border-bottom: 1px solid #dfe6ea; }
.navbar-tool .navbar-brand span { color: var(--ct-petrol); }
.navbar-tool .nav-link { color: var(--ct-text); border-radius: .375rem; padding: .45rem .6rem; font-size: .95rem; white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1399.98px) {
    .navbar-tool .navbar-nav .nav-link > .bi { display: none; }
}
.navbar-tool .nav-link:hover { background: var(--ct-petrol-hell-2); color: var(--ct-petrol-dunkel); }
.navbar-tool .nav-link.active { background: var(--ct-petrol-hell); color: var(--ct-petrol-dunkel); font-weight: 700; }
.navbar-tool .dropdown-item:active, .navbar-tool .dropdown-item.active { background: var(--ct-petrol); }
.navbar-tool .badge-rolle { background: var(--ct-petrol-hell); color: var(--ct-petrol-dunkel); font-weight: 600; }

/* Untermenü im Dropdown (Bootstrap kann das nicht selbst) */
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-item.dropdown-toggle::after { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%) rotate(-90deg); }
.dropdown-submenu > .dropdown-menu { top: -.5rem; left: 100%; margin-left: .1rem; display: none; }
.dropdown-submenu.show > .dropdown-menu { display: block; }
@media (min-width: 992px) {
    .dropdown-submenu:hover > .dropdown-menu { display: block; }
}
@media (max-width: 991.98px) {
    .dropdown-submenu > .dropdown-menu { position: static; left: 0; margin-left: 1rem; border: 0; box-shadow: none; padding-top: 0; }
}

/* --- Buttons ------------------------------------------------------------- */
.btn { --bs-btn-font-weight: 600; }
.btn-primary {
    --bs-btn-bg: var(--ct-petrol); --bs-btn-border-color: var(--ct-petrol);
    --bs-btn-hover-bg: var(--ct-petrol-dunkel); --bs-btn-hover-border-color: var(--ct-petrol-dunkel);
    --bs-btn-active-bg: var(--ct-petrol-dunkel); --bs-btn-active-border-color: var(--ct-petrol-dunkel);
    --bs-btn-disabled-bg: #7FA9B8; --bs-btn-disabled-border-color: #7FA9B8;
}
.btn-outline-primary {
    --bs-btn-color: var(--ct-petrol); --bs-btn-border-color: var(--ct-petrol);
    --bs-btn-hover-bg: var(--ct-petrol); --bs-btn-hover-border-color: var(--ct-petrol);
    --bs-btn-active-bg: var(--ct-petrol-dunkel); --bs-btn-active-border-color: var(--ct-petrol-dunkel);
    --bs-btn-disabled-color: #7FA9B8; --bs-btn-disabled-border-color: #7FA9B8;
}
.btn-outline-secondary {
    --bs-btn-color: var(--ct-text-muted); --bs-btn-border-color: var(--ct-grau);
    --bs-btn-hover-bg: var(--ct-grau-hell); --bs-btn-hover-border-color: var(--ct-grau); --bs-btn-hover-color: var(--ct-text);
    --bs-btn-active-bg: var(--ct-grau-hell); --bs-btn-active-border-color: var(--ct-grau); --bs-btn-active-color: var(--ct-text);
}
.btn-danger, .btn-outline-danger:hover, .btn-outline-danger:active {
    --bs-btn-bg: var(--ct-rot); --bs-btn-border-color: var(--ct-rot);
    --bs-btn-hover-bg: #963532; --bs-btn-hover-border-color: #963532;
    --bs-btn-active-bg: #963532; --bs-btn-active-border-color: #963532;
}
.btn-outline-danger { --bs-btn-color: var(--ct-rot); --bs-btn-border-color: var(--ct-rot); --bs-btn-hover-bg: var(--ct-rot); --bs-btn-hover-border-color: var(--ct-rot); --bs-btn-active-bg: var(--ct-rot); --bs-btn-active-border-color: var(--ct-rot); }
.btn-link { --bs-btn-color: var(--ct-petrol); --bs-btn-hover-color: var(--ct-petrol-dunkel); }

/* --- Formulare ----------------------------------------------------------- */
.form-control:focus, .form-select:focus { border-color: #5E9DB1; box-shadow: 0 0 0 .25rem rgba(0, 90, 120, .18); }
.form-check-input:checked { background-color: var(--ct-petrol); border-color: var(--ct-petrol); }
.form-check-input:focus { border-color: #5E9DB1; box-shadow: 0 0 0 .25rem rgba(0, 90, 120, .18); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%235E9DB1'/%3e%3c/svg%3e"); }
.form-control, .form-select { background-color: #fff; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--ct-grau-hell); }
.form-label { font-weight: 600; font-size: .9rem; }
.form-text { color: var(--ct-text-muted); }
.is-invalid { border-color: var(--ct-rot) !important; }
.invalid-feedback { color: var(--ct-rot); }

/* --- Karten und Tabellen ------------------------------------------------- */
.card { --bs-card-bg: #fff; border: 0; border-radius: .75rem; box-shadow: 0 1px 2px rgba(0, 40, 60, .06), 0 4px 16px rgba(0, 40, 60, .05) !important; }
.card .table { margin-bottom: 0; }
.table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--ct-petrol-hell-2); --bs-table-border-color: #E6ECF0; font-size: .95rem; }
.table > :not(caption) > * > * { padding: .85rem .75rem; }
.table > thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ct-text-muted); border-bottom: 1px solid #DCE4E9; font-weight: 700; background: transparent; }
.table > tbody > tr:last-child > * { border-bottom: 0; }
.table a { font-weight: 600; }
.table .btn-sm.btn-outline-primary, .table .btn-sm.btn-outline-danger, .table .btn-sm.btn-outline-secondary {
    --bs-btn-border-color: transparent; --bs-btn-bg: transparent; --bs-btn-padding-x: .55rem;
    --bs-btn-hover-color: var(--ct-petrol-dunkel); --bs-btn-hover-bg: var(--ct-petrol-hell); --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--ct-petrol-hell); --bs-btn-active-border-color: transparent; --bs-btn-active-color: var(--ct-petrol-dunkel);
}
.table .btn-sm.btn-outline-danger { --bs-btn-hover-color: var(--ct-rose-text); --bs-btn-hover-bg: #FBEAE9; --bs-btn-active-bg: #FBEAE9; --bs-btn-active-color: var(--ct-rose-text); }
.table .btn-sm.btn-outline-primary { --bs-btn-color: var(--ct-text-muted); }
.table .btn-sm.btn-outline-danger { --bs-btn-color: var(--ct-text-muted); }
.table tr:hover .btn-sm.btn-outline-primary { --bs-btn-color: var(--ct-petrol); }
.table tr:hover .btn-sm.btn-outline-danger { --bs-btn-color: var(--ct-rot); }
.table .leer { color: var(--ct-grau); }
table.dataTable thead > tr > th.dt-orderable-asc:hover, table.dataTable thead > tr > th.dt-orderable-desc:hover { outline: none; background: var(--ct-petrol-hell-2); }
div.dt-container .dt-search { position: relative; margin-bottom: .75rem; }
div.dt-container .dt-search label { display: none; }
div.dt-container .dt-search::before { content: "\F52A"; font-family: "bootstrap-icons"; position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--ct-text-muted); pointer-events: none; }
div.dt-container .dt-search input { border-radius: .5rem; padding: .45rem .75rem .45rem 2.2rem; min-width: 18rem; border: 1px solid #DCE4E9; background: #fff; margin-left: 0; }
div.dt-container .dt-search input:focus { outline: none; border-color: #5E9DB1; box-shadow: 0 0 0 .25rem rgba(0, 90, 120, .18); }
table.dataTable.table > thead > tr > th { padding-right: 1.5rem; }

/* --- Badges und Status --------------------------------------------------- */
.badge { font-weight: 600; letter-spacing: .01em; }
.text-bg-success   { background-color: var(--ct-mint) !important;        color: var(--ct-mint-text) !important; }
.text-bg-warning   { background-color: var(--ct-pfirsich) !important;    color: var(--ct-pfirsich-text) !important; }
.text-bg-danger    { background-color: var(--ct-rose) !important;        color: var(--ct-rose-text) !important; }
.text-bg-info      { background-color: var(--ct-petrol-hell) !important; color: var(--ct-petrol-dunkel) !important; }
.text-bg-primary   { background-color: var(--ct-petrol) !important;      color: #fff !important; }
.text-bg-secondary { background-color: var(--ct-grau-hell) !important;   color: var(--ct-text-muted) !important; }
.text-bg-dark      { background-color: var(--ct-text) !important;        color: #fff !important; }

.badge-status { font-weight: 600; padding: .4em .7em; border-radius: 999px; }
.badge-status-aktiv       { background: var(--ct-mint);        color: var(--ct-mint-text); }
.badge-status-deaktiviert { background: var(--ct-pfirsich);    color: var(--ct-pfirsich-text); }
.badge-status-angelegt    { background: var(--ct-petrol-hell); color: var(--ct-petrol-dunkel); }
.badge-status-fehler      { background: var(--ct-rose);        color: var(--ct-rose-text); }
.badge-status-inaktiv,
.badge-status-geloescht   { background: var(--ct-grau-hell);   color: var(--ct-text-muted); }

/* --- Meldungen ----------------------------------------------------------- */
.alert { border: 0; border-left: 4px solid transparent; }
.alert-success { --bs-alert-bg: #E6F8F0; --bs-alert-color: var(--ct-mint-text); border-left-color: var(--ct-mint); }
.alert-warning { --bs-alert-bg: #FFF1E2; --bs-alert-color: var(--ct-pfirsich-text); border-left-color: var(--ct-pfirsich); }
.alert-danger  { --bs-alert-bg: #FBEAE9; --bs-alert-color: var(--ct-rose-text); border-left-color: var(--ct-rose); }
.alert-info    { --bs-alert-bg: var(--ct-petrol-hell); --bs-alert-color: var(--ct-petrol-dunkel); border-left-color: var(--ct-petrol); }

/* --- Sonstiges ----------------------------------------------------------- */
.page-link { color: var(--ct-petrol); }
.page-item.active .page-link { background-color: var(--ct-petrol); border-color: var(--ct-petrol); }
.nav-tabs { --bs-nav-tabs-link-active-color: var(--ct-petrol-dunkel); --bs-nav-link-color: var(--ct-text-muted); --bs-nav-link-hover-color: var(--ct-petrol); }
.nav-tabs .nav-link.active { font-weight: 700; border-top: 3px solid var(--ct-petrol); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--ct-petrol); --bs-nav-pills-link-active-color: #fff; --bs-nav-link-color: var(--ct-text-muted); --bs-nav-link-hover-color: var(--ct-petrol); }
.nav-pills .nav-link.active .badge { background-color: rgba(255, 255, 255, .22) !important; color: #fff !important; }
.geheim { filter: blur(5px); transition: filter .15s; cursor: pointer; }
.geheim:hover, .geheim:focus { filter: none; }
.breadcrumb { --bs-breadcrumb-font-size: .85rem; }
.text-primary { color: var(--ct-petrol) !important; }
.text-success { color: #2E9A6B !important; }
.text-warning { color: #D98A2B !important; }
.text-danger  { color: var(--ct-rot) !important; }
.text-info    { color: #3D8FA8 !important; }
.text-dark    { color: var(--ct-text) !important; }

/* Kennzahlen auf dem Dashboard */
.kennzahl .kennzahl-icon { width: 3rem; height: 3rem; border-radius: .75rem; display: grid; place-items: center; font-size: 1.4rem; }
.kennzahl-primary   .kennzahl-icon { background: var(--ct-petrol-hell); color: var(--ct-petrol); }
.kennzahl-secondary .kennzahl-icon { background: var(--ct-grau-hell);   color: var(--ct-text-muted); }
.kennzahl-dark      .kennzahl-icon { background: var(--ct-petrol);      color: #fff; }
.kennzahl-success   .kennzahl-icon { background: var(--ct-mint);        color: var(--ct-mint-text); }
.kennzahl-warning   .kennzahl-icon { background: var(--ct-pfirsich);    color: var(--ct-pfirsich-text); }
.kennzahl-info      .kennzahl-icon { background: var(--ct-petrol-hell); color: var(--ct-petrol-dunkel); }
.kennzahl-danger    .kennzahl-icon { background: var(--ct-rose);        color: var(--ct-rose-text); }

.kennzahl-link { color: inherit; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
.kennzahl-link:hover { text-decoration: none; color: inherit; transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0, 40, 60, .08), 0 10px 24px rgba(0, 40, 60, .10) !important; }
.kennzahl-link .fs-3 { color: var(--ct-petrol-dunkel); }
.kennzahl-pfeil { color: var(--ct-grau); transition: color .12s ease, transform .12s ease; }
.kennzahl-link:hover .kennzahl-pfeil { color: var(--ct-petrol); transform: translateX(2px); }

/* Info-Fragezeichen mit Tooltip */
.hinweis-info { color: var(--ct-grau); cursor: help; margin-left: .3rem; font-size: .9em; vertical-align: middle; }
.hinweis-info:hover, .hinweis-info:focus { color: var(--ct-petrol); outline: none; }
.tooltip { --bs-tooltip-bg: var(--ct-text); --bs-tooltip-color: #fff; --bs-tooltip-max-width: 300px; --bs-tooltip-font-size: .8rem; --bs-tooltip-padding-x: .7rem; --bs-tooltip-padding-y: .5rem; }
.tooltip-inner { text-align: left; }

/* Erreichbarkeit */
.erreichbar { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; vertical-align: middle; }
.erreichbar-ja { background: #2E9A6B; box-shadow: 0 0 0 3px rgba(46, 154, 107, .18); }
.erreichbar-nein { background: var(--ct-rot); box-shadow: 0 0 0 3px rgba(181, 66, 62, .2); }
.erreichbar-unbekannt { background: var(--ct-grau); }

/* Login */
body.seite-login { background: linear-gradient(160deg, var(--ct-petrol-hell) 0%, var(--ct-seite) 55%, #fff 100%); }
.seite-login .card { border-top: 4px solid var(--ct-petrol); }

/* DataTables: Zahlen-/Datumsspalten nicht rechtsbündig */
table.dataTable td.dt-type-numeric, table.dataTable th.dt-type-numeric, table.dataTable td.dt-type-date, table.dataTable th.dt-type-date { text-align: left; }