Attendance management system

Create a complete, modern, and highly polished UI for an "Attendance Management System (AMS)" web application. The design should follow 2026 enterprise SaaS design standards: clean minimalism, subtle shadows, glassmorphism, outstanding typography, and a modern color palette (e.g., slate/indigo or dark slate with emerald accents). Ensure the layout is fully responsive, highly optimized, and features a light/dark mode.

The application has 4 user roles. Implement a dynamic sidebar navigation and a tab-switcher at the top to let me preview the screens for each role:

GLOBAL DESIGN & NAVIGATION SYSTEM:

Responsive layout with a sticky modern sidebar (collapsible) and a clean top navbar with user profile, notifications, and dark/light mode toggle.
Quick-role switcher during preview (Super Admin, Institute Admin, Teacher, Student) to demonstrate all user journeys.

A beautiful glassmorphic login screen with a clean card, role selection tabs (Super Admin, Institute Admin, Teacher, Student), and a modern secure input layout.

SUPER ADMIN DASHBOARD:

Analytics Cards: Total active institutes, total active users, system uptime, and subscription status.
Manage Institutes Workspace: A clean, paginated table/grid showing registered institutes, admins, and quick action buttons to (a) Create Institute Account (opening a modal with automated ID/Password generator), and (b) Edit/Suspend Institute.
Visual Charts: A stylized Chart.js/Recharts representation of attendance trends across different institutes.

INSTITUTE ADMIN DASHBOARD:

Stats overview: Total Teachers, Total Students, Overall Attendance rate.
Quick Actions Panel: Prominent buttons for "Add Teacher" (creating ID/Pass) and "Add/Remove Students".
Unified Management Table: A robust, searchable list with clean pagination for viewing and managing teachers and students dynamically.

TEACHER DASHBOARD (The Core Interface):

Dynamic Selector Panel: A streamlined wizard to "Take Attendance" by selecting: Academic Year -> Semester -> Subject / Lab -> Period -> Date/Time.
Active Student Attendance Sheet: A modern grid/list of students with high-contrast, easily tappable toggle buttons or switches for marking "Present", "Absent", or "Late". Include a global "Mark All Present" toggle.
Locked Data Safety Feature & Live Countdown: Highlight a dynamic warning banner: "Attendance is editable for exactly 30 minutes after submission". Provide an active countdown timer widget showing time remaining for the active session before locking. Previous dates are strictly read-only with a visual "View Only" padlock indicator.

STUDENT DASHBOARD (Progress & Visual Analytics):

Attendance Overview: Radial progress circles showing overall attendance percentage with color-coded risk alerts (e.g., green for >85%, orange for 75-85%, red for <75% critical status).
Academic Analytics: Beautiful bar charts and progress rows detailing Subject-wise and Lab-wise attendance data.
Personal Progress Tracker: A interactive calendar view showing historical present/absent days with quick filters.

Optimize the Tailwind classes for production performance, ensuring semantic UI, accessible contrast (WCAG), smooth transition states, and modular layouts.

The application has 4 user roles. Implement a dynamic sidebar navigation and a tab-switcher at the top to let me preview the screens for each role:

GLOBAL DESIGN & NAVIGATION SYSTEM:

Responsive layout with a sticky modern sidebar (collapsible) and a clean top navbar with user profile, notifications, and dark/light mode toggle.
Quick-role switcher during preview (Super Admin, Institute Admin, Teacher, Student) to demonstrate all user journeys.

A beautiful glassmorphic login screen with a clean card, role selection tabs (Super Admin, Institute Admin, Teacher, Student), and a modern secure input layout.

SUPER ADMIN DASHBOARD:

Analytics Cards: Total active institutes, total active users, system uptime, and subscription status.
Manage Institutes Workspace: A clean, paginated table/grid showing registered institutes, admins, and quick action buttons to (a) Create Institute Account (opening a modal with automated ID/Password generator), and (b) Edit/Suspend Institute.
Visual Charts: A stylized Chart.js/Recharts representation of attendance trends across different institutes.

INSTITUTE ADMIN DASHBOARD:

Stats overview: Total Teachers, Total Students, Overall Attendance rate.
Quick Actions Panel: Prominent buttons for "Add Teacher" (creating ID/Pass) and "Add/Remove Students".
Unified Management Table: A robust, searchable list with clean pagination for viewing and managing teachers and students dynamically.

TEACHER DASHBOARD (The Core Interface):

Dynamic Selector Panel: A streamlined wizard to "Take Attendance" by selecting: Academic Year -> Semester -> Subject / Lab -> Period -> Date/Time.
Active Student Attendance Sheet: A modern grid/list of students with high-contrast, easily tappable toggle buttons or switches for marking "Present", "Absent", or "Late". Include a global "Mark All Present" toggle.
Locked Data Safety Feature & Live Countdown: Highlight a dynamic warning banner: "Attendance is editable for exactly 30 minutes after submission". Provide an active countdown timer widget showing time remaining for the active session before locking. Previous dates are strictly read-only with a visual "View Only" padlock indicator.

STUDENT DASHBOARD (Progress & Visual Analytics):

Attendance Overview: Radial progress circles showing overall attendance percentage with color-coded risk alerts (e.g., green for >85%, orange for 75-85%, red for <75% critical status).
Academic Analytics: Beautiful bar charts and progress rows detailing Subject-wise and Lab-wise attendance data.
Personal Progress Tracker: A interactive calendar view showing historical present/absent days with quick filters.

Optimize the Tailwind classes for production performance, ensuring semantic UI, accessible contrast (WCAG), smooth transition states, and modular layouts.