@import url('./main-layout.css');
@import url('./keymono-brand.css');

.back-button-margin{
    margin: 15px;
}

.display-content-center{
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.warning-color{
    color: var(--lumo-error-color);
    font-size: 12px;
}

.form-width-style {
    width: 20em;
    align-items: center;
    justify-content: center;
}

.custom-form-layout {
    width: 400px;
    align-self: center;
}

.offer-card {
    background-color: var(--lumo-contrast-5pct);
    background-clip: border-box;
    border: 1px solid var(--lumo-contrast-20pct);
    border-radius: 0.75rem;
}

vaadin-grid::part(selected-row-cell) {
    --vaadin-grid-cell-background: var(--lumo-primary-color-10pct);
}

    @media only screen and (max-width: 767px) { /* for all mobile devices */
        .geo-layout{
            display: flex;
            flex-direction: column-reverse;
        }
        .main-layout {
            width: 100% !important;
        }
        .events-grid{
            width: 100% !important;
        }
        .app-header {
            padding-inline: 0 !important;
        }
        .app-header vaadin-drawer-toggle {
            margin-left: 2px;
        }
        .logout-btn::part(label) {
            display: none;
        }
        .logout-btn {
            min-width: 0;
            padding-inline: 0.25em;
            margin-right: 8px;
        }
        .logout-btn::part(prefix) {
            margin: 0;
        }
        .action-bar vaadin-button::part(label) {
            display: none;
        }
        .action-bar vaadin-button {
            min-width: 0;
            padding-inline: 0.25em;
        }
        .action-bar vaadin-button::part(prefix) {
            margin: 0;
        }
        .table-toolbar {
            flex-wrap: wrap;
        }
        vaadin-app-layout vaadin-vertical-layout {
            padding: 4px;
        }
        vaadin-app-layout::part(drawer) {
            max-width: 70vw;
        }
    }
    @media only screen and (min-width: 768px) and (max-width: 1023px) { /* for all tab devices */
        .geo-layout{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
    }

.footer-div{
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

/* ── Kinguin Raw View: Badge Colors ── */

/* Shared badge base */
.kinguin-badge {
    display: inline-block;
    padding: 0.15em 0.5em;
    border-radius: 0.25em;
    font-size: var(--lumo-font-size-xs);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

/* ── Platform badges (brand-derived) ── */
.badge-platform-steam           { color: oklch(0.75 0.08 240); background: oklch(0.75 0.08 240 / 0.12); }
.badge-platform-gog             { color: oklch(0.72 0.12 300); background: oklch(0.72 0.12 300 / 0.12); }
.badge-platform-epic_games      { color: oklch(0.75 0.01 250); background: oklch(0.75 0.01 250 / 0.12); }
.badge-platform-ubisoft_connect { color: oklch(0.72 0.12 260); background: oklch(0.72 0.12 260 / 0.12); }
.badge-platform-origin          { color: oklch(0.78 0.14 60);  background: oklch(0.78 0.14 60 / 0.12); }
.badge-platform-xbox_series_xs  { color: oklch(0.76 0.14 145); background: oklch(0.76 0.14 145 / 0.12); }
.badge-platform-xbox_one        { color: oklch(0.73 0.12 145); background: oklch(0.73 0.12 145 / 0.12); }
.badge-platform-windows         { color: oklch(0.78 0.08 220); background: oklch(0.78 0.08 220 / 0.12); }
.badge-platform-ps4             { color: oklch(0.68 0.14 270); background: oklch(0.68 0.14 270 / 0.12); }
.badge-platform-ps5             { color: oklch(0.70 0.14 270); background: oklch(0.70 0.14 270 / 0.12); }
.badge-platform-nintendo_switch { color: oklch(0.70 0.16 25);  background: oklch(0.70 0.16 25 / 0.12); }
.badge-platform-battle_net      { color: oklch(0.78 0.10 200); background: oklch(0.78 0.10 200 / 0.12); }
.badge-platform-amazon          { color: oklch(0.82 0.13 80);  background: oklch(0.82 0.13 80 / 0.12); }

/* ── Region badges (continent hue families) ── */
/* Region free: green */
.badge-region-region_free       { color: oklch(0.78 0.10 150); background: oklch(0.78 0.10 150 / 0.12); }

/* Europe family: blue hues */
.badge-region-europe            { color: oklch(0.72 0.10 240); background: oklch(0.72 0.10 240 / 0.12); }
.badge-region-united_kingdom    { color: oklch(0.70 0.10 235); background: oklch(0.70 0.10 235 / 0.12); }
.badge-region-germany           { color: oklch(0.74 0.10 245); background: oklch(0.74 0.10 245 / 0.12); }
.badge-region-france            { color: oklch(0.71 0.10 230); background: oklch(0.71 0.10 230 / 0.12); }
.badge-region-poland            { color: oklch(0.73 0.10 250); background: oklch(0.73 0.10 250 / 0.12); }
.badge-region-czechia           { color: oklch(0.69 0.10 225); background: oklch(0.69 0.10 225 / 0.12); }
.badge-region-emea              { color: oklch(0.75 0.10 242); background: oklch(0.75 0.10 242 / 0.12); }

/* Americas family: teal/cyan */
.badge-region-united_states     { color: oklch(0.75 0.09 190); background: oklch(0.75 0.09 190 / 0.12); }
.badge-region-north_america     { color: oklch(0.73 0.09 185); background: oklch(0.73 0.09 185 / 0.12); }
.badge-region-latin_america     { color: oklch(0.77 0.09 195); background: oklch(0.77 0.09 195 / 0.12); }
.badge-region-brazil            { color: oklch(0.74 0.09 180); background: oklch(0.74 0.09 180 / 0.12); }
.badge-region-argentina         { color: oklch(0.76 0.09 200); background: oklch(0.76 0.09 200 / 0.12); }
.badge-region-mexico            { color: oklch(0.72 0.09 188); background: oklch(0.72 0.09 188 / 0.12); }

/* Asia family: amber/gold */
.badge-region-asia              { color: oklch(0.80 0.10 80);  background: oklch(0.80 0.10 80 / 0.12); }
.badge-region-china             { color: oklch(0.78 0.10 75);  background: oklch(0.78 0.10 75 / 0.12); }
.badge-region-japan             { color: oklch(0.82 0.10 85);  background: oklch(0.82 0.10 85 / 0.12); }
.badge-region-india             { color: oklch(0.79 0.10 70);  background: oklch(0.79 0.10 70 / 0.12); }
.badge-region-sea               { color: oklch(0.81 0.10 90);  background: oklch(0.81 0.10 90 / 0.12); }

/* Russia/CIS family: purple */
.badge-region-russia            { color: oklch(0.70 0.10 300); background: oklch(0.70 0.10 300 / 0.12); }
.badge-region-cis               { color: oklch(0.72 0.10 305); background: oklch(0.72 0.10 305 / 0.12); }
.badge-region-belarus           { color: oklch(0.68 0.10 295); background: oklch(0.68 0.10 295 / 0.12); }
.badge-region-ukraine           { color: oklch(0.74 0.10 310); background: oklch(0.74 0.10 310 / 0.12); }

/* Africa/MEA family: warm orange */
.badge-region-africa            { color: oklch(0.76 0.10 50);  background: oklch(0.76 0.10 50 / 0.12); }
.badge-region-mea               { color: oklch(0.78 0.10 55);  background: oklch(0.78 0.10 55 / 0.12); }
.badge-region-egypt             { color: oklch(0.74 0.10 45);  background: oklch(0.74 0.10 45 / 0.12); }

/* Oceania family: coral */
.badge-region-oceania           { color: oklch(0.72 0.12 25);  background: oklch(0.72 0.12 25 / 0.12); }
.badge-region-australia         { color: oklch(0.74 0.12 30);  background: oklch(0.74 0.12 30 / 0.12); }
.badge-region-new_zealand       { color: oklch(0.70 0.12 20);  background: oklch(0.70 0.12 20 / 0.12); }

/* Other regions: earth-tone */
.badge-region-turkey            { color: oklch(0.72 0.06 60);  background: oklch(0.72 0.06 60 / 0.12); }
.badge-region-bosnia_herzegovina { color: oklch(0.70 0.06 55); background: oklch(0.70 0.06 55 / 0.12); }
.badge-region-serbia            { color: oklch(0.74 0.06 65);  background: oklch(0.74 0.06 65 / 0.12); }

/* ── Delivery type badges ── */
.badge-delivery-key             { color: oklch(0.78 0.08 190); background: oklch(0.78 0.08 190 / 0.12); }
.badge-delivery-gift            { color: oklch(0.78 0.10 150); background: oklch(0.78 0.10 150 / 0.12); }
.badge-delivery-account         { color: oklch(0.72 0.12 25);  background: oklch(0.72 0.12 25 / 0.12); }

/* ── Classification status badges ── */
.badge-status-new               { color: oklch(0.70 0.02 250); background: oklch(0.70 0.02 250 / 0.12); }
.badge-status-pending           { color: oklch(0.78 0.12 85);  background: oklch(0.78 0.12 85 / 0.12); }
.badge-status-failed            { color: oklch(0.70 0.14 25);  background: oklch(0.70 0.14 25 / 0.12); }
.badge-status-classified        { color: oklch(0.78 0.12 150); background: oklch(0.78 0.12 150 / 0.12); }