/* ============================================================
   Billigfones.dk Admin - Design System
   ============================================================ */
:root {
  --c-primary:#0b3d91; --c-primary-dark:#082c69; --c-primary-light:#1e6dd8;
  --c-accent:#f1c40f;  --c-bg:#f0f3f8; --c-surface:#fff; --c-surface-2:#f3f4f6;
  --c-border:#e5e7eb;  --c-border-strong:#d1d5db;
  --c-text:#1f2937; --c-text-mute:#6b7280; --c-text-soft:#9ca3af;
  --c-success-bg:#d1fae5; --c-success-fg:#065f46;
  --c-warning-bg:#fef3c7; --c-warning-fg:#7c5e00;
  --c-info-bg:#e0e7ff; --c-info-fg:#3730a3;
  --c-danger-bg:#fee2e2; --c-danger-fg:#991b1b;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 12px rgba(0,0,0,.06);
  --shadow-lg:0 12px 28px rgba(0,0,0,.10);
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;background:var(--c-bg);color:var(--c-text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}

/* LOGIN */
body.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(135deg,var(--c-primary) 0%,var(--c-primary-light) 100%)}
.login-card{background:#fff;width:100%;max-width:400px;padding:36px 32px;border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(0,0,0,.18)}
.login-card .brand{text-align:center;margin-bottom:22px}
.login-card .brand img{max-height:60px}
.login-card .brand h1{margin:8px 0 4px;color:var(--c-primary);font-size:18px;font-weight:700}
.login-card .brand p{color:var(--c-text-mute);font-size:13px}
.login-card label{display:block;margin:14px 0 6px;font-size:13px;color:#374151;font-weight:600}
.login-card input{width:100%;padding:11px 13px;border:1px solid var(--c-border-strong);border-radius:var(--r-sm);font-size:14px;transition:.15s}
.login-card input:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(11,61,145,.12)}
.login-card .btn{width:100%;margin-top:18px}
.foot-link{text-align:center;margin-top:14px;font-size:13px;color:var(--c-text-mute)}
.foot-link a{color:var(--c-primary);font-weight:600}
.foot-link a:hover{text-decoration:underline}

/* TOPBAR + NAV */
.topbar{background:var(--c-primary);color:#fff;padding:10px 22px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;box-shadow:var(--shadow-sm)}
.brand-row{display:flex;align-items:center;gap:10px}
.brand-row a{color:#fff;display:flex;align-items:center;gap:10px}
.brand-row img{height:36px;background:#fff;padding:4px 10px;border-radius:var(--r-sm)}
.brand-row h1{margin:0;font-size:18px;font-weight:700}
.tag{background:rgba(255,255,255,.18);padding:3px 8px;border-radius:4px;font-size:11px;letter-spacing:.5px}
.topnav{display:flex;gap:2px;flex-wrap:wrap}
.topnav a{color:#cfd9ee;padding:7px 13px;border-radius:var(--r-sm);font-size:14px;font-weight:500;transition:.15s}
.topnav a:hover{background:rgba(255,255,255,.12);color:#fff}
.topnav a.on{background:rgba(255,255,255,.2);color:#fff}
.user-row{display:flex;align-items:center;gap:8px;font-size:13px}

.container{max-width:1300px;margin:24px auto;padding:0 18px}

/* CARD */
.card{background:var(--c-surface);border-radius:var(--r-lg);padding:22px;margin-bottom:18px;box-shadow:var(--shadow-sm);border:1px solid var(--c-border)}
.card h2{margin:0 0 4px;color:var(--c-primary);font-size:18px}
.card h3{margin:0 0 8px;color:#374151;font-size:14px}
.hint{color:var(--c-text-mute);font-size:13px;margin:0 0 14px}
.head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;padding:6px 0}

/* BUTTONS */
.btn{cursor:pointer;border:0;padding:9px 16px;border-radius:var(--r-sm);font-size:14px;font-weight:600;margin-right:4px;text-decoration:none;display:inline-block;transition:.15s;font-family:inherit}
.btn.primary{background:var(--c-primary);color:#fff}
.btn.primary:hover{background:var(--c-primary-dark);box-shadow:0 4px 12px rgba(11,61,145,.25)}
.btn.secondary{background:var(--c-surface-2);color:var(--c-text)}
.btn.secondary:hover{background:var(--c-border)}
.btn.danger{background:#ef4444;color:#fff}
.btn.danger:hover{background:#dc2626}
.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.btn.small{padding:5px 11px;font-size:12px}

/* STATS / TILES */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:14px}
.stat{background:var(--c-surface-2);border:1px solid var(--c-border);padding:18px;border-radius:var(--r-md);text-align:center}
.stat .num{font-size:28px;color:var(--c-primary);font-weight:700;line-height:1.1}
.stat .lbl{font-size:13px;color:var(--c-text-mute);margin-top:4px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.tile{display:block;background:#fff;border:1px solid var(--c-border);padding:18px;border-radius:var(--r-md);color:var(--c-text);transition:.15s}
.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--c-primary)}
.tile .ic{font-size:30px;margin-bottom:6px}
.tile .ti{font-weight:700;color:var(--c-primary);margin-bottom:4px}
.tile .ds{font-size:13px;color:var(--c-text-mute)}

/* TABLES */
.tbl{width:100%;border-collapse:collapse;margin-top:8px;font-size:14px}
.tbl th{background:var(--c-surface-2);text-align:left;padding:10px 8px;font-size:12px;color:var(--c-text-mute);text-transform:uppercase;letter-spacing:.3px;border-bottom:1px solid var(--c-border)}
.tbl td{padding:10px 8px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
.tbl tr:hover td{background:#fafbfd}
.tbl .actions{text-align:right;white-space:nowrap}
.tbl code{font-size:12px;background:var(--c-surface-2);padding:2px 6px;border-radius:3px;color:#374151}

.pill{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:600;background:var(--c-surface-2);color:#374151}
.pill.ok  {background:var(--c-success-bg);color:var(--c-success-fg)}
.pill.no  {background:var(--c-danger-bg);color:var(--c-danger-fg)}
.pill.warn{background:var(--c-warning-bg);color:var(--c-warning-fg)}
.pill.info{background:#dbeafe;color:#1e40af}

/* FILTER + PAGER */
.filter{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.filter input,.filter select{padding:8px 10px;border:1px solid var(--c-border-strong);border-radius:var(--r-sm);font-size:14px}
.filter input{min-width:240px}
.pager{margin-top:14px;display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.pager a{padding:6px 11px;border:1px solid var(--c-border);border-radius:var(--r-sm);color:#374151;font-size:13px}
.pager a.on{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}

/* FORMS */
.fg{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fg .full{grid-column:1/-1}
.fg label{display:block;margin-bottom:6px;font-size:13px;color:#374151;font-weight:600}
.fg input,.fg select,.fg textarea{width:100%;padding:9px 11px;border:1px solid var(--c-border-strong);border-radius:var(--r-sm);font-size:14px;font-family:inherit;transition:.15s}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(11,61,145,.1)}
@media(max-width:700px){.fg{grid-template-columns:1fr}}
form label{display:block;margin:12px 0 6px;font-size:13px;color:#374151;font-weight:600}
form input[type=text],form input[type=email],form input[type=password],form input[type=number],form textarea,form select{width:100%;padding:10px 12px;border:1px solid var(--c-border-strong);border-radius:var(--r-sm);font-size:14px;font-family:inherit;transition:.15s}
form input:focus,form textarea:focus,form select:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(11,61,145,.1)}

/* ALERTS */
.alert{margin:0 0 14px;padding:12px 14px;border-radius:var(--r-sm);font-size:14px;display:flex;align-items:center;gap:10px}
.alert.success{background:var(--c-success-bg);color:var(--c-success-fg);border:1px solid #a7f3d0}
.alert.error{background:var(--c-danger-bg);color:var(--c-danger-fg);border:1px solid #fecaca}
.alert.info{background:#dbeafe;color:#1e40af;border:1px solid #bfdbfe}
.alert.warning{background:var(--c-warning-bg);color:var(--c-warning-fg);border:1px solid #fde68a}

/* NEWSLETTER PRODUCTS TABLE */
.np{width:100%;border-collapse:collapse;margin-bottom:14px}
.np th{text-align:left;padding:8px;font-size:12px;color:var(--c-text-mute);text-transform:uppercase;letter-spacing:.3px;border-bottom:1px solid var(--c-border)}
.np td{padding:6px 4px;vertical-align:top}
.np input{width:100%;padding:8px 10px;border:1px solid var(--c-border-strong);border-radius:var(--r-sm);font-size:14px}
.np .imgcell{width:100px}
.imgprev{width:80px;height:80px;border:1px dashed #cbd5e1;border-radius:var(--r-sm);background:#f8fafc;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:6px}
.imgprev img{width:100%;height:100%;object-fit:cover}
.imgph{color:#94a3b8;font-size:28px;font-weight:300}
.np input[type=file]{width:100%;font-size:11px;padding:2px;border:0}

.preview-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px}
@media(max-width:800px){.preview-grid{grid-template-columns:1fr}}
.preview-frame{border:1px solid var(--c-border);border-radius:var(--r-sm);max-height:560px;overflow:auto;background:var(--c-surface-2)}
.wa{background:#e7f8d3;border:1px solid #c7e2a3;border-radius:var(--r-md);padding:14px;font-family:"Segoe UI",Arial,sans-serif;white-space:pre-wrap;font-size:14px;color:#111;margin:0 0 10px;max-height:520px;overflow:auto}

.footer{text-align:center;padding:20px;font-size:12px;color:var(--c-text-soft)}

@media(max-width:760px){
  .topbar{padding:10px 14px;gap:8px}
  .container{margin:14px auto;padding:0 12px}
  .topnav a{padding:6px 9px;font-size:13px}
  .card{padding:16px}
}