:root{--primary:#1a237e;--primary-light:#3949ab;--primary-dark:#0d1642;--accent:#ff6f00;--accent-light:#ffa040;--success:#2e7d32;--success-light:#e8f5e9;--warning:#f57f17;--warning-light:#fff8e1;--danger:#c62828;--danger-light:#ffebee;--info:#0277bd;--info-light:#e1f5fe;--gray-50:#fafafa;--gray-100:#f5f5f5;--gray-200:#eee;--gray-300:#e0e0e0;--gray-400:#bdbdbd;--gray-500:#9e9e9e;--gray-600:#757575;--gray-700:#616161;--gray-800:#424242;--gray-900:#212121;--sidebar-width:260px;--header-height:64px;--shadow-sm:0 1px 3px rgba(0,0,0,.12);--shadow-md:0 4px 6px rgba(0,0,0,.1);--shadow-lg:0 10px 25px rgba(0,0,0,.15);--radius-sm:6px;--radius-md:10px;--radius-lg:16px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--gray-100);color:var(--gray-900);font-family:Cairo,Segoe UI,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}.app-layout{direction:rtl;display:flex;min-height:100vh}.sidebar{background:linear-gradient(180deg,var(--primary-dark) 0,var(--primary) 100%);color:#fff;display:flex;flex-direction:column;height:100vh;overflow-y:auto;position:fixed;right:0;top:0;transition:transform .3s cubic-bezier(.4,0,.2,1);width:var(--sidebar-width);z-index:200}.sidebar-header{border-bottom:1px solid hsla(0,0%,100%,.1);padding:20px;position:relative;text-align:center}.sidebar-header .logo{color:var(--accent);font-size:24px;font-weight:700;letter-spacing:2px}.sidebar-header .subtitle{font-size:12px;margin-top:4px;opacity:.7}.sidebar-nav{flex:1;overflow-y:auto;padding:16px 0}.nav-item{align-items:center;border-right:3px solid transparent;color:#ffffffb3;cursor:pointer;display:flex;font-size:15px;font-weight:500;gap:12px;padding:12px 24px;transition:all .2s}.nav-item:hover{background:#ffffff14;color:#fff}.nav-item.active{background:#ffffff1f;border-right-color:var(--accent);color:#fff}.nav-item .icon,.nav-item .nav-icon{align-items:center;display:flex;font-size:18px;height:22px;justify-content:center;width:22px}.nav-section-title{color:#fff6;font-size:11px;font-weight:600;letter-spacing:1.5px;padding:16px 24px 8px;text-transform:uppercase}.main-content{flex:1;margin-right:var(--sidebar-width);min-height:100vh;min-width:0}.top-bar{align-items:center;background:#fff;border-bottom:1px solid var(--gray-200);box-shadow:var(--shadow-sm);display:flex;height:var(--header-height);justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:50}.top-bar h1{color:var(--gray-800);font-size:20px;font-weight:600}.page-content{padding:24px}.sidebar-overlay{background:#00000080;inset:0;position:fixed;z-index:150}@media(max-width:768px){.sidebar{transform:translate(100%)}.sidebar.open{transform:translate(0)}.main-content{margin-right:0}.top-bar{padding:0 16px}.top-bar h1{font-size:16px}.page-content{padding:16px}}@media(min-width:769px){.sidebar-overlay{display:none!important}}.card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden}.card-header{align-items:center;border-bottom:1px solid var(--gray-200);display:flex;justify-content:space-between;padding:16px 20px}.card-header h2{font-size:16px;font-weight:600}.card-body{padding:20px}.stats-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:24px}.stat-card{align-items:center;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);display:flex;gap:16px;padding:20px;transition:transform .2s,box-shadow .2s}.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.stat-icon{align-items:center;border-radius:var(--radius-sm);display:flex;font-size:24px;height:52px;justify-content:center;width:52px}.stat-icon.blue{background:var(--info-light);color:var(--info)}.stat-icon.green{background:var(--success-light);color:var(--success)}.stat-icon.orange{background:var(--warning-light);color:var(--warning)}.stat-icon.red{background:var(--danger-light);color:var(--danger)}.stat-icon.purple{background:#f3e5f5;color:#7b1fa2}.stat-info h3{color:var(--gray-500);font-size:13px;font-weight:500}.stat-info .value{color:var(--gray-800);font-size:24px;font-weight:700}.table-wrapper{overflow-x:auto}table{border-collapse:collapse;width:100%}table th{background:var(--gray-50);border-bottom:2px solid var(--gray-200);color:var(--gray-600);font-size:13px;font-weight:600;letter-spacing:.5px;padding:12px 16px;text-align:right;text-transform:uppercase}table td{border-bottom:1px solid var(--gray-100);font-size:14px;padding:12px 16px}table tr:hover{background:var(--gray-50)}.badge{align-items:center;border-radius:20px;display:inline-flex;font-size:12px;font-weight:600;gap:4px;padding:4px 12px}.badge.pending{background:var(--warning-light);color:var(--warning)}.badge.progress{background:var(--info-light);color:var(--info)}.badge.complete{background:var(--success-light);color:var(--success)}.badge.rejected{background:var(--danger-light);color:var(--danger)}.badge.approved{background:var(--success-light);color:var(--success)}.badge.high{background:var(--danger-light);color:var(--danger)}.badge.medium{background:var(--warning-light);color:var(--warning)}.badge.low{background:var(--info-light);color:var(--info)}.btn{align-items:center;border:none;border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;font-family:inherit;font-size:14px;font-weight:600;gap:8px;padding:10px 20px;transition:all .2s}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-light)}.btn-accent{background:var(--accent);color:#fff}.btn-accent:hover{background:var(--accent-light)}.btn-success{background:var(--success);color:#fff}.btn-success:hover{opacity:.9}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{opacity:.9}.btn-outline{background:transparent;border:2px solid var(--gray-300);color:var(--gray-700)}.btn-outline:hover{border-color:var(--primary);color:var(--primary)}.btn-sm{font-size:13px;padding:6px 14px}.btn-icon{justify-content:center;min-width:36px;padding:8px}.form-group{margin-bottom:16px}.form-group label{color:var(--gray-700);display:block;font-size:14px;font-weight:600;margin-bottom:6px}.form-control{background:#fff;border:2px solid var(--gray-200);border-radius:var(--radius-sm);font-family:inherit;font-size:14px;padding:10px 14px;transition:border-color .2s;width:100%}.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px #1a237e1a;outline:none}select.form-control{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8 1 3h10z'/%3E%3C/svg%3E");background-position:left 12px center;background-repeat:no-repeat;padding-left:36px}textarea.form-control{min-height:80px;resize:vertical}.form-row{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.modal-overlay{align-items:center;background:#00000080;display:flex;justify-content:center;inset:0;padding:20px;position:fixed;z-index:1000}.modal{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-height:90vh;max-width:600px;overflow-y:auto;width:100%}.modal-header{align-items:center;border-bottom:1px solid var(--gray-200);display:flex;justify-content:space-between;padding:20px 24px}.modal-header h2{font-size:18px;font-weight:600}.modal-close{align-items:center;background:var(--gray-100);border:none;border-radius:50%;color:var(--gray-600);cursor:pointer;display:flex;font-size:18px;height:32px;justify-content:center;width:32px}.modal-close:hover{background:var(--gray-200)}.modal-body{padding:24px}.modal-footer{border-top:1px solid var(--gray-200);display:flex;gap:12px;justify-content:flex-end;padding:16px 24px}.filters-bar{align-items:center;display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}.filter-tabs{background:var(--gray-100);border-radius:var(--radius-sm);display:flex;overflow:hidden}.filter-tab{background:transparent;border:none;color:var(--gray-600);cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;padding:8px 20px;transition:all .2s}.filter-tab.active{background:var(--primary);color:#fff}.filter-tab:hover:not(.active){background:var(--gray-200)}.search-input{flex:1;max-width:300px;position:relative}.search-input input{border:2px solid var(--gray-200);border-radius:var(--radius-sm);font-family:inherit;font-size:14px;padding:8px 36px 8px 14px;width:100%}.search-input input:focus{border-color:var(--primary);outline:none}.search-input .search-icon{color:var(--gray-400);position:absolute;right:10px;top:50%;transform:translateY(-50%)}.steps-timeline{display:flex;flex-direction:column;gap:8px;padding:12px 0}.step-item{align-items:center;background:var(--gray-50);border-radius:var(--radius-sm);border-right:3px solid var(--gray-300);display:flex;gap:12px;padding:10px 16px}.step-item.complete{background:var(--success-light);border-right-color:var(--success)}.step-item.progress{background:var(--info-light);border-right-color:var(--info)}.step-item.pending{border-right-color:var(--gray-400)}.step-dot{border-radius:50%;flex-shrink:0;height:10px;width:10px}.step-dot.complete{background:var(--success)}.step-dot.progress{background:var(--info)}.step-dot.pending{background:var(--gray-400)}.step-title{flex:1;font-size:14px;font-weight:500}.step-actions{display:flex;gap:4px}.financial-grid{display:grid;gap:20px;grid-template-columns:1fr 1fr;margin-bottom:24px}.financial-table{border:1px solid var(--gray-300);border-collapse:collapse;width:100%}.financial-table th{background:var(--primary);border:1px solid hsla(0,0%,100%,.2);color:#fff;font-size:13px;padding:10px 14px;text-align:center}.financial-table td{border:1px solid var(--gray-200);font-size:14px;padding:10px 14px;text-align:center}.income-row{background:var(--success-light)}.expense-row{background:var(--danger-light)}.profit-row{background:#e8eaf6;font-weight:700}.no-data{color:var(--gray-500);font-style:italic}.catalog-hero{background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:#fff;padding:60px 24px;text-align:center}.catalog-hero h1{font-size:36px;font-weight:700;margin-bottom:8px}.catalog-hero p{font-size:16px;opacity:.8}.catalog-categories{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;padding:24px}.catalog-cat-btn{background:#fff;border:2px solid var(--primary);border-radius:30px;color:var(--primary);cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;padding:10px 24px;transition:all .2s}.catalog-cat-btn.active,.catalog-cat-btn:hover{background:var(--primary);color:#fff}.catalog-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin:0 auto;max-width:1200px;padding:0 24px 48px}.catalog-item{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .2s,box-shadow .2s}.catalog-item:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}.catalog-item-image{align-items:center;background:linear-gradient(135deg,var(--gray-200),var(--gray-300));color:var(--gray-500);display:flex;font-size:48px;height:180px;justify-content:center}.catalog-item-body{padding:16px}.catalog-item-body h3{font-size:16px;font-weight:600;margin-bottom:4px}.catalog-item-body .price{color:var(--accent);font-size:20px;font-weight:700}.catalog-item-body .desc{color:var(--gray-500);font-size:13px;margin-top:4px}.progress-bar{background:var(--gray-200);border-radius:4px;height:8px;overflow:hidden}.progress-fill{border-radius:4px;height:100%;transition:width .3s}.progress-fill.green{background:var(--success)}.progress-fill.blue{background:var(--info)}.progress-fill.orange{background:var(--warning)}.empty-state{color:var(--gray-500);padding:48px 24px;text-align:center}.empty-state .icon{font-size:48px;margin-bottom:16px}.empty-state h3{color:var(--gray-700);font-size:18px;margin-bottom:8px}.actions-cell{display:flex;gap:4px}@media(max-width:768px){.stats-grid{grid-template-columns:1fr 1fr}.financial-grid,.form-row{grid-template-columns:1fr}.table-wrapper{-webkit-overflow-scrolling:touch}table{min-width:600px}.filters-bar{align-items:stretch;flex-direction:column}.filter-tabs{overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch}.filter-tab{font-size:12px;padding:8px 14px;white-space:nowrap}.search-input{max-width:100%}.actions-cell{flex-wrap:wrap}.modal-overlay{align-items:flex-start;padding:20px 10px 10px}.modal{max-height:90vh;max-width:100%}.modal-header{padding:16px}.modal-header h2{font-size:16px}.modal-body{padding:16px}.modal-footer{flex-wrap:wrap;padding:12px 16px}.btn{font-size:13px;padding:8px 14px}.btn-sm{font-size:12px;padding:5px 10px}.card-header{flex-wrap:wrap;gap:8px;padding:12px 16px}.card-body{padding:16px}.emp-detail-info,.receipt-info{grid-template-columns:1fr}}@media(max-width:480px){.stats-grid{grid-template-columns:1fr}.stat-card{padding:16px}.stat-icon,.stat-info .value{font-size:20px}.stat-icon{height:44px;width:44px}.top-bar h1{font-size:14px}.page-content{padding:12px}.btn{font-size:12px;padding:7px 12px}}.toggle-switch{height:26px;position:relative;width:48px}.toggle-switch input{height:0;opacity:0;width:0}.toggle-slider{background:var(--gray-300);border-radius:13px;cursor:pointer;inset:0;position:absolute;transition:.3s}.toggle-slider:before{background:#fff;border-radius:50%;content:"";height:20px;left:3px;position:absolute;top:3px;transition:.3s;width:20px}.toggle-switch input:checked+.toggle-slider{background:var(--success)}.toggle-switch input:checked+.toggle-slider:before{transform:translate(22px)}.tooltip{position:relative}.tooltip:after{background:var(--gray-800);border-radius:4px;bottom:100%;color:#fff;content:attr(data-tip);font-size:12px;left:50%;opacity:0;padding:4px 10px;pointer-events:none;position:absolute;transform:translate(-50%);transition:opacity .2s;white-space:nowrap}.tooltip:hover:after{opacity:1}.login-page{align-items:center;background:linear-gradient(135deg,var(--primary-dark) 0,var(--primary) 50%,var(--primary-light) 100%);display:flex;justify-content:center;min-height:100vh;padding:20px}.login-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:420px;overflow:hidden;width:100%}.login-header{background:var(--primary-dark);padding:32px;text-align:center}.login-logo{color:var(--accent);font-size:32px;font-weight:700;letter-spacing:3px}.login-subtitle{color:#ffffffb3;font-size:14px;margin-top:4px}.login-body{padding:32px}.alert{border-radius:var(--radius-sm);font-size:14px;margin-bottom:16px;padding:12px 16px}.alert-danger{background:var(--danger-light);border:1px solid var(--danger);color:var(--danger)}.alert-success{background:var(--success-light);border:1px solid var(--success);color:var(--success)}.portal-topbar{align-items:center;background:var(--primary);color:#fff;display:flex;justify-content:space-between;padding:16px 32px}.portal-topbar h1{font-size:18px;font-weight:600}.portal-content{margin:0 auto;max-width:1000px;padding:24px}.receipt{margin:0 auto;max-width:800px;padding:32px}.receipt-header{border-bottom:2px solid var(--primary);margin-bottom:24px;padding-bottom:16px;text-align:center}.receipt-header h1{color:var(--primary);font-size:24px}.receipt-header p{color:var(--gray-500);font-size:13px}.receipt-info{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin-bottom:24px}.receipt-info div{font-size:14px}.receipt-info strong{color:var(--gray-700)}.receipt-total{background:var(--gray-50);border-radius:var(--radius-sm);margin-top:16px;padding:16px;text-align:left}@media print{body *{visibility:hidden}.receipt,.receipt *{visibility:visible}.receipt{left:0;position:absolute;right:0;top:0}.no-print{display:none!important}.printing-section,.printing-section *{visibility:visible}.printing-section{left:0;position:absolute;right:0;top:0}}.emp-detail-info{background:var(--gray-50);border-radius:var(--radius-sm);display:grid;gap:12px;grid-template-columns:1fr 1fr;margin-bottom:20px;padding:16px}.emp-detail-info .info-item{font-size:14px}.emp-detail-info .info-item .label{color:var(--gray-500);font-size:12px;margin-bottom:2px}.emp-detail-info .info-item .val{color:var(--gray-800);font-weight:600}.emp-name-link{color:var(--primary);cursor:pointer;transition:color .2s}.emp-name-link:hover{color:var(--primary-light);text-decoration:underline}.salary-status-banner{border-radius:var(--radius-sm);font-size:14px;font-weight:600;margin-bottom:20px;padding:12px 16px;text-align:center}.salary-status-banner.paid{background:var(--success-light);border:1px solid var(--success);color:var(--success)}.salary-status-banner.unpaid{background:var(--danger-light);border:1px solid var(--danger);color:var(--danger)}.print-btn{align-items:center;background:var(--gray-100);border:1px solid var(--gray-300);border-radius:var(--radius-sm);color:var(--gray-700);cursor:pointer;display:inline-flex;font-family:inherit;font-size:13px;font-weight:600;gap:6px;padding:6px 14px;transition:all .2s}.print-btn:hover{background:var(--gray-200);border-color:var(--gray-400)}