/* ==========================================================================
   LAND CHANGE MODELLING PLATFORM - DESIGN SYSTEM & MOCKUP STYLES
   ========================================================================== */

:root {
    --bg-body: #F8FAFC;
    --sidebar-bg: #0F172A;
    --sidebar-text: #94A3B8;
    --sidebar-active-bg: #2563EB;
    --sidebar-active-text: #FFFFFF;
    
    --card-bg: #FFFFFF;
    --border-color: #E2E8F0;
    
    --text-main: #0F172A;
    --text-muted: #64748B;
    
    --primary-blue: #2563EB;
    --primary-blue-hover: #1D4ED8;
    
    /* Stat Badge Colors */
    --icon-blue-bg: #EFF6FF;
    --icon-blue-fg: #2563EB;
    
    --icon-green-bg: #ECFDF5;
    --icon-green-fg: #10B981;
    
    --icon-yellow-bg: #FFFBEB;
    --icon-yellow-fg: #F59E0B;
    
    --icon-purple-bg: #F3E8FF;
    --icon-purple-fg: #9333EA;
    
    --icon-red-bg: #FEF2F2;
    --icon-red-fg: #EF4444;

    --icon-teal-bg: #F0FDFA;
    --icon-teal-fg: #14B8A6;
    
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(15,23,42,0.06);
    --shadow-lg: 0 10px 25px rgba(15,23,42,0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    font-size: 14px;
    line-height: 1.5;
}

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

/* --------------------------------------------------------------------------
   LEFT SIDEBAR
   -------------------------------------------------------------------------- */
.sidebar {
    width: 250px;
    background-color: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: all 0.3s ease;
    z-index: 100;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 22px;
}

.brand-logo {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #2563EB, #06B6D4);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.brand-title {
    color: #FFFFFF;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    line-height: 1.1;
}

.brand-subtitle {
    color: #64748B;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.6px;
    margin-top: 2px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    overflow-y: auto;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 13.5px;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.nav-item i {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.nav-item:hover {
    color: #F8FAFC;
    background-color: rgba(255, 255, 255, 0.06);
}

.nav-item.active {
    background-color: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

/* --------------------------------------------------------------------------
   MAIN WRAPPER & TOPBAR
   -------------------------------------------------------------------------- */
.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.topbar {
    height: 64px;
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
}

.toggle-sidebar-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
}

.toggle-sidebar-btn:hover {
    color: var(--text-main);
    background-color: var(--bg-body);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Project Selector Dropdown */
.project-selector-dropdown {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #F1F5F9;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #E2E8F0;
    max-width: 320px;
    flex-shrink: 1;
    overflow: hidden;
}

/* Workspace Badge Selector */
.workspace-badge-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #EFF6FF;
    border: 1px solid #BFDBFE;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.workspace-badge-selector:hover {
    background-color: #DBEAFE;
    border-color: #93C5FD;
}

.workspace-badge-selector .icon-folder {
    color: #2563EB;
    font-size: 14px;
}

.workspace-badge-selector .ws-label {
    font-weight: 600;
    font-size: 12px;
    color: #1E40AF;
}

.workspace-badge-selector .ws-path {
    font-weight: 500;
    font-size: 12px;
    color: #1E293B;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Toast Notification Container */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast-message {
    pointer-events: auto;
    background: white;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-blue);
    padding: 14px 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 320px;
    max-width: 440px;
    animation: toastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast-message.toast-success { border-left-color: #10B981; }
.toast-message.toast-error { border-left-color: #EF4444; }
.toast-message.toast-warning { border-left-color: #F59E0B; }

.toast-icon {
    font-size: 18px;
    margin-top: 2px;
}
.toast-success .toast-icon { color: #10B981; }
.toast-error .toast-icon { color: #EF4444; }
.toast-warning .toast-icon { color: #F59E0B; }
.toast-info .toast-icon { color: #2563EB; }

.toast-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toast-title {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-main);
}

.toast-body {
    font-size: 12px;
    color: var(--text-muted);
    word-break: break-word;
}

.toast-body code {
    background: #F1F5F9;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    color: #1E293B;
    font-family: monospace;
    display: inline-block;
    margin-top: 4px;
    word-break: break-all;
}

.toast-close {
    background: none;
    border: none;
    color: #94A3B8;
    cursor: pointer;
    font-size: 14px;
}

.toast-close:hover { color: var(--text-main); }

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Professional Notification Dialog Modal */
.dialog-icon-header {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #DCFCE7;
    color: #166534;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 12px;
}

.dialog-detail-card {
    background-color: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: var(--radius-sm);
    padding: 14px;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.detail-item-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.detail-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.detail-value {
    font-size: 12.5px;
    font-weight: 600;
    color: #0F172A;
}

.detail-path-badge {
    background-color: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #1E40AF;
    font-family: monospace;
    font-size: 11.5px;
    padding: 6px 10px;
    border-radius: 6px;
    word-break: break-all;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.btn-copy-path {
    background: white;
    border: 1px solid #93C5FD;
    color: #1D4ED8;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    font-weight: 600;
    flex-shrink: 0;
}

.btn-copy-path:hover {
    background: #DBEAFE;
}

.label-prefix {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 13px;
}

.project-select-input {
    background: none;
    border: none;
    font-weight: 600;
    color: var(--text-main);
    font-size: 13px;
    cursor: pointer;
    outline: none;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Notification Bell Badge */
.notification-icon {
    position: relative;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: background 0.2s;
}

.notification-icon:hover {
    background-color: var(--bg-body);
    color: var(--text-main);
}

.badge-count {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: #EF4444;
    color: white;
    font-size: 10px;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}

/* User Profile */
.user-profile-menu {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

.avatar-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.user-info {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    flex-shrink: 0;
}

.user-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-main);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
    display: block;
}

.user-role {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.2;
    margin-top: 1px;
    white-space: nowrap;
}

.profile-chevron {
    font-size: 11px;
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   CONTENT CONTAINER
   -------------------------------------------------------------------------- */
.content-container {
    padding: 24px 28px;
}

/* ==========================================================================
   LANDING HUB & COMMAND CENTER STYLES
   ========================================================================== */
.dashboard-landing-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.landing-hero-card {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F3854 100%);
    border-radius: var(--radius-lg);
    padding: 32px 36px;
    color: #FFFFFF;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15);
    position: relative;
    overflow: hidden;
}

.landing-hero-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #38BDF8;
    width: fit-content;
}

.hero-title {
    font-size: 26px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.3;
}

.hero-description {
    font-size: 14px;
    color: #94A3B8;
    max-width: 860px;
    line-height: 1.6;
}

.hero-active-project-bar {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: 14px 20px;
    gap: 20px;
    flex-wrap: wrap;
}

.active-proj-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

.proj-label {
    color: #94A3B8;
}

.proj-name {
    color: #F8FAFC;
    font-size: 15px;
}

.proj-location {
    background: rgba(56, 189, 248, 0.15);
    color: #38BDF8;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-hero-primary {
    background-color: #2563EB;
    color: #FFFFFF !important;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

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

.btn-hero-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #F8FAFC !important;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
}

.btn-hero-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}

.btn-hero-emerald {
    background-color: #059669;
    color: #FFFFFF !important;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.btn-hero-emerald:hover {
    background-color: #047857;
    transform: translateY(-1px);
}

/* Pipeline Grid */
.landing-pipeline-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-subtext {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

.pipeline-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.pipeline-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
    position: relative;
}

.pipeline-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: #CBD5E1;
}

.pipeline-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pipeline-step-badge {
    font-size: 12px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 12px;
}

.step-1 { background: #EFF6FF; color: #2563EB; }
.step-2 { background: #F0FDFA; color: #0D9488; }
.step-3 { background: #FFFBEB; color: #D97706; }
.step-4 { background: #ECFDF5; color: #059669; }
.step-5 { background: #F3E8FF; color: #7C3AED; }
.step-6 { background: #FEF2F2; color: #DC2626; }

.pipeline-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.pipeline-card h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.pipeline-card p {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    flex-grow: 1;
}

.pipeline-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-blue);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s ease;
    margin-top: 4px;
}

.pipeline-link:hover {
    gap: 10px;
    color: var(--primary-blue-hover);
}

/* Bottom Grid */
.landing-bottom-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
}

.landing-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.landing-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.landing-card-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.landing-card-body {
    padding: 20px;
}

.landing-card-body.p-0 {
    padding: 0;
}

.landing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.landing-table th {
    background: #F8FAFC;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
}

.landing-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #F1F5F9;
    vertical-align: middle;
}

.sim-name-cell {
    display: flex;
    flex-direction: column;
}

.sim-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
}

.status-completed { background: #ECFDF5; color: #059669; }
.status-running { background: #FFFBEB; color: #D97706; }
.status-queued { background: #EFF6FF; color: #2563EB; }
.status-failed { background: #FEF2F2; color: #DC2626; }

.workspace-summary-box {
    background: #F8FAFC;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.ws-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
}

.ws-row span {
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ws-path {
    font-family: monospace;
    font-size: 11px;
    background: #E2E8F0;
    padding: 2px 6px;
    border-radius: 4px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-shortcuts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shortcut-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-main);
    transition: all 0.2s ease;
}

.shortcut-btn:hover {
    border-color: var(--primary-blue);
    background: #F8FAFC;
    transform: translateX(2px);
}

.shortcut-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #EFF6FF;
    color: #2563EB;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.shortcut-text {
    display: flex;
    flex-direction: column;
}

.shortcut-text strong {
    font-size: 13px;
    font-weight: 600;
}

.shortcut-text small {
    font-size: 11px;
    color: var(--text-muted);
}

.dashboard-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --------------------------------------------------------------------------
   KPI METRIC STAT CARDS (5 Cards)
   -------------------------------------------------------------------------- */
.stat-cards-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.stat-card {
    background-color: var(--card-bg);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.icon-blue { background-color: var(--icon-blue-bg); color: var(--icon-blue-fg); }
.icon-green { background-color: var(--icon-green-bg); color: var(--icon-green-fg); }
.icon-yellow { background-color: var(--icon-yellow-bg); color: var(--icon-yellow-fg); }
.icon-purple { background-color: var(--icon-purple-bg); color: var(--icon-purple-fg); }
.icon-red { background-color: var(--icon-red-bg); color: var(--icon-red-fg); }
.icon-teal { background-color: var(--icon-teal-bg); color: var(--icon-teal-fg); }

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-title {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.stat-value-group {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
}

.stat-subtext {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}

/* --------------------------------------------------------------------------
   MAIN GIS SECTION (MAP VIEWER + LAYERS PANEL)
   -------------------------------------------------------------------------- */
.gis-main-section {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    min-height: 520px;
}

/* Map Viewer Card */
.map-viewer-card {
    background-color: var(--card-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.map-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
}

.card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
}

.map-header-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.basemap-select {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background-color: #F8FAFC;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    outline: none;
}

.map-quick-tools {
    display: flex;
    align-items: center;
    gap: 4px;
}

.map-tool-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background-color: white;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.map-tool-btn:hover {
    background-color: var(--bg-body);
    color: var(--text-main);
}

/* Map Container & Floating GIS Toolbar */
.map-container-wrapper {
    position: relative;
    flex: 1;
    min-height: 460px;
}

.webgis-map-canvas {
    width: 100%;
    height: 100%;
    min-height: 460px;
    z-index: 1;
}

/* Floating Vertical GIS Toolbar Overlay */
.floating-gis-toolbar {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1000;
    background-color: white;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

/* Hide native Leaflet control bars in top-left to avoid overlap/stacking with floating-gis-toolbar */
.leaflet-draw,
.leaflet-top.leaflet-left .leaflet-control {
    display: none !important;
}

.gis-tool-item {
    width: 36px;
    height: 36px;
    border: none;
    background: white;
    color: #475569;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #F1F5F9;
    transition: all 0.2s;
}

.gis-tool-item:last-child {
    border-bottom: none;
}

.gis-tool-item:hover {
    background-color: #F8FAFC;
    color: var(--primary-blue);
}

.gis-tool-item.active {
    background-color: #EFF6FF;
    color: var(--primary-blue);
    font-weight: 700;
}

.is-measuring,
.is-measuring *,
.is-measuring-distance,
.is-measuring-distance *,
.webgis-map-canvas.is-measuring,
.webgis-map-canvas.is-measuring *,
.webgis-map-canvas.is-measuring-distance,
.webgis-map-canvas.is-measuring-distance * {
    cursor: crosshair !important;
}

.webgis-map-canvas.is-identifying-feature,
.webgis-map-canvas.is-identifying-feature .leaflet-container {
    cursor: help;
}

/* Custom Leaflet.Draw Vertex Markers: Small round circle dots instead of large square boxes */
.leaflet-editing-icon,
.leaflet-div-icon.leaflet-editing-icon,
.circle-vertex-icon {
    width: 8px !important;
    height: 8px !important;
    margin-left: -4px !important;
    margin-top: -4px !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    border: 2px solid #2563EB !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}

.distance-measure-label {
    background: rgba(15, 23, 42, 0.92);
    border: 0;
    border-radius: 4px;
    box-shadow: none;
    color: #FFFFFF;
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 6px;
    white-space: nowrap;
}

.distance-measure-label::before {
    display: none;
}

/* Map Bottom Status Bar Overlay */
.map-status-footer {
    position: absolute;
    bottom: 12px;
    left: 16px;
    right: 16px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.map-scale-container {
    pointer-events: auto;
    background-color: rgba(15, 23, 42, 0.85);
    color: white;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    backdrop-filter: blur(4px);
}

.custom-scale-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.scale-segment {
    width: 50px;
    height: 4px;
    background-color: white;
    border-radius: 2px;
}

.scale-text {
    font-size: 11px;
    font-weight: 600;
}

.map-coords-container {
    pointer-events: auto;
    background-color: rgba(15, 23, 42, 0.85);
    color: white;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(4px);
}

.crs-badge {
    color: #94A3B8;
}

/* Keep the legend clear of the bottom-right cursor-coordinate status. */
.leaflet-bottom.leaflet-right .raster-map-legend {
    margin-bottom: 48px;
}

/* --------------------------------------------------------------------------
   RIGHT LAYERS PANEL
   -------------------------------------------------------------------------- */
.layers-panel-card {
    background-color: var(--card-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

.layers-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
}

.layers-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.icon-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.icon-action-btn:hover {
    background-color: var(--bg-body);
    color: var(--text-main);
}

.btn-add-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background-color: var(--primary-blue);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: background 0.2s;
}

.btn-add-icon:hover {
    background-color: var(--primary-blue-hover);
}

.layers-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 380px;
}

.layer-item-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease;
    border: 1px solid transparent;
}

.layer-item-row:hover {
    background-color: #F8FAFC;
    border-color: #E2E8F0;
}

.drag-handle {
    color: #CBD5E1;
    font-size: 12px;
    cursor: grab;
}

.layer-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-blue);
    cursor: pointer;
}

.layer-thumb {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
}

.raster-thumb { background: linear-gradient(135deg, #10B981, #34D399); color: white; }
.raster-thumb.orange { background: linear-gradient(135deg, #F59E0B, #FBBF24); }
.raster-thumb.green { background: linear-gradient(135deg, #84CC16, #A3E635); }
.raster-thumb.blue { background: linear-gradient(135deg, #0EA5E9, #38BDF8); }
.raster-thumb.teal { background: linear-gradient(135deg, #14B8A6, #2DD4BF); }
.raster-thumb.grey { background: linear-gradient(135deg, #64748B, #94A3B8); }
.vector-thumb { background-color: #EFF6FF; color: var(--primary-blue); border: 1px solid #BFDBFE; }

.layer-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.layer-title {
    font-weight: 600;
    font-size: 12.5px;
    color: var(--text-main);
    line-height: 1.2;
}

.layer-type-badge {
    font-size: 10.5px;
    color: var(--text-muted);
}

.layer-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.layer-action-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}

.layer-action-btn.toggle-eye.active {
    color: var(--primary-blue);
}

/* Layer Dropdown Context Menu */
.layer-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.layer-dropdown-menu {
    position: absolute;
    right: 0;
    top: 28px;
    background-color: white;
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
    border: 1px solid var(--border-color);
    padding: 4px 0;
    min-width: 160px;
    z-index: 900;
    display: none;
}

.layer-dropdown-menu.show {
    display: flex;
    flex-direction: column;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-main);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.dropdown-item:hover {
    background-color: #F1F5F9;
}

.dropdown-item.text-danger {
    color: #EF4444;
}

.dropdown-item.text-danger:hover {
    background-color: #FEF2F2;
}

.layers-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--border-color);
}

.btn-add-layer-outline {
    width: 100%;
    padding: 8px;
    border: 1px solid #BFDBFE;
    background-color: #EFF6FF;
    color: var(--primary-blue);
    font-weight: 600;
    font-size: 13px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-add-layer-outline:hover {
    background-color: #DBEAFE;
}

/* --------------------------------------------------------------------------
   BOTTOM DASHBOARD CARDS (3 CARDS)
   -------------------------------------------------------------------------- */
.dashboard-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.bottom-card {
    background-color: var(--card-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
}

.card-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.view-all-link {
    color: var(--primary-blue);
    font-weight: 600;
    font-size: 12.5px;
    text-decoration: none;
}

.simulations-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sim-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background-color: #F8FAFC;
    border: 1px solid #F1F5F9;
}

.sim-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: white;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 13px;
}

.sim-details {
    flex: 1;
}

.sim-name {
    font-weight: 600;
    font-size: 12.5px;
    color: var(--text-main);
}

.sim-status-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.badge {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
}

.badge-completed { background-color: #DCFCE7; color: #15803D; }
.badge-running { background-color: #DBEAFE; color: #1D4ED8; }
.badge-queued { background-color: #FEF3C7; color: #B45309; }

.sim-time {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

.sim-arrow {
    font-size: 11px;
    color: #94A3B8;
}

/* System Status List */
.system-status-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #F1F5F9;
}

.status-row:last-child {
    border-bottom: none;
}

.status-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 13px;
    color: var(--text-main);
}

.icon-sub {
    color: var(--text-muted);
    font-size: 14px;
    width: 18px;
}

.status-value {
    font-weight: 600;
    font-size: 12.5px;
}

.status-online { color: #10B981; }
.text-blue { color: #2563EB; }
.text-teal { color: #14B8A6; }

/* Quick Actions Grid */
.quick-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.quick-btn {
    display: flex;
    flex-direction: flex-start;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background-color: #F8FAFC;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.quick-btn:hover {
    background-color: #EFF6FF;
    border-color: #BFDBFE;
}

.quick-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.quick-btn span {
    font-weight: 600;
    font-size: 12.5px;
    color: var(--text-main);
}

/* --------------------------------------------------------------------------
   MODALS & UTILITIES
   -------------------------------------------------------------------------- */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-backdrop.active {
    display: flex;
}

.modal-box {
    background-color: white;
    width: 500px;
    max-width: 90%;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid var(--border-color);
}

.close-modal {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--text-muted);
    cursor: pointer;
}

.modal-body {
    padding: 22px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.form-group label {
    font-weight: 600;
    font-size: 12.5px;
    color: var(--text-main);
}

.form-control {
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    font-size: 13px;
    outline: none;
}

.form-control:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.btn {
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.btn-primary { background-color: var(--primary-blue); color: white; }
.btn-primary:hover { background-color: var(--primary-blue-hover); }
.btn-secondary { background-color: #E2E8F0; color: var(--text-main); }
.btn-secondary:hover { background-color: #CBD5E1; }
.btn-outline { border: 1px solid var(--border-color); background: white; color: var(--text-main); }
.btn-danger { background-color: #EF4444; color: white; border: none; }
.btn-danger:hover { background-color: #DC2626; }

.dialog-icon-header.icon-danger-bg {
    background: #FEF2F2;
    color: #DC2626;
}

/* ArcGIS Desktop Layer Properties Window Styling */
.modal-box.arcgis-properties-dialog {
    background: #F1F5F9;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25);
    padding: 0;
    overflow: hidden;
}

.arcgis-window-titlebar {
    background: #E2E8F0;
    border-bottom: 1px solid #CBD5E1;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 13px;
    color: #0F172A;
}

.arcgis-symbology-layout {
    display: flex;
    gap: 14px;
    background: white;
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    padding: 12px;
    min-height: 280px;
}

.symbology-sidebar {
    width: 140px;
    border-right: 1px solid #E2E8F0;
    padding-right: 12px;
}

.sidebar-header-title {
    font-size: 11px;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
}

.symbology-render-types {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.type-item {
    padding: 6px 10px;
    font-size: 11.5px;
    font-weight: 500;
    color: #334155;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.type-item:hover {
    background-color: #F1F5F9;
}

.type-item.active {
    background-color: #2563EB;
    color: white;
    font-weight: 600;
}

.symbology-config-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.color-ramp-wrapper {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 12px;
}

.color-ramp-dropdown-box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.color-ramp-select {
    flex: 1;
    padding: 6px 10px;
    font-size: 11.5px;
    border: 1px solid #CBD5E1;
    border-radius: 4px;
    background: white;
    font-weight: 600;
}

.color-ramp-preview-bar {
    width: 92px;
    height: 22px;
    flex: 0 0 92px;
    border: 1px solid #94A3B8;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.pixel-values-table-wrapper {
    flex: 1;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    overflow-y: auto;
    max-height: 180px;
    background: #FAFAFA;
}

.arcgis-pixel-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}

.arcgis-pixel-table th {
    background: #F1F5F9;
    padding: 6px 8px;
    text-align: left;
    color: #475569;
    border-bottom: 1px solid #E2E8F0;
}

.arcgis-pixel-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #F1F5F9;
    vertical-align: middle;
}

.pixel-color-picker {
    width: 28px;
    height: 24px;
    border: 1px solid #CBD5E1;
    border-radius: 4px;
    cursor: pointer;
}

.table-input-label {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    padding: 3px 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: #0F172A;
    border-radius: 4px;
}

.table-input-label:focus, .table-input-label:hover {
    border-color: #CBD5E1;
    background: white;
}

.arcgis-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.color-swatch-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

.color-swatch-btn.active {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

.text-danger { color: #EF4444 !important; }
.text-green { color: #10B981 !important; }
.text-blue { color: #2563EB !important; }
.is-hidden { display: none !important; }

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.upload-dropzone {
    border: 2px dashed #CBD5E1;
    border-radius: var(--radius-md);
    padding: 30px;
    text-align: center;
    background-color: #F8FAFC;
}

.drop-icon {
    font-size: 36px;
    color: var(--primary-blue);
    margin-bottom: 10px;
}

.upload-dropzone p {
    font-weight: 600;
    font-size: 13px;
}

.upload-dropzone .sub-text {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
    margin: 4px 0 14px 0;
}

/* Page Container & Card Boxes */
.page-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.page-header h2 {
    font-size: 20px;
    font-weight: 700;
}

.page-header .subtext {
    color: var(--text-muted);
    font-size: 13px;
}

.card-box {
    background-color: white;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    padding: 22px;
}

/* Project Manager: all operational resources are grouped by project. */
.page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: #2563EB;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
    gap: 16px;
}

.project-summary-card {
    display: flex;
    min-height: 260px;
    flex-direction: column;
    padding: 19px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .03);
}

.project-summary-card.is-active {
    border-color: #93C5FD;
    box-shadow: 0 0 0 3px #EFF6FF;
}

.project-card-topline,
.project-card-actions,
.project-resource-header,
.composition-heading,
.project-detail-hero,
.project-hero-meta {
    display: flex;
    align-items: center;
}

.project-card-topline { justify-content: space-between; }

.project-folder-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 9px;
    color: #2563EB;
    background: #DBEAFE;
}

.project-status-badge,
.project-id-pill,
.active-project-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 750;
}

.project-status-badge {
    padding: 4px 8px;
    color: #047857;
    background: #D1FAE5;
}

.project-status-badge.planning { color: #B45309; background: #FEF3C7; }
.project-status-badge.archived { color: #64748B; background: #E2E8F0; }

.project-summary-card h3 {
    margin: 15px 0 5px;
    color: #0F172A;
    font-size: 16px;
}

.project-location,
.project-description {
    margin: 0;
    color: #64748B;
    font-size: 12px;
    line-height: 1.5;
}

.project-location i { color: #2563EB; margin-right: 3px; }
.project-description { min-height: 38px; margin-top: 10px; }

.project-workspace-line,
.project-workspace-chip {
    color: #64748B;
    font-size: 12px;
    font-weight: 700;
    max-width: 100%;
}

.project-workspace-line {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-workspace-chip {
    align-items: center;
    background: #F1F5F9;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    display: inline-flex;
    gap: 7px;
    line-height: 1.35;
    padding: 7px 9px;
}

.project-card-metrics {
    display: flex;
    gap: 13px;
    margin-top: 16px;
    color: #64748B;
    font-size: 11px;
}

.project-card-metrics strong { display: block; color: #0F172A; font-size: 15px; }

.project-card-actions {
    justify-content: space-between;
    gap: 9px;
    margin-top: auto;
    padding-top: 16px;
}

.active-project-label { color: #047857; white-space: nowrap; }

.project-empty-state {
    padding: 56px 24px;
    border: 1px dashed #93C5FD;
    border-radius: 12px;
    background: #F8FBFF;
    text-align: center;
}

.project-empty-icon {
    display: grid;
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    place-items: center;
    border-radius: 12px;
    color: #2563EB;
    background: #DBEAFE;
    font-size: 20px;
}

.project-empty-state h3 { margin: 0; color: #0F172A; }
.project-empty-state p { max-width: 470px; margin: 8px auto 18px; color: #64748B; font-size: 13px; }

.project-detail-page { gap: 18px; }

.project-detail-hero {
    justify-content: space-between;
    gap: 22px;
    padding: 23px 25px;
    border: 1px solid #DBEAFE;
    border-radius: 13px;
    background: linear-gradient(105deg, #EFF6FF 0%, #FFFFFF 65%);
}

.project-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    color: #475569;
    font-size: 12px;
    font-weight: 650;
}

.project-detail-hero h2 { margin: 0; color: #0F172A; font-size: 23px; }
.project-detail-hero p { max-width: 700px; margin: 7px 0 0; color: #64748B; font-size: 13px; }

.project-hero-meta {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 9px;
    color: #475569;
    font-size: 12px;
}

.project-overview-strip,
.project-workflow-panel {
    padding: 18px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #FFFFFF;
}

.project-overview-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: #475569;
    font-size: 12px;
    font-weight: 650;
}

.project-overview-main span:not(.project-id-pill) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 8px;
    background: #F8FAFC;
}

.project-overview-main i { color: #2563EB; }

.workflow-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 15px;
}

.workflow-heading h3 { margin: 0; color: #0F172A; font-size: 15px; }
.workflow-heading p { margin: 5px 0 0; color: #64748B; font-size: 12px; }

.project-workflow-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.workflow-card {
    position: relative;
    min-height: 136px;
    padding: 15px;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    background: #F8FAFC;
    color: #334155;
}

.workflow-card:hover {
    border-color: #93C5FD;
    background: #EFF6FF;
    color: #1D4ED8;
}

.workflow-card > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 9px;
    color: #2563EB;
    background: #DBEAFE;
}

.workflow-card strong,
.workflow-card small {
    display: block;
}

.workflow-card strong { margin-top: 13px; color: #0F172A; font-size: 13px; }
.workflow-card small { margin-top: 5px; color: #64748B; font-size: 11px; line-height: 1.45; }
.workflow-card b {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-grid;
    min-width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 8px;
    color: #1D4ED8;
    background: #DBEAFE;
    font-size: 11px;
}

.project-composition {
    padding: 18px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #FFFFFF;
}

.composition-heading { justify-content: space-between; margin-bottom: 14px; }
.composition-heading h3 { margin: 0; color: #0F172A; font-size: 15px; }
.composition-heading p { margin: 4px 0 0; color: #64748B; font-size: 12px; }
.project-id-pill { padding: 5px 9px; color: #475569; background: #F1F5F9; }

.project-composition-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #E2E8F0;
    border-radius: 9px;
}

.composition-item {
    position: relative;
    display: flex;
    min-height: 82px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    border-right: 1px solid #E2E8F0;
    color: #475569;
    text-align: center;
    font-size: 10px;
    font-weight: 650;
}

.composition-item:last-child { border-right: 0; }
.composition-item i { color: #2563EB; font-size: 15px; }
.composition-item strong { position: absolute; top: 8px; right: 8px; color: #0F172A; font-size: 10px; }
.composition-item:hover { background: #F8FAFC; color: #1D4ED8; }

.project-resource-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.project-resource-grid-compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.project-resource-card {
    min-height: 155px;
    padding: 16px;
    border: 1px solid #E2E8F0;
    border-radius: 11px;
    background: #FFFFFF;
}

.project-resource-header { justify-content: space-between; gap: 8px; margin-bottom: 13px; }
.project-resource-header h3 { margin: 0; color: #0F172A; font-size: 13px; }
.project-resource-header h3 i { margin-right: 6px; color: #2563EB; }
.project-resource-header > span { display: inline-grid; min-width: 22px; height: 22px; place-items: center; border-radius: 7px; color: #1D4ED8; background: #DBEAFE; font-size: 11px; font-weight: 750; }
.project-resource-link { margin-left: auto; color: #2563EB; font-size: 10.5px; font-weight: 750; }

.project-info-card { background: #F8FBFF; border-color: #DBEAFE; }
.project-info-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 14px; margin: 0; }
.project-info-list div { min-width: 0; }
.project-info-list dt { margin-bottom: 2px; color: #64748B; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.project-info-list dd { overflow: hidden; margin: 0; color: #0F172A; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }

.resource-row { padding: 8px 0; border-top: 1px solid #F1F5F9; }
.resource-row:first-of-type { border-top: 0; }
.resource-row strong, .resource-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-row strong { color: #1E293B; font-size: 11.5px; }
.resource-row small, .resource-more { margin-top: 2px; color: #64748B; font-size: 10.5px; }
.resource-more { display: block; padding-top: 7px; font-weight: 650; }

.class-definition-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: #334155; font-size: 11.5px; }
.class-color { width: 14px; height: 14px; flex: 0 0 14px; border: 1px solid rgba(15, 23, 42, .14); border-radius: 3px; }
.class-definition-row strong { width: 19px; color: #64748B; font-size: 10.5px; }
.project-resource-empty { display: block; padding: 18px 0; color: #94A3B8; font-size: 11.5px; text-align: center; }

@media (max-width: 1200px) {
    .project-composition-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .composition-item { border-bottom: 1px solid #E2E8F0; }
    .composition-item:nth-child(3n) { border-right: 0; }
    .composition-item:nth-last-child(-n+3) { border-bottom: 0; }
    .project-workflow-grid,
    .project-resource-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .project-resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .project-detail-hero, .composition-heading, .workflow-heading { align-items: flex-start; flex-direction: column; }
    .project-hero-meta { align-items: flex-start; }
    .project-composition-grid, .project-resource-grid, .project-workflow-grid, .project-resource-grid-compact { grid-template-columns: 1fr; }
    .composition-item, .composition-item:nth-child(3n) { min-height: 58px; flex-direction: row; justify-content: flex-start; border-right: 0; border-bottom: 1px solid #E2E8F0; text-align: left; }
    .composition-item:last-child { border-bottom: 0; }
    .composition-item strong { position: static; margin-left: auto; }
}

/* Operational managers: simulations, map contents, validation, results, administration. */
.operations-card {
    overflow: hidden;
    padding: 17px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #FFFFFF;
}

.operations-loading, .operations-empty, .operations-error {
    display: flex;
    min-height: 115px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #64748B;
    font-size: 12px;
}

.operations-empty { flex-direction: column; gap: 5px; }
.operations-empty i { color: #93C5FD; font-size: 22px; }
.operations-empty strong { color: #334155; }
.operations-empty span { color: #94A3B8; font-size: 11px; }
.operations-error { color: #B91C1C; }

.simulation-manager-list { display: grid; gap: 12px; }
.simulation-manager-row { padding: 14px; border: 1px solid #E2E8F0; border-radius: 9px; }
.simulation-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.simulation-row-head strong, .simulation-row-head small { display: block; }
.simulation-row-head strong { color: #0F172A; font-size: 13px; }
.simulation-row-head small { margin-top: 3px; color: #64748B; font-size: 10.5px; }
@keyframes simulation-bar-stripes {
    0% { background-position-x: 1rem; }
    100% { background-position-x: 0; }
}

.simulation-manager-row.is-active {
    border-color: #93C5FD;
    box-shadow: 0 0 0 1px #93C5FD, 0 4px 12px rgba(37, 99, 235, 0.08);
}
.operation-status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; color: #92400E; background: #FEF3C7; font-size: 10.5px; font-weight: 750; white-space: nowrap; }
.operation-status.queued { color: #92400E; background: #FEF3C7; border: 1px solid #FCD34D; }
.operation-status.running { color: #1D4ED8; background: #DBEAFE; border: 1px solid #93C5FD; }
.operation-status.completed { color: #047857; background: #D1FAE5; }
.operation-status.failed { color: #B91C1C; background: #FEE2E2; }
.operation-status.cancelled { color: #64748B; background: #E2E8F0; }
.simulation-progress { margin-top: 13px; }
.simulation-progress > div { display: flex; justify-content: space-between; margin-bottom: 5px; color: #475569; font-size: 10.5px; }
.simulation-progress > span { display: block; height: 7px; overflow: hidden; border-radius: 99px; background: #E2E8F0; }
.simulation-progress > span i { display: block; height: 100%; border-radius: inherit; background: #2563EB; transition: width .3s ease; }
.simulation-progress.is-active > span i {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
    animation: simulation-bar-stripes 0.8s linear infinite;
}
.simulation-stage-list { display: flex; gap: 5px; margin-top: 11px; overflow-x: auto; }
.simulation-stage-list span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 5px; color: #64748B; background: #F1F5F9; font-size: 9.5px; white-space: nowrap; }
.simulation-stage-list span.completed { color: #047857; background: #D1FAE5; }
.simulation-stage-list span.running { color: #1D4ED8; background: #DBEAFE; font-weight: 750; box-shadow: 0 0 0 1px #93C5FD; }
.simulation-stage-list span.failed { color: #B91C1C; background: #FEE2E2; }
.simulation-row-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; color: #64748B; font-size: 10px; }
.simulation-row-meta .error { color: #B91C1C; }
.simulation-row-meta .btn { margin-left: auto; }
.queue-simulation-modal {
    width: min(640px, calc(100vw - 32px));
    max-height: calc(100vh - 72px);
    display: flex;
    flex-direction: column;
}
.queue-simulation-modal form {
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.queue-simulation-modal .modal-body {
    min-height: 0;
    overflow-y: auto;
    padding: 22px 24px 18px;
}
.queue-simulation-footer {
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px 18px;
    border-top: 1px solid #E2E8F0;
    background: #FCFDFE;
}
.queue-simulation-footer .btn {
    min-width: 112px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    white-space: nowrap;
}
.queue-simulation-footer .btn-primary {
    min-width: 178px;
}
.simulation-log-box { max-height: 380px; overflow: auto; border: 1px solid #1E293B; border-radius: 7px; color: #D1D5DB; background: #0F172A; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.simulation-log-box > div { padding: 9px 11px; border-bottom: 1px solid #334155; }
.simulation-log-box time { color: #94A3B8; }
.simulation-log-box strong { margin-left: 7px; color: #60A5FA; }
.simulation-log-box span { margin-left: 7px; color: #A7F3D0; }
.simulation-log-box p { display: inline; margin: 0 0 0 7px; }

.map-viewer-content-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.map-content-group { min-height: 132px; padding: 14px; border: 1px solid #E2E8F0; border-radius: 10px; background: #FFFFFF; }
.map-content-group h3 { margin: 0 0 10px; color: #1E293B; font-size: 12.5px; }
.map-content-group > span { color: #94A3B8; font-size: 11px; }
.map-content-group > div { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 6px; padding: 6px 0; border-top: 1px solid #F1F5F9; }
.map-content-group i { color: #2563EB; font-size: 10px; }
.map-content-group strong, .map-content-group small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-content-group strong { color: #334155; font-size: 10.5px; }
.map-content-group small { grid-column: 2; color: #64748B; font-size: 9.5px; }

.validation-row { padding: 15px 0; border-bottom: 1px solid #E2E8F0; }
.validation-row:first-child { padding-top: 0; }
.validation-row:last-child { border-bottom: 0; padding-bottom: 0; }
.validation-row h3 { margin: 0 0 11px; color: #1E293B; font-size: 13px; }
.validation-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.validation-metrics span { padding: 9px; border-radius: 7px; background: #F8FAFC; }
.validation-metrics small, .validation-metrics strong { display: block; }
.validation-metrics small { color: #64748B; font-size: 9.5px; }
.validation-metrics strong { margin-top: 3px; color: #1E293B; font-size: 12px; }
.validation-row details { margin-top: 11px; color: #475569; font-size: 11px; }
.validation-row details summary { cursor: pointer; font-weight: 600; color: #2563EB; user-select: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 5px; background: #EFF6FF; }
.validation-row details summary:hover { background: #DBEAFE; }
.validation-row pre { max-height: 240px; overflow: auto; padding: 10px; border-radius: 7px; background: #0F172A; color: #E2E8F0; font-size: 10px; }

.validation-details-container { margin-top: 10px; padding: 14px; border: 1px solid #E2E8F0; border-radius: 9px; background: #FAFAFA; display: flex; flex-direction: column; gap: 16px; }
.val-section h4 { margin: 0 0 4px 0; font-size: 12px; font-weight: 700; color: #1E293B; display: flex; align-items: center; gap: 6px; }
.val-section h4 i { color: #2563EB; }
.val-desc { margin: 0 0 8px 0; font-size: 10.5px; color: #64748B; line-height: 1.4; }
.val-table-wrapper { overflow-x: auto; border: 1px solid #CBD5E1; border-radius: 7px; background: #FFFFFF; }
.val-matrix-table, .val-metrics-table { width: 100%; border-collapse: collapse; font-size: 11px; text-align: left; }
.val-matrix-table th, .val-matrix-table td, .val-metrics-table th, .val-metrics-table td { padding: 7px 10px; border: 1px solid #E2E8F0; }
.val-matrix-table th, .val-metrics-table th { background: #F1F5F9; color: #334155; font-weight: 700; white-space: nowrap; }
.val-matrix-table th small, .val-metrics-table th small { display: block; font-weight: 400; color: #64748B; font-size: 9px; }
.val-row-header, .val-corner-header { background: #F8FAFC !important; color: #1E293B !important; }
.val-cell-diag { background: #ECFDF5; color: #047857; font-weight: 700; text-align: right; }
.val-cell-off { background: #FFFFFF; color: #334155; text-align: right; }
.val-cell-zero { background: #FAFAFA; color: #94A3B8; text-align: right; }
.val-cell-total { background: #F8FAFC; color: #1E293B; font-weight: 600; text-align: right; }
.val-cell-grand-total { background: #EFF6FF; color: #1D4ED8; font-weight: 700; text-align: right; }
.val-class-name { color: #1E293B; font-weight: 600; }
.val-metric-cell { display: flex; align-items: center; gap: 8px; }
.val-metric-value { min-width: 48px; font-weight: 600; font-size: 10.5px; color: #1E293B; }
.val-progress-bg { flex: 1; height: 6px; background: #E2E8F0; border-radius: 3px; overflow: hidden; min-width: 50px; }
.val-progress-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; }
.val-progress-fill.green { background: #10B981; }
.val-progress-fill.blue { background: #3B82F6; }
.val-progress-fill.amber { background: #F59E0B; }
.val-class-badge { display: inline-block; padding: 2px 6px; border-radius: 4px; background: #E2E8F0; color: #1E293B; font-size: 10px; font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin-right: 6px; }
.val-th-sub { display: block; font-weight: 400; color: #64748B; font-size: 9px; margin-top: 2px; }
.val-empty-text { font-size: 10.5px; color: #94A3B8; font-style: italic; margin: 4px 0; }



.result-manager-row { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(260px, 1.2fr) minmax(190px, auto); align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid #E2E8F0; }
.result-manager-row:last-child { border-bottom: 0; }
.result-manager-row strong, .result-manager-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-manager-row strong { color: #1E293B; font-size: 12px; }
.result-manager-row small { margin-top: 3px; color: #64748B; font-size: 10.5px; }
.artifact-chip-list { display: flex; flex-wrap: wrap; gap: 5px; }
.artifact-chip-list span { padding: 4px 6px; border-radius: 4px; color: #1D4ED8; background: #EFF6FF; font-size: 9.5px; font-weight: 650; }
.artifact-chip-list em { color: #94A3B8; font-size: 10px; }
.result-validation-stack { display: grid; gap: 8px; justify-items: end; }
.result-validation-stack > div { display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-width: 0; }
.result-validation-stack small { margin: 0; color: #94A3B8; font-size: 9.5px; font-weight: 750; text-transform: uppercase; }
.result-validation-stack .operation-status { flex: 0 0 auto; }
.result-validation-stack div > small:last-child { max-width: 150px; text-align: right; text-transform: none; font-weight: 650; }

.admin-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 15px; }
.admin-stat-grid span { padding: 14px; border: 1px solid #DBEAFE; border-radius: 9px; background: #F8FBFF; }
.admin-stat-grid small, .admin-stat-grid strong { display: block; }
.admin-stat-grid small { color: #64748B; font-size: 10px; }
.admin-stat-grid strong { margin-top: 4px; color: #1D4ED8; font-size: 17px; }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.admin-grid h3 { margin: 0 0 10px; color: #1E293B; font-size: 13px; }
.admin-grid > .operations-card > span { color: #94A3B8; font-size: 11px; }
.admin-row { padding: 8px 0; border-top: 1px solid #F1F5F9; }
.admin-row strong, .admin-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-row strong { color: #334155; font-size: 11px; }.admin-row small { margin-top: 2px; color: #64748B; font-size: 10px; }
.admin-table-actions { display: flex; gap: 6px; flex-wrap: wrap; }

@media (max-width: 1000px) { .map-viewer-content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.validation-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .map-viewer-content-grid, .admin-grid { grid-template-columns: 1fr; }.validation-metrics, .admin-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.result-manager-row { grid-template-columns: 1fr; gap: 8px; }.simulation-row-meta .btn { margin-left: 0; }.simulation-row-head { flex-direction: column; }.operation-status { align-self: flex-start; }.queue-simulation-footer { flex-direction: column-reverse; align-items: stretch; }.queue-simulation-footer .btn, .queue-simulation-footer .btn-primary { width: 100%; min-width: 0; } }

/* Dataset Manager */
.dataset-upload-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 17px 19px;
    border: 1px solid #BFDBFE;
    border-radius: 12px;
    background: linear-gradient(110deg, #EFF6FF, #FFFFFF 55%);
}

.dataset-upload-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 10px;
    color: #1D4ED8;
    background: #DBEAFE;
    font-size: 17px;
}

.dataset-upload-copy h3, .dataset-manager-toolbar h3 { margin: 0; color: #0F172A; font-size: 14px; }
.dataset-upload-copy p, .dataset-manager-toolbar p { margin: 4px 0 0; color: #64748B; font-size: 11.5px; line-height: 1.45; }

.dataset-page-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.dataset-upload-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dataset-upload-controls .form-control { min-width: 155px; height: 36px; font-size: 11.5px; }

.dataset-manager-card {
    overflow: hidden;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #FFFFFF;
}

.dataset-manager-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 17px 19px;
    border-bottom: 1px solid #E2E8F0;
}

.dataset-manager-list { min-height: 90px; }

.dataset-manager-row {
    display: grid;
    grid-template-columns: 38px minmax(180px, 1.35fr) minmax(140px, .75fr) minmax(170px, .85fr) auto;
    align-items: center;
    gap: 13px;
    padding: 13px 19px;
    border-bottom: 1px solid #F1F5F9;
}

.dataset-manager-row:last-child { border-bottom: 0; }

.dataset-format-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    font-size: 14px;
}

.dataset-format-icon.raster { color: #047857; background: #D1FAE5; }
.dataset-format-icon.vector { color: #7C3AED; background: #EDE9FE; }

.dataset-manager-name { min-width: 0; }
.dataset-manager-name strong, .dataset-manager-name span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dataset-manager-name strong { color: #0F172A; font-size: 12.5px; }
.dataset-manager-name span { margin-top: 3px; color: #64748B; font-size: 10.5px; }

.dataset-manager-role label { display: block; margin-bottom: 4px; color: #64748B; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.dataset-manager-role .form-control { height: 32px; padding: 5px 7px; font-size: 11px; }

.dataset-manager-validation { min-width: 0; }
.dataset-manager-validation small { display: block; overflow: hidden; margin-top: 4px; color: #64748B; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.dataset-validation-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 750;
}

.dataset-validation-badge.valid { color: #047857; background: #D1FAE5; }
.dataset-validation-badge.invalid { color: #B91C1C; background: #FEE2E2; }
.dataset-validation-badge.pending { color: #92400E; background: #FEF3C7; }

.dataset-manager-actions { display: flex; align-items: center; gap: 2px; }
.dataset-manager-actions .icon-action-btn { width: 30px; height: 30px; font-size: 11px; }
.dataset-manager-actions .icon-action-btn.danger { color: #DC2626; }
.dataset-manager-actions .icon-action-btn.danger:hover { color: #B91C1C; background: #FEF2F2; }

.dataset-manager-loading, .dataset-manager-error, .dataset-manager-empty {
    display: flex;
    min-height: 105px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #64748B;
    font-size: 12px;
}

.dataset-manager-error { color: #B91C1C; }
.dataset-manager-empty { flex-direction: column; gap: 5px; }
.dataset-manager-empty i { color: #93C5FD; font-size: 22px; }
.dataset-manager-empty strong { color: #334155; }
.dataset-manager-empty span { color: #94A3B8; font-size: 11px; }

.dataset-preview-modal-box {
    width: min(880px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
    overflow: hidden;
}

.dataset-preview-modal-box .modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid #F1F5F9;
    background: #FFFFFF;
}

.dataset-preview-modal-box .modal-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: #0F172A;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dataset-preview-modal-box .modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    background: #F8FAFC;
}

.dataset-delete-modal-box { width: min(510px, calc(100vw - 32px)); }
.dataset-delete-modal-box .modal-header h3 { display: inline-flex; align-items: center; gap: 9px; }
.dataset-delete-intro { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: start; }
.dataset-delete-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 11px; color: #B91C1C; background: #FEE2E2; font-size: 16px; }
.dataset-delete-intro h4 { margin: 2px 0 5px; color: #1E293B; font-size: 15px; }
.dataset-delete-intro p { margin: 0; color: #64748B; font-size: 11.5px; line-height: 1.55; }
.dataset-delete-target { display: grid; gap: 4px; margin-top: 17px; padding: 11px 12px; border: 1px solid #FECACA; border-radius: 8px; background: #FFF7F7; }
.dataset-delete-target span { color: #B91C1C; font-size: 9.5px; font-weight: 750; letter-spacing: .02em; text-transform: uppercase; }
.dataset-delete-target strong { overflow: hidden; color: #7F1D1D; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.dataset-delete-notice { display: flex; align-items: flex-start; gap: 8px; margin-top: 11px; padding: 9px 10px; border-radius: 7px; color: #475569; background: #F8FAFC; font-size: 10.5px; line-height: 1.45; }
.dataset-delete-notice i { margin-top: 1px; color: #2563EB; }
.dataset-delete-modal-box .btn-danger:disabled { cursor: wait; opacity: .65; }

.raster-audit-modal-box {
    width: min(1120px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    display: flex;
    overflow: hidden;
    flex-direction: column;
}

.raster-audit-modal-box .modal-header h3 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.raster-audit-modal-box .modal-body {
    overflow-y: auto;
    padding: 18px 22px;
    background: #F8FAFC;
}

.raster-audit-loading {
    display: flex;
    min-height: 220px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #64748B;
    font-size: 12px;
}

.raster-audit-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 15px 16px;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    background: #FFFFFF;
}

.raster-audit-summary.valid { border-color: #A7F3D0; background: #F0FDF4; }
.raster-audit-summary.pending { border-color: #FDE68A; background: #FFFBEB; }
.raster-audit-summary.invalid { border-color: #FECACA; background: #FFF7F7; }

.raster-audit-summary span {
    display: block;
    color: #64748B;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
}

.raster-audit-summary strong {
    display: block;
    margin-top: 3px;
    color: #0F172A;
    font-size: 16px;
}

.raster-audit-summary p {
    margin: 6px 0 0;
    color: #475569;
    font-size: 11.5px;
}

.raster-audit-summary p span {
    display: inline;
    margin-left: 5px;
    color: #2563EB;
    letter-spacing: 0;
    text-transform: none;
}

.raster-audit-counters {
    display: grid;
    grid-template-columns: repeat(4, minmax(80px, 1fr));
    gap: 8px;
}

.raster-audit-counters span {
    min-width: 80px;
    padding: 8px 10px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
    color: #64748B;
    text-align: center;
    letter-spacing: 0;
    text-transform: none;
}

.raster-audit-counters strong {
    margin: 0 0 2px;
    font-size: 17px;
}

.raster-audit-messages {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.raster-audit-message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 11px;
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.45;
}

.raster-audit-message.error {
    color: #991B1B;
    background: #FEE2E2;
}

.raster-audit-message.warning {
    color: #92400E;
    background: #FEF3C7;
}

.raster-audit-message i { margin-top: 1px; }

.raster-audit-table-wrap {
    overflow-x: auto;
    margin-top: 13px;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    background: #FFFFFF;
}

.raster-audit-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: collapse;
}

.raster-audit-table th,
.raster-audit-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #F1F5F9;
    color: #334155;
    font-size: 11px;
    text-align: left;
    vertical-align: top;
}

.raster-audit-table th {
    color: #64748B;
    background: #F8FAFC;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.raster-audit-table tbody tr:last-child td { border-bottom: 0; }
.raster-audit-table td strong,
.raster-audit-table td span {
    display: block;
}

.raster-audit-table td strong {
    max-width: 210px;
    overflow: hidden;
    color: #0F172A;
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.raster-audit-table td span {
    margin-top: 3px;
    color: #64748B;
    font-size: 10px;
}

.dataset-preview-loading { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #64748B; font-size: 13px; }
.dataset-preview-map {
    height: 360px;
    overflow: hidden;
    border: 1px solid #CBD5E1;
    border-radius: 12px;
    background: #0F172A;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.dataset-vector-preview-notice {
    display: flex;
    min-height: 130px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    padding: 20px;
    border: 1px dashed #CBD5E1;
    border-radius: 12px;
    background: #FFFFFF;
    color: #64748B;
    text-align: center;
    font-size: 12px;
}

.dataset-vector-preview-notice i { color: #2563EB; font-size: 20px; }
.dataset-vector-preview-notice strong { color: #334155; }

.dataset-vector-preview-notice.dataset-vector-preview-inline {
    min-height: auto;
    align-items: flex-start;
    margin-top: 10px;
    padding: 9px 12px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    text-align: left;
}

.dataset-vector-preview-notice.dataset-vector-preview-inline i { font-size: 14px; }
.dataset-vector-preview-notice.dataset-vector-preview-inline span { flex-basis: 100%; margin-left: 22px; }

.meta-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #E2E8F0;
}

.meta-section-header h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #1E293B;
    display: flex;
    align-items: center;
    gap: 7px;
}

.meta-section-header h4 i {
    color: #2563EB;
}

.meta-filename-tag {
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-mono, monospace);
    color: #2563EB;
    background: #EFF6FF;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid #DBEAFE;
}

.meta-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.meta-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 10px 14px;
    transition: all 0.15s ease;
}

.meta-card:hover {
    border-color: #CBD5E1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.meta-card-label {
    font-size: 10px;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.meta-card-label i {
    font-size: 11px;
    color: #94A3B8;
}

.meta-card-value {
    font-size: 12.5px;
    font-weight: 600;
    color: #0F172A;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meta-tech-details {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.meta-tech-row {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.meta-tech-label {
    font-size: 10px;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.meta-code-block {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    color: #334155;
    background: #F1F5F9;
    padding: 6px 10px;
    border-radius: 6px;
    word-break: break-all;
    max-height: 80px;
    overflow-y: auto;
    border: 1px solid #E2E8F0;
}

@media (max-width: 1050px) {
    .dataset-manager-row { grid-template-columns: 38px minmax(180px, 1fr) minmax(140px, .75fr) auto; }
    .dataset-manager-validation { display: none; }
}

@media (max-width: 760px) {
    .dataset-upload-card { grid-template-columns: auto minmax(0, 1fr); }
    .dataset-page-actions { align-items: stretch; flex-direction: column; }
    .dataset-page-actions .btn { width: 100%; }
    .dataset-upload-controls { grid-column: 1 / -1; }
    .dataset-manager-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
    .dataset-manager-role { grid-column: 2 / 4; }
    .dataset-manager-actions { justify-content: flex-end; }
    .dataset-preview-metadata { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .raster-audit-summary { grid-template-columns: 1fr; }
    .raster-audit-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 500px) {
    .dataset-upload-controls { align-items: stretch; flex-direction: column; }
    .dataset-upload-controls .form-control { width: 100%; }
    .dataset-manager-toolbar { align-items: flex-start; flex-direction: column; }
    .dataset-preview-metadata { grid-template-columns: 1fr; }
}

/* Model Configuration */
.model-config-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
}

.model-config-choice-card {
    display: flex;
    min-height: 255px;
    flex-direction: column;
    padding: 20px;
    border: 1px solid #E2E8F0;
    border-top: 3px solid #2563EB;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .03);
}

.model-config-choice-card.green { border-top-color: #059669; }
.model-config-choice-card.purple { border-top-color: #7C3AED; }

.model-config-choice-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 10px;
    color: #1D4ED8;
    background: #DBEAFE;
    font-size: 17px;
}

.model-config-choice-card.green .model-config-choice-icon { color: #047857; background: #D1FAE5; }
.model-config-choice-card.purple .model-config-choice-icon { color: #6D28D9; background: #EDE9FE; }
.model-config-choice-card h3 { margin: 15px 0 6px; color: #0F172A; font-size: 16px; }
.model-config-choice-card p { min-height: 54px; margin: 0; color: #64748B; font-size: 12px; line-height: 1.55; }

.model-config-choice-flow {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 15px 0;
    color: #475569;
    font-size: 10.5px;
    font-weight: 650;
}

.model-config-choice-flow span { padding: 5px 7px; border-radius: 5px; background: #F1F5F9; }
.model-config-choice-flow i { color: #94A3B8; font-size: 9px; }
.model-config-choice-card .btn { margin-top: auto; }

.model-config-saved-card {
    overflow: hidden;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #FFFFFF;
}

.model-config-saved-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 17px 19px;
    border-bottom: 1px solid #E2E8F0;
}

.model-config-saved-header h3 { margin: 0; color: #0F172A; font-size: 14px; }
.model-config-saved-header p { margin: 4px 0 0; color: #64748B; font-size: 11.5px; }

.saved-model-config-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 11px;
    padding: 12px 19px;
    border-bottom: 1px solid #F1F5F9;
}

.saved-model-config-row:last-child { border-bottom: 0; }
.saved-model-config-icon { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 8px; color: #1D4ED8; background: #DBEAFE; font-size: 13px; }
.saved-model-config-row strong, .saved-model-config-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-model-config-row strong { color: #1E293B; font-size: 12px; }
.saved-model-config-row small { margin-top: 3px; color: #64748B; font-size: 10.5px; }
.saved-model-config-type { padding: 5px 8px; border-radius: 999px; color: #1D4ED8; background: #EFF6FF; font-size: 10.5px; font-weight: 750; white-space: nowrap; }
.saved-model-config-actions { display: flex; align-items: center; gap: 4px; }
.saved-model-config-actions .primary { color: #2563EB; }
.saved-model-config-actions .primary:hover { color: #1D4ED8; background: #EFF6FF; }
.saved-model-config-actions .danger { color: #DC2626; }
.saved-model-config-actions .danger:hover { color: #B91C1C; background: #FEF2F2; }

.model-config-empty, .model-config-loading, .model-config-error {
    display: flex;
    min-height: 115px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #64748B;
    font-size: 12px;
}

.model-config-empty { flex-direction: column; gap: 5px; }
.model-config-empty i { color: #93C5FD; font-size: 22px; }
.model-config-empty strong { color: #334155; }
.model-config-empty span { color: #94A3B8; font-size: 11px; }
.model-config-error { color: #B91C1C; }
.model-configuration-modal-box {
    width: min(1040px, calc(100vw - 44px));
    max-width: none;
    max-height: calc(100vh - 36px);
    display: flex;
    flex-direction: column;
}

.model-configuration-modal-box > .modal-header { flex: 0 0 auto; }
.model-configuration-modal-box > form { min-height: 0; display: flex; flex: 1 1 auto; flex-direction: column; }
.model-configuration-modal-box .modal-body { min-height: 0; overflow-y: auto; flex: 1 1 auto; padding: 18px 22px; }
.model-configuration-modal-box .modal-footer { flex: 0 0 auto; padding: 14px 22px; border-top: 1px solid #E2E8F0; background: #FCFDFE; }

.model-configuration-modal-box.is-ca-markov-tabs {
    height: min(92vh, 820px);
}

.model-configuration-modal-box.is-ca-markov-tabs .modal-body {
    display: flex;
    flex-direction: column;
}

.model-configuration-modal-box.is-ca-markov-tabs #modelConfigurationSpecificFields {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.model-configuration-modal-box.is-ca-markov-tabs .model-config-tabs {
    display: grid;
    min-height: 0;
    flex: 1 1 auto;
    grid-template-rows: auto minmax(0, 1fr);
}

.model-configuration-modal-box.is-ca-markov-tabs .model-config-tab-panel.is-active {
    min-height: 0;
    overflow-y: auto;
    padding-right: 3px;
}

.model-configuration-modal-box.is-ca-markov-tabs .model-config-tab-panel > .ca-markov-landscape {
    min-height: min-content;
}

.model-config-type-banner {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 16px;
    padding: 11px 13px;
    border: 1px solid #BFDBFE;
    border-radius: 8px;
    color: #475569;
    background: #EFF6FF;
    font-size: 11.5px;
    line-height: 1.45;
}

.model-config-type-banner strong { color: #1D4ED8; font-size: 13px; }
.model-config-core-row {
    display: grid;
    grid-template-columns: minmax(280px, 1.6fr) minmax(150px, .55fr) minmax(210px, .8fr);
    align-items: end;
    gap: 12px;
}
#modelCoreFieldsHost.is-empty { display: none; }
.model-config-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.model-config-field-hint { display: block; margin: -2px 0 14px; color: #64748B; font-size: 10.5px; line-height: 1.45; }
.model-config-field-hint i { margin-right: 3px; color: #2563EB; }

.model-config-tabs {
    display: grid;
    gap: 14px;
}

.model-config-tab-list {
    display: flex;
    gap: 8px;
    padding: 6px;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    background: #F8FAFC;
}

.model-config-tab-button {
    display: inline-flex;
    min-height: 38px;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #64748B;
    background: transparent;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.model-config-tab-button:hover {
    color: #1D4ED8;
    background: #EFF6FF;
}

.model-config-tab-button.is-active {
    color: #1D4ED8;
    border-color: #BFDBFE;
    background: #FFFFFF;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .08);
}

.model-config-tab-panel { display: none; }
.model-config-tab-panel.is-active { display: block; }

.ca-markov-landscape {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

.ca-markov-single-column { grid-template-columns: minmax(0, 1fr); }
.ca-markov-suitability-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr);
    grid-template-areas:
        "drivers weighting"
        "drivers constraint";
    align-items: start;
}

.ca-suitability-driver-panel { grid-area: drivers; }
.ca-suitability-weighting-panel { grid-area: weighting; }
.ca-suitability-constraint-panel { grid-area: constraint; }
.ca-suitability-weighting-panel,
.ca-suitability-constraint-panel {
    align-self: start;
}

.ca-suitability-constraint-panel .ca-driver-select {
    min-height: 74px;
    max-height: 92px;
}

.ca-config-panel-wide { grid-column: 1 / -1; }

.ca-config-panel {
    display: flex;
    flex-direction: column;
    padding: 15px;
    border: 1px solid #D7E2F1;
    border-radius: 10px;
    background: linear-gradient(135deg, #F8FBFF 0%, #FFFFFF 64%);
}

.ca-config-panel > header {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 13px;
}

.ca-config-panel-icon {
    display: grid;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    place-items: center;
    border-radius: 8px;
    font-size: 12px;
}

.ca-config-panel-icon.blue { color: #1D4ED8; background: #DBEAFE; }
.ca-config-panel-icon.green { color: #047857; background: #D1FAE5; }
.ca-config-panel-icon.amber { color: #B45309; background: #FEF3C7; }
.ca-config-panel-icon.red { color: #B91C1C; background: #FEE2E2; }
.ca-config-panel-icon.purple { color: #6D28D9; background: #EDE9FE; }
.ca-config-panel h4 { margin: 0; color: #1E293B; font-size: 13px; }
.ca-config-panel header p { margin: 3px 0 0; color: #64748B; font-size: 10px; line-height: 1.4; }
.ca-config-panel .form-group { margin-bottom: 0; }
.ca-config-panel-body { display: grid; gap: 10px; }
.ca-baseline-grid { gap: 10px; }
.ca-baseline-grid .form-control { font-size: 11.5px; }
.ca-baseline-grid + .model-config-field-hint { margin: 11px 0 0; }
.ca-cnn-weight-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.ca-cnn-weight-grid .form-control { font-size: 11.5px; }

.class-attribute-edit-field {
    position: relative;
    width: min(360px, 100%);
}

.class-attribute-edit-field .form-control {
    padding: 4px 27px 4px 6px;
    font-size: 12px;
}

.class-attribute-edit-field i {
    position: absolute;
    top: 50%;
    right: 9px;
    color: #94A3B8;
    font-size: 10px;
    pointer-events: none;
    transform: translateY(-50%);
}

.class-attribute-edit-field:focus-within i { color: #2563EB; }

.ca-driver-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: end;
}

.ca-driver-select { min-height: 112px; padding: 7px 9px; font-size: 10.5px; }
.driver-standardization-grid {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.driver-standardization-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .86fr);
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #F8FAFC;
}

.driver-standardization-factor {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.driver-factor-number {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    color: #2563EB;
    background: #DBEAFE;
    font-size: 10px;
    font-weight: 800;
}

.driver-standardization-factor strong {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: #0F172A;
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.driver-standardization-factor small {
    display: block;
    margin-top: 2px;
    color: #64748B;
    font-size: 9.5px;
    font-weight: 700;
}

.driver-standardization-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.driver-standardization-action span {
    min-width: 0;
    overflow: hidden;
    color: #475569;
    font-size: 10.5px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.driver-standardization-action span i { margin-right: 4px; color: #2563EB; }
.driver-standardization-action .btn { flex: 0 0 auto; min-height: 32px; padding: 6px 9px; }

.driver-standardization-control label {
    display: block;
    margin-bottom: 4px;
    color: #475569;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.driver-standardization-control select {
    min-height: 32px;
    padding: 5px 8px;
    font-size: 10.5px;
}

.driver-standardization-control p {
    margin: 5px 0 0;
    color: #64748B;
    font-size: 10px;
    font-weight: 700;
}

.driver-standardization-control p i { margin-right: 4px; color: #2563EB; }
.normalization-modal-backdrop { z-index: 10020; }

.driver-normalization-modal-box {
    width: min(940px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
}

.driver-normalization-modal-box .modal-body {
    overflow-y: auto;
    padding: 18px 22px;
}

.driver-normalization-modal-box .modal-footer {
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-height: 72px;
    padding: 14px 22px 16px;
    border-top: 1px solid #E2E8F0;
    background: #FCFDFE;
}

.driver-normalization-modal-box .modal-footer .btn {
    min-width: 116px;
    height: 42px;
    justify-content: center;
}

.driver-normalization-modal-box .modal-footer .btn-primary {
    min-width: 152px;
}

.normalization-wizard {
    display: grid;
    gap: 14px;
}

.normalization-info-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid #BFDBFE;
    border-radius: 8px;
    background: #EFF6FF;
}

.normalization-info-card h4 {
    margin: 0;
    color: #0F172A;
    font-size: 15px;
}

.normalization-info-card p {
    margin: 4px 0 0;
    color: #64748B;
    font-size: 11px;
    font-weight: 700;
}

.normalization-main-grid {
    display: grid;
    grid-template-columns: minmax(190px, .85fr) minmax(260px, 1.2fr) minmax(180px, .75fr);
    gap: 12px;
}

.normalization-option-panel,
.normalization-preview-panel,
.normalization-control-points {
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #FFFFFF;
}

.normalization-option-panel {
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 13px;
}

.normalization-option-panel h4,
.normalization-control-points h4 {
    margin: 0 0 3px;
    color: #334155;
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}

.normalization-option-panel label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0F172A;
    font-size: 12px;
    font-weight: 700;
}

.normalization-option-panel label.is-disabled {
    opacity: .45;
    cursor: not-allowed;
}

.normalization-option-panel input { accent-color: #2563EB; }

.normalization-preview-panel {
    padding: 10px;
    background: #F8FAFC;
}

.normalization-preview-panel svg {
    display: block;
    width: 100%;
    min-height: 190px;
}

.normalization-control-points {
    padding: 13px;
}

.normalization-control-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.normalization-control-field {
    color: #475569;
    font-size: 11px;
    font-weight: 850;
}

.normalization-control-field.is-hidden { display: none; }

.normalization-control-field strong {
    display: block;
    color: #0F172A;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .03em;
}

.normalization-control-field span {
    display: block;
    min-height: 34px;
    margin-top: 3px;
    color: #64748B;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
}

.normalization-control-grid .form-control {
    margin-top: 6px;
    min-height: 34px;
    font-size: 12px;
}

#normalizationHelpText {
    margin: 9px 0 0;
    color: #64748B;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
}
.compact-markov-driver-hint { min-height: 31px; margin: 10px 0 0; color: #64748B; font-size: 10px; line-height: 1.45; }
.compact-markov-driver-hint i { margin-right: 3px; color: #2563EB; }
.compact-markov-driver-hint b { color: #1E40AF; }
.ca-ahp-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: auto;
    padding: 7px 9px;
    border: 1px solid #BFDBFE;
    border-radius: 6px;
    color: #1D4ED8;
    background: #EFF6FF;
    font-size: 10.5px;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
}

.ca-ahp-link:hover { border-color: #60A5FA; color: #1E40AF; background: #DBEAFE; }

.ca-ahp-link.is-disabled {
    color: #94A3B8;
    border-color: #E2E8F0;
    background: #F1F5F9;
    cursor: not-allowed;
    opacity: .72;
}

.ahp-modal-backdrop { z-index: 10030; }

.ahp-weighting-modal-box {
    width: min(980px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
}

.ahp-embedded-modal-box {
    width: min(96vw, 1540px);
    height: min(92vh, 980px);
    max-height: min(92vh, 980px);
    overflow: hidden;
}

.ahp-weighting-modal-box .modal-body {
    overflow-y: auto;
    padding: 18px 22px;
}

.ahp-weighting-modal-box .ahp-embedded-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

.ahp-embedded-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #F8FAFC;
}

.ahp-weighting-modal-box .modal-footer {
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-height: 72px;
    padding: 14px 22px 16px;
    border-top: 1px solid #E2E8F0;
    background: #FCFDFE;
}

.ahp-weighting-modal-box .modal-footer .btn {
    min-width: 116px;
    height: 42px;
    justify-content: center;
}

.ahp-weighting-modal-box .modal-footer .btn-primary { min-width: 148px; }

.ahp-modal-layout {
    display: grid;
    gap: 14px;
}

.ahp-modal-summary {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px;
    border: 1px solid #BFDBFE;
    border-radius: 8px;
    background: #EFF6FF;
}

.ahp-modal-summary h4 {
    margin: 0;
    color: #0F172A;
    font-size: 14px;
}

.ahp-modal-summary p {
    margin: 4px 0 0;
    color: #64748B;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
}

.ahp-modal-section {
    padding: 14px;
    border: 1px solid #D7E2F1;
    border-radius: 9px;
    background: #FFFFFF;
}

.ahp-modal-section > header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
}

.ahp-modal-section h4 {
    margin: 0;
    color: #1E293B;
    font-size: 13px;
}

.ahp-modal-section header p {
    margin: 3px 0 0;
    color: #64748B;
    font-size: 10.5px;
    line-height: 1.45;
}

.ahp-modal-scope-grid {
    grid-template-columns: minmax(220px, 320px);
    gap: 10px;
    margin-bottom: 10px;
}

.driving-factor-config {
    margin-top: 17px;
    padding: 15px;
    border: 1px solid #BFDBFE;
    border-radius: 10px;
    background: linear-gradient(135deg, #F8FBFF 0%, #FFFFFF 60%);
}

.driving-factor-config header { margin-bottom: 14px; }
.driving-factor-config h4 { margin: 0; color: #1E3A8A; font-size: 13px; }
.driving-factor-config h4 i { margin-right: 5px; color: #2563EB; }
.driving-factor-config header p { margin: 4px 0 0; color: #64748B; font-size: 10.5px; line-height: 1.45; }
.driver-factor-list { display: grid; gap: 7px; margin: 0 0 13px; }
.driver-factor-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 9px; border-radius: 7px; background: #F8FAFC; }
.driver-factor-row > span { overflow: hidden; color: #334155; font-size: 10.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.driver-factor-row > span i { margin-right: 4px; color: #2563EB; }
.driver-factor-row label { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; color: #64748B; font-size: 9.5px; font-weight: 700; }
.driver-factor-row select { width: 188px; min-height: 30px; padding: 4px 7px; font-size: 10px; }
.driver-weight-summary { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px; border-radius: 7px; color: #1E40AF; background: #EFF6FF; font-size: 10.5px; line-height: 1.45; }
.driver-weight-summary i { margin-top: 1px; color: #2563EB; }
.driver-profile-selector { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 9px; margin-top: 12px; }
.driver-profile-selector label,.driver-transition-controls > label { color: #475569; font-size: 10px; font-weight: 750; }
.ahp-matrix-wrap { overflow-x: auto; margin: 8px 0; border: 1px solid #E2E8F0; border-radius: 7px; }
.ahp-matrix { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 10px; }
.ahp-matrix th,.ahp-matrix td { padding: 5px; border-right: 1px solid #E2E8F0; border-bottom: 1px solid #E2E8F0; text-align: center; }
.ahp-matrix th { color: #475569; background: #F8FAFC; font-weight: 750; }
.ahp-matrix tr:last-child th,.ahp-matrix tr:last-child td { border-bottom: 0; }
.ahp-matrix th:last-child,.ahp-matrix td:last-child { border-right: 0; }
.ahp-matrix .form-control { min-width: 62px; min-height: 29px; padding: 3px 5px; font-size: 10px; text-align: center; }
.ahp-factor-key { display: flex; flex-wrap: wrap; gap: 5px 10px; margin: 8px 0 0; color: #64748B; font-size: 9.5px; }
.ahp-factor-key b { color: #1D4ED8; }
.driver-transition-controls { margin: 12px 0; padding: 10px; border-left: 3px solid #60A5FA; border-radius: 0 7px 7px 0; background: #F8FAFC; }
.driver-transition-controls > label { display: block; margin-bottom: 7px; }
.driver-transition-controls > div:first-of-type { display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) auto; align-items: center; gap: 7px; }
.driver-transition-controls > div:first-of-type i { color: #64748B; font-size: 9px; text-align: center; }
#transitionProfileList { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
#transitionProfileList span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 4px; color: #1E40AF; background: #DBEAFE; font-size: 9.5px; font-weight: 650; }
#transitionProfileList button { padding: 0; border: 0; color: #1D4ED8; background: transparent; font-size: 14px; line-height: 10px; cursor: pointer; }
#transitionProfileList small { color: #94A3B8; font-size: 9.5px; }

@media (max-width: 900px) { .model-config-choice-grid { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
    .model-configuration-modal-box { width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
    .ca-markov-landscape { grid-template-columns: 1fr; }
    .ca-markov-suitability-grid {
        grid-template-areas:
            "drivers"
            "weighting"
            "constraint";
    }
}
@media (max-width: 620px) {
    .model-config-core-row { grid-template-columns: 1fr; }
    .model-config-form-grid { grid-template-columns: 1fr; }
    .model-configuration-modal-box .modal-body { padding: 16px; }
    .model-configuration-modal-box .modal-footer { padding: 12px 16px; }
    .ca-driver-controls { grid-template-columns: 1fr; }
    .driver-standardization-card { grid-template-columns: 1fr; }
    .driver-standardization-action { align-items: stretch; flex-direction: column; }
    .driver-standardization-action .btn { width: 100%; justify-content: center; }
    .normalization-main-grid { grid-template-columns: 1fr; }
    .normalization-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .driver-normalization-modal-box .modal-footer {
        align-items: stretch;
        flex-direction: column-reverse;
        padding: 12px 16px 14px;
    }
    .driver-normalization-modal-box .modal-footer .btn,
    .driver-normalization-modal-box .modal-footer .btn-primary {
        width: 100%;
        min-width: 0;
    }
    .saved-model-config-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
    .saved-model-config-type { display: none; }
    .driver-factor-row { align-items: flex-start; flex-direction: column; }
    .driver-factor-row label { width: 100%; justify-content: space-between; }
    .driver-factor-row select { width: 70%; }
    .driver-profile-selector { grid-template-columns: 1fr; }
    .driver-transition-controls > div:first-of-type { grid-template-columns: 1fr 12px 1fr; }
    .driver-transition-controls > div:first-of-type .btn { grid-column: 1 / -1; }
}

/* Markov baseline selector: compact paired input cards instead of a long
   stack of full-width controls. */
.markov-input-card {
    max-width: 1180px;
    padding: 0;
    overflow: hidden;
}

.markov-card-intro {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 20px 22px 17px;
    border-bottom: 1px solid #E2E8F0;
    background: linear-gradient(105deg, #F8FBFF 0%, #FFFFFF 70%);
}

.markov-card-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #2563EB;
    background: #DBEAFE;
    font-size: 16px;
}

.markov-card-intro h3 {
    margin: 0;
    color: #0F172A;
    font-size: 15px;
    font-weight: 750;
}

.markov-card-intro p {
    margin: 3px 0 0;
    color: #64748B;
    font-size: 12px;
}

.markov-config-form {
    padding: 20px 22px 22px;
}

.markov-raster-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.markov-raster-field {
    min-width: 0;
    padding: 15px;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    background: #FFFFFF;
}

.markov-raster-t1 {
    border-top: 3px solid #2563EB;
}

.markov-raster-t2 {
    border-top: 3px solid #0F9F6E;
}

.markov-field-heading {
    display: flex;
    align-items: center;
    min-height: 28px;
    margin-bottom: 10px;
}

.markov-field-heading label {
    color: #0F172A;
    font-size: 13px;
    font-weight: 700;
}

.markov-field-heading small {
    display: block;
    margin-top: 2px;
    color: #94A3B8;
    font-size: 11px;
}

.markov-time-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 20px;
    margin-right: 7px;
    border-radius: 5px;
    background: #DBEAFE;
    color: #1D4ED8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .03em;
    vertical-align: 1px;
}

.markov-raster-t2 .markov-time-badge {
    color: #047857;
    background: #D1FAE5;
}

.markov-selection-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.markov-selection-row .form-control {
    min-width: 0;
    height: 38px;
    flex: 1 1 auto;
    font-size: 12px;
    text-overflow: ellipsis;
}

.markov-folder-button {
    min-width: 92px;
    height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #BFDBFE;
    border-radius: 7px;
    color: #1D4ED8;
    background: #EFF6FF;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}

.markov-folder-button:hover {
    background: #DBEAFE;
    border-color: #60A5FA;
}

.markov-dataset-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 15px 0 0;
    color: #475569;
    font-size: 12px;
}

.markov-dataset-hint > i {
    color: #2563EB;
}

.markov-dataset-warning,
.markov-dataset-warning > i {
    color: #B45309;
}

.markov-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #F1F5F9;
}

.markov-form-actions .btn {
    min-height: 38px;
    padding: 0 16px;
    font-size: 12.5px;
}

.markov-export-actions {
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid #BBF7D0;
    border-radius: 8px;
    background: #F0FDF4;
    color: #166534;
    font-size: 12px;
}

.markov-export-actions > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.markov-export-actions > span > i {
    margin-right: 5px;
    color: #16A34A;
}

.markov-export-actions .btn {
    flex: 0 0 auto;
    color: #166534;
    border-color: #86EFAC;
    background: #FFFFFF;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .markov-raster-grid {
        grid-template-columns: 1fr;
    }

    .markov-card-intro,
    .markov-config-form {
        padding-left: 16px;
        padding-right: 16px;
    }

    .markov-export-actions {
        align-items: flex-start;
        flex-direction: column;
    }
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table th, .data-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.data-table th {
    background-color: #F8FAFC;
    font-weight: 600;
    color: var(--text-muted);
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.model-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.model-card {
    background-color: white;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.model-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

/* ==========================================================================
   INSET MAP & SCALE BAR STYLES FOR MAP VIEWER
   ========================================================================== */

/* Leaflet Scale Bar Position & Styling */
.leaflet-bottom.leaflet-left {
    bottom: 28px !important;
    left: 60px !important;
    z-index: 920 !important;
}

.leaflet-control-scale-line {
    border: 2px solid #0F172A !important;
    border-top: none !important;
    background: rgba(255, 255, 255, 0.9) !important;
    color: #0F172A !important;
    font-weight: 700 !important;
    font-size: 10px !important;
    padding: 2px 6px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
    border-radius: 0 0 3px 3px !important;
}

/* Inset Map Container */
.webgis-inset-container {
    position: absolute;
    bottom: 34px;
    right: 14px;
    z-index: 940;
    width: 190px;
    height: 150px;
    background: #FFFFFF;
    border: 2px solid #0F172A;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
    overflow: hidden;
    transition: all 0.25s ease;
}

.webgis-inset-container.minimized {
    height: 24px !important;
}

.webgis-inset-header {
    background: #0F172A;
    color: #FFFFFF;
    padding: 4px 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    height: 24px;
}

.webgis-inset-header .inset-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #38BDF8;
}

.webgis-inset-toggle-btn {
    background: none;
    border: none;
    color: #94A3B8;
    cursor: pointer;
    font-size: 12px;
    padding: 0 2px;
    line-height: 1;
}

.webgis-inset-toggle-btn:hover {
    color: #FFFFFF;
}

.webgis-inset-canvas {
    width: 100%;
    height: calc(100% - 24px);
    background: #E2E8F0;
}

/* CA-RF 4-Step Guided Wizard & Live Sidebar Architecture */
.ca-rf-wizard-container {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 20px;
    align-items: start;
    min-height: 480px;
}

@media (max-width: 992px) {
    .ca-rf-wizard-container {
        grid-template-columns: 1fr;
    }
}

.model-config-wizard-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    padding: 8px 14px;
    border-radius: 10px;
    margin-bottom: 18px;
}

.wizard-step-btn {
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #64748B;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wizard-step-btn:hover {
    color: #0F172A;
    background: #E2E8F0;
}

.wizard-step-btn.is-active {
    background: #2563EB;
    color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
}

.wizard-step-btn .step-num {
    font-size: 14px;
    font-weight: 700;
}

.wizard-step-line {
    flex: 1;
    height: 2px;
    background: #CBD5E1;
    margin: 0 6px;
}

.wizard-step-panel {
    display: none;
}

.wizard-step-panel.is-active {
    display: block;
}

.ca-rf-sidebar-summary {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 16px;
    font-size: 12px;
    height: fit-content;
    position: sticky;
    top: 0;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
}