SBS Dashboard

22 March 2026 by

Harsh

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

transition: background 0.5s ease, color 0.5s ease;

min-height: 100vh;

overflow-x: hidden;

position: relative;

}

/* Geometric Background Animations */

.geometric-bg {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1;

pointer-events: none;

overflow: hidden;

}

.geo-shape {

position: absolute;

opacity: 0.1;

animation: float 20s infinite ease-in-out;

}

.geo-circle {

border-radius: 50%;

border: 3px solid currentColor;

}

.geo-square {

border: 3px solid currentColor;

transform: rotate(45deg);

}

.geo-triangle {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid currentColor;

}

body.light-theme .geo-shape {

color: #00d4ff;

}

body.dark-theme .geo-shape {

color: #a855f7;

}

@keyframes float {

0%, 100% {

transform: translate(0, 0) rotate(0deg);

}

25% {

transform: translate(100px, -100px) rotate(90deg);

}

50% {

transform: translate(200px, 50px) rotate(180deg);

}

75% {

transform: translate(-50px, 100px) rotate(270deg);

}

.particle {

position: absolute;

background: currentColor;

border-radius: 50%;

opacity: 0.3;

animation: particleFloat 15s infinite ease-in-out;

}

@keyframes particleFloat {

0%, 100% {

transform: translateY(0) translateX(0);

opacity: 0.3;

}

50% {

transform: translateY(-100vh) translateX(50px);

opacity: 0;

}

/* Ensure content stays above geometric shapes */

.search-container,

.department-menu,

.sidebar,

.main-content,

.theme-toggle,

.custom-cursor,

.custom-cursor-follower {

position: relative;

z-index: auto;

}

.search-container {

z-index: 2000;

}

.department-menu {

z-index: 1999;

}

.sidebar {

z-index: 1998;

}

.main-content {

z-index: 100;

}

/* Custom Cursor */

.custom-cursor {

width: 20px;

height: 20px;

border: 2px solid #7367f0;

border-radius: 50%;

position: fixed;

pointer-events: none;

z-index: 9999;

transition: all 0.15s ease;

transform: translate(-50%, -50%);

}

.custom-cursor-follower {

width: 40px;

height: 40px;

background: rgba(115, 103, 240, 0.2);

border-radius: 50%;

position: fixed;

pointer-events: none;

z-index: 9998;

transition: all 0.3s ease;

transform: translate(-50%, -50%);

}

body.dark-theme .custom-cursor {

border-color: #ce9ffc;

}

body.dark-theme .custom-cursor-follower {

background: rgba(206, 159, 252, 0.2);

}

a:hover ~ .custom-cursor,

button:hover ~ .custom-cursor,

.btn:hover ~ .custom-cursor,

[onclick]:hover ~ .custom-cursor {

width: 40px;

height: 40px;

background: rgba(115, 103, 240, 0.3);

}

/* Restore default cursor for inputs */

input, textarea, select, [contenteditable="true"] {

cursor: text;

}

/* Light Theme Gradient (Finflow exact match - bright cyan to purple) */

body.light-theme {

background: linear-gradient(90.5deg, #FFFFF7 1.9%, rgba(220, 244, 241, 1) 30%, #FFFFFF 60%, #FFFFF7 87.7%);

background-size: 100% 100%;

animation: gradientShift 100s ease infinite;

color: #1a1a1a;

}

/* Dark Theme Gradient (dark blue, navy blue, coffee brown, gray to black) */

body.dark-theme {

background: radial-gradient(80% 60% at 50% 0%, rgba(120, 180, 255, 0.25), transparent 70%), rgb(0, 0, 0);

animation: gradientShift 1000s ease infinite;

color: #e0e0e0;

}

@keyframes gradientShift {

0% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

100% { background-position: 0% 50%; }

}

/* Search Bar Container - Full Width Sticky */

.search-container {

position: fixed;

top: 0;

left: 0;

width: 100%;

z-index: 2000;

padding: 20px 0;

backdrop-filter: blur(20px);

display: flex;

align-items: center;

justify-content: center;

gap: 20px;

}

body.light-theme .search-container {

box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);

}

body.dark-theme .search-container {

background: rgba(255,255,255,0.1);

box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

}

.search-wrapper {

width: 95%;

max-width: 1400px;

position: relative;

}

.search-bar {

width: 100%;

padding: 18px 25px;

font-size: 16px;

border: none;

border-radius: 50px;

outline: none;

transition: all 0.3s ease;

box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);

}

body.light-theme .search-bar {

background: rgba(0, 0, 0, 0.95);

color: #1a1a1a;

}

body.dark-theme .search-bar {

background: #8e9eab;

background: linear-gradient(to right, #8e9eab,#eef2f3); color: #e0e0e0;

}

.search-bar:hover, .search-bar:focus {

box-shadow: 0 0 30px rgba(102, 126, 234, 0.6), 0 10px 40px rgba(0, 0, 0, 0.2);

transform: translateY(-2px);

}

/* Search Results */

.search-results {

position: absolute;

top: 100%;

left: 0;

right: 0;

margin-top: 15px;

background: rgba(255, 255, 255, 0.98);

border-radius: 20px;

padding: 20px;

max-height: 400px;

overflow-y: auto;

display: none;

box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);

z-index: 2001;

}

body.dark-theme .search-results {

background: rgba(30, 30, 50, 0.98);

}

.search-results.active {

display: block;

}

/* Department Menu */

.department-menu {

position: relative;

margin-top: 100px;

margin-bottom: 30px;

width: 100%;

padding: 30px 2.5%;

z-index: 100;

display: flex;

gap: 15px;

justify-content: center;

flex-wrap: wrap;

}

.dept-btn {

position: relative; color:#999;

padding: 15px 50px;

border: none;

border-radius: 30px;

font-weight: 600;

font-size: 18px;

cursor: pointer;

transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

overflow: hidden;

backdrop-filter: blur(10px);

display: flex;

align-items: center;

gap: 10px;

}

.dept-btn .icon {

font-size: 18px;

transition: transform 0.3s ease;

}

.dept-btn:hover .icon {

transform: scale(1.2) rotate(10deg);

}

body.light-theme .dept-btn:before {

content: ""; color:#000;

position: absolute;

inset: 0;

border-radius: var(--radius);

border: 1px solid transparent;

background: linear-gradient(var(--neutral-1), var(--neutral-2)) padding-box,

linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.45))

border-box;

z-index: 0;

transition: all 0.4s ease;

}

body.light-theme .dept-btn:after {

content: "";

inset: 7px 6px 6px 6px;

position: absolute;

background: linear-gradient(to top, var(--neutral-1), var(--neutral-2));

border-radius: 30px;

filter: blur(0.5px);

z-index: 2;

}

body.light-theme .dept-btn {

text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);

border: none; color:#999;

box-shadow: 0 0.5px 0.5px 1px rgba(255, 255, 255, 0.2),

0 10px 20px rgba(0, 0, 0, 0.2), 0 4px 5px 0px rgba(0, 0, 0, 0.05);

--primary: #ff5569;

--neutral-1: #f7f8f7;

--neutral-2: #e7e7e7;

border: 1.5px solid transparent;

background: linear-gradient(var(--neutral-1), var(--neutral-2)) padding-box,

linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.45))

border-box;

display: flex;

align-items: center;

justify-content: center; padding: 20px;

z-index: 0;

transition: all 0.4s ease;

}

body.dark-theme .dept-btn {

background: #f3e7e9;

background: linear-gradient(

to right,

#f3e7e9,#e3eeff,#e3eeff

); color: #999;

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);

}

.dept-btn::before {

content: '';

position: absolute;

top: -2px;

left: -2px;

right: -2px;

bottom: -2px;

background: linear-gradient(45deg, #00d4ff, #0099ff, #6366f1, #8b5cf6, #a855f7, #00d4ff);

background-size: 400%;

border-radius: 15px;

z-index: -1;

opacity: 0;

transition: opacity 0.3s ease;

animation: glowingBorder 3s linear infinite;

}

@keyframes glowingBorder {

0% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

100% { background-position: 0% 50%; }

}

.dept-btn:hover::before {

opacity: 1;

}

.dept-btn:hover {

transform: translateY(-5px) scale(1.05);

box-shadow: 0 10px 30px rgba(0, 212, 255, 0.4);

}

body.light-theme .dept-btn:hover {

background: rgba(255, 255, 255, 0.4);

}

body.dark-theme .dept-btn:hover {

background: rgba(50, 50, 70, 0.4);

}

.dept-btn.active {

transform: scale(1.1);

}

body.light-theme .dept-btn.active {

background: rgba(0, 212, 255, 0.3);

box-shadow: 0 8px 25px rgba(0, 212, 255, 0.5);

}

body.dark-theme .dept-btn.active {

background: rgba(99, 102, 241, 0.3);

box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);

}

.dept-btn.active::before {

opacity: 1;

}

.search-result-item {

padding: 15px;

margin-bottom: 10px;

border-radius: 12px;

cursor: pointer;

transition: all 0.3s ease;

}

body.light-theme .search-result-item {

background: rgba(102, 126, 234, 0.1);

}

body.dark-theme .search-result-item {

background: rgba(102, 126, 234, 0.2);

}

.search-result-item:hover {

transform: translateX(10px);

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

}

.search-result-section {

font-size: 12px;

font-weight: 600;

text-transform: uppercase;

opacity: 0.7;

margin-bottom: 5px;

}

.search-result-title {

font-weight: 600;

margin-bottom: 5px;

}

/* Floating Sidebar */

.sidebar {

position: fixed;

right: -170px;

top: 50%;

transform: translateY(-50%);

width: 210px;

border-radius: 50px 0 0 50px;border: 1px solid #999;; border-right:none;

padding: 45px 25px;

z-index: 1999;

box-shadow: 0 10px 50px rgba(0, 0, 0, 0.2);

transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

.sidebar:hover {

right: 0;

}

/* Sidebar hover indicator */

.sidebar::before {

content: '☰';

position: absolute;

left: -30px;

top: 50%;

transform: translateY(-50%);

width: 30px;

height: 60px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 10px 0 0 10px;border: 1px solid #999;; border-right:none;

font-size: 20px;

cursor: pointer;

transition: all 0.3s ease;

}

body.light-theme .sidebar::before {

background: rgba(255, 255, 255, 0.9);

color: #7367f0;

}

body.dark-theme .sidebar::before {

background: rgba(30, 30, 50, 0.9);

color: #ce9ffc;

}

.sidebar:hover::before {

left: -35px;

}

body.light-theme .sidebar {

background: rgba(255, 255, 255, 0.95);

backdrop-filter: blur(10px);

}

body.dark-theme .sidebar {

background: linear-gradient(to right, rgba(71, 85, 105, 0.15) 1px, transparent 1px) 0% 0% / 40px 40px, linear-gradient(rgba(71, 85, 105, 0.15) 1px, transparent 1px) 0% 0% / 40px 40px, radial-gradient(circle at 50% 60%, rgba(236, 72, 153, 0.15) 0%, rgba(168, 85, 247, 0.05) 40%, transparent 70%) 0% 0% / 100% 100% rgb(2, 6, 23);

backdrop-filter: blur(10px);

}

.sidebar-menu {

list-style: none;

}

.sidebar-menu li {

margin-bottom: 15px;

}

.sidebar-menu a {

display: block;

padding: 11px;

text-decoration: none;

border-radius: 15px;

transition: all 0.3s ease;

font-weight: 600; width:100%; height:40px;

text-align: center;

}

body.light-theme .sidebar-menu a {

color: #4a4a4a;

background: rgba(102, 126, 234, 0.1);

}

body.dark-theme .sidebar-menu a {

background: #f3e7e9;

background: linear-gradient(

to right,

#f3e7e9,#e3eeff,#e3eeff

); color: #999;

}

.sidebar-menu a:hover, .sidebar-menu a.active {

transform: translateX(-10px);

box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);

}

body.light-theme .sidebar-menu a.active {

background: #fdfcfb;

background: linear-gradient(

to right,

#fdfcfb,#e2d1c3

);

color: #333;

}

body.dark-theme .sidebar-menu a.active {

background: #fdfcfb;

background: linear-gradient(

to right,

#fdfcfb,#e2d1c3

); color: #333;

}

/* Theme Toggle */

.theme-toggle {

position: fixed;

top: 20px;

right: 10px;

padding: 8px 14px;

z-index: 20;

background: #0f0c29;

background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);

background: linear-gradient(to right, #24243e, #302b63, #0f0c29);

transition: all 0.3s ease;

text-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);

flex-shrink: 0; border-radius:15px;

}

body.light-theme .theme-toggle {

background: #DE6262; /* fallback for old browsers */

background: -webkit-linear-gradient(to right, #FFB88C, #DE6262); /* Chrome 10-25, Safari 5.1-6 */

background: linear-gradient(to right, #FFB88C, #DE6262); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

body.dark-theme .theme-toggle {

background: rgba(30, 30, 50, 0.95);

}

.theme-toggle:hover {

transform: rotate(180deg) scale(1.1);

}

/* Main Content Area */

.main-content {

width: 95%;

margin: 0 auto;

margin-bottom: 50px;

padding: 40px;

border-radius: 20px;

min-height: 500px;

box-shadow: 0 10px 50px rgba(0, 0, 0, 0.1);

position: relative;

z-index: 100;

}

/* Go to Top Button */

.go-to-top {

position: fixed;

bottom: 40px;

right: 40px;

width: 50px;

height: 50px;

border-radius: 50%;

display: none;

align-items: center;

justify-content: center;

font-size: 24px;

cursor: pointer;

z-index: 2000;

transition: all 0.3s ease;

box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);

border: none;

}

body.light-theme .go-to-top {

background: linear-gradient(135deg, #00d4ff, #6366f1);

color: white;

}

body.dark-theme .go-to-top {

background: linear-gradient(135deg, #a855f7, #6366f1);

color: white;

}

.go-to-top.visible {

display: flex;

}

.go-to-top:hover {

transform: translateY(-10px) scale(1.1);

box-shadow: 0 10px 30px rgba(0, 212, 255, 0.5);

}

.go-to-top:active {

transform: translateY(-5px) scale(1.05);

}

body.light-theme .main-content {

background: rgba(255, 255, 255, 0.95);

backdrop-filter: blur(10px);

}

body.dark-theme .main-content {

background: #BDBBBE;

background: linear-gradient(

to right,

#BDBBBE,#9D9EA3

);

}

.tab-content {

display: none;

}

.tab-content.active {

display: block;

animation: cardFlipIn 1s cubic-bezier(0.23, 1, 0.32, 1);

}

@keyframes cardFlipIn {

0% {

opacity: 0;

transform: perspective(1200px) rotateY(90deg) scale(0.9);

transform-origin: center center;

}

40% {

opacity: 0.5;

transform: perspective(1200px) rotateY(45deg) scale(0.95);

}

100% {

opacity: 1;

transform: perspective(1200px) rotateY(0deg) scale(1);

}

.tab-content.slide-out {

animation: cardFlipOut 0.8s cubic-bezier(0.6, 0.04, 0.98, 0.335) forwards;

}

@keyframes cardFlipOut {

0% {

opacity: 1;

transform: perspective(1200px) rotateY(0deg) scale(1);

transform-origin: center center;

}

60% {

opacity: 0.5;

transform: perspective(1200px) rotateY(-45deg) scale(0.95);

}

100% {

opacity: 0;

transform: perspective(1200px) rotateY(-90deg) scale(0.9);

}

/* Main content wrapper for tab container */

.tab-container {

perspective: 1500px;

transform-style: preserve-3d;

min-height: 500px;

}

/* Add subtle depth shadow during transitions */

.tab-content.active,

.tab-content.slide-out {

box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);

border-radius: 20px; padding:20px 15px; margin:15px 0px;

}

/* Projects Section */

.project-controls {

margin-bottom: 30px;

}

.btn {

padding: 12px 30px;

border: none;

border-radius: 25px;

cursor: pointer;

font-weight: 600;

transition: all 0.3s ease;

margin-right: 10px;

}

.btn-primary {

background: linear-gradient(135deg, #667eea, #764ba2);

color: white;

}

.btn-primary:hover {

transform: translateY(-2px);

box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);

}

.project-list {

margin-top: 20px;

}

.project-item {

padding: 20px;

margin-bottom: 15px;

border-radius: 15px;

display: flex;

justify-content: space-between;

align-items: center;

transition: all 0.3s ease;

}

body.light-theme .project-item {

background: rgba(102, 126, 234, 0.1);

}

body.dark-theme .project-item {

background: rgba(102, 126, 234, 0.15);

}

.project-item:hover {

transform: translateX(10px);

box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);

}

.project-item.completed {

opacity: 0.6;

text-decoration: line-through;

}

.project-actions button {

padding: 8px 15px;

margin-left: 8px;

border: none;

border-radius: 8px;

cursor: pointer;

font-size: 12px;

transition: all 0.3s ease;

}

.btn-edit {

background: #4facfe;

color: white;

}

.btn-delete {

background: #ff6b6b;

color: white;

}

.btn-complete {

background: #51cf66;

color: white;

}

.project-actions button:hover {

transform: scale(1.1);

}

/* Accordion Styles */

.accordion {

margin-bottom: 15px;

}

.accordion-header {

padding: 18px 25px;

border-radius: 12px;

cursor: pointer;

font-weight: 600;

transition: all 0.3s ease;

display: flex;

justify-content: space-between;

align-items: center;

}

body.light-theme .accordion-header {

background: rgba(102, 126, 234, 0.15);

}

body.dark-theme .accordion-header {

background: rgba(102, 126, 234, 0.2);

}

.accordion-header:hover {

transform: translateX(10px);

}

.accordion-content {

display: none;

padding: 25px;

margin-top: 10px;

border-radius: 12px;

}

body.light-theme .accordion-content {

background: rgba(102, 126, 234, 0.05);

}

body.dark-theme .accordion-content {

background: rgba(102, 126, 234, 0.1);

}

.accordion-content.active {

display: block;

animation: slideDown 0.3s ease;

}

@keyframes slideDown {

from { opacity: 0; max-height: 0; }

to { opacity: 1; max-height: 1000px; }

}

/* Form Styles */

.form-group {

margin-bottom: 20px;

}

.form-group label {

display: block;

margin-bottom: 8px;

font-weight: 600;

}

.form-group input, .form-group textarea, .form-group select {

width: 100%;

padding: 12px 18px;

border-radius: 10px;

border: 2px solid transparent;

outline: none;

transition: all 0.3s ease;

font-family: inherit;

}

body.light-theme .form-group input,

body.light-theme .form-group textarea,

body.light-theme .form-group select {

background: rgba(255, 255, 255, 0.8);

color: #1a1a1a;

}

body.dark-theme .form-group input,

body.dark-theme .form-group textarea,

body.dark-theme .form-group select {

background: rgba(50, 50, 70, 0.5);

color: #e0e0e0;

}

.form-group input:focus, .form-group textarea:focus, .form-group select:focus {

border-color: #667eea;

box-shadow: 0 0 15px rgba(102, 126, 234, 0.3);

}

/* Grid Display */

.data-grid {

margin-top: 20px;

overflow-x: auto;

}

table {

width: 100%;

border-collapse: collapse;

border-radius: 12px;

overflow: hidden;

}

th, td {

padding: 15px;

text-align: left;

}

body.light-theme th {

background: rgba(102, 126, 234, 0.2);

font-weight: 600;

}

body.dark-theme th {

background: rgba(102, 126, 234, 0.3);

font-weight: 600;

}

body.light-theme tr:hover {

background: rgba(102, 126, 234, 0.05);

}

body.dark-theme tr:hover {

background: rgba(102, 126, 234, 0.1);

}

h2 {

margin-bottom: 30px;

font-size: 32px;

background: linear-gradient(135deg, #667eea, #764ba2);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

}

h3 {

margin-bottom: 20px;

font-size: 20px;

}

/* Modal Styles */

.modal {

display: none;

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.6);

z-index: 2000;

align-items: center;

justify-content: center;

}

.modal.active {

display: flex;

}

.modal-content {

padding: 40px;

border-radius: 20px;

max-width: 600px;

width: 90%;

max-height: 80vh;

overflow-y: auto;

}

body.light-theme .modal-content {

background: white;

}

body.dark-theme .modal-content {

background: rgba(30, 30, 50, 0.98);

}

.modal-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 25px;

}

.close-modal {

font-size: 28px;

cursor: pointer;

color: #ff6b6b;

transition: transform 0.3s ease;

}

.close-modal:hover {

transform: rotate(90deg);

}

/* Responsive */

@media (max-width: 768px) {

.sidebar {

right: -160px;

width: 150px;

padding: 15px 10px;

}

.sidebar:hover {

right: 0;

}

.main-content {

width: 98%;

padding: 20px;

}

.search-wrapper {

width: 85%;

}

.theme-toggle {

width: 45px;

height: 45px;

font-size: 20px;

}

.department-menu {

padding: 20px 2%;

gap: 10px;

}

.dept-btn {

padding: 12px 20px;

font-size: 13px;

}

/* Modern Form Styles */

.modern-form {

width: 95%; padding:40px 60px;

margin: 0 auto; border-radius:10px;

background: #CC95C0;

background: linear-gradient(

to right,

#f7f5ee,#CC95C0,#DBD4B4,#7AA1D2

);

}

.form-progress {

display: flex;

justify-content: space-between;

margin-bottom: 40px;

position: relative;

}

.form-progress::before {

content: '';

position: absolute;

top: 20px;

left: 0;

right: 0;

height: 3px;

background: rgba(128, 128, 128, 0.2);

z-index: 0;

}

.progress-line {

position: absolute;

top: 20px;

left: 0;

height: 3px;

background: linear-gradient(90deg, #00d4ff, #6366f1);

transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);

z-index: 1;

}

.progress-step {

position: relative;

z-index: 2;

text-align: center;

flex: 1;

}

.progress-circle {

width: 40px;

height: 40px;

border-radius: 50%;

margin: 0 auto 10px;

display: flex;

align-items: center;

justify-content: center;

font-weight: 600;

transition: all 0.3s ease;

border: 3px solid rgba(128, 128, 128, 0.3);

}

body.light-theme .progress-circle {

background: white;

color: #999;

}

body.dark-theme .progress-circle {

background: rgba(50, 50, 70, 0.5);

color: #999;

}

.progress-step.active .progress-circle {

background: linear-gradient(135deg, #00d4ff, #6366f1);

color: white;

border-color: transparent;

transform: scale(1.1);

box-shadow: 0 5px 20px rgba(0, 212, 255, 0.5);

}

.progress-step.completed .progress-circle {

background: #51cf66;

color: white;

border-color: transparent;

}

.progress-step.completed .progress-circle::before {

content: '✓';

}

.progress-label {

font-size: 12px;

opacity: 0.7;

font-weight: 500;

}

.progress-step.active .progress-label {

opacity: 1;

font-weight: 700;

}

.form-fieldset {
padding: 30px;
border-radius: 20px;
margin-bottom: 30px;
border: none;
display: none;
animation: fieldsetFadeIn 0.5s ease;
}

.form-fieldset.active {
display: block;
}

@keyframes fieldsetFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

body.light-theme .form-fieldset {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
}

body.dark-theme .form-fieldset {
background: rgba(50, 50, 70, 0.4);
backdrop-filter: blur(10px);
}

.form-fieldset legend {
font-size: 24px;
font-weight: 700;
margin-top:40px;
background: linear-gradient(135deg, #00d4ff, #6366f1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 25px;
}

.form-field {
display: flex;
flex-direction: column;
}

.form-field label {
font-weight: 600;
margin-bottom: 10px;
font-size: 14px;
display: flex;
align-items: center;
gap: 5px;
}

.form-field label .required {
color: #ff6b6b;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="datetime-local"],
.form-field textarea,
.form-field select {
padding: 14px 18px;
border-radius: 12px;
border: 2px solid transparent;
outline: none;
transition: all 0.3s ease;
font-family: inherit;
font-size: 14px;
}

body.light-theme .form-field input,
body.light-theme .form-field textarea,
body.light-theme .form-field select {
background: rgba(255, 255, 255, 0.9);
color: #1a1a1a;
}

body.dark-theme .form-field input,
body.dark-theme .form-field textarea,
body.dark-theme .form-field select {
background: rgba(40, 40, 60, 0.6);
color: #e0e0e0;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
border-color: #00d4ff;
box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
transform: translateY(-2px);
}

.form-field input:disabled {
opacity: 0.6;
cursor: not-allowed;
}

/* Custom Radio Buttons */
.radio-group {
display: flex;
gap: 15px;
flex-wrap: wrap;
}

.radio-option {
position: relative;
}

.radio-option input[type="radio"] {
position: absolute;
opacity: 0;
}

.radio-option label {
padding: 12px 24px;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
border: 2px solid transparent;
}

body.light-theme .radio-option label {
background: rgba(102, 126, 234, 0.1);
color: #4a4a4a;
}

body.dark-theme .radio-option label {
background: rgba(102, 126, 234, 0.15);
color: #e0e0e0;
}

.radio-option input[type="radio"]:checked + label {
background: linear-gradient(135deg, #00d4ff, #6366f1);
color: white;
border-color: transparent;
transform: translateY(-3px);
box-shadow: 0 5px 20px rgba(0, 212, 255, 0.4);
}

.radio-option label:hover {
transform: translateY(-2px);
}

.radio-option label::before {
content: '';
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid currentColor;
display: inline-block;
}

.radio-option input[type="radio"]:checked + label::before {
background: white;
border-color: white;
box-shadow: inset 0 0 0 3px #00d4ff;
}

/* Searchable Select */
.select-wrapper {
position: relative;
}

.select-search {
position: relative;
}

.select-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: 250px;
overflow-y: auto;
border-radius: 12px;
margin-top: 5px;
display: none;
z-index: 1000;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

body.light-theme .select-dropdown {
background: white;
}

body.dark-theme .select-dropdown {
background: rgba(40, 40, 60, 0.95);
}

.select-dropdown.active {
display: block;
}

.select-option {
padding: 12px 18px;
cursor: pointer;
transition: all 0.2s ease;
}

body.light-theme .select-option:hover {
background: rgba(0, 212, 255, 0.1);
}

body.dark-theme .select-option:hover {
background: rgba(0, 212, 255, 0.2);
}

.select-option.selected {
background: linear-gradient(135deg, #00d4ff, #6366f1);
color: white;
}

/* Form Navigation */
.form-navigation {
display: flex;
justify-content: space-between;
margin-top: 30px;
gap: 15px;
}

.form-nav-btn {
padding: 14px 40px;
border: none;
border-radius: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-size: 15px;
}

.btn-prev {
background: rgba(128, 128, 128, 0.2);
}

body.light-theme .btn-prev {
color: #4a4a4a;
}

body.dark-theme .btn-prev {
color: #e0e0e0;
}

.btn-next, .btn-submit {
background: #360033;
background: linear-gradient(
to right,
#b8f4fa, #185a9d
); color: white;
}

.form-nav-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4);
}

.form-nav-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}

/* Auto-complete suggestions */
.autocomplete-list {
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: 200px;
overflow-y: auto;
border-radius: 12px;
margin-top: 5px;
display: none;
z-index: 1000;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

body.light-theme .autocomplete-list {
background: white;
}

body.dark-theme .autocomplete-list {
background: rgba(40, 40, 60, 0.95);
}

.autocomplete-list.active {
display: block;
}

.autocomplete-item {
padding: 12px 18px;
cursor: pointer;
transition: all 0.2s ease;
}

body.light-theme .autocomplete-item:hover {
background: rgba(0, 212, 255, 0.1);
}

body.dark-theme .autocomplete-item:hover {
background: rgba(0, 212, 255, 0.2);
}

/* Notes & Reminders Styles */
.two-column-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-top: 20px;
}

.column {
padding: 25px;
border-radius: 15px;
}

body.light-theme .column {
background: rgba(255, 255, 255, 0.6);
}

body.dark-theme .column {
background: rgba(50, 50, 70, 0.3);
}

.wysiwyg-toolbar {
display: flex;
gap: 8px;
margin-bottom: 15px;
flex-wrap: wrap;
padding: 10px;
border-radius: 10px;
}

body.light-theme .wysiwyg-toolbar {
background: rgba(102, 126, 234, 0.1);
}

body.dark-theme .wysiwyg-toolbar {
background: rgba(102, 126, 234, 0.15);
}

.toolbar-btn {
padding: 8px 12px;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s ease;
font-size: 14px;
}

body.light-theme .toolbar-btn {
background: rgba(255, 255, 255, 0.8);
color: #4a4a4a;
}

body.dark-theme .toolbar-btn {
background: rgba(70, 70, 90, 0.5);
color: #e0e0e0;
}

.toolbar-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
}

.wysiwyg-editor {
min-height: 200px;
padding: 15px;
border-radius: 10px;
outline: none;
border: 2px solid transparent;
transition: all 0.3s ease;
font-family: inherit;
overflow-y: auto;
}

body.light-theme .wysiwyg-editor {
background: rgba(255, 255, 255, 0.9);
color: #1a1a1a;
}

body.dark-theme .wysiwyg-editor {
background: rgba(40, 40, 60, 0.5);
color: #e0e0e0;
}

.wysiwyg-editor:focus {
border-color: #667eea;
box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
}

.sticky-notes-container, .reminders-container {
margin-top: 25px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 15px;
}

.sticky-note, .reminder-card {
padding: 20px;
border-radius: 12px;
position: relative;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
animation: popIn 0.3s ease;
}

@keyframes popIn {
from {
opacity: 0;
transform: scale(0.8) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}

body.light-theme .sticky-note {
background: linear-gradient(135deg, #ffeaa7, #fdcb6e);
}

body.dark-theme .sticky-note {
background: linear-gradient(135deg, #b8860b, #daa520);
}

body.light-theme .reminder-card {
background: linear-gradient(135deg, #a29bfe, #6c5ce7);
color: white;
}

body.dark-theme .reminder-card {
background: linear-gradient(135deg, #5f27cd, #341f97);
color: white;
}

.sticky-note:hover, .reminder-card:hover {
transform: translateY(-5px) rotate(1deg);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.note-content {
margin-bottom: 15px;
word-wrap: break-word;
max-height: 150px;
overflow-y: auto;
}

.note-timestamp {
font-size: 11px;
opacity: 0.8;
margin-bottom: 10px;
font-style: italic;
}

.note-actions, .reminder-actions {
display: flex;
gap: 8px;
margin-top: 10px;
}

.note-actions button, .reminder-actions button {
padding: 6px 12px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 11px;
transition: all 0.2s ease;
font-weight: 600;
}

.note-actions button:hover, .reminder-actions button:hover {
transform: scale(1.1);
}

.reminder-datetime {
font-size: 13px;
font-weight: 600;
margin: 10px 0;
padding: 8px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.2);
}

.reminder-card.completed {
opacity: 0.6;
filter: grayscale(50%);
}

.reminder-card.completed .reminder-text {
text-decoration: line-through;
}

/* Notification Popup */
.notification-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 450px;
max-width: 90%;
padding: 30px;
border-radius: 20px;
z-index: 3000;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: popupAppear 0.4s ease forwards;
backdrop-filter: blur(10px);
}

body.light-theme .notification-popup {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 240, 255, 0.98));
color: #1a1a1a;
}

body.dark-theme .notification-popup {
background: linear-gradient(135deg, rgba(40, 40, 70, 0.98), rgba(30, 30, 50, 0.98));
color: #e0e0e0;
}

@keyframes popupAppear {
to {
transform: translate(-50%, -50%) scale(1);
}
}

.notification-popup.hide {
animation: popupDisappear 0.3s ease forwards;
}

@keyframes popupDisappear {
to {
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
}

.notification-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}

.notification-icon {
font-size: 40px;
animation: bell 1s ease infinite;
}

@keyframes bell {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-15deg); }
75% { transform: rotate(15deg); }
}

.notification-title {
font-size: 20px;
font-weight: 700;
}

.notification-time {
font-size: 14px;
opacity: 0.8;
margin-bottom: 15px;
}

.notification-message {
font-size: 16px;
margin-bottom: 25px;
padding: 15px;
border-radius: 10px;
background: rgba(102, 126, 234, 0.1);
}

.notification-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}

.notification-actions button {
flex: 1;
padding: 12px 20px;
border: none;
border-radius: 10px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
min-width: 100px;
}

.btn-dismiss {
background: #ff6b6b;
color: white;
}

.btn-snooze {
background: #ffa502;
color: white;
}

.btn-complete-reminder {
background: #51cf66;
color: white;
}

.notification-actions button:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.snooze-options {
display: none;
margin-top: 10px;
padding: 10px;
border-radius: 10px;
background: rgba(102, 126, 234, 0.1);
}

.snooze-options.active {
display: flex;
gap: 8px;
flex-wrap: wrap;
}

.snooze-option-btn {
padding: 8px 15px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 13px;
background: rgba(255, 165, 2, 0.8);
color: white;
transition: all 0.2s ease;
}

.snooze-option-btn:hover {
transform: scale(1.05);
background: rgba(255, 165, 2, 1);
}

.reminder-form-inline {
display: grid;
grid-template-columns: 2fr 2fr 1fr;
gap: 10px;
margin-bottom: 20px;
}

@media (max-width: 768px) {
.two-column-layout {
grid-template-columns: 1fr;
}

.reminder-form-inline {
grid-template-columns: 1fr;
}
}

/* Footer Styles */
.footer {
margin-top: 100px;
padding: 60px 5% 30px;
position: relative;
z-index: 100;
}

.footer-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin-bottom: 40px;
}

.footer-section h4 {
font-size: 18px;
margin-bottom: 20px;
font-weight: 700;
}

body.light-theme .footer-section h4 {
color: #1a1a1a;
}

body.dark-theme .footer-section h4 {
color: #e0e0e0;
}

.footer-section ul {
list-style: none;
padding: 0;
}

.footer-section ul li {
margin-bottom: 12px;
}

.footer-section ul li a {
text-decoration: none;
transition: all 0.3s ease;
opacity: 0.8;
}

body.light-theme .footer-section ul li a {
color: #4a4a4a;
}

body.dark-theme .footer-section ul li a {
color: #b0b0b0;
}

.footer-section ul li a:hover {
opacity: 1;
transform: translateX(5px);
display: inline-block;
}

body.light-theme .footer-section ul li a:hover {
color: #00d4ff;
}

body.dark-theme .footer-section ul li a:hover {
color: #a855f7;
}

.footer-bottom {
max-width: 1200px;
margin: 0 auto;
padding-top: 30px;
border-top: 1px solid rgba(128, 128, 128, 0.2);
text-align: center;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
opacity: 0.8;
}

.social-links {
display: flex;
gap: 20px;
}

.social-links a {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.3s ease;
font-size: 18px;
}

body.light-theme .social-links a {
background: rgba(0, 212, 255, 0.1);
color: #00d4ff;
}

body.dark-theme .social-links a {
background: rgba(168, 85, 247, 0.1);
color: #a855f7;
}

.social-links a:hover {
transform: translateY(-5px) scale(1.1);
box-shadow: 0 5px 20px rgba(0, 212, 255, 0.4);
}

@media (max-width: 768px) {
.footer-bottom {
flex-direction: column;
text-align: center;
}
}

/* Dashboard Styles */
.dashboard-container {
width: 100%;
padding: 30px 2.5%;
margin-bottom: 30px;
}

.dashboard-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 30px;
}

.dashboard-card {
padding: 25px;
border-radius: 20px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}

body.light-theme .dashboard-card {
background: rgba(255, 255, 255, 0.7);
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}

body.dark-theme .dashboard-card {
background: #f3e7e9;
background: linear-gradient( to right, #f3e7e9,#e3eeff,#e3eeff );
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); color:#999;
}

.dashboard-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(0, 212, 255, 0.3);
}

.dashboard-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #00d4ff, #6366f1);
}

.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.card-title {
font-size: 14px;
font-weight: 600;
opacity: 0.8;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.card-icon {
font-size: 32px;
opacity: 0.6;
}

.card-value {
font-size: 42px;
font-weight: 700;
background: linear-gradient(135deg, #00d4ff, #6366f1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 10px;
}

.card-subtitle {
font-size: 13px;
opacity: 0.7;
}

.card-trend {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
margin-top: 10px;
}

.trend-up {
background: rgba(81, 207, 102, 0.2);
color: #51cf66;
}

.trend-down {
background: rgba(255, 107, 107, 0.2);
color: #ff6b6b;
}

/* Chart Container */
.chart-card {
grid-column: span 2;
padding: 30px;
}

.chart-container {
position: relative;
height: 300px;
margin-top: 20px;
}

/* iCare Knowledge Base Card */
.kb-card {
grid-column: span 2;
}

.kb-accordion {
margin-top: 15px;
}

.kb-item {
padding: 15px;
margin-bottom: 10px;
border-radius: 12px;
transition: all 0.3s ease;
cursor: pointer;
}

body.light-theme .kb-item {
background: rgba(102, 126, 234, 0.1);
}

body.dark-theme .kb-item {
background: rgba(102, 126, 234, 0.15);
}

.kb-item:hover {
transform: translateX(10px);
box-shadow: 0 5px 15px rgba(0, 212, 255, 0.3);
}

.kb-item-header {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
margin-bottom: 5px;
}

.kb-item-meta {
font-size: 12px;
opacity: 0.7;
display: flex;
gap: 15px;
}

.kb-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
background: linear-gradient(135deg, #00d4ff, #6366f1);
color: white;
}

/* Priority Distribution */
.priority-bars {
margin-top: 20px;
}

.priority-item {
margin-bottom: 15px;
}

.priority-label {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
font-size: 13px;
font-weight: 600;
}

.priority-bar {
height: 10px;
border-radius: 10px;
overflow: hidden;
position: relative;
}

body.light-theme .priority-bar {
background: rgba(128, 128, 128, 0.2);
}

body.dark-theme .priority-bar {
background: rgba(128, 128, 128, 0.3);
}

.priority-fill {
height: 100%;
border-radius: 10px;
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.priority-high {
background: linear-gradient(90deg, #ff6b6b, #ff8787);
}

.priority-medium {
background: linear-gradient(90deg, #ffa502, #ffb733);
}

.priority-low {
background: linear-gradient(90deg, #51cf66, #69db7c);
}

/* Responsive Dashboard */
@media (max-width: 1200px) {
.dashboard-grid {
grid-template-columns: repeat(2, 1fr);
}

.chart-card,
.kb-card {
grid-column: span 2;
}
}

/* 360 Spinner */

.sbs-widget {
position: fixed; left: 20px; top: 50%;
transform: translateY(-50%); z-index: 9999;
}
.sbs-wedge {
fill: #fff; cursor: pointer; transition: 0.3s;
stroke: #eee; stroke-width: 0.5;
}
.sbs-group:hover .sbs-wedge { fill: var(--hover-color); }

/* Hover Colors */
.s1 { --hover-color: #cc39a4; } .s2 { --hover-color: #03a9f4; }
.s3 { --hover-color: #ff0000; } .s4 { --hover-color: #333333; }
.s5 { --hover-color: #8c9eff; } .s6 { --hover-color: #0077b5; }

/* Center Branding */
.sbs-center-text {
font-family: 'Arial Black', sans-serif; font-size: 5.5px;
text-anchor: middle; fill: #222; pointer-events: none;
}
.sbs-sup {
baseline-shift: super; font-size: 3.5px; fill: #666; font-family: sans-serif;
}

/* Labels & Tooltips */
.sbs-label { font-family: sans-serif; font-size: 4.5px; font-weight: bold; text-anchor: middle; fill: #777; pointer-events: none; }
.sbs-group:hover .sbs-label { fill: #fff; }

.sbs-tooltip {
background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;
font-family: sans-serif; font-size: 10px; opacity: 0;
transition: 0.3s; pointer-events: none; text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.sbs-group:hover .sbs-tooltip { opacity: 1; }

/* 360 Spinner */

/* From Uiverse.io by MuhammadHasann */
.button {
--black-700: hsla(0 0% 12% / 1);
--border_radius: 9999px;
--transtion: 0.3s ease-in-out;
--offset: 2px;

cursor: pointer;
position: relative;

display: flex;
align-items: center;
gap: 0.5rem;

transform-origin: center;

padding: 1rem 2rem;
background-color: transparent;

border: none;
border-radius: var(--border_radius);
transform: scale(calc(1 + (var(--active, 0) * 0.1)));

transition: transform var(--transtion);
}

.button::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

width: 100%;
height: 100%;
background-color: var(--black-700);

border-radius: var(--border_radius);
box-shadow: inset 0 0.5px hsl(0, 0%, 100%), inset 0 -1px 2px 0 hsl(0, 0%, 0%),
0px 4px 10px -4px hsla(0 0% 0% / calc(1 - var(--active, 0))),
0 0 0 calc(var(--active, 0) * 0.375rem) hsl(260 97% 50% / 0.75);

transition: all var(--transtion);
z-index: 0;
}

.button::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

width: 100%;
height: 100%;
background-color: hsla(260 97% 61% / 0.75);
background-image: radial-gradient(
at 51% 89%,
hsla(266, 45%, 74%, 1) 0px,
transparent 50%
),
radial-gradient(at 100% 100%, hsla(266, 36%, 60%, 1) 0px, transparent 50%),
radial-gradient(at 22% 91%, hsla(266, 36%, 60%, 1) 0px, transparent 50%);
background-position: top;

opacity: var(--active, 0);
border-radius: var(--border_radius);
transition: opacity var(--transtion);
z-index: 2;
}

.button:is(:hover, :focus-visible) {
--active: 1;
}
.button:active {
transform: scale(1);
}

.button .dots_border {
--size_border: calc(100% + 2px);

overflow: hidden;

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

width: var(--size_border);
height: var(--size_border);
background-color: transparent;

border-radius: var(--border_radius);
z-index: -10;
}

.button .dots_border::before {
content: "";
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: left;
transform: rotate(0deg);

width: 100%;
height: 2rem;
background-color: white;

mask: linear-gradient(transparent 0%, white 120%);
animation: rotate 2s linear infinite;
}

@keyframes rotate {
to {
transform: rotate(360deg);
}
}

.buttons .sparkle {
position: relative;
z-index: 10;

width: 1.75rem;
}

.buttons .sparkle .path {
fill: currentColor;
stroke: currentColor;

transform-origin: center;

color: hsl(0, 0%, 100%);
}

.buttons:is(:hover, :focus) .sparkle .path {
animation: path 1.5s linear 0.5s infinite;
}

.buttons .sparkle .path:nth-child(1) {
--scale_path_1: 1.2;
}
.buttons .sparkle .path:nth-child(2) {
--scale_path_2: 1.2;
}
.buttons .sparkle .path:nth-child(3) {
--scale_path_3: 1.2;
}

@keyframes path {
0%,
34%,
71%,
100% {
transform: scale(1);
}
17% {
transform: scale(var(--scale_path_1, 1));
}
49% {
transform: scale(var(--scale_path_2, 1));
}
83% {
transform: scale(var(--scale_path_3, 1));
}
}

.buttons .text_button {
position: relative;
z-index: 10;

background-image: linear-gradient(
90deg,
hsla(0 0% 100% / 1) 0%,
hsla(0 0% 100% / var(--active, 0)) 120%
);
background-clip: text;

font-size: 1rem;
color: transparent;
}

@media (max-width: 768px) {
.dashboard-grid {
grid-template-columns: 1fr;
}

.chart-card,
.kb-card {
grid-column: span 1;
}
}

</style>

</head>

</div>

</div>

<div style="width:auto; height:auto; auto; position: fixed; left: 10px; margin-bottom:50px;

top: 15%;

transform: translateY(-50%);

border-left: none;

z-index: 2001;

transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);">

<foreignObject x="85" y="80" width="100" height="40"><div class="sbs-tooltip">Instagram</div></foreignObject>

</g>

<foreignObject x="45" y="100" width="100" height="40"><div class="sbs-tooltip">Twitter</div></foreignObject>

</g>

<foreignObject x="-20" y="80" width="100" height="40"><div class="sbs-tooltip">YouTube</div></foreignObject>

</g>

<foreignObject x="-20" y="10" width="100" height="40"><div class="sbs-tooltip">GitHub</div></foreignObject>

</g>

<foreignObject x="45" y="-10" width="100" height="40"><div class="sbs-tooltip">Discord</div></foreignObject>

</g>

<foreignObject x="85" y="10" width="100" height="40"><div class="sbs-tooltip">LinkedIn</div></foreignObject>

</g>

SBS <tspan baseline-shift="super" font-size="3px">360°</tspan>

</text>

</svg>

</div>

<li><a href="#" class="menu-link active" data-tab="projects">Projects</a></li>

<li><a href="#" class="menu-link" data-tab="coachings">Coachings</a></li>

<li><a href="#" class="menu-link" data-tab="call-model">Call Model</a></li>

<li><a href="#" class="menu-link" data-tab="drive-digital">Drive to Digital</a></li>

<li><a href="#" class="menu-link" data-tab="acquisitions">Acquisitions</a></li>

<li><a href="#" class="menu-link" data-tab="notes-reminders">Notes & Reminders</a></li>

</ul>

</div>

<svg

xmlns="http://www.w3.org/2000/svg"

fill="none"

viewBox="0 0 24 24"

class="sparkle"

<path

class="path"

stroke-linejoin="round"

stroke-linecap="round"

stroke="black"

fill="black"

d="M14.187 8.096L15 5.25L15.813 8.096C16.0231 8.83114 16.4171 9.50062 16.9577 10.0413C17.4984 10.5819 18.1679 10.9759 18.903 11.186L21.75 12L18.904 12.813C18.1689 13.0231 17.4994 13.4171 16.9587 13.9577C16.4181 14.4984 16.0241 15.1679 15.814 15.903L15 18.75L14.187 15.904C13.9769 15.1689 13.5829 14.4994 13.0423 13.9587C12.5016 13.4181 11.8321 13.0241 11.097 12.814L8.25 12L11.096 11.187C11.8311 10.9769 12.5006 10.5829 13.0413 10.0423C13.5819 9.50162 13.9759 8.83214 14.186 8.097L14.187 8.096Z"

></path>

<path

class="path"

stroke-linejoin="round"

stroke-linecap="round"

stroke="black"

fill="black"

d="M6 14.25L5.741 15.285C5.59267 15.8785 5.28579 16.4206 4.85319 16.8532C4.42059 17.2858 3.87853 17.5927 3.285 17.741L2.25 18L3.285 18.259C3.87853 18.4073 4.42059 18.7142 4.85319 19.1468C5.28579 19.5794 5.59267 20.1215 5.741 20.715L6 21.75L6.259 20.715C6.40725 20.1216 6.71398 19.5796 7.14639 19.147C7.5788 18.7144 8.12065 18.4075 8.714 18.259L9.75 18L8.714 17.741C8.12065 17.5925 7.5788 17.2856 7.14639 16.853C6.71398 16.4204 6.40725 15.8784 6.259 15.285L6 14.25Z"

></path>

<path

class="path"

stroke-linejoin="round"

stroke-linecap="round"

stroke="black"

fill="black"

d="M6.5 4L6.303 4.5915C6.24777 4.75718 6.15472 4.90774 6.03123 5.03123C5.90774 5.15472 5.75718 5.24777 5.5915 5.303L5 5.5L5.5915 5.697C5.75718 5.75223 5.90774 5.84528 6.03123 5.96877C6.15472 6.09226 6.24777 6.24282 6.303 6.4085L6.5 7L6.697 6.4085C6.75223 6.24282 6.84528 6.09226 6.96877 5.96877C7.09226 5.84528 7.24282 5.75223 7.4085 5.697L8 5.5L7.4085 5.303C7.24282 5.24777 7.09226 5.15472 6.96877 5.03123C6.84528 4.90774 6.75223 4.75718 6.697 4.5915L6.5 4Z"

></path>

</svg>

<span class="text_button">Parent Dashboard</span>

</button>

<p>iCare Assist</p>

</button>

</button>

<span>DGT (Disputes)</span>

</button>

<span>CM Blends</span>

</button>

</button>

</div>

<div class="card-title">Total Projects</div>

</div>

<div class="card-subtitle">Active & Completed</div>

↑ +0% from last month

</div>

<div class="card-title">Active Projects</div>

</div>

<div class="card-subtitle">In Progress</div>

↑ +0 this week

</div>

<div class="card-title">Coaching Sessions</div>

</div>

↑ +0% increase

</div>

<div class="card-title">Completion Rate</div>

</div>

<div class="card-subtitle">Overall Performance</div>

↑ Excellent

</div>

<div class="card-title">📊 Project Priority Distribution</div>

</div>

<span>High Priority</span>

<span id="highPriorityCount">0 projects</span>

</div>

</div>

<span>Medium Priority</span>

<span id="mediumPriorityCount">0 projects</span>

</div>

</div>

<span>Low Priority</span>

<span id="lowPriorityCount">0 projects</span>

</div>

</div>

</div>

<div class="card-title">📚 iCare Knowledge Base</div>

</div>

<span>Getting Started with Customer Care</span>

<span class="kb-badge">TOP VIEWED</span>

</div>

<span>👁️ 1,234 views</span>

<span>📅 Updated 2 days ago</span>

</div>

<span>Insurance Coordination Best Practices</span>

<span class="kb-badge">RECENT</span>

</div>

<span>👁️ 892 views</span>

<span>📅 Added 5 days ago</span>

</div>

<span>Follow Up Scheduling Guide</span>

<span class="kb-badge">TOP VIEWED</span>

</div>

<span>👁️ 756 views</span>

<span>📅 Updated 1 week ago</span>

</div>

<span>Account Records Management Tips</span>

<span class="kb-badge">RECENT</span>

</div>

<span>👁️ 623 views</span>

<span>📅 Added 3 days ago</span>

</div>

<div class="card-title">📈 Call Reasons (Last 30 Days)</div>

</div>

</div>

<div class="card-title">🎯 Project Status Overview</div>

</div>

</div>

<h2>Projects Management</h2>

<button class="btn btn-primary" onclick="openAddProjectModal()">+ Add New Project</button>

</div>

</div>

<h2>Coaching Performance Form</h2>

<div class="progress-label">CCP Details</div>

</div>

<div class="progress-label">Call Details</div>

</div>

<div class="progress-label">Analysis</div>

</div>

<div class="progress-label">ValGen</div>

</div>

<div class="progress-label">Observations</div>

</div>

<legend>👤 CCP Details</legend>

</div>

</div>

<label>CCP Email</label>

</div>

<label>CC Email</label>

</div>

<label>TL / Coach <span class="required">*</span></label>

<label for="tlCoach1">Team Leader</label>

</div>

<label for="tlCoach2">Coach</label>

</div>

</div>

<label for="figTier1">Ambassador SBS</label>

</div>

<label for="figTier2">Servicing DGT</label>

</div>

<label for="figTier3">Academy DGT</label>

</div>

<label for="figTier4">Elite SBS</label>

</div>

</fieldset>

<legend>📞 Call Details</legend>

<label>Interaction ID <span class="required">*</span></label>

</div>

<label>Token ID <span class="required">*</span></label>

</div>

<label>Call Timestamp <span class="required">*</span></label>

</div>

<label>Call Reason <span class="required">*</span></label>

</div>

</div>

</fieldset>

<legend>📊 VoCM Analysis</legend>

<label>CFR Analysis: CCP attained callback number? <span class="required">*</span></label>

</div>

</div>

</fieldset>

<legend>✅ ValGen Analysis</legend>

<label>Compliance & Quality - Case Type <span class="required">*</span></label>

</div>

</div>

</fieldset>

<legend>📝 Observation Remarks</legend>

<label>Observation Type <span class="required">*</span></label>

<label for="obsType1">Live listening</label>

</div>

<label for="obsType2">Remote call Listening</label>

</div>

</div>

<label>OneView Usage <span class="required">*</span></label>

</div>

</div>

</div>

<label>ValGen / RTF / CFR</label>

</div>

<label>CHT Duration</label>

</div>

<label>CHT Feedback</label>

</div>

</fieldset>

<button type="button" class="form-nav-btn btn-prev" id="prevBtn" onclick="changeStep(-1)">← Previous</button>

<button type="submit" class="form-nav-btn btn-submit" id="submitBtn" style="display: none;">Submit Form ✓</button>

</div>

</form>

</div>

<h2>Call Model</h2>

<p>Call Model section coming soon. This will include call tracking, analytics, and management features.</p>

</div>

<h2>Drive to Digital</h2>

<p>Drive to Digital transformation tracking section. This will include digital adoption metrics and progress tracking.</p>

</div>

<h2>Business Acquisitions Planning</h2>

<p>Strategic acquisitions planning and tracking section. This will include target companies, due diligence, and integration planning.</p>

</div>

<h2>Notes & Reminders</h2>

<h3>📝 Quick Notes</h3>

<button class="toolbar-btn" onclick="formatText('formatBlock', 'h3')">Heading</button>

</div>

</div>

<h3>⏰ Quick Reminders</h3>

</div>

</div>

<h2>🩺 iCare Assist</h2>

<p>Welcome to iCare Assist - Your healthcare support management system. Track Customer care, Follow Ups, and Account assistance programs.</p>

<h3>Key Features</h3>

<li>Customer Care Tracking</li>

<li>Follow Up Scheduling</li>

<li>Account Records Management</li>

<li>Insurance Coordination</li>

<li>Care Team Communication</li>

</ul>

</div>

<p>SBS Core - Centralized business systems and operations management platform for streamlined workflows.</p>

<h3>System Modules</h3>

<li>Operational Workflows</li>

<li>Resource Management</li>

<li>System Integration</li>

<li>Performance Analytics</li>

<li>Automation Tools</li>

</ul>

</div>

<h2>⚖️ DGT (Disputes)</h2>

<p>Dispute Management System - Efficiently handle and resolve customer disputes and conflicts.</p>

<h3>Dispute Resolution Tools</h3>

<li>Case Tracking</li>

<li>Documentation Management</li>

<li>Communication Portal</li>

<li>Resolution Timeline</li>

<li>Reporting & Analytics</li>

</ul>

</div>

<h2>🔄 CM Blends</h2>

<p>CM Blends - Customer Management integration and blending solutions for unified customer experience.</p>

<h3>Integration Features</h3>

<li>Multi-Channel Integration</li>

<li>Customer Data Unification</li>

<li>Experience Personalization</li>

<li>Journey Mapping</li>

<li>360° Customer View</li>

</ul>

</div>

<p>USPA - United States Postal Alliance operations and Communication & Correspondence management system.</p>

<h3>Postal Operations</h3>

<li>Mail Tracking & Routing</li>

<li>Delivery Management</li>

<li>Communication & Correspondence Coordination</li>

<li>Performance Metrics</li>

<li>Compliance Monitoring</li>

</ul>

</div>

<h3 id="modalTitle">Add New Project</h3>

</div>

<label>Project Name</label>

</div>

<label>Description</label>

</div>

</div>

<label>Priority</label>

<option value="Medium">Medium</option>

</select>

</div>

<button type="submit" class="btn btn-primary">Save Project</button>

</form>

</div>

<h4>Business Solutions</h4>

<ul>

<li><a href="#projects">Project Management</a></li>

<li><a href="#coachings">Coaching Programs</a></li>

<li><a href="#acquisitions">Acquisitions</a></li>

<li><a href="#notes-reminders">Notes & Reminders</a></li>

</ul>

</div>

<h4>Departments</h4>

<ul>

<li><a href="#icare">iCare Assist</a></li>

<li><a href="#dgt">DGT (Disputes)</a></li>

<li><a href="#cm">CM Blends</a></li>

</ul>

</div>

<h4>Resources</h4>

<ul>

<li><a href="#documentation">Documentation</a></li>

<li><a href="#support">Support Center</a></li>

<li><a href="#training">Training Materials</a></li>

<li><a href="#api">API Reference</a></li>

</ul>

</div>

<h4>Company</h4>

<ul>

<li><a href="#about">About Us</a></li>

<li><a href="#careers">Careers</a></li>

<li><a href="#contact">Contact</a></li>

<li><a href="#privacy">Privacy Policy</a></li>

</ul>

</div>

</div>

</footer>

<div class="notification-title">Reminder Alert!</div>

</div>

<button class="btn-dismiss" onclick="dismissNotification()">✕ Dismiss</button>

<button class="btn-snooze" onclick="toggleSnoozeOptions()">💤 Snooze</button>

<button class="btn-complete-reminder" onclick="completeFromNotification()">✓ Complete</button>

</div>

</div>

// Generate Geometric Background

function createGeometricShapes() {

const geometricBg = document.getElementById('geometricBg');

geometricBg.innerHTML = '';

// Create various geometric shapes

const shapes = ['geo-circle', 'geo-square', 'geo-triangle'];

const shapeCount = 15;

for (let i = 0; i < shapeCount; i++) {

const shape = document.createElement('div');

const shapeType = shapes[Math.floor(Math.random() * shapes.length)];

shape.className = `geo-shape ${shapeType}`;

// Random size

const size = Math.random() * 100 + 50;

if (shapeType !== 'geo-triangle') {

shape.style.width = size + 'px';

shape.style.height = size + 'px';

}

// Random position

shape.style.left = Math.random() * 100 + '%';

shape.style.top = Math.random() * 100 + '%';

// Random animation delay and duration

shape.style.animationDelay = Math.random() * 5 + 's';

shape.style.animationDuration = (Math.random() * 10 + 15) + 's';

geometricBg.appendChild(shape);

}

// Create floating particles

for (let i = 0; i < 20; i++) {

const particle = document.createElement('div');

particle.className = 'particle';

const size = Math.random() * 5 + 2;

particle.style.width = size + 'px';

particle.style.height = size + 'px';

particle.style.left = Math.random() * 100 + '%';

particle.style.bottom = '-10px';

particle.style.animationDelay = Math.random() * 10 + 's';

particle.style.animationDuration = (Math.random() * 10 + 10) + 's';

geometricBg.appendChild(particle);

}

// Initialize geometric shapes

createGeometricShapes();

// Department Menu Functionality

const deptButtons = document.querySelectorAll('.dept-btn');

deptButtons.forEach(btn => {

btn.addEventListener('click', function() {

const tabId = this.getAttribute('data-tab');

// Remove active class from all department buttons

deptButtons.forEach(b => b.classList.remove('active'));

// Add active class to clicked button

this.classList.add('active');

// Get current active tab

const currentTab = document.querySelector('.tab-content.active');

// Add slide-out animation to current tab

if (currentTab) {

currentTab.classList.add('slide-out');

// Wait for animation to complete before switching (800ms for smoother card flip)

setTimeout(() => {

currentTab.classList.remove('active', 'slide-out');

// Show selected tab with card flip animation

const newTab = document.getElementById(tabId);

if (newTab) {

newTab.classList.add('active');

// Also update sidebar menu if it's a main tab

document.querySelectorAll('.menu-link').forEach(l => l.classList.remove('active'));

}

}, 800);

} else {

// If no current tab, just show the selected one

const newTab = document.getElementById(tabId);

if (newTab) {

newTab.classList.add('active');

}

});

// Go to Top Functionality

const goToTopBtn = document.getElementById('goToTop');

window.addEventListener('scroll', () => {

if (window.pageYOffset > 300) {

goToTopBtn.classList.add('visible');

} else {

goToTopBtn.classList.remove('visible');

}

});

function scrollToTop() {

window.scrollTo({

top: 0,

behavior: 'smooth'

});

}

// Data Storage

let projects = JSON.parse(localStorage.getItem('projects')) || [];

let coachings = JSON.parse(localStorage.getItem('coachings')) || [];

let notes = JSON.parse(localStorage.getItem('notes')) || [];

let reminders = JSON.parse(localStorage.getItem('reminders')) || [];

let activeReminderId = null;

let reminderCheckInterval = null;

// Request notification permission

if ('Notification' in window && Notification.permission === 'default') {

Notification.requestPermission();

}

// ===== COACHING FORM DATA =====

// Sample CCP Dataset (10 employees)

const ccpData = [

{ psid: 'PS001', name: 'John Smith', email: '[email protected]' },

{ psid: 'PS002', name: 'Sarah Johnson', email: '[email protected]' },

{ psid: 'PS003', name: 'Michael Brown', email: '[email protected]' },

{ psid: 'PS004', name: 'Emily Davis', email: '[email protected]' },

{ psid: 'PS005', name: 'David Wilson', email: '[email protected]' },

{ psid: 'PS006', name: 'Lisa Anderson', email: '[email protected]' },

{ psid: 'PS007', name: 'James Martinez', email: '[email protected]' },

{ psid: 'PS008', name: 'Jennifer Taylor', email: '[email protected]' },

{ psid: 'PS009', name: 'Robert Thomas', email: '[email protected]' },

{ psid: 'PS010', name: 'Maria Garcia', email: '[email protected]' }

];

// Call Reasons

const callReasons = [

'Account Inquiry', 'Billing Issue', 'Technical Support', 'Order Status',

'Product Information', 'Complaint Resolution', 'Return Request', 'Password Reset',

'Service Activation', 'Payment Issue', 'Feature Request', 'General Support',

'Cancellation Request', 'Upgrade Inquiry', 'Feedback', 'Emergency Support'

];

// Case Types

const caseTypes = [

'First Contact Resolution', 'Follow-up Required', 'Escalation', 'Technical Issue',

'Billing Dispute', 'Service Request', 'Complaint', 'Information Request',

'Account Update', 'Order Modification', 'Refund Request', 'Quality Check'

];

// ===== FORM MULTI-STEP FUNCTIONALITY =====

let currentStep = 1;

const totalSteps = 5;

function changeStep(direction) {

const currentFieldset = document.querySelector(`.form-fieldset[data-step="${currentStep}"]`);

// Validate current step before moving forward

if (direction === 1) {

const inputs = currentFieldset.querySelectorAll('input[required], select[required], textarea[required]');

let isValid = true;

inputs.forEach(input => {

if (input.type === 'radio') {

const radioGroup = currentFieldset.querySelectorAll(`input[name="${input.name}"]`);

const isChecked = Array.from(radioGroup).some(radio => radio.checked);

if (!isChecked) {

isValid = false;

input.closest('.form-field').style.border = '2px solid #ff6b6b';

setTimeout(() => {

input.closest('.form-field').style.border = 'none';

}, 2000);

}

} else if (!input.value.trim()) {

isValid = false;

input.style.borderColor = '#ff6b6b';

setTimeout(() => {

input.style.borderColor = 'transparent';

}, 2000);

}

});

if (!isValid) {

alert('Please fill in all required fields before proceeding.');

return;

}

// Update step

currentStep += direction;

if (currentStep < 1) currentStep = 1;

if (currentStep > totalSteps) currentStep = totalSteps;

// Update UI

updateFormUI();

}

function updateFormUI() {

// Hide all fieldsets

document.querySelectorAll('.form-fieldset').forEach(fieldset => {

fieldset.classList.remove('active');

});

// Show current fieldset

document.querySelector(`.form-fieldset[data-step="${currentStep}"]`).classList.add('active');

// Update progress

document.querySelectorAll('.progress-step').forEach((step, index) => {

step.classList.remove('active', 'completed');

if (index + 1 < currentStep) {

step.classList.add('completed');

} else if (index + 1 === currentStep) {

step.classList.add('active');

}

});

// Update progress line

const progress = ((currentStep - 1) / (totalSteps - 1)) * 100;

document.getElementById('progressLine').style.width = progress + '%';

// Update buttons

document.getElementById('prevBtn').style.display = currentStep === 1 ? 'none' : 'block';

document.getElementById('nextBtn').style.display = currentStep === totalSteps ? 'none' : 'block';

document.getElementById('submitBtn').style.display = currentStep === totalSteps ? 'block' : 'none';

}

// ===== PSID AUTOCOMPLETE =====

const psidInput = document.getElementById('psid');

const psidAutocomplete = document.getElementById('psidAutocomplete');

psidInput.addEventListener('input', function() {

const value = this.value.toLowerCase();

psidAutocomplete.innerHTML = '';

if (value.length === 0) {

psidAutocomplete.classList.remove('active');

return;

}

const matches = ccpData.filter(ccp =>

ccp.psid.toLowerCase().includes(value) ||

ccp.name.toLowerCase().includes(value)

);

if (matches.length > 0) {

matches.forEach(match => {

const item = document.createElement('div');

item.className = 'autocomplete-item';

item.textContent = `${match.psid} - ${match.name}`;

item.onclick = function() {

selectCCP(match);

};

psidAutocomplete.appendChild(item);

});

psidAutocomplete.classList.add('active');

} else {

psidAutocomplete.classList.remove('active');

}

});

function selectCCP(ccp) {

document.getElementById('psid').value = ccp.psid;

document.getElementById('ccpName').value = ccp.name;

document.getElementById('ccpEmail').value = ccp.email;

psidAutocomplete.classList.remove('active');

}

// ===== SEARCHABLE SELECT - CALL REASON =====

const callReasonSearch = document.getElementById('callReasonSearch');

const callReasonDropdown = document.getElementById('callReasonDropdown');

callReasonSearch.addEventListener('focus', function() {

renderCallReasons('');

});

callReasonSearch.addEventListener('input', function() {

renderCallReasons(this.value.toLowerCase());

});

function renderCallReasons(filter) {

callReasonDropdown.innerHTML = '';

const filtered = callReasons.filter(reason => reason.toLowerCase().includes(filter));

filtered.forEach(reason => {

const option = document.createElement('div');

option.className = 'select-option';

option.textContent = reason;

option.onclick = function() {

callReasonSearch.value = reason;

document.getElementById('callReason').value = reason;

callReasonDropdown.classList.remove('active');

};

callReasonDropdown.appendChild(option);

});

callReasonDropdown.classList.add('active');

}

// ===== SEARCHABLE SELECT - CASE TYPE =====

const caseTypeSearch = document.getElementById('caseTypeSearch');

const caseTypeDropdown = document.getElementById('caseTypeDropdown');

caseTypeSearch.addEventListener('focus', function() {

renderCaseTypes('');

});

caseTypeSearch.addEventListener('input', function() {

renderCaseTypes(this.value.toLowerCase());

});

function renderCaseTypes(filter) {

caseTypeDropdown.innerHTML = '';

const filtered = caseTypes.filter(type => type.toLowerCase().includes(filter));

filtered.forEach(type => {

const option = document.createElement('div');

option.className = 'select-option';

option.textContent = type;

option.onclick = function() {

caseTypeSearch.value = type;

document.getElementById('caseType').value = type;

caseTypeDropdown.classList.remove('active');

};

caseTypeDropdown.appendChild(option);

});

caseTypeDropdown.classList.add('active');

}

// Close dropdowns when clicking outside

document.addEventListener('click', function(e) {

if (!e.target.closest('.select-wrapper')) {

document.querySelectorAll('.select-dropdown').forEach(dropdown => {

dropdown.classList.remove('active');

});

}

if (!e.target.closest('#psid')) {

psidAutocomplete.classList.remove('active');

}

});

// ===== FORM SUBMISSION =====

document.getElementById('coachingPerformanceForm').addEventListener('submit', function(e) {

e.preventDefault();

const formData = new FormData(this);

const data = Object.fromEntries(formData.entries());

// Add hidden fields

data.callReason = document.getElementById('callReason').value;

data.caseType = document.getElementById('caseType').value;

data.submittedAt = new Date().toISOString();

console.log('Form Data:', data);

// Save to localStorage for dashboard tracking

const coachingForms = JSON.parse(localStorage.getItem('coachingForms')) || [];

coachingForms.push(data);

localStorage.setItem('coachingForms', JSON.stringify(coachingForms));

// Send to Microsoft 365 Sheet via Power Automate

sendToM365(data);

});

// ===== MICROSOFT 365 INTEGRATION =====

async function sendToM365(formData) {

// Replace this URL with your Power Automate webhook URL

const POWER_AUTOMATE_URL = 'YOUR_POWER_AUTOMATE_WEBHOOK_URL_HERE';

// Show loading state

const submitBtn = document.getElementById('submitBtn');

const originalText = submitBtn.textContent;

submitBtn.textContent = 'Submitting...';

submitBtn.disabled = true;

try {

const response = await fetch(POWER_AUTOMATE_URL, {

method: 'POST',

headers: {

'Content-Type': 'application/json',

body: JSON.stringify(formData)

});

if (response.ok) {

// Success

alert('✅ Form submitted successfully!\n\nData has been sent to Microsoft 365 Excel.');

// Reset form

document.getElementById('coachingPerformanceForm').reset();

currentStep = 1;

updateFormUI();

// Update dashboard with new data

updateDashboard();

} else {

throw new Error('Submission failed');

}

} catch (error) {

console.error('Error submitting to M365:', error);

alert('❌ Error submitting form.\n\nPlease check your connection and try again.\n\nError: ' + error.message);

} finally {

// Reset button

submitBtn.textContent = originalText;

submitBtn.disabled = false;

}

// ===== ALTERNATIVE: Microsoft Graph API Integration =====

// Uncomment and configure if you want to use Graph API instead

async function sendToM365GraphAPI(formData) {

const CLIENT_ID = 'YOUR_CLIENT_ID';

const TENANT_ID = 'YOUR_TENANT_ID';

const WORKBOOK_ID = 'YOUR_WORKBOOK_ID';

const WORKSHEET_NAME = 'Sheet1';

// You'll need to implement authentication first

// This is more complex and requires OAuth 2.0 flow

const accessToken = await getAccessToken(); // Implement this

const values = [[

formData.psid,

formData.ccpName,

formData.ccpEmail,

formData.ccEmail,

formData.tlCoach,

formData.figTier,

formData.interactionId,

formData.tokenId,

formData.callTimestamp,

formData.callReason,

formData.cfrAnalysis,

formData.caseType,

formData.observationType,

formData.oneViewUsage,

formData.valgenRtfCfr,

formData.chtDuration,

formData.chtFeedback,

formData.submittedAt

]];

const response = await fetch(

`https://graph.microsoft.com/v1.0/me/drive/items/${WORKBOOK_ID}/workbook/worksheets/${WORKSHEET_NAME}/tables/Table1/rows/add`,

{

method: 'POST',

headers: {

'Authorization': `Bearer ${accessToken}`,

'Content-Type': 'application/json'

body: JSON.stringify({ values })

}

);

return response;

}

// Theme Toggle

function toggleTheme() {

const body = document.body;

const icon = document.getElementById('theme-icon');

if (body.classList.contains('light-theme')) {

body.classList.remove('light-theme');

body.classList.add('dark-theme');

icon.textContent = '☀️';

localStorage.setItem('theme', 'dark');

} else {

body.classList.remove('dark-theme');

body.classList.add('light-theme');

icon.textContent = '🌙';

localStorage.setItem('theme', 'light');

}

// Load saved theme

window.addEventListener('DOMContentLoaded', () => {

const savedTheme = localStorage.getItem('theme') || 'light';

const body = document.body;

const icon = document.getElementById('theme-icon');

if (savedTheme === 'dark') {

body.classList.remove('light-theme');

body.classList.add('dark-theme');

icon.textContent = '☀️';

}

loadProjects();

loadCoachings();

loadNotes();

loadReminders();

startReminderChecker();

updateDashboard();

});

// ===== DASHBOARD FUNCTIONALITY =====

let priorityChart, coachingChart, statusChart;

function updateDashboard() {

updateStats();

updatePriorityDistribution();

renderCharts();

}

function updateStats() {

// Total Projects

const totalProjects = projects.length;

document.getElementById('totalProjects').textContent = totalProjects;

// Active Projects (not completed)

const activeProjects = projects.filter(p => !p.completed).length;

document.getElementById('activeProjects').textContent = activeProjects;

// Coaching Sessions (last 30 days)

const thirtyDaysAgo = new Date();

thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);

const recentCoaching = coachings.filter(c => new Date(c.timestamp) >= thirtyDaysAgo).length;

document.getElementById('totalCoaching').textContent = recentCoaching;

// Completion Rate

const completedProjects = projects.filter(p => p.completed).length;

const completionRate = totalProjects > 0 ? Math.round((completedProjects / totalProjects) * 100) : 0;

document.getElementById('completionRate').textContent = completionRate + '%';

}

function updatePriorityDistribution() {

const high = projects.filter(p => p.priority === 'High').length;

const medium = projects.filter(p => p.priority === 'Medium').length;

const low = projects.filter(p => p.priority === 'Low').length;

const total = projects.length || 1;

document.getElementById('highPriorityCount').textContent = `${high} project${high !== 1 ? 's' : ''}`;

document.getElementById('mediumPriorityCount').textContent = `${medium} project${medium !== 1 ? 's' : ''}`;

document.getElementById('lowPriorityCount').textContent = `${low} project${low !== 1 ? 's' : ''}`;

setTimeout(() => {

document.getElementById('highPriorityBar').style.width = (high / total * 100) + '%';

document.getElementById('mediumPriorityBar').style.width = (medium / total * 100) + '%';

document.getElementById('lowPriorityBar').style.width = (low / total * 100) + '%';

}, 100);

}

function renderCharts() {

// Priority Doughnut Chart

const priorityCtx = document.getElementById('priorityChart');

if (priorityChart) priorityChart.destroy();

const high = projects.filter(p => p.priority === 'High').length;

const medium = projects.filter(p => p.priority === 'Medium').length;

const low = projects.filter(p => p.priority === 'Low').length;

priorityChart = new Chart(priorityCtx, {

type: 'doughnut',

data: {

labels: ['High Priority', 'Medium Priority', 'Low Priority'],

datasets: [{

data: [high, medium, low],

backgroundColor: [

'rgba(255, 107, 107, 0.8)',

'rgba(255, 165, 2, 0.8)',

'rgba(81, 207, 102, 0.8)'

borderWidth: 0

}]

options: {

responsive: true,

maintainAspectRatio: false,

plugins: {

legend: {

position: 'bottom',

labels: {

color: document.body.classList.contains('dark-theme') ? '#e0e0e0' : '#1a1a1a',

padding: 15,

font: { size: 12 }

}

});

// Coaching Line Chart (Call Reasons - Last 30 days)

const coachingCtx = document.getElementById('coachingChart');

if (coachingChart) coachingChart.destroy();

// Get coaching forms from last 30 days

const thirtyDaysAgo = new Date();

thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);

// Store submitted coaching forms (will be populated when form is submitted)

const submittedForms = JSON.parse(localStorage.getItem('coachingForms')) || [];

// Count call reasons from submitted forms

const callReasonCounts = {};

submittedForms.forEach(form => {

if (form.callReason) {

callReasonCounts[form.callReason] = (callReasonCounts[form.callReason] || 0) + 1;

}

});

// Get top 5 call reasons

const sortedReasons = Object.entries(callReasonCounts)

.sort((a, b) => b[1] - a[1])

.slice(0, 5);

const labels = sortedReasons.length > 0

? sortedReasons.map(r => r[0])

: ['Account Inquiry', 'Technical Support', 'Billing Issue', 'Product Info', 'General Support'];

const data = sortedReasons.length > 0

? sortedReasons.map(r => r[1])

: [5, 8, 3, 6, 4]; // Sample data when no forms submitted

coachingChart = new Chart(coachingCtx, {

type: 'bar',

data: {

labels: labels,

datasets: [{

label: 'Number of Calls',

data: data,

backgroundColor: 'rgba(0, 212, 255, 0.8)',

borderRadius: 8,

barThickness: 40

}]

options: {

responsive: true,

maintainAspectRatio: false,

indexAxis: 'y',

plugins: {

legend: {

display: false

tooltip: {

callbacks: {

label: function(context) {

return context.parsed.x + ' call' + (context.parsed.x !== 1 ? 's' : '');

}

scales: {

x: {

beginAtZero: true,

ticks: {

color: document.body.classList.contains('dark-theme') ? '#e0e0e0' : '#1a1a1a',

stepSize: 1

grid: {

color: 'rgba(128, 128, 128, 0.1)'

}

y: {

ticks: {

color: document.body.classList.contains('dark-theme') ? '#e0e0e0' : '#1a1a1a'

grid: {

display: false

}

});

// Status Bar Chart

const statusCtx = document.getElementById('statusChart');

if (statusChart) statusChart.destroy();

const activeCount = projects.filter(p => !p.completed).length;

const completedCount = projects.filter(p => p.completed).length;

statusChart = new Chart(statusCtx, {

type: 'bar',

data: {

labels: ['Active', 'Completed'],

datasets: [{

label: 'Projects',

data: [activeCount, completedCount],

backgroundColor: [

'rgba(0, 212, 255, 0.8)',

'rgba(81, 207, 102, 0.8)'

borderRadius: 10

}]

options: {

responsive: true,

maintainAspectRatio: false,

plugins: {

legend: {

display: false

}

scales: {

y: {

beginAtZero: true,

ticks: {

color: document.body.classList.contains('dark-theme') ? '#e0e0e0' : '#1a1a1a',

stepSize: 1

grid: {

color: 'rgba(128, 128, 128, 0.1)'

}

x: {

ticks: {

color: document.body.classList.contains('dark-theme') ? '#e0e0e0' : '#1a1a1a'

grid: {

display: false

}

});

}

// Update dashboard when projects change

function loadProjects() {

const container = document.getElementById('projectList');

if (projects.length === 0) {

container.innerHTML = '<p>No projects yet. Click "Add New Project" to get started!</p>';

} else {

container.innerHTML = projects.map(project => `

<div>

<strong>${project.name}</strong> - ${project.priority} Priority

<br>

<small>${project.description}</small>

<br>

<small>Due: ${project.dueDate}</small>

</div>

${project.completed ? '↩️' : '✓'}

</button>

<button class="btn-delete" onclick="deleteProject('${project.id}')">Delete</button>

</div>

`).join('');

}

updateDashboard();

}

// Tab Navigation

document.querySelectorAll('.menu-link').forEach(link => {

link.addEventListener('click', (e) => {

e.preventDefault();

const tabId = link.getAttribute('data-tab');

// Remove active from department buttons

deptButtons.forEach(b => b.classList.remove('active'));

// Get current active tab

const currentTab = document.querySelector('.tab-content.active');

// Add slide-out animation to current tab

if (currentTab) {

currentTab.classList.add('slide-out');

// Wait for animation to complete before switching (800ms for smoother transition)

setTimeout(() => {

currentTab.classList.remove('active', 'slide-out');

// Show selected tab with card flip animation

const newTab = document.getElementById(tabId);

newTab.classList.add('active');

}, 800);

} else {

// If no current tab, just show the selected one

document.getElementById(tabId).classList.add('active');

}

// Update active menu

document.querySelectorAll('.menu-link').forEach(l => l.classList.remove('active'));

link.classList.add('active');

});

// Real-time Search

document.getElementById('searchBar').addEventListener('input', (e) => {

const query = e.target.value.toLowerCase().trim();

const resultsContainer = document.getElementById('searchResults');

if (query.length === 0) {

resultsContainer.classList.remove('active');

return;

}

const results = [];

// Search Projects

projects.forEach(project => {

if (project.name.toLowerCase().includes(query) ||

project.description.toLowerCase().includes(query)) {

results.push({

section: 'Projects',

title: project.name,

content: project.description,

tab: 'projects'

});

}

});

// Search Coachings

coachings.forEach(coaching => {

if (coaching.personFilling.toLowerCase().includes(query) ||

coaching.coachingFor.toLowerCase().includes(query) ||

coaching.topic.toLowerCase().includes(query)) {

results.push({

section: 'Coachings',

title: `${coaching.personFilling} → ${coaching.coachingFor}`,

content: coaching.topic,

tab: 'coachings'

});

}

});

// Search Notes

notes.forEach(note => {

const textContent = note.content.replace(/<[^>]*>/g, '');

if (textContent.toLowerCase().includes(query)) {

results.push({

section: 'Notes',

title: 'Note',

content: textContent.substring(0, 100) + '...',

tab: 'notes-reminders'

});

}

});

// Search Reminders

reminders.forEach(reminder => {

if (reminder.text.toLowerCase().includes(query)) {

results.push({

section: 'Reminders',

title: reminder.text,

content: new Date(reminder.dateTime).toLocaleString(),

tab: 'notes-reminders'

});

}

});

// Search Call Model Tab

if ('call model'.includes(query) || 'call tracking'.includes(query) || 'analytics'.includes(query)) {

results.push({

section: 'Call Model',

title: 'Call Model Section',

content: 'Call tracking, analytics, and management features',

tab: 'call-model'

});

}

// Search Drive to Digital Tab

if ('drive to digital'.includes(query) || 'digital'.includes(query) || 'transformation'.includes(query)) {

results.push({

section: 'Drive to Digital',

title: 'Drive to Digital Section',

content: 'Digital transformation tracking and progress metrics',

tab: 'drive-digital'

});

}

// Search Acquisitions Tab

if ('acquisitions'.includes(query) || 'business'.includes(query) || 'planning'.includes(query)) {

results.push({

section: 'Acquisitions',

title: 'Business Acquisitions Planning',

content: 'Strategic acquisitions planning and tracking',

tab: 'acquisitions'

});

}

// Search iCare Assist Tab

if ('icare'.includes(query) || 'healthcare'.includes(query) || 'Customer'.includes(query) ||

'Account'.includes(query) || 'Follow Up'.includes(query) || 'care'.includes(query)) {

results.push({

section: 'iCare Assist',

title: 'iCare Assist - Healthcare Support',

content: 'Customer care tracking, Follow Ups, and Account assistance',

tab: 'icare-assist'

});

}

// Search SBS Core Tab

if ('sbs'.includes(query) || 'core'.includes(query) || 'operations'.includes(query) ||

'workflow'.includes(query) || 'system'.includes(query)) {

results.push({

section: 'SBS Core',

title: 'SBS Core - Business Systems',

content: 'Centralized business systems and operations management',

tab: 'sbs-core'

});

}

// Search DGT Disputes Tab

if ('dgt'.includes(query) || 'dispute'.includes(query) || 'resolution'.includes(query) ||

'case'.includes(query) || 'conflict'.includes(query)) {

results.push({

section: 'DGT (Disputes)',

title: 'DGT - Dispute Management',

content: 'Efficiently handle and resolve customer disputes',

tab: 'dgt-disputes'

});

}

// Search CM Blends Tab

if ('cm'.includes(query) || 'blend'.includes(query) || 'customer management'.includes(query) ||

'integration'.includes(query) || 'experience'.includes(query)) {

results.push({

section: 'CM Blends',

title: 'CM Blends - Customer Management',

content: 'Customer management integration and unified experience',

tab: 'cm-blends'

});

}

// Search USPA Tab

if ('uspa'.includes(query) || 'postal'.includes(query) || 'mail'.includes(query) ||

'delivery'.includes(query) || 'Communication & Correspondence'.includes(query)) {

results.push({

section: 'USPA',

title: 'USPA - Postal Alliance',

content: 'United States Postal Alliance operations and Communication & Correspondence',

tab: 'uspa'

});

}

// Display results

if (results.length > 0) {

resultsContainer.innerHTML = results.map(result => `

<div class="search-result-section">${result.section}</div>

<div class="search-result-title">${result.title}</div>

<div>${result.content}</div>

</div>

`).join('');

resultsContainer.classList.add('active');

} else {

resultsContainer.innerHTML = '<div class="search-result-item">No results found</div>';

resultsContainer.classList.add('active');

}

});

function navigateToTab(tabId) {

// Close search results

document.getElementById('searchResults').classList.remove('active');

// Check if it's a department tab or sidebar tab

const isDepartmentTab = ['icare-assist', 'sbs-core', 'dgt-disputes', 'cm-blends', 'uspa'].includes(tabId);

if (isDepartmentTab) {

// Click the corresponding department button

const deptBtn = document.querySelector(`[data-tab="${tabId}"]`);

if (deptBtn) {

deptBtn.click();

}

} else {

// Click the corresponding sidebar menu link

const menuLink = document.querySelector(`.menu-link[data-tab="${tabId}"]`);

if (menuLink) {

menuLink.click();

}

// Accordion Toggle

function toggleAccordion(header) {

const content = header.nextElementSibling;

const arrow = header.querySelector('span:last-child');

content.classList.toggle('active');

arrow.textContent = content.classList.contains('active') ? '▲' : '▼';

}

// Projects Management

function openAddProjectModal() {

document.getElementById('modalTitle').textContent = 'Add New Project';

document.getElementById('projectForm').reset();

document.getElementById('projectId').value = '';

document.getElementById('projectModal').classList.add('active');

}

function closeProjectModal() {

document.getElementById('projectModal').classList.remove('active');

}

function editProject(id) {

const project = projects.find(p => p.id === id);

if (project) {

document.getElementById('modalTitle').textContent = 'Edit Project';

document.getElementById('projectId').value = project.id;

document.getElementById('projectName').value = project.name;

document.getElementById('projectDescription').value = project.description;

document.getElementById('projectDueDate').value = project.dueDate;

document.getElementById('projectPriority').value = project.priority;

document.getElementById('projectModal').classList.add('active');

}

function deleteProject(id) {

if (confirm('Are you sure you want to delete this project?')) {

projects = projects.filter(p => p.id !== id);

localStorage.setItem('projects', JSON.stringify(projects));

loadProjects();

}

function toggleComplete(id) {

const project = projects.find(p => p.id === id);

if (project) {

project.completed = !project.completed;

localStorage.setItem('projects', JSON.stringify(projects));

loadProjects();

}

document.getElementById('projectForm').addEventListener('submit', (e) => {

e.preventDefault();

const id = document.getElementById('projectId').value || Date.now().toString();

const project = {

id,

name: document.getElementById('projectName').value,

description: document.getElementById('projectDescription').value,

dueDate: document.getElementById('projectDueDate').value,

priority: document.getElementById('projectPriority').value,

completed: projects.find(p => p.id === id)?.completed || false

};

if (document.getElementById('projectId').value) {

projects = projects.map(p => p.id === id ? project : p);

} else {

projects.push(project);

}

localStorage.setItem('projects', JSON.stringify(projects));

loadProjects();

closeProjectModal();

});

function loadProjects() {

const container = document.getElementById('projectList');

if (projects.length === 0) {

container.innerHTML = '<p>No projects yet. Click "Add New Project" to get started!</p>';

return;

}

container.innerHTML = projects.map(project => `

<div>

<strong>${project.name}</strong> - ${project.priority} Priority

<br>

<small>${project.description}</small>

<br>

<small>Due: ${project.dueDate}</small>

</div>

${project.completed ? '↩️' : '✓'}

</button>

<button class="btn-delete" onclick="deleteProject('${project.id}')">Delete</button>

</div>

`).join('');

}

// Coaching Form

document.getElementById('coachingForm').addEventListener('submit', (e) => {

e.preventDefault();

const coaching = {

id: Date.now().toString(),

personFilling: document.getElementById('personFilling').value,

coachingFor: document.getElementById('coachingFor').value,

date: document.getElementById('coachingDate').value,

topic: document.getElementById('sessionTopic').value,

takeaways: document.getElementById('keyTakeaways').value,

actionItems: document.getElementById('actionItems').value,

status: 'Completed'

};

coachings.push(coaching);

localStorage.setItem('coachings', JSON.stringify(coachings));

document.getElementById('coachingForm').reset();

loadCoachings();

alert('Coaching form submitted successfully!');

});

function loadCoachings() {

const tbody = document.getElementById('coachingTableBody');

// Filter for current month

const currentMonth = new Date().getMonth();

const currentYear = new Date().getFullYear();

const monthCoachings = coachings.filter(c => {

const coachingDate = new Date(c.date);

return coachingDate.getMonth() === currentMonth &&

coachingDate.getFullYear() === currentYear;

});

if (monthCoachings.length === 0) {

tbody.innerHTML = '<tr><td colspan="5">No coaching records for this month</td></tr>';

return;

}

tbody.innerHTML = monthCoachings.map(coaching => `

<tr>

<td>${coaching.personFilling}</td>

<td>${coaching.coachingFor}</td>

<td>${coaching.date}</td>

<td>${coaching.topic}</td>

<td>${coaching.status}</td>

</tr>

`).join('');

}

// Close modal on outside click

window.addEventListener('click', (e) => {

if (e.target.classList.contains('modal')) {

closeProjectModal();

}

});

// ===== NOTES & REMINDERS FUNCTIONALITY =====

// WYSIWYG Editor Functions

function formatText(command, value = null) {

document.execCommand(command, false, value);

document.getElementById('noteEditor').focus();

}

function saveNote() {

const editor = document.getElementById('noteEditor');

const content = editor.innerHTML.trim();

if (!content || content === '<br>') {

alert('Please write something in your note!');

return;

}

const note = {

id: Date.now().toString(),

content: content,

timestamp: new Date().toISOString()

};

notes.unshift(note);

localStorage.setItem('notes', JSON.stringify(notes));

editor.innerHTML = '';

loadNotes();

}

function loadNotes() {

const container = document.getElementById('notesContainer');

if (notes.length === 0) {

container.innerHTML = '<p style="text-align: center; opacity: 0.6; margin-top: 30px;">No notes yet. Create your first note above!</p>';

return;

}

container.innerHTML = notes.map(note => `

<div class="note-timestamp">${new Date(note.timestamp).toLocaleString()}</div>

<div class="note-content">${note.content}</div>

<button onclick="deleteNote('${note.id}')" style="background: #ff6b6b; color: white;">🗑️ Delete</button>

</div>

`).join('');

}

function editNote(id) {

const note = notes.find(n => n.id === id);

if (note) {

const editor = document.getElementById('noteEditor');

editor.innerHTML = note.content;

editor.focus();

deleteNote(id);

}

function deleteNote(id) {

if (confirm('Are you sure you want to delete this note?')) {

notes = notes.filter(n => n.id !== id);

localStorage.setItem('notes', JSON.stringify(notes));

loadNotes();

}

// Reminder Functions

function addReminder() {

const text = document.getElementById('reminderText').value.trim();

const dateTime = document.getElementById('reminderDateTime').value;

if (!text) {

alert('Please enter reminder text!');

return;

}

if (!dateTime) {

alert('Please select date and time!');

return;

}

const reminderDate = new Date(dateTime);

const now = new Date();

if (reminderDate <= now) {

alert('Please select a future date and time!');

return;

}

const reminder = {

id: Date.now().toString(),

text: text,

dateTime: dateTime,

timestamp: new Date().toISOString(),

completed: false,

notified: false

};

reminders.unshift(reminder);

localStorage.setItem('reminders', JSON.stringify(reminders));

document.getElementById('reminderText').value = '';

document.getElementById('reminderDateTime').value = '';

loadReminders();

}

function loadReminders() {

const container = document.getElementById('remindersContainer');

if (reminders.length === 0) {

container.innerHTML = '<p style="text-align: center; opacity: 0.8; margin-top: 30px;">No reminders yet. Add your first reminder above!</p>';

return;

}

container.innerHTML = reminders.map(reminder => `

<div class="note-timestamp">Created: ${new Date(reminder.timestamp).toLocaleString()}</div>

<div class="reminder-text" style="font-size: 15px; font-weight: 600; margin: 10px 0;">${reminder.text}</div>

<div class="reminder-datetime">⏰ ${new Date(reminder.dateTime).toLocaleString()}</div>

${reminder.completed ? '<div style="font-weight: 600; color: #51cf66;">✓ Completed</div>' : ''}

${!reminder.completed ? `<button onclick="markReminderComplete('${reminder.id}')" style="background: #51cf66; color: white;">✓ Complete</button>` : ''}

<button onclick="deleteReminder('${reminder.id}')" style="background: #ff6b6b; color: white;">🗑️ Delete</button>

</div>

`).join('');

}

function markReminderComplete(id) {

const reminder = reminders.find(r => r.id === id);

if (reminder) {

reminder.completed = true;

localStorage.setItem('reminders', JSON.stringify(reminders));

loadReminders();

}

function deleteReminder(id) {

if (confirm('Are you sure you want to delete this reminder?')) {

reminders = reminders.filter(r => r.id !== id);

localStorage.setItem('reminders', JSON.stringify(reminders));

loadReminders();

}

// Reminder Checker - runs every minute

function startReminderChecker() {

// Check immediately

checkReminders();

// Then check every 30 seconds

reminderCheckInterval = setInterval(checkReminders, 30000);

}

function checkReminders() {

const now = new Date();

reminders.forEach(reminder => {

if (reminder.completed || reminder.notified) return;

const reminderTime = new Date(reminder.dateTime);

const timeDiff = reminderTime - now;

const fiveMinutes = 5 * 60 * 1000;

// Show notification 5 minutes before

if (timeDiff > 0 && timeDiff <= fiveMinutes) {

showReminderNotification(reminder);

reminder.notified = true;

localStorage.setItem('reminders', JSON.stringify(reminders));

}

});

}

function showReminderNotification(reminder) {

activeReminderId = reminder.id;

// Browser notification

if ('Notification' in window && Notification.permission === 'granted') {

new Notification('Reminder Alert! 🔔', {

body: reminder.text,

icon: '🔔',

requireInteraction: true

});

}

// Show popup

const popup = document.getElementById('notificationPopup');

document.getElementById('notificationTime').textContent = `Scheduled for: ${new Date(reminder.dateTime).toLocaleString()}`;

document.getElementById('notificationMessage').textContent = reminder.text;

popup.style.display = 'block';

popup.classList.remove('hide');

}

function dismissNotification() {

const popup = document.getElementById('notificationPopup');

popup.classList.add('hide');

setTimeout(() => {

popup.style.display = 'none';

popup.classList.remove('hide');

}, 300);

activeReminderId = null;

}

function toggleSnoozeOptions() {

const snoozeOptions = document.getElementById('snoozeOptions');

snoozeOptions.classList.toggle('active');

}

function snoozeReminder(minutes) {

if (!activeReminderId) return;

const reminder = reminders.find(r => r.id === activeReminderId);

if (reminder) {

const newDateTime = new Date(new Date(reminder.dateTime).getTime() + minutes * 60000);

reminder.dateTime = newDateTime.toISOString().slice(0, 16);

reminder.notified = false;

localStorage.setItem('reminders', JSON.stringify(reminders));

loadReminders();

}

dismissNotification();

}

function completeFromNotification() {

if (activeReminderId) {

markReminderComplete(activeReminderId);

dismissNotification();

}

</script>

in SBS

Follow us

Follow us

SBS Dashboard

Follow us

Computers & Devices

Monitors

Electronics

Promotions

Follow us

SBS Dashboard