/**
 * Support e-learning.pl -- warstwa identyfikacji wizualnej nad motywem ACE (skin-3).
 *
 * Ładowana po ace.min.css, ace-mantis.css, ace-skins.min.css i elpl.css
 * (layout_head_css() w core/layout_api.php), więc wygrywa przy tej samej specyficzności.
 * !important stosujemy tylko tam, gdzie ACE sam go używa (przyciski, pola, sidebar skin-3).
 *
 * @author      Kamil Luczak <kamil.luczak@e-learning.pl>
 * @copyright   (C) 2026 e-learning.pl (https://e-learning.pl)
 */

:root {
    --sp-brand: #009ee3;
    --sp-brand-light: #25b8fe;
    --sp-brand-hover: #0089c6;
    --sp-accent: #0074ad;
    --sp-brand-soft: #e7f6fd;
    --sp-brand-ring: rgba(0, 158, 227, 0.18);
    --sp-ink: #1d2733;
    --sp-ink-2: #3c4855;
    --sp-muted: #6b7684;
    --sp-line: #e3e8ee;
    --sp-line-strong: #cfd7df;
    --sp-bg: #f3f5f8;
    --sp-surface: #fff;
    --sp-surface-2: #f8fafb;
    --sp-hover: #f1f5f8;
    --sp-radius: 10px;
    --sp-radius-sm: 6px;
    --sp-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.05);
    --sp-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.10), 0 2px 6px rgba(16, 24, 40, 0.05);
}

body,
body.skin-3 {
    background-color: var(--sp-bg);
    color: var(--sp-ink);
}

a {
    color: var(--sp-accent);
}

a:hover,
a:focus {
    color: var(--sp-brand-hover);
}

/* --- Tło strony -------------------------------------------------------- */

.skin-3 .main-container:before {
    background: var(--sp-bg) !important;
}

.main-content,
.page-content {
    background-color: var(--sp-bg);
}

/* --- Górna belka ------------------------------------------------------- */

/* MantisBT 2.28 dodaje ".skin-3 .navbar.navbar-collapse { background-color: #404040 }" -- stąd drugi selektor. */
.skin-3 .navbar,
.skin-3 .navbar.navbar-collapse {
    background: var(--sp-surface);
    border-bottom: 1px solid var(--sp-line);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* 2.28 zeruje odstępy belki ("top included page") -- przywracamy wartości z ACE. */
.skin-3 .navbar-container {
    padding-left: 10px;
    padding-right: 10px;
}

.navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 45px;
    padding: 0 16px 0 14px;
    color: var(--sp-ink);
}

.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
    color: var(--sp-ink);
}

.navbar .sp-brand-logo {
    display: block;
    height: 22px;
    width: auto;
}

.navbar .sp-brand-label {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--sp-brand-soft);
    color: var(--sp-accent);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.ace-nav > li {
    border-left: 0;
}

.ace-nav > li > a,
.ace-nav > li.grey > a,
.ace-nav > li.light-blue > a,
.ace-nav > li.purple > a,
.ace-nav > li.green > a {
    background-color: transparent !important;
    color: var(--sp-ink-2) !important;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ace-nav > li > a:hover,
.ace-nav > li > a:focus,
.ace-nav > li.open > a {
    background-color: var(--sp-hover) !important;
    color: var(--sp-ink) !important;
}

.ace-nav > li > a > .ace-icon {
    color: var(--sp-muted);
}

.ace-nav > li > a:hover > .ace-icon {
    color: var(--sp-accent);
}

.ace-nav .nav-avatar-40 {
    border-color: var(--sp-line);
}

/* Zastępczy avatar (fa-user z klasą .white z ACE) -- na białej belce był niewidoczny */
.navbar .ace-icon.fa-user.white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: -3px 6px 0 0;
    border-radius: 999px;
    background-color: var(--sp-brand-soft);
    color: var(--sp-accent) !important;
    font-size: 15px;
    vertical-align: middle;
}

/* Przyciski "Dodaj" / "Zaproś osoby" w belce */
.ace-nav .btn-group .btn,
.ace-nav > li > .btn {
    border-radius: var(--sp-radius-sm) !important;
}

.skin-3 .navbar .navbar-toggle,
.skin-3 .main-container .menu-toggler {
    background-color: var(--sp-brand) !important;
    border-radius: var(--sp-radius-sm);
}

/* Menu rozwijane (projekty, konto) */
.dropdown-menu {
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-sm);
    box-shadow: var(--sp-shadow-lg);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a {
    background-color: var(--sp-brand-soft) !important;
    color: var(--sp-accent) !important;
}

/* --- Pasek użytkownika pod belką (breadcrumbs) -------------------------- */

.breadcrumbs,
.skin-3 .breadcrumbs {
    background-color: transparent;
    border-bottom: 0;
}

.breadcrumbs .breadcrumb > li > a {
    color: var(--sp-ink-2);
}

.breadcrumbs .label,
.breadcrumbs .label-grey {
    border-radius: 999px;
    background-color: #e9edf1 !important;
    color: var(--sp-muted) !important;
    font-weight: 500;
    text-shadow: none;
}

/* Szare etykiety dat (oś czasu, filtry) */
.label.label-grey,
.label-grey {
    border-radius: 999px;
    background-color: #e9edf1 !important;
    color: var(--sp-ink-2) !important;
}

.breadcrumbs .label:before,
.breadcrumbs .label:after {
    display: none;
}

/* --- Sidebar ----------------------------------------------------------- */

.skin-3 .sidebar {
    background-color: var(--sp-surface);
    border-color: var(--sp-line);
}

.skin-3 .sidebar:before {
    background-color: var(--sp-surface);
    border-color: var(--sp-line);
}

.skin-3 .nav-list > li,
.skin-3 .nav-list > li:hover,
.skin-3 .nav-list > li:hover + li,
.skin-3 .nav-list > li.active,
.skin-3 .nav-list > li.active + li,
.skin-3 .nav-list > li.active + li:last-child {
    border-color: transparent !important;
}

.skin-3 .nav-list > li > a {
    margin: 2px 8px;
    border-radius: 8px;
    background-color: transparent;
    color: var(--sp-ink-2);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.skin-3 .nav-list > li:hover > a,
.skin-3 .nav-list > li > a:focus {
    background-color: var(--sp-hover);
    color: var(--sp-ink);
}

.skin-3 .nav-list > li.active > a,
.skin-3 .nav-list > li.active.highlight > a {
    background-color: var(--sp-brand-soft) !important;
    color: var(--sp-accent) !important;
    font-weight: 600;
}

.skin-3 .nav-list > li:hover:before,
.skin-3 .nav-list > li.open:before,
.skin-3 .nav-list > li.active:before,
.skin-3 .nav-list li.active > a:before,
.skin-3 .nav-list li.active > a:after {
    display: none !important;
}

.nav-list > li > a > .menu-icon {
    color: inherit;
}

.skin-3 .sidebar.menu-min .nav-list > li > a > .menu-text,
.skin-3 .sidebar.responsive-min .nav-list > li > a > .menu-text {
    background-color: var(--sp-surface);
    border-color: var(--sp-line);
    box-shadow: var(--sp-shadow-lg);
}

.skin-3 .sidebar.menu-min .nav-list > li.active > a > .menu-text {
    background-color: var(--sp-brand-soft);
}

.skin-3 .sidebar.menu-min .nav-list > li > a {
    margin: 2px 4px;
}

.skin-3 .sidebar-toggle {
    background-color: var(--sp-surface);
    border-color: var(--sp-line);
}

.skin-3 .sidebar-toggle:before {
    border-color: var(--sp-line);
}

.skin-3 .sidebar-toggle > .ace-icon {
    border-color: var(--sp-line-strong);
    border-radius: 999px;
    color: var(--sp-muted);
}

/* --- Karty (widget-box) ------------------------------------------------ */

.widget-box {
    border: 1px solid var(--sp-line) !important;
    border-radius: var(--sp-radius);
    background: var(--sp-surface);
    box-shadow: var(--sp-shadow);
}

.widget-box.transparent {
    border: 0 !important;
    background: transparent;
    box-shadow: none;
}

.widget-box > .widget-header,
.widget-box[class*="widget-color-"] > .widget-header {
    min-height: 44px;
    padding-left: 14px;
    border: 0;
    border-bottom: 1px solid var(--sp-line);
    border-radius: var(--sp-radius) var(--sp-radius) 0 0;
    background: var(--sp-surface);
    color: var(--sp-ink);
}

.widget-box.collapsed > .widget-header {
    border-bottom: 0;
    border-radius: var(--sp-radius);
}

.widget-header > .widget-title {
    font-size: 15.5px;
    font-weight: 600;
    line-height: 43px;
    color: var(--sp-ink);
}

.widget-header > .widget-title > .ace-icon,
.widget-header > .widget-title a > .ace-icon {
    color: var(--sp-brand);
}

/* Mantis nadaje linkom w tytułach klasę .white (ACE: color #fff !important) */
.widget-header > .widget-title a,
.widget-header > .widget-title .white {
    color: var(--sp-ink) !important;
}

.widget-header > .widget-title a:hover {
    color: var(--sp-accent) !important;
}

.widget-header .widget-toolbar > a,
.widget-header .widget-toolbar > .widget-menu > a,
.widget-box[class*="widget-color-"] > .widget-header > .widget-toolbar > a {
    color: var(--sp-muted);
}

.widget-header .widget-toolbar > a:hover {
    color: var(--sp-accent);
}

.widget-toolbar:before,
.widget-box[class*="widget-color-"] > .widget-header > .widget-toolbar:before {
    border-color: var(--sp-line);
}

.widget-title .badge,
.widget-header .badge {
    border-radius: 999px;
    background-color: var(--sp-brand-soft) !important;
    color: var(--sp-accent) !important;
    font-weight: 600;
    text-shadow: none;
}

.widget-body {
    border-radius: 0 0 var(--sp-radius) var(--sp-radius);
    background: var(--sp-surface);
}

.widget-toolbox {
    background-color: var(--sp-surface-2);
}

.widget-toolbox.padding-8 {
    border-bottom: 1px solid var(--sp-line);
}

.widget-toolbox.toolbar {
    border-color: var(--sp-line);
}

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

.table > thead > tr {
    background: var(--sp-surface-2);
    background-image: none;
    color: var(--sp-muted);
}

.table > thead > tr > th {
    border-color: var(--sp-line);
    color: var(--sp-muted);
    font-weight: 600;
}

.table > thead > tr > th a {
    color: var(--sp-ink-2);
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th {
    border-color: var(--sp-line);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fafbfc;
}

.table-hover > tbody > tr:hover {
    background-color: #eef7fc;
}

.table th.category,
.table td.category {
    background-color: var(--sp-surface-2);
    color: var(--sp-ink-2);
    font-weight: 600;
}

/* Termin realizacji -- stonowane odcienie zamiast pełnej czerwieni/zieleni */
td.due-0,
td.overdue {
    background-color: #fdecea;
    color: #b3261e;
}

td.due-1 {
    background-color: #fff3dc;
    color: #8a5300;
}

td.due-2 {
    background-color: #e8f4ea;
    color: #2e6b36;
}

/* --- Przyciski --------------------------------------------------------- */

.btn {
    border-radius: var(--sp-radius-sm) !important;
    text-shadow: none !important;
    font-weight: 500;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn.btn-round {
    border-bottom-width: 1px;
}

.btn-primary,
.btn-primary:focus {
    background-color: var(--sp-brand) !important;
    border-color: var(--sp-brand);
}

.btn-primary:hover,
.btn-primary:active,
.open > .btn-primary.dropdown-toggle {
    background-color: var(--sp-brand-hover) !important;
    border-color: var(--sp-brand-hover);
}

.btn.btn-white,
.btn.btn-white:focus {
    background-color: var(--sp-surface) !important;
    border-color: var(--sp-line-strong);
    color: var(--sp-ink-2) !important;
}

.btn.btn-white:hover,
.btn.btn-white:active,
.btn.btn-white.active {
    background-color: var(--sp-hover) !important;
    border-color: var(--sp-line-strong);
    color: var(--sp-ink) !important;
}

.btn.btn-white.btn-primary {
    border-color: #a8d6ee;
    color: var(--sp-accent) !important;
}

.btn.btn-white.btn-primary:hover,
.btn.btn-white.btn-primary:active {
    background-color: var(--sp-brand-soft) !important;
    border-color: var(--sp-brand);
    color: var(--sp-accent) !important;
}

.btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--sp-brand-ring) !important;
}

/* --- Pola formularzy --------------------------------------------------- */

.form-control,
select,
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"] {
    border-color: var(--sp-line-strong);
    border-radius: var(--sp-radius-sm) !important;
    color: var(--sp-ink);
}

.form-control:focus,
select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus {
    border-color: var(--sp-brand);
    box-shadow: 0 0 0 3px var(--sp-brand-ring) !important;
    color: var(--sp-ink);
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: #9aa4ae;
}

/* --- Zakładki, paginacja, etykiety ------------------------------------- */

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border-top-color: var(--sp-brand);
    color: var(--sp-ink);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    background-color: var(--sp-brand);
    border-color: var(--sp-brand);
}

.badge,
.label {
    text-shadow: none;
}

/* --- Stopka ------------------------------------------------------------ */

.footer .footer-inner .footer-content {
    border-top: 1px solid var(--sp-line);
    color: var(--sp-muted);
}

.footer address {
    margin: 0;
    line-height: 1.6;
}

.footer .sp-footer-brand {
    color: var(--sp-ink-2);
    font-weight: 600;
}

.footer .sp-footer-engine {
    color: #9aa4ae;
    font-size: 12px;
}

.btn-scroll-up.btn-inverse {
    background-color: var(--sp-ink-2) !important;
    border-color: var(--sp-ink-2);
}

/* --- Szybkie wyszukiwanie (Ctrl+K, js/support_search.js) ---------------- */

.navbar .sp-search-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    float: left;
    height: 31px;
    margin: 7px 0 0 4px;
    padding: 0 8px 0 11px;
    border: 1px solid var(--sp-line);
    border-radius: 8px;
    background: var(--sp-surface-2);
    color: var(--sp-muted);
    font-size: 13.5px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.navbar .sp-search-trigger:hover,
.navbar .sp-search-trigger:focus-visible {
    border-color: var(--sp-brand);
    background: var(--sp-surface);
    color: var(--sp-accent);
    outline: 0;
}

.navbar .sp-search-trigger-text {
    min-width: 110px;
    text-align: left;
}

.navbar .sp-search-trigger kbd,
.sp-search-kbd {
    padding: 2px 6px;
    border: 1px solid var(--sp-line);
    border-radius: 5px;
    background: var(--sp-surface);
    box-shadow: none;
    color: var(--sp-muted);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
}

.sp-search-lock,
.sp-search-lock body {
    overflow: hidden;
}

.sp-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 16px;
    background: rgba(16, 24, 40, 0.38);
}

.sp-search-overlay[hidden] {
    display: none;
}

.sp-search {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    max-height: 70vh;
    overflow: hidden;
    border: 1px solid var(--sp-line);
    border-radius: 14px;
    background: var(--sp-surface);
    box-shadow: 0 24px 60px rgba(16, 24, 40, 0.22), 0 4px 12px rgba(16, 24, 40, 0.08);
}

.sp-search-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--sp-line);
}

.sp-search-icon {
    color: var(--sp-muted);
    font-size: 16px;
}

.sp-search .sp-search-input,
.sp-search .sp-search-input:focus {
    flex: 1;
    min-width: 0;
    height: 30px;
    padding: 0;
    border: 0;
    box-shadow: none !important;
    background: transparent;
    color: var(--sp-ink);
    font-size: 16px;
}

.sp-search-input::-webkit-search-cancel-button {
    display: none;
}

.sp-search-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}

.sp-search-group {
    padding: 10px 10px 4px;
    color: var(--sp-muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sp-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--sp-ink);
    cursor: pointer;
}

.sp-search-item.is-active {
    background: var(--sp-brand-soft);
}

.sp-search-status {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.12);
}

.sp-search-picon {
    flex: none;
    width: 14px;
    color: var(--sp-muted);
    text-align: center;
}

.sp-search-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.sp-search-line {
    display: flex;
    gap: 8px;
    min-width: 0;
}

.sp-search-id {
    flex: none;
    color: var(--sp-accent);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.sp-search-summary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-search-meta {
    overflow: hidden;
    color: var(--sp-muted);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-search-board {
    flex: none;
    padding: 3px 9px;
    border: 1px solid #a8d6ee;
    border-radius: 999px;
    color: var(--sp-accent);
    font-size: 12px;
    font-weight: 600;
}

.sp-search-board:hover {
    background: var(--sp-surface);
    text-decoration: none;
}

.sp-search-empty {
    padding: 22px 12px;
    color: var(--sp-muted);
    text-align: center;
}

.sp-search-foot {
    padding: 8px 14px;
    border-top: 1px solid var(--sp-line);
    background: var(--sp-surface-2);
    color: var(--sp-muted);
    font-size: 12px;
}

@media (max-width: 767px) {
    .navbar .sp-search-trigger {
        margin-left: 0;
        padding: 0 10px;
    }

    .sp-search-overlay {
        padding-top: 16px;
    }

    .sp-search-foot {
        display: none;
    }
}

/* --- Filtry w nagłówkach kolumn listy zgłoszeń (js/column_filters.js) --- */

.sp-colfilter-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
    padding: 2px 5px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: #9aa4ae;
    font-size: 12px;
    line-height: 1.2;
    vertical-align: middle;
    cursor: pointer;
}

.sp-colfilter-btn:hover,
.sp-colfilter-btn:focus-visible {
    border-color: var(--sp-line-strong);
    background: var(--sp-surface);
    color: var(--sp-accent);
    outline: 0;
}

.sp-colfilter-btn.is-active {
    border-color: #a8d6ee;
    background: var(--sp-brand-soft);
    color: var(--sp-accent);
}

.sp-colfilter-count {
    font-size: 11px;
    font-weight: 700;
}

.sp-colfilter-panel {
    position: absolute;
    z-index: 1500;
    width: 260px;
    padding: 10px;
    border: 1px solid var(--sp-line);
    border-radius: 10px;
    background: var(--sp-surface);
    box-shadow: var(--sp-shadow-lg);
    font-size: 14px;
    text-align: left;
}

.sp-colfilter-panel[hidden] {
    display: none;
}

.sp-colfilter-title {
    margin-bottom: 8px;
    color: var(--sp-ink);
    font-weight: 600;
}

.sp-colfilter-panel .sp-colfilter-search {
    width: 100% !important;
    margin-bottom: 6px;
}

.sp-colfilter-list {
    max-height: 260px;
    overflow-y: auto;
    margin: 0 -4px;
}

.sp-colfilter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 4px;
    border-radius: 6px;
    color: var(--sp-ink-2);
    font-weight: 400;
    cursor: pointer;
}

.sp-colfilter-option[hidden] {
    display: none;
}

.sp-colfilter-option:hover {
    background: var(--sp-hover);
}

.sp-colfilter-option input {
    margin: 0;
}

.sp-colfilter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--sp-line);
}

.sp-colfilter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--sp-line);
    background: var(--sp-surface-2);
}

.sp-colfilter-bar[hidden] {
    display: none;
}

.sp-colfilter-bar-label {
    color: var(--sp-muted);
    font-size: 13px;
}

.sp-colfilter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid #a8d6ee;
    border-radius: 999px;
    background: var(--sp-brand-soft);
    color: var(--sp-accent);
    font-size: 13px;
}

.sp-colfilter-pill:hover {
    border-color: var(--sp-brand);
    text-decoration: none;
}

.sp-colfilter-pill strong {
    font-weight: 600;
}

.sp-colfilter-clear-all {
    margin-left: 4px;
    font-size: 13px;
}

/* --- Szybkie ustawienie terminu (js/due_date_quick.js) ------------------ */

.sp-due-quick {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: 8px;
    vertical-align: middle;
}

.sp-due-quick .btn.active,
.sp-due-quick .btn.active:hover {
    background-color: var(--sp-brand) !important;
    border-color: var(--sp-brand);
    color: #fff !important;
}

@media (max-width: 767px) {
    .sp-due-quick {
        display: flex;
        margin: 6px 0 0;
    }
}

/* --- Wybór wielu osób (js/people_picker.js) ----------------------------- */

.sp-picker {
    max-width: 880px;
    padding: 10px;
    border: 1px solid var(--sp-line-strong);
    border-radius: 8px;
    background: var(--sp-surface);
}

.sp-picker-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
    margin-bottom: 8px;
}

.sp-picker-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid #a8d6ee;
    border-radius: 999px;
    background: var(--sp-brand-soft);
    color: var(--sp-accent);
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
}

.sp-picker-chip:hover,
.sp-picker-chip:focus-visible {
    border-color: var(--sp-brand);
    outline: 0;
}

.sp-picker-chip .fa {
    font-size: 11px;
    opacity: 0.75;
}

.sp-picker-empty {
    align-self: center;
    color: var(--sp-muted);
    font-size: 13px;
}

.sp-picker-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.sp-picker .sp-picker-search {
    flex: 1 1 240px;
    width: auto !important;
    min-width: 0;
}

.sp-picker-count {
    margin-left: auto;
    color: var(--sp-muted);
    font-size: 13px;
}

.sp-picker-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 4px;
    max-height: 320px;
    overflow-y: auto;
}

.sp-picker-person {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 400;
    cursor: pointer;
    user-select: none;
}

.sp-picker-person[hidden] {
    display: none;
}

.sp-picker-person:hover {
    background: var(--sp-hover);
}

.sp-picker-person.is-selected {
    border-color: #a8d6ee;
    background: var(--sp-brand-soft);
}

.sp-picker-person input {
    margin: 0;
}

.sp-picker-avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #e9edf1;
    color: var(--sp-ink-2);
    font-size: 11.5px;
    font-weight: 600;
}

.sp-picker-person.is-selected .sp-picker-avatar {
    background: var(--sp-brand);
    color: #fff;
}

.sp-picker-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.sp-picker-name {
    overflow: hidden;
    color: var(--sp-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-picker-login {
    overflow: hidden;
    color: var(--sp-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-picker-none {
    padding: 10px 4px;
    color: var(--sp-muted);
    font-size: 13px;
}

.sp-picker-none[hidden] {
    display: none;
}

/* --- Ekrany logowania, rejestracji i odzyskiwania hasła ----------------- */

.login-layout.light-login {
    background:
        radial-gradient(1100px 520px at 50% -140px, rgba(37, 184, 254, 0.16), transparent 70%),
        var(--sp-bg) !important;
}

.login-layout .main-content {
    background: transparent;
}

.login-layout .login-container {
    max-width: 440px;
    margin: 0 auto;
}

.login-layout .login-logo {
    margin: 56px 0 28px;
    text-align: center;
}

.login-layout .login-logo img {
    display: block;
    width: 230px;
    max-width: 70%;
    height: auto;
    margin: 0 auto;
}

.login-layout .sp-login-label {
    display: inline-block;
    margin-top: 14px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--sp-brand-soft);
    color: var(--sp-accent);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.login-layout .widget-box,
.login-layout .signup-box.widget-box {
    overflow: hidden;
    border: 1px solid var(--sp-line) !important;
    border-radius: 14px;
    background: var(--sp-surface);
    box-shadow: var(--sp-shadow-lg);
}

.login-layout .widget-box .widget-body,
.login-layout .widget-box .widget-main,
.login-layout .signup-box .widget-main {
    background: var(--sp-surface);
}

.login-layout .widget-main {
    padding: 28px 32px 30px;
}

.login-layout .widget-main h4.header {
    margin-top: 0;
    padding-bottom: 0;
    border-bottom: 0;
    color: var(--sp-ink);
    font-size: 21px;
    font-weight: 600;
}

.login-layout .widget-main h4.header > .ace-icon {
    display: none;
}

.login-layout input[type="text"],
.login-layout input[type="password"],
.login-layout input[type="email"] {
    height: 44px;
    padding: 0 38px 0 13px;
    font-size: 15px;
}

.login-layout .input-icon > .ace-icon {
    right: 6px;
    line-height: 42px;
    color: #9aa4ae;
}

.login-layout .input-icon > input:focus + .ace-icon {
    color: var(--sp-brand);
}

.login-layout .btn-success,
.login-layout .btn-success.btn-inverse,
.login-layout input[type="submit"].btn {
    float: none !important;
    width: 100% !important;
    height: 44px;
    margin-top: 6px;
    border: 0;
    border-radius: 8px !important;
    background-color: var(--sp-brand) !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
}

.login-layout .btn-success:hover,
.login-layout input[type="submit"].btn:hover {
    background-color: var(--sp-brand-hover) !important;
}

.login-layout .btn-block.btn-white {
    height: 44px;
    border-radius: 8px !important;
    font-weight: 600;
}

.login-layout .toolbar,
.signup-box .toolbar {
    padding: 14px 32px;
    border-top: 1px solid var(--sp-line);
    background: var(--sp-surface-2);
}

.login-layout .toolbar a,
.login-layout .toolbar .back-to-login-link {
    color: var(--sp-accent) !important;
    font-size: 14px;
    font-weight: 600;
    text-shadow: none;
}

.login-layout .alert {
    border-radius: 8px;
}

.login-layout .footer {
    display: none;
}

@media (max-width: 480px) {
    .login-layout .login-container {
        padding: 0 8px;
    }

    .login-layout .widget-main {
        padding: 24px 20px 26px;
    }

    .login-layout .toolbar,
    .signup-box .toolbar {
        padding: 14px 20px;
    }
}

/* --- Zgodność z MantisBT 2.28 ------------------------------------------ */
/* 2.28 zmienia w ace-mantis.css kilka rzeczy, które psują dotychczasowy wygląd. */

/* Pionowe linie w tabelach (2.28 zeruje border-left/right w .table-bordered). */
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border-left-width: 1px;
    border-right-width: 1px;
}

/* Stała szerokość sidebara jak w ACE (2.28: min-width 190px, width auto) -- tryb kompaktowy
   ma 125 px i tyle samo marginesu treści, inaczej menu zasłania lewą część strony. */
@media (min-width: 992px) {
    .skin-3 .sidebar:not(.menu-min) {
        width: 190px;
        min-width: 190px;
    }

    .skin-3 .sidebar.compact:not(.menu-min) {
        width: 125px;
        min-width: 125px;
    }
}

/* 2.28 wymusza height: 30px dla .btn-sm. */
.btn-sm,
.btn-group-sm > .btn {
    height: auto;
}