/*
 * ==========================================================
 * FileRun topa-LE Theme
 * Basis: linkding topa-LE palette
 * ==========================================================
 */

:root {
    /* ---------- Fonts ---------- */
    --topa-font-maven: "Maven Pro";
    --topa-font-titillium: "Titillium Web";
    --topa-font-rajdhani: "Rajdhani";
    --topa-font-ubuntu: "Ubuntu";

    --topa-font: var(--topa-font-maven);
    --topa-font-fallback: sans-serif;

    /* ---------- Palette ---------- */
    --topa-bg: #0B1624;
    --topa-bg-soft: #101C29;
    --topa-surface: #152A3E;

    --topa-text: #D8E6F3;
    --topa-text-secondary: #8FA2B3;
    --topa-text-muted: #6F8191;

    --topa-steel: #5E7287;
    --topa-steel-hover: #71889E;

    --topa-orange: #F6C7A7;
    --topa-orange-hover: #F1BC98;

    --topa-input-bg: #1F2D3C;
    --topa-border: #34495D;
    --topa-border-soft: #1f2934;
}

/* ==========================================================
   GLOBAL FONT
   ========================================================== */

html,
body,
button,
input,
select,
textarea {
    font-family:
        var(--topa-font),
        var(--topa-font-fallback) !important;
}

/* ==========================================================
   GLOBAL BASE
   ========================================================== */

html,
body {
    background: var(--topa-bg) !important;
    color: var(--topa-text) !important;
}

/* Links */
a {
    color: var(--topa-text-secondary);
}

a:hover {
    color: var(--topa-text);
}

/* Inputs */
input,
textarea,
select {
    background-color: var(--topa-input-bg) !important;
    color: var(--topa-text) !important;
    border-color: var(--topa-border) !important;
}

/* Buttons - conservative first pass */
button {
    font-family:
        var(--topa-font),
        var(--topa-font-fallback) !important;
}

/*
 * ==========================================================
 * END BASE
 * ==========================================================
 */

/*
 * ==========================================================
 * FILERUN 2026 - TOPA-LE DARK OVERRIDES
 * ==========================================================
 */

:root {
    /* FileRun core theme variables */
    --theme-bg: #0B1624;
    --theme-on-bg: #D8E6F3;

    --theme-surface: #152A3E;
    --theme-on-surface: #D8E6F3;

    --theme-surface2: #101C29;
    --theme-surface2-variant: #1F2D3C;

    --theme-ui-surface: #0b1624;

    --theme-primary: #5E7287;
    --theme-on-primary: #D8E6F3;

    --theme-secondary-container: #23384C;
    --theme-on-secondary-container: #D8E6F3;

    --theme-menu-highlight: #152A3E;
    --theme-menu-highlight-alt: #1F2D3C;

    --theme-form-field-bg: #1F2D3C;
    --theme-form-field-border: #34495D;

    --theme-folder-icon-color: #8FA2B3;

    --theme-links: #7FA0BC;
    --theme-links-hover: #A6BED3;

    --theme-textLight: #8FA2B3;
    --theme-textLighter: #6F8191;

    --theme-textHighContrast: #F4F8FC;

    --sBCol: #1f2934;
    --hBCol: #5E7287;

    --focus-outline: #71889E solid 1px;

    --theme-button-border-color: #34495D;

    --theme-bg-tooltip: #152A3E;
    --theme-text-tooltip: #D8E6F3;

    --md-elevation-bg-level2: #152A3E;
}

/* Basis etwas harmonisieren */
html,
body {
    background-color: var(--theme-bg) !important;
    color: var(--theme-on-bg) !important;
}

/* Oberfläche / Panels */
.surface {
    background-color: var(--theme-surface) !important;
    color: var(--theme-on-surface) !important;
}

/* Scrollbars */
::-webkit-scrollbar-thumb {
    background-color: var(--hBCol) !important;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--topa-steel-hover) !important;
}

/* Auswahl-/Aktivflächen etwas weicher */
.fr-is-dark {
    --theme-mask: rgba(11, 22, 36, 0.72);
}

/*
 * ==========================================================
 * END FILERUN TOPA-LE DARK OVERRIDES
 * ==========================================================
 */

/*
 * ==========================================================
 * STEP 65 - TOPA-LE FEINTUNING
 * ==========================================================
 */

/* Grundschrift etwas größer */
html {
    font-size: 15px !important;
}

/* Haupttext */
body {
    color: var(--topa-text) !important;
}

/* Dezente vertikale Trennung Sidebar / Content */
.fr-sidebar,
aside,
nav {
    border-right: 1px solid rgba(143, 162, 179, 0.18) !important;
}

/* Links / aktive Navigation */
a,
button {
    transition:
        color .18s ease,
        background-color .18s ease,
        border-color .18s ease;
}

/* Orange nur als feiner Akzent */
.fr-is-dark a:hover,
.fr-is-dark button:hover {
    color: var(--topa-orange-hover);
}

/* Aktive Elemente weiter stahlblau, nicht orange */
[aria-current="page"],
.active,
.selected {
    border-color: var(--topa-steel) !important;
}

/* Überschriften etwas kräftiger */
h1,
h2,
h3,
h4 {
    color: var(--topa-text) !important;
    font-weight: 600 !important;
}

/* Breadcrumbs / Pfade */
.breadcrumb,
.breadcrumb a {
    color: var(--topa-text-secondary) !important;
}

.breadcrumb a:hover {
    color: var(--topa-orange) !important;
}

/*
 * ==========================================================
 * END STEP 65
 * ==========================================================
 */

/*
 * ==========================================================
 * STEP 67 - TRANSPARENTE / PLACEHOLDER FLAECHEN
 * ==========================================================
 */

:root {
    --theme-bg-transparent: #161B22E6;
}

/*
 * ==========================================================
 * END STEP 67
 * ==========================================================
 */

/*
 * ==========================================================
 * TOPA-LE - FILE PLACEHOLDER / PREVIEW BACKGROUND
 * ==========================================================
 */

/* Neutraler Schwarz-Anthrazit-Ton statt Rot-/Violettstich */
:root {
    --theme-bg-transparent: rgba(18, 22, 27, 0.96) !important;
    --theme-bg-more-transparent: rgba(18, 22, 27, 0.82) !important;
}



/*
 * ==========================================================
 * topa-LE – Popup-/Kontextmenü Separatoren
 * Schritt 58
 *
 * Einheitlicher Separator-Ton wie linke Navigation:
 * #1f2934
 * ==========================================================
 */

/* Material-UI / FileRun Popup-Menüs */
.MuiMenu-paper .MuiDivider-root,
.MuiPopover-paper .MuiDivider-root,
[role="menu"] .MuiDivider-root,
[role="menu"] hr {
    border-color: #1f2934 !important;
    background-color: #1f2934 !important;
}

/*
 * Falls Divider als Border des Menüeintrags umgesetzt ist:
 */
[role="menu"] .MuiListItem-root,
[role="menu"] .MuiMenuItem-root {
    border-color: #1f2934 !important;
}


/*
 * ==========================================================
 * STEP 76 - DROPDOWN / KONTEXTMENUE TRENNLINIEN
 * ==========================================================
 */

/* Horizontale Unterteilungen in Popup-/Dropdown-Menüs */
.x-menu:not(.x-toolbar) .x-menu-sep {
    border-top-color: #1F2934 !important;
}

/* Obere Trennlinie spezieller Tree-Menüs */
.x-menu.treeLikeMenu {
    border-top-color: #1F2934 !important;
}

/* Vertikale Separatoren innerhalb von Menüs */
.x-menu .x-menu-sep {
    border-left-color: #1F2934 !important;
}

/*
 * ==========================================================
 * END STEP 76
 * ==========================================================
 */

/*
 * STEP 77 - finale Farbe der Menü-Trennlinien
 */

.x-menu:not(.x-toolbar) .x-menu-sep {
    border-top: 1px solid #1F2934 !important;
}

.x-menu.treeLikeMenu {
    border-top: 1px solid #1F2934 !important;
}

.x-menu .x-menu-sep {
    border-left-color: #1F2934 !important;
}


/* STEP 78 - Testfarbe Menü-Trennlinien */

.x-menu:not(.x-toolbar) .x-menu-sep {
    border-top: 1px solid #0A1B2D !important;
}

.x-menu.treeLikeMenu {
    border-top: 1px solid #0A1B2D !important;
}

.x-menu .x-menu-sep {
    border-left-color: #0A1B2D !important;
}


/*
 * ==========================================================
 * STEP 83 - TRENNLINIEN SAUBER ENTKOPPELN
 * ==========================================================
 */

/* Allgemeine dezente UI-Trennung wieder wie vorher */
:root {
    --sBCol: #1e2935 !important;
}

/* NUR Dropdown- und Kontextmenü-Trennlinien */
.x-menu:not(.x-toolbar) .x-menu-sep {
    border-top: 1px solid #232E39 !important;
}

.x-menu.treeLikeMenu {
    border-top: 1px solid #232E39 !important;
}

.x-menu .x-menu-sep {
    border-left-color: #232E39 !important;
}

/*
 * ==========================================================
 * END STEP 83
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 93 - TOPA-LE TRENNLINIEN GETRENNT STEUERN
 * ==========================================================
 */

:root {
    /* Drei-Punkte-, Kontext- und Dropdown-Menüs */
    --topa-dropdown-divider: #2F3C47;

    /* Linke Navigation, horizontale Unterteilung */
    --topa-nav-divider: #1F2D3C;
}

/* NUR horizontale Trennlinien innerhalb der Dropdown-Menüs */
.x-menu:not(.x-toolbar) .x-menu-sep {
    border-top: 1px solid var(--topa-dropdown-divider) !important;
}

/* NUR vertikale Separatoren innerhalb von Dropdown-Menüs */
.x-menu:not(.x-toolbar) .x-menu-sep {
    border-left-color: var(--topa-dropdown-divider) !important;
}

/* NUR horizontale Unterteilung der linken Navigation */
.x-menu.treeLikeMenu {
    border-top: 1px solid var(--topa-nav-divider) !important;
}

/*
 * ==========================================================
 * END STEP 93
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 97 - VERTIKALE TRENNUNG NAVIGATION / CONTENT
 * ==========================================================
 */

#FR-Tree-Region .x-border-panel-resizer.west:after {
    border-left: none !important;
    border-right: 1px solid var(--topa-nav-divider) !important;
}

/*
 * ==========================================================
 * END STEP 97
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 100 - NUR DROPDOWN/KONTEXTMENUE HOVER
 * ==========================================================
 */

:root {
    --topa-dropdown-hover-bg: #213649;
}

/* Nur Einträge in Popup-/Dropdown-/Kontextmenüs */
.x-menu:not(.x-toolbar) .x-menu-item:hover,
.x-menu:not(.x-toolbar) .x-menu-item:focus,
.x-menu:not(.x-toolbar) .frBtn.x-menu-item:hover,
.x-menu:not(.x-toolbar) .frBtn.x-menu-item:focus {
    background-color: var(--topa-dropdown-hover-bg) !important;
    color: var(--topa-orange-hover) !important;
}

/*
 * ==========================================================
 * END STEP 100
 * ==========================================================
 */

/*
 * ==========================================================
 * STEP 113 - POPUP / DIALOG FENSTER
 * ==========================================================
 */

:root {
    --topa-window-bg: #070F18;
}

/* FileRun Dialog- und Popup-Fenster */
.x-window {
    background-color: var(--topa-window-bg) !important;
}

/*
 * ==========================================================
 * END STEP 113
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 117 - RECHTE DETAIL-PANEL TRENNUNG
 * ==========================================================
 */

/* Rechte Detail-/Info-Seitenleiste */
#FR-Info-Region:not(.x-panel-floating) {
    border-left: 1px solid var(--topa-nav-divider) !important;
}

/* Unterteilungen innerhalb des rechten Detail-Panels */
#FR-Info-Region .x-menu-sep,
#FR-Info-Region .x-panel-body,
#FR-Info-Region .borderedBody .x-window-body {
    border-color: var(--topa-nav-divider) !important;
}

/*
 * ==========================================================
 * END STEP 117
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 121 - NUNITO
 * ==========================================================
 */

@font-face {
    font-family: "Nunito";
    src: url("/customizables/fonts/nunito/Nunito-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
}

:root {
    --topa-font-nunito: "Nunito";

    /* Nunito testweise aktiv */
    --topa-font: var(--topa-font-saira);
}

/*
 * ==========================================================
 * END STEP 121
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 125 - LOCAL TOPA-LE FONT LIBRARY
 * ==========================================================
 */

@font-face {
    font-family: "Maven Pro";
    src: url("/customizables/fonts/maven-pro/MavenPro-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
}

@font-face {
    font-family: "Titillium Web";
    src: url("/customizables/fonts/titillium-web/TitilliumWeb-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Titillium Web";
    src: url("/customizables/fonts/titillium-web/TitilliumWeb-SemiBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Rajdhani";
    src: url("/customizables/fonts/rajdhani/Rajdhani-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Rajdhani";
    src: url("/customizables/fonts/rajdhani/Rajdhani-SemiBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Ubuntu";
    src: url("/customizables/fonts/ubuntu/Ubuntu-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Ubuntu";
    src: url("/customizables/fonts/ubuntu/Ubuntu-Medium.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Merriweather";
    src: url("/customizables/fonts/merriweather/Merriweather-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
}

@font-face {
    font-family: "Saira";
    src: url("/customizables/fonts/saira/Saira-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --topa-font-maven: "Maven Pro";
    --topa-font-titillium: "Titillium Web";
    --topa-font-rajdhani: "Rajdhani";
    --topa-font-ubuntu: "Ubuntu";
    --topa-font-nunito: "Nunito";
    --topa-font-merriweather: "Merriweather";
    --topa-font-saira: "Saira";

    /* aktuell Nunito aktiv lassen */
    --topa-font: var(--topa-font-saira);
}

/*
 * ==========================================================
 * END STEP 125
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 126 - ACTIVE FONT: TITILLIUM WEB
 * ==========================================================
 */

:root {
    --topa-font: var(--topa-font-titillium);
}

/*
 * END STEP 126
 */


/*
 * ==========================================================
 * STEP 127 - DATEI-BOXEN IM AKTIVITAETSPANEL
 * ==========================================================
 */

:root {
    --topa-activity-file-bg: #101C29;
}

/* Nur die Dateiverweise innerhalb des rechten Aktivitätspanels */
.fr-activity-panel .x-pill.x-pill-file.fileItem {
    background-color: var(--topa-activity-file-bg) !important;
    border-color: #1F2D3C !important;
}

/*
 * ==========================================================
 * END STEP 127
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 128 - ACTIVITY EVENT BOXEN
 * ==========================================================
 */

:root {
    --topa-activity-event-bg: #101C29;
}

/* Große Activity-Einträge rechts */
.fr-activity-panel .x-grid3 .x-grid3-body .eventItem {
    background-color: var(--topa-activity-event-bg) !important;
    border-radius: 8px !important;
}

/* Falls FileRun die sichtbare Fläche auf .subEntry legt */
.fr-activity-panel .x-grid3 .x-grid3-body .eventItem .subEntry {
    background-color: transparent !important;
}

/*
 * ==========================================================
 * END STEP 128
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 129 - DATEI-PILLS IM AKTIVITAETSBEREICH
 * ==========================================================
 */

:root {
    --topa-activity-pill-bg: #152A3E;
}

/* Nur die abgerundeten Datei-Buttons unter Aktivität */
.fr-activity-panel .eventItem .x-pill,
.fr-activity-panel .eventItem .x-pill.x-pill-file,
.fr-activity-panel .eventItem .x-pill-file.fileItem {
    background: var(--topa-activity-pill-bg) !important;
    background-color: var(--topa-activity-pill-bg) !important;
}

/*
 * ==========================================================
 * END STEP 129
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 141 - TOPA-LE LOGO IM LINKEN HEADER
 * ==========================================================
 */

#FR-Tree-Region:not(.x-panel-floating) > .x-panel-header {
    background-image: url("/customizables/branding/logo.png?v=20260903164313") !important;
    background-repeat: no-repeat !important;
    background-position: calc(50% - 8px) center !important;
    background-size: 240px auto !important;
}

/* bisherigen FileRun-Schriftzug ausblenden */
#FR-Tree-Region:not(.x-panel-floating) > .x-panel-header .x-panel-header-text,
#FR-Tree-Region:not(.x-panel-floating) > .x-panel-header .header-text {
    color: transparent !important;
    font-size: 0 !important;
}

/*
 * ==========================================================
 * END STEP 141
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 149 - CPANEL WESTSPALTE
 * ==========================================================
 */

/*
 * Nur die linke West-Spalte, die den CPanel-Baum enthält.
 * Haupt-Dateiansicht bleibt unangetastet.
 */
.x-border-panel.west:has(#FR-cPanel-Tree),
.x-border-panel.west:has(#FR-cPanel-Tree) > .x-panel-header,
.x-border-panel.west:has(#FR-cPanel-Tree) > .x-panel-bwrap,
.x-border-panel.west:has(#FR-cPanel-Tree) .x-panel-body,
.x-border-panel.west:has(#FR-cPanel-Tree) .x-toolbar,
.x-border-panel.west:has(#FR-cPanel-Tree) .x-panel-bbar {
    background: var(--theme-bg) !important;
    background-color: var(--theme-bg) !important;
}

/*
 * ==========================================================
 * END STEP 149
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 150 - CPANEL TRENNLINIEN DEZENT
 * ==========================================================
 */

:root {
    --topa-cpanel-divider: #13202C;
}

/* Abschnittstrenner links */
.x-border-panel.west:has(#FR-cPanel-Tree)
:has(> .cpanel_section):not(:first-child) {
    border-top-color: var(--topa-cpanel-divider) !important;
}

/* Trennlinien im rechten Admin-Content */
.fr-admin-tbar,
#gridTab .x-panel-bbar,
#gridTab .x-grid3-header,
#gridTab .x-grid3-row {
    border-color: var(--topa-cpanel-divider) !important;
}

/*
 * ==========================================================
 * END STEP 150
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 151 - CPANEL LEGACY / NICEBORDER TABELLEN
 * ==========================================================
 */

:root {
    /* Trennlinien der alten FileRun-Tabellen */
    --topa-admin-table-border: #28313B;

    /* leicht abgesetzte Tabellenfläche */
    --topa-admin-table-bg: #1F2D3C;

    /* Kopfzeile etwas stärker absetzen */
    --topa-admin-table-header-bg: #132333;
}

/* 1px-Abstände zwischen den Zellen ergeben die Linien */
table.niceborder {
    background-color: var(--topa-admin-table-border) !important;
    border-spacing: 1px !important;
}

/* eigentliche Tabellenfläche */
table.niceborder td {
    background-color: var(--topa-admin-table-bg) !important;
}

/* Tabellenkopf */
table.niceborder td.header,
table.niceborder tr.header td {
    background-color: var(--topa-admin-table-header-bg) !important;
}

/*
 * ==========================================================
 * END STEP 151
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 154 - CPANEL BENUTZER GRID INLAY
 * ==========================================================
 */

:root {
    --topa-admin-inlay-bg: #23384C;
    --topa-admin-inlay-toolbar-bg: #182838;
}

/* Benutzer-/Grid-Inhalt */
.fr-admin-panel .x-panel-body.x-grid3,
.fr-admin-panel .x-grid3-body {
    background-color: var(--topa-admin-inlay-bg) !important;
}

/* obere Grid-Toolbar */
.fr-admin-panel .x-toolbar.x-grid-header-toolbar {
    background-color: var(--topa-admin-inlay-toolbar-bg) !important;
}

/*
 * ==========================================================
 * END STEP 154
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 154 - CPANEL GRID-KOPFZEILE
 * ==========================================================
 */

.x-toolbar.x-grid-header-toolbar {
    background-color: #141A20 !important;
}

/*
 * ==========================================================
 * END STEP 154
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 166 - ADMIN FIELDSET BOXEN
 * ==========================================================
 */

:root {
    --topa-admin-fieldset-bg: #1F2D3C;
}

/*
 * Exakte DOM-Struktur:
 * .x-panel-body.x-form > .x-fieldset
 */
.x-panel-body.x-form > .x-fieldset {
    background-color: var(--topa-admin-fieldset-bg) !important;
}

/* Kinder transparent lassen, damit die gemeinsame Boxfläche sichtbar bleibt */
.x-panel-body.x-form > .x-fieldset > .x-fieldset-header,
.x-panel-body.x-form > .x-fieldset > .x-fieldset-bwrap {
    background-color: transparent !important;
}

/*
 * ==========================================================
 * END STEP 166
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 167 - FIELDSET HEADER + SELECT
 * ==========================================================
 */

:root {
    --topa-admin-fieldset-header-bg: #1A2836;
    --topa-admin-select-bg: #141A20;
}

/* Kopfbereich der wiederkehrenden Admin-Boxen */
.x-panel-body.x-form > .x-fieldset > .x-fieldset-header {
    background-color: var(--topa-admin-fieldset-header-bg) !important;
}

/* Select-/Trigger-Felder innerhalb dieser Admin-Boxen */
.x-panel-body.x-form > .x-fieldset .x-form-field-trigger-wrap,
.x-panel-body.x-form > .x-fieldset .x-trigger-wrap,
.x-panel-body.x-form > .x-fieldset select {
    background-color: var(--topa-admin-select-bg) !important;
}

/*
 * ==========================================================
 * END STEP 167
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 169 - ADMIN CHECKBOX
 * ==========================================================
 */

/* Checkboxen innerhalb der Admin-Fieldsets:
 * gleiche dunkle Fläche wie Select-/Trigger-Felder
 */
.x-panel-body.x-form > .x-fieldset input.x-form-checkbox,
.x-panel-body.x-form > .x-fieldset .x-form-field.x-form-checkbox {
    background-color: var(--topa-admin-select-bg) !important;
}

/*
 * ==========================================================
 * END STEP 169
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 173 - ADMIN CHECKBOX CUSTOM
 * ==========================================================
 */

/* Nur Checkboxen innerhalb unserer Admin-Fieldsets */
.x-panel-body.x-form > .x-fieldset input.x-form-checkbox {
    appearance: none !important;
    -webkit-appearance: none !important;

    width: 1rem !important;
    height: 1rem !important;

    background-color: var(--topa-admin-select-bg) !important;

    border: 1px solid #34495D !important;
    border-radius: 3px !important;

    display: inline-grid !important;
    place-content: center !important;
}

/* Hover */
.x-panel-body.x-form > .x-fieldset input.x-form-checkbox:hover {
    border-color: #5E7287 !important;
}

/* Checked */
.x-panel-body.x-form > .x-fieldset input.x-form-checkbox:checked {
    background-color: var(--topa-admin-select-bg) !important;
    border-color: var(--topa-orange) !important;
}

/* Haken */
.x-panel-body.x-form > .x-fieldset input.x-form-checkbox:checked::after {
    content: "";
    width: 0.45rem;
    height: 0.22rem;

    border-left: 2px solid var(--topa-orange) !important;
    border-bottom: 2px solid var(--topa-orange) !important;

    transform: rotate(-45deg) translateY(-1px);
}

/*
 * ==========================================================
 * END STEP 173
 * ==========================================================
 */


/*
 * ==========================================================
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 175 - FILERUN SECONDARY BUTTONS
 * ==========================================================
 */

/* Grundzustand */
.frBtn.fr-btn-secondary,
.frBtn.fr-btn-link.fr-btn-secondary {
    background-color: #141A20 !important;
    color: var(--topa-text) !important;
}

/* Hover:
 * FileRun-Hoverfarbe selbst nicht überschreiben,
 * nur Schrift/Icon hell halten.
 */
.frBtn.fr-btn-secondary:hover,
.frBtn.fr-btn-link.fr-btn-secondary:hover {
    color: var(--topa-text) !important;
}

/*
 * ==========================================================
 * END STEP 175
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 176 - SECONDARY BUTTON HOVER
 * ==========================================================
 */

.frBtn.fr-btn-secondary:hover,
.frBtn.fr-btn-link.fr-btn-secondary:hover {
    background-color: #23384c !important;
    color: var(--topa-text) !important;
}

/*
 * ==========================================================
 * END STEP 176
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 178 - SECONDARY BUTTON BORDER
 * ==========================================================
 */

/* Einheitliche dezente Border fuer Secondary Buttons */
.frBtn.fr-btn-secondary,
.frBtn.fr-btn-link.fr-btn-secondary {
    border-color: #26323d !important;
}

/*
 * END STEP 178
 * ==========================================================
 */

/*
 * ==========================================================
 * STEP 179 - GRID FILTER COMBO
 * ==========================================================
 */

/* Filter-/Select-Feld oberhalb der Dateiansicht, z.B. "Typ" */
.grid-filter-combo {
    background-color: #101c29 !important;
}

/*
 * END STEP 179
 * ==========================================================
 */

/*
 * ==========================================================
 * STEP 180 - GRID FILTER COMBO FINAL
 * ==========================================================
 */

.grid-filter-combo {
    background-color: #141A20 !important;
    border-color: #26323D !important;
}

/*
 * END STEP 180
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 184 - DETAILPANEL TRENNLINIE
 * ==========================================================
 */

:root {
    --topa-info-divider: #26323D;
}

/* Nur rechte Detailleiste: Linie unter Details / Aktivität */
#FR-Info-Region .x-tab-strip,
.fr-info-panel > .x-panel-tbar .x-tab-strip {
    border-bottom-color: var(--topa-info-divider) !important;
}

/*
 * END STEP 184
 * ==========================================================
 */


/* ============================================================
 * topa-LE – Detailpanel: Trenner oberhalb Tags
 * ============================================================ */

.fr-details-tags.details-generic-panel {
    border-top-color: #26323D !important;
}


/* ============================================================
 * topa-LE – Grid-Kacheln / Ruhezustand
 * Kacheln dezent vom Haupt-Hintergrund abheben
 * ============================================================ */

.gridItem {
    background-color: #101C29 !important;
}


/*
 * ==========================================================
 * STEP 189 - TEST: GRID-KACHEL INNENFLAECHE ROT
 * ==========================================================
 */

/* Nur zum Finden des sichtbaren Kachel-Layers */
.gridItem .commonRow,
.gridItem .commonRow .center {
    background-color: #2C343D !important;
}

/*
 * END STEP 189
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 192 - GRID-KACHEL NORMAL + HOVER
 * ==========================================================
 */

/* Ruhezustand */
.gridItem .commonRow {
    background-color: #2C343D !important;
}

/* Hover */
.gridItem:hover .commonRow {
    background-color: #23384C !important;
}

/*
 * END STEP 192
 * ==========================================================
 */


/*
 * ==========================================================
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 194 - GRID-KACHEL NORMAL + EINHEITLICHER HOVER
 * ==========================================================
 */

/* Ruhezustand */
.gridItem .commonRow,
.gridItem .commonRow .center {
    background-color: #2C343D !important;
}

/* Hover außen + innen identisch */
.gridItem:hover .commonRow,
.gridItem:hover .commonRow .center {
    background-color: #23384C !important;
}

/*
 * END STEP 194
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 196 - CORNER MENU TEXT NICHT KUERZEN
 * ==========================================================
 */

#cornerMenu .x-menu-item > span {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

/*
 * END STEP 196
 * ==========================================================
 */


/*
 * ==========================================================
 * ==========================================================
 */


/*
 * ==========================================================
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 204 - ORDNERDETAILS FIELDSET BODY PADDING
 * ==========================================================
 */

.fr-details-panel .x-fieldset-body.x-form {
    padding: 25px !important;
}

/*
 * END STEP 204
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 205 - ORDNERDETAILS FIELDSET HEADER PADDING
 * ==========================================================
 */

/* Header der Detail-Fieldsets, z.B. "Ordnerdetails" */
.fr-details-panel .x-fieldset > .x-fieldset-header {
    padding: 25px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/*
 * END STEP 205
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 206 - DETAIL-FIELDSET HEADER TEXTFARBE
 * ==========================================================
 */

/* Überschriften wie "Ordnerdetails" dezent vom Inhalt absetzen */
.fr-details-panel .x-fieldset .x-fieldset-header .x-fieldset-header-text {
    color: #9dbfde !important;
}

/*
 * END STEP 206
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 208 - METADATEN INPUT-FELDER
 * ==========================================================
 */

/* Textfelder wie "Autor" und "Beschreibung" */
.fr-details-panel .x-form-text {
    background-color: #141a20 !important;
}

/*
 * END STEP 208
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 210 - METADATEN AUTOR INPUT
 * ==========================================================
 */

#textfield-7.x-form-field.x-form-text {
    background-color: #141A20 !important;
}

/*
 * END STEP 210
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 211 - METADATEN BESCHREIBUNG INPUT
 * ==========================================================
 */

#textfield-9.x-form-field.x-form-text {
    background-color: #141A20 !important;
}

/*
 * END STEP 211
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 239 - VIDEO VIEWER HINTERGRUND
 * ==========================================================
 */

/* Zentraler Preview-/Video-Bereich */
.x-panel.fr-is-dark.x-border-panel.center:has(.fr-prv-tbar),
.x-panel.fr-is-dark.x-border-panel.center:has(.fr-prv-tbar) > .x-panel-tbar,
.x-panel.fr-is-dark.x-border-panel.center:has(.fr-prv-tbar) > .x-panel-bwrap,
.x-panel.fr-is-dark.x-border-panel.center:has(.fr-prv-tbar) > .x-panel-bbar,
.x-panel.fr-is-dark.x-border-panel.center:has(.fr-prv-tbar) .x-panel-body.canvas {
    background: #0b1624 !important;
    background-color: #0b1624 !important;
}

/*
 * END STEP 239
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 240 - NUMBERFIELD-6 HINTERGRUND
 * ==========================================================
 */

#numberfield-6.x-form-field.x-form-number {
    background-color: #141A20 !important;
}

/*
 * END STEP 240
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 251 - SUCCESS FEEDBACK
 * ==========================================================
 */

.fr-feedback-success {
    background: #166534 !important;
    background-color: #166534 !important;
    color: #ffffff !important;
}

/* Inhalt und Text der Erfolgsmeldung */
.fr-feedback-success .x-window-body,
.fr-feedback-success .x-window-body *,
.fr-feedback-success .x-window-header,
.fr-feedback-success .x-window-header * {
    color: #ffffff !important;
}

/*
 * END STEP 251
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 249 - PASSWORDRICHTLINIE NUMBERFIELD-5
 * ==========================================================
 */

input#numberfield-5.x-form-field.x-form-number {
    background: #141a21 !important;
    background-color: #141a21 !important;
}


/*
 * STEP 250 - Authentifizierung - URL Konto erstellen
 */
input#textfield-18.x-form-field.x-form-text {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 251 - Authentifizierung - Weiterleitungs-URL nach Abmeldung
 */
input#textfield-19.x-form-field.x-form-text {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 252 - Authentifizierung - Abmelde-URL
 */
input#textfield-20.x-form-field.x-form-text {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 253 - Numberfield-4
 */
input#numberfield-4.x-form-field.x-form-number {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 254 - Numberfield-8
 */
input#numberfield-8.x-form-field.x-form-number {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 255 - Numberfield-9
 */
input#numberfield-9.x-form-field.x-form-number {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 256 - Numberfield-14
 */
input#numberfield-14.x-form-field.x-form-number {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 257 - Numberfield-15
 */
input#numberfield-15.x-form-field.x-form-number {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 258 - Numberfield-19
 */
input#numberfield-19.x-form-field.x-form-number {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 259 - Numberfield-21
 */
input#numberfield-21.x-form-field.x-form-number {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 260 - Numberfield-22
 */
input#numberfield-22.x-form-field.x-form-number {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 261 - Numberfield-23
 */
input#numberfield-23.x-form-field.x-form-number {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 262 - Radio-9
 */
/*
 * STEP 263 - Textfield-4
 */
input#textfield-4.x-form-field.x-form-text {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 264 - Textfield-5
 */
input#textfield-5.x-form-field.x-form-text {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 265 - Textarea-8
 */
textarea#textarea-8.x-form-field.x-form-text.x-form-field-grow {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 266 - Textfield-10
 */
input#textfield-10.x-form-field.x-form-text {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 267 - Textfield-11
 */
input#textfield-11.x-form-field.x-form-text {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 268 - Textfield-12
 */
input#textfield-12.x-form-field.x-form-text {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 269 - Textfield-14
 */
input#textfield-14.x-form-field.x-form-text {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 270 - Textfield-16
 */
input#textfield-16.x-form-field.x-form-text {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 271 - Textarea-19
 */
textarea#textarea-19.x-form-field.x-form-text.x-form-field-grow {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 272 - Theme-Farbfeld Primaer
 */
input#ui_theme_css_var_Core\.Material_dark_theme-primary.x-form-field.x-form-text {
    background: #3f5c7c !important;
    background-color: #3f5c7c !important;
}


/*
 * STEP 272 - Theme-Farbfeld Primaer
 */
input#ui_theme_css_var_Core\.Material_dark_theme-primary.x-form-field.x-form-text {
    background: #040c16 !important;
    background-color: #040c16 !important;
}


/*
 * STEP 273 - Passwortfeld API-Schluessel
 */
input#password-6.x-form-field.x-form-text {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 274 - Textarea-8
 */
textarea#textarea-8.x-form-field.x-form-text {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 275 - Trigger-5 Benutzer oder Gruppe
 */
input#trigger-5.x-form-field.x-form-text {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 276 - Superbox-208 E-Mail-Adresse
 */
input#superbox-208.x-form-field.x-superboxselect-input-field {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 277 - Textarea-5 Beschreibung
 */
textarea#textarea-5.x-form-field.x-form-text {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 278 - Textarea-6 Beschreibung
 */
textarea#textarea-6.x-form-field.x-form-text {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 279 - Superbox-12 Dateierweiterungen
 */
input#superbox-12.x-form-field.x-superboxselect-input-field {
    background: #5e7287 !important;
    background-color: #5e7287 !important;
}


/*
 * STEP 280 - Superbox-14 Dateitypen
 */
input#superbox-14.x-form-field.x-superboxselect-input-field {
    background: #5e7287 !important;
    background-color: #5e7287 !important;
}


/*
 * STEP 281 - Textfield-29 magic/convert-Pfad
 */
input#textfield-29.x-form-field.x-form-text {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 282 - Textfield-37 FFmpeg-Pfad
 */
input#textfield-37.x-form-field.x-form-text {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 283 - Textfield-38 Zusätzliche FFmpeg-Befehlsargumente
 */
input#textfield-38.x-form-field.x-form-text {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 284 - Textfield-44 FFmpeg-Zeitposition
 */
input#textfield-44.x-form-field.x-form-text {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 285 - Superbox-42 FFmpeg-Miniaturbilder / Dateiformate
 */
input#superbox-42.x-form-field.x-superboxselect-input-field {
    background: #5e7287 !important;
    background-color: #5e7287 !important;
}


/*
 * STEP 285 - Superbox-33 FFmpeg-Miniaturbilder / Dateiformate
 */
input#superbox-33.x-form-field.x-superboxselect-input-field {
    background: #5e7287 !important;
    background-color: #5e7287 !important;
}


/*
 * STEP 286 - SuperBox Container-7 / Dateitypen
 */
div#container-7.x-superboxselect-list {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 286 - SuperBox Container-7 / Dateitypen
 */
div#container-7.x-superboxselect-list {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 287 - FileRun SuperBoxSelect Input-Felder
 */
input.x-superboxselect-input-field {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 287 - FileRun SuperBoxSelect Input-Felder
 */
input.x-superboxselect-input-field {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 288 - FileRun NumberField Eingabefelder
 */
input.x-form-number {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 289 - FileRun Radio-Buttons
 */
input.x-form-radio {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 290 - FileRun normale Text-Eingabefelder
 */
input.x-form-text,
textarea.x-form-text {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 290 - FileRun normale Text-Eingabefelder
 */
input.x-form-text,
textarea.x-form-text {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 291 - Thumbnail-Vorschau fuer Nicht-Bild-Dateien
 */
.tmblmnr.thumbnailct.isNotPicture {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 302 - Corner-Menue
 * "Zurueck zu deinen Dateien" ohne Ellipsis anzeigen
 */
.x-menu.treeLikeMenu.cornerMenu .x-menu-item > span {
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}


/*
 * STEP 303 - FileRun Form-Field-Like Container
 * Standard-Anthrazit wie alle Eingabefelder
 */
.x-panel-body.x-form-field-like {
    background: #141A21 !important;
    background-color: #141A21 !important;
}


/*
 * STEP 306 - FileRun Radio-Buttons final
 * Native Browserdarstellung ersetzen
 */
input.x-form-radio {
    -webkit-appearance: none !important;
    appearance: none !important;

    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 2px solid #6f7d88 !important;
    border-radius: 50% !important;

    background: #141A21 !important;
    background-color: #141A21 !important;

    box-sizing: border-box !important;
}

input.x-form-radio:checked {
    border-color: #D8E6F3 !important;
    background:
        radial-gradient(
            circle,
            #D8E6F3 0 32%,
            #141A21 36% 100%
        ) !important;
}


/*
 * ==========================================================
 * SCHRITT 252
 * Checkbox-/Fieldset-Gruppen leicht heller absetzen
 * ==========================================================
 */

.x-form-check-group,
.x-form-field-like {
    background-color: #26394D !important;
}










/*
 * ==========================================================
 * STEP 329 - Rechte Admin-Content-Box
 *
 * Hinzufuegen/Toolbar bleibt oberhalb ausserhalb.
 * Paging/Navigation bleibt unterhalb ausserhalb.
 * Nur der eigentliche Content wird als Card dargestellt.
 * ==========================================================
 */

#gridTab > .x-panel-bwrap {
    margin: 10px 18px 10px 18px !important;

    width: calc(100% - 36px) !important;

    padding: 13px !important;

    background: #162330 !important;
    background-color: #162330 !important;

    border-radius: 14px !important;

    box-sizing: border-box !important;

    border: 2px solid #0e1114 !important;
}

/*
 * Inneres Grid sauber innerhalb der neuen Content-Box halten.
 * Keine zweite eigene Border erzeugen.
 */
#gridTab > .x-panel-bwrap > .x-panel-body.x-grid3 {
    width: 100% !important;

    margin: 0 !important;

    border: 0 !important;
    border-radius: 10px !important;

    box-sizing: border-box !important;
}

/*
 * Alte Pseudo-Card-Versuche sicher deaktivieren.
 */
#gridTab > .x-panel-bwrap > .x-panel-body.x-grid3::after {
    content: none !important;
}

/*
 * ==========================================================
 * END STEP 329
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 330 - Content-Box Border Feinabstimmung
 * STEP 329 bleibt Grundlage.
 * Nur Borderstaerke von 2px auf 1px reduzieren.
 * ==========================================================
 */

#gridTab > .x-panel-bwrap {}

/*
 * ==========================================================
 * END STEP 330
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 331 - Content-Box Borderfarbe
 *
 * Border bewusst an den dunklen Tabellenkopf angelehnt.
 * Die Content-Box bleibt dadurch abgegrenzt, wirkt aber
 * dezenter und einheitlicher als mit der blauen Kontur.
 * ==========================================================
 */

#gridTab > .x-panel-bwrap {}

/*
 * ==========================================================
 * END STEP 331
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 332 - Content-Box Feinabstimmung
 *
 * Ausgang Borderfarbe STEP 331:
 * #141A20
 *
 * Neue Border:
 * minimal dunkler -> #11171D
 *
 * Zusaetzlich:
 * Spaltenueberschriften im Tabellenkopf +1px.
 * ==========================================================
 */

/* Content-Box: 1px beibehalten, nur minimal dunkler */
#gridTab > .x-panel-bwrap {
}

/* Tabellenkopf: Beschriftung genau 1px groesser */
#gridTab .x-grid3-header .x-grid3-hd-inner,
#gridTab .x-grid3-header .x-grid3-hd-inner *,
#gridTab .x-grid3-hd-btn {
    font-size: 15px !important;
}

/*
 * ==========================================================
 * END STEP 332
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 333 - Content-Box / Tabellenkopf Feinjustierung
 *
 * Referenz STEP 331 Border: #141A20
 * Jetzt sichtbar, aber weiterhin dezent dunkler.
 *
 * Tabellenkopf:
 * FileRun verwendet hier bereits ca. 15px.
 * Deshalb jetzt wirklich +1px -> 16px.
 * ==========================================================
 */

/* Content-Box */
#gridTab > .x-panel-bwrap {

}

/* Tatsächliche FileRun-Grid-Kopfzeile */
#gridTab .x-grid-header-toolbar .x-grid-hd-btn,
#gridTab .x-grid-header-toolbar .x-grid-hd-btn .x-pill-text,
#gridTab .x-grid-header-toolbar button.x-grid-hd-btn {
    font-size: 16px !important;
}

/*
 * ==========================================================
 * END STEP 333
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 335 - Content-Card Border + Tabellenkopf
 * ==========================================================
 *
 * Nur optische Feinjustierung.
 * KEINE Aenderung an Groesse, Margin, Padding oder Radius.
 */

/* Content-Card: 1px, etwas dunkler/dezenter */
#gridTab > .x-panel-bwrap {

}

/* sichtbare Spaltenueberschriften */
#gridTab .x-grid-header-toolbar .x-grid-hd-btn,
#gridTab .x-grid3-header .x-grid-hd-btn {
    font-size: 16px !important;
}

/*
 * ==========================================================
 * END STEP 335
 * ==========================================================
 */


/*
 * ==========================================================
 * STEP 336 - Rueckkehr zum guten Content-Card-Stand
 * ==========================================================
 *
 * Container-Geometrie aus STEP 329/330 bleibt bestehen.
 * Border wieder auf den guten Referenzton aus STEP 331.
 * Header-Font vorerst NICHT weiter ueberschreiben.
 */

#gridTab > .x-panel-bwrap {

}

/*
 * STEP-333/335 Header-Font-Overrides neutralisieren:
 * wieder FileRun/Theme-Wert verwenden.
 */
#gridTab .x-grid-header-toolbar .x-grid-hd-btn,
#gridTab .x-grid-header-toolbar .x-grid-hd-btn .x-pill-text,
#gridTab .x-grid3-header .x-grid-hd-btn {
    font-size: inherit !important;
}

/*
 * ==========================================================
 * END STEP 336
 * ==========================================================
 */


/*
 * STEP 315 - Tabellen-/Grid-Spaltenueberschriften
 * Deutlich vom eigentlichen Tabelleninhalt abheben
 */
.x-grid-header-toolbar .x-grid-hd-btn,
.x-grid-header-toolbar .x-grid-hd-btn > span {
    color: #AFC7DC !important;
    font-size: 17px !important;
    font-weight: 600 !important;
}


/*
 * STEP 316 - Grid-Header Feinabstimmung
 * Schlank lassen, nur leicht groesser als Tabelleninhalt
 */
.x-grid-header-toolbar .x-grid-hd-btn,
.x-grid-header-toolbar .x-grid-hd-btn > span {
    color: #AFC7DC !important;
    font-size: 17px !important;
    font-weight: 400 !important;
}






/*
 * ==========================================================
 * STEP 329 - CUSTOM FILE TYPE ICONS
 * Archive + Disk Images
 * ==========================================================
 */

/* Gemeinsame leere Dateikachel */
.gridItem:has([data-qtip*=".zip" i]) .tmbInner.noImage,
.gridItem:has([data-qtip*=".tar" i]) .tmbInner.noImage,
.gridItem:has([data-qtip*=".tgz" i]) .tmbInner.noImage,
.gridItem:has([data-qtip*=".gz" i])  .tmbInner.noImage,
.gridItem:has([data-qtip*=".7z" i])  .tmbInner.noImage,
.gridItem:has([data-qtip*=".rar" i]) .tmbInner.noImage,
.gridItem:has([data-qtip*=".iso" i]) .tmbInner.noImage,
.gridItem:has([data-qtip*=".img" i]) .tmbInner.noImage {
    position: relative !important;
    background: #141A21 !important;
}


/* ==========================================================
 * ARCHIVE
 * ZIP / TAR / TGZ / GZ / 7Z / RAR
 * ==========================================================
 */

.gridItem:has([data-qtip*=".zip" i]) .tmbInner.noImage::before,
.gridItem:has([data-qtip*=".tar" i]) .tmbInner.noImage::before,
.gridItem:has([data-qtip*=".tgz" i]) .tmbInner.noImage::before,
.gridItem:has([data-qtip*=".gz" i])  .tmbInner.noImage::before,
.gridItem:has([data-qtip*=".7z" i])  .tmbInner.noImage::before,
.gridItem:has([data-qtip*=".rar" i]) .tmbInner.noImage::before {
    content: "" !important;
    position: absolute !important;

    width: 112px !important;
    height: 112px !important;

    left: 50% !important;
    top: 42% !important;
    transform: translate(-50%, -50%) !important;

    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath fill='%23E59A35' d='M14 31c0-6 5-11 11-11h28l10 11h32c6 0 11 5 11 11v53c0 6-5 11-11 11H25c-6 0-11-5-11-11z'/%3E%3Cpath fill='%23F4B552' d='M14 43h92v52c0 6-5 11-11 11H25c-6 0-11-5-11-11z'/%3E%3Cpath fill='%233A4652' d='M55 31h11v10H55zm0 12h11v10H55zm0 12h11v10H55zm0 12h11v10H55z'/%3E%3Cpath fill='%23D8E6F3' d='M53 78h15v16H53z'/%3E%3C/svg%3E")
      center / contain no-repeat !important;

    z-index: 20 !important;
    pointer-events: none !important;
}


/* ==========================================================
 * DISK IMAGE
 * ISO / IMG
 * ==========================================================
 */

.gridItem:has([data-qtip*=".iso" i]) .tmbInner.noImage::before,
.gridItem:has([data-qtip*=".img" i]) .tmbInner.noImage::before {
    content: "" !important;
    position: absolute !important;

    width: 112px !important;
    height: 112px !important;

    left: 50% !important;
    top: 42% !important;
    transform: translate(-50%, -50%) !important;

    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='48' fill='%235EA8D8'/%3E%3Ccircle cx='60' cy='60' r='37' fill='%237CC5E8'/%3E%3Cpath d='M60 23A37 37 0 0 1 94 75L67 62z' fill='%23D8E6F3' opacity='.75'/%3E%3Ccircle cx='60' cy='60' r='14' fill='%23141A21'/%3E%3Ccircle cx='60' cy='60' r='6' fill='%23D8E6F3'/%3E%3C/svg%3E")
      center / contain no-repeat !important;

    z-index: 20 !important;
    pointer-events: none !important;
}


/*
 * Keine ARCHIV-/ISO-Beschriftung.
 * FileRun-Dateigroesse und vorhandene Metadaten bleiben unangetastet.
 */

/*
 * ==========================================================
 * END STEP 329
 * ==========================================================
 */

/*
 * STEP 336 - Archive: Typtext ausblenden,
 * Dateigroesse unter dem Icon anzeigen
 */

.gridItem:has([data-qtip*=".zip" i]) .tmbInner.noImage .someDetails,
.gridItem:has([data-qtip*=".tar" i]) .tmbInner.noImage .someDetails,
.gridItem:has([data-qtip*=".tgz" i]) .tmbInner.noImage .someDetails,
.gridItem:has([data-qtip*=".gz" i])  .tmbInner.noImage .someDetails,
.gridItem:has([data-qtip*=".7z" i])  .tmbInner.noImage .someDetails,
.gridItem:has([data-qtip*=".rar" i]) .tmbInner.noImage .someDetails {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 22px !important;
    text-align: center !important;
    z-index: 30 !important;
}

/* FileRun-Typbezeichnung ausblenden */
.gridItem:has([data-qtip*=".zip" i]) .someDetails > div:first-child,
.gridItem:has([data-qtip*=".tar" i]) .someDetails > div:first-child,
.gridItem:has([data-qtip*=".tgz" i]) .someDetails > div:first-child,
.gridItem:has([data-qtip*=".gz" i])  .someDetails > div:first-child,
.gridItem:has([data-qtip*=".7z" i])  .someDetails > div:first-child,
.gridItem:has([data-qtip*=".rar" i]) .someDetails > div:first-child {
    display: none !important;
}

/* Nur Dateigroesse */
.gridItem:has([data-qtip*=".zip" i]) .someDetails > div:nth-child(2),
.gridItem:has([data-qtip*=".tar" i]) .someDetails > div:nth-child(2),
.gridItem:has([data-qtip*=".tgz" i]) .someDetails > div:nth-child(2),
.gridItem:has([data-qtip*=".gz" i])  .someDetails > div:nth-child(2),
.gridItem:has([data-qtip*=".7z" i])  .someDetails > div:nth-child(2),
.gridItem:has([data-qtip*=".rar" i]) .someDetails > div:nth-child(2) {
    display: block !important;
    color: #8FA2B3 !important;
    font-family: "Titillium Web", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    text-align: center !important;
}


/*
 * STEP 338 - Metadaten-Dialog
 * Karten dunkler, vorhandene Rundung beibehalten
 */

#popups_1 .x-panel,
#popups_1 .x-panel-body {
    background-color: #162330 !important;
}

/* Eingabefelder etwas dunkler absetzen */
#popups_1 input,
#popups_1 textarea,
#popups_1 select {
    background-color: #0f1923 !important;
}


/*
 * STEP 339 - Metadaten-Karten feinjustiert
 */
#popups_1 .x-panel,
#popups_1 .x-panel-body {
    background-color: #1c2b39 !important;
}


/*
 * STEP 340 - Metadaten-Karten
 * Flaeche wieder heller, nur Rahmen dezent dunkel
 */
#popups_1 .x-panel,
#popups_1 .x-panel-body {
    background-color: #223242 !important;
    border-color: #141c24 !important;
}

/* eigentliche Karten */
#popups_1 .x-panel {
    border: 1px solid #141c24 !important;
    border-radius: 9px !important;
    overflow: hidden !important;
}


/*
 * STEP 341 - Metadaten bearbeiten
 * Speichern-Button mit mehr Abstand zum unteren Dialogrand
 */
#button-11 {
    margin-bottom: 14px !important;
}


/*
 * Login + Passwort zuruecksetzen
 * warmen Standard-Rand durch dunkles Anthrazit ersetzen
 */
.fr-is-dark .x-window.login {
    box-shadow:
        0 0 0 1px #141c24 !important,
        0 1px 3px rgba(0, 0, 0, .35) !important;
}


/*
 * STEP 344 - Login / Passwort-Reset
 * Finaler dunkler Rand
 */
.fr-is-dark .x-window.login:not(.x-modal):not(.x-maximized) {
    box-shadow:
        var(--md-elevation-level2),
        0 0 0 1px #09090a !important;
}



/*
 * STEP 346 - Login Form Fields
 * Rand gezielt dunkler und dezenter
 */
.fr-is-dark .x-window.login .loginFormField {
    border: 1px solid #26323D !important;
    box-shadow: inset 0 0 0 1px #1b2732 !important;
}


/*
 * STEP 347 - Login Form Fields
 * Border fuer normal / hover / focus vereinheitlichen
 */
.fr-is-dark .x-window.login input.loginFormField,
.fr-is-dark .x-window.login input.loginFormField:hover,
.fr-is-dark .x-window.login input.loginFormField:focus,
.fr-is-dark .x-window.login input.loginFormField:focus-visible {
    border: 1px solid #26323D !important;
    outline: none !important;
    box-shadow: inset 0 0 0 1px #1B2732 !important;
}

/* Beim Fokus nur minimal heller, aber kein heller/blauer Rahmen */
.fr-is-dark .x-window.login input.loginFormField:focus,
.fr-is-dark .x-window.login input.loginFormField:focus-visible {
    border-color: #31404D !important;
    box-shadow: inset 0 0 0 1px #26323D !important;
}


/*
 * STEP 358 - Login / Password Reset Branding
 * Vorhandenes Branding-Logo zentriert oberhalb des Login-Fensters
 */
.fr-is-dark .x-window.login {
    overflow: visible !important;
}

.fr-is-dark .x-window.login::before {
    content: "" !important;
    position: absolute !important;

    left: 50% !important;
    top: -112px !important;
    transform: translateX(-50%) !important;

    width: 300px !important;
    height: 110px !important;

    background-image: url("/customizables/branding/logo.png?v=20260903164313") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;

    pointer-events: none !important;
    z-index: 20 !important;
}


/*
 * STEP 364 - Login Branding Position Fix
 * Bezugspunkt fuer das Logo oberhalb des Login-/Reset-Fensters
 */
.fr-is-dark .x-window.login {
    position: relative !important;
}


/* ===== STEP 449: Thumbnail-Karten bündig ===== */
.files.gridGroup.viewMode-thumbnails .gridItem.typeFile > .container > .bottomRow {
    padding: 0 !important;
}