/* ==========================================================
   UKSMG 6m DX Desktop
   desktop.css
   ========================================================== */

:root {

    --card-bg: #ffffff;
    --card-border: #b8b8b8;
    --card-shadow: 0 2px 8px rgba(0,0,0,.15);

    --header-bg: #465bb8;
    --header-text: #ffffff;

    --title: #003366;

    --radius: 8px;

    --gap: 24px;

    --transition: .20s ease;
}


/* ==========================================================
   Overall page
   ========================================================== */

.dx-desktop {

    max-width: 1400px;

  /*  margin: 20px auto;

    padding: 20px;  */

    box-sizing: border-box;

}


/* ==========================================================
   Header
   ========================================================== */

.desktop-header {

    background: var(--header-bg);

    color: var(--header-text);

    border-radius: var(--radius);

    padding: 20px;

    margin-bottom: 25px;

    box-shadow: var(--card-shadow);

}

.desktop-header h1 {

    margin: 0;

    font-size: 2rem;

    font-weight: 600;
	

}

.desktop-header p {

    margin: 6px 0 0;

    opacity: .9;

}


/* ==========================================================
   Main Grid
   ========================================================== */

.desktop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}


/* Full width items */

.full {

    grid-column: 1 / -1;

}


/* ==========================================================
   Cards
   ========================================================== */

.card {

    background: var(--card-bg);

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

    border-radius: var(--radius);

    box-shadow: var(--card-shadow);

    overflow: hidden;

}


/* ==========================================================
   Card titles
   ========================================================== */

.card h2 {

    margin: 0;

    padding: 12px 16px;

    background: #f5f5f5;

    border-bottom: 1px solid #ddd;

    color: var(--title);

    font-size: 1.05rem;

    font-weight: 600;

    cursor: pointer;

    transition: background var(--transition);

}

.card h2:hover {

    background: #ececec;

}

.card h2 small {

    font-weight: normal;

    color: #666;

}


/* ==========================================================
   Frames
   ========================================================== */

.card-frame {

    height: 240px;

    cursor: pointer;

}

.card-frame.wide {

    height: 260px;

}

.card-frame iframe {

    width: 100%;

    height: 100%;

    border: none;

}


/* ==========================================================
   Images
   ========================================================== */

.card-image {

    height: 240px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #000;

    cursor: pointer;

    overflow: hidden;

}

.card-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .25s ease;

}

.card-image:hover img {

    transform: scale(1.03);

}


/* ==========================================================
   Footer note
   ========================================================== */

.footer-note {

    text-align: center;

    font-size: .9rem;

    color: #666;

    margin-top: -10px;

    margin-bottom: 5px;

}

.footer-note a {

    color: #0066cc;

    text-decoration: none;

}

.footer-note a:hover {

    text-decoration: underline;

}


/* ==========================================================
   Hover effect
   ========================================================== */

.card:hover {

    box-shadow:

        0 8px 24px rgba(0,0,0,.22);

}


/* ==========================================================
   Responsive
   ========================================================== */

@media screen and (max-width: 700px) {

    .desktop-grid {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }

    .desktop-grid .full {
        grid-column: auto !important;
    }

    .dx-desktop {
        width: 100%;
        max-width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }

    .card {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .card-frame,
    .card-image {
        width: 100%;
        box-sizing: border-box;
    }

}


/* ==========================================================
   Smooth appearance
   ========================================================== */

.card {

    animation: fadeIn .35s ease;

}

@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/* ==========================================================
   GEOMAGNETIC ACTIVITY CARD
========================================================== */

.geomag-card .card-content{
    padding:15px;
}

/* ----- LED Status ----- */

.geomag-status{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    background:#1d1d1d;
    color:#ffffff;

    padding:10px;

    border-radius:6px;

    font-size:1rem;
    font-weight:700;

    margin-bottom:15px;

}

.status-ball{

    width:22px;
    height:22px;

    border-radius:50%;

    border:1px solid #444;

    box-shadow:
        inset 0 2px 2px rgba(255,255,255,.35),
        0 0 10px rgba(0,0,0,.35);

}

/* Quiet */

.geomag-status.quiet .status-ball{

    background:radial-gradient(circle at 35% 35%,
        #b8ffb8 0%,
        #00ff00 45%,
        #008800 100%);

    box-shadow:
        0 0 12px #00ff00,
        inset 0 2px 2px rgba(255,255,255,.6);

}

/* Unsettled */

.geomag-status.unsettled .status-ball{

    background:radial-gradient(circle at 35% 35%,
        #ffffaa 0%,
        #ffd400 45%,
        #aa7700 100%);

    box-shadow:
        0 0 12px #ffd400,
        inset 0 2px 2px rgba(255,255,255,.6);

}

/* Storm */

.geomag-status.storm .status-ball{

    background:radial-gradient(circle at 35% 35%,
        #ffd6a5 0%,
        #ff8800 45%,
        #aa4400 100%);

    box-shadow:
        0 0 12px #ff8800,
        inset 0 2px 2px rgba(255,255,255,.6);

}

/* Major */

.geomag-status.major .status-ball{

    background:radial-gradient(circle at 35% 35%,
        #ffb3b3 0%,
        #ff0000 45%,
        #990000 100%);

    box-shadow:
        0 0 15px #ff0000,
        inset 0 2px 2px rgba(255,255,255,.6);

}

.status-text{

    letter-spacing:1px;
}

/* ----- Data Table ----- */

.geomag-table{

    width:100%;
    border-collapse:collapse;

}

.geomag-table td{

    padding:8px 4px;
    border-bottom:1px solid #e5e5e5;

}

.geomag-table td:first-child{

    color:#666;
    width:55%;

}

.geomag-table td:last-child{

    text-align:right;
    font-weight:600;

}

/* ----- Update Time ----- */

.geomag-updated{

    margin-top:12px;

    text-align:center;

    color:#777;

    font-size:.8rem;

}

/* ==========================================================
   6m Propagation Meter
========================================================== */

.prop-meter{

    margin-bottom:18px;

}

.prop-header{

    display:flex;
    justify-content:space-between;
    margin-bottom:6px;

    font-weight:600;

}

.prop-bar{

    width:100%;
    height:18px;

    background:#ddd;

    border-radius:10px;

    overflow:hidden;

    border:1px solid #bbb;

}

.prop-fill{

    height:100%;

    background:linear-gradient(
        90deg,
        #00b050 0%,
        #ffff00 50%,
        #ff9800 75%,
        #ff0000 100%
    );

    transition:width .5s ease;

}

.prop-text{

    text-align:center;

    margin-top:8px;

    font-weight:600;

    color:#555;

}

/* ==========================================================
   6m Propagation Conditions
   ========================================================== */

.propagation-card {
    width: 100%;
    box-sizing: border-box;
}

.propagation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 12px;
}

.propagation-title {
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.2;
}

.propagation-subtitle {
    font-size: 0.85em;
    color: #666;
    margin-top: 4px;
}

.propagation-condition {
    padding: 8px 18px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9em;
}

.propagation-condition.good {
    background: #d8f3dc;
    color: #1b5e20;
}

.propagation-condition.fair {
    background: #fff3cd;
    color: #856404;
}

.propagation-condition.unsettled {
    background: #ffe0b2;
    color: #e65100;
}

.propagation-condition.disturbed {
    background: #ffcdd2;
    color: #b71c1c;
}

.propagation-condition.unknown {
    background: #eeeeee;
    color: #555;
}

.propagation-status {
    padding: 9px 12px;
    border-radius: 6px;
    margin-bottom: 12px;
}

.propagation-status.quiet {
    background: #d8f3dc;
    color: #1b5e20;
}

.propagation-status.unsettled {
    background: #fff3cd;
    color: #856404;
}

.propagation-status.storm {
    background: #ffcdd2;
    color: #b71c1c;
}

.propagation-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.propagation-value {
    background: #f4f4f4;
    padding: 12px;
    border-radius: 6px;
    text-align: center;
}

.propagation-value span {
    display: block;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 5px;
}

.propagation-value strong {
    display: block;
    font-size: 1.15rem;
}

.propagation-footer {
    margin-top: 12px;
    font-size: 0.75rem;
    color: #777;
    text-align: right;
}

@media screen and (max-width: 700px) {

    .propagation-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .propagation-condition {
        align-self: flex-start;
    }

    .propagation-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* ==========================================================
   6m Propagation Indicators
   ========================================================== */

.propagation-indicators {

    display: grid;

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

    gap: 15px;

    margin: 15px 0;

}


.propagation-indicator {

    text-align: center;

}


/* ----------------------------------------------------------
   Circular indicator
---------------------------------------------------------- */

.indicator-circle {

    width: 82px;

    height: 82px;

    margin: 0 auto 8px auto;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    border: 5px solid;

    box-sizing: border-box;

}


.indicator-value {

    font-size: 1.05rem;

    line-height: 1;

}


/* ----------------------------------------------------------
   Green
---------------------------------------------------------- */

.indicator-circle.good {

    background: #d8f3dc;

    border-color: #2e7d32;

    color: #1b5e20;

}


/* ----------------------------------------------------------
   Yellow
---------------------------------------------------------- */

.indicator-circle.fair {

    background: #fff3cd;

    border-color: #f0ad00;

    color: #856404;

}


/* ----------------------------------------------------------
   Orange
---------------------------------------------------------- */

.indicator-circle.unsettled {

    background: #ffe0b2;

    border-color: #ef6c00;

    color: #e65100;

}


/* ----------------------------------------------------------
   Red
---------------------------------------------------------- */

.indicator-circle.storm {

    background: #ffcdd2;

    border-color: #c62828;

    color: #b71c1c;

}


/* ----------------------------------------------------------
   Unknown
---------------------------------------------------------- */

.indicator-circle.unknown {

    background: #eeeeee;

    border-color: #999;

    color: #555;

}


/* ----------------------------------------------------------
   Labels
---------------------------------------------------------- */

.indicator-label {

    font-weight: 700;

    font-size: 0.9rem;

}


.indicator-unit {

    font-size: 0.75rem;

    color: #777;

    margin-top: 2px;

}


/* ----------------------------------------------------------
   Overall condition dot
---------------------------------------------------------- */

.condition-dot {

    display: inline-block;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    margin-right: 6px;

}


/* ----------------------------------------------------------
   Condition colours
---------------------------------------------------------- */

.propagation-condition.good {

    background: #d8f3dc;

    color: #1b5e20;

}


.propagation-condition.good .condition-dot {

    background: #2e7d32;

}


.propagation-condition.fair {

    background: #fff3cd;

    color: #856404;

}


.propagation-condition.fair .condition-dot {

    background: #f0ad00;

}


.propagation-condition.unsettled {

    background: #ffe0b2;

    color: #e65100;

}


.propagation-condition.unsettled .condition-dot {

    background: #ef6c00;

}


.propagation-condition.storm {

    background: #ffcdd2;

    color: #b71c1c;

}


.propagation-condition.storm .condition-dot {

    background: #c62828;

}


.propagation-condition.unknown {

    background: #eeeeee;

    color: #555;

}


.propagation-condition.unknown .condition-dot {

    background: #999;

}


/* ----------------------------------------------------------
   Bz information message
---------------------------------------------------------- */

.propagation-message {

    padding: 9px 12px;

    border-radius: 6px;

    font-size: 0.85rem;

    margin-top: 5px;

}


.message-dot {

    display: inline-block;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    margin-right: 6px;

}


.propagation-message.good {

    background: #d8f3dc;

    color: #1b5e20;

}


.propagation-message.good .message-dot {

    background: #2e7d32;

}


.propagation-message.fair {

    background: #fff3cd;

    color: #856404;

}


.propagation-message.fair .message-dot {

    background: #f0ad00;

}


.propagation-message.unsettled {

    background: #ffe0b2;

    color: #e65100;

}


.propagation-message.unsettled .message-dot {

    background: #ef6c00;

}


.propagation-message.storm {

    background: #ffcdd2;

    color: #b71c1c;

}


.propagation-message.storm .message-dot {

    background: #c62828;

}


/* ----------------------------------------------------------
   Mobile
---------------------------------------------------------- */

@media screen and (max-width: 700px) {

    .propagation-indicators {

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

        gap: 15px;

    }

}

/* ==========================================================
   Remove unwanted propagation card pseudo-elements
   ========================================================== */

.propagation-card::before,
.propagation-card::after,
.propagation-indicators::before,
.propagation-indicators::after,
.propagation-indicator::before,
.propagation-indicator::after {
    content: none !important;
    display: none !important;
}

/* ==========================================================
   Auroral / 6m Potential
   Bz indicator aligned with Kp indicator
   ========================================================== */

.auroral-content {

    display: grid;

    /*
     * Desktop:
     * First column is the same width as
     * the first propagation indicator.
     */
    grid-template-columns: repeat(4, 1fr);

    column-gap: 15px;

    align-items: center;

    width: 100%;

    box-sizing: border-box;

}


/* ==========================================================
   Bz Indicator
   ========================================================== */

.auroral-content .propagation-indicator {

    grid-column: 1;

    grid-row: 1;

    width: 100%;

    text-align: center;

}


/* Keep the circular Bz indicator centred
   within the first column */

.auroral-content .indicator-circle {

    margin-left: auto;

    margin-right: auto;

}


/* ==========================================================
   Explanation text
   ========================================================== */

.auroral-explanation {

    grid-column: 2 / 5;

    grid-row: 1;

    font-size: 0.85rem;

    color: #444;

    line-height: 1.4;

    padding-left: 0;

}


.auroral-explanation strong {

    display: block;

    color: #003366;

    margin-bottom: 5px;

}


.auroral-explanation p {

    margin: 0;

}


/* ==========================================================
   Mobile
   ========================================================== */

@media screen and (max-width: 700px) {

    .auroral-content {

        grid-template-columns: 1fr 1fr;

        column-gap: 15px;

        align-items: center;

    }


    .auroral-content .propagation-indicator {

        grid-column: 1;

        grid-row: 1;

    }


    .auroral-explanation {

        grid-column: 2;

        grid-row: 1;

    }

}


/* ==========================================================
   Small mobile
   ========================================================== */

@media screen and (max-width: 480px) {

    .auroral-content {

        grid-template-columns: 90px 1fr;

        column-gap: 10px;

    }

}