/* ---------------------------------------------------- Sijambu Premium Admin Custom Stylesheet (admin-custom.css) Created for outstanding SaaS-like Administrative UX ---------------------------------------------------- */ :root { --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-accent: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --bg-canvas: #f4f6fa; --sidebar-bg: #ffffff; --sidebar-color: #475569; --sidebar-border: #e2e8f0; --sidebar-active-bg: rgba(99, 102, 241, 0.1); --sidebar-active-color: #4f46e5; --sidebar-hover-bg: rgba(99, 102, 241, 0.05); --card-radius: 24px; --card-shadow: 0 10px 30px rgba(165, 175, 200, 0.12); --card-hover-shadow: 0 20px 45px rgba(99, 102, 241, 0.18); --glow-primary: rgba(99, 102, 241, 0.4); --glow-success: rgba(16, 185, 129, 0.4); --glow-info: rgba(14, 165, 233, 0.4); --glow-warning: rgba(245, 158, 11, 0.4); --glow-danger: rgba(239, 68, 68, 0.4); /* ---- Theme tokens (light default) ---- */ --theme-bg: #f4f6fa; --theme-surface: #ffffff; --theme-surface-2: #f8fafc; --theme-border: #e2e8f0; --theme-text: #334155; --theme-text-muted: #475569; --theme-text-strong: #0f172a; --theme-card-shadow: 0 10px 30px rgba(165, 175, 200, 0.12); --theme-header-bg: #ffffff; --theme-input-bg: #f8fafc; --theme-table-hover: rgba(99, 102, 241, 0.03); --theme-row-border: #f1f5f9; } /* ============================================================ DARK MODE — applied via [data-theme="dark"] on ============================================================ */ [data-theme="dark"] { --theme-bg: #0f172a; --theme-surface: #1e293b; --theme-surface-2: #162032; --theme-border: #334155; --theme-text: #cbd5e1; --theme-text-muted: #64748b; --theme-text-strong: #f1f5f9; --theme-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); --theme-header-bg: #1e293b; --theme-input-bg: #0f172a; --theme-table-hover: rgba(99, 102, 241, 0.07); --theme-row-border: #334155; --bg-canvas: #0f172a; --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); --sidebar-bg: #0d1526; --sidebar-color: #94a3b8; --sidebar-border: #1e293b; --sidebar-active-bg: linear-gradient(135deg, #4f46e5, #6366f1); --sidebar-active-color: #ffffff; --sidebar-hover-bg: rgba(255, 255, 255, 0.06); } /* Dark Mode Semantic Text Colors */ [data-theme="dark"] .text-primary, [data-theme="dark"] .btn-nav-action .text-primary, [data-theme="dark"] .action-btn .text-primary { color: #818cf8 !important; /* Vibrant Indigo */ } [data-theme="dark"] .text-success, [data-theme="dark"] .btn-nav-action .text-success, [data-theme="dark"] .action-btn .text-success { color: #34d399 !important; /* Vibrant Emerald */ } [data-theme="dark"] .text-warning, [data-theme="dark"] .btn-nav-action .text-warning, [data-theme="dark"] .action-btn .text-warning { color: #fbbf24 !important; /* Vibrant Amber */ } [data-theme="dark"] .text-danger, [data-theme="dark"] .btn-nav-action .text-danger, [data-theme="dark"] .action-btn .text-danger { color: #f87171 !important; /* Vibrant Coral Red */ } [data-theme="dark"] .text-info, [data-theme="dark"] .btn-nav-action .text-info, [data-theme="dark"] .action-btn .text-info { color: #38bdf8 !important; /* Vibrant Sky Blue */ } /* Dark Mode Semantic Backgrounds */ [data-theme="dark"] .bg-light-primary { background-color: rgba(99, 102, 241, 0.15) !important; } [data-theme="dark"] .bg-light-success { background-color: rgba(16, 185, 129, 0.15) !important; } [data-theme="dark"] .bg-light-warning { background-color: rgba(245, 158, 11, 0.15) !important; } [data-theme="dark"] .bg-light-danger { background-color: rgba(239, 68, 68, 0.15) !important; } [data-theme="dark"] .bg-light-info { background-color: rgba(14, 165, 233, 0.15) !important; } /* Dark Mode Premium Action Buttons (Desktop & Mobile) */ [data-theme="dark"] .action-btn { background: #162032 !important; border-color: rgba(255, 255, 255, 0.08) !important; color: #cbd5e1 !important; } [data-theme="dark"] .action-btn.edit-btn { color: #818cf8 !important; background: rgba(99, 102, 241, 0.15) !important; border-color: rgba(99, 102, 241, 0.25) !important; } [data-theme="dark"] .action-btn.edit-btn:hover { color: #ffffff !important; background: #4f46e5 !important; border-color: #4f46e5 !important; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4) !important; } [data-theme="dark"] .action-btn.view-btn { color: #38bdf8 !important; background: rgba(14, 165, 233, 0.15) !important; border-color: rgba(14, 165, 233, 0.25) !important; } [data-theme="dark"] .action-btn.view-btn:hover { color: #ffffff !important; background: #0ea5e9 !important; border-color: #0ea5e9 !important; box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4) !important; } [data-theme="dark"] .action-btn.print-btn { color: #34d399 !important; background: rgba(16, 185, 129, 0.15) !important; border-color: rgba(16, 185, 129, 0.25) !important; } [data-theme="dark"] .action-btn.print-btn:hover { color: #ffffff !important; background: #10b981 !important; border-color: #10b981 !important; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important; } [data-theme="dark"] .action-btn.pay-btn { color: #fbbf24 !important; background: rgba(245, 158, 11, 0.15) !important; border-color: rgba(245, 158, 11, 0.25) !important; } [data-theme="dark"] .action-btn.pay-btn:hover { color: #ffffff !important; background: #f59e0b !important; border-color: #f59e0b !important; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4) !important; } [data-theme="dark"] .action-btn.delete-btn { color: #f87171 !important; background: rgba(239, 68, 68, 0.15) !important; border-color: rgba(239, 68, 68, 0.25) !important; } [data-theme="dark"] .action-btn.delete-btn:hover { color: #ffffff !important; background: #ef4444 !important; border-color: #ef4444 !important; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important; } /* Dark: body & backgrounds */ [data-theme="dark"] body { background-color: #0f172a !important; color: #cbd5e1 !important; } [data-theme="dark"] .app-header { background: rgba(30, 41, 59, 0.9) !important; border-color: rgba(255, 255, 255, 0.08) !important; } [data-theme="dark"] .app-header nav { background: transparent !important; border: none !important; } [data-theme="dark"] .app-header.scrolled { background: rgba(15, 23, 42, 0.92) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important; } [data-theme="dark"] .card, [data-theme="dark"] .form-card, [data-theme="dark"] .data-card { background: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; } [data-theme="dark"] .card-body, [data-theme="dark"] .card-header { background: transparent !important; color: #cbd5e1 !important; } /* Dark: text */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #f1f5f9 !important; } [data-theme="dark"] .text-dark { color: #f1f5f9 !important; } [data-theme="dark"] .text-muted { color: #64748b !important; } [data-theme="dark"] .fw-semibold, [data-theme="dark"] .fw-bold { color: #e2e8f0; } /* Dark: table */ [data-theme="dark"] .premium-table { background: #1e293b; } [data-theme="dark"] .premium-table thead tr { background: #162032 !important; } [data-theme="dark"] .premium-table thead th { color: #94a3b8 !important; border-color: #334155 !important; } [data-theme="dark"] .premium-table tbody tr { border-bottom: 1px solid #334155 !important; } [data-theme="dark"] .premium-table tbody tr:hover { background: rgba(99, 102, 241, 0.07) !important; } [data-theme="dark"] .premium-table tbody td { color: #cbd5e1 !important; } [data-theme="dark"] .row-num { color: #475569 !important; } /* Dark: forms */ [data-theme="dark"] .premium-form .form-control, [data-theme="dark"] .premium-form .form-select, [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; } [data-theme="dark"] .premium-form .form-control:focus, [data-theme="dark"] .premium-form .form-select:focus { background: #162032 !important; border-color: #6366f1 !important; } [data-theme="dark"] .premium-form .form-label { color: #94a3b8 !important; } [data-theme="dark"] .cover-upload-area { background: #0f172a !important; border-color: #334155 !important; } /* Dark: info-table */ [data-theme="dark"] .info-table tr td { border-bottom-color: #334155 !important; color: #cbd5e1 !important; } [data-theme="dark"] .info-table .info-label { color: #64748b !important; } [data-theme="dark"] .info-table .info-value { color: #e2e8f0 !important; } /* Dark: table-controls & search */ [data-theme="dark"] .table-controls { background: #1e293b !important; border-bottom-color: #334155 !important; } [data-theme="dark"] .search-form .form-control { background: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; } [data-theme="dark"] .per-page-select select { background: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; } [data-theme="dark"] .table-footer { background: #1e293b !important; border-top-color: #334155 !important; } [data-theme="dark"] .table-info-text { color: #64748b !important; } /* Dark: form-section-title */ [data-theme="dark"] .form-section-title { color: #f1f5f9 !important; border-bottom-color: #334155 !important; } /* Dark: form action buttons */ [data-theme="dark"] .btn-form-cancel { background: #334155 !important; border-color: #475569 !important; color: #e2e8f0 !important; } [data-theme="dark"] .btn-back { background: #1e293b !important; border-color: #334155 !important; color: #94a3b8 !important; } /* Dark: modal */ [data-theme="dark"] .modal-content { background: #1e293b !important; color: #e2e8f0 !important; border-color: #334155 !important; } [data-theme="dark"] .modal-header { border-bottom-color: #334155 !important; } [data-theme="dark"] .modal-footer { border-top-color: #334155 !important; } /* Dark: notes card */ [data-theme="dark"] .notes-grid .card { background: #1e293b !important; border-color: #334155 !important; } [data-theme="dark"] .notes-grid .card-title { color: #f1f5f9 !important; } /* Dark: dropdown user menu */ [data-theme="dark"] .dropdown-menu { background: #1e293b !important; border-color: #334155 !important; } [data-theme="dark"] .dropdown-item:hover { background: #334155 !important; } /* Dark: qr-container */ [data-theme="dark"] .qr-container { background: #0f172a !important; border-color: #334155 !important; } /* Dark: detail-stat-card */ [data-theme="dark"] .detail-stat-card { background: #1e293b !important; border-color: #334155 !important; } [data-theme="dark"] .detail-stat-value { color: #f1f5f9 !important; } [data-theme="dark"] .detail-stat-label { color: #64748b !important; } /* Dark: validation-alert */ [data-theme="dark"] .validation-alert { background: rgba(239, 68, 68, 0.12) !important; color: #fca5a5 !important; } /* Dark: flash alerts */ [data-theme="dark"] .flash-alert.alert-success { background: rgba(16, 185, 129, 0.12) !important; color: #6ee7b7 !important; border-color: rgba(16, 185, 129, 0.2) !important; } [data-theme="dark"] .flash-alert.alert-danger { background: rgba(239, 68, 68, 0.12) !important; color: #fca5a5 !important; border-color: rgba(239, 68, 68, 0.2) !important; } /* Dark: sidebar */ [data-theme="dark"] .left-sidebar { background: #0d1526 !important; border-right: 1px solid #1e293b !important; } /* Dark: dashboard report stats */ [data-theme="dark"] .report-stat-col { background: #1e293b !important; border-color: #334155 !important; } [data-theme="dark"] .report-stat-col:hover { background: #334155 !important; } [data-theme="dark"] .report-stat-value { color: #f1f5f9 !important; } [data-theme="dark"] .report-stat-label { color: #94a3b8 !important; } /* Dark mode toggle button */ .theme-toggle-btn { width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid #e2e8f0; background: #ffffff; color: #334155; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.25s ease; font-size: 1.1rem; } .theme-toggle-btn:hover { border-color: #6366f1; color: #4f46e5; transform: scale(1.08); } [data-theme="dark"] .theme-toggle-btn { background: #334155; border-color: #475569; color: #fbbf24; } /* --- Global Overrides --- */ body { font-family: var(--font-primary) !important; background-color: var(--bg-canvas) !important; color: #334155; overflow-x: hidden; } h1, h2, h3, h4, h5, h6, .card-title, .brand-logo, .nav-link { font-family: var(--font-accent) !important; font-weight: 600; color: #1e293b; } /* Clean Slim Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Layout Padding Fixes */ .body-wrapper { background-color: var(--bg-canvas) !important; min-height: 100vh; padding-bottom: 2rem; } /* --- Sidebar Styling --- */ .left-sidebar { background-color: var(--sidebar-bg) !important; border-right: 1px solid var(--sidebar-border) !important; box-shadow: 10px 0 30px rgba(0, 0, 0, 0.05) !important; z-index: 1050 !important; /* Elevate above fixed header and everything else */ } .left-sidebar .brand-logo { border-bottom: 1px solid var(--sidebar-border); background-color: transparent; padding: 1.5rem 1.2rem !important; } .scroll-sidebar { height: calc(100vh - 80px); overflow-y: auto; overflow-x: hidden; } #sidebarnav { padding-bottom: 80px !important; } .left-sidebar .brand-logo img { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3)); } .left-sidebar .sidebar-nav { padding: 1.5rem 1rem !important; } /* Navigation small headers */ .left-sidebar .nav-small-cap { color: #475569 !important; font-family: var(--font-accent) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1.2px !important; font-size: 0.72rem !important; margin-top: 1.5rem !important; margin-bottom: 0.5rem !important; padding-left: 10px !important; } .left-sidebar .sidebar-nav ul .sidebar-item { margin-bottom: 6px !important; } .left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link { color: var(--sidebar-color) !important; font-family: var(--font-primary) !important; font-weight: 500 !important; font-size: 0.9rem !important; border-radius: 12px !important; padding: 10px 16px !important; display: flex !important; align-items: center !important; gap: 12px !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; background: transparent !important; } .left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link i { font-size: 1.25rem !important; transition: transform 0.25s ease !important; } .left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link:hover { color: var(--sidebar-active-color) !important; background-color: var(--sidebar-hover-bg) !important; } .left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link:hover i { transform: translateX(3px); } /* Active State styling */ .left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link.active, .left-sidebar .sidebar-nav ul .sidebar-item.selected>.sidebar-link { background: var(--sidebar-active-bg) !important; color: var(--sidebar-active-color) !important; font-weight: 600 !important; box-shadow: 0 8px 20px var(--glow-primary) !important; } /* --- App Header Styling --- */ .app-header { position: fixed !important; top: 15px !important; left: calc(270px + 24px) !important; /* Desktop: 270px sidebar + 24px margin */ right: 24px !important; width: auto !important; /* Let left and right define the width */ margin: 0 !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; background: rgba(255, 255, 255, 0.85) !important; border-radius: 20px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; z-index: 995 !important; /* Float above content, below mobile sidebar drawer */ height: 80px !important; display: flex; align-items: center; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Smooth dock transition */ } /* Beautiful Fixed Dock State on Scroll (Keep same size and position) */ .app-header.scrolled { background: rgba(255, 255, 255, 0.92) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; } /* Content spacing adjustment for fixed header */ #main-wrapper[data-layout=vertical][data-header-position=fixed] .body-wrapper>.container-fluid { padding-top: 115px !important; /* Perfect space below our floating header */ } /* Responsive Adaptations for mobile and tablet */ @media (max-width: 1199.98px) { .app-header { top: 10px !important; left: 15px !important; right: 15px !important; height: 70px !important; } .app-header.scrolled { background: rgba(255, 255, 255, 0.92) !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06) !important; } #main-wrapper[data-layout=vertical][data-header-position=fixed] .body-wrapper>.container-fluid { padding-top: 100px !important; } } /* Floating Actions in Header */ .app-header .navbar { padding: 0 20px !important; width: 100%; } .app-header #headerCollapse .btn { font-family: var(--font-accent) !important; font-weight: 600 !important; font-size: 0.85rem !important; border-radius: 12px !important; padding: 8px 18px !important; letter-spacing: 0.2px !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: none !important; } .app-header #headerCollapse .btn-primary { background: linear-gradient(135deg, #4f46e5, #6366f1) !important; border: none !important; color: #fff !important; } .app-header #headerCollapse .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4) !important; } .app-header #headerCollapse .btn-outline-primary { border: 1.5px solid #6366f1 !important; color: #6366f1 !important; background: transparent !important; } .app-header #headerCollapse .btn-outline-primary:hover { background: #6366f1 !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2) !important; } .app-header #headerCollapse .btn-outline-warning { border: 1.5px solid #f59e0b !important; color: #f59e0b !important; background: transparent !important; } .app-header #headerCollapse .btn-outline-warning:hover { background: #f59e0b !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2) !important; } .app-header #headerCollapse .btn-outline-danger { border: 1.5px solid #ef4444 !important; color: #ef4444 !important; background: transparent !important; } .app-header #headerCollapse .btn-outline-danger:hover { background: #ef4444 !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2) !important; } /* User Menu Pill */ .btn-nav-action { background: var(--theme-surface-2); border: 1px solid var(--theme-border); color: var(--theme-text-strong); font-family: var(--font-accent); font-weight: 600; border-radius: 12px; padding: 8px 16px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .btn-nav-action:hover { background: var(--sidebar-hover-bg); border-color: #6366f1; color: #4f46e5; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(99, 102, 241, 0.15); } [data-theme="dark"] .btn-nav-action:hover { color: #818cf8; } .app-header .nav-link.nav-icon-hover { transition: all 0.2s ease !important; } .app-header .nav-link.nav-icon-hover:hover { transform: scale(1.05); } .app-header .dropdown-menu { border: 1px solid rgba(0, 0, 0, 0.05) !important; box-shadow: 0 15px 35px rgba(15, 23, 42, 0.1) !important; border-radius: 16px !important; padding: 12px !important; animation: slideInDropdown 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } @keyframes slideInDropdown { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .app-header .dropdown-menu .message-body h5 { font-family: var(--font-accent) !important; font-weight: 700; margin-bottom: 8px; font-size: 1.1rem; } /* --- Premium Cards Design --- */ .card { border: 1px solid rgba(0, 0, 0, 0.04) !important; border-radius: var(--card-radius) !important; box-shadow: var(--card-shadow) !important; background: #ffffff !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; overflow: hidden !important; position: relative !important; } .card:hover { transform: translateY(-5px); box-shadow: var(--card-hover-shadow) !important; } /* Card Header Colors */ .card .card-header { border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; background: transparent !important; padding: 1.5rem 1.5rem 1rem 1.5rem !important; } .card .card-header.card-header-primary { background: linear-gradient(135deg, #4f46e5, #6366f1) !important; color: #fff !important; border-bottom: none !important; } .card .card-header.card-header-primary h3 { color: #fff !important; margin-bottom: 4px !important; } .card .card-body { padding: 1.5rem !important; } /* --- Stats Cards Styling (Modern Dashboard Widgets) --- */ .stat-widget { display: flex !important; align-items: center !important; justify-content: space-between !important; position: relative; z-index: 2; } .stat-icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; font-size: 1.6rem; } /* Widget Gradient and Glowing Colors */ .stat-primary .stat-icon { background: rgba(99, 102, 241, 0.1) !important; color: #6366f1 !important; } .card:hover .stat-primary .stat-icon { background: #6366f1 !important; color: #fff !important; box-shadow: 0 6px 15px var(--glow-primary); } .stat-success .stat-icon { background: rgba(16, 185, 129, 0.1) !important; color: #10b981 !important; } .card:hover .stat-success .stat-icon { background: #10b981 !important; color: #fff !important; box-shadow: 0 6px 15px var(--glow-success); } .stat-info .stat-icon { background: rgba(14, 165, 233, 0.1) !important; color: #0ea5e9 !important; } .card:hover .stat-info .stat-icon { background: #0ea5e9 !important; color: #fff !important; box-shadow: 0 6px 15px var(--glow-info); } .stat-warning .stat-icon { background: rgba(245, 158, 11, 0.1) !important; color: #f59e0b !important; } .card:hover .stat-warning .stat-icon { background: #f59e0b !important; color: #fff !important; box-shadow: 0 6px 15px var(--glow-warning); } .stat-danger .stat-icon { background: rgba(239, 68, 68, 0.1) !important; color: #ef4444 !important; } .card:hover .stat-danger .stat-icon { background: #ef4444 !important; color: #fff !important; box-shadow: 0 6px 15px var(--glow-danger); } /* Stats values formatting */ .stat-title { color: #64748b !important; font-size: 0.85rem !important; font-family: var(--font-primary) !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px !important; } .stat-value { color: #0f172a !important; font-family: var(--font-accent) !important; font-weight: 700 !important; font-size: 1.6rem !important; margin: 0 !important; } /* --- "Laporan Hari Ini" Item Blocks --- */ .report-stat-col { padding: 15px 10px !important; border-radius: 16px; transition: all 0.25s ease; background: #f8fafc; border: 1px solid rgba(0, 0, 0, 0.02); } .report-stat-col:hover { background: #ffffff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04); } .report-stat-label { font-size: 0.85rem !important; font-weight: 600 !important; margin-bottom: 8px !important; font-family: var(--font-accent) !important; } .report-stat-value { font-size: 1.75rem !important; font-weight: 700 !important; font-family: var(--font-accent) !important; color: #1e293b; } /* --- Responsive Adaptations --- */ @media (max-width: 1199.98px) { .body-wrapper { margin-left: 0 !important; } } @media (max-width: 767.98px) { .app-header #headerCollapse .btn { padding: 6px 12px !important; font-size: 0.78rem !important; } .card .card-body { padding: 1.2rem !important; } .stat-value { font-size: 1.4rem !important; } .stat-icon { width: 48px; height: 48px; font-size: 1.3rem; } .report-stat-col { margin-bottom: 12px; } } /* ====================================================== ADMIN PAGE HEADER (WhatsApp-style chat header) ====================================================== */ .admin-page-header { border-radius: 20px; padding: 1.5rem 2rem; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; position: relative; overflow: hidden; } .admin-page-header::before { content: ''; position: absolute; top: -40%; right: -5%; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); pointer-events: none; } .admin-page-header::after { content: ''; position: absolute; bottom: -50%; right: 10%; width: 140px; height: 140px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); pointer-events: none; } /* Color variants */ .admin-page-header.header-primary { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); } .admin-page-header.header-success { background: linear-gradient(135deg, #059669 0%, #10b981 100%); } .admin-page-header.header-info { background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%); } .admin-page-header.header-warning { background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); } .admin-page-header.header-danger { background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%); } /* Header Left Section */ .admin-page-header .page-header-left { display: flex; align-items: center; gap: 1.2rem; z-index: 1; } .page-header-icon { width: 56px; height: 56px; border-radius: 16px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.25); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.6rem; flex-shrink: 0; backdrop-filter: blur(8px); } .page-header-title { color: #fff !important; font-family: var(--font-accent) !important; font-weight: 700 !important; font-size: 1.3rem !important; margin: 0 0 4px 0 !important; line-height: 1.2; } .page-header-desc { color: rgba(255, 255, 255, 0.8); font-family: var(--font-primary); font-size: 0.85rem; font-weight: 400; margin: 0; } .page-header-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.95); padding: 3px 12px; border-radius: 50px; font-size: 0.78rem; font-weight: 600; margin-top: 6px; backdrop-filter: blur(4px); font-family: var(--font-accent); } /* Header Right Section – Action Buttons */ .admin-page-header .page-header-right { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; justify-content: flex-end; z-index: 1; } .admin-page-header .page-header-right .btn { font-family: var(--font-accent) !important; font-weight: 600 !important; font-size: 0.85rem !important; border-radius: 12px !important; padding: 9px 18px !important; letter-spacing: 0.2px; transition: all 0.25s ease !important; display: flex; align-items: center; gap: 7px; white-space: nowrap; } /* White buttons in header */ .admin-page-header .btn-header-white { background: rgba(255, 255, 255, 0.15) !important; border: 1.5px solid rgba(255, 255, 255, 0.4) !important; color: #fff !important; backdrop-filter: blur(6px); } .admin-page-header .btn-header-white:hover { background: rgba(255, 255, 255, 0.25) !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; } /* Solid white button */ .admin-page-header .btn-header-solid { background: #ffffff !important; border: none !important; color: #4f46e5 !important; font-weight: 700 !important; } .admin-page-header.header-success .btn-header-solid { color: #059669 !important; } .admin-page-header.header-info .btn-header-solid { color: #0284c7 !important; } .admin-page-header.header-warning .btn-header-solid { color: #d97706 !important; } .admin-page-header.header-danger .btn-header-solid { color: #dc2626 !important; } .admin-page-header .btn-header-solid:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2) !important; } /* ====================================================== PREMIUM TABLE STYLES ====================================================== */ /* Disable card hover effect on data cards */ .data-card:hover { transform: none !important; box-shadow: var(--card-shadow) !important; } .data-card .card-body { padding: 0 !important; } /* Table Controls Row (search + per-page) */ .table-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 1.25rem 1.5rem; border-bottom: 1px solid #f1f5f9; } .table-controls .search-form { flex: 1; min-width: 200px; max-width: 380px; } .table-controls .search-form .input-group { border-radius: 12px !important; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); } .table-controls .search-form .form-control { border: 1.5px solid #e2e8f0 !important; border-right: none !important; border-radius: 12px 0 0 12px !important; font-family: var(--font-primary) !important; font-size: 0.9rem; padding: 10px 16px; background: #f8fafc; transition: all 0.2s ease; } .table-controls .search-form .form-control:focus { background: #fff !important; border-color: #6366f1 !important; box-shadow: none !important; } .table-controls .search-form .btn-search { background: linear-gradient(135deg, #4f46e5, #6366f1) !important; border: none !important; color: #fff !important; font-family: var(--font-accent) !important; font-weight: 600; padding: 10px 18px; border-radius: 0 12px 12px 0 !important; transition: all 0.2s ease; } .table-controls .search-form .btn-search:hover { box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35) !important; } /* Per-page & filter row */ .table-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .per-page-select { display: flex; align-items: center; gap: 8px; } .per-page-select label { font-family: var(--font-primary) !important; font-size: 0.85rem; color: #64748b; font-weight: 500; white-space: nowrap; } .per-page-select select { border: 1.5px solid #e2e8f0 !important; border-radius: 10px !important; padding: 7px 12px !important; font-family: var(--font-accent) !important; font-size: 0.85rem; font-weight: 600; color: #1e293b; background: #f8fafc; cursor: pointer; transition: all 0.2s ease; outline: none; } .per-page-select select:focus { border-color: #6366f1 !important; background: #fff; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important; } /* Sort filter pill buttons */ .sort-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 10px; border: 1.5px solid #e2e8f0; background: #f8fafc; color: #64748b; font-family: var(--font-accent); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; text-decoration: none; } .sort-btn:hover { border-color: #6366f1; color: #6366f1; background: rgba(99, 102, 241, 0.05); } .sort-btn.active { background: rgba(99, 102, 241, 0.1); border-color: #6366f1; color: #6366f1; } /* Table Wrapper */ .table-responsive-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Premium Table */ .premium-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0; } .premium-table thead tr th { background: #f8fafc; border-bottom: 2px solid #e2e8f0; border-top: none; color: #64748b; font-family: var(--font-accent) !important; font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.8px; padding: 14px 18px; white-space: nowrap; position: relative; } /* Sortable column headers */ .premium-table thead tr th.sortable { cursor: pointer; user-select: none; } .premium-table thead tr th.sortable::after { content: '\e9e8'; /* tabler icon chevron up-down */ font-family: 'tabler-icons'; font-size: 0.9rem; margin-left: 6px; color: #cbd5e1; vertical-align: middle; transition: color 0.2s ease; } .premium-table thead tr th.sortable:hover { background: #f1f5f9; color: #4f46e5; } .premium-table thead tr th.sortable:hover::after { color: #4f46e5; } .premium-table thead tr th.sort-asc::after { content: '\ea61'; /* chevron up */ color: #4f46e5; } .premium-table thead tr th.sort-desc::after { content: '\ea64'; /* chevron down */ color: #4f46e5; } /* Table body rows */ .premium-table tbody tr { border-bottom: 1px solid var(--theme-row-border); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .premium-table tbody tr:hover { background: var(--theme-table-hover); transform: translateX(2px); } .premium-table tbody tr td, .premium-table tbody tr th { padding: 14px 18px; vertical-align: middle; font-family: var(--font-primary) !important; font-size: 0.9rem; color: var(--theme-text); border-bottom: 1px solid var(--theme-row-border); border-top: none; } .premium-table tbody tr:last-child td, .premium-table tbody tr:last-child th { border-bottom: none; } /* Row number column */ .premium-table .row-num { color: #94a3b8; font-size: 0.8rem; font-weight: 600; font-family: var(--font-accent) !important; } /* Premium Badges */ .badge-status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 50px; font-family: var(--font-accent) !important; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .badge-success { background: rgba(16, 185, 129, 0.1); color: #059669; } .badge-warning { background: rgba(245, 158, 11, 0.1); color: #d97706; } .badge-danger { background: rgba(239, 68, 68, 0.1); color: #dc2626; } .badge-info { background: rgba(14, 165, 233, 0.1); color: #0284c7; } .badge-primary { background: rgba(99, 102, 241, 0.1); color: #4f46e5; } .badge-secondary { background: rgba(100, 116, 139, 0.1); color: #475569; } /* Action button groups (compact icon-buttons) */ .action-btn-group { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; } .action-btn-group .action-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid transparent; transition: all 0.2s ease; font-size: 1rem; text-decoration: none; cursor: pointer; background: transparent; padding: 0; } .action-btn.edit-btn { border-color: #e0e7ff; color: #4f46e5; background: #f0f0ff; } .action-btn.edit-btn:hover { background: #4f46e5; color: #fff; border-color: #4f46e5; box-shadow: 0 4px 10px rgba(99, 102, 241, 0.35); } .action-btn.view-btn { border-color: #e0f2fe; color: #0284c7; background: #f0f9ff; } .action-btn.view-btn:hover { background: #0284c7; color: #fff; border-color: #0284c7; box-shadow: 0 4px 10px rgba(14, 165, 233, 0.35); } .action-btn.print-btn { border-color: #d1fae5; color: #059669; background: #f0fdf4; } .action-btn.print-btn:hover { background: #059669; color: #fff; border-color: #059669; box-shadow: 0 4px 10px rgba(16, 185, 129, 0.35); } .action-btn.pay-btn { border-color: #fef3c7; color: #d97706; background: #fffbeb; } .action-btn.pay-btn:hover { background: #d97706; color: #fff; border-color: #d97706; box-shadow: 0 4px 10px rgba(245, 158, 11, 0.35); } .action-btn.delete-btn { border-color: #fee2e2; color: #dc2626; background: #fef2f2; } .action-btn.delete-btn:hover { background: #dc2626; color: #fff; border-color: #dc2626; box-shadow: 0 4px 10px rgba(239, 68, 68, 0.35); } /* Table Footer: Pagination + Info */ .table-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 1rem 1.5rem; border-top: 1px solid #f1f5f9; } .table-info-text { font-family: var(--font-primary); font-size: 0.85rem; color: #64748b; } /* Premium Pagination */ .premium-pagination .pagination { gap: 4px; margin: 0; } .premium-pagination .page-item .page-link { border: 1.5px solid #e2e8f0; border-radius: 10px !important; color: #475569; font-family: var(--font-accent) !important; font-weight: 600; font-size: 0.85rem; padding: 7px 13px; transition: all 0.2s ease; background: #fff; } .premium-pagination .page-item .page-link:hover { border-color: #6366f1; color: #6366f1; background: rgba(99, 102, 241, 0.05); } .premium-pagination .page-item.active .page-link { background: linear-gradient(135deg, #4f46e5, #6366f1) !important; border-color: #4f46e5 !important; color: #fff !important; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); } /* Flash Alerts */ .flash-alert { border: none !important; border-radius: 16px !important; padding: 1rem 1.25rem !important; font-family: var(--font-primary) !important; font-size: 0.9rem; display: flex; align-items: center; gap: 10px; margin-bottom: 1.25rem; } .flash-alert.alert-success { background: rgba(16, 185, 129, 0.1) !important; color: #065f46 !important; } .flash-alert.alert-danger { background: rgba(239, 68, 68, 0.1) !important; color: #991b1b !important; } /* --- Empty State ---*/ .empty-state { padding: 3rem 1.5rem; text-align: center; } .empty-state i { font-size: 3rem; color: #cbd5e1; display: block; margin-bottom: 1rem; } .empty-state p { color: #94a3b8; font-family: var(--font-primary); font-size: 0.95rem; } /* Filter pills (fines page) */ .filter-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 50px; border: 1.5px solid #e2e8f0; background: #f8fafc; color: #64748b; font-family: var(--font-accent); font-weight: 600; font-size: 0.82rem; cursor: pointer; transition: all 0.2s ease; text-decoration: none; } .filter-pill:hover { border-color: #6366f1; color: #6366f1; } .filter-pill.active-warning { background: rgba(245, 158, 11, 0.1); border-color: #f59e0b; color: #d97706; } .filter-pill.active-success { background: rgba(16, 185, 129, 0.1); border-color: #10b981; color: #059669; } /* Modal Redesign */ .modal-content { border: none !important; border-radius: 20px !important; box-shadow: 0 25px 60px rgba(15, 23, 42, 0.15) !important; overflow: hidden; } .modal-header { border-bottom: 1px solid #f1f5f9 !important; padding: 1.25rem 1.5rem !important; } .modal-header .modal-title { font-family: var(--font-accent) !important; font-weight: 700 !important; font-size: 1.05rem; color: #1e293b; } .modal-footer { border-top: 1px solid #f1f5f9 !important; padding: 1rem 1.5rem !important; } .modal-body { padding: 1.5rem !important; } /* Book cover in table */ .book-cover-thumb { width: 52px; height: 74px; object-fit: cover; border-radius: 8px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12); transition: transform 0.2s ease; } .book-cover-thumb:hover { transform: scale(1.05); } /* User avatar circle */ .member-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-accent); font-weight: 700; font-size: 0.85rem; flex-shrink: 0; } /* Responsive Table Adjustments */ @media (max-width: 767.98px) { .admin-page-header { padding: 1.2rem 1.2rem; border-radius: 16px; } .page-header-title { font-size: 1.1rem !important; } .page-header-icon { width: 46px; height: 46px; font-size: 1.3rem; } .table-controls { flex-direction: column; align-items: stretch; padding: 1rem; } .table-controls .search-form { max-width: 100%; } .table-filter-row { justify-content: space-between; } .premium-table thead tr th, .premium-table tbody tr td, .premium-table tbody tr th { padding: 10px 12px; font-size: 0.82rem; } .action-btn-group { gap: 4px; } .action-btn { width: 30px !important; height: 30px !important; font-size: 0.88rem !important; } .table-footer { flex-direction: column; align-items: flex-start; padding: 0.75rem 1rem; } .admin-page-header .page-header-right { width: 100%; } .admin-page-header .btn-header-white, .admin-page-header .btn-header-solid { flex: 1; justify-content: center; } } @media (max-width: 575.98px) { .admin-page-header { flex-direction: column; align-items: flex-start; } } /* ====================================================== FORM PAGES (create / edit) ====================================================== */ .form-card { border-radius: 20px !important; border: 1px solid rgba(0, 0, 0, 0.04) !important; box-shadow: var(--card-shadow) !important; } .form-card:hover { transform: none !important; box-shadow: var(--card-shadow) !important; } .form-section-title { font-family: var(--font-accent) !important; font-weight: 700; font-size: 1rem; color: #1e293b; padding-bottom: 12px; margin-bottom: 20px; border-bottom: 2px solid #f1f5f9; display: flex; align-items: center; gap: 8px; } .form-section-title i { color: #6366f1; } /* Premium form controls */ .premium-form .form-label { font-family: var(--font-accent) !important; font-weight: 600; font-size: 0.85rem; color: #475569; margin-bottom: 6px; } .premium-form .form-label .required-star { color: #ef4444; margin-left: 3px; } .premium-form .form-control, .premium-form .form-select { border: 1.5px solid #e2e8f0 !important; border-radius: 12px !important; font-family: var(--font-primary) !important; font-size: 0.9rem; padding: 10px 14px; background: #f8fafc; transition: all 0.2s ease; color: #334155; } .premium-form .form-control:focus, .premium-form .form-select:focus { border-color: #6366f1 !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important; outline: none; } .premium-form .form-control.is-invalid, .premium-form .form-select.is-invalid { border-color: #ef4444 !important; background: #fff !important; } .premium-form .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important; } .premium-form .invalid-feedback { font-family: var(--font-primary); font-size: 0.8rem; color: #dc2626; margin-top: 5px; } .premium-form textarea.form-control { resize: vertical; min-height: 140px; line-height: 1.6; } .premium-form .form-text { font-family: var(--font-primary); font-size: 0.8rem; color: #94a3b8; margin-top: 4px; } /* Cover/Image upload preview */ .cover-upload-area { border: 2px dashed #e2e8f0; border-radius: 16px; padding: 1.5rem; text-align: center; background: #f8fafc; cursor: pointer; transition: all 0.2s ease; } .cover-upload-area:hover { border-color: #6366f1; background: rgba(99, 102, 241, 0.02); } .cover-upload-area img { border-radius: 10px; max-height: 260px; object-fit: contain; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); } /* Form Action Buttons */ .form-actions { display: flex; align-items: center; gap: 10px; padding-top: 1.5rem; border-top: 1px solid #f1f5f9; margin-top: 1.5rem; flex-wrap: wrap; } .btn-form-save { background: linear-gradient(135deg, #4f46e5, #6366f1) !important; border: none !important; color: #fff !important; font-family: var(--font-accent) !important; font-weight: 700 !important; font-size: 0.9rem !important; border-radius: 12px !important; padding: 10px 24px !important; transition: all 0.25s ease !important; display: inline-flex; align-items: center; gap: 7px; } .btn-form-save:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 18px rgba(99, 102, 241, 0.4) !important; } .btn-form-cancel { background: #f1f5f9 !important; border: 1.5px solid #e2e8f0 !important; color: #475569 !important; font-family: var(--font-accent) !important; font-weight: 600 !important; font-size: 0.9rem !important; border-radius: 12px !important; padding: 10px 20px !important; transition: all 0.2s ease !important; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; } .btn-form-cancel:hover { background: #e2e8f0 !important; color: #1e293b !important; } .btn-form-delete { background: rgba(239, 68, 68, 0.08) !important; border: 1.5px solid #fecaca !important; color: #dc2626 !important; font-family: var(--font-accent) !important; font-weight: 600 !important; font-size: 0.9rem !important; border-radius: 12px !important; padding: 10px 20px !important; transition: all 0.2s ease !important; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; } .btn-form-delete:hover { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35) !important; } /* Back button */ .btn-back { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 12px; border: 1.5px solid #e2e8f0; background: #f8fafc; color: #475569; font-family: var(--font-accent); font-weight: 600; font-size: 0.85rem; text-decoration: none; transition: all 0.2s ease; cursor: pointer; } .btn-back:hover { border-color: #6366f1; color: #4f46e5; background: rgba(99, 102, 241, 0.05); } /* ====================================================== DETAIL / SHOW PAGES ====================================================== */ .detail-header-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 1.5rem; border-bottom: 1px solid #f1f5f9; } .detail-stat-card { border-radius: 16px !important; border: 1px solid rgba(0, 0, 0, 0.04) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important; transition: all 0.25s ease !important; overflow: hidden; } .detail-stat-card:hover { transform: translateY(-4px) !important; } .detail-stat-body { padding: 1.25rem; display: flex; align-items: center; gap: 1rem; } .detail-stat-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; } .detail-stat-label { font-family: var(--font-primary); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #94a3b8; margin-bottom: 4px; } .detail-stat-value { font-family: var(--font-accent); font-size: 1.4rem; font-weight: 800; color: #0f172a; margin: 0; line-height: 1; } /* Info table (detail/show) */ .info-table { width: 100%; } .info-table tr td { padding: 10px 0; border-bottom: 1px solid #f1f5f9; font-family: var(--font-primary); font-size: 0.9rem; vertical-align: top; } .info-table tr:last-child td { border-bottom: none; } .info-table .info-label { color: #64748b; font-weight: 600; width: 160px; padding-right: 12px; } .info-table .info-sep { color: #cbd5e1; width: 20px; text-align: center; } .info-table .info-value { color: #1e293b; font-weight: 500; } /* QR Code container */ .qr-container { background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 16px; padding: 1.5rem; text-align: center; } .qr-code-img { background-size: contain; background-repeat: no-repeat; background-position: center; height: 240px; border-radius: 8px; } /* ====================================================== ERROR / VALIDATION ALERT ====================================================== */ .validation-alert { border: none !important; border-radius: 14px !important; background: rgba(239, 68, 68, 0.08) !important; color: #991b1b !important; padding: 1rem 1.25rem !important; font-family: var(--font-primary) !important; font-size: 0.88rem; margin-bottom: 1.25rem; border-left: 4px solid #ef4444 !important; } .validation-alert ul { margin: 0.5rem 0 0 1rem; padding: 0; } .validation-alert li { margin-bottom: 4px; } /* ====================================================== NOTES CARD — action buttons (edit & delete) ====================================================== */ .note-action-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; border: none; cursor: pointer; font-size: 1rem; transition: all 0.2s ease; text-decoration: none; background: transparent; } .note-edit-btn { color: #4f46e5; background: rgba(99, 102, 241, 0.1); } .note-edit-btn:hover { background: rgba(99, 102, 241, 0.2); color: #3730a3; transform: scale(1.1); } .note-delete-btn { color: #dc2626; background: rgba(239, 68, 68, 0.08); border: 1px solid #fecaca !important; } .note-delete-btn:hover { background: #dc2626 !important; color: #fff !important; border-color: #dc2626 !important; transform: scale(1.1); } [data-theme="dark"] .note-edit-btn { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; } [data-theme="dark"] .note-edit-btn:hover { background: rgba(99, 102, 241, 0.3); color: #c7d2fe; } [data-theme="dark"] .note-delete-btn { background: rgba(239, 68, 68, 0.12); color: #fca5a5; border-color: #7f1d1d !important; } [data-theme="dark"] .note-delete-btn:hover { background: #dc2626 !important; color: #fff !important; } /* ============================================================ AJAX Live Search — Non-blocking Visual Feedback ============================================================ */ /* Top-of-page progress bar injected by sijambu-ajax.js */ #sj-progress-bar { /* Styles set inline by JS for performance */ } /* Tbody fade during update (subtle, non-blocking) */ .premium-table tbody { transition: opacity 0.15s ease; } .premium-table.sj-updating tbody { opacity: 0.45; } /* Sortable column click ripple */ th.sortable { position: relative; overflow: hidden; } th.sortable::before { content: ''; position: absolute; inset: 0; background: rgba(99, 102, 241, 0); transition: background 0.15s ease; pointer-events: none; } th.sortable:active::before { background: rgba(99, 102, 241, 0.08); } /* Search input typing glow — shows user the system is alive */ .search-form .form-control:focus { border-color: #6366f1 !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important; } [data-theme="dark"] .search-form .form-control:focus { background: #1e293b !important; } /* ============================================================ ULTRA-RESPONSIVE PREMIUM TABLE-TO-CARD REFLOW (SaaS UX) Clean Architecture — No double labels, no wasted space ============================================================ */ @media (max-width: 991.98px) { /* ── 1. Remove horizontal overflow, let cards stack ── */ .table-responsive-wrapper { overflow-x: visible !important; padding: 4px 2px; } /* ── 2. Hide the table header row ── */ .premium-table thead { display: none !important; } /* ── 3. All table structural elements → block ── */ .premium-table, .premium-table tbody, .premium-table tr, .premium-table td { display: block !important; width: 100% !important; box-sizing: border-box; } /* ── 4. Each becomes a premium card ── */ .premium-table tbody tr { position: relative !important; background: var(--theme-card-bg, #fff) !important; border: 1px solid var(--theme-row-border, #e2e8f0) !important; border-radius: 12px !important; margin-bottom: 12px !important; padding: 0 !important; /* Padding handled per-section */ box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.02) !important; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important; transform: translateY(0); overflow: hidden; animation: sj-card-fade-in 0.25s ease both; } [data-theme="dark"] .premium-table tbody tr { background: #1e293b !important; border-color: #334155 !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important; } .premium-table tbody tr:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 28px rgba(99, 102, 241, 0.1) !important; border-color: #a5b4fc !important; } [data-theme="dark"] .premium-table tbody tr:hover { box-shadow: 0 8px 28px rgba(99, 102, 241, 0.2) !important; border-color: #6366f1 !important; } /* ── 5. ALL default: key-value pair row ── */ .premium-table tbody tr td { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 8px 14px !important; border-bottom: 1px solid var(--theme-row-border, #f1f5f9) !important; font-size: 0.82rem !important; background: transparent !important; text-align: left !important; gap: 12px; min-height: 0; } [data-theme="dark"] .premium-table tbody tr td { border-bottom-color: #334155 !important; } /* Last data cell before action bar has no bottom border */ .premium-table tbody tr td:last-child { border-bottom: none !important; } /* But action cells are styled separately via border-top */ .premium-table tbody tr td[data-label="Aksi"], .premium-table tbody tr td[data-label="Kirim Pesan"] { border-bottom: none !important; } /* ── 6. Row Number cell: FULLY HIDDEN ── */ .premium-table .row-num { display: none !important; } /* ── 7. Key-value label via ::before (for regular data cells) ── */ .premium-table tbody tr td::before { content: attr(data-label) !important; font-weight: 500 !important; color: #64748b !important; font-family: var(--font-primary) !important; font-size: 0.78rem !important; text-transform: none !important; letter-spacing: normal !important; flex-shrink: 0; white-space: nowrap; min-width: 80px; max-width: 130px; } [data-theme="dark"] .premium-table tbody tr td::before { color: #94a3b8 !important; } /* ── 8. Value side — the td's justify-content:space-between already pushes content to the right. We just ensure specific value elements don't inadvertently wrap or lose their alignment. ── */ .premium-table tbody tr td > .badge-status { flex-shrink: 0; text-align: right; font-size: 0.75rem !important; } .premium-table tbody tr td > span:not(.badge-status), .premium-table tbody tr td > a:not(.d-flex):not(.action-btn), .premium-table tbody tr td > div:not(.d-flex):not(.action-btn-group) { font-size: 0.8rem !important; font-weight: 500 !important; color: #1e293b !important; text-align: right; word-break: break-word; } [data-theme="dark"] .premium-table tbody tr td > span:not(.badge-status), [data-theme="dark"] .premium-table tbody tr td > a:not(.d-flex):not(.action-btn), [data-theme="dark"] .premium-table tbody tr td > div:not(.d-flex):not(.action-btn-group) { color: #f1f5f9 !important; } /* Prevent long textual property values from squishing */ .premium-table tbody tr td[data-label="Kategori"] > span, .premium-table tbody tr td[data-label="Rak"] > span, .premium-table tbody tr td[data-label="Email"] > span, .premium-table tbody tr td[data-label="Email"] > a { max-width: 65% !important; text-align: right !important; } /* Multi-line date cells (date + time subtext) — stack content vertically, push right */ .premium-table tbody tr td[data-label="Tgl Pinjam"], .premium-table tbody tr td[data-label="Tgl Kembali"], .premium-table tbody tr td[data-label="Tgl Pengembalian"], .premium-table tbody tr td[data-label="Dibayar"], .premium-table tbody tr td[data-label="Total Denda"] { display: grid !important; grid-template-columns: auto 1fr !important; grid-template-rows: auto auto !important; align-items: center !important; gap: 4px 12px !important; } .premium-table tbody tr td[data-label="Tgl Pinjam"]::before, .premium-table tbody tr td[data-label="Tgl Kembali"]::before, .premium-table tbody tr td[data-label="Tgl Pengembalian"]::before, .premium-table tbody tr td[data-label="Dibayar"]::before, .premium-table tbody tr td[data-label="Total Denda"]::before { grid-column: 1 !important; grid-row: 1 / span 2 !important; justify-self: start !important; align-self: center !important; } .premium-table tbody tr td[data-label="Tgl Pinjam"] > div, .premium-table tbody tr td[data-label="Tgl Kembali"] > div, .premium-table tbody tr td[data-label="Tgl Pengembalian"] > div, .premium-table tbody tr td[data-label="Dibayar"] > div, .premium-table tbody tr td[data-label="Total Denda"] > div, .premium-table tbody tr td[data-label="Tgl Pinjam"] > span, .premium-table tbody tr td[data-label="Tgl Kembali"] > span, .premium-table tbody tr td[data-label="Tgl Pengembalian"] > span, .premium-table tbody tr td[data-label="Dibayar"] > span, .premium-table tbody tr td[data-label="Total Denda"] > span { grid-column: 2 !important; justify-self: end !important; text-align: right !important; margin: 0 !important; } /* Stok / Jml single badge cells — center the badge value inline */ .premium-table tbody tr td[data-label="Jml"] > .badge-status, .premium-table tbody tr td[data-label="Stok"] > .badge-status, .premium-table tbody tr td[data-label="Jumlah Buku"] > .badge-status, .premium-table tbody tr td[data-label="Lantai"] > .badge-status, .premium-table tbody tr td[data-label="Total Pinjam"] > .badge-status, .premium-table tbody tr td[data-label="Belum Kembali"] > .badge-status, .premium-table tbody tr td[data-label="Buku Belum Kembali"] > .badge-status, .premium-table tbody tr td[data-label="Status"] > .badge-status, .premium-table tbody tr td[data-label="Level Akses"] > .badge-status, .premium-table tbody tr td[data-label="Jenis Kelamin"] > .badge-status { flex-shrink: 0; } /* ── 9. PRIMARY HEADER CELLS — No label, full-width card header ── These are the "face" of the card: member name, book title, etc. */ .premium-table tbody tr td[data-label="Nama Peminjam"], .premium-table tbody tr td[data-label="Nama Anggota"], .premium-table tbody tr td[data-label="Username"], .premium-table tbody tr td[data-label="Nama Kategori"], .premium-table tbody tr td[data-label="Nama Rak"] { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; padding: 10px 14px !important; border-bottom: 1px solid var(--theme-row-border, #f1f5f9) !important; background: rgba(99, 102, 241, 0.02) !important; border-radius: 12px 12px 0 0; } [data-theme="dark"] .premium-table tbody tr td[data-label="Nama Peminjam"], [data-theme="dark"] .premium-table tbody tr td[data-label="Nama Anggota"], [data-theme="dark"] .premium-table tbody tr td[data-label="Username"], [data-theme="dark"] .premium-table tbody tr td[data-label="Nama Kategori"], [data-theme="dark"] .premium-table tbody tr td[data-label="Nama Rak"] { background: rgba(99, 102, 241, 0.05) !important; border-bottom-color: #334155 !important; } /* No ::before label for primary header cells — content speaks for itself */ .premium-table tbody tr td[data-label="Nama Peminjam"]::before, .premium-table tbody tr td[data-label="Nama Anggota"]::before, .premium-table tbody tr td[data-label="Username"]::before, .premium-table tbody tr td[data-label="Nama Kategori"]::before, .premium-table tbody tr td[data-label="Nama Rak"]::before { display: none !important; } /* Primary cell content fills the space (no margin-left:auto override) */ .premium-table tbody tr td[data-label="Nama Peminjam"] > *, .premium-table tbody tr td[data-label="Nama Anggota"] > *, .premium-table tbody tr td[data-label="Username"] > *, .premium-table tbody tr td[data-label="Nama Kategori"] > *, .premium-table tbody tr td[data-label="Nama Rak"] > * { margin-left: 0 !important; text-align: left !important; } /* Compact avatar in card header */ .premium-table tbody tr td[data-label="Nama Peminjam"] .member-avatar, .premium-table tbody tr td[data-label="Nama Anggota"] .member-avatar, .premium-table tbody tr td[data-label="Username"] .member-avatar { width: 32px !important; height: 32px !important; font-size: 0.82rem !important; flex-shrink: 0 !important; } /* Name text style */ .premium-table tbody tr td[data-label="Nama Peminjam"] a, .premium-table tbody tr td[data-label="Nama Anggota"] a, .premium-table tbody tr td[data-label="Nama Anggota"] div, .premium-table tbody tr td[data-label="Username"] span { margin-left: 0 !important; text-align: left !important; font-size: 0.88rem !important; font-weight: 600 !important; color: #0f172a !important; } [data-theme="dark"] .premium-table tbody tr td[data-label="Nama Peminjam"] a, [data-theme="dark"] .premium-table tbody tr td[data-label="Nama Anggota"] a, [data-theme="dark"] .premium-table tbody tr td[data-label="Nama Anggota"] div, [data-theme="dark"] .premium-table tbody tr td[data-label="Username"] span { color: #f8fafc !important; } /* ── 10. BOOK TITLE CELL — Stacked subtitle style (for Books index only) ── */ .premium-table tbody tr td[data-label="Judul"] { flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 3px !important; padding: 8px 14px !important; border-bottom: 1px solid var(--theme-row-border, #f1f5f9) !important; } /* No ::before label for book titles — the title content is self-evident */ .premium-table tbody tr td[data-label="Judul"]::before { display: none !important; } .premium-table tbody tr td[data-label="Judul"] > * { margin-left: 0 !important; text-align: left !important; width: 100% !important; font-size: 0.88rem !important; font-weight: 600 !important; color: #0f172a !important; } [data-theme="dark"] .premium-table tbody tr td[data-label="Judul"] > * { color: #f8fafc !important; } /* Compact & proportional styling for Judul Buku values inside loans/returns/fines */ .premium-table tbody tr td[data-label="Judul Buku"] > a { max-width: 65% !important; text-align: right !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; } .premium-table tbody tr td[data-label="Judul Buku"] > a .fw-semibold { font-size: 0.8rem !important; font-family: var(--font-primary) !important; font-weight: 600 !important; color: #1e293b !important; line-height: 1.25 !important; } .premium-table tbody tr td[data-label="Judul Buku"] > a .text-muted { font-size: 0.72rem !important; color: #64748b !important; margin-top: 2px !important; } [data-theme="dark"] .premium-table tbody tr td[data-label="Judul Buku"] > a .fw-semibold { color: #f1f5f9 !important; } [data-theme="dark"] .premium-table tbody tr td[data-label="Judul Buku"] > a .text-muted { color: #94a3b8 !important; } /* ── 11. BOOK COVER CELL — Centered, prominent image ── */ .premium-table tbody tr td[data-label="Sampul"] { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 12px !important; background: #f8fafc !important; border-bottom: 1px solid var(--theme-row-border, #f1f5f9) !important; border-radius: 12px 12px 0 0; gap: 0; } [data-theme="dark"] .premium-table tbody tr td[data-label="Sampul"] { background: #0f172a !important; border-bottom-color: #334155 !important; } .premium-table tbody tr td[data-label="Sampul"]::before { display: none !important; } .premium-table tbody tr td[data-label="Sampul"] img { height: 90px !important; width: 62px !important; border-radius: 4px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; margin: 0 !important; } /* ── 12. ACTION BAR — Full-width, centered buttons with top border ── */ .premium-table tbody tr td[data-label="Aksi"], .premium-table tbody tr td[data-label="Kirim Pesan"] { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 8px 14px !important; border-top: 1px solid var(--theme-row-border, #f1f5f9) !important; border-bottom: none !important; background: rgba(248, 250, 252, 0.4) !important; border-radius: 0 0 12px 12px; } [data-theme="dark"] .premium-table tbody tr td[data-label="Aksi"], [data-theme="dark"] .premium-table tbody tr td[data-label="Kirim Pesan"] { background: rgba(30, 41, 59, 0.3) !important; border-top-color: #334155 !important; } /* No label for action bar */ .premium-table tbody tr td[data-label="Aksi"]::before, .premium-table tbody tr td[data-label="Kirim Pesan"]::before { display: none !important; } /* Centered action button group */ .premium-table tbody tr td[data-label="Aksi"] .action-btn-group, .premium-table tbody tr td[data-label="Kirim Pesan"] .action-btn-group { justify-content: center !important; gap: 8px !important; width: auto !important; margin: 0 !important; } /* Compact, interactive touch targets (Modern SaaS Dashboard Standard) */ .premium-table tbody tr td[data-label="Aksi"] .action-btn { width: 32px !important; height: 32px !important; font-size: 0.9rem !important; border-radius: 6px !important; } /* WA send button full-width on mobile */ .premium-table tbody tr td[data-label="Kirim Pesan"] > button { margin: 0 !important; width: 100% !important; justify-content: center !important; padding: 6px 12px !important; font-size: 0.78rem !important; border-radius: 6px !important; } /* ── 13. AJAX shimmer during loading ── */ .premium-table.sj-updating tbody tr { pointer-events: none; opacity: 0.6; } /* ── 14. Empty state inside card ── */ .premium-table tbody tr td.empty-state-cell { justify-content: center !important; border: none !important; padding: 2rem !important; } .premium-table tbody tr td.empty-state-cell::before { display: none !important; } } /* ── Card entry animation ── */ @keyframes sj-card-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ── Card shimmer during AJAX update ── */ @keyframes sj-card-shimmer { 0%, 100% { background-color: var(--theme-card-bg, #ffffff); } 50% { background-color: var(--theme-row-border, #f1f5f9); } } /* ========================================================================== GLOBAL TABLE TYPOGRAPHY & ELEMENT SIZING HARMONIZATION (SaaS UI/UX) Guarantees perfect mathematical proportions and visual consistency ========================================================================== */ /* --- 1. Desktop Table Proportions (0.84rem standard body, 0.8rem header) --- */ .premium-table thead tr th { font-size: 0.8rem !important; font-weight: 600 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; padding: 10px 14px !important; color: var(--theme-text-muted) !important; background: var(--theme-surface-2, #f8fafc) !important; } .premium-table tbody tr td { font-size: 0.84rem !important; padding: 10px 14px !important; color: var(--theme-text) !important; } /* Primary text inside cells (Name, book titles, custom anchors) */ .premium-table tbody tr td a, .premium-table tbody tr td .fw-semibold, .premium-table tbody tr td a .fw-semibold { font-size: 0.84rem !important; font-weight: 600 !important; color: var(--theme-text-strong, #0f172a) !important; } /* Secondary muted text (Authors, sub-dates, years, years inside parentheses) */ .premium-table tbody tr td .text-muted, .premium-table tbody tr td small, .premium-table tbody tr td a .text-muted, .premium-table tbody tr td span.text-muted { font-size: 0.76rem !important; font-weight: 400 !important; color: var(--theme-text-muted, #64748b) !important; } /* General spans inside body cells */ .premium-table tbody tr td > span:not(.badge-status) { font-size: 0.84rem !important; font-weight: 500 !important; } /* Status & info badges sizing */ .badge-status { font-size: 0.72rem !important; padding: 3px 10px !important; font-weight: 700 !important; letter-spacing: 0.3px !important; text-transform: uppercase !important; } /* Avatar sizing on desktop */ .member-avatar { width: 32px !important; height: 32px !important; font-size: 0.78rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-weight: 700 !important; border-radius: 50% !important; } /* Book cover thumbnails on desktop */ .book-cover-thumb { width: 44px !important; height: 62px !important; border-radius: 6px !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important; } /* Desktop Action Buttons Sizing */ .action-btn-group .action-btn { width: 32px !important; height: 32px !important; font-size: 0.88rem !important; border-radius: 8px !important; } /* --- 2. Unified Table Control & Filter Sizing (38px / 34px standard heights) --- */ .table-controls { padding: 1rem 1.25rem !important; } .table-controls .search-form .form-control { font-size: 0.85rem !important; padding: 8px 14px !important; height: 38px !important; border-radius: 10px 0 0 10px !important; } .table-controls .search-form .btn-search { font-size: 0.85rem !important; padding: 8px 16px !important; height: 38px !important; border-radius: 0 10px 10px 0 !important; } .per-page-select label { font-size: 0.82rem !important; font-weight: 500 !important; color: var(--theme-text-muted) !important; } .per-page-select select { font-size: 0.82rem !important; padding: 6px 12px !important; height: 34px !important; border-radius: 8px !important; } .sort-btn, .filter-pill { font-size: 0.82rem !important; padding: 6px 12px !important; height: 34px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; font-weight: 600 !important; } /* --- 3. Info Detail Table Proportions (`info-table`) --- */ .info-table tr td { font-size: 0.85rem !important; padding: 8px 0 !important; border-bottom: 1px solid var(--theme-row-border) !important; } .info-table .info-label { font-size: 0.85rem !important; font-weight: 600 !important; color: var(--theme-text-muted) !important; } .info-table .info-value { font-size: 0.85rem !important; font-weight: 500 !important; color: var(--theme-text-strong) !important; } /* ========================================================================== MOBILE & TABLET TABLE REFLOW HARMONIZATION (< 992px) ========================================================================== */ @media (max-width: 991.98px) { /* Cards rows padding and compact layout */ .premium-table tbody tr td { padding: 8px 14px !important; font-size: 0.8rem !important; } /* Card label styling */ .premium-table tbody tr td::before { content: attr(data-label) !important; font-size: 0.8rem !important; font-weight: 500 !important; color: var(--theme-text-muted) !important; } /* Card value styling */ .premium-table tbody tr td > span:not(.badge-status), .premium-table tbody tr td > a:not(.d-flex):not(.action-btn), .premium-table tbody tr td > div:not(.d-flex):not(.action-btn-group) { font-size: 0.8rem !important; font-weight: 600 !important; color: var(--theme-text-strong) !important; } /* Secondary/Muted text inside cards */ .premium-table tbody tr td .text-muted, .premium-table tbody tr td small, .premium-table tbody tr td a .text-muted { font-size: 0.72rem !important; font-weight: 400 !important; } /* Primary Card Header (Nama Peminjam, Anggota, Kategori, Rak, Username) */ .premium-table tbody tr td[data-label="Nama Peminjam"], .premium-table tbody tr td[data-label="Nama Anggota"], .premium-table tbody tr td[data-label="Username"], .premium-table tbody tr td[data-label="Nama Kategori"], .premium-table tbody tr td[data-label="Nama Rak"] { font-size: 0.9rem !important; font-weight: 700 !important; padding: 10px 14px !important; padding-right: 120px !important; /* Safety padding for absolute actions */ background: var(--theme-surface-2) !important; border-bottom: 1px solid var(--theme-border) !important; } /* Header name/link styling */ .premium-table tbody tr td[data-label="Nama Peminjam"] a, .premium-table tbody tr td[data-label="Nama Anggota"] a, .premium-table tbody tr td[data-label="Nama Anggota"] div, .premium-table tbody tr td[data-label="Username"] span { font-size: 0.9rem !important; font-weight: 700 !important; color: var(--theme-text-strong) !important; } /* Avatars on Mobile Cards */ .premium-table tbody tr td[data-label="Nama Peminjam"] .member-avatar, .premium-table tbody tr td[data-label="Nama Anggota"] .member-avatar, .premium-table tbody tr td[data-label="Username"] .member-avatar { width: 34px !important; height: 34px !important; font-size: 0.8rem !important; } /* Books Card Header (Judul cell inside books index) */ .premium-table tbody tr td[data-label="Judul"] { padding: 10px 14px !important; padding-right: 120px !important; /* Safety padding for absolute actions */ background: var(--theme-surface-2) !important; border-bottom: 1px solid var(--theme-border) !important; } .premium-table tbody tr td[data-label="Judul"] > * { font-size: 0.9rem !important; font-weight: 700 !important; color: var(--theme-text-strong) !important; } /* Book cover cell on mobile cards - aligned neatly to the left, safety right padding */ .premium-table tbody tr td[data-label="Sampul"] { padding: 12px 14px !important; padding-right: 120px !important; background: var(--theme-surface-2) !important; border-bottom: 1px solid var(--theme-border) !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; } .premium-table tbody tr td[data-label="Sampul"] img { height: 84px !important; width: 58px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; border-radius: 4px !important; margin: 0 !important; } /* Action buttons melayang (Floating absolute) in top right corner of the card */ .premium-table tbody tr td[data-label="Aksi"], .premium-table tbody tr td[data-label="Kirim Pesan"] { position: absolute !important; top: 8px !important; right: 12px !important; width: auto !important; background: transparent !important; border: none !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; z-index: 10 !important; border-radius: 0 !important; margin: 0 !important; height: 38px !important; /* Matches height of container */ } /* High fidelity premium action buttons - no longer "kecil tokk" */ .premium-table tbody tr td[data-label="Aksi"] .action-btn { width: 36px !important; height: 36px !important; font-size: 1.05rem !important; border-radius: 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important; border: 1px solid rgba(0, 0, 0, 0.05) !important; background: var(--theme-card-bg, #ffffff) !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; } [data-theme="dark"] .premium-table tbody tr td[data-label="Aksi"] .action-btn { background: #1e293b !important; border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important; } /* Interactive color variants for mobile floating buttons */ .premium-table tbody tr td[data-label="Aksi"] .action-btn.edit-btn { color: #4f46e5 !important; background: rgba(99, 102, 241, 0.08) !important; border-color: rgba(99, 102, 241, 0.15) !important; } .premium-table tbody tr td[data-label="Aksi"] .action-btn.edit-btn:hover { color: #ffffff !important; background: #4f46e5 !important; transform: translateY(-2px) scale(1.05) !important; } .premium-table tbody tr td[data-label="Aksi"] .action-btn.delete-btn, .premium-table tbody tr td[data-label="Aksi"] .action-btn.delete-action { color: #ef4444 !important; background: rgba(239, 68, 68, 0.08) !important; border-color: rgba(239, 68, 68, 0.15) !important; } .premium-table tbody tr td[data-label="Aksi"] .action-btn.delete-btn:hover, .premium-table tbody tr td[data-label="Aksi"] .action-btn.delete-action:hover { color: #ffffff !important; background: #ef4444 !important; transform: translateY(-2px) scale(1.05) !important; } .premium-table tbody tr td[data-label="Aksi"] .action-btn.view-btn { color: #10b981 !important; background: rgba(16, 185, 129, 0.08) !important; border-color: rgba(16, 185, 129, 0.15) !important; } .premium-table tbody tr td[data-label="Aksi"] .action-btn.view-btn:hover { color: #ffffff !important; background: #10b981 !important; transform: translateY(-2px) scale(1.05) !important; } .premium-table tbody tr td[data-label="Aksi"] .action-btn.print-btn { color: #f59e0b !important; background: rgba(245, 158, 11, 0.08) !important; border-color: rgba(245, 158, 11, 0.15) !important; } .premium-table tbody tr td[data-label="Aksi"] .action-btn.print-btn:hover { color: #ffffff !important; background: #f59e0b !important; transform: translateY(-2px) scale(1.05) !important; } [data-theme="dark"] .premium-table tbody tr td[data-label="Aksi"] .action-btn.edit-btn { color: #a5b4fc !important; background: rgba(99, 102, 241, 0.15) !important; } [data-theme="dark"] .premium-table tbody tr td[data-label="Aksi"] .action-btn.edit-btn:hover { color: #ffffff !important; background: #6366f1 !important; } [data-theme="dark"] .premium-table tbody tr td[data-label="Aksi"] .action-btn.delete-btn, [data-theme="dark"] .premium-table tbody tr td[data-label="Aksi"] .action-btn.delete-action { color: #fca5a5 !important; background: rgba(239, 68, 68, 0.15) !important; } [data-theme="dark"] .premium-table tbody tr td[data-label="Aksi"] .action-btn.delete-btn:hover, [data-theme="dark"] .premium-table tbody tr td[data-label="Aksi"] .action-btn.delete-action:hover { color: #ffffff !important; background: #ef4444 !important; } [data-theme="dark"] .premium-table tbody tr td[data-label="Aksi"] .action-btn.view-btn { color: #a7f3d0 !important; background: rgba(16, 185, 129, 0.15) !important; } [data-theme="dark"] .premium-table tbody tr td[data-label="Aksi"] .action-btn.view-btn:hover { color: #ffffff !important; background: #10b981 !important; } [data-theme="dark"] .premium-table tbody tr td[data-label="Aksi"] .action-btn.print-btn { color: #fde68a !important; background: rgba(245, 158, 11, 0.15) !important; } [data-theme="dark"] .premium-table tbody tr td[data-label="Aksi"] .action-btn.print-btn:hover { color: #ffffff !important; background: #f59e0b !important; } /* WhatsApp button on mobile - sleek floating badge pill */ .premium-table tbody tr td[data-label="Kirim Pesan"] > button, .premium-table tbody tr td[data-label="Kirim Pesan"] > a.btn { font-size: 0.8rem !important; padding: 0 12px !important; font-weight: 600 !important; border-radius: 8px !important; height: 34px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; background: #25D366 !important; color: #ffffff !important; border: none !important; box-shadow: 0 4px 10px rgba(37, 211, 102, 0.2) !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; } .premium-table tbody tr td[data-label="Kirim Pesan"] > button:hover, .premium-table tbody tr td[data-label="Kirim Pesan"] > a.btn:hover { background: #128C7E !important; transform: translateY(-2px) scale(1.05) !important; box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35) !important; } }