/**
 * SioreX - Tema Industrial Rústico
 * Design: Metal Desgastado, Ferrugem, Bronze Envelhecido
 * Efeito de textos gravados/estampados no metal
 */

/* ============================================================
   FONTES CUSTOMIZADAS
   Nota: Fontes locais desabilitadas. Usando Google Fonts (Cinzel)
   carregado via index.html. Se precisar de fontes locais,
   crie a pasta web/fonts/ e descomente as declarações abaixo.
   ============================================================ */
/*
@font-face {
    font-family: 'Cinzel Decorative';
    src: url('../../../web/fonts/Cinzel_Decorative,Livvic/Cinzel_Decorative/CinzelDecorative-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Cinzel Decorative';
    src: url('../../../web/fonts/Cinzel_Decorative,Livvic/Cinzel_Decorative/CinzelDecorative-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Livvic';
    src: url('../../../web/fonts/Cinzel_Decorative,Livvic/Livvic/Livvic-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Livvic';
    src: url('../../../web/fonts/Cinzel_Decorative,Livvic/Livvic/Livvic-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
*/

:root {
    /* ============================================================
       PALETA CINZA ESCURO (Fundo base, profundidade)
       ============================================================ */
    --dark-50:  #3A3A3A;
    --dark-100: #2E2E2E;
    --dark-200: #262626;
    --dark-300: #1E1E1E;
    --dark-400: #181818;
    --dark-500: #141414;
    --dark-600: #101010;
    --dark-700: #0C0C0C;
    --dark-800: #080808;
    --dark-900: #050505;

    /* ============================================================
       PALETA AÇO INOX (Headers, toolbars - brilhante/frio)
       ============================================================ */
    --inox-50:  #F5F5F5;
    --inox-100: #E8E8E8;
    --inox-200: #D0D0D0;
    --inox-300: #B0B0B0;
    --inox-400: #909090;
    --inox-500: #707070;
    --inox-600: #585858;
    --inox-700: #454545;
    --inox-800: #353535;
    --inox-900: #282828;

    /* ============================================================
       PALETA AÇO ESCOVADO (Sidebar, cards - tom frio/cinza)
       ============================================================ */
    --steel-50:  #E0E2E5;
    --steel-100: #C8CCD0;
    --steel-200: #A8AEB5;
    --steel-300: #88909A;
    --steel-400: #6A7280;
    --steel-500: #525A68;
    --steel-600: #404850;
    --steel-700: #30363C;
    --steel-800: #24282C;
    --steel-900: #1A1C1E;
    --steel-950: #101214;

    /* ============================================================
       PALETA COBRE (Títulos EAP, destaques quentes)
       ============================================================ */
    --copper-50:  #FFE4D0;
    --copper-100: #FFCBA8;
    --copper-200: #E8A878;
    --copper-300: #D4895A;
    --copper-400: #C06A3C;
    --copper-500: #A85228;
    --copper-600: #8A3E1C;
    --copper-700: #6C2E14;
    --copper-800: #50200E;
    --copper-900: #361408;

    /* ============================================================
       PALETA BRONZE (Acentos, badges, variação do cobre)
       ============================================================ */
    --bronze-50:  #F0E6D8;
    --bronze-100: #DCC8A8;
    --bronze-200: #C4A87C;
    --bronze-300: #A8865C;
    --bronze-400: #8C6E4A;
    --bronze-500: #705638;
    --bronze-600: #5A4530;
    --bronze-700: #483828;
    --bronze-800: #382A1E;
    --bronze-900: #2A1E14;
    --bronze-950: #1C140C;

    /* ============================================================
       PALETA FERRUGEM
       ============================================================ */
    --rust-100: #D4A574;
    --rust-200: #C4855C;
    --rust-300: #A86540;
    --rust-400: #8C4E30;
    --rust-500: #703C24;
    --rust-600: #5A2E1C;
    --rust-700: #482418;
    --rust-800: #381A10;
    --rust-900: #28120A;

    /* ============================================================
       PALETA PÁTINA (Verde Oxidado)
       ============================================================ */
    --patina-100: #A8C4A8;
    --patina-200: #8CAC8C;
    --patina-300: #6C8C6C;
    --patina-400: #507050;
    --patina-500: #3C5A3C;
    --patina-600: #2C482C;
    --patina-700: #203820;
    --patina-800: #182818;
    --patina-900: #101C10;

    /* ============================================================
       CORES SEMÂNTICAS
       ============================================================ */
    --primary: var(--inox-600);
    --primary-dark: var(--inox-800);
    --primary-light: var(--inox-400);
    --primary-20: rgba(88, 88, 88, 0.12);
    --primary-40: rgba(88, 88, 88, 0.25);
    --primary-60: rgba(88, 88, 88, 0.4);
    --primary-80: rgba(88, 88, 88, 0.6);

    --secondary: var(--copper-500);
    --secondary-dark: var(--copper-700);
    --secondary-light: var(--copper-300);

    --accent: var(--copper-400);

    --success: #2D5A3D;
    --success-light: #3D7A52;
    --success-dark: #1E4028;
    --warning: var(--copper-400);
    --warning-light: var(--copper-300);
    --danger: #8C3A30;
    --danger-light: #A84840;
    --info: #3A6080;
    --info-light: #4A80A8;

    /* ============================================================
       SUPERFÍCIES
       ============================================================ */
    --background: var(--dark-400);
    --surface: var(--dark-200);
    --surface-elevated: var(--dark-100);
    --white: #F0EEEC;
    --black: #050505;
    --border: var(--dark-50);
    --border-light: var(--inox-700);
    --border-dark: var(--dark-500);

    /* Sidebar - Aço Escovado */
    --sidebar-header-bg-dark: var(--steel-900);
    --sidebar-menu-bg: var(--steel-800);
    --sidebar-menu-hover: rgba(192, 106, 60, 0.12);
    --sidebar-menu-active: rgba(192, 106, 60, 0.2);

    /* ============================================================
       TEXTO
       ============================================================ */
    --text: #E8E6E4;
    --text-light: #C0BCBA;
    --text-muted: #8A8684;
    --text-inverse: var(--dark-400);
    --text-dark: var(--dark-300);

    /* ============================================================
       SELEÇÃO E FOCO
       ============================================================ */
    --selection-bg: rgba(192, 106, 60, 0.25);
    --selection-border: var(--copper-400);
    --focus-ring: rgba(192, 106, 60, 0.35);

    /* ============================================================
       HOVER - Padrão do sistema (cobre/bronze)
       ============================================================ */
    --hover-bg: rgba(192, 106, 60, 0.18);
    --hover-bg-light: rgba(192, 106, 60, 0.12);
    --hover-bg-strong: rgba(192, 106, 60, 0.25);
    --hover-text: var(--copper-200);

    /* ============================================================
       FONTES
       ============================================================ */
    --font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'Consolas', 'Monaco', monospace;
    --font-industrial: 'Impact', 'Arial Black', sans-serif;
    --font-size-xs: 10px;
    --font-size-sm: 11px;
    --font-size-base: 12px;
    --font-size-md: 13px;
    --font-size-lg: 14px;
    --font-size-xl: 16px;
    --font-size-2xl: 18px;
    --font-size-3xl: 22px;

    /* ============================================================
       TAMANHOS E ESPAÇAMENTOS
       ============================================================ */
    --sidebar-width: 250px;
    --sidebar-collapsed: 60px;
    --header-height: 55px;
    --footer-height: 28px;
    --radius-xs: 2px;
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;

    /* ============================================================
       SOMBRAS INDUSTRIAIS
       ============================================================ */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 2px 6px rgba(0,0,0,0.4);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.5);
    --shadow-xl: 0 8px 24px rgba(0,0,0,0.6);
    --shadow-inset: inset 0 2px 4px rgba(0,0,0,0.4);
    --shadow-inset-light: inset 0 1px 0 rgba(255,255,255,0.08);
    --shadow-emboss: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.3);

    /* ============================================================
       TEXTURAS - DESABILITADAS (causavam efeito quadriculado)
       ============================================================ */
    /* Texturas removidas - usando apenas gradientes para efeito metálico limpo */
    --texture-noise-heavy: none;
    --texture-brushed: none;
    --texture-scratches: none;
    --texture-grain: none;
    --texture-rust: none;
}

/* ============================================================
   RESET E BASE
   ============================================================ */
* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    background-color: var(--background);
    color: var(--text);
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;
    -webkit-font-smoothing: antialiased;
}

#app {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Seleção de texto global - cor cobre */
::selection {
    background: rgba(192, 106, 60, 0.4);
    color: #FFFFFF;
}

::-moz-selection {
    background: rgba(192, 106, 60, 0.4);
    color: #FFFFFF;
}

/* ============================================================
   EFEITO DE TEXTO GRAVADO/ESTAMPADO NO METAL
   ============================================================ */

/* Texto gravado (afundado no metal) - para fundos claros */
.text-engraved {
    color: #3A3632;
    text-shadow:
        0 1px 0 rgba(255,255,255,0.15),
        0 -1px 1px rgba(0,0,0,0.5);
}

/* Texto estampado (em relevo) - para fundos escuros */
.text-embossed {
    color: #B8B4AE;
    text-shadow:
        0 -1px 1px rgba(0,0,0,0.6),
        0 1px 0 rgba(255,255,255,0.1);
}

/* Texto gravado profundo */
.text-engraved-deep {
    color: #2A2724;
    text-shadow:
        0 2px 1px rgba(255,255,255,0.1),
        0 -1px 2px rgba(0,0,0,0.7),
        inset 0 0 0 rgba(0,0,0,0.3);
    letter-spacing: 0.5px;
}

/* ============================================================
   TEXTO METÁLICO PRATEADO (Brilhante)
   Gradiente que simula metal polido - para títulos e destaques
   ============================================================ */

/* Texto metálico prateado padrão */
.text-metal,
.text-metal-prateado {
    background: linear-gradient(180deg,
        #e8e8e8 0%,
        #c0c0c0 25%,
        #f5f5f5 50%,
        #a0a0a0 75%,
        #c8c8c8 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6));
}

/* Texto metálico prateado para títulos grandes */
.text-metal-title {
    background: linear-gradient(180deg,
        #e8e8e8 0%,
        #c0c0c0 20%,
        #f5f5f5 45%,
        #ffffff 50%,
        #f5f5f5 55%,
        #a0a0a0 80%,
        #c8c8c8 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6));
    letter-spacing: 1px;
}

/* ============================================================
   TEXTO METÁLICO OXIDADO (Bronze/Ferrugem)
   Gradiente que simula metal oxidado - para destaques quentes
   ============================================================ */

/* Texto oxidado padrão */
.text-metal-oxidado {
    background: linear-gradient(180deg,
        #D4A574 0%,
        #C4855C 20%,
        #A86540 40%,
        #8C4E30 60%,
        #A86540 80%,
        #D4A574 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.6));
}

/* Texto oxidado claro */
.text-metal-oxidado-light {
    background: linear-gradient(180deg,
        #E8C4A0 0%,
        #D4A574 30%,
        #C4855C 50%,
        #D4A574 70%,
        #E8C4A0 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}

/* Texto oxidado escuro */
.text-metal-oxidado-dark {
    background: linear-gradient(180deg,
        #A86540 0%,
        #8C4E30 25%,
        #703C24 50%,
        #8C4E30 75%,
        #A86540 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.7));
}

/* Texto oxidado para títulos grandes */
.text-metal-oxidado-title {
    background: linear-gradient(180deg,
        #D4A574 0%,
        #C4855C 15%,
        #A86540 35%,
        #8C4E30 50%,
        #A86540 65%,
        #C4855C 85%,
        #D4A574 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 3px 3px rgba(0,0,0,0.6));
    letter-spacing: 1px;
}

/* ============================================================
   CARD METÁLICO INDUSTRIAL
   ============================================================ */
.card-metallic {
    background:
        var(--texture-noise-heavy),
        var(--texture-scratches),
        linear-gradient(180deg,
            #4A4C50 0%,
            #3A3C40 5%,
            #2A2C30 50%,
            #1E2022 95%,
            #141618 100%
        );
    border: 1px solid #1E2022;
    border-radius: var(--radius-md);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        inset 0 -1px 0 rgba(0,0,0,0.3),
        0 4px 12px rgba(0,0,0,0.5);
    padding: 16px;
}

.card-metallic h6 {
    font-weight: 600;
    letter-spacing: 0.5px;
    /* Gradiente metálico prateado */
    background: linear-gradient(180deg,
        #e8e8e8 0%,
        #c0c0c0 25%,
        #f5f5f5 50%,
        #a0a0a0 75%,
        #c8c8c8 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}

/* ============================================================
   BOTÕES INDUSTRIAIS
   ============================================================ */

/* Botão base metálico */
.btn-metallic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: var(--font-size-base);
    font-weight: 600;
    letter-spacing: 0.3px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    position: relative;
    overflow: hidden;

    /* Gradiente cinza industrial */
    background: linear-gradient(180deg,
        #7A7670 0%,
        #5E5A54 8%,
        #4A4640 25%,
        #3A3632 50%,
        #4A4640 75%,
        #5E5A54 92%,
        #7A7670 100%
    );
    border: 1px solid #2A2724;
    /* Texto metálico */
    color: #E8E6E4;
    text-shadow:
        0 -1px 1px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.1);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.4);
}

.btn-metallic:hover {
    background: linear-gradient(180deg,
        #8A8680 0%,
        #6E6A64 8%,
        #5A5650 25%,
        #4A4640 50%,
        #5A5650 75%,
        #6E6A64 92%,
        #8A8680 100%
    );
    color: #F0EEEC;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.4);
}

.btn-metallic:active {
    background: linear-gradient(180deg,
        #4A4640 0%,
        #5A5650 25%,
        #5E5A54 50%,
        #5A5650 75%,
        #4A4640 100%
    );
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.4),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(1px);
}

/* Botão Success (Verde Pátina) */
.btn-metallic-success {
    background: linear-gradient(180deg,
        #5A8A5A 0%,
        #4A7A4A 8%,
        #3A6A3A 25%,
        #2A5A2A 50%,
        #3A6A3A 75%,
        #4A7A4A 92%,
        #5A8A5A 100%
    );
    border: 1px solid #1A3A1A;
    color: #E8F0E8;
    text-shadow:
        0 -1px 1px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-metallic-success:hover {
    background: linear-gradient(180deg,
        #6A9A6A 0%,
        #5A8A5A 8%,
        #4A7A4A 25%,
        #3A6A3A 50%,
        #4A7A4A 75%,
        #5A8A5A 92%,
        #6A9A6A 100%
    );
    color: #FFFFFF;
}

/* Botão Primary (Azul Aço) */
.btn-metallic-primary {
    background: linear-gradient(180deg,
        #6088B0 0%,
        #5078A0 8%,
        #406890 25%,
        #305880 50%,
        #406890 75%,
        #5078A0 92%,
        #6088B0 100%
    );
    border: 1px solid #203850;
    color: #E0E8F0;
    text-shadow:
        0 -1px 1px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.4);
}

.btn-metallic-primary:hover {
    background: linear-gradient(180deg,
        #7098C0 0%,
        #6088B0 8%,
        #5078A0 25%,
        #406890 50%,
        #5078A0 75%,
        #6088B0 92%,
        #7098C0 100%
    );
    color: #FFFFFF;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.4);
}

.btn-metallic-primary:active {
    background: linear-gradient(180deg,
        #406890 0%,
        #5078A0 25%,
        #6088B0 50%,
        #5078A0 75%,
        #406890 100%
    );
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(1px);
}

/* Botão Danger (Vermelho Ferrugem) */
.btn-metallic-danger {
    background: linear-gradient(180deg,
        #A84040 0%,
        #8C3030 8%,
        #702424 25%,
        #5A1818 50%,
        #702424 75%,
        #8C3030 92%,
        #A84040 100%
    );
    border: 1px solid #3A1010;
    color: #F0E0E0;
    text-shadow:
        0 -1px 1px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-metallic-danger:hover {
    background: linear-gradient(180deg,
        #B85050 0%,
        #A84040 8%,
        #8C3030 25%,
        #702424 50%,
        #8C3030 75%,
        #A84040 92%,
        #B85050 100%
    );
    color: #FFFFFF;
}

/* Botão Warning (Âmbar) */
.btn-metallic-warning {
    background: linear-gradient(180deg,
        #B8A050 0%,
        #A89040 8%,
        #988030 25%,
        #887020 50%,
        #988030 75%,
        #A89040 92%,
        #B8A050 100%
    );
    border: 1px solid #584010;
    color: #F8F0E0;
    text-shadow:
        0 -1px 1px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-metallic-warning:hover {
    background: linear-gradient(180deg,
        #C8B060 0%,
        #B8A050 8%,
        #A89040 25%,
        #988030 50%,
        #A89040 75%,
        #B8A050 92%,
        #C8B060 100%
    );
    color: #FFFFFF;
}

/* Tamanhos */
.btn-metallic.btn-sm {
    padding: 5px 10px;
    font-size: var(--font-size-sm);
}

.btn-metallic.btn-lg {
    padding: 10px 20px;
    font-size: var(--font-size-lg);
}

/* ============================================================
   INPUTS INDUSTRIAIS
   ============================================================ */
.form-control,
.form-select,
textarea.form-control {
    background:
        var(--texture-grain),
        linear-gradient(180deg,
            #1E2022 0%,
            #2A2C30 10%,
            #3A3C40 90%,
            #2A2C30 100%
        );
    border: 1px solid #4A4C50;
    border-radius: var(--radius-sm);
    /* Texto branco quando não focado */
    color: #FFFFFF;
    padding: 8px 12px;
    font-size: var(--font-size-base);
    /* Garante texto normal (não maiúsculas) */
    text-transform: none;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.4),
        inset 0 -1px 0 rgba(255,255,255,0.05);
    transition: all 0.15s ease;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    outline: none;
    border-color: var(--copper-400);
    /* Texto cobre quando focado */
    color: var(--copper-200);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.4),
        0 0 0 2px rgba(192, 106, 60, 0.3);
}

.form-control::placeholder {
    color: var(--text-muted);
}

/* Seleção de texto dentro dos inputs - cor cobre */
.form-control::selection,
.form-select::selection,
textarea.form-control::selection {
    background: rgba(192, 106, 60, 0.4);
    color: #FFFFFF;
}

.form-control::-moz-selection,
.form-select::-moz-selection,
textarea.form-control::-moz-selection {
    background: rgba(192, 106, 60, 0.4);
    color: #FFFFFF;
}

.form-label {
    color: var(--inox-200);
    font-weight: 500;
    font-size: var(--font-size-sm);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
    margin-bottom: 4px;
}

/* ============================================================
   TABELAS INDUSTRIAIS
   ============================================================ */
.table {
    color: var(--text);
}

.table-metallic-header th {
    background:
        var(--texture-noise-heavy),
        var(--texture-brushed),
        linear-gradient(180deg,
            #5E6064 0%,
            #4A4C50 5%,
            #3A3C40 20%,
            #2A2C30 50%,
            #1E2022 80%,
            #141618 95%,
            #0E1012 100%
        ) !important;
    /* Cor do texto metálico prateado */
    color: #c8c8c8 !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: var(--font-size-sm);
    border-bottom: 2px solid #141618 !important;
    border-right: 1px solid #1E2022;
    padding: 12px 8px !important;
    /* Texto gravado estilo metal */
    text-shadow:
        0 -1px 1px rgba(0,0,0,0.7),
        0 1px 0 rgba(255,255,255,0.15);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.4);
}

.table-metallic-header th:last-child {
    border-right: none;
}

/* ============================================================
   SCROLLBAR INDUSTRIAL
   ============================================================ */
::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

::-webkit-scrollbar-track {
    background:
        var(--texture-grain),
        linear-gradient(90deg,
            #1E2022 0%,
            #2A2C30 50%,
            #1E2022 100%
        );
    border-radius: 7px;
}

::-webkit-scrollbar-thumb {
    background:
        var(--texture-noise-heavy),
        linear-gradient(90deg,
            #5E6064 0%,
            #4A4C50 30%,
            #3A3C40 50%,
            #4A4C50 70%,
            #5E6064 100%
        );
    border-radius: 7px;
    border: 2px solid #1E2022;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        inset 0 -1px 0 rgba(0,0,0,0.3);
}

::-webkit-scrollbar-thumb:hover {
    background:
        var(--texture-noise-heavy),
        linear-gradient(90deg,
            #7A7C80 0%,
            #5E6064 30%,
            #4A4C50 50%,
            #5E6064 70%,
            #7A7C80 100%
        );
}

::-webkit-scrollbar-corner {
    background: #1E2022;
}

/* ============================================================
   MODAIS INDUSTRIAIS - Estilo Mini Página
   ============================================================ */

/* Centralizar modal na tela */
.modal {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.modal.fade:not(.show) {
    display: none !important;
}

.modal-dialog {
    margin: 20px auto;
    display: flex;
    align-items: flex-start;
    min-height: calc(100% - 40px);
    max-height: calc(100vh - 40px);
}

.modal-dialog-centered {
    align-items: center;
}

/* Container do modal - sombra forte para destacar */
.modal-content {
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow:
        0 15px 50px rgba(0,0,0,0.8),
        0 5px 20px rgba(0,0,0,0.6);
    overflow: hidden;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
}

/* Header do Modal - Igual ao content-header da página */
.modal-header {
    background: linear-gradient(180deg,
        var(--inox-500) 0%,
        var(--inox-600) 5%,
        var(--inox-700) 20%,
        var(--inox-800) 60%,
        var(--inox-900) 90%,
        var(--dark-400) 100%
    );
    padding: 14px 20px;
    border-bottom: 2px solid var(--dark-600);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(0,0,0,0.4),
        0 4px 12px rgba(0,0,0,0.3);
}

/* Título do Modal - Gradiente metálico prateado */
.modal-header .modal-title {
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: var(--font-size-lg);
    /* Gradiente metálico prateado brilhante */
    background: linear-gradient(180deg,
        #e8e8e8 0%,
        #c0c0c0 25%,
        #f5f5f5 50%,
        #a0a0a0 75%,
        #c8c8c8 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6));
}

/* Ícone no título do modal */
.modal-header .modal-title i {
    background: linear-gradient(180deg,
        #e8e8e8 0%,
        #c0c0c0 25%,
        #f5f5f5 50%,
        #a0a0a0 75%,
        #c8c8c8 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Botão fechar do modal */
.modal-header .btn-close {
    filter: invert(0.7) brightness(1.2);
    opacity: 0.8;
    transition: all 0.2s ease;
}

.modal-header .btn-close:hover {
    filter: invert(0.9) brightness(1.4);
    opacity: 1;
    transform: scale(1.1);
}

/* Body do Modal - Igual ao content-body da página (prateado brilhante) */
.modal-body {
    background:
        var(--texture-brushed),
        linear-gradient(180deg,
            #e8e8e8 0%,
            #c0c0c0 15%,
            #f5f5f5 35%,
            #a0a0a0 50%,
            #f5f5f5 65%,
            #c0c0c0 85%,
            #e8e8e8 100%
        );
    padding: 20px;
    /* Sombra interna para profundidade */
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, 0.15),
        inset 0 -2px 4px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    /* Texto escuro para legibilidade */
    color: #1A1A1A;
    /* Scroll quando conteúdo for grande */
    overflow-y: auto;
    flex: 1;
    max-height: calc(100vh - 180px);
}

/* Labels dentro do modal - texto estampado */
.modal-body .form-label {
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    letter-spacing: 1px;
    color: #404040;
    text-shadow: 0 1px 0 rgba(255,255,255,0.7);
    margin-bottom: 6px;
}

/* Inputs dentro do modal - área rebaixada */
.modal-body .form-control,
.modal-body .form-select {
    background:
        linear-gradient(180deg,
            rgba(0,0,0,0.12) 0%,
            rgba(0,0,0,0.06) 50%,
            rgba(255,255,255,0.05) 100%
        );
    border: 1px solid #909090;
    border-radius: var(--radius-sm);
    /* Texto escuro quando não focado */
    color: #1A1A1A;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.15),
        inset 0 -1px 0 rgba(255,255,255,0.4);
    transition: all 0.2s ease;
}

.modal-body .form-control::placeholder {
    color: #707070;
}

.modal-body .form-control:focus,
.modal-body .form-select:focus {
    outline: none;
    border-color: var(--copper-500);
    /* Texto cobre quando focado */
    color: var(--copper-700);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.15),
        0 0 0 2px rgba(192, 106, 60, 0.25);
}

/* Seleção de texto dentro dos inputs do modal - cor cobre */
.modal-body .form-control::selection,
.modal-body .form-select::selection,
.modal-body textarea.form-control::selection {
    background: rgba(192, 106, 60, 0.4);
    color: #1A1A1A;
}

.modal-body .form-control::-moz-selection,
.modal-body .form-select::-moz-selection,
.modal-body textarea.form-control::-moz-selection {
    background: rgba(192, 106, 60, 0.4);
    color: #1A1A1A;
}

/* Textos e parágrafos dentro do modal */
.modal-body p,
.modal-body span {
    color: #1A1A1A;
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

/* Separador horizontal dentro do modal */
.modal-body hr {
    border: none;
    border-top: 1px solid #A0A0A0;
    margin: 16px 0;
    box-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

/* Subtítulos dentro do modal */
.modal-body h6,
.modal-body .text-muted {
    color: #505050 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

/* Footer do Modal - Igual ao content-footer da página */
.modal-footer {
    background: linear-gradient(180deg,
        var(--inox-700) 0%,
        var(--inox-800) 40%,
        var(--inox-900) 80%,
        var(--dark-400) 100%
    );
    padding: 12px 20px;
    border-top: 1px solid var(--inox-600);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 -2px 8px rgba(0,0,0,0.3);
}

/* ============================================================
   MODAL CONFIRM - Estilos específicos
   ============================================================ */

/* Ícones de tipo nos modais de confirmação */
.modal-header .text-warning {
    color: #D4A030 !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
    -webkit-text-fill-color: #D4A030;
}

.modal-header .text-danger {
    color: #C45050 !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
    -webkit-text-fill-color: #C45050;
}

.modal-header .text-info {
    color: #5080B0 !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
    -webkit-text-fill-color: #5080B0;
}

.modal-header .text-success {
    color: #50A060 !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
    -webkit-text-fill-color: #50A060;
}

/* Modal de confirmação centralizado */
.modal-metallic .modal-body {
    text-align: center;
    padding: 30px 25px;
}

.modal-metallic .modal-body p {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin: 0;
    color: #111111;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
    line-height: 1.5;
}

/* Footer de confirmação centralizado */
.modal-metallic .modal-footer {
    justify-content: center;
    gap: 12px;
}

/* ============================================================
   DROPDOWN MENUS
   ============================================================ */
.dropdown-menu {
    background:
        var(--texture-grain),
        linear-gradient(180deg,
            #3A3C40 0%,
            #2A2C30 100%
        );
    border: 1px solid #4A4C50;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    padding: 4px 0;
}

.dropdown-item {
    color: var(--text);
    padding: 10px 16px;
    transition: all 0.15s ease;
}

.dropdown-item:hover {
    background: var(--hover-bg);
    color: var(--hover-text);
}

.dropdown-item:active {
    background: var(--hover-bg-strong);
}

.dropdown-header {
    color: var(--inox-300);
    font-weight: 600;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 16px;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
}

.dropdown-divider {
    border-color: #4A4C50;
    margin: 4px 0;
}

/* ============================================================
   BADGES INDUSTRIAIS
   ============================================================ */
.badge {
    font-weight: 600;
    padding: 4px 8px;
    font-size: var(--font-size-xs);
    letter-spacing: 0.5px;
    border-radius: var(--radius-sm);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
}

.badge.bg-warning,
.badge-warning {
    background:
        linear-gradient(180deg, #C4855C 0%, #8C4E30 100%) !important;
    color: #E8E6E3 !important;
    border: 1px solid #5A2E1C;
}

.badge.bg-success,
.badge-success {
    background:
        linear-gradient(180deg, #6C8C6C 0%, #2C482C 100%) !important;
    color: #E8E6E3 !important;
    border: 1px solid #182818;
}

.badge.bg-danger,
.badge-danger {
    background:
        linear-gradient(180deg, #A86540 0%, #5A2E1C 100%) !important;
    color: #E8E6E3 !important;
    border: 1px solid #381A10;
}

.badge.bg-info,
.badge-info {
    background:
        linear-gradient(180deg, #6080A0 0%, #3A4A5A 100%) !important;
    color: #E8E6E3 !important;
    border: 1px solid #2A3A4A;
}

.badge.bg-secondary,
.badge-secondary {
    background:
        linear-gradient(180deg, #7A7670 0%, #3A3632 100%) !important;
    color: #E8E6E3 !important;
    border: 1px solid #2A2724;
}

/* ============================================================
   SPINNER INDUSTRIAL
   ============================================================ */
.spinner-metallic {
    width: 40px;
    height: 40px;
    border: 3px solid #3A3C40;
    border-top-color: var(--inox-400);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   ALERTAS - Placas Metálicas
   ============================================================ */
.alert {
    /* Placa metálica brilhante com parafusos */
    background:
        url('../img/screw-phillips.svg') 10px 50% no-repeat,
        url('../img/screw-phillips.svg') calc(100% - 10px) 50% no-repeat,
        linear-gradient(
            160deg,
            #E8E8E8 0%,
            #D0D0D0 15%,
            #F0F0F0 30%,
            #C8C8C8 50%,
            #E0E0E0 70%,
            #B8B8B8 85%,
            #D8D8D8 100%
        );
    background-size: 14px 14px, 14px 14px, auto;
    border-radius: 8px;
    padding: 14px 32px;
    position: relative;
    /* Efeito 3D */
    border: 1px solid #A0A0A0;
    border-top-color: #E0E0E0;
    border-left-color: #D8D8D8;
    border-bottom-color: #777;
    border-right-color: #888;
    box-shadow:
        3px 3px 8px rgba(0, 0, 0, 0.25),
        inset 0 2px 3px rgba(255, 255, 255, 0.6),
        inset 0 -2px 4px rgba(0, 0, 0, 0.08);
    color: #444;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

/* Indicador colorido na lateral */
.alert::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 0 2px 2px 0;
}

.alert-warning::before {
    background: linear-gradient(180deg, #C08040 0%, #8B5A20 100%);
}

.alert-success::before {
    background: linear-gradient(180deg, #4A8B4A 0%, #2E6B2E 100%);
}

.alert-danger::before {
    background: linear-gradient(180deg, #C04040 0%, #8B2020 100%);
}

.alert-info::before {
    background: linear-gradient(180deg, #4070A0 0%, #2A4A70 100%);
}

/* ============================================================
   UTILITÁRIOS
   ============================================================ */
.text-steel { color: var(--steel-300); }
.text-bronze { color: var(--bronze-200); }
.text-rust { color: var(--rust-200); }
.text-patina { color: var(--patina-300); }
.text-success { color: var(--patina-300); }
.text-warning { color: var(--rust-200); }
.text-danger { color: var(--rust-300); }
.text-info { color: #6080A0; }
.text-muted { color: var(--text-muted); }

.bg-steel { background-color: var(--steel-700); }
.bg-bronze { background-color: var(--bronze-600); }
.bg-surface { background-color: var(--surface); }

.border-steel { border-color: var(--steel-600); }
.border-bronze { border-color: var(--bronze-600); }

/* ============================================================
   ANIMAÇÕES
   ============================================================ */
@keyframes shimmer-industrial {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.loading-shimmer {
    background: linear-gradient(
        90deg,
        #2A2C30 0%,
        #3A3C40 25%,
        #4A4C50 50%,
        #3A3C40 75%,
        #2A2C30 100%
    );
    background-size: 200% 100%;
    animation: shimmer-industrial 2s infinite;
}

/* ============================================================
   BOTÕES DE AÇÃO SEMÂNTICOS
   Classes padronizadas para ações comuns do sistema.
   Usar: btn btn-salvar, btn btn-cancelar, etc.
   ============================================================ */

/* SALVAR - Verde Pátina */
.btn-salvar {
    background: linear-gradient(180deg,
        #5A8A5A 0%,
        #4A7A4A 8%,
        #3A6A3A 25%,
        #2A5A2A 50%,
        #3A6A3A 75%,
        #4A7A4A 92%,
        #5A8A5A 100%
    );
    border: 1px solid #1A3A1A;
    /* Texto metálico */
    color: #E8F0E8;
    text-shadow:
        0 -1px 1px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.4);
}

.btn-salvar:hover {
    background: linear-gradient(180deg,
        #6A9A6A 0%,
        #5A8A5A 8%,
        #4A7A4A 25%,
        #3A6A3A 50%,
        #4A7A4A 75%,
        #5A8A5A 92%,
        #6A9A6A 100%
    );
    color: #FFFFFF;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.4);
}

.btn-salvar:active {
    background: linear-gradient(180deg,
        #3A6A3A 0%,
        #4A7A4A 25%,
        #5A8A5A 50%,
        #4A7A4A 75%,
        #3A6A3A 100%
    );
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.4),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(1px);
}

/* CANCELAR - Cinza Neutro */
.btn-cancelar {
    background: linear-gradient(180deg,
        #7A7670 0%,
        #5E5A54 8%,
        #4A4640 25%,
        #3A3632 50%,
        #4A4640 75%,
        #5E5A54 92%,
        #7A7670 100%
    );
    border: 1px solid #2A2724;
    /* Texto metálico */
    color: #E8E6E4;
    text-shadow:
        0 -1px 1px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.4);
}

.btn-cancelar:hover {
    background: linear-gradient(180deg,
        #8A8680 0%,
        #6E6A64 8%,
        #5A5650 25%,
        #4A4640 50%,
        #5A5650 75%,
        #6E6A64 92%,
        #8A8680 100%
    );
    color: #F0EEEC;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.4);
}

.btn-cancelar:active {
    background: linear-gradient(180deg,
        #4A4640 0%,
        #5A5650 25%,
        #5E5A54 50%,
        #5A5650 75%,
        #4A4640 100%
    );
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.4),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(1px);
}

/* NOVO / INSERIR - Azul Aço */
.btn-novo,
.btn-inserir {
    background: linear-gradient(180deg,
        #6088B0 0%,
        #5078A0 8%,
        #406890 25%,
        #305880 50%,
        #406890 75%,
        #5078A0 92%,
        #6088B0 100%
    );
    border: 1px solid #203850;
    /* Texto metálico */
    color: #E0E8F0;
    text-shadow:
        0 -1px 1px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.4);
}

.btn-novo:hover,
.btn-inserir:hover {
    background: linear-gradient(180deg,
        #7098C0 0%,
        #6088B0 8%,
        #5078A0 25%,
        #406890 50%,
        #5078A0 75%,
        #6088B0 92%,
        #7098C0 100%
    );
    color: #FFFFFF;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.4);
}

.btn-novo:active,
.btn-inserir:active {
    background: linear-gradient(180deg,
        #406890 0%,
        #5078A0 25%,
        #6088B0 50%,
        #5078A0 75%,
        #406890 100%
    );
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(1px);
}

/* EXCLUIR / SAIR - Vermelho Ferrugem */
.btn-excluir,
.btn-sair {
    background: linear-gradient(180deg,
        #A84040 0%,
        #8C3030 8%,
        #702424 25%,
        #5A1818 50%,
        #702424 75%,
        #8C3030 92%,
        #A84040 100%
    );
    border: 1px solid #3A1010;
    /* Texto metálico */
    color: #F0E0E0;
    text-shadow:
        0 -1px 1px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.4);
}

.btn-excluir:hover,
.btn-sair:hover {
    background: linear-gradient(180deg,
        #B85050 0%,
        #A84040 8%,
        #8C3030 25%,
        #702424 50%,
        #8C3030 75%,
        #A84040 92%,
        #B85050 100%
    );
    color: #FFFFFF;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.4);
}

.btn-excluir:active,
.btn-sair:active {
    background: linear-gradient(180deg,
        #702424 0%,
        #8C3030 25%,
        #A84040 50%,
        #8C3030 75%,
        #702424 100%
    );
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.4),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(1px);
}

/* EDITAR - Azul Aço (igual a btn-novo) */
.btn-editar {
    background: linear-gradient(180deg,
        #6088B0 0%,
        #5078A0 8%,
        #406890 25%,
        #305880 50%,
        #406890 75%,
        #5078A0 92%,
        #6088B0 100%
    );
    border: 1px solid #203850;
    /* Texto metálico */
    color: #E0E8F0;
    text-shadow:
        0 -1px 1px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.4);
}

.btn-editar:hover {
    background: linear-gradient(180deg,
        #7098C0 0%,
        #6088B0 8%,
        #5078A0 25%,
        #406890 50%,
        #5078A0 75%,
        #6088B0 92%,
        #7098C0 100%
    );
    color: #FFFFFF;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.4);
}

.btn-editar:active {
    background: linear-gradient(180deg,
        #406890 0%,
        #5078A0 25%,
        #6088B0 50%,
        #5078A0 75%,
        #406890 100%
    );
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(1px);
}

/* EXPORTAR - Âmbar/Dourado */
.btn-exportar {
    background: linear-gradient(180deg,
        #B8A050 0%,
        #A89040 8%,
        #988030 25%,
        #887020 50%,
        #988030 75%,
        #A89040 92%,
        #B8A050 100%
    );
    border: 1px solid #584010;
    /* Texto metálico */
    color: #F8F0E0;
    text-shadow:
        0 -1px 1px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.15);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.4);
}

.btn-exportar:hover {
    background: linear-gradient(180deg,
        #C8B060 0%,
        #B8A050 8%,
        #A89040 25%,
        #988030 50%,
        #A89040 75%,
        #B8A050 92%,
        #C8B060 100%
    );
    color: #FFFFFF;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.4);
}

.btn-exportar:active {
    background: linear-gradient(180deg,
        #988030 0%,
        #A89040 25%,
        #B8A050 50%,
        #A89040 75%,
        #988030 100%
    );
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(1px);
}

/* IMPORTAR - Azul Info */
.btn-importar {
    background: linear-gradient(180deg,
        #5A7A9A 0%,
        #4A6A8A 8%,
        #3A5A7A 25%,
        #2A4A6A 50%,
        #3A5A7A 75%,
        #4A6A8A 92%,
        #5A7A9A 100%
    );
    border: 1px solid #1A3A4A;
    /* Texto metálico */
    color: #E8F0F8;
    text-shadow:
        0 -1px 1px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.4);
}

.btn-importar:hover {
    background: linear-gradient(180deg,
        #6A8AAA 0%,
        #5A7A9A 8%,
        #4A6A8A 25%,
        #3A5A7A 50%,
        #4A6A8A 75%,
        #5A7A9A 92%,
        #6A8AAA 100%
    );
    color: #FFFFFF;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.4);
}

.btn-importar:active {
    background: linear-gradient(180deg,
        #3A5A7A 0%,
        #4A6A8A 25%,
        #5A7A9A 50%,
        #4A6A8A 75%,
        #3A5A7A 100%
    );
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.4),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(1px);
}

/* AÇÕES - Cinza Bronze */
.btn-acoes {
    background: linear-gradient(180deg,
        #7A6A5A 0%,
        #6A5A4A 8%,
        #5A4A3A 25%,
        #4A3A2A 50%,
        #5A4A3A 75%,
        #6A5A4A 92%,
        #7A6A5A 100%
    );
    border: 1px solid #3A2A1A;
    /* Texto metálico */
    color: #F0E8E0;
    text-shadow:
        0 -1px 1px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.4);
}

.btn-acoes:hover {
    background: linear-gradient(180deg,
        #8A7A6A 0%,
        #7A6A5A 8%,
        #6A5A4A 25%,
        #5A4A3A 50%,
        #6A5A4A 75%,
        #7A6A5A 92%,
        #8A7A6A 100%
    );
    color: #FFFFFF;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.4);
}

.btn-acoes:active {
    background: linear-gradient(180deg,
        #5A4A3A 0%,
        #6A5A4A 25%,
        #7A6A5A 50%,
        #6A5A4A 75%,
        #5A4A3A 100%
    );
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.4),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(1px);
}

/* Garantir que todos os botões de ação tenham propriedades base do btn-metallic */
.btn-salvar,
.btn-cancelar,
.btn-novo,
.btn-inserir,
.btn-excluir,
.btn-sair,
.btn-editar,
.btn-exportar,
.btn-importar,
.btn-acoes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: var(--font-size-base);
    font-weight: 600;
    letter-spacing: 0.3px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

/* ============================================================
   HOVER GLOBAL - Classes utilitárias e estilos padrão
   Usar as variáveis: --hover-bg, --hover-bg-light, --hover-bg-strong, --hover-text
   ============================================================ */

/* Classes utilitárias de hover */
.hover-bg:hover {
    background: var(--hover-bg) !important;
}

.hover-bg-light:hover {
    background: var(--hover-bg-light) !important;
}

.hover-bg-strong:hover {
    background: var(--hover-bg-strong) !important;
}

.hover-text:hover {
    color: var(--hover-text) !important;
}

/* Hover padrão para linhas de lista genéricas */
.list-item:hover,
.list-group-item:hover {
    background: var(--hover-bg);
    color: var(--hover-text);
}

/* Hover para links dentro de cards e containers */
.card a:hover,
.card-metallic a:hover {
    color: var(--hover-text);
}

/* Hover para itens clicáveis genéricos */
[role="button"]:hover,
.clickable:hover,
.interactive:hover {
    background: var(--hover-bg);
}

/* ============================================================
   TOOLBAR METALLIC
   ============================================================ */
.toolbar-metallic {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: linear-gradient(180deg,
        var(--inox-600) 0%,
        var(--inox-700) 15%,
        var(--inox-800) 85%,
        var(--inox-900) 100%);
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-lg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.4);
}

.toolbar-metallic .toolbar-left,
.toolbar-metallic .toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-metallic .toolbar-separator {
    width: 1px;
    height: 24px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%);
    margin: 0 8px;
}

/* Search Box */
.search-box {
    display: flex;
    align-items: center;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.2) 100%);
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: var(--radius-md);
    padding: 0 12px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.search-box i {
    color: var(--text-muted);
    font-size: 14px;
}

.search-box input {
    background: transparent;
    border: none;
    padding: 8px 10px;
    color: #FFFFFF;
    min-width: 250px;
    font-size: var(--font-size-base);
}

.search-box input:focus {
    outline: none;
    color: var(--copper-200);
}

.search-box input::placeholder {
    color: var(--text-muted);
}

/* Botão Help */
.btn-help {
    background: linear-gradient(180deg,
        var(--inox-500) 0%,
        var(--inox-600) 50%,
        var(--inox-700) 100%);
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-help:hover {
    background: linear-gradient(180deg,
        var(--inox-400) 0%,
        var(--inox-500) 50%,
        var(--inox-600) 100%);
    color: var(--copper-300);
}

/* ============================================================
   DROPDOWN MENU CUSTOM - Estilo Prateado/Inox Claro
   ============================================================ */
.dropdown-menu-custom {
    display: none;
    position: fixed;
    z-index: 1050;
    background:
        var(--texture-brushed),
        linear-gradient(180deg,
            #E8E8EC 0%,
            #D8D8DC 10%,
            #C8C8CC 50%,
            #B8B8BC 90%,
            #A8A8AC 100%);
    border: 1px solid #8A8A8E;
    border-radius: var(--radius-md);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    min-width: 200px;
    padding: 8px 0;
    animation: dropdownFadeIn 0.15s ease;
}

.dropdown-menu-custom.show {
    display: block;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-menu-custom .dropdown-item,
.dropdown-menu-custom button.dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: #3E2723 !important;
    font-size: var(--font-size-base);
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.dropdown-menu-custom .dropdown-item i,
.dropdown-menu-custom button.dropdown-item i {
    color: #5D4037 !important;
    transition: color 0.15s ease;
}

.dropdown-menu-custom .dropdown-item:hover:not(.disabled),
.dropdown-menu-custom button.dropdown-item:hover:not(.disabled) {
    background: linear-gradient(180deg,
        rgba(192, 106, 60, 0.25) 0%,
        rgba(192, 106, 60, 0.15) 100%) !important;
    color: #8B4513 !important;
}

.dropdown-menu-custom .dropdown-item:hover:not(.disabled) i,
.dropdown-menu-custom button.dropdown-item:hover:not(.disabled) i {
    color: #8B4513 !important;
}

.dropdown-menu-custom .dropdown-item.disabled {
    color: #909090;
    cursor: not-allowed;
    opacity: 0.6;
}

.dropdown-menu-custom .dropdown-item.text-danger,
.dropdown-menu-custom button.dropdown-item.text-danger {
    color: #8B3030 !important;
}

.dropdown-menu-custom .dropdown-item.text-danger i,
.dropdown-menu-custom button.dropdown-item.text-danger i {
    color: #8B3030 !important;
}

.dropdown-menu-custom .dropdown-item.text-danger:hover:not(.disabled),
.dropdown-menu-custom button.dropdown-item.text-danger:hover:not(.disabled) {
    background: linear-gradient(180deg,
        rgba(180, 60, 60, 0.2) 0%,
        rgba(180, 60, 60, 0.1) 100%) !important;
    color: #A03030 !important;
}

.dropdown-menu-custom .dropdown-item.text-danger:hover:not(.disabled) i,
.dropdown-menu-custom button.dropdown-item.text-danger:hover:not(.disabled) i {
    color: #A03030 !important;
}

/* Success (Iniciar Orçamentação) */
.dropdown-menu-custom .dropdown-item.text-success,
.dropdown-menu-custom button.dropdown-item.text-success {
    color: #1B5E20 !important;
    font-weight: 600 !important;
}

.dropdown-menu-custom .dropdown-item.text-success i,
.dropdown-menu-custom button.dropdown-item.text-success i {
    color: #1B5E20 !important;
}

.dropdown-menu-custom .dropdown-item.text-success:hover:not(.disabled),
.dropdown-menu-custom button.dropdown-item.text-success:hover:not(.disabled) {
    background: linear-gradient(180deg,
        rgba(46, 125, 50, 0.2) 0%,
        rgba(46, 125, 50, 0.1) 100%) !important;
    color: #2E7D32 !important;
}

.dropdown-menu-custom .dropdown-item.text-success:hover:not(.disabled) i,
.dropdown-menu-custom button.dropdown-item.text-success:hover:not(.disabled) i {
    color: #2E7D32 !important;
}

/* Warning (Parar Orçamentação) - Marrom terracota escuro */
.dropdown-menu-custom .dropdown-item.text-warning,
.dropdown-menu-custom button.dropdown-item.text-warning {
    color: #8B4000 !important;
    font-weight: 600 !important;
}

.dropdown-menu-custom .dropdown-item.text-warning i,
.dropdown-menu-custom button.dropdown-item.text-warning i {
    color: #8B4000 !important;
}

.dropdown-menu-custom .dropdown-item.text-warning:hover:not(.disabled),
.dropdown-menu-custom button.dropdown-item.text-warning:hover:not(.disabled) {
    background: linear-gradient(180deg,
        rgba(139, 64, 0, 0.2) 0%,
        rgba(139, 64, 0, 0.1) 100%) !important;
    color: #A04000 !important;
}

.dropdown-menu-custom .dropdown-item.text-warning:hover:not(.disabled) i,
.dropdown-menu-custom button.dropdown-item.text-warning:hover:not(.disabled) i {
    color: #E65100 !important;
}

.dropdown-menu-custom .dropdown-divider {
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        #A0A0A4 20%,
        #A0A0A4 80%,
        transparent 100%);
    margin: 6px 12px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ============================================================
   HELP MODAL STYLES
   ============================================================ */
.help-section {
    margin-bottom: 20px;
}

.help-section:last-child {
    margin-bottom: 0;
}

.help-section h6 {
    color: var(--copper-300);
    font-weight: 600;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.help-section h6 i {
    margin-right: 8px;
}

.help-section p {
    margin-bottom: 0;
    line-height: 1.6;
}

.help-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.help-list li {
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.help-list kbd {
    background: linear-gradient(180deg,
        var(--inox-500) 0%,
        var(--inox-700) 100%);
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    padding: 2px 8px;
    font-family: monospace;
    font-size: 11px;
    color: var(--text-primary);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

/* ============================================================
   BADGE STYLES (complemento)
   ============================================================ */
.badge-danger {
    background: linear-gradient(180deg, #8C4C4C 0%, #4C2828 100%) !important;
    color: #FFFFFF;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

/* ============================================================
   ACTION BUTTONS IN TABLE
   ============================================================ */
.btn-group-actions {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.btn-action {
    background: transparent;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-action:hover {
    background: var(--hover-bg);
    color: var(--copper-300);
}

.btn-action.text-danger:hover {
    background: rgba(200, 60, 60, 0.2);
    color: #FF6B6B;
}