:root {
    --pepron-green: #2e7d32;
    --pepron-green-light: #e8f5e9;
    --pepron-blue: #1565c0;
    --pepron-blue-light: #e3f2fd;
    --pepron-red: #c62828;
    --pepron-red-light: #ffebee;
    --pepron-yellow: #f9a825;
    --pepron-yellow-light: #fffde7;
}

body { font-family: 'Open Sans', sans-serif; background: #f4f6f8; margin: 0; color: #333; }

/* --- LAYOUT --- */
.site-wrapper { max-width: 1280px; margin: 0 auto; background: white; min-height: 100vh; box-shadow: 0 0 20px rgba(0,0,0,0.05); }
.container { padding: 30px; }

/* --- NAV --- */
.pepron-nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 30px; height: 70px; border-bottom: 1px solid #eee; background: white;
}
.portal-nav { display: flex; gap: 20px; height: 100%; }
.nav-link {
    text-decoration: none; display: flex; align-items: center;
    height: 100%; padding: 0 10px; font-size: 1rem; color: #666; font-weight: 600;
    border-bottom: 3px solid transparent;
}
.nav-link.active { color: var(--pepron-green); border-bottom-color: var(--pepron-green); }
.nav-link:hover { color: #333; background: #fafafa; }
.nav-btn.logout { background: none; border: 1px solid #ddd; padding: 6px 15px; border-radius: 4px; cursor: pointer; color: #666; }

/* --- FILTERS --- */
.sub-nav { margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 15px; display: flex; gap: 10px; }
.filter-btn {
    background: none; border: none; padding: 8px 16px; 
    cursor: pointer; color: #666; font-weight: 600; font-size: 0.9rem;
    border-radius: 20px; transition: all 0.2s;
}
.filter-btn:hover { background: #f0f0f0; }
.filter-btn.active { background: #333; color: white; }

#filter-UNVERIFIED.active { background: var(--pepron-blue-light); color: var(--pepron-blue); }
#filter-VERIFIED.active { background: var(--pepron-green-light); color: var(--pepron-green); }
#filter-IGNORED.active { background: var(--pepron-yellow-light); color: var(--pepron-yellow); }

/* --- TABLE --- */
table { width: 100%; border-collapse: collapse; table-layout: fixed; /* TÄRKEÄ: Pitää sarakkeet kurissa */ }
th { text-align: left; color: #888; font-weight: 600; font-size: 0.85rem; padding: 12px; border-bottom: 2px solid #eee; overflow: hidden; white-space: nowrap; }
td { padding: 12px; border-bottom: 1px solid #eee; font-size: 0.9rem; color: #333; vertical-align: top; overflow: hidden; text-overflow: ellipsis; }

/* --- ACTION BUTTONS (GRID LAYOUT) --- */
.actions-cell {
    display: flex; align-items: flex-start; justify-content: space-between; 
    gap: 10px; width: 100%;
}
.btn-group-red { display: flex; flex-direction: column; gap: 5px; width: 48%; }
.btn-group-green { display: flex; flex-direction: column; width: 48%; }

.btn-xs { 
    width: 100%; text-align: center; padding: 8px 4px; font-size: 0.75rem; 
    border: 1px solid #ddd; background: white; cursor: pointer; border-radius: 4px; font-weight: 600;
}
.btn-ignore { color: var(--pepron-red); border-color: #ef9a9a; }
.btn-ignore:hover { background: var(--pepron-red-light); }
.btn-rule-delete { color: #c62828; border: 1px dashed #ef9a9a; background: #fff; }
.btn-rule-delete:hover { background: #ffebee; }

.btn-verify-main { 
    display: block; color: white; background-color: var(--pepron-green); border: 1px solid var(--pepron-green);
    padding: 18px 5px; /* Korkeampi nappi */
    border-radius: 4px; cursor: pointer; font-weight: bold; width: 100%;
    text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); line-height: 1.2;
}
.btn-verify-main:hover { background-color: #1b5e20; transform: translateY(-1px); }

/* --- BADGES --- */
.rule-badge { font-size: 0.75em; padding: 4px 8px; border-radius: 4px; font-weight: bold; text-transform: uppercase; display: inline-block;}
.rule-log { background: var(--pepron-green-light); color: var(--pepron-green); border: 1px solid #a5d6a7; }
.rule-ignore { background: var(--pepron-yellow-light); color: #f57f17; border: 1px solid #fff176; }

/* --- MODAL --- */
.modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 1000; justify-content: center; align-items: center;
}
.modal-content {
    background: white; width: 480px; padding: 30px; border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.modal-header { font-size: 1.2rem; font-weight: bold; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 10px; color: var(--pepron-green); }

.modal-form label { display: block; margin-top: 15px; font-weight: 600; font-size: 0.9rem; color: #555; }
.modal-form select { width: 100%; padding: 10px; margin-top: 5px; border: 1px solid #ccc; border-radius: 4px; font-size: 0.95rem; }

.modal-actions { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; }
.modal-row-actions { display: flex; gap: 10px; }

.btn-large { padding: 12px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 0.95rem; }
.btn-cancel { background: #f5f5f5; color: #666; }
.btn-submit { background: var(--pepron-green); color: white; flex: 1; }
.btn-outline { background: white; border: 2px solid var(--pepron-green); color: var(--pepron-green); flex: 1; }
.btn-submit:hover { background: #1b5e20; }
.btn-outline:hover { background: #f1f8e9; }