/* ============================================================================
   Velman Admin | Login Page Stylesheet
   ----------------------------------------------------------------------------
   Table of contents
   1. Tokens (colors, radii, shadows, timing)
   2. Base / reset
   3. Layout shell (split screen)
   4. Left panel — brand story
   5. Signature ornament — floating "tree-ring" shapes
   6. Right panel — login card
   7. Joinery corner brackets (signature ornament on the card)
   8. Form elements (floating labels, password toggle, checkbox, button)
   9. Validation states
   10. Animations
   11. Responsive breakpoints
   12. Reduced motion / accessibility
   ============================================================================ */

/* --------------------------------- 1. Tokens -------------------------------- */
:root {
    /* Brand palette */
    --brown-primary: #4F46E5;
    --brown-dark: #111827;
    --gold: #6366F1;
    --gold-light: #A5B4FC;
    --bg-light: #F8FAFC;
    --white: #FFFFFF;

    /* Derived / utility */
    --ink: #111827;
    --ink-muted: #64748B;
    --border-soft: rgba(99, 102, 241, 0.18);

    /* Shape */
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;

    /* Shadow */
    --shadow-soft: 0 20px 50px rgba(15, 23, 42, 0.12);
    --shadow-card: 0 30px 70px rgba(15, 23, 42, 0.18);

    /* Motion */
    --ease: cubic-bezier(.2, .8, .25, 1);
}

/* --------------------------------- 2. Base ---------------------------------- */
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    color: var(--ink);
    background: var(--bg-light);
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
}

/* ----------------------------- 3. Layout shell ------------------------------ */
.velman-shell {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* ------------------------- 4. Left panel: brand story ----------------------- */
.brand-panel {
    position: relative;
    flex: 0 0 50%;
    max-width: 50%;
    min-height: 100vh;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    padding: 56px 64px;
}

.brand-panel__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.04);
}

.brand-panel__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 27, 75, 0.94) 55%, rgba(15, 23, 42, 0.98) 100%),
        linear-gradient(90deg, rgba(79, 70, 229, 0.20) 0%, transparent 45%);
}

/* Subtle repeating grain lines over the photo — echoes real timber grain */
.brand-panel__grain {
    position: absolute;
    inset: 0;
    opacity: 0.10;
    background-image: repeating-linear-gradient(
        95deg,
        rgba(255, 255, 255, 0.6) 0px,
        transparent 1px,
        transparent 7px,
        rgba(255, 255, 255, 0.6) 8px
    );
    mix-blend-mode: overlay;
    pointer-events: none;
}

.brand-panel__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    color: var(--white);
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    animation: fadeInUp 0.9s var(--ease) 0.15s forwards;
}

.brand-panel__logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-panel__logo-text {
    font-weight: 700;
    font-size: clamp(15px, 1.25vw, 20px);
    letter-spacing: 0.08em;
    line-height: 1.25;
}

.brand-panel__logo-image {
    width: auto;
    height: 64px;
    max-width: 180px;
    object-fit: contain;
    flex: 0 0 auto;
}

.brand-panel__copy {
    margin-top: 36px;
}

.brand-panel__eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 18px;
}

.brand-panel__heading {
    font-size: clamp(34px, 3.4vw, 46px);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 18px;
}

.brand-panel__subtitle {
    font-size: 15.5px;
    line-height: 1.7;
    font-weight: 300;
    max-width: 420px;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
}

.brand-panel__features {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.brand-panel__features li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.88);
}

.brand-panel__features i {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(129, 140, 248, 0.18);
    border: 1px solid rgba(165, 180, 252, 0.38);
    color: var(--gold-light);
    font-size: 15px;
}

.brand-panel__footnote {
    margin-top: 44px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 300;
    letter-spacing: 0.02em;
}

/* ------------------ 5. Signature ornament — floating tree rings ------------- */
.ring-ornament {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
}

.ring-ornament__rotator {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(129, 140, 248, 0.28);
    pointer-events: none;
    transform-origin: center;
    will-change: transform, opacity;
}

.ring-ornament__rotator::before {
    content: "";
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    border: 1px solid rgba(129, 140, 248, 0.20);
}

.ring-ornament__rotator::after {
    content: "";
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    border: 1px solid rgba(129, 140, 248, 0.15);
}

.ring-ornament__dot {
    position: absolute;
    top: 50%;
    right: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(199, 210, 254, 0.92);
    box-shadow: 0 0 9px rgba(165, 180, 252, 0.72);
    transform: translateY(-50%);
    pointer-events: none;
}

.ring-ornament--one {
    width: 260px;
    height: 260px;
    top: -60px;
    right: -80px;
    animation: ringFloatOne 12s ease-in-out infinite alternate;
}

.ring-ornament--one .ring-ornament__rotator {
    animation: ringRotate 24s linear infinite, ringPulse 6s ease-in-out infinite alternate;
}

.ring-ornament--two {
    width: 160px;
    height: 160px;
    bottom: 10%;
    right: 6%;
    animation: ringFloatTwo 14s ease-in-out infinite alternate;
}

.ring-ornament--two .ring-ornament__rotator {
    animation: ringRotate 29s linear infinite reverse, ringPulse 7.5s ease-in-out infinite alternate-reverse;
}

.ring-ornament--three {
    width: 90px;
    height: 90px;
    bottom: 24%;
    left: 8%;
    animation: ringFloatThree 10s ease-in-out infinite alternate;
}

.ring-ornament--three .ring-ornament__rotator {
    animation: ringRotate 19s linear infinite, ringPulse 8s ease-in-out infinite alternate;
}

/* --------------------------- 6. Right panel: form ---------------------------- */
.form-panel {
    flex: 1 1 50%;
    max-width: 50%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background: var(--bg-light);
    position: relative;
}

.form-panel__mobile-brand {
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    color: var(--brown-dark);
    font-weight: 700;
    letter-spacing: 0.12em;
    font-size: clamp(12px, 3.6vw, 17px);
    line-height: 1.2;
}

.form-panel__mobile-brand img {
    width: 46px;
    height: 34px;
    object-fit: contain;
    flex: 0 0 auto;
}

.login-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(99, 102, 241, 0.12);
    border-radius: var(--radius-lg);
    padding: 42px 38px 34px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--shadow-card);
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    animation: cardIn 0.8s var(--ease) 0.25s forwards;
}

.login-card__header h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 25px;
    color: var(--brown-dark);
    margin: 0 0 6px;
}

.login-card__header p {
    font-size: 13.5px;
    color: var(--ink-muted);
    margin: 0 0 28px;
    font-weight: 300;
}

/* --------------- 7. Joinery corner brackets (card signature) ---------------- */
/* Echoes a mortise-and-tenon woodworking joint: an L-shaped notch at each
   corner of the card, drawn in gold. This is the page's one deliberate
   ornamental flourish, tying the UI chrome back to the brand's craft. */
.joint {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 2px solid var(--gold);
    opacity: 0.85;
    pointer-events: none;
}

.joint--tl { top: -1px; left: -1px; border-right: none; border-bottom: none; border-top-left-radius: 6px; }
.joint--tr { top: -1px; right: -1px; border-left: none; border-bottom: none; border-top-right-radius: 6px; }
.joint--bl { bottom: -1px; left: -1px; border-right: none; border-top: none; border-bottom-left-radius: 6px; }
.joint--br { bottom: -1px; right: -1px; border-left: none; border-top: none; border-bottom-right-radius: 6px; }

/* ------------------------------ 8. Form elements ----------------------------- */
.velman-field {
    position: relative;
}

.velman-field .form-control {
    height: 54px;
    padding-right: 45px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-soft);
    background: #F1F5F9;
    font-size: 14.5px;
    color: var(--ink);
    padding-left: 16px;
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}

.velman-field .form-control:focus {
    background: var(--white);
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.16);
}

.velman-field > label {
    color: var(--ink-muted);
    font-size: 14px;
    padding-left: 16px;
}

.velman-field .form-control:focus ~ label,
.velman-field .form-control:not(:placeholder-shown) ~ label {
    color: var(--brown-primary);
}

.pass-toggle {
    position: absolute;
    top: 50px;
    right: 14px;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--ink-muted);
    font-size: 15px;
    cursor: pointer;
    z-index: 5;
}

.pass-toggle:hover {
    color: var(--brown-primary);
}

.velman-row {
    font-size: 13.5px;
}

.form-check-input {
    border-color: var(--border-soft);
}

.form-check-input:checked {
    background-color: var(--brown-primary);
    border-color: var(--brown-primary);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.form-check-label {
    color: var(--ink-muted);
}

.forgot-link {
    color: var(--brown-primary);
    font-weight: 500;
    position: relative;
}

.forgot-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: var(--brown-primary);
    transition: width 0.25s var(--ease);
}

.forgot-link:hover::after {
    width: 100%;
}

/* Submit button */
.btn-velman {
    position: relative;
    height: 52px;
    border: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--gold) 0%, var(--brown-primary) 100%);
    color: var(--white);
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s var(--ease);
    box-shadow: 0 12px 28px rgba(79, 70, 229, 0.30);
}

.btn-velman:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 16px 34px rgba(79, 70, 229, 0.38);
    color: var(--white);
}

.btn-velman:active {
    transform: translateY(0);
}

.btn-velman:disabled {
    opacity: 0.85;
    cursor: progress;
}

.btn-velman__spinner {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Divider */
.velman-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 26px 0 16px;
    color: var(--ink-muted);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.velman-divider::before,
.velman-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-soft);
}

.velman-divider span {
    padding: 0 12px;
}

.velman-note {
    text-align: center;
    font-size: 12px;
    color: var(--ink-muted);
    margin: 0;
    font-weight: 300;
}

.form-panel__footer {
    margin-top: 26px;
    font-size: 12px;
    color: var(--ink-muted);
    font-weight: 300;
    letter-spacing: 0.02em;
}

/* ------------------------------ 9. Validation states -------------------------- */
.velman-field .form-control.is-invalid {
    border-color: #c0392b;
    background-image: none; /* remove Bootstrap's default icon; keep it clean */
}

.velman-field .form-control.is-invalid:focus {
    box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.14);
}

.invalid-feedback {
    font-size: 12px;
    margin-top: 6px;
}

/* Only the relevant message (required vs type) is shown; controlled via JS */
.invalid-feedback[data-error] {
    display: none;
}

.was-validated .velman-field .form-control:invalid ~ [data-error="required"],
.velman-field .form-control.is-invalid[data-show="required"] ~ [data-error="required"] {
    display: block;
}

.velman-field .form-control.is-invalid[data-show="type"] ~ [data-error="type"] {
    display: block;
}

/* -------------------------------- 10. Animations ------------------------------ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes ringRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes ringFloatOne {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(8px, 10px, 0); }
}

@keyframes ringFloatTwo {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-7px, -9px, 0); }
}

@keyframes ringFloatThree {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(6px, -10px, 0); }
}

@keyframes ringPulse {
    from { opacity: 0.58; }
    to { opacity: 1; }
}

/* ----------------------------- 11. Responsive rules ---------------------------- */
@media (max-width: 991.98px) {
    .brand-panel {
        display: none;
    }

    .form-panel {
        flex: 1 1 100%;
        max-width: 100%;
        padding: 40px 20px;
    }
}

@media (max-width: 575.98px) {
    .login-card {
        padding: 32px 22px 26px;
        border-radius: 14px;
    }

    .login-card__header h2 {
        font-size: 22px;
    }

    .velman-field .form-control {
        height: 50px;
        font-size: 14px;
    }

    .btn-velman {
        height: 48px;
        font-size: 14px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .brand-panel {
        padding: 44px 40px;
    }

    .brand-panel__heading {
        font-size: 32px;
    }

    .ring-ornament--one {
        scale: 0.86;
        transform-origin: top right;
    }

    .ring-ornament--two,
    .ring-ornament--three {
        scale: 0.9;
    }
}

/* ------------------------ 12. Reduced motion / accessibility ------------------- */
@media (prefers-reduced-motion: reduce) {
    .brand-panel__content,
    .login-card,
    .ring-ornament,
    .ring-ornament__rotator,
    .ring-ornament__dot,
    .btn-velman,
    .forgot-link::after {
        animation: none !important;
        transition: none !important;
    }
}

.form-control:focus-visible,
.btn-velman:focus-visible,
.pass-toggle:focus-visible,
.forgot-link:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}