:root{--font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;--font-size-base: 1rem;--font-size-sm: .875rem;--font-size-lg: 1.25rem;--font-size-xl: 2rem;--line-height: 1.5;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-bold: 700;--color-primary: #007bff;--color-primary-hover: #0056b3;--color-success: #28a745;--color-success-hover: #218838;--color-warning: #ffc107;--color-warning-hover: #e0a800;--color-danger: #dc3545;--color-danger-hover: #c82333;--color-secondary: #6c757d;--color-secondary-hover: #545b62;--color-text: #333;--color-text-light: #666;--color-text-muted: #999;--color-text-inverse: #fff;--color-surface-elevated: #ffffff;--color-table-header-bg: #e9f0fb;--color-table-header-text: #1f2933;--color-section-header-bg: #f1f3f5;--color-section-header-text: #1f2933;--color-header-border: #c5d3e8;--color-bg: #fff;--color-bg-light: #f8f9fa;--color-bg-dark: #343a40;--color-bg-alt: #e9ecef;--color-border: #dee2e6;--color-border-light: #e9ecef;--color-border-dark: #adb5bd;--color-success-bg: #d4edda;--color-success-text: #155724;--color-success-border: #c3e6cb;--color-error-bg: #f8d7da;--color-error-text: #721c24;--color-error-border: #f5c6cb;--color-info-bg: #e7f3ff;--color-info-text: #333;--color-info-border: #b8daff;--color-warning-soft-bg: #fff4d6;--color-warning-soft-border: #ffd9a8;--color-warning-soft-text: #7f4c00;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-xxl: 3rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .1);--shadow-md: 0 2px 4px rgba(0, 0, 0, .1);--shadow-lg: 0 4px 8px rgba(0, 0, 0, .1);--color-status-in: #28a745;--color-status-out: #dc3545;--color-status-none: #aaa;--spacing-dashboard-xs: .05rem;--spacing-dashboard-sm: .1rem;--spacing-dashboard-md: .15rem;--spacing-dashboard-lg: .2rem;font-family:var(--font-family);line-height:var(--line-height);font-weight:var(--font-weight-normal);color:var(--color-text);background-color:var(--color-bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[data-theme=dark]{--color-primary: #4dabf7;--color-primary-hover: #339af0;--color-success: #51cf66;--color-success-hover: #40c057;--color-warning: #ffd43b;--color-warning-hover: #fcc419;--color-danger: #ff6b6b;--color-danger-hover: #fa5252;--color-secondary: #868e96;--color-secondary-hover: #adb5bd;--color-text: #e9ecef;--color-text-light: #adb5bd;--color-text-muted: #868e96;--color-text-inverse: #f8f9fa;--color-bg: #1e1e1e;--color-bg-light: #2d2d2d;--color-bg-dark: #343a40;--color-bg-alt: #252525;--color-border: #404040;--color-border-light: #333333;--color-border-dark: #555555;--color-surface-elevated: #262b33;--color-table-header-bg: #1f2a37;--color-table-header-text: #f8fafc;--color-section-header-bg: #28354a;--color-section-header-text: #f8fafc;--color-header-border: #3a4a5f;--color-success-bg: #1e4620;--color-success-text: #51cf66;--color-success-border: #2f6132;--color-error-bg: #4a1f1f;--color-error-text: #ff6b6b;--color-error-border: #6d2c2c;--color-info-bg: #1e3a52;--color-info-text: #4dabf7;--color-info-border: #2f5578;--color-warning-soft-bg: #4a3520;--color-warning-soft-border: #704c28;--color-warning-soft-text: #f6d7a6;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);--shadow-md: 0 2px 4px rgba(0, 0, 0, .5);--shadow-lg: 0 4px 8px rgba(0, 0, 0, .5);--color-status-in: #51cf66;--color-status-out: #ff6b6b;--color-status-none: #777}body{margin:0;padding:0;width:100vw;height:100vh;overflow:hidden;background-color:var(--color-bg);color:var(--color-text)}#app{width:100vw;height:100vh;margin:0;padding:0;display:flex;flex-direction:column;overflow:hidden;background-color:var(--color-bg);color:var(--color-text)}h1,h2,h3,h4,h5,h6{color:var(--color-text);margin-bottom:var(--spacing-md);font-weight:var(--font-weight-bold)}h1{font-size:var(--font-size-xl)}h2{font-size:var(--font-size-lg)}h3{font-size:var(--font-size-base)}a{color:var(--color-primary);text-decoration:none;font-weight:var(--font-weight-medium)}a:hover{color:var(--color-primary-hover);text-decoration:underline}button{font-family:inherit;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);border:none;border-radius:var(--radius-sm);padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;transition:all .2s ease;background-color:var(--color-primary);color:var(--color-text-inverse)}button:hover:not(:disabled){background-color:var(--color-primary-hover)}button:disabled{opacity:.6;cursor:not-allowed}input,select,textarea{font-family:inherit;font-size:var(--font-size-base);padding:var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-bg);color:var(--color-text)}input:focus,select:focus,textarea:focus{outline:2px solid var(--color-primary);outline-offset:2px;border-color:var(--color-primary)}.page-container{padding:var(--spacing-xl);max-width:1200px;margin:0 auto;height:100%;overflow-y:auto}.message-box{padding:var(--spacing-md);margin-bottom:var(--spacing-md);border-radius:var(--radius-sm);border:1px solid}.message-box.success{background-color:var(--color-success-bg);color:var(--color-success-text);border-color:var(--color-success-border)}.message-box.error{background-color:var(--color-error-bg);color:var(--color-error-text);border-color:var(--color-error-border)}.message-box.info{background-color:var(--color-info-bg);color:var(--color-info-text);border-color:var(--color-info-border)}.action-bar{margin-bottom:var(--spacing-xl);display:flex;gap:var(--spacing-md);flex-wrap:wrap}.form-container{background-color:var(--color-bg-light);padding:var(--spacing-xl);border-radius:var(--radius-md);margin-bottom:var(--spacing-xl);box-shadow:var(--shadow-sm)}.form-group{margin-bottom:var(--spacing-md)}.form-group label{display:block;margin-bottom:var(--spacing-xs);font-weight:var(--font-weight-bold);color:var(--color-text)}.form-group input,.form-group select,.form-group textarea{width:100%;box-sizing:border-box}.form-row{display:flex;gap:var(--spacing-md)}.form-row .form-group{flex:1}.form-actions{margin-top:var(--spacing-lg);display:flex;gap:var(--spacing-md)}.btn-primary{background-color:var(--color-primary);color:var(--color-text-inverse)}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-hover)}.btn-success{background-color:var(--color-success);color:var(--color-text-inverse)}.btn-success:hover:not(:disabled){background-color:var(--color-success-hover)}.btn-warning{background-color:var(--color-warning);color:var(--color-text)}.btn-warning:hover:not(:disabled){background-color:var(--color-warning-hover)}.btn-danger{background-color:var(--color-danger);color:var(--color-text-inverse)}.btn-danger:hover:not(:disabled){background-color:var(--color-danger-hover)}.btn-secondary{background-color:var(--color-secondary);color:var(--color-text-inverse)}.btn-secondary:hover:not(:disabled){background-color:var(--color-secondary-hover)}.btn-sm{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-sm)}.btn-lg{padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-lg)}.data-table{background-color:var(--color-surface-elevated);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-md);margin-bottom:var(--spacing-xl)}.data-table h3{padding:var(--spacing-md);margin:0;background-color:var(--color-section-header-bg);border-bottom:1px solid var(--color-header-border);color:var(--color-section-header-text)}.data-table table{width:100%;border-collapse:collapse}.data-table th,.data-table td{padding:var(--spacing-md);text-align:left;border-bottom:1px solid var(--color-border-light)}.data-table th{background-color:var(--color-table-header-bg);color:var(--color-table-header-text);font-weight:var(--font-weight-bold);border-bottom:2px solid var(--color-header-border)}.data-table tbody tr:nth-child(2n){background-color:var(--color-bg-light)}.data-table tbody tr:nth-child(odd){background-color:var(--color-surface-elevated)}.data-table td{color:var(--color-text)}.data-table .actions{white-space:nowrap}.data-table .actions button{margin-right:var(--spacing-sm)}.role-staff{color:var(--color-primary);font-weight:var(--font-weight-bold)}.file-selected{color:var(--color-success);font-weight:var(--font-weight-bold);margin:var(--spacing-sm) 0}.import-results{margin-top:var(--spacing-xl);padding:var(--spacing-lg);background-color:var(--color-bg-light);border:1px solid var(--color-border);border-radius:var(--radius-sm)}.import-results h4{margin-top:0;color:var(--color-text)}.import-results p{margin:var(--spacing-sm) 0}.import-results details{margin-top:var(--spacing-md)}.import-results summary{cursor:pointer;font-weight:var(--font-weight-bold);color:var(--color-danger)}.read-only-banner{display:flex;align-items:center;gap:.75rem;padding:var(--spacing-md);background-color:var(--color-warning-soft-bg);border:1px solid var(--color-warning-soft-border);border-radius:var(--radius-sm);margin-bottom:var(--spacing-md);color:var(--color-warning-soft-text)}.read-only-banner svg{flex-shrink:0}.read-only-banner strong{font-weight:var(--font-weight-bold)}.error-list{margin:var(--spacing-md) 0;padding-left:var(--spacing-lg)}.error-list li{margin:var(--spacing-sm) 0;color:var(--color-error-text)}code{background-color:var(--color-bg-light);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-family:Courier New,monospace;font-size:var(--font-size-sm);color:var(--color-text-light);border:1px solid var(--color-border)}@media (max-width: 768px){.page-container{padding:var(--spacing-md)}.form-row,.action-bar{flex-direction:column}.data-table table{font-size:var(--font-size-sm)}.data-table th,.data-table td{padding:var(--spacing-sm)}}.dashboard-section-header{background-color:var(--color-section-header-bg);color:var(--color-section-header-text);border:1px solid var(--color-header-border);text-align:center;border-radius:var(--radius-sm);padding:var(--spacing-dashboard-md) var(--spacing-sm);margin-bottom:var(--spacing-dashboard-sm)}.dashboard-section-header h2,.dashboard-section-header h3{margin:0;color:var(--color-section-header-text);text-align:center;font-weight:var(--font-weight-bold)}.status-in{background-color:var(--color-status-in);color:var(--color-text-inverse)}.status-out{background-color:var(--color-status-out);color:var(--color-text-inverse)}.status-none{background-color:var(--color-status-none);color:var(--color-text-inverse)}@keyframes app-spin{to{transform:rotate(360deg)}}.app-shell{flex:1;display:flex;flex-direction:column;min-height:0}.app-loading{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--color-bg-light);color:var(--color-text)}.app-loading p{margin-top:var(--spacing-sm);color:var(--color-text-light)}.app-spinner{width:40px;height:40px;border:4px solid var(--color-border-light);border-top-color:var(--color-primary);border-radius:50%;animation:app-spin 1s linear infinite}.app-nav{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--color-bg-light);border-bottom:1px solid var(--color-border-light);gap:var(--spacing-sm);flex-wrap:wrap}.app-nav-tabs{display:flex;gap:var(--spacing-xs);flex-wrap:wrap}.app-nav button{padding:var(--spacing-xs) var(--spacing-sm);font-size:.9rem;border:1px solid var(--color-border);background-color:var(--color-surface-elevated);color:var(--color-text);cursor:pointer;border-radius:var(--radius-sm);transition:background-color .2s ease,color .2s ease}.app-nav button:hover{background-color:var(--color-bg-alt)}.app-user-info{position:relative;display:flex;align-items:center;gap:var(--spacing-sm)}.app-user-info .theme-toggle{display:flex;align-items:center;justify-content:center;padding:var(--spacing-sm);background-color:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;transition:background-color .2s ease,transform .2s ease}.app-user-info .theme-toggle:hover{background-color:var(--color-bg-alt)}.app-user-info .user-button{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;font-size:.875rem;transition:background-color .2s ease}.app-user-info .user-button:hover{background-color:var(--color-bg-alt)}.app-user-info .user-name{font-weight:var(--font-weight-medium);color:var(--color-text)}.app-user-info .user-role{font-size:.75rem;color:var(--color-text-light);text-transform:uppercase;padding:.125rem .375rem;background-color:var(--color-bg-alt);border-radius:3px}.app-user-info .user-menu{position:absolute;top:100%;right:0;margin-top:var(--spacing-sm);background-color:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:1000;min-width:220px;overflow:hidden}.app-user-info .user-menu-info{display:flex;flex-direction:column;padding:var(--spacing-md);border-bottom:1px solid var(--color-border-light);gap:.25rem}.app-user-info .user-menu-info strong{font-size:.9rem;color:var(--color-text)}.app-user-info .user-menu-info span{font-size:.8rem;color:var(--color-text-light)}.app-user-info .role-badge{margin-top:.5rem;padding:.25rem .5rem;background-color:var(--color-primary);color:var(--color-text-inverse);border-radius:var(--radius-sm);text-transform:uppercase;font-weight:var(--font-weight-medium);align-self:flex-start}.app-user-info .logout-button{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-md);border:none;background-color:transparent;color:var(--color-danger);font-weight:var(--font-weight-medium);cursor:pointer;transition:background-color .2s ease}.app-user-info .logout-button:hover{background-color:var(--color-warning-soft-bg)}.app-overlay{position:fixed;inset:0;z-index:999;background:transparent;border:0;cursor:pointer}.app-main{flex:1;overflow:hidden;min-height:0;background-color:var(--color-bg)}.user-management,.schedule-management,.approved-users-management{height:100%;overflow-y:auto}.user-management__info{margin:var(--spacing-md) 0;padding:var(--spacing-md);background-color:var(--color-info-bg);border:1px solid var(--color-info-border);border-radius:var(--radius-sm);font-size:var(--font-size-sm);color:var(--color-info-text)}.user-management .sortable{position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s ease,color .2s ease}.user-management .sortable:hover{background-color:var(--color-section-header-bg);color:var(--color-section-header-text)}.user-management .sort-header{background:none;border:none;color:inherit;font:inherit;cursor:pointer;padding:0;text-align:left;width:100%;display:flex;align-items:center;justify-content:space-between;font-weight:var(--font-weight-bold)}.user-management .sort-header:hover{color:var(--color-section-header-text)}.user-management .sort-arrow{margin-left:var(--spacing-xs);font-size:1.1em;min-width:1em;display:inline-block;text-align:center}.user-management th.sortable:focus-within{outline:2px solid var(--color-primary);outline-offset:-2px;background-color:var(--color-section-header-bg);color:var(--color-section-header-text)}.user-management .checkbox-label{display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;font-weight:var(--font-weight-normal)}.user-management .checkbox-label input[type=checkbox]{margin:0}.user-management .checkbox-help{margin-top:var(--spacing-xs);font-size:var(--font-size-sm);color:var(--color-text-light);font-style:italic}.reports-page .preset-buttons{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-md);flex-wrap:wrap;justify-content:center}.reports-page .summary-container{background-color:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-lg);margin-bottom:var(--spacing-xl)}.reports-page .summary-container h3{margin-top:0;margin-bottom:var(--spacing-md);text-align:center}.reports-page .summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-md)}.reports-page .summary-card{background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--spacing-md);text-align:center}.reports-page .summary-label{font-size:var(--font-size-sm);color:var(--color-text-light);margin-bottom:var(--spacing-xs)}.reports-page .summary-value{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-text)}.reports-page .summary-value.default-schedule{color:var(--color-warning)}.reports-page .summary-value.positive{color:var(--color-success)}.reports-page .summary-value.negative,.reports-page .summary-value.late{color:var(--color-danger)}.reports-page .summary-value.early{color:var(--color-warning)}.reports-page .badge-id{font-family:monospace;font-weight:var(--font-weight-bold)}.reports-page .hours{text-align:right;font-family:monospace}.reports-page .percentage{text-align:right}.reports-page .time{font-family:monospace;font-size:var(--font-size-sm)}.reports-page .variance.positive,.reports-page .on-time{color:var(--color-success);font-weight:var(--font-weight-bold)}.reports-page .variance.negative,.reports-page .late{color:var(--color-danger);font-weight:var(--font-weight-bold)}.reports-page .early{color:var(--color-warning);font-weight:var(--font-weight-bold)}.reports-page .schedule-badge,.reports-page .event-badge{padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);text-align:center;min-width:60px;display:inline-block}.reports-page .schedule-badge.custom-schedule{background-color:var(--color-primary);color:var(--color-text-inverse)}.reports-page .schedule-badge.default-schedule{background-color:var(--color-warning);color:var(--color-text)}.reports-page .event-badge.event-in{background-color:var(--color-success);color:var(--color-text-inverse)}.reports-page .event-badge.event-out{background-color:var(--color-danger);color:var(--color-text-inverse)}@media (max-width: 768px){.reports-page .summary-grid{grid-template-columns:1fr}.reports-page .preset-buttons{justify-content:stretch}.reports-page .preset-buttons button{flex:1}.reports-page table{font-size:var(--font-size-sm)}.reports-page .data-table{overflow-x:auto}}.scan-logs-page .scan-stats{color:var(--color-text-light);font-weight:var(--font-weight-medium)}.scan-logs-page .timestamp{white-space:nowrap;font-family:monospace;font-size:var(--font-size-sm)}.scan-logs-page .badge-id{font-family:monospace;font-weight:var(--font-weight-bold)}.scan-logs-page .event-badge{padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);text-align:center;min-width:50px;display:inline-block}.scan-logs-page .event-badge.event-in{background-color:var(--color-success);color:var(--color-text-inverse)}.scan-logs-page .event-badge.event-out{background-color:var(--color-danger);color:var(--color-text-inverse)}.scan-logs-page .event-badge.event-unknown{background-color:var(--color-secondary);color:var(--color-text-inverse)}.scan-logs-page .load-more{text-align:center;padding:var(--spacing-lg);border-top:1px solid var(--color-border-light)}.scan-logs-page .filter-container{background-color:var(--color-bg-light);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-lg);margin-bottom:var(--spacing-xl)}.scan-logs-page .filter-container h3{margin-top:0;margin-bottom:var(--spacing-md);color:var(--color-text)}.scan-logs-page .filter-presets{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg);flex-wrap:wrap}.scan-logs-page .filter-form .form-row{display:flex;gap:var(--spacing-md);align-items:flex-end;flex-wrap:wrap}.scan-logs-page .filter-form .form-group{flex:1;min-width:150px}.scan-logs-page .filter-form .form-group:last-child{flex:0 0 auto}@media (max-width: 768px){.scan-logs-page .timestamp{font-size:.75rem}.scan-logs-page .badge-id,.scan-logs-page table{font-size:var(--font-size-sm)}.scan-logs-page .filter-presets{justify-content:center}.scan-logs-page .filter-form .form-row{flex-direction:column;align-items:stretch}.scan-logs-page .filter-form .form-group{min-width:auto}}.approved-users-management{padding:var(--spacing-xl);max-width:1200px;margin:0 auto}.approved-users__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl);gap:var(--spacing-md);flex-wrap:wrap}.approved-users__header h2{margin:0;font-size:1.75rem}.approved-users-management .required{color:var(--color-danger)}.approved-users-management small{display:block;margin-top:var(--spacing-xs);color:var(--color-text-light);font-size:.875rem}.approved-users-management input:disabled{background-color:var(--color-bg-alt);cursor:not-allowed}.approved-users-management .form-actions{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-md);flex-wrap:wrap}.approved-users-management .actions{display:flex;gap:var(--spacing-sm)}.approved-users-management .no-data{text-align:center;padding:var(--spacing-xl);color:var(--color-text-light)}.approved-users-management .role-badge{display:inline-block;padding:.25rem .75rem;border-radius:999px;font-size:.75rem;font-weight:var(--font-weight-medium);text-transform:uppercase}.approved-users-management .role-admin{background-color:#4dabf733;color:var(--color-primary)}.approved-users-management .role-viewer{background-color:#ffd43b33;color:var(--color-warning)}.approved-users-management .role-standard{background-color:#51cf6633;color:var(--color-success)}.approved-users__modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;cursor:pointer}.approved-users__modal{background-color:var(--color-surface-elevated);padding:var(--spacing-xl);border-radius:var(--radius-md);max-width:480px;width:min(480px,90%);box-shadow:var(--shadow-lg);cursor:auto}.approved-users__modal h3{margin-top:0;color:var(--color-danger)}.approved-users__modal .warning{color:var(--color-warning);font-weight:var(--font-weight-medium);margin-top:var(--spacing-sm)}.approved-users__modal-actions{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-lg);justify-content:flex-end}@media (max-width: 768px){.approved-users-management{padding:var(--spacing-lg)}.approved-users__header{flex-direction:column;align-items:stretch}.approved-users__header button{width:100%}.approved-users-management .form-actions{flex-direction:column;align-items:stretch}.approved-users-management .form-actions button{width:100%}}.dashboard-page{padding:.2rem;height:100%;display:flex;flex-direction:column;overflow:hidden}.dashboard-page h1{margin:0 0 .2rem;text-align:center;font-size:clamp(.9rem,2vw,1.2rem)}.dashboard-page .dashboard-container{flex:1;display:flex;flex-direction:column;gap:var(--spacing-dashboard-md);overflow:hidden}.dashboard-page .dashboard-section-header h2,.dashboard-page .dashboard-section-header h3{font-size:clamp(.6rem,1.2vw,.8rem)}.dashboard-page .staff-table{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--spacing-dashboard-sm);margin-bottom:var(--spacing-dashboard-lg)}.dashboard-page .students-container{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--spacing-dashboard-md);overflow:hidden}.dashboard-page .grade-section{display:flex;flex-direction:column;min-height:0}.dashboard-page .students-table{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:var(--spacing-dashboard-sm);flex:1;overflow:hidden;padding:var(--spacing-dashboard-sm)}.dashboard-page .user-row{display:flex;flex-direction:column;padding:var(--spacing-dashboard-sm) var(--spacing-dashboard-lg);border-radius:2px;font-size:clamp(.5rem,.8vw,.6rem);line-height:1.1;min-height:25px;justify-content:center}.dashboard-page .user-name{font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-dashboard-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dashboard-page .user-status{font-size:.9em;opacity:.9;margin-bottom:var(--spacing-dashboard-xs)}.dashboard-page .user-time{font-size:.8em;opacity:.8}@media (max-width: 1400px){.dashboard-page .students-container{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.dashboard-page .students-table{grid-template-columns:repeat(auto-fit,minmax(70px,1fr))}}@keyframes scanner-attention-pulse{0%{background-color:#ffe6e6}to{background-color:#fcc}}@keyframes scanner-window-attention{0%{background-color:#f66}to{background-color:#c00}}@keyframes scanner-blink{0%,50%{opacity:1}51%,to{opacity:.3}}.scanner-page{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:100%;padding:0;text-align:center}.scanner-page h1{font-size:2.5rem;margin-bottom:1.5rem}.scanner-page form{display:flex;flex-direction:column;align-items:center;gap:1rem}.scanner-input{font-size:2rem;text-align:center;padding:.5rem 1rem;width:300px;border:2px solid var(--color-border-dark);border-radius:var(--radius-sm);background-color:var(--color-bg);transition:border-color .2s ease,box-shadow .2s ease}.scanner-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #007bff40}.scanner-input.unfocused{background-color:#ffe6e6;border-color:var(--color-danger);animation:scanner-attention-pulse 1s ease-in-out infinite alternate}.scanner-button{padding:.75rem 2rem;font-size:1.2rem}.scanner-page.window-unfocused{background-color:#f66;animation:scanner-window-attention 1.5s ease-in-out infinite alternate}.scanner-page.window-unfocused h1{color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.scanner-page.window-unfocused h1:after{content:" - CLICK TO ACTIVATE";font-size:.6em;display:block;margin-top:.5rem;animation:scanner-blink 1s infinite}.scanner-page .message-container{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}.scanner-page .message-list{display:flex;flex-direction:column;gap:.5rem;align-items:center}.scanner-page .scan-message{padding:1rem;border-radius:var(--radius-sm);font-weight:var(--font-weight-bold);opacity:1;transition:opacity .5s ease-out;min-width:250px;box-shadow:var(--shadow-md);pointer-events:auto}.scanner-page .scan-message.success{background-color:var(--color-success-bg);color:var(--color-success-text);border:1px solid var(--color-success-border)}.scanner-page .scan-message.error{background-color:var(--color-error-bg);color:var(--color-error-text);border:1px solid var(--color-error-border)}.scanner-page .scan-message.info{background-color:var(--color-info-bg);color:var(--color-info-text);border:1px solid var(--color-info-border)}.scanner-page .scan-message.fading{opacity:0}.login-container{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-primary) 0%,#764ba2 100%);font-family:var(--font-family);padding:var(--spacing-lg)}.login-card{background-color:var(--color-surface-elevated);padding:3rem 2.5rem;border-radius:var(--radius-lg);box-shadow:0 20px 60px #0000004d;text-align:center;max-width:400px;width:min(90%,400px)}.login-card .logo{color:var(--color-primary);margin-bottom:1.5rem}.login-card h1{font-size:1.75rem;margin:0 0 .5rem;color:var(--color-text);font-weight:var(--font-weight-medium)}.login-card .subtitle{color:var(--color-text-light);margin:0 0 2rem;font-size:1rem}.login-card .error-message{display:flex;align-items:center;gap:.75rem;background-color:var(--color-error-bg);color:var(--color-error-text);padding:1rem;border-radius:var(--radius-md);margin-bottom:1.5rem;border:1px solid var(--color-error-border);text-align:left}.login-card .error-message svg{flex-shrink:0}.google-signin-btn{display:flex;align-items:center;justify-content:center;gap:.75rem;width:100%;padding:.875rem 1.5rem;background-color:var(--color-surface-elevated);border:2px solid var(--color-border-light);border-radius:var(--radius-md);font-size:1rem;font-weight:var(--font-weight-medium);color:var(--color-text);cursor:pointer;transition:all .2s ease}.google-signin-btn:hover{background-color:var(--color-bg-light);border-color:var(--color-border);box-shadow:0 4px 12px #0000001a}.google-signin-btn:active{transform:scale(.98)}.google-icon{width:20px;height:20px}.login-card .help-text{margin-top:2rem;font-size:.875rem;color:var(--color-text-light);line-height:1.5}@media (max-width: 480px){.login-card{padding:2.5rem 1.75rem}}@media (max-width: 1000px){.dashboard-page .students-container{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.dashboard-page .students-table{grid-template-columns:repeat(auto-fit,minmax(60px,1fr))}.dashboard-page .staff-table{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}}@media (max-width: 768px){.dashboard-page{padding:var(--spacing-dashboard-sm)}.dashboard-page .students-container{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}.dashboard-page .students-table{grid-template-columns:repeat(auto-fit,minmax(50px,1fr))}.dashboard-page .staff-table{grid-template-columns:repeat(auto-fit,minmax(80px,1fr))}.dashboard-page .user-row{min-height:20px;padding:var(--spacing-dashboard-xs) var(--spacing-dashboard-sm)}}@media (max-height: 700px){.dashboard-page h1{margin-bottom:var(--spacing-dashboard-sm);font-size:clamp(.7rem,1.5vw,.9rem)}.dashboard-page .dashboard-container{gap:var(--spacing-dashboard-sm)}.dashboard-page .dashboard-section-header{padding:var(--spacing-dashboard-sm) var(--spacing-sm)}.dashboard-page .user-row{min-height:20px;padding:var(--spacing-dashboard-xs) var(--spacing-dashboard-md)}}