/*
 * Cool-MedTec - Oberflaeche
 *
 * Mischung aus AdminLTE (dunkle Seitenleiste, weisse Kopfleiste, Karten mit farbiger Oberkante)
 * und Access 2010 (Registerkarten, Datenblatt-Tabellen, kompakte Felder).
 * Farben aus dem Office-Design der Access-Anwendung: Text 2 #1F497D, Akzent 1 #4F81BD,
 * Hintergrund 2 #EEECE1, Schrift Calibri.
 *
 * Reine CSS-Datei (kein Build-Schritt), wird nach den Filament-Styles geladen.
 */

:root {
    --cmt-nacht: #13294a;
    --cmt-dunkel: #17365d;
    --cmt-blau: #1f497d;
    --cmt-akzent: #4f81bd;
    --cmt-hell: #dce6f2;
    --cmt-hell2: #eef3f9;
    --cmt-linie: #b9cbe2;
    --cmt-feld: #a9bcd5;
    --cmt-grund: #eef1f5;
    --cmt-text: #1f2d3d;
    --cmt-label: #3b4f68;
    --cmt-orange: #f79646;
    --cmt-schatten: 0 0 1px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .16);
}

/* ------------------------------------------------------------------ Grundlayout */

.fi-body {
    background: var(--cmt-grund);
    color: var(--cmt-text);
}

.fi-main {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

.fi-page > section {
    row-gap: 1rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1.5rem !important;
}

.fi-header-heading {
    font-size: 1.65rem !important;
    line-height: 2rem;
    font-weight: 400 !important;
    letter-spacing: 0;
    color: var(--cmt-blau);
}

.fi-breadcrumbs {
    margin-bottom: .15rem;
}

.fi-breadcrumbs-item-label,
.fi-breadcrumbs a {
    font-size: .8rem !important;
}

/* ------------------------------------------------------------------ Seitenleiste (AdminLTE, dunkelblau) */

.fi-sidebar {
    background: var(--cmt-dunkel) !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22);
}

.fi-sidebar-header {
    background: var(--cmt-nacht) !important;
    height: 3.5rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.fi-sidebar-header .fi-logo,
.fi-sidebar-header .fi-logo * {
    color: #fff !important;
    font-weight: 600;
    letter-spacing: .01em;
}

.fi-sidebar-header .fi-icon-btn {
    color: #b7c7dc !important;
}

.fi-sidebar-nav {
    padding: .6rem .5rem 1.5rem !important;
    row-gap: .25rem !important;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
    scrollbar-width: thin;
}

.fi-sidebar-nav-groups {
    margin: 0 !important;
    row-gap: .1rem !important;
}

.fi-sidebar-group {
    row-gap: .1rem !important;
}

.fi-sidebar-group-items {
    row-gap: .05rem !important;
}

.fi-sidebar-group-button {
    padding: .5rem .75rem !important;
    border-radius: .25rem;
}

.fi-sidebar-group-button:hover {
    background: rgba(255, 255, 255, .07);
}

.fi-sidebar-group-label {
    color: #e2eaf4 !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
}

.fi-sidebar-group-collapse-button,
.fi-sidebar-group-button .fi-icon-btn,
.fi-sidebar-group-button svg {
    color: #93aacb !important;
}

.fi-sidebar-item-button {
    border-radius: .25rem !important;
    padding: .38rem .75rem !important;
}

.fi-sidebar-item-button:hover,
.fi-sidebar-item-button:focus-visible {
    background: rgba(255, 255, 255, .08) !important;
}

.fi-sidebar-item-label {
    color: #c9d6e7 !important;
    font-weight: 400 !important;
    font-size: .92rem !important;
}

.fi-sidebar-item-icon {
    color: #8ea7c9 !important;
}

.fi-sidebar-item-active > .fi-sidebar-item-button {
    background: var(--cmt-akzent) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

.fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-label,
.fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-icon {
    color: #fff !important;
    font-weight: 600 !important;
}

/* Baumlinien der Untereintraege */
.fi-sidebar-item-grouped-border > div {
    background: rgba(255, 255, 255, .18) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-grouped-border > div {
    background: #fff !important;
}

/* ------------------------------------------------------------------ Kopfleiste */

.fi-topbar > nav {
    height: 3.5rem !important;
    background: #fff !important;
    box-shadow: none !important;
    border-bottom: 1px solid #d5dde8;
}

.cmt-benutzer {
    margin-left: auto;
    font-size: .9rem;
    color: #44546a;
}

/* ------------------------------------------------------------------ Geoeffnete Fenster (Access: Dokumente im Registerformat) */

.cmt-fenster {
    position: sticky;
    top: 3.5rem;
    z-index: 19;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    min-height: 2.25rem;
    padding: .35rem 1.25rem 0;
    background: linear-gradient(var(--cmt-linie), var(--cmt-linie)) bottom / 100% 1px no-repeat, #e3e9f1;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.cmt-fenster-tab {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    max-width: 15rem;
    border: 1px solid var(--cmt-linie);
    border-bottom-color: var(--cmt-linie);
    border-radius: .3rem .3rem 0 0;
    background: linear-gradient(#f8fafc, #dbe4ef);
    font-size: .82rem;
    line-height: 1;
}

.cmt-fenster-tab:hover {
    background: #fff;
}

.cmt-fenster-tab a {
    padding: .45rem .3rem .45rem .7rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #2d4260;
}

.cmt-fenster-tab button {
    padding: .2rem .45rem .2rem .2rem;
    color: #7d8fa8;
    font-size: 1rem;
    line-height: 1;
}

.cmt-fenster-tab button:hover {
    color: #c0504d;
}

.cmt-fenster-tab.cmt-aktiv {
    background: #fff;
    border-bottom-color: #fff;
    box-shadow: inset 0 2px 0 var(--cmt-akzent);
}

.cmt-fenster-tab.cmt-aktiv a {
    color: var(--cmt-blau);
    font-weight: 700;
}

.cmt-fenster-leer {
    padding: .45rem 0;
    font-size: .8rem;
    color: #7d8fa8;
}

/* ------------------------------------------------------------------ Karten (AdminLTE card-outline) */

.fi-section,
.fi-ta-ctn,
.fi-fo-tabs,
.fi-wi-stats-overview-stat,
.fi-wi-chart > section,
.fi-in-section {
    border-radius: .25rem !important;
    box-shadow: var(--cmt-schatten) !important;
}

.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn {
    border-top: 3px solid var(--cmt-akzent);
}

.fi-section-header {
    padding: .6rem 1rem !important;
    border-bottom: 1px solid #e3e9f1;
    background: #fbfcfe;
}

.fi-section-header-heading {
    font-size: 1.02rem !important;
    font-weight: 600 !important;
    color: var(--cmt-blau) !important;
}

.fi-section-header-description {
    font-size: .82rem !important;
}

.fi-section-content {
    padding: 1rem !important;
}

.fi-section-content-ctn {
    border-color: #e3e9f1 !important;
}

/* ------------------------------------------------------------------ Registerkarten (Access) */

.fi-fo-tabs {
    background: #fff;
}

.fi-tabs {
    column-gap: 2px !important;
    row-gap: 2px;
    /* bei wenig Platz mehrzeilig wie Access-Registerkarten statt seitlich zu scrollen */
    flex-wrap: wrap;
}

/* Registerkarten-Leiste im Formular / Unterformulare */
.fi-tabs.fi-contained,
.fi-tabs:not(.fi-contained) {
    align-items: flex-end;
    margin: 0 !important;
    padding: .45rem .6rem 0 !important;
    border-radius: 0 !important;
    /* Grundlinie als Hintergrund - die aktive Karte deckt sie ab (kein Ueberlauf/Scrollbalken) */
    background: linear-gradient(var(--cmt-linie), var(--cmt-linie)) bottom / 100% 1px no-repeat, var(--cmt-hell2) !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    overflow-y: hidden;
}

.fi-tabs:not(.fi-contained) {
    border-radius: .25rem .25rem 0 0 !important;
    border: 1px solid var(--cmt-linie) !important;
    border-bottom: 0 !important;
    width: 100%;
}

.fi-tabs-item {
    padding: .42rem .95rem !important;
    border: 1px solid var(--cmt-linie);
    border-radius: .3rem .3rem 0 0 !important;
    background: linear-gradient(#ffffff, #e2eaf4) !important;
    color: #33475f !important;
    font-weight: 500 !important;
}

.fi-tabs-item:hover {
    background: #fff !important;
}

.fi-tabs-item.fi-active {
    background: #fff !important;
    border-bottom-color: #fff;
    box-shadow: inset 0 2px 0 var(--cmt-akzent);
}

.fi-tabs-item .fi-tabs-item-label,
.fi-tabs-item .fi-tabs-item-icon {
    color: inherit !important;
}

.fi-tabs-item.fi-active .fi-tabs-item-label {
    color: var(--cmt-blau) !important;
    font-weight: 700;
}

/* Unterformulare (Relation-Manager) direkt an die Registerkarten anschliessen */
.fi-resource-relation-managers {
    row-gap: 0 !important;
}

.fi-resource-relation-managers > .fi-tabs + * .fi-ta-ctn,
.fi-resource-relation-managers > .fi-tabs ~ * .fi-ta-ctn {
    border-top: 0;
    border-radius: 0 0 .25rem .25rem !important;
}

.fi-fo-tabs-tab {
    padding: 1rem !important;
}

/* ------------------------------------------------------------------ Formularfelder (kompakt wie Access) */

.fi-fo-component-ctn {
    gap: .8rem 1rem !important;
}

.fi-fo-field-wrp > .grid,
.fi-fo-field-wrp > div > .grid {
    row-gap: .2rem !important;
}

.fi-fo-field-wrp-label > span {
    font-size: .8rem !important;
    line-height: 1.1rem !important;
    font-weight: 600 !important;
    color: var(--cmt-label) !important;
}

.fi-input-wrp {
    border-radius: .2rem !important;
    --tw-ring-color: var(--cmt-feld) !important;
    --tw-shadow: 0 0 #0000 !important;
}

.fi-input-wrp:focus-within {
    --tw-ring-color: var(--cmt-akzent) !important;
}

.fi-input-wrp.fi-disabled {
    background: #f1f4f8 !important;
}

.fi-input,
.fi-select-input,
.fi-fo-date-time-picker .fi-input-wrp button,
.fi-fo-select .fi-input-wrp button {
    padding-top: .3rem !important;
    padding-bottom: .3rem !important;
}

.fi-input-wrp-prefix,
.fi-input-wrp-suffix {
    background: #f4f6fa;
}

.fi-fo-field-wrp-helper-text {
    font-size: .78rem !important;
}

.fi-checkbox-input,
.fi-toggle {
    --tw-ring-color: var(--cmt-feld);
}

.fi-fo-rich-editor,
.fi-fo-markdown-editor,
.fi-fo-textarea {
    border-radius: .2rem !important;
}

/* ------------------------------------------------------------------ Schaltflaechen */

.fi-btn,
.fi-icon-btn {
    border-radius: .25rem !important;
}

.fi-btn-size-md {
    padding: .38rem .8rem !important;
}

.fi-btn.fi-btn-color-gray {
    background: linear-gradient(#ffffff, #e8eef6) !important;
    --tw-ring-color: var(--cmt-feld) !important;
    color: #243650 !important;
}

.fi-btn.fi-btn-color-gray:hover {
    background: linear-gradient(#ffffff, #dde7f3) !important;
}

.fi-ac-btn-group,
.fi-dropdown-panel {
    border-radius: .25rem !important;
}

/* ------------------------------------------------------------------ Tabellen (Datenblatt) */

.fi-ta-header-toolbar {
    padding: .5rem .75rem !important;
}

.fi-ta-table > thead > tr {
    background: var(--cmt-hell);
}

.fi-ta-header-cell,
.fi-ta-table > thead th {
    padding-top: .45rem !important;
    padding-bottom: .45rem !important;
    border-right: 1px solid #c8d6e9;
    background: var(--cmt-hell);
}

.fi-ta-header-cell-label,
.fi-ta-header-cell button span {
    font-size: .8rem !important;
    font-weight: 700 !important;
    color: var(--cmt-blau) !important;
}

.fi-ta-table > tbody > tr {
    border-color: #e1e8f1 !important;
}

.fi-ta-table > tbody > tr:nth-child(even) {
    background: #f6f8fb;
}

.fi-ta-table > tbody > tr.fi-ta-row:hover {
    background: #e6eff9 !important;
}

.fi-ta-cell {
    border-right: 1px solid #edf1f6;
}

.fi-ta-text,
.fi-ta-icon,
.fi-ta-toggle,
.fi-ta-text-input,
.fi-ta-select {
    padding-top: .32rem !important;
    padding-bottom: .32rem !important;
}

.fi-ta-actions-cell > div,
.fi-ta-selection-cell > div,
.fi-ta-group-selection-cell > div {
    padding-top: .32rem !important;
    padding-bottom: .32rem !important;
}

.fi-ta-text-item-label {
    font-size: .88rem !important;
    line-height: 1.3rem !important;
}

.fi-ta-actions {
    column-gap: .6rem !important;
}

.fi-ta-filter-indicators {
    background: #f7f9fc !important;
}

.fi-pagination {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
}

.fi-ta-summary-row,
.fi-ta-summary-header-row {
    background: #f1f5fa !important;
}

/* ------------------------------------------------------------------ Kennzahlen (AdminLTE info-box) */

/* Kennzahlen als farbige Kaesten (AdminLTE small-box) in den Office-Akzentfarben */
.fi-wi-stats-overview-stat {
    --cmt-box: var(--cmt-akzent);
    position: relative;
    overflow: hidden;
    padding: 1rem 1.25rem !important;
    background: var(--cmt-box) !important;
    --tw-ring-color: transparent !important;
}

.fi-wi-stats-overview-stat:nth-child(6n+2) { --cmt-box: #31859c; }
.fi-wi-stats-overview-stat:nth-child(6n+3) { --cmt-box: #e46c0a; }
.fi-wi-stats-overview-stat:nth-child(6n+4) { --cmt-box: #76923c; }
.fi-wi-stats-overview-stat:nth-child(6n+5) { --cmt-box: #5f497a; }
.fi-wi-stats-overview-stat:nth-child(6n+6) { --cmt-box: #953735; }

.fi-wi-stats-overview-stat,
.fi-wi-stats-overview-stat * {
    color: #fff !important;
}

.fi-wi-stats-overview-stat-value {
    font-size: 2.1rem !important;
    font-weight: 700 !important;
}

.fi-wi-stats-overview-stat-label,
.fi-wi-stats-overview-stat-description {
    color: rgba(255, 255, 255, .88) !important;
}

/* grosses, blasses Symbol rechts wie bei AdminLTE */
.fi-wi-stats-overview-stat-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 4.2rem !important;
    height: 4.2rem !important;
    transform: translateY(-50%);
    opacity: .22;
}

/* ------------------------------------------------------------------ Dialoge, Meldungen */

.fi-modal-window {
    border-radius: .3rem !important;
}

.fi-modal-header {
    border-bottom: 1px solid #e3e9f1;
    background: #fbfcfe;
    border-radius: .3rem .3rem 0 0;
}

.fi-modal-heading {
    color: var(--cmt-blau) !important;
}

.fi-no-notification {
    border-radius: .3rem !important;
}

.fi-badge {
    border-radius: .2rem !important;
}

/* ------------------------------------------------------------------ Anmeldung */

.fi-simple-layout {
    background: linear-gradient(140deg, var(--cmt-nacht) 0%, var(--cmt-blau) 55%, var(--cmt-akzent) 100%);
}

.fi-simple-main {
    border-radius: .3rem !important;
    border-top: 4px solid var(--cmt-orange);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25) !important;
}

.fi-simple-header-heading {
    color: var(--cmt-blau);
}