/* Full-screen overlay behind the drawer */ .indicator-drawer-overlay { position: fixed; inset: 0; /* top:0; right:0; bottom:0; left:0 */ background: rgba(0,0,0,0.45); z-index: 1000; /* must sit above page content */ } /* Drawer container (right side panel) */ .indicator-drawer { position: fixed; top: 0; right: -420px; /* hidden offscreen by default */ width: 420px; /* adjust as needed */ height: 100vh; background: #ffffff; box-shadow: -6px 0 18px rgba(0,0,0,0.15); z-index: 1001; /* above overlay */ transition: right 0.25s ease-in-out; display: flex; flex-direction: column; } /* Visible state */ .indicator-drawer-open { right: 0; } /* Header */ .indicator-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid #eee; background: #fafafa; } .indicator-close-arrow { border: none; background: transparent; font-size: 20px; cursor: pointer; } /* Content area */ .indicator-drawer-content { padding: 12px 14px; border-bottom: 1px solid #f0f0f0; } /* Optional: prevent body scroll when drawer open (requires JS to toggle class on ) */ body.no-scroll { overflow: hidden; } /* Minor visuals retained from your tiles (tweak as you like) */ .dashboard-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px 14px; } .tile, .tile2 { background: #f8f8f8; border: 1px solid #eee; border-radius: 6px; padding: 10px; } .tile-title { margin: 0; font-size: 12px; color: #666; } .tile-number { margin: 4px 0 0; font-size: 20px; font-weight: 700; color: #222; } .tablet_02, .tablet_03, .tablet_04, .tablet_05 { padding: 12px 14px; } .fixed-table { width: 100%; border-collapse: collapse; } .fixed-table th, .fixed-table td { border: 1px solid #e5e5e5; padding: 6px 8px; font-size: 12px; } .indicator-styled-table { width: 100%; margin-top: 16px; border-collapse: collapse; } .indicator-styled-table th, .indicator-styled-table td { border: 1px solid #e5e5e5; padding: 8px 10px; font-size: 13px; } .indicator-selected-row { background: #fff9e6; } /* ===== Dropdown wrapper ===== */ .dropdown-wrapper { position: relative; display: inline-block; } /* ===== Dropdown panel ===== */ .settings-dropdown { position: absolute; top: 40px; right: 0; background: #1e1e2f; color: white; border-radius: 8px; min-width: 220px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 9999; padding: 8px 0; animation: dropdownFade 0.2s ease-in-out; } /* ===== Header info ===== */ .dropdown-header { display: flex; align-items: center; padding: 10px 15px; font-weight: bold; font-size: 14px; } .dropdown-header i { margin-right: 10px; color: #ffcc00; } /* ===== Dropdown items ===== */ .dropdown-item { display: flex; align-items: center; width: 100%; background: transparent; border: none; color: white; text-align: left; font-size: 14px; padding: 10px 15px; cursor: pointer; transition: background 0.2s; } .dropdown-item i { margin-right: 10px; width: 18px; text-align: center; } .dropdown-item:hover { background: rgba(255,255,255,0.1); } .dropdown-item.logout { color: #ff5555; } .dropdown-item.logout:hover { background: rgba(255, 85, 85, 0.2); } /* ===== Divider ===== */ .settings-dropdown hr { border: 0; border-top: 1px solid rgba(255,255,255,0.2); margin: 6px 0; } /* ===== Animation ===== */ @keyframes dropdownFade { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .pagination-controls { display: flex; justify-content: center; align-items: center; margin-top: 20px; gap: 20px; } .pagination-controls { display: flex; justify-content: center; align-items: center; margin-top: 25px; gap: 20px; } .pagination-controls button { background-color: #2b9948; color: white; border: none; padding: 10px 18px; font-size: 14px; border-radius: 6px; cursor: pointer; transition: background-color 0.2s ease; } .pagination-controls button:hover:not(:disabled) { background-color: #247c3a; } .pagination-controls button:disabled { background-color: #ccc; cursor: default; } .pagination-controls span { font-weight: 500; font-size: 16px; }