/* assets/css/emp-stats.css
 * Ziel: Admin-optimiertes, kompaktes Dashboard-Layout für Statistik
 * - Filter oben als Grid (nicht "links klebend")
 * - KPI-Reihe kompakt
 * - Charts in 2 Spalten, Einsatzliste rechts (bei großen Screens)
 * - Sticky Table Header, bessere Lesbarkeit
 * - Sauberes Responsive + Print
 */

:root{
  --emp-border: #dcdcde;
  --emp-bg: #ffffff;
  --emp-muted: #646970;
  --emp-text: #1d2327;

  --emp-red: #d63638;
  --emp-blue: #2271b1;
  --emp-green: #46b450;
  --emp-amber: #f39200;

  --emp-radius: 10px;
  --emp-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Wrapper */
.emp-stats-wrap{
  max-width: 1480px;
  margin: 16px 20px 24px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--emp-text);
}

/* Header */
.emp-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.emp-header h2{
  margin:0;
  font-size:18px;
  line-height:1.2;
}
.emp-print-btn .dashicons{ margin-top: 4px; }

/* ---------------------------
   Filterbar (Grid, Admin-like)
   --------------------------- */
.emp-filter-bar{
  background: var(--emp-bg);
  border: 1px solid var(--emp-border);
  border-radius: var(--emp-radius);
  padding: 12px;
  margin-bottom: 14px;

  display:grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr)) minmax(220px, 1fr);
  gap: 10px 12px;
  align-items:end;
}

.emp-filter-group{
  min-width: 0; /* verhindert Overflow in Grid */
}
.emp-filter-group label{
  font-size: 11px;
  font-weight: 700;
  color: #50575e;
  display:block;
  margin-bottom: 4px;
  letter-spacing: .02em;
}
.emp-filter-group select{
  width: 100%;
  max-width: 100%;
}

.emp-filter-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  align-items:center;
}
.emp-filter-actions .button{
  text-align:center;
  justify-content:center;
}

/* ---------------------------
   KPI
   --------------------------- */
.emp-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.emp-card{
  background: var(--emp-bg);
  border: 1px solid var(--emp-border);
  border-radius: var(--emp-radius);
  padding: 14px;
  box-shadow: var(--emp-shadow);
  box-sizing:border-box;
}

.emp-card h3{
  margin:0 0 10px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f1;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--emp-muted);
  letter-spacing: .03em;
}

/* KPI cards: links Akzent statt bottom border (wirkt adminiger, weniger "bunt") */
.emp-kpi{
  text-align:left;
  border-left: 4px solid var(--emp-red);
  padding-left: 12px;
}
.emp-kpi-val{
  font-size: 24px;
  font-weight: 900;
  margin-top: 6px;
  line-height:1.05;
}
.emp-kpi-label{
  font-size: 11px;
  color: var(--emp-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.emp-kpi--fault{ border-left-color: var(--emp-amber); }
.emp-kpi--fault .emp-kpi-val{ color: var(--emp-amber); }

.emp-kpi--real{ border-left-color: var(--emp-green); }
.emp-kpi--real .emp-kpi-val{ color: var(--emp-green); }

.emp-kpi--fz{ border-left-color: var(--emp-blue); }
.emp-kpi--fz .emp-kpi-val{ color: var(--emp-blue); }

/* ---------------------------
   Main layout (Charts + Liste)
   --------------------------- */
.emp-main-layout{
  display:grid;
  grid-template-columns: 1fr 1fr 1.2fr; /* Liste etwas breiter */
  gap: 12px;
  align-items:start;
}

.emp-col{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.emp-list-card{}

/* Charts */
.emp-chart-container{
  position:relative;
  height: 240px; /* kompakter */
  width:100%;
}

/* ---------------------------
   Liste
   --------------------------- */
.emp-list-container{
  max-height: 520px;
  overflow:auto;
  border-radius: 8px;
}

.emp-table-mini{
  width:100%;
  border-collapse:collapse;
  font-size: 12px;
  table-layout:auto; /* fixed macht im Admin oft unnötig kaputt */
}

.emp-table-mini thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  text-align:left;

  font-size: 11px;
  color: var(--emp-muted);
  border-bottom: 2px solid #f0f0f1;
  padding: 10px 8px;
  white-space: nowrap;
}

.emp-table-mini td{
  padding: 10px 8px;
  vertical-align: top;
  border-bottom: 1px solid #f0f0f1;
}

.emp-table-mini .col-nr{ width: 120px; }
.emp-table-mini .col-date{ width: 90px; }
.emp-table-mini .col-wehr{ width: 160px; }

.emp-table-mini .entry-nr{
  font-weight: 900;
  color: var(--emp-blue);
  white-space: nowrap;
}
.emp-table-mini .entry-date{
  color: var(--emp-muted);
  white-space: nowrap;
}
.emp-table-mini .entry-wehr{
  color: var(--emp-red);
  font-weight: 800;
  white-space: nowrap;
}
.emp-table-mini .entry-title a{
  text-decoration:none;
  color: var(--emp-blue);
}
.emp-table-mini .entry-title a:hover{
  text-decoration: underline;
}

.emp-row--fault{
  background: #fffcf5;
}

.emp-empty-row{
  padding: 18px;
  text-align:center;
  color: var(--emp-muted);
}

/* ---------------------------
   Responsive
   --------------------------- */
@media (max-width: 1400px){
  .emp-main-layout{
    grid-template-columns: 1fr 1fr;
  }
  .emp-list-card{
    grid-column: 1 / -1;
  }

  .emp-filter-bar{
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
  .emp-filter-actions{
    justify-content:flex-start;
  }
}

@media (max-width: 960px){
  .emp-grid{
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}

@media (max-width: 782px){
  .emp-stats-wrap{
    margin-right: 10px;
  }
  .emp-grid{
    grid-template-columns: 1fr;
  }
  .emp-main-layout{
    grid-template-columns: 1fr;
  }
  .emp-filter-bar{
    grid-template-columns: 1fr;
  }
  .emp-filter-actions{
    justify-content: stretch;
    flex-wrap: wrap;
  }
  .emp-filter-actions .button{
    width: 100%;
  }
  .emp-chart-container{
    height: 260px; /* etwas mehr Platz für mobile */
  }
}

/* ---------------------------
   Print
   --------------------------- */
@media print{
  #adminmenumain, #wpadminbar, .emp-filter-bar, .emp-print-btn, .button-primary, .button{
    display:none !important;
  }
  #wpcontent{ margin-left:0 !important; padding:0 !important; }

  .emp-stats-wrap{ margin:0; padding:0; max-width:100%; }
  .emp-grid{ grid-template-columns: repeat(4, 1fr) !important; gap: 8px; }
  .emp-main-layout{ grid-template-columns: 1fr 1fr !important; gap: 10px; }

  .emp-list-card{ grid-column: 1 / -1 !important; margin-top: 10px; }
  .emp-list-container{ max-height:none !important; overflow:visible !important; }

  .emp-card{
    border:1px solid #ccc !important;
    box-shadow:none !important;
    break-inside:avoid;
  }
  .emp-table-mini{
    font-size: 10px;
  }
  .emp-table-mini a{
    color:#000 !important;
    text-decoration:none !important;
  }
  canvas{
    max-width:100% !important;
    height:auto !important;
  }
}

.emp-stats--frontend .emp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:8px;
  border:1px solid #ccd0d4;
  background:#fff;
  color:#1d2327;
  text-decoration:none;
  font-weight:700;
  cursor:pointer;
  line-height:1;
}
.emp-stats--frontend .emp-btn--primary{
  background:#2271b1;
  border-color:#2271b1;
  color:#fff;
}
.emp-stats--frontend .emp-btn:hover{ filter:brightness(0.98); }