/* ============================================================
   Rentpro WebshopAudit – Custom stylesheet
   ============================================================ */

:root {
    --rp-primary: #1a2340;
    --rp-accent:  #0dcaf0;
    --rp-success: #198754;
    --rp-warning: #fd7e14;
    --rp-danger:  #dc3545;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.875rem;
    color: #2d3748;
    margin-bottom: 0;
}

/* ---- Sidebar ---- */
.sidebar-link {
    color: #4a5568;
    padding: 0.45rem 1rem;
    border-left: 3px solid transparent;
    transition: all 0.15s;
    font-weight: 500;
    font-size: 0.82rem;
    display: block;
    text-decoration: none;
}
.sidebar-link:hover { background: #f7f9fc; color: #1a2340; }
.sidebar-link.active {
    background: #e8f4ff;
    border-left-color: #0d6efd;
    color: #0d6efd;
    font-weight: 600;
}
.sidebar-section-label {
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #a0aec0;
    padding: 0.75rem 1rem 0.2rem;
    text-transform: uppercase;
    list-style: none;
}

/* ---- Score cirkel ---- */
.score-circle {
    width: 80px; height: 80px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 700;
    border: 5px solid; flex-shrink: 0;
}
.score-circle.score-high   { border-color: #198754; color: #198754; }
.score-circle.score-medium { border-color: #fd7e14; color: #fd7e14; }
.score-circle.score-low    { border-color: #dc3545; color: #dc3545; }
.score-circle.score-none   { border-color: #cbd5e0; color: #a0aec0; }

/* ---- Score bars ---- */
.score-bar { height: 8px; border-radius: 4px; }

/* ---- Shop card ---- */
.shop-card { border: 1px solid #e2e8f0; transition: box-shadow 0.2s; }
.shop-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }

/* ---- Recommendation card ---- */
.rec-card { border-left: 4px solid; border-radius: 0 6px 6px 0; }
.rec-card.impact-high   { border-left-color: #dc3545; }
.rec-card.impact-medium { border-left-color: #fd7e14; }
.rec-card.impact-low    { border-left-color: #718096; }

/* ---- Severity badges ---- */
.badge-sev-critical { background:#fef2f2; color:#c53030; border:1px solid #fed7d7; font-size:0.72rem; }
.badge-sev-warning  { background:#fffbeb; color:#975a16; border:1px solid #fde68a; font-size:0.72rem; }
.badge-sev-info     { background:#ebf8ff; color:#2b6cb0; border:1px solid #bee3f8; font-size:0.72rem; }

/* ---- Stat card ---- */
.stat-card { background: white; border-radius: 10px; padding: 1.25rem; border: 1px solid #e2e8f0; }
.stat-card .stat-value { font-size: 2.2rem; font-weight: 700; line-height: 1; }
.stat-card .stat-label { font-size: 0.77rem; color: #718096; margin-top: 0.3rem; }

/* ---- Page header ---- */
.page-header { border-bottom: 1px solid #e2e8f0; padding-bottom: 0.75rem; margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.35rem; font-weight: 700; margin: 0; }

/* ---- Login ---- */
.login-wrapper { min-height: 100vh; background: linear-gradient(135deg, #1a2340 0%, #2d4070 100%); }
.login-card { border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.2); }

/* ---- Charts ---- */
.chart-container { position: relative; height: 220px; }

/* ---- Trend ---- */
.trend-up   { color: #198754; }
.trend-down { color: #dc3545; }

/* ---- Misc ---- */
.text-tiny  { font-size: 0.72rem; }
.fw-medium  { font-weight: 500; }
.bg-gradient-primary { background: linear-gradient(135deg, #1a2340, #2d4070); }

.btn:focus, .btn:active:focus { box-shadow: 0 0 0 0.15rem rgba(13,110,253,.25); }