/*
 * HelloGeo Processing Hub — UI design layer.
 *
 * Loaded last (after bootstrap, sb-admin-2 and the DB-generated theme.css) so it
 * wins without needing !important everywhere. Structure, spacing, radii, shadows
 * and typography live here; per-instance colors still come from the Theme model.
 */

:root {
    --hg-shell: #101d24;          /* dark app chrome */
    --hg-shell-2: #16282f;        /* raised chrome (hover, active) */
    --hg-shell-line: #22383f;
    --hg-shell-ink: #e7f0f2;
    --hg-shell-muted: #93a9b0;

    --hg-canvas: #f4f7f8;         /* page background behind cards */
    --hg-surface: #ffffff;
    --hg-ink: #16232b;
    --hg-muted: #64798a;
    --hg-line: #e3eaee;

    --hg-accent: #0f766e;
    --hg-accent-soft: #e6f4f2;
    --hg-accent-ink: #0b5a54;

    --hg-r-sm: 8px;
    --hg-r: 12px;
    --hg-r-lg: 16px;

    --hg-shadow: 0 1px 2px rgba(16, 29, 36, .06), 0 8px 24px rgba(16, 29, 36, .06);
    --hg-shadow-lg: 0 12px 40px rgba(16, 29, 36, .16);

    --hg-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------- base ---- */

body {
    font-family: var(--hg-font);
    background: var(--hg-canvas);
    color: var(--hg-ink);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.006em;
}

h1, h2, h3, h4, h5 { font-weight: 650; letter-spacing: -0.02em; }
.content h3 { font-size: 21px; }

a { color: var(--hg-accent); }
a:hover, a:focus { color: var(--hg-accent-ink); }

::selection { background: var(--hg-accent-soft); }

/* Thin, unobtrusive scrollbars throughout the app */
* { scrollbar-width: thin; scrollbar-color: #c3d0d6 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
    background: #c3d0d6;
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #a9bac2; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* --------------------------------------------------------------- shell ---- */
/* A persistent icon rail on the far left, no top navbar at all — the opposite
   of WebODM's 50px topbar + wide text sidebar. The rail expands into a full
   drawer with labels only on narrow (mobile) viewports. */

:root { --hg-rail-w: 72px; --hg-topbar-h: 52px; }

#hg-shell { display: flex; min-height: 100vh; align-items: stretch; }

.hg-rail-check { position: absolute; opacity: 0; pointer-events: none; }

#hg-rail {
    width: var(--hg-rail-w);
    flex: 0 0 var(--hg-rail-w);
    background: var(--hg-shell);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 1000;
    padding: 12px 0;
}

#hg-rail-brand {
    display: block;
    margin-bottom: 14px;
}
#hg-rail-brand img {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: block;
}

/* overflow MUST stay `visible` on both axes. The flyout submenus (Processing
   Nodes, Administration, plugin sub-menus) are positioned outside this
   element, at left: calc(100% + 8px) — beyond the 72px rail. Any non-visible
   overflow here clips them out of existence. Note `overflow-x: visible` with
   `overflow-y: auto` does NOT work: per spec the `visible` computes to `auto`,
   making this a scroll container on both axes and hiding every flyout. The
   rail holds only a handful of top-level items (the node list itself lives
   inside the flyout), so it does not need to scroll. */
#hg-rail-nav { flex: 1 1 auto; width: 100%; min-height: 0; overflow: visible; }

#hg-rail-nav ul#side-menu.nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 10px;
    gap: 3px;
}

#hg-rail-nav ul#side-menu.nav > li { width: 100%; position: relative; }
#hg-rail-nav ul#side-menu.nav > li#about-menu { margin-top: auto; }

#hg-rail-nav ul#side-menu.nav > li > a {
    color: var(--hg-shell-muted);
    border-radius: var(--hg-r-sm);
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
#hg-rail-nav ul#side-menu.nav > li > a:hover,
#hg-rail-nav ul#side-menu.nav > li > a:focus {
    background: var(--hg-shell-2);
    color: #fff;
}
#hg-rail-nav ul#side-menu.nav > li.active > a,
#hg-rail-nav ul#side-menu.nav > li > a.active {
    background: var(--hg-accent);
    color: #fff;
}

#hg-rail-nav .hg-icon,
#hg-rail-nav .fa, #hg-rail-nav .fas, #hg-rail-nav .far, #hg-rail-nav .fab {
    width: 21px; height: 21px;
    font-size: 17px;
    line-height: 21px;
    text-align: center;
    flex: none;
}

/* Labels are present for accessibility / the mobile drawer, hidden on the
   icon rail itself; a CSS tooltip built from [title] replaces them. */
.hg-nav-label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
#hg-rail-nav ul#side-menu.nav > li:not(.hg-has-sub) > a[title]:hover::after {
    content: attr(title);
    position: fixed;
    margin-left: calc(var(--hg-rail-w) + 10px);
    background: #0b1519;
    color: #fff;
    padding: 6px 10px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 550;
    white-space: nowrap;
    box-shadow: var(--hg-shadow-lg);
    pointer-events: none;
    z-index: 3000;
}

/* Flyout submenus (Processing Nodes, Administration, plugin sub-menus) */
.hg-flyout {
    position: absolute;
    left: calc(100% + 8px);
    top: -8px;
    min-width: 208px;
    background: var(--hg-shell-2);
    border: 1px solid var(--hg-shell-line);
    border-radius: var(--hg-r);
    box-shadow: var(--hg-shadow-lg);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: opacity .12s ease, transform .12s ease, visibility .12s;
    z-index: 2000;
}
.hg-has-sub:hover .hg-flyout,
.hg-has-sub:focus-within .hg-flyout {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
.hg-flyout-title {
    color: var(--hg-shell-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    padding: 6px 10px 8px;
}

/* Flyout links must beat theme.css's `ul#side-menu.nav a { color: <primary> }`,
   which is a dark slate and would render invisible on this dark panel. That
   selector carries an ID, so class-only selectors lose to it no matter what
   the source order is — hence the !important here. Don't drop it. */
.hg-flyout .nav-second-level a,
#hg-rail .hg-flyout .nav-second-level a {
    color: var(--hg-shell-ink) !important;
    border-radius: var(--hg-r-sm);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    font-weight: 500;
}
.hg-flyout .nav-second-level a:hover,
#hg-rail .hg-flyout .nav-second-level a:hover {
    background: var(--hg-shell);
    color: #fff !important;
}
/* Node name spans etc. inherit from the anchor, except the offline-node
   warning color, which stays meaningful. */
.hg-flyout .nav-second-level a > span:not([class*="theme-color"]) { color: inherit; }
.hg-flyout .nav-second-level .hg-icon,
.hg-flyout .nav-second-level .fa { width: 16px; text-align: center; flex: none; opacity: .9; }

/* Main column */
#hg-main {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: var(--hg-rail-w);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#hg-topbar {
    height: var(--hg-topbar-h);
    flex: 0 0 var(--hg-topbar-h);
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: var(--hg-surface);
    border-bottom: 1px solid var(--hg-line);
    position: sticky;
    top: 0;
    z-index: 900;
}
#hg-topbar-title {
    font-weight: 650;
    font-size: 15px;
    color: var(--hg-ink);
}
#hg-topbar-right { margin-left: auto; display: flex; align-items: center; }

/* Mobile nav toggle: a single clean line-icon in a subtle square button.
   (Was three <span> bars, which picked up borders/halos from inherited
   bootstrap + theme rules and rendered badly.) */
#hg-rail-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    margin-right: 10px;
    border-radius: var(--hg-r-sm);
    color: var(--hg-ink);
    cursor: pointer;
    background: transparent;
    border: none;
    box-shadow: none;
    transition: background-color .12s ease, color .12s ease;
}
#hg-rail-toggle:hover { background: var(--hg-canvas); color: var(--hg-accent); }
#hg-rail-toggle .hg-icon {
    width: 21px; height: 21px;
    display: block;
    /* Neutralize any inherited chrome from bootstrap/theme rules */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
}

#hg-rail-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 16, 20, .45);
    z-index: 999;
}

.hg-user-menu { display: flex; align-items: center; }
.hg-avatar-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 999px;
    color: var(--hg-muted);
}
.hg-avatar-btn:hover { background: var(--hg-canvas); }
.hg-avatar-btn .hg-icon { width: 14px; height: 14px; }
.hg-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--hg-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
}
.hg-dropdown-right { right: 0; left: auto; }

@media (max-width: 767px) {
    #hg-rail {
        left: calc(-1 * var(--hg-rail-w) - 240px);
        width: 260px;
        flex-basis: 260px;
        align-items: stretch;
        transition: left .18s ease;
        box-shadow: var(--hg-shadow-lg);
    }
    #hg-rail-brand { align-self: flex-start; margin-left: 16px; }
    #hg-rail-nav ul#side-menu.nav { align-items: stretch; padding: 0 10px; }
    #hg-rail-nav ul#side-menu.nav > li > a { justify-content: flex-start; gap: 12px; padding: 0 12px; }
    .hg-nav-label {
        position: static; width: auto; height: auto; overflow: visible; clip: auto;
        font-size: 14px; font-weight: 550;
    }
    #hg-rail-nav ul#side-menu.nav > li:not(.hg-has-sub) > a[title]:hover::after { content: none; }
    .hg-has-sub .hg-flyout {
        position: static;
        opacity: 1; visibility: visible; transform: none;
        display: none;
        box-shadow: none;
        border: none;
        background: transparent;
        margin: 2px 0 4px 30px;
        padding: 0;
    }
    .hg-has-sub:focus-within .hg-flyout,
    .hg-has-sub:hover .hg-flyout { display: block; }

    #hg-main { margin-left: 0; }

    .hg-rail-check:checked ~ #hg-rail { left: 0; }
    .hg-rail-check:checked ~ #hg-rail-scrim { display: block; }
    #hg-rail-toggle { display: flex; }
}

#page-wrapper {
    background: var(--hg-canvas);
    padding: 20px 24px 24px;
    flex: 1 1 auto;
}

.content { padding-top: 4px; }

footer {
    border-top: 1px solid var(--hg-line);
    color: var(--hg-muted);
    background: transparent;
    flex: 0 0 auto;
    margin-left: var(--hg-rail-w);
}
@media (max-width: 767px) { footer { margin-left: 0; } }

/* ------------------------------------------------------------ surfaces ---- */

.panel, .panel-default, .well, .list-group {
    background: var(--hg-surface);
    border: 1px solid var(--hg-line);
    border-radius: var(--hg-r);
    box-shadow: var(--hg-shadow);
}
.panel-heading {
    border-bottom: 1px solid var(--hg-line);
    border-radius: var(--hg-r) var(--hg-r) 0 0;
    background: transparent;
    font-weight: 620;
    padding: 14px 16px;
}
.panel-body { padding: 16px; }

.list-group-item {
    border-color: var(--hg-line);
    padding: 12px 16px;
}
.list-group-item:first-child { border-radius: var(--hg-r) var(--hg-r) 0 0; }
.list-group-item:last-child { border-radius: 0 0 var(--hg-r) var(--hg-r); }

/* ------------------------------------------------------------- buttons ---- */

.btn {
    border-radius: var(--hg-r-sm);
    font-weight: 560;
    font-size: 14px;
    padding: 8px 14px;
    border: 1px solid transparent;
    box-shadow: none;
    transition: background-color .12s ease, border-color .12s ease, transform .06s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus, .btn:focus-visible {
    outline: 2px solid var(--hg-accent);
    outline-offset: 2px;
    box-shadow: none;
}
.btn-sm { padding: 5px 10px; font-size: 13px; border-radius: 7px; }
.btn-xs { padding: 3px 8px; font-size: 12px; border-radius: 6px; }

.btn-default {
    background: var(--hg-surface);
    border-color: var(--hg-line);
    color: var(--hg-ink);
}
.btn-default:hover, .btn-default:focus {
    background: #f2f6f7;
    border-color: #d2dee3;
    color: var(--hg-ink);
}

.btn-primary { background: var(--hg-accent); border-color: var(--hg-accent); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--hg-accent-ink); border-color: var(--hg-accent-ink); }

.btn-group > .btn:first-child { border-top-left-radius: var(--hg-r-sm); border-bottom-left-radius: var(--hg-r-sm); }
.btn-group > .btn:last-child { border-top-right-radius: var(--hg-r-sm); border-bottom-right-radius: var(--hg-r-sm); }

/* --------------------------------------------------------------- forms ---- */

.form-control {
    border-radius: var(--hg-r-sm);
    border: 1px solid var(--hg-line);
    box-shadow: none;
    height: auto;
    padding: 9px 12px;
    font-size: 14px;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control:focus {
    border-color: var(--hg-accent);
    box-shadow: 0 0 0 3px var(--hg-accent-soft);
}
label { font-weight: 560; font-size: 13.5px; color: var(--hg-ink); }
.input-group-addon { border-radius: var(--hg-r-sm); border-color: var(--hg-line); background: #f2f6f7; }

/* -------------------------------------------------------------- tables ---- */

.table { border-collapse: separate; border-spacing: 0; }
.table > thead > tr > th {
    border-bottom: 1px solid var(--hg-line);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--hg-muted);
    font-weight: 620;
    padding: 10px 12px;
}
.table > tbody > tr > td { border-top: 1px solid var(--hg-line); padding: 11px 12px; }
.table-hover > tbody > tr:hover { background: #f7fafb; }

/* ------------------------------------------------------ modals & alerts ---- */

.modal-content {
    border: none;
    border-radius: var(--hg-r-lg);
    box-shadow: var(--hg-shadow-lg);
    overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--hg-line); padding: 16px 20px; }
.modal-title { font-weight: 650; }
.modal-body { padding: 20px; }
.modal-footer { border-top: 1px solid var(--hg-line); padding: 14px 20px; }
.modal-backdrop.in { opacity: .45; }

.alert {
    border-radius: var(--hg-r);
    border-width: 1px;
    box-shadow: var(--hg-shadow);
    padding: 12px 14px;
}

.dropdown-menu {
    border: 1px solid var(--hg-line);
    border-radius: var(--hg-r);
    box-shadow: var(--hg-shadow-lg);
    padding: 6px;
    margin-top: 6px;
}
.dropdown-menu > li > a {
    border-radius: var(--hg-r-sm);
    padding: 8px 10px;
    font-size: 14px;
}
.dropdown-menu > li > a:hover { background: var(--hg-accent-soft); }
.dropdown-menu .divider { background: var(--hg-line); margin: 6px 4px; }

.progress {
    border-radius: 999px;
    height: 8px;
    box-shadow: none;
    background: #e9eef1;
}
.progress-bar { border-radius: 999px; box-shadow: none; }

.tooltip .tooltip-inner {
    border-radius: var(--hg-r-sm);
    padding: 6px 10px;
    font-size: 12.5px;
}

/* User dropdown in the top bar */
.dropdown-user .user-profile { padding: 10px 12px; }
.dropdown-user .info-item { font-size: 13.5px; }

/* ----------------------------------------------------------- dashboard ---- */

.project-list-item, .task-list-item {
    border-radius: var(--hg-r);
}
.projects .project-list-item {
    background: var(--hg-surface);
    border: 1px solid var(--hg-line);
    box-shadow: var(--hg-shadow);
    margin-bottom: 14px;
    padding: 4px 6px;
}

/* --------------------------------------------------------- map / leaflet -- */
/* Deliberately empty. The 2D map view's chrome is owned by
   js/css/_viewer-chrome.scss and js/css/Map.scss, which ship in the MapView
   bundle. That bundle's stylesheet is rendered in the body, i.e. after this
   file, so its plain rules already win on document order — but they could not
   win against the !important-heavy leaflet overrides that used to live here.
   Don't reintroduce map styling in this file. */

/* ------------------------------------------------------------- potree ----- */
/* Deliberately empty. The 3D model view's chrome is owned by
   js/css/_viewer-chrome.scss, js/css/ModelView.scss and
   js/css/ModelInspector.scss, which ship in the ModelView bundle and are
   rendered after this file. The !important-heavy Potree overrides that used
   to live here fought that chrome — in particular the sidebar's fixed width
   and left dock, which no longer apply now the sidebar is adopted into the
   Inspector. Don't reintroduce potree styling in this file. */

/* ------------------------------------------------------------- sign-in ---- */

.hg-auth {
    min-height: calc(100vh - 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px 64px;
    background:
        radial-gradient(900px 420px at 50% -10%, rgba(15, 118, 110, .10), transparent 70%),
        var(--hg-canvas);
}

.hg-auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--hg-surface);
    border: 1px solid var(--hg-line);
    border-radius: var(--hg-r-lg);
    box-shadow: var(--hg-shadow);
    padding: 32px 28px;
}

.hg-auth-brand { text-align: center; margin-bottom: 24px; }
.hg-auth-brand img { width: 48px; height: 48px; border-radius: 13px; margin-bottom: 12px; }
.hg-auth-brand h1 { font-size: 19px; margin: 0; font-weight: 650; }

/* The login form ships as a bootstrap form-horizontal; unwind the grid so it
   stacks cleanly inside the card. */
.hg-auth .form-horizontal .control-label { text-align: left; width: 100%; padding-bottom: 6px; }
.hg-auth .form-horizontal .form-group { margin: 0 0 16px; }
.hg-auth .form-horizontal [class*="col-sm-"],
.hg-auth .form-horizontal [class*="col-md-"] {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
    float: none;
}
.hg-auth .btn { width: 100%; }
.hg-auth .btn-default {
    background: var(--hg-accent);
    border-color: var(--hg-accent);
    color: #fff;
}
.hg-auth .btn-default:hover, .hg-auth .btn-default:focus {
    background: var(--hg-accent-ink);
    border-color: var(--hg-accent-ink);
    color: #fff;
}
.hg-auth .top-buffer { margin-top: 14px; text-align: center; font-size: 13.5px; }
.hg-auth .alert { margin-bottom: 18px; }
.hg-auth footer { display: none; }

/* --------------------------------------------------------------- misc ----- */

.console {
    border-radius: var(--hg-r);
    border: 1px solid var(--hg-line);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
}

.pagination li > a { border-radius: var(--hg-r-sm); border-color: var(--hg-line); margin: 0 2px; }
.pagination .active > a, .pagination .active > a:hover { background: var(--hg-accent); border-color: var(--hg-accent); color: #fff; }

.nav-tabs { border-bottom: 1px solid var(--hg-line); }
.nav-tabs > li > a { border: none; border-radius: 0; color: var(--hg-muted); font-weight: 560; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border: none;
    border-bottom: 2px solid var(--hg-accent);
    color: var(--hg-ink);
    background: transparent;
}