/* ══════════════════════════════════════════════════════════════════════════════
   PUSIM Web Monitoring — Custom Stylesheet
   Dipindahkan dari inline <style> ke file eksternal agar kompatibel dengan CSP
   (Content Security Policy tanpa 'unsafe-inline')
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   CSS VARIABLES / DESIGN TOKENS
   ─────────────────────────────────────────────────────────────────────────────  */
:root {
    --sp-primary:      #6366f1;
    --sp-primary-dark: #4f46e5;
    --sp-success:      #10b981;
    --sp-warning:      #f59e0b;
    --sp-danger:       #ef4444;
    --sp-info:         #3b82f6;
    --sp-muted:        #9ca3af;
    --sp-border:       rgba(0,0,0,.06);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SCORE BADGES — Lingkaran nilai (SEO, Speed, Security)
   ─────────────────────────────────────────────────────────────────────────────  */
.score-badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    border: 3px solid;
    flex-shrink: 0;
}
.score-badge.excellent { color: #10b981; border-color: #10b981; background: rgba(16,185,129,.1); }
.score-badge.good      { color: #3b82f6; border-color: #3b82f6; background: rgba(59,130,246,.1); }
.score-badge.average   { color: #f59e0b; border-color: #f59e0b; background: rgba(245,158,11,.1); }
.score-badge.poor      { color: #ef4444; border-color: #ef4444; background: rgba(239,68,68,.1); }
.score-badge.unknown   { color: #9ca3af; border-color: #9ca3af; background: rgba(156,163,175,.1); }

/* ─────────────────────────────────────────────────────────────────────────────
   STATUS DOTS — Indikator uptime (up/down/unknown)
   ─────────────────────────────────────────────────────────────────────────────  */
.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.status-dot.up      { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.2); }
.status-dot.down    { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.2); animation: pulse-red 1.5s infinite; }
.status-dot.unknown { background: #9ca3af; }
.status-dot.timeout { background: #f59e0b; }
.status-dot.error   { background: #ef4444; }

@keyframes pulse-red {
    0%   { box-shadow: 0 0 0 0   rgba(239,68,68,.5); }
    70%  { box-shadow: 0 0 0 8px rgba(239,68,68,0);  }
    100% { box-shadow: 0 0 0 0   rgba(239,68,68,0);  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   UPTIME HEATMAP
   ─────────────────────────────────────────────────────────────────────────────  */
.uptime-bar {
    width: 100%;
    height: 6px;
    border-radius: 3px;
}
.heatmap-cell {
    width: 14px;
    height: 28px;
    border-radius: 3px;
    cursor: pointer;
    transition: transform .15s ease;
}
.heatmap-cell:hover  { transform: scaleY(1.3); }
.heatmap-cell.day-100 { background: #10b981; }
.heatmap-cell.day-99  { background: #34d399; }
.heatmap-cell.day-95  { background: #6ee7b7; }
.heatmap-cell.day-90  { background: #fbbf24; }
.heatmap-cell.day-down{ background: #ef4444; }
.heatmap-cell.day-0   { background: #374151; }

/* ─────────────────────────────────────────────────────────────────────────────
   SCAN / CHECK CARDS
   ─────────────────────────────────────────────────────────────────────────────  */
.scan-progress {
    height: 4px;
    border-radius: 2px;
}
.scan-card {
    transition: all .2s ease;
}
.scan-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99,102,241,.15);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SIDEBAR ACTIVE STATE
   ─────────────────────────────────────────────────────────────────────────────  */
.side-menu__item.monitoring-active {
    background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-dark)) !important;
    color: white !important;
    border-radius: 8px;
}
.side-menu__item.monitoring-active .side-menu__label,
.side-menu__item.monitoring-active i {
    color: white !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   GRADE BADGES — SSL/Security grade (A+, A, B, C, D, F)
   ─────────────────────────────────────────────────────────────────────────────  */
.grade-badge {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .9rem;
    flex-shrink: 0;
}
.grade-A-plus { background: #d1fae5; color: #065f46; }
.grade-A      { background: #dbeafe; color: #1e3a8a; }
.grade-B      { background: #fef9c3; color: #713f12; }
.grade-C      { background: #ffedd5; color: #7c2d12; }
.grade-D,
.grade-F      { background: #fee2e2; color: #7f1d1d; }
.grade-NA     { background: #f3f4f6; color: #6b7280; }

/* ─────────────────────────────────────────────────────────────────────────────
   CHECK ITEMS — Hasil scan SEO/Security (pass/fail/warn)
   ─────────────────────────────────────────────────────────────────────────────  */
.check-item {
    padding: .75rem 1rem;
    border-radius: 8px;
    margin-bottom: .5rem;
    border: 1px solid;
}
.check-item.pass { background: rgba(16,185,129,.06); border-color: rgba(16,185,129,.2); }
.check-item.fail { background: rgba(239,68,68,.06);  border-color: rgba(239,68,68,.2);  }
.check-item.warn { background: rgba(245,158,11,.06); border-color: rgba(245,158,11,.2); }

/* ─────────────────────────────────────────────────────────────────────────────
   LOADING OVERLAY
   ─────────────────────────────────────────────────────────────────────────────  */
.scan-loading        { display: none;  }
.scan-loading.active { display: flex;  }

/* ─────────────────────────────────────────────────────────────────────────────
   ALERT BADGE PULSE
   ─────────────────────────────────────────────────────────────────────────────  */
.alert-badge-pulse {
    animation: pulse-badge 2s infinite;
}
@keyframes pulse-badge {
    0%, 100% { opacity: 1;  }
    50%       { opacity: .5; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   LOGO & SIDEBAR LAYOUT FIXES
   ─────────────────────────────────────────────────────────────────────────────  */
.app-sidebar-logo img,
.app-horizontal-logo img,
.nav-header img {
    max-height: 40px !important;
    width: auto !important;
    object-fit: contain !important;
    display: inline-block !important;
}
.app-sidebar-logo {
    overflow: hidden !important;
    max-height: 70px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SIDEBAR USER CARD (bottom)
   ─────────────────────────────────────────────────────────────────────────────  */
.sidebar-user-card {
    font-size: .8rem;
    padding: .75rem 1rem;
    margin-top: auto;
    border-top: 1px solid var(--sp-border);
}
.sidebar-user-avatar {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SIDEBAR ICON MINIMIZED STATE
   ─────────────────────────────────────────────────────────────────────────────  */
.sidebar-minimized-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
   OFFCANVAS MOBILE SIDEBAR BRAND
   ─────────────────────────────────────────────────────────────────────────────  */
.offcanvas-brand-icon {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.offcanvas-brand-text {
    font-weight: 800;
    font-size: 1.1rem;
    background: linear-gradient(135deg, #6366f1, #818cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DASHBOARD STAT CARDS
   ─────────────────────────────────────────────────────────────────────────────  */
.stat-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TABLES — Customisasi DataTables
   ─────────────────────────────────────────────────────────────────────────────  */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    padding: 4px 8px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TOOLTIPS PADA HEATMAP
   ─────────────────────────────────────────────────────────────────────────────  */
[data-bs-toggle="tooltip"] {
    cursor: pointer;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LOADING SPINNER ROTATION (menggantikan inline <style>@keyframes spin)
   ─────────────────────────────────────────────────────────────────────────────  */
@keyframes spin {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}
.spin { animation: spin .8s linear infinite; }

/* ─────────────────────────────────────────────────────────────────────────────
   DELETE FORM BUTTON (CSRF-safe POST delete)
   ─────────────────────────────────────────────────────────────────────────────  */
.btn-delete-form {
    display: inline;
}
.btn-delete-form button {
    background: none;
    border: none;
    padding: 0;
    color: var(--bs-danger);
    cursor: pointer;
    font-size: inherit;
}
.btn-delete-form button:hover {
    text-decoration: underline;
}