/*
 * Factor Fifty — Dark Theme (Canvas-unified)
 * Font: DM Sans (sans-serif) + JetBrains Mono (monospace)
 * Accent: Blue #3b82f6 (canvas style)
 */

/* ═══════════════════════════════════════════════════
   CSS Custom Properties
   ═══════════════════════════════════════════════════ */
:root {
    /* Backgrounds — canvas palette */
    --bg-body: #0a0e1a;
    --bg-surface: #111827;
    --bg-card: #151d2e;
    --bg-card-hover: #1c2740;
    --bg-input: #1a2235;
    --bg-elevated: #1c2740;

    /* Borders */
    --border: #243049;
    --border-light: #2a3a58;
    --border-focus: #4ade80;

    /* Text */
    --text-primary: #e8ecf4;
    --text-secondary: #8b99b5;
    --text-muted: #5a6a8a;

    /* Accent — Green (primary action) */
    --green: #4ade80;
    --green-dark: #3cc972;
    --green-dim: rgba(74, 222, 128, 0.08);

    /* Status / Semantic */
    --blue: #3b82f6;
    --blue-dim: rgba(59, 130, 246, 0.1);
    --red: #ef4444;
    --red-dim: rgba(239, 68, 68, 0.1);
    --orange: #f59e0b;
    --orange-dim: rgba(245, 158, 11, 0.1);
    --amber: #fbbf24;
    --amber-dim: rgba(251, 191, 36, 0.12);
    --purple: #8b5cf6;
    --purple-dim: rgba(139, 92, 246, 0.1);
    --cyan: #22d3ee;
    --cyan-dim: rgba(34, 211, 238, 0.1);

    /* Provider */
    --aws: #ff9900;
    --aws-dim: rgba(255, 153, 0, 0.1);
    --azure: #0078d4;
    --azure-dim: rgba(0, 120, 212, 0.1);

    /* Layout */
    --topnav-height: 48px;
    --sidebar-width-collapsed: 180px;
    --sidebar-width-expanded: 200px;

    /* Typography — DM Sans to match canvas */
    --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Radius */
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;

    /* Shadows */
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);

    /* Accent alias (used by module registry, etc.) */
    --accent: var(--blue);
    --surface: var(--bg-surface);
    --bg: var(--bg-card);
}

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

body {
    font-family: var(--font-sans);
    background: var(--bg-body);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s;
}

a:hover {
    color: var(--text-primary);
}

img {
    max-width: 100%;
    display: block;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

/* ═══════════════════════════════════════════════════
   Top Navigation Bar
   ═══════════════════════════════════════════════════ */
.topnav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--topnav-height);
    padding: 0 20px;
    background: rgba(17, 24, 39, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}

.topnav-left {
    display: flex;
    align-items: center;
    gap: 0;
}

.topnav-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Logo — green bars mark */
.topnav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin-right: 0;
    flex-shrink: 0;
}

.topnav-logo-bars {
    display: flex;
    gap: 1.5px;
    align-items: flex-end;
}

.topnav-logo-bars span {
    width: 2.5px;
    background: #2ecc71;
    border-radius: 1.5px;
}

/* 8 bars, ascending left-to-right like the original logo */
.topnav-logo-bars span:nth-child(1) {
    height: 6px;
}

.topnav-logo-bars span:nth-child(2) {
    height: 8px;
}

.topnav-logo-bars span:nth-child(3) {
    height: 10px;
}

.topnav-logo-bars span:nth-child(4) {
    height: 12px;
}

.topnav-logo-bars span:nth-child(5) {
    height: 14px;
}

.topnav-logo-bars span:nth-child(6) {
    height: 17px;
}

.topnav-logo-bars span:nth-child(7) {
    height: 20px;
}

.topnav-logo-bars span:nth-child(8) {
    height: 24px;
}

.topnav-logo-text {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Customer switcher pill (inline in topnav) */
.topnav-customer-switcher {
    position: relative;
    margin-left: 20px;
    flex-shrink: 0;
}

.topnav-customer-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 12.5px;
    color: var(--text-secondary);
    transition: border-color 0.15s, background 0.15s;
}

.topnav-customer-btn:hover {
    border-color: var(--border-light);
    background: rgba(255, 255, 255, 0.05);
}

.topnav-customer-dot {
    width: 8px;
    height: 8px;
    background: #2ecc71;
    border-radius: 50%;
    box-shadow: 0 0 6px #2ecc71;
    flex-shrink: 0;
}

.topnav-customer-name {
    font-weight: 500;
    white-space: nowrap;
}

.topnav-customer-chevron {
    width: 10px;
    height: 10px;
    color: var(--text-muted);
    margin-left: 2px;
    flex-shrink: 0;
}

.topnav-customer-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 180px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px;
    z-index: 200;
    box-shadow: var(--shadow);
}

.topnav-customer-menu.open {
    display: block;
}

/* Config dropdown */
.topnav-config-dropdown {
    position: relative;
    display: inline-flex;
}

.topnav-config-trigger {
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--font-sans);
}

.topnav-badge {
    font-family: var(--font-mono);
    font-size: 9px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 4px;
    color: var(--text-muted);
}

.topnav-config-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px;
    z-index: 200;
    box-shadow: var(--shadow);
}

.topnav-config-menu.open {
    display: block;
}

/* Shared dropdown item styles (config + customer menus) */
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.1s, color 0.1s;
}

.dropdown-item:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.dropdown-item.active {
    color: var(--blue);
}

.dropdown-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* Search bar */
.topnav-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.15s;
}

.topnav-search:hover {
    border-color: var(--border-light);
}

.topnav-search svg {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
}

.topnav-search span {
    font-size: 12px;
    color: var(--text-muted);
}

.topnav-search kbd {
    font-family: var(--font-mono);
    font-size: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
    color: var(--text-muted);
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.breadcrumb a {
    color: var(--text-secondary);
}

.breadcrumb a:hover {
    color: var(--text-primary);
}

.breadcrumb .sep {
    opacity: 0.3;
}

.breadcrumb .current {
    color: var(--text-primary);
    font-weight: 500;
}

/* Avatar */
.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    border: 1.5px solid rgba(59, 130, 246, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
    cursor: pointer;
}

/* Topnav inline links */
.topnav-links {
    display: flex;
    align-items: center;
    gap: 2px;
}

.topnav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius);
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
    position: relative;
    cursor: pointer;
}

.topnav-link svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.7;
}

.topnav-link:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
}

.topnav-link.active {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.08);
}

.topnav-link.active svg {
    opacity: 1;
}

.topnav-link.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: #4ade80;
    border-radius: 2px 2px 0 0;
    box-shadow: 0 0 8px #4ade80;
}

.topnav-sep {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 12px;
}

/* Screen selector bar (notification bar — hidden by default) */
.screen-selector {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 14px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Full-width content area (no sidebar) */
.app-content {
    padding: 28px 32px;
    max-width: 1400px;
    margin: 0 auto;
    min-height: calc(100vh - var(--topnav-height));
}

/* User dropdown */
.user-dropdown {
    position: relative;
}

.user-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px;
    z-index: 200;
    box-shadow: var(--shadow);
}

.user-dropdown-menu.open {
    display: block;
}

.user-dropdown-item {
    display: block;
    padding: 7px 12px;
    font-size: 12px;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.user-dropdown-item:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.user-dropdown-item-danger {
    color: var(--red);
}

.user-dropdown-item-danger:hover {
    background: var(--red-dim);
    color: var(--red);
}

/* Dropdown header (user name/email) */
.user-dropdown-header {
    padding: 8px 12px;
}

.user-dropdown-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.user-dropdown-email {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 1px;
}

.user-dropdown-sep {
    height: 1px;
    background: var(--border);
    margin: 4px 6px;
}

/* Sub-navigation (tabs below topnav) */
.subnav {
    display: flex;
    align-items: center;
    padding: 0 24px;
    height: 44px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
    gap: 0;
}

.subnav a {
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
}

.subnav a:hover {
    color: var(--text-primary);
}

.subnav a.active {
    color: var(--blue);
    border-bottom-color: var(--blue);
}

/* Canvas step bar — centered row of pill-shaped steps */
.canvas-step-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 16px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    overflow-x: auto;
}

.canvas-step-bar::-webkit-scrollbar {
    display: none;
}

.canvas-step {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    border: 1px solid var(--border);
    background: transparent;
}

.canvas-step:hover {
    color: var(--text-secondary);
    border-color: var(--border-light);
}

.canvas-step.active {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
    font-weight: 600;
}

.canvas-step__num {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    flex-shrink: 0;
}

.canvas-step.active .canvas-step__num {
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
}

/* ═══════════════════════════════════════════════════
   Left Sidebar
   ═══════════════════════════════════════════════════ */
.sidebar {
    position: fixed;
    left: 0;
    top: var(--topnav-height);
    bottom: 0;
    width: var(--sidebar-width-collapsed);
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: width 0.2s ease;
    z-index: 90;
    overflow: hidden;
    padding: 6px;
}

.sidebar.expanded {
    width: var(--sidebar-width-expanded);
}

.sidebar-top,
.sidebar-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sidebar-sep {
    width: calc(100% - 24px);
    height: 1px;
    background: var(--border);
    margin: 6px auto;
}

/* App-level nav items (Canvas, FinOps, Security, etc.) */
.sidebar-app-item {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    cursor: pointer;
    margin-bottom: 2px;
    transition: all 0.15s;
    border: 1px solid transparent;
    position: relative;
    text-decoration: none;
    color: var(--text-secondary);
}

.sidebar-app-item:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.sidebar-app-item.active {
    background: rgba(59, 130, 246, 0.06);
    border-color: rgba(59, 130, 246, 0.15);
}

.sidebar-app-item.active::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--blue);
    border-radius: 0 2px 2px 0;
}

.sidebar-app-item .sidebar-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.sidebar-app-item .sidebar-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-app-item.active .sidebar-label {
    color: var(--blue);
}

.sidebar-app-item:hover .sidebar-label {
    color: var(--text-primary);
}

/* Badge on sidebar items */
.sidebar-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 12px;
    height: 12px;
    border-radius: 6px;
    background: var(--red);
    color: white;
    font-size: 7px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

.sidebar-badge.warn {
    background: var(--orange);
}

.sidebar-badge.info {
    background: var(--blue);
}

/* Canvas group buttons (bottom section) */
.sidebar-group-item {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-bottom: 3px;
    transition: all 0.15s;
    border: 1px solid transparent;
    position: relative;
    text-decoration: none;
    color: var(--text-secondary);
}

.sidebar-group-item:hover {
    background: var(--bg-card-hover);
}

.sidebar-group-item.active {
    background: var(--blue-dim);
    border-color: rgba(59, 130, 246, 0.25);
}

.sidebar-group-item.active::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--blue);
    border-radius: 0 2px 2px 0;
}

.sidebar-group-item .sidebar-icon {
    font-size: 14px;
    margin-bottom: 1px;
}

.sidebar-group-item .sidebar-label {
    font-size: 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
}

.sidebar-group-item.active .sidebar-label {
    color: var(--blue);
}

/* Add group button (dashed) */
.sidebar-group-add {
    border-style: dashed;
    border-color: var(--border);
}

.sidebar-group-add:hover {
    border-color: var(--blue);
    color: var(--blue);
}

/* Disabled sidebar items (coming soon) */
.sidebar-app-item.sidebar-disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* Provider-colored sidebar icons */
.sidebar-provider-icon.sidebar-provider-aws {
    color: var(--aws);
}

.sidebar-provider-icon.sidebar-provider-azure {
    color: var(--azure);
}

/* ═══════════════════════════════════════════════════
   App Shell & Content Area
   ═══════════════════════════════════════════════════ */
.app-shell {
    display: flex;
    min-height: calc(100vh - var(--topnav-height));
}

.content-area {
    margin-left: var(--sidebar-width-collapsed);
    flex: 1;
    padding: 28px;
    transition: margin-left 0.2s ease;
}

.sidebar.expanded~.content-area {
    margin-left: var(--sidebar-width-expanded);
}

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

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

/* ═══════════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-sans);
    border-radius: var(--radius);
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.btn-green {
    background: var(--green);
    color: #0a0e1a;
}

.btn-green:hover {
    background: var(--green-dark);
    transform: translateY(-1px);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.btn-ghost:hover {
    color: var(--text-primary);
    border-color: var(--border-light);
    background: var(--bg-card);
}

.btn-danger {
    background: var(--red-dim);
    color: var(--red);
    border: 1px solid var(--red);
}

.btn-danger:hover {
    background: rgba(231, 76, 60, 0.2);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 11px;
}

/* ═══════════════════════════════════════════════════
   Form Inputs
   ═══════════════════════════════════════════════════ */
.input,
.form-input {
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 13px;
    font-family: var(--font-sans);
    outline: none;
    width: 100%;
    transition: border-color 0.2s;
}

.input:focus,
.form-input:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1);
}

.input::placeholder,
.form-input::placeholder {
    color: var(--text-muted);
}

select.input,
select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234d5f7a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

/* Module edit form — matches reference design system */
.mod-field {
    margin-bottom: 14px;
}

.mod-field--req .mod-field__label::after {
    content: ' *';
    color: #ef4444;
}

.mod-field__label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

.mod-input {
    width: 100%;
    padding: 8px 11px;
    background: var(--bg, #0a0e1a);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
    outline: none;
}

.mod-input:focus {
    border-color: var(--accent, #3b82f6);
}

.mod-input--mono {
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    font-size: 11px;
}

.mod-select {
    width: 100%;
    padding: 8px 11px;
    background: var(--bg, #0a0e1a);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
    outline: none;
}

.mod-textarea {
    width: 100%;
    padding: 8px 11px;
    background: var(--bg, #0a0e1a);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
    outline: none;
    resize: vertical;
    min-height: 60px;
    line-height: 1.5;
}

.mod-textarea:focus {
    border-color: var(--accent, #3b82f6);
}

.mod-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.mod-btn-primary {
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    background: var(--accent, #3b82f6);
    color: white;
}

.mod-btn-primary:hover {
    background: #2563eb;
}

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

.form-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Checkbox group */
.checkbox-group {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-primary, #eef1f6);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid var(--border, #1e2a3d);
    border-radius: 3px;
    background: var(--bg-input, #151b28);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.checkbox-label input[type="checkbox"]:checked {
    background: var(--f50-blue, #3b82f6);
    border-color: var(--f50-blue, #3b82f6);
}

.checkbox-label input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-label input[type="checkbox"]:focus {
    box-shadow: 0 0 0 3px var(--f50-blue-dim, rgba(59, 130, 246, 0.15));
}

textarea.input,
textarea.form-input {
    resize: vertical;
    min-height: 80px;
}

/* Toggle switch */
.toggle {
    width: 30px;
    height: 16px;
    background: var(--bg-input);
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: all 0.2s;
}

.toggle.on {
    background: var(--green);
    border-color: var(--green);
}

.toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    transition: left 0.2s;
}

.toggle.on::after {
    left: 16px;
}

/* ═══════════════════════════════════════════════════
   Cards
   ═══════════════════════════════════════════════════ */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: all 0.2s;
}

.card:hover {
    border-color: var(--border-light);
}

.card-clickable {
    cursor: pointer;
}

.card-clickable:hover {
    border-color: var(--blue);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

/* Card with colored top bar (environment cards) */
.card-topped {
    overflow: hidden;
    padding: 0;
}

.card-top-bar {
    height: 4px;
}

.card-top-bar.dev {
    background: var(--green);
}

.card-top-bar.acc {
    background: var(--orange);
}

.card-top-bar.prd {
    background: var(--red);
}

.card-top-bar.shared {
    background: var(--blue);
}

.card-body {
    padding: 18px;
}

.card-footer {
    padding: 14px 18px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-footer-meta {
    font-size: 10px;
    color: var(--text-muted);
}

/* Card grid layout */
.card-grid,
.reseller-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

/* ═══════════════════════════════════════════════════
   Entity Cards (Resellers, Customers, Projects)
   ═══════════════════════════════════════════════════ */
.entity-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 1200px) {
    .entity-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

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

.entity-card {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    cursor: pointer;
    transition: all 0.18s;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    animation: entityFadeUp 0.3s ease both;
}

.entity-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent-color, transparent);
    border-radius: 10px 0 0 10px;
    opacity: 0;
    transition: opacity 0.18s;
}

.entity-card:hover {
    background: var(--bg-card-hover);
    border-color: rgba(59, 130, 246, 0.35);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    color: inherit;
}

.entity-card:hover::before {
    opacity: 1;
}

/* Stagger animation */
.entity-card:nth-child(1) {
    animation-delay: 0.04s;
}

.entity-card:nth-child(2) {
    animation-delay: 0.07s;
}

.entity-card:nth-child(3) {
    animation-delay: 0.10s;
}

.entity-card:nth-child(4) {
    animation-delay: 0.13s;
}

.entity-card:nth-child(5) {
    animation-delay: 0.16s;
}

.entity-card:nth-child(6) {
    animation-delay: 0.19s;
}

.entity-card:nth-child(7) {
    animation-delay: 0.22s;
}

.entity-card:nth-child(8) {
    animation-delay: 0.25s;
}

@keyframes entityFadeUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

.entity-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}

.entity-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.entity-card-badges {
    display: flex;
    gap: 4px;
}

.entity-badge {
    font-size: 10px;
    font-weight: 600;
    font-family: var(--font-mono);
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.04em;
}

.entity-badge-active {
    background: rgba(86, 212, 144, 0.12);
    color: #56d490;
}

.entity-badge-inactive {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
}

.entity-badge-region {
    background: rgba(246, 173, 85, 0.12);
    color: #f6ad55;
}

.entity-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 3px;
    line-height: 1.3;
}

.entity-card-meta {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.entity-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.entity-card-stat {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-muted);
}

.entity-card-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.entity-card-arrow {
    color: var(--text-muted);
    font-size: 14px;
    transition: all 0.15s;
    opacity: 0;
}

.entity-card:hover .entity-card-arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* Add card variant */
.entity-card-add {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.08);
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 120px;
    color: var(--text-muted);
    font-size: 13px;
}

.entity-card-add::before {
    display: none;
}

.entity-card-add:hover {
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--blue);
    background: rgba(59, 130, 246, 0.04);
    transform: none;
    box-shadow: none;
}

.entity-add-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px dashed currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
}

/* Page header for entity pages */
.page-title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

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

/* Add card (dashed border) */
.card-add {
    border-style: dashed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-muted);
    cursor: pointer;
}

.card-add:hover {
    color: var(--blue);
    border-color: var(--blue);
}

.card-add .plus {
    font-size: 28px;
    margin-bottom: 8px;
    opacity: 0.4;
}

.card-add span {
    font-size: 13px;
    font-weight: 500;
}

/* Gradient top bar on hover (project cards) */
.card-gradient-hover {
    position: relative;
    overflow: hidden;
}

.card-gradient-hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
    opacity: 0;
    transition: opacity 0.2s;
}

.card-gradient-hover:hover::before {
    opacity: 1;
}

/* Card inner elements */
.card-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}

.card-title {
    font-size: 15px;
    font-weight: 700;
}

.card-meta {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════
   Page Header
   ═══════════════════════════════════════════════════ */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
}

.page-header h2 {
    font-size: 14px;
    font-weight: 600;
}

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

/* ═══════════════════════════════════════════════════
   Section Header
   ═══════════════════════════════════════════════════ */
.section-header {
    margin-bottom: 16px;
}

.section-header h3 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════
   Detail Grid (show pages)
   ═══════════════════════════════════════════════════ */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

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

.detail-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value {
    font-size: 13px;
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════
   Form Actions
   ═══════════════════════════════════════════════════ */
.form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
}

.form-card {
    max-width: 560px;
}

/* ═══════════════════════════════════════════════════
   Tags / Badges / Pills
   ═══════════════════════════════════════════════════ */
.tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    font-size: 9px;
    font-weight: 600;
    border-radius: 5px;
}

.tag-green {
    background: var(--green-dim);
    color: var(--green);
}

.tag-blue {
    background: var(--blue-dim);
    color: var(--blue);
}

.tag-red {
    background: var(--red-dim);
    color: var(--red);
}

.tag-orange {
    background: var(--orange-dim);
    color: var(--orange);
}

.tag-purple {
    background: var(--purple-dim);
    color: var(--purple);
}

.tag-aws {
    background: var(--aws-dim);
    color: var(--aws);
}

.tag-azure {
    background: var(--azure-dim);
    color: var(--azure);
}

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

.badge-dev {
    background: var(--green-dim);
    color: var(--green);
}

.badge-acc {
    background: var(--orange-dim);
    color: var(--orange);
}

.badge-prd {
    background: var(--red-dim);
    color: var(--red);
}

.badge-active {
    background: var(--green-dim);
    color: var(--green);
}

.badge-inactive {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
}

/* Status dot */
.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.dot-sm {
    width: 6px;
    height: 6px;
}

.dot-green {
    background: var(--green);
}

.dot-blue {
    background: var(--blue);
}

.dot-red {
    background: var(--red);
}

.dot-orange {
    background: var(--orange);
}

.dot-muted {
    background: var(--text-muted);
}

/* ═══════════════════════════════════════════════════
   Flash Messages
   ═══════════════════════════════════════════════════ */
.flash {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-left: 3px solid;
    font-size: 13px;
    animation: flash-slide-down 0.2s ease;
}

.flash-success,
.flash-notice {
    border-color: var(--green);
    background: var(--green-dim);
}

.flash-error,
.flash-alert {
    border-color: var(--red);
    background: var(--red-dim);
}

.flash-warning {
    border-color: var(--orange);
    background: var(--orange-dim);
}

.flash-info {
    border-color: var(--blue);
    background: var(--blue-dim);
}

.flash-dismiss {
    margin-left: auto;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 16px;
    background: none;
    border: none;
    padding: 0;
}

.flash-dismiss:hover {
    color: var(--text-primary);
}

@keyframes flash-slide-down {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

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

/* ═══════════════════════════════════════════════════
   Empty State
   ═══════════════════════════════════════════════════ */
.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state .empty-icon {
    font-size: 48px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.empty-state h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

/* ═══════════════════════════════════════════════════
   Login Screen
   ═══════════════════════════════════════════════════ */
.login-screen {
    min-height: 100vh;
    background: var(--bg-body);
    position: relative;
    overflow: hidden;
    display: flex;
}

.login-bg {
    position: absolute;
    inset: 0;
}

.login-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(59, 130, 246, 0.06) 0%, transparent 60%);
}

.login-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 80%, rgba(34, 211, 238, 0.04) 0%, transparent 50%);
}

/* Geometric pattern on right side */
.login-pattern {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 55%;
    overflow: hidden;
}

.login-pattern::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(59, 130, 246, 0.03) 40px, rgba(59, 130, 246, 0.03) 41px),
        repeating-linear-gradient(-45deg, transparent, transparent 40px, rgba(59, 130, 246, 0.02) 40px, rgba(59, 130, 246, 0.02) 41px);
}

.login-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.08), transparent 70%);
    top: 20%;
    right: 10%;
    animation: login-glow-drift 8s ease-in-out infinite;
}

@keyframes login-glow-drift {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-20px, 30px);
    }
}

.login-content {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45%;
    min-height: 100vh;
    padding: 40px;
}

.login-card {
    width: 100%;
    max-width: 400px;
}

.login-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
}

.login-logo-mark {
    display: flex;
    gap: 2px;
    align-items: flex-end;
}

.login-logo-mark span {
    width: 3px;
    background: #2ecc71;
    border-radius: 2px;
}

.login-logo-mark span:nth-child(1) {
    height: 8px;
}

.login-logo-mark span:nth-child(2) {
    height: 11px;
}

.login-logo-mark span:nth-child(3) {
    height: 14px;
}

.login-logo-mark span:nth-child(4) {
    height: 17px;
}

.login-logo-mark span:nth-child(5) {
    height: 20px;
}

.login-logo-mark span:nth-child(6) {
    height: 23px;
}

.login-logo-mark span:nth-child(7) {
    height: 26px;
}

.login-logo-mark span:nth-child(8) {
    height: 30px;
}

.login-logo-text {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.login-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 32px;
}

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

.login-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.login-input {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-input);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 14px;
    font-family: var(--font-sans);
    outline: none;
    transition: all 0.2s;
}

.login-input:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1);
}

.login-btn {
    width: 100%;
    padding: 14px;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-sans);
    background: var(--green);
    color: white;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    margin-top: 8px;
    transition: all 0.2s;
    letter-spacing: 0.5px;
}

.login-btn:hover {
    background: var(--green-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
}

.login-forgot {
    font-size: 12px;
    color: var(--green);
    display: block;
    margin-top: 12px;
    text-align: center;
}

.login-sso {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    text-align: center;
}

.login-sso p {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.login-sso-btn {
    width: 100%;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.login-sso-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-light);
}

/* Right side hero content */
.login-right-content {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px;
    z-index: 10;
}

.login-hero-text {
    text-align: center;
    max-width: 480px;
}

.login-hero-text h2 {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
    background: linear-gradient(135deg, var(--text-primary) 30%, var(--green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.login-hero-text p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.login-stats {
    display: flex;
    gap: 40px;
    margin-top: 40px;
}

.login-stat {
    text-align: center;
}

.login-stat .num {
    font-size: 28px;
    font-weight: 800;
    color: var(--green);
}

.login-stat .label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════
   Customer / Project Select Screen
   ═══════════════════════════════════════════════════ */
.reseller-picker {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.select-body {
    display: flex;
    gap: 32px;
    height: calc(100vh - var(--topnav-height) - 120px);
    min-height: 400px;
}

.select-customers {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.select-customers h3,
.select-projects h3 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 12px;
    flex-shrink: 0;
}

.select-customers-list {
    flex: 1;
    overflow-y: auto;
    margin-right: -4px;
    padding-right: 4px;
}

.select-projects {
    flex: 1;
    overflow-y: auto;
}

/* Customer list item */
.customer-item {
    display: block;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.customer-item:hover {
    border-color: var(--border-light);
    background: var(--bg-card-hover);
}

.customer-item.active {
    border-color: var(--green);
    background: var(--green-dim);
}

.customer-item .ci-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.customer-item .ci-meta {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Project card */
.project-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.project-card:hover {
    border-color: var(--green);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--green), var(--cyan));
    opacity: 0;
    transition: opacity 0.2s;
}

.project-card:hover::before {
    opacity: 1;
}

.pc-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}

.pc-name {
    font-size: 16px;
    font-weight: 700;
}

.pc-cloud {
    display: flex;
    gap: 4px;
}

.pc-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.5;
}

.pc-envs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.pc-env {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--bg-input);
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
}

.pc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.pc-footer-meta {
    font-size: 10px;
    color: var(--text-muted);
}

.pc-enter {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    background: var(--green);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-sans);
}

.pc-enter:hover {
    background: var(--green-dark);
}

/* Project grid */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}

/* Add project card (dashed) */
.project-card-add {
    border-style: dashed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-muted);
}

.project-card-add:hover {
    color: var(--green);
    border-color: var(--green);
}

.project-card-add .plus {
    font-size: 28px;
    margin-bottom: 8px;
    opacity: 0.4;
}

.project-card-add span {
    font-size: 13px;
    font-weight: 500;
}

/* Add customer item (dashed) */
.customer-item-add {
    border-style: dashed;
    color: var(--text-muted);
    text-align: center;
    font-size: 12px;
    display: block;
}

.customer-item-add:hover {
    color: var(--green);
    border-color: var(--green);
}

/* ═══════════════════════════════════════════════════
   Environment Cards
   ═══════════════════════════════════════════════════ */
.env-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.2s;
    cursor: pointer;
}

.env-card:hover {
    border-color: var(--green);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

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

.ecb-name {
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ecb-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
}

.ecb-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.ecb-meta-item {
    font-size: 11px;
    color: var(--text-secondary);
}

.ecb-meta-item strong {
    color: var(--text-primary);
    font-weight: 600;
    display: block;
    margin-bottom: 1px;
}

.ecb-resources {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.ecb-res {
    padding: 3px 8px;
    font-size: 9px;
    font-weight: 600;
    background: var(--bg-input);
    border-radius: 4px;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════
   Canvas Area
   ═══════════════════════════════════════════════════ */
.canvas-body {
    flex: 1;
    display: grid;
    grid-template-columns: 256px 1fr 290px;
    height: calc(100vh - 96px);
}

/* Resource catalog sidebar */
.catalog {
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

.catalog-head {
    padding: 14px;
    border-bottom: 1px solid var(--border);
}

.catalog-head h4 {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.catalog-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

/* Cloud filter pills */
.cloud-pills {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}

.cloud-pill {
    padding: 3px 9px;
    font-size: 9px;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: transparent;
    font-family: var(--font-sans);
}

.cloud-pill.on-aws {
    background: rgba(255, 153, 0, 0.12);
    border-color: rgba(255, 153, 0, 0.3);
    color: var(--aws);
}

.cloud-pill.on-azure {
    background: rgba(0, 120, 212, 0.12);
    border-color: rgba(0, 120, 212, 0.3);
    color: var(--azure);
}

/* Catalog list items */
.cl-cat {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    padding: 8px 8px 4px;
}

.cl-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 7px;
    cursor: grab;
    transition: background 0.1s;
    margin-bottom: 1px;
}

.cl-item:hover {
    background: var(--bg-card-hover);
}

.cl-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    flex-shrink: 0;
}

.cl-name {
    font-size: 11px;
    font-weight: 600;
}

.cl-sub {
    font-size: 8px;
    color: var(--text-muted);
}

/* Canvas center area */
.canvas-center {
    position: relative;
    overflow: hidden;
    background: var(--bg-body);
}

.canvas-grid-bg {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(30, 42, 61, 0.5) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.3;
}

/* Group tabs bar */
.group-tabs {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 38px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 10px;
    z-index: 20;
    gap: 2px;
}

.gt-tab {
    padding: 6px 14px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s;
    border: 1px solid transparent;
    border-bottom: none;
    position: relative;
}

.gt-tab:hover {
    color: var(--text-primary);
    background: var(--bg-card);
}

.gt-tab.active {
    color: var(--green);
    background: var(--bg-body);
    border-color: var(--border);
    border-bottom: 1px solid var(--bg-body);
}

.gt-count {
    background: var(--bg-input);
    padding: 1px 5px;
    border-radius: 8px;
    font-size: 8px;
    color: var(--text-muted);
}

.gt-tab.active .gt-count {
    background: var(--green-dim);
    color: var(--green);
}

.gt-add {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 14px;
    border: 1px dashed var(--border);
}

.gt-add:hover {
    color: var(--green);
    border-color: var(--green);
}

/* ═══════════════════════════════════════════════════
   Global Tags — Page-level styles
   ═══════════════════════════════════════════════════ */

/* Scope bar */
.gt-scope-bar {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.gt-scope-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    flex-shrink: 0;
}

.gt-scope-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
}

.gt-scope-pill--platform {
    background: var(--green-dim);
    border: 1px solid rgba(74, 222, 128, 0.2);
    color: var(--green);
}

.gt-scope-pill--scoped {
    background: var(--blue-dim);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: var(--blue);
}

.gt-scope-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 4px currentColor;
}

/* Table card */
.gt-table-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}

.gt-table-card table {
    width: 100%;
    border-collapse: collapse;
}

.gt-table-card thead tr {
    border-bottom: 1px solid var(--border);
}

.gt-table-card thead th {
    padding: 10px 16px;
    text-align: left;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.gt-table-card thead th:first-child {
    padding-left: 20px;
}

.gt-table-card thead th:last-child {
    padding-right: 20px;
    text-align: right;
}

.gt-table-card tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.12s;
}

.gt-table-card tbody tr:last-child {
    border-bottom: none;
}

.gt-table-card tbody tr:hover {
    background: var(--bg-card-hover);
}

.gt-table-card tbody td {
    padding: 12px 16px;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    vertical-align: middle;
}

.gt-table-card tbody td:first-child {
    padding-left: 20px;
    color: var(--text-primary);
    font-weight: 500;
}

.gt-table-card tbody td:last-child {
    padding-right: 20px;
    text-align: right;
}

.gt-table-card tbody td .mono {
    font-family: var(--font-mono);
    font-size: 12px;
}

/* Row actions — reveal on hover */
.gt-row-actions {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 0.12s;
}

.gt-table-card tbody tr:hover .gt-row-actions {
    opacity: 1;
}

.gt-row-btn {
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
    transition: color 0.12s, border-color 0.12s, background 0.12s;
    font-family: var(--font-sans);
}

.gt-row-btn:hover {
    color: var(--green);
    border-color: rgba(74, 222, 128, 0.3);
    background: var(--green-dim);
}

.gt-row-btn--danger:hover {
    color: var(--red);
    border-color: rgba(239, 68, 68, 0.3);
    background: var(--red-dim);
}

/* Status badge */
.gt-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
}

.gt-status-active {
    background: rgba(74, 222, 128, 0.1);
    color: var(--green);
    border: 1px solid rgba(74, 222, 128, 0.2);
}

.gt-status-disabled {
    background: rgba(122, 138, 170, 0.08);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.gt-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 4px currentColor;
}

/* Form panel */
.gt-form-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.gt-form-panel-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.gt-form-panel-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--green-dim);
    border: 1px solid rgba(74, 222, 128, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gt-form-panel-icon svg {
    width: 13px;
    height: 13px;
    color: var(--green);
}

.gt-form-panel-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
}

.gt-form-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gt-form-row {
    display: grid;
    gap: 14px;
}

.gt-form-row--halves {
    grid-template-columns: 1fr 1fr;
}

.gt-form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.gt-form-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.gt-form-label .req {
    color: var(--red);
}

.gt-form-input {
    padding: 9px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    width: 100%;
}

.gt-form-input::placeholder {
    color: var(--text-muted);
}

.gt-form-input:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px var(--green-dim);
}

.gt-form-input--mono {
    font-family: var(--font-mono);
    font-size: 12px;
}

.gt-form-input--mono::placeholder {
    font-family: var(--font-mono);
    font-size: 12px;
}

.gt-form-textarea {
    padding: 9px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    width: 100%;
    resize: vertical;
    min-height: 72px;
}

.gt-form-textarea::placeholder {
    color: var(--text-muted);
}

.gt-form-textarea:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px var(--green-dim);
}

.gt-form-select {
    padding: 9px 30px 9px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    appearance: none;
    outline: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6a8a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 0.15s;
    width: 100%;
}

.gt-form-select:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px var(--green-dim);
}

/* Inherited tags */
.gt-inherited-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 16px;
}

.gt-inherited-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
}

.gt-inherited-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
}

.gt-inherited-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.gt-inherited-body {
    padding: 20px;
}

.gt-inherited-level-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.gt-inherited-group {
    margin-bottom: 16px;
}

.gt-inherited-group:last-child {
    margin-bottom: 0;
}

.gt-inherited-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gt-inherited-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius);
    background: var(--bg-input);
    border: 1px solid var(--border);
    font-size: 11px;
}

.gt-inherited-tag--overridden {
    opacity: 0.4;
    text-decoration: line-through;
}

.gt-inherited-tag code {
    font-family: var(--font-mono);
}

.gt-inherited-tag .overridden-label {
    font-size: 9px;
    color: var(--orange);
    font-weight: 600;
}

.gt-inherited-tag .disabled-label {
    font-size: 9px;
    color: var(--red);
    font-weight: 600;
}

/* Page header stat */
.gt-header-stat {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
}

.gt-header-stat span {
    color: var(--green);
}

/* Empty state for tags table */
.gt-empty {
    padding: 40px 20px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}

/* Environment switcher bar */
.env-bar {
    display: flex;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.eb-tab {
    padding: 5px 12px;
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    border-right: 1px solid var(--border);
}

.eb-tab:last-child {
    border-right: none;
}

.eb-tab.active {
    color: var(--red);
    background: rgba(231, 76, 60, 0.05);
}

/* Canvas toolbar */
.canvas-toolbar {
    display: flex;
    gap: 3px;
}

.ct-btn {
    width: 30px;
    height: 30px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.ct-btn:hover {
    color: var(--text-primary);
    background: var(--bg-card-hover);
}

/* Subnet zones */
.zone {
    position: absolute;
    border: 2px dashed;
    border-radius: var(--radius-lg);
}

.zone-label {
    position: absolute;
    top: -9px;
    left: 12px;
    background: var(--bg-body);
    padding: 0 7px;
    font-size: 8px;
    font-weight: 700;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.zone.pub {
    border-color: rgba(59, 130, 246, 0.2);
    background: rgba(59, 130, 246, 0.012);
}

.zone.pub .zone-label {
    color: var(--green);
}

.zone.prv {
    border-color: rgba(52, 152, 219, 0.2);
    background: rgba(52, 152, 219, 0.012);
}

.zone.prv .zone-label {
    color: var(--blue);
}

/* Resource blocks on canvas */
.rb {
    position: absolute;
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transition: all 0.15s;
    z-index: 10;
}

.rb:hover {
    border-color: var(--green);
    box-shadow: 0 0 0 1px var(--green), 0 4px 16px rgba(0, 0, 0, 0.3);
}

.rb.selected {
    border-color: var(--green);
    box-shadow: 0 0 0 2px var(--green);
}

.rb-icon {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    flex-shrink: 0;
}

.rb-name {
    font-size: 11px;
    font-weight: 600;
}

.rb-type {
    font-size: 8px;
    color: var(--text-muted);
}

/* Ghost resource blocks (cross-group references) */
.rb-ghost {
    opacity: 0.35;
    border-style: dashed;
}

.rb-ghost:hover {
    opacity: 0.7;
}

/* Resource block badges */
.rb-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
    font-weight: 800;
    color: white;
}

.rb-xref {
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--purple);
    color: white;
    font-size: 6px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 6px;
    white-space: nowrap;
}

/* Ghost connection badges */
.ghost-badge {
    position: absolute;
    background: var(--purple);
    color: white;
    font-size: 7px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
    white-space: nowrap;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.ghost-badge:hover {
    opacity: 1;
}

/* Zoom controls */
.zoom-ctrl {
    display: flex;
    gap: 3px;
}

.zc-btn {
    width: 30px;
    height: 30px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    font-family: var(--font-sans);
}

.zc-btn:hover {
    color: var(--text-primary);
    background: var(--bg-card);
}

.zoom-level {
    padding: 4px 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    display: flex;
    align-items: center;
}

/* Minimap */
.minimap {
    width: 180px;
    height: 120px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    padding: 6px;
}

.mm-label {
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.mm-canvas {
    width: 100%;
    height: calc(100% - 12px);
    background: var(--bg-body);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.mm-viewport {
    position: absolute;
    border: 1.5px solid var(--green);
    border-radius: 2px;
    background: rgba(59, 130, 246, 0.05);
    cursor: move;
}

/* ═══════════════════════════════════════════════════
   Right Panel (Properties / Validation)
   ═══════════════════════════════════════════════════ */
.rpanel {
    background: var(--bg-surface);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rp-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.rp-tab {
    flex: 1;
    padding: 10px;
    font-size: 9px;
    font-weight: 700;
    text-align: center;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: var(--font-sans);
}

.rp-tab.active {
    color: var(--green);
    border-bottom-color: var(--green);
}

.rp-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
}

.rp-section {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin: 14px 0 6px;
}

.rp-section:first-child {
    margin-top: 0;
}

.rp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid rgba(30, 42, 61, 0.5);
    font-size: 11px;
}

.rp-row .rl {
    color: var(--text-secondary);
}

.rp-row .rv {
    font-family: var(--font-mono);
    font-size: 10px;
    background: var(--bg-input);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--text-primary);
}

/* Group info card (right panel) */
.group-info {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
}

.gi-title {
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.gi-desc {
    font-size: 10px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 8px;
}

.gi-stat {
    display: flex;
    gap: 12px;
}

.gi-stat-item {
    font-size: 10px;
    color: var(--text-muted);
}

.gi-stat-item strong {
    color: var(--text-primary);
    display: block;
    font-size: 14px;
}

/* Resource list items (right panel) */
.res-list-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 6px;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 1px;
    transition: background 0.1s;
}

.res-list-item:hover {
    background: var(--bg-card-hover);
}

.res-list-item.active {
    background: var(--green-dim);
}

.rli-icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
    font-weight: 700;
    flex-shrink: 0;
}

.rli-name {
    font-size: 10px;
    font-weight: 600;
    flex: 1;
}

.rli-type {
    font-size: 8px;
    color: var(--text-muted);
}

.rli-ghost {
    font-size: 7px;
    color: var(--purple);
    font-weight: 600;
}

/* Validation items */
.vi {
    display: flex;
    gap: 6px;
    padding: 7px 8px;
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 10px;
    line-height: 1.4;
}

.vi.err {
    background: rgba(231, 76, 60, 0.05);
    border-left: 2px solid var(--red);
}

.vi.wrn {
    background: rgba(243, 156, 18, 0.05);
    border-left: 2px solid var(--orange);
}

.vi.ok {
    background: rgba(59, 130, 246, 0.05);
    border-left: 2px solid var(--green);
}

.vi-icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
    font-weight: 800;
    flex-shrink: 0;
    color: white;
    margin-top: 1px;
}

.vi.err .vi-icon {
    background: var(--red);
}

.vi.wrn .vi-icon {
    background: var(--orange);
}

.vi.ok .vi-icon {
    background: var(--green);
}

.vi strong {
    display: block;
    font-size: 10px;
    margin-bottom: 1px;
}

.vi span {
    color: var(--text-secondary);
    font-size: 9px;
}

/* ═══════════════════════════════════════════════════
   Settings / Credentials Screen
   ═══════════════════════════════════════════════════ */
.settings-body {
    flex: 1;
    display: grid;
    grid-template-columns: 220px 1fr;
}

.settings-nav {
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    padding: 16px;
}

.sn-title {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin: 12px 0 6px;
}

.sn-title:first-child {
    margin-top: 0;
}

.sn-item {
    padding: 7px 10px;
    font-size: 12px;
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 1px;
}

.sn-item:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.sn-item.active {
    background: var(--green-dim);
    color: var(--green);
}

.settings-main {
    padding: 28px;
    overflow-y: auto;
}

.settings-main h2 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.settings-main .subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

/* Credential cards */
.cred-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px;
    margin-bottom: 10px;
}

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

.cred-header h4 {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cred-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(30, 42, 61, 0.4);
    font-size: 12px;
}

.cred-row .cl {
    color: var(--text-secondary);
}

.cred-row .cv {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════
   Wizard Steps (Onboarding)
   ═══════════════════════════════════════════════════ */
.wizard-steps {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
}

.wizard-step {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
}

.wizard-step.active {
    border-color: var(--green);
    color: var(--green);
    background: var(--green-dim);
}

.wizard-step.completed {
    border-color: var(--green);
    color: var(--green);
    opacity: 0.6;
}

.wizard-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
}

/* Code block (trust policy display) */
.code-block {
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
    overflow-x: auto;
    position: relative;
    white-space: pre;
    line-height: 1.5;
}

.code-block .copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    font-size: 9px;
    font-weight: 600;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--font-sans);
}

.code-block .copy-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-light);
}

/* ═══════════════════════════════════════════════════
   Tables
   ═══════════════════════════════════════════════════ */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table th {
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}

.table td {
    padding: 10px 12px;
    font-size: 13px;
    border-bottom: 1px solid rgba(30, 42, 61, 0.4);
    color: var(--text-secondary);
}

.table tr:hover td {
    background: var(--bg-card-hover);
}

/* ═══════════════════════════════════════════════════
   Monospace / Utility
   ═══════════════════════════════════════════════════ */
.mono {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
}

.text-green {
    color: var(--green);
}

.text-blue {
    color: var(--blue);
}

.text-red {
    color: var(--red);
}

.text-orange {
    color: var(--orange);
}

.text-muted {
    color: var(--text-muted);
}

.bg-green-dim {
    background: var(--green-dim);
}

.bg-blue-dim {
    background: var(--blue-dim);
}

.bg-red-dim {
    background: var(--red-dim);
}

.bg-orange-dim {
    background: var(--orange-dim);
}

/* ═══════════════════════════════════════════════════
   Guide / Callout
   ═══════════════════════════════════════════════════ */
.guide {
    background: var(--green);
    color: white;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 10px;
    line-height: 1.4;
    max-width: 200px;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.25);
}

.guide strong {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
}

/* Alert / Banner */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.alert-warning {
    background: var(--orange-dim);
    border: 1px solid rgba(243, 156, 18, 0.3);
    color: var(--orange);
}

.alert-error {
    background: var(--red-dim);
    border: 1px solid rgba(231, 76, 60, 0.3);
    color: var(--red);
}

.alert-info {
    background: var(--blue-dim);
    border: 1px solid rgba(52, 152, 219, 0.3);
    color: var(--blue);
}

.alert-success {
    background: var(--green-dim);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--green);
}

/* ═══════════════════════════════════════════════════
   403 Error Page
   ═══════════════════════════════════════════════════ */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg-body);
    text-align: center;
    padding: 40px;
}

.error-page .error-code {
    font-size: 72px;
    font-weight: 800;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.error-page h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
}

.error-page p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

/* ═══════════════════════════════════════════════════
   Command Palette Trigger
   ═══════════════════════════════════════════════════ */
.cmd-trigger {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 5px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.cmd-trigger:hover {
    border-color: var(--border-light);
    color: var(--text-primary);
}

.cmd-trigger kbd {
    background: var(--bg-input);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 9px;
    font-family: var(--font-mono);
    border: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════
   Login — SSO Primary & Alert
   ═══════════════════════════════════════════════════ */
.login-sso-primary {
    margin-top: 8px;
}

.login-sso-primary .login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    color: white;
}

.login-sso-divider {
    margin-top: 24px;
    text-align: center;
}

.login-sso-divider span {
    font-size: 11px;
    color: var(--text-muted);
}

.login-alert {
    padding: 10px 14px;
    background: var(--red-dim);
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: var(--radius);
    color: var(--red);
    font-size: 13px;
    margin-bottom: 20px;
}

/* ═══════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .login-content {
        width: 100%;
    }

    .login-pattern,
    .login-right-content {
        display: none;
    }

    .canvas-body {
        grid-template-columns: 1fr;
    }

    .catalog,
    .rpanel {
        display: none;
    }

    .settings-body {
        grid-template-columns: 1fr;
    }

    .settings-nav {
        display: none;
    }

    .select-body {
        flex-direction: column;
    }

    .select-customers {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .sidebar {
        display: none;
    }

    .content-area {
        margin-left: 0;
    }
}

/* ═══════════════════════════════════════════════════
   Modal
   ═══════════════════════════════════════════════════ */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
}

.modal-overlay.open {
    display: flex;
}

.modal-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 520px;
    box-shadow: var(--shadow);
    animation: modal-enter 0.15s ease;
}

@keyframes modal-enter {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.97);
    }

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

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

.modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--green);
}

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

.modal-close:hover {
    color: var(--text-primary);
}

.modal-body {
    padding: 20px 24px;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--border);
}


/* ═══════════════════════════════════════════════════
   Sidebar section headings (CLOUD, PLATFORM, SETTINGS)
   ═══════════════════════════════════════════════════ */
.sidebar-section-title {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    padding: 10px 12px 4px;
}


/* ═══════════════════════════════════════════════════
   Module Registry
   ═══════════════════════════════════════════════════ */

/* Page header — compact canvas style */
.page-header {
    margin-bottom: 14px;
}

.page-header__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 0;
}

.page-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    letter-spacing: 0.2px;
}

.page-subtitle {
    font-size: 11px;
    color: var(--text-muted);
    margin: 2px 0 0;
}

/* Filter bar */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.filter-pills {
    display: flex;
    gap: 4px;
}

.pill {
    padding: 3px 8px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.pill:hover {
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.pill.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.pill--aws.active {
    background: rgba(255, 153, 0, 0.15);
    border-color: #ff9900;
    color: #ff9900;
}

.pill--azure.active {
    background: rgba(0, 120, 212, 0.15);
    border-color: #0078d4;
    color: #0078d4;
}

.filter-controls {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.filter-controls .f50-select,
.filter-controls .f50-input {
    padding: 5px 10px;
    font-size: 11px;
    border-radius: var(--radius);
}

/* Module grid */
.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}

.module-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.module-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.module-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.module-card__icon {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg);
    padding: 3px 6px;
    border-radius: 5px;
}

.module-card__body {
    flex: 1;
}

.module-card__name {
    font-size: 12px;
    font-weight: 600;
    margin: 0 0 2px;
}

.module-card__desc {
    font-size: 10px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.module-card__footer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 9px;
    color: var(--text-muted);
}

.module-card__engine {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 600;
    margin-left: auto;
}

.module-card__canvas-only {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 600;
    margin-left: auto;
}

/* Cloud badges */
.cloud-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    letter-spacing: 0.5px;
}

.cloud-badge--aws {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.cloud-badge--azure {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.cloud-badge--gcp {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.cloud-badge--multi {
    background: rgba(168, 85, 247, 0.2);
    color: #a855f7;
}

.cloud-badge--lg {
    font-size: 12px;
    padding: 4px 12px;
}

/* ═══════════════════════════════════════════════════
   Module Registry — Table Design
   ═══════════════════════════════════════════════════ */

/* Toolbar */
.mod-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.mod-search-wrap {
    position: relative;
    flex: 1;
    max-width: 300px;
}

.mod-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.mod-search-input {
    width: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 7px 12px 7px 34px;
    font-size: 13px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    outline: none;
    transition: border-color 0.15s;
}

.mod-search-input::placeholder {
    color: var(--text-muted);
}

.mod-search-input:focus {
    border-color: rgba(59, 130, 246, 0.35);
}

.mod-filter-select {
    appearance: none;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 7px 32px 7px 12px;
    font-size: 13px;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    outline: none;
    cursor: pointer;
    transition: all 0.15s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234d5f7a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.mod-filter-select:hover,
.mod-filter-select:focus {
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

.mod-count-badge {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
}

/* Table wrapper */
.mod-table-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

/* Panel (used in edit page) */
.mod-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.mod-tbl {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Module registry column widths */
.mod-tbl--registry col:nth-child(1) {
    width: 20%;
}

.mod-tbl--registry col:nth-child(2) {
    width: 10%;
}

.mod-tbl--registry col:nth-child(3) {
    width: 12%;
}

.mod-tbl--registry col:nth-child(4) {
    width: 14%;
}

.mod-tbl--registry col:nth-child(5) {
    width: 18%;
}

.mod-tbl--registry col:nth-child(6) {
    width: 10%;
}

.mod-tbl--registry col:nth-child(7) {
    width: 8%;
}

.mod-tbl--registry col:nth-child(8) {
    width: 8%;
}

.mod-tbl thead tr {
    border-bottom: 1px solid var(--border);
}

.mod-tbl th {
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.mod-tbl th:last-child {
    text-align: right;
}

.mod-tbl__row {
    border-bottom: 1px solid var(--border);
    transition: background 0.15s, border-left-color 0.15s;
    animation: modFadeUp 0.3s ease both;
    cursor: pointer;
}

.mod-tbl__row:last-child {
    border-bottom: none;
}

.mod-tbl__row:hover {
    background: var(--bg-card-hover);
}

/* Left accent bar on hover */
.mod-tbl__row {
    border-left: 3px solid transparent;
}

.mod-tbl__row:hover {
    border-left: 3px solid var(--blue);
}

/* Stagger animation */
.mod-tbl__row:nth-child(1) {
    animation-delay: 0.05s;
}

.mod-tbl__row:nth-child(2) {
    animation-delay: 0.09s;
}

.mod-tbl__row:nth-child(3) {
    animation-delay: 0.13s;
}

.mod-tbl__row:nth-child(4) {
    animation-delay: 0.17s;
}

.mod-tbl__row:nth-child(5) {
    animation-delay: 0.21s;
}

.mod-tbl__row:nth-child(6) {
    animation-delay: 0.25s;
}

.mod-tbl__row:nth-child(7) {
    animation-delay: 0.29s;
}

.mod-tbl__row:nth-child(8) {
    animation-delay: 0.33s;
}

@keyframes modFadeUp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

.mod-tbl td {
    padding: 12px 16px;
    vertical-align: middle;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Module cell (icon + name) */
.mod-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mod-cell-name {
    font-weight: 500;
    font-size: 13px;
    color: var(--text-primary);
}

/* Icon badge — 32x32 colored square */
.mod-icon {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono);
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.mod-icon--compute {
    background: rgba(34, 211, 238, 0.12);
    color: #22d3ee;
}

.mod-icon--database {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.mod-icon--storage {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.mod-icon--networking {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}

.mod-icon--security {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.mod-icon--monitoring {
    background: rgba(34, 211, 238, 0.12);
    color: #22d3ee;
}

.mod-icon--other {
    background: rgba(139, 153, 181, 0.12);
    color: #8b99b5;
}

/* Cloud badge */
.mod-cloud-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}

.mod-cloud-aws {
    background: rgba(255, 153, 0, 0.15);
    color: var(--aws);
    border: 1px solid rgba(255, 153, 0, 0.2);
}

.mod-cloud-azure {
    background: rgba(0, 120, 212, 0.12);
    color: var(--azure);
    border: 1px solid rgba(0, 120, 212, 0.2);
}

.mod-cloud-gcp {
    background: rgba(239, 68, 68, 0.12);
    color: var(--red);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Category */
.mod-category-text {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Renderer badge */
.mod-renderer-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 500;
    font-family: var(--font-mono);
}

.mod-renderer-tofu {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.mod-renderer-cf {
    background: rgba(255, 153, 0, 0.12);
    color: var(--aws);
    border: 1px solid rgba(255, 153, 0, 0.2);
}

.mod-renderer-arm {
    background: rgba(0, 120, 212, 0.12);
    color: var(--azure);
    border: 1px solid rgba(0, 120, 212, 0.2);
}

/* Fields */
.mod-fields-text {
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--text-secondary);
}

.mod-fields-sep {
    color: var(--text-muted);
    margin: 0 4px;
}

/* Version */
.mod-version-text {
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--text-muted);
}

/* Status badge */
.mod-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 500;
}

.mod-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.mod-status-live {
    background: rgba(86, 212, 144, 0.12);
    color: #56d490;
    border: 1px solid rgba(86, 212, 144, 0.2);
}

.mod-status-live .mod-status-dot {
    background: #56d490;
    box-shadow: 0 0 4px #56d490;
}

.mod-status-draft {
    background: rgba(122, 138, 170, 0.1);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.mod-status-draft .mod-status-dot {
    background: var(--text-muted);
}

.mod-status-deprecated {
    background: rgba(252, 129, 129, 0.1);
    color: #fc8181;
    border: 1px solid rgba(252, 129, 129, 0.2);
}

.mod-status-deprecated .mod-status-dot {
    background: #fc8181;
}

/* Actions cell — visible on hover */
.mod-actions-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.15s;
}

.mod-tbl__row:hover .mod-actions-cell {
    opacity: 1;
}

.mod-action-btn {
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    transition: all 0.15s;
    text-decoration: none;
}

.mod-action-btn:hover {
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
}

.mod-action-btn-primary {
    background: rgba(59, 130, 246, 0.1);
    color: var(--blue);
    border-color: rgba(59, 130, 246, 0.2);
}

.mod-action-btn-primary:hover {
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.35);
}

/* Empty state */
.mod-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
    font-size: 13px;
}

/* Legacy tags (kept for edit page compatibility) */
.mtag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    font-size: 9px;
    font-weight: 600;
    border-radius: 4px;
    background: rgba(26, 34, 53, 0.5);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.mtag--aws {
    background: rgba(255, 153, 0, 0.1);
    border-color: rgba(255, 153, 0, 0.3);
    color: #ff9900;
}

.mtag--azure {
    background: rgba(0, 120, 212, 0.1);
    border-color: rgba(0, 120, 212, 0.3);
    color: #0078d4;
}

.mtag--gcp {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.mtag--multi {
    background: rgba(168, 85, 247, 0.1);
    border-color: rgba(168, 85, 247, 0.3);
    color: #a855f7;
}

.mtag--tf {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
    color: #8b5cf6;
}

.mtag--cfn {
    background: rgba(255, 153, 0, 0.1);
    border-color: rgba(255, 153, 0, 0.3);
    color: #ff9900;
}

.mtag--ok {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.mtag--warn {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
    color: #f59e0b;
}

.mtag--err {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

/* Edit ghost button (used on edit page) */
.mod-edit-btn {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    padding: 5px 10px;
    font-size: 10px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
}

.mod-edit-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-light);
}

/* Module edit form */
.mod-field {
    margin-bottom: 14px;
}

.mod-field--req .mod-field__label::after {
    content: ' *';
    color: #ef4444;
}

.mod-field__label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

.mod-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.mod-input,
.mod-select,
.mod-textarea {
    width: 100%;
    padding: 8px 11px;
    background: var(--bg, #0a0e1a);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 12px;
    font-family: 'DM Sans', -apple-system, sans-serif;
    outline: none;
}

.mod-input:focus,
.mod-select:focus,
.mod-textarea:focus {
    border-color: var(--accent, #3b82f6);
}

.mod-input--mono,
.mod-textarea.mod-input--mono {
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    font-size: 11px;
}

/* Small variants for nested inline editing */
.mod-input--sm,
.mod-select--sm {
    padding: 5px 8px;
    font-size: 11px;
    border-radius: 6px;
}

/* Nested editable rows (fields, outputs, renderers) */
.nested-row {
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(26, 34, 53, 0.25);
}

.nested-row--compact {
    padding: 8px 10px;
    margin-bottom: 6px;
    background: rgba(26, 34, 53, 0.15);
}

.nested-row--renderer {
    padding: 14px 16px;
    margin-bottom: 12px;
    background: rgba(26, 34, 53, 0.3);
}

.destroy-check {
    margin-right: 4px;
}

.nested-row:has(.destroy-check:checked) {
    opacity: 0.4;
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.04);
}

.mod-textarea {
    resize: vertical;
    min-height: 60px;
    line-height: 1.5;
}

.mod-btn-primary {
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'DM Sans', -apple-system, sans-serif;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    background: var(--accent, #3b82f6);
    color: white;
}

.mod-btn-primary:hover {
    background: #2563eb;
}

/* Module detail page */
.page-header__breadcrumb {
    margin-bottom: 12px;
}

.back-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
}

.back-link:hover {
    color: var(--accent);
}

/* Module detail page — title row override */
.page-header__breadcrumb+.page-header__title-row {
    margin-bottom: 12px;
}

.module-icon-lg {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--surface);
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
}

.module-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.meta-tag {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.meta-tag--live {
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.3);
}

.meta-tag--draft {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.3);
}

.meta-tag--deprecated {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.meta-tag--ready {
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.3);
}

.meta-tag--warning {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.1);
}

/* Detail sections */
.detail-section {
    margin-top: 32px;
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--text-primary);
}

.subsection-title {
    font-size: 13px;
    font-weight: 600;
    margin: 16px 0 8px;
    color: var(--text-secondary);
}

.table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--border);
}

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

.f50-table th {
    text-align: left;
    padding: 10px 14px;
    background: var(--surface);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
}

.f50-table td {
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

.f50-table tr:last-child td {
    border-bottom: none;
}

.f50-table--compact td {
    padding: 6px 12px;
    font-size: 12px;
}

.mono {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
}

.type-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    font-weight: 500;
}

.classification-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 8px;
    font-weight: 500;
}

.classification-badge--user_config {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.classification-badge--dependency {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.classification-badge--platform_managed {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

/* Renderer card */
.renderer-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
}

.renderer-card__header {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.renderer-card__source {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Empty state */
.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 12px;
}


/* ═══════════════════════════════════════════════════
   Canvas Layout
   ═══════════════════════════════════════════════════ */

.canvas-layout {
    display: flex;
    height: calc(100vh - 56px);
    overflow: hidden;
}

/* Catalog sidebar */
.canvas-catalog {
    width: 220px;
    min-width: 220px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.catalog-header {
    padding: 12px;
    border-bottom: 1px solid var(--border);
}

.catalog-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--text-primary);
}

.f50-input--sm {
    padding: 5px 10px;
    font-size: 12px;
    width: 100%;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-primary);
}

.catalog-category__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.catalog-category__header:hover {
    color: var(--text-primary);
}

.catalog-category__count {
    background: var(--bg);
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
}

.catalog-category__items {
    padding: 4px 0;
}

.catalog-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 12px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
}

.catalog-item:hover {
    background: var(--bg);
    color: var(--text-primary);
}

.catalog-item__icon {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 32px;
    text-align: center;
}

.catalog-item__name {
    flex: 1;
}

.catalog-item__badge {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 6px;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    font-weight: 500;
}

/* Canvas area */
.canvas-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.canvas-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.canvas-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    border: 1px solid var(--border);
    background: transparent;
}

.canvas-tab:hover {
    color: var(--text-secondary);
    border-color: var(--border-light);
}

.canvas-tab--active {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
    font-weight: 600;
}

.canvas-tabs__spacer {
    flex: 1;
}

.connect-indicator {
    font-size: 12px;
    color: #a855f7;
    display: flex;
    align-items: center;
    gap: 8px;
}

.connect-cancel {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
}

.canvas-surface {
    flex: 1;
    position: relative;
    overflow: auto;
    background-color: var(--bg);
    background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
    background-size: 20px 20px;
}

.canvas-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.canvas-connection-line {
    fill: none;
    stroke: #a855f7;
    stroke-width: 2;
    stroke-dasharray: 6 3;
    opacity: 0.7;
}

.canvas-blocks {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.canvas-block {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 10px;
    cursor: grab;
    user-select: none;
    min-width: 100px;
    text-align: center;
    transition: border-color 0.15s, box-shadow 0.15s;
    z-index: 2;
}

.canvas-block:hover {
    border-color: var(--text-muted);
}

.canvas-block--selected {
    border-color: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
}

.canvas-block--connectable {
    border-color: #a855f7;
    cursor: crosshair;
}

.canvas-block__icon {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

.canvas-block__name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
}

.canvas-block__type {
    font-size: 10px;
    color: var(--text-muted);
}

.canvas-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    pointer-events: none;
}

.canvas-layout--connecting .canvas-surface {
    cursor: crosshair;
}

/* Properties panel */
.canvas-properties {
    width: 280px;
    min-width: 280px;
    background: var(--surface);
    border-left: 1px solid var(--border);
    overflow-y: auto;
}

.properties-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    font-size: 13px;
    padding: 20px;
    text-align: center;
}

.properties-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.properties-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 2px;
}

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

.properties-group {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.properties-group__title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin: 0 0 10px;
}

.properties-field {
    margin-bottom: 10px;
}

.properties-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.properties-label .required {
    color: #ef4444;
}

.properties-value {
    font-size: 12px;
    color: var(--text-muted);
}

.field-error {
    display: block;
    font-size: 11px;
    color: #ef4444;
    margin-top: 2px;
}

.properties-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
}

.f50-select--sm {
    padding: 5px 10px;
    font-size: 12px;
    width: 100%;
}

/* Toggle switch */
.toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--border);
    border-radius: 20px;
    transition: 0.2s;
}

.toggle-slider::before {
    content: "";
    position: absolute;
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.2s;
}

.toggle input:checked+.toggle-slider {
    background: #10b981;
}

.toggle input:checked+.toggle-slider::before {
    transform: translateX(16px);
}

/* Buttons */
.btn--sm {
    padding: 5px 12px;
    font-size: 12px;
}

.btn--primary {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.btn--primary:hover {
    opacity: 0.9;
}

.btn--ghost {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
}

.btn--ghost:hover {
    border-color: var(--text-muted);
}

.btn--danger {
    background: none;
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    border-radius: 6px;
    cursor: pointer;
}

.btn--danger:hover {
    background: rgba(239, 68, 68, 0.1);
}


/* ═══════════════════════════════════════════════════
   Deploy Panel
   ═══════════════════════════════════════════════════ */

.deploy-panel {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
}

.deploy-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.deploy-status__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
}

.deploy-status--pending .deploy-status__dot {
    background: #f59e0b;
}

.deploy-status--dispatched .deploy-status__dot {
    background: #f59e0b;
    animation: pulse 1.5s infinite;
}

.deploy-status--planning .deploy-status__dot {
    background: #3b82f6;
    animation: pulse 1.5s infinite;
}

.deploy-status--planned .deploy-status__dot {
    background: #10b981;
}

.deploy-status--applying .deploy-status__dot {
    background: #a855f7;
    animation: pulse 1.5s infinite;
}

.deploy-status--completed .deploy-status__dot {
    background: #10b981;
}

.deploy-status--failed .deploy-status__dot {
    background: #ef4444;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.deploy-status__label {
    font-weight: 500;
    color: var(--text-primary);
}

.deploy-status__time {
    color: var(--text-muted);
    margin-left: auto;
}

.deploy-output {
    margin-top: 10px;
}

.deploy-output summary {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    margin-bottom: 6px;
}

.deploy-output__pre {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px;
    font-size: 11px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--text-primary);
    overflow-x: auto;
    max-height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

.deploy-empty {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}


/* Deploy section in properties panel */
.properties-deploy {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    margin-top: auto;
}


/* ── Audit Log ─────────────────────────────────────────── */
.audit-action-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.audit-action-created {
    background: rgba(59, 130, 246, 0.1);
    color: var(--blue);
}

.audit-action-updated {
    background: rgba(139, 92, 246, 0.1);
    color: var(--purple);
}

.audit-action-deleted {
    background: rgba(239, 68, 68, 0.1);
    color: var(--red);
}

.audit-action-deployed {
    background: rgba(86, 212, 144, 0.12);
    color: #56d490;
}

.audit-action-promoted {
    background: rgba(245, 158, 11, 0.1);
    color: var(--orange);
}


/* ── Connection rubber-band line ───────────────────────── */
.conn-line.rubber-band {
    stroke: var(--green);
    stroke-width: 2;
    stroke-dasharray: 6 4;
    fill: none;
    opacity: 0.7;
    pointer-events: none;
    animation: rubber-band-dash 0.4s linear infinite;
}

@keyframes rubber-band-dash {
    to {
        stroke-dashoffset: -10;
    }
}

/* Highlight potential targets during connect mode */
.cv-canvas.connect-mode .rb {
    cursor: crosshair;
}

.cv-canvas.connect-mode .rb:hover {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.cv-canvas.connect-mode .rb.connecting {
    outline: 2px solid var(--green);
    outline-offset: 2px;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
}

/* ═══════════════════════════════════════════════════
   Page Sidebar (reusable React component)
   ═══════════════════════════════════════════════════ */
.page-sidebar {
    width: 220px;
    min-width: 220px;
    flex-shrink: 0;
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: calc(100vh - var(--topnav-height));
}

.page-sidebar-section+.page-sidebar-section {
    margin-top: 4px;
}

.page-sidebar-section-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 6px 10px 2px;
    opacity: 0.5;
}

.page-sidebar-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    position: relative;
    border: none;
    background: none;
    text-align: left;
}

.page-sidebar-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

.page-sidebar-item.active {
    background: var(--blue-dim);
    color: var(--blue);
    font-weight: 500;
}

.page-sidebar-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 2.5px;
    background: var(--blue);
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px var(--blue);
}

.page-sidebar-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.page-sidebar-icon svg {
    width: 15px;
    height: 15px;
    opacity: 0.6;
}

.page-sidebar-item.active .page-sidebar-icon svg {
    opacity: 1;
}

.page-sidebar-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-sidebar-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 20px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
}

/* Alert variant (e.g. orphaned resources) */
.page-sidebar-item.alert {
    color: var(--orange);
    background: var(--orange-dim);
    border: 1px solid rgba(245, 158, 11, 0.15);
}

.page-sidebar-item.alert .page-sidebar-icon svg {
    opacity: 1;
    color: var(--orange);
}

.page-sidebar-item.alert:hover {
    background: rgba(245, 158, 11, 0.18);
}

.page-sidebar-item.alert .page-sidebar-count {
    background: rgba(245, 158, 11, 0.15);
    color: var(--orange);
}

/* FinOps sidebar override — green active state when inside .rs-layout */
.rs-layout .page-sidebar-item.active {
    background: rgba(74, 222, 128, 0.12);
    color: #4ade80;
}

.rs-layout .page-sidebar-item.active::before {
    background: #4ade80;
    box-shadow: 0 0 8px #4ade80;
}

/* ═══════════════════════════════════════════════════
   Rightsizing Page
   FinOps pages use actual green (#4ade80) for savings
   accents, not the system --green (which is blue).
   ═══════════════════════════════════════════════════ */
.rs-layout {
    display: flex;
    min-height: calc(100vh - var(--topnav-height));
    /* Break out of .app-content padding + max-width centering */
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -28px;
    margin-bottom: -28px;

    /* FinOps accent overrides (actual green for savings) */
    --finops-green: #4ade80;
    --finops-green-dim: rgba(74, 222, 128, 0.12);
    --finops-green-glow: rgba(74, 222, 128, 0.06);
    --finops-green-border: rgba(74, 222, 128, 0.3);
}

.rs-main {
    flex: 1;
    padding: 28px 32px;
    min-width: 0;
}

.rs-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
}

.rs-page-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.rs-page-sub {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 3px;
}

.rs-section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    margin-top: 8px;
}

/* Tabs */
.rs-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.rs-tab {
    padding: 8px 16px;
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}

.rs-tab:hover {
    color: var(--text-secondary);
}

.rs-tab.active {
    color: var(--finops-green);
    border-bottom-color: var(--finops-green);
}

/* KPI row */
.rs-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.rs-kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    transition: border-color 0.2s;
}

.rs-kpi-card:hover {
    border-color: var(--border-light);
}

.rs-kpi-card.highlight {
    border-color: var(--finops-green-border);
    background: linear-gradient(135deg, var(--finops-green-glow), var(--bg-card));
}

.rs-kpi-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.rs-kpi-value {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
}

.rs-kpi-value.green {
    color: var(--finops-green);
}

.rs-kpi-value.blue {
    color: #60a5fa;
}

.rs-kpi-value.amber {
    color: var(--orange);
}

.rs-kpi-sub {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Two column grid */
.rs-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

/* Card */
.rs-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.rs-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

/* Resource rows (cost breakdown) */
.rs-resource-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

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

.rs-resource-name {
    color: var(--text-secondary);
}

.rs-resource-val {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
}

/* Donut chart */
.rs-donut {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: conic-gradient(var(--finops-green) 0% 86%, var(--bg-elevated) 86% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.rs-donut::after {
    content: '';
    position: absolute;
    width: 72px;
    height: 72px;
    background: var(--bg-card);
    border-radius: 50%;
}

.rs-donut-label {
    position: relative;
    z-index: 1;
    text-align: center;
}

.rs-donut-pct {
    font-family: var(--font-mono);
    font-size: 17px;
    font-weight: 600;
    color: var(--finops-green);
    display: block;
}

.rs-donut-sub {
    font-size: 9px;
    color: var(--text-muted);
    display: block;
    line-height: 1.3;
}

/* Savings opportunity bars */
.rs-opp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
}

.rs-opp-name {
    font-size: 12px;
    color: var(--text-secondary);
    width: 130px;
    flex-shrink: 0;
}

.rs-opp-bar-wrap {
    flex: 1;
    height: 6px;
    background: var(--bg-elevated);
    border-radius: 3px;
    overflow: hidden;
}

.rs-opp-bar {
    height: 100%;
    background: var(--finops-green);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.rs-opp-val {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--finops-green);
    width: 48px;
    text-align: right;
    flex-shrink: 0;
}

/* Alert banner */
.rs-alert-banner {
    background: var(--bg-card);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 24px;
}

.rs-alert-inner {
    display: grid;
    grid-template-columns: 1fr auto;
}

.rs-alert-left {
    padding: 20px 24px;
    border-right: 1px solid rgba(251, 191, 36, 0.12);
}

.rs-alert-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    color: var(--orange);
}

.rs-alert-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.rs-alert-count {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.rs-alert-detail {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.rs-alert-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.rs-alert-tag {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--finops-green);
    padding: 3px 10px;
    background: var(--finops-green-dim);
    border: 1px solid var(--finops-green-border);
    border-radius: 20px;
}

.rs-alert-right {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 300px;
}

.rs-alert-savings-big {
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 600;
    color: var(--finops-green);
}

.rs-alert-savings-label {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: -4px;
    margin-bottom: 8px;
}

.rs-alert-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.rs-alert-metric {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
}

.rs-alert-metric-label {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.rs-alert-metric-val {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.rs-alert-efficiency {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.2);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
}

.rs-alert-efficiency strong {
    color: var(--red);
}

/* Rightsizing buttons */
.rs-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: var(--finops-green);
    color: #0a0e1a;
    border-radius: var(--radius);
    border: none;
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.rs-btn-primary:hover {
    opacity: 0.88;
}

.rs-btn-export {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 12.5px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.rs-btn-export:hover {
    border-color: var(--border-light);
    color: var(--text-primary);
}

/* Detail sections (expandable) */
.rs-detail-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 12px;
}

.rs-detail-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}

.rs-detail-trigger:hover {
    background: rgba(255, 255, 255, 0.02);
}

.rs-detail-icon {
    color: var(--finops-green);
}

.rs-detail-body {
    padding: 0 20px 16px;
    border-top: 1px solid var(--border);
    animation: fadeUp 0.2s ease;
}

/* Resource detail table */
.rs-table-wrap {
    overflow-x: auto;
    margin-top: 12px;
}

.rs-table {
    width: 100%;
    border-collapse: collapse;
}

.rs-table th {
    text-align: left;
    padding: 10px 12px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    background: var(--bg-body);
}

.rs-table td {
    padding: 10px 12px;
    font-size: 12px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.rs-table tbody tr {
    transition: background 0.15s;
}

.rs-table tbody tr:hover {
    background: var(--bg-card-hover);
}


/* ═══════════════════════════════════════════════════
   Savings / Cost Optimization Page
   FinOps pages use actual green (#4ade80) for savings.
   ═══════════════════════════════════════════════════ */
.sv-page {
    padding: 28px 32px;
    max-width: 1400px;
    margin: 0 auto;
    --sv-green: #4ade80;
    --sv-green-dim: rgba(74, 222, 128, 0.12);
    --sv-green-border: rgba(74, 222, 128, 0.3);
    --sv-amber: #fbbf24;
    --sv-amber-dim: rgba(251, 191, 36, 0.12);
}

.sv-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.sv-page-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.sv-page-sub {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 3px;
}

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

/* UUID search */
.sv-uuid-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 220px;
    transition: border-color 0.15s;
}

.sv-uuid-search:focus-within {
    border-color: var(--sv-green-border);
}

.sv-uuid-search svg {
    width: 13px;
    height: 13px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.sv-uuid-search input {
    background: none;
    border: none;
    outline: none;
    font-size: 12.5px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    width: 100%;
}

.sv-uuid-search input::placeholder {
    color: var(--text-muted);
}

/* Cloud filter toggle */
.sv-cloud-filter {
    display: flex;
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 4px;
}

.sv-cloud-btn {
    padding: 5px 14px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    color: var(--text-muted);
    background: none;
    border: none;
    font-family: var(--font-sans);
}

.sv-cloud-btn.active {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

/* Small button */
.sv-btn-sm {
    padding: 7px 14px;
    border-radius: var(--radius);
    font-size: 12.5px;
    font-weight: 500;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: border-color 0.15s, color 0.15s;
}

.sv-btn-sm:hover {
    border-color: var(--border-light);
    color: var(--text-primary);
}

/* KPI row */
.sv-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}

.sv-kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 20px;
    transition: border-color 0.2s;
}

.sv-kpi-card:hover {
    border-color: var(--border-light);
}

.sv-kpi-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.sv-kpi-value {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
}

.sv-kpi-value.green {
    color: var(--sv-green);
}

.sv-kpi-value.amber {
    color: var(--sv-amber);
}

.sv-kpi-sub {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Section title */
.sv-section-title {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 14px;
}

/* Plans grid */
.sv-plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 28px;
    align-items: stretch;
}

/* Plan card */
.sv-plan-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s;
}

.sv-plan-card:hover {
    border-color: var(--border-light);
}

.sv-plan-card.recommended {
    border-color: var(--sv-green-border);
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.08), 0 8px 32px rgba(0, 0, 0, 0.3);
}

.sv-plan-header {
    padding: 18px 20px 16px;
    border-bottom: 1px solid var(--border);
}

.sv-plan-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.sv-plan-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.sv-plan-badges {
    display: flex;
    gap: 6px;
    align-items: center;
}

.sv-badge {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sv-badge.green {
    background: var(--sv-green-dim);
    color: var(--sv-green);
    border: 1px solid var(--sv-green-border);
}

.sv-badge.blue {
    background: rgba(96, 165, 250, 0.1);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.25);
}

.sv-plan-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

.sv-plan-body {
    padding: 18px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Savings highlight */
.sv-savings-highlight {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.sv-savings-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.sv-savings-value {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 600;
    color: var(--sv-green);
}

.sv-savings-value.secondary {
    font-size: 18px;
    opacity: 0.7;
}

/* Cost section */
.sv-cost-section {
    border-top: 1px solid var(--border);
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sv-cost-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.sv-cost-label {
    font-size: 12px;
    color: var(--text-muted);
}

.sv-cost-val {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-secondary);
}

.sv-cost-val.highlight {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
}

.sv-cost-val.green {
    color: var(--sv-green);
    font-size: 12px;
}

/* Flexibility section */
.sv-flex-section {
    border-top: 1px solid var(--border);
    padding-top: 14px;
}

.sv-flex-label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.sv-flex-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.sv-flex-val {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
}

.sv-flex-slider {
    width: 100%;
    height: 4px;
    background: var(--bg-elevated);
    border-radius: 2px;
    margin-bottom: 10px;
    position: relative;
    overflow: visible;
}

.sv-flex-slider-fill {
    height: 100%;
    background: var(--sv-green);
    border-radius: 2px;
    opacity: 0.5;
}

.sv-flex-slider-thumb {
    width: 12px;
    height: 12px;
    background: var(--sv-green);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.4);
}

/* Plan footer / CTA */
.sv-plan-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
}

.sv-btn-apply {
    width: 100%;
    padding: 10px;
    border-radius: var(--radius);
    font-size: 13.5px;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    text-align: center;
    transition: opacity 0.15s, background 0.15s;
    border: none;
}

.sv-btn-apply.primary {
    background: var(--sv-green);
    color: #0a0e1a;
}

.sv-btn-apply.primary:hover {
    opacity: 0.88;
}

.sv-btn-apply.secondary {
    background: transparent;
    color: var(--sv-green);
    border: 1px solid var(--sv-green-border);
}

.sv-btn-apply.secondary:hover {
    background: var(--sv-green-dim);
}

/* ── Commitment Inventory Table ─────────────────── */
.sv-table-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 24px;
}

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

.sv-table-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.sv-table-actions {
    display: flex;
    gap: 8px;
}

/* Table filters */
.sv-table-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.sv-filter-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 7px;
    width: 200px;
}

.sv-filter-search svg {
    width: 13px;
    height: 13px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.sv-filter-search input {
    background: none;
    border: none;
    outline: none;
    font-size: 12.5px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    width: 100%;
}

.sv-filter-search input::placeholder {
    color: var(--text-muted);
}

.sv-filter-select select {
    padding: 6px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: 12.5px;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-sans);
    appearance: none;
    padding-right: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235a6a8a' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.sv-filter-mode {
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: 4px;
}

.sv-mode-label {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-right: 6px;
}

.sv-mode-btn {
    padding: 5px 10px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
}

.sv-mode-btn:first-of-type {
    border-radius: 6px 0 0 6px;
}

.sv-mode-btn:last-of-type {
    border-radius: 0 6px 6px 0;
    border-left: none;
}

.sv-mode-btn.active {
    background: var(--sv-green-dim);
    color: var(--sv-green);
    border-color: var(--sv-green-border);
}

/* Table */
.sv-table-wrap {
    overflow-x: auto;
}

.sv-table {
    width: 100%;
    border-collapse: collapse;
}

.sv-table thead th {
    text-align: left;
    padding: 10px 14px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}

.sv-table thead th:first-child {
    padding-left: 20px;
}

.sv-table thead th:last-child {
    padding-right: 20px;
}

.sv-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.12s;
}

.sv-table tbody tr:last-child {
    border-bottom: none;
}

.sv-table tbody tr:hover {
    background: var(--bg-card-hover);
}

.sv-table tbody td {
    padding: 11px 14px;
    font-size: 12.5px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.sv-table tbody td:first-child {
    padding-left: 20px;
}

.sv-table tbody td:last-child {
    padding-right: 20px;
}

/* Cell variants */
.sv-td-primary {
    color: var(--text-primary);
    font-weight: 500;
}

.sv-td-mono {
    font-family: var(--font-mono);
    font-size: 12px;
}

.sv-td-muted {
    color: var(--text-muted);
}

.sv-td-green {
    color: var(--sv-green);
}

.sv-td-amber {
    color: var(--sv-amber);
}

/* Utilization bar */
.sv-util-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sv-util-bar {
    width: 64px;
    height: 5px;
    background: var(--bg-elevated);
    border-radius: 3px;
    overflow: hidden;
}

.sv-util-fill {
    height: 100%;
    border-radius: 3px;
}

.sv-util-fill.high {
    background: var(--sv-green);
}

.sv-util-fill.mid {
    background: var(--sv-amber);
}

.sv-util-fill.low {
    background: var(--red);
}

.sv-util-pct {
    font-family: var(--font-mono);
    font-size: 11.5px;
}

.sv-util-pct.high {
    color: var(--sv-green);
}

.sv-util-pct.mid {
    color: var(--sv-amber);
}

.sv-util-pct.low {
    color: var(--red);
}

/* Status badge */
.sv-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
}

.sv-status-badge.unlocked {
    background: var(--sv-green-dim);
    color: var(--sv-green);
    border: 1px solid var(--sv-green-border);
}

.sv-status-badge.locked {
    background: var(--sv-amber-dim);
    color: var(--sv-amber);
    border: 1px solid rgba(251, 191, 36, 0.25);
}

.sv-status-badge svg {
    width: 9px;
    height: 9px;
}


/* ═══════════════════════════════════════════════════
   Reseller Index Page
   Uses actual green (#4ade80) accent, not --green (blue).
   ═══════════════════════════════════════════════════ */

/* Search field (inline in header) */
.res-search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 240px;
    transition: border-color 0.15s;
}

.res-search-field:focus-within {
    border-color: #4ade80;
}

.res-search-field svg {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.res-search-field input {
    background: none;
    border: none;
    outline: none;
    font-size: 13px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    width: 100%;
}

.res-search-field input::placeholder {
    color: var(--text-muted);
}

/* Filter pills */
.res-filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.res-filter-pill {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.res-filter-pill:hover {
    border-color: var(--border-light);
    color: var(--text-secondary);
}

.res-filter-pill.active {
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.3);
    color: #4ade80;
}

/* View toggle */
.res-view-toggle {
    display: flex;
}

.res-view-btn {
    width: 32px;
    height: 32px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.15s, background 0.15s;
}

.res-view-btn:first-child {
    border-radius: var(--radius) 0 0 var(--radius);
}

.res-view-btn:last-child {
    border-radius: 0 var(--radius) var(--radius) 0;
    border-left: none;
}

.res-view-btn.active {
    background: rgba(74, 222, 128, 0.12);
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.3);
}

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

/* Stats summary bar */
.res-stats-bar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
}

.res-stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.res-stat-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.res-stat-val {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.res-stat-val.green {
    color: #56d490;
}

.res-stat-divider {
    width: 1px;
    height: 28px;
    background: var(--border);
}

.res-stat-spacer {
    flex: 1;
}

/* Reseller card */
a.res-card {
    text-decoration: none;
    color: inherit;
}

.res-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    animation: entityFadeUp 0.3s ease both;
}

.res-card:hover {
    border-color: var(--border-light);
    transform: translateY(-1px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.res-card:nth-child(1) {
    animation-delay: 0.04s;
}

.res-card:nth-child(2) {
    animation-delay: 0.07s;
}

.res-card:nth-child(3) {
    animation-delay: 0.10s;
}

/* Card header */
.res-card-header {
    padding: 16px 18px 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.res-card-identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

.res-card-avatar {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.res-card-name {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-primary);
}

.res-card-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.res-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}

.res-status-badge.active {
    background: rgba(86, 212, 144, 0.12);
    color: #56d490;
    border: 1px solid rgba(86, 212, 144, 0.3);
}

.res-status-badge.inactive {
    background: rgba(100, 116, 139, 0.12);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.res-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Card metrics */
.res-card-metrics {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.res-metric-cell {
    padding: 12px 18px;
}

.res-metric-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.res-metric-val {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.res-metric-sub {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Card footer — quick links */
.res-card-footer {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.res-quick-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 11.5px;
    color: var(--text-muted);
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.res-quick-link:hover {
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.3);
    background: rgba(74, 222, 128, 0.12);
}

.res-quick-link svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

.res-quick-link .res-alert-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--orange);
    margin-left: 2px;
    flex-shrink: 0;
}

.res-card-menu {
    margin-left: auto;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.res-card-menu:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.res-card-menu svg {
    width: 13px;
    height: 13px;
}

/* Add reseller card (dashed) */
.res-card-add {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.08);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    cursor: default;
}

.res-card-add:hover {
    border-color: rgba(74, 222, 128, 0.25);
    transform: none;
    box-shadow: none;
}

.res-card-add-inner {
    text-align: center;
    color: var(--text-muted);
}

.res-card-add-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

.res-card-add-icon svg {
    width: 16px;
    height: 16px;
}

.res-card-add-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.res-card-add-sub {
    font-size: 11.5px;
    margin-top: 3px;
}

/* Add Reseller button (actual green) */
.res-btn-add {
    background: #4ade80;
    color: #0a0e1a;
    border: none;
    cursor: pointer;
}

.res-btn-add:hover {
    background: #3cc972;
    transform: translateY(-1px);
}


/* ═══════════════════════════════════════════════════
   Customer Index Page
   Uses actual green (#4ade80) accent.
   ═══════════════════════════════════════════════════ */

/* Reseller context pill */
.cust-reseller-context {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
    color: var(--text-secondary);
}

.cust-reseller-dot {
    width: 7px;
    height: 7px;
    background: #4ade80;
    border-radius: 50%;
    box-shadow: 0 0 5px #4ade80;
}

/* Search field */
.cust-search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 240px;
    transition: border-color 0.15s;
}

.cust-search-field:focus-within {
    border-color: #4ade80;
}

.cust-search-field svg {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.cust-search-field input {
    background: none;
    border: none;
    outline: none;
    font-size: 13px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    width: 100%;
}

.cust-search-field input::placeholder {
    color: var(--text-muted);
}

/* Filter pills */
.cust-filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cust-filter-pill {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.cust-filter-pill:hover {
    border-color: var(--border-light);
    color: var(--text-secondary);
}

.cust-filter-pill.active {
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.3);
    color: #4ade80;
}

/* View toggle */
.cust-view-toggle {
    display: flex;
}

.cust-view-btn {
    width: 32px;
    height: 32px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.15s, background 0.15s;
}

.cust-view-btn:first-child {
    border-radius: var(--radius) 0 0 var(--radius);
}

.cust-view-btn:last-child {
    border-radius: 0 var(--radius) var(--radius) 0;
    border-left: none;
}

.cust-view-btn.active {
    background: rgba(74, 222, 128, 0.12);
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.3);
}

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

/* Add Customer button (actual green) */
.cust-btn-add {
    background: #4ade80;
    color: #0a0e1a;
    border: none;
    cursor: pointer;
}

.cust-btn-add:hover {
    background: #3cc972;
    transform: translateY(-1px);
}

/* Back button */
.cust-back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12.5px;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.cust-back-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-light);
}

.cust-back-btn svg {
    width: 13px;
    height: 13px;
}

/* Stats bar */
.cust-stats-bar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
}

.cust-stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cust-stat-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cust-stat-val {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.cust-stat-val.green {
    color: #56d490;
}

.cust-stat-divider {
    width: 1px;
    height: 28px;
    background: var(--border);
}

.cust-stat-spacer {
    flex: 1;
}

/* Customer grid — 4 columns */
.cust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media (max-width: 1200px) {
    .cust-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

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

/* Customer card */
a.cust-card {
    text-decoration: none;
    color: inherit;
}

.cust-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    animation: entityFadeUp 0.3s ease both;
}

.cust-card:hover {
    border-color: var(--border-light);
    transform: translateY(-1px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* Card top */
.cust-card-top {
    padding: 14px 16px 12px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.cust-card-identity {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cust-card-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.cust-card-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.cust-card-id {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

.cust-card-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.cust-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}

.cust-status-badge.active {
    background: rgba(86, 212, 144, 0.12);
    color: #56d490;
    border: 1px solid rgba(86, 212, 144, 0.3);
}

.cust-status-badge.inactive {
    background: rgba(100, 116, 139, 0.1);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.cust-status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.cust-country-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

/* Card footer — quick links */
.cust-card-footer {
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.cust-quick-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.cust-quick-link:hover {
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.3);
    background: rgba(74, 222, 128, 0.12);
}

.cust-quick-link svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.cust-card-menu {
    margin-left: auto;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
}

.cust-card-menu:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.cust-card-menu svg {
    width: 12px;
    height: 12px;
}

/* Add customer card (dashed) */
.cust-card-add {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.08);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    cursor: default;
}

.cust-card-add:hover {
    border-color: rgba(74, 222, 128, 0.25);
    transform: none;
    box-shadow: none;
}

.cust-card-add-inner {
    text-align: center;
    color: var(--text-muted);
}

.cust-card-add-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
}

.cust-card-add-icon svg {
    width: 14px;
    height: 14px;
}

.cust-card-add-title {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
}


/* ═══════════════════════════════════════════════════
   Project Cards (customer show page)
   ═══════════════════════════════════════════════════ */

/* Customer context pill */
.proj-customer-context {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
    color: var(--text-secondary);
}

.proj-customer-dot {
    width: 7px;
    height: 7px;
    background: #4ade80;
    border-radius: 50%;
    box-shadow: 0 0 5px #4ade80;
}

/* Search field */
.proj-search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 240px;
    transition: border-color 0.15s;
}

.proj-search-field:focus-within {
    border-color: #4ade80;
}

.proj-search-field svg {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.proj-search-field input {
    background: none;
    border: none;
    outline: none;
    font-size: 13px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    width: 100%;
}

.proj-search-field input::placeholder {
    color: var(--text-muted);
}

/* Filter pills */
.proj-filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.proj-filter-pill {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.proj-filter-pill:hover {
    border-color: var(--border-light);
    color: var(--text-secondary);
}

.proj-filter-pill.active {
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.3);
    color: #4ade80;
}

.proj-filter-pill.active[data-filter="aws"] {
    background: var(--aws-dim);
    border-color: rgba(255, 153, 0, 0.3);
    color: var(--aws);
}

.proj-filter-pill.active[data-filter="azure"] {
    background: var(--azure-dim);
    border-color: rgba(0, 120, 212, 0.3);
    color: var(--azure);
}

/* View toggle */
.proj-view-toggle {
    display: flex;
}

.proj-view-btn {
    width: 32px;
    height: 32px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.15s, background 0.15s;
}

.proj-view-btn:first-child {
    border-radius: var(--radius) 0 0 var(--radius);
}

.proj-view-btn:last-child {
    border-radius: 0 var(--radius) var(--radius) 0;
    border-left: none;
}

.proj-view-btn.active {
    background: rgba(74, 222, 128, 0.12);
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.3);
}

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

/* Add button (actual green) */
.proj-btn-add {
    background: #4ade80;
    color: #0a0e1a;
    border: none;
    cursor: pointer;
}

.proj-btn-add:hover {
    background: #3cc972;
    transform: translateY(-1px);
}

/* Stats bar */
.proj-stats-bar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
}

.proj-stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.proj-stat-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.proj-stat-val {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.proj-stat-val.aws {
    color: var(--aws);
}

.proj-stat-val.azure {
    color: var(--azure);
}

.proj-stat-divider {
    width: 1px;
    height: 28px;
    background: var(--border);
}

.proj-stat-spacer {
    flex: 1;
}

/* Project grid — 4 columns */
.proj-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 1200px) {
    .proj-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

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

/* Project card */
a.proj-card {
    text-decoration: none;
    color: inherit;
}

.proj-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    animation: entityFadeUp 0.3s ease both;
}

.proj-card:hover {
    border-color: var(--border-light);
    transform: translateY(-1px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* Colored top accent strip */
.proj-card-accent {
    height: 3px;
    width: 100%;
    flex-shrink: 0;
}

.proj-card-accent.aws {
    background: linear-gradient(90deg, var(--aws), rgba(255, 153, 0, 0.3));
}

.proj-card-accent.azure {
    background: linear-gradient(90deg, var(--azure), rgba(0, 120, 212, 0.3));
}

/* Card body */
.proj-card-body {
    padding: 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.proj-card-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.proj-card-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Provider badge */
.proj-provider-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}

.proj-provider-badge.aws {
    background: var(--aws-dim);
    color: var(--aws);
    border: 1px solid rgba(255, 153, 0, 0.25);
}

.proj-provider-badge.azure {
    background: var(--azure-dim);
    color: var(--azure);
    border: 1px solid rgba(0, 120, 212, 0.25);
}

/* Region line */
.proj-card-region {
    font-size: 11.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

.proj-card-region svg {
    width: 11px;
    height: 11px;
    opacity: 0.5;
    flex-shrink: 0;
}

/* Card footer — quick links */
.proj-card-footer {
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 5px;
}

.proj-quick-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.proj-quick-link:hover {
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.3);
    background: rgba(74, 222, 128, 0.12);
}

.proj-quick-link svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.proj-card-menu {
    margin-left: auto;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
}

.proj-card-menu:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.proj-card-menu svg {
    width: 12px;
    height: 12px;
}

/* Add project card (dashed) */
.proj-card-add {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.08);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    cursor: default;
}

.proj-card-add:hover {
    border-color: rgba(74, 222, 128, 0.25);
    transform: none;
    box-shadow: none;
}

.proj-card-add-inner {
    text-align: center;
    color: var(--text-muted);
}

.proj-card-add-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
}

.proj-card-add-icon svg {
    width: 14px;
    height: 14px;
}

.proj-card-add-title {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
}



/* ═══════════════════════════════════════════════════
   Environment Cards (project show page)
   ═══════════════════════════════════════════════════ */

/* Section layout */
.env-section {
    margin-bottom: 36px;
}

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

.env-section-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.env-section-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.env-section-icon svg {
    width: 15px;
    height: 15px;
}

.env-icon-green {
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.env-icon-purple {
    background: rgba(167, 139, 250, 0.12);
    border: 1px solid rgba(167, 139, 250, 0.25);
}

.env-section-title {
    font-size: 16px;
    font-weight: 600;
}

.env-section-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.env-section-divider {
    height: 1px;
    background: var(--border);
    margin-bottom: 36px;
}

/* Add buttons */
.env-btn-add-green {
    background: #4ade80;
    color: #0a0e1a;
    border: none;
    cursor: pointer;
}

.env-btn-add-green:hover {
    background: #3cc972;
    transform: translateY(-1px);
}

.env-btn-add-purple {
    background: rgba(167, 139, 250, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(167, 139, 250, 0.3);
    cursor: pointer;
}

.env-btn-add-purple:hover {
    background: rgba(167, 139, 250, 0.22);
}

/* Cards grid */
.env-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 1200px) {
    .env-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .env-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .env-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* Environment card */
.env-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    animation: entityFadeUp 0.3s ease both;
}

.env-card:hover {
    border-color: var(--border-light);
    transform: translateY(-1px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* Canvas card */
a.canvas-card {
    text-decoration: none;
    color: inherit;
}

.canvas-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    animation: entityFadeUp 0.3s ease both;
}

.canvas-card:hover {
    border-color: rgba(167, 139, 250, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* Accent strips */
.env-card-accent {
    height: 3px;
    width: 100%;
    flex-shrink: 0;
}

.env-card-accent.aws {
    background: linear-gradient(90deg, var(--aws), rgba(255, 153, 0, 0.2));
}

.env-card-accent.azure {
    background: linear-gradient(90deg, var(--azure), rgba(0, 120, 212, 0.2));
}

.env-card-accent.unmanaged {
    background: linear-gradient(90deg, var(--text-muted), rgba(90, 106, 138, 0.2));
}

.env-card-accent.canvas-strip {
    background: linear-gradient(90deg, #a78bfa, rgba(167, 139, 250, 0.2));
}

/* Card body */
.env-card-body {
    padding: 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.env-card-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.env-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Environment type badges */
.env-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}

.env-badge-prd {
    background: rgba(74, 222, 128, 0.12);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.25);
}

.env-badge-acc {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.25);
}

.env-badge-dev {
    background: rgba(96, 165, 250, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.25);
}

.env-badge-flagged {
    background: rgba(248, 113, 113, 0.12);
    color: var(--red);
    border: 1px solid rgba(248, 113, 113, 0.25);
}

/* Account ID row */
.env-card-account {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

.env-card-account svg {
    width: 10px;
    height: 10px;
    opacity: 0.5;
    flex-shrink: 0;
}

/* Provider row */
.env-card-provider-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.env-card-provider-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.env-card-provider-dot.aws {
    background: var(--aws);
    box-shadow: 0 0 5px rgba(255, 153, 0, 0.4);
}

.env-card-provider-dot.azure {
    background: var(--azure);
    box-shadow: 0 0 5px rgba(0, 120, 212, 0.4);
}

.env-card-provider-dot.unmanaged {
    background: var(--text-muted);
}

/* Canvas linked tag */
.env-canvas-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    background: rgba(167, 139, 250, 0.1);
    border: 1px solid rgba(167, 139, 250, 0.2);
    border-radius: 5px;
    font-size: 11px;
    color: #a78bfa;
    width: fit-content;
}

.env-canvas-tag svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

/* Canvas meta rows */
.canvas-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.canvas-meta-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-muted);
}

.canvas-meta-row svg {
    width: 10px;
    height: 10px;
    opacity: 0.5;
    flex-shrink: 0;
}

/* Card footer */
.env-card-footer {
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 5px;
}

.env-quick-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    transition: color 0.12s, border-color 0.12s, background 0.12s;
    white-space: nowrap;
    cursor: pointer;
}

.env-quick-link:hover {
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.3);
    background: rgba(74, 222, 128, 0.12);
}

.env-quick-link.canvas-link {
    color: #a78bfa;
    border-color: rgba(167, 139, 250, 0.2);
    background: rgba(167, 139, 250, 0.08);
}

.env-quick-link.canvas-link:hover {
    color: #a78bfa;
    border-color: rgba(167, 139, 250, 0.4);
    background: rgba(167, 139, 250, 0.15);
}

.env-quick-link svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.env-card-menu {
    margin-left: auto;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
    cursor: pointer;
}

.env-card-menu:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.env-card-menu svg {
    width: 12px;
    height: 12px;
}

/* Environment card dropdown menu */
.env-card-dropdown {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 4px;
    min-width: 180px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    padding: 4px;
    z-index: 50;
}

.env-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    font-size: 12px;
    color: var(--text-secondary);
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    text-decoration: none;
}

.env-dropdown-item:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.env-dropdown-item svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.env-dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

.env-dropdown-danger:hover {
    color: var(--red);
    background: rgba(239, 68, 68, 0.08);
}

/* Add environment card (dashed) */
.env-card-add {
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    transition: border-color 0.2s;
}

.env-card-add:hover {
    border-color: rgba(74, 222, 128, 0.25);
}

.env-card-add.canvas-add:hover {
    border-color: rgba(167, 139, 250, 0.3);
}

.env-card-add-inner {
    text-align: center;
    color: var(--text-muted);
}

.env-card-add-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
}

.env-card-add-icon svg {
    width: 14px;
    height: 14px;
}

.env-card-add-icon.canvas-add-icon {
    background: rgba(167, 139, 250, 0.1);
    border-color: rgba(167, 139, 250, 0.2);
}

.env-card-add-title {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Manage link */
.env-manage-link {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 16px;
}

.env-manage-link summary {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    transition: color 0.15s;
}

.env-manage-link summary:hover {
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SECURITY DASHBOARD
   ═══════════════════════════════════════════════════════════════════════════════ */

.sec-page {
    padding: 28px 32px;
    max-width: 1400px;
}

/* Page header */
.sec-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
}

.sec-page-title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sec-page-title-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sec-page-title-icon svg {
    color: var(--red);
}

.sec-page-sub {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 3px;
}

/* Beta badge */
.sec-beta-badge {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(167, 139, 250, 0.12);
    color: #a78bfa;
    border: 1px solid rgba(167, 139, 250, 0.25);
}

/* Scan meta bar */
.sec-scan-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 24px;
}

.sec-scan-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sec-scan-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.sec-scan-divider {
    width: 1px;
    height: 18px;
    background: var(--border);
}

/* Score banner */
.sec-score-banner {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 22px 28px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.sec-score-banner-main {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
}

.sec-score-banner-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.sec-score-big {
    font-family: var(--font-mono);
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

.sec-score-big-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

.sec-score-big-grade {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 5px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    border: 1px solid;
    margin-top: 6px;
}

.sec-score-divider {
    width: 1px;
    height: 60px;
    background: var(--border);
    flex-shrink: 0;
}

.sec-score-breakdown {
    display: flex;
    gap: 24px;
    flex: 1;
}

.sec-sb-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.sec-sb-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    white-space: nowrap;
}

.sec-sb-bar-wrap {
    height: 5px;
    background: var(--bg-elevated);
    border-radius: 3px;
    overflow: hidden;
    width: 100%;
    min-width: 60px;
}

.sec-sb-bar {
    height: 100%;
    border-radius: 3px;
}

.sec-sb-val {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
}

.sec-score-banner-right {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

.sec-last-scan {
    font-size: 11.5px;
    color: var(--text-muted);
}

.sec-last-scan span {
    color: var(--text-secondary);
}

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

.sec-trend-pill.trend-up {
    background: var(--green-dim);
    color: var(--green);
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.sec-trend-pill.trend-down {
    background: rgba(248, 113, 113, 0.1);
    color: var(--red);
    border: 1px solid rgba(248, 113, 113, 0.2);
}

/* WAF Widgets grid */
.sec-widgets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

@media (max-width:1200px) {
    .sec-widgets-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:700px) {
    .sec-widgets-grid {
        grid-template-columns: 1fr;
    }
}

.sec-waf-widget {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 11px;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.15s;
}

.sec-waf-widget:hover {
    border-color: var(--border-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

.sec-widget-accent {
    height: 3px;
    flex-shrink: 0;
}

.sec-widget-accent.wa-security {
    background: linear-gradient(90deg, #f87171, rgba(248, 113, 113, 0.2));
}

.sec-widget-accent.wa-reliability {
    background: linear-gradient(90deg, #4ade80, rgba(74, 222, 128, 0.2));
}

.sec-widget-accent.wa-performance {
    background: linear-gradient(90deg, #60a5fa, rgba(96, 165, 250, 0.2));
}

.sec-widget-accent.wa-cost {
    background: linear-gradient(90deg, #fbbf24, rgba(251, 191, 36, 0.2));
}

.sec-widget-accent.wa-ops {
    background: linear-gradient(90deg, #a78bfa, rgba(167, 139, 250, 0.2));
}

.sec-widget-accent.wa-sustain {
    background: linear-gradient(90deg, #34d399, rgba(52, 211, 153, 0.2));
}

.sec-widget-body {
    padding: 16px 18px 18px;
}

.sec-widget-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}

.sec-widget-pillar {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.sec-widget-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Score ring */
.sec-score-ring-wrap {
    position: relative;
    flex-shrink: 0;
}

.sec-score-ring-bg {
    fill: none;
    stroke: var(--bg-elevated);
    stroke-width: 5;
}

.sec-score-ring-fill {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease;
}

.sec-score-ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.sec-score-ring-val {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.sec-score-ring-pct {
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--text-muted);
}

.score-high .sec-score-ring-val {
    color: var(--green);
}

.score-med .sec-score-ring-val {
    color: var(--amber);
}

.score-low .sec-score-ring-val {
    color: var(--red);
}

.score-high .sec-score-ring-fill {
    stroke: var(--green);
}

.score-med .sec-score-ring-fill {
    stroke: var(--amber);
}

.score-low .sec-score-ring-fill {
    stroke: var(--red);
}

/* Finding chips */
.sec-widget-findings {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.sec-finding-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 5px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
}

.sec-finding-chip.fc-crit {
    background: rgba(248, 113, 113, 0.1);
    color: var(--red);
    border: 1px solid rgba(248, 113, 113, 0.2);
}

.sec-finding-chip.fc-high {
    background: rgba(249, 115, 22, 0.1);
    color: #fb923c;
    border: 1px solid rgba(249, 115, 22, 0.2);
}

.sec-finding-chip.fc-med {
    background: var(--amber-dim);
    color: var(--amber);
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.sec-finding-chip.fc-low {
    background: var(--green-dim);
    color: var(--green);
    border: 1px solid rgba(74, 222, 128, 0.3);
}

/* Widget checks */
.sec-widget-checks {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sec-wcheck {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    color: var(--text-muted);
}

.sec-wcheck-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sec-wcheck-dot.pass {
    background: var(--green);
}

.sec-wcheck-dot.fail {
    background: var(--red);
}

.sec-wcheck-dot.warn {
    background: var(--amber);
}

.sec-wcheck-label {
    flex: 1;
}

.sec-wcheck-count {
    font-family: var(--font-mono);
    font-size: 10px;
}

/* Findings section header */
.sec-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 12px;
}

.sec-section-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sec-section-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sec-section-icon svg {
    color: var(--red);
}

.sec-section-title {
    font-size: 16px;
    font-weight: 600;
}

.sec-section-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Filter pills */
.sec-findings-filters {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sec-filter-pill {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-sans);
}

.sec-filter-pill:hover {
    border-color: var(--border-hover);
    color: var(--text-secondary);
}

.sec-filter-pill.active {
    background: var(--green-dim);
    border-color: rgba(74, 222, 128, 0.3);
    color: var(--green);
}

.sec-filter-pill.f-crit.active {
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.3);
    color: var(--red);
}

.sec-filter-pill.f-high.active {
    background: rgba(249, 115, 22, 0.1);
    border-color: rgba(249, 115, 22, 0.3);
    color: #fb923c;
}

/* Findings table */
.sec-table-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 11px;
    overflow: hidden;
}

.sec-table-card table {
    width: 100%;
    border-collapse: collapse;
}

.sec-table-card thead tr {
    border-bottom: 1px solid var(--border);
}

.sec-table-card thead th {
    padding: 10px 16px;
    text-align: left;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.sec-table-card thead th:first-child {
    padding-left: 20px;
}

.sec-table-card thead th:last-child {
    padding-right: 20px;
}

.sec-table-card tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.12s;
}

.sec-table-card tbody tr:last-child {
    border-bottom: none;
}

.sec-table-card tbody tr:hover {
    background: rgba(255, 255, 255, 0.025);
}

.sec-table-card tbody td {
    padding: 0;
}

/* Finding row */
.sec-finding-row {
    display: flex;
    align-items: flex-start;
    padding: 14px 20px;
    gap: 14px;
}

.sec-finding-sev {
    flex-shrink: 0;
    margin-top: 1px;
}

.sec-sev-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    white-space: nowrap;
}

.sec-sev-badge.sev-critical {
    background: rgba(248, 113, 113, 0.1);
    color: var(--red);
    border: 1px solid rgba(248, 113, 113, 0.25);
}

.sec-sev-badge.sev-high {
    background: rgba(249, 115, 22, 0.1);
    color: #fb923c;
    border: 1px solid rgba(249, 115, 22, 0.2);
}

.sec-sev-badge.sev-medium {
    background: var(--amber-dim);
    color: var(--amber);
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.sec-sev-badge.sev-low {
    background: var(--green-dim);
    color: var(--green);
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.sec-finding-main {
    flex: 1;
    min-width: 0;
}

.sec-finding-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sec-finding-pillar-tag {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
}

.sec-finding-pillar-tag.ft-security {
    background: rgba(248, 113, 113, 0.1);
    color: var(--red);
}

.sec-finding-pillar-tag.ft-reliability {
    background: var(--green-dim);
    color: var(--green);
}

.sec-finding-pillar-tag.ft-performance {
    background: rgba(96, 165, 250, 0.12);
    color: var(--azure);
}

.sec-finding-pillar-tag.ft-cost {
    background: var(--amber-dim);
    color: var(--amber);
}

.sec-finding-pillar-tag.ft-ops {
    background: rgba(167, 139, 250, 0.12);
    color: #a78bfa;
}

.sec-finding-pillar-tag.ft-sustain {
    background: rgba(52, 211, 153, 0.1);
    color: #34d399;
}

.sec-finding-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.55;
    margin-bottom: 8px;
}

/* Remediation */
.sec-remediation {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
}

.sec-remediation-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.sec-remediation-steps {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sec-rem-step {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.sec-rem-step-num {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.sec-rem-step code {
    font-family: var(--font-mono);
    font-size: 10.5px;
    background: rgba(255, 255, 255, 0.06);
    padding: 0 4px;
    border-radius: 3px;
    color: var(--azure);
}

/* Finding meta */
.sec-finding-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
    min-width: 120px;
}

.sec-finding-resource {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    text-align: right;
}

.sec-finding-resource span {
    color: var(--text-secondary);
}

.sec-finding-effort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 4px;
}

.sec-finding-effort.effort-low {
    background: var(--green-dim);
    color: var(--green);
}

.sec-finding-effort.effort-med {
    background: var(--amber-dim);
    color: var(--amber);
}

.sec-finding-effort.effort-high {
    background: rgba(248, 113, 113, 0.1);
    color: var(--red);
}

/* Animations */
.sec-waf-widget {
    animation: entityFadeUp 0.3s ease both;
}

.sec-waf-widget:nth-child(1) {
    animation-delay: 0.04s;
}

.sec-waf-widget:nth-child(2) {
    animation-delay: 0.08s;
}

.sec-waf-widget:nth-child(3) {
    animation-delay: 0.12s;
}

.sec-waf-widget:nth-child(4) {
    animation-delay: 0.16s;
}

.sec-waf-widget:nth-child(5) {
    animation-delay: 0.20s;
}

.sec-waf-widget:nth-child(6) {
    animation-delay: 0.24s;
}

.sec-table-card tbody tr {
    animation: entityFadeUp 0.28s ease both;
}

.sec-table-card tbody tr:nth-child(1) {
    animation-delay: 0.08s;
}

.sec-table-card tbody tr:nth-child(2) {
    animation-delay: 0.12s;
}

.sec-table-card tbody tr:nth-child(3) {
    animation-delay: 0.16s;
}

.sec-table-card tbody tr:nth-child(4) {
    animation-delay: 0.20s;
}

.sec-table-card tbody tr:nth-child(5) {
    animation-delay: 0.24s;
}

.sec-table-card tbody tr:nth-child(6) {
    animation-delay: 0.28s;
}


/* ═══════════════════════════════════════════════════════════
   INVENTORY DASHBOARD (inv- prefix)
   ═══════════════════════════════════════════════════════════ */

.inv-shell {
    display: flex;
    min-height: calc(100vh - var(--topnav-height));
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -28px;
    margin-bottom: -28px;
}

/* Loading */
.inv-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--topnav-height, 56px));
    gap: 8px;
}

.inv-loading-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border);
    border-top-color: var(--green);
    border-radius: 50%;
    animation: inv-spin 0.6s linear infinite;
}

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

/* Sidebar */
.inv-sidebar {
    width: 220px;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: sticky;
    top: var(--topnav-height, 56px);
    height: calc(100vh - var(--topnav-height, 56px));
    overflow: hidden;
}

.inv-sidebar-head {
    padding: 16px 14px 12px;
    border-bottom: 1px solid var(--border);
}

.inv-sidebar-title {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.inv-sidebar-search {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 7px;
    transition: border-color 0.15s;
}

.inv-sidebar-search:focus-within {
    border-color: var(--border-active);
    box-shadow: 0 0 0 3px var(--green-dim);
}

.inv-sidebar-search svg {
    flex-shrink: 0;
    color: var(--text-muted);
}

.inv-sidebar-search input {
    background: none;
    border: none;
    outline: none;
    font-size: 12px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    width: 100%;
}

.inv-sidebar-search input::placeholder {
    color: var(--text-muted);
}

.inv-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.inv-sidebar-body::-webkit-scrollbar {
    width: 3px;
}

.inv-sidebar-body::-webkit-scrollbar-thumb {
    background: var(--surface3, #1c2235);
    border-radius: 2px;
}

.inv-sidebar-footer {
    padding: 12px 14px;
    border-top: 1px solid var(--border);
}

/* Category items */
.inv-cat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 14px;
    cursor: pointer;
    transition: background 0.12s;
    border-left: 3px solid transparent;
}

.inv-cat-item:hover {
    background: var(--bg-elevated);
}

.inv-cat-item.active {
    background: var(--green-dim);
    border-left-color: var(--green);
}

.inv-cat-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inv-cat-icon {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 700;
    flex-shrink: 0;
}

.inv-cat-name {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
}

.inv-cat-item.active .inv-cat-name {
    color: var(--green);
}

.inv-cat-count {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--bg-elevated);
    color: var(--text-muted);
}

.inv-cat-item.active .inv-cat-count {
    background: var(--green);
    color: #0a0d13;
}

/* Account chip */
.inv-account-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.inv-account-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 4px var(--green);
    flex-shrink: 0;
}

.inv-account-id {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
}

/* Main area */
.inv-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* Toolbar */
.inv-toolbar {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    flex-shrink: 0;
}

.inv-toolbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    flex: 1;
    max-width: 480px;
    transition: border-color 0.15s;
}

.inv-toolbar-search:focus-within {
    border-color: var(--border-active);
    box-shadow: 0 0 0 3px var(--green-dim);
}

.inv-toolbar-search svg {
    flex-shrink: 0;
    color: var(--text-muted);
}

.inv-toolbar-search input {
    background: none;
    border: none;
    outline: none;
    font-size: 13px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    width: 100%;
}

.inv-toolbar-search input::placeholder {
    color: var(--text-muted);
}

.inv-toolbar-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    margin-left: auto;
}

.inv-toolbar-meta strong {
    color: var(--green);
}

/* Date picker dropdown */
.inv-date-wrap {
    position: relative;
    flex-shrink: 0;
}

.inv-date-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    user-select: none;
}

.inv-date-btn:hover {
    border-color: var(--border-hover);
    color: var(--text);
}

.inv-date-btn.open {
    border-color: var(--border-active);
    color: var(--green);
    background: var(--green-dim);
}

.inv-date-btn svg.inv-cal-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.inv-date-caret {
    width: 9px;
    height: 9px;
    opacity: 0.45;
    transition: transform 0.15s;
}

.inv-date-btn.open .inv-date-caret {
    transform: rotate(180deg);
}

.inv-date-dd {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 300;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px;
    min-width: 210px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s;
}

.inv-date-dd.open {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

.inv-dd-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    padding: 4px 8px 5px;
}

.inv-dd-item {
    display: flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--text-muted);
    transition: all 0.1s;
    gap: 8px;
}

.inv-dd-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-dim);
}

.inv-dd-item.active {
    background: var(--green-dim);
    color: var(--green);
}

.inv-dd-item svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.inv-dd-kbd {
    font-family: var(--font-mono);
    font-size: 9px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    color: var(--text-muted);
    margin-left: auto;
}

.inv-dd-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

.inv-dd-custom {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 7px;
    background: var(--surface2);
    border: 1px solid var(--border);
    margin: 2px 0;
}

.inv-dd-custom input[type="date"] {
    background: none;
    border: none;
    outline: none;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-dim);
    cursor: pointer;
    color-scheme: dark;
    padding: 0;
    width: 100%;
}

.inv-dd-apply {
    width: 100%;
    margin-top: 4px;
    padding: 6px;
    background: var(--green);
    color: #0a0d13;
    border: none;
    border-radius: 7px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
}

.inv-dd-apply:hover {
    opacity: 0.88;
}

/* Stats row */
.inv-stats-row {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-card);
}

.inv-stat-chip {
    flex: 1;
    padding: 14px 20px;
    border-right: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
}

.inv-stat-chip:last-child {
    border-right: none;
}

.inv-stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.inv-stat-icon svg {
    width: 14px;
    height: 14px;
}

.inv-stat-val {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

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

/* Table */
.inv-table-wrap {
    flex: 1;
    overflow-y: auto;
}

.inv-table-wrap::-webkit-scrollbar {
    width: 4px;
}

.inv-table-wrap::-webkit-scrollbar-thumb {
    background: var(--surface3, #1c2235);
    border-radius: 2px;
}

.inv-table {
    width: 100%;
    border-collapse: collapse;
}

.inv-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-card);
}

.inv-table thead tr {
    border-bottom: 1px solid var(--border);
}

.inv-table thead th {
    padding: 10px 16px;
    text-align: left;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.inv-table thead th:hover {
    color: var(--text-secondary);
}

.inv-table thead th.sorted {
    color: var(--green);
}

.inv-table thead th:first-child {
    padding-left: 20px;
}

.inv-table thead th:last-child {
    padding-right: 20px;
}

.inv-sort-icon {
    display: inline;
    opacity: 0.5;
    font-size: 8px;
    margin-left: 3px;
}

.inv-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
    cursor: pointer;
    animation: inv-fadeUp 0.18s ease both;
}

.inv-table tbody tr:last-child {
    border-bottom: none;
}

.inv-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.025);
}

.inv-table tbody tr.selected {
    background: var(--green-dim);
}

.inv-table tbody td {
    padding: 11px 16px;
    font-size: 12.5px;
    color: var(--text-secondary);
    white-space: nowrap;
    vertical-align: middle;
}

.inv-table tbody td:first-child {
    padding-left: 20px;
    color: var(--text-primary);
    font-weight: 500;
}

.inv-table tbody td:last-child {
    padding-right: 20px;
}

.inv-truncate {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

@keyframes inv-fadeUp {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

/* Service badges */
.inv-svc-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    white-space: nowrap;
}

.inv-svc-acm {
    background: rgba(99, 179, 237, 0.12);
    color: #63b3ed;
    border: 1px solid rgba(99, 179, 237, 0.2);
}

.inv-svc-amazonmq {
    background: rgba(252, 129, 74, 0.12);
    color: #fc814a;
    border: 1px solid rgba(252, 129, 74, 0.2);
}

.inv-svc-efs {
    background: rgba(154, 230, 180, 0.12);
    color: #68d391;
    border: 1px solid rgba(154, 230, 180, 0.2);
}

.inv-svc-eks {
    background: var(--aws-dim);
    color: var(--aws);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.inv-svc-elasticloadbalancingv2 {
    background: var(--azure-dim);
    color: var(--azure);
    border: 1px solid rgba(96, 165, 250, 0.2);
}

.inv-svc-kms {
    background: rgba(167, 139, 250, 0.12);
    color: #a78bfa;
    border: 1px solid rgba(167, 139, 250, 0.2);
}

.inv-svc-lambda {
    background: rgba(248, 113, 113, 0.1);
    color: var(--red);
    border: 1px solid rgba(248, 113, 113, 0.2);
}

.inv-svc-opensearch {
    background: rgba(52, 211, 153, 0.1);
    color: #34d399;
    border: 1px solid rgba(52, 211, 153, 0.2);
}

.inv-svc-rds {
    background: var(--amber-dim);
    color: var(--amber);
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.inv-svc-s3 {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
    border: 1px solid rgba(252, 211, 77, 0.2);
}

.inv-svc-secretsmanager {
    background: rgba(248, 113, 113, 0.1);
    color: var(--red);
    border: 1px solid rgba(248, 113, 113, 0.2);
}

.inv-svc-sqs {
    background: rgba(167, 139, 250, 0.12);
    color: #c4b5fd;
    border: 1px solid rgba(167, 139, 250, 0.2);
}

/* Region badge */
.inv-region-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    background: var(--bg-elevated);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* Tag chips */
.inv-tag-list {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.inv-tag-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 9px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    color: var(--text-muted);
    white-space: nowrap;
}

.inv-tag-chip span {
    color: var(--text-secondary);
}

/* No results */
.inv-no-results {
    padding: 48px 20px;
    text-align: center;
}

.inv-no-results-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.inv-no-results-sub {
    font-size: 12.5px;
    color: var(--text-muted);
}

/* Detail panel */
.inv-detail-panel {
    width: 360px;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: sticky;
    top: var(--topnav-height, 56px);
    height: calc(100vh - var(--topnav-height, 56px));
    overflow: hidden;
    transition: width 0.2s ease;
}

.inv-detail-panel.hidden {
    width: 0;
    border-left: none;
}

.inv-detail {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.inv-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    padding: 40px;
    text-align: center;
}

.inv-empty-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.inv-empty-icon svg {
    color: var(--text-muted);
}

.inv-empty-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.inv-empty-sub {
    font-size: 12px;
    color: var(--text-muted);
}

.inv-detail-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-shrink: 0;
}

.inv-detail-close {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.12s;
    flex-shrink: 0;
}

.inv-detail-close:hover {
    background: var(--bg-elevated);
    color: var(--text-secondary);
}

.inv-detail-svc-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 700;
    flex-shrink: 0;
}

.inv-detail-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    word-break: break-all;
}

.inv-detail-type {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
}

.inv-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.inv-detail-body::-webkit-scrollbar {
    width: 3px;
}

.inv-detail-body::-webkit-scrollbar-thumb {
    background: var(--surface3, #1c2235);
    border-radius: 2px;
}

.inv-detail-section {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.inv-detail-section:last-child {
    border-bottom: none;
}

.inv-detail-section-title {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.inv-detail-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.inv-detail-row:last-child {
    margin-bottom: 0;
}

.inv-detail-key {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    width: 110px;
    flex-shrink: 0;
    padding-top: 1px;
}

.inv-detail-val {
    font-size: 12px;
    color: var(--text-secondary);
    word-break: break-all;
    flex: 1;
}

.inv-detail-val.mono {
    font-family: var(--font-mono);
    font-size: 10.5px;
}

.inv-green {
    color: var(--green);
}

/* Config tree */
.inv-cfg-tree {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.inv-cfg-key {
    color: var(--azure);
}

.inv-cfg-str {
    color: var(--green);
}

.inv-cfg-num {
    color: var(--amber);
}

.inv-cfg-true {
    color: var(--green);
}

.inv-cfg-false {
    color: var(--red);
}

.inv-cfg-null {
    color: var(--text-muted);
}

.inv-cfg-block {
    margin-left: 14px;
    border-left: 1px solid var(--border);
    padding-left: 10px;
}

/* ═══════════════════════════════════════════════════
   Canvas Custom Code Editor (Right Panel)
   ═══════════════════════════════════════════════════ */

.ce-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.ce-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.ce-lang-badge {
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #a78bfa;
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.2);
    padding: 1px 5px;
    border-radius: 3px;
}

.ce-file-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
}

.ce-unsaved-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange);
    flex-shrink: 0;
}

.ce-save-status {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-muted);
}

.ce-save-status.saved {
    color: var(--green);
}

.ce-validate-btn {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.12s;
    font-family: var(--font-sans);
}

.ce-validate-btn:hover {
    border-color: var(--border-light);
    color: var(--text-primary);
}

/* Editor area */
.ce-editor {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

.ce-gutter {
    width: 36px;
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    overflow: hidden;
    flex-shrink: 0;
    padding-top: 8px;
}

.ce-ln {
    height: 19px;
    line-height: 19px;
    text-align: right;
    padding-right: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    user-select: none;
    opacity: 0.5;
}

.ce-ln-err {
    color: var(--red);
    opacity: 1;
    font-weight: 600;
}

.ce-editor-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
}

.ce-highlight {
    position: absolute;
    inset: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 19px;
    padding: 8px 12px;
    tab-size: 2;
    white-space: pre;
    overflow: auto;
    pointer-events: none;
    word-wrap: normal;
}

.ce-textarea {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    resize: none;
    border: none;
    outline: none;
    background: transparent;
    color: transparent;
    caret-color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 19px;
    padding: 8px 12px;
    tab-size: 2;
    white-space: pre;
    overflow: auto;
    min-height: 0;
}

.ce-textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
}

.ce-textarea::selection {
    background: rgba(74, 222, 128, 0.2);
}

/* Lock banner */
.ce-lock-banner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
}

/* Syntax highlighting colors */
.ce-hl-keyword {
    color: #c678dd;
    font-weight: 600;
}

.ce-hl-string {
    color: #98c379;
}

.ce-hl-string .ce-hl-interp {
    color: #e5c07b;
}

.ce-hl-number {
    color: #d19a66;
}

.ce-hl-comment {
    color: #5c6370;
    font-style: italic;
}

.ce-hl-type {
    color: #e5c07b;
}

.ce-hl-builtin {
    color: #56b6c2;
}

.ce-hl-attr {
    color: #61afef;
}

.ce-hl-func {
    color: #61afef;
}

.ce-hl-bracket {
    color: #abb2bf;
}

.ce-hl-op {
    color: #56b6c2;
}

/* Problems */
.ce-problems {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    background: var(--bg-surface);
    max-height: 120px;
    display: flex;
    flex-direction: column;
}

.ce-prob-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.ce-prob-count {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    color: var(--red);
    background: var(--red-dim);
    padding: 0 5px;
    border-radius: 6px;
}

.ce-prob-ok {
    font-size: 9px;
    color: var(--green);
}

.ce-prob-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
}

.ce-prob-close:hover {
    color: var(--text-primary);
}

.ce-prob-body {
    overflow-y: auto;
    padding: 2px 0;
}

.ce-prob-empty {
    padding: 8px 10px;
    font-size: 10px;
    color: var(--text-muted);
}

.ce-prob-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    font-size: 10px;
    cursor: pointer;
    transition: background 0.1s;
}

.ce-prob-row:hover {
    background: var(--bg-card);
}

.ce-prob-msg {
    color: var(--text-secondary);
    flex: 1;
    font-size: 10px;
}

.ce-prob-loc {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Status bar */
.ce-statusbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    height: 20px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Expand/collapse button */
.ce-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.ce-expand-btn:hover {
    border-color: var(--border-light);
    color: var(--text-primary);
    background: var(--bg-card);
}