/* body background image */ body { background: url("../img/background.webp") no-repeat center center fixed; background-size: cover; } /* glass sidebar styles */ .glass-sidebar { min-width: 200px; max-width: 200px; min-height: 100vh; /* Glass blur effect */ background: rgba(72, 95, 74, 0.45); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); /* Rounded edges */ border-radius: 20px; margin: 15px; /* Edge shadow*/ box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.04), 0 12px 32px rgba(0, 0, 0, 0.25); } /* sidebar items */ .list-group { background: transparent ; border: none ; } .list-group-item { background: transparent ; border: none ; color: #010202; padding: 12px 22px; font-size: 0.95rem; transition: all 0.25s ease; border-radius: 10px; font-weight: 500; } .sidebar-link i { color: #53062a; } /* Hover */ .sidebar-link:hover { background: rgba(255, 255, 255, 0.15) ; color: white ; font-weight: 600; } .sidebar-link:hover i { color: white; font-weight: 600; } /* Active Highlight Pill */ .sidebar-link.active { background: linear-gradient(135deg, #445750, #324e44) ; color: white ; font-weight: 600; border-radius: 12px; } .sidebar-link.active i { color: white ; font-weight: 600; } /* Sidebar collapsed state */ .glass-sidebar.collapsed { margin-left: -220px; /* hides it */ opacity: 0; transition: all 0.35s ease; } /* Animate opening */ .glass-sidebar { transition: all 0.35s ease; } /* navbar styles */ .navbar { background: #113529 ; } .navbar .btn { border-color: white; color: white; } .navbar .btn:hover { background-color: rgba(255, 255, 255, 0.15); } .navbar-title-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: white; font-size: 1.25rem; font-weight: 600; } /* cards */ .card-metric { border: none; border-radius: 16px; background: linear-gradient( 135deg, #a5b474 0%, #7cc29a 100% ); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06); padding: 1.5rem; } /* buttons */ .btn-primary { background-color: #595951; border-color: #302f2c; } .btn-primary:hover { background-color: #ffffff; color: #000000; } .btn-secondary { background-color: #595951; border-color: #302f2c; } .btn-secondary:hover { background-color: #ffffff; color: #000000; } /* table */ .table-striped tbody tr:nth-of-type(odd) { background-color: #ecfdf5; }