@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* ===================== RESET / TOKENS ===================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:14px/1.6 'Montserrat',system-ui,Segoe UI,Arial;color:#111;background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{opacity:.85}

:root{
  --primary:#007aff;           /* nadpisywane inline w layoutcie */
  --secondary:#28a745;         /* nadpisywane inline w layoutcie */
  --text:#111; --muted:#666; --bg:#fff; --bar:#f6f6f6; --border:#eaeaea;
  --radius:3px; --shadow:0 8px 24px rgba(0,0,0,.08);
  --control-h:40px; --pad-x:12px; --pad-y:10px;
}

/* ===================== LAYOUT ===================== */
.container{margin:0 5%}
.section{padding:24px 0}
.main{padding:20px 0}

.topbar{background:var(--bar);color:var(--muted);font-size:12px}
.topbar .container{display:flex;align-items:center;justify-content:space-between;padding:6px 0}
.tb-left{flex:1;min-width:0}
.tb-right{white-space:nowrap}
.user-email{color:var(--muted);font-size:12px}

/* Topbar: stack on small screens */
@media (max-width: 700px){
  .topbar .container{flex-direction:column;align-items:center;gap:4px;text-align:center}
  .tb-left,.tb-right{width:100%}
  .tb-right{white-space:normal}
  .user-email{display:block}
}

/* Header (mobile): logo po lewej, po prawej wyloguj + burger w jednej linii */
@media (max-width: 900px){
  .site-header .container{flex-wrap:nowrap}
  .brand{flex:0 0 auto;justify-content:flex-start}
  .nav{order:2;margin-left:auto}
  .logout{order:3;margin-left:0;display:flex}
}

.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);z-index:20}
.site-header .container {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 56px;
}

.brand{display:flex;align-items:center;gap:12px}
.brand .logo{height:35px}
.brand .brand-text{font-weight:600}
.has-logo .brand-text{display:none}

/* Nawigacja → po prawej */
.head-right{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.nav{display:flex;align-items:center;gap:10px;position:relative}
.head-right .nav{order:1}
.head-right .logout{order:2}
.head-right .nav .burger{margin-left:8px}
.menu{list-style:none;margin:0;padding:0;display:flex;gap:8px}
.menu > li{position:relative}
.menu > li > a{display:block;padding:8px 10px;border-radius:6px}
.menu > li:hover > a{background:rgba(0,0,0,.04)}

.dropdown{display:none;position:absolute;left:0;top:100%;min-width:220px;background:#fff;border:1px solid var(--border);border-radius:8px;padding:6px 0;box-shadow:var(--shadow);z-index:30}
.menu li:hover > .dropdown{display:block}
.dropdown li a{display:block;padding:8px 12px;white-space:nowrap}
.dropdown li:hover > a{background:rgba(0,0,0,.04)}
.dropdown .dropdown{left:100%;top:0}

/* Mobile menu */
.nav-toggle{display:none}
.burger{display:none;cursor:pointer;padding:8px 10px;border-radius:6px}
@media (max-width: 900px){
  .burger{display:block}
  .menu{display:none;position:absolute;right:0;top:44px;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px;box-shadow:var(--shadow);min-width:220px}
  .nav-toggle:checked + .burger + .menu{display:flex}
  .menu > li > a{padding:10px 12px}
  .menu .dropdown{position:static;display:block;border:0;box-shadow:none;padding:0;margin-left:12px;background:#fff}
}
.site-header .dropdown{background:#fff;z-index:2000}

/* Stopka */
.footer{border-top:1px solid var(--border);padding:20px 0;color:var(--muted);text-align:center}
.footer .logo{height:22px;margin:0 auto 8px}

/* ===================== BUTTONS ===================== */
button,.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:var(--control-h);padding:0 14px;border:0;border-radius:var(--radius);
  background:var(--primary);color:#fff;font-weight:600;cursor:pointer;line-height:1;white-space:nowrap
}
button:hover,.btn:hover{filter:brightness(.96)}
button:disabled,.btn:disabled{opacity:.6;cursor:not-allowed}
.btn.secondary{background:var(--secondary)}
.btn.ghost{background:transparent;color:var(--primary);border:1px solid var(--primary)}
.btn.sm{height:34px;padding:0 12px}
.btn.danger{background:#b02a37}
.btn.icon{display:inline-flex;gap:6px;align-items:center}

/* ===================== FORMS ===================== */
.field{margin-bottom:14px}
label{display:block;margin:0 0 6px;color:#333;font-weight:600}
.help,.hint{color:var(--muted);font-size:12px;margin-top:4px}

/* 1) BAZA: wszystkie inputy poza checkbox/radio/range/file/hidden */
input:not([type]),
input[type=text],input[type=email],input[type=password],
input[type=url],input[type=number],input[type=search],input[type=tel],input[type=date],
/* wykluczenia */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),
select,textarea{
  font:14px/1.4 'Montserrat',system-ui,Segoe UI,Arial;color:#111;background:#fff;
  border:1px solid var(--border);border-radius:var(--radius);outline:0;
  -webkit-appearance:none;appearance:none;box-shadow:none;
}

/* 2) Pola liniowe */
input:not([type]),
input[type=text],input[type=email],input[type=password],
input[type=url],input[type=number],input[type=search],input[type=tel],input[type=date],select{
  height:var(--control-h);line-height:calc(var(--control-h) - 2px);
  padding:0 var(--pad-x);display:inline-block;vertical-align:middle;width:auto;max-width:100%;
}

/* Datetime-local: align height consistently across browsers */
input[type=datetime-local]{
  height:var(--control-h);
  line-height:calc(var(--control-h) - 2px);
  padding:0 var(--pad-x);
}
/* Hide the clear and spin buttons variations for datetime-local where applicable */
input[type=datetime-local]::-webkit-clear-button,
input[type=datetime-local]::-webkit-inner-spin-button{ display:none; }

/* 3) Textarea pełna szerokość */
textarea{
  padding:var(--pad-y) var(--pad-x);min-height:140px;line-height:1.5;resize:vertical;
  display:block;width:100%;max-width:100%;
}

/* Placeholder & focus */
::placeholder{color:#9aa0a6}
input:focus,select:focus,textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

/* Select – własna strzałka */
select{ padding-right:36px;background-repeat:no-repeat;background-position:right 10px center;background-size:18px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); }

/* Forms inside cards: unify width */
.card form .field > input,
.card form .field > select,
.card form .field > textarea{ display:block; width:100%; max-width:100%; }

/* Forms inside cards: inline groups should size evenly */
.card form .field.inline-gap > div{ flex:1 1 220px; min-width:200px; }
.card form .field.inline-gap input,
.card form .field.inline-gap select,
.card form .field.inline-gap textarea{ display:block; width:100%; max-width:100%; }

/* Settings: place checkbox label slightly lower and align nicely */
.card form .field > label + label{ margin-top:8px; display:inline-flex; align-items:center; gap:8px; font-weight:400; }

/* Make grid column fields consistent */
.card .grid .field{min-width:0}

/* Inline action groups spacing */
.inline-gap{display:flex;flex-wrap:wrap;gap:8px}

/* Number – usuń spinnery */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}

/* Helpery */
.w-100{width:100%!important}

/* Form grid helpers */
.form-grid{display:grid;gap:14px}
@media (max-width: 900px){
  .site-header .container{grid-template-columns:1fr auto}
  .brand{justify-content:flex-start}
  .head-right{justify-content:flex-end}
  /* On mobile: logout left of menu toggle */
  .head-right .logout{order:1}
  .head-right .nav{order:2}
}
.grid{display:grid;gap:16px}
/* Karty (białe tło + obramowanie + cień) */
.card{background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:16px}
@media (min-width:1000px){
  .grid.cols-2{grid-template-columns:1fr 1fr}
  .grid.cols-3{grid-template-columns:1fr 1fr 1fr}
  .grid.cols-4{grid-template-columns:1fr 1fr 1fr 1fr}
}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.06)}
.text-muted{color:var(--muted)}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}

/* Prosta tabela (legacy) */
.table{width:100%;border-collapse:separate;border-spacing:0;margin:10px 0}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left}
.table th{font-weight:600;color:#333;background:#fafafa}

/* Datagrid nowoczesny */
.table.modern{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.table.modern thead th{position:sticky;top:0;background:#fafafa;padding:12px;border-bottom:1px solid var(--border);text-align:left;font-weight:600}
.table.modern tbody td{padding:12px;border-bottom:1px solid var(--border);vertical-align:middle}
.table.modern tbody tr:nth-child(odd){background:#fff}
.table.modern tbody tr:nth-child(even){background:#fcfdff}
.table.modern tbody tr:hover{background:color-mix(in srgb, var(--primary) 6%, #fff)}
.table.modern th,.table.modern td{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.table.modern .col-id{width:70px}
.table.modern .col-actions{width:340px} /* szeroko, by nie łamało */

/* Pasek nad listą */
.page-head{margin-bottom:12px}
.breadcrumbs{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center}
.breadcrumbs a{color:inherit;text-decoration:none}
.breadcrumbs span{color:var(--muted)}
.toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.toolbar .lh h1{margin:0}
.list-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.list-head .meta{color:var(--muted);font-size:12px}

/* ===== Dashboard ===== */
.dash-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:10px}
.metric{border:1px solid var(--border);border-radius:10px;background:#fff;box-shadow:var(--shadow);padding:12px}
.metric-label{color:#666;font-size:12px}
.metric-value{font-weight:700;font-size:24px;line-height:1.2;margin-top:2px}

.list-pro{list-style:none;margin:0;padding:0}
.list-pro-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--border)}
.list-pro-item:first-child{border-top:0}
.l-main{min-width:0}
.l-title{font-weight:600;color:#111}
.l-title:hover{text-decoration:underline}
.l-sub{color:#666;font-size:12px;margin-top:2px}
.l-side{white-space:nowrap;font-weight:600}

.qa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.qa-item{display:flex;gap:10px;align-items:center;border:1px solid var(--border);border-radius:10px;padding:12px;text-decoration:none;color:#111;background:#fff;box-shadow:var(--shadow)}
.qa-item:hover{background:#fafafa}
.qa-ico{font-size:18px}
.qa-title{font-weight:600}
.qa-sub{color:#666;font-size:12px}

@media (max-width: 1000px){
  .dash-metrics{grid-template-columns:repeat(2,1fr)}
  .qa-grid{grid-template-columns:1fr}
}

/* Split layout: tabela + filtry (kompakt) */
.layout-split{display:grid;grid-template-columns:1fr 280px;gap:16px}
.split-side{border-left:1px solid var(--border);padding-left:16px}
.split-side form{max-width:280px}
.split-side form .field{margin-bottom:10px}
.split-side form .btn{width:100%}
@media (max-width:980px){
  .layout-split{grid-template-columns:1fr}
  .split-side{border:0;padding:0}
}

/* Akcje w 1 linii – bez zawijania */
.row-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:nowrap}
.row-actions .btn{white-space:nowrap}
.row-actions form{display:inline;margin:0}

/* Chipy ról */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-block;padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.06);font-size:12px}
.chip.admin{background:color-mix(in srgb, var(--primary) 20%, #eee);color:#0b3b8f}
.chip.employee{background:#eef8f1;color:#1e7e34}
.chip.viewer{background:#eef2ff;color:#1f3fa0}

/* Fix: usuń punktor i wcięcia w menu i dropdownach */
ul.menu, ul.menu li, ul.dropdown, ul.dropdown li{
  list-style:none!important;margin:0!important;padding:0!important
}


.pager{display:flex;justify-content:flex-end}
.pager ul{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;padding:0 10px;border:1px solid var(--border);
  border-radius:var(--radius);text-decoration:none}
.pager a{background:#fff;color:#111}
.pager a:hover{background:rgba(0,0,0,.04)}
.pager .active span{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}
.pager .disabled span{opacity:.5}

/* ===== BG CANVAS (tylko w main) ===== */
/* Canvas i przydymienie ograniczone do .app-shell, aby nie wchodziły na header/topbar */
.app-shell{ position:relative; z-index:0; overflow:hidden; }
.bg-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}
/* lekkie „przydymienie”, tylko za obszarem main/app-shell */
.app-shell::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(1200px 800px at 10% 10%, rgba(0,0,0,.02), transparent 60%),
              radial-gradient(1000px 700px at 90% 20%, rgba(0,0,0,.018), transparent 60%);
}
/* upewnij się, że nagłówek i menu są ponad tłem/main */
.topbar,.site-header{ position:relative; z-index:100; }
.main,.footer{ position:relative; z-index:1; }

.main {min-height: 80vh;}

footer, header {background-color: white!important;}