:root {
/* Main Brand Colors - Dark Green Theme */
--primary-color: #1b5e20; /* Dark Green */
--primary-dark: #0d3b12; /* Deep Forest Green */
--primary-light: #2e7d32; /* Light Dark Green */
--secondary-color: var(--primary-dark);
--secondary-dark: var(--primary-dark);
--secondary-light: var(--primary-light);
/* Accent Colors */
--gold-color: #ffc107;
--success-color: #00c853;
--success-dark: #009624;
--info-color: #17a2b8;
--warning-color: #ff9800;
--danger-color: #dc3545;
/* Text Colors */
--text-color: #333;
--text-light: #555;
--text-muted: #6c757d;
--text-white: #fff;
--text-light-gray: #b8b8b8;
/* Background Colors */
--light-bg: #f4f8f5;
--body-bg: #eef3ef;
--white-bg: #ffffff;
--dark-bg: #0d3b12;
--darker-bg: #0b2e0f;
--black-bg: #000;
/* Border Colors */
--border-light: #d6e3d8;
--border-lighter: #edf5ee;
--border-dark: #0b2e0f;
/* Gradient Combinations */
--gradient-primary: linear-gradient(135deg, #1b5e20, #0d3b12);
--gradient-primary-reverse: linear-gradient(175deg, #1b5e20 50%, #0d3b12 50%);
--gradient-header: linear-gradient(135deg, #ffffff 0%, #f1f8f2 100%);
--gradient-navbar: linear-gradient(135deg, #1b5e20, #0d3b12);
--gradient-success: linear-gradient(135deg, #00c853, #009624);
/* Shadow Colors */
--shadow-light: rgba(0,0,0,0.05);
--shadow-medium: rgba(0,0,0,0.1);
--shadow-dark: rgba(0,0,0,0.2);
--shadow-darker: rgba(0,0,0,0.3);
--shadow-darkest: rgba(0,0,0,0.4);
/* Overlay Colors */
--overlay-light: rgba(255,255,255,0.1);
--overlay-medium: rgba(255,255,255,0.2);
--overlay-dark: rgba(0,0,0,0.5);
--overlay-darker: rgba(0,0,0,0.6);
--overlay-darkest: rgba(0,0,0,0.7);
--primary-color-overlay: rgba(27,94,32,0.7);
/* Layout Variables */
--sidebar-width: 280px;
--sidebar-collapsed-width: 70px;
--topbar-height: 60px;
--border-radius: 8px;
--box-shadow: 0 4px 15px var(--shadow-medium);
--transition: all 0.3s ease;
}
/* --- Rest of the CSS remains the same as it uses the variables above --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Teko", sans-serif;
font-weight: 400;
background-color: var(--body-bg);
color: var(--text-color);
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Bakbak One", sans-serif;
}
.admin-wrapper {
display: flex;
min-height: 100vh;
width: 100%;
overflow-x: hidden;
}
.admin-sidebar {
width: var(--sidebar-width);
height: 100vh;
background: var(--gradient-navbar);
position: fixed;
left: 0;
top: 0;
z-index: 1000;
transition: var(--transition);
overflow-y: auto;
box-shadow: 2px 0 10px var(--shadow-medium);
transform: translateX(-100%);
}
.admin-sidebar.show {
transform: translateX(0);
}
@media (min-width: 992px) {
.admin-sidebar {
transform: translateX(0);
position: fixed;
box-shadow: 2px 0 10px var(--shadow-medium);
}
.admin-content {
margin-left: var(--sidebar-width);
width: calc(100% - var(--sidebar-width));
}
}
.sidebar-header {
padding: 20px;
border-bottom: 2px solid var(--overlay-light);
display: flex;
align-items: center;
justify-content: space-between;
background: var(--overlay-light);
}
.sidebar-logo {
color: var(--text-white) !important;
text-decoration: none !important;
font-size: 18px;
font-weight: 600;
display: flex;
align-items: center;
}
.sidebar-logo:hover {
color: var(--gold-color) !important;
text-decoration: none !important;
}
.sidebar-toggle,
.sidebar-close {
background: none;
border: none;
color: var(--text-white);
font-size: 18px;
cursor: pointer;
padding: 5px;
border-radius: 4px;
transition: var(--transition);
}
.sidebar-toggle:hover,
.sidebar-close:hover {
background: var(--overlay-medium);
}
.sidebar-menu {
padding: 20px 0;
}
.menu-item {
margin-bottom: 5px;
}
.menu-link {
display: flex !important;
align-items: center !important;
padding: 12px 20px !important;
color: var(--text-light-gray) !important;
text-decoration: none !important;
transition: var(--transition) !important;
position: relative !important;
cursor: pointer !important;
justify-content: space-between;
border-left: 3px solid transparent;
}
.menu-link:hover {
background: var(--overlay-medium) !important;
color: var(--text-white) !important;
text-decoration: none !important;
border-left-color: var(--gold-color);
transform: translateX(3px);
}
.menu-link.active {
background: var(--gradient-primary) !important;
color: var(--text-white) !important;
border-left-color: var(--gold-color);
}
.menu-link i {
width: 20px;
margin-right: 12px;
text-align: center;
font-size: 16px;
color: var(--gold-color);
}
.menu-text {
flex: 1;
font-size: 14px;
font-weight: 500;
}
.menu-arrow {
font-size: 12px !important;
transition: transform 0.3s ease !important;
margin-left: auto !important;
color: var(--gold-color);
}
.dropdown-toggle[aria-expanded="true"] .menu-arrow,
.dropdown-toggle.expanded .menu-arrow {
transform: rotate(90deg) !important;
}
.admin-sidebar .dropdown-menu {
position: static !important;
transform: none !important;
float: none !important;
display: block !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
background: var(--overlay-darker) !important;
border-left: 3px solid var(--primary-color) !important;
margin-left: 20px !important;
overflow: hidden !important;
max-height: 0 !important;
transition: max-height 0.4s ease !important;
opacity: 0 !important;
}
.admin-sidebar .dropdown-menu.show {
max-height: 1000px !important;
opacity: 1 !important;
}
.admin-sidebar .dropdown-item {
display: flex !important;
align-items: center !important;
padding: 10px 20px !important;
color: var(--text-light-gray) !important;
text-decoration: none !important;
font-size: 13px !important;
transition: var(--transition) !important;
border: none !important;
background: transparent !important;
width: 100% !important;
}
.admin-sidebar .dropdown-item:hover {
background: var(--overlay-medium) !important;
color: var(--text-white) !important;
text-decoration: none !important;
border-left-color: var(--gold-color);
transform: translateX(3px);
}
.admin-sidebar .dropdown-item i {
width: 16px;
margin-right: 10px;
text-align: center;
font-size: 14px;
color: var(--gold-color);
}
.sidebar-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--overlay-dark);
z-index: 999;
display: none;
}
.sidebar-overlay.show {
display: block;
}
body.sidebar-open {
overflow: hidden;
}
.admin-content {
flex: 1;
min-height: 100vh;
background-color: var(--body-bg);
padding: 0;
margin-top: var(--topbar-height);
transition: margin-left 0.3s ease;
width: 100%;
overflow-x: hidden;
}
.main-content {
flex-grow: 1;
padding: 15px;
background-color: var(--body-bg);
min-height: calc(100vh - var(--topbar-height));
overflow-x: hidden;
width: 100%;
max-width: 100%;
}
.id-card-generation-container {
max-width: 100%;
margin: 0 auto;
padding: 0 15px;
}
.member-details-section {
background: var(--white-bg);
border-radius: var(--border-radius);
padding: 15px;
box-shadow: var(--box-shadow);
margin-bottom: 15px;
border-left: 4px solid var(--primary-color);
width: 100%;
}
.id-card-preview-section {
background: var(--white-bg);
border-radius: var(--border-radius);
padding: 15px;
box-shadow: var(--box-shadow);
text-align: center;
width: 100%;
}
.id-card-canvas-container {
display: inline-block;
border: 3px solid var(--primary-color);
border-radius: var(--border-radius);
padding: 8px;
background: var(--white-bg);
box-shadow: 0 4px 15px var(--shadow-dark);
max-width: 100%;
overflow: hidden;
}
#idCardCanvas {
width: 100%;
height: auto;
max-width: 591px;
aspect-ratio: 591 / 1004;
border-radius: calc(var(--border-radius) - 3px);
}
.action-buttons {
margin: 15px 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.action-buttons .btn {
width: 100%;
max-width: 250px;
padding: 10px 15px;
font-size: 0.9rem;
}
#loading {
background: var(--light-bg);
border-radius: var(--border-radius);
padding: 15px;
text-align: center;
border: 2px dashed var(--primary-color);
}
#downloadSection {
background: var(--gradient-success);
border-radius: var(--border-radius);
padding: 15px;
text-align: center;
color: var(--text-white);
}
#downloadSection .btn {
background: var(--white-bg);
color: var(--success-color);
border: none;
font-weight: bold;
padding: 10px 20px;
border-radius: 20px;
box-shadow: 0 4px 15px var(--shadow-dark);
transition: var(--transition);
}
#downloadSection .btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px var(--shadow-darker);
}
.table-responsive {
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
overflow-x: auto;
width: 100%;
}
.table {
margin-bottom: 0;
width: 100%;
}
.table th {
background: var(--gradient-primary);
border-top: none;
font-weight: 600;
color: var(--text-white);
padding: 10px;
border-bottom: 2px solid var(--primary-color);
white-space: nowrap;
}
.table td {
padding: 8px;
vertical-align: middle;
border-color: var(--border-light);
white-space: nowrap;
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(0, 100, 0, 0.02);
}
.table-hover tbody tr:hover {
background-color: rgba(0, 100, 0, 0.05);
}
.admin-topbar {
height: var(--topbar-height);
background: var(--gradient-header);
border-bottom: 2px solid var(--primary-color);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 900;
box-shadow: 0 2px 10px var(--shadow-medium);
}
.topbar-left {
display: flex;
align-items: center;
}
.topbar-title {
margin: 0;
font-size: 1.5rem;
color: var(--primary-color);
font-family: "Bakbak One", sans-serif;
display: flex;
align-items: center;
}
.topbar-right {
display: flex;
align-items: center;
}
.user-dropdown {
display: flex;
align-items: center;
background: var(--white-bg);
border: 1px solid var(--border-light);
border-radius: 25px;
padding: 5px 10px;
transition: var(--transition);
}
.user-dropdown:hover {
background: var(--light-bg);
border-color: var(--primary-color);
}
.user-avatar-small {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--gradient-primary);
color: var(--text-white);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
margin-right: 8px;
}
.user-name {
font-weight: 500;
color: var(--text-color);
font-size: 0.9rem;
}
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid var(--border-light);
}
.page-title {
margin: 0;
color: var(--primary-color);
font-size: 1.8rem;
font-family: "Bakbak One", sans-serif;
}
.page-actions {
display: flex;
gap: 8px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
.stat-card {
background: var(--white-bg);
border-radius: var(--border-radius);
padding: 20px;
display: flex;
align-items: center;
box-shadow: var(--box-shadow);
transition: var(--transition);
border-left: 4px solid var(--primary-color);
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px var(--shadow-dark);
}
.stat-icon {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
font-size: 1.3rem;
}
.stat-icon.primary {
background: var(--gradient-primary);
color: var(--text-white);
}
.stat-icon.success {
background: linear-gradient(135deg, var(--success-color), var(--success-dark));
color: var(--text-white);
}
.stat-icon.warning {
background: linear-gradient(135deg, var(--warning-color), #e65100);
color: var(--text-white);
}
.stat-icon.info {
background: linear-gradient(135deg, var(--info-color), #00e0fe);
color: var(--text-white);
}
.stat-icon.danger {
background: linear-gradient(135deg, var(--danger-color), #f95d88);
color: var(--text-white);
}
.stat-content h3 {
margin: 0;
font-size: 1.8rem;
font-weight: bold;
color: var(--primary-color);
}
.stat-content p {
margin: 5px 0 0 0;
color: var(--text-muted);
font-size: 0.85rem;
}
.admin-card {
background: var(--gradient-header);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
transition: var(--transition);
border: none;
margin-bottom: 15px;
border-left: 4px solid var(--primary-color);
}
.admin-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 15px var(--shadow-dark);
}
.admin-card .card-header {
background: var(--gradient-primary);
color: var(--text-white);
padding: 10px 12px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.admin-card .card-body {
padding: 15px;
}
.admin-card .card-footer {
background: var(--light-bg);
padding: 10px 12px;
border-top: 1px solid var(--border-light);
border-radius: 0 0 var(--border-radius) var(--border-radius);
}
.form-control:focus,
.form-select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(0, 100, 0, 0.25);
}
.btn-primary {
background: var(--gradient-primary);
color: var(--text-white);
}
.btn-primary:hover {
background: var(--gradient-primary-reverse);
transform: translateY(-2px);
box-shadow: 0 5px 15px var(--shadow-dark);
}
.btn-outline-primary {
border: 2px solid var(--primary-color);
color: var(--primary-color);
background: transparent;
}
.btn-outline-primary:hover {
background: var(--primary-color);
color: var(--text-white);
}
.pagination .page-link {
color: var(--primary-color);
}
.pagination .page-item.active .page-link {
background: var(--gradient-primary);
border-color: var(--primary-color);
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid var(--border-lighter);
border-top: 4px solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
.avatar-placeholder {
background: var(--gradient-primary);
}
.dashboard-card {
border-left: 4px solid var(--primary-color);
}
.dashboard-stat {
color: var(--primary-color);
}
.nav-tabs .nav-link.active {
background: var(--gradient-primary);
color: var(--text-white);
border-color: var(--primary-color);
}
.nav-tabs .nav-link:hover {
border-color: var(--primary-color);
color: var(--primary-color);
}
.text-gradient {
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.border-gradient {
border: 2px solid;
border-image: var(--gradient-primary) 1;
}
@media (max-width: 991px) {
.admin-content {
margin-left: 0 !important;
}
}
/* -------------------- */
/* MULTICOLOR STAT CARDS */
/* -------------------- */
.stats-grid .stat-card:nth-child(1){
border-left:4px solid #28a745;
}
.stats-grid .stat-card:nth-child(2){
border-left:4px solid #20c997;
}
.stats-grid .stat-card:nth-child(3){
border-left:4px solid #fd7e14;
}
.stats-grid .stat-card:nth-child(4){
border-left:4px solid #17a2b8;
}
/* -------------------- */
/* ICON MULTICOLOR */
/* -------------------- */
.stats-grid .stat-card:nth-child(1) .stat-icon{
background:linear-gradient(135deg,#28a745,#1e7e34);
color:#fff;
}
.stats-grid .stat-card:nth-child(2) .stat-icon{
background:linear-gradient(135deg,#20c997,#138496);
color:#fff;
}
.stats-grid .stat-card:nth-child(3) .stat-icon{
background:linear-gradient(135deg,#fd7e14,#e8590c);
color:#fff;
}
.stats-grid .stat-card:nth-child(4) .stat-icon{
background:linear-gradient(135deg,#17a2b8,#0c8599);
color:#fff;
}
/* -------------------- */
/* CARD HOVER ANIMATION */
/* -------------------- */
.stat-card{
position:relative;
overflow:hidden;
transition:all .4s ease;
}
.stat-card:hover{
transform:translateY(-8px) scale(1.02);
box-shadow:0 18px 40px rgba(0,0,0,.25);
}
/* -------------------- */
/* ICON PULSE ANIMATION */
/* -------------------- */
.stat-icon{
animation:iconPulse 2.5s infinite;
}
@keyframes iconPulse{
0%{
transform:scale(1);
}
50%{
transform:scale(1.15);
}
100%{
transform:scale(1);
}
}
/* -------------------- */
/* NUMBER GLOW */
/* -------------------- */
.stat-content h3{
animation:numberGlow 2s infinite alternate;
}
@keyframes numberGlow{
from{
text-shadow:0 0 5px rgba(0,0,0,.1);
}
to{
text-shadow:0 0 15px rgba(0,100,0,.4);
}
}
/* -------------------- */
/* SHINE EFFECT */
/* -------------------- */
.stat-card::before{
content:"";
position:absolute;
top:0;
left:-75%;
width:50%;
height:100%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,.5),
transparent
);
transform:skewX(-25deg);
}
.stat-card:hover::before{
animation:shine .8s;
}
@keyframes shine{
100%{
left:125%;
}
}
/* Dashboard Stats Cards - Multicolour Design */
.stat-card {
background: var(--white-bg);
border-radius: var(--border-radius);
padding: 20px;
display: flex;
align-items: center;
box-shadow: var(--box-shadow);
transition: var(--transition);
position: relative;
overflow: hidden;
border-left: none;
background: linear-gradient(135deg, var(--white-bg) 0%, #f8f9fa 100%);
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--gold-color));
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px var(--shadow-dark);
}
/* Individual Card Colors */
.stat-card:nth-child(1) .stat-icon {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}
.stat-card:nth-child(1) h3 {
color: #667eea;
}
.stat-card:nth-child(2) .stat-icon {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
box-shadow: 0 5px 15px rgba(240, 147, 251, 0.3);
}
.stat-card:nth-child(2) h3 {
color: #f5576c;
}
.stat-card:nth-child(3) .stat-icon {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
box-shadow: 0 5px 15px rgba(79, 172, 254, 0.3);
}
.stat-card:nth-child(3) h3 {
color: #4facfe;
}
.stat-card:nth-child(4) .stat-icon {
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
box-shadow: 0 5px 15px rgba(67, 233, 123, 0.3);
}
.stat-card:nth-child(4) h3 {
color: #43e97b;
}
.stat-card:nth-child(5) .stat-icon {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
box-shadow: 0 5px 15px rgba(250, 112, 154, 0.3);
}
.stat-card:nth-child(5) h3 {
color: #fa709a;
}
.stat-card:nth-child(6) .stat-icon {
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
box-shadow: 0 5px 15px rgba(168, 237, 234, 0.3);
color: #667eea;
}
.stat-card:nth-child(6) h3 {
color: #a8edea;
}
/* Update existing stat-icon class */
.stat-icon {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
font-size: 1.5rem;
color: var(--text-white);
transition: var(--transition);
position: relative;
z-index: 1;
}
.stat-icon::after {
content: '';
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
border-radius: 50%;
background: inherit;
opacity: 0.3;
z-index: -1;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.3;
}
70% {
transform: scale(1.1);
opacity: 0.1;
}
100% {
transform: scale(1);
opacity: 0.3;
}
}
/* Update stat content for better visibility */
.stat-content h3 {
margin: 0;
font-size: 2rem;
font-weight: bold;
transition: var(--transition);
background: linear-gradient(135deg, currentColor 0%, var(--text-color) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
.stat-content p {
margin: 5px 0 0 0;
color: var(--text-muted);
font-size: 0.9rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Optional: Add a subtle pattern overlay */
.stat-card::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1));
transform: skewX(-15deg) translateX(150px);
transition: transform 0.5s ease;
}
.stat-card:hover::after {
transform: skewX(-15deg) translateX(-50px);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.stat-icon {
width: 50px;
height: 50px;
font-size: 1.2rem;
}
.stat-content h3 {
font-size: 1.5rem;
}
.stat-content p {
font-size: 0.8rem;
}
}