/*
 * Pronetsys corporate theme.
 * Loaded after the base Bootswatch theme so these brand colors take precedence.
 * Palette taken from pronetsys.com.co:
 *   primary  #0065cb   secondary #0057ad   dark #0d1821
 */
:root {
    --pronetsys-primary: #0065cb;
    --pronetsys-secondary: #0057ad;
    --pronetsys-dark: #0d1821;

    /* Recolor Bootstrap's primary + links via its CSS variables. */
    --bs-primary: #0065cb;
    --bs-primary-rgb: 0, 101, 203;
    --bs-link-color: #0065cb;
    --bs-link-color-rgb: 0, 101, 203;
    --bs-link-hover-color: #0057ad;
    --bs-link-hover-color-rgb: 0, 87, 173;
}

/* Corporate font (Pronetsys site uses an Arial/Helvetica sans-serif family). */
body {
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Primary buttons */
.btn-primary {
    background-color: var(--pronetsys-primary) !important;
    border-color: var(--pronetsys-primary) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:disabled {
    background-color: var(--pronetsys-secondary) !important;
    border-color: var(--pronetsys-secondary) !important;
}

.btn-outline-primary {
    color: var(--pronetsys-primary) !important;
    border-color: var(--pronetsys-primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--pronetsys-primary) !important;
    border-color: var(--pronetsys-primary) !important;
    color: #fff !important;
}

/* Navigation sidebar in the corporate dark tone. */
.sidebar {
    background-color: var(--pronetsys-dark) !important;
    background-image: none !important;
}

/* Logo shown on the login / register (account) pages. */
.pronetsys-auth-logo {
    max-width: 260px;
    height: auto;
}

/* ============================================================
   Corporate login / register card (AuthLayout)
   Rendered inside the app content area (not a full-screen page).
   ============================================================ */
.pronetsys-auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 2.5rem 1rem;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

.pronetsys-auth-card {
    width: 100%;
    max-width: 430px;
    background: #ffffff;
    color: #2c2c2c;
    border-radius: 14px;
    padding: 36px 34px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.pronetsys-auth-brand {
    text-align: center;
    margin-bottom: 22px;
}
.pronetsys-auth-brand img {
    max-width: 230px;
    height: auto;
}

.pronetsys-auth-footer {
    color: #8a9099;
    font-size: 0.85rem;
    text-align: center;
}

/* The embedded Bootstrap form: fill the card and stay readable on white,
   regardless of the active light/dark theme. */
.pronetsys-auth-card h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #0d1821;
    text-align: center;
    margin-bottom: 4px;
}
.pronetsys-auth-card h2 {
    font-size: 1rem;
    font-weight: 400;
    color: #6c757d;
    text-align: center;
    margin-bottom: 18px;
}
.pronetsys-auth-card hr {
    display: none;
}
.pronetsys-auth-card .row,
.pronetsys-auth-card .col-md-4 {
    margin: 0;
    padding: 0;
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}
.pronetsys-auth-card .form-control {
    background-color: #fff;
    color: #2c2c2c;
    border: 1px solid #ced4da;
}
.pronetsys-auth-card .form-control:focus {
    border-color: var(--pronetsys-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 101, 203, 0.2);
}
.pronetsys-auth-card label,
.pronetsys-auth-card .form-floating > label {
    color: #6c757d;
}
.pronetsys-auth-card a {
    color: var(--pronetsys-primary);
    text-decoration: none;
}
.pronetsys-auth-card a:hover {
    text-decoration: underline;
}
.pronetsys-auth-card .btn-primary {
    padding: 0.6rem;
    font-weight: 600;
}

/* ============================================================
   Menú lateral colapsable: riel con favicon + auto-expansión
   - Por defecto (escritorio): riel angosto mostrando el favicon
     de Pronetsys y solo los íconos (colapso automático).
   - Al pasar el mouse: se expande mostrando logo + textos.
   - Botón "fijar" (checkbox): lo mantiene expandido.
   ============================================================ */

/* El checkbox solo guarda el estado; no se ve. */
.sidebar-collapse-cb {
    display: none;
}

/* Base / móvil: logo completo visible, favicon e ícono de fijar ocultos. */
.sidebar-logo-full {
    display: block;
}

.sidebar-logo-icon {
    display: none;
}

.sidebar-toggle {
    display: none;
}

@media (min-width: 641px) {
    /* Colapsado a riel por defecto (automático). */
    .sidebar {
        min-width: 72px !important;
        width: 72px;
        transition: width .2s ease, min-width .2s ease;
    }

    /* Se expande al pasar el mouse, o queda fijo si se marcó el botón. */
    .sidebar:hover,
    .sidebar-collapse-cb:checked ~ .sidebar {
        min-width: 250px !important;
        width: 250px;
    }

    /* Aspecto del riel (colapsado): solo íconos + favicon. */
    .sidebar .nav-label,
    .sidebar .logo-subtitle,
    .sidebar .sidebar-logo-full {
        display: none;
    }

    .sidebar .sidebar-logo-icon {
        display: block;
    }

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

    .sidebar .navbar-brand {
        margin-right: 0;
    }

    /* Center the icon glyphs in the rail. The fixed 2rem width is only needed
       to keep the labels aligned when expanded. */
    .sidebar .oi {
        width: auto;
    }

    .sidebar .nav-link,
    .sidebar .nav-link-button {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    /* Aspecto expandido (hover o fijado): logo + textos. */
    .sidebar:hover .nav-label,
    .sidebar-collapse-cb:checked ~ .sidebar .nav-label {
        display: inline;
    }

    .sidebar:hover .logo-subtitle,
    .sidebar-collapse-cb:checked ~ .sidebar .logo-subtitle {
        display: block;
    }

    .sidebar:hover .sidebar-logo-full,
    .sidebar-collapse-cb:checked ~ .sidebar .sidebar-logo-full {
        display: block;
    }

    .sidebar:hover .sidebar-logo-icon,
    .sidebar-collapse-cb:checked ~ .sidebar .sidebar-logo-icon {
        display: none;
    }

    .sidebar:hover .sidebar-brand,
    .sidebar-collapse-cb:checked ~ .sidebar .sidebar-brand {
        justify-content: space-between;
    }

    .sidebar:hover .nav-link,
    .sidebar:hover .nav-link-button,
    .sidebar-collapse-cb:checked ~ .sidebar .nav-link,
    .sidebar-collapse-cb:checked ~ .sidebar .nav-link-button {
        justify-content: flex-start;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Restore the fixed icon width so labels line up when expanded. */
    .sidebar:hover .oi,
    .sidebar-collapse-cb:checked ~ .sidebar .oi {
        width: 2rem;
    }

    .sidebar:hover .sidebar-toggle,
    .sidebar-collapse-cb:checked ~ .sidebar .sidebar-toggle {
        display: inline-flex;
    }
}