/* SEO Basic Reporting – Stylesheet */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue:       #2563eb;
  --blue-dark:  #1d4ed8;
  --blue-light: #eff6ff;
  --red:        #dc2626;
  --red-light:  #fef2f2;
  --green:      #16a34a;
  --green-light:#f0fdf4;
  --gray-50:    #f8fafc;
  --gray-100:   #f1f5f9;
  --gray-200:   #e2e8f0;
  --gray-400:   #94a3b8;
  --gray-600:   #475569;
  --gray-800:   #1e293b;
  --font:       -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius:     8px;
  --shadow:     0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
}

body {
  font-family: var(--font);
  background:  var(--gray-50);
  color:       var(--gray-800);
  font-size:   14px;
  line-height: 1.5;
}

/* Login */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-card { background:#fff; padding:2.5rem; border-radius:12px; box-shadow:var(--shadow-md); width:100%; max-width:400px; }
.login-logo  { font-size:2rem; text-align:center; margin-bottom:.5rem; }
.login-title { text-align:center; font-size:1.25rem; font-weight:700; margin-bottom:1.5rem; color:var(--gray-800); }

/* Navbar */
.navbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         .75rem 1.5rem;
  background:      #fff;
  border-bottom:   3px solid var(--blue);
  box-shadow:      var(--shadow);
  position:        sticky;
  top:0;
  z-index:100;
}
.navbar-brand  { font-weight:800; font-size:.95rem; color:var(--blue); text-decoration:none; letter-spacing:-.3px; }
.navbar-links  { display:flex; align-items:center; gap:1rem; }
.nav-link      { color:var(--gray-600); text-decoration:none; font-size:.8rem; font-weight:600; }
.nav-link:hover{ color:var(--blue); }
.navbar-user   { font-size:.7rem; font-weight:700; color:var(--gray-400); letter-spacing:.05em; }

/* Main */
.main-content { max-width:1400px; margin:0 auto; padding:1.5rem; }

/* Page header */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
.page-title  { font-size:1.4rem; font-weight:800; color:var(--gray-800); }

/* Alerts */
.alert { padding:.75rem 1rem; border-radius:var(--radius); font-size:.85rem; margin-bottom:1rem; }
.alert-success { background:var(--green-light); color:var(--green); border:1px solid #bbf7d0; }
.alert-error   { background:var(--red-light);   color:var(--red);   border:1px solid #fecaca; }

/* Cards */
.card       { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:1.5rem; }
.card-body  { padding:1.5rem; }

/* Filter bar */
.filter-bar {
  display:     flex;
  flex-wrap:   wrap;
  gap:         .5rem;
  align-items: center;
  padding:     1rem 1.25rem;
  background:  var(--gray-50);
  border:      1px solid var(--gray-200);
  border-radius: var(--radius);
  margin-bottom: 1rem;
}
.filter-count { font-size:.7rem; font-weight:700; color:var(--gray-400); margin-left:auto; }

/* Table */
.table-wrap { overflow-x:auto; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); }
.table { width:100%; border-collapse:collapse; }
.table thead { background:var(--gray-50); border-bottom:2px solid var(--gray-200); }
.table th { padding:.75rem 1rem; font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--gray-400); white-space:nowrap; }
.table td { padding:.75rem 1rem; border-bottom:1px solid var(--gray-100); vertical-align:middle; }
.table tbody tr:hover { background:var(--blue-light); }
.table tbody tr:last-child td { border-bottom:none; }
.table-sm td, .table-sm th { padding:.4rem .75rem; }

/* Badges */
.badge       { display:inline-block; padding:.2rem .5rem; border-radius:9999px; font-size:.65rem; font-weight:700; }
.badge-green { background:var(--green-light); color:var(--green); }
.badge-red   { background:var(--red-light);   color:var(--red); }
.badge-gray  { background:var(--gray-100);    color:var(--gray-400); }

/* Forms */
.field-group  { display:flex; flex-direction:column; margin-bottom:1rem; }
.field-label  { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-600); margin-bottom:.35rem; }
.input        { background:var(--blue-light); border:2px solid var(--gray-200); border-radius:var(--radius); padding:.6rem .85rem; font-size:.875rem; font-family:var(--font); color:var(--gray-800); transition:border .15s, box-shadow .15s; width:100%; }
.input:focus  { outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.input-sm     { padding:.4rem .75rem; font-size:.8rem; }
textarea.input{ resize:vertical; }
.select       { background:var(--blue-light); border:2px solid var(--gray-200); border-radius:var(--radius); padding:.6rem .85rem; font-size:.875rem; font-family:var(--font); color:var(--gray-800); width:100%; }
.select:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.select-sm    { padding:.4rem .75rem; font-size:.8rem; width:auto; }

/* Grids */
.grid   { display:grid; gap:1rem; margin-bottom:1rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: 2fr 7fr 3fr; }
.grid-5 { grid-template-columns: 1fr 1fr 2fr 2fr 1fr; }
.grid-6 { grid-template-columns: 1fr 1fr 2fr 2fr 1fr 1fr; }
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-5, .grid-6 { grid-template-columns: 1fr; }
}

/* Checkboxes */
.checkbox-group { display:flex; flex-wrap:wrap; gap:1.5rem; padding:1.25rem; background:var(--blue-light); border-radius:var(--radius); border:2px solid var(--gray-200); margin-bottom:1rem; }
.checkbox-label { display:flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; cursor:pointer; }
.checkbox-label input { width:1rem; height:1rem; cursor:pointer; }

/* Buttons */
.btn         { display:inline-flex; align-items:center; gap:.4rem; padding:.55rem 1.1rem; border-radius:var(--radius); font-size:.8rem; font-weight:700; cursor:pointer; border:none; text-decoration:none; transition:background .15s, opacity .15s; white-space:nowrap; }
.btn-primary { background:var(--blue); color:#fff; }
.btn-primary:hover { background:var(--blue-dark); }
.btn-secondary{ background:var(--gray-100); color:var(--gray-600); border:2px solid var(--gray-200); }
.btn-secondary:hover { background:var(--gray-200); }
.btn-ghost   { background:transparent; color:var(--gray-600); border:2px solid var(--gray-200); }
.btn-ghost:hover { background:var(--gray-100); }
.btn-danger  { background:var(--red); color:#fff; }
.btn-danger:hover { opacity:.85; }
.btn-sm      { padding:.35rem .75rem; font-size:.75rem; }
.btn-block   { width:100%; justify-content:center; }
button[disabled] { opacity:.5; cursor:not-allowed; }

/* Form actions */
.form-actions { display:flex; gap:.75rem; align-items:center; padding-top:1.25rem; flex-wrap:wrap; }

/* Admin panel */
.admin-panel  { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:1.25rem; margin-top:2rem; border-top:3px solid var(--gray-200); }
.admin-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:.75rem; }
.section-title{ font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--gray-400); margin-bottom:.75rem; }

/* Log panel */
.log-panel    { margin-top:2rem; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.log-toggle   { padding:1rem 1.25rem; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--gray-400); cursor:pointer; user-select:none; }
.log-toggle:hover { color:var(--gray-600); }

/* Utilities */
.text-xs    { font-size:.75rem; }
.text-sm    { font-size:.85rem; }
.text-muted { color:var(--gray-400); }
.text-red   { color:var(--red); }
.fw-bold    { font-weight:700; }
.text-center{ text-align:center; }
.text-right { text-align:right; }
.pagination-info { font-size:.7rem; color:var(--gray-400); font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.5rem 0; }
code { background:var(--gray-100); padding:.15rem .35rem; border-radius:4px; font-family:monospace; font-size:.85em; }

/* Stat boxes (Import-Ergebnis) */
.stat-box      { display:flex; flex-direction:column; align-items:center; padding:.75rem 1.25rem; border-radius:var(--radius); border:2px solid var(--gray-200); min-width:100px; }
.stat-num      { font-size:1.75rem; font-weight:800; line-height:1; }
.stat-label    { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-400); margin-top:.25rem; }
.stat-green    { background:var(--green-light); border-color:#bbf7d0; }
.stat-green .stat-num { color:var(--green); }
.stat-blue     { background:var(--blue-light); border-color:#bfdbfe; }
.stat-blue .stat-num  { color:var(--blue); }
.stat-gray     { background:var(--gray-100); }
.stat-gray .stat-num  { color:var(--gray-400); }
.stat-red      { background:var(--red-light); border-color:#fecaca; }
.stat-red .stat-num   { color:var(--red); }
.badge-blue    { background:var(--blue-light); color:var(--blue); }

/* Position Badge (Rankings) */
.pos-badge  { display:inline-block; padding:.2rem .6rem; border-radius:9999px; font-size:.75rem; font-weight:800; }
.pos-top3   { background:#dcfce7; color:#15803d; }
.pos-top10  { background:#fef9c3; color:#a16207; }
.pos-other  { background:var(--gray-100); color:var(--gray-600); }

/* Report Sections */
.report-section  { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:1.5rem; margin-bottom:1.5rem; }
.report-title    { font-size:1rem; font-weight:800; color:var(--gray-800); margin-bottom:1rem; }
.report-sub      { font-size:.7rem; font-weight:400; color:var(--gray-400); margin-left:.5rem; }

/* Ampel */
.ampel-dot       { display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:2px; vertical-align:middle; }
.ampel-green     { background:#16a34a; }
.ampel-yellow    { background:#ca8a04; }
.ampel-red       { background:#dc2626; }
.ampel-gray      { background:#94a3b8; }
.ampel-legend    { font-size:.75rem; color:var(--gray-600); display:flex; align-items:center; gap:.25rem; flex-wrap:wrap; }

/* Nav Dropdown */
.nav-dropdown         { position:relative; padding-bottom:.75rem; margin-bottom:-.75rem; }
.nav-dropdown-toggle  { cursor:pointer; user-select:none; }
.nav-dropdown-menu    { display:none; position:absolute; top:100%; left:0; padding-top:.5rem; z-index:200; }
.nav-dropdown-menu-inner { background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius);
                        box-shadow:var(--shadow-md); min-width:180px; padding:.25rem 0; }
.nav-dropdown:hover .nav-dropdown-menu { display:block; }
.nav-dropdown-item    { display:block; padding:.5rem 1rem; font-size:.8rem; font-weight:600;
                        color:var(--gray-600); text-decoration:none; white-space:nowrap; }
.nav-dropdown-item:hover { background:var(--blue-light); color:var(--blue); }
