@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); :root{--brand:#8eea20;--brand2:#b6ff49;--ink:#111827;--muted:#697386;--bg:#f6f8fb;--surface:#fff;--surface2:#f9fafb;--border:#e4e9f0;--sidebar:#222729;--sidebar2:#2c3234;--shadow:0 8px 24px rgba(16,24,40,.06);--r:12px;--blue:#2787ef;--amber:#f4a11a;--purple:#805ad5;--orange:#f57c21;--gold:#e7b416;--green:#22a65a;--red:#df4d4d;--slate:#718096;--text:#1d2939} *{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,system-ui,sans-serif;color:var(--text);background:var(--bg)}body{overflow-x:hidden}button,input,select,textarea{font:inherit}.app{height:100vh;height:100dvh;min-height:0;display:grid;grid-template-columns:250px minmax(0,1fr) 310px;overflow:hidden}.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#222729,#1e2325);color:#d7dcde;display:flex;flex-direction:column;padding:0 12px 16px;z-index:30;overflow-y:auto}.brand{height:78px;display:flex;align-items:center;padding:0 8px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:8px}.brand-row{display:flex;align-items:center;gap:10px}.brand-mark{width:22px;height:22px;border:3px solid var(--brand);border-radius:6px;transform:rotate(45deg);box-shadow:0 0 0 2px rgba(142,234,32,.12)}.brand-title{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.5px}.brand-title span{color:var(--brand)}.brand-sub{font-size:9px;font-weight:700;letter-spacing:1.7px;color:#aeb7ba;margin-top:2px}.nav{display:flex;flex-direction:column;gap:3px}.nav-group{display:flex;flex-direction:column;gap:2px}.nav-item,.nav-parent{min-height:38px;border-radius:7px;padding:0 11px;display:flex;align-items:center;gap:10px;color:#d7dcde;text-decoration:none;font-size:12px;font-weight:600;cursor:pointer;transition:.18s ease}.nav-item i,.nav-parent i{width:16px;text-align:center;color:#aeb7ba}.nav-item:hover,.nav-parent:hover{background:rgba(255,255,255,.055);color:#fff}.nav-item.active{background:var(--brand);color:#15210b}.nav-item.active i{color:#15210b}.nav-parent{justify-content:space-between}.nav-parent .left{display:flex;align-items:center;gap:10px}.chev{font-size:9px;transition:transform .2s}.nav-parent:not(.open) .chev{transform:rotate(-90deg)}.subnav{display:flex;flex-direction:column;gap:1px}.nav-parent:not(.open)+.subnav{display:none}.subnav .nav-item{padding-left:36px;min-height:32px;font-size:11px}.profile-box{margin-top:auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}.signout{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer;font-size:12px}.signout:hover{background:rgba(255,255,255,.06)}.workspace{min-width:0;min-height:0;height:100%;display:flex;flex-direction:column;overflow:hidden}.topbar{height:70px;flex:0 0 70px;display:flex;align-items:center;gap:14px;background:var(--surface);border-bottom:1px solid var(--border);padding:0 22px;position:sticky;top:0;z-index:25}.hamburger{border:0;background:transparent;color:#4d5968;width:34px;height:34px;border-radius:8px}.hamburger:hover{background:var(--surface2)}.search{height:38px;max-width:470px;flex:1;display:flex;align-items:center;border:1px solid var(--border);border-radius:8px;background:var(--surface2);padding:0 10px;gap:8px}.search input{border:0;outline:0;background:transparent;min-width:0;flex:1;color:var(--text);font-size:12px}.magnify,.hint{color:#8b95a4;font-size:11px}.hint{border:1px solid var(--border);border-radius:5px;padding:3px 6px;background:var(--surface)}.theme-switch{margin-left:auto;width:64px;height:32px;border:1px solid var(--border);border-radius:18px;background:var(--surface2);display:flex;align-items:center;justify-content:space-between;padding:3px;position:relative;color:#f5a623}.theme-pill{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#263036;color:#fff;transition:transform .25s ease}.header-user{position:relative;display:flex;align-items:center;gap:9px;padding:5px 8px;border-radius:9px;cursor:pointer}.header-user:hover{background:var(--surface2)}.avatar,.mini-avatar,.act-avatar{display:grid;place-items:center;border-radius:50%;background:#d9e1e8;color:#45515f;font-weight:700}.avatar{width:34px;height:34px;font-size:11px}.header-user-name{font-size:11px;font-weight:700}.header-user-email{font-size:9px;color:var(--muted)}.profile-menu{display:none;position:absolute;right:0;top:48px;min-width:150px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:6px;box-shadow:var(--shadow);z-index:50}.header-user.open .profile-menu{display:block;animation:pop .16s ease}.profile-menu button{width:100%;border:0;background:transparent;text-align:left;padding:9px 10px;border-radius:7px;color:var(--text);font-size:11px}.profile-menu button:hover{background:var(--surface2)}.content{padding:24px 24px 0;min-width:0}.hero,.page-head,.mad-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px}.hero h1,.page-head h1,.mad-page-head h1{margin:0;font-size:23px;line-height:1.2;font-weight:800;letter-spacing:-.6px}.hero p,.page-head p,.mad-page-head p{margin:5px 0 0;color:var(--muted);font-size:11px}.date-block{text-align:right}.date{font-size:11px;font-weight:700}.quote{font-size:9px;color:var(--muted);font-style:italic;margin-top:3px}.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.kpi{min-height:94px;border-radius:11px;padding:16px 18px;display:flex;align-items:center;gap:14px;border:1px solid transparent;transition:transform .18s ease,box-shadow .18s ease}.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.kpi.green{background:#dff6df;border-color:#bde9c0}.kpi.amber{background:#fff0d2;border-color:#f7ddb0}.kpi.purple{background:#eadff8;border-color:#d8c5f1}.kpi.red{background:#fde1df;border-color:#f5c3bf}.kpi .icon{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.62);font-size:17px}.kpi .label{font-size:11px;font-weight:700}.kpi .num{font-size:25px;font-weight:800;line-height:1.15;margin:2px 0}.kpi .desc{font-size:9px;color:#596474}.panel,.widget,.form-card,.table-panel,.table-panel-v10,.calendar-panel-v10,.timeline-panel-v10,.side-card,.post,.stat-card,.inventory-cards>div{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:0 2px 8px rgba(16,24,40,.025)}.panel{margin-bottom:16px}.panel-head{height:48px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.panel-title{font-size:12px;font-weight:800;display:flex;align-items:center;gap:8px}.panel-link,.view,.details{font-size:9px;color:#39961d;text-decoration:none;font-weight:700}.tasks-table{overflow:auto}.tasks-table table,.data-table{width:100%;border-collapse:collapse}.tasks-table th,.tasks-table td,.data-table th,.data-table td{padding:11px 16px;border-bottom:1px solid var(--border);font-size:10px;text-align:left;vertical-align:middle}.tasks-table th,.data-table th{font-size:9px;text-transform:uppercase;letter-spacing:.45px;color:#778292;background:#fbfcfd}.tasks-table tr:last-child td,.data-table tr:last-child td{border-bottom:0}.project-dot,.priority-dot,.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px}.badge,.status-chip{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:4px 8px;font-size:8px;font-weight:800;white-space:nowrap}.badge.progress,.st-progress,.status-progress{background:#fff0c9;color:#946300}.badge.review,.st-review,.status-review{background:#eadcf9;color:#6736a6}.badge.todo,.st-todo,.status-todo{background:#dbeafe;color:#1d5ca8}.badge.revision,.st-revision,.status-revision{background:#ffe0ca;color:#a54a0d}.st-onrevision,.status-onrevision{background:#fff3b8;color:#7d6200}.st-done,.status-done{background:#dff6e5;color:#18733b}.st-draft,.status-draft{background:#e9edf2;color:#52606d}.status-hold{background:#fde0e0;color:#a92c2c}.status-archive{background:#e5e9ef;color:#52606d}.deadline-red{color:#d43e3e;font-weight:700}.more{font-size:14px;color:#7a8492}.lower-grid{display:grid;grid-template-columns:1fr 1.18fr;gap:16px}.attention-body{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:14px}.att-card{height:68px;border-radius:9px;display:flex;flex-direction:column;justify-content:center;padding:0 14px}.att-card.red{background:#fee5e2}.att-card.orange{background:#fff0d8}.att-card.pink{background:#fde5ea}.att-card.purple{background:#eee3fa}.att-card .n{font-size:20px;font-weight:800}.att-card .t{font-size:9px;font-weight:700}.activity{padding:4px 14px}.activity-item{display:grid;grid-template-columns:30px 1fr auto;gap:9px;align-items:center;padding:9px 0;border-bottom:1px solid var(--border)}.activity-item:last-child{border:0}.act-avatar{width:28px;height:28px;font-size:8px}.act-main{font-size:9px}.act-sub,.act-time{font-size:8px;color:var(--muted)}.footer{display:flex;justify-content:space-between;align-items:center;padding:17px 2px;margin-top:8px;color:#8b95a4;font-size:8px}.tagline{display:flex;align-items:center;gap:7px}.tagline .line{width:25px;height:2px;background:var(--brand)}.widgets{position:sticky;top:0;height:100vh;overflow-y:auto;background:#fbfcfd;border-left:1px solid var(--border);padding:18px 14px;z-index:20}.widgets-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.widgets-head h2{font-size:13px;margin:0}.customize{border:1px solid #a7dc66;color:#438c18;background:#f3ffe6;border-radius:7px;padding:6px 9px;font-size:9px}.widget{padding:12px;margin-bottom:10px}.widget-title{font-size:10px;font-weight:800;display:flex;align-items:center;gap:7px;margin-bottom:10px}.widget-title .green{color:#58ad25}.widget-title .view{margin-left:auto}.users-widget{display:flex;gap:14px}.users-total{min-width:68px;text-align:center;padding-right:12px;border-right:1px solid var(--border)}.users-total .big,.hours .big{font-size:19px;font-weight:800}.small,.muted,.sub,.timer-sub{font-size:8px;color:var(--muted)}.status-list{flex:1}.status-row,.event-row,.stock-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px;font-size:8px;padding:3px 0}.work-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}.on-pill{background:#e1f7e5;color:#188143;border-radius:999px;padding:4px 7px;font-size:8px;font-weight:800}.timer{font-size:16px;font-weight:800}.stop,.req{border:0;border-radius:6px;background:#e95050;color:#fff;padding:6px 9px;font-size:8px;font-weight:700}.hours{text-align:center}.bulletin-body{display:flex;gap:9px}.thumb{width:72px;height:46px;border-radius:7px;background:#dde4e9;display:grid;place-items:center;font-size:7px;color:#778292}.bulletin-copy{font-size:8px;line-height:1.45}.leave-body{display:flex;align-items:center;justify-content:space-between;gap:8px}.leave-copy{font-size:8px}.req{background:var(--brand);color:#23310f}.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.quick-btn{text-align:center;font-size:8px;font-weight:700;color:#4f5b67}.qicon{height:42px;border-radius:8px;background:#e7f8d5;color:#579b2a;display:grid;place-items:center;font-size:16px;margin-bottom:4px}.quick-btn.purple .qicon{background:#eee2fb;color:#7950ad}.quick-btn.orange .qicon{background:#fff0dc;color:#ce791c}.quick-btn.teal .qicon{background:#def5f2;color:#248d83}.low{color:#d93e3e;font-weight:700}.page-actions{display:flex;gap:8px;align-items:center}.btn-mad{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:7px;padding:7px 11px;font-size:9px;font-weight:700;transition:.16s}.btn-mad:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(16,24,40,.08)}.btn-mad.primary{background:var(--brand);border-color:var(--brand);color:#23310f}.btn-mad.danger{color:#b93333;border-color:#efc4c4;background:#fff8f8}.mad-filter-grid,.filter-card{display:grid}.mad-filter-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.filter-card{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:10px 12px;gap:5px}.filter-card label{font-size:8px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:800}.form-select,.form-control,.filter-card select,.filter-card input{min-height:34px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text);font-size:10px}.mad-datatable{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;overflow:hidden}.mad-table-shell{background:transparent;border:0;padding:0}.dt-container{font-size:10px}.dt-container .dt-layout-row{margin:0 0 12px;gap:10px;align-items:center}.dt-container .dt-layout-row:last-child{margin:12px 0 0}.dt-container .dt-buttons{display:flex;gap:7px;flex-wrap:wrap}.dt-container .dt-button,.dt-container button.dt-button{border:1px solid var(--border)!important;background:var(--surface)!important;color:var(--text)!important;border-radius:7px!important;padding:7px 10px!important;font-size:9px!important;box-shadow:none!important;margin:0!important}.dt-container .dt-search{margin-left:auto}.dt-container .dt-search input{margin-left:6px;border:1px solid var(--border);border-radius:7px;padding:7px 9px;background:var(--surface);color:var(--text);min-width:190px}.dt-container .dt-length select{border:1px solid var(--border);border-radius:7px;padding:5px 24px 5px 7px;background-color:var(--surface);color:var(--text)}.dt-container .dt-info{color:var(--muted);font-size:9px}.dt-container .dt-paging{margin-left:auto}.dt-container .dt-paging .dt-paging-button{min-width:30px;height:30px;border:1px solid var(--border)!important;border-radius:7px!important;margin-left:6px!important;background:var(--surface)!important;color:var(--text)!important}.dt-container .dt-paging .dt-paging-button.current{background:var(--brand)!important;border-color:var(--brand)!important;color:#23310f!important}.data-table thead tr:first-child th{background:#f7f9fb;color:#687384}.data-table thead tr:nth-child(2) th{padding:7px 10px;background:#fbfcfd}.data-table thead input,.data-table thead select{width:100%;min-height:28px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);font-size:8px;padding:4px 6px}.table-action{border:0;background:transparent;color:#697386}.kanban-board-v10{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 14px;scrollbar-width:thin}.kanban-col-v10{flex:0 0 260px;background:#f5f7f9;border:1px solid var(--border);border-radius:11px;overflow:hidden}.kanban-head-v10{height:42px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:800;border-bottom:1px solid var(--border)}.kanban-drop{min-height:210px;padding:10px}.task-card-v10{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:11px;margin-bottom:9px;box-shadow:0 2px 6px rgba(16,24,40,.04);cursor:grab}.task-card-v10:active{cursor:grabbing}.task-top{display:flex;justify-content:space-between;gap:8px;font-size:10px;font-weight:800}.task-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;color:var(--muted);font-size:8px}.load-more{width:100%;border:0;background:transparent;color:#5a982d;font-size:9px;font-weight:700;padding:8px}.calendar-panel-v10,.timeline-panel-v10{padding:14px}.timeline-tools,.timeline-legend,.timeline-bottom{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.timeline-legend{font-size:8px;color:var(--muted);margin:8px 0 12px}.tl-header,.tl-row{display:grid;grid-template-columns:180px 105px 82px 82px minmax(680px,1fr);min-width:1120px}.tl-header>div{background:#f7f9fb;border:1px solid var(--border);border-right:0;padding:8px;font-size:8px;font-weight:800}.tl-header>div:last-child{border-right:1px solid var(--border)}.tl-row>div{border-left:1px solid var(--border);border-bottom:1px solid var(--border);padding:8px;font-size:8px}.tl-row>div:last-child{border-right:1px solid var(--border)}.tl-track{position:relative;height:28px;background:repeating-linear-gradient(90deg,transparent 0,transparent 31px,#edf0f3 32px)}.tl-bar{position:absolute;top:5px;height:18px;display:flex;border-radius:5px;overflow:hidden}.seg{height:100%;min-width:22px}.seg-todo{background:var(--blue)}.seg-progress{background:var(--amber)}.seg-review{background:var(--purple)}.seg-revision{background:var(--orange)}.seg-onrevision{background:var(--gold)}.seg-done{background:var(--green)}.today-line{position:absolute;top:0;bottom:0;width:2px;background:#e24b4b}.detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.detail-box{border:1px solid var(--border);border-radius:9px;padding:10px}.detail-box .cap{font-size:8px;color:var(--muted);text-transform:uppercase}.detail-box .val{font-size:10px;font-weight:700;margin-top:3px}.workflow-tabs{display:flex;gap:8px}.workflow-tab{border:1px solid var(--border);background:var(--surface);border-radius:9px;padding:9px 14px;font-size:9px}.workflow-tab.active{border-color:#9fdc63;box-shadow:0 0 0 2px rgba(142,234,32,.14)}.form-card{padding:14px}.form-card h3{font-size:11px}.modal-content{border:0;border-radius:14px;background:var(--surface);color:var(--text);box-shadow:0 24px 70px rgba(0,0,0,.22)}.modal-header,.modal-footer{border-color:var(--border)}.modal.fade .modal-dialog{transform:translateY(12px) scale(.985);transition:.2s ease}.modal.show .modal-dialog{transform:none}.toast{position:fixed;right:20px;bottom:20px;z-index:100;display:none}.toast.show{display:block}.app.sidebar-collapsed{grid-template-columns:72px minmax(0,1fr) 310px}.app.sidebar-collapsed .brand-title,.app.sidebar-collapsed .brand-sub,.app.sidebar-collapsed .nav-item span,.app.sidebar-collapsed .nav-parent span,.app.sidebar-collapsed .chev{display:none}.app.sidebar-collapsed .nav-item,.app.sidebar-collapsed .nav-parent{justify-content:center;padding:0}.app.sidebar-collapsed .subnav .nav-item{padding:0}.app.sidebar-collapsed .brand-row{justify-content:center;width:100%} #pageContent{flex:1 1 auto;min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} body.dark{--bg:#151a1d;--surface:#20262a;--surface2:#252c30;--border:#343d42;--text:#eef3f5;--muted:#9ba8ae;--shadow:0 10px 28px rgba(0,0,0,.18)}body.dark .widgets{background:#191f22}body.dark .kpi{color:#17211c}body.dark .tasks-table th,body.dark .data-table th,body.dark .tl-header>div{background:#262d31;color:#c9d2d6}body.dark .data-table thead tr:nth-child(2) th{background:#22282c}body.dark .kanban-col-v10{background:#1b2124}body.dark .btn-mad.danger{background:#2b2020}body.dark .quick-btn{color:#d7dfe2}body.dark .hint{background:#1b2023}body.dark .form-select,body.dark .form-control{color-scheme:dark} @keyframes pop{from{opacity:0;transform:translateY(-5px) scale(.98)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}@media(max-width:1250px){.app{grid-template-columns:220px minmax(0,1fr)}.widgets{display:none}.kpis{grid-template-columns:repeat(2,1fr)}}@media(max-width:800px){.app,.app.sidebar-collapsed{grid-template-columns:1fr}.sidebar{position:fixed;left:-260px;width:250px;transition:left .2s}.mobile-sidebar-open .sidebar{left:0}.topbar{padding:0 12px}.header-user-text,.hint{display:none}.content{padding:18px 12px 0}.kpis,.lower-grid,.mad-filter-grid,.detail-grid{grid-template-columns:1fr}.hero,.page-head,.mad-page-head{flex-direction:column}.date-block{text-align:left}.quick{grid-template-columns:repeat(2,1fr)}} /* v24 — true light/dark toggle */ .theme-switch{ margin-left:auto;width:58px;height:30px;padding:3px;border:1px solid var(--border);border-radius:999px; position:relative;display:block;cursor:pointer;background:#eef2f5;color:#f2a51a;overflow:hidden; transition:background-color .28s ease,border-color .28s ease,box-shadow .2s ease,transform .14s ease; } .theme-switch:hover{box-shadow:0 4px 14px rgba(16,24,40,.10)} .theme-switch:active{transform:scale(.96)} .theme-thumb{ position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center; background:#fff;box-shadow:0 2px 7px rgba(16,24,40,.18); transform:translateX(0);transition:transform .34s cubic-bezier(.2,.85,.25,1.1),background-color .28s ease,color .28s ease; } .theme-thumb i{font-size:11px;transition:transform .3s ease,opacity .16s ease} .theme-switch.is-dark{background:#252d32;border-color:#3a454b;color:#eaf0f3} .theme-switch.is-dark .theme-thumb{transform:translateX(28px);background:#151b1f;color:#eaf0f3} .theme-switch.icon-changing .theme-thumb i{transform:scale(.45) rotate(90deg);opacity:0} body.theme-changing,body.theme-changing .topbar,body.theme-changing .widgets,body.theme-changing .panel,body.theme-changing .widget,body.theme-changing .search,body.theme-changing .content,body.theme-changing .workspace{ transition:background-color .32s ease,color .32s ease,border-color .32s ease!important; } @media (prefers-reduced-motion:reduce){ .theme-switch,.theme-switch *{transition:none!important} body.theme-changing,body.theme-changing *{transition:none!important} } /* v25 — profile lives in sidebar only */ .sidebar-profile{position:relative;margin-top:auto;min-height:58px;padding:9px 10px;display:grid;grid-template-columns:34px minmax(0,1fr) 16px;align-items:center;gap:9px;border-top:1px solid rgba(255,255,255,.08);cursor:pointer;color:#eef2f3;transition:background .18s ease,border-color .18s ease} .sidebar-profile:hover{background:rgba(255,255,255,.05)} .sidebar-profile .avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#1d2b10;font-size:10px;font-weight:800} .sidebar-profile-text{min-width:0}.sidebar-profile .header-user-name{font-size:10px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-profile .header-user-email{font-size:8px;color:#aeb7ba;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.sidebar-profile-chevron{font-size:9px;color:#9ea8ab;transition:transform .18s ease}.sidebar-profile[aria-expanded="true"] .sidebar-profile-chevron{transform:rotate(180deg)} .sidebar-profile-menu{left:0!important;right:auto!important;top:auto!important;bottom:calc(100% + 7px)!important;width:100%!important;min-width:190px;transform-origin:bottom left} .app.sidebar-collapsed .sidebar-profile{grid-template-columns:1fr;padding:9px 0;justify-items:center}.app.sidebar-collapsed .sidebar-profile-text,.app.sidebar-collapsed .sidebar-profile-chevron{display:none}.app.sidebar-collapsed .sidebar-profile-menu{left:52px!important;bottom:0!important;width:190px!important} \n\n/* v26 — corrected sidebar collapse + profile dropdown */ .app{transition:grid-template-columns .22s ease} .sidebar{transition:width .22s ease,padding .22s ease} .app.sidebar-collapsed .sidebar{padding-left:10px;padding-right:10px;overflow:visible} .app.sidebar-collapsed .brand{padding-left:0;padding-right:0} .app.sidebar-collapsed .brand-mark{flex:0 0 auto} .app.sidebar-collapsed .nav{align-items:stretch} .app.sidebar-collapsed .nav-group{width:100%} .app.sidebar-collapsed .nav-item,.app.sidebar-collapsed .nav-parent{width:100%;min-height:40px;justify-content:center;gap:0;padding-left:0;padding-right:0} .app.sidebar-collapsed .nav-item i,.app.sidebar-collapsed .nav-parent .left i{width:20px;margin:0;font-size:14px} .app.sidebar-collapsed .nav-parent .left{gap:0;justify-content:center} .app.sidebar-collapsed .subnav{display:none!important} .sidebar-profile-menu.show{display:block;animation:profileDropUp .16s ease both} .sidebar-profile-menu button{display:flex;align-items:center;gap:9px;cursor:pointer} @keyframes profileDropUp{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}} .app.sidebar-collapsed .sidebar-profile{width:100%;min-height:54px;border-radius:9px;border-top:1px solid rgba(255,255,255,.08)} .app.sidebar-collapsed .sidebar-profile-menu{position:absolute;left:calc(100% + 10px)!important;bottom:0!important;top:auto!important;width:170px!important;min-width:170px!important} @media(max-width:800px){.app.sidebar-collapsed .sidebar{padding-left:12px;padding-right:12px}.app.sidebar-collapsed .brand-title,.app.sidebar-collapsed .brand-sub,.app.sidebar-collapsed .nav-item span,.app.sidebar-collapsed .nav-parent span,.app.sidebar-collapsed .chev,.app.sidebar-collapsed .sidebar-profile-text,.app.sidebar-collapsed .sidebar-profile-chevron{display:initial}.app.sidebar-collapsed .subnav{display:flex!important}} /* v27: collapsed sidebar exposes nested destinations as icon-only items. */ @media (min-width:801px){ .app.sidebar-collapsed .nav-group > .nav-parent{display:none} .app.sidebar-collapsed .nav-group > .subnav{display:flex!important;flex-direction:column;gap:2px} .app.sidebar-collapsed .nav-group > .subnav .nav-item{display:flex;min-height:40px;width:100%;justify-content:center;padding:0;gap:0} .app.sidebar-collapsed .nav-group > .subnav .nav-item i{width:20px;margin:0;font-size:14px} .app.sidebar-collapsed .nav-group > .subnav .nav-item span{display:none} } /* v28 — collapsed sidebar tooltips */ @media (min-width:801px){ .app.sidebar-collapsed .nav-item[data-tooltip], .app.sidebar-collapsed .sidebar-profile[data-tooltip]{position:relative;overflow:visible} .app.sidebar-collapsed .nav-item[data-tooltip]::after, .app.sidebar-collapsed .sidebar-profile[data-tooltip]::after{ content:attr(data-tooltip);position:absolute;left:calc(100% + 12px);top:50%;transform:translate(4px,-50%); z-index:1000;pointer-events:none;white-space:nowrap;padding:7px 9px;border-radius:7px; background:#11181c;color:#fff;border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 22px rgba(0,0,0,.2); font-size:10px;font-weight:700;line-height:1;letter-spacing:.01em;opacity:0;visibility:hidden; transition:opacity .14s ease,transform .14s ease,visibility .14s ease; } .app.sidebar-collapsed .nav-item[data-tooltip]:hover::after, .app.sidebar-collapsed .nav-item[data-tooltip]:focus-visible::after, .app.sidebar-collapsed .sidebar-profile[data-tooltip]:hover::after, .app.sidebar-collapsed .sidebar-profile[data-tooltip]:focus-visible::after{ opacity:1;visibility:visible;transform:translate(0,-50%); } .app.sidebar-collapsed .sidebar-profile[aria-expanded="true"]::after{opacity:0;visibility:hidden} } /* v29 widget customization */ .widget[hidden]{display:none!important}.widgets.customizing .widget:not([hidden]){cursor:default}.widgets.customizing .widget-title{cursor:grab;user-select:none}.widgets.customizing .widget-title:active{cursor:grabbing}.widgets.customizing .widget{outline:1px dashed rgba(112,180,50,.38);outline-offset:2px}.widget-sort-ghost{opacity:.35}.widget-sort-chosen{box-shadow:0 12px 30px rgba(16,24,40,.14);transform:scale(1.01)}.widget-customize-modal{overflow:hidden}.widget-customize-sub{font-size:10px;color:var(--muted);margin-top:3px}.widget-customize-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:2px 0 14px;border-bottom:1px solid var(--border)}.widget-customize-toolbar>div{display:flex;flex-direction:column;font-size:11px}.widget-customize-toolbar>div span{font-size:9px;color:var(--muted);margin-top:2px}.drag-toggle{display:flex;align-items:center;gap:9px;cursor:pointer}.drag-toggle input,.widget-choice input{position:absolute;opacity:0;pointer-events:none}.drag-toggle>span:last-child{display:flex;flex-direction:column;font-size:10px}.drag-toggle small{font-size:8px;color:var(--muted);font-weight:400}.drag-switch,.visibility-switch{width:34px;height:19px;border-radius:999px;background:#d6dce0;position:relative;transition:.2s ease;flex:0 0 auto}.drag-switch:after,.visibility-switch:after{content:'';position:absolute;width:15px;height:15px;left:2px;top:2px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.2s ease}.drag-toggle input:checked+.drag-switch,.widget-choice input:checked+.visibility-switch{background:var(--brand)}.drag-toggle input:checked+.drag-switch:after,.widget-choice input:checked+.visibility-switch:after{transform:translateX(15px);background:#26320f}.widget-choice-list{display:flex;flex-direction:column;padding-top:8px}.widget-choice{min-height:46px;display:flex;align-items:center;gap:10px;padding:7px 5px;border-bottom:1px solid var(--border);cursor:pointer}.widget-choice:last-child{border-bottom:0}.widget-choice:hover{background:var(--surface2);border-radius:8px}.widget-choice-icon{width:24px;text-align:center;color:var(--muted);font-size:10px}.widget-choice-name{flex:1;font-size:10px;font-weight:700}.visibility-switch{margin-left:auto}body.dark .drag-switch,body.dark .visibility-switch{background:#3b454a}@media(max-width:560px){.widget-customize-toolbar{align-items:flex-start;flex-direction:column}} /* Shared sidebar backdrop: hidden on desktop; enabled only by the mobile media rule below. */ .sidebar-backdrop { display: none; } /* v31 — interaction motion + pointer affordances */ :where(button,[role="button"],a[href],.nav-item,.nav-parent,.sidebar-profile,.widget-choice,.drag-toggle,.theme-switch,.hamburger,.icon-btn,.btn,.action-btn,.quick-action,.customize-btn){cursor:pointer} :where(button,[role="button"],a[href],.nav-item,.nav-parent,.sidebar-profile,.widget-choice,.drag-toggle,.theme-switch,.hamburger,.icon-btn,.btn,.action-btn,.quick-action,.customize-btn){ transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease,opacity .18s ease; } :where(button,[role="button"],a[href],.icon-btn,.btn,.action-btn,.quick-action,.customize-btn):not(:disabled):hover{transform:translateY(-1px)} :where(button,[role="button"],a[href],.icon-btn,.btn,.action-btn,.quick-action,.customize-btn):not(:disabled):active{transform:translateY(0) scale(.97)} :where(button,[role="button"],a[href],.nav-item,.nav-parent,.sidebar-profile,.widget-choice,.drag-toggle,.theme-switch,.hamburger):focus-visible{outline:2px solid var(--brand);outline-offset:2px} button:disabled,[aria-disabled="true"]{cursor:not-allowed!important;opacity:.55} /* navigation should feel clickable without jumping the whole layout */ .nav-item:hover,.nav-parent:hover,.sidebar-profile:hover{transform:translateX(2px)} .app.sidebar-collapsed .nav-item:hover,.app.sidebar-collapsed .sidebar-profile:hover{transform:scale(1.05)} /* draggable widgets: grab only where dragging is allowed */ .widgets.customizing .widget-title{cursor:grab!important} .widgets.customizing .widget-title:active,.widgets.customizing .widget-sort-chosen .widget-title{cursor:grabbing!important} .widgets.customizing .widget{transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease,outline-color .18s ease} .widgets.customizing .widget:hover{box-shadow:0 10px 24px rgba(16,24,40,.10)} .widget-sort-ghost{cursor:grabbing!important;opacity:.32!important} .widget-sort-chosen,.widget-sort-drag{cursor:grabbing!important;transform:scale(1.015);box-shadow:0 16px 34px rgba(16,24,40,.16)!important} /* controls that are not interactive must keep the normal cursor */ input:not([type="checkbox"]):not([type="radio"]),textarea,[contenteditable="true"]{cursor:text} select{cursor:pointer} @media (prefers-reduced-motion:reduce){ :where(button,[role="button"],a[href],.nav-item,.nav-parent,.sidebar-profile,.widget-choice,.drag-toggle,.theme-switch,.hamburger,.icon-btn,.btn,.action-btn,.quick-action,.customize-btn), .widgets.customizing .widget{transition:none!important;transform:none!important} } /* v32 — Quick Add interaction feedback */ .quick .quick-btn { cursor: pointer; user-select: none; position: relative; transform: translateY(0) scale(1); transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease, filter 160ms ease; will-change: transform; } .quick .quick-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(15, 23, 42, .10); filter: brightness(1.02); } .quick .quick-btn:active { transform: translateY(0) scale(.97); box-shadow: 0 3px 8px rgba(15, 23, 42, .08); transition-duration: 70ms; } .quick .quick-btn:focus-visible { outline: 2px solid var(--green, #18c964); outline-offset: 3px; } .quick .quick-btn .qicon { pointer-events: none; transition: transform 180ms cubic-bezier(.2,.8,.2,1); } .quick .quick-btn:hover .qicon { transform: translateY(-1px) scale(1.08); } .quick .quick-btn:active .qicon { transform: scale(.94); } @media (prefers-reduced-motion: reduce) { .quick .quick-btn, .quick .quick-btn .qicon { transition: none; } .quick .quick-btn:hover, .quick .quick-btn:active, .quick .quick-btn:hover .qicon, .quick .quick-btn:active .qicon { transform: none; } } /* v33 — Quick Add buttons: explicit clickable surface + visible motion */ .quick .quick-btn, .quick .quick-btn * { cursor: pointer !important; } .quick .quick-btn { border-radius: 10px; padding: 5px 4px 7px; transition: transform 180ms cubic-bezier(.2,.8,.2,1), background-color 180ms ease, box-shadow 180ms ease; } .quick .quick-btn .qicon { pointer-events: auto; transform-origin: 50% 55%; transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 180ms ease, filter 180ms ease; } .quick .quick-btn:hover { transform: translateY(-2px); background: var(--surface2); box-shadow: 0 7px 16px rgba(15,23,42,.09); } .quick .quick-btn:hover .qicon { transform: translateY(-3px) scale(1.08) rotate(-2deg); box-shadow: 0 6px 12px rgba(15,23,42,.10); } .quick .quick-btn:active { transform: translateY(1px) scale(.96); box-shadow: none; } .quick .quick-btn:active .qicon { transform: translateY(1px) scale(.90); } .quick .quick-btn.quick-pulse .qicon { animation: madQuickPulse 320ms cubic-bezier(.2,.8,.2,1); } @keyframes madQuickPulse { 0% { transform: scale(1); } 45% { transform: scale(.86); } 75% { transform: scale(1.12); } 100% { transform: scale(1); } } /* v33 — Needs Attention: preserve badge identity and contrast in dark mode */ body.dark .att-card { border: 1px solid transparent; } body.dark .att-card.red { background:#3a2424; border-color:#673333; color:#ffb4ae; } body.dark .att-card.orange { background:#382c1d; border-color:#624a27; color:#ffc978; } body.dark .att-card.pink { background:#3a222b; border-color:#653345; color:#ffafc5; } body.dark .att-card.purple { background:#30263e; border-color:#51406a; color:#d9bcff; } body.dark .att-card .n, body.dark .att-card .t { color:inherit; } /* v34 — icon-only Quick Add buttons with accessible tooltips */ .quick{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .quick .quick-btn{min-width:0;display:grid;place-items:center;position:relative;overflow:visible} .quick .quick-btn .qicon{width:100%;height:44px;margin:0;cursor:pointer} .quick .quick-btn[data-tooltip]::before{ content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,5px); z-index:1200;pointer-events:none;white-space:nowrap;padding:6px 8px;border-radius:6px; background:#151a1d;color:#fff;font-size:8px;font-weight:700;line-height:1;letter-spacing:.01em; opacity:0;visibility:hidden;box-shadow:0 6px 18px rgba(0,0,0,.16); transition:opacity .14s ease,transform .14s ease,visibility .14s ease; } .quick .quick-btn[data-tooltip]::after{ content:"";position:absolute;left:50%;bottom:calc(100% + 3px);transform:translateX(-50%); border:5px solid transparent;border-top-color:#151a1d;opacity:0;visibility:hidden;pointer-events:none; transition:opacity .14s ease,visibility .14s ease; } .quick .quick-btn[data-tooltip]:hover::before,.quick .quick-btn[data-tooltip]:focus-visible::before{opacity:1;visibility:visible;transform:translate(-50%,0)} .quick .quick-btn[data-tooltip]:hover::after,.quick .quick-btn[data-tooltip]:focus-visible::after{opacity:1;visibility:visible} body.dark .quick .quick-btn[data-tooltip]::before{background:#f3f6f7;color:#182024} body.dark .quick .quick-btn[data-tooltip]::after{border-top-color:#f3f6f7} @media(max-width:800px){.quick{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(prefers-reduced-motion:reduce){.quick .quick-btn[data-tooltip]::before,.quick .quick-btn[data-tooltip]::after{transition:none!important}} /* v35 — unified dark-mode semantic tint system (Needs Attention approach) */ body.dark .kpi{color:var(--text);border-width:1px} body.dark .kpi.green{background:#203527;border-color:#345d40} body.dark .kpi.amber{background:#382d1c;border-color:#624b28} body.dark .kpi.purple{background:#30263e;border-color:#51406a} body.dark .kpi.red{background:#3a2424;border-color:#673333} body.dark .kpi .icon{background:rgba(255,255,255,.065);color:inherit} body.dark .kpi.green .icon{color:#9ee6a9} body.dark .kpi.amber .icon{color:#ffc978} body.dark .kpi.purple .icon{color:#d9bcff} body.dark .kpi.red .icon{color:#ffb4ae} body.dark .kpi .desc{color:#aeb9be} body.dark .badge.progress,body.dark .st-progress,body.dark .status-progress{background:#382d1c;color:#ffc978;border:1px solid #624b28} body.dark .badge.review,body.dark .st-review,body.dark .status-review{background:#30263e;color:#d9bcff;border:1px solid #51406a} body.dark .badge.todo,body.dark .st-todo,body.dark .status-todo{background:#1f3043;color:#9dcbff;border:1px solid #315375} body.dark .badge.revision,body.dark .st-revision,body.dark .status-revision{background:#3b291e;color:#ffbc82;border:1px solid #68452d} body.dark .st-onrevision,body.dark .status-onrevision{background:#39331d;color:#f4da77;border:1px solid #62592d} body.dark .st-done,body.dark .status-done{background:#203527;color:#9ee6a9;border:1px solid #345d40} body.dark .st-draft,body.dark .status-draft,body.dark .status-archive{background:#293137;color:#c3cdd2;border:1px solid #414c53} body.dark .status-hold{background:#3a2424;color:#ffb4ae;border:1px solid #673333} body.dark .on-pill{background:#203527;color:#9ee6a9;border:1px solid #345d40} body.dark .customize{background:#24351f;color:#aee77b;border-color:#466b35} body.dark .req{background:#2c431f;color:#baf07e;border:1px solid #4d7338} /* Quick Add is a single colored control: remove the old white/button base. */ .quick .quick-btn{appearance:none;-webkit-appearance:none;border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;border-radius:8px;color:inherit} .quick .quick-btn::marker{display:none} body.dark .quick .quick-btn .qicon{border:1px solid transparent;box-shadow:none} body.dark .quick .quick-btn:not(.purple):not(.orange):not(.teal) .qicon{background:#26391f;color:#a8e96f;border-color:#405f31} body.dark .quick .quick-btn.purple .qicon{background:#30263e;color:#d9bcff;border-color:#51406a} body.dark .quick .quick-btn.orange .qicon{background:#382d1c;color:#ffc978;border-color:#624b28} body.dark .quick .quick-btn.teal .qicon{background:#1d3735;color:#83ddd4;border-color:#315d59} /* Keep semantic dots/links readable without turning surfaces white. */ body.dark .panel-link,body.dark .view,body.dark .details{color:#9bdb65} body.dark .deadline-red,body.dark .low{color:#ff8f8f} body.dark .thumb{background:#293238;color:#aeb9be} /* v36 — sidebar profile dropdown matches sidebar navigation hover language */ .sidebar-profile-menu{ padding:6px!important; background:#222729!important; border:1px solid rgba(255,255,255,.08)!important; border-radius:10px!important; box-shadow:0 12px 30px rgba(0,0,0,.24)!important; overflow:hidden; } .sidebar-profile-menu button{ width:100%; min-height:38px; padding:0 11px!important; border:0!important; border-radius:7px!important; background:transparent!important; color:#d7dcde!important; font-size:11px; font-weight:600; transition:background .18s ease,color .18s ease,transform .18s ease!important; } .sidebar-profile-menu button i{width:16px;text-align:center;color:#aeb7ba;transition:color .18s ease} .sidebar-profile-menu button:hover, .sidebar-profile-menu button:focus-visible{ background:rgba(255,255,255,.055)!important; color:#fff!important; transform:none!important; } .sidebar-profile-menu button:hover i, .sidebar-profile-menu button:focus-visible i{color:#fff} .sidebar-profile-menu button:active{transform:scale(.985)!important} /* v37 — Work Mode uses a single ON/OFF toggle, matching the dark-mode interaction language. */ .work-mode-title{margin-bottom:8px} .work-mode-title .work-switch{margin-left:auto} .work-time{padding-top:2px} .work-switch{ width:64px;height:28px;padding:3px;border:1px solid var(--border);border-radius:999px; position:relative;display:flex;align-items:center;justify-content:space-between; background:#eef2f5;color:#7a8791;overflow:hidden;cursor:pointer; transition:background-color .28s ease,border-color .28s ease,box-shadow .18s ease,transform .14s ease; } .work-switch:hover{box-shadow:0 4px 12px rgba(16,24,40,.10)} .work-switch:active{transform:scale(.96)} .work-switch-label{position:relative;z-index:1;width:26px;text-align:center;font-size:7px;font-weight:800;line-height:20px;transition:color .25s ease,opacity .25s ease} .work-switch .work-off{color:#65727c;opacity:0} .work-switch .work-on{color:#65727c;opacity:1} .work-switch-thumb{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#75818a;box-shadow:0 2px 7px rgba(16,24,40,.18);transform:translateX(0);transition:transform .34s cubic-bezier(.2,.85,.25,1.1),background-color .28s ease,color .28s ease} .work-switch-thumb i{font-size:8px;transition:transform .28s ease,opacity .16s ease} .work-switch.is-on{background:rgba(142,234,32,.18);border-color:rgba(109,184,29,.5)} .work-switch.is-on .work-switch-thumb{transform:translateX(36px);background:var(--brand);color:#23310f} .work-switch.is-on .work-off{opacity:1;color:#4b7724} .work-switch.is-on .work-on{opacity:0} .work-switch.switching .work-switch-thumb i{transform:scale(.6) rotate(20deg);opacity:.55} body.dark .work-switch{background:#252d32;border-color:#3a454b} body.dark .work-switch .work-on,body.dark .work-switch .work-off{color:#9ba8ae} body.dark .work-switch.is-on{background:#203527;border-color:#345d40} body.dark .work-switch.is-on .work-off{color:#9ee6a9} body.dark .work-switch .work-switch-thumb{background:#151b1f;color:#c9d2d6} body.dark .work-switch.is-on .work-switch-thumb{background:var(--brand);color:#23310f} @media(prefers-reduced-motion:reduce){.work-switch,.work-switch *{transition:none!important}} /* v38 — profile trigger hover uses the same rounded treatment as sidebar menu items. */ .sidebar-profile{ border-top:0!important; border-radius:7px!important; margin-top:auto; position:relative; isolation:isolate; } .sidebar-profile::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:1px; background:rgba(255,255,255,.08); pointer-events:none; } .sidebar-profile:hover, .sidebar-profile:focus-visible, .sidebar-profile[aria-expanded="true"]{ background:rgba(255,255,255,.055)!important; border-radius:7px!important; } .app.sidebar-collapsed .sidebar-profile{ border-top:0!important; border-radius:7px!important; } @media(max-width:800px){ .app.sidebar-collapsed .sidebar-profile{border-radius:7px!important} } /* v40 — viewport-fixed dashboard footer, no separator */ .content{padding-bottom:52px} .footer{ position:fixed; left:250px; right:310px; bottom:0; z-index:18; min-height:46px; margin:0; padding:0 24px; background:var(--bg); border-top:0; } .app.sidebar-collapsed .footer{left:72px} .footer .tagline{font-weight:700;letter-spacing:.02em} @media(max-width:1250px){.footer{right:0;left:220px}.app.sidebar-collapsed .footer{left:72px}} @media(max-width:800px){.content{padding-bottom:58px}.footer,.app.sidebar-collapsed .footer{left:0;right:0;padding:0 14px;min-height:48px}.footer .tagline{margin-left:auto}} /* v42 — shared tooltips for all native buttons */ .mad-button-tooltip { position: fixed; z-index: 3000; max-width: 220px; padding: 6px 9px; border-radius: 7px; background: #172126; color: #ffffff; font-size: 11px; font-weight: 700; line-height: 1.2; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity 140ms ease, transform 140ms ease; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18); } .mad-button-tooltip.is-visible { opacity: 1; transform: translateY(0); } body.dark .mad-button-tooltip { background: #f3f6f7; color: #182024; } @media (prefers-reduced-motion: reduce) { .mad-button-tooltip { transition: none; } } /* v45 — mobile sidebar: dedicated off-canvas behavior, independent of desktop collapse. */ @media (max-width: 800px) { .app, .app.sidebar-collapsed { grid-template-columns: minmax(0, 1fr); } .sidebar, .app.sidebar-collapsed .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: min(280px, 86vw); height: 100dvh; padding: 0 12px 16px; overflow-x: hidden; overflow-y: auto; transform: translate3d(-105%, 0, 0); transition: transform 240ms cubic-bezier(.2, .8, .2, 1); box-shadow: 14px 0 34px rgba(0, 0, 0, .22); z-index: 1002; } body.mobile-sidebar-open .sidebar, body.mobile-sidebar-open .app.sidebar-collapsed .sidebar { transform: translate3d(0, 0, 0); } .sidebar-backdrop { position: fixed; inset: 0; display: block; width: 100%; height: 100%; border: 0; padding: 0; background: rgba(15, 23, 42, .48); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 220ms ease, visibility 220ms ease; z-index: 1001; } body.mobile-sidebar-open .sidebar-backdrop { opacity: 1; visibility: visible; pointer-events: auto; } body.mobile-sidebar-open { overflow: hidden; overscroll-behavior: contain; } .app.sidebar-collapsed .brand-title, .app.sidebar-collapsed .brand-sub, .app.sidebar-collapsed .nav-item span, .app.sidebar-collapsed .nav-parent span, .app.sidebar-collapsed .chev, .app.sidebar-collapsed .sidebar-profile-text, .app.sidebar-collapsed .sidebar-profile-chevron { display: initial; } .app.sidebar-collapsed .nav-group > .nav-parent { display: flex; } .app.sidebar-collapsed .nav-group > .subnav { gap: 1px; } .app.sidebar-collapsed .nav-parent:not(.open) + .subnav { display: none !important; } .app.sidebar-collapsed .nav-parent.open + .subnav { display: flex !important; } .app.sidebar-collapsed .nav-group > .subnav .nav-item { min-height: 32px; justify-content: flex-start; gap: 10px; padding: 0 11px 0 36px; } .app.sidebar-collapsed .nav-group > .subnav .nav-item span { display: inline; } .app.sidebar-collapsed .nav-item, .app.sidebar-collapsed .nav-parent { min-height: 38px; justify-content: initial; gap: 10px; padding: 0 11px; } .app.sidebar-collapsed .nav-parent { justify-content: space-between; } .app.sidebar-collapsed .nav-parent .left { justify-content: flex-start; gap: 10px; } .app.sidebar-collapsed .sidebar-profile { grid-template-columns: 34px minmax(0, 1fr) 16px; min-height: auto; padding: 9px 10px; } .app.sidebar-collapsed .sidebar-profile-menu { left: 0 !important; right: 0 !important; bottom: calc(100% + 7px) !important; width: 100% !important; min-width: 0 !important; } .app.sidebar-collapsed .nav-item[data-tooltip]::after, .app.sidebar-collapsed .sidebar-profile[data-tooltip]::after { display: none; } .hamburger { position: relative; z-index: 26; } } /* Standardized View All action links */ .panel-link, .widget .view { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 4px 6px; border-radius: 6px; color: #39961d; text-decoration: none; font-size: 9px; font-weight: 700; cursor: pointer; user-select: none; transition: color 160ms ease, background-color 160ms ease, transform 160ms ease; } .panel-link:hover, .panel-link:focus-visible, .widget .view:hover, .widget .view:focus-visible { color: #2f7f16; background: rgba(142, 234, 32, 0.1); transform: translateX(2px); outline: none; } .panel-link:active, .widget .view:active { transform: translateX(2px) scale(0.96); } [data-theme="dark"] .panel-link:hover, [data-theme="dark"] .panel-link:focus-visible, [data-theme="dark"] .widget .view:hover, [data-theme="dark"] .widget .view:focus-visible { color: var(--brand2); background: rgba(142, 234, 32, 0.12); } @media (prefers-reduced-motion: reduce) { .panel-link, .widget .view { transition: none; } .panel-link:hover, .panel-link:focus-visible, .panel-link:active, .widget .view:hover, .widget .view:focus-visible, .widget .view:active { transform: none; } } /* Add Task modal — dashboard design system */ #staticFormModal .add-task-dialog { --task-modal-pad: 20px; max-width: 1080px; } #staticFormModal .modal-content.add-task-modal { overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18); } #staticFormModal .add-task-modal .modal-header, #staticFormModal .add-task-modal .modal-footer { position: relative; z-index: 2; flex: 0 0 auto; background: var(--surface); opacity: 1; } #staticFormModal .add-task-modal .modal-header { min-height: 62px; padding: 14px var(--task-modal-pad); border-bottom: 1px solid var(--border); } #staticFormModal .add-task-modal .modal-title { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; } #staticFormModal .add-task-modal .modal-body { padding: var(--task-modal-pad); background: var(--bg); } #staticFormModal .add-task-modal .modal-footer { gap: 8px; padding: 12px var(--task-modal-pad); border-top: 1px solid var(--border); } .task-create { display: grid; gap: 16px; } .task-create__section { padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02); } .task-create__section-head, .task-create__section-title-wrap, .task-level-card__identity { display: flex; align-items: center; gap: 11px; } .task-create__section-head { margin-bottom: 18px; } .task-create__section-head--action { justify-content: space-between; gap: 16px; } .task-create__section-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid rgba(121, 220, 25, 0.28); border-radius: 9px; background: rgba(142, 234, 32, 0.12); color: #39961d; font-size: 13px; } .task-create__section h3 { margin: 0; color: var(--text); font-size: 14px; font-weight: 800; } .task-create__section p { margin: 2px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; } .task-create__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .task-create__grid .field--title { grid-column: span 2; } .task-create__grid .field--full { grid-column: 1 / -1; } .task-create .form-label { margin-bottom: 6px; color: var(--text); font-size: 11px; font-weight: 700; } .task-create .required { color: #ef3340; } .task-create .form-control, .task-create .form-select { min-height: 40px; border-color: var(--border); border-radius: 9px; background-color: var(--surface); color: var(--text); font-size: 12px; transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease; } .task-create textarea.form-control { min-height: 86px; resize: vertical; } .task-create .form-control:hover, .task-create .form-select:hover { border-color: color-mix(in srgb, var(--border) 45%, var(--muted)); } .task-create .form-control:focus, .task-create .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(142, 234, 32, 0.14); } .task-create .mad-form-help { margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.4; } .task-create__add-level { flex: 0 0 auto; gap: 6px; } .task-create__levels { display: grid; gap: 10px; } .task-level-card { padding: 10px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .task-level-card:hover { border-color: rgba(142, 234, 32, 0.42); box-shadow: 0 7px 20px rgba(15, 23, 42, 0.05); } .task-level-card__grid { display: grid; grid-template-columns: 130px repeat(4, minmax(0, 1fr)) 34px; gap: 10px; align-items: end; } .task-level-card__identity { min-width: 0; align-self: center; gap: 7px; white-space: nowrap; } .task-level-card__identity strong { color: var(--text); font-size: 10px; font-weight: 800; } .task-level-card .level-no { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 8px; background: var(--brand); color: #17320a; font-size: 10px; font-weight: 900; } .task-level-card__drag, .task-level-card__remove { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid transparent; border-radius: 8px; background: transparent; } .task-level-card__drag { flex: 0 0 24px; width: 24px; color: var(--muted); cursor: grab; } .task-level-card__drag:active { cursor: grabbing; } .task-level-card__drag:hover { background: var(--surface2); color: var(--text); } .task-level-card__remove { color: #ef3340; } .task-level-card__remove:hover { border-color: rgba(239, 51, 64, 0.25); background: rgba(239, 51, 64, 0.09); } .task-level-card--chosen { border-color: rgba(142, 234, 32, 0.7); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12); } .task-level-card--ghost { opacity: 0.35; background: rgba(142, 234, 32, 0.08); } .task-level-card--dragging { cursor: grabbing; transform: scale(1.01); } [data-theme="dark"] #staticFormModal .modal-content.add-task-modal, body.dark #staticFormModal .modal-content.add-task-modal, [data-theme="dark"] #staticFormModal .add-task-modal .modal-header, [data-theme="dark"] #staticFormModal .add-task-modal .modal-footer, body.dark #staticFormModal .add-task-modal .modal-header, body.dark #staticFormModal .add-task-modal .modal-footer { background: #20262a; } [data-theme="dark"] #staticFormModal .add-task-modal .modal-body, body.dark #staticFormModal .add-task-modal .modal-body { background: #151a1d; } [data-theme="dark"] .task-create__section, [data-theme="dark"] .task-level-card, body.dark .task-create__section, body.dark .task-level-card { border-color: #343d42; background: #20262a; } [data-theme="dark"] .task-create__section-icon, body.dark .task-create__section-icon { border-color: rgba(142, 234, 32, 0.24); background: rgba(142, 234, 32, 0.1); color: var(--brand2); } [data-theme="dark"] .task-create .form-control, [data-theme="dark"] .task-create .form-select, body.dark .task-create .form-control, body.dark .task-create .form-select { border-color: #3a454b; background-color: #151a1d; color: #edf4fa; } [data-theme="dark"] .task-create .form-control::placeholder, body.dark .task-create .form-control::placeholder { color: #73808d; } @media (max-width: 991.98px) { .task-level-card__grid { grid-template-columns: 130px repeat(2, minmax(0, 1fr)) 34px; } .task-level-card__grid .field:nth-of-type(3) { grid-column: 2; } .task-level-card__grid .field:nth-of-type(4) { grid-column: 3; } } @media (max-width: 767.98px) { #staticFormModal .add-task-dialog { --task-modal-pad: 14px; width: 100%; max-width: none; min-height: 100%; margin: 0; } #staticFormModal .modal-content.add-task-modal { min-height: 100vh; border: 0; border-radius: 0; } #staticFormModal .add-task-modal .modal-body { flex: 1 1 auto; } .task-create__section { padding: 14px; border-radius: 12px; } .task-create__section-head--action { align-items: flex-start; } .task-create__grid, .task-level-card__grid { grid-template-columns: 1fr; } .task-create__grid .field--project, .task-create__grid .field--title, .task-create__grid .field--full, .task-level-card__grid .field:nth-of-type(3), .task-level-card__grid .field:nth-of-type(4) { grid-column: auto; } .task-level-card__identity { padding-bottom: 2px; } .task-level-card__remove { justify-self: end; } } /* Workflow conditional fields: keep each level to a maximum of two visual rows. */ .task-level-card__conditional { display: grid; grid-column: 2 / -2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; padding-top: 2px; } .task-level-card__conditional[hidden], .task-level-card__conditional .field[hidden] { display: none !important; } .task-level-card__conditional .field:only-child { grid-column: 1 / -1; } @media (max-width: 991.98px) { .task-level-card__conditional { grid-column: 2 / -2; } } @media (max-width: 767.98px) { .task-level-card__conditional { grid-column: auto; grid-template-columns: 1fr; } .task-level-card__conditional .field:only-child { grid-column: auto; } } /* Standard create modal — inherits the approved Add Task modal language */ .standard-create-dialog { max-width: 760px; } .standard-create-modal { overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22); } .standard-create-modal .modal-header, .standard-create-modal .modal-footer { background: var(--surface); } .standard-create-modal .modal-header { padding: 18px 20px; border-bottom: 1px solid var(--border); } .standard-create-modal .modal-title { margin: 0; color: var(--text); font-size: 18px; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; } .standard-create-modal .modal-body { color: var(--text); font-size: 12px; } .standard-create-modal .mad-form-help, .standard-create-modal .text-muted.small { color: var(--muted) !important; font-size: 10px; line-height: 1.4; } .standard-create-modal .modal-body { padding: 18px; background: var(--bg); } .standard-create-modal .modal-footer { padding: 14px 18px; border-top: 1px solid var(--border); } .standard-create__section { padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); } .standard-create__section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .standard-create__section-icon { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(132, 240, 16, 0.35); border-radius: 10px; background: rgba(132, 240, 16, 0.12); color: var(--green-dark); } .standard-create__section-head h3 { margin: 0; font-size: 15px; font-weight: 800; } .standard-create__section-head p { margin: 2px 0 0; color: var(--muted); font-size: 12px; } .inventory-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; } .inventory-mode__button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--muted); font-weight: 800; cursor: pointer; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease; } .inventory-mode__button:hover { transform: translateY(-1px); border-color: rgba(132, 240, 16, 0.55); color: var(--text); } .inventory-mode__button:active { transform: translateY(0) scale(0.98); } .inventory-mode__button.active { border-color: rgba(132, 240, 16, 0.6); background: rgba(132, 240, 16, 0.14); color: var(--green-dark); box-shadow: 0 0 0 1px rgba(132, 240, 16, 0.08); } [data-theme="dark"] .standard-create-modal, [data-theme="dark"] .standard-create-modal .modal-header, [data-theme="dark"] .standard-create-modal .modal-footer, [data-theme="dark"] .standard-create__section, [data-theme="dark"] .inventory-mode__button { background: var(--surface); } [data-theme="dark"] .standard-create__section-icon, [data-theme="dark"] .inventory-mode__button.active { background: rgba(132, 240, 16, 0.12); color: #a7f75a; } @media (max-width: 767.98px) { .standard-create-dialog { width: 100%; max-width: none; height: 100%; margin: 0; } .standard-create-modal { min-height: 100%; border: 0; border-radius: 0; } .standard-create-modal .modal-body { padding: 14px; } .standard-create__section { padding: 14px; } } /* Bootstrap form controls — standardized modal form treatment */ .standard-create-modal .form-label, .add-task-modal .form-label { margin-bottom: 0.4rem; color: var(--text); font-size: 0.72rem; font-weight: 700; } .standard-create-modal .form-control, .standard-create-modal .form-select, .add-task-modal .form-control, .add-task-modal .form-select { min-height: 38px; border-color: var(--border); border-radius: 8px; background-color: var(--surface); color: var(--text); box-shadow: none; font-size: 0.72rem; transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease; } .standard-create-modal textarea.form-control, .add-task-modal textarea.form-control { min-height: auto; resize: vertical; } .standard-create-modal .form-control:focus, .standard-create-modal .form-select:focus, .add-task-modal .form-control:focus, .add-task-modal .form-select:focus { border-color: #8eea20; box-shadow: 0 0 0 0.2rem rgba(142, 234, 32, 0.14); } .standard-create-modal .form-control::file-selector-button, .add-task-modal .form-control::file-selector-button { min-height: 36px; margin: -0.375rem 0.75rem -0.375rem -0.75rem; border: 0; border-right: 1px solid var(--border); background: var(--surface2); color: var(--text); font-weight: 700; transition: background-color 0.16s ease; } .standard-create-modal .form-control:hover:not(:disabled)::file-selector-button, .add-task-modal .form-control:hover:not(:disabled)::file-selector-button { background: rgba(142, 234, 32, 0.12); } .standard-create-modal .form-text, .add-task-modal .form-text { margin-top: 0.35rem; color: var(--muted); font-size: 0.64rem; line-height: 1.4; } .standard-create-modal .form-control:disabled, .standard-create-modal .form-select:disabled, .add-task-modal .form-control:disabled, .add-task-modal .form-select:disabled { background-color: var(--surface2); color: var(--muted); opacity: 1; } .standard-create-modal .inventory-mode .btn { min-height: 38px; border-color: var(--border); color: var(--muted); font-size: 0.72rem; font-weight: 800; box-shadow: none; } .standard-create-modal .inventory-mode .btn:hover { border-color: rgba(142, 234, 32, 0.6); background: rgba(142, 234, 32, 0.08); color: var(--text); } .standard-create-modal .inventory-mode .btn.active { border-color: var(--brand); background: rgba(142, 234, 32, 0.16); color: #4b951f; } [data-theme="dark"] .standard-create-modal .inventory-mode .btn.active { color: #a8f05a; } /* v77 — Add/Edit Task: keep header/footer fixed and scroll long form content */ #staticFormModal .modal-dialog.add-task-dialog { height: calc(100vh - 32px); margin-top: 16px; margin-bottom: 16px; } #staticFormModal .add-task-modal { display: flex; flex-direction: column; max-height: 100%; } #staticFormModal .add-task-modal > form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; } #staticFormModal .add-task-modal .modal-body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; } @media (max-width: 767.98px) { #staticFormModal .modal-dialog.add-task-dialog { height: 100vh; margin: 0; } #staticFormModal .add-task-modal { height: 100vh; max-height: 100vh; } } /* MARK AS DONE — shared Tom Select multi-select */ .ts-wrapper.mad-multiselect .ts-control { position: relative; min-height: 40px; align-items: center; flex-wrap: nowrap; overflow: hidden; } .ts-wrapper.mad-multiselect.mad-multiselect--has-summary:not(.focus) .ts-control > .item, .ts-wrapper.mad-multiselect.mad-multiselect--has-summary:not(.focus) .ts-control > input { visibility: hidden !important; position: absolute !important; pointer-events: none !important; } .ts-wrapper.mad-multiselect.mad-multiselect--has-summary:not(.focus) .ts-control::before { content: attr(data-mad-summary); display: block; min-width: 0; overflow: hidden; color: var(--text); font-size: inherit; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .ts-wrapper.mad-multiselect .ts-control > input::placeholder { color: var(--muted); opacity: 1; } body.dark .ts-wrapper .ts-control, body.dark .ts-wrapper .ts-dropdown { background: var(--surface); border-color: var(--border); color: var(--text); } body.dark .ts-wrapper .ts-dropdown .option.active { background: var(--surface2); color: var(--text); } /* Reviewer selection — shared multi-select with ordered Sequential Reviewer list. */ .reviewer-sequence { display: grid; gap: 6px; margin-top: 8px; } .reviewer-sequence__item { display: grid; grid-template-columns: 24px 24px minmax(0, 1fr); gap: 7px; align-items: center; min-height: 34px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); color: var(--text); } .reviewer-sequence__drag { display: grid; width: 24px; height: 24px; place-items: center; border: 0; background: transparent; color: var(--muted); cursor: grab; } .reviewer-sequence__drag:active { cursor: grabbing; } .reviewer-sequence__number { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 7px; background: var(--brand); color: #17320a; font-size: 10px; font-weight: 900; } .reviewer-sequence__name { min-width: 0; overflow: hidden; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .reviewer-sequence__item--ghost { opacity: .35; } /* v126 — shared responsive hardening for every application page. */ html, body { max-width: 100%; overflow-x: hidden; } #pageContent, .content, .page-head, .mad-page-head, .panel, .card { min-width: 0; } img, video, canvas, svg { max-width: 100%; } .tasks-table { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .tasks-table table { min-width: 680px; } @media (max-width: 800px) { .content { width: 100%; max-width: 100%; } .page-head, .mad-page-head, .hero { gap: 12px; align-items: stretch; } .page-head > *, .mad-page-head > *, .hero > * { min-width: 0; } .panel-head { gap: 10px; flex-wrap: wrap; } .modal-dialog { margin: .5rem; max-width: calc(100vw - 1rem); } .modal-content { max-height: calc(100dvh - 1rem); } .modal-body { overflow-x: hidden; } .form-control, .form-select, .ts-wrapper { max-width: 100%; } } @media (max-width: 480px) { .content { padding-left: 10px; padding-right: 10px; } .kpis { grid-template-columns: 1fr; } .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer { font-size: 9px; gap: 8px; } .footer .tagline { max-width: 46%; text-align: right; } } /* v135 — Quick Add customization */ .quick-add-customize{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)} .quick-add-customize__head{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;font-size:11px} .quick-add-customize__head span{font-size:9px;color:var(--muted);font-weight:400} .quick-add-choice-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px} .quick-add-choice{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:38px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font-size:9px;font-weight:700;cursor:pointer} .quick-add-choice>span{display:flex;align-items:center;gap:7px;min-width:0} .quick-add-choice i{width:14px;text-align:center;color:var(--brand-dark)} .quick-add-choice input{accent-color:var(--brand)} .quick-add-choice:hover{background:var(--surface2);border-color:rgba(126,217,49,.45)} .datatable-page-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap} /* v139 — Project access dual-list picker */ .project-access-picker{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0} .project-access-pane{min-width:0;border:1px solid var(--border);border-radius:10px;background:var(--surface2);overflow:hidden} .project-access-pane__head{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-bottom:1px solid var(--border);background:var(--surface)} .project-access-pane__head strong{font-size:11px;color:var(--text)} .project-access-pane__head span{font-size:9px;color:var(--muted)} .project-access-list{display:flex;flex-direction:column;gap:5px;min-height:190px;max-height:240px;padding:8px;overflow-y:auto} .project-access-list--empty{align-items:center;justify-content:center} .project-access-user{display:grid;grid-template-columns:30px minmax(0,1fr) 18px;gap:8px;align-items:center;width:100%;padding:7px 8px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text);text-align:left;transition:.16s ease;cursor:pointer} .project-access-user:hover{border-color:rgba(126,217,49,.45);background:var(--surface)} .project-access-user>span:nth-child(2){display:flex;min-width:0;flex-direction:column} .project-access-user b,.project-access-user small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .project-access-user b{font-size:10px}.project-access-user small{font-size:8px;color:var(--muted);font-weight:500} .project-access-user>i{color:var(--muted);font-size:9px;text-align:center} .project-access-avatar{display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:rgba(126,217,49,.16);color:var(--brand-dark);font-size:9px;font-weight:900} .project-access-pane--selected .project-access-avatar{background:var(--brand);color:#17320a} .project-access-empty{display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--muted);font-size:9px;text-align:center} .project-access-empty i{font-size:18px;opacity:.6} /* v144 — Standard form modal spacing follows the approved Add Task modal */ #staticFormModal .standard-create-dialog { --task-modal-pad: 20px; } #staticFormModal .standard-create-modal .modal-header { min-height: 62px; padding: 14px var(--task-modal-pad); } #staticFormModal .standard-create-modal .modal-body { padding: var(--task-modal-pad); } #staticFormModal .standard-create-modal .modal-footer { gap: 8px; padding: 12px var(--task-modal-pad); } #staticFormModal .standard-create-modal .form-label { margin-bottom: 6px; font-size: 11px; line-height: 1.35; } #staticFormModal .standard-create-modal .form-control, #staticFormModal .standard-create-modal .form-select { min-height: 40px; border-radius: 9px; font-size: 12px; } #staticFormModal .standard-create-modal textarea.form-control { min-height: 86px; } #staticFormModal .standard-create-modal .mad-form-help, #staticFormModal .standard-create-modal .form-text, #staticFormModal .standard-create-modal .text-muted.small { margin-top: 5px; font-size: 10px; line-height: 1.45; } #staticFormModal .standard-create-modal .standard-create__section { padding: 18px; } #staticFormModal .standard-create-modal .standard-create__section-head { margin-bottom: 18px; } #staticFormModal .standard-create-modal .standard-create__section-head h3 { font-size: 14px; } #staticFormModal .standard-create-modal .standard-create__section-head p { margin-top: 2px; font-size: 11px; line-height: 1.45; } @media (max-width: 767.98px) { #staticFormModal .standard-create-dialog { --task-modal-pad: 14px; } #staticFormModal .standard-create-modal .standard-create__section { padding: 14px; } } /* Task Template — rebuilt from scratch: one clean 3-column row. */ .task-template-toolbar { padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); } .task-template-title { margin: 0 0 14px; font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--text); } .task-template-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(150px, .55fr) minmax(160px, .62fr); gap: 12px; align-items: end; } .task-template-field { min-width: 0; } .task-template-field .form-label { display: block; margin: 0 0 7px; font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--text); } .task-template-field .form-select, .task-template-field .task-template-action { width: 100%; height: 38px; min-height: 38px; margin: 0; } .task-template-field .task-template-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; line-height: 1; white-space: nowrap; } @media (max-width: 767.98px) { .task-template-toolbar { padding: 14px; } .task-template-grid { grid-template-columns: 1fr; gap: 12px; } } .task-template-save-panel { padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); } .task-template-save-panel[hidden] { display: none !important; } .task-template-save-panel__controls { display: flex; align-items: center; gap: 8px; } .task-template-save-panel__controls .form-control { flex: 1 1 auto; min-width: 0; } @media (max-width: 767.98px) { .task-template-toolbar .task-template-action { width: 100%; } .task-template-save-panel__controls { align-items: stretch; flex-direction: column; } .task-template-save-panel .btn-mad { width: 100%; justify-content: center; } } /* Task Template save row — align exactly with the 3 template columns above. */ .task-template-save-panel__controls { display: grid; grid-template-columns: minmax(0, 2fr) minmax(150px, .55fr) minmax(160px, .62fr); gap: 12px; align-items: end; } .task-template-save-panel__controls .form-control, .task-template-save-panel__controls .btn-mad { width: 100%; height: 38px; min-height: 38px; margin: 0; } .task-template-save-panel__controls .btn-mad { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; } @media (max-width: 767.98px) { .task-template-save-panel__controls { grid-template-columns: 1fr; gap: 12px; } } /* v159 — Task Template save form: same visual grid as template toolbar. */ .task-template-save-panel { padding: 14px; } .task-template-save-panel__grid { display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(150px, .9fr) minmax(170px, 1fr); gap: 12px; align-items: end; } .task-template-save-panel__grid .task-template-field { min-width: 0; } .task-template-save-panel__grid .form-label { margin-bottom: 6px; } .task-template-save-panel__grid .form-label[aria-hidden="true"] { visibility: hidden; } .task-template-save-panel__grid .form-control, .task-template-save-panel__grid .task-template-action { width: 100%; height: 38px; min-height: 38px; margin: 0; } .task-template-save-panel__grid .task-template-action { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; } @media (max-width: 767.98px) { .task-template-save-panel__grid { grid-template-columns: 1fr; gap: 12px; } .task-template-save-panel__grid .form-label[aria-hidden="true"] { display: none; } } /* v162 — Modal form placeholder standardization */ #staticFormModal .form-control::placeholder, #staticFormModal textarea.form-control::placeholder, #staticFormModal .task-create .form-control::placeholder, #staticFormModal .standard-create-modal .form-control::placeholder { color: var(--muted, #8b98a5) !important; opacity: 1 !important; } html[data-theme="dark"] #staticFormModal .form-control::placeholder, body.dark #staticFormModal .form-control::placeholder, html[data-theme="dark"] #staticFormModal textarea.form-control::placeholder, body.dark #staticFormModal textarea.form-control::placeholder { color: #8d99a6 !important; opacity: 1 !important; } /* v180 — Task DataTable initialization and column reorder */ .mad-datatable.datatable-loading{visibility:hidden} .mad-column-order-modal{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:24px} .mad-column-order-modal.is-open{display:flex} .mad-column-order-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.58)} .mad-column-order-modal__dialog{position:relative;width:min(680px,calc(100vw - 32px));max-height:min(820px,calc(100dvh - 48px));display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.28);overflow:hidden} .mad-column-order-modal__header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px 22px 16px;border-bottom:1px solid var(--border)} .mad-column-order-modal__header h2{margin:0;font-size:18px;font-weight:800;color:var(--text)} .mad-column-order-modal__header p{margin:5px 0 0;font-size:10px;color:var(--muted)} .mad-column-order-modal__close{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:17px} .mad-column-order-modal__close:hover{background:var(--surface2);color:var(--text)} .mad-column-order-modal__body{padding:16px 22px;overflow:auto} .mad-column-order-list{display:flex;flex-direction:column;gap:8px} .mad-column-order-item{display:grid;grid-template-columns:28px 34px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:54px;padding:8px 10px;border:1px solid var(--border);border-radius:9px;background:var(--surface)} .mad-column-order-item__handle{display:grid;place-items:center;color:var(--muted);cursor:grab;font-size:14px} .mad-column-order-item__handle:active{cursor:grabbing} .mad-column-order-item__number{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--border);border-radius:6px;background:var(--surface2);font-size:10px;font-weight:800;color:var(--muted)} .mad-column-order-item__name{font-size:11px;color:var(--text)} .mad-column-order-item__controls{display:flex;gap:6px} .mad-column-order-item__move{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--border);border-radius:8px;background:var(--surface2);color:var(--text)} .mad-column-order-item__move:disabled{opacity:.3;cursor:not-allowed} .mad-column-order-item--ghost{opacity:.35} .mad-column-order-modal__footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 22px;border-top:1px solid var(--border);background:var(--surface)} .mad-column-order-modal__footer #datatableColumnOrderDefault{margin-right:auto} body.mad-modal-open{overflow:hidden} @media(max-width:560px){.mad-column-order-modal{padding:10px}.mad-column-order-modal__dialog{width:100%;max-height:calc(100dvh - 20px)}.mad-column-order-modal__header,.mad-column-order-modal__body,.mad-column-order-modal__footer{padding-left:14px;padding-right:14px}.mad-column-order-item{grid-template-columns:24px 30px minmax(0,1fr) auto}.mad-column-order-item__move{width:30px;height:30px}.mad-column-order-modal__footer{flex-wrap:wrap}.mad-column-order-modal__footer #datatableColumnOrderDefault{margin-right:0}} /* Shared workspace checked multi-select filter. */ .workspace-filter { position: relative; width: 100%; min-width: 0; font-size: 10px; text-transform: none; } .workspace-filter__trigger { display: flex; width: 100%; min-width: 0; height: 30px; align-items: center; gap: 6px; padding: 0 26px 0 8px; overflow: hidden; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; } .workspace-filter.is-open .workspace-filter__trigger { border-color: rgba(22, 201, 93, .55); box-shadow: 0 0 0 2px rgba(22, 201, 93, .08); } .workspace-filter__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .workspace-filter__chevron { position: absolute; right: 9px; flex: none; color: var(--muted); font-size: 9px; pointer-events: none; } .workspace-filter__clear { position: absolute; z-index: 3; top: 6px; right: 23px; display: inline-grid; width: 18px; height: 18px; padding: 0; place-items: center; border: 0; border-radius: 4px; background: var(--surface); color: var(--muted); font-size: 10px; cursor: pointer; } .workspace-filter__clear:hover, .workspace-filter__clear:focus-visible { background: var(--surface2); color: var(--text); outline: none; } .workspace-filter__clear[hidden] { display: none; } .workspace-filter__menu { font-size: 10px; text-transform: none; position: fixed; z-index: 1080; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: 0 10px 24px rgba(16, 24, 40, .18); } .workspace-filter__list { max-height: 220px; overflow-y: auto; overscroll-behavior: contain; } .workspace-filter__option { display: flex; width: 100%; min-width: 0; align-items: center; gap: 8px; padding: 7px 9px; border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; } .workspace-filter__option:hover, .workspace-filter__option:focus-visible, .workspace-filter__option.is-selected { background: var(--surface2); outline: none; } .workspace-filter__option-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .workspace-filter__check { flex: none; color: var(--accent); font-size: 9px; } /* Projects modal: compact user transfer, using system light/dark tokens. */ #staticFormModal .standard-create__section.project-form .standard-create__section-head{margin-bottom:12px} #staticFormModal .project-form__fields{display:grid;grid-template-columns:minmax(0,1fr) 82px;gap:10px;margin-bottom:14px} #staticFormModal .project-form__fields .form-control-color{width:100%;height:32px;padding:4px} #staticFormModal .project-access{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} #staticFormModal .project-access__panel{min-width:0;border:1px solid var(--border);border-radius:8px;background:var(--surface2);padding:8px} #staticFormModal .project-access__heading{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:6px} #staticFormModal .project-access__heading label{font-size:10px;font-weight:700;color:var(--text)} #staticFormModal .project-access__heading span{font-size:9px;color:var(--muted);white-space:nowrap} #staticFormModal .project-access__search{width:100%;min-height:30px;height:30px;margin-bottom:7px;font-size:10px;background:var(--surface);color:var(--text);border-color:var(--border)} #staticFormModal .project-access__list{height:184px;overflow-y:auto;display:flex;flex-direction:column;gap:3px;scrollbar-width:thin} #staticFormModal .project-access__user{appearance:none;display:flex;align-items:center;gap:7px;width:100%;min-height:36px;padding:5px 7px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);text-align:left;cursor:pointer;font-family:inherit;line-height:1.2} #staticFormModal .project-access__user:hover{border-color:var(--brand);background:var(--surface2)} #staticFormModal .project-access__avatar{flex:0 0 22px;width:22px;height:22px;border-radius:5px;display:grid;place-items:center;background:rgba(142,234,32,.13);color:var(--text);font-size:9px;font-weight:700} #staticFormModal .project-access__identity{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px} #staticFormModal .project-access__identity strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:650;color:var(--text)} #staticFormModal .project-access__identity small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;color:var(--muted)} #staticFormModal .project-access__user>i{font-size:9px;color:var(--muted)} #staticFormModal .project-access__empty{padding:12px 6px;text-align:center;color:var(--muted);font-size:10px} @media(max-width:575.98px){#staticFormModal .project-access{grid-template-columns:1fr}#staticFormModal .project-access__list{height:140px}#staticFormModal .project-form__fields{grid-template-columns:minmax(0,1fr) 72px}} /* Projects actions menu: theme-aware, scoped to the existing dropdown. */ [data-table-page="projects"] .dropdown-menu{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:4px;box-shadow:0 8px 24px rgba(0,0,0,.18);min-width:130px} [data-table-page="projects"] .dropdown-item{background:transparent;color:var(--text);font-size:11px;padding:7px 9px;border-radius:5px} [data-table-page="projects"] .dropdown-item:hover,[data-table-page="projects"] .dropdown-item:focus{background:var(--surface2);color:var(--text)} [data-table-page="projects"] .dropdown-item.text-danger{color:var(--danger,#e54b4b)} [data-table-page="projects"] .dropdown-item.text-danger:hover,[data-table-page="projects"] .dropdown-item.text-danger:focus{background:var(--surface2);color:var(--danger,#e54b4b)}