:root { --navy:#14213d; --blue:#245bd3; --ink:#18243d; --muted:#5e6b82; --line:#d8e0ec; --bg:#f7f9fc; --card:#fff; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:'Cairo',sans-serif; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:258px; background:var(--navy); color:#fff; display:flex; flex-direction:column; padding:27px 16px 18px; flex-shrink:0; }
.brand { display:flex; align-items:center; gap:11px; padding:0 11px 37px; }
.brand-mark,.user-avatar,.top-avatar { display:grid; place-items:center; font-weight:800; letter-spacing:-.5px; }
.brand-mark { width:39px; height:39px; border-radius:11px; color:#17233e; background:#e9bd54; }
.brand strong { display:block; font-size:14px; line-height:1.5; }.brand span { color:#9eaccb; font-size:10px; }
.nav-label { color:#7786a8; font-size:10px; font-weight:700; padding:0 15px; margin:0 0 12px; }
.main-nav { flex:1; }.nav-item { min-height:48px; margin:4px 0; padding:0 14px; border-radius:10px; color:#aeb9d0; display:flex; align-items:center; gap:12px; text-decoration:none; font-size:13px; transition:.2s; }
.nav-item:hover,.nav-item.active { background:#243657; color:#fff; }.nav-item.active { box-shadow:inset -3px 0 #e9bd54; }.nav-icon { width:20px; color:#93a3c6; font-size:19px; }.nav-item.active .nav-icon { color:#e9bd54; }.nav-count { margin-right:auto; min-width:23px; padding:2px 6px; text-align:center; border-radius:20px; background:#33496e; font-size:11px; }
.sidebar-footer { border-top:1px solid #2b3b5b; padding:17px 7px 0; display:flex; align-items:center; gap:9px; }.user-avatar,.top-avatar { width:33px; height:33px; border-radius:50%; background:#d9e5ff; color:#2764e8; font-size:10px; }.user-info { flex:1; min-width:0; }.user-info strong,.user-info span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.user-info strong { font-size:10px; }.user-info span { color:#8492b1; font-size:9px; }.icon-button,.notification-button { color:#a4b1ca; background:none; border:0; padding:5px; }
.main-content { flex:1; min-width:0; padding:0 46px 18px; }.topbar { height:77px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }.breadcrumb { display:flex; gap:11px; color:#a2aabd; font-size:11px; }.breadcrumb b { color:#cbd2df; }.breadcrumb strong { color:#4d5972; }.top-actions { display:flex; align-items:center; gap:21px; }.notification-button { font-size:23px; position:relative; }.notification-button i { position:absolute; top:5px; right:4px; width:6px; height:6px; background:#f16c6c; border-radius:50%; }
.page-heading { padding:35px 0 25px; display:flex; align-items:end; justify-content:space-between; }.eyebrow { color:var(--blue); font-size:11px; font-weight:700; margin:0 0 6px; }.page-heading h1 { margin:0; font-size:29px; letter-spacing:-1px; }.subtitle { margin:7px 0 0; color:var(--muted); font-size:12px; }.primary-button,.secondary-button { border:0; border-radius:8px; color:#fff; background:var(--blue); padding:11px 17px; font-size:12px; box-shadow:0 5px 12px #2764e826; }.primary-button span { font-size:17px; vertical-align:-1px; margin-left:4px; }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:22px; }.stat-card { display:flex; align-items:center; gap:14px; padding:18px 20px; background:var(--card); border:1px solid var(--line); border-radius:11px; }.stat-card span,.stat-card strong { display:block; }.stat-card span { color:var(--muted); font-size:11px; }.stat-card strong { margin-top:2px; color:var(--ink); font-size:22px; }.stat-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:10px; font-size:19px; }.stat-icon.blue { background:#eaf0ff; color:#4078eb; }.stat-icon.green { background:#e8f9f2; color:#29ad73; }.stat-icon.orange { background:#fff3e4; color:#eea33d; }
.content-card { min-height:430px; background:var(--card); border:1px solid var(--line); border-radius:11px; overflow:hidden; }.content-toolbar { display:flex; align-items:center; justify-content:space-between; padding:22px 25px; border-bottom:1px solid var(--line); }.content-toolbar h2 { margin:0; font-size:15px; }.content-toolbar p { margin:3px 0 0; color:#a1aabd; font-size:10px; }.toolbar-actions { display:flex; align-items:center; gap:9px; }.search-box { width:265px; height:39px; padding:0 12px; display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:7px; color:#9ca8bc; }.search-box input { width:100%; border:0; outline:0; color:var(--ink); background:transparent; font-size:10px; }.filter-button { height:39px; border:1px solid var(--line); border-radius:7px; padding:0 12px; color:#59657b; background:#fff; font-size:10px; }.filter-button span { color:var(--blue); font-size:16px; vertical-align:-1px; }.filter-button b { display:none; margin-right:5px; padding:1px 5px; border-radius:9px; color:#fff; background:var(--blue); }.filter-button.has-filter b { display:inline-block; }.filter-panel { margin:17px 25px 0; padding:13px 15px; display:flex; gap:18px; align-items:end; background:#f8faff; border:1px solid #e6edff; border-radius:8px; }.filter-panel label { color:#66728a; font-size:10px; }.filter-panel select { display:block; margin-top:5px; width:170px; border:1px solid var(--line); border-radius:5px; padding:7px; color:var(--ink); background:#fff; font-size:10px; }.clear-filter { border:0; background:none; color:var(--blue); font-size:10px; padding:8px; }
.empty-state { text-align:center; padding:58px 20px 48px; }.empty-illustration { width:100px; height:86px; margin:0 auto 19px; position:relative; }.file-back,.file-front { position:absolute; display:block; border-radius:7px; }.file-back { width:56px; height:65px; right:18px; top:9px; background:#edf3ff; border:2px solid #b9d0ff; transform:rotate(8deg); }.file-front { width:56px; height:65px; right:31px; top:2px; display:grid; place-items:center; color:#4779e4; background:#fff; border:2px solid #4779e4; font-size:23px; box-shadow:0 7px 15px #436fe51c; }.empty-state h3 { margin:0; font-size:16px; }.empty-state p { max-width:300px; margin:8px auto 19px; color:#9aa5b8; font-size:11px; line-height:1.8; }.secondary-button { background:#edf3ff; color:var(--blue); box-shadow:none; padding:9px 15px; }.secondary-button span { font-size:16px; vertical-align:-1px; margin-right:3px; }.cv-list { display:grid; gap:10px; padding:18px 25px; }.cv-row { display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:8px; padding:13px; }.cv-row .cv-avatar { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:var(--blue); background:#edf3ff; font-weight:700; font-size:11px; }.cv-row h3 { margin:0; font-size:12px; }.cv-row p { margin:2px 0 0; color:var(--muted); font-size:10px; }.cv-row .status { margin-right:auto; padding:4px 8px; border-radius:14px; font-size:9px; }.status.reviewed { background:#e8f9f2; color:#24a86d; }.status.pending { background:#fff3e4; color:#d98b27; }footer { text-align:center; padding-top:19px; color:#aab3c3; font-size:9px; }footer span { padding:0 5px; color:#d2d8e2; }
@media (max-width:800px) { .sidebar { width:72px; padding:20px 9px; }.brand { padding:0 7px 34px; }.brand div:last-child,.nav-label,.nav-item span:not(.nav-icon),.user-info,.sidebar-footer .icon-button { display:none; }.nav-item { justify-content:center; padding:0; }.nav-count { display:none; }.sidebar-footer { justify-content:center; padding:17px 0 0; }.main-content { padding:0 20px 18px; }.content-toolbar { align-items:stretch; flex-direction:column; gap:15px; }.toolbar-actions,.search-box { width:100%; }.search-box { flex:1; }.page-heading { align-items:start; flex-direction:column; gap:17px; } }
@media (max-width:480px) { .main-content { padding:0 12px 15px; }.topbar { height:62px; }.page-heading h1 { font-size:25px; }.content-toolbar { padding:18px 15px; }.cv-list { padding:14px 15px; } }
.folder-row { color:inherit; text-decoration:none; transition:.18s; }.folder-row:hover { border-color:#b9ccf7; box-shadow:0 7px 18px #2764e814; transform:translateY(-2px); }.folder-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:10px; color:var(--blue); background:#edf3ff; font-size:24px; }.folder-path { margin-right:auto; color:#8b97aa; font-size:10px; }.folder-path b { color:var(--blue); font-size:16px; margin-right:5px; }
.login-gate{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 80% 10%,#e5edff,transparent 35%),var(--bg)}.login-card{width:min(390px,100%);padding:38px 35px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 60px #20355b1c;text-align:center}.login-card .brand-mark{margin:0 auto 18px}.login-card h1{margin:0;font-size:23px}.login-card p{margin:7px 0 25px;color:var(--muted);font-size:11px}.login-card label{display:block;text-align:right;color:#59657b;font-size:11px;font-weight:700}.login-card input{display:block;width:100%;margin-top:7px;padding:11px 12px;border:1px solid var(--line);border-radius:8px;outline:0;font-size:16px;letter-spacing:5px}.login-card input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #2764e815}.login-card .primary-button{width:100%;margin-top:18px}.login-card small{display:block;min-height:18px;margin-top:9px;color:#dc5b62;font-size:10px}.live-label{color:#36a878;font-size:10px}.today-chip{padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--muted);font-size:10px}.today-chip strong{margin-right:5px;color:var(--ink)}.hero-stat{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding:25px 30px;border-radius:12px;color:#fff;background:linear-gradient(110deg,#1b2c50,#2b5fcf);box-shadow:0 12px 25px #224d9c24}.hero-stat span{font-size:11px;color:#bdcbed}.hero-stat strong{display:block;margin:5px 0;font-size:31px}.hero-stat strong small{font-size:12px;font-weight:500}.hero-stat p{margin:0;color:#9db3e5;font-size:10px}.hero-chart{height:65px;display:flex;align-items:end;gap:7px;direction:ltr}.hero-chart i{display:block;width:10px;border-radius:5px 5px 0 0;background:#79a0fa}.hero-chart i:nth-child(1){height:24%}.hero-chart i:nth-child(2){height:42%}.hero-chart i:nth-child(3){height:30%}.hero-chart i:nth-child(4){height:58%}.hero-chart i:nth-child(5){height:44%}.hero-chart i:nth-child(6){height:78%}.hero-chart i:nth-child(7){height:100%;background:#e9bd54}.dashboard-stats{grid-template-columns:repeat(4,1fr);margin-bottom:20px}.stat-icon.red{background:#ffebed;color:#dc5b62}.dashboard-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.compact-card{min-height:220px;padding:22px 24px}.section-title{display:flex;align-items:start;justify-content:space-between;margin-bottom:15px}.section-title h2{margin:0;font-size:15px}.section-title p{margin:3px 0 0;color:#a1aabd;font-size:10px}.section-title>a{color:var(--blue);font-size:10px;text-decoration:none}.recent-list{display:grid;gap:8px}.recent-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}.recent-item:last-child{border-bottom:0}.recent-item>span:nth-child(2){flex:1;min-width:0}.recent-item strong,.recent-item small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recent-item strong{font-size:11px}.recent-item small{color:var(--muted);font-size:9px}.recent-item>b{padding:4px 8px;border-radius:12px;background:#fff3e4;color:#d98b27;font-size:8px;font-weight:600}.mini-avatar{display:grid;place-items:center;width:31px;height:31px;flex-shrink:0;border-radius:50%;background:#eaf0ff;color:var(--blue);font-size:11px;font-weight:700}.progress-list{display:grid;gap:23px;padding-top:20px}.progress-list span{display:flex;justify-content:space-between;color:#69758b;font-size:11px}.progress-list span b{color:var(--blue)}.progress{height:8px;margin-top:8px;border-radius:8px;background:#e9effa;overflow:hidden}.progress i{display:block;height:100%;width:0;border-radius:inherit;background:var(--blue);transition:width .3s}.progress .green-progress,.green-progress i{background:#3bb57d}.client-table-wrap{overflow:auto}.client-table{width:100%;border-collapse:collapse;min-width:780px}.client-table th{padding:13px 18px;color:#97a2b5;background:#fafbfe;font-size:10px;font-weight:600;text-align:right;white-space:nowrap}.client-table td{padding:12px 18px;border-top:1px solid var(--line);font-size:10px;vertical-align:middle}.client-name{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;white-space:nowrap}.client-name strong{font-size:11px}.request-input,.price-input,.date-input,.payment-select{height:35px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);outline:0;font-size:10px}.request-input{width:230px;padding:0 9px}.price-input{width:78px;padding:0 8px}.date-input{width:125px;padding:0 7px}.payment-select{width:140px;padding:0 7px}.payment-select.unpaid{color:#dc5b62;background:#fff4f4}.payment-select.paid{color:#29a66f;background:#effbf5}.payment-select.in-progress{color:#d98b27;background:#fff8ed}.payment-select.completed{color:#8a5bb5;background:#f8f1ff}.open-cv{color:var(--blue);text-decoration:none;white-space:nowrap;font-size:10px}.clients-card{min-height:0}.simple-heading{padding-bottom:25px}
@media(max-width:900px){.dashboard-stats{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.hero-chart{display:none}}@media(max-width:600px){.main-content{padding:0 15px 18px}.page-heading{gap:14px}.today-chip{display:none}.hero-stat{padding:20px}.hero-stat strong{font-size:26px}.dashboard-stats{grid-template-columns:1fr 1fr;gap:9px}.stat-card{padding:13px 10px}.stat-card span{font-size:9px}.stat-card strong{font-size:18px}}
.progress-select{height:35px;width:120px;padding:0 7px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font-size:10px}
.login-gate[hidden],#app[hidden]{display:none!important}
body[data-theme="dark"]{--bg:#0d1526;--card:#17243d;--ink:#f4f7ff;--muted:#b7c3d9;--line:#334562}body[data-theme="dark"] .topbar{border-color:var(--line)}body[data-theme="dark"] .content-card,body[data-theme="dark"] .stat-card,body[data-theme="dark"] .today-chip,body[data-theme="dark"] .search-box,body[data-theme="dark"] .login-card,body[data-theme="dark"] .client-table tbody tr{background:var(--card);border-color:var(--line)}body[data-theme="dark"] .breadcrumb strong,body[data-theme="dark"] .content-toolbar h2,body[data-theme="dark"] .section-title h2,body[data-theme="dark"] .client-name,body[data-theme="dark"] .cv-row h3{color:var(--ink)}body[data-theme="dark"] .search-box input,body[data-theme="dark"] .request-input,body[data-theme="dark"] .price-input,body[data-theme="dark"] .date-input,body[data-theme="dark"] .payment-select,body[data-theme="dark"] .progress-select{color:var(--ink);background:#101b31;border-color:#405475}body[data-theme="dark"] .login-gate{background:radial-gradient(circle at 80% 10%,#1d3768,transparent 35%),var(--bg)}body[data-theme="dark"] .empty-state p,body[data-theme="dark"] .content-toolbar p{color:#b7c3d9}.theme-toggle{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:8px;padding:7px 9px;background:var(--card);color:var(--muted);font-size:9px}.theme-toggle span{font-size:16px;line-height:1;color:#e9bd54}.theme-toggle b{font-weight:600}
@media(max-width:700px){.theme-toggle{padding:6px 7px}.theme-toggle b{display:none}.nav-icon{font-family:Arial,sans-serif;font-weight:700;text-rendering:geometricPrecision}.nav-item span:not(.nav-icon){font-weight:600}.page-heading h1{font-size:30px;line-height:1.3;color:var(--ink);font-weight:800}.eyebrow{font-size:11px;font-weight:800}.subtitle{font-size:13px;line-height:1.9;color:#51617b;font-weight:600}.stat-card span{font-size:12px;line-height:1.5;color:#506079;font-weight:600}.stat-card strong{font-size:25px;font-weight:800}.content-toolbar h2{font-size:18px}.content-toolbar p,.section-title p{font-size:11px;color:#66748c}.section-title h2{font-size:18px}.recent-item strong{font-size:12px}.recent-item small{font-size:10px}.client-table td:before{font-size:10px;color:#60708a}.request-input,.price-input,.date-input,.payment-select,.progress-select{font-size:12px;font-weight:600}.nav-icon{font-size:20px}.hero-stat span{font-size:12px}.hero-stat strong{font-size:32px}.hero-stat p{font-size:11px}}
@media (max-width:700px){
  html,body{overflow-x:hidden}.app-shell{display:block;padding-bottom:78px}.sidebar{position:fixed;z-index:30;right:0;bottom:0;width:100%;height:72px;padding:6px 10px calc(6px + env(safe-area-inset-bottom));border-top:1px solid #314568;box-shadow:0 -8px 25px #14213d30;display:flex;flex-direction:row}.sidebar .brand,.sidebar .sidebar-footer{display:none}.main-nav{display:flex;align-items:stretch;justify-content:space-around;width:100%;gap:6px}.nav-label{display:none}.nav-item,.nav-item:hover,.nav-item.active{min-height:58px;flex:1;margin:0;padding:5px 4px;border-radius:10px;display:flex;flex-direction:column;justify-content:center;gap:1px;text-align:center;font-size:9px;background:transparent;box-shadow:none}.nav-item.active{background:#243657;box-shadow:inset 0 -3px #e9bd54}.nav-icon{width:auto;font-size:18px;line-height:1.2}.nav-count{display:none}.main-content{width:100%;padding:0 14px 20px}.topbar{height:61px}.breadcrumb{font-size:9px;gap:7px}.top-actions{gap:7px}.live-label{font-size:9px}.top-avatar{width:29px;height:29px}.page-heading{padding:25px 2px 18px;align-items:flex-start;gap:13px}.page-heading h1{font-size:24px;line-height:1.35}.subtitle{font-size:10px;line-height:1.8}.eyebrow{font-size:9px}.today-chip{display:none}.hero-stat{min-height:145px;margin:0 0 14px;padding:20px;border-radius:16px}.hero-stat span{font-size:10px}.hero-stat strong{font-size:29px}.hero-stat p{font-size:9px}.hero-chart{display:flex;height:50px;gap:4px}.hero-chart i{width:7px}.dashboard-stats{grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}.stat-card{min-height:90px;padding:13px 10px;border-radius:13px;gap:8px;justify-content:flex-start}.stat-card span{font-size:9px;line-height:1.5}.stat-card strong{font-size:20px}.stat-icon{width:32px;height:32px;flex-shrink:0;font-size:15px;border-radius:9px}.dashboard-grid{display:grid;gap:14px}.compact-card{padding:18px 15px;border-radius:14px;min-height:190px}.section-title{margin-bottom:11px}.section-title h2{font-size:14px}.section-title p{font-size:9px}.section-title>a{font-size:9px}.recent-item{padding:10px 0}.recent-item strong{font-size:10px}.recent-item small{font-size:8px}.progress-list{gap:20px;padding-top:14px}.content-card{border-radius:14px}.content-toolbar{padding:17px 15px;gap:13px}.content-toolbar h2{font-size:14px}.content-toolbar p{font-size:9px}.toolbar-actions,.search-box{width:100%}.search-box{height:42px;border-radius:9px}.search-box input{font-size:11px}.clients-card{overflow:visible}.client-table-wrap{overflow:visible;padding:0 10px}.client-table{display:block;min-width:0}.client-table thead{display:none}.client-table tbody{display:grid;gap:11px}.client-table tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:5px 9px;padding:12px 4px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 5px 15px #243d6510}.client-table td{display:flex;min-width:0;padding:6px 4px;border:0;flex-direction:column;align-items:stretch;gap:4px}.client-table td:first-child,.client-table td:nth-child(2){grid-column:1/-1}.client-table td:before{color:#9aa5b8;font-size:8px;font-weight:600}.client-table td:nth-child(1):before{content:'العميل'}.client-table td:nth-child(2):before{content:'طلب العميل'}.client-table td:nth-child(3):before{content:'السعر'}.client-table td:nth-child(4):before{content:'حالة الدفع'}.client-table td:nth-child(5):before{content:'تقدم العمل'}.client-table td:nth-child(6):before{content:'تاريخ الطلب'}.client-table td:nth-child(7){align-self:end;justify-content:end}.request-input,.price-input,.date-input,.payment-select,.progress-select{width:100%;height:38px;font-size:10px}.client-name{font-size:11px;padding:3px 0}.open-cv{padding:8px 0;text-align:left;font-size:10px}.empty-state{padding:45px 15px}.login-gate{padding:16px;min-height:100svh}.login-card{width:100%;padding:34px 22px 28px;border-radius:20px}.login-card h1{font-size:22px}.login-card p{font-size:10px}.login-card input{height:48px}.login-card .primary-button{height:48px;font-size:12px}
}
 .reference-launch-button{display:flex;align-items:center;gap:12px;min-width:245px;padding:14px 16px;border:1px solid #d9b76b;border-radius:14px;background:linear-gradient(135deg,#fffaf0,#fff);color:#102a43;text-decoration:none;box-shadow:0 8px 22px #102a4312;transition:transform .2s,box-shadow .2s}.reference-launch-button:hover{transform:translateY(-2px);box-shadow:0 12px 28px #102a4320}.reference-launch-button>span:first-child{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#102a43;color:#d9b76b;font-size:18px}.reference-launch-button span:nth-child(2){display:flex;flex-direction:column;gap:2px;flex:1}.reference-launch-button strong{font-size:14px}.reference-launch-button small{font-size:10px;color:#718096}.reference-launch-button b{font-size:18px;color:#1769aa}.dark .reference-launch-button{background:#173a58;color:#fff}.dark .reference-launch-button small{color:#b9c8d5}
.login-reference-link{display:block;margin-top:16px;color:#1769aa;text-align:center;font-size:13px;text-decoration:none}.login-reference-link:hover{text-decoration:underline}