/* =====================================================================
   ImplementFlow AI OS — style bazowe
   Wygląd 1:1 z makiety: tło #0b0714, akcent #751afe, Figtree + Inter.
   Style specyficzne dla elementów zostają inline (jak w makiecie);
   tu żyją: reset, klasy wspólne, stany :hover i media queries.
   ===================================================================== */

html, body {
  margin: 0;
  padding: 0;
  background: #0b0714;
  color: #e9e6f2;
  font-family: Inter, system-ui, sans-serif;
}
* { box-sizing: border-box; }
a { color: #a678ff; text-decoration: none; }
a:hover { color: #c19bff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

input::placeholder, textarea::placeholder { color: #6f6787; }

@keyframes ifPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

/* ---------- szkielet aplikacji ---------- */
.app-shell {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #0b0714;
  color: #e9e6f2;
  font-family: Inter, system-ui, sans-serif;
  overflow: hidden;
}
.app-body { flex: 1; display: flex; min-height: 0; }
.main-area { flex: 1; min-width: 0; overflow-y: auto; position: relative; }

/* ---------- topbar ---------- */
.topbar {
  height: 58px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: #0d0918;
}
.space-pills {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
}
.space-pill {
  padding: 5px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  cursor: pointer;
  transition: background .15s, color .15s;
  background: transparent;
  color: #9a92b0;
}
.space-pill.active { background: #751afe; color: #fff; }

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #751afe, #4a0fb0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Figtree, Inter, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  user-select: none;
}
.avatar-menu {
  position: absolute;
  top: 42px;
  right: 0;
  min-width: 210px;
  background: #150e24;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  padding: 8px;
  z-index: 80;
  display: none;
}
.avatar-menu.open { display: block; }
.avatar-menu .menu-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 13px;
  color: #c9c3dc;
  cursor: pointer;
  transition: background .12s;
}
.avatar-menu .menu-row:hover { background: rgba(255,255,255,.06); color: #fff; }

/* ---------- sidebar ---------- */
.sidebar {
  width: 228px;
  flex: none;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.07);
  background: #0d0918;
  padding: 18px 12px 14px;
}
.wordmark {
  font-family: Figtree, Inter, sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.02em;
  padding: 0 10px 20px;
  color: #fff;
}
.wordmark span { color: #751afe; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  transition: background .12s;
  background: transparent;
  color: #9a92b0;
}
.nav-item:hover { background: rgba(255,255,255,.05); }
.nav-item.active { background: rgba(117,26,254,.18); color: #c9b3ff; }

.sidebar-blur {
  display: flex;
  flex-direction: column;
  gap: 2px;
  filter: blur(4px);
  opacity: .7;
  pointer-events: none;
  user-select: none;
}
.soon-badge {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(117,26,254,.15);
  color: #a678ff;
}

/* ---------- przyciski ---------- */
.btn-primary {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  background: #751afe;
  border: none;
  border-radius: 9px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background .15s;
  box-shadow: 0 4px 18px rgba(117,26,254,.35);
}
.btn-primary:hover { background: #8534ff; }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.btn-primary:disabled:hover { background: #751afe; }

.btn-ghost {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #c9b3ff;
  background: rgba(117,26,254,.14);
  border: 1px solid rgba(117,26,254,.4);
  border-radius: 8px;
  padding: 7px 13px;
  cursor: pointer;
  transition: background .15s;
}
.btn-ghost:hover { background: rgba(117,26,254,.3); }

.icon-plus-btn {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(117,26,254,.2);
  border: 1px solid rgba(117,26,254,.45);
  color: #a678ff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.icon-plus-btn:hover { background: rgba(117,26,254,.35); }

/* ---------- karty i taby ---------- */
.card {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.07);
  background: #150e24;
}
.tab-pill {
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  background: transparent;
  color: #9a92b0;
  border: 1px solid rgba(255,255,255,.09);
}
.tab-pill:hover { color: #c9b3ff; }
.tab-pill.active {
  background: rgba(117,26,254,.18);
  color: #c9b3ff;
  border: 1px solid rgba(117,26,254,.45);
}

.ust-item {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s;
  background: transparent;
  color: #9a92b0;
}
.ust-item:hover { background: rgba(255,255,255,.05); }
.ust-item.active { background: rgba(117,26,254,.16); color: #c9b3ff; }

/* ---------- pola formularzy ---------- */
.input-dark {
  background: #0d0918;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 13px;
  color: #e9e6f2;
  font-family: Inter, system-ui, sans-serif;
  outline: none;
}
.input-dark:focus { border-color: rgba(117,26,254,.5); }
select.input-dark { cursor: pointer; }
select.input-dark option { background: #150e24; color: #e9e6f2; }
input[type="range"] { accent-color: #751afe; cursor: pointer; }
input[type="checkbox"], input[type="radio"] { accent-color: #751afe; cursor: pointer; }

.form-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #9a92b0;
  margin-bottom: 6px;
}

/* ---------- puste stany modułów ---------- */
.empty-mod {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 74px 30px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.12);
}
.empty-ico {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(117,26,254,.12);
  border: 1px solid rgba(117,26,254,.32);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a678ff;
  margin-bottom: 18px;
}
.empty-title {
  font-family: Figtree, Inter, sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #fff;
}
.empty-desc {
  margin-top: 7px;
  font-size: 13px;
  color: #9a92b0;
  max-width: 420px;
  line-height: 1.55;
}
.empty-badge {
  margin-top: 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(117,26,254,.14);
  color: #c9b3ff;
  border: 1px solid rgba(117,26,254,.4);
}

/* mniejszy pusty stan wewnątrz kart (np. Nadchodzące) */
.empty-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 12px 14px;
  color: #6f6787;
  font-size: 12.5px;
  line-height: 1.55;
}
.empty-inline .empty-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  margin-bottom: 12px;
}

/* ---------- logowanie ---------- */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
  background: #0b0714;
}
.login-glow {
  position: absolute;
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(117,26,254,.2) 0%, rgba(117,26,254,0) 65%);
  pointer-events: none;
}
.login-box { position: relative; width: 360px; max-width: 100%; }
.login-sub {
  margin-top: 8px;
  text-align: center;
  font-size: 13.5px;
  color: #9a92b0;
}
.login-card {
  margin-top: 26px;
  background: #150e24;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.login-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #9a92b0;
}
.login-card input {
  background: #0d0918;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  padding: 11px 13px;
  font-size: 13.5px;
  color: #e9e6f2;
  font-family: Inter, system-ui, sans-serif;
  outline: none;
}
.login-card input:focus { border-color: rgba(117,26,254,.5); }
.login-error {
  font-size: 12.5px;
  color: #ef4444;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.3);
  border-radius: 9px;
  padding: 9px 12px;
  line-height: 1.45;
}

/* ---------- Przegląd ---------- */
.grid-przeglad {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr);
  gap: 20px;
  align-items: start;
}
.health-strip {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  background: #110b1d;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: #9a92b0;
}

/* pomysły — krzyżyk kasowania widoczny po najechaniu */
.idea-row .idea-del {
  opacity: 0;
  transition: opacity .12s;
  flex: none;
  margin-left: auto;
  color: #6f6787;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.idea-row:hover .idea-del { opacity: 1; }
.idea-row .idea-del:hover { color: #ef4444; }

/* ---------- dziennik agenta (Ustawienia) ---------- */
.log-box {
  margin-top: 14px;
  background: #0a0612;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  max-height: 60vh;
  overflow-y: auto;
}
.log-row { display: flex; gap: 10px; align-items: baseline; }
.log-time { color: #6f6787; flex: none; }
.log-st { flex: none; width: 52px; font-weight: 600; }
.log-msg { color: #c9c3dc; min-width: 0; overflow-wrap: anywhere; }
.log-day {
  color: #6f6787;
  font-size: 10.5px;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 6px 0 2px;
  border-bottom: 1px dashed rgba(255,255,255,.08);
  margin-bottom: 4px;
}
.log-day:first-child { padding-top: 0; }

/* ---------- ustawienia ---------- */
.ust-grid {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* ---------- responsywność ---------- */
@media (max-width: 1080px) {
  .grid-przeglad { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .ust-grid { grid-template-columns: 1fr; }
  .sidebar { width: 190px; }
}

/* Chipy (foldery artefaktów, filtry) */
.chip { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:999px;
  font-size:12px; color:#9a92b0; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08); cursor:pointer; transition:all .12s; }
.chip:hover { color:#e9e6f2; border-color:rgba(255,255,255,.16); }
.chip-on { background:rgba(117,26,254,.16); color:#c19bff; border-color:rgba(117,26,254,.4); }
/* Diagram procesu — legenda */
.proc-legend { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.proc-legend > div { display:flex; align-items:center; gap:6px; font-size:12px; color:#9a92b0; }
.proc-legend span.dot { width:12px; height:12px; border-radius:3px; display:inline-block; }