*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.loginsignup{width:100%;min-height:100vh;background:#f0f2f5;padding-top:100px;display:flex;justify-content:center;align-items:flex-start}.loginsignup-container{width:580px;height:auto;background:#fff;padding:40px 60px;border-radius:10px;box-shadow:0 4px 20px #0000001a;display:flex;flex-direction:column}.loginsignup-container h1{margin:0 0 30px;color:#333;font-size:36px;font-weight:700;text-align:center}.loginsignup-fields{display:flex;flex-direction:column;gap:25px;margin-top:20px}.loginsignup-fields input{height:60px;width:100%;padding-left:20px;border:1px solid #c9c9c9;outline:none;color:#5c5c5c;font-size:16px;border-radius:5px;box-sizing:border-box;transition:border .3s ease}.loginsignup-fields input:focus{border:1px solid #ff4141}.loginsignup-container button{width:100%;height:60px;color:#fff;background:#ff4141;margin-top:30px;border:none;font-size:20px;font-weight:600;cursor:pointer;border-radius:5px;transition:background .3s ease}.loginsignup-container button:hover{background:#e63939}.loginsignup-login{margin-top:25px;color:#5c5c5c;font-size:16px;font-weight:500;text-align:center}.loginsignup-login span{color:#ff4141;font-weight:600;cursor:pointer;margin-left:5px}@media(max-width:800px){.loginsignup{padding-top:50px;align-items:center}.loginsignup-container{width:90%;padding:30px 20px}.loginsignup-container h1{font-size:28px}.loginsignup-fields input{height:50px}.loginsignup-container button{height:50px;font-size:18px}}:root{--primary: #2563eb;--primary-hover: #1d4ed8;--bg-color: #f1f5f9;--card-bg: #ffffff;--text-dark: #1e293b;--text-gray: #64748b;--success-bg: #dcfce7;--success-text: #166534;--danger: #ef4444;--shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)}body{background-color:var(--bg-color);font-family:Inter,sans-serif;margin:0}.sales-dashboard-container{max-width:1400px;margin:0 auto;padding:20px;display:flex;flex-direction:column;gap:25px}.sales-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px;background:var(--card-bg);padding:20px;border-radius:12px;box-shadow:var(--shadow)}.sales-header-left h1{font-size:24px;font-weight:800;color:var(--text-dark);margin:0}.sales-welcome-text{color:var(--text-gray);font-size:14px;margin-top:5px;font-weight:500}.sales-user-highlight{color:var(--primary);font-weight:700}.sales-header-buttons{display:flex;gap:10px}.sales-btn-add{background:var(--primary);color:#fff;border:none;padding:10px 18px;border-radius:8px;cursor:pointer;font-weight:600;transition:.2s}.sales-btn-logout{background:#fff;color:var(--danger);border:1px solid var(--danger);padding:10px 18px;border-radius:8px;cursor:pointer;font-weight:600;transition:.2s}.sales-btn-add:hover{background:var(--primary-hover)}.sales-btn-logout:hover{background:#fef2f2}.sales-attendance-section{background:var(--card-bg);padding:25px;border-radius:16px;box-shadow:var(--shadow);border:1px solid #e2e8f0}.sales-welcome-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px;margin-bottom:20px}.sales-clock-wrapper{display:flex;align-items:center;gap:12px;font-size:1.8rem;font-weight:700;color:var(--text-dark)}.sales-date-text{font-size:.9rem;color:var(--text-gray);font-weight:400}.sales-status-badge{padding:8px 16px;border-radius:50px;font-weight:600;font-size:.9rem}.sales-status-live{background:var(--success-bg);color:var(--success-text)}.sales-status-offline{background:#f1f5f9;color:var(--text-gray)}.sales-controls-row{display:flex;gap:15px;flex-wrap:wrap;align-items:center}.sales-task-input{flex:1;padding:12px;border:1px solid #cbd5e1;border-radius:8px;min-width:200px}.sales-btn-check-in,.sales-btn-check-out{padding:12px 24px;border:none;border-radius:8px;cursor:pointer;font-weight:600;display:flex;align-items:center;gap:8px;color:#fff}.sales-btn-check-in{background:#10b981}.sales-btn-check-out{background:#ef4444}.sales-payroll-info{margin-top:20px;padding-top:15px;border-top:1px solid #e2e8f0;display:flex;gap:30px;font-size:.95rem;color:var(--text-gray)}.sales-section-title{color:var(--text-gray);margin-bottom:15px;font-size:1.1rem}.sales-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}.sales-course-card{background:var(--card-bg);padding:25px;border-radius:16px;box-shadow:var(--shadow);text-align:center;cursor:pointer;border:1px solid #e2e8f0;transition:transform .3s ease}.sales-course-card:hover{transform:translateY(-5px);border-color:var(--primary)}.sales-course-name{font-size:1.2rem;font-weight:800;color:var(--text-dark);margin-bottom:15px}.sales-count-badge{padding:6px 14px;border-radius:20px;font-size:.85rem;font-weight:700;display:inline-block}.sales-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;padding:20px}.sales-modal-content{background:#fff;padding:30px;border-radius:16px;width:100%;max-width:450px;box-shadow:0 20px 25px -5px #0000001a}.sales-modal-form input,.sales-modal-form select{width:100%;padding:12px;margin-bottom:15px;border:1px solid #cbd5e1;border-radius:8px;box-sizing:border-box}.sales-btn-save{width:100%;padding:12px;background:var(--primary);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer}@media(max-width:768px){.sales-dashboard-container{padding:15px}.sales-header{flex-direction:column;align-items:flex-start}.sales-header-buttons{width:100%;justify-content:space-between}.sales-btn-add,.sales-btn-logout{flex:1;text-align:center}.sales-welcome-row{flex-direction:column;align-items:flex-start}.sales-controls-row{flex-direction:column;width:100%}.sales-task-input{width:100%}.sales-btn-check-in,.sales-btn-check-out{width:100%;justify-content:center}}@media(max-width:480px){.sales-clock-wrapper{font-size:1.4rem}.sales-card-grid{grid-template-columns:1fr}}.history-card-container{background:#fff;border-radius:16px;box-shadow:0 4px 20px #0000000d;padding:25px;border:1px solid #e2e8f0;overflow:hidden}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid #f1f5f9}.history-header h3{margin:0;font-size:18px;color:#1e293b;font-weight:700}.history-badge{background:#eff6ff;color:#3b82f6;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600}.history-table-wrapper{overflow-x:auto}.modern-history-table{width:100%;border-collapse:separate;border-spacing:0}.modern-history-table th{background-color:#f8fafc;color:#64748b;font-weight:600;text-transform:uppercase;font-size:12px;letter-spacing:.5px;padding:15px;text-align:left;border-bottom:1px solid #e2e8f0}.modern-history-table td{padding:15px;border-bottom:1px solid #f1f5f9;font-size:14px;color:#334155;vertical-align:middle}.modern-history-table tr:last-child td{border-bottom:none}.modern-history-table tr:hover td{background-color:#f8fafc}.status-completed{background-color:#dcfce7;color:#166534;padding:4px 10px;border-radius:6px;font-weight:600;font-size:12px}.status-ongoing{background-color:#fff7ed;color:#c2410c;padding:4px 10px;border-radius:6px;font-weight:600;font-size:12px;border:1px solid #ffedd5}.status-pending{color:#ef4444;font-style:italic;font-size:12px}.status-success{background-color:#e0e7ff;color:#4338ca;padding:5px 10px;border-radius:6px;font-weight:700;font-size:13px}.no-data{text-align:center;padding:30px!important;color:#94a3b8;font-style:italic}.pagination-controls{display:flex;justify-content:flex-end;align-items:center;gap:15px;margin-top:20px;padding-top:15px;border-top:1px solid #f1f5f9}.pagination-btn{display:flex;align-items:center;gap:5px;padding:8px 16px;border:1px solid #e2e8f0;background:#fff;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;color:#475569;transition:all .2s}.pagination-btn:hover:not(:disabled){background:#f1f5f9;color:#1e293b;border-color:#cbd5e1}.pagination-btn:disabled{opacity:.5;cursor:not-allowed;background:#f8fafc}.pagination-info{font-size:14px;color:#64748b;font-weight:500}*{margin:0;padding:0;box-sizing:border-box}.dashboard-container{display:flex;width:100%;height:100vh;background-color:#f4f6f9;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow:hidden}.sidebar{width:260px;background-color:#0d1b2a;color:#fff;display:flex;flex-direction:column;padding:25px 20px;justify-content:space-between;flex-shrink:0;height:100vh}.brand h2{color:#4cc9f0;margin-bottom:40px;font-size:22px}.nav-links{list-style:none}.nav-links li{padding:12px 15px;cursor:pointer;color:#a0aab5;font-size:15px;display:flex;align-items:center;gap:12px;transition:all .3s;border-radius:8px;margin-bottom:8px}.nav-links li.active{color:#fff;background-color:#1b263b;font-weight:600}.nav-links li:hover{color:#fff;background-color:#1b263b}.user-profile{display:flex;align-items:center;gap:12px;padding-top:20px;border-top:1px solid #1b263b}.avatar-circle{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#4cc9f0,#3a9ec9);display:flex;align-items:center;justify-content:center;font-weight:700}.logout-btn{color:#ff4d4d;cursor:pointer;font-size:13px}.main-content{flex:1;padding:30px 40px;overflow-y:auto;background-color:#f4f6f9;height:100vh}.header-title h1{font-size:28px;color:#1b263b;margin-bottom:5px}.header-title p{color:#789;margin-bottom:30px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-bottom:30px}.stat-card{background:#fff;padding:24px;border-radius:12px;box-shadow:0 2px 10px #0000000d;cursor:pointer;transition:.3s}.stat-card:hover{transform:translateY(-5px)}.stat-card h3{font-size:13px;color:#789;text-transform:uppercase}.stat-card p{font-size:32px;font-weight:700;margin:10px 0}.bottom-section{display:grid;grid-template-columns:2fr 1fr;gap:20px}.chart-card,.logs-card{background:#fff;padding:25px;border-radius:12px;box-shadow:0 2px 10px #0000000d}.attendance-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:20px}.summary-item{background:#f8f9fa;padding:15px;border-radius:10px;text-align:center}.logs-list{list-style:none}.logs-list li{padding:12px 0;border-bottom:1px solid #eee;display:flex;justify-content:space-between;font-size:14px}.dashboard-container{display:flex!important;flex-direction:row!important;width:100vw!important;height:100vh!important;overflow:hidden}.sidebar{width:260px;flex-shrink:0;background-color:#0d1b2a;height:100vh}.main-content{flex-grow:1!important;height:100vh;overflow-y:auto;background-color:#f4f6f9}.nav-links li.active{background-color:#1b263b;color:#fff}.emp-container{padding:20px;background:#fff;border-radius:12px;box-shadow:0 4px 15px #0000000d;max-width:1200px;margin:0 auto}.emp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;flex-wrap:wrap;gap:15px}.emp-title{font-size:22px;font-weight:700;color:#1f2937;margin:0}.btn-add{background:#2563eb;color:#fff;padding:10px 20px;border:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:600;transition:.2s}.btn-add:hover{background:#1d4ed8}.emp-form-container{background:#f8fafc;padding:25px;border-radius:12px;margin-bottom:30px;border:1px solid #e2e8f0}.emp-form-grid{display:grid;grid-template-columns:1fr;gap:15px;margin-top:15px}.emp-input,.emp-select{padding:12px;border:1px solid #cbd5e1;border-radius:8px;font-size:14px;outline:none;width:100%;box-sizing:border-box}.form-actions{display:flex;gap:10px;margin-top:10px}.btn-save{background:#10b981;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;font-weight:700;flex:1}.btn-cancel{background:#ef4444;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;font-weight:700;flex:1}.emp-list-header{display:none;grid-template-columns:2fr 2fr 1.5fr 1.5fr 1.5fr .5fr;padding:15px;background:#f1f5f9;border-radius:8px;margin-bottom:15px;font-weight:600;color:#475569}.emp-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;margin-bottom:15px;box-shadow:0 2px 5px #00000005;display:flex;flex-direction:column;gap:12px;transition:transform .2s}.emp-card:hover{transform:translateY(-2px);box-shadow:0 5px 15px #00000014;border-color:#cbd5e1}.emp-data-row{display:flex;justify-content:space-between;align-items:center}.emp-label{font-size:12px;color:#94a3b8;text-transform:uppercase;font-weight:700}.emp-value{font-size:15px;color:#334155;font-weight:500}.emp-name{font-size:18px;font-weight:700;color:#1e2937}.emp-email{color:#64748b;font-size:14px}.btn-delete{background:#fee2e2;color:#ef4444;border:none;padding:8px;border-radius:8px;cursor:pointer;display:flex;justify-content:center;align-items:center;width:100%;margin-top:10px}@media(min-width:768px){.emp-form-grid{grid-template-columns:1fr 1fr}.emp-list-header{display:grid}.emp-card{display:grid;grid-template-columns:2fr 2fr 1.5fr 1.5fr 1.5fr .5fr;align-items:center;padding:15px;gap:0;border-radius:0;border:none;border-bottom:1px solid #e2e8f0;box-shadow:none;margin-bottom:0}.emp-card:hover{transform:none;background:#f8fafc}.emp-label{display:none}.btn-delete{width:auto;margin-top:0;background:transparent}.btn-delete:hover{background:#fee2e2}}