@import url('bulma.min.css');
@import url('fontawesome.min.css');
@import url('duotone-regular.min.css');
@import url('regular.min.css');
@import url('solid.min.css');
@import url('duotone.min.css');
@import url('colors.css');

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.cdnfonts.com/css/seven-segment');

:root {
    /* Variables de thème simplifiées - basées sur colors.css */
    --background: var(--grey800);
    --sur: var(--grey900);
    --sur2: var(--grey700);
    --border: var(--grey600);

    --title: var(--white300);
    --text: var(--white500);

    /* Alias simplifiés pour les couleurs principales */
    --blue: var(--blue500);
    --blue-dark: var(--blue600);
    --blue-light: var(--blue400);

    --red: var(--red500);
    --red-dark: var(--red600);
    --red-light: var(--red400);

    --yellow: var(--yellow500);
    --yellow-dark: var(--yellow600);
    --yellow-light: var(--yellow400);

    --green: var(--green500);
    --green-dark: var(--green600);
    --green-light: var(--green400);

    --purple: var(--purple500);
    --purple-dark: var(--purple600);
    --purple-light: var(--purple400);

    --orange: var(--orange500);
    --orange-dark: var(--orange600);
    --orange-light: var(--orange400);

    /* Couleurs d'état pour l'interface */
    --success: var(--green500);
    --warning: var(--orange500);
    --error: var(--red500);
    --info: var(--blue500);

    --white: var(--white25);
    --white-light: #FFFFFF;
}

/* -------------KEYFRAMES------------- */

@keyframes holographicShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* -------------SETUP------------- */

#app {
    width: 100vw;
    height: 100vh;
}


html {
    background-color: var(--background);
    background-image: url(../assets/logo.svg), url(../assets/background/grid.svg);
    background-repeat: no-repeat, repeat;
    background-position: center, center;
    background-size: 200px, 100px;

}

body,
content {
    font-size: 16px;
    font-family: "Roboto condensed", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

p {
    font-family: 'Roboto Condensed', monospace;
    font-size: 1rem;

    &:not(:last-child) {
        margin-bottom: 0.30rem;
    }
}

p,
.label {
    font-family: "Roboto condensed", monospace;
    color: var(--text);
}

.label {
    font-weight: 300;
}

hr {
    margin-top: .25rem;
    margin-bottom: .25rem;
    background-color: var(--border);
}



.title {
    color: var(--title);
    text-transform: uppercase;
    font-family: "Chakra Petch", monospace;
    font-weight: 700;
}

.subtitle {
    color: var(--title);
    font-family: "Chakra Petch", monospace;
}

a {
    font-family: "Chakra Petch", monospace;
    color: var(--blue);

    &:hover {
        color: var(--blue-dark);
    }
}

.clickable {
    cursor: pointer;
    transition: color 0.5s ease-in-out;

    &:hover {
        color: var(--white);
    }
}

.floatting {
    position: absolute;
    z-index: 999;

    &.top {
        top: 20px;
    }

    &.bottom {
        bottom: 20px;
    }

    &.left {
        left: 20px;
    }

    &.right {
        right: 20px;
    }
}

/* -------------TEXT COLORS------------- */

.is-blue {
    color: var(--blue);
}

.is-red {
    color: var(--red);
}

.is-green {
    color: var(--green);
}

.is-orange {
    color: var(--orange);
}

.is-gold {
    color: var(--yellow);
}

.is-purple {
    color: var(--purple);
}

.is-white {
    color: var(--white);
}

.is-text {
    color: var(--text);
}

.is-grey {
    color: var(--text);
}

.is-holographic {
    background: radial-gradient(50% 123.47% at 50% 50%, #00FF94 0%, #FF00C7 100%), linear-gradient(121.28deg, #213100 0%, #FF0000 100%), linear-gradient(360deg, #0029FF 0%, #8FFF00 100%), linear-gradient(114.9deg, #00C6A2 0%, #6A45A8 100%), radial-gradient(100% 148.07% at 0% 0%, #FFFFFF 0%, #1DCD00 100%);
    background-blend-mode: screen, color-dodge, overlay, difference, normal;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-size: 400% 400%;
    animation: holographicShift 3s ease-in-out infinite;
}

/* -------------ICON COLORS------------- */

i.red {
    color: var(--red);
}

i.blue {
    color: var(--blue);
}

i.gold {
    color: var(--yellow);
}

i.orange {
    color: var(--orange);
}

i.purple {
    color: var(--purple);
}

i.green {
    color: var(--green);
}

i.white {
    color: var(--white);
}

/* -------------NUMBERS CREDITS------------- */

.number {
    font-family: "seven segment", monospace;
}

/* -------------INPUT------------- */

.input,
.select select,
.textarea {
    border-radius: 2.5px;
    background-color: var(--background);
    border: 1px solid var(--border);
    font-family: "Roboto condensed", sans-serif;
}

/* -------------WINDOW------------- */

.window {
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background-color: oklch(from var(--sur) l c h / 0.75);
    backdrop-filter: blur(5px);

    box-shadow: none;
    display: flex;
    flex-direction: column;
    width: 500px;

    box-sizing: border-box;

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

    position: absolute;
    /* Optionnel : pour éviter qu'elles se superposent au départ */
    top: 100;
    left: 100;

    /* Effet visuel au clic */
    transition: transform 0.1s ease;

    &.movable {
        .control-box {
            cursor: move;
        }
    }

    &:active {
        transform: scale(1.02);
    }

    /* Style pendant le redimensionnement */
    &.is-resizing {
        transition: none;
        /* Désactive les transitions pendant le resize */

        .tabs,
        .control-box {
            pointer-events: none;
            /* Évite les interactions parasites pendant le resize */
        }
    }

    .box-content {
        padding: 15px;
        border: 1px solid var(--border);
        border-radius: 5px;
        background-color: oklch(from var(--sur) l c h / 0.5);
        flex-grow: 1;
        flex-shrink: 1;
        overflow: scroll;

        &:has(table) {
            padding: 0px;
            overflow: auto;
        }

        &.danger {
            border: 1px solid var(--red);
            padding: 5px 10px;
            background-color: oklch(from var(--red-dark) l c h / 0.25);
            flex-grow: 0;
            flex-shrink: 0;
            height: auto;
            /* Permet l'adaptation au contenu */
        }
    }

    & .control-box {
        margin-bottom: 10px;
        flex-shrink: 0;

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        .title {
            display: flex;
            align-items: center;
            flex-grow: 1;
            font-size: 14px;
            margin-bottom: 0px;

            & i {
                font-size: 18px;
            }
        }

        .icons i {
            font-size: 18px;
            cursor: pointer;
            transition: color 0.25s ease-in-out;

            &.is-green:hover {
                color: var(--green-dark);
            }

            &.is-red:hover {
                color: var(--red-dark);
            }
        }
    }

    .sneak {
        margin-bottom: 10px;
    }

    &:has(.box-content) {
        padding: 10px;
    }
}


/* -------------MODAL WINDOW------------- */

.modal-window {
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background-color: oklch(from var(--sur) l c h / 0.75);
    backdrop-filter: blur(25px);
    margin: 40px;

    .logo {
        width: 100px;
        height: 100px;
        margin: auto;
    }
}

/* -------------MODAL INTRO------------- */

.intro {
    .modal-content {
        width: 50%;
        margin: auto;
        text-align: center;
        overflow: hidden;
    }

    .logo {
        width: 150px;
        height: 150px;
        margin: auto;
    }

    .intro-text {
        animation: typewriterEffect 2s steps(17, end) 1s both, blinkCursor 1s infinite 3s;
        overflow: hidden;
        white-space: nowrap;
        border-right: 2px solid var(--blue);
        width: 0;
        margin: 0 auto;
        display: inline-block;
    }
}

@keyframes typewriterEffect {
    from {
        width: 0;
    }

    to {
        width: 17ch;
        /* Exactement la longueur de "Connexion à NOVA…" */
    }
}

@keyframes blinkCursor {

    0%,
    50% {
        border-right-color: var(--blue);
    }

    51%,
    100% {
        border-right-color: transparent;
    }
}

/* -------------BUTTONS------------- */

.button {
    border-radius: 5px;
    font-family: "Chakra Petch", monospace;
    transition: background, border-color 0.5s ease-in-out;

    background-color: var(--sur);
    border-color: var(--border);

    &:hover {
        border-color: var(--text);
    }

    &.is-primary {
        background-color: var(--blue);
        border-color: var(--blue);
        color: var(--white);

        &:hover {
            background-color: var(--blue-dark);
        }

        &:disabled {
            background-color: var(--border);
            border-color: var(--border);
            color: var(--text);
            cursor: not-allowed;
            opacity: 0.6;

            &:hover {
                background-color: var(--border);
                border-color: var(--border);
            }
        }
    }

    &.is-success {
        background-color: var(--green);
        color: var(--white);

        &:hover {
            background-color: var(--green-dark);
        }
    }

    &.is-danger {
        background-color: var(--red);
        color: var(--white);

        &:hover {
            background-color: var(--red-dark);
        }
    }

    &.is-link {
        background-color: var(--purple);
        color: var(--white);

        &:hover {
            background-color: var(--purple-dark);
        }
    }

    &.is-danger {
        background-color: var(--red);
        color: var(--white);

        &:hover {
            background-color: var(--red-dark);
        }
    }
}

/* -------------TABS------------- */

.tabs {
    /* Empêche les tabs d'être écrasés lors du redimensionnement */
    flex-shrink: 0;
    min-height: 40px;

    & ul {
        border-bottom: 2px solid var(--border);
        /* Assure une hauteur minimale pour les ul */
        min-height: 38px;
        display: flex;
        align-items: stretch;
    }

    &:not(:last-child) {
        margin-bottom: -1px;
    }

    & li {
        padding: 5px 20px;
        min-width: 100px;
        max-width: 300px;
        border-radius: 5px 5px 0px 0px;
        margin-bottom: -2px;

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

        text-align: center;
        color: var(--white);
        font-family: "Chakra Petch", monospace;
        font-weight: 600;

        cursor: pointer;
        transition: all 0.25s ease-in-out;

        /* Empêche le texte des tabs d'être écrasé */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;

        &.is-active {
            border-bottom: 2px solid var(--blue);
            color: var(--blue);

            &:hover {
                background-color: transparent;
                cursor: default;
            }
        }

        &:hover {
            background-color: var(--background);
        }
    }

    &~.box-content:not(.danger) {
        border-radius: 0px 0px 5px 5px;
        border-top: none !important;
    }
}

/* ------------- MAPS ------------- */

.map-fullscreen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 90000;
    background: oklch(from var(--sur) l c h / 0.5);
    background-image: url(../assets/background/light-bg.svg);
    background-repeat: repeat;
    background-position: center;
    background-size: 500px;
    backdrop-filter: blur(25px);
    display: flex;
    flex-direction: column;
}

.map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px 0 32px;
    background: transparent;
    z-index: 2;
}

.map-content {
    width: 100vw;
    height: 100vh;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* La carte occupe tout l'espace disponible */
.map-container {
    width: 100vw;
    height: 100vh;
    overflow: auto;
    position: relative;
}

.tile {
    box-sizing: border-box;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    border-radius: 2px;
}

/* -------------PLOT SELECTION SYSTEM------------- */

.tile.selectable {
    cursor: pointer;
    border: 2px solid var(--green);
    animation: pulse-selection 1.5s infinite;
    z-index: 3;
}

.tile.selection-candidate {
    border: 2px dashed var(--yellow);
    animation: pulse-candidate 2s infinite;
    z-index: 2;
}

.tile.candidate-plot {
    background: radial-gradient(circle, oklch(from var(--success) l c h / 0.3) 0%, oklch(from var(--success) l c h / 0.1) 100%) !important;
    border: 2px dashed var(--success);
    z-index: 2;
    transition: all 0.3s ease;
}

.tile.candidate-plot:hover {
    background: radial-gradient(circle, oklch(from var(--success) l c h / 0.5) 0%, oklch(from var(--success) l c h / 0.2) 100%) !important;
    border-color: var(--success);
    border-style: solid;
    transform: scale(1.1);
}

.tile.candidate-plot.underground {
    background: radial-gradient(circle, oklch(from var(--warning) l c h / 0.3) 0%, oklch(from var(--warning) l c h / 0.1) 100%) !important;
    border-color: var(--warning);
}

.tile.candidate-plot.underground:hover {
    background: radial-gradient(circle, oklch(from var(--warning) l c h / 0.5) 0%, oklch(from var(--warning) l c h / 0.2) 100%) !important;
    border-color: var(--warning);
}

@keyframes pulse-selection {
    0% {
        box-shadow: 0 0 0 0 oklch(from var(--green) l c h / 0.7);
    }

    50% {
        box-shadow: 0 0 0 8px oklch(from var(--green) l c h / 0);
    }

    100% {
        box-shadow: 0 0 0 0 oklch(from var(--green) l c h / 0);
    }
}

@keyframes pulse-candidate {
    0% {
        opacity: 0.6;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    100% {
        opacity: 0.6;
        transform: scale(1);
    }
}

/* -------------TABLE------------- */

.table {
    background-color: transparent;
}

.table thead {
    border-radius: var(--br);
    background-color: var(--sur2);
}

.table th {
    border-color: var(--border);
}

.table tbody th {
    background-color: transparent;
    color: var(--text);
    font-weight: 400;
}

.table tbody tr {
    background-color: transparent !important;
}

.table td {
    min-width: 150px;
}

/* Styles pour les cartes cliquables du marché */
.options-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: start;
    flex-direction: row;
    align-content: start;
}

.option {
    width: 120px;
    flex-grow: 1;
}

.option .is-clickable {
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid transparent;
}

.option .is-clickable:hover {
    border-color: var(--border);
}

.option .is-clickable.is-active {
    background-color: var(--sur2);
    border-color: var(--border);
}

/* -------------MESSAGES------------- */

#messages-container {
    position: fixed;
    right: 20px;
    bottom: 0;
    z-index: 99999;
    pointer-events: none;
}

.message {
    width: 300px;
    padding: 10px;
    background-color: oklch(from var(--sur) l c h / 0.75);
    backdrop-filter: blur(25px);
    border: 1px solid var(--border);
    border-radius: 10px;
    position: absolute;
    right: 0;
    transform: translateX(350px);
    transition: transform 0.75s ease-in-out, bottom 0.5s ease-in-out;

    /* Fix pour éviter le saut de margin-bottom */
    &:not(:last-child) {
        margin-bottom: 0px !important;
    }

    &.visible {
        transform: translateX(0);
    }

    /* Types de messages */
    &.message-success {
        background-color: oklch(from var(--green) l c h / 0.25);
        backdrop-filter: blur(25px);
        border-color: var(--green);

        i {
            color: var(--green-light);
        }
    }

    &.message-error {
        background-color: oklch(from var(--red) l c h / 0.25);
        backdrop-filter: blur(25px);
        border-color: var(--red);

        i {
            color: var(--red-light);
        }
    }

    /* Couleurs des gisements */
    &.yellow {
        background-color: oklch(from var(--yellow) l c h / 0.25);
        backdrop-filter: blur(25px);
        border-color: var(--yellow);

        i {
            color: var(--yellow-light);
        }
    }

    &.blue {
        background-color: oklch(from var(--blue) l c h / 0.25);
        backdrop-filter: blur(25px);
        border-color: var(--blue);

        i {
            color: var(--blue-light);
        }
    }

    &.red {
        background-color: oklch(from var(--red) l c h / 0.25);
        backdrop-filter: blur(25px);
        border-color: var(--red);

        i {
            color: var(--red-light);
        }
    }

    &.green {
        background-color: oklch(from var(--green) l c h / 0.25);
        backdrop-filter: blur(25px);
        border-color: var(--green);

        i {
            color: var(--green-light);
        }
    }

    &.purple {
        background-color: oklch(from var(--purple) l c h / 0.25);
        backdrop-filter: blur(25px);
        border-color: var(--purple);

        i {
            color: var(--purple-light);
        }
    }

    &.orange {
        background-color: oklch(from var(--orange) l c h / 0.25);
        backdrop-filter: blur(25px);
        border-color: var(--orange);

        i {
            color: var(--orange-light);
        }
    }

    &.white {
        background-color: oklch(from var(--sur) l c h / 0.5);
        backdrop-filter: blur(25px);
        border-color: var(--border);

        i {
            color: var(--title);
        }
    }
}

/* -------------OVERLAYS------------- */

.dots-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../assets/terminal/dots_pattern.jpg);
    background-repeat: repeat;
    mix-blend-mode: add;
    background-size: 20px;
    z-index: 999997;
    pointer-events: none;
    opacity: 10%;
}

.lines-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../assets/terminal/lines_pattern.png);
    background-repeat: repeat;
    mix-blend-mode: multiply;
    background-size: 20px;
    z-index: 999998;
    pointer-events: none;
    opacity: 10%;
}

.texture-overlay {
    background-image: url(../assets/terminal/texture-overlay.jpg);
    background-size: cover;
    background-position: center;
    mix-blend-mode: multiply;
    opacity: 50%;
    z-index: 999999;
    pointer-events: none;
    position: fixed;
    width: 100%;
    height: 100%;
}