:root{--primary: #D7A876;--accent: #8B6B3E;--background: #FBF9E6;--text-dark: #3B2F1E;--text-light: #FFFFFF;--border: #E2D8B8;--card-bg: #FFFFFF;--input-bg: #F6EACB;--hover-bg: #F3E2B8}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--background);color:var(--text-dark)}.layout{display:flex;min-height:100vh}.sidebar{width:260px;min-height:100vh;background:linear-gradient(180deg,#d2ddb7,#e8efcf,#f6eacb);color:var(--text-dark);padding:25px 20px;display:flex;flex-direction:column;box-shadow:4px 0 18px #3b2f1e2e}.sidebar h2{text-align:center;margin-bottom:30px;font-size:22px;font-weight:700}.sidebar-toggle{width:44px;height:44px;background:linear-gradient(135deg,#d7a876,#c7955e);border-radius:10px;display:none;position:fixed;top:14px;left:14px;z-index:1100;align-items:center;justify-content:center;flex-direction:column;gap:5px}.sidebar-toggle span{width:22px;height:3px;background:#3b2f1e;border-radius:2px;transition:all .3s ease}.sidebar-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.sidebar-toggle.open span:nth-child(2){opacity:0}.sidebar-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}.nav-btn{display:block;width:100%;padding:14px 16px;margin-bottom:12px;border-radius:14px;background:#ffffffa6;color:var(--text-dark);text-decoration:none;font-size:14px;font-weight:600;transition:all .3s ease}.nav-btn:hover{background:var(--primary);color:var(--text-dark);transform:translate(5px)}.nav-btn.active{background:var(--primary);font-weight:700;box-shadow:0 6px 16px #3b2f1e40}.sidebar .nav-btn:last-child{margin-top:auto}.main{flex:1}h1{text-align:center;color:var(--accent);margin-bottom:30px;font-size:26px}.selfservice-main{margin:0 20px}.selfservice-card{padding:25px 30px;border-radius:20px;border:1px solid var(--border);box-shadow:0 12px 30px #8b6b3e26;margin-bottom:20px;transition:all .25s ease}.my-leaves,.leave-balance{margin:20px;padding:25px 30px;border-radius:20px;border:1px solid var(--border);box-shadow:0 12px 30px #8b6b3e26;transition:all .25s ease}.apply-leave{padding:25px 30px;margin:20px;display:flex;flex-direction:column;gap:15px;max-width:350px;border-radius:20px;border:1px solid var(--border);box-shadow:0 12px 30px #8b6b3e26;transition:all .25s ease}.balance-box{margin-bottom:12px;padding:8px 10px;background:#ecfeff;border:1px solid #67e8f9;border-radius:6px;font-size:13px}.preview-box{margin-top:12px;padding:10px;background:#f8fafc;border:1px dashed #cbd5f5;border-radius:6px;font-size:14px}.error-box{margin-bottom:12px;padding:10px;background:#fee2e2;color:#991b1b;border-radius:6px;font-weight:600}.checkbox{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-weight:600}.card,.section.card{background:var(--card-bg);padding:25px 30px;border-radius:20px;border:1px solid var(--border);box-shadow:0 12px 30px #8b6b3e26;margin-bottom:20px;transition:all .25s ease}.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px #8b6b3e40}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}.card p{color:#5c4a2e}.card h1{font-size:32px;color:var(--primary)}.tabs{display:flex;gap:12px;margin-bottom:25px}.tab{padding:10px 22px;border-radius:14px;background:#ede3c4;color:var(--text-dark);cursor:pointer;font-weight:600;transition:all .2s ease}.tab.active{background:var(--primary)}form{display:flex;flex-direction:column;gap:16px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:15px}.selfservice-grid{margin:10px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:15px}.selfservice-grid input,.selfservice-grid select,input,select{padding:12px;border-radius:14px;border:1px solid var(--border);background:var(--input-bg);font-size:14px;color:var(--text-dark)}.selfservice-grid input:focus,.selfservice-grid select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #d7a87673}.selfservice-grid button{padding:12px 26px;background:linear-gradient(135deg,#d7a876,#c7955e);border:none;color:#3b2f1e;border-radius:18px;cursor:pointer;font-weight:700;transition:all .25s ease}.selfservice-grid button:hover{background:linear-gradient(135deg,#c7955e,#b8864b)}button{padding:12px 26px;background:linear-gradient(135deg,#d7a876,#c7955e);border:none;color:#3b2f1e;border-radius:18px;cursor:pointer;font-weight:700;transition:all .25s ease}button:hover{background:linear-gradient(135deg,#c7955e,#b8864b)}.logout-btn{background:linear-gradient(135deg,#b45309,#92400e);color:#fff}table{width:100%;border-collapse:collapse}thead th{background:#fdecef;padding:12px;color:var(--brand);text-align:left;font-weight:700}tbody td{padding:12px;border-bottom:1px solid var(--border)}tbody tr:hover{background:#fff1f4}.status-active{color:#16a34a;font-weight:700}.status-inactive{color:#dc2626;font-weight:700}.actions{display:flex;gap:8px}.actions .edit-btn{background:#fde68a;color:#92400e}.actions .delete-btn{background:#fee2e2;color:#991b1b}.badge{padding:4px 10px;border-radius:20px;font-size:12px;color:#fff}.badge.pending{background:#facc15}.badge.approved{background:#16a34a}.badge.rejected{background:#dc2626}.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:20px;margin-top:30px}.chart-card{background:#fff;padding:20px;border-radius:18px;box-shadow:0 10px 30px #00000014}#profile,#salaryResult,#payslipList,#hrDocList,#empDocList{margin-top:20px;background:#fdecef;padding:20px;border-radius:14px;color:var(--brand)}.login-body{display:flex;height:100vh;align-items:center;justify-content:center;background:#0f172a}.login-box{background:#fff;padding:30px;width:320px;border-radius:12px;box-shadow:0 10px 30px #0000004d;text-align:center}.login-box input,.login-box select{width:100%;margin-bottom:12px}.login-box button{width:100%;background:#16a34a}.login-box button:hover{background:#15803d}.hint{font-size:12px;color:#9ca3af;margin-top:10px}@media(max-width:768px){.actions{flex-direction:column}.charts{grid-template-columns:1fr}}.letter-editor{background:#e5e7eb}.letter-page{width:210mm;min-height:297mm;background:#fff;position:relative;font-family:Arial,sans-serif;font-size:14px;line-height:1.7;color:#000;box-sizing:border-box;overflow:hidden;box-shadow:0 0 12px #00000026}.letter-header{position:absolute;top:0;left:0;right:0;height:110px;border-bottom:1px solid #000;display:flex;align-items:center;justify-content:center}.letter-header-center{display:flex;align-items:center}.letter-logo{height:60px;width:auto;object-fit:contain}.letter-company-name{margin:0;font-size:28px;font-weight:700;letter-spacing:.5px;color:#000}.letter-body{padding:120px 40px 110px;font-size:14px;line-height:1.7;color:#000}.letter-footer{position:absolute;bottom:0;left:0;right:0;height:85px;border-top:1px solid #000;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;color:#444}.letter-footer-center{line-height:1.6}@media print{body{background:#fff}.layout,.main>*:not(.letter-editor){display:none!important}.letter-editor{padding:0;background:#fff}.letter-page{box-shadow:none;margin:0;page-break-after:always}button,input,select{display:none!important}}.letter-header{text-align:center;margin-bottom:20px}.letter-header-center{display:flex;justify-content:center;align-items:center;gap:14px}.letter-logo{height:60px}.letter-company-name{font-size:28px;font-weight:700;margin:0}.letter-body{margin-bottom:30px}.letter-footer{text-align:center;font-size:11px;color:#444}.page-break{page-break-before:always}@media print{body{background:#fff}button,input,select{display:none!important}.letter-editor{padding:0;background:#fff}.letter-page{margin:0}}.salary-slip{width:794px;min-height:1123px;margin:auto;padding:30px 40px;font-family:Times New Roman,serif;color:#000;background:#fff}.header{text-align:center;line-height:1.4}.header h2{margin:0;font-size:20px;font-weight:700;text-transform:uppercase}.header p{margin:0;font-size:13px}.header h3{margin-top:15px;font-size:15px;font-weight:700;text-transform:uppercase;border-top:1px solid #000;border-bottom:1px solid #000;padding:6px 0}.employee-info{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;row-gap:6px;font-size:13px;margin-top:15px}.employee-info div{display:flex;justify-content:space-between}.employee-info b{min-width:130px}.salary-table{width:100%;border-collapse:collapse;margin-top:18px;font-size:13px}.salary-table th,.salary-table td{border:1px solid #000;padding:6px 8px}.salary-table th{text-align:center;font-weight:700}.salary-table td:nth-child(2),.salary-table td:nth-child(4){text-align:right}.salary-table tr:last-child td{font-weight:700}.net-salary{margin-top:18px;font-size:14px}.net-salary b{font-size:15px}.net-salary p{margin-top:4px;font-size:13px}.footer{margin-top:80px;display:flex;justify-content:space-between;font-size:13px;text-align:center}.footer div{width:30%;border-top:1px solid #000;padding-top:6px}@media print{body{margin:0}.salary-slip{page-break-after:avoid}}.pdf-page{position:relative;width:210mm;min-height:297mm;padding:10mm 20mm 30mm;box-sizing:border-box;page-break-after:always}.pdf-header{position:absolute;left:0;right:0;text-align:center;display:flex;justify-content:center;align-items:center;gap:14px}.pdf-footer{position:absolute;bottom:10mm;left:0;right:0;text-align:center;font-size:11px}.pdf-body{margin-top:20mm}@media(max-width:768px){body{font-size:14px}h1{font-size:20px;margin-bottom:18px}button{width:100%;padding:14px;font-size:15px}}@media(max-width:768px){.layout{flex-direction:column}.main{padding:12px}}@media(max-width:768px){.sidebar{position:fixed;top:0;left:-260px;width:260px;height:100vh;flex-direction:column;overflow-y:auto;background:linear-gradient(180deg,#d2ddb7,#e8efcf,#f6eacb);z-index:1000;transition:left .3s ease}.layout.sidebar-open .sidebar{left:0}.sidebar{overflow-x:hidden!important}.sidebar h2{display:block}}@media(max-width:768px){.sidebar-toggle{display:flex}.main{padding-top:64px}.layout.sidebar-open:after{content:"";position:fixed;inset:0;background:#00000073;z-index:900}}@media(max-width:768px){table,thead,tbody,tr,th,td{display:block}thead{display:none}tbody tr{background:#fff;margin-bottom:14px;padding:14px;border-radius:16px;box-shadow:0 10px 26px #0000001f}tbody td{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dashed var(--border);font-size:14px}tbody td:last-child{border-bottom:none}tbody td:before{content:attr(data-label);font-weight:700;color:var(--accent)}.actions{flex-direction:column;gap:6px}.actions button{width:100%}}.bottom-nav{display:none}@media(max-width:768px){.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:60px;background:#fff;display:flex;justify-content:space-around;align-items:center;box-shadow:0 -6px 20px #0000002e;z-index:900}.bottom-nav a{font-size:22px;text-decoration:none;color:var(--accent)}.bottom-nav a.active{color:var(--primary)}.main{padding-bottom:80px}}@media(max-width:768px){button,input,select,textarea{min-height:44px}}