:root {
    color-scheme: light;
    --bg: #f5f7fa;
    --surface: #ffffff;
    --surface-raised: #fbfcfe;
    --surface-soft: #edf5f4;
    --ink: #182230;
    --muted: #667085;
    --line: #d9e0e8;
    --line-soft: #edf1f5;
    --primary: #0f766e;
    --primary-deep: #115e59;
    --primary-soft: #dff5f1;
    --blue: #2563eb;
    --amber: #d97706;
    --danger: #dc2626;
    --success: #16a34a;
    --shadow-sm: 0 8px 22px rgba(24, 34, 48, 0.08);
    --shadow: 0 20px 50px rgba(24, 34, 48, 0.11);
    --radius: 8px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.d-none,
[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        linear-gradient(180deg, rgba(15, 118, 110, 0.07), rgba(245, 247, 250, 0) 34rem),
        var(--bg);
    color: var(--ink);
}

.container {
    width: min(100% - 2rem, 1140px);
    margin-inline: auto;
}

.site-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-main {
    flex: 1 0 auto;
    padding: 2rem 0 3rem;
}

.app-navbar {
    z-index: 1050;
    width: 100%;
    min-height: 6rem;
    border-bottom: 0;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 30px rgba(24, 34, 48, 0.06);
    backdrop-filter: blur(18px);
}

.app-navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: none;
    min-height: 6rem;
    padding-inline: clamp(1rem, 5vw, 5rem);
    gap: 1rem;
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    color: var(--ink);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.brand-logo {
    width: clamp(4rem, 6.2vw, 5rem);
    height: clamp(4rem, 6.2vw, 5rem);
    border-radius: var(--radius);
    box-shadow: 0 12px 22px rgba(15, 118, 110, 0.16);
}

.brand-wordmark {
    width: clamp(8.2rem, 13vw, 12rem);
    max-height: 3.15rem;
    object-fit: contain;
}

.brand-full-logo {
    display: block;
    width: clamp(12rem, 20vw, 18rem);
    height: auto;
    max-height: clamp(3.5rem, 5vw, 4.8rem);
    object-fit: contain;
}

.brand-mark,
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.brand-mark {
    width: 2.45rem;
    height: 2.45rem;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--primary), var(--blue));
    color: #fff;
    box-shadow: 0 12px 22px rgba(15, 118, 110, 0.22);
}

.avatar {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary-deep);
    font-size: 0.8rem;
    font-weight: 800;
}

.navbar-toggler {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    padding: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.navbar-toggler.active {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 16px 34px rgba(15, 118, 110, 0.2);
}

.navbar-toggler-icon {
    position: relative;
    width: 1.25rem;
    height: 1rem;
    background:
        linear-gradient(var(--ink), var(--ink)) left top / 100% 2px no-repeat,
        linear-gradient(var(--ink), var(--ink)) left center / 100% 2px no-repeat,
        linear-gradient(var(--ink), var(--ink)) left bottom / 100% 2px no-repeat;
    transition: background 0.2s ease;
}

.navbar-toggler.active .navbar-toggler-icon {
    height: 1.25rem;
    background:
        linear-gradient(45deg, var(--ink), var(--ink)) center / 100% 2px no-repeat,
        linear-gradient(-45deg, var(--ink), var(--ink)) center / 100% 2px no-repeat;
}

.navbar-collapse {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
}

.navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 3rem;
    border-radius: var(--radius);
    color: #475467;
    font-size: clamp(1rem, 1.25vw, 1.08rem);
    font-weight: 650;
    text-decoration: none;
    padding: 0.7rem 1rem !important;
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active {
    background: var(--primary-soft);
    color: var(--primary-deep);
    text-decoration: none;
}

.app-navbar a,
.app-navbar a:hover,
.app-navbar a:focus,
.app-navbar a:active,
.app-navbar a:visited,
.app-navbar .nav-link,
.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus,
.app-navbar .nav-link.active,
.app-navbar .nav-link span {
    text-decoration: none !important;
}

.user-chip {
    background: #f8fafc;
    border: 1px solid var(--line-soft);
}

.profile-dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    padding: 0.5rem 0;
    margin: 0;
    list-style: none;
    background: var(--surface);
}

.dropdown-menu.show {
    display: block;
}

.app-dropdown {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.55rem 1rem;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--primary-soft);
    color: var(--primary-deep);
}

.dropdown-divider {
    height: 1px;
    margin: 0.4rem 0;
    border: 0;
    background: var(--line-soft);
}

.profile-menu {
    left: 0;
    right: auto;
    top: calc(100% + 0.55rem);
    width: min(17rem, calc(100vw - 2rem));
    min-width: 17rem;
    padding: 0.55rem;
    overflow: hidden;
}

.profile-menu-header {
    display: grid;
    grid-template-columns: 2.65rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(37, 99, 235, 0.08));
}

.profile-menu-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 50%;
    background: #fff;
    color: var(--primary-deep);
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.14), 0 10px 20px rgba(24, 34, 48, 0.08);
}

.profile-menu-title,
.profile-detail-label {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.profile-menu strong,
.profile-detail-row strong {
    display: block;
    min-width: 0;
    color: var(--ink);
    font-size: 0.98rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.profile-detail-row {
    display: grid;
    gap: 0.25rem;
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid var(--line-soft);
}

.profile-detail-row:last-of-type {
    border-bottom: 0;
}

.profile-dropdown:hover > .dropdown-menu,
.profile-dropdown:focus-within > .dropdown-menu {
    display: block;
    margin-top: 0;
}

.logout-link:hover,
.logout-link:focus {
    background: #fee2e2;
    color: #991b1b;
}

.logout-confirm-shell {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.logout-confirm-shell.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.logout-confirm-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 30%, rgba(223, 245, 241, 0.5), transparent 22rem),
        rgba(24, 34, 48, 0.36);
    backdrop-filter: blur(16px) saturate(1.35);
    -webkit-backdrop-filter: blur(16px) saturate(1.35);
}

.logout-confirm-dialog {
    position: relative;
    width: min(100%, 25rem);
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(223, 245, 241, 0.56)),
        rgba(255, 255, 255, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 28px 70px rgba(24, 34, 48, 0.24);
    color: var(--ink);
    text-align: center;
    transform: translateY(12px) scale(0.97);
    transition: transform 0.22s ease;
}

.logout-confirm-shell.is-open .logout-confirm-dialog {
    transform: translateY(0) scale(1);
}

.logout-confirm-dialog:focus {
    outline: none;
}

.logout-confirm-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.74);
    color: var(--muted);
}

.logout-confirm-close:hover,
.logout-confirm-close:focus {
    background: #fff;
    color: var(--ink);
}

.logout-confirm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: #fee2e2;
    color: #991b1b;
    font-size: 1.35rem;
    box-shadow: 0 14px 30px rgba(153, 27, 27, 0.14);
}

.logout-confirm-dialog h2 {
    margin: 0 0 0.45rem;
    font-size: 1.35rem;
    font-weight: 800;
}

.logout-confirm-dialog p {
    margin: 0;
    color: var(--muted);
}

.logout-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 1.35rem;
}

.logout-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.85rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-weight: 800;
    line-height: 1;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.logout-action-btn:hover,
.logout-action-btn:focus {
    transform: translateY(-1px);
    text-decoration: none !important;
}

.logout-action-cancel {
    border: 1px solid rgba(102, 112, 133, 0.24);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.68)),
        rgba(255, 255, 255, 0.7);
    color: var(--ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 10px 22px rgba(24, 34, 48, 0.08);
}

.logout-action-cancel:hover,
.logout-action-cancel:focus {
    border-color: rgba(102, 112, 133, 0.45);
    background: #fff;
    color: var(--ink);
}

.logout-action-confirm {
    border: 1px solid rgba(153, 27, 27, 0.22);
    background:
        linear-gradient(135deg, #dc2626, #991b1b),
        #dc2626;
    color: #fff !important;
    box-shadow: 0 16px 30px rgba(153, 27, 27, 0.22);
}

.logout-action-confirm:hover,
.logout-action-confirm:focus {
    border-color: rgba(153, 27, 27, 0.34);
    background:
        linear-gradient(135deg, #ef4444, #b91c1c),
        #dc2626;
    color: #fff !important;
    box-shadow: 0 18px 34px rgba(153, 27, 27, 0.28);
}

@media (max-width: 420px) {
    .logout-confirm-dialog {
        padding: 1.25rem;
    }

    .logout-confirm-actions {
        grid-template-columns: 1fr;
    }
}

body.logout-confirm-open {
    overflow: hidden;
}

.bank-password-shell {
    position: fixed;
    inset: 0;
    z-index: 2050;
    display: grid;
    place-items: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.24s ease, visibility 0.24s ease;
}

.bank-password-shell.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.bank-password-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 24% 16%, rgba(37, 99, 235, 0.28), transparent 18rem),
        radial-gradient(circle at 72% 70%, rgba(15, 118, 110, 0.28), transparent 20rem),
        rgba(24, 34, 48, 0.34);
    backdrop-filter: blur(18px) saturate(1.45);
    -webkit-backdrop-filter: blur(18px) saturate(1.45);
}

.bank-password-dialog {
    position: relative;
    width: min(100%, 28rem);
    overflow: hidden;
    padding: 1.55rem;
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(223, 245, 241, 0.52)),
        rgba(255, 255, 255, 0.58);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset 0 -32px 60px rgba(37, 99, 235, 0.08),
        0 34px 85px rgba(24, 34, 48, 0.28);
    color: var(--ink);
    transform: translateY(16px) scale(0.96);
    transition: transform 0.28s cubic-bezier(.18,.89,.32,1.18);
}

.bank-password-shell.is-open .bank-password-dialog {
    animation: bankGlassIn 0.48s cubic-bezier(.18,.89,.32,1.18) both;
    transform: translateY(0) scale(1);
}

.bank-password-dialog::before {
    content: "";
    position: absolute;
    inset: -45% -20%;
    background:
        linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.72) 45%, transparent 60%),
        radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent 34%);
    opacity: 0.76;
    transform: rotate(8deg) translateX(-20%);
    animation: bankLiquidSheen 4.8s ease-in-out infinite;
    pointer-events: none;
}

.bank-password-dialog:focus {
    outline: none;
}

.bank-liquid-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
    opacity: 0.58;
    pointer-events: none;
}

.bank-liquid-orb-one {
    width: 9rem;
    height: 9rem;
    right: -3.5rem;
    top: -3.2rem;
    background: rgba(15, 118, 110, 0.22);
    animation: bankLiquidFloat 5s ease-in-out infinite;
}

.bank-liquid-orb-two {
    width: 7rem;
    height: 7rem;
    left: -2.8rem;
    bottom: -2.6rem;
    background: rgba(37, 99, 235, 0.18);
    animation: bankLiquidFloat 5.6s ease-in-out infinite reverse;
}

.bank-password-close,
.bank-password-icon,
.bank-password-kicker,
.bank-password-dialog h2,
.bank-password-dialog p,
.bank-password-target,
.bank-password-form {
    position: relative;
    z-index: 1;
}

.bank-password-close {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.62);
    color: var(--muted);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.bank-password-close:hover,
.bank-password-close:focus {
    background: #fff;
    color: var(--ink);
}

.bank-password-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.35rem;
    height: 3.35rem;
    margin-bottom: 0.9rem;
    border-radius: 50%;
    background: rgba(223, 245, 241, 0.9);
    color: var(--primary-deep);
    font-size: 1.35rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 16px 34px rgba(15, 118, 110, 0.18);
}

.bank-password-kicker {
    display: block;
    width: fit-content;
    margin-bottom: 0.55rem;
    color: var(--primary-deep);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bank-password-dialog h2 {
    margin: 0 0 0.45rem;
    font-size: 1.45rem;
    font-weight: 850;
}

.bank-password-dialog p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.bank-password-dialog p strong {
    color: var(--ink);
}

.bank-password-target {
    margin-top: 0.75rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(15, 118, 110, 0.14);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.56);
    color: var(--primary-deep);
    font-weight: 800;
    overflow-wrap: anywhere;
}

.bank-password-form {
    display: grid;
    gap: 0.7rem;
    margin-top: 1.15rem;
}

.bank-password-form .form-label {
    margin: 0;
    color: var(--ink);
    font-weight: 800;
}

.bank-password-control {
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr) 2.35rem;
    align-items: center;
    min-height: 3.15rem;
    border: 1px solid rgba(102, 112, 133, 0.22);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.bank-password-control:focus-within {
    border-color: rgba(15, 118, 110, 0.46);
    box-shadow: 0 0 0 0.22rem rgba(15, 118, 110, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.bank-password-control > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-deep);
}

.bank-password-control input {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-weight: 650;
    outline: none;
}

.bank-password-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
}

.bank-password-toggle:hover,
.bank-password-toggle:focus {
    background: rgba(15, 118, 110, 0.1);
    color: var(--primary-deep);
}

.bank-password-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(220, 38, 38, 0.18);
    border-radius: var(--radius);
    background: rgba(254, 226, 226, 0.86);
    color: #991b1b;
    font-weight: 750;
}

.bank-password-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 0.35rem;
}

.bank-password-cancel,
.bank-password-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.9rem;
    border-radius: var(--radius);
    font-weight: 850;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.bank-password-cancel:hover,
.bank-password-cancel:focus,
.bank-password-submit:hover,
.bank-password-submit:focus {
    transform: translateY(-1px);
}

.bank-password-cancel {
    border: 1px solid rgba(102, 112, 133, 0.24);
    background: rgba(255, 255, 255, 0.72);
    color: var(--ink);
}

.bank-password-submit {
    border: 1px solid rgba(15, 118, 110, 0.28);
    background: linear-gradient(135deg, var(--primary), var(--blue));
    color: #fff;
    box-shadow: 0 16px 34px rgba(15, 118, 110, 0.22);
}

body.bank-password-open {
    overflow: hidden;
}

@keyframes bankGlassIn {
    0% {
        opacity: 0;
        transform: translateY(22px) scale(0.94);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes bankLiquidSheen {
    0%,
    100% {
        transform: rotate(8deg) translateX(-22%);
    }

    50% {
        transform: rotate(8deg) translateX(18%);
    }
}

@keyframes bankLiquidFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(0.8rem, -0.65rem, 0) scale(1.05);
    }
}

@media (max-width: 420px) {
    .bank-password-dialog {
        padding: 1.25rem;
    }

    .bank-password-actions {
        grid-template-columns: 1fr;
    }
}

.app-footer {
    flex-shrink: 0;
    padding: 1rem 0;
    background: rgba(255, 255, 255, 0.76);
    border-top: 1px solid var(--line-soft);
    color: var(--muted);
    text-align: center;
}

.message-stack {
    margin-bottom: 1rem;
}

.alert {
    border-radius: var(--radius);
}

.alert:not(.app-message):not(.login-error-alert):not(.login-error-toast):not(.bank-password-error):not(.user-form-alert) {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--line);
    border-left-width: 5px;
    box-shadow: var(--shadow-sm);
    animation: alertRiseIn 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.alert:not(.app-message):not(.login-error-alert):not(.login-error-toast):not(.bank-password-error):not(.user-form-alert) > :first-child {
    margin-top: 0.15rem;
}

.alert:not(.app-message):not(.login-error-alert):not(.login-error-toast):not(.bank-password-error):not(.user-form-alert) > :last-child {
    justify-self: end;
}

.alert-danger {
    border-left-color: var(--danger);
    background: linear-gradient(135deg, #fff5f5, #fee2e2);
    color: #7f1d1d;
}

.alert-success {
    border-left-color: var(--success);
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: #14532d;
}

.alert-warning {
    border-left-color: var(--amber);
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    color: #78350f;
}

.alert-info {
    border-left-color: var(--blue);
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #1e3a8a;
}

.message-stack .app-message {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.25rem;
    padding: 0.9rem 1rem;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    animation: appMessageIn 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    transition: opacity 0.3s ease, transform 0.3s ease;
}



.message-stack .app-message .message-icon,
.message-stack .app-message .message-text {
    position: relative;
    z-index: 1;
}

.message-stack .app-message.is-hiding {
    opacity: 0;
    transform: translateY(-8px);
}

.message-stack .app-message .message-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: 999px;
    margin-top: 0.1rem;
}


.message-stack .alert-success {
    border: 1px solid rgba(22, 163, 74, 0.28);
    background:
        linear-gradient(135deg, rgba(236, 253, 245, 0.98), rgba(255, 255, 255, 0.94)),
        #fff;
    color: #14532d;
    box-shadow: 0 16px 34px rgba(22, 163, 74, 0.12);
}


.message-stack .alert-success::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.78) 42%, transparent 70%);
    transform: translateX(-110%);
    animation: appMessageSweep 0.92s ease 0.1s both;
}

.message-stack .alert-success .message-icon {
    background: rgba(187, 247, 208, 0.9);
    color: var(--success);
    animation: appSuccessIconPop 0.42s ease 0.16s both;
}

.message-stack .alert-danger .message-icon,
.message-stack .alert-error .message-icon {
    background: rgba(254, 226, 226, 0.95);
    color: var(--danger);
}

.message-stack .alert-warning .message-icon {
    background: rgba(254, 243, 199, 0.95);
    color: var(--amber);
}

.message-stack .alert-info .message-icon {
    background: rgba(219, 234, 254, 0.95);
    color: var(--blue);
}

.catalog-message-stack {
    width: min(calc(100vw - 2rem), 1520px);
    max-width: none;
    margin: -0.2rem 0 1.05rem 50%;
    padding-inline: 0;
    transform: translateX(-50%);
}

.catalog-message-stack:not(:has(.catalog-message)) {
    display: none;
}

.catalog-message-stack .catalog-message {
    display: grid;
    grid-template-columns: 2.55rem minmax(0, 1fr);
    align-items: center;
    gap: 0.85rem;
    min-height: 3.85rem;
    margin: 0;
    padding: 0.82rem 1rem;
    border: 1px solid rgba(217, 224, 232, 0.9);
    border-left: 5px solid var(--blue);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.9)),
        #fff;
    box-shadow: 0 18px 44px rgba(24, 34, 48, 0.1);
    animation: catalogMessageIn 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.catalog-message-stack .catalog-message::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.72) 44%, transparent 72%);
    transform: translateX(-110%);
    animation: appMessageSweep 0.92s ease 0.08s both;
    pointer-events: none;
}

.catalog-message-stack .alert-danger,
.catalog-message-stack .alert-error {
    border-left-color: var(--danger);
    background:
        linear-gradient(135deg, rgba(255, 245, 245, 0.98), rgba(255, 255, 255, 0.96)),
        #fff;
    color: #7f1d1d;
    box-shadow: 0 18px 44px rgba(127, 29, 29, 0.12);
    animation: catalogMessageIn 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both,
        catalogAlertNudge 0.42s ease 0.42s both;
}

.catalog-message-stack .alert-success {
    border-left-color: var(--success);
}

.catalog-message-stack .alert-warning {
    border-left-color: var(--amber);
}

.catalog-message-stack .catalog-message-icon {
    width: 2.35rem;
    height: 2.35rem;
    margin: 0;
    animation: appSuccessIconPop 0.42s ease 0.14s both;
}

.catalog-message-stack .alert-danger .catalog-message-icon,
.catalog-message-stack .alert-error .catalog-message-icon {
    animation: appSuccessIconPop 0.42s ease 0.14s both,
        catalogAlertIconPulse 1.8s ease 0.62s infinite;
}

.catalog-message-stack .message-text {
    min-width: 0;
    color: inherit;
    font-size: 0.98rem;
    font-weight: 750;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.catalog-message-stack .app-message.is-hiding {
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
}


.user-form-alert,
.bank-password-error,
.login-error-alert,
.login-error-toast,
.invalid-feedback.d-block,
.form-text.text-danger,
.form-text.d-block.text-danger {
    animation: alertRiseIn 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.user-form-alert,
.bank-password-error,
.login-error-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.user-form-alert {
    margin-bottom: 1rem;
    border: 1px solid rgba(220, 38, 38, 0.24);
    border-left: 5px solid var(--danger);
    background: linear-gradient(135deg, #fff5f5, #fee2e2);
    color: #7f1d1d;
}

.user-form-alert strong,
.bank-password-error strong,
.login-error-alert strong {
    display: block;
    margin-bottom: 0.1rem;
    font-weight: 900;
}

.user-form-alert span,
.bank-password-error span,
.login-error-alert span {
    display: block;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.invalid-feedback.d-block {
    display: flex !important;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.45rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid rgba(220, 38, 38, 0.18);
    border-left: 4px solid var(--danger);
    border-radius: 6px;
    background: rgba(254, 226, 226, 0.72);
    color: #991b1b;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.4;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.invalid-feedback.d-block::before {
    content: "\f33a";
    font-family: "bootstrap-icons";
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    color: var(--danger);
    margin-top: 0.15rem;
}

.user-form-alert .message-icon,
.bank-password-error i,
.login-error-alert .login-error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
}

.bank-password-error {
    border: 1px solid rgba(220, 38, 38, 0.22);
    border-left: 5px solid var(--danger);
    background: linear-gradient(135deg, #fff5f5, #fee2e2);
    color: #7f1d1d;
}

.login-error-alert {
    margin: 0 0 1.1rem;
    border: 1px solid rgba(220, 38, 38, 0.22);
    border-left: 5px solid var(--danger);
    background: linear-gradient(135deg, #fff5f5, #fee2e2);
    color: #7f1d1d;
}

.main-hero,
.login-page {
    min-height: calc(100vh - 8.5rem);
}

.main-hero {
    display: grid;
    align-items: center;
    padding: 1rem 0 2rem;
}

.home-main {
    display: flex;
    padding: 0;
}

.home-main-container {
    display: flex;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.home-info-wrap {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(15, 118, 110, 0.08), rgba(37, 99, 235, 0.08)),
        var(--bg);
}

.home-info-card {
    display: grid;
    align-items: center;
    flex: 1 1 auto;
    width: 100%;
    min-height: 100%;
    padding: clamp(1.25rem, 5vw, 4.5rem);
    overflow: hidden;
    border-width: 0;
    border-radius: 0;
}

.home-animated-card {
    justify-items: center;
    background:
        radial-gradient(circle at 20% 15%, rgba(223, 245, 241, 0.92), rgba(255, 255, 255, 0) 30rem),
        radial-gradient(circle at 80% 20%, rgba(219, 234, 254, 0.78), rgba(255, 255, 255, 0) 28rem),
        rgba(255, 255, 255, 0.94);
}

.home-animation-panel {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: clamp(1rem, 2.8vw, 2rem);
    width: 100%;
    min-height: 100%;
}

.home-animation-copy {
    max-width: 58rem;
    text-align: center;
    width: 100%;
}

.home-hero-badge {
    padding: clamp(0.7rem, 1.45vw, 1rem) clamp(1.1rem, 2.8vw, 2.2rem);
    border-color: rgba(15, 118, 110, 0.28);
    background:
        linear-gradient(135deg, rgba(223, 245, 241, 0.96), rgba(219, 234, 254, 0.78)),
        rgba(255, 255, 255, 0.7);
    color: var(--primary-deep);
    font-size: clamp(1.25rem, 2.4vw, 2.2rem);
    letter-spacing: 0;
    box-shadow: 0 18px 38px rgba(15, 118, 110, 0.14);
    animation: homeBadgeFloat 3.2s ease-in-out infinite, homeBadgeGlow 2.4s ease-in-out infinite;
}

.home-hero-badge i {
    font-size: 1.08em;
}

.home-animation-copy h1 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(2.1rem, 5vw, 5rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.home-animation-copy p {
    max-width: 46rem;
    margin: 1rem auto 0;
    color: var(--muted);
    font-size: clamp(1.02rem, 1.35vw, 1.22rem);
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.rupee-mark {
    font-family: "Segoe UI Symbol", "Noto Sans", "Arial Unicode MS", "Segoe UI", system-ui, sans-serif;
}

.quote-3d-scene {
    position: relative;
    isolation: isolate;
    width: min(100%, 58rem);
    height: clamp(28rem, 58dvh, 43rem);
    perspective: 1400px;
    transform-style: preserve-3d;
    animation: quoteSceneBreathe 5.8s ease-in-out infinite;
    max-width: 100%;
}

.quote-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(12px);
    opacity: 0.72;
    animation: quoteGlowDrift 7s ease-in-out infinite;
}

.quote-glow-one {
    inset: 8% auto auto 8%;
    width: 13rem;
    height: 13rem;
    background: rgba(15, 118, 110, 0.18);
}

.quote-glow-two {
    right: 7%;
    bottom: 9%;
    width: 16rem;
    height: 16rem;
    background: rgba(37, 99, 235, 0.16);
    animation-delay: -2.4s;
}

.quote-sheet {
    position: absolute;
    left: 50%;
    top: 48%;
    width: clamp(18rem, 43vw, 32rem);
    min-height: clamp(23rem, 48dvh, 34rem);
    border: 1px solid rgba(217, 224, 232, 0.95);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow:
        0 34px 80px rgba(24, 34, 48, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transform-style: preserve-3d;
}

.quote-sheet-back {
    display: grid;
    gap: 1rem;
    align-content: start;
    padding: 2rem;
    opacity: 0.55;
    transform: translate(-58%, -48%) rotateX(14deg) rotateY(-18deg) rotateZ(-7deg) translateZ(-42px);
    animation: quoteBackFloat 5s ease-in-out infinite;
}

.quote-sheet-back span {
    display: block;
    height: 0.9rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.26);
}

.quote-sheet-back span:first-child {
    width: 64%;
}

.quote-sheet-back span:nth-child(2) {
    width: 86%;
}

.quote-sheet-back span:nth-child(3) {
    width: 52%;
}

.quote-sheet-main {
    padding: clamp(1.1rem, 3vw, 1.8rem);
    transform: translate(-50%, -50%) rotateX(10deg) rotateY(-15deg) rotateZ(-3deg) translateZ(42px);
    animation: quoteSheetFloat 4.6s ease-in-out infinite;
}

.quote-sheet-main::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0.86) 44%, rgba(255, 255, 255, 0) 62%);
    transform: translateX(-100%);
    animation: quoteShimmer 3.4s ease-in-out infinite;
    pointer-events: none;
}

.quote-sheet-top,
.quote-items div,
.quote-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.quote-sheet-top {
    margin-bottom: 1.4rem;
}

.quote-sheet-top small {
    display: block;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 850;
    text-transform: uppercase;
}

.quote-sheet-top strong {
    display: block;
    color: var(--ink);
    font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.quote-status {
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
    background: var(--primary-soft);
    color: var(--primary-deep);
    font-weight: 850;
    animation: quoteStatusPulse 1.8s ease-in-out infinite;
}

.quote-line {
    height: 0.75rem;
    width: 52%;
    margin-bottom: 0.7rem;
    border-radius: 999px;
    background: #d9e0e8;
}

.quote-line-wide {
    width: 78%;
    background: var(--primary);
}

.quote-items {
    display: grid;
    gap: 0.8rem;
    margin-top: 1.45rem;
}

.quote-items div {
    min-height: 3.1rem;
    padding: 0.78rem 0.9rem;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: #f8fafc;
}

.quote-items span {
    color: var(--muted);
    font-weight: 750;
}

.quote-items strong {
    color: var(--primary-deep);
}

.quote-total {
    margin-top: 1.2rem;
    padding: 1rem;
    border-radius: 16px;
    background: #182230;
    color: #fff;
    box-shadow: 0 18px 34px rgba(24, 34, 48, 0.2);
}

.quote-total strong {
    font-size: clamp(1.2rem, 2.4vw, 1.8rem);
}

.quote-stamp {
    position: absolute;
    right: 1.2rem;
    bottom: 6.4rem;
    border: 2px solid rgba(15, 118, 110, 0.55);
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
    color: var(--primary-deep);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    transform: rotate(-10deg);
    animation: quoteStampPop 2.6s ease-in-out infinite;
}

.quote-calculator {
    position: absolute;
    right: clamp(0.25rem, 8vw, 6rem);
    bottom: clamp(1rem, 7vh, 4rem);
    display: grid;
    gap: 0.85rem;
    width: clamp(7.2rem, 15vw, 10rem);
    padding: 1rem;
    border-radius: 20px;
    background: #182230;
    box-shadow: 0 26px 54px rgba(24, 34, 48, 0.28);
    transform: rotateY(-18deg) rotateZ(7deg);
    animation: quoteCalcFloat 4.2s ease-in-out infinite;
    z-index: 4;
}

.quote-calculator > span {
    height: 1.55rem;
    border-radius: 9px;
    background: #334155;
}

.quote-calc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
}

.quote-calc-grid i {
    aspect-ratio: 1;
    border-radius: 50%;
    background: #dff5f1;
}

.quote-calc-grid i:nth-child(3n) {
    background: #fef3c7;
}

.quote-calculator strong {
    display: grid;
    place-items: center;
    min-height: 1.6rem;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
}

.quote-coin,
.quote-check {
    position: absolute;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-weight: 900;
    box-shadow: 0 16px 34px rgba(24, 34, 48, 0.16);
    z-index: 5;
}

.quote-coin {
    width: clamp(3rem, 7vw, 4.6rem);
    height: clamp(3rem, 7vw, 4.6rem);
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    animation: quoteCoinOrbit 5.6s ease-in-out infinite;
}

.quote-coin-one {
    left: 13%;
    top: 18%;
}

.quote-coin-two {
    right: 18%;
    top: 12%;
    background: linear-gradient(135deg, var(--blue), #60a5fa);
    animation-delay: -2.1s;
}

.quote-check {
    left: clamp(0.5rem, 11vw, 8rem);
    bottom: clamp(1rem, 12vh, 7rem);
    width: clamp(4rem, 8vw, 5.5rem);
    height: clamp(4rem, 8vw, 5.5rem);
    background: linear-gradient(135deg, var(--primary-deep), var(--primary));
    font-size: clamp(1.7rem, 4vw, 2.7rem);
    animation: quoteCheckPop 2.8s ease-in-out infinite;
}

@keyframes appMessageIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes appMessageSweep {
    to {
        transform: translateX(110%);
    }
}

@keyframes catalogMessageIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
        filter: blur(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes catalogAlertNudge {
    0%,
    100% {
        translate: 0 0;
    }
    32% {
        translate: -4px 0;
    }
    64% {
        translate: 4px 0;
    }
}

@keyframes catalogAlertIconPulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.2);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
    }
}

@keyframes alertRiseIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
        filter: blur(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes appSuccessIconPop {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }
    70% {
        opacity: 1;
        transform: scale(1.12);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes quoteSceneBreathe {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-6px) scale(1.01);
    }
}

@keyframes quoteSheetFloat {
    0%,
    100% {
        transform: translate(-50%, -50%) rotateX(10deg) rotateY(-15deg) rotateZ(-3deg) translateZ(42px);
    }
    50% {
        transform: translate(-50%, -53%) rotateX(8deg) rotateY(-11deg) rotateZ(2deg) translateZ(60px);
    }
}

@keyframes quoteBackFloat {
    0%,
    100% {
        transform: translate(-58%, -48%) rotateX(14deg) rotateY(-18deg) rotateZ(-7deg) translateZ(-42px);
    }
    50% {
        transform: translate(-61%, -51%) rotateX(12deg) rotateY(-13deg) rotateZ(-4deg) translateZ(-30px);
    }
}

@keyframes quoteCalcFloat {
    0%,
    100% {
        transform: translateY(0) rotateY(-18deg) rotateZ(7deg);
    }
    50% {
        transform: translateY(-16px) rotateY(-8deg) rotateZ(-2deg);
    }
}

@keyframes quoteCoinOrbit {
    0%,
    100% {
        transform: translate3d(0, 0, 42px) rotate(0deg);
    }
    50% {
        transform: translate3d(22px, -24px, 90px) rotate(12deg);
    }
}

@keyframes quoteCheckPop {
    0%,
    100% {
        transform: scale(1) rotate(-5deg);
    }
    50% {
        transform: scale(1.08) rotate(3deg);
    }
}

@keyframes quoteStampPop {
    0%,
    100% {
        opacity: 0.72;
        transform: rotate(-10deg) scale(0.98);
    }
    50% {
        opacity: 1;
        transform: rotate(-7deg) scale(1.06);
    }
}

@keyframes quoteStatusPulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(15, 118, 110, 0.18);
    }
    50% {
        box-shadow: 0 0 0 0.45rem rgba(15, 118, 110, 0);
    }
}

@keyframes quoteShimmer {
    0%,
    42% {
        transform: translateX(-115%);
    }
    72%,
    100% {
        transform: translateX(115%);
    }
}

@keyframes quoteGlowDrift {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(18px, -14px, 0) scale(1.08);
    }
}

@keyframes homeBadgeFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes homeBadgeGlow {
    0%,
    100% {
        box-shadow: 0 18px 38px rgba(15, 118, 110, 0.14), 0 0 0 0 rgba(15, 118, 110, 0.16);
    }
    50% {
        box-shadow: 0 22px 46px rgba(15, 118, 110, 0.22), 0 0 0 0.45rem rgba(15, 118, 110, 0);
    }
}

.home-info-card > .row {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(20rem, 0.98fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem);
    width: 100%;
    min-height: 100%;
    margin: 0;
}

.home-info-card > .row > [class*="col-"] {
    width: 100%;
    min-width: 0;
    padding: 0;
}

.home-info-card .section-subtitle {
    max-width: 45rem;
}

.home-info-card .feature-list {
    max-width: 46rem;
    font-size: clamp(1.02rem, 1.25vw, 1.16rem);
    line-height: 1.65;
}

.home-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(1rem, 2.4vw, 1.35rem);
    width: 100%;
    margin: clamp(1.35rem, 3vw, 2rem) auto 0;
}

.home-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: clamp(12rem, 20vw, 16.5rem);
    min-height: clamp(3.35rem, 5vw, 4.15rem);
    padding: clamp(0.95rem, 1.7vw, 1.15rem) clamp(1.4rem, 2.8vw, 2.2rem);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: clamp(1.08rem, 1.45vw, 1.22rem);
    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 14px 28px rgba(24, 34, 48, 0.1);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

@supports not (height: 100dvh) {
    .home-info-wrap {
        min-height: 100%;
    }
}

.home-action-btn i {
    font-size: 1.08em;
}

.home-action-btn:hover,
.home-action-btn:focus {
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(24, 34, 48, 0.14);
}

.home-action-primary {
    background: linear-gradient(135deg, var(--primary-deep), var(--primary));
    color: #fff;
}

.home-action-primary:hover,
.home-action-primary:focus {
    color: #fff;
    background: linear-gradient(135deg, #0b4f4b, var(--primary-deep));
}

.home-action-secondary {
    background: #fff;
    border-color: rgba(15, 118, 110, 0.28);
    color: var(--primary-deep);
}

.home-action-secondary:hover,
.home-action-secondary:focus {
    color: var(--primary-deep);
    background: var(--primary-soft);
    border-color: rgba(15, 118, 110, 0.42);
}

.quotation-image-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: clamp(22rem, 58dvh, 42rem);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(37, 99, 235, 0.1)),
        #f8fafc;
}

.quotation-image-card img {
    display: block;
    width: min(100%, 44rem);
    max-height: min(62dvh, 39rem);
    height: auto;
    object-fit: contain;
}

.hero-copy {
    max-width: 44rem;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.38rem 0.68rem;
    border: 1px solid rgba(15, 118, 110, 0.2);
    border-radius: 999px;
    background: rgba(223, 245, 241, 0.82);
    color: var(--primary-deep);
    font-size: clamp(0.9rem, 2vw, 1.8rem);
    font-weight: 800;
    text-transform: uppercase;
}

.hero-panel,
.app-panel,
.form-shell,
.table-shell,
.summary-tile {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.hero-panel {
    padding: clamp(1.25rem, 3vw, 2rem);
}

.hero-visual {
    position: relative;
    overflow: hidden;
    min-height: 27rem;
    background:
        linear-gradient(135deg, rgba(15, 118, 110, 0.9), rgba(37, 99, 235, 0.88)),
        #0f766e;
    color: #fff;
}

.quote-preview {
    position: absolute;
    inset: 1.35rem;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.96);
    color: var(--ink);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.22);
}

.quote-preview-header,
.quote-preview-row,
.quote-preview-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.quote-preview-header {
    padding: 1.1rem;
    border-bottom: 1px solid var(--line-soft);
}

.quote-preview-body {
    display: grid;
    gap: 0.8rem;
    padding: 1.1rem;
}

.quote-preview-row {
    padding: 0.8rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: #f8fafc;
}

.quote-preview-total {
    margin-top: auto;
    padding: 1rem 1.1rem;
    background: #182230;
    color: #fff;
}

.card {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.card-body {
    padding: 1.35rem;
}

.app-card {
    height: 100%;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.app-card:hover {
    border-color: rgba(15, 118, 110, 0.26);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    width: 100%;
}

.dashboard-card-slot {
    width: 100%;
    min-width: 0;
    animation: dashboardCardIn 0.46s ease both;
}

.dashboard-card-slot:nth-child(2) {
    animation-delay: 0.04s;
}

.dashboard-card-slot:nth-child(3) {
    animation-delay: 0.08s;
}

.dashboard-card-slot:nth-child(4) {
    animation-delay: 0.12s;
}

.dashboard-card-slot:nth-child(5) {
    animation-delay: 0.16s;
}

.dashboard-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(15, 118, 110, 0.14);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 252, 0.86)),
        var(--surface);
    transform-origin: center top;
}

.dashboard-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(76, 188, 225, 0.12), transparent 38%);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.dashboard-card:hover::before {
    opacity: 1;
}

.dashboard-card-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 12.5rem;
    padding: clamp(1.1rem, 2.4vw, 1.55rem);
}

.dashboard-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.dashboard-card h2 {
    margin: 0.55rem 0 0;
    font-size: 1.25rem;
    font-weight: 820;
    letter-spacing: 0;
}

.dashboard-card-description {
    max-width: 56rem;
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.dashboard-card-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1.25rem;
}

.dashboard-card-metrics {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: clamp(0.85rem, 3vw, 1.4rem);
    min-width: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.dashboard-card-metric {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

.dashboard-card-metric-secondary {
    padding-left: clamp(0.85rem, 2vw, 1.2rem);
    border-left: 1px solid rgba(100, 116, 139, 0.18);
}

.dashboard-card-value {
    color: var(--ink);
    grid-column: 1;
}

.dashboard-card-value-label {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.dashboard-card-action,
.dashboard-new-quote-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    text-decoration: none !important;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.dashboard-card-action {
    grid-column: 2;
    align-self: end;
    gap: 0.55rem;
    min-height: 2.75rem;
    min-width: min(100%, 18rem);
    padding: 0.72rem 1rem;
    border: 1px solid rgba(15, 118, 110, 0.2);
    border-radius: 999px;
    background: rgba(223, 245, 241, 0.54);
    color: var(--primary-deep);
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 10px 22px rgba(15, 118, 110, 0.08);
}

.dashboard-card-action:only-child {
    grid-column: 2;
}

.dashboard-card-action i {
    display: inline-flex;
    transition: transform 0.2s ease;
}

.dashboard-card-action:hover,
.dashboard-card-action:focus {
    border-color: rgba(15, 118, 110, 0.36);
    background: #dff5f1;
    color: var(--primary-deep);
    box-shadow: 0 15px 28px rgba(15, 118, 110, 0.16);
    transform: translateY(-2px);
}

.dashboard-card-action:hover i,
.dashboard-card-action:focus i {
    transform: translateX(0.2rem);
}

.app-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-top: 1px solid rgba(15, 118, 110, 0.12);
    background: rgba(248, 252, 251, 0.82);
}

.app-pagination-summary,
.app-pagination-current {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.app-pagination-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.dashboard-new-quote-btn {
    gap: 0.6rem;
    min-height: 3.15rem;
    padding: 0.82rem 1.25rem;
    border: 0;
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(76, 188, 225, 0.98), rgba(15, 118, 110, 0.98)),
        var(--primary);
    color: #fff !important;
    font-weight: 850;
    box-shadow: 0 18px 36px rgba(15, 118, 110, 0.24);
}

.dashboard-new-quote-btn::before {
    content: "";
    position: absolute;
    inset: -70% auto -70% -40%;
    width: 42%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.46), transparent);
    transform: skewX(-18deg) translateX(-130%);
    transition: transform 0.58s ease;
}

.dashboard-new-quote-btn i,
.dashboard-new-quote-btn span {
    position: relative;
    z-index: 1;
}

.dashboard-new-quote-btn i {
    display: inline-grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.dashboard-new-quote-btn:hover,
.dashboard-new-quote-btn:focus {
    background:
        linear-gradient(135deg, rgba(56, 189, 248, 1), rgba(17, 94, 89, 1)),
        var(--primary-deep);
    color: #fff !important;
    box-shadow: 0 22px 44px rgba(15, 118, 110, 0.32);
    transform: translateY(-2px);
}

.dashboard-new-quote-btn:hover::before,
.dashboard-new-quote-btn:focus::before {
    transform: skewX(-18deg) translateX(360%);
}

@keyframes dashboardCardIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.3rem;
}

.admin-user-management-header {
    width: min(calc(100vw - 2rem), 1520px);
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
    animation: adminUserHeaderIn 0.42s ease both;
}

.admin-user-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.page-title {
    margin: 0;
    font-size: clamp(1.55rem, 2.6vw, 2.25rem);
    font-weight: 800;
    letter-spacing: 0;
}

.page-subtitle {
    max-width: 44rem;
    margin: 0.45rem 0 0;
    color: var(--muted);
}

.section-heading {
    font-size: clamp(1.35rem, 2.2vw, 1.8rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: 0;
}

.display-heading {
    font-size: clamp(2.35rem, 5.8vw, 5.6rem);
    font-weight: 850;
    line-height: 0.98;
    letter-spacing: 0;
}

.section-subtitle {
    max-width: 42rem;
    color: var(--muted);
    font-size: clamp(1.05rem, 1.35vw, 1.2rem);
    line-height: 1.65;
}

.muted-label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.metric {
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 850;
    line-height: 1;
}

.metric-sm {
    font-size: 1.55rem;
    font-weight: 800;
}

.icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.55rem;
    height: 2.55rem;
    border-radius: var(--radius);
    background: var(--primary-soft);
    color: var(--primary-deep);
    font-size: 1.05rem;
}

.icon-box.blue {
    background: #dbeafe;
    color: var(--blue);
}

.icon-box.amber {
    background: #fef3c7;
    color: var(--amber);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-deep), var(--primary));
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.18);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #0b4f4b, var(--primary-deep));
    border-color: transparent;
}

.btn-outline-primary {
    border-color: rgba(15, 118, 110, 0.32);
    color: var(--primary-deep);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--primary-soft);
    border-color: rgba(15, 118, 110, 0.45);
    color: var(--primary-deep);
}

.btn {
    border-radius: var(--radius);
    font-weight: 700;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    white-space: nowrap;
}

.create-user-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.78rem 1.15rem;
    gap: 0.55rem;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(76, 188, 225, 0.96), rgba(15, 118, 110, 0.96)),
        var(--primary);
    color: #fff !important;
    box-shadow: 0 16px 34px rgba(15, 118, 110, 0.22);
    text-decoration: none !important;
    transform: translateY(0);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.create-user-btn::before {
    content: "";
    position: absolute;
    inset: -60% auto -60% -35%;
    width: 45%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
    transform: skewX(-18deg) translateX(-120%);
    transition: transform 0.55s ease;
}

.create-user-btn i,
.create-user-btn span {
    position: relative;
    z-index: 1;
}

.create-user-btn i {
    display: inline-grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.95rem;
}

.create-user-btn:hover,
.create-user-btn:focus {
    background:
        linear-gradient(135deg, rgba(56, 189, 248, 0.98), rgba(17, 94, 89, 0.98)),
        var(--primary-deep);
    color: #fff !important;
    box-shadow: 0 20px 42px rgba(15, 118, 110, 0.3);
    transform: translateY(-2px);
}

.create-user-btn:hover::before,
.create-user-btn:focus::before {
    transform: skewX(-18deg) translateX(360%);
}

.dashboard-back-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 3rem;
    padding: 0.78rem 1.15rem;
    overflow: hidden;
    border: 1px solid rgba(15, 118, 110, 0.22);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(223, 245, 241, 0.64)),
        #fff;
    color: var(--primary-deep);
    font-weight: 820;
    text-decoration: none !important;
    box-shadow: 0 14px 30px rgba(15, 118, 110, 0.12);
    animation: dashboardBackButtonIn 0.42s ease 0.08s both;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.dashboard-back-btn::before {
    content: "";
    position: absolute;
    inset: -60% auto -60% -35%;
    width: 45%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
    transform: skewX(-18deg) translateX(-130%);
    transition: transform 0.55s ease;
}

.dashboard-back-btn i,
.dashboard-back-btn span {
    position: relative;
    z-index: 1;
}

.dashboard-back-btn i {
    display: inline-flex;
    transition: transform 0.2s ease;
}

.dashboard-back-btn:hover,
.dashboard-back-btn:focus {
    border-color: rgba(15, 118, 110, 0.36);
    background: var(--primary-soft);
    color: var(--primary-deep);
    box-shadow: 0 18px 36px rgba(15, 118, 110, 0.18);
    transform: translateY(-2px);
}

.dashboard-back-btn:hover::before,
.dashboard-back-btn:focus::before {
    transform: skewX(-18deg) translateX(360%);
}

.dashboard-back-btn:hover i,
.dashboard-back-btn:focus i {
    transform: translateX(-0.18rem);
}

.user-form-back-row,
.user-create-header,
.user-create-layout {
    width: min(100%, 1140px);
    margin-inline: auto;
}

.user-form-back-row {
    margin-bottom: 1rem;
    animation: userFormBackIn 0.38s ease both;
}

.back-users-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 2.85rem;
    padding: 0.72rem 1rem;
    border: 1px solid rgba(15, 118, 110, 0.2);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(223, 245, 241, 0.58)),
        #fff;
    color: var(--primary-deep);
    font-weight: 820;
    text-decoration: none !important;
    box-shadow: 0 12px 26px rgba(15, 118, 110, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.back-users-btn i {
    display: inline-flex;
    transition: transform 0.2s ease;
}

.back-users-btn:hover,
.back-users-btn:focus {
    border-color: rgba(15, 118, 110, 0.36);
    background: var(--primary-soft);
    color: var(--primary-deep);
    box-shadow: 0 16px 32px rgba(15, 118, 110, 0.16);
    transform: translateY(-2px);
}

.back-users-btn:hover i,
.back-users-btn:focus i {
    transform: translateX(-0.18rem);
}

.user-create-header {
    animation: userFormHeaderIn 0.42s ease 0.04s both;
}

.user-create-layout {
    animation: userFormCardIn 0.48s ease 0.1s both;
}

.user-create-card {
    padding: clamp(1rem, 2.6vw, 1.55rem);
    border: 1px solid rgba(217, 224, 232, 0.82);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 252, 0.88)),
        var(--surface);
    box-shadow: 0 24px 60px rgba(24, 34, 48, 0.1);
}

.user-create-form {
    display: grid;
    gap: 1rem;
    padding: 0;
}

.user-form-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(220, 38, 38, 0.24);
    border-left: 5px solid var(--danger);
    border-radius: var(--radius);
    background: linear-gradient(135deg, #fff5f5, #fee2e2);
    color: #7f1d1d;
    box-shadow: var(--shadow-sm);
    animation: alertRiseIn 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.user-form-alert i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
    color: #dc2626;
}

.user-form-alert strong,
.user-form-alert span {
    display: block;
}

.user-form-alert span {
    color: #7f1d1d;
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}

.user-form-section {
    display: grid;
    gap: 1.25rem;
    padding: clamp(1rem, 2.4vw, 1.35rem);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.72)),
        var(--surface-raised);
    animation: userFormSectionIn 0.42s ease both;
}

.user-form-section:nth-of-type(3) {
    animation-delay: 0.08s;
}

.user-form-section:nth-of-type(4) {
    animation-delay: 0.14s;
}

.user-form-section-header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.user-form-section-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 830;
}

.user-form-section-header p {
    margin: 0.2rem 0 0;
    color: var(--muted);
}

.user-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.user-access-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 38rem;
}

.user-form-field {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.user-form-field-wide {
    grid-column: 1 / -1;
}

.user-form-field .form-label {
    margin: 0;
}

.user-form-field .form-control,
.user-form-field .form-select {
    width: 100%;
    min-height: 3rem;
}

.user-password-control {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 3rem;
    padding-right: 0.35rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.user-password-control:focus-within {
    border-color: rgba(15, 118, 110, 0.58);
    box-shadow: 0 0 0 0.16rem rgba(15, 118, 110, 0.13);
}

.user-password-control.is-valid {
    border-color: rgba(22, 163, 74, 0.54);
    box-shadow: 0 0 0 0.14rem rgba(22, 163, 74, 0.1);
}

.user-password-control.is-invalid {
    border-color: rgba(220, 38, 38, 0.5);
    box-shadow: 0 0 0 0.14rem rgba(220, 38, 38, 0.1);
}

.user-password-control .form-control {
    min-height: calc(3rem - 2px);
    border: 0;
    box-shadow: none;
}

.user-password-control .form-control:focus {
    box-shadow: none;
}

.user-password-toggle {
    margin-left: auto;
}

.password-policy-list {
    display: grid;
    gap: 0.4rem;
    max-height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-0.25rem);
    transition: max-height 0.24s ease, opacity 0.2s ease, transform 0.2s ease, margin-top 0.2s ease;
}

.password-policy-list.is-visible {
    max-height: 12rem;
    margin-top: 0.2rem;
    opacity: 1;
    transform: translateY(0);
}

.password-policy-list li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 720;
    transition: color 0.18s ease;
}

.password-policy-list li i {
    color: #98a2b3;
    font-size: 0.9rem;
    transition: color 0.18s ease, transform 0.18s ease;
}

.password-policy-list li.is-valid {
    color: #166534;
}

.password-policy-list li.is-valid i {
    color: #16a34a;
    transform: scale(1.05);
}

.password-match-message {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    max-height: 0;
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 780;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-0.22rem);
    transition: max-height 0.22s ease, opacity 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

.password-match-message.is-visible {
    max-height: 2rem;
    opacity: 1;
    transform: translateY(0);
}

.password-match-message.is-valid {
    color: #166534;
}

.password-match-message.is-invalid {
    color: #b91c1c;
}

.password-match-message i {
    font-size: 0.92rem;
}

.password-match-message.is-valid i {
    color: #16a34a;
}

.password-match-message.is-invalid i {
    color: #dc2626;
}

.user-form-field .form-text,
.user-form-field small {
    font-size: 0.82rem;
}

.user-form-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 0.25rem;
}

.user-form-submit {
    border: 0;
}

.user-form-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.78rem 1.1rem;
    border: 1px solid rgba(102, 112, 133, 0.22);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-weight: 800;
    text-decoration: none !important;
    box-shadow: 0 10px 22px rgba(24, 34, 48, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.user-form-cancel:hover,
.user-form-cancel:focus {
    border-color: rgba(102, 112, 133, 0.4);
    background: #f8fafc;
    color: var(--ink);
    box-shadow: 0 14px 28px rgba(24, 34, 48, 0.1);
    transform: translateY(-2px);
}

.user-edit-card {
    overflow: hidden;
}

.user-edit-section {
    border: 1px solid rgba(217, 224, 232, 0.88);
}

.user-edit-avatar {
    width: 3rem;
    height: 3rem;
    font-size: 1rem;
    box-shadow: 0 12px 24px rgba(15, 118, 110, 0.12);
}

.user-edit-grid {
    align-items: start;
}

.user-password-reset-section {
    background:
        linear-gradient(145deg, rgba(239, 246, 255, 0.72), rgba(255, 255, 255, 0.94)),
        var(--surface-raised);
}

.user-reset-grid {
    align-items: start;
}

.user-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.status-toggle-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    min-height: 5.5rem;
    padding: 1rem;
    border: 1px solid rgba(15, 118, 110, 0.16);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(240, 253, 250, 0.46)),
        #fff;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(24, 34, 48, 0.06);
    animation: userStatusCardIn 0.4s ease both;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.status-toggle-card:nth-child(2) {
    animation-delay: 0.06s;
}

.status-toggle-card:hover,
.status-toggle-card:focus-within {
    border-color: rgba(15, 118, 110, 0.34);
    background:
        linear-gradient(145deg, rgba(240, 253, 250, 0.88), rgba(255, 255, 255, 0.96)),
        #fff;
    box-shadow: 0 18px 36px rgba(15, 118, 110, 0.12);
    transform: translateY(-2px);
}

.status-toggle-icon {
    display: inline-grid;
    place-items: center;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 0.8rem;
    background: rgba(220, 252, 231, 0.9);
    color: #15803d;
    font-size: 1.15rem;
}

.status-toggle-icon.lock {
    background: rgba(254, 243, 199, 0.92);
    color: #b45309;
}

.status-toggle-copy {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.status-toggle-copy strong {
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.2;
}

.status-toggle-copy small {
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.35;
}

.status-toggle-card .form-check-input {
    position: relative;
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    width: 2.55rem;
    height: 1.35rem;
    margin: 0;
    border-radius: 999px;
    background-color: #e5e7eb;
    background-image: none;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.status-toggle-card .form-check-input::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.16rem;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(24, 34, 48, 0.18);
    transform: translateY(-50%);
    transition: transform 0.2s ease;
}

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

.status-toggle-card .form-check-input:checked::before {
    transform: translate(1.18rem, -50%);
}

.machine-form-layout {
    max-width: 1140px;
}

.machine-form-card {
    padding: clamp(1rem, 2.4vw, 1.65rem);
    animation: userFormCardIn 0.48s ease 0.08s both;
}

.machine-form {
    gap: 1.15rem;
}

.machine-form-section {
    gap: 1.4rem;
    padding: clamp(1rem, 2.5vw, 1.45rem);
    border-color: rgba(217, 224, 232, 0.95);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), 0 14px 32px rgba(24, 34, 48, 0.04);
}

.machine-id-helper-text {
    color: #475467 !important;
    font-weight: 500;
}

.machine-id-note {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    width: fit-content;
    max-width: 100%;
    padding: 0.72rem 0.9rem;
    border: 1px solid rgba(15, 118, 110, 0.16);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(240, 253, 250, 0.9), rgba(255, 255, 255, 0.96)),
        #fff;
    color: var(--primary-deep);
    font-weight: 750;
    box-shadow: 0 10px 24px rgba(15, 118, 110, 0.08);
    animation: alertRiseIn 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s both;
}

.machine-id-note i {
    display: inline-flex;
    color: var(--primary);
}

.machine-id-inline-help {
    display: block;
    margin-top: 0.45rem;
    color: #475467;
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.4;
}

.machine-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.machine-form-grid .form-control {
    min-height: 3.05rem;
}

.machine-status-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    margin-top: 0.15rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(240, 253, 250, 0.58)),
        #fff;
}

.machine-form .user-form-alert {
    animation: alertRiseIn 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.machine-form .user-form-actions {
    padding-top: 0.1rem;
}

.company-form-back-row,
.company-form-header,
.company-form-layout {
    width: min(100%, 1280px);
    max-width: 1280px;
}

.company-form-card {
    padding: clamp(1rem, 2.4vw, 1.75rem);
    overflow: hidden;
    border-color: rgba(15, 118, 110, 0.14);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(240, 253, 250, 0.5)),
        var(--surface);
    animation: companyFormCardIn 0.5s ease 0.08s both;
}

.company-form {
    gap: clamp(1rem, 2vw, 1.35rem);
}

.company-form-section {
    position: relative;
    gap: 1.35rem;
    padding: clamp(1rem, 2.4vw, 1.5rem);
    overflow: hidden;
    border: 1px solid rgba(217, 224, 232, 0.9);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.78)),
        var(--surface-raised);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 16px 34px rgba(24, 34, 48, 0.045);
    animation: companyFormSectionIn 0.46s ease both;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.company-form-section::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.28rem;
    background: linear-gradient(180deg, rgba(76, 188, 225, 0.95), rgba(15, 118, 110, 0.95));
}

.company-form-section:nth-of-type(3) {
    animation-delay: 0.06s;
}

.company-form-section:nth-of-type(4) {
    animation-delay: 0.12s;
}

.company-form-section:nth-of-type(5) {
    animation-delay: 0.18s;
}

.company-form-section:hover,
.company-form-section:focus-within {
    border-color: rgba(15, 118, 110, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 20px 42px rgba(15, 118, 110, 0.08);
    transform: translateY(-1px);
}

.company-form-section .user-form-section-header {
    padding-left: 0.35rem;
}

.company-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: clamp(0.85rem, 1.8vw, 1.1rem);
}

.company-form-grid .user-form-field-wide {
    grid-column: 1 / -1;
}

.company-identity-grid .user-form-field-wide {
    grid-column: span 2;
}

.company-form .form-control,
.company-form .form-select {
    min-height: 3.05rem;
    padding: 0.78rem 0.9rem;
    font-size: 1rem;
    line-height: 1.35;
}

.company-form textarea.form-control {
    min-height: 7rem;
    padding-top: 0.85rem;
    resize: vertical;
}

.company-form .form-control::placeholder {
    color: #667085;
    font-size: 1rem;
    opacity: 1;
}

.company-notes-grid textarea.form-control {
    min-height: 8.5rem;
}

.terms-field-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.55rem;
}

.terms-line-spacing-control {
    display: grid;
    grid-template-columns: auto minmax(8.5rem, 11rem);
    align-items: center;
    gap: 0.55rem;
}

.terms-line-spacing-control .form-select {
    min-height: 2.45rem;
    padding-block: 0.45rem;
    font-size: 0.95rem;
}

.rich-text-editor {
    display: grid;
    gap: 0;
}

.rich-text-toolbar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: fit-content;
    max-width: 100%;
    padding: 0.4rem 0.45rem;
    border: 1px solid rgba(148, 163, 184, 0.34);
    border-bottom: 0;
    border-radius: 0.7rem 0.7rem 0 0;
    background: #f8fafc;
}

.rich-text-action {
    display: inline-grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    background: transparent;
    color: #243042;
    font-size: 1rem;
    line-height: 1;
    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.rich-text-action:hover,
.rich-text-action:focus {
    border-color: rgba(15, 118, 110, 0.26);
    background: rgba(15, 118, 110, 0.08);
    color: var(--primary-deep);
    transform: translateY(-1px);
}

.rich-text-divider {
    width: 1px;
    height: 1.5rem;
    margin-inline: 0.15rem;
    background: rgba(148, 163, 184, 0.36);
}

.rich-text-editor textarea.form-control {
    border-top-left-radius: 0;
}

.rich-text-editor.is-enhanced textarea.form-control {
    display: none;
}

.rich-text-surface {
    --rich-text-preview-line-height: 1.45;
    --rich-text-list-gap: 0.25rem;
    --rich-text-block-gap: 0.35rem;
    min-height: 13rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.5);
    border-radius: 0 0.7rem 0.7rem 0.7rem;
    background: #fff;
    color: #172033;
    font-size: 1rem;
    line-height: var(--rich-text-preview-line-height);
    outline: none;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.rich-text-surface :where(*) {
    line-height: var(--rich-text-preview-line-height);
}

.rich-text-surface:focus {
    border-color: rgba(15, 118, 110, 0.55);
    box-shadow: 0 0 0 0.2rem rgba(15, 118, 110, 0.12);
}

.rich-text-surface ul,
.rich-text-surface ol {
    margin: var(--rich-text-list-gap) 0 var(--rich-text-list-gap) 1.35rem;
    padding: 0;
}

.rich-text-surface p,
.rich-text-surface div {
    margin: 0 0 var(--rich-text-block-gap);
}

.company-form input[type="file"].form-control {
    min-height: 3.05rem;
    padding-block: 0.7rem;
}

.company-sign-field {
    align-self: stretch;
}

.company-sign-preview {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 4.25rem;
    padding: 0.7rem;
    border: 1px solid rgba(15, 118, 110, 0.16);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(240, 253, 250, 0.9), rgba(255, 255, 255, 0.96)),
        #fff;
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.07);
    animation: companySignPreviewIn 0.36s ease both;
}

.company-sign-preview img {
    width: 7rem;
    height: 3rem;
    object-fit: contain;
    padding: 0.3rem;
    border: 1px solid rgba(217, 224, 232, 0.8);
    border-radius: 0.7rem;
    background: #fff;
}

.company-sign-preview a {
    color: var(--primary-deep);
    font-weight: 800;
}

.company-form .user-form-actions {
    justify-content: flex-end;
    margin-top: 0.1rem;
    padding: 1rem;
    border: 1px solid rgba(217, 224, 232, 0.84);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(240, 253, 250, 0.58)),
        #fff;
    box-shadow: 0 14px 30px rgba(24, 34, 48, 0.045);
    animation: companyFormActionsIn 0.42s ease 0.22s both;
}

@keyframes companyFormCardIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes companyFormSectionIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.992);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes companyFormActionsIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes companySignPreviewIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1180px) {
    .company-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .company-identity-grid .user-form-field-wide {
        grid-column: 1 / -1;
    }
}

@keyframes userFormBackIn {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes userFormHeaderIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes userFormCardIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes userFormSectionIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes userStatusCardIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.form-control,
.form-select {
    min-height: 2.65rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background-color: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(15, 118, 110, 0.58);
    box-shadow: 0 0 0 0.16rem rgba(15, 118, 110, 0.13);
}

.input-group-text {
    border-color: var(--line);
    border-radius: var(--radius);
    background: #f8fafc;
    color: var(--muted);
}

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

.form-label {
    color: var(--ink);
    font-weight: 750;
}

.required-mark {
    color: #dc2626;
    font-weight: 900;
}

.form-text {
    color: var(--muted) !important;
}

.site-shell > .app-navbar,
.site-shell > .app-main,
.site-shell > .app-footer {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.52s ease, transform 0.52s ease;
}

.site-shell.app-is-preloading > .app-navbar,
.site-shell.app-is-preloading > .app-main,
.site-shell.app-is-preloading > .app-footer {
    opacity: 0;
    transform: translateY(0.65rem);
}

.site-shell.app-is-ready > .app-navbar,
.site-shell.app-is-ready > .app-main,
.site-shell.app-is-ready > .app-footer {
    animation: appContentReveal 0.56s ease both;
}

.app-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: clamp(1.25rem, 4vw, 2rem);
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(223, 245, 241, 0.94) 48%, rgba(245, 247, 250, 0.98)),
        var(--bg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.48s ease, visibility 0.48s ease;
    will-change: opacity;
}

.app-loading-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.app-loading-overlay__backdrop {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(15, 118, 110, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(37, 99, 235, 0.06) 1px, transparent 1px);
    background-size: 3.5rem 3.5rem;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    opacity: 0.52;
}

.app-loading-overlay__panel {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 1.15rem;
    width: min(90vw, 22rem);
    padding: clamp(1.6rem, 5vw, 2.35rem);
    text-align: center;
    transform: translateY(0);
    animation: appLoadingPanelIn 0.58s ease both;
}

.app-loading-overlay__ring,
.app-loading-overlay__logo-wrap {
    grid-area: 1 / 1;
}

.app-loading-overlay__ring {
    position: relative;
    width: clamp(7.25rem, 30vw, 9.25rem);
    height: clamp(7.25rem, 30vw, 9.25rem);
    border-radius: 50%;
    background:
        conic-gradient(from 0deg, rgba(15, 118, 110, 0), var(--primary), rgba(37, 99, 235, 0.88), rgba(15, 118, 110, 0)),
        linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(223, 245, 241, 0.42));
    box-shadow:
        0 0 0 1px rgba(15, 118, 110, 0.08),
        0 24px 64px rgba(15, 118, 110, 0.2);
    animation: appLoadingSpin 1.15s linear infinite;
    will-change: transform;
}

.app-loading-overlay__ring::after {
    content: "";
    position: absolute;
    inset: 0.28rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: inset 0 0 28px rgba(15, 118, 110, 0.08);
}

.app-loading-overlay__logo-wrap {
    z-index: 1;
    display: grid;
    place-items: center;
    position: relative;
    width: clamp(6.25rem, 26vw, 8.15rem);
    height: clamp(6.25rem, 26vw, 8.15rem);
    align-self: center;
    justify-self: center;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.82);
    box-shadow:
        0 18px 42px rgba(24, 34, 48, 0.1),
        0 0 36px rgba(15, 118, 110, 0.18);
    animation: appLogoFloat 2.7s ease-in-out infinite;
    will-change: transform;
}

.app-loading-overlay__logo-wrap::before {
    content: "";
    position: absolute;
    inset: 0.62rem;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(15, 118, 110, 0.12), rgba(37, 99, 235, 0.08));
    transform: translateY(105%);
    animation: appLogoFillWave 2.55s ease-in-out infinite;
    will-change: transform;
}

.app-loading-overlay__logo-wrap::after {
    content: "";
    position: absolute;
    inset-inline: 17%;
    top: 18%;
    height: 0.18rem;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(15, 118, 110, 0.54), transparent);
    opacity: 0;
    animation: appLogoFillLine 2.55s ease-in-out infinite;
    will-change: transform, opacity;
}

.app-loading-overlay__logo {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    display: block;
    width: 70%;
    height: 70%;
    object-fit: contain;
    animation: appLogoIn 0.72s ease both;
}

.app-loading-overlay__logo-base {
    opacity: 0.42;
    filter: grayscale(0.5) saturate(0.72);
}

.app-loading-overlay__logo-fill {
    opacity: 0.98;
    filter: saturate(1.18) drop-shadow(0 0 12px rgba(15, 118, 110, 0.2));
    clip-path: inset(100% 0 0 0);
    animation: appLogoIn 0.72s ease both, appLogoClipFill 2.55s ease-in-out infinite;
    will-change: clip-path;
}

.app-loading-overlay__bar {
    position: relative;
    width: min(12rem, 58vw);
    height: 0.28rem;
    margin-top: 0.15rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.12);
}

.app-loading-overlay__bar::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 42%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, var(--primary), var(--blue), transparent);
    animation: appLoadingBar 1.25s ease-in-out infinite;
}

.app-loading-overlay__text {
    display: grid;
    gap: 0.25rem;
    max-width: 18rem;
}

.app-loading-overlay__text strong {
    font-size: clamp(1rem, 3vw, 1.12rem);
    color: var(--ink);
    letter-spacing: 0;
}

.app-loading-overlay__text span {
    color: var(--muted);
    font-size: clamp(0.82rem, 2.5vw, 0.94rem);
}

@keyframes appLoadingSpin {
    to { transform: rotate(360deg); }
}

@keyframes appLogoIn {
    from {
        opacity: 0;
        transform: scale(0.86);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes appLogoFloat {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.025) translateY(-0.12rem);
    }
}

@keyframes appLogoFillWave {
    0% { transform: translateY(105%); }
    45% { transform: translateY(0); }
    58% { transform: translateY(0); }
    100% { transform: translateY(-105%); }
}

@keyframes appLogoFillLine {
    0% {
        opacity: 0;
        transform: translateY(4.8rem);
    }
    18%, 72% {
        opacity: 1;
    }
    45%, 58% {
        opacity: 0.78;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-4.8rem);
    }
}

@keyframes appLogoClipFill {
    0% { clip-path: inset(100% 0 0 0); }
    45% { clip-path: inset(0 0 0 0); }
    58% { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(0 0 100% 0); }
}

@keyframes appLoadingBar {
    0% { transform: translateX(-120%); }
    50% { transform: translateX(82%); }
    100% { transform: translateX(240%); }
}

@keyframes appLoadingPanelIn {
    from {
        opacity: 0;
        transform: translateY(0.75rem) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes appContentReveal {
    from {
        opacity: 0;
        transform: translateY(0.65rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-loading-overlay,
    .site-shell > .app-navbar,
    .site-shell > .app-main,
    .site-shell > .app-footer {
        transition-duration: 0.01ms;
    }

    .app-loading-overlay__ring,
    .app-loading-overlay__logo-wrap,
    .app-loading-overlay__logo-wrap::before,
    .app-loading-overlay__logo-wrap::after,
    .app-loading-overlay__logo,
    .app-loading-overlay__logo-fill,
    .app-loading-overlay__bar::after,
    .site-shell.app-is-ready > .app-navbar,
    .site-shell.app-is-ready > .app-main,
    .site-shell.app-is-ready > .app-footer {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }

    .app-loading-overlay__logo-wrap::before {
        transform: translateY(0);
    }

    .app-loading-overlay__logo-wrap::after {
        opacity: 0;
    }

    .app-loading-overlay__logo-fill {
        clip-path: inset(0 0 0 0);
    }
}

.form-shell {
    padding: clamp(1rem, 3vw, 1.5rem);
}

.form-section {
    padding: 1rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--surface-raised);
}

.quotation-form-header,
.quotation-form-shell {
    width: min(calc(100vw - 2rem), 1720px);
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
}

.quotation-form-header {
    position: relative;
    align-items: center;
    padding: clamp(1rem, 2vw, 1.4rem);
    overflow: hidden;
    border: 1px solid rgba(217, 224, 232, 0.9);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(223, 245, 241, 0.72)),
        var(--surface);
    box-shadow: var(--shadow-sm);
    animation: quotationHeaderIn 0.42s ease both;
}

.quotation-form-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 0.25rem;
    background: linear-gradient(90deg, var(--primary), var(--blue), rgba(15, 118, 110, 0.18));
}

.quotation-form-header > * {
    position: relative;
    z-index: 1;
}

.quotation-form-header > div {
    flex: 1 1 auto;
    min-width: 0;
}

.quotation-dashboard-back-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex: 0 0 auto;
    gap: 0.6rem;
    min-height: 3.15rem;
    min-width: max-content;
    margin-left: auto;
    padding: 0.82rem 1.25rem;
    isolation: isolate;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(76, 188, 225, 0.98), rgba(15, 118, 110, 0.98)),
        var(--primary);
    color: #fff !important;
    font-weight: 850;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: 0 18px 36px rgba(15, 118, 110, 0.24);
    animation: quotationBackButtonIn 0.44s ease 0.08s both;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.quotation-dashboard-back-btn::before {
    content: "";
    position: absolute;
    inset: -70% auto -70% -40%;
    width: 42%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.46), transparent);
    transform: skewX(-18deg) translateX(-130%);
    transition: transform 0.58s ease;
}

.quotation-dashboard-back-btn i,
.quotation-dashboard-back-btn span {
    position: relative;
    z-index: 1;
}

.quotation-dashboard-back-btn i {
    display: inline-grid;
    place-items: center;
    flex: 0 0 1.55rem;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    font-size: 0.92rem;
    transition: transform 0.2s ease, background 0.2s ease;
}

.quotation-dashboard-back-btn:hover,
.quotation-dashboard-back-btn:focus {
    background:
        linear-gradient(135deg, rgba(56, 189, 248, 1), rgba(17, 94, 89, 1)),
        var(--primary-deep);
    color: #fff !important;
    box-shadow: 0 22px 44px rgba(15, 118, 110, 0.32);
    transform: translateY(-2px);
}

.quotation-dashboard-back-btn:hover::before,
.quotation-dashboard-back-btn:focus::before {
    transform: skewX(-18deg) translateX(360%);
}

.quotation-dashboard-back-btn:hover i,
.quotation-dashboard-back-btn:focus i {
    background: rgba(255, 255, 255, 0.26);
    transform: translateX(-0.18rem);
}

.quotation-dashboard-back-btn:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.2);
    outline-offset: 3px;
}

.quotation-form-shell {
    display: grid;
    gap: 1rem;
    padding: clamp(0.9rem, 1.8vw, 1.35rem);
    border: 1px solid rgba(217, 224, 232, 0.84);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9)),
        var(--surface);
    box-shadow: 0 24px 60px rgba(24, 34, 48, 0.1);
    animation: quotationWorkspaceIn 0.46s ease 0.04s both;
}

.quotation-form-shell > .row {
    margin-inline: 0;
}

.quotation-form-shell > .row > [class*="col-"] {
    padding-inline: 0.5rem;
}

.quotation-card {
    position: relative;
    padding: clamp(1rem, 1.7vw, 1.35rem);
    overflow: hidden;
    border-color: rgba(217, 224, 232, 0.86);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.86)),
        var(--surface);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 14px 34px rgba(24, 34, 48, 0.06);
    animation: quotationCardIn 0.42s ease both;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.quotation-card:hover,
.quotation-card:focus-within {
    border-color: rgba(15, 118, 110, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 40px rgba(24, 34, 48, 0.09);
    transform: translateY(-1px);
}

.quotation-card:nth-of-type(2) {
    animation-delay: 0.05s;
}

.quotation-card:nth-of-type(3) {
    animation-delay: 0.1s;
}

.quotation-contact-section {
    display: grid;
    grid-template-columns: minmax(12rem, 0.28fr) minmax(0, 1fr);
    gap: clamp(1rem, 2vw, 1.45rem);
    align-items: end;
}

.quotation-contact-title {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.quotation-contact-title h2 {
    color: var(--ink);
    font-weight: 850;
    letter-spacing: 0;
}

.quotation-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.quotation-address-row {
    align-items: stretch;
}

.quotation-address-row > [class*="col-"] {
    display: flex;
}

.quotation-address-card {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 1.05rem;
    width: 100%;
}

.quotation-address-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.35rem;
    padding-bottom: 0.95rem;
    border-bottom: 1px solid rgba(217, 224, 232, 0.82);
}

.quotation-address-title {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.quotation-address-title h2 {
    color: var(--ink);
    font-weight: 850;
    letter-spacing: 0;
}

.quotation-address-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.quotation-field {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    opacity: 0;
    animation: quotationFieldIn 0.34s ease both;
}

.quotation-field-wide {
    grid-column: 1 / -1;
}

.quotation-field:nth-child(1) {
    animation-delay: 0.04s;
}

.quotation-field:nth-child(2) {
    animation-delay: 0.08s;
}

.quotation-field:nth-child(3) {
    animation-delay: 0.12s;
}

.quotation-field:nth-child(4) {
    animation-delay: 0.16s;
}

.quotation-field:nth-child(5) {
    animation-delay: 0.2s;
}

.quotation-field:nth-child(6) {
    animation-delay: 0.24s;
}

.quotation-field:nth-child(7) {
    animation-delay: 0.28s;
}

.quotation-field:nth-child(8) {
    animation-delay: 0.32s;
}

.quotation-field:nth-child(9) {
    animation-delay: 0.36s;
}

.quotation-field .form-label {
    display: flex;
    align-items: center;
    min-height: 1.18rem;
    margin: 0;
    color: #344054;
    font-size: 0.86rem;
    font-weight: 850;
    line-height: 1.2;
}

.quotation-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 1.18rem;
}

.quotation-add-phone-btn,
.quotation-cancel-phone-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 1.5rem;
    padding: 0.18rem 0.46rem;
    border: 1px solid rgba(15, 118, 110, 0.2);
    border-radius: 999px;
    background: rgba(223, 245, 241, 0.58);
    color: var(--primary-deep);
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.quotation-add-phone-btn i,
.quotation-cancel-phone-btn i {
    font-size: 0.78rem;
}

.quotation-add-phone-btn:hover,
.quotation-add-phone-btn:focus {
    border-color: rgba(15, 118, 110, 0.34);
    background: #dff5f1;
    box-shadow: 0 8px 18px rgba(15, 118, 110, 0.1);
    transform: translateY(-1px);
}

.quotation-cancel-phone-btn {
    border-color: rgba(220, 38, 38, 0.18);
    background: rgba(254, 226, 226, 0.62);
    color: #991b1b;
}

.quotation-cancel-phone-btn:hover,
.quotation-cancel-phone-btn:focus {
    border-color: rgba(220, 38, 38, 0.32);
    background: #fee2e2;
    box-shadow: 0 8px 18px rgba(220, 38, 38, 0.1);
    transform: translateY(-1px);
}

.quotation-extra-phone-field.is-revealed {
    opacity: 1;
    animation: quotationExtraPhoneIn 0.28s ease both;
}

.quotation-field .form-control,
.quotation-field .form-select {
    width: 100%;
    min-height: 3rem;
    padding: 0.68rem 0.82rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.9)),
        #fff;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.quotation-field textarea.form-control {
    min-height: 6.25rem;
    line-height: 1.45;
}

.quotation-field .form-control::placeholder,
.quotation-field textarea.form-control::placeholder {
    color: #667085;
    font-size: 1rem;
    font-weight: 650;
    opacity: 0.9;
}

.quotation-field:focus-within .form-label {
    color: var(--primary-deep);
}

.quotation-field:focus-within .form-control,
.quotation-field:focus-within .form-select {
    background: #fff;
    border-color: rgba(15, 118, 110, 0.62);
    box-shadow: 0 0 0 0.16rem rgba(15, 118, 110, 0.13), 0 10px 22px rgba(15, 118, 110, 0.08);
    transform: translateY(-1px);
}

.quotation-native-hidden-field {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.quotation-enhanced-field {
    position: relative;
}

.quotation-search-select {
    position: relative;
    width: 100%;
}

.quotation-search-select-toggle,
.quotation-phone-control {
    min-height: 3rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.quotation-search-select-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    width: 100%;
    padding: 0.72rem 0.9rem;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.quotation-search-select-toggle:hover,
.quotation-search-select.is-open .quotation-search-select-toggle,
.quotation-phone-control:focus-within {
    border-color: rgba(15, 118, 110, 0.5);
    box-shadow: 0 0 0 0.16rem rgba(15, 118, 110, 0.12);
}

.quotation-search-select-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quotation-search-select-toggle i {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.9rem;
    transition: transform 0.2s ease;
}

.quotation-search-select.is-open .quotation-search-select-toggle i {
    transform: rotate(180deg);
}

.quotation-search-select-panel {
    position: fixed;
    z-index: 2200;
    top: 0;
    left: 0;
    right: auto;
    width: min(92vw, 22rem);
    overflow: hidden;
    border: 1px solid rgba(217, 224, 232, 0.95);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 26px 60px rgba(24, 34, 48, 0.22), 0 0 0 1px rgba(15, 118, 110, 0.08);
    opacity: 0;
    transform: translateY(-0.35rem) scale(0.985);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.quotation-search-select-panel.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.quotation-search-select-input {
    width: calc(100% - 1rem);
    min-height: 2.65rem;
    margin: 0.5rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: #f8fafc;
    color: var(--ink);
    outline: 0;
}

.quotation-search-select-input:focus {
    border-color: rgba(15, 118, 110, 0.52);
    box-shadow: 0 0 0 0.14rem rgba(15, 118, 110, 0.1);
}

.quotation-search-select-list {
    max-height: var(--quotation-dropdown-max-height, 18rem);
    overflow-y: auto;
    padding: 0.25rem;
    overscroll-behavior: contain;
}

.quotation-search-select-option,
.quotation-search-select-empty {
    width: 100%;
    min-height: 2.45rem;
    padding: 0.58rem 0.75rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    font-weight: 650;
    text-align: left;
}

.quotation-search-select-option:hover,
.quotation-search-select-option:focus {
    background: var(--primary-soft);
    color: var(--primary-deep);
    outline: 0;
}

.quotation-search-select-empty {
    color: var(--muted);
    cursor: default;
}

.quotation-phone-control {
    display: grid;
    grid-template-columns: minmax(7.5rem, 0.46fr) minmax(0, 1fr);
    align-items: stretch;
    overflow: visible;
}

.quotation-phone-code-anchor {
    min-width: 0;
    border-right: 1px solid var(--line-soft);
}

.quotation-phone-code-anchor .quotation-search-select-toggle {
    min-height: calc(3rem - 2px);
    border: 0;
    border-radius: 13px 0 0 13px;
    background: linear-gradient(135deg, rgba(223, 245, 241, 0.7), rgba(248, 250, 252, 0.92));
    box-shadow: none;
}

.quotation-phone-code-anchor .quotation-search-select-panel {
    min-width: min(92vw, 22rem);
}

.quotation-phone-number-input.form-control {
    min-height: calc(3rem - 2px);
    border: 0;
    border-radius: 0 13px 13px 0;
    box-shadow: none;
}

.quotation-phone-number-input.form-control:focus {
    box-shadow: none;
}

@media (max-width: 575.98px) {
    .quotation-phone-control {
        grid-template-columns: minmax(6.6rem, 0.42fr) minmax(0, 1fr);
    }

    .quotation-phone-code-anchor .quotation-search-select-panel,
    .quotation-search-select-panel {
        position: fixed;
        z-index: 2200;
        top: auto;
        right: 1rem;
        bottom: 1rem;
        left: 1rem;
        width: auto;
        max-height: min(70vh, 28rem);
        transform: translateY(0.5rem) scale(0.99);
    }

    .quotation-search-select-panel.is-open {
        transform: translateY(0) scale(1);
    }

    .quotation-search-select-list {
        max-height: min(52vh, 20rem);
    }
}

.quotation-copy-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.6rem;
    margin: 0;
    padding: 0.56rem 0.78rem;
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-radius: 999px;
    background: rgba(223, 245, 241, 0.56);
    color: var(--primary-deep);
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.quotation-copy-toggle .form-check-input {
    flex: 0 0 1.05rem;
    float: none;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
}

.quotation-copy-toggle .form-check-label {
    margin: 0;
    color: inherit;
    font-size: 0.86rem;
    line-height: 1.2;
}

.quotation-copy-toggle:hover,
.quotation-copy-toggle:focus-within {
    border-color: rgba(15, 118, 110, 0.32);
    background: #dff5f1;
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.1);
    transform: translateY(-1px);
}

.quotation-reference-panel {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(14rem, 26rem);
    align-items: center;
    gap: 1rem;
}

.quotation-reference-title {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    animation: quotationReferenceIn 0.34s ease both;
}

.quotation-reference-title h2 {
    font-weight: 850;
}

.quotation-reference-field {
    display: grid;
    gap: 0.42rem;
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid rgba(217, 224, 232, 0.84);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(223, 245, 241, 0.38)),
        #fff;
    box-shadow: 0 14px 30px rgba(24, 34, 48, 0.06);
    animation: quotationReferenceIn 0.34s ease 0.05s both;
}

.quotation-reference-field .form-label {
    margin: 0;
    color: #344054;
    font-size: 0.86rem;
    font-weight: 850;
    line-height: 1.2;
}

.quotation-reference-field .form-control {
    min-height: 3.1rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.92)),
        #fff;
    color: var(--ink);
    font-size: 1.08rem;
    font-weight: 850;
    letter-spacing: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.quotation-reference-field .form-control[readonly] {
    background:
        linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(240, 253, 250, 0.78)),
        #f8fafc;
    cursor: default;
}

.quotation-reference-field:focus-within .form-label {
    color: var(--primary-deep);
}

.quotation-reference-field:focus-within .form-control {
    background: #fff;
    border-color: rgba(15, 118, 110, 0.62);
    box-shadow: 0 0 0 0.16rem rgba(15, 118, 110, 0.13), 0 12px 24px rgba(15, 118, 110, 0.08);
    transform: translateY(-1px);
}

.quotation-tax-mode-section {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) minmax(20rem, 36rem);
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.quotation-tax-mode-title {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.quotation-tax-mode-title h2 {
    font-weight: 850;
}

.quotation-scope-controls {
    display: grid;
    gap: 0.8rem;
    min-width: 0;
}

.quotation-currency-row {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) minmax(10rem, 1fr);
    gap: 0.8rem;
    align-items: end;
}

.quotation-currency-field,
.quotation-tax-mode-section .quotation-exchange-field {
    display: grid;
    gap: 0.42rem;
    min-width: 0;
}

.quotation-currency-field .form-label,
.quotation-tax-mode-section .quotation-exchange-field .form-label {
    margin: 0;
    color: #344054;
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1.2;
}

.quotation-currency-field .form-select,
.quotation-tax-mode-section .quotation-exchange-field .form-control {
    min-height: 3rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.9)),
        #fff;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.quotation-outside-india-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.2rem;
    min-width: min(100%, 20rem);
    margin: 0;
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(223, 245, 241, 0.44)),
        #fff;
    color: var(--ink);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 10px 22px rgba(15, 118, 110, 0.06);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.quotation-outside-india-toggle .form-check-input {
    flex: 0 0 1.18rem;
    width: 1.18rem;
    height: 1.18rem;
    margin: 0;
}

.quotation-outside-india-toggle strong,
.quotation-outside-india-toggle small {
    display: block;
    line-height: 1.2;
}

.quotation-outside-india-toggle strong {
    font-size: 0.94rem;
}

.quotation-outside-india-toggle small {
    margin-top: 0.18rem;
    color: var(--muted);
    font-size: 0.78rem;
}

.quotation-outside-india-toggle:hover,
.quotation-outside-india-toggle:focus-within {
    border-color: rgba(15, 118, 110, 0.32);
    background: #dff5f1;
    box-shadow: 0 14px 28px rgba(15, 118, 110, 0.12);
    transform: translateY(-1px);
}

.quotation-tax-mode-section .quotation-exchange-field[hidden] {
    display: none;
}

.quotation-form-shell .form-control,
.quotation-form-shell .form-select {
    min-height: 2.75rem;
    border-color: rgba(217, 224, 232, 0.95);
}

.quotation-form-shell textarea.form-control {
    min-height: 5.6rem;
    resize: vertical;
}

.quotation-form-shell .input-group > .form-control,
.quotation-form-shell .input-group > .form-select,
.quotation-form-shell .input-group > .input-group-text {
    min-height: 2.75rem;
}

.quotation-address-card .quotation-field .form-control,
.quotation-address-card .quotation-field .form-select {
    min-height: 3rem;
    font-size: 1rem;
}

.quotation-address-card .quotation-field textarea.form-control {
    min-height: 6.25rem;
}

.quotation-entry-table {
    width: 100%;
    min-width: 1240px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

.quotation-entry-table .quotation-entry-col-select {
    width: 13.5rem;
}

.quotation-entry-table .quotation-entry-col-hsn {
    width: 7.1rem;
}

.quotation-entry-table .quotation-entry-col-qty {
    width: 4.8rem;
}

.quotation-entry-table .quotation-entry-col-money {
    width: 7.5rem;
}

.quotation-entry-table .quotation-entry-col-discount {
    width: 10.6rem;
}

.quotation-entry-table .quotation-entry-col-money-wide {
    width: 8.2rem;
}

.quotation-entry-table .quotation-entry-col-tax {
    width: 6.8rem;
}

.quotation-entry-table .quotation-entry-col-total {
    width: 7.6rem;
}

.quotation-entry-table .quotation-entry-col-action {
    width: 8.5rem;
}

.quotation-entry-table th,
.quotation-entry-table td {
    vertical-align: middle;
    padding: 0.72rem 0.5rem;
    white-space: nowrap;
}

.quotation-entry-table tbody td {
    height: 5.35rem;
}

.quotation-entry-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid rgba(217, 224, 232, 0.96);
    background: #f3f7f8;
    color: #475467;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

.quotation-entry-table .quote-rate,
.quotation-entry-table .quote-discount-amount,
.quotation-entry-table .quote-total,
.quotation-entry-table .quote-hsn[readonly],
.quotation-entry-table .quote-unit-price[readonly],
.quotation-entry-table .quote-tax[readonly] {
    background: #f8fafc;
    color: var(--ink);
    font-weight: 750;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.quotation-entry-table .form-control,
.quotation-entry-table .form-select {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 2.75rem;
    margin: 0;
    padding-inline: 0.54rem;
}

.quotation-entry-table .quote-item-select {
    min-width: 0;
    text-align: left;
}

.quotation-entry-table .quote-hsn {
    text-align: left;
}

.quotation-entry-table .quote-qty {
    text-align: center;
}

.quotation-entry-table .quote-unit-price,
.quotation-entry-table .quote-rate,
.quotation-entry-table .quote-discount-value,
.quotation-entry-table .quote-discount-amount,
.quotation-entry-table .quote-tax,
.quotation-entry-table .quote-total {
    text-align: right;
}

.quotation-entry-table .input-group {
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    align-items: stretch;
}

.quotation-entry-table .quote-discount-type {
    flex: 0 0 3.6rem;
    width: 3.6rem;
    min-width: 3.6rem;
}

.quotation-entry-table .quote-discount-value {
    min-width: 0;
}

.quotation-entry-table .quote-total {
    display: block;
    justify-content: initial;
    gap: 0;
    margin: 0;
    border-radius: 0.55rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(240, 253, 250, 0.86)),
        #f0fdfa;
    color: var(--primary-deep);
    font-weight: 850;
    line-height: 1.35;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.quotation-entry-table .quote-remove-line {
    min-width: 0;
    width: 100%;
    padding-inline: 0.58rem;
}

.quotation-entry-table td:last-child {
    text-align: center;
}

.quotation-line-table-shell,
.table-shell.quotation-line-table-shell {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    touch-action: pan-x pan-y;
    border: 1px solid rgba(217, 224, 232, 0.8);
    border-radius: var(--radius);
    background: #fff;
}

.quotation-line-table-shell::-webkit-scrollbar {
    width: 0.7rem;
    height: 0.7rem;
}

.quotation-line-table-shell::-webkit-scrollbar-track {
    background: #eef4f6;
    border-radius: 999px;
}

.quotation-line-table-shell::-webkit-scrollbar-thumb {
    border: 2px solid #eef4f6;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.42);
}

.quotation-line-table-shell::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 118, 110, 0.62);
}

.quotation-line-section {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.quotation-line-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.quotation-line-title {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.quotation-line-title h2 {
    font-weight: 850;
}

.quotation-add-item-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 2.75rem;
    min-width: 9.5rem;
    padding: 0.72rem 1.05rem;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(76, 188, 225, 0.98), rgba(15, 118, 110, 0.98)),
        var(--primary);
    color: #fff;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 14px 30px rgba(15, 118, 110, 0.2);
    animation: quotationAddItemIn 0.34s ease 0.08s both;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.quotation-add-item-btn::before {
    content: "";
    position: absolute;
    inset: -70% auto -70% -40%;
    width: 42%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: skewX(-18deg) translateX(-130%);
    transition: transform 0.58s ease;
}

.quotation-add-item-btn i,
.quotation-add-item-btn span {
    position: relative;
    z-index: 1;
}

.quotation-add-item-btn i {
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    font-size: 0.82rem;
}

.quotation-add-item-btn:hover,
.quotation-add-item-btn:focus {
    background:
        linear-gradient(135deg, rgba(56, 189, 248, 1), rgba(17, 94, 89, 1)),
        var(--primary-deep);
    color: #fff;
    box-shadow: 0 18px 38px rgba(15, 118, 110, 0.28);
    transform: translateY(-2px);
}

.quotation-add-item-btn:hover::before,
.quotation-add-item-btn:focus::before {
    transform: skewX(-18deg) translateX(360%);
}

.quotation-line-empty-state {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 6.4rem;
    padding: 1.25rem;
    border: 1px dashed rgba(15, 118, 110, 0.26);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(223, 245, 241, 0.36)),
        #fff;
    color: var(--ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    animation: quotationFieldIn 0.32s ease both;
}

.quotation-line-empty-state .icon-box {
    flex: 0 0 auto;
}

.quotation-line-empty-state > div {
    min-width: 0;
}

.quotation-line-empty-state strong {
    display: block;
    font-weight: 850;
    line-height: 1.2;
}

.quotation-line-empty-state p {
    margin: 0.28rem 0 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.35;
}

.quotation-line-row {
    animation: quotationLineIn 0.26s ease both;
}

.quotation-line-row:hover {
    background: #f8fcfb;
}

body.machine-dialog-open {
    overflow: hidden;
}

.quotation-machine-modal {
    --quotation-dialog-gutter: clamp(0.55rem, 2vw, 1rem);
    display: none;
}

.quotation-machine-modal.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    z-index: 1060;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: var(--quotation-dialog-gutter);
    overflow-x: hidden;
    overflow-y: hidden;
    background: rgba(24, 34, 48, 0.48);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.quotation-machine-modal .modal-dialog {
    width: 100%;
    max-width: 980px;
}

.quotation-machine-modal.is-open .modal-dialog {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex: 0 1 980px;
    min-height: 0;
    max-height: 100%;
    margin: 0;
    pointer-events: none;
}

.quotation-machine-modal .modal-content {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    max-height: calc(100vh - (var(--quotation-dialog-gutter) * 2));
    max-height: calc(100dvh - (var(--quotation-dialog-gutter) * 2));
    overflow: hidden;
    border: 1px solid rgba(217, 224, 232, 0.9);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)),
        var(--surface);
    box-shadow: 0 28px 70px rgba(24, 34, 48, 0.22);
    pointer-events: auto;
}

.quotation-machine-modal.is-open .modal-content,
.quotation-machine-modal.show .modal-content {
    animation: quotationDialogIn 0.28s ease both;
}

.quotation-machine-modal .modal-header,
.quotation-machine-modal .modal-footer {
    border-color: rgba(217, 224, 232, 0.82);
    background: rgba(255, 255, 255, 0.72);
}

.quotation-machine-modal .modal-header {
    align-items: center;
    min-width: 0;
    padding: clamp(0.85rem, 2vw, 1rem) clamp(0.9rem, 2.4vw, 1.2rem);
}

.quotation-machine-modal .modal-body {
    min-height: 0;
    overflow: auto;
    padding: clamp(0.85rem, 2.4vw, 1.15rem);
    scrollbar-gutter: stable;
}

.quotation-machine-modal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: clamp(0.85rem, 2vw, 1rem) clamp(0.9rem, 2.4vw, 1.2rem);
}

.quotation-machine-modal .modal-body::-webkit-scrollbar {
    width: 0.65rem;
}

.quotation-machine-modal .modal-body::-webkit-scrollbar-track {
    background: #eef4f6;
    border-radius: 999px;
}

.quotation-machine-modal .modal-body::-webkit-scrollbar-thumb {
    border: 2px solid #eef4f6;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.42);
}

.quotation-machine-modal .modal-title {
    line-height: 1.15;
    word-break: break-word;
}

.quotation-dialog-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 2.75rem;
    min-width: 9.5rem;
    padding: 0.72rem 1.05rem;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    animation: quotationDialogActionIn 0.3s ease both;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.quotation-dialog-action:nth-child(2) {
    animation-delay: 0.05s;
}

.quotation-dialog-action i,
.quotation-dialog-action span {
    position: relative;
    z-index: 1;
}

.quotation-dialog-action i {
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    font-size: 0.82rem;
}

.quotation-dialog-save {
    background:
        linear-gradient(135deg, rgba(76, 188, 225, 0.98), rgba(15, 118, 110, 0.98)),
        var(--primary);
    color: #fff;
    box-shadow: 0 14px 30px rgba(15, 118, 110, 0.2);
}

.quotation-dialog-save::before {
    content: "";
    position: absolute;
    inset: -70% auto -70% -40%;
    width: 42%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: skewX(-18deg) translateX(-130%);
    transition: transform 0.58s ease;
}

.quotation-dialog-save i {
    background: rgba(255, 255, 255, 0.2);
}

.quotation-dialog-save:hover,
.quotation-dialog-save:focus {
    background:
        linear-gradient(135deg, rgba(56, 189, 248, 1), rgba(17, 94, 89, 1)),
        var(--primary-deep);
    color: #fff;
    box-shadow: 0 18px 38px rgba(15, 118, 110, 0.28);
    transform: translateY(-2px);
}

.quotation-dialog-save:hover::before,
.quotation-dialog-save:focus::before {
    transform: skewX(-18deg) translateX(360%);
}

.quotation-dialog-cancel {
    border: 1px solid rgba(217, 224, 232, 0.9);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.88)),
        #fff;
    color: #344054;
    box-shadow: 0 10px 24px rgba(24, 34, 48, 0.08);
}

.quotation-dialog-cancel i {
    background: rgba(52, 64, 84, 0.08);
}

.quotation-dialog-cancel:hover,
.quotation-dialog-cancel:focus {
    border-color: rgba(220, 38, 38, 0.26);
    background: #fff5f5;
    color: #991b1b;
    box-shadow: 0 14px 30px rgba(220, 38, 38, 0.1);
    transform: translateY(-2px);
}

.quotation-dialog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.8vw, 1rem);
    align-items: start;
}

.quotation-dialog-field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.quotation-dialog-field-wide {
    grid-column: 1 / -1;
}

.quotation-dialog-field .form-label {
    margin: 0;
    color: #344054;
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1.2;
}

.quotation-dialog-field .form-control,
.quotation-dialog-field .form-select {
    min-height: 2.85rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.9)),
        #fff;
}

.quotation-dialog-field .input-group {
    flex-wrap: nowrap;
}

.quotation-dialog-field .quote-dialog-discount-type {
    flex: 0 0 4.25rem;
    max-width: 4.25rem;
}

.quotation-dialog-field .quote-dialog-hsn[readonly],
.quotation-dialog-field .quote-dialog-unit-price[readonly],
.quotation-dialog-field .quote-dialog-rate[readonly],
.quotation-dialog-field .quote-dialog-discount-amount[readonly],
.quotation-dialog-field .quote-dialog-total[readonly] {
    background: #f8fafc;
    color: var(--ink);
    font-weight: 750;
}

.quotation-exchange-section {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) minmax(16rem, 28rem);
    align-items: center;
    justify-content: stretch;
    gap: 1rem;
}

.quotation-exchange-title {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.quotation-exchange-title h2 {
    font-weight: 850;
}

.quotation-exchange-controls {
    display: grid;
    gap: 0.8rem;
    min-width: 0;
}

.quotation-exchange-field,
.quotation-bank-field {
    display: grid;
    gap: 0.42rem;
    min-width: 0;
}

.quotation-exchange-field .form-label,
.quotation-bank-field .form-label {
    margin: 0;
    color: #344054;
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1.2;
}

.quotation-exchange-field .form-control,
.quotation-bank-field .form-select {
    min-height: 3rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.9)),
        #fff;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.quotation-exchange-field:focus-within .form-label,
.quotation-bank-field:focus-within .form-label {
    color: var(--primary-deep);
}

.quotation-summary-layout {
    display: grid;
    grid-template-columns: minmax(18rem, 0.9fr) minmax(0, 2fr);
    gap: 1rem;
    align-items: stretch;
}

.quotation-text-panels {
    display: grid;
    gap: 1rem;
    align-content: stretch;
}

.quotation-payment-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.5rem;
    align-content: stretch;
    min-height: 100%;
    padding: 1rem;
    border: 1px solid rgba(217, 224, 232, 0.84);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.46)),
        #fff;
    box-shadow: 0 14px 32px rgba(24, 34, 48, 0.06);
    animation: quotationSummaryTileIn 0.32s ease both;
}

.quotation-note-panel {
    animation-delay: 0.06s;
}

.quotation-payment-panel .form-label {
    display: flex;
    align-items: center;
    min-height: 1.18rem;
    margin: 0;
    color: #344054;
    font-size: 0.86rem;
    font-weight: 850;
    line-height: 1.2;
}

.quotation-payment-panel .form-control {
    width: 100%;
    min-height: 7rem;
    height: 100%;
    padding: 0.68rem 0.82rem;
    resize: vertical;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.9)),
        #fff;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.45;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.quotation-payment-panel .form-control::placeholder {
    color: #667085;
    font-size: 1rem;
    font-weight: 650;
    opacity: 0.9;
}

.quotation-payment-panel:focus-within .form-label {
    color: var(--primary-deep);
}

.quotation-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.quotation-summary-column {
    display: grid;
    grid-auto-rows: minmax(7.25rem, 1fr);
    gap: 0.85rem;
    min-width: 0;
    animation: quotationSummaryTileIn 0.32s ease both;
}

.quotation-summary-column:nth-child(2) {
    animation-delay: 0.05s;
}

.quotation-summary-column:nth-child(3) {
    animation-delay: 0.1s;
}

.quotation-summary-section .summary-tile {
    display: grid;
    align-content: center;
    height: 100%;
    min-height: 7.25rem;
    padding: 1rem;
    border: 1px solid rgba(217, 224, 232, 0.84);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(223, 245, 241, 0.32)),
        #fff;
    box-shadow: 0 14px 32px rgba(24, 34, 48, 0.06);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.quotation-summary-section .summary-tile:hover {
    transform: translateY(-1px);
    border-color: rgba(20, 184, 166, 0.32);
    box-shadow: 0 12px 26px rgba(24, 34, 48, 0.08);
}

.quotation-summary-section .quotation-inr-tile:not([hidden]) {
    animation: quotationSummaryTileIn 0.24s ease both;
}

.quotation-summary-section .summary-tile p {
    margin: 0 0 0.55rem;
    font-weight: 750;
}

.quotation-summary-section .metric-sm {
    line-height: 1.1;
    word-break: break-word;
}

.quotation-summary-section .metric-sm.is-not-defined {
    color: var(--muted);
    font-size: 1.05rem;
    font-weight: 850;
    letter-spacing: 0;
}

.quotation-form-actions {
    position: relative;
    z-index: 2;
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    width: max-content;
    max-width: 100%;
    margin-top: 0.25rem;
    padding: 0.5rem;
    border: 1px solid rgba(217, 224, 232, 0.8);
    border-radius: 0.9rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.86)),
        rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 42px rgba(24, 34, 48, 0.14);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: quotationActionsIn 0.36s ease 0.14s both;
}

.quotation-action-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    min-width: auto;
    overflow: hidden;
    padding: 0.72rem 0.95rem;
    border-radius: 999px;
    font-weight: 850;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    animation: quotationActionButtonIn 0.28s ease both;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.quotation-action-btn:nth-child(2) {
    animation-delay: 0.05s;
}

.quotation-action-btn i {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.quotation-action-btn:hover,
.quotation-action-btn:focus {
    transform: translateY(-2px);
    text-decoration: none !important;
}

.quotation-action-btn:active {
    transform: translateY(0) scale(0.98);
}

.quotation-action-save {
    min-width: 10.25rem;
    border: 0;
    background:
        linear-gradient(135deg, rgba(76, 188, 225, 0.98), rgba(15, 118, 110, 0.98)),
        var(--primary);
    color: #fff !important;
    box-shadow: 0 14px 28px rgba(15, 118, 110, 0.22);
}

.quotation-action-save::before {
    content: "";
    position: absolute;
    inset: -70% auto -70% -44%;
    width: 45%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
    transform: skewX(-18deg) translateX(-130%);
    transition: transform 0.45s ease;
}

.quotation-action-save:hover,
.quotation-action-save:focus {
    background:
        linear-gradient(135deg, rgba(76, 188, 225, 1), rgba(13, 120, 112, 1)),
        var(--primary-deep);
    color: #fff !important;
    box-shadow: 0 18px 34px rgba(15, 118, 110, 0.28);
}

.quotation-action-save:hover::before,
.quotation-action-save:focus::before {
    transform: skewX(-18deg) translateX(360%);
}

.quotation-action-save:hover i,
.quotation-action-save:focus i {
    transform: translateY(-1px) scale(1.08);
}

.quotation-action-cancel {
    min-width: 8.55rem;
    border: 1px solid rgba(217, 224, 232, 0.96);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.94)),
        #fff;
    color: var(--ink) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 22px rgba(24, 34, 48, 0.08);
}

.quotation-action-cancel:hover,
.quotation-action-cancel:focus {
    border-color: rgba(239, 68, 68, 0.34);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 241, 242, 0.86)),
        #fff;
    color: #b42318 !important;
    box-shadow: 0 16px 30px rgba(180, 35, 24, 0.1);
}

.quotation-action-cancel:hover i,
.quotation-action-cancel:focus i {
    transform: rotate(90deg) scale(1.04);
}

.quotation-preview-shell {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: grid;
    place-items: center;
    padding: clamp(0.75rem, 2.5vw, 1.75rem);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.quotation-preview-shell.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.quotation-preview-backdrop {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(24, 34, 48, 0.18), rgba(24, 34, 48, 0.46)),
        rgba(24, 34, 48, 0.32);
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
}

.quotation-preview-dialog {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(100%, 72rem);
    max-height: min(90dvh, 52rem);
    overflow: hidden;
    overflow: clip;
    border: 1px solid rgba(217, 224, 232, 0.86);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 34px 90px rgba(24, 34, 48, 0.28);
    opacity: 0;
    transform: translateY(18px) scale(0.97);
}

.quotation-preview-shell.is-open .quotation-preview-dialog {
    animation: quotationPreviewDialogIn 0.32s cubic-bezier(.18,.89,.32,1.12) both;
}

.quotation-preview-dialog:focus {
    outline: none;
}

.quotation-preview-close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border: 1px solid rgba(217, 224, 232, 0.86);
    border-radius: 50%;
    background: #fff;
    color: var(--muted);
    transition: transform 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.quotation-preview-close:hover,
.quotation-preview-close:focus {
    color: var(--ink);
    box-shadow: 0 10px 20px rgba(24, 34, 48, 0.1);
    transform: rotate(90deg);
}

.quotation-preview-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.8rem;
    align-items: center;
    padding: 1.15rem 3.8rem 1rem 1.15rem;
    border-bottom: 1px solid var(--line-soft);
    background:
        linear-gradient(135deg, rgba(243, 250, 249, 0.98), rgba(239, 246, 255, 0.92)),
        #f8fbfc;
}

.quotation-preview-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius);
    background: #fff;
    color: var(--primary-deep);
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.12), 0 12px 24px rgba(15, 118, 110, 0.12);
    animation: quotationPreviewIconPop 0.45s ease 0.12s both;
}

.quotation-preview-kicker {
    display: block;
    color: var(--primary-deep);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.quotation-preview-heading h2 {
    margin: 0.15rem 0 0;
    color: var(--ink);
    font-size: 1.35rem;
    font-weight: 900;
}

.quotation-preview-body {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: max-content;
    gap: 0.8rem;
    align-items: start;
    overflow: auto;
    min-height: 0;
    padding: clamp(0.85rem, 1.6vw, 1.15rem);
    background: #f8fafc;
    scrollbar-gutter: stable;
}

.quotation-preview-section {
    grid-column: span 4;
    align-self: start;
    min-width: 0;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: #fff;
    overflow: hidden;
    overflow: clip;
    box-shadow: 0 12px 28px rgba(24, 34, 48, 0.06);
    animation: quotationPreviewSectionIn 0.28s ease both;
}

.quotation-preview-section:nth-child(2) {
    animation-delay: 0.04s;
}

.quotation-preview-section:nth-child(3) {
    animation-delay: 0.08s;
}

.quotation-preview-section:nth-child(4) {
    animation-delay: 0.12s;
}

.quotation-preview-section:nth-child(5) {
    animation-delay: 0.16s;
}

.quotation-preview-wide {
    grid-column: 1 / -1;
}

.quotation-preview-section h3 {
    margin: 0;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--line-soft);
    background: linear-gradient(180deg, #fff, #f8fbfc);
    color: #344054;
    font-size: 0.84rem;
    font-weight: 900;
}

.quotation-preview-list,
.quotation-preview-summary {
    display: grid;
    gap: 0.05rem;
    margin: 0;
    padding: 0.75rem 0.85rem;
}

.quotation-preview-list > div,
.quotation-preview-summary > div {
    display: grid;
    grid-template-columns: minmax(6.8rem, 34%) minmax(0, 1fr);
    gap: 0.65rem;
    padding-block: 0.52rem;
    border-bottom: 1px solid rgba(237, 241, 245, 0.9);
    align-items: start;
}

.quotation-preview-list > div:last-child,
.quotation-preview-summary > div:last-child {
    border-bottom: 0;
}

.quotation-preview-list dt,
.quotation-preview-summary dt {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.quotation-preview-list dd,
.quotation-preview-summary dd {
    margin: 0;
    min-width: 0;
    color: var(--ink);
    font-weight: 750;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.quotation-preview-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}

.quotation-preview-summary > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
    min-height: 5.2rem;
    padding: 0.8rem;
    border: 1px solid rgba(217, 224, 232, 0.78);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.88)),
        #fff;
}

.quotation-preview-summary > div:last-child {
    border-bottom: 1px solid rgba(217, 224, 232, 0.78);
}

.quotation-preview-summary dd {
    font-size: 1rem;
    font-weight: 900;
}

.quotation-preview-table-shell {
    overflow-x: auto;
    scrollbar-gutter: stable;
}

.quotation-preview-table {
    width: 100%;
    min-width: 54rem;
    border-collapse: separate;
    border-spacing: 0;
}

.quotation-preview-table th,
.quotation-preview-table td {
    padding: 0.72rem 0.85rem;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink);
    font-size: 0.9rem;
    vertical-align: top;
}

.quotation-preview-table th {
    background: #f8fbfc;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.quotation-preview-table tbody tr {
    animation: quotationPreviewRowIn 0.24s ease both;
}

.quotation-preview-table tbody tr:nth-child(2) {
    animation-delay: 0.035s;
}

.quotation-preview-table tbody tr:nth-child(3) {
    animation-delay: 0.07s;
}

.quotation-preview-table tbody tr:nth-child(4) {
    animation-delay: 0.105s;
}

.quotation-preview-table tbody tr:hover td {
    background: rgba(243, 250, 249, 0.72);
}

.quotation-preview-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    padding: 0.95rem 1rem;
    border-top: 1px solid var(--line-soft);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), #fff),
        #fff;
    box-shadow: 0 -14px 26px rgba(24, 34, 48, 0.05);
}

.quotation-preview-edit,
.quotation-preview-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.8rem;
    padding: 0.75rem 1rem;
    overflow: hidden;
    border-radius: 999px;
    font-weight: 900;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.quotation-preview-edit::before,
.quotation-preview-submit::before {
    content: "";
    position: absolute;
    inset: -70% auto -70% -42%;
    width: 42%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58), transparent);
    transform: skewX(-18deg) translateX(-130%);
    transition: transform 0.44s ease;
    pointer-events: none;
}

.quotation-preview-edit > *,
.quotation-preview-submit > * {
    position: relative;
    z-index: 1;
}

.quotation-preview-edit {
    border: 1px solid rgba(217, 224, 232, 0.96);
    background: #fff;
    color: var(--ink);
}

.quotation-preview-edit:hover,
.quotation-preview-edit:focus {
    border-color: rgba(37, 99, 235, 0.32);
    background: linear-gradient(180deg, #fff, rgba(239, 246, 255, 0.9));
    color: #1d4ed8;
    box-shadow: 0 14px 26px rgba(37, 99, 235, 0.12);
}

.quotation-preview-submit {
    border: 0;
    background: linear-gradient(135deg, rgba(76, 188, 225, 0.98), rgba(15, 118, 110, 0.98));
    color: #fff;
    box-shadow: 0 16px 30px rgba(15, 118, 110, 0.22);
}

.quotation-preview-edit:hover,
.quotation-preview-edit:focus,
.quotation-preview-submit:hover,
.quotation-preview-submit:focus {
    transform: translateY(-1px);
}

.quotation-preview-submit:hover,
.quotation-preview-submit:focus {
    box-shadow: 0 20px 38px rgba(15, 118, 110, 0.28);
}

.quotation-preview-edit:hover::before,
.quotation-preview-edit:focus::before,
.quotation-preview-submit:hover::before,
.quotation-preview-submit:focus::before {
    transform: skewX(-18deg) translateX(360%);
}

.quotation-preview-edit:hover i,
.quotation-preview-edit:focus i {
    transform: rotate(-8deg) scale(1.08);
}

.quotation-preview-submit:hover i,
.quotation-preview-submit:focus i {
    transform: scale(1.12);
}

.quotation-preview-edit i,
.quotation-preview-submit i {
    transition: transform 0.2s ease;
}

body.quotation-preview-open {
    overflow: hidden;
}

@keyframes quotationPreviewDialogIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes quotationPreviewIconPop {
    from {
        opacity: 0;
        transform: scale(0.82);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes quotationPreviewSectionIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes quotationPreviewRowIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 900px) {
    .quotation-preview-dialog {
        max-height: 92dvh;
    }

    .quotation-preview-body {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .quotation-preview-section {
        grid-column: span 6;
    }

    .quotation-preview-wide {
        grid-column: 1 / -1;
    }

    .quotation-preview-section:nth-child(3) {
        grid-column: 1 / -1;
    }

    .quotation-preview-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .quotation-preview-body {
        grid-template-columns: 1fr;
    }

    .quotation-preview-section,
    .quotation-preview-wide {
        grid-column: 1;
    }

    .quotation-preview-summary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .quotation-preview-shell {
        align-items: stretch;
        padding: 0;
    }

    .quotation-preview-dialog {
        width: 100%;
        max-height: 100dvh;
        min-height: 100dvh;
        border-radius: 0;
        border-inline: 0;
    }

    .quotation-preview-heading {
        grid-template-columns: 1fr;
        padding: 0.95rem 3.35rem 0.85rem 0.95rem;
    }

    .quotation-preview-heading h2 {
        font-size: 1.18rem;
    }

    .quotation-preview-body {
        gap: 0.65rem;
        padding: 0.7rem;
    }

    .quotation-preview-list > div,
    .quotation-preview-summary > div {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .quotation-preview-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 0.75rem;
    }

    .quotation-preview-edit,
    .quotation-preview-submit {
        width: 100%;
    }
}

@keyframes quotationHeaderIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes quotationWorkspaceIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(14px) scale(0.992);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes quotationCardIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.992);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes quotationFieldIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes quotationReferenceIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.992);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes quotationExtraPhoneIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes quotationSummaryTileIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.992);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes quotationDialogIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes quotationAddItemIn {
    from {
        opacity: 0;
        transform: translateX(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes quotationDialogActionIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes quotationLineIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes quotationActionsIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes quotationActionButtonIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes quotationBackButtonIn {
    from {
        opacity: 0;
        transform: translateX(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@media (max-width: 1000px) {
    .quotation-form-header,
    .quotation-form-shell {
        width: 100%;
        margin-left: 0;
        transform: none;
        animation: none;
    }

    .quotation-form-header {
        align-items: stretch;
        padding: 1rem;
    }

    .quotation-dashboard-back-btn {
        width: 100%;
        margin-left: 0;
        justify-content: center;
        padding-inline: 0.95rem;
    }

    .quotation-form-shell {
        padding: 0.75rem;
        box-shadow: var(--shadow-sm);
    }

    .quotation-form-shell > .row > [class*="col-"] {
        padding-inline: 0;
    }

    .quotation-card:hover,
    .quotation-card:focus-within,
    .quotation-summary-section .summary-tile:hover {
        transform: none;
    }

    .quotation-summary-layout {
        grid-template-columns: 1fr;
    }

    .quotation-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .quotation-form-actions {
        justify-self: stretch;
        width: 100%;
        justify-content: flex-end;
        margin-left: 0;
    }

    .quotation-form-actions .btn {
        flex: 0 1 13rem;
        min-width: 0;
    }

    .quotation-machine-modal .modal-dialog {
        width: min(100%, 46rem);
        max-width: 46rem;
    }

    .quotation-dialog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quotation-dialog-field-wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .quotation-contact-section,
    .quotation-contact-grid {
        grid-template-columns: 1fr;
    }

    .quotation-address-header {
        align-items: stretch;
        flex-direction: column;
        min-height: 0;
    }

    .quotation-address-grid {
        grid-template-columns: 1fr;
    }

    .quotation-field,
    .quotation-field-wide {
        grid-column: 1;
    }

    .quotation-copy-toggle {
        justify-content: center;
        width: 100%;
        white-space: normal;
    }

    .quotation-reference-panel {
        grid-template-columns: 1fr;
    }

    .quotation-tax-mode-section {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .quotation-outside-india-toggle {
        width: 100%;
    }

    .quotation-currency-row {
        grid-template-columns: 1fr;
    }

    .quotation-exchange-section {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .quotation-exchange-field,
    .quotation-bank-field {
        width: 100%;
    }

    .quotation-summary-grid {
        grid-template-columns: 1fr;
    }

    .quotation-payment-panel,
    .quotation-summary-section .summary-tile {
        min-height: 0;
    }

    .quotation-label-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .quotation-line-empty-state {
        align-items: flex-start;
    }

    .quotation-line-table-shell,
    .table-shell.quotation-line-table-shell {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: visible;
    }

    .quotation-line-table-shell .quotation-entry-table {
        width: max-content;
        min-width: 1240px;
    }

    .quotation-line-header {
        align-items: stretch;
        flex-direction: column;
    }

    .quotation-add-item-btn {
        width: 100%;
    }

    .quotation-machine-modal.is-open {
        --quotation-dialog-gutter: 0.5rem;
    }

    .quotation-machine-modal.is-open .modal-dialog {
        min-height: 0;
    }

    .quotation-machine-modal .modal-content {
        border-radius: 0.9rem;
    }

    .quotation-machine-modal .modal-header,
    .quotation-machine-modal .modal-footer {
        padding: 0.8rem;
    }

    .quotation-machine-modal .modal-body {
        padding: 0.8rem;
    }

    .quotation-dialog-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .quotation-dialog-field,
    .quotation-dialog-field-wide {
        grid-column: 1;
    }

    .quotation-machine-modal .modal-footer {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .quotation-machine-modal .modal-footer .quotation-dialog-action {
        width: 100%;
    }

    .quotation-dialog-action {
        min-width: 0;
    }

    .quotation-form-actions {
        width: 100%;
        gap: 0.45rem;
        padding: 0.45rem;
    }

    .quotation-form-actions .btn {
        flex: 1 1 0;
    }

    .quotation-action-btn {
        gap: 0.4rem;
        padding-inline: 0.7rem;
        font-size: 0.92rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quotation-form-header,
    .quotation-form-shell,
    .quotation-card,
    .quotation-field,
    .quotation-line-row,
    .quotation-line-empty-state,
    .quotation-add-item-btn,
    .company-form-card,
    .company-form-section,
    .company-form .user-form-actions,
    .company-sign-preview,
    .quotation-machine-modal.show .modal-content,
    .quotation-dialog-action,
    .quotation-reference-title,
    .quotation-reference-field,
    .quotation-payment-panel,
    .quotation-summary-column,
    .quotation-summary-section .summary-tile,
    .quotation-action-btn,
    .quotation-form-actions,
    .quotation-preview-shell.is-open .quotation-preview-dialog,
    .quotation-preview-icon,
    .quotation-preview-section,
    .quotation-preview-table tbody tr,
    .quotation-dashboard-back-btn,
    .quotation-filter-card,
    .quotation-filter-field,
    .quotation-filter-actions,
    .quotation-table tbody tr {
        animation: none;
    }

    .quotation-card,
    .quotation-field .form-control,
    .quotation-field .form-select,
    .quotation-add-phone-btn,
    .quotation-cancel-phone-btn,
    .quotation-add-item-btn,
    .quotation-add-item-btn::before,
    .company-form-section,
    .quotation-dialog-action,
    .quotation-dialog-save::before,
    .quotation-action-btn,
    .quotation-action-save::before,
    .quotation-preview-shell,
    .quotation-preview-close,
    .quotation-preview-edit,
    .quotation-preview-submit,
    .quotation-preview-edit::before,
    .quotation-preview-submit::before,
    .quotation-preview-edit i,
    .quotation-preview-submit i,
    .quotation-copy-toggle,
    .quotation-payment-panel,
    .quotation-summary-section .summary-tile,
    .quotation-dashboard-back-btn,
    .quotation-dashboard-back-btn::before,
    .quotation-dashboard-back-btn i,
    .quotation-filter-card .form-control,
    .quotation-filter-card .form-select,
    .quotation-filter-actions .btn,
    .quotation-table tbody tr {
        transition: none;
    }

    .quotation-field,
    .quotation-preview-dialog,
    .quotation-preview-section,
    .quotation-preview-table tbody tr,
    .quotation-filter-field,
    .quotation-filter-actions,
    .quotation-table tbody tr {
        opacity: 1;
        transform: none;
    }
}

.table {
    color: var(--ink);
    background: transparent;
}

.table-shell {
    overflow: hidden;
}

.user-table-shell {
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(217, 224, 232, 0.82);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.admin-user-management-card {
    width: min(calc(100vw - 2rem), 1520px);
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
    animation: adminUserTableIn 0.48s ease 0.08s both;
}

@keyframes adminUserHeaderIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes dashboardBackButtonIn {
    from {
        opacity: 0;
        transform: translateX(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes adminUserTableIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(14px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

.user-table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-gutter: stable;
}

.quotation-table-shell .user-table-responsive {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}

.user-table-responsive::-webkit-scrollbar {
    height: 0.72rem;
}

.user-table-responsive::-webkit-scrollbar-track {
    background: #edf2f7;
    border-radius: 999px;
}

.user-table-responsive::-webkit-scrollbar-thumb {
    border: 0.18rem solid #edf2f7;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.48);
}

.table > :not(caption) > * > * {
    padding: 1rem 1.1rem;
    border-bottom-color: var(--line-soft);
}

.table thead {
    background: #f2f6f8;
}

.table thead th {
    color: #475467;
    font-size: 0.76rem;
    font-weight: 850;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--line);
}

.table tbody tr:hover {
    background: rgba(15, 118, 110, 0.045);
}

.table td,
.table th {
    vertical-align: middle;
}

.user-table {
    width: 101%;
    min-width: 1480px;
    table-layout: fixed;
}

.user-table .user-col-serial {
    width: 6%;
}

.user-table .user-col-id {
    width: 10%;
}

.user-table .user-col-user {
    width: 15%;
}

.user-table .user-col-name {
    width: 12%;
}

.user-table .user-col-email {
    width: 17%;
}

.user-table .user-col-role {
    width: 13%;
}

.user-table .user-col-status {
    width: 9%;
}

.user-table .user-col-locked {
    width: 9%;
}

.user-table .user-col-actions {
    width: 9%;
}

.user-table td,
.user-table th {
    padding-inline: 1rem;
}

.user-table td {
    overflow-wrap: anywhere;
}

.user-table tr.user-deleted-row td {
    background: rgba(248, 250, 252, 0.72);
    color: #667085;
}

.user-table tr.user-deleted-row .avatar {
    filter: grayscale(1);
    opacity: 0.72;
}

.audit-page-header,
.audit-filter-card,
.audit-log-card {
    --audit-screen-gutter: clamp(0.75rem, 1.5vw, 1.5rem);
    position: relative;
    left: 50%;
    right: 50%;
    width: calc(100vw - (var(--audit-screen-gutter) * 2)) !important;
    max-width: calc(100vw - (var(--audit-screen-gutter) * 2)) !important;
    margin-left: calc(-50vw + var(--audit-screen-gutter)) !important;
    margin-right: calc(-50vw + var(--audit-screen-gutter)) !important;
    transform: none !important;
}

.audit-page-header {
    padding-inline: clamp(0.75rem, 1.8vw, 2rem);
    animation: auditFullScreenIn 0.42s ease both;
}

.audit-filter-card {
    margin-bottom: 1rem;
    animation: auditFullScreenIn 0.44s ease 0.04s both;
}

.audit-filter-card .quotation-filter-grid {
    grid-template-columns: minmax(14rem, 1.4fr) minmax(10rem, 1fr) repeat(2, minmax(9rem, 0.8fr)) minmax(11rem, 1fr) minmax(9rem, max-content);
}

.audit-filter-card .quotation-filter-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    align-self: end;
    justify-self: end;
    justify-content: flex-end;
    gap: 0.55rem;
    min-width: 0;
}

.audit-filter-card .quotation-filter-actions .btn {
    min-width: 8.4rem;
    min-height: 2.75rem;
    border-radius: var(--radius);
    flex: none;
}

.audit-filter-card .quotation-filter-actions .btn-primary {
    color: #fff;
}

.audit-filter-card .quotation-filter-actions .btn-outline-secondary {
    background: #fff;
}

.audit-log-card {
    border-left: 1px solid rgba(217, 224, 232, 0.82);
    border-right: 1px solid rgba(217, 224, 232, 0.82);
    border-radius: var(--radius);
    overflow: hidden;
    animation: auditFullScreenIn 0.48s ease 0.08s both;
}

.audit-log-card .user-table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-gutter: auto;
}

.audit-table {
    width: 100%;
    min-width: 92rem;
    table-layout: fixed;
}

.audit-table .audit-col-serial {
    width: 4%;
}

.audit-table .audit-col-log-id {
    width: 10.5%;
}

.audit-table .audit-col-ip {
    width: 10.5%;
}

.audit-table .audit-col-time {
    width: 8%;
}

.audit-table .audit-col-device {
    width: 14%;
}

.audit-table .audit-col-action {
    width: 20%;
}

.audit-table .audit-col-created-by {
    width: 15%;
}

.audit-table .audit-col-country {
    width: 9%;
}

.audit-table .audit-col-city {
    width: 9%;
}

.audit-table th,
.audit-table td {
    padding-inline: clamp(0.45rem, 0.7vw, 0.8rem);
    vertical-align: top;
    overflow-wrap: anywhere;
}

.audit-table thead th {
    background: linear-gradient(180deg, #f8fbfc, #eef4f6);
    color: #475467;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.audit-log-id {
    display: inline-flex;
    align-items: center;
    min-height: 1.9rem;
    padding: 0.25rem 0.58rem;
    border-radius: 6px;
    background: #e8f3f1;
    color: #0f766e;
    font-weight: 900;
    white-space: nowrap;
}

.audit-device-info {
    display: block;
    max-height: 5.8rem;
    margin: 0;
    overflow: hidden;
    color: #344054;
    font-family: inherit;
    font-size: 0.82rem;
    line-height: 1.35;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.audit-action-cell {
    display: grid;
    gap: 0.65rem;
    min-width: 0;
}

.audit-action-cell > strong {
    color: #182230;
    font-size: 0.92rem;
}

.audit-change-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: 0.6rem;
}

.audit-change-grid section {
    min-width: 0;
    border: 1px solid rgba(188, 199, 213, 0.8);
    border-radius: 6px;
    background: #f8fbfc;
    overflow: hidden;
}

.audit-change-grid span {
    display: block;
    padding: 0.4rem 0.55rem;
    border-bottom: 1px solid rgba(188, 199, 213, 0.62);
    color: #475467;
    font-size: 0.72rem;
    font-weight: 900;
}

.audit-change-grid pre {
    max-height: 9rem;
    margin: 0;
    padding: 0.55rem;
    overflow: auto;
    color: #182230;
    font-family: inherit;
    font-size: 0.78rem;
    line-height: 1.35;
    white-space: pre-wrap;
}

@media (max-width: 1000px) {
    .audit-page-header,
    .audit-filter-card,
    .audit-log-card {
        --audit-screen-gutter: 0.75rem;
        width: calc(100vw - (var(--audit-screen-gutter) * 2));
        max-width: calc(100vw - (var(--audit-screen-gutter) * 2));
        margin-left: calc(-50vw + var(--audit-screen-gutter));
        margin-right: calc(-50vw + var(--audit-screen-gutter));
        transform: none;
        animation: none;
    }

    .audit-table {
        min-width: 92rem;
    }
}

@keyframes auditFullScreenIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.machine-table {
    width: 101%;
    min-width: 1420px;
    table-layout: fixed;
}

.machine-table .machine-col-serial {
    width: 5%;
}

.machine-table .machine-col-id {
    width: 10%;
}

.machine-table .machine-col-name {
    width: 16%;
}

.machine-table .machine-col-hsn {
    width: 9%;
}

.machine-table .machine-col-rate {
    width: 10%;
}

.machine-table .machine-col-gst {
    width: 7%;
}

.machine-table .machine-col-status {
    width: 9%;
}

.machine-table .machine-col-created {
    width: 10%;
}

.machine-table .machine-col-created-at {
    width: 11%;
}

.machine-table .machine-col-action {
    width: 13%;
}

.catalog-id-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.85rem;
    padding: 0.24rem 0.52rem;
    border-radius: 6px;
    background: #e8f3f1;
    color: #0f766e;
    font-weight: 900;
    white-space: nowrap;
}

.machine-table th,
.machine-table td {
    padding-inline: clamp(0.8rem, 1.5vw, 1.2rem);
}

.machine-table .table-actions {
    min-width: 0;
    width: 100%;
    justify-content: flex-start;
    gap: 0.45rem;
}

.machine-table .table-actions .btn {
    min-width: 0;
}

.bank-table-responsive {
    width: 100%;
    max-width: 100%;
    scrollbar-gutter: auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.bank-table {
    width: 100%;
    min-width: 72rem;
    table-layout: fixed;
}

.bank-table .bank-col-serial {
    width: 5.5rem;
}

.bank-table .bank-col-id {
    width: 8.75rem;
}

.bank-table .bank-col-account {
    width: 16rem;
}

.bank-table .bank-col-bank {
    width: 15rem;
}

.bank-table .bank-col-number {
    width: 16rem;
}

.bank-table .bank-col-ifsc {
    width: 10.5rem;
}

.bank-table .bank-col-status {
    width: 8.5rem;
}

.bank-table .bank-col-action {
    width: 7.5rem;
}

.bank-table th,
.bank-table td {
    padding-inline: clamp(0.8rem, 1.5vw, 1.2rem);
}

.bank-table .table-actions {
    min-width: 0;
    width: 100%;
    justify-content: flex-start;
}

.bank-table .table-actions .btn {
    min-width: 0;
}

.bank-table td:nth-child(5),
.bank-table td:nth-child(6) {
    white-space: nowrap;
}

.customer-table-responsive {
    width: 100%;
    max-width: 100%;
    scrollbar-gutter: auto;
}

.customer-table {
    width: 100%;
    min-width: 100%;
    table-layout: fixed;
}

.customer-table .customer-col-serial {
    width: 8%;
}

.customer-table .customer-col-company {
    width: 24%;
}

.customer-table .customer-col-contact {
    width: 22%;
}

.customer-table .customer-col-quotation {
    width: 30%;
}

.customer-table .customer-col-created {
    width: 16%;
}

.customer-table th,
.customer-table td {
    padding-inline: clamp(0.8rem, 1.5vw, 1.2rem);
}

.customer-contact-cell {
    display: grid;
    gap: 0.2rem;
}

.customer-contact-cell strong {
    color: var(--ink);
}

.customer-contact-cell span {
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.quotation-filter-card {
    position: relative;
    width: min(calc(100vw - 2rem), 1360px);
    max-width: none;
    margin-left: 50%;
    margin-bottom: 1.05rem;
    padding: clamp(1rem, 1.7vw, 1.35rem);
    overflow: hidden;
    border: 1px solid rgba(188, 221, 218, 0.9);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(243, 250, 249, 0.92)),
        var(--surface);
    box-shadow: 0 18px 44px rgba(24, 34, 48, 0.08);
    transform: translateX(-50%);
    animation: quotationFilterIn 0.42s ease 0.04s both;
}

.quotation-list-header,
.quotation-list-filter,
.quotation-list-card {
    --quotation-list-gutter: clamp(0.75rem, 2vw, 2rem);
    width: min(calc(100vw - (var(--quotation-list-gutter) * 2)), 1680px);
}

.quotation-list-card {
    max-width: none;
}

.quotation-filter-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.32rem;
    background: linear-gradient(180deg, var(--primary), rgba(76, 188, 225, 0.95));
}

.quotation-filter-grid {
    display: grid;
    grid-template-columns: minmax(14rem, 1.35fr) repeat(4, minmax(9rem, 1fr)) minmax(6.8rem, auto);
    gap: clamp(0.75rem, 1.2vw, 1rem);
    align-items: end;
    position: relative;
    z-index: 1;
}

.quotation-filter-field {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
    animation: quotationFilterFieldIn 0.34s ease both;
}

.quotation-filter-field:nth-child(2) {
    animation-delay: 0.04s;
}

.quotation-filter-field:nth-child(3) {
    animation-delay: 0.08s;
}

.quotation-filter-field:nth-child(4) {
    animation-delay: 0.12s;
}

.quotation-filter-field:nth-child(5) {
    animation-delay: 0.16s;
}

.quotation-filter-card .form-label {
    margin-bottom: 0;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 850;
}

.quotation-filter-card .form-control,
.quotation-filter-card .form-select {
    min-height: 2.65rem;
    border-color: rgba(188, 199, 213, 0.86);
    border-radius: 0.65rem;
    background-color: rgba(255, 255, 255, 0.92);
    color: var(--ink);
    font-weight: 650;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}

.quotation-filter-card .form-control:hover,
.quotation-filter-card .form-select:hover {
    border-color: rgba(15, 118, 110, 0.34);
    background-color: #fff;
}

.quotation-filter-card .form-control:focus,
.quotation-filter-card .form-select:focus {
    border-color: rgba(15, 118, 110, 0.48);
    box-shadow: 0 0 0 0.2rem rgba(15, 118, 110, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.96);
    transform: translateY(-1px);
}

.quotation-filter-input-icon {
    position: relative;
}

.quotation-filter-input-icon i {
    position: absolute;
    top: 50%;
    left: 0.9rem;
    color: var(--muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.quotation-filter-input-icon .form-control {
    padding-left: 2.35rem;
}

.quotation-filter-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: max-content;
    animation: quotationFilterFieldIn 0.34s ease 0.2s both;
}

.quotation-filter-actions .btn {
    min-height: 2.65rem;
    padding-inline: 1rem;
    border-radius: 999px;
    font-weight: 850;
    white-space: nowrap;
}

.quotation-filter-actions .btn-primary {
    border: 0;
    background:
        linear-gradient(135deg, rgba(76, 188, 225, 0.98), rgba(15, 118, 110, 0.98)),
        var(--primary);
    box-shadow: 0 14px 26px rgba(15, 118, 110, 0.22);
}

.quotation-filter-actions .btn-primary:hover,
.quotation-filter-actions .btn-primary:focus {
    background:
        linear-gradient(135deg, rgba(56, 189, 248, 1), rgba(17, 94, 89, 1)),
        var(--primary-deep);
    box-shadow: 0 18px 34px rgba(15, 118, 110, 0.28);
    transform: translateY(-1px);
}

.quotation-filter-actions .btn-outline-secondary {
    border-color: rgba(102, 112, 133, 0.24);
    background: rgba(255, 255, 255, 0.76);
    color: var(--muted);
}

.quotation-filter-actions .btn-outline-secondary:hover,
.quotation-filter-actions .btn-outline-secondary:focus {
    border-color: rgba(15, 118, 110, 0.24);
    background: var(--primary-soft);
    color: var(--primary-deep);
}

@keyframes quotationFilterIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(12px) scale(0.992);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes quotationFilterFieldIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.customer-quotation-links {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.customer-quotation-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.38rem 0.58rem;
    border: 1px solid rgba(15, 118, 110, 0.16);
    border-radius: 999px;
    background: rgba(223, 245, 241, 0.72);
    color: var(--primary-deep);
    font-size: 0.86rem;
    font-weight: 850;
    text-decoration: none !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.customer-quotation-link:hover,
.customer-quotation-link:focus {
    border-color: rgba(15, 118, 110, 0.32);
    background: var(--primary-soft);
    color: var(--primary-deep);
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.12);
    transform: translateY(-1px);
}

.quotation-table-shell {
    width: 100%;
    border-color: rgba(188, 221, 218, 0.84);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92)),
        var(--surface);
    box-shadow: 0 18px 44px rgba(24, 34, 48, 0.08);
}

.quotation-table-shell .user-table-responsive {
    border-radius: inherit;
}

.quotation-table {
    --quotation-action-column-width: 18rem;
    width: 101%;
    min-width: 92rem;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

.quotation-table .quotation-col-serial {
    width: 4.5%;
}

.quotation-table .quotation-col-id {
    width: 9%;
}

.quotation-table .quotation-col-customer {
    width: 13%;
}

.quotation-table .quotation-col-contact {
    width: 12%;
}

.quotation-table .quotation-col-country {
    width: 9%;
}

.quotation-table .quotation-col-qty {
    width: 6%;
}

.quotation-table .quotation-col-total {
    width: 9.5%;
}

.quotation-table .quotation-col-created-by {
    width: 8%;
}

.quotation-table .quotation-col-created-at {
    width: 9%;
}

.quotation-table .quotation-col-actions {
    width: var(--quotation-action-column-width);
}

.quotation-table th,
.quotation-table td {
    padding-inline: clamp(0.55rem, 0.9vw, 0.82rem);
    vertical-align: middle;
}

.quotation-table td {
    overflow-wrap: anywhere;
}

.quotation-table thead th {
    border-bottom: 1px solid rgba(188, 199, 213, 0.78);
    background: linear-gradient(180deg, #f8fbfc, #eef4f6);
    color: #475467;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0;
    white-space: nowrap;
}

.quotation-table tbody tr {
    animation: quotationTableRowIn 0.34s ease both;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.quotation-table tbody tr:nth-child(2) {
    animation-delay: 0.035s;
}

.quotation-table tbody tr:nth-child(3) {
    animation-delay: 0.07s;
}

.quotation-table tbody tr:nth-child(4) {
    animation-delay: 0.105s;
}

.quotation-table tbody tr:nth-child(5) {
    animation-delay: 0.14s;
}

.quotation-table tbody tr:hover td {
    background: rgba(243, 250, 249, 0.78);
}

.quotation-table thead th:last-child,
.quotation-table .quotation-action-cell {
    width: var(--quotation-action-column-width);
    background: transparent;
    background-clip: padding-box;
    box-shadow: none;
}

.quotation-table thead th:last-child {
    z-index: 3;
    background: linear-gradient(180deg, #f8fbfc, #eef4f6);
}

.quotation-table .quotation-action-cell {
    z-index: 2;
    text-align: center;
}

.quotation-table tbody tr:hover .quotation-action-cell {
    background: rgba(243, 250, 249, 0.78);
}

.quotation-qty-note,
.quotation-time-note {
    display: block;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 750;
    line-height: 1.35;
}

.table-actions.quotation-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0.42rem;
    min-width: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.quotation-table .quotation-action-btn {
    flex: 1 1 0;
    min-width: 4.75rem;
    min-height: 2.05rem;
    padding: 0.42rem 0.52rem;
    gap: 0.28rem;
    font-size: 0.8rem;
}

.table-actions .btn {
    position: relative;
    min-width: 0;
    overflow: hidden;
    transform: translateY(0);
    animation: tableActionIn 0.32s ease both;
    isolation: isolate;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.table-actions .table-action-btn {
    --table-action-accent: var(--primary);
    --table-action-soft: rgba(15, 118, 110, 0.1);
    --table-action-shadow: rgba(15, 118, 110, 0.16);
    border-color: rgba(15, 118, 110, 0.28);
    border-color: color-mix(in srgb, var(--table-action-accent) 30%, transparent);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.86)),
        #fff;
    color: var(--table-action-accent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.table-actions .table-action-view {
    --table-action-accent: #2563eb;
    --table-action-soft: rgba(37, 99, 235, 0.1);
    --table-action-shadow: rgba(37, 99, 235, 0.18);
    border-color: rgba(37, 99, 235, 0.28);
}

.table-actions .table-action-edit {
    --table-action-accent: #0f766e;
    --table-action-soft: rgba(15, 118, 110, 0.11);
    --table-action-shadow: rgba(15, 118, 110, 0.18);
    border-color: rgba(15, 118, 110, 0.28);
}

.table-actions .table-action-delete {
    --table-action-accent: #dc2626;
    --table-action-soft: rgba(220, 38, 38, 0.1);
    --table-action-shadow: rgba(220, 38, 38, 0.16);
    border-color: rgba(220, 38, 38, 0.28);
}

.table-actions .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.72) 44%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.38s ease;
    pointer-events: none;
}

.table-actions .btn:nth-child(2) {
    animation-delay: 0.04s;
}

.table-actions .btn:nth-child(3) {
    animation-delay: 0.08s;
}

.table-actions .btn i {
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}

.table-actions .btn:hover,
.table-actions .btn:focus {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(24, 34, 48, 0.1);
}

.table-actions .table-action-btn:hover,
.table-actions .table-action-btn:focus {
    border-color: rgba(15, 118, 110, 0.42);
    border-color: color-mix(in srgb, var(--table-action-accent) 44%, transparent);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), var(--table-action-soft)),
        #fff;
    color: var(--table-action-accent);
    box-shadow: 0 12px 24px var(--table-action-shadow);
}

.table-actions .table-action-view:hover,
.table-actions .table-action-view:focus {
    border-color: rgba(37, 99, 235, 0.42);
}

.table-actions .table-action-delete:hover,
.table-actions .table-action-delete:focus {
    border-color: rgba(220, 38, 38, 0.42);
}

.table-actions .btn:hover::before,
.table-actions .btn:focus::before {
    transform: translateX(120%);
}

.table-actions .btn:hover i,
.table-actions .btn:focus i {
    transform: scale(1.08);
}

.table-actions .table-action-btn:hover .bi-eye,
.table-actions .table-action-btn:focus .bi-eye {
    animation: tableViewIconPulse 0.56s ease both;
}

.table-actions .table-action-btn:hover .bi-pencil,
.table-actions .table-action-btn:focus .bi-pencil {
    animation: tableEditIconWiggle 0.5s ease both;
}

.table-actions .table-action-btn:hover .bi-trash,
.table-actions .table-action-btn:focus .bi-trash {
    animation: tableDeleteIconShake 0.46s ease both;
}

.table-actions .btn:focus-visible {
    outline: 3px solid rgba(15, 118, 110, 0.22);
    outline-offset: 2px;
}

@keyframes tableActionIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes tableViewIconPulse {
    0%,
    100% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.2);
    }
}

@keyframes tableEditIconWiggle {
    0%,
    100% {
        transform: rotate(0deg) scale(1);
    }
    35% {
        transform: rotate(-12deg) scale(1.12);
    }
    70% {
        transform: rotate(8deg) scale(1.08);
    }
}

@keyframes tableDeleteIconShake {
    0%,
    100% {
        transform: rotate(0deg) translateX(0) scale(1);
    }
    25% {
        transform: rotate(-8deg) translateX(-1px) scale(1.08);
    }
    55% {
        transform: rotate(9deg) translateX(1px) scale(1.1);
    }
    78% {
        transform: rotate(-4deg) translateX(0) scale(1.04);
    }
}

@keyframes quotationTableRowIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1180px) {
    .quotation-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quotation-filter-search,
    .quotation-filter-actions {
        grid-column: 1 / -1;
    }

    .quotation-filter-actions {
        justify-content: flex-end;
    }
}

@media (max-width: 900px) {
    .quotation-table {
        --quotation-action-column-width: 16rem;
        min-width: 92rem;
    }
}

@media (max-width: 640px) {
    .quotation-filter-grid {
        grid-template-columns: 1fr;
    }

    .quotation-filter-search,
    .quotation-filter-actions {
        grid-column: 1;
    }

    .quotation-filter-actions {
        justify-content: stretch;
    }

    .quotation-filter-actions .btn {
        flex: 1 1 0;
    }

    .quotation-table {
        min-width: 92rem;
    }

    .quotation-table .quotation-col-serial {
        width: 4.8rem;
    }

    .quotation-table .quotation-col-id {
        width: 8.6rem;
    }

    .quotation-table .quotation-col-customer {
        width: 10.8rem;
    }

    .quotation-table .quotation-col-contact {
        width: 10.4rem;
    }

    .quotation-table .quotation-col-country {
        width: 9.4rem;
    }

    .quotation-table .quotation-col-qty {
        width: 6.4rem;
    }

    .quotation-table .quotation-col-total {
        width: 8.6rem;
    }

    .quotation-table .quotation-col-created-by {
        width: 8.4rem;
    }

    .quotation-table .quotation-col-created-at {
        width: 8.6rem;
    }

    .quotation-table .quotation-col-actions {
        width: var(--quotation-action-column-width);
    }

    .quotation-table th,
    .quotation-table td {
        padding-inline: 0.82rem;
    }

    .quotation-table thead th:last-child,
    .quotation-table .quotation-action-cell {
        padding-inline: 0.55rem;
        box-shadow: -6px 0 16px rgba(24, 34, 48, 0.08);
    }

}

.catalog-section-header {
    margin-top: clamp(2rem, 4vw, 3.2rem);
}

.machine-created-date,
.machine-created-time {
    display: block;
    line-height: 1.35;
}

.machine-created-time {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.table-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 7.8rem;
}

.status-badge,
.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.38rem 0.62rem;
    font-size: 0.75rem;
    font-weight: 800;
}

.status-badge.success {
    background: #dcfce7;
    color: #166534;
}

.status-badge.warning {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.deleted {
    background: #fee2e2;
    color: #991b1b;
}

.status-badge.unlocked {
    background: #e0f2fe;
    color: #075985;
}

.status-badge.muted,
.role-badge {
    background: #eef2f7;
    color: #475467;
}

.role-badge.admin,
.role-badge.account,
.role-badge.sales {
    background: var(--primary-soft);
    color: var(--primary-deep);
}

.user-history-badge {
    white-space: normal;
    justify-content: center;
    text-align: center;
}

.alert {
    border-radius: var(--radius);
}

.bg-primary-soft {
    background-color: var(--primary-soft) !important;
}

.text-primary {
    color: var(--primary-deep) !important;
}

.bg-light {
    background-color: #f8fafc !important;
}

.empty-state {
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--muted);
}

.empty-state .icon-box {
    margin-bottom: 0.85rem;
}

.summary-tile {
    padding: 1rem;
    height: 100%;
}

.detail-list {
    display: grid;
    gap: 0.8rem;
    margin: 0;
}

.detail-list dt {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.detail-list dd {
    margin: 0;
    font-weight: 700;
}

.quotation-detail-page {
    width: min(calc(100vw - 2rem), 1360px);
    max-width: 1360px;
    margin-left: auto;
    margin-right: auto;
}

.quotation-detail-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
    animation: quotationDetailToolbarIn 0.34s ease both;
}

.quotation-detail-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.quotation-detail-back,
.quotation-detail-duplicate,
.quotation-detail-pdf {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 7.25rem;
    min-height: 2.75rem;
    padding: 0.68rem 1rem;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 253, 250, 0.82)),
        var(--surface);
    color: var(--primary-deep);
    font-weight: 850;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(15, 118, 110, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.quotation-detail-duplicate {
    border-color: rgba(37, 99, 235, 0.22);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.86)),
        var(--surface);
    color: #1d4ed8;
    cursor: pointer;
}

.quotation-detail-pdf {
    border: 0;
    background:
        linear-gradient(135deg, rgba(76, 188, 225, 0.98), rgba(15, 118, 110, 0.98)),
        var(--primary);
    color: #fff;
    box-shadow: 0 16px 32px rgba(15, 118, 110, 0.24);
}

.quotation-detail-back::before,
.quotation-detail-duplicate::before,
.quotation-detail-pdf::before {
    content: "";
    position: absolute;
    inset: -80% auto -80% -48%;
    z-index: -1;
    width: 42%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
    transform: skewX(-18deg) translateX(-140%);
    transition: transform 0.58s ease;
}

.quotation-detail-back:hover,
.quotation-detail-back:focus,
.quotation-detail-duplicate:hover,
.quotation-detail-duplicate:focus,
.quotation-detail-pdf:hover,
.quotation-detail-pdf:focus {
    border-color: rgba(15, 118, 110, 0.34);
    color: var(--primary);
    box-shadow: 0 16px 34px rgba(15, 118, 110, 0.15);
    transform: translateY(-1px);
}

.quotation-detail-duplicate:hover,
.quotation-detail-duplicate:focus {
    border-color: rgba(37, 99, 235, 0.38);
    color: #1d4ed8;
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.14);
}

.quotation-detail-pdf:hover,
.quotation-detail-pdf:focus {
    color: #fff;
    box-shadow: 0 20px 38px rgba(15, 118, 110, 0.28);
}

.quotation-detail-back:hover::before,
.quotation-detail-back:focus::before,
.quotation-detail-duplicate:hover::before,
.quotation-detail-duplicate:focus::before,
.quotation-detail-pdf:hover::before,
.quotation-detail-pdf:focus::before {
    transform: skewX(-18deg) translateX(360%);
}

.quotation-detail-back i,
.quotation-detail-duplicate i,
.quotation-detail-pdf i {
    transition: transform 0.2s ease;
}

.quotation-detail-back:hover i,
.quotation-detail-back:focus i {
    transform: translateX(-0.18rem);
}

.quotation-detail-duplicate:hover i,
.quotation-detail-duplicate:focus i {
    transform: rotate(-8deg) scale(1.08);
}

.quotation-detail-pdf:hover i,
.quotation-detail-pdf:focus i {
    transform: translateY(-0.08rem);
}

.quotation-detail-back.is-leaving {
    animation: quotationDetailBackLeave 0.16s ease both;
}

.quotation-detail-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
    gap: clamp(1rem, 2vw, 1.35rem);
    align-items: center;
    margin-bottom: 1.1rem;
    padding: clamp(1.1rem, 2.2vw, 1.55rem);
    overflow: hidden;
    border: 1px solid rgba(217, 224, 232, 0.88);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(223, 245, 241, 0.66)),
        var(--surface);
    box-shadow: 0 22px 54px rgba(24, 34, 48, 0.09);
    animation: quotationDetailHeroIn 0.42s ease 0.03s both;
}

.quotation-detail-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 0.28rem;
    background: linear-gradient(90deg, var(--primary), var(--blue), var(--amber));
}

.quotation-detail-title-block,
.quotation-detail-total-card {
    position: relative;
    z-index: 1;
}

.quotation-detail-title {
    margin: 0.8rem 0 0;
    color: var(--ink);
    font-size: 2.15rem;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.quotation-detail-subtitle {
    max-width: 48rem;
    margin: 0.55rem 0 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.55;
}

.quotation-detail-total-card {
    justify-self: end;
    width: 100%;
    padding: 1.1rem;
    border: 1px solid rgba(217, 224, 232, 0.82);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.86)),
        var(--surface);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 18px 36px rgba(24, 34, 48, 0.08);
    text-align: right;
    animation: quotationDetailTotalIn 0.42s ease 0.12s both;
}

.quotation-detail-total {
    margin-top: 0.35rem;
    color: var(--ink);
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.quotation-detail-total-sub {
    margin-top: 0.35rem;
    color: var(--muted);
    font-size: 1rem;
    font-weight: 800;
}

.quotation-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 25rem);
    gap: 1.1rem;
    align-items: start;
}

.quotation-detail-card {
    position: relative;
    min-width: 0;
    padding: clamp(1rem, 2vw, 1.35rem);
    overflow: hidden;
    border: 1px solid rgba(217, 224, 232, 0.86);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.88)),
        var(--surface);
    box-shadow: 0 22px 52px rgba(24, 34, 48, 0.08);
    animation: quotationDetailCardIn 0.42s ease 0.08s both;
}

.quotation-detail-main-card {
    display: grid;
    gap: 1.15rem;
}

.quotation-detail-sidebar {
    display: grid;
    gap: 1rem;
    animation-delay: 0.15s;
}

.quotation-detail-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.quotation-detail-metric {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
    min-height: 6.5rem;
    padding: 0.95rem;
    border: 1px solid rgba(217, 224, 232, 0.72);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.74);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    opacity: 0;
    animation: quotationDetailItemIn 0.34s ease both;
}

.quotation-detail-metric:nth-child(1) {
    animation-delay: 0.12s;
}

.quotation-detail-metric:nth-child(2) {
    animation-delay: 0.16s;
}

.quotation-detail-metric:nth-child(3) {
    animation-delay: 0.2s;
}

.quotation-detail-metric:nth-child(4) {
    animation-delay: 0.24s;
}

.quotation-detail-metric-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 2.35rem;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(223, 245, 241, 0.96), rgba(219, 234, 254, 0.82)),
        var(--primary-soft);
    color: var(--primary-deep);
}

.quotation-detail-metric strong,
.quotation-detail-metric span:not(.quotation-detail-metric-icon) {
    display: block;
    line-height: 1.35;
}

.quotation-detail-metric strong {
    margin-top: 0.25rem;
    color: var(--ink);
    font-size: 1.02rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.quotation-detail-metric span:not(.quotation-detail-metric-icon) {
    color: var(--muted);
    font-size: 0.95rem;
    font-weight: 700;
}

.quotation-detail-section {
    display: grid;
    gap: 0.85rem;
}

.quotation-detail-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.quotation-detail-section-header h2,
.quotation-detail-customer h2,
.quotation-detail-address-heading h3 {
    margin: 0;
    color: var(--ink);
    font-weight: 900;
    letter-spacing: 0;
}

.quotation-detail-section-header h2 {
    font-size: 1.35rem;
}

.quotation-detail-section-header p {
    margin: 0.25rem 0 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.quotation-detail-table-shell {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(217, 224, 232, 0.82);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.quotation-detail-table {
    min-width: 860px;
}

.quotation-detail-table thead th {
    padding: 1rem;
    border-bottom: 1px solid var(--line);
    background: #f1f5f9;
    color: #344054;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.quotation-detail-table tbody td {
    padding: 1.05rem 1rem;
    border-bottom: 1px solid var(--line-soft);
    font-size: 0.95rem;
    vertical-align: middle;
}

.quotation-detail-table tbody tr {
    opacity: 0;
    animation: quotationDetailRowIn 0.3s ease both;
}

.quotation-detail-table tbody tr:nth-child(1) {
    animation-delay: 0.18s;
}

.quotation-detail-table tbody tr:nth-child(2) {
    animation-delay: 0.22s;
}

.quotation-detail-table tbody tr:nth-child(3) {
    animation-delay: 0.26s;
}

.quotation-detail-table tbody tr:nth-child(4) {
    animation-delay: 0.3s;
}

.quotation-detail-table tbody tr:last-child td {
    border-bottom: 0;
}

.quotation-detail-notes-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.quotation-detail-info-box {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    min-width: 0;
    min-height: 8rem;
    padding: 1rem;
    border: 1px solid rgba(217, 224, 232, 0.72);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(240, 253, 250, 0.48)),
        rgba(255, 255, 255, 0.84);
    opacity: 0;
    animation: quotationDetailItemIn 0.34s ease both;
}

.quotation-detail-info-box:nth-child(1) {
    animation-delay: 0.2s;
}

.quotation-detail-info-box:nth-child(2) {
    animation-delay: 0.24s;
}

.quotation-detail-info-box:nth-child(3) {
    animation-delay: 0.28s;
}

.quotation-detail-info-title,
.quotation-detail-address-heading {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.quotation-detail-info-title span,
.quotation-detail-address-heading span {
    display: inline-grid;
    place-items: center;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius);
    background: var(--primary-soft);
    color: var(--primary-deep);
}

.quotation-detail-info-box p {
    margin: 0;
    color: var(--ink);
    font-size: 0.98rem;
    font-weight: 650;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.quotation-detail-info-box p.text-muted {
    color: var(--muted) !important;
    font-weight: 650;
}

.quotation-detail-customer {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(217, 224, 232, 0.82);
}

.quotation-detail-customer h2 {
    font-size: 1.25rem;
    overflow-wrap: anywhere;
}

.quotation-detail-address-card {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid rgba(217, 224, 232, 0.72);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.74);
    opacity: 0;
    animation: quotationDetailItemIn 0.34s ease both;
}

.quotation-detail-address-card:nth-of-type(1) {
    animation-delay: 0.22s;
}

.quotation-detail-address-card:nth-of-type(2) {
    animation-delay: 0.28s;
}

.quotation-detail-address-heading {
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--line-soft);
}

.quotation-detail-address-heading h3 {
    font-size: 1rem;
}

.quotation-detail-list {
    display: grid;
    gap: 0;
    margin: 0;
}

.quotation-detail-list > div {
    display: grid;
    grid-template-columns: minmax(6.5rem, 0.42fr) minmax(0, 1fr);
    gap: 0.8rem;
    padding: 0.72rem 0;
    border-bottom: 1px solid rgba(237, 241, 245, 0.95);
}

.quotation-detail-list > div:last-child {
    border-bottom: 0;
}

.quotation-detail-list dt {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.quotation-detail-list dd {
    margin: 0;
    color: var(--ink);
    font-size: 0.94rem;
    font-weight: 750;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

@keyframes quotationDetailToolbarIn {
    from {
        opacity: 0;
        transform: translateY(-0.35rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes quotationDetailBackLeave {
    0% {
        transform: translateY(-1px) scale(1);
    }

    60% {
        transform: translateY(0) scale(0.95);
    }

    100% {
        transform: translateX(-0.35rem) scale(0.96);
    }
}

@keyframes quotationDetailHeroIn {
    from {
        opacity: 0;
        transform: translateY(0.65rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes quotationDetailTotalIn {
    from {
        opacity: 0;
        transform: translateX(0.7rem) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes quotationDetailCardIn {
    from {
        opacity: 0;
        transform: translateY(0.8rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes quotationDetailItemIn {
    from {
        opacity: 0;
        transform: translateY(0.45rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes quotationDetailRowIn {
    from {
        opacity: 0;
        transform: translateX(-0.35rem);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 1180px) {
    .quotation-detail-layout {
        grid-template-columns: 1fr;
    }

    .quotation-detail-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quotation-detail-customer {
        grid-column: 1 / -1;
    }
}

@media (max-width: 980px) {
    .quotation-detail-hero {
        grid-template-columns: 1fr;
    }

    .quotation-detail-total-card {
        justify-self: stretch;
        text-align: left;
    }

    .quotation-detail-metrics,
    .quotation-detail-notes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .quotation-detail-page {
        width: min(calc(100vw - 1rem), 1360px);
        margin-left: auto;
        margin-right: auto;
    }

    .quotation-detail-hero,
    .quotation-detail-card,
    .quotation-detail-total-card,
    .quotation-detail-address-card,
    .quotation-detail-info-box,
    .quotation-detail-metric {
        border-radius: 8px;
    }

    .quotation-detail-hero,
    .quotation-detail-card {
        padding: 0.9rem;
    }

    .quotation-detail-toolbar,
    .quotation-detail-section-header {
        align-items: stretch;
        flex-direction: column;
    }

    .quotation-detail-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .quotation-detail-back,
    .quotation-detail-duplicate,
    .quotation-detail-pdf {
        width: 100%;
    }

    .quotation-detail-title {
        font-size: 1.75rem;
    }

    .quotation-detail-total {
        font-size: 1.7rem;
    }

    .quotation-detail-metrics,
    .quotation-detail-notes-grid,
    .quotation-detail-sidebar {
        grid-template-columns: 1fr;
    }

    .quotation-detail-metric {
        min-height: 0;
        padding: 0.85rem;
    }

    .quotation-detail-list > div {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quotation-detail-toolbar,
    .quotation-detail-hero,
    .quotation-detail-total-card,
    .quotation-detail-card,
    .quotation-detail-metric,
    .quotation-detail-table tbody tr,
    .quotation-detail-info-box,
    .quotation-detail-address-card {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .quotation-detail-back,
    .quotation-detail-duplicate,
    .quotation-detail-back::before,
    .quotation-detail-duplicate::before,
    .quotation-detail-back i,
    .quotation-detail-duplicate i {
        animation: none;
        transition: none;
    }
}

.hero-feature,
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hero-feature li,
.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.hero-feature li::before,
.feature-list li::before {
    content: "";
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 0.65rem;
    height: 0.65rem;
    margin-top: 0.45rem;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 0.3rem var(--primary-soft);
}

.login-card {
    position: relative;
    overflow: hidden;
    width: min(100%, 28rem);
    margin-inline: auto;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow);
    animation: loginCardIn 0.55s ease-out both;
}

.login-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 0.35rem;
    background: linear-gradient(90deg, var(--primary), var(--blue), var(--amber));
}

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 8.5rem);
    padding: clamp(1rem, 4vw, 2rem) 0;
}

.login-panel {
    width: min(100%, 30rem);
}

.login-card-inner {
    padding: clamp(1.35rem, 5vw, 2.3rem);
}

.login-header {
    display: grid;
    justify-items: center;
    gap: 0.7rem;
    margin-bottom: 1.45rem;
    text-align: center;
}

.login-header h1 {
    margin: 0.45rem 0 0;
    font-size: clamp(1.9rem, 6vw, 2.5rem);
    font-weight: 850;
    line-height: 1.05;
}

.login-header p {
    max-width: 22rem;
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.login-security-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(223, 245, 241, 0.96), rgba(219, 234, 254, 0.9));
    color: var(--primary-deep);
    box-shadow: 0 14px 30px rgba(15, 118, 110, 0.12);
    animation: loginFloat 3.2s ease-in-out infinite;
}

.login-form {
    display: grid;
    gap: 1.15rem;
}

.login-error-toast {
    position: fixed;
    top: 5.3rem;
    left: 50%;
    z-index: 2000;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.8rem;
    width: min(calc(100% - 1.5rem), 28rem);
    padding: 1rem 1.05rem;
    border: 1px solid rgba(220, 38, 38, 0.36);
    border-left: 6px solid var(--danger);
    border-radius: var(--radius);
    background: linear-gradient(135deg, #fff1f2, #fee2e2);
    color: #7f1d1d;
    box-shadow: 0 22px 50px rgba(127, 29, 29, 0.22);
    transform: translateX(-50%);
    animation: loginToastIn 0.5s cubic-bezier(.18,.89,.32,1.28) both;
}

.login-error-toast strong {
    display: block;
    margin-bottom: 0.1rem;
    color: #991b1b;
    font-weight: 900;
}

.login-error-toast span {
    font-weight: 650;
}

.login-info-toast {
    border-color: rgba(15, 118, 110, 0.3);
    border-left-color: var(--primary);
    background: linear-gradient(135deg, #ecfeff, #dff5f1);
    color: var(--primary-deep);
    box-shadow: 0 22px 50px rgba(15, 118, 110, 0.18);
}

.login-info-toast strong {
    color: var(--primary-deep);
}

.login-error-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 0;
    border-radius: 50%;
    background: rgba(127, 29, 29, 0.1);
    color: #7f1d1d;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.login-error-toast.is-hiding {
    animation: loginToastOut 0.24s ease-in forwards;
}

.login-error-alert {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.8rem;
    margin: 0 0 1.25rem;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(220, 38, 38, 0.24);
    border-left: 5px solid var(--danger);
    border-radius: var(--radius);
    background: linear-gradient(135deg, #fff5f5, #fee2e2);
    color: #7f1d1d;
    box-shadow: var(--shadow-sm);
    animation: alertRiseIn 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.login-error-alert strong {
    display: block;
    margin-bottom: 0.12rem;
    color: #991b1b;
}

.login-error-alert .btn-close {
    width: 0.85rem;
    height: 0.85rem;
    padding: 0.55rem;
    border: 0;
    border-radius: 50%;
    background-color: rgba(127, 29, 29, 0.08);
}

.login-error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: #fecaca;
    color: #991b1b;
}

.login-field {
    display: grid;
    gap: 0.45rem;
}

.login-field small {
    color: var(--muted);
    font-size: 0.82rem;
}

.login-input-panel {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 3.35rem;
    width: 100%;
    padding: 0 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 24px rgba(24, 34, 48, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.login-input-panel:focus-within {
    border-color: rgba(15, 118, 110, 0.72);
    box-shadow: 0 0 0 0.18rem rgba(15, 118, 110, 0.14), 0 14px 30px rgba(15, 118, 110, 0.08);
    transform: translateY(-1px);
}

.login-input-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary-deep);
}

.login-input-panel input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
}

.login-input-panel input::placeholder {
    color: #98a2b3;
}

.password-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--muted);
    transition: background 0.2s ease, color 0.2s ease;
}

.password-toggle:hover,
.password-toggle:focus {
    background: var(--primary-soft);
    color: var(--primary-deep);
}

.password-toggle:focus-visible {
    outline: 2px solid rgba(15, 118, 110, 0.35);
    outline-offset: 2px;
}

.login-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 3.25rem;
    margin-top: 0.25rem;
    border: 0;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--primary-deep), var(--primary));
    color: #fff;
    font-size: 1rem;
    font-weight: 850;
    box-shadow: 0 16px 32px rgba(15, 118, 110, 0.2);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.login-submit:hover,
.login-submit:focus {
    background: linear-gradient(135deg, #0b4f4b, var(--primary-deep));
    box-shadow: 0 20px 38px rgba(15, 118, 110, 0.26);
    transform: translateY(-1px);
}

.login-resend-submit {
    border: 1px solid rgba(15, 118, 110, 0.18);
    background: #fff;
    color: var(--primary-deep);
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.1);
}

.login-resend-submit:hover,
.login-resend-submit:focus {
    background: var(--primary-soft);
    color: var(--primary-deep);
}

.login-help {
    margin: 1rem 0 0;
    color: var(--muted);
    font-size: 0.9rem;
    text-align: center;
}

@keyframes loginCardIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes loginFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes loginErrorIn {
    0% {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    45% {
        opacity: 1;
        transform: translateY(0) scale(1.01);
    }
    65% {
        transform: translateX(-4px);
    }
    82% {
        transform: translateX(3px);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes loginToastIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -18px) scale(0.96);
        filter: blur(6px);
    }
    58% {
        opacity: 1;
        transform: translate(-50%, 3px) scale(1.01);
        filter: blur(0);
    }
    74% {
        transform: translate(calc(-50% - 4px), 0) scale(1);
    }
    88% {
        transform: translate(calc(-50% + 3px), 0) scale(1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

@keyframes loginToastOut {
    to {
        opacity: 0;
        transform: translate(-50%, -14px) scale(0.98);
        filter: blur(5px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-card,
    .login-security-icon,
    .login-error-alert,
    .login-error-toast,
    .login-error-toast.is-hiding,
    .user-form-alert,
    .bank-password-error,
    .invalid-feedback.d-block,
    .alert,
    .quote-3d-scene,
    .quote-glow,
    .quote-sheet-main,
    .quote-sheet-back,
    .quote-sheet-main::before,
    .quote-status,
    .quote-stamp,
    .quote-calculator,
    .quote-coin,
    .quote-check,
    .home-hero-badge,
    .table-actions .btn {
        animation: none;
    }

    .table-actions .btn,
    .table-actions .table-action-btn:hover .bi-eye,
    .table-actions .table-action-btn:focus .bi-eye,
    .table-actions .table-action-btn:hover .bi-pencil,
    .table-actions .table-action-btn:focus .bi-pencil,
    .table-actions .table-action-btn:hover .bi-trash,
    .table-actions .table-action-btn:focus .bi-trash {
        animation: none;
    }

    .table-actions .btn,
    .table-actions .btn::before,
    .table-actions .btn i {
        transition: none;
    }
}

.danger-panel {
    border-color: rgba(220, 38, 38, 0.28);
}

.danger-zone {
    border: 1px solid rgba(220, 38, 38, 0.18);
    border-radius: var(--radius);
    background: #fff5f5;
}

.delete-user-shell {
    width: min(100%, 940px);
    margin: 0 auto;
    padding: clamp(0.35rem, 1vw, 0.75rem) 0 clamp(1.5rem, 4vw, 3rem);
}

.delete-user-card {
    position: relative;
    display: grid;
    gap: 1.15rem;
    padding: clamp(1.15rem, 3vw, 2rem);
    overflow: hidden;
    border: 1px solid rgba(220, 38, 38, 0.24);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 247, 0.94)),
        var(--surface);
    box-shadow: 0 28px 70px rgba(127, 29, 29, 0.12);
    animation: deleteUserCardIn 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.delete-user-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 0.28rem;
    background: linear-gradient(90deg, var(--danger), #f97316, rgba(220, 38, 38, 0.18));
}

.delete-user-header {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
    z-index: 1;
}

.delete-user-icon {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius);
    background: #fee2e2;
    color: var(--danger);
    font-size: 1.25rem;
    box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.12);
    animation: deleteUserIconPulse 1.8s ease-in-out 0.45s infinite;
}

.delete-user-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 0.55rem;
    padding: 0.34rem 0.7rem;
    border: 1px solid rgba(220, 38, 38, 0.18);
    border-radius: 999px;
    background: #fff1f2;
    color: #991b1b;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.delete-user-header h1 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    font-weight: 900;
    line-height: 1.08;
}

.delete-user-header p {
    max-width: 48rem;
    margin: 0.55rem 0 0;
    color: var(--muted);
    line-height: 1.65;
}

.delete-user-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 0;
}

.delete-user-details > div {
    min-width: 0;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(220, 38, 38, 0.12);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.78);
    animation: deleteUserItemIn 0.36s ease both;
}

.delete-user-details > div:nth-child(2) {
    animation-delay: 0.06s;
}

.delete-user-details > div:nth-child(3) {
    animation-delay: 0.12s;
}

.delete-user-details dt {
    margin-bottom: 0.32rem;
    color: #667085;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.delete-user-details dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 850;
}

.delete-user-warning {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.7rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(220, 38, 38, 0.18);
    border-radius: var(--radius);
    background: linear-gradient(135deg, #fff1f2, #fff7ed);
    color: #7f1d1d;
    font-weight: 700;
    animation: deleteUserItemIn 0.36s ease 0.16s both;
}

.delete-user-warning i {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #fee2e2;
    color: var(--danger);
}

.delete-user-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 0.15rem;
    animation: deleteUserItemIn 0.36s ease 0.22s both;
}

.delete-user-confirm,
.delete-user-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.8rem;
    padding: 0.72rem 1rem;
    border-radius: var(--radius);
    font-weight: 850;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.delete-user-confirm {
    border: 0;
    background: linear-gradient(135deg, #b91c1c, var(--danger));
    color: #fff;
    box-shadow: 0 16px 32px rgba(220, 38, 38, 0.22);
    cursor: pointer;
}

.delete-user-cancel {
    border: 1px solid rgba(102, 112, 133, 0.24);
    background: #fff;
    color: #475467;
}

.delete-user-confirm:hover,
.delete-user-confirm:focus,
.delete-user-cancel:hover,
.delete-user-cancel:focus {
    transform: translateY(-2px);
}

.delete-user-confirm:hover,
.delete-user-confirm:focus {
    background: linear-gradient(135deg, #991b1b, #dc2626);
    color: #fff;
    box-shadow: 0 20px 42px rgba(220, 38, 38, 0.28);
}

.delete-user-cancel:hover,
.delete-user-cancel:focus {
    border-color: rgba(15, 118, 110, 0.3);
    background: var(--primary-soft);
    color: var(--primary-deep);
}

@keyframes deleteUserCardIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes deleteUserItemIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes deleteUserIconPulse {
    0%,
    100% {
        box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.12), 0 0 0 0 rgba(220, 38, 38, 0.18);
    }
    50% {
        box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.12), 0 0 0 8px rgba(220, 38, 38, 0);
    }
}

#items-table {
    min-width: 820px;
}

#items-table .form-control,
#items-table .form-select {
    min-height: 2.35rem;
}

.item-subtotal {
    font-weight: 800;
    color: var(--primary-deep);
    white-space: nowrap;
}

@media (max-width: 1000px) {
    body.nav-open {
        overflow: hidden;
        overflow-x: hidden;
    }

    .app-main {
        padding-top: 1rem;
    }

    .home-main {
        padding: 0;
    }

    .page-header {
        flex-direction: column;
    }

    .admin-user-management-header,
    .admin-user-management-card,
    .catalog-message-stack,
    .quotation-filter-card {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        transform: none;
        animation: none;
    }

    .page-header .btn {
        width: 100%;
    }

    .admin-user-header-actions {
        width: 100%;
        align-items: stretch;
        justify-content: stretch;
    }

    .dashboard-back-btn,
    .admin-user-header-actions .create-user-btn {
        width: 100%;
    }

    .dashboard-new-quote-btn {
        width: 100%;
    }

    .app-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .app-pagination-actions {
        justify-content: space-between;
    }

    .dashboard-card-footer {
        grid-template-columns: 1fr;
    }

    .dashboard-card-metrics,
    .dashboard-card-value,
    .dashboard-card-action,
    .dashboard-card-action:only-child {
        grid-column: 1;
    }

    .dashboard-card-action {
        width: 100%;
    }

    .user-form-back-row,
    .user-create-header,
    .user-create-layout {
        width: 100%;
    }

    .user-form-grid {
        grid-template-columns: 1fr;
    }

    .user-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .user-status-grid {
        grid-template-columns: 1fr;
    }

    .machine-form-grid {
        grid-template-columns: 1fr;
    }

    .company-form-grid {
        grid-template-columns: 1fr;
    }

    .company-form-grid .user-form-field-wide,
    .company-identity-grid .user-form-field-wide {
        grid-column: 1;
    }

    .terms-field-header {
        align-items: stretch;
        flex-direction: column;
    }

    .terms-line-spacing-control {
        grid-template-columns: 1fr;
        max-width: 14rem;
    }

    .company-form .user-form-actions {
        justify-content: stretch;
    }

    .company-sign-preview {
        align-items: flex-start;
        flex-direction: column;
    }

    .machine-table {
        min-width: 1120px;
    }

    .bank-table {
        min-width: 88rem;
    }

    .customer-table {
        min-width: 860px;
    }

    .machine-status-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .machine-status-card .form-check {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .user-form-submit,
    .user-form-cancel,
    .back-users-btn {
        width: 100%;
    }

    .delete-user-shell {
        width: 100%;
    }

    .delete-user-card {
        padding: 1rem;
    }

    .delete-user-header,
    .delete-user-warning {
        grid-template-columns: 1fr;
    }

    .delete-user-details {
        grid-template-columns: 1fr;
    }

    .delete-user-actions {
        justify-content: stretch;
    }

    .delete-user-confirm,
    .delete-user-cancel {
        width: 100%;
    }

    .hero-visual {
        min-height: 22rem;
    }

    .quotation-image-card {
        min-height: clamp(17rem, 42dvh, 24rem);
    }

    .home-info-wrap {
        min-height: 100%;
        padding: 0;
    }

    .home-info-card {
        padding: clamp(1rem, 6vw, 1.5rem);
    }

    .home-animation-panel {
        gap: 1rem;
    }

    .home-info-card > .row {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .home-info-card .eyebrow {
        margin-inline: auto;
    }

    .home-hero-badge {
        max-width: 100%;
        font-size: clamp(1.18rem, 2vw, 1.8rem);
        text-align: center;
        white-space: normal;
    }

    .home-info-card .display-heading,
    .home-info-card .section-subtitle {
        text-align: center;
    }

    .home-info-card .display-heading {
        font-size: clamp(2.05rem, 11vw, 3.35rem);
    }

    .quotation-image-card img {
        max-height: 35dvh;
    }

    .home-action-btn {
        width: min(100%, 18rem);
        min-height: 3.45rem;
        font-size: 1.08rem;
    }

    .quote-3d-scene {
        height: clamp(25rem, 56dvh, 34rem);
    }

    .quote-sheet {
        width: min(82vw, 22rem);
        min-height: clamp(21rem, 44dvh, 27rem);
    }

    .quote-sheet-main {
        padding: 1rem;
    }

    .quote-sheet-top strong {
        font-size: 1.08rem;
    }

    .quote-items {
        gap: 0.55rem;
        margin-top: 1rem;
    }

    .quote-items div {
        min-height: 2.65rem;
        padding: 0.6rem 0.7rem;
        font-size: 0.82rem;
    }

    .quote-total {
        padding: 0.8rem;
        font-size: 0.84rem;
    }

    .quote-stamp {
        right: 0.8rem;
        bottom: 5.3rem;
        font-size: 0.65rem;
    }

    .quote-calculator {
        right: 1%;
        bottom: 4%;
        width: 6.6rem;
        padding: 0.75rem;
    }

    .quote-check {
        left: 2%;
        bottom: 7%;
    }

    .quote-coin-one {
        left: 5%;
        top: 14%;
    }

    .quote-coin-two {
        right: 8%;
        top: 10%;
    }

    .quote-preview {
        inset: 0.8rem;
    }

    .card {
        border-radius: var(--radius);
    }

    .app-navbar .container {
        width: 100%;
        max-width: none;
        min-height: 4.75rem;
        padding-inline: 0.75rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .navbar-toggler {
        display: inline-flex;
    }

    .navbar-collapse {
        display: none !important;
        position: fixed;
        inset: 4.75rem 0 0 0;
        z-index: 1040;
        width: auto;
        max-width: 100vw;
        height: calc(100dvh - 4.75rem);
        min-width: 0;
        padding: clamp(0.75rem, 4vw, 1.25rem);
        border-top: 1px solid rgba(255, 255, 255, 0.55);
        background:
            radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0) 24rem),
            radial-gradient(circle at 82% 18%, rgba(15, 118, 110, 0.22), rgba(15, 118, 110, 0) 18rem),
            radial-gradient(circle at 50% 92%, rgba(37, 99, 235, 0.18), rgba(37, 99, 235, 0) 20rem),
            rgba(245, 248, 250, 0.64);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 30px 70px rgba(24, 34, 48, 0.18);
        overflow-y: auto;
        overflow-x: hidden;
        backdrop-filter: blur(28px) saturate(1.75);
        -webkit-backdrop-filter: blur(28px) saturate(1.75);
    }

    .navbar-collapse.show,
    .navbar-collapse.closing {
        display: flex !important;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .navbar-collapse.show {
        animation: liquidMenuIn 0.24s ease-out;
    }

    .navbar-collapse.closing {
        pointer-events: none;
        animation: liquidMenuOut 0.24s ease-in forwards;
    }

    .navbar-collapse::before {
        content: "";
        position: absolute;
        inset: clamp(0.5rem, 3vw, 0.85rem);
        pointer-events: none;
        border: 1px solid rgba(255, 255, 255, 0.52);
        border-radius: 24px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08)),
            rgba(255, 255, 255, 0.2);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -28px 56px rgba(15, 118, 110, 0.06);
    }

    .navbar-nav {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        overflow-x: visible;
        padding: clamp(0.25rem, 2vw, 0.55rem);
    }

    .nav-link {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        justify-content: center;
        min-height: 3.55rem;
        padding: 0.9rem 1rem !important;
        border: 1px solid rgba(255, 255, 255, 0.62);
        border-radius: 18px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.34)),
            rgba(255, 255, 255, 0.46);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.82),
            inset 0 -18px 32px rgba(15, 118, 110, 0.04),
            0 14px 34px rgba(24, 34, 48, 0.1);
        color: var(--ink);
        font-size: 1.02rem;
        backdrop-filter: blur(18px) saturate(1.45);
        -webkit-backdrop-filter: blur(18px) saturate(1.45);
    }

    .nav-link span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .nav-link:hover,
    .nav-link:focus,
    .nav-link.active {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(223, 245, 241, 0.58)),
            rgba(255, 255, 255, 0.62);
        border-color: rgba(15, 118, 110, 0.24);
        color: var(--primary-deep);
        transform: translateY(-1px);
    }

    .logout-link:hover,
    .logout-link:focus {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(254, 226, 226, 0.7)),
            rgba(255, 255, 255, 0.62);
        color: #991b1b;
    }

    .profile-dropdown:hover > .dropdown-menu {
        display: none;
    }

    .profile-dropdown:focus-within > .dropdown-menu,
    .profile-dropdown .dropdown-menu.show {
        display: block;
    }

    .dropdown-menu {
        position: static;
        width: 100%;
        max-width: 100%;
        margin-top: 0.5rem;
        border-color: rgba(255, 255, 255, 0.58);
        background: rgba(255, 255, 255, 0.55);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 14px 28px rgba(24, 34, 48, 0.08);
        backdrop-filter: blur(18px) saturate(1.35);
        -webkit-backdrop-filter: blur(18px) saturate(1.35);
    }

    .profile-menu {
        min-width: 0;
    }

    .table-actions .btn {
        flex: 1 1 auto;
    }

    @keyframes liquidMenuIn {
        from {
            opacity: 0;
            transform: translateY(-10px) scale(0.985);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes liquidMenuOut {
        from {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0);
        }
        to {
            opacity: 0;
            transform: translateY(-10px) scale(0.985);
            filter: blur(5px);
        }
    }
}

@media (max-width: 640px) {
    .home-info-wrap {
        margin: 0;
        padding: 0;
    }

    .home-info-card {
        padding: 0.9rem;
    }

    .home-animation-copy h1 {
        font-size: clamp(1.55rem, 8vw, 2.2rem);
        line-height: 1.15;
    }

    .home-animation-copy p {
        font-size: 0.96rem;
        line-height: 1.5;
    }

    .home-actions {
        width: 100%;
        gap: 0.75rem;
    }

    .home-action-btn {
        width: 100%;
        min-height: 3rem;
        font-size: 1rem;
        white-space: normal;
    }

    .quote-3d-scene {
        height: clamp(21rem, 48vh, 27rem);
        height: clamp(21rem, 48dvh, 27rem);
    }
}

@media (max-width: 1180px) {
    .audit-filter-card .quotation-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .audit-filter-card .quotation-filter-search,
    .audit-filter-card .quotation-filter-actions {
        grid-column: 1 / -1;
    }

    .audit-filter-card .quotation-filter-actions {
        justify-content: flex-end;
        justify-self: end;
        min-width: 0;
    }
}

@media (max-width: 720px) {
    .audit-filter-card {
        padding: 0.9rem;
    }

    .audit-filter-card .quotation-filter-grid {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .audit-filter-card .quotation-filter-search,
    .audit-filter-card .quotation-filter-actions {
        grid-column: 1;
    }

    .audit-filter-card .quotation-filter-actions {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
        grid-auto-flow: row;
        grid-auto-columns: unset;
        justify-self: stretch;
        justify-content: stretch;
        gap: 0.5rem;
        width: 100%;
    }

    .audit-filter-card .quotation-filter-actions .btn {
        width: 100%;
        flex: none;
        min-width: 0;
    }

    .responsive-data-table {
        width: 100% !important;
        min-width: 0 !important;
        border-collapse: separate;
        border-spacing: 0;
        table-layout: auto;
    }

    .responsive-data-table colgroup,
    .responsive-data-table thead {
        display: none;
    }

    .responsive-data-table tbody {
        display: grid;
        gap: 0.78rem;
        width: 100%;
    }

    .responsive-data-table tbody tr {
        display: grid;
        width: 100%;
        overflow: hidden;
        border: 1px solid rgba(188, 199, 213, 0.82);
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 12px 28px rgba(24, 34, 48, 0.07);
    }

    .responsive-data-table tbody tr:hover {
        background: #fff;
    }

    .responsive-data-table tbody td {
        display: grid;
        grid-template-columns: minmax(6.8rem, 38%) minmax(0, 1fr);
        gap: 0.75rem;
        align-items: start;
        width: 100%;
        padding: 0.72rem 0.82rem !important;
        border-bottom: 1px solid rgba(217, 224, 232, 0.74);
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    .responsive-data-table tbody td:last-child {
        border-bottom: 0;
    }

    .responsive-data-table tbody td::before {
        content: attr(data-label);
        color: #667085;
        font-size: 0.72rem;
        font-weight: 900;
        line-height: 1.35;
        text-transform: uppercase;
        white-space: normal;
    }

    .responsive-data-table tbody td > * {
        min-width: 0;
    }

    .responsive-data-table .responsive-table-empty-row {
        display: block;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .responsive-data-table .responsive-table-empty-row td {
        display: block;
        padding: 0 !important;
        border: 0;
    }

    .responsive-data-table .responsive-table-empty-row td::before {
        display: none;
    }

    .machine-table.responsive-data-table .table-actions {
        justify-content: flex-end;
    }

    .bank-table.responsive-data-table .table-actions,
    .bank-table.responsive-data-table td:nth-child(5),
    .bank-table.responsive-data-table td:nth-child(6) {
        white-space: normal;
    }

    .bank-table.responsive-data-table .table-actions .btn {
        flex: 1 1 6rem;
        min-width: 0;
        justify-content: center;
    }

    .audit-table.responsive-data-table tbody td[data-label="Device info"],
    .audit-table.responsive-data-table tbody td[data-label="Action"] {
        grid-template-columns: 1fr;
    }

    .audit-table.responsive-data-table .audit-device-info {
        max-height: none;
        padding: 0.62rem;
        border: 1px solid rgba(188, 199, 213, 0.62);
        border-radius: 6px;
        background: #f8fbfc;
    }

    .audit-table.responsive-data-table .audit-change-grid {
        grid-template-columns: 1fr;
    }

    .responsive-table-card .user-table-responsive {
        overflow-x: visible;
    }

    .bank-table-responsive {
        overflow-x: auto !important;
        overflow-y: hidden;
    }

    .bank-table {
        min-width: 62rem;
    }
}

@media (max-width: 460px) {
    .audit-filter-card .quotation-filter-actions {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .audit-filter-card .quotation-filter-actions .btn {
        width: 100%;
        flex: none;
    }

    .responsive-data-table tbody td {
        grid-template-columns: 1fr;
        gap: 0.32rem;
        padding: 0.72rem !important;
    }

    .responsive-data-table tbody td::before {
        font-size: 0.7rem;
    }

    .machine-table.responsive-data-table .table-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .bank-table.responsive-data-table .table-actions,
    .machine-table.responsive-data-table .table-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .bank-table.responsive-data-table .table-actions .btn,
    .machine-table.responsive-data-table .table-actions .btn {
        width: 100%;
        justify-content: center;
    }
}