/* ============================================================ RADARS UI – PRODUCTION ENTERPRISE STRUCTURE (Scalable) PHPRunner Compatible (Bootstrap 5 + legacy panel/list-group) ------------------------------------------------------------ GOALS - Multi-theme ready (Light/Dark/Custom via [data-theme]) - Scalable tokens (colors, spacing, radius, shadow, z-index) - Low-risk overrides (scoped where possible) - Maintainable sections + clear layering ------------------------------------------------------------ NOTES - To enable dark mode: set (or body) - Keep this file loaded AFTER bootstrap & runner default CSS - When debugging: search "SECTION" headings below ============================================================ */ /* ============================================================ SECTION 0 — THEME TOKENS (Design System) - Default theme: Light - Override per theme using [data-theme="dark"] or others ============================================================ */ :root{ /* Brand*/ --radars-primary:#2563eb; --radars-primary-hover:#1d4ed8; --radars-soft:#eff6ff; /* Surfaces*/ --radars-bg:#f8fafc; --radars-card:#ffffff; --radars-border:#e5e7eb; /* Text */ --radars-text:#111827; --radars-muted:#6b7280; /* Effects*/ --radars-shadow:0 4px 20px rgba(0,0,0,0.06); --radars-shadow-soft:0 2px 10px rgba(0,0,0,0.05); /* Radius */ --radars-radius:14px; --radars-radius-sm:12px; /* Spacing scale (enterprise-ready) */ --radars-space-1:6px; --radars-space-2:10px; --radars-space-3:14px; --radars-space-4:16px; /* Control sizing */ --radars-control-radius:10px; /* Z-index ladder (avoid random z-index wars) */ --radars-z-base:1; --radars-z-dropdown:1000; --radars-z-overlay:2000; --radars-z-modal:3000; } /* ============================================================ SECTION 7 — PANELS (Bootstrap legacy panels used by PHPRunner) ============================================================ */ .rnr-page .panel{ border-radius:12px; border:1px solid var(--radars-border); box-shadow:0 4px 16px rgba(0,0,0,.05); overflow:hidden; background:var(--radars-card); } .rnr-page .panel-heading{ background:#f1f5f9!important; color:var(--radars-text)!important; font-weight:700; } [data-theme="dark"] .rnr-page .panel-heading{ background:rgba(255,255,255,0.04)!important; } /* Detail preview only */ .rnr-details .panel-heading{ background:var(--radars-primary)!important; color:#fff!important; } /* ============================================================ SECTION 8 — DETAIL GRID FIX + ANIMATION ============================================================ */ .rnr-details .panel-heading .btn{ background:#ffffff!important; color:#111827!important; border:1px solid #e5e7eb!important; } .rnr-details .panel-heading .btn:hover{ background:#f8fafc!important; } .rnr-datagrid .btn{ color:#111827!important; font-weight:600; } /* Smooth detail animation */ .rnr-details{ border-radius:14px; overflow:hidden; animation:fadeDetail .25s ease; } @keyframes fadeDetail{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } } /* ============================================================ SECTION 10 — FILTER SIDEBAR (Filter cards) ============================================================ */ .filter-field{ background:var(--radars-card)!important; border:1px solid var(--radars-border)!important; border-radius:var(--radars-radius-sm)!important; box-shadow:var(--radars-shadow-soft); overflow:hidden; margin-bottom:14px!important; } .filter-field .panel-heading{ background:#f1f5f9!important; border-bottom:1px solid var(--radars-border)!important; color:var(--radars-text)!important; font-weight:700; padding:12px 14px!important; } [data-theme="dark"] .filter-field .panel-heading{ background:rgba(255,255,255,0.04)!important; } .filter-field .list-group-item{ border:0!important; border-bottom:1px solid rgba(229,231,235,0.7)!important; padding:10px 14px!important; background:transparent!important; } [data-theme="dark"] .filter-field .list-group-item{ border-bottom:1px solid rgba(255,255,255,0.08)!important; } .filter-field .list-group-item:last-child{ border-bottom:0!important; } .filter-field .list-group-item:hover{ background:var(--radars-soft)!important; } /* Anchor visibility in hover/normal */ .filter-field a{ color:var(--radars-text)!important; text-decoration:none!important; } .filter-field a:hover{ color:var(--radars-primary)!important; } /* ============================================================ SECTION 11 — FILTER ACCORDION BEHAVIOUR (Runner) ============================================================ */ /* default: item collapsed ikut runner */ .filter-field .list-group-item.filter-collapsed{ display:none; } /* bila active-filter → paksa item nampak */ .filter-field.active-filter .list-group-item{ display:list-item !important; } /* ============================================================ SECTION 13 — SIDEBAR SPACING FIX (Internal padding/margins) ============================================================ */ .r-left .panel, .r-left .filter-field, .r-left .searchOptions{ margin-bottom:10px !important; } /*Untuk Padding sidebar*/ /*.r-left{ padding-top:10px !important; padding-right:15px !important; padding-bottom:0px !important; padding-left:15px !important; }*/ /*Untuk Padding panel filter*/ .filterPanelContainer{ padding:10px 10px; } /*Untuk Padding panel menu*/ .r-menu{ padding:10px 10px; } /*Untuk Padding panel search*/ .searchPanelContainer{ padding:10px 10px; } /* ============================================================ SECTION 14 — STICKY FOOTER LAYOUT (r-body) ============================================================ */ html, body{ height:93%; } .r-body{ min-height:93vh; display:flex; flex-direction:column; } .r-grid{ flex:1; } /* Footer/info block at bottom of list page */ .r-body > div:last-child{ padding:10px; /*text-align:center;*/ font-size:13px; color:#6b7280; } /* ============================================================ SECTION 15 — SIDEBAR COLLAPSE MODE (PHPRunner) ============================================================ */ /* reset floating sidebar sahaja */ .r-left.r-left-collapsed{ margin:0 !important; padding:6px 0 !important; border-radius:0 !important; box-shadow:none !important; } /* blur background OFF sahaja */ .r-left.r-left-collapsed::before, .r-left.r-left-collapsed::after{ opacity:0 !important; } /* center MAIN icon sahaja */ .r-left.r-left-collapsed .r-menu ul[data-menulevel="1"] > li > a{ text-align:center !important; padding:12px 0 !important; } /* submenu kekal align kiri */ .r-left.r-left-collapsed .r-menu ul[data-menulevel="2"] a{ text-align:left !important; padding:10px 16px !important; } /* Hide menu TEXT sahaja, bukan icon */ .r-left.r-left-collapsed .r-menu .menu-text{ display:none !important; } /* ============================================================ SECTION 12 — SIDEBAR BACKGROUND (Leftbar) ============================================================ */ .r-left{ position:relative; overflow:hidden; min-height:100vh; background: linear-gradient( rgba(34,75,55,0.5), rgba(25,60,45,0.5) ), url("/services/radars/filemedia/sidebar.jpg"); background-repeat:no-repeat; background-position:center; background-size:cover; } /* ============================================================ SECTION 4 — TABLES / GRIDS (List pages) ============================================================ */ .table, .rnr-gridtable table{ background:var(--radars-card)!important; border:1px solid var(--radars-border)!important; border-radius:var(--radars-radius)!important; overflow:hidden; box-shadow:var(--radars-shadow); } .table thead th, .rnr-gridtable thead th{ background:#f1f5f9!important; border-bottom:1px solid var(--radars-border)!important; color:var(--radars-muted)!important; font-weight:800!important; font-size:12px!important; letter-spacing:0.02em; text-transform:uppercase; } [data-theme="dark"] .table thead th, [data-theme="dark"] .rnr-gridtable thead th{ background:rgba(255,255,255,0.04)!important; } .table td, .table th{ border-top:1px solid rgba(229,231,235,0.7)!important; padding:12px!important; vertical-align:top; } [data-theme="dark"] .table td, [data-theme="dark"] .table th{ border-top:1px solid rgba(255,255,255,0.08)!important; } .table tbody tr{ transition:.2s ease; } .table tbody tr:hover{ background:#f8fafc!important; } [data-theme="dark"] .table tbody tr:hover{ background:rgba(255,255,255,0.03)!important; } /* Highlight dataset title column (adjust if needed) */ /*.table td:nth-child(3){ /* font-weight:800; /* font-size:15px; /*}*/ /* BOLD SEMUA LABEL */ label { display:inline-block; max-width:100%; margin-bottom:5px; font-weight:bold }