body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; }
.bg-page { padding: .25rem; background-color: #f2f4f7; }
.card-max { max-width: 960px; width: 100%; border-radius: 0.5rem; }
body.dark-mode .bg-page { background-color: #0f1724; }
body.dark-mode .card { background-color: #0b1220; color: #e6eef8; }
body:not(.dark-mode) .card { background-color: #ffffff; color: #212529; }
.header-row .year-select { max-width: 160px; }
.month-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.month-btn { display:flex; align-items:center; justify-content:center; padding: 0.5rem 0.25rem; cursor:pointer; }
.month-btn.active { background-color: #1f6feb; color:#fff; border-color:#1f6feb; }
body.dark-mode .month-btn.active { background-color:#1f6feb; color:#e6eef8; border-color:#1f6feb; }
/* History grid: 4 columns -> 2 rows of 4 radios */
.history-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; gap: .25rem; justify-items:center; }
@media (max-width:768px){ .history-grid { grid-template-columns: repeat(4,1fr); } }
.history-grid .form-check { display:flex; align-items:center; gap: .25rem; padding: .25rem; border-radius: .25rem; }
#searchTabs .nav-item { text-align:center; }
@media (min-width:992px){ #searchTabs .nav-item { width: 180px; } }
.autocomplete { width: 100%; }
.btn-outline-primary.month-btn { white-space:nowrap; font-weight:600; }
body.dark-mode .btn-outline-primary { color: #e6eef8; border-color: #1f6feb; background: transparent; }
body.dark-mode .btn { color: #e6eef8; }
.login-card .footer-text { padding: .25rem 0; }
.form-control:focus, .form-select:focus { box-shadow: 0 0 0 0.15rem rgba(13,110,253,0.15); outline: none; }
/* keep selects visually centered on small widths too */
.year-select, .month-select { text-align-last: center; }
/* --- RESPONSIVE TAB FIXES --- */

/* Remove the fixed width and allow tabs to resize evenly on large screens */
@media (min-width:992px){ 
    #searchTabs .nav-item { flex-basis: 0; flex-grow: 1; }
}

.tab-full-name { display: block;} /* Default: show full name */
.tab-abbr-name { display: none;}  /* Default: hide abbreviated name */

body.dark-mode .tab-full-name { color: #986b10;}
body.dark-mode .tab-abbr-name { color: #986b10;}

/* Ensure padding is minimal on nav links to save space */
#searchTabs .nav-link { padding: .5rem .25rem; font-size: 0.9rem; }

/* Media query for smaller screens (e.g., typical phone size) */
@media (max-width: 600px) {
    .tab-full-name { display: none; }
    .tab-abbr-name { display: block; }
    #searchTabs .nav-link { padding: .5rem .15rem; font-size: 0.8rem; }
}

.tab-desc{font-size:.85rem;color:#6c757d;}
body.dark-mode .tab-desc{color:#9fb3c8;}

/* =========================
   RESPONSIVE ACTIVE INCIDENTS
   ========================= */

/* Incident row layout */
.incident-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* =========================
   INCIDENT ITEM BASE
   ========================= */

.active-incident {
    background-color: #ffffff;
    color: #212529;
}

.active-incident:hover {
    background-color: #f1f5f9;
}

/* =========================
   DARK MODE INCIDENT ITEM
   ========================= */

body.dark-mode .active-incident {
    background-color: #0f1724;
    color: white !important;
    border-color: #1e293b;
}

body.dark-mode .active-incident:hover {
    background-color: #162033;
}

body.dark-mode .text-muted {
    color: white !important;
}

/* =========================
   ICON CONTAINER
   ========================= */

.incident-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background-color: #e9eef5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.incident-icon img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

/* Dark mode icon container */
body.dark-mode .incident-icon {
    background-color: #e9eef5;
}

/* =========================
   INCIDENT DATA
   ========================= */

.incident-data {
    flex-grow: 1;
    min-width: 0;
}

.incident-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

/* =========================
   MOBILE STACKING
   ========================= */

@media (max-width: 576px) {

    .incident-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .incident-header {
        flex-direction: column;
        align-items: center;
    }

    .incident-time {
        font-size: 0.75rem;
    }

    .incident-meta {
        font-size: 0.8rem;
    }
}
/* =========================
   INCIDENT ICON LAYERING
   ========================= */

.incident-icon {
    position: relative;
}

/* Alarm level overlay icon */
.alarm-overlay {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 26px;
    height: 26px;
    object-fit: contain;
    pointer-events: none;
}

/* Mobile tweak */
@media (max-width: 576px) {
    .alarm-overlay {
        top: -4px;
        right: -4px;
        width: 22px;
        height: 22px;
    }
}
.link-row { display:flex; justify-content:center; gap:2rem; margin-top:1rem; flex-wrap:wrap; }
.link-item { text-align:center; font-size:0.85rem; }

/* Example CSS for Modern Pills (to be added to your index_css.css) */

.history-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Example: 4 columns */
    gap: 8px; /* Spacing between pills */
    padding: 0 10px; /* Optional padding for grid container */
}

.history-pill {
    /* Basic styling to look like a pill/tag */
    padding: 6px 8px;
    border-radius: 12px; /* Pill shape */
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    transition: all 0.2s;
    text-align: center;
    overflow: hidden; /* For labels longer than pill */
    white-space: nowrap;
    text-overflow: ellipsis;
    user-select: none; /* Prevents text selection on click */

    /* Default (unselected) state styling - use light/dark mode variables if available */
    border: 1px solid var(--bs-secondary-bg); /* Use a light border */
    background-color: var(--bs-body-bg); /* Use the body background */
    color: var(--bs-body-color); /* Use the body text color */
}

.dark-mode .history-pill {
    border: 1px solid #495057; /* Dark mode border */
    background-color: #343a40; /* Darker background */
    color: #f8f9fa;
}

.history-pill:hover:not(.selected) {
    /* Hover effect */
    background-color: var(--bs-light); /* Lighter background on hover */
    border-color: var(--bs-primary);
}

.history-pill.selected {
    /* Selected state styling */
    background-color: var(--bs-primary); /* Primary/Accent color for selection */
    border-color: var(--bs-primary);
    color: var(--bs-white); /* White text on accent color */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Optional: slight glow */
}

.history-pill[data-id=""] {
    /* Style for empty slots */
    cursor: default;
    opacity: 0.5;
    background-color: transparent !important;
    border: 1px dashed var(--bs-secondary);
}
/* -------------------------------
   Incident row layout (4 columns)
--------------------------------*/
.incident-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr; /* 4 equal columns */
    align-items: center;
    gap: 8px;
}

/* Center content in each column */
.incident-row > div {
    display: flex;
    justify-content: center; /* horizontal center */
    align-items: center;     /* vertical center */
    text-align: center;      /* text center */
}

/* -------------------------------
   Icon stack (white bg + base + overlay)
--------------------------------*/
.incident-icon-wrap {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Bottom layer: white square */
.incident-icon-wrap .icon-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border-radius: 4px;
    z-index: 0;
}

/* Dark mode white background */
body.dark-mode .incident-icon-wrap .icon-bg {
    background-color: white;
}

/* Base icon */
.incident-icon-base {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

/* Alarm overlay */
.incident-icon-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
}

/* Mobile tweak */
@media (max-width: 576px) {
    .incident-icon-wrap {
        width: 22px;
        height: 22px;
    }
    .incident-icon-wrap .icon-bg,
    .incident-icon-base,
    .incident-icon-overlay {
        width: 100%;
        height: 100%;
    }
}

/* -------------------------------
   Active / Selected incident
--------------------------------*/
.active-incident {
    background: #f8f9fa;
    border-left: 4px solid transparent;
    transition: all 0.2s;
}

.active-incident:hover {
    background: #eef3ff;
}

.active-incident.selected {
    background: #dbe7ff;
    border-left-color: #0d6efd;
}

/* Dark mode */
body.dark-mode .active-incident {
    background-color: #0f1724;
    color: white !important;
    border-left: 4px solid transparent;
}

body.dark-mode .active-incident:hover {
    background-color: #162033;
}

body.dark-mode .active-incident.selected {
    background-color: #1e3a8a;
    border-left-color: #60a5fa;
}

/* Text highlight for selected row */
.active-incident.selected .incident-time,
.active-incident.selected .incident-meta {
    font-weight: 600;
    color: #084298; /* light mode */
}

body.dark-mode .active-incident.selected .incident-time,
body.dark-mode .active-incident.selected .incident-meta {
    color: #dbeafe; /* dark mode */
}