/* ==========================================================================
   LamaX — back-office design system (Bootstrap 5.3 overrides + app shell)
   ========================================================================== */

:root {
    --lx-navy-950: #07101c;
    --lx-navy-900: #0c1830;
    --lx-navy-800: #10213e;
    --lx-blue-700: #2255b0;
    --lx-blue-600: #2f6fe0;
    --lx-blue-500: #3b82f6;
    --lx-blue-400: #49a8ff;
    --lx-bg: #f4f6fa;
    --lx-surface: #ffffff;
    --lx-border: #e4e8ef;
    --lx-text: #1f2937;
    --lx-muted: #6b7280;
    --lx-radius: 14px;
    --lx-sidebar-width: 252px;

    --bs-body-font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-bg: var(--lx-bg);
    --bs-body-color: var(--lx-text);
    --bs-secondary-color: var(--lx-muted);
    --bs-primary: var(--lx-blue-600);
    --bs-primary-rgb: 47, 111, 224;
    --bs-link-color: var(--lx-blue-600);
    --bs-link-color-rgb: 47, 111, 224;
    --bs-link-hover-color: var(--lx-blue-700);
    --bs-link-hover-color-rgb: 34, 85, 176;
    --bs-border-color: var(--lx-border);
}

body { -webkit-font-smoothing: antialiased; }

/* ---------- Bootstrap tuning ---------- */
.btn { --bs-btn-font-weight: 500; }
.btn-primary {
    --bs-btn-bg: var(--lx-blue-600);
    --bs-btn-border-color: var(--lx-blue-600);
    --bs-btn-hover-bg: #2860c7;
    --bs-btn-hover-border-color: #2860c7;
    --bs-btn-active-bg: var(--lx-blue-700);
    --bs-btn-active-border-color: var(--lx-blue-700);
    --bs-btn-disabled-bg: var(--lx-blue-600);
    --bs-btn-disabled-border-color: var(--lx-blue-600);
}
.btn-outline-primary {
    --bs-btn-color: var(--lx-blue-600);
    --bs-btn-border-color: var(--lx-blue-600);
    --bs-btn-hover-bg: var(--lx-blue-600);
    --bs-btn-hover-border-color: var(--lx-blue-600);
    --bs-btn-active-bg: var(--lx-blue-700);
    --bs-btn-active-border-color: var(--lx-blue-700);
}
.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: var(--lx-border); --bs-btn-hover-bg: #f3f5f9; --bs-btn-hover-border-color: #d5dbe5; }
.btn-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.text-primary { color: var(--lx-blue-600) !important; }
.form-control:focus, .form-select:focus { border-color: #8db4f5; box-shadow: 0 0 0 .2rem rgba(47, 111, 224, .18); }
.form-check-input:checked { background-color: var(--lx-blue-600); border-color: var(--lx-blue-600); }
.form-label { font-weight: 500; font-size: .9rem; }

.card { border: 1px solid var(--lx-border); border-radius: var(--lx-radius); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.card-header { background: transparent; border-bottom: 1px solid var(--lx-border); font-weight: 600; padding: .85rem 1.1rem; }
.card-header:first-child { border-radius: var(--lx-radius) var(--lx-radius) 0 0; }
.card-footer { background: transparent; }

.dropdown-menu { border-color: var(--lx-border); border-radius: 12px; }

.validation-summary-valid { display: none; }
.field-validation-error { display: block; margin-top: .25rem; font-size: .85rem; color: #b42318; }
.input-validation-error { border-color: #d92d20 !important; }

/* ---------- App shell ---------- */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
    width: var(--lx-sidebar-width);
    flex: 0 0 var(--lx-sidebar-width);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background: linear-gradient(180deg, var(--lx-navy-900) 0%, var(--lx-navy-800) 100%);
    color: #cbd5e1;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .15) transparent;
}

.sidebar-brand { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 8px; }
.brand-link { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; }
.brand-link:hover { color: #fff; }
.lamax-logo { width: 34px; height: 34px; flex: none; object-fit: contain; }

.sidebar-nav { padding: 4px 10px 24px; }
.nav-group { padding: 6px 0; }
.nav-group-title { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #64748b; padding: 10px 10px 4px; }
.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin: 1px 0;
    border-radius: 8px;
    color: #cbd5e1;
    font-size: .92rem;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.sidebar-nav .nav-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; opacity: .9; }
.sidebar-nav .nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sidebar-nav .nav-link.active { background: rgba(73, 168, 255, .16); color: #fff; box-shadow: inset 3px 0 0 var(--lx-blue-400); }
.nav-badge { margin-left: auto; min-width: 1.4rem; padding: .05rem .4rem; border-radius: 999px; background: #ef4444; color: #fff; font-size: .72rem; font-weight: 600; text-align: center; }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: rgba(244, 246, 250, .88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--lx-border);
}
.topbar-title { flex: 1; min-width: 0; }
.topbar-title h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 650; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }

.app-content { padding: 24px; flex: 1; }

.skip-link { position: absolute; left: 12px; top: 12px; z-index: 2000; background: #fff; padding: 8px 12px; border-radius: 8px; }

.sidebar-backdrop { display: none; }

@media (max-width: 991.98px) {
    .app-sidebar { position: fixed; left: 0; top: 0; z-index: 1045; transform: translateX(-100%); transition: transform .2s ease; }
    body.sidebar-open .app-sidebar { transform: none; }
    body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 1040; background: rgba(7, 16, 28, .5); }
    .app-topbar { padding: 10px 16px; }
    .app-content { padding: 16px; }
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--lx-navy-900);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 600;
    flex: none;
}
.avatar-xl { width: 112px; height: 112px; font-size: 2rem; }

/* ---------- Busy overlay ---------- */
.busy-overlay { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; background: rgba(7, 16, 28, .35); backdrop-filter: blur(2px); }
.busy-overlay[hidden] { display: none; }
.busy-box { display: flex; align-items: center; gap: 14px; background: #fff; padding: 18px 24px; border-radius: 14px; box-shadow: 0 20px 50px rgba(7, 16, 28, .25); font-weight: 500; }

/* ---------- Page building blocks ---------- */
.page-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.page-toolbar .spacer { flex: 1; }

.filter-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.filter-bar .form-label { font-size: .78rem; color: var(--lx-muted); margin-bottom: .2rem; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 16px; }
.kpi-card { padding: 16px 18px; }
.kpi-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--lx-muted); }
.kpi-value { font-size: 1.55rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.kpi-sub { font-size: .82rem; color: var(--lx-muted); }

.table-app { margin-bottom: 0; }
.table-app > :not(caption) > * > * { padding: .65rem .8rem; }
.table-app thead th { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--lx-muted); background: #f8fafc; white-space: nowrap; border-bottom-color: var(--lx-border); }
.table-app tbody td { vertical-align: middle; }
.table-app tbody tr:hover > * { background-color: #f9fbff; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; }

.thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--lx-border); background: #fff; }
.thumb-lg { width: 96px; height: 96px; }

.empty-state { text-align: center; padding: 48px 16px; color: var(--lx-muted); }
.empty-state i { font-size: 2rem; display: block; margin-bottom: 8px; opacity: .6; }

.chart-box { position: relative; height: 320px; }

.quick-link { text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.quick-link:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 24, 40, .08); color: inherit; }
.quick-link-icon { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #eef4ff; color: var(--lx-blue-600); font-size: 1.2rem; }

/* ---------- Order workflow status (values of FulfillmentStatus) ---------- */
.status-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; background: #eef2f7; color: #344054; }
.status-pill::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; opacity: .8; }
.status-1 { background: #fff4e5; color: #b54708; }
.status-2 { background: #fef3f2; color: #b42318; }
.status-3 { background: #fdf2fa; color: #c11574; }
.status-4 { background: #f4f3ff; color: #5925dc; }
.status-5 { background: #eff8ff; color: #175cd3; }
.status-6 { background: #ecfdff; color: #0e7090; }
.status-7 { background: #eef4ff; color: #3538cd; }
.status-8 { background: #ecfdf3; color: #067647; }
.status-9 { background: #f2f4f7; color: #475467; }

.profit-positive { color: #067647; }
.profit-negative { color: #b42318; }

/* ---------- Authentication pages ---------- */
.auth-body { background: var(--lx-bg); min-height: 100vh; }
.auth-shell { display: grid; grid-template-columns: minmax(360px, 46%) 1fr; min-height: 100vh; }

/* Brand panel */
.auth-brand {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: 44px 56px;
    color: #b6c3d8;
    background: linear-gradient(160deg, var(--lx-navy-900) 0%, var(--lx-navy-800) 55%, var(--lx-navy-950) 100%);
}
.auth-brand::before {
    /* fine dot grid, faded towards the edges */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 40% 45%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 70% at 40% 45%, #000 20%, transparent 75%);
}
.auth-orb {
    position: absolute;
    z-index: -2;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    pointer-events: none;
    animation: auth-float 18s ease-in-out infinite alternate;
}
.auth-orb-1 { width: 520px; height: 520px; top: -180px; left: -160px; background: #2f6fe0; }
.auth-orb-2 { width: 420px; height: 420px; bottom: -160px; right: -140px; background: #49a8ff; opacity: .35; animation-duration: 22s; animation-direction: alternate-reverse; }
.auth-orb-3 { width: 260px; height: 260px; top: 45%; left: 55%; background: #7c5cff; opacity: .22; animation-duration: 26s; }
@keyframes auth-float {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(40px, 30px, 0) scale(1.08); }
    100% { transform: translate3d(-20px, 50px, 0) scale(.96); }
}

.auth-brand .brand-link { font-size: 1.35rem; }
.auth-brand .lamax-logo { width: 40px; height: 40px; filter: drop-shadow(0 6px 18px rgba(73, 168, 255, .45)); }
.auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    color: #dbe7ff;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .02em;
    backdrop-filter: blur(6px);
}
.auth-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .18); }
.auth-brand h1 {
    color: #fff;
    font-size: clamp(2rem, 3.4vw, 3rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.03em;
    margin-bottom: 1rem;
    background: linear-gradient(120deg, #ffffff 0%, #ffffff 45%, #9cc8ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.auth-brand p { font-size: 1.075rem; line-height: 1.6; max-width: 30rem; }
.auth-points { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 12px; max-width: 30rem; }
.auth-points li {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
    color: #dbe3ef;
    backdrop-filter: blur(8px);
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.auth-points li:hover { transform: translateX(4px); border-color: rgba(73, 168, 255, .35); background: linear-gradient(135deg, rgba(73, 168, 255, .12), rgba(255, 255, 255, .03)); }
.auth-points i {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: #fff;
    background: linear-gradient(135deg, var(--lx-blue-600), var(--lx-blue-400));
    box-shadow: 0 8px 20px -6px rgba(47, 111, 224, .7);
}
.auth-brand-foot { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: #6b7a90; }

/* Form side */
.auth-main {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px 40px;
    background:
        radial-gradient(600px 400px at 100% 0%, rgba(73, 168, 255, .12), transparent 70%),
        radial-gradient(500px 360px at 0% 100%, rgba(47, 111, 224, .08), transparent 70%),
        var(--lx-bg);
}
.auth-top { position: absolute; top: 20px; right: 24px; }
.auth-top .btn-light { background: rgba(255, 255, 255, .8); border-color: var(--lx-border); box-shadow: 0 1px 2px rgba(16, 24, 40, .05); backdrop-filter: blur(6px); }
.auth-card {
    width: 100%;
    max-width: 440px;
    padding: 40px 40px 32px;
    border: 1px solid rgba(228, 232, 239, .9);
    border-radius: 22px;
    background: var(--lx-surface);
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .04),
        0 12px 24px -8px rgba(16, 24, 40, .08),
        0 32px 64px -24px rgba(34, 85, 176, .18);
    animation: auth-rise .5s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes auth-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.auth-title { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; color: #0f172a; }
.auth-card .form-label { font-size: .875rem; font-weight: 600; color: #344054; margin-bottom: .4rem; }
.auth-card .form-control-lg { font-size: 1rem; }
.auth-card .form-control { border-radius: 12px; border-color: #d6dce6; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.auth-card .form-control:focus { border-color: var(--lx-blue-500); box-shadow: 0 0 0 4px rgba(59, 130, 246, .15); }
.auth-card .btn-lg { border-radius: 12px; }

/* Input with a leading icon and an optional trailing action */
.auth-field { position: relative; }
.auth-field > .bi {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: #98a2b3;
    font-size: 1.05rem;
    pointer-events: none;
    transition: color .15s ease;
}
.auth-field > .form-control { padding-left: 46px; min-height: 52px; background-color: #fbfcfe; }
.auth-field > .form-control:focus { background-color: #fff; }
.auth-field:focus-within > .bi { color: var(--lx-blue-600); }
.auth-field-action {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #667085;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.auth-field-action:hover { background: #f2f4f7; color: #1f2937; }
.auth-field-action:focus-visible { outline: 2px solid var(--lx-blue-500); outline-offset: 1px; }
.auth-field > .form-control.has-action { padding-right: 52px; }
.auth-field > .form-control.input-validation-error { border-color: #f04438; }
.auth-field > .form-control.input-validation-error:focus { box-shadow: 0 0 0 4px rgba(240, 68, 56, .12); }

.auth-link { font-size: .85rem; font-weight: 600; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }

.btn-auth {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    border: 0;
    font-weight: 600;
    background: linear-gradient(135deg, var(--lx-blue-600) 0%, var(--lx-blue-500) 55%, var(--lx-blue-400) 100%);
    box-shadow: 0 10px 24px -10px rgba(47, 111, 224, .8), inset 0 1px 0 rgba(255, 255, 255, .2);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-auth:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 14px 30px -10px rgba(47, 111, 224, .9), inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn-auth:active { transform: translateY(0); }
.btn-auth .bi { transition: transform .15s ease; }
.btn-auth:hover .bi { transform: translateX(3px); }

.auth-divider { height: 1px; margin: 28px 0 20px; background: var(--lx-border); }
.auth-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 20px; color: #98a2b3; font-size: .78rem; }
.auth-secure .bi { color: #12b76a; }

@media (max-width: 991.98px) {
    .auth-brand { padding: 36px; }
}
@media (max-width: 767.98px) {
    .auth-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .auth-brand { padding: 18px 20px; gap: 0; }
    .auth-brand-copy, .auth-brand-foot, .auth-orb-3 { display: none; }
    .auth-main { align-items: flex-start; padding: 64px 16px 32px; }
    .auth-top { top: 14px; right: 16px; }
    .auth-card { padding: 28px 22px 24px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-orb, .auth-card { animation: none; }
    .auth-points li, .btn-auth, .btn-auth .bi { transition: none; }
}

@media print {
    .app-sidebar, .app-topbar, .sidebar-backdrop, .toast-container { display: none !important; }
    .app-content { padding: 0; }
}