/**
 * kaufEinhorn Homepage Grid Redesign
 * Modern, clean layout with subtle backgrounds instead of borders
 * Responsive: Desktop (2x2) → Tablet (2-col) → Mobile (1-col)
 */

/* ============================================================================
   BORDER & BACKGROUND OVERRIDES - Remove all visible borders
   ============================================================================ */

/* Cards: Replace borders with subtle background variations */
.greeting-section,
.dashboard-doc-card,
.home-production-card,
.anmerkung {
  border: none !important;
}

/* Weather components: Subtle dark backgrounds */
.weather-widget > div > div {
  border: none !important;
}

.wday {
  border: none !important;
  background: #000 !important;
}

.wday-tip {
  border: 1px solid #222 !important;
  background: #000 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.wday-tip::after {
  border-top-color: #000 !important;
}

/* Badges & Pills: Remove borders, use background color for distinction */
[style*="border-radius:999px"] {
  border: none !important;
  background: #000 !important;
}

/* Select dropdowns: Subtle border instead of heavy */
select {
  border: 1px solid #333 !important;
  background: #000 !important;
}

/* Legend button */
button[style*="weather-legend"] {
  border: none !important;
  background: #000 !important;
  transition: background-color 0.2s ease;
}

button[style*="weather-legend"]:hover {
  background: #000 !important;
}

/* ============================================================================
   DASHBOARD GRID LAYOUT - Responsive structure with better spacing
   ============================================================================ */

/* Container for dashboard sections */
.todos-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
  padding: 0;
}

/* When only one col (no eigene todos), span full width */
.todos-columns > .col:only-child {
  grid-column: 1 / -1;
}

/* Main content table wrapper - DO NOT override display on tr/td (breaks nested mini-table) */
table {
  width: 100%;
  background: transparent;
}

/* Protect nested mini-tables inside anmerkung from global table rules */
.mini-table, .mini-table thead, .mini-table tbody, .mini-table tr, .mini-table td, .mini-table th {
  display: revert;
}

/* ============================================================================
   SPACING & PADDING OPTIMIZATION - More breathing room
   ============================================================================ */

.greeting-section {
  margin-bottom: 16px;
  padding: 16px !important;
}

.home-production-card {
  margin-top: 12px;
  padding: 16px !important;
}

.anmerkung {
  display: block !important;
  flex-direction: unset !important;
  margin-bottom: 16px;
  padding: 16px !important;
  background: #000;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.anmerkung h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.1rem;
}

.anmerkung:hover {
  background: #000 !important;
}

/* Todo columns with better spacing */
.todos-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.todos-columns .col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.todos-columns .anmerkung {
  flex: 1;
}

/* Item spacing in todos */
.todos-columns .item-info {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100%;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.todos-columns .item-info:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* ============================================================================
   RESPONSIVE DESIGN BREAKPOINTS
   ============================================================================ */

/* Tablet: 768px - 1023px */
@media (max-width: 1023px) {
  .todos-columns {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .weather-widget {
    flex-direction: column;
  }

  .weather-widget > div > div {
    flex-direction: column;
  }

  [style*="flex:1 1 260px"] {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  .anmerkung {
    padding: 14px !important;
  }
}

/* Mobile: < 768px */
@media (max-width: 767px) {
  .todos-columns {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .anmerkung {
    padding: 12px !important;
    margin-bottom: 12px;
  }

  .greeting-section {
    font-size: 14px !important;
    padding: 12px !important;
  }

  .dashboard-doc-card,
  .home-production-card {
    padding: 12px !important;
  }

  .home-production-summary {
    flex-direction: column !important;
  }

  .wday-scroll {
    gap: 4px;
    padding: 8px 0;
  }

  .wday {
    min-width: 50px !important;
    padding: 3px 5px !important;
  }

  button[style*="weather-legend"] {
    font-size: 0.68em !important;
    padding: 4px 6px !important;
  }

  .item-info {
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
}

/* ============================================================================
   COLOR CONSISTENCY - Subtle background variants
   ============================================================================ */

/* Primary dark background - keep pure black for main sections */
.greeting-section,
.home-production-card,
.anmerkung {
  background: #000 !important;
}

/* Secondary: Very subtle lighter variant for cards */
.dashboard-doc-card {
  background: #000 !important;
}

/* Weather widget sections - keep black */
.weather-widget div[style*="flex:1 1 260px"] {
  background: #000 !important;
}

.wday {
  background: #000 !important;
}

/* Override all inline background styles within weather components */
.weather-widget {
  background: transparent !important;
}

.weather-widget > div {
  background: transparent !important;
}

.weather-widget > div > div {
  background: transparent !important;
}

.weather-widget div[style] {
  /* Don't override weather widget internals */
}

/* ============================================================================
   ACCENT COLORS - Preserve green and gold
   ============================================================================ */

.home-production-badge {
  border: 1px solid currentColor !important;
  padding: 5px 9px !important;
  border-radius: 9px !important;
}

.dashboard-production-card-kicker {
  color: #e05555 !important;
}

.dashboard-doc-card-kicker {
  color: #c8a84b !important;
}

/* ============================================================================
   TEXT & TYPOGRAPHY ADJUSTMENTS
   ============================================================================ */

.home-production-name {
  font-weight: 700;
  color: #f5f5f5;
}

.home-production-meta {
  font-size: 0.8rem;
  color: #8d8d8d;
  line-height: 1.4;
}

.home-production-copy {
  font-size: 0.76rem;
  color: #a2a2a2;
  margin-top: 5px;
}

/* ============================================================================
   UTILITY: Remove all display borders on production alert items
   ============================================================================ */

.home-production-alert {
  border-top: none !important;
  padding: 10px 0;
  transition: background-color 0.15s ease;
  border-radius: 4px;
}

.home-production-alert:hover {
  background-color: #000;
}

.home-production-alert:first-of-type {
  border-top: none !important;
}

/* ============================================================================
   REFINEMENTS
   ============================================================================ */

/* Subtle divider lines instead of heavy borders */
.home-production-alert {
  position: relative;
}

.home-production-alert:not(:last-child)::after {
  content: '';
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
}

/* Smooth focus states */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #c8a84b;
  outline-offset: 2px;
}