.rif-feed {
    margin: .5rem 0;
    font-size: .95rem;
}

.rif-card {
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    padding: .8rem .9rem;
    margin-bottom: .8rem;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    background: #fff;
    text-align: left;
    transition: box-shadow .15s ease, transform .05s ease;
}
.rif-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.06); }

/* Alert-level card accents (border + soft background) */
.rif-card--EMERGENCY { border-color:#ef4444; background:#fef2f2; }
.rif-card--WATCH_AND_ACT { border-color:#f97316; background:#fff7ed; }
.rif-card--ADVICE { border-color:#eab308; background:#fffbeb; }
.rif-card--OTHER,
.rif-card-- { border-color:#cbd5e1; background:#ffffff; }

.rif-card .rif-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .45rem;
}

/* Title (incident type) in uppercase */
.rif-title {
    font-weight: 700;
    text-transform: uppercase;
}

/* Chips container (right side) */
.rif-top-right {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
}

/* Uniform chip sizing – wide enough for "Being Controlled" */
.rif-chip {
    font-size: .8em;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: .25rem .6rem;
    background: #f8fafc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.75rem;
    /* Equal-ish widths but responsive: */
    min-width: clamp(8.5rem, 28vw, 12.5rem);
    text-align: center;
    white-space: nowrap;
}

/* Category chip stays neutral; status chips get colour */
.rif-chip--cat {
    background:#f8fafc;
    border-color:#cbd5e1;
    color:#334155;
}

/* Status chip colours */
.rif-chip--status { border-color:#cbd5e1; background:#ffffff; color:#374151; }

.rif-status--responding {
    border-color:#93c5fd;
    background:#eff6ff;
    color:#1d4ed8;
}
.rif-status--being_controlled {
    border-color:#fde68a;
    background:#fef9c3;
    color:#854d0e;
}
.rif-status--not_yet_controlled {
  border-color:#fecaca;
  background:#fee2e2;
  color:#991b1b;
}
.rif-status--under_control {
    border-color:#86efac;
    background:#dcfce7;
    color:#166534;
}
.rif-status--other {
    border-color:#e5e7eb;
    background:#ffffff;
    color:#374151;
}

/* Alert-level chip colours: tinted background + neutral text */
.rif-chip--EMERGENCY {
  background: #fee2e2;   /* light red */
  border-color: #fca5a5; /* medium red */
  color: #111827;        /* neutral dark text */
}

.rif-chip--WATCH_AND_ACT {
  background: #fff7ed;   /* light orange */
  border-color: #fdba74; /* medium orange */
  color: #111827;        /* neutral dark text */
}

.rif-chip--ADVICE {
  background: #fef9c3;   /* light yellow */
  border-color: #fde68a; /* medium yellow */
  color: #111827;        /* neutral dark text */
}

.rif-chip--OTHER,
.rif-chip-- {
  background: #f8fafc;   /* light neutral */
  border-color: #cbd5e1; /* neutral border */
  color: #111827;        /* neutral dark text */
}

.rif-body {
    margin-top: .25rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Location line uppercase */
.rif-loc { text-transform: uppercase; }

.rif-footer {
    margin-top: .6rem;
    font-size: .8rem;
    color: #6b7280;
    text-align: left;
}

.rif-empty {
    color: #666;
    margin: 1.5rem 0;
}

.rif-loading {
    color: #6b7280;
    font-style: italic;
}

/* Toolbar (Last updated + countdown) */
.rif-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem .75rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: .5rem;
    margin: .5rem 0 .75rem;
}

.rif-meta em {
    font-style: normal;
    color: #374151;
}

/* Filter bar (responsive, no overflow) */
.rif-filterbar {
    display: grid;
    grid-auto-flow: row dense;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .6rem;
    align-items: end;
    padding: .9rem 1rem;
    margin: .25rem 0 1rem;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    border-radius: .5rem;
    box-sizing: border-box;
    max-width: 100%;
}

.rif-ctrl-group {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}

.rif-ctrl-label {
    font-size: .85rem;
    color: #374151;
    font-weight: 600;
}

/* Inputs: make sure they don't overflow */
.rif-ctrl-input {
    width: 100%;
    max-width: 100%;
    padding: .5rem .6rem;
    border: 1px solid #d1d5db;
    border-radius: .5rem;
    font-size: .95rem;
    background: #fff;
    height: 2.5rem;
    line-height: 1.2;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

/* Force native selects inside the incident filter bar (prevent theme enhancers) */
.rif-filterbar select.rif-ctrl-input {
    display: block !important;
    visibility: visible !important;
    padding-right: 2rem;
    background-image:
        linear-gradient(45deg, transparent 50%, #9ca3af 50%),
        linear-gradient(135deg, #9ca3af 50%, transparent 50%),
        linear-gradient(to right, #d1d5db, #d1d5db);
    background-position:
        calc(100% - 1.1rem) 1.1rem,
        calc(100% - 0.7rem) 1.1rem,
        calc(100% - 2.2rem) .55rem;
    background-size: .35rem .35rem, .35rem .35rem, 1px 1.4rem;
    background-repeat: no-repeat;
}

/* Hide common enhancer wrappers specifically within the incident filter bar */
.rif-filterbar .select2,
.rif-filterbar .select2-container,
.rif-filterbar .chosen-container,
.rif-filterbar .nice-select {
    display: none !important;
}

/* Action button group spans full width on narrow rows */
.rif-ctrl-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
}

.rif-ctrl-button {
    width: 100%;
}

/* Gentle tightening on very small screens */
@media (max-width: 480px) {
    .rif-filterbar {
        gap: .5rem;
    }
    .rif-ctrl-input {
        height: 2.6rem;
    }
}