/* 7px Admin — Minimal Modern v4 (clean, one-file) */

:root{
  --bg:#f6f7fb;
  --surface:#ffffff;
  --surface2:#fbfcff;

  --text:#0f172a;
  --muted:rgba(15,23,42,.62);
  --muted2:rgba(15,23,42,.46);

  --border:rgba(15,23,42,.10);
  --border2:rgba(15,23,42,.16);

  --primary:#2563eb;
  --primaryBg:rgba(37,99,235,.10);
  --danger:#ef4444;
  --dangerBg:rgba(239,68,68,.10);
  --ok:#16a34a;
  --okBg:rgba(22,163,74,.10);
  --warn:#d97706;
  --warnBg:rgba(217,119,6,.10);

  --r-sm:5px;
  --r-md:5px;
  --r-lg:5px;

  --shadow1:0 1px 2px rgba(15,23,42,.06);
  --shadow2:0 10px 26px rgba(15,23,42,.12);
  --focus:0 0 0 3px rgba(37,99,235,.18);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:var(--bg);
  color:var(--text);
  line-height:1.45;
}
a{color:inherit; text-decoration:none;}
a:hover{text-decoration:underline;}
code{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}

/* ===== Top header ===== */
.top-header,
.cs-hr-top-header{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.top-header strong{font-weight:900; letter-spacing:-.2px;}
.menu-toggle{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:#fff;
  cursor:pointer;
}

/* ===== App shell ===== */
.wrapper{
  display:grid;
  grid-template-columns: 260px 1fr;
  min-height:calc(100vh - 58px);
}
.sidebar{
  border-right:1px solid var(--border);
  background:var(--surface);
  padding:16px 14px;
  position:sticky;
  top:58px;
  align-self:start;
  height:calc(100vh - 58px);
  overflow:auto;
}
.sidebar h2{
  margin:0 0 12px;
  font-size:13px;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--muted2);
  font-weight:900;
  display:flex;
  align-items:center;
  gap:10px;
}
.sidebar ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px;}
.sidebar a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:var(--r-md);
  border:1px solid transparent;
  color:rgba(15,23,42,.86);
}
.sidebar a:hover{background:var(--surface2); border-color:var(--border); text-decoration:none;}
.sidebar a.active,
.sidebar .menu-item.active{background:var(--primaryBg); border-color:rgba(37,99,235,.20); color:var(--text);}
.sidebar i{width:18px; opacity:.82;}

.main{padding:18px;}

@media (max-width: 980px){
  .wrapper{grid-template-columns:1fr;}
  .sidebar{position:relative; top:0; height:auto; border-right:0; border-bottom:1px solid var(--border);} 
}

/* ===== Page primitives ===== */
.page,
.dashboard-container{
  max-width:1200px;
  margin:0 auto;
}
.pageHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin:4px 0 14px;
}
.pageTitle,
.dashboard-container > h1,
.dashboard-container h1{
  margin:0 0 14px;
  font-size:20px;
  font-weight:900;
  letter-spacing:-.3px;
  display:flex;
  align-items:center;
  gap:10px;
}
.pageSubtitle{color:var(--muted); font-size:13px; font-weight:700;}
.pageActions{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}

.pageGrid{display:grid; grid-template-columns: 1fr 320px; gap:16px;}
@media (max-width: 980px){
  .pageGrid{grid-template-columns:1fr;}
}

.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow1);
}
.panel + .panel{margin-top:14px;}
.panelTitle{
  margin:0;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.3px;
  color:var(--muted2);
  font-weight:900;
}
.panelBody{padding:14px;}

/* ===== Controls ===== */
.ui-btn,
button{
  appearance:none;
}
.ui-btn{
  border:1px solid var(--border);
  background:#fff;
  color:rgba(15,23,42,.88);
  padding:9px 12px;
  border-radius:var(--r-md);
  font-weight:800;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}
.ui-btn:hover{background:var(--surface2); border-color:var(--border2); text-decoration:none;}
.ui-btn:focus{outline:none; box-shadow:var(--focus);} 
.ui-btn--active{background:var(--primaryBg); border-color:rgba(37,99,235,.24);} 
.ui-btn--subtle{background:transparent;}
.ui-btn--danger{background:var(--dangerBg); border-color:rgba(239,68,68,.25); color:#7f1d1d;}

.ui-filters{display:flex; flex-wrap:wrap; gap:8px;}
.ui-summary{color:var(--muted); font-size:13px; margin:10px 0 12px;}

.filtersBar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:10px;
  box-shadow:var(--shadow1);
  margin:0 0 12px;
}

/* ===== List / cards (compat with existing pages) ===== */
.ui-list{display:flex; flex-direction:column; gap:10px;}

.ui-cardrow{
  display:grid;
  grid-template-columns: 52px 1fr 240px;
  gap:14px;
  padding:12px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow1);
}
.ui-cardrow:hover{border-color:var(--border2); box-shadow:var(--shadow2); transform:translateY(-1px);} 

.ui-avatar{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border);} 
.ui-avatar--sm{width:44px; height:44px; border-radius:var(--r-lg);} 
.ui-avatar__img{width:100%; height:100%; object-fit:cover; display:block;}

.ui-main{min-width:0;}
.ui-title{font-size:15px; font-weight:900; letter-spacing:-.2px; margin-bottom:4px;}
.ui-sub{font-size:13px; color:var(--muted);}

.ui-badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.ui-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:12px;
  font-weight:900;
  background:var(--surface2);
  color:rgba(15,23,42,.82);
}
.ui-chip .dot{width:7px; height:7px; border-radius:999px; background:currentColor; opacity:.55;}
.ui-chip--ok{background:var(--okBg); border-color:rgba(22,163,74,.22); color:#0f6b2f;}
.ui-chip--danger{background:var(--dangerBg); border-color:rgba(239,68,68,.22); color:#991b1b;}
.ui-chip--warn{background:var(--warnBg); border-color:rgba(217,119,6,.22); color:#92400e;}
.ui-chip--muted{background:#fff;}

.ui-side{display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:10px;}
.ui-actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;}

.ui-empty{padding:18px; text-align:center; color:var(--muted); background:var(--surface); border:1px dashed var(--border); border-radius:var(--r-lg);} 

@media (max-width: 980px){
  .ui-cardrow{grid-template-columns:44px 1fr;}
  .ui-side{grid-column:1 / -1; border-top:1px solid var(--border); padding-top:12px; align-items:stretch;}
  .ui-actions{justify-content:stretch;}
  .ui-actions .ui-btn{flex:1; justify-content:center;}
}

/* ===== Tables ===== */
table{border-collapse:separate; border-spacing:0; width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow1);}
th,td{padding:10px 12px; border-bottom:1px solid var(--border); font-size:13px;}
th{font-size:12px; text-transform:uppercase; letter-spacing:.2px; color:var(--muted2); text-align:left; font-weight:900;}
tr:last-child td{border-bottom:0;}
tr:hover td{background:rgba(255,255,255,.7);} 

/* ===== Small labels used in older pages ===== */
.label-green{display:inline-block; padding:4px 8px; border-radius:999px; background:var(--okBg); border:1px solid rgba(22,163,74,.22); color:#0f6b2f; font-weight:900; font-size:12px;}
.label-red{display:inline-block; padding:4px 8px; border-radius:999px; background:var(--dangerBg); border:1px solid rgba(239,68,68,.22); color:#991b1b; font-weight:900; font-size:12px;}

/* ===== Dark mode (if JS toggles body.dark-mode) ===== */
body.dark-mode{
  --bg:#0b1220;
  --surface:#0f172a;
  --surface2:#111c33;
  --text:#e5e7eb;
  --muted:rgba(229,231,235,.64);
  --muted2:rgba(229,231,235,.46);
  --border:rgba(229,231,235,.12);
  --border2:rgba(229,231,235,.18);
}
body.dark-mode .top-header{background:rgba(15,23,42,.85);} 
body.dark-mode table{background:var(--surface);} 
body.dark-mode tr:hover td{background:rgba(255,255,255,.04);} 



/* ===== tnd Email Form — scoped (nie gryzie globali) ===== */
/* Cel: zero nowych :root, zero nadpisywania .ui-btn/.ui-cardrow globalnie.
   Działa TYLKO dla .ui-cardrow, która zawiera #tndEmailForm. */

.ui-cardrow:has(#tndEmailForm){
  /* zachowujemy Twoją kartę, tylko lekkie dopieszczenie do formularza */
  grid-template-columns: 1fr; /* masz inline, ale tu też pasuje */
}

.ui-cardrow:has(#tndEmailForm) .ui-main{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow1);
  padding: 14px;
  color: var(--text);
}

.ui-cardrow:has(#tndEmailForm) .ui-title{
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.2px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ui-cardrow:has(#tndEmailForm) .ui-title i{
  opacity: .82;
}

.ui-cardrow:has(#tndEmailForm) .ui-sub{
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted);
}

.ui-cardrow:has(#tndEmailForm) .ui-sub b{
  color: var(--text);
}

/* Formularz – tylko tu */
#tndEmailForm{
  display: grid;
  gap: 10px;
}

/* Label tylko w tym formularzu (nie rusza innych miejsc) */
#tndEmailForm .form-label{
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--muted2);
  font-weight: 900;
  letter-spacing: .2px;
}

/* Inputy tylko w tym formularzu */
#tndEmailForm .form-input{
  width: 100%;
  border: 1px solid var(--border);
  background: #fff;
  color: rgba(15,23,42,.88);
  padding: 10px 12px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

#tndEmailForm .form-input:focus{
  border-color: var(--border2);
  box-shadow: var(--focus);
  background: var(--surface2);
}

#tndEmailForm textarea.form-input{
  resize: vertical;
  min-height: 120px;
  line-height: 1.35;
}

/* Select – delikatny caret, scoped */
#tndEmailForm select.form-input{
  appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(15,23,42,.45) 50%),
    linear-gradient(135deg, rgba(15,23,42,.45) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Akcje – tylko w tej karcie: wyrównanie do lewego jak w Twoim inline */
.ui-cardrow:has(#tndEmailForm) .ui-actions{
  justify-content: flex-start;
  gap: 10px;
}

/* Responsywność – przykrywa inline gridy w środku formularza */
@media (max-width: 780px){
  #tndEmailForm > div[style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
  }

  .ui-cardrow:has(#tndEmailForm) .ui-actions{
    flex-wrap: wrap;
  }

  .ui-cardrow:has(#tndEmailForm) .ui-actions .ui-btn{
    flex: 1;
    justify-content: center;
  }
}


/* ===== trends.php — dopasowane do 7px Admin — Minimal Modern v4 ===== */

/* Zakres (przyciski) — korzysta z global .ui-btn, tylko układ */
.tnd-range{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin: 0 0 12px;
}

/* Tile wrapper — spójne z .panel/.ui-cardrow */
.tile-item{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow1);
}

/* W tym widoku często masz tile z “peak godzin” — daj mu oddech */
.tile-item + .tile-item{ margin-top: 12px; }

/* Table wrap — scroll na małych ekranach bez psucia border-radius */
.tile-item .table-wrap{
  overflow:auto;
  border-radius: var(--r-lg);
}

/* Twoje globalne: table{...} już styluje.
   Tu tylko dopieszczamy konkretną tabelę w trends */
.tile-item .table{
  min-width: 760px;
}

/* Header tabeli — “sticky” + zgodny z jasnym motywem */
.tile-item .table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
}

/* Godzina — tabular numbers dla równego rytmu */
.tile-item .table tbody td:first-child{
  font-variant-numeric: tabular-nums;
}

/* ===== Paski w komórkach ===== */
.tnd-bar{
  position: relative;
  font-variant-numeric: tabular-nums;
  min-width: 120px;
}

/* “tor” pod paskiem */
.tnd-bar::after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  height: 68%;
  border-radius: 999px;
  background: var(--surface2);
  border: 1px solid var(--border);
  z-index: 0;
  pointer-events:none;
}

/* właściwy pasek — sterowany --pct */
.tnd-bar::before{
  content:"";
  position:absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  height: 68%;
  width: calc(var(--pct, 0%) - 0px);
  max-width: calc(100% - 20px);
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(37,99,235,.28) 0%,
    rgba(37,99,235,.16) 70%,
    rgba(37,99,235,.10) 100%
  );
  border: 1px solid rgba(37,99,235,.18);
  z-index: 1;
  pointer-events:none;
}

/* liczba na wierzchu, jak “chip” */
.tnd-bar > span{
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  color: rgba(15,23,42,.86);
}

/* hover wiersza — u Ciebie globalnie jest, ale niech pasek też “żyje” */
tr:hover .tnd-bar::before{
  border-color: rgba(37,99,235,.26);
  background: linear-gradient(
    90deg,
    rgba(37,99,235,.34) 0%,
    rgba(37,99,235,.18) 70%,
    rgba(37,99,235,.12) 100%
  );
}

/* Notka pod tabelą */
.tnd-note{
  padding: 12px 14px;
  color: var(--muted);
  font-size: 13px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.35));
}

/* Mobile: pozwól tabeli scrollować bez “pływania” układu */
@media (max-width: 820px){
  .tile-item .table{ min-width: 720px; }
}

/* Dark mode — tylko dopasowanie tła/sticky, reszta leci z tokenów */
body.dark-mode .tile-item .table thead th{
  background: rgba(15,23,42,.78);
}
body.dark-mode .tnd-bar > span{
  background: var(--surface);
  color: var(--text);
}
body.dark-mode .tnd-note{
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.12));
}


/* ===== dashboard.php — dopasowane do 7px Admin — Minimal Modern v4 ===== */
/* SAFE SCOPE: nie dotyka list / cards na innych stronach */

.dashboard-container{
  max-width:1200px;
  margin:0 auto;
}

.dashboard-container > h1,
.dashboard-container h1{
  margin: 0 0 12px;
}

.dashboard-container .ui-summary{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow1);
  padding: 12px 14px;
}

.dashboard-container .dash-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  align-items: stretch;
}

.dashboard-container .dash-kpi{
  grid-column: span 4;
  min-height: 250px;
}

.dashboard-container .dash-panel,
.dashboard-container .dash-debug{
  grid-column: span 12;
}

.dashboard-container .dash-panel.wide{
  grid-column: span 12;
}

/* KLUCZ: tylko elementy dashboardowego grida, nie wszystkie .ui-cardrow w containerze */
.dashboard-container .dash-grid > .ui-cardrow{
  grid-template-columns: 1fr;
  padding: 14px;
}

.dashboard-container .dash-grid > .ui-cardrow:hover{
  transform: none;
  box-shadow: var(--shadow2);
}

.dashboard-container .kpi-num{
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1;
}

.dashboard-container .kpi-meta{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}
.dashboard-container .kpi-meta b{ color: var(--text); }

.dashboard-container .dash-grid svg{
  display:block;
  width:100%;
  height:auto;
}

.dashboard-container .kpi-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.dashboard-container .dash-row{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
}
.dashboard-container .dash-row .left{ min-width:0; }
.dashboard-container .dash-row .right{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}

.dashboard-container .dash-event{
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow1);
  padding: 10px 12px;
}

.dashboard-container .dash-event .title{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 800;
}
.dashboard-container .dash-event .desc{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.dashboard-container .dash-event code{
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
}

.dashboard-container .dash-event a{
  color: var(--primary);
  text-decoration: none;
}
.dashboard-container .dash-event a:hover{ text-decoration: underline; }

.dashboard-container .dash-split{
  display:flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.dashboard-container .dash-event table{
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow1);
}

.dashboard-container .dash-event thead th{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .2px;
  color: var(--muted2);
  font-weight: 900;
}

.dashboard-container .dash-event tbody tr:hover td{
  background: rgba(255,255,255,.7);
}

.dashboard-container .dash-debug details{
  border-radius: var(--r-lg);
}
.dashboard-container .dash-debug summary{
  cursor:pointer;
  user-select:none;
  font-weight: 900;
}
.dashboard-container .dash-debug pre{
  margin: 10px 0 0;
  padding: 12px;
  border-radius: var(--r-lg);
  background: var(--surface2);
  border: 1px solid var(--border);
  overflow:auto;
  font-size: 12px;
}

@media (max-width: 1100px){
  .dashboard-container .dash-kpi{ grid-column: span 6; }
}
@media (max-width: 760px){
  .dashboard-container .dash-kpi{ grid-column: span 12; }

  .dashboard-container .ui-cardrow.dash-panel.wide{
    grid-template-columns: 1fr !important;
  }

  .dashboard-container .dash-row{
    flex-direction: column;
    align-items: stretch;
  }
}

body.dark-mode .dashboard-container .dash-event code{
  background: var(--surface);
  color: var(--text);
}
body.dark-mode .dashboard-container .dash-event tbody tr:hover td{
  background: rgba(255,255,255,.04);
}