/**
 * TN iMAG - Niestandardowe rozszerzenia Bootstrap 5.3.3
 * 
 * Ten plik rozszerza Bootstrap o specyficzne style dla aplikacji TN iMAG
 * zgodnie z regułami kodowania i ciemnym motywem KDE-like.
 * 
 * @author Paweł Plichta / TN iMAG
 * @version 1.0
 * @since 2025-09-19
 */

/* ===== ZMIENNE CSS - Motywy TN iMAG - JASNY MOTYW ===== */
:root {
  /* Kolory podstawowe TN iMAG - Windows Blue */
  --tn-primary: #0078d4; /* Windows Blue */
  --tn-primary-dark: #0066b8;
  --tn-primary-light: #106ebe;
  --tn-secondary: #6c757d;
  --tn-success: #198754;
  --tn-warning: #ffc107;
  --tn-danger: #dc3545;
  --tn-info: #0dcaf0;
  
  /* Kolory tła - jasny motyw */
  --tn-bg-primary: #ffffff;
  --tn-bg-secondary: #f8f9fa;
  --tn-bg-tertiary: #e9ecef;
  --tn-bg-card: #ffffff;
  --tn-bg-sidebar: #f5f5f5;
  --tn-bg-header: #ffffff;
  
  /* Kolory tekstu - jasny motyw */
  --tn-text-primary: #212529;
  --tn-text-secondary: #6c757d;
  --tn-text-muted: #adb5bd;
  --tn-text-inverse: #ffffff;
  
  /* Kolory ramek */
  --tn-border-primary: #dee2e6;
  --tn-border-secondary: #e9ecef;
  --tn-border-accent: #0070f2;
  
  /* Cienie - jasny motyw */
  --tn-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --tn-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --tn-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --tn-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  
  /* Rozmiary */
  --tn-sidebar-width: 185px;
  --tn-header-height: 60px;
  --tn-border-radius: 8px;
  --tn-border-radius-sm: 4px;
  --tn-border-radius-lg: 12px;
}

/* ===== CIEMNY MOTYW (opcjonalny) ===== */
[data-bs-theme="dark"] {
  /* Kolory tła - ciemny motyw */
  --tn-bg-primary: #2d2d2d;
  --tn-bg-secondary: #353535;
  --tn-bg-tertiary: #3d3d3d;
  --tn-bg-card: #3a3a3a;
  --tn-bg-sidebar: #3a3a3a;
  --tn-bg-header: #3d3d3d;
  
  /* Kolory tekstu - ciemny motyw */
  --tn-text-primary: #e8e8e8;
  --tn-text-secondary: #d0d0d0;
  --tn-text-muted: #b0b0b0;
  --tn-text-inverse: #2a2a2a;
  
  /* Kolory ramek - ciemny motyw */
  --tn-border-primary: #4a4a4a;
  --tn-border-secondary: #505050;
  --tn-border-accent: #0070f2;
  
  /* Cienie - ciemny motyw */
  --tn-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --tn-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  --tn-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
  --tn-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}

/* ===== OVERRIDE BOOTSTRAP THEMES ===== */
:root {
  /* Czcionka SAP Logon style */
  --bs-font-sans-serif: 'Segoe UI', Tahoma, Arial, Helvetica, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  
  --bs-primary: var(--tn-primary);
  --bs-primary-rgb: 0, 120, 212;
  --bs-secondary: var(--tn-secondary);
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success: var(--tn-success);
  --bs-success-rgb: 25, 135, 84;
  --bs-warning: var(--tn-warning);
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger: var(--tn-danger);
  --bs-danger-rgb: 220, 53, 69;
  --bs-info: var(--tn-info);
  --bs-info-rgb: 13, 202, 240;
  
  --bs-body-bg: var(--tn-bg-primary);
  --bs-body-color: var(--tn-text-primary);
  --bs-emphasis-color: var(--tn-text-primary);
  --bs-secondary-color: var(--tn-text-secondary);
  --bs-tertiary-color: var(--tn-text-muted);
  
  --bs-border-color: var(--tn-border-primary);
  --bs-border-color-translucent: rgba(0, 0, 0, 0.1);
  
  --bs-link-color: var(--tn-primary);
  --bs-link-hover-color: var(--tn-primary-dark);
  
  --bs-code-color: #e83e8c;
  
  --bs-form-valid-color: var(--tn-success);
  --bs-form-valid-border-color: var(--tn-success);
  --bs-form-invalid-color: var(--tn-danger);
  --bs-form-invalid-border-color: var(--tn-danger);
}

/* Globalna czcionka dla całej aplikacji */
* {
  font-family: var(--bs-font-sans-serif);
}

[data-bs-theme="dark"] {
  --bs-primary: var(--tn-primary);
  --bs-primary-rgb: 0, 120, 212;
  --bs-secondary: var(--tn-secondary);
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success: var(--tn-success);
  --bs-success-rgb: 25, 135, 84;
  --bs-warning: var(--tn-warning);
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger: var(--tn-danger);
  --bs-danger-rgb: 220, 53, 69;
  --bs-info: var(--tn-info);
  --bs-info-rgb: 13, 202, 240;
  
  --bs-body-bg: var(--tn-bg-primary);
  --bs-body-color: var(--tn-text-primary);
  --bs-emphasis-color: var(--tn-text-primary);
  --bs-secondary-color: var(--tn-text-secondary);
  --bs-tertiary-color: var(--tn-text-muted);
  
  --bs-border-color: var(--tn-border-primary);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.1);
  
  --bs-link-color: var(--tn-primary-light);
  --bs-link-hover-color: var(--tn-primary);
  
  --bs-code-color: #e83e8c;
  
  --bs-form-valid-color: var(--tn-success);
  --bs-form-valid-border-color: var(--tn-success);
  --bs-form-invalid-color: var(--tn-danger);
  --bs-form-invalid-border-color: var(--tn-danger);
}

/* ===== GŁÓWNE LAYOUT ===== */
.tn-glowny-kontener {
  min-height: 100vh;
  background-color: var(--tn-bg-primary);
}

.tn-sidebar {
  width: var(--tn-sidebar-width);
  background-color: var(--tn-bg-sidebar);
  border-right: 1px solid var(--tn-border-primary);
  box-shadow: var(--tn-shadow);
}

.tn-header {
  background-color: var(--tn-bg-header);
  border-bottom: 1px solid var(--tn-border-primary);
  height: var(--tn-header-height);
}

.tn-main-content {
  background-color: var(--tn-bg-primary);
  min-height: calc(100vh - var(--tn-header-height));
}

/* ===== KARTY I PANELE ===== */
.tn-card {
  background-color: var(--tn-bg-card);
  border: 1px solid var(--tn-border-primary);
  border-radius: var(--tn-border-radius);
  box-shadow: var(--tn-shadow);
}

.tn-card-header {
  background-color: var(--tn-bg-secondary);
  border-bottom: 1px solid var(--tn-border-primary);
  border-radius: var(--tn-border-radius) var(--tn-border-radius) 0 0;
  padding: 1rem;
}

.tn-card-body {
  padding: 1.5rem;
}

/* ===== PRZYCISKI TN iMAG - WINDOWS STYLE ===== */
.btn {
  border-radius: 4px; /* Windows border radius */
  font-weight: 500;
  padding: 0 14px;
  height: 28px; /* Windows button height */
  font-size: 12px; /* Windows font size */
  transition: all 0.15s ease;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Windows shadow */
  border: 1px solid #a0a0a0; /* Windows border */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn:hover {
  background: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 100%); /* Windows gradient hover */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.btn:active {
  background: linear-gradient(to bottom, #e8e8e8 0%, #d8d8d8 100%); /* Windows gradient active */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); /* Windows inset shadow */
}

.btn-primary, .btn-tn-primary {
  background: linear-gradient(to bottom, #0078d4 0%, #0066b8 100%); /* Windows Blue gradient */
  color: #ffffff;
  border-color: #005a9e;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-primary:hover, .btn-tn-primary:hover {
  background: linear-gradient(to bottom, #106ebe 0%, #005a9e 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  color: #ffffff;
}

.btn-primary:active, .btn-tn-primary:active {
  background: linear-gradient(to bottom, #005a9e 0%, #004d85 100%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-secondary, .btn-tn-secondary {
  background: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%); /* Windows gradient */
  color: #1a1a1a;
  border: 1px solid #a0a0a0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-secondary:hover, .btn-tn-secondary:hover {
  background: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  color: #1a1a1a;
}

.btn-secondary:active, .btn-tn-secondary:active {
  background: linear-gradient(to bottom, #e8e8e8 0%, #d8d8d8 100%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn:disabled {
  background: #e8e8e8;
  color: #808080;
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: var(--tn-font-size-sm);
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: var(--tn-font-size-lg);
}

.btn-tn-secondary {
  background-color: var(--tn-bg-secondary);
  border-color: var(--tn-border-primary);
  color: var(--tn-text-primary);
  font-weight: 500;
  border-radius: var(--tn-border-radius-sm);
  transition: all 0.2s ease;
}

.btn-tn-secondary:hover {
  background-color: var(--tn-bg-tertiary);
  border-color: var(--tn-border-secondary);
  color: var(--tn-text-primary);
  transform: translateY(-1px);
  box-shadow: var(--tn-shadow);
}

/* ===== TABELE TN iMAG ===== */
.table-tn {
  background-color: var(--tn-bg-card);
  border: 1px solid var(--tn-border-primary);
  border-radius: var(--tn-border-radius);
  overflow: hidden;
}

.table-tn thead th {
  background-color: var(--tn-bg-secondary);
  border-bottom: 2px solid var(--tn-border-primary);
  color: var(--tn-text-primary);
  font-weight: 600;
  padding: 1rem 0.75rem;
}

.table-tn tbody tr {
  border-bottom: 1px solid var(--tn-border-primary);
  transition: background-color 0.2s ease;
}

.table-tn tbody tr:hover {
  background-color: var(--tn-bg-secondary);
}

.table-tn tbody td {
  padding: 0.75rem;
  color: var(--tn-text-secondary);
  vertical-align: middle;
}

/* ===== FORMUARZE TN iMAG ===== */
.form-control-tn {
  background-color: var(--tn-bg-secondary);
  border: 1px solid var(--tn-border-primary);
  color: var(--tn-text-primary);
  border-radius: var(--tn-border-radius-sm);
  transition: all 0.2s ease;
}

.form-control-tn:focus {
  background-color: var(--tn-bg-secondary);
  border-color: var(--tn-border-accent);
  color: var(--tn-text-primary);
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

.form-control-tn::placeholder {
  color: var(--tn-text-muted);
}

.form-label-tn {
  color: var(--tn-text-primary);
  font-weight: 500;
  margin-bottom: 0.5rem;
}

/* ===== MODALNE OKNA TN iMAG ===== */
.modal-tn .modal-content {
  background-color: var(--tn-bg-card);
  border: 1px solid var(--tn-border-primary);
  border-radius: var(--tn-border-radius-lg);
  box-shadow: var(--tn-shadow-xl);
}

.modal-tn .modal-header {
  background-color: var(--tn-bg-secondary);
  border-bottom: 1px solid var(--tn-border-primary);
  border-radius: var(--tn-border-radius-lg) var(--tn-border-radius-lg) 0 0;
}

.modal-tn .modal-title {
  color: var(--tn-text-primary);
  font-weight: 600;
}

.modal-tn .btn-close {
  filter: invert(1);
}

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

.modal-tn .modal-footer {
  background-color: var(--tn-bg-secondary);
  border-top: 1px solid var(--tn-border-primary);
  border-radius: 0 0 var(--tn-border-radius-lg) var(--tn-border-radius-lg);
}

/* ===== ALERTY I KOMUNIKATY ===== */
.alert-tn-success {
  background-color: rgba(16, 185, 129, 0.1);
  border: 1px solid var(--tn-success);
  color: var(--tn-success);
  border-radius: var(--tn-border-radius);
}

.alert-tn-warning {
  background-color: rgba(245, 158, 11, 0.1);
  border: 1px solid var(--tn-warning);
  color: var(--tn-warning);
  border-radius: var(--tn-border-radius);
}

.alert-tn-danger {
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--tn-danger);
  color: var(--tn-danger);
  border-radius: var(--tn-border-radius);
}

.alert-tn-info {
  background-color: rgba(6, 182, 212, 0.1);
  border: 1px solid var(--tn-info);
  color: var(--tn-info);
  border-radius: var(--tn-border-radius);
}

/* ===== NAVIGACJA I MENU ===== */
.nav-tn {
  background-color: var(--tn-bg-sidebar);
  border-right: 1px solid var(--tn-border-primary);
}

.nav-tn .nav-link {
  color: var(--tn-text-secondary);
  padding: 0.75rem 1rem;
  border-radius: var(--tn-border-radius-sm);
  margin: 0.25rem;
  transition: all 0.2s ease;
}

.nav-tn .nav-link:hover {
  background-color: var(--tn-bg-secondary);
  color: var(--tn-text-primary);
}

.nav-tn .nav-link.active {
  background-color: var(--tn-primary);
  color: white;
}

.nav-tn .nav-link i {
  margin-right: 0.5rem;
  width: 1.25rem;
  text-align: center;
}

/* ===== BADGES I LABELS ===== */
.badge-tn {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  border-radius: var(--tn-border-radius-sm);
}

.badge-tn-primary {
  background-color: var(--tn-primary);
  color: white;
}

.badge-tn-success {
  background-color: var(--tn-success);
  color: white;
}

.badge-tn-warning {
  background-color: var(--tn-warning);
  color: white;
}

.badge-tn-danger {
  background-color: var(--tn-danger);
  color: white;
}

/* ===== PROGRESS BARS ===== */
.progress-tn {
  background-color: var(--tn-bg-secondary);
  border-radius: var(--tn-border-radius-sm);
  height: 0.75rem;
  overflow: hidden;
}

.progress-tn .progress-bar {
  background-color: var(--tn-primary);
  border-radius: var(--tn-border-radius-sm);
  transition: width 0.3s ease;
}

/* ===== DROPDOWN MENUS ===== */
.dropdown-menu-tn {
  background-color: var(--tn-bg-card);
  border: 1px solid var(--tn-border-primary);
  border-radius: var(--tn-border-radius);
  box-shadow: var(--tn-shadow-lg);
}

.dropdown-menu-tn .dropdown-item {
  color: var(--tn-text-secondary);
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
}

.dropdown-menu-tn .dropdown-item:hover {
  background-color: var(--tn-bg-secondary);
  color: var(--tn-text-primary);
}

.dropdown-menu-tn .dropdown-divider {
  border-color: var(--tn-border-primary);
}

/* ===== TOOLTIPS ===== */
.tooltip-tn .tooltip-inner {
  background-color: var(--tn-bg-tertiary);
  color: var(--tn-text-primary);
  border-radius: var(--tn-border-radius-sm);
  font-size: 0.875rem;
}

.tooltip-tn .tooltip-arrow::before {
  border-top-color: var(--tn-bg-tertiary);
}

/* ===== RESPONSYWNOŚĆ ===== */
@media (max-width: 768px) {
  .tn-sidebar {
    width: 100%;
    position: fixed;
    top: 0;
    left: -100%;
    height: 100vh;
    z-index: 1050;
    transition: left 0.3s ease;
  }
  
  .tn-sidebar.show {
    left: 0;
  }
  
  .tn-main-content {
    margin-left: 0;
  }
}

/* ===== ANIMACJE ===== */
.tn-fade-in {
  animation: tnFadeIn 0.3s ease-in;
}

@keyframes tnFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tn-slide-in {
  animation: tnSlideIn 0.3s ease-out;
}

@keyframes tnSlideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

/* ===== UTILITY CLASSES ===== */
.tn-text-primary { color: var(--tn-text-primary) !important; }
.tn-text-secondary { color: var(--tn-text-secondary) !important; }
.tn-text-muted { color: var(--tn-text-muted) !important; }

.tn-bg-primary { background-color: var(--tn-bg-primary) !important; }
.tn-bg-secondary { background-color: var(--tn-bg-secondary) !important; }
.tn-bg-card { background-color: var(--tn-bg-card) !important; }

.tn-border-primary { border-color: var(--tn-border-primary) !important; }
.tn-border-secondary { border-color: var(--tn-border-secondary) !important; }

.tn-shadow-sm { box-shadow: var(--tn-shadow-sm) !important; }
.tn-shadow { box-shadow: var(--tn-shadow) !important; }
.tn-shadow-lg { box-shadow: var(--tn-shadow-lg) !important; }

.tn-rounded { border-radius: var(--tn-border-radius) !important; }
.tn-rounded-sm { border-radius: var(--tn-border-radius-sm) !important; }
.tn-rounded-lg { border-radius: var(--tn-border-radius-lg) !important; }

/* ===== SPECJALNE KOMPONENTY TN iMAG ===== */
.tn-warehouse-slot {
  background-color: var(--tn-bg-card);
  border: 1px solid var(--tn-border-primary);
  border-radius: var(--tn-border-radius-sm);
  padding: 0.5rem;
  transition: all 0.2s ease;
  cursor: pointer;
}

.tn-warehouse-slot:hover {
  background-color: var(--tn-bg-secondary);
  border-color: var(--tn-border-accent);
  transform: translateY(-2px);
  box-shadow: var(--tn-shadow);
}

.tn-warehouse-slot.occupied {
  background-color: var(--tn-success);
  border-color: var(--tn-success);
  color: white;
}

.tn-warehouse-slot.reserved {
  background-color: var(--tn-warning);
  border-color: var(--tn-warning);
  color: white;
}

.tn-product-card {
  background-color: var(--tn-bg-card);
  border: 1px solid var(--tn-border-primary);
  border-radius: var(--tn-border-radius);
  padding: 1rem;
  transition: all 0.2s ease;
}

.tn-product-card:hover {
  border-color: var(--tn-border-accent);
  box-shadow: var(--tn-shadow);
  transform: translateY(-2px);
}

.tn-order-item {
  background-color: var(--tn-bg-card);
  border: 1px solid var(--tn-border-primary);
  border-radius: var(--tn-border-radius);
  padding: 1rem;
  margin-bottom: 0.5rem;
  transition: all 0.2s ease;
}

.tn-order-item:hover {
  background-color: var(--tn-bg-secondary);
  border-color: var(--tn-border-accent);
}

/* ===== LOADING STATES ===== */
.tn-loading {
  position: relative;
  overflow: hidden;
}

.tn-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: tnLoading 1.5s infinite;
}

@keyframes tnLoading {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* ===== PRINT STYLES ===== */
@media print {
  .tn-sidebar,
  .tn-header,
  .btn,
  .modal {
    display: none !important;
  }
  
  .tn-main-content {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .tn-card {
    border: 1px solid #000 !important;
    box-shadow: none !important;
  }
}