/* ============================================================
HUGUET – Corporate Theme for LemonLDAP::NG
============================================================ */

/* ── 1. Design tokens ─────────────────────────────────────── */
:root {
--brand-primary: #0B1F3A; /* bleu nuit */
--brand-primary-dk: #07162B; /* bleu nuit profond */
--brand-accent: #00ADEF; /* cyan */
--brand-accent-dk: #0090C8; /* cyan foncé (hover) */
--brand-accent2: #E1001A; /* rouge */
--brand-bg-start: #07162B;
--brand-bg-end: #0A2745;

--card-bg: #ffffff;
--card-radius: 16px;
--card-shadow: 0 8px 40px rgba(0,0,0,.35);

--input-height: 48px;
--input-radius: 8px;
--input-border: #CBD5E1;
--input-focus: #00ADEF;

--text-primary: #0F172A;
--text-muted: #64748B;
--text-on-dark: #E2EAF4;

--font-base: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--transition: .18s ease;
}

/* ── 2. Reset / base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
font-family: var(--font-base);
font-size: 15px;
line-height: 1.6;
background: linear-gradient(135deg,
var(--brand-bg-start) 0%,
var(--brand-primary) 60%,
var(--brand-bg-end) 100%);
min-height: 100vh;
color: var(--text-primary);
}

/* ── 3. Override Bootstrap container on login page ─────────── */
#logincontent.huguet-login-page {
max-width: 100%;
padding: 0;
margin: 0;
}

/* ── 4. Split layout ──────────────────────────────────────── */
.huguet-split-layout {
display: flex;
min-height: 100vh;
width: 100%;
}

/* LEFT brand panel */
.huguet-brand-panel {
flex: 0 0 52%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(160deg,
var(--brand-primary-dk) 0%,
var(--brand-primary) 100%);
padding: 48px 40px;
position: relative;
overflow: hidden;
}

/* subtle radial glow */
.huguet-brand-panel::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 30% 40%,
rgba(0,173,239,.18) 0%, transparent 65%);
pointer-events: none;
}

.huguet-brand-inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
position: relative;
z-index: 1;
max-width: 480px;
width: 100%;
}

.huguet-brand-logo {
max-height: 56px;
width: auto;
object-fit: contain;
filter: brightness(0) invert(1);
}

.huguet-brand-visual {
width: 100%;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 16px 48px rgba(0,0,0,.4);
}

.huguet-brand-img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
max-height: 340px;
}

.huguet-brand-baseline {
color: var(--text-on-dark);
font-size: 1.05rem;
font-weight: 500;
margin: 0;
opacity: .85;
letter-spacing: .02em;
}

/* RIGHT login panel */
.huguet-login-panel {
flex: 1 1 48%;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 24px;
}

/* ── 5. Login card ────────────────────────────────────────── */
.huguet-login-card {
background: var(--card-bg);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
padding: 44px 40px 36px;
width: 100%;
max-width: 420px;
}

/* Card logo (mobile / desktop right panel) */
.huguet-card-logo {
text-align: center;
margin-bottom: 28px;
}

.huguet-card-logo-img {
max-height: 52px;
width: auto;
object-fit: contain;
}

/* Suppress card logo on wide screens (brand panel visible) */
@media (min-width: 900px) {
.huguet-card-logo { display: none; }
}

/* ── 6. Cards / panels (Bootstrap overrides) ──────────────── */
.huguet-login-card .card,
.huguet-login-card .panel {
border: none;
box-shadow: none;
border-radius: 0;
background: transparent;
padding: 0;
margin: 0;
}

/* ── 7. Form inputs ───────────────────────────────────────── */
.huguet-login-card .form-control,
.huguet-login-card input[type="text"],
.huguet-login-card input[type="password"],
.huguet-login-card input[type="email"] {
height: var(--input-height);
border-radius: var(--input-radius);
border: 1.5px solid var(--input-border);
font-size: .95rem;
padding: 0 14px;
transition: border-color var(--transition), box-shadow var(--transition);
background: #F8FAFC;
color: var(--text-primary);
width: 100%;
}

.huguet-login-card .form-control:focus,
.huguet-login-card input[type="text"]:focus,
.huguet-login-card input[type="password"]:focus,
.huguet-login-card input[type="email"]:focus {
border-color: var(--input-focus);
box-shadow: 0 0 0 3px rgba(0,173,239,.25);
outline: none;
background: #fff;
}

.huguet-login-card .form-group,
.huguet-login-card .mb-3 {
margin-bottom: 18px;
}

.huguet-login-card label {
font-size: .85rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 6px;
display: block;
}

/* ── 8. Primary button ────────────────────────────────────── */
.huguet-login-card .btn-primary,
.huguet-login-card button[type="submit"],
.huguet-login-card .btn-success {
background-color: var(--brand-accent) !important;
border-color: var(--brand-accent) !important;
color: #fff !important;
font-weight: 600;
font-size: .95rem;
height: var(--input-height);
border-radius: var(--input-radius);
width: 100%;
cursor: pointer;
transition: background-color var(--transition),
box-shadow var(--transition),
transform var(--transition);
letter-spacing: .03em;
}

.huguet-login-card .btn-primary:hover,
.huguet-login-card button[type="submit"]:hover,
.huguet-login-card .btn-success:hover {
background-color: var(--brand-accent-dk) !important;
border-color: var(--brand-accent-dk) !important;
box-shadow: 0 4px 16px rgba(0,173,239,.35);
transform: translateY(-1px);
}

/* Focus ring – keyboards */
.huguet-login-card .btn-primary:focus-visible,
.huguet-login-card button[type="submit"]:focus-visible,
.huguet-login-card .btn-success:focus-visible {
outline: 3px solid var(--brand-accent);
outline-offset: 3px;
box-shadow: none;
}

/* ── 9. Secondary / danger buttons ───────────────────────── */
.huguet-login-card .btn-secondary {
background: transparent !important;
border: 1.5px solid var(--input-border) !important;
color: var(--text-primary) !important;
height: 40px;
border-radius: var(--input-radius);
font-size: .88rem;
}

.huguet-login-card .btn-danger {
background-color: var(--brand-accent2) !important;
border-color: var(--brand-accent2) !important;
}

/* ── 10. Error / message blocks ───────────────────────────── */
#errormsg {
/* lives outside .huguet-login-card – style globally */
}

.message, .alert {
border-radius: 8px;
font-size: .9rem;
padding: 12px 16px;
margin-bottom: 16px;
}

.message-error, .alert-danger {
background: #FEF2F2;
border: 1px solid #FECACA;
color: #991B1B;
}

.message-warning, .alert-warning {
background: #FFFBEB;
border: 1px solid #FDE68A;
color: #92400E;
}

.message-info, .alert-info {
background: #EFF6FF;
border: 1px solid #BFDBFE;
color: #1E40AF;
}

.message-success, .alert-success {
background: #F0FDF4;
border: 1px solid #BBF7D0;
color: #166534;
}

/* ── 11. Links ────────────────────────────────────────────── */
a { color: var(--brand-accent) !important; }
a:hover { text-decoration: underline; }
a:focus-visible {
outline: 2px solid var(--brand-accent);
outline-offset: 2px;
border-radius: 3px;
}

/* ── 12. Checkboxes / remember me ─────────────────────────── */
.huguet-login-card input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--brand-accent);
cursor: pointer;
}

/* ── 13. Navbar inside auth loop ──────────────────────────── */
.huguet-login-card .navbar {
border-radius: 8px;
margin-bottom: 16px;
background: #F1F5F9 !important;
}

/* ── 14. Login footer ─────────────────────────────────────── */
.huguet-login-footer {
text-align: center;
padding: 16px 24px;
font-size: .8rem;
color: rgba(226,234,244,.55);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0 10px;
}

.huguet-login-footer a {
color: rgba(226,234,244,.7) !important;
text-decoration: none;
}
.huguet-login-footer a:hover { text-decoration: underline; }

.huguet-footer-sep {
opacity: .35;
user-select: none;
}

/* ── 15. Legacy LLNG selectors ────────────────────────────── */
img.llng-logo, .llng-logo img, .navbar-brand img {
max-height: 56px;
width: auto;
}

/* ── 16. Responsive ───────────────────────────────────────── */

/* Tablet: shrink brand panel */
@media (max-width: 1100px) {
.huguet-brand-panel { flex: 0 0 45%; padding: 40px 28px; }
}

/* Mobile: stack, brand becomes subtle background */
@media (max-width: 899px) {
.huguet-split-layout {
flex-direction: column;
min-height: 100vh;
}

.huguet-brand-panel {
display: none; /* hidden on mobile – logo in card visible */
}

.huguet-login-panel {
flex: 1;
align-items: flex-start;
padding: 32px 16px 16px;
background: none;
}

.huguet-login-card {
padding: 32px 24px 28px;
max-width: 100%;
}

.huguet-card-logo { display: block !important; }

.huguet-login-footer {
padding: 12px 16px 20px;
}
}

@media (max-width: 480px) {
.huguet-login-card {
padding: 28px 16px 24px;
border-radius: 12px;
}
}

/* ── 17. Reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; }
}