:root {
    /* FOREST GREEN PALETTE */
    --primary-color: #253d1c;     /* Very dark forest */
    --secondary-color: #5c7852;   /* Forest green */
    --bg-color: #eef3eb;          /* Near-white green tint */
    --card-bg: #f5f8f3;           /* Clean card background */
    --border-color: #c0d0ba;      /* Light sage border */
    --text-color: #162b0e;        /* Deepest green */
    --muted-color: #466140;       /* Dark forest muted */

    /* HEADER PALETTE */
    --header-bg: #162b0e;         /* Deepest */
    --header-text: #d8e8d2;       /* Light sage-white */
    /* Fluid header height: 60px @1280 → 70px @1920 → 80px @2560+. Mobile
       overrides this in mobile.css's <768px rules where needed. */
    --header-height: clamp(60px, 1.04vw + 46.7px, 80px);

    /* Typography */
    --font-display: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', sans-serif;
}

/* Dark mode pending — prevent flash on post-login dashboards (operator/admin/supplier).
   The login screen (index.html auth-layer) intentionally does NOT set this class
   so the auth page always renders in light mode. */
html.dark-mode-pending { background: #0d121c; }

/* ═══════════════════════════════════════════════════════════════
   Adaptive root font-size — desktop / laptop / large monitor
   ───────────────────────────────────────────────────────────────
   The dashboards use rem for typography and many spacing values.
   By scaling the root font-size with viewport width, the entire
   UI adapts smoothly between a 15.6" laptop and a 27" monitor:

       Viewport   Root size   ~rem→px feel
       1366       13.74px     compact (small laptop)
       1440       14.05px     default laptop
       1600       14.72px     larger laptop
       1920       16.06px     22" monitor (matches design baseline)
       2560       18.00px     27" monitor (clamp ceiling)

   Mobile (≤768px) is excluded so mobile.css's 16px input rule and
   touch-target sizing keep their intended pixel anchors.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    html {
        font-size: clamp(13px, 0.42vw + 8px, 18px);
    }
}

/* GLOBAL FONT: Nunito */
body {
    font-family: var(--font-body);

    /* UPDATED: Background Image Logic */
    background-color: var(--bg-color);
    /* Keep original brightness, add vignette with a slight cool tint */
    background-image:
        radial-gradient(ellipse at center, rgba(14, 29, 8, 0) 55%, rgba(14, 29, 8, 0.20) 100%),
        linear-gradient(180deg, rgba(22, 43, 14, 0.04) 0%, rgba(22, 43, 14, 0) 40%, rgba(22, 43, 14, 0.12) 100%),
        url("/background.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;

    color: var(--text-color);
    margin: 0;
    padding: 0;
}

/* Ensure all form elements also use the body font */
button,
input,
select,
textarea {
    font-family: var(--font-body);
}

/* Headings use display font */
h1, h2, h3 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

/* --- AUTH STYLES --- */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: safe center;
    min-height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    padding: 16px;
    box-sizing: border-box;
    overflow-y: auto;
}

.auth-bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 0;
}

.auth-card {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.92);
    padding: 18px 28px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(37, 47, 69, 0.15);
    width: 100%;
    max-width: 420px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    margin: auto;
}

.auth-card .form-group {
    margin-bottom: 8px;
}

.auth-card .form-group label {
    margin-bottom: 2px;
    font-size: 0.82rem;
}

.auth-card .form-group input,
.auth-card .form-group select {
    padding: 7px 10px;
    font-size: 14px;
}

.auth-card .btn-primary {
    padding: 9px;
    margin-top: 3px;
}

.auth-card .login-logo-wrap img {
    max-width: 100px !important;
}

.auth-card h2 {
    margin-top: 0;
    margin-bottom: 4px;
    font-size: 1.1rem;
}

.auth-card .auth-switch {
    margin-top: 8px;
    font-size: 0.82rem;
}

.auth-error-msg {
    text-align: center;
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.2);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 0.88rem;
}

.auth-success-msg {
    text-align: center;
    color: #466140;
    background: rgba(92, 120, 82, 0.08);
    border: 1px solid rgba(92, 120, 82, 0.2);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 0.88rem;
}

.auth-card .btn-primary:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Social Login Buttons */
.social-login-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 0;
}

.btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 9px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #fff;
    color: var(--text-color);
    font-size: 0.92rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.btn-social:hover {
    background: #f8f9fa;
    border-color: #b0bec5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.btn-social:active {
    transform: scale(0.98);
}

.btn-social svg {
    flex-shrink: 0;
}


/* Auth Divider */
.auth-divider {
    display: flex;
    align-items: center;
    margin: 10px 0;
    gap: 12px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.auth-divider span {
    font-size: 0.82rem;
    color: var(--muted-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


.auth-spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: auth-spin 0.8s linear infinite;
}

@keyframes auth-spin {
    to { transform: rotate(360deg); }
}




.auth-switch {
    text-align: center;
    margin-top: 15px;
    font-size: 0.9rem;
}

.auth-switch a {
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: bold;
}

.auth-switch a:hover {
    color: var(--primary-color);
}

.login-logo-wrap {
    position: relative;
    display: inline-block;
    overflow: hidden;
    background: transparent;
    border: none;
}

.login-logo {
    display: block;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.login-logo-wrap::after {
    content: "";
    position: absolute;
    top: -30%;
    left: -70%;
    width: 50%;
    height: 160%;
    background: linear-gradient(75deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 48%, rgba(255, 255, 255, 0) 100%);
    transform: translate(-170%, -10%) skewX(-12deg);
    animation: loginLogoShine 4.2s ease-in-out infinite;
    pointer-events: none;
    mix-blend-mode: screen;
    -webkit-mask-image: url("/login-logo.png");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-image: url("/login-logo.png");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100% 100%;
    opacity: 0.95;
}

@keyframes loginLogoShine {

    0%,
    55% {
        transform: translate(-170%, -10%) skewX(-12deg);
        opacity: 0;
    }

    60% {
        opacity: 1;
    }

    100% {
        transform: translate(240%, 12%) skewX(-12deg);
        opacity: 0;
    }
}

/* --- HEADER --- */
.app-header {
    background: linear-gradient(90deg, #162b0e 0%, #253d1c 50%, #162b0e 100%);
    color: var(--header-text);
    width: 100%;
    min-height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 30px;
    box-sizing: border-box;
    border-bottom: 4px solid var(--secondary-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    flex-wrap: wrap;
    gap: 10px;
}

.nav-left,
.nav-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* ── Session Countdown Timer ── */
.session-timer {
    display: flex;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: 'Nunito', sans-serif;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.1);
    padding: 5px 12px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.session-timer-warning {
    color: #fff;
    background: rgba(231, 76, 60, 0.7);
    border-color: rgba(231, 76, 60, 0.9);
    animation: timerPulse 1s ease-in-out infinite alternate;
}

@keyframes timerPulse {
    from { opacity: 1; }
    to { opacity: 0.6; }
}

.nav-center {
    flex-grow: 1;
    text-align: center;
}

.nav-logo {
    height: 56px;
    width: auto;
    filter: brightness(0) invert(1);
}

/* Logo in top-left corner — original colors + spin animation */
.nav-logo-left {
    filter: none;
    animation: navLogoSpinY 20s linear infinite;
    animation-delay: 20s;
    transform-origin: center;
    transform-style: preserve-3d;
    backface-visibility: visible;
    will-change: transform;
}

.nav-left>a {
    display: inline-block;
    perspective: 800px;
    transition: transform 0.2s;
}

.nav-left>a:hover {
    transform: scale(1.05);
}

@keyframes navLogoSpinY {
    0% {
        transform: rotateY(0deg);
    }

    4.5% {
        transform: rotateY(360deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

.nav-center h1 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--header-text);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --- HEADER AVATAR (Gradient Blue) --- */
.header-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    /* Blue gradient */
    background: linear-gradient(135deg,
            #77abfa 0%,
            #2a5bb6 100%);

    /* Depth & glow */
    box-shadow:
        0 3px 8px rgba(47, 111, 228, 0.45),
        inset 0 1px 2px rgba(255, 255, 255, 0.35);

    color: #ffffff;
    font-weight: 700;
    font-size: 14px;

    cursor: pointer;
    flex-shrink: 0;

    border: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Hover effect */
.header-avatar:hover {
    transform: translateY(-1px);
    box-shadow:
        0 5px 12px rgba(47, 111, 228, 0.55),
        inset 0 1px 2px rgba(255, 255, 255, 0.35);
}

body.dark-mode .header-avatar {
    background: linear-gradient(135deg,
            #5d8dff 0%,
            #304aa0 100%);

    box-shadow:
        0 3px 10px rgba(93, 141, 255, 0.55),
        inset 0 1px 2px rgba(255, 255, 255, 0.25);
}

/* --- NOTIFICATION BELL --- */
.notification-bell-container {
    position: relative;
    display: flex;
    align-items: center;
}

.notification-bell-btn {
    position: relative;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}

.notification-bell-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.notification-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border-radius: 10px;
    pointer-events: none;
    animation: badgePop 0.3s ease;
}

@keyframes badgePop {
    0% { transform: scale(0); }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.notification-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 360px;
    max-height: 480px;
    background: var(--card-bg, #ffffff);
    border-radius: 12px;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.12),
        0 1px 4px rgba(0, 0, 0, 0.08);
    z-index: 2000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color, #e0ddd8);
}

body.dark-mode .notification-panel {
    background: #152510;
    border-color: #1e3518;
}

.notification-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color, #e0ddd8);
}

body.dark-mode .notification-panel-header {
    border-color: #1e3518;
}

.notification-panel-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color, #1b3a2d);
    opacity: 1;
}

body.dark-mode .notification-panel-header h3 {
    color: #e8eaed;
}

.notification-mark-all {
    background: none;
    border: none;
    color: var(--secondary-color, #5c7852);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}

.notification-mark-all:hover {
    background: rgba(74, 143, 109, 0.1);
}

.notification-panel-body {
    overflow-y: auto;
    flex: 1;
    max-height: 400px;
}

.notification-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--muted-color, #7a8577);
    font-size: 14px;
    gap: 8px;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
}

.notification-item:hover {
    background: rgba(74, 143, 109, 0.04);
}

body.dark-mode .notification-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.notification-item.unread {
    background: rgba(74, 143, 109, 0.06);
}

body.dark-mode .notification-item.unread {
    background: rgba(93, 141, 255, 0.08);
}

.notification-item.read {
    opacity: 0.65;
}

.notification-item.clickable:hover {
    background: rgba(74, 143, 109, 0.10);
}
body.dark-mode .notification-item.clickable:hover {
    background: rgba(93, 141, 255, 0.14);
}

.notification-arrow {
    flex-shrink: 0;
    align-self: center;
    opacity: 0.3;
    transition: opacity 0.15s, transform 0.15s;
}
.notification-item.clickable:hover .notification-arrow {
    opacity: 0.7;
    transform: translateX(2px);
}

.notification-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: rgba(74, 143, 109, 0.1);
    border-radius: 8px;
    margin-top: 2px;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color, #1b3a2d);
    line-height: 1.3;
}

body.dark-mode .notification-title {
    color: #e8eaed;
}

.notification-message {
    font-size: 12px;
    color: var(--muted-color, #7a8577);
    line-height: 1.4;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.notification-time {
    font-size: 11px;
    color: var(--muted-color, #7a8577);
    margin-top: 4px;
    opacity: 0.8;
}

.notification-dot {
    position: absolute;
    top: 16px;
    right: 12px;
    width: 8px;
    height: 8px;
    background: var(--secondary-color, #5c7852);
    border-radius: 50%;
    flex-shrink: 0;
}

.notification-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--muted-color, #7a8577);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    padding: 0;
}

.notification-item:hover .notification-delete-btn {
    opacity: 0.7;
}

.notification-delete-btn:hover {
    opacity: 1 !important;
    background: rgba(200, 50, 50, 0.12);
    color: #c83232;
}

body.dark-mode .notification-delete-btn:hover {
    background: rgba(255, 100, 100, 0.15);
    color: #ff8080;
}

.notification-item:has(.notification-dot) .notification-delete-btn {
    right: 28px;
}

/* Responsive: mobile notification panel */
@media (max-width: 480px) {
    .notification-panel {
        width: calc(100vw - 20px);
        right: -10px;
    }
}

/* --- LAYOUT --- */
.container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
}

h1 {
    color: var(--primary-color);
}

h2 {
    border-bottom: 2px solid var(--secondary-color);
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: var(--primary-color);
    font-size: 1.5rem;
}

h3 {
    margin-top: 0;
    font-size: 1.1em;
    color: var(--text-color);
    opacity: 0.7;
}

.section {
    margin-bottom: 40px;
    position: relative;
}

.section+.section::before {
    content: "";
    display: block;
    height: 1px;
    margin: 8px 0 26px;
    background: linear-gradient(90deg, transparent, rgba(114, 148, 183, 0.45), transparent);
}

/* Floating Panel — solid background, reserve glassmorphism for elevated elements */
.card {
    background: #ffffff;
    padding: 40px;
    border-radius: 16px;
    box-shadow:
        0 1px 3px rgba(27, 58, 45, 0.06),
        0 8px 32px rgba(27, 58, 45, 0.08);
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    transition: box-shadow 0.18s ease;
}

.card:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 14px 46px rgba(37, 47, 69, 0.2),
        0 2px 6px rgba(0, 0, 0, 0.06);
}

.product-item,
.plot-item {
    background: #fbfcfe;
    border: 1px solid var(--border-color);
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 15px;
    position: relative;
    transition: box-shadow 0.16s ease, border-color 0.16s ease;
}

.product-item:hover,
.plot-item:hover {
    box-shadow: 0 10px 22px rgba(37, 47, 69, 0.08);
    border-color: rgba(114, 148, 183, 0.5);
}

/* When a dropdown is open inside the item, elevate above siblings like .step-actions */
.product-item:has(.custom-select.open),
.plot-item:has(.custom-select.open) {
    z-index: 1500;
}

.plot-item {
    border-left: 4px solid var(--secondary-color);
}

/* GRID SYSTEMS */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}

/* RESPONSIVE MEDIA QUERIES */

/* Tablet / Small Laptop */
@media (max-width: 1000px) {
    .grid-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile / Vertical Screens */
@media (max-width: 768px) {

    /* Stack Grids to single column */
    .grid-2,
    .grid-5 {
        grid-template-columns: 1fr;
    }

    /* Adjust Header */
    .app-header {
        flex-direction: column;
        height: auto;
        padding: 15px;
        gap: 15px;
    }

    .nav-center {
        order: 2;
        width: 100%;
        margin-bottom: 5px;
    }

    .nav-left {
        order: 1;
        align-self: flex-start;
    }

    .nav-right {
        order: 1;
        align-self: flex-end;
        position: absolute;
        top: 15px;
        right: 15px;
    }

    .nav-center h1 {
        font-size: 1.2rem;
    }

    /* Adjust Card Padding */
    .card {
        padding: 25px;
    }

    /* Slightly reduced on mobile */
    .container {
        margin: 15px auto;
        padding: 0 15px;
    }

    /* Auth Card */
    .auth-container {
        padding: 16px;
        align-items: flex-start;
    }

    .auth-card {
        padding: 20px;
        max-width: 400px;
        margin: auto;
    }

    .auth-card .login-logo-wrap img {
        max-width: 100px !important;
    }

    .auth-card h2 {
        font-size: 1.1rem;
        margin-bottom: 6px;
    }

    .auth-card #authSubtitle {
        font-size: 0.82rem;
        margin-bottom: 14px !important;
    }

    .auth-card .form-group {
        margin-bottom: 8px;
    }

    .auth-card .form-group label {
        font-size: 0.78rem;
    }

    .auth-card .form-group input,
    .auth-card .form-group select {
        padding: 7px 9px;
        font-size: 13px;
    }

    .auth-card .btn-primary {
        padding: 9px;
        font-size: 0.92rem;
    }

    .btn-social {
        padding: 9px 14px;
        font-size: 0.85rem;
    }

    .auth-divider {
        margin: 10px 0;
    }

    .auth-card .auth-switch {
        margin-top: 8px;
        font-size: 0.78rem;
    }

    /* Keep video fully covering tall mobile viewports */
    .auth-bg-video {
        width: 100vw;
        height: 100vh;
    }

    /* Plot Item Button Position */
    .btn-remove {
        top: 5px;
        right: 5px;
        padding: 10px;
        /* Larger touch area */
    }

    .app-badge {
        width: 30px;
    }
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--primary-color);
}

.required-star {
    color: #e74c3c;
    margin-left: 2px;
}

/* Inline error text shown beneath an invalid field. Kept generic so
   any form panel that flags errors per-field can use the same affordance. */
.field-error {
    margin: 6px 0 0;
    color: #dc2626;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.35;
}
body.dark-mode .field-error { color: #f87171; }
.input-error,
.gt-vinput-wrap.input-error > input {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12) !important;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 10px;
    /* Slightly larger padding for touch */
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #ffffff;
    font-size: 16px;
    /* Prevents zooming on iPhone inputs */
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(109, 149, 189, 0.2);
}

/* ── Operator field (highlighted) ── */
.operator-field {
    background: linear-gradient(135deg, rgba(47, 111, 228, 0.06) 0%, rgba(47, 111, 228, 0.02) 100%);
    border: 1.5px solid rgba(47, 111, 228, 0.25);
    border-radius: 10px;
    padding: 14px 16px 10px;
    margin-top: 4px;
}

.operator-field label {
    color: #2f6fe4 !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.02em;
}

.operator-field select {
    border-color: rgba(47, 111, 228, 0.35);
    font-weight: 600;
}

.operator-field select:focus {
    border-color: #2f6fe4;
    box-shadow: 0 0 0 3px rgba(47, 111, 228, 0.15);
}

body.dark-mode .operator-field {
    background: linear-gradient(135deg, rgba(59, 125, 221, 0.1) 0%, rgba(59, 125, 221, 0.04) 100%);
    border-color: rgba(59, 125, 221, 0.3);
}

body.dark-mode .operator-field label {
    color: #5b9bff !important;
}

body.dark-mode .operator-field select {
    border-color: rgba(59, 125, 221, 0.4);
}

/* Custom dropdown (HS/product) */
.native-select-hidden {
    display: none !important;
}

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

.custom-select.open {
    z-index: 1500;
}

.custom-select-toggle {
    width: 100%;
    text-align: left;
    padding: 12px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #ffffff;
    color: var(--text-color);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 10px rgba(37, 47, 69, 0.05);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.custom-select-toggle::after {
    content: "▾";
    font-size: 12px;
    color: var(--primary-color);
    margin-left: auto;
}

.custom-select.open .custom-select-toggle {
    border-color: var(--secondary-color);
    box-shadow: 0 4px 12px rgba(114, 148, 183, 0.18);
}

.custom-select-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    max-height: 260px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(37, 47, 69, 0.18);
    z-index: 1500;
    display: none;
}

/* --- Specific override for Plot Dropdowns to be wider on desktop --- */
@media (min-width: 1001px) {
    .plot-item .custom-select-menu {
        width: max-content;
        /* Allow it to be wider than the column */
        min-width: 100%;
        /* But at least as wide as the column */
        max-width: 1082px;
        /* Cap it so it doesn't overflow the overall card */
    }
}

/* On tablet / phone the plot card is too narrow for max-content widths;
   constrain the dropdown to the trigger's width so country names like
   "Democratic Republic of the Congo" don't push a horizontal scrollbar
   into the plot card. */
@media (max-width: 1000px) {
    .plot-item .custom-select-menu {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ------------------------------------------------------------- */

.custom-select.open .custom-select-menu {
    display: block;
}

.custom-select-option {
    padding: 10px 12px;
    cursor: pointer;
    white-space: normal;
    word-break: break-word;
    color: var(--text-color);
    transition: background-color 0.12s ease;
}

.custom-select-option:hover {
    background: rgba(114, 148, 183, 0.12);
}

.custom-select-option.selected {
    background: rgba(37, 47, 69, 0.1);
    font-weight: 600;
}

/* Native select in Step 3 (Plots) should stay compact and truncate long HS text */
.plot-item .plot-product-select {
    max-width: 260px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Premium calendar icon to match dropdown look */
.plot-date-from,
.plot-date-to {
    padding-right: 42px;
}

.plot-date-from::-webkit-calendar-picker-indicator,
.plot-date-to::-webkit-calendar-picker-indicator {
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 6px;
    cursor: pointer;
    border-radius: 10px;
    background-color: rgba(114, 148, 183, 0.18);
    box-shadow: inset 0 0 0 1px rgba(114, 148, 183, 0.35);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237294b7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='4' ry='4'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cpath d='M8 14h2v2H8zM14 14h2v2h-2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.plot-date-from::-moz-calendar-picker-indicator,
.plot-date-to::-moz-calendar-picker-indicator {
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 6px;
    cursor: pointer;
    border-radius: 10px;
    background-color: rgba(114, 148, 183, 0.18);
    box-shadow: inset 0 0 0 1px rgba(114, 148, 183, 0.35);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237294b7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='4' ry='4'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cpath d='M8 14h2v2H8zM14 14h2v2h-2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.plot-date-from::-webkit-calendar-picker-indicator:hover,
.plot-date-to::-webkit-calendar-picker-indicator:hover,
.plot-date-from::-moz-calendar-picker-indicator:hover,
.plot-date-to::-moz-calendar-picker-indicator:hover {
    box-shadow: inset 0 0 0 1px rgba(114, 148, 183, 0.45), 0 3px 8px rgba(114, 148, 183, 0.25);
    transform: translateY(-1px);
}

body.dark-mode .plot-date-from::-webkit-calendar-picker-indicator,
body.dark-mode .plot-date-to::-webkit-calendar-picker-indicator,
body.dark-mode .plot-date-from::-moz-calendar-picker-indicator,
body.dark-mode .plot-date-to::-moz-calendar-picker-indicator {
    background-color: rgba(92, 120, 82, 0.2);
    box-shadow: inset 0 0 0 1px rgba(92, 120, 82, 0.4);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235ba06f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='4' ry='4'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cpath d='M8 14h2v2H8zM14 14h2v2h-2z'/%3E%3C/svg%3E");
}

/* --- COUNTRY & EMOJI FIXES --- */
.custom-select-toggle,
.custom-select-option {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    cursor: pointer;
}

.custom-select-option {
    background-color: transparent;
}

/* 2. Specific Override for COUNTRY Dropdowns (Needs Emoji Font) */
/* This brings back the flags only where they are needed */
.country-dropdown .custom-select-toggle,
.country-dropdown .custom-select-option {
    font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Nunito', sans-serif;
}

/* Native selects fallback */
#supCountry,
.plot-country {
    font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Nunito', sans-serif;
}

/* Ensure HS/product selects wrap text and don't force dropdown wider than the field */
.product-select,
.plot-product-select,
.plot-lot-select {
    max-width: 100%;
    width: 100%;
    min-width: 0;
}

.product-select option,
.plot-product-select option,
.plot-lot-select option {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
}

/* Buttons */
.btn-primary {
    background-color: var(--primary-color);
    color: white;
    width: 100%;
    font-size: 1.1rem;
    padding: 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.18s ease;
    position: relative;
    z-index: 1;
}

.btn-primary:hover {
    background-color: #12280d;
    transform: translateY(-1px);
}

/* Dark mode swaps --primary-color to a light accent used elsewhere (e.g. titles),
   so pin the primary-action button to an explicit forest green here — otherwise
   the button would render white-on-white. */
body.dark-mode .btn-primary {
    background-color: #1f4426;
    color: #ffffff;
}
body.dark-mode .btn-primary:hover {
    background-color: #29633a;
}

/* ── Profile Nudge (incomplete profile) ── */
#step-1.profile-blur > .card {
    filter: blur(3px);
    pointer-events: none;
    user-select: none;
    opacity: 0.4;
    transition: filter 0.4s, opacity 0.4s;
}

#step-1.profile-blur {
    position: relative;
}

.profile-nudge-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    animation: nudgeFadeIn 0.5s ease;
}

.profile-nudge-overlay .nudge-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2f6fe4 0%, #1a4faa 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    animation: nudgePulse 2s ease-in-out infinite;
}

.profile-nudge-overlay .nudge-icon svg {
    stroke: #fff;
}

.profile-nudge-overlay .nudge-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #12280d;
    margin-bottom: 6px;
}

.profile-nudge-overlay .nudge-desc {
    font-size: 0.88rem;
    color: #5a6a7e;
    margin-bottom: 18px;
    text-align: center;
    max-width: 340px;
    line-height: 1.5;
}

.profile-nudge-overlay .nudge-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #2f6fe4 0%, #1a4faa 100%);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(47, 111, 228, 0.3);
    transition: transform 0.15s, box-shadow 0.15s;
}

.profile-nudge-overlay .nudge-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(47, 111, 228, 0.4);
}

.profile-nudge-overlay .nudge-btn .nudge-arrow {
    font-size: 1.1rem;
    animation: nudgeBounceX 1s ease-in-out infinite;
}

@keyframes nudgePulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

@keyframes nudgeBounceX {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}

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

body.dark-mode .profile-nudge-overlay .nudge-title {
    color: #e2e8f0;
}

body.dark-mode .profile-nudge-overlay .nudge-desc {
    color: #94a3b8;
}

body.dark-mode .profile-nudge-overlay .nudge-icon {
    background: linear-gradient(135deg, #3b7ddd 0%, #2558a8 100%);
}

body.dark-mode .profile-nudge-overlay .nudge-btn {
    background: linear-gradient(135deg, #3b7ddd 0%, #2558a8 100%);
}

.shine-btn {
    position: relative;
    overflow: hidden;
}

.shine-btn::after {
    content: "";
    position: absolute;
    top: -20%;
    left: -60%;
    width: 40%;
    height: 140%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-160%);
    animation: buttonShine 5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
    pointer-events: none;
}

@keyframes buttonShine {

    0%,
    60% {
        transform: translateX(-160%);
        opacity: 0;
    }

    70% {
        opacity: 1;
    }

    100% {
        transform: translateX(220%);
        opacity: 0;
    }
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.btn-secondary:hover {
    background-color: var(--primary-color);
}

/* Danger outline button — subtle by default, red on hover.
   Used for destructive actions like "Clear All" so they don't steal attention
   from the primary palette but still signal intent clearly. */
.btn-danger-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1.5px solid #e2e8f0;
    background: transparent;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    font-family: inherit;
}
.btn-danger-outline:hover:not(:disabled) {
    border-color: #ef4444;
    color: #ef4444;
    background: #fef2f2;
}
body.dark-mode .btn-danger-outline {
    border-color: rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.6);
}
body.dark-mode .btn-danger-outline:hover:not(:disabled) {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239,68,68,0.12);
}

/* Plot library / submitted-plots row — the whole row is the click target for preview */
.plot-library-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 6px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.015);
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.plot-library-item--clickable {
    cursor: pointer;
}
.plot-library-item--clickable:hover {
    background: rgba(37, 61, 28, 0.05);
    border-color: rgba(37, 61, 28, 0.25);
}
.plot-library-item--clickable:active {
    transform: translateY(1px);
}
.plot-library-item--clickable:focus-visible {
    outline: 2px solid var(--primary-color, #253d1c);
    outline-offset: 2px;
}
body.dark-mode .plot-library-item {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}
body.dark-mode .plot-library-item--clickable:hover {
    background: rgba(168, 216, 168, 0.08);
    border-color: rgba(168, 216, 168, 0.3);
}

/* ─── Supplier filter bar ───
   Compact search + pill-shaped filter selects pinned above a list.
   Mirrors the operator gt-filters-bar but scoped to the supplier palette. */
.sup-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-shrink: 0;
}
.sup-filter-search-wrap {
    position: relative;
    flex: 1 1 240px;
    min-width: 200px;
}
.sup-filter-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted-color);
    pointer-events: none;
}
.sup-filter-search {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    color: var(--text-color);
    font-size: 0.86rem;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.sup-filter-search::placeholder { color: var(--muted-color); }
.sup-filter-search:focus {
    outline: none;
    border-color: var(--primary-color, #253d1c);
    box-shadow: 0 0 0 3px rgba(37, 61, 28, 0.15);
}
.sup-filters-row .gt-fselect { flex: 0 0 auto; min-width: 140px; }
body.dark-mode .sup-filter-search {
    background: rgba(14, 29, 8, 0.9);
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.12);
}
body.dark-mode .sup-filter-search:focus {
    border-color: #c0d0ba;
    box-shadow: 0 0 0 3px rgba(168, 216, 168, 0.2);
}

/* Inline rename input inside a plot-library-item — same typography as the
   plot name so the row height doesn't jump when entering edit mode. */
.plot-library-rename-input {
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-color);
    width: 100%;
    padding: 4px 8px;
    border: 1.5px solid var(--primary-color, #253d1c);
    border-radius: 6px;
    background: #fff;
    outline: none;
}
.plot-library-rename-input:focus {
    border-color: var(--primary-color, #253d1c);
    box-shadow: 0 0 0 3px rgba(37, 61, 28, 0.15);
}
body.dark-mode .plot-library-rename-input {
    background: rgba(14, 29, 8, 0.9);
    color: #e2e8f0;
    border-color: #c0d0ba;
}
body.dark-mode .plot-library-rename-input:focus {
    box-shadow: 0 0 0 3px rgba(168, 216, 168, 0.2);
}

/* ─── Supplier product card (Step 2 items) ───
   Polished repeatable card with a numbered badge header and a 2-column grid
   of fields. Mirrors the palette of other supplier surfaces. */
.sup-product-card {
    background: var(--input-bg, #fbfcfe);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 16px 16px;
    margin-bottom: 12px;
    transition: box-shadow 0.16s ease, border-color 0.16s ease;
}
.sup-product-card:hover {
    box-shadow: 0 8px 24px rgba(27, 58, 45, 0.08);
    border-color: rgba(37, 61, 28, 0.28);
}
.sup-product-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.sup-product-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5c7852 0%, #253d1c 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.sup-product-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.sup-product-card .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sup-product-card .field label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}
.sup-product-card .field input,
.sup-product-card .field select {
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    color: var(--text-color);
    font-size: 0.92rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    /* Truncate the selected value in the closed select so it never stretches
       past the grid cell and the dropdown stays anchored to the control. */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.sup-product-card .field input:focus,
.sup-product-card .field select:focus {
    outline: none;
    border-color: var(--primary-color, #253d1c);
    box-shadow: 0 0 0 3px rgba(37, 61, 28, 0.15);
}
@media (max-width: 640px) {
    .sup-product-card__grid { grid-template-columns: 1fr; }
}
body.dark-mode .sup-product-card {
    background: rgba(14, 29, 8, 0.55);
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .sup-product-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    border-color: rgba(168, 216, 168, 0.28);
}
body.dark-mode .sup-product-card .field input,
body.dark-mode .sup-product-card .field select {
    background: rgba(14, 29, 8, 0.9);
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.12);
}
body.dark-mode .sup-product-card .field input:focus,
body.dark-mode .sup-product-card .field select:focus {
    border-color: #c0d0ba;
    box-shadow: 0 0 0 3px rgba(168, 216, 168, 0.2);
}

/* ═══════════════════════════════════════════════════════════════
   FilterSelect — shared custom dropdown (mirrors admin dashboard).
   Anchors the popover to the trigger and caps the menu so long HS-code
   descriptions no longer push the native popup past the viewport. */
.gt-fselect {
    position: relative;
    display: inline-block;
    width: 100%;
}
.gt-fselect > button.sup-fselect-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    text-align: left;
    line-height: 1.3;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    color: var(--text-color);
    font: inherit;
    font-size: 0.92rem;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    appearance: none;
    -webkit-appearance: none;
    min-width: 0;
}
.gt-fselect > button.sup-fselect-trigger:hover:not(:disabled) {
    border-color: var(--secondary-color, #5c7852);
}
.gt-fselect.is-open > button.sup-fselect-trigger {
    border-color: var(--primary-color, #253d1c);
    box-shadow: 0 0 0 3px rgba(37, 61, 28, 0.15);
}
.gt-fselect.is-disabled > button.sup-fselect-trigger {
    opacity: 0.55;
    cursor: not-allowed;
}
.gt-fselect__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gt-fselect__caret {
    flex: 0 0 auto;
    color: var(--muted-color);
    transition: transform 0.18s ease;
}
.gt-fselect.is-open .gt-fselect__caret { transform: rotate(180deg); }
.gt-fselect__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 100%;
    max-width: 100%;
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 12px 28px -8px rgba(17, 38, 12, 0.18),
                0 4px 10px -4px rgba(17, 38, 12, 0.12);
    z-index: 1000;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
    animation: gt-fselect-in 0.14s ease-out;
    box-sizing: border-box;
}
/* Portaled into document.body so the menu escapes any overflow:hidden ancestors.
   Position/size are set inline from the trigger's bounding rect. */
.gt-fselect__menu--portal {
    right: auto;
    min-width: 0;
    max-width: none;
    z-index: 9999;
}
@keyframes gt-fselect-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.gt-fselect__option {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.86rem;
    color: var(--text-color);
    cursor: pointer;
    line-height: 1.35;
    user-select: none;
    transition: background-color 0.12s, color 0.12s;
    white-space: normal;
    overflow-wrap: anywhere;
}
.gt-fselect__option.is-active { background: rgba(92, 120, 82, 0.12); }
.gt-fselect__option.is-selected {
    background: var(--secondary-color, #5c7852);
    color: #fff;
    font-weight: 600;
}
.gt-fselect__option.is-selected.is-active {
    background: #4a6642;
}
body.dark-mode .gt-fselect > button.sup-fselect-trigger {
    background: rgba(14, 29, 8, 0.9);
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.12);
}
body.dark-mode .gt-fselect.is-open > button.sup-fselect-trigger {
    border-color: #c0d0ba;
    box-shadow: 0 0 0 3px rgba(168, 216, 168, 0.2);
}
body.dark-mode .gt-fselect__menu {
    background: #0f1e0a;
    border-color: rgba(92, 120, 82, 0.3);
    box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.55),
                0 4px 10px -4px rgba(0, 0, 0, 0.4);
}
body.dark-mode .gt-fselect__option { color: #d8e2d3; }
body.dark-mode .gt-fselect__option.is-active { background: rgba(92, 120, 82, 0.22); }
body.dark-mode .gt-fselect__option.is-selected {
    background: #5c7852;
    color: #fff;
}

/* ─── Supplier back button ───
   Subtle pill-shaped link-style button for in-wizard "Back" navigation. */
.sup-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--muted-color);
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.sup-back-btn:hover {
    border-color: var(--primary-color, #253d1c);
    color: var(--primary-color, #253d1c);
    background: rgba(37, 61, 28, 0.04);
}
body.dark-mode .sup-back-btn {
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.65);
}
body.dark-mode .sup-back-btn:hover {
    border-color: #c0d0ba;
    color: #c0d0ba;
    background: rgba(168, 216, 168, 0.08);
}

/* Icon-only back button that lives inside the assess-header so it doesn't
   steal a full row of vertical space. */
.sup-back-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--muted-color);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.sup-back-icon-btn:hover {
    border-color: var(--primary-color, #253d1c);
    color: var(--primary-color, #253d1c);
    background: rgba(37, 61, 28, 0.06);
}
body.dark-mode .sup-back-icon-btn {
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.65);
}
body.dark-mode .sup-back-icon-btn:hover {
    border-color: #c0d0ba;
    color: #c0d0ba;
    background: rgba(168, 216, 168, 0.08);
}

/* Pill-shaped back button anchored to the top-right corner of the card,
   so it doesn't steal vertical space or clash with the assess-header icon. */
.gt-main > .sup-view-scroll > .sup-step-wrap > .section > .card {
    position: relative;
}
/* Anchor the back pill to the card itself — without this it positions
   against `.section` (the nearest `position: relative` ancestor), which
   can be wider than `.card` in scrollable step layouts and makes the
   button spill past the card's right edge. */
.card:has(> .sup-back-corner-btn) {
    position: relative;
}

.sup-back-corner-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--muted-color);
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.sup-back-corner-btn:hover {
    border-color: var(--primary-color, #253d1c);
    color: var(--primary-color, #253d1c);
    background: rgba(37, 61, 28, 0.05);
}
body.dark-mode .sup-back-corner-btn {
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.65);
}
body.dark-mode .sup-back-corner-btn:hover {
    border-color: #c0d0ba;
    color: #c0d0ba;
    background: rgba(168, 216, 168, 0.08);
}

/* Narrow viewports — the Back pill was colliding with the card's rounded
   top-right corner and spilling past the card edge. Shrink the pill,
   pull it in slightly, and hide the redundant "Back" label (the arrow
   icon + title="Back" still convey the action). */
@media (max-width: 600px) {
    .sup-back-corner-btn {
        top: 12px;
        right: 12px;
        padding: 6px 8px;
        gap: 0;
    }
    .sup-back-corner-btn > span {
        display: none;
    }
}

/* ─── Plot-item field alignment ───
   Labels wrap to two lines in narrow columns ("Production place desc."),
   which previously shifted inputs below them out of line with the others.
   Reserve a consistent label row height and force all controls to full width. */
.plot-item .grid-5 > .form-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.plot-item .grid-5 > .form-group > label {
    min-height: 2.6em;
    line-height: 1.2;
    display: flex;
    align-items: flex-start;
    gap: 3px;
    margin-bottom: 6px;
}
.plot-item .grid-5 > .form-group > label + * {
    margin-top: auto;
}
.plot-item .grid-5 > .form-group .country-dropdown,
.plot-item .grid-5 > .form-group .gt-fselect,
.plot-item .grid-5 > .form-group > input,
.plot-item .grid-5 > .form-group > select,
.plot-item .grid-5 > .form-group > textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════
   Draw-on-Map modal — opened from Step 3 so the user isn't fighting
   a tiny inline map. Has a fullscreen toggle (like the operator Home
   supply-chain map) and closes on Esc or backdrop click. */
.sup-map-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.sup-map-modal-card {
    background: #fff;
    border-radius: 14px;
    width: min(960px, 100%);
    height: min(680px, 92vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    transition: all 0.2s ease;
}
.sup-map-modal.sup-map-modal--fullscreen { padding: 0; }
.sup-map-modal.sup-map-modal--fullscreen > .sup-map-modal-card {
    width: 100vw;
    /* `dvh` follows the visual viewport on iOS — when the URL bar slides
       in, the card shrinks instead of overflowing past the bottom edge.
       Static vh is the fallback for older browsers. */
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
}

/* On phones, the 24px overlay padding eats too much of a 320px viewport
   (272px left for the card). Trim the padding so the map gets every
   pixel it can. */
@media (max-width: 600px) {
    .sup-map-modal {
        padding: 8px;
    }
    .sup-map-modal-card {
        height: min(680px, calc(100dvh - 16px));
    }
}
.sup-map-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.sup-map-modal-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sup-map-modal-body {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.sup-map-modal-body .map-section {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    border: none;
    padding: 12px 16px;
    border-radius: 0;
    background: transparent;
}
.sup-map-modal-body .map-section .map-canvas-wrap {
    flex: 1 1 0;
    min-height: 0;
}
.sup-map-modal-body .map-section .map-canvas {
    width: 100%;
    height: 100%;
    min-height: 300px;
}
body.dark-mode .sup-map-modal-card {
    background: #0f1e0a;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
body.dark-mode .sup-map-modal-header { border-bottom-color: rgba(255, 255, 255, 0.08); }
body.dark-mode .sup-map-modal-title { color: #e2e8f0; }

/* ═══════════════════════════════════════════════════════════════
   Generic "list item" palette used by the supplier views (Plot Library,
   Submitted Plots, Product Library). Pulled out of inline styles so the
   same class reads well in both light and dark mode without !important. */
.sup-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 6px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: rgba(37, 61, 28, 0.03);
    transition: background 0.15s, border-color 0.15s;
}
.sup-list-item--clickable { cursor: pointer; }
.sup-list-item--clickable:hover {
    background: rgba(37, 61, 28, 0.06);
    border-color: rgba(37, 61, 28, 0.25);
}
body.dark-mode .sup-list-item {
    background: rgba(168, 216, 168, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .sup-list-item--clickable:hover {
    background: rgba(168, 216, 168, 0.09);
    border-color: rgba(168, 216, 168, 0.3);
}

.btn-small {
    padding: 5px 10px;
    font-size: 0.8rem;
    background: #9faec0;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.btn-small:hover {
    background: #3a5068;
    color: #fff;
}

.btn-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    color: #e74c3c;
    border: none;
    font-weight: bold;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
}

.hint {
    font-size: 0.85rem;
    color: var(--text-color);
    opacity: 0.55;
    margin-bottom: 15px;
    font-style: italic;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 3000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(37, 47, 69, 0.5);
    backdrop-filter: blur(4px);
}

.modal-content {
    background-color: #fff;
    margin: 20% auto;
    padding: 30px;
    border: none;
    width: 85%;
    max-width: 450px;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    text-align: center;
    border-top: 6px solid var(--secondary-color);
    position: relative;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    font-size: 28px;
    color: #ccc;
}

/* Link to Operator Modal */
.link-operator-card {
    background: rgba(255, 255, 255, 0.97);
    margin: auto;
    padding: 36px 34px 30px;
    width: 90%;
    max-width: 480px;
    border-radius: 18px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 16px 48px rgba(37, 47, 69, 0.22),
        0 2px 6px rgba(0, 0, 0, 0.06);
    text-align: center;
    position: relative;
    animation: linkModalIn 0.25s ease-out;
}

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

.link-operator-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--secondary-color);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.link-operator-close:hover {
    background: rgba(114, 148, 183, 0.12);
    color: var(--primary-color);
}

.link-operator-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(114, 148, 183, 0.12), rgba(114, 148, 183, 0.06));
    border: 1px solid rgba(114, 148, 183, 0.18);
}

.link-operator-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 6px;
}

.link-operator-subtitle {
    font-size: 0.85rem;
    color: var(--secondary-color);
    line-height: 1.5;
    margin-bottom: 22px;
}

.link-operator-field {
    text-align: left;
    margin-bottom: 18px;
}

.link-operator-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.link-operator-field input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.92rem;
    letter-spacing: 1.2px;
    color: var(--primary-color);
    background: rgba(245, 248, 252, 0.6);
    transition: border-color 0.18s, box-shadow 0.18s;
    box-sizing: border-box;
}

.link-operator-field input::placeholder {
    color: #b0bec5;
    letter-spacing: 0.8px;
}

.link-operator-field input:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(114, 148, 183, 0.15);
}

.link-operator-msg {
    font-size: 0.83rem;
    font-weight: 600;
    margin-bottom: 10px;
    display: none;
    padding: 8px 12px;
    border-radius: 8px;
    text-align: left;
}

.link-operator-error {
    color: #c62828;
    background: #fdecea;
}

.link-operator-success {
    color: #1b5e20;
    background: #e8f5e9;
}

.link-operator-btn {
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    background: var(--primary-color);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
}

.link-operator-btn:hover {
    background: #12280d;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 47, 69, 0.25);
}

.link-operator-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

/* Dark mode – Link to Operator */
body.dark-mode .link-operator-card {
    background: linear-gradient(145deg, rgba(21, 27, 38, 0.98), rgba(30, 36, 48, 0.95));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 16px 48px rgba(0, 0, 0, 0.5);
}

body.dark-mode .link-operator-icon {
    background: linear-gradient(135deg, rgba(114, 148, 183, 0.15), rgba(114, 148, 183, 0.06));
    border-color: rgba(114, 148, 183, 0.2);
}

body.dark-mode .link-operator-title {
    color: #e4eaf0;
}

body.dark-mode .link-operator-field label {
    color: #c0cad6;
}

body.dark-mode .link-operator-field input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #e4eaf0;
}

body.dark-mode .link-operator-field input:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(114, 148, 183, 0.2);
}

body.dark-mode .link-operator-btn {
    background: var(--secondary-color);
}

body.dark-mode .link-operator-btn:hover {
    background: #8ba8c4;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .link-operator-close {
    color: #8a95a5;
}

body.dark-mode .link-operator-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #e4eaf0;
}

/* Dropdown */
.user-menu-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 50px;
    background: linear-gradient(145deg, #ffffff 0%, #f6f8fb 100%);
    min-width: 240px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    border-radius: 14px;
    z-index: 200;
    border: 1px solid #e6edf5;
    padding: 10px 0;
    overflow: hidden;
    backdrop-filter: blur(8px);
}

.show-dropdown {
    display: block;
    animation: fadeIn 0.2s;
}

.dropdown-header {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: linear-gradient(90deg, rgba(114, 148, 183, 0.08), rgba(37, 47, 69, 0.04));
}

.dropdown-email {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary-color);
}

.dropdown-subtext {
    font-size: 0.8rem;
    color: #7a8aa2;
    letter-spacing: 0.02em;
}

.dropdown-divider {
    height: 1px;
    background: #e4ebf3;
    margin: 8px 14px;
}

.dropdown-item {
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    color: var(--primary-color);
    align-items: center;
    gap: 12px;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.dropdown-item:hover {
    background-color: #eef3f9;
    transform: translateY(-1px);
}

.menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--secondary-color);
    background: rgba(114, 148, 183, 0.15);
    border-radius: 8px;
}

.menu-icon svg {
    width: 18px;
    height: 18px;
}

#themeIcon .icon-sun {
    display: none;
}

#themeIcon[data-theme="dark"] .icon-sun {
    display: block;
}

#themeIcon[data-theme="dark"] .icon-moon {
    display: none;
}

#themeIcon[data-theme="light"] .icon-moon {
    display: block;
}

#themeIcon[data-theme="light"] .icon-sun {
    display: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* --- PLOT GEOMETRY ACTIONS --- */
.plot-geo-actions {
    margin-top: 4px;
}

.plot-geo-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e8449;
    background: rgba(92, 120, 82, 0.08);
    border: 1.5px solid rgba(92, 120, 82, 0.25);
    padding: 8px 14px;
    border-radius: 8px;
    line-height: 1;
}

.plot-geo-toolbar .plot-upload-geojson-label,
.plot-geo-toolbar .plot-draw-map {
    width: 160px;
    min-height: 36px;
    padding: 8px 14px;
    margin: 0;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    color: var(--primary-color);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    box-sizing: border-box;
    text-align: center;
    justify-content: center;
}

.plot-clear-geo {
    cursor: pointer;
}

/* --- SUPPLIER MAP --- */
.map-section {
    margin: 28px 0 12px;
    padding: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(37, 47, 69, 0.07);
}

.map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 0;
    flex-wrap: wrap;
    gap: 10px;
}

.map-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-color);
}

.map-header-title h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.map-header-title svg {
    color: var(--secondary-color);
    flex-shrink: 0;
}

.map-badges {
    display: flex;
    align-items: center;
    gap: 8px;
}

.map-hint {
    font-size: 0.82rem;
    color: var(--muted-color);
    margin: 6px 20px 0;
    line-height: 1.5;
}

.map-hint strong {
    color: var(--secondary-color);
}

/* Dark-mode rescue: --muted-color and --secondary-color are both dark
   forest tones that vanish against the dark modal card background
   (#0f1e0a). Re-paint them in sage/white so "Plot #X Details." stays
   legible inside the map popup. */
body.dark-mode .map-hint {
    color: #c0d0ba;
}
body.dark-mode .map-hint strong {
    color: #ffffff;
}

/* Plot item title — e.g. "Plot #1 Details". The JSX used to hard-code
   color: #1e2031 inline which rendered invisible against the dark-mode
   card. Drive the colour from the stylesheet so both themes stay legible. */
.plot-title {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--primary-color, #253d1c);
    font-size: 1rem;
    font-weight: 700;
}
body.dark-mode .plot-title {
    color: #d8e8d2;
}

/* Defensive: force labels inside a .plot-item to use the current theme's
   primary text colour. Prevents any ancestor from leaking a light-mode
   dark colour into the dark-mode card (which reads as invisible on the
   dark forest background). */
body.dark-mode .plot-item label,
body.dark-mode .plot-item .form-group label {
    color: #d8e8d2;
}

.map-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 20px;
    flex-wrap: wrap;
}

.map-toolbar-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.map-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    background: var(--card-bg);
    color: var(--text-color);
    white-space: nowrap;
}

.map-btn:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(37, 47, 69, 0.12);
}

.map-btn-draw {
    background: var(--secondary-color);
    color: #fff;
    border-color: var(--secondary-color);
}

.map-btn-draw:hover {
    background: #5a84a5;
    border-color: #5a84a5;
}

.map-btn-complete {
    background: linear-gradient(135deg, #466140, #5c7852);
    color: #fff;
    border-color: transparent;
    font-weight: 700;
    padding: 8px 18px;
    animation: completeGlow 1.8s ease-in-out infinite alternate;
}

.map-btn-undo {
    background: rgba(255, 255, 255, 0.92);
    color: #466140;
    border-color: rgba(70, 97, 64, 0.35);
}
.map-btn-undo:hover {
    background: rgba(70, 97, 64, 0.08);
    color: #253d1c;
    border-color: #466140;
}
body.dark-mode .map-btn-undo {
    background: rgba(15, 30, 10, 0.6);
    color: #b6cfac;
    border-color: rgba(168, 216, 168, 0.3);
}
body.dark-mode .map-btn-undo:hover {
    background: rgba(168, 216, 168, 0.12);
    color: #d8e8d2;
}

.map-btn-complete:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 18px rgba(46, 204, 113, 0.45);
}

.map-btn-clear {
    background: transparent;
    color: var(--muted-color);
    border-color: transparent;
    font-weight: 500;
}

.map-btn-clear:hover {
    background: rgba(231, 76, 60, 0.08);
    color: #e74c3c;
    border-color: rgba(231, 76, 60, 0.25);
}

.map-area-badge {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--secondary-color);
    background: rgba(114, 148, 183, 0.1);
    padding: 5px 12px;
    border-radius: 20px;
    letter-spacing: 0.02em;
}

.map-point-badge {
    font-size: 0.78rem;
    color: var(--muted-color);
    font-weight: 500;
}

.map-canvas-wrap {
    padding: 0 20px 20px;
}

.map-canvas {
    position: relative;
    width: 100%;
    height: 460px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

@keyframes completeGlow {
    0%   { box-shadow: 0 0 8px rgba(46, 204, 113, 0.25); }
    100% { box-shadow: 0 0 18px rgba(46, 204, 113, 0.55); }
}

/* --- DARK MODE OVERRIDES --- */
body.dark-mode {
    --bg-color: #0a1508;
    --card-bg: #12280d;
    --text-color: #ecf0f1;
    --border-color: #1e3518;
    --primary-color: #ecf0f1;
    --secondary-color: #5c7852;
    --muted-color: #a9b2a0;
}

body.dark-mode .app-header {
    background: linear-gradient(90deg, #0f2318 0%, #1a3d28 50%, #0f2318 100%);
    border-bottom-color: #5c7852;
}

/* Dark mode card — glass */
body.dark-mode .card {
    background: rgba(15, 30, 10, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(92, 120, 82, 0.18);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.2),
        0 8px 32px rgba(0, 0, 0, 0.3);
}

body.dark-mode .section+.section::before {
    background: linear-gradient(90deg, transparent, rgba(92, 120, 82, 0.5), transparent);
}

body.dark-mode .modal-content,
body.dark-mode .dropdown-content {
    background: linear-gradient(145deg, rgba(21, 27, 38, 0.98) 0%, rgba(30, 36, 48, 0.94) 100%);
    border-color: var(--border-color);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}


body.dark-mode .dropdown-header {
    background: linear-gradient(90deg, rgba(92, 120, 82, 0.12), rgba(255, 255, 255, 0.02));
}

body.dark-mode .dropdown-subtext {
    color: #a6d3b4;
}

body.dark-mode .dropdown-divider {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .dropdown-item:hover {
    background-color: rgba(92, 120, 82, 0.14);
}

body.dark-mode .menu-icon {
    background: rgba(92, 120, 82, 0.22);
    color: var(--secondary-color);
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background-color: #12280d;
    color: white;
    border-color: #1e3518;
}

body.dark-mode .product-item,
body.dark-mode .plot-item {
    background: rgba(14, 29, 8, 0.55);
    border-color: #1e3518;
}

body.dark-mode .geo-action-btn {
    background: rgba(14, 29, 8, 0.55);
    border-color: #1e3518;
    color: #c0d0ba;
}

body.dark-mode .geo-action-btn:hover {
    border-color: #5c7852;
    background: rgba(92, 120, 82, 0.1);
}

body.dark-mode .btn-geo-view {
    background: rgba(92, 120, 82, 0.12);
    border-color: rgba(92, 120, 82, 0.3);
    color: #c0d0ba;
}

body.dark-mode .btn-geo-clear {
    background: rgba(231, 76, 60, 0.1);
    border-color: rgba(231, 76, 60, 0.3);
    color: #f1948a;
}

body.dark-mode .plot-use-location {
    background: rgba(92, 120, 82, 0.16);
    border-color: rgba(92, 120, 82, 0.4);
    color: #c0d0ba;
}

body.dark-mode .map-section {
    background: #12280d;
    border-color: #1e3518;
}

body.dark-mode .map-btn {
    background: rgba(14, 29, 8, 0.55);
    color: #ecf0f1;
    border-color: #1e3518;
}

body.dark-mode .map-btn:hover {
    background: #5c7852;
    border-color: #5c7852;
}

body.dark-mode .map-btn-draw {
    background: #5c7852;
    border-color: #5c7852;
}

body.dark-mode .map-canvas {
    border-color: #1e3518;
}

body.dark-mode .nav-center h1 {
    color: white;
}

body.dark-mode #supCountry,
body.dark-mode .plot-country {
    background-color: #12280d;
    color: white;
}

body.dark-mode #supCountry option,
body.dark-mode .plot-country option {
    background-color: #152510;
    color: #e6f0e8;
}

body.dark-mode .history-table th {
    background-color: #12280d;
    color: #ecf0f1;
}

body.dark-mode .custom-select-toggle {
    background: #12280d;
    color: #ecf0f1;
    border-color: #1e3518;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

body.dark-mode .custom-select.open .custom-select-toggle {
    border-color: #5c7852;
    box-shadow: 0 4px 14px rgba(92, 120, 82, 0.25);
}

body.dark-mode .custom-select-toggle::after {
    color: #c0d0ba;
}

body.dark-mode .custom-select-menu {
    background: #0a1508;
    border-color: #1e3518;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}

body.dark-mode .custom-select-option {
    color: #e6f0e8;
}

body.dark-mode .custom-select-option:hover {
    background: rgba(92, 120, 82, 0.18);
}

body.dark-mode .custom-select-option.selected {
    background: rgba(92, 120, 82, 0.28);
    color: #ffffff;
}

/* --- HISTORY TABLE STYLES --- */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.history-table th,
.history-table td {
    padding: 12px 15px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.history-table th {
    background-color: #f8f9fa;
    color: var(--primary-color);
    font-weight: 600;
}

/* --- HAMBURGER MENU --- */
.hamburger-menu {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    margin-right: 15px;
    border-radius: 8px;
    transition: background-color 0.25s ease, transform 0.15s ease;
}

.hamburger-menu .bar {
    width: 22px;
    height: 2.5px;
    background-color: var(--header-text);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Hover: subtle expansion */
.hamburger-menu:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.hamburger-menu:hover .bar:nth-child(1) {
    transform: translateY(-1px);
}

.hamburger-menu:hover .bar:nth-child(3) {
    transform: translateY(1px);
}

/* Active (click feedback) */
.hamburger-menu:active {
    transform: scale(0.96);
}


/* --- CHAT DRAWER & OVERLAY --- */
.chat-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(37, 47, 69, 0.55);
    backdrop-filter: blur(3px);
    z-index: 4000;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.chat-overlay.active {
    opacity: 1;
    visibility: visible;
}

.chat-drawer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 380px;
    background: linear-gradient(180deg, #f7f9fb 0%, #ffffff 45%, #f4f6f8 100%);
    border-right: 1px solid var(--border-color);
    box-shadow: 6px 0 28px rgba(37, 47, 69, 0.2);
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.45s ease;
    display: flex;
    flex-direction: column;
    font-family: 'Nunito', sans-serif;
    z-index: 5000;
}

.chat-drawer.open {
    transform: translateX(0);
    opacity: 1;
}

/* Header */
.chat-header {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(120deg, var(--primary-color) 0%, #1f2c42 100%);
    color: #ffffff;
    border-bottom: 3px solid var(--secondary-color);
    box-shadow: 0 10px 25px rgba(37, 47, 69, 0.22);
}

.chat-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
}

.chat-badge {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: linear-gradient(135deg, #7294b7 0%, #1e3343 100%);
    box-shadow: 0 6px 15px rgba(30, 51, 67, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.chat-badge img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
}

.chat-title-group {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.chat-title-main {
    font-weight: 800;
    letter-spacing: 0.03em;
    font-size: 1rem;
}

.chat-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-icon-btn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    cursor: pointer;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 10px;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.chat-icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

.chat-close-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    cursor: pointer;
    color: #ffffff;
    font-size: 24px;
    line-height: 20px;
    padding: 8px 12px;
    margin: 0;
    display: flex;
    align-items: center;
    border-radius: 10px;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.chat-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

/* Messages Area */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: linear-gradient(180deg, #f6f8fb 0%, #ffffff 55%, #eef2f7 100%);
}

.chat-intro {
    text-align: center;
    color: #4b5566;
    margin-top: 35px;
}

.chat-intro h3 {
    background: linear-gradient(90deg, #7294b7, #1e3343);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.8rem;
    margin-bottom: 8px;
}

/* Message Bubbles */
.chat-message {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-width: 100%;
}

.chat-message.user {
    flex-direction: row-reverse;
}

.message-avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}

.chat-message.bot .message-avatar {
    background: linear-gradient(135deg, #dde6f2 0%, #cddae9 100%);
    color: var(--primary-color);
    border-color: #d1ddeb;
}

.chat-message.user .message-avatar {
    background: linear-gradient(135deg, #1a3012 0%, #36425c 100%);
    color: #ffffff;
    border-color: #162b0e;
}

.message-bubble {
    padding: 12px 16px;
    border-radius: 12px;
    line-height: 1.5;
    font-size: 0.95rem;
    max-width: 100%;
    box-shadow: 0 10px 22px rgba(37, 47, 69, 0.08);
}

.chat-message.user .message-bubble {
    border-radius: 12px 12px 4px 12px;
}

.chat-message.bot .message-bubble {
    border-radius: 12px 12px 12px 4px;
}

.chat-message.user .message-bubble {
    background: linear-gradient(135deg, #1a3012 0%, #12280d 100%);
    color: #ffffff;
    border: 1px solid #1e3518;
    box-shadow: 0 10px 24px rgba(37, 47, 69, 0.25);
}

.chat-message.bot .message-bubble {
    background: rgba(114, 148, 183, 0.12);
    color: var(--primary-color);
    border: 1px solid rgba(114, 148, 183, 0.3);
}

/* Input Area */
.chat-input-area {
    padding: 18px;
    background: linear-gradient(180deg, #f7f9fb 0%, #ffffff 100%);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -10px 24px rgba(37, 47, 69, 0.08);
}

.chat-input-wrapper {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    padding: 6px 12px;
    transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
    box-shadow: 0 12px 26px rgba(37, 47, 69, 0.08);
}

.chat-input-wrapper:focus-within {
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(37, 47, 69, 0.16);
    border-color: var(--secondary-color);
}

#chatInput {
    border: none;
    background: transparent;
    flex: 1;
    padding: 10px;
    font-size: 1rem;
    color: var(--text-color);
}

#chatInput:focus {
    outline: none;
}

.chat-send-btn {
    background: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    cursor: pointer;
    color: #ffffff;
    width: 42px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 8px 18px rgba(114, 148, 183, 0.35);
}

.chat-send-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 10px 20px rgba(37, 47, 69, 0.35);
    transform: translateY(-1px);
}

.chat-send-btn svg {
    width: 20px;
    height: 20px;
}

.chat-footer-text {
    font-size: 0.75rem;
    text-align: center;
    color: #5b6577;
    margin-top: 10px;
}

/* Typing indicator */
.typing-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.typing-dots span {
    width: 6px;
    height: 6px;
    background: var(--secondary-color);
    border-radius: 50%;
    animation: chatBounce 1s infinite ease-in-out;
    opacity: 0.6;
}

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

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

@keyframes chatBounce {

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

    40% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* Dark Mode Support for Chat */
body.dark-mode .chat-drawer {
    background: linear-gradient(180deg, #0a1508 0%, #0a1508 100%);
    border-right: 1px solid #1e3518;
    box-shadow: 6px 0 28px rgba(0, 0, 0, 0.4);
}

body.dark-mode .chat-header {
    background: linear-gradient(120deg, #182520 0%, #233529 100%);
    border-bottom-color: #5c7852;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

body.dark-mode .chat-header-title {
    color: #ecf0f1;
}

body.dark-mode .chat-badge {
    background: linear-gradient(135deg, #5c7852 0%, #2b3f2f 100%);
    color: #f4f9f5;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.dark-mode .chat-icon-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #ecf0f1;
}

body.dark-mode .chat-icon-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

body.dark-mode .chat-close-btn {
    border-color: rgba(255, 255, 255, 0.18);
    color: #ecf0f1;
}

body.dark-mode .chat-close-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

body.dark-mode .chat-messages {
    background: #0a1508;
}

body.dark-mode .chat-intro {
    color: #c5d5c7;
}

body.dark-mode .chat-message.bot .message-avatar {
    background: linear-gradient(135deg, #152510 0%, #1a3012 100%);
    color: #d8e4dc;
    border-color: #1e3518;
}

body.dark-mode .chat-message.user .message-avatar {
    background: linear-gradient(135deg, #1a222f 0%, #111725 100%);
    color: #f0f4f8;
    border-color: #30415a;
}

body.dark-mode .chat-message.bot .message-bubble {
    background: rgba(92, 120, 82, 0.08);
    color: #e6f0e8;
    border-color: rgba(92, 120, 82, 0.3);
}

body.dark-mode .chat-message.user .message-bubble {
    background: linear-gradient(135deg, #1a222f 0%, #111725 100%);
    color: #ecf0f1;
    border-color: #30415a;
}

body.dark-mode .chat-input-area {
    background: #0a1508;
    border-top-color: #1e3518;
    box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.5);
}

body.dark-mode .chat-input-wrapper {
    background: #151c29;
    border-color: #1e3518;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4);
}

body.dark-mode #chatInput {
    color: #ecf0f1;
}

body.dark-mode .chat-send-btn {
    background: linear-gradient(135deg, var(--accent, #5c7852) 0%, var(--accent-light, #7b9970) 100%);
    border-color: transparent;
    box-shadow: 0 8px 18px var(--accent-glow, rgba(92, 120, 82, 0.35));
}

body.dark-mode .chat-send-btn:hover {
    background: linear-gradient(135deg, var(--accent-light, #7b9970) 0%, var(--accent, #5c7852) 100%);
    border-color: transparent;
    box-shadow: 0 10px 22px var(--accent-glow, rgba(92, 120, 82, 0.45));
}

body.dark-mode .chat-footer-text {
    color: #9bb6a6;
}

/* ── Bottom footer bar — mirrors app-header style ── */
.app-bottom-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 24px;
    height: 40px;
    background: linear-gradient(90deg, #162b0e 0%, #253d1c 50%, #162b0e 100%);
    color: var(--header-text);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    border-top: 2px solid var(--secondary-color);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.app-bottom-footer sup {
    font-size: 0.6em;
    vertical-align: text-top;
}
.app-bottom-footer a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.15s ease;
}
.app-bottom-footer a:hover {
    color: #fff;
}
.app-bottom-footer-divider {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.6rem;
}

body.dark-mode .app-bottom-footer {
    background: linear-gradient(90deg, #0f2318 0%, #1a3d28 50%, #0f2318 100%);
    border-top-color: #5c7852;
}

/* Remove number spinners for latitude, longitude, TARIC, and size inputs */
.plot-lat::-webkit-outer-spin-button,
.plot-lat::-webkit-inner-spin-button,
.plot-lon::-webkit-outer-spin-button,
.plot-lon::-webkit-inner-spin-button,
.plot-taric::-webkit-outer-spin-button,
.plot-taric::-webkit-inner-spin-button,
.plot-size::-webkit-outer-spin-button,
.plot-size::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.plot-lat,
.plot-lon,
.plot-taric,
.plot-size {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 2 STYLES: Operator Wizard, Matching Cards, Questionnaire
   (Stepper styles are in operator-react.css — only shared
    components like SME grid, matching cards remain here)
   ═══════════════════════════════════════════════════════════════ */

/* ── OPERATOR SECTION TITLE ── */
.op-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.op-section-icon {
    font-size: 1.3rem;
}

/* ── SME CRITERIA GRID ── */
.sme-grid {
    display: grid;
    grid-template-columns: 180px 1fr 1fr 1fr;
    gap: 10px;
    align-items: center;
    margin-bottom: 25px;
}

.sme-header {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--secondary-color);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(114, 148, 183, 0.2);
}

.sme-label {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--primary-color);
    padding-right: 10px;
}

.sme-grid .form-group {
    margin-bottom: 0;
}

.sme-grid input {
    text-align: center;
}

@media (max-width: 768px) {
    .sme-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .sme-label {
        grid-column: 1 / -1;
        padding: 8px 0 2px;
        border-top: 1px solid #eee;
    }

    .sme-header:first-child {
        display: none;
    }

    .op-stepper {
        gap: 0;
    }

    .op-step-label {
        font-size: 0.65rem;
    }

    .op-step-circle {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }
}

/* ── OPERATOR PRODUCT CARDS (Step B) ── */
.op-product-card {
    background: #fbfcfe;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--secondary-color);
    padding: 22px;
    border-radius: 10px;
    margin-bottom: 18px;
    position: relative;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.op-product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(37, 47, 69, 0.1);
    border-color: rgba(114, 148, 183, 0.5);
}

.op-product-card-header {
    margin-bottom: 15px;
}

.op-card-badge {
    display: inline-block;
    background: linear-gradient(135deg, #466140, #5c7852);
    color: white;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── MATCHING CARDS (Step C) ── */
.op-matching-card {
    background: #fbfcfe;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.op-matching-card:hover {
    box-shadow: 0 8px 25px rgba(37, 47, 69, 0.08);
}

.op-matching-card-header {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eef2f7;
}

.op-matching-product-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.op-matching-product-name {
    margin: 8px 0 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-color);
}

.op-matching-product-desc {
    margin: 0;
    font-size: 0.88rem;
    color: var(--muted-color);
    font-style: italic;
}

.op-matching-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--primary-color);
    margin-bottom: 8px;
    display: block;
}

.op-matching-card-body {
    padding-top: 4px;
}

.op-matching-validation-msg {
    color: #e74c3c;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(231, 76, 60, 0.08);
    border-radius: 6px;
    border-left: 3px solid #e74c3c;
}

/* ── PLOT MULTI-SELECT DROPDOWN ── */
.op-plot-multi-select {
    position: relative;
    margin-bottom: 10px;
}

.op-plot-dropdown-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--muted-color);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.op-plot-dropdown-toggle:hover {
    border-color: var(--secondary-color);
    box-shadow: 0 2px 8px rgba(114, 148, 183, 0.15);
}

.op-plot-dropdown-text {
    flex: 1;
    text-align: left;
}

.op-plot-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 12px 35px rgba(37, 47, 69, 0.18);
    z-index: 1500;
}

.op-plot-dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background-color 0.12s ease;
    border-bottom: 1px solid #f4f6f8;
}

.op-plot-dropdown-item:last-child {
    border-bottom: none;
}

.op-plot-dropdown-item:hover {
    background: rgba(114, 148, 183, 0.08);
}

.op-plot-dropdown-item.selected {
    background: rgba(70, 97, 64, 0.08);
}

.op-plot-dropdown-empty {
    color: var(--muted-color);
    font-style: italic;
    cursor: default;
    text-align: center;
}

.op-plot-checkbox {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.op-plot-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.88rem;
    color: var(--text-color);
}

.op-plot-info small {
    color: var(--muted-color);
    font-size: 0.78rem;
}

/* ── SELECTED PLOT CHIPS ── */
.op-selected-plots-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.plot-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(70, 97, 64, 0.12), rgba(92, 120, 82, 0.15));
    color: #2d6a4f;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid rgba(70, 97, 64, 0.2);
    transition: all 0.15s ease;
}

.plot-chip:hover {
    background: linear-gradient(135deg, rgba(70, 97, 64, 0.18), rgba(92, 120, 82, 0.22));
    box-shadow: 0 2px 8px rgba(70, 97, 64, 0.15);
}

.plot-chip-remove {
    background: none;
    border: none;
    color: #e74c3c;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1;
    padding: 0;
    margin-left: 2px;
    transition: transform 0.15s ease;
}

.plot-chip-remove:hover {
    transform: scale(1.3);
}

/* ── ACCESS CODE GENERATOR ── */
.op-code-generator {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 15px;
}

.generated-code-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #f0faf4, #e8f5ee);
    border: 1px solid rgba(70, 97, 64, 0.25);
    border-radius: 10px;
    padding: 14px 18px;
}

.code-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #466140;
    white-space: nowrap;
}

.access-code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: 0.08em;
    flex: 1;
    word-break: break-all;
}

.btn-copy {
    background: rgba(70, 97, 64, 0.15);
    border: 1px solid rgba(70, 97, 64, 0.25);
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    color: #466140;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-copy:hover {
    background: rgba(70, 97, 64, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(70, 97, 64, 0.2);
}

.empty-state-text {
    text-align: center;
    color: var(--muted-color);
    font-style: italic;
    padding: 25px;
    font-size: 0.9rem;
}

/* ── SUPPLIER QUESTIONNAIRE ── */
.questionnaire-group {
    margin-bottom: 20px;
    padding: 16px;
    background: #f9fbfd;
    border-radius: 8px;
    border-left: 3px solid var(--secondary-color);
    transition: box-shadow 0.18s ease;
}

.questionnaire-group:hover {
    box-shadow: 0 4px 15px rgba(37, 47, 69, 0.06);
}

.questionnaire-group label {
    font-size: 0.92rem;
    line-height: 1.5;
    margin-bottom: 10px;
}

.q-number {
    font-weight: 700;
    color: var(--secondary-color);
    margin-right: 4px;
}

.questionnaire-input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 70px;
    background: #ffffff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.questionnaire-input:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(114, 148, 183, 0.15);
}

/* ── DARK MODE: Phase 2 Components ── */

body.dark-mode .op-product-card,
body.dark-mode .op-matching-card {
    background: rgba(15, 30, 10, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(92, 120, 82, 0.18);
}

body.dark-mode .op-matching-card-header {
    border-bottom-color: #1e3518;
}

body.dark-mode .op-plot-dropdown-toggle {
    background: #12280d;
    border-color: #1e3518;
    color: #a0b0c0;
}

body.dark-mode .op-plot-dropdown-menu {
    background: #12280d;
    border-color: #1e3518;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
}

body.dark-mode .op-plot-dropdown-item {
    border-bottom-color: #1e3518;
}

body.dark-mode .op-plot-dropdown-item:hover {
    background: rgba(92, 120, 82, 0.12);
}

body.dark-mode .op-plot-dropdown-item.selected {
    background: rgba(92, 120, 82, 0.18);
}

body.dark-mode .plot-chip {
    background: linear-gradient(135deg, rgba(92, 120, 82, 0.2), rgba(70, 97, 64, 0.25));
    color: #7dc89a;
    border-color: rgba(92, 120, 82, 0.3);
}

body.dark-mode .generated-code-box {
    background: linear-gradient(135deg, rgba(70, 97, 64, 0.12), rgba(92, 120, 82, 0.08));
    border-color: rgba(92, 120, 82, 0.25);
}

body.dark-mode .access-code {
    color: #7dc89a;
}

body.dark-mode .questionnaire-group {
    background: rgba(15, 30, 10, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(92, 120, 82, 0.18);
    border-left: 3px solid #5c7852;
}

body.dark-mode .questionnaire-input {
    background: #12280d;
    border-color: #1e3518;
    color: #ecf0f1;
}

body.dark-mode .sme-header {
    border-bottom-color: rgba(92, 120, 82, 0.3);
    color: #5c7852;
}

body.dark-mode .op-card-badge {
    background: linear-gradient(135deg, #466140, #4a9966);
}

body.dark-mode .op-matching-product-desc {
    color: #6d8090;
}







/* --- SUPPLIER VIEW SCROLL ---
   .gt-main is a flex column with overflow:hidden. The view wrapper fills the
   available height and acts as a flex container whose children decide scroll
   behavior — step views scroll only their inner list, simpler views (profile,
   documents, libraries) let the whole view scroll. */
.gt-main > .sup-view-scroll {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Default for simple views: let the view scroll as a whole */
.gt-main > .sup-view-scroll > .section,
.gt-main > .sup-view-scroll > .op-card,
.gt-main > .sup-view-scroll > div:not(.sup-step-wrap) {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--card-border, rgba(0,0,0,0.15)) transparent;
}

/* Step views: card fills the view, only the inner list scrolls inside it */
.gt-main > .sup-view-scroll > .sup-step-wrap {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.gt-main > .sup-view-scroll > .sup-step-wrap > .section {
    flex: 1 1 0;
    min-height: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.gt-main > .sup-view-scroll > .sup-step-wrap > .section > .card {
    /* Shrink the step card to its content when the form is short (one
       product/plot) instead of stretching to fill the viewport — which
       left a large empty band between the last field and the footer's
       action button. Capped at `max-height: 100%` so taller content still
       constrains to the viewport, and the inner `.sup-card-scroll` takes
       over internal scrolling exactly as before. */
    flex: 0 1 auto;
    max-height: 100%;
    min-height: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* The one scrollable band inside a step card — wraps the repeating items
   and the "+ Add" button; the card header and submit action stay pinned. */
.sup-card-scroll {
    /* `flex-basis: auto` (not 0) so this band reports its content size to
       the card's intrinsic height calculation. With flex-basis: 0 the card
       thought the band was zero-tall and collapsed past the actual form
       content. When the card is capped at `max-height: 100%`, min-height: 0
       + flex-shrink: 1 still lets this band shrink under the cap, and
       overflow-y: auto takes over internal scrolling. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--card-border, rgba(0,0,0,0.15)) transparent;
    padding-right: 4px;
}
.sup-card-scroll::-webkit-scrollbar { width: 8px; }
.sup-card-scroll::-webkit-scrollbar-thumb {
    background: var(--card-border, rgba(0,0,0,0.15));
    border-radius: 4px;
}

/* --- SUPPLIER CARD TABS ---
   Simple underline tabs pinned above a .sup-card-scroll band so the user can
   switch between views (e.g., Library / Submitted Plots) inside one card. */
.sup-tab-nav {
    display: flex;
    gap: 0;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.1));
    flex-shrink: 0;
}
.sup-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-secondary, rgba(0,0,0,0.55));
    font-family: inherit;
    transition: color 0.18s, border-color 0.18s;
}
.sup-tab-btn:hover { color: var(--text-color); }
.sup-tab-btn.active {
    color: var(--primary-color, #253d1c);
    border-bottom-color: var(--primary-color, #253d1c);
}
.sup-tab-count {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--input-bg, rgba(0,0,0,0.05));
    color: var(--muted-color, rgba(0,0,0,0.55));
}
.sup-tab-btn.active .sup-tab-count {
    background: rgba(37, 61, 28, 0.12);
    color: var(--primary-color, #253d1c);
}
body.dark-mode .sup-tab-nav { border-bottom-color: rgba(255,255,255,0.08); }
body.dark-mode .sup-tab-btn { color: rgba(255,255,255,0.5); }
body.dark-mode .sup-tab-btn:hover { color: rgba(255,255,255,0.85); }
body.dark-mode .sup-tab-btn.active {
    color: #c0d0ba;
    border-bottom-color: #c0d0ba;
}
body.dark-mode .sup-tab-count {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
}
body.dark-mode .sup-tab-btn.active .sup-tab-count {
    background: rgba(168, 216, 168, 0.18);
    color: #c0d0ba;
}

/* --- SUPPLIER CARD HEADER ---
   Supplier tab titles use the same h2 underline as operator tabs: the line sits
   below the title and above the subtitle. Inherits from the global `h2 { border-bottom }`.
   Exception: Plot Library (.sup-plotlib-header) keeps its original
   full-width header separator and a clean title without the h2 underline. */
.gt-main > .sup-view-scroll .assess-header.sup-plotlib-header {
    border-bottom: 2px solid var(--secondary-color);
    padding-bottom: 14px;
    margin-bottom: 18px;
}
.gt-main > .sup-view-scroll .assess-header.sup-plotlib-header .operator-profile-title {
    border-bottom: none;
    padding-bottom: 0;
}

/* Plot Library — the title sits in a flex row next to the PlotUploadSpecs info
   button, so the h2's border-bottom only spans the text. Move the underline to
   the wrapping row so it extends the full width of the title column. */
.sup-plotlib-title-row {
    border-bottom: 2px solid var(--secondary-color);
    padding-bottom: 10px;
    margin-bottom: 6px;
}
.sup-plotlib-title-row .operator-profile-title {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* --- PLOT PREVIEW MODAL --- */
.plot-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(2px);
}
.plot-preview-card {
    background: #fff;
    border-radius: 14px;
    width: min(860px, 100%);
    max-height: min(640px, 90vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.plot-preview-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.08));
    flex-shrink: 0;
}
.plot-preview-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.plot-preview-sub {
    font-size: 0.8rem;
    color: var(--muted-color, rgba(0,0,0,0.55));
    margin-top: 2px;
}
.plot-preview-close {
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--muted-color, rgba(0,0,0,0.55));
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    transition: background 0.15s;
    flex-shrink: 0;
}
.plot-preview-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-color);
}
.plot-preview-map {
    flex: 1 1 0;
    min-height: 360px;
    width: 100%;
}
body.dark-mode .plot-preview-card {
    background: #162b10;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
body.dark-mode .plot-preview-header { border-bottom-color: rgba(255,255,255,0.08); }
body.dark-mode .plot-preview-title { color: #e8eee0; }
body.dark-mode .plot-preview-sub { color: rgba(255,255,255,0.6); }
body.dark-mode .plot-preview-close { color: rgba(255,255,255,0.55); }
body.dark-mode .plot-preview-close:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

/* --- SUPPLIER STEPPER --- */
.sup-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 28px;
    padding: 0 20px;
}

.sup-stepper .op-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.sup-stepper .op-step-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 3px solid transparent;
    position: relative;
}

.sup-stepper .op-step-circle.inactive {
    background: var(--border-color);
    color: var(--muted-color);
}

.sup-stepper .op-step-circle.active {
    background: linear-gradient(135deg, #466140, #5c7852);
    color: white;
    border-color: rgba(92, 120, 82, 0.4);
    box-shadow: 0 4px 20px rgba(92, 120, 82, 0.35);
    transform: scale(1.12);
}

.sup-stepper .op-step-circle.completed {
    background: linear-gradient(135deg, var(--primary-color), #253d1c);
    color: white;
    box-shadow: 0 3px 12px rgba(37, 47, 69, 0.2);
}

.sup-stepper .op-step-circle.completed::after {
    content: '\2713';
    position: absolute;
    font-size: 1.1rem;
}

.sup-stepper .op-step-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    transition: color 0.3s ease;
    white-space: nowrap;
}

.sup-stepper .op-step-item.active .op-step-label {
    color: #ffffff;
}

.sup-stepper .op-step-item.completed .op-step-label {
    color: #ffffff;
}

.sup-stepper .op-step-connector {
    flex: 1;
    height: 3px;
    background: var(--border-color);
    min-width: 30px;
    max-width: 120px;
    border-radius: 2px;
    margin: 0 12px;
    margin-bottom: 28px;
    transition: background 0.3s ease;
}

.sup-stepper .op-step-connector.done {
    background: linear-gradient(90deg, var(--primary-color), #466140);
}

/* Dark mode stepper */
body.dark-mode .sup-stepper .op-step-circle.inactive {
    background: #1e3518;
    color: #8899aa;
}

body.dark-mode .sup-stepper .op-step-circle.completed {
    background: linear-gradient(135deg, #1a3012, #253d1c);
}

body.dark-mode .sup-stepper .op-step-connector {
    background: #1e3518;
}

body.dark-mode .sup-stepper .op-step-item.active .op-step-label {
    color: #ffffff;
}

@media (max-width: 480px) {
    .sup-stepper {
        padding: 0 8px;
    }
    .sup-stepper .op-step-circle {
        width: 38px;
        height: 38px;
        font-size: 0.8rem;
    }
    .sup-stepper .op-step-connector {
        min-width: 16px;
        margin: 0 6px;
        margin-bottom: 28px;
    }
    .sup-stepper .op-step-label {
        font-size: 0.6rem;
    }
}

/* --- CHATBOT FLOATING ACTION BUTTON --- */
.chat-floating-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--accent, #5c7852), var(--accent-light, #7b9970));
    border-radius: 50%;
    border: none;
    box-shadow: 0 4px 15px var(--accent-glow, rgba(92, 120, 82, 0.3));
    color: white;
    cursor: pointer;
    z-index: 2500;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chat-floating-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px var(--accent-glow, rgba(92, 120, 82, 0.4));
}

.chat-floating-btn:active {
    transform: scale(0.95);
}

/* --- CHAT POPUP (exact copy of operator/admin) --- */
.op-chat-popup {
    position: fixed;
    bottom: 100px;
    right: 25px;
    width: 380px;
    height: 500px;
    max-height: calc(100vh - 140px);
    background: linear-gradient(180deg, #f7f9fb 0%, #ffffff 45%, #f4f6f8 100%);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: 0 12px 48px rgba(26, 35, 50, 0.22);
    display: flex;
    flex-direction: column;
    z-index: 3000;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.op-chat-popup.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.op-chat-popup-header {
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(120deg, #466140 0%, #2a5c3f 100%);
    color: #ffffff;
    border-bottom: 2px solid #5c7852;
    border-radius: 20px 20px 0 0;
    flex-shrink: 0;
}

.op-chat-popup-header .chat-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
}

.op-chat-popup-header .chat-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.op-chat-popup-header .chat-icon-btn,
.op-chat-popup-header .chat-close-btn {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    /* Lock to a perfect circle — base .chat-icon-btn/.chat-close-btn
       ship their own padding and font-size that were stretching these
       into ovals inside the popup header. Override padding/line-height
       explicitly and pin the shape with aspect-ratio + flex-basis so
       no ancestor flexbox can compress one axis. */
    width: 32px;
    height: 32px;
    min-width: 32px;
    aspect-ratio: 1 / 1;
    flex: 0 0 32px;
    padding: 0;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: background 0.2s;
}

.op-chat-popup-header .chat-close-btn {
    /* Close glyph is a `×` at 24/20 line-height in base rule — shrink it
       so the character doesn't push the button tall. */
    font-size: 1.25rem;
}

.op-chat-popup-header .chat-icon-btn:hover,
.op-chat-popup-header .chat-close-btn:hover {
    background: rgba(255,255,255,0.3);
}

.op-chat-popup-messages {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: linear-gradient(180deg, #f6f8fb 0%, #ffffff 55%, #eef2f7 100%);
}

.op-chat-popup-messages .chat-intro {
    text-align: center;
    color: #4b5566;
    margin-top: 30px;
}

.op-chat-popup-messages .chat-intro h3 {
    background: linear-gradient(90deg, #466140, #5c7852);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.5rem;
    margin-bottom: 6px;
}

.op-chat-popup-input {
    padding: 12px 14px;
    background: linear-gradient(180deg, #f7f9fb 0%, #ffffff 100%);
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 20px 20px;
    flex-shrink: 0;
}

.op-chat-popup-input .chat-input-wrapper {
    background: #ffffff;
    border-radius: 24px;
    border: 2px solid #466140;
    display: flex;
    align-items: center;
    padding: 4px 6px 4px 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(70, 97, 64, 0.08);
}

.op-chat-popup-input .chat-input-wrapper:focus-within {
    border-color: #5c7852;
    box-shadow: 0 2px 12px rgba(70, 97, 64, 0.18);
}

.op-chat-popup-input .chat-input-wrapper input {
    border: none;
    background: transparent;
    flex: 1;
    padding: 8px 4px;
    font-size: 0.9rem;
    color: var(--text-primary);
    outline: none;
}

.op-chat-popup-input .chat-input-wrapper input::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

.op-chat-popup-input .chat-send-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent, #5c7852) 0%, var(--accent-light, #7b9970) 100%);
    border: none;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px var(--accent-glow, rgba(92, 120, 82, 0.3));
}

.op-chat-popup-input .chat-send-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px var(--accent-glow, rgba(92, 120, 82, 0.45));
}

.op-chat-popup-input .chat-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Chat message bubbles inside popup */
.op-chat-popup-messages .chat-message {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.op-chat-popup-messages .chat-message.user {
    flex-direction: row-reverse;
}

.op-chat-popup-messages .chat-message .message-avatar {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.op-chat-popup-messages .chat-message .message-bubble {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.88rem;
    line-height: 1.5;
}

.op-chat-popup-messages .chat-message.bot .message-bubble {
    background: #e8ecf1;
    color: #162b0e;
    border-bottom-left-radius: 4px;
}

.op-chat-popup-messages .chat-message.user .message-bubble {
    background: linear-gradient(135deg, #466140 0%, #5c7852 100%);
    color: #fff;
    border-bottom-right-radius: 4px;
}

/* Dark mode for chat popup */
body.dark-mode .op-chat-popup {
    background: linear-gradient(180deg, #0a1806 0%, #0e1d08 100%);
    border-color: rgba(92, 120, 82, 0.25);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body.dark-mode .op-chat-popup-header {
    background: linear-gradient(120deg, #132118 0%, #1a3012 100%);
    border-bottom-color: #1e3518;
}

body.dark-mode .op-chat-popup-messages {
    background: linear-gradient(180deg, rgba(14, 29, 8, 0.88) 0%, rgba(22, 43, 14, 0.7) 55%, rgba(14, 29, 8, 0.88) 100%);
}

body.dark-mode .op-chat-popup-messages .chat-intro {
    color: #9aaa9f;
}

body.dark-mode .op-chat-popup-messages .chat-message.bot .message-bubble {
    background: rgba(15, 30, 10, 0.7);
    color: #e8ecf0;
    border: 1px solid rgba(92, 120, 82, 0.25);
}

body.dark-mode .op-chat-popup-input {
    background: linear-gradient(180deg, rgba(14, 29, 8, 0.88) 0%, rgba(10, 24, 6, 0.92) 100%);
    border-top-color: #1e3518;
}

body.dark-mode .op-chat-popup-input .chat-input-wrapper {
    background: rgba(14, 29, 8, 0.7);
    border-color: #2c5a3f;
}

body.dark-mode .op-chat-popup-input .chat-input-wrapper input {
    color: #e8ecf0;
}

body.dark-mode .op-chat-popup-input .chat-input-wrapper input::placeholder {
    color: #9aaa9f;
}

@media (max-width: 480px) {
    .op-chat-popup {
        width: calc(100vw - 20px);
        right: 10px;
        bottom: 90px;
        height: 60vh;
    }
}

/* --- CHAT LOGO --- */
.chat-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
}

/* --- UTILITY CLASSES (extracted from inline styles) --- */
.btn-full {
    width: 100%;
}

.btn-modal-ok {
    width: auto;
    padding: 10px 30px;
}

.btn-back-nav {
    width: auto;
}

.btn-add-item {
    margin-bottom: 20px;
}

.back-btn-wrap {
    margin-bottom: 15px;
}

.step-actions {
    margin-top: 10px;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    position: relative;
    z-index: 1;
}

.welcome-banner {
    margin-bottom: 25px;
}

.welcome-text {
    font-size: 1.1rem;
    color: var(--text-color);
    opacity: 0.7;
}

.welcome-user {
    font-weight: bold;
    color: var(--secondary-color);
}

/* --- MAP TOOLBAR BUTTONS (legacy compat, now uses .map-btn) --- */
.map-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* --- PLOT GEO TOOLBAR --- */
.plot-geo-toolbar {
    display: flex;
    gap: 10px;
    align-items: stretch;
    flex-wrap: wrap;
    margin-top: 8px;
}

.geo-action-btn {
    cursor: pointer;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 8px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    white-space: nowrap;
    box-sizing: border-box;
    line-height: 1;
    background: #fff;
    color: var(--primary-color);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.geo-action-btn:hover {
    border-color: var(--secondary-color);
    background: rgba(114, 148, 183, 0.06);
    box-shadow: 0 2px 8px rgba(114, 148, 183, 0.12);
}

.geo-action-btn svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.geo-action-btn:hover svg {
    opacity: 1;
}

.btn-geo-view {
    background: rgba(92, 120, 82, 0.08);
    border-color: rgba(92, 120, 82, 0.3);
    color: #1e8449;
}

.btn-geo-view:hover {
    background: rgba(92, 120, 82, 0.14);
    border-color: #466140;
}

.btn-geo-clear {
    background: rgba(231, 76, 60, 0.06);
    border-color: rgba(231, 76, 60, 0.25);
    color: #c0392b;
}

.btn-geo-clear:hover {
    background: rgba(231, 76, 60, 0.12);
    border-color: #e74c3c;
}

/* --- GPS Coordinates Row --- */
.plot-coords-group {
    background: rgba(92, 120, 82, 0.06);
    border: 1px solid rgba(92, 120, 82, 0.2);
    border-radius: 10px;
    padding: 14px 16px 10px;
}

.plot-coords-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    row-gap: 10px;
    flex-wrap: wrap;
}

/* On narrow phones the lat / lon / "Use My Location" trio wraps to three
   rows; the locate button then sticks to flex-end (right edge) and looks
   detached. Stretch it across the row so the affordance reads as a
   primary action, not an orphan. */
@media (max-width: 480px) {
    .plot-coord-field {
        min-width: 100% !important;
        flex-basis: 100%;
    }
    .plot-locate-btn {
        width: 100%;
        align-self: stretch;
        justify-content: center;
    }
}

.plot-coord-field {
    flex: 1;
    min-width: 140px;
}

.plot-coord-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted-color, #6b7280);
    margin-bottom: 4px;
}

.plot-coord-field input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.88rem;
    font-family: 'SF Mono', 'Fira Code', monospace;
    background: #fff;
    box-sizing: border-box;
}

.plot-coord-field input:focus {
    border-color: #5c7852;
    outline: none;
    box-shadow: 0 0 0 2px rgba(92, 120, 82, 0.2);
}

.plot-coord-field input::placeholder {
    color: #b0b0b0;
    font-family: inherit;
}

.plot-coords-hint {
    margin: 6px 0 0;
    font-size: 0.75rem;
    color: var(--muted-color, #999);
    line-height: 1.3;
}

.plot-locate-btn {
    flex-shrink: 0;
    align-self: flex-end;
    margin-bottom: 1px;
}
.plot-locate-btn[disabled],
.plot-locate-btn[aria-busy="true"] {
    opacity: 0.7;
    cursor: progress;
}
.plot-locate-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: plot-locate-spin 0.8s linear infinite;
    vertical-align: -2px;
}
@keyframes plot-locate-spin {
    to { transform: rotate(360deg); }
}

/* --- GPS Location Button --- */
.plot-use-location {
    background: rgba(92, 120, 82, 0.1);
    border-color: rgba(92, 120, 82, 0.35);
    color: #253d1c;
}

.plot-use-location:hover {
    background: rgba(92, 120, 82, 0.18);
    border-color: #5c7852;
}

.plot-use-location:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* ── PLOT UPLOAD SPECS POPOVER ── */
.plot-specs-wrap {
    position: relative;
    display: inline-flex;
}

.plot-specs-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--muted-color, #999);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background 0.2s;
}

.plot-specs-btn:hover {
    color: var(--accent, #2980b9);
    background: rgba(41, 128, 185, 0.1);
}

.plot-specs-popover {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    width: 360px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    padding: 16px;
    margin-top: 8px;
    animation: plotSpecsFadeIn 0.15s ease-out;
}

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

.plot-specs-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.plot-specs-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #999;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
}

.plot-specs-close:hover {
    background: rgba(0,0,0,0.06);
    color: #333;
}

.plot-specs-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
}

.plot-specs-list li {
    position: relative;
    padding: 5px 0 5px 18px;
    font-size: 0.82rem;
    color: var(--text-secondary, #555);
    line-height: 1.4;
}

.plot-specs-list li::before {
    content: '\2022';
    position: absolute;
    left: 4px;
    color: var(--accent, #2980b9);
    font-weight: bold;
}

.plot-specs-docs-link {
    font-size: 0.8rem;
    color: var(--muted-color, #999);
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.plot-specs-docs-link a {
    color: var(--accent, #2980b9);
    text-decoration: none;
    font-weight: 600;
}

.plot-specs-docs-link a:hover {
    text-decoration: underline;
}

body.dark-mode .plot-specs-popover {
    background: rgba(14, 29, 8, 0.55);
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

body.dark-mode .plot-specs-close:hover {
    background: rgba(255,255,255,0.1);
    color: #ddd;
}

/* ── PLOT UPLOAD DOCUMENTATION PAGE ── */
.plot-docs-section {
    margin-bottom: 28px;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    overflow: hidden;
}

.plot-docs-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 700;
    background: rgba(41, 128, 185, 0.04);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    color: var(--primary-color, #162b0e);
}

.plot-docs-heading svg {
    flex-shrink: 0;
    color: var(--accent, #2980b9);
}

.plot-docs-content {
    padding: 18px 20px;
}

.plot-docs-content > p {
    margin: 0 0 14px 0;
    font-size: 0.88rem;
    color: var(--text-secondary, #555);
    line-height: 1.6;
}

/* Formats grid */
.plot-docs-formats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.plot-docs-format-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 10px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    background: rgba(0,0,0,0.015);
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.plot-docs-format-card:hover {
    border-color: rgba(41,128,185,0.25);
    box-shadow: 0 2px 8px rgba(41,128,185,0.08);
}

.plot-docs-format-card strong {
    font-size: 0.9rem;
    color: var(--primary-color, #162b0e);
}

.plot-docs-ext {
    font-size: 0.75rem;
    color: var(--muted-color, #999);
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.plot-docs-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(0,0,0,0.06);
    color: var(--muted-color, #777);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.plot-docs-badge-recommended {
    background: rgba(92, 120, 82, 0.12);
    color: #1e8449;
}

/* Specs list */
.plot-docs-specs-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.plot-docs-specs-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.plot-docs-specs-list li:last-child {
    border-bottom: none;
}

.plot-docs-spec-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(41, 128, 185, 0.08);
    color: var(--accent, #2980b9);
}

.plot-docs-specs-list li strong {
    display: block;
    font-size: 0.88rem;
    color: var(--primary-color, #162b0e);
    margin-bottom: 2px;
}

.plot-docs-specs-list li span {
    font-size: 0.82rem;
    color: var(--text-secondary, #666);
    line-height: 1.5;
}

/* Troubleshooting items */
.plot-docs-trouble-item {
    padding: 12px 16px;
    margin-bottom: 8px;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 8px;
    background: rgba(0,0,0,0.01);
}

.plot-docs-trouble-item h4 {
    margin: 0 0 6px 0;
    font-size: 0.88rem;
    color: var(--primary-color, #162b0e);
}

.plot-docs-trouble-item p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary, #666);
    line-height: 1.5;
}

/* Tool cards for split/kinks sections */
.plot-docs-tool-card {
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid rgba(41, 128, 185, 0.15);
    border-radius: 10px;
    background: rgba(41, 128, 185, 0.02);
}

.plot-docs-tool-card h4 {
    margin: 0 0 10px 0;
    font-size: 0.88rem;
    color: var(--accent, #2980b9);
    font-weight: 700;
}

.plot-docs-steps {
    margin: 0;
    padding-left: 20px;
}

.plot-docs-steps li {
    font-size: 0.82rem;
    color: var(--text-secondary, #666);
    line-height: 1.6;
    padding: 3px 0;
}

/* Code block */
.plot-docs-code-block {
    background: #162b0e;
    border-radius: 8px;
    padding: 16px;
    overflow-x: auto;
    margin: 12px 0;
}

.plot-docs-code-block code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.8rem;
    color: #c0d0ba;
    white-space: pre;
    line-height: 1.6;
}

.plot-docs-note {
    font-size: 0.8rem;
    color: var(--muted-color, #999);
    font-style: italic;
    margin: 8px 0 0;
}

/* Checklist */
.plot-docs-checklist {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}

.plot-docs-checklist li {
    position: relative;
    padding: 6px 0 6px 24px;
    font-size: 0.84rem;
    color: var(--text-secondary, #555);
    line-height: 1.5;
}

.plot-docs-checklist li::before {
    content: '\2713';
    position: absolute;
    left: 2px;
    color: #466140;
    font-weight: bold;
    font-size: 0.9rem;
}

/* Dark mode overrides for docs page */
body.dark-mode .plot-docs-section {
    border-color: rgba(255,255,255,0.08);
}

body.dark-mode .plot-docs-heading {
    background: rgba(41, 128, 185, 0.08);
    border-bottom-color: rgba(255,255,255,0.06);
    color: #e0e0e0;
}

body.dark-mode .plot-docs-format-card {
    background: rgba(15, 30, 10, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(92, 120, 82, 0.18);
}

body.dark-mode .plot-docs-format-card strong {
    color: #e0e0e0;
}

body.dark-mode .plot-docs-badge {
    background: rgba(255,255,255,0.08);
    color: #aaa;
}

body.dark-mode .plot-docs-badge-recommended {
    background: rgba(92, 120, 82, 0.15);
    color: #5c7852;
}

body.dark-mode .plot-docs-spec-icon {
    background: rgba(41, 128, 185, 0.12);
}

body.dark-mode .plot-docs-specs-list li {
    border-bottom-color: rgba(255,255,255,0.04);
}

body.dark-mode .plot-docs-specs-list li strong {
    color: #ddd;
}

body.dark-mode .plot-docs-trouble-item {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.06);
}

body.dark-mode .plot-docs-trouble-item h4 {
    color: #ddd;
}

body.dark-mode .plot-docs-tool-card {
    background: rgba(41, 128, 185, 0.06);
    border-color: rgba(41, 128, 185, 0.2);
}

body.dark-mode .plot-docs-code-block {
    background: #0d1117;
}

/* Small inline spinner for buttons */
.spinner-small {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-small 0.6s linear infinite;
}

@keyframes spin-small {
    to { transform: rotate(360deg); }
}

/* GPS marker pulse animation */
.gps-location-marker {
    width: 32px;
    height: 42px;
}

.gps-location-marker svg {
    display: block;
    animation: gps-pulse 2s ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes gps-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* --- GRID-5 RESPONSIVE ADJUSTMENT --- */
@media (max-width: 1200px) and (min-width: 1001px) {
    .grid-5 {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* --- AUTH RESPONSIVE: Very small phones (≤ 400px) --- */
@media (max-width: 400px) {
    .auth-container {
        padding: 10px;
    }

    .auth-card {
        padding: 16px;
        max-width: 100%;
        border-radius: 8px;
    }

    .auth-card .login-logo-wrap img {
        max-width: 80px !important;
    }

    .auth-card h2 {
        font-size: 1rem;
        margin-top: 0;
        margin-bottom: 4px;
    }

    .auth-card #authSubtitle {
        font-size: 0.78rem;
        margin-bottom: 10px !important;
    }

    .auth-card .form-group {
        margin-bottom: 6px;
    }

    .auth-card .form-group input,
    .auth-card .form-group select {
        padding: 6px 8px;
        font-size: 13px;
    }

    .auth-card .btn-primary {
        padding: 8px;
        font-size: 0.88rem;
    }

    .btn-social {
        padding: 8px 12px;
        font-size: 0.82rem;
        border-radius: 8px;
    }

    .social-login-buttons {
        gap: 7px;
    }

    .auth-divider {
        margin: 8px 0;
    }

    .auth-error-msg,
    .auth-success-msg {
        padding: 8px 10px;
        margin-bottom: 10px;
        font-size: 0.82rem;
    }
}

/* --- AUTH RESPONSIVE: Short viewports (small laptops, landscape phones) --- */
@media (max-height: 750px) {
    .auth-container {
        align-items: flex-start;
    }

    .auth-card {
        padding: 16px 24px 18px;
        margin: 10px auto;
    }

    .auth-card .login-logo-wrap img {
        max-width: 90px !important;
    }

    .auth-card h2 {
        font-size: 1.05rem;
        margin-top: 0;
        margin-bottom: 4px;
    }

    .auth-card #authSubtitle {
        font-size: 0.8rem;
        margin-bottom: 12px !important;
    }

    .auth-card .form-group {
        margin-bottom: 6px;
    }

    .auth-card .form-group input,
    .auth-card .form-group select {
        padding: 6px 9px;
    }

    .auth-card .btn-primary {
        padding: 8px;
        margin-top: 2px;
    }

    .btn-social {
        padding: 8px 14px;
    }

    .social-login-buttons {
        gap: 6px;
    }

    .auth-divider {
        margin: 8px 0;
    }
}

/* --- AUTH RESPONSIVE: Very short viewports (landscape phones) --- */
@media (max-height: 500px) {
    .auth-card {
        padding: 12px 20px 14px;
    }

    .auth-card .login-logo-wrap img {
        max-width: 60px !important;
    }

    .auth-card h2 {
        font-size: 0.95rem;
        margin-bottom: 2px;
    }

    .auth-card #authSubtitle {
        font-size: 0.75rem;
        margin-bottom: 8px !important;
    }

    .auth-card .form-group {
        margin-bottom: 4px;
    }

    .auth-card .form-group label {
        font-size: 0.72rem;
        margin-bottom: 1px;
    }

    .auth-card .form-group input {
        padding: 5px 8px;
        font-size: 12px;
    }

    .auth-card .btn-primary {
        padding: 6px;
        font-size: 0.85rem;
    }

    .btn-social {
        padding: 6px 10px;
        font-size: 0.78rem;
        gap: 6px;
    }

    .btn-social svg {
        width: 14px;
        height: 14px;
    }

    .social-login-buttons {
        gap: 4px;
    }

    .auth-divider {
        margin: 6px 0;
    }

    .auth-card .auth-switch {
        margin-top: 4px;
    }
}

/* ═══════════════════════════════════════════
   DRAG & DROP UPLOAD ZONE
   ═══════════════════════════════════════════ */
.dz-dropzone {
    position: relative;
}

.dz-dragging {
    outline: 2px solid var(--secondary-color, #5c7852);
    outline-offset: -2px;
    border-radius: 10px;
}

.dz-overlay {
    position: absolute;
    inset: 0;
    background: rgba(74, 143, 109, 0.12);
    border: 2px dashed var(--secondary-color, #5c7852);
    border-radius: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    pointer-events: none;
    backdrop-filter: blur(2px);
}

.dz-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--secondary-color, #5c7852);
    font-weight: 600;
    font-size: 0.95rem;
}

.dz-overlay-content svg {
    opacity: 0.8;
}

.dz-click-area:hover {
    border-color: var(--secondary-color, #5c7852) !important;
}

.dz-click-area:hover svg {
    stroke: var(--secondary-color, #5c7852);
}

.dz-click-area:hover span {
    color: var(--text-color) !important;
}

/* ═══════════════════════════════════════════
   Support Panel
   ═══════════════════════════════════════════ */

.support-panel {
    background: #ffffff;
    border: 1px solid var(--border-color, #c0d0ba);
    border-radius: 16px;
    padding: 32px 36px;
    box-shadow:
        0 1px 3px rgba(27,58,45,0.06),
        0 8px 32px rgba(27,58,45,0.08);
}

body.dark-mode .support-panel {
    background: rgba(12, 24, 8, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(92, 120, 82, 0.28);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 8px 32px rgba(0,0,0,0.45);
}

/* Category picker grid */
.support-categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.support-category-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: left;
    gap: 5px;
    padding: 14px 14px 13px;
    background: var(--cat-bg);
    border: 1.5px solid var(--cat-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
    min-height: 80px;
}

.support-category-card:hover {
    border-color: var(--cat-color);
    box-shadow: 0 2px 10px var(--cat-border);
}

.support-category-card:active {
    opacity: 0.85;
}

.support-cat-label {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--cat-color);
    line-height: 1.2;
}

.support-cat-desc {
    font-size: 0.775rem;
    color: var(--text-secondary, #7a8577);
    line-height: 1.4;
}

/* Active category badge */
.support-active-cat {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 5px;
    border: 1.5px solid;
    font-weight: 600;
    font-size: 0.8rem;
    margin: 8px 0 0;
}

/* "View Existing Tickets" button in category picker header */
.support-tickets-btn {
    padding: 5px 12px;
    font-size: 0.8rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Back button */
.support-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0 0 12px;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--text-secondary, #7a8577);
    font-family: inherit;
    transition: color 0.15s;
}

.support-back-btn:hover {
    color: var(--text, #1b3a2d);
}

.support-panel-success {
    text-align: center;
    padding: 40px 20px;
}

.support-field {
    margin-bottom: 16px;
    position: relative;
}

.support-label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text, #1b3a2d);
    margin-bottom: 6px;
}

.support-input,
.support-select,
.support-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border, #d5d0c8);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text, #1b3a2d);
    background: var(--bg-card, #ffffff);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.support-input:focus,
.support-select:focus,
.support-textarea:focus {
    outline: none;
    border-color: var(--secondary-color, #7a8c6a);
    box-shadow: 0 0 0 3px rgba(122, 140, 106, 0.15);
}

.support-textarea {
    resize: vertical;
    min-height: 120px;
}

.support-char-count {
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-secondary, #7a8577);
    margin-top: 4px;
}

.support-error {
    background: #fef2f2;
    color: #b91c1c;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 16px;
    border: 1px solid #fecaca;
}

.dark-mode .support-error {
    background: rgba(185, 28, 28, 0.1);
    border-color: rgba(185, 28, 28, 0.3);
}

.support-submit {
    width: 100%;
    padding: 12px 24px;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.support-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.support-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: support-spin 0.6s linear infinite;
    margin-right: 6px;
}

@keyframes support-spin {
    to { transform: rotate(360deg); }
}

/* Ticket list */
.support-ticket-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.support-ticket-row {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 36px 12px 13px;
    border: 1.5px solid var(--border, #c0d0ba);
    border-radius: 8px;
    background: var(--bg-card, #ffffff);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
}

.support-ticket-row:hover {
    border-color: var(--secondary-color, #5c7852);
    background: var(--bg-color, #eef3eb);
}

.support-ticket-row-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.support-ticket-row-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary, #7a8577);
    display: flex;
    align-items: center;
}

.support-ticket-cat {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid;
    font-size: 0.75rem;
    font-weight: 600;
}

.support-ticket-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.support-ticket-status.open {
    color: #5c7852;
    background: rgba(92,120,82,0.1);
}

.support-ticket-status.closed {
    color: var(--text-secondary, #7a8577);
    background: var(--bg-color, #eef3eb);
}

.support-ticket-subject {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text, #1b3a2d);
    line-height: 1.3;
    margin-bottom: 3px;
}

.support-ticket-date {
    font-size: 0.75rem;
    color: var(--text-secondary, #7a8577);
}

/* Ticket detail view */
.support-ticket-detail-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.support-ticket-detail-header {
    padding-bottom: 16px;
    border-bottom: 1.5px solid var(--border, #c0d0ba);
}

.support-ticket-detail-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.support-ticket-detail-subject {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text, #1b3a2d);
    margin: 0 0 8px;
    line-height: 1.3;
}

.support-ticket-detail-meta-row {
    display: flex;
    gap: 20px;
    font-size: 0.8rem;
    color: var(--text-secondary, #7a8577);
}

.support-ticket-detail-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.support-ticket-detail-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #7a8577);
}

.support-ticket-detail-section-body {
    font-size: 0.9rem;
    color: var(--text, #1b3a2d);
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--bg-color, #eef3eb);
    border: 1.5px solid var(--border, #c0d0ba);
    border-radius: 8px;
    padding: 14px;
}

/* ── Support Panel — dark mode ── */
body.dark-mode .support-input,
body.dark-mode .support-select,
body.dark-mode .support-textarea {
    background: rgba(15, 30, 10, 0.55);
    color: var(--text);
    border-color: rgba(92, 120, 82, 0.25);
}

body.dark-mode .support-input:focus,
body.dark-mode .support-select:focus,
body.dark-mode .support-textarea:focus {
    border-color: rgba(92, 120, 82, 0.55);
    box-shadow: 0 0 0 3px rgba(92, 120, 82, 0.12);
}

body.dark-mode .support-input::placeholder,
body.dark-mode .support-textarea::placeholder {
    color: rgba(180, 210, 175, 0.35);
}

body.dark-mode .support-ticket-row {
    background: rgba(15, 30, 10, 0.4);
    border-color: rgba(92, 120, 82, 0.18);
}

body.dark-mode .support-ticket-row:hover {
    background: rgba(15, 30, 10, 0.6);
    border-color: rgba(92, 120, 82, 0.4);
}

body.dark-mode .support-ticket-detail-header {
    border-bottom-color: rgba(92, 120, 82, 0.18);
}

body.dark-mode .support-ticket-detail-section-body {
    background: rgba(15, 30, 10, 0.4);
    border-color: rgba(92, 120, 82, 0.18);
}

body.dark-mode .support-ticket-status.closed {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
}

body.dark-mode .support-category-card {
    position: relative;
    overflow: hidden;
    background: rgba(18, 30, 16, 0.75) !important;
    border-color: var(--cat-color) !important;
    border-width: 1.5px !important;
}

body.dark-mode .support-category-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--cat-color);
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}

body.dark-mode .support-cat-label,
body.dark-mode .support-cat-desc {
    position: relative;
    z-index: 1;
}

body.dark-mode .support-category-card:hover {
    border-color: var(--cat-color) !important;
    box-shadow: 0 0 0 1px var(--cat-color), 0 4px 16px rgba(0,0,0,0.3);
}

body.dark-mode .support-category-card:hover::before {
    opacity: 0.28;
}

/* "View Existing Tickets" button — solid green in dark mode */
body.dark-mode .support-tickets-btn {
    background: #3a7d55 !important;
    color: #e8f5ec !important;
    border: 1.5px solid #4fa36e !important;
}

body.dark-mode .support-tickets-btn:hover {
    background: #2e6944 !important;
    border-color: #5aba7e !important;
}

/* ══════════════════════════════════════════════════
   Supplier Profile Gate — blocks the main wizard when
   required profile fields are incomplete. The profile
   panel itself reuses operator-react.css classes
   (.operator-profile-panel, .assess-header, .section-title,
   .form-grid, .field, .req, .operator-profile-actions).
   ══════════════════════════════════════════════════ */
.profile-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 28px;
    text-align: center;
    animation: nudgeFadeIn 0.5s ease;
}

.profile-gate-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5c7852 0%, #253d1c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: 18px;
    animation: nudgePulse 2s ease-in-out infinite;
}

.profile-gate-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 8px;
    font-family: var(--font-display);
}

.profile-gate-desc {
    font-size: 0.92rem;
    color: var(--muted-color);
    max-width: 460px;
    line-height: 1.55;
    margin: 0 0 24px;
}

.profile-gate-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.profile-gate-btn .profile-gate-arrow {
    font-size: 1.1rem;
    animation: nudgeBounceX 1s ease-in-out infinite;
}

body.dark-mode .profile-gate-title { color: #e2e8f0; }

/* ═══════════════════════════════════════════
   ValidatedInput — inline validation tooltip
   ═══════════════════════════════════════════ */
.gt-vinput-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.gt-vinput-wrap > input {
    width: 100%;
    box-sizing: border-box;
}

.gt-vinput-has-tooltip > input,
.gt-vinput-wrap > input[aria-invalid="true"] {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12) !important;
}

.gt-vinput-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 50;
    min-width: 200px;
    max-width: 320px;
    padding: 9px 12px;
    background: var(--primary-color, #253d1c);
    color: var(--header-text, #d8e8d2);
    border: 1px solid rgba(92, 120, 82, 0.45);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(22, 43, 14, 0.25);
    font-size: 0.78rem;
    line-height: 1.35;
    pointer-events: none;
    animation: gtVinputFadeIn 0.18s ease-out;
}

.gt-vinput-tooltip-arrow {
    position: absolute;
    top: -5px;
    left: 16px;
    width: 10px;
    height: 10px;
    background: var(--primary-color, #253d1c);
    border-left: 1px solid rgba(92, 120, 82, 0.45);
    border-top: 1px solid rgba(92, 120, 82, 0.45);
    transform: rotate(45deg);
    border-radius: 2px;
}

.gt-vinput-tooltip-issue,
.gt-vinput-tooltip-example {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    position: relative;
}

.gt-vinput-tooltip-issue {
    color: #ffd27a;
    font-weight: 600;
}

.gt-vinput-tooltip-issue svg { flex-shrink: 0; margin-top: 1px; color: #ffd27a; }

.gt-vinput-tooltip-example {
    margin-top: 5px;
    color: var(--header-text, #d8e8d2);
    font-weight: 500;
    opacity: 0.95;
}

.gt-vinput-tooltip-example svg { flex-shrink: 0; margin-top: 2px; color: #a7dcb1; }

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

/* When there isn't room below (e.g. bottom of a scroll container) — flip up */
.gt-vinput-tooltip.gt-vinput-tooltip--above {
    top: auto;
    bottom: calc(100% + 8px);
}
.gt-vinput-tooltip.gt-vinput-tooltip--above .gt-vinput-tooltip-arrow {
    top: auto;
    bottom: -5px;
}

body.dark-mode .gt-vinput-tooltip {
    background: #121f0b;
    border-color: rgba(92, 120, 82, 0.55);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}
body.dark-mode .gt-vinput-tooltip-arrow {
    background: #121f0b;
    border-left-color: rgba(92, 120, 82, 0.55);
    border-top-color: rgba(92, 120, 82, 0.55);
}
body.dark-mode .gt-vinput-has-tooltip > input,
body.dark-mode .gt-vinput-wrap > input[aria-invalid="true"] {
    border-color: #f87171 !important;
    box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.18) !important;
}
body.dark-mode .profile-gate-desc { color: #94a3b8; }