.doc-center{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:calc(100vh - 122px);background:#f7f9fc;border:1px solid #e5eaf1;border-radius:18px;overflow:hidden}.doc-sidebar{display:flex;flex-direction:column;gap:6px;padding:20px 12px;background:#fff;border-right:1px solid #e7ecf2}.doc-nav{display:flex;align-items:center;gap:11px;width:100%;padding:11px 13px;border:0;border-radius:10px;background:transparent;color:#526071;font:600 13px inherit;text-align:left;cursor:pointer}.doc-nav:hover{background:#f0f7f5;color:#08775c}.doc-nav.active{background:#e8f8f3;color:#047857}.doc-nav i{width:20px;text-align:center}.doc-sipgn-note{display:flex;gap:9px;margin-top:auto;padding:12px;border-radius:10px;background:#f7f9fc;color:#68778a;font-size:11px;line-height:1.45}.doc-main{min-width:0;padding:24px}.doc-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.doc-toolbar h2{margin:0;color:#172033;font-size:23px}.doc-toolbar p{margin:5px 0 0;color:#718096;font-size:12px}.doc-toolbar-actions{display:flex;align-items:center;gap:8px}.doc-toolbar-actions select{min-width:210px}.doc-search-row{display:flex;gap:10px;margin:22px 0 14px}.doc-search{display:flex;align-items:center;flex:1;max-width:620px;border:1px solid #dce3eb;border-radius:11px;background:#fff;overflow:hidden}.doc-search>i{margin-left:14px;color:#8b98a8}.doc-search input{flex:1;min-width:0;padding:11px;border:0;outline:0;background:transparent}.doc-search button{align-self:stretch;padding:0 17px;border:0;border-left:1px solid #e7ecf2;background:#fff;color:#08775c;font-weight:700;cursor:pointer}.doc-view-toggle{width:42px;border:1px solid #dce3eb;border-radius:11px;background:#fff;color:#66758a;cursor:pointer}.doc-breadcrumbs{display:flex;align-items:center;gap:8px;min-height:32px;margin-bottom:12px;overflow:auto;white-space:nowrap}.doc-breadcrumbs button{border:0;background:transparent;color:#526071;font-weight:600;cursor:pointer}.doc-breadcrumbs button:hover{color:#078566}.doc-breadcrumbs>i{font-size:9px;color:#a4afbc}.doc-items.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}.doc-items.list{display:flex;flex-direction:column;gap:8px}.doc-item{position:relative;display:flex;align-items:center;gap:13px;min-width:0;padding:15px;border:1px solid #e1e7ee;border-radius:13px;background:#fff;box-shadow:0 2px 8px rgba(24,40,66,.035);cursor:pointer;transition:.18s ease}.doc-item:hover,.doc-item:focus{border-color:#8fd8c5;box-shadow:0 7px 22px rgba(27,95,76,.09);transform:translateY(-1px);outline:0}.doc-items.grid .doc-item{align-items:flex-start;min-height:104px}.doc-item-icon{display:grid;place-items:center;flex:0 0 43px;height:43px;border-radius:11px;background:#f3f6f9;color:#607084;font-size:23px}.doc-folder .doc-item-icon{background:#fff4cf;color:#e7a812}.doc-item-info{display:flex;flex-direction:column;min-width:0;line-height:1.35}.doc-item-info strong{overflow:hidden;color:#273449;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.doc-item-info span,.doc-item-info small{margin-top:5px;color:#7a8798;font-size:10px}.doc-item-info small{margin-top:2px}.doc-item-actions{display:flex;gap:2px;margin-left:auto}.doc-items.grid .doc-item-actions{position:absolute;right:8px;top:7px;opacity:0}.doc-item:hover .doc-item-actions,.doc-item:focus-within .doc-item-actions{opacity:1}.doc-item-action{display:grid;place-items:center;width:29px;height:29px;border:0;border-radius:8px;background:#f5f7fa;color:#7a8798;cursor:pointer}.doc-item-action:hover,.doc-item-action.active{background:#fff3cd;color:#d49a00}.doc-item-action.danger:hover{background:#fff0f0;color:#dc3545}.doc-item-action.primary{background:#eaf8f4;color:#078566}.doc-icon-image{color:#7c3aed}.doc-icon-pdf{color:#dc2626}.doc-icon-video{color:#2563eb}.doc-icon-audio{color:#db2777}.doc-icon-word{color:#1d4ed8}.doc-icon-excel{color:#16834f}.doc-icon-powerpoint{color:#ea580c}.doc-icon-text{color:#0f766e}.doc-icon-zip{color:#b45309}.doc-upload-progress{margin:8px 0 13px;padding:10px 13px;border-radius:9px;background:#eaf8f4;color:#08775c;font-size:12px}.doc-loading,.doc-empty{display:flex;align-items:center;justify-content:center;gap:9px;min-height:180px;color:#77869a}.doc-empty{flex-direction:column;text-align:center}.doc-empty>i{font-size:39px;color:#c2cbd5}.doc-empty h3{margin:4px 0 0;color:#445267}.doc-empty p{margin:0;font-size:12px}.doc-create-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}.doc-create-choices button{display:flex;align-items:center;gap:12px;padding:18px;border:1px solid #dce3eb;border-radius:12px;background:#fff;color:#344258;font-weight:700;cursor:pointer}.doc-create-choices button:hover{border-color:#8fd8c5;background:#f3fbf8}.doc-create-choices i{font-size:24px;color:#078566}.doc-checkbox{display:flex;align-items:center;gap:8px;margin-top:13px;color:#526071;font-size:12px}.doc-preview-box{width:min(94vw,1000px);max-width:1000px}.doc-preview-actions{display:flex;align-items:center;gap:8px}.doc-preview-body{display:grid;place-items:center;min-height:55vh;max-height:72vh;padding:16px;background:#eef2f6;overflow:auto}.doc-preview-body img,.doc-preview-body video{max-width:100%;max-height:68vh;border-radius:8px}.doc-preview-body iframe{width:100%;height:68vh;border:0;border-radius:8px;background:#fff}.doc-preview-body audio{width:min(600px,90%)}.doc-preview-body pre{align-self:stretch;justify-self:stretch;margin:0;padding:20px;border-radius:8px;background:#fff;white-space:pre-wrap;word-break:break-word}.doc-preview-fallback{text-align:center;color:#67768a}.doc-preview-fallback>i{font-size:55px}.doc-preview-fallback h3{margin-bottom:4px;color:#344258}.doc-preview-fallback p{margin-top:0}.dark-mode .doc-center,.dark-mode .doc-main{background:#111827;border-color:#293448}.dark-mode .doc-sidebar,.dark-mode .doc-item,.dark-mode .doc-search,.dark-mode .doc-search button,.dark-mode .doc-view-toggle{background:#182132;border-color:#2b384c}.dark-mode .doc-toolbar h2,.dark-mode .doc-item-info strong{color:#eef2f7}.dark-mode .doc-nav{color:#b6c1cf}.dark-mode .doc-nav.active{background:#113c34;color:#78e2c5}.dark-mode .doc-search input{color:#eef2f7}.dark-mode .doc-preview-body{background:#101827}
@media(max-width:800px){.doc-center{display:block;min-height:calc(100vh - 104px);margin:-10px;border-radius:0;border-left:0;border-right:0}.doc-sidebar{flex-direction:row;padding:10px;overflow-x:auto;border-right:0;border-bottom:1px solid #e7ecf2}.doc-nav{flex:0 0 auto;width:auto;padding:9px 11px}.doc-sipgn-note{display:none}.doc-main{padding:14px 12px 88px}.doc-toolbar{display:block}.doc-toolbar h2{font-size:19px}.doc-toolbar-actions{display:grid;grid-template-columns:1fr 1fr;margin-top:14px}.doc-toolbar-actions select{grid-column:1/-1;min-width:0}.doc-search-row{margin-top:14px}.doc-search button{display:none}.doc-items.grid{grid-template-columns:1fr 1fr;gap:8px}.doc-items.grid .doc-item{display:block;min-height:127px;padding:12px}.doc-items.grid .doc-item-info{margin-top:10px}.doc-items.grid .doc-item-actions{position:static;margin-top:8px;opacity:1}.doc-items.list .doc-item-actions{opacity:1}.doc-preview-box{width:100%;height:100%;max-width:none;border-radius:0}.doc-preview-body{min-height:calc(100vh - 88px);max-height:calc(100vh - 88px);padding:8px}.doc-preview-body iframe{height:calc(100vh - 110px)}}
@media(max-width:420px){.doc-items.grid{grid-template-columns:1fr}.doc-toolbar-actions .btn{font-size:12px}.doc-nav span{font-size:11px}}
.doc-main{position:relative}.doc-main.drag-over:after{content:'Lepaskan file untuk mengunggah';position:absolute;inset:12px;z-index:30;display:grid;place-items:center;border:2px dashed #12a47d;border-radius:16px;background:rgba(232,248,243,.96);color:#047857;font-size:16px;font-weight:800;pointer-events:none}