/* ═══════════════════════════════════════════════════════════════════ InfraTrack Modern UI v2 — Falcon Aviation Upload to: public/static/infratrack-modern-ui.css Add ONE line to layout.php inside AFTER the enterprise-v4.css link: ═══════════════════════════════════════════════════════════════════ NOTE: All colors use var(--primary) which is set from Organization Settings brand color. No hardcoded hex colors. */ /* ── GLOBAL FONT & SMOOTHING ── */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; -webkit-font-smoothing: antialiased !important; } /* ── SIDEBAR ── */ .side { background: #fff !important; border-right: 1px solid rgba(0,0,0,.08) !important; } .brand .logo { border-radius: 12px !important; box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent) !important; } .side nav a:hover { background: color-mix(in srgb, var(--primary) 6%, transparent) !important; color: var(--primary) !important; } .side nav a.active { background: color-mix(in srgb, var(--primary) 8%, transparent) !important; color: var(--primary) !important; border-left: 3px solid var(--primary) !important; font-weight: 600 !important; } /* ── TOPBAR ── */ .appbar { background: rgba(255,255,255,.96) !important; backdrop-filter: blur(20px) !important; border-bottom: 1px solid rgba(0,0,0,.07) !important; } .global-search:focus-within { border-color: var(--primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent) !important; } /* ── PAGE HEADERS ── */ .page-head h1, .ops-head h1, .top h1 { font-size: 22px !important; font-weight: 700 !important; letter-spacing: -.3px !important; } .eyebrow { color: var(--primary) !important; font-size: 10.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .10em !important; } /* ── CARDS / PANELS ── */ .card, .panel, .ops-panel, .as-card, .as-assign-card { border-radius: 16px !important; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04) !important; border: 1px solid rgba(0,0,0,.08) !important; } /* ── BUTTONS — use var(--primary) ── */ .btn.primary, button[class*="primary"], .as-btn-primary { background: var(--primary) !important; border-color: var(--primary) !important; box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent) !important; } .btn.primary:hover, .as-btn-primary:hover { background: var(--primary-hover, color-mix(in srgb, var(--primary) 85%, #000)) !important; transform: translateY(-1px) !important; } .btn.secondary, .btn.muted, .as-btn-outline { background: #fff !important; border: 1px solid rgba(0,0,0,.15) !important; color: #374151 !important; box-shadow: 0 1px 3px rgba(0,0,0,.05) !important; } .btn.secondary:hover, .as-btn-outline:hover { background: #f9fafb !important; transform: translateY(-1px) !important; } /* ── FORM INPUTS ── */ input:not([type=checkbox]):not([type=radio]):not([type=file]):not([readonly]), select, textarea { border: 1.5px solid rgba(0,0,0,.12) !important; border-radius: 10px !important; background: #FAFAFA !important; transition: border-color .15s, box-shadow .15s, background .15s !important; } input:focus, select:focus, textarea:focus { border-color: var(--primary) !important; background: #fff !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent) !important; outline: none !important; } .as-input:focus, .as-select:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 8%, transparent) !important; } /* ── TABLES ── */ th { background: #F8FAFC !important; font-size: 10.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .06em !important; color: #94a3b8 !important; } tr:hover td { background: rgba(0,0,0,.015) !important; } /* ── KPI CARDS ── */ .ops-kpi, .kpi-card { border-radius: 16px !important; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04) !important; transition: transform .18s, box-shadow .18s !important; } .ops-kpi:hover, .kpi-card:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(0,0,0,.08) !important; } /* ── ASSET TAGS ── */ .asset-tag-pill, .as-tag { background: color-mix(in srgb, var(--primary) 8%, transparent) !important; color: var(--primary) !important; border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent) !important; border-radius: 6px !important; font-family: 'JetBrains Mono', 'DM Mono', monospace !important; } /* ── STATUS BADGES ── */ .st-assigned { background: #dbeafe !important; color: #1d4ed8 !important; } .st-available { background: #dcfce7 !important; color: #15803d !important; } .st-maintenance { background: #ffedd5 !important; color: #9a3412 !important; } .st-damaged { background: #fee2e2 !important; color: #991b1b !important; } /* ── PROC / VENDOR COMPARISON — use var(--primary) ── */ .vcp-ey, .vcp-ey::before { color: var(--primary) !important; background: var(--primary) !important; } .vcp-stat.sp::before { background: var(--primary) !important; } .vcp-stat.sp .vcp-sv { color: var(--primary) !important; } .vcp-tabs { background: color-mix(in srgb, var(--primary) 6%, #fff) !important; border-color: color-mix(in srgb, var(--primary) 15%, transparent) !important; } .vcp-tab { color: color-mix(in srgb, var(--primary) 70%, #000) !important; } .vcp-tab.on { background: var(--primary) !important; color: #fff !important; box-shadow: 0 2px 10px color-mix(in srgb, var(--primary) 35%, transparent) !important; } .vcp-card { border-radius: 18px !important; } .vcp-lr:focus-within { border-color: var(--primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent) !important; } .vcp-inp:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent) !important; } .vcp-req { color: var(--primary) !important; } .vcp-enote { background: color-mix(in srgb, var(--primary) 5%, #fff) !important; border-color: color-mix(in srgb, var(--primary) 18%, transparent) !important; color: color-mix(in srgb, var(--primary) 80%, #000) !important; } .vcp-cd { color: var(--primary) !important; } /* ── RANK CARDS — better spacing ── */ .vcp-rank-grid { gap: 18px !important; } .vcp-card { padding: 24px !important; box-shadow: 0 2px 8px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04) !important; } .vcp-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.10) !important; transform: translateY(-3px) !important; } /* ── FORM SECTION CARDS — top accent uses var(--primary) ── */ .form-card, .ops-panel, .section-card { position: relative !important; overflow: hidden !important; } .form-card::before, .ops-panel::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: var(--primary) !important; border-radius: 16px 16px 0 0 !important; } /* ── STICKY SAVE BAR ── */ .sticky-actions { background: #111827 !important; border-radius: 14px !important; box-shadow: 0 16px 40px rgba(0,0,0,.22) !important; } /* ── SCROLLBARS ── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #9CA3AF; } /* ── ASSIGNMENT CARDS ── */ .as-cur-banner { border-radius: 14px !important; } .as-btn-primary { background: var(--primary) !important; box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 28%, transparent) !important; } .as-btn-danger { background: #fff0f0 !important; color: #dc2626 !important; border: 1px solid #fca5a5 !important; } /* ── PROCUREMENT FORMS ── */ .proc-card { border-radius: 16px !important; } /* ── VENDOR COMPARISON RANK — remove clutter, clean spacing ── */ .vcp-rnum { width: 28px !important; height: 28px !important; font-size: 13px !important; } .vcp-vname { font-size: 16px !important; font-weight: 700 !important; } .vcp-amt { font-size: 30px !important; } .vcp-meta { border-top: 1px solid rgba(0,0,0,.07) !important; } .vcp-mrow { padding: 2px 0 !important; } .vcp-btns .btn, .vcp-btns button { border-radius: 10px !important; font-size: 12.5px !important; font-weight: 600 !important; } /* ── RESPONSIVE ── */ @media (max-width: 900px) { .as-top-grid, .as-bottom-grid { grid-template-columns: 1fr !important; } .vcp-stats { grid-template-columns: 1fr 1fr !important; } .vcp-rank-grid { grid-template-columns: 1fr !important; } } @media print { .side, .appbar { display: none !important; } .main { margin: 0 !important; padding: 0 !important; } }