/* * zimun-dashboard.css * * Page-scoped styles for the main dashboard surface * (calendar + agenda + analytics widgets). * Loaded only by templates whose carries `page-dashboard`. */ /* ---- Dashboard-only calendar sizing (scoped) ---- */ .page-dashboard .grid { /* make calendar ~45% and right column ~55% on desktop */ grid-template-columns: 0.9fr 1.1fr; gap: 24px; align-items: start; } .page-dashboard .calendar { /* cap visual width so it never dominates */ max-width: 480px; } @media (max-width: 980px) { .page-dashboard .grid { grid-template-columns: 1fr; /* stack on tablet/mobile */ } .page-dashboard .calendar { max-width: none; /* use full width on small screens */ } } /* Tighter mini-calendar UI */ .page-dashboard .cal-title { font-size: 16px; } .page-dashboard .cal-weekdays { font-size: 11px; } .page-dashboard .cal-grid { gap: 4px; } .page-dashboard .day { border-radius: 8px; font-size: 13px; } /* ---- Dashboard layout: calendar + analytics side-by-side ---- */ .page-dashboard .top-row { display: grid; grid-template-columns: 1fr 0.8fr; /* Calendar bigger than Analytics */ gap: 24px; align-items: start; margin-bottom: 28px; } @media (max-width: 900px) { .page-dashboard .top-row { grid-template-columns: 1fr; /* stack vertically on small screens */ } } /* keep calendar compact */ .page-dashboard .calendar { max-width: 520px; } /* Agenda column sizes to content; do not flex-grow the list */ .page-dashboard #agendaCard { display: flex; flex-direction: column; align-self: start; height: auto !important; } .page-dashboard #agendaCard .agenda-list { flex: 0 0 auto !important; justify-content: flex-start; align-content: flex-start; } .page-dashboard #agendaCard .agenda-section { flex: 0 0 auto; } /* ---- Dashboard top row equal height layout ---- */ .page-dashboard .top-row { display: grid; grid-template-columns: 1fr 0.8fr; gap: 24px; align-items: stretch; /* ensure same height */ margin-bottom: 28px; } /* Both cards fill available height */ .page-dashboard .top-row .card { height: 100%; display: flex; flex-direction: column; } /* Allow calendar grid to expand naturally */ .page-dashboard .calendar { max-width: 520px; flex-grow: 1; } /* Agenda alignment */ .page-dashboard #agendaCard { display: flex; flex-direction: column; justify-content: flex-start; position: relative; overflow: hidden; } .page-dashboard #agendaCard .agenda-list { margin-top: 16px; } /* Responsive stacking */ @media (max-width: 900px) { .page-dashboard .top-row { grid-template-columns: 1fr; } .page-dashboard .top-row .card { height: auto; } } /* Restore spacing between top-row (calendar+analytics) and settings */ .page-dashboard .grid { display: grid; gap: 32px; /* add consistent vertical gap between stacked sections */ } .page-dashboard .top-row { margin-bottom: 0; /* remove manual bottom margin; grid gap handles it now */ } /* --- Dashboard container must be a single column --- */ .page-dashboard .grid { display: grid; grid-template-columns: 1fr !important; /* override global .grid */ gap: 32px; /* vertical spacing between top-row and settings */ } /* Top row: calendar + analytics side-by-side */ .page-dashboard .top-row { display: grid; grid-template-columns: 1fr 0.8fr; gap: 24px; align-items: stretch; } @media (max-width: 900px) { .page-dashboard .top-row { grid-template-columns: 1fr; /* stack on small screens */ } } /* Ensure visual spacing between top-row (Calendar+Analytics) and Settings */ .page-dashboard .top-row { margin-bottom: 32px; /* reintroduce clean spacing below the top section */ } /* Attendance analytics table: dashboard-only (uses #attendanceAnalytics) */ #attendanceAnalytics .analytics-table-wrap { margin-top: 14px; width: 100%; overflow-x: auto; } #attendanceAnalytics .analytics_table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: auto; min-width: 720px; } #attendanceAnalytics .analytics_table th, #attendanceAnalytics .analytics_table td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; } #attendanceAnalytics .analytics_table th { text-align: left; font-size: 13px; font-weight: 700; color: var(--primary-700); background: #f8fafc; position: sticky; top: 0; z-index: 1; } #attendanceAnalytics .analytics_table td { font-size: 14px; } #attendanceAnalytics .analytics_table th:first-child, #attendanceAnalytics .analytics_table td:first-child { width: 40%; min-width: 180px; } #attendanceAnalytics .analytics_table th:not(:first-child), #attendanceAnalytics .analytics_table td:not(:first-child) { text-align: right; } #attendanceAnalytics .analytics_table tbody tr:nth-child(even) { background: #fbfdff; } #attendanceAnalytics .analytics_table tbody tr:hover { background: #f1f5f9; } /* dashboard calendar interactivity */ .page-dashboard .calendar { cursor: pointer; position: relative; } @media (max-width: 900px) { .page-dashboard .top-row { margin-bottom: 40px; } } /* ---- Dashboard mobile canonical overrides ---- */ .page-dashboard { overflow-x: clip; } .page-dashboard main, .page-dashboard .container, .page-dashboard .card { min-width: 0; } .page-dashboard .grid { grid-template-columns: 1fr !important; gap: 24px; } .page-dashboard .top-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 24px; } .page-dashboard .calendar, .page-dashboard #agendaCard { max-width: 100%; min-width: 0; } #attendanceAnalytics .analytics_table { min-width: 640px; } @media (max-width: 900px) { .page-dashboard .top-row { grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; } } @media (max-width: 640px) { .page-dashboard .cal-head { flex-direction: column; align-items: stretch; gap: 10px; } .page-dashboard .cal-title { font-size: 15px; text-align: center; } .page-dashboard .cal-nav { width: 100%; justify-content: center; flex-wrap: wrap; } .page-dashboard .cal-weekdays { gap: 2px; font-size: 10px; } .page-dashboard .cal-grid { gap: 2px; } .page-dashboard .day { aspect-ratio: auto; min-height: 34px; font-size: 12px; border-radius: 7px; } .page-dashboard #agendaCard { margin-top: 4px; } .page-dashboard .agenda-list { margin-top: 10px; gap: 10px; } .page-dashboard .agenda-day { padding-top: 8px; } #attendanceAnalytics .analytics_table { min-width: 560px; } } @media (max-width: 420px) { .page-dashboard .cal-title { font-size: 14px; } .page-dashboard .cal-nav { gap: 4px; } .page-dashboard .cal-weekdays { gap: 1px; font-size: 9px; } .page-dashboard .day { min-height: 28px; font-size: 11px; border-radius: 6px; } }