/**
 * TARG Design System
 * Dashboard Overview — brand layer.
 *
 * Zakres:
 * - kolorystyka Panelu użytkownika,
 * - ciemny sidebar,
 * - logo,
 * - kafelki Overview,
 * - header,
 * - typografia.
 */

/* ==========================================================
   TOKENS
========================================================== */

body.tds-dashboard-page {
--tds-brand-gold: #c79a5b;
--tds-brand-gold-dark: #a97332;
--tds-brand-gold-soft: #f5ead9;

--tds-brand-charcoal: #1e1e1e;
--tds-brand-charcoal-soft: #272725;
--tds-brand-text: #20211f;
--tds-brand-muted: #6b6f67;

--tds-brand-canvas: #f6f3ed;
--tds-brand-surface: #ffffff;
--tds-brand-border: #e8e1d6;

--tds-sidebar-width: 305px;
}

/* ==========================================================
   TYPOGRAFIA
========================================================== */

body.tds-dashboard-page,
body.tds-dashboard-page button,
body.tds-dashboard-page input,
body.tds-dashboard-page select,
body.tds-dashboard-page textarea {
font-family:
"Satoshi",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif !important;
}

/* ==========================================================
   TŁO PANELU
========================================================== */

body.tds-dashboard-page {
background: var(--tds-brand-canvas) !important;
}

body.tds-dashboard-page :is(
.dashboard-content,
.dashboard-content-area,
.dashboard-page-content,
.rh_dashboard__content,
.tds-dashboard-content
) {
background:
linear-gradient(
135deg,
#f8f6f1 0%,
#f4f1eb 100%
) !important;
}

/* ==========================================================
   HEADER
========================================================== */

body.tds-dashboard-page :is(
.tds-app-header,
.dashboard-header,
.rh_dashboard__header
) {
background: rgba(255, 255, 255, 0.97) !important;
border-bottom: 1px solid #e8e3dc !important;

box-shadow:
0 1px 0 rgba(25, 25, 24, 0.02) !important;
}

/* Pole logo odpowiada szerokości sidebara. */

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

width: var(--tds-sidebar-width) !important;
min-width: var(--tds-sidebar-width) !important;
max-width: var(--tds-sidebar-width) !important;

background:
linear-gradient(
135deg,
#242422 0%,
#181918 100%
) !important;

border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* Jasne logo na ciemnym tle. */

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

opacity: 0.96 !important;

filter:
brightness(0)
invert(1)
contrast(0.95) !important;
}

/* ==========================================================
   PRZYCISK DODAJ OFERTĘ
========================================================== */

body.tds-dashboard-page .tds-app-add-property {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;

min-height: 44px !important;
padding: 0 20px !important;

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

border: 1px solid #c99b5d !important;
border-radius: 8px !important;

box-shadow: none !important;

font-size: 14px !important;
font-weight: 600 !important;

transition:
color 160ms ease,
background-color 160ms ease,
border-color 160ms ease,
transform 160ms ease !important;
}

body.tds-dashboard-page .tds-app-add-property:hover {
color: #ffffff !important;
background: var(--tds-brand-gold) !important;
border-color: var(--tds-brand-gold) !important;

transform: translateY(-1px);
}

/* ==========================================================
   SIDEBAR
========================================================== */

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

color: rgba(255, 255, 255, 0.78) !important;

background:
linear-gradient(
165deg,
#242422 0%,
#1a1b1a 55%,
#161716 100%
) !important;

border-right: 0 !important;

box-shadow:
10px 0 32px rgba(20, 20, 19, 0.055) !important;
}

/* Nagłówek sidebaru. */

body.tds-dashboard-page
:is(
.dashboard-sidebar,
.tds-dashboard-sidebar,
.rh_dashboard__sidebar
)
:is(
.dashboard-user-info,
.user-info,
.sidebar-user
) {
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.09) !important;
}

body.tds-dashboard-page
:is(
.dashboard-sidebar,
.tds-dashboard-sidebar,
.rh_dashboard__sidebar
)
:is(
.dashboard-user-info,
.user-info,
.sidebar-user
)
* {
color: inherit !important;
}

body.tds-dashboard-page
:is(
.dashboard-sidebar,
.tds-dashboard-sidebar,
.rh_dashboard__sidebar
)
:is(
.dashboard-user-info,
.user-info,
.sidebar-user
)
small {
color: rgba(255, 255, 255, 0.48) !important;
}

/* Separatory. */

body.tds-dashboard-page
:is(
.dashboard-sidebar,
.tds-dashboard-sidebar,
.rh_dashboard__sidebar
)
hr {
border-color: rgba(255, 255, 255, 0.09) !important;
}

/* ==========================================================
   LINKI MENU
========================================================== */

body.tds-dashboard-page
:is(
.dashboard-sidebar,
.tds-dashboard-sidebar,
.rh_dashboard__sidebar
)
nav > ul > li {
margin: 5px 17px !important;
}

body.tds-dashboard-page
:is(
.dashboard-sidebar,
.tds-dashboard-sidebar,
.rh_dashboard__sidebar
)
nav > ul > li > a {
position: relative;

display: flex !important;
align-items: center !important;

min-height: 54px !important;
padding: 0 19px 0 22px !important;

color: rgba(255, 255, 255, 0.72) !important;
background: transparent !important;

border: 1px solid transparent !important;
border-radius: 11px !important;

font-size: 14px !important;
font-weight: 500 !important;

transition:
color 150ms ease,
background-color 150ms ease,
border-color 150ms ease !important;
}

body.tds-dashboard-page
:is(
.dashboard-sidebar,
.tds-dashboard-sidebar,
.rh_dashboard__sidebar
)
nav > ul > li > a:hover {
color: #ffffff !important;

background: rgba(255, 255, 255, 0.055) !important;
border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Ikony menu. */

body.tds-dashboard-page
:is(
.dashboard-sidebar,
.tds-dashboard-sidebar,
.rh_dashboard__sidebar
)
nav > ul > li > a::before {
background-color: rgba(255, 255, 255, 0.68) !important;
}

body.tds-dashboard-page
:is(
.dashboard-sidebar,
.tds-dashboard-sidebar,
.rh_dashboard__sidebar
)
nav > ul > li > a:hover::before {
background-color: var(--tds-brand-gold) !important;
}

/* ==========================================================
   AKTYWNA POZYCJA MENU
========================================================== */

body.tds-dashboard-page
:is(
.dashboard-sidebar,
.tds-dashboard-sidebar,
.rh_dashboard__sidebar
)
nav > ul > li:is(
.active,
.current,
.current-menu-item
)
> a {
color: #f1c17d !important;

background:
linear-gradient(
90deg,
rgba(199, 154, 91, 0.18) 0%,
rgba(199, 154, 91, 0.08) 100%
) !important;

border-color: rgba(199, 154, 91, 0.15) !important;

box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

body.tds-dashboard-page
:is(
.dashboard-sidebar,
.tds-dashboard-sidebar,
.rh_dashboard__sidebar
)
nav > ul > li:is(
.active,
.current,
.current-menu-item
)
> a::before {
background-color: #d9a45d !important;
}

/*
 * Rezygnujemy z pionowej kreski aktywnego elementu.
 * Złote tło i ikona wystarczą do wskazania pozycji.
 */

body.tds-dashboard-page
:is(
.dashboard-sidebar,
.tds-dashboard-sidebar,
.rh_dashboard__sidebar
)
nav > ul > li:is(
.active,
.current,
.current-menu-item
)
> a::after {
content: none !important;
display: none !important;
}

/* ==========================================================
   PODMENU
========================================================== */

body.tds-dashboard-page
:is(
.dashboard-sidebar,
.tds-dashboard-sidebar,
.rh_dashboard__sidebar
)
nav ul ul a {
color: rgba(255, 255, 255, 0.55) !important;
}

body.tds-dashboard-page
:is(
.dashboard-sidebar,
.tds-dashboard-sidebar,
.rh_dashboard__sidebar
)
nav ul ul a:hover,

body.tds-dashboard-page
:is(
.dashboard-sidebar,
.tds-dashboard-sidebar,
.rh_dashboard__sidebar
)
nav ul ul li.active > a {
color: #e3ad64 !important;
}

/* ==========================================================
   POWRÓT DO STRONY
========================================================== */

body.tds-dashboard-page .tds-dashboard-back-home {
color: rgba(255, 255, 255, 0.63) !important;
background: transparent !important;

border-color: transparent !important;
}

body.tds-dashboard-page .tds-dashboard-back-home-icon {
color: rgba(255, 255, 255, 0.64) !important;
}

body.tds-dashboard-page .tds-dashboard-back-home:hover {
color: #ffffff !important;

background: rgba(255, 255, 255, 0.055) !important;
border-color: rgba(255, 255, 255, 0.06) !important;
}

body.tds-dashboard-page
.tds-dashboard-back-home:hover
.tds-dashboard-back-home-icon {
color: var(--tds-brand-gold) !important;
}

/* ==========================================================
   BREADCRUMBS
========================================================== */

body.tds-dashboard-module-dashboard
:is(
.dashboard-breadcrumbs,
.breadcrumbs,
.page-breadcrumbs
) {
color: #74776f !important;
}

body.tds-dashboard-module-dashboard
:is(
.dashboard-breadcrumbs,
.breadcrumbs,
.page-breadcrumbs
)
a {
color: #555951 !important;
}

/* ==========================================================
   TYTUŁ
========================================================== */

body.tds-dashboard-module-dashboard
:is(
.dashboard-page-title,
.page-head h1,
.dashboard-content h1,
.dashboard-page-content h1
) {
color: var(--tds-brand-text) !important;

font-size: clamp(32px, 2.5vw, 42px) !important;
font-weight: 700 !important;
line-height: 1.08 !important;
letter-spacing: -0.05em !important;
}

/* ==========================================================
   KONTENER OVERVIEW
========================================================== */

body.tds-dashboard-module-dashboard .tds-overview {
margin-top: 30px !important;
}

/* ==========================================================
   KAFELKI
========================================================== */

body.tds-dashboard-module-dashboard .tds-overview-card {
position: relative !important;

min-height: 250px !important;
padding: 34px 36px 31px !important;

color: var(--tds-brand-text) !important;

background:
linear-gradient(
145deg,
#ffffff 0%,
#fefdfb 100%
) !important;

border: 1px solid var(--tds-brand-border) !important;
border-radius: 14px !important;

box-shadow:
0 1px 2px rgba(25, 25, 24, 0.02),
0 12px 34px rgba(25, 25, 24, 0.05) !important;

transition:
transform 170ms ease,
border-color 170ms ease,
box-shadow 170ms ease !important;
}

body.tds-dashboard-module-dashboard .tds-overview-card:hover {
border-color: rgba(199, 154, 91, 0.42) !important;

box-shadow:
0 2px 4px rgba(25, 25, 24, 0.025),
0 18px 44px rgba(25, 25, 24, 0.075) !important;

transform: translateY(-3px) !important;
}

/* ==========================================================
   OKRĘGI I IKONY
========================================================== */

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

margin-bottom: 26px !important;

color: #b87830 !important;

background:
linear-gradient(
145deg,
#f9f0e3 0%,
#f3e6d4 100%
) !important;

box-shadow:
inset 0 0 0 1px rgba(199, 154, 91, 0.08) !important;
}

body.tds-dashboard-module-dashboard
.tds-overview-card__icon > svg {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
max-width: 36px !important;
max-height: 36px !important;

stroke-width: 1.7 !important;
}

/* ==========================================================
   LICZBY
========================================================== */

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

color: #171816 !important;

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

/* ==========================================================
   OPIS
========================================================== */

body.tds-dashboard-module-dashboard
.tds-overview-card__label {
max-width: 190px !important;

color: #646860 !important;

font-size: 14px !important;
line-height: 1.42 !important;
}

/* ==========================================================
   STRZAŁKA KAFELKA
========================================================== */

body.tds-dashboard-module-dashboard
.tds-overview-card::after {
content: "→" !important;

display: block !important;

position: absolute !important;
right: 25px !important;
bottom: 22px !important;

color: #b87931 !important;

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

font-size: 21px !important;
font-weight: 400 !important;
line-height: 1 !important;

opacity: 0.9;

transition:
transform 160ms ease,
color 160ms ease !important;
}

body.tds-dashboard-module-dashboard
.tds-overview-card:hover::after {
color: #945d23 !important;
transform: translateX(4px) !important;
}

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

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

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

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

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