/* ========================================================= SALIHIN SPS Report Center Follow Marketing Kit / Dashboard theme style ========================================================= */ html { scroll-behavior: smooth; } /* Tokens are also declared on modal/toast because modal is appended to . */ :root, .sps-report-page, .sps-report-modal-backdrop, .sps-report-toast { --report-page-bg: #f6fbff; --report-card: #ffffff; --report-card-soft: #f7fbff; --report-line: rgba(185, 213, 235, .66); --report-line-soft: rgba(185, 213, 235, .42); --report-text: #16233d; --report-heading: #111b31; --report-muted: #5a6b7d; --report-cyan: #18c5d2; --report-cyan-dark: #0ca7b9; --report-blue: #2866ca; --report-blue-dark: #194fa9; --report-green: #21b957; --report-red: #e76078; --report-gradient: linear-gradient(135deg, #18c5d2 0%, #2866ca 100%); --report-gradient-blue: linear-gradient(135deg, #2da9f2 0%, #245fbe 100%); --report-gradient-cyan: linear-gradient(135deg, #20c9c7 0%, #1878c8 100%); --report-gradient-sky: linear-gradient(135deg, #5bbcf6 0%, #2866ca 100%); --report-gradient-deep: linear-gradient(135deg, #18c5d2 0%, #0f73bd 100%); --report-gradient-soft: linear-gradient(135deg, #73dce5 0%, #2f79d5 100%); --report-shadow-card: 0 14px 30px rgba(28, 78, 136, .08); --report-shadow-hover: 0 18px 42px rgba(28, 78, 136, .14); --report-radius-xl: 26px; --report-radius-lg: 22px; --report-radius-md: 18px; --report-radius-sm: 14px; } html[data-bs-theme="dark"], html[data-bs-theme="dark"] .sps-report-page, html[data-bs-theme="dark"] .sps-report-modal-backdrop, html[data-bs-theme="dark"] .sps-report-toast { --report-page-bg: #0d141d; --report-card: #172231; --report-card-soft: #111b27; --report-line: rgba(255, 255, 255, .12); --report-line-soft: rgba(255, 255, 255, .08); --report-text: #dfe8f3; --report-heading: #f6f9fd; --report-muted: #9aa8b8; --report-shadow-card: 0 14px 34px rgba(0, 0, 0, .24); --report-shadow-hover: 0 20px 46px rgba(0, 0, 0, .38); } /* ========================================================= Motion ========================================================= */ @keyframes reportShine { 0% { transform: translateX(-120%) skewX(-18deg); opacity: 0; } 45% { opacity: .55; } 100% { transform: translateX(220%) skewX(-18deg); opacity: 0; } } @keyframes reportScan { 0%, 48% { left: -40%; opacity: 0; } 58% { opacity: .65; } 100% { left: 120%; opacity: 0; } } @keyframes reportPulse { 0%, 100% { transform: scale(.96); opacity: .36; } 50% { transform: scale(1.08); opacity: .78; } } /* ========================================================= Page Base ========================================================= */ .sps-report-page { min-height: calc(100vh - 145px); padding: 28px; color: var(--report-text); background: transparent; position: relative; overflow: visible; isolation: isolate; } .sps-report-page *, .sps-report-page *::before, .sps-report-page *::after, .sps-report-modal-backdrop *, .sps-report-modal-backdrop *::before, .sps-report-modal-backdrop *::after { box-sizing: border-box; } .sps-report-page > * { position: relative; z-index: 1; } .sps-section-kicker { display: inline-flex; align-items: center; min-height: 20px; color: var(--report-cyan-dark); font-size: 10.5px; font-weight: 950; letter-spacing: .10em; text-transform: uppercase; margin-bottom: 5px; } html[data-bs-theme="dark"] .sps-section-kicker { color: var(--report-cyan); } /* ========================================================= Heading ========================================================= */ .sps-report-heading-section { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; } .sps-report-heading-section h5 { margin: 0 0 6px; color: var(--report-heading); font-size: 24px; font-weight: 950; letter-spacing: -.03em; } .sps-report-heading-section p { margin: 0; max-width: 720px; color: var(--report-muted); font-size: 13px; line-height: 1.45; } .sps-report-heading-actions { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; } .sps-report-control-btn, .sps-report-modal-btn { min-height: 38px; border: 0; border-radius: 999px; background: var(--report-card); color: var(--report-blue); display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 15px; font-size: 11px; font-weight: 950; letter-spacing: .03em; text-transform: uppercase; box-shadow: var(--report-shadow-card); cursor: pointer; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .sps-report-control-btn.primary, .sps-report-modal-btn.primary { color: #ffffff; background: var(--report-gradient); } .sps-report-control-btn:hover, .sps-report-modal-btn:hover { color: var(--report-blue); transform: translateY(-2px); box-shadow: var(--report-shadow-hover); } .sps-report-control-btn.primary:hover, .sps-report-modal-btn.primary:hover { color: #ffffff; } .sps-report-control-btn svg, .sps-report-modal-btn svg { width: 15px; height: 15px; stroke-width: 2.8; } /* ========================================================= Dashboard Module Cards ========================================================= */ .sps-report-module-section { margin: 0 0 18px; padding: 0; background: transparent; border: 0; box-shadow: none; } .sps-report-module-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .sps-report-dashboard-card { position: relative; isolation: isolate; min-height: 92px; border: 0; border-radius: 18px; color: #ffffff; text-align: left; padding: 14px; display: flex; align-items: center; gap: 12px; overflow: hidden; box-shadow: var(--report-shadow-card); transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; } .sps-report-dashboard-card:nth-child(1) { background: var(--report-gradient); } .sps-report-dashboard-card:nth-child(2) { background: var(--report-gradient-blue); } .sps-report-dashboard-card:nth-child(3) { background: var(--report-gradient-cyan); } .sps-report-dashboard-card:nth-child(4) { background: var(--report-gradient-sky); } .sps-report-dashboard-card::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 45%), radial-gradient(circle at 96% 0%, rgba(255, 255, 255, .24), transparent 35%); } .sps-report-dashboard-card::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 42%; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-18deg); opacity: 0; } .sps-report-dashboard-card:hover, .sps-report-dashboard-card.is-active { color: #ffffff; transform: translateY(-4px); filter: saturate(1.06); box-shadow: var(--report-shadow-hover); } .sps-report-dashboard-card:hover::after { animation: reportShine .85s ease; } .sps-report-dashboard-card > * { position: relative; z-index: 2; } .sps-report-dashboard-icon { width: 42px; height: 42px; border-radius: 14px; flex: 0 0 42px; display: grid; place-items: center; background: rgba(255, 255, 255, .20) !important; color: #ffffff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28); } .sps-report-dashboard-icon svg { width: 21px; height: 21px; stroke-width: 2.55; } .sps-report-dashboard-card strong { display: block; margin: 0 0 3px; color: #ffffff; font-size: 13px; line-height: 1.12; font-weight: 950; letter-spacing: -.015em; } .sps-report-dashboard-card span { color: rgba(255, 255, 255, .82); font-size: 10.5px; line-height: 1.22; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ========================================================= Restricted Access Card ========================================================= */ .sps-report-access-section { margin: 0 0 18px; } .sps-report-lock-card { min-height: 260px; border: 0; border-radius: var(--report-radius-xl); background: var(--report-card); box-shadow: var(--report-shadow-card); display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 30px; align-items: center; padding: 24px; position: relative; overflow: hidden; isolation: isolate; } .sps-report-lock-card::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 10% 12%, rgba(24, 197, 210, .12), transparent 28%), radial-gradient(circle at 100% 0%, rgba(40, 102, 202, .10), transparent 30%); } .sps-report-lock-card::after { content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 34%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(24, 197, 210, .08), rgba(255, 255, 255, .16), transparent); transform: skewX(-18deg); animation: reportScan 7s ease-in-out infinite; } .sps-report-lock-card > * { position: relative; z-index: 2; } .sps-report-lock-visual { display: grid; place-items: center; } .sps-report-lock-icon { width: 150px; height: 150px; border-radius: 36px; background: var(--report-gradient); color: #ffffff; display: grid; place-items: center; box-shadow: 0 28px 55px rgba(35,105,205,.25); animation: reportPulse 2.6s ease-in-out infinite; } .sps-report-lock-icon svg { width: 72px; height: 72px; stroke-width: 2.25; } .sps-report-lock-copy h5 { max-width: 760px; margin: 0 0 12px; color: var(--report-heading); font-size: clamp(30px, 3.5vw, 48px); line-height: 1.02; letter-spacing: -.04em; font-weight: 950; } .sps-report-lock-copy p { max-width: 720px; margin: 0 0 22px; color: var(--report-muted); font-size: 14px; line-height: 1.65; } .sps-report-lock-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } /* ========================================================= Library Section ========================================================= */ .sps-report-library-section { background: var(--report-card); border: 0; border-radius: var(--report-radius-xl); box-shadow: var(--report-shadow-card); padding: 18px; position: relative; overflow: hidden; isolation: isolate; } .sps-report-library-section::after { content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 34%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(24, 197, 210, .08), rgba(255, 255, 255, .16), transparent); transform: skewX(-18deg); animation: reportScan 7s ease-in-out infinite; } .sps-report-library-section > * { position: relative; z-index: 2; } .sps-report-library-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; } .sps-report-library-head h5 { margin: 0 0 4px; color: var(--report-heading); font-size: 20px; font-weight: 950; letter-spacing: -.02em; } .sps-report-library-head p { margin: 0; color: var(--report-muted); font-size: 12.5px; line-height: 1.4; } /* ========================================================= Toolbar ========================================================= */ .sps-report-toolbar { display: grid; grid-template-columns: auto minmax(210px, 280px) minmax(260px, 1fr); align-items: center; gap: 12px; padding: 14px; margin-bottom: 14px; border: 1px solid var(--report-line-soft); border-radius: 18px; background: var(--report-card-soft); color: var(--report-text); font-size: 12px; } .sps-report-toolbar label, .sps-report-filter, .sps-report-search { display: flex; align-items: center; gap: 8px; color: var(--report-heading); font-size: 11px; font-weight: 950; } .sps-report-toolbar select, .sps-report-toolbar input { height: 38px; border: 1px solid var(--report-line); border-radius: 13px; background: var(--report-card); color: var(--report-text); padding: 0 11px; font-size: 12px; font-weight: 850; outline: none; } .sps-report-toolbar label:first-child select { min-width: 70px; } .sps-report-filter select, .sps-report-search input { width: 100%; } .sps-report-toolbar select:focus, .sps-report-toolbar input:focus { border-color: rgba(24, 153, 220, .65); box-shadow: 0 0 0 4px rgba(24, 197, 210, .12); } /* ========================================================= Table ========================================================= */ .sps-report-table-wrap { overflow-x: auto; border: 1px solid var(--report-line-soft); border-radius: 18px; background: var(--report-card); } .sps-report-table { width: 100%; min-width: 940px; border-collapse: separate; border-spacing: 0; color: var(--report-text); } .sps-report-table th, .sps-report-table td { padding: 14px; border-bottom: 1px solid var(--report-line-soft); vertical-align: middle; color: var(--report-text); font-size: 12.5px; } .sps-report-table thead th { background: var(--report-card-soft); color: var(--report-heading); font-size: 11px; font-weight: 950; text-align: left; white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; } .sps-report-table thead th[data-sort] { cursor: pointer; user-select: none; } .sps-report-table thead th[data-sort]::after { content: "↕"; float: right; color: #9fb1c7; font-size: 11px; font-weight: 800; } .sps-report-table tbody tr:hover { background: rgba(24, 197, 210, .045); } html[data-bs-theme="dark"] .sps-report-table tbody tr:hover { background: rgba(24, 197, 210, .07); } .sps-report-table tbody tr:last-child td { border-bottom: 0; } .sps-report-table td strong { display: block; color: var(--report-heading); font-size: 13px; font-weight: 950; } .sps-report-category-pill, .sps-report-status-pill { display: inline-grid; place-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 10.5px; font-weight: 950; } .sps-report-category-pill { color: var(--report-blue); background: rgba(40, 102, 202, .10); } .sps-report-status-pill { color: var(--report-cyan-dark); background: rgba(24, 197, 210, .12); } html[data-bs-theme="dark"] .sps-report-status-pill { color: var(--report-cyan); } .sps-report-row-actions { display: flex; align-items: center; gap: 5px; } .sps-report-row-actions button { width: 32px; height: 30px; border: 0; border-radius: 10px; color: #ffffff; background: var(--report-gradient); display: grid; place-items: center; box-shadow: 0 8px 16px rgba(30, 89, 160, .12); } .sps-report-row-actions button:nth-child(2) { background: var(--report-gradient-cyan); } .sps-report-row-actions svg { width: 15px; height: 15px; stroke-width: 2.8; } /* ========================================================= Empty / Footer / Pagination ========================================================= */ .sps-report-empty { min-height: 190px; border: 1px dashed var(--report-line); border-radius: 20px; background: var(--report-card-soft); color: var(--report-muted); text-align: center; padding: 28px; display: grid; place-items: center; } .sps-report-empty svg { width: 40px; height: 40px; color: var(--report-cyan-dark); margin-bottom: 8px; } .sps-report-empty strong { display: block; color: var(--report-heading); font-size: 17px; font-weight: 950; } .sps-report-empty p { margin: 4px 0 0; color: var(--report-muted); font-size: 12px; } .sps-report-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; color: var(--report-muted); font-size: 12px; font-weight: 850; } .sps-report-pagination { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; } .sps-report-pagination button { min-width: 34px; height: 32px; border: 1px solid var(--report-line); border-radius: 9px; background: var(--report-card); color: var(--report-blue); font-size: 12px; font-weight: 950; display: grid; place-items: center; padding: 0 10px; } .sps-report-pagination button.active { color: #ffffff; border-color: transparent; background: var(--report-gradient); } .sps-report-pagination button:disabled { opacity: .45; cursor: not-allowed; } /* ========================================================= Modal / Form / Toast ========================================================= */ .sps-report-modal-backdrop { position: fixed; inset: 0; z-index: 1060; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 42, .42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .sps-report-modal-backdrop.is-open { display: flex; } .sps-report-modal { width: min(620px, 100%); max-height: min(760px, calc(100vh - 40px)); overflow: hidden; border: 1px solid var(--report-line); border-radius: 22px; background: var(--report-card); color: var(--report-text); box-shadow: 0 28px 80px rgba(15, 23, 42, .28); } .sps-report-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--report-line-soft); } .sps-report-modal-head h5 { margin: 0; color: var(--report-heading); font-size: 18px; font-weight: 950; } .sps-report-modal-close { width: 34px; height: 34px; border: 1px solid var(--report-line); border-radius: 999px; background: var(--report-card-soft); color: var(--report-muted); font-size: 20px; line-height: 1; } .sps-report-modal-body { max-height: calc(100vh - 210px); overflow: auto; padding: 20px; color: var(--report-text); } .sps-report-modal-body p { color: var(--report-muted); } .sps-report-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--report-line-soft); background: var(--report-card-soft); } .sps-report-modal-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .sps-report-info-item, .sps-report-preview-box { border: 1px solid var(--report-line-soft); border-radius: 16px; background: var(--report-card-soft); padding: 14px; } .sps-report-info-item span { display: block; color: var(--report-muted); font-size: 10px; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; } .sps-report-info-item strong { display: block; margin-top: 5px; color: var(--report-heading); font-size: 18px; font-weight: 950; } .sps-report-preview-box { margin-top: 14px; } .sps-report-preview-box h6 { margin: 0 0 8px; color: var(--report-heading); font-size: 14px; font-weight: 950; } .sps-report-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .sps-report-form-grid label { display: grid; gap: 7px; } .sps-report-form-grid label.full { grid-column: 1 / -1; } .sps-report-form-grid label span { display: flex; align-items: center; gap: 8px; color: var(--report-heading); font-size: 11px; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; } .sps-report-form-grid label span::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--report-gradient); box-shadow: 0 0 0 4px rgba(24, 197, 210, .10); } .sps-report-form-grid input, .sps-report-form-grid textarea { width: 100%; border: 1px solid var(--report-line); border-radius: 13px; background: var(--report-card); color: var(--report-text); padding: 0 12px; font-size: 13px; outline: none; } .sps-report-form-grid input { height: 40px; } .sps-report-form-grid textarea { min-height: 98px; padding-top: 10px; resize: vertical; } .sps-report-form-grid input:focus, .sps-report-form-grid textarea:focus { border-color: rgba(24, 153, 220, .65); box-shadow: 0 0 0 4px rgba(24, 197, 210, .12); } .sps-report-toast { position: fixed; right: 22px; bottom: 22px; z-index: 1080; display: none; max-width: 360px; padding: 13px 16px; border-radius: 16px; background: #16233d; color: #ffffff; box-shadow: 0 18px 48px rgba(15, 23, 42, .28); font-size: 13px; font-weight: 850; } .sps-report-toast.is-open { display: block; } html[data-bs-theme="dark"] .sps-report-toast { background: #223146; } /* ========================================================= Active Menu ========================================================= */ .main-menu .menu-link.active, .main-menu .menu-link[aria-current="page"] { background: rgba(255,255,255,.18); color: #ffffff !important; border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); } /* ========================================================= Responsive ========================================================= */ @media (max-width: 1500px) { .sps-report-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1199px) { .sps-report-heading-section, .sps-report-library-head { flex-direction: column; gap: 12px; } .sps-report-lock-card { grid-template-columns: 1fr; gap: 20px; text-align: center; } .sps-report-lock-actions { justify-content: center; } .sps-report-toolbar { grid-template-columns: 1fr; } .sps-report-toolbar label, .sps-report-filter, .sps-report-search { align-items: flex-start; flex-direction: column; } .sps-report-toolbar select, .sps-report-toolbar input { width: 100%; } } @media (max-width: 767px) { .sps-report-page { padding: 18px; border-radius: 26px; } .sps-report-heading-section h5 { font-size: 22px; } .sps-report-heading-section p { display: none; } .sps-report-heading-actions, .sps-report-lock-actions { width: 100%; flex-wrap: wrap; } .sps-report-control-btn { flex: 1 1 auto; } .sps-report-module-grid, .sps-report-modal-summary, .sps-report-form-grid { grid-template-columns: 1fr; } .sps-report-library-section, .sps-report-lock-card { padding: 16px; border-radius: 20px; } .sps-report-lock-icon { width: 112px; height: 112px; border-radius: 28px; } .sps-report-lock-icon svg { width: 54px; height: 54px; } .sps-report-lock-copy h5 { font-size: 28px; } .sps-report-footer { align-items: flex-start; flex-direction: column; } .sps-report-pagination { justify-content: flex-start; } } @media (max-width: 420px) { .sps-report-dashboard-card { min-height: 84px; } .sps-report-dashboard-icon { width: 38px; height: 38px; flex-basis: 38px; } .sps-report-modal-body { padding: 16px; } } @media (prefers-reduced-motion: reduce) { .sps-report-dashboard-card, .sps-report-dashboard-card::after, .sps-report-library-section::after, .sps-report-lock-card::after, .sps-report-lock-icon, .sps-report-control-btn, .sps-report-modal-btn { animation: none !important; transition: none !important; } }