/* ========================================================================== T-AIMS | TEKNOLAB ASSET & INFRASTRUCTURE MONITORING SYSTEM DESAIN TAMPILAN: PERSIS SEPERTI GAMBAR REFERENSI DENGAN CYBER-DARK ELEKTRO ========================================================================== */ :root { /* Palet Warna Utama */ --bg-void: #000000; --bg-sidebar: #050508; --bg-topbar: #050508; --bg-content: #000000; --bg-card: linear-gradient(180deg, #14161E 0%, #0B0C10 100%); --bg-card-solid: #0D1320; --border-card-cyber: rgba(225, 29, 72, 0.60); --shadow-cyber-depth: 0 10px 30px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.12); --bg-card-surface: #101015; --border-dark: rgba(225, 29, 72, 0.50); --border-subtle: rgba(225, 29, 72, 0.38); --border-cyan: rgba(225, 29, 72, 0.55); /* Aksen Warna Cerah & Menyala */ --cyan-neon: #FFC107; --cyan-dim: #F59E0B; --cyan-glow: rgba(255, 193, 7, 0.45); --tekno-red: #FF1744; --tekno-crimson: #E11D48; --red-glow: rgba(255, 23, 68, 0.55); --tekno-gold: #FFC107; /* Indikator Status Elektro - Super Cerah & Hidup (Tidak Butek) */ --status-online: #00FF9D; --status-online-glow: rgba(0, 255, 157, 0.85); --status-warning: #FFD600; --status-warning-glow: rgba(255, 214, 0, 0.85); --status-offline: #FF1744; --status-offline-glow: rgba(255, 23, 68, 0.85); /* Tipografi & Hierarki Teks - Bersih, Tajam, Berkedalaman (WCAG AA Compliant) */ --text-pure: #FFFFFF; /* Putih Murni: Judul Utama, Angka Metrik Besar, Modal Title */ --text-primary: #FFFFFF; /* Putih: Nama Aset, Label Form Utama, Subheading Menonjol */ --text-secondary: #CBD5E1; /* Slate-300: Data Teknis (IP, MAC, Email, Deskripsi Singkat) */ --text-muted: #94A3B8; /* Slate-400: Keterangan Form Bantuan, Header Tabel, Timestamp (Kontras 5.5:1) */ --text-dim: #64748B; /* Slate-500: Info sekunder / watermark / disabled */ /* Shadow & Radius */ --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-full: 9999px; --transition: 0.2s ease; } /* Reset & Global */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: var(--bg-void); color: var(--text-primary); line-height: 1.5; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-void); } ::-webkit-scrollbar-thumb { background: #1E293B; border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: #7E8B9B; } /* Utilities */ .hidden { display: none !important; } .text-cyan { color: #CBD5E1 !important; } .text-crimson { color: #FF1744 !important; text-shadow: 0 0 10px rgba(255, 23, 68, 0.45); } .text-platinum { color: #F8FAFC !important; text-shadow: 0 0 8px rgba(255, 255, 255, 0.35); } .text-slate { color: #94A3B8 !important; } .text-green { color: #00FF9D !important; text-shadow: 0 0 8px rgba(0, 255, 157, 0.5); } .text-yellow { color: #FFD600 !important; text-shadow: 0 0 8px rgba(255, 214, 0, 0.5); } .text-red, .text-danger { color: #FF1744 !important; text-shadow: 0 0 8px rgba(255, 23, 68, 0.5); } .text-crimson { color: var(--tekno-red) !important; } .text-purple { color: #F59E0B !important; } .text-gold { color: #FFC107 !important; } .text-amber { color: #F59E0B !important; } .text-muted { color: var(--text-muted) !important; } .text-secondary { color: var(--text-secondary) !important; } .font-bold { font-weight: 700 !important; } .text-right { text-align: right; } .text-center { text-align: center; } .text-sm { font-size: 0.82rem; } .text-lg { font-size: 1.1rem; } .w-full { width: 100%; } .m-0 { margin: 0 !important; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .p-0 { padding: 0 !important; } .p-4 { padding: 1rem !important; } /* Indikator Status Bulat Elektro */ .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .dot.green { background-color: var(--status-online); box-shadow: 0 0 8px var(--status-online-glow); } .dot.yellow { background-color: var(--status-warning); box-shadow: 0 0 8px var(--status-warning-glow); } .dot.red { background-color: var(--status-offline); box-shadow: 0 0 8px var(--status-offline-glow); } .pulse { animation: dotPulse 2s infinite ease-in-out; } @keyframes dotPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.8; } } .pulse-led.online { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: var(--status-online); box-shadow: 0 0 8px var(--status-online-glow); } /* ========================================================================== VIEW 1: PORTAL LOGIN / AUTENTIKASI ========================================================================== */ .auth-wrapper { position: fixed; inset: 0; z-index: 99999 !important; display: flex; align-items: center; justify-content: center; padding: 1.5rem; overflow-y: auto; background-color: var(--bg-void); } .auth-card { position: relative; z-index: 10; width: 100%; max-width: 440px; margin: auto; background: rgba(10, 10, 14, 0.94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-cyan); border-radius: var(--radius-lg); padding: 1.8rem 2.2rem; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(0, 229, 255, 0.12); } .auth-brand { text-align: center; margin-bottom: 1.2rem; } .auth-logo { max-height: 85px; width: auto; max-width: 250px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(225, 29, 72, 0.4)); margin-bottom: 0.8rem; display: inline-block; } .auth-bg-ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .ambient-glow { position: absolute; width: 450px; height: 450px; border-radius: 50%; filter: blur(120px); opacity: 0.25; } .glow-cyan { top: -100px; left: -100px; background: radial-gradient(circle, rgba(148, 163, 184, 0.12) 0%, transparent 70%); } .glow-crimson { bottom: -100px; right: -100px; background: radial-gradient(circle, var(--tekno-red) 0%, transparent 70%); } .circuit-grid-overlay { position: absolute; inset: 0; background-image: linear-gradient(rgba(0, 229, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 229, 255, 0.04) 1px, transparent 1px); background-size: 36px 36px; opacity: 0.7; } .auth-system-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(0, 229, 255, 0.08); border: 1px solid rgba(0, 229, 255, 0.25); border-radius: var(--radius-full); padding: 4px 12px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.8px; color: var(--cyan-neon); margin-bottom: 0.5rem; } .auth-system-title { font-size: 1.5rem; font-weight: 800; color: var(--text-pure); } .auth-system-desc { font-size: 0.82rem; color: var(--text-secondary); } .auth-alert { display: flex; align-items: center; gap: 10px; background: rgba(239, 68, 68, 0.15); border: 1px solid var(--status-offline); color: #FCA5A5; padding: 10px 14px; border-radius: var(--radius-md); font-size: 0.82rem; margin-bottom: 1.2rem; } .auth-form { display: flex; flex-direction: column; gap: 1.1rem; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; } .input-container { position: relative; display: flex; align-items: center; } .input-container input, .form-group input, .form-group select { width: 100%; background: rgba(6, 6, 8, 0.85); border: 1px solid rgba(0, 229, 255, 0.2); border-radius: var(--radius-md); padding: 10px 14px; color: var(--text-pure); font-size: 0.9rem; font-family: inherit; transition: var(--transition); } .input-container input { padding-right: 38px; } .input-container input:focus, .form-group input:focus, .form-group select:focus { outline: none; border-color: var(--cyan-neon); box-shadow: 0 0 12px var(--cyan-glow); } .input-icon { position: absolute; right: 12px; color: var(--text-muted); font-size: 0.9rem; } .toggle-password { cursor: pointer; } .toggle-password:hover { color: var(--cyan-neon); } .form-actions-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; color: var(--text-secondary); } .remember-checkbox { display: flex; align-items: center; gap: 6px; cursor: pointer; } .hint-link { color: var(--cyan-neon); text-decoration: none; } .hint-link:hover { text-decoration: underline; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-md); font-weight: 600; font-size: 0.88rem; cursor: pointer; border: none; transition: var(--transition); font-family: inherit; text-decoration: none; } .btn-primary-cyber { background: linear-gradient(135deg, var(--tekno-red) 0%, #BE123C 100%); color: var(--text-pure); box-shadow: 0 4px 15px var(--red-glow); border: 1px solid rgba(255, 255, 255, 0.15); } .btn-primary-cyber:hover { background: linear-gradient(135deg, #F43F5E 0%, var(--tekno-red) 100%); transform: translateY(-1px); } .auth-divider { display: flex; align-items: center; text-align: center; margin: 1.4rem 0 1.1rem; color: var(--text-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .auth-divider span { padding: 0 10px; } .btn-guest-cyber { background: rgba(0, 229, 255, 0.08); border: 1px solid rgba(0, 229, 255, 0.35); color: var(--cyan-neon); padding: 12px 18px; display: flex; justify-content: space-between; align-items: center; } .btn-guest-cyber:hover { background: rgba(0, 229, 255, 0.18); box-shadow: 0 0 16px var(--cyan-glow); color: #FFF; } .guest-btn-content { display: flex; align-items: center; gap: 12px; text-align: left; } .guest-text strong { display: block; font-size: 0.92rem; color: #FFF; } .guest-text span { display: block; font-size: 0.72rem; color: var(--cyan-neon); } .demo-credential-box { margin-top: 1.3rem; background: rgba(0, 0, 0, 0.35); border: 1px dashed rgba(0, 229, 255, 0.2); border-radius: var(--radius-md); padding: 10px 12px; } .demo-head { font-size: 0.75rem; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .demo-buttons { display: flex; flex-direction: column; gap: 6px; } .btn-chip { background: rgba(10, 10, 14, 0.9); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-primary); padding: 6px 10px; border-radius: var(--radius-sm); font-size: 0.75rem; text-align: left; cursor: pointer; transition: var(--transition); } .btn-chip:hover { border-color: var(--cyan-neon); background: rgba(0, 229, 255, 0.1); } .btn-chip strong { color: var(--cyan-neon); } .auth-footer { text-align: center; margin-top: 1.5rem; font-size: 0.72rem; color: var(--text-muted); } /* ========================================================================== VIEW 2: LAYOUT DASHBOARD & SIDEBAR PROPORSIONAL PERSIS SEPERTI GAMBAR ========================================================================== */ .app-layout { display: flex; height: 100vh; max-height: 100vh; overflow: hidden; background-color: var(--bg-void); } /* SIDEBAR KIRI (Gradasi Tipis di Bagian Kiri ke Tengah Dikit Sesuai Permintaan) */ .sidebar { width: 275px; background: linear-gradient(90deg, rgba(225, 29, 72, 0.22) 0%, rgba(180, 20, 60, 0.08) 35%, rgba(0, 0, 0, 0) 70%), #050508; border-right: 1px solid rgba(225, 29, 72, 0.25); display: flex; flex-direction: column; justify-content: flex-start; position: sticky; top: 0; height: 100vh; flex-shrink: 0; z-index: 100; } /* Logo Teknolab di Bagian Atas Sidebar (Besar & Jelas Sesuai Permintaan) */ .sidebar-header { padding: 22px 14px 14px 14px; display: flex; align-items: center; justify-content: center; } .brand-logo-img { height: 135px !important; max-height: 135px !important; width: auto; max-width: 170px !important; object-fit: contain; filter: drop-shadow(0 0 16px rgba(225, 29, 72, 0.45)); } /* Navigasi Utama */ .sidebar-nav { display: flex; flex-direction: column; padding: 6px 14px 14px 14px; } .nav-menu { list-style: none; display: flex; flex-direction: column; } .nav-item { margin-bottom: 5px; } /* Item Pengaturan Pepetin Langsung di Bawah Pengguna (Persis Sesuai Mockup Gambar) */ .nav-item.nav-item-settings { margin-top: 0 !important; margin-bottom: 5px; } .nav-item .nav-link { display: flex; align-items: center; gap: 14px; padding: 8.5px 15px; color: #FFFFFF; text-decoration: none; font-size: 0.92rem; font-weight: 600; border-radius: var(--radius-md); border: 1px solid rgba(225, 29, 72, 0.22); transition: var(--transition); } .nav-item .nav-link i { width: 24px; text-align: center; font-size: 1.15rem; color: #E2E8F0; /* Cerah menyala tidak butek */ transition: var(--transition); } .nav-item:hover .nav-link { background: rgba(225, 29, 72, 0.12) !important; border: 1.5px solid rgba(225, 29, 72, 0.55) !important; border-left: 4.5px solid #FF1744 !important; color: #FFFFFF !important; } .nav-item:hover .nav-link i { color: #FF1744 !important; } /* Menu Aktif (Gradasi Merah Mewah dengan Bevel Neon di Tepi Kiri Sesuai Gambar 1) */ .nav-item.active .nav-link { background: linear-gradient(90deg, rgba(225, 29, 72, 0.22) 0%, rgba(225, 29, 72, 0.08) 100%) !important; color: #FFFFFF !important; font-weight: 700 !important; border: 1.5px solid rgba(225, 29, 72, 0.75) !important; border-left: 4.5px solid #FF1744 !important; box-shadow: 0 4px 15px rgba(225, 29, 72, 0.2) !important; position: relative; } .nav-item.active .nav-link i { color: #FFFFFF; } .nav-badge { margin-left: auto; background: #E11D48; color: #FFFFFF; font-size: 0.72rem; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-full); box-shadow: 0 0 10px rgba(225, 29, 72, 0.5); } /* Status Sistem & Ganti Bahasa di Bawah Sidebar (Persis Sesuai Mockup Gambar 1 & 2) */ .sidebar-footer { margin-top: auto; padding: 16px 16px 20px 16px; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; } .lang-switcher-capsule { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: rgba(10, 10, 14, 0.92); border: 1.5px solid rgba(225, 29, 72, 0.45); border-radius: var(--radius-full); padding: 6px 16px; backdrop-filter: blur(8px); transition: var(--transition); box-shadow: 0 0 16px rgba(225, 29, 72, 0.25); } .lang-switcher-capsule:hover { border-color: #FF1744; box-shadow: 0 0 20px rgba(255, 23, 68, 0.45); } .lang-globe-icon { color: #FFFFFF; font-size: 1.15rem; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.45)); } .lang-toggle-wrap { display: inline-flex; align-items: center; gap: 6px; } .lang-btn { background: transparent; border: none; color: rgba(255, 255, 255, 0.7); font-size: 0.84rem; font-weight: 800; padding: 3px 10px; border-radius: 6px; cursor: pointer; transition: var(--transition); font-family: inherit; } .lang-btn:hover:not(.active) { color: #FFFFFF; } .lang-btn.active { background: #FFFFFF; color: #000000; font-weight: 900; box-shadow: 0 0 12px rgba(255, 255, 255, 0.55); } .lang-divider { color: rgba(255, 255, 255, 0.35); font-size: 0.85rem; user-select: none; } .system-status-center { display: flex; align-items: center; justify-content: center; gap: 8px; } .status-online-text { font-size: 0.88rem; font-weight: 800; color: var(--status-online); text-shadow: 0 0 12px var(--status-online-glow); letter-spacing: 0.4px; } /* ========================================================================== KONTEN UTAMA & TOPBAR ========================================================================== */ .main-content { flex: 1; display: flex; flex-direction: column; min-width: 0; background-color: var(--bg-content); overflow-y: auto; } /* TOPBAR */ .topbar { height: 58px; background-color: var(--bg-topbar); border-bottom: 1px solid var(--border-dark); padding: 0 1.8rem; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 90; gap: 1rem; } .mobile-toggle-btn { display: none; background: none; border: none; color: var(--text-secondary); font-size: 1.2rem; cursor: pointer; margin-right: 10px; } .topbar-left .brand-title-wrap { display: flex; align-items: center; gap: 8px; } .title-code { font-size: 1.1rem; font-weight: 800; color: var(--text-pure); letter-spacing: 0.5px; } .topbar-left .divider { color: var(--text-muted); } .title-sub { font-size: 0.82rem; color: var(--text-secondary); } .topbar-center { flex: 1; max-width: 360px; } .search-box { position: relative; display: flex; align-items: center; } .search-box i.fa-magnifying-glass { position: absolute; left: 12px; color: var(--text-muted); font-size: 0.82rem; } .search-box input { width: 100%; background: rgba(10, 10, 14, 0.8); border: 1px solid var(--border-dark); border-radius: var(--radius-full); padding: 7px 32px 7px 32px; color: var(--text-pure); font-size: 0.8rem; transition: var(--transition); } .search-box input:focus { outline: none; border-color: rgba(225, 29, 72, 0.55); box-shadow: 0 0 10px rgba(225, 29, 72, 0.22); } .search-clear-btn { position: absolute; right: 10px; background: none; border: none; color: var(--text-muted); cursor: pointer; } .topbar-right { display: flex; align-items: center; gap: 1.1rem; } /* Jam Realtime Pill Badge (Persis Sesuai Gambar Referensi: 🕒 19:56:45 | 🗓️ Sabtu, 17 Oktober 2026) */ .live-clock-pill { display: inline-flex; align-items: center; gap: 8px; background: #0a0a0e; border: 1px solid rgba(59, 130, 246, 0.35); border-radius: 9999px; padding: 5px 15px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); user-select: none; } .live-clock-pill .clock-emoji { font-size: 0.95rem; line-height: 1; display: inline-flex; align-items: center; } .live-clock-pill .clock-time-val { font-family: 'JetBrains Mono', 'Consolas', monospace; font-weight: 800; color: #F59E0B; font-size: 0.92rem; letter-spacing: 0.5px; line-height: 1; text-shadow: 0 0 10px rgba(245, 158, 11, 0.25); } .live-clock-pill .clock-divider { color: rgba(255, 255, 255, 0.28); font-weight: 300; font-size: 0.88rem; margin: 0 3px; line-height: 1; } .live-clock-pill .calendar-emoji { font-size: 0.95rem; line-height: 1; display: inline-flex; align-items: center; } .live-clock-pill .clock-date-val { font-size: 0.82rem; font-weight: 700; color: #FFFFFF; line-height: 1; white-space: nowrap; } /* Notifikasi Bell */ .notification-wrapper { position: relative; } .icon-btn.notif-bell { background: none; border: none; color: var(--text-secondary); font-size: 1.05rem; cursor: pointer; position: relative; padding: 6px; transition: var(--transition); } .icon-btn.notif-bell:hover { color: var(--text-pure); } .bell-badge { position: absolute; top: 0px; right: 0px; background: var(--tekno-red); color: #FFFFFF; font-size: 0.62rem; font-weight: 800; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-topbar); } .notif-dropdown { position: absolute; right: 0; top: calc(100% + 10px); width: 320px; background: var(--bg-card); border: 1px solid var(--border-cyan); border-radius: var(--radius-md); box-shadow: var(--shadow-card); z-index: 200; overflow: hidden; } .notif-header { padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-dark); } .notif-header h6 { font-size: 0.85rem; color: #FFF; } .badge-count { background: rgba(225, 29, 72, 0.2); color: var(--tekno-red); font-size: 0.68rem; padding: 2px 6px; border-radius: var(--radius-full); } .btn-mark-all-read { background: rgba(0, 229, 255, 0.08); border: 1px solid rgba(0, 229, 255, 0.25); color: #38bdf8; font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: all 0.2s ease; } .btn-mark-all-read:hover { background: rgba(0, 229, 255, 0.2); border-color: #38bdf8; color: #ffffff; box-shadow: 0 0 8px rgba(56, 189, 248, 0.35); } .btn-icon-read-all { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: rgba(0, 229, 255, 0.08); border: 1px solid rgba(0, 229, 255, 0.28); border-radius: 6px; color: #38bdf8; font-size: 0.78rem; cursor: pointer; margin-left: 8px; vertical-align: middle; transition: all 0.2s ease; flex-shrink: 0; } .btn-icon-read-all:hover { background: rgba(0, 229, 255, 0.22); border-color: #38bdf8; color: #ffffff; box-shadow: 0 0 10px rgba(56, 189, 248, 0.45); transform: scale(1.06); } .btn-icon-read-all:active { transform: scale(0.96); } .notif-list { max-height: 240px; overflow-y: auto; } .notif-item { padding: 9px 12px; display: flex; gap: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-size: 0.76rem; } .notif-item:hover { background: rgba(0, 229, 255, 0.04); } .notif-item .dot { margin-top: 5px; } .notif-text strong { display: block; color: #FFF; } .notif-text span { color: var(--text-muted); } .notif-footer { padding: 8px 12px; text-align: center; border-top: 1px solid var(--border-dark); background: rgba(0, 0, 0, 0.2); } .notif-footer a { color: var(--cyan-neon); font-size: 0.74rem; text-decoration: none; } /* Profile Pill di Topbar */ .profile-dropdown-wrapper { position: relative; } .user-profile-pill { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 3px 8px; border-radius: var(--radius-full); transition: var(--transition); } .user-profile-pill:hover { background: rgba(255, 255, 255, 0.05); } .profile-avatar { width: 30px; height: 30px; border-radius: 50%; background: #1E293B; border: 1px solid rgba(255, 255, 255, 0.15); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 0.8rem; } .profile-info { display: flex; flex-direction: column; line-height: 1.15; } .profile-info .name { font-size: 0.8rem; font-weight: 700; color: #FFF; } .profile-info .role { font-size: 0.68rem; color: var(--text-muted); } .caret-icon { font-size: 0.65rem; color: var(--text-muted); margin-left: 2px; } .user-menu-dropdown { position: absolute; right: 0; top: calc(100% + 8px); width: 210px; background: var(--bg-card); border: 1px solid var(--border-cyan); border-radius: var(--radius-md); box-shadow: var(--shadow-card); z-index: 200; padding: 6px 0; } .dropdown-header { padding: 8px 14px; font-size: 0.78rem; } .dropdown-header strong { display: block; color: #FFF; } .dropdown-header span { color: var(--cyan-neon); font-size: 0.7rem; } .dropdown-divider { border-bottom: 1px solid var(--border-dark); margin: 4px 0; } .dropdown-item { display: flex; align-items: center; gap: 8px; padding: 8px 14px; color: var(--text-secondary); font-size: 0.78rem; text-decoration: none; transition: var(--transition); } .dropdown-item:hover { background: rgba(0, 229, 255, 0.08); color: #FFF; } /* ========================================================================== HALAMAN / MULTI-PAGE CONTAINER ========================================================================== */ .content-container { padding: 1.2rem 1.6rem 2.5rem; flex: 1; } .page-view { display: none; } .page-view.active { display: block; animation: fadeIn 0.2s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================== HALAMAN 1: DASHBOARD UTAMA (PERSIS SEPERTI GAMBAR) ========================================================================== */ /* BANNER HERO DENGAN LATAR BELAKANG PEGUNUNGAN & SLOGAN TEKNOLOGI (SESUAI MOCKUP) */ .banner-hero { background: linear-gradient(90deg, #0A0A0E 0%, rgba(10, 10, 14, 0.95) 32%, rgba(10, 10, 14, 0.6) 58%, rgba(10, 10, 14, 0.15) 85%, rgba(0, 0, 0, 0.15) 100%), url('../img/banner_hero_bg.jpg') no-repeat right 32% / cover; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-md); padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1rem; position: relative; overflow: hidden; box-shadow: 0 4px 25px rgba(0, 0, 0, 0.45), inset 0 0 35px rgba(190, 18, 60, 0.15); } .banner-left { position: relative; z-index: 2; } .banner-left .banner-title { font-size: 1.5rem; font-weight: 800; color: var(--text-pure); letter-spacing: -0.2px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); } .banner-left .banner-desc { font-size: 0.82rem; color: var(--text-secondary); margin-top: 3px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); } .banner-sub-actions { display: none !important; /* Dihilangkan sesuai instruksi user (Gambar 3: Mode, Simulasi, Asisten) */ } .role-status-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(0, 229, 255, 0.1); border: 1px solid rgba(0, 229, 255, 0.4); color: var(--cyan-neon); font-size: 0.72rem; padding: 3px 10px; border-radius: var(--radius-full); backdrop-filter: blur(4px); } .btn-simulasi-chip { background: rgba(10, 10, 14, 0.85); border: 1px solid var(--border-dark); color: var(--text-secondary); font-size: 0.72rem; padding: 4px 11px; border-radius: var(--radius-full); cursor: pointer; transition: var(--transition); backdrop-filter: blur(4px); } .btn-simulasi-chip:hover { border-color: var(--cyan-neon); color: #FFF; background: rgba(0, 229, 255, 0.15); } .banner-right { position: relative; z-index: 2; } .banner-right .slogan-box { text-align: right; line-height: 1.35; padding: 10px 18px; background: rgba(8, 8, 10, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: var(--radius-sm); border-right: 3px solid #F59E0B; border-left: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); } .slogan-line { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 2.2px; color: #FFFFFF; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95), 0 0 12px rgba(225, 29, 72, 0.6); } /* 6 KARTU STATISTIK KPI UTAMA */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 1.1rem; } .kpi-card { background-color: var(--bg-card); border: 1px solid var(--border-dark); border-radius: var(--radius-md); padding: 12px 14px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; justify-content: space-between; min-height: 96px; transition: var(--transition); } .kpi-card:hover { transform: translateY(-2px); border-color: rgba(0, 229, 255, 0.25); } .kpi-top { display: flex; align-items: flex-start; gap: 10px; } .kpi-icon-box { width: 32px; height: 32px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; flex-shrink: 0; } .platinum-bg, .kpi-icon-box.platinum-bg { background: rgba(255, 255, 255, 0.12) !important; color: #FFFFFF !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; } .orange-bg, .kpi-icon-box.orange-bg { background: rgba(249, 115, 22, 0.18) !important; color: #F97316 !important; border: 1px solid rgba(249, 115, 22, 0.35) !important; } .stat-icon-wrap.platinum { background: rgba(255, 255, 255, 0.12) !important; color: #FFFFFF !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; } .crimson-bg { background: rgba(225, 29, 72, 0.2); color: var(--tekno-red); } .emerald-bg { background: rgba(16, 185, 129, 0.2); color: var(--status-online); } .red-bg { background: rgba(239, 68, 68, 0.2); color: var(--status-offline); } .amber-bg { background: rgba(245, 158, 11, 0.2); color: var(--status-warning); } .blue-bg { background: rgba(245, 158, 11, 0.18) !important; color: #F59E0B !important; border: 1px solid rgba(245, 158, 11, 0.35) !important; } .purple-bg { background: rgba(168, 85, 247, 0.16) !important; color: #C084FC !important; border: 1px solid rgba(168, 85, 247, 0.45) !important; } .kpi-meta { display: flex; flex-direction: column; } .kpi-title { font-size: 0.74rem; font-weight: 600; color: var(--text-secondary); } .kpi-value { font-size: 1.35rem; font-weight: 800; color: #FFF; line-height: 1.15; margin-top: 2px; } .kpi-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; } .kpi-subtext { font-size: 0.72rem; color: var(--text-dim, #94A3B8); font-weight: 500; } .mini-sparkline { width: 36px; height: 4px; background: rgba(255, 255, 255, 0.08); border-radius: var(--radius-full); overflow: hidden; } .bar-fill { display: block; height: 100%; border-radius: var(--radius-full); } /* SECTION GRAFIK TENGAH */ .charts-row { display: grid; grid-template-columns: 1.8fr 1.2fr; gap: 12px; margin-bottom: 1.1rem; } .dashboard-card { background-color: var(--bg-card); border: 1px solid var(--border-dark); border-radius: var(--radius-md); box-shadow: var(--shadow-card); display: flex; flex-direction: column; overflow: hidden; } .card-header { padding: 10px 14px; border-bottom: 1px solid var(--border-dark); display: flex; align-items: center; justify-content: space-between; } .card-title-group { display: flex; align-items: center; gap: 8px; } .card-title-group h4 { font-size: 0.88rem; font-weight: 700; color: #FFF; } .card-link { color: var(--text-muted); font-size: 0.74rem; text-decoration: none; transition: var(--transition); } .card-link:hover { color: var(--cyan-neon); } .card-controls { display: flex; align-items: center; gap: 12px; } .chart-legend-inline { display: flex; align-items: center; gap: 10px; font-size: 0.72rem; color: var(--text-secondary); } .cyber-select { background: rgba(6, 6, 8, 0.85); border: 1px solid var(--border-dark); color: var(--text-primary); border-radius: var(--radius-sm); padding: 4px 8px; font-size: 0.72rem; } .chart-body { padding: 12px; height: 220px; position: relative; } /* Donut Card Layout */ .donut-body { padding: 12px 14px; display: flex; align-items: center; gap: 14px; height: 220px; } .donut-visual-wrap { position: relative; width: 150px; height: 150px; flex-shrink: 0; } .donut-center-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } .donut-center-label strong { font-size: 1.2rem; font-weight: 800; color: #FFF; line-height: 1; } .donut-center-label span { font-size: 0.68rem; color: var(--text-muted); } .donut-legend-col { flex: 1; display: flex; flex-direction: column; gap: 6px; } .d-leg-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; } .d-leg-name { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); } .cat-bullet { width: 7px; height: 7px; border-radius: 50%; } .d-leg-val strong { color: #FFF; font-weight: 700; margin-right: 4px; } .d-leg-val small { color: var(--text-muted); font-size: 0.68rem; } /* SECTION BAWAH (3 KARTU SEJAJAR) */ .bottom-three-grid { display: grid; grid-template-columns: 1.4fr 1.2fr 1fr; gap: 12px; margin-bottom: 1.1rem; } /* Tabel Mockup Sesuai Gambar */ .mockup-table { width: 100%; border-collapse: collapse; font-size: 0.76rem; text-align: left; } .mockup-table thead tr { background: rgba(6, 6, 8, 0.7); border-bottom: 1px solid var(--border-dark); } .mockup-table th { padding: 9px 12px; color: #94A3B8; font-weight: 800; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; } .mockup-table tbody tr { border-bottom: 1px solid rgba(255, 255, 255, 0.08); cursor: pointer; transition: var(--transition); } .mockup-table tbody tr:hover { background: rgba(225, 29, 72, 0.08); } .mockup-table td { padding: 9px 12px; color: #CBD5E1; vertical-align: middle; } .mockup-table td strong { color: #FFFFFF; font-weight: 700; } .device-name-text { font-weight: 700; color: #FFFFFF; } .ip-mono { font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; color: #E2E8F0 !important; font-weight: 600; letter-spacing: 0.02em; } .status-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-full); font-size: 0.72rem; font-weight: 700; } .status-pill.online { background: rgba(0, 255, 157, 0.18); color: var(--status-online); border: 1px solid rgba(0, 255, 157, 0.5); text-shadow: 0 0 8px var(--status-online-glow); } .status-pill.warning { background: rgba(255, 214, 0, 0.18); color: var(--status-warning); border: 1px solid rgba(255, 214, 0, 0.5); text-shadow: 0 0 8px var(--status-warning-glow); } .status-pill.offline { background: rgba(255, 23, 68, 0.18); color: var(--status-offline); border: 1px solid rgba(255, 23, 68, 0.5); text-shadow: 0 0 8px var(--status-offline-glow); } /* PETA INTERAKTIF INDONESIA */ .map-body-inner { padding: 10px 12px; display: flex; flex-direction: column; justify-content: space-between; height: 240px; } .map-svg-wrap { position: relative; width: 100%; height: 180px; } .indonesia-svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)); } .map-node { cursor: pointer; } .core-pin.green { fill: var(--status-online); filter: drop-shadow(0 0 5px var(--status-online-glow)); } .core-pin.yellow { fill: var(--status-warning); filter: drop-shadow(0 0 5px var(--status-warning-glow)); } .core-pin.red { fill: var(--status-offline); filter: drop-shadow(0 0 5px var(--status-offline-glow)); } .radar-ping { fill: none; stroke-width: 1.5; animation: radarPing 2.5s infinite; } .radar-ping.green { stroke: var(--status-online); } .radar-ping.yellow { stroke: var(--status-warning); } .radar-ping.red { stroke: var(--status-offline); } @keyframes radarPing { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } } .map-callout-overlay { position: absolute; bottom: 10px; left: 10px; background: rgba(10, 10, 14, 0.95); border: 1px solid var(--border-cyan); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 0.72rem; pointer-events: none; } .callout-title { font-weight: 700; color: #FFF; margin-bottom: 2px; } .callout-line { color: var(--text-secondary); font-size: 0.68rem; } .map-legend-bar { display: flex; justify-content: center; gap: 16px; font-size: 0.7rem; color: var(--text-secondary); } /* RIWAYAT GANGGUAN / TIMELINE */ .alerts-timeline-wrap { max-height: 240px; overflow-y: auto; } .alert-row { padding: 8px 12px; display: flex; align-items: flex-start; gap: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-size: 0.74rem; } .alert-row:hover { background: rgba(0, 240, 255, 0.08); } .a-time { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--cyan-neon); min-width: 38px; font-weight: 700; } .a-body { flex: 1; } .a-body strong { display: block; color: #FFFFFF; font-weight: 700; line-height: 1.25; font-size: 0.78rem; } .a-body span { color: #FFFFFF; font-size: 0.7rem; font-weight: 500; } .a-badge { padding: 2px 7px; border-radius: var(--radius-sm); font-size: 0.65rem; font-weight: 800; } .a-badge.kritis { background: rgba(255, 23, 68, 0.25); border: 1px solid var(--status-offline); color: #FF4D6D; text-shadow: 0 0 6px rgba(255, 23, 68, 0.6); } .a-badge.peringatan { background: rgba(255, 214, 0, 0.25); border: 1px solid var(--status-warning); color: #FFE066; text-shadow: 0 0 6px rgba(255, 214, 0, 0.6); } /* RINGKASAN PEMELIHARAAN */ .maintenance-section { background: var(--bg-card); border: 1px solid var(--border-dark); border-radius: var(--radius-md); padding: 12px 16px; box-shadow: var(--shadow-card); } .maint-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .maint-cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .m-card { background: rgba(10, 10, 14, 0.85); border: 1px solid var(--border-dark); border-radius: var(--radius-md); padding: 10px 12px; display: flex; align-items: center; gap: 12px; } .m-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; } .m-info { display: flex; flex-direction: column; } .m-val { font-size: 1.35rem; font-weight: 800; color: #FFFFFF; line-height: 1; } .m-lbl { font-size: 0.74rem; color: #FFFFFF; font-weight: 600; } /* ========================================================================== HALAMAN TAMBAHAN (DAFTAR PERANGKAT, MONITORING, NOTIFIKASI, LAPORAN) ========================================================================== */ /* Utility Flex Classes */ .d-flex { display: flex; } .justify-between { justify-content: space-between; } .align-center { align-items: center; } .flex-wrap { flex-wrap: wrap; } .gap-2 { gap: 8px; } .page-title-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.1rem; flex-wrap: wrap; gap: 12px; } .page-title-left { flex: 1 1 auto; min-width: 260px; } .page-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; margin-left: auto; } .section-heading { font-size: 1.3rem; font-weight: 800; color: #FFF; } .section-subheading { font-size: 0.8rem; color: var(--text-secondary); margin-top: 2px; } .filter-controls-card { background: var(--bg-card); border: 1px solid var(--border-dark); border-radius: var(--radius-md); padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: nowrap; } .filter-left-group { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; } .filter-search-input { position: relative; width: 175px; flex-shrink: 1; min-width: 130px; } .filter-search-input i { position: absolute; left: 10px; top: 10px; color: var(--text-muted); } .filter-search-input input { width: 100%; background: rgba(6, 6, 8, 0.8); border: 1px solid var(--border-dark); border-radius: var(--radius-sm); padding: 7px 10px 7px 28px; color: #FFF; font-size: 0.78rem; } .filter-left-group .btn-primary-cyber { white-space: nowrap; flex: 0 0 auto; padding: 7px 10px; font-size: 0.78rem; } .filter-select-group { display: flex; gap: 6px; align-items: center; flex-shrink: 1; } .filter-select-group select { background: rgba(6, 6, 8, 0.8); border: 1px solid var(--border-dark); color: var(--text-primary); border-radius: var(--radius-sm); padding: 6px 8px; font-size: 0.76rem; cursor: pointer; } .filter-select-group .btn-reset { padding: 6px 9px; font-size: 0.76rem; white-space: nowrap; } .filter-export-group { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: 12px; } .filter-export-group .btn { padding: 6px 10px; font-size: 0.76rem; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; } /* Button refresh icon & animated auto-refresh pill */ .btn-icon-refresh { background: rgba(0, 240, 255, 0.08); border: 1px solid rgba(0, 240, 255, 0.28); color: var(--cyan-neon); width: 32px; height: 32px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; padding: 0; flex-shrink: 0; } .btn-icon-refresh:hover { background: rgba(0, 240, 255, 0.22); border-color: var(--cyan-neon); box-shadow: 0 0 10px rgba(0, 240, 255, 0.45); transform: translateY(-1px); } .btn-icon-refresh:active { transform: scale(0.92); } .auto-refresh-pill { background: rgba(0, 240, 255, 0.12); border: 1px solid rgba(0, 240, 255, 0.4); color: var(--cyan-neon); font-size: 0.72rem; font-weight: 600; padding: 4px 10px; border-radius: 20px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; box-shadow: 0 0 12px rgba(0, 240, 255, 0.25); animation: pillFadeIn 0.3s ease; } .auto-refresh-pill.hidden { display: none !important; } @keyframes pillFadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* ========================================================================== DEVICES PAGE: HEADER CONTROLS, QUICK CHIPS & VIEW SWITCHER ========================================================================== */ .devices-table-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 18px; } .devices-header-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; } /* Quick Status Filter Chips */ .quick-status-chips { display: inline-flex; align-items: center; gap: 5px; background: rgba(6, 6, 8, 0.7); border: 1px solid var(--border-dark); border-radius: 20px; padding: 3px 6px; } .chip-filter { background: transparent; border: 1px solid transparent; color: var(--text-muted); font-size: 0.74rem; font-weight: 600; padding: 3px 8px; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all 0.2s ease; white-space: nowrap; } .chip-filter:hover { color: #FFF; background: rgba(255, 255, 255, 0.06); } .chip-filter.active { background: rgba(168, 85, 247, 0.18); border-color: rgba(168, 85, 247, 0.55); color: #C084FC; box-shadow: 0 0 10px rgba(168, 85, 247, 0.3); } .chip-filter.chip-online.active { background: rgba(0, 255, 157, 0.2) !important; border: 1.5px solid #00FF9D !important; color: #00FF9D !important; box-shadow: 0 0 14px rgba(0, 255, 157, 0.4) !important; } .chip-filter.chip-offline.active { background: rgba(255, 23, 68, 0.2) !important; border: 1.5px solid #FF1744 !important; color: #FF1744 !important; box-shadow: 0 0 14px rgba(255, 23, 68, 0.4) !important; } .chip-filter.chip-warning.active { background: rgba(245, 158, 11, 0.18); border-color: rgba(245, 158, 11, 0.5); color: #FBBF24; box-shadow: 0 0 10px rgba(245, 158, 11, 0.25); } .chip-filter.chip-unknown.active { background: rgba(148, 163, 184, 0.2); border-color: rgba(203, 213, 225, 0.55); color: #F1F5F9; box-shadow: 0 0 10px rgba(148, 163, 184, 0.25); } .chip-count { background: rgba(0, 0, 0, 0.4); border-radius: 10px; padding: 1px 5px; font-size: 0.68rem; font-family: 'JetBrains Mono', monospace; font-weight: 700; } /* View Mode Switcher */ .view-mode-toggle { display: inline-flex; align-items: center; background: rgba(6, 6, 8, 0.7); border: 1px solid var(--border-dark); border-radius: var(--radius-sm); padding: 2px; } .btn-view-mode { background: transparent; border: 1px solid transparent; color: var(--text-muted); font-size: 0.74rem; font-weight: 600; padding: 4px 8px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all 0.2s ease; white-space: nowrap; } .btn-view-mode:hover { color: #FFF; } .btn-view-mode.active { background: rgba(0, 240, 255, 0.18); border-color: rgba(0, 240, 255, 0.45); color: var(--cyan-neon); box-shadow: 0 0 8px rgba(0, 240, 255, 0.25); } /* ========================================================================== DEVICES GRID CARDS VIEW ========================================================================== */ .devices-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding: 16px; background: rgba(5, 9, 18, 0.4); } .device-cyber-card { background: rgba(10, 10, 14, 0.85); border: 1px solid var(--border-dark); border-radius: var(--radius-md); padding: 14px; display: flex; flex-direction: column; gap: 12px; transition: all 0.25s ease; cursor: pointer; position: relative; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); } .device-cyber-card:hover { transform: translateY(-2px); border-color: rgba(0, 240, 255, 0.4); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 240, 255, 0.15); } .device-cyber-card.online { border-left: 4px solid #00FF9D !important; } .device-cyber-card.offline { border-left: 4px solid #FF1744 !important; } .device-cyber-card.warning { border-left: 4px solid #FFD600 !important; } .device-cyber-card.unknown { border-left: 3px solid #94A3B8; } .dcc-header { display: flex; justify-content: space-between; align-items: center; } .dcc-status-prio { display: flex; align-items: center; gap: 6px; } .dcc-actions { display: flex; align-items: center; gap: 4px; } .dcc-body { display: flex; flex-direction: column; gap: 10px; } .dcc-icon-title { display: flex; align-items: center; gap: 10px; } .dcc-icon { width: 38px; height: 38px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; } .dcc-icon.online { background: rgba(16, 185, 129, 0.15); color: #10B981; border: 1px solid rgba(16, 185, 129, 0.3); } .dcc-icon.offline { background: rgba(239, 68, 68, 0.15); color: #EF4444; border: 1px solid rgba(239, 68, 68, 0.3); } .dcc-icon.warning { background: rgba(245, 158, 11, 0.15); color: #F59E0B; border: 1px solid rgba(245, 158, 11, 0.3); } .dcc-icon.unknown { background: rgba(148, 163, 184, 0.15); color: #94A3B8; border: 1px solid rgba(148, 163, 184, 0.3); } .dcc-title-info { min-width: 0; flex: 1; } .dcc-name { font-size: 0.88rem; font-weight: 700; color: #FFF; margin: 0; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dcc-code { font-size: 0.72rem; letter-spacing: 0.5px; display: block; margin-top: 1px; } .dcc-meta-row { display: flex; flex-wrap: wrap; gap: 6px; } .dcc-network-box { background: rgba(6, 11, 22, 0.7); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 6px; padding: 7px 10px; display: flex; justify-content: space-between; align-items: center; } .dcc-net-item { display: flex; flex-direction: column; } .dcc-net-label { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .dcc-net-val { font-size: 0.78rem; color: #E2E8F0; } .dcc-footer-info { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 8px; margin-top: 2px; } .devices-cards-grid.hidden, .table-responsive.hidden { display: none !important; } .full-table th, .full-table td { padding: 10px 12px; } /* Real-Time Monitoring Styles */ .live-indicator-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--status-offline); letter-spacing: 1px; } .availability-bar-track { width: 100%; height: 14px; background: rgba(255, 255, 255, 0.08); border-radius: var(--radius-full); overflow: hidden; margin-top: 6px; } .avail-fill { height: 100%; background: linear-gradient(90deg, #10B981 0%, #FFC107 100%); } .avail-legend { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--text-secondary); } .troubled-devices-list { display: flex; flex-direction: column; } .trouble-item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .t-rank { font-size: 1.1rem; font-weight: 800; color: var(--status-offline); min-width: 28px; } .t-info { flex: 1; } .t-info strong { display: block; color: #FFF; font-size: 0.85rem; } .t-info span { color: var(--text-muted); font-size: 0.75rem; } /* AI Recommendation & Laporan */ .ai-recommendation-card { background: rgba(0, 229, 255, 0.06); border: 1px solid var(--border-cyan); border-radius: var(--radius-md); padding: 12px 16px; } .ai-head { display: flex; align-items: center; gap: 8px; color: var(--cyan-neon); font-size: 0.85rem; margin-bottom: 4px; } .ai-text { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; } .report-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .rep-box { background: rgba(6, 6, 8, 0.6); border: 1px solid var(--border-dark); border-radius: var(--radius-md); padding: 12px; text-align: center; } .rep-box span { display: block; font-size: 0.75rem; color: var(--text-muted); } .rep-box strong { display: block; font-size: 1.2rem; color: #FFF; margin: 4px 0 2px 0; } .rep-box small { display: block; font-size: 0.75rem; color: var(--text-muted); } /* Floorplan Mockup */ .floorplan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 10px; } .floor-zone { background: rgba(6, 6, 8, 0.8); border: 1px solid var(--border-dark); border-radius: var(--radius-md); padding: 20px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: var(--transition); } .floor-zone:hover, .floor-zone.active-zone { border-color: var(--cyan-neon); background: rgba(0, 229, 255, 0.08); } .floor-zone i { font-size: 1.8rem; } .floor-zone strong { color: #FFF; font-size: 0.85rem; } /* ========================================================================== MODAL POPUPS & DETAIL PERANGKAT (REQUIREMENT DOKUMEN PT 5) ========================================================================== */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 99999 !important; padding: 1rem; overflow-y: auto; } .modal-card { background: var(--bg-card); border: 1px solid var(--border-cyan); border-radius: var(--radius-lg); width: 100%; max-width: 520px; max-height: calc(100vh - 2rem); display: flex; flex-direction: column; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 229, 255, 0.2); overflow: hidden; position: relative; margin: auto; } .modal-card.modal-lg { max-width: 650px; } .modal-card.modal-sm { max-width: 380px; } .modal-card > form, .modal-card form { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; } .modal-header { padding: 14px 18px; border-bottom: 1px solid var(--border-dark); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } .modal-title-wrap { display: flex; align-items: center; gap: 10px; } .btn-back-modal { background: none; border: none; color: var(--cyan-neon); font-size: 1.1rem; cursor: pointer; } .modal-close-btn { background: none; border: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; } .modal-close-btn:hover { color: #FFF; } .modal-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; scrollbar-color: #636C7A #0B0C10; } .modal-body::-webkit-scrollbar, .modal-backdrop::-webkit-scrollbar { width: 6px; } .modal-body::-webkit-scrollbar-track, .modal-backdrop::-webkit-scrollbar-track { background: rgba(6, 6, 8, 0.6); } .modal-body::-webkit-scrollbar-thumb, .modal-backdrop::-webkit-scrollbar-thumb { background: var(--border-cyan); border-radius: 4px; } .modal-body::-webkit-scrollbar-thumb:hover, .modal-backdrop::-webkit-scrollbar-thumb:hover { background: var(--cyan-neon); } .modal-footer { padding: 12px 18px; border-top: 1px solid var(--border-dark); background: rgba(6, 6, 8, 0.85); display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0; z-index: 2; } /* Detail Info Grid */ .detail-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; background: rgba(6, 6, 8, 0.6); border: 1px solid var(--border-dark); border-radius: var(--radius-md); padding: 12px; } .detail-info-item { display: flex; flex-direction: column; } .d-label { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; } .d-val { font-size: 0.85rem; color: #FFF; } .ip-text { font-family: 'JetBrains Mono', monospace; color: #E2E8F0 !important; } .telemetry-bar-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .tel-box { background: rgba(6, 6, 8, 0.6); border: 1px solid var(--border-dark); border-radius: var(--radius-sm); padding: 8px; font-size: 0.72rem; text-align: center; } .tel-box span { display: block; color: var(--text-muted); } .tel-box strong { font-size: 0.85rem; } .detail-history-box { background: rgba(6, 6, 8, 0.6); border: 1px solid var(--border-dark); border-radius: var(--radius-md); padding: 10px 12px; } .mini-history-table { display: flex; flex-direction: column; gap: 6px; } .hist-row { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-secondary); border-bottom: 1px solid rgba(255, 255, 255, 0.04); padding-bottom: 4px; } /* Quick Status Selector */ .quick-status-selector { display: flex; flex-direction: column; gap: 8px; } .btn-status-choice { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; border-radius: var(--radius-md); background: rgba(6, 6, 8, 0.9); border: 1px solid var(--border-dark); color: #FFF; font-weight: 700; font-size: 0.82rem; cursor: pointer; transition: var(--transition); } .btn-status-choice.green:hover { border-color: var(--status-online); background: rgba(16, 185, 129, 0.15); } .btn-status-choice.yellow:hover { border-color: var(--status-warning); background: rgba(245, 158, 11, 0.15); } .btn-status-choice.red:hover { border-color: var(--status-offline); background: rgba(239, 68, 68, 0.15); } /* TOAST FEEDBACK */ .toast-popup { position: fixed; bottom: 25px; right: 25px; background: rgba(10, 10, 14, 0.95); border: 1px solid var(--cyan-neon); border-radius: var(--radius-md); padding: 12px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 15px var(--cyan-glow); z-index: 2000; } .toast-icon { font-size: 1.2rem; } .toast-content h6 { font-size: 0.85rem; color: #FFF; font-weight: 700; } .toast-content p { font-size: 0.75rem; color: var(--text-secondary); } /* User Role Badges */ .user-role-badge { padding: 3px 10px; border-radius: var(--radius-full); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.4px; display: inline-block; vertical-align: middle; line-height: 1.3; -webkit-font-smoothing: antialiased; } .user-role-badge.super { background: rgba(225, 29, 72, 0.18); color: #FF1744; border: 1px solid rgba(225, 29, 72, 0.55); box-shadow: 0 0 10px rgba(255, 23, 68, 0.2); } .user-role-badge.admin { background: rgba(255, 255, 255, 0.10); color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 0 8px rgba(255, 255, 255, 0.15); } .user-role-badge.view { background: rgba(59, 130, 246, 0.15); color: #60A5FA; border: 1px solid rgba(59, 130, 246, 0.4); } /* ========================================================================== RESPONSIVE DESIGN (TABLET & MOBILE) ========================================================================== */ @media (max-width: 1280px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } .bottom-three-grid { grid-template-columns: 1fr 1fr; } .alerts-card { grid-column: span 2; } .maintenance-section .maint-cards-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .mobile-toggle-btn { display: inline-block; } .sidebar { position: fixed; left: -240px; transition: left 0.3s ease; } .sidebar.mobile-open { left: 0; } .charts-row, .bottom-three-grid { grid-template-columns: 1fr; } .alerts-card { grid-column: span 1; } .kpi-grid { grid-template-columns: repeat(2, 1fr); } .topbar .title-sub { display: none; } .blitar-gis-layout { grid-template-columns: 1fr; } .architecture-flow-grid { flex-direction: column; } .arch-arrow { transform: rotate(90deg); margin: 8px 0; } } /* ========================================================================== MODUL 1: PETA GIS AREA BLITAR & KONTROL KOORDINAT ========================================================================== */ .blitar-scope-chip { font-size: 0.68rem; font-weight: 700; color: var(--cyan-neon); background: rgba(0, 229, 255, 0.1); border: 1px solid rgba(0, 229, 255, 0.35); padding: 2px 8px; border-radius: var(--radius-full); } .map-interactive-container { position: relative; width: 100%; height: 180px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-dark); } .home-map-leaflet { width: 100%; height: 100%; background: #050508; } .full-blitar-map-el { width: 100%; height: 520px; background: #050508; border-radius: var(--radius-sm); } /* Leaflet Dark Filter & Cyber Style */ .leaflet-container { font-family: 'Plus Jakarta Sans', sans-serif !important; background-color: #000000 !important; } /* Mini-map dashboard & Full map default clean & natural (No 403, No Murky Inversion) */ #home-blitar-map .leaflet-tile, #full-blitar-map .leaflet-tile { filter: none !important; } /* Cyber Dark filter hanya ketika class .map-cyber-dark aktif */ #home-blitar-map.map-cyber-dark .leaflet-tile, #full-blitar-map.map-cyber-dark .leaflet-tile { filter: brightness(0.85) contrast(1.15) hue-rotate(185deg) invert(1) !important; } .leaflet-bar { border: 1px solid var(--border-cyan) !important; border-radius: var(--radius-sm) !important; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important; } .leaflet-bar a { background-color: rgba(10, 10, 14, 0.95) !important; color: var(--cyan-neon) !important; border-bottom: 1px solid var(--border-dark) !important; } .leaflet-bar a:hover { background-color: rgba(0, 229, 255, 0.2) !important; color: #FFF !important; } /* Cyber Neon Marker Pins di Peta Blitar */ .blitar-marker-pin { position: relative; width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .blitar-marker-pin .pin-radar { position: absolute; width: 32px; height: 32px; border-radius: 50%; animation: radarPulsePin 2s infinite ease-out; } .blitar-marker-pin.online .pin-radar { background: rgba(16, 185, 129, 0.35); border: 1.5px solid #10B981; } .blitar-marker-pin.warning .pin-radar { background: rgba(245, 158, 11, 0.35); border: 1.5px solid #F59E0B; } .blitar-marker-pin.offline .pin-radar { background: rgba(239, 68, 68, 0.35); border: 1.5px solid #EF4444; } /* Pin Khusus Site HO, MO & House Of Server */ .blitar-marker-pin.site-ho .pin-radar { background: rgba(255, 23, 68, 0.4); border: 2px solid #FF1744; } .blitar-marker-pin.site-mo .pin-radar { background: rgba(245, 158, 11, 0.4); border: 2px solid #F59E0B; } .blitar-marker-pin.site-mentor .pin-radar, .blitar-marker-pin.site-server .pin-radar { background: rgba(0, 240, 255, 0.4); border: 2px solid #00F0FF; } .blitar-marker-pin .pin-core { position: relative; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid #FFFFFF; box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); z-index: 2; } .blitar-marker-pin.online .pin-core { background: #10B981; box-shadow: 0 0 10px #10B981; } .blitar-marker-pin.warning .pin-core { background: #F59E0B; box-shadow: 0 0 10px #F59E0B; } .blitar-marker-pin.offline .pin-core { background: #EF4444; box-shadow: 0 0 10px #EF4444; } .blitar-marker-pin.site-ho .pin-core { background: #FF1744; box-shadow: 0 0 14px #FF1744; } .blitar-marker-pin.site-mo .pin-core { background: #F59E0B; box-shadow: 0 0 14px #F59E0B; } .blitar-marker-pin.site-server .pin-core, .blitar-marker-pin.site-mentor .pin-core { background: #00F0FF; box-shadow: 0 0 14px #00F0FF; } @keyframes radarPulsePin { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } } /* Custom Leaflet Cyber Popup - Perfected Responsive & Contained */ .leaflet-popup-content-wrapper { background: rgba(7, 7, 9, 0.98) !important; border: 1.5px solid var(--border-cyan) !important; border-radius: var(--radius-md) !important; color: #FFF !important; box-shadow: 0 10px 35px rgba(0, 0, 0, 0.85), 0 0 20px rgba(0, 229, 255, 0.3) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; padding: 0 !important; box-sizing: border-box !important; min-width: 270px !important; max-width: 320px !important; } .leaflet-popup-tip { background: rgba(7, 7, 9, 0.98) !important; border: 1.5px solid var(--border-cyan) !important; } .leaflet-popup-content { margin: 12px 14px !important; line-height: 1.4 !important; font-size: 0.78rem !important; width: auto !important; min-width: 250px !important; box-sizing: border-box !important; } .site-popup-card { width: 100% !important; box-sizing: border-box !important; font-family: inherit !important; } .popup-cyber-title { font-size: 0.94rem !important; font-weight: 800 !important; color: #FFF !important; display: flex !important; align-items: center !important; justify-content: space-between !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; padding-bottom: 8px !important; margin-bottom: 8px !important; padding-right: 36px !important; /* Space for close button to prevent any overlap */ word-break: break-word !important; } .popup-title-text { display: inline-flex !important; align-items: center !important; gap: 6px !important; color: #FFFFFF !important; } .popup-coord-pill { background: rgba(0, 229, 255, 0.1) !important; border: 1px solid rgba(0, 229, 255, 0.35) !important; color: var(--cyan-neon) !important; font-family: 'JetBrains Mono', monospace !important; font-size: 0.72rem !important; font-weight: 600 !important; padding: 3px 8px !important; border-radius: var(--radius-sm) !important; margin: 6px 0 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; box-sizing: border-box !important; } .popup-address-text { font-size: 0.76rem !important; color: #E2E8F0 !important; margin: 8px 0 !important; line-height: 1.45 !important; font-weight: 500 !important; } .popup-device-notice { font-size: 0.72rem !important; color: #94A3B8 !important; margin-top: 8px !important; margin-bottom: 10px !important; padding: 6px 10px !important; background: rgba(0, 229, 255, 0.08) !important; border: 1px dashed rgba(0, 229, 255, 0.3) !important; border-radius: 6px !important; box-sizing: border-box !important; } /* Tombol Silang (Close Popup) Super Jelas, Terang Kontras & Tidak Menutupi Teks */ .leaflet-container a.leaflet-popup-close-button { color: #FFFFFF !important; font-size: 16px !important; font-weight: 900 !important; width: 24px !important; height: 24px !important; line-height: 22px !important; top: 10px !important; right: 10px !important; border-radius: 50% !important; background: rgba(10, 10, 14, 0.95) !important; border: 1.5px solid rgba(0, 229, 255, 0.7) !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease !important; text-shadow: 0 0 6px rgba(0, 0, 0, 0.9) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important; opacity: 1 !important; z-index: 1000 !important; } .leaflet-container a.leaflet-popup-close-button:hover { color: #000000 !important; background: var(--cyan-neon) !important; border-color: var(--cyan-neon) !important; box-shadow: 0 0 14px var(--cyan-neon) !important; transform: scale(1.1); } /* Tombol Buka G-Maps di Popup: Jelas, Terang, Box-Sizing Border-Box Menetap di Dalam Kotak */ .btn-popup-gmaps { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; box-sizing: border-box !important; margin-top: 10px !important; padding: 9px 14px !important; background: linear-gradient(135deg, rgba(0, 229, 255, 0.25) 0%, rgba(0, 229, 255, 0.1) 100%) !important; border: 1.5px solid var(--cyan-neon) !important; color: #FFFFFF !important; font-size: 0.82rem !important; font-weight: 800 !important; letter-spacing: 0.02em !important; border-radius: var(--radius-sm) !important; text-decoration: none !important; cursor: pointer !important; transition: all 0.2s ease !important; box-shadow: 0 2px 12px rgba(0, 229, 255, 0.3) !important; } .btn-popup-gmaps:hover { background: var(--cyan-neon) !important; color: #000000 !important; box-shadow: 0 0 18px rgba(0, 229, 255, 0.65) !important; transform: translateY(-1px) !important; } /* ========================================================================== HALAMAN LOKASI & GEOSPASIAL MULTI-SITE (HO, MO, RUMAH MENTOR) ========================================================================== */ .location-page-header { background: linear-gradient(135deg, rgba(10, 10, 14, 0.95) 0%, rgba(7, 7, 9, 0.98) 100%); border: 1px solid var(--border-cyan); border-radius: var(--radius-md); padding: 18px 20px 14px; margin-bottom: 18px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); } .loc-badge-wrap { margin-bottom: 8px; } .badge-pill-green { display: inline-flex; align-items: center; gap: 6px; background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.4); color: #10B981; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; padding: 4px 10px; border-radius: var(--radius-full); } .badge-pill-green i { font-size: 0.45rem; animation: blinkGlow 1.5s infinite; } .loc-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .loc-main-title { font-size: 1.25rem; font-weight: 800; color: #FFF; margin-bottom: 4px; letter-spacing: -0.01em; } .loc-main-subtitle { font-size: 0.8rem; color: var(--text-secondary); max-width: 650px; line-height: 1.45; } .loc-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .loc-search-box { display: flex; align-items: center; gap: 8px; background: rgba(6, 6, 8, 0.8); border: 1px solid var(--border-dark); border-radius: var(--radius-sm); padding: 7px 12px; transition: var(--transition); } .loc-search-box:focus-within { border-color: var(--cyan-neon); box-shadow: 0 0 10px rgba(0, 229, 255, 0.2); } .loc-search-box i { color: var(--text-muted); font-size: 0.85rem; } .loc-search-box input { background: transparent; border: none; color: #FFF; font-size: 0.8rem; outline: none; width: 220px; } .btn-theme-toggle { display: inline-flex; align-items: center; gap: 8px; background: rgba(0, 229, 255, 0.1); border: 1px solid var(--cyan-neon); color: var(--cyan-neon); font-size: 0.78rem; font-weight: 700; padding: 7px 14px; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition); } .btn-theme-toggle:hover { background: var(--cyan-neon); color: #000; box-shadow: 0 0 14px rgba(0, 229, 255, 0.4); } /* Pemilih Lapisan Peta Asli (Google Maps, Satelit, Carto, Cyber) */ .map-layer-selector { display: inline-flex; align-items: center; gap: 4px; background: rgba(6, 6, 8, 0.85); border: 1px solid var(--border-cyan); border-radius: var(--radius-sm); padding: 3px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .btn-layer-pill { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; color: var(--text-secondary); font-size: 0.74rem; font-weight: 700; padding: 6px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s ease; } .btn-layer-pill:hover { color: #FFF; background: rgba(255, 255, 255, 0.08); } .btn-layer-pill.active { background: var(--cyan-neon); color: #000; box-shadow: 0 0 12px rgba(0, 229, 255, 0.45); } /* Tombol Cepat Navigasi Zoom (HO, MO, House Of Server, Semua) */ .site-quick-nav-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .btn-site-quick { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: all 0.2s ease; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(10, 10, 14, 0.9); color: #E2E8F0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } .btn-site-quick:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); border-color: rgba(255, 255, 255, 0.4); color: #FFF; } .btn-site-quick.btn-quick-ho { border-color: rgba(255, 23, 68, 0.45); color: #FF4D6D; background: rgba(255, 23, 68, 0.08); } .btn-site-quick.btn-quick-ho:hover, .btn-site-quick.btn-quick-ho.active { background: rgba(255, 23, 68, 0.25); border-color: #FF1744; color: #FFF; box-shadow: 0 0 16px rgba(255, 23, 68, 0.45); } .btn-site-quick.btn-quick-mo { border-color: rgba(245, 158, 11, 0.45); color: #FBBF24; background: rgba(245, 158, 11, 0.08); } .btn-site-quick.btn-quick-mo:hover, .btn-site-quick.btn-quick-mo.active { background: rgba(245, 158, 11, 0.25); border-color: #F59E0B; color: #FFF; box-shadow: 0 0 16px rgba(245, 158, 11, 0.45); } .btn-site-quick.btn-quick-server { border-color: rgba(148, 163, 184, 0.45); color: #CBD5E1; background: rgba(148, 163, 184, 0.08); } .btn-site-quick.btn-quick-server:hover, .btn-site-quick.btn-quick-server.active { background: rgba(148, 163, 184, 0.25); border-color: #E2E8F0; color: #FFF; box-shadow: 0 0 16px rgba(148, 163, 184, 0.35); } .btn-site-quick.btn-quick-mentor { border-color: rgba(245, 158, 11, 0.45); color: #FBBF24; background: rgba(245, 158, 11, 0.08); } .btn-site-quick.btn-quick-mentor:hover, .btn-site-quick.btn-quick-mentor.active { background: rgba(245, 158, 11, 0.25); border-color: #F59E0B; color: #FFF; box-shadow: 0 0 16px rgba(245, 158, 11, 0.45); } .btn-site-quick.btn-quick-all { border-color: rgba(16, 185, 129, 0.45); color: #34D399; background: rgba(16, 185, 129, 0.08); } .btn-site-quick.btn-quick-all:hover, .btn-site-quick.btn-quick-all.active { background: rgba(16, 185, 129, 0.25); border-color: #10B981; color: #FFF; box-shadow: 0 0 16px rgba(16, 185, 129, 0.45); } /* Tab Switcher: GIS Map vs Floorplan - Tombol Sangat Jelas */ .loc-tab-switcher { display: flex; gap: 10px; padding-top: 12px; border-top: 1px dashed rgba(255, 255, 255, 0.1); } .loc-tab-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 700; cursor: pointer; background: rgba(10, 10, 14, 0.9); border: 1px solid rgba(255, 255, 255, 0.22); color: #CBD5E1; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } .loc-tab-btn:hover { color: #FFF; background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.45); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25); } .loc-tab-btn.active { background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0.12) 100%); border-color: #F59E0B; color: #FFFFFF; box-shadow: 0 0 16px rgba(245, 158, 11, 0.4), inset 0 0 8px rgba(245, 158, 11, 0.15); } /* Sub-panel Switcher */ .loc-subpanel { display: none; } .loc-subpanel.active { display: block; animation: fadeIn 0.3s ease-out; } /* Layout GIS: Peta di Kiri + 3 Kartu Site di Kanan */ .loc-gis-layout-grid { display: grid; grid-template-columns: 1.55fr 1.15fr; gap: 16px; } @media (max-width: 1080px) { .loc-gis-layout-grid { grid-template-columns: 1fr; } } .map-card-elevated { border: 1px solid var(--border-cyan); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; } .loc-map-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; } .map-coord-tag { display: inline-flex; align-items: center; gap: 6px; background: rgba(0, 229, 255, 0.08); border: 1px solid rgba(0, 229, 255, 0.3); color: var(--cyan-neon); font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-sm); } .relative-map-container { position: relative; flex: 1; min-height: 520px; } .map-telemetry-badge { position: absolute; bottom: 12px; left: 14px; background: rgba(7, 7, 9, 0.92); border: 1px solid var(--border-cyan); border-radius: var(--radius-sm); padding: 6px 14px; font-size: 0.72rem; color: #FFF; display: flex; gap: 16px; backdrop-filter: blur(8px); z-index: 400; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6); } .map-telemetry-badge span { display: inline-flex; align-items: center; gap: 6px; } /* Sidebar Wrapper & 3 Kartu Detail Site */ .loc-sidebar-wrapper { display: flex; flex-direction: column; gap: 14px; max-height: 580px; overflow-y: auto; padding-right: 4px; } .site-detail-card { background: rgba(10, 10, 14, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-md); padding: 14px 16px; cursor: pointer; transition: all 0.25s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } .site-detail-card:hover { transform: translateY(-2px); border-color: var(--cyan-neon); box-shadow: 0 6px 20px rgba(0, 229, 255, 0.2); } .site-detail-card.card-ho { border-left: 3.5px solid #FF1744 !important; } .site-detail-card.card-ho.active { background: rgba(255, 23, 68, 0.08); border-color: #FF1744; box-shadow: 0 0 20px rgba(255, 23, 68, 0.3); } .site-detail-card.card-mo { border-left: 3.5px solid #F59E0B !important; } .site-detail-card.card-mo.active { background: rgba(245, 158, 11, 0.08); border-color: #F59E0B; box-shadow: 0 0 20px rgba(245, 158, 11, 0.3); } .site-detail-card.card-mentor { border-left: 4px solid #F59E0B; } .site-detail-card.card-mentor.active { background: rgba(245, 158, 11, 0.08); border-color: #F59E0B; box-shadow: 0 0 20px rgba(245, 158, 11, 0.3); } .sdc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .sdc-badge { font-size: 0.68rem; font-weight: 800; padding: 2px 8px; border-radius: var(--radius-sm); letter-spacing: 0.05em; } .badge-blue { background: rgba(225, 29, 72, 0.18) !important; color: #FF1744 !important; border: 1px solid rgba(225, 29, 72, 0.45) !important; } .badge-purple { background: rgba(245, 158, 11, 0.18) !important; color: #FFC107 !important; border: 1px solid rgba(245, 158, 11, 0.45) !important; } .badge-amber { background: rgba(255, 193, 7, 0.18) !important; color: #FFD600 !important; border: 1px solid rgba(255, 193, 7, 0.45) !important; } .badge-cyan { background: rgba(148, 163, 184, 0.15) !important; color: #F1F5F9 !important; border: 1px solid rgba(148, 163, 184, 0.40) !important; } .sdc-addr-tag { font-size: 0.7rem; color: var(--text-muted); } .sdc-title { font-size: 0.95rem; font-weight: 800; color: #FFF; margin-bottom: 3px; } .sdc-full-addr { font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 10px; line-height: 1.35; } .sdc-device-list { background: rgba(6, 6, 8, 0.6); border-radius: var(--radius-sm); padding: 6px 10px; display: flex; flex-direction: column; gap: 5px; border: 1px solid rgba(255, 255, 255, 0.04); } .sdc-dev-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.03); } .sdc-dev-row:last-child { border-bottom: none; } .sdc-dev-name { color: #E2E8F0; font-weight: 600; } /* ========================================================================== BLUEPRINT & DENAH ARSITEKTUR BANGUNAN ========================================================================== */ .floorplan-master-container { background: #000000; border: 1px solid var(--border-cyan); border-radius: var(--radius-md); padding: 20px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6); } .floorplan-intro-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .floorplan-intro-bar h4 { font-size: 1.05rem; font-weight: 800; color: #FFF; margin-bottom: 4px; } .floorplan-intro-bar p { font-size: 0.76rem; color: var(--text-secondary); max-width: 650px; } .site-blueprint-selector { display: flex; gap: 8px; flex-wrap: wrap; } .btn-bp-choice { background: rgba(10, 10, 14, 0.8); border: 1px solid var(--border-dark); color: var(--text-secondary); padding: 6px 14px; border-radius: var(--radius-sm); font-size: 0.76rem; font-weight: 700; cursor: pointer; transition: var(--transition); } .btn-bp-choice:hover { color: #FFF; border-color: var(--cyan-neon); } .btn-bp-choice.active { background: rgba(0, 229, 255, 0.15); border-color: var(--cyan-neon); color: var(--cyan-neon); box-shadow: 0 0 10px rgba(0, 229, 255, 0.25); } .blueprint-canvas-box { background: linear-gradient(rgba(0, 229, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 229, 255, 0.05) 1px, transparent 1px), #000000; background-size: 24px 24px; border: 1px solid rgba(0, 229, 255, 0.35); border-radius: var(--radius-md); padding: 22px; position: relative; box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8); } .bp-site-meta { margin-bottom: 16px; } .bp-tag { font-size: 0.68rem; font-weight: 800; padding: 3px 8px; border-radius: var(--radius-sm); margin-bottom: 6px; display: inline-block; } .bp-site-meta h3 { font-size: 1.1rem; font-weight: 800; color: #FFF; } .blueprint-layout-scheme { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .bp-room { background: rgba(7, 7, 9, 0.88); border: 2px dashed rgba(0, 229, 255, 0.3); border-radius: var(--radius-sm); padding: 16px; cursor: pointer; transition: all 0.25s ease; position: relative; } .bp-room:hover { border-color: var(--cyan-neon); background: rgba(0, 229, 255, 0.08); transform: translateY(-2px); box-shadow: 0 0 20px rgba(0, 229, 255, 0.25); } .bp-room.room-server { border-left: 4px solid var(--cyan-neon); } .bp-room.room-workstation { border-left: 4px solid #10B981; } .bp-room.room-outdoor { border-left: 4px solid #F59E0B; } .bp-room.room-network { border-left: 4px solid #A855F7; } .bp-room.room-security { border-left: 4px solid #3B82F6; } .bp-room.room-evaluator { border-left: 4px solid #EC4899; } .bp-room-head { font-size: 0.82rem; font-weight: 800; color: #FFF; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .bp-devices-chips { display: flex; flex-wrap: wrap; gap: 6px; } .bp-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.7rem; font-family: 'JetBrains Mono', monospace; font-weight: 600; padding: 3px 8px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #E2E8F0; } .bp-chip.online { background: rgba(0, 255, 157, 0.15) !important; border: 1.5px solid rgba(0, 255, 157, 0.6) !important; color: #00FF9D !important; text-shadow: 0 0 8px rgba(0, 255, 157, 0.5) !important; } .bp-chip.warning { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.4); color: #FBBF24; } .bp-chip.offline { background: rgba(255, 23, 68, 0.15) !important; border: 1.5px solid rgba(255, 23, 68, 0.6) !important; color: #FF1744 !important; text-shadow: 0 0 8px rgba(255, 23, 68, 0.5) !important; } /* ========================================================================== INTERACTIVE ARCHITECTURAL FLOORPLAN WITH REAL-TIME PINS (OPSI 1) ========================================================================== */ .floorplan-split-grid { display: grid; grid-template-columns: minmax(320px, 1.25fr) minmax(280px, 1fr); gap: 22px; align-items: start; margin-top: 14px; } @media (max-width: 992px) { .floorplan-split-grid { grid-template-columns: 1fr; } } .floorplan-visual-stage { background: #000000; border: 1px solid rgba(0, 229, 255, 0.25); border-radius: var(--radius-md); padding: 16px; position: relative; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(0, 229, 255, 0.05); display: flex; justify-content: center; align-items: center; overflow: hidden; } .floorplan-image-container { position: relative; display: inline-block; max-width: 100%; margin: 0 auto; } .floorplan-image { display: block; max-width: 100%; max-height: 520px; height: auto; border-radius: 6px; filter: invert(0.92) hue-rotate(180deg) brightness(1.05) contrast(1.15); transition: filter 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.15); } .floorplan-pin { position: absolute; transform: translate(-50%, -50%); cursor: pointer; z-index: 20; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), z-index 0.2s ease; display: flex; align-items: center; gap: 6px; } .floorplan-pin:hover { transform: translate(-50%, -50%) scale(1.15); z-index: 30; } .pin-beacon { position: relative; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; } .pin-pulse { position: absolute; width: 100%; height: 100%; border-radius: 50%; opacity: 0.75; animation: pinPulseRing 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; } .pin-pulse.online { background: rgba(0, 255, 157, 0.45) !important; box-shadow: 0 0 16px #00FF9D !important; } .pin-pulse.offline { background: rgba(255, 23, 68, 0.45) !important; box-shadow: 0 0 16px #FF1744 !important; } .pin-pulse.warning { background: rgba(245, 158, 11, 0.4); box-shadow: 0 0 12px #F59E0B; } .pin-center-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #000000; z-index: 2; transition: background 0.3s ease; } .pin-center-dot.online { background: #00FF9D !important; box-shadow: 0 0 10px #00FF9D !important; } .pin-center-dot.offline { background: #FF1744 !important; box-shadow: 0 0 10px #FF1744 !important; } .pin-center-dot.warning { background: #F59E0B; } .pin-badge { background: rgba(9, 14, 26, 0.92); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 4px; padding: 2px 7px; font-size: 0.68rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: #FFF; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); pointer-events: none; display: flex; align-items: center; gap: 4px; } .pin-badge.online { border: 1.5px solid #00FF9D !important; color: #00FF9D !important; background: rgba(0, 255, 157, 0.18) !important; text-shadow: 0 0 8px rgba(0, 255, 157, 0.6) !important; } .pin-badge.offline { border: 1.5px solid #FF1744 !important; color: #FF1744 !important; background: rgba(255, 23, 68, 0.18) !important; text-shadow: 0 0 8px rgba(255, 23, 68, 0.6) !important; } @keyframes pinPulseRing { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.2); opacity: 0; } } .floorplan-legend-panel { display: flex; flex-direction: column; gap: 12px; } .legend-room-card { background: rgba(11, 18, 32, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-left: 3px solid #FFC107; border-radius: var(--radius-sm); padding: 12px 14px; transition: all 0.2s ease; cursor: pointer; } .legend-room-card:hover { background: rgba(0, 229, 255, 0.06); border-color: rgba(0, 229, 255, 0.35); border-left-color: var(--cyan-neon); transform: translateX(3px); } .legend-room-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; font-weight: 800; color: #F1F5F9; margin-bottom: 6px; } .legend-room-desc { font-size: 0.72rem; color: #94A3B8; margin-bottom: 8px; line-height: 1.35; } /* ========================================================================== MODUL 2: INVENTARIS ASET IT (PAGE-ASSETS) ========================================================================== */ .assets-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .asset-kpi-card { background: var(--bg-card); border: 1px solid var(--border-dark); border-radius: var(--radius-md); padding: 14px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-card); transition: var(--transition); } .asset-kpi-card:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.22); } .ak-icon { width: 42px; height: 42px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } .ak-icon.crimson { background: rgba(225, 29, 72, 0.2); color: var(--tekno-red); } .ak-icon.green { background: rgba(16, 185, 129, 0.2); color: var(--status-online); } .ak-icon.yellow { background: rgba(245, 158, 11, 0.2); color: var(--status-warning); } .ak-icon.red { background: rgba(239, 68, 68, 0.2); color: var(--status-offline); } .ak-info { display: flex; flex-direction: column; } .ak-label { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; } .ak-val { font-size: 1.22rem; font-weight: 800; line-height: 1.15; margin: 3px 0; } .ak-sub { font-size: 0.66rem; color: var(--text-secondary); } .condition-pill { padding: 2px 7px; border-radius: var(--radius-full); font-size: 0.68rem; font-weight: 700; } .condition-pill.good { background: rgba(16, 185, 129, 0.15); color: #34D399; border: 1px solid rgba(16, 185, 129, 0.3); } .condition-pill.warning { background: rgba(245, 158, 11, 0.15); color: #FBBF24; border: 1px solid rgba(245, 158, 11, 0.3); } .condition-pill.danger { background: rgba(239, 68, 68, 0.15); color: #F87171; border: 1px solid rgba(239, 68, 68, 0.3); } /* QR Modal Preview */ .qr-preview-box { display: flex; justify-content: center; padding: 10px 0; } .qr-border-frame { background: #FFFFFF; color: #000000; padding: 16px 20px; border-radius: var(--radius-sm); display: inline-block; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); } .qr-mock-code i { font-size: 4.8rem; color: #121216; } .qr-info-meta { text-align: center; } .qr-info-meta strong { color: #A81B34 !important; font-size: 1rem; display: block; } .qr-info-meta p { color: #000 !important; font-size: 0.82rem; margin: 2px 0; } .qr-info-meta span { color: #555 !important; font-size: 0.7rem; } /* ========================================================================== MODUL INFORMASI PENGGUNA & TIM PKL TEKNOLAB (PERSIS GAMBAR 1 & GAMBAR 2) ========================================================================== */ #page-project-info { padding: 10px 4px 30px 4px; } /* Header Halaman (Persis Gambar 1) */ .project-page-header { margin-bottom: 22px; } .pi-badge-wrap { margin-bottom: 8px; } .badge-pill-green { display: inline-flex; align-items: center; gap: 7px; background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.45); color: #10B981; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.6px; padding: 4px 12px; border-radius: 9999px; box-shadow: 0 0 10px rgba(16, 185, 129, 0.2); } .badge-pill-green i { font-size: 0.45rem; color: #10B981; } .pi-header-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .pi-main-title { font-size: 1.5rem; font-weight: 800; color: #FFFFFF; margin: 0 0 4px 0; letter-spacing: -0.3px; } .pi-main-subtitle { font-size: 0.82rem; color: #94A3B8; margin: 0; } .btn-edit-team-top { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%); border: 1px solid #38BDF8; color: #FFFFFF; font-weight: 700; font-size: 0.85rem; padding: 8px 18px; border-radius: 8px; cursor: pointer; box-shadow: 0 0 14px rgba(2, 132, 199, 0.35); transition: all 0.2s ease; } .btn-edit-team-top:hover { background: linear-gradient(180deg, #27354D 0%, #172033 100%); box-shadow: 0 0 20px rgba(56, 189, 248, 0.5); transform: translateY(-1px); } /* Shift Sections (Shift 1 & Shift 2) */ .shift-section-box { margin-bottom: 24px; } .shift-banner-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-radius: 10px; margin-bottom: 14px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); } .shift-banner-bar.s1-banner { background: linear-gradient(90deg, rgba(245, 158, 11, 0.18) 0%, rgba(10, 10, 14, 0.95) 100%); border-left: 4px solid #F59E0B; border-top: 1px solid rgba(245, 158, 11, 0.35); border-right: 1px solid rgba(245, 158, 11, 0.25); border-bottom: 1px solid rgba(245, 158, 11, 0.25); } .shift-banner-bar.s2-banner { background: linear-gradient(90deg, rgba(2, 132, 199, 0.18) 0%, rgba(10, 10, 14, 0.95) 100%); border-left: 4px solid #0284C7; border-top: 1px solid rgba(56, 189, 248, 0.35); border-right: 1px solid rgba(56, 189, 248, 0.25); border-bottom: 1px solid rgba(56, 189, 248, 0.25); } .sbb-left { display: flex; align-items: center; gap: 14px; } .sbb-icon-white { font-size: 1.3rem; color: #FFFFFF; background: rgba(255, 255, 255, 0.1); width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .sbb-title { font-size: 0.95rem; font-weight: 800; color: #FFFFFF; margin: 0 0 3px 0; letter-spacing: 0.4px; } .sbb-sub { font-size: 0.78rem; color: #CBD5E1; margin: 0; } .sbb-right { display: flex; align-items: center; } .sbb-badge { font-size: 0.76rem; font-weight: 700; padding: 4px 12px; border-radius: 9999px; } .sbb-badge.badge-amber { background: rgba(245, 158, 11, 0.2); border: 1px solid rgba(245, 158, 11, 0.6); color: #FBBF24; box-shadow: 0 0 10px rgba(245, 158, 11, 0.25); } .sbb-badge.badge-blue { background: rgba(225, 29, 72, 0.2) !important; border: 1px solid rgba(225, 29, 72, 0.6) !important; color: #FF1744 !important; box-shadow: 0 0 10px rgba(225, 29, 72, 0.25) !important; } /* 3-Column Grid Kartu Shift */ .shift-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 1200px) { .shift-cards-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .shift-cards-grid { grid-template-columns: 1fr; } } /* Kartu Anggota Tim (Persis Gambar 1 & 2) */ .team-member-card { background: rgba(10, 10, 14, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 16px 18px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; justify-content: space-between; transition: all 0.25s ease; backdrop-filter: blur(8px); } .team-member-card:hover { transform: translateY(-3px); border-color: var(--member-color, rgba(56, 189, 248, 0.7)); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6), 0 0 20px var(--member-color, rgba(2, 132, 199, 0.35)); } .tm-header { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; } .tm-avatar { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; transition: all 0.25s ease; } .team-member-card:hover .tm-avatar { transform: scale(1.08) rotate(2deg); } .tm-info { flex: 1; min-width: 0; } .tm-name { font-size: 0.95rem; font-weight: 800; color: #FFFFFF; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.3px; } .tm-role { font-size: 0.74rem; font-weight: 700; color: var(--member-color, #38BDF8); margin: 2px 0 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.2px; } /* Kontak Block (HP & Email) */ .tm-contacts { background: rgba(6, 6, 8, 0.65); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 5px; } .tm-contact-row { display: flex; align-items: center; gap: 8px; font-size: 0.74rem; color: #94A3B8; cursor: pointer; transition: color 0.15s ease; } .tm-contact-row:hover { color: #FFFFFF; } .tm-contact-row i { width: 14px; text-align: center; color: #00F0FF; font-size: 0.72rem; flex-shrink: 0; } .tm-contact-row a { color: #E2E8F0; text-decoration: none; font-family: 'JetBrains Mono', monospace; font-size: 0.73rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tm-contact-row a:hover { color: #00F0FF; text-decoration: underline; } /* Deskripsi Tugas */ .tm-desc { font-size: 0.75rem; color: #94A3B8; line-height: 1.5; margin: 0 0 14px 0; flex: 1; } /* Footer Kartu */ .tm-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .tm-shift-pill { font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 9999px; background: rgba(255, 255, 255, 0.06); color: #CBD5E1; border: 1px solid rgba(255, 255, 255, 0.1); } .btn-card-edit { width: 28px; height: 28px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); color: #94A3B8; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.75rem; transition: all 0.2s ease; } .btn-card-edit:hover { background: rgba(2, 132, 199, 0.3); border-color: #38BDF8; color: #FFFFFF; } .btn-primary-blue { background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%); border: 1px solid #38BDF8; color: #FFFFFF; font-weight: 700; padding: 8px 18px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s ease; box-shadow: 0 0 12px rgba(2, 132, 199, 0.35); } .btn-primary-blue:hover { background: linear-gradient(180deg, #27354D 0%, #172033 100%); box-shadow: 0 0 18px rgba(56, 189, 248, 0.5); } .cyber-textarea { width: 100%; background: rgba(6, 6, 8, 0.8); border: 1px solid var(--border-dark); border-radius: var(--radius-sm); padding: 8px 12px; color: #FFF; font-family: inherit; font-size: 0.8rem; resize: vertical; } .cyber-textarea:focus { outline: none; border-color: var(--cyan-neon); box-shadow: 0 0 10px var(--cyan-glow); } /* ========================================================================== TOMBOL KEMBALI PORTAL LOGIN & ENHANCEMENT ========================================================================== */ .auth-back-action { margin-top: 18px; text-align: center; } .btn-back-home { display: inline-flex; align-items: center; gap: 8px; color: var(--cyan-dim, #06B6D4); font-size: 13px; font-weight: 600; text-decoration: none; padding: 10px 18px; border-radius: 10px; background: rgba(0, 229, 255, 0.08); border: 1px solid rgba(0, 229, 255, 0.25); transition: all 0.2s ease; } .btn-back-home:hover { background: rgba(0, 229, 255, 0.2); border-color: var(--cyan-neon, #00E5FF); color: #ffffff; transform: translateX(-3px); } /* ========================================================================== WIDGET: T-AIMS AI INFRASTRUCTURE ASSISTANT (PDF HAL. 4 & HAL. 11) ========================================================================== */ .ai-assistant-widget-panel { background: linear-gradient(135deg, rgba(10, 10, 14, 0.98), rgba(12, 12, 16, 0.95)); border: 1px solid rgba(0, 229, 255, 0.35); border-radius: 14px; padding: 18px 22px; margin-bottom: 22px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); position: relative; overflow: hidden; } .ai-assistant-widget-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #00E5FF, #3B82F6, #10B981); } .ai-widget-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .ai-widget-title-group { display: flex; align-items: center; gap: 12px; } .ai-pulse-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(0, 229, 255, 0.12); border: 1px solid rgba(0, 229, 255, 0.3); display: flex; align-items: center; justify-content: center; color: #00E5FF; font-size: 16px; animation: pulse-cyan 2s infinite; } @keyframes pulse-cyan { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.4); } 50% { box-shadow: 0 0 0 8px rgba(0, 229, 255, 0); } } .ai-widget-title-group h3 { font-size: 15px; font-weight: 700; color: #ffffff; margin: 0; } .ai-widget-title-group small { font-size: 11px; color: #94A3B8; display: block; } .ai-widget-actions { display: flex; align-items: center; gap: 10px; } .ai-badge-live { display: inline-flex; align-items: center; gap: 6px; background: rgba(16, 185, 129, 0.15); color: #10B981; border: 1px solid rgba(16, 185, 129, 0.3); padding: 4px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; } .ai-badge-live.warning { background: rgba(245, 158, 11, 0.15); color: #F59E0B; border-color: rgba(245, 158, 11, 0.3); } .ai-badge-live.critical { background: rgba(239, 68, 68, 0.15); color: #EF4444; border-color: rgba(239, 68, 68, 0.3); } .btn-ai-refresh { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); color: #E2E8F0; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px; } .btn-ai-refresh:hover { background: rgba(0, 229, 255, 0.15); border-color: #00E5FF; color: #00E5FF; } .ai-digest-strip { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .ai-digest-pill { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 6px 12px; font-size: 11px; color: #94A3B8; } .ai-digest-pill strong { color: #E2E8F0; margin-left: 4px; } .ai-insight-content { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; } .ai-problem-block, .ai-recommendation-block { background: rgba(6, 6, 8, 0.6); border-radius: 10px; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, 0.05); } .ai-block-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } .ai-problem-block .ai-block-label { color: #EF4444; } .ai-recommendation-block .ai-block-label { color: #00E5FF; } .ai-problem-block p, .ai-recommendation-block p { font-size: 12px; color: #CBD5E1; line-height: 1.6; margin: 0; } @media (max-width: 900px) { .ai-insight-content { grid-template-columns: 1fr; } } /* ========================================================================== COMPACT HUD CYBER DARK DASHBOARD (FIT IN VIEWPORT WITHOUT SCROLLING ON DESKTOP) ========================================================================== */ @media (min-width: 901px) and (min-height: 700px) { #page-dashboard.page-view.active { display: flex !important; flex-direction: column; justify-content: space-between; height: 100% !important; overflow: hidden !important; } .content-container { padding: 6px 14px 6px 14px !important; overflow: hidden !important; } .banner-hero { padding: 13px 20px !important; margin-bottom: 8px !important; } .banner-title { font-size: 1.45rem !important; font-weight: 800 !important; margin-bottom: 3px !important; } .banner-desc { font-size: 0.84rem !important; margin-bottom: 0 !important; } .slogan-box { padding: 8px 16px !important; } .slogan-box .slogan-line { font-size: 0.74rem !important; line-height: 1.25 !important; font-weight: 800 !important; } .kpi-grid { grid-template-columns: repeat(6, 1fr) !important; gap: 9px !important; margin-bottom: 8px !important; } .kpi-card { padding: 9px 12px !important; min-height: 72px !important; } .kpi-top { gap: 10px !important; } .kpi-title { font-size: 0.78rem !important; } .kpi-value { font-size: 1.45rem !important; font-weight: 800 !important; } .kpi-icon-box { width: 36px !important; height: 36px !important; font-size: 16px !important; } .kpi-bottom { font-size: 0.72rem !important; margin-top: 4px !important; } .charts-row { gap: 10px !important; margin-bottom: 8px !important; } .charts-row .dashboard-card .card-header { padding: 6px 12px !important; } .chart-body { height: 200px !important; padding: 6px 12px !important; } .donut-body { height: 200px !important; padding: 6px 16px !important; gap: 16px !important; } .donut-visual-wrap { width: 135px !important; height: 135px !important; } .donut-center-label strong { font-size: 1.45rem !important; } .bottom-three-grid { display: grid !important; grid-template-columns: 1.4fr 1.2fr 1fr !important; gap: 8px !important; margin-bottom: 6px !important; flex: 1 1 0 !important; min-height: 0 !important; } .bottom-three-grid .dashboard-card { display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 0 !important; overflow: hidden !important; } .bottom-three-grid .card-header { padding: 5px 10px !important; flex-shrink: 0 !important; } .status-table-card .card-body { flex: 1 1 0 !important; height: 100% !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; } .status-table-card .table-responsive { height: 100% !important; overflow-y: auto !important; } .map-card .card-body { flex: 1 1 0 !important; height: 100% !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; padding: 5px 8px !important; } .map-interactive-container { flex: 1 1 0 !important; position: relative !important; min-height: 0 !important; display: flex !important; } .home-map-leaflet { width: 100% !important; height: 100% !important; min-height: 0 !important; flex: 1 !important; } .map-legend-bar { padding-top: 3px !important; font-size: 0.68rem !important; flex-shrink: 0 !important; } .alerts-card .card-body { flex: 1 1 0 !important; height: 100% !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; } .alerts-timeline-wrap { height: 100% !important; max-height: none !important; overflow-y: auto !important; } .maintenance-section { padding: 6px 14px !important; margin-top: 0 !important; margin-bottom: 0 !important; flex-shrink: 0 !important; } .maint-header { margin-bottom: 4px !important; } .maint-cards-grid { gap: 8px !important; } .m-card { padding: 5px 10px !important; } .m-val { font-size: 1.25rem !important; color: #FFFFFF !important; font-weight: 800 !important; } .m-lbl { font-size: 0.74rem !important; color: #FFFFFF !important; font-weight: 600 !important; } } /* ========================================================================== STRICT PAGE VIEW DISPLAY CONTROL (NO OVERLAPPING BETWEEN DASHBOARD & MENUS) ========================================================================== */ .page-view { display: none !important; } .page-view.active { display: block !important; } #page-dashboard.page-view { display: none !important; } #page-dashboard.page-view.active { display: flex !important; flex-direction: column; justify-content: space-between; } /* LEAFLET DARK MAP BACKGROUND FIX */ .map-interactive-container, .home-map-leaflet, #home-blitar-map, #full-blitar-map, .leaflet-container { background-color: #050508 !important; border-radius: var(--radius-sm); } .leaflet-tile { filter: brightness(0.65) invert(1) contrast(2.5) hue-rotate(200deg) saturate(0.3) !important; } /* ========================================================================== VIVID HUD ENHANCEMENTS: GLOWING ICONS, THICK DONUT, CRISP ONLINE STATUS, AND FULL-BOTTOM VIEWPORT EXTENSION (NO EMPTY BLACK VOID AT BOTTOM) ========================================================================== */ .main-content { height: 100vh; max-height: 100vh; display: flex; flex-direction: column; overflow: hidden; } .content-container { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding: 6px 14px 6px 14px !important; overflow: hidden; } @media (min-width: 901px) { #page-dashboard.page-view.active { flex: 1 1 0; min-height: 0; height: 100%; display: flex !important; flex-direction: column; justify-content: space-between; overflow: hidden !important; } } /* KHUSUS HALAMAN SELAIN DASHBOARD: BOLEH DAN HARUS BISA DI-SCROLL LANCAR */ .page-view.active:not(#page-dashboard) { display: block !important; flex: 1 1 0; min-height: 0; height: 100%; overflow-y: auto !important; overflow-x: hidden; padding-right: 6px; padding-bottom: 30px; } /* Scrollbar halus tersamar untuk halaman scrollable (Warna abu lembut, tidak mencolok) */ .page-view.active:not(#page-dashboard) { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.25) transparent; } .page-view.active:not(#page-dashboard)::-webkit-scrollbar { width: 5px; } .page-view.active:not(#page-dashboard)::-webkit-scrollbar-track { background: transparent; } .page-view.active:not(#page-dashboard)::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.22); border-radius: 9999px; transition: background 0.2s ease; } .page-view.active:not(#page-dashboard)::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.45); } @media (min-width: 901px) { /* TIGA KARTU BAWAH DIPERBESAR SECARA DINAMIS MENGISI RUANG TANPA MEMICU SCROLLBAR */ .bottom-three-grid { display: grid !important; grid-template-columns: 1.4fr 1.2fr 1fr !important; gap: 8px !important; flex: 1 1 0 !important; min-height: 0 !important; margin-bottom: 6px !important; } .bottom-three-grid .dashboard-card { display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 0 !important; overflow: hidden !important; } .bottom-three-grid .card-header { padding: 5px 10px !important; flex-shrink: 0 !important; } } @media (min-width: 901px) { .status-table-card .card-body { flex: 1 1 0 !important; height: 100% !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; } .status-table-card .table-responsive { height: 100% !important; overflow-y: auto !important; } .map-card .card-body { flex: 1 1 0 !important; height: 100% !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; padding: 5px 8px !important; } .map-interactive-container { flex: 1 1 0 !important; position: relative !important; min-height: 0 !important; display: flex !important; } .home-map-leaflet { width: 100% !important; height: 100% !important; min-height: 0 !important; flex: 1 !important; } .map-legend-bar { padding-top: 3px !important; font-size: 0.68rem !important; flex-shrink: 0 !important; } .alerts-card .card-body { flex: 1 1 0 !important; height: 100% !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; } .alerts-timeline-wrap { height: 100% !important; max-height: none !important; overflow-y: auto !important; } } .maintenance-section { margin-top: 0 !important; margin-bottom: 0 !important; flex-shrink: 0 !important; padding: 6px 14px !important; background: rgba(10, 10, 14, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important; } /* 6 KPI GRID PROPORTION */ .kpi-grid { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 10px !important; margin-bottom: 0.75rem !important; } /* SUPER VIVID NEON STATUS PILLS (SUPER CERAH & MENYALA, TIDAK BUTEK) */ .status-pill.online { background: rgba(0, 255, 157, 0.14) !important; border: 1.5px solid #00FF9D !important; color: #00FF9D !important; font-weight: 800 !important; padding: 3.5px 11px !important; border-radius: 9999px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; text-shadow: 0 0 10px rgba(0, 255, 157, 0.65) !important; box-shadow: 0 0 12px rgba(0, 255, 157, 0.3), inset 0 0 6px rgba(0, 255, 157, 0.08) !important; } .status-pill.online .dot.green, .dot.green.pulse, .pulse-led.online, .dot.green { background: #00FF9D !important; box-shadow: 0 0 8px #00FF9D, 0 0 16px #00FF9D !important; } .status-pill.warning { background: rgba(255, 214, 0, 0.14) !important; border: 1.5px solid #FFD600 !important; color: #FFD600 !important; font-weight: 800 !important; padding: 3.5px 11px !important; border-radius: 9999px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; text-shadow: 0 0 10px rgba(255, 214, 0, 0.65) !important; box-shadow: 0 0 12px rgba(255, 214, 0, 0.3) !important; } .status-pill.warning .dot.yellow, .dot.yellow.pulse, .pulse-led.warning, .dot.yellow { background: #FFD600 !important; box-shadow: 0 0 8px #FFD600, 0 0 16px #FFD600 !important; } .status-pill.offline { background: rgba(255, 23, 68, 0.14) !important; border: 1.5px solid #FF1744 !important; color: #FF1744 !important; font-weight: 800 !important; padding: 3.5px 11px !important; border-radius: 9999px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; text-shadow: 0 0 10px rgba(255, 23, 68, 0.65) !important; box-shadow: 0 0 12px rgba(255, 23, 68, 0.3), inset 0 0 6px rgba(255, 23, 68, 0.08) !important; } .status-pill.offline .dot.red, .dot.red.pulse, .pulse-led.offline, .dot.red { background: #FF1744 !important; box-shadow: 0 0 8px #FF1744, 0 0 16px #FF1744 !important; } .status-pill.unknown { background: rgba(148, 163, 184, 0.12) !important; border: 1.5px solid #94A3B8 !important; color: #E2E8F0 !important; font-weight: 800 !important; padding: 3.5px 11px !important; border-radius: 9999px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; box-shadow: 0 0 8px rgba(148, 163, 184, 0.2) !important; } .status-pill.unknown .dot.gray, .dot.gray { background: #94A3B8 !important; box-shadow: 0 0 6px #94A3B8 !important; } /* VIBRANT GLOWING MAINTENANCE ICON BOXES */ .m-icon.bg-blue { background: rgba(225, 29, 72, 0.25) !important; border: 1px solid rgba(245, 158, 11, 0.6) !important; color: #38BDF8 !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important; } .m-icon.bg-amber { background: rgba(245, 158, 11, 0.25) !important; border: 1px solid rgba(251, 191, 36, 0.6) !important; color: #FBBF24 !important; box-shadow: 0 0 12px rgba(245, 158, 11, 0.4) !important; } .m-icon.bg-red { background: rgba(239, 68, 68, 0.25) !important; border: 1px solid rgba(248, 113, 113, 0.6) !important; color: #F87171 !important; box-shadow: 0 0 12px rgba(239, 68, 68, 0.4) !important; } .m-icon.bg-green { background: rgba(16, 185, 129, 0.25) !important; border: 1px solid rgba(52, 211, 153, 0.6) !important; color: #34D399 !important; box-shadow: 0 0 12px rgba(16, 185, 129, 0.4) !important; } /* DONUT CHART SHIFTED LEFT & RICH LEGEND FILLING RIGHT */ .donut-body { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 22px !important; padding: 8px 16px !important; } .donut-visual-wrap { width: 145px !important; height: 145px !important; flex-shrink: 0 !important; margin-left: 4px !important; } .donut-legend-col { flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; max-height: 168px !important; overflow-y: auto !important; padding-right: 6px !important; scrollbar-width: thin; scrollbar-color: rgba(0, 229, 255, 0.4) rgba(10, 10, 14, 0.4); } .donut-legend-col::-webkit-scrollbar { width: 5px; } .donut-legend-col::-webkit-scrollbar-track { background: rgba(10, 10, 14, 0.4); border-radius: 999px; } .donut-legend-col::-webkit-scrollbar-thumb { background: rgba(0, 229, 255, 0.4); border-radius: 999px; } .donut-legend-col::-webkit-scrollbar-thumb:hover { background: rgba(0, 229, 255, 0.75); } .donut-legend-col-noop { } .d-leg-row { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 3px 6px !important; border-radius: 4px !important; background: rgba(255, 255, 255, 0.02) !important; } .d-leg-name { font-size: 0.8rem !important; color: #E2E8F0 !important; font-weight: 600 !important; } .d-leg-val strong { color: #FFFFFF !important; font-size: 0.85rem !important; } .d-leg-val small { color: var(--cyan-dim) !important; font-weight: 600 !important; margin-left: 4px !important; } /* ========================================================================== T-AIMS FULL ENTERPRISE SUITE: 6 MODULES (PDF STANDARDS COMPLIANT) ========================================================================== */ /* 1. STATS OVERVIEW CARDS */ .stats-overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 12px; } .stat-card { background: rgba(10, 10, 14, 0.88); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-md); padding: 14px 18px; display: flex; align-items: center; gap: 14px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); transition: var(--transition); } .stat-card:hover { transform: translateY(-2px); border-color: rgba(0, 240, 255, 0.3); box-shadow: 0 6px 20px rgba(0, 240, 255, 0.15); } .stat-icon-wrap { width: 44px; height: 44px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; } .stat-icon-wrap.cyan { background: rgba(0, 240, 255, 0.15); color: var(--cyan-neon); border: 1px solid rgba(0, 240, 255, 0.35); } .stat-icon-wrap.green { background: rgba(16, 185, 129, 0.15); color: #10B981; border: 1px solid rgba(16, 185, 129, 0.35); } .stat-icon-wrap.red { background: rgba(225, 29, 72, 0.15); color: #FF2E63; border: 1px solid rgba(255, 255, 255, 0.12); } .stat-icon-wrap.yellow { background: rgba(245, 158, 11, 0.15); color: #F59E0B; border: 1px solid rgba(245, 158, 11, 0.35); } .stat-icon-wrap.gray { background: rgba(148, 163, 184, 0.15); color: #CBD5E1; border: 1px solid rgba(148, 163, 184, 0.35); } .stat-info { display: flex; flex-direction: column; min-width: 0; } .stat-label { font-size: 0.76rem; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .stat-val { font-size: 1.4rem; font-weight: 800; color: #FFF; font-family: 'JetBrains Mono', monospace; line-height: 1.2; margin: 2px 0; } .stat-sub { font-size: 0.72rem; } /* 2. NOC PROTOCOL MATRIX GRID (2 Baris x 3 Kolom Proporsional) */ .protocol-matrix-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 992px) { .protocol-matrix-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .protocol-matrix-grid { grid-template-columns: 1fr; } } .protocol-card { background: rgba(10, 10, 14, 0.9); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-md); padding: 14px 16px; transition: var(--transition); } .protocol-card:hover { border-color: var(--cyan-neon); transform: translateY(-2px); box-shadow: 0 4px 18px rgba(0, 240, 255, 0.2); } .proto-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .proto-tag { font-size: 0.72rem; font-weight: 800; color: var(--cyan-neon); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; } .proto-title { font-size: 0.88rem; font-weight: 700; color: #FFF; display: block; margin-bottom: 8px; } .proto-meta { display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; color: var(--text-secondary); border-top: 1px dashed rgba(255, 255, 255, 0.08); padding-top: 8px; } .proto-meta span { display: flex; justify-content: space-between; } /* 3. NOC SPLIT & SITE LINKS */ .noc-split-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; } @media (max-width: 992px) { .noc-split-grid { grid-template-columns: 1fr; } } .site-link-list { display: flex; flex-direction: column; gap: 12px; } .site-link-item { background: rgba(4, 4, 6, 0.6); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--radius-sm); padding: 12px 14px; } .sli-header { display: flex; justify-content: space-between; align-items: center; font-size: 0.84rem; font-weight: 700; color: #FFF; margin-bottom: 8px; } .sli-bar { height: 6px; background: rgba(255, 255, 255, 0.08); border-radius: 3px; overflow: hidden; margin-bottom: 8px; } .sli-fill { height: 100%; background: linear-gradient(90deg, #10B981, #FFC107); border-radius: 3px; } .sli-meta { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-muted); } /* 4. CYBER TERMINAL NOC */ .noc-stream-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; } .noc-stream-actions { display: flex; gap: 8px; align-items: center; } .cyber-terminal-box { background: #000000; border: 1px solid rgba(0, 240, 255, 0.2); border-radius: 0 0 var(--radius-md) var(--radius-md); padding: 14px 16px; font-family: 'JetBrains Mono', monospace; font-size: 0.76rem; color: #38BDF8; height: 180px; overflow-y: auto; line-height: 1.6; } .term-line { margin-bottom: 3px; word-break: break-all; } .term-ts { color: var(--text-muted); margin-right: 8px; } .term-ok { color: #10B981; } .term-warn { color: #F59E0B; } .term-err { color: #FF2E63; } .term-json { color: #CBD5E1; } /* 5. RULES GRID */ .rules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; } .rule-box { background: rgba(4, 4, 6, 0.7); border-radius: var(--radius-sm); padding: 12px 14px; border-left: 3px solid; font-size: 0.78rem; line-height: 1.4; } .rule-box.green { border-color: #10B981; } .rule-box.yellow { border-color: #F59E0B; } .rule-box.red { border-color: #FF2E63; } .rule-box.cyan { border-color: rgba(148, 163, 184, 0.45); background: rgba(148, 163, 184, 0.08); } .rule-box strong { display: block; margin-bottom: 4px; font-size: 0.82rem; } .rule-box p { color: var(--text-secondary); margin: 0; } /* 6. NOTIFICATION GATEWAY ROW */ .notif-gateways-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .gateway-chip { background: rgba(4, 4, 6, 0.7); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; align-items: center; gap: 12px; } .gateway-chip.active { border-color: rgba(0, 240, 255, 0.3); } .gc-icon { font-size: 1.5rem; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .gc-info { flex: 1; display: flex; flex-direction: column; min-width: 0; } .gc-info strong { font-size: 0.84rem; color: #FFF; } .gc-info span { font-size: 0.72rem; color: var(--text-muted); } /* 7. AI ASSISTANT HERO CARD */ .ai-assistant-hero-card { background: linear-gradient(135deg, rgba(10, 10, 14, 0.95) 0%, rgba(26, 20, 10, 0.4) 50%, rgba(10, 10, 14, 0.95) 100%); border: 1.5px solid rgba(255, 193, 7, 0.45); border-radius: var(--radius-md); padding: 20px 22px; box-shadow: 0 0 25px rgba(255, 193, 7, 0.15); } .ai-hero-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid rgba(255, 193, 7, 0.25); padding-bottom: 14px; } .ai-badge-group { display: flex; align-items: center; gap: 14px; } .ai-badge-pulse { width: 42px; height: 42px; border-radius: var(--radius-sm); background: rgba(255, 193, 7, 0.2); border: 1.5px solid #FFC107; color: #FFD54F; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; box-shadow: 0 0 16px rgba(255, 193, 7, 0.45); } .ai-hero-title { font-size: 1.05rem; font-weight: 800; color: #FFF; margin: 0; letter-spacing: 0.03em; } .ai-hero-sub { font-size: 0.76rem; color: #94A3B8; } .ai-metrics-banner { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 14px; } .aim-item { background: rgba(4, 4, 6, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm); padding: 8px 12px; text-align: center; } .aim-item span { display: block; font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; } .aim-item strong { font-size: 1.15rem; font-family: 'JetBrains Mono', monospace; font-weight: 800; } .ai-diagnosis-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; } @media (max-width: 860px) { .ai-diagnosis-grid { grid-template-columns: 1fr; } } .ai-problem-box, .ai-recommendation-box { background: rgba(4, 4, 6, 0.75); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm); padding: 12px 14px; } .top-problem-list { display: flex; flex-direction: column; gap: 6px; } .problem-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.76rem; padding: 5px 8px; background: rgba(255, 255, 255, 0.02); border-radius: 4px; } .problem-row strong { color: #FFF; } .ai-rec-text { font-size: 0.8rem; color: #E2E8F0; line-height: 1.5; background: rgba(255, 193, 7, 0.08); border-left: 3px solid #FFC107; padding: 8px 10px; border-radius: 0 4px 4px 0; margin: 8px 0; } .ai-rec-meta { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--text-muted); } /* 8. SLA SITE BARS */ .sla-site-bars { display: flex; flex-direction: column; gap: 10px; } .sla-bar-item { background: rgba(4, 4, 6, 0.5); padding: 8px 12px; border-radius: var(--radius-sm); } .sbi-label { display: flex; justify-content: space-between; font-size: 0.78rem; font-weight: 600; color: #FFF; margin-bottom: 5px; } .sbi-track { height: 6px; background: rgba(255, 255, 255, 0.08); border-radius: 3px; overflow: hidden; } .sbi-prog.green { background: #10B981; } .sbi-prog.yellow { background: #F59E0B; } .sbi-prog.red { background: #EF4444; } /* 9. LIVE SHIFT HERO CARD */ .live-shift-hero-card { background: linear-gradient(135deg, rgba(10, 10, 14, 0.95) 0%, rgba(10, 10, 14, 0.9) 100%); border: 1.5px solid rgba(0, 240, 255, 0.35); border-radius: var(--radius-md); padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); } .lsh-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 800; color: #10B981; letter-spacing: 0.04em; margin-bottom: 6px; } .lsh-title { font-size: 1.15rem; font-weight: 800; color: #FFF; margin: 0 0 4px 0; } .lsh-desc { font-size: 0.78rem; color: var(--text-secondary); margin: 0 0 10px 0; } .lsh-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.76rem; color: var(--text-muted); } .shift-clock-box { background: rgba(4, 4, 6, 0.85); border: 1px solid rgba(0, 240, 255, 0.25); border-radius: var(--radius-sm); padding: 12px 18px; text-align: center; } .sc-label { display: block; font-size: 0.68rem; color: var(--cyan-neon); font-weight: 800; letter-spacing: 0.05em; margin-bottom: 2px; } .sc-time { font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; font-weight: 900; color: #FFF; letter-spacing: 0.05em; display: block; } .sc-date { font-size: 0.72rem; color: var(--text-muted); } /* Shift Section Header Boxes */ .shift-section-wrap { margin-bottom: 24px; } .shift-header-box { background: linear-gradient(135deg, rgba(6, 6, 8, 0.95) 0%, rgba(13, 22, 42, 0.85) 100%); border: 1px solid var(--border-dark); border-radius: var(--radius-sm); padding: 10px 16px; margin-bottom: 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); } .shift-1-box { border-left: 4px solid #F59E0B; } .shift-2-box { border-left: 4px solid #A855F7; } .shift-badge-box { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.5px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } .shift-1-box .shift-badge-box { background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.45); color: #FBBF24; } .shift-2-box .shift-badge-box { background: rgba(168, 85, 247, 0.15); border: 1px solid rgba(168, 85, 247, 0.45); color: #C084FC; } .shift-focus-text { font-size: 0.8rem; color: var(--text-secondary); margin: 0; font-weight: 500; } .team-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; } .team-member-card { background: rgba(10, 10, 14, 0.88); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; transition: var(--transition); } .team-member-card:hover { border-color: var(--cyan-neon); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 240, 255, 0.15); } .tmc-top { display: flex; align-items: center; gap: 12px; } .tmc-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; } .tmc-meta { flex: 1; min-width: 0; } .tmc-meta strong { display: block; font-size: 0.88rem; color: #FFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tmc-meta span { font-size: 0.72rem; color: var(--cyan-neon); font-weight: 600; display: block; } .tmc-desc { font-size: 0.74rem; color: var(--text-secondary); line-height: 1.4; margin: 0; } .tmc-footer { display: flex; flex-direction: column; gap: 5px; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 9px; } .tmc-footer .tmc-contact-item { display: flex; align-items: center; gap: 8px; font-size: 0.73rem; color: var(--text-secondary); min-width: 0; } .tmc-footer .tmc-contact-item i { width: 14px; text-align: center; font-size: 0.72rem; flex-shrink: 0; } .tmc-footer .tmc-contact-item.phone { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: #E2E8F0; } .tmc-footer .tmc-contact-item.phone i { color: #22C55E; } .tmc-footer .tmc-contact-item.email { color: var(--text-muted); } .tmc-footer .tmc-contact-item.email i { color: var(--cyan-neon); } .tmc-footer .tmc-contact-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 10. FAILURE SIMULATION GRID */ .sim-scenarios-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } .sim-card { background: rgba(6, 6, 8, 0.75); background: rgba(4, 4, 6, 0.75); border-radius: var(--radius-sm); padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between; transition: var(--transition); } .sim-card:hover { border-color: rgba(255, 255, 255, 0.25); } .sim-card.green-highlight { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.4); } .sim-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .sim-card-header strong { font-size: 0.86rem; color: #FFF; } .sim-badge { font-size: 0.68rem; font-weight: 800; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; } .sim-badge.red { background: rgba(225, 29, 72, 0.2); color: #FF2E63; border: 1px solid rgba(255, 255, 255, 0.12); } .sim-badge.yellow { background: rgba(245, 158, 11, 0.2); color: #F59E0B; border: 1px solid rgba(245, 158, 11, 0.4); } .sim-badge.green { background: rgba(16, 185, 129, 0.2); color: #10B981; border: 1px solid rgba(16, 185, 129, 0.4); } .sim-badge.green { background: rgba(16, 185, 129, 0.2); color: #10B981; border: 1px solid rgba(16, 185, 129, 0.4); } .btn-outline-red { background: transparent; border: 1px solid rgba(225, 29, 72, 0.6); color: #FF2E63; cursor: pointer; border-radius: var(--radius-sm); padding: 6px 12px; font-size: 0.78rem; font-weight: 700; transition: var(--transition); } .btn-outline-red:hover { background: #E11D48; color: #FFF; box-shadow: 0 0 12px rgba(225, 29, 72, 0.5); } .btn-outline-yellow { background: transparent; border: 1px solid rgba(245, 158, 11, 0.6); color: #F59E0B; cursor: pointer; border-radius: var(--radius-sm); padding: 6px 12px; font-size: 0.78rem; font-weight: 700; transition: var(--transition); } .btn-outline-yellow:hover { background: #F59E0B; color: #000; box-shadow: 0 0 12px rgba(245, 158, 11, 0.5); } /* 11. DATABASE MODULES GRID */ .db-modules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; } .db-mod-chip { background: rgba(6, 6, 8, 0.6); background: rgba(4, 4, 6, 0.6); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; } .db-mod-chip strong { font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; color: var(--cyan-neon); } .db-mod-chip span { font-size: 0.72rem; color: var(--text-muted); } /* FIX PADDING SETTINGS DB & CHECKMARKS (AGAR TIDAK KELUAR GARIS) */ #settings-panel-db .card-body { padding: 18px 22px !important; } .security-check-list { display: flex !important; flex-direction: column !important; gap: 12px !important; padding: 4px 6px !important; } .sec-item { display: flex !important; align-items: center !important; gap: 12px !important; font-size: 0.82rem !important; color: #E2E8F0 !important; line-height: 1.5 !important; } .sec-item i { font-size: 1.05rem !important; color: #10B981 !important; filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.45)) !important; flex-shrink: 0 !important; } /* ========================================================================== BUTTON & UI REFINEMENTS (ELIMINATING ALL PLAIN WHITE BOXES & BUTTONS) ========================================================================== */ .btn-sm { padding: 6px 12px !important; font-size: 0.78rem !important; border-radius: var(--radius-sm) !important; font-weight: 600 !important; } .btn-outline-cyber { background: rgba(10, 10, 14, 0.88) !important; border: 1px solid rgba(0, 240, 255, 0.45) !important; color: #E2E8F0 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; cursor: pointer !important; transition: var(--transition) !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } .btn-outline-cyber:hover { background: rgba(0, 240, 255, 0.18) !important; border-color: var(--cyan-neon) !important; color: #00F0FF !important; box-shadow: 0 0 14px rgba(0, 240, 255, 0.4) !important; transform: translateY(-1px) !important; } /* Button Variants: CSV, QR, PDF, Reset, Telegram */ .btn-csv { background: rgba(16, 185, 129, 0.1) !important; border: 1px solid rgba(16, 185, 129, 0.5) !important; color: #34D399 !important; cursor: pointer !important; transition: var(--transition) !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } .btn-csv:hover { background: rgba(16, 185, 129, 0.25) !important; border-color: #10B981 !important; color: #FFFFFF !important; box-shadow: 0 0 14px rgba(16, 185, 129, 0.45) !important; transform: translateY(-1px) !important; } .btn-qr { background: rgba(0, 240, 255, 0.1) !important; border: 1px solid rgba(0, 240, 255, 0.5) !important; color: #38BDF8 !important; cursor: pointer !important; transition: var(--transition) !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } .btn-qr:hover { background: rgba(0, 240, 255, 0.25) !important; border-color: #00E5FF !important; color: #FFFFFF !important; box-shadow: 0 0 14px rgba(0, 240, 255, 0.45) !important; transform: translateY(-1px) !important; } .btn-pdf { background: rgba(225, 29, 72, 0.1) !important; border: 1px solid rgba(225, 29, 72, 0.5) !important; color: #FB7185 !important; cursor: pointer !important; transition: var(--transition) !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } .btn-pdf:hover { background: rgba(225, 29, 72, 0.25) !important; border-color: #E11D48 !important; color: #FFFFFF !important; box-shadow: 0 0 14px rgba(225, 29, 72, 0.45) !important; transform: translateY(-1px) !important; } .btn-reset { background: rgba(10, 10, 14, 0.88) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; color: #CBD5E1 !important; cursor: pointer !important; transition: var(--transition) !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } .btn-reset:hover { background: rgba(255, 255, 255, 0.14) !important; border-color: rgba(255, 255, 255, 0.45) !important; color: #FFFFFF !important; transform: translateY(-1px) !important; } .btn-telegram { background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%) !important; border: 1px solid rgba(0, 136, 204, 0.55) !important; color: #38BDF8 !important; cursor: pointer !important; transition: var(--transition) !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } .btn-telegram:hover { background: linear-gradient(180deg, #27354D 0%, #172033 100%) !important; border-color: #0088CC !important; color: #FFFFFF !important; box-shadow: 0 0 14px rgba(0, 136, 204, 0.45) !important; transform: translateY(-1px) !important; } .btn-recenter-map { background: rgba(10, 10, 14, 0.92) !important; border: 1.5px solid var(--cyan-neon) !important; color: #00E5FF !important; font-size: 0.76rem !important; font-weight: 700 !important; padding: 5px 12px !important; border-radius: var(--radius-sm) !important; cursor: pointer !important; transition: var(--transition) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } .btn-recenter-map:hover { background: var(--cyan-neon) !important; color: #000000 !important; box-shadow: 0 0 16px var(--cyan-glow) !important; transform: translateY(-1px) !important; } .btn-rounded-custom { border-radius: 20px !important; padding: 7px 18px !important; } /* User Role Badges */ .badge-role-superadmin { background: linear-gradient(135deg, rgba(225, 29, 72, 0.25) 0%, rgba(255, 23, 68, 0.15) 100%); border: 1px solid #FF1744; color: #FF2E63; font-size: 0.72rem; font-weight: 800; padding: 3px 8px; border-radius: 4px; display: inline-block; } .badge-role-admin { background: rgba(0, 240, 255, 0.15); border: 1px solid var(--cyan-neon); color: #00F0FF; font-size: 0.72rem; font-weight: 800; padding: 3px 8px; border-radius: 4px; display: inline-block; } .badge-role-user { background: rgba(148, 163, 184, 0.15); border: 1px solid rgba(148, 163, 184, 0.4); color: #CBD5E1; font-size: 0.72rem; font-weight: 800; padding: 3px 8px; border-radius: 4px; display: inline-block; } /* Custom Permission Tags (CRUD vs CRU vs Read Only) */ .perm-tag-crud { background: rgba(225, 29, 72, 0.15); color: #FF2E63; border: 1px solid rgba(225, 29, 72, 0.4); padding: 2px 6px; border-radius: 3px; font-size: 0.68rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; } .perm-tag-cru { background: rgba(0, 240, 255, 0.12); color: #38BDF8; border: 1px solid rgba(0, 240, 255, 0.35); padding: 2px 6px; border-radius: 3px; font-size: 0.68rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; } .perm-tag-read { background: rgba(148, 163, 184, 0.12); color: #94A3B8; border: 1px solid rgba(148, 163, 184, 0.3); padding: 2px 6px; border-radius: 3px; font-size: 0.68rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; } /* Ensure all form controls in settings/filter never look plain white */ .settings-form-grid .form-group label { color: #FFFFFF !important; font-weight: 700 !important; font-size: 0.82rem !important; margin-bottom: 2px; } .filter-controls-card select, .settings-form-grid input, .settings-form-grid select { background: rgba(10, 10, 14, 0.92) !important; border: 1.5px solid rgba(255, 255, 255, 0.18) !important; color: #FFFFFF !important; font-weight: 600 !important; } .filter-controls-card select:focus, .settings-form-grid input:focus, .settings-form-grid select:focus { border-color: #FF1744 !important; box-shadow: 0 0 10px rgba(255, 23, 68, 0.35) !important; } .settings-form-grid .text-muted, .settings-form-grid span.text-muted { color: #94A3B8 !important; font-size: 0.74rem !important; line-height: 1.4 !important; margin-top: 2px !important; display: block !important; } .dropdown-logout-btn { color: #FF2E63 !important; font-weight: 700 !important; } .dropdown-logout-btn:hover { background: rgba(225, 29, 72, 0.15) !important; color: #FF1744 !important; } /* Button Action: Resolve Incident & Edit in Table */ .btn-resolve { background: rgba(16, 185, 129, 0.15) !important; border: 1px solid rgba(16, 185, 129, 0.5) !important; color: #10B981 !important; border-radius: 6px !important; font-size: 0.75rem !important; font-weight: 600 !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; transition: var(--transition) !important; } .btn-resolve:hover { background: rgba(16, 185, 129, 0.35) !important; border-color: #10B981 !important; color: #FFFFFF !important; box-shadow: 0 0 10px rgba(16, 185, 129, 0.4) !important; } /* Global Protection Against Plain White Browser Defaults */ select option { background-color: #0A0A0E !important; background-color: #0A0A0E !important; } input[type="text"], input[type="password"], input[type="number"], input[type="email"], select, textarea { background-color: rgba(10, 10, 14, 0.92) !important; background-color: rgba(10, 10, 14, 0.92) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; } /* UNIVERSAL CYBER DARK OVERRIDES - NO PLAIN WHITE BOXES OR BUTTONS */ button, input, select, textarea { font-family: inherit; box-sizing: border-box; } input[type="text"], input[type="password"], input[type="number"], input[type="email"], select, textarea { background: rgba(10, 10, 14, 0.92) !important; background: rgba(10, 10, 14, 0.92) !important; border: 1px solid rgba(0, 240, 255, 0.3) !important; border-radius: 6px !important; } select option { background: #0A0A0E !important; background: #0A0A0E !important; } .btn-resolve { background: rgba(16, 185, 129, 0.15) !important; border: 1px solid rgba(16, 185, 129, 0.5) !important; color: #10B981 !important; border-radius: 6px !important; font-size: 0.75rem !important; font-weight: 600 !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; transition: var(--transition) !important; } .btn-resolve:hover { background: rgba(16, 185, 129, 0.35) !important; border-color: #10B981 !important; color: #FFFFFF !important; box-shadow: 0 0 10px rgba(16, 185, 129, 0.4) !important; } /* ========================================================================== REVISI USER: TOPBAR SUBTITLE, NOWRAP TABLE HEADERS & ZERO SCROLL DASHBOARD ========================================================================== */ /* 1. Subtitle Ringkasan Monitoring System di bawah judul T-AIMS */ .topbar-left .brand-title-wrap { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 1px !important; } .topbar-left .brand-title-wrap .title-code { font-size: 1.15rem !important; font-weight: 800 !important; color: var(--text-pure) !important; line-height: 1.1 !important; letter-spacing: 0.5px !important; } .topbar-left .brand-title-wrap .title-sub { display: block !important; font-size: 0.72rem !important; color: #94A3B8 !important; font-weight: 600 !important; line-height: 1.1 !important; white-space: nowrap !important; } .topbar-left .divider { display: none !important; } /* 2. Header Tabel dan Cell Horizontal Satu Baris (Nowrap) */ .mockup-table th, .mockup-table td, .device-name-text { white-space: nowrap !important; } /* 3. Popup Lokasi MO Bersih Elegan (Tidak Merah) */ .cyber-leaflet-popup .leaflet-popup-content-wrapper { background: rgba(10, 10, 14, 0.96) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 229, 255, 0.25) !important; } .popup-coord-pill { background: rgba(255, 255, 255, 0.08) !important; color: #FFFFFF !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; } .popup-device-notice { background: rgba(0, 229, 255, 0.08) !important; border: 1px solid rgba(0, 229, 255, 0.25) !important; } .btn-popup-gmaps { background: rgba(255, 255, 255, 0.1) !important; color: #FFFFFF !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; } .btn-popup-gmaps:hover { background: var(--cyan-neon) !important; color: #09090B !important; } /* 4. Strict Zero Scroll Khusus Menu Dashboard pada Desktop Layar Lebar (Min-width: 901px) */ @media (min-width: 901px) { body.page-dashboard-active { overflow: hidden !important; } body.page-dashboard-active .main-content { overflow-y: hidden !important; } body.page-dashboard-active .content-container { overflow-y: hidden !important; padding: 8px 16px 8px 16px !important; } } /* ========================================================================== SISTEM RESPONSIVE MOBILE T-AIMS (MODE HP & TABLET <= 900px) SESUAI REFERENSI GAMBAR: HEADER BERSIH, KARTU 2 KOLOM, SCROLL MULUS, BOTTOM NAV ========================================================================== */ .mobile-bottom-nav { display: none; } @media (max-width: 900px) { /* 1. LAYOUT & SCROLL KONTEN UTAMA */ .app-layout { display: block !important; width: 100% !important; min-height: 100vh !important; overflow-x: hidden !important; } .main-content { width: 100% !important; margin-left: 0 !important; min-height: 100vh !important; overflow-x: hidden !important; overflow-y: auto !important; } /* Dashboard & seluruh menu bebas scroll vertikal di HP */ body.page-dashboard-active, body:not(.page-dashboard-active) { overflow-y: auto !important; height: auto !important; min-height: 100vh !important; } body.page-dashboard-active .main-content, body:not(.page-dashboard-active) .main-content { overflow-y: auto !important; height: auto !important; } body.page-dashboard-active .content-container, body:not(.page-dashboard-active) .content-container, .content-container { overflow-y: visible !important; height: auto !important; padding: 12px 14px calc(180px + env(safe-area-inset-bottom, 0px)) 14px !important; /* Ruang ekstra lega untuk mobile bottom nav (64px) + margin nyaman */ } /* 2. TOPBAR HEADER MOBILE BERSIH & PROPORSIONAL */ .topbar { position: sticky !important; top: 0 !important; z-index: 100 !important; padding: 8px 12px !important; min-height: 54px !important; height: auto !important; display: flex !important; align-items: center !important; justify-content: space-between !important; background: rgba(6, 6, 8, 0.97) !important; background: rgba(6, 6, 8, 0.97) !important; border-bottom: 1px solid rgba(225, 29, 72, 0.25) !important; border-bottom: 1px solid rgba(0, 229, 255, 0.25) !important; } .topbar-left { display: flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; } .mobile-toggle-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; border-radius: 8px !important; background: rgba(255, 255, 255, 0.05) !important; background: rgba(0, 229, 255, 0.12) !important; border: 1px solid rgba(0, 229, 255, 0.35) !important; font-size: 1.05rem !important; cursor: pointer !important; } .topbar-left .title-code { font-size: 1.1rem !important; } .topbar-left .title-sub { display: none !important; } .topbar-center { display: none !important; } .topbar-right { display: flex !important; align-items: center !important; gap: 6px !important; } .live-clock-pill { padding: 4px 8px !important; font-size: 0.72rem !important; background: rgba(255, 255, 255, 0.05) !important; background: rgba(0, 229, 255, 0.08) !important; border: 1px solid rgba(0, 229, 255, 0.2) !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; } .live-clock-pill .clock-divider, .live-clock-pill .calendar-emoji, .live-clock-pill #live-date { display: none !important; } .notif-bell { width: 34px !important; height: 34px !important; border-radius: 8px !important; } .user-profile-pill { padding: 0 !important; background: none !important; border: none !important; } .user-profile-pill .profile-info { display: none !important; } /* 3. MOBILE SIDEBAR DRAWER & OVERLAY */ .sidebar-overlay { position: fixed !important; inset: 0 !important; background: rgba(0, 0, 0, 0.75) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; z-index: 1040 !important; opacity: 0 !important; pointer-events: none !important; transition: opacity 0.3s ease !important; } .sidebar-overlay.active { opacity: 1 !important; pointer-events: auto !important; } .sidebar { position: fixed !important; top: 0 !important; bottom: 0 !important; left: -280px !important; width: 260px !important; height: 100vh !important; z-index: 1050 !important; transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: 10px 0 40px rgba(0, 0, 0, 0.9) !important; background: rgba(7, 7, 9, 0.98) !important; } .sidebar.mobile-open { left: 0 !important; } /* 4. DASHBOARD: BANNER HERO & KPI CARDS (2 KOLOM RAPI PERSIS REFERENSI) */ .banner-hero { flex-direction: column !important; align-items: flex-start !important; padding: 14px 16px !important; margin-bottom: 12px !important; gap: 8px !important; } .banner-title { font-size: 1.05rem !important; } .banner-desc { font-size: 0.75rem !important; line-height: 1.4 !important; } .banner-stats-pill { font-size: 0.72rem !important; width: 100% !important; justify-content: center !important; margin-top: 4px !important; } body.page-dashboard-active .kpi-grid, .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; margin-bottom: 14px !important; } .kpi-card { padding: 10px 12px !important; min-height: 76px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; } .kpi-title { font-size: 0.72rem !important; } .kpi-val { font-size: 1.25rem !important; } .kpi-sub { font-size: 0.65rem !important; white-space: normal !important; } /* 5. CHARTS & GRIDS VERTICAL STACK */ body.page-dashboard-active .charts-row, .charts-row { grid-template-columns: 1fr !important; gap: 14px !important; margin-bottom: 14px !important; } .chart-box { min-height: 220px !important; } .chart-canvas-wrap { height: 220px !important; max-height: 220px !important; } body.page-dashboard-active .bottom-three-grid, .bottom-three-grid { display: flex !important; flex-direction: column !important; gap: 14px !important; margin-bottom: 14px !important; } .bottom-three-grid .dashboard-card { height: auto !important; min-height: auto !important; display: flex !important; flex-direction: column !important; overflow: visible !important; } /* 1. Status Perangkat Table on Mobile */ .status-table-card .card-body { height: auto !important; min-height: 180px !important; display: block !important; overflow: visible !important; padding: 0 !important; } .status-table-card .table-responsive { height: auto !important; max-height: 260px !important; overflow-x: auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } /* 2. Peta Lokasi Infrastruktur on Mobile (Tampilkan Peta Leaflet Jelas & Interaktif) */ .map-card .card-body, .map-card .card-body.map-body-inner { height: auto !important; min-height: 280px !important; display: flex !important; flex-direction: column !important; padding: 10px !important; } .map-interactive-container { height: 230px !important; min-height: 230px !important; width: 100% !important; position: relative !important; display: block !important; border-radius: var(--radius-sm) !important; overflow: hidden !important; } .home-map-leaflet, #home-blitar-map { height: 230px !important; min-height: 230px !important; width: 100% !important; display: block !important; z-index: 10 !important; } .map-legend-bar { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; padding: 8px 4px 2px !important; font-size: 0.68rem !important; } /* 3. Riwayat Gangguan / Peringatan on Mobile */ .alerts-card .card-body { height: auto !important; min-height: 180px !important; display: block !important; padding: 0 !important; } .alerts-timeline-wrap { height: auto !important; min-height: 180px !important; max-height: 250px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } .maintenance-section .maint-cards-grid { grid-template-columns: 1fr !important; gap: 10px !important; } .maintenance-section { margin-bottom: 32px !important; } /* 6. TABEL-TABEL: HORIZONTAL SCROLL TANPA MEMECAHKAN LAYOUT */ .mockup-table-container, .table-container, .table-responsive { display: block !important; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; border-radius: var(--radius-sm) !important; margin-bottom: 10px !important; } .mockup-table { min-width: 580px !important; } /* 7. FORM & FILTER BARIS DI SEMUA HALAMAN */ .filter-bar, .actions-row, .filters-wrapper, .table-actions { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; margin-bottom: 12px !important; } .filter-bar input, .filter-bar select, .filter-bar .btn, .actions-row input, .actions-row select, .actions-row .btn, .search-filter-wrap { width: 100% !important; } /* 8. GIS & FLOORPLAN DI HP */ .blitar-gis-layout { grid-template-columns: 1fr !important; gap: 12px !important; } .full-blitar-map-el { height: 320px !important; } /* 9. MODUL TIM & PENGATURAN DI HP */ .shift-cards-grid { grid-template-columns: 1fr !important; gap: 12px !important; } .settings-nav-tabs, .nav-tabs { display: flex !important; overflow-x: auto !important; white-space: nowrap !important; -webkit-overflow-scrolling: touch !important; gap: 6px !important; padding-bottom: 6px !important; scrollbar-width: none !important; } .settings-nav-tabs::-webkit-scrollbar { display: none !important; } .settings-tab-btn { flex-shrink: 0 !important; padding: 8px 14px !important; font-size: 0.8rem !important; } .settings-grid, .failure-sim-grid { grid-template-columns: 1fr !important; gap: 12px !important; } /* 10. MODAL POPUP DI HP */ .modal-card { max-width: 95% !important; max-height: 90vh !important; margin: 10px auto !important; } .modal-body .form-row-2 { grid-template-columns: 1fr !important; gap: 8px !important; } .detail-info-grid { grid-template-columns: 1fr 1fr !important; } .telemetry-bar-row { grid-template-columns: repeat(2, 1fr) !important; } /* 11. MOBILE BOTTOM NAVIGATION BAR (PERSIS SEPERTI GAMBAR REFERENSI HP) */ .mobile-bottom-nav { display: flex !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 64px !important; background: rgba(6, 6, 8, 0.96) !important; background: rgba(5, 5, 7, 0.96) !important; -webkit-backdrop-filter: blur(16px) !important; border-top: 1px solid rgba(225, 29, 72, 0.25) !important; border-top: 1px solid rgba(0, 229, 255, 0.25) !important; justify-content: space-around !important; align-items: center !important; padding: 4px 6px !important; box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.75) !important; } .mb-nav-item { background: none !important; border: none !important; color: #94A3B8 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; padding: 6px 8px !important; cursor: pointer !important; border-radius: 8px !important; font-family: inherit !important; flex: 1 !important; text-align: center !important; transition: all 0.2s ease !important; } .mb-nav-item i { font-size: 1.18rem !important; color: #94A3B8 !important; transition: all 0.2s ease !important; } .mb-nav-item span { font-size: 0.65rem !important; font-weight: 600 !important; letter-spacing: 0.2px !important; white-space: nowrap !important; color: #94A3B8 !important; } .mb-nav-item.active i, .mb-nav-item:hover i { color: var(--cyan-neon) !important; filter: drop-shadow(0 0 8px rgba(225, 29, 72, 0.8)) !important; filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.8)) !important; } .mb-nav-item.active span, .mb-nav-item:hover span { color: #FFFFFF !important; font-weight: 700 !important; } /* 12. NOTIFIKASI DROPDOWN & TOAST DI HP */ .notif-dropdown { position: fixed !important; top: 60px !important; left: 10px !important; right: 10px !important; width: auto !important; max-width: none !important; max-height: 70vh !important; } .toast-container { top: 65px !important; right: 12px !important; left: 12px !important; max-width: none !important; } /* 13. FILTER CONTROLS & COMPACT SELECTS IN MOBILE */ .page-title-row { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; } .page-title-left { flex: 0 0 auto !important; width: 100% !important; max-width: none !important; min-width: 0 !important; } .page-header-actions { width: 100% !important; margin-left: 0 !important; justify-content: flex-start !important; gap: 6px !important; } .page-header-actions .btn { flex: 1 1 auto !important; font-size: 0.72rem !important; padding: 6px 8px !important; text-align: center !important; justify-content: center !important; } .filter-controls-card { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; padding: 10px 12px !important; } .filter-left-group { width: 100% !important; display: flex !important; flex-direction: column !important; gap: 8px !important; } .filter-search-input { width: 100% !important; min-width: 0 !important; } .filter-left-group .btn-primary-cyber { width: 100% !important; justify-content: center !important; padding: 8px 12px !important; font-size: 0.78rem !important; } .filter-select-group { display: flex !important; flex-wrap: nowrap !important; gap: 6px !important; width: 100% !important; align-items: center !important; } .filter-select-group select { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; padding: 7px 4px !important; font-size: 0.74rem !important; text-overflow: ellipsis !important; } .filter-select-group .btn-reset { flex: 0 0 auto !important; padding: 7px 10px !important; font-size: 0.74rem !important; white-space: nowrap !important; } .filter-export-group { width: 100% !important; display: flex !important; gap: 6px !important; margin-left: 0 !important; } .filter-export-group .btn { flex: 1 1 0 !important; justify-content: center !important; padding: 7px 8px !important; font-size: 0.74rem !important; } .loc-map-header { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; } .loc-map-header .loc-search-box { width: 100% !important; } .loc-map-header .loc-search-box input { width: 100% !important; } .loc-tab-switcher { flex-wrap: wrap !important; gap: 8px !important; } .devices-table-header { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; padding: 10px 12px !important; } .devices-table-header .card-title-group { width: 100% !important; flex-wrap: wrap !important; gap: 6px !important; } .devices-table-header .card-title-group h4 { font-size: 0.82rem !important; line-height: 1.3 !important; } .devices-header-controls { width: 100% !important; display: flex !important; flex-direction: column !important; gap: 8px !important; margin-left: 0 !important; } .quick-status-chips { width: 100% !important; display: flex !important; justify-content: space-between !important; padding: 3px 4px !important; overflow-x: auto !important; gap: 4px !important; } .quick-status-chips .chip-filter { flex: 1 1 0 !important; justify-content: center !important; padding: 4px 5px !important; font-size: 0.68rem !important; min-width: 0 !important; } .quick-status-chips .chip-count { padding: 1px 4px !important; font-size: 0.62rem !important; } .view-mode-toggle { width: 100% !important; display: flex !important; } .view-mode-toggle .btn-view-mode { flex: 1 1 0 !important; justify-content: center !important; padding: 5px !important; font-size: 0.72rem !important; } .devices-header-controls .card-actions-right { margin-left: auto !important; width: 100% !important; justify-content: flex-end !important; } .auto-refresh-pill { font-size: 0.65rem !important; padding: 2px 7px !important; } .devices-cards-grid { grid-template-columns: 1fr !important; padding: 10px !important; gap: 10px !important; } .noc-stream-header { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; } .noc-stream-header .card-title-group { width: 100% !important; display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 6px !important; } .noc-stream-header .card-title-group h4 { font-size: 0.84rem !important; white-space: nowrap !important; } .noc-stream-actions { width: 100% !important; display: flex !important; gap: 6px !important; } .noc-stream-actions .btn-sm { flex: 1 1 0 !important; justify-content: center !important; font-size: 0.72rem !important; padding: 6px 8px !important; text-align: center !important; } } /* ========================================================================== CLEAN PRINT & EXPORT PDF STYLESHEET (QA Fix Bug #5) ========================================================================== */ @media print { /* Sembunyikan elemen navigasi, panel samping, backdrop, dan tombol */ .app-sidebar, .app-topbar, .btn, .btn-sm, .btn-group, .card-actions-right, .modal-backdrop, .toast-notification, .ai-assistant-modal, .auto-refresh-pill { display: none !important; } /* Ubah background void gelap menjadi putih bersih untuk cetak kertas/PDF */ body, .app-layout, .app-main, .page-view { background: #FFFFFF !important; color: #27272A !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } .kpi-card, .chart-card, .table-container, .cyber-card, .site-detail-card { background: #FFFFFF !important; border: 1px solid #CBD5E1 !important; box-shadow: none !important; color: #0A0A0E !important; break-inside: avoid; } .kpi-val, .section-heading, h2, h3, h4, h5 { color: #0A0A0E !important; } table { border-collapse: collapse !important; width: 100% !important; } th, td { border: 1px solid #E2E8F0 !important; color: #27272A !important; padding: 6px 8px !important; } th { background: #F1F5F9 !important; font-weight: 700 !important; } } /* ========================================================================== QA REFINEMENT: MOBILE TABLE SCROLL INDICATOR & MIN 12PX TYPOGRAPHY (Bug #7 & #10) ========================================================================== */ @media (max-width: 768px) { .table-responsive, .table-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch; position: relative; background-image: linear-gradient(to right, rgba(10, 10, 14, 1), rgba(10, 10, 14, 0)), linear-gradient(to left, rgba(225, 29, 72, 0.18), rgba(10, 10, 14, 0)); linear-gradient(to left, rgba(0, 229, 255, 0.18), rgba(10, 10, 14, 0)); background-repeat: no-repeat; background-size: 20px 100%, 24px 100%; background-attachment: local, scroll; } } .status-pill, .badge-subtle, .a-time, .noc-log-time, .d-label, .kpi-subtext { font-size: max(0.75rem, 12px) !important; } /* ========================================================================== CYBER-NOC UNIFIED RED SYSTEM - GARIS TEGAS, BERANI & TAJAM (TEKNOLAB CRIMSON) ========================================================================== */ /* Topbar & Header Global */ .topbar { border-bottom: 1.5px solid rgba(225, 29, 72, 0.45) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(225, 29, 72, 0.15) !important; } .topbar .search-box { border: 1.5px solid rgba(225, 29, 72, 0.42) !important; background: rgba(10, 10, 14, 0.85) !important; } .topbar .search-box:focus-within { border-color: #FF1744 !important; box-shadow: 0 0 14px rgba(255, 23, 68, 0.35) !important; } .user-profile, .user-badge { border: 1.5px solid rgba(225, 29, 72, 0.42) !important; } /* 1. HALAMAN DASHBOARD UTAMA - 6 KARTU KPI DENGAN GARIS TEGAS */ .kpi-card { background: linear-gradient(180deg, #15171F 0%, #0B0C10 100%) !important; border: 1.5px solid rgba(225, 29, 72, 0.50) !important; border-radius: var(--radius-md) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 0 12px rgba(225, 29, 72, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; position: relative !important; overflow: hidden !important; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; } .kpi-card:hover { transform: translateY(-2px) !important; border-color: #FF1744 !important; box-shadow: 0 14px 35px rgba(0, 0, 0, 0.95), 0 0 22px rgba(255, 23, 68, 0.35) !important; } .kpi-grid .kpi-card:nth-child(1) { border-top: 3.5px solid #FFFFFF !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -3px 14px rgba(255, 255, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } .kpi-grid .kpi-card:nth-child(2) { border-top: 3.5px solid #00FF9D !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -3px 14px rgba(0, 255, 157, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } .kpi-grid .kpi-card:nth-child(3) { border-top: 3.5px solid #FF1744 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -3px 14px rgba(255, 23, 68, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } .kpi-grid .kpi-card:nth-child(4) { border-top: 3.5px solid #FFD600 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -3px 14px rgba(255, 214, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } .kpi-grid .kpi-card:nth-child(5) { border-top: 3.5px solid #F97316 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -3px 14px rgba(249, 115, 22, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } .kpi-grid .kpi-card:nth-child(6) { border-top: 3.5px solid #FFC107 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -3px 14px rgba(255, 193, 7, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } /* Dashboard Cards (Tren, Donut, Tabel, Peta, Insiden) */ .dashboard-card { background: linear-gradient(180deg, #14161E 0%, #0B0C10 100%) !important; border: 1.5px solid rgba(225, 29, 72, 0.55) !important; border-radius: var(--radius-md) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 16px rgba(225, 29, 72, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; position: relative !important; overflow: hidden !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .dashboard-card:hover { border-color: #FF1744 !important; box-shadow: 0 14px 35px rgba(0, 0, 0, 0.95), 0 0 24px rgba(255, 23, 68, 0.3) !important; } .trend-card, .donut-card, .status-table-card, .map-card, .bottom-three-grid .dashboard-card:nth-child(3) { border-top: 3px solid #FF1744 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 -2px 12px rgba(255, 23, 68, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } /* Header Band pada Seluruh Kartu dengan Divider Merah Tegas */ .card-header { background: rgba(225, 29, 72, 0.05) !important; border-bottom: 1.5px solid rgba(225, 29, 72, 0.45) !important; } /* Banner Hero Berbingkai Merah Teknolab Tegas */ .banner-hero { background: linear-gradient(90deg, #0A0A0E 0%, rgba(10, 10, 14, 0.95) 32%, rgba(10, 10, 14, 0.6) 58%, rgba(10, 10, 14, 0.15) 85%, rgba(0, 0, 0, 0.15) 100%), url('../img/banner_hero_bg.jpg') no-repeat right 32% / cover !important; border: 1.5px solid rgba(225, 29, 72, 0.55) !important; border-left: 5px solid #FF1744 !important; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.9), 0 0 20px rgba(225, 29, 72, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } /* Section Pemeliharaan & Kartu Mini */ .maintenance-section { background: linear-gradient(180deg, #14161E 0%, #0B0C10 100%) !important; border: 1.5px solid rgba(225, 29, 72, 0.55) !important; border-top: 3px solid #FF1744 !important; border-radius: var(--radius-md) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 0 18px rgba(225, 29, 72, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; padding: 12px 16px !important; margin-top: 14px !important; } .maint-header { border-bottom: 1.5px solid rgba(225, 29, 72, 0.40) !important; padding-bottom: 10px !important; margin-bottom: 12px !important; } .m-card { background: rgba(20, 22, 30, 0.85) !important; border: 1.5px solid rgba(225, 29, 72, 0.45) !important; border-radius: var(--radius-md) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; transition: transform 0.2s ease, border-color 0.2s ease !important; } .m-card:hover { transform: translateY(-2px) !important; border-color: #FF1744 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 16px rgba(255, 23, 68, 0.3) !important; } .m-card:nth-child(1) { border-top: 2.5px solid #FFC107 !important; } .m-card:nth-child(2) { border-top: 2.5px solid #FFD600 !important; } .m-card:nth-child(3) { border-top: 2.5px solid #FF1744 !important; } .m-card:nth-child(4) { border-top: 2.5px solid #00FF9D !important; } /* 2. STAT CARDS DI SELURUH HALAMAN (Perangkat, Jaringan, Peringatan, Laporan) */ .stat-card { background: linear-gradient(180deg, #15171F 0%, #0B0C10 100%) !important; border: 1.5px solid rgba(225, 29, 72, 0.48) !important; border-radius: var(--radius-md) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; transition: transform 0.2s ease, border-color 0.2s ease !important; } .stat-card:hover { transform: translateY(-2px) !important; border-color: #FF1744 !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.9), 0 0 18px rgba(255, 23, 68, 0.3) !important; } .stat-card.stat-card-total, .stat-row .stat-card:nth-child(1), .stats-overview-grid .stat-card:nth-child(1) { border-top: 3.5px solid #E2E8F0 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -2px 12px rgba(255, 255, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } .stat-card.stat-card-online, .stat-row .stat-card:nth-child(2), .stats-overview-grid .stat-card:nth-child(2) { border-top: 3.5px solid #00FF9D !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -2px 12px rgba(0, 255, 157, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } .stat-card.stat-card-offline, .stat-row .stat-card:nth-child(3), .stats-overview-grid .stat-card:nth-child(3) { border-top: 3.5px solid #FF1744 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -2px 12px rgba(255, 23, 68, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } .stat-card.stat-card-warning, .stat-row .stat-card:nth-child(4), .stats-overview-grid .stat-card:nth-child(4) { border-top: 3.5px solid #FFD600 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -2px 12px rgba(255, 214, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } .stat-card.stat-card-unknown, .stat-row .stat-card:nth-child(5), .stats-overview-grid .stat-card:nth-child(5) { border-top: 3.5px solid #94A3B8 !important; } #page-alerts .stats-overview-grid .stat-card:nth-child(4) { border-top: 3.5px solid #FFC107 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -2px 12px rgba(255, 193, 7, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } /* 3. HALAMAN PERANGKAT (DEVICES) */ .filter-controls-card { background: linear-gradient(180deg, #14161E 0%, #0B0C10 100%) !important; border: 1.5px solid rgba(225, 29, 72, 0.55) !important; border-top: 3px solid #FF1744 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } .device-cyber-card { background: linear-gradient(180deg, #15171F 0%, #0B0C10 100%) !important; border: 1.5px solid rgba(225, 29, 72, 0.48) !important; border-top: 2.5px solid #FF1744 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; } .device-cyber-card:hover { transform: translateY(-2px) !important; border-color: #FF1744 !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.95), 0 0 20px rgba(255, 23, 68, 0.3) !important; } .dcc-network-box { background: rgba(0, 0, 0, 0.6) !important; border: 1px solid rgba(225, 29, 72, 0.35) !important; } /* 4. HALAMAN MONITORING & TOPOLOGI */ .protocol-card { background: linear-gradient(180deg, #15171F 0%, #0B0C10 100%) !important; border: 1.5px solid rgba(225, 29, 72, 0.50) !important; border-top: 3px solid #FF1744 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -2px 10px rgba(255, 23, 68, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; } .protocol-card:hover { transform: translateY(-2px) !important; border-color: #FF1744 !important; box-shadow: 0 14px 35px rgba(0, 0, 0, 0.95), 0 0 22px rgba(255, 23, 68, 0.32) !important; } .cyber-terminal-box { background: #000000 !important; border: 1.5px solid rgba(225, 29, 72, 0.55) !important; border-top: 3px solid #FF1744 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } .rule-box { background: rgba(20, 22, 30, 0.8) !important; border: 1.5px solid rgba(225, 29, 72, 0.40) !important; border-left: 4px solid #FF1744 !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important; } /* 5. HALAMAN DENAH LOKASI CAD & GIS */ .site-quick-nav-bar { background: linear-gradient(180deg, #14161E 0%, #0B0C10 100%) !important; border: 1.5px solid rgba(225, 29, 72, 0.55) !important; border-top: 3px solid #FF1744 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } .site-quick-btn { border: 1.5px solid rgba(225, 29, 72, 0.40) !important; } .site-quick-btn.active, .site-quick-btn:hover { border-color: #FF1744 !important; background: rgba(225, 29, 72, 0.22) !important; box-shadow: 0 0 14px rgba(255, 23, 68, 0.35) !important; } .site-detail-card { background: linear-gradient(180deg, #15171F 0%, #0B0C10 100%) !important; border: 1.5px solid rgba(225, 29, 72, 0.48) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; } .site-detail-card:hover { transform: translateY(-2px) !important; border-color: #FF1744 !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.95), 0 0 18px rgba(255, 23, 68, 0.3) !important; } .site-detail-card.card-ho { border-left: 4.5px solid #FF1744 !important; } .site-detail-card.card-mo { border-left: 4.5px solid #F59E0B !important; } .site-detail-card.card-mentor, .site-detail-card.card-server { border-left: 4.5px solid #00F0FF !important; } .site-detail-card.card-server.active { background: rgba(0, 240, 255, 0.08) !important; border-color: #00F0FF !important; box-shadow: 0 0 20px rgba(0, 240, 255, 0.3) !important; } .site-detail-card.card-server .sdc-badge { background: rgba(0, 240, 255, 0.15) !important; color: #00F0FF !important; border: 1px solid rgba(0, 240, 255, 0.45) !important; } .floorplan-master-container { background: #000000 !important; border: 1.5px solid rgba(225, 29, 72, 0.60) !important; border-top: 3.5px solid #FF1744 !important; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.9), 0 -2px 14px rgba(255, 23, 68, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } .floorplan-intro-bar { border-bottom: 1.5px solid rgba(225, 29, 72, 0.45) !important; background: rgba(225, 29, 72, 0.05) !important; } .blueprint-canvas-box { background: #000000 !important; border: 1.5px solid rgba(225, 29, 72, 0.50) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), inset 0 0 25px rgba(225, 29, 72, 0.08) !important; } .legend-room-card { background: linear-gradient(180deg, #15171F 0%, #0B0C10 100%) !important; border: 1.5px solid rgba(225, 29, 72, 0.45) !important; border-left: 4px solid #FF1744 !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } .map-card-elevated { border: 1.5px solid rgba(225, 29, 72, 0.55) !important; border-top: 3px solid #FF1744 !important; } /* 6. HALAMAN LAPORAN & ANALITIK AI */ .ai-assistant-hero-card { background: linear-gradient(135deg, rgba(20, 22, 30, 0.95) 0%, rgba(11, 12, 16, 0.98) 100%) !important; border: 1.5px solid rgba(225, 29, 72, 0.55) !important; border-left: 5px solid #FF1744 !important; border-top: 3px solid #FF1744 !important; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.9), 0 0 20px rgba(225, 29, 72, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } .ai-metrics-banner { background: rgba(11, 12, 16, 0.9) !important; border: 1.5px solid rgba(225, 29, 72, 0.45) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7) !important; } .ai-problem-box, .ai-recommendation-box { background: linear-gradient(180deg, #14161E 0%, #0B0C10 100%) !important; border: 1.5px solid rgba(225, 29, 72, 0.45) !important; border-left: 4px solid #FF1744 !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } .rep-box { background: linear-gradient(180deg, #15171F 0%, #0B0C10 100%) !important; border: 1.5px solid rgba(225, 29, 72, 0.45) !important; border-top: 3px solid #FF1744 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } /* 7. HALAMAN INFORMASI TIM & PROYEK */ .shift-section-box { background: linear-gradient(180deg, #14161E 0%, #0B0C10 100%) !important; border: 1.5px solid rgba(225, 29, 72, 0.55) !important; border-top: 3.5px solid #FF1744 !important; border-radius: var(--radius-md) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } .shift-banner-bar { border-bottom: 1.5px solid rgba(225, 29, 72, 0.40) !important; background: rgba(225, 29, 72, 0.05) !important; border-radius: var(--radius-sm) !important; } .team-member-card { background: linear-gradient(180deg, #15171F 0%, #0B0C10 100%) !important; border: 1.5px solid rgba(225, 29, 72, 0.48) !important; border-top: 3px solid #FF1744 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; } .team-member-card:hover { transform: translateY(-2px) !important; border-color: #FF1744 !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.95), 0 0 20px rgba(255, 23, 68, 0.3) !important; } /* 8. HALAMAN MANAJEMEN PENGGUNA & LIVE SHIFT */ .live-shift-hero-card { background: linear-gradient(135deg, rgba(20, 22, 30, 0.95) 0%, rgba(11, 12, 16, 0.98) 100%) !important; border: 1.5px solid rgba(225, 29, 72, 0.55) !important; border-left: 5px solid #FF1744 !important; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.9), 0 0 20px rgba(225, 29, 72, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } .shift-clock-box { background: #000000 !important; border: 1.5px solid rgba(225, 29, 72, 0.55) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7), inset 0 0 14px rgba(225, 29, 72, 0.12) !important; } .shift-header-box { border-bottom: 1.5px solid rgba(225, 29, 72, 0.40) !important; } /* 9. HALAMAN PENGATURAN (SETTINGS) */ .sim-card { background: linear-gradient(180deg, #15171F 0%, #0B0C10 100%) !important; border: 1.5px solid rgba(225, 29, 72, 0.48) !important; border-top: 3px solid #FF1744 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; } .sim-card:hover { transform: translateY(-2px) !important; border-color: #FF1744 !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.95), 0 0 20px rgba(255, 23, 68, 0.3) !important; } .backup-actions-box { margin-top: 18px !important; padding: 14px 18px !important; background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; border-radius: 8px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } .db-modules-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important; gap: 12px !important; } .db-mod-chip { background: rgba(15, 20, 30, 0.88) !important; border: 1.5px solid rgba(255, 255, 255, 0.28) !important; border-radius: 8px !important; padding: 13px 15px !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; transition: all 0.2s ease !important; } .db-mod-chip:hover { border-color: #38BDF8 !important; background: rgba(18, 25, 40, 0.96) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.75), 0 0 12px rgba(56, 189, 248, 0.35) !important; transform: translateY(-2px) !important; } #page-settings .loc-tab-switcher { margin-bottom: 20px !important; } /* 10. TABEL, MODAL & POPUP DI SELURUH SISTEM */ .table-container, .gis-map-card, .aim-card { background: linear-gradient(180deg, #14161E 0%, #0B0C10 100%) !important; border: 1.5px solid rgba(225, 29, 72, 0.55) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 0 16px rgba(225, 29, 72, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } table thead th { border-bottom: 1.5px solid rgba(225, 29, 72, 0.45) !important; } table tbody tr td { border-bottom: 1px solid rgba(225, 29, 72, 0.22) !important; } .modal-card, .modal-content { background: linear-gradient(180deg, #15171F 0%, #0B0C10 100%) !important; border: 2px solid rgba(225, 29, 72, 0.70) !important; border-top: 4px solid #FF1744 !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95), 0 0 30px rgba(255, 23, 68, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; } .site-popup-card, .leaflet-popup-content-wrapper { background: #0B0C10 !important; border: 1.5px solid rgba(225, 29, 72, 0.65) !important; border-top: 3.5px solid #FF1744 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 18px rgba(255, 23, 68, 0.25) !important; } /* T-AIMS Team Member Card Unified Contacts & Roles (Anti-Blue) */ .tmc-meta span { font-size: 0.74rem !important; color: #FFC107 !important; font-weight: 700 !important; display: block !important; margin-top: 2px !important; } .tmc-contact-item a { color: inherit !important; text-decoration: none !important; } .tmc-contact-item a:hover { color: #FFFFFF !important; text-decoration: underline !important; } .tmc-contact-item.phone i { color: #22C55E !important; } .tmc-contact-item.email i { color: #FFC107 !important; } /* ========================================================================== PENYESUAIAN WARNA KHUSUS (GAMBAR 1 - 5) ========================================================================== */ /* Gambar 1: Tombol QR Tag -> Kuning Emas */ .btn-qr { background: rgba(255, 214, 0, 0.12) !important; border: 1.5px solid rgba(255, 214, 0, 0.6) !important; color: #FFD600 !important; box-shadow: 0 0 10px rgba(255, 214, 0, 0.2) !important; } .btn-qr i { color: #FFD600 !important; } .btn-qr:hover { background: rgba(255, 214, 0, 0.25) !important; border-color: #FFD600 !important; color: #FFFFFF !important; box-shadow: 0 0 16px rgba(255, 214, 0, 0.45) !important; } /* Gambar 2: Tombol 3 Titik Peta -> Kuning Emas */ .btn-recenter-map { background: rgba(10, 10, 14, 0.92) !important; border: 1.5px solid #FFD600 !important; color: #FFD600 !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 8px rgba(255, 214, 0, 0.25) !important; } .btn-recenter-map i, .btn-recenter-map span { color: #FFD600 !important; } .btn-recenter-map:hover { background: #FFD600 !important; color: #000000 !important; border-color: #FFD600 !important; box-shadow: 0 0 16px rgba(255, 214, 0, 0.6) !important; } .btn-recenter-map:hover i, .btn-recenter-map:hover span { color: #000000 !important; } /* Gambar 3: Teks Log Terminal Konsol -> Kuning Emas */ .cyber-terminal-box { color: #FFD600 !important; border: 1px solid rgba(255, 214, 0, 0.35) !important; } .term-line { color: #FFD600 !important; } /* Gambar 4: Tombol Asisten AI Topbar -> Kuning Emas */ .ai-quick-trigger, #topbar-ai-btn { color: #FFD600 !important; border: 1.5px solid rgba(255, 214, 0, 0.5) !important; background: rgba(255, 214, 0, 0.12) !important; box-shadow: 0 0 12px rgba(255, 214, 0, 0.3) !important; } .ai-quick-trigger i, #topbar-ai-btn i { color: #FFD600 !important; } .ai-quick-trigger:hover, #topbar-ai-btn:hover { background: rgba(255, 214, 0, 0.28) !important; border-color: #FFD600 !important; color: #FFFFFF !important; box-shadow: 0 0 18px rgba(255, 214, 0, 0.55) !important; } /* Gambar 5: Ikon Lencana Tab Pengaturan -> Berwarna Tegas & Menyala */ #tab-btn-set-engine i { color: #FF1744 !important; filter: drop-shadow(0 0 6px rgba(255, 23, 68, 0.7)) !important; } #tab-btn-set-notif i { color: #F97316 !important; filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.7)) !important; } #tab-btn-set-sim i { color: #FFD600 !important; filter: drop-shadow(0 0 6px rgba(255, 214, 0, 0.7)) !important; } #tab-btn-set-db i { color: #00FF9D !important; filter: drop-shadow(0 0 6px rgba(0, 255, 157, 0.7)) !important; } /* Shift 2 Banner di Informasi Proyek (Warna Biru Diganti Menjadi Ungu Elegan) */ .s2-banner, .shift-banner-bar.s2-banner { background: linear-gradient(90deg, rgba(168, 85, 247, 0.18) 0%, rgba(10, 10, 14, 0.95) 100%) !important; border-left: 4px solid #A855F7 !important; border-top: 1px solid rgba(168, 85, 247, 0.35) !important; border-right: 1px solid rgba(168, 85, 247, 0.25) !important; border-bottom: 1px solid rgba(168, 85, 247, 0.25) !important; } .sbb-badge.badge-purple { background: rgba(168, 85, 247, 0.2) !important; border: 1px solid rgba(168, 85, 247, 0.6) !important; color: #C084FC !important; box-shadow: 0 0 10px rgba(168, 85, 247, 0.25) !important; } .tm-role { font-size: 0.74rem !important; font-weight: 700 !important; color: #FFC107 !important; margin: 2px 0 0 0 !important; } .tm-contact-row a { color: #CBD5E1 !important; text-decoration: none !important; } .tm-contact-row a:hover { color: #FFFFFF !important; text-decoration: underline !important; } /* TM Avatar Circular & Anti-Blue */ .tm-avatar { width: 44px !important; height: 44px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.25rem !important; flex-shrink: 0 !important; transition: all 0.25s ease !important; } /* ========================================================================== */ /* PERFECT SCORE 100% ENHANCEMENTS: TOOLTIPS, EMPTY STATES & ARCH MATRIX */ /* ========================================================================== */ .floorplan-pin-tooltip { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(6px); background: rgba(10, 15, 29, 0.96); border: 1px solid rgba(0, 240, 255, 0.6); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.9), 0 0 15px rgba(0, 240, 255, 0.3); backdrop-filter: blur(12px); padding: 7px 12px; border-radius: 6px; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s ease; z-index: 99999 !important; font-size: 0.74rem; color: #F8FAFC; line-height: 1.45; text-align: left; } .floorplan-pin-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: rgba(0, 240, 255, 0.6) transparent transparent transparent; } .floorplan-pin:hover .floorplan-pin-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .empty-state-box { text-align: center; padding: 3rem 1.5rem; color: #94A3B8; } .empty-state-box i { font-size: 2.8rem; margin-bottom: 1rem; color: #475569; } .empty-state-box h4 { color: #F8FAFC; margin-bottom: 0.5rem; font-size: 1.1rem; } .empty-state-box p { font-size: 0.85rem; max-width: 400px; margin: 0 auto 1.2rem auto; } .arch-matrix-card { background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(0, 240, 255, 0.25); border-radius: 8px; padding: 1rem; } /* Auto-hide badges when count is 0 or empty (Mas Dzakwan UX Fix) */ .bell-badge:empty, .bell-badge[data-count="0"], .bell-badge.hidden, .nav-badge:empty, .nav-badge[data-count="0"], .nav-badge.hidden, #topbar-alert-count[data-count="0"], #sidebar-alert-badge[data-count="0"] { display: none !important; } /* Audio Alert Synthesizer Toggle (Transparent Cyberpunk Style - Mas Dzakwan Fix) */ #btn-sound-toggle { background: transparent !important; background-color: transparent !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: #FFD600 !important; border-radius: 8px !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; padding: 0 !important; box-shadow: none !important; outline: none !important; transition: all 0.2s ease !important; } #btn-sound-toggle:hover { background: rgba(255, 214, 0, 0.12) !important; border-color: #FFD600 !important; box-shadow: 0 0 10px rgba(255, 214, 0, 0.3) !important; } #sound-toggle-icon { font-size: 0.95rem; color: #FFD600; } #btn-sound-toggle.muted, #btn-sound-toggle[data-muted="true"] { border-color: rgba(255, 255, 255, 0.08) !important; color: #64748B !important; } #btn-sound-toggle.muted #sound-toggle-icon, #btn-sound-toggle[data-muted="true"] #sound-toggle-icon { color: #64748B !important; } /* Ambient Background login bertekstur infrastruktur (Mas Dzakwan Enhancement) */ .auth-wrapper::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(0, 240, 255, 0.04) 0%, transparent 70%), linear-gradient(rgba(0, 240, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 240, 255, 0.02) 1px, transparent 1px); background-size: 100% 100%, 40px 40px, 40px 40px; pointer-events: none; z-index: 1; } /* Enhanced Cyber Ambient Background on Login (Mas Dzakwan Polish) */ .auth-wrapper { position: fixed; inset: 0; z-index: 99999 !important; display: flex; align-items: center; justify-content: center; padding: 1.5rem; overflow-y: auto; background: radial-gradient(ellipse at center, rgba(10, 20, 35, 0.72) 0%, rgba(0, 0, 0, 0.94) 75%), url('../img/banner_hero_bg.jpg') center center / cover no-repeat, #000000 !important; } .auth-card { position: relative; z-index: 10; backdrop-filter: blur(12px); background: rgba(10, 15, 25, 0.92) !important; border: 1px solid rgba(0, 240, 255, 0.25) !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 240, 255, 0.1) !important; } /* ========================================================================== */ /* MODUL INTERACTIVE VISUAL FLOORPLAN PIN PLACER (MAS DZAKWAN ENHANCEMENT) */ /* ========================================================================== */ .btn-bp-pin-manager { transition: all 0.25s ease-in-out !important; } .btn-bp-pin-manager:hover { background: rgba(245, 158, 11, 0.3) !important; box-shadow: 0 0 12px rgba(245, 158, 11, 0.4) !important; } .btn-bp-pin-manager.active { box-shadow: 0 0 15px rgba(245, 158, 11, 0.6) !important; } .floorplan-image-container.edit-mode { cursor: crosshair !important; outline: 2px dashed #F59E0B !important; outline-offset: 4px; box-shadow: 0 0 30px rgba(245, 158, 11, 0.25) !important; transition: outline 0.2s ease, box-shadow 0.2s ease; } .floorplan-image-container.edit-mode::after { content: '🎯 Mode Edit Aktif: Klik denah untuk pasang / klik pin untuk kelola'; position: absolute; top: 12px; right: 12px; background: rgba(0, 0, 0, 0.85); border: 1px solid #F59E0B; color: #FCD34D; font-size: 0.72rem; font-weight: 600; padding: 4px 10px; border-radius: 4px; pointer-events: none; z-index: 50; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); letter-spacing: 0.3px; } .floorplan-image-container.edit-mode .floorplan-pin { cursor: pointer !important; } .floorplan-image-container.edit-mode .floorplan-pin:hover { outline: 2px solid #F59E0B; outline-offset: 4px; border-radius: 8px; transform: translate(-50%, -50%) scale(1.22); } .floorplan-image-container.edit-mode .floorplan-pin:hover::after { content: '⚙️ Klik untuk ubah / hapus'; position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #0f172a; border: 1px solid #F59E0B; color: #FCD34D; font-size: 0.68rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; white-space: nowrap; z-index: 60; pointer-events: none; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8); } /* ========================================================================== */ /* QA AUDIT FIX BUG-015: BOTTOM PADDING & NON-BLOCKING TOAST LAYOUT */ /* ========================================================================== */ .main-content { padding-bottom: 16px !important; } #toast-notification.toast-popup, #toast-notification.toast-notification { bottom: 24px !important; right: 24px !important; z-index: 99999 !important; pointer-events: auto !important; } /* ========================================================================== */ /* RESPONSIVE MOBILE FIX: MENU PERINGATAN (#page-alerts) */ /* Perbaikan Tombol Reset Kepotong & Horizontal Scroll Riwayat Notifikasi */ /* ========================================================================== */ @media (max-width: 768px) { #page-alerts .dashboard-card .card-header { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; padding: 14px 14px 12px 14px !important; } #page-alerts .dashboard-card .card-header .card-title-group { width: 100% !important; display: flex !important; align-items: center !important; gap: 8px !important; } #page-alerts .dashboard-card .card-header .card-title-group h4 { font-size: 0.92rem !important; line-height: 1.4 !important; white-space: normal !important; word-break: break-word !important; margin: 0 !important; } #page-alerts .filter-select-group { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; width: 100% !important; } #page-alerts .filter-select-group select { flex: 1 1 100px !important; min-width: 80px !important; height: 36px !important; font-size: 0.78rem !important; } #page-alerts .filter-select-group .btn, #page-alerts .filter-select-group .btn-reset, #page-alerts .filter-select-group .btn-outline-cyber { flex: 1 1 auto !important; height: 36px !important; white-space: nowrap !important; font-size: 0.78rem !important; padding: 6px 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; } } /* Horizontal Scroll untuk Riwayat Notifikasi di Layar Sempit/HP */ #full-alerts-container, .full-alerts-list { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; width: 100% !important; display: block !important; position: relative !important; } #full-alerts-container .alert-row, .full-alerts-list .alert-row { min-width: 540px !important; display: flex !important; align-items: center !important; padding: 12px 16px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; box-sizing: border-box !important; } #full-alerts-container .alert-row .a-time, .full-alerts-list .alert-row .a-time { min-width: 90px !important; flex-shrink: 0 !important; font-family: 'JetBrains Mono', monospace !important; font-size: 0.75rem !important; font-weight: 700 !important; color: var(--cyan-neon) !important; } #full-alerts-container .alert-row .a-body, .full-alerts-list .alert-row .a-body { flex: 1 1 auto !important; min-width: 260px !important; margin: 0 12px !important; white-space: normal !important; } #full-alerts-container .alert-row .a-badge, .full-alerts-list .alert-row .a-badge { flex-shrink: 0 !important; margin-left: auto !important; white-space: nowrap !important; } /* Scrollbar styling horizontal untuk Riwayat Notifikasi */ #full-alerts-container::-webkit-scrollbar, .full-alerts-list::-webkit-scrollbar { height: 6px !important; } #full-alerts-container::-webkit-scrollbar-track, .full-alerts-list::-webkit-scrollbar-track { background: rgba(10, 15, 25, 0.8) !important; border-radius: 999px !important; } #full-alerts-container::-webkit-scrollbar-thumb, .full-alerts-list::-webkit-scrollbar-thumb { background: rgba(0, 240, 255, 0.4) !important; border-radius: 999px !important; } #full-alerts-container::-webkit-scrollbar-thumb:hover, .full-alerts-list::-webkit-scrollbar-thumb:hover { background: rgba(0, 240, 255, 0.8) !important; } /* ========================================================================== PENINGKATAN ENTERPRISE: BUKU CATATAN PEMELIHARAAN & AVATAR PROFIL (KEBO) ========================================================================== */ /* 1. Kontainer Tabel Catatan Pemeliharaan - Mencegah Menumpuk & Elongasi */ .maintenance-table-wrap { max-height: 480px !important; overflow-y: auto !important; overflow-x: auto !important; position: relative; border-radius: 8px; } .maintenance-table-wrap .mockup-table { min-width: 980px !important; width: 100% !important; border-collapse: collapse; } .maintenance-table-wrap .sticky-thead th { position: sticky !important; top: 0 !important; z-index: 8 !important; background: #000000 !important; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.8) !important; white-space: nowrap !important; letter-spacing: 0.5px; border-bottom: 2px solid var(--border-color) !important; } .maintenance-table-wrap td { white-space: nowrap !important; vertical-align: middle !important; padding: 12px 14px !important; } .maintenance-table-wrap td:nth-child(6) { white-space: normal !important; min-width: 200px !important; max-width: 320px !important; line-height: 1.4 !important; } /* Scrollbar Elegan untuk Maintenance Table */ .maintenance-table-wrap::-webkit-scrollbar { width: 6px !important; height: 6px !important; } .maintenance-table-wrap::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.8) !important; } .maintenance-table-wrap::-webkit-scrollbar-thumb { background: rgba(0, 240, 255, 0.35) !important; border-radius: 4px !important; } .maintenance-table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(0, 240, 255, 0.75) !important; } /* 2. Topbar & Dropdown Profile Avatar Image Optimization */ /* Profil Avatar & Siluet - Warna Abu-Abu (Slate Gray) Permintaan Mas Dzakwan */ .profile-avatar { width: 34px !important; height: 34px !important; min-width: 34px !important; border-radius: 50% !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #1E293B !important; /* Latar abu-abu gelap slate */ border: 1.5px solid #64748B !important; /* Ring bundar abu-abu netral */ box-shadow: 0 0 6px rgba(100, 116, 139, 0.3) !important; cursor: pointer !important; transition: all 0.2s ease !important; } .profile-avatar:hover { border-color: #94A3B8 !important; background: #334155 !important; } .profile-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; border-radius: 50% !important; } .profile-avatar i, #topbar-profile-icon { font-size: 1.05rem !important; color: #94A3B8 !important; /* Ikon siluet abu-abu halus elegan */ } .dropdown-avatar-wrap { width: 38px !important; height: 38px !important; border-radius: 50% !important; border: 1.5px solid #64748B !important; /* Ring abu-abu */ overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #1E293B !important; flex-shrink: 0 !important; } .dropdown-avatar-wrap img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .dropdown-avatar-wrap i, #dropdown-user-avatar-icon { font-size: 1.1rem !important; color: #94A3B8 !important; /* Ikon dropdown abu-abu */ } /* 3. Mobile Bottom Nav Item Badge */ .mb-nav-item { position: relative !important; } /* ========================================================================== T-AIMS SIDEBAR TOGGLE & PERMANENT DOCKED LAYOUT Tombol hamburger [☰] selalu ada di samping tulisan T-AIMS untuk membuka/menutup sidebar ========================================================================== */ /* 1. Tombol Hamburger Menu Selalu Muncul di Samping Tulisan T-AIMS */ .mobile-toggle-btn, #sidebar-toggle-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; min-width: 38px !important; border-radius: 8px !important; background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; color: #FFFFFF !important; font-size: 1.15rem !important; cursor: pointer !important; margin-right: 14px !important; flex-shrink: 0 !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; } .mobile-toggle-btn:hover, #sidebar-toggle-btn:hover { background: rgba(255, 23, 68, 0.2) !important; border-color: #FF1744 !important; color: #FF1744 !important; transform: scale(1.05) !important; } .mobile-toggle-btn i, #sidebar-toggle-btn i { pointer-events: none !important; } /* 2. Tata Letak Dasar (Sidebar Berdampingan di Kiri Main Content) */ .app-layout { display: flex !important; flex-direction: row !important; width: 100% !important; min-height: 100vh !important; overflow-x: hidden !important; } .sidebar { position: sticky !important; top: 0 !important; left: 0 !important; width: 250px !important; min-width: 250px !important; max-width: 250px !important; height: 100vh !important; flex-shrink: 0 !important; display: flex !important; flex-direction: column !important; z-index: 100 !important; background: #08090D !important; border-right: 1px solid var(--border-color) !important; box-shadow: none !important; visibility: visible !important; opacity: 1 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease !important; } /* Efek Buka-Tutup Sidebar di Layar Besar / Desktop */ .sidebar.sidebar-collapsed { margin-left: -260px !important; pointer-events: none !important; opacity: 0 !important; visibility: hidden !important; } .sidebar .sidebar-header { padding: 16px 14px 14px 14px !important; text-align: center !important; display: flex !important; align-items: center !important; justify-content: center !important; } .sidebar .brand-logo-img { max-width: 140px !important; height: auto !important; display: inline-block !important; } .sidebar .nav-link { white-space: nowrap !important; } .sidebar .nav-link span { font-size: 0.88rem !important; white-space: nowrap !important; } /* 3. Main Content Mengikuti dan Meluas Saat Sidebar Ditutup */ .main-content { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; margin-left: 0 !important; display: flex !important; flex-direction: column !important; overflow-x: auto !important; } /* 4. Topbar Header: Tombol Menu Persis di Samping Kiri Tulisan T-AIMS */ .topbar { display: flex !important; align-items: center !important; justify-content: space-between !important; } .topbar-left { display: flex !important; align-items: center !important; } .brand-title-wrap { display: flex !important; flex-direction: column !important; } /* 5. Khusus Mode HP / Layar Sempit (<= 900px): Gunakan Drawer Slide-In */ @media (max-width: 900px) { .sidebar { position: fixed !important; top: 0 !important; bottom: 0 !important; left: -290px !important; margin-left: 0 !important; z-index: 1050 !important; transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: 10px 0 40px rgba(0, 0, 0, 0.9) !important; background: rgba(7, 7, 9, 0.98) !important; } .sidebar.mobile-open { left: 0 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .sidebar-overlay { position: fixed !important; inset: 0 !important; background: rgba(0, 0, 0, 0.75) !important; backdrop-filter: blur(4px) !important; z-index: 1040 !important; opacity: 0 !important; pointer-events: none !important; transition: opacity 0.3s ease !important; } .sidebar-overlay.active { display: block !important; opacity: 1 !important; pointer-events: auto !important; } } @media (min-width: 901px) { .sidebar-overlay { display: none !important; } } /* Empty State Riwayat Gangguan / Peringatan (Dashboard) */ .alerts-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 28px 16px; min-height: 160px; text-align: center; } .alerts-empty-state i { font-size: 2.2rem; color: #00FF9D; filter: drop-shadow(0 0 10px rgba(0, 255, 157, 0.55)); } .alerts-empty-state strong { color: #00FF9D; font-size: 0.95rem; } .alerts-empty-state span { color: #94A3B8; font-size: 0.78rem; } /* ========================================================================== */ /* T-AIMS AI INFRASTRUCTURE ASSISTANT STYLING (AZIZ & DIKA UI/UX ENHANCEMENT) */ /* ========================================================================== */ .ai-rec-card { background: rgba(15, 23, 42, 0.75); border: 1px solid rgba(0, 240, 255, 0.2); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; transition: all 0.2s ease; } .ai-rec-card:hover { border-color: rgba(0, 240, 255, 0.45); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); } .ai-rec-card-title { font-size: 0.82rem; font-weight: 700; color: inherit; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; } .ai-rec-card-body { font-size: 0.82rem; color: #E2E8F0; line-height: 1.6; } .ai-troubled-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.35); color: #F87171; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: all 0.15s ease; margin: 3px 4px 3px 0; } .ai-troubled-pill:hover { background: #EF4444; color: #fff; transform: translateY(-1px); box-shadow: 0 0 10px rgba(239, 68, 68, 0.4); } .ai-source-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.35); color: #34D399; font-size: 0.72rem; font-weight: 600; padding: 4px 10px; border-radius: 9999px; } .btn-ai-action { display: inline-flex; align-items: center; gap: 6px; background: rgba(148, 163, 184, 0.1); color: #CBD5E1; border: 1px solid rgba(148, 163, 184, 0.25); border-radius: 6px; padding: 5px 12px; font-size: 0.76rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .btn-ai-action:hover { background: rgba(0, 240, 255, 0.15); color: #00F0FF; border-color: #00F0FF; transform: translateY(-1px); } /* AI Problem Box Rich Telemetry Modules (Dokumen PKL Hal. 17) */ .ai-section-subtitle { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #94A3B8; margin: 12px 0 6px 0; display: flex; align-items: center; justify-content: space-between; } .ai-troubled-card { background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(239, 68, 68, 0.22); border-radius: 6px; padding: 7px 10px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; transition: all 0.2s ease; cursor: pointer; } .ai-troubled-card:hover { background: rgba(239, 68, 68, 0.08); border-color: #EF4444; transform: translateX(2px); } .ai-tc-left { display: flex; align-items: center; gap: 8px; } .ai-tc-icon { width: 28px; height: 28px; border-radius: 6px; background: rgba(239, 68, 68, 0.15); color: #F87171; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; flex-shrink: 0; } .ai-tc-name { font-size: 0.76rem; font-weight: 700; color: #F1F5F9; line-height: 1.2; } .ai-tc-sub { font-size: 0.68rem; color: #94A3B8; font-family: 'JetBrains Mono', monospace; } .ai-tc-badge { font-size: 0.68rem; font-weight: 700; color: #F87171; background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); padding: 2px 7px; border-radius: 4px; white-space: nowrap; } .ai-site-health-box { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 6px; padding: 10px 12px; margin-top: 8px; } .ai-site-row { margin-bottom: 8px; } .ai-site-row:last-child { margin-bottom: 0; } .ai-site-row-header { display: flex; justify-content: space-between; font-size: 0.72rem; margin-bottom: 3px; color: #CBD5E1; } .ai-site-progress-track { width: 100%; height: 4px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; overflow: hidden; } .ai-site-progress-fill { height: 100%; border-radius: 2px; transition: width 0.4s ease; } .ai-urgency-banner { display: flex; align-items: center; justify-content: space-between; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.25); border-radius: 6px; padding: 6px 10px; font-size: 0.72rem; margin-top: 10px; } /* ========================================================================== MOBILE RESPONSIVE OVERRIDES (MAX-WIDTH: 900PX) Preserves 100% Desktop Layout HUD zero-scroll while optimizing mobile view ========================================================================== */ @media (max-width: 900px) { /* 1. Hilangkan tulisan 'Ringkasan Sistem Pemantauan' di HP */ .topbar-left .brand-title-wrap .title-sub, .topbar-left .title-sub, .topbar .title-sub, .brand-title-wrap .title-sub, .title-sub { display: none !important; } .topbar-left .brand-title-wrap { display: flex !important; flex-direction: column !important; justify-content: center !important; } .topbar-left .title-code { font-size: 1.15rem !important; line-height: 1 !important; } /* 2. Topbar proporsional: Hilangkan ruang kosong bawah avatar & geser avatar ke kiri */ .topbar { min-height: 52px !important; height: 52px !important; padding: 6px 12px 6px 10px !important; align-items: center !important; } .topbar-right { display: flex !important; align-items: center !important; gap: 5px !important; padding-right: 4px !important; } .profile-dropdown-wrapper { margin-right: 6px !important; display: flex !important; align-items: center !important; } .user-profile-pill { padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; display: flex !important; align-items: center !important; gap: 0 !important; } .user-profile-pill .profile-info { display: none !important; } .user-profile-pill .caret-icon { display: none !important; /* Hilangkan panah chevron agar hemat ruang dan avatar terlihat utuh */ } .user-profile-pill .profile-avatar { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; border-radius: 50% !important; border: 1.5px solid #64748B !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; } /* 3. Perbaikan menu selain dashboard (Hilangkan kotak hitam & buat konten scroll mulus) */ .page-view.active:not(#page-dashboard), .page-view.active, .page-view { height: auto !important; min-height: auto !important; max-height: none !important; overflow: visible !important; overflow-y: visible !important; overflow-x: hidden !important; flex: none !important; padding-right: 0 !important; padding-bottom: 0 !important; } body.page-dashboard-active .content-container, body:not(.page-dashboard-active) .content-container, .content-container { height: auto !important; min-height: auto !important; overflow: visible !important; overflow-y: visible !important; padding: 10px 12px calc(90px + env(safe-area-inset-bottom, 0px)) 12px !important; /* Ruang pas tanpa kotak hitam, nyaman di atas bottom nav */ } .main-content { height: auto !important; min-height: 100vh !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; } .filter-controls-card, .dashboard-card { max-height: none !important; overflow: visible !important; margin-bottom: 14px !important; } .table-responsive { display: block !important; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; max-height: none !important; } /* 4. Perbaikan Peta Lokasi (Hilangkan ruang kosong hitam di bawah peta pada HP) */ .loc-map-card .card-body.relative-map-container, .relative-map-container { min-height: 0 !important; height: 350px !important; position: relative !important; overflow: hidden !important; } .full-blitar-map-el, #full-blitar-map { height: 350px !important; min-height: 350px !important; width: 100% !important; } .map-telemetry-badge { position: absolute !important; bottom: 8px !important; left: 8px !important; right: 8px !important; width: auto !important; display: flex !important; justify-content: space-between !important; padding: 6px 12px !important; font-size: 0.7rem !important; z-index: 400 !important; background: rgba(7, 7, 9, 0.92) !important; border: 1px solid var(--border-cyan) !important; } .map-card-elevated { height: auto !important; min-height: auto !important; overflow: hidden !important; } /* 5. Proteksi Navigasi Bawah (Wajib Selalu di Atas Layer Peta Leaflet & Tidak Boleh Tertutup) */ .mobile-bottom-nav { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 99999 !important; /* Tingkat teratas agar layer peta Leaflet tidak menutupi tulisan menu */ background: rgba(6, 6, 8, 0.98) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.95) !important; border-top: 1px solid rgba(0, 229, 255, 0.25) !important; pointer-events: auto !important; } .mobile-bottom-nav .mb-nav-item { position: relative !important; z-index: 100000 !important; } /* 6. Banner Hero di HP: Hilangkan deskripsi panjang & posisikan slogan TECHNOLOGY MONITORING di sisi kanan */ .banner-hero { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 10px 14px !important; margin-bottom: 12px !important; gap: 10px !important; } .banner-left { flex: 1 1 auto !important; } .banner-title { font-size: 1.05rem !important; margin-bottom: 0 !important; white-space: nowrap !important; } .banner-desc { display: none !important; /* Hilangkan tulisan ringkasan pemantauan aset dan infrastruktur... */ } .banner-right { flex: 0 0 auto !important; } .banner-right .slogan-box, .slogan-box { padding: 5px 10px !important; background: rgba(8, 8, 10, 0.65) !important; border-right: 3px solid #F59E0B !important; border-radius: 6px !important; text-align: right !important; } .slogan-box .slogan-line { display: block !important; font-size: 0.6rem !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: 0.04em !important; } /* 7. Perbaikan Grafik Tren Status & Donut Distribusi Kategori di HP */ .trend-card .card-header { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; padding: 10px 14px !important; } .trend-card .card-title-group { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; } .trend-card .card-controls { width: 100% !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; } .trend-card .chart-legend-inline { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 0.7rem !important; } .trend-card .cyber-select { font-size: 0.72rem !important; padding: 3px 8px !important; } .trend-card .chart-body { padding: 8px 10px 14px 6px !important; height: 220px !important; width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; } /* Donut Chart: Stack Vertikal (Donut di atas, Legend 2-Kolom Lengkap di Bawah) */ .donut-card .donut-body { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 16px !important; padding: 14px 14px 16px 14px !important; height: auto !important; min-height: auto !important; max-height: none !important; } .donut-card .donut-visual-wrap { width: 140px !important; height: 140px !important; margin: 0 auto !important; flex-shrink: 0 !important; } .donut-card .donut-legend-col, #donut-legend-container { width: 100% !important; max-height: none !important; overflow: visible !important; overflow-y: visible !important; display: grid !important; grid-template-columns: 1fr 1fr !important; flex-direction: unset !important; gap: 6px 10px !important; padding: 0 !important; } .donut-card .d-leg-row { width: 100% !important; display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 4px 6px !important; background: rgba(255, 255, 255, 0.025) !important; border-radius: 4px !important; box-sizing: border-box !important; } .donut-card .d-leg-name { font-size: 0.7rem !important; display: flex !important; align-items: center !important; gap: 5px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; color: #E2E8F0 !important; } .donut-card .d-leg-val { font-size: 0.7rem !important; white-space: nowrap !important; margin-left: 4px !important; flex-shrink: 0 !important; } /* 8. Presisi Jarak Bawah Riwayat Gangguan & Ringkasan Pemeliharaan (Sesuai Permintaan User) */ .bottom-three-grid .dashboard-card:last-child { margin-bottom: 0 !important; /* Hilangkan margin ganda pada kartu Riwayat Gangguan */ } .bottom-three-grid { margin-bottom: 28px !important; /* Jarak di bawah Riwayat Gangguan disamakan dengan jarak Peta -> Riwayat Gangguan (14px margin kartu + 14px gap) */ } .maintenance-section { margin-top: 0 !important; margin-bottom: 0 !important; } /* Jarak bawah Ringkasan Pemeliharaan ke bottom-nav pas 14px (64px nav + 14px gap = 78px) */ body.page-dashboard-active .content-container, body:not(.page-dashboard-active) .content-container, .content-container { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; } } /* ========================================================================== LOKASI - MODE PETA GEOSPASIAL GIS (DESKTOP): TANPA SCROLL HALAMAN Peta mengisi sisa tinggi layar; kartu site di kanan scroll internal (tanpa scrollbar tampak). ========================================================================== */ @media (min-width: 901px) { #page-location.page-view.active:has(#loc-panel-gis.active) { display: flex !important; flex-direction: column !important; overflow: hidden !important; overflow-y: hidden !important; padding-right: 0 !important; padding-bottom: 0 !important; } #page-location.page-view.active:has(#loc-panel-gis.active) .location-page-header { flex-shrink: 0 !important; } #page-location.page-view.active:has(#loc-panel-gis.active) #loc-panel-gis.loc-subpanel.active { display: flex !important; flex-direction: column !important; flex: 1 1 0 !important; min-height: 0 !important; } #page-location #loc-panel-gis .loc-gis-layout-grid { flex: 1 1 0 !important; min-height: 0 !important; grid-template-rows: minmax(0, 1fr) !important; margin-bottom: 8px !important; } #page-location #loc-panel-gis .loc-map-wrapper { height: 100% !important; min-height: 0 !important; } #page-location #loc-panel-gis .map-card-elevated { height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #page-location #loc-panel-gis .relative-map-container { flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; position: relative !important; } #page-location #loc-panel-gis #full-blitar-map, #page-location #loc-panel-gis .full-blitar-map-el { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; } #page-location #loc-panel-gis .loc-sidebar-wrapper { height: 100% !important; max-height: none !important; min-height: 0 !important; overflow-y: auto !important; scrollbar-width: none !important; } #page-location #loc-panel-gis .loc-sidebar-wrapper::-webkit-scrollbar { display: none !important; } } /* ========================================================================== LOKASI (DESKTOP): Tombol Peta/Denah/Google Maps/Satelit sejajar dengan tombol HO, MO, House Of Server ========================================================================== */ @media (min-width: 901px) { #page-location .location-page-header { display: flex !important; flex-wrap: wrap !important; align-items: center !important; column-gap: 14px !important; row-gap: 0 !important; } #page-location .location-page-header > .loc-badge-wrap, #page-location .location-page-header > .loc-header-row { flex: 0 0 100% !important; } #page-location .location-page-header > .site-quick-nav-bar { flex: 0 0 auto !important; margin-bottom: 0 !important; flex-wrap: nowrap !important; } #page-location .location-page-header > .loc-tab-switcher { flex: 1 1 0 !important; min-width: 0 !important; flex-wrap: wrap !important; justify-content: flex-end !important; align-items: center !important; border-top: none !important; padding-top: 10px !important; margin-bottom: 0 !important; } } /* Desktop layout handled cleanly in v6.0.28 */ /* DESKTOP: hilangkan ruang kosong di bawah semua menu (selain dashboard) */ @media (min-width: 901px) { .page-view.active:not(#page-dashboard) { padding-bottom: 0 !important; } body:not(.page-dashboard-active) .content-container { padding-bottom: 6px !important; } } /* MOBILE: hilangkan ruang kosong berlebih di bawah semua menu (selain dashboard), jarak ke bottom-nav pas 14px */ @media (max-width: 900px) { body:not(.page-dashboard-active) .content-container { padding-bottom: calc(64px + 14px + env(safe-area-inset-bottom, 0px)) !important; } body:not(.page-dashboard-active) .main-content { padding-bottom: 0 !important; } .page-view.active:not(#page-dashboard) { padding-bottom: 0 !important; margin-bottom: 0 !important; } .page-view.active:not(#page-dashboard) > :last-child, .page-view.active:not(#page-dashboard) > .loc-subpanel.active > :last-child, .page-view.active:not(#page-dashboard) > :last-child > .dashboard-card:last-child { margin-bottom: 0 !important; } } /* ========================================================================== JARAK ANTAR KOTAK DISERAGAMKAN (DASHBOARD) Desktop: 8px di semua sisi | HP: 14px di semua sisi ========================================================================== */ @media (min-width: 901px) { .banner-hero { margin-bottom: 8px !important; } .kpi-grid { gap: 8px !important; margin-bottom: 8px !important; } .charts-row { gap: 8px !important; margin-bottom: 8px !important; } .bottom-three-grid { gap: 8px !important; margin-bottom: 8px !important; } .maintenance-section { margin-top: 0 !important; margin-bottom: 0 !important; } } @media (max-width: 900px) { .banner-hero { margin-bottom: 14px !important; } .kpi-grid { gap: 14px !important; margin-bottom: 14px !important; } .charts-row { gap: 14px !important; margin-bottom: 14px !important; } .charts-row .dashboard-card, .bottom-three-grid .dashboard-card { margin-bottom: 0 !important; } .bottom-three-grid { gap: 14px !important; margin-bottom: 14px !important; } .maintenance-section { margin-top: 0 !important; margin-bottom: 0 !important; } } /* ========================================================================== JARAK ANTAR KOTAK DISERAGAMKAN - MENU PENGGUNA & PENGATURAN Judul -> banner -> tombol tab -> tabel: semuanya 14px (tanpa garis putus-putus tambahan) ========================================================================== */ .page-view > .page-title-row { margin-bottom: 14px !important; } .page-view > .live-shift-hero-card { margin-top: 0 !important; margin-bottom: 14px !important; } .page-view > .loc-tab-switcher { border-top: none !important; padding-top: 0 !important; margin-top: 0 !important; margin-bottom: 14px !important; } #page-users .users-subpanel > .dashboard-card, #page-users .users-subpanel > .team-cards-grid { margin-top: 0 !important; } /* ===================================================== BRIGHTNESS FIX: Badge Hijau & Merah lebih cerah v6.0.19 ===================================================== */ /* Badge STATUS AKUN - Aktif (hijau lebih terang) */ .badge-pill-green { color: #00FF9C !important; border-color: rgba(0, 255, 156, 0.5) !important; background: rgba(0, 255, 156, 0.12) !important; text-shadow: 0 0 8px rgba(0, 255, 156, 0.6); } .badge-pill-green i { color: #00FF9C !important; text-shadow: 0 0 6px rgba(0, 255, 156, 0.8); } /* Badge STATUS AKUN - Non-Aktif (merah lebih terang) */ .badge-pill-red { color: #FF6B8A !important; border-color: rgba(255, 107, 138, 0.5) !important; background: rgba(255, 107, 138, 0.12) !important; text-shadow: 0 0 8px rgba(255, 107, 138, 0.6); } /* Badge PERAN - Superadmin (merah lebih cerah) */ .user-role-badge.super, .badge-role-superadmin { color: #FF6B8A !important; border-color: rgba(255, 107, 138, 0.65) !important; background: rgba(255, 107, 138, 0.15) !important; text-shadow: 0 0 8px rgba(255, 107, 138, 0.5); box-shadow: 0 0 12px rgba(255, 107, 138, 0.2) !important; } /* Badge CRUD merah (kotak merah di sebelah Superadmin) */ .badge-role-crud, .user-access-badge.crud, [class*="badge"][class*="crud"] { color: #FF6B8A !important; border-color: rgba(255, 107, 138, 0.55) !important; text-shadow: 0 0 6px rgba(255, 107, 138, 0.5); } /* ===================================================== BADGE COLOR FIX v6.0.20 - Superadmin/CRUD: merah murni - Admin: kuning emas ===================================================== */ /* Badge PERAN - Superadmin: merah murni */ .user-role-badge.super, .badge-role-superadmin { color: #FF3333 !important; border-color: rgba(255, 51, 51, 0.65) !important; background: rgba(255, 51, 51, 0.15) !important; text-shadow: 0 0 8px rgba(255, 51, 51, 0.55) !important; box-shadow: 0 0 12px rgba(255, 51, 51, 0.2) !important; } /* Badge CRUD merah murni */ .badge-role-crud, .user-access-badge.crud, [class*="badge"][class*="crud"] { color: #FF3333 !important; border-color: rgba(255, 51, 51, 0.55) !important; text-shadow: 0 0 6px rgba(255, 51, 51, 0.5) !important; } /* Badge PERAN - Admin: kuning emas */ .user-role-badge.admin { color: #FFD700 !important; border-color: rgba(255, 215, 0, 0.5) !important; background: rgba(255, 215, 0, 0.12) !important; text-shadow: 0 0 8px rgba(255, 215, 0, 0.5) !important; box-shadow: 0 0 10px rgba(255, 215, 0, 0.15) !important; } /* Badge CRU (akses admin): kuning emas juga */ .user-access-badge.cru, [class*="badge"][class*="cru"] { color: #FFD700 !important; border-color: rgba(255, 215, 0, 0.5) !important; text-shadow: 0 0 6px rgba(255, 215, 0, 0.4) !important; } /* ===================================================== REVERT v6.0.21 - Admin: kembali putih - Superadmin/CRUD: kembali merah asli ===================================================== */ .user-role-badge.admin { color: #FFFFFF !important; border-color: rgba(255, 255, 255, 0.35) !important; background: rgba(255, 255, 255, 0.10) !important; text-shadow: none !important; box-shadow: 0 0 8px rgba(255, 255, 255, 0.15) !important; } .user-access-badge.cru, [class*="badge"][class*="cru"] { color: #FFFFFF !important; border-color: rgba(255, 255, 255, 0.35) !important; text-shadow: none !important; } .user-role-badge.super, .badge-role-superadmin { color: #FF2E63 !important; border-color: #FF1744 !important; background: linear-gradient(135deg, rgba(225, 29, 72, 0.25) 0%, rgba(255, 23, 68, 0.15) 100%) !important; text-shadow: none !important; box-shadow: 0 0 10px rgba(255, 23, 68, 0.2) !important; } .badge-role-crud, .user-access-badge.crud, [class*="badge"][class*="crud"] { color: #FF2E63 !important; border-color: #FF1744 !important; text-shadow: none !important; } /* ===================================================== MAINTENANCE TABLE: Tombol Aksi & Status Fix v6.0.22 ===================================================== */ /* Tombol icon kecil Edit / Hapus di tabel pemeliharaan */ .btn-icon-sm { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; border: 1px solid currentColor; background: transparent; cursor: pointer; font-size: 0.75rem; opacity: 0.85; transition: opacity 0.15s, background 0.15s; padding: 0; line-height: 1; } .btn-icon-sm:hover { opacity: 1; background: rgba(255,255,255,0.08); } .btn-icon-sm.text-cyan { color: var(--cyan-neon, #00e5ff); border-color: rgba(0,229,255,0.45); } .btn-icon-sm.text-cyan:hover { background: rgba(0,229,255,0.12); } /* Status pill di tabel maintenance — jangan terpotong */ #maintenance-tbody .status-pill { white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; min-width: max-content; } /* Kolom STATUS & AKSI di tabel maintenance — lebar cukup */ #maintenance-tbody td:nth-child(8) { min-width: 120px; } #maintenance-tbody td:nth-child(9) { min-width: 72px; width: 72px; } /* v6.0.23 - Tabel Perangkat bisa di-scroll kanan-kiri (dan berganti penuh saat mode Grid aktif) */ #devices-table-view { display: block; width: 100% !important; overflow-x: auto !important; overflow-y: visible; -webkit-overflow-scrolling: touch; } #devices-table-view.hidden { display: none !important; } #devices-grid-view.hidden { display: none !important; } #devices-grid-view:not(.hidden) { display: grid !important; } #devices-table-view .mockup-table { width: 100% !important; min-width: 980px !important; border-collapse: separate !important; } /* Proporsi Kolom & Perataan Header/Sel Tabel Telemetri Aset */ #devices-table-view .mockup-table th, #devices-table-view .mockup-table td { padding: 7px 8px !important; vertical-align: middle !important; } /* 1. No - Ringkas & Rata Tengah */ #devices-table-view .mockup-table th:nth-child(1), #devices-table-view .mockup-table td:nth-child(1) { width: 4% !important; min-width: 42px !important; text-align: center !important; } /* 2. Kode Aset */ #devices-table-view .mockup-table th:nth-child(2), #devices-table-view .mockup-table td:nth-child(2) { width: 8% !important; min-width: 90px !important; white-space: nowrap !important; } /* 3. Nama Perangkat & Kategori */ #devices-table-view .mockup-table th:nth-child(3), #devices-table-view .mockup-table td:nth-child(3) { width: 17% !important; min-width: 180px !important; } /* 4. Alamat IP / MAC */ #devices-table-view .mockup-table th:nth-child(4), #devices-table-view .mockup-table td:nth-child(4) { width: 12% !important; min-width: 130px !important; white-space: nowrap !important; } /* 5. Lokasi Site - Rata Tengah */ #devices-table-view .mockup-table th:nth-child(5), #devices-table-view .mockup-table td:nth-child(5) { width: 11% !important; min-width: 125px !important; white-space: nowrap !important; text-align: center !important; } /* 6. PIC Teknisi */ #devices-table-view .mockup-table th:nth-child(6), #devices-table-view .mockup-table td:nth-child(6) { width: 9% !important; min-width: 100px !important; white-space: nowrap !important; } /* 7. Metode Pemantauan - Rata Tengah & Proporsional */ #devices-table-view .mockup-table th:nth-child(7), #devices-table-view .mockup-table td:nth-child(7) { width: 10% !important; min-width: 110px !important; white-space: nowrap !important; text-align: center !important; } /* 8. Respon - Rata Tengah */ #devices-table-view .mockup-table th:nth-child(8), #devices-table-view .mockup-table td:nth-child(8) { width: 6% !important; min-width: 65px !important; white-space: nowrap !important; text-align: center !important; } /* 9. Status - Rata Tengah */ #devices-table-view .mockup-table th:nth-child(9), #devices-table-view .mockup-table td:nth-child(9) { width: 8% !important; min-width: 90px !important; white-space: nowrap !important; text-align: center !important; } /* 10. Terakhir Terlihat - Rata Tengah */ #devices-table-view .mockup-table th:nth-child(10), #devices-table-view .mockup-table td:nth-child(10) { width: 11% !important; min-width: 135px !important; white-space: nowrap !important; text-align: center !important; } /* 11. Aksi - Rata Tengah */ #devices-table-view .mockup-table th:nth-child(11), #devices-table-view .mockup-table td:nth-child(11) { width: 6% !important; min-width: 85px !important; white-space: nowrap !important; text-align: center !important; } /* ============================================================ */ /* TABEL AKUN USER & HAK AKSES (RBAC) - PROPORSI & PERATAAN RAPI */ /* ============================================================ */ #users-panel-rbac .mockup-table, #users-rbac-table { width: 100% !important; min-width: 980px !important; border-collapse: separate !important; } #users-panel-rbac .mockup-table th, #users-panel-rbac .mockup-table td, #users-rbac-table th, #users-rbac-table td { padding: 7px 8px !important; vertical-align: middle !important; } /* 1. No - Rata Tengah */ #users-panel-rbac .mockup-table th:nth-child(1), #users-panel-rbac .mockup-table td:nth-child(1), #users-rbac-table th:nth-child(1), #users-rbac-table td:nth-child(1) { width: 4% !important; min-width: 42px !important; text-align: center !important; } /* 2. Nama Pengguna */ #users-panel-rbac .mockup-table th:nth-child(2), #users-panel-rbac .mockup-table td:nth-child(2), #users-rbac-table th:nth-child(2), #users-rbac-table td:nth-child(2) { width: 20% !important; min-width: 190px !important; } /* 3. Surel */ #users-panel-rbac .mockup-table th:nth-child(3), #users-panel-rbac .mockup-table td:nth-child(3), #users-rbac-table th:nth-child(3), #users-rbac-table td:nth-child(3) { width: 15% !important; min-width: 150px !important; white-space: nowrap !important; } /* 4. Peran / Hak Akses - Rata Tengah */ #users-panel-rbac .mockup-table th:nth-child(4), #users-panel-rbac .mockup-table td:nth-child(4), #users-rbac-table th:nth-child(4), #users-rbac-table td:nth-child(4) { width: 14% !important; min-width: 140px !important; text-align: center !important; white-space: nowrap !important; } /* 5. PIC Penanggung Jawab */ #users-panel-rbac .mockup-table th:nth-child(5), #users-panel-rbac .mockup-table td:nth-child(5), #users-rbac-table th:nth-child(5), #users-rbac-table td:nth-child(5) { width: 20% !important; min-width: 180px !important; } /* 6. Status Akun - Rata Tengah */ #users-panel-rbac .mockup-table th:nth-child(6), #users-panel-rbac .mockup-table td:nth-child(6), #users-rbac-table th:nth-child(6), #users-rbac-table td:nth-child(6) { width: 9% !important; min-width: 90px !important; text-align: center !important; white-space: nowrap !important; } /* 7. Terakhir Masuk - Rata Tengah */ #users-panel-rbac .mockup-table th:nth-child(7), #users-panel-rbac .mockup-table td:nth-child(7), #users-rbac-table th:nth-child(7), #users-rbac-table td:nth-child(7) { width: 10% !important; min-width: 110px !important; text-align: center !important; white-space: nowrap !important; } /* 8. Aksi - Header Tetap di Tengah, Tombol Edit & Delete Mepet ke Kanan */ #users-panel-rbac .mockup-table th:nth-child(8), #users-rbac-table th:nth-child(8) { width: 8% !important; min-width: 95px !important; text-align: center !important; white-space: nowrap !important; } #users-panel-rbac .mockup-table td:nth-child(8), #users-rbac-table td:nth-child(8) { width: 8% !important; min-width: 95px !important; text-align: right !important; padding-right: 4px !important; white-space: nowrap !important; } #users-panel-rbac .mockup-table td:nth-child(8) .d-flex, #users-rbac-table td:nth-child(8) .d-flex, #users-panel-rbac .mockup-table td:nth-child(8) > div, #users-rbac-table td:nth-child(8) > div { display: flex !important; justify-content: flex-end !important; align-items: center !important; width: 100% !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; } .justify-end { justify-content: flex-end !important; } /* ============================================================ */ /* FIX CARD & FORM PADDING DI HALAMAN PENGATURAN (ANTI NIMPA / KELUAR GARIS) */ /* ============================================================ */ #page-settings .dashboard-card { border-radius: 12px !important; background: linear-gradient(180deg, #14161E 0%, #0B0C10 100%) !important; overflow: hidden !important; } #page-settings .dashboard-card .card-header { padding: 14px 24px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } #page-settings .dashboard-card .card-body, #settings-panel-engine .card-body, #settings-panel-notif .card-body, #settings-panel-sim .card-body, #settings-panel-db .card-body { padding: 22px 24px !important; box-sizing: border-box !important; overflow: visible !important; } #page-settings .settings-form-grid { display: flex !important; flex-direction: column !important; gap: 16px !important; width: 100% !important; box-sizing: border-box !important; } #page-settings .settings-form-grid .form-group { display: flex !important; flex-direction: column !important; gap: 6px !important; margin: 0 !important; width: 100% !important; box-sizing: border-box !important; } #page-settings .settings-form-grid .form-group label { margin: 0 !important; padding: 0 !important; color: #FFFFFF !important; font-weight: 700 !important; font-size: 0.82rem !important; line-height: 1.4 !important; } #page-settings .settings-form-grid input, #page-settings .settings-form-grid select { width: 100% !important; max-width: 100% !important; padding: 10px 14px !important; background: rgba(10, 10, 14, 0.92) !important; border: 1.5px solid rgba(255, 255, 255, 0.18) !important; border-radius: 8px !important; color: #FFFFFF !important; font-size: 0.82rem !important; box-sizing: border-box !important; } #page-settings .settings-form-grid .text-muted, #page-settings .settings-form-grid span.text-muted { font-size: 0.72rem !important; color: #94A3B8 !important; line-height: 1.4 !important; margin-top: 2px !important; } /* Safeguard: Seluruh kartu dashboard non-tabel memiliki padding aman */ .dashboard-card .card-body:not(.p-0) { padding: 18px 22px !important; box-sizing: border-box !important; } /* Cyber Badge Metode Pemantauan (Ping, MQTT, SNMP, HTTP) */ .badge-method { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; padding: 3px 9px !important; border-radius: 6px !important; font-size: 0.69rem !important; font-weight: 600 !important; font-family: 'JetBrains Mono', 'Fira Code', monospace !important; letter-spacing: 0.02em !important; line-height: 1.2 !important; white-space: nowrap !important; border: 1px solid rgba(56, 189, 248, 0.35) !important; background: rgba(56, 189, 248, 0.09) !important; color: #38bdf8 !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important; } .badge-method.badge-method-heartbeat { border-color: rgba(244, 63, 94, 0.45) !important; background: rgba(244, 63, 94, 0.12) !important; color: #fb7185 !important; } .badge-method.badge-method-mqtt { border-color: rgba(168, 85, 247, 0.4) !important; background: rgba(168, 85, 247, 0.12) !important; color: #c084fc !important; } .badge-method.badge-method-snmp { border-color: rgba(34, 197, 94, 0.4) !important; background: rgba(34, 197, 94, 0.12) !important; color: #4ade80 !important; } .badge-method.badge-method-http, .badge-method.badge-method-api { border-color: rgba(245, 158, 11, 0.4) !important; background: rgba(245, 158, 11, 0.12) !important; color: #fbbf24 !important; } #devices-table-view::-webkit-scrollbar { height: 10px; } #devices-table-view::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); border-radius: 6px; } #devices-table-view::-webkit-scrollbar-thumb { background: #636C7A; border-radius: 6px; } /* ========================================================================== v6.0.25 - Modern Tactile Cyber Dark Button Suite (Anti-Tipis & Elegant) Meningkatkan bobot visual tombol dengan elevated matte slate surface, subtle top bevel specular highlight, padding proporsional & clean drop shadow. ========================================================================== */ /* 1. Global Button Sizing & Tactile Base */ .btn { min-height: 38px; padding: 8px 18px; border-radius: 8px; font-size: 0.82rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.25; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-sizing: border-box; } .btn-sm { min-height: 36px !important; padding: 8px 16px !important; font-size: 0.8rem !important; border-radius: 8px !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; line-height: 1.25 !important; box-sizing: border-box !important; } .btn-xs { min-height: 30px !important; padding: 5px 12px !important; font-size: 0.74rem !important; border-radius: 6px !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; } /* 2. Tombol Utama (Primary Cyber - Merah Teknolab Solid Berbobot) */ .btn-primary-cyber { background: linear-gradient(180deg, #E11D48 0%, #BE123C 100%) !important; color: #FFFFFF !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 0 14px rgba(225, 29, 72, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; font-weight: 600 !important; } .btn-primary-cyber:hover { background: linear-gradient(180deg, #F43F5E 0%, #E11D48 100%) !important; border-color: rgba(255, 255, 255, 0.35) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 18px rgba(225, 29, 72, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important; transform: translateY(-1px); color: #FFFFFF !important; } .btn-primary-cyber:active { transform: translateY(0); } /* 3. Tombol Outline & Sekunder Cyber (Menu Laporan, Peringatan, Jaringan, Pengaturan, Pengguna) */ .btn-outline-cyber, .btn-secondary-cyber { background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%) !important; color: #F1F5F9 !important; border: 1px solid rgba(148, 163, 184, 0.32) !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; font-weight: 600 !important; cursor: pointer !important; } .btn-outline-cyber i, .btn-secondary-cyber i { transition: transform 0.2s ease, color 0.2s ease; } .btn-outline-cyber:hover, .btn-secondary-cyber:hover { background: linear-gradient(180deg, #27354D 0%, #172033 100%) !important; border-color: rgba(56, 189, 248, 0.55) !important; color: #FFFFFF !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 10px rgba(56, 189, 248, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; transform: translateY(-1px); } .btn-outline-cyber:active, .btn-secondary-cyber:active { transform: translateY(0); } /* 4. Tombol Telegram (Menu Peringatan & Pengaturan - Elevated Charcoal Slate Surface with Titanium White Icon) */ .btn-telegram { background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%) !important; color: #FFFFFF !important; border: 1px solid rgba(248, 250, 252, 0.30) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; font-weight: 700 !important; cursor: pointer !important; } .btn-telegram i { color: #F8FAFC !important; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.45)) !important; transition: transform 0.2s ease, filter 0.2s ease !important; } .btn-telegram:hover { background: linear-gradient(180deg, #27354D 0%, #172033 100%) !important; border-color: #FFFFFF !important; color: #FFFFFF !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 14px rgba(255, 255, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; transform: translateY(-1px); } .btn-telegram:hover i { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)) !important; transform: scale(1.1); } .btn-telegram:active { transform: translateY(0); } /* 5. Sub-Tab Switcher (.loc-tab-btn di Pengaturan, Pengguna, dan Lokasi - Gambar 1 & 5) */ .loc-tab-btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; min-height: 40px !important; padding: 10px 18px !important; border-radius: 8px !important; font-size: 0.82rem !important; font-weight: 700 !important; cursor: pointer !important; background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%) !important; border: 1px solid rgba(148, 163, 184, 0.28) !important; color: #CBD5E1 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; } .loc-tab-btn:hover { background: linear-gradient(180deg, #27354D 0%, #172033 100%) !important; color: #FFFFFF !important; border-color: rgba(148, 163, 184, 0.48) !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important; transform: translateY(-1px); } .loc-tab-btn.active { background: linear-gradient(180deg, #2D3748 0%, #1A202C 100%) !important; border: 1.5px solid rgba(245, 158, 11, 0.8) !important; color: #FFFFFF !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 14px rgba(245, 158, 11, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; } /* 6. Tombol Kotak Simulasi Gangguan (.sim-card, .btn-outline-red, .btn-outline-yellow - Gambar 3) */ .sim-scenarios-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 14px !important; } .sim-card { display: flex !important; flex-direction: column !important; justify-content: space-between !important; padding: 16px 18px !important; border-radius: 10px !important; } .sim-card .sim-desc { flex: 1 1 auto !important; margin: 8px 0 14px 0 !important; font-size: 0.8rem !important; color: #CBD5E1 !important; line-height: 1.5 !important; } .sim-card button, .sim-card .btn-sm { width: 100% !important; min-height: 38px !important; padding: 9px 16px !important; border-radius: 8px !important; font-weight: 700 !important; font-size: 0.8rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; cursor: pointer !important; transition: all 0.2s ease !important; } .btn-outline-red { background: linear-gradient(180deg, rgba(159, 18, 57, 0.45) 0%, rgba(136, 19, 55, 0.65) 100%) !important; border: 1px solid rgba(244, 63, 94, 0.55) !important; color: #FFE4E6 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } .btn-outline-red:hover { background: linear-gradient(180deg, #E11D48 0%, #BE123C 100%) !important; border-color: #FB7185 !important; color: #FFFFFF !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 12px rgba(225, 29, 72, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; transform: translateY(-1px); } .btn-outline-yellow { background: linear-gradient(180deg, rgba(146, 64, 14, 0.45) 0%, rgba(120, 53, 15, 0.65) 100%) !important; border: 1px solid rgba(245, 158, 11, 0.55) !important; color: #FEF3C7 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } .btn-outline-yellow:hover { background: linear-gradient(180deg, #D97706 0%, #B45309 100%) !important; border-color: #FBBF24 !important; color: #FFFFFF !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 12px rgba(245, 158, 11, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; transform: translateY(-1px); } /* 7. Menu Lokasi - Bar Navigasi Site (.btn-site-quick) */ .site-quick-nav-bar { display: flex; gap: 8px; align-items: center; } .btn-site-quick { display: inline-flex !important; align-items: center !important; gap: 8px !important; min-height: 38px !important; padding: 8px 16px !important; border-radius: 8px !important; font-size: 0.8rem !important; font-weight: 600 !important; cursor: pointer !important; background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%) !important; border: 1px solid rgba(148, 163, 184, 0.28) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; transition: all 0.2s ease !important; } .btn-site-quick:hover { background: linear-gradient(180deg, #27354D 0%, #172033 100%) !important; color: #FFFFFF !important; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important; } .btn-site-quick.btn-quick-ho { color: #FDA4AF !important; border-color: rgba(244, 63, 94, 0.4) !important; } .btn-site-quick.btn-quick-ho.active { background: linear-gradient(180deg, rgba(159, 18, 57, 0.55) 0%, rgba(136, 19, 55, 0.75) 100%) !important; border-color: #F43F5E !important; color: #FFFFFF !important; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55), 0 0 12px rgba(244, 63, 94, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } .btn-site-quick.btn-quick-mo { color: #FDE68A !important; border-color: rgba(245, 158, 11, 0.4) !important; } .btn-site-quick.btn-quick-mo.active { background: linear-gradient(180deg, rgba(146, 64, 14, 0.55) 0%, rgba(120, 53, 15, 0.75) 100%) !important; border-color: #F59E0B !important; color: #FFFFFF !important; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55), 0 0 12px rgba(245, 158, 11, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } .btn-site-quick.btn-quick-server { color: #BAE6FD !important; border-color: rgba(56, 189, 248, 0.4) !important; } .btn-site-quick.btn-quick-server.active { background: linear-gradient(180deg, rgba(3, 105, 161, 0.55) 0%, rgba(7, 89, 133, 0.75) 100%) !important; border-color: #38BDF8 !important; color: #FFFFFF !important; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55), 0 0 12px rgba(56, 189, 248, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } /* 8. Menu Lokasi - Selector Layer Peta (Google Maps & Satelit Asli) */ .map-layer-selector { display: inline-flex !important; align-items: center !important; background: #0B1120 !important; border: 1px solid rgba(148, 163, 184, 0.28) !important; border-radius: 8px !important; padding: 3px !important; gap: 3px !important; } .btn-layer-pill { min-height: 32px !important; padding: 6px 14px !important; border-radius: 6px !important; border: none !important; background: transparent !important; color: #94A3B8 !important; font-size: 0.78rem !important; font-weight: 600 !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; transition: all 0.2s ease !important; } .btn-layer-pill:hover { color: #FFFFFF !important; background: rgba(255, 255, 255, 0.08) !important; } .btn-layer-pill.active { background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%) !important; color: #38BDF8 !important; border: 1px solid rgba(56, 189, 248, 0.4) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } /* 9. Menu Lokasi - Denah Blueprint Selector (.btn-bp-choice) */ .site-blueprint-selector { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 12px !important; width: 100% !important; } .bp-sites-bar { display: inline-flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; } .bp-controls-bar { display: inline-flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; } .btn-bp-choice { min-height: 36px !important; padding: 8px 16px !important; border-radius: 8px !important; font-size: 0.79rem !important; font-weight: 600 !important; background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%) !important; border: 1px solid rgba(148, 163, 184, 0.28) !important; color: #CBD5E1 !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; transition: all 0.2s ease !important; } .btn-bp-choice:hover { background: linear-gradient(180deg, #27354D 0%, #172033 100%) !important; color: #FFFFFF !important; border-color: rgba(56, 189, 248, 0.45) !important; transform: translateY(-1px); } .btn-bp-choice.active { background: linear-gradient(180deg, #334155 0%, #1E293B 100%) !important; border-color: #00F0FF !important; color: #FFFFFF !important; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45), 0 0 12px rgba(0, 240, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } /* Warna Khusus Tombol Blueprint Sesuai Tempat / Site */ #btn-bp-ho { border: 1px solid rgba(239, 68, 68, 0.45) !important; color: #FCA5A5 !important; background: linear-gradient(180deg, rgba(239, 68, 68, 0.12) 0%, rgba(15, 23, 42, 0.9) 100%) !important; } #btn-bp-ho:hover { border-color: #EF4444 !important; color: #FFFFFF !important; background: linear-gradient(180deg, rgba(239, 68, 68, 0.25) 0%, rgba(185, 28, 28, 0.35) 100%) !important; box-shadow: 0 0 12px rgba(239, 68, 68, 0.35) !important; } #btn-bp-ho.active { border: 1.5px solid #EF4444 !important; color: #FFFFFF !important; background: linear-gradient(180deg, rgba(239, 68, 68, 0.38) 0%, rgba(185, 28, 28, 0.55) 100%) !important; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55), 0 0 16px rgba(239, 68, 68, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; } #btn-bp-mo { border: 1px solid rgba(245, 158, 11, 0.45) !important; color: #FDE68A !important; background: linear-gradient(180deg, rgba(245, 158, 11, 0.12) 0%, rgba(15, 23, 42, 0.9) 100%) !important; } #btn-bp-mo:hover { border-color: #F59E0B !important; color: #FFFFFF !important; background: linear-gradient(180deg, rgba(245, 158, 11, 0.25) 0%, rgba(180, 83, 9, 0.35) 100%) !important; box-shadow: 0 0 12px rgba(245, 158, 11, 0.35) !important; } #btn-bp-mo.active { border: 1.5px solid #F59E0B !important; color: #FFFFFF !important; background: linear-gradient(180deg, rgba(245, 158, 11, 0.38) 0%, rgba(180, 83, 9, 0.55) 100%) !important; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55), 0 0 16px rgba(245, 158, 11, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; } #btn-bp-mentor { border: 1px solid rgba(16, 185, 129, 0.45) !important; color: #A7F3D0 !important; background: linear-gradient(180deg, rgba(16, 185, 129, 0.12) 0%, rgba(15, 23, 42, 0.9) 100%) !important; } #btn-bp-mentor:hover { border-color: #10B981 !important; color: #FFFFFF !important; background: linear-gradient(180deg, rgba(16, 185, 129, 0.25) 0%, rgba(5, 150, 105, 0.35) 100%) !important; box-shadow: 0 0 12px rgba(16, 185, 129, 0.35) !important; } #btn-bp-mentor.active { border: 1.5px solid #10B981 !important; color: #FFFFFF !important; background: linear-gradient(180deg, rgba(16, 185, 129, 0.38) 0%, rgba(5, 150, 105, 0.55) 100%) !important; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55), 0 0 16px rgba(16, 185, 129, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; } /* 10. Filter & Reset Buttons (.btn-reset, .btn-csv, .btn-pdf, .btn-qr, .btn-danger-cyber) */ .btn-reset { background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%) !important; border: 1px solid rgba(148, 163, 184, 0.32) !important; color: #CBD5E1 !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } .btn-reset:hover { background: linear-gradient(180deg, #27354D 0%, #172033 100%) !important; border-color: rgba(148, 163, 184, 0.55) !important; color: #FFFFFF !important; transform: translateY(-1px); } .btn-csv { background: linear-gradient(180deg, rgba(16, 185, 129, 0.22) 0%, rgba(6, 78, 59, 0.35) 100%) !important; border: 1px solid rgba(16, 185, 129, 0.45) !important; color: #34D399 !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } .btn-csv:hover { background: linear-gradient(180deg, rgba(16, 185, 129, 0.35) 0%, rgba(6, 78, 59, 0.5) 100%) !important; border-color: #34D399 !important; color: #FFFFFF !important; transform: translateY(-1px); } .btn-pdf { background: linear-gradient(180deg, rgba(225, 29, 72, 0.22) 0%, rgba(136, 19, 55, 0.35) 100%) !important; border: 1px solid rgba(225, 29, 72, 0.45) !important; color: #FB7185 !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } .btn-pdf:hover { background: linear-gradient(180deg, rgba(225, 29, 72, 0.35) 0%, rgba(136, 19, 55, 0.5) 100%) !important; border-color: #FB7185 !important; color: #FFFFFF !important; transform: translateY(-1px); } .btn-danger-cyber { background: linear-gradient(180deg, rgba(225, 29, 72, 0.28) 0%, rgba(136, 19, 55, 0.45) 100%) !important; color: #FF2E63 !important; border: 1px solid rgba(255, 46, 99, 0.48) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; border-radius: 8px !important; cursor: pointer !important; transition: all 0.2s ease !important; } .btn-danger-cyber:hover { background: linear-gradient(180deg, rgba(225, 29, 72, 0.45) 0%, rgba(190, 18, 60, 0.6) 100%) !important; border-color: #FF2E63 !important; color: #FFFFFF !important; box-shadow: 0 4px 12px rgba(255, 46, 99, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; transform: translateY(-1px); } /* ========================================================================== v6.0.30 - Carbon Obsidian Table Styling (Anti-Dominan Biru & Garis Tajam) Menghilangkan dominasi warna biru pada tabel agar menyatu sempurna dengan background hitam pekat dashboard, garis grid kolom dan baris dipertahankan jelas & tegas dengan kontur platinum-charcoal, serta zebra-striping obsidian. ========================================================================== */ .data-table, .mockup-table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; border: 1.5px solid rgba(255, 255, 255, 0.18) !important; border-radius: 8px !important; overflow: hidden !important; font-size: 0.79rem !important; background: #0B0C10 !important; margin-bottom: 12px !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } .data-table thead, .mockup-table thead { background: linear-gradient(180deg, #171922 0%, #0E1015 100%) !important; } .data-table th, .mockup-table th { padding: 11px 14px !important; color: #FFFFFF !important; font-weight: 700 !important; font-size: 0.75rem !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; border-right: 1px solid rgba(255, 255, 255, 0.15) !important; border-bottom: 2px solid rgba(255, 255, 255, 0.22) !important; vertical-align: middle !important; background: transparent !important; } .data-table th:last-child, .mockup-table th:last-child { border-right: none !important; } .data-table tbody tr, .mockup-table tbody tr { transition: background 0.15s ease !important; } .data-table tbody tr:nth-child(odd), .mockup-table tbody tr:nth-child(odd) { background: rgba(18, 20, 26, 0.95) !important; } .data-table tbody tr:nth-child(even), .mockup-table tbody tr:nth-child(even) { background: rgba(10, 11, 15, 0.98) !important; } .data-table tbody tr:hover, .mockup-table tbody tr:hover { background: rgba(255, 255, 255, 0.06) !important; } .data-table td, .mockup-table td { padding: 10px 14px !important; color: #E2E8F0 !important; border-right: 1px solid rgba(255, 255, 255, 0.13) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.13) !important; vertical-align: middle !important; line-height: 1.45 !important; } .data-table td:last-child, .mockup-table td:last-child { border-right: none !important; } .data-table tbody tr:last-child td, .mockup-table tbody tr:last-child td { border-bottom: none !important; } /* Modal Kelola Lokasi Specific Styling */ #loc-manager-modal .data-table { margin-top: 6px !important; margin-bottom: 16px !important; } #loc-manager-modal .data-table td strong { color: #FFFFFF !important; font-weight: 700 !important; font-size: 0.84rem !important; } #loc-manager-modal .data-table td .font-mono { color: #FDE68A !important; background: rgba(245, 158, 11, 0.12) !important; padding: 3px 8px !important; border-radius: 4px !important; border: 1px solid rgba(245, 158, 11, 0.35) !important; display: inline-block !important; letter-spacing: 0.3px !important; font-size: 0.78rem !important; font-weight: 600 !important; } #loc-manager-modal .btn-icon-sm { width: 32px !important; height: 32px !important; border-radius: 6px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 0.85rem !important; background: rgba(30, 41, 59, 0.8) !important; border: 1px solid rgba(148, 163, 184, 0.35) !important; box-shadow: 0 2px 5px rgba(0,0,0,0.4) !important; transition: all 0.2s ease !important; } #loc-manager-modal .btn-icon-sm:hover { transform: translateY(-1px) !important; box-shadow: 0 3px 8px rgba(0,0,0,0.5) !important; } /* ========================================================================== v6.0.27 - Fix Kelola Lokasi Modal & Form-Row-2 Anti-Cutoff Layout ========================================================================== */ .form-row-2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; } #loc-manager-modal .modal-card { max-width: 760px !important; max-height: 90vh !important; height: auto !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #loc-manager-modal .modal-body { flex: 0 1 auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding: 16px 22px 18px 22px !important; } #loc-manager-modal .loc-table-wrap { max-height: 195px !important; overflow-y: auto !important; border-radius: 8px !important; border: 1.5px solid rgba(148, 163, 184, 0.45) !important; margin-bottom: 16px !important; } #loc-manager-modal .loc-table-wrap .data-table { margin: 0 !important; border: none !important; border-radius: 0 !important; } #loc-manager-modal form { display: block !important; overflow: visible !important; flex: none !important; min-height: auto !important; margin-top: 8px !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } #loc-manager-modal .form-group { margin-bottom: 10px !important; } #loc-manager-modal .form-group label { font-size: 0.78rem !important; font-weight: 700 !important; color: #CBD5E1 !important; margin-bottom: 4px !important; display: block !important; } #loc-manager-modal .form-group input { width: 100% !important; height: 38px !important; padding: 7px 12px !important; font-size: 0.82rem !important; background: rgba(10, 14, 26, 0.85) !important; border: 1px solid rgba(0, 240, 255, 0.35) !important; border-radius: 6px !important; color: #F1F5F9 !important; box-sizing: border-box !important; } /* ========================================================================== v6.0.28 - Grouped Location Header Toolbar & Multi-Color Button System Anti-Dominan Biru: Merah (HO), Kuning (MO/Kelola), Hijau (Server), Ungu (Denah), Cyan (GIS) ========================================================================== */ #page-location .location-page-header { margin-bottom: 14px !important; } #page-location .loc-toolbar-row { display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; padding-top: 10px !important; border-top: 1px solid rgba(148, 163, 184, 0.18) !important; width: 100% !important; } /* Grup 1: Tab Modul Tampilan (Kiri) */ #page-location .loc-tab-switcher { display: inline-flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; border: none !important; } /* Grup 2: Navigasi Titik & Layer (Kanan) */ #page-location .loc-nav-group-right { display: inline-flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; margin-left: auto !important; } #page-location .site-quick-nav-bar { display: inline-flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; } /* WARNA KHUSUS TOMBOL (ANTI DOMINAN BIRU) */ /* 1. Tombol GIS (Cyan Neon Terfokus) */ .loc-tab-btn.loc-tab-gis i, #tab-btn-gis i { color: #00F0FF !important; } .loc-tab-btn.loc-tab-gis.active, #tab-btn-gis.active { background: linear-gradient(180deg, #164E63 0%, #0E3443 100%) !important; border: 1.5px solid #00F0FF !important; color: #FFFFFF !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 240, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; } /* 2. Tombol Denah Bangunan (Ungu / Violet Blueprint Arsitektur) */ .loc-tab-btn.loc-tab-floor i, #tab-btn-floor i { color: #C084FC !important; } .loc-tab-btn.loc-tab-floor, #tab-btn-floor { border-color: rgba(168, 85, 247, 0.45) !important; } .loc-tab-btn.loc-tab-floor:hover, #tab-btn-floor:hover { border-color: #C084FC !important; background: linear-gradient(180deg, #3B1C54 0%, #220F33 100%) !important; color: #FFFFFF !important; } .loc-tab-btn.loc-tab-floor.active, #tab-btn-floor.active { background: linear-gradient(180deg, #581C87 0%, #3B0764 100%) !important; border: 1.5px solid #A855F7 !important; color: #FFFFFF !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 14px rgba(168, 85, 247, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; } /* 3. Tombol Kelola Lokasi (Emas / Kuning Amber Berwibawa) */ .loc-tab-btn.loc-tab-manage, #btn-loc-manager { background: linear-gradient(180deg, rgba(245, 158, 11, 0.18) 0%, rgba(180, 83, 9, 0.3) 100%) !important; border: 1.5px solid rgba(245, 158, 11, 0.65) !important; color: #FDE68A !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } .loc-tab-btn.loc-tab-manage i, #btn-loc-manager i { color: #FBBF24 !important; } .loc-tab-btn.loc-tab-manage:hover, #btn-loc-manager:hover { background: linear-gradient(180deg, #D97706 0%, #B45309 100%) !important; border-color: #FBBF24 !important; color: #FFFFFF !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 14px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; transform: translateY(-1px) !important; } .loc-tab-btn.loc-tab-manage:hover i, #btn-loc-manager:hover i { color: #FFFFFF !important; } /* 4. Site 1: Kantor Pusat (HO) - Merah Teknolab */ .btn-site-quick.btn-quick-ho { border-color: rgba(244, 63, 94, 0.5) !important; color: #FDA4AF !important; } .btn-site-quick.btn-quick-ho i { color: #FB7185 !important; } .btn-site-quick.btn-quick-ho.active { background: linear-gradient(180deg, #9F1239 0%, #881337 100%) !important; border: 1.5px solid #F43F5E !important; color: #FFFFFF !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 14px rgba(244, 63, 94, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } .btn-site-quick.btn-quick-ho.active i { color: #FFFFFF !important; } /* 5. Site 2: Marketing Office (MO) - Kuning Emas */ .btn-site-quick.btn-quick-mo { border-color: rgba(245, 158, 11, 0.5) !important; color: #FDE68A !important; } .btn-site-quick.btn-quick-mo i { color: #FBBF24 !important; } .btn-site-quick.btn-quick-mo.active { background: linear-gradient(180deg, #92400E 0%, #78350F 100%) !important; border: 1.5px solid #F59E0B !important; color: #FFFFFF !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 14px rgba(245, 158, 11, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } .btn-site-quick.btn-quick-mo.active i { color: #FFFFFF !important; } /* 6. Site 3: House Of Server - Hijau Emerald (Bukan Biru!) */ .btn-site-quick.btn-quick-server { border-color: rgba(16, 185, 129, 0.5) !important; color: #A7F3D0 !important; } .btn-site-quick.btn-quick-server i { color: #34D399 !important; } .btn-site-quick.btn-quick-server.active { background: linear-gradient(180deg, #065F46 0%, #064E3B 100%) !important; border: 1.5px solid #10B981 !important; color: #FFFFFF !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 14px rgba(16, 185, 129, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } .btn-site-quick.btn-quick-server.active i { color: #FFFFFF !important; } /* 7. Layer Selector (Google Maps & Satelit Asli) - Kontras Abu Graphite Elegan */ .map-layer-selector { background: #0B0F19 !important; border: 1.5px solid rgba(148, 163, 184, 0.3) !important; border-radius: 8px !important; padding: 3px !important; display: inline-flex !important; align-items: center !important; gap: 3px !important; } .btn-layer-pill { color: #94A3B8 !important; background: transparent !important; border: none !important; } .btn-layer-pill i { color: #94A3B8 !important; } .btn-layer-pill.active { background: linear-gradient(180deg, #334155 0%, #1E293B 100%) !important; color: #FFFFFF !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } .btn-layer-pill.active i { color: #FFFFFF !important; } /* ========================================================================== v6.0.29 - Vibrant Glowing Icon & Tactile Button Suite (Per Reference Image) Tombol berbobot gelap dengan ikon berwarna cerah menyala (glow drop-shadow) Persis seperti contoh: Merah, Oranye, Kuning Emas, Hijau, Cyan, dan Ungu. ========================================================================== */ /* 1. Pengaturan Dasar Tombol Tab & Button (Elevated Charcoal Slate) */ .loc-tab-btn, .btn-site-quick, .btn-sm, .btn { font-weight: 700 !important; letter-spacing: 0.2px !important; color: #FFFFFF !important; } .loc-tab-btn i, .btn-site-quick i, .btn i { font-size: 0.95rem !important; transition: transform 0.2s ease, filter 0.2s ease !important; } .loc-tab-btn:hover i, .btn-site-quick:hover i, .btn:hover i { transform: scale(1.1) !important; } /* 2. Sub-Tab Menu Pengaturan (Persis Sesuai Gambar Referensi User) */ #tab-btn-set-engine i { color: #FF1744 !important; filter: drop-shadow(0 0 8px rgba(255, 23, 68, 0.95)) !important; } #tab-btn-set-notif i { color: #F97316 !important; filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.95)) !important; } #tab-btn-set-sim i { color: #FFD600 !important; filter: drop-shadow(0 0 8px rgba(255, 214, 0, 0.95)) !important; } #tab-btn-set-db i { color: #00FF9D !important; filter: drop-shadow(0 0 8px rgba(0, 255, 157, 0.95)) !important; } /* 3. Sub-Tab Menu Pengguna (#page-users) */ #tab-btn-users-rbac i { color: #00F0FF !important; filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.9)) !important; } #tab-btn-users-team i { color: #C084FC !important; filter: drop-shadow(0 0 8px rgba(192, 132, 252, 0.9)) !important; } #tab-btn-users-audit i { color: #FFD600 !important; filter: drop-shadow(0 0 8px rgba(255, 214, 0, 0.9)) !important; } /* 4. Sub-Tab & Tombol Menu Lokasi (#page-location) */ #tab-btn-gis i { color: #00F0FF !important; filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.9)) !important; } #tab-btn-floor i { color: #C084FC !important; filter: drop-shadow(0 0 8px rgba(192, 132, 252, 0.9)) !important; } #btn-loc-manager i { color: #FFD600 !important; filter: drop-shadow(0 0 8px rgba(255, 214, 0, 0.9)) !important; } #btn-zoom-ho i { color: #FF1744 !important; filter: drop-shadow(0 0 8px rgba(255, 23, 68, 0.9)) !important; } #btn-zoom-mo i { color: #FFD600 !important; filter: drop-shadow(0 0 8px rgba(255, 214, 0, 0.9)) !important; } #btn-zoom-server i { color: #00FF9D !important; filter: drop-shadow(0 0 8px rgba(0, 255, 157, 0.9)) !important; } #btn-layer-roads i { color: #38BDF8 !important; filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.85)) !important; } #btn-layer-sat i { color: #F1F5F9 !important; filter: drop-shadow(0 0 6px rgba(241, 245, 249, 0.8)) !important; } /* 5. Tombol Menu Jaringan (#page-monitoring) */ button[onclick*="triggerManualPingSweep"] i { color: #00F0FF !important; filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.9)) !important; } #btn-toggle-stream i { color: #F97316 !important; filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.9)) !important; } button[onclick*="clearNocTerminal"] i { color: #FF4D6D !important; filter: drop-shadow(0 0 8px rgba(255, 77, 109, 0.9)) !important; } /* 6. Tombol Menu Peringatan (#page-alerts) */ button[onclick*="testNotificationAlert"] i { color: #00F0FF !important; filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.95)) !important; } button[onclick*="exportIncidentsCsv"] i { color: #00FF9D !important; filter: drop-shadow(0 0 8px rgba(0, 255, 157, 0.9)) !important; } button[onclick*="markAllAlertsRead"] i { color: #FFD600 !important; filter: drop-shadow(0 0 8px rgba(255, 214, 0, 0.9)) !important; } button[onclick*="handleRefreshAndCleanIncidents(true)"] i { color: #FF1744 !important; filter: drop-shadow(0 0 8px rgba(255, 23, 68, 0.9)) !important; } button[onclick*="handleRefreshAndCleanIncidents(false)"] i { color: #00F0FF !important; filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.9)) !important; } /* 7. Tombol Menu Laporan (#page-reports) */ button[onclick*="exportReport(\'PDF\')"] i, button[onclick*="exportReport('PDF')"] i { color: #FF1744 !important; filter: drop-shadow(0 0 8px rgba(255, 23, 68, 0.9)) !important; } button[onclick*="exportReport(\'Excel\')"] i, button[onclick*="exportReport('Excel')"] i { color: #00FF9D !important; filter: drop-shadow(0 0 8px rgba(0, 255, 157, 0.9)) !important; } button[onclick*="window.print()"] i { color: #00F0FF !important; filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.9)) !important; } button[onclick*="openTelegramModal"] i { color: #00F0FF !important; filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.9)) !important; } button[onclick*="openAiHistoryModal"] i { color: #FFD600 !important; filter: drop-shadow(0 0 8px rgba(255, 214, 0, 0.9)) !important; } button[onclick*="copyAiReportToClipboard"] i { color: #C084FC !important; filter: drop-shadow(0 0 8px rgba(192, 132, 252, 0.9)) !important; } /* Paginasi Riwayat AI Base Desktop (Sejajar Horisontal) */ .ai-history-pagination { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; padding: 12px 6px 4px 6px !important; margin-top: 10px !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; width: 100% !important; box-sizing: border-box !important; gap: 8px !important; } .ai-history-pagination .ai-page-btn { padding: 6px 14px !important; min-height: 34px !important; height: 34px !important; font-size: 0.76rem !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; white-space: nowrap !important; box-sizing: border-box !important; border-radius: 6px !important; flex-shrink: 0 !important; } .ai-history-pagination .ai-page-info { font-size: 0.76rem !important; color: #94A3B8 !important; font-weight: 600 !important; white-space: nowrap !important; text-align: center !important; flex-shrink: 0 !important; } .ai-history-pagination .page-text-desktop { display: inline !important; } .ai-history-pagination .page-text-mobile { display: none !important; } /* Modal Pemulihan Kata Sandi Harus Selalu di Atas Halaman Login (#auth-screen) */ #forgot-password-modal { z-index: 100000000 !important; } #forgot-password-modal .modal-card { z-index: 100000001 !important; } button[onclick*="runAiAnalysis"] i { color: #FFD600 !important; filter: drop-shadow(0 0 8px rgba(255, 214, 0, 0.95)) !important; } button[onclick*="openAddMaintenanceModal"] i { color: #00FF9D !important; filter: drop-shadow(0 0 8px rgba(0, 255, 157, 0.9)) !important; } /* 8. Tombol Unduh Basis Data (Pengaturan -> Database) */ button[onclick*="downloadDatabaseSqlBackup"] i { color: #00FF9D !important; filter: drop-shadow(0 0 8px rgba(0, 255, 157, 0.95)) !important; } button[onclick*="exportDatabaseSnapshot"] i { color: #FFD600 !important; filter: drop-shadow(0 0 8px rgba(255, 214, 0, 0.95)) !important; } /* 9. Tombol Rekam Jejak Audit (Pengguna -> Audit) */ button[onclick*="exportAuditLogsCsv"] i { color: #00FF9D !important; filter: drop-shadow(0 0 8px rgba(0, 255, 157, 0.9)) !important; } #btn-reset-audit-logs i { color: #FF1744 !important; filter: drop-shadow(0 0 8px rgba(255, 23, 68, 0.9)) !important; } /* ========================================================================== HILANGKAN BACKGROUND PUTIH PADA SEMUA BENTUK PANAH ATAS-BAWAH (SPIN BUTTONS) ========================================================================== */ :root { color-scheme: dark; } html, body, input, select, textarea, button { color-scheme: dark !important; } /* Hilangkan background putih pada spinner panah atas-bawah (Chromium / WebKit) */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; cursor: pointer; opacity: 0.65; transition: opacity 0.2s ease; } input[type="number"]::-webkit-inner-spin-button:hover, input[type="number"]::-webkit-outer-spin-button:hover { opacity: 1; } input[type="number"] { color-scheme: dark !important; } /* ========================================================================== TRANSPARENT SCROLLBAR SUITE (100% Transparan & Clean Minimalist) Menjadikan seluruh track scrollbar 100% transparan tanpa garis latar belakang, dengan thumb semi-transparan tipis yang menyatu halus dengan tema gelap. ========================================================================== */ /* Standar W3C (Firefox & Modern Browsers) */ * { scrollbar-width: thin !important; scrollbar-color: rgba(255, 255, 255, 0.15) transparent !important; } /* WebKit / Chromium Global Scrollbar */ ::-webkit-scrollbar, *::-webkit-scrollbar { width: 6px !important; height: 6px !important; background: transparent !important; } ::-webkit-scrollbar-track, *::-webkit-scrollbar-track { background: transparent !important; background-color: transparent !important; border: none !important; } ::-webkit-scrollbar-thumb, *::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15) !important; background-color: rgba(255, 255, 255, 0.15) !important; border-radius: 999px !important; border: none !important; transition: background 0.2s ease, background-color 0.2s ease; } ::-webkit-scrollbar-thumb:hover, *::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35) !important; background-color: rgba(255, 255, 255, 0.35) !important; } ::-webkit-scrollbar-corner, *::-webkit-scrollbar-corner { background: transparent !important; background-color: transparent !important; } /* Override spesifik untuk seluruh kontainer scroll internal agar 100% transparan */ .table-responsive::-webkit-scrollbar-track, .mockup-table::-webkit-scrollbar-track, .data-table::-webkit-scrollbar-track, .maintenance-table-wrap::-webkit-scrollbar-track, #devices-table-view::-webkit-scrollbar-track, #full-alerts-container::-webkit-scrollbar-track, .full-alerts-list::-webkit-scrollbar-track, .modal-body::-webkit-scrollbar-track, .modal-backdrop::-webkit-scrollbar-track, .donut-legend-col::-webkit-scrollbar-track, .page-view::-webkit-scrollbar-track, .chart-scrollable::-webkit-scrollbar-track, .terminal-body::-webkit-scrollbar-track, .terminal-window::-webkit-scrollbar-track, .history-list::-webkit-scrollbar-track { background: transparent !important; background-color: transparent !important; } .table-responsive::-webkit-scrollbar-thumb, .mockup-table::-webkit-scrollbar-thumb, .data-table::-webkit-scrollbar-thumb, .maintenance-table-wrap::-webkit-scrollbar-thumb, #devices-table-view::-webkit-scrollbar-thumb, #full-alerts-container::-webkit-scrollbar-thumb, .full-alerts-list::-webkit-scrollbar-thumb, .modal-body::-webkit-scrollbar-thumb, .modal-backdrop::-webkit-scrollbar-thumb, .donut-legend-col::-webkit-scrollbar-thumb, .page-view::-webkit-scrollbar-thumb, .chart-scrollable::-webkit-scrollbar-thumb, .terminal-body::-webkit-scrollbar-thumb, .terminal-window::-webkit-scrollbar-thumb, .history-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15) !important; background-color: rgba(255, 255, 255, 0.15) !important; border-radius: 999px !important; border: none !important; } .table-responsive::-webkit-scrollbar-thumb:hover, .mockup-table::-webkit-scrollbar-thumb:hover, .data-table::-webkit-scrollbar-thumb:hover, .maintenance-table-wrap::-webkit-scrollbar-thumb:hover, #devices-table-view::-webkit-scrollbar-thumb:hover, #full-alerts-container::-webkit-scrollbar-thumb:hover, .full-alerts-list::-webkit-scrollbar-thumb:hover, .modal-body::-webkit-scrollbar-thumb:hover, .modal-backdrop::-webkit-scrollbar-thumb:hover, .donut-legend-col::-webkit-scrollbar-thumb:hover, .page-view::-webkit-scrollbar-thumb:hover, .chart-scrollable::-webkit-scrollbar-thumb:hover, .terminal-body::-webkit-scrollbar-thumb:hover, .terminal-window::-webkit-scrollbar-thumb:hover, .history-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35) !important; background-color: rgba(255, 255, 255, 0.35) !important; } /* Hilangkan tombol zoom +/- bawaan Leaflet sesuai permintaan user */ .leaflet-control-zoom { display: none !important; } /* ========================================================================== PERBAIKAN RESPONSIVE MENYELURUH: ANTI-CUTOFF DASHBOARD, CHARTS & LEGEND Menghilangkan overflow horizontal, mencegah tepi kartu/border terpotong, dan memastikan legenda donat & tren grafik selalu tampil utuh & presisi. ========================================================================== */ /* 1. KONTROL OVERFLOW GLOBAL & KONTAINER UTAMA */ html, body { overflow-x: hidden !important; max-width: 100vw !important; } .app-layout { max-width: 100vw !important; overflow-x: hidden !important; } .main-content { overflow-x: hidden !important; max-width: 100% !important; min-width: 0 !important; width: auto !important; } .content-container { max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } .page-view { max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } /* 2. TOPBAR RESPONSIVE & ANTI-PUSH */ .topbar { max-width: 100% !important; overflow: hidden !important; box-sizing: border-box !important; } .topbar-left { min-width: 0 !important; flex: 0 1 auto !important; overflow: hidden !important; } .topbar-left .search-container { min-width: 0 !important; max-width: 240px !important; } .topbar-right { min-width: 0 !important; flex-shrink: 0 !important; gap: 8px !important; } @media (max-width: 1200px) { .live-clock-pill .clock-divider, .live-clock-pill .calendar-emoji, .live-clock-pill #live-date { display: none !important; } .user-profile-pill .profile-info { display: none !important; } .user-profile-pill { padding: 4px 6px !important; } } /* 3. KPI GRID RESPONSIF PROPORSIONAL */ @media (max-width: 640px) { .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } } @media (min-width: 641px) and (max-width: 1200px) { .kpi-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; } } @media (min-width: 1201px) { .kpi-grid { grid-template-columns: repeat(6, 1fr) !important; gap: 10px !important; } } /* 4. CHARTS ROW (TREN & KATEGORI DONUT) ANTI KEPOTONG */ @media (max-width: 1180px) { .charts-row { grid-template-columns: 1fr !important; gap: 14px !important; } .bottom-three-grid { grid-template-columns: 1fr !important; gap: 14px !important; } } @media (min-width: 1181px) { .charts-row { grid-template-columns: 1.6fr 1.4fr !important; gap: 12px !important; } .bottom-three-grid { grid-template-columns: 1.5fr 1fr 1fr !important; gap: 12px !important; } } /* 5. TREN STATUS PERANGKAT: CANVAS & CONTROLS */ .trend-card .chart-body { box-sizing: border-box !important; padding: 10px 14px !important; width: 100% !important; overflow: hidden !important; } /* 6. DISTRIBUSI KATEGORI PERANGKAT: DONUT & 2-KOLOM LEGENDA UTUH */ .donut-card .donut-body { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 20px !important; padding: 12px 18px !important; box-sizing: border-box !important; overflow: hidden !important; min-height: 200px !important; } .donut-card .donut-visual-wrap { flex-shrink: 0 !important; width: 135px !important; height: 135px !important; position: relative !important; } .donut-card .donut-legend-col, #donut-legend-container { flex: 1 1 0 !important; min-width: 0 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4px 12px !important; font-size: 0.72rem !important; overflow: hidden !important; } .donut-card .d-leg-row { display: flex !important; justify-content: space-between !important; align-items: center !important; min-width: 0 !important; gap: 6px !important; padding: 3px 6px !important; background: rgba(255, 255, 255, 0.025) !important; border-radius: 4px !important; } .donut-card .d-leg-name { display: flex !important; align-items: center !important; gap: 5px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important; font-size: 0.72rem !important; color: #E2E8F0 !important; font-weight: 500 !important; } .donut-card .d-leg-val { white-space: nowrap !important; flex-shrink: 0 !important; font-size: 0.7rem !important; } .donut-card .d-leg-val strong { color: #FFFFFF !important; margin-right: 2px !important; } .donut-card .d-leg-val small { color: #94A3B8 !important; } /* Pada layar sempit (Mobile < 520px): Donut di atas, Legend 2 kolom di bawah */ @media (max-width: 520px) { .donut-card { height: auto !important; min-height: auto !important; max-height: none !important; } .donut-card .donut-body { height: auto !important; min-height: auto !important; max-height: none !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 14px !important; padding: 14px 12px 18px 12px !important; } .donut-card .donut-visual-wrap { width: 140px !important; height: 140px !important; margin: 0 auto !important; } .donut-card .donut-legend-col, #donut-legend-container { width: 100% !important; gap: 6px 10px !important; max-height: none !important; overflow: visible !important; } .donut-card .d-leg-name { font-size: 0.68rem !important; } .donut-card .d-leg-val { font-size: 0.68rem !important; } } /* 7. TABLE RESPONSIVE WRAPPER INTERNAL SCROLL */ .table-responsive { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; display: block !important; box-sizing: border-box !important; -webkit-overflow-scrolling: touch !important; } /* ========================================================================== WARNA KONSISTEN STAT-CARD PADA HALAMAN PERINGATAN (#page-alerts) Menyelaraskan warna border atas dan glow kartu persis 100% dengan warna ikon dan teks konten di dalamnya: Card 1: OPEN INCIDENTS -> MERAH (#FF1744) Card 2: UNDER INVESTIGATION -> KUNING (#FFD600) Card 3: RESOLVED INCIDENTS -> HIJAU (#00FF9D) Card 4: DISPATCHED ALERTS -> CYAN (#00F0FF) ========================================================================== */ #page-alerts .stats-overview-grid .stat-card:nth-child(1), #page-alerts .stat-card.stat-card-open { border: 1.5px solid rgba(255, 23, 68, 0.45) !important; border-top: 3.5px solid #FF1744 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -2px 14px rgba(255, 23, 68, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } #page-alerts .stat-card.stat-card-open .stat-icon-wrap { background: rgba(225, 29, 72, 0.15) !important; border-color: rgba(255, 23, 68, 0.35) !important; color: #FF1744 !important; } #page-alerts .stat-card.stat-card-open .stat-icon-wrap i { color: #FF1744 !important; } #page-alerts .stats-overview-grid .stat-card:nth-child(2), #page-alerts .stat-card.stat-card-investigating { border: 1.5px solid rgba(255, 214, 0, 0.45) !important; border-top: 3.5px solid #FFD600 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -2px 14px rgba(255, 214, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } #page-alerts .stat-card.stat-card-investigating .stat-icon-wrap { background: rgba(245, 158, 11, 0.15) !important; border-color: rgba(255, 214, 0, 0.35) !important; color: #FFD600 !important; } #page-alerts .stat-card.stat-card-investigating .stat-icon-wrap i { color: #FFD600 !important; } #page-alerts .stats-overview-grid .stat-card:nth-child(3), #page-alerts .stat-card.stat-card-resolved { border: 1.5px solid rgba(0, 255, 157, 0.45) !important; border-top: 3.5px solid #00FF9D !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -2px 14px rgba(0, 255, 157, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } #page-alerts .stat-card.stat-card-resolved .stat-icon-wrap { background: rgba(16, 185, 129, 0.15) !important; border-color: rgba(0, 255, 157, 0.35) !important; color: #00FF9D !important; } #page-alerts .stat-card.stat-card-resolved .stat-icon-wrap i { color: #00FF9D !important; } #page-alerts .stats-overview-grid .stat-card:nth-child(4), #page-alerts .stat-card.stat-card-dispatched { border: 1.5px solid rgba(226, 232, 240, 0.40) !important; border-top: 3.5px solid #F8FAFC !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -2px 14px rgba(248, 250, 252, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } #page-alerts .stat-card.stat-card-dispatched .stat-icon-wrap { background: rgba(248, 250, 252, 0.12) !important; border-color: rgba(248, 250, 252, 0.35) !important; color: #FFFFFF !important; } #page-alerts .stat-card.stat-card-dispatched .stat-icon-wrap i { color: #FFFFFF !important; } #page-alerts .stat-card.stat-card-dispatched .stat-val { color: #FFFFFF !important; } /* ========================================================================== v6.0.31 - MOBILE VIEW ENHANCEMENT: #page-location TOOLBAR & TABS Tampilan tombol rapi, simetris, terstruktur, touch-friendly di smartphone Anti jagged-wrap, anti overflow, tidak ada tombol yang terpotong ke kanan. ========================================================================== */ @media (max-width: 900px) { .d-none-mobile { display: none !important; } #page-location .loc-toolbar-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; padding-top: 10px !important; width: 100% !important; } /* 1. Modul Switcher: Grid 2-kolom 50/50 untuk Peta GIS & Denah Bangunan */ #page-location .loc-tab-switcher { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; width: 100% !important; } #page-location .loc-tab-switcher #tab-btn-gis, #page-location .loc-tab-switcher #tab-btn-floor { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 6px !important; padding: 9px 8px !important; font-size: 0.78rem !important; border-radius: 8px !important; box-sizing: border-box !important; white-space: nowrap !important; } /* Tombol Kelola Lokasi: Rentang penuh 100% lebar (span 2 kolom) */ #page-location .loc-tab-switcher #btn-loc-manager { grid-column: 1 / -1 !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 8px !important; padding: 9px 12px !important; font-size: 0.8rem !important; border-radius: 8px !important; box-sizing: border-box !important; } /* 2. Navigasi Titik & Layer */ #page-location .loc-nav-group-right { display: flex !important; flex-direction: column !important; width: 100% !important; margin-left: 0 !important; gap: 8px !important; } /* Site Quick Nav: 3 kolom seimbang sama rata (Head Office | Marketing | Server) */ #page-location .site-quick-nav-bar { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; width: 100% !important; gap: 6px !important; } #page-location .btn-site-quick { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 5px !important; padding: 8px 4px !important; font-size: 0.73rem !important; white-space: nowrap !important; border-radius: 8px !important; box-sizing: border-box !important; overflow: hidden !important; text-overflow: ellipsis !important; } #page-location .btn-site-quick i { font-size: 0.82rem !important; } /* Map Layer Selector: 2 kolom 50/50 sama lebar */ #page-location .map-layer-selector { display: grid !important; grid-template-columns: 1fr 1fr !important; width: 100% !important; gap: 6px !important; padding: 4px !important; border-radius: 8px !important; box-sizing: border-box !important; } #page-location .btn-layer-pill { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 6px !important; padding: 7px 8px !important; font-size: 0.75rem !important; border-radius: 6px !important; box-sizing: border-box !important; } } /* ========================================================================== v6.0.31 - SLEEK CYBER-TABLE DENSITY ENHANCEMENT (DESKTOP 100% & GLOBAL) Mengatasi tabel yang terlalu besar & tinggi pada laptop resolusi 100% zoom. Padding diperkecil proporsional, row-height ramping, badge & font presisi, sehingga 7-10 baris muat nyaman dalam layar tanpa scroll berlebihan. ========================================================================== */ .data-table, .mockup-table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; border: 1.5px solid rgba(255, 255, 255, 0.16) !important; border-radius: 8px !important; overflow: hidden !important; font-size: 0.74rem !important; background: #0B0C10 !important; margin-bottom: 10px !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } .data-table thead, .mockup-table thead { background: linear-gradient(180deg, #171922 0%, #0E1015 100%) !important; } .data-table th, .mockup-table th { padding: 7px 10px !important; color: #94A3B8 !important; font-weight: 700 !important; font-size: 0.68rem !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; border-right: 1px solid rgba(255, 255, 255, 0.12) !important; border-bottom: 1.5px solid rgba(255, 255, 255, 0.2) !important; vertical-align: middle !important; background: transparent !important; line-height: 1.25 !important; box-sizing: border-box !important; } .data-table th:last-child, .mockup-table th:last-child { border-right: none !important; } .data-table tbody tr, .mockup-table tbody tr { transition: background 0.15s ease !important; } .data-table tbody tr:nth-child(odd), .mockup-table tbody tr:nth-child(odd) { background: rgba(18, 20, 26, 0.95) !important; } .data-table tbody tr:nth-child(even), .mockup-table tbody tr:nth-child(even) { background: rgba(10, 11, 15, 0.98) !important; } .data-table tbody tr:hover, .mockup-table tbody tr:hover { background: rgba(255, 255, 255, 0.06) !important; } .data-table td, .mockup-table td, .maintenance-table-wrap td { padding: 6px 10px !important; color: #CBD5E1 !important; font-size: 0.74rem !important; border-right: 1px solid rgba(255, 255, 255, 0.1) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; vertical-align: middle !important; line-height: 1.3 !important; box-sizing: border-box !important; } .data-table td:last-child, .mockup-table td:last-child { border-right: none !important; } .data-table tbody tr:last-child td, .mockup-table tbody tr:last-child td { border-bottom: none !important; } .data-table td strong, .mockup-table td strong { font-size: 0.76rem !important; font-weight: 700 !important; color: #FFFFFF !important; } .data-table td .text-xs, .mockup-table td .text-xs { font-size: 0.67rem !important; line-height: 1.2 !important; } /* Status-pill kompak di dalam tabel agar baris tidak melar tinggi */ .data-table .status-pill, .mockup-table .status-pill, .status-pill { padding: 2px 7px !important; font-size: 0.68rem !important; font-weight: 600 !important; line-height: 1.2 !important; gap: 4px !important; border-radius: 9999px !important; } .data-table .status-pill .dot, .mockup-table .status-pill .dot, .status-pill .dot { width: 5px !important; height: 5px !important; } /* Badge kode aset & badge subtle dalam tabel */ .data-table .badge-subtle, .mockup-table .badge-subtle, .badge-subtle { padding: 2px 6px !important; font-size: 0.68rem !important; } /* Action button dalam sel tabel */ .data-table td .btn, .data-table td .btn-sm, .mockup-table td .btn, .mockup-table td .btn-sm { padding: 3px 7px !important; font-size: 0.68rem !important; line-height: 1.2 !important; border-radius: 4px !important; } /* ========================================================================== v6.0.33 - HILANGKAN TOMBOL MENU GARIS 3 (HAMBURGER) DI MODE DESKTOP Sidebar utama di desktop tetap ada dan tampil normal di sisi kiri. Tombol garis 3 ([☰]) hanya dimunculkan di mode mobile (smartphone). ========================================================================== */ @media (min-width: 901px) { /* Sembunyikan tombol garis 3 (hamburger icon) di desktop */ .mobile-toggle-btn, #sidebar-toggle-btn { display: none !important; } /* Pastikan sidebar tetap tampil normal dan kokoh di sisi kiri pada desktop */ .sidebar { position: sticky !important; top: 0 !important; left: 0 !important; width: 250px !important; min-width: 250px !important; max-width: 250px !important; height: 100vh !important; flex-shrink: 0 !important; display: flex !important; flex-direction: column !important; visibility: visible !important; opacity: 1 !important; margin-left: 0 !important; z-index: 100 !important; box-shadow: none !important; } .main-content { flex: 1 !important; min-width: 0 !important; width: calc(100vw - 250px) !important; max-width: calc(100vw - 250px) !important; margin-left: 0 !important; } .sidebar-overlay { display: none !important; } } @media (max-width: 900px) { /* Di smartphone / mobile, tombol garis 3 muncul untuk membuka drawer sidebar */ .mobile-toggle-btn, #sidebar-toggle-btn { display: inline-flex !important; } } /* ========================================================================== v6.0.32 - 2. WARNA LOKASI SITE MENGIKUTI TEMA PETA GIS (GAMBAR 2) Head Office: Merah Teknolab (#F43F5E / #FB7185) Marketing Office: Kuning Emas (#F59E0B / #FBBF24) House Of Server: Hijau Emerald (#10B981 / #34D399) ========================================================================== */ .badge-subtle.badge-site-ho { color: #FDA4AF !important; background: rgba(244, 63, 94, 0.14) !important; border: 1px solid rgba(244, 63, 94, 0.40) !important; font-weight: 600 !important; } .badge-subtle.badge-site-ho i { color: #F43F5E !important; filter: drop-shadow(0 0 6px rgba(244, 63, 94, 0.7)) !important; } .badge-subtle.badge-site-mo { color: #FDE68A !important; background: rgba(245, 158, 11, 0.14) !important; border: 1px solid rgba(245, 158, 11, 0.40) !important; font-weight: 600 !important; } .badge-subtle.badge-site-mo i { color: #FBBF24 !important; filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.7)) !important; } .badge-subtle.badge-site-server { color: #A7F3D0 !important; background: rgba(16, 185, 129, 0.14) !important; border: 1px solid rgba(16, 185, 129, 0.40) !important; font-weight: 600 !important; } .badge-subtle.badge-site-server i { color: #10B981 !important; filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.7)) !important; } /* ========================================================================== v6.0.32 - 3. BORDER PENUH KOTAK MENGIKUTI WARNA TEMANYA (GAMBAR 3) Anti garis merah acak pada kotak hijau / kuning / cyan / slate. Setiap card / kotak memiliki border 4 sisi yang serasi 100% dengan warnanya. ========================================================================== */ /* A. KOTAK HIJAU (Connected Devices, Online, Resolved) */ .kpi-grid .kpi-card:nth-child(2), .stats-overview-grid .stat-card:nth-child(2), .stat-card.stat-card-online, .stat-card.stat-card-resolved, .stat-card-green, .kpi-card-green { border: 1.5px solid rgba(0, 255, 157, 0.40) !important; border-top: 3.5px solid #00FF9D !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -2px 14px rgba(0, 255, 157, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } .kpi-grid .kpi-card:nth-child(2):hover, .stats-overview-grid .stat-card:nth-child(2):hover, .stat-card.stat-card-online:hover, .stat-card.stat-card-resolved:hover, .stat-card-green:hover, .kpi-card-green:hover { border-color: #00FF9D !important; box-shadow: 0 14px 35px rgba(0, 0, 0, 0.95), 0 0 22px rgba(0, 255, 157, 0.45) !important; } /* B. KOTAK MERAH (Disconnected Devices, Offline, Open Cases) */ .kpi-grid .kpi-card:nth-child(3), .stats-overview-grid .stat-card:nth-child(3), #page-alerts .stats-overview-grid .stat-card:nth-child(1), .stat-card.stat-card-offline, .stat-card.stat-card-open, .stat-card-red, .kpi-card-red { border: 1.5px solid rgba(255, 23, 68, 0.45) !important; border-top: 3.5px solid #FF1744 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -2px 14px rgba(255, 23, 68, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } .kpi-grid .kpi-card:nth-child(3):hover, .stats-overview-grid .stat-card:nth-child(3):hover, #page-alerts .stats-overview-grid .stat-card:nth-child(1):hover, .stat-card.stat-card-offline:hover, .stat-card.stat-card-open:hover, .stat-card-red:hover, .kpi-card-red:hover { border-color: #FF1744 !important; box-shadow: 0 14px 35px rgba(0, 0, 0, 0.95), 0 0 22px rgba(255, 23, 68, 0.45) !important; } /* C. KOTAK KUNING / AMBER (Warning Devices, Under Investigation) */ .kpi-grid .kpi-card:nth-child(4), .stats-overview-grid .stat-card:nth-child(4), #page-alerts .stats-overview-grid .stat-card:nth-child(2), .stat-card.stat-card-warning, .stat-card.stat-card-investigating, .stat-card-yellow, .kpi-card-yellow { border: 1.5px solid rgba(255, 214, 0, 0.40) !important; border-top: 3.5px solid #FFD600 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -2px 14px rgba(255, 214, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } .kpi-grid .kpi-card:nth-child(4):hover, .stats-overview-grid .stat-card:nth-child(4):hover, #page-alerts .stats-overview-grid .stat-card:nth-child(2):hover, .stat-card.stat-card-warning:hover, .stat-card.stat-card-investigating:hover, .stat-card-yellow:hover, .kpi-card-yellow:hover { border-color: #FFD600 !important; box-shadow: 0 14px 35px rgba(0, 0, 0, 0.95), 0 0 22px rgba(255, 214, 0, 0.45) !important; } /* D. KOTAK PLATINUM / TITANIUM SILVER (Total Assets, Dispatched Alerts) */ #page-devices .stats-overview-grid .stat-card:nth-child(1), #page-alerts .stats-overview-grid .stat-card:nth-child(4), .stat-card.stat-card-dispatched, .stat-card-cyan, .kpi-card-cyan { border: 1.5px solid rgba(226, 232, 240, 0.40) !important; border-top: 3.5px solid #F8FAFC !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -2px 14px rgba(248, 250, 252, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } #page-devices .stats-overview-grid .stat-card:nth-child(1):hover, #page-alerts .stats-overview-grid .stat-card:nth-child(4):hover, .stat-card.stat-card-dispatched:hover, .stat-card-cyan:hover, .kpi-card-cyan:hover { border-color: #FFFFFF !important; box-shadow: 0 14px 35px rgba(0, 0, 0, 0.95), 0 0 22px rgba(255, 255, 255, 0.45) !important; } /* E. KOTAK ORANYE (MTTR Waktu Pemulihan) */ .kpi-grid .kpi-card:nth-child(5), .stat-card-orange, .kpi-card-orange { border: 1.5px solid rgba(249, 115, 22, 0.40) !important; border-top: 3.5px solid #F97316 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -2px 14px rgba(249, 115, 22, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } .kpi-grid .kpi-card:nth-child(5):hover, .stat-card-orange:hover, .kpi-card-orange:hover { border-color: #F97316 !important; box-shadow: 0 14px 35px rgba(0, 0, 0, 0.95), 0 0 22px rgba(249, 115, 22, 0.45) !important; } /* F. KOTAK UNGU / VIOLET NEON SLA (SLA 30 Hari Uptime) */ .kpi-grid .kpi-card:nth-child(6), .stat-card-purple, .kpi-card-purple { border: 1.5px solid rgba(168, 85, 247, 0.45) !important; border-top: 3.5px solid #A855F7 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -2px 14px rgba(168, 85, 247, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } .kpi-grid .kpi-card:nth-child(6):hover, .stat-card-purple:hover, .kpi-card-purple:hover { border-color: #C084FC !important; box-shadow: 0 14px 35px rgba(0, 0, 0, 0.95), 0 0 22px rgba(168, 85, 247, 0.45) !important; } /* G. KOTAK SLATE / PUTIH NETRAL (Total Devices di Dashboard, Unknown Devices) */ .kpi-grid .kpi-card:nth-child(1), .stats-overview-grid .stat-card:nth-child(5), .stat-card.stat-card-unknown, .stat-card.stat-card-total { border: 1.5px solid rgba(148, 163, 184, 0.35) !important; border-top: 3.5px solid #94A3B8 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -2px 14px rgba(148, 163, 184, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } .kpi-grid .kpi-card:nth-child(1):hover, .stats-overview-grid .stat-card:nth-child(5):hover, .stat-card.stat-card-unknown:hover, .stat-card.stat-card-total:hover { border-color: #CBD5E1 !important; box-shadow: 0 14px 35px rgba(0, 0, 0, 0.95), 0 0 22px rgba(148, 163, 184, 0.40) !important; } /* ========================================================================== v6.0.34 - REVISI QA TERPADU (5 POIN UTAMA TANPA MENGUBAH FITUR): 1. Tampilan Minimize Bagian Donat: Ring Donat di kiri + 1-kolom daftar vertikal scrollable di kanan (persentase kuning emas #F59E0B & scrollbar halus). 2. Bagian Lokasi (#page-location) Rapi: Header dengan 3 KPI Ringkas (3 Zona, 15 Unit, ±1.5m), Titik Fokus Site & Mode Visualisasi tersusun rapi saat minimize maupun full desktop standar industri. 3. Profil Pojok Kanan Atas Berfungsi 100%: Menghilangkan overflow:hidden pada .topbar yang memotong dropdown #user-menu-dropdown & #notif-dropdown, serta menampilkan nama + role di dalam pill ber-border cyan saat minimize. 4. Warna Ikon & Animasi Seragam 100%: Menyelaraskan warna ikon, border, badge, dan animasi radar/pulse (HO = Merah #FF1744, MO = Emas #F59E0B, House Of Server = Hijau Emerald #10B981). 5. Responsif Standar Industri (Desktop Full & Minimize/Mobile). ========================================================================== */ /* -------------------------------------------------------------------------- POIN 3: PROFIL POJOK KANAN ATAS BERFUNGSI & DROPDOWN TIDAK TERPOTONG -------------------------------------------------------------------------- */ .topbar { overflow: visible !important; position: sticky !important; top: 0 !important; z-index: 1050 !important; } .topbar-right, .profile-dropdown-wrapper, .notification-wrapper { overflow: visible !important; position: relative !important; } .user-profile-pill { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 5px 12px 5px 6px !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(9, 13, 22, 0.98) 100%) !important; border: 1.5px solid rgba(0, 240, 255, 0.55) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 10px rgba(0, 240, 255, 0.15) !important; cursor: pointer !important; user-select: none !important; transition: all 0.2s ease !important; position: relative !important; z-index: 1060 !important; } .user-profile-pill:hover { border-color: #00F0FF !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.8), 0 0 14px rgba(0, 240, 255, 0.35) !important; transform: translateY(-1px) !important; } .user-profile-pill .profile-avatar { width: 28px !important; height: 28px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; background: #1E293B !important; border: 1.5px solid rgba(0, 240, 255, 0.5) !important; } .user-profile-pill .profile-info { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; line-height: 1.15 !important; min-width: 0 !important; } .user-profile-pill .profile-info .name { font-size: 0.74rem !important; font-weight: 700 !important; color: #F8FAFC !important; white-space: nowrap !important; max-width: 135px !important; overflow: hidden !important; text-overflow: ellipsis !important; } .user-profile-pill .profile-info .role { font-size: 0.64rem !important; font-weight: 600 !important; color: #00F0FF !important; white-space: nowrap !important; } .user-profile-pill .caret-icon { font-size: 0.68rem !important; color: #94A3B8 !important; margin-left: 2px !important; transition: transform 0.2s ease !important; } /* Pastikan Dropdown Menu Profil & Notifikasi Muncul Utuh di Atas Semua Elemen */ #user-menu-dropdown, .user-menu-dropdown { position: absolute !important; top: calc(100% + 10px) !important; right: 0 !important; width: 265px !important; max-width: calc(100vw - 24px) !important; background: rgba(11, 15, 25, 0.98) !important; border: 1.5px solid rgba(0, 240, 255, 0.45) !important; border-radius: 12px !important; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.92), 0 0 22px rgba(0, 240, 255, 0.22) !important; backdrop-filter: blur(16px) !important; z-index: 99999 !important; padding: 8px 0 !important; overflow: visible !important; } #user-menu-dropdown.hidden, .user-menu-dropdown.hidden, #notif-dropdown.hidden, .notif-dropdown.hidden { display: none !important; } #user-menu-dropdown:not(.hidden), .user-menu-dropdown:not(.hidden) { display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } #notif-dropdown:not(.hidden), .notif-dropdown:not(.hidden) { display: flex !important; flex-direction: column !important; position: absolute !important; top: calc(100% + 10px) !important; right: 0 !important; left: auto !important; width: 340px !important; min-width: 320px !important; max-width: 360px !important; background: #0f172a !important; border: 1.5px solid rgba(0, 240, 255, 0.45) !important; border-radius: 12px !important; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 240, 255, 0.2) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; z-index: 999999 !important; overflow: hidden !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } @media (max-width: 768px) { #notif-dropdown:not(.hidden), .notif-dropdown:not(.hidden) { position: fixed !important; top: 60px !important; left: 12px !important; right: 12px !important; width: calc(100vw - 24px) !important; max-width: 380px !important; min-width: 280px !important; margin: 0 auto !important; max-height: 75vh !important; border-radius: 14px !important; } } @media (max-width: 900px) { .topbar { padding: 8px 12px !important; gap: 8px !important; } .topbar-left .search-container { max-width: 145px !important; } .user-profile-pill { padding: 4px 10px 4px 5px !important; gap: 6px !important; } .user-profile-pill .profile-info { display: flex !important; } .user-profile-pill .profile-info .name { max-width: 92px !important; font-size: 0.7rem !important; } .user-profile-pill .profile-info .role { font-size: 0.6rem !important; } } /* -------------------------------------------------------------------------- POIN 1: DISTRIBUSI KATEGORI PERANGKAT (DONUT CHART) PERSIS GAMBAR REFERENSI Donut di kiri (15 Perangkat) + 1 kolom daftar vertikal scrollable di kanan -------------------------------------------------------------------------- */ .donut-card .donut-body { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; padding: 14px 18px !important; min-height: 205px !important; box-sizing: border-box !important; overflow: visible !important; } .donut-card .donut-visual-wrap { position: relative !important; width: 145px !important; height: 145px !important; min-width: 145px !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; } .donut-card .donut-visual-wrap canvas { width: 145px !important; height: 145px !important; max-width: 145px !important; max-height: 145px !important; } .donut-card .donut-center-label { position: absolute !important; inset: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; pointer-events: none !important; text-align: center !important; } .donut-card .donut-center-label strong { font-size: 1.55rem !important; font-weight: 800 !important; color: #FFFFFF !important; line-height: 1.05 !important; } .donut-card .donut-center-label span { font-size: 0.72rem !important; font-weight: 500 !important; color: #94A3B8 !important; margin-top: 2px !important; } .donut-card .donut-legend-col, #donut-legend-container { flex: 1 1 auto !important; min-width: 0 !important; width: 100% !important; display: flex !important; flex-direction: column !important; gap: 6px !important; max-height: 168px !important; overflow-y: auto !important; overflow-x: hidden !important; padding-right: 6px !important; scrollbar-width: thin !important; scrollbar-color: rgba(148, 163, 184, 0.4) rgba(15, 23, 42, 0.4) !important; } .donut-card .donut-legend-col::-webkit-scrollbar, #donut-legend-container::-webkit-scrollbar { width: 5px !important; display: block !important; } .donut-card .donut-legend-col::-webkit-scrollbar-track, #donut-legend-container::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.5) !important; border-radius: 999px !important; } .donut-card .donut-legend-col::-webkit-scrollbar-thumb, #donut-legend-container::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.42) !important; border-radius: 999px !important; } .donut-card .d-leg-row { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; padding: 5px 8px !important; background: transparent !important; border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important; border-radius: 4px !important; min-height: 27px !important; box-sizing: border-box !important; } .donut-card .d-leg-row:hover { background: rgba(255, 255, 255, 0.04) !important; } .donut-card .d-leg-name { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 0.78rem !important; font-weight: 500 !important; color: #E2E8F0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .donut-card .d-leg-name .cat-bullet { width: 9px !important; height: 9px !important; border-radius: 50% !important; flex-shrink: 0 !important; display: inline-block !important; } .donut-card .d-leg-val { display: grid !important; grid-template-columns: 24px 52px !important; align-items: center !important; justify-items: end !important; gap: 8px !important; white-space: nowrap !important; flex-shrink: 0 !important; font-size: 0.78rem !important; } .donut-card .d-leg-val strong { color: #FFFFFF !important; font-weight: 800 !important; font-size: 0.84rem !important; text-align: right !important; display: block !important; width: 100% !important; font-variant-numeric: tabular-nums !important; font-family: Consolas, "Roboto Mono", monospace !important; margin: 0 !important; } .donut-card .d-leg-val small { color: #F59E0B !important; font-weight: 700 !important; font-size: 0.75rem !important; text-align: right !important; display: block !important; width: 100% !important; font-variant-numeric: tabular-nums !important; font-family: Consolas, "Roboto Mono", monospace !important; margin: 0 !important; } @media (max-width: 900px) { .donut-card .donut-body { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; padding: 14px 14px !important; } .donut-card .donut-visual-wrap { width: 132px !important; height: 132px !important; min-width: 132px !important; margin: 0 !important; } .donut-card .donut-visual-wrap canvas { width: 132px !important; height: 132px !important; } .donut-card .donut-legend-col, #donut-legend-container { display: flex !important; flex-direction: column !important; max-height: 165px !important; overflow-y: auto !important; } } /* -------------------------------------------------------------------------- POIN 2 & 5: HALAMAN LOKASI (#page-location) RAPI DI MINIMIZE & DESKTOP -------------------------------------------------------------------------- */ #page-location .location-page-header { background: radial-gradient(120% 140% at 0% 0%, rgba(16, 185, 129, 0.07) 0%, rgba(11, 15, 25, 0.96) 55%, rgba(8, 11, 18, 0.99) 100%) !important; border: 1.5px solid rgba(148, 163, 184, 0.22) !important; border-top: 3px solid #10B981 !important; border-radius: 14px !important; padding: 18px 20px !important; margin-bottom: 16px !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } #page-location .loc-header-top-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 10px !important; } #page-location .loc-badge-wrap { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 0 !important; } #page-location .loc-std-badge { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 4px 10px !important; border-radius: 999px !important; font-size: 0.66rem !important; font-weight: 700 !important; letter-spacing: 0.06em !important; color: #38BDF8 !important; background: rgba(56, 189, 248, 0.1) !important; border: 1px solid rgba(56, 189, 248, 0.35) !important; } #page-location .loc-header-row { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 18px !important; padding-bottom: 16px !important; margin-bottom: 16px !important; border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important; } #page-location .loc-header-main { flex: 1 1 55% !important; min-width: 260px !important; } #page-location .loc-main-title { font-size: 1.45rem !important; font-weight: 800 !important; color: #FFFFFF !important; letter-spacing: -0.01em !important; margin: 0 0 6px 0 !important; line-height: 1.25 !important; } #page-location .loc-main-subtitle { font-size: 0.8rem !important; color: #94A3B8 !important; line-height: 1.5 !important; margin: 0 !important; } #page-location .loc-header-metrics { display: grid !important; grid-template-columns: repeat(3, minmax(128px, 1fr)) !important; gap: 10px !important; flex-shrink: 0 !important; } #page-location .loc-metric-chip { display: flex !important; align-items: center !important; gap: 10px !important; padding: 10px 14px !important; border-radius: 10px !important; background: rgba(15, 23, 42, 0.78) !important; border: 1px solid rgba(148, 163, 184, 0.2) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; cursor: pointer !important; transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important; user-select: none; position: relative; } .loc-metric-chip:hover { transform: translateY(-2.5px) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(0, 240, 255, 0.3) !important; border-color: rgba(0, 240, 255, 0.7) !important; } .loc-metric-chip:active { transform: scale(0.97) !important; } .loc-metric-chip .lmc-action-hint { margin-left: auto; font-size: 0.7rem; color: #64748B; transition: color 0.2s, transform 0.2s; opacity: 0.7; } .loc-metric-chip:hover .lmc-action-hint { color: #00F0FF; transform: translate(2px, -2px); opacity: 1; } #page-location .loc-metric-chip .lmc-icon { width: 34px !important; height: 34px !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0.9rem !important; flex-shrink: 0 !important; } #page-location .loc-metric-chip.chip-site { border-color: rgba(16, 185, 129, 0.35) !important; } #page-location .loc-metric-chip.chip-site .lmc-icon { background: rgba(16, 185, 129, 0.15) !important; color: #10B981 !important; border: 1px solid rgba(16, 185, 129, 0.35) !important; } #page-location .loc-metric-chip.chip-assets { border-color: rgba(245, 158, 11, 0.35) !important; } #page-location .loc-metric-chip.chip-assets .lmc-icon { background: rgba(245, 158, 11, 0.15) !important; color: #F59E0B !important; border: 1px solid rgba(245, 158, 11, 0.35) !important; } #page-location .loc-metric-chip.chip-acc { border-color: rgba(56, 189, 248, 0.35) !important; } #page-location .loc-metric-chip.chip-acc .lmc-icon { background: rgba(56, 189, 248, 0.15) !important; color: #38BDF8 !important; border: 1px solid rgba(56, 189, 248, 0.35) !important; } #page-location .loc-metric-chip .lmc-info { display: flex !important; flex-direction: column !important; line-height: 1.2 !important; } #page-location .loc-metric-chip .lmc-val { font-size: 0.92rem !important; font-weight: 800 !important; color: #FFFFFF !important; white-space: nowrap !important; } #page-location .loc-metric-chip .lmc-lbl { font-size: 0.64rem !important; font-weight: 700 !important; color: #94A3B8 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; white-space: nowrap !important; } /* Grup Kontrol Lokasi */ #page-location .loc-toolbar-row { display: flex !important; flex-direction: column !important; gap: 14px !important; width: 100% !important; padding: 0 !important; } #page-location .loc-control-group { background: rgba(9, 13, 22, 0.72) !important; border: 1px solid rgba(148, 163, 184, 0.16) !important; border-radius: 12px !important; padding: 12px 14px !important; width: 100% !important; box-sizing: border-box !important; } #page-location .loc-group-label { display: flex !important; align-items: center !important; gap: 7px !important; font-size: 0.68rem !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #94A3B8 !important; margin-bottom: 10px !important; } #page-location .loc-group-label i { color: #00F0FF !important; font-size: 0.75rem !important; } /* Tombol Pilih Titik Fokus Lokasi Infrastruktur (3 Site) */ #page-location .site-quick-nav-bar { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; width: 100% !important; } #page-location .btn-site-quick { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; padding: 10px 14px !important; border-radius: 10px !important; text-align: left !important; width: 100% !important; box-sizing: border-box !important; transition: all 0.2s ease !important; position: relative !important; } #page-location .btn-site-quick .sq-icon { width: 36px !important; height: 36px !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; font-size: 0.95rem !important; } #page-location .btn-site-quick .sq-meta { display: flex !important; flex-direction: column !important; align-items: flex-start !important; line-height: 1.25 !important; flex: 1 1 auto !important; min-width: 0 !important; } #page-location .btn-site-quick .sq-tag { font-size: 0.62rem !important; font-weight: 800 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; opacity: 0.9 !important; } #page-location .btn-site-quick .sq-name { font-size: 0.86rem !important; font-weight: 800 !important; color: #FFFFFF !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #page-location .btn-site-quick .sq-arrow { font-size: 0.75rem !important; opacity: 0.7 !important; margin-left: auto !important; flex-shrink: 0 !important; } /* -------------------------------------------------------------------------- POIN 4: WARNA IKON DAN ANIMASI DISAMAKAN 100% (HO=MERAH, MO=EMAS, SERVER=HIJAU) -------------------------------------------------------------------------- */ /* 1. SITE 01: HEAD OFFICE (HO) -> MERAH TEKNOLAB (#FF1744 / #F43F5E) */ #page-location .btn-site-quick.btn-quick-ho { background: linear-gradient(135deg, rgba(159, 18, 57, 0.28) 0%, rgba(15, 23, 42, 0.92) 100%) !important; border: 1.5px solid rgba(244, 63, 94, 0.45) !important; } #page-location .btn-site-quick.btn-quick-ho .sq-icon { background: rgba(244, 63, 94, 0.2) !important; border: 1px solid rgba(244, 63, 94, 0.5) !important; } #page-location .btn-site-quick.btn-quick-ho .sq-icon i, #page-location .btn-site-quick.btn-quick-ho .sq-tag, #page-location .btn-site-quick.btn-quick-ho .sq-arrow { color: #FB7185 !important; filter: drop-shadow(0 0 6px rgba(244, 63, 94, 0.6)) !important; } #page-location .btn-site-quick.btn-quick-ho.active, #page-location .btn-site-quick.btn-quick-ho:hover { background: linear-gradient(135deg, rgba(190, 18, 60, 0.65) 0%, rgba(136, 19, 55, 0.85) 100%) !important; border-color: #FF1744 !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.65), 0 0 16px rgba(255, 23, 68, 0.4) !important; } #page-location .btn-site-quick.btn-quick-ho.active .sq-icon { background: rgba(255, 23, 68, 0.32) !important; border-color: #FF1744 !important; } #page-location .btn-site-quick.btn-quick-ho.active .sq-icon i { color: #FFFFFF !important; filter: drop-shadow(0 0 8px #FF1744) !important; } /* 2. SITE 02: MARKETING OFFICE (MO) -> KUNING EMAS (#F59E0B / #FFD600) */ #page-location .btn-site-quick.btn-quick-mo { background: linear-gradient(135deg, rgba(146, 64, 14, 0.28) 0%, rgba(15, 23, 42, 0.92) 100%) !important; border: 1.5px solid rgba(245, 158, 11, 0.45) !important; } #page-location .btn-site-quick.btn-quick-mo .sq-icon { background: rgba(245, 158, 11, 0.2) !important; border: 1px solid rgba(245, 158, 11, 0.5) !important; } #page-location .btn-site-quick.btn-quick-mo .sq-icon i, #page-location .btn-site-quick.btn-quick-mo .sq-tag, #page-location .btn-site-quick.btn-quick-mo .sq-arrow { color: #FBBF24 !important; filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.6)) !important; } #page-location .btn-site-quick.btn-quick-mo.active, #page-location .btn-site-quick.btn-quick-mo:hover { background: linear-gradient(135deg, rgba(180, 83, 9, 0.65) 0%, rgba(120, 53, 15, 0.85) 100%) !important; border-color: #F59E0B !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.65), 0 0 16px rgba(245, 158, 11, 0.4) !important; } #page-location .btn-site-quick.btn-quick-mo.active .sq-icon { background: rgba(245, 158, 11, 0.32) !important; border-color: #F59E0B !important; } #page-location .btn-site-quick.btn-quick-mo.active .sq-icon i { color: #FFFFFF !important; filter: drop-shadow(0 0 8px #F59E0B) !important; } /* 3. SITE 03: HOUSE OF SERVER -> HIJAU EMERALD (#10B981 / #00FF9D) SERAGAM! */ #page-location .btn-site-quick.btn-quick-server { background: linear-gradient(135deg, rgba(6, 95, 70, 0.28) 0%, rgba(15, 23, 42, 0.92) 100%) !important; border: 1.5px solid rgba(16, 185, 129, 0.45) !important; } #page-location .btn-site-quick.btn-quick-server .sq-icon { background: rgba(16, 185, 129, 0.2) !important; border: 1px solid rgba(16, 185, 129, 0.5) !important; } #page-location .btn-site-quick.btn-quick-server .sq-icon i, #page-location .btn-site-quick.btn-quick-server .sq-tag, #page-location .btn-site-quick.btn-quick-server .sq-arrow { color: #34D399 !important; filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.6)) !important; } #page-location .btn-site-quick.btn-quick-server.active, #page-location .btn-site-quick.btn-quick-server:hover { background: linear-gradient(135deg, rgba(5, 150, 105, 0.65) 0%, rgba(6, 78, 59, 0.85) 100%) !important; border-color: #10B981 !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.65), 0 0 16px rgba(16, 185, 129, 0.4) !important; } #page-location .btn-site-quick.btn-quick-server.active .sq-icon { background: rgba(16, 185, 129, 0.32) !important; border-color: #10B981 !important; } #page-location .btn-site-quick.btn-quick-server.active .sq-icon i { color: #FFFFFF !important; filter: drop-shadow(0 0 8px #10B981) !important; } /* Samakan Warna Pin Peta & Animasi Radar Pulse dengan Warna Kartu & Tombol Site */ .blitar-marker-pin.site-ho .pin-radar { background: rgba(255, 23, 68, 0.42) !important; border: 2px solid #FF1744 !important; box-shadow: 0 0 12px rgba(255, 23, 68, 0.6) !important; } .blitar-marker-pin.site-ho .pin-core { background: #FF1744 !important; box-shadow: 0 0 14px #FF1744 !important; } .blitar-marker-pin.site-mo .pin-radar { background: rgba(245, 158, 11, 0.42) !important; border: 2px solid #F59E0B !important; box-shadow: 0 0 12px rgba(245, 158, 11, 0.6) !important; } .blitar-marker-pin.site-mo .pin-core { background: #F59E0B !important; box-shadow: 0 0 14px #F59E0B !important; } .blitar-marker-pin.site-server .pin-radar, .blitar-marker-pin.site-mentor .pin-radar { background: rgba(16, 185, 129, 0.42) !important; border: 2px solid #10B981 !important; box-shadow: 0 0 12px rgba(16, 185, 129, 0.6) !important; } .blitar-marker-pin.site-server .pin-core, .blitar-marker-pin.site-mentor .pin-core { background: #10B981 !important; box-shadow: 0 0 14px #10B981 !important; } /* Samakan Kartu Detail Site (HO = Merah, MO = Emas, Server = Hijau Emerald) */ .site-detail-card.card-ho { border-left: 4.5px solid #FF1744 !important; } .site-detail-card.card-ho.active { background: rgba(255, 23, 68, 0.08) !important; border-color: #FF1744 !important; box-shadow: 0 0 20px rgba(255, 23, 68, 0.28) !important; } .site-detail-card.card-ho .sdc-badge { background: rgba(255, 23, 68, 0.16) !important; color: #FDA4AF !important; border: 1px solid rgba(255, 23, 68, 0.45) !important; } .site-detail-card.card-ho .sdc-addr-tag i { color: #FF1744 !important; } .site-detail-card.card-mo { border-left: 4.5px solid #F59E0B !important; } .site-detail-card.card-mo.active { background: rgba(245, 158, 11, 0.08) !important; border-color: #F59E0B !important; box-shadow: 0 0 20px rgba(245, 158, 11, 0.28) !important; } .site-detail-card.card-mo .sdc-badge { background: rgba(245, 158, 11, 0.16) !important; color: #FDE68A !important; border: 1px solid rgba(245, 158, 11, 0.45) !important; } .site-detail-card.card-mo .sdc-addr-tag i { color: #F59E0B !important; } .site-detail-card.card-server, .site-detail-card.card-mentor { border-left: 4.5px solid #10B981 !important; } .site-detail-card.card-server.active, .site-detail-card.card-mentor.active { background: rgba(16, 185, 129, 0.08) !important; border-color: #10B981 !important; box-shadow: 0 0 20px rgba(16, 185, 129, 0.28) !important; } .site-detail-card.card-server .sdc-badge, .site-detail-card.card-mentor .sdc-badge { background: rgba(16, 185, 129, 0.16) !important; color: #A7F3D0 !important; border: 1px solid rgba(16, 185, 129, 0.45) !important; } .site-detail-card.card-server .sdc-addr-tag i, .site-detail-card.card-mentor .sdc-addr-tag i { color: #10B981 !important; } /* Samakan Warna Ikon KPI & Animasi Sparkline/Pulse di Dashboard */ .kpi-grid .kpi-card:nth-child(1) .kpi-icon-box { background: rgba(148, 163, 184, 0.16) !important; border: 1px solid rgba(148, 163, 184, 0.4) !important; color: #E2E8F0 !important; box-shadow: 0 0 12px rgba(148, 163, 184, 0.25) !important; } .kpi-grid .kpi-card:nth-child(1) .kpi-icon-box i { color: #E2E8F0 !important; filter: drop-shadow(0 0 6px rgba(226, 232, 240, 0.6)) !important; } .kpi-grid .kpi-card:nth-child(2) .kpi-icon-box { background: rgba(0, 255, 157, 0.14) !important; border: 1px solid rgba(0, 255, 157, 0.45) !important; color: #00FF9D !important; box-shadow: 0 0 12px rgba(0, 255, 157, 0.28) !important; } .kpi-grid .kpi-card:nth-child(2) .kpi-icon-box i { color: #00FF9D !important; filter: drop-shadow(0 0 6px rgba(0, 255, 157, 0.7)) !important; } .kpi-grid .kpi-card:nth-child(3) .kpi-icon-box { background: rgba(255, 23, 68, 0.16) !important; border: 1px solid rgba(255, 23, 68, 0.45) !important; color: #FF1744 !important; box-shadow: 0 0 12px rgba(255, 23, 68, 0.28) !important; } .kpi-grid .kpi-card:nth-child(3) .kpi-icon-box i { color: #FF1744 !important; filter: drop-shadow(0 0 6px rgba(255, 23, 68, 0.7)) !important; } .kpi-grid .kpi-card:nth-child(4) .kpi-icon-box { background: rgba(255, 214, 0, 0.15) !important; border: 1px solid rgba(255, 214, 0, 0.45) !important; color: #FFD600 !important; box-shadow: 0 0 12px rgba(255, 214, 0, 0.28) !important; } .kpi-grid .kpi-card:nth-child(4) .kpi-icon-box i { color: #FFD600 !important; filter: drop-shadow(0 0 6px rgba(255, 214, 0, 0.7)) !important; } .kpi-grid .kpi-card:nth-child(5) .kpi-icon-box { background: rgba(249, 115, 22, 0.16) !important; border: 1px solid rgba(249, 115, 22, 0.45) !important; color: #F97316 !important; box-shadow: 0 0 12px rgba(249, 115, 22, 0.28) !important; } .kpi-grid .kpi-card:nth-child(5) .kpi-icon-box i { color: #F97316 !important; filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.7)) !important; } .kpi-grid .kpi-card:nth-child(6) .kpi-icon-box { background: rgba(168, 85, 247, 0.16) !important; border: 1px solid rgba(168, 85, 247, 0.45) !important; color: #C084FC !important; box-shadow: 0 0 12px rgba(168, 85, 247, 0.30) !important; } .kpi-grid .kpi-card:nth-child(6) .kpi-icon-box i { color: #C084FC !important; filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.75)) !important; } /* Baris Mode Visualisasi Geospasial & Arsitektur */ #page-location .loc-modes-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; flex-wrap: wrap !important; width: 100% !important; } #page-location .loc-tab-switcher { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; } #page-location .loc-tab-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 9px 16px !important; border-radius: 9px !important; font-size: 0.78rem !important; font-weight: 700 !important; background: rgba(15, 23, 42, 0.9) !important; border: 1.5px solid rgba(148, 163, 184, 0.28) !important; color: #E2E8F0 !important; transition: all 0.2s ease !important; } #page-location .loc-tab-btn.active { background: linear-gradient(135deg, rgba(180, 83, 9, 0.55) 0%, rgba(120, 53, 15, 0.78) 100%) !important; border-color: #F59E0B !important; color: #FFFFFF !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 14px rgba(245, 158, 11, 0.32) !important; } #page-location .loc-tab-btn.active i { color: #FBBF24 !important; filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.85)) !important; } #page-location .map-layer-selector { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: rgba(7, 10, 18, 0.95) !important; border: 1.5px solid rgba(148, 163, 184, 0.26) !important; border-radius: 9px !important; padding: 4px !important; } #page-location .btn-layer-pill { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 7px 14px !important; border-radius: 7px !important; font-size: 0.76rem !important; font-weight: 700 !important; color: #94A3B8 !important; background: transparent !important; border: 1px solid transparent !important; transition: all 0.2s ease !important; } #page-location .btn-layer-pill.active { background: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%) !important; color: #FFFFFF !important; border: 1px solid rgba(16, 185, 129, 0.45) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 10px rgba(16, 185, 129, 0.25) !important; } #page-location .btn-layer-pill.active i { color: #34D399 !important; filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.8)) !important; } /* TAMPILAN MINIMIZE / MOBILE (<= 900px) PERSIS GAMBAR REFERENSI QA */ @media (max-width: 900px) { #page-location .location-page-header { padding: 14px 14px !important; } #page-location .loc-header-row { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; padding-bottom: 14px !important; margin-bottom: 14px !important; } #page-location .loc-header-main { min-width: 0 !important; width: 100% !important; } #page-location .loc-main-title { font-size: 1.22rem !important; } #page-location .loc-main-subtitle { font-size: 0.76rem !important; } #page-location .loc-header-metrics { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; width: 100% !important; } #page-location .loc-metric-chip { flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 10px 6px !important; gap: 6px !important; } #page-location .loc-metric-chip .lmc-info { align-items: center !important; } #page-location .loc-metric-chip .lmc-val { font-size: 0.88rem !important; } #page-location .loc-metric-chip .lmc-lbl { font-size: 0.56rem !important; } /* 3 Site Cards tersusun vertikal 1 kolom penuh rapi seperti gambar referensi */ #page-location .site-quick-nav-bar { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; width: 100% !important; } #page-location .btn-site-quick { padding: 10px 12px !important; } /* Mode Visualisasi & Layer Citra di tampilan minimize */ #page-location .loc-modes-bar { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; } #page-location .loc-tab-switcher { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; width: 100% !important; } #page-location .loc-tab-switcher .loc-tab-btn, #page-location .loc-tab-switcher #tab-btn-gis, #page-location .loc-tab-switcher #tab-btn-floor, #page-location .loc-tab-switcher #btn-loc-manager { grid-column: 1 / -1 !important; width: 100% !important; padding: 10px 12px !important; font-size: 0.8rem !important; justify-content: center !important; } #page-location .map-layer-selector { display: grid !important; grid-template-columns: 1fr 1fr !important; width: 100% !important; gap: 6px !important; padding: 4px !important; box-sizing: border-box !important; } #page-location .btn-layer-pill { width: 100% !important; padding: 8px 8px !important; font-size: 0.75rem !important; } } /* -------------------------------------------------------------------------- PENYEMPURNAAN DETAIL PRESISI (TOPBAR MINIMIZE, DESKTOP HEADER ROW & LEGEND DOT) -------------------------------------------------------------------------- */ @media (max-width: 768px) { .topbar-left .page-header-info, .topbar-left .search-container { display: none !important; } .topbar-left { flex: 0 0 auto !important; } } /* T-AIMS Brand Title Selalu Tampil di Topbar di Seluruh Menu & Ukuran Layar */ .topbar-left .brand-title-wrap, .brand-title-wrap { display: flex !important; flex-direction: column !important; justify-content: center !important; margin-left: 8px !important; } .topbar-left .brand-title-wrap .title-code, .title-code { display: inline-block !important; font-size: 1.15rem !important; font-weight: 800 !important; color: #FFFFFF !important; letter-spacing: 0.5px !important; line-height: 1.2 !important; text-shadow: 0 0 10px rgba(0, 240, 255, 0.4) !important; } @media (min-width: 901px) { #page-location .loc-header-row { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; } #page-location .loc-header-main { flex: 1 1 52% !important; max-width: 60% !important; } #page-location .loc-header-metrics { display: grid !important; grid-template-columns: repeat(3, minmax(135px, 1fr)) !important; gap: 10px !important; flex: 0 0 auto !important; } } /* Samakan Warna & Animasi Dot Legend Peta Mini Dashboard dengan Pin Peta */ .map-legend-bar span { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 0.72rem !important; font-weight: 600 !important; color: #CBD5E1 !important; } .map-legend-bar .dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; display: inline-block !important; flex-shrink: 0 !important; } .map-legend-bar .dot.red { background: #FF1744 !important; box-shadow: 0 0 8px #FF1744 !important; } .map-legend-bar .dot.yellow { background: #F59E0B !important; box-shadow: 0 0 8px #F59E0B !important; } .map-legend-bar .dot.green { background: #10B981 !important; box-shadow: 0 0 8px #10B981 !important; } /* ========================================================================== v6.0.35 - REVISI LANJUTAN SESUAI 3 GAMBAR TERBARU USER: 1. Gambar 1 (Minimize Sidebar & Topbar): - Saat sidebar dibuka di mode minimize, bagian atas (topbar) TIDAK boleh terlihat menutupi/memotong logo Teknolab di sidebar (sidebar & overlay berada di atas topbar). - Di mode minimize (<= 900px), kotak teks nama/role di pojok kanan atas tidak diperlihatkan (hanya ikon avatar bulat yang tetap berfungsi saat diklik). 2. Gambar 2 (Halaman Pengguna #page-users): - Tombol "Tambah User Baru" dipindah tepat ke sebelah "Akun User Sistem". - Tab & panel "Struktur Tim PKL 2 Shift" serta "Catatan Audit Aktivitas Akun" dihapus/disembunyikan sepenuhnya. 3. Gambar 3 (Ringkasan Pemeliharaan .maint-cards-grid): - Sinkronisasi 100% warna ikon, kotak ikon, border 4 sisi, border atas, dan animasi/glow pada ke-4 kartu Ringkasan Pemeliharaan: * Card 1 (Jadwal Pemeliharaan) -> Biru Cyan (#38BDF8) * Card 2 (Sedang Berlangsung) -> Kuning Emas (#FFD600) * Card 3 (Terlambat) -> Merah Crimson (#FF1744) * Card 4 (Selesai Minggu Ini) -> Hijau Emerald (#00FF9D) ========================================================================== */ /* 1. GAMBAR 1: MODE MINIMIZE - SEMBUNYIKAN BAGIAN ATAS SIDEBAR (LOGO TERPOTONG) & RAPKAN TOPBAR */ @media (max-width: 900px) { .topbar { height: 52px !important; min-height: 52px !important; z-index: 100100 !important; } /* Sembunyikan bagian atas sidebar (.sidebar-header / logo besar yang terpotong topbar) saat minimize */ .sidebar .sidebar-header { display: none !important; } .sidebar-overlay { top: 52px !important; height: calc(100vh - 52px) !important; z-index: 100050 !important; } .sidebar, .sidebar.mobile-open { top: 52px !important; bottom: 0 !important; height: calc(100vh - 52px) !important; z-index: 100080 !important; padding-top: 12px !important; padding-bottom: 70px !important; overflow-y: auto !important; } /* Jangan perlihatkan kotak nama/role panjang di pojok kanan atas saat minimize */ .user-profile-pill { padding: 2px !important; background: transparent !important; border: none !important; box-shadow: none !important; gap: 0 !important; } .user-profile-pill .profile-info, .user-profile-pill .caret-icon { display: none !important; } .user-profile-pill .profile-avatar { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; border-radius: 50% !important; border: 1.5px solid rgba(0, 240, 255, 0.65) !important; background: #1E293B !important; box-shadow: 0 0 10px rgba(0, 240, 255, 0.2) !important; } } /* 2. GAMBAR 2: SEMBUNYIKAN STRUKTUR TIM & CATATAN AUDIT DI HALAMAN PENGGUNA */ #tab-btn-users-team, #tab-btn-users-audit, #users-panel-team, #users-panel-audit { display: none !important; } #users-panel-rbac { display: block !important; } /* 3. GAMBAR 3: SINKRONISASI WARNA IKON, KOTAK, BORDER & ANIMASI RINGKASAN PEMELIHARAAN */ /* Card 1: Jadwal Pemeliharaan -> TITANIUM SILVER / PLATINUM (#F8FAFC / #E2E8F0) */ .maint-cards-grid .m-card:nth-child(1) { border: 1.5px solid rgba(226, 232, 240, 0.40) !important; border-top: 3.5px solid #F8FAFC !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.85), 0 -2px 14px rgba(248, 250, 252, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.20) !important; } .maint-cards-grid .m-card:nth-child(1):hover { border-color: #FFFFFF !important; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.95), 0 0 22px rgba(255, 255, 255, 0.45) !important; transform: translateY(-2px) !important; } .maint-cards-grid .m-card:nth-child(1) .m-icon, .m-icon.bg-platinum, .m-icon.bg-blue { background: rgba(248, 250, 252, 0.12) !important; border: 1px solid rgba(248, 250, 252, 0.35) !important; color: #F8FAFC !important; box-shadow: 0 0 12px rgba(255, 255, 255, 0.20) !important; } .maint-cards-grid .m-card:nth-child(1) .m-icon i, .m-icon.bg-platinum i, .m-icon.bg-blue i { color: #FFFFFF !important; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6)) !important; } .maint-cards-grid .m-card:nth-child(1) .m-val { color: #FFFFFF !important; } /* Card 2: Sedang Berlangsung -> KUNING EMAS (#FFD600) */ .maint-cards-grid .m-card:nth-child(2) { border: 1.5px solid rgba(255, 214, 0, 0.42) !important; border-top: 3.5px solid #FFD600 !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.85), 0 -2px 14px rgba(255, 214, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important; } .maint-cards-grid .m-card:nth-child(2):hover { border-color: #FFD600 !important; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.95), 0 0 22px rgba(255, 214, 0, 0.48) !important; transform: translateY(-2px) !important; } .maint-cards-grid .m-card:nth-child(2) .m-icon, .m-icon.bg-amber { background: rgba(255, 214, 0, 0.16) !important; border: 1px solid rgba(255, 214, 0, 0.50) !important; color: #FFD600 !important; box-shadow: 0 0 12px rgba(255, 214, 0, 0.32) !important; } .maint-cards-grid .m-card:nth-child(2) .m-icon i, .m-icon.bg-amber i { color: #FFD600 !important; filter: drop-shadow(0 0 6px rgba(255, 214, 0, 0.8)) !important; } .maint-cards-grid .m-card:nth-child(2) .m-val { color: #FFD600 !important; } /* Card 3: Terlambat -> MERAH CRIMSON (#FF1744) */ .maint-cards-grid .m-card:nth-child(3) { border: 1.5px solid rgba(255, 23, 68, 0.45) !important; border-top: 3.5px solid #FF1744 !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.85), 0 -2px 14px rgba(255, 23, 68, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important; } .maint-cards-grid .m-card:nth-child(3):hover { border-color: #FF1744 !important; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.95), 0 0 22px rgba(255, 23, 68, 0.48) !important; transform: translateY(-2px) !important; } .maint-cards-grid .m-card:nth-child(3) .m-icon, .m-icon.bg-red { background: rgba(255, 23, 68, 0.16) !important; border: 1px solid rgba(255, 23, 68, 0.50) !important; color: #FF1744 !important; box-shadow: 0 0 12px rgba(255, 23, 68, 0.32) !important; } .maint-cards-grid .m-card:nth-child(3) .m-icon i, .m-icon.bg-red i { color: #FF1744 !important; filter: drop-shadow(0 0 6px rgba(255, 23, 68, 0.8)) !important; } .maint-cards-grid .m-card:nth-child(3) .m-val { color: #FF1744 !important; } /* Card 4: Selesai Minggu Ini -> HIJAU EMERALD (#00FF9D) */ .maint-cards-grid .m-card:nth-child(4) { border: 1.5px solid rgba(0, 255, 157, 0.42) !important; border-top: 3.5px solid #00FF9D !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.85), 0 -2px 14px rgba(0, 255, 157, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important; } .maint-cards-grid .m-card:nth-child(4):hover { border-color: #00FF9D !important; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.95), 0 0 22px rgba(0, 255, 157, 0.48) !important; transform: translateY(-2px) !important; } .maint-cards-grid .m-card:nth-child(4) .m-icon, .m-icon.bg-green { background: rgba(0, 255, 157, 0.15) !important; border: 1px solid rgba(0, 255, 157, 0.50) !important; color: #00FF9D !important; box-shadow: 0 0 12px rgba(0, 255, 157, 0.32) !important; } .maint-cards-grid .m-card:nth-child(4) .m-icon i, .m-icon.bg-green i { color: #00FF9D !important; filter: drop-shadow(0 0 6px rgba(0, 255, 157, 0.8)) !important; } .maint-cards-grid .m-card:nth-child(4) .m-val { color: #00FF9D !important; } /* ========================================================================== v6.0.36 - PERBAIKAN PRESISI SESUAI 4 GAMBAR TERBARU USER: 1. Warna Bagian Profil (Topbar): Diganti dari hijau/cyan menjadi tema elegan Dark Slate Platinum & Amber Gold (tanpa warna hijau). 2. Foto 1 (Minimize #page-settings): Tombol sub-tab rata penuh 100% sama lebar (tidak bertangga), padding form rapi, input tidak mepet tepi/terpotong. 3. Foto 2 (Menu Login #auth-overlay): Topbar disembunyikan total saat menu login aktif sehingga bagian atas tidak pernah muncul di halaman login. 4. Foto 3 (Kartu Lokasi #page-location): Border 4 sisi & animasi glow kartu Marketing Office (Kuning Emas #F59E0B) dan House Of Server (Hijau Emerald #10B981) disinkronkan penuh (menghilangkan garis tepi merah yang bocor). 5. Foto 4 (Baris Mode Visualisasi #page-location): Tombol bagian kanan (Peta Jalan & Citra Satelit) dipindah merapat ke kiri di sebelah Kelola Lokasi, dengan ukuran tombol & ikon yang sama persis dan sinkron. ========================================================================== */ /* -------------------------------------------------------------------------- 1. WARNA BAGIAN PROFIL POJOK KANAN ATAS (ELEGAN SLATE PLATINUM & GOLD) -------------------------------------------------------------------------- */ .user-profile-pill { background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%) !important; border: 1.5px solid rgba(226, 232, 240, 0.28) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } .user-profile-pill:hover { border-color: rgba(251, 191, 36, 0.65) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.8), 0 0 12px rgba(245, 158, 11, 0.28) !important; } .user-profile-pill .profile-avatar { background: linear-gradient(135deg, #334155 0%, #1E293B 100%) !important; border: 1.5px solid rgba(251, 191, 36, 0.65) !important; box-shadow: 0 0 8px rgba(245, 158, 11, 0.22) !important; } .user-profile-pill .profile-avatar i, #topbar-profile-icon { color: #F8FAFC !important; } .user-profile-pill .profile-info .name { color: #F8FAFC !important; } .user-profile-pill .profile-info .role { color: #FBBF24 !important; font-weight: 700 !important; } .user-profile-pill .caret-icon { color: #CBD5E1 !important; } #user-menu-dropdown, .user-menu-dropdown { background: rgba(13, 17, 28, 0.98) !important; border: 1.5px solid rgba(226, 232, 240, 0.25) !important; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.92), 0 0 20px rgba(0, 0, 0, 0.6) !important; } @media (max-width: 900px) { .user-profile-pill { padding: 2px !important; background: transparent !important; border: none !important; box-shadow: none !important; } .user-profile-pill .profile-avatar { width: 34px !important; height: 34px !important; border: 1.5px solid rgba(251, 191, 36, 0.7) !important; background: linear-gradient(135deg, #334155 0%, #1E293B 100%) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 8px rgba(245, 158, 11, 0.22) !important; } } /* -------------------------------------------------------------------------- 2. FOTO 2: SAAT MENU LOGIN AKTIF (#auth-screen), JANGAN MUNCULKAN TOPBAR -------------------------------------------------------------------------- */ #auth-screen, .auth-wrapper { z-index: 9999999 !important; position: fixed !important; inset: 0 !important; } #auth-screen.hidden, .auth-wrapper.hidden, #main-dashboard.hidden, .app-layout.hidden { display: none !important; visibility: hidden !important; } #auth-screen:not(.hidden) ~ #main-dashboard, body:has(#auth-screen:not(.hidden)) .topbar, body:has(#auth-screen:not(.hidden)) .sidebar, body:has(#auth-screen:not(.hidden)) .mobile-bottom-nav, body:has(#auth-screen:not(.hidden)) #main-dashboard { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* -------------------------------------------------------------------------- 3. FOTO 1: TAMPILAN MINIMIZE HALAMAN PENGATURAN (#page-settings) RAPI & PRESISI -------------------------------------------------------------------------- */ @media (max-width: 900px) { #page-settings .page-title-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; margin-bottom: 14px !important; } #page-settings .section-heading { font-size: 1.18rem !important; line-height: 1.3 !important; display: flex !important; align-items: center !important; gap: 8px !important; } #page-settings .section-subheading { font-size: 0.76rem !important; line-height: 1.45 !important; margin-top: 4px !important; } #page-settings .page-title-row .btn-primary-cyber { width: 100% !important; justify-content: center !important; padding: 11px 16px !important; border-radius: 10px !important; font-size: 0.82rem !important; } /* Sub-tab Pengaturan disusun 1 kolom penuh rata kanan-kiri (tidak bertangga) */ #page-settings .loc-tab-switcher { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; width: 100% !important; margin-bottom: 16px !important; } #page-settings .loc-tab-switcher .loc-tab-btn { width: 100% !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; padding: 11px 14px !important; font-size: 0.8rem !important; border-radius: 10px !important; box-sizing: border-box !important; text-align: left !important; } #page-settings .loc-tab-switcher .loc-tab-btn i { width: 20px !important; text-align: center !important; font-size: 0.95rem !important; flex-shrink: 0 !important; } /* Card Body & Form Grid di Halaman Pengaturan agar tidak mepet tepi atau terpotong */ #page-settings .dashboard-card { height: auto !important; max-height: none !important; overflow: visible !important; border-radius: 12px !important; } #page-settings .dashboard-card .card-header { padding: 12px 14px !important; } #page-settings .dashboard-card .card-body { padding: 16px 14px !important; height: auto !important; max-height: none !important; overflow: visible !important; box-sizing: border-box !important; } #page-settings .settings-form-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; width: 100% !important; } #page-settings .settings-form-grid .form-group { display: flex !important; flex-direction: column !important; gap: 6px !important; margin: 0 !important; width: 100% !important; } #page-settings .settings-form-grid input, #page-settings .settings-form-grid select { width: 100% !important; padding: 10px 12px !important; border-radius: 8px !important; box-sizing: border-box !important; } } /* -------------------------------------------------------------------------- 4. FOTO 3: SINKRONISASI WARNA BORDER 4 SISI & ANIMASI KARTU LOKASI SITE Menghilangkan border merah pada kartu Marketing Office (Kuning Emas) dan House Of Server (Hijau Emerald). -------------------------------------------------------------------------- */ /* Kartu 1: Head Office -> Merah Crimson (#FF1744) */ #page-location .site-detail-card.card-ho, .site-detail-card.card-ho { border: 1.5px solid rgba(255, 23, 68, 0.45) !important; border-left: 4.5px solid #FF1744 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 14px rgba(255, 23, 68, 0.14) !important; transition: all 0.25s ease !important; } #page-location .site-detail-card.card-ho:hover, #page-location .site-detail-card.card-ho.active, .site-detail-card.card-ho:hover, .site-detail-card.card-ho.active { background: rgba(255, 23, 68, 0.08) !important; border-color: #FF1744 !important; border-left: 4.5px solid #FF1744 !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 23, 68, 0.38) !important; transform: translateY(-2px) !important; } /* Kartu 2: Marketing Office -> Kuning Emas (#F59E0B) - TANPA GARIS MERAH! */ #page-location .site-detail-card.card-mo, .site-detail-card.card-mo { border: 1.5px solid rgba(245, 158, 11, 0.48) !important; border-left: 4.5px solid #F59E0B !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 14px rgba(245, 158, 11, 0.16) !important; transition: all 0.25s ease !important; } #page-location .site-detail-card.card-mo:hover, #page-location .site-detail-card.card-mo.active, .site-detail-card.card-mo:hover, .site-detail-card.card-mo.active { background: rgba(245, 158, 11, 0.08) !important; border-color: #F59E0B !important; border-left: 4.5px solid #F59E0B !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.9), 0 0 20px rgba(245, 158, 11, 0.42) !important; transform: translateY(-2px) !important; } /* Kartu 3: House Of Server -> Hijau Emerald (#10B981) - TANPA GARIS MERAH! */ #page-location .site-detail-card.card-server, #page-location .site-detail-card.card-mentor, .site-detail-card.card-server, .site-detail-card.card-mentor { border: 1.5px solid rgba(16, 185, 129, 0.48) !important; border-left: 4.5px solid #10B981 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 14px rgba(16, 185, 129, 0.16) !important; transition: all 0.25s ease !important; } #page-location .site-detail-card.card-server:hover, #page-location .site-detail-card.card-server.active, #page-location .site-detail-card.card-mentor:hover, #page-location .site-detail-card.card-mentor.active, .site-detail-card.card-server:hover, .site-detail-card.card-server.active, .site-detail-card.card-mentor:hover, .site-detail-card.card-mentor.active { background: rgba(16, 185, 129, 0.08) !important; border-color: #10B981 !important; border-left: 4.5px solid #10B981 !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.9), 0 0 20px rgba(16, 185, 129, 0.42) !important; transform: translateY(-2px) !important; } /* -------------------------------------------------------------------------- 5. FOTO 4: BARIS MODE VISUALISASI (#page-location) RATA KIRI & UKURAN IKON SAMA -------------------------------------------------------------------------- */ @media (min-width: 901px) { #page-location .loc-modes-bar { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; flex-wrap: wrap !important; width: 100% !important; } #page-location .loc-tab-switcher { display: inline-flex !important; align-items: center !important; gap: 8px !important; } #page-location .map-layer-selector { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: transparent !important; border: none !important; padding: 0 !important; margin-left: 0 !important; } /* Samakan tinggi tombol, padding, font, dan ukuran ikon untuk ke-5 tombol */ #page-location .loc-tab-btn, #page-location .btn-layer-pill { height: 38px !important; min-height: 38px !important; padding: 0 15px !important; border-radius: 9px !important; font-size: 0.78rem !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; box-sizing: border-box !important; background: rgba(15, 23, 42, 0.9) !important; border: 1.5px solid rgba(148, 163, 184, 0.28) !important; color: #E2E8F0 !important; } #page-location .loc-tab-btn i, #page-location .btn-layer-pill i { font-size: 0.92rem !important; width: 16px !important; height: 16px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; line-height: 1 !important; } #page-location .btn-layer-pill.active { background: linear-gradient(135deg, rgba(14, 116, 144, 0.55) 0%, rgba(15, 23, 42, 0.95) 100%) !important; border: 1.5px solid #38BDF8 !important; color: #FFFFFF !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 14px rgba(56, 189, 248, 0.3) !important; } } /* ========================================================================== IKON JUDUL DENAH (BAWAH) SAMA DENGAN IKON TAB "DENAH BANGUNAN & CAD 3D" (ATAS) — Warna amber + glow + animasi denyut yang identik ========================================================================== */ @keyframes taimsBlueprintIconPulse { 0%, 100% { text-shadow: 0 0 0 rgba(251, 191, 36, 0); transform: scale(1); } 50% { text-shadow: 0 0 10px rgba(251, 191, 36, 0.95), 0 0 18px rgba(245, 158, 11, 0.55); transform: scale(1.12); } } #page-location #tab-btn-floor.active i, #page-location .floorplan-intro-bar h4 > i.fa-compass-drafting { color: #FBBF24 !important; filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.85)) !important; display: inline-block; transform-origin: center; animation: taimsBlueprintIconPulse 2.2s ease-in-out infinite; } /* ========================================================================== MODE KELOLA TITIK DI 3D DIGITAL TWIN — penanda visual saat mode edit aktif ========================================================================== */ #floorplan-3d-view { position: relative; } #floorplan-3d-view.edit-mode { position: relative; outline: 2px solid rgba(245, 158, 11, 0.85); outline-offset: -2px; box-shadow: 0 0 24px rgba(245, 158, 11, 0.25); border-radius: 12px; } #floorplan-3d-view.edit-mode #fp3d-canvas-stage { cursor: crosshair !important; } #floorplan-3d-view.edit-mode::after { display: none !important; } /* Floating interactive bar for Mode Kelola Titik 3D */ .fp3d-interactive-edit-bar { position: absolute; top: 58px; left: 50%; transform: translateX(-50%); z-index: 55; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 20px; background: rgba(15, 23, 42, 0.95); border: 1px solid rgba(245, 158, 11, 0.85); color: #FDE68A; font-size: 0.74rem; font-weight: 600; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.7), 0 0 12px rgba(245, 158, 11, 0.35); cursor: pointer; pointer-events: auto !important; user-select: none; transition: all 0.2s ease; text-align: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .fp3d-interactive-edit-bar:hover, .fp3d-interactive-edit-bar:active { background: rgba(245, 158, 11, 0.25); border-color: #FBBF24; box-shadow: 0 4px 22px rgba(245, 158, 11, 0.5); transform: translateX(-50%) scale(1.02); } @media (max-width: 768px) { .fp3d-interactive-edit-bar { width: calc(100% - 24px); max-width: 360px; top: 50px; bottom: auto !important; padding: 7px 10px; font-size: 0.71rem; border-radius: 10px; justify-content: center; } } /* Speaker Audio Icon Topbar - Warna Kuning/Gold */ #sound-toggle-icon.text-yellow, #btn-sound-toggle i.fa-volume-high { color: #FBBF24 !important; } /* Modal Backdrop Fix: Pastikan modal selalu berada di atas topbar dan elemen apa pun */ .modal-backdrop { z-index: 99999 !important; } .modal-backdrop.hidden { display: none !important; } /* ========================================================================== SCROLL HORIZONTAL TABEL INSIDEN & TABEL DATA (#page-alerts & MOCKUP-TABLE) Memastikan tabel dengan 10 kolom memiliki scroll horizontal yang mulus ========================================================================== */ #page-alerts .table-responsive, .table-responsive { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; display: block !important; padding-bottom: 8px !important; } #page-alerts .table-responsive .mockup-table, #page-alerts .mockup-table { min-width: 1150px !important; width: 100% !important; } #page-alerts .table-responsive::-webkit-scrollbar, .table-responsive::-webkit-scrollbar { height: 8px !important; width: 8px !important; } #page-alerts .table-responsive::-webkit-scrollbar-track, .table-responsive::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.85) !important; border-radius: 4px !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; } #page-alerts .table-responsive::-webkit-scrollbar-thumb, .table-responsive::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #00F0FF, #3B82F6) !important; border-radius: 4px !important; box-shadow: 0 0 8px rgba(0, 240, 255, 0.6) !important; } #page-alerts .table-responsive::-webkit-scrollbar-thumb:hover, .table-responsive::-webkit-scrollbar-thumb:hover { background: #00F0FF !important; box-shadow: 0 0 12px rgba(0, 240, 255, 0.9) !important; } /* ========================================================================== v6.0.29 - Tombol Laporan & Asisten AI Lurus Sejajar & Ringkas ========================================================================== */ #page-reports .page-title-row { display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; } #page-reports .page-title-row .report-export-actions, #page-reports .page-title-row .d-flex.gap-2 { display: flex !important; gap: 8px !important; align-items: center !important; flex-wrap: nowrap !important; } #page-reports .page-title-row .btn { min-height: 36px !important; padding: 6px 14px !important; font-size: 0.8rem !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; white-space: nowrap !important; flex-shrink: 0 !important; } .ai-hero-header { display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; } .ai-hero-actions { display: flex !important; gap: 6px !important; align-items: center !important; flex-wrap: nowrap !important; } .ai-hero-actions .btn { min-height: 34px !important; padding: 6px 12px !important; font-size: 0.78rem !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; white-space: nowrap !important; flex-shrink: 0 !important; } /* Tombol Denah Bangunan 3 Lokasi Lurus Sejajar */ .site-blueprint-selector { display: flex !important; flex-direction: column !important; gap: 10px !important; margin-bottom: 14px !important; } .bp-sites-bar { display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; width: 100% !important; } .bp-sites-bar .btn-bp-choice { flex: 1 1 0 !important; white-space: nowrap !important; text-align: center !important; padding: 8px 12px !important; font-size: 0.82rem !important; font-weight: 600 !important; } .bp-controls-bar { display: flex !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; gap: 8px !important; width: 100% !important; } @media (max-width: 768px) { #page-reports .page-title-row .report-export-actions, #page-reports .page-title-row .d-flex.gap-2 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; width: 100% !important; gap: 6px !important; } #page-reports .page-title-row .btn { width: 100% !important; padding: 6px 4px !important; font-size: 0.72rem !important; justify-content: center !important; } .ai-hero-actions { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; width: 100% !important; gap: 4px !important; margin-top: 6px !important; } .ai-hero-actions .btn { width: 100% !important; padding: 6px 3px !important; font-size: 0.68rem !important; justify-content: center !important; } .bp-sites-bar { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; width: 100% !important; } .bp-sites-bar .btn-bp-choice { padding: 7px 4px !important; font-size: 0.72rem !important; white-space: nowrap !important; } .bp-controls-bar { display: flex !important; flex-wrap: nowrap !important; gap: 6px !important; } .bp-controls-bar .dimension-switcher { flex: 0 0 auto !important; width: fit-content !important; margin-left: 0 !important; display: inline-flex !important; } .bp-controls-bar .dimension-switcher .btn-dim { padding: 5px 10px !important; font-size: 0.72rem !important; white-space: nowrap !important; } .bp-controls-bar .btn-bp-pin-manager { flex: 1 1 auto !important; white-space: nowrap !important; font-size: 0.72rem !important; padding: 6px 10px !important; text-align: center !important; justify-content: center !important; } } /* ========================================================================== v6.0.28 - Mode Kelola Titik Banner & Mobile Viewport Responsive ========================================================================== */ .floorplan-edit-banner { background: rgba(245, 158, 11, 0.12) !important; border: 1px solid #F59E0B !important; border-radius: 8px !important; padding: 12px 18px !important; margin: 12px 0 16px 0 !important; align-items: center !important; justify-content: space-between !important; gap: 15px !important; box-shadow: 0 0 20px rgba(245, 158, 11, 0.2) !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; } .floorplan-edit-banner.hidden { display: none !important; } .fp-banner-content { display: flex !important; align-items: center !important; gap: 12px !important; min-width: 0 !important; flex: 1 1 auto !important; } .fp-banner-icon { width: 38px !important; height: 38px !important; border-radius: 8px !important; background: rgba(245, 158, 11, 0.25) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .fp-banner-text { min-width: 0 !important; flex: 1 1 auto !important; } .fp-banner-title-row { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; } .fp-banner-title { color: #F59E0B !important; font-size: 0.92rem !important; font-weight: 700 !important; letter-spacing: 0.3px !important; } .fp-banner-badge { background: rgba(245, 158, 11, 0.3) !important; color: #FDE68A !important; font-size: 0.72rem !important; padding: 2px 8px !important; border-radius: 4px !important; font-weight: 600 !important; } .fp-banner-desc { margin: 4px 0 0 0 !important; font-size: 0.8rem !important; color: #E2E8F0 !important; line-height: 1.4 !important; } .fp-banner-actions { display: flex !important; gap: 10px !important; align-items: center !important; flex-shrink: 0 !important; } .fp-banner-actions .btn { min-height: 34px !important; padding: 6px 14px !important; font-size: 0.78rem !important; font-weight: 700 !important; white-space: nowrap !important; } .fp-banner-actions #btn-reset-floorplan-pins { border-color: rgba(255, 23, 68, 0.6) !important; color: #FF5252 !important; } .fp-banner-actions .btn-fp-finish { background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%) !important; color: #000 !important; border: 1px solid #FBBF24 !important; box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.25) !important; } @media (max-width: 768px) { .floorplan-edit-banner { flex-direction: column !important; align-items: stretch !important; padding: 10px 12px !important; gap: 10px !important; } .fp-banner-content { align-items: flex-start !important; gap: 10px !important; } .fp-banner-icon { width: 32px !important; height: 32px !important; margin-top: 2px !important; } .fp-banner-title { font-size: 0.82rem !important; white-space: normal !important; word-break: normal !important; } .fp-banner-desc { font-size: 0.74rem !important; line-height: 1.35 !important; } .fp-banner-actions { width: 100% !important; display: flex !important; justify-content: stretch !important; gap: 8px !important; } .fp-banner-actions .btn { width: 100% !important; min-height: 36px !important; justify-content: center !important; text-align: center !important; padding: 6px 12px !important; font-size: 0.78rem !important; } } /* ========================================================================== */ /* RESPONSIVE DESKTOP VS MOBILE LABELS */ /* ========================================================================== */ .text-mobile { display: none; } .text-desktop { display: inline; } @media (max-width: 768px) { .text-desktop { display: none !important; } .text-mobile { display: inline !important; } /* Rapi & Ringkas Kotak-Kotak Stat Cards di Menu Perangkat (Gambar 5) */ #page-devices .stats-overview-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; margin-bottom: 12px !important; } #page-devices .stats-overview-grid .stat-card { padding: 8px 10px !important; min-height: 64px !important; border-radius: 8px !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; background: rgba(15, 23, 42, 0.85) !important; } /* Kotak ke-5 (Unknown Devices) tampil rapi 1 baris penuh di bawah */ #page-devices .stats-overview-grid .stat-card:nth-child(5) { grid-column: span 2 !important; } #page-devices .stats-overview-grid .stat-icon-wrap { width: 32px !important; height: 32px !important; min-width: 32px !important; font-size: 0.82rem !important; border-radius: 6px !important; display: flex !important; align-items: center !important; justify-content: center !important; } #page-devices .stats-overview-grid .stat-info { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } #page-devices .stats-overview-grid .stat-label { font-size: 0.65rem !important; font-weight: 700 !important; letter-spacing: 0.4px !important; line-height: 1.1 !important; margin-bottom: 1px !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; color: #94A3B8 !important; } #page-devices .stats-overview-grid .stat-val { font-size: 1.05rem !important; font-weight: 800 !important; line-height: 1.15 !important; margin: 0 !important; display: block !important; } #page-devices .stats-overview-grid .stat-sub { font-size: 0.62rem !important; line-height: 1 !important; display: flex !important; align-items: center !important; gap: 4px !important; margin-top: 2px !important; white-space: nowrap !important; } } /* Sembunyikan Jenis Peta Jalan & Satelit saat di Mode Denah Arsitektur CAD */ #loc-panel-floor:not(.hidden) ~ * #loc-map-layer-selector, #loc-panel-floor:not(.hidden) #loc-map-layer-selector { display: none !important; } /* ========================================================================== Responsive Modal Footer Detail Perangkat (Anti-Kuping / Anti-Potong di HP) ========================================================================== */ @media (max-width: 640px) { #device-detail-modal .modal-footer, #modal-device-detail .modal-footer { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; padding: 12px 14px !important; } #device-detail-modal .modal-footer .btn, #modal-device-detail .modal-footer .btn { width: 100% !important; min-width: 0 !important; padding: 8px 6px !important; font-size: 0.74rem !important; font-weight: 600 !important; margin: 0 !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; border-radius: 8px !important; } #device-detail-modal .modal-footer #btn-manual-ping, #modal-device-detail .modal-footer #btn-manual-ping { grid-column: span 2 !important; background: rgba(245, 158, 11, 0.15) !important; border: 1px solid rgba(245, 158, 11, 0.6) !important; color: #FDE68A !important; font-weight: 700 !important; } } /* ========================================================================== v6.0.29 - Konsistensi Badge Hijau (NOC) & Luruskan SLA Reporting Badge ========================================================================== */ .live-indicator-tag, .tag-live-green, #page-monitoring .live-indicator-tag { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 0.72rem !important; color: #00FF9C !important; background: rgba(0, 255, 156, 0.08) !important; border: 1px solid rgba(0, 255, 156, 0.4) !important; border-radius: 20px !important; padding: 3px 12px !important; letter-spacing: 0.8px !important; box-shadow: 0 0 10px rgba(0, 255, 156, 0.2) !important; white-space: nowrap !important; width: fit-content !important; } .live-indicator-tag strong, .tag-live-green strong, #page-monitoring .live-indicator-tag strong { color: #00FF9C !important; font-weight: 700 !important; } /* Badge SLA Reporting selalu lurus 1 baris tidak bertumpuk atas-bawah */ .badge-pill-green, #page-reports .page-title-row .badge-pill-green { white-space: nowrap !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; flex-wrap: nowrap !important; font-size: 0.72rem !important; padding: 4px 10px !important; line-height: 1.2 !important; } /* Compact Responsive 4 Stat Boxes di SLA Summary untuk Tampilan HP */ .txt-mb { display: none !important; } .txt-dt { display: inline !important; } @media (max-width: 768px) { .txt-dt { display: none !important; } .txt-mb { display: inline !important; } .report-summary-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } .rep-box { padding: 12px 8px !important; border-radius: 8px !important; text-align: center !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; min-height: 80px !important; background: linear-gradient(180deg, #15171F 0%, #0B0C10 100%) !important; border: 1.5px solid rgba(225, 29, 72, 0.45) !important; border-top: 3px solid #FF1744 !important; box-sizing: border-box !important; } .rep-box > span:first-child, .rep-box .rep-title { font-size: 0.70rem !important; font-weight: 700 !important; color: #94A3B8 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; display: block !important; } .rep-box strong { font-size: 1.55rem !important; font-weight: 800 !important; margin: 4px 0 2px 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; display: block !important; line-height: 1.2 !important; } .rep-box strong.text-red { color: #FF1744 !important; text-shadow: 0 0 10px rgba(255, 23, 68, 0.5) !important; } .rep-box strong.text-yellow { color: #FFD600 !important; text-shadow: 0 0 10px rgba(255, 214, 0, 0.5) !important; } .rep-box strong.text-green { color: #00FF9D !important; text-shadow: 0 0 10px rgba(0, 255, 157, 0.5) !important; } .rep-box strong.text-cyan { color: #00F0FF !important; text-shadow: 0 0 10px rgba(0, 240, 255, 0.5) !important; } .rep-box small { font-size: 0.65rem !important; color: #64748B !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; display: block !important; } } /* Badge 5 Anggota & 6 Anggota Shift Selalu Lurus 1 Baris Horizontal */ .sbb-badge, .sbb-badge.badge-amber, .sbb-badge.badge-purple, .shift-banner-bar .sbb-right .sbb-badge { white-space: nowrap !important; word-break: keep-all !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; line-height: 1.2 !important; font-size: 0.74rem !important; padding: 5px 12px !important; width: fit-content !important; } .sbb-right, .shift-banner-bar .sbb-right { flex-shrink: 0 !important; white-space: nowrap !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; } /* ============================================================ */ /* SERVER RESOURCE METRICS WIDGET STYLES */ /* ============================================================ */ .server-resource-section { margin-bottom: 32px !important; } .flex-column { flex-direction: column !important; } .mb-4 { margin-bottom: 28px !important; } .server-resource-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 1200px) { .server-resource-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .server-resource-grid { grid-template-columns: 1fr; } } .srv-metric-card { background: linear-gradient(180deg, #15171F 0%, #0B0C10 100%) !important; border-radius: var(--radius-md, 12px) !important; padding: 16px 18px !important; position: relative; overflow: hidden; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; } /* 1. CPU Card (Titanium Steel Slate Theme) */ #srv-card-cpu { border: 1.5px solid rgba(148, 163, 184, 0.45) !important; border-top: 3.5px solid #CBD5E1 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -2px 10px rgba(203, 213, 225, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } #srv-card-cpu:hover { border-color: #E2E8F0 !important; transform: translateY(-2px) !important; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.9), 0 -3px 16px rgba(226, 232, 240, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } /* 2. RAM Card (Purple Theme) */ #srv-card-ram { border: 1.5px solid rgba(239, 68, 68, 0.45) !important; border-top: 3.5px solid #EF4444 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -2px 10px rgba(239, 68, 68, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } #srv-card-ram:hover { border-color: #F87171 !important; transform: translateY(-2px) !important; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.9), 0 -3px 16px rgba(239, 68, 68, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } /* 3. Storage / Disk Card (Amber / Yellow Theme) */ #srv-card-disk { border: 1.5px solid rgba(245, 158, 11, 0.45) !important; border-top: 3.5px solid #F59E0B !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -2px 10px rgba(245, 158, 11, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } #srv-card-disk:hover { border-color: #FBBF24 !important; transform: translateY(-2px) !important; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.9), 0 -3px 16px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } /* 4. Sistem & Uptime Card (Emerald / Green Theme) */ #srv-card-system { border: 1.5px solid rgba(16, 185, 129, 0.45) !important; border-top: 3.5px solid #10B981 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -2px 10px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } #srv-card-system:hover { border-color: #34D399 !important; transform: translateY(-2px) !important; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.9), 0 -3px 16px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } .srv-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; } .srv-card-label { display: flex; align-items: center; gap: 10px; } .srv-icon-badge { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .cpu-badge { background: rgba(148, 163, 184, 0.15); color: #CBD5E1; border: 1px solid rgba(148, 163, 184, 0.35); } .ram-badge { background: rgba(239, 68, 68, 0.15) !important; color: #F87171 !important; border: 1px solid rgba(239, 68, 68, 0.35) !important; } .disk-badge { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); } .sys-badge { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); } .srv-metric-name { font-size: 0.95rem; font-weight: 700; color: #fff; display: block; line-height: 1.2; } .srv-metric-sub { font-size: 0.72rem; color: #94a3b8; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; } .srv-status-tag { font-size: 0.7rem; font-weight: 700; padding: 3px 8px; border-radius: 20px; background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); text-transform: uppercase; letter-spacing: 0.5px; } .srv-status-tag.warning { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border-color: rgba(245, 158, 11, 0.3); } .srv-status-tag.critical { background: rgba(239, 68, 68, 0.15); color: #f87171; border-color: rgba(239, 68, 68, 0.3); } .srv-value-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 12px; } .srv-big-num { font-size: 1.85rem; font-weight: 800; font-family: 'JetBrains Mono', monospace, sans-serif; color: #fff; line-height: 1; } .srv-big-num.uptime-num { font-size: 1.05rem; line-height: 1.3; color: #34d399; font-weight: 700; } .srv-unit { font-size: 1.05rem; color: #94a3b8; margin-left: 2px; } .srv-detail-meta { font-size: 0.73rem; color: #94a3b8; display: flex; flex-direction: column; text-align: right; line-height: 1.4; } .srv-detail-meta strong { color: #e2e8f0; } .srv-progress-track { width: 100%; height: 7px; background: rgba(255, 255, 255, 0.08); border-radius: 10px; overflow: hidden; position: relative; } .srv-progress-bar { height: 100%; border-radius: 10px; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease; } .bar-cpu { background: linear-gradient(90deg, #94a3b8, #cbd5e1); } .bar-ram { background: linear-gradient(90deg, #ef4444, #f87171) !important; } .bar-disk { background: linear-gradient(90deg, #f59e0b, #fbbf24); } .srv-progress-bar.warning { background: linear-gradient(90deg, #f59e0b, #fbbf24) !important; } .srv-progress-bar.critical { background: linear-gradient(90deg, #ef4444, #f87171) !important; } .srv-sys-meta-list { display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; color: #94a3b8; border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 8px; } .srv-sys-meta-list strong { color: #e2e8f0; } /* ============================================================ */ /* UNIFIED PREMIUM KPI & STAT CARDS COLOR THEMES */ /* ============================================================ */ /* 1. TOTAL ASSETS / DEVICES (TITANIUM SILVER / PLATINUM THEME) */ .kpi-card:nth-child(1), .kpi-grid .kpi-card:nth-child(1), .stats-overview-grid .stat-card:nth-child(1), .stat-card.stat-card-total { border: 1.5px solid rgba(226, 232, 240, 0.40) !important; border-top: 3.5px solid #F8FAFC !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -2px 14px rgba(248, 250, 252, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.20) !important; } .kpi-card:nth-child(1):hover, .kpi-grid .kpi-card:nth-child(1):hover, .stats-overview-grid .stat-card:nth-child(1):hover, .stat-card.stat-card-total:hover { border-color: #FFFFFF !important; box-shadow: 0 14px 35px rgba(0, 0, 0, 0.95), 0 0 22px rgba(255, 255, 255, 0.45) !important; } .kpi-grid .kpi-card:nth-child(1) .kpi-icon-box, .stats-overview-grid .stat-card:nth-child(1) .stat-icon-wrap, .stat-icon-wrap.platinum, .kpi-icon-box.platinum-bg { background: rgba(248, 250, 252, 0.12) !important; border: 1px solid rgba(248, 250, 252, 0.35) !important; color: #F8FAFC !important; box-shadow: 0 0 12px rgba(255, 255, 255, 0.20) !important; } .kpi-grid .kpi-card:nth-child(1) .kpi-icon-box i, .stats-overview-grid .stat-card:nth-child(1) .stat-icon-wrap i, .stat-icon-wrap.platinum i, .kpi-icon-box.platinum-bg i { color: #FFFFFF !important; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6)) !important; } /* ============================================================ */ /* HARMONIOUS TITANIUM & CRIMSON THEME OVERRIDES (ANTI-GLARE CYAN) */ /* ============================================================ */ .badge-pill-cyan { background: rgba(148, 163, 184, 0.12) !important; color: #E2E8F0 !important; border: 1px solid rgba(148, 163, 184, 0.35) !important; border-radius: 9999px; padding: 3px 10px; font-size: 0.75rem; font-weight: 600; } .badge-pill-cyan i { color: #CBD5E1 !important; } .section-heading i { color: #FF1744 !important; filter: drop-shadow(0 0 8px rgba(255, 23, 68, 0.45)); } .sdc-badge.badge-cyan { background: rgba(148, 163, 184, 0.15) !important; color: #F1F5F9 !important; border: 1px solid rgba(148, 163, 184, 0.40) !important; } .bp-tag.badge-cyan { background: rgba(148, 163, 184, 0.15) !important; color: #F1F5F9 !important; border: 1px solid rgba(148, 163, 184, 0.40) !important; } /* ========================================================================== */ /* v6.0.40 - ENHANCED HARMONIOUS LOCATION CONTROLS & NON-BLOCK BUTTONS */ /* ========================================================================== */ /* 1. Tombol Navigasi Cepat Site (HO, MO, Server): Bodi gelap elegan, border tajam, anti-blok tebal */ #page-location .btn-site-quick { background: rgba(15, 23, 42, 0.88) !important; backdrop-filter: blur(8px) !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; } #page-location .btn-site-quick.btn-quick-ho { border: 1.5px solid rgba(255, 23, 68, 0.45) !important; border-top: 3px solid #FF1744 !important; } #page-location .btn-site-quick.btn-quick-ho:hover, #page-location .btn-site-quick.btn-quick-ho.active { background: rgba(255, 23, 68, 0.14) !important; border-color: #FF1744 !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), 0 0 16px rgba(255, 23, 68, 0.35) !important; transform: translateY(-2px) !important; } #page-location .btn-site-quick.btn-quick-mo { border: 1.5px solid rgba(245, 158, 11, 0.45) !important; border-top: 3px solid #F59E0B !important; } #page-location .btn-site-quick.btn-quick-mo:hover, #page-location .btn-site-quick.btn-quick-mo.active { background: rgba(245, 158, 11, 0.14) !important; border-color: #F59E0B !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), 0 0 16px rgba(245, 158, 11, 0.35) !important; transform: translateY(-2px) !important; } #page-location .btn-site-quick.btn-quick-server { border: 1.5px solid rgba(16, 185, 129, 0.45) !important; border-top: 3px solid #10B981 !important; } #page-location .btn-site-quick.btn-quick-server:hover, #page-location .btn-site-quick.btn-quick-server.active { background: rgba(16, 185, 129, 0.14) !important; border-color: #10B981 !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), 0 0 16px rgba(16, 185, 129, 0.35) !important; transform: translateY(-2px) !important; } /* 2. Chip Akurasi Geodetik (ganti biru dengan Titanium Silver Platinum) */ #page-location .loc-metric-chip.chip-acc { border-color: rgba(226, 232, 240, 0.35) !important; background: rgba(15, 23, 42, 0.85) !important; } #page-location .loc-metric-chip.chip-acc .lmc-icon { background: rgba(248, 250, 252, 0.12) !important; color: #F8FAFC !important; border: 1px solid rgba(248, 250, 252, 0.35) !important; } #page-location .loc-metric-chip.chip-acc .lmc-val { color: #F8FAFC !important; } /* 3. Sub-Tab Mode Visualisasi (Ganti tombol GIS cyan menjadi Merah Crimson Teknolab yang serasi dengan background) */ .loc-tab-btn.loc-tab-gis i, #tab-btn-gis i { color: #FF1744 !important; filter: drop-shadow(0 0 6px rgba(255, 23, 68, 0.6)) !important; } .loc-tab-btn.loc-tab-gis.active, #tab-btn-gis.active { background: rgba(225, 29, 72, 0.18) !important; border: 1.5px solid #FF1744 !important; color: #FFFFFF !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 14px rgba(255, 23, 68, 0.35) !important; } /* Tombol Denah & CAD 3D Sub-Tab */ .loc-tab-btn.loc-tab-floor.active, #tab-btn-floor.active { background: rgba(245, 158, 11, 0.18) !important; border: 1.5px solid #F59E0B !important; color: #FFFFFF !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 14px rgba(245, 158, 11, 0.35) !important; } /* Tombol Kelola Titik Denah */ .btn-bp-pin-manager, #btn-bp-edit-pins { background: rgba(245, 158, 11, 0.12) !important; border: 1.5px solid rgba(245, 158, 11, 0.6) !important; color: #FDE68A !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important; } .btn-bp-pin-manager:hover, #btn-bp-edit-pins:hover { background: rgba(245, 158, 11, 0.22) !important; border-color: #F59E0B !important; } /* ========================================================================== */ /* v6.0.42 - RESPONSIVE MOBILE FIX: SERVER RESOURCE HEADER & SYNC BADGE */ /* ========================================================================== */ .srv-resource-header-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; } .srv-resource-title-col { display: flex; flex-direction: column; gap: 4px; flex: 1 1 320px; } .srv-resource-main-heading { font-size: 1.25rem; font-weight: 700; color: #FFFFFF; margin: 0; display: flex; align-items: center; gap: 8px; line-height: 1.3; } .srv-subheading { margin: 4px 0 0 0; font-size: 0.8rem; color: #94A3B8; line-height: 1.4; } .srv-resource-actions-col { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .srv-sync-badge { display: inline-flex !important; align-items: center !important; gap: 6px !important; white-space: nowrap !important; font-size: 0.74rem !important; font-weight: 600 !important; padding: 5px 12px !important; border-radius: 9999px !important; background: rgba(148, 163, 184, 0.12) !important; color: #E2E8F0 !important; border: 1px solid rgba(148, 163, 184, 0.35) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important; line-height: 1 !important; } .srv-sync-badge i { color: #CBD5E1 !important; } /* TAMPILAN MOBILE SMARTPHONE (<= 768px): Rapi, tidak bertumpuk, bundaran sinkron tidak bulat tertekan */ @media (max-width: 768px) { .srv-resource-header-row { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; } .srv-resource-title-col { flex: 0 0 auto !important; width: 100% !important; } .srv-resource-main-heading { font-size: 1.08rem !important; } .srv-subheading { font-size: 0.74rem !important; } .srv-resource-actions-col { width: 100% !important; display: flex !important; justify-content: space-between !important; align-items: center !important; margin-top: 4px !important; } .srv-sync-badge { flex: 1 1 auto !important; justify-content: center !important; font-size: 0.72rem !important; padding: 6px 12px !important; white-space: nowrap !important; } .srv-refresh-btn { flex: 0 0 auto !important; padding: 6px 12px !important; } } /* ========================================================================== */ /* v6.0.43 - PERJELAS GARIS KOTAK METRIK AI LAPORAN (GAMBAR 3) */ /* ========================================================================== */ .ai-metrics-banner { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; background: rgba(11, 12, 16, 0.8) !important; border: 1px solid rgba(148, 163, 184, 0.22) !important; border-radius: 12px !important; padding: 14px !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6) !important; } @media (max-width: 680px) { .ai-metrics-banner { grid-template-columns: repeat(2, 1fr) !important; } } .aim-item { background: linear-gradient(180deg, #171922 0%, #0F1017 100%) !important; border: 1.5px solid rgba(148, 163, 184, 0.38) !important; border-radius: 8px !important; padding: 12px 14px !important; text-align: center !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; transition: all 0.2s ease !important; } .aim-item:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6) !important; } .aim-item:nth-child(1) { border-color: rgba(226, 232, 240, 0.45) !important; /* Total Device: Silver Titanium */ } .aim-item:nth-child(2) { border-color: rgba(16, 185, 129, 0.5) !important; /* Online: Emerald Green */ } .aim-item:nth-child(3) { border-color: rgba(239, 68, 68, 0.5) !important; /* Offline: Crimson Red */ } .aim-item:nth-child(4) { border-color: rgba(245, 158, 11, 0.5) !important; /* Warning: Amber Yellow */ } .aim-item:nth-child(5) { border-color: rgba(56, 189, 248, 0.5) !important; /* Availability SLA: Cyber Blue */ } /* ========================================================================== */ /* v6.0.44 - SYSTEM UPTIME CARD: ELECTRIC VIOLET (ELIMINATES TWIN YELLOW) */ /* ========================================================================== */ .kpi-grid .kpi-card:nth-child(6) { border: 1.5px solid rgba(168, 85, 247, 0.45) !important; border-top: 3.5px solid #A855F7 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 -2px 14px rgba(168, 85, 247, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } .kpi-grid .kpi-card:nth-child(6):hover { border-color: #C084FC !important; box-shadow: 0 14px 35px rgba(0, 0, 0, 0.95), 0 0 22px rgba(168, 85, 247, 0.50) !important; } .kpi-grid .kpi-card:nth-child(6) .kpi-icon-box { background: rgba(168, 85, 247, 0.16) !important; border: 1px solid rgba(168, 85, 247, 0.45) !important; color: #C084FC !important; box-shadow: 0 0 12px rgba(168, 85, 247, 0.30) !important; } .kpi-grid .kpi-card:nth-child(6) .kpi-icon-box i { color: #C084FC !important; filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.75)) !important; } .text-purple { color: #C084FC !important; } #kpi-spark-uptime { background: #A855F7 !important; } /* ========================================================================== */ /* v6.0.45 - QA REVISION BUNDLE (7 ITEMS RESOLUTION) */ /* 1. Centered Site Buttons */ /* 2, 3, 4. Non-Breaking Denah Blueprint Headings & Count Badges */ /* 5. Incidents Table Compact Layout (No Empty Space) */ /* 6. Card Title & Icon Perfect Inline-Flex Centering */ /* 7. Mobile Toast Popup Auto-Height & Constraints */ /* 8. Solid Modal Card Background with 10px Backdrop Blur */ /* 9. Leaflet Dashboard Mini-Map Container Reliability */ /* ========================================================================== */ /* 1. Centered Site Buttons */ .bp-sites-bar .btn-bp-choice, .btn-bp-choice { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } /* 2, 3, 4. Denah Blueprint Headings & Count Badges */ .bp-site-meta h3 { word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 6px !important; } .bp-count-badge { display: inline-block !important; white-space: nowrap !important; font-size: 0.85em !important; color: #94a3b8 !important; font-weight: 500 !important; } @media (max-width: 768px) { .bp-site-meta h3 { font-size: 0.95rem !important; line-height: 1.35 !important; margin-top: 4px !important; } .bp-count-badge { font-size: 0.82em !important; } .bp-sites-bar .btn-bp-choice { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } } /* 5. Incidents Table Compact Spacing (No Dead Whitespace) */ #page-alerts .table-responsive .mockup-table, #page-alerts .mockup-table { min-width: 880px !important; width: 100% !important; table-layout: auto !important; border-collapse: separate !important; border-spacing: 0 !important; } #page-alerts .mockup-table th, #page-alerts .mockup-table td { padding: 8px 10px !important; white-space: nowrap !important; font-size: 0.78rem !important; } #page-alerts .mockup-table th:nth-child(1), #page-alerts .mockup-table td:nth-child(1) { width: 90px !important; min-width: 80px !important; } #page-alerts .mockup-table th:nth-child(2), #page-alerts .mockup-table td:nth-child(2) { width: 140px !important; min-width: 130px !important; } #page-alerts .mockup-table th:nth-child(3), #page-alerts .mockup-table td:nth-child(3) { width: 120px !important; min-width: 110px !important; } #page-alerts .mockup-table th:nth-child(4), #page-alerts .mockup-table td:nth-child(4) { width: 120px !important; min-width: 110px !important; } #page-alerts .mockup-table th:nth-child(5), #page-alerts .mockup-table td:nth-child(5) { width: 75px !important; min-width: 70px !important; } #page-alerts .mockup-table th:nth-child(6), #page-alerts .mockup-table td:nth-child(6) { width: 85px !important; min-width: 80px !important; } #page-alerts .mockup-table th:nth-child(7), #page-alerts .mockup-table td:nth-child(7) { width: 120px !important; min-width: 110px !important; } #page-alerts .mockup-table th:nth-child(8), #page-alerts .mockup-table td:nth-child(8) { width: 95px !important; min-width: 90px !important; } #page-alerts .mockup-table th:nth-child(9), #page-alerts .mockup-table td:nth-child(9) { width: 95px !important; min-width: 90px !important; } #page-alerts .mockup-table th:nth-child(10), #page-alerts .mockup-table td:nth-child(10) { width: 80px !important; min-width: 75px !important; } /* 6. Card Title & Icon Perfect Alignment */ .card-title-group { display: inline-flex !important; align-items: center !important; gap: 8px !important; } .card-title-group > i { display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; flex-shrink: 0 !important; vertical-align: middle !important; } .card-title-group > h4 { display: inline-flex !important; align-items: center !important; margin: 0 !important; line-height: 1.3 !important; gap: 8px !important; } /* 7. Mobile Toast Popup Auto-Height & Constraints */ @media (max-width: 768px) { #toast-notification.toast-popup, #toast-notification.toast-notification { left: 16px !important; right: 16px !important; bottom: 16px !important; top: auto !important; width: calc(100% - 32px) !important; max-width: 420px !important; height: auto !important; min-height: unset !important; max-height: 120px !important; margin: 0 auto !important; padding: 10px 14px !important; box-sizing: border-box !important; border-radius: 10px !important; display: flex !important; align-items: center !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.85), 0 0 15px rgba(0, 240, 255, 0.25) !important; } #toast-notification.toast-popup.hidden { display: none !important; } #toast-notification .toast-content { flex: 1 1 auto !important; overflow: hidden !important; } #toast-notification .toast-content h6 { font-size: 0.82rem !important; margin: 0 0 2px 0 !important; white-space: nowrap !important; text-overflow: ellipsis !important; overflow: hidden !important; } #toast-notification .toast-content p { font-size: 0.72rem !important; margin: 0 !important; line-height: 1.25 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } } /* 8. Penyelarasan Backdrop Modal Edit Insiden dengan Kelola Lokasi (Sinkron 100%) */ #incident-modal-overlay.hidden, #loc-manager-modal.hidden, .modal-backdrop.hidden, .modal-overlay.hidden { display: none !important; visibility: hidden !important; pointer-events: none !important; } #incident-modal-overlay:not(.hidden), #loc-manager-modal:not(.hidden), .modal-backdrop:not(.hidden), .modal-overlay:not(.hidden) { position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(0, 0, 0, 0.75) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 99999 !important; padding: 16px !important; box-sizing: border-box !important; overflow-y: auto !important; } #incident-modal-overlay .modal-card, #loc-manager-modal .modal-card, .modal-backdrop .modal-card, .modal-box { background: var(--bg-card, #0B111E) !important; border: 1px solid var(--border-cyan, rgba(0, 240, 255, 0.45)) !important; border-radius: var(--radius-lg, 12px) !important; box-shadow: var(--shadow-card, 0 16px 45px rgba(0, 0, 0, 0.92), 0 0 20px rgba(0, 240, 255, 0.2)) !important; width: 100% !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #incident-modal-overlay .modal-card { max-width: 520px !important; max-height: 90vh !important; } /* 9. Leaflet Dashboard Mini-Map Container Reliability */ #home-blitar-map, .home-map-leaflet { background: radial-gradient(circle at center, #111d35 0%, #060a14 100%) !important; position: relative !important; min-height: 220px !important; } /* ========================================================================== */ /* v6.0.46 - PERBAIKAN TOTAL NOTIFIKASI DROPDOWN (ANTI-SLIVER / RESPONSIVE) */ /* Memperbaiki dropdown notifikasi agar tampil utuh, proporsional, & jelas */ /* ========================================================================== */ /* State Sembunyi */ #notif-dropdown.hidden, .notif-dropdown.hidden { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* State Tampil - Desktop (>= 769px) */ #notif-dropdown:not(.hidden), .notif-dropdown:not(.hidden) { display: flex !important; flex-direction: column !important; position: absolute !important; top: calc(100% + 10px) !important; right: 0 !important; left: auto !important; width: 340px !important; min-width: 320px !important; max-width: 360px !important; height: auto !important; max-height: 480px !important; background: #0E1017 !important; border: 1.5px solid rgba(255, 42, 109, 0.45) !important; border-top: 3px solid #FF2A6D !important; border-radius: 12px !important; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.95), 0 0 22px rgba(255, 42, 109, 0.22) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; z-index: 999999 !important; overflow: hidden !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* State Tampil - Mobile (<= 768px) */ @media (max-width: 768px) { #notif-dropdown:not(.hidden), .notif-dropdown:not(.hidden) { position: fixed !important; top: 60px !important; left: 12px !important; right: 12px !important; width: calc(100vw - 24px) !important; max-width: 380px !important; min-width: 280px !important; margin: 0 auto !important; height: auto !important; max-height: 75vh !important; background: #0E1017 !important; border-radius: 14px !important; border: 1.5px solid rgba(255, 42, 109, 0.5) !important; border-top: 3px solid #FF2A6D !important; box-shadow: 0 20px 55px rgba(0, 0, 0, 0.98), 0 0 25px rgba(255, 42, 109, 0.25) !important; } } /* Interior Styling Dropdown Notifikasi (Tema Gelap Obsidian & Merah Teknolab) */ .notif-dropdown { width: 360px !important; min-width: 360px !important; } .notif-dropdown .notif-header { padding: 10px 14px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 8px !important; flex-wrap: nowrap !important; border-bottom: 1px solid rgba(255, 42, 109, 0.22) !important; background: linear-gradient(180deg, rgba(255, 42, 109, 0.14) 0%, #12141D 100%) !important; flex-shrink: 0 !important; width: 100% !important; box-sizing: border-box !important; } .notif-dropdown .notif-header .notif-title-wrap { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: nowrap !important; flex-shrink: 0 !important; min-width: 0 !important; } .notif-dropdown .notif-header h6 { margin: 0 !important; font-size: 0.85rem !important; font-weight: 700 !important; color: #ffffff !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; flex-shrink: 0 !important; } #notif-unread-count, .notif-dropdown .badge-count { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 3px !important; background: rgba(225, 29, 72, 0.22) !important; border: 1px solid rgba(225, 29, 72, 0.5) !important; color: #FDA4AF !important; font-size: 0.68rem !important; font-weight: 700 !important; line-height: 1 !important; padding: 3px 8px !important; border-radius: 9999px !important; white-space: nowrap !important; word-break: keep-all !important; flex-shrink: 0 !important; box-shadow: 0 0 8px rgba(225, 29, 72, 0.25) !important; letter-spacing: 0.3px !important; } .notif-dropdown .btn-mark-all-read { background: rgba(255, 42, 109, 0.14) !important; border: 1px solid rgba(255, 42, 109, 0.4) !important; color: #FDA4AF !important; border-radius: 6px !important; padding: 5px 10px !important; font-size: 0.72rem !important; font-weight: 600 !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; white-space: nowrap !important; transition: all 0.2s ease !important; } .notif-dropdown .btn-mark-all-read:hover { background: rgba(255, 42, 109, 0.28) !important; color: #ffffff !important; } .notif-dropdown .notif-list { max-height: 320px !important; overflow-y: auto !important; padding: 4px 0 !important; flex: 1 1 auto !important; width: 100% !important; box-sizing: border-box !important; background: #0E1017 !important; } .notif-dropdown .notif-item { padding: 10px 14px !important; display: flex !important; align-items: flex-start !important; gap: 10px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; font-size: 0.78rem !important; transition: background 0.2s ease !important; cursor: pointer !important; width: 100% !important; box-sizing: border-box !important; } .notif-dropdown .notif-item:hover { background: rgba(255, 42, 109, 0.08) !important; } .notif-dropdown .notif-item .notif-text { flex: 1 1 auto !important; min-width: 0 !important; } .notif-dropdown .notif-item .notif-text strong { display: block !important; color: #f1f5f9 !important; font-size: 0.8rem !important; font-weight: 600 !important; line-height: 1.3 !important; word-break: break-word !important; } .notif-dropdown .notif-item .notif-text span { color: #94a3b8 !important; font-size: 0.72rem !important; line-height: 1.2 !important; margin-top: 2px !important; display: block !important; } .notif-dropdown .notif-footer { padding: 10px 14px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; background: #0A0C12 !important; flex-shrink: 0 !important; width: 100% !important; box-sizing: border-box !important; } .notif-dropdown .notif-footer a { color: #FDA4AF !important; font-size: 0.75rem !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap !important; } /* ========================================================================== REVISI RESPONSIF MOBILE T-AIMS (MENJAGA TAMPILAN ASLI DZAKWAN 100%) Responsif untuk iPhone Layar Kecil (320px - 375px) & Android Standar (360px - 430px) HANYA AKTIF PADA LAYAR MOBILE (<= 576px) — TAMPILAN DESKTOP 100% TIDAK BERUBAH ========================================================================== */ /* 1. Media Query Layar Mobile (<= 576px) - Mempertahankan SEMUA Elemen Dzakwan */ @media (max-width: 576px) { /* Mencegah Goyang / Kebocoran Horizontal Seluruh Halaman di Mobile */ html, body { overflow-x: hidden !important; max-width: 100vw !important; position: relative !important; } #app-container, .app-layout, .content-container, main { overflow-x: hidden !important; max-width: 100% !important; } .dashboard-card { scroll-margin-top: 75px !important; } /* Header Atas: T-AIMS Rapat ke Tombol Garis Tiga, Sembunyikan AI & Sound di HP, & Sesuaikan Ulang Proporsinya */ .topbar { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 8px 12px !important; gap: 8px !important; width: 100% !important; box-sizing: border-box !important; background: #0B0E14 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; position: sticky !important; top: 0 !important; z-index: 1000 !important; } .topbar-left { display: flex !important; align-items: center !important; gap: 7px !important; flex-shrink: 0 !important; } .topbar-left .brand-title-wrap, .brand-title-wrap { margin-left: 0 !important; padding-left: 0 !important; } .topbar-left .title-sub { display: none !important; } .topbar-left .title-code { font-size: 1.05rem !important; font-weight: 800 !important; line-height: 1 !important; } .topbar-left .mobile-toggle-btn, #sidebar-toggle-btn { width: 32px !important; height: 32px !important; min-width: 32px !important; padding: 0 !important; margin-right: 0 !important; margin-left: 0 !important; font-size: 0.90rem !important; } .topbar-center { display: none !important; } .topbar-right { display: flex !important; align-items: center !important; gap: 6px !important; flex-shrink: 0 !important; margin-right: 0 !important; } /* Hanya Sembunyikan Tombol Sound di Tampilan HP (Tombol Analisis AI Tetap Tampil) */ #btn-sound-toggle { display: none !important; } /* Jam Digital Realtime (Proporsional & Seimbang dengan Ikon AI) */ .live-clock-pill { display: inline-flex !important; align-items: center !important; padding: 3px 7px !important; font-size: 0.68rem !important; gap: 4px !important; background: rgba(15, 23, 42, 0.75) !important; border: 1px solid rgba(255, 214, 0, 0.35) !important; border-radius: 6px !important; } .live-clock-pill .clock-divider, .live-clock-pill .calendar-emoji, .live-clock-pill #live-date { display: none !important; } .live-clock-pill .clock-time-val { font-size: 0.68rem !important; font-weight: 600 !important; } /* Tombol Analisis AI & Lonceng Notifikasi (Tampil Proporsional & Sejajar) */ #topbar-ai-btn, .ai-quick-trigger, #notif-bell-btn, .notification-wrapper { display: inline-flex !important; width: 29px !important; height: 29px !important; min-width: 29px !important; max-width: 29px !important; padding: 0 !important; align-items: center !important; justify-content: center !important; border-radius: 6px !important; flex-shrink: 0 !important; } #topbar-ai-btn i, #notif-bell-btn i { font-size: 0.80rem !important; } /* Avatar Profil (Proporsional & Seimbang) */ .user-profile-pill { display: inline-flex !important; padding: 0 !important; margin: 0 !important; align-items: center !important; border-radius: 50% !important; background: transparent !important; border: none !important; flex-shrink: 0 !important; } .user-profile-pill .profile-avatar-circle, .user-profile-pill .avatar-circle { width: 29px !important; height: 29px !important; font-size: 0.76rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .user-profile-pill .profile-info, .user-profile-pill .caret-icon { display: none !important; } /* KPI Grid Dashboard: TETAP 2 KOLOM SESUAI DESAIN DZAKWAN */ .kpi-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; } .kpi-grid .stat-card, .kpi-grid .kpi-card { padding: 8px 6px !important; border-radius: 8px !important; min-width: 0 !important; } .kpi-grid .stat-card h3, .kpi-grid .kpi-card .kpi-title { font-size: 0.68rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .kpi-grid .stat-card .stat-value, .kpi-grid .kpi-card .kpi-value { font-size: 1.15rem !important; line-height: 1.2 !important; } .kpi-grid .stat-card .stat-subtext, .kpi-grid .kpi-card .kpi-desc { font-size: 0.62rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Modal Pop-up responsif 94vw */ .modal-card { width: 94vw !important; max-width: 94vw !important; margin: 10px auto !important; padding: 14px !important; box-sizing: border-box !important; } /* Tombol Denah & Filter Lantai */ .btn-bp-choice, .filter-select-group { flex-wrap: wrap !important; justify-content: center !important; } .btn-bp-choice { padding: 6px 10px !important; font-size: 0.8rem !important; } /* Tabel Data Responsif */ .table-responsive { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; margin-bottom: 12px !important; } /* Judul & Ukuran Grafik Tren Status: Kompak & Proporsional di Layar HP */ .charts-row { gap: 10px !important; margin-bottom: 10px !important; } .trend-card, .donut-card { margin-bottom: 0 !important; } .trend-card .card-header { display: grid !important; grid-template-columns: 1fr auto !important; grid-template-areas: "title legend" "select select" !important; align-items: center !important; gap: 5px 6px !important; width: 100% !important; padding: 8px 12px 4px 12px !important; box-sizing: border-box !important; border-bottom: none !important; } .trend-card .card-header .card-title-group, .trend-card .card-title-group { grid-area: title !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 6px !important; min-width: 0 !important; width: auto !important; } .trend-card .card-header .card-title-group h4, .trend-card .card-title-group h4 { white-space: nowrap !important; line-height: 1.2 !important; font-size: 0.76rem !important; margin: 0 !important; } .trend-card .card-header .card-controls, .trend-card .card-controls { display: contents !important; } .trend-card .card-header .chart-legend-inline, .trend-card .chart-legend-inline { grid-area: legend !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 5px !important; font-size: 0.62rem !important; flex-shrink: 0 !important; margin: 0 !important; white-space: nowrap !important; } .trend-card .chart-legend-inline .dot { width: 6px !important; height: 6px !important; margin-right: 2px !important; flex-shrink: 0 !important; } .trend-card .card-header .cyber-select, .trend-card .cyber-select { grid-area: select !important; width: 100% !important; max-width: 100% !important; font-size: 0.68rem !important; padding: 2px 8px !important; height: 26px !important; margin-top: 1px !important; box-sizing: border-box !important; } .trend-card .chart-body { height: 145px !important; min-height: 145px !important; max-height: 145px !important; padding: 4px 10px 8px 10px !important; box-sizing: border-box !important; } .trend-card .chart-body canvas, #trendChart { height: 133px !important; max-height: 133px !important; width: 100% !important; } /* Header Kartu Distribusi Kategori: Kompak & Rapi di HP */ .dashboard-card.donut-card .card-header, .donut-card .card-header { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 8px 12px 4px 12px !important; width: 100% !important; box-sizing: border-box !important; gap: 6px !important; border-bottom: none !important; } .donut-card .card-header .card-title-group { display: flex !important; align-items: center !important; gap: 6px !important; min-width: 0 !important; flex-shrink: 1 !important; } .donut-card .card-header .card-title-group h4 { font-size: 0.76rem !important; margin: 0 !important; white-space: nowrap !important; } .donut-card .card-header .card-link { font-size: 0.65rem !important; white-space: nowrap !important; padding: 2px 7px !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 4px !important; color: #94A3B8 !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; flex-shrink: 0 !important; } /* Donut Chart: Donat Proporsional (96px) di Kiri & 4 Baris Utuh Tanpa Kepotong di Kanan (Bisa di-Scroll) */ .donut-card .donut-body { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 6px 12px 10px 12px !important; height: auto !important; min-height: auto !important; max-height: none !important; width: 100% !important; box-sizing: border-box !important; } .donut-card .donut-visual-wrap { width: 96px !important; height: 96px !important; margin: 0 !important; flex-shrink: 0 !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; } .donut-card .donut-visual-wrap canvas { width: 96px !important; height: 96px !important; max-width: 96px !important; max-height: 96px !important; } .donut-card .donut-center-label { position: absolute !important; inset: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; pointer-events: none !important; } .donut-card .donut-center-label strong, .donut-card .donut-center-label #donut-total-count { font-size: 1.08rem !important; font-weight: 800 !important; color: #FFFFFF !important; line-height: 1.05 !important; margin: 0 !important; } .donut-card .donut-center-label span { font-size: 0.55rem !important; color: #94A3B8 !important; margin-top: 1px !important; line-height: 1 !important; } .donut-card .donut-legend-col, #donut-legend-container { flex: 1 1 0% !important; width: auto !important; min-width: 0 !important; height: 112px !important; min-height: 112px !important; max-height: 112px !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: y mandatory !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; grid-template-columns: none !important; gap: 4px !important; padding: 0 4px 0 0 !important; margin: 0 !important; box-sizing: border-box !important; scrollbar-width: thin !important; scrollbar-color: rgba(255, 42, 109, 0.45) rgba(255, 255, 255, 0.05) !important; } .donut-card .donut-legend-col::-webkit-scrollbar, #donut-legend-container::-webkit-scrollbar { width: 4px !important; } .donut-card .donut-legend-col::-webkit-scrollbar-track, #donut-legend-container::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04) !important; border-radius: 4px !important; } .donut-card .donut-legend-col::-webkit-scrollbar-thumb, #donut-legend-container::-webkit-scrollbar-thumb { background: rgba(255, 42, 109, 0.5) !important; border-radius: 4px !important; } .donut-card .donut-legend-col .d-leg-row, .donut-card .d-leg-row { width: 100% !important; height: 25px !important; min-height: 25px !important; max-height: 25px !important; scroll-snap-align: start !important; display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 0 8px !important; background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; border-radius: 5px !important; box-sizing: border-box !important; min-width: 0 !important; flex-shrink: 0 !important; } .donut-card .donut-legend-col .d-leg-name, .donut-card .d-leg-name { font-size: 0.66rem !important; line-height: 1 !important; display: flex !important; align-items: center !important; gap: 6px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important; color: #E2E8F0 !important; } .donut-card .cat-bullet { width: 6px !important; height: 6px !important; border-radius: 50% !important; flex-shrink: 0 !important; } .donut-card .donut-legend-col .d-leg-val, .donut-card .d-leg-val { display: grid !important; grid-template-columns: 18px 36px !important; align-items: center !important; gap: 4px !important; font-size: 0.66rem !important; line-height: 1 !important; white-space: nowrap !important; margin-left: 6px !important; flex-shrink: 0 !important; font-variant-numeric: tabular-nums !important; } .donut-card .d-leg-val strong { color: #FFFFFF !important; font-weight: 700 !important; margin: 0 !important; text-align: right !important; display: block !important; width: 100% !important; font-variant-numeric: tabular-nums !important; } .donut-card .d-leg-val small { color: #94A3B8 !important; font-size: 0.58rem !important; margin: 0 !important; text-align: right !important; display: block !important; width: 100% !important; font-variant-numeric: tabular-nums !important; } /* Kontainer Halaman: Simetris Rata Kanan-Kiri 12px Presisi & Bebas Kotak Hitam Bawah */ html, body, #app-container, .app-layout, main, .main-content { padding-bottom: 0 !important; margin-bottom: 0 !important; } .content-container, body.page-dashboard-active .content-container, body:not(.page-dashboard-active) .content-container { padding-left: 12px !important; padding-right: 12px !important; padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important; width: 100% !important; max-width: 100vw !important; box-sizing: border-box !important; } .page-view, .page-view.active, #page-dashboard, .dashboard-container { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; scroll-margin-top: 55px !important; } .dashboard-card { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; scroll-margin-top: 55px !important; } /* Safe Area iOS Safari & Bottom Nav */ .mobile-bottom-nav { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; height: auto !important; min-height: calc(56px + env(safe-area-inset-bottom, 0px)) !important; } /* Sembunyikan lebar scrollbar vertikal di mode mobile seperti iOS/Android asli agar tidak memakan lebar layar */ ::-webkit-scrollbar { width: 0px !important; height: 4px !important; } /* Perbaikan Seluruh Badge Atas, Judul Halaman & Subjudul di Semua Menu (Anti-Terpotong Kanan) */ .page-title-row, .page-title-row > div, .page-title-left, .loc-header-top-bar, .loc-badge-wrap, .loc-header-row, .loc-header-main { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; flex-wrap: wrap !important; } .badge-pill-green, .live-indicator-tag, .tag-live-green, .loc-std-badge { max-width: 100% !important; white-space: normal !important; word-break: break-word !important; font-size: 0.62rem !important; line-height: 1.35 !important; padding: 4px 8px !important; height: auto !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; } .live-indicator-tag strong { white-space: normal !important; word-break: break-word !important; font-size: 0.62rem !important; line-height: 1.3 !important; } .section-heading, .loc-main-title { font-size: 1.2rem !important; line-height: 1.3 !important; white-space: normal !important; word-break: break-word !important; max-width: 100% !important; } .section-subheading, .loc-main-subtitle { font-size: 0.76rem !important; line-height: 1.45 !important; white-space: normal !important; word-break: break-word !important; max-width: 100% !important; } /* Tombol Uji Kirim Telegram & Unduh CSV Insiden Berdampingan Kanan-Kiri (1 Baris) di HP */ #page-alerts .page-title-row > div:last-child { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; flex-direction: row !important; gap: 8px !important; width: 100% !important; margin-top: 6px !important; } #page-alerts .page-title-row > div:last-child button, #page-alerts .page-title-row > div:last-child .btn { width: 100% !important; min-width: 0 !important; padding: 8px 6px !important; font-size: 0.72rem !important; justify-content: center !important; white-space: nowrap !important; margin: 0 !important; } /* Perbaikan Filter Dropdown 2x2 Grid & Status Chips di Halaman Perangkat (#page-devices) */ .filter-select-group { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; box-sizing: border-box !important; } .filter-select-group select, .filter-select-group .btn-reset { width: 100% !important; min-width: 0 !important; max-width: 100% !important; font-size: 0.76rem !important; padding: 6px 8px !important; box-sizing: border-box !important; } .quick-status-chips { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 4px !important; padding: 6px !important; border-radius: 12px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: visible !important; } .quick-status-chips .chip-filter { font-size: 0.66rem !important; padding: 4px 7px !important; flex: 1 1 auto !important; justify-content: center !important; min-width: 0 !important; } /* Tombol Fokus Seluruh Titik Peta di HP (Kuning Emas Sesuai Gambar 2) */ .map-card .btn-recenter-map, .map-controls-clean .btn-recenter-map { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 22px !important; min-width: 32px !important; padding: 0 !important; background: rgba(10, 10, 14, 0.95) !important; border: 1.5px solid #FFD600 !important; border-radius: 5px !important; color: #FFD600 !important; box-shadow: 0 0 8px rgba(255, 214, 0, 0.3) !important; cursor: pointer !important; flex-shrink: 0 !important; transition: all 0.2s ease !important; } .map-card .btn-recenter-map i, .map-controls-clean .btn-recenter-map i { color: #FFD600 !important; font-size: 0.72rem !important; line-height: 1 !important; margin: 0 !important; } #home-points-count-label { display: none !important; } .dashboard-card .card-header { gap: 8px !important; } .dashboard-card .card-header .card-title-group { min-width: 0 !important; flex: 1 1 auto !important; } .dashboard-card .card-header .card-title-group h4 { font-size: 0.76rem !important; line-height: 1.25 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .dashboard-card .card-header .card-link, .dashboard-card .card-header a { font-size: 0.68rem !important; white-space: nowrap !important; flex-shrink: 0 !important; margin-left: auto !important; } /* Perbaikan Menu Jaringan (#page-monitoring): Samakan Konsep dengan Dashboard (Anti-Terpotong Kanan & Ringkas) */ #page-monitoring .noc-split-grid, #page-monitoring .protocol-grid, #page-monitoring .rules-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #page-monitoring .dashboard-card, #page-monitoring .protocol-card, #page-monitoring .rule-box { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } #page-monitoring .noc-split-grid > .dashboard-card .card-header { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: center !important; gap: 4px 6px !important; padding: 8px 10px 6px 10px !important; width: 100% !important; box-sizing: border-box !important; } #page-monitoring .noc-split-grid > .dashboard-card .card-header h4 { font-size: 0.72rem !important; white-space: nowrap !important; } #page-monitoring .noc-split-grid > .dashboard-card .card-header > span { font-size: 0.60rem !important; white-space: nowrap !important; flex-shrink: 0 !important; padding: 2px 6px !important; } #page-monitoring .noc-split-grid > .dashboard-card:first-child .card-body { padding: 4px 8px 8px 8px !important; width: 100% !important; box-sizing: border-box !important; } #page-monitoring .noc-split-grid > .dashboard-card:first-child .card-body > div { height: 140px !important; min-height: 140px !important; max-height: 140px !important; width: 100% !important; max-width: 100% !important; } #network-latency-chart { width: 100% !important; max-width: 100% !important; height: 140px !important; max-height: 140px !important; } #page-monitoring .noc-split-grid > .dashboard-card:last-child .card-body { padding: 8px 10px 10px 10px !important; } #page-monitoring .site-link-list { width: 100% !important; max-width: 100% !important; min-width: 0 !important; gap: 6px !important; } #page-monitoring .site-link-item { padding: 8px 10px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #page-monitoring .sli-header { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; gap: 4px !important; width: 100% !important; min-width: 0 !important; font-size: 0.66rem !important; margin-bottom: 5px !important; } #page-monitoring .sli-header > span:first-child { min-width: 0 !important; flex: 1 1 auto !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 0.66rem !important; } #page-monitoring .sli-header .status-pill { flex-shrink: 0 !important; font-size: 0.58rem !important; padding: 2px 6px !important; } #page-monitoring .sli-bar { margin-bottom: 5px !important; height: 5px !important; } #page-monitoring .sli-meta { display: flex !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; gap: 4px !important; width: 100% !important; min-width: 0 !important; font-size: 0.56rem !important; white-space: nowrap !important; } #page-monitoring .noc-stream-header { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; padding: 10px 12px !important; width: 100% !important; box-sizing: border-box !important; } #page-monitoring .noc-stream-actions { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; width: 100% !important; box-sizing: border-box !important; } #page-monitoring .noc-stream-actions button { flex: 1 1 auto !important; min-width: 0 !important; font-size: 0.68rem !important; padding: 6px 8px !important; justify-content: center !important; } /* Perbaikan Pop-up Peta Leaflet & Mini-Map agar Tidak Pernah Keluar Layar Kanan */ .home-map-leaflet, #home-blitar-map, .full-blitar-map-el, #full-blitar-map { width: 100% !important; max-width: 100% !important; overflow: hidden !important; box-sizing: border-box !important; } .cyber-leaflet-popup .leaflet-popup-content-wrapper { width: 200px !important; min-width: 0 !important; max-width: 72vw !important; padding: 8px !important; box-sizing: border-box !important; } .cyber-leaflet-popup .leaflet-popup-content { width: 180px !important; min-width: 0 !important; max-width: 66vw !important; margin: 4px !important; } .site-popup-card, .popup-cyber-title, .popup-address-text, .popup-device-notice, .btn-popup-gmaps { width: 100% !important; min-width: 0 !important; max-width: 100% !important; font-size: 0.68rem !important; white-space: normal !important; word-break: break-word !important; box-sizing: border-box !important; } .popup-coord-pill { font-size: 0.62rem !important; max-width: 100% !important; padding: 2px 6px !important; box-sizing: border-box !important; } .blitar-marker-pin, .leaflet-marker-icon.custom-home-icon, .leaflet-marker-icon.custom-site-icon { overflow: visible !important; } /* Perbaikan Halaman Laporan AI, Info Tim Shift & Login Portal */ .ai-hero-header, .shift-section-box, .team-grid, .shift-team-grid { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; flex-wrap: wrap !important; grid-template-columns: 1fr !important; } .team-member-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } .ai-hero-header > div, .ai-hero-actions, .ai-action-btns { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .ai-hero-header button { flex: 1 1 calc(50% - 6px) !important; min-width: 0 !important; justify-content: center !important; font-size: 0.72rem !important; padding: 6px 8px !important; } .auth-card input[type="text"], .auth-card input[type="email"], .auth-card input[type="password"] { font-size: 0.78rem !important; padding-right: 36px !important; text-overflow: ellipsis !important; } .user-menu-dropdown { position: fixed !important; top: 56px !important; right: 10px !important; left: auto !important; width: 270px !important; max-width: calc(100vw - 20px) !important; z-index: 9999999 !important; } .notif-dropdown { position: fixed !important; top: 56px !important; right: 10px !important; left: 10px !important; width: auto !important; max-width: none !important; z-index: 9999998 !important; } /* ====================================================================== */ /* PERBAIKAN 5 KOMPONEN MOBILE SESUAI SCREENSHOT IPHONE SE (<= 576px) */ /* ====================================================================== */ /* 1. Modal AI Assistant (#ai-assistant-modal): Tombol Footer Rapi, Proporsional & Tidak Bertumpuk */ #ai-assistant-modal .modal-footer { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding: 12px 14px !important; width: 100% !important; box-sizing: border-box !important; } #ai-assistant-modal .modal-footer > button, #ai-assistant-modal .modal-footer > .btn { width: 100% !important; min-width: 0 !important; height: 38px !important; min-height: 38px !important; max-height: 42px !important; padding: 6px 10px !important; margin: 0 !important; font-size: 0.76rem !important; font-weight: 600 !important; display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 6px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; box-sizing: border-box !important; border-radius: 8px !important; } #ai-assistant-modal .modal-footer > button:nth-child(3), #ai-assistant-modal .modal-footer > .btn:nth-child(3) { grid-column: 1 / -1 !important; width: 100% !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; color: #F8FAFC !important; margin-left: 0 !important; } /* Modal Riwayat Analisis Asisten AI (#ai-history-modal): Responsif Mobile */ #ai-history-modal .modal-header { padding: 12px 14px !important; } #ai-history-modal .modal-header h5 { font-size: 0.92rem !important; } #ai-history-modal .modal-body { padding: 10px 12px !important; max-height: 60vh !important; } #ai-history-modal .modal-footer { padding: 10px 14px !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; gap: 8px !important; width: 100% !important; box-sizing: border-box !important; } #ai-history-modal .modal-footer #ai-history-count { font-size: 0.72rem !important; color: #94A3B8 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; flex: 1 1 auto !important; } #ai-history-modal .modal-footer button { padding: 5px 14px !important; min-height: 32px !important; height: 32px !important; font-size: 0.74rem !important; font-weight: 600 !important; white-space: nowrap !important; flex-shrink: 0 !important; } /* Paginasi Riwayat AI Anti-Terpotong di Layar HP */ .ai-history-pagination { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 10px 4px 2px 4px !important; margin-top: 10px !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; width: 100% !important; box-sizing: border-box !important; gap: 6px !important; } .ai-history-pagination .ai-page-btn { padding: 5px 10px !important; min-height: 30px !important; height: 30px !important; max-height: 30px !important; font-size: 0.70rem !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; white-space: nowrap !important; box-sizing: border-box !important; border-radius: 6px !important; flex-shrink: 0 !important; } .ai-history-pagination .ai-page-info { font-size: 0.70rem !important; color: #94A3B8 !important; font-weight: 600 !important; white-space: nowrap !important; text-align: center !important; flex-shrink: 0 !important; } .ai-history-pagination .page-text-desktop { display: none !important; } .ai-history-pagination .page-text-mobile { display: inline !important; } /* 2. Modal Tambah / Edit Perangkat (#device-modal): Tombol Footer Sama Besar & Utuh */ #device-modal .modal-footer { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 6px !important; padding: 10px 12px !important; width: 100% !important; box-sizing: border-box !important; } #device-modal .modal-footer > div { display: contents !important; } #device-modal .modal-footer button, #device-modal .modal-footer .btn { flex: 1 1 0% !important; width: 100% !important; min-width: 0 !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; padding: 0 4px !important; margin: 0 !important; font-size: 0.72rem !important; display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 5px !important; white-space: nowrap !important; box-sizing: border-box !important; } /* 3. Modal Kelola Lokasi Infrastruktur (#loc-manager-modal): Tabel Lokasi Muncul Utuh & Tombol Sejajar */ #loc-manager-modal .modal-card { width: calc(100vw - 24px) !important; max-width: 100% !important; max-height: 86vh !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; box-sizing: border-box !important; } #loc-manager-modal .modal-header { flex-shrink: 0 !important; padding: 10px 14px !important; position: relative !important; z-index: 5 !important; } #loc-manager-modal .modal-close-btn { width: 32px !important; height: 32px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; pointer-events: auto !important; z-index: 10 !important; flex-shrink: 0 !important; } #loc-manager-modal .modal-body { display: block !important; flex: 1 1 auto !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; padding: 10px 12px 12px 12px !important; max-height: calc(88vh - 48px) !important; box-sizing: border-box !important; } #loc-manager-modal .loc-table-wrap { display: block !important; width: 100% !important; min-height: 140px !important; max-height: 162px !important; overflow-x: auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; margin-bottom: 10px !important; border: 1.5px solid rgba(148, 163, 184, 0.45) !important; border-radius: 8px !important; background: rgba(8, 12, 22, 0.9) !important; box-sizing: border-box !important; } #loc-manager-modal .loc-table-wrap .data-table { min-width: 420px !important; width: 100% !important; font-size: 0.70rem !important; } #loc-manager-modal .loc-table-wrap .data-table th, #loc-manager-modal .loc-table-wrap .data-table td { padding: 5px 8px !important; font-size: 0.70rem !important; } #loc-manager-modal form h5 { margin: 0 0 8px 0 !important; font-size: 0.82rem !important; } #loc-manager-modal form .form-row-2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } #loc-manager-modal form .form-group { margin-bottom: 7px !important; } #loc-manager-modal form .form-group label { font-size: 0.70rem !important; margin-bottom: 3px !important; } #loc-manager-modal form .form-group input { height: 33px !important; padding: 4px 8px !important; font-size: 0.74rem !important; } #loc-manager-modal .loc-form-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; width: 100% !important; margin-top: 8px !important; box-sizing: border-box !important; } #loc-manager-modal .loc-form-actions button, #loc-manager-modal .loc-form-actions .btn { flex: 1 1 0% !important; width: 100% !important; min-width: 0 !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; padding: 0 6px !important; margin: 0 !important; font-size: 0.72rem !important; display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 5px !important; white-space: nowrap !important; box-sizing: border-box !important; } /* 4. Halaman Lokasi - Blueprint Controls: 3 Site & Mode Kelola Titik Utuh Tanpa Terpotong */ .floorplan-intro-bar { padding: 12px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; } .site-blueprint-selector { width: 100% !important; max-width: 100% !important; gap: 8px !important; margin-bottom: 6px !important; box-sizing: border-box !important; } .bp-sites-bar { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 5px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .bp-sites-bar .btn-bp-choice { width: 100% !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; padding: 0 4px !important; font-size: 0.64rem !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; box-sizing: border-box !important; } .bp-controls-bar { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 5px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .bp-controls-bar .dimension-switcher { flex: 1 1 auto !important; min-width: 0 !important; display: grid !important; grid-template-columns: auto 1fr !important; gap: 3px !important; padding: 3px !important; height: 34px !important; align-items: center !important; box-sizing: border-box !important; } .bp-controls-bar .dimension-switcher .btn-dim { height: 26px !important; min-height: 26px !important; padding: 0 6px !important; font-size: 0.62rem !important; display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 4px !important; white-space: nowrap !important; box-sizing: border-box !important; } .bp-controls-bar .btn-bp-pin-manager, #btn-bp-edit-pins { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; padding: 0 8px !important; font-size: 0.62rem !important; display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 4px !important; white-space: nowrap !important; box-sizing: border-box !important; } /* 5. Halaman Lokasi - Kartu Zona Denah 2D CAD: Judul, Badge '3 ASET' & Chip Perangkat Lurus Kanan-Kiri */ .floorplan-master-container { padding: 10px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .blueprint-canvas-box { padding: 10px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .floorplan-split-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; width: 100% !important; box-sizing: border-box !important; } .floorplan-legend-panel { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .legend-room-card { padding: 10px 12px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .legend-room-head { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; flex-wrap: nowrap !important; gap: 6px !important; width: 100% !important; margin-bottom: 6px !important; } .legend-room-head > span:first-child { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 0.70rem !important; font-weight: 800 !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important; flex: 1 1 auto !important; } .legend-room-head .badge-pill-cyan { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; flex-shrink: 0 !important; font-size: 0.60rem !important; font-weight: 700 !important; padding: 2px 8px !important; height: 20px !important; min-height: 20px !important; max-height: 20px !important; border-radius: 999px !important; line-height: 1 !important; box-sizing: border-box !important; } .legend-room-desc { font-size: 0.68rem !important; line-height: 1.35 !important; margin-bottom: 8px !important; } .bp-devices-chips { display: flex !important; flex-direction: column !important; gap: 5px !important; width: 100% !important; } .bp-devices-chips .bp-chip, .legend-room-card .bp-chip { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 5px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 28px !important; min-height: 28px !important; padding: 0 7px !important; font-size: 0.56rem !important; letter-spacing: -0.2px !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; box-sizing: border-box !important; } .legend-room-card .bp-chip i { flex-shrink: 0 !important; width: 14px !important; text-align: center !important; font-size: 0.68rem !important; } /* ========================================================================= 6. INFO TIM & SHIFT (#page-users) — Tombol Kanan-Kiri & Header Kartu Rapi ========================================================================= */ #page-users .live-shift-hero { align-items: stretch !important; } #page-users .lsh-right, #page-users .shift-clock-box { width: 100% !important; box-sizing: border-box !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } #page-users .loc-tab-switcher { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; margin-bottom: 12px !important; box-sizing: border-box !important; } #page-users .loc-tab-switcher button, #page-users .loc-tab-switcher .btn, #page-users .loc-tab-switcher .loc-tab-btn { width: 100% !important; min-width: 0 !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; padding: 0 8px !important; margin: 0 !important; font-size: 0.72rem !important; font-weight: 700 !important; display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 6px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; box-sizing: border-box !important; } #page-users .loc-tab-switcher button i { font-size: 0.74rem !important; flex-shrink: 0 !important; } #users-panel-rbac .dashboard-card .card-header { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 3px !important; padding: 10px 12px !important; } #users-panel-rbac .dashboard-card .card-header .card-title-group { width: 100% !important; } #users-panel-rbac .dashboard-card .card-header .card-title-group h4 { font-size: 0.78rem !important; white-space: nowrap !important; overflow: visible !important; } #users-panel-rbac .dashboard-card .card-header > span { font-size: 0.66rem !important; line-height: 1.3 !important; color: #94A3B8 !important; white-space: normal !important; } /* ========================================================================= 7. PENGATURAN & DB (#page-settings) — Backup & Keamanan Rapi ========================================================================= */ #page-settings .backup-actions-box { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; padding: 12px !important; margin-top: 12px !important; width: 100% !important; box-sizing: border-box !important; } #page-settings .backup-actions-box h5 { font-size: 0.80rem !important; line-height: 1.3 !important; margin: 0 0 4px 0 !important; display: flex !important; align-items: center !important; gap: 6px !important; } #page-settings .backup-actions-box p { font-size: 0.68rem !important; line-height: 1.45 !important; color: #94A3B8 !important; margin: 0 !important; } #page-settings .backup-actions-box > div:last-child { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; box-sizing: border-box !important; } #page-settings .backup-actions-box > div:last-child button, #page-settings .backup-actions-box > div:last-child .btn { width: 100% !important; min-width: 0 !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; padding: 0 6px !important; margin: 0 !important; font-size: 0.58rem !important; letter-spacing: -0.2px !important; font-weight: 700 !important; display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 4px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; box-sizing: border-box !important; } #page-settings .backup-actions-box > div:last-child button:first-child { grid-column: span 2 !important; font-size: 0.68rem !important; letter-spacing: 0 !important; gap: 6px !important; } #page-settings .backup-actions-box > div:last-child button i { font-size: 0.68rem !important; flex-shrink: 0 !important; } #page-settings .dashboard-card .card-header { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 6px !important; padding: 10px 12px !important; } #page-settings .dashboard-card .card-header .card-title-group { flex: 1 1 100% !important; min-width: 0 !important; } #page-settings .dashboard-card .card-header .card-title-group h4 { font-size: 0.76rem !important; line-height: 1.35 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } #page-settings .security-check-list .sec-item { align-items: flex-start !important; gap: 10px !important; font-size: 0.72rem !important; line-height: 1.45 !important; padding: 8px 0 !important; } #page-settings .security-check-list .sec-item i { margin-top: 2px !important; font-size: 0.92rem !important; flex-shrink: 0 !important; } /* ========================================================================= 8. MODAL MODE LIHAT / DETAIL PERANGKAT (#device-detail-modal) — Anti-Potong ========================================================================= */ #device-detail-modal .modal-card { width: 94vw !important; max-width: 94vw !important; max-height: 93vh !important; padding: 8px 12px 10px 12px !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; box-sizing: border-box !important; } #device-detail-modal .modal-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; padding: 2px 0 6px 0 !important; margin-bottom: 4px !important; flex-shrink: 0 !important; } #device-detail-modal .modal-header .modal-title-wrap { display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; flex: 1 1 auto !important; } #device-detail-modal .modal-header .btn-back-modal { width: 28px !important; height: 28px !important; min-width: 28px !important; padding: 0 !important; flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } #device-detail-modal .modal-header .modal-title-wrap > div { min-width: 0 !important; flex: 1 1 auto !important; } #device-detail-modal #detail-dev-name { font-size: 0.86rem !important; line-height: 1.2 !important; margin: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #device-detail-modal #detail-dev-code { font-size: 0.64rem !important; line-height: 1.2 !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #device-detail-modal #detail-dev-status-badge { flex-shrink: 0 !important; } #device-detail-modal #detail-dev-status-badge .status-pill { font-size: 0.62rem !important; padding: 3px 8px !important; white-space: nowrap !important; } #device-detail-modal .modal-body { display: block !important; padding: 2px 2px 6px 2px !important; margin: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; width: 100% !important; box-sizing: border-box !important; } #device-detail-modal .detail-info-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4px 10px !important; padding: 8px 10px !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; flex-shrink: 0 !important; box-sizing: border-box !important; overflow: visible !important; } #device-detail-modal .detail-info-item { min-width: 0 !important; max-width: 100% !important; grid-column: span 1 !important; box-sizing: border-box !important; } #device-detail-modal .detail-info-item:nth-last-child(2), #device-detail-modal .detail-info-item:last-child, #device-detail-modal .detail-info-item[style*="span 2"], #device-detail-modal .detail-info-item[style*="span 3"] { grid-column: 1 / -1 !important; } #device-detail-modal .detail-info-item .d-label { font-size: 0.58rem !important; line-height: 1.2 !important; letter-spacing: 0.3px !important; margin-bottom: 2px !important; color: #94A3B8 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #device-detail-modal .detail-info-item .d-val { font-size: 0.72rem !important; line-height: 1.32 !important; white-space: normal !important; word-break: break-word !important; overflow-wrap: anywhere !important; } #device-detail-modal #detail-dev-config { font-size: 0.64rem !important; line-height: 1.35 !important; white-space: pre-wrap !important; word-break: break-all !important; overflow-wrap: anywhere !important; background: rgba(15, 23, 42, 0.7) !important; border: 1px solid rgba(56, 189, 248, 0.22) !important; border-radius: 6px !important; padding: 5px 8px !important; margin-top: 2px !important; display: block !important; } #device-detail-modal #detail-dev-desc { font-size: 0.70rem !important; line-height: 1.35 !important; white-space: normal !important; word-break: break-word !important; } #device-detail-modal .telemetry-bar-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 5px !important; margin-top: 6px !important; width: 100% !important; box-sizing: border-box !important; } #device-detail-modal .tel-box { padding: 4px 8px !important; min-width: 0 !important; box-sizing: border-box !important; } #device-detail-modal .tel-box span { font-size: 0.56rem !important; line-height: 1.15 !important; margin-bottom: 1px !important; } #device-detail-modal .tel-box strong { font-size: 0.68rem !important; line-height: 1.2 !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #device-detail-modal .detail-history-box { padding: 6px 10px !important; margin-top: 6px !important; width: 100% !important; box-sizing: border-box !important; } #device-detail-modal .detail-history-box h6 { font-size: 0.66rem !important; margin: 0 0 4px 0 !important; } #device-detail-modal .detail-history-box .hist-row { display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr) auto !important; gap: 6px !important; align-items: center !important; font-size: 0.58rem !important; padding: 3px 0 !important; } #device-detail-modal .detail-history-box .hist-row span { min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #device-detail-modal .modal-footer { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; padding: 8px 0 2px 0 !important; margin-top: 6px !important; flex-shrink: 0 !important; width: 100% !important; box-sizing: border-box !important; } #device-detail-modal .modal-footer .btn { height: 32px !important; min-height: 32px !important; max-height: 32px !important; padding: 0 8px !important; font-size: 0.68rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; } /* ========================================================================= 9. BADGE ANGKA NOTIFIKASI LONCENG & BOTTOM NAV PAS DI TENGAH LINGKARAN ========================================================================= */ #topbar-alert-count, #bottom-alerts-badge, .mb-nav-item #bottom-alerts-badge, .mb-nav-item.active #bottom-alerts-badge, .mb-nav-item:hover #bottom-alerts-badge { width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; max-width: 16px !important; max-height: 16px !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; border: 1.5px solid #0B0E14 !important; background: #FF1744 !important; color: #FFFFFF !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 0.56rem !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: 0 !important; text-indent: 0 !important; align-items: center !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; } #bottom-alerts-badge, .mb-nav-item #bottom-alerts-badge { position: absolute !important; top: 3px !important; right: calc(50% - 17px) !important; } /* ========================================================================= 10. MODAL TAMBAH / EDIT AKUN USER (#user-modal) — Rapi & Kanan-Kiri Sejajar ========================================================================= */ .lbl-desktop-only { display: none !important; } #user-modal .modal-card { width: 94vw !important; max-width: 94vw !important; max-height: 92vh !important; padding: 10px 12px !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; box-sizing: border-box !important; } #user-modal .modal-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; padding: 2px 0 8px 0 !important; margin-bottom: 6px !important; flex-shrink: 0 !important; } #user-modal .modal-header .modal-title-wrap { display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; flex: 1 1 auto !important; } /* Sembunyikan ikon ganda karena #modal-user-title sudah memuat ikon sendiri */ #user-modal .modal-header .modal-title-wrap > i:first-child { display: none !important; } #user-modal #modal-user-title { font-size: 0.80rem !important; line-height: 1.25 !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: 7px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #user-modal #modal-user-title i { flex-shrink: 0 !important; font-size: 0.84rem !important; } #user-modal #user-form { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; } #user-modal .modal-body { display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 2px 2px 6px 2px !important; margin: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; flex: 1 1 auto !important; min-height: 0 !important; } #user-modal .form-row-2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin: 0 !important; } /* Baris Email & Kata Sandi dibuat 1 kolom penuh agar teks keterangan sandi tidak terpecah */ #user-modal .form-row-2:nth-of-type(2) { grid-template-columns: 1fr !important; gap: 8px !important; } #user-modal .form-group { margin: 0 !important; min-width: 0 !important; } #user-modal .form-group label { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 4px !important; font-size: 0.68rem !important; line-height: 1.25 !important; margin-bottom: 3px !important; color: #E2E8F0 !important; } #user-modal .form-group label span { font-size: 0.60rem !important; line-height: 1.2 !important; font-weight: 500 !important; } #user-modal .form-group input, #user-modal .form-group select { height: 33px !important; min-height: 33px !important; padding: 4px 8px !important; font-size: 0.72rem !important; width: 100% !important; box-sizing: border-box !important; } /* Kotak Foto Profil Pengguna (Avatar) */ #user-modal #user-avatar-form-group { padding: 8px 10px !important; margin: 0 !important; border-radius: 8px !important; box-sizing: border-box !important; } #user-modal #user-avatar-form-group > label { font-size: 0.70rem !important; margin-bottom: 6px !important; display: flex !important; align-items: center !important; gap: 6px !important; } #user-modal #user-avatar-form-group > div { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; width: 100% !important; } #user-modal #avatar-preview-container { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; } #user-modal #user-avatar-preview-icon { font-size: 1.15rem !important; } #user-modal #user-avatar-form-group > div > div:last-child { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; align-items: center !important; min-width: 0 !important; flex: 1 1 auto !important; } #user-modal #user-avatar-form-group > div > div:last-child button, #user-modal #user-avatar-form-group > div > div:last-child .btn { width: 100% !important; min-width: 0 !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; padding: 0 6px !important; margin: 0 !important; font-size: 0.66rem !important; font-weight: 700 !important; display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 5px !important; white-space: nowrap !important; box-sizing: border-box !important; } #user-modal #user-avatar-form-group > div > div:last-child > span { grid-column: 1 / -1 !important; font-size: 0.58rem !important; line-height: 1.3 !important; margin-top: 1px !important; color: #94A3B8 !important; } /* Footer Modal User (Batal & Simpan User Sejajar Kanan-Kiri Sama Besar) */ #user-modal .modal-footer { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; padding: 8px 0 2px 0 !important; margin-top: 4px !important; width: 100% !important; flex-shrink: 0 !important; box-sizing: border-box !important; } #user-modal .modal-footer button, #user-modal .modal-footer .btn { width: 100% !important; min-width: 0 !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; padding: 0 8px !important; margin: 0 !important; font-size: 0.72rem !important; font-weight: 700 !important; display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 6px !important; white-space: nowrap !important; box-sizing: border-box !important; } /* ========================================================================= 11. ANTI-POTONG KOTAK GRAFIK DASHBOARD (.charts-row) & BORDER TAJAM ========================================================================= */ .charts-row, .bottom-three-grid, body.page-dashboard-active .charts-row, body.page-dashboard-active .bottom-three-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; gap: 10px !important; margin-bottom: 10px !important; box-sizing: border-box !important; } .dashboard-card, .charts-row > .dashboard-card, .bottom-three-grid > .dashboard-card, .trend-card, .donut-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; overflow: hidden !important; border-radius: 12px !important; } .trend-card .card-header { grid-template-columns: minmax(0, 1fr) auto !important; padding: 8px 10px 4px 10px !important; gap: 4px !important; } .trend-card .card-header .card-title-group h4, .trend-card .card-title-group h4, .donut-card .card-header .card-title-group h4 { font-size: 0.68rem !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; } .donut-card .card-header { padding: 8px 10px 4px 10px !important; gap: 4px !important; } .donut-card .card-header .card-link { font-size: 0.60rem !important; padding: 2px 6px !important; } .trend-card .card-header .chart-legend-inline, .trend-card .chart-legend-inline { font-size: 0.56rem !important; gap: 4px !important; } .trend-card .chart-body { width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: hidden !important; } .trend-card .chart-body canvas, #trendChart { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* ========================================================================= 12. MULTI-CHANNEL ALERT GATEWAY & DAFTAR INSIDEN (#page-alerts) — Rapi & Garis Tegas ========================================================================= */ #page-alerts .dashboard-card { border: 1px solid rgba(244, 63, 94, 0.38) !important; border-radius: 12px !important; overflow: hidden !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #page-alerts .dashboard-card .card-header { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 8px !important; padding: 10px 12px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; width: 100% !important; box-sizing: border-box !important; } #page-alerts .dashboard-card .card-header .card-title-group { width: 100% !important; min-width: 0 !important; display: flex !important; align-items: center !important; gap: 8px !important; } #page-alerts .dashboard-card .card-header .card-title-group h4 { font-size: 0.78rem !important; line-height: 1.3 !important; white-space: normal !important; overflow: visible !important; margin: 0 !important; } /* Badge Cooldown Proporsional (Tidak Melebar Kaku 100% Seperti Input Box) */ #page-alerts .dashboard-card .card-header .badge-pill-cyan { align-self: flex-start !important; width: auto !important; max-width: 100% !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 4px 10px !important; font-size: 0.64rem !important; font-weight: 600 !important; border-radius: 999px !important; border: 1px solid rgba(56, 189, 248, 0.38) !important; background: rgba(15, 23, 42, 0.8) !important; color: #E2E8F0 !important; box-sizing: border-box !important; } #page-alerts .dashboard-card .card-body:not(.p-0) { padding: 10px 12px !important; width: 100% !important; box-sizing: border-box !important; } #page-alerts .notif-gateways-row { display: flex !important; flex-direction: column !important; gap: 8px !important; width: 100% !important; box-sizing: border-box !important; } /* Ketiga Kotak Gateway (n8n, SMTP, Telegram) Memiliki Garis Border Tegas & Seragam */ #page-alerts .gateway-chip, #page-alerts .gateway-chip.active, #page-alerts #gc-n8n, #page-alerts #gc-smtp, #page-alerts #gc-telegram { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; padding: 9px 10px !important; width: 100% !important; min-width: 0 !important; border-radius: 10px !important; background: linear-gradient(180deg, rgba(15, 23, 42, 0.82) 0%, rgba(9, 13, 22, 0.95) 100%) !important; border: 1px solid rgba(0, 240, 255, 0.38) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; box-sizing: border-box !important; } #page-alerts .gateway-chip .gc-icon { width: 32px !important; height: 32px !important; min-width: 32px !important; font-size: 0.98rem !important; border-radius: 8px !important; flex-shrink: 0 !important; } #page-alerts .gateway-chip .gc-info { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; } #page-alerts .gateway-chip .gc-info strong { font-size: 0.70rem !important; line-height: 1.25 !important; color: #FFFFFF !important; white-space: nowrap !important; overflow: visible !important; } #page-alerts .gateway-chip .gc-info span { font-size: 0.60rem !important; line-height: 1.35 !important; color: #94A3B8 !important; white-space: normal !important; word-break: break-word !important; } #page-alerts .gateway-chip .gc-info code { font-size: 0.58rem !important; color: #E2E8F0 !important; background: rgba(15, 23, 42, 0.85) !important; padding: 1px 4px !important; border-radius: 4px !important; } #page-alerts .gateway-chip .status-pill { padding: 2px 7px !important; font-size: 0.58rem !important; flex-shrink: 0 !important; white-space: nowrap !important; border-radius: 999px !important; } /* Filter & Tombol Bersihkan / Refresh pada Daftar Insiden Sejajar Kanan-Kiri */ #page-alerts .filter-select-group { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; box-sizing: border-box !important; } #page-alerts .filter-select-group select { grid-column: 1 / -1 !important; width: 100% !important; min-width: 0 !important; height: 34px !important; min-height: 34px !important; font-size: 0.72rem !important; padding: 4px 10px !important; box-sizing: border-box !important; } #page-alerts .filter-select-group .btn, #page-alerts .filter-select-group .btn-reset, #page-alerts .filter-select-group .btn-outline-cyber { width: 100% !important; min-width: 0 !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; padding: 0 8px !important; margin: 0 !important; font-size: 0.70rem !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; white-space: nowrap !important; box-sizing: border-box !important; } #page-alerts .filter-select-group .btn.hidden { display: none !important; } } /* 3. Layar Ekstrem Kecil (iPhone SE Gen 1 - 320px) */ @media (max-width: 330px) { .topbar { padding: 6px 8px !important; gap: 6px !important; } .topbar-right { gap: 6px !important; } .live-clock-pill { padding: 3px 6px !important; font-size: 0.66rem !important; } #notif-bell-btn, .notification-wrapper { width: 28px !important; height: 28px !important; min-width: 28px !important; } .kpi-grid { gap: 6px !important; } .kpi-grid .stat-card, .kpi-grid .kpi-card { padding: 8px 6px !important; } .donut-card .donut-visual-wrap, .donut-card .donut-visual-wrap canvas { width: 82px !important; height: 82px !important; max-width: 82px !important; max-height: 82px !important; } .donut-card .donut-legend-col, .donut-card .donut-legend-wrap { flex: 1 1 auto !important; min-width: 0 !important; } .donut-card .donut-legend-col .d-leg-name, .donut-card .d-leg-name { font-size: 0.60rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .donut-card .donut-legend-col .d-leg-val, .donut-card .d-leg-val { font-size: 0.60rem !important; } .btn-bp-choice { padding: 4px 6px !important; font-size: 0.70rem !important; } } /* ========================================================================== */ /* v6.0.52 - PENYESUAIAN MULTI-CHANNEL ALERT GATEWAY & MODAL EDIT INSIDEN */ /* 1. Garis Kotak Tengah Gateway (SMTP Dispatcher) Tegas & Jelas di Desktop */ /* 2. Textarea & Input Modal Insiden Rapi Berjarak (Anti-Nimpa Garis) */ /* ========================================================================== */ #page-alerts .gateway-chip, #page-alerts .gateway-chip.active, #page-alerts #gc-n8n, #page-alerts #gc-smtp, #page-alerts #gc-telegram { border: 1.2px solid rgba(0, 240, 255, 0.38) !important; } #page-alerts #gc-smtp { border-color: rgba(245, 158, 11, 0.45) !important; box-shadow: 0 0 10px rgba(245, 158, 11, 0.12) !important; } #page-alerts #gc-smtp:hover { border-color: rgba(245, 158, 11, 0.75) !important; box-shadow: 0 0 14px rgba(245, 158, 11, 0.25) !important; } /* Modal Edit Insiden: Spasi Textarea & Input Proporsional (Anti-Nimpa Garis) */ #incident-modal-overlay .modal-card { background: linear-gradient(180deg, #14161E 0%, #0B0C10 100%) !important; border: 1.5px solid rgba(225, 29, 72, 0.55) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 16px rgba(225, 29, 72, 0.14) !important; } #incident-modal-overlay .modal-header { padding: 14px 18px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } #incident-modal-overlay .modal-header h5 { margin: 0 !important; line-height: 1.3 !important; font-size: 1rem !important; font-weight: 700 !important; } #incident-modal-overlay .form-group { display: flex !important; flex-direction: column !important; gap: 6px !important; } #incident-modal-overlay .form-group label { font-size: 0.80rem !important; font-weight: 600 !important; color: #94A3B8 !important; margin: 0 !important; } #incident-modal-overlay .form-control, #incident-modal-overlay select, #incident-modal-overlay textarea { width: 100% !important; box-sizing: border-box !important; padding: 9px 12px !important; background: rgba(10, 15, 29, 0.85) !important; border: 1px solid rgba(0, 240, 255, 0.25) !important; border-radius: 6px !important; color: #F8FAFC !important; font-size: 0.84rem !important; line-height: 1.45 !important; } #incident-modal-overlay textarea { min-height: 72px !important; padding: 10px 12px !important; resize: vertical !important; } #incident-modal-overlay .modal-footer { padding: 12px 18px !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; background: rgba(0, 0, 0, 0.25) !important; } /* ========================================================================== */ /* v6.0.53 - PENYESUAIAN ASISTEN AI HERO, TOPBAR MOBILE & NOTIFIKASI READ */ /* 1. Judul & Subtitle AI Hero Card Berada di Sebelah Kanan Logo AI */ /* 2. Avatar Profil Mobile Pepet ke Kanan & Ikon Samping Seimbang */ /* ========================================================================== */ .ai-badge-group { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 14px !important; flex: 1 1 auto !important; min-width: 0 !important; } .ai-badge-pulse { width: 48px !important; height: 48px !important; min-width: 48px !important; border-radius: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .ai-badge-group > div:not(.ai-badge-pulse) { display: flex !important; flex-direction: column !important; gap: 2px !important; flex: 1 1 auto !important; min-width: 0 !important; } .ai-hero-title { font-size: 0.95rem !important; font-weight: 800 !important; line-height: 1.25 !important; margin: 0 !important; color: #FFFFFF !important; white-space: normal !important; } .ai-hero-sub { font-size: 0.72rem !important; line-height: 1.35 !important; color: #94A3B8 !important; margin: 0 !important; white-space: normal !important; } @media (max-width: 768px) { .ai-badge-group { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 12px !important; width: 100% !important; } .ai-badge-pulse { width: 44px !important; height: 44px !important; min-width: 44px !important; font-size: 1.15rem !important; border-radius: 10px !important; } .ai-hero-title { font-size: 0.88rem !important; line-height: 1.25 !important; } .ai-hero-sub { font-size: 0.68rem !important; line-height: 1.3 !important; } /* Topbar Mobile: Avatar Profil Pepet Kanan & Ikon Samping Rapi */ .topbar { padding: 6px 6px 6px 10px !important; gap: 6px !important; } .topbar-right { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 7px !important; margin-left: auto !important; margin-right: 0 !important; padding-right: 0 !important; flex-shrink: 0 !important; } .profile-dropdown-wrapper { margin: 0 !important; padding: 0 !important; margin-right: 0 !important; flex-shrink: 0 !important; } .user-profile-pill { padding: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: none !important; } .user-profile-pill .profile-avatar, .user-profile-pill .profile-avatar-circle, .user-profile-pill .avatar-circle { width: 32px !important; height: 32px !important; min-width: 32px !important; border-radius: 50% !important; border: 1.8px solid #EAB308 !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #1E293B !important; box-shadow: 0 0 8px rgba(234, 179, 8, 0.3) !important; } #topbar-ai-btn, .ai-quick-trigger, #notif-bell-btn, .notification-wrapper { width: 32px !important; height: 32px !important; min-width: 32px !important; border-radius: 7px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .live-clock-pill { height: 30px !important; padding: 0 7px !important; border-radius: 6px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; font-size: 0.68rem !important; } } @media (max-width: 340px) { .topbar { padding: 5px 4px 5px 8px !important; } .topbar-right { gap: 5px !important; } .live-clock-pill { padding: 0 5px !important; font-size: 0.62rem !important; } #topbar-ai-btn, #notif-bell-btn, .notification-wrapper, .user-profile-pill .profile-avatar { width: 29px !important; height: 29px !important; min-width: 29px !important; } } /* ========================================================================== */ /* v6.0.53 - PENYESUAIAN HEADER, AI TITLE, GATEWAY BORDER & BADGE NOTIFIKASI */ /* 1. Judul AI Assistant Berdampingan di Sebelah Kanan Logo AI */ /* 2. Avatar Profil Mobile Pepet ke Kanan & Ikon Samping Seimbang */ /* 3. Border Gateway Sesuai Warna Ikon (n8n: Coral, SMTP: Yellow, TG: Cyan) */ /* ========================================================================== */ .ai-badge-group { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 14px !important; width: auto !important; max-width: 100% !important; } .ai-badge-pulse { width: 48px !important; height: 48px !important; flex-shrink: 0 !important; } .ai-badge-group > div:not(.ai-badge-pulse) { display: flex !important; flex-direction: column !important; gap: 2px !important; flex: 1 1 auto !important; min-width: 0 !important; } .ai-hero-title { font-size: 1.05rem !important; font-weight: 800 !important; color: #FFFFFF !important; margin: 0 !important; line-height: 1.25 !important; word-break: break-word !important; } .ai-hero-sub { font-size: 0.72rem !important; color: #94A3B8 !important; line-height: 1.35 !important; } @media (max-width: 768px) { .ai-badge-group { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 12px !important; } .ai-badge-pulse { width: 42px !important; height: 42px !important; flex-shrink: 0 !important; } .ai-hero-title { font-size: 0.88rem !important; } .ai-hero-sub { font-size: 0.68rem !important; } } /* Item 4: Border Gateway Sesuai Warna Ikon */ #page-alerts #gc-n8n { border: 1.2px solid rgba(255, 109, 90, 0.45) !important; box-shadow: 0 0 10px rgba(255, 109, 90, 0.12) !important; } #page-alerts #gc-n8n:hover { border-color: #FF6D5A !important; box-shadow: 0 0 14px rgba(255, 109, 90, 0.28) !important; } #page-alerts #gc-smtp { border: 1.2px solid rgba(251, 191, 36, 0.45) !important; box-shadow: 0 0 10px rgba(251, 191, 36, 0.12) !important; } #page-alerts #gc-smtp:hover { border-color: #FBBF24 !important; box-shadow: 0 0 14px rgba(251, 191, 36, 0.28) !important; } #page-alerts #gc-telegram { border: 1.2px solid rgba(34, 158, 217, 0.45) !important; box-shadow: 0 0 10px rgba(34, 158, 217, 0.12) !important; } #page-alerts #gc-telegram:hover { border-color: #229ED9 !important; box-shadow: 0 0 14px rgba(34, 158, 217, 0.28) !important; } /* Item 2: Topbar Mobile - Avatar Profil Pepet ke Kanan & Ikon Samping Rapi */ @media (max-width: 768px) { .topbar { padding: 6px 4px 6px 8px !important; gap: 6px !important; } .topbar-right { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 7px !important; margin-left: auto !important; margin-right: 0 !important; padding-right: 0 !important; flex-shrink: 0 !important; } .profile-dropdown-wrapper { margin: 0 !important; padding: 0 !important; margin-right: 0 !important; flex-shrink: 0 !important; } .user-profile-pill { padding: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: none !important; } .user-profile-pill .profile-avatar, .user-profile-pill .profile-avatar-circle, .user-profile-pill .avatar-circle { width: 32px !important; height: 32px !important; min-width: 32px !important; border-radius: 50% !important; border: 1.8px solid #EAB308 !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #1E293B !important; box-shadow: 0 0 8px rgba(234, 179, 8, 0.3) !important; } #topbar-ai-btn, .ai-quick-trigger, #notif-bell-btn, .notification-wrapper { width: 32px !important; height: 32px !important; min-width: 32px !important; border-radius: 7px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .live-clock-pill { height: 30px !important; padding: 0 7px !important; border-radius: 6px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; font-size: 0.68rem !important; } } /* ========================================================================== */ /* FIX ITEM 1: ASISTEN AI TITLE BESIDE LOGO (ROW NOWRAP) */ /* ========================================================================== */ .ai-hero-header > div.ai-badge-group, .ai-hero-header .ai-badge-group, .ai-badge-group { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .ai-hero-header > div.ai-badge-group .ai-badge-pulse, .ai-badge-group .ai-badge-pulse { width: 44px !important; height: 44px !important; min-width: 44px !important; max-width: 44px !important; flex: 0 0 44px !important; flex-shrink: 0 !important; } .ai-hero-header > div.ai-badge-group > div:not(.ai-badge-pulse), .ai-badge-group > div:not(.ai-badge-pulse) { display: flex !important; flex-direction: column !important; gap: 2px !important; flex: 1 1 auto !important; min-width: 0 !important; max-width: calc(100% - 56px) !important; } .ai-hero-header > div.ai-badge-group .ai-hero-title, .ai-badge-group .ai-hero-title { font-size: 0.95rem !important; font-weight: 800 !important; line-height: 1.25 !important; margin: 0 !important; color: #FFFFFF !important; word-break: break-word !important; } .ai-hero-header > div.ai-badge-group .ai-hero-sub, .ai-badge-group .ai-hero-sub { font-size: 0.70rem !important; line-height: 1.3 !important; color: #94A3B8 !important; margin: 0 !important; word-break: break-word !important; } @media (max-width: 768px) { .ai-hero-header > div.ai-badge-group, .ai-hero-header .ai-badge-group, .ai-badge-group { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 10px !important; width: 100% !important; } .ai-hero-header > div.ai-badge-group .ai-badge-pulse, .ai-badge-group .ai-badge-pulse { width: 40px !important; height: 40px !important; min-width: 40px !important; max-width: 40px !important; flex: 0 0 40px !important; flex-shrink: 0 !important; } .ai-hero-header > div.ai-badge-group .ai-hero-title, .ai-badge-group .ai-hero-title { font-size: 0.84rem !important; line-height: 1.2 !important; } .ai-hero-header > div.ai-badge-group .ai-hero-sub, .ai-badge-group .ai-hero-sub { font-size: 0.65rem !important; line-height: 1.25 !important; } } /* ========================================================================== */ /* v6.0.54 - MODAL TITIK 3D: SAMAKAN UKURAN 3 TOMBOL FOOTER */ /* ========================================================================== */ #modal-3d-pin-editor .modal-footer, #modal-3d-pin-footer { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; padding: 12px 16px !important; width: 100% !important; box-sizing: border-box !important; background: rgba(15, 23, 42, 0.7) !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; } #modal-3d-pin-editor .modal-footer > div { display: contents !important; } #modal-3d-pin-editor .modal-footer button, #modal-3d-pin-editor .modal-footer .btn, #modal-3d-pin-footer button, #modal-3d-pin-footer .btn { flex: 1 1 0% !important; width: 100% !important; min-width: 0 !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; padding: 0 8px !important; margin: 0 !important; font-size: 0.78rem !important; font-weight: 700 !important; border-radius: 8px !important; display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 5px !important; white-space: nowrap !important; box-sizing: border-box !important; line-height: 1 !important; } #modal-3d-pin-editor #btn-fp3d-delete-pin { border: 1.2px solid rgba(239, 68, 68, 0.6) !important; color: #FCA5A5 !important; background: rgba(239, 68, 68, 0.12) !important; } #modal-3d-pin-editor #btn-fp3d-delete-pin:hover { border-color: #EF4444 !important; background: rgba(239, 68, 68, 0.25) !important; color: #FFFFFF !important; } #modal-3d-pin-editor #btn-fp3d-cancel-pin, #modal-3d-pin-footer button[onclick*="close3DPinModal"] { border: 1.2px solid rgba(255, 255, 255, 0.15) !important; color: #E2E8F0 !important; background: rgba(30, 41, 59, 0.7) !important; } #modal-3d-pin-editor #btn-fp3d-cancel-pin:hover, #modal-3d-pin-footer button[onclick*="close3DPinModal"]:hover { border-color: rgba(255, 255, 255, 0.3) !important; background: rgba(51, 65, 85, 0.8) !important; color: #FFFFFF !important; } #modal-3d-pin-editor #btn-fp3d-save-pin, #modal-3d-pin-footer button[type="submit"] { background: linear-gradient(180deg, #E11D48 0%, #BE123C 100%) !important; border: 1.2px solid rgba(255, 255, 255, 0.25) !important; color: #FFFFFF !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 12px rgba(225, 29, 72, 0.3) !important; } #modal-3d-pin-editor #btn-fp3d-save-pin:hover, #modal-3d-pin-footer button[type="submit"]:hover { background: linear-gradient(180deg, #F43F5E 0%, #E11D48 100%) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 16px rgba(225, 29, 72, 0.45) !important; } #modal-3d-pin-editor #btn-fp3d-delete-pin[style*="display: none"], #modal-3d-pin-footer #btn-fp3d-delete-pin[style*="display: none"] { display: none !important; } @media (max-width: 480px) { #modal-3d-pin-editor .modal-footer, #modal-3d-pin-footer { padding: 10px 10px !important; gap: 6px !important; } #modal-3d-pin-editor .modal-footer button, #modal-3d-pin-editor .modal-footer .btn, #modal-3d-pin-footer button, #modal-3d-pin-footer .btn { height: 38px !important; min-height: 38px !important; max-height: 38px !important; font-size: 0.72rem !important; padding: 0 4px !important; gap: 4px !important; } } /* ========================================================================== */ /* v6.0.55 - MODAL TITIK 3D: SAMAKAN UKURAN 3 TOMBOL FOOTER & SCROLL RAPI */ /* ========================================================================== */ #modal-3d-pin-editor .modal-card { width: 94vw !important; max-width: 480px !important; max-height: 90vh !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; padding: 0 !important; border-radius: 12px !important; box-sizing: border-box !important; } #modal-3d-pin-editor .modal-header { flex-shrink: 0 !important; padding: 12px 16px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; } #modal-3d-pin-editor form { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; overflow: hidden !important; min-height: 0 !important; margin: 0 !important; } #modal-3d-pin-editor .modal-body { flex: 1 1 auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding: 14px 16px !important; min-height: 0 !important; } #modal-3d-pin-editor .modal-footer, #modal-3d-pin-footer { flex-shrink: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; padding: 12px 16px !important; width: 100% !important; box-sizing: border-box !important; background: rgba(15, 23, 42, 0.85) !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; margin-top: auto !important; } #modal-3d-pin-editor .modal-footer > div { display: contents !important; } #modal-3d-pin-editor .modal-footer button, #modal-3d-pin-editor .modal-footer .btn, #modal-3d-pin-footer button, #modal-3d-pin-footer .btn { flex: 1 1 0% !important; width: 100% !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; padding: 0 6px !important; margin: 0 !important; font-size: 0.78rem !important; font-weight: 700 !important; border-radius: 8px !important; display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 5px !important; white-space: nowrap !important; box-sizing: border-box !important; line-height: 1 !important; } #modal-3d-pin-editor #btn-fp3d-delete-pin { border: 1.2px solid rgba(239, 68, 68, 0.6) !important; color: #FCA5A5 !important; background: rgba(239, 68, 68, 0.12) !important; } #modal-3d-pin-editor #btn-fp3d-delete-pin:hover { border-color: #EF4444 !important; background: rgba(239, 68, 68, 0.25) !important; color: #FFFFFF !important; } #modal-3d-pin-editor #btn-fp3d-cancel-pin, #modal-3d-pin-footer button[onclick*="close3DPinModal"] { border: 1.2px solid rgba(255, 255, 255, 0.15) !important; color: #E2E8F0 !important; background: rgba(30, 41, 59, 0.7) !important; } #modal-3d-pin-editor #btn-fp3d-cancel-pin:hover, #modal-3d-pin-footer button[onclick*="close3DPinModal"]:hover { border-color: rgba(255, 255, 255, 0.3) !important; background: rgba(51, 65, 85, 0.8) !important; color: #FFFFFF !important; } #modal-3d-pin-editor #btn-fp3d-save-pin, #modal-3d-pin-footer button[type="submit"] { background: linear-gradient(180deg, #E11D48 0%, #BE123C 100%) !important; border: 1.2px solid rgba(255, 255, 255, 0.25) !important; color: #FFFFFF !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 12px rgba(225, 29, 72, 0.3) !important; } #modal-3d-pin-editor #btn-fp3d-save-pin:hover, #modal-3d-pin-footer button[type="submit"]:hover { background: linear-gradient(180deg, #F43F5E 0%, #E11D48 100%) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 16px rgba(225, 29, 72, 0.45) !important; } #modal-3d-pin-editor #btn-fp3d-delete-pin[style*="display: none"], #modal-3d-pin-footer #btn-fp3d-delete-pin[style*="display: none"] { display: none !important; } @media (max-width: 480px) { #modal-3d-pin-editor .modal-footer, #modal-3d-pin-footer { padding: 10px 10px !important; gap: 6px !important; } #modal-3d-pin-editor .modal-footer button, #modal-3d-pin-editor .modal-footer .btn, #modal-3d-pin-footer button, #modal-3d-pin-footer .btn { height: 38px !important; min-height: 38px !important; max-height: 38px !important; font-size: 0.74rem !important; padding: 0 4px !important; gap: 4px !important; } } /* ========================================================================== */ /* v6.0.56 - REVISI PENGGUNA: AI HEADER, RED CARD BORDERS & REVERT TOPBAR FLUSH*/ /* 1. Ikon AI dibuat proporsional (54px) membingkai judul agar judul tidak lebih tinggi */ /* 2. Warna merah kartu 3D diperjelas & kuning tombol Ubah Titik diredam */ /* 3. Posisi profil topbar dikembalikan semula (tidak dipepetkan ke kanan) */ /* ========================================================================== */ /* POINT 1: Asisten AI - Ikon Cukup Tinggi & Membingkai Judul dengan Pas */ .ai-badge-group { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 14px !important; width: 100% !important; max-width: 100% !important; } .ai-badge-pulse { width: 54px !important; height: 54px !important; min-width: 54px !important; max-width: 54px !important; flex: 0 0 54px !important; border-radius: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.45rem !important; flex-shrink: 0 !important; box-shadow: 0 0 16px rgba(234, 179, 8, 0.4) !important; } .ai-badge-group > div:not(.ai-badge-pulse) { display: flex !important; flex-direction: column !important; gap: 2px !important; flex: 1 1 auto !important; min-width: 0 !important; justify-content: center !important; } .ai-hero-title { font-size: 0.90rem !important; font-weight: 800 !important; line-height: 1.2 !important; margin: 0 !important; color: #FFFFFF !important; word-break: break-word !important; } .ai-hero-sub { font-size: 0.68rem !important; line-height: 1.25 !important; color: #94A3B8 !important; margin: 0 !important; word-break: break-word !important; } @media (max-width: 768px) { .ai-badge-group { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 12px !important; width: 100% !important; } .ai-badge-pulse { width: 52px !important; height: 52px !important; min-width: 52px !important; max-width: 52px !important; flex: 0 0 52px !important; font-size: 1.35rem !important; border-radius: 12px !important; } .ai-hero-title { font-size: 0.84rem !important; line-height: 1.18 !important; margin: 0 0 2px 0 !important; } .ai-hero-sub { font-size: 0.65rem !important; line-height: 1.2 !important; } /* POINT 3: KEMBALIKAN POSISI PROFIL TOPBAR SEPERTI SEMULA (TIDAK DIPEPEKAN KE KANAN) */ .topbar { padding: 8px 14px !important; gap: 8px !important; } .topbar-right { display: flex !important; align-items: center !important; gap: 8px !important; margin-right: 0 !important; padding-right: 0 !important; flex-shrink: 0 !important; } .profile-dropdown-wrapper { margin: 0 !important; padding: 0 !important; margin-right: 4px !important; flex-shrink: 0 !important; } } /* POINT 2: PERJELAS GARIS MERAH PADA KARTU PERANGKAT 3D & REDAM KUNING */ .fp3d-device-card { border: 1.5px solid #E11D48 !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), 0 0 14px rgba(225, 29, 72, 0.32) !important; } .fp3d-device-card .btn-fp3d-focus { background: rgba(225, 29, 72, 0.15) !important; border: 1px solid #E11D48 !important; color: #FDA4AF !important; } .fp3d-device-card .btn-fp3d-focus:hover { background: rgba(225, 29, 72, 0.28) !important; border-color: #FF1744 !important; color: #FFFFFF !important; } /* ========================================================================== */ /* v6.0.57 - PERBAIKAN 4 PERMINTAAN PENGGUNA */ /* 1. Tombol Hapus Perangkat (#device-modal) Rapi & Tidak Terpotong */ /* 2. Sembunyikan Tombol Tambah Titik Hijau Atas Denah 3D Secara Permanen */ /* 3. Rapikan Avatar Upload (#user-modal) - Tidak Menimpa Ikon / Teks */ /* 4. Ikon Asisten AI Mulai Lebih Tinggi dari Judul (Judul Tidak Lebih Tinggi) */ /* ========================================================================== */ /* Fix 1: Tombol Hapus Perangkat */ #device-modal .modal-footer #btn-modal-delete-device { height: 38px !important; min-height: 38px !important; max-height: 38px !important; padding: 0 8px !important; font-size: 0.74rem !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; flex: 1 1 0% !important; min-width: 0 !important; } #device-modal .modal-footer #btn-modal-delete-device.hidden, #device-modal .modal-footer #btn-modal-delete-device[style*="display: none"] { display: none !important; } /* Fix 2: Sembunyikan Tombol Tambah Titik Hijau Atas Denah 3D */ #btn-fp3d-add-pin, .btn-fp3d-action.btn-fp3d-add-pin { display: none !important; } /* Fix 3: Avatar Upload (#user-modal) Rapi & Tidak Menimpa */ #user-modal #user-avatar-form-group > div { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; width: 100% !important; } #user-modal #user-avatar-form-group > div > div:last-child { display: block !important; flex: 1 1 auto !important; min-width: 0 !important; } #user-modal #avatar-preview-container { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; flex-shrink: 0 !important; margin-right: 2px !important; } #user-modal #user-avatar-form-group button, #user-modal #user-avatar-form-group .btn { height: 34px !important; padding: 0 10px !important; font-size: 0.76rem !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; white-space: nowrap !important; } /* Fix 4: Ikon Asisten AI Mulai Lebih Tinggi dari Judul (Judul Tidak Boleh Lebih Tinggi) */ .ai-badge-group { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; gap: 14px !important; width: 100% !important; } .ai-badge-pulse { width: 60px !important; height: 60px !important; min-width: 60px !important; max-width: 60px !important; flex: 0 0 60px !important; border-radius: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.6rem !important; flex-shrink: 0 !important; margin-top: 0 !important; box-shadow: 0 0 18px rgba(234, 179, 8, 0.45) !important; } .ai-badge-group > div:not(.ai-badge-pulse) { display: flex !important; flex-direction: column !important; gap: 2px !important; flex: 1 1 auto !important; min-width: 0 !important; margin-top: 5px !important; } .ai-hero-title { font-size: 0.86rem !important; font-weight: 800 !important; line-height: 1.15 !important; margin: 0 0 3px 0 !important; color: #FFFFFF !important; } .ai-hero-sub { font-size: 0.66rem !important; line-height: 1.25 !important; color: #94A3B8 !important; margin: 0 !important; } @media (max-width: 768px) { .ai-badge-group { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; gap: 12px !important; } .ai-badge-pulse { width: 58px !important; height: 58px !important; min-width: 58px !important; max-width: 58px !important; flex: 0 0 58px !important; font-size: 1.5rem !important; border-radius: 12px !important; margin-top: 0 !important; } .ai-badge-group > div:not(.ai-badge-pulse) { margin-top: 4px !important; } .ai-hero-title { font-size: 0.80rem !important; line-height: 1.15 !important; margin: 0 0 2px 0 !important; } .ai-hero-sub { font-size: 0.64rem !important; line-height: 1.2 !important; } } /* ========================================================================== */ /* v6.0.58 - KATEGORI KUSTOM & SUB-KATEGORI / JENIS-JENIS PERANGKAT (#device-modal) */ /* ========================================================================== */ #device-modal select, #device-modal #dev-category, #device-modal #dev-subcategory { width: 100% !important; background: #0E131F !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: var(--radius-md) !important; padding: 8px 12px !important; color: #F8FAFC !important; font-size: 0.82rem !important; accent-color: #EF4444 !important; outline: none !important; } #device-modal select:focus, #device-modal #dev-category:focus, #device-modal #dev-subcategory:focus { border-color: #EF4444 !important; box-shadow: 0 0 10px rgba(239, 68, 68, 0.35) !important; outline: none !important; } #device-modal select option { background: #141724 !important; color: #F8FAFC !important; padding: 6px 10px !important; } #device-modal select option:checked { background: #881337 !important; color: #FFFFFF !important; } #device-modal #dev-custom-category, #device-modal #dev-custom-subcategory { width: 100% !important; background: rgba(8, 13, 24, 0.95) !important; border: 1px dashed #10B981 !important; border-radius: var(--radius-md) !important; padding: 8px 12px !important; color: #10B981 !important; font-size: 0.82rem !important; box-sizing: border-box !important; transition: all 0.2s ease !important; } #device-modal #dev-custom-category::placeholder, #device-modal #dev-custom-subcategory::placeholder { color: rgba(148, 163, 184, 0.7) !important; } #device-modal #dev-custom-category:focus, #device-modal #dev-custom-subcategory:focus { border: 1px solid #10B981 !important; box-shadow: 0 0 12px rgba(16, 185, 129, 0.4) !important; outline: none !important; } /* Superadmin Delete & Reset Option Buttons */ .btn-delete-option { transition: all 0.2s ease !important; } .btn-delete-option:hover { background: rgba(239, 68, 68, 0.25) !important; border-color: #EF4444 !important; color: #FFFFFF !important; transform: translateY(-1px); } .btn-reset-option { transition: all 0.2s ease !important; } .btn-reset-option:hover { background: rgba(245, 158, 11, 0.15) !important; border-color: #F59E0B !important; color: #F59E0B !important; transform: translateY(-1px); } /* Superadmin Action Row: Tombol Kiri Kanan Sejajar Rapi */ .superadmin-actions-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; margin-top: 6px !important; width: 100% !important; } .superadmin-actions-row .btn-delete-option, .superadmin-actions-row .btn-reset-option { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; margin: 0 !important; flex-shrink: 0 !important; } /* ========================================================================== T-AIMS PRINT ENGINE: DEDICATED PRINT STYLES FOR QR LABELS & PDF REPORTS ========================================================================== */ #print-mount-area { display: none; } @media print { body.print-mode-active { background: #ffffff !important; color: #000000 !important; margin: 0 !important; padding: 0 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } body.print-mode-active > *:not(#print-mount-area) { display: none !important; } body.print-mode-active #print-mount-area { display: block !important; width: 100% !important; background: #ffffff !important; color: #111827 !important; padding: 10mm !important; box-sizing: border-box !important; } .print-single-label-card { border: 2px solid #111827 !important; border-radius: 8px !important; padding: 16px !important; max-width: 320px !important; margin: 30px auto !important; text-align: center !important; background: #ffffff !important; page-break-inside: avoid !important; } .print-qr-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; width: 100% !important; } .print-qr-item { border: 1.5px dashed #4b5563 !important; border-radius: 6px !important; padding: 10px !important; text-align: center !important; background: #ffffff !important; box-sizing: border-box !important; page-break-inside: avoid !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } .print-report-container { width: 100% !important; color: #111827 !important; font-family: Arial, Helvetica, sans-serif !important; } }