/*
 * UniFi Inspector — SAP Fiori Horizon (Light)
 *
 * This is NOT a color-swap of a previous design.
 * Every component follows SAP Fiori Horizon patterns:
 *
 *   Shell Bar       — white, 44 px, blue-underlined active tab, 3 px blue bottom border
 *   Side Navigation — white panel, ALL-CAPS group section labels, Fiori list items
 *   Object Page     — overview page with analytical collection tiles (avatar + KPI)
 *   List/Table      — Fiori-style list items with sticky column header
 *   Drop Zone       — Fiori "Illustrated Message" upload area
 *   Buttons         — Emphasized (filled), Regular (outline), Ghost (text-only)
 *
 * Palette (Fiori Horizon Light):
 *   Brand blue   #0070F2   – active states, primary actions
 *   Page bg      #F5F6F7   – body background
 *   Panel/Card   #FFFFFF   – sidebar, cards, header
 *   Text 1       #32363A   – primary
 *   Text 2       #6A6D70   – secondary
 *   Text 3       #89919A   – muted / placeholder
 *   Border       #D9D9D9   – default; #EBEBEB subtle
 *   Error        #BB0000   – critical severity
 *   Warning      #E9730C   – high severity
 *   Caution      #E8A000   – medium severity
 *   Success      #107E3E   – pass / green
 */

/* ── Design tokens — mapped to SAP Fiori Horizon (sap-horizon-tokens.css) ─────── */
:root {
    /* Backgrounds */
    --color-bg-page:     var(--sapBackgroundColor,              #f5f6f7);
    --color-bg-panel:    var(--sapList_Background,              #ffffff);
    --color-bg-strip:    var(--sapList_GroupHeaderBackground,   #f5f6f7);
    --color-bg-hover:    var(--sapList_Hover_Background,        #eaecee);

    /* Borders */
    --color-border:      var(--sapPageHeader_BorderColor,       #d9d9d9);
    --color-border-sub:  var(--sapList_BorderColor,             #e5e5e5);
    --color-focus:       var(--sapHighlightColor,               #0064d9);

    /* Text */
    --color-text-1:  var(--sapTextColor,                    #131e29);
    --color-text-2:  var(--sapContent_LabelColor,           #556b82);
    --color-text-3:  var(--sapContent_NonInteractiveIconColor,#758ca4);
    --color-text-ph: var(--sapField_PlaceholderTextColor,   #556b82);

    /* Brand / interactive */
    --color-brand:        var(--sapHighlightColor,          #0064d9);
    --color-brand-hover:  var(--sapButton_Active_BorderColor,#0053c0);
    --color-brand-subtle: var(--sapList_SelectionBackgroundColor,#ebf8ff);

    /* Semantic */
    --color-success: var(--sapPositiveColor, #256f3a);
    --color-error:   var(--sapNegativeColor, #aa0808);
    --color-warn:    var(--sapCriticalColor, #e76500);

    /* Typography — SAP 72 font family (loaded via fd-components.css) */
    --font-sans: var(--sapFontFamily, "72", "72full", Arial, Helvetica, sans-serif);
    --font-mono: 'Consolas', 'SFMono-Regular', 'Menlo', 'Monaco', 'Courier New', monospace;

    --r-xs:   2px;
    --r-sm:   4px;
    --r-md:   8px;
    --r-lg:  12px;
    --r-pill:999px;

    --shadow-level1: 0 1px 4px rgba(0,0,0,.08);
    --shadow-level2: 0 4px 12px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06);

    --header-h:      52px;
    --context-bar-h: 36px;
    --tabs-bar-h:    40px;
    --sidebar-w:    240px;

    /* Shell Bar — dark JKLP brand colours (from logo) */
    --color-shell-bg:        #0D1B35;
    --color-shell-border:    #FFCC00;
    --color-shell-text:      #FFFFFF;
    --color-shell-text-2:    rgba(255,255,255,.55);
    --color-shell-tab-hover: rgba(255,255,255,.08);
}

/* ── Reset ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    background: var(--color-bg-page);
    color: var(--color-text-1);
    min-height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ── Shell Bar ──────────────────────────────────────────────────────────────── */
.header {
    display: flex;
    align-items: stretch;
    height: var(--header-h);
    background: var(--color-shell-bg);
    border-bottom: 3px solid var(--color-shell-border);
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    position: relative;
    z-index: 20;
}

/* Product area — logo + product name, separated by a subtle divider */
.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px 0 16px;
    border-right: 1px solid rgba(255,255,255,.12);
}

.header-logo {
    height: 24px;
    width: auto;
    display: block;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

.header-product { display: flex; align-items: baseline; gap: 0; }

.header-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-shell-text);
    white-space: nowrap;
}

.header-version {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--color-shell-bg);
    background: var(--color-shell-border);
    border-radius: var(--r-sm);
    padding: 1px 5px;
    margin-left: 7px;
    font-weight: 800;
    vertical-align: middle;
}

/* Remove subtitle from shell bar — keep it clean like real Fiori */
.header-subtitle { display: none; }

/* Push lang-toggle to the far right */
.lang-toggle { margin-left: auto; }

/* ── View Tab Bar — Fiori Icon Tab Bar below the Shell Bar ──────────────────── */
.view-tabs-bar {
    display: flex;
    align-items: stretch;
    height: var(--tabs-bar-h);
    padding: 0 8px;
    background: var(--sapList_Background, #fff);
    border-bottom: 1px solid var(--sapList_BorderColor, #e5e5e5);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    flex-shrink: 0;
    z-index: 10;
}
.view-tabs-bar--hidden { display: none; }

.view-tab-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--sapTextColor, #131e29);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color .12s, border-color .12s;
    white-space: nowrap;
    margin-bottom: -1px;
}
.view-tab-item:hover   { color: var(--sapHighlightColor, #0064d9); }
.view-tab-item--active {
    color: var(--sapHighlightColor, #0064d9);
    border-bottom-color: var(--sapHighlightColor, #0064d9);
    font-weight: 600;
}

.nav-findings-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: #fff;
}

/* Language toggle (EN / DE) in shell bar far-right */
.lang-toggle {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 16px 0 8px;
    border-left: 1px solid rgba(255,255,255,.1);
}

.lang-btn {
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--color-shell-text-2);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: color .12s, background .12s, border-color .12s;
}
.lang-btn:hover   { color: var(--color-shell-text); background: var(--color-shell-tab-hover); }
.lang-btn--active { color: var(--color-shell-bg); background: var(--color-shell-border); border-color: transparent; }

/* ── Context Bar — file object header shown when a backup is loaded ─────────── */
.context-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 20px;
    background: var(--color-bg-panel);
    border-bottom: 1px solid var(--color-border);
    font-size: 12.5px;
    color: var(--color-text-2);
    position: relative;
    z-index: 10;
}
.context-bar--hidden { display: none; }

.ctx-status--ok {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    color: #059669;
}

.ctx-sep {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: var(--color-border);
    flex-shrink: 0;
}

.ctx-filename {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
}

.ctx-filesize {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-text-3);
    white-space: nowrap;
}

.ctx-label {
    font-size: 11.5px;
    color: var(--color-text-3);
    font-style: italic;
}

.ctx-close {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--color-text-3);
    cursor: pointer;
    transition: color .12s, background .12s;
    flex-shrink: 0;
}
.ctx-close:hover {
    color: var(--color-error);
    background: rgba(187,0,0,.06);
}

/* ── Drop zone — Fiori "Illustrated Message" upload area ────────────────────── */
.drop-zone-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh - var(--header-h));
    background: var(--color-bg-page);
}

.drop-zone {
    width: 480px;
    background: var(--color-bg-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-level2);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}

/* Fiori-style dialog title bar — rendered as .drop-zone-titlebar div in JS */
.drop-zone-titlebar {
    display: block;
    padding: 12px 20px 11px;
    background: var(--color-bg-panel);
    border-bottom: 1px solid var(--color-border-sub);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-1);
}

.drop-zone:hover,
.drop-zone--dragover {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 2px var(--color-brand-subtle), var(--shadow-level2);
}

.drop-zone-body {
    padding: 32px 36px 36px;
    text-align: center;
}

/* Terminal-style command hint */
.drop-zone-tagline {
    font-size: 13px;
    color: var(--color-text-2);
    margin-bottom: 24px;
    font-style: italic;
}

/* Upload icon — a large ↑ in a circle */
.drop-zone h2 {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text-1);
    margin-bottom: 6px;
}

.drop-zone p {
    font-size: 13px;
    color: var(--color-text-2);
}

.drop-zone-hint {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border-sub);
    font-size: 12px;
    color: var(--color-text-3);
}

.drop-zone-hint--warning {
    color: var(--color-warn);
    margin-top: 8px;
    border-top: none;
    padding-top: 0;
    font-weight: 500;
}

.drop-zone input[type="file"] { display: none; }

.drop-zone-disclaimer {
    max-width: 520px;
    margin-top: 20px;
}

/* Shared disclaimer box — used on drop zone and compliance view */
.disclaimer-box {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 14px;
    border: 1px solid #BDD5F5;
    border-left: 4px solid var(--color-brand);
    border-radius: var(--r-md);
    background: #EAF3FF;
    font-size: 12px;
    line-height: 1.6;
    color: #1A4A7A;
}

.disclaimer-box { flex-direction: column; gap: 8px; }

.disclaimer-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.disclaimer-icon {
    flex-shrink: 0;
    color: var(--color-brand);
}

.disclaimer-title {
    font-size: 13px;
    font-weight: 700;
    color: #1A4A7A;
}

.disclaimer-list {
    margin: 0 0 0 26px;
    padding: 0;
    font-size: 12px;
    line-height: 1.7;
    color: #1A4A7A;
}

.disclaimer-footer {
    font-size: 12px;
    font-weight: 600;
    color: #1A4A7A;
    margin: 0;
}

/* ── Processing screen ──────────────────────────────────────────────────────── */
.processing-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh - var(--header-h) - var(--context-bar-h));
    gap: 14px;
    background: var(--color-bg-page);
}
/* processing phase has no tab bar */

.spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-brand);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

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

.processing-label { font-size: 14px; font-weight: 500; }
.processing-step  { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-3); }

.debug-log {
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--color-bg-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    padding: 12px 16px;
    max-width: 640px;
    width: 90%;
    max-height: 220px;
    overflow-y: auto;
    text-align: left;
    line-height: 1.7;
    box-shadow: var(--shadow-level1);
    color: var(--color-text-2);
}

.debug-log .log-ok   { color: var(--color-success); }
.debug-log .log-warn { color: var(--color-warn); }
.debug-log .log-err  { color: var(--color-error); }
.debug-log .log-info { color: var(--color-brand); }

/* ── App layout ──────────────────────────────────────────────────────────────── */
.ready-view {
    height: calc(100vh - var(--header-h) - var(--context-bar-h) - var(--tabs-bar-h));
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.main-layout {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    height: 100%;
    overflow: hidden;
}

.ready-view > .main-layout { height: 100%; }

/* ── Side Navigation ─────────────────────────────────────────────────────────── */
/*
 * SAP Fiori Side Navigation:
 *   – White panel, subtle right border
 *   – ALL-CAPS section labels between groups (non-clickable)
 *   – Items: 36 px height, text left + count badge right
 *   – Active: 3 px blue left border + light-blue background
 */
.sidebar {
    background: var(--color-bg-panel);
    border-right: 1px solid var(--color-border-sub);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-search-wrap {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border-sub);
}

.sidebar-search {
    width: 100%;
    height: 32px;
    padding: 0 10px 0 32px;
    border: 1px solid var(--color-border);
    border-radius: var(--r-sm);
    background: var(--color-bg-strip)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2389919A' stroke-width='2.2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")
        no-repeat 9px center;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-text-1);
    outline: none;
    transition: border-color .12s;
}

.sidebar-search:focus       { border-color: var(--color-focus); background-color: var(--color-bg-panel); }
.sidebar-search::placeholder { color: var(--color-text-ph); }

.sidebar-meta {
    display: flex;
    justify-content: space-between;
    padding: 5px 14px;
    font-size: 11px;
    color: var(--color-text-3);
    border-bottom: 1px solid var(--color-border-sub);
    background: var(--color-bg-strip);
}

.tree-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 8px;
    position: relative;   /* establishes stacking context for sticky children */
}

/* Sticky item stays visible when the tree-list scrolls (e.g. "Backup Overview") */
.tree-item--sticky {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-bg-panel);
    box-shadow: 0 1px 0 var(--color-border-sub);
}

.tree-list::-webkit-scrollbar       { width: 4px; }
.tree-list::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }

/* ── v1.1 Sidebar navigation ────────────────────────────────────────────────── */

/* Overview item — same height/font as regular items, no special box */
.nav-item--overview {
    border-left: 3px solid transparent;
}
.nav-item--overview-active {
    border-left-color: var(--sapHighlightColor, #0064d9) !important;
    background: var(--sapList_SelectionBackgroundColor, #ebf8ff) !important;
}
.nav-item--sticky { position: sticky; top: 0; z-index: 1; background: var(--color-bg-panel); }
.nav-item-name--overview { font-family: var(--font-sans); font-size: var(--sapFontSize, .875rem); font-weight: 500; color: var(--sapTextColor, #131e29); }
.nav-item--overview-active .nav-item-name--overview { color: var(--sapHighlightColor, #0064d9); font-weight: 600; }

/* Group header — SAP Fiori Side Navigation section title (ALL-CAPS, grey, no color) */
.nav-group-header {
    display: flex;
    align-items: center;
    padding: 16px 16px 4px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--sapContent_NonInteractiveIconColor, #758ca4);
    background: var(--color-bg-panel);
}

/* Nav item — SAP Fiori Side Navigation item */
.nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px 0 16px;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: background .1s;
    border-left: 3px solid transparent;
}
.nav-item:hover   { background: var(--sapList_Hover_Background, #eaecee); }
/* Active: brand-blue left border + very light tint — always sapHighlightColor, never per-item */
.nav-item--active { border-left-color: var(--sapHighlightColor, #0064d9);
                    background: var(--sapList_SelectionBackgroundColor, #ebf8ff); }
.nav-item--child  { padding-left: 24px; }

/* Small colour dot — neutral grey; only active item shows brand colour */
.nav-item-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-border);
    flex-shrink: 0;
}
.nav-item--active .nav-item-dot { background: var(--sapHighlightColor, #0064d9); }

/* Item label — sans-serif, same weight/size as Fiori list items */
.nav-item-name {
    flex: 1;
    font-size: var(--sapFontSize, .875rem);
    font-family: var(--font-sans);
    color: var(--sapTextColor, #131e29);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-item--active .nav-item-name { color: var(--sapHighlightColor, #0064d9); font-weight: 600; }

/* Count badge — neutral grey pill, never coloured */
.nav-item-badge {
    flex-shrink: 0;
    min-width: 22px;
    height: 16px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    background: transparent;
    border: 1px solid var(--sapList_BorderColor, #e5e5e5);
    color: var(--sapContent_NonInteractiveIconColor, #758ca4);
    font-size: 10px;
    font-family: var(--font-sans);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-item--active .nav-item-badge {
    border-color: color-mix(in srgb, var(--sapHighlightColor, #0064d9) 40%, transparent);
    color: var(--sapHighlightColor, #0064d9);
}

/* ── Content area ───────────────────────────────────────────────────────────── */
.content-area {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;   /* required: grid item → flex container → allow children to scroll */
    background: var(--color-bg-page);
}

/* ── Overview — SAP Fiori Collection Tiles ──────────────────────────────────── */
/*
 * Replaces the flat table. Each collection becomes a "tile":
 *   [avatar] [collection name + description]   [doc count]
 *
 * Tiles are stacked in a bordered card per section group.
 * This is the SAP Fiori "Object List" pattern.
 */
.overview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--color-bg-panel);
    border-bottom: 1px solid var(--color-border-sub);
    box-shadow: var(--shadow-level1);
    flex-shrink: 0;
}

.overview-toolbar-stat {
    font-size: 12px;
    color: var(--color-text-3);
}

/* ── Collection overview — wraps the fd-list ─────────────────────────────────── */
.coll-overview {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.coll-overview::-webkit-scrollbar       { width: 5px; }
.coll-overview::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }

/* ── fd-list customizations for collection / PG-table list ───────────────────── */

/* Full-width list — override fd-list's !important max-width */
.coll-fd-list { max-width: none !important; }

/* Neutral counter badge in group headers — fd-counter default is a colored badge */
.coll-fd-list .fd-list__group-header .fd-counter {
    background: transparent;
    border: 1px solid var(--sapList_GroupHeaderBorderColor, #a8b2bd);
    color: var(--color-text-3);
    font-family: var(--font-mono);
}

/* Byline items need auto height (two text lines) */
.coll-fd-list .fd-list__item {
    height: auto !important;
    min-height: 3.5rem;
    padding-block: 0.625rem;
    /* Colored left border per item — color set via inline style="--coll-color:…" */
    border-left: 3px solid var(--coll-color, var(--color-border));
    cursor: pointer;
}

/* Explicit hover since we don't use fd-list__item--interactive in all contexts */
.coll-fd-list .fd-list__item:hover {
    background: var(--sapList_Hover_Background, #eaecee);
}

/* Secondary slot — holds the fd-object-number KPI */
.coll-fd-list .fd-list__secondary {
    padding-inline-end: 0.75rem;
    align-self: center;
}

/* fd-object-number stacked layout (number on top, label below) */
.coll-fd-list .fd-object-number {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}
.coll-fd-list .fd-object-number__text {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
}
.coll-fd-list .fd-object-number__unit {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--sapContent_NonInteractiveIconColor, #758ca4);
}


/* ── Buttons — three SAP Fiori variants ─────────────────────────────────────── */
/*
 * Emphasized  → filled brand-blue (primary action)
 * Regular     → white with border (secondary action, default .btn)
 * Ghost/Reset → transparent, text only
 */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 16px;
    height: 32px;
    border-radius: var(--r-sm);
    border: 1px solid var(--color-border);
    background: var(--color-bg-panel);
    color: var(--color-text-2);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .12s, color .12s, background .12s;
    white-space: nowrap;
}

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

/* Emphasized button */
.btn--primary {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: #fff;
    font-weight: 600;
}

.btn--primary:hover {
    background: var(--color-brand-hover);
    border-color: var(--color-brand-hover);
    color: #fff;
}

/* Reset / close button — ghost */
.btn--reset {
    background: none;
    border: none;
    color: var(--color-text-3);
    font-size: 15px;
    padding: 0 8px;
    height: 28px;
    border-radius: var(--r-sm);
    cursor: pointer;
}

.btn--reset:hover { color: var(--color-error); background: rgba(187,0,0,.06); }

.btn--back {
    background: var(--color-bg-panel);
    border: 1px solid var(--color-border);
    color: var(--color-text-2);
    font-size: 13px;
    padding: 0 16px;
    height: 32px;
    border-radius: var(--r-sm);
    cursor: pointer;
    margin-top: 12px;
}

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

/* ── View-mode tabs (List / Cards / Raw) ─────────────────────────────────────── */
/*
 * Fiori "Segmented Button" pattern — items share a border, active has filled background.
 */
.view-tabs {
    display: flex;
    background: var(--color-bg-strip);
    border: 1px solid var(--color-border);
    border-radius: var(--r-sm);
    padding: 2px;
    gap: 2px;
}

.view-tab {
    padding: 0 12px;
    height: 24px;
    border-radius: calc(var(--r-sm) - 1px);
    border: none;
    background: transparent;
    color: var(--color-text-2);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background .1s, color .1s;
}

.view-tab--active                      { background: var(--color-bg-panel); color: var(--color-brand); font-weight: 600; box-shadow: var(--shadow-level1); }
.view-tab:hover:not(.view-tab--active) { color: var(--color-brand); }

/* ── Object Page Header ──────────────────────────────────────────────────────── */
/*
 * Fiori Object Page Header — two-row structure:
 *   Row 1: breadcrumb navigation
 *   Row 2: colored marker | title + subtitle | key attribute KPIs (right-aligned)
 * Used for MongoDB collection detail and PostgreSQL table detail.
 */
.obj-header {
    background: var(--color-bg-panel);
    border-bottom: 1px solid var(--color-border-sub);
    box-shadow: var(--shadow-level1);
    flex-shrink: 0;
}

.obj-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px 0;
}

.obj-bc-back {
    background: none;
    border: none;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-brand);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--r-sm);
    transition: background .1s;
}
.obj-bc-back:hover { background: var(--color-brand-subtle); }

.obj-bc-sep { color: var(--color-text-3); font-size: 12px; }
.obj-bc-cur { font-family: var(--font-mono); font-size: 12px; font-weight: 500; }

.obj-header-body {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 20px 14px;
}

.obj-header-marker {
    width: 4px;
    min-height: 36px;
    align-self: stretch;
    border-radius: 2px;
    flex-shrink: 0;
}

.obj-title-area { flex: 1; min-width: 0; }

.obj-title {
    font-size: 18px;
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--color-text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.obj-subtitle {
    display: block;
    font-size: 12px;
    color: var(--color-text-3);
    margin-top: 3px;
}

.obj-header-attrs {
    display: flex;
    gap: 28px;
    flex-shrink: 0;
    align-items: flex-end;
}

.obj-attr {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.obj-attr-val {
    font-size: 22px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--color-text-1);
    line-height: 1;
}

.obj-attr-lbl {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-3);
    text-transform: uppercase;
    letter-spacing: .07em;
}

/* ── Object Toolbar (detail view actions + search) ───────────────────────────── */
.obj-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    background: var(--color-bg-panel);
    border-bottom: 1px solid var(--color-border-sub);
    flex-shrink: 0;
}

.toolbar-search {
    flex: 1;
    max-width: 380px;
    height: 32px;
    padding: 0 12px 0 32px;
    border: 1px solid var(--color-border);
    border-radius: var(--r-sm);
    background: var(--color-bg-strip)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2389919A' stroke-width='2.2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")
        no-repeat 9px center;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-text-1);
    outline: none;
    transition: border-color .12s;
}
.toolbar-search:focus       { border-color: var(--color-focus); background-color: var(--color-bg-panel); }
.toolbar-search::placeholder { color: var(--color-text-ph); }

/* Wrapper injected by renderCollectionView() — must flex-grow to fill remaining height */
.collection-documents {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.toolbar-spacer { flex: 1; min-width: 0; }

/* ── Page Toolbar (list overview screens: collection grid + PG table list) ───── */
.page-toolbar {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 20px;
    gap: 8px;
    background: var(--color-bg-panel);
    border-bottom: 1px solid var(--color-border-sub);
    box-shadow: var(--shadow-level1);
    flex-shrink: 0;
}
.page-toolbar-info {
    flex: 1;
    font-size: 12px;
    color: var(--color-text-3);
}

/* ── Filter bar (legacy — kept for backwards compat) ──────────────────────────── */
.content-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: var(--color-bg-panel);
    border-bottom: 1px solid var(--color-border-sub);
    flex-shrink: 0;
}

.content-filter-input {
    height: 32px;
    padding: 0 12px;
    max-width: 420px;
    border: 1px solid var(--color-border);
    border-radius: var(--r-sm);
    background: var(--color-bg-strip);
    color: var(--color-text-1);
    font-size: 13px;
    font-family: var(--font-sans);
    outline: none;
    transition: border-color .12s;
}

.content-filter-input:focus       { border-color: var(--color-focus); background: var(--color-bg-panel); }
.content-filter-input::placeholder{ color: var(--color-text-ph); }

/* ── Compact List view ──────────────────────────────────────────────────────── */
/*
 * Fiori "Responsive Table" pattern:
 *   – Sticky column header in ALL-CAPS
 *   – Rows with left indicator border on active/expanded
 *   – Even row highlight via :nth-child (Fiori "zebra" is optional — using hover only)
 */
.doc-list-view {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    font-size: 13px;
    background: var(--color-bg-page);
}

.doc-list-view::-webkit-scrollbar       { width: 5px; }
.doc-list-view::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }

.doc-list-header {
    display: grid;
    grid-template-columns: 1fr 1fr 64px 22px;
    gap: 0 12px;
    padding: 6px 20px;
    background: var(--color-bg-panel);
    border-bottom: 1px solid var(--color-border-sub);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--color-text-3);
    position: sticky;
    top: 0;
    z-index: 1;
    box-shadow: 0 1px 0 var(--color-border-sub);
}

.doc-list-row {
    display: grid;
    grid-template-columns: 1fr 1fr 64px 22px;
    gap: 0 12px;
    padding: 9px 20px;
    border-bottom: 1px solid var(--color-border-sub);
    background: var(--color-bg-panel);
    cursor: pointer;
    align-items: center;
    border-left: 3px solid transparent;
    transition: background .1s;
}

.doc-list-row:hover             { background: var(--color-bg-hover); }
.doc-list-row--expanded         { background: var(--color-bg-hover); border-left-color: var(--color-brand); border-bottom: none; }
.doc-list-row--expanded .doc-list-toggle { transform: rotate(90deg); }

.doc-list-label  { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--color-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-list-meta   { font-size: 12px; color: var(--color-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-list-count  { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-3); text-align: right; }
.doc-list-toggle { font-size: 10px; color: var(--color-text-3); text-align: right; transition: transform .15s; }

.doc-list-row-body {
    padding: 12px 20px 12px 28px;
    background: var(--color-bg-strip);
    border-bottom: 1px solid var(--color-border-sub);
    border-left: 3px solid var(--color-brand);
}

/* ── Document Cards view ────────────────────────────────────────────────────── */
.doc-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
    align-content: start;
    background: var(--color-bg-page);
}

.doc-list::-webkit-scrollbar       { width: 5px; }
.doc-list::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }

/* Fiori "Standard List Item" card */
.doc-card {
    background: var(--color-bg-panel);
    border: 1px solid var(--color-border-sub);
    border-radius: var(--r-md);
    overflow: hidden;
    border-left: 3px solid var(--color-border);
    box-shadow: var(--shadow-level1);
    transition: border-left-color .15s, box-shadow .15s;
}

.doc-card:hover { border-left-color: var(--color-brand); box-shadow: var(--shadow-level2); }

.doc-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    transition: background .1s;
}

.doc-card-header:hover { background: var(--color-bg-hover); }

.doc-card-id   { font-family: var(--font-mono); font-size: 13px; color: var(--color-brand); font-weight: 600; }
.doc-card-meta { font-size: 11px; color: var(--color-text-3); display: flex; gap: 10px; margin-top: 2px; }

.doc-card-toggle {
    color: var(--color-text-3);
    font-size: 11px;
    transition: transform .15s;
    flex-shrink: 0;
}

.doc-card--expanded { grid-column: 1 / -1; }
.doc-card--expanded .doc-card-toggle { transform: rotate(90deg); }

.doc-card-body {
    border-top: 1px solid var(--color-border-sub);
    padding: 12px 14px;
    display: none;
    background: var(--color-bg-strip);
    max-height: 55vh;
    overflow-y: auto;
}
.doc-card-body::-webkit-scrollbar       { width: 5px; }
.doc-card-body::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }

.doc-card--expanded .doc-card-body { display: block; }

/* ── JSON syntax highlighting ───────────────────────────────────────────────── */
.json-tree {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-all;
}

/* SAP-friendly light-theme palette for JSON */
.json-key     { color: #0052CC; }
.json-string  { color: #1E7E34; }
.json-number  { color: #C7372F; }
.json-boolean { color: #7928CA; }
.json-null    { color: var(--color-text-3); font-style: italic; }
.json-bracket { color: var(--color-text-2); }

/* ── Raw JSON view ──────────────────────────────────────────────────────────── */
.raw-json {
    padding: 16px 20px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-y: auto;
    flex: 1;
    color: var(--color-text-2);
    background: var(--color-bg-page);
}

/* ── Empty state ────────────────────────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 10px;
    font-size: 13px;
    color: var(--color-text-3);
}

.empty-state-icon { font-size: 32px; opacity: .3; }

/* ── Toast ──────────────────────────────────────────────────────────────────── */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--color-bg-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    padding: 10px 18px;
    font-size: 13px;
    color: var(--color-text-1);
    z-index: 100;
    animation: toast-in .2s ease;
    box-shadow: var(--shadow-level2);
    max-width: 440px;
    white-space: pre-wrap;
}

.toast--success { border-left: 4px solid var(--color-success); }
.toast--error   { border-left: 4px solid var(--color-error); color: var(--color-error); }

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

/* ── .unifi sidebar DB-panel tabs ───────────────────────────────────────────── */
.sidebar-db-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    padding: 0 6px;
    gap: 2px;
    flex-shrink: 0;
}
.sidebar-db-tab {
    flex: 1;
    padding: 8px 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-2);
    cursor: pointer;
    transition: color .15s, border-color .15s;
    margin-bottom: -1px;
}
.sidebar-db-tab--active {
    color: var(--color-brand);
    border-bottom-color: var(--color-brand);
}
.sidebar-db-tab:hover:not(.sidebar-db-tab--active) { color: var(--color-text-1); }

/* Indented child items (collections under a selected site) */
.tree-item--child {
    padding-left: 28px;
}

/* Inline collection filter inside the MongoDB panel */
.sidebar-search--inline {
    font-size: 11px;
    padding: 4px 8px 4px 32px;
    height: 26px;
    margin: 0;
}

/* ── .unifi backup overview page ────────────────────────────────────────────── */
.unifi-overview {
    padding: 24px 28px;
    overflow-y: auto;
    height: 100%;
}

/* Section header — Fiori "Object Page Sub-Section" style */
.unifi-section-hdr {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-2);
    margin: 24px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border-sub);
}

/* Metadata card — Fiori "Object Page Attribute Section" */
.unifi-meta-card {
    background: var(--color-bg-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-level1);
    margin-bottom: 8px;
}

.unifi-meta-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--color-bg-strip);
    border-bottom: 1px solid var(--color-border-sub);
}

.unifi-meta-card-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-2);
}

.unifi-meta-kpis {
    display: flex;
    gap: 24px;
}

.unifi-meta-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.unifi-meta-kpi-val {
    font-size: 18px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--color-text-1);
    line-height: 1;
}

.unifi-meta-kpi-lbl {
    font-size: 9px;
    font-weight: 600;
    color: var(--color-text-3);
    text-transform: uppercase;
    letter-spacing: .07em;
}

/* Attribute grid — 2-column key/value layout */
.meta-attr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 8px 0 4px;
}

.meta-attr {
    display: flex;
    flex-direction: column;
    padding: 6px 16px;
    gap: 2px;
}

.meta-attr-lbl {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--color-text-3);
}

.meta-attr-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-1);
    font-family: var(--font-mono);
}

.unifi-meta-props {
    margin: 0;
    padding: 8px 16px 12px;
    border-top: 1px solid var(--color-border-sub);
}

.meta-prop {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-text-2);
    padding: 1px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Source cards (sites + PostgreSQL) */
.unifi-source-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.unifi-source-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--color-bg-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    padding: 16px 18px;
    text-align: left;
    cursor: pointer;
    min-width: 220px;
    max-width: 320px;
    flex: 1;
    transition: border-color .15s, box-shadow .15s;
}
.unifi-source-card:hover {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(0,112,242,.08);
}
.unifi-source-card--pg:hover { border-color: #336791; box-shadow: 0 0 0 3px rgba(51,103,145,.08); }

.unifi-source-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
}
.unifi-source-avatar {
    width: 40px; height: 40px;
    border-radius: var(--r-sm);
    background: rgba(0,112,242,.1);
    color: var(--color-brand);
    font-size: 12px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.unifi-source-avatar--pg { background: rgba(51,103,145,.12); color: #336791; }

.unifi-source-info { min-width: 0; }
.unifi-source-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.unifi-source-type { font-size: 11px; color: var(--color-text-2); margin-top: 2px; }

.unifi-source-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border-sub);
}
.unifi-source-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.unifi-source-stat span {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-1);
    line-height: 1.1;
}
.unifi-source-stat small { font-size: 10px; color: var(--color-text-2); text-transform: uppercase; letter-spacing:.04em; }

.empty-text { font-size: 13px; color: var(--color-text-3); font-style: italic; }

/* Site card type variants */
.unifi-source-card--system { border-color: rgba(245,158,11,.35); }
.unifi-source-card--system:hover { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.1); }
.unifi-source-card--system .unifi-source-avatar { background: rgba(245,158,11,.12); color: #b45309; }
.unifi-source-card--global { border-color: rgba(16,185,129,.35); }
.unifi-source-card--global:hover { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.1); }
.unifi-source-card--global .unifi-source-avatar { background: rgba(16,185,129,.12); color: #059669; }

/* PostgreSQL data grid */
.pg-table-wrap {
    overflow: auto;
    flex: 1;
    min-height: 0;
    padding: 0 0 0 0;
}
.pg-table {
    border-collapse: collapse;
    font-size: 12px;
    font-family: var(--font-mono);
    width: max-content;
    min-width: 100%;
}
.pg-table thead th {
    position: sticky;
    top: 0;
    background: var(--color-bg-strip);
    border-bottom: 2px solid var(--color-border);
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    color: var(--color-text-2);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .04em;
    z-index: 1;
}
.pg-table tbody tr:nth-child(even) { background: var(--color-bg-strip); }
.pg-table tbody tr:hover { background: rgba(0,112,242,.04); }
.pg-table td.pg-cell {
    padding: 6px 12px;
    border-bottom: 1px solid var(--color-border-sub);
    white-space: nowrap;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-1);
    vertical-align: top;
}
.pg-table td.pg-cell--null {
    color: var(--color-text-3);
    font-style: italic;
}
.pg-table-limit-notice {
    padding: 12px 0;
    font-size: 11px;
    color: var(--color-text-3);
    font-family: var(--font-mono);
}