/* eSystemOSP / panelOSP — finalne domknięcie instalatora i brandingu systemowego. */
:root {
  --panelosp-accent: #b5121b;
  --panelosp-accent-light: #f2c230;
  --panelosp-bg: #111827;
  --panelosp-card: rgba(17, 24, 39, .92);
  --panelosp-border: rgba(242, 194, 48, .32);
}

html, body {
  min-height: 100%;
}

body {
  text-rendering: geometricPrecision;
}

/* Najważniejsza poprawka UX: menu boczne ma własny scroll i nie ucina dolnych pozycji. */
.sidebar,
.panel-sidebar,
aside.sidebar,
aside.panel-sidebar,
.app-sidebar,
.layout-sidebar,
.admin-sidebar,
.sidenav,
.side-nav,
nav.sidebar {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 194, 48, .65) rgba(255,255,255,.08);
}

.sidebar::-webkit-scrollbar,
.panel-sidebar::-webkit-scrollbar,
.app-sidebar::-webkit-scrollbar,
.layout-sidebar::-webkit-scrollbar,
.admin-sidebar::-webkit-scrollbar,
.sidenav::-webkit-scrollbar,
.side-nav::-webkit-scrollbar,
nav.sidebar::-webkit-scrollbar {
  width: 9px;
}

.sidebar::-webkit-scrollbar-track,
.panel-sidebar::-webkit-scrollbar-track,
.app-sidebar::-webkit-scrollbar-track,
.layout-sidebar::-webkit-scrollbar-track,
.admin-sidebar::-webkit-scrollbar-track,
.sidenav::-webkit-scrollbar-track,
.side-nav::-webkit-scrollbar-track,
nav.sidebar::-webkit-scrollbar-track {
  background: rgba(255,255,255,.07);
}

.sidebar::-webkit-scrollbar-thumb,
.panel-sidebar::-webkit-scrollbar-thumb,
.app-sidebar::-webkit-scrollbar-thumb,
.layout-sidebar::-webkit-scrollbar-thumb,
.admin-sidebar::-webkit-scrollbar-thumb,
.sidenav::-webkit-scrollbar-thumb,
.side-nav::-webkit-scrollbar-thumb,
nav.sidebar::-webkit-scrollbar-thumb {
  background: rgba(242, 194, 48, .72);
  border-radius: 99px;
}

/* Logo systemu — twarde ograniczenia, żeby nigdy nie rozwaliło instalatora ani logowania. */
.install-logo,
.install-hero img,
.install-card img,
.installer-logo,
.login-logo,
.panelosp-login-brand img,
.panelosp-system-brand img,
.brand-logo img,
.app-logo img,
.system-logo img,
img.system-logo,
img.app-logo {
  max-width: 176px !important;
  max-height: 96px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.panelosp-login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 18px auto;
  text-align: center;
}

.panelosp-login-brand__title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #ffffff;
}

.panelosp-login-brand__subtitle {
  font-size: 13px;
  color: rgba(255,255,255,.72);
}

.panelosp-system-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  margin: 0 0 10px 0;
  border: 1px solid rgba(242, 194, 48, .28);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(181,18,27,.22), rgba(242,194,48,.12));
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}

.panelosp-system-brand img {
  max-width: 52px !important;
  max-height: 52px !important;
}

.panelosp-system-brand__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.panelosp-system-brand__text strong {
  color: #fff;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panelosp-system-brand__text span {
  color: rgba(255,255,255,.68);
  font-size: 12px;
  margin-top: 3px;
}

/* Instalator — spokojny, profesjonalny wygląd bez wielkich grafik. */
.install-hero,
.install-card,
.installer-card,
.login-card,
.card {
  overflow-wrap: anywhere;
}

.install-hero {
  gap: 18px;
}

.install-hero img,
.installer-logo,
.install-logo {
  display: block;
  margin: 0 auto 10px auto;
}

/* Przyciski i akcenty — czerwony jako drugi plan, złoto jako decyzja/stan aktywny. */
.btn-primary,
.button-primary,
button.primary,
a.btn-primary {
  border-color: rgba(242, 194, 48, .38) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

.badge-ok,
.status-ok,
.panelosp-ok {
  color: #16391d;
  background: #c9f7d1;
  border-color: #7fd98f;
}

.badge-warn,
.status-warn,
.panelosp-warn {
  color: #3f3100;
  background: #fff1b8;
  border-color: #f2c230;
}

.badge-error,
.status-error,
.panelosp-error {
  color: #4d0007;
  background: #ffd6da;
  border-color: #e15b66;
}

/* Upload logo w panelu Wygląd / Logo. */
.panelosp-brand-preview {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(242,194,48,.28);
  border-radius: 18px;
  background: rgba(255,255,255,.055);
}

.panelosp-brand-preview img {
  max-width: 190px !important;
  max-height: 105px !important;
  object-fit: contain !important;
}

.panelosp-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.panelosp-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.panelosp-form-grid input[type="text"],
.panelosp-form-grid input[type="color"],
.panelosp-form-grid input[type="file"] {
  width: 100%;
}

/* AI NOTE FOR FUTURE CHANGES: use icon in sidebar/favicon, full logo on installer/login. */
.install-logo-wide,.install-hero img.install-logo-wide{max-width:280px!important;max-height:110px!important;width:auto!important;height:auto!important;object-fit:contain!important;background:transparent!important;border:none!important;border-radius:0!important;padding:0!important}.login-logo-wide,.login-brand img.login-logo-wide,.panelosp-login-brand img{max-width:240px!important;max-height:96px!important;width:auto!important;height:auto!important;object-fit:contain!important;background:transparent!important;border:none!important;border-radius:0!important;padding:0!important}.panelosp-system-brand img{background:transparent!important;border:none!important;padding:0!important}@media(max-width:720px){.install-logo-wide,.install-hero img.install-logo-wide{max-width:210px!important;max-height:84px!important}.login-logo-wide,.login-brand img.login-logo-wide,.panelosp-login-brand img{max-width:180px!important;max-height:72px!important}}

/* AI NOTE FOR FUTURE CHANGES: nie wracamy do płaskiego prostokąta. Logo ma mieć miękką, zaokrągloną, lekko 3D plakietkę tam, gdzie jest duże. */
.install-logo-plaque{display:flex;align-items:center;justify-content:center;flex:0 0 360px;max-width:42%;min-height:132px;padding:20px 26px;border-radius:30px;background:linear-gradient(145deg,rgba(15,23,42,.98),rgba(2,8,23,.96) 62%,rgba(20,30,48,.98));border:1px solid rgba(242,194,48,.52);box-shadow:0 22px 44px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(217,169,40,.20);position:relative;overflow:hidden}.install-logo-plaque:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,rgba(255,255,255,.11),transparent 38%,rgba(217,169,40,.08));pointer-events:none}.install-logo-plaque:after{content:"";position:absolute;left:18px;right:18px;bottom:7px;height:1px;background:linear-gradient(90deg,transparent,rgba(242,194,48,.72),transparent);pointer-events:none}.install-logo-plaque .install-logo-wide{position:relative;z-index:1;width:300px!important;max-width:100%!important;max-height:96px!important;border-radius:22px!important;box-shadow:0 10px 22px rgba(0,0,0,.25)!important}.color-picker-row{display:flex;align-items:center;gap:10px}.color-picker-row input[type="color"]{width:54px!important;min-width:54px;height:42px;padding:3px;border-radius:12px;border:1px solid rgba(242,194,48,.34);background:#0f172a;cursor:pointer}.color-picker-row input[type="text"],.color-picker-row input[data-color-hex]{flex:1;min-width:120px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;text-transform:uppercase}.brand-color-presets{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.brand-color-presets button{border:1px solid rgba(242,194,48,.34);background:rgba(15,23,42,.82);color:#e5e7eb;border-radius:999px;padding:8px 12px;font-weight:800;cursor:pointer}.brand-color-presets button:hover{border-color:rgba(242,194,48,.72);background:rgba(217,169,40,.16)}.brand-live-preview{--preview-main:#D9A928;--preview-light:#F2C94C;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0 4px;padding:14px;border-radius:18px;border:1px solid rgba(242,194,48,.32);background:linear-gradient(135deg,rgba(217,169,40,.14),rgba(15,23,42,.72))}.preview-btn{background:var(--preview-main);color:#111827;border-radius:12px;padding:9px 13px;font-weight:900;box-shadow:0 10px 24px rgba(0,0,0,.22)}.preview-badge{border:1px solid var(--preview-light);color:var(--preview-light);border-radius:999px;padding:7px 11px;font-weight:900}.preview-line{color:#cbd5e1;font-size:13px}@media(max-width:720px){.install-logo-plaque{max-width:100%;flex:1 1 auto;min-height:110px;padding:16px 18px}.install-logo-plaque .install-logo-wide{width:230px!important}.color-picker-row{align-items:stretch}.brand-color-presets{display:grid;grid-template-columns:1fr 1fr}}

/* eSystemOSP authentic logo integration 2026-06-25: logo asset is transparent, plaque is real CSS, no nested dark bitmap rectangle. */
.install-logo-plaque{display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 430px!important;max-width:44%!important;min-height:150px!important;padding:22px 32px!important;border-radius:34px!important;background:linear-gradient(145deg,rgba(17,24,39,.98),rgba(3,10,24,.98) 58%,rgba(26,37,58,.96))!important;border:1px solid rgba(242,201,76,.58)!important;box-shadow:0 24px 46px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(217,169,40,.22)!important;position:relative!important;overflow:hidden!important}.install-logo-plaque:before{content:""!important;position:absolute!important;inset:0!important;border-radius:inherit!important;background:linear-gradient(120deg,rgba(255,255,255,.12),transparent 36%,rgba(217,169,40,.09))!important;pointer-events:none!important}.install-logo-plaque:after{content:""!important;position:absolute!important;left:22px!important;right:22px!important;bottom:8px!important;height:1px!important;background:linear-gradient(90deg,transparent,rgba(242,201,76,.78),transparent)!important;pointer-events:none!important}.install-logo-plaque .install-logo-wide,.install-hero img.install-logo-wide{position:relative!important;z-index:1!important;width:360px!important;max-width:100%!important;max-height:100px!important;height:auto!important;object-fit:contain!important;background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important}.login-logo-wide,.login-brand img.login-logo-wide,.panelosp-login-brand img{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important;max-width:270px!important;max-height:82px!important;width:auto!important;height:auto!important;object-fit:contain!important}.panelosp-system-brand img{background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important}@media(max-width:720px){.install-logo-plaque{max-width:100%!important;flex:1 1 auto!important;min-height:126px!important;padding:18px 22px!important}.install-logo-plaque .install-logo-wide,.install-hero img.install-logo-wide{width:285px!important;max-height:82px!important}.login-logo-wide,.login-brand img.login-logo-wide,.panelosp-login-brand img{max-width:210px!important;max-height:68px!important}}

/* AI NOTE FOR FUTURE CHANGES: selecty mają być ciemnym komponentem panelOSP, nie natywną żółtą listą. */
.panelosp-select{position:relative;width:100%;min-width:180px}.panelosp-select__native{position:absolute!important;left:0!important;top:0!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}.panelosp-select__button{width:100%;justify-content:space-between;background:#0f172a!important;color:#e5e7eb!important;border:1px solid #475569!important;border-radius:12px!important;padding:11px 12px!important;font-weight:700!important;box-shadow:none!important}.panelosp-select__button:hover{border-color:rgba(242,194,48,.58)!important;background:#111c31!important}.panelosp-select__arrow{color:#f2c94c;margin-left:10px}.panelosp-select__menu{display:none;position:absolute;z-index:5000;left:0;right:0;top:calc(100% + 6px);max-height:280px;overflow:auto;padding:6px;background:#0b1220;border:1px solid rgba(242,194,48,.36);border-radius:14px;box-shadow:0 20px 48px rgba(0,0,0,.48)}.panelosp-select.is-open .panelosp-select__menu{display:block}.panelosp-select__option{display:block;width:100%;text-align:left;background:transparent!important;color:#e5e7eb!important;border:0!important;border-radius:10px!important;padding:9px 10px!important;font-weight:700!important}.panelosp-select__option:hover,.panelosp-select__option.is-selected{background:rgba(217,169,40,.18)!important;color:#fde68a!important}.panelosp-select__option[disabled]{opacity:.45;cursor:not-allowed}.backup-table-list{max-height:260px;overflow:auto;border:1px solid rgba(71,85,105,.8);border-radius:14px;padding:10px;background:rgba(15,23,42,.54)}.backup-table-list label{display:block;margin:6px 0;font-weight:600}

/* eSystemOSP / panelOSP — global 3D buttons V1.0
   Cel: spójne, nowoczesne przyciski bez nachodzenia i bez ściskania na telefonach/Firefox.
   Uwaga: wykluczamy techniczne przyciski menu mobilnego i custom-select, żeby nie psuć formularzy. */
:root{
  --eso-btn-radius: 14px;
  --eso-btn-min-h: 44px;
  --eso-btn-pad-x: 18px;
  --eso-btn-gap: 10px;
  --eso-btn-dark-top: #4b5870;
  --eso-btn-dark-mid: #344156;
  --eso-btn-dark-bot: #243045;
}

.btn,
button:not(.mobile-menu-toggle):not(.panelosp-select__button):not(.panelosp-select__option),
input[type="submit"],
input[type="button"],
input[type="reset"]{
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--eso-btn-min-h);
  max-width: 100%;
  padding: 0 var(--eso-btn-pad-x);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--eso-btn-radius);
  background: linear-gradient(180deg, var(--accent2, #f2c94c) 0%, var(--accent, #d9a928) 58%, #b88712 100%);
  color: #111827;
  box-shadow:
    0 10px 20px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 0 rgba(0,0,0,.18);
  font-weight: 850;
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: .01em;
  text-decoration: none;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,.22);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease, border-color .16s ease;
}

.btn::before,
button:not(.mobile-menu-toggle):not(.panelosp-select__button):not(.panelosp-select__option)::before,
input[type="submit"]::before,
input[type="button"]::before,
input[type="reset"]::before{
  content: "";
  position: absolute;
  inset: 1px 8px auto 8px;
  height: 46%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.06), rgba(255,255,255,0));
  pointer-events: none;
}

.btn:hover,
button:not(.mobile-menu-toggle):not(.panelosp-select__button):not(.panelosp-select__option):hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover{
  transform: translateY(-2px);
  filter: brightness(1.045);
  box-shadow:
    0 14px 28px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 0 rgba(0,0,0,.20);
}

.btn:active,
button:not(.mobile-menu-toggle):not(.panelosp-select__button):not(.panelosp-select__option):active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active{
  transform: translateY(1px) scale(.992);
  box-shadow:
    0 6px 12px rgba(0,0,0,.22),
    inset 0 2px 5px rgba(0,0,0,.18);
}

.btn:focus-visible,
button:not(.mobile-menu-toggle):not(.panelosp-select__button):not(.panelosp-select__option):focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(242,201,76,.32),
    0 14px 28px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -2px 0 rgba(0,0,0,.18);
}

.btn.secondary,
button.secondary,
.btn.btn-secondary,
input.secondary[type="submit"],
input.secondary[type="button"]{
  background: linear-gradient(180deg, var(--eso-btn-dark-top) 0%, var(--eso-btn-dark-mid) 58%, var(--eso-btn-dark-bot) 100%);
  color: #eef3ff;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  border-color: rgba(255,255,255,.11);
}

.btn.primary,
button.primary,
.btn.btn-primary{
  background: linear-gradient(180deg, var(--accent2, #f2c94c) 0%, var(--accent, #d9a928) 58%, #b88712 100%);
  color: #111827;
}

.btn.danger,
button.danger,
.btn.btn-danger,
input.danger[type="submit"],
input.danger[type="button"]{
  background: linear-gradient(180deg, #ff7373 0%, var(--danger, #ef4444) 58%, #b92e2e 100%);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  border-color: rgba(255,255,255,.12);
}

.btn[disabled],
button[disabled],
input[disabled][type="submit"],
input[disabled][type="button"],
.btn.is-disabled{
  opacity: .52;
  filter: grayscale(.15);
  cursor: not-allowed;
  transform: none !important;
}

.actions,
.inline-actions,
.page-actions,
.pm-actions,
.uu-actions,
.uu-row-actions,
.us-actions,
.um-actions,
.ucp-perm-buttons,
.brand-live-preview{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--eso-btn-gap);
  max-width: 100%;
  min-width: 0;
}

.actions > *,
.inline-actions > *,
.page-actions > *,
.pm-actions > *,
.uu-actions > *,
.uu-row-actions > *,
.us-actions > *,
.um-actions > *,
.ucp-perm-buttons > *{
  min-width: 0;
}

.actions form,
.inline-actions form,
.uu-inline-form,
.uu-actions form,
.us-actions form,
.um-actions form,
.pm-actions form{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--eso-btn-gap);
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

.inline-actions .btn,
.inline-actions button,
.uu-row-actions .btn,
.uu-row-actions button,
.ucp-action,
.ucp-perm-buttons .btn,
.ucp-perm-buttons button{
  min-height: 38px;
  padding-left: 13px;
  padding-right: 13px;
  border-radius: 12px;
  font-size: 13px;
}

/* Małe specjalne przyciski zostają kompaktowe, ale nadal z głębią. */
.brand-color-presets button,
.panelosp-select__button,
.panelosp-select__option{
  transform: none;
}

.panelosp-select__button,
.panelosp-select__option{
  box-shadow: none !important;
  text-shadow: none !important;
}