/* =============================================
   PREMIUM DARK THEME – KANCIaste & RESPONSYWNE
   (nadpisanie Bootstrapa)
   ============================================= */

:root {
  --bg-deep: #0f172a;
  --surface: #1e293b;
  --border: #334155;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --gold: #fb2424;
  --gold-dark: #f50b0b;
  --gold-glow: rgba(251, 36, 36, 0.3);
  --skew: -5deg;
}

/* === GLOBALNE TŁO === */
body {
  background-color: var(--bg-deep);
  color: var(--text);
}

/* ===== Navbar ===== */
.navbar.navbar-dark {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

.navbar.navbar-dark::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 70% 50%, rgba(251, 191, 36, 0.06) 0%, transparent 60%);
  pointer-events: none;
}

.navbar-dark .navbar-brand {
  font-weight: 700;
  font-size: 1.3rem;
  color: #f8fafc !important;
  letter-spacing: 0.5px;
  transition: color 0.3s;
}
.navbar-dark .navbar-brand:hover {
  color: var(--gold) !important;
}

/* ===== LINKI NAWIGACJI – romboidalne ===== */
.navbar-dark .navbar-nav .nav-link {
  color: #cbd5e1 !important;
  font-weight: 500;
  padding: 0.6rem 1.2rem;
  margin: 0 2px;
  transition: all 0.25s ease;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-size: 0.9rem;
  border-radius: 0;
  transform: skewX(var(--skew));
}

.navbar-dark .navbar-nav .nav-link > *,
.navbar-dark .navbar-nav .nav-link i,
.navbar-dark .navbar-nav .nav-link span {
  display: inline-block;
  transform: skewX(calc(-1 * var(--skew)));
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: var(--gold) !important;
  background: rgba(251, 191, 36, 0.08);
}

.navbar-dark .navbar-nav .nav-link.active {
  color: var(--bg-deep) !important;
  background: var(--gold) !important;
  box-shadow: 0 0 12px var(--gold-glow);
  font-weight: 600;
  border-radius: 0;
}

/* Toggler */
.navbar-dark .navbar-toggler {
  border-color: rgba(251, 191, 36, 0.5);
  transform: skewX(var(--skew));
}
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(251, 191, 36, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  display: inline-block;
  transform: skewX(calc(-1 * var(--skew)));
}

/* ===== Alerty – KANCIaste ===== */
.alert {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 0 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  border-left: 4px solid var(--gold);
}

.alert-success {
  border-left-color: var(--gold);
  color: var(--gold);
}
.alert-danger {
  border-left-color: #ef4444;
  color: #fecaca;
}
.alert-warning {
  border-left-color: #f59e0b;
  color: #fde68a;
}
.alert-info {
  border-left-color: #0ea5e9;
  color: #bae6fd;
}

.alert .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ===== Formularze – KANCIaste ===== */
.form-control,
.form-select {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 0 !important;
  transition: all 0.25s ease;
}
.form-control:focus,
.form-select:focus {
  background: var(--bg-deep);
  border-color: var(--gold);
  box-shadow: 0 0 0 0.25rem var(--gold-glow);
  color: #f8fafc;
}
.form-label {
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}

/* ===== Karty – KANCIaste ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  color: var(--text);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 1rem 1.5rem;
  border-radius: 0 !important;
}

/* ===== Przyciski – KANCIaste + romboidalne ===== */
.btn {
  --bs-btn-border-radius: 0;
  --bs-btn-border-radius-sm: 0;
  --bs-btn-border-radius-lg: 0;
  border-radius: 0 !important;
  transform: skewX(var(--skew));
  transition: all 0.25s ease;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: none;
  position: relative;
  overflow: hidden;
  padding: 12px 30px;
  font-size: 1rem;
}

.btn > *,
.btn i,
.btn span {
  display: inline-block;
  transform: skewX(calc(-1 * var(--skew)));
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--bg-deep);
  box-shadow: 0 4px 12px var(--gold-glow);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  box-shadow: 0 6px 18px var(--gold-glow), 0 0 20px var(--gold-glow);
  transform: skewX(var(--skew)) scale(1.03);
}

.btn-secondary {
  background: linear-gradient(135deg, #3b4252, #4c566a);
  color: #f0f0f0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.btn-secondary:hover {
  background: linear-gradient(135deg, #4c566a, #3b4252);
  box-shadow: 0 6px 18px rgba(0,0,0,0.6), 0 0 15px rgba(255,255,255,0.05);
  transform: skewX(var(--skew)) scale(1.03);
}

.btn-outline-primary {
  background: transparent;
  border: 2px solid var(--gold);
  color: var(--gold);
  box-shadow: none;
}
.btn-outline-primary:hover {
  background: var(--gold);
  color: var(--bg-deep);
  box-shadow: 0 0 18px var(--gold-glow);
}

.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ===== Tabele – KANCIaste ===== */
.table {
  background: var(--surface);
  color: var(--text);
  border-radius: 0 !important;
  overflow: hidden;
}
.table thead {
  background: var(--gold);
  color: var(--bg-deep);
}
.table thead th {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  border-radius: 0 !important;
}
.table tbody tr:hover {
  background: #2d3a52 !important;
}

/* ===== Drobiazgi ===== */
::selection {
  background: var(--gold);
  color: var(--bg-deep);
}
hr {
  border-color: var(--border);
  opacity: 0.5;
}

/* ===== List group – ciemne, kanciaste ===== */
.list-group-item {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border);
  border-radius: 0 !important;
}

/* ===== Badge – dopasowane do ciemnego tła ===== */
.badge {
  background-color: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-weight: 500;
  padding: 0.35em 0.65em;
}
.badge.bg-success {
  background-color: #166534 !important;
  color: #bbf7d0;
}
.badge.bg-warning {
  background-color: #854d0e !important;
  color: #fef08a;
}
.badge.bg-danger {
  background-color: #7f1d1d !important;
  color: #fecaca;
}

/* ===== Karta wyboru produktu (device_add) ===== */
.product-card {
    cursor: pointer;
    transition: all 0.2s ease;
}

.product-card:hover {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 1px var(--gold-glow), 0 6px 20px rgba(0, 0, 0, 0.5);
}

.product-card.selected {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 2px var(--gold), 0 0 20px var(--gold-glow);
    background: rgba(251, 191, 36, 0.03);
}

.selected-badge {
    background: var(--gold) !important;
    color: var(--bg-deep) !important;
    font-weight: 600;
    border: none !important;
    padding: 0.3em 0.8em;
    border-radius: 0 !important;
}

/* ===== Zakładki ===== */
.tab-content {
  background: var(--surface);
  border-color: var(--border) !important;
  border-radius: 0 !important;
}

.nav-tabs {
  border-bottom: 2px solid var(--border);
  gap: 2px;
}

.nav-tabs .nav-link {
  color: var(--text-muted);
  background: transparent;
  border: 2px solid transparent;
  border-bottom: none;
  border-radius: 0 !important;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all 0.25s ease;
  position: relative;
}

.nav-tabs .nav-link:hover {
  color: var(--gold);
  border-color: var(--border);
  background: rgba(251, 191, 36, 0.04);
}

.nav-tabs .nav-link.active {
  color: var(--bg-deep) !important;
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 -4px 12px var(--gold-glow);
}

.nav-tabs .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
}

.nav-tabs .nav-link:not(.active) {
  background: rgba(255, 255, 255, 0.02);
}

/* =============================================
   RESPONSYWNOŚĆ – TABLETY I TELEFONY
   ============================================= */
@media (max-width: 991.98px) {
  /* Nawigacja – rezygnujemy z rombu */
  .navbar-dark .navbar-nav .nav-link {
    transform: none;
    margin-bottom: 2px;
  }
  .navbar-dark .navbar-nav .nav-link > *,
  .navbar-dark .navbar-nav .nav-link i {
    transform: none;
  }
  .navbar-dark .navbar-toggler {
    transform: none;
  }
  .navbar-dark .navbar-toggler-icon {
    transform: none;
  }

  /* Przyciski – bez rombu, mniejsze */
  .btn {
    transform: none;
    padding: 10px 20px;
    font-size: 0.9rem;
  }
  .btn > *,
  .btn i,
  .btn span {
    transform: none;
  }
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-outline-primary:hover {
    transform: none;
  }

  /* Karty – mniejszy padding */
  .card-body {
    padding: 1.2rem;
  }

  /* Tabele – mniejszy font i padding */
  .table thead th,
  .table tbody td {
    font-size: 0.8rem;
    padding: 0.5rem;
  }

  /* Formularze */
  .form-control,
  .form-select {
    font-size: 0.9rem;
  }

  /* Alerty */
  .alert {
    padding: 0.75rem 1rem;
  }

  /* Zakładki – przewijane poziomo */
  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .nav-tabs .nav-link {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    white-space: nowrap;
  }
}

/* Bardzo małe ekrany (telefony < 576px) */
@media (max-width: 575.98px) {
  .navbar-brand {
    font-size: 1rem;
  }
  .btn {
    padding: 8px 16px;
    font-size: 0.85rem;
  }
  .card-body {
    padding: 1rem;
  }
  h1.h3 {
    font-size: 1.3rem;
  }
}
/* ===== Tabele – pełne nadpisanie Bootstrapa (ciemny motyw) ===== */
.table {
  --bs-table-bg: var(--surface) !important;
  --bs-table-color: var(--text) !important;
  --bs-table-border-color: var(--border) !important;
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-collapse: collapse;
}

.table thead {
  background-color: var(--gold) !important;
  color: var(--bg-deep) !important;
}

.table thead th {
  background-color: var(--gold) !important;
  color: var(--bg-deep) !important;
  border-bottom: 2px solid var(--gold-dark) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  padding: 0.75rem 1rem;
}

.table tbody td,
.table tbody th {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  padding: 0.65rem 1rem;
  vertical-align: middle;
}

.table tbody tr:hover td,
.table tbody tr:hover th {
  background-color: #2d3a52 !important;
  color: #f8fafc !important;
}

/* Paski – jeśli gdzieś użyto table-striped */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, 0.02) !important;
  color: var(--text) !important;
}

/* Obramowania zewnętrzne – kanciaste, bez promieni */
.table {
  border-radius: 0 !important;
  overflow: hidden;
}

/* Responsywność dla małych ekranów */
@media (max-width: 575.98px) {
  .table thead th,
  .table tbody td {
    font-size: 0.78rem;
    padding: 0.5rem;
  }
}
/* ===== Karta urządzenia – premium efekt ===== */
.device-card {
  transition: all 0.25s ease;
}
.device-card:hover {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 1px var(--gold-glow), 0 12px 30px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
}
/* Więcej oddechu dla numerów seryjnych w karcie urządzenia */
.device-card .list-group-item {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
/* Karuzela – lepsza widoczność kontrolek */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1) grayscale(100%) brightness(200%);
}
/* ===== MODALE – ciemne, kanciaste ===== */
.modal-content {
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.modal-header {
  border-bottom: 1px solid var(--border);
}

.modal-footer {
  border-top: 1px solid var(--border);
}

.modal-title {
  color: #f8fafc;
  font-weight: 600;
}

.modal-body {
  color: var(--text);
}

/* Przycisk zamknięcia – jasny */
.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Overlay (tło za modalem) */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Drobne linki w modalu – dla kontrastu */
.modal-body a {
  color: var(--gold);
}
.modal-body a:hover {
  color: var(--gold-dark);
}
/* ===== Nowe klasy dla home.php ===== */
.hero {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-bottom: 2px solid var(--gold);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.text-gold {
    color: var(--gold);
}

/* ===== Timeline ===== */

/* ===== Registration Flow ===== */

.registration-flow{

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:0;

}

.registration-flow-step{

    width:210px;
    text-align:center;
    position:relative;
    z-index:2;

}

.registration-flow-icon{

    width:74px;
    height:74px;

    margin:0 auto 18px;

    background:var(--surface);

    border:2px solid var(--gold);

    display:flex;
    align-items:center;
    justify-content:center;

    color:var(--gold);

    font-size:30px;

    box-shadow:0 0 20px rgba(251,191,36,.15);

    transition:.25s;

}

.registration-flow-step:hover .registration-flow-icon{

    background:var(--gold);
    color:var(--bg-deep);

    box-shadow:0 0 25px var(--gold-glow);

}

.registration-flow-step h5{

    font-size:1rem;
    font-weight:600;

}

.registration-flow-step p{

    color:var(--text-muted);
    font-size:.9rem;
    margin-top:10px;
    line-height:1.45;

}

.registration-flow-arrow{

    flex:1;
    position:relative;
    height:74px;

}

.registration-flow-arrow::before{

    content:'';

    position:absolute;

    left:0;
    right:18px;
    top:50%;

    height:2px;

    background:var(--gold);

    opacity:.45;

    transform:translateY(-50%);

}

.registration-flow-arrow::after{

    content:'';

    position:absolute;

    right:0;
    top:50%;

    width:12px;
    height:12px;

    border-top:2px solid var(--gold);
    border-right:2px solid var(--gold);

    transform:translateY(-50%) rotate(45deg);

}

@media(max-width:991px){

    .registration-flow{

        flex-direction:column;
        gap:24px;

    }

    .registration-flow-step{

        width:100%;

    }

    .registration-flow-arrow{

        width:2px;
        height:50px;
        margin:0 auto;
        position:relative;

    }

    .registration-flow-arrow::before{

        left:50%;
        right:auto;
        top:0;
        bottom:18px;

        width:2px;
        height:auto;

        transform:translateX(-50%);

    }

    .registration-flow-arrow::after{

        top:auto;
        bottom:0;
        left:50%;
        right:auto;

        transform:translateX(-50%) rotate(135deg);

    }

}
/* ===== Placeholdery – widoczne w ciemnym tle ===== */
.form-control::placeholder,
.form-select::placeholder,
textarea::placeholder,
.flatpickr-input::placeholder {
    color: #94a3b8 !important;   /* jasnoszary, kontrastuje z ciemnym tłem */
    opacity: 1 !important;       /* zapobiega przyciemnieniu w Firefoksie */
}

/* Dla wsparcia starszych wersji WebKit */
.form-control::-webkit-input-placeholder,
.form-select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
.flatpickr-input::-webkit-input-placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}