/* --------------------------------------------------
   Design Tokens (Light/Dark) - Bootstrap 5.3+
   -------------------------------------------------- */

:root {
  --app-body-bg: #f8f9fa;
  --app-body-color: #212529;
  --app-card-bg: #f7f7f7;
  --app-card-border-color: #e0e0e0;
  --app-card-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  --app-container-bg: #ffffff;
  --app-file-info-color: #99A3A4;
  --app-hr-color: #dee2e6;
  --app-table-bg: #ffffff;
  --app-table-color: #212529;
  --app-table-thead-bg: #e9ecef;
  --app-row-bg-contrast: var(--app-body-bg);
}

[data-bs-theme="dark"] {
  /* Bootstrap tokens */
  --bs-body-bg: #262626;
  --bs-body-color: #e6e6e6;
  --bs-border-color: #555555;
  --bs-tertiary-bg: #2f2f2f;
  --bs-secondary-color: #cfcfcf;
  --bs-link-color: #8ab4f8;

  /* Modal appearance */
  --bs-modal-bg: #404040;
  --bs-modal-color: #f0f0f0;
  --bs-modal-border-color: #565656;
  --bs-modal-header-border-color: var(--bs-modal-border-color);
  --bs-modal-footer-border-color: var(--bs-modal-border-color);

  /* App-scoped tokens */
  --app-body-bg: #262626;
  --app-body-color: #e6e6e6;
  --app-container-bg: #444444;
  --app-card-bg: #444444;
  --app-card-border-color: #555555;
  --app-table-bg: #444444;
  --app-table-color: #e6e6e6;
  --app-table-thead-bg: #373737;
  --app-row-bg-contrast: var(--app-body-bg);
}

/* --------------------------------------------------
   Base
   -------------------------------------------------- */

body { background-color: var(--app-body-bg); color: var(--app-body-color); }
p, h1, h2, h3, h4, h5, h6 { color: var(--app-body-color); }
hr { color: var(--app-hr-color); }
.container-fluid { background-color: transparent; }

/* --------------------------------------------------
   Components
   -------------------------------------------------- */

/* Navbar – immer dunkler Hintergrund */
.navbar { background-color: #212529; box-shadow: 0 1px 0 rgba(0,0,0,.25); border-bottom: 0; }
.navbar .nav-link, .navbar .navbar-brand { color: #f8f9fa; }
.navbar-nav .nav-item .nav-link { padding-top: .5rem; padding-bottom: .5rem; }

/* Card */
.card { background-color: var(--app-card-bg); border-color: var(--app-card-border-color); box-shadow: var(--app-card-shadow); color: var(--app-body-color); }

/* Table */
.table { background-color: var(--app-table-bg); color: var(--app-table-color); }
.table thead { background-color: var(--app-table-thead-bg); color: var(--app-table-color); }
.table tbody tr { background-color: var(--app-table-bg); color: var(--app-table-color); }
.table th, .table td { background-color: var(--app-table-bg); color: var(--app-table-color); border-color: var(--bs-border-color); }

/* Layout helpers */
.row { background-color: var(--app-row-bg-contrast); }

/* Forms */
.form-control { background-color: var(--bs-body-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); }
.form-control::placeholder { color: var(--bs-secondary-color); opacity: .8; }
.form-control:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), .25); }
.input-group .input-group-text { background-color: var(--bs-tertiary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); }

/* --------------------------------------------------
   Modals
   -------------------------------------------------- */

/* Stacking-Order pro Seite (Sicherheitsnetz) */
.filebrowser-page .modal-backdrop { z-index: var(--bs-backdrop-zindex, 1050); }
.admin-interface .modal { z-index: var(--bs-modal-zindex, 1055); }
.admin-interface .modal-backdrop { z-index: var(--bs-backdrop-zindex, 1050); }
.upload-page .modal { z-index: var(--bs-modal-zindex, 1055); }
.upload-page .modal-backdrop { z-index: var(--bs-backdrop-zindex, 1050); }

/* Breite/Fußzeile */
@media (min-width: 576px) { .modal { --bs-modal-width: 640px; } .modal-footer { flex-wrap: nowrap; } }
@media (min-width: 768px) { .modal { --bs-modal-width: 720px; } }
.modal-footer { gap: .75rem; justify-content: center; }

/* Upload-spezifisches Safeguard */
.upload-page #alertModal.modal { z-index: 1060 !important; }
.upload-page .modal-backdrop.show { z-index: 1050 !important; }

/* --------------------------------------------------
   Utilities
   -------------------------------------------------- */

.cell-break-240 { max-width: 240px; word-break: break-all; }
.cell-wrap-520 { max-width: 520px; white-space: pre-wrap; }

/* --------------------------------------------------
   Page specifics (minimal, ohne Farb-Overrides)
   -------------------------------------------------- */

/* Login */
.login-page .form-container { max-width: 400px; margin: auto; padding-top: 150px; }
.login-page .form-group label { font-weight: bold; }

/* Upload */
.drop-area {
  background: var(--app-container-bg);
  border: 3px dashed #007fff;
  color: var(--bs-secondary-color);
  text-align: center;
  padding: 2rem;
  border-radius: .5rem;
  transition: background .2s, border-color .2s, color .2s;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.drop-area:hover, .drop-area.dragover { background: var(--bs-tertiary-bg); border-color: var(--bs-primary); color: var(--bs-body-color); }
.drop-area label { display: flex; width: 100%; height: 100%; cursor: pointer; align-items: center; justify-content: center; padding: 0; margin: 0; }
#fileToUpload { display: none; }

/* Upload: Fortschrittsbalken */
progress { width: 100%; height: 1.25rem; -webkit-appearance: none; appearance: none; }
progress::-webkit-progress-bar { background: var(--bs-tertiary-bg); border-radius: .25rem; }
progress::-webkit-progress-value, progress::-moz-progress-bar { background: var(--bs-primary); border-radius: .25rem; }

/* Home - Hero Section */
.hero-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%) !important;
  padding: 4rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 3rem;
  box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
}

/* Animated Gradient */
.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: gradient-slide 3s infinite;
  z-index: 1;
}

@keyframes gradient-slide {
  0% { left: -100%; }
  100% { left: 100%; }
}

.hero-content {
  position: relative;
  z-index: 2;
  animation: fade-in 1s ease-out;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-title {
  color: #ffffff !important;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero-subtitle {
  color: rgba(255,255,255,0.95) !important;
  font-size: 1.25rem;
  font-weight: 300;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* Home - Modern Service Cards mit Glassmorphism */
.service-card {
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 20px;
  padding: 2rem;
  overflow: hidden;
  transition: all 0.3s ease;

  /* Glassmorphism Effect - Light Mode */
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .service-card {
  /* Glassmorphism Effect - Dark Mode mit mehr Sichtbarkeit */
  background: rgba(80, 80, 80, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}

/* Farbige Akzente für Service Cards */
.stream-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
  opacity: 0.3;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.cloud-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(147, 197, 253, 0.2) 100%);
  opacity: 0.3;
  transition: opacity 0.3s ease;
  z-index: 0;
}

/* Dark Mode - stärkere Akzente */
[data-bs-theme="dark"] .stream-card::before {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%);
  opacity: 0.5;
}

[data-bs-theme="dark"] .cloud-card::before {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(147, 197, 253, 0.3) 100%);
  opacity: 0.5;
}

/* Hover Effekte */
.service-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.service-card:hover::before {
  opacity: 0.8;
}

[data-bs-theme="dark"] .service-card:hover {
  box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

[data-bs-theme="dark"] .service-card:hover::before {
  opacity: 1;
}

/* Service Link Styling */
.service-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

/* Icon Styling mit Animation */
.service-icon {
  font-size: 6rem;
  margin-bottom: 1.5rem;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.stream-card .service-icon {
  color: #dc2626;
}

.cloud-card .service-icon {
  color: #3b82f6;
}

[data-bs-theme="dark"] .stream-card .service-icon {
  color: #f87171;
  filter: drop-shadow(0 4px 12px rgba(248, 113, 113, 0.4));
}

[data-bs-theme="dark"] .cloud-card .service-icon {
  color: #60a5fa;
  filter: drop-shadow(0 4px 12px rgba(96, 165, 250, 0.4));
}

.service-card:hover .service-icon {
  transform: scale(1.15) rotate(5deg);
  filter: drop-shadow(0 0 25px currentColor);
}

[data-bs-theme="dark"] .service-card:hover .service-icon {
  filter: drop-shadow(0 0 30px currentColor);
}

/* Service Title & Description */
.service-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--bs-body-color);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .service-title {
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.service-description {
  font-size: 1.1rem;
  color: var(--bs-secondary-color);
  text-align: center;
  margin: 0;
  line-height: 1.6;
}

[data-bs-theme="dark"] .service-description {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
  .hero-section {
    padding: 3rem 1.5rem;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .service-card {
    height: 350px;
    margin-bottom: 1.5rem;
  }

  .service-icon {
    font-size: 4rem;
  }

  .service-title {
    font-size: 1.6rem;
  }

  .service-description {
    font-size: 1rem;
  }
}

/* Legacy cloud-box für Kompatibilität */
.cloud-box {
  height: 80vh; display: flex; flex-direction: column; justify-content: center; align-items: center;
  background-color: var(--app-card-bg); border: 1px solid var(--app-card-border-color); border-radius: 8px;
}
.cloud-box a { font-size: 24px; display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.cloud-box i { font-size: 50px; margin-bottom: 15px; }

/* Filebrowser */
.card-fixed-height { height: 400px; display: flex; flex-direction: column; }
.card-fixed-height .image-container { height: 80%; position: relative; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.card-fixed-height .card-body { flex-grow: .5; display: flex; flex-direction: column; justify-content: space-between; padding-top: .5rem; padding-bottom: .5rem; }
.file-info { color: var(--app-file-info-color); }

/* --------------------------------------------------
   Tailwind Custom Styles
   -------------------------------------------------- */

/* Dark mode support */
.dark {
    --tw-bg-opacity: 1;
    background-color: rgb(38 38 38 / var(--tw-bg-opacity));
    color: rgb(230 230 230 / var(--tw-text-opacity));
}

/* Glassmorphism backdrop filter */
.backdrop-blur-20 {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}