/* Panel projektów Gekko <-> Envag — tokeny z Design System "Spectra". */
@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap");

:root{
  --indigo-900:#12143f; --indigo-800:#1b1d5c; --indigo-700:#232674;
  --indigo-600:#2b2c82; --indigo-500:#3a3ca8; --indigo-100:#e4e5f7;
  --azure-600:#0084c8; --azure-500:#009fe3; --azure-100:#dcf1fc;
  --gold-600:#c68f28; --gold-500:#d9a441; --gold-100:#faf1d9;
  --navy-900:#0b0f24; --navy-800:#111634; --navy-700:#1a2047;
  --white:#fff; --paper:#f6f8fb; --mist:#eef1f6;
  --steel-100:#e3e8ef; --steel-200:#cdd5e0; --steel-300:#aab4c4;
  --steel-400:#7e8aa0; --steel-500:#576078; --steel-600:#3b4358; --steel-700:#252b3b;
  --ink:#0e1324;
  --ok-500:#3f9d54; --ok-100:#e2f2e6;
  --alert-500:#d64530; --alert-100:#fbe6e2;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --r-xs:3px; --r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px;
  --shadow-xs:0 1px 2px rgba(14,19,36,.06);
  --shadow-sm:0 1px 3px rgba(14,19,36,.08),0 1px 2px rgba(14,19,36,.04);
  --shadow-md:0 4px 12px rgba(14,19,36,.08),0 2px 4px rgba(14,19,36,.05);
  --shadow-lg:0 16px 40px rgba(14,19,36,.12),0 4px 12px rgba(14,19,36,.06);
  --shadow-focus:0 0 0 3px rgba(0,159,227,.35);
  --ease:cubic-bezier(.2,0,0,1); --dur-fast:120ms; --dur-base:200ms;

  --font-display:"Exo 2",system-ui,sans-serif;
  --font-body:"Manrope",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body); font-size:13px; line-height:1.45;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}

/* ---------------- topbar ---------------- */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:nowrap;
  padding:var(--sp-3) var(--sp-5);
  background:var(--navy-900); color:var(--white);
  border-bottom:1px solid var(--navy-700);
}
.brand{display:flex;align-items:baseline;gap:var(--sp-3);flex:0 0 auto}
.brand strong{
  font-family:var(--font-display); font-weight:600; font-size:15px;
  letter-spacing:.01em; white-space:nowrap;
}
.topbar-spacer{flex:1}

.search{position:relative;flex:0 1 320px;min-width:150px}
.search input{
  width:100%; padding:7px 10px 7px 30px;
  background:var(--navy-800); border:1px solid var(--navy-700);
  border-radius:var(--r-sm); color:var(--white);
}
.search input::placeholder{color:var(--steel-400)}
.search input:focus{outline:none;border-color:var(--azure-500);box-shadow:var(--shadow-focus)}
.search::before{
  content:""; position:absolute; left:10px; top:50%; width:11px; height:11px;
  margin-top:-7px; border:1.5px solid var(--steel-400); border-radius:var(--r-pill);
}
.search::after{
  content:""; position:absolute; left:19px; top:50%; width:5px; height:1.5px;
  margin-top:3px; background:var(--steel-400); transform:rotate(45deg);
}

.tbtn{
  padding:7px 12px; background:transparent; color:var(--white);
  border:1px solid var(--navy-600); border-radius:var(--r-sm);
  cursor:pointer; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.tbtn:hover{background:var(--navy-800);border-color:var(--steel-500)}
.tbtn:active{transform:translateY(1px)}
.tbtn.primary{background:var(--indigo-600);border-color:var(--indigo-600);font-weight:600}
.tbtn.primary:hover{background:var(--indigo-500);border-color:var(--indigo-500)}
/* Azure = drugi kolor marki. Eksport ma wage przycisku, ale nie konkuruje z Nowym projektem. */
.tbtn.secondary{background:var(--azure-600);border-color:var(--azure-600);font-weight:600}
.tbtn.secondary:hover{background:var(--azure-500);border-color:var(--azure-500)}
/* Konto: nazwisko jest przyciskiem, wylogowanie schowane w rozwijanym panelu. */
.userchip{
  display:flex;align-items:center;gap:var(--sp-2);
  margin-left:var(--sp-2);padding:6px 10px;
  background:transparent;border:1px solid var(--navy-600);border-radius:var(--r-sm);
  color:var(--white);cursor:pointer;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.userchip:hover{background:var(--navy-800);border-color:var(--steel-500)}
.userchip:active{transform:translateY(1px)}
.userchip .uname{font-size:12px;font-weight:600}
.userchip .caret{
  width:0;height:0;margin-left:2px;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--steel-400);
}
.org-tag{
  padding:2px 7px;border-radius:var(--r-pill);font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
}
.org-gekko{background:var(--indigo-600);color:var(--white)}
.org-envag{background:var(--azure-600);color:var(--white)}

/* ---------------- meta strip ---------------- */
.metastrip{
  display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  padding:var(--sp-2) var(--sp-6);
  background:var(--white);border-bottom:1px solid var(--steel-200);
  font-size:11.5px;color:var(--steel-500);
}
.metastrip b{color:var(--steel-700);font-weight:600;font-variant-numeric:tabular-nums}
.metastrip .sep{width:1px;height:14px;background:var(--steel-200)}

/* ---------------- table ---------------- */
.tablewrap{overflow:auto;max-height:calc(100vh - 92px);background:var(--white)}
table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%}

thead th{
  position:sticky;top:0;z-index:20;
  background:var(--mist);
  padding:var(--sp-2) var(--sp-3);
  text-align:left;vertical-align:bottom;
  font-family:var(--font-display);font-weight:600;font-size:11px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--steel-600);
  border-bottom:1px solid var(--steel-200);border-right:1px solid var(--steel-100);
  white-space:nowrap;cursor:pointer;user-select:none;
}
thead th:hover{color:var(--indigo-600)}
thead th .sortmark{margin-left:5px;color:var(--azure-500);font-size:10px}
thead tr.filters th{
  top:31px;z-index:19;background:var(--white);
  padding:4px var(--sp-2);cursor:default;text-transform:none;letter-spacing:0;
  border-bottom:1px solid var(--steel-200);
}
thead tr.filters th:hover{color:inherit}
.filters input,.filters select{
  width:100%;min-width:70px;padding:3px 5px;
  border:1px solid var(--steel-200);border-radius:var(--r-xs);
  background:var(--white);font-size:11.5px;color:var(--steel-700);
}
.filters input:focus,.filters select:focus{outline:none;border-color:var(--azure-500)}
.filters .dates{display:flex;gap:3px}
.filters .active{border-color:var(--azure-500);background:var(--azure-100)}

tbody td{
  padding:0;
  border-bottom:1px solid var(--steel-100);border-right:1px solid var(--steel-100);
  vertical-align:top;background:var(--white);
}
tbody tr:hover td{background:#fbfcfe}
tbody tr.flagged td.c-name{box-shadow:inset 3px 0 0 var(--gold-500)}

/* Wiersz przegrany — wyszarzony, ale czytelny po najechaniu (trzeba go móc edytować). */
tbody tr.dead td{background:var(--mist)}
tbody tr.dead .cell,tbody tr.dead .money,tbody tr.dead .pd-id{opacity:.45}
tbody tr.dead:hover td{background:var(--white)}
tbody tr.dead:hover .cell,tbody tr.dead:hover .money,tbody tr.dead:hover .pd-id{opacity:1}
tbody tr.dead .badge,tbody tr.dead .flag{opacity:1}

/* Kolumny przyklejone do lewej — Pipedrive ID + nazwa klienta zostaja widoczne
   przy przewijaniu w poziomie (17 kolumn nie zmiesci sie na ekranie). */
thead th.stick{left:0;z-index:30}
thead tr.filters th.stick{z-index:29}
tbody td.stick{position:sticky;left:0;z-index:10;box-shadow:1px 0 0 var(--steel-100)}
tbody td.stick.c-name{background:var(--white)}
tbody tr:hover td.stick.c-name{background:#fbfcfe}
tbody td.stick.c-pd_id{background:var(--paper)}
tbody tr.flagged td.stick.c-name{box-shadow:inset 3px 0 0 var(--gold-500),1px 0 0 var(--steel-100)}

.note{
  display:inline-block;margin-left:6px;padding:1px 5px;
  background:var(--indigo-100);color:var(--indigo-600);
  border-radius:var(--r-xs);font-size:9.5px;font-weight:700;
  letter-spacing:.03em;cursor:help;
}

.cell{
  min-height:30px;padding:6px var(--sp-3);
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.cell.empty::after{content:"—";color:var(--steel-300)}

/* Tabela sluzy do przegladania — klik w wiersz otwiera formularz. */
tbody tr[data-row]{cursor:pointer}
tbody tr:hover td:not(.ro){background:var(--azure-100)}
td.ro{background:var(--paper)}
tbody tr:hover td.ro{background:var(--mist)}



.money{
  display:block;text-align:right;font-variant-numeric:tabular-nums;
  font-weight:600;color:var(--steel-700);
}
.pd-id{display:flex;flex-direction:column;gap:1px;font-variant-numeric:tabular-nums}
.pd-id a{color:var(--indigo-600);font-weight:600;text-decoration:none}
.pd-id a:hover{text-decoration:underline}
.pd-id small{color:var(--steel-400);font-size:10.5px}
.pd-none{color:var(--steel-400);font-style:italic;font-size:11.5px}

.badge{
  display:inline-block;padding:2px 7px;border-radius:var(--r-pill);
  font-size:10.5px;font-weight:600;white-space:nowrap;
}
.b-open{background:var(--azure-100);color:var(--azure-600)}
.b-won{background:var(--ok-100);color:var(--ok-500)}
.b-lost{background:var(--alert-100);color:var(--alert-500)}
.b-none{background:var(--mist);color:var(--steel-500)}

.flag{
  display:inline-block;margin-left:6px;padding:1px 6px;
  border:1px solid var(--gold-400);
  background:var(--gold-100);color:var(--gold-600);
  border-radius:var(--r-xs);font-size:10px;font-weight:700;
  letter-spacing:.04em;cursor:help;
}
.touch{display:block;margin-top:3px;font-size:10px;color:var(--steel-400)}

/* ---------------- panels ---------------- */
.panel{
  position:absolute;z-index:60;right:var(--sp-6);top:52px;
  width:300px;max-height:70vh;overflow:auto;
  background:var(--white);border:1px solid var(--steel-200);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:var(--sp-4);
}
.panel h3{
  margin:0 0 var(--sp-3);font-family:var(--font-display);
  font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--steel-500);
}
.panel label{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:4px 2px;cursor:pointer;border-radius:var(--r-xs);
}
.panel label:hover{background:var(--mist)}
.panel .actions{display:flex;gap:var(--sp-2);margin-top:var(--sp-3)}
.panel .actions button{
  flex:1;padding:6px;background:var(--mist);border:1px solid var(--steel-200);
  border-radius:var(--r-sm);cursor:pointer;font-size:12px;
}
.panel .actions button:hover{background:var(--steel-100)}
.panel .row{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.panel .row select,.panel .row input{
  flex:1;padding:6px;border:1px solid var(--steel-200);border-radius:var(--r-xs);
}
.panel .add{
  padding:6px 10px;background:var(--indigo-600);color:var(--white);
  border:none;border-radius:var(--r-sm);cursor:pointer;
}
.panel .add:hover{background:var(--indigo-500)}
.panel .hint{margin:var(--sp-3) 0 0;font-size:11px;color:var(--steel-400)}
.panel-user{width:250px}
.panel-user .acct{margin:0 0 var(--sp-3);font-size:13px;color:var(--ink)}
.panel-user .acct span{font-size:11.5px;color:var(--steel-500)}

/* ---------------- formularz wiersza ---------------- */
.modal-back{position:fixed;inset:0;z-index:70;background:rgba(11,15,36,.55)}
/* Centrowanie marginesem, nie transformem: keyframe `rise` konczy sie na
   `transform:none`, co zerowalo translate(-50%,-50%) i okno na czas animacji
   uciekalo w prawy dolny rog. Animujemy wiec samo krycie. */
.modal{
  position:fixed;z-index:71;inset:0;margin:auto;
  width:min(880px,calc(100vw - 32px));
  height:fit-content;max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;
  background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  overflow:hidden;animation:fade var(--dur-base) var(--ease);
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-head{
  display:flex;align-items:center;gap:var(--sp-4);
  padding:var(--sp-5) var(--sp-6);background:var(--navy-900);color:var(--white);
}
.modal-head h3{
  margin:0;flex:1;font-family:var(--font-display);font-size:16px;font-weight:600;line-height:1.3;
}

/* Podglad danych z CRM w formularzu — zwarty, wyraznie nieedytowalny (bez ramek
   inputow, muted tlo), zeby nikt nie probowal tu klikac i pisac. */
.crm-preview{
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-4);
  margin-bottom:var(--sp-5);padding:var(--sp-3) var(--sp-4);
  background:var(--mist);border:1px solid var(--steel-200);border-radius:var(--r-md);
}
.crm-head{
  flex:0 0 100%;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--steel-500);
}
.crm-item{flex:1 1 150px;min-width:130px}
.crm-item span{
  display:block;margin-bottom:2px;font-size:9.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--steel-400);
}
.crm-item b{
  display:block;font-size:12.5px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
.modal-x{
  margin-left:auto;padding:6px 12px;background:transparent;color:var(--white);
  border:1px solid var(--navy-600);border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;
}
.modal-x:hover{background:var(--navy-800)}
.modal-body{padding:var(--sp-6);overflow:auto}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.form-grid label{display:flex;flex-direction:column;gap:var(--sp-1)}
.form-grid label.wide{grid-column:1 / -1}
.form-grid span{
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--steel-500);
}
.form-grid input,.form-grid select,.form-grid textarea{
  padding:8px 10px;border:1px solid var(--steel-200);border-radius:var(--r-xs);
  background:var(--white);font-size:13px;font-family:inherit;resize:vertical;
}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{
  outline:none;border-color:var(--azure-500);box-shadow:var(--shadow-focus);
}

.modal-actions{
  display:flex;align-items:center;gap:var(--sp-2);
  margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--steel-200);
}
.modal-note{flex:1;font-size:11.5px;color:var(--alert-500)}
.modal-actions button{
  padding:8px 16px;border-radius:var(--r-sm);cursor:pointer;
  background:var(--white);border:1px solid var(--steel-200);color:var(--steel-600);
}
.modal-actions button:hover{background:var(--mist)}
.modal-actions button.primary{
  background:var(--indigo-600);border-color:var(--indigo-600);color:var(--white);font-weight:600;
}
.modal-actions button.primary:hover{background:var(--indigo-500)}
.modal-actions button:active{transform:translateY(1px)}

.hist{margin-top:var(--sp-6);border-top:1px solid var(--steel-200);padding-top:var(--sp-4)}
.hist h4{
  margin:0 0 var(--sp-3);font-family:var(--font-display);font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--steel-500);
}
.hist-row{
  display:flex;gap:var(--sp-4);padding:var(--sp-2) 0;
  border-bottom:1px solid var(--steel-100);font-size:12px;
}
.hist-row:last-child{border-bottom:none}
.hist-when{
  flex:0 0 108px;color:var(--steel-400);font-size:11px;
  font-variant-numeric:tabular-nums;padding-top:1px;
}
.hist-what{flex:1;color:var(--steel-600)}
.hist-what b{color:var(--ink);font-weight:600}
.hist-diff{margin-top:2px;font-size:11.5px;overflow-wrap:anywhere}
.hist-old{color:var(--steel-400);text-decoration:line-through}
.hist-new{color:var(--steel-700);font-weight:500}
.hist-empty{margin:0;font-size:12px;color:var(--steel-400)}


/* ---------------- instruktaz pierwszego logowania ---------------- */
.tour-back{position:fixed;inset:0;z-index:100;background:rgba(11,15,36,.55)}

/* Podswietlany element wychodzi ponad przygaszenie (klasa .tour-target), a obwodka
   go obrysowuje. Wersja przez rozlany box-shadow sie nie malowala w Chrome. */
.tour-ring{
  position:fixed;z-index:101;pointer-events:none;
  border:2px solid var(--azure-500);border-radius:var(--r-sm);
  box-shadow:0 0 0 4px rgba(0,159,227,.3);
  animation:rise var(--dur-base) var(--ease);
}
.tour-target{position:relative;z-index:103;box-shadow:0 0 24px rgba(11,15,36,.35)}
td.tour-target,th.tour-target{background:var(--white)}
.tour-box{
  position:fixed;z-index:102;width:360px;max-width:calc(100vw - 16px);
  padding:var(--sp-4) var(--sp-5) var(--sp-4);
  background:var(--white);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  animation:rise var(--dur-base) var(--ease);
}
.tour-step{
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--azure-600);margin-bottom:var(--sp-2);
}
.tour-box h4{
  margin:0 0 var(--sp-2);font-family:var(--font-display);
  font-size:15px;font-weight:600;color:var(--ink);
}
.tour-box p{margin:0;font-size:12.5px;line-height:1.55;color:var(--steel-600)}
.tour-actions{display:flex;justify-content:flex-end;gap:var(--sp-2);margin-top:var(--sp-4)}
.tour-actions button{
  padding:7px 14px;border-radius:var(--r-sm);cursor:pointer;
  background:var(--white);border:1px solid var(--steel-200);color:var(--steel-600);
  transition:background var(--dur-fast) var(--ease);
}
.tour-actions button:hover{background:var(--mist)}
.tour-actions button.primary{
  background:var(--indigo-600);border-color:var(--indigo-600);color:var(--white);
}
.tour-actions button.primary:hover{background:var(--indigo-500)}
.tour-actions button:active{transform:translateY(1px)}

/* ---------------- dymek ---------------- */
.tip{
  position:fixed;z-index:90;max-width:340px;
  padding:8px 11px;border-radius:var(--r-sm);
  background:var(--navy-800);color:var(--white);
  font-size:11.5px;line-height:1.5;
  box-shadow:var(--shadow-lg);pointer-events:none;
  animation:rise var(--dur-fast) var(--ease);
}

/* ---------------- toast ---------------- */
.toasts{position:fixed;bottom:var(--sp-6);right:var(--sp-6);z-index:80;display:flex;flex-direction:column;gap:var(--sp-2)}
.toast{
  padding:8px 14px;border-radius:var(--r-sm);box-shadow:var(--shadow-md);
  background:var(--navy-800);color:var(--white);font-size:12px;
  animation:rise var(--dur-base) var(--ease);
}
.toast.err{background:var(--alert-500)}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------------- login ---------------- */
.loginwrap{
  min-height:100vh;display:grid;place-items:center;padding:var(--sp-6);
  background:var(--navy-900);
}
.loginbox{
  width:100%;max-width:360px;background:var(--white);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:var(--sp-8);
}
.loginbox h1{
  margin:0 0 var(--sp-1);font-family:var(--font-display);
  font-size:19px;font-weight:600;letter-spacing:.01em;
}
.loginbox p.sub{margin:0 0 var(--sp-6);color:var(--steel-500);font-size:12.5px}
.loginbox label{display:block;margin-bottom:var(--sp-1);font-size:11.5px;font-weight:600;color:var(--steel-600)}
.loginbox input{
  width:100%;padding:9px 11px;margin-bottom:var(--sp-4);
  border:1px solid var(--steel-200);border-radius:var(--r-xs);background:var(--white);
}
.loginbox input:focus{outline:none;border-color:var(--azure-500);box-shadow:var(--shadow-focus)}
.loginbox button{
  width:100%;padding:10px;background:var(--indigo-600);color:var(--white);
  border:none;border-radius:var(--r-sm);font-weight:600;cursor:pointer;
  transition:background var(--dur-fast) var(--ease);
}
.loginbox button:hover{background:var(--indigo-500)}
.loginbox button:active{transform:translateY(1px)}
.loginerr{
  margin:0 0 var(--sp-4);padding:8px 11px;background:var(--alert-100);
  color:var(--alert-500);border-radius:var(--r-xs);font-size:12px;
}
.loginfoot{margin:var(--sp-6) 0 0;font-size:11px;color:var(--steel-400);line-height:1.5}