/* Core Base (Removed thick backgrounds and padding) */
.bullet-container { margin: 20px auto; font-family: -apple-system, sans-serif; box-sizing: border-box; }
.bullet-container * { box-sizing: border-box; }

/* SEO Only Class */
.bullet-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

/* ----- Chart Styles ----- */
.bullet-chart-wrap { padding: 10px 0; }
.bullet-item { margin-bottom: 20px; }
.bullet-meta { display: flex; justify-content: space-between; margin-bottom: 8px; font-weight: 600; font-size: 0.9em; color: #333; }
.bullet-bar-track { height: 12px; border-radius: 20px; overflow: hidden; position: relative; }
.bullet-bar-fill { height: 100%; border-radius: 20px; transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1); position: relative; overflow: hidden; }

/* Electric Wave Shimmer Animation */
.bullet-electric::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: bullet-wave 3s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes bullet-wave {
    0% { left: -100%; }
    40% { left: 200%; }
    100% { left: 200%; } /* Pauses for the remainder of the 3s */
}

/* Restored Strictly 2-Column Grid View */
@media (min-width: 768px) {
    .bullet-grid-view { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
    .bullet-grid-view .bullet-item { margin-bottom: 0; }
}

/* ----- Table Variables (Default Light Theme) ----- */
:root {
    --b-tbl-bg: #f8f9fa; --b-tbl-th-bg: #e9ecef; --b-tbl-th-txt: #333; --b-tbl-td-txt: #444;
    --b-tbl-border: #dee2e6; --b-tbl-search-bg: #fff; --b-tbl-search-border: #ccc; --b-tbl-search-txt: #333;
}
@media (prefers-color-scheme: dark) {
    :root {
        --b-tbl-bg: #1e1e1e; --b-tbl-th-bg: #2d2d2d; --b-tbl-th-txt: #e0e0e0; --b-tbl-td-txt: #cfcfcf;
        --b-tbl-border: #333; --b-tbl-search-bg: #2d2d2d; --b-tbl-search-border: #444; --b-tbl-search-txt: #e0e0e0;
    }
}
body.dark-mode, body[data-theme="dark"] {
    --b-tbl-bg: #1e1e1e; --b-tbl-th-bg: #2d2d2d; --b-tbl-th-txt: #e0e0e0; --b-tbl-td-txt: #cfcfcf;
    --b-tbl-border: #333; --b-tbl-search-bg: #2d2d2d; --b-tbl-search-border: #444; --b-tbl-search-txt: #e0e0e0;
}

/* Table Structure */
.bullet-scroll { overflow-x: auto; border-radius: 12px; border: 1px solid var(--b-tbl-border); background: var(--b-tbl-bg); }
.bullet-table { width: 100%; border-collapse: collapse; min-width: 400px; }
.bullet-table th { padding: 12px; text-align: left; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.5px; background: var(--b-tbl-th-bg); color: var(--b-tbl-th-txt); border-bottom: 2px solid var(--b-tbl-border); }
.bullet-table td { padding: 10px 12px; border-bottom: 1px solid var(--b-tbl-border); font-size: 0.9em; color: var(--b-tbl-td-txt); vertical-align: middle; }
.bullet-table tr:last-child td { border-bottom: none; }

/* Sorting Styling */
th.bullet-sortable { cursor: pointer; user-select: none; transition: background 0.2s; }
th.bullet-sortable:hover { background: #dcdcdc; }
.sort-icon { font-size: 10px; margin-left: 5px; opacity: 0.5; }

/* Status Tags & Features */
.bullet-w-sr { width: 40px; text-align: center; color: #888; font-weight: bold; }
.bullet-tag { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 0.85em; font-weight: 600; }
.bullet-yes { color: #0f5132; background-color: #d1e7dd; }
.bullet-no { color: #842029; background-color: #f8d7da; }

.bullet-search-wrap { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.bullet-search { width: 200px; padding: 8px 14px; border: 1px solid var(--b-tbl-search-border); border-radius: 20px; font-size: 14px; background: var(--b-tbl-search-bg); color: var(--b-tbl-search-txt); outline: none; transition: width 0.3s; }
.bullet-search:focus { width: 250px; border-color: #888; }
.bullet-pager { margin-top: 15px; display: flex; justify-content: flex-end; align-items: center; gap: 10px; font-size: 0.9em; color: var(--b-tbl-td-txt); }
.bullet-pager button { padding: 5px 12px; cursor: pointer; border: 1px solid var(--b-tbl-border); background: var(--b-tbl-th-bg); color: var(--b-tbl-th-txt); border-radius: 6px; font-weight: bold; }

@media (max-width: 768px) {
    .bullet-table th, .bullet-table td { padding: 8px; font-size: 0.85em; }
}