/* assets/client.css — jasny motyw UI klienta + „glass 2025/26” */

:root{
  --bg:#eef1f5;
  --card-bg:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;

  --primary:#4f7cff;
  --primary-600:#3b6af6;

  --info-bg:#eef5ff;
  --info-bd:#cfe0ff;
  --info-tx:#244b85;

  --danger-bg:#fff1f2;
  --danger-bd:#fecdd3;
  --danger-tx:#7f1d1d;

  --success-bg:#ecfdf5;
  --success-bd:#bbf7d0;
  --success-tx:#065f46;

  --secondary-bg:#f3f4f6;
  --secondary-bd:#e5e7eb;
  --secondary-tx:#374151;

  --thead:#0f172a;
  --thead-tx:#ffffff;

  --radius:14px;
  --shadow:0 12px 30px rgba(16,24,40,.08);
}

body.client-ui{
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, sans-serif;
}

/* Pasek z logo */
.brandbar{
  background:#ffffff;
  border-bottom:1px solid var(--border);
}
.brandbar .container{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px 12px;
}
.brandbar-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
.brandbar-logo{
  height:92px;
  width:auto;
  display:block;
}

/* Wrapper sekcji kontentu */
.client-wrapper{
  padding: 28px 0 36px;
}

/* Karty */
.card{
  background: var(--card-bg);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card .card-footer{
  background: #fff;
  border-top:1px solid var(--border);
}

/* Formularze */
.form-label{ color:#374151; font-weight:600; }
.form-control{
  border-radius: 12px;
  border:1px solid var(--border);
  background:#fff;
  color: var(--text);
  padding: 12px 14px;
}
.form-control:focus{
  border-color: rgba(79,124,255,.55);
  box-shadow: 0 0 0 .15rem rgba(79,124,255,.45);
}

.client-table tbody tr:hover td{
  border-top-color: rgba(79,124,255,.18);
  border-bottom-color: rgba(79,124,255,.18);
}

.alert-info{ box-shadow: 0 6px 16px rgba(79,124,255,.08); }
.alert-danger{ box-shadow: 0 6px 16px rgba(255,77,79,.08); }

/* Przyciski – bazowe */
.btn{
  border-radius: 12px;
  font-weight:600;
}
.btn-primary{
  background: var(--primary);
  border:1px solid var(--primary-600);
}
.btn-primary:hover{
  background: var(--primary-600);
  border-color: var(--primary-600);
}
.btn-outline-secondary{
  color:#374151;
  border:1px solid var(--secondary-bd);
  background: #fff;
}
.btn-outline-secondary:hover{
  background: var(--secondary-bg);
}

/* Rozmiar przycisków akcji (uni) */
.btn-action{
  padding: .6rem 1.05rem;
  font-size: .985rem;
  border-radius: 999px;
  line-height: 1.25;
}

/* Tabele (legacy – wykorzystywane w modalu gości) */
.client-card{ overflow:hidden; }
.client-table{
  margin:0;
  background:#fff;
}
.client-table thead.thead-contrast th{
  background: var(--thead);
  color: var(--thead-tx);
  border-bottom:1px solid #00000014;
  font-weight:700;
  padding: 18px 12px;
}
.client-table tbody td{
  border-color: var(--border);
  padding: 20px 12px;
  vertical-align: middle;
  font-size: 0.975rem;
}
.client-table tbody tr:hover{
  background:#f8fafc;
}

/* Wąska kolumna na puls */
.col-pulse{ width: 42px; }

/* Badges (glass) */
.badge{
  border-radius:999px;
  padding: .45rem .75rem;
  font-weight:700;
  letter-spacing:.02em;
}

/* bez zmian – info */
.badge.bg-info{
  background: var(--info-bg)!important;
  color: var(--info-tx)!important;
  border:1px solid var(--info-bd);
}

/* GLASS: zaakceptowane */
.badge.bg-success{
  background:
    linear-gradient(180deg, rgba(16,185,129,.22), rgba(16,185,129,.12))!important;
  color: var(--success-tx)!important;
  border:1px solid rgba(16,185,129,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 6px 14px rgba(16,185,129,.12);
  backdrop-filter: blur(6px);
}

/* GLASS: niezaakceptowane */
.badge.bg-secondary{
  background:
    linear-gradient(180deg, rgba(243,244,246,.92), rgba(243,244,246,.84))!important;
  color: var(--secondary-tx)!important;
  border:1px solid rgba(229,231,235,.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 6px 14px rgba(16,24,40,.06);
  backdrop-filter: blur(6px);
}

/* Alerty */
.alert{
  border-radius: 12px;
  border:1px solid var(--border);
}
.alert-info{
  background: var(--info-bg);
  border-color: var(--info-bd);
  color: var(--info-tx);
}
.alert-danger{
  background: var(--danger-bg);
  border-color: var(--danger-bd);
  color: var(--danger-tx);
}
.alert-secondary{
  background:#f9fafb;
  border-color:#e5e7eb;
  color:#334155;
}

/* Sekcyjne nagłówki/opisy */
.section-intro{ margin: 10px 0 14px; }
.section-intro h2{
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 6px;
  color:#0b1324;
}
.section-intro p{ margin: 0; color:#5b6472; }

/* Pulsująca kropka */
.pulse-dot{
  width:10px; height:10px; min-width:10px; border-radius:50%;
  background:#ff4d4f; position:relative; display:inline-block;
  box-shadow:0 0 0 0 rgba(255,77,79,.6);
  animation:pulse 1.5s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,77,79,.6); transform:scale(1); }
  70%{ box-shadow:0 0 0 10px rgba(255,77,79,0); transform:scale(1.05); }
  100%{ box-shadow:0 0 0 0 rgba(255,77,79,0); transform:scale(1); }
}

/* Przycisk komunikatora */
.btn-communicator{
  background: linear-gradient(180deg, #5a8bff 0%, #3b6af6 100%);
  color:#fff; border: none;
}
.btn-communicator:hover{
  box-shadow: 0 12px 24px rgba(59,106,246,.28);
  color:#fff;
}
.btn-communicator:active{ transform: translateY(0); }

/* Wiersz z nowymi wiadomościami */
table.client-table tr.row-unread td {
  background-color: #fff8dc;
  animation: pulse-bg 2s infinite;
}
@keyframes pulse-bg {
  0%{ background-color:#ffffff; }
  50%{ background-color:#fff8dc; }
  100%{ background-color:#ffffff; }
}

/* Drobne */
.text-muted{ color:#6b7280!important; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

/* === Projects as tiles (2025/26 look) === */
.projects-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.project-card{
  position: relative;
  border-radius: 18px;
  padding: 16px 14px;
  background:
    radial-gradient(1200px 400px at -20% -20%, rgba(79,124,255,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88)); /* MNIEJSZA przezroczystość */
  border: 1px solid rgba(229,231,235,.92);
  box-shadow:
    0 12px 30px rgba(16,24,40,.08),
    inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.project-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 18px 38px rgba(16,24,40,.12),
    inset 0 1px 0 rgba(255,255,255,.8);
  border-color: rgba(79,124,255,.40);
}

.project-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom: 8px;
}
.project-num{
  font-weight: 800; letter-spacing:.02em; color:#0b1324; font-size:14px;
  background: linear-gradient(135deg, rgba(79,124,255,.18), rgba(59,106,246,.08));
  border:1px solid rgba(79,124,255,.35);
  padding: 6px 10px; border-radius: 999px;
}
.project-name{
  font-weight: 800; font-size: 1.05rem; color:#0b1324; margin: 2px 0 8px; line-height:1.2;
}
.project-meta{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 12px;
}
.qty-chip{
  display:inline-flex; align-items:center; gap:8px;
  border-radius: 999px; padding: 8px 12px;
  font-weight:700; letter-spacing:.02em;
  background: var(--secondary-bg);
  color: var(--secondary-tx);
  border:1px solid var(--secondary-bd);
}
.qty-chip.ok{
  background: var(--success-bg);
  color: var(--success-tx);
  border:1px solid var(--success-bd);
}
.qty-chip.zero{
  background: var(--secondary-bg);
  color: var(--secondary-tx);
  border:1px solid var(--secondary-bd);
}
.meta-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding: 7px 10px; border-radius: 999px;
  font-weight:700; font-size:.86rem;
  background: var(--info-bg);
  color: var(--info-tx);
  border:1px solid var(--info-bd);
}
.project-actions{ display:flex; flex-wrap:wrap; gap:8px; }

/* === GLASS BUTTONS — jedna, spójna implementacja (bez duplikatów) === */
.btn-glass{
  border-radius: 12px;
  padding: .5rem .85rem;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(245,247,255,.88));
  border: 1px solid rgba(229,231,235,.96);
  box-shadow: 0 4px 16px rgba(16,24,40,.06);
  color:#0b1324; font-weight:700;
}
.btn-glass:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,247,255,.92));
  border-color: rgba(79,124,255,.45);
}
.btn-glass-sm{ padding: .42rem .7rem; font-size:.92rem; }
.btn-glass-action{ padding: .6rem 1.05rem; border-radius:999px; }

/* Primary (niebieski) */
.btn-glass-primary{
  background: linear-gradient(180deg, rgba(79,124,255,.22), rgba(79,124,255,.12));
  border-color: rgba(79,124,255,.45);
  color:#17337a;
}
.btn-glass-primary:hover{
  background: linear-gradient(180deg, rgba(79,124,255,.28), rgba(79,124,255,.16));
}

/* Success (zielony) */
.btn-glass-success{
  background: linear-gradient(180deg, rgba(16,185,129,.20), rgba(16,185,129,.10));
  border-color: rgba(16,185,129,.40);
  color:#065f46;
}
.btn-glass-success:hover{
  background: linear-gradient(180deg, rgba(16,185,129,.26), rgba(16,185,129,.14));
}

/* Danger (czerwony) */
.btn-glass-danger{
  background: linear-gradient(180deg, rgba(255,77,79,.16), rgba(255,77,79,.10));
  border-color: rgba(255,77,79,.34);
  color:#7f1d1d;
}
.btn-glass-danger:hover{
  background: linear-gradient(180deg, rgba(255,77,79,.22), rgba(255,77,79,.14));
}

/* Danger – bardziej intensywny czerwony (np. Odblokuj) */
.btn-glass-danger-intense{
  background: linear-gradient(180deg, rgba(220,38,38,.35), rgba(220,38,38,.22));
  border-color: rgba(185,28,28,.65);
  color:#991b1b;
}
.btn-glass-danger-intense:hover{
  background: linear-gradient(180deg, rgba(220,38,38,.45), rgba(220,38,38,.28));
  border-color: rgba(185,28,28,.75);
}

/* Outlines */
.btn-glass-outline-secondary{
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.86));
  border:1px solid var(--secondary-bd);
  color: var(--secondary-tx);
}
.btn-glass-outline-secondary:hover{
  border-color: rgba(79,124,255,.35);
}
.btn-glass-outline-primary{
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.86));
  border:1px solid rgba(79,124,255,.45);
  color:#17337a;
}
.btn-glass-outline-primary:hover{
  background: linear-gradient(180deg, rgba(79,124,255,.10), rgba(79,124,255,.06));
}
/* Pozycjonowanie pigułki zamykania w nagłówkach modali, tylko gdy świadomie użyte */
.modal .modal-header.has-pill-close{
  position: relative;
  padding-right: 56px; /* miejsce na przycisk */
}
.modal .modal-header.has-pill-close .btn-glass-close{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}
/* Close – okrągły, szkło (v2: bez podkreślenia, wyraźniejszy kolor, focus-ring) */
.btn-glass-close{
  width:34px; height:34px;
  border-radius:999px;
  border:1px solid rgba(79,124,255,.45); /* niebieska ramka */
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(245,247,255,.88));
  display:inline-grid; place-items:center;
  opacity:.95;
  cursor:pointer;
  text-decoration: none !important;   /* usuń podkreślenie, gdy <a> */
  color:#17337a;                      /* kolor ikonki „X” (fallback) */
  box-shadow: 0 4px 12px rgba(79,124,255,.10), inset 0 1px 0 rgba(255,255,255,.80);
}
.btn-glass-close::before{
  content:"\00d7";
  font-size:18px; line-height:1;
  color:#17337a;                      /* wyraźniejszy niebieski */
}
.btn-glass-close:hover{
  opacity:1;
  border-color: rgba(79,124,255,.65);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,247,255,.92));
  box-shadow: 0 6px 16px rgba(79,124,255,.16), inset 0 1px 0 rgba(255,255,255,.85);
}
.btn-glass-close:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(79,124,255,.25),       /* focus ring */
    0 6px 16px rgba(79,124,255,.16),
    inset 0 1px 0 rgba(255,255,255,.85);
}

/* Pozycjonowanie „X” w prawym górnym rogu nagłówka modala (jeśli użyty w .modal-glass) */
.modal-glass .modal-header{
  position: relative;
  padding-right: 56px; /* miejsce na przycisk */
}
.modal-glass .modal-header .btn-glass-close{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

/* Grupa przycisków glass */
.btn-glass-group .btn{ margin:0 2px; }

/* === Add-new tile === */
.add-card{
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px;
  border-radius: 18px;
  border: 1px dashed rgba(79,124,255,.55);
  padding: 22px 16px;
  background:
    linear-gradient(135deg, rgba(79,124,255,.14), rgba(79,124,255,.06)),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
  text-align:center; min-height: 168px; cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 8px 22px rgba(16,24,40,.08);
}
.add-card:hover{
  transform: translateY(-2px);
  border-color: rgba(79,124,255,.75);
  box-shadow: 0 18px 38px rgba(16,24,40,.12);
}
.add-card .plus{
  display:inline-grid; place-items:center;
  width: 48px; height:48px; border-radius: 14px;
  background: radial-gradient(200px 200px at 0% 0%, rgba(79,124,255,.24), rgba(79,124,255,.14));
  border:1px solid rgba(79,124,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  font-size: 24px; color:#2b4ea1;
}

/* === Summary bar under grid – szklane pigułki === */
.grid-summary{
  margin-top: 14px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
}
.grid-summary .badges{ display:flex; gap:8px; align-items:center; }

.pill{
  display:inline-flex; align-items:center; gap:8px;
  border-radius: 999px; padding: 8px 12px;
  font-weight:800; letter-spacing:.02em; font-size:.95rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(16,24,40,.06), inset 0 1px 0 rgba(255,255,255,.72);
  border:1px solid;
}
.pill-secondary{
  background: linear-gradient(180deg, rgba(243,244,246,.92), rgba(243,244,246,.84));
  color: var(--secondary-tx); border-color: var(--secondary-bd);
}
.pill-primary{
  background: linear-gradient(180deg, rgba(79,124,255,.18), rgba(79,124,255,.10));
  color:#17337a; border-color: rgba(79,124,255,.40);
}
.pill-ok{
  background: linear-gradient(180deg, rgba(16,185,129,.18), rgba(16,185,129,.10));
  color:#065f46; border-color: rgba(16,185,129,.40);
}
.pill-warn{
  background: linear-gradient(180deg, rgba(253,224,71,.28), rgba(253,224,71,.16));
  color:#7a5d00; border-color: rgba(253,224,71,.55);
}
.pill-danger{
  background: linear-gradient(180deg, rgba(255,77,79,.18), rgba(255,77,79,.10));
  color:#7f1d1d; border-color: rgba(255,77,79,.40);
}

/* === Glass modals (2025/26) — MNIEJ przezroczyste === */
.modal-glass .modal-dialog{ filter: drop-shadow(0 18px 42px rgba(16,24,40,.18)); }
.modal-backdrop.show{ backdrop-filter: blur(5px); background: rgba(11,19,36,.28); }
.modal-glass .modal-content{
  border-radius: 18px;
  background:
    radial-gradient(1200px 400px at -20% -20%, rgba(79,124,255,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.90)); /* bardziej „mięsiste” */
  border:1px solid rgba(229,231,235,.94);
  backdrop-filter: blur(10px);
  box-shadow:
    0 12px 30px rgba(16,24,40,.10),
    inset 0 1px 0 rgba(255,255,255,.85);
}

/* Header i footer */
.modal-glass .modal-header{
  border: none;
  padding: 12px 14px;
  position: relative;      /* kotwica do absolutnego X */
  padding-right: 56px;     /* miejsce na przycisk zamknięcia */
}
.modal-glass .modal-footer{
  border: none;
  padding: 12px 14px;
}

/* Tytuł i natywny .btn-close */
.modal-glass .modal-title{ font-weight:800; color:#0b1324; letter-spacing:.01em; }
.modal-glass .btn-close{ filter: grayscale(0); } /* fallback dla przeglądarek */

/* Pozycjonowanie okrągłego „X” */
.modal-glass .modal-header .btn-glass-close{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

/* Pola formularza */
.modal-glass .form-control{
  border-radius: 12px;
  border:1px solid rgba(229,231,235,.92);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90));
}
.modal-glass .form-control:focus{
  border-color: rgba(79,124,255,.55);
  box-shadow: 0 0 0 .15rem rgba(79,124,255,.18);
}

/* === Globalne centrowanie WSZYSTKICH modali (horyzontalnie i pionowo) === */
:root{
  /* odstęp od krawędzi okna (jak w BS: --bs-modal-margin) */
  --modal-vgap: 1.75rem;
}
@media (max-width: 576px){
  :root{ --modal-vgap: .5rem; }
}

/* Poziome wyśrodkowanie zawsze */
.modal .modal-dialog{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Pionowe centrowanie bez potrzeby dodawania .modal-dialog-centered */
.modal.show .modal-dialog{
  display: flex;
  align-items: center;
  min-height: calc(100vh - 2 * var(--modal-vgap));
  margin-top: var(--modal-vgap) !important;
  margin-bottom: var(--modal-vgap) !important;
}

/* Upewnij się, że zawartość przewija się, gdy modal jest wyższy niż viewport */
.modal .modal-content{
  max-height: calc(100vh - 2 * var(--modal-vgap));
  display: flex;
  flex-direction: column;
}
.modal .modal-body{
  overflow: auto;           /* przewijanie środka */
}

/* iOS safe-area – żeby nie „przyklejać” do notcha/docka */
@supports (padding: max(0px)){
  .modal.show .modal-dialog{
    min-height: calc(
      100vh - 2 * max(var(--modal-vgap), env(safe-area-inset-top), env(safe-area-inset-bottom))
    );
  }
}