/*
Theme Name: Kooragrid Child (Dark Dashboard)
Theme URI: https://kooragrid.com
Description: Child theme for ColorMag. Hosts the dark-themed Soccer Dashboard
             custom template for page id=55 (لوحة المباريات).
Author: Hermes AI
Author URI: https://kooragrid.com
Template: colormag
Version: 0.2.0
Requires at least: 5.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kooragrid-child
*/

/*
 * ============================================================================
 * kooragrid dark theme palette  (cf. design PDF, sections 1-3)
 * ============================================================================
 * Palette tokens are exposed as CSS custom properties so the same palette
 * can be re-skinned without a single-property refactor downstream.
 *
 *   --kg-bg            page background
 *   --kg-card          primary card surface
 *   --kg-card-hi       card surface on hover / selected
 *   --kg-card-elev     elevated card surface (hero)
 *   --kg-neon          accent / live status / focus ring
 *   --kg-text          primary text colour
 *   --kg-text-sub      secondary / muted text
 *   --kg-border        card & table border
 *   --kg-border-hi     emphasised border on focus / hover
 *   --kg-shadow        card drop shadow
 *   --kg-radius        default border radius
 *
 *   Radius / sizing tokens are also exposed so future theme variants only
 *   need to override a few variables.
 */

:root {
    --kg-bg:           #0D1611;
    --kg-card:         #12221A;
    --kg-card-hi:      #183025;
    --kg-card-elev:    #0F1F14;
    --kg-neon:         #00FF66;
    --kg-neon-dim:     #00B348;
    --kg-text:         #FFFFFF;
    --kg-text-sub:     #B5C2BC;
    --kg-text-dim:     #6A7A72;
    --kg-border:       #1B3327;
    --kg-border-hi:    #2C5544;
    --kg-shadow:       0 12px 32px rgba(0, 0, 0, 0.45);
    --kg-shadow-soft:  0 4px 16px rgba(0, 0, 0, 0.30);
    --kg-radius:       14px;
    --kg-radius-lg:    22px;
    --kg-gap:          18px;
    --kg-pad:          18px;
    --kg-tap:          44px;        /* min tap-target height for RTL tabs */
    --kg-font-base:    'Cairo', 'Tajawal', system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
 * 1) Page-level dark reset (overrides ColorMag's bright-body rules)
 * -------------------------------------------------------------------------- */

body,
body[class*="page-template-page-soccer-dashboard-php"],
body.soccer-dashboard {
    background-color: var(--kg-bg);
    color: var(--kg-text);
    font-family: var(--kg-font-base);
}

/* kill ColorMag's article wrapper outline inside the dashboard body */
.kg-dashboard ~ * .cm-entry-summary,
.kg-dashboard ~ * .cm-entry-content {
    background-color: transparent;
}

body[class*="page-template-page-soccer-dashboard-php"] #page,
body[class*="page-template-page-soccer-dashboard-php"] #content,
body[class*="page-template-page-soccer-dashboard-php"] .cm-container {
    background-color: var(--kg-bg);
    max-width: 100%;
    padding-inline: 0;
    width: 100%;
}

/* --------------------------------------------------------------------------
 * 2) Dashboard shell + RTL container
 * -------------------------------------------------------------------------- */

.kg-dashboard {
    background: var(--kg-bg);
    color: var(--kg-text);
    font-family: var(--kg-font-base);
    direction: rtl;
    margin-inline: auto;
    padding: 28px clamp(16px, 4vw, 40px);
    max-width: 1280px;
    width: 100%;
}

.kg-zone {
    margin-block-end: 26px;
}

.kg-zone-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--kg-text);
    margin: 0 0 var(--kg-gap);
    padding-block-end: 10px;
    border-block-end: 1px solid var(--kg-border);
    letter-spacing: 0.4px;
}

/* --------------------------------------------------------------------------
 * 3) ZONE 1 — Top multi-day carousel
 * -------------------------------------------------------------------------- */

.kg-zone-top {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 3a) Ticker pill (single-line alert_headline) */
.kg-ticker-pill {
    background: linear-gradient(90deg, var(--kg-card-elev) 0%, var(--kg-card-hi) 100%);
    color: var(--kg-text);
    padding: 12px 18px;
    border-radius: var(--kg-radius);
    border: 1px solid var(--kg-border);
    box-shadow: var(--kg-shadow-soft);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.kg-ticker-pill.is-empty {
    color: var(--kg-text-dim);
    border-style: dashed;
}

.kg-ticker-link {
    color: var(--kg-text);
    text-decoration: none;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.kg-ticker-link:hover,
.kg-ticker-link:focus-visible {
    color: var(--kg-neon);
}

/* 3b) Tab strip */
.kg-carousel-tabs {
    display: flex;
    gap: 8px;
    background-color: var(--kg-card);
    padding: 6px;
    border-radius: var(--kg-radius);
    border: 1px solid var(--kg-border);
    inline-size: max-content;
    max-inline-size: 100%;
}

.kg-carousel-tab {
    appearance: none;
    background: transparent;
    color: var(--kg-text-sub);
    border: 0;
    padding: 10px 22px;
    min-block-size: var(--kg-tap);
    font: inherit;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
}

.kg-carousel-tab:hover {
    color: var(--kg-text);
    background-color: var(--kg-card-hi);
}

.kg-carousel-tab.is-active,
.kg-carousel-tab[aria-selected="true"] {
    background-color: var(--kg-neon);
    color: var(--kg-bg);
    box-shadow: 0 0 0 1px var(--kg-neon) inset;
}

.kg-carousel-tab:focus-visible {
    outline: 2px solid var(--kg-neon);
    outline-offset: 2px;
}

/* 3c) Carousel track + panes */
.kg-carousel-track {
    background-color: var(--kg-card);
    border-radius: var(--kg-radius);
    border: 1px solid var(--kg-border);
    padding: var(--kg-pad);
    box-shadow: var(--kg-shadow-soft);
    min-block-size: 220px;
}

.kg-pane {
    display: none;
}

.kg-pane.is-active {
    display: block;
    animation: kg-fade-in 180ms ease both;
}

@keyframes kg-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .kg-pane.is-active { animation: none; }
    .kg-carousel-tab { transition: none; }
}

.kg-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--kg-gap);
}

.kg-pane.is-empty .kg-card-list::before {
    content: attr(data-empty-text);
    color: var(--kg-text-dim);
    display: block;
    grid-column: 1 / -1;
    padding: 24px;
    text-align: center;
    border: 1px dashed var(--kg-border-hi);
    border-radius: 10px;
}

/* 3d) Match cards inside the carousel */
.kg-match-card {
    background-color: var(--kg-card-hi);
    border: 1px solid var(--kg-border);
    border-radius: 12px;
    padding: 14px 14px 16px;
    display: grid;
    grid-template-areas:
        "badge status"
        "teams teams"
        "meta meta";
    gap: 6px 10px;
    transition: transform 160ms ease, border-color 160ms ease;
}

.kg-match-card:hover {
    transform: translateY(-2px);
    border-color: var(--kg-border-hi);
}

.kg-match-card .league-badge {
    grid-area: badge;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--kg-text-sub);
}

.kg-match-card .league-badge .badge-dot {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--kg-neon);
}

.kg-match-card .status-pill {
    grid-area: status;
    justify-self: end;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: rgba(0, 255, 102, 0.12);
    color: var(--kg-neon);
    border: 1px solid rgba(0, 255, 102, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kg-match-card .status-pill[data-status="finished"] {
    background-color: rgba(181, 194, 188, 0.10);
    color: var(--kg-text-sub);
    border-color: rgba(181, 194, 188, 0.25);
}

.kg-match-card .teams-row {
    grid-area: teams;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-weight: 700;
    font-size: 15px;
}

.kg-match-card .team {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-inline-size: 0;
}

.kg-match-card .team-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kg-match-card .team-flag {
    inline-size: 22px;
    block-size: 16px;
    border-radius: 2px;
    background: var(--kg-border-hi) center/cover no-repeat;
    flex: none;
}

.kg-match-card .score {
    font-family: 'Cairo', monospace;
    font-variant-numeric: tabular-nums;
    color: var(--kg-neon);
    font-size: 16px;
}

.kg-match-card .status-pill[data-status="finished"] ~ .teams-row .score {
    color: var(--kg-text);
}

.kg-match-card .meta-row {
    grid-area: meta;
    font-size: 12px;
    color: var(--kg-text-sub);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-block-start: 1px dashed var(--kg-border);
    padding-block-start: 8px;
}

/* --------------------------------------------------------------------------
 * 4) ZONE 2 — Main 3-column split
 * -------------------------------------------------------------------------- */

.kg-zone-main {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    gap: var(--kg-gap);
}

@media (max-width: 980px) {
    .kg-zone-main {
        grid-template-columns: 1fr;
    }
    .kg-hero { order: -1; }
}

.kg-card {
    background-color: var(--kg-card);
    border: 1px solid var(--kg-border);
    border-radius: var(--kg-radius);
    padding: var(--kg-pad);
    box-shadow: var(--kg-shadow-soft);
    min-block-size: 200px;
}

/* 4a) Match centre (left column) */
.kg-match-center .kg-match-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kg-match-center .kg-match-list li {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background-color: var(--kg-card-hi);
    border: 1px solid var(--kg-border);
    border-radius: 10px;
    font-size: 14px;
}

.kg-match-center .team-block {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-inline-size: 0;
}

[dir="rtl"] .kg-match-center .team-block:first-child {
    justify-content: flex-end;
    text-align: end;
}

[dir="rtl"] .kg-match-center .team-block:last-child {
    justify-content: flex-start;
    text-align: start;
}

.kg-match-center .vs-pill {
    background: var(--kg-bg);
    color: var(--kg-neon);
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    border: 1px solid var(--kg-border-hi);
}

/* 4b) Hero card (middle column) */
.kg-hero {
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(0, 255, 102, 0.18) 0%, transparent 60%),
        linear-gradient(180deg, var(--kg-card-elev) 0%, var(--kg-card) 100%);
    border: 1px solid var(--kg-border-hi);
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.kg-hero-gradient {
    padding: 36px 28px;
    inline-size: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
}

.kg-hero-tag {
    display: inline-flex;
    align-self: flex-start;
    background-color: var(--kg-neon);
    color: var(--kg-bg);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.kg-hero-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: var(--kg-text);
}

.kg-hero-subtitle {
    margin: 0;
    color: var(--kg-text-sub);
    font-size: 16px;
    line-height: 1.5;
    max-inline-size: 56ch;
}

.kg-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-block-start: 8px;
}

.kg-hero-meta .meta-pill {
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--kg-border-hi);
    color: var(--kg-text-sub);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
}

/* 4c) Top scorers (right column) */
.kg-scorers .kg-scorer-table {
    inline-size: 100%;
    border-collapse: collapse;
    direction: rtl;
}

.kg-scorers .kg-scorer-table th,
.kg-scorers .kg-scorer-table td {
    padding: 10px 8px;
    border-block-end: 1px solid var(--kg-border);
    font-size: 14px;
    color: var(--kg-text);
}

.kg-scorers .kg-scorer-table thead th {
    color: var(--kg-text-sub);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.6px;
    background-color: var(--kg-card-hi);
}

[dir="rtl"] .kg-scorers .kg-scorer-table th,
[dir="rtl"] .kg-scorers .kg-scorer-table td {
    text-align: start;
}

.kg-scorers .kg-scorer-table tbody tr:hover {
    background-color: var(--kg-card-hi);
}

.kg-scorers .kg-scorer-table .rank {
    font-variant-numeric: tabular-nums;
    color: var(--kg-neon);
    font-weight: 700;
    inline-size: 32px;
    text-align: center;
}

.kg-scorers .kg-scorer-table .goals {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--kg-text);
    inline-size: 56px;
    text-align: end;
}

.kg-scorers .kg-scorer-table .empty-row td {
    color: var(--kg-text-dim);
    text-align: center;
    padding: 24px 12px;
}

/* --------------------------------------------------------------------------
 * 5) ZONE 3 — Bottom competition card strip
 * -------------------------------------------------------------------------- */

.kg-zone-bottom {
    background-color: var(--kg-card);
    border: 1px solid var(--kg-border);
    border-radius: var(--kg-radius);
    padding: var(--kg-pad);
    box-shadow: var(--kg-shadow-soft);
}

.kg-comp-strip {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    inline-size: 100%;
}

.kg-comp-card {
    background-color: var(--kg-card-hi);
    border: 1px solid var(--kg-border);
    border-radius: 12px;
    padding: 12px 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-inline-size: 160px;
    flex: 1 1 200px;
    max-inline-size: 280px;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.kg-comp-card:hover,
.kg-comp-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--kg-neon-dim);
    background-color: var(--kg-card-elev);
    outline: none;
}

.kg-comp-flag {
    inline-size: 28px;
    block-size: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background-color: var(--kg-bg);
    border-radius: 8px;
    flex: none;
}

.kg-comp-name {
    color: var(--kg-text);
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * 6) Utility / accessibility
 * -------------------------------------------------------------------------- */

.kg-sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .kg-match-card:hover,
    .kg-comp-card:hover {
        transform: none;
    }
}

/* End of file. */