/** * UGONE module bridge — harmonize legacy module class names with executive theme v7. * Loaded LAST in (or via sidebar boot / page finish on legacy pages). */ body.ugone-app, body:has(.ugone-content-column), body:has(.hr-page-column), body:has(.acc-page-column), body:has(.bd-page-column), body:has(.doc-page-column), body:has(.stf-page-column), body:has(.cmp-page-column), body:has(.main-content), body:has(.proj-page), body:has(.proj-shell), body:has(.cm-page) { color: #0f172a !important; font-family: var(--ugone-font) !important; background: var(--ugone-bg) !important; background-image: radial-gradient(ellipse 120% 80% at 100% -20%, rgba(13, 148, 136, 0.08), transparent 50%), radial-gradient(ellipse 80% 50% at 0% 100%, rgba(30, 58, 95, 0.06), transparent 45%) !important; } body.ugone-app .sidebar, body:has(.ugone-content-column) .sidebar { background: linear-gradient(180deg, var(--ugone-blue-dark) 0%, var(--ugone-blue) 45%, var(--ugone-teal-dark) 100%); border-right: 1px solid rgba(255, 255, 255, 0.08); } body:has(.main-content) .sidebar, body:has(.proj-page) .sidebar, body:has(.proj-shell) .sidebar { background: linear-gradient(180deg, var(--ugone-blue-dark) 0%, var(--ugone-blue) 45%, var(--ugone-teal-dark) 100%); border-right: 1px solid rgba(255, 255, 255, 0.08); } body.ugone-app .topbar, body:has(.ugone-content-column) .topbar, body:has(.main-content) .topbar, body:has(.proj-page) .topbar, body:has(.proj-shell) .topbar { background: linear-gradient(135deg, var(--ugone-blue) 0%, var(--ugone-teal-dark) 55%, var(--ugone-blue-light) 100%); border-bottom: 1px solid rgba(255, 255, 255, 0.12); box-shadow: var(--ugone-shadow-md); } /* ── Executive hero headers (all modules) ── */ .ugone-page-header, .hr-page-header, .acc-hero, .proj-shell-header, .cmp-page-header, .doc-page-header, .bd-page-header, .bd-hero, .stf-page-header, .page-header, .table-header { position: relative; overflow: hidden; background: var(--ugone-gradient-hero) !important; color: #fff !important; border: none !important; border-radius: var(--ugone-radius-xl) !important; box-shadow: var(--ugone-shadow-hover) !important; padding: 24px 28px !important; margin-bottom: 24px !important; } .hr-page-header, .acc-hero, .proj-shell-header, .cmp-page-header, .doc-page-header, .bd-page-header, .bd-hero, .stf-page-header, .page-header { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; justify-content: space-between !important; gap: 16px !important; } .bd-page-actions, .hr-actions, .acc-actions, .proj-shell-actions, .cmp-page-actions, .stf-page-actions { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; justify-content: flex-end !important; } .bd-page-header .bd-btn-secondary, .hr-page-header .hr-btn-secondary, .acc-hero .acc-btn.secondary { background: rgba(255, 255, 255, 0.95) !important; color: var(--ugone-navy) !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; } .bd-page-header .bd-btn:not(.bd-btn-secondary):not(.bd-btn-ghost), .hr-page-header .hr-btn-primary, .acc-hero .acc-btn:not(.secondary) { background: rgba(255, 255, 255, 0.18) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; } .ugone-page-header::after, .hr-page-header::after, .acc-hero::after, .proj-shell-header::after, .cmp-page-header::after, .doc-page-header::after, .bd-page-header::after, .bd-hero::after, .stf-page-header::after, .page-header::after, .table-header::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); opacity: 0.9; pointer-events: none; } .ugone-page-header > *, .hr-page-header > *, .acc-hero > *, .proj-shell-header > *, .cmp-page-header > *, .doc-page-header > *, .bd-page-header > *, .bd-hero > *, .stf-page-header > *, .page-header > *, .table-header > * { position: relative; z-index: 1; } .hr-page-header h1, .acc-hero h1, .proj-shell-header h1, .cmp-page-header h1, .doc-page-header h1, .bd-page-header h1, .bd-hero h1, .stf-page-header h1, .page-header h1, .table-header h1 { color: #fff !important; font-weight: 800 !important; letter-spacing: -0.02em; } .hr-page-header p, .acc-hero p, .proj-shell-sub, .proj-shell-header p, .cmp-page-header p, .doc-page-header p, .bd-page-header p, .bd-hero p, .stf-page-sub, .stf-page-header p, .page-header p, .table-header p { color: rgba(255, 255, 255, 0.92) !important; } .hr-kicker, .proj-kicker, .doc-kicker, .stf-kicker, .bd-kicker { color: rgba(255, 255, 255, 0.88) !important; opacity: 1 !important; } .acc-hero > div > p[style*="uppercase"], .acc-hero > div > p:first-child { color: rgba(255, 255, 255, 0.85) !important; } /* ── Cards & panels ── */ .ugone-card, .acc-card, .acc-stat, .bd-card, .bd-directory-card, .doc-card, .doc-panel, .proj-card, .proj-hub-card, .cmp-card, .stf-card, .hr-card, .card, .content-card, .main-card, .chart-card, .table-container, .filter-section, .stats-card, .admin-card, .panel, .dash-card, .cm-card, .cm-stat-card { position: relative; background: var(--ugone-surface) !important; border: 1px solid var(--ugone-border) !important; border-radius: var(--ugone-radius-lg) !important; box-shadow: var(--ugone-shadow-sm) !important; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .ugone-card::before, .acc-card::before, .acc-stat::before, .bd-card::before, .bd-directory-card::before, .doc-card::before, .proj-card::before, .proj-hub-card::before, .cmp-card::before, .stf-card::before, .hr-card::before, .card::before, .content-card::before, .main-card::before, .chart-card::before, .stat-card::before, .admin-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--ugone-gradient-accent); opacity: 0.85; z-index: 1; } .ugone-card:hover, .acc-card:hover, .acc-stat:hover, .bd-card:hover, .bd-directory-card:hover, .doc-card:hover, .proj-card:hover, .proj-hub-card:hover, .cmp-card:hover, .stf-card:hover, .hr-card:hover, .card:hover, .content-card:hover, .stat-card:hover, .admin-card:hover { transform: translateY(-2px); box-shadow: var(--ugone-shadow-hover) !important; border-color: rgba(13, 148, 136, 0.25) !important; } /* ── KPI / stat tiles (MD Command Center pattern) ── */ .ugone-kpi-card, .ugone-kpi-strip .ugone-kpi-card, .acc-stat span, .doc-card-label, .bd-card-label, .bd-stat-label, .hr-card-label, .proj-card-label, .stf-card-label, .stat-label, .stat-card h4 { font-size: 11px !important; color: var(--ugone-grey) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; font-weight: 700 !important; line-height: 1.35 !important; } .ugone-kpi-card .n, .acc-stat strong, .doc-card strong, .bd-card strong, .bd-stat-value, .hr-card strong, .proj-card strong, .proj-hub-card strong, .stf-card strong, .stat-card p, .stat-card .stat-number, .stat-value { color: var(--ugone-teal-dark) !important; font-weight: 800 !important; font-variant-numeric: tabular-nums !important; letter-spacing: -0.03em !important; font-size: 1.85rem !important; line-height: 1.1 !important; } .bd-card p, .hr-card p, .proj-card p, .proj-hub-card p, .acc-stat small { margin-top: 8px !important; font-size: 12px !important; color: var(--ugone-grey) !important; line-height: 1.45 !important; } a.bd-card, a.hr-card, a.proj-hub-card, a.ugone-directory-card { text-decoration: none !important; color: inherit !important; display: block !important; } .ugone-kpi-strip, .ugone-stat-grid, .bd-grid, .hr-grid, .proj-card-grid, .acc-stats { gap: 14px !important; } .ugone-section-title, .bd-section-title, .hr-section-title, .proj-section-title { scroll-margin-top: 24px; margin: 32px 0 16px !important; padding: 0 0 12px 4px !important; font-size: 1.2rem !important; font-weight: 800 !important; color: var(--ugone-navy) !important; border-bottom: 3px solid transparent !important; border-image: var(--ugone-gradient-accent) 1 !important; } /* ── Section titles ── */ .ugone-directory-section-title, .acc-card h2, .bd-card h2, .doc-panel-header h2, .proj-section-title, .cmp-section-title { color: var(--ugone-navy) !important; font-weight: 800 !important; } .ugone-directory-section-title { border-bottom: 3px solid transparent; border-image: var(--ugone-gradient-accent) 1; padding-bottom: 12px; } /* HR module KPI tiles */ .hr-card, a.hr-card { position: relative; padding-top: 1.45rem !important; } .hr-grid { margin-bottom: 24px !important; } /* CM / legacy shells — only when no unified page column exists (see ugone-layout-shell.css) */ body:not(:has(.ugone-content-column)):not(:has(.hr-page-column)):not(:has(.acc-page-column)):not(:has(.bd-page-column)):not(:has(.stf-page-column)):not(:has(.doc-page-column)):not(:has(.cmp-page-column)):not(:has(.proj-page-column)) .main-content, body:not(:has(.ugone-content-column)):not(:has(.hr-page-column)):not(:has(.acc-page-column)):not(:has(.bd-page-column)):not(:has(.stf-page-column)):not(:has(.doc-page-column)):not(:has(.cmp-page-column)):not(:has(.proj-page-column)) .proj-workspace { margin-left: var(--ugone-content-offset, 250px); width: calc(100% - var(--ugone-content-offset, 250px)); box-sizing: border-box; } @media (max-width: 768px) { body:not(:has(.ugone-content-column)) .main-content { margin-left: 0; width: 100%; } } .access-denied, .denied-icon { text-align: center; } .ugone-alert, .alert-info { border-radius: var(--ugone-radius-md) !important; } /* ── Tables ── */ .ugone-table th, table th, .acc-table th, .bd-table th, .doc-table th, .proj-table th { background: #f8fafc !important; color: var(--ugone-grey) !important; font-weight: 700 !important; font-size: 0.72rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; border-bottom: 1px solid #eef2f7 !important; } table tbody tr:nth-child(even) td, .ugone-table tbody tr:nth-child(even) td { background: #fcfcfd; } table tbody tr:hover td, .ugone-table tbody tr:hover td { background: var(--ugone-teal-muted) !important; } /* ── Primary buttons ── */ .ugone-btn--primary, .hr-btn-primary, .hr-btn.hr-btn-primary, .acc-btn:not(.secondary):not(.success):not(.danger):not(.warning), .bd-btn:not(.bd-btn-secondary):not(.bd-btn-ghost), .doc-btn--primary, .proj-btn:not(.proj-btn--ghost), .cmp-btn:not(.cmp-btn-ghost), .stf-btn:not(.stf-btn--ghost), button[type="submit"]:not(.secondary):not(.ugone-btn--secondary), .btn-primary { background: linear-gradient(135deg, var(--ugone-navy) 0%, var(--ugone-teal-dark) 100%) !important; color: #fff !important; border: none !important; border-radius: var(--ugone-radius-sm) !important; box-shadow: 0 4px 14px rgba(30, 58, 95, 0.28) !important; font-weight: 700 !important; } .hr-btn-secondary, .acc-btn.secondary, .bd-btn-secondary, .bd-btn.bd-btn-secondary, .doc-btn--ghost, .proj-btn--ghost, .cmp-btn-ghost, .stf-btn--ghost, .ugone-btn--secondary { background: var(--ugone-surface) !important; color: var(--ugone-navy) !important; border: 1px solid var(--ugone-border) !important; border-radius: var(--ugone-radius-sm) !important; } .hr-btn-secondary:hover, .acc-btn.secondary:hover, .bd-btn-secondary:hover, .doc-btn--ghost:hover, .proj-btn--ghost:hover, .stf-btn--ghost:hover, .ugone-btn--secondary:hover { background: var(--ugone-teal-dim) !important; border-color: rgba(13, 148, 136, 0.35) !important; color: var(--ugone-teal-dark) !important; } .acc-hero .acc-btn { background: #fff !important; color: var(--ugone-navy) !important; } /* ── Badges ── */ .ugone-badge, .hr-badge, .acc-badge, .bd-badge, .doc-badge { border-radius: 999px; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 11px; } /* ── Forms ── */ input:focus, select:focus, textarea:focus, .ugone-input:focus, .ugone-select:focus, .ugone-textarea:focus { outline: none !important; border-color: var(--ugone-teal) !important; box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.18) !important; } /* ── Directory / mosaic tiles ── */ .ugone-directory-card, .bd-directory-card { min-height: 132px; text-decoration: none; color: inherit; } .ugone-directory-card-title, .bd-directory-card strong { color: var(--ugone-navy) !important; font-weight: 800 !important; } /* ── Legacy main-content padding ── */ .main-content, .acc-main, .acc-shell, .hr-page, .bd-page, .doc-page, .staff-page, .cmp-page, .proj-page { padding: 20px 28px 36px; box-sizing: border-box; } @media (max-width: 768px) { .main-content, .acc-main, .hr-page, .bd-page, .doc-page, .staff-page, .cmp-page, .proj-page { padding: 14px 16px 24px; } } /* ── Construction Management (CM) legacy pages ── */ .main-content { background: transparent !important; min-height: calc(100vh - var(--ugone-topbar-height, 64px)); } .stats-grid, .cm-stats-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; gap: 14px !important; margin-bottom: 24px !important; } .stat-card, .cm-stat-card { padding: 1.25rem 1.35rem !important; text-align: left !important; } .stat-card .stat-value, .cm-stat-card .stat-value { color: var(--ugone-teal-dark) !important; font-weight: 800 !important; font-size: 1.85rem !important; line-height: 1.1 !important; } .card-header { padding: 1rem 1.35rem !important; border-bottom: 1px solid var(--ugone-border) !important; background: #f8fafc !important; } .breadcrumb, .cm-breadcrumb { font-size: 0.85rem !important; color: var(--ugone-grey) !important; } .breadcrumb a, .cm-breadcrumb a { color: var(--ugone-teal-dark) !important; text-decoration: none !important; font-weight: 600 !important; } .form-control, .form-input, .cm-input, input[type="text"], input[type="number"], input[type="email"], input[type="date"], input[type="file"], select, textarea { border: 1px solid var(--ugone-border) !important; border-radius: var(--ugone-radius-sm) !important; padding: 0.55rem 0.75rem !important; font-family: var(--ugone-font) !important; font-size: 0.92rem !important; background: var(--ugone-surface) !important; } .form-label, .cm-label, label { font-size: 0.82rem !important; font-weight: 700 !important; color: var(--ugone-navy) !important; letter-spacing: 0.02em !important; } .form-grid, .cm-form-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; gap: 16px !important; } .form-group, .cm-form-group { margin-bottom: 1rem !important; } .empty-state, .cm-empty { text-align: center !important; padding: 2.5rem 1.5rem !important; color: var(--ugone-grey) !important; } .empty-state h3, .cm-empty h3 { color: var(--ugone-navy) !important; font-weight: 800 !important; } .review-table, .doc-table, .cm-table, table.data-table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; border-radius: var(--ugone-radius-md) !important; overflow: hidden !important; border: 1px solid var(--ugone-border) !important; background: var(--ugone-surface) !important; } .status-badge, .cm-status-badge { display: inline-flex !important; align-items: center !important; border-radius: 999px !important; padding: 4px 11px !important; font-size: 0.72rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; } .status-pending, .cm-status-pending { background: var(--ugone-warning-bg) !important; color: var(--ugone-warning) !important; } .status-approved, .cm-status-approved { background: var(--ugone-success-bg) !important; color: var(--ugone-success) !important; } .status-rejected, .cm-status-rejected { background: var(--ugone-danger-bg) !important; color: var(--ugone-danger) !important; } .btn-delete, .cm-btn-danger { background: var(--ugone-danger-bg) !important; color: var(--ugone-danger) !important; border: 1px solid rgba(220, 38, 38, 0.25) !important; border-radius: var(--ugone-radius-sm) !important; font-weight: 700 !important; } .upload-section, .cm-upload-section { padding: 1.35rem !important; margin-bottom: 1.25rem !important; border: 1px dashed rgba(13, 148, 136, 0.35) !important; border-radius: var(--ugone-radius-md) !important; background: var(--ugone-teal-muted) !important; } .form-title, .cm-form-title { font-size: 1.05rem !important; font-weight: 800 !important; color: var(--ugone-navy) !important; margin-bottom: 1rem !important; } .page-title h1, .header-content h1 { color: #fff !important; } .page-title p, .header-content p { color: rgba(255, 255, 255, 0.92) !important; } .page-header::before, .table-header::before { display: none !important; } .page-title h1::before { filter: brightness(1.2); } /* ── Full-width content column (all modules) ── */ .ugone-content-column, .hr-page-column, .stf-page-column, .acc-page-column, .bd-page-column, .doc-page-column, .cmp-page-column, .proj-page-column { margin-left: var(--ugone-content-offset, 250px) !important; width: calc(100% - var(--ugone-content-offset, 250px)) !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box !important; } .ugone-content-column .main-content, .ugone-content-column .hr-page, .ugone-content-column .ugone-main, .hr-page-column .main-content, .hr-page-column .hr-page, .stf-page-column .main-content, .stf-page-column .staff-page, .acc-page-column .acc-main, .acc-page-column .acc-shell, .bd-page-column .bd-page, .doc-page-column .doc-page, .cmp-page-column .cmp-page, .proj-page-column .proj-page, .proj-shell { margin-left: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Prevent nested staff/legacy shells from double sidebar offset */ .ugone-content-column .main-content.staff-page, .hr-page-column .main-content.staff-page, .hr-page-column .staff-work-page, .hr-page-column .maa-wrap, .stf-page-column .staff-work-page, .stf-page-column .maa-wrap, .main-content .main-content { margin-left: 0 !important; width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; background: transparent !important; } /* Only zero inner main-content when the v2 page column already cleared the sidebar */ body.ugone-app .ugone-content-column .main-content, body.ugone-app .hr-page-column .main-content, body.ugone-app .stf-page-column .main-content, body.ugone-app .acc-page-column .main-content, body.ugone-app .bd-page-column .main-content, body.ugone-app .doc-page-column .main-content, body.ugone-app .cmp-page-column .main-content, body.ugone-app .proj-page-column .main-content, body.ugone-app .acc-page-column .acc-page, body.ugone-app .acc-page-column .acc-main, body.ugone-app .acc-page-column .acc-shell { margin-left: 0 !important; width: 100% !important; max-width: 100% !important; } @media (max-width: 768px) { .ugone-content-column, .hr-page-column, .stf-page-column, .acc-page-column, .bd-page-column, .doc-page-column, .cmp-page-column, .proj-page-column { width: 100% !important; margin-left: 0 !important; } }