/* ════════════════════════════════════════════════════════════════════════════
 * Werkblick CI Overrides für die Casdoor Admin-UI
 *
 * Casdoor v1.700 hat lila Akzente fest in main.js + den eingebauten SVG-Icons.
 * Da themeData.colorPrimary nur in der Login-Form greift, müssen wir das
 * Admin-UI per Stylesheet-Override anpassen.
 *
 * Wird über eine modifizierte /web/build/index.html nachgeladen (Volume-Mount
 * in docker-compose.yml). Public-URL: /files/branding/werkblick-casdoor-admin.css
 * — serviert von Caddy aus /opt/locus-enterprise/casdoor/files/.
 * ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap');

:root {
  --wbk-amber: #FF6600;
  --wbk-amber-hover: #CC5100;
  --wbk-amber-soft: rgba(255, 102, 0, 0.12);
  --wbk-charcoal: #131415;
  --wbk-snow: #F6F6F6;
  --wbk-muted: #7A7D80;
  --wbk-border: rgba(246, 246, 246, 0.08);
}

/* ── Antd-Primary-Token global auf Werkblick Orange ─────────────────────── */
.ant-btn-primary,
.ant-btn-primary:not(:disabled),
button.ant-btn-primary {
  background: var(--wbk-amber) !important;
  border-color: var(--wbk-amber) !important;
  color: #131415 !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(255, 102, 0, 0.25) !important;
}

.ant-btn-primary:hover,
.ant-btn-primary:focus,
.ant-btn-primary:not(:disabled):hover {
  background: var(--wbk-amber-hover) !important;
  border-color: var(--wbk-amber-hover) !important;
  color: #F6F6F6 !important;
}

/* "Groups" / "Benutzer" Action-Buttons in den Tabellen (waren lila) */
.ant-table-cell .ant-btn[style*="rgb(98, 0, 234)"],
.ant-table-cell .ant-btn[style*="purple"],
.ant-table-cell button[style*="background"],
.ant-table .ant-btn:not(.ant-btn-dangerous):not(.ant-btn-default) {
  background: var(--wbk-amber) !important;
  border-color: var(--wbk-amber) !important;
  color: #131415 !important;
}

.ant-btn-default:hover {
  border-color: var(--wbk-amber) !important;
  color: var(--wbk-amber) !important;
}

/* ── Top-Nav Menu (User Management / Identity / Authorization etc.) ─────── */
.ant-menu-horizontal,
.ant-menu-horizontal > .ant-menu-item,
.ant-menu-horizontal > .ant-menu-submenu {
  border-bottom: none !important;
  background: transparent !important;
}

/* Selected nav item: lila Underline → Orange Underline */
.ant-menu-horizontal > .ant-menu-item-selected,
.ant-menu-horizontal > .ant-menu-item-selected > a,
.ant-menu-horizontal > .ant-menu-submenu-selected,
.ant-menu-light .ant-menu-item-selected,
.ant-menu-light .ant-menu-item-active,
.ant-menu-dark .ant-menu-item-selected {
  color: var(--wbk-amber) !important;
  border-bottom-color: var(--wbk-amber) !important;
}

.ant-menu-horizontal > .ant-menu-item::after,
.ant-menu-horizontal > .ant-menu-item-active::after,
.ant-menu-horizontal > .ant-menu-item-selected::after {
  border-bottom-color: var(--wbk-amber) !important;
}

.ant-menu-horizontal > .ant-menu-item:hover,
.ant-menu-horizontal > .ant-menu-submenu:hover {
  color: var(--wbk-amber) !important;
  border-bottom-color: var(--wbk-amber) !important;
}

/* ── Sidebar-Icon-Squares (lila Hintergrund mit weißem Icon) ──────────── */
/* Diese werden meist als <div> mit inline background-color: #... gerendert.
   Wir treffen jeden Container neben einem Menu-Item-Label. */
.ant-menu-item .anticon,
.ant-menu-submenu-title .anticon,
.ant-menu-item-icon,
.ant-menu-title-content > .anticon,
.ant-menu-horizontal > .ant-menu-item > span > .anticon {
  color: var(--wbk-amber) !important;
}

/* Casdoor's Custom-Icons in der Top-Nav: meist <img> oder inline-SVG mit
   lila Hintergrund. Hue-rotate dreht Lila (~285°) auf Orange (~25°) — das
   ist der einzige Weg, gerasterte Icon-PNGs ohne JS-Mod umzufärben. */
.ant-menu-horizontal > .ant-menu-item > a > img,
.ant-menu-horizontal > .ant-menu-submenu-title img,
.ant-menu-item > a > img,
.ant-menu-item > .anticon > svg,
.ant-menu-submenu-title > .anticon > svg,
[class*="iconWrapper"],
[class*="navIcon"],
.menu-icon-wrapper,
.menuIcon,
img[src*="cdn.casbin.org/img"] {
  filter: hue-rotate(95deg) saturate(2) brightness(1.15) !important;
}

/* ── Tabs (active-state) ────────────────────────────────────────────────── */
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: var(--wbk-amber) !important;
  font-weight: 600 !important;
}

.ant-tabs-ink-bar {
  background: var(--wbk-amber) !important;
}

.ant-tabs-tab:hover {
  color: var(--wbk-amber) !important;
}

/* ── Tabellen-Header (Spalten-Sortierung-Hover) ────────────────────────── */
.ant-table-column-sort,
.ant-table-thead > tr > th.ant-table-column-sort {
  background: var(--wbk-amber-soft) !important;
}

.ant-table-filter-trigger.active,
.ant-table-column-sorter-up.active,
.ant-table-column-sorter-down.active {
  color: var(--wbk-amber) !important;
}

/* ── Links / Anchor ──────────────────────────────────────────────────────── */
a.ant-typography,
.ant-typography a,
.ant-table-cell a {
  color: var(--wbk-amber) !important;
}

a:hover,
a.ant-typography:hover,
.ant-typography a:hover {
  color: var(--wbk-amber-hover) !important;
}

/* ── Form-Komponenten (Inputs, Selects, Checkboxes, Switches) ─────────── */
.ant-input:focus,
.ant-input-focused,
.ant-input-affix-wrapper:focus,
.ant-input-affix-wrapper-focused,
.ant-select-focused .ant-select-selector,
.ant-select-open .ant-select-selector,
.ant-picker-focused,
.ant-picker-active-bar {
  border-color: var(--wbk-amber) !important;
  box-shadow: 0 0 0 2px rgba(255, 102, 0, 0.18) !important;
}

.ant-input:hover,
.ant-input-affix-wrapper:hover,
.ant-select:hover .ant-select-selector {
  border-color: var(--wbk-amber) !important;
}

.ant-checkbox-checked .ant-checkbox-inner,
.ant-radio-checked .ant-radio-inner {
  background-color: var(--wbk-amber) !important;
  border-color: var(--wbk-amber) !important;
}

.ant-checkbox-checked::after,
.ant-radio-checked .ant-radio-inner::after {
  border-color: var(--wbk-amber) !important;
}

.ant-switch-checked {
  background: var(--wbk-amber) !important;
}

/* ── Pagination ─────────────────────────────────────────────────────────── */
.ant-pagination-item-active,
.ant-pagination-item-active a {
  border-color: var(--wbk-amber) !important;
  color: var(--wbk-amber) !important;
}

.ant-pagination-item:hover {
  border-color: var(--wbk-amber) !important;
}

.ant-pagination-item:hover a {
  color: var(--wbk-amber) !important;
}

/* ── Notifications + Tags ──────────────────────────────────────────────── */
.ant-tag-purple,
.ant-tag-magenta,
.ant-tag-volcano {
  background: var(--wbk-amber-soft) !important;
  color: var(--wbk-amber) !important;
  border-color: rgba(255, 102, 0, 0.30) !important;
}

/* ── Dropdown-Menü selected ─────────────────────────────────────────────── */
.ant-dropdown-menu-item-selected,
.ant-select-item-option-selected {
  background: var(--wbk-amber-soft) !important;
  color: var(--wbk-amber) !important;
}

/* ── Header (Top-Nav) Hintergrund — Charcoal statt weiß ─────────────────── */
.App-header,
.ant-layout-header,
header.ant-layout-header {
  background: var(--wbk-charcoal) !important;
  color: var(--wbk-snow) !important;
  border-bottom: 1px solid var(--wbk-border) !important;
}

/* ── Werkblick-Wordmark statt "Casdoor"-Text in der Nav ────────────────── */
.App-header > .ant-menu-horizontal:first-child > .ant-menu-item:first-child,
.brand-text {
  font-family: 'Bebas Neue', 'Oswald', sans-serif !important;
  font-size: 22px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ── Selection-Color ──────────────────────────────────────────────────── */
::selection {
  background: var(--wbk-amber) !important;
  color: var(--wbk-charcoal) !important;
}

/* ── Scrollbar (subtle) ───────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: rgba(246, 246, 246, 0.15);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--wbk-amber);
}