html {
    margin: 0;
    /* remove UA default margin */
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #b3c6be;
    background-image:
        linear-gradient(rgba(179, 198, 190, 0.96), rgba(179, 198, 190, 0.96)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Ctext x='15' y='40' font-size='25'%3E📮%3C/text%3E%3C/svg%3E");
    background-size: auto, 96px 96px;
    margin: 0;
    /* Remove default browser body margin (prevents extra bottom gap below footer) */
}

/* Brand color variables shared across pages */
:root {
    --royal-blue-traditional: #00296b;
    --marian-blue: #003f88;
    --polynesian-blue: #00509d;
    --mikado-yellow: #fdc500;
    --gold: #ffd500;
}

.navbar {
    position: relative;
    z-index: 1050;
    box-shadow: none;
    padding: 0.25rem;
    margin-top: 0.5rem;
    background: transparent;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.navbar .container {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.78));
    border-radius: 50px;
    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.08);
}

.navbar-brand {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    position: relative;
    color: var(--royal-blue-traditional);
    transition: all 0.3s ease;
}

.navbar-brand i {
    color: var(--mikado-yellow);
    font-size: 1.4rem;
    transition: color 0.3s ease;
}

@media (hover: hover) {
  .navbar-brand:hover {
      transform: scale(1.05);
      color: var(--polynesian-blue);
  }
}

.navbar-brand:hover i {
    color: var(--gold);
}

.brand-dot {
    color: var(--mikado-yellow);
    display: inline-block;
    animation: brandDotBounce 1s infinite;
}

@keyframes brandDotBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

.nav-link {
    font-weight: 500;
    color: #4a4a4a !important;
    padding: 0.35rem 0.75rem !important;
    font-size: 0.95rem;
    position: relative;
    text-decoration: none;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #4a4a4a;
    transition: width 0.3s ease-in-out;
}

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

.navbar .btn-link {
    text-decoration: none;
    padding: 0.5rem 1rem;
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
    transition: all 0.2s ease;
    border-radius: 50px;
}

.navbar .btn-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #4a4a4a;
    transition: width 0.3s ease-in-out;
}

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

/* Shared footer accent */
.colored-heart {
    background: linear-gradient(90deg, #007BFF, #9D00FF, #FF4500);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.navbar .btn-dark,
#settings-card .btn {
    background-color: #f5f5f5;
    border: none;
    color: #000;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 500;
}

.navbar .btn-dark:hover,
#settings-card .btn:hover {
    background-color: #eeeeee;
    color: #000;
}

.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    padding-top: 120px;
    /* Consistent top spacing */
}

/* Override vertical centering for login and similar pages */
#login-form,
#register-form {
    margin-top: 0;
}

.hero-section.auth-section {
    align-items: flex-start;
}

.card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.card-body {
    padding: 3rem;
}

.card-title {
    margin-bottom: 2.5rem !important;
}

#login-form .mb-3,
#register-form .mb-3 {
    margin-bottom: 1.5rem !important;
}

#login-form .btn,
#register-form .btn {
    margin-top: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.notification {
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 5px;
    text-align: center;
    display: none;
    font-size: 0.95rem;
    font-weight: 500;
    color: #333;
}

.control-panel-container {
    max-width: 1200px;
    /* Align with main navbar */
    margin-left: auto;
    margin-right: auto;
}

.left-navbar-card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    margin-bottom: 2rem;
}

/* Specific styles for the navigation card */
.left-navbar-card.nav-card {
    min-height: 300px;
    display: flex;
    flex-direction: column;
}

@media (max-width: 991px) {
  .left-navbar-card.nav-card {
    min-height: auto;
  }
}

.left-navbar-card.nav-card nav {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Specific styles for the credits card */
.left-navbar-card.credits-card {
    padding: 1.5rem;
}

/* ── Responsive sidebar: inline column on desktop, hamburger drawer on mobile ──
   Desktop is left untouched: the offcanvas wrappers collapse to display:contents
   so the nav/credits cards lay out exactly like the original in-flow sidebar. */
@media (min-width: 992px) {
    .sidebar-offcanvas,
    .sidebar-offcanvas > .offcanvas-body { display: contents !important; }
    .sidebar-offcanvas > .offcanvas-header { display: none !important; }
}
@media (max-width: 991.98px) {
    /* Drawer + backdrop must cover the top navbar (.navbar is z-index 1050) */
    .sidebar-offcanvas { --bs-offcanvas-width: 300px; z-index: 1060; }
    .sidebar-offcanvas .offcanvas-header { padding: 1.25rem 1.25rem 0.75rem; }
    .sidebar-offcanvas .offcanvas-title { font-weight: 700; letter-spacing: -0.3px; }
    .sidebar-offcanvas .offcanvas-body { padding: 1rem; }
    /* !important: the cards carry utility classes like .mb-5 which are !important */
    .sidebar-offcanvas .left-navbar-card { box-shadow: none; margin-bottom: 1rem !important; }
    .sidebar-offcanvas .left-navbar-card:last-child { margin-bottom: 0 !important; }
    /* Frosted scrim instead of the default solid black backdrop */
    .offcanvas-backdrop {
        z-index: 1055;
        background-color: rgb(30, 41, 59);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }
    .offcanvas-backdrop.show { opacity: 0.35; }
}
/* The navbar is shared across pages; hide the hamburger where there is no
   sidebar drawer to open (e.g. pricing). Falls back to a harmless dead button
   on browsers without :has(). */
body:not(:has(.sidebar-offcanvas)) .navbar-toggler { display: none; }

.left-navbar-card h5 {
    margin-bottom: 1.5rem;
    font-weight: 600;
    text-align: center;
}

.left-navbar-card.credits-card h5 {
    color: inherit;
}

.left-navbar-card.credits-card .text-muted {
    color: #6c757d !important;
}

.nav-link {
    padding: 0.75rem 1rem;
    color: #4a4a4a;
    font-weight: 500;
    transition: background-color 0.2s ease-in-out;
}

.nav-link.active,
.nav-link:hover {
    background-color: #e9ecef;
    border-radius: 5px;
    color: #000;
}

.nav-link i {
    margin-right: 0.5rem;
}

/* Sidebar nav links: match landing page login link styling */
.left-navbar-card .nav-link {
    padding: 0.5rem 1rem;
    border-radius: 50px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    box-sizing: border-box;
}

.left-navbar-card .nav-link:hover,
.left-navbar-card .nav-link.active {
    color: #0b1220 !important;
    border: 1px solid var(--glass-border);
    background:
        radial-gradient(420px 240px at var(--gloss-x, 50%) calc(var(--gloss-y, 50%) - 40%), rgba(255, 255, 255, calc(var(--gloss-alpha, 0.45) * var(--light-intensity, 0.6))), rgba(255, 255, 255, 0.0) 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, rgba(107, 114, 128, 0.18), rgba(107, 114, 128, 0.06)),
        repeating-linear-gradient(var(--light-angle, 45deg), rgba(255, 255, 255, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 6px);
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
    backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 16px 32px rgba(0, 0, 0, 0.18), 0 0 36px rgba(107, 114, 128, 0.30);
}

/* Remove underline animation on hover to match navbar Logout behavior */
.left-navbar-card .nav-link:hover::after {
    width: 0 !important;
}

/* Section title styles from landing page */
.section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    color: #333;
}

/* Responsive adjustments for section title */
@media (max-width: 992px) {
    .pricing-card {
        margin-bottom: 2rem;
    }
}

/* Sticky Footer styles */
.sticky-footer-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.sticky-footer-main {
    flex: 1;
}

.drop-zone {
    width: 100%;
    height: 200px;
    border: 2px dashed #ccc;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
    flex-direction: column;
}

.drop-zone--over {
    border-color: #000;
    background-color: #f0f0f0;
}

.drop-zone__input {
    display: none;
}

.drop-zone__prompt-container {
    text-align: center;
}

.drop-zone__prompt {
    color: #888;
    font-weight: 500;
    display: block;
}

.drop-zone__requirements {
    color: #aaa;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

/* Task actions container for consistent badge alignment */
.task-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Badge styling with consistent sizing */
.task-actions .badge {
    font-size: 0.85rem;
    padding: 8px 12px;
    font-weight: 500;
    border-radius: 6px;
}

/* Download placeholder to reserve space when button is not present */
.download-placeholder {
    width: 32px;
    height: 32px;
    /* Invisible placeholder to maintain consistent spacing */
}

.task-item {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.task-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.download-btn {
    background: transparent;
    border: none;
    color: #adb5bd;
    /* lighter gray, similar to subtle edit buttons */
    padding: 0.25rem;
    font-size: 0.8rem;
    /* slightly smaller */
    border-radius: 6px;
    width: 28px;
    /* slightly smaller hit area */
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.download-btn:hover {
    background-color: #f8f9fa;
    color: #212529;
    transform: scale(1.05);
}

.progress-container {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0.18));
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    box-shadow: var(--glass-shadow);
    border-radius: 10px;
    padding: 3px;
    position: relative;
    overflow: hidden;
}

.progress-rocket {
    position: absolute;
    top: 50%;
    transform: translate(-70%, -50%);
    font-size: 1.2rem;
    transition: left 0.3s ease-in-out;
    z-index: 2;
}

.progress-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        conic-gradient(from var(--light-angle, 45deg), rgba(255, 255, 255, 0.25) 0turn 0.08turn, rgba(255, 255, 255, 0) 0.08turn 1turn),
        linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0)),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.18"/></svg>');
    background-blend-mode: screen, screen, soft-light;
    background-repeat: no-repeat, no-repeat, repeat;
    background-size: auto, auto, 120px 120px;
    border-radius: inherit;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 100%);
    mask-image: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 100%);
}

.modern-progress {
    height: 10px;
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.progress-bar-gradient {
    height: 100%;
    background: linear-gradient(90deg, #027bff, #0056b3);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 12px rgba(0, 80, 157, 0.18);
    transition: width 0.3s ease-in-out;
    position: relative;
    z-index: 1;
}

.progress-bar-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    z-index: 0;
}

@keyframes badgeSwipeAnimation {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

/* Common badge styles */
.progress-badge,
.completed-badge {
    background: white;
    border-radius: 6px;
    padding: 8px 12px;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Progress badge specific styles */
.progress-badge .badge-content {
    background: linear-gradient(90deg, #007BFF, #9D00FF, #FF4500);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% 100%;
    animation: badgeSwipeAnimation 3s linear infinite;
    position: relative;
    z-index: 2;
}

.completed-badge .badge-content {
    background: linear-gradient(90deg, #28a745, #34d058, #28a745);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% 100%;
    animation: none;
    position: relative;
    z-index: 2;
}

.progress-badge .badge-glow {
    background: linear-gradient(90deg, #007BFF, #9D00FF, #FF4500);
    animation: badgeSwipeAnimation 3s linear infinite;
}

/* Completed badge specific styles */
.completed-badge .badge-glow {
    background: linear-gradient(90deg, #28a745, #34d058, #28a745);
    animation: none;
}

/* Common glow styles */
.badge-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 200% 100%;
    opacity: 0.08;
    z-index: 1;
}

/* Success badge styling */
.badge.bg-success {
    border-radius: 6px;
    background-color: #28a745 !important;
}

.loading-dots {
    display: inline-block;
}

.loading-dots span {
    animation: dots 1.5s infinite;
    opacity: 0;
    margin-left: 2px;
    font-size: inherit;
    font-weight: inherit;
}

.loading-dots span:nth-child(1) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.4s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes dots {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Prevent button width changes during loading state */
#login-form button[type="submit"] {
    min-width: 120px;
    position: relative;
    transition: background-color 0.3s;
    font-size: 1rem;
    font-weight: 400;
}

#login-form button[type="submit"]:disabled {
    opacity: 0.8;
    cursor: not-allowed;
}

/* Custom Modal Styles */
.custom-modal {
    border: none;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.custom-modal-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-bottom: 1px solid #e9ecef;
    padding: 2rem 2.5rem 1.5rem 2.5rem;
    border-radius: 20px 20px 0 0;
}

.section-title-small {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    color: #333;
    text-align: left;
}

.custom-close {
    background: #f5f5f5;
    border-radius: 50%;
    padding: 0.5rem;
    opacity: 1;
    transition: all 0.2s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-close:hover {
    background: #e9ecef;
    transform: scale(1.05);
}

.custom-modal-body {
    padding: 2rem 2.5rem;
    background: #f8f9fa;
}

.csv-preview-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e9ecef;
}

.csv-preview-card-compact {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    border: 1px solid #e9ecef;
}

.explanation-card {
    background: linear-gradient(135deg, #f0f8ff 0%, #f5f7fa 100%);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e1f5fe;
}

.explanation-content p {
    font-size: 0.9rem;
    color: #495057;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.explanation-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0.75rem;
}

.explanation-list li {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
    padding-left: 1rem;
    position: relative;
}

.explanation-list li::before {
    content: '•';
    color: #007BFF;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.preview-content {
    font-size: 0.9rem;
    color: #6c757d;
    line-height: 1.5;
}

.column-mapping-section {
    margin-top: 1.5rem;
}

.mapping-title {
    font-weight: 600;
    color: #495057;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.form-group-custom {
    margin-bottom: 1rem;
}

.form-label-custom {
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.75rem;
    display: block;
    font-size: 0.95rem;
}

.form-select-custom {
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: white;
    width: 100%;
}

.form-select-custom:focus {
    border-color: #007BFF;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.1);
    outline: none;
}

.credit-info-card {
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e1f5fe;
}

.credit-icon {
    background: linear-gradient(135deg, #007BFF, #9D00FF);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    font-size: 1.1rem;
}

.credit-details {
    font-size: 0.95rem;
    color: #495057;
}

.processing-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e9ecef;
}

.processing-content {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 0.95rem;
}

.custom-modal-footer {
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    padding: 1.5rem 2.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    border-radius: 0 0 20px 20px;
}

.btn-custom {
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.95rem;
    border: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
}

.btn-secondary-custom {
    background: #f5f5f5;
    color: #495057;
}

.btn-secondary-custom:hover {
    background: #e9ecef;
    color: #495057;
    transform: translateY(-1px);
}

.btn-primary-custom {
    background: linear-gradient(135deg, #007BFF, #0056b3);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.2);
}

.btn-primary-custom:hover {
    background: linear-gradient(135deg, #0056b3, #004085);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3);
}

/* Responsive adjustments for modal */
@media (max-width: 767.98px) {

    .custom-modal-header,
    .custom-modal-body,
    .custom-modal-footer {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .section-title-small {
        font-size: 1.5rem;
    }

    .btn-custom {
        min-width: 100px;
        padding: 0.65rem 1.25rem;
        font-size: 0.9rem;
    }

    /* Adjust compact preview on mobile */
    .csv-preview-card-compact {
        padding: 0.75rem 1rem;
    }

    .explanation-content p {
        font-size: 0.85rem;
    }

    .explanation-list li {
        font-size: 0.8rem;
    }
}

.footer {
    /* Keep exactly 20px space below the footer card when not fixed */
    padding-bottom: 20px;
}

/* When page content is shorter than the viewport,
   the footer can be pinned 20px above the bottom. */
.footer.footer-fixed {
    position: fixed;
    left: 0;
    right: 0;
    /* Respect iOS safe-area while keeping a 20px offset */
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    padding-bottom: 0;
    /* avoid extra blank space when fixed */
    z-index: 1030;
    /* above main content but below modals */
}

.footer .card-body {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.footer .container {
    /* Match navbar wrapper width behavior */
    width: 100%;
    margin: 0 auto;
}

/* Desktop: cap at the control-panel width (unchanged behavior) */
@media (min-width: 992px) {
    .footer .container {
        max-width: 1200px;
    }
}

/* Mobile/tablet: align the footer card with the page's content cards.
   Control-panel pages mirror .control-panel-container (full width up to
   1200px); other pages keep default .container widths, which already match. */
@media (max-width: 991.98px) {
    /* Keep the old 1200px cap below the desktop breakpoint too: every
       real page here has a control panel that caps at the same width,
       so the footer aligns with the content and no :has() is needed */
    .footer .container {
        max-width: 1200px;
    }
}

/* Footer card fills the container to mirror navbar container */
.footer .card {
    width: 100%;
    margin: 0 auto;
}

/* Footer spacing is handled by stack-20; no local margins here. */

/* ===== Glass + Reflections (ported from existing landing page) ===== */
:root {
    --glass-bg: rgba(255, 255, 255, 0.30);
    --glass-elevated-bg: rgba(255, 255, 255, 0.40);
    --glass-border: rgba(255, 255, 255, 0.46);
    --glass-shadow: 0 28px 80px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.32);
    --glass-blur: 48px;
    --glass-saturation: 220%;
    --glass-noise-opacity: 0.05;
    --glass-edge-strength: 0.45;
    --light-angle: 45deg;
    --light-intensity: 0.6;
}

/* Navigation links: gray glass hover */
.navbar .nav-link:hover {
    color: #0b1220 !important;
    border: 1px solid var(--glass-border);
    background:
        radial-gradient(420px 240px at var(--gloss-x, 50%) calc(var(--gloss-y, 50%) - 40%), rgba(255, 255, 255, calc(var(--gloss-alpha, 0.45) * var(--light-intensity, 0.6))), rgba(255, 255, 255, 0.0) 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, rgba(107, 114, 128, 0.18), rgba(107, 114, 128, 0.06)),
        repeating-linear-gradient(var(--light-angle, 45deg), rgba(255, 255, 255, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 6px);
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
    backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 16px 32px rgba(0, 0, 0, 0.18), 0 0 36px rgba(107, 114, 128, 0.30);
}

.navbar .nav-link:hover::after {
    width: 0 !important;
}

.navbar .btn-link:hover {
    color: #0b1220 !important;
    border: 1px solid var(--glass-border);
    background:
        radial-gradient(420px 240px at var(--gloss-x, 50%) calc(var(--gloss-y, 50%) - 40%), rgba(255, 255, 255, calc(var(--gloss-alpha, 0.45) * var(--light-intensity, 0.6))), rgba(255, 255, 255, 0.0) 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, rgba(107, 114, 128, 0.18), rgba(107, 114, 128, 0.06)),
        repeating-linear-gradient(var(--light-angle, 45deg), rgba(255, 255, 255, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 6px);
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
    backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 20px 48px rgba(0, 0, 0, 0.22), 0 0 48px rgba(107, 114, 128, 0.40);
}

.navbar .btn-link:hover::after {
    width: 0 !important;
}

/* Navbar container: glass.
   These are the same values liquid-glass.css sets, deliberately duplicated:
   the navbar is the one surface whose look must not depend on the overlay
   sheet arriving. This rule used to be an opaque `#f8f9fa !important`, so
   whenever the overlay was missing -- a failed fetch, a stale cache entry --
   the bar flipped to a solid pill against the sage canvas. */
.navbar .container {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.78)) !important;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 50px;
    padding: 0.5rem 1.5rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.08);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    backdrop-filter: blur(28px) saturate(200%);
    position: relative;
}

/* Glassy panels across app */
.hero-animation,
.content-section,
.pricing-card,
.feature-card,
.footer .card,
/* apply glass to generic cards used in dashboard/settings */
.card,
.left-navbar-card,
.credits-card,
.processing-card,
.csv-preview-card,
.csv-preview-card-compact,
.explanation-card,
.custom-modal {
    background: #f8f9fa;
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--glass-shadow) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    position: relative;
}

/* Keep original hero-animation radius when present */
.hero-animation {
    border-radius: 1rem;
}

/* Light reflections for glass surfaces */
.hero-animation::before,
.content-section::before,
.pricing-card::before,
.feature-card::before,
.footer .card::before,
.card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background-image:
        radial-gradient(360px 240px at var(--gloss-x, 50%) calc(var(--gloss-y, 12%) - 40%), rgba(255, 255, 255, calc(var(--panel-gloss-alpha, 0.22) * var(--light-intensity, 0.6))), rgba(255, 255, 255, 0) 65%),
        conic-gradient(from var(--light-angle, 45deg), rgba(255, 255, 255, 0.22) 0turn 0.10turn, rgba(255, 255, 255, 0) 0.10turn 1turn),
        linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)),
        repeating-linear-gradient(var(--light-angle, 45deg),
            rgba(255, 255, 255, 0.10) 0 1px,
            rgba(255, 255, 255, 0.00) 1px 6px),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.25"/></svg>');
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
    background-size: auto, auto, auto, auto, 140px 140px;
    background-attachment: scroll, scroll, scroll, scroll, scroll;
    mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 100%);
    mask-image: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 100%);
}

/* Remove visible inner radial spotlight on larger panels */
.hero-animation::before,
.content-section::before,
.pricing-card::before,
.feature-card::before,
.footer .card::before,
.card::before {
    --panel-gloss-alpha: 0;
}

/* Sparkle highlight diagonal streak */
.hero-animation::after,
.content-section::after,
.pricing-card::after,
.footer .card::after,
.card::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -10%;
    width: 120%;
    height: 60%;
    transform: rotate(var(--light-angle, 6deg));
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, calc(0.25 * var(--light-intensity, 0.6))), rgba(255, 255, 255, 0));
    pointer-events: none;
    filter: blur(6px);
    mix-blend-mode: screen;
}

/* On biggest sections, remove overlays for cleanliness */
.content-section::before,
.content-section::after {
    content: none !important;
}

.pricing-card::before,
.pricing-card::after {
    content: none !important;
}

.footer .card::before,
.footer .card::after {
    content: none !important;
}

/* Auth page: suppress white oval overlays on the login card (keep navbar & CTA effects) */
.hero-section.auth-section .card::before,
.hero-section.auth-section .card::after {
    content: none !important;
}

/* Suppress glass overlays (white oval) for specific dashboard boxes */
#csv-upload-card::before,
#csv-upload-card::after,
.left-navbar-card::before,
.left-navbar-card::after,
.credits-card::before,
.credits-card::after,
#tasks-card::before,
#tasks-card::after,
#users-card::before,
#users-card::after,
#validations-card::before,
#validations-card::after,
.tf-card::before,
.tf-card::after,
.explanation-card::before,
.explanation-card::after,
.processing-card::before,
.processing-card::after,
.success-card::before,
.success-card::after,
.navbar .btn-dark::before,
.navbar .btn-dark::after {
    content: none !important;
}

/* Gray glass button variant (match Back to Home CTA) */
.btn.btn-glass-gray {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--glass-border) !important;
    color: #111827 !important;
    /* slate-900 */
    background:
        radial-gradient(420px 240px at var(--gloss-x, 50%) calc(var(--gloss-y, 50%) - 40%), rgba(255, 255, 255, calc(var(--gloss-alpha, 0.45) * var(--light-intensity, 0.6))), rgba(255, 255, 255, 0.0) 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, rgba(107, 114, 128, 0.18), rgba(107, 114, 128, 0.06)),
        /* gray accent */
        repeating-linear-gradient(var(--light-angle, 45deg), rgba(255, 255, 255, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 6px);
    background-attachment: scroll, scroll, scroll, scroll;
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
    backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 14px 32px rgba(0, 0, 0, 0.18), 0 0 36px rgba(107, 114, 128, 0.30);
    will-change: background-position, background;
}

.btn.btn-glass-gray::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        conic-gradient(from var(--light-angle, 45deg), rgba(255, 255, 255, 0.25) 0turn 0.08turn, rgba(255, 255, 255, 0) 0.08turn 1turn),
        linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0)),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.18"/></svg>');
    background-blend-mode: screen, screen, soft-light;
    background-repeat: no-repeat, no-repeat, repeat;
    background-size: auto, auto, 120px 120px;
    border-radius: inherit;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 100%);
    mask-image: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 100%);
}

.btn.btn-glass-gray::after {
    content: "";
    position: absolute;
    width: 140%;
    height: 80%;
    top: -30%;
    left: -20%;
    transform: rotate(var(--light-angle, 8deg));
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, calc(0.35 * var(--light-intensity, 0.6))), rgba(255, 255, 255, 0));
    filter: blur(8px);
    mix-blend-mode: screen;
    pointer-events: none;
}

.btn.btn-glass-gray:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 20px 48px rgba(0, 0, 0, 0.22), 0 0 48px rgba(107, 114, 128, 0.40);
}

/* Navbar size for gray glass button */
.navbar .btn-glass-gray {
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    border-radius: 50px;
}

/* Promo block: match CTA border and glow (no animation) */
#promo-block.card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0.18));
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 14px 32px rgba(0, 0, 0, 0.18), 0 0 36px rgba(0, 80, 157, 0.25) !important;
}

#promo-block.card::before,
#promo-block.card::after {
    content: none !important;
}

/* Ultra-glassy CTAs with dynamic lighting (match LP index.html) */
.btn.btn-cta-animated,
.btn.btn-outline-dark {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--glass-border) !important;
    color: #0b1220 !important;
    background:
        radial-gradient(420px 240px at var(--gloss-x, 50%) calc(var(--gloss-y, 50%) - 40%), rgba(255, 255, 255, calc(var(--gloss-alpha, 0.45) * var(--light-intensity, 0.6))), rgba(255, 255, 255, 0.0) 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, rgba(0, 80, 157, 0.18), rgba(0, 80, 157, 0.06)),
        repeating-linear-gradient(var(--light-angle, 45deg), rgba(255, 255, 255, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 6px);
    background-attachment: scroll, scroll, scroll, scroll;
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
    backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 14px 32px rgba(0, 0, 0, 0.18), 0 0 36px rgba(0, 80, 157, 0.25);
    will-change: background-position, background;
}

.btn.btn-cta-animated {
    color: #00213d !important;
}

.btn.btn-cta-animated::before,
.btn.btn-outline-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        conic-gradient(from var(--light-angle, 45deg), rgba(255, 255, 255, 0.25) 0turn 0.08turn, rgba(255, 255, 255, 0) 0.08turn 1turn),
        linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0)),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.18"/></svg>');
    background-blend-mode: screen, screen, soft-light;
    background-repeat: no-repeat, no-repeat, repeat;
    background-size: auto, auto, 120px 120px;
    border-radius: inherit;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 100%);
    mask-image: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 100%);
}

.btn.btn-cta-animated::after,
.btn.btn-outline-dark::after {
    content: "";
    position: absolute;
    width: 140%;
    height: 80%;
    top: -30%;
    left: -20%;
    transform: rotate(var(--light-angle, 8deg));
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, calc(0.35 * var(--light-intensity, 0.6))), rgba(255, 255, 255, 0));
    filter: blur(8px);
    mix-blend-mode: screen;
    pointer-events: none;
}

.btn.btn-cta-animated:hover,
.btn.btn-outline-dark:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 20px 48px rgba(0, 0, 0, 0.22), 0 0 48px rgba(0, 80, 157, 0.35);
}

/* Ensure auth Continue CTA matches landing CTA border + glow (non-hover and hover) */
#login-form .btn.btn-cta-animated {
    /* Use glass CTA background/border and disable blue fill/pulse */
    background-color: transparent !important;
    animation: none !important;
    color: #00213d !important;
    /* match landing CTA text color */
}

/* Outer border pulse without resizing the button (animate ring via box-shadow) */
.btn-cta-border-pulse {
    position: relative;
    overflow: visible !important;
    animation: btnBorderPulseShadow 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes btnBorderPulseShadow {
    0% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.35),
            0 14px 32px rgba(0, 0, 0, 0.18),
            0 0 36px rgba(0, 80, 157, 0.25),
            0 0 0 0 rgba(0, 80, 157, 0.35);
    }

    70% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.35),
            0 14px 32px rgba(0, 0, 0, 0.18),
            0 0 36px rgba(0, 80, 157, 0.25),
            0 0 0 16px rgba(0, 80, 157, 0);
    }

    100% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.35),
            0 14px 32px rgba(0, 0, 0, 0.18),
            0 0 36px rgba(0, 80, 157, 0.25),
            0 0 0 0 rgba(0, 80, 157, 0);
    }
}

/* Global toggle to hide promo block across the app.
Set window.PROMO_BLOCK_ENABLED=true in a page script to re-enable.
Default is disabled via CSS to ensure no flash.
This CSS rule keeps it hidden even if inline styles try to show it.
Pages’ JS will also be updated to respect a JS flag for stronger control.
If you want to re-enable globally via CSS, remove this block.
Specificity kept modest to allow inline re-enable if needed.
Note: We target the id used across pages: promo-block 
Disabled by default */
/* stylelint-disable-next-line */
#promo-block {
    display: none !important;
}

/*
  Stack utility: enforce exactly 20px between visible sibling blocks.
  - Resets top/bottom margins on all direct element children
  - Adds 20px when an element has any earlier VISIBLE sibling (ignores script/style/hidden)
  Using the general sibling combinator (~) ensures spacing still applies even if
  non-layout elements (like <script>) sit between layout blocks.
*/
.stack-20> :not(script):not(style) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.stack-20> :not(script):not(style):last-child {
    /* Ensure absolutely no trailing margin below the last child (the footer) */
    margin-bottom: 0 !important;
}

/* This is an older duplicate of the contract spacing.css owns. It has to carry
   the same .modal / .modal-overlay exclusion, or excluding them there simply
   hands the gap back to this copy: a fixed full-viewport backdrop is not part
   of the vertical rhythm, but margin still moves it, and /pricing's loading
   modal was starting 20px down the screen because of this rule. */
.stack-20> :not(script):not(style):not(.modal):not(.modal-backdrop):not(.offcanvas-backdrop):not(.modal-overlay):not([hidden]):not([aria-hidden="true"]):not([style*="display: none"])~:not(script):not(style):not(.modal):not(.modal-backdrop):not(.offcanvas-backdrop):not(.modal-overlay):not([hidden]):not([aria-hidden="true"]):not([style*="display: none"]) {
    margin-top: 20px !important;
}

/* When using stack-20, remove built-in hero top padding */
.stack-20 .hero-section {
    padding-top: 0 !important;
    min-height: auto !important;
}

/* Pricing and other pages use a wrapper named content-background.
   Remove its top padding when stacked so navbar→content gap is exactly 20px. */
.stack-20 .content-background {
    padding-top: 0 !important;
}

/* Ensure navbar has no bottom spacing that competes with stack-20 */
.navbar {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* iOS safe-area support for notched devices */
body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Eliminate 300ms tap delay on all interactive elements */
a, button, input, select, textarea, .btn,
.app-switcher-btn, .account-picker-avatar,
.app-switcher-item, .account-picker-item, .nav-link {
    touch-action: manipulation;
}

/* Contain tall modals on phones/tablets; desktop keeps default behavior */
@media (max-width: 991px) {
    .custom-modal { max-height: 90vh; display: flex; flex-direction: column; }
    .custom-modal-body { overflow-y: auto; flex: 1; }
}

/* Touch devices: suppress hover-only transforms that stick after taps */
@media (hover: none) {
    .navbar-brand:hover { transform: none !important; }
    .navbar-brand:hover i { color: inherit !important; }
    .account-picker-avatar:hover { transform: none !important; }
    .pricing-card:hover { transform: none !important; }
}

/* ===== Mobile Responsiveness ===== */
@media (max-width: 767.98px) {
  /* Glass sparkle pseudos (.card::after, 120% wide) bleed past full-width cards */
  body { overflow-x: hidden; }
  .card-body { padding: 1.25rem; }
  .card-title { margin-bottom: 1.25rem !important; }
  .hero-section { min-height: auto; padding-top: 60px; }
  .navbar .container { border-radius: 20px; padding: 0.5rem 1rem; }
  .section-title { font-size: 1.75rem; margin-bottom: 1.5rem; }
  /* All form inputs: prevent iOS focus-zoom */
  input[type="text"], input[type="email"], input[type="number"], input[type="search"],
  input[type="password"], input[type="tel"], input[type="url"],
  textarea, select { font-size: 16px !important; }
}

@media (max-width: 575.98px) {
  .section-title { font-size: 1.5rem; margin-bottom: 1.5rem !important; }
}