/* ===========================
   Global variables & base
   =========================== */
:root {
  --pad: 12px;
  --br: 12px;
  --muted: #666;
  --border: #ddd;
  --border-soft: #e5e7eb;
  --bg: #fff;
  --bg-soft: #f7f7f7;
  --bg-hover: #eee;
  --text: #000;
  --link: #1f6feb;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  padding: 20px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}
.muted { color: var(--muted); }
.hide-sm { display: none; }
@media (min-width: 901px) { .hide-sm { display: table-cell; } }

/* ===========================
   Layout helpers
   =========================== */
.card {
  border: 1px solid var(--border);
  border-radius: var(--br);
  padding: var(--pad);
  background: #fff;
}
.card.wide { max-width: none !important; }
.bar {
  display: grid;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}
@media (min-width: 901px) {
  .bar { grid-template-columns: 1fr auto; }
}

/* Boxes used on import pages */
.box {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
}

/* --- Alerts & Badges --- */
.alert { border-radius:10px; padding:.75rem 1rem; border:1px solid var(--ci-border); }
.alert-info { background: color-mix(in oklab, var(--ci-primary), #fff 85%); }
.alert-success { background: #16a34a; }
.alert-warning { background:#fff7ed; border-color:#fed7aa; color:#7c2d12; }
.alert-danger { background:#fef2f2; border-color:#fecaca; color:#7f1d1d; }



/* ===========================
   Forms & buttons
   =========================== */
label { display: block; font-weight: 600; margin: 10px 0 6px; }
input[type="text"], input[type="number"], input[type="email"], input[type="password"], select, textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #d8dde6;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
}
input[type="file"] { padding: 8px; border: 1px dashed #bbb; border-radius: 8px; width: 100%; margin-bottom: 12px; }
button, .btn {
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid #bbb;
  background: var(--bg-soft);
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  display: inline-block;
}
button:hover, .btn:hover { background: var(--bg-hover); }
.btn-sm { padding: 8px 12px; }
.btn-primary { background: var(--link); color: #fff; border-color: var(--link); }
.btn-primary:hover { filter: brightness(0.95); }
.btn-danger { background: #dc2626; color:#fff; border:1px solid #dc2626; }
.btn-danger:hover { background: #ff4040; border:1px solid #dc2626; }
.link { color: var(--link); text-decoration: none; }
.link:hover { text-decoration: underline; }

/* grid helpers used in edit pages */
.row   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3  { display: flex; /*grid; grid-template-columns: 1fr 1fr 1fr;*/ gap: 12px; }
@media (max-width: 900px) { .row, .row3 { grid-template-columns: 1fr; } }

/* Messages / toasts */
.msg { margin: 10px 0; padding: 10px; border-radius: 8px; }
.msg.ok  { background: #e9f9ee; border: 1px solid #b7e2c3; }
.msg.err { background: #f9e9e9; border: 1px solid #e2b7b7; }

/* ===========================
   Tables & pagination
   =========================== */
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: 10px; border-bottom: 1px solid #eee; text-align: left; }
th { white-space: nowrap; font-weight: 600; background: #f8fafc; }
th a { color: inherit; text-decoration: none; }
th a:hover { text-decoration: underline; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.pager { display: flex; gap: 8px; align-items: center; }
.pager a { text-decoration: none; padding: 6px 10px; border: 1px solid #ccc; border-radius: 8px; }
.table-sm th, .table-sm td { font-size: 13px; }

/* Pills */
.status-pill, .pill {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  display: inline-block;
  border: 1px solid #ccc;
}
.ok  { background: #e9f9ee; border-color: #b7e2c3; }
.off { background: #f9e9e9; border-color: #e2b7b7; }
.bad { background: #fee2e2; }

/* ===========================
   Top header nav (admin_nav.php)
   =========================== */
.topnav { position: sticky; top: 0; z-index: 1000; background: #0f172a; color: #fff; }
.topnav .wrap { display: flex; align-items: center; gap: 14px; padding: 10px 16px; max-width: 1200px; margin: 0 auto; }
.brand { font-weight: 700; letter-spacing: .2px; }
.nav { display: flex; gap: 4px; }
.nav a { color: #cbd5e1; text-decoration: none; padding: 8px 10px; border-radius: 8px; display: inline-block; }
.nav a:hover { background: #1e293b; color: #fff; }
.nav a.active { background: #334155; color: #fff; }
.spacer { flex: 1; }
.user { display: flex; align-items: center; gap: 8px; color: #cbd5e1; }
.badge { font-size: 12px; padding: 2px 8px; border: 1px solid #475569; border-radius: 999px; color: #e2e8f0; }
.hamburger { display: none; border: 1px solid #475569; border-radius: 8px; background: #0f172a; color: #e2e8f0; padding: 6px 10px; cursor: pointer; }
@media (max-width: 900px) {
  .bar { grid-template-columns: 1fr; }
  .nav { display: none; flex-direction: column; gap: 6px; padding: 10px 0; }
  .nav.open { display: flex; }
  .hamburger { display: inline-block; }
}

/* ===========================
   Little utilities
   =========================== */
.hint { color: #555; font-size: 0.9em; }
/* optional: nicer JSON blocks in audit table */
pre { white-space: pre-wrap; word-break: break-word; background: #f9fafb; border: 1px solid #e5e7eb; padding: 8px; border-radius: 8px; margin: 0; }

/* ===========================
   Auth / Login pages
   (namespaced to avoid clashes)
   =========================== */
.auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  padding: 24px;
}
.auth .card {
  background: #fff;
  padding: 32px 28px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  width: 100%;
  max-width: 380px;
  border: 1px solid var(--border-soft);
}
.auth .logo {
  display: block;
  margin: 0 auto 18px auto;
  max-width: 220px;
}
.auth h1 {
  font-size: 20px;
  margin: 0 0 18px 0;
  text-align: center;
}
.auth .field { margin-bottom: 14px; }
.auth label { display: block; font-size: 13px; margin-bottom: 6px; color: #444; }
.auth input[type="text"], .auth input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d8dde6;
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
}
.auth .btn-primary, .auth .btn-danger {
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 12px;
  font-weight: 600;
}
.auth .error {
  background: #fde8e8;
  color: #991b1b;
  border: 1px solid #f8b4b4;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 14px;
}
.auth .foot {
  margin-top: 14px;
  text-align: center;
  font-size: 12px;
  color: #666;
}

/* ===========================
   Consolidation utilities for admin pages
   =========================== */

/* Page padding & containers */
.page { padding: 20px; }
.page-lg { padding: 24px; }
.container { max-width: 1200px; margin: 0 auto; }
.max-560 { max-width: 560px; }
.max-800 { max-width: 800px; }
.max-900 { max-width: 900px; }

/* Auto grids for dashboards/list pages */
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.grid-auto-lg { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }

/* Forms */
.form { max-width: 560px; }
.field { margin-bottom: 12px; }

/* Toolbars */
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; }

/* === Partners pagination === */
.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

.pager nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.pager .btn.small {
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.4;
}

.pager .btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.pager .btn.current {
  background: #e5e7eb; /* light gray highlight */
  pointer-events: none;
  opacity: 0.75;
}

@media (max-width: 640px) {
  .pager {
    gap: 6px;
  }
}

/* === Products add/edit utilities === */
.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  min-width: 220px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #eefbea;
  color: #074b22;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.toast.ok { background: #eefbea; color: #074b22; }
.toast.err { background: #ffecec; color: #7a0c0c; }

.req {
  color: #cc0000;
  margin-left: 2px;
}

/* If not already defined in your stylesheet */
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px){
  .row2, .row3 { grid-template-columns: 1fr; }
}