/* 
   BASE DESIGN SYSTEM - Shared variables and global components
*/

:root {
    --header-height: 64px;
    --footer-height: 64px;

    --rank-0-color: #825D26;
    --rank-1-color: #492A41;
    --rank-2-color: #2F3E61;
    --rank-3-color: #314C53;
    --rank-4-color: #446554;

    /* Palette de couleurs */
    --bg-dark: #151B2A;
    --bg-dark-secondary: #222736;
    --bg-light: #32394B;
    --bg-panel: #2A3042;
    --bg-light-grey: #404A62;
    --primary: #03BEFF;
    --border: #0D79C2;
    --text-primary: #DFE3EE;
    --text-secondary: #03BEFF;
    --text-primary-dark: #012B5D;
    --text-form-field: #7C88A7;
    --line-disabled: #586475;
    --neo-text-disabled: #586475;
    --error-red: #FF4961;
    --remove-button: #E67166;
    --success-green: #44B987;
    --slider-off: #E67166;
    --slider-on: #44B987;
    --error-light-red: #FDE4E4;
    --button-primary: #03BEFF;
    --button-secondary: #45cdfa;
    --button-danger: #E46155;
    --edit-button: #DFE3EE;
    --selected-line: #0344AB;
    --warning-yellow: #FFD538;
    --primary-active: #74CFFD;
    --btn-gray-hover: #e0e0e0;
    --white: #FFFFFF;
    --black: #000000;
    --bg-hover-dark: #0A3373;
    --neo-text-light: #DFE3EE;
    --neo-text-muted: #7C88A7;
    --neo-dark-border: #32394B;
    --bg-overlay-dark: rgba(25, 33, 49, 0.4);
    --transparent: transparent;
    --inherit: inherit;

    --scrollbar-thumb: #4a4e5a;
    --scrollbar-thumb-hover: #6a6e7a;
    --bg-modal: var(--bg-dark-secondary);

    --scan-bracket: var(--slider-off);
    --doc-source-badge: #0078D7;
    --scan-button-hover: var(--primary-alpha-10);
    --scan-button-active: var(--primary-alpha-20);

    --toast-message: #0B1C33;
    --toast-shadow: 0 4px 12px var(--black-alpha-15);

    /* Couleurs de statut */
    --info-blue: #2C9BEA;
    --toast-error: #FF4B4B;
    --toast-error-bg: #FFEBEB;
    --toast-success: #06C270;
    --toast-success-bg: #DAF4EB;
    --toast-info: #2C9BEA;
    --toast-info-bg: #E0EFF9;
    --toast-warning: #FFD538;
    --toast-warning-bg: #FCF1DF;
    --error-red-alpha-10: rgba(255, 73, 97, 0.1);

    /* États des transformations (doivent correspondre EXACTEMENT au dict ETATS
       de transformation_service.py, qui colore les lignes côté back). */
    --transfo-etat-ok: #06C270;
    --transfo-etat-non-termine: #FFD538;
    --transfo-etat-attente-certif: #2C9BEA;
    --transfo-etat-non-valide: #FF4961;

    /* Typographie */
    --font-main: 'Jost', sans-serif;
    --font-size-base: 20px;
    --font-weight-bold: 700;

    /* Espacement & Bordures */
    --radius: 3px;
    --transition: all 0.3s ease;

    /* Transparences */
    --white-alpha-05: rgba(255, 255, 255, 0.05);
    --white-alpha-08: rgba(255, 255, 255, 0.08);
    --white-alpha-10: rgba(255, 255, 255, 0.1);
    --white-alpha-30: rgba(255, 255, 255, 0.3);
    --black-alpha-10: rgba(0, 0, 0, 0.1);
    --black-alpha-15: rgba(0, 0, 0, 0.15);
    --black-alpha-20: rgba(0, 0, 0, 0.2);
    --black-alpha-30: rgba(0, 0, 0, 0.3);
    --black-alpha-40: rgba(0, 0, 0, 0.4);
    --black-alpha-50: rgba(0, 0, 0, 0.5);
    --black-alpha-60: rgba(0, 0, 0, 0.6);
    --black-alpha-85: rgba(0, 0, 0, 0.85);
    --primary-alpha-10: rgba(3, 190, 255, 0.1);
    --primary-alpha-20: rgba(3, 190, 255, 0.2);
    --primary-alpha-30: rgba(3, 190, 255, 0.3);
    --error-red-alpha-05: rgba(255, 73, 97, 0.05);
    --error-red-alpha-20: rgba(255, 73, 97, 0.2);
    --error-red-alpha-40: rgba(255, 73, 97, 0.4);
    --border-alpha-10: rgba(13, 121, 194, 0.1);
    --button-danger-alpha-10: rgba(228, 97, 85, 0.1);
    --border-alpha-15: rgba(13, 121, 194, 0.15); /* #0D79C226 — pastille badge maintenance */
    --text-primary-dark-alpha-08: rgba(1, 43, 93, 0.08); /* ombre portée MRP (cartes/popups) */

    /* Backgrounds semi-transparents pour cartes permission/blocked */
    --bg-card-dark: rgba(26, 32, 44, 0.9);
    --bg-card-blocked: rgba(45, 55, 72, 0.9);

    /* Couleur de texte atténuée (gap entre --neo-text-muted et --text-primary) */
    --text-muted: #a0aec0;

    /* Movements (états mouvement de stock) */
    --mvt-cancelled: #A32F3F;
    --mvt-fo-supply: #206E5A;
    --mvt-complement: #295D7D;
    --mvt-stock-return: #1B6F75;

    /* MetaOF Specifics */
    --meta-primary: #3498db;
    --meta-danger: #e67166;
    --meta-success: #2ecc71;
    --meta-bg-dark: #1e1e2f;
    --meta-header-bg: #2d2d44;
    --meta-row-bg: rgba(255, 255, 255, 0.05);
    --meta-row-hover: rgba(255, 255, 255, 0.1);
    --meta-text: #ffffff;
    --meta-muted: #8888aa;

    /* Nomenclature - fonds par niveau d'arborescence (nœuds parents) */
    --nom-level-1-bg: #222736;
    --nom-level-2-bg: #1F2433;
    --nom-level-3-bg: #1C2130;
    --nom-level-4-bg: #1A202F;
    --nom-level-5-bg: #171D2C;

    /* Gacha (sélection du logo) - couleurs de rareté épique/légendaire et monnaie
       « épines fugu », promues ici pour ne plus avoir de #hex dans logo_selection.css */
    --rarity-epic-color: #B36BFF;
    --rarity-legendary-color: #FFB02E;
    --warning-yellow-deep: #FFA62E;
    --gacha-spine-color: #2BD4C0;
}

/* Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: var(--font-size-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Common Layout Components */
.app-container {
    /* 64px header + 64px footer */
    min-height: calc(100vh - 128px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.header-bar {
    background-color: var(--bg-light);
    color: var(--text-primary);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--primary);
    font-weight: var(--font-weight-bold);
}

/* Headers */
h1,
h2,
h3 {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: var(--font-weight-bold);
}

/* Forms & Inputs */
.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    color: var(--text-primary);
    font-size: 1rem;
    margin-bottom: 8px;
}

input {
    width: 100%;
    background-color: var(--bg-light);
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 12px 15px;
    color: var(--white);
    font-family: var(--font-main);
    font-size: 1.3rem;
    transition: var(--transition);
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 8px var(--primary-alpha-30);
}

.input-container {
    position: relative;
}

.input-container input {
    padding-right: 45px;
}

/* Buttons */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 25px;
    font-size: 28px;
    min-height: 48px;
    height: 70px;
    border: none;
    border-radius: var(--radius);
    font-weight: 450;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--black);
}

.btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.btn-outline {
    background-color: var(--transparent);
    border: 1px solid var(--primary);
    color: var(--primary);
}

.btn-outline:hover {
    background-color: var(--primary-alpha-10);
}

/* Global Helpers */
.status-online {
    color: var(--success-green);
    font-size: 0.8rem;
}

.mt-20 {
    margin-top: 20px;
}

.mb-20 {
    margin-bottom: 20px;
}

.text-center {
    text-align: center;
}

.justify-center {
    justify-content: center;
}

.hidden {
    display: none !important;
}

.text-error {
    color: var(--error-red);
}

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

.p-20 {
    padding: 20px;
}

.cursor-pointer {
    cursor: pointer;
}

.is-loading {
    border: solid 4px var(--white);
    animation: pulse 3s infinite;
}

@keyframes pulse {
    0% {
        border: solid 4px var(--white);
    }

    50% {
        border: solid 4px var(--line-disabled);
    }

    100% {
        border: solid 4px var(--white);
    }
}

.is-loading .unique-fo-image,
.is-loading .priority-index,
.is-loading .priority-image,
.is-loading .priority-details,
.is-loading .recap-img,
.is-loading .recap-info {
    pointer-events: none !important;
    opacity: 0.7 !important;
}

body.is-loading-global {
    pointer-events: none;
}

.d-none {
    display: none !important;
}

/* --- UI COMPONENTS: SWITCHES --- */
.switch {
    display: inline-block;
    flex-shrink: 0;
    position: relative;
    width: 44px;
    height: 24px;
    cursor: pointer;
    user-select: none;
    background-color: var(--slider-off);
    border-radius: 24px;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.switch.active,
.switch.active-toggle.active {
    background-color: var(--slider-on);
}

/* Knob Design */
.switch::after {
    content: "\f00d"; /* FontAwesome xmark */
    font-family: "Font Awesome 7 Pro";
    font-weight: 900;
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--white);
    border-radius: 50%;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--slider-off);
    font-size: 12px;
    line-height: 1;
    box-shadow: 0 1px 3px var(--black-alpha-30);
    z-index: 2;
}

/* Knob transformation on active */
.switch.active::after {
    transform: translate(20px, -50%);
    content: "\f00c"; /* FontAwesome check */
    color: var(--slider-on);
}

/* Variant without icons */
.switch.no-icons::after {
    content: "" !important;
}

/* Color variant (using --primary instead of --slider-on) */
.switch.switch-primary.active {
    background-color: var(--primary);
}

.switch.switch-primary.active::after {
    color: var(--primary);
}