/* KENremote — Corporate Design fuer die RustDesk-Server-Pro-Konsole.
   Wird von anwenden.sh nach /var/lib/rustdesk-server/static/kenremote.css
   gespielt und in static/index.html verlinkt. Pro-Updates ersetzen static/
   komplett — danach anwenden.sh erneut ausfuehren. */

/* 1. Hausschriften nach Schriftrollen: KENmicro = Titel/Überschriften,
      KENmacro = Lesetext und Bedienelemente. Nie vertauschen. */
@font-face {
  font-family: "KENmacro";
  src: url("./fonts/KENmacro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "KENmacro";
  src: url("./fonts/KENmacro-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "KENmicro";
  src: url("./fonts/KENmicro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --kr-teal: #0D9488;        /* Marke auf hellem Grund */
  --kr-teal-tief: #0F766E;   /* Hover hell */
  --kr-teal-hell: #2DD4BF;   /* Marke auf dunklem Grund */
  --kr-teal-leucht: #5EEAD4; /* Hover dunkel */
}

/* Schriftrollen: Überschriften und Titel in der Titelschrift KENmicro,
   Hierarchie über Größe und Abstand, nie über fette Schnitte. */
h1, h2, h3, h4, h5,
.ant-page-header-heading-title,
.ant-modal-title,
.ant-drawer-title,
.ant-card-head-title,
.ant-pro-card-title,
.ant-result-title {
  font-family: "KENmicro", "KENmacro", sans-serif !important;
  font-weight: 400 !important;
}

body,
.ant-app,
.ant-btn,
.ant-input,
.ant-input-affix-wrapper input,
.ant-select,
.ant-menu,
.ant-table,
.ant-modal,
.ant-drawer,
.ant-form,
.ant-pro-table,
.ant-pro-card,
.ant-pagination,
.ant-tabs,
.ant-dropdown,
.ant-tooltip,
.ant-message,
.ant-checkbox-wrapper,
.ant-pro-form-login-container {
  font-family: "KENmacro", "Outfit", -apple-system, "Segoe UI", sans-serif !important;
}

/* 2. Login-Seite: Original-Kombimarke statt Bildmarke + Systemtext */
.ant-pro-form-login-title,
.ant-pro-form-login-desc {
  display: none;
}
.ant-pro-form-login-header {
  height: auto;
  margin-bottom: 28px;
}
/* Der Logo-Span behaelt sonst seine feste 44px-Breite und der Flex zentriert
   nur den Span — das breite Bild liefe rechts hinaus. */
.ant-pro-form-login-logo {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}
.ant-pro-form-login-header img {
  content: url("./logo-subline.svg");
  height: auto;
  width: min(360px, 78vw);
}
html.dark-theme .ant-pro-form-login-header img {
  content: url("./logo-subline-dunkel.svg");
}

/* 3. Kopfzeile/Seitenleiste nach dem Login: Quermarke ohne Subline,
      den doppelten Text-Titel daneben ausblenden */
/* !important noetig: das antd-CSS-in-JS drueckt das Header-Logo auf 28px. */
.ant-pro-global-header-logo img,
.ant-pro-top-nav-header-logo img,
.ant-pro-sider-logo img {
  content: url("./logo.svg");
  height: 42px !important;
  width: auto !important;
  max-width: 100%;
}
html.dark-theme .ant-pro-global-header-logo img,
html.dark-theme .ant-pro-top-nav-header-logo img,
html.dark-theme .ant-pro-sider-logo img {
  content: url("./logo-dunkel.svg");
}
.ant-pro-global-header-logo h1,
.ant-pro-top-nav-header-logo h1,
.ant-pro-sider-logo h1 {
  display: none;
}

/* 4. Produktfarbe Teal statt RustDesk-Blau — heller Modus */
.ant-btn-primary {
  background: var(--kr-teal) !important;
  border-color: var(--kr-teal) !important;
}
.ant-btn-primary:not(:disabled):hover,
.ant-btn-primary:not(:disabled):active {
  background: var(--kr-teal-tief) !important;
  border-color: var(--kr-teal-tief) !important;
}
/* !important noetig: das antd-CSS-in-JS wird zur Laufzeit NACH diesem
   Stylesheet injiziert und setzt Links spezifischer. Gefahren-Links (rote
   Loesch-Aktionen) bleiben ausgenommen. */
html a:not([class*="danger"]):not(.ant-btn),
html .ant-btn-link:not([class*="danger"]) {
  color: var(--kr-teal) !important;
}
html a:not([class*="danger"]):not(.ant-btn):hover,
html .ant-btn-link:not([class*="danger"]):hover {
  color: var(--kr-teal-tief) !important;
}
.ant-checkbox-checked .ant-checkbox-inner,
.ant-radio-checked .ant-radio-inner,
.ant-switch-checked {
  background-color: var(--kr-teal) !important;
  border-color: var(--kr-teal) !important;
}
.ant-radio-checked .ant-radio-inner::after {
  background-color: #ffffff;
}
.ant-input:focus,
.ant-input-focused,
.ant-input-affix-wrapper:focus,
.ant-input-affix-wrapper-focused,
.ant-select-focused .ant-select-selector {
  border-color: var(--kr-teal) !important;
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.12) !important;
}
.ant-menu-light .ant-menu-item-selected,
.ant-menu-light .ant-menu-submenu-selected > .ant-menu-submenu-title {
  color: var(--kr-teal) !important;
}
.ant-menu-light .ant-menu-item-selected {
  background-color: rgba(13, 148, 136, 0.08) !important;
}
.ant-tabs .ant-tabs-ink-bar {
  background: var(--kr-teal);
}
.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn,
.ant-tabs .ant-tabs-tab:hover {
  color: var(--kr-teal);
}
.ant-pagination .ant-pagination-item-active {
  border-color: var(--kr-teal);
}
.ant-pagination .ant-pagination-item-active a {
  color: var(--kr-teal);
}
.ant-spin .ant-spin-dot-item {
  background-color: var(--kr-teal);
}
.ant-pro-form-login-container {
  background: none;
}
/* antd bricht Zellen mit break-word mitten im Wort um ("ad min") — beide
   Brech-Eigenschaften zurücksetzen, die Spaltenbreite rechnet der Browser
   dann am längsten Wort. */
.ant-table-cell,
.ant-descriptions-item-label,
.ant-descriptions-item-content,
.ant-typography {
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Schmale Breiten: Kopfzeilen-Logo zurücknehmen, sonst kollidiert die
   Quermarke mit Avatar und Symbolen. */
@media (max-width: 768px) {
  .ant-pro-global-header-logo img,
  .ant-pro-top-nav-header-logo img,
  .ant-pro-sider-logo img {
    height: 30px !important;
  }
}

/* 5. Dunkler Modus (manuell umschaltbar): helles Teal, dunkle Buttonschrift.
   Der navTheme-Sync in index.html hält html.dark-theme aktuell — die App
   selbst setzt die Klasse nur einmal beim Laden.
   Flächen aufgehellt: antd realDark ist fast schwarz (#141414/#000), hier
   stattdessen weiches Anthrazit mit leichtem Blaustich, passend zum Teal. */
html.dark-theme body,
html.dark-theme .ant-layout,
html.dark-theme .ant-pro-layout .ant-pro-layout-bg-list {
  background: #1c2127 !important;
}
html.dark-theme .ant-layout-sider,
html.dark-theme .ant-pro-sider,
html.dark-theme .ant-menu {
  background: #212730 !important;
}
html.dark-theme .ant-pro-card,
html.dark-theme .ant-card,
html.dark-theme .ant-table,
html.dark-theme .ant-modal-content,
html.dark-theme .ant-drawer-content,
html.dark-theme .ant-pro-table-search {
  background: #252c35 !important;
}
html.dark-theme .ant-table-thead > tr > th {
  background: #2b333d !important;
}
/* Der Footer-Wrapper bekommt sein Fast-Schwarz als Inline-Style — nur
   !important schlaegt das. :has trifft genau den Wrapper. */
html.dark-theme .ant-layout-footer,
html.dark-theme div:has(> .ant-layout-footer) {
  background: #1c2127 !important;
  background-color: #1c2127 !important;
}
/* Login-Seite: der CSS-Modul-Wrapper (container___<hash>) traegt sein
   eigenes Fast-Schwarz; der Teilstring ueberlebt neue Build-Hashes. */
html.dark-theme div[class*="container___"] {
  background: #1c2127 !important;
}
html.dark-theme .ant-btn-primary {
  background: var(--kr-teal-hell) !important;
  border-color: var(--kr-teal-hell) !important;
  color: #07211e !important;
}
html.dark-theme .ant-btn-primary:not(:disabled):hover,
html.dark-theme .ant-btn-primary:not(:disabled):active {
  background: var(--kr-teal-leucht) !important;
  border-color: var(--kr-teal-leucht) !important;
}
html.dark-theme a:not([class*="danger"]):not(.ant-btn),
html.dark-theme .ant-btn-link:not([class*="danger"]) {
  color: var(--kr-teal-hell) !important;
}
html.dark-theme a:not([class*="danger"]):not(.ant-btn):hover,
html.dark-theme .ant-btn-link:not([class*="danger"]):hover {
  color: var(--kr-teal-leucht) !important;
}
html.dark-theme .ant-checkbox-checked .ant-checkbox-inner,
html.dark-theme .ant-radio-checked .ant-radio-inner,
html.dark-theme .ant-switch-checked {
  background-color: var(--kr-teal-hell) !important;
  border-color: var(--kr-teal-hell) !important;
}
html.dark-theme .ant-input:focus,
html.dark-theme .ant-input-focused,
html.dark-theme .ant-input-affix-wrapper:focus,
html.dark-theme .ant-input-affix-wrapper-focused,
html.dark-theme .ant-select-focused .ant-select-selector {
  border-color: var(--kr-teal-hell) !important;
  box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.16) !important;
}
html.dark-theme .ant-menu-dark .ant-menu-item-selected,
html.dark-theme .ant-menu .ant-menu-item-selected {
  color: var(--kr-teal-hell) !important;
  background-color: rgba(45, 212, 191, 0.10) !important;
}
html.dark-theme .ant-tabs .ant-tabs-ink-bar {
  background: var(--kr-teal-hell);
}
html.dark-theme .ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn,
html.dark-theme .ant-tabs .ant-tabs-tab:hover {
  color: var(--kr-teal-hell);
}
html.dark-theme .ant-pagination .ant-pagination-item-active {
  border-color: var(--kr-teal-hell);
}
html.dark-theme .ant-pagination .ant-pagination-item-active a {
  color: var(--kr-teal-hell);
}
html.dark-theme .ant-spin .ant-spin-dot-item {
  background-color: var(--kr-teal-hell);
}

/* 6. Menü-Navigation folgt der Menüfarbe, nicht der Linkfarbe — steht bewusst
   ganz am Ende und braucht drei Klassen: die Link-Pauschalregeln kommen durch
   ihre :not-Ausnahmen auf Spezifität 0-3-2, hier ebenso, spätere Regel
   gewinnt. Der aktive Punkt erbt sein Teal von .ant-menu-item-selected. */
html .ant-menu .ant-menu-item .ant-menu-title-content a,
html .ant-menu .ant-menu-item .ant-menu-title-content a:hover {
  color: inherit !important;
}