/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Custom CSS for Nexus Theme
 *
 * This file allows you to customize the theme colors and styles for the entire Nexus template.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --primary: #4b5563; use --primary: #your-color;
 * - You can also override any CSS properties here.
 */

:root {
    --white: #fff;

    /* Neutral shades — XHOST gray scale */
    --neutral-50: #F8F9FA;
    --neutral-100: #F1F3F5;
    --neutral-200: #E9ECEF;
    --neutral-300: #DEE2E6;
    --neutral-400: #CED4DA;
    --neutral-500: #ADB5BD;
    --neutral-600: #868E96;
    --neutral-700: #495057;
    --neutral-800: #343A40;
    --neutral-900: #212529;
    --neutral-950: #212529;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    /* Primary colors — XHOST Green */
    --primary: #4FAA2C;           /* Verde XHOST */
    --primary-lifted: #439224;    /* Verde hover (más oscuro) */
    --primary-accented: #377A1D;  /* Verde pressed */
    --primary-highlight: #BFEDA9; /* Verde suave para hover de tablas/listas */

    /* Secondary colors — XHOST Slate */
    --secondary: #37474F;          /* Slate 800 */
    --secondary-lifted: #263238;   /* Slate 900 */
    --secondary-accented: #455A64; /* Slate 700 */

    /* Success colors — XHOST */
    --success: #28A745;
    --success-lifted: #218838;
    --success-accented: #1e7e34;

    /* Info colors — XHOST */
    --info: #17A2B8;
    --info-lifted: #138496;
    --info-accented: #117a8b;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors — XHOST */
    --warning: #FFC107;
    --warning-lifted: #e0a800;
    --warning-accented: #d39e00;

    /* Error colors — XHOST */
    --error: #DC3545;
    --error-lifted: #c82333;
    --error-accented: #bd2130;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}

/* =========================================
   CLIENT AREA HOME — Overrides XHOST
   ========================================= */

/* Tiles superiores — fondos más limpios */
.tiles .tile {
    background-color: var(--bg);
    border-right: 1px solid var(--border-muted);
}
.tiles .tile:hover {
    background-color: var(--primary-highlight);
}
.tiles .tile .title {
    color: var(--text-lifted);
}
.tiles .tile i {
    color: var(--border);
}
.tiles .tile:hover i {
    color: var(--primary);
}

/* Listas dentro de cards — hover verde suave */
.client-home-cards .list-group .list-group-item:hover {
    background-color: var(--primary-highlight);
}

/* Bordes de listas más sutiles */
.client-home-cards .list-group {
    border-top-color: var(--border-muted) !important;
    border-bottom-color: var(--border-muted) !important;
}
.client-home-cards .list-group .list-group-item {
    border-bottom-color: var(--border-muted);
}

/* Card headers — texto más limpio */
.client-home-cards .card-header small,
.client-home-cards small {
    color: var(--text-muted);
}

/* =========================================
   BOTONES — Overrides XHOST
   ========================================= */

/* Botón primario */
body .btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}
body .btn-primary:hover, body .btn-primary:focus, body .btn-primary:active,
body .btn-primary:not(:disabled):not(.disabled):active,
.show > body .btn-primary.dropdown-toggle {
    background-color: var(--primary-lifted) !important;
    border-color: var(--primary-lifted) !important;
    color: #fff !important;
}
body .btn-primary:focus, body .btn-primary.focus,
body .btn-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 0.2rem rgba(79, 170, 44, 0.35) !important;
}

/* Botón outline primario */
body .btn-outline-primary {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background-color: transparent !important;
}
body .btn-outline-primary:hover, body .btn-outline-primary:active,
body .btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}
body .btn-outline-primary:focus,
body .btn-outline-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 0.2rem rgba(79, 170, 44, 0.35) !important;
}

/* Botón success — también verde XHOST */
body .btn-success {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}
body .btn-success:hover, body .btn-success:focus, body .btn-success:active,
body .btn-success:not(:disabled):not(.disabled):active {
    background-color: var(--primary-lifted) !important;
    border-color: var(--primary-lifted) !important;
    color: #fff !important;
}
body .btn-success:focus,
body .btn-success:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 0.2rem rgba(79, 170, 44, 0.35) !important;
}

/* Links — color primario XHOST */
body a {
    color: var(--primary);
}
body a:hover {
    color: var(--primary-lifted);
}

/* Main body y breadcrumb — fondo */
body section#main-body {
    background-color: #dee2e6 !important;
}
body .master-breadcrumb,
body .master-breadcrumb .breadcrumb {
    background-color: #dee2e6 !important;
}

/* Footer — fondo */
body footer.footer {
    background-color: #060840 !important;
}