@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    background: #F0F2F5;
    color: #1F2937;
}

/* ── Animations ── */
@keyframes modalSlideIn {
    from { transform: translateY(-36px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

/* ── Table base ── */
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th {
    background: #F9FAFB;
    padding: 10px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 2px solid #E5E7EB;
    white-space: nowrap;
}
td {
    padding: 11px 12px;
    border-bottom: 1px solid #F3F4F6;
    font-size: 13px;
    color: #1F2937;
    vertical-align: middle;
}

/* ── Badge utilities ── */
.sbadge  { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; background:#D1FAE5; color:#065F46; }
.cmpbadge { display:inline-flex; align-items:center; gap:3px; padding:3px 8px; border-radius:6px; font-size:12px; font-weight:600; }
.cmpbadge.ok { background:#D1FAE5; color:#065F46; }
.cmpbadge.no { background:#FEE2E2; color:#991B1B; }
.aon-tag { font-size:10px; font-weight:700; padding:2px 7px; border-radius:5px; cursor:pointer; border:none; transition:all .2s; background:#D1FAE5; color:#065F46; letter-spacing:.3px; }
.aon-tag:hover { background:#A7F3D0; transform:scale(1.05); }

/* ── Color helpers ── */
.fw6 { font-weight: 600; }
.gnt { color: #10B981; }
.rdt { color: #EF4444; }
.blt { color: #3B82F6; }

/* ── Buttons ── */
.plus-btn {
    padding: 6px 13px;
    background: linear-gradient(135deg, #28A745, #000);
    color: white; border: none; border-radius: 6px;
    cursor: pointer; font-size: 18px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s; line-height: 1;
}
.plus-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,.2); }

.view-btn {
    width: 100%;
    padding: 10px;
    border: none; border-radius: 10px;
    font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all .2s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 14px;
}
.view-btn.green {
    background: linear-gradient(135deg, #D1FAE5, #A7F3D0);
    color: #065F46;
}
.view-btn.green:hover { background: linear-gradient(135deg, #A7F3D0, #6EE7B7); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(16,185,129,.2); }
.view-btn.red {
    background: linear-gradient(135deg, #FEE2E2, #FECACA);
    color: #991B1B;
}
.view-btn.red:hover { background: linear-gradient(135deg, #FECACA, #FCA5A5); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(239,68,68,.2); }