/* ==========================================================================
   SSHK Winner Registry – Frontend-stilar
   Gäller .sshk-wr-ranking och alla child-element.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Anmälningsbanner – automatisk top-banner + [sshk_special_banner]
   -------------------------------------------------------------------------- */

/*
 * Profilfärger (SShK Grafisk Manual 2024)
 * SShK Röd:  #ab192d
 * SShK Gul:  #f5c65d
 * Sennen Vit: #fdfbf3
 */

/* Wrapper för automatisk top-banner (position:fixed ovanför allt) */
.sshk-wr-top-banner-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
}

/* WordPress admin-bar: skjut ned bannern så den inte täcker admin-fältet */
.admin-bar .sshk-wr-top-banner-wrap {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar .sshk-wr-top-banner-wrap {
        top: 46px;
    }
}

/* Bannern själv – används av både shortcode och top-banner */
.sshk-wr-special-banner {
    background: #ab192d;   /* SShK Röd – korrekt profilfärg */
    color: #fdfbf3;        /* Sennen Vit */
    width: 100%;
    padding: 9px 20px;
    box-sizing: border-box;
    margin-bottom: 0;
}

.sshk-wr-banner-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    max-width: 1200px;
    margin: 0 auto;
}

.sshk-wr-banner-flag {
    font-weight: 700;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    color: #f5c65d;        /* SShK Gul – sticker ut mot röd bakgrund */
}

.sshk-wr-banner-text {
    flex: 1;
    font-size: 0.95em;
    line-height: 1.3;
    min-width: 180px;
    color: #fdfbf3;
}

/* !important krävs för att vinna mot temats globala länkfärger */
.sshk-wr-special-banner .sshk-wr-banner-show-link {
    color: #f5c65d !important;  /* SShK Gul – synlig mot röd bakgrund */
    text-decoration: underline;
    font-weight: 700;
}

.sshk-wr-special-banner .sshk-wr-banner-show-link:hover {
    color: #fdfbf3 !important;  /* Sennen Vit vid hover */
    text-decoration: none;
}

.sshk-wr-banner-cta {
    display: inline-block;
    background: #1b5633;   /* SShK Grön accent */
    color: #fff !important;
    font-weight: 700;
    font-size: 0.88em;
    padding: 6px 14px;
    border-radius: 3px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}

.sshk-wr-banner-cta:hover {
    background: #143f26;   /* Mörkare grön vid hover */
    color: #fff !important;
}

/* Mobil: flag på egen rad, text + knapp bredvid varandra på nästa rad */
@media (max-width: 600px) {
    .sshk-wr-special-banner {
        padding: 8px 14px;
    }

    .sshk-wr-banner-inner {
        gap: 4px 10px;
    }

    .sshk-wr-banner-flag {
        flex-basis: 100%;
    }

    .sshk-wr-banner-text {
        flex-basis: 100%;
    }

    .sshk-wr-banner-cta {
        flex-shrink: 0;
    }
}

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.sshk-wr-ranking {
    font-family: inherit;
    color: inherit;
    width: 100%;
}

/* --------------------------------------------------------------------------
   Rubriker
   -------------------------------------------------------------------------- */
.sshk-wr-title {
    font-size: 1.5em;
    margin: 2em 0 0.4em;        /* Extra luft ovanför varje ras */
    border-bottom: 5px solid #ab192d;
    padding-bottom: 0.3em;
}

.sshk-wr-title:first-of-type {
    margin-top: 0;              /* Första rasrubriken behöver ingen toppmarginal */
}

.sshk-wr-category-title {
    font-size: 1.15em;
    margin: 1.8em 0 0.4em;
    padding-left: 10px;
    border-left: 4px solid #ab192d;
    color: #ab192d;
}

.sshk-wr-sex-title {
    font-size: 0.85em;
    font-weight: 700;
    margin: 1em 0 0.3em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888;
}

/* --------------------------------------------------------------------------
   Medräknade utställningar
   -------------------------------------------------------------------------- */
.sshk-wr-shows-included {
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 1.8em;
}

.sshk-wr-shows-included h3 {
    font-size: 0.85em;
    margin: 0 0 0.5em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ab192d;
    font-weight: 700;
}

.sshk-wr-shows-inline {
    margin: 0;
    font-size: 0.9em;
    line-height: 1.7;
    color: #444;
}

/* Sammanfattningsrad i botten av medräknade-boxen och under ej medräknade-tabellen */
.sshk-wr-shows-stats {
    margin: 0.7em 0 0;
    padding-top: 0.55em;
    border-top: 1px solid #e6e6e6;
    font-size: 0.82em;
    color: #888;
}

.sshk-wr-shows-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.sshk-wr-shows-table th,
.sshk-wr-shows-table td {
    text-align: left;
    padding: 4px 10px 4px 0;
    border: none;
}

.sshk-wr-shows-table th {
    font-weight: 600;
    color: #555;
}

.sshk-wr-badge-sshk {
    display: inline-block;
    font-size: 0.75em;
    font-weight: 700;
    background: #ab192d;
    color: #fff;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 5px;
    vertical-align: middle;
    letter-spacing: 0.03em;
}

/* --------------------------------------------------------------------------
   Topplistetabell
   -------------------------------------------------------------------------- */
.sshk-wr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
    margin-bottom: 0.5em;
}

.sshk-wr-table thead tr {
    background: #212122;
    color: #fff;
}

.sshk-wr-table th {
    padding: 9px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 0.82em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sshk-wr-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

/* Kolumnbredder – fasta så tabellen inte hoppar */
.sshk-wr-table      { table-layout: fixed; }
.sshk-wr-col-rank   { width: 44px;  text-align: center; }
.sshk-wr-col-name   { width: 38%;   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sshk-wr-col-regnr  { width: 130px; font-size: 0.88em; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sshk-wr-col-points { width: 64px;  text-align: center; }
.sshk-wr-col-chain  { color: #444;  font-size: 0.9em; font-family: "Courier New", Courier, monospace; white-space: nowrap; }

/* Zebra-ränder för vanliga rader */
.sshk-wr-table tbody tr:nth-child(even):not(.sshk-wr-row--gold):not(.sshk-wr-row--silver):not(.sshk-wr-row--bronze) {
    background: #fafafa;
}

/* Placeringsmarkeringar – lite starkare färger för tydlighet */
.sshk-wr-row--gold   { background: #fff8d6; }
.sshk-wr-row--silver { background: #f0f0f0; }
.sshk-wr-row--bronze { background: #fff0e8; }

.sshk-wr-row--gold   td:first-child::before { content: "🥇 "; }
.sshk-wr-row--silver td:first-child::before { content: "🥈 "; }
.sshk-wr-row--bronze td:first-child::before { content: "🥉 "; }

/* --------------------------------------------------------------------------
   Poängkedja och SShK-not
   -------------------------------------------------------------------------- */
.sshk-wr-chain {
    /* Stil hanteras av .sshk-wr-col-chain */
}

.sshk-wr-sshk-note {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.82em;
    color: #ab192d;
    font-weight: 600;
    cursor: help;
}

/* --------------------------------------------------------------------------
   Förklaring
   -------------------------------------------------------------------------- */
.sshk-wr-legend {
    font-size: 0.82em;
    color: #888;
    margin-top: 1.2em;
    padding-top: 1em;
    border-top: 1px solid #eee;
}

/* --------------------------------------------------------------------------
   Ej medräknade utställningar
   -------------------------------------------------------------------------- */
.sshk-wr-unapproved {
    margin-top: 3em;
    padding-top: 1em;
    border-top: 3px solid #eee;
}

.sshk-wr-unapproved-title {
    font-size: 1.5em;
    margin-bottom: 1em;
    border-bottom: 5px solid #ab192d;
    padding-bottom: 0.3em;
}

.sshk-wr-unapproved-table {
    table-layout: fixed;
}

.sshk-wr-ua-col-date {
    width: 220px;
    white-space: nowrap;
}

.sshk-wr-ua-col-name {
    width: 260px;
}

.sshk-wr-ua-col-deadline {
    width: 220px;
    font-size: 0.88em;
    color: #555;
}

.sshk-wr-deadline-empty {
    color: #bbb;
}

/* Deadline stängd */
.sshk-wr-deadline-closed {
    color: #999;
    font-style: italic;
    font-size: 0.85em;
}

/* >7 dagar kvar – neutral */
.sshk-wr-deadline-normal {
    color: #555;
}

/* 4–7 dagar kvar – lite påminnande */
.sshk-wr-deadline-soon {
    color: #002f87;  /* SShK Blå */
    font-weight: 600;
}

/* 2–3 dagar kvar – tydlig varning */
.sshk-wr-deadline-urgent {
    color: #b45309;
    font-weight: 700;
}

/* Idag / ≤3 dagar – maximalt tryck */
.sshk-wr-deadline-fire {
    color: #ab192d;
    font-weight: 700;
}

.sshk-wr-ua-col-note {
    /* tar resterande bredd */
}

/* Kalender-ikon – diskret länk bredvid deadline-texten */
.sshk-wr-cal-link {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.85em;
    text-decoration: none;
    opacity: 0.55;
    transition: opacity 0.15s;
    vertical-align: middle;
    line-height: 1;
}

.sshk-wr-cal-link:hover {
    opacity: 1;
}

.sshk-wr-ua-type {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.82em;
    color: #888;
    font-weight: 600;
}

.sshk-wr-weekday {
    color: #888;
    font-size: 0.9em;
    font-style: italic;
}

/* --------------------------------------------------------------------------
   Felmeddelanden och tomt tillstånd
   -------------------------------------------------------------------------- */
.sshk-wr-error {
    color: #ab192d;
    font-style: italic;
}

.sshk-wr-empty {
    color: #666;
    font-style: italic;
}

/* --------------------------------------------------------------------------
   Responsivitet – smal vy
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .sshk-wr-col-regnr,
    .sshk-wr-col-chain { display: none; }

    .sshk-wr-col-points { width: 48px; }

    /* Ej medräknade – stapla kolumner vertikalt på mobil */
    .sshk-wr-unapproved-table { table-layout: auto; }

    .sshk-wr-unapproved-table thead { display: none; }

    .sshk-wr-unapproved-table tr {
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }

    .sshk-wr-unapproved-table td {
        display: block;
        padding: 2px 0;
        border: none;
        width: 100% !important;
        white-space: normal;
    }

    .sshk-wr-ua-col-date {
        font-size: 0.85em;
        color: #666;
    }

    .sshk-wr-ua-col-name {
        font-weight: 600;
        font-size: 1em;
    }

    .sshk-wr-ua-col-deadline {
        font-size: 0.82em;
        color: #777;
    }

    /* På mobil saknas kolumnrubrik – prefixera aktiva deadlinetillstånd med "Anmälan" */
    .sshk-wr-ua-col-deadline .sshk-wr-deadline-normal::before,
    .sshk-wr-ua-col-deadline .sshk-wr-deadline-soon::before,
    .sshk-wr-ua-col-deadline .sshk-wr-deadline-urgent::before,
    .sshk-wr-ua-col-deadline .sshk-wr-deadline-fire::before {
        content: "Anmälan ";
    }

    .sshk-wr-ua-col-note {
        font-size: 0.9em;
        margin-top: 2px;
    }
}