@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Tajawal:wght@400;500;600;700&display=swap";:root{--ink:#183b4e;--teal:#177e7a;--bg:#f5f7f8;--line:#e1e7ea;--muted:#6c7d86;--danger:#c44343}*{box-sizing:border-box}body{background:var(--bg);color:#1b2930;margin:0;font-family:Inter,Tajawal,Arial,sans-serif}html[dir=rtl] body{font-family:Tajawal,Inter,Arial,sans-serif}button,input,select{font:inherit}button{color:inherit;cursor:pointer;background:0 0;border:0}svg{width:19px;height:19px}progress{appearance:none;background:#dfe6e8;border:0;border-radius:5px;height:6px;overflow:hidden}progress::-webkit-progress-bar{background:#dfe6e8}progress::-webkit-progress-value{background:var(--teal)}.app{min-height:100vh}.sidebar{color:#d9e5e9;z-index:12;background:#102f3e;flex-direction:column;width:238px;padding:22px 14px;display:flex;position:fixed;inset-block:0;inset-inline-start:0}.brand{align-items:center;gap:10px;padding:0 8px 30px;display:flex}.brand>div{color:#102f3e;background:#d7b36a;border-radius:8px;place-items:center;width:36px;height:36px;font-weight:800;display:grid}.brand>span{font-weight:700;line-height:1.1}.brand small{color:#8ea6b0;letter-spacing:1px;font-size:10px;font-weight:400;display:block}.brand button{margin-inline-start:auto;display:none}.sidebar nav{gap:4px;display:grid}.sidebar nav button{text-align:start;color:#afc2c9;border-radius:7px;align-items:center;gap:12px;padding:11px 13px;font-size:13px;display:flex}.sidebar nav button:hover,.sidebar nav button.active{color:#fff;background:#214858}.sidebar nav button.active{box-shadow:inset 3px 0 #d7b36a}.side-bottom{border-top:1px solid #31515f;margin-top:auto;padding:16px 10px 3px}.side-bottom>div{grid-template-columns:auto 1fr auto;align-items:center;gap:8px;font-size:11px;display:grid}.side-bottom b{font-size:10px}.side-bottom progress{width:100%;margin:12px 0}.side-bottom>small{color:#76909b;font-size:9px}.shell{min-height:100vh;margin-inline-start:238px}.shell>header{border-bottom:1px solid var(--line);z-index:7;background:#fff;align-items:center;gap:12px;height:72px;padding:0 28px;display:flex;position:sticky;top:0}.search{background:#f1f4f5;border:1px solid #0000;border-radius:7px;flex:1;align-items:center;gap:10px;max-width:560px;height:40px;padding:0 13px;display:flex}.search:focus-within{background:#fff;border-color:#83aaa9}.search input{background:0 0;border:0;outline:0;flex:1;min-width:60px}.search svg{color:#72838b}.head-action{background:var(--teal);color:#fff;border-radius:7px;align-items:center;gap:7px;padding:10px 13px;font-size:12px;font-weight:600;display:flex}.head-action.secondary{color:var(--ink);background:#fff;border:1px solid #bdcbd0}.icon{padding:8px;position:relative}.icon i{color:#1b2930;background:#d7b36a;border-radius:50%;width:16px;height:16px;font-size:9px;font-style:normal;line-height:16px;position:absolute;top:0;right:0}.language{color:var(--teal);font-size:12px}.profile{border-inline-start:1px solid var(--line);align-items:center;gap:9px;padding-inline-start:15px;display:flex}.profile>span,.person>span{width:34px;height:34px;color:var(--teal);background:#d9e7e8;border-radius:50%;place-items:center;font-size:11px;font-weight:700;display:grid}.profile b,.profile small{white-space:nowrap;font-size:11px;display:block}.profile small{color:var(--muted);font-size:9px}.hamb{display:none}main{min-height:calc(100vh - 72px);padding:30px 34px}.dash-head h1,.page-title h1{color:var(--ink);margin:0 0 6px;font-size:24px}.dash-head p,.page-title p{color:var(--muted);margin:0;font-size:12px}.metrics{grid-template-columns:repeat(4,1fr);gap:15px;margin:26px 0;display:grid}.metrics>div{border:1px solid var(--line);background:#fff;border-radius:8px;grid-template-columns:auto 1fr;gap:5px 11px;padding:17px;display:grid}.metrics svg{width:28px;height:28px;color:var(--teal);background:#e2efef;border-radius:7px;grid-row:1/4;padding:6px}.metrics span,.metrics small{color:var(--muted);font-size:10px}.metrics b{color:var(--ink);font-size:22px}section{margin-top:32px}.section-title{justify-content:space-between;align-items:center;margin-bottom:13px;display:flex}.section-title h2{color:var(--ink);margin:0;font-size:16px}.section-title button{color:var(--teal);align-items:center;gap:3px;font-size:11px;display:flex}.quick-grid{grid-template-columns:repeat(4,1fr);gap:13px;display:grid}.quick-grid>div{border:1px solid var(--line);background:#fff;border-radius:8px;grid-template-columns:auto 1fr;gap:5px 11px;padding:17px;display:grid}.quick-grid svg{color:var(--teal);grid-row:1/4;width:30px;height:30px}.quick-grid b{text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.quick-grid span,.quick-grid small{color:var(--muted);font-size:9px}.dash-cols{grid-template-columns:1.4fr 1fr;gap:20px;display:grid}.dash-cols>div{border:1px solid var(--line);background:#fff;border-radius:8px;padding:18px}.recent-row{border-bottom:1px solid #edf1f2;grid-template-columns:auto 1fr 130px 55px;align-items:center;gap:11px;padding:11px 0;font-size:10px;display:grid}.recent-row b{font-size:11px}.recent-row svg{color:var(--teal)}.recent-row span,.recent-row small{color:var(--muted)}.activity{gap:10px;margin:14px 0;display:flex}.activity>span{color:var(--teal);background:#e5eeee;border-radius:50%;place-items:center;width:31px;height:31px;font-size:9px;font-weight:700;display:grid}.activity p{margin:0;font-size:10px;line-height:1.6}.activity strong,.activity small{display:block}.activity small{color:var(--muted)}.page-title{justify-content:space-between;align-items:end;margin-bottom:21px;display:flex}.crumb{color:var(--teal);align-items:center;gap:3px;margin-bottom:12px;font-size:10px;display:flex}.crumb svg{width:13px}.view{border:1px solid var(--line);background:#fff;border-radius:6px;padding:3px;display:flex}.view button{border-radius:4px;padding:6px}.view .on{color:var(--teal);background:#e1ecec}.file-table{border:1px solid var(--line);background:#fff;border-radius:8px}.table-head,.file-table .file-item{grid-template-columns:minmax(230px,2fr) 1fr 1fr 80px 100px 35px;align-items:center;gap:12px;display:grid}.table-head{color:var(--muted);border-bottom:1px solid var(--line);background:#f8fafb;padding:12px 18px;font-size:9px}.file-item{position:relative}.file-table .file-item{border-bottom:1px solid #edf1f2;padding:11px 18px;font-size:10px}.file-table .file-item:hover{background:#f6faf9}.file-table .file-visual{display:none}.file-name{align-items:center;gap:10px;min-width:0;display:flex}.file-name svg{color:var(--teal);flex:none}.file-name b{text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.file-name .mini{color:#d3a84f;width:12px;margin-inline-start:auto}.shared{color:var(--muted);align-items:center;gap:4px;display:flex}.shared svg{width:12px}.more{padding:5px}.file-grid{grid-template-columns:repeat(5,1fr);gap:14px;display:grid}.file-grid .file-item{border:1px solid var(--line);background:#fff;border-radius:8px;grid-template-columns:1fr auto;padding:10px;display:grid}.file-grid .file-visual{height:118px;color:var(--teal);background:#f0f4f4;border-radius:5px;grid-column:1/-1;place-items:center;margin-bottom:10px;display:grid;position:relative}.file-grid .file-visual svg{width:44px;height:44px}.file-grid .file-visual small{font-size:8px;position:absolute;bottom:9px}.file-grid .file-name{grid-column:1/2}.file-grid .file-name>svg,.file-grid .owner,.file-grid .date,.file-grid .filesize,.file-grid .shared{display:none}.file-grid .more{grid-column:2}.context{z-index:6;border:1px solid var(--line);inset-inline-end:10px;background:#fff;border-radius:7px;width:190px;padding:6px;position:absolute;top:43px;box-shadow:0 12px 28px #15394924}.context button{border-radius:5px;align-items:center;gap:9px;width:100%;padding:8px;font-size:10px;display:flex}.context button:hover{background:#eef4f4}.context svg{width:15px}.context hr{border:0;border-top:1px solid var(--line)}.context .danger{color:var(--danger)}.empty{text-align:center;color:var(--muted);padding:100px 20px}.empty>svg{stroke-width:1px;width:70px;height:70px}.empty h3{color:var(--ink)}.drop{border:2px dashed var(--teal);z-index:10;text-align:center;color:var(--teal);background:#eaf4f4ed;border-radius:12px;place-content:center;display:grid;position:fixed;inset:92px 30px 30px 268px}.drop svg{width:55px;height:55px;margin:auto}.dept-grid{grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px;display:grid}.dept-grid>div{border:1px solid var(--line);background:#fff;border-radius:8px;padding:20px;position:relative}.dept-grid>div>span{color:#b6c3c8;font-size:10px;position:absolute;right:15px}.dept-grid svg{color:var(--teal);width:28px;height:28px}.dept-grid h3{font-size:14px}.dept-grid p{color:var(--muted);font-size:10px}.dept-grid button{color:var(--teal);gap:5px;font-size:10px;display:flex}.dept-grid button svg{width:12px}.room{color:#fff;background:#173e4f;border-radius:10px;grid-template-columns:auto 2fr repeat(3,1fr) auto;align-items:center;gap:20px;margin-top:28px;padding:25px;display:grid}.room>svg{color:#d7b36a;width:43px;height:43px}.room small{color:#99b0ba;font-size:9px;display:block}.room h2{margin:7px 0;font-size:18px}.room p{color:#b6c6cd;font-size:10px}.room button{color:#173e4f;background:#d7b36a;border-radius:6px;padding:10px 14px;font-size:10px;font-weight:700}.storage-card{border:1px solid var(--line);background:#fff;border-radius:9px;align-items:center;gap:20px;margin-top:25px;padding:30px;display:flex}.storage-card>svg{width:55px;height:55px;color:var(--teal)}.storage-card>div{flex:1}.storage-card h2{font-size:19px}.storage-card progress{width:100%;height:10px}.storage-card p,.storage-card small{color:var(--muted);font-size:11px}.storage-types{border:1px solid var(--line);background:#fff;border-radius:8px;margin-top:15px;padding:12px 22px}.storage-types>div{border-bottom:1px solid var(--line);grid-template-columns:1fr auto;padding:17px 0;display:grid;position:relative;overflow:hidden}.storage-types span{height:3px;width:var(--w);background:var(--teal);position:absolute;bottom:0;left:0}.storage-types b,.storage-types small{font-size:11px}.demo-note{color:var(--muted);font-size:10px}.modal-wrap{z-index:20;background:#0b202ba8;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{background:#fff;border-radius:10px;width:min(520px,100%);max-height:90vh;overflow:auto;box-shadow:0 22px 60px #0004}.modal.panel{border-radius:0;width:min(410px,100%);max-height:none;position:absolute;inset-block:0;inset-inline-end:0}.modal-head{border-bottom:1px solid var(--line);justify-content:space-between;padding:19px 22px;display:flex}.modal-head h2{margin:0;font-size:16px}.modal form,.share-modal,.details,.notifications{padding:22px}.modal form label{margin-bottom:8px;font-size:11px;display:block}.modal form input{border:1px solid #b9c7cc;border-radius:6px;outline:0;width:100%;padding:11px}.modal-actions{justify-content:flex-end;gap:8px;margin-top:20px;display:flex}.modal-actions button{border:1px solid var(--line);border-radius:6px;padding:9px 17px}.modal-actions .primary{background:var(--teal);color:#fff}.share-item{background:#f3f6f7;align-items:center;gap:10px;padding:12px;display:flex}.share-modal h4,.details h4{margin-top:23px;font-size:11px}.person{grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:8px 0;display:grid}.person b{font-size:11px}.person select{border:0;font-size:10px}.general{background:#f3f6f7;gap:10px;padding:12px;display:flex}.general b,.general small{font-size:10px;display:block}.copy{border:1px solid var(--teal);color:var(--teal);border-radius:6px;gap:6px;margin-top:18px;padding:10px;display:flex}.detail-icon{text-align:center;color:var(--teal)}.detail-icon svg{width:50px;height:50px}.details>h3{text-align:center;margin-bottom:26px;font-size:15px}.detail-row{border-bottom:1px solid var(--line);justify-content:space-between;padding:10px 0;font-size:10px;display:flex}.detail-row span{color:var(--muted)}.detail-activity{border-inline-start:2px solid #b7d3d2;padding-inline-start:9px;font-size:10px}.detail-activity small{color:var(--muted);display:block}.preview{text-align:center;padding:35px}.preview iframe{border:0;width:100%;height:65vh}.preview-icon svg{width:80px;height:80px;color:var(--teal);stroke-width:1px}.preview a{background:var(--teal);color:#fff;border-radius:6px;align-items:center;gap:7px;padding:10px 18px;text-decoration:none;display:inline-flex}.notifications>div{border-bottom:1px solid var(--line);gap:10px;padding:12px;display:flex}.notifications>div>span{background:0 0;border-radius:50%;width:7px;height:7px;margin-top:5px}.notifications .unread>span{background:var(--teal)}.notifications p{margin:0;font-size:11px}.notifications small{color:var(--muted);margin-top:5px;display:block}.upload-panel{bottom:18px;border:1px solid var(--line);z-index:15;background:#fff;border-radius:8px;width:330px;position:fixed;inset-inline-end:20px;overflow:hidden;box-shadow:0 14px 40px #0003}.upload-panel>div:first-child{color:#fff;background:#173e4f;justify-content:space-between;padding:13px;display:flex}.upload-row{grid-template-columns:1fr auto;padding:10px 13px;display:grid}.upload-row span,.upload-row small{font-size:9px}.upload-row progress{grid-column:1/-1;width:100%;margin-top:7px}.toast{bottom:22px;color:#fff;z-index:30;background:#143a48;border-radius:7px;align-items:center;gap:8px;padding:12px 17px;font-size:11px;display:flex;position:fixed;inset-inline-start:260px}.shade{display:none}@media (width<=1050px){.profile div,.language{display:none}.file-grid{grid-template-columns:repeat(3,1fr)}.metrics{grid-template-columns:1fr 1fr}.dept-grid{grid-template-columns:repeat(2,1fr)}.room{grid-template-columns:auto 1fr 1fr}.room>div:nth-of-type(3),.room>div:nth-of-type(4){display:none}}@media (width<=760px){.sidebar{transition:all .25s;transform:translate(-110%)}.sidebar.show{transform:none}html[dir=rtl] .sidebar{transform:translate(110%)}html[dir=rtl] .sidebar.show{transform:none}.brand button{display:block}.shell{margin:0}.hamb{display:block}.shell>header{padding:0 12px}.head-action{padding:9px;font-size:0}.head-action svg{margin:0}.head-action.secondary,.profile{display:none}.search{max-width:none}.shade{z-index:11;background:#0007;display:block;position:fixed;inset:0}main{padding:22px 14px}.metrics,.quick-grid{grid-template-columns:1fr 1fr}.dash-cols{grid-template-columns:1fr}.file-grid{grid-template-columns:1fr 1fr}.file-table{background:0 0;border:0}.table-head{display:none}.file-table .file-item{border:1px solid var(--line);background:#fff;border-radius:7px;grid-template-columns:1fr auto;margin-bottom:8px}.file-table .owner,.file-table .date,.file-table .filesize,.file-table .shared{display:none}.dept-grid{grid-template-columns:1fr 1fr}.room{grid-template-columns:auto 1fr}.room>div:not(:first-of-type){display:none}.drop{inset:80px 12px 12px}.toast{inset-inline-start:15px;bottom:15px}.recent-row{grid-template-columns:auto 1fr auto}.recent-row span{display:none}}@media (width<=480px){.metrics,.quick-grid,.dept-grid,.file-grid{grid-template-columns:1fr}.search svg:last-child{display:none}.dash-head h1{font-size:20px}.upload-panel{width:calc(100% - 20px);inset-inline-end:10px}.room{padding:18px}.room button{display:none}}