/* site.css - algemene site-styling voor publieke pagina's + kleine admin-aanpassingen */

/* CSS Custom properties */
:root{
  --bg: #ffffff;
  --page-bg: #fafafa;
  --text: #0f1720;
  --muted: #6b7280;
  --brand: #0a6fb5;
  --brand-600: #085a92;
  --border: #e6eef6;
  --card-bg: #fff;
  --radius: 10px;
  --max-width: 1100px;
  --gap: 18px;
  --shadow-sm: 0 1px 3px rgba(16,24,40,0.04);
  --shadow-md: 0 8px 24px rgba(16,24,40,0.08);
  --focus: 3px solid rgba(10,111,181,0.18);
}

/* Reset-ish */
* { box-sizing: border-box; }
html,body { height:100%; margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:var(--text); background:var(--page-bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--brand); text-decoration:none; }
a:hover { text-decoration:underline; }

/* Container */
.container {
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding: 0 18px;
}

/* Header / Nav */
.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
  position: relative;
}
.site-header .container { display:flex; align-items:center; gap:12px; }
.brand { font-weight:700; font-size:1.125rem; color:var(--brand); }
.site-nav { margin-left:18px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.site-nav a { padding:6px 8px; border-radius:6px; color:var(--text); }
.site-nav a:hover { background:#f1f5f9; color:var(--brand-600); }

/* Utility header right area */
.header-actions { margin-left:auto; display:flex; gap:8px; align-items:center; }

/* Hero / page header */
.page-hero { padding: 28px 0; background: linear-gradient(180deg, rgba(10,111,181,0.03), transparent); }
.page-hero h1 { margin:0; font-size:1.6rem; line-height:1.15; }
.page-hero p { margin:6px 0 0; color:var(--muted); }

/* Grid for products */
.grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap);
}

/* Product card */
.product-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  padding: 14px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.product-card h2 { margin:0; font-size:1.05rem; }
.product-card .price { font-weight:700; color:var(--brand-600); font-size:1.05rem; }
.product-card .sku { color:var(--muted); font-size:0.9rem; }
.product-card .desc { color:var(--muted); font-size:0.95rem; margin-top:6px; flex:1; }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:8px 12px; border-radius:8px; border:1px solid var(--border);
  background: #fff; color:var(--text); cursor:pointer;
  transition: transform .06s ease, box-shadow .06s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-primary {
  background: linear-gradient(180deg,var(--brand),var(--brand-600));
  color: #fff; border-color: rgba(10,111,181,0.9);
}
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--brand);
}

/* Forms */
label { display:block; margin-bottom:8px; font-size:0.95rem; color:var(--text); }
input[type="text"], input[type="number"], input[type="password"], textarea, select {
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--border); background:#fff;
  font-size:0.98rem; color:var(--text);
}
textarea { min-height:100px; resize:vertical; }

/* Tables for admin/public lists */
.table { width:100%; border-collapse:collapse; margin-top:12px; }
.table th, .table td { padding:10px 12px; border-bottom:1px solid #f3f4f6; text-align:left; }
.table thead th { background:#fff; font-weight:700; }

/* Alerts */
.alert { padding:10px 12px; border-radius:8px; margin:12px 0; }
.alert-success { background:#ecfdf5; border:1px solid #bbf7d0; color:#064e3b; }
.alert-error { background:#fff3f0; border:1px solid #ffd2cc; color:#9a1b0a; }

/* Footer */
.site-footer { padding:18px 0; border-top:1px solid var(--border); background:var(--bg); margin-top:36px; }
.site-footer .container { display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* Small utilities */
.muted { color:var(--muted); }
.text-center { text-align:center; }
.kv { display:flex; gap:8px; align-items:center; }
.badge { display:inline-block; padding:4px 8px; border-radius:999px; background:#f1f5f9; color:var(--muted); font-size:0.85rem; }

/* Responsive adjustments */
@media (max-width:860px) {
  .site-nav { display:none; } /* keep header simple; optionally show a mobile menu */
  .site-header .container { justify-content:space-between; }
  .page-hero { padding:18px 0; }
}

/* Accessibility focus */
:focus { outline: none; box-shadow: var(--focus); border-radius:6px; }

/* Small form layout helpers */
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start; }
@media (max-width:640px) { .form-row { grid-template-columns:1fr; } }

/* Breadcrumbs */
.breadcrumbs { display:flex; gap:8px; align-items:center; font-size:0.95rem; color:var(--muted); margin-bottom:12px; }
.breadcrumbs a { color:var(--muted); text-decoration:none; }

/* Pagination */
.pagination { display:flex; gap:8px; align-items:center; padding:12px 0; justify-content:center; }
.pagination a { padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:#fff; }

/* small print / helper */
.small { font-size:0.9rem; color:var(--muted); }

/* Ensure admin topbar spacing aligns with site header if included */
.admin-topbar { margin-top:8px; }

/* Print adjustments (complements print.css) */
@media print {
  body { background:#fff; color:#000; }
  .site-nav, .btn, .admin-topbar, .admin-actions { display:none !important; }
  .container { max-width:100% !important; padding:0; }
}

/* End of site.css */