/* ==========================================================================
   1. Global Styles & CSS Variables
   ========================================================================== */
@import url('css/ide.css');

/* Import the Open Iconic font */


/* ===== IDE THEME EXTENSION TOKENS ===== */




.ide-app {
    font-family: var(--font-ui);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--dark-color);
    background: var(--light-color);
    height: 100vh;
}

/* ======================================================================
   CONTENT
   ====================================================================== */

.content {
    padding-top: 1.1rem;
    min-height: calc(100vh - 120px);
}

:root {
    /* Bootstrap professional system stack */
    --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
html, body, .ide-app {
    font-family: var(--font-ui);
    font-size: 13.5px;
    line-height: 1.45;
}

/* ======================================================================
   TYPOGRAPHY
   ====================================================================== */

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5rem 0;
    font-weight: 700;
    line-height: 1.2;
    color: var(--tx);
}

p {
    margin: 0 0 1rem 0;
    color: var(--tx);
}

a {
    color: var(--acc);
    text-decoration: none;
    transition: var(--transition-base);
}

    a:hover {
        text-decoration: underline;
    }

/* ======================================================================
   BUTTONS
   ====================================================================== */

.btn {
    display: inline-block;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    background: var(--bg1);
    border: 1px solid var(--bd);
    color: var(--tx);
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    transition: var(--transition-base);
}

    .btn:hover {
        border-color: var(--acc);
    }

.btn-primary {
    background: var(--acc);
    color: white;
    border-color: var(--acc);
}

.btn-secondary {
    background: var(--bg2);
}

.btn-success {
    background: var(--success-color);
    color: white;
}

.btn-danger {
    background: var(--danger-color);
    color: white;
}

.btn-warning {
    background: var(--warning-color);
    color: black;
}

.btn-info {
    background: var(--info-color);
    color: white;
}

/* ======================================================================
   FORMS
   ====================================================================== */
/* ============================= */
/* INPUT BASE */
/* ============================= */

.form-control {
    width: 100%;
    padding: 0.6rem 0.85rem;
    color: var(--tx);
    background: var(--bg1);
    border: 1px solid var(--bd);
    border-radius: 0; /* flat */
    font-size: 14px;
    outline: none;
    transition: border 0.2s ease, background 0.2s ease;
}

    /* Focus */
    .form-control:focus {
        border-color: var(--acc);
        background: var(--bg2);
    }

    /* ============================= */
    /* PLACEHOLDER (IMPORTANT FIX) */
    /* ============================= */

    .form-control::placeholder {
        color: var(--mut);
        opacity: 1; /* ensures visibility in dark mode */
    }

    /* Firefox fix */
    .form-control::-moz-placeholder {
        color: var(--mut);
        opacity: 1;
    }

    /* Edge/IE legacy (safe fallback) */
    .form-control:-ms-input-placeholder {
        color: var(--mut);
    }

    /* ============================= */
    /* DISABLED */
    /* ============================= */

    .form-control:disabled {
        background: var(--bg0);
        opacity: 0.7;
        cursor: not-allowed;
    }

/* ============================= */
/* VALIDATION */
/* ============================= */

.validation-message {
    color: var(--danger);
    font-size: 0.85em;
    margin-top: 4px;
}


/* ======================================================================
   CARDS
   ====================================================================== */

.card {
    display: flex;
    flex-direction: column;
    background: var(--bg1);
    border: 1px solid var(--bd);
    border-radius: var(--card-radius);
    color: var(--tx);
    margin-bottom: 1.2rem;
}

.card-header {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--bd);
    background: var(--bg2);
}

.card-body {
    padding: 1rem;
}

/* ======================================================================
   ALERTS
   ====================================================================== */

.alert {
    padding: 0.75rem 1.25rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--bd);
}

.alert-success {
    background: rgba(46,204,113,0.15);
    color: var(--success-color);
}

.alert-danger {
    background: rgba(255,107,107,0.15);
    color: var(--danger-color);
}

.alert-warning {
    background: rgba(241,196,15,0.15);
    color: var(--warning-color);
}

.alert-info {
    background: rgba(23,162,184,0.15);
    color: var(--info-color);
}

/* ======================================================================
   TABLES
   ====================================================================== */

.table {
    width: 100%;
    color: var(--tx);
}

    .table th,
    .table td {
        padding: 0.6rem;
        border-bottom: 1px solid var(--bd);
    }

.table-striped tbody tr:nth-child(odd) {
    background: var(--bg2);
}

/* ======================================================================
   FEATURE CARDS (already perfect)
   ====================================================================== */

.feature-card-ocean {
    background: linear-gradient(145deg, var(--card-bg-start), var(--card-bg-end));
    border-radius: var(--card-radius);
    border: 1px solid var(--bd);
    color: var(--card-text);
    padding: 2rem;
}

/* ======================================================================
   AVATAR / CHAT
   ====================================================================== */

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--acc);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.message-bubble.sent {
    background: var(--acc);
    color: white;
}

.message-bubble.received {
    background: var(--bg2);
    color: var(--tx);
}

/* ======================================================================
   TREE VIEW
   ====================================================================== */

.tree-node {
    display: flex;
    align-items: center;
    min-height: 28px;
    cursor: pointer;
    border-bottom: 1px solid var(--bd);
}

    .tree-node:hover {
        background: var(--bg2);
    }

    .tree-node.active {
        background: var(--acc);
        color: white;
    }

.tree-node-text {
    color: var(--tx);
}

.tree-node-children {
    margin-left: 18px;
    padding-left: 10px;
    border-left: 1px dotted var(--bd);
}

/* ======================================================================
   WORKSPACE
   ====================================================================== */

.workspace-header {
    background: var(--bg1);
}

.workspace-map {
    background: var(--bg0);
}

.workspace-panel {
    background: var(--bg1);
    border-left: 1px solid var(--bd);
}

/* ======================================================================
   SIDEBAR / NAV
   ====================================================================== */

.sidebar {
    background: var(--bg2);
    color: var(--tx);
    border-right: 1px solid var(--bd);
}

    .sidebar .nav-link {
        color: var(--tx);
    }

        .sidebar .nav-link.active {
            background: var(--acc);
            color: white;
        }

/* ======================================================================
   IDE PANELS
   ====================================================================== */

.ide-center {
    background: var(--bg0);
}

.ide-right {
    background: var(--bg1);
    border-left: 1px solid var(--bd);
}

.panel-header {
    background: var(--bg2);
    border-bottom: 1px solid var(--bd);
    color: var(--tx);
}

.results-tabs {
    background: var(--bg1);
    border-bottom: 1px solid var(--bd);
}

    .results-tabs .tab.active {
        border-bottom: 2px solid var(--acc);
    }

/* ======================================================================
   CANVAS / MAP
   ====================================================================== */

.node-dot {
    border: 1px solid var(--bd);
}

.node-hover .node-shape {
    box-shadow: 0 0 12px var(--acc);
}


/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-ui);
    font-weight: 600;
    letter-spacing: .01em;
}

/* Small UI labels */
.nav-title,
.panel-title,
.section-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Normal UI text */
.ide-app {
    font-size: 15px;
}

/* Inputs */
input, select, textarea, button {
    font-family: var(--font-ui);
    font-size: 15px;
}

/* ===== ROOT WORKSPACE ===== */
.model-workspace {
    height: 90vh;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===== HEADER ===== */
.workspace-header {
    height: 42px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: 0 0px;
    background: var(--bg1);
    border-bottom: 1px solid var(--bd);
}

.workspace-project {
    display: flex;
    gap: 0px;
    align-items: end;
    font-size: 15px;
    
}

.project-name {
    font-weight: 600;
}

.project-mode {
    color: var(--mut);
}

/* ===== TABS ===== */
.workspace-tabs {
    display: flex;
    align-items: stretch;
}

.ws-tab {
    display: block;
    height: 100%;
    box-sizing: border-box;
    background: var(--bg2);
    border-top: 1px solid var(--bg3);
    border-right: 1px solid var(--bg3);
    border-bottom: none;
    border-left: none;
    margin-left: -1px; /* collapse borders */
    padding: 6px 12px;
    font-size: 15px;
    color: var(--mut);
    cursor: pointer;
}

    /* restore left border for first tab */
    .ws-tab:first-child {
        border-left: 1px solid var(--bg3);
        margin-left: 0;
    }

    .ws-tab:hover {
        color: var(--tx);
        background: color-mix(in srgb, var(--bg2), var(--acc) 12%);
    }

    .ws-tab.active {
        background: var(--bg1);
        color: var(--tx);
        border-bottom: 1px solid var(--bg1);
        font-weight: bold;
        z-index: 2;
    }

    .ws-tab.run {
        color: var(--acc);
        font-weight: 600;
    }


/* ===== BODY ===== */
.workspace-body {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

/* ===== MAP ===== */
.workspace-map {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.wgs-host {
    position: absolute;
    inset: 0;
}

/* ===== RESULTS ===== */
.workspace-results {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.results-tabs {
    display: flex;
    gap: 0px;
    border-bottom: 1px solid var(--bg3);
}

.rt-tab {
    background: var(--bg2);
    border: 1px solid var(--bg3);
    border-bottom: none;
    padding: 6px 14px;
    font-size: 15px;
    color: var(--mut);
    cursor: pointer;
    position: relative;
    top: 1px;
}

    .rt-tab.active {
        background: var(--bg1);
        color: var(--tx);
        border-bottom: 1px solid var(--bg1);
        font-weight: bold;
    }

.results-content {
    flex: 1;
    overflow: auto;
    padding: 10px;
}

/* ===== WELCOME ===== */
.center-screen {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.welcome-box {
    text-align: center;
    color: var(--mut);
}
/* ===== WORKSPACE TABS (TOP HEADER) ===== */


/* ===== RESULTS TABS ===== */
.results-tabs {
    display: flex;
    align-items: flex-end;
    gap: 0px;
    border-bottom: 1px solid var(--bg3);
}

/* tab */
.rt-tab {
    background: var(--bg2);
    border: 1px solid var(--bg3);
    border-bottom: none;
    border-radius: 0px 0px 0 0;
    padding: 6px 12px;
    font-size: 15px;
    color: var(--mut);
    cursor: pointer;
    position: relative;
    top: 1px;
}

    /* hover */
    .rt-tab:hover {
        color: var(--tx);
        background: color-mix(in srgb, var(--bg2), var(--acc) 12%);
    }

    /* active */
    .rt-tab.active {
        background: var(--bg1);
        color: var(--tx);
        border-bottom: 1px solid var(--bg1);
        z-index: 2;
    }



/* =====================================================
   GLOBAL THEME TABLE
   ===================================================== */

.table-theme {
    width: 100%;

    font-size: 13px;
    color: var(--tx);
    background: var(--bg1);
}

    /* HEADER */
    .table-theme thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--bg2);
        color: var(--tx);
        font-weight: 600;
        padding: 8px 10px;
        border-bottom: 1px solid var(--bd);
        border-right: 1px solid var(--bd);
        white-space: nowrap;
        text-align: left;
    }

    /* BODY CELLS */
    .table-theme td {
        padding: 7px 10px;
        border-bottom: 1px solid var(--bd);
        border-right: 1px solid var(--bd);
        white-space: nowrap;
    }

        /* LAST COLUMN CLEAN */
        .table-theme th:last-child,
        .table-theme td:last-child {
            border-right: none;
        }

    /* ROW HOVER */
    .table-theme tbody tr:hover {
        background: color-mix(in srgb, var(--bg2), var(--acc) 8%);
    }

    /* STRIPED (OPTIONAL) */
    .table-theme.striped tbody tr:nth-child(even) {
        background: color-mix(in srgb, var(--bg1), var(--bg2) 50%);
    }

    /* ACTIVE / SELECTED ROW */
    .table-theme tbody tr.active {
        background: color-mix(in srgb, var(--acc), var(--bg1) 80%);
        font-weight: 600;
    }

    /* NUMERIC CELLS */
    .table-theme .num {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    /* MUTED CELLS */
    .table-theme .muted {
        color: var(--mut);
    }


/* TABLE CONTAINER */
.table-wrap {
    height: 100%;
    max-height: 100%;
    overflow: auto;
    border: 1px solid var(--bd);
    background: var(--bg1);
}


.context-menu {
    animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wms-map-container {
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
}

.wms-map-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.8rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

.toolbar-left,
.toolbar-center,
.toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.wms-map-wrapper {
    flex: 1;
    position: relative;
}

#leaflet-map {
    width: 100%;
    height: 100%;
}


/* ==========================
   LOGIN PAGE (THEME AWARE)
========================== */

.login-page {
    max-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg0);
}

.login-wrapper {
    width: 100%;
    max-width: 420px;
    padding: 24px;
}

.login-card {
    background: var(--bg1);
    border: 1px solid var(--bd);
    padding: 28px;
}

/* Header */

.login-header {
    text-align: center;
    margin-bottom: 24px;
}

.login-logo {
    width: 90px;
    margin-bottom: 12px;
}

.login-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--tx);
}

.login-subtitle {
    font-size: 13px;
    color: var(--mut);
    margin-top: 4px;
}

/* Alert */

.login-alert {
    background: color-mix(in srgb, var(--danger) 12%, var(--bg2));
    border: 1px solid var(--danger);
    color: var(--tx);
    padding: 8px 10px;
    font-size: 12px;
    margin-bottom: 14px;
}

/* Fields */

.login-field {
    margin-bottom: 14px;
}

.login-input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--bd);
    background: var(--bg2);
    color: var(--tx);
    font-size: 13px;
    outline: none;
    transition: .15s ease;
}

    .login-input:focus {
        border-color: var(--acc);
        box-shadow: 0 0 0 2px var(--focus-ring);
    }

.login-input-warning {
    border-color: var(--danger);
}

/* Buttons */

.login-btn {
    width: 100%;
    padding: 10px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    margin-top: 8px;
    cursor: pointer;
    transition: .15s ease;
}

/* Primary */

.login-btn-primary {
    background: var(--acc);
    color: white;
}

    .login-btn-primary:hover {
        opacity: .9;
    }

/* Warning */

.login-btn-warning {
    background: var(--danger);
    color: white;
}

/* Footer */

.login-footer {
    margin-top: 14px;
    text-align: center;
}

.login-link {
    background: none;
    border: none;
    color: var(--mut);
    font-size: 12px;
    cursor: pointer;
}

    .login-link:hover {
        color: var(--tx);
    }

/* Spinner */

.login-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.4);
    border-top: 2px solid white;
    border-radius: 50%;
    margin-right: 6px;
    animation: spin 1s linear infinite;
}

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



.btn-drop-svg {
    position: relative;
    width: 75px; /* Fixed width */
    height: 75px; /* Fixed height */
    background: transparent; /* Background is now the SVG path */
    border: none;
    padding: 0;
    margin: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none !important;
    /* Prevent flex-stretch */
    flex: 0 0 60px;
}

/* The Teardrop Shape */
.drop-shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: var(--acc); /* Uses your theme accent color */
    transition: fill 0.3s, transform 0.2s, filter 0.2s;
    /* Ensure the point faces exactly UP */
    transform-origin: center center;
}

/* Text/Spinner Container */
.drop-overlay {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-top: 10px; /* Push text down slightly into the fat part of the drop */
}

.drop-label {
    color: white;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
}

/* HOVER & ACTIVE */
.btn-drop-svg:hover:not(:disabled) .drop-shape {
    filter: brightness(1.1);
    transform: scale(1.05);
}

.btn-drop-svg:active:not(:disabled) .drop-shape {
    transform: scale(0.95);
}

/* LOADING STATE */
.btn-drop-svg.is-loading .drop-shape {
    fill: var(--mut); /* Muted color while loading */
    animation: drop-pulse-svg 1.5s infinite ease-in-out;
}

@keyframes drop-pulse-svg {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }

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

/* Force button to NOT be stretched by parent flex/grid */
.btn-drop-svg:disabled {
    cursor: not-allowed;
}