/* ========================================================================== Islamic Elegant UI — PK WMS v8.3 FINAL (EXTENDED) ========================================================================== TABLE OF CONTENTS ───────────────────────────────────────────────────────────────────────── 1. IMPORTS & VARIABLES 2. BASE — Body & Global Reset 3. BACKGROUND ORNAMENTS (SVG Fixed Decorators) 4. LAYOUT — Main Content & Page Structure 5. HEADER (Top Navigation Bar) 6. RIBBON / BREADCRUMB 7. SIDEBAR (Left Panel) 8. FOOTER / TAB BAR 9. FORM CONTROLS 9a. General Inputs 9b. Input Group 9c. Checkbox & Radio 9d. Range / Slider 9e. NG-Select (Dropdown Component) 10. LABELS 11. BUTTONS 12. TABLE (Bootstrap) 13. DATATABLES (Toolbar, Pagination, Scroll) 14. AG-GRID 15. WIDGET / PANEL 16. INSTANCE TAB (Hexagon Badge) 17. DROPDOWN MENU (Bootstrap) 18. NOTIFICATION DROPDOWN (Ajax Dropdown) 19. DATEPICKER POPUP 20. BADGE / LABEL 21. ALERTS 22. TOOLTIP 23. PAGINATION (Bootstrap) 24. SCROLLBAR (Global) 25. MISC & UTILITIES 26. PRINT ========================================================================== */ /* ========================================================================== 1. IMPORTS & VARIABLES ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Amiri:wght@400;700&family=Source+Sans+3:wght@300;400;600&display=swap'); :root { /* ── Color Palette ─────────────────────────── */ --pk-bg: #f0ece0; --pk-surface: #ffffff; --pk-surface-sub: #faf8f2; --pk-cream: #f4ebd4; --pk-cream-dark: #e5d3b3; /* Green Family */ --pk-green: #004d33; --pk-green-mid: #006b4a; --pk-green-dark: #003624; /* Gold Family */ --pk-gold: #c5a059; --pk-gold-2: #a8863f; --pk-gold-light: #dfc48a; --pk-gold-sheen: #f0d080; /* Borders */ --pk-border: #c8b08a; --pk-border-light: #ddd0b8; /* Text */ --pk-text: #1a2e26; --pk-text-inv: #ffffff; /* Status */ --pk-red: #a32a2a; --pk-success: #287d3c; /* ── Typography ────────────────────────────── */ --f-brand: 'Cinzel', Georgia, serif; --f-arabic: 'Amiri', 'Traditional Arabic', serif; --f-body: 'Source Sans 3', 'Segoe UI', sans-serif; } /* ========================================================================== 2. BASE — Body & Global Reset ========================================================================== */ body { background-color: var(--pk-bg) !important; background-image: url('https://www.transparenttextures.com/patterns/cream-paper.png') !important; background-repeat: repeat !important; color: var(--pk-text) !important; font-family: var(--f-body) !important; } /* Transparent wrappers / fieldsets */ div.tab-container *, .tab-area-block * { background-color: transparent !important; } fieldset { background: transparent !important; background-color: transparent !important; border: none !important; } /* ========================================================================== 3. BACKGROUND ORNAMENTS (SVG Fixed Decorators) ========================================================================== */ /* Bottom-left large mandala */ body::before { content: ''; position: fixed; bottom: -120px; left: -120px; width: 680px; height: 680px; pointer-events: none; z-index: 0; opacity: 0.18; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700'%3E%3Cdefs%3E%3Cstyle%3E.s%7Bfill:none;stroke:%23c5a059;stroke-width:1.4%7D.f%7Bfill:%23c5a059%7D%3C/style%3E%3C/defs%3E%3Ccircle cx='350' cy='350' r='340' class='s'/%3E%3Ccircle cx='350' cy='350' r='305' class='s'/%3E%3Ccircle cx='350' cy='350' r='268' class='s'/%3E%3Ccircle cx='350' cy='350' r='228' class='s'/%3E%3Ccircle cx='350' cy='350' r='188' class='s'/%3E%3Ccircle cx='350' cy='350' r='146' class='s'/%3E%3Ccircle cx='350' cy='350' r='102' class='s'/%3E%3Ccircle cx='350' cy='350' r='58' class='s'/%3E%3Ccircle cx='350' cy='350' r='22' class='s'/%3E%3Cg transform='translate(350,350)'%3E%3Cline x1='0' y1='-340' x2='0' y2='340' class='s'/%3E%3Cline x1='-340' y1='0' x2='340' y2='0' class='s'/%3E%3Cline x1='-240' y1='-240' x2='240' y2='240' class='s'/%3E%3Cline x1='240' y1='-240' x2='-240' y2='240' class='s'/%3E%3Cline x1='-128' y1='-314' x2='128' y2='314' class='s'/%3E%3Cline x1='128' y1='-314' x2='-128' y2='314' class='s'/%3E%3Cline x1='-314' y1='-128' x2='314' y2='128' class='s'/%3E%3Cline x1='314' y1='-128' x2='-314' y2='128' class='s'/%3E%3C/g%3E%3Cg transform='translate(350,350)'%3E%3Cellipse rx='42' ry='128' class='s'/%3E%3Cellipse rx='42' ry='128' transform='rotate(22.5)' class='s'/%3E%3Cellipse rx='42' ry='128' transform='rotate(45)' class='s'/%3E%3Cellipse rx='42' ry='128' transform='rotate(67.5)' class='s'/%3E%3Cellipse rx='42' ry='128' transform='rotate(90)' class='s'/%3E%3Cellipse rx='42' ry='128' transform='rotate(112.5)' class='s'/%3E%3Cellipse rx='42' ry='128' transform='rotate(135)' class='s'/%3E%3Cellipse rx='42' ry='128' transform='rotate(157.5)' class='s'/%3E%3C/g%3E%3Cg transform='translate(350,350)'%3E%3Cpolygon points='0,-296 69,-94 265,-94 105,36 170,237 0,109 -170,237 -105,36 -265,-94 -69,-94' class='s'/%3E%3Cpolygon points='0,-192 45,-61 172,-61 68,24 110,153 0,70 -110,153 -68,24 -172,-61 -45,-61' class='s'/%3E%3C/g%3E%3Cg transform='translate(350,350) rotate(22.5)'%3E%3Cpolygon points='0,-250 58,-80 222,-80 88,29 143,194 0,89 -143,194 -88,29 -222,-80 -58,-80' class='s'/%3E%3C/g%3E%3Cg class='f' opacity='0.55'%3E%3Ccircle cx='350' cy='10' r='4'/%3E%3Ccircle cx='455' cy='49' r='4'/%3E%3Ccircle cx='531' cy='124' r='4'/%3E%3Ccircle cx='570' cy='232' r='4'/%3E%3Ccircle cx='570' cy='468' r='4'/%3E%3Ccircle cx='531' cy='576' r='4'/%3E%3Ccircle cx='455' cy='651' r='4'/%3E%3Ccircle cx='350' cy='690' r='4'/%3E%3Ccircle cx='245' cy='651' r='4'/%3E%3Ccircle cx='169' cy='576' r='4'/%3E%3Ccircle cx='130' cy='468' r='4'/%3E%3Ccircle cx='130' cy='232' r='4'/%3E%3Ccircle cx='169' cy='124' r='4'/%3E%3Ccircle cx='245' cy='49' r='4'/%3E%3C/g%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } /* Top-right small ornament */ body::after { content: ''; position: fixed; top: -60px; right: -60px; width: 380px; height: 380px; pointer-events: none; z-index: 0; opacity: 0.11; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 380'%3E%3Cdefs%3E%3Cstyle%3E.s%7Bfill:none;stroke:%23c5a059;stroke-width:1.1%7D%3C/style%3E%3C/defs%3E%3Ccircle cx='190' cy='190' r='182' class='s'/%3E%3Ccircle cx='190' cy='190' r='152' class='s'/%3E%3Ccircle cx='190' cy='190' r='120' class='s'/%3E%3Ccircle cx='190' cy='190' r='88' class='s'/%3E%3Ccircle cx='190' cy='190' r='56' class='s'/%3E%3Ccircle cx='190' cy='190' r='26' class='s'/%3E%3Cg transform='translate(190,190)'%3E%3Cline x1='0' y1='-182' x2='0' y2='182' class='s'/%3E%3Cline x1='-182' y1='0' x2='182' y2='0' class='s'/%3E%3Cline x1='-129' y1='-129' x2='129' y2='129' class='s'/%3E%3Cline x1='129' y1='-129' x2='-129' y2='129' class='s'/%3E%3Cellipse rx='24' ry='76' class='s'/%3E%3Cellipse rx='24' ry='76' transform='rotate(45)' class='s'/%3E%3Cellipse rx='24' ry='76' transform='rotate(90)' class='s'/%3E%3Cellipse rx='24' ry='76' transform='rotate(135)' class='s'/%3E%3C/g%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } /* ========================================================================== 4. LAYOUT — Main Content & Page Structure ========================================================================== */ #main, #content, .main-content, .page-content, [id*="main-content"], [class*="main-content"] { background: var(--pk-bg) !important; background-color: var(--pk-bg) !important; } #content > .row, #main > .row, .page-content > .row { background: transparent !important; } sa-widgets-grid, .sortable-grid, #widgets-grid, #qualityTransferSearchGrid, #qualityTransferRequestGrid, #qualityTransferStockGrid { display: block !important; position: relative !important; z-index: 1 !important; visibility: visible !important; opacity: 1 !important; } /* Page titles */ h1, h2, h3, .page-title, [class*="page-title"] { color: var(--pk-green-dark) !important; font-family: var(--f-brand) !important; font-weight: 600 !important; } /* Gear icon next to page titles */ h1 .fa-cog, h2 .fa-cog, h3 .fa-cog, .page-title .fa, .page-title i, [class*="page-title"] i, [class*="page-title"] .fa { color: var(--pk-gold) !important; } /* ========================================================================== 5. HEADER (Top Navigation Bar) ========================================================================== */ #header, header, .header { background: #013220 !important; border-bottom: 2px solid #c5a059 !important; } /* General nav links */ #header a, header a, .header a, #header .nav-link, #header .dropdown-toggle, [class*="lang"] *, .dropdown-toggle * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-weight: 600 !important; opacity: 1 !important; } /* Icons */ #header i, #header .fa, #header [class*="icon"], header [class*="svg"], .header i { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 0.9 !important; } /* Username / profile highlight */ [class*="user"] *, [class*="profile"] *, [class*="PKI"] *, span[class*="PKI"], .username { color: #F7D070 !important; -webkit-text-fill-color: #F7D070 !important; font-weight: 700 !important; opacity: 1 !important; } /* User icon & notification icon stay white */ [class*="user"] i, [class*="user"] .fa, [class*="notification"] * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Hover state */ #header a:hover, #header .nav-link:hover, .dropdown-toggle:hover { color: #F7D070 !important; -webkit-text-fill-color: #F7D070 !important; text-decoration: none !important; } /* ========================================================================== 6. RIBBON / BREADCRUMB ========================================================================== */ div#ribbon.ng-star-inserted, body #ribbon, html body #ribbon { background: #f4ebd9 !important; background-color: #f4ebd9 !important; border-bottom: 2px solid #c5a059 !important; display: block !important; height: 40px !important; min-height: 40px !important; padding: 0 13px !important; box-sizing: border-box !important; line-height: 40px !important; } /* ── Refresh button ───────────────────────────────────────────────────────── */ span#refresh.btn.btn-ribbon, span#refresh.btn.btn-ribbon:hover, span#refresh.btn.btn-ribbon:focus, span#refresh.btn.btn-ribbon:active { display: inline-block !important; vertical-align: middle !important; float: none !important; background: #c5a059 !important; background-color: #c5a059 !important; border: 1px solid #b38f48 !important; border-radius: 4px !important; box-shadow: 0 1px 3px rgba(0,0,0,.15) !important; height: 22px !important; width: 30px !important; padding: 0 !important; margin: 0 10px 0 0 !important; text-align: center !important; line-height: 22px !important; } span#refresh.btn.btn-ribbon i, span#refresh.btn.btn-ribbon .fa { color: #ffffff !important; font-size: 12px !important; line-height: 22px !important; vertical-align: middle !important; margin: 0 !important; padding: 0 !important; display: inline !important; } /* ── Bismillah — absolute kanan ribbon ───────────────────────────────────── */ div#ribbon::before, div#ribbon.ng-star-inserted::before, body #ribbon::before, html body #ribbon::before { content: "بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ" !important; position: absolute !important; right: 16px !important; top: 0 !important; bottom: 0 !important; margin: auto !important; height: fit-content !important; font-family: 'Amiri', 'Traditional Arabic', serif !important; font-size: 14px !important; font-weight: 700 !important; color: #004d33 !important; -webkit-text-fill-color: #004d33 !important; direction: rtl !important; line-height: 1.2 !important; white-space: nowrap !important; text-shadow: 0 0 10px rgba(197,160,89,.5), 0 1px 0 rgba(255,255,255,.7) !important; pointer-events: none !important; z-index: 5 !important; opacity: 1 !important; background: transparent !important; display: block !important; } div#ribbon.no-tab::before, div#ribbon.no-tab.ng-star-inserted::before, body #ribbon.no-tab::before, html body #ribbon.no-tab::before { content: none !important; display: none !important; opacity: 0 !important; visibility: hidden !important; } /* Breadcrumb container */ #ribbon .breadcrumb, #ribbon ol.breadcrumb { float: none !important; display: inline-block !important; vertical-align: middle !important; background: transparent !important; margin: 0 !important; padding: 0 !important; height: auto !important; line-height: normal !important; } #ribbon .breadcrumb li, #ribbon ol.breadcrumb li { display: inline-block !important; vertical-align: middle !important; float: none !important; line-height: normal !important; } /* Breadcrumb links */ div#ribbon.ng-star-inserted ol.breadcrumb li a, div#ribbon.ng-star-inserted .breadcrumb a, #ribbon ol.breadcrumb li a, #ribbon .breadcrumb-item a, #ribbon a { color: #013220 !important; font-weight: 500 !important; line-height: normal !important; } /* Active breadcrumb item */ div#ribbon.ng-star-inserted ol.breadcrumb li.active, div#ribbon.ng-star-inserted .breadcrumb-item.active, #ribbon ol.breadcrumb li.active, #ribbon .breadcrumb li:last-child, #ribbon .breadcrumb-item:last-child, #ribbon span:last-child { color: #013220 !important; font-weight: bold !important; line-height: normal !important; } /* Separator ( > ) */ div#ribbon.ng-star-inserted ol.breadcrumb > li + li::before, #ribbon ol.breadcrumb > li + li::before, #ribbon .breadcrumb-item + .breadcrumb-item::before { color: rgba(1, 50, 32, 0.6) !important; padding: 0 8px !important; line-height: normal !important; } /* ========================================================================== 7. SIDEBAR (Left Panel) ========================================================================== */ #left-panel { background: var(--pk-green) !important; border-right: 2px solid var(--pk-gold) !important; position: relative; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z' fill='none' stroke='%23ffffff' stroke-width='0.5' opacity='0.025'/%3E%3Ccircle cx='30' cy='30' r='5' fill='none' stroke='%23ffffff' stroke-width='0.5' opacity='0.025'/%3E%3C/svg%3E") !important; background-repeat: repeat !important; } /* Transparent sub-elements */ #left-panel nav, #left-panel nav ul, #left-panel .login-info, #left-panel .minify-button { background: transparent !important; } /* Decorative SVG at bottom of sidebar */ #left-panel::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 380px; pointer-events: none; z-index: 1; opacity: 0.42; /* Kejelasan emas dioptimalkan */ mix-blend-mode: screen; /* SVG Mandala Kelopak */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23d4af37' stroke-width='2.2'%3E%3Ccircle cx='300' cy='300' r='280' opacity='0.3'/%3E%3Ccircle cx='300' cy='300' r='220' stroke-dasharray='6 4'/%3E%3Ccircle cx='300' cy='300' r='140'/%3E%3Ccircle cx='300' cy='300' r='60'/%3E%3C/g%3E%3Cg transform='translate(300,300)' fill='none' stroke='%23d4af37' stroke-width='2.5'%3E%3Cpath d='M0,0 C50,-100 100,-50 0,-200 C-100,-50 -50,-100 0,0' transform='rotate(0)'/%3E%3Cpath d='M0,0 C50,-100 100,-50 0,-200 C-100,-50 -50,-100 0,0' transform='rotate(30)' opacity='0.7'/%3E%3Cpath d='M0,0 C50,-100 100,-50 0,-200 C-100,-50 -50,-100 0,0' transform='rotate(60)'/%3E%3Cpath d='M0,0 C50,-100 100,-50 0,-200 C-100,-50 -50,-100 0,0' transform='rotate(90)' opacity='0.7'/%3E%3Cpath d='M0,0 C50,-100 100,-50 0,-200 C-100,-50 -50,-100 0,0' transform='rotate(120)'/%3E%3Cpath d='M0,0 C50,-100 100,-50 0,-200 C-100,-50 -50,-100 0,0' transform='rotate(150)' opacity='0.7'/%3E%3Cpath d='M0,0 C50,-100 100,-50 0,-200 C-100,-50 -50,-100 0,0' transform='rotate(180)'/%3E%3Cpath d='M0,0 C50,-100 100,-50 0,-200 C-100,-50 -50,-100 0,0' transform='rotate(210)' opacity='0.7'/%3E%3Cpath d='M0,0 C50,-100 100,-50 0,-200 C-100,-50 -50,-100 0,0' transform='rotate(240)'/%3E%3Cpath d='M0,0 C50,-100 100,-50 0,-200 C-100,-50 -50,-100 0,0' transform='rotate(270)' opacity='0.7'/%3E%3Cpath d='M0,0 C50,-100 100,-50 0,-200 C-100,-50 -50,-100 0,0' transform='rotate(300)'/%3E%3Cpath d='M0,0 C50,-100 100,-50 0,-200 C-100,-50 -50,-100 0,0' transform='rotate(330)' opacity='0.7'/%3E%3C/g%3E%3C/svg%3E"); background-size: 140% 140% !important; background-repeat: no-repeat !important; background-position: -90px 110px !important; /* Menggeser titik tengah lingkaran keluar pojok kiri bawah */ } /* ── Top-level nav items ─────────────────────── */ #left-panel nav > ul > li, #left-panel nav ul li { background: transparent !important; } #left-panel nav > ul > li > a, #left-panel nav ul li a { color: #ffffff !important; background: transparent !important; border-bottom: 1px solid rgba(197,160,89,.15) !important; transition: background .15s, color .15s; } #left-panel nav > ul > li > a *, #left-panel nav ul li a * { color: #ffffff !important; } #left-panel nav > ul > li > a:hover { background: rgba(197,160,89,.20) !important; color: var(--pk-gold-sheen) !important; } #left-panel nav > ul > li > a:hover * { color: var(--pk-gold-sheen) !important; } /* Active / open */ #left-panel nav > ul > li.active > a, #left-panel nav > ul > li.open > a { background: var(--pk-gold) !important; color: var(--pk-green-dark) !important; font-weight: 700 !important; border-left: 4px solid var(--pk-green-dark) !important; } #left-panel nav > ul > li.active > a *, #left-panel nav > ul > li.open > a * { color: var(--pk-green-dark) !important; } /* ── Sub-nav (nested ul) ─────────────────────── */ #left-panel nav ul ul, #left-panel nav ul ul ul, #left-panel nav ul li.open > ul { background: rgba(0, 43, 29, 0.85) !important; } #left-panel nav ul ul li a { color: #ffffff !important; background: transparent !important; opacity: 1 !important; border-bottom: 1px solid rgba(197,160,89,.10) !important; } #left-panel nav ul ul li a * { color: #ffffff !important; } #left-panel nav ul ul li a:hover { color: var(--pk-gold-light) !important; background: rgba(197,160,89,.25) !important; } #left-panel nav ul ul li a:hover * { color: var(--pk-gold-light) !important; } #left-panel nav ul ul li.active > a { color: var(--pk-green-dark) !important; background: var(--pk-gold-light) !important; font-weight: 600 !important; } #left-panel nav ul ul li.active > a * { color: var(--pk-green-dark) !important; } /* Arrow indicator */ #left-panel nav ul li b.arrow { color: rgba(197,160,89,.7) !important; } #left-panel nav ul li.active b.arrow, #left-panel nav ul li.open b.arrow { color: var(--pk-green-dark) !important; } /* ── Utility Buttons ─────────────────────────── */ span#minifyme.minifyme { background: transparent !important; border: none !important; } span#minifyme.minifyme i.fa-arrow-circle-left { color: rgba(255, 255, 255, 0.4) !important; } span#minifyme.minifyme:hover i.fa-arrow-circle-left { color: rgba(255, 255, 255, 0.8) !important; } div.dropup.left-bottom-menu { background-color: #003d24 !important; background-image: none !important; border-top: 1px solid rgba(255,255,255,.1) !important; } div.dropup.left-bottom-menu i.fa-windows { color: #ffffff !important; opacity: 1 !important; font-size: 16px !important; text-shadow: 0 1px 2px rgba(0,0,0,.3); } /* ========================================================================== 8. FOOTER / TAB BAR ========================================================================== */ footer, .page-footer, #footer, .fixed-page-footer, #tab-bar, .tab-bar, .app-footer-inside, .page-footer-container, div#tab-bar, [id="tab-bar"], [class*="tab-bar"], [class*="page-footer"] { background: var(--pk-cream) !important; background-color: var(--pk-cream) !important; background-image: none !important; border-top: 2px solid #D1BE96 !important; color: #3A3022 !important; box-shadow: none !important; } /* Remove pseudo-element backgrounds */ .page-footer::before, #footer::before, .fixed-page-footer::before, #tab-bar::before, .tab-bar::before { display: none !important; background: transparent !important; } .fixed-page-footer > div, .page-footer div, #tab-bar > div { background: var(--pk-cream) !important; background-color: var(--pk-cream) !important; background-image: none !important; } /* Tab list */ #tab-bar ul, .tab-bar .nav-tabs, .tab-bar ul, footer ul, .page-footer ul, #tab-bar > ul, div#tab-bar ul { background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; } /* Tab items — default state */ #tab-bar ul li a, .tab-bar .nav-tabs li a, .tab-item, #activity ul li a, .tab-bar ul li a, .page-footer ul li:not(.active) a, div#tab-bar ul li a { background: var(--pk-cream-dark) !important; background-color: var(--pk-cream-dark) !important; background-image: none !important; color: #4A3B2C !important; border-right: 1px solid #C5B089 !important; border-top: none !important; border-left: none !important; border-bottom: none !important; border-radius: 4px 4px 0 0 !important; margin-right: 3px !important; padding: 6px 12px !important; display: inline-block !important; opacity: 1 !important; font-weight: 700 !important; text-shadow: none !important; transition: all .12s ease-in-out; } /* Hover */ #tab-bar ul li a:hover, .tab-bar .nav-tabs li a:hover, .tab-item:hover, .tab-bar ul li a:hover, .page-footer ul li a:hover, div#tab-bar ul li a:hover { background: #D1BE96 !important; background-color: #D1BE96 !important; background-image: none !important; color: #211910 !important; } /* Active tab */ #tab-bar ul li.active a, .tab-bar .nav-tabs li.active a, .tab-item.active, .page-footer ul li.active a, .tab-bar ul li.active a, div#tab-bar ul li.active a { background: #0B5D43 !important; background-color: #0B5D43 !important; background-image: none !important; color: #FFFFFF !important; font-weight: 700 !important; border-bottom: none !important; text-shadow: 0 1px 2px rgba(0,0,0,.3) !important; } /* Footer utility links */ .fixed-page-footer a, .fixed-page-footer span, .page-footer .pull-right, .close-all-tabs, #btn-close-all, .tab-bar .close-all-tabs, .fixed-page-footer .txt-color-white, .page-footer .pull-right * { color: #4A3B2C !important; } /* Tab close button */ .tab-item .close, #tab-bar ul li a .close, .tab-bar ul li a .close { color: #4A3B2C !important; opacity: 0.7 !important; text-shadow: none !important; margin-left: 6px !important; } .tab-item .close:hover, #tab-bar ul li a .close:hover { opacity: 1 !important; color: #A30000 !important; } #tab-bar ul li.active a .close, .tab-item.active .close, .tab-bar ul li.active a .close { color: #FFFFFF !important; opacity: 0.9 !important; } /* ========================================================================== 9. FORM CONTROLS ========================================================================== */ /* ── 9a. General Inputs ──────────────────────── */ .form-control, select.form-control, textarea.form-control { background-color: var(--pk-surface) !important; border: 1px solid var(--pk-border) !important; color: var(--pk-text) !important; font-family: var(--f-body) !important; font-size: 12px !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.05) !important; pointer-events: auto !important; } .form-control:focus { border-color: var(--pk-green-mid) !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.05), 0 0 0 2px rgba(0,107,74,.18) !important; outline: none !important; } /* Disabled / readonly */ .form-control:disabled, .form-control[readonly], input[readonly], input:disabled, select:disabled, .disabled .ng-select-container { background-color: var(--pk-surface) !important; border: 1px solid var(--pk-border) !important; color: var(--pk-text) !important; opacity: 1 !important; } .input-group .form-control[readonly] { border-right: none !important; } /* Undefined class inputs */ input.undefined { border: 1px solid var(--pk-border) !important; background-color: var(--pk-surface) !important; } input.undefined:focus { border-color: var(--pk-green-mid) !important; box-shadow: 0 0 4px rgba(0,107,74,.2) !important; outline: none !important; } /* Date / main text-center input */ input.main.text-center, input.main.text-center.ng-untouched.ng-pristine.ng-valid { border: 1px solid var(--pk-border) !important; border-left: 4px solid var(--pk-gold) !important; background-color: var(--pk-surface) !important; } input.main.text-center:focus { border-color: var(--pk-green-mid) !important; border-left-color: var(--pk-green-mid) !important; box-shadow: 0 0 5px rgba(0,107,74,.25) !important; outline: none !important; } input.main.text-center::selection { background-color: var(--pk-cream) !important; color: var(--pk-text) !important; } /* Inline grid/table edit input */ input.input-edit.right.ng-untouched.ng-pristine.ng-valid, input.input-edit { border: 1px solid var(--pk-border) !important; } input.input-edit:focus { border-color: var(--pk-green-mid) !important; box-shadow: 0 0 4px rgba(0,77,64,.3) !important; outline: none; } /* Remove Angular invalid (red) borders */ .ng-invalid, .ng-invalid.ng-touched, .ng-invalid.ng-dirty, .ng-invalid.ng-pristine, form.ng-invalid, .has-error .form-control, .has-error .input-group-addon, .has-error .input-group-btn .btn, :host ::ng-deep .ng-invalid, :host ::ng-deep .has-error .form-control, .ng-invalid * { border-color: var(--pk-border-light) !important; outline: none !important; box-shadow: none !important; } /* Override inline red border styles */ [style*="border: 1px solid red"], [style*="border:1px solid red"], [style*="border: 2px solid red"], [style*="border-color: red"], [style*="border-color:red"] { border-color: var(--pk-border-light) !important; } .form-control, .input-group-btn .btn, .input-group-addon { box-shadow: none !important; -webkit-box-shadow: none !important; } .form-control:focus, .form-control:focus + .input-group-btn .btn, .form-control:focus + .input-group-addon { border-color: var(--pk-green-mid) !important; } /* Icons inside form inputs */ i.icon-append.fa.fa-calendar::before, i.icon-append.fa.fa-book::before { color: var(--pk-green) !important; } /* Info icon (span.spaninfo) */ html body span.spaninfo, html body .spaninfo { background-color: var(--pk-gold) !important; color: #ffffff !important; border: 1.5px solid var(--pk-green-mid) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* ── 9b. Input Group ─────────────────────────── */ /* All wrappers: transparent */ .input-group, div.input-group, .input-group-btn, .input-group > .input-group-btn, .addon-inside, [class*="input-group"] { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } .input-group-addon { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 1px solid var(--pk-border) !important; border-left: none !important; color: var(--pk-gold) !important; box-shadow: none !important; } .input-group-addon i, .input-group-addon .fa, .input-group-btn i, .input-group-btn .fa { color: var(--pk-gold) !important; background: transparent !important; } .input-group .form-control, .input-group-btn .btn, .addon-inside .btn { border-color: var(--pk-border) !important; } .input-group-btn .btn-default, .addon-inside .btn-default, button[type="button"].btn-default { border-color: var(--pk-border) !important; color: var(--pk-gold) !important; background: transparent !important; background-color: transparent !important; background-image: none !important; } .input-group:focus-within, .input-group:focus, .input-group.focus { outline: none !important; box-shadow: none !important; } /* ── 9c. Checkbox & Radio ────────────────────── */ input[type="checkbox"], input[type="radio"] { accent-color: var(--pk-green); cursor: pointer; } @supports (appearance: none) { input[type="checkbox"], input[type="radio"] { -webkit-appearance: none; appearance: none; width: 14px !important; height: 14px !important; border: 1.5px solid var(--pk-border) !important; background: var(--pk-surface) !important; border-radius: 3px !important; cursor: pointer !important; vertical-align: middle; position: relative; display: inline-block; transition: border-color .15s, background .15s; pointer-events: auto !important; box-shadow: none !important; } input[type="radio"] { border-radius: 50% !important; } input[type="checkbox"]:checked { background: var(--pk-green) !important; border-color: var(--pk-green) !important; } input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 3px; top: 0; width: 4px; height: 8px; border: 2px solid #fff; border-top: none; border-left: none; transform: rotate(45deg); } input[type="radio"]:checked { background: var(--pk-green) !important; border-color: var(--pk-green) !important; } input[type="radio"]:checked::after { content: ''; position: absolute; left: 2px; top: 2px; width: 8px; height: 8px; background: #fff; border-radius: 50%; } input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--pk-gold) !important; } input[type="checkbox"]:focus, input[type="radio"]:focus { border-color: var(--pk-green-mid) !important; box-shadow: 0 0 0 2px rgba(0,107,74,.18) !important; } } /* Legacy radio/checkbox overrides */ input[type="radio"]::after, input[type="radio"]:checked::after, .custom-radio .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--pk-gold) !important; } input[type="checkbox"]:checked, .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--pk-green) !important; border-color: var(--pk-green) !important; } /* SVG Cards / Graphics */ rect.card, .card-info-custom, [role="graphics-symbol"] { fill: var(--pk-green) !important; background-color: var(--pk-green) !important; } rect.card:nth-child(2), .card-secondary { fill: var(--pk-gold) !important; background-color: var(--pk-gold) !important; } /* ── 9d. Range / Slider ──────────────────────── */ input[type="range"] { -webkit-appearance: none !important; appearance: none !important; height: 4px !important; background: var(--pk-border-light) !important; border-radius: 4px !important; border: none !important; outline: none !important; cursor: pointer !important; accent-color: var(--pk-green) !important; } /* WebKit track */ input[type="range"]::-webkit-slider-runnable-track { height: 4px !important; background: linear-gradient(90deg, var(--pk-green-mid) var(--val, 50%), var(--pk-border-light) var(--val, 50%)) !important; border-radius: 4px !important; border: none !important; } /* WebKit thumb */ input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none !important; appearance: none !important; width: 14px !important; height: 14px !important; border-radius: 50% !important; background: var(--pk-gold) !important; border: 2px solid var(--pk-green-dark) !important; cursor: pointer !important; box-shadow: 0 1px 4px rgba(0,0,0,.25) !important; margin-top: -5px !important; } input[type="range"]::-webkit-slider-thumb:hover { background: var(--pk-gold-sheen) !important; box-shadow: 0 0 0 3px rgba(197,160,89,.3) !important; } /* Firefox track & thumb */ input[type="range"]::-moz-range-track { height: 4px !important; background: var(--pk-border-light) !important; border-radius: 4px !important; border: none !important; } input[type="range"]::-moz-range-progress { background: var(--pk-green-mid) !important; height: 4px !important; border-radius: 4px !important; } input[type="range"]::-moz-range-thumb { width: 14px !important; height: 14px !important; border-radius: 50% !important; background: var(--pk-gold) !important; border: 2px solid var(--pk-green-dark) !important; cursor: pointer !important; box-shadow: 0 1px 4px rgba(0,0,0,.25) !important; } input[type="range"]:focus { outline: none !important; box-shadow: none !important; } input[type="range"]:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(0,107,74,.25) !important; } /* ── 9e. NG-Select ───────────────────────────── */ .ng-select .ng-select-container { background-color: var(--pk-surface) !important; border: 1px solid var(--pk-border) !important; color: var(--pk-text) !important; font-size: 12px !important; } .ng-select.ng-select-focused .ng-select-container { border-color: var(--pk-green-mid) !important; box-shadow: 0 0 0 2px rgba(0,107,74,.18) !important; } .ng-select .ng-select-container .ng-value-container .ng-value { color: var(--pk-text) !important; } .ng-select .ng-placeholder, .ng-placeholder { color: #9aafa6 !important; } .ng-select .ng-arrow-wrapper .ng-arrow, .ng-arrow-wrapper .ng-arrow { border-top-color: var(--pk-gold) !important; } .ng-dropdown-panel { background: var(--pk-surface) !important; border: 1px solid var(--pk-border) !important; box-shadow: 0 4px 16px rgba(0,0,0,.12) !important; z-index: 100000 !important; pointer-events: auto !important; } .ng-dropdown-panel .ng-dropdown-panel-items .ng-option { color: var(--pk-text) !important; } .ng-dropdown-panel .ng-dropdown-panel-items .ng-option:hover, .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked { background: rgba(0,107,74,.07) !important; color: var(--pk-green) !important; } .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected { background: rgba(197,160,89,.14) !important; color: var(--pk-green) !important; } /* ========================================================================== 10. LABELS ========================================================================== */ label, .control-label { color: var(--pk-text) !important; font-size: 12px !important; font-weight: 600 !important; } /* ========================================================================== 11. BUTTONS ========================================================================== */ /* Base .btn */ .btn { font-family: var(--f-body) !important; font-weight: 700 !important; border-radius: 15px !important; text-shadow: 0 1px 1px rgba(0,0,0,.2); display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; padding: 2px 14px !important; line-height: 1 !important; height: 26px !important; box-sizing: border-box !important; background-image: none !important; transition: all 0.2s ease; } /* Icon / span inside button */ .btn i, .btn span, .btn .fa, .btn [class^="fa-"] { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 5px 0 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; height: auto !important; vertical-align: middle !important; } .btn:hover { filter: brightness(1.08) contrast(1.02) !important; } /* Primary / Search — green gradient */ .btn-primary, button#btn-search, button[id*="search"], a[id*="search"], input[id*="search"] { background: linear-gradient(180deg, #105238 0%, #1a7a55 50%, #0d422d 100%) !important; background-image: linear-gradient(180deg, #105238 0%, #1a7a55 50%, #0d422d 100%) !important; border: 1.2px solid #d4af37 !important; color: #ffffff !important; box-shadow: 0 1px 3px rgba(0,0,0,.2), inset 0 1px 1px rgba(255,255,255,.2) !important; } /* Success / Excel — bright green */ .btn-success, button[id*="excel"], a[id*="excel"], .btn[title*="Excel"] { background: linear-gradient(180deg, #5dae8b 0%, #1ebd7d 45%, #11784f 100%) !important; background-image: linear-gradient(180deg, #40c088 0%, #1ebd7d 45%, #11784f 100%) !important; border: 1.2px solid #d4af37 !important; color: #ffffff !important; box-shadow: 0 1px 3px rgba(0,0,0,.2), inset 0 1px 1px rgba(255,255,255,.3) !important; } /* Secondary / Print — dark grey */ .btn-secondary, button[id*="print"], a[id*="print"], .btn[title*="Print"] { background: linear-gradient(180deg, #6e6e6e 0%, #4a4a4a 50%, #2b2b2b 100%) !important; background-image: linear-gradient(180deg, #6e6e6e 0%, #4a4a4a 50%, #2b2b2b 100%) !important; border: 1.2px solid #d4af37 !important; color: #ffffff !important; box-shadow: 0 1px 3px rgba(0,0,0,.2), inset 0 1px 1px rgba(255,255,255,.2) !important; } /* Close / edit-program buttons — deep emerald */ button.btn.btn-close.btn-xs.edit-program, .btn-print { background-color: #0B6623 !important; color: #FFFFFF !important; border: 1px solid #D4AF37 !important; } button.btn.btn-close.btn-xs.edit-program:hover { background-color: #124E27 !important; color: #F3E5AB !important; } /* Danger / Auto-Pin — velvet red */ .btn-danger, button[id*="auto-pin"], a[id*="auto-pin"] { background: linear-gradient(180deg, #e74c3c 0%, #c0392b 50%, #962d22 100%) !important; background-image: linear-gradient(180deg, #e74c3c 0%, #c0392b 50%, #962d22 100%) !important; border: 1.2px solid #ffffff !important; color: #ffffff !important; box-shadow: 0 1px 3px rgba(0,0,0,.2), inset 0 1px 1px rgba(255,255,255,.2) !important; } /* Check Set / Check Style — gold */ button#btn-check-set, button#btn-check-style, button[id*="check-set"], button[id*="check-style"] { background: linear-gradient(180deg, #ffeaa7 0%, #d4af37 40%, #aa820a 100%) !important; background-image: linear-gradient(180deg, #ffeaa7 0%, #d4af37 40%, #aa820a 100%) !important; border: 1.2px solid #7a5c1e !important; color: #0b3a26 !important; box-shadow: 0 1px 3px rgba(0,0,0,.2), inset 0 1px 1px rgba(255,255,255,.4) !important; } /* Tutorial / Info / Default — cream minimal */ .btn-default, .btn-info, button[id*="tutorial"], a[id*="tutorial"], .btn[title*="Tutorial"] { background: linear-gradient(180deg, #ffffff 0%, #f4eee0 60%, #e2d7be 100%) !important; background-image: linear-gradient(180deg, #ffffff 0%, #f4eee0 60%, #e2d7be 100%) !important; border: 1.2px solid #c5b493 !important; color: #116943 !important; box-shadow: 0 1px 3px rgba(0,0,0,.15), inset 0 1px 0 #fff !important; } /* btn-info with text (capsule fix) */ #Tutorial_checkstyle, .btn.btn-info.btn-xs.edit-program { width: auto !important; height: 24px !important; padding: 0 12px !important; border-radius: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: normal !important; } /* ========================================================================== 12. TABLE (Bootstrap) ========================================================================== */ .table thead tr th { background-color: var(--pk-green-mid) !important; color: var(--pk-text-inv) !important; border-color: rgba(255,255,255,.12) !important; text-transform: uppercase; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .4px; white-space: nowrap; } .table tbody tr td { border-color: var(--pk-border-light) !important; vertical-align: middle !important; } .table tbody tr:nth-child(even) td { background-color: rgba(197,160,89,.05) !important; } .table tbody tr:hover td { background-color: rgba(0,107,74,.07) !important; } .table-responsive { overflow-x: auto !important; scrollbar-width: thin; scrollbar-color: var(--pk-gold) rgba(197,160,89,.12); } .table-responsive::-webkit-scrollbar { height: 7px; } .table-responsive::-webkit-scrollbar-track { background: rgba(212,192,161,.15); border-radius: 4px; } .table-responsive::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--pk-gold-2), var(--pk-gold)); border-radius: 4px; } /* ========================================================================== 13. DATATABLES (Toolbar, Pagination, Scroll) ========================================================================== */ /* ── Toolbar ─────────────────────────────────── */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dt-toolbar, div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter, div.dataTables_wrapper div.dataTables_info { background: var(--pk-cream) !important; background-color: var(--pk-cream) !important; color: var(--pk-text) !important; border-color: var(--pk-border-light) !important; } .dt-toolbar { background: var(--pk-cream) !important; background-color: var(--pk-cream) !important; border-bottom: 1px solid var(--pk-border-light) !important; padding: 6px 10px !important; } /* Toolbar search input */ .dataTables_wrapper .dataTables_filter input, .dt-toolbar input[type="search"], .dt-toolbar input[type="text"] { background: var(--pk-surface) !important; border: 1px solid var(--pk-border) !important; color: var(--pk-text) !important; border-radius: 4px !important; padding: 2px 8px !important; } /* ── Footer bar ──────────────────────────────── */ .dt-toolbar-footer, div.dataTables_wrapper .dt-toolbar-footer, .dataTables_wrapper .dt-toolbar-footer { background: var(--pk-green) !important; background-color: var(--pk-green) !important; background-image: none !important; border-top: 2px solid var(--pk-gold) !important; padding: 5px 10px !important; color: #ffffff !important; } .dataTables_wrapper .dataTables_info, .dt-toolbar-footer .dataTables_info, .dataTables_info, div.dataTables_wrapper div.dataTables_info { color: rgba(255,255,255,.85) !important; font-size: 11px !important; background: transparent !important; } /* Length select */ .dataTables_wrapper .dataTables_length select, .dt-toolbar-footer select, .dt-toolbar select, .dataTables_length select { background: var(--pk-green-mid) !important; background-color: var(--pk-green-mid) !important; border: 1px solid var(--pk-gold) !important; color: #ffffff !important; border-radius: 12px !important; padding: 2px 8px !important; font-size: 11px !important; height: 24px !important; } .dataTables_wrapper .dataTables_length label, .dataTables_length label { color: rgba(255,255,255,.85) !important; font-size: 11px !important; } /* Footer icon buttons */ .dt-toolbar-footer .btn, .btn-outline-secondary { background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; color: var(--pk-gold-sheen) !important; padding: 4px !important; height: auto !important; width: auto !important; border-radius: 0 !important; } .dt-toolbar-footer .btn i, .dt-toolbar-footer .btn span, .dt-toolbar-footer .btn .fa { color: var(--pk-gold-sheen) !important; margin: 0 !important; font-size: 15px !important; } .dt-toolbar-footer .btn:hover i, .dt-toolbar-footer .btn:hover .fa { color: #ffffff !important; } /* ── Pagination ──────────────────────────────── */ .dataTables_wrapper .dataTables_paginate, .dataTables_paginate, div.dataTables_wrapper div.dataTables_paginate { background: transparent !important; } .dataTables_wrapper .dataTables_paginate .paginate_button, .dataTables_paginate .paginate_button, .dataTables_paginate span .paginate_button, .paginate_button { background: var(--pk-cream-dark) !important; background-color: var(--pk-cream-dark) !important; background-image: none !important; border: 1px solid var(--pk-border) !important; color: #4A3B2C !important; font-weight: 600 !important; font-size: 11px !important; border-radius: 4px !important; margin: 0 2px !important; padding: 2px 8px !important; cursor: pointer !important; transition: all .15s !important; box-shadow: none !important; text-shadow: none !important; } .dataTables_paginate .paginate_button:hover, .paginate_button:hover { background: var(--pk-gold) !important; background-color: var(--pk-gold) !important; background-image: none !important; border-color: var(--pk-gold-2) !important; color: var(--pk-green-dark) !important; } .dataTables_paginate .paginate_button.current, .dataTables_paginate .paginate_button.current:hover, .paginate_button.current, .paginate_button.current:hover { background: var(--pk-green) !important; background-color: var(--pk-green) !important; background-image: none !important; border-color: var(--pk-green-dark) !important; color: #ffffff !important; font-weight: 700 !important; } .dataTables_paginate .paginate_button.disabled, .dataTables_paginate .paginate_button.disabled:hover, .paginate_button.disabled { background: var(--pk-cream) !important; background-color: var(--pk-cream) !important; background-image: none !important; border-color: var(--pk-border-light) !important; color: #9a9280 !important; cursor: default !important; opacity: 0.6 !important; } /* First/prev/next/last buttons */ .paginate_button.first, .paginate_button.previous, .paginate_button.next, .paginate_button.last { background: var(--pk-green-mid) !important; background-image: none !important; border-color: var(--pk-green-dark) !important; color: #ffffff !important; } .paginate_button.first:hover, .paginate_button.previous:hover, .paginate_button.next:hover, .paginate_button.last:hover { background: var(--pk-green-dark) !important; background-image: none !important; color: var(--pk-gold-sheen) !important; } /* ── Scroll areas ────────────────────────────── */ .dataTables_scrollBody, .dataTables_scrollHead, .dataTables_scrollFoot, div.dataTables_scrollBody, div.dataTables_scrollHead { background: var(--pk-surface) !important; background-color: var(--pk-surface) !important; } .dataTables_scrollBody::-webkit-scrollbar, .dataTables_scrollHead::-webkit-scrollbar, .dataTables_scrollFoot::-webkit-scrollbar, .dataTables_scroll::-webkit-scrollbar, .DTFC_LeftBodyLiner::-webkit-scrollbar, .DTFC_RightBodyLiner::-webkit-scrollbar, [class*="dataTables"]::-webkit-scrollbar, div[style*="overflow"]::-webkit-scrollbar { height: 7px !important; width: 7px !important; } .dataTables_scrollBody::-webkit-scrollbar-track, .dataTables_scrollHead::-webkit-scrollbar-track, .dataTables_scroll::-webkit-scrollbar-track, [class*="dataTables"]::-webkit-scrollbar-track, div[style*="overflow"]::-webkit-scrollbar-track { background: rgba(212,192,161,.25) !important; border-radius: 4px !important; box-shadow: none !important; } .dataTables_scrollBody::-webkit-scrollbar-thumb, .dataTables_scrollHead::-webkit-scrollbar-thumb, .dataTables_scroll::-webkit-scrollbar-thumb, [class*="dataTables"]::-webkit-scrollbar-thumb, div[style*="overflow"]::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--pk-gold-2), var(--pk-gold)) !important; border-radius: 4px !important; border: none !important; box-shadow: none !important; } .dataTables_scrollBody::-webkit-scrollbar-thumb:hover, .dataTables_scroll::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, var(--pk-green-mid), var(--pk-green)) !important; } .dataTables_scrollBody::-webkit-scrollbar-corner, .dataTables_scroll::-webkit-scrollbar-corner { background: rgba(197,160,89,.07) !important; } /* ========================================================================== 14. AG-GRID ========================================================================== */ /* ── Base containers ─────────────────────────── */ .ag-root-wrapper, .ag-root-wrapper-body, .ag-root, .ag-body, .ag-center-cols-container, .ag-center-cols-viewport, .ag-center-cols-clipper, .ag-body-viewport, .ag-body-horizontal-scroll, .ag-body-horizontal-scroll-viewport, .ag-body-horizontal-scroll-container, .ag-floating-bottom, .ag-floating-top { background-color: var(--pk-surface) !important; color: var(--pk-text) !important; border-color: var(--pk-border-light) !important; } .ag-root-wrapper { border: 1px solid var(--pk-border) !important; border-radius: 0 !important; } /* Global border override */ .ag-root-wrapper, .ag-root-wrapper *, [class^="ag-"], [class*=" ag-"] { border-color: var(--pk-border-light) !important; } /* ── Header ──────────────────────────────────── */ .ag-header, .ag-header-viewport, .ag-header-container, .ag-pinned-left-header, .ag-pinned-right-header, .ag-header-row { background: var(--pk-green-mid) !important; background-color: var(--pk-green-mid) !important; color: #ffffff !important; border-bottom: 2px solid var(--pk-gold) !important; border-color: var(--pk-gold) !important; } .ag-header-cell, .ag-header-group-cell { background: var(--pk-green-mid) !important; color: #ffffff !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.3px !important; border-right: 1px solid rgba(255,255,255,.15) !important; } .ag-header-cell-text { color: #ffffff !important; } /* Sort & filter icons */ .ag-header-cell .ag-icon, .ag-header-cell .ag-sort-indicator-icon, .ag-header-cell .ag-sort-order, .ag-sort-ascending-icon, .ag-sort-descending-icon, .ag-sort-none-icon, .ag-icon-filter { color: var(--pk-gold-sheen) !important; opacity: 1 !important; } /* ── Floating Filter Row ─────────────────────── */ .ag-floating-filter, .ag-header-row.ag-header-row-column-filter { background: var(--pk-cream) !important; background-color: var(--pk-cream) !important; border-bottom: 1px solid var(--pk-border) !important; } .ag-floating-filter-body input, .ag-floating-filter input, .ag-input-field-input { background: var(--pk-surface) !important; border: 1px solid var(--pk-border) !important; color: var(--pk-text) !important; border-radius: 3px !important; font-size: 11px !important; } .ag-floating-filter-body input:focus, .ag-input-field-input:focus { border-color: var(--pk-green-mid) !important; box-shadow: 0 0 0 2px rgba(0,107,74,.18) !important; outline: none !important; } /* ── Cells & Rows ────────────────────────────── */ .ag-cell, .ag-row .ag-cell { color: var(--pk-text) !important; border-right: 1px solid var(--pk-border-light) !important; border-bottom: 1px solid var(--pk-border-light) !important; background-color: transparent !important; font-size: 12px !important; } .ag-row { background-color: var(--pk-surface) !important; border-bottom: 1px solid var(--pk-border-light) !important; } .ag-row-even { background-color: var(--pk-surface) !important; } .ag-row-odd { background-color: rgba(197,160,89,.05) !important; } .ag-row:hover, .ag-row-hover { background-color: rgba(0,107,74,.07) !important; } .ag-row-selected, .ag-row-selected.ag-row-hover { background-color: rgba(197,160,89,.18) !important; } /* ── Pinned columns ──────────────────────────── */ .ag-pinned-left-cols-container, .ag-pinned-right-cols-container { background: var(--pk-surface) !important; } .ag-pinned-left-cols-container .ag-row, .ag-pinned-right-cols-container .ag-row { background-color: inherit !important; } .ag-pinned-right-header, .ag-pinned-right-cols-container { border-left: 2px solid var(--pk-gold) !important; } .ag-pinned-left-header, .ag-pinned-left-cols-container { border-right: 2px solid var(--pk-gold) !important; } /* ── Status / Paging bar ─────────────────────── */ .ag-status-bar, .ag-paging-panel, .ag-status-panel { background: var(--pk-green) !important; background-color: var(--pk-green) !important; border-top: 2px solid var(--pk-gold) !important; border-color: var(--pk-gold) !important; color: rgba(255,255,255,.85) !important; } .ag-paging-panel, .ag-paging-row-summary-panel, .ag-paging-page-summary-panel { background: var(--pk-green) !important; color: rgba(255,255,255,.85) !important; font-size: 11px !important; } .ag-paging-button .ag-icon { color: var(--pk-gold-sheen) !important; cursor: pointer !important; } .ag-paging-button:hover .ag-icon { color: #ffffff !important; } .ag-paging-button[disabled] .ag-icon, .ag-paging-button.ag-disabled .ag-icon { color: rgba(255,255,255,.3) !important; cursor: default !important; } /* ── Checkbox ────────────────────────────────── */ .ag-checkbox-input-wrapper { background: var(--pk-surface) !important; border: 1.5px solid var(--pk-border) !important; border-radius: 3px !important; } .ag-checkbox-input-wrapper.ag-checked { background: var(--pk-green) !important; border-color: var(--pk-green) !important; } .ag-checkbox-input-wrapper::after { color: #ffffff !important; } /* ── Overlay ─────────────────────────────────── */ .ag-overlay-loading-center, .ag-overlay-no-rows-center { background: var(--pk-surface) !important; color: var(--pk-text) !important; border: 1px solid var(--pk-border) !important; border-radius: 6px !important; padding: 12px 20px !important; } /* ── Context Menu / Select list ──────────────── */ .ag-menu, .ag-select-list { background: var(--pk-surface) !important; border: 1px solid var(--pk-border) !important; box-shadow: 0 4px 16px rgba(0,0,0,.12) !important; } .ag-menu-option:hover, .ag-select-list-item:hover { background: rgba(0,107,74,.08) !important; color: var(--pk-green) !important; } /* ── Scrollbars ──────────────────────────────── */ .ag-body-horizontal-scroll-viewport::-webkit-scrollbar, .ag-body-viewport::-webkit-scrollbar { height: 7px !important; width: 7px !important; } .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track, .ag-body-viewport::-webkit-scrollbar-track { background: rgba(212,192,161,.25) !important; border-radius: 4px !important; } .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb, .ag-body-viewport::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--pk-gold-2), var(--pk-gold)) !important; border-radius: 4px !important; border: none !important; } .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover, .ag-body-viewport::-webkit-scrollbar-thumb:hover { background: var(--pk-green-mid) !important; } /* ========================================================================== 15. WIDGET / PANEL ========================================================================== */ .jarviswidget { border-color: var(--pk-border) !important; box-shadow: 0 2px 10px rgba(0,0,0,.08) !important; } .jarviswidget > header { background: var(--pk-green-mid) !important; color: var(--pk-text-inv) !important; border-bottom: 2px solid var(--pk-gold) !important; font-family: var(--f-brand) !important; } .jarviswidget > header h2 { color: var(--pk-text-inv) !important; } .jarviswidget > header .fa { color: var(--pk-gold) !important; } .jarviswidget > div { background: var(--pk-surface) !important; } .well, .panel { background: var(--pk-surface) !important; border-color: var(--pk-border-light) !important; } .panel-heading { background: var(--pk-green-mid) !important; color: var(--pk-text-inv) !important; border-bottom: 2px solid var(--pk-gold) !important; } /* ========================================================================== 16. INSTANCE TAB (Hexagon Badge) ========================================================================== */ button.tablink.active, .tablink.active { position: relative; background: transparent !important; color: transparent !important; font-weight: bold; font-size: 14px; border: none !important; padding: 0 !important; width: 120px !important; height: 28px !important; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-sizing: border-box; } /* Gold hexagon outline */ button.tablink.active::before, .tablink.active::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--pk-gold) !important; clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0% 50%); z-index: 1; } /* Green hexagon fill with label */ button.tablink.active::after, .tablink.active::after { content: "Instance(1)"; position: absolute; top: 1.5px; left: 1.5px; right: 1.5px; bottom: 1.5px; background: var(--pk-green) !important; color: #FFFFFF !important; font-weight: bold; font-size: 13px; display: flex; align-items: center; justify-content: center; clip-path: polygon(11px 0%, calc(100% - 11px) 0%, 100% 50%, calc(100% - 11px) 100%, 11px 100%, 0% 50%); z-index: 2; } /* ========================================================================== 17. DROPDOWN MENU (Bootstrap) ========================================================================== */ .dropdown-menu { background: var(--pk-surface) !important; border-color: var(--pk-border) !important; box-shadow: 0 4px 16px rgba(0,0,0,.12) !important; } .dropdown-menu > li > a { color: var(--pk-text) !important; } .dropdown-menu > li > a:hover { background: rgba(0,107,74,.08) !important; color: var(--pk-green) !important; } /* ========================================================================== 18. NOTIFICATION DROPDOWN (Ajax Dropdown - Posisi Absolut Fix) ========================================================================== */ /* ── Container ───────────────────────────────── */ body div.ajax-dropdown { background-color: #ffffff !important; border: 2px solid #1b4d3e !important; border-radius: 6px !important; box-shadow: 0 8px 30px rgba(0,0,0,.30) !important; width: 390px !important; right: 0 !important; left: auto !important; z-index: 99999 !important; overflow: hidden !important; } /* ── Tab Menu ────────────────────────────────── */ body div.btn-group.btn-group-justified { display: flex !important; width: 100% !important; background-color: #f4efe2 !important; border-bottom: 2px solid #d4af37 !important; margin: 0 !important; padding: 0 !important; } body div.btn-group-justified .btn, body div.btn-group-justified a, body div.btn-group-justified button, body div.btn-group-justified label.btn { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 10px 4px !important; font-size: 13px !important; font-weight: 700 !important; color: #1b4d3e !important; background-color: #f4efe2 !important; border: none !important; border-radius: 0 !important; margin: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; } body div.btn-group-justified .btn.active, body div.btn-group-justified a.active, body div.btn-group-justified button.active, body div.btn-group-justified label.btn.active { background-color: #1b4d3e !important; color: #ffffff !important; } /* Tab button overrides */ body .ajax-dropdown .btn-group-justified { background: #f4efe2 !important; border-bottom: 2px solid #d4af37 !important; } body .ajax-dropdown .btn, body .ajax-dropdown label.btn { background: #f4efe2 !important; color: #1b5e20 !important; -webkit-text-fill-color: #1b5e20 !important; border: none !important; font-size: 14px !important; font-weight: 700 !important; text-shadow: none !important; opacity: 1 !important; box-shadow: none !important; } body .ajax-dropdown .btn.active, body .ajax-dropdown label.btn.active, body .ajax-dropdown .btn.btn-default.active { background: #1b4d3e !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border-bottom: 2px solid #d4af37 !important; } body .ajax-dropdown .btn.active *, body .ajax-dropdown label.btn.active * { color: #ffffff !important; } body .ajax-dropdown .btn:hover, body .ajax-dropdown label.btn:hover { background: #e8dfc9 !important; } /* Header title strip */ body div.ajax-dropdown .ajax-notifications { color: #1b5e20 !important; font-weight: 700 !important; font-size: 14px !important; background: #f4efe2 !important; border-bottom: 2px solid #d4af37 !important; } /* ── Notification Row ────────────────────────── */ body div.ajax-dropdown span.padding-10 { position: relative !important; display: flex !important; align-items: flex-start !important; gap: 12px !important; width: 100% !important; padding: 12px 10px 28px !important; /* Ruang bawah diperluas untuk penempatan absolut */ border-bottom: 1px solid #eadeca !important; background-color: #ffffff !important; box-sizing: border-box !important; } body div.ajax-dropdown span.padding-10:hover { background-color: #f9f6ef !important; } /* Badge/icon */ body div.ajax-dropdown span.padding-10 em.badge { background-color: #1b4d3e !important; min-width: 34px !important; width: 34px !important; height: 34px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 4px !important; flex-shrink: 0 !important; margin: 0 !important; padding: 0 !important; box-shadow: 0 2px 4px rgba(0,0,0,.15) !important; } body div.ajax-dropdown span.padding-10 em.badge *, body div.ajax-dropdown span.padding-10 em.badge i { color: #ffffff !important; font-size: 14px !important; } /* Text container */ body div.ajax-dropdown .notification-body { flex: 1 !important; min-width: 0 !important; overflow: hidden !important; padding: 2px 0 0 !important; margin: 0 !important; background: transparent !important; } /* Text content */ body div.ajax-dropdown .notification-body, body div.ajax-dropdown .notification-body span, body div.ajax-dropdown .notification-body p, body div.ajax-dropdown .notification-body b, body div.ajax-dropdown .notification-body strong, body div.ajax-dropdown .notification-body div, body div.ajax-dropdown .notification-body font, body div.ajax-dropdown li, body div.ajax-dropdown a { color: #1b5e20 !important; -webkit-text-fill-color: #1b5e20 !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.6 !important; opacity: 1 !important; visibility: visible !important; white-space: normal !important; word-break: break-word !important; overflow-wrap: break-word !important; text-shadow: none !important; } /* ── PERBAIKAN TIMESTAMPS: Trik Shadow & Filter Penembus Warna Putih ── */ body div.ajax-dropdown span.pull-right, body div.ajax-dropdown .pull-right.font-xs.text-muted, body div.ajax-dropdown .notification-body .pull-right { position: absolute !important; right: 12px !important; bottom: 6px !important; display: block !important; float: none !important; z-index: 999 !important; background: transparent !important; } /* Tembakan langsung ke tag menggunakan manipulasi bayangan pekat & invert warna */ body div.ajax-dropdown span.pull-right i, body div.ajax-dropdown .pull-right i, body div.ajax-dropdown i { /* 1. Hancurkan properti warna standar */ color: #aa841c !important; -webkit-text-fill-color: #aa841c !important; /* 2. Trik Bayangan Peledak (Jika teks putih tetap bandel, bayangan emas pekat ini akan membungkus dan menutupinya) */ text-shadow: 0 0 0.1px #aa841c, 0 0 0px #aa841c, 0 0 0px #aa841c !important; /* 3. Trik Filter Browser (Mengubah paksa render teks putih menjadi kecoklatan/emas tua di layar) */ filter: sepia(1) saturate(5) hue-rotate(5deg) brightness(0.6) !important; font-style: normal !important; font-size: 11px !important; font-weight: 700 !important; display: inline-block !important; opacity: 1 !important; visibility: visible !important; } /* ── Footer ──────────────────────────────────── */ body div.ajax-dropdown .footer, body div.ajax-dropdown footer { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 10px 12px !important; background-color: #f4efe2 !important; border-top: 2px solid #d4af37 !important; } body div.ajax-dropdown .footer span, body div.ajax-dropdown footer span { color: #1b4d3e !important; font-size: 12px !important; font-weight: 700 !important; } /* Refresh button */ body div.ajax-dropdown button.btn.btn-xs.btn-default.pull-right, body div.ajax-dropdown .footer button.btn-default { background-color: #1b4d3e !important; border: 1px solid #d4af37 !important; border-radius: 4px !important; padding: 6px 16px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; float: none !important; cursor: pointer !important; box-shadow: 0 2px 4px rgba(0,0,0,.15) !important; transition: all 0.2s ease !important; } body div.ajax-dropdown button.btn.btn-xs.btn-default.pull-right:hover, body div.ajax-dropdown .footer button.btn-default:hover { background-color: #113327 !important; } body div.ajax-dropdown button.btn.btn-xs.btn-default.pull-right *, body div.ajax-dropdown .footer button.btn-default * { color: #ffffff !important; font-size: 13px !important; } /* ── Dropdown Scrollbar ──────────────────────── */ body div.ajax-dropdown ::-webkit-scrollbar { width: 8px; } body div.ajax-dropdown ::-webkit-scrollbar-track { background: #f4efe2; } body div.ajax-dropdown ::-webkit-scrollbar-thumb { background: #1b4d3e; border-radius: 10px; } body div.ajax-dropdown ::-webkit-scrollbar-thumb:hover { background: #113327; } /* ========================================================================== 19. DATEPICKER POPUP ========================================================================== */ /* Header (month & year) */ .datepicker-dropdown .datepicker-days th.datepicker-switch, .datepicker table tr td.active, .ui-datepicker-header, .bs-datepicker-head { background-color: var(--pk-green) !important; color: var(--pk-text-inv) !important; } /* Prev/Next navigation */ .datepicker table tr th.prev, .datepicker table tr th.next, .bs-datepicker-head .next, .bs-datepicker-head .previous { color: var(--pk-gold-sheen) !important; background-color: var(--pk-green) !important; } .datepicker table tr th.prev:hover, .datepicker table tr th.next:hover { background: var(--pk-green-dark) !important; } /* Day names */ .datepicker table tr th.dow, .bs-datepicker-weekdays th { color: var(--pk-text) !important; font-weight: 600 !important; } /* Today */ .datepicker table tr td.today, .datepicker table tr td.today.active, td.today { color: var(--pk-green-mid) !important; font-weight: bold !important; border-bottom: 2px solid var(--pk-gold) !important; } /* Selected date */ .datepicker table tr td.active, .datepicker table tr td.active.active, td.active { background-image: none !important; background-color: var(--pk-gold) !important; color: var(--pk-text-inv) !important; border-radius: 50% !important; } /* Hover on day numbers */ .datepicker table tr td.day:hover, .bs-datepicker-body table td:hover { background: var(--pk-surface-sub) !important; border-radius: 50% !important; color: var(--pk-green-mid) !important; } /* ========================================================================== 20. BADGE / LABEL ========================================================================== */ .badge-primary, .label-primary { background: var(--pk-green) !important; } .badge-warning, .label-warning { background: var(--pk-gold) !important; color: var(--pk-green) !important; } .badge-success, .label-success { background: var(--pk-success) !important; } .badge-danger, .label-danger { background: var(--pk-red) !important; } /* ========================================================================== 21. ALERTS ========================================================================== */ .alert-success { background: rgba(40,125,60,.09) !important; border-color: var(--pk-success) !important; color: var(--pk-success) !important; } .alert-warning { background: rgba(179,138,0,.09) !important; border-color: #b38a00 !important; color: #7a5f00 !important; } .alert-danger { background: rgba(163,42,42,.08) !important; border-color: var(--pk-red) !important; color: var(--pk-red) !important; } .alert-info { background: rgba(26,82,118,.08) !important; border-color: #1a5276 !important; color: #1a5276 !important; } /* ========================================================================== 22. TOOLTIP ========================================================================== */ .tooltip-inner { background: var(--pk-green) !important; border: 1px solid var(--pk-gold) !important; } .tooltip.top .tooltip-arrow { border-top-color: var(--pk-green) !important; } .tooltip.bottom .tooltip-arrow { border-bottom-color: var(--pk-green) !important; } .tooltip.left .tooltip-arrow { border-left-color: var(--pk-green) !important; } .tooltip.right .tooltip-arrow { border-right-color: var(--pk-green) !important; } /* ========================================================================== 23. PAGINATION (Bootstrap) ========================================================================== */ .pagination > li > a, .pagination > li > span { color: var(--pk-green) !important; border-color: var(--pk-border) !important; background: var(--pk-cream-dark) !important; background-image: none !important; } .pagination > .active > a, .pagination > .active > span { background: var(--pk-green) !important; background-image: none !important; border-color: var(--pk-green) !important; color: #fff !important; } .pagination > li > a:hover, .pagination > li > span:hover { background: var(--pk-gold) !important; background-image: none !important; color: var(--pk-green-dark) !important; } /* ========================================================================== 24. SCROLLBAR (Global) ========================================================================== */ * { scrollbar-width: thin !important; scrollbar-color: var(--pk-gold) rgba(197,160,89,.12) !important; } ::-webkit-scrollbar { width: 7px !important; height: 7px !important; } ::-webkit-scrollbar-track { background: rgba(212,192,161,.18) !important; border-radius: 4px !important; } ::-webkit-scrollbar-thumb { background: var(--pk-gold) !important; border-radius: 4px !important; border: none !important; } ::-webkit-scrollbar-thumb:hover { background: var(--pk-green-mid) !important; } ::-webkit-scrollbar-corner { background: rgba(197,160,89,.07) !important; } /* ========================================================================== 25. MISC & UTILITIES ========================================================================== */ /* Shortcut overlay */ #shortcut { background: rgba(0,54,36,.96) !important; border-top: 3px solid var(--pk-gold) !important; } /* Spinner */ .spinner-border { color: var(--pk-gold) !important; border-color: var(--pk-gold) transparent transparent transparent !important; } /* Text selection */ ::selection { background: rgba(197,160,89,.35); color: var(--pk-text); } /* Islamic divider ornament */ .islamic-divider { position: relative; text-align: center; height: 20px; margin: 8px 0; } .islamic-divider::before, .islamic-divider::after { content: ''; position: absolute; top: 50%; width: calc(50% - 20px); height: 1px; } .islamic-divider::before { left: 0; background: linear-gradient(90deg, transparent, var(--pk-gold)); } .islamic-divider::after { right: 0; background: linear-gradient(90deg, var(--pk-gold), transparent); } .islamic-divider span { display: inline-block; width: 10px; height: 10px; border: 1.5px solid var(--pk-gold); transform: rotate(45deg); background: var(--pk-bg); position: relative; z-index: 1; } /* ========================================================================== 26. PRINT ========================================================================== */ @media print { body::before, body::after, #left-panel::after { display: none !important; } }