/* =====================================================
DASHBOARD CSS
NEWS DASHBOARD UI PATCH
Production Grade Drop-In Replacement

Compatible with:

* HTML SPA
* Bootstrap
* dashboard_news.html
* dashboard_news.js
* dashboard_portal.js

Preserves existing:

* Alert banner
* Filter card
* Tabs
* News cards
* Market panels
* Tables
* Positive / Negative states

Adds support for:

* Multi-container News sliders
* 24-card page layout
* Six-column desktop grid
* Responsive grid fallback
* Slider viewport
* Slider track
* Navigation arrows
* Progress / timer indicator
* Pause-on-hover
* Source groups
* Content-quality states

===================================================== */

/* =====================================================
ALERT BANNER
===================================================== */

.alert-banner {

background:
rgba(255, 0, 0, 0.15);

border-left:
4px solid #ef4444;

padding:
12px;

border-radius:
10px;

}

/* =====================================================
FILTER CARD
===================================================== */

.filters-card {

backdrop-filter:
blur(10px);

-webkit-backdrop-filter:
blur(10px);

}

/* =====================================================
TABS
===================================================== */

.tabs {

display:
flex;

gap:
10px;

flex-wrap:
wrap;

}

.tab {

padding:
6px 12px;

border:
1px solid var(--border);

background:
transparent;

color:
var(--text-muted);

border-radius:
6px;

cursor:
pointer;

transition:
all 0.2s ease;

}

.tab.active,
.tab:hover {

background:
var(--cyan);

color:
#000;

}

/* =====================================================
BASE NEWS CARD
===================================================== */

.news-card {

padding:
1rem;

border-radius:
12px;

border:
1px solid var(--border);

transition:
transform 0.25s ease,
border-color 0.25s ease,
background 0.25s ease,
box-shadow 0.25s ease;

position:
relative;

overflow:
hidden;

height:
100%;

min-width:
0;

}

.news-card:hover {

transform:
translateY(-3px);

border-color:
var(--cyan);

background:
rgba(255,255,255,0.07);

}

/* =====================================================
NEWS CONTAINER TEXT SYSTEM
Dashboard News Intelligence
===================================================== */

#news-container,
#news-container-2,
#news-container-3 {

color:
#F8FAFC !important;

}

/* =====================================================
NEWS CARD CONTENT
===================================================== */

#news-container .news-card,
#news-container-2 .news-card,
#news-container-3 .news-card {

color:
#F8FAFC !important;

border:
1px solid rgba(255,255,255,0.75);

}

/* =====================================================
NEWS HEADLINE
===================================================== */

#news-container .news-card h6,
#news-container-2 .news-card h6,
#news-container-3 .news-card h6 {

color:
#FFFFFF !important;

font-weight:
600;

line-height:
1.4;

margin-bottom:
0.65rem;

}

/* =====================================================
NEWS SUMMARY
===================================================== */

#news-container .news-card p,
#news-container-2 .news-card p,
#news-container-3 .news-card p {

color:
#E2E8F0 !important;

line-height:
1.55;

margin-bottom:
0.75rem;

}

/* =====================================================
NEWS TIMESTAMP
===================================================== */

#news-container .news-card small,
#news-container-2 .news-card small,
#news-container-3 .news-card small {

color:
#CBD5E1 !important;

line-height:
1.4;

}

/* =====================================================
NEWS CARD HOVER ENHANCEMENT
===================================================== */

#news-container .news-card:hover,
#news-container-2 .news-card:hover,
#news-container-3 .news-card:hover {

border-color:
rgba(0,255,245,0.85);

box-shadow:
0 8px 24px rgba(0,0,0,0.25),
0 0 18px rgba(0,255,245,0.08);

}

/* =====================================================
NEWS SLIDER ROOT
===================================================== */

.news-slider {

position:
relative;

width:
100%;

min-width:
0;

}

/* =====================================================
NEWS SLIDER VIEWPORT
===================================================== */

.news-slider-viewport {

position:
relative;

width:
100%;

overflow:
hidden;

min-width:
0;

}

/* =====================================================
NEWS SLIDER TRACK
===================================================== */

.news-slider-track {

display:
grid;

grid-template-columns:
repeat(6, minmax(0, 1fr));

grid-auto-rows:
minmax(0, auto);

gap:
1rem;

width:
100%;

transition:
transform 0.45s ease;

will-change:
transform;

}

/* =====================================================
NEWS SLIDER PAGE

A page can contain:

```
   6 columns
   4 rows
```

Maximum:

```
   24 cards per page
```

JavaScript controls page movement.

===================================================== */

.news-slider-page {

display:
grid;

grid-template-columns:
repeat(6, minmax(0, 1fr));

grid-template-rows:
repeat(4, minmax(0, auto));

gap:
1rem;

min-width:
100%;

width:
100%;

}

/* =====================================================
NEWS SLIDER CARD WRAPPER
===================================================== */

.news-slider-page > * {

min-width:
0;

min-height:
0;

}

/* =====================================================
NEWS SLIDER NAVIGATION
===================================================== */

.news-slider-arrow {

position:
absolute;

top:
50%;

transform:
translateY(-50%);

z-index:
10;

width:
42px;

height:
42px;

display:
flex;

align-items:
center;

justify-content:
center;

border:
1px solid rgba(255,255,255,0.35);

border-radius:
50%;

background:
rgba(10,15,25,0.78);

color:
#FFFFFF;

cursor:
pointer;

backdrop-filter:
blur(10px);

-webkit-backdrop-filter:
blur(10px);

transition:
all 0.25s ease;

user-select:
none;

}

.news-slider-arrow:hover {

background:
rgba(0,255,245,0.18);

border-color:
rgba(0,255,245,0.85);

color:
#00FFF5;

box-shadow:
0 0 18px rgba(0,255,245,0.18);

}

.news-slider-arrow:focus-visible {

outline:
2px solid #00FFF5;

outline-offset:
3px;

}

.news-slider-arrow:disabled {

opacity:
0.35;

cursor:
not-allowed;

pointer-events:
none;

}

.news-slider-arrow-left {

left:
10px;

}

.news-slider-arrow-right {

right:
10px;

}

/* =====================================================
NEWS SLIDER PROGRESS AREA
===================================================== */

.news-slider-controls {

display:
flex;

align-items:
center;

justify-content:
center;

gap:
10px;

margin-top:
1rem;

min-height:
8px;

}

/* =====================================================
NEWS SLIDER PROGRESS TRACK
===================================================== */

.news-slider-progress {

position:
relative;

width:
min(320px, 60%);

height:
4px;

overflow:
hidden;

border-radius:
999px;

background:
rgba(255,255,255,0.15);

}

/* =====================================================
NEWS SLIDER PROGRESS INDICATOR
===================================================== */

.news-slider-progress-bar {

display:
block;

width:
0%;

height:
100%;

border-radius:
inherit;

background:
linear-gradient(
90deg,
#00FFD1,
#00F5FF,
#008CFF
);

box-shadow:
0 0 10px rgba(0,245,255,0.45);

transition:
width 0.1s linear;

}

/* =====================================================
NEWS SLIDER PAGE INDICATOR
===================================================== */

.news-slider-page-indicator {

color:
#CBD5E1;

font-size:
0.75rem;

white-space:
nowrap;

}

/* =====================================================
PAUSE-ON-HOVER SUPPORT

JavaScript should pause rotation when the
slider root receives hover state.

===================================================== */

.news-slider:hover .news-slider-progress-bar {

animation-play-state:
paused;

}

/* =====================================================
NEWS SOURCE GROUP LABEL
===================================================== */

.news-source-label {

display:
inline-flex;

align-items:
center;

max-width:
100%;

padding:
0.2rem 0.5rem;

border-radius:
999px;

font-size:
0.68rem;

font-weight:
600;

letter-spacing:
0.02em;

text-transform:
uppercase;

color:
#DDE7F0;

background:
rgba(255,255,255,0.08);

border:
1px solid rgba(255,255,255,0.16);

}

/* =====================================================
SOURCE GROUP STATES
===================================================== */

.news-source-group-primary {

border-color:
rgba(0,255,245,0.35);

}

.news-source-group-secondary {

border-color:
rgba(0,140,255,0.35);

}

.news-source-group-tertiary {

border-color:
rgba(139,92,246,0.35);

}

/* =====================================================
CONTENT QUALITY INDICATOR
===================================================== */

.news-quality-indicator {

display:
inline-flex;

align-items:
center;

gap:
4px;

font-size:
0.68rem;

color:
#CBD5E1;

}

/* =====================================================
CONTENT QUALITY: TITLE + SUMMARY
===================================================== */

.news-quality-complete {

color:
#22c55e;

}

/* =====================================================
CONTENT QUALITY: TITLE ONLY
===================================================== */

.news-quality-title-only {

color:
#f59e0b;

}

/* =====================================================
NEWS CARD META ROW
===================================================== */

.news-card-meta {

display:
flex;

align-items:
center;

justify-content:
space-between;

flex-wrap:
wrap;

gap:
0.5rem;

margin-top:
auto;

padding-top:
0.75rem;

}

/* =====================================================
NEWS CARD LINK
===================================================== */

.news-card-link {

display:
inline-flex;

align-items:
center;

gap:
4px;

color:
#00FFF5;

font-size:
0.8rem;

font-weight:
600;

text-decoration:
none;

transition:
color 0.2s ease,
transform 0.2s ease;

}

.news-card-link:hover {

color:
#FFFFFF;

transform:
translateX(2px);

}

/* =====================================================
NEWS EMPTY STATE
===================================================== */

.news-empty-state {

width:
100%;

padding:
2rem;

text-align:
center;

color:
#CBD5E1;

border:
1px dashed rgba(255,255,255,0.2);

border-radius:
12px;

background:
rgba(255,255,255,0.025);

}

/* =====================================================
NEWS LOADING STATE
===================================================== */

.news-loading-state {

width:
100%;

padding:
2rem;

text-align:
center;

color:
#CBD5E1;

}

/* =====================================================
NEWS ERROR STATE
===================================================== */

.news-error-state {

width:
100%;

padding:
1rem;

text-align:
center;

color:
#FCA5A5;

border:
1px solid rgba(239,68,68,0.35);

border-radius:
10px;

background:
rgba(239,68,68,0.08);

}

/* =====================================================
MARKET PANEL
===================================================== */

.market-panel {

background:
rgba(255,255,255,0.055);

padding:
15px;

border-radius:
8px;

border:
1px solid rgba(255,255,255,0.75);

backdrop-filter:
blur(12px);

-webkit-backdrop-filter:
blur(12px);

color:
#F8FAFC;

box-shadow:
0 8px 30px rgba(0,0,0,0.35),
inset 0 0 20px rgba(255,255,255,0.03);

}

/* =====================================================
MARKET TABLE HEADERS
===================================================== */

.market-panel .table-dark th {

color:
#E2E8F0;

}

/* =====================================================
MARKET TABLE VALUES
===================================================== */

.market-panel .table-dark td {

color:
#F8FAFC;

}

/* =====================================================
MARKET PANEL HOVER
===================================================== */

.market-panel:hover {

border-color:
rgba(255,255,255,0.9);

}

/* =====================================================
TABLE
===================================================== */

.table-dark {

background:
transparent;

}

.table-dark th {

color:
var(--text-muted);

font-size:
12px;

}

.table-dark td {

font-size:
13px;

}

/* =====================================================
POSITIVE / NEGATIVE
===================================================== */

.text-success {

color:
#22c55e !important;

}

.text-danger {

color:
#ef4444 !important;

}

/* =====================================================
   ECONOMIC CALENDAR
===================================================== */

.economic-calendar-wrapper {

  max-height: 650px;

  overflow-y: auto;

  border: 1px solid var(--border);

  border-radius: 12px;

  background:
    rgba(15, 17, 26, 0.95);

  padding: 12px;

}


/* DAY BLOCK */

.economic-calendar-day {

  border: 1px solid var(--border);

  border-radius: 10px;

  overflow: hidden;

  background:
    rgba(18, 24, 38, 0.9);

}


/* DAY HEADER */

.economic-calendar-day-header {

  padding: 10px 12px;

  font-weight: 600;

  font-size: 14px;

  color: #ffffff;

  background:
    rgba(21, 27, 44, 0.95);

  border-bottom:
    1px solid var(--border);

}


/* EVENT ROW */

.economic-calendar-event {

  padding: 10px 12px;

  font-size: 13px;

  color: var(--text);

  border-bottom:
    1px solid var(--border);

  transition:
    background 0.2s ease,
    transform 0.2s ease;

}


.economic-calendar-event:last-child {

  border-bottom:
    0;

}


.economic-calendar-event:hover {

  background:
    rgba(255, 255, 255, 0.04);

}


/* PASSED */

.economic-calendar-event.passed-event {

  opacity: 0.55;

}


/* NEXT EVENT */

.economic-calendar-event.next-event {

  background:
    rgba(255, 165, 0, 0.08);

  border-left:
    3px solid #ffa500;

}


/* IMPACT */

.economic-impact-badge {

  display: inline-block;

  padding:
    3px 8px;

  border-radius:
    6px;

  font-size:
    11px;

  text-transform:
    capitalize;

}


.economic-impact-badge.high {

  background:
    rgba(255, 0, 0, 0.15);

  color:
    #ff4d4d;

}


.economic-impact-badge.medium {

  background:
    rgba(255, 165, 0, 0.15);

  color:
    #ffa500;

}


.economic-impact-badge.low {

  background:
    rgba(0, 255, 0, 0.15);

  color:
    #2ecc71;

}


/* COUNTDOWN */

.economic-countdown {

  font-family:
    monospace;

  text-align:
    right;

  color:
    var(--text-muted);

}


/* MOBILE */

@media (
  max-width: 767.98px
) {

  .economic-calendar-wrapper {

    max-height:
      600px;

  }


  .economic-calendar-event {

    padding:
      12px;

  }


  .economic-countdown {

    text-align:
      left;

  }

}

/* =====================================================
ECONOMIC CALENDAR — FULL DATA TABLE EXTENSION
---------------------------------------------

Compatible with upgraded alerts.js

Adds presentation support for:

* Event
* Currency
* Impact
* Time
* Forecast
* Previous
* Countdown
* Event Details / Source URL

Preserves existing:

* Economic calendar wrapper
* Day grouping
* Passed event state
* Next event state
* Impact badges
* Countdown styling
* Bootstrap compatibility
  ===================================================== */

/* =====================================================
CALENDAR TABLE WRAPPER
===================================================== */

.economic-calendar-table-wrapper {

width:
100%;

overflow-x:
auto;

-webkit-overflow-scrolling:
touch;

}

/* =====================================================
CALENDAR TABLE
===================================================== */

.economic-calendar-table {

width:
100%;

min-width:
850px;

border-collapse:
collapse;

color:
var(--text);

background:
transparent;

}

/* =====================================================
CALENDAR TABLE HEADER
===================================================== */

.economic-calendar-table thead th {

padding:
10px 12px;

font-size:
11px;

font-weight:
700;

text-transform:
uppercase;

letter-spacing:
0.04em;

white-space:
nowrap;

color:
#E2E8F0;

background:
rgba(10, 15, 25, 0.95);

border-bottom:
1px solid var(--border);

}

/* =====================================================
CALENDAR TABLE BODY
===================================================== */

.economic-calendar-table tbody td {

padding:
10px 12px;

font-size:
13px;

vertical-align:
middle;

color:
#F8FAFC;

border-bottom:
1px solid var(--border);

}

/* =====================================================
EVENT TITLE
===================================================== */

.economic-calendar-event-title {

min-width:
180px;

font-weight:
600;

line-height:
1.4;

color:
#FFFFFF;

}

/* =====================================================
CURRENCY
===================================================== */

.economic-calendar-currency {

white-space:
nowrap;

font-weight:
600;

color:
#E2E8F0;

}

/* =====================================================
EVENT TIME
===================================================== */

.economic-calendar-time {

white-space:
nowrap;

color:
#CBD5E1;

}

/* =====================================================
FORECAST VALUE
===================================================== */

.economic-calendar-forecast {

white-space:
nowrap;

font-weight:
600;

color:
#00FFF5;

}

/* =====================================================
PREVIOUS VALUE
===================================================== */

.economic-calendar-previous {

white-space:
nowrap;

color:
#CBD5E1;

}

/* =====================================================
COUNTDOWN
===================================================== */

.economic-calendar-table
.economic-countdown {

min-width:
90px;

text-align:
right;

white-space:
nowrap;

font-family:
monospace;

font-size:
12px;

color:
var(--text-muted);

}

/* =====================================================
EVENT DETAILS LINK
===================================================== */

.economic-calendar-event-link {

display:
inline-flex;

align-items:
center;

gap:
4px;

white-space:
nowrap;

color:
#00FFF5;

font-size:
12px;

font-weight:
600;

text-decoration:
none;

transition:
color 0.2s ease,
transform 0.2s ease;

}

.economic-calendar-event-link:hover {

color:
#FFFFFF;

transform:
translateX(2px);

}

/* =====================================================
TABLE ROW HOVER
===================================================== */

.economic-calendar-table tbody tr:hover {

background:
rgba(255, 255, 255, 0.04);

}

/* =====================================================
PASSED EVENT TABLE STATE
===================================================== */

.economic-calendar-table
tbody tr.passed-event {

opacity:
0.55;

}

/* =====================================================
NEXT EVENT TABLE STATE
===================================================== */

.economic-calendar-table
tbody tr.next-event {

background:
rgba(255, 165, 0, 0.08);

box-shadow:
inset 3px 0 0 #ffa500;

}

/* =====================================================
NEXT EVENT HOVER
===================================================== */

.economic-calendar-table
tbody tr.next-event:hover {

background:
rgba(255, 165, 0, 0.13);

}

/* =====================================================
EMPTY / MISSING VALUE
===================================================== */

.economic-calendar-empty-value {

color:
var(--text-muted);

opacity:
0.7;

}

/* =====================================================
EVENT SOURCE / URL
===================================================== */

.economic-calendar-source {

max-width:
180px;

overflow:
hidden;

text-overflow:
ellipsis;

white-space:
nowrap;

}

/* =====================================================
DAY GROUP TABLE HEADER
===================================================== */

.economic-calendar-day-table-header {

padding:
10px 12px;

font-weight:
600;

font-size:
14px;

color:
#FFFFFF;

background:
rgba(21, 27, 44, 0.95);

border-bottom:
1px solid var(--border);

}

/* =====================================================
RESPONSIVE TABLE
===================================================== */

@media (
max-width: 767.98px
) {

.economic-calendar-table {
min-width:
  850px;

}

.economic-calendar-table thead th {

padding:
  9px 10px;

font-size:
  10px;

}

.economic-calendar-table tbody td {

padding:
  9px 10px;

font-size:
  12px;

}

}

/* =====================================================
REDUCED MOTION ACCESSIBILITY
===================================================== */

@media (
prefers-reduced-motion: reduce
) {

.economic-calendar-event-link {

transition:
  none !important;

}

}

/* =====================================================
END ECONOMIC CALENDAR FULL DATA TABLE EXTENSION
===================================================== */
/* =====================================================
   GLOBAL DASHBOARD TABLE SYSTEM
===================================================== */

.dashboard-table-wrapper {

    max-height: 650px;

    overflow-y: auto;
    overflow-x: auto;

    border:
        1px solid var(--border);

    border-radius:
        12px;

    background:
        rgba(15, 17, 26, 0.95);

    padding:
        0;

}


/* =====================================================
   GLOBAL TABLE
===================================================== */

.dashboard-table {

    width: 100%;

    min-width: 700px;

    margin-bottom: 0;

    color:
        var(--text);

    border-collapse:
        separate;

    border-spacing:
        0;

}


/* =====================================================
   GLOBAL TABLE HEADER
===================================================== */

.dashboard-table thead th {

    position:
        sticky;

    top:
        0;

    z-index:
        5;

    padding:
        12px;

    background:
        rgba(21, 27, 44, 0.98);

    color:
        #FFFFFF;

    font-size:
        12px;

    font-weight:
        600;

    white-space:
        nowrap;

    border-bottom:
        1px solid var(--border);

}


/* =====================================================
   GLOBAL TABLE BODY
===================================================== */

.dashboard-table tbody td {

    padding:
        11px 12px;

    color:
        var(--text);

    font-size:
        13px;

    border-bottom:
        1px solid var(--border);

    vertical-align:
        middle;

}


/* =====================================================
   GLOBAL TABLE ROW
===================================================== */

.dashboard-table tbody tr {

    transition:
        background 0.2s ease;

}


/* =====================================================
   GLOBAL TABLE ROW HOVER
===================================================== */

.dashboard-table tbody tr:hover {

    background:
        rgba(255,255,255,0.04);

}


/* =====================================================
   LAST ROW
===================================================== */

.dashboard-table tbody tr:last-child td {

    border-bottom:
        0;

}


/* =====================================================
   POSITIVE / NEGATIVE
===================================================== */

.dashboard-table-value-positive {

    color:
        #22c55e !important;

    font-weight:
        600;

}


.dashboard-table-value-negative {

    color:
        #ef4444 !important;

    font-weight:
        600;

}


.dashboard-table-value-neutral {

    color:
        var(--text-muted) !important;

}


/* =====================================================
   TABLE EMPTY STATE
===================================================== */

.dashboard-table-empty {

    padding:
        2rem;

    text-align:
        center;

    color:
        #CBD5E1;

}


/* =====================================================
   TABLE LOADING STATE
===================================================== */

.dashboard-table-loading {

    padding:
        2rem;

    text-align:
        center;

    color:
        #CBD5E1;

}


/* =====================================================
   TABLE ERROR STATE
===================================================== */

.dashboard-table-error {

    padding:
        1rem;

    color:
        #FCA5A5;

    background:
        rgba(239,68,68,0.08);

}


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

@media (
    max-width: 767.98px
) {

    .dashboard-table-wrapper {

        max-height:
            600px;

    }

    .dashboard-table {

        min-width:
            650px;

    }

}
/* =====================================================
RESPONSIVE NEWS GRID
===================================================== */

/*

LARGE DESKTOP

6 columns x 4 rows

Maximum 24 cards per slider page.

---

*/

@media (min-width: 1400px) {

.news-slider-page {

grid-template-columns:
  repeat(6, minmax(0, 1fr));

}

}

/*

STANDARD DESKTOP / LAPTOP

4 columns

---

*/

@media (min-width: 992px)
and (max-width: 1399.98px) {

.news-slider-page {

grid-template-columns:
  repeat(4, minmax(0, 1fr));

}

}

/*

TABLET

3 columns

---

*/

@media (min-width: 768px)
and (max-width: 991.98px) {

.news-slider-page {

grid-template-columns:
  repeat(3, minmax(0, 1fr));

}

}

/*

SMALL TABLET / LARGE MOBILE

2 columns

---

*/

@media (min-width: 576px)
and (max-width: 767.98px) {

.news-slider-page {

grid-template-columns:
  repeat(2, minmax(0, 1fr));

}

}

/*

MOBILE

1 column

---

*/

@media (max-width: 575.98px) {

.news-slider-page {

grid-template-columns:
  1fr;

}

.news-slider-arrow {

width:
  36px;

height:
  36px;

}

.news-slider-arrow-left {

left:
  6px;

}

.news-slider-arrow-right {

right:
  6px;

}

.news-slider-progress {

width:
  45%;


}

.news-card {

padding:
  0.85rem;


}

}

/* =====================================================
REDUCED MOTION ACCESSIBILITY
===================================================== */

@media (prefers-reduced-motion: reduce) {

.news-card,
.news-slider-track,
.news-slider-arrow,
.news-card-link {

transition:
  none !important;


}

.news-slider-progress-bar {

transition:
  none !important;

}

}

/* =====================================================
END DASHBOARD CSS NEWS PATCH
===================================================== */
/* =====================================================
   HYBRID NEWS INTELLIGENCE FEED
   SAFE MIGRATION SUPPORT

   Structure:

   .news-slider
       .news-slider-controls
       .news-feed
           .featured-news-card
           .news-grid
===================================================== */


/* =====================================================
   HYBRID FEED ROOT
===================================================== */

.news-feed {

    width:
        100%;

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        1rem;

}


/* =====================================================
   FEATURED STORY MOUNT
===================================================== */

.featured-news-card {

    width:
        100%;

    min-width:
        0;

}


/* =====================================================
   FEATURED STORY CARD
===================================================== */

.featured-news-card > .news-card {

    width:
        100%;

    min-width:
        0;

}


/* =====================================================
   COMPACT NEWS GRID
===================================================== */

.news-grid {

    width:
        100%;

    min-width:
        0;

    margin-left:
        0;

    margin-right:
        0;

}


/* =====================================================
   PAGINATION INDICATOR

   IMPORTANT:
   This replaces the conflicting
   .news-slider-page class.

===================================================== */

.news-slider-page-indicator {

    display:
        inline-block;

    color:
        #CBD5E1;

    font-size:
        0.75rem;

    font-weight:
        600;

    white-space:
        nowrap;

}


/* =====================================================
   HYBRID SLIDER NAVIGATION
===================================================== */

.news-slider-prev,
.news-slider-next {

    min-width:
        42px;

    min-height:
        34px;

    white-space:
        nowrap;

}


/* =====================================================
   NAVIGATION HOVER
===================================================== */

.news-slider-prev:hover,
.news-slider-next:hover {

    border-color:
        rgba(0,255,245,0.85);

    color:
        #00FFF5;

    box-shadow:
        0 0 18px
        rgba(0,255,245,0.12);

}


/* =====================================================
   NAVIGATION FOCUS
===================================================== */

.news-slider-prev:focus-visible,
.news-slider-next:focus-visible {

    outline:
        2px solid
        #00FFF5;

    outline-offset:
        3px;

}


/* =====================================================
   NAVIGATION DISABLED
===================================================== */

.news-slider-prev:disabled,
.news-slider-next:disabled {

    opacity:
        0.35;

    cursor:
        not-allowed;

}


/* =====================================================
   HYBRID FEED RESPONSIVE
===================================================== */

@media (
    max-width: 575.98px
) {

    .news-feed {

        gap:
            0.85rem;

    }

    .featured-news-card > .news-card {

        padding:
            0.85rem;

    }

}