/* Additions to the Webadmin theme (app.min.css): Groupe Solutions TI logo, Font Awesome duotone colours, a few
   components of the portal. Everything else is the template's own styling. */
:root {
    --fa-primary-color: var(--bs-primary);
    --fa-secondary-color: #2a86f0;
    --fa-secondary-opacity: 0.35;
}

h1:focus {
    outline: none;
}

/* Logo: emblem + company name (the template uses a text image). */
.logo .logo-lg {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.logo-txt {
    color: var(--bs-heading-color, #0c2350);
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
}

.auth-logo {
    display: inline-flex !important;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}

/* Font Awesome duotone icons in the side menu and buttons follow the template's icon sizing and colours. */
#sidebar-menu ul li a .fa-duotone.nav-icon {
    width: 1.25rem;
    font-size: 1.05rem;
    text-align: center;
}

.btn .fa-duotone,
.dropdown-item .fa-duotone {
    --fa-primary-color: currentColor;
    --fa-secondary-color: currentColor;
    --fa-secondary-opacity: 0.45;
}

/* Two-factor and secrets. */
.qr-code svg {
    width: 200px;
    height: 200px;
}

.code-input {
    max-width: 14rem;
    font-family: ui-monospace, monospace;
    letter-spacing: 0.3em;
}

.recovery-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.5rem;
    font-size: 1.05rem;
}

.one-time-secret {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    font-size: 1.1rem;
    background: var(--bs-warning-bg-subtle, #fff8e6);
    border-radius: 0.5rem;
}

.tile-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.25rem;
    background: var(--bs-primary-bg-subtle, rgba(31, 88, 199, 0.08));
    border-radius: 0.6rem;
}

a.card {
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}

a.card:hover {
    transform: translateY(-2px);
}

/* Light / dark switch (body data-bs-theme). */
[data-bs-theme="dark"] .theme-icon-dark,
[data-bs-theme="light"] .theme-icon-light {
    display: none;
}