/* BMS IT Solution: Farben aus Logo und LinkedIn-Titelbild, aufbauend auf dem Standard-Design */
@import url('../../../../css/espo/espo.css');

:root {
    --bms-navy: #0a3d7a;
    --bms-blue: #0d58b2;
    --bms-teal: #2489be;
    --bms-cyan: #6ec5da;
    --bms-green: #72b64a;
    --bms-slate: #4d6378;
    --bms-sand: #eeede9;
    --bms-gradient: linear-gradient(90deg, #0d58b2 0%, #2489be 50%, #72b64a 100%);

    --body-bg: #f3f6fb;
    --default-border-color: #e3e9f2;
    --main-gray: #e3e9f2;
    --panel-default-border: #e3e9f2;
    --default-heading-bg-color: #edf3f9;

    --text-color: #1f2d3d;
    --link-color: var(--bms-blue);
    --link-hover-color: var(--bms-navy);
    --link-record-color: var(--bms-navy);
    --link-record-hover-color: var(--bms-blue);
    --text-link-color: var(--bms-blue);
    --text-link-hover-color: var(--bms-navy);
    --text-gray-color: var(--bms-slate);

    --brand-primary: #0d58b2;
    --brand-primary-5: #0b4f9f;
    --brand-primary-10: #0a468d;
    --brand-primary-lighten-10: #3a7ed0;
    --brand-primary-lighten-30: #c3d7f0;
    --brand-success: #72b64a;
    --brand-success-10: #5c9a38;
    --brand-info: #2489be;
    --brand-info-10: #1d6f9b;

    --btn-primary-bg: #0d58b2;
    --btn-primary-border: #0d58b2;
    --btn-primary-hover-bg: #0a3d7a;
    --btn-primary-hover-border: #0a3d7a;
    --btn-primary-active-bg: #08336a;
    --btn-primary-active-border: #08336a;
    --btn-success-bg: #72b64a;
    --btn-success-border: #72b64a;
    --btn-success-hover-bg: #5c9a38;
    --btn-success-hover-border: #5c9a38;
    --btn-success-active-bg: #4f8530;
    --btn-success-active-border: #4f8530;
    --btn-info-bg: #2489be;
    --btn-info-border: #2489be;
    --btn-info-hover-bg: #1d6f9b;
    --btn-info-hover-border: #1d6f9b;
    --btn-info-active-bg: #195f85;
    --btn-info-active-border: #195f85;

    --state-primary-bg: #e3eef9;
    --state-primary-text: #0d58b2;
    --state-primary-border: #c6dbf1;
    --state-success-bg: #e3f1da;
    --state-success-text: #4f8530;
    --state-success-border: #cde4bd;
    --state-info-bg: #def0f6;
    --state-info-text: #1d6f9b;
    --state-info-border: #c3e3ee;
    --panel-primary-bg: #e3eef9;
    --panel-primary-text: #0d58b2;
    --panel-primary-border: #e3eef9;
    --panel-success-bg: #e3f1da;
    --panel-success-text: #4f8530;
    --panel-info-bg: #def0f6;
    --panel-info-text: #1d6f9b;

    --input-border-focus: #2489be;
    --input-border-focus-rgba: rgba(36, 137, 190, 0.45);
    --select-item-active-bg: #0d58b2;

    --navbar-bg: #ffffff;
    --navbar-link-color: var(--bms-slate);
    --navbar-link-icon-color: var(--bms-slate);
    --navbar-link-hover-color: var(--bms-navy);
    --navbar-link-hover-bg: #f3f6f9;
    --navbar-link-active-bg: #e3eef9;
    --navbar-inverse-bg: #ffffff;
    --navbar-inverse-color: #8a9aaa;
    --navbar-inverse-link-color: var(--bms-navy);
    --navbar-inverse-link-active-bg: #e3eef9;
    --navbar-inverse-border: #e4e6e5;
    --navbar-inverse-toggle-hover-bg: #e3eef9;
    --navbar-inverse-bg-7: #edf3f9;
    --navbar-inverse-link-hover-color: var(--bms-blue);
    --navbar-inverse-link-hover-bg: #f3f6f9;
    --navbar-inverse-link-icon-color: var(--bms-teal);
    --navbar-inverse-link-icon-hover-color: var(--bms-blue);

    --modal-header-bg: #ffffff;
    --modal-footer-bg: #ffffff;
    --modal-content-bg: #ffffff;
    --login-panel-heading-bg: #ffffff;
    --calendar-today-bg: #eef6e8;

    --bms-card-shadow: 0 1px 2px rgba(10, 61, 122, .06), 0 8px 24px rgba(10, 61, 122, .06);
    --bms-radius: 16px;
    --bms-line: #e3e9f2;
    --bms-muted: #5e7186;
    --bms-light: #8a9bb0;
    --bms-surface: #f5f8fc;
}

/* Seitliche Leiste: Logo mit Abstand, aktiver Menüpunkt mit Farbverlauf-Strich */
body[data-navbar=side] #navbar .navbar-brand img,
#navbar .navbar-brand img.logo {
    height: auto;
    max-height: var(--40px);
    width: auto;
    object-fit: contain;
}

body[data-navbar=side] #navbar a.navbar-brand {
    padding-left: var(--14px);
    display: flex;
    align-items: center;
}

#navbar .navbar ul.tabs > li.active > a {
    position: relative;
    font-weight: 600;
}

body[data-navbar=side] #navbar .navbar ul.tabs > li.active > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: var(--5px);
    bottom: var(--5px);
    width: var(--3px);
    border-radius: 0 var(--3px) var(--3px) 0;
    background: linear-gradient(180deg, #0d58b2, #2489be 55%, #72b64a);
}

/* Obere Navigationsleiste: Logo mit Luft, aktiver Menüpunkt mit Verlauf unten */
body:not([data-navbar=side]) #navbar .navbar .navbar-brand {
    display: flex;
    align-items: center;
    width: calc(var(--logo-width) + var(--24px));
    padding: 0 var(--12px);
}

body:not([data-navbar=side]) #navbar .navbar .navbar-brand img.logo {
    max-width: var(--logo-width);
    max-height: var(--30px);
}

body:not([data-navbar=side]) #navbar .navbar ul.tabs > li.active > a::before {
    content: "";
    position: absolute;
    left: var(--8px);
    right: var(--8px);
    bottom: 0;
    height: var(--3px);
    border-radius: var(--3px) var(--3px) 0 0;
    background: var(--bms-gradient);
}

body:not([data-navbar=side]) #navbar .navbar {
    border-bottom: 0;
    box-shadow: inset 0 calc(var(--2px) * -1) 0 rgba(36, 137, 190, .35);
}

/* Obere Leiste mit dünnem Verlauf wie im Titelbild */
body[data-navbar=side] #navbar .navbar-right {
    box-shadow: none;
    border-bottom: 0;
    background-image: linear-gradient(90deg, rgba(13, 88, 178, .85), rgba(36, 137, 190, .85) 50%, rgba(114, 182, 74, .85));
    background-size: 100% var(--2px);
    background-position: 0 100%;
    background-repeat: no-repeat;
}

body[data-navbar=side] #navbar .navbar-right > li,
body[data-navbar=side] #navbar .navbar-right .global-search-container,
body[data-navbar=side] #navbar .navbar-right .global-search-container input {
    background-color: transparent;
}

/* Überschriften in Dunkelblau */
.page-header h3,
.page-header .header-title,
.panel-heading .panel-title,
#main .header-breadcrumbs a,
#main .header-breadcrumbs {
    color: var(--bms-navy);
}

.panel-default > .panel-heading .panel-title {
    font-weight: 600;
}

.btn-primary {
    box-shadow: 0 1px 2px rgba(10, 61, 122, .18);
}

/* Anmeldeseite im Stil des Titelbilds */
body:has(#login) {
    background-color: var(--bms-sand);
    background-image:
        url('../img/netzwerk.svg'),
        radial-gradient(ellipse 45% 55% at 12% 12%, rgba(110, 197, 218, .35), transparent 70%),
        radial-gradient(ellipse 40% 50% at 95% 90%, rgba(114, 182, 74, .20), transparent 70%),
        linear-gradient(120deg, #dfe6e4 0%, #efede9 55%, #e6ece1 100%);
    background-size: cover, auto, auto, auto;
    background-attachment: fixed;
    background-position: center;
}

#login.panel {
    border: 0;
    border-radius: var(--12px);
    overflow: hidden;
    box-shadow: 0 var(--10px) var(--40px) rgba(10, 61, 122, .14), 0 var(--1px) var(--3px) rgba(10, 61, 122, .08);
    background: rgba(255, 255, 255, .96);
}

#login.panel::before {
    content: "";
    display: block;
    height: var(--4px);
    background: var(--bms-gradient);
}

#login.panel > .panel-heading {
    background: transparent;
    border: 0;
    padding: var(--28px) var(--24px) var(--6px);
}

#login .logo-container {
    width: auto;
    height: auto;
    overflow: visible;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#login .logo-container img.logo {
    max-width: 80%;
    max-height: none;
    height: auto;
}

#login .panel-body {
    padding: var(--16px) var(--24px) var(--24px);
}

#login .logo-container::after {
    content: "IT, die verbindet, schützt und verlässlich trägt.";
    margin-top: var(--14px);
    font-size: var(--13px);
    font-weight: 500;
    color: var(--bms-slate);
    letter-spacing: .01em;
}

#login .cell label {
    color: var(--bms-navy);
    font-weight: 600;
}

#login #btn-login {
    min-width: var(--120px);
}

body:has(#login) footer,
body:has(#login) footer a {
    color: var(--bms-slate);
}

/* Kundenportal: gleiche Anmeldeseite, zusätzlich mit Überschrift (die interne Anmeldung hat data-id="espocrm") */
body:not([data-id="espocrm"]) #login .logo-container::after {
    content: "Kundenportal\A der BMS IT Solution GmbH";
    white-space: pre;
    margin-top: var(--18px);
    font-size: var(--20px);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: var(--bms-navy);
    letter-spacing: 0;
}

body:not([data-id="espocrm"]) #login.panel > .panel-heading::after {
    content: "IT, die verbindet, schützt und verlässlich trägt.";
    display: block;
    margin-top: var(--6px);
    text-align: center;
    font-size: var(--13px);
    font-weight: 500;
    color: var(--bms-slate);
    letter-spacing: .01em;
}


/* ==========================================================================
   Moderner Look (ab 1.2.0) wie die Ansicht "Telefonieren" und das Beispiel-CRM:
   Karten mit runden Ecken und weichem Schatten, ruhige Tabellen, runde Knöpfe und Felder.
   ========================================================================== */

body {
    -webkit-font-smoothing: antialiased;
}

/* Seitliche Leiste: Menüpunkte als runde "Pillen", aktiver Punkt im Blau-Verlauf */
body[data-navbar=side] #navbar .navbar {
    background: #ffffff;
    border-right: 1px solid var(--bms-line);
    box-shadow: 4px 0 24px rgba(10, 61, 122, .04);
}

body[data-navbar=side] #navbar .navbar ul.tabs > li.tab > a.nav-link {
    margin: 2px 10px;
    border-radius: 12px;
    border-left: 0 !important;
    transition: background .15s, color .15s;
}

body[data-navbar=side] #navbar .navbar ul.tabs > li.tab > a.nav-link:hover {
    background: var(--bms-surface);
}

body[data-navbar=side] #navbar .navbar ul.tabs > li.tab.active > a.nav-link {
    background: linear-gradient(135deg, #0d58b2, #2489be);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(13, 88, 178, .28);
}

body[data-navbar=side] #navbar .navbar ul.tabs > li.tab.active > a.nav-link::before {
    display: none;
}

body[data-navbar=side] #navbar .navbar ul.tabs > li.tab.active > a.nav-link .short-label,
body[data-navbar=side] #navbar .navbar ul.tabs > li.tab.active > a.nav-link .short-label .fas,
body[data-navbar=side] #navbar .navbar ul.tabs > li.tab.active > a.nav-link .full-label {
    color: #ffffff !important;
}

body[data-navbar=side] #navbar .navbar ul.tabs > li.tab-divider .nav-divider-text {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 11px;
    font-weight: 700;
    color: var(--bms-light);
    padding-left: 22px;
}

/* Obere Leiste weiß mit feinem Schatten */
body[data-navbar=side] #navbar .navbar-right {
    background-color: #ffffff;
}

#navbar .global-search-container input.form-control {
    border-radius: 12px;
    background: var(--bms-surface);
    border: 1.5px solid transparent;
}

#navbar .global-search-container input.form-control:focus {
    background: #ffffff;
    border-color: var(--bms-teal);
}

/* Seitenkopf: große, kräftige Überschrift */
#main .page-header {
    margin-bottom: 18px;
}

#main .page-header .header-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.01em;
}

#main .header-breadcrumbs .breadcrumb-item:not(:last-child),
#main .header-breadcrumbs .breadcrumb-item:not(:last-child) a {
    color: var(--bms-light);
    font-weight: 600;
}

/* Karten statt Kästen */
.panel {
    border: 0;
    border-radius: var(--bms-radius);
    box-shadow: var(--bms-card-shadow);
    background: #ffffff;
}

.panel > .panel-heading,
.panel-default > .panel-heading {
    background: transparent;
    border-bottom: 0;
    border-radius: var(--bms-radius) var(--bms-radius) 0 0;
    padding-top: 16px;
}

.panel > .panel-heading .panel-title {
    font-size: 15px;
    font-weight: 700;
}

.panel > .panel-body {
    border-radius: 0 0 var(--bms-radius) var(--bms-radius);
}

.panel + .panel,
.panel-group .panel + .panel {
    margin-top: 16px;
}

.record .panel .cell .control-label,
.record .panel .cell label.control-label {
    color: var(--bms-light);
    font-size: 12.5px;
    font-weight: 600;
}

/* Listen: ganze Liste als Karte, ruhige Kopfzeile, Zeile hebt sich beim Überfahren ab */
.list-container > .list,
#main .list-container .list {
    background: #ffffff;
    border-radius: var(--bms-radius);
    box-shadow: var(--bms-card-shadow);
    overflow: hidden;
}

.list > table.table > thead > tr > th {
    background: #ffffff;
    border-bottom: 1px solid var(--bms-line);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--bms-light);
    padding-top: 12px;
    padding-bottom: 10px;
}

.list > table.table > thead > tr > th a,
.list > table.table > thead > tr > th a.sort {
    color: var(--bms-light);
}

.list > table.table > tbody > tr > td {
    border-top: 1px solid var(--bms-line);
    padding-top: 11px;
    padding-bottom: 11px;
    vertical-align: middle;
}

.list > table.table > tbody > tr:hover > td {
    background: var(--bms-surface);
}

.list > table.table > tbody > tr > td a.link {
    font-weight: 600;
}

.list-container .list-buttons-container,
.list-container .list-row-buttons {
    background: transparent;
}

/* Knöpfe: rund, kräftige Schrift, Hauptknopf mit Verlauf */
.btn {
    border-radius: 10px;
    font-weight: 600;
    transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}

.btn:active {
    transform: translateY(1px);
}

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    border-radius: 0;
}

.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn:first-child:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-default {
    background: #ffffff;
    border-color: var(--bms-line);
}

.btn-default:hover,
.btn-default:focus {
    background: #eef4fb;
    border-color: #cddbee;
}

.btn-primary {
    background: linear-gradient(135deg, #0d58b2, #2489be);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(13, 88, 178, .25);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #0a3d7a, #0d58b2);
    border-color: transparent;
}

.btn-success {
    box-shadow: 0 4px 14px rgba(114, 182, 74, .28);
}

.btn-text {
    border-radius: 10px;
}

/* Eingabefelder */
.form-control,
.input-group .form-control,
.selectize-control .selectize-input {
    border-radius: 10px;
    border: 1.5px solid var(--bms-line);
    box-shadow: none;
}

.input-group > .form-control:not(:first-child),
.input-group > .input-group-btn:not(:first-child) > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > .form-control:not(:last-child),
.input-group > .input-group-btn:not(:last-child) > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.form-control:focus,
.selectize-control .selectize-input.focus {
    border-color: var(--bms-teal);
    box-shadow: 0 0 0 3px rgba(36, 137, 190, .15);
}

/* Abzeichen (Status usw.) als Pillen */
.label {
    border-radius: 999px;
    padding: .25em .75em;
    font-weight: 700;
    font-size: 11.5px;
}

.label-default {
    background: #eceff3;
    color: var(--bms-muted);
}

.label-primary {
    background: #e3eef9;
    color: #0d58b2;
}

.label-success {
    background: #e3f1da;
    color: #4f8530;
}

.label-warning {
    background: #fff1dc;
    color: #b8741a;
}

.label-danger {
    background: #fde6dc;
    color: #c4472c;
}

.label-info {
    background: #def0f6;
    color: #1d6f9b;
}

/* Aufklappmenüs und Dialoge */
.dropdown-menu {
    border: 1px solid var(--bms-line);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(10, 61, 122, .14);
    padding: 6px;
}

.dropdown-menu > li > a {
    border-radius: 8px;
}

.modal-content {
    border: 0;
    border-radius: var(--bms-radius);
    box-shadow: 0 24px 60px rgba(10, 61, 122, .22);
    overflow: hidden;
}

.modal-header .modal-title {
    font-weight: 700;
    color: var(--bms-navy);
}

/* Startseite: Kacheln als Karten */
.dashlet-container .panel,
#dashlet-container .panel {
    border-radius: var(--bms-radius);
}

/* Verlauf/Ereignisse: Einträge mit Luft */
.stream .list > ul > li,
.list-group-item {
    border-color: var(--bms-line);
}

/* Telefonieren und Heute-Seite passen ohnehin; gleicher Hintergrund */
.bms-tel {
    --t-flaeche: var(--bms-surface);
}

/* Karte in der Karte ohne zweiten Schatten */
.panel .panel,
.panel .list,
.panel .list-container .list {
    box-shadow: none;
    border-radius: 0;
}

/* Listen-Karte bündig mit Überschrift und Suchleiste */
#main > .list-container > .list,
#main .list-container > .list {
    margin-left: 0;
    margin-right: 0;
}

.panel .list-container > .list {
    margin-left: -15px;
    margin-right: -15px;
}