/**
 * @file
 * Branding motywu administracyjnego Gin wg palety frontendu DataPortal.
 *
 * Źródło kolorów (field_colors / frontend):
 *   header      #1E293B
 *   button      #3E536B
 *   accent      #2FAF74
 *   text        #FFFFFF
 *   tableHeader #9AA7B6
 *   headerText  #E6F2FF
 *
 * Ładowane przez bibliotekę dataportal/gin_custom, gdy aktywny jest Gin.
 * Nie edytować themes/contrib/gin — ten plik jest wspieranym nadpisaniem
 * (odpowiednik public://gin-custom.css, trzymany w repozytorium).
 */

:root {
  --dp-color-header: #1e293b;
  --dp-color-button: #3e536b;
  --dp-color-button-hover: #33465a;
  --dp-color-button-active: #2b3b4d;
  --dp-color-accent: #2faf74;
  --dp-color-accent-hover: #289563;
  --dp-color-accent-active: #238a58;
  --dp-color-text: #ffffff;
  --dp-color-table-header: #9aa7b6;
  --dp-color-header-text: #e6f2ff;
  --dp-color-app: #f8fafc;
  --dp-border-radius: 3px;
  --dp-input-bg: rgba(0, 0, 0, 0.05);
}

/*
 * Tokeny Gina. !important przebija style wstrzykiwane przez gin/accent.js
 * przy preset_accent_color = custom (m.in. jasnozielone --gin-bg-header).
 */
:root,
[data-gin-accent="custom"],
[data-gin-accent] {
  --gin-color-primary-rgb: 47, 175, 116 !important;
  --gin-color-primary: var(--dp-color-accent) !important;
  --gin-color-primary-hover: var(--dp-color-accent-hover) !important;
  --gin-color-primary-active: var(--dp-color-accent-active) !important;
  --gin-color-primary-light: rgba(47, 175, 116, 0.15) !important;
  --gin-color-primary-light-hover: rgba(47, 175, 116, 0.22) !important;
  --gin-color-primary-light-active: rgba(47, 175, 116, 0.3) !important;
  --gin-color-button-text: var(--dp-color-text) !important;
  --gin-color-focus: rgba(47, 175, 116, 0.55) !important;
  --gin-switch: var(--dp-color-accent) !important;
  --gin-bg-app-rgb: 248, 250, 252 !important;
  --gin-bg-app: var(--dp-color-app) !important;
  --gin-bg-header: #e8eef4 !important;
  --gin-color-sticky-rgb: 232, 238, 244 !important;
  --gin-bg-input: var(--dp-input-bg) !important;
}

.gin--dark-mode,
.gin--dark-mode[data-gin-accent="custom"],
.gin--dark-mode [data-gin-accent] {
  --gin-color-primary-rgb: 47, 175, 116 !important;
  --gin-color-primary: var(--dp-color-accent) !important;
  --gin-color-primary-hover: #4fc98a !important;
  --gin-color-primary-active: #6ad4a0 !important;
  --gin-color-button-text: var(--dp-color-text) !important;
  --gin-switch: var(--dp-color-accent) !important;
}

/* -------------------------------------------------------------------------- */
/* Toolbar = header frontendu                                                 */
/* -------------------------------------------------------------------------- */

.toolbar:not(.toolbar-secondary) .toolbar-bar,
#toolbar-administration,
#toolbar-administration .toolbar-bar,
.gin--horizontal-toolbar #toolbar-administration,
.gin--horizontal-toolbar #toolbar-administration .toolbar-bar,
.gin--classic-toolbar .toolbar:not(.toolbar-secondary) .toolbar-bar,
.gin--vertical-toolbar .toolbar:not(.toolbar-secondary) .toolbar-bar {
  background: var(--dp-color-header) !important;
  color: var(--dp-color-header-text);
  box-shadow: none;
}

.toolbar:not(.toolbar-secondary) .toolbar-bar .toolbar-tab > .toolbar-item,
.toolbar:not(.toolbar-secondary) .toolbar-bar .toolbar-tab > .toolbar-icon,
.toolbar:not(.toolbar-secondary) .toolbar-bar .toolbar-text {
  color: var(--dp-color-header-text);
}

.toolbar:not(.toolbar-secondary) .toolbar-bar .toolbar-icon::before,
.toolbar:not(.toolbar-secondary) .toolbar-bar .toolbar-icon::after {
  background-color: var(--dp-color-header-text);
}

.toolbar:not(.toolbar-secondary) .toolbar-bar .toolbar-tab > .toolbar-icon:hover,
.toolbar:not(.toolbar-secondary) .toolbar-bar .toolbar-tab > .toolbar-item:hover {
  background: rgba(230, 242, 255, 0.1);
  color: var(--dp-color-text);
}

.toolbar:not(.toolbar-secondary) .toolbar-bar .toolbar-tab > .toolbar-icon:hover::before {
  background-color: var(--dp-color-text);
}

.toolbar:not(.toolbar-secondary) .toolbar-bar .toolbar-tab > .toolbar-icon.is-active {
  color: var(--dp-color-text);
  background-color: var(--dp-color-accent);
}

.toolbar:not(.toolbar-secondary) .toolbar-bar .toolbar-tab > .toolbar-icon.is-active::before {
  background-color: var(--dp-color-text);
}

/* Secondary toolbar (user / shortcut / breadcrumb) zostaje jasny. */
.toolbar.toolbar-secondary,
#toolbar-administration-secondary,
#toolbar-administration-secondary .toolbar-bar,
.gin-secondary-toolbar,
.gin-secondary-toolbar .toolbar-secondary .toolbar-bar {
  background: var(--dp-color-app) !important;
  background-color: var(--dp-color-app) !important;
  color: var(--gin-color-text);
  box-shadow: none;
}

#toolbar-administration-secondary .toolbar-bar .toolbar-tab > .toolbar-item,
#toolbar-administration-secondary .toolbar-bar .toolbar-tab > .toolbar-icon,
#toolbar-administration-secondary .toolbar-bar .toolbar-text,
.gin-secondary-toolbar .toolbar-tab > .toolbar-item,
.gin-secondary-toolbar .toolbar-tab > .toolbar-icon {
  color: var(--gin-color-text);
}

#toolbar-administration-secondary .toolbar-bar .toolbar-icon::before,
#toolbar-administration-secondary .toolbar-bar .toolbar-icon::after,
.gin-secondary-toolbar .toolbar-icon::before,
.gin-secondary-toolbar .toolbar-icon::after {
  background-color: var(--gin-icon-color);
}

#toolbar-administration-secondary .toolbar-bar .toolbar-tab > .toolbar-icon:hover,
#toolbar-administration-secondary .toolbar-bar .toolbar-tab > .toolbar-item:hover,
.gin-secondary-toolbar .toolbar-tab > .toolbar-icon:hover {
  background: rgba(30, 41, 59, 0.06);
  color: var(--gin-color-title);
}

#toolbar-administration-secondary .toolbar-bar .toolbar-tab > .toolbar-icon:hover::before,
.gin-secondary-toolbar .toolbar-tab > .toolbar-icon:hover::before {
  background-color: var(--gin-color-title);
}

#toolbar-administration-secondary .toolbar-bar .toolbar-tab > .toolbar-icon.is-active,
.gin-secondary-toolbar .toolbar-tab > .toolbar-icon.is-active {
  color: var(--dp-color-text);
  background-color: var(--dp-color-accent);
}

#toolbar-administration-secondary .toolbar-bar .toolbar-tab > .toolbar-icon.is-active::before,
.gin-secondary-toolbar .toolbar-tab > .toolbar-icon.is-active::before {
  background-color: var(--dp-color-text);
}

/*
 * Poziomy pasek menu to tacka #toolbar-item-administration-tray, nie .toolbar-bar.
 * Gin maluje ją (oraz ul.toolbar-menu) na --gin-bg-layer (#fff).
 */
#toolbar-item-administration-tray,
#toolbar-item-administration-tray.toolbar-tray,
.toolbar .toolbar-tray#toolbar-item-administration-tray,
.toolbar-loading #toolbar-item-administration-tray {
  --gin-bg-layer: var(--dp-color-header);
  --gin-color-text: var(--dp-color-header-text);
  --gin-color-title: var(--dp-color-text);
  background: var(--dp-color-header) !important;
  background-color: var(--dp-color-header) !important;
  color: var(--dp-color-header-text);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
}

#toolbar-item-administration-tray .toolbar-lining,
#toolbar-item-administration-tray .toolbar-menu-administration,
#toolbar-item-administration-tray .toolbar-menu-administration > .toolbar-menu,
.toolbar #toolbar-item-administration-tray .toolbar-menu-administration > .toolbar-menu {
  background: transparent !important;
  background-color: transparent !important;
}

#toolbar-item-administration-tray .toolbar-menu-administration > .toolbar-menu > .menu-item {
  background: transparent !important;
}

#toolbar-item-administration-tray .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-icon,
#toolbar-item-administration-tray .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-box > .toolbar-icon:not(.toolbar-handle),
#toolbar-item-administration-tray .toolbar-tray a,
#toolbar-item-administration-tray .toolbar-lining a,
#toolbar-item-administration-tray .toolbar-lining span {
  color: var(--dp-color-header-text) !important;
}

#toolbar-item-administration-tray .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-icon::before,
#toolbar-item-administration-tray .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-box > .toolbar-icon::before {
  background-color: var(--dp-color-header-text);
}

#toolbar-item-administration-tray .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-icon:hover,
#toolbar-item-administration-tray .toolbar-menu-administration > .toolbar-menu > .menu-item:hover > .toolbar-icon {
  color: var(--dp-color-text) !important;
  background: rgba(230, 242, 255, 0.1);
}

#toolbar-item-administration-tray .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-icon.is-active,
#toolbar-item-administration-tray .toolbar-menu-administration > .toolbar-menu > .menu-item.menu-item--active-trail > .toolbar-icon {
  color: var(--dp-color-accent) !important;
  background: rgba(47, 175, 116, 0.18);
}

#toolbar-item-administration-tray .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-icon.is-active::before,
#toolbar-item-administration-tray .toolbar-menu-administration > .toolbar-menu > .menu-item.menu-item--active-trail > .toolbar-icon::before {
  background-color: var(--dp-color-accent);
}

/* Rozwijane podmenu zostaje jasne — czytelność długich list admina. */
#toolbar-item-administration-tray .toolbar-menu .toolbar-menu,
#toolbar-item-administration-tray .menu-item > .toolbar-menu,
.toolbar-horizontal #toolbar-item-administration-tray .menu-item--expanded.menu-item--expanded > .toolbar-menu {
  --gin-bg-layer: #fff;
  --gin-color-text: #222330;
  --gin-color-title: #222330;
  background: #fff !important;
  background-color: #fff !important;
  color: #222330;
}

#toolbar-item-administration-tray .toolbar-menu .toolbar-menu a,
#toolbar-item-administration-tray .toolbar-menu .toolbar-menu span,
#toolbar-item-administration-tray .menu-item > .toolbar-menu a,
#toolbar-item-administration-tray .menu-item > .toolbar-menu span {
  color: #222330 !important;
}

#toolbar-item-administration-tray .toolbar-menu .toolbar-menu a.is-active,
#toolbar-item-administration-tray .menu-item > .toolbar-menu a.is-active,
#toolbar-item-administration-tray .toolbar-menu .toolbar-menu .menu-item--active-trail > .toolbar-box a {
  color: var(--dp-color-accent) !important;
}

/* -------------------------------------------------------------------------- */
/* Przyciski: default = button (slate), primary = accent (zielony)            */
/* -------------------------------------------------------------------------- */

.button:not(.button--primary):not(.button--danger):not(:disabled):not(.is-disabled),
.form-actions .button:not(.button--primary):not(.button--danger):not(:disabled) {
  color: var(--dp-color-text);
  background-color: var(--dp-color-button);
  border-color: var(--dp-color-button) !important;
}

.button:not(.button--primary):not(.button--danger):not(:disabled):hover,
.form-actions .button:not(.button--primary):not(.button--danger):not(:disabled):hover {
  color: var(--dp-color-text);
  background-color: var(--dp-color-button-hover);
  border-color: var(--dp-color-button-hover) !important;
}

.button:not(.button--primary):not(.button--danger):not(:disabled):active,
.button:not(.button--primary):not(.button--danger):not(:disabled):focus {
  color: var(--dp-color-text);
  background-color: var(--dp-color-button-active);
  border-color: var(--dp-color-button-active) !important;
}

.button--primary,
.button--primary:not(:focus),
#edit-submit.form-submit,
.ief-entity-submit {
  color: var(--dp-color-text);
  background: var(--dp-color-accent);
  border-color: var(--dp-color-accent) !important;
}

.button--primary:hover,
#edit-submit.form-submit:hover,
.ief-entity-submit:hover {
  color: var(--dp-color-text);
  background-color: var(--dp-color-accent-hover);
  border-color: var(--dp-color-accent-hover) !important;
}

.button--primary:active,
.button--primary:focus,
#edit-submit.form-submit:focus {
  color: var(--dp-color-text);
  background-color: var(--dp-color-accent-active);
  border-color: var(--dp-color-accent-active) !important;
}

.dropbutton,
.dropbutton-widget .dropbutton,
html.js .dropbutton,
html.js .dropbutton-wrapper.open .dropbutton {
  color: var(--dp-color-header-text);
  background: var(--dp-color-header) !important;
  border-color: var(--dp-color-header) !important;
  border-radius: var(--dp-border-radius);
  box-shadow: none;
}

.dropbutton .dropbutton__item:first-of-type > a,
.dropbutton .dropbutton__item:first-of-type > .button,
.dropbutton .dropbutton__item:first-of-type > input,
.dropbutton .dropbutton__toggle {
  color: var(--dp-color-header-text) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none;
}

.dropbutton--multiple > .dropbutton__item:first-of-type {
  border-inline-end-color: rgba(230, 242, 255, 0.22);
}

.dropbutton .dropbutton__toggle {
  border-inline-start: 1px solid rgba(230, 242, 255, 0.22) !important;
}

.dropbutton .dropbutton__toggle::before {
  background-color: var(--dp-color-header-text) !important;
}

.dropbutton .dropbutton__item:first-of-type > a:hover,
.dropbutton .dropbutton__item:first-of-type > a:focus,
.dropbutton .dropbutton__item:first-of-type > .button:hover,
.dropbutton .dropbutton__toggle:hover,
.dropbutton .dropbutton__toggle:focus {
  color: var(--dp-color-text) !important;
  background: var(--dp-color-button) !important;
}

.dropbutton .dropbutton__toggle:hover::before,
.dropbutton .dropbutton__toggle:focus::before {
  background-color: var(--dp-color-text) !important;
}

/* Lista dodatkowych akcji: jasne tło, granatowy hover. */
.dropbutton .dropbutton__items {
  background: #fff;
  border-radius: var(--dp-border-radius);
}

.dropbutton .dropbutton__items > .dropbutton__item > a,
.dropbutton .dropbutton__items > .dropbutton__item > .button {
  color: var(--dp-color-header) !important;
  background: #fff !important;
}

.dropbutton .dropbutton__items > .dropbutton__item > a:hover,
.dropbutton .dropbutton__items > .dropbutton__item > a:focus,
.dropbutton .dropbutton__items > .dropbutton__item > .button:hover {
  color: var(--dp-color-text) !important;
  background: var(--dp-color-header) !important;
  border-radius: var(--dp-border-radius);
}

/* -------------------------------------------------------------------------- */
/* Border-radius + tło pól tekstowych i list wyboru                           */
/* -------------------------------------------------------------------------- */

.button,
.button--small,
.button--extrasmall,
.action-link,
.dropbutton,
.dropbutton-widget,
.dropbutton__toggle,
.form-actions .button,
.project__action_button {
  border-radius: var(--dp-border-radius) !important;
}

.form-element,
.form-element--small,
.form-element--extrasmall,
.form-text,
.form-email,
.form-tel,
.form-url,
.form-search,
.form-number,
.form-date,
.form-time,
.form-datetime,
.form-color,
.form-password,
.form-textarea,
.form-select,
.form-textarea-wrapper,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select,
.ts-wrapper .ts-control {
  border-radius: var(--dp-border-radius) !important;
}

.form-element,
.form-text,
.form-email,
.form-tel,
.form-url,
.form-search,
.form-number,
.form-date,
.form-time,
.form-datetime,
.form-password,
.form-textarea,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select,
.ts-wrapper .ts-control {
  background-color: var(--dp-input-bg);
}

.form-element:hover,
.form-select:hover,
select:hover,
.ts-wrapper .ts-control:hover {
  background-color: var(--dp-input-bg);
}

.form-element[disabled],
.form-element[disabled]:hover {
  background-color: var(--gin-color-disabled-bg) !important;
}

/* -------------------------------------------------------------------------- */
/* Tabele                                                                     */
/* -------------------------------------------------------------------------- */

table thead,
table thead tr,
table.gin--sticky-table-header thead,
table.sticky-header thead,
.field-multiple-table thead {
  background: var(--dp-color-table-header);
}

table thead tr {
  border-block-end-color: var(--dp-color-header);
}

table th,
table thead th,
table.gin--sticky-table-header th,
table.sticky-header th,
.field-multiple-table thead th {
  background: var(--dp-color-table-header) !important;
  color: var(--dp-color-header);
}

table th a,
table th a:hover,
table th a:active,
table th .form-item__label,
table thead .sortable-heading.is-active > a,
table thead .sortable-heading.is-active > a:hover,
table thead .sortable-heading.is-active > a:active {
  color: var(--dp-color-header) !important;
}

/*
 * Gin rozciąga a::before na całą aktywną kolumnę. Nie malować tego tłem
 * headera — nagłówek ma być jednolicie tableHeader.
 */
table thead .sortable-heading > a::before,
table thead .sortable-heading.is-active > a::before,
table thead .sortable-heading > a:hover::before,
table.gin--sticky-table-header .sortable-heading > a::before,
table.gin--sticky-table-header .sortable-heading.is-active > a::before {
  background-color: transparent !important;
  border-block-end-color: var(--dp-color-header);
}

table thead .sortable-heading > a::after,
table thead .tablesort {
  background-color: var(--dp-color-header);
}

table td a,
table td a:link,
table td a:visited,
.views-table td a,
.views-table td a:link,
.views-table td a:visited {
  color: var(--dp-color-header) !important;
  font-weight: var(--gin-font-weight-semibold, 525);
}

table td a:hover,
table td a:focus,
table td a:active,
.views-table td a:hover,
.views-table td a:focus {
  color: var(--dp-color-button) !important;
}

/* -------------------------------------------------------------------------- */
/* Linki, zakładki, pager, przełączniki                                       */
/* -------------------------------------------------------------------------- */

a,
.link,
button.link,
.tabs__link.is-active {
  color: var(--dp-color-accent);
}

a:hover,
.link:hover,
button.link:hover {
  color: var(--dp-color-accent-hover);
}

.pager__link.is-active,
.pager__item--current {
  color: var(--dp-color-text);
  background-color: var(--dp-color-accent);
}

.form-boolean--type-checkbox:checked,
.form-boolean--type-radio:checked:not(:disabled) {
  background-color: var(--dp-color-accent);
  border-color: var(--dp-color-accent);
}