/**
 * TARG Design System — Panel użytkownika.
 *
 * Końcowa warstwa:
 * - wspólna szerokość logo i sidebara,
 * - większe logo,
 * - ukrycie napisu „Panel klienta”,
 * - tytuł w jednej linii,
 * - responsywna siatka kafelków,
 * - większe ikony.
 */

/* ==========================================================
   PODSTAWOWE WYMIARY
========================================================== */

body.tds-dashboard-page {
--tds-dashboard-sidebar-width: 305px;
--tds-dashboard-content-gap: 44px;
}

/* ==========================================================
   HEADER — POLE LOGO IDENTYCZNE JAK SIDEBAR
========================================================== */

body.tds-dashboard-page .tds-app-header-brand {
flex: 0 0 var(--tds-dashboard-sidebar-width) !important;
width: var(--tds-dashboard-sidebar-width) !important;
min-width: var(--tds-dashboard-sidebar-width) !important;
max-width: var(--tds-dashboard-sidebar-width) !important;

padding: 0 28px !important;

background: #ffffff !important;
border-right: 1px solid #e7e3dc !important;
}

/*
 * Nadpisujemy wcześniejsze szerokości logo.
 */

body.tds-dashboard-page
.tds-app-header-brand
.tds-app-logo {
display: flex !important;
align-items: center !important;

flex: 1 1 auto;
min-width: 0;

height: 100%;
}

body.tds-dashboard-page
.tds-app-header-brand
.tds-dashboard-logo {
display: flex !important;
align-items: center !important;

width: 100% !important;
max-width: 220px !important;
height: 100%;
}

body.tds-dashboard-page
.tds-app-header-brand
.tds-dashboard-logo img {
display: block !important;

width: auto !important;
max-width: 215px !important;
height: auto !important;
max-height: 68px !important;

object-fit: contain !important;
object-position: left center !important;

/*
 * Logo pozostaje grafitowo-złote, ale nie jest tak ciemne.
 */
opacity: 0.94 !important;
filter:
brightness(0)
saturate(100%)
invert(25%)
sepia(11%)
saturate(387%)
hue-rotate(35deg)
brightness(91%)
contrast(88%) !important;
}

/* ==========================================================
   USUNIĘCIE TEKSTU „PANEL KLIENTA”
========================================================== */

body.tds-dashboard-page :is(
.tds-app-header-title,
.tds-app-header-context,
.tds-app-header-label,
.dashboard-header-title,
.dashboard-header-label
) {
display: none !important;
}

/*
 * Środkowa część headera pozostaje pusta i nie rezerwuje
 * dodatkowej szerokości na dawny napis.
 */

body.tds-dashboard-page :is(
.tds-app-header-center,
.tds-app-header-main,
.dashboard-header-main
) {
min-width: 0 !important;
padding-left: 0 !important;
}

/* ==========================================================
   SIDEBAR — TA SAMA SZEROKOŚĆ CO LOGO
========================================================== */

body.tds-dashboard-page .dashboard-sidebar,
body.tds-dashboard-page .tds-dashboard-sidebar,
body.tds-dashboard-page .rh_dashboard__sidebar {
width: var(--tds-dashboard-sidebar-width) !important;
min-width: var(--tds-dashboard-sidebar-width) !important;
max-width: var(--tds-dashboard-sidebar-width) !important;
}

/*
 * Usuwamy ewentualne poszerzenie sidebara z poprzednich etapów.
 */

body.tds-dashboard-page .tds-dashboard-sidebar-inner {
width: 100% !important;
max-width: 100% !important;
}

/* ==========================================================
   GŁÓWNY OBSZAR TREŚCI
========================================================== */

body.tds-dashboard-page :is(
.dashboard-content,
.dashboard-content-area,
.dashboard-page-content,
.rh_dashboard__content
) {
min-width: 0;
}

body.tds-dashboard-module-dashboard
#tds-dashboard-overview {
width: 100%;
max-width: none !important;
margin-top: 26px;
}

/* ==========================================================
   TYTUŁ PANELU — JEDNA LINIA
========================================================== */

body.tds-dashboard-module-dashboard :is(
.dashboard-page-title,
.dashboard-content h1,
.dashboard-page-content h1,
.page-head h1
) {
display: block;

width: auto !important;
max-width: none !important;

margin-bottom: 28px;

overflow: visible !important;
white-space: nowrap !important;

color: #262824;

font-family:
"Satoshi",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif !important;

font-size: clamp(30px, 2.3vw, 38px) !important;
font-weight: 700 !important;
line-height: 1.1 !important;
letter-spacing: -0.045em !important;
}

/* ==========================================================
   SIATKA KAFELKÓW
========================================================== */

body.tds-dashboard-module-dashboard
.tds-dashboard-overview__grid {
display: grid !important;

grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 24px !important;

width: 100% !important;
max-width: none !important;

margin: 0 !important;
padding: 0 !important;
}

/*
 * Każdy kafelek może się zwężać. Zapobiega to wychodzeniu
 * trzeciej kolumny poza ekran.
 */

body.tds-dashboard-module-dashboard
.tds-dashboard-overview-card {
box-sizing: border-box !important;

width: 100% !important;
min-width: 0 !important;
max-width: none !important;
min-height: 228px !important;

padding: 32px 34px !important;

overflow: hidden;

border-radius: 14px !important;
}

/* ==========================================================
   WIĘKSZE TŁO I IKONA
========================================================== */

body.tds-dashboard-module-dashboard
.tds-dashboard-overview-card__icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;

flex: 0 0 82px !important;

width: 82px !important;
height: 82px !important;

margin: 0 0 27px !important;

color: #a96f2c !important;
background: #f8efe3 !important;

border-radius: 50% !important;
}

body.tds-dashboard-module-dashboard
.tds-dashboard-overview-card__icon svg {
display: block !important;

width: 43px !important;
height: 43px !important;

stroke: currentColor !important;
stroke-width: 1.65 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;

fill: none !important;
}

/* ==========================================================
   WARTOŚCI I OPISY
========================================================== */

body.tds-dashboard-module-dashboard
.tds-dashboard-overview-card__value {
margin-bottom: 8px !important;

color: #242623 !important;

font-size: 40px !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: -0.055em !important;
}

body.tds-dashboard-module-dashboard
.tds-dashboard-overview-card__label {
display: block;

max-width: 100% !important;

color: #696c67 !important;

font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.42 !important;
letter-spacing: -0.01em !important;
}

/* ==========================================================
   LEKKI HOVER
========================================================== */

body.tds-dashboard-module-dashboard
.tds-dashboard-overview-card:hover {
border-color: #ddd4c8 !important;

box-shadow:
0 2px 4px rgba(28, 30, 27, 0.025),
0 16px 38px rgba(28, 30, 27, 0.06) !important;

transform: translateY(-2px);
}

body.tds-dashboard-module-dashboard
.tds-dashboard-overview-card:hover
.tds-dashboard-overview-card__icon {
color: #965f24 !important;
background: #f5e7d5 !important;
}

/* ==========================================================
   PRZYCISK „DODAJ OFERTĘ”
========================================================== */

body.tds-dashboard-page .tds-app-add-property {
min-height: 43px !important;
padding: 0 18px !important;

color: #9a662e !important;
background: #ffffff !important;

border: 1px solid #d8af7c !important;
border-radius: 9px !important;

box-shadow: none !important;

font-size: 13px !important;
font-weight: 600 !important;
}

body.tds-dashboard-page .tds-app-add-property:hover {
color: #ffffff !important;
background: #a97236 !important;
border-color: #a97236 !important;
}

/* ==========================================================
   RESPONSYWNOŚĆ
========================================================== */

@media (max-width: 1380px) {
body.tds-dashboard-module-dashboard
.tds-dashboard-overview__grid {
gap: 20px !important;
}

body.tds-dashboard-module-dashboard
.tds-dashboard-overview-card {
padding-right: 28px !important;
padding-left: 28px !important;
}
}

@media (max-width: 1180px) {
body.tds-dashboard-module-dashboard
.tds-dashboard-overview__grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}

@media (max-width: 840px) {
body.tds-dashboard-page {
--tds-dashboard-sidebar-width: 280px;
}

body.tds-dashboard-page
.tds-app-header-brand
.tds-dashboard-logo img {
max-width: 190px !important;
max-height: 60px !important;
}
}

@media (max-width: 700px) {
body.tds-dashboard-module-dashboard
.tds-dashboard-overview__grid {
grid-template-columns: minmax(0, 1fr) !important;
gap: 16px !important;
}

body.tds-dashboard-module-dashboard
.tds-dashboard-overview-card {
min-height: 205px !important;
padding: 27px !important;
}

body.tds-dashboard-module-dashboard
.tds-dashboard-overview-card__icon {
width: 72px !important;
height: 72px !important;
flex-basis: 72px !important;
}

body.tds-dashboard-module-dashboard
.tds-dashboard-overview-card__icon svg {
width: 37px !important;
height: 37px !important;
}
}