:root{--green:#0f4d3e;--green-2:#11775d;--green-soft:#eaf6f1;--orange:#ef641e;--orange-soft:#fff1e9;--ink:#192922;--muted:#7b8984;--line:#e3ebe7;--bg:#f7faf8;--white:#fff;--purple:#7457d9;--purple-soft:#f0ebff;--blue:#3d7ce6;--blue-soft:#edf4ff;--shadow:0 12px 34px rgba(21,58,47,.06);--radius:18px}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.ico{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}.ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}[hidden]{display:none!important}.app-shell{display:grid;grid-template-columns:238px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:#fff;border-right:1px solid var(--line);padding:24px 14px 18px;display:flex;flex-direction:column;z-index:20}.side-brand{padding:2px 13px 26px}.side-brand img{width:150px;max-width:100%;display:block}.side-brand small{display:block;margin:7px 0 0 31px;color:#80908a;font-weight:700;letter-spacing:.12em;font-size:9px}.side-nav{display:flex;flex-direction:column;gap:5px}.nav{border:0;background:transparent;width:100%;height:44px;border-radius:11px;display:grid;grid-template-columns:24px 1fr 15px;align-items:center;gap:8px;text-align:left;padding:0 13px;color:#25342f;font-size:13px;cursor:pointer;transition:.18s}.nav:hover{background:#f3f7f5}.nav.active{background:linear-gradient(135deg,#0e513f,#097057);color:#fff;box-shadow:0 8px 20px rgba(15,77,62,.14)}.nav .chev{font-size:17px;text-align:right}.side-bottom{margin-top:auto;display:flex;flex-direction:column;gap:12px}.help-card{border:1px solid var(--line);border-radius:14px;padding:15px;background:#fbfdfc}.help-card b{font-size:12px;color:var(--green)}.help-card p{font-size:10px;line-height:1.55;color:#5d6e68;margin:9px 0 12px}.help-btn,.attendance-link{display:flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;border:1px solid #b9d5ca;color:var(--green);border-radius:9px;padding:9px 10px;font-weight:700;font-size:11px;background:#fff}.attendance-link{border-color:transparent;background:#f1f6f4;justify-content:flex-start}.user-side{display:grid;grid-template-columns:36px 1fr 16px;align-items:center;gap:9px;padding:9px 3px}.user-side b,.user-chip b{display:block;font-size:11px}.user-side small,.user-chip small{display:block;font-size:9px;color:#85938e;margin-top:2px}.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#0f4d3e,#0c7559);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}.main{min-width:0;padding:0 34px 20px}.topbar{height:96px;display:flex;align-items:center;justify-content:space-between;gap:24px}.top-title small{font-size:10px;color:#687771}.top-title h1{font-size:22px;margin:3px 0 0}.top-actions{display:flex;align-items:center;gap:12px}.global-search{width:min(370px,32vw);height:42px;background:#fff;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;gap:8px;padding:0 12px}.global-search input{border:0;outline:0;background:transparent;width:100%;font-size:11px}.icon-btn{width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;position:relative;color:#3c4c46;cursor:pointer}.icon-btn i{position:absolute;right:-2px;top:-4px;background:var(--orange);color:#fff;border-radius:10px;min-width:16px;height:16px;padding:0 4px;font-size:9px;font-style:normal;display:flex;align-items:center;justify-content:center}.user-chip{min-width:180px;height:52px;padding:7px 12px;border:1px solid var(--line);background:#fff;border-radius:12px;display:grid;grid-template-columns:36px 1fr 16px;align-items:center;gap:9px}.view{display:none}.view.active{display:block}.welcome-row,.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin:7px 0 22px}.welcome-row h2,.page-head h2{font-size:26px;margin:5px 0 5px;letter-spacing:-.025em}.welcome-row p,.page-head p{margin:0;color:var(--muted);font-size:12px}.eyebrow{font-size:9px;font-weight:800;letter-spacing:.13em;color:var(--green)}.btn{height:42px;border-radius:10px;border:1px solid var(--line);padding:0 16px;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:.18s}.btn.primary{background:linear-gradient(135deg,#0f4d3e,#0c7459);border-color:transparent;color:#fff;box-shadow:0 7px 18px rgba(15,77,62,.14)}.btn.primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(15,77,62,.18)}.btn.secondary{background:#fff;color:#52615c}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.metric-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:17px;display:grid;grid-template-columns:48px 1fr;gap:13px;align-items:center;box-shadow:var(--shadow)}.metric-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center}.metric-icon .ico{width:23px;height:23px}.metric-icon.green{background:var(--green-soft);color:var(--green)}.metric-icon.orange{background:var(--orange-soft);color:var(--orange)}.metric-icon.blue{background:var(--blue-soft);color:var(--blue)}.metric-icon.purple{background:var(--purple-soft);color:var(--purple)}.metric-card small{display:block;color:#73817c;font-size:10px}.metric-card b{display:block;font-size:24px;margin-top:3px}.metric-card em{font-size:9px;color:#87948f;font-style:normal}.dashboard-grid{display:grid;grid-template-columns:1.1fr 1fr .95fr;gap:14px}.bottom-grid{display:grid;grid-template-columns:1.3fr .8fr;gap:14px;margin-top:14px}.panel{background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow)}.dashboard-grid .panel,.bottom-grid .panel{padding:18px}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}.panel-head h3,.section-subhead h3{font-size:14px;margin:0}.panel-head p,.section-subhead p{font-size:10px;color:var(--muted);margin:4px 0 0}.text-btn{border:0;background:transparent;color:var(--green);font-size:9px;font-weight:800;cursor:pointer}.recent-list{min-height:245px}.recent-row{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #edf1ef}.recent-row:last-child{border-bottom:0}.file-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:900}.file-icon.pdf{background:#fff0e9;color:#e95d1e}.file-icon.sheet{background:#ebf8f0;color:#1b9a52}.file-icon.doc{background:#edf4ff;color:#3679d8}.file-icon.other{background:#f0ebff;color:#7155c7}.recent-row b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recent-row small{display:block;font-size:9px;color:#89968f;margin-top:2px}.recent-row a{font-size:9px;color:var(--green);font-weight:800;text-decoration:none}.category-chart{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:14px;min-height:245px}.donut{width:138px;height:138px;border-radius:50%;position:relative;margin:auto}.donut:after{content:"";position:absolute;inset:27px;border-radius:50%;background:#fff}.donut-center{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center}.donut-center b{font-size:23px}.donut-center small{font-size:8px;color:#7d8c86}.legend{display:flex;flex-direction:column;gap:8px}.legend-row{display:grid;grid-template-columns:9px 1fr auto;align-items:center;gap:6px;font-size:9px}.legend-dot{width:8px;height:8px;border-radius:50%}.legend-row span{color:#586862}.legend-row b{font-size:9px}.quick-actions{display:flex;flex-direction:column;gap:5px}.quick-actions button{border:0;background:#fff;border-radius:10px;display:grid;grid-template-columns:36px 1fr 18px;gap:9px;align-items:center;text-align:left;padding:8px;cursor:pointer}.quick-actions button:hover{background:#f7faf8}.quick-ico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center}.quick-ico.green{background:var(--green-soft);color:var(--green)}.quick-ico.orange{background:var(--orange-soft);color:var(--orange)}.quick-ico.purple{background:var(--purple-soft);color:var(--purple)}.quick-ico.blue{background:var(--blue-soft);color:var(--blue)}.quick-actions b{display:block;font-size:10px}.quick-actions small{display:block;font-size:8px;color:#89968f;margin-top:2px}.quick-actions em{font-style:normal;color:#a1aaa6}.list-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #edf1ef}.list-row:last-child{border-bottom:0}.list-row b{font-size:10px}.list-row small{display:block;font-size:8px;color:#83918c;margin-top:2px}.badge,.status-pill{font-size:8px;border-radius:20px;padding:5px 8px;font-weight:800}.badge{background:var(--green-soft);color:var(--green)}.status-pill.success{background:#e9f8ef;color:#16864d}.status-pill.warning{background:#fff4df;color:#a16b10}.status-boxes{display:grid;grid-template-columns:1fr 1fr;gap:10px}.status-box{border:1px solid var(--line);border-radius:11px;padding:13px}.status-box small{display:block;font-size:8px;color:#84928d}.status-box b{font-size:12px;display:block;margin-top:5px}.filter-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;grid-template-columns:1fr 190px auto;gap:10px;box-shadow:var(--shadow)}.search-wide{height:44px;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;gap:8px;padding:0 12px}.search-wide input{border:0;outline:0;width:100%;font-size:11px}.filter-card select{height:44px;border:1px solid var(--line);border-radius:9px;padding:0 12px;background:#fff;font-size:11px;color:#33433d}.section-meta{height:50px;display:flex;align-items:center;justify-content:space-between;color:#778680;font-size:10px}.view-switch{display:flex;gap:5px}.view-switch button{width:30px;height:30px;border:1px solid var(--line);background:#fff;border-radius:7px;cursor:pointer}.view-switch button.active{background:var(--green);color:#fff;border-color:var(--green)}.doc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.doc-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow);transition:.18s;min-width:0}.doc-card:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(24,60,49,.09)}.doc-top{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center}.doc-card .type{font-size:8px;color:var(--green);font-weight:800}.doc-card h3{font-size:13px;margin:3px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.doc-card p{font-size:9px;color:#76857f;line-height:1.5;min-height:40px}.doc-meta{font-size:8px;color:#87948f;line-height:1.5;padding:10px 0;border-top:1px solid #edf1ef}.doc-actions{display:flex;gap:7px;margin-top:9px}.doc-actions a,.doc-actions button{flex:1;height:34px;border-radius:8px;border:1px solid var(--line);background:#fff;color:#52615b;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer}.doc-actions a.open{background:var(--green);color:#fff;border-color:var(--green)}.doc-grid.list-mode{grid-template-columns:1fr}.doc-grid.list-mode .doc-card{display:grid;grid-template-columns:1fr 250px auto;align-items:center;gap:14px}.doc-grid.list-mode .doc-card p{min-height:0;margin:0}.doc-grid.list-mode .doc-meta{border:0;padding:0}.doc-grid.list-mode .doc-actions{margin:0;width:190px}.upload-layout{display:grid;grid-template-columns:.75fr 1.4fr;gap:14px}.upload-drop-panel,.form-panel{padding:18px}.drop-zone{min-height:360px;border:1.5px dashed #cbdad4;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;background:#fbfdfc;transition:.18s}.drop-zone:hover{border-color:var(--green);background:#f6fbf8}.drop-icon{width:58px;height:58px;border-radius:50%;background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center;margin-bottom:12px}.drop-icon .ico{width:27px;height:27px}.drop-zone b{font-size:13px}.drop-zone p{font-size:10px;color:#7b8984;margin:5px 0}.drop-zone small{font-size:8px;color:#9aa5a1}.selected-file{margin-top:12px;padding:12px;border-radius:10px;background:#f4f8f6;font-size:10px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form-grid label{font-size:9px;font-weight:700;color:#53635d}.form-grid input,.form-grid select,.form-grid textarea{display:block;width:100%;margin-top:6px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:0 11px;color:#22312c;outline:0}.form-grid input,.form-grid select{height:40px}.form-grid textarea{padding-top:10px;resize:vertical}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:#9fc7b8;box-shadow:0 0 0 3px rgba(15,77,62,.06)}.span-2{grid-column:1/-1}.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.table-panel{overflow:hidden}.table{border-collapse:collapse;width:100%;font-size:10px}.table th{text-align:left;background:#fafcfb;color:#75847e;font-size:8px;letter-spacing:.03em;padding:12px;border-bottom:1px solid var(--line)}.table td{padding:13px 12px;border-bottom:1px solid #edf1ef}.package-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.package-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px;box-shadow:var(--shadow)}.package-card .pkg-icon{width:38px;height:38px;border-radius:10px;background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center}.package-card h3{font-size:12px;margin:12px 0 3px}.package-card p{font-size:9px;color:#87948f;min-height:28px}.package-card .pkg-foot{display:flex;align-items:center;justify-content:space-between;margin-top:13px}.section-divider{height:1px;background:var(--line);margin:22px 0}.section-subhead{margin-bottom:12px}.category-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.category-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;box-shadow:var(--shadow);cursor:pointer}.category-card:hover{border-color:#bcd5cc}.category-card .cat-ico{width:40px;height:40px;border-radius:11px;background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center}.category-card b{font-size:11px}.category-card small{display:block;font-size:9px;color:#87948f;margin-top:3px}.empty-state{text-align:center;padding:50px 20px}.empty-icon{width:58px;height:58px;border-radius:50%;background:#f1f5f3;color:#8b9994;display:flex;align-items:center;justify-content:center;margin:0 auto 13px}.empty-state h3{font-size:14px}.empty-state p{font-size:10px;color:#7d8b86}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.settings-card{padding:17px;display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center}.setting-icon{width:42px;height:42px;border-radius:11px;background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center}.settings-card b{font-size:11px}.settings-card p{font-size:9px;color:#7d8b86;margin:4px 0 0}.footer{height:64px;display:flex;align-items:flex-end;justify-content:space-between;color:#9aa5a1;font-size:8px}.footer b{color:var(--green)}.modal{position:fixed;inset:0;background:rgba(13,31,25,.42);display:flex;align-items:center;justify-content:center;padding:20px;z-index:80}.modal-card{width:min(700px,95vw);max-height:90vh;overflow:auto;background:#fff;border-radius:18px;padding:22px;position:relative;box-shadow:0 25px 80px rgba(0,0,0,.18)}.modal-x{position:absolute;right:13px;top:12px;width:34px;height:34px;border-radius:50%;border:0;background:#f1f4f3;font-size:18px;cursor:pointer}.toast{position:fixed;right:25px;bottom:25px;background:#183c31;color:#fff;padding:12px 16px;border-radius:11px;box-shadow:0 15px 30px rgba(0,0,0,.16);z-index:100;font-size:10px;max-width:360px}.busy{position:fixed;inset:0;background:rgba(247,250,248,.76);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:90}.busy-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 22px;box-shadow:var(--shadow)}.busy-card b{display:block;font-size:11px}.busy-card small{display:block;font-size:9px;color:#7f8d88;margin-top:3px}.spinner{width:23px;height:23px;border:3px solid #d8e7e1;border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.helper{font-size:9px;color:#71807b;line-height:1.5;margin-top:10px}.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#f7faf8}.login-card{width:min(420px,92vw);background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--shadow)}.login-logo{width:180px}.login-card h1{font-size:24px}.login-card p{font-size:11px;color:#7a8983}.login-card label{font-size:10px}.login-card input{width:100%;height:42px;border:1px solid var(--line);border-radius:9px;margin:6px 0 12px;padding:0 11px}.login-card .btn{width:100%}@media(max-width:1180px){.dashboard-grid{grid-template-columns:1fr 1fr}.quick-panel{grid-column:1/-1}.metric-grid{grid-template-columns:1fr 1fr}.doc-grid{grid-template-columns:1fr 1fr}.package-grid,.category-card-grid{grid-template-columns:1fr 1fr}.global-search{display:none}}@media(max-width:850px){.app-shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.side-nav{display:grid;grid-template-columns:1fr 1fr}.side-bottom{display:none}.main{padding:0 16px 18px}.topbar{height:auto;padding:16px 0}.top-title{display:none}.user-chip{min-width:0}.dashboard-grid,.bottom-grid,.upload-layout,.settings-grid{grid-template-columns:1fr}.doc-grid{grid-template-columns:1fr}.filter-card{grid-template-columns:1fr}.category-chart{grid-template-columns:1fr}.metric-grid{grid-template-columns:1fr 1fr}.welcome-row,.page-head{align-items:flex-start}.doc-grid.list-mode .doc-card{display:block}.doc-grid.list-mode .doc-actions{width:auto}.package-grid,.category-card-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.side-nav{grid-template-columns:1fr}.metric-grid,.package-grid,.category-card-grid,.form-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.top-actions{width:100%}.user-chip{width:100%}.welcome-row,.page-head{display:block}.welcome-row .btn,.page-head .btn{margin-top:12px}.main{padding:0 12px 16px}}

/* V1.6 Simple Upload */
.simple-upload-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}.simple-upload-head b{font-size:13px}.simple-upload-head span{font-size:9px;color:var(--muted)}.simple-upload-grid{gap:12px}.simple-upload-grid label small{font-size:8px;color:#9aa6a1;font-weight:600;margin-left:4px}.advanced-upload{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}.advanced-upload summary{cursor:pointer;list-style:none;font-size:10px;font-weight:800;color:var(--green);display:flex;align-items:center;gap:6px}.advanced-upload summary::-webkit-details-marker{display:none}.advanced-upload summary:after{content:'+';margin-left:auto;width:24px;height:24px;border-radius:7px;background:var(--green-soft);display:flex;align-items:center;justify-content:center;font-size:15px}.advanced-upload[open] summary:after{content:'−'}.advanced-upload summary span{font-size:8px;color:#93a09b;font-weight:600}.advanced-grid{margin-top:13px}.form-panel select[data-addable]{font-weight:650;color:#2a3b35}.form-panel select option[value="__ADD__"]{font-weight:800;color:#0f6b52}.upload-layout{grid-template-columns:.85fr 1.25fr}.drop-zone{min-height:310px}@media(max-width:850px){.simple-upload-head{display:block}.simple-upload-head span{display:block;margin-top:4px}}

.folder-route-preview{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px dashed #cfded8;border-radius:12px;background:#f7faf8;color:#496158}.folder-route-preview .ico{width:22px;height:22px;color:#0f6a53}.folder-route-preview small{display:block;font-size:10px;color:#81928c;margin-bottom:2px}.folder-route-preview b{font-size:11px;color:#203b33}.folder-result{display:inline-block;margin-top:6px;padding:6px 9px;border-radius:8px;background:#eef7f3;color:#0f6a53;font-size:10px;font-weight:700}

/* V1.8 organize + simplified information architecture */
.organize-btn{border-color:#d9e6e1!important;color:#0f4d3e!important;background:#f5faf8!important}.organize-btn:hover{background:#e9f5f0!important}.organize-note{font-size:11px;color:#72807b;line-height:1.55;margin:6px 0 14px}.current-path{padding:12px 14px;background:#f6f8f7;border:1px solid #e3e9e6;border-radius:10px;font-size:11px;color:#6e7c77;margin-bottom:14px}.current-path b{color:#20352e}.folder-route-preview{min-height:54px}.side-nav{gap:5px}


/* V1.9 Role-based Document Library */
.page-head-actions{display:flex;gap:8px;align-items:center}.library-section{margin:0 0 16px}.library-section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:10px}.library-section-head h3{font-size:13px;margin:0}.library-section-head p,.library-section-head small{font-size:9px;color:#81908b;margin:3px 0 0}.library-category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.library-category-grid.compact{grid-template-columns:repeat(5,minmax(0,1fr))}.library-card{border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px;text-align:left;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:9px;cursor:pointer;transition:.16s;min-width:0}.library-card:hover{border-color:#b8d2c8;transform:translateY(-1px);box-shadow:0 7px 20px rgba(20,54,43,.06)}.library-card-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:900;letter-spacing:.03em}.library-card-icon.green,.library-card-icon.emerald{background:#e8f5ef;color:#0f6a50}.library-card-icon.blue,.library-card-icon.navy{background:#eaf2fb;color:#2f67a3}.library-card-icon.teal{background:#e8f6f4;color:#26786f}.library-card-icon.amber{background:#fff4d8;color:#9a6c07}.library-card-icon.slate{background:#eef1f0;color:#596762}.library-card-icon.orange{background:#fff0e7;color:#d65b18}.library-card-icon.rose,.library-card-icon.red{background:#fdeced;color:#b43a42}.library-card-icon.violet,.library-card-icon.purple{background:#f1ecfb;color:#6c50aa}.library-card-icon.indigo{background:#eaeefa;color:#465f9f}.library-card-body{min-width:0}.library-card-body b{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.library-card-body small{display:block;font-size:8px;color:#87958f;line-height:1.3;margin-top:2px}.library-card-side{text-align:right}.library-card-side strong{display:block;font-size:12px;color:#213b33}.library-card-side small{font-size:7px;color:#8b9893;white-space:nowrap}.library-card.is-compact{grid-template-columns:34px 1fr;min-height:66px}.library-card.is-compact .library-card-icon{width:34px;height:34px}.library-card.is-compact .library-card-side{display:none}.home-library{padding:14px;margin:14px 0}.access-mini{display:inline-block;margin-top:3px;color:#0f6a53;font-weight:700}.btn.secondary{background:#fff;color:#38564c;border:1px solid var(--line)}
@media(max-width:1200px){.library-category-grid,.library-category-grid.compact{grid-template-columns:repeat(3,1fr)}}@media(max-width:850px){.library-category-grid,.library-category-grid.compact{grid-template-columns:repeat(2,1fr)}.page-head-actions{margin-top:10px}}@media(max-width:560px){.library-category-grid,.library-category-grid.compact{grid-template-columns:1fr}}


/* V1.10 - document format guide + architecture */
.docs-mini-guide{display:flex;gap:14px;align-items:flex-start;padding:15px 17px;margin-bottom:16px;border:1px solid #dce9e4;background:#f8fbfa;border-radius:14px}
.docs-mini-guide .guide-icon{width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:#e7f3ee;color:#0f4d3e;display:grid;place-items:center}
.docs-mini-guide .guide-copy b{font-size:12px;color:#173b30}.docs-mini-guide .guide-copy p{font-size:10.5px;line-height:1.55;margin:5px 0;color:#51645d}.docs-mini-guide .guide-copy small{font-size:9.5px;line-height:1.5;color:#73837d}
.doc-stage-badge{display:inline-flex;align-items:center;border-radius:999px;padding:3px 7px;font-size:8px;font-weight:800;letter-spacing:.03em;background:#eef4f1;color:#31584b;margin-left:4px}.doc-stage-badge.final{background:#e8f5ec;color:#23703e}.doc-stage-badge.draft{background:#fff4e8;color:#a85b18}
@media(max-width:760px){.docs-mini-guide{padding:13px}.docs-mini-guide .guide-copy p{font-size:10px}}
/* ============================================================
   TOMAFOOD DOCS V1.11 - DRIVE STYLE EXPLORER
   ============================================================ */
.doc-type-side{padding:16px 14px 10px;border-top:1px solid #e8eeeb;margin-top:10px;overflow:auto;max-height:46vh}.doc-type-side>small{display:block;font-size:9px;font-weight:800;color:#8b9893;letter-spacing:.08em;margin:0 8px 9px}.doc-type-side button{width:100%;display:flex;align-items:center;gap:9px;border:0;background:transparent;border-radius:9px;padding:7px 9px;font-size:10px;color:#36443f;text-align:left;cursor:pointer;transition:.18s ease}.doc-type-side button:hover,.doc-type-side button.active{background:#eef8f3;color:#0f6c50}.doc-type-side .drive-folder-icon{width:20px;height:16px;flex:0 0 20px}.doc-type-side .drive-folder-icon svg{width:20px;height:16px}.drive-explorer{min-height:calc(100vh - 116px)}.explorer-head{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px;align-items:start}.explorer-main-head{min-width:0}.folder-breadcrumb{display:flex;align-items:center;gap:7px;min-height:28px;margin-bottom:6px;overflow:auto;white-space:nowrap}.folder-breadcrumb button{border:0;background:transparent;padding:4px 2px;color:#6f7d78;font-size:10px;cursor:pointer}.folder-breadcrumb button:hover{color:#0f6c50}.folder-breadcrumb button.current{font-weight:800;color:#24342e}.folder-breadcrumb span{color:#aab5b1}.explorer-title-row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}.explorer-title-row h2{font-size:24px;line-height:1.15;margin:0 0 5px;color:#13251f;letter-spacing:-.03em}.explorer-title-row p{font-size:10px;color:#74827d;margin:0}.explorer-actions{display:flex;gap:8px;flex-wrap:wrap}.explorer-actions .btn{min-height:38px;padding:0 14px}.explorer-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}.explorer-stats>div{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;border:1px solid #e5ece9;background:#fff;border-radius:12px;padding:11px 12px;box-shadow:0 6px 18px rgba(18,55,42,.035)}.explorer-stats .stat-icon{grid-row:1/3;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:18px}.folder-stat{background:#ecf8f1}.doc-stat{background:#eef4ff;color:#3b82f6}.recent-stat{background:#f4efff;color:#7c3aed}.access-stat{background:#fff5dd;color:#d89a00}.explorer-stats small{font-size:8px;color:#899590;font-weight:700}.explorer-stats b{font-size:16px;color:#163229}.explorer-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:16px}.explorer-search{flex:1;min-width:200px;height:40px;background:#fff}.explorer-toolbar .icon-square{height:40px;width:40px;border:1px solid #dfe8e4;background:#fff;border-radius:10px;display:grid;place-items:center;color:#325b4c;cursor:pointer}.explorer-toolbar .icon-square .ico{width:17px;height:17px}.explorer-toolbar select{height:40px;border:1px solid #dfe8e4;background:#fff;border-radius:10px;padding:0 28px 0 11px;font-size:10px;color:#4d5d57}.file-preview-panel{position:sticky;top:84px;min-height:505px;border:1px solid #e2e9e6;border-radius:14px;background:#fff;padding:16px;box-shadow:0 10px 30px rgba(18,55,42,.05);transition:transform .25s ease,opacity .25s ease}.preview-close{position:absolute;right:10px;top:9px;width:28px;height:28px;border:0;background:transparent;font-size:21px;color:#798781;cursor:pointer}.preview-empty{height:440px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#86928d}.preview-empty-icon{width:62px;height:62px;border-radius:16px;background:#f2f7f5;display:grid;place-items:center;font-size:27px;color:#7b8c85;margin-bottom:12px}.preview-empty h3{font-size:13px;margin:0 0 5px;color:#36453f}.preview-empty p{font-size:9px;line-height:1.6;margin:0;max-width:180px}.preview-title{display:flex;justify-content:space-between;gap:12px;padding:2px 28px 8px 0}.preview-title h3{font-size:13px;line-height:1.35;margin:0 0 4px}.preview-title small{font-size:9px;color:#899590}.preview-star{border:0;background:transparent;color:#f3b313;font-size:22px;cursor:pointer}.preview-file-hero{height:150px;border-radius:14px;background:#fafcfc;display:grid;place-items:center;margin:12px 0}.preview-file-hero .drive-file-icon{width:78px;height:86px}.preview-file-hero .drive-file-icon svg{width:78px;height:78px}.preview-actions{display:flex;gap:8px;margin-bottom:15px}.preview-actions .btn{flex:1;justify-content:center;text-decoration:none;min-height:35px}.preview-tabs{display:flex;gap:17px;border-bottom:1px solid #e9eeec;margin-bottom:13px}.preview-tabs button{border:0;background:transparent;padding:9px 2px;font-size:9px;color:#77857f}.preview-tabs button.active{color:#0f6c50;font-weight:800;border-bottom:2px solid #0f6c50}.preview-meta label{display:block;font-size:8px;font-weight:800;color:#51635c;margin:12px 0 3px}.preview-meta p{font-size:9px;line-height:1.55;color:#6f7d78;margin:0}.preview-meta .tag-row{display:flex;flex-wrap:wrap;gap:5px}.preview-meta .tag-row span{background:#f3f6f5;border-radius:999px;padding:4px 7px;font-size:8px;color:#60716a}.preview-meta .text-link{border:0;background:transparent;color:#0f7556;font-weight:800;font-size:9px;padding:13px 0 0;cursor:pointer}.explorer-content{transition:opacity .16s ease,transform .16s ease}.explorer-content.folder-enter{animation:folderEnter .28s cubic-bezier(.2,.8,.2,1)}@keyframes folderEnter{0%{opacity:.15;transform:translateX(10px)}100%{opacity:1;transform:translateX(0)}}.section-label{font-size:9px;font-weight:800;color:#71817b;letter-spacing:.08em;margin:8px 0 9px;display:flex;justify-content:space-between}.folder-section{margin-bottom:20px}.folder-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.drive-folder-card{border:1px solid #e2e9e6;background:#fff;border-radius:11px;min-height:68px;padding:10px 12px;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;box-shadow:0 4px 14px rgba(20,54,43,.025);animation:itemPop .32s both;animation-delay:var(--delay);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.drive-folder-card:hover{transform:translateY(-2px);border-color:#cbded6;box-shadow:0 9px 22px rgba(20,54,43,.07)}.drive-folder-icon{width:46px;height:36px;display:inline-grid;place-items:center;flex:0 0 46px}.drive-folder-icon svg{width:46px;height:36px}.folder-info{min-width:0;display:flex;flex-direction:column;gap:4px}.folder-info b{font-size:10px;color:#22342d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.folder-info small{font-size:8px;color:#899690}.folder-more{margin-left:auto;font-size:17px;color:#66766f}.drive-doc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.drive-doc-card{position:relative;border:1px solid #e2e9e6;background:#fff;border-radius:11px;min-height:91px;padding:11px;cursor:pointer;animation:itemPop .32s both;animation-delay:var(--delay);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.drive-doc-card:hover,.drive-doc-card.selected{transform:translateY(-2px);border-color:#bcd9cd;box-shadow:0 9px 22px rgba(20,54,43,.07)}.drive-doc-card.selected{background:#f8fcfa}.drive-doc-main{display:flex;gap:11px}.drive-file-icon{position:relative;width:42px;height:48px;flex:0 0 42px;display:grid;place-items:center}.drive-file-icon svg{width:42px;height:42px;display:block}.drive-file-icon em{position:absolute;bottom:1px;left:50%;transform:translateX(-50%);font-style:normal;font-size:5px;font-weight:900;color:#fff;letter-spacing:.02em}.drive-doc-copy{min-width:0;padding-top:2px}.drive-doc-copy b{font-size:10px;line-height:1.35;color:#1f302a;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px}.drive-doc-copy small{display:block;font-size:8px;color:#87948f;margin-bottom:4px}.drive-doc-copy span{display:block;font-size:8px;color:#9aa5a1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.doc-kebab{position:absolute;right:8px;top:8px;border:0;background:transparent;color:#66766f;font-size:17px;cursor:pointer}.drive-empty{grid-column:1/-1;border:1px dashed #dfe8e4;border-radius:12px;min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#8a9691;text-align:center}.drive-empty>div{font-size:30px;margin-bottom:8px}.drive-empty b{font-size:11px;color:#53645d;margin-bottom:4px}.drive-empty span{font-size:9px}.drive-doc-grid.list-mode{grid-template-columns:1fr}.drive-doc-grid.list-mode .drive-doc-card{min-height:62px}.drive-doc-grid.list-mode .drive-file-icon{width:34px;height:36px;flex-basis:34px}.drive-doc-grid.list-mode .drive-file-icon svg{width:34px;height:34px}@keyframes itemPop{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}@media(max-width:1180px){.explorer-head{grid-template-columns:1fr}.file-preview-panel{position:fixed;z-index:60;right:14px;top:80px;width:290px;max-height:calc(100vh - 95px);overflow:auto;transform:translateX(115%);opacity:0}.file-preview-panel.open{transform:none;opacity:1}.folder-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.drive-doc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:850px){.doc-type-side{display:none}.explorer-title-row{align-items:flex-start;flex-direction:column}.explorer-stats{grid-template-columns:repeat(2,1fr)}.folder-grid,.drive-doc-grid{grid-template-columns:1fr}.explorer-toolbar{flex-wrap:wrap}.explorer-search{flex-basis:100%}}
/* V1.12 closer to Drive-style reference */
.drive-explorer{max-width:100%;min-height:calc(100vh - 92px)}
.explorer-head{display:block}.explorer-main-head{width:100%}.file-preview-panel{position:fixed;z-index:80;right:18px;top:76px;width:310px;max-height:calc(100vh - 94px);overflow:auto;min-height:0;transform:translateX(115%);opacity:0;pointer-events:none;transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .2s ease}.file-preview-panel.open{transform:none;opacity:1;pointer-events:auto}.preview-empty{display:none!important}.explorer-title-row{margin-bottom:14px}.explorer-stats{grid-template-columns:repeat(4,minmax(0,190px));justify-content:start}.folder-grid{grid-template-columns:repeat(4,minmax(180px,1fr));gap:12px}.drive-folder-card{min-height:74px;border-radius:12px;padding:13px 14px}.drive-folder-card .folder-arrow{margin-left:auto;color:#8b9893;font-size:22px;transition:transform .16s}.drive-folder-card:hover .folder-arrow{transform:translateX(3px);color:#0f6c50}.drive-folder-icon{width:50px;height:38px;flex-basis:50px}.drive-folder-icon svg{width:50px;height:38px}.folder-info b{font-size:11px}.folder-info small{font-size:8.5px}.drive-doc-grid{grid-template-columns:repeat(3,minmax(220px,1fr));gap:12px}.drive-doc-card{min-height:96px;padding:12px 14px}.explorer-content{padding-bottom:30px}.folder-breadcrumb{margin-bottom:9px}.folder-breadcrumb button{font-size:10.5px}.explorer-title-row h2{font-size:25px}.explorer-toolbar{max-width:1000px}.doc-type-side button .drive-folder-icon{width:22px;height:17px;flex-basis:22px}.doc-type-side button .drive-folder-icon svg{width:22px;height:17px}@media(max-width:1100px){.folder-grid{grid-template-columns:repeat(3,minmax(180px,1fr))}.drive-doc-grid{grid-template-columns:repeat(2,minmax(220px,1fr))}}@media(max-width:760px){.folder-grid,.drive-doc-grid{grid-template-columns:1fr}.explorer-stats{grid-template-columns:repeat(2,1fr)}.file-preview-panel{left:10px;right:10px;width:auto;top:70px}}
/* V1.13 hard refresh + folder-first explorer */
.explorer-head{display:block!important}.explorer-main-head{width:100%!important}.file-preview-panel{display:none!important}.file-preview-panel.open{display:block!important;position:fixed!important;right:18px!important;top:76px!important;width:310px!important;max-height:calc(100vh - 94px)!important;overflow:auto!important;z-index:80!important;opacity:1!important;transform:none!important;pointer-events:auto!important}.preview-empty{display:none!important}.folder-grid{grid-template-columns:repeat(4,minmax(190px,1fr))!important}.drive-folder-card.static-seed .drive-folder-icon{font-size:32px}.drive-folder-card.static-seed{min-height:78px}.explorer-content{width:100%!important}.document-section{margin-top:8px}@media(max-width:1100px){.folder-grid{grid-template-columns:repeat(3,minmax(190px,1fr))!important}}@media(max-width:760px){.folder-grid{grid-template-columns:1fr!important}}


/* V1.14 compact professional document cards */
.compact-doc-card{padding:18px!important;min-height:210px!important;border-radius:18px!important;display:flex!important;flex-direction:column!important;gap:14px!important}.compact-doc-card .doc-top{align-items:flex-start!important}.compact-doc-card .file-icon{width:48px!important;height:48px!important;border-radius:12px!important;flex:0 0 48px!important}.compact-doc-card h3{font-size:17px!important;line-height:1.25!important;margin:3px 0!important}.compact-doc-card .type{font-size:10px!important;letter-spacing:.04em!important}.compact-doc-card .doc-title-wrap small{font-size:10px;color:#82918b}.doc-meta-line,.doc-meta-foot{display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:10px;color:#6f7f79}.doc-meta-foot{padding-top:10px;border-top:1px solid #edf1ef}.doc-meta-foot span{background:#f4f7f5;padding:5px 8px;border-radius:999px}.doc-actions-compact{margin-top:auto!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}.doc-actions-compact button{height:38px!important;font-size:10px!important;border-radius:10px!important}.activity-filter{display:flex;gap:10px;align-items:end;margin:14px 0 16px;padding:14px}.activity-filter label{display:flex;flex-direction:column;gap:6px;font-size:10px;font-weight:700;color:#52635d}.activity-filter .grow{flex:1}.activity-filter input,.activity-filter select{height:40px;border:1px solid #dfe7e3;border-radius:10px;padding:0 10px;background:#fff}.activity-table-wrap{overflow:auto}.activity-table{width:100%;border-collapse:collapse;font-size:11px}.activity-table th{padding:12px;text-align:left;color:#71817b;font-size:9px;text-transform:uppercase;border-bottom:1px solid #e8eeeb}.activity-table td{padding:13px 12px;border-bottom:1px solid #edf1ef;vertical-align:top}.activity-table td small{display:block;color:#87958f;margin-top:3px}.event-pill{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:9px;font-weight:800;background:#eef5f2;color:#0f6b53}.event-pill.download{background:#fff2e8;color:#d65b17}.analytics-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}.analytics-kpis>div{background:#fff;border:1px solid #e3ebe7;border-radius:16px;padding:16px;box-shadow:0 6px 20px rgba(23,63,50,.04)}.analytics-kpis small,.analytics-kpis span{display:block;color:#7a8a84;font-size:10px}.analytics-kpis b{display:block;font-size:24px;color:#163f34;margin:6px 0}.analytics-kpis b.smaller{font-size:14px;line-height:1.3}.analytics-panels{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}.analytics-panels>div{background:#fff;border:1px solid #e3ebe7;border-radius:16px;padding:16px}.analytics-panels h3{margin:0 0 10px;font-size:13px}.rank-row{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid #edf1ef}.rank-row:last-child{border-bottom:0}.rank-row>span{width:24px;height:24px;border-radius:8px;background:#eef6f2;display:grid;place-items:center;font-size:10px;font-weight:800;color:#0f6b53}.rank-row b{font-size:11px}.rank-row small{display:block;color:#819089;font-size:9px;margin-top:2px}.rank-row strong{font-size:12px;color:#173f34}@media(max-width:900px){.analytics-kpis{grid-template-columns:1fr 1fr}.analytics-panels{grid-template-columns:1fr}.activity-filter{flex-wrap:wrap}.activity-filter .grow{flex-basis:100%}.doc-actions-compact{grid-template-columns:1fr 1fr!important}}

/* V1.15 compact document cards + analytics */
.doc-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))!important;gap:16px!important;align-items:stretch}
.compact-doc-card{min-width:0!important;overflow:hidden!important;padding:18px!important;border-radius:18px!important}
.compact-doc-card .doc-top{display:grid!important;grid-template-columns:58px minmax(0,1fr) auto!important;gap:14px!important;align-items:start!important}
.compact-doc-card .file-icon{width:58px!important;height:58px!important;border-radius:14px!important;flex:0 0 58px!important;font-size:12px!important}
.compact-doc-card .doc-title-wrap{min-width:0!important;overflow:hidden!important}
.compact-doc-card .doc-title-wrap .type{display:block!important;font-size:10px!important;font-weight:800!important;color:var(--green)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.compact-doc-card .doc-title-wrap h3{font-size:17px!important;line-height:1.28!important;margin:6px 0 5px!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;overflow-wrap:anywhere!important;word-break:break-word!important;min-height:44px!important}
.compact-doc-card .doc-title-wrap small{display:block!important;font-size:10px!important;color:var(--muted)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.compact-doc-card .badge{white-space:nowrap!important;align-self:start!important}
.compact-doc-card .doc-meta-line{display:flex!important;gap:8px!important;align-items:center!important;min-width:0!important;margin:16px 0 10px!important;font-size:10px!important;color:#66756f!important;border-top:1px solid var(--line)!important;padding-top:13px!important}
.compact-doc-card .doc-meta-line span{min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.compact-doc-card .doc-meta-line span:nth-child(2){flex:0 0 auto!important}
.compact-doc-card .doc-meta-foot{display:flex!important;flex-wrap:wrap!important;gap:7px!important;margin-bottom:14px!important}
.compact-doc-card .doc-meta-foot span{font-size:9px!important;background:#f2f6f4!important;border-radius:999px!important;padding:6px 9px!important;max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.compact-doc-card .doc-actions-compact{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
.compact-doc-card .doc-actions-compact button{min-width:0!important;width:100%!important;padding:0 8px!important;font-size:10px!important;white-space:nowrap!important}

.analytics-range{display:flex;align-items:end;gap:9px;flex-wrap:wrap}.analytics-range label{font-size:9px;color:var(--muted);font-weight:700}.analytics-range input{display:block;margin-top:5px;height:36px;border:1px solid var(--line);border-radius:9px;padding:0 9px;background:#fff;font-size:10px;color:var(--ink)}
.analytics-range .btn{height:36px;padding:0 12px}
.analytics-kpis-v115{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:14px}.analytics-kpi-v115{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px;min-width:0}.analytics-kpi-v115 small{display:block;font-size:9px;color:var(--muted)}.analytics-kpi-v115 b{display:block;font-size:22px;margin:5px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.analytics-kpi-v115 span{font-size:8px;color:#8a9893}.analytics-kpi-v115 .title-value{font-size:13px;line-height:1.3;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.analytics-dashboard-grid-v115{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px}.analytics-box-v115{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px;min-width:0}.analytics-box-v115 h4{font-size:11px;margin:0 0 12px}.daily-bars{display:flex;align-items:end;gap:7px;height:160px;padding-top:12px;overflow-x:auto}.daily-bar-col{min-width:34px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}.daily-bar{width:22px;min-height:4px;background:linear-gradient(180deg,#0e775b,#0f4d3e);border-radius:6px 6px 2px 2px;transition:.2s}.daily-bar-col b{font-size:8px;margin-top:5px}.daily-bar-col small{font-size:7px;color:var(--muted);margin-top:2px;white-space:nowrap}.mini-rank{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #edf1ef}.mini-rank:last-child{border-bottom:0}.mini-rank>span:first-child{width:22px;height:22px;border-radius:7px;background:#f0f5f3;color:var(--green);font-size:8px;font-weight:900;display:flex;align-items:center;justify-content:center}.mini-rank b{display:block;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-rank small{display:block;font-size:7px;color:var(--muted);margin-top:2px}.mini-rank strong{font-size:10px}.download-type-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:8px 0;border-bottom:1px solid #edf1ef}.download-type-row:last-child{border-bottom:0}.download-type-row b{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.download-type-row span{font-size:9px;font-weight:900;color:var(--green)}
@media(max-width:1200px){.analytics-kpis-v115{grid-template-columns:repeat(3,1fr)}.analytics-dashboard-grid-v115{grid-template-columns:1fr 1fr}.analytics-dashboard-grid-v115 .analytics-box-v115:first-child{grid-column:1/-1}}
@media(max-width:760px){.doc-grid{grid-template-columns:1fr!important}.compact-doc-card .doc-actions-compact{grid-template-columns:1fr 1fr!important}.analytics-kpis-v115{grid-template-columns:1fr 1fr}.analytics-dashboard-grid-v115{grid-template-columns:1fr}.analytics-dashboard-grid-v115 .analytics-box-v115:first-child{grid-column:auto}}


/* V1.16 infographic diagrams + explorer sync */
#docResults.is-refreshing{opacity:.45;pointer-events:none;transition:opacity .18s ease}.drive-doc-card{min-width:0}.drive-doc-copy{min-width:0}.drive-doc-copy b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3;min-height:2.6em}.drive-doc-copy small,.drive-doc-copy span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%}
.analytics-kpis-v116{display:grid;grid-template-columns:repeat(5,minmax(145px,1fr));gap:12px;margin:12px 0 16px}.analytics-kpi-v116{border:1px solid #dfe8e3;border-radius:18px;padding:16px;background:#fff;min-width:0}.analytics-kpi-v116 small{display:block;color:#7b8983;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em}.analytics-kpi-v116 b{display:block;font-size:28px;color:#173c32;margin:6px 0 2px}.analytics-kpi-v116 span{color:#819089;font-size:12px}.diagram-grid-v116{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.diagram-card-v116{background:#fff;border:1px solid #dfe8e3;border-radius:20px;padding:18px;min-width:0;overflow:hidden}.diagram-card-v116.wide{grid-column:1/-1}.diagram-head h4{margin:0;color:#173c32;font-size:15px}.diagram-head p{margin:3px 0 14px;color:#87958f;font-size:12px}.bar-chart-v116{height:205px;display:flex;align-items:flex-end;gap:9px;border-bottom:1px solid #e8eeeb;padding:8px 4px 0;overflow-x:auto}.bar-item-v116{min-width:42px;text-align:center;display:flex;flex-direction:column;justify-content:flex-end;height:100%}.bar-item-v116>b{font-size:11px;color:#34584f;margin-bottom:4px}.bar-item-v116>div{height:152px;display:flex;align-items:flex-end;justify-content:center}.bar-item-v116>div span{display:block;width:22px;background:linear-gradient(180deg,#10a37f,#0f5d49);border-radius:7px 7px 2px 2px;box-shadow:0 5px 14px rgba(15,93,73,.16);animation:barGrow .45s ease both;transform-origin:bottom}.bar-item-v116 small{font-size:10px;color:#7d8b85;margin:6px 0 4px;white-space:nowrap}@keyframes barGrow{from{transform:scaleY(.05);opacity:.3}to{transform:scaleY(1);opacity:1}}.donut-wrap-v116{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center}.donut-v116{width:145px;height:145px;border-radius:50%;display:grid;place-items:center;position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.03);animation:donutIn .5s ease}.donut-v116:after{content:"";position:absolute;width:88px;height:88px;background:#fff;border-radius:50%;box-shadow:0 0 0 1px #eef2f0}.donut-v116>div{z-index:1;text-align:center}.donut-v116 b{display:block;font-size:23px;color:#173c32}.donut-v116 small{color:#819089;font-size:10px}@keyframes donutIn{from{transform:scale(.82) rotate(-20deg);opacity:.2}to{transform:none;opacity:1}}.diagram-legend{min-width:0}.diagram-legend-row{display:grid;grid-template-columns:10px 1fr auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid #f0f3f2;font-size:12px}.diagram-legend-row i{width:9px;height:9px;border-radius:3px}.diagram-legend-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#52665f}.diagram-legend-row b{color:#173c32}.diagram-empty{color:#89968f;font-size:12px}@media(max-width:1100px){.analytics-kpis-v116{grid-template-columns:repeat(3,1fr)}.donut-wrap-v116{grid-template-columns:120px 1fr}.donut-v116{width:115px;height:115px}.donut-v116:after{width:70px;height:70px}}@media(max-width:760px){.analytics-kpis-v116,.diagram-grid-v116{grid-template-columns:1fr}.diagram-card-v116.wide{grid-column:auto}.donut-wrap-v116{grid-template-columns:1fr}.donut-v116{margin:auto}}
\n/* V1.17 live-folder + richer detail + download history */\n.preview-activity{padding:12px 2px 20px}.preview-activity-row{display:flex;gap:10px;align-items:flex-start;padding:11px 2px;border-bottom:1px solid var(--line,#e5ece8)}.preview-activity-row b{display:block;font-size:13px}.preview-activity-row small{display:block;margin-top:3px;color:#7b8a84;font-size:11px}.activity-dot{width:9px;height:9px;border-radius:50%;margin-top:5px;background:#94a3b8}.activity-dot.download{background:#0b7a5a}.activity-dot.open{background:#3b82f6}.activity-dot.detail{background:#8b5cf6}.preview-loading,.preview-empty-small{padding:24px 4px;text-align:center;color:#7b8a84;font-size:12px}\n.recent-downloads-box{margin-top:16px}.recent-download-table{overflow:hidden;border:1px solid #e4ebe7;border-radius:14px}.recent-download-head,.recent-download-row{display:grid;grid-template-columns:150px minmax(180px,.8fr) minmax(260px,1.4fr) minmax(180px,.9fr);gap:16px;align-items:center;padding:11px 14px}.recent-download-head{background:#f5f8f6;color:#66766f;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.recent-download-row{border-top:1px solid #edf1ef;font-size:12px}.recent-download-row>span{min-width:0}.recent-download-row b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#16382f}.recent-download-row small{display:block;margin-top:3px;color:#7b8a84;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:980px){.recent-download-head{display:none}.recent-download-row{grid-template-columns:1fr 1fr}.recent-download-row span:nth-child(3),.recent-download-row span:nth-child(4){grid-column:1/-1}}\n\n/* V1.18 live count + detail drawer polish */\n.drive-folder-card{cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}\n.drive-folder-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,77,62,.08);border-color:#c9ddd5}\n.drive-doc-card{cursor:pointer;position:relative;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}\n.drive-doc-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(15,77,62,.09);border-color:#bcd8cd}\n.drive-doc-card.selected{border-color:#0f6f59;box-shadow:0 0 0 2px rgba(15,111,89,.09),0 12px 30px rgba(15,77,62,.08)}\n.drive-doc-copy{min-width:0}\n.drive-doc-copy>b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35;word-break:break-word}\n.drive-doc-copy small,.drive-doc-copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n#filePreviewPanel{position:fixed;right:18px;top:82px;bottom:18px;width:min(360px,calc(100vw - 36px));z-index:80;transform:translateX(calc(100% + 28px));opacity:0;pointer-events:none;transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .2s ease;box-shadow:0 24px 60px rgba(22,55,45,.16)}\n#filePreviewPanel.open{transform:translateX(0);opacity:1;pointer-events:auto}\n.preview-meta p{word-break:break-word}\n@media(max-width:900px){#filePreviewPanel{left:12px;right:12px;top:auto;bottom:12px;width:auto;max-height:72vh}}\n
/* =========================================================
   V1.19 — ATTENDANCE FORMAT ALIGNMENT
   Match TOMAFOOD Attendance visual scale and spacing.
   ========================================================= */
:root{
  --tf-green:#0f6b50;
  --tf-text:#14251e;
  --tf-muted:#7b8781;
  --tf-line:#e1e8e4;
  --tf-bg:#f7faf8;
  --tf-shadow:0 10px 28px rgba(18,55,43,.055);
}
body{background:var(--tf-bg)!important;color:var(--tf-text)!important;font-size:14px!important;line-height:1.5!important}
.app-shell{grid-template-columns:248px minmax(0,1fr)!important}
.sidebar{background:#fff!important;border-right:1px solid var(--tf-line)!important;padding:22px 16px!important}
.side-brand{padding:4px 6px 20px!important;border-bottom:1px solid #eef2ef!important;margin-bottom:16px!important}
.side-brand img{width:166px!important;max-height:56px!important;object-fit:contain!important;object-position:left center!important}
.side-brand small{margin:8px 0 0 30px!important;font-size:10px!important;letter-spacing:.13em!important;color:#7f8f88!important}
.side-nav{gap:4px!important}.nav{min-height:50px!important;height:auto!important;border-radius:12px!important;padding:9px 12px!important;font-size:13px!important;font-weight:700!important;gap:10px!important;color:#425049!important;grid-template-columns:30px 1fr 16px!important}
.nav:hover{background:#f4f8f6!important;color:var(--tf-green)!important}.nav.active{background:var(--tf-green)!important;color:#fff!important;box-shadow:0 8px 18px rgba(15,107,80,.16)!important}.nav .ico{width:20px!important;height:20px!important}.nav .chev{font-size:18px!important}
.doc-type-side{margin-top:18px!important;padding-top:16px!important;border-top:1px solid #eef2ef!important}.doc-type-side>small{font-size:10px!important;letter-spacing:.1em!important;font-weight:900!important}.doc-type-side button{min-height:34px!important;font-size:11px!important}
.attendance-link{min-height:42px!important;border-radius:10px!important;font-size:12px!important;padding:0 12px!important}.user-side{grid-template-columns:38px 1fr 16px!important;padding:10px 4px!important}.avatar{width:36px!important;height:36px!important}.user-side b{font-size:12px!important}.user-side small{font-size:10px!important}
.main{padding:0!important;min-width:0!important}.topbar{height:86px!important;min-height:86px!important;padding:0 30px!important;border-bottom:1px solid var(--tf-line)!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(12px)!important;gap:16px!important;position:sticky!important;top:0!important;z-index:35!important}
.top-title small{font-size:11px!important;color:var(--tf-muted)!important}.top-title h1{font-size:22px!important;line-height:1.1!important;letter-spacing:-.02em!important;margin:4px 0 0!important}.top-actions{gap:12px!important}.global-search{height:46px!important;width:min(500px,38vw)!important;border-radius:13px!important;background:#fafcfa!important;padding:0 14px!important}.global-search input{font-size:13px!important}.icon-btn{width:44px!important;height:44px!important;border-radius:11px!important}.user-chip{height:52px!important;min-width:190px!important;border-radius:12px!important;padding:7px 12px!important;grid-template-columns:36px 1fr 16px!important}.user-chip b{font-size:12px!important}.user-chip small{font-size:10px!important}
.view{padding:28px 32px 54px!important;max-width:1740px!important;margin:0 auto!important}.welcome-row,.page-head{margin:0 0 22px!important;gap:20px!important}.welcome-row h2,.page-head h2{font-size:30px!important;line-height:1.15!important;letter-spacing:-.035em!important;margin:5px 0 7px!important}.welcome-row p,.page-head p{font-size:13px!important;color:var(--tf-muted)!important;max-width:820px!important}.eyebrow{font-size:10px!important;letter-spacing:.11em!important;font-weight:900!important;color:var(--tf-green)!important}.btn{min-height:42px!important;height:42px!important;border-radius:10px!important;font-size:12px!important;padding:0 16px!important}
.metric-grid{gap:16px!important;margin-bottom:18px!important}.metric-card{min-height:138px!important;padding:20px!important;border-radius:18px!important;border:1px solid var(--tf-line)!important;box-shadow:var(--tf-shadow)!important;grid-template-columns:54px 1fr!important;gap:15px!important}.metric-icon{width:54px!important;height:54px!important;border-radius:15px!important}.metric-card small{font-size:11px!important;font-weight:700!important}.metric-card b{font-size:32px!important;letter-spacing:-.035em!important}.metric-card em{font-size:11px!important}
.panel{border:1px solid var(--tf-line)!important;border-radius:18px!important;box-shadow:var(--tf-shadow)!important}.dashboard-grid,.bottom-grid{gap:16px!important}.dashboard-grid .panel,.bottom-grid .panel{padding:20px!important}.panel-head h3,.section-subhead h3{font-size:15px!important}.panel-head p,.section-subhead p{font-size:11px!important}.text-btn{font-size:11px!important}
.home-library{padding:18px!important}.library-category-grid.compact{gap:12px!important}.library-category-card{min-height:86px!important;border-radius:14px!important;padding:14px!important}.library-category-card b{font-size:12px!important}.library-category-card small{font-size:10px!important;line-height:1.35!important}
/* Explorer spacing follows Attendance content proportions */
.explorer-main-head{gap:16px!important}.explorer-title h2{font-size:30px!important}.explorer-title p{font-size:12px!important}.explorer-stats{gap:14px!important}.explorer-stat{border-radius:16px!important;min-height:92px!important}.explorer-toolbar{gap:10px!important}.search-wide{height:46px!important;border-radius:11px!important}.search-wide input{font-size:12px!important}.folder-grid{gap:14px!important}.drive-folder-card{min-height:110px!important;border-radius:16px!important;padding:18px!important}.folder-info b{font-size:13px!important}.folder-info small{font-size:10px!important}.drive-doc-grid{gap:16px!important}.drive-doc-card{border-radius:18px!important;padding:20px!important}.drive-doc-copy>b{font-size:18px!important}.drive-doc-copy small,.drive-doc-copy span{font-size:11px!important}.drive-doc-card .doc-actions-compact button,.drive-doc-card .drive-doc-actions button{min-height:42px!important;font-size:11px!important}
@media(max-width:1200px){.app-shell{grid-template-columns:220px minmax(0,1fr)!important}.view{padding:24px!important}.topbar{padding:0 20px!important}.global-search{width:min(420px,38vw)!important}}
@media(max-width:900px){.app-shell{grid-template-columns:1fr!important}.sidebar{display:none!important}.view{padding:18px!important}.topbar{height:72px!important;min-height:72px!important;padding:0 18px!important}.global-search{display:none!important}.top-title h1{font-size:18px!important}.user-chip{min-width:150px!important}.welcome-row h2,.page-head h2{font-size:26px!important}.metric-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:560px){.metric-grid{grid-template-columns:1fr!important}.user-chip{display:none!important}.topbar{justify-content:space-between!important}.view{padding:16px!important}.welcome-row,.page-head{align-items:flex-start!important;flex-direction:column!important}}

/* =========================================================
   V1.20 — EXACT ATTENDANCE SHELL ALIGNMENT
   Use the same visual scale as TOMAFOOD Attendance V8.80.
   ========================================================= */
.app-shell{grid-template-columns:218px minmax(0,1fr)!important}
.sidebar{height:100vh!important;position:sticky!important;top:0!important;background:#fff!important;border-right:1px solid #E2E8E4!important;padding:20px 14px 14px!important;display:flex!important;flex-direction:column!important;z-index:40!important;overflow:hidden!important}
.side-brand{padding:3px 8px 17px!important;border-bottom:1px solid #EFF2F0!important;margin:0!important}
.side-brand img{width:155px!important;max-height:52px!important;object-fit:contain!important;object-position:left!important;display:block!important}
.side-brand small{display:block!important;margin:5px 0 0 31px!important;font-size:7px!important;letter-spacing:.18em!important;color:#7F8A84!important;font-weight:800!important}
.side-nav{display:grid!important;gap:4px!important;margin-top:14px!important;visibility:visible!important;opacity:1!important;background:transparent!important;border:0!important;padding:0!important;min-height:0!important}
.side-nav .nav{display:grid!important;visibility:visible!important;opacity:1!important;width:100%!important;height:42px!important;min-height:42px!important;border:0!important;background:transparent!important;border-radius:9px!important;padding:0 9px!important;grid-template-columns:28px 1fr auto!important;align-items:center!important;gap:7px!important;text-align:left!important;color:#3F4C45!important;font-size:10px!important;font-weight:600!important;box-shadow:none!important}
.side-nav .nav:hover{background:#F5F8F6!important;color:#345347!important}
.side-nav .nav.active{background:linear-gradient(90deg,#0C674B,#075B43)!important;color:#fff!important;box-shadow:0 7px 17px rgba(9,96,70,.13)!important}
.side-nav .nav .ico{width:27px!important;height:27px!important;border-radius:7px!important;display:grid!important;place-items:center!important}
.side-nav .nav .ico svg{width:17px!important;height:17px!important}
.side-nav .nav .chev{font-size:14px!important;width:12px!important;color:inherit!important}
.doc-type-side{margin-top:16px!important;padding-top:12px!important;border-top:1px solid #EFF2F0!important;min-height:0!important;overflow:auto!important;max-height:34vh!important;scrollbar-width:thin!important}
.doc-type-side>small{font-size:7px!important;letter-spacing:.13em!important;font-weight:800!important;color:#82908A!important;padding:0 8px!important}
.doc-type-side button{min-height:32px!important;height:32px!important;font-size:8px!important;border-radius:7px!important;padding:0 8px!important}
.side-bottom{margin-top:auto!important;display:flex!important;flex-direction:column!important;gap:8px!important;background:#fff!important;padding-top:8px!important}
.attendance-link{height:40px!important;min-height:40px!important;border:0!important;background:#F1F6F4!important;border-radius:9px!important;padding:0 9px!important;font-size:9px!important;font-weight:700!important;justify-content:flex-start!important}
.user-side{margin-top:4px!important;border:1px solid #E2E8E4!important;border-radius:11px!important;padding:9px!important;display:grid!important;grid-template-columns:32px 1fr auto!important;gap:8px!important;align-items:center!important}
.user-side .avatar{width:32px!important;height:32px!important;font-size:11px!important}.user-side b{font-size:8px!important}.user-side small{font-size:6.5px!important}.side-copyright{font-size:6px!important;color:#9BA39F!important;padding:4px 4px 0!important}.side-copyright span{color:#B0B6B3!important}
.main{min-width:0!important;padding:0!important}
.topbar.attendance-topbar{height:76px!important;min-height:76px!important;display:grid!important;grid-template-columns:34px 210px minmax(320px,1fr) 190px 44px 176px!important;gap:12px!important;align-items:center!important;padding:0 22px!important;border-bottom:1px solid #E3E9E6!important;background:#fff!important;box-shadow:0 2px 12px rgba(22,56,43,.025)!important;position:sticky!important;top:0!important;z-index:35!important}
.menu-btn{width:34px!important;height:34px!important;border:0!important;border-radius:9px!important;background:transparent!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:4px!important;padding:0!important}.menu-btn:hover{background:#F5F8F6!important}.menu-btn span{display:block!important;width:18px!important;height:1.7px!important;background:#263C33!important;border-radius:99px!important}
.hello{min-width:0!important;overflow:hidden!important}.hello h1{font-size:16px!important;line-height:1.15!important;margin:0!important;font-weight:800!important;letter-spacing:-.025em!important;color:#14221B!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.hello p{font-size:10px!important;line-height:1.2!important;margin:5px 0 0!important;color:#7B8781!important;font-weight:500!important;white-space:nowrap!important}
.searchbox{height:42px!important;border-radius:11px!important;padding:0 10px 0 12px!important;gap:9px!important;background:#FBFCFB!important;border:1px solid #DEE6E2!important;display:flex!important;align-items:center!important;min-width:0!important}.searchbox:focus-within{border-color:#A9C7BA!important;background:#fff!important;box-shadow:0 0 0 3px rgba(15,77,62,.05)!important}.searchbox .ico{width:17px!important;height:17px!important;color:#64756D!important;flex:0 0 auto!important}.searchbox input{border:0!important;outline:0!important;min-width:0!important;flex:1!important;font-size:11px!important;color:#26352E!important;background:transparent!important}.searchbox input::placeholder{color:#909B96!important}.searchbox kbd{font:inherit!important;font-size:8px!important;padding:5px 7px!important;border:1px solid #E2E7E4!important;border-radius:7px!important;color:#7D8882!important;background:#fff!important;white-space:nowrap!important}
.datebox{min-width:0!important;height:48px!important;border-radius:11px!important;padding:6px 10px!important;gap:9px!important;background:#fff!important;border:1px solid #E0E7E3!important;display:flex!important;align-items:center!important}.date-icon{width:32px!important;height:32px!important;border-radius:9px!important;background:#F1F6F3!important;display:grid!important;place-items:center!important;flex:0 0 auto!important}.date-icon svg{width:17px!important;height:17px!important;stroke:#30483E!important;stroke-width:1.7!important;fill:none!important}.datebox b{font-size:10px!important;line-height:1.2!important;color:#17251E!important;font-weight:800!important;display:block!important}.datebox small{font-size:8px!important;line-height:1!important;margin-top:3px!important;color:#7C8982!important;display:block!important}
.notification-wrap{display:flex!important;justify-content:center!important;align-items:center!important}.bell{position:relative!important;width:42px!important;height:42px!important;border-radius:11px!important;background:#fff!important;border:1px solid #E0E7E3!important;display:grid!important;place-items:center!important}.bell:hover{background:#F8FAF9!important}.bell .ico{width:19px!important;height:19px!important;color:#263A31!important}.bell i{position:absolute!important;width:18px!important;height:18px!important;right:-4px!important;top:-7px!important;border-radius:50%!important;background:#F21F24!important;color:#fff!important;font-style:normal!important;font-size:8px!important;font-weight:800!important;display:grid!important;place-items:center!important}
.top-profile{min-width:0!important;height:48px!important;box-sizing:border-box!important;display:grid!important;grid-template-columns:34px 1fr auto!important;gap:8px!important;align-items:center!important;padding:6px 9px!important;border:1px solid #E0E7E3!important;border-radius:11px!important;background:#fff!important}.top-profile .avatar{width:34px!important;height:34px!important;font-size:11px!important}.top-profile b{font-size:10px!important;line-height:1.1!important;white-space:nowrap!important}.top-profile small{font-size:8px!important;line-height:1.15!important;margin-top:3px!important;white-space:nowrap!important;color:#7B8781!important}.top-profile>span{font-size:11px!important;color:#4D5B54!important}
.view{padding:18px 24px 42px!important;max-width:none!important;margin:0!important}
.welcome-row,.page-head{margin:0 0 18px!important}.welcome-row h2,.page-head h2{font-size:24px!important;line-height:1.15!important;margin:4px 0 5px!important}.welcome-row p,.page-head p{font-size:10px!important}.eyebrow{font-size:8px!important}.btn{height:38px!important;min-height:38px!important;font-size:9px!important;border-radius:8px!important;padding:0 13px!important}
.metric-grid{gap:10px!important;margin-bottom:14px!important}.metric-card{min-height:112px!important;padding:14px!important;border-radius:13px!important;grid-template-columns:46px 1fr!important;gap:10px!important}.metric-icon{width:46px!important;height:46px!important;border-radius:12px!important}.metric-card small{font-size:8px!important}.metric-card b{font-size:24px!important}.metric-card em{font-size:7px!important}
.panel{border-radius:13px!important}.dashboard-grid,.bottom-grid{gap:10px!important}.dashboard-grid .panel,.bottom-grid .panel{padding:14px!important}.panel-head h3,.section-subhead h3{font-size:11px!important}.panel-head p,.section-subhead p{font-size:8px!important}.text-btn{font-size:8px!important}
.library-category-grid.compact{gap:8px!important}.library-category-card{min-height:68px!important;border-radius:10px!important;padding:10px!important}.library-category-card b{font-size:9px!important}.library-category-card small{font-size:7px!important}
@media(max-width:1320px){.topbar.attendance-topbar{grid-template-columns:34px 180px minmax(260px,1fr) 165px 42px 150px!important;padding:0 16px!important;gap:10px!important}.hello h1{font-size:15px!important}.hello p{font-size:9px!important}.datebox b{font-size:9px!important}.top-profile small{font-size:7.5px!important}}
@media(max-width:1120px){.topbar.attendance-topbar{grid-template-columns:34px 190px minmax(260px,1fr) 42px!important}.datebox,.top-profile{display:none!important}}
@media(max-width:900px){.app-shell{grid-template-columns:1fr!important}.sidebar{display:none!important}.topbar.attendance-topbar{height:68px!important;min-height:68px!important;grid-template-columns:34px 1fr 42px!important;padding:0 14px!important}.searchbox,.datebox,.top-profile{display:none!important}.view{padding:14px!important}}

/* =========================================================
   V1.21 — ATTENDANCE SHELL ALIGNMENT + SIDEBAR OVERLAP FIX
   ========================================================= */
:root{--att-sidebar:218px;--att-topbar:76px}
html,body{overflow-x:hidden}
.app-shell{grid-template-columns:var(--att-sidebar) minmax(0,1fr)!important;min-height:100vh!important}
.sidebar{height:100vh!important;position:sticky!important;top:0!important;padding:20px 14px 14px!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;background:#fff!important;border-right:1px solid #E2E8E4!important}
.side-brand{padding:3px 8px 17px!important;border-bottom:1px solid #EFF2F0!important;margin:0!important;flex:0 0 auto!important}
.side-brand img{width:155px!important;height:auto!important;max-height:52px!important;object-fit:contain!important;object-position:left center!important}
.side-brand small{display:block!important;margin:5px 0 0!important;font-size:8px!important;line-height:1.2!important;letter-spacing:.18em!important;color:#7F8A84!important;font-weight:800!important}
.side-nav{display:grid!important;gap:4px!important;margin-top:14px!important;flex:0 0 auto!important}
.side-nav .nav{height:42px!important;min-height:42px!important;border-radius:9px!important;padding:0 9px!important;grid-template-columns:28px 1fr auto!important;gap:7px!important;font-size:9px!important;font-weight:600!important;color:#3F4C45!important}
.side-nav .nav .ico{width:27px!important;height:27px!important;border-radius:7px!important}.side-nav .nav .ico svg{width:17px!important;height:17px!important}
.side-nav .nav.active{background:linear-gradient(90deg,#0C674B,#075B43)!important;box-shadow:0 7px 17px rgba(9,96,70,.13)!important}

/* document type list occupies only remaining sidebar space — no overlap */
.doc-type-side{margin-top:14px!important;padding:12px 0 0!important;border-top:1px solid #EFF2F0!important;flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;position:relative!important;z-index:1!important;scrollbar-width:thin!important}
.doc-type-side>small{display:block!important;padding:0 8px 7px!important;font-size:7px!important;line-height:1!important;letter-spacing:.13em!important;font-weight:800!important;color:#82908A!important}
#docTypeSide{display:grid!important;gap:1px!important}
.doc-type-side button{display:grid!important;grid-template-columns:22px 1fr!important;align-items:center!important;gap:8px!important;width:100%!important;height:30px!important;min-height:30px!important;padding:0 8px!important;border-radius:7px!important;border:0!important;background:transparent!important;text-align:left!important;font-size:8px!important;line-height:1.1!important;color:#55645D!important;white-space:nowrap!important;overflow:hidden!important}
.doc-type-side button:hover{background:#F5F8F6!important}.doc-type-side button span:last-child{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.doc-type-side button .drive-folder-icon,.doc-type-side button .drive-folder-icon svg{width:22px!important;height:17px!important;flex-basis:22px!important}
.side-bottom{flex:0 0 auto!important;margin-top:10px!important;gap:8px!important;position:relative!important;z-index:3!important;background:#fff!important;padding-top:4px!important}
.attendance-link{height:38px!important;border-radius:9px!important;padding:0 9px!important;font-size:8px!important}
.user-side{border:1px solid #E2E8E4!important;border-radius:11px!important;padding:9px!important;grid-template-columns:32px 1fr auto!important;gap:8px!important;background:#fff!important}
.user-side .avatar{width:32px!important;height:32px!important;font-size:11px!important}.user-side b{font-size:8px!important}.user-side small{font-size:6.5px!important}.side-copyright{font-size:6px!important;padding:4px 4px 0!important}

.main{padding:0!important;min-width:0!important;background:#F7FAF8!important}
.topbar.attendance-topbar{height:var(--att-topbar)!important;min-height:var(--att-topbar)!important;grid-template-columns:34px 232px minmax(300px,1fr) 190px 44px 205px!important;gap:12px!important;padding:0 22px!important;border-bottom:1px solid #E3E9E6!important;background:#fff!important;box-shadow:0 2px 12px rgba(22,56,43,.025)!important;position:sticky!important;top:0!important;z-index:35!important}
.hello{min-width:0!important;overflow:hidden!important}.hello h1{font-size:14px!important;line-height:1.15!important;margin:0!important;font-weight:800!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.hello p{font-size:9px!important;margin:5px 0 0!important;white-space:nowrap!important}
.searchbox{height:42px!important;border-radius:11px!important}.datebox{height:48px!important}.top-profile{height:48px!important;min-width:0!important;grid-template-columns:34px minmax(0,1fr) auto!important;gap:8px!important;padding:6px 9px!important}.top-profile>div:nth-child(2){min-width:0!important}.top-profile b{display:block!important;font-size:9px!important;line-height:1.1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.top-profile small{display:block!important;font-size:7px!important;line-height:1.15!important;margin-top:3px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.top-profile .avatar{width:34px!important;height:34px!important}
.view{padding:18px 24px 35px!important;max-width:none!important;margin:0!important}
.welcome-row,.page-head{margin-top:0!important}.welcome-row h2,.page-head h2{font-size:24px!important}.welcome-row p,.page-head p{font-size:11px!important}
.metric-grid{gap:12px!important}.metric-card{border-radius:14px!important;padding:15px!important;min-height:105px!important}.metric-card b{font-size:22px!important}
.dashboard-grid,.bottom-grid{gap:12px!important}.panel{border-radius:14px!important}

@media(max-width:1380px){.topbar.attendance-topbar{grid-template-columns:34px 200px minmax(250px,1fr) 170px 42px 180px!important;padding:0 16px!important;gap:10px!important}.hello h1{font-size:13px!important}.top-profile b{font-size:8.5px!important}.top-profile small{font-size:6.8px!important}}
@media(max-width:1120px){.topbar.attendance-topbar{grid-template-columns:34px 200px minmax(260px,1fr) 42px!important}.datebox,.top-profile{display:none!important}}
@media(max-width:900px){.app-shell{grid-template-columns:1fr!important}.sidebar{display:none!important}.topbar.attendance-topbar{height:68px!important;min-height:68px!important;grid-template-columns:34px 1fr 42px!important;padding:0 14px!important}.searchbox,.datebox,.top-profile{display:none!important}.view{padding:14px!important}}

/* =========================================================
   V1.22 — PIXEL SHELL MATCH TO ATTENDANCE CLOUD
   Match logo/sidebar/topbar/typography so tab switching feels seamless.
   ========================================================= */
:root{--att-shell-sidebar:248px;--att-shell-topbar:76px}
html,body{
  font-family:"Manrope",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:16px!important;
  -webkit-font-smoothing:antialiased!important;
  text-rendering:optimizeLegibility!important;
}
body{font-size:14px!important;line-height:1.5!important}
.app-shell{grid-template-columns:var(--att-shell-sidebar) minmax(0,1fr)!important}
.sidebar{
  height:100vh!important;position:sticky!important;top:0!important;
  padding:22px 16px 16px!important;background:#fff!important;
  border-right:1px solid #E2E8E4!important;overflow:hidden!important;
  display:flex!important;flex-direction:column!important;
}
.side-brand{
  padding:4px 6px 20px!important;margin:0 0 16px!important;
  border-bottom:1px solid #EEF2EF!important;flex:0 0 auto!important;
}
.side-brand img{
  width:166px!important;height:auto!important;max-height:56px!important;
  object-fit:contain!important;object-position:left center!important;display:block!important;
}
.side-brand small{
  display:block!important;margin:7px 0 0 30px!important;
  font-size:10px!important;line-height:1.2!important;letter-spacing:.16em!important;
  color:#829089!important;font-weight:800!important;
}
.side-nav{display:grid!important;gap:5px!important;margin:0!important;flex:0 0 auto!important}
.side-nav .nav{
  min-height:50px!important;height:50px!important;border-radius:12px!important;
  padding:9px 12px!important;grid-template-columns:30px minmax(0,1fr) auto!important;
  gap:10px!important;font-size:13px!important;font-weight:700!important;
  color:#425049!important;
}
.side-nav .nav .ico{width:30px!important;height:30px!important;border-radius:8px!important}
.side-nav .nav .ico svg{width:18px!important;height:18px!important}
.side-nav .nav.active{background:#0F6B50!important;color:#fff!important;box-shadow:0 8px 18px rgba(15,107,80,.16)!important}
.side-nav .nav:hover{background:#F4F8F6!important;color:#0F6B50!important}
.side-nav .nav.active:hover{color:#fff!important}

/* secondary document type list stays scrollable and never overlaps footer */
.doc-type-side{
  margin-top:14px!important;padding:12px 0 0!important;border-top:1px solid #EFF2F0!important;
  flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;
  scrollbar-width:thin!important;
}
.doc-type-side>small{padding:0 8px 9px!important;font-size:9px!important;letter-spacing:.13em!important}
#docTypeSide{display:grid!important;gap:2px!important}
.doc-type-side button{
  height:36px!important;min-height:36px!important;padding:0 9px!important;
  grid-template-columns:24px minmax(0,1fr)!important;gap:9px!important;
  border-radius:8px!important;font-size:10px!important;line-height:1.1!important;
}
.doc-type-side button .drive-folder-icon,.doc-type-side button .drive-folder-icon svg{width:24px!important;height:18px!important}
.side-bottom{flex:0 0 auto!important;margin-top:10px!important;gap:10px!important;background:#fff!important;padding-top:4px!important}
.attendance-link{height:44px!important;border-radius:11px!important;padding:0 12px!important;font-size:11px!important;font-weight:800!important}
.user-side{border:1px solid #E2E8E4!important;border-radius:11px!important;padding:9px!important;grid-template-columns:32px minmax(0,1fr) auto!important;gap:8px!important;background:#fff!important}
.user-side .avatar{width:32px!important;height:32px!important;font-size:11px!important}
.user-side b{font-size:11px!important}.user-side small{font-size:9px!important}.side-copyright{font-size:7px!important;padding:5px 4px 0!important}

.main{padding:0!important;min-width:0!important;background:#F7FAF8!important}
.topbar.attendance-topbar{
  height:var(--att-shell-topbar)!important;min-height:var(--att-shell-topbar)!important;
  grid-template-columns:34px 210px minmax(320px,1fr) 190px 44px 176px!important;
  gap:12px!important;padding:0 22px!important;
  border-bottom:1px solid #E3E9E6!important;background:#fff!important;
  box-shadow:0 2px 12px rgba(22,56,43,.025)!important;
  position:sticky!important;top:0!important;z-index:35!important;
}
.menu-btn{width:34px!important;height:34px!important;border-radius:9px!important}
.hello{min-width:0!important;overflow:hidden!important}
.hello h1{
  font-size:16px!important;line-height:1.15!important;margin:0!important;
  font-weight:800!important;letter-spacing:-.025em!important;color:#14221B!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
.hello p{font-size:10px!important;line-height:1.2!important;margin:5px 0 0!important;color:#7B8781!important;font-weight:500!important;white-space:nowrap!important}
.searchbox{height:42px!important;border-radius:11px!important;padding:0 10px 0 12px!important;gap:9px!important;background:#FBFCFB!important;border:1px solid #DEE6E2!important}
.searchbox svg{width:17px!important;height:17px!important}.searchbox input{font-size:11px!important}.searchbox kbd{font-size:8px!important;padding:5px 7px!important;border-radius:7px!important}
.datebox{min-width:0!important;height:48px!important;border-radius:11px!important;padding:6px 10px!important;gap:9px!important;background:#fff!important;border:1px solid #E0E7E3!important}
.datebox .date-icon{width:32px!important;height:32px!important;border-radius:9px!important}.datebox b{font-size:10px!important;line-height:1.2!important;font-weight:800!important}.datebox small{font-size:8px!important;line-height:1!important;margin-top:3px!important}
.bell{width:42px!important;height:42px!important;border-radius:11px!important}.bell i{width:18px!important;height:18px!important;right:-4px!important;top:-7px!important;font-size:8px!important;font-weight:800!important}
.top-profile{min-width:0!important;height:48px!important;grid-template-columns:34px minmax(0,1fr) auto!important;gap:8px!important;padding:6px 9px!important;border:1px solid #E0E7E3!important;border-radius:11px!important;background:#fff!important}
.top-profile .avatar{width:34px!important;height:34px!important;font-size:11px!important}.top-profile b{font-size:10px!important;line-height:1.1!important}.top-profile small{font-size:8px!important;line-height:1.15!important;margin-top:3px!important}.top-profile>span{font-size:11px!important}

/* content typography aligned with Attendance density */
.view{padding:28px 32px 54px!important;max-width:1740px!important;margin:0 auto!important}
.welcome-row,.page-head{margin:0 0 22px!important}.welcome-row h2,.page-head h2{font-size:30px!important;line-height:1.15!important;letter-spacing:-.035em!important}.welcome-row p,.page-head p{font-size:13px!important}.eyebrow{font-size:10px!important;letter-spacing:.11em!important}
.metric-grid{gap:16px!important;margin-bottom:18px!important}.metric-card{min-height:150px!important;padding:20px!important;border-radius:18px!important}.metric-card small{font-size:11px!important}.metric-card b{font-size:32px!important}.metric-card em{font-size:11px!important}
.panel{border-radius:18px!important}.dashboard-grid,.bottom-grid{gap:16px!important}.dashboard-grid .panel,.bottom-grid .panel{padding:18px!important}

@media(max-width:1320px){
  .topbar.attendance-topbar{grid-template-columns:34px 180px minmax(260px,1fr) 165px 42px 150px!important;padding:0 16px!important;gap:10px!important}
  .hello h1{font-size:15px!important}.hello p{font-size:9px!important}.datebox b{font-size:9px!important}.top-profile small{font-size:7.5px!important}
}
@media(max-width:1120px){.topbar.attendance-topbar{grid-template-columns:34px 190px minmax(260px,1fr) 42px!important}.datebox,.top-profile{display:none!important}}
@media(max-width:900px){.app-shell{grid-template-columns:1fr!important}.sidebar{display:none!important}.topbar.attendance-topbar{height:68px!important;min-height:68px!important;grid-template-columns:34px 1fr 42px!important;padding:0 14px!important}.searchbox,.datebox,.top-profile{display:none!important}.view{padding:18px!important}}

/* =========================================================
   V1.23 — EXACT TOMAFOOD ATTENDANCE VISUAL TOKENS
   Uses the same Manrope typography, green palette, sidebar/logo,
   and topbar geometry as Attendance Cloud V8.80.
   ========================================================= */
:root{
  --green:#0B6B4F!important;
  --green-2:#0F7A5A!important;
  --green-deep:#064A38!important;
  --green-soft:#EAF5F0!important;
  --orange:#F47B2A!important;
  --orange-soft:#FFF1E8!important;
  --purple:#7450B7!important;
  --purple-soft:#F3EEFB!important;
  --blue:#3C7DB2!important;
  --blue-soft:#ECF4FA!important;
  --ink:#18231E!important;
  --muted:#7A8780!important;
  --line:#E5EAE7!important;
  --surface:#FFFFFF!important;
  --surface-2:#F8FAF9!important;
  --shadow-sm:0 6px 18px rgba(18,52,40,.045)!important;
  --shadow-md:0 14px 34px rgba(18,52,40,.075)!important;
}
html,body,button,input,select,textarea{
  font-family:"Manrope",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
html,body{
  color:var(--ink)!important;
  background:#F6F8F7!important;
  -webkit-font-smoothing:antialiased!important;
  text-rendering:optimizeLegibility!important;
}

/* Same shell width as Attendance */
.app-shell{grid-template-columns:218px minmax(0,1fr)!important;min-height:100vh!important}
.sidebar{
  width:auto!important;height:100vh!important;position:sticky!important;top:0!important;
  padding:20px 14px 14px!important;background:#fff!important;
  border-right:1px solid #E5EAE7!important;box-shadow:inset -1px 0 0 rgba(17,50,38,.02)!important;
  display:flex!important;flex-direction:column!important;overflow:hidden!important;
}
.side-brand{
  padding:2px 8px 18px!important;margin:0!important;border-bottom:1px solid #EFF2F0!important;flex:0 0 auto!important;
}
.side-brand img{
  width:156px!important;max-width:156px!important;height:auto!important;max-height:52px!important;
  object-fit:contain!important;object-position:left center!important;display:block!important;
}
.side-brand small{
  display:block!important;margin:6px 0 0!important;padding:0!important;
  font-size:5.8px!important;line-height:1.2!important;letter-spacing:.16em!important;
  color:#7F8A84!important;font-weight:800!important;text-align:left!important;
}
.side-nav{display:grid!important;gap:5px!important;margin-top:16px!important;flex:0 0 auto!important}
.side-nav .nav{
  height:44px!important;min-height:44px!important;border-radius:11px!important;padding:0 10px!important;
  display:grid!important;grid-template-columns:29px minmax(0,1fr) auto!important;align-items:center!important;gap:7px!important;
  font-size:8.4px!important;line-height:1.2!important;font-weight:650!important;letter-spacing:-.01em!important;
  color:#3F4C45!important;background:transparent!important;
}
.side-nav .nav .ico{width:29px!important;height:29px!important;border-radius:9px!important}
.side-nav .nav .ico svg{width:17px!important;height:17px!important}
.side-nav .nav.active{background:linear-gradient(135deg,#0E6F52,#0A5D46)!important;color:#fff!important;box-shadow:0 10px 22px rgba(9,96,70,.14)!important}
.side-nav .nav:hover{background:#F5F8F6!important;color:#0B6B4F!important;transform:translateX(2px)!important}
.side-nav .nav.active:hover{color:#fff!important}

/* Secondary list density aligned to Attendance subnav */
.doc-type-side{margin-top:12px!important;padding-top:10px!important;border-top:1px solid #EFF2F0!important;flex:1 1 auto!important;min-height:0!important;overflow:auto!important}
.doc-type-side>small{font-size:6.5px!important;letter-spacing:.14em!important;color:#82908A!important;font-weight:800!important;padding:0 8px 7px!important}
#docTypeSide{display:grid!important;gap:1px!important}
.doc-type-side button{height:29px!important;min-height:29px!important;padding:0 8px!important;grid-template-columns:21px minmax(0,1fr)!important;gap:7px!important;border-radius:6px!important;font-size:7.5px!important;color:#65736C!important}
.doc-type-side button .drive-folder-icon,.doc-type-side button .drive-folder-icon svg{width:21px!important;height:16px!important}
.side-bottom{flex:0 0 auto!important;margin-top:8px!important;gap:8px!important;padding-top:2px!important;background:#fff!important}
.attendance-link{height:38px!important;border-radius:9px!important;padding:0 9px!important;font-size:8px!important;font-weight:700!important}
.user-side{border:1px solid var(--line)!important;border-radius:11px!important;padding:9px!important;grid-template-columns:32px minmax(0,1fr) auto!important;gap:8px!important;background:#fff!important}
.user-side .avatar{width:32px!important;height:32px!important;font-size:11px!important}
.user-side b{font-size:8px!important;line-height:1.1!important}.user-side small{font-size:6.5px!important;line-height:1.2!important}.side-copyright{font-size:6px!important;padding:4px 4px 0!important;color:#9BA39F!important}

/* Exact Attendance V8.80 topbar */
.main{padding:0!important;min-width:0!important;background:#F6F8F7!important}
.topbar.attendance-topbar{
  height:76px!important;min-height:76px!important;
  grid-template-columns:34px 210px minmax(320px,1fr) 190px 44px 176px!important;
  gap:12px!important;padding:0 22px!important;
  border-bottom:1px solid #E3E9E6!important;background:#fff!important;
  box-shadow:0 2px 12px rgba(22,56,43,.025)!important;position:sticky!important;top:0!important;z-index:35!important;
}
.menu-btn{width:34px!important;height:34px!important;border-radius:9px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:4px!important;padding:0!important;background:transparent!important}
.menu-btn:hover{background:#F5F8F6!important}.menu-btn span{display:block!important;width:18px!important;height:1.7px!important;background:#263C33!important;border-radius:99px!important}
.hello{min-width:0!important;overflow:hidden!important}.hello h1{font-size:16px!important;line-height:1.15!important;margin:0!important;font-weight:800!important;letter-spacing:-.025em!important;color:#14221B!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.hello p{font-size:10px!important;line-height:1.2!important;margin:5px 0 0!important;color:#7B8781!important;font-weight:500!important;white-space:nowrap!important}
.searchbox{height:42px!important;border-radius:11px!important;padding:0 10px 0 12px!important;gap:9px!important;background:#FBFCFB!important;border:1px solid #DEE6E2!important;box-shadow:none!important}.searchbox:focus-within{border-color:#A9C7BA!important;background:#fff!important;box-shadow:0 0 0 3px rgba(15,77,62,.05)!important}.searchbox .ico{width:17px!important;height:17px!important;color:#64756D!important}.searchbox input{font-size:11px!important;color:#26352E!important;background:transparent!important}.searchbox input::placeholder{color:#909B96!important}.searchbox kbd{font-size:8px!important;padding:5px 7px!important;border-radius:7px!important;color:#7D8882!important;background:#fff!important}
.datebox{min-width:0!important;height:48px!important;border-radius:11px!important;padding:6px 10px!important;gap:9px!important;background:#fff!important;border:1px solid #E0E7E3!important}.datebox .date-icon{width:32px!important;height:32px!important;border-radius:9px!important;background:#F1F6F3!important;display:grid!important;place-items:center!important;flex:0 0 auto!important}.datebox .date-icon svg{width:17px!important;height:17px!important;stroke:#30483E!important;stroke-width:1.7!important;fill:none!important}.datebox b{font-size:10px!important;line-height:1.2!important;color:#17251E!important;font-weight:800!important}.datebox small{font-size:8px!important;line-height:1!important;margin-top:3px!important;color:#7C8982!important}
.notification-wrap{display:flex!important;justify-content:center!important;align-items:center!important}.bell{width:42px!important;height:42px!important;border-radius:11px!important;background:#fff!important;border:1px solid #E0E7E3!important;display:grid!important;place-items:center!important}.bell:hover{background:#F8FAF9!important}.bell .ico{width:19px!important;height:19px!important;color:#263A31!important}.bell i{width:18px!important;height:18px!important;right:-4px!important;top:-7px!important;font-size:8px!important;font-weight:800!important}
.top-profile{min-width:0!important;height:48px!important;box-sizing:border-box!important;grid-template-columns:34px minmax(0,1fr) auto!important;gap:8px!important;padding:6px 9px!important;border:1px solid #E0E7E3!important;border-radius:11px!important;background:#fff!important}.top-profile .avatar{width:34px!important;height:34px!important;font-size:11px!important}.top-profile b{font-size:10px!important;line-height:1.1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.top-profile small{font-size:8px!important;line-height:1.15!important;margin-top:3px!important;white-space:nowrap!important;color:#7B8781!important}.top-profile>span{font-size:11px!important;color:#4D5B54!important}

/* Use Attendance text colors/density in content too */
.view{color:#18231E!important}
.view h1,.view h2,.view h3,.view h4,.panel h3,.metric-card b{color:#18231E!important}
.view p,.panel p,.metric-card small,.metric-card em{color:#7A8780!important}
.btn.primary{background:#0B6B4F!important;color:#fff!important}.text-btn,.link-btn{color:#0B6B4F!important}

@media(max-width:1320px){.topbar.attendance-topbar{grid-template-columns:34px 180px minmax(260px,1fr) 165px 42px 150px!important;padding:0 16px!important;gap:10px!important}.hello h1{font-size:15px!important}.hello p{font-size:9px!important}.datebox b{font-size:9px!important}.top-profile small{font-size:7.5px!important}}
@media(max-width:1120px){.topbar.attendance-topbar{grid-template-columns:34px 190px minmax(260px,1fr) 42px!important}.datebox,.top-profile{display:none!important}}
@media(max-width:900px){.app-shell{grid-template-columns:1fr!important}.sidebar{display:none!important}.topbar.attendance-topbar{height:68px!important;min-height:68px!important;grid-template-columns:34px 1fr 42px!important;padding:0 14px!important}.searchbox,.datebox,.top-profile{display:none!important}}

/* =========================================================
   V1.24 — HARD MATCH TO ATTENDANCE V8.81 DESKTOP SHELL
   Exact desktop sidebar/logo/topbar scale + Attendance font stack.
   ========================================================= */
:root{
  --tf-green:#0f6b50;
  --tf-green-dark:#0a513d;
  --tf-green-soft:#eef7f3;
  --tf-orange:#ef641e;
  --tf-bg:#f6f8f7;
  --tf-surface:#ffffff;
  --tf-line:#dde6e1;
  --tf-text:#17251f;
  --tf-muted:#6f7d76;
  --tf-shadow:0 8px 26px rgba(17,55,41,.055);
}
html{font-size:16px!important}
html,body,button,input,select,textarea{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
body{background:var(--tf-bg)!important;color:var(--tf-text)!important;font-size:14px!important;line-height:1.5!important}

/* Never shrink the desktop shell before the Attendance breakpoint. */
@media (min-width:901px){
  .app-shell{grid-template-columns:248px minmax(0,1fr)!important}
  .sidebar{
    width:auto!important;height:100vh!important;position:sticky!important;top:0!important;
    background:#fff!important;border-right:1px solid var(--tf-line)!important;
    padding:22px 16px!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;
  }
  .side-brand{
    padding:4px 6px 20px!important;border-bottom:1px solid #eef2ef!important;
    margin:0 0 16px!important;flex:0 0 auto!important;
  }
  .side-brand img{
    width:166px!important;max-width:166px!important;height:auto!important;max-height:56px!important;
    object-fit:contain!important;object-position:left center!important;display:block!important;
  }
  .side-brand small{
    display:block!important;margin:6px 0 0!important;padding:0!important;
    font-size:8px!important;line-height:1.2!important;letter-spacing:.18em!important;
    color:#7f8a84!important;font-weight:800!important;text-align:left!important;
  }

  .side-nav{display:grid!important;gap:5px!important;margin-top:0!important;flex:0 0 auto!important}
  .side-nav .nav{
    min-height:50px!important;height:50px!important;border-radius:12px!important;padding:9px 12px!important;
    grid-template-columns:30px minmax(0,1fr) auto!important;gap:10px!important;
    font-size:13px!important;line-height:1.2!important;font-weight:700!important;color:#425049!important;
  }
  .side-nav .nav .ico{width:30px!important;height:30px!important;border-radius:8px!important}
  .side-nav .nav .ico svg{width:18px!important;height:18px!important}
  .side-nav .nav.active{background:var(--tf-green)!important;color:#fff!important;box-shadow:0 8px 18px rgba(15,107,80,.16)!important}
  .side-nav .nav:hover{transform:none!important}

  .doc-type-side{margin-top:14px!important;padding-top:12px!important;border-top:1px solid #eef2ef!important;flex:1 1 auto!important;min-height:0!important;overflow:auto!important}
  .doc-type-side>small{font-size:8px!important;letter-spacing:.13em!important;font-weight:800!important;color:#82908a!important;padding:0 8px 8px!important}
  .doc-type-side button{height:34px!important;min-height:34px!important;padding:0 8px!important;grid-template-columns:24px minmax(0,1fr)!important;gap:9px!important;border-radius:8px!important;font-size:9px!important;color:#65736c!important}
  .doc-type-side button .drive-folder-icon,.doc-type-side button .drive-folder-icon svg{width:24px!important;height:18px!important}
  .side-bottom{margin-top:10px!important;gap:10px!important;padding-top:4px!important;flex:0 0 auto!important}
  .attendance-link{height:44px!important;border-radius:11px!important;padding:0 12px!important;font-size:11px!important;font-weight:700!important}
  .user-side{border:1px solid var(--tf-line)!important;border-radius:12px!important;padding:10px!important;grid-template-columns:34px minmax(0,1fr) auto!important;gap:9px!important;background:#fff!important}
  .user-side .avatar{width:34px!important;height:34px!important;font-size:12px!important}.user-side b{font-size:10px!important}.user-side small{font-size:8px!important}.side-copyright{font-size:7px!important;padding:7px 4px 0!important}

  .main{padding:0!important;min-width:0!important;background:var(--tf-bg)!important}
  .topbar.attendance-topbar{
    height:86px!important;min-height:86px!important;
    display:grid!important;grid-template-columns:34px 210px minmax(280px,1fr) 190px 44px 176px!important;
    gap:12px!important;align-items:center!important;padding:0 30px!important;
    border-bottom:1px solid var(--tf-line)!important;background:rgba(255,255,255,.96)!important;
    backdrop-filter:blur(12px)!important;box-shadow:none!important;position:sticky!important;top:0!important;z-index:35!important;
  }
  .menu-btn{width:32px!important;height:32px!important;border-radius:8px!important}
  .menu-btn span{width:18px!important;height:1.6px!important;background:#263c33!important}
  .hello h1{font-size:15px!important;line-height:1.15!important;margin:0!important;font-weight:800!important;letter-spacing:-.02em!important;color:var(--tf-text)!important}
  .hello p{font-size:9px!important;line-height:1.2!important;margin:4px 0 0!important;color:var(--tf-muted)!important}
  .searchbox{height:46px!important;border-radius:13px!important;background:#fafcfa!important;border:1px solid var(--tf-line)!important;padding:0 11px!important;gap:9px!important}
  .searchbox input{font-size:13px!important;color:var(--tf-text)!important}.searchbox input::placeholder{color:#929d97!important}.searchbox kbd{font-size:8px!important;padding:5px 7px!important;border-radius:7px!important}
  .datebox{height:48px!important;min-width:190px!important;border-radius:11px!important;padding:6px 10px!important;gap:9px!important;border:1px solid var(--tf-line)!important}
  .datebox b{font-size:10px!important;line-height:1.2!important}.datebox small{font-size:8px!important;margin-top:3px!important}
  .bell{width:42px!important;height:42px!important;border-radius:11px!important;border:1px solid var(--tf-line)!important}.bell i{width:18px!important;height:18px!important;font-size:8px!important;right:-4px!important;top:-7px!important}
  .top-profile{height:48px!important;min-width:176px!important;grid-template-columns:34px minmax(0,1fr) auto!important;gap:8px!important;padding:6px 9px!important;border:1px solid var(--tf-line)!important;border-radius:11px!important;background:#fff!important}
  .top-profile .avatar{width:34px!important;height:34px!important;font-size:11px!important}.top-profile b{font-size:10px!important;line-height:1.1!important}.top-profile small{font-size:8px!important;line-height:1.15!important;margin-top:3px!important}

  .view{padding:28px 32px 54px!important;max-width:1740px!important;margin:0 auto!important}
}

/* preserve only the same mobile-style collapse point */
@media(max-width:900px){
  .app-shell{grid-template-columns:1fr!important}.sidebar{display:none!important}
  .topbar.attendance-topbar{height:68px!important;min-height:68px!important;grid-template-columns:34px 1fr 42px!important;padding:0 14px!important}
  .searchbox,.datebox,.top-profile{display:none!important}.view{padding:18px!important}
}

/* =========================================================
   V1.25 - EXACT SHELL MATCH TO USER-PROVIDED ATTENDANCE V8.76
   Reference: admin/styles.css from uploaded Attendance ZIP.
   ========================================================= */
:root{
  --shell-sidebar:218px;
  --shell-topbar:82px;
  --shell-line:#E3E9E6;
  --shell-bg:#F7FAF8;
  --shell-ink:#1E2D25;
  --shell-muted:#77837D;
  --shell-green:#075B43;
}
html,body{margin:0!important;min-height:100%!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;color:var(--shell-ink)!important;background:var(--shell-bg)!important;font-size:initial!important;line-height:normal!important}
.app-shell{display:grid!important;grid-template-columns:218px minmax(0,1fr)!important;min-height:100vh!important}
.sidebar{
  width:auto!important;height:100vh!important;position:sticky!important;top:0!important;
  background:#fff!important;border-right:1px solid var(--shell-line)!important;
  padding:20px 14px 14px!important;display:flex!important;flex-direction:column!important;
}
.side-brand{
  padding:3px 8px 17px!important;margin:0!important;border-bottom:1px solid #EFF2F0!important;
  display:block!important;min-height:0!important;
}
.side-brand img{
  width:155px!important;height:auto!important;max-height:52px!important;object-fit:contain!important;object-position:left center!important;display:block!important;
}
.side-brand small{
  display:block!important;margin-top:5px!important;font-size:6px!important;line-height:1.2!important;
  letter-spacing:.18em!important;color:#7F8A84!important;font-weight:800!important;text-transform:uppercase!important;
}
.side-nav{display:grid!important;gap:4px!important;margin-top:14px!important}
.side-nav .nav{
  height:42px!important;min-height:42px!important;border:0!important;background:transparent!important;border-radius:9px!important;
  padding:0 9px!important;display:grid!important;grid-template-columns:28px minmax(0,1fr) auto!important;
  align-items:center!important;gap:7px!important;text-align:left!important;color:#3F4C45!important;
  font-size:9px!important;line-height:1.2!important;font-weight:600!important;box-shadow:none!important;
}
.side-nav .nav.active{background:linear-gradient(90deg,#0C674B,#075B43)!important;color:#fff!important;box-shadow:0 7px 17px rgba(9,96,70,.13)!important}
.side-nav .nav .ico{width:27px!important;height:27px!important;border-radius:7px!important;display:grid!important;place-items:center!important}
.side-nav .nav .ico svg{width:17px!important;height:17px!important}
.doc-type-side{
  margin-top:12px!important;padding:10px 0 0!important;border-top:1px solid #EFF2F0!important;
  flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;
}
.doc-type-side>small{display:block!important;padding:0 8px 7px!important;font-size:6px!important;letter-spacing:.15em!important;color:#7F8A84!important;font-weight:800!important}
.doc-type-side button{
  min-height:30px!important;height:30px!important;padding:0 7px!important;border:0!important;background:transparent!important;border-radius:7px!important;
  display:grid!important;grid-template-columns:24px minmax(0,1fr)!important;gap:6px!important;align-items:center!important;
  font-size:7.5px!important;line-height:1.1!important;color:#66736C!important;text-align:left!important;width:100%!important;
}
.doc-type-side button .drive-folder-icon,.doc-type-side button .drive-folder-icon svg{width:22px!important;height:17px!important}
.side-bottom{flex:0 0 auto!important;margin-top:10px!important;gap:8px!important;position:relative!important;z-index:3!important;background:#fff!important;padding-top:4px!important}
.attendance-link{height:38px!important;border-radius:9px!important;padding:0 9px!important;font-size:8px!important}
.user-side{border:1px solid #E2E8E4!important;border-radius:11px!important;padding:9px!important;grid-template-columns:32px minmax(0,1fr) auto!important;gap:8px!important;background:#fff!important}
.user-side .avatar{width:32px!important;height:32px!important;font-size:11px!important}.user-side b{font-size:8px!important}.user-side small{font-size:6.5px!important}.side-copyright{font-size:6px!important;padding:4px 4px 0!important}
.main{padding:0!important;min-width:0!important;background:#F7FAF8!important}
.topbar.attendance-topbar{
  height:82px!important;min-height:82px!important;background:#fff!important;border-bottom:1px solid var(--shell-line)!important;
  display:grid!important;grid-template-columns:34px 1fr minmax(280px,440px) auto 42px auto!important;
  gap:12px!important;align-items:center!important;padding:0 26px!important;position:sticky!important;top:0!important;z-index:35!important;
  box-shadow:none!important;
}
.menu-btn{width:32px!important;height:32px!important;border:0!important;background:transparent!important;border-radius:0!important;font-size:18px!important}
.hello{min-width:0!important;overflow:hidden!important}.hello h1{font-size:15px!important;line-height:1.15!important;margin:0!important;letter-spacing:-.02em!important;font-weight:800!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.hello p{font-size:7.5px!important;line-height:1.2!important;color:#77837D!important;margin:3px 0 0!important;font-weight:400!important;white-space:nowrap!important}
.searchbox{height:40px!important;border:1px solid var(--shell-line)!important;border-radius:10px!important;display:flex!important;align-items:center!important;gap:8px!important;padding:0 10px!important;color:#77837D!important;background:#fff!important}.searchbox svg,.searchbox .ico svg{width:17px!important;height:17px!important}.searchbox input{border:0!important;outline:0!important;min-width:0!important;flex:1!important;font-size:8px!important;background:transparent!important}.searchbox kbd{font:inherit!important;font-size:6.5px!important;padding:5px 7px!important;border:1px solid #E2E7E4!important;border-radius:6px!important;background:#F8FAF9!important}
.datebox{display:flex!important;align-items:center!important;gap:8px!important;border:1px solid var(--shell-line)!important;border-radius:10px!important;padding:8px 10px!important;min-width:150px!important;height:auto!important;background:#fff!important}.datebox .date-icon{width:auto!important;height:auto!important;border-radius:0!important;background:transparent!important}.datebox .date-icon svg{width:17px!important;height:17px!important}.datebox b{display:block!important;font-size:7.5px!important;line-height:1.2!important}.datebox small{display:block!important;font-size:6.5px!important;color:#79857F!important;margin-top:2px!important;line-height:1.1!important}
.bell{position:relative!important;width:40px!important;height:40px!important;border:1px solid var(--shell-line)!important;border-radius:10px!important;background:#fff!important;font-size:16px!important}.bell i{position:absolute!important;right:-2px!important;top:-5px!important;width:16px!important;height:16px!important;border-radius:50%!important;background:#F21F24!important;color:#fff!important;font-style:normal!important;font-size:7px!important;display:grid!important;place-items:center!important}
.top-profile{display:grid!important;grid-template-columns:32px minmax(0,1fr) auto!important;gap:8px!important;align-items:center!important;min-width:140px!important;height:auto!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important}.top-profile .avatar{width:32px!important;height:32px!important;border-radius:50%!important;background:#075B43!important;color:#fff!important;font-size:11px!important}.top-profile b{display:block!important;font-size:8px!important;line-height:1.1!important}.top-profile small{display:block!important;font-size:6.5px!important;color:#7B8780!important;margin-top:2px!important;line-height:1.15!important}.top-profile>span{font-size:10px!important}
/* Match the first content baseline below the topbar. */
.view{padding-top:18px!important}
@media(max-width:1380px){.topbar.attendance-topbar{grid-template-columns:34px 1fr minmax(250px,1fr) auto 42px auto!important;padding:0 18px!important;gap:10px!important}}
@media(max-width:1120px){.topbar.attendance-topbar{grid-template-columns:34px 1fr minmax(260px,1fr) 42px!important}.datebox,.top-profile{display:none!important}}
@media(max-width:900px){.app-shell{grid-template-columns:1fr!important}.sidebar{display:none!important}.topbar.attendance-topbar{height:68px!important;min-height:68px!important;grid-template-columns:34px 1fr 42px!important;padding:0 14px!important}.searchbox,.datebox,.top-profile{display:none!important}}

/* =========================================================
   V1.26 - EXACT ATTENDANCE V8.76 TYPOGRAPHY + SHELL MATCH
   Source of truth: Attendance admin final CSS overrides.
   ========================================================= */
html,body,button,input,select,textarea{font-family:"Manrope",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}
body{font-size:14px!important;line-height:1.5!important;background:#F6F8F7!important;color:#17251f!important}
.app-shell{grid-template-columns:248px minmax(0,1fr)!important}
.sidebar{padding:22px 16px!important;background:#fff!important;border-right:1px solid #dfe7e3!important}
.side-brand{padding:4px 6px 20px!important;border-bottom:1px solid #eef2ef!important;margin:0 0 16px!important}
.side-brand img{width:166px!important;max-height:56px!important;height:auto!important;object-fit:contain!important;object-position:left center!important}
.side-brand small{margin:5px 0 0!important;font-size:10px!important;line-height:1.2!important;letter-spacing:.18em!important;font-weight:800!important;color:#829089!important}
.main{padding:0!important;background:#F6F8F7!important}
.topbar.attendance-topbar{height:86px!important;min-height:86px!important;padding:0 30px!important;gap:14px!important;background:rgba(255,255,255,.96)!important;border-bottom:1px solid #dfe7e3!important;box-shadow:none!important;backdrop-filter:blur(12px)!important;grid-template-columns:34px 1fr minmax(280px,440px) auto 42px auto!important}
.hello h1{font-family:"Manrope",sans-serif!important;font-size:22px!important;line-height:1.15!important;font-weight:700!important;letter-spacing:-.02em!important;color:#17251f!important;margin:0!important}
.hello p{font-family:"Manrope",sans-serif!important;font-size:12px!important;line-height:1.2!important;font-weight:400!important;color:#7b8984!important;margin:3px 0 0!important}
.searchbox{height:46px!important;border-radius:13px!important;background:#fafcfa!important;padding:0 10px!important}.searchbox input{font-size:13px!important}.searchbox kbd{font-size:10px!important}
.datebox{padding:9px 12px!important;border-radius:12px!important;min-width:150px!important}.datebox b{font-size:12px!important}.datebox small{font-size:10px!important}.datebox .date-icon svg{width:18px!important;height:18px!important}
.bell{width:42px!important;height:42px!important;border-radius:11px!important}
.top-profile{min-width:140px!important}.top-profile b{font-size:12px!important}.top-profile small{font-size:10px!important}.top-profile .avatar{width:36px!important;height:36px!important;font-size:11px!important}
.view{padding-top:28px!important}
@media(max-width:1380px){.topbar.attendance-topbar{padding:0 24px!important;gap:12px!important}.hello h1{font-size:20px!important}.hello p{font-size:11px!important}}
@media(max-width:900px){.app-shell{grid-template-columns:1fr!important}.sidebar{display:none!important}.topbar.attendance-topbar{height:70px!important;min-height:70px!important;padding:0 14px!important;grid-template-columns:34px 1fr 42px!important}.searchbox,.datebox,.top-profile{display:none!important}}

/* V1.27 - topbar clipping fix; keep Attendance dimensions */
.topbar.attendance-topbar{
  height:76px!important;
  min-height:76px!important;
  grid-template-columns:34px 210px minmax(320px,1fr) 190px 44px 176px!important;
  gap:12px!important;
  padding:0 22px!important;
}
.hello{min-width:0!important;overflow:visible!important}
.hello h1{
  font-size:14px!important;
  line-height:1.15!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
  color:#14221B!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.hello p{
  font-size:10px!important;
  line-height:1.2!important;
  margin:5px 0 0!important;
  color:#7B8781!important;
  font-weight:500!important;
}
.searchbox{
  height:42px!important;
  border-radius:11px!important;
  padding:0 10px 0 12px!important;
  gap:9px!important;
  background:#FBFCFB!important;
  border:1px solid #DEE6E2!important;
}
.searchbox input{font-size:11px!important;color:#26352E!important}
.searchbox kbd{font-size:8px!important;padding:5px 7px!important;border-radius:7px!important}
.datebox{height:48px!important;min-width:0!important;border-radius:11px!important;padding:6px 10px!important;gap:9px!important}
.bell{width:44px!important;height:44px!important;border-radius:11px!important}
.top-profile{height:48px!important}
@media(max-width:1320px){
  .topbar.attendance-topbar{grid-template-columns:34px 190px minmax(260px,1fr) 165px 42px 150px!important;padding:0 16px!important;gap:10px!important}
  .hello h1{font-size:13px!important}
}

/* =========================================================
   V1.28 - FULL SIDEBAR SCROLL, SAME VISUAL SIZE
   Keeps Attendance-matched dimensions, but allows the entire
   sidebar to scroll so document types and footer never overlap.
   ========================================================= */
.sidebar{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}
.sidebar::-webkit-scrollbar{width:7px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:#c8d2cd;border-radius:999px;border:2px solid #fff}
.sidebar::-webkit-scrollbar-thumb:hover{background:#aebcb5}

/* Let the document-type area grow naturally; the sidebar itself scrolls. */
.doc-type-side{
  flex:0 0 auto!important;
  min-height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  margin-top:14px!important;
  padding-top:12px!important;
}
#docTypeSide{overflow:visible!important;max-height:none!important}

/* Footer/profile follow the list instead of covering it. */
.side-bottom{
  flex:0 0 auto!important;
  margin-top:14px!important;
  position:static!important;
  z-index:auto!important;
  background:#fff!important;
  padding-bottom:4px!important;
}

/* Prevent flex children from forcing overlap in shorter windows. */
.side-nav,.side-brand{flex:0 0 auto!important}

@media(max-width:900px){
  .sidebar{overflow-y:auto!important}
}

/* =========================================================
   V1.29 - SIDEBAR TYPOGRAPHY LEGIBILITY
   Keep V1.28 dimensions/scroll behavior; increase only text.
   ========================================================= */
.side-nav .nav{font-size:12px!important;font-weight:600!important}
.doc-type-side>small{font-size:8.5px!important;line-height:1.2!important}
.doc-type-side button{font-size:10px!important;font-weight:500!important;line-height:1.2!important}
.attendance-link{font-size:11px!important;font-weight:700!important}
.user-side b{font-size:11px!important;line-height:1.2!important}
.user-side small{font-size:9px!important;line-height:1.2!important}
.side-copyright{font-size:7.5px!important;line-height:1.45!important}

/* =========================================================
   V1.30 - TOPBAR DATE TYPOGRAPHY FIX
   Keep card size; reduce date/time type so it matches Attendance.
   ========================================================= */
.datebox b{
  font-size:10px!important;
  line-height:1.15!important;
  font-weight:700!important;
  letter-spacing:0!important;
  white-space:normal!important;
}
.datebox small{
  font-size:8px!important;
  line-height:1.1!important;
  margin-top:2px!important;
  font-weight:500!important;
  color:#7C8982!important;
}
.datebox .date-icon svg{width:17px!important;height:17px!important}
@media(max-width:1320px){
  .datebox b{font-size:9px!important}
  .datebox small{font-size:7.5px!important}
}

/* V1.32 - integrated detail pane: part of Explorer, not floating */
body.preview-drawer-open{overflow:auto!important}
.explorer-split-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 0;
  column-gap:0;
  align-items:start;
  transition:grid-template-columns .30s cubic-bezier(.22,.84,.28,1),column-gap .30s ease;
}
.explorer-split-layout.preview-open{
  grid-template-columns:minmax(0,1fr) 330px;
  column-gap:16px;
}
.explorer-split-main{min-width:0}
.file-preview-panel,
#filePreviewPanel{
  position:sticky!important;
  top:88px!important;
  right:auto!important;
  bottom:auto!important;
  width:100%!important;
  height:calc(100vh - 104px)!important;
  max-height:calc(100vh - 104px)!important;
  min-height:0!important;
  margin:0!important;
  padding:16px!important;
  border:1px solid #dfe8e4!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 10px 30px rgba(18,55,42,.05)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  transform:translateX(24px)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:transform .30s cubic-bezier(.22,.84,.28,1),opacity .20s ease,visibility 0s linear .30s!important;
  scrollbar-width:thin;
  scrollbar-color:#c7d1cd transparent;
}
.explorer-split-layout.preview-open #filePreviewPanel,
#filePreviewPanel.open{
  transform:translateX(0)!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transition-delay:0s!important;
}
#filePreviewPanel::-webkit-scrollbar{width:5px}
#filePreviewPanel::-webkit-scrollbar-track{background:transparent}
#filePreviewPanel::-webkit-scrollbar-thumb{background:#c7d1cd;border-radius:999px}
.preview-close{
  position:absolute!important;
  right:10px!important;
  top:10px!important;
  float:none!important;
  background:transparent!important;
  border-radius:8px!important;
}
#previewContent{padding-bottom:24px}
/* keep the page as the only outer scrollbar; detail panel visually reads as a right column */
.explorer-split-layout.preview-open .folder-grid{grid-template-columns:repeat(3,minmax(180px,1fr))}
.explorer-split-layout.preview-open .drive-doc-grid{grid-template-columns:repeat(2,minmax(220px,1fr))}
@media(max-width:1180px){
  .explorer-split-layout.preview-open{grid-template-columns:minmax(0,1fr) 300px;column-gap:12px}
  .explorer-split-layout.preview-open .folder-grid{grid-template-columns:repeat(2,minmax(170px,1fr))}
  .explorer-split-layout.preview-open .drive-doc-grid{grid-template-columns:1fr}
}
@media(max-width:860px){
  .explorer-split-layout,.explorer-split-layout.preview-open{display:block}
  #filePreviewPanel{position:fixed!important;top:76px!important;right:0!important;left:auto!important;width:min(92vw,340px)!important;height:calc(100vh - 76px)!important;max-height:none!important;border-radius:0!important;transform:translateX(100%)!important;z-index:120!important}
  .explorer-split-layout.preview-open #filePreviewPanel{transform:translateX(0)!important}
}

/* =========================================================
   V1.33 - INTEGRATED DETAIL PANE POSITION FIX
   The detail pane is a normal right column, not sticky/floating.
   One page scrollbar only. No jump to viewport top while scrolling.
   ========================================================= */
.explorer-split-layout{
  align-items:start!important;
}
.explorer-split-layout.preview-open{
  grid-template-columns:minmax(0,1fr) 330px!important;
  column-gap:16px!important;
}
.file-preview-panel,
#filePreviewPanel{
  position:relative!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  align-self:start!important;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  margin:0!important;
  padding:16px!important;
  border:1px solid #dfe8e4!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:none!important;
  overflow:visible!important;
  transform:translateX(18px)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:transform .28s cubic-bezier(.22,.84,.28,1),opacity .20s ease,visibility 0s linear .28s!important;
}
.explorer-split-layout.preview-open #filePreviewPanel,
#filePreviewPanel.open{
  transform:translateX(0)!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transition-delay:0s!important;
}
#filePreviewPanel::-webkit-scrollbar{display:none!important}
#filePreviewPanel{scrollbar-width:none!important}
#previewContent{padding-bottom:18px!important}

/* Keep preview aligned to the top of its Explorer row instead of the viewport. */
.preview-close{
  position:absolute!important;
  top:10px!important;
  right:10px!important;
}

@media(max-width:1180px){
  .explorer-split-layout.preview-open{
    grid-template-columns:minmax(0,1fr) 300px!important;
    column-gap:12px!important;
  }
}
@media(max-width:860px){
  .explorer-split-layout,.explorer-split-layout.preview-open{display:block!important}
  #filePreviewPanel{
    position:fixed!important;
    top:76px!important;
    right:0!important;
    left:auto!important;
    width:min(92vw,340px)!important;
    height:calc(100vh - 76px)!important;
    max-height:none!important;
    overflow-y:auto!important;
    border-radius:0!important;
    border-left:1px solid #dfe8e4!important;
    transform:translateX(100%)!important;
    z-index:120!important;
  }
  .explorer-split-layout.preview-open #filePreviewPanel{transform:translateX(0)!important}
}

/* =========================================================
   V1.35 - STABLE INTEGRATED DETAIL PANE
   Keep the right detail pane anchored under the topbar while
   remaining part of the Explorer grid. Hidden internal scrollbar.
   ========================================================= */
@media(min-width:861px){
  .explorer-split-layout{
    overflow:visible!important;
    align-items:start!important;
  }
  .explorer-split-layout.preview-open{
    grid-template-columns:minmax(0,1fr) 330px!important;
    column-gap:16px!important;
  }
  #filePreviewPanel,
  .file-preview-panel{
    position:sticky!important;
    top:88px!important;
    align-self:start!important;
    width:100%!important;
    height:auto!important;
    max-height:calc(100vh - 100px)!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    margin:0!important;
    border:1px solid #dfe8e4!important;
    border-radius:12px!important;
    box-shadow:none!important;
    background:#fff!important;
    scrollbar-width:none!important;
  }
  #filePreviewPanel::-webkit-scrollbar,
  .file-preview-panel::-webkit-scrollbar{
    width:0!important;
    height:0!important;
    display:none!important;
  }
  .explorer-split-layout.preview-open #filePreviewPanel,
  #filePreviewPanel.open{
    transform:translateX(0)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
}

/* =========================================================
   V1.36 - VIEWPORT FOLLOW DETAIL PANE
   Detail pane stays in the user's current POV while the page scrolls.
   It is docked to the right edge, not a floating chat bubble.
   ========================================================= */
@media(min-width:861px){
  .explorer-split-layout,
  .explorer-split-layout.preview-open{
    display:block!important;
    position:relative!important;
    overflow:visible!important;
  }
  .explorer-split-layout.preview-open{
    padding-right:346px!important;
    transition:padding-right .30s cubic-bezier(.22,.84,.28,1)!important;
  }
  #filePreviewPanel,
  .file-preview-panel{
    position:fixed!important;
    top:76px!important;
    right:0!important;
    bottom:0!important;
    left:auto!important;
    width:330px!important;
    height:calc(100vh - 76px)!important;
    max-height:none!important;
    margin:0!important;
    padding:18px 18px 24px!important;
    border:0!important;
    border-left:1px solid #dfe8e4!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:-10px 0 28px rgba(18,55,42,.035)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    z-index:34!important;
    transform:translateX(100%)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:transform .30s cubic-bezier(.22,.84,.28,1),opacity .20s ease,visibility 0s linear .30s!important;
    scrollbar-width:none!important;
  }
  #filePreviewPanel::-webkit-scrollbar,
  .file-preview-panel::-webkit-scrollbar{
    display:none!important;
    width:0!important;
    height:0!important;
  }
  .explorer-split-layout.preview-open #filePreviewPanel,
  #filePreviewPanel.open{
    transform:translateX(0)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transition-delay:0s!important;
  }
  .preview-close{
    position:sticky!important;
    top:0!important;
    margin-left:auto!important;
    z-index:2!important;
    background:#fff!important;
  }
}

@media(min-width:861px) and (max-width:1180px){
  .explorer-split-layout.preview-open{padding-right:316px!important}
  #filePreviewPanel,.file-preview-panel{width:300px!important}
}

/* =========================================================
   V1.37 - RESTORE FIXED LEFT SIDEBAR WITH VIEWPORT DETAIL PANE
   Keep the left navigation frozen while preserving V1.36 detail behavior.
   ========================================================= */
@media (min-width: 901px){
  :root{--docs-sidebar-w:248px}
  .app-shell{
    display:block!important;
    min-height:100vh!important;
  }
  .sidebar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    width:var(--docs-sidebar-w)!important;
    height:100vh!important;
    min-height:100vh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    background:#fff!important;
    border-right:1px solid #dfe7e3!important;
    z-index:300!important;
    scrollbar-gutter:stable!important;
  }
  .main{
    margin-left:var(--docs-sidebar-w)!important;
    width:calc(100% - var(--docs-sidebar-w))!important;
    min-height:100vh!important;
  }
  .topbar.attendance-topbar{
    position:sticky!important;
    top:0!important;
    z-index:250!important;
  }
  .side-bottom{
    margin-top:24px!important;
    padding-bottom:16px!important;
  }
  .sidebar::-webkit-scrollbar{width:6px!important}
  .sidebar::-webkit-scrollbar-track{background:transparent!important}
  .sidebar::-webkit-scrollbar-thumb{background:#c7d1cd!important;border-radius:999px!important;border:1px solid #fff!important}
}

/* =========================================================
   V1.38 - EMAIL STYLE FULL EDGE DOCUMENT INSPECTOR
   Full-height right inspector, edge-docked, with minimize/expand.
   ========================================================= */
@media (min-width:861px){
  :root{--docs-inspector-w:390px;--docs-inspector-mini:54px}
  .explorer-split-layout.preview-open{
    padding-right:calc(var(--docs-inspector-w) + 16px)!important;
    transition:padding-right .28s cubic-bezier(.22,.84,.28,1)!important;
  }
  .explorer-split-layout.preview-open.preview-minimized{
    padding-right:calc(var(--docs-inspector-mini) + 12px)!important;
  }
  #filePreviewPanel,.file-preview-panel{
    position:fixed!important;
    top:76px!important;
    right:0!important;
    bottom:0!important;
    width:var(--docs-inspector-w)!important;
    height:calc(100vh - 76px)!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-left:1px solid #dfe8e4!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:-8px 0 24px rgba(18,55,42,.04)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    z-index:340!important;
    transform:translateX(100%)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:transform .30s cubic-bezier(.22,.84,.28,1),width .24s ease,opacity .18s ease,visibility 0s linear .30s!important;
    scrollbar-width:none!important;
  }
  #filePreviewPanel.open{
    transform:translateX(0)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transition-delay:0s!important;
  }
  #filePreviewPanel::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}

  /* Gmail / Outlook-like action rail */
  #filePreviewPanel .preview-controlbar{
    position:sticky!important;
    top:0!important;
    z-index:20!important;
    height:48px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:0!important;
    padding:0 8px!important;
    background:rgba(255,255,255,.98)!important;
    border-bottom:1px solid #e6ece9!important;
    backdrop-filter:blur(8px)!important;
  }
  #filePreviewPanel .preview-controlbar button{
    position:static!important;
    width:36px!important;
    height:36px!important;
    border:0!important;
    background:transparent!important;
    color:#6d7c76!important;
    border-radius:8px!important;
    display:grid!important;
    place-items:center!important;
    font-size:20px!important;
    cursor:pointer!important;
    transition:background .16s ease,color .16s ease!important;
  }
  #filePreviewPanel .preview-controlbar button:hover{background:#f2f6f4!important;color:#0c644d!important}
  #filePreviewPanel .preview-controlbar .preview-close{
    border-left:1px solid #e6ece9!important;
    border-radius:0 8px 8px 0!important;
    margin-left:2px!important;
  }
  #filePreviewPanel .preview-controlbar .preview-minimize{font-size:18px!important}

  #filePreviewPanel #previewContent,
  #filePreviewPanel #previewEmpty{
    padding:18px 22px 28px!important;
  }
  #filePreviewPanel .preview-title{padding-right:0!important}
  #filePreviewPanel .preview-file-hero{height:190px!important;margin:14px 0 16px!important}
  #filePreviewPanel .preview-actions{gap:10px!important}

  /* Minimized rail */
  #filePreviewPanel.minimized{
    width:var(--docs-inspector-mini)!important;
    overflow:hidden!important;
  }
  #filePreviewPanel.minimized #previewContent,
  #filePreviewPanel.minimized #previewEmpty{display:none!important}
  #filePreviewPanel.minimized .preview-controlbar{
    height:100%!important;
    padding:8px!important;
    align-items:flex-start!important;
    justify-content:center!important;
    border-bottom:0!important;
  }
  #filePreviewPanel.minimized .preview-controlbar .preview-close{display:none!important}
  #filePreviewPanel.minimized .preview-controlbar .preview-minimize{
    transform:rotate(180deg)!important;
    border:0!important;
    margin:0!important;
  }
}

@media (max-width:860px){
  #filePreviewPanel .preview-controlbar{
    position:sticky;top:0;z-index:20;height:46px;display:flex;justify-content:flex-end;align-items:center;padding:0 8px;background:#fff;border-bottom:1px solid #e6ece9
  }
  #filePreviewPanel .preview-controlbar button{width:34px;height:34px;border:0;background:transparent;font-size:20px;color:#6d7c76}
  #filePreviewPanel .preview-minimize{display:none!important}
}

/* =========================================================
   V1.39 - SLIM EMAIL INSPECTOR HEADER + MINIMIZED FILE RAIL
   ========================================================= */
@media (min-width:861px){
  :root{--docs-inspector-mini:50px}
  #filePreviewPanel .preview-controlbar{
    height:38px!important;
    min-height:38px!important;
    padding:0 5px!important;
  }
  #filePreviewPanel .preview-controlbar button{
    width:30px!important;
    height:30px!important;
    border-radius:6px!important;
    font-size:17px!important;
  }
  #filePreviewPanel .preview-controlbar .preview-close{
    margin-left:0!important;
    padding-left:1px!important;
  }
  #filePreviewPanel .preview-controlbar .preview-minimize{font-size:16px!important}

  #filePreviewPanel.minimized{
    width:var(--docs-inspector-mini)!important;
    overflow:hidden!important;
    background:#fff!important;
  }
  #filePreviewPanel.minimized .preview-controlbar{
    height:38px!important;
    min-height:38px!important;
    padding:4px 5px!important;
    align-items:center!important;
    justify-content:center!important;
    border-bottom:1px solid #e6ece9!important;
  }
  #filePreviewPanel.minimized .preview-controlbar .preview-minimize{
    transform:rotate(180deg)!important;
    width:30px!important;
    height:30px!important;
  }
  #filePreviewPanel .preview-mini-file{
    display:none;
  }
  #filePreviewPanel.minimized .preview-mini-file{
    display:flex!important;
    position:absolute!important;
    top:48px!important;
    left:0!important;
    right:0!important;
    align-items:center!important;
    justify-content:center!important;
    padding:8px 4px!important;
    cursor:pointer!important;
    z-index:5!important;
  }
  #filePreviewPanel.minimized .preview-mini-file .drive-file-icon{
    width:32px!important;
    height:36px!important;
    min-width:32px!important;
    margin:0!important;
  }
  #filePreviewPanel.minimized .preview-mini-file .drive-file-icon svg{
    width:32px!important;
    height:36px!important;
  }
  #filePreviewPanel.minimized .preview-mini-file .drive-file-icon em{
    display:none!important;
  }
  #filePreviewPanel .preview-mini-tooltip{
    position:absolute;
    right:calc(100% + 10px);
    top:50%;
    transform:translateY(-50%) translateX(4px);
    min-width:190px;
    max-width:280px;
    padding:9px 11px;
    background:#173a31;
    color:#fff;
    border-radius:8px;
    box-shadow:0 10px 28px rgba(15,44,36,.18);
    font-size:11px;
    line-height:1.35;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .15s ease,transform .15s ease,visibility .15s;
    text-align:left;
    white-space:normal;
  }
  #filePreviewPanel .preview-mini-tooltip b{
    display:block;
    margin-bottom:3px;
    font-size:11px;
    font-weight:700;
    color:#fff;
  }
  #filePreviewPanel .preview-mini-tooltip span{
    color:#cfe0da;
  }
  #filePreviewPanel.minimized .preview-mini-file:hover .preview-mini-tooltip,
  #filePreviewPanel.minimized .preview-mini-file:focus-within .preview-mini-tooltip{
    opacity:1;
    visibility:visible;
    transform:translateY(-50%) translateX(0);
  }
}

/* =========================================================
   V1.40 - DOCUMENT EXPLORER HEADER / TOOLBAR CLEANUP
   ========================================================= */
.drive-explorer{padding:0!important}
.explorer-main-head{
  background:transparent!important;
  padding:0!important;
  margin:0 0 18px!important;
}
.folder-breadcrumb{
  min-height:24px!important;
  margin:0 0 10px!important;
  gap:6px!important;
  overflow-x:auto!important;
  scrollbar-width:none!important;
}
.folder-breadcrumb::-webkit-scrollbar{display:none!important}
.folder-breadcrumb button{font-size:11px!important;color:#78857f!important;padding:2px 0!important}
.folder-breadcrumb button.current{color:#1d3029!important;font-weight:700!important}
.explorer-title-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:18px!important;
  margin:0 0 18px!important;
}
.explorer-title-row>div:first-child{min-width:0!important}
.explorer-title-row h2{
  margin:0 0 5px!important;
  font-size:29px!important;
  line-height:1.12!important;
  font-weight:700!important;
  letter-spacing:-.025em!important;
  color:#152821!important;
}
.explorer-title-row p{
  margin:0!important;
  max-width:640px!important;
  font-size:12px!important;
  line-height:1.5!important;
  color:#7c8984!important;
}
.explorer-actions{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
}
.explorer-actions .btn{
  min-height:44px!important;
  height:44px!important;
  padding:0 16px!important;
  border-radius:11px!important;
  white-space:nowrap!important;
  font-size:11px!important;
  font-weight:700!important;
}
.explorer-actions .btn .ico{width:18px!important;height:18px!important}
.explorer-stats{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  margin:0 0 16px!important;
}
.explorer-stats>div{
  min-height:82px!important;
  grid-template-columns:46px 1fr!important;
  column-gap:12px!important;
  padding:14px 16px!important;
  border-radius:15px!important;
  box-shadow:0 6px 20px rgba(20,54,43,.035)!important;
}
.explorer-stats .stat-icon{
  width:44px!important;
  height:44px!important;
  border-radius:12px!important;
  font-size:20px!important;
}
.explorer-stats small{font-size:10px!important;font-weight:650!important;line-height:1.2!important}
.explorer-stats b{font-size:20px!important;line-height:1.1!important;font-weight:700!important}
.explorer-toolbar{
  display:grid!important;
  grid-template-columns:minmax(280px,1fr) 44px auto 160px!important;
  align-items:center!important;
  gap:10px!important;
  margin:0 0 20px!important;
}
.explorer-search{
  width:100%!important;
  min-width:0!important;
  height:46px!important;
  border-radius:12px!important;
  background:#fff!important;
}
.explorer-search input{font-size:12px!important}
.explorer-toolbar .icon-square{
  width:44px!important;
  height:44px!important;
  border-radius:11px!important;
}
.view-switch{display:flex!important;gap:6px!important;align-items:center!important}
.view-switch button{
  width:44px!important;
  height:44px!important;
  border-radius:11px!important;
}
.explorer-toolbar select{
  height:44px!important;
  border-radius:11px!important;
  font-size:11px!important;
  padding-left:14px!important;
}
.folder-section{margin-top:2px!important}
.section-label{font-size:10px!important;margin:0 0 11px!important}

@media(max-width:1180px){
  .explorer-title-row{grid-template-columns:1fr!important;align-items:start!important}
  .explorer-actions{justify-content:flex-start!important;flex-wrap:wrap!important}
  .explorer-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .explorer-toolbar{grid-template-columns:minmax(240px,1fr) 44px auto 150px!important}
}
@media(max-width:760px){
  .explorer-title-row h2{font-size:24px!important}
  .explorer-title-row p{font-size:11px!important}
  .explorer-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important}
  .explorer-actions .btn.primary{grid-column:1/-1!important}
  .explorer-stats{grid-template-columns:1fr 1fr!important}
  .explorer-toolbar{display:grid!important;grid-template-columns:1fr 44px!important}
  .view-switch{grid-column:1/2!important}
  .explorer-toolbar select{grid-column:2/3!important;width:100%!important}
}

/* V1.41 PERFORMANCE / STABILITY */
.topbar,.topbar.attendance-topbar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#fff!important}
.drive-folder-card,.drive-doc-card,.metric-card,.panel{contain:layout paint style}
.drive-folder-card,.drive-doc-card{animation:none!important}
#filePreviewPanel{will-change:transform;contain:layout paint style}
#explorerContent{contain:layout style}
@media (min-width:901px){.drive-doc-grid,.folder-grid{content-visibility:auto;contain-intrinsic-size:700px}}

/* =========================================================
   V1.42 - SLIM DOCUMENT EXPLORER HEADER
   ========================================================= */
.explorer-main-head{margin-bottom:12px!important}
.explorer-title-row{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:16px!important;
  margin-bottom:12px!important;
}
.explorer-title-row>div:first-child{flex:1 1 auto!important;min-width:0!important;max-width:680px!important}
.explorer-title-row h2{
  font-size:25px!important;
  line-height:1.08!important;
  margin:0 0 4px!important;
}
.explorer-title-row p{
  font-size:11px!important;
  line-height:1.45!important;
  max-width:560px!important;
  margin:0!important;
}
.explorer-actions{gap:8px!important;flex:0 0 auto!important}
.explorer-actions .btn{
  height:40px!important;
  min-height:40px!important;
  padding:0 13px!important;
  border-radius:10px!important;
  font-size:10px!important;
}
.explorer-actions .btn .ico{width:16px!important;height:16px!important}
.explorer-stats{
  gap:10px!important;
  margin-bottom:12px!important;
}
.explorer-stats>div{
  min-height:68px!important;
  padding:10px 12px!important;
  grid-template-columns:38px 1fr!important;
  column-gap:10px!important;
  border-radius:13px!important;
}
.explorer-stats .stat-icon{
  width:38px!important;
  height:38px!important;
  border-radius:11px!important;
  font-size:18px!important;
}
.explorer-stats small{font-size:9px!important;line-height:1.15!important}
.explorer-stats b{font-size:17px!important;line-height:1.05!important}
.explorer-toolbar{
  grid-template-columns:minmax(260px,1fr) 40px auto 145px!important;
  gap:8px!important;
  margin-bottom:14px!important;
}
.explorer-search{height:42px!important;border-radius:11px!important}
.explorer-search input{font-size:11px!important}
.explorer-toolbar .icon-square,.view-switch button{
  width:40px!important;
  height:40px!important;
  border-radius:10px!important;
}
.explorer-toolbar select{
  height:40px!important;
  border-radius:10px!important;
  font-size:10px!important;
  padding-left:12px!important;
}
.folder-breadcrumb{margin-bottom:7px!important;min-height:20px!important}
.folder-breadcrumb button{font-size:10px!important}
.section-label{font-size:9px!important;margin-bottom:9px!important}

@media(max-width:1180px){
  .explorer-title-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:start!important}
  .explorer-title-row>div:first-child{max-width:100%!important}
  .explorer-title-row p{max-width:520px!important}
  .explorer-actions{justify-content:flex-end!important;flex-wrap:wrap!important}
}
@media(max-width:920px){
  .explorer-title-row{grid-template-columns:1fr!important}
  .explorer-actions{justify-content:flex-start!important}
  .explorer-title-row p{max-width:100%!important}
}
@media(max-width:760px){
  .explorer-title-row h2{font-size:22px!important}
  .explorer-title-row p{font-size:10.5px!important;line-height:1.4!important}
}

/* =========================================================
   V1.43 - OVERLAY INSPECTOR (NO LAYOUT SHRINK)
   Keep explorer width unchanged when document detail is open.
   The inspector overlays the right side like email preview.
   ========================================================= */
@media (min-width:861px){
  .explorer-split-layout,
  .explorer-split-layout.preview-open,
  .explorer-split-layout.preview-open.preview-minimized{
    padding-right:0!important;
    width:100%!important;
    max-width:none!important;
    grid-template-columns:minmax(0,1fr)!important;
    transition:none!important;
  }
  .explorer-split-layout.preview-open .explorer-workspace,
  .explorer-split-layout.preview-open.preview-minimized .explorer-workspace{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }
  #filePreviewPanel,
  .file-preview-panel{
    z-index:460!important;
    box-shadow:-12px 0 30px rgba(16,45,36,.08)!important;
  }
}

/* =========================================================
   V1.44 - TRUE VIEWPORT OVERLAY INSPECTOR
   Detail panel is detached from Explorer layout and overlays content.
   No grid/padding/width changes are applied to the document workspace.
   ========================================================= */
@media (min-width:861px){
  :root{--docs-inspector-w:390px;--docs-inspector-mini:52px;--docs-topbar-h:76px}

  /* Explorer NEVER changes size when inspector opens/minimizes. */
  .explorer-split-layout,
  .explorer-split-layout.preview-open,
  .explorer-split-layout.preview-open.preview-minimized{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    padding-right:0!important;
    margin-right:0!important;
    grid-template-columns:none!important;
    transition:none!important;
  }
  .explorer-split-main,
  .explorer-split-layout .explorer-workspace,
  .explorer-split-layout.preview-open .explorer-workspace,
  .explorer-split-layout.preview-open.preview-minimized .explorer-workspace{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    padding-right:0!important;
    margin-right:0!important;
    transform:none!important;
    transition:none!important;
  }

  /* True viewport overlay: independent from document section dimensions. */
  body > #filePreviewPanel,
  #filePreviewPanel.file-preview-panel{
    position:fixed!important;
    top:var(--docs-topbar-h)!important;
    right:0!important;
    bottom:0!important;
    left:auto!important;
    width:var(--docs-inspector-w)!important;
    height:calc(100vh - var(--docs-topbar-h))!important;
    max-height:none!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-left:1px solid #e1e8e5!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:-5px 0 18px rgba(18,55,42,.035)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    z-index:420!important;
    transform:translate3d(100%,0,0)!important;
    opacity:1!important;
    visibility:hidden!important;
    pointer-events:none!important;
    contain:content!important;
    will-change:transform!important;
    transition:transform .22s cubic-bezier(.22,.82,.28,1), visibility 0s linear .22s!important;
    scrollbar-width:none!important;
  }
  body > #filePreviewPanel.open,
  #filePreviewPanel.file-preview-panel.open{
    transform:translate3d(0,0,0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transition-delay:0s!important;
  }
  body > #filePreviewPanel::-webkit-scrollbar,
  #filePreviewPanel.file-preview-panel::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}

  /* Minimized rail also overlays, never consumes Explorer width. */
  body > #filePreviewPanel.minimized,
  #filePreviewPanel.file-preview-panel.minimized{
    width:var(--docs-inspector-mini)!important;
    overflow:hidden!important;
  }
  body > #filePreviewPanel.minimized #previewContent,
  body > #filePreviewPanel.minimized #previewEmpty,
  #filePreviewPanel.file-preview-panel.minimized #previewContent,
  #filePreviewPanel.file-preview-panel.minimized #previewEmpty{display:none!important}

  #filePreviewPanel .preview-controlbar{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:#fff!important;
  }
}

/* =========================================================
   V1.45 - MULTI DOCUMENT MINIMIZE QUEUE
   Right-side parked document queue, newest first.
   ========================================================= */
@media (min-width:861px){
  :root{--docs-queue-w:52px;--docs-topbar-h:76px}
  .docs-min-queue{
    position:fixed;right:0;top:var(--docs-topbar-h);bottom:0;
    width:var(--docs-queue-w);z-index:430;background:#fff;
    border-left:1px solid #e1e8e5;transform:translateX(100%);
    opacity:0;pointer-events:none;transition:transform .18s ease,opacity .18s ease;
    display:flex;flex-direction:column;align-items:center;
  }
  .docs-min-queue.show{transform:translateX(0);opacity:1;pointer-events:auto}
  .docs-min-queue-head{height:42px;width:100%;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #edf1ef;color:#6f7f78;font-size:14px;flex:0 0 auto}
  .docs-min-queue-list{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:9px 5px 12px;overflow-y:auto;overflow-x:visible;scrollbar-width:none}
  .docs-min-queue-list::-webkit-scrollbar{display:none}
  .docs-min-item{position:relative;width:40px;height:48px;border:1px solid #e3e9e6;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:4px;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}
  .docs-min-item:hover{background:#f7faf8;border-color:#bcd8cd;transform:translateX(-2px)}
  .docs-min-item .queue-file-icon{display:block;width:29px;height:33px;position:relative}
  .docs-min-item .queue-file-icon svg{width:29px;height:33px;display:block}
  .docs-min-item .queue-file-icon em{display:none}
  .docs-min-tooltip{position:absolute;right:47px;top:50%;transform:translateY(-50%) translateX(6px);width:230px;padding:9px 11px;background:#18362d;color:#fff;border-radius:8px;box-shadow:0 8px 22px rgba(18,55,42,.13);opacity:0;visibility:hidden;pointer-events:none;text-align:left;transition:opacity .14s ease,transform .14s ease;z-index:10}
  .docs-min-tooltip:after{content:"";position:absolute;right:-5px;top:50%;width:10px;height:10px;background:#18362d;transform:translateY(-50%) rotate(45deg)}
  .docs-min-tooltip b{display:block;font-size:11px;line-height:1.3;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .docs-min-tooltip small{display:block;margin-top:3px;font-size:9px;color:#c9d8d2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .docs-min-item:hover .docs-min-tooltip,.docs-min-item:focus-visible .docs-min-tooltip{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
  .docs-min-remove{position:absolute;right:-3px;top:-5px;width:15px;height:15px;border-radius:50%;background:#fff;border:1px solid #dfe7e3;color:#81908a;font-size:11px;line-height:13px;display:none;align-items:center;justify-content:center}
  .docs-min-item:hover .docs-min-remove{display:flex}
  /* Legacy single-file minimized visual is disabled; V1.45 queue owns minimized state. */
  #filePreviewPanel.minimized .preview-mini-file{display:none!important}
}
@media (max-width:860px){
  .docs-min-queue{display:none!important}
}