/* View Accounts Tab Styling Start */
.view-accounts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gray-200);
}

.view-accounts-title {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.view-accounts-title i {
    color: var(--emerald-600);
    font-size: 1.5rem;
    margin-top: 0.25rem;
}

.view-accounts-title h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--gray-900);
}

.view-accounts-title p {
    margin: 0.25rem 0 0 0;
    color: var(--gray-600);
    font-size: 0.9rem;
}

.table-container {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--gray-200);
}

.empty-state {
    text-align: center;
    padding: 3rem 1rem !important;
    color: var(--gray-600);
}
/* View Accounts Tab Styling End */

/* Root Variables Start */
/* Root Variables Start */
:root {
    --emerald-50: #ecfdf5;
    --emerald-100: #d1fae5;
    --emerald-200: #a7f3d0;
    --emerald-400: #34d399;
    --emerald-500: #10b981;
    --emerald-600: #059669;
    --emerald-700: #047857;
    --emerald-800: #065f46;
    --yellow-50: #FFFBEB;
    --yellow-100: #fef3c7;
    --yellow-200: #FDE68A;
    --yellow-400: #fbbf24;
    --yellow-700: #B45309;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --red-50: #fef2f2;
    --red-200: #FECACA;
    --red-600: #dc2626;
    --red-700: #B91C1C;
    --blue-50: #eff6ff;
    --blue-200: #BFDBFE;
    --blue-600: #3b82f6;
    --blue-700: #1e40af;
    --transition-fast: all 0.2s ease-in-out;
    --transition-medium: all 0.3s ease-in-out;
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.1);

    /* FIX: Added 'px' unit here. This was causing the layout overlap. */
    --sidebar-width: 280px; 
    --sidebar-collapsed-width: 65px;
}
/* Root Variables End */

/* ... (Keep existing styles until Sidebar Footer) ... */

/* Sidebar Footer Start */
.sidebar-footer {
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    transition: padding var(--transition-medium);
    position: relative;
    z-index: 50;
}

.user-info {
    background: var(--emerald-600);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-soft);
    transition: opacity var(--transition-medium), padding var(--transition-medium), margin var(--transition-medium);
}

/* ... */

.user-details p {
    font-size: 11px;
    color: var(--emerald-200); /* Light green for "Logged in as" */
}

.user-name {
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    /* FIX: Force user name text to be white */
    color: #ffffff !important; 
}

.user-id {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8); /* Slightly transparent white */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ... (Keep existing styles until Main Content Area) ... */

/* Main Content Area Start */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* FIX: Ensure margin matches sidebar width so it doesn't overlap */
    margin-left: var(--sidebar-width); 
    /* FIX: Calculate width to fit exactly in remaining space */
    width: calc(100% - var(--sidebar-width)); 
    transition: margin-left var(--transition-medium), width var(--transition-medium);
    overflow-x: hidden;
    overflow-y: auto;
    height: 100vh;
}
/* Main Content Area End */

/* ... (Keep existing styles until Mobile Responsiveness) ... */

/* =========================================
   MOBILE RESPONSIVENESS FIXES (FINAL)
   ========================================= */

@media (max-width: 768px) {
    
    /* 1. Fix Container Width & Remove Sidebar Gap */
    .dashboard-container {
        padding-left: 0 !important;
        width: 100vw;
        overflow-x: hidden;
    }

    .main-content {
        width: 100%;
        max-width: 100vw;
        padding-top: 0; 
        /* FIX: Reset margin on mobile so content isn't pushed off-screen */
        margin-left: 0 !important; 
    }

    /* ... (Keep rest of mobile styles) ... */
}
/* Root Variables End */

/* Global Styles Start */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
    background: var(--gray-50);
    color: var(--gray-900);
    line-height: 1.5;
    overflow-y: auto;
}
/* Global Styles End */

/* Login Page General Styling Start */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-image: url('../img/background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}
/* Login Page General Styling End */

/* Login Page Modal Fix Start */
.login-page .modal {
    left: 0;
    width: 100%;
}
/* Login Page Modal Fix End */

/* Login Page Background Blur Start */
.login-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    background-size: cover;
    background-position: center;
    filter: blur(8px);
    z-index: 1;
}
/* Login Page Background Blur End */

/* Login Page Background Overlay Start */
.login-page::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    z-index: 2;
}
/* Login Page Background Overlay End */

/* Login Card (Old Style) Start */
.login-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    box-shadow: var(--shadow-strong);
    overflow: hidden;
    max-width: 450px;
    width: 100%;
    transition: var(--transition-fast);
    position: relative;
    z-index: 3;
}

.login-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.login-header {
    background: var(--emerald-600);
    padding: 32px;
    text-align: center;
    color: white;
}

.logo-circle {
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.fingerprint-icon {
    width: 48px;
    height: 48px;
    color: var(--emerald-600);
}
/* Login Card (Old Style) End */

/* Dashboard Layout Start */
.dashboard-container {
    display: flex;
    min-height: 100vh;
    height: 100vh;
    background: var(--gray-50);
    position: relative;
    transition: padding-left var(--transition-medium);
    /* REMOVED: padding-left: var(--sidebar-width); */ 
    overflow: hidden;
}
/* Dashboard Layout End */

/* Sidebar General Start */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background: linear-gradient(180deg, var(--emerald-700), var(--emerald-800));
    color: white;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.1);
    transition: width var(--transition-medium);
    z-index: 20;
    overflow-x: hidden;
}
/* Sidebar General End */

.sidebar .user-name {
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff !important; 
}

/* Sidebar Header Start */
.sidebar-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    transition: padding var(--transition-medium);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    transition: opacity var(--transition-medium);
    min-width: 0;
    flex-grow: 1;
}

.sidebar-logo-icon {
    width: 40px;
    height: 40px;
    background: var(--emerald-600);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--emerald-500);
}

.sidebar-logo-icon i,
.sidebar-logo-icon svg {
    font-size: 22px;
    color: white;
    line-height: 1;
    fill: white;
}

.sidebar-title {
    overflow: hidden;
}

.sidebar-title h1 {
    font-size: 15px;
    color: #FFFFFF;
    font-weight: 700;
    white-space: nowrap;
}

.sidebar-title p {
    font-size: 10px;
    color: #FFFFFF;
    white-space: nowrap;
}
/* Sidebar Header End */

/* Sidebar Navigation Start */
.sidebar-nav {
    flex: 1;
    padding: 12px 14px;
    overflow-y: auto;
    overflow-x: hidden;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    color: white;
    text-decoration: none;
    margin-bottom: 8px;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
    overflow: hidden;
}

.nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: margin var(--transition-medium);
    fill: currentColor;
}

.nav-text {
    font-size: 1rem;
    transition: opacity 0.2s ease-in-out;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: none;
}

.nav-item.active {
    background: white;
    color: var(--emerald-700);
    font-weight: 600;
}

.nav-item.active .nav-icon {
    fill: var(--emerald-700);
}
/* Sidebar Navigation End */

/* Sidebar Footer Start */
.sidebar-footer {
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    transition: padding var(--transition-medium);
    position: relative;
    z-index: 50;
}

.user-info {
    background: var(--emerald-600);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-soft);
    transition: opacity var(--transition-medium), padding var(--transition-medium), margin var(--transition-medium);
}

.user-info-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.user-avatar {
    width: 36px;
    height: 36px;
    background: var(--emerald-500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    transition: margin var(--transition-medium);
}

.user-details p {
    font-size: 11px;
    color: var(--emerald-200); /* Light green for "Logged in as" */
}

.user-name {
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit; /* Allows it to be dark in tables */
}

.user-id {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8); /* Slightly transparent white */
    overflow: hidden;
    text-overflow: ellipsis;
}

.logout-btn {
    width: 100%;
    background: var(--emerald-600);
    color: white;
    border: 2px solid var(--emerald-500);
    padding: 10px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
}

.logout-btn:hover {
    background: white;
    color: var(--emerald-700);
}

.logout-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: currentColor;
    transition: margin var(--transition-medium);
}

.logout-text {
    transition: opacity 0.2s ease-in-out;
    white-space: nowrap;
}
/* Sidebar Footer End */

/* Sidebar Toggle Button Start */
.sidebar-toggle-btn {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: none;
    padding: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 12px;
}

.sidebar-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.sidebar-toggle-btn svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    fill: currentColor;
}
/* Sidebar Toggle Button End */

/* Collapsed Sidebar State Start */
.dashboard-container.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed-width);
}

.dashboard-container.sidebar-collapsed .main-content {
    margin-left: var(--sidebar-collapsed-width); /* FIX: Set margin for collapsed state */
    width: calc(100% - var(--sidebar-collapsed-width)); /* FIX: Set width for collapsed state */
}

.dashboard-container.sidebar-collapsed .sidebar-header {
    padding: 20px 16px;
    justify-content: center;
}

.dashboard-container.sidebar-collapsed .sidebar-logo {
    opacity: 0;
    width: 0;
    pointer-events: none;
    position: absolute;
}

.dashboard-container.sidebar-collapsed .sidebar-toggle-btn {
    margin-left: 0;
    background: rgba(255, 255, 255, 0.1);
}

.dashboard-container.sidebar-collapsed .nav-item {
    justify-content: center;
    padding: 14px 0;
    gap: 0;
}

.dashboard-container.sidebar-collapsed .nav-icon {
    margin: 0;
}

.dashboard-container.sidebar-collapsed .nav-text {
    opacity: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.dashboard-container.sidebar-collapsed .sidebar-footer {
     padding: 16px 12px;
}

.dashboard-container.sidebar-collapsed .user-info {
    opacity: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border: none;
    pointer-events: none;
}

.dashboard-container.sidebar-collapsed .logout-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0 auto;
    gap: 0;
}

.dashboard-container.sidebar-collapsed .logout-text {
    opacity: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.dashboard-container.sidebar-collapsed .logout-icon {
    margin: 0;
}
/* Collapsed Sidebar State End */

/* Main Content Area Start */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* FIX: Ensure margin matches sidebar width so it doesn't overlap */
    margin-left: var(--sidebar-width); 
    /* FIX: Calculate width to fit exactly in remaining space */
    width: calc(100% - var(--sidebar-width)); 
    transition: margin-left var(--transition-medium), width var(--transition-medium);
    overflow-x: hidden;
    overflow-y: auto;
    height: 100vh;
}
/* Main Content Area End */

/* Main Header Bar Start */
.main-header {
    background: white;
    border-bottom: 1px solid var(--gray-200);
    padding: 1.75rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-soft);
    position: sticky;
    top: 0;
    z-index: 10;
    gap: 1.5rem;
}

.header-title h2 {
    font-size: 1.75rem;
    color: var(--emerald-800);
    font-weight: 700;
}

.header-title p {
    font-size: 1rem;
    color: var(--gray-600);
}
/* Main Header Bar End */

/* Stats Grid Start */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 24px 0;
}

.stat-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-soft);
    transition: var(--transition-fast);
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-strong);
}

.stats-grid .stat-card .stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    overflow: hidden;
}

.stats-grid .stat-card .stat-icon svg {
    width: 30px;
    height: 30px;
    display: block;
    margin: auto;
}
.stats-grid .stat-card .stat-icon i {
    font-size: 30px;
    line-height: 1;
    margin: auto;
    text-align: center;
}

.schedule-stats-grid .stat-card-small .stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    overflow: hidden;
}

.schedule-stats-grid .stat-card-small .stat-icon svg {
     width: 24px;
     height: 24px;
     display: block;
     margin: auto;
}
.schedule-stats-grid .stat-card-small .stat-icon i {
     font-size: 24px;
     line-height: 1;
     margin: auto;
     text-align: center;
}

.stat-icon.emerald {
    background: var(--emerald-100);
    color: var(--emerald-600);
}

.stat-icon.yellow {
    background: var(--yellow-100);
    color: #d97706;
}

.stat-icon.red {
    background: var(--red-50);
    color: var(--red-600);
}

.stat-details p {
    font-size: 13px;
    color: var(--gray-600);
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--gray-800);
}
.stat-value.red {
    color: var(--red-600);
}
/* Stats Grid End */

/* Card Element Start */
.card {
    background: white;
    border-radius: 16px;
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-soft);
    transition: var(--transition-fast);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--shadow-strong);
}

.card-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-200);
    background: var(--emerald-50);
}

.card-header h2,
.card-header h3 {
    font-size: 18px;
    color: var(--emerald-800);
    font-weight: 600;
}

.card-body {
    padding: 24px;
}
/* Card Element End */

/* Table Element Start */
table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 12px;
    overflow: hidden;
}

thead {
    background: var(--gray-100);
}

th, td {
    padding: 14px 16px;
    text-align: left;
    vertical-align: middle;
}

tbody tr {
    border-bottom: 1px solid var(--gray-100);
    transition: var(--transition-fast);
}

tbody tr:hover {
    background: var(--emerald-50);
}
/* Table Element End */

/* Modern Dashboard Global Styles Start */
.main-body {
    padding: 2rem;
    color: #1f2937;
    font-family: 'Inter', sans-serif;
    flex-grow: 1;
    overflow-y: auto;
}

.page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--emerald-700);
}

.page-header .subtitle {
    color: #6b7280;
    font-size: 0.95rem;
    margin-top: 0.25rem;
}
/* Modern Dashboard Global Styles End */

/* Alert Boxes Start */
.alert {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin: 1rem 0;
    font-weight: 500;
}

.alert.alert-success {
    background: var(--emerald-50);
}

.alert-success {
    background-color: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.alert-error {
    background-color: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}
/* Alert Boxes End */

/* Tab Navigation Start */
.tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0;
    border-bottom: 2px solid #e5e7eb;
    padding: 0 1rem;
}

.tab-btn {
    padding: 0.75rem 1.25rem;
    border: none;
    background: none;
    color: #6b7280;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    position: relative;
}

.tab-btn:hover {
    color: var(--emerald-600);
    background: var(--emerald-50);
}

.tab-btn.active {
    color: var(--emerald-800);
    background: var(--emerald-100);
    border-bottom: 3px solid transparent;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 10%;
    width: 80%;
    height: 3px;
    background: var(--emerald-600);
    border-radius: 8px;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}
/* Tab Navigation End */


/* Form Grid Layout Start */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

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

.form-group label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.4rem;
    display: block;
    font-size: 0.9rem;
}
/* Form Grid Layout End */

/* Form Control Styles Start */
.form-control {
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    font-size: 0.95rem;
    width: 100%;
    transition: all 0.2s ease;
    box-sizing: border-box;
    line-height: 1.5;
}

.form-control:focus {
    border-color: var(--emerald-500);
    outline: none;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.form-control::placeholder {
    color: #9ca3af;
}

.form-control[readonly] {
    background-color: var(--gray-50) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    cursor: not-allowed;
    color: var(--gray-600);
}
/* Form Control Styles End */

/* Button Styles Start */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.2s;
    text-decoration: none;
    box-sizing: border-box;
    line-height: 1.5;
}

.btn-primary {
    background: var(--emerald-600);
    color: white;
    border-color: var(--emerald-600);
}
.btn-primary:hover {
    background: var(--emerald-700);
    border-color: var(--emerald-700);
}
.btn-secondary {
    background: var(--gray-200);
    color: var(--gray-700);
    border-color: var(--gray-300);
}
.btn-secondary:hover {
    background: var(--gray-300);
    border-color: var(--gray-400);
}

.btn-success {
    background: #10b981;
    color: white;
    border-color: #10b981;
}

.btn-success:hover {
    background: #059669;
    border-color: #059669;
}

.btn-warning {
    background: #f59e0b;
    color: white;
    border-color: #f59e0b;
}

.btn-warning:hover {
    background: #d97706;
    border-color: #d97706;
}

.btn-danger {
    background: var(--red-600);
    color: white;
    border-color: var(--red-600);
}
.btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

.btn-sm {
    font-size: 0.8rem;
    padding: 0.4rem 0.75rem;
}

.btn-full-width {
    width: 100%;
    padding: 0.875rem;
    font-size: 1rem;
}
/* Button Styles End */

/* Data Table Styles Start */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.95rem;
}

.data-table th,
.data-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}

.data-table th {
    background: #f9fafb;
    color: #374151;
    font-weight: 600;
}

.data-table tbody tr:hover {
    background: #f9fafb;
}

.text-center {
    text-align: center;
}
/* Data Table Styles End */

/* CSV Import Styling Start */
.csv-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.75rem;
}

.csv-section-header i {
    color: var(--emerald-600);
    font-size: 1.5rem;
}

.csv-section-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.csv-subtitle {
    color: var(--gray-600);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.download-template-box {
    background: var(--blue-50);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.download-template-inner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.step-badge {
    background: var(--blue-600);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: bold;
    font-size: 1rem;
}

.download-template-content {
    flex: 1;
}

.download-template-content h4 {
    margin: 0 0 0.5rem 0;
    color: var(--blue-700);
    font-size: 1rem;
}

.download-template-content h4 span {
    font-weight: normal;
}

.download-template-link {
    margin-top: 0.75rem;
}

.csv-upload-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--gray-700);
}

.csv-dropzone {
    border: 2px dashed var(--gray-300);
    border-radius: 8px;
    padding: 3rem 2rem;
    text-align: center;
    background: var(--gray-50);
    cursor: pointer;
    transition: all 0.3s ease;
}

.csv-dropzone:hover {
    border-color: var(--blue-600);
    background: var(--blue-50);
}

.csv-dropzone.dragover {
    border-color: var(--blue-600);
    background: var(--blue-50);
}

.csv-dropzone i {
    font-size: 3rem;
    color: #9ca3af;
    margin-bottom: 1rem;
    display: block;
}

.csv-dropzone-text {
    font-size: 1rem;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.csv-dropzone-text strong {
    font-weight: 600;
}

.csv-file-status {
    color: var(--gray-600);
    margin: 0;
    font-size: 0.9rem;
}

.csv-file-status.has-file {
    color: var(--emerald-600);
    font-weight: 600;
}

.csv-requirements {
    background: var(--gray-50);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 2rem;
    border: 1px solid var(--gray-200);
}

.csv-requirements h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: var(--gray-800);
}

.csv-requirements ul {
    margin: 0;
    padding-left: 1.5rem;
    color: var(--gray-700);
    line-height: 1.8;
}
/* CSV Import Styling End */

/* User Creation Tab Styling Start */
.user-creation-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.75rem;
}

.user-creation-header i {
    color: var(--emerald-600);
    font-size: 1.5rem;
}

.user-creation-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.user-creation-subtitle {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.user-creation-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-group-full {
    grid-column: 1 / -1;
}

.required {
    color: var(--red-600);
    margin-left: 2px;
}

.password-info-box {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: #065f46;
}

.password-info-box i {
    color: var(--emerald-600);
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}
/* User Creation Tab Styling End */

/* Modal General Styling Start */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    left: var(--sidebar-width); /* Start at 280px */
    width: calc(100% - var(--sidebar-width));
    align-items: center;
    justify-content: center;
    animation: fadeInModal 0.3s ease;
    transition: left 0.3s ease, width 0.3s ease;
}

.dashboard-container.sidebar-collapsed .modal {
    left: var(--sidebar-collapsed-width); /* Adjust to 70px */
    width: calc(100% - var(--sidebar-collapsed-width));
}

@keyframes fadeInModal { from { opacity: 0; } to { opacity: 1; } }

.modal-content {
    background-color: white;
    margin: auto;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 1000px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

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

.modal-small {
    max-width: 500px;
}

/* =========================================
   UPDATED MODAL HEADERS (Global Emerald Theme)
   ========================================= */

/* Force ALL modal headers to be Emerald Green */
.modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--emerald-700);
    background: var(--emerald-600) !important; /* Force Emerald Background */
    border-radius: 16px 16px 0 0;
    width: 100%;
    margin: 0;
}

/* Force all text and icons inside header to be White */
.modal-header h3,
.modal-header h2,
.modal-header h4,
.modal-header i,
.modal-header svg {
    color: #ffffff !important;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Modal Close Button */
.modal-header .modal-close {
    color: rgba(255, 255, 255, 0.8) !important;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.modal-header .modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
}

/* --- REMOVED: Danger and Warning specific header styles --- */
/* The .modal-header.danger and .modal-header.warning blocks have been deleted 
   to ensure every modal uses the Emerald Green style defined above. */

/* Modal Body Tweaks */
.modal-body {
    padding: 1.5rem !important;
    background-color: #fff;
}

/* Modal Footer Tweaks */
.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--gray-200);
    background-color: var(--gray-50);
    border-radius: 0 0 12px 12px;
}

/* Role Badge Styling Start */
.role-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--emerald-100);
    color: var(--emerald-700);
}
/* Role Badge Styling End */

/* Responsive Design Start */
@media (max-width: 768px) {
    
    /* 1. Fix Container Width & Remove Sidebar Gap */
    .dashboard-container {
        padding-left: 0 !important;
        width: 100vw;
        overflow-x: hidden;
    }
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width);
        transition: transform var(--transition-medium);
        position: fixed;
        height: 100%;
        z-index: 1000; /* Ensure it's above everything */
    }
     .dashboard-container.sidebar-mobile-open .sidebar {
        transform: translateX(0);
    }

    /* Add an overlay so users can click outside to close */
    .dashboard-container.sidebar-mobile-open::after {
        content: '';
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }

    .main-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .header-actions {
        flex-wrap: wrap;
        width: 100%;
        justify-content: flex-start;
    }
    #live-time-date { text-align: left; }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .form-grid,
    .user-creation-form-grid {
        grid-template-columns: 1fr;
    }

    .tabs {
        flex-direction: column;
        padding: 0;
    }

    .tab-btn {
        border-radius: 0;
        border-bottom: 1px solid var(--gray-200);
    }

    .download-template-inner {
        flex-direction: column;
    }

    .csv-dropzone {
        padding: 2rem 1rem;
    }

    .modal-content {
        width: 95%;
        max-height: 90vh;
        margin: 1rem;
    }

    .modal {
        left: 0;
        width: 100%;
    }
    .dashboard-container.sidebar-collapsed .modal {
        left: 0;
        width: 100%;
    }

    .modal-body {
        padding: 1rem;
    }

    .modal-header,
    .modal-footer {
        padding: 1rem;
    }

    .login-card-modern {
        max-width: 90%;
        margin: 0;
    }

    .login-header-modern {
        padding: 2rem 1.5rem;
    }

    .login-body-modern {
        padding: 1.5rem;
    }

    .sidebar-toggle-btn {
        display: flex;
    }
}
/* Responsive Design End */

/* Enhanced Tab + View Accounts Styling Start */
.tabs {
    display: flex;
    border-bottom: 2px solid var(--gray-200);
    background: var(--gray-50);
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    padding: 0.25rem 0.5rem;
}

.tab-btn {
    flex: 1;
    padding: 1rem 1.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--gray-700);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative; 
}

.tab-btn:hover {
    background: var(--emerald-50);
    color: var(--emerald-700);
}

.tab-btn.active {
    background: var(--emerald-100); 
    color: var(--emerald-800);
    border-bottom: 3px solid transparent; 
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 3px;
    background: var(--emerald-600);
    border-radius: 3px; 
}

#viewTab table.data-table th,
#viewTab table.data-table td {
    padding: 1rem 1.25rem;
}

#viewTab table.data-table tr:nth-child(even) {
    background: var(--gray-50);
}

#viewTab table.data-table tr:hover {
    background: var(--emerald-50);
}
/* Enhanced Tab + View Accounts Styling End */

/* Archived Accounts Modal Styling Start */
#archivedModal .modal-content {
    width: 90%;
    max-width: 1200px;
    border-radius: 16px;
    padding: 2rem;
}

#archivedModal .modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 2px solid var(--gray-200);
}

#archivedModal .modal-header h3 {
    font-size: 1.3rem;
}

#archivedModal .modal-body {
    padding: 1.5rem;
    max-height: 70vh;
    overflow-y: auto;
}

#archivedModal .modal-footer {
    padding: 1.25rem 1.5rem;
    gap: 1rem;
}

#archivedModal .btn {
    padding: 0.65rem 1.25rem;
    font-size: 0.95rem;
    border-radius: 8px;
}

#archivedModal .btn.restore {
    background: var(--emerald-600);
    color: white;
}

#archivedModal .btn.restore:hover {
    background: var(--emerald-700);
}

#archivedModal .btn.close {
    background: var(--gray-200);
    color: var(--gray-700);
}

#archivedModal .btn.close:hover {
    background: var(--gray-300);
}

#archivedModal .modal-content {
    animation: popIn 0.3s ease;
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* Archived Accounts Modal Styling End */

/* Fingerprint Registration Page Styling Start */
.fingerprint-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90vh;
    background: var(--gray-50);
    padding: 2rem;
}

.fingerprint-card {
    background: white;
    border-radius: 16px;
    box-shadow: var(--shadow-strong);
    padding: 2.5rem;
    width: 100%;
    max-width: 600px;
    text-align: center;
    border: 1px solid var(--gray-200);
    animation: fadeIn 0.4s ease;
}

.fingerprint-card h2 {
    color: var(--emerald-700);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.fingerprint-card p {
    color: var(--gray-600);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.device-status-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--emerald-50);
    color: var(--emerald-700);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    border: 1px solid var(--emerald-100);
}

.device-status-box i {
    font-size: 1rem;
}

.fingerprint-icon-area {
    border: 2px dashed var(--emerald-200);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--emerald-50);
    transition: all 0.3s ease;
}

.fingerprint-icon-area:hover {
    border-color: var(--emerald-400);
    background: var(--emerald-100);
}

.fingerprint-icon-area i {
    font-size: 64px;
    color: var(--emerald-600);
}

.scan-steps {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
}

.scan-step {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-700);
    font-weight: 600;
    transition: all 0.3s ease;
}

.scan-step.active {
    background: var(--emerald-600);
    color: white;
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(5, 150, 105, 0.3);
}

.btn-scan {
    background: var(--emerald-600);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-right: 0.5rem;
}

.btn-scan:hover {
    background: var(--emerald-700);
    transform: translateY(-2px);
}

.btn-cancel {
    background: var(--gray-200);
    color: var(--gray-800);
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-cancel:hover {
    background: var(--gray-300);
}

.instructions-box {
    background: var(--blue-50);
    border-left: 4px solid var(--blue-600);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    text-align: left;
    margin-top: 2rem;
    color: var(--gray-800);
}

.instructions-box h4 {
    color: var(--blue-700);
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.instructions-box ul {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0;
}

.instructions-box li {
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    color: var(--gray-700);
}

.scanning .fingerprint-icon-area {
    border: 3px solid var(--emerald-400);
    background: var(--emerald-100);
    animation: pulseScan 1.2s infinite;
}

@keyframes pulseScan {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.3); }
    70% { box-shadow: 0 0 0 15px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
/* Fingerprint Registration Page Styling End */

/* Modern Login Page (Wider Style - Seems unused now) Start */
.login-card-modern {
    max-width: 600px;
    width: 100%;
    box-shadow: var(--shadow-strong);
    margin: 0;
    border-radius: 16px;
    position: relative;
    z-index: 3;
    background-color: white;
}

.login-header-modern {
    text-align: center;
    padding: 3rem;
}

.login-header-modern .logo-circle {
    background: white;
    border: 4px solid var(--emerald-600);
    margin: 0 auto 1.5rem auto;
    width: 90px;
    height: 90px;
}

.login-header-modern .fingerprint-icon {
    color: var(--emerald-600);
    width: 48px;
    height: 48px;
}

.login-header-modern h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--emerald-800);
    margin: 0 0 0.5rem 0;
}

.login-header-modern p {
    color: var(--gray-600);
    font-size: 1.1rem;
    margin: 0;
}

.login-body-modern {
    padding: 3rem;
}

.login-body-modern h2 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.login-body-modern .subtitle {
    color: var(--gray-600);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.login-body-modern .alert {
    margin-bottom: 1.5rem;
}

.login-body-modern .form-group {
    margin-bottom: 1.25rem;
}

.login-body-modern .form-group label {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.login-body-modern .form-control {
    padding: 0.85rem 1rem;
    font-size: 1rem;
}

.login-body-modern .password-input {
    position: relative;
    display: flex;
}

.login-body-modern .password-input .form-control {
    padding-right: 3.5rem;
}

.login-body-modern .password-input .toggle-password {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 3.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-400);
    font-size: 1.1rem;
}

.login-body-modern .form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.login-body-modern .checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-700);
    cursor: pointer;
}

.login-body-modern .checkbox input {
    height: 1.1rem;
    width: 1.1rem;
}

.login-body-modern .forgot-link {
    color: var(--emerald-600);
    font-weight: 600;
    text-decoration: none;
}

.login-footer-modern {
    text-align: center;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--gray-200);
}

.login-footer-modern p {
    color: var(--gray-500);
    font-size: 0.9rem;
    line-height: 1.6;
}

#forgotModal .modal-body .form-group {
    margin-bottom: 1.25rem;
}

#forgotModal .modal-body p {
    color: var(--gray-600);
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
}

#forgotModal .modal-content.modal-small {
    max-width: 550px;
}
/* Modern Login Page (Wider Style - Seems unused now) End */

/* Schedule Management Stat Cards (Smaller) Start */
.schedule-stats-grid {
    margin-bottom: 1.5rem;
    margin-top: 0;
}

.stat-card-small {
    padding: 1.25rem;
}

.stat-card-small .stat-icon {
    width: 44px;
    height: 44px;
}

.stat-card-small .stat-icon svg {
    width: 20px;
    height: 20px;
}

.stat-card-small .stat-details p {
    font-size: 12px;
    margin-bottom: 0;
}

.stat-card-small .stat-details .stat-value {
    font-size: 24px;
    line-height: 1.2;
}

.stat-card-small .stat-details .stat-value-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--emerald-700);
    line-height: 1.3;
}

.stat-card-small .stat-details .stat-value-subtext {
    font-size: 12px;
    color: var(--gray-600);
}
/* Schedule Management Stat Cards (Smaller) End */

/* Sidebar Footer Buttons (Logout, Settings) Start */
.logout-btn {
    width: 100%;
    background: var(--emerald-600);
    color: white;
    border: 2px solid var(--emerald-500);
    padding: 10px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
}

.logout-btn:hover {
    background: white;
    color: var(--emerald-700);
}

.user-info-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.user-info-inner .user-name { 
    color: white !important; 
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-details {
     margin-left: 12px;
     flex-grow: 1;
     overflow: hidden;
     white-space: nowrap;
     transition: opacity 0.2s ease-in-out;
}

.user-settings-btn {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition-fast);
    flex-shrink: 0;
    margin-left: 8px;
}

.user-settings-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.user-settings-btn i {
    font-size: 1.1rem;
    line-height: 1;
}
/* Sidebar Footer Buttons (Logout, Settings) End */

/* Settings Pop-up Menu Start */
.sidebar-footer {
    position: relative;
}

#settings-menu {
    display: none;
    position: absolute;
    bottom: 100%; /* Push it directly above the footer */
    left: 16px;
    right: 16px;
    margin-bottom: 10px; /* Small gap */
    background: #ffffff; /* Ensure white background */
    color: var(--gray-800);
    border-radius: 12px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2); /* Stronger shadow */
    padding: 8px;
    z-index: 1000; /* High z-index to pop over everything */
    border: 1px solid var(--gray-200);
}

#settings-menu.active {
    display: block;
    animation: popUp 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.settings-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px; /* More padding */
    border-radius: 8px;
    color: var(--gray-700);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: background-color 0.2s;
}

.settings-menu-item:hover {
    background-color: var(--emerald-50);
    color: var(--emerald-700);
}

@keyframes popUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Settings Pop-up Menu End */

/* Main Header Sizing and Actions Start */
.main-header {
    padding: 1.75rem 2rem;
    gap: 1.5rem;
}

.header-title h2 {
    font-size: 1.75rem;
    font-weight: 700;
}

.header-title p {
    font-size: 1rem;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

#live-time-date {
    text-align: right;
    color: var(--gray-700);
    min-width: 180px;
}

#live-time {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--emerald-800);
}

#live-date {
    font-size: 0.9rem;
    color: var(--gray-600);
}

.header-user-id {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--gray-100);
    color: var(--gray-700);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
}

.header-user-id i {
    color: var(--emerald-600);
    font-size: 1.1rem;
}
/* Main Header Sizing and Actions End */

/* Header Scanner Status Widget Start */
.header-scanner-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid;
    min-width: 320px;
}

.scanner-status-icon {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.scanner-icon-badge {
    position: absolute;
    top: -5%;
    right: -5%;
    width: 20px;
    height: 20px;
    background: #dc2626;
    color: white;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    line-height: 1;
}

.scanner-status-text {
    flex-grow: 1;
}

.scanner-status-text-main {
    font-size: 0.95rem;
    font-weight: 600;
}

.scanner-status-text-sub {
    font-size: 0.85rem;
}

.scanner-status-details {
    text-align: right;
    flex-shrink: 0;
}

.scanner-status-badge {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

.scanner-status-action {
    font-size: 0.8rem;
    margin-top: 2px;
}

.header-scanner-status.offline {
    background: #FFFBEB;
    border-color: #FDE68A;
}
.header-scanner-status.offline .scanner-status-icon {
    background: #F59E0B;
    color: white;
}
.header-scanner-status.offline .scanner-status-text-main {
    color: #854D0E;
}
.header-scanner-status.offline .scanner-status-text-sub {
    color: #B45309;
}
.header-scanner-status.offline .scanner-status-badge {
    background: #F59E0B;
    color: white;
}
.header-scanner-status.offline .scanner-status-action {
    color: #B45309;
}
.header-scanner-status.offline .scanner-icon-badge {
    display: flex;
}

.header-scanner-status.online {
    background: #F0FDF4;
    border-color: #A7F3D0;
}
.header-scanner-status.online .scanner-status-icon {
    background: var(--emerald-600);
    color: white;
}
.header-scanner-status.online .scanner-status-text-main {
    color: var(--emerald-800);
}
.header-scanner-status.online .scanner-status-text-sub {
    color: var(--emerald-700);
}
.header-scanner-status.online .scanner-status-badge {
    background: var(--emerald-600);
    color: white;
}
.header-scanner-status.online .scanner-status-action {
    color: var(--emerald-700);
}
.header-scanner-status.online .scanner-icon-badge {
    display: none;
}
/* Header Scanner Status Widget End */

/* Wider Device Status (Fingerprint Page) Start */
.device-status {
    padding: 0.6rem 1.25rem;
    min-width: 250px;
    justify-content: flex-start;
}

.device-status-icon {
    font-size: 1.2rem;
    line-height: 1;
}

.device-icon-container {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
}

.device-status.online .device-icon-container {
    background: white;
    border: 1px solid var(--emerald-200);
}

.device-status.offline .device-icon-container {
    background: white;
    border: 1px solid var(--red-200);
}
/* Wider Device Status (Fingerprint Page) End */

/* Complete Registration Table Text Size Start */
.larger-text-table td,
.larger-text-table th {
    font-size: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
/* Complete Registration Table Text Size End */

/* Basic Modal Styles Start */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    align-items: center;
    justify-content: center;
    animation: fadeInModal 0.3s ease;
    transition: left 0.3s ease, width 0.3s ease;
}

.dashboard-container.sidebar-collapsed .modal {
    left: var(--sidebar-collapsed-width);
    width: calc(100% - var(--sidebar-collapsed-width));
}

.modal-content {
    background-color: #fff;
    margin: auto;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    width: 90%;
    max-width: 550px;
    animation: slideInModal 0.3s ease-out;
    display: flex;
    flex-direction: column;
}

.modal-content.modal-small {
    max-width: 450px;
}

.modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--gray-500);
    padding: 0.25rem;
}
.modal-close:hover {
     color: var(--gray-800);
}

.modal-body {
    padding: 1.5rem;
    flex-grow: 1;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--gray-200);
    background-color: var(--gray-50);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    border-radius: 0 0 12px 12px;
}

@keyframes fadeInModal { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInModal { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* Basic Modal Styles End */

/* Register Button Special Layout Start */
.register-btn-special {
    position: relative;
    justify-content: center;
    padding-left: 2.5rem;
    text-decoration: none;
}

.register-btn-special i {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1em;
}

.register-btn-special span {
    display: inline-block;
}
/* Register Button Special Layout End */

/* Logout Confirmation Modal Start */

#logoutConfirmModal {
    left: 0 !important;
    width: 100% !important;
    z-index: 2000 !important; /* Ensure it sits above the sidebar (z-index 20) */
    align-items: center;
    justify-content: center;
}

#logoutConfirmModal .modal-content {
    max-width: 400px; /* Make it a nice compact confirmation box */
    margin: 0 auto;
}
#logoutConfirmModal .modal-header {
    background-color: var(--gray-50);
}

#logoutConfirmModal .modal-header h3 {
     color: var(--gray-800);
}
/* Logout Confirmation Modal End */

/* Form Filter Height Consistency Start */
form select.form-control,
form input[type="date"].form-control {
    height: calc(1.5em + 1.5rem + 2px);
}
/* Form Filter Height Consistency End */

/* New Login Page Styles Start */
.login-card-new {
    background: #ffffff;
    max-width: 460px;
    width: 100%;
    border-radius: 16px;
    box-shadow: var(--shadow-strong);
    position: relative;
    z-index: 3;
    overflow: hidden;
}

.login-new-header {
    background: var(--emerald-50);
    padding: 2.5rem 2rem 2rem 2rem;
    text-align: center;
}

.login-logo-container {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--emerald-600);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem auto;
    font-size: 2.5rem;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.login-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--emerald-700);
    margin: 0 0 0.5rem 0;
}

.login-subtitle {
    font-size: 1rem;
    color: var(--gray-600);
    margin: 0;
}

.login-new-body {
    padding: 2.5rem;
    text-align: center;
}

.login-new-body .form-group {
    margin-bottom: 1.25rem;
}

.login-new-body .form-group label {
    text-align: left;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
    display: block;
}

.login-new-body .form-control {
    padding: 0.85rem 1rem;
    font-size: 1rem;
}

.login-new-body .password-input {
    position: relative;
    display: flex;
}

.login-new-body .password-input .toggle-password {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 3.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-400);
    font-size: 1.1rem;
}

.form-options-new {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.form-options-new .checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-700);
    cursor: pointer;
}

.form-options-new .checkbox input {
    height: 1.1rem;
    width: 1.1rem;
}

.login-new-forgot-link {
    display: block;
    margin-top: 1.5rem;
    color: var(--emerald-600);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.login-new-forgot-link:hover {
    color: var(--emerald-700);
}

.login-new-body .btn-full-width {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
/* New Login Page Styles End */

/* Forgot Password Modal New Styles Start */
#forgotModal .modal-content {
    max-width: 500px;
    border: none;
    box-shadow: var(--shadow-strong);
}

#forgotModal .modal-header {
    background-color: var(--emerald-50);
    border-bottom: 1px solid var(--gray-200);
}

#forgotModal .modal-header h3 {
    color: var(--emerald-700);
    font-size: 1.15rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#forgotModal .modal-body {
    background-color: #ffffff;
}

#forgotModal .modal-body p {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

#forgotModal .modal-body .form-group {
    margin-bottom: 1.25rem;
    text-align: left;
}

#forgotModal .modal-body .form-group label {
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

#forgotModal .modal-footer {
    background-color: var(--gray-50);
}

#forgotModal .btn-primary {
    background-color: var(--emerald-600);
    border-color: var(--emerald-600);
}
#forgotModal .btn-primary:hover {
    background-color: var(--emerald-7DTR-container00);
    border-color: var(--emerald-700);
}

#forgotModal .btn-secondary {
    background-color: var(--gray-200);
    border-color: var(--gray-300);
    color: var(--gray-700);
}
#forgotModal .btn-secondary:hover {
    background-color: var(--gray-300);
    border-color: var(--gray-400);
}
/* Forgot Password Modal New Styles End */

/* Complete Registration Page Specific Styles Start */
.main-body.registration-page {
    padding: 2rem 3rem;
}

.search-bar-container {
    position: relative;
    margin-bottom: 2rem;
}

.search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
}

.search-input {
    width: 100%;
    padding: 0.8rem 1rem 0.8rem 2.8rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.search-input:focus {
    border-color: var(--emerald-500);
    outline: none;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.registration-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.reg-stat-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-soft);
}

.reg-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.5rem;
}

.reg-stat-details p {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin-bottom: 0.25rem;
}

.reg-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
}

.reg-stat-card.total-users .reg-stat-icon { background-color: var(--emerald-100); color: var(--emerald-600); }
.reg-stat-card.total-users .reg-stat-value { color: var(--emerald-700); }

.reg-stat-card.registered .reg-stat-icon { background-color: var(--emerald-100); color: var(--emerald-600); }
.reg-stat-card.registered .reg-stat-value { color: var(--emerald-700); }

.reg-stat-card.pending .reg-stat-icon { background-color: var(--yellow-100); color: var(--yellow-700); }
.reg-stat-card.pending .reg-stat-value { color: var(--yellow-700); }

.pending-registrations-section {
    margin-top: 2rem;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 1.5rem;
}

.user-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.user-card {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-soft);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
}

.user-card:hover {
    box-shadow: var(--shadow-strong);
    transform: translateY(-3px);
}

.user-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.user-card-status {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
}

.user-card-status.pending {
    background-color: var(--yellow-100);
    color: var(--yellow-700);
}

.user-card-role {
    font-size: 0.8rem;
    color: var(--gray-500);
    font-weight: 500;
}

.user-card-details {
    flex-grow: 1;
    margin-bottom: 1.5rem;
}

.user-card-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 0.25rem;
}

.user-card-info {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin-bottom: 0.15rem;
}

.user-card-register-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: var(--emerald-600);
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s;
}

.user-card-register-btn:hover {
    background-color: var(--emerald-700);
}

.user-card-register-btn i {
    font-size: 1rem;
}

.empty-state-card {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    padding: 3rem 2rem;
    text-align: center;
    color: var(--gray-600);
}
.empty-icon {
    font-size: 3rem;
    color: var(--emerald-500);
    margin-bottom: 1rem;
}
.empty-text-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}
.empty-text-subtitle {
    font-size: 1rem;
    margin-bottom: 1.5rem;
}
/* Complete Registration Page Specific Styles End */

/* Attendance Reports Page Specific Styles Start */
.attendance-reports-page {
    padding: 1.5rem 2rem;
}

.report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.history-btn {
    background-color: #fff;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    padding: 0.5rem 1rem;
}
.history-btn:hover {
    background-color: var(--gray-100);
}

.report-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.report-stat-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-soft);
}

.stat-icon-bg {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin-bottom: 0.1rem;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-800);
    line-height: 1.2;
}

.report-stats-grid .report-stat-card:nth-child(1) .stat-icon-bg { background-color: #e0fdf4; color: #10b981; }
.report-stats-grid .report-stat-card:nth-child(2) .stat-icon-bg { background-color: #e0fdf4; color: #10b981; }
.report-stats-grid .report-stat-card:nth-child(3) .stat-icon-bg { background-color: #e0fdf4; color: #10b981; }
.report-stats-grid .report-stat-card:nth-child(4) .stat-icon-bg { background-color: #e0fdf4; color: #10b981; }

.filter-export-section .card-header {
    background-color: #fff;
    border-bottom: 1px solid var(--gray-200);
}
.filter-export-section .card-header h3 {
     color: var(--gray-800);
     display: flex;
     align-items: center;
     gap: 0.5rem;
}
.filter-export-section .card-header p {
    color: var(--gray-600);
    font-size: 0.9rem;
}

.filter-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
    gap: 1rem 1.5rem;
    align-items: end;
}

.filter-item {
    min-width: 150px; 
}

.filter-controls label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gray-600);
    margin-bottom: 0.3rem;
    display: block;
}

.filter-controls .form-control {
    font-size: 0.9rem;
    padding: 0.6rem 0.8rem;
}
.filter-controls input[type="date"].form-control {
     height: auto; 
}

.search-wrapper {
    position: relative;
}
.search-icon-filter {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 0.9rem;
}
.search-input-filter {
    padding-left: 2.2rem;
}

.filter-actions {
    grid-column: span 2; 
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    align-items: end;
    flex-wrap: wrap; 
    margin-top: 1rem;
}
@media (max-width: 1200px) { 
     .filter-actions { grid-column: span 1; justify-content: flex-start; }
}
@media (max-width: 768px) { 
     .filter-actions { grid-column: span 1; justify-content: flex-start; }
}


.filter-actions .btn {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
}

.filter-actions .apply-filter-btn {
    background-color: var(--emerald-600) !important;
    border-color: var(--emerald-600) !important;
    color: white !important;
}
.filter-actions .apply-filter-btn:hover {
     background-color: var(--emerald-700) !important;
     border-color: var(--emerald-700) !important;
}

.filter-actions .download-btn {
    background-color: var(--emerald-600) !important;
    border-color: var(--emerald-600) !important;
    color: white !important;
}
.filter-actions .download-btn:hover {
    background-color: var(--emerald-700) !important;
     border-color: var(--emerald-700) !important;
}

.filter-actions .export-csv-btn {
     background-color: var(--red-600) !important;
     border-color: var(--red-600) !important;
     color: white !important;
}
.filter-actions .export-csv-btn:hover {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
}

.attendance-table-card {
    margin-top: 2rem;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--gray-200);
}

.attendance-table-new {
    width: 100%;
    border-collapse: collapse;
}

.attendance-table-new thead {
    background-color: #f9fafb;
}

.attendance-table-new th {
    padding: 0.8rem 1.25rem;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-600);
    border-bottom: 1px solid var(--gray-200);
}

.attendance-table-new tbody tr {
    border-bottom: 1px solid var(--gray-100);
    transition: background-color 0.15s ease;
}

.attendance-table-new tbody tr:hover {
    background-color: var(--emerald-50);
}

.attendance-table-new td {
    padding: 0.8rem 1.25rem;
    vertical-align: middle;
}

.user-cell {
    display: flex;
    flex-direction: column;
}
.user-name {
    font-weight: 600;
    color: var(--gray-800);
}

.department-cell {
    font-size: 0.9rem;
    color: var(--gray-700);
}

.date-cell {
    font-size: 0.9rem;
    color: var(--gray-700);
}

.time-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
}

.time-cell i {
    font-size: 0.9em;
}

.time-cell.time-in {
    background-color: var(--emerald-50);
    color: var(--emerald-700);
}

.time-cell.time-out {
    background-color: var(--red-50);
    color: var(--red-600);
}

.time-cell .status-label {
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.5rem;
    background-color: var(--yellow-100);
    color: var(--yellow-700);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}
.time-cell.absent .status-label {
     background-color: var(--red-100);
     color: var(--red-700);
}

.time-cell.no-time {
    color: var(--gray-400);
    font-style: italic;
    padding: 0.3rem 0;
    display: inline-block;
}
/* Attendance Reports Page Specific Styles End */

/* Filter Styles for Attendance Reports Start */
.filter-controls-new {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.filter-inputs {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 1.5rem;
    align-items: end;
}

.filter-actions-new {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (max-width: 1024px) {
    .filter-inputs {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .filter-inputs {
        grid-template-columns: 1fr;
    }
    .filter-actions-new {
        justify-content: flex-start;
    }
}
/* Filter Styles for Attendance Reports End */

/* User Dashboard Styles Start */
.user-dashboard-body {
    padding: 1.5rem 2rem;
}

.ud-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.ud-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.ud-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--emerald-800);
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--emerald-50);
}

.ud-card-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ud-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
}

.ud-card-label {
    color: var(--gray-600);
    font-weight: 500;
}

.ud-card-value {
    color: var(--gray-800);
    font-weight: 600;
    font-family: monospace;
    font-size: 1rem;
}

.ud-badge {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    text-transform: capitalize;
}

.ud-badge.completed {
    background-color: var(--emerald-100);
    color: var(--emerald-700);
}

.ud-badge.pending {
    background-color: var(--yellow-100);
    color: var(--yellow-700);
}

.ud-badge.not-present {
    background-color: var(--gray-100);
    color: var(--gray-600);
}

.ud-activity-card .ud-card-content {
    padding: 0;
}

.ud-activity-list {
    display: flex;
    flex-direction: column;
}

.ud-activity-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-100);
    gap: 1rem;
}

.ud-activity-item:last-child {
    border-bottom: none;
}

.ud-activity-details {
    display: flex;
    flex-direction: column;
}

.ud-activity-action {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.95rem;
}

.ud-activity-description {
    font-size: 0.85rem;
    color: var(--gray-600);
}

.ud-activity-time {
    font-size: 0.85rem;
    color: var(--gray-500);
    text-align: right;
    flex-shrink: 0;
}

.ud-activity-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    color: var(--gray-500);
}

.ud-activity-empty i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--gray-400);
}
/* User Dashboard Styles End */

/* ADDITIONS FOR SCHEDULE_MANAGEMENT.PHP Start */
#schedule-entry-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 50vh;
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
}

.schedule-entry-row {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    background: white;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--gray-300);
}

.schedule-entry-row .form-group {
    margin: 0;
    flex: 1;
}

.form-group-day { min-width: 140px; }
.form-group-subject { flex: 2; }
.form-group-time { min-width: 120px; }
.form-group-room { min-width: 130px; }

.schedule-entry-row .btn-danger {
    padding: 0.75rem;
    height: calc(1.5em + 1.5rem + 2px);
    flex-shrink: 0;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--gray-400);
}

.card-header-actions {
    display: flex;
    gap: 0.75rem;
}

.table-actions {
    display: none;
}

.managing .table-actions {
    display: table-cell;
}

.modal-content.modal-lg {
    max-width: 1000px;
}

.modal-header.modal-header-danger {
    background: var(--red-50);
}
.modal-header.modal-header-danger h3 {
    color: var(--red-700);
}

.modal-confirm-detail {
    background: var(--gray-50); 
    padding: 1rem; 
    border-radius: 8px; 
    margin-top: 1rem; 
    border: 1px solid var(--gray-200);
}
.modal-confirm-detail strong {
    display: block; 
    font-size: 1.1rem; 
    color: var(--gray-800);
}
.modal-confirm-detail span {
    color: var(--gray-600);
}

.text-danger {
    color: var(--red-600);
}
.mt-1 { margin-top: 1rem; }
.fs-large { font-size: 1rem; }
.fs-small { font-size: 0.9rem; }

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

.schedule-filter-form {
    margin-bottom: 2rem; 
    border-bottom: 1px solid var(--gray-200); 
    padding-bottom: 2rem;
}
.schedule-filter-grid {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 1rem; 
    align-items: end;
}
.schedule-filter-grid .form-group {
    margin: 0;
}

.empty-schedule-message {
    text-align: center; 
    color: var(--gray-500); 
    padding: 40px;
}

.table-user-name {
    font-weight: 600;
}
.table-user-id {
    font-size: 0.85rem; 
    color: var(--gray-600);
}
.table-day-highlight {
    font-weight: 600;
}
/* ADDITIONS FOR SCHEDULE_MANAGEMENT.PHP End */

.toast-message {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--gray-200);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateX(0);
}

.toast-icon {
    flex-shrink: 0;
    font-size: 1.25rem;
    margin-right: 1rem;
}

.toast-content {
    flex-grow: 1;
    color: var(--gray-700);
    font-size: 0.95rem;
    line-height: 1.4;
}
.toast-content p {
    margin: 0;
}

.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--gray-400);
    padding: 0 0 0 1rem;
    opacity: 0.7;
    transition: all 0.2s ease;
}
.toast-close:hover {
    color: var(--gray-700);
    opacity: 1;
}

.toast-info .toast-icon {
    color: var(--blue-500);
}
.toast-warning .toast-icon {
    color: var(--yellow-500);
}
.toast-success .toast-icon {
    color: var(--emerald-500);
}
.toast-danger .toast-icon {
    color: var(--red-500);
}
/* Notification Toast Styles End */

/* COMPLETE REGISTRATION EMPTY STATE Start */
.empty-state-card-content {
    text-align: center; 
    padding: 3rem; 
    color: var(--gray-500);
}

.empty-state-card-content i {
    font-size: 2.5rem; 
    margin-bottom: 1rem;
    color: var(--emerald-500);
}

.empty-state-card-content .empty-state-title {
    font-size: 1.1rem; 
    font-weight: 500;
    color: var(--gray-700);
}

.empty-state-card-content .empty-state-subtitle {
    font-size: 1rem;
    color: var(--gray-600);
}

.card-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.card-header-flex[style*="align-items: center;"] {
     align-items: center;
}

.fs-large {
    font-size: 1rem;
    color: var(--gray-700);
}

.fs-small {
    font-size: 0.9rem;
}
/* COMPLETE REGISTRATION EMPTY STATE End */

/*
 * STYLES FOR THE PUBLIC ATTENDANCE DISPLAY
 * This file styles the 'display.php' page.
 */

body, html {
    height: 100%;
    margin: 0;
    /* Use 'Inter' from your main style.css */
    font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
    /* Use background color from your main style.css */
    background: var(--gray-50, #f9fafb); 
    color: var(--gray-900, #111827);
}

.display-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    position: relative;
}

/* 1. The "Welcome" or "Ready" state */
.default-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.default-state .logo-icon {
    font-size: 8rem;
    color: var(--emerald-600, #059669);
}

.default-state h1 {
    font-size: 4rem;
    font-weight: 700;
    color: var(--gray-800, #1f2937);
    margin: 2rem 0 1rem 0;
}

.default-state p {
    font-size: 2rem;
    color: var(--gray-500, #6b7280);
}

/* 2. The pop-up card that shows on scan */
.scan-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    background: white;
    border-radius: 24px;
    /* Use shadow from your main style.css */
    box-shadow: var(--shadow-strong, 0 8px 24px rgba(0, 0, 0, 0.1)); 
    width: 90%;
    max-width: 800px;
    overflow: hidden;
    
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem;
    border: 4px solid var(--emerald-500, #10b981);
}

/* Animation for showing the card */
.scan-card.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* 3. Card Content */
.scan-card .icon-badge {
    font-size: 3rem;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 2rem;
}

.scan-card .icon-badge.time-in {
    background: var(--emerald-600, #059669);
}

.scan-card .icon-badge.time-out {
    background: var(--red-600, #dc2626);
}

.scan-card .user-name {
    font-size: 4.5rem;
    font-weight: 700;
    color: var(--gray-800, #1f2937);
    line-height: 1.1;
}

.scan-card .scan-status {
    font-size: 3rem;
    font-weight: 600;
    margin: 0.5rem 0;
}

.scan-card .scan-status.time-in {
    color: var(--emerald-700, #047857);
}

.scan-card .scan-status.time-out {
    color: var(--red-700, #B91C1C);
}

.scan-card .time-date {
    font-size: 2rem;
    color: var(--gray-600, #4b5563);
    margin-top: 1.5rem;
}

.user-card-status.registered {
    background-color: var(--emerald-100, #D1FAE5);
    color: var(--emerald-700, #047857);
    font-weight: 600;
}

/* Style for the status area at the bottom of a registered card */
.user-card-registered-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    text-align: center;
    font-weight: 600;
    color: var(--emerald-700, #047857);
    background-color: var(--emerald-50, #ECFDF5);
    border-top: 1px solid var(--emerald-200, #A7F3D0);
    border-radius: 0 0 0.75rem 0.75rem; /* Assumes card has rounded bottom corners */
    margin-top: auto; /* Pushes this div to the bottom of the card */
}


html, body {
    height: 100%;
    margin: 0;
    font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif; 
}

body.display-body, 
html {
    min-height: 100vh;
    height: 100%; 
    margin: 0;
    font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif; 
    background: var(--gray-50, #f9fafb); 
    color: var(--gray-900, #111827);
    position: relative;
    overflow: hidden; /* No scrolling on kiosk */
}

.display-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    position: relative;
}

/* 1. The "Welcome" or "Ready" state */
.default-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.default-state .logo-icon {
    font-size: 8rem;
    color: var(--emerald-600, #059669);
}

.default-state h1 {
    font-size: 4rem;
    font-weight: 700;
    color: var(--gray-800, #1f2937);
    margin: 2rem 0 1rem 0;
}

.default-state p {
    font-size: 2rem;
    color: var(--gray-500, #6b7280);
}

/* 2. The pop-up card that shows on scan */
.scan-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    background: white;
    border-radius: 24px;
    box-shadow: var(--shadow-strong, 0 8px 24px rgba(0, 0, 0, 0.1)); 
    width: 90%;
    max-width: 800px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem;
    border: 4px solid var(--emerald-500, #10b981);
}

.scan-card.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* 3. Card Content */
.scan-card .icon-badge {
    font-size: 3rem;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 2rem;
}

.scan-card .icon-badge.time-in { background: var(--emerald-600, #059669); }
.scan-card .icon-badge.time-out { background: var(--red-600, #dc2626); }

.scan-card .user-name {
    font-size: 4.5rem;
    font-weight: 700;
    color: var(--gray-800, #1f2937);
    line-height: 1.1;
}

.scan-card .scan-status {
    font-size: 3rem;
    font-weight: 600;
    margin: 0.5rem 0;
}

.scan-card .scan-status.time-in { color: var(--emerald-700, #047857); }
.scan-card .scan-status.time-out { color: var(--red-700, #B91C1C); }

.scan-card .time-date {
    font-size: 2rem;
    color: var(--gray-600, #4b5563);
    margin-top: 1.5rem;
}

/* ==============================================
   ATTENDANCE REPORT - CLICKABLE ROW & SUBTITLE
   ============================================== */

/* Makes the user ID subtitle black (dark gray) */
.attendance-table-new .user-id {
    color: var(--gray-800);
}

/* Adds the pointer cursor to the whole row */
.attendance-table-new tbody tr.clickable-row {
    cursor: pointer;
}

/* Adds a hover effect to the whole row */
.attendance-table-new tbody tr.clickable-row:hover {
    background-color: var(--emerald-100);
}

/* Makes the user's name change color when the row is hovered */
.attendance-table-new tbody tr.clickable-row:hover .user-name {
    color: var(--emerald-700);
}

/* --- START: DTR (CS Form 48) Sizing (Final Fix v2) --- */

/* 1. Base styles for the DTR (for Modal Preview)
      We default to a large, readable A4 size. */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body.dtr-body {
    background: var(--gray-100) !important;
    font-family: 'Inter', sans-serif;
}
.dtr-container-wrapper {
    display: flex;
    flex-direction: column; 
    align-items: center;
    gap: 2rem;
    padding: 2rem 0;
}
.dtr-container {
    width: 8.27in;  /* A4 Width */
    height: 18.7in; /* A4 Height */
    margin: 0 auto;
    background: #fff;
    padding: 0.5in;
    border: 1px solid #ccc;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
}

/* 2. Styles for the PREVIEW MODAL */

/* Make the modal wide */
.modal-dtr-preview .modal-content {
    width: 90%;
    max-width: 1750px; /* Wide enough for A4-width preview */
    height: 90vh;
}

/* Make the modal body (gray area) scrollable */
.modal-dtr-preview .modal-body {
    padding: 0;
    overflow: auto; /* This is the ONLY scrollbar */
    height: 100%;
    background: var(--gray-200);
}

/* Make the iframe tall enough for the A4 DTR */
.modal-dtr-preview iframe {
    width: 100%;
    height: 1850px; /* 11.7in is ~1123px. 1250px gives buffer. */
    border: none;
    display: block;
}

/* Styles for the page *inside* the iframe */
body.dtr-body {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important; /* Hide the iframe's *own* scrollbar */
}
body.dtr-body .dtr-container-wrapper {
    padding: 2rem 0; /* Add top/bottom spacing */
}
body.dtr-body .dtr-container-wrapper .dtr-container {
    margin: 0 auto; /* Center the DTR page */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: 1px solid var(--gray-300);
}
body.dtr-body .print-controls {
    display: none !important;
}
/* --- 3. Styles for PRINTING (Final Fix v4) --- */
@media print {
    @page {
        size: A4 portrait;
        margin: 0.5in;
    }
    
    body.dtr-body {
        background: #fff !important;
        overflow: visible !important;
        font-size: 7pt !important; /* Base font size for print */
        -webkit-print-color-adjust: exact !important; 
        print-color-adjust: exact !important;
    }
    
    .print-controls, .modal-dtr-preview {
        display: none !important;
    }
    
    /* This wrapper holds the two DTRs */
    .dtr-container-wrapper {
        padding: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        align-items: flex-start !important;
        width: 100% !important;
    }
    
    /* Override DTR to your exact print size */
    .dtr-container {
        width: 3.5in !important; /* CHANGED to 3.5in as requested */
        height: 9.5in !important;
        padding: 0.2in !important; /* Even smaller padding */
        margin: 0 !important;
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }

    /* --- Force all content inside to shrink (MORE AGGRESSIVE) --- */
    .dtr-container {
        font-size: 7pt !important;
    }
    .dtr-container .dtr-header h2 { 
        font-size: 9pt !important; 
        margin: 0.1rem 0 !important; 
    }
    .dtr-container .dtr-header h3 { 
        font-size: 8pt !important; 
    }
    .dtr-container .info-table { 
        margin-top: 0.15in !important; 
        font-size: 7pt !important; 
    }
    .dtr-container .info-table td {
        padding: 1px 0 !important; /* Tighter row spacing */
    }
    .dtr-container .attendance-table { 
        margin-top: 0.15in !important; 
        font-size: 7pt !important; 
    }
    .dtr-container .attendance-table th {
        font-size: 6pt !important;
    }
    /* This makes the table rows shrink */
    .dtr-container .attendance-table th,
    .dtr-container .attendance-table td {
        padding: 1px !important; /* Tighter padding */
        height: auto !important; /* Let content define height */
    }
    .dtr-container .attendance-table .time-val {
        font-size: 7pt !important;
    }
    
    /* This makes the footer fill remaining space */
    .dtr-container .dtr-footer-content { 
        margin-top: 0.2in !important; 
        line-height: 1.1 !important; 
        font-size: 6pt !important;
        flex-grow: 1 !important; /* Pushes signatures to the bottom */
    }
    .dtr-container .signature-block { 
        margin-top: 0.1in !important; 
        padding-top: 0.1in !important; 
        flex-shrink: 0; /* Don't let the signature block shrink */
    }
    .dtr-container .signature-line { 
        width: 100% !important; 
        padding-top: 0.2in !important; 
    }
    .dtr-container .signature-label { 
        font-size: 6pt !important; 
    }
}
/* --- END: DTR Sizing (Final Fix v4) --- */


/* --- All other DTR styles (unchanged) --- */
.dtr-header {
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
}
.dtr-header h3 {
    font-weight: bold;
    font-size: 1.1rem;
    margin: 0;
    text-align: left;
}
.dtr-header h2 {
    font-weight: bold;
    font-size: 1.3rem;
    margin: 0.5rem 0;
}
.info-table {
    width: 100%;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    border-collapse: collapse;
}
.info-table td {
    padding: 4px 0;
}
.info-table .label {
    white-space: nowrap;
    padding-right: 10px;
}
.info-table .value {
    border-bottom: 1px solid #000;
    width: 100%;
}
.attendance-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    border: 2px solid #000;
    text-align: center;
}
.attendance-table th,
.attendance-table td {
    border: 1px solid #000;
    padding: 5px;
}
.attendance-table th {
    font-weight: bold;
    font-size: 0.8rem;
}
.attendance-table .day-col {
    width: 8%;
}
.attendance-table .col-small {
    width: 10%;
}
.attendance-table .col-large {
    width: 13%;
}
.attendance-table .total-row td {
    font-weight: bold;
    text-align: right;
    padding-right: 1rem;
}
.attendance-table .total-row td:first-child {
    text-align: center;
}
.attendance-table .time-val {
    font-size: 0.85rem;
}
.dtr-footer-content {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.6;
    flex-grow: 1; /* Pushes signature block to the bottom */
}
.signature-block {
    margin-top: 3rem;
    text-align: center;
}
.signature-line {
    border-bottom: 1px solid #000;
    width: 300px;
    margin: 0 auto;
    padding-top: 2rem;
}
.signature-label {
    font-size: 0.8rem;
    margin-top: 0.25rem;
}
.print-controls {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: var(--shadow-strong);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.2s;
    text-decoration: none;
    box-sizing: border-box;
    line-height: 1.5;
    font-family: 'Inter', sans-serif;
}
.btn-primary {
    background: #059669;
    color: white;
    border-color: #059669;
}
.btn-primary:hover {
    background: #047857;
}
.btn-secondary {
    background: #e5e7eb;
    color: #374151;
    border-color: #d1d5db;
}
.btn-secondary:hover {
    background: #d1d5db;
}

/* =========================================
   MOBILE RESPONSIVENESS FIXES
   ========================================= */

/* Default: Hide mobile toggle on desktop */
.btn-mobile-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--gray-700);
    cursor: pointer;
    padding: 0.5rem;
    margin-right: 0.5rem;
}

/* MOBILE ONLY STYLES (Phones) */
@media (max-width: 768px) {
    
    /* 1. Show the Mobile Menu Button */
    .btn-mobile-toggle {
        display: block; 
    }

    /* 2. Hide Bulky Header Elements */
    .hide-on-mobile {
        display: none !important;
    }

    /* 3. Fix Header Layout */
    .main-header {
        position: sticky;
        top: 0;
        flex-direction: row; /* Keep items side-by-side */
        align-items: center;
        justify-content: space-between;
        padding: 1rem; /* Reduce padding */
        gap: 0.5rem;
        z-index: 40; /* Lower than sidebar */
    }

    /* Simplify Title Text */
    .header-title h2 {
        font-size: 1.2rem; 
        margin: 0;
    }
    .header-title p {
        display: none; /* Hide subtitle */
    }

    /* User ID Badge - Make smaller */
    .header-user-id {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }

    /* 4. Fix Sidebar Z-Index & Overlay */
    .sidebar {
        z-index: 100; /* Ensure it is ABOVE the header */
        box-shadow: 5px 0 15px rgba(0,0,0,0.5);
    }

    /* When Mobile Menu is Open */
    .dashboard-container.sidebar-mobile-open .sidebar {
        transform: translateX(0); /* Slide in */
    }

    /* Add Dark Overlay when menu is open */
    .dashboard-container.sidebar-mobile-open::after {
        content: '';
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 90; /* Between content and sidebar */
        backdrop-filter: blur(2px);
    }
}

/* =========================================
   MOBILE RESPONSIVENESS FIXES (FINAL)
   Add this to the bottom of css/style.css
   ========================================= */

@media (max-width: 768px) {
    
    /* 1. Fix Container Width & Remove Sidebar Gap */
    .dashboard-container {
        padding-left: 0 !important; /* Force removal of sidebar space */
        width: 100vw; /* Use full viewport width */
        overflow-x: hidden; /* Prevent horizontal scrolling */
    }

    .main-content {
        width: 100%;
        max-width: 100vw;
        padding-top: 0; 
        /* FIX: Reset margin on mobile so content isn't pushed off-screen */
        margin-left: 0 !important; 
    }

    .main-body.registration-page {
        padding: 1rem !important; /* Reduce padding on mobile */
    }

    /* 2. Fix Registration Stats (Stack them vertically) */
    .registration-stats-grid {
        display: flex !important; /* Switch to Flexbox for easier stacking */
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .reg-stat-card {
        width: 100%; /* Full width cards */
        padding: 1rem;
    }

    /* 3. Fix User Cards Grid */
    .user-cards-container {
        grid-template-columns: 1fr !important; /* Single column */
    }
    
    .user-card {
        width: 100%;
    }

    /* 4. Fix Sidebar Overlay (Make it slide on top) */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 280px !important; /* Smaller width for phones */
        transform: translateX(-100%); /* Hidden by default */
        z-index: 2000; /* Topmost layer */
        transition: transform 0.3s ease-in-out;
        box-shadow: 4px 0 15px rgba(0,0,0,0.5);
    }

    /* Class added by JS to show sidebar */
    .dashboard-container.sidebar-mobile-open .sidebar {
        transform: translateX(0);
    }

    /* Dark Background Overlay when menu is open */
    .dashboard-container.sidebar-mobile-open::after {
        content: '';
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.6);
        z-index: 1500; /* Behind sidebar, above content */
        backdrop-filter: blur(2px);
    }

    /* 5. Fix Header Elements */
    .header-title h2 {
        font-size: 1.25rem; /* Smaller text */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Hide ID and Date on very small screens to save space */
    .header-user-id, #live-time-date {
        display: none !important; 
    }
    
    /* Show Hamburger Button */
    .btn-mobile-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        padding: 0.5rem;
    }
}

/* =========================================
   MOBILE RESPONSIVENESS PART 2 
   (Tables, Profile, & Reports)
   ========================================= */

@media (max-width: 768px) {

    /* --- 1. ATTENDANCE REPORTS FIX --- */
    /* Stack the 4 statistic cards vertically */
    .report-stats-grid {
        display: flex !important;
        flex-direction: column;
        gap: 1rem;
    }
    
    /* Stack the filter inputs (Date, Search, etc.) */
    .filter-inputs {
        grid-template-columns: 1fr !important; 
    }
    
    /* Align filter buttons to the left */
    .filter-actions-new {
        justify-content: flex-start;
        margin-top: 1rem;
    }

    /* --- 2. UNIVERSAL TABLE SCROLLING --- */
    /* This forces ANY card body with a table to scroll horizontally */
    .card-body {
        overflow-x: auto !important; 
        display: block; 
        width: 100%;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS */
    }

    /* Force tables to maintain a minimum width so columns don't squish */
    table, .data-table, .attendance-table-new {
        min-width: 800px; /* Triggers the scrollbar if screen is smaller than 800px */
    }

    /* --- 3. PROFILE PAGE OPTIMIZATIONS --- */
    
    /* Fix Main Profile Grid (Left Card / Right Card) */
    /* This targets the inline style grid-template-columns: 1fr 2fr */
    .main-body > div[style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column;
        gap: 1.5rem !important;
    }

    /* Shrink the User Avatar */
    .card-body > div[style*="width: 120px"] {
        width: 80px !important;
        height: 80px !important;
        font-size: 2rem !important; /* Smaller initials */
        margin-bottom: 1rem !important;
    }

    /* Stack Form Inputs (First Name, Last Name, etc.) */
    form > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Stack Read-Only Info (Faculty ID / Role) */
    .card-body div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    /* Fix Profile Header Buttons (Edit Profile) */
    .card-header[style*="justify-content: space-between"] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    /* Make buttons full width for easier tapping */
    #editProfileBtn, #saveChangesBtn, #cancelEditBtn {
        width: 100%;
    }
    
    /* --- 4. TEXT & SPACING REDUCTIONS --- */
    .card-header h3 {
        font-size: 1.1rem !important; /* Smaller headers */
    }
    
    .card-body h3 {
        font-size: 1.25rem !important; /* Profile name size */
    }
    
    .form-group label {
        font-size: 0.85rem !important;
    }
    
    .form-control {
        font-size: 0.9rem !important;
        padding: 0.6rem !important; /* Reduce input height */
    }
    
    /* Reduce padding inside cards */
    .card-body {
        padding: 1.25rem !important;
    }
}

/* =========================================
   UPDATED CARD HEADERS (Emerald Theme)
   ========================================= */

.card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--emerald-700); /* Darker border for blend */
    background: var(--emerald-600); /* Emerald Green Background */
    border-radius: 16px 16px 0 0; /* Ensure rounded top corners match card */
}

/* Headings inside the header (e.g., "Recent Activity") */
.card-header h2,
.card-header h3 {
    font-size: 1.15rem;
    color: white !important; /* Force white text */
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Subtitles inside the header */
.card-header p {
    color: var(--emerald-100) !important; /* Light green text for subtitles */
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

/* Icons inside the header */
.card-header i, 
.card-header svg {
    color: white !important; /* Force white icons */
}

/* --- Specific Fixes for Other Headers --- */

/* Login Page Header (Optional: Matches theme) */
.login-new-header {
    background: var(--emerald-600);
}
.login-new-header .login-title {
    color: white;
}
.login-new-header .login-subtitle {
    color: var(--emerald-100);
}
/* Login Logo Circle (White bg to stand out on green) */
.login-logo-container {
    background: white;
    color: var(--emerald-600);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Modal Headers (Consistency) */
.modal-header {
    background: var(--emerald-600);
    border-bottom: 1px solid var(--emerald-700);
}
.modal-header h3 {
    color: white !important;
}
.modal-header .modal-close {
    color: var(--emerald-100);
}
.modal-header .modal-close:hover {
    background: rgba(255,255,255,0.2);
    color: white;
}

/* Adjust Filter Card Header (Attendance Reports) if separate */
.filter-export-section .card-header {
    background: var(--emerald-600);
    color: white;
}

/* =========================================
   EMERALD TABS STYLING
   ========================================= */

.tabs {
    background: var(--emerald-600); /* Emerald Green Background */
    border-bottom: 1px solid var(--emerald-700);
    border-radius: 16px 16px 0 0; /* Rounded top corners */
    padding: 0; /* Remove padding to let buttons fill space */
}

.tab-btn {
    color: var(--emerald-100); /* Light green text for inactive tabs */
    font-weight: 500;
    opacity: 0.8;
    border-bottom: 4px solid transparent; /* Reserve space for active line */
    margin: 0;
    border-radius: 0; /* Remove individual button radius */
}

.tab-btn:first-child {
    border-top-left-radius: 16px;
}

.tab-btn:hover {
    background: var(--emerald-500); /* Slightly lighter on hover */
    color: white;
    opacity: 1;
}

.tab-btn.active {
    background: var(--emerald-700); /* Darker green for active tab */
    color: white;
    font-weight: 700;
    opacity: 1;
    border-bottom: 4px solid var(--yellow-400); /* Yellow underline for contrast */
}

/* Hide the old ::after pseudo-element if it exists from previous code */
.tab-btn.active::after {
    display: none;
}

/* =========================================
   DARKER MODAL HEADERS (Warning & Danger)
   ========================================= */

/* Warning Modal (Dark Yellow/Orange) */
.modal-header.warning {
    background-color: #d97706 !important; /* Dark Yellow */
    border-bottom: 1px solid #b45309;
}
.modal-header.warning h3, 
.modal-header.warning i {
    color: white !important;
}
.modal-header.warning .modal-close {
    color: rgba(255,255,255,0.8);
}
.modal-header.warning .modal-close:hover {
    background-color: rgba(255,255,255,0.2);
    color: white;
}

/* Danger Modal (Dark Red) */
.modal-header.danger {
    background-color: var(--red-600) !important; /* Dark Red */
    border-bottom: 1px solid var(--red-700);
}
.modal-header.danger h3,
.modal-header.danger i {
    color: white !important;
}
.modal-header.danger .modal-close {
    color: rgba(255,255,255,0.8);
}
.modal-header.danger .modal-close:hover {
    background-color: rgba(255,255,255,0.2);
    color: white;
}

/* =========================================
   MODAL FULL-WIDTH FIX
   (Removes white gaps around headers)
   ========================================= */

.modal-content {
    padding: 0 !important; /* Remove gap around edges */
    border: none !important; /* Remove default borders */
    overflow: hidden; /* Clip headers to rounded corners */
}

.modal-header {
    margin: 0; /* Ensure no spacing */
    width: 100%; /* Force full width */
    border-top-left-radius: 0; /* Reset to let overflow:hidden handle it */
    border-top-right-radius: 0;
}

.modal-footer {
    margin: 0;
    width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Ensure the body still has breathing room */
.modal-body {
    padding: 1.5rem !important; 
}

/* =========================================
   HISTORY DASHBOARD CARDS
   ========================================= */

.history-card {
    text-decoration: none; /* Remove underline from links */
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    border: 2px solid transparent; /* Invisible border for active state */
}

.history-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-strong);
}

/* Active State (Selected Filter) */
.history-card.active-filter {
    background-color: white;
    border-color: var(--emerald-500); /* Green border for selection */
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
}

/* Specific active colors based on card type */
.history-card.active-filter .stat-value {
    text-decoration: underline;
}

/* =========================================
   SCHEDULE MANAGEMENT (CLEANER LOOK)
   ========================================= */

/* Stats Cards (Blue/Emerald Theme) */
.stat-icon.blue { background: var(--blue-50); color: var(--blue-600); }
.stat-value.blue { color: var(--blue-700); }

/* Accordion Container */
.user-schedule-accordion {
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background: white;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

/* Accordion Header (The User Row) */
.user-schedule-header {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    background: white;
    border: none;
    border-bottom: 1px solid var(--gray-100);
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-align: left;
}
.user-schedule-header:hover { background: var(--gray-50); }
.user-schedule-header.active { background: var(--emerald-50); border-bottom-color: var(--emerald-200); }

.user-schedule-header .user-id {
    color: var(--gray-600) !important;
}

.user-schedule-header .user-name {
    color: var(--gray-900) !important;
}

.user-id {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8); /* Slightly transparent white */
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Columns in Header */
.user-info-col { display: flex; align-items: center; gap: 1rem; flex: 1; }
.user-avatar-small {
    width: 36px; height: 36px;
    background: var(--emerald-500); color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 0.9rem;
}
.user-stats-col { margin-right: 2rem; }
.user-toggle-col i { transition: transform 0.3s ease; color: var(--gray-400); }

/* Accordion Body (Hidden Area) */
.user-schedule-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    background: var(--gray-50);
}

/* Daily Grouping Styling */
.daily-schedule-container {
    padding: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.day-group {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
}

.day-header {
    background: var(--blue-50);
    color: var(--blue-700);
    padding: 0.5rem 1rem;
    font-weight: 700;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--blue-100);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Mini Table inside Day Group */
.day-table {
    width: 100%;
    border-collapse: collapse;
}
.day-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--gray-500);
    background: white;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--gray-100);
}
.day-table td {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--gray-50);
    color: var(--gray-700);
}
.day-table tr:last-child td { border-bottom: none; }

/* Time Pill Style */
.time-pill {
    background: var(--gray-100);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: monospace;
    color: var(--gray-800);
    display: inline-block;
}

/* Clean Buttons */
.btn-icon {
    background: none; border: none; cursor: pointer; padding: 4px;
    border-radius: 4px; transition: background 0.2s;
    color: var(--gray-400);
}
.btn-icon:hover { background: var(--gray-200); color: var(--gray-700); }
.btn-icon.danger:hover { background: var(--red-50); color: var(--red-600); }

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--gray-400);
}
.empty-state i { font-size: 2.5rem; margin-bottom: 1rem; display: block; }

/* Badges */
.badge { padding: 4px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }
.badge-blue { background: var(--blue-50); color: var(--blue-600); }
.day-badge { background: var(--gray-100); padding: 2px 8px; border-radius: 4px; font-weight: 600; font-size: 0.85rem; }

/* =========================================
   SCHEDULE MANAGEMENT (Accordion & Tab Fix)
   ========================================= */

/* Remove rounded corners from tabs */
.tabs {
    border-radius: 0;
}
.tab-btn:first-child {
    border-top-left-radius: 0;
}

/* Make trash icon red */
.btn-icon.danger {
    color: var(--gray-400);
}
.btn-icon.danger:hover {
    background: var(--red-50);
    color: var(--red-600);
}
.btn-icon.danger i {
    color: var(--red-500); /* Makes icon red by default */
    transition: color 0.2s ease;
}
.btn-icon.danger:hover i {
    color: var(--red-600);
}

/* Edit icon color */
.btn-icon:not(.danger) i {
     color: var(--blue-500);
}
.btn-icon:not(.danger):hover i {
     color: var(--blue-600);
}

/* =========================================
   LOGOUT MODAL HEADER (Emerald)
   ========================================= */

#logoutConfirmModal .modal-header {
    background: var(--emerald-600);
    border-bottom: 1px solid var(--emerald-700);
}

/* Ensure the text and icon color is white for readability */
#logoutConfirmModal .modal-header h3 {
    color: white !important; 
}
#logoutConfirmModal .modal-header i {
    color: white !important;
}
#logoutConfirmModal .modal-header .modal-close {
    color: var(--emerald-100);
}
#logoutConfirmModal .modal-header .modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* =========================================
   SCHEDULE MODAL SIZE AND SUBJECT WIDTH FIX
   ========================================= */

/* Increase overall width of the large modal */
.modal-content.modal-lg {
    max-width: 1200px !important; /* Increased from 1000px */
    width: 95% !important; 
}

/* Increase the width/flex ratio of the subject input */
.schedule-entry-row .form-group-subject { 
    /* Changed flex ratio to 4, making it twice as wide as min-width elements */
    flex: 4 !important; 
}

/* Notification Button in Sidebar */
.nav-item-button {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    position: relative;
}

.notification-badge {
    position: absolute;
    top: 8px;
    right: 20px;
    background: var(--red-600);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
}

/* Collapsed sidebar badge positioning */
.dashboard-container.sidebar-collapsed .notification-badge {
    right: 8px;
}

/* Notifications List */
.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.notification-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    transition: all 0.2s ease;
}

.notification-item.unread {
    background: var(--emerald-50);
    border-color: var(--emerald-200);
}

.notification-item.read {
    background: white;
    opacity: 0.7;
}

.notification-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-icon.success { background: var(--emerald-100); color: var(--emerald-600); }
.notification-icon.warning { background: var(--yellow-100); color: var(--yellow-700); }
.notification-icon.error { background: var(--red-50); color: var(--red-600); }
.notification-icon.info { background: var(--blue-50); color: var(--blue-600); }

.notification-content {
    flex: 1;
}

.notification-content p {
    margin: 0 0 0.25rem 0;
    color: var(--gray-800);
    font-size: 0.9rem;
    line-height: 1.4;
}

.notification-time {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.notification-mark-read {
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.notification-mark-read:hover {
    background: var(--emerald-100);
    color: var(--emerald-600);
}

/* =========================================
   USER DASHBOARD NOTE CARD
   ========================================= */

.page-hint-card {
    background: var(--emerald-50);
    border: 1px solid var(--emerald-200);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    box-shadow: var(--shadow-soft);
}

.page-hint-icon {
    width: 48px;
    height: 48px;
    background: var(--emerald-600);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
    font-size: 1.5rem;
}

.page-hint-content h4 {
    color: var(--emerald-800);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.page-hint-content p {
    color: var(--gray-700);
    line-height: 1.6;
    margin: 0;
    font-size: 0.95rem;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .page-hint-card {
        flex-direction: column;
        text-align: center;
    }
    
    .page-hint-icon {
        margin: 0 auto;
    }
}

/* Pending-specific accordion styling */
.pending-accordion {
    border: 1px solid var(--yellow-200);
}

.pending-group {
    border-bottom: 1px solid var(--yellow-100);
}

.pending-group:last-child {
    border-bottom: none;
}

.pending-header {
    background: var(--yellow-50);
    border-bottom: 1px solid var(--yellow-100);
}

.pending-header:hover {
    background: var(--yellow-100);
}

.pending-header.active {
    background: var(--yellow-100);
    border-bottom-color: var(--yellow-200);
}

.pending-avatar {
    background: var(--yellow-500);
}

/* Pending schedule list container */
.pending-schedule-list {
    padding: 1.5rem;
    background: white;
}

.pending-schedule-list table {
    margin-bottom: 1rem;
}

/* Bulk actions bar */
.bulk-actions-bar {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    border-radius: 0 0 8px 8px;
}

.bulk-actions-bar .btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* Badge styles */
.badge-yellow {
    background: var(--yellow-100);
    color: var(--yellow-700);
    font-weight: 600;
}

/* Notification count badge on tab */
.notification-count-badge {
    background: var(--red-600);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 0.5rem;
}

/* Mobile responsiveness for pending accordion */
@media (max-width: 768px) {
    .pending-schedule-list {
        padding: 1rem;
    }
    
    .bulk-actions-bar {
        flex-direction: column;
    }
    
    .bulk-actions-bar .btn {
        width: 100%;
    }
    
    .pending-schedule-list table {
        min-width: 700px;
    }
}

/*
 * STYLES FOR THE PUBLIC ATTENDANCE DISPLAY
 * This file styles the 'display.php' page.
 */

/* Reset & Base */
body.display-body, 
html {
    min-height: 100vh;
    height: 100%; 
    margin: 0;
    font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif; 
    background: var(--gray-50, #f9fafb); 
    color: var(--gray-900, #111827);
    position: relative;
    overflow: hidden; /* No scrolling on kiosk */
}

/* 1. Top Running Date/Time Bar */
.time-date-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #059669; /* Emerald 600 */
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    box-sizing: border-box;
    z-index: 10;
    font-size: 1.5rem;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.time-date-bar i {
    font-size: 1.2rem;
    margin-right: 10px;
    color: #a7f3d0; /* Emerald 200 */
}

/* 2. Slideshow Background */
.slideshow-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: #f3f4f6;
    overflow: hidden;
}

.slideshow-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    background-size: cover;
    background-position: center;
    filter: brightness(0.7); /* Dim images for readability */
}

.slideshow-image.active {
    opacity: 1;
}
.slideshow-image:first-child {
    opacity: 1; /* Fallback */
}

/* 3. Main Container */
.display-container {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Full height minus Header (60px) and Footer (40px) */
    height: calc(100% - 100px); 
    text-align: center;
    position: relative;
    z-index: 5;
    margin-top: 60px;
}

/* 4. Default Welcome State */
.default-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity 0.5s ease;
    padding: 3rem; 
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.default-state .logo-icon {
    font-size: 8rem;
    color: #059669; /* Emerald 600 */
    animation: pulse-logo 2s infinite ease-in-out;
}

.default-state h1 {
    font-size: 4rem;
    font-weight: 700;
    color: #1f2937;
    margin: 2rem 0 1rem 0;
}

.default-state p {
    font-size: 2rem;
    color: #6b7280;
}

.scan-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%) scale(0.95);
    background: white;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3); 
    width: 90%;
    max-width: 800px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem;
    border: 6px solid #10b981;
    z-index: 20;
}

.scan-card.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1); 
}

.scan-card .icon-badge {
    font-size: 4rem;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.scan-card .icon-badge.time-in { background: #059669; }
.scan-card .icon-badge.time-out { background: #dc2626; }
.scan-card .icon-badge.error { background: #f59e0b; }

.scan-card .user-name {
    font-size: 4rem;
    font-weight: 800;
    color: #1f2937 !important; 
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.scan-card .scan-status {
    font-size: 2.5rem;
    font-weight: 600;
    margin: 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.scan-card .scan-status.time-in { color: #047857; }
.scan-card .scan-status.time-out { color: #b91c1c; }
.scan-card .scan-status.error { color: #b45309; }

.scan-card .time-date {
    font-size: 1.8rem;
    color: #4b5563;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid #e5e7eb;
    width: 100%;
    text-align: center;
}

/* 6. Footer */
.display-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: #059669;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 400;
    z-index: 9999;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}

/* Animations */
@keyframes pulse-logo {
    0% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 0.9; }
}

.attendance-table-new .user-name {
    color: #111827 !important;
    font-weight: 700;
}

.time-cell.time-in {
    background-color: #d1fae5 !important; 
    color: #064e3b !important;            
    border: 1px solid #34d399;           
    font-weight: 600;
}

.time-cell.time-out {
    background-color: #fee2e2 !important; 
    color: #7f1d1d !important;            
    border: 1px solid #f87171;            
    font-weight: 600;
}

.attendance-table-new .user-id {
    color: #4b5563 !important; 
}

/* =========================================
   STATUS BADGE COLORS (Late / Present)
   ========================================= */

.status-label {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 6px;
}

/* LATE: Distinct Red to alert the user */
.status-late {
    background-color: #fee2e2 !important; /* Red 100 */
    color: #991b1b !important;            /* Red 800 */
    border: 1px solid #f87171 !important; /* Red 400 */
}

/* PRESENT: Standard Green (matching the Time In box but darker text) */
.status-present {
    background-color: #d1fae5 !important; /* Emerald 100 */
    color: #065f46 !important;            /* Emerald 800 */
    border: 1px solid #34d399 !important; /* Emerald 400 */
}