/* Basic modern styles for KGA shortcodes */
:root {
  --kga-bg: #ffffff;
  --kga-surface: #f8fafc;
  --kga-border: #e2e8f0;
  --kga-text: #0f172a;
  --kga-muted: #475569;
  --kga-primary: #2563eb;
  --kga-primary-contrast: #ffffff;
  --kga-success: #16a34a;
  --kga-error: #dc2626;
}

.kga-meter, .kga-devices, .kga-bookings-admin, .kga-board, .kga-incidents, .kga-meter-export {
  background: var(--kga-bg);
  border: 1px solid var(--kga-border);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  margin: 16px 0;
}

.kga-meter h3, .kga-devices h3, .kga-bookings-admin h3, .kga-board h3, .kga-incidents h3, .kga-meter-export h3,
.kga-meter h4 { color: var(--kga-text); margin-top: 0; }

.kga-meter form p, .kga-meter-export form p { margin: 10px 0; }

.kga-meter label, .kga-meter-export label { display: block; font-weight: 600; color: var(--kga-muted); margin-bottom: 6px; }

.kga-meter input[type="text"],
.kga-meter input[type="number"],
.kga-meter select,
.kga-meter-export input[type="number"],
.kga-meter-export select {
  width: 100%;
  max-width: 420px;
  padding: 10px 12px;
  border: 1px solid var(--kga-border);
  border-radius: 8px;
  background: var(--kga-surface);
  color: var(--kga-text);
}

.kga-meter input[type="file"] { display: block; }

.kga-meter .button.button-primary,
.kga-meter-export .button.button-primary {
  background: var(--kga-primary);
  color: var(--kga-primary-contrast);
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
}

.kga-meter .button.button-primary:hover,
.kga-meter-export .button.button-primary:hover {
  filter: brightness(0.95);
}

.notice.notice-success { border-left-color: var(--kga-success); }
.notice.notice-error { border-left-color: var(--kga-error); }

/* Tables */
.kga-meter table.widefat,
.kga-meter-export table.widefat {
  border: 1px solid var(--kga-border);
  border-radius: 8px;
  overflow: hidden;
}
.kga-meter table.widefat thead th,
.kga-meter table.widefat tfoot th {
  background: var(--kga-surface);
}
.kga-meter table.widefat td, .kga-meter table.widefat th { padding: 10px; }

/* Responsive */
@media (max-width: 600px) {
  .kga-meter input[type="text"],
  .kga-meter input[type="number"],
  .kga-meter select { max-width: 100%; }
}

/* Calendar */
.kga-calendar { margin-top: 10px; }
.kga-cal-header { font-weight: 600; margin-bottom: 6px; color: var(--kga-text); }
.kga-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.kga-cal-cell { border: 1px solid var(--kga-border); border-radius: 8px; padding: 6px; background: var(--kga-surface); min-height: 60px; position: relative; }
.kga-cal-dow { background: var(--kga-bg); text-align: center; }
.kga-cal-empty { background: transparent; border: none; }
.kga-cal-date { font-weight: 600; font-size: 12px; color: var(--kga-muted); }
.kga-cal-meta { font-size: 12px; margin-top: 4px; }
.kga-cal-cell.kga-free { background: #ecfdf5; border-color: #10b981; }
.kga-cal-cell.kga-busy { background: #fef2f2; border-color: #ef4444; }
.kga-cal-legend { display:flex; gap:8px; align-items:center; margin: 8px 0; }
.kga-cal-dot { width: 12px; height: 12px; border-radius: 3px; display:inline-block; border:1px solid var(--kga-border); }
.kga-cal-dot.free { background:#ecfdf5; border-color:#10b981; }
.kga-cal-dot.busy { background:#fef2f2; border-color:#ef4444; }

/* Lightbox (CSS :target) */
.kga-lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: none; justify-content: center; align-items: center; padding: 20px; z-index: 9999; }
.kga-lightbox-overlay img { max-width: 90vw; max-height: 90vh; border-radius: 8px; box-shadow: 0 4px 24px rgba(0,0,0,0.4); }
.kga-lightbox-overlay:target { display: flex; }
.kga-lb-close { position: absolute; top: 20px; right: 24px; color: #fff; text-decoration: none; font-size: 28px; }

/* Timeline */
.kga-timeline { border-left: 2px solid var(--kga-border); margin: 8px 0 0 8px; padding-left: 12px; }
.kga-timeline .kga-tl-item { position: relative; margin-bottom: 8px; }
.kga-timeline .kga-tl-item::before { content: ""; position: absolute; left: -13px; top: 4px; width: 8px; height: 8px; background: var(--kga-primary); border-radius: 999px; }
.kga-inc-meta { font-size: 12px; color: var(--kga-muted); }