:root{--font-scale:1}
html{font-size:calc(16px * var(--font-scale));}
*{box-sizing:border-box}
:root{--bg:#f4f6fa;--surface:#fff;--surface2:#f8fafc;--text:#172033;--muted:#6f7888;--border:#e1e7ef;--primary:#3976ff;--header:#0d1624;--danger:#d9444d;--shadow:0 12px 30px #17203312}
body.dark{--bg:#0d1420;--surface:#151e2d;--surface2:#1a2434;--text:#edf2f8;--muted:#9aa8ba;--border:#29364a;--header:#080e17;--shadow:0 12px 30px #0004}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}
button,
input,
select,
textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}
input,
select,
textarea{width:100%;padding:10px 11px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text)}
textarea{min-height:120px;resize:vertical}
.primary-button,
.secondary-button,
.danger-button{border:0;border-radius:9px;padding:9px 13px;font-weight:750}
.primary-button{background:var(--primary);color:#fff}.secondary-button{background:var(--surface2);border:1px solid var(--border);color:var(--text)}.danger-button{background:var(--danger);color:#fff}
.icon-button{border:0;background:transparent;color:inherit;font-size:22px}
.login-view{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#111827,#294783)}
.login-card{width:min(420px,92vw);display:grid;gap:14px;padding:34px;background:#fff;color:#172033;border-radius:22px}
.login-card span{color:#4b82ff}.login-card small{text-align:center;color:#6f7888}.error-text{color:#c7313a}
.app-header{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding:11px 20px;background:var(--header);color:#fff;border-bottom:1px solid #243149}
.brand{font-size:21px;font-weight:900;white-space:nowrap}.brand span{color:#4b82ff}
.main-nav{display:flex;gap:5px;align-items:center}.nav-button,
.dropdown-toggle{border:0;background:transparent;color:#cbd5e1;border-radius:8px;padding:9px 10px;font-weight:700}.nav-button.active{background:#26344b;color:#fff}
.dropdown{position:relative}.dropdown-menu{display:none;position:absolute;top:calc(100% + 7px);min-width:190px;padding:7px;background:#111b2a;border:1px solid #2d3d56;border-radius:11px;box-shadow:0 18px 45px #0008}.dropdown.open .dropdown-menu{display:grid}.dropdown-menu button{border:0;background:transparent;color:#dce4ef;text-align:left;padding:9px;border-radius:7px}
.header-tools{display:flex;align-items:center;gap:9px}.global-search{position:relative;width:min(400px,30vw)}.global-search input{background:#172235;border-color:#2d3d56;color:#fff}.search-results{position:absolute;top:calc(100% + 7px);left:0;right:0;max-height:500px;overflow:auto;padding:8px;background:#111b2a;border:1px solid #2d3d56;border-radius:11px;box-shadow:0 18px 45px #0008}.search-result{display:grid;gap:2px;width:100%;border:0;background:transparent;color:#fff;text-align:left;padding:9px;border-radius:7px}.search-result small{color:#9eacbf}
.profile-button{display:flex;align-items:center;gap:7px;border:0;background:#172235;color:#fff;border-radius:9px;padding:5px 8px}.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#315a9d;font-size:10px;font-weight:900}
.app-main{padding:24px}.page-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.page-header h1{margin:0;font-size:27px}.page-header p{margin:4px 0 0;color:var(--muted);font-size:13px}
.week-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px}.week-toolbar h2{margin:0;font-size:20px}.toolbar-actions{display:flex;gap:7px;flex-wrap:wrap}
.week-grid{display:grid;grid-template-columns:repeat(5,minmax(235px,1fr));gap:11px;overflow-x:auto}.day-column{min-width:235px;min-height:430px;display:flex;flex-direction:column;background:var(--surface2);border:1px solid var(--border);border-radius:14px;overflow:hidden}.day-column.today{outline:2px solid var(--primary)}.day-column.drag-over{outline:2px dashed var(--primary)}
.day-header{display:flex;justify-content:space-between;align-items:center;padding:12px;background:var(--surface);border-bottom:1px solid var(--border)}.day-header div{display:grid;gap:3px}.day-header small{color:var(--muted)}.counter{padding:4px 8px;border-radius:999px;background:#26344b;color:#fff;font-size:10px}
.day-list{display:grid;gap:7px;padding:9px;align-content:start;flex:1}.empty-state{text-align:center;color:var(--muted);padding:25px 8px}.add-task{border:0;border-top:1px solid var(--border);background:transparent;color:var(--muted);text-align:left;padding:11px}
.task-card{padding:10px;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--primary);border-radius:10px;box-shadow:var(--shadow);cursor:pointer}.task-card.dragging{opacity:.35}.task-card.drop-target{border-top:3px solid var(--primary)}.task-card.completed{opacity:.62}.task-card.completed .task-title{text-decoration:line-through}
.task-card.low{border-left-color:#35a853}.task-card.normal{border-left-color:#3976ff}.task-card.high{border-left-color:#e58a21}.task-card.urgent{border-left-color:#e04048}.task-card.critical{border-left-color:#8b5cf6}
.task-top{display:grid;grid-template-columns:auto 1fr auto;gap:7px;align-items:start}.complete-toggle{width:18px;height:18px;padding:0;border-radius:50%;border:1px solid #8190a2;background:transparent;color:#fff}.complete-toggle.checked{background:#55ad38;border-color:#55ad38}.task-title{font-size:12.5px;line-height:1.45}.drag-handle{color:var(--muted);cursor:grab}
.labels{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px}.label{padding:3px 7px;border-radius:999px;color:#fff;font-size:10px;font-weight:700}.task-footer{display:flex;justify-content:space-between;margin-top:8px;color:var(--muted);font-size:10px}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}.panel,
.archive-card,
.list-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:15px;box-shadow:var(--shadow)}
.archive-card h3{margin:8px 0}.archive-meta{display:grid;gap:4px;color:var(--muted);font-size:11px}.card-actions{display:flex;gap:7px;margin-top:12px}
.task-list{display:grid;gap:8px}.task-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:11px;background:var(--surface);border:1px solid var(--border);border-radius:10px}.task-row small{color:var(--muted)}
dialog{width:min(720px,94vw);border:0;border-radius:16px;padding:0;background:var(--surface);color:var(--text)}dialog::backdrop{background:#0009}dialog form{padding:18px}.modal-header{display:flex;justify-content:space-between;align-items:center}.modal-header h2{margin:0}.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.full{grid-column:1/-1}.section{margin-top:14px;padding-top:13px;border-top:1px solid var(--border)}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.inline-row{display:grid;grid-template-columns:1fr auto;gap:8px}.checklist{display:grid;gap:7px}.check-item{display:flex;align-items:center;gap:7px}.check-item input{width:auto}
.comments{display:grid;gap:8px;max-height:280px;overflow:auto}.comment{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:9px;background:var(--surface2);border:1px solid var(--border);border-radius:9px}.comment p{margin:3px 0}.comment small{color:var(--muted)}
.context-menu{position:fixed;z-index:1000;width:220px;padding:7px;background:#111b2a;border:1px solid #30415a;border-radius:11px;box-shadow:0 20px 50px #0009}.context-menu button{width:100%;border:0;background:transparent;color:#e2e8f0;text-align:left;padding:9px;border-radius:7px}.context-menu .danger{color:#ff9ca2}.divider{height:1px;background:#29384e;margin:5px}
.toast-host{position:fixed;right:16px;bottom:16px;display:grid;gap:8px;z-index:2000}.toast{padding:11px 14px;background:#111b2a;color:#fff;border:1px solid #30415a;border-radius:10px;box-shadow:0 12px 30px #0007}
@media(max-width:1100px){.app-header{grid-template-columns:1fr auto}.main-nav{grid-column:1/-1;order:3;overflow-x:auto}.week-grid{grid-template-columns:repeat(5,260px)}.global-search{width:min(340px,48vw)}}
@media(max-width:650px){.app-main{padding:14px}.global-search{display:none}.profile-button span:not(.avatar){display:none}.form-grid{grid-template-columns:1fr}.full{grid-column:auto}.week-toolbar{align-items:flex-start;flex-direction:column}}
/* v3.1.0 dashboard 6 delova */
.dashboard-six-grid{
display:grid;
grid-template-columns:repeat(6,minmax(190px,1fr));
gap:10px;
overflow-x:auto;
}
.compact-week-toolbar{margin-bottom:10px}
.compact-day-column{min-width:190px;min-height:360px}
.compact-day-header{padding:10px}
.compact-day-header strong{font-size:13px}
.compact-day-header small{font-size:10px}
.compact-day-list{padding:7px;gap:6px}
.compact-task-card{padding:8px}
.compact-task-card .task-title{font-size:11.5px}
.compact-task-card .task-footer{font-size:9px}
.compact-add-task{padding:9px;font-size:12px}
.compact-empty{padding:18px 6px;font-size:11px}
.current-day-focus{
outline:3px solid #4b82ff!important;
box-shadow:0 0 0 4px rgba(75,130,255,.13),0 14px 34px rgba(57,118,255,.22);
transform:translateY(-3px);
}
.current-day-focus .day-header{
background:linear-gradient(135deg,#3976ff,#5d8fff);
color:#fff;
}
.current-day-focus .day-header small{color:#dce8ff}
.week-summary-card{
min-width:190px;
min-height:360px;
display:flex;
flex-direction:column;
background:linear-gradient(145deg,var(--surface),var(--surface2));
border:1px solid var(--border);
border-radius:14px;
overflow:hidden;
box-shadow:var(--shadow);
}
.week-summary-card>header{padding:12px;border-bottom:1px solid var(--border)}
.week-summary-card>header div{display:grid;gap:3px}
.week-summary-card>header small{color:var(--muted)}
.summary-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:11px}
.summary-metrics div{display:grid;place-items:center;padding:12px 7px;background:var(--surface);border:1px solid var(--border);border-radius:10px}
.summary-metrics span{font-size:22px;font-weight:800}
.summary-metrics small{color:var(--muted)}
.summary-actions{display:grid;gap:7px;padding:11px;margin-top:auto}
/* korisnici i ovlašćenja */
.users-toolbar{display:grid;grid-template-columns:minmax(240px,1fr) 220px;gap:10px;margin-bottom:13px}
.users-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.user-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:var(--shadow)}
.user-card-head{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.user-card-head h3{margin:0 0 3px;font-size:16px}
.user-avatar{width:42px;height:42px}
.status-badge{padding:4px 8px;border-radius:999px;font-size:10px;font-weight:800}
.status-badge.active{background:#e6f7ec;color:#247044}
.status-badge.inactive{background:#fde8e9;color:#af2731}
.user-details{display:grid;gap:5px;margin:12px 0;color:var(--muted);font-size:12px}
.permissions-layout{display:grid;gap:12px}
.permission-info{padding:12px;background:var(--surface2);border:1px solid var(--border);border-radius:10px}
.permission-info p{margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
.permissions-list{display:grid;gap:8px;max-height:430px;overflow:auto}
.permission-row{display:grid;grid-template-columns:1fr 150px;gap:10px;align-items:center;padding:10px;border:1px solid var(--border);border-radius:9px}
.permission-row div{display:grid;gap:3px}.permission-row small{color:var(--muted)}
/* detalj zadatka 2 kolone */
#appModal:has(.task-detail-grid){width:min(1040px,96vw)}
.task-detail-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:18px}
.task-left-panel{min-width:0}
.task-right-panel{min-width:0;padding-left:16px;border-left:1px solid var(--border)}
.task-right-panel .section-head{position:sticky;top:0;background:var(--surface);padding-bottom:9px;z-index:2}
.activity-count{min-width:26px;height:26px;border-radius:999px;display:grid;place-items:center;background:#26344b;color:#fff;font-size:10px}
.comment-compose-vertical{display:grid;gap:8px;margin-bottom:10px}
.comment-compose-vertical textarea{min-height:85px}
.task-activity-feed{max-height:520px}
.task-activity-feed .comment.activity{opacity:.78}
.empty-activity{padding:30px 12px;text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:10px}
@media(max-width:1300px){
.dashboard-six-grid{grid-template-columns:repeat(6,220px)}
}
@media(max-width:800px){
.task-detail-grid{grid-template-columns:1fr}
.task-right-panel{padding-left:0;border-left:0;border-top:1px solid var(--border);padding-top:14px}
.users-toolbar{grid-template-columns:1fr}
}
/* v3.2.0 board management */
.boards-toolbar{
display:grid;
grid-template-columns:minmax(240px,1fr) 210px;
gap:10px;
margin-bottom:13px;
}
.boards-management-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(315px,1fr));
gap:13px;
}
.managed-board-card{
position:relative;
overflow:hidden;
background:var(--surface);
border:1px solid var(--border);
border-top:5px solid var(--board-color);
border-radius:15px;
box-shadow:var(--shadow);
}
.managed-board-open{
width:100%;
display:grid;
grid-template-columns:auto 1fr;
gap:12px;
padding:16px;
border:0;
background:transparent;
color:var(--text);
text-align:left;
}
.managed-board-icon{
width:44px;
height:44px;
display:grid;
place-items:center;
border-radius:12px;
background:color-mix(in srgb,var(--board-color) 18%,var(--surface2));
color:var(--board-color);
font-size:21px;
font-weight:900;
}
.managed-board-card h3{
margin:0 0 5px;
font-size:17px;
}
.managed-board-card p{
margin:0;
color:var(--muted);
font-size:12px;
line-height:1.45;
}
.managed-board-stats{
display:flex;
gap:12px;
flex-wrap:wrap;
padding:0 16px 13px;
color:var(--muted);
font-size:11px;
}
.managed-board-footer{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
padding:11px 16px;
border-top:1px solid var(--border);
background:var(--surface2);
}
.managed-board-footer>div{
display:flex;
gap:7px;
}
.managed-board-footer small{
color:var(--muted);
}
/* board-specific dashboard */
.board-dashboard-toolbar{
display:flex;
justify-content:space-between;
align-items:center;
gap:14px;
margin-bottom:12px;
padding:12px 14px;
background:var(--surface);
border:1px solid var(--border);
border-radius:14px;
}
.board-dashboard-identity{
display:flex;
align-items:center;
gap:11px;
}
.board-dashboard-identity>div{
display:grid;
gap:3px;
}
.board-dashboard-identity small{
color:var(--muted);
}
.board-dashboard-icon{
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:11px;
color:#fff;
font-size:20px;
}
.board-dashboard-actions{
display:flex;
gap:7px;
flex-wrap:wrap;
}
.board-dashboard-stats{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
margin-bottom:12px;
}
.board-dashboard-stats>div{
display:grid;
gap:3px;
padding:12px;
background:var(--surface);
border:1px solid var(--border);
border-radius:11px;
}
.board-dashboard-stats strong{
font-size:22px;
}
.board-dashboard-stats span{
color:var(--muted);
font-size:11px;
}
.board-kanban-dashboard{
display:flex;
align-items:flex-start;
gap:11px;
overflow-x:auto;
padding-bottom:8px;
}
.board-kanban-column{
min-width:285px;
width:285px;
max-height:calc(100vh - 290px);
display:flex;
flex-direction:column;
background:var(--surface2);
border:1px solid var(--border);
border-radius:13px;
overflow:hidden;
}
.board-kanban-column.drag-over{
outline:2px dashed var(--primary);
}
.board-kanban-column>header{
display:flex;
justify-content:space-between;
align-items:center;
padding:11px;
background:var(--surface);
border-bottom:1px solid var(--border);
}
.board-kanban-column>header>div{
display:flex;
align-items:center;
gap:7px;
}
.board-kanban-column>header>div>span:last-child{
min-width:24px;
height:24px;
display:grid;
place-items:center;
padding:0 6px;
border-radius:999px;
background:#26344b;
color:#fff;
font-size:10px;
}
.column-color-dot{
width:10px!important;
min-width:10px!important;
height:10px!important;
padding:0!important;
border-radius:50%!important;
}
.column-options-button{
border:0;
background:transparent;
color:var(--muted);
padding:4px;
}
.board-column-list{
display:grid;
gap:8px;
align-content:start;
min-height:45px;
padding:9px;
overflow-y:auto;
}
.board-task-card{
padding:10px;
background:var(--surface);
border:1px solid var(--border);
border-left:4px solid var(--primary);
border-radius:10px;
cursor:pointer;
box-shadow:0 5px 14px #1720330d;
}
.board-task-card.low{border-left-color:#35a853}
.board-task-card.normal{border-left-color:#3976ff}
.board-task-card.high{border-left-color:#e58a21}
.board-task-card.urgent{border-left-color:#e04048}
.board-task-card.critical{border-left-color:#8b5cf6}
.board-task-card.completed{opacity:.62}
.board-task-card.completed .board-task-title{text-decoration:line-through}
.board-task-title{
font-size:12.5px;
line-height:1.45;
}
.board-task-meta{
display:flex;
justify-content:space-between;
gap:8px;
margin-top:8px;
color:var(--muted);
font-size:10px;
}
.board-task-progress{
display:flex;
gap:9px;
margin-top:7px;
color:var(--muted);
font-size:10px;
}
@media(max-width:800px){
.boards-toolbar{grid-template-columns:1fr}
.board-dashboard-toolbar{align-items:flex-start;flex-direction:column}
.board-dashboard-stats{grid-template-columns:repeat(2,1fr)}
.board-kanban-column{min-width:270px;width:270px;max-height:none}
}
/* v3.3.0 board footer */
.app-view{min-height:100vh;padding-bottom:86px}
.board-footer{
position:fixed;
left:0;
right:0;
bottom:0;
z-index:45;
background:var(--header);
color:#fff;
border-top:1px solid #2d3d56;
box-shadow:0 -10px 30px #0004;
}
.board-footer-inner{
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;
gap:12px;
padding:9px 16px;
}
.board-footer-label{
display:grid;
gap:2px;
min-width:115px;
}
.board-footer-label strong{font-size:13px}
.board-footer-label small{color:#90a0b5;font-size:9px}
.board-footer-scroll{
display:flex;
gap:7px;
overflow-x:auto;
scrollbar-width:thin;
padding:2px;
}
.board-footer-item{
flex:0 0 auto;
display:flex;
align-items:center;
gap:7px;
max-width:210px;
padding:8px 10px;
border:1px solid #2c3c54;
border-radius:9px;
background:#172235;
color:#dce4ef;
font-size:11px;
}
.board-footer-item.active{
background:#263a58;
border-color:#4f7fc5;
color:#fff;
}
.board-footer-item.active{
box-shadow:inset 0 0 0 1px #6da0ef;
}
.board-footer-item>span:nth-child(2){
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.board-footer-item small{
min-width:20px;
height:20px;
display:grid;
place-items:center;
padding:0 5px;
border-radius:999px;
background:#0d1624;
color:#aebbd0;
font-size:9px;
}
.board-footer-color{
width:9px;
height:9px;
border-radius:50%;
background:var(--board-color);
}
.board-footer-icon{
font-size:15px;
}
/* AI pomoćnik */
.ai-help-button{
position:fixed;
right:18px;
bottom:92px;
z-index:80;
display:flex;
align-items:center;
gap:8px;
padding:9px 12px 9px 8px;
border:1px solid #4f7fc5;
border-radius:999px;
background:linear-gradient(135deg,#3976ff,#7357e8);
color:#fff;
box-shadow:0 14px 34px #142b5a66;
}
.ai-help-button span{
width:28px;
height:28px;
display:grid;
place-items:center;
border-radius:50%;
background:#ffffff22;
font-size:16px;
font-weight:900;
}
.ai-helper-panel{
position:fixed;
right:18px;
bottom:145px;
z-index:90;
width:min(390px,calc(100vw - 28px));
height:min(610px,calc(100vh - 175px));
display:grid;
grid-template-rows:auto minmax(0,1fr) auto auto;
background:var(--surface);
color:var(--text);
border:1px solid var(--border);
border-radius:17px;
box-shadow:0 22px 70px #0007;
overflow:hidden;
}
.ai-helper-panel>header{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px;
background:linear-gradient(135deg,#172235,#273f68);
color:#fff;
}
.ai-helper-panel>header>div{
display:grid;
gap:3px;
}
.ai-helper-panel>header small{
color:#b7c5d9;
}
.ai-helper-messages{
display:grid;
gap:9px;
align-content:start;
padding:13px;
overflow-y:auto;
background:var(--surface2);
}
.ai-message{
max-width:88%;
padding:10px 11px;
border-radius:12px;
font-size:12px;
line-height:1.5;
}
.ai-message.assistant{
justify-self:start;
background:var(--surface);
border:1px solid var(--border);
}
.ai-message.user{
justify-self:end;
background:#3976ff;
color:#fff;
}
.ai-message-actions{
display:flex;
gap:6px;
flex-wrap:wrap;
margin-top:8px;
}
.ai-helper-quick{
display:flex;
gap:6px;
overflow-x:auto;
padding:9px 11px;
border-top:1px solid var(--border);
}
.ai-helper-quick button{
flex:0 0 auto;
border:1px solid var(--border);
border-radius:999px;
background:var(--surface2);
color:var(--text);
padding:6px 9px;
font-size:10px;
}
#aiHelperForm{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
padding:11px;
border-top:1px solid var(--border);
}
#aiHelperForm textarea{
min-height:44px;
max-height:100px;
padding:9px;
}
@media(max-width:800px){
.board-footer-inner{grid-template-columns:1fr auto}
.board-footer-label{display:none}
.ai-help-button{bottom:88px;right:12px}
.ai-helper-panel{right:12px;bottom:138px}
}
/* v3.3.2 - full responsive behavior */
html,
body{
width:100%;
max-width:100%;
overflow-x:hidden;
}
*{
box-sizing:border-box;
}
img,
svg,
video,
canvas{
max-width:100%;
height:auto;
}
.app-main{
width:100%;
max-width:100%;
min-width:0;
}
#pageContent,
#pageHeader{
min-width:0;
}
button,
input,
select,
textarea{
max-width:100%;
}
.mobile-nav-toggle{
display:none;
width:38px;
height:38px;
place-items:center;
border:1px solid #33465f;
border-radius:9px;
background:#172235;
color:#fff;
font-size:18px;
}
/* Large tablet */
@media(max-width:1200px){
.dashboard-six-grid{
grid-template-columns:repeat(6,210px);
overflow-x:auto;
scroll-snap-type:x proximity;
padding-bottom:8px;
}
.dashboard-six-grid>*{
scroll-snap-align:start;
}
.boards-management-grid,
.users-grid,
.cards-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.board-dashboard-toolbar{
align-items:flex-start;
}
}
/* Tablet and mobile navigation */
@media(max-width:900px){
.mobile-nav-toggle{
display:grid;
flex:0 0 auto;
}
#appHeader{
position:sticky;
top:0;
z-index:70;
}
#appHeader .header-inner,
#appHeader .topbar,
#appHeader .app-header-inner{
gap:8px;
padding:9px 12px;
}
#appHeader nav,
#appHeader .header-nav,
#appHeader .main-nav{
position:fixed;
left:0;
top:0;
bottom:0;
z-index:85;
width:min(320px,86vw);
display:flex!important;
flex-direction:column;
align-items:stretch;
gap:6px;
padding:74px 14px 18px;
background:#101a2a;
box-shadow:18px 0 45px #0008;
transform:translateX(-105%);
transition:transform .22s ease;
overflow-y:auto;
}
body.mobile-nav-open #appHeader nav,
body.mobile-nav-open #appHeader .header-nav,
body.mobile-nav-open #appHeader .main-nav{
transform:translateX(0);
}
body.mobile-nav-open::after{
content:"";
position:fixed;
inset:0;
z-index:80;
background:#0008;
}
#appHeader [data-page],
#appHeader [data-menu]{
width:100%;
justify-content:flex-start;
text-align:left;
}
.app-main{
padding:12px;
}
.page-header,
#pageHeader>div{
align-items:flex-start;
gap:10px;
flex-wrap:wrap;
}
.page-header-actions,
.toolbar-actions,
.board-dashboard-actions{
width:100%;
display:flex;
flex-wrap:wrap;
}
.page-header-actions button,
.toolbar-actions button,
.board-dashboard-actions button{
flex:1 1 auto;
}
.dashboard-six-grid{
grid-template-columns:repeat(6,minmax(245px,78vw));
}
.task-detail-grid{
grid-template-columns:1fr!important;
}
.task-right-panel{
border-left:0!important;
border-top:1px solid var(--border);
padding-left:0!important;
padding-top:14px;
}
.board-dashboard-toolbar{
flex-direction:column;
}
.board-dashboard-stats{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.board-kanban-dashboard{
scroll-snap-type:x mandatory;
}
.board-kanban-column{
min-width:min(82vw,320px);
width:min(82vw,320px);
scroll-snap-align:start;
}
.board-footer-inner{
grid-template-columns:minmax(0,1fr) auto;
}
.board-footer-label{
display:none;
}
}
/* Phones */
@media(max-width:640px){
body{
font-size:14px;
}
.app-view{
padding-bottom:82px;
}
.app-main{
padding:9px;
}
.page-header h1,
#pageHeader h1{
font-size:21px;
}
.page-header p,
#pageHeader p{
font-size:11px;
}
.compact-week-toolbar,
.week-toolbar{
align-items:flex-start;
flex-direction:column;
gap:9px;
}
.compact-week-toolbar .toolbar-actions,
.week-toolbar .toolbar-actions{
width:100%;
}
.dashboard-six-grid{
grid-template-columns:repeat(6,calc(100vw - 34px));
gap:9px;
}
.compact-day-column,
.week-summary-card{
min-width:calc(100vw - 34px);
}
.boards-management-grid,
.users-grid,
.cards-grid{
grid-template-columns:1fr;
}
.boards-toolbar,
.users-toolbar{
grid-template-columns:1fr;
}
.managed-board-footer,
.user-card-head{
align-items:flex-start;
}
.managed-board-footer{
flex-direction:column;
}
.managed-board-footer>div,
.card-actions{
width:100%;
display:grid;
grid-template-columns:1fr 1fr;
}
.form-grid{
grid-template-columns:1fr!important;
}
.form-grid .full{
grid-column:1!important;
}
dialog,
#appModal{
width:calc(100vw - 16px)!important;
max-width:calc(100vw - 16px)!important;
max-height:calc(100vh - 16px);
margin:8px;
border-radius:13px;
}
dialog .modal-body,
#appModal .modal-body{
max-height:calc(100vh - 155px);
overflow-y:auto;
}
.permission-row{
grid-template-columns:1fr;
}
.board-dashboard-stats{
grid-template-columns:repeat(2,1fr);
}
.board-kanban-column{
min-width:calc(100vw - 34px);
width:calc(100vw - 34px);
}
.board-footer{
padding-bottom:env(safe-area-inset-bottom);
}
.board-footer-inner{
padding:7px 9px;
gap:7px;
}
.board-footer-scroll{
gap:5px;
}
.board-footer-item{
padding:7px 9px;
max-width:165px;
}
#footerManageBoards{
padding:8px 9px;
font-size:10px;
}
.ai-help-button{
right:10px;
bottom:90px;
padding:7px 10px 7px 7px;
}
.ai-help-button strong{
display:none;
}
.ai-helper-panel{
left:8px;
right:8px;
bottom:137px;
width:auto;
height:min(70vh,560px);
}
#aiHelperForm{
grid-template-columns:1fr;
}
#aiHelperForm button{
width:100%;
}
.comments,
.task-activity-feed{
max-height:360px;
}
.inline-row{
grid-template-columns:1fr auto;
}
}
/* Very small phones */
@media(max-width:380px){
.board-dashboard-stats,
.summary-metrics{
grid-template-columns:1fr;
}
.card-actions,
.managed-board-footer>div{
grid-template-columns:1fr;
}
.board-footer-item{
max-width:145px;
}
}
/* Touch-friendly */
@media(pointer:coarse){
button,
select,
input{
min-height:42px;
}
.task-card,
.board-task-card,
.managed-board-card{
-webkit-tap-highlight-color:transparent;
}
}
/* Correcto Team v4.0 */
.font-scale-control{
display:flex;
align-items:center;
gap:5px;
padding:5px 7px;
border:1px solid #33465f;
border-radius:9px;
background:#172235;
color:#c9d5e5;
white-space:nowrap;
}
.font-scale-control input{
width:92px;
min-height:0!important;
accent-color:#5c8df6;
}
.font-scale-control span{
font-size:.67rem;
font-weight:700;
}
.font-scale-control strong{
min-width:36px;
font-size:.62rem;
color:#fff;
}
.font-scale-control button{
width:26px;
height:26px;
min-height:26px!important;
padding:0;
border:0;
border-radius:6px;
background:#263a58;
color:#fff;
}
.board-column-description{
padding:0 11px 10px;
margin-top:-2px;
background:var(--surface);
color:var(--muted);
border-bottom:1px solid var(--border);
font-size:.68rem;
line-height:1.4;
}
.board-task-meta{
align-items:center;
flex-wrap:wrap;
}
.priority-badge{
display:inline-flex;
align-items:center;
width:max-content;
padding:4px 7px;
border:1px solid currentColor;
border-radius:7px;
font-size:.61rem;
font-weight:800;
line-height:1;
text-transform:uppercase;
}
.priority-low{color:#30b86b;background:#30b86b18}
.priority-normal{color:#4385f5;background:#4385f518}
.priority-high{color:#e79828;background:#e7982818}
.priority-urgent{color:#ed5059;background:#ed505918}
.priority-critical{color:#9b6df1;background:#9b6df118}
.assignee-badge{
display:inline-flex;
align-items:center;
gap:6px;
max-width:100%;
padding:5px 7px;
border:1px solid color-mix(in srgb,var(--assignee-color) 55%,var(--border));
border-radius:7px;
background:color-mix(in srgb,var(--assignee-color) 12%,var(--surface));
color:var(--text);
font-size:.61rem;
font-weight:650;
}
.assignee-badge>span:last-child{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.assignee-dot{
flex:0 0 auto;
width:8px;
height:8px;
border-radius:50%;
background:var(--assignee-color);
box-shadow:0 0 0 3px color-mix(in srgb,var(--assignee-color) 18%,transparent);
}
.board-kanban-dashboard{
min-height:440px;
}
.board-kanban-column{
max-height:calc(100vh - 270px);
}
.board-task-card{
font-size:.78rem;
}
.board-task-title{
font-size:.78rem;
}
@media(max-width:1100px){
.font-scale-control strong{display:none}
.font-scale-control input{width:72px}
}
@media(max-width:900px){
.font-scale-control{
position:fixed;
top:12px;
right:64px;
z-index:92;
}
}
@media(max-width:640px){
.font-scale-control{
top:10px;
right:55px;
padding:4px 5px;
}
.font-scale-control input{width:58px}
.font-scale-control span{display:none}
.font-scale-control button{width:24px;height:24px}
.board-task-meta{
display:grid;
grid-template-columns:auto minmax(0,1fr);
}
.assignee-badge{
justify-self:end;
max-width:100%;
}
}
/* v4.1.0 - izbor boarda nakon prijave */
body.board-entry-open{
overflow:hidden;
}
.board-entry-overlay{
position:fixed;
inset:0;
z-index:200;
display:grid;
place-items:center;
padding:22px;
background:
radial-gradient(circle at 15% 20%,#3976ff2b,transparent 35%),
radial-gradient(circle at 85% 75%,#7557e82b,transparent 38%),
#08111fef;
backdrop-filter:blur(12px);
}
.board-entry-window{
width:min(1050px,100%);
max-height:min(790px,calc(100vh - 36px));
display:grid;
grid-template-rows:auto auto minmax(0,1fr) auto;
overflow:hidden;
border:1px solid #31445f;
border-radius:22px;
background:#101a2a;
color:#fff;
box-shadow:0 35px 100px #000a;
}
.board-entry-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:24px;
padding:28px 30px 20px;
border-bottom:1px solid #263a54;
}
.board-entry-kicker{
display:block;
margin-bottom:8px;
color:#6d9cf5;
font-size:.65rem;
font-weight:900;
letter-spacing:.18em;
}
.board-entry-header h1{
margin:0 0 7px;
font-size:1.7rem;
}
.board-entry-header p{
margin:0;
color:#99a9bf;
}
.board-entry-user{
display:flex;
align-items:center;
gap:10px;
min-width:max-content;
padding:8px 11px;
border:1px solid #31445f;
border-radius:12px;
background:#172235;
}
.board-entry-user>span{
width:38px;
height:38px;
display:grid;
place-items:center;
border-radius:10px;
background:linear-gradient(135deg,#3976ff,#7657e7);
font-weight:900;
}
.board-entry-user>div{
display:grid;
gap:2px;
}
.board-entry-user small{
color:#91a3bb;
text-transform:capitalize;
}
.board-entry-search{
display:flex;
align-items:center;
gap:14px;
padding:14px 30px;
border-bottom:1px solid #263a54;
background:#0d1726;
}
.board-entry-search input{
flex:1;
min-width:0;
border-color:#30445e;
background:#172235;
color:#fff;
}
.board-entry-search span{
color:#91a3bb;
font-size:.72rem;
white-space:nowrap;
}
.board-entry-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:11px;
align-content:start;
padding:20px 30px;
overflow-y:auto;
}
.board-entry-card{
--entry-color:#3976ff;
position:relative;
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;
gap:12px;
min-height:108px;
padding:14px;
border:1px solid #2d405a;
border-left:4px solid var(--entry-color);
border-radius:14px;
background:#172235;
color:#fff;
text-align:left;
transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.board-entry-card.main-board{
--entry-color:#65a0ff;
background:linear-gradient(135deg,#1b3153,#172235);
}
.board-entry-card-icon{
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:11px;
background:color-mix(in srgb,var(--entry-color) 20%,#101a2a);
color:var(--entry-color);
font-size:1.25rem;
font-weight:900;
}
.board-entry-card-content{
display:grid;
gap:4px;
min-width:0;
}
.board-entry-card-content strong{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:.9rem;
}
.board-entry-card-content small{
display:-webkit-box;
overflow:hidden;
color:#9eacc0;
font-size:.69rem;
line-height:1.35;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
.board-entry-card-content>span{
color:#71849f;
font-size:.62rem;
}
.board-entry-arrow{
color:#7287a4;
font-size:1.15rem;
}
.board-entry-footer{
display:flex;
justify-content:space-between;
align-items:center;
gap:14px;
padding:14px 30px;
border-top:1px solid #263a54;
background:#0d1726;
color:#8fa1b8;
font-size:.72rem;
}
@media(max-width:900px){
.board-entry-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:640px){
.board-entry-overlay{
padding:0;
}
.board-entry-window{
width:100%;
height:100%;
max-height:none;
border:0;
border-radius:0;
}
.board-entry-header{
padding:20px 16px 14px;
flex-direction:column;
}
.board-entry-header h1{
font-size:1.35rem;
}
.board-entry-user{
width:100%;
}
.board-entry-search{
padding:11px 16px;
}
.board-entry-search span{
display:none;
}
.board-entry-grid{
grid-template-columns:1fr;
padding:13px 16px;
}
.board-entry-card{
min-height:94px;
}
.board-entry-footer{
padding:11px 16px calc(11px + env(safe-area-inset-bottom));
}
.board-entry-footer>span{
display:none;
}
.board-entry-footer button{
width:100%;
}
}
/* v4.2.0 - Glavni dashboard kao početna strana */
.home-dashboard{
display:grid;
gap:16px;
}
.home-hero{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
padding:22px;
border:1px solid var(--border);
border-radius:17px;
background:
radial-gradient(circle at 85% 20%,#3976ff28,transparent 35%),
var(--surface);
box-shadow:var(--shadow);
}
.home-kicker{
display:block;
margin-bottom:7px;
color:var(--primary);
font-size:.64rem;
font-weight:900;
letter-spacing:.16em;
}
.home-hero h2{
margin:0 0 6px;
font-size:1.55rem;
}
.home-hero p{
margin:0;
color:var(--muted);
}
.home-hero-actions{
display:flex;
gap:8px;
flex-wrap:wrap;
}
.home-summary-grid{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:10px;
}
.home-summary-grid article{
display:grid;
gap:4px;
padding:14px;
border:1px solid var(--border);
border-radius:12px;
background:var(--surface);
}
.home-summary-grid article.danger{
border-color:#e04c57;
background:#e04c570d;
}
.home-summary-grid strong{
font-size:1.45rem;
}
.home-summary-grid span{
color:var(--muted);
font-size:.68rem;
}
.home-section-head{
display:flex;
justify-content:space-between;
align-items:end;
gap:15px;
margin-top:3px;
}
.home-section-head h3{
margin:0 0 3px;
}
.home-section-head p{
margin:0;
color:var(--muted);
font-size:.75rem;
}
.home-board-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
gap:11px;
}
.home-board-card{
--home-board-color:#3976ff;
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;
gap:12px;
min-height:105px;
padding:14px;
border:1px solid var(--border);
border-left:4px solid var(--home-board-color);
border-radius:14px;
background:var(--surface);
color:var(--text);
text-align:left;
box-shadow:var(--shadow);
transition:transform .15s ease,border-color .15s ease;
}
.home-board-card.weekly{
--home-board-color:#3976ff;
background:linear-gradient(135deg,#3976ff10,var(--surface));
}
.home-board-card.create{
--home-board-color:#35a853;
border-style:dashed;
}
.home-board-icon{
width:44px;
height:44px;
display:grid;
place-items:center;
border-radius:12px;
background:color-mix(in srgb,var(--home-board-color) 16%,var(--surface2));
color:var(--home-board-color);
font-size:1.3rem;
font-weight:900;
}
.home-board-content{
display:grid;
gap:4px;
min-width:0;
}
.home-board-content strong{
font-size:.88rem;
}
.home-board-content small{
display:-webkit-box;
overflow:hidden;
color:var(--muted);
line-height:1.4;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
.home-board-content>span{
color:var(--muted);
font-size:.63rem;
}
.home-board-arrow{
color:var(--muted);
font-size:1.15rem;
}
.board-entry-card.weekly-board{
--entry-color:#3976ff;
background:linear-gradient(135deg,#213a63,#172235);
}
@media(max-width:1000px){
.home-summary-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}
}
@media(max-width:700px){
.home-hero{
align-items:flex-start;
flex-direction:column;
}
.home-hero-actions{
width:100%;
}
.home-hero-actions button{
flex:1;
}
.home-summary-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.home-section-head{
align-items:flex-start;
flex-direction:column;
}
.home-section-head button{
width:100%;
}
.home-board-grid{
grid-template-columns:1fr;
}
}
@media(max-width:380px){
.home-summary-grid{
grid-template-columns:1fr;
}
}
/* v4.2.1 - datumi i isticanje po datumu */
.column-date{
margin-left:6px;
color:var(--muted);
font-size:.66rem;
font-weight:700;
}
.board-kanban-column.today-column{
border-color:#4f86ef;
box-shadow:
0 0 0 2px #3976ff33,
0 14px 34px #3976ff1f;
}
.board-kanban-column.today-column>header{
background:linear-gradient(135deg,#3976ff1c,var(--surface));
}
.board-kanban-column.today-column>header strong{
color:#8eb5ff;
}
.board-task-card.task-date-today{
border-color:#4f86ef;
box-shadow:
inset 0 0 0 1px #3976ff33,
0 8px 20px #3976ff16;
}
.board-task-card.task-date-today::before{
content:"DANAS";
display:inline-flex;
margin-bottom:7px;
padding:3px 6px;
border-radius:6px;
background:#3976ff1c;
color:#77a6ff;
font-size:.56rem;
font-weight:900;
letter-spacing:.06em;
}
.board-task-card.task-date-overdue{
border-color:#e04c57;
background:linear-gradient(135deg,#e04c570e,var(--surface));
}
.board-task-card.task-date-overdue::before{
content:"KASNI";
display:inline-flex;
margin-bottom:7px;
padding:3px 6px;
border-radius:6px;
background:#e04c571c;
color:#ff7b84;
font-size:.56rem;
font-weight:900;
letter-spacing:.06em;
}
.board-task-card.task-date-future{
border-color:#31445f;
}
.assignee-badge{
font-weight:750;
}
@media(max-width:640px){
.column-date{
display:block;
margin:2px 0 0;
}
}
/* v4.3.0 */
.board-kanban-dashboard{
overflow-x:auto;
overflow-y:hidden;
scroll-behavior:smooth;
scrollbar-width:auto;
scrollbar-color:#4b6382 #111c2d;
padding-bottom:14px;
}
.board-kanban-dashboard::-webkit-scrollbar{height:14px}
.board-kanban-dashboard::-webkit-scrollbar-track{background:#111c2d;border-radius:999px}
.board-kanban-dashboard::-webkit-scrollbar-thumb{background:#4b6382;border:3px solid #111c2d;border-radius:999px}
.board-kanban-column{position:relative;cursor:grab}
.board-kanban-column:active{cursor:grabbing}
.board-kanban-column.column-dragging{opacity:.42}
.board-kanban-column.column-drop-before::before,
.board-kanban-column.column-drop-after::after{
content:"";position:absolute;top:0;bottom:0;width:4px;z-index:5;
border-radius:999px;background:#5c8df6;box-shadow:0 0 14px #3976ff
}
.board-kanban-column.column-drop-before::before{left:-7px}
.board-kanban-column.column-drop-after::after{right:-7px}
.board-task-card{position:relative;cursor:grab}
.board-task-card.dragging{opacity:.35}
.board-task-card.task-drop-before::before,
.board-task-card.task-drop-after::after{
content:"";position:absolute;left:4px;right:4px;height:3px;z-index:6;
border-radius:999px;background:#5c8df6;box-shadow:0 0 10px #3976ff
}
.board-task-card.task-drop-before::before{top:-6px}
.board-task-card.task-drop-after::after{bottom:-6px}
.task-context-menu{
position:fixed;z-index:300;width:215px;display:grid;gap:4px;padding:7px;
border:1px solid #344863;border-radius:11px;background:#111b2b;
box-shadow:0 18px 50px #000a
}
.task-context-menu button{
width:100%;justify-content:flex-start;padding:9px 10px;border:0;border-radius:7px;
background:transparent;color:#e5edf8;text-align:left
}
/* v4.4.0 - compact Trello-like layout */
.app-header{
min-height:48px;
padding:6px 14px;
gap:12px;
}
.brand{font-size:18px}
.nav-button,
.dropdown-toggle{padding:7px 9px}
.header-tools{gap:6px}
.profile-button{padding:3px 6px}
.avatar{width:27px;height:27px}
.global-search input{padding:7px 9px}
.app-main{
padding:8px 10px 14px;
}
#pageHeader:empty{display:none}
.page-header{
margin-bottom:7px;
}
.page-header h1{font-size:22px}
.board-dashboard-shell,
.board-dashboard-header{
margin-top:0!important;
}
.board-dashboard-header,
.board-view-header{
padding-top:0!important;
margin-bottom:7px!important;
}
.board-kanban-dashboard{
margin-top:0!important;
}
.nav-delivery{
color:#bae6fd;
}
/* Razvoz */
.razvoz-page{
min-height:calc(100vh - 68px);
}
.razvoz-toolbar{
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:3px 3px 8px;
}
.razvoz-title{
display:flex;
align-items:center;
gap:9px;
}
.razvoz-title h1{
margin:0;
font-size:21px;
}
.razvoz-title p{
margin:2px 0 0;
color:var(--muted);
font-size:11px;
text-transform:uppercase;
font-weight:800;
letter-spacing:.04em;
}
.razvoz-icon{
width:34px;
height:34px;
display:grid;
place-items:center;
border-radius:9px;
background:#0ea5e91e;
font-size:18px;
}
.razvoz-actions{
display:flex;
align-items:center;
gap:6px;
flex-wrap:wrap;
}
.razvoz-actions button{
padding:7px 10px;
}
.razvoz-board{
display:grid;
grid-auto-flow:column;
grid-auto-columns:minmax(260px,310px);
align-items:start;
gap:9px;
overflow-x:auto;
overflow-y:hidden;
padding:1px 1px 15px;
min-height:calc(100vh - 125px);
scrollbar-width:auto;
}
.delivery-day{
display:flex;
flex-direction:column;
max-height:calc(100vh - 130px);
background:color-mix(in srgb,var(--surface2) 94%,#000 6%);
border:1px solid var(--border);
border-radius:12px;
overflow:hidden;
}
.delivery-day.today{
border:2px solid #38bdf8;
box-shadow:0 0 0 2px #38bdf820,0 10px 28px #0284c720;
}
.delivery-day>header{
min-height:46px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:9px 10px;
background:var(--surface);
border-bottom:1px solid var(--border);
}
.delivery-day.today>header{
background:linear-gradient(135deg,#0284c722,var(--surface));
}
.delivery-day>header div{
display:flex;
align-items:baseline;
gap:6px;
}
.delivery-day>header strong{
font-size:12.5px;
text-transform:capitalize;
}
.delivery-day>header span{
color:var(--muted);
font-size:10.5px;
font-weight:800;
}
.delivery-day>header b{
min-width:24px;
padding:4px 6px;
border-radius:999px;
background:var(--surface2);
color:var(--muted);
text-align:center;
font-size:10px;
}
.delivery-list{
display:grid;
gap:7px;
align-content:start;
padding:7px;
overflow-y:auto;
}
.delivery-card{
padding:9px;
border:1px solid var(--border);
border-radius:9px;
background:var(--surface);
box-shadow:0 3px 12px #00000012;
cursor:pointer;
}
.delivery-card.completed{
opacity:.58;
}
.delivery-card.completed .delivery-card-title strong{
text-decoration:line-through;
}
.delivery-card-top{
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
gap:7px;
align-items:start;
}
.delivery-complete{
width:18px;
height:18px;
display:grid;
place-items:center;
padding:0;
border:1px solid #7c8ca1;
border-radius:50%;
background:transparent;
color:#fff;
font-size:11px;
}
.delivery-complete.checked{
border-color:#22c55e;
background:#22c55e;
}
.delivery-card-title{
min-width:0;
display:grid;
gap:5px;
}
.delivery-card-title strong{
font-size:12.5px;
line-height:1.35;
}
.delivery-card-title span{
color:var(--muted);
font-size:10.5px;
line-height:1.35;
}
.delivery-more{
border:0;
background:transparent;
color:var(--muted);
font-weight:900;
}
.delivery-meta{
display:flex;
gap:8px;
flex-wrap:wrap;
margin:8px 0 0 25px;
font-size:10px;
color:var(--muted);
}
.delivery-meta a{
color:inherit;
text-decoration:none;
}
.delivery-card p{
margin:7px 0 0 25px;
padding:6px 7px;
border-radius:6px;
background:var(--surface2);
color:var(--muted);
font-size:10.5px;
}
.delivery-card footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:7px;
margin:8px 0 0 25px;
color:var(--muted);
font-size:9px;
}
.priority-dot{
padding:3px 6px;
border-radius:999px;
background:var(--surface2);
text-transform:uppercase;
font-weight:900;
}
.priority-dot.high{color:#f59e0b}
.priority-dot.urgent{color:#ef4444}
.priority-dot.critical{color:#a855f7}
.delivery-empty{
padding:24px 8px;
color:var(--muted);
text-align:center;
font-size:10.5px;
}
.delivery-add-day{
width:100%;
margin-top:auto;
padding:9px 10px;
border:0;
border-top:1px solid var(--border);
background:transparent;
color:var(--muted);
text-align:left;
font-size:11px;
}
.task-switch-row{
display:flex!important;
align-items:center;
gap:9px;
padding:9px 10px;
border:1px solid var(--border);
border-radius:9px;
background:var(--surface2);
}
.task-switch-row>span{
display:grid;
gap:2px;
}
.task-switch-row small{
color:var(--muted);
font-size:10px;
}
.delivery-switch{
border-color:#0ea5e94a;
background:#0ea5e90d;
}
.delivery-fields{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
padding:10px;
border:1px solid #0ea5e941;
border-radius:9px;
background:#0ea5e908;
}
.delivery-fields .full{
grid-column:1/-1;
}
@media(max-width:900px){
.app-main{padding:6px 7px 12px}
.razvoz-toolbar{
align-items:flex-start;
flex-direction:column;
}
.razvoz-board{
grid-auto-columns:minmax(82vw,320px);
min-height:calc(100vh - 165px);
}
.delivery-day{
max-height:calc(100vh - 170px);
}
}
@media(max-width:600px){
.delivery-fields{grid-template-columns:1fr}
.delivery-fields .full{grid-column:auto}
}
/* v4.4.2 - auto scroll while dragging */
.board-kanban-dashboard.drag-auto-scroll-active{
scroll-behavior:auto;
}
.board-task-card.dragging,
.board-kanban-column.column-dragging{
user-select:none;
}
/* v4.4.3 - Razvoz standalone + mobile today focus */
body.razvoz-standalone .app-header{
min-height:42px;
padding:4px 10px;
}
body.razvoz-standalone .app-header .nav,
body.razvoz-standalone .app-header .global-search,
body.razvoz-standalone .app-header .header-tools>*:not(.profile){
display:none!important;
}
body.razvoz-standalone .app-main{
padding-top:4px;
}
body.razvoz-standalone .razvoz-page{
min-height:calc(100vh - 50px);
}
.razvoz-mobile-tabs{
display:none;
}
@media(max-width:900px){
body.razvoz-standalone .app-header{
position:sticky;
top:0;
z-index:30;
}
body.razvoz-standalone .brand{
font-size:16px;
}
body.razvoz-standalone .razvoz-toolbar{
position:sticky;
top:42px;
z-index:24;
padding:8px 2px;
background:var(--bg);
border-bottom:1px solid var(--border);
}
body.razvoz-standalone .razvoz-title h1{
font-size:18px;
}
body.razvoz-standalone .razvoz-title p{
font-size:10px;
}
.razvoz-mobile-tabs{
position:sticky;
top:109px;
z-index:23;
display:grid;
grid-template-columns:repeat(7,minmax(44px,1fr));
gap:4px;
padding:6px 0 8px;
background:var(--bg);
}
.razvoz-mobile-tab{
position:relative;
display:grid;
place-items:center;
gap:1px;
min-width:0;
padding:6px 2px;
border:1px solid var(--border);
border-radius:9px;
background:var(--surface);
color:var(--muted);
}
.razvoz-mobile-tab span{
font-size:9px;
text-transform:uppercase;
font-weight:800;
}
.razvoz-mobile-tab strong{
font-size:14px;
color:var(--text);
}
.razvoz-mobile-tab small{
position:absolute;
top:-5px;
right:-3px;
min-width:16px;
height:16px;
display:grid;
place-items:center;
padding:0 3px;
border-radius:999px;
background:var(--surface2);
font-size:8px;
font-weight:900;
}
.razvoz-mobile-tab.today{
border-color:#38bdf8;
}
.razvoz-mobile-tab.active{
background:#0ea5e91c;
border-color:#38bdf8;
box-shadow:0 0 0 2px #38bdf81b;
}
.razvoz-board{
display:block;
overflow:visible;
min-height:auto;
padding-bottom:20px;
}
.delivery-day{
display:none;
max-height:none;
min-height:calc(100vh - 190px);
}
.delivery-day.mobile-active{
display:flex;
}
.delivery-list{
overflow:visible;
}
.delivery-card{
padding:12px;
border-radius:12px;
}
.delivery-card-title strong{
font-size:14px;
}
.delivery-card-title span,
.delivery-meta,
.delivery-card p{
font-size:12px;
}
.razvoz-actions{
width:100%;
}
.razvoz-actions #newDeliveryTask{
margin-left:auto;
}
}
@media(max-width:520px){
body.razvoz-standalone .app-main{
padding:4px 6px 12px;
}
.razvoz-toolbar{
gap:6px;
}
.razvoz-actions button{
padding:7px 8px;
font-size:11px;
}
.razvoz-mobile-tabs{
top:104px;
gap:3px;
}
.razvoz-mobile-tab{
padding:5px 1px;
}
.razvoz-mobile-tab span{
font-size:8px;
}
.razvoz-mobile-tab strong{
font-size:13px;
}
}
/* v4.5.0 - clean board */
.board-kanban-clean{
min-height:calc(100vh - 74px);
margin-top:0!important;
}
.board-kanban-clean .board-kanban-column{
margin-top:0;
}
.board-context-menu{
width:220px;
}
.board-task-card.task-date-overdue::before{
display:none!important;
content:none!important;
}
.board-task-card.task-date-overdue{
border-color:var(--border)!important;
background:var(--surface)!important;
}
/* dashboard quick navigation */
.home-quick-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
margin:14px 0 22px;
}
.home-quick-card{
display:flex;
align-items:center;
gap:12px;
min-height:82px;
padding:14px;
border:1px solid var(--border);
border-radius:14px;
background:var(--surface);
color:var(--text);
text-align:left;
}
.home-quick-card>span{
width:42px;
height:42px;
display:grid;
place-items:center;
flex:0 0 42px;
border-radius:11px;
background:#3976ff17;
font-size:20px;
}
.home-quick-card>div{
display:grid;
gap:4px;
}
.home-quick-card strong{
font-size:14px;
}
.home-quick-card small{
color:var(--muted);
line-height:1.35;
}
/* labels */
.label-manager{
display:grid;
gap:12px;
}
.label-create-row,
.label-manager-row{
display:grid;
grid-template-columns:minmax(150px,1fr) 54px auto auto;
gap:8px;
align-items:center;
}
.label-manager-row{
grid-template-columns:minmax(110px,180px) minmax(130px,1fr) 54px auto auto;
padding:9px;
border:1px solid var(--border);
border-radius:10px;
background:var(--surface2);
}
.label-preview{
display:inline-flex;
align-items:center;
min-height:30px;
padding:5px 9px;
border-radius:7px;
color:#fff;
font-size:11px;
font-weight:900;
}
.form-help{
color:var(--muted);
}
@media(max-width:900px){
.home-quick-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:620px){
.home-quick-grid{
grid-template-columns:1fr;
}
.label-create-row,
.label-manager-row{
grid-template-columns:1fr 54px;
}
.label-manager-row .label-preview{
grid-column:1/-1;
}
.label-manager-row button{
grid-column:auto;
}
}
/* v4.5.3 — checklist while creating a task */
.checklist-head-actions{align-items:center;gap:8px}
.task-checklist-section #newTaskChecklistPanel{margin-top:10px}
.new-check-item{display:flex;align-items:center;justify-content:space-between;gap:10px}
.check-remove-button{
width:30px;min-width:30px;height:30px;border:0;border-radius:8px;
background:rgba(220,53,69,.12);font-size:20px;line-height:1;cursor:pointer
}
/* v4.5.5 — korisnici */
.form-error{
padding:12px 14px;
border:1px solid rgba(220,53,69,.35);
border-radius:10px;
background:rgba(220,53,69,.10);
font-weight:700;
}
.form-grid label small{
display:block;
margin-top:5px;
opacity:.72;
font-size:12px;
line-height:1.35;
}
.password-field{display:flex;gap:8px;align-items:center}.password-field input{flex:1}.password-toggle{white-space:nowrap}
/* v4.5.6 premium white */
:root{--main-background-image:none;--premium-surface:rgba(255,255,255,.94);--premium-shadow:0 18px 50px rgba(31,48,78,.10)}
body:not(.dark){background:#f5f7fb;background-image:linear-gradient(rgba(247,249,253,.90),rgba(247,249,253,.94)),var(--main-background-image);background-size:cover;background-position:center;background-attachment:fixed;color:#172033}
body:not(.dark) .app-header{background:rgba(255,255,255,.90);backdrop-filter:blur(18px);border-bottom:1px solid rgba(31,48,78,.08);box-shadow:0 8px 30px rgba(31,48,78,.06)}
body:not(.dark) .panel,
body:not(.dark) .board-kanban-column,
body:not(.dark) .managed-board-card,
body:not(.dark) dialog{background:var(--premium-surface);border:1px solid rgba(31,48,78,.09);box-shadow:var(--premium-shadow)}
body:not(.dark) .board-task-card{background:#fff;border:1px solid rgba(31,48,78,.09);box-shadow:0 8px 22px rgba(31,48,78,.07)}
body:not(.dark) input,
body:not(.dark) select,
body:not(.dark) textarea{background:#fff;border-color:#dfe5ef;color:#172033}
.board-kanban-dashboard{overflow-x:auto;overscroll-behavior-x:contain;scroll-behavior:smooth;cursor:grab}.board-kanban-dashboard:active{cursor:grabbing}
.task-completed-by{margin-top:8px;padding:7px 9px;border-radius:9px;background:#eaf8ef;color:#18733a;font-size:11px;font-weight:800}
.task-postponed-note{margin-top:8px;padding:7px 9px;border-radius:9px;background:#fff4df;color:#8a5700;font-size:11px;font-weight:750;line-height:1.35}
.board-task-card.completed{opacity:.84;border-color:rgba(35,162,89,.28)}
/* Correcto Team v4.5.7 - Premium Command Dashboard */
:root{
--premium-bg:#f4f7fb;
--premium-card:#ffffff;
--premium-border:#e3e9f2;
--premium-text:#182033;
--premium-muted:#6f7b91;
--premium-blue:#2457e6;
--premium-blue-soft:#edf3ff;
}
body:not(.dark-theme){background:linear-gradient(180deg,#f8faff 0,#f2f5fa 46%,#edf1f7 100%);color:var(--premium-text)}
.command-dashboard{display:grid;gap:16px;max-width:1680px;margin:0 auto}
.dashboard-welcome{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px 30px;border:1px solid #dce5f2;border-radius:24px;background:linear-gradient(135deg,#ffffff 0%,#f7faff 62%,#eaf1ff 100%);box-shadow:0 18px 50px rgba(28,48,88,.09)}
.dashboard-welcome:after{content:"";position:absolute;right:-110px;top:-150px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(36,87,230,.16),rgba(36,87,230,0) 68%);pointer-events:none}
.dashboard-eyebrow{display:block;margin-bottom:8px;color:#2457e6;font-size:11px;font-weight:900;letter-spacing:.16em}
.dashboard-welcome h2{margin:0 0 8px;font-size:clamp(24px,3vw,38px);letter-spacing:-.04em}
.dashboard-welcome p{max-width:720px;margin:0;color:#66738a;line-height:1.65}
.dashboard-welcome-actions{position:relative;z-index:1;display:flex;gap:9px;flex-wrap:wrap}
.dashboard-drag-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:15px;align-items:start}
.dashboard-widget{grid-column:span 4;min-width:0;border:1px solid var(--premium-border);border-radius:20px;background:rgba(255,255,255,.94);box-shadow:0 10px 28px rgba(28,48,88,.07);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.dashboard-widget.wide{grid-column:span 12}
.dashboard-widget.is-dragging{opacity:.44;transform:scale(.985);box-shadow:0 22px 55px rgba(36,87,230,.2)}
.dashboard-widget.drag-target{border-color:#2457e6;box-shadow:0 0 0 4px rgba(36,87,230,.1),0 18px 40px rgba(28,48,88,.12)}
.dashboard-widget-handle{display:flex;justify-content:space-between;align-items:center;padding:14px 17px;border-bottom:1px solid #edf1f6;background:linear-gradient(180deg,#fff,#fbfcfe);cursor:grab;user-select:none}
.dashboard-widget-handle:active{cursor:grabbing}
.dashboard-widget-handle>div{display:flex;align-items:center;gap:9px}.dashboard-widget-handle strong{font-size:14px}.dashboard-widget-handle small{color:#9aa5b7;font-size:10px}.drag-grip{color:#9ba7ba;font-size:19px;line-height:1}
.dashboard-widget-body{padding:16px}
.dashboard-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dashboard-stat{position:relative;overflow:hidden;display:grid;gap:7px;min-height:126px;padding:17px;border:1px solid #e6ebf3;border-radius:16px;background:#fff}
.dashboard-stat:after{content:"";position:absolute;right:-18px;bottom:-35px;width:110px;height:110px;border-radius:50%;background:var(--stat-glow,#edf3ff)}
.dashboard-stat span,
.dashboard-stat small,
.dashboard-stat strong{position:relative;z-index:1}.dashboard-stat span{color:#6e7990;font-size:11px;font-weight:700}.dashboard-stat strong{font-size:32px;letter-spacing:-.04em}.dashboard-stat small{margin-top:auto;color:#9aa5b5;font-size:10px}.dashboard-stat.active{--stat-glow:#eaf1ff}.dashboard-stat.completed{--stat-glow:#e8f8ef}.dashboard-stat.boards{--stat-glow:#f3edff}.dashboard-stat.week{--stat-glow:#fff2df}
.dashboard-action-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.dashboard-action-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:15px;border:1px solid #e3e9f2;border-radius:15px;background:#fff;color:#192236;text-align:left;transition:.18s ease}
.dashboard-action-card>span{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#edf3ff;font-size:19px}.dashboard-action-card div{display:grid;gap:4px}.dashboard-action-card strong{font-size:13px}.dashboard-action-card small{color:#7b879b;font-size:10px;line-height:1.4}.dashboard-action-card b{color:#2457e6}
.dashboard-board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:11px}
.dashboard-board-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:15px;border:1px solid #e2e8f1;border-left:4px solid var(--board-accent,#2457e6);border-radius:15px;background:#fff;color:#192236;text-align:left;transition:.18s ease}
.dashboard-board-card.weekly{--board-accent:#6c4ee3}.dashboard-board-card.create{--board-accent:#9aa5b5;border-style:dashed}.dashboard-board-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--board-accent) 11%,#fff);color:var(--board-accent);font-size:20px;font-weight:900}.dashboard-board-card>span:nth-child(2){display:grid;gap:4px}.dashboard-board-card strong{font-size:13px}.dashboard-board-card small{color:#7e899c;font-size:10px}.dashboard-board-card b{color:var(--board-accent);font-size:10px}
.dashboard-focus-content{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}.focus-ring{width:112px;height:112px;display:grid;place-items:center;align-content:center;border-radius:50%;background:radial-gradient(circle at center,#fff 54%,transparent 55%),conic-gradient(#2457e6 0 72%,#e8edf5 72%);box-shadow:inset 0 0 0 1px #e2e8f1}.focus-ring strong{font-size:28px}.focus-ring span{color:#7e899c;font-size:10px}.dashboard-focus-content h3{margin:0 0 7px}.dashboard-focus-content p{margin:0 0 13px;color:#738096;font-size:12px;line-height:1.55}
.dashboard-tip-list{display:grid;gap:10px}.dashboard-tip-list p{display:flex;align-items:center;gap:10px;margin:0;padding:10px;border-radius:12px;background:#f7f9fc;color:#657188;font-size:12px}.dashboard-tip-list span{width:26px;height:26px;display:grid;place-items:center;border-radius:9px;background:#eaf1ff;color:#2457e6;font-weight:900}
/* Premium full-board drag and drop UX */
.board-kanban-clean{scroll-behavior:smooth;cursor:grab;padding:4px 4px 18px;gap:14px}
.board-kanban-clean:active{cursor:grabbing}
.board-kanban-clean .board-kanban-column{min-width:310px;width:310px;border:1px solid #dfe6ef;border-radius:18px;background:#f7f9fc;box-shadow:0 10px 26px rgba(31,49,83,.07);transition:.18s ease}
.board-kanban-clean .board-kanban-column>header{padding:14px 15px;background:#fff;border-bottom:1px solid #e8edf4;cursor:grab}
.board-kanban-clean .board-kanban-column.column-dragging{opacity:.45;transform:scale(.98)}
.board-kanban-clean .board-kanban-column.column-drop-before{box-shadow:-6px 0 0 #2457e6,0 16px 35px rgba(31,49,83,.11)}
.board-kanban-clean .board-kanban-column.column-drop-after{box-shadow:6px 0 0 #2457e6,0 16px 35px rgba(31,49,83,.11)}
.board-kanban-clean .board-column-list{padding:11px;gap:10px;min-height:100px}
.board-kanban-clean .board-task-card{position:relative;padding:13px;border:1px solid #e1e7f0;border-left:4px solid var(--primary);border-radius:14px;background:#fff;box-shadow:0 5px 15px rgba(29,45,75,.06);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.board-kanban-clean .board-task-card.dragging{opacity:.35;transform:rotate(1deg) scale(.98)}
.board-kanban-clean .board-task-card.task-drop-before:before,
.board-kanban-clean .board-task-card.task-drop-after:after{content:"";position:absolute;left:0;right:0;height:3px;border-radius:3px;background:#2457e6;box-shadow:0 0 0 3px rgba(36,87,230,.1)}
.board-kanban-clean .board-task-card.task-drop-before:before{top:-7px}.board-kanban-clean .board-task-card.task-drop-after:after{bottom:-7px}
.board-kanban-clean .add-task{margin:0 10px 11px;padding:11px;border:1px dashed #cbd5e4;border-radius:12px;background:transparent;color:#65738a}
@media(max-width:1100px){.dashboard-widget{grid-column:span 6}.dashboard-widget.wide{grid-column:span 12}.dashboard-stat-grid,
.dashboard-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.dashboard-welcome{align-items:flex-start;flex-direction:column;padding:21px}.dashboard-welcome-actions{width:100%}.dashboard-welcome-actions button{flex:1}.dashboard-drag-grid{grid-template-columns:1fr}.dashboard-widget,
.dashboard-widget.wide{grid-column:1}.dashboard-stat-grid,
.dashboard-action-grid{grid-template-columns:1fr}.dashboard-focus-content{grid-template-columns:1fr}.focus-ring{margin:auto}.board-kanban-clean .board-kanban-column{min-width:86vw;width:86vw}}
/* Correcto Team v4.5.8 - high contrast productivity UX */
body:not(.dark){--bg:#eef3f9;--surface:#fff;--surface2:#f6f8fc;--text:#14213d;--muted:#66758f;--border:#d8e1ee;--primary:#316cff;--header:#fff;--shadow:0 8px 24px rgba(28,48,88,.09)}
body.dark{--bg:#0d1422;--surface:#172235;--surface2:#111b2a;--text:#edf4ff;--muted:#9cadc4;--border:#2a3b54;--primary:#6f9cff;--header:#101a2a;--shadow:0 12px 30px rgba(0,0,0,.28);background:linear-gradient(180deg,#0c1422,#111b2a)!important;color:var(--text)!important}
body.dark .app-header{background:rgba(13,20,34,.96)!important;border-color:#263750!important}
body.dark .dashboard-welcome,
body.dark .dashboard-widget,
body.dark .dashboard-widget-handle,
body.dark .dashboard-stat,
body.dark .dashboard-action-card,
body.dark .dashboard-board-card,
body.dark .board-kanban-column,
body.dark .board-kanban-column>header,
body.dark .board-task-card{background:var(--surface)!important;color:var(--text)!important;border-color:var(--border)!important}
body.dark .dashboard-welcome p,
body.dark .dashboard-action-card small,
body.dark .dashboard-board-card small,
body.dark .dashboard-stat span,
body.dark .dashboard-stat small{color:var(--muted)!important}
body.dark .dashboard-tip-list p{background:var(--surface2);color:var(--muted)}
.dashboard-stat{border-top:4px solid var(--stat-color,#316cff)!important;box-shadow:0 8px 20px rgba(28,48,88,.07)}
.dashboard-stat.active{--stat-color:#316cff;background:linear-gradient(145deg,#fff,#eef4ff)}
.dashboard-stat.completed{--stat-color:#22a06b;background:linear-gradient(145deg,#fff,#eaf9f1)}
.dashboard-stat.boards{--stat-color:#8b5cf6;background:linear-gradient(145deg,#fff,#f3edff)}
.dashboard-stat.week{--stat-color:#f59e0b;background:linear-gradient(145deg,#fff,#fff5df)}
.dashboard-action-card:nth-child(1)>span{background:#fff0d8;color:#d97706}.dashboard-action-card:nth-child(2)>span{background:#eee9ff;color:#7147d9}.dashboard-action-card:nth-child(3)>span{background:#e6f8ef;color:#168a55}.dashboard-action-card:nth-child(4)>span{background:#e9f1ff;color:#2563eb}
.dashboard-action-card{border-bottom:3px solid transparent}
.dashboard-widget-handle{border-left:5px solid #316cff}
.dashboard-board-card{box-shadow:0 6px 18px rgba(28,48,88,.06)}
.board-kanban-clean{background:linear-gradient(180deg,rgba(230,238,249,.65),rgba(239,244,250,.2));border-radius:20px;padding:12px 12px 20px!important;user-select:none}
.board-kanban-clean.is-panning{cursor:grabbing!important;scroll-behavior:auto}
.board-kanban-clean .board-kanban-column{background:#f3f6fb!important;border-top:5px solid var(--column-accent,#316cff)!important;box-shadow:0 12px 28px rgba(30,53,92,.10)!important}
.board-kanban-clean .board-kanban-column:nth-child(6n/**/+1){--column-accent:#316cff}.board-kanban-clean .board-kanban-column:nth-child(6n/**/+2){--column-accent:#8b5cf6}.board-kanban-clean .board-kanban-column:nth-child(6n/**/+3){--column-accent:#16a36a}.board-kanban-clean .board-kanban-column:nth-child(6n/**/+4){--column-accent:#f59e0b}.board-kanban-clean .board-kanban-column:nth-child(6n/**/+5){--column-accent:#ef476f}.board-kanban-clean .board-kanban-column:nth-child(6n/**/+6){--column-accent:#64748b}
.board-kanban-clean .board-kanban-column>header{background:linear-gradient(180deg,#fff,#f8faff)!important}
.board-kanban-clean .board-task-card{border-left-color:var(--column-accent,#316cff)!important;box-shadow:0 5px 14px rgba(30,53,92,.08)!important}
.board-kanban-clean .add-task{background:rgba(255,255,255,.72)!important;font-weight:750}
body.dark .board-kanban-clean{background:#0f1929}.body.dark .board-kanban-column{background:#121e30!important}
/* Correcto Team v4.5.10 — warm premium workspace */
:root{
--bg:#f4eee7;--surface:#fffaf5;--surface2:#f8f1e9;--text:#231f1b;--muted:#776f66;
--border:#e6d9cb;--primary:#f97316;--header:#211c17;--shadow:0 10px 28px #6b452315;
--main-background-image:none;
}
body.dark{--bg:#16130f;--surface:#211d18;--surface2:#29231d;--text:#f8efe5;--muted:#b8aa9b;--border:#42382e;--header:#100e0c;--shadow:0 12px 32px #0007}
html,
body{min-height:100%}
body{font-family:"Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif;background:
linear-gradient(115deg,#f3e8dcdd,#fff7edcc),var(--main-background-image),var(--bg);background-size:cover;background-position:center;background-attachment:fixed}
body[data-background="sand"]{background:linear-gradient(135deg,#ede0cf,#f8f1e8 48%,#ecd8c1)}
body[data-background="peach"]{background:linear-gradient(135deg,#ffe4d2,#fff2e8 45%,#f6d4c0)}
body[data-background="mist"]{background:linear-gradient(135deg,#e8e4df,#f7f4ef 50%,#dfd8cf)}
body[data-background="custom"]{background-image:linear-gradient(115deg,#291b1244,#fff7ed22),var(--main-background-image)}
body.dark{background:linear-gradient(135deg,#16130fe8,#241d17e8),var(--main-background-image),var(--bg)}
.app-view{min-height:100vh;background:transparent}
.app-main{padding:18px 22px 28px;background:transparent}
.app-header.warm-header{position:sticky;top:0;display:grid;grid-template-columns:auto minmax(520px,1fr) auto;gap:18px;padding:10px 20px;background:linear-gradient(90deg,#211c17,#2c241d);border-bottom:1px solid #ffffff18;box-shadow:0 8px 30px #24180f28}
.brand-wrap,
.brand,
.header-tools,
.profile-button{display:flex;align-items:center}.brand{gap:8px;color:#fff}.brand b{color:#ff9b52}.brand small{padding:3px 7px;border-radius:999px;background:#f9731626;color:#ffb078;font-size:10px}.brand-logo{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#ff8a2a,#f35d0c);color:#fff;font-weight:900;box-shadow:0 7px 18px #f9731640}
.main-nav{justify-content:flex-start}.nav-button,
.dropdown-toggle{color:#d9cfc5}.nav-button.active{background:#f9731622;color:#fff}.nav-button.active{box-shadow:inset 0 0 0 1px #ff984f44}
.header-tools{gap:8px}.global-search{width:min(470px,30vw)}.global-search input{background:#fffaf5;color:#2c251f;border-color:#e5d6c7;box-shadow:inset 0 1px 0 #fff}.header-icon-button{width:38px;height:38px;border:1px solid #ffffff1c;border-radius:10px;background:#ffffff10;color:#fff;font-size:18px}
.profile-button{background:#ffffff10;border:1px solid #ffffff16;padding:4px 8px}.avatar{background:linear-gradient(135deg,#f97316,#fb923c)}.profile-copy{display:grid;text-align:left}.profile-copy strong{font-size:12px}.profile-copy small{font-size:10px;color:#cdbfb1}.profile-menu{right:0}.dropdown-menu{background:#241e19;border-color:#4b3b2e}
.page-header h1{font-size:1.75rem;line-height:2rem;font-weight:653;letter-spacing:-.025em}.page-header{padding:4px 2px 10px}.page-header p{color:#756a60}
.command-dashboard,
.board-dashboard-shell{background:transparent}.dashboard-welcome{background:linear-gradient(135deg,#2a2119ee,#4b3022e8);border:1px solid #ffffff1c;box-shadow:0 18px 40px #5e321c24}.dashboard-welcome h2,
.dashboard-welcome p{color:#fff}.dashboard-eyebrow{color:#ffb27d}
.dashboard-widget,
.panel,
.archive-card,
.list-card,
.board-kanban-column{background:color-mix(in srgb,var(--surface) 94%,transparent);border-color:color-mix(in srgb,var(--border) 90%,#fff);box-shadow:0 9px 26px #6a3e1d12,0 1px 0 #fff inset;backdrop-filter:blur(10px)}
.dashboard-widget-handle{background:linear-gradient(180deg,#fffaf8,#f8eee4);border-bottom:1px solid var(--border)}body.dark .dashboard-widget-handle{background:linear-gradient(180deg,#28211b,#211c17)}
.dashboard-stat{min-height:116px;border:1px solid transparent;box-shadow:0 8px 22px #3d2b1b0c}.dashboard-stat.active{background:linear-gradient(135deg,#fff1e6,#ffe5cf);border-color:#fac79f}.dashboard-stat.completed{background:linear-gradient(135deg,#eef9ec,#dcf3db);border-color:#addbaa}.dashboard-stat.boards{background:linear-gradient(135deg,#eef4ff,#dfeaff);border-color:#b9cdef}.dashboard-stat.week{background:linear-gradient(135deg,#f8efff,#ede0fb);border-color:#d3b9ed}
body.dark .dashboard-stat.active,
body.dark .dashboard-stat.completed,
body.dark .dashboard-stat.boards,
body.dark .dashboard-stat.week{background:var(--surface2);border-color:var(--border)}
.dashboard-action-card{border-color:#ead8c6;background:linear-gradient(145deg,#fffaf5,#f6eee6)}.dashboard-action-card>span{background:#ffeddc;color:#ea650e}.dashboard-board-card{background:linear-gradient(145deg,#fffaf5,#f7eee6);border-color:#e7d7c7}
.board-kanban-dashboard{overflow:auto!important;max-height:calc(100vh - 250px);padding:4px 4px 17px;scrollbar-color:#c47b48 #eadfd3}.board-kanban-dashboard::-webkit-scrollbar{width:14px;height:14px}.board-kanban-dashboard::-webkit-scrollbar-track{background:#eadfd3;border-radius:999px}.board-kanban-dashboard::-webkit-scrollbar-thumb{background:#c47b48;border:3px solid #eadfd3;border-radius:999px}.board-kanban-dashboard.is-panning{cursor:grabbing!important;user-select:none}.board-kanban-column{background:#f7eee6;border-color:#e4d3c2}.board-kanban-column>header{background:#fffaf6}.board-task-card{background:#fffdf9;border-color:#e9ddd1;box-shadow:0 4px 13px #5f3a2010}
.primary-button{background:linear-gradient(135deg,#fb7b22,#ed5f08);box-shadow:0 7px 16px #f9731633}.secondary-button{background:#fff8f1;border:1px solid #e6d4c3}.dark .secondary-button{background:#2b241e}
.background-picker{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:20px;background:#1f140e99;backdrop-filter:blur(8px)}.background-picker-card{width:min(620px,94vw);padding:20px;border-radius:20px;background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:0 28px 90px #0006}.background-picker-card header{display:flex;align-items:center;justify-content:space-between}.background-picker-card header div{display:grid;gap:4px}.background-picker-card header small{color:var(--muted)}.background-picker-card header button{border:0;background:transparent;color:inherit;font-size:26px}.background-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.background-presets button{min-height:82px;border:1px solid #00000012;border-radius:14px;font-weight:800}.bg-warm{background:linear-gradient(135deg,#f2e7dc,#fff7ed)}.bg-sand{background:linear-gradient(135deg,#e7d4bd,#faf0e4)}.bg-peach{background:linear-gradient(135deg,#ffd8c0,#fff1e7)}.bg-mist{background:linear-gradient(135deg,#ded9d3,#f5f2ee)}.background-upload{display:grid;place-items:center;gap:5px;padding:25px;border:2px dashed #e4c8af;border-radius:16px;background:#fff6ed;cursor:pointer;color:#5d4030}.dark .background-upload{background:#2b241e}.background-upload input{display:none}.background-upload span{font-weight:850}.background-upload small{color:var(--muted)}.background-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:16px}
@media(max-width:1250px){.app-header.warm-header{grid-template-columns:auto 1fr}.main-nav{grid-column:1/-1;order:3;overflow-x:auto}.global-search{width:min(420px,38vw)}}
@media(max-width:760px){.app-main{padding:12px}.global-search{display:none}.profile-copy{display:none}.background-presets{grid-template-columns:1fr 1fr}.app-header.warm-header{grid-template-columns:1fr auto}.main-nav{display:none}body.mobile-nav-open .main-nav{display:flex;position:fixed;top:57px;left:0;right:0;padding:12px;background:#211c17;z-index:100;flex-wrap:wrap}}
/* Correcto Team v4.5.10 — background parity and two-axis board scrolling */
body[data-background="custom"],
body.dark[data-background="custom"]{
background-color:var(--bg)!important;
background-image:var(--main-background-image)!important;
background-size:cover!important;
background-position:center center!important;
background-repeat:no-repeat!important;
background-attachment:fixed!important;
}
/* The selected image remains identical in light and dark mode. Readability comes from solid UI cards, not a page-wide tint. */
body[data-background="custom"]::before,
body.dark[data-background="custom"]::before{content:none!important;display:none!important}
/* Remove the tall translucent column slab visible over custom backgrounds. */
body[data-background="custom"] .board-kanban-clean,
body.dark[data-background="custom"] .board-kanban-clean{
background:transparent!important;
box-shadow:none!important;
backdrop-filter:none!important;
}
body[data-background="custom"] .board-kanban-clean .board-kanban-column,
body.dark[data-background="custom"] .board-kanban-clean .board-kanban-column{
background:transparent!important;
border:0!important;
border-top:4px solid var(--column-accent,#f97316)!important;
box-shadow:none!important;
backdrop-filter:none!important;
overflow:visible!important;
}
body[data-background="custom"] .board-kanban-column>header,
body.dark[data-background="custom"] .board-kanban-column>header,
body[data-background="custom"] .board-column-list,
body.dark[data-background="custom"] .board-column-list,
body[data-background="custom"] .board-kanban-column .add-task,
body.dark[data-background="custom"] .board-kanban-column .add-task{
background:var(--surface)!important;
backdrop-filter:none!important;
}
body[data-background="custom"] .board-kanban-column>header,
body.dark[data-background="custom"] .board-kanban-column>header{
border:1px solid var(--border)!important;
border-bottom:0!important;
border-radius:14px 14px 0 0!important;
}
body[data-background="custom"] .board-column-list,
body.dark[data-background="custom"] .board-column-list{
border-left:1px solid var(--border)!important;
border-right:1px solid var(--border)!important;
}
body[data-background="custom"] .board-kanban-column .add-task,
body.dark[data-background="custom"] .board-kanban-column .add-task{
border:1px solid var(--border)!important;
border-top:0!important;
border-radius:0 0 14px 14px!important;
}
/* True two-axis scrolling: normal wheel = vertical; Shift+wheel = horizontal; empty-space drag = both axes. */
.board-kanban-dashboard{
overflow:auto!important;
max-height:calc(100vh - 220px)!important;
min-height:360px;
overscroll-behavior:contain;
touch-action:none;
scroll-behavior:auto!important;
align-items:flex-start!important;
padding-bottom:22px!important;
}
.board-kanban-dashboard .board-kanban-column{
max-height:none!important;
height:max-content!important;
}
.board-column-list{
overflow:visible!important;
max-height:none!important;
}
.board-kanban-dashboard.is-panning{cursor:grabbing!important;user-select:none!important}
/* Compact background chooser without the removed title/subtitle. */
.compact-background-picker{width:min(520px,94vw)!important}
.compact-background-picker>header{justify-content:flex-end!important;min-height:22px}
.compact-background-picker .background-presets{margin:4px 0 14px!important}
.compact-background-picker .background-presets button{min-height:74px;position:relative;overflow:hidden}
.compact-background-picker .background-presets button::after{
content:"✓";position:absolute;right:8px;bottom:7px;width:23px;height:23px;display:grid;place-items:center;
border-radius:999px;background:#ffffffd9;color:#39291d;font-weight:900;opacity:0;transform:scale(.8);transition:.15s ease
}
.compact-background-picker .background-upload{padding:20px}
.compact-background-picker .background-upload small{display:none!important}
@media(max-width:760px){
.board-kanban-dashboard{max-height:calc(100vh - 145px)!important;min-height:420px}
}
/* Correcto Team v4.5.11 — independent column scrolling and adaptive navigation */
:root{
--app-font:"Inter","Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--menu-text:#171717;
--menu-muted:#4b5563;
--menu-hover:#fff1e8;
--menu-active:#f97316;
}
body.dark{
--menu-text:#ffffff;
--menu-muted:#d1d5db;
--menu-hover:#ffffff14;
--menu-active:#fb923c;
}
html,
body,
button,
input,
textarea,
select{
font-family:var(--app-font)!important;
}
body{
font-weight:450;
letter-spacing:-.006em;
}
/* Light theme header: soft warm surface and black navigation text. */
body:not(.dark) .app-header.warm-header{
background:rgba(255,248,241,.94)!important;
border-bottom:1px solid #e7d8ca!important;
box-shadow:0 7px 24px rgba(74,45,25,.10)!important;
backdrop-filter:blur(18px);
}
body:not(.dark) .brand{color:#171717!important}
body:not(.dark) .brand b{color:#d85c0b!important}
body:not(.dark) .brand small{background:#f973161c!important;color:#b94706!important}
body:not(.dark) .nav-button,
body:not(.dark) .dropdown-toggle{
color:var(--menu-text)!important;
font-weight:700!important;
}
body:not(.dark) .nav-button.active{
color:#fff!important;
background:linear-gradient(135deg,#fb7b22,#e85b08)!important;
box-shadow:0 6px 15px rgba(249,115,22,.24)!important;
}
body:not(.dark) .header-icon-button{
color:#171717!important;
background:#fffaf5!important;
border-color:#dfd1c4!important;
}
body:not(.dark) .profile-button{
color:#171717!important;
background:#fffaf5!important;
border-color:#dfd1c4!important;
}
body:not(.dark) .profile-copy small{color:#655b52!important}
body:not(.dark) .dropdown-menu{
color:#171717!important;
background:#fffaf5!important;
border-color:#dfd1c4!important;
}
body:not(.dark) .dropdown-menu button{color:#171717!important}
/* Dark theme header: white navigation text. */
body.dark .app-header.warm-header{
background:rgba(20,17,14,.96)!important;
border-bottom-color:#ffffff1a!important;
}
body.dark .brand,
body.dark .nav-button,
body.dark .dropdown-toggle,
body.dark .profile-button,
body.dark .header-icon-button,
body.dark .dropdown-menu button{
color:#fff!important;
}
body.dark .nav-button.active{
background:linear-gradient(135deg,#f97316,#d94d04)!important;
color:#fff!important;
}
body.dark .profile-copy small{color:#d0c4b8!important}
/* Every Kanban column scrolls vertically on its own. */
.board-kanban-dashboard{
align-items:stretch!important;
overflow-x:auto!important;
overflow-y:hidden!important;
height:calc(100vh - 220px)!important;
max-height:calc(100vh - 220px)!important;
min-height:430px!important;
}
.board-kanban-dashboard .board-kanban-column{
display:flex!important;
flex-direction:column!important;
height:100%!important;
max-height:100%!important;
min-height:0!important;
overflow:hidden!important;
}
.board-kanban-dashboard .board-kanban-column>header{
flex:0 0 auto!important;
position:sticky!important;
top:0!important;
z-index:3!important;
}
.board-kanban-dashboard .board-column-list{
flex:1 1 auto!important;
min-height:0!important;
max-height:none!important;
overflow-y:auto!important;
overflow-x:hidden!important;
overscroll-behavior:contain!important;
scrollbar-width:thin;
scrollbar-color:#c77b45 transparent;
padding-right:8px!important;
}
.board-kanban-dashboard .board-column-list::-webkit-scrollbar{width:10px}
.board-kanban-dashboard .board-column-list::-webkit-scrollbar-track{background:transparent}
.board-kanban-dashboard .board-column-list::-webkit-scrollbar-thumb{
background:#c77b45;
border:2px solid transparent;
background-clip:padding-box;
border-radius:999px;
}
body.dark .board-kanban-dashboard .board-column-list{scrollbar-color:#d08a56 transparent}
body.dark .board-kanban-dashboard .board-column-list::-webkit-scrollbar-thumb{background:#d08a56;background-clip:padding-box}
.board-kanban-dashboard .add-task{
flex:0 0 auto!important;
position:sticky!important;
bottom:0!important;
z-index:3!important;
margin-top:8px!important;
backdrop-filter:blur(12px);
}
@media(max-width:760px){
.board-kanban-dashboard{
height:calc(100vh - 150px)!important;
max-height:calc(100vh - 150px)!important;
min-height:460px!important;
}
}
/* Correcto Team v4.5.12 — saved backgrounds, sky-blue accents and Trello-style task details */
:root{
--primary:#38a9f3;
--menu-active:#38a9f3;
--sky:#38a9f3;
--sky-dark:#1687cf;
--sky-soft:#e9f6ff;
}
body.dark{
--primary:#55b9f6;
--menu-active:#55b9f6;
--sky:#55b9f6;
--sky-dark:#2799df;
--sky-soft:#112d40;
}
/* Remove the floating help button and panel completely. */
.ai-help-button,
.ai-helper-panel{display:none!important}
/* Replace the old orange navigation accent with a clear sky-blue accent. */
body:not(.dark) .brand b{color:var(--sky-dark)!important}
body:not(.dark) .brand small{background:#38a9f31c!important;color:#1377b6!important}
body:not(.dark) .nav-button.active{
color:#fff!important;
background:linear-gradient(135deg,#55b9f6,#249be4)!important;
box-shadow:0 7px 18px rgba(36,155,228,.25)!important;
}
body.dark .nav-button.active{background:linear-gradient(135deg,#55b9f6,#1687cf)!important}
.primary-button{background:linear-gradient(135deg,var(--sky),var(--sky-dark))!important}
.board-kanban-column{--column-accent:var(--sky)}
.board-kanban-dashboard .board-column-list{
scrollbar-color:#55b9f6 transparent!important;
}
.board-kanban-dashboard .board-column-list::-webkit-scrollbar-thumb{
background:#55b9f6!important;
background-clip:padding-box!important;
}
/* Trello-inspired task title and description, while keeping the existing form and activity panel. */
.trello-task-heading{
display:grid;
grid-template-columns:22px minmax(0,1fr);
gap:10px;
align-items:start;
margin-bottom:2px;
}
.task-heading-status{
width:18px;height:18px;border:2px solid var(--muted);border-radius:50%;margin-top:9px;
}
.task-title-editor{
border:0!important;
background:transparent!important;
padding:4px 0 8px!important;
border-radius:0!important;
font-size:clamp(1.35rem,2vw,1.75rem)!important;
line-height:1.15!important;
font-weight:780!important;
letter-spacing:-.025em!important;
box-shadow:none!important;
}
.task-title-editor:focus{outline:0!important;border-bottom:2px solid var(--sky)!important}
.trello-description-block{margin-top:12px}
.trello-section-title{display:flex;align-items:center;gap:10px;margin-bottom:10px;color:var(--text)}
.trello-section-icon{font-size:20px;color:var(--muted)}
.task-description-editor{
min-height:145px!important;
padding:14px!important;
background:var(--surface2)!important;
border:1px solid var(--border)!important;
border-radius:8px!important;
line-height:1.55!important;
resize:vertical!important;
}
.task-description-editor:focus{
background:var(--surface)!important;
border-color:var(--sky)!important;
box-shadow:0 0 0 3px color-mix(in srgb,var(--sky) 18%,transparent)!important;
outline:0!important;
}
@media(max-width:760px){
.task-title-editor{font-size:1.25rem!important}
.trello-task-heading{grid-template-columns:18px minmax(0,1fr);gap:8px}
}
/* Correcto Team v4.5.13 — compact realtime Kanban and bottom-aligned board scrollbar */
:root{
--ct-blue:#39aef5;
--ct-blue-dark:#168bd2;
--ct-blue-soft:#eaf7ff;
--ct-card-radius:12px;
}
/* Board fills the usable viewport, so the horizontal scrollbar sits at the bottom. */
body:not(.razvoz-standalone) .app-main{
min-height:0!important;
}
body:not(.razvoz-standalone) #pageContent{
min-height:0!important;
}
.board-kanban-dashboard{
box-sizing:border-box!important;
height:calc(100vh - 122px)!important;
max-height:calc(100vh - 122px)!important;
min-height:520px!important;
align-items:stretch!important;
overflow-x:auto!important;
overflow-y:hidden!important;
padding:5px 7px 10px!important;
margin:0!important;
scrollbar-width:auto!important;
scrollbar-color:var(--ct-blue) rgba(220,235,245,.72)!important;
scroll-padding-bottom:14px;
}
.board-kanban-dashboard::-webkit-scrollbar{height:13px!important}
.board-kanban-dashboard::-webkit-scrollbar-track{
background:rgba(220,235,245,.82)!important;
border-radius:999px!important;
}
.board-kanban-dashboard::-webkit-scrollbar-thumb{
background:linear-gradient(90deg,var(--ct-blue),var(--ct-blue-dark))!important;
border:3px solid rgba(220,235,245,.82)!important;
border-radius:999px!important;
}
body.dark .board-kanban-dashboard{
scrollbar-color:#61c2fb rgba(18,37,55,.88)!important;
}
body.dark .board-kanban-dashboard::-webkit-scrollbar-track{background:rgba(18,37,55,.88)!important}
body.dark .board-kanban-dashboard::-webkit-scrollbar-thumb{border-color:rgba(18,37,55,.88)!important}
/* Slightly narrower columns and smaller cards show more work without looking cramped. */
.board-kanban-clean .board-kanban-column{
min-width:282px!important;
width:282px!important;
border-radius:15px!important;
}
.board-kanban-dashboard .board-kanban-column>header{
min-height:48px!important;
padding:10px 12px!important;
}
.board-kanban-dashboard .board-kanban-column>header strong{
font-size:14px!important;
letter-spacing:-.01em!important;
}
.board-kanban-dashboard .board-column-list{
padding:8px 8px 5px!important;
gap:7px!important;
}
.board-kanban-clean .board-task-card{
padding:9px 10px!important;
border-radius:var(--ct-card-radius)!important;
min-height:0!important;
box-shadow:0 3px 10px rgba(30,53,92,.07)!important;
}
.board-task-card h4,
.board-task-card strong{
font-size:12.5px!important;
line-height:1.38!important;
}
.board-task-card p{
margin:4px 0!important;
font-size:11.5px!important;
line-height:1.42!important;
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow:hidden;
}
.board-task-card small,
.board-task-card .task-meta,
.board-task-card .task-assignee{
font-size:10.5px!important;
}
.board-task-card .label,
.board-task-card .priority-badge{
padding:2px 6px!important;
font-size:9.5px!important;
}
.board-kanban-dashboard .add-task{
min-height:39px!important;
margin:6px 8px 8px!important;
padding:8px 10px!important;
border-radius:11px!important;
color:#28698f!important;
background:rgba(244,251,255,.93)!important;
border-color:rgba(57,174,245,.36)!important;
box-shadow:0 -5px 15px rgba(33,87,121,.05)!important;
}
body.dark .board-kanban-dashboard .add-task{
color:#b9e6ff!important;
background:rgba(17,42,59,.94)!important;
}
/* Cleaner column scrollbar. */
.board-kanban-dashboard .board-column-list{
scrollbar-width:thin!important;
scrollbar-color:rgba(57,174,245,.75) transparent!important;
}
.board-kanban-dashboard .board-column-list::-webkit-scrollbar{width:8px!important}
.board-kanban-dashboard .board-column-list::-webkit-scrollbar-thumb{
background:rgba(57,174,245,.78)!important;
border:2px solid transparent!important;
background-clip:padding-box!important;
}
/* Realtime refresh feels stable: no animation jump when the board redraws. */
.board-kanban-dashboard.realtime-refreshing .board-kanban-column,
.board-kanban-dashboard.realtime-refreshing .board-task-card{transition:none!important}
@media(max-width:900px){
.board-kanban-dashboard{
height:calc(100vh - 105px)!important;
max-height:calc(100vh - 105px)!important;
min-height:470px!important;
}
.board-kanban-clean .board-kanban-column{min-width:86vw!important;width:86vw!important}
}
/* =========================================================
Correcto Team v4.5.14 — cleaner column footer + stable board
========================================================= */
.board-kanban-dashboard{
padding-bottom:18px!important;
gap:12px!important;
}
.board-kanban-clean .board-kanban-column{
overflow:hidden!important;
background:color-mix(in srgb,var(--surface) 92%,transparent)!important;
border:1px solid color-mix(in srgb,var(--border) 86%,#8ed8ff)!important;
box-shadow:0 10px 26px rgba(26,61,92,.12)!important;
}
.board-kanban-dashboard .board-column-list{
padding:8px 9px 10px!important;
min-height:90px!important;
}
.board-kanban-dashboard .add-task{
position:sticky!important;
bottom:0!important;
z-index:4!important;
width:calc(100% - 18px)!important;
min-height:36px!important;
margin:0 9px 9px!important;
padding:7px 11px!important;
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
gap:7px!important;
border-radius:10px!important;
border:1px solid rgba(63,168,232,.32)!important;
color:#195f88!important;
background:linear-gradient(180deg,rgba(250,254,255,.98),rgba(231,246,255,.96))!important;
box-shadow:0 5px 14px rgba(24,86,126,.09)!important;
font-size:12.5px!important;
font-weight:700!important;
line-height:1!important;
backdrop-filter:blur(12px)!important;
}
.board-kanban-dashboard .add-task:active{
transform:translateY(0)!important;
}
body.dark .board-kanban-clean .board-kanban-column{
background:color-mix(in srgb,var(--surface) 90%,transparent)!important;
border-color:rgba(96,190,246,.22)!important;
box-shadow:0 12px 28px rgba(0,0,0,.24)!important;
}
body.dark .board-kanban-dashboard .add-task{
color:#c4eaff!important;
background:linear-gradient(180deg,rgba(24,55,75,.97),rgba(17,43,61,.97))!important;
border-color:rgba(93,194,249,.28)!important;
box-shadow:0 6px 15px rgba(0,0,0,.18)!important;
}
@media(max-width:900px){
.board-kanban-dashboard{gap:9px!important;padding-bottom:14px!important}
.board-kanban-dashboard .add-task{min-height:38px!important;font-size:13px!important}
}
/* =========================================================
Correcto Team v4.5.15 — universal responsive workspace
Desktop / laptop / tablet / phone
========================================================= */
:root{
--ct-header-h:76px;
--ct-footer-h:68px;
--ct-page-gap:14px;
}
html,
body{min-height:100%;max-width:100%;overflow-x:hidden!important}
body{min-height:100dvh}
.app-view{
min-height:100dvh!important;
height:100dvh;
display:flex;
flex-direction:column;
padding-bottom:0!important;
overflow:hidden;
}
#appHeader{
flex:0 0 auto;
width:100%;
min-width:0;
}
.app-header.warm-header{
min-height:var(--ct-header-h);
grid-template-columns:auto minmax(0,1fr) minmax(320px,46vw)!important;
gap:12px!important;
padding:9px clamp(10px,1.25vw,22px)!important;
}
.brand-wrap,
.brand,
.header-tools,
.main-nav{min-width:0}
.brand{white-space:nowrap}
.main-nav{
display:flex;
align-items:center;
justify-content:center;
gap:4px!important;
min-width:0;
overflow:visible;
}
.main-nav>.nav-button,
.main-nav>.dropdown>.dropdown-toggle{
min-height:42px;
padding:7px 10px!important;
white-space:nowrap;
font-size:clamp(12px,.9vw,15px)!important;
}
.header-tools{
display:grid!important;
grid-template-columns:minmax(160px,1fr) auto auto auto;
align-items:center;
gap:8px!important;
min-width:0;
}
.global-search{width:100%!important;min-width:0}
.global-search input{width:100%;min-width:0}
.profile-button{max-width:220px;min-width:0}
.profile-copy{min-width:0}
.profile-copy strong,
.profile-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-main{
flex:1 1 auto;
min-height:0!important;
width:100%;
padding:clamp(8px,1.1vw,18px)!important;
overflow:auto;
overscroll-behavior:contain;
}
#pageContent{min-height:0!important;width:100%}
/* Kanban always uses the available area and never hides behind the footer. */
.board-kanban-dashboard{
width:100%!important;
height:calc(100dvh - var(--ct-header-h) - var(--ct-footer-h) - 34px)!important;
max-height:none!important;
min-height:320px!important;
padding:6px 7px 18px!important;
gap:clamp(8px,.8vw,14px)!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
touch-action:pan-x pan-y;
}
.board-kanban-clean .board-kanban-column{
flex:0 0 clamp(250px,18.2vw,310px)!important;
min-width:clamp(250px,18.2vw,310px)!important;
width:clamp(250px,18.2vw,310px)!important;
height:100%!important;
max-height:100%!important;
display:flex!important;
flex-direction:column!important;
scroll-snap-align:start;
}
.board-kanban-dashboard .board-kanban-column>header{flex:0 0 auto}
.board-kanban-dashboard .board-column-list{
flex:1 1 auto!important;
min-height:0!important;
max-height:none!important;
overflow-y:auto!important;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
}
.board-kanban-dashboard .add-task{
flex:0 0 auto!important;
position:relative!important;
bottom:auto!important;
}
/* Footer is responsive and cannot cover board content. */
.board-footer{
position:relative!important;
flex:0 0 var(--ct-footer-h);
min-height:var(--ct-footer-h);
left:auto!important;right:auto!important;bottom:auto!important;
width:100%;
z-index:45;
}
.board-footer-inner{
height:100%;
min-width:0;
padding:8px clamp(8px,1vw,16px)!important;
grid-template-columns:auto minmax(0,1fr) auto!important;
}
.board-footer-scroll{min-width:0;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.board-footer-item{min-height:42px}
/* Medium laptops and browser zoom: navigation becomes a proper drawer. */
@media(max-width:1450px){
:root{--ct-header-h:64px;--ct-footer-h:64px}
.mobile-nav-toggle{display:grid!important}
.app-header.warm-header{
grid-template-columns:minmax(210px,auto) minmax(0,1fr)!important;
min-height:var(--ct-header-h);
}
.header-tools{grid-column:2;grid-template-columns:minmax(180px,1fr) auto auto auto}
#appHeader .main-nav{
position:fixed!important;
top:0!important;bottom:0!important;left:0!important;
width:min(340px,88vw)!important;
height:100dvh!important;
z-index:120!important;
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
justify-content:flex-start!important;
gap:6px!important;
padding:78px 14px 18px!important;
overflow-y:auto!important;
background:var(--header,#111c2c)!important;
box-shadow:20px 0 55px rgba(0,0,0,.34)!important;
transform:translateX(-105%)!important;
transition:transform .22s ease!important;
}
body.mobile-nav-open #appHeader .main-nav{transform:translateX(0)!important}
body.mobile-nav-open::after{content:"";position:fixed;inset:0;z-index:110;background:rgba(4,12,22,.58);backdrop-filter:blur(2px)}
#appHeader .main-nav>.nav-button,
#appHeader .main-nav>.dropdown>.dropdown-toggle{
width:100%!important;min-height:48px!important;justify-content:flex-start!important;text-align:left!important;font-size:15px!important;padding:10px 13px!important
}
#appHeader .main-nav .dropdown{width:100%}
#appHeader .main-nav .dropdown-menu{position:static!important;width:100%!important;margin-top:4px!important;box-shadow:none!important}
.board-kanban-clean .board-kanban-column{flex-basis:clamp(260px,25vw,300px)!important;min-width:clamp(260px,25vw,300px)!important;width:clamp(260px,25vw,300px)!important}
}
@media(max-width:900px){
:root{--ct-header-h:58px;--ct-footer-h:58px}
.app-header.warm-header{grid-template-columns:minmax(0,1fr) auto!important;padding:7px 9px!important}
.brand-wrap{overflow:hidden}
.brand{font-size:16px!important}
.brand small{display:none}
.header-tools{grid-column:2!important;display:flex!important;gap:5px!important}
.global-search{display:none!important}
.header-icon-button{width:38px!important;height:38px!important}
.profile-button{width:42px!important;height:42px!important;padding:4px!important;border-radius:12px!important}
.profile-copy,
.profile-button>span:last-child{display:none!important}
.avatar{margin:0!important}
.app-main{padding:8px!important}
.board-kanban-dashboard{
height:calc(100dvh - var(--ct-header-h) - var(--ct-footer-h) - 18px)!important;
min-height:280px!important;
padding:4px 4px 12px!important;
scroll-snap-type:x mandatory!important;
}
.board-kanban-clean .board-kanban-column{
flex-basis:min(84vw,340px)!important;
min-width:min(84vw,340px)!important;
width:min(84vw,340px)!important;
}
.board-footer-inner{grid-template-columns:minmax(0,1fr)!important;padding:6px 8px!important}
.board-footer-label,
#footerManageBoards{display:none!important}
.board-footer-scroll{height:100%;align-items:center}
.board-footer-item{min-height:40px;padding:7px 9px!important;max-width:160px!important}
dialog,
#appModal{width:calc(100vw - 12px)!important;max-width:calc(100vw - 12px)!important;max-height:calc(100dvh - 12px)!important;margin:6px!important}
}
@media(max-width:600px){
:root{--ct-header-h:54px;--ct-footer-h:54px}
.brand-logo{width:32px!important;height:32px!important}
.brand>span:nth-child(2){max-width:150px;overflow:hidden;text-overflow:ellipsis}
.header-icon-button:nth-of-type(2){display:none!important}
.board-kanban-clean .board-kanban-column{
flex-basis:calc(100vw - 24px)!important;
min-width:calc(100vw - 24px)!important;
width:calc(100vw - 24px)!important;
border-radius:13px!important;
}
.board-kanban-dashboard .board-kanban-column>header{min-height:44px!important;padding:8px 10px!important}
.board-kanban-dashboard .board-column-list{padding:6px!important;gap:6px!important}
.board-kanban-clean .board-task-card{padding:8px 9px!important}
.board-footer-item{font-size:10px!important;max-width:135px!important}
.board-footer-item small{display:none!important}
.page-header h1,
#pageHeader h1{font-size:19px!important}
}
@media(max-height:720px){
:root{--ct-header-h:56px;--ct-footer-h:54px}
.app-header.warm-header{padding-top:6px!important;padding-bottom:6px!important}
.board-kanban-dashboard{height:calc(100dvh - var(--ct-header-h) - var(--ct-footer-h) - 14px)!important}
.board-kanban-dashboard .board-kanban-column>header{min-height:42px!important;padding:7px 10px!important}
.board-kanban-dashboard .add-task{min-height:32px!important;margin:0 7px 7px!important}
}
/* v4.5.16 - compact non-overlapping colored tasks */
.board-column-list{
display:flex!important;
flex-direction:column!important;
gap:6px!important;
min-height:0!important;
padding:7px!important;
overflow-y:auto!important;
overflow-x:hidden!important;
align-content:initial!important;
scroll-padding-block:8px;
}
.board-task-card{
position:relative;
flex:0 0 auto!important;
min-height:0!important;
height:auto!important;
margin:0!important;
padding:8px 9px!important;
border:1px solid color-mix(in srgb,var(--border) 84%,transparent)!important;
border-left:3px solid var(--primary)!important;
border-radius:10px!important;
background:var(--surface)!important;
box-shadow:0 3px 10px rgba(20,35,55,.09)!important;
overflow:hidden!important;
isolation:isolate;
}
.board-task-card.has-task-color{
background:var(--task-card-color)!important;
border-color:color-mix(in srgb,var(--task-card-color) 58%,#64748b)!important;
border-left-color:color-mix(in srgb,var(--task-card-color) 35%,#2563eb)!important;
color:#172033!important;
}
[data-theme="dark"] .board-task-card.has-task-color{
background:color-mix(in srgb,var(--task-card-color) 72%,#0f172a)!important;
border-color:color-mix(in srgb,var(--task-card-color) 48%,#64748b)!important;
color:#f8fafc!important;
}
.board-task-title{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
overflow-wrap:anywhere;
font-size:12px!important;
line-height:1.35!important;
font-weight:590;
max-height:2.7em;
}
.board-task-card .labels{
margin-top:5px!important;
gap:4px!important;
}
.board-task-card .label{
padding:2px 5px!important;
font-size:8px!important;
}
.board-task-meta{
justify-content:flex-end!important;
min-height:21px;
margin-top:6px!important;
gap:5px!important;
}
.priority-badge{display:none!important}
.assignee-badge{
max-width:145px!important;
padding:3px 6px!important;
border-radius:6px!important;
font-size:9px!important;
}
.assignee-dot{width:7px!important;height:7px!important;box-shadow:none!important}
.board-task-progress{
min-height:0!important;
margin-top:4px!important;
font-size:9px!important;
}
.task-completed-by,
.task-postponed-note{
margin-top:5px!important;
padding:4px 6px!important;
font-size:9px!important;
line-height:1.25!important;
}
.task-color-field{display:grid;gap:8px}
.task-color-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.task-color-heading small{color:var(--muted);font-size:11px}
.task-color-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.task-color-option,
.task-color-custom{
display:flex;align-items:center;gap:7px;min-height:38px;padding:7px 9px;
border:1px solid var(--border);border-radius:10px;background:var(--surface2);cursor:pointer;
}
.task-color-option input{position:absolute;opacity:0;pointer-events:none}
.task-color-option.selected,
.task-color-custom.active{border-color:#38bdf8;box-shadow:0 0 0 2px #38bdf826}
.task-color-swatch{width:18px;height:18px;flex:0 0 18px;border:1px solid #64748b55;border-radius:6px;background:var(--task-choice)}
.task-color-option b,
.task-color-custom span{font-size:11px}
.task-color-custom input{width:30px;height:24px;padding:0;border:0;background:transparent;margin-left:auto}
@media(max-width:760px){
.task-color-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
.board-task-card{padding:7px 8px!important}
.board-task-title{font-size:11.5px!important}
}
/* v4.5.17 — context actions for task colors and labels */
.task-context-menu [data-task-submenu]{display:flex;align-items:center;justify-content:space-between;gap:18px}
.task-context-submenu{position:fixed;z-index:10050;width:250px;max-height:min(420px,calc(100vh - 24px));overflow:auto}
.context-menu-title{padding:9px 12px 7px;font-weight:800;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.context-separator{height:1px;background:var(--border);margin:5px 8px}
.context-color-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:6px}
.context-color-option{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;padding:8px!important;border-radius:9px!important}
.context-color-option span{width:18px;height:18px;border-radius:6px;background:var(--swatch);border:1px solid color-mix(in srgb,var(--text) 18%,transparent);box-shadow:inset 0 0 0 1px rgb(255 255 255/.28)}
.context-color-option b{font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.context-label-list{display:grid;gap:4px;padding:6px;max-height:255px;overflow:auto}
.context-label-option{display:flex;align-items:center;gap:8px;padding:3px 5px;cursor:pointer}
.context-label-option input{width:16px;height:16px;flex:0 0 auto}
.context-label-option span{display:block;flex:1;padding:7px 10px;border-radius:8px;background:var(--label-color);color:#101828;font-weight:750;font-size:.8rem;box-shadow:inset 0 0 0 1px rgb(0 0 0/.08)}
.dark .context-label-option span{color:#101828}
/* Correcto Team v4.5.18 — full wrapped titles and cleaner task detail */
.board-task-title{
display:block!important;
-webkit-line-clamp:unset!important;
max-height:none!important;
overflow:visible!important;
white-space:normal!important;
overflow-wrap:anywhere!important;
word-break:break-word!important;
font-size:11px!important;
line-height:1.32!important;
font-weight:620!important;
}
.board-task-card>.labels{display:none!important}
.trello-task-heading{
display:block!important;
grid-template-columns:none!important;
margin-bottom:4px!important;
}
.task-heading-status{display:none!important}
.task-title-editor{
display:block!important;
width:100%!important;
min-height:2.7em!important;
height:auto!important;
max-height:none!important;
overflow:hidden!important;
white-space:pre-wrap!important;
overflow-wrap:anywhere!important;
resize:none!important;
field-sizing:content;
font-size:clamp(1.05rem,1.55vw,1.35rem)!important;
line-height:1.25!important;
font-weight:720!important;
padding:4px 0 7px!important;
}
@media(max-width:760px){
.board-task-title{font-size:10.5px!important;line-height:1.3!important}
.task-title-editor{font-size:1.05rem!important}
}
/* Correcto Team v4.6.0 — Trello-class board UX */
:root{
--app-font:"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--board-column-width:292px;
}
html,
body,
button,
input,
textarea,
select{
font-family:var(--app-font)!important;
}
.board-kanban-dashboard.board-kanban-clean{
display:flex!important;
align-items:flex-start!important;
justify-content:flex-start!important;
width:100%!important;
max-width:100%!important;
min-height:0!important;
max-height:none!important;
gap:16px!important;
padding:16px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scroll-snap-type:x proximity;
scrollbar-gutter:stable;
touch-action:pan-x!important;
}
.board-kanban-dashboard .board-kanban-column{
display:flex!important;
flex:0 0 var(--board-column-width)!important;
flex-direction:column!important;
align-self:flex-start!important;
width:var(--board-column-width)!important;
min-width:var(--board-column-width)!important;
height:auto!important;
min-height:unset!important;
max-height:none!important;
overflow:visible!important;
scroll-snap-align:start;
border-radius:14px!important;
}
.board-kanban-column>header strong{
font-weight:600!important;
letter-spacing:-.01em;
}
.board-column-list{
display:flex!important;
flex:none!important;
flex-direction:column!important;
gap:9px!important;
min-height:unset!important;
height:auto!important;
max-height:none!important;
padding:10px!important;
overflow:visible!important;
}
.board-task-card{
position:relative;
flex:none;
padding:12px 11px!important;
border-radius:12px!important;
cursor:pointer;
overflow:visible;
transform:translateZ(0);
transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease;
animation:correctoTaskEnter .28s cubic-bezier(.2,.8,.2,1) both;
}
.board-task-card:nth-child(2){animation-delay:25ms}
.board-task-card:nth-child(3){animation-delay:50ms}
.board-task-card:nth-child(4){animation-delay:75ms}
.board-task-card:nth-child(5){animation-delay:100ms}
@keyframes correctoTaskEnter{
from{opacity:0;transform:translateY(15px) scale(.985)}
to{opacity:1;transform:translateY(0) scale(1)}
}
.board-task-card.is-selected{
z-index:3;
border-color:#0c66e4!important;
box-shadow:0 0 0 2px rgba(12,102,228,.28),0 14px 30px rgba(20,32,51,.20)!important;
}
.board-task-title{
padding-right:78px;
font-size:.82rem!important;
line-height:1.45!important;
font-weight:500!important;
letter-spacing:-.006em;
}
.board-task-meta,
.board-task-progress,
.task-postponed-note,
.task-completed-by{
font-weight:400!important;
}
.board-task-actions{
position:absolute;
top:7px;
right:7px;
z-index:6;
display:flex;
align-items:center;
gap:3px;
opacity:0;
visibility:hidden;
transform:translateY(-3px);
transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
}
.board-task-card:focus-within .board-task-actions,
.board-task-card.is-selected .board-task-actions{
opacity:1;
visibility:visible;
transform:translateY(0);
}
.board-task-actions button{
display:grid;
place-items:center;
width:25px;
height:25px;
padding:0;
border:1px solid rgba(9,30,66,.12);
border-radius:7px;
background:rgba(255,255,255,.94);
color:#44546f;
font-size:12px;
font-weight:700;
line-height:1;
box-shadow:0 2px 7px rgba(9,30,66,.12);
}
.board-task-actions button:disabled{opacity:.45;cursor:wait}
body.dark .board-task-actions button{background:#26364d;color:#e9f2ff;border-color:#3b4d67}
.board-kanban-column .add-task{
order:99;
flex:none!important;
margin:0 10px 10px!important;
padding:10px 11px!important;
border:1px solid transparent!important;
border-radius:10px!important;
background:transparent!important;
color:var(--muted)!important;
font-weight:500!important;
transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease!important;
}
@media(max-width:760px){
:root{--board-column-width:86vw}
.board-kanban-dashboard.board-kanban-clean{gap:12px!important;padding:12px!important}
.board-task-actions{opacity:1;visibility:visible;transform:none}
}
@media(prefers-reduced-motion:reduce){
.board-task-card{animation:none!important;transition:none!important}
.board-task-actions,
.add-task{transition:none!important}
}
/* Correcto Team v4.6.1 — premium board canvas and easy horizontal navigation */
.board-kanban-dashboard.board-kanban-clean{
position:relative!important;
min-height:calc(100vh - 190px)!important;
max-height:calc(100vh - 190px)!important;
padding:18px 18px 88px!important;
gap:16px!important;
cursor:grab!important;
scroll-padding-inline:18px;
scrollbar-width:none;
background:linear-gradient(135deg,rgba(15,23,42,.16),rgba(15,23,42,.05))!important;
border:1px solid rgba(255,255,255,.12);
border-radius:18px;
}
/* Kolona je jedna čista celina — bez duplog/ghost hover sloja. */
.board-kanban-dashboard .board-kanban-column,
body[data-background="custom"] .board-kanban-clean .board-kanban-column,
body.dark[data-background="custom"] .board-kanban-clean .board-kanban-column{
--column-bg:rgba(18,28,43,.96);
background:var(--column-bg)!important;
border:1px solid rgba(148,163,184,.25)!important;
border-top:1px solid rgba(148,163,184,.25)!important;
border-radius:15px!important;
overflow:hidden!important;
box-shadow:0 12px 32px rgba(0,0,0,.20)!important;
backdrop-filter:none!important;
transform:none!important;
transition:border-color .16s ease,box-shadow .16s ease!important;
}
.board-kanban-dashboard .board-kanban-column>header,
body[data-background="custom"] .board-kanban-column>header,
body.dark[data-background="custom"] .board-kanban-column>header{
background:transparent!important;
border:0!important;
border-bottom:1px solid rgba(148,163,184,.18)!important;
border-radius:0!important;
cursor:grab!important;
}
.board-kanban-dashboard .board-kanban-column>header:active{cursor:grabbing!important}
.board-kanban-dashboard .board-column-list,
body[data-background="custom"] .board-column-list,
body.dark[data-background="custom"] .board-column-list{
background:transparent!important;
border:0!important;
min-height:18px!important;
}
.board-kanban-dashboard .board-kanban-column .add-task,
body[data-background="custom"] .board-kanban-column .add-task,
body.dark[data-background="custom"] .board-kanban-column .add-task{
background:transparent!important;
border:1px solid transparent!important;
border-radius:10px!important;
}
.board-scroll-dock{
position:fixed;
z-index:120;
left:max(18px,calc((100vw - 1200px)/2));
right:18px;
bottom:18px;
display:grid;
grid-template-columns:42px minmax(120px,1fr) 42px;
align-items:center;
gap:10px;
padding:8px 10px;
border:1px solid rgba(148,163,184,.25);
border-radius:16px;
background:rgba(15,23,42,.88);
box-shadow:0 14px 36px rgba(0,0,0,.28);
backdrop-filter:blur(14px);
transition:opacity .18s ease,transform .18s ease;
}
.board-scroll-dock.is-hidden{opacity:0;pointer-events:none;transform:translateY(12px)}
.board-scroll-dock button{
width:42px;height:36px;border:0;border-radius:11px;
background:rgba(255,255,255,.08);color:#e2e8f0;font-size:20px;cursor:pointer;
}
.board-scroll-dock input[type="range"]{width:100%;accent-color:#60a5fa;cursor:ew-resize}
@media(max-width:760px){
.board-kanban-dashboard.board-kanban-clean{min-height:calc(100vh - 125px)!important;max-height:calc(100vh - 125px)!important;padding:12px 12px 78px!important}
.board-scroll-dock{left:10px;right:10px;bottom:10px;grid-template-columns:38px 1fr 38px}
.board-scroll-dock button{width:38px}
}
/* Correcto Team v4.6.2 — responsive column height and internal task scrolling */
:root{
--board-column-max-height:calc(100dvh - 190px);
}
/* Kratke kolone ostaju kratke, a duge se zaustavljaju na visini ekrana. */
.board-kanban-dashboard .board-kanban-column{
height:auto!important;
max-height:var(--board-column-max-height)!important;
min-height:0!important;
overflow:hidden!important;
}
.board-kanban-dashboard .board-kanban-column>header{
flex:0 0 auto!important;
}
/* Samo lista zadataka dobija vertikalni skrol. */
.board-kanban-dashboard .board-column-list{
flex:1 1 auto!important;
min-height:0!important;
height:auto!important;
max-height:none!important;
overflow-x:hidden!important;
overflow-y:auto!important;
overscroll-behavior-y:contain;
scrollbar-width:thin;
scrollbar-color:rgba(148,163,184,.55) transparent;
scroll-behavior:smooth;
}
.board-kanban-dashboard .board-column-list::-webkit-scrollbar{
display:block!important;
width:7px!important;
}
.board-kanban-dashboard .board-column-list::-webkit-scrollbar-track{
background:transparent!important;
}
.board-kanban-dashboard .board-column-list::-webkit-scrollbar-thumb{
background:rgba(148,163,184,.48)!important;
border-radius:999px!important;
}
/* Dugme ostaje na dnu kolone i ne odlazi sa taskovima. */
.board-kanban-dashboard .board-kanban-column .add-task{
flex:0 0 auto!important;
position:relative;
z-index:3;
}
/* Obostrano poravnanje teksta unutar taska. */
.board-task-card .board-task-title,
.board-task-card p,
.board-task-card .task-description{
text-align:justify!important;
text-justify:inter-word;
hyphens:auto;
overflow-wrap:anywhere;
}
@media(max-width:1100px){
:root{--board-column-max-height:calc(100dvh - 170px)}
}
@media(max-width:760px){
:root{--board-column-max-height:calc(100dvh - 145px)}
.board-kanban-dashboard .board-kanban-column{
max-height:var(--board-column-max-height)!important;
}
}
@supports not (height:100dvh){
:root{--board-column-max-height:calc(100vh - 190px)}
@media(max-width:1100px){:root{--board-column-max-height:calc(100vh - 170px)}}
@media(max-width:760px){:root{--board-column-max-height:calc(100vh - 145px)}}
}
/* Correcto Team v4.6.6 — column wheel scrolling and clean board canvas */
.board-scroll-dock{display:none!important}
.board-kanban-dashboard.board-kanban-clean{padding-bottom:18px!important}
.board-kanban-dashboard .board-column-list{
overscroll-behavior:contain!important;
touch-action:pan-y!important;
cursor:default;
}
/* Correcto Team v4.6.6 — viewport columns and clean task typography */
:root{
--board-column-height:calc(100dvh - 188px);
}
/* Sve kolone koriste raspoloživu visinu ekrana; samo lista taskova skroluje. */
.board-kanban-dashboard .board-kanban-column{
height:var(--board-column-height)!important;
max-height:var(--board-column-height)!important;
min-height:360px!important;
align-self:flex-start!important;
overflow:hidden!important;
}
.board-kanban-dashboard .board-column-list{
flex:1 1 0!important;
min-height:0!important;
max-height:none!important;
overflow-y:auto!important;
overflow-x:hidden!important;
padding:10px 9px 8px 10px!important;
scrollbar-gutter:stable;
}
/* Zaglavlje i Dodaj zadatak ostaju fiksni dok se sredina kolone skroluje. */
.board-kanban-dashboard .board-kanban-column>header,
.board-kanban-dashboard .board-kanban-column>.board-column-description,
.board-kanban-dashboard .board-kanban-column>.add-task{
flex:0 0 auto!important;
}
/* Prirodno prelamanje: bez velikih rupa koje pravi text-align:justify. */
.board-task-card .board-task-title,
.board-task-card p,
.board-task-card .task-description{
text-align:left!important;
text-justify:auto!important;
hyphens:none!important;
word-break:normal!important;
overflow-wrap:break-word!important;
white-space:normal!important;
word-spacing:normal!important;
letter-spacing:0!important;
}
.board-task-card .board-task-title{
padding-right:0!important;
font-size:13.5px!important;
line-height:1.48!important;
font-weight:600!important;
color:inherit;
}
/* Hover akcije ne sužavaju tekst dok nisu potrebne. */
.board-task-card:focus-within .board-task-title,
.board-task-card.is-selected .board-task-title{
padding-right:72px!important;
}
.board-task-card{
padding:11px 12px 10px!important;
}
@media(max-width:1100px){
:root{--board-column-height:calc(100dvh - 168px)}
}
@media(max-width:760px){
:root{--board-column-height:calc(100dvh - 138px)}
.board-kanban-dashboard .board-kanban-column{
min-height:300px!important;
}
.board-task-card .board-task-title{
font-size:13px!important;
}
}
@supports not (height:100dvh){
:root{--board-column-height:calc(100vh - 188px)}
@media(max-width:1100px){:root{--board-column-height:calc(100vh - 168px)}}
@media(max-width:760px){:root{--board-column-height:calc(100vh - 138px)}}
}
/* Correcto Team v4.6.6 — approved full-height Kanban dashboard */
.board-kanban-dashboard.board-kanban-clean{
--board-viewport-height:calc(100dvh - 112px);
--board-inner-height:calc(var(--board-viewport-height) - 24px);
display:flex!important;
align-items:flex-start!important;
gap:12px!important;
width:100%!important;
height:var(--board-viewport-height)!important;
min-height:360px!important;
max-height:var(--board-viewport-height)!important;
padding:12px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
box-sizing:border-box!important;
scrollbar-width:none!important;
background:linear-gradient(180deg,rgba(7,19,33,.22),rgba(7,19,33,.10))!important;
border:0!important;
border-radius:0!important;
}
.board-kanban-dashboard.board-kanban-clean::-webkit-scrollbar{display:none!important}
.board-kanban-dashboard .board-kanban-column,
body[data-background="custom"] .board-kanban-clean .board-kanban-column,
body.dark[data-background="custom"] .board-kanban-clean .board-kanban-column{
flex:0 0 clamp(260px,16.2vw,306px)!important;
width:clamp(260px,16.2vw,306px)!important;
height:var(--board-inner-height)!important;
min-height:0!important;
max-height:var(--board-inner-height)!important;
display:flex!important;
flex-direction:column!important;
align-self:flex-start!important;
overflow:hidden!important;
border:1px solid rgba(148,163,184,.23)!important;
border-radius:12px!important;
background:rgba(15,29,45,.94)!important;
box-shadow:0 8px 24px rgba(0,0,0,.16)!important;
transform:none!important;
transition:border-color .15s ease!important;
}
.board-kanban-dashboard .board-kanban-column>header{
flex:0 0 auto!important;
min-height:56px!important;
padding:12px 13px!important;
background:rgba(10,24,39,.72)!important;
border-bottom:1px solid rgba(148,163,184,.17)!important;
}
.board-kanban-dashboard .board-column-list{
flex:1 1 0!important;
min-height:0!important;
height:0!important;
max-height:none!important;
padding:9px 8px!important;
gap:8px!important;
overflow-x:hidden!important;
overflow-y:auto!important;
overscroll-behavior:contain!important;
scrollbar-gutter:stable!important;
scrollbar-width:thin!important;
scrollbar-color:rgba(148,163,184,.48) transparent!important;
}
.board-kanban-dashboard .board-column-list::-webkit-scrollbar{display:block!important;width:7px!important}
.board-kanban-dashboard .board-column-list::-webkit-scrollbar-track{background:transparent!important}
.board-kanban-dashboard .board-column-list::-webkit-scrollbar-thumb{
background:rgba(148,163,184,.46)!important;
border-radius:999px!important;
}
.board-kanban-dashboard .board-kanban-column>.add-task{
flex:0 0 auto!important;
margin:0!important;
padding:11px 14px 13px!important;
border:0!important;
border-top:1px solid rgba(148,163,184,.14)!important;
border-radius:0!important;
background:rgba(10,24,39,.45)!important;
color:#63b3ff!important;
text-align:left!important;
box-shadow:none!important;
transform:none!important;
}
/* Task kartica ne menja tekst, boju, dimenziju ili položaj na hover. */
.board-kanban-clean .board-task-card,
.board-kanban-clean .board-task-card:focus-within{
padding:11px 12px 10px!important;
transform:none!important;
filter:none!important;
box-shadow:0 3px 10px rgba(0,0,0,.13)!important;
transition:border-color .14s ease!important;
}
.board-task-card .board-task-actions{display:none!important}
.board-task-card .board-task-title,
.board-task-card:focus-within .board-task-title,
.board-task-card.is-selected .board-task-title{
padding-right:0!important;
text-align:left!important;
font-size:13px!important;
line-height:1.48!important;
font-weight:600!important;
color:inherit!important;
word-spacing:normal!important;
letter-spacing:0!important;
white-space:normal!important;
overflow-wrap:anywhere!important;
}
@media(max-width:900px){
.board-kanban-dashboard .board-kanban-column,
body[data-background="custom"] .board-kanban-clean .board-kanban-column,
body.dark[data-background="custom"] .board-kanban-clean .board-kanban-column{
flex-basis:86vw!important;
width:86vw!important;
}
}
@supports not (height:100dvh){
.board-kanban-dashboard.board-kanban-clean{--board-viewport-height:calc(100vh - 112px)}
}
/* Correcto Team v4.6.9 — viewport-limited columns and restored board mouse panning */
.board-kanban-dashboard.board-kanban-clean{
--board-viewport-height:calc(100dvh - 112px);
height:var(--board-viewport-height)!important;
max-height:var(--board-viewport-height)!important;
min-height:320px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
cursor:grab!important;
touch-action:none!important;
user-select:none;
}
.board-kanban-dashboard.board-kanban-clean.is-panning{cursor:grabbing!important;scroll-behavior:auto!important}
body.board-pan-active,
body.board-pan-active *{cursor:grabbing!important;user-select:none!important}
.board-kanban-dashboard .board-kanban-column{
height:calc(var(--board-viewport-height) - 24px)!important;
max-height:calc(var(--board-viewport-height) - 24px)!important;
min-height:0!important;
overflow:hidden!important;
}
.board-kanban-dashboard .board-column-list{
flex:1 1 0!important;
height:0!important;
min-height:0!important;
max-height:none!important;
overflow-y:auto!important;
overflow-x:hidden!important;
touch-action:pan-y!important;
overscroll-behavior-y:contain!important;
}
.board-kanban-dashboard .board-kanban-column>header,
.board-kanban-dashboard .board-kanban-column>.board-column-description,
.board-kanban-dashboard .board-kanban-column>.add-task{flex:0 0 auto!important}
@media(max-width:900px){
.board-kanban-dashboard.board-kanban-clean{--board-viewport-height:calc(100dvh - 88px)}
}
@supports not (height:100dvh){
.board-kanban-dashboard.board-kanban-clean{--board-viewport-height:calc(100vh - 112px)}
@media(max-width:900px){.board-kanban-dashboard.board-kanban-clean{--board-viewport-height:calc(100vh - 88px)}}
}
/* Correcto Team v4.6.9 — compact board layout, persistent login and header board switcher */
:root{--ct-header-h:58px!important;--ct-footer-h:0px!important}
.board-footer{display:none!important}
.app-main{padding-top:6px!important;padding-bottom:6px!important}
#pageHeader:empty{display:none!important}
#pageHeader:not(:empty){margin-bottom:4px!important}
.board-kanban-dashboard.board-kanban-clean{--board-viewport-height:calc(100dvh - 70px)!important;padding-top:6px!important}
.board-kanban-dashboard .board-kanban-column{height:calc(var(--board-viewport-height) - 12px)!important;max-height:calc(var(--board-viewport-height) - 12px)!important}
.password-field{position:relative;display:flex;align-items:center}
.password-field input{width:100%;padding-right:48px!important}
.password-toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:34px!important;height:34px!important;min-width:34px!important;padding:0!important;border:0!important;border-radius:9px!important;background:transparent!important;color:var(--muted,#64748b)!important;font-size:18px!important;box-shadow:none!important}
.remember-login{display:flex;align-items:center;gap:9px;margin:2px 0 4px;color:var(--muted,#64748b);font-size:13px;cursor:pointer}
.remember-login input{width:16px!important;height:16px!important;margin:0!important;accent-color:#2563eb}
.boards-nav-dropdown{position:relative}
.boards-nav-toggle{display:flex!important;align-items:center;gap:7px}
.boards-nav-menu{min-width:280px!important;max-height:min(70vh,560px);overflow-y:auto;padding:8px!important}
.boards-nav-menu>button,
.header-board-items>button{width:100%;display:grid!important;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:8px;text-align:left!important;padding:10px!important;border-radius:9px!important}
.boards-nav-menu b,
.header-board-items b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650}
.boards-nav-menu small{color:var(--muted,#94a3b8)}
.header-board-items{display:grid;gap:2px}
.header-board-dot{width:10px;height:10px;border-radius:50%;background:var(--board-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--board-color) 18%,transparent)}
.dropdown-separator{height:1px;margin:6px 2px;background:rgba(148,163,184,.18)}
.board-kanban-dashboard.board-kanban-clean{cursor:grab!important}
.board-kanban-dashboard.board-kanban-clean.is-panning{cursor:grabbing!important}
@media(max-width:900px){
.app-main{padding-top:4px!important}
.board-kanban-dashboard.board-kanban-clean{--board-viewport-height:calc(100dvh - 64px)!important}
.boards-nav-menu{min-width:min(86vw,320px)!important}
}
/* Correcto Team v4.6.9 — complete light theme + mobile navigation + Razvoz mobile layout */
body:not(.dark) .board-kanban-dashboard.board-kanban-clean{
background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08))!important;
}
body:not(.dark) .board-kanban-dashboard .board-kanban-column,
body:not(.dark)[data-background="custom"] .board-kanban-clean .board-kanban-column{
background:rgba(248,250,252,.94)!important;
border-color:rgba(71,85,105,.18)!important;
box-shadow:0 10px 26px rgba(15,23,42,.12)!important;
color:#172033!important;
}
body:not(.dark) .board-kanban-dashboard .board-kanban-column>header{
background:rgba(241,245,249,.96)!important;
border-bottom-color:rgba(71,85,105,.14)!important;
color:#172033!important;
}
body:not(.dark) .board-kanban-dashboard .board-kanban-column>.add-task{
background:rgba(241,245,249,.90)!important;
border-top-color:rgba(71,85,105,.12)!important;
color:#156fc2!important;
}
body:not(.dark) .board-kanban-dashboard .board-column-list{
scrollbar-color:rgba(100,116,139,.50) transparent!important;
}
body:not(.dark) .board-kanban-dashboard .board-column-list::-webkit-scrollbar-thumb{
background:rgba(100,116,139,.46)!important;
}
body:not(.dark) .board-task-card:not(.has-task-color){
background:#fff!important;
color:#172033!important;
border-color:rgba(71,85,105,.16)!important;
box-shadow:0 4px 13px rgba(15,23,42,.08)!important;
}
body:not(.dark) .board-task-card .board-task-title,
body:not(.dark) .board-task-card p,
body:not(.dark) .board-task-card .task-description{
color:inherit!important;
}
body:not(.dark) .board-kanban-dashboard .column-title,
body:not(.dark) .board-kanban-dashboard .board-column-title,
body:not(.dark) .board-kanban-dashboard header strong{
color:#172033!important;
}
/* Mobile drawer: no blur, no visual corruption and reliable stacking. */
@media(max-width:1450px){
body.mobile-nav-open{overflow:hidden!important}
body.mobile-nav-open::after{
background:rgba(4,12,22,.48)!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
#appHeader .main-nav{
isolation:isolate!important;
overscroll-behavior:contain!important;
}
}
@media(max-width:900px){
#appHeader .main-nav{
width:min(326px,88vw)!important;
padding:68px 12px 18px!important;
}
body:not(.dark) #appHeader .main-nav{
background:#fff!important;
color:#172033!important;
border-right:1px solid rgba(71,85,105,.14)!important;
}
body:not(.dark) #appHeader .main-nav .nav-button,
body:not(.dark) #appHeader .main-nav .dropdown-toggle{
color:#172033!important;
}
body:not(.dark) #appHeader .main-nav .dropdown-menu{
background:#f8fafc!important;
border-color:rgba(71,85,105,.13)!important;
}
}
/* Razvoz on phones: title/date always visible, controls move to a clean second row. */
@media(max-width:900px){
body.razvoz-standalone .razvoz-toolbar{
display:grid!important;
grid-template-columns:minmax(0,1fr)!important;
align-items:start!important;
gap:8px!important;
top:var(--ct-header-h,58px)!important;
padding:9px 8px 10px!important;
}
body.razvoz-standalone .razvoz-title{
display:flex!important;
align-items:flex-start!important;
min-width:0!important;
gap:9px!important;
}
body.razvoz-standalone .razvoz-title>div{
display:block!important;
min-width:0!important;
}
body.razvoz-standalone .razvoz-title h1{
margin:0!important;
line-height:1.15!important;
white-space:normal!important;
}
body.razvoz-standalone .razvoz-title p{
display:block!important;
margin:3px 0 0!important;
line-height:1.3!important;
white-space:normal!important;
overflow:visible!important;
text-overflow:clip!important;
}
body.razvoz-standalone .razvoz-actions{
display:grid!important;
grid-template-columns:38px minmax(92px,auto) 38px minmax(126px,1fr)!important;
align-items:center!important;
width:100%!important;
min-width:0!important;
gap:6px!important;
}
body.razvoz-standalone .razvoz-actions button{
width:100%!important;
min-width:0!important;
margin:0!important;
white-space:nowrap!important;
}
body.razvoz-standalone .razvoz-actions #newDeliveryTask{
margin-left:0!important;
}
body.razvoz-standalone .razvoz-mobile-tabs{
position:relative!important;
top:auto!important;
z-index:10!important;
margin-top:0!important;
}
}
@media(max-width:520px){
body.razvoz-standalone .razvoz-toolbar{
padding:8px 6px 9px!important;
}
body.razvoz-standalone .razvoz-icon{
width:34px!important;
height:34px!important;
min-width:34px!important;
}
body.razvoz-standalone .razvoz-title h1{font-size:18px!important}
body.razvoz-standalone .razvoz-title p{font-size:10px!important;font-weight:700!important}
body.razvoz-standalone .razvoz-actions{
grid-template-columns:34px minmax(84px,1fr) 34px minmax(118px,1.3fr)!important;
}
body.razvoz-standalone .razvoz-actions button{
min-height:38px!important;
padding:7px 6px!important;
font-size:10px!important;
}
.razvoz-mobile-tabs{
overflow-x:auto!important;
grid-template-columns:repeat(7,minmax(48px,1fr))!important;
padding:6px 2px 8px!important;
}
}
/* Correcto Team v4.7.2 — fixed global header and polished responsive Razvoz */
:root{
--ct-fixed-header-height:58px;
}
/* The same navigation remains visible on every authenticated page. */
#appHeader.app-header,
.app-header.warm-header{
position:fixed!important;
top:0!important;
left:0!important;
right:0!important;
width:100%!important;
z-index:1000!important;
}
.app-view{
min-height:100dvh!important;
}
.app-view>.app-main{
padding-top:calc(var(--ct-fixed-header-height) + 6px)!important;
}
/* Razvoz toolbar stays directly beneath the global header. */
body.razvoz-standalone .razvoz-toolbar{
position:sticky!important;
top:var(--ct-fixed-header-height)!important;
z-index:45!important;
background:var(--surface,#f6f8fb)!important;
box-shadow:0 8px 18px rgba(15,23,42,.08)!important;
}
body.dark.razvoz-standalone .razvoz-toolbar{
background:rgba(14,25,42,.97)!important;
}
body.razvoz-standalone .razvoz-mobile-tabs{
position:sticky!important;
top:calc(var(--ct-fixed-header-height) + 92px)!important;
z-index:42!important;
}
@media(max-width:900px){
:root{--ct-fixed-header-height:56px}
/* Full-width mobile content; no squeezed central strip. */
html,
body,
#appView,
.app-view{
width:100%!important;
max-width:none!important;
overflow-x:hidden!important;
}
.app-view>.app-main{
width:100%!important;
max-width:none!important;
padding:calc(var(--ct-fixed-header-height) + 4px) 0 10px!important;
margin:0!important;
}
#pageContent,
body.razvoz-standalone #pageContent,
body.razvoz-standalone .razvoz-page{
width:100%!important;
max-width:none!important;
margin:0!important;
}
/* Compact fixed top navigation on phones. */
#appHeader.app-header,
.app-header.warm-header{
min-height:var(--ct-fixed-header-height)!important;
height:var(--ct-fixed-header-height)!important;
padding:6px 8px!important;
grid-template-columns:minmax(0,1fr) auto!important;
}
#appHeader .brand-wrap{min-width:0!important}
#appHeader .brand{min-width:0!important;white-space:nowrap!important}
#appHeader .brand>span:nth-child(2){overflow:hidden!important;text-overflow:ellipsis!important}
/* Drawer starts below the fixed header and does not blur the application. */
#appHeader .main-nav{
top:var(--ct-fixed-header-height)!important;
height:calc(100dvh - var(--ct-fixed-header-height))!important;
padding:14px 12px 22px!important;
}
body.mobile-nav-open::after{
top:var(--ct-fixed-header-height)!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
/* Sticky Razvoz summary and date, followed by sticky day selector. */
body.razvoz-standalone .razvoz-toolbar{
top:var(--ct-fixed-header-height)!important;
padding:10px 10px 9px!important;
gap:9px!important;
border-radius:0!important;
margin:0!important;
}
body.razvoz-standalone .razvoz-title{
min-height:40px!important;
}
body.razvoz-standalone .razvoz-title h1{
font-size:20px!important;
line-height:1.1!important;
}
body.razvoz-standalone .razvoz-title p{
font-size:11px!important;
letter-spacing:.02em!important;
}
body.razvoz-standalone .razvoz-actions{
grid-template-columns:38px minmax(105px,1fr) 38px minmax(132px,1.2fr)!important;
}
body.razvoz-standalone .razvoz-mobile-tabs{
top:calc(var(--ct-fixed-header-height) + 102px)!important;
margin:0!important;
padding:7px 8px!important;
background:rgba(237,244,251,.97)!important;
border-bottom:1px solid rgba(71,85,105,.14)!important;
box-shadow:0 5px 12px rgba(15,23,42,.06)!important;
}
body.dark.razvoz-standalone .razvoz-mobile-tabs{
background:rgba(15,27,45,.97)!important;
}
/* One clean delivery column fills the phone width. */
body.razvoz-standalone .razvoz-board{
display:block!important;
width:100%!important;
min-width:0!important;
padding:8px!important;
margin:0!important;
overflow:visible!important;
}
body.razvoz-standalone .delivery-day{
display:none!important;
width:100%!important;
min-width:0!important;
max-width:none!important;
height:auto!important;
min-height:calc(100dvh - 220px)!important;
margin:0!important;
border-radius:14px!important;
overflow:visible!important;
}
body.razvoz-standalone .delivery-day.mobile-active{
display:flex!important;
}
body.razvoz-standalone .delivery-day>header{
position:sticky!important;
top:calc(var(--ct-fixed-header-height) + 154px)!important;
z-index:12!important;
min-height:48px!important;
padding:11px 12px!important;
}
body.razvoz-standalone .delivery-list{
overflow:visible!important;
padding:9px!important;
}
body.razvoz-standalone .delivery-card{
width:100%!important;
min-width:0!important;
margin:0 0 9px!important;
padding:13px 12px!important;
border-radius:14px!important;
}
body.razvoz-standalone .delivery-card h3,
body.razvoz-standalone .delivery-card strong,
body.razvoz-standalone .delivery-card p{
overflow-wrap:anywhere!important;
word-break:normal!important;
}
body.razvoz-standalone .delivery-add-day{
position:sticky!important;
bottom:8px!important;
z-index:11!important;
margin:4px 9px 10px!important;
}
}
@media(max-width:520px){
body.razvoz-standalone .razvoz-toolbar{
padding:9px 8px 8px!important;
}
body.razvoz-standalone .razvoz-actions{
grid-template-columns:34px minmax(82px,1fr) 34px minmax(116px,1.25fr)!important;
gap:5px!important;
}
body.razvoz-standalone .razvoz-mobile-tabs{
top:calc(var(--ct-fixed-header-height) + 98px)!important;
grid-template-columns:repeat(7,minmax(52px,1fr))!important;
overflow-x:auto!important;
}
body.razvoz-standalone .delivery-day>header{
top:calc(var(--ct-fixed-header-height) + 150px)!important;
}
body.razvoz-standalone .razvoz-board{padding:6px!important}
}
/* Correcto Team v4.7.2 — responsive Razvoz without sticky overlap */
body.razvoz-standalone .razvoz-sticky-shell{
position:sticky;
top:var(--ct-fixed-header-height);
z-index:45;
width:100%;
background:var(--surface,#f6f8fb);
}
body.dark.razvoz-standalone .razvoz-sticky-shell{
background:rgba(14,25,42,.98);
}
body.razvoz-standalone .razvoz-sticky-shell .razvoz-toolbar,
body.razvoz-standalone .razvoz-sticky-shell .razvoz-mobile-tabs{
position:relative!important;
top:auto!important;
}
@media(max-width:900px){
html,
body{
width:100%!important;
min-width:0!important;
max-width:100%!important;
}
body.razvoz-standalone,
body.razvoz-standalone #appView,
body.razvoz-standalone .app-view,
body.razvoz-standalone .app-main,
body.razvoz-standalone #pageContent,
body.razvoz-standalone .razvoz-page{
width:100%!important;
min-width:0!important;
max-width:100%!important;
margin:0!important;
box-sizing:border-box!important;
}
body.razvoz-standalone .razvoz-sticky-shell{
top:var(--ct-fixed-header-height)!important;
box-shadow:0 8px 18px rgba(15,23,42,.10);
}
body.razvoz-standalone .razvoz-toolbar{
display:grid!important;
grid-template-columns:1fr!important;
gap:8px!important;
width:100%!important;
padding:10px 8px 8px!important;
box-sizing:border-box!important;
}
body.razvoz-standalone .razvoz-title{
width:100%!important;
min-width:0!important;
}
body.razvoz-standalone .razvoz-title>div{
min-width:0!important;
}
body.razvoz-standalone .razvoz-title h1,
body.razvoz-standalone .razvoz-title p{
white-space:normal!important;
overflow:visible!important;
}
body.razvoz-standalone .razvoz-actions{
display:grid!important;
grid-template-columns:36px minmax(0,1fr) 36px minmax(122px,1.25fr)!important;
gap:6px!important;
width:100%!important;
min-width:0!important;
}
body.razvoz-standalone .razvoz-actions button{
min-width:0!important;
width:100%!important;
height:40px!important;
padding:0 7px!important;
font-size:11px!important;
white-space:nowrap!important;
}
body.razvoz-standalone .razvoz-mobile-tabs{
width:100%!important;
display:grid!important;
grid-template-columns:repeat(7,minmax(48px,1fr))!important;
gap:4px!important;
padding:5px 6px 7px!important;
margin:0!important;
overflow-x:auto!important;
box-sizing:border-box!important;
scrollbar-width:none!important;
}
body.razvoz-standalone .razvoz-mobile-tabs::-webkit-scrollbar{display:none!important}
body.razvoz-standalone .razvoz-mobile-tab{
min-width:48px!important;
padding:5px 2px!important;
}
body.razvoz-standalone .razvoz-board{
width:100%!important;
padding:8px 8px 18px!important;
box-sizing:border-box!important;
}
body.razvoz-standalone .delivery-day.mobile-active{
display:flex!important;
width:100%!important;
min-height:0!important;
height:auto!important;
overflow:hidden!important;
}
/* The day title is part of normal flow; it cannot cover the first card. */
body.razvoz-standalone .delivery-day>header{
position:relative!important;
top:auto!important;
z-index:2!important;
flex:0 0 auto!important;
}
body.razvoz-standalone .delivery-list{
position:relative!important;
overflow:visible!important;
padding:10px!important;
}
body.razvoz-standalone .delivery-card{
position:relative!important;
z-index:1!important;
}
body.razvoz-standalone .delivery-add-day{
position:relative!important;
bottom:auto!important;
margin:4px 10px 12px!important;
}
}
@media(max-width:420px){
body.razvoz-standalone .razvoz-actions{
grid-template-columns:34px minmax(86px,1fr) 34px minmax(118px,1.2fr)!important;
gap:5px!important;
}
body.razvoz-standalone .razvoz-actions button{
font-size:10px!important;
padding:0 5px!important;
}
body.razvoz-standalone .razvoz-board{padding-left:6px!important;padding-right:6px!important}
body.razvoz-standalone .delivery-card{padding:12px 10px!important}
}
/* Correcto Team v4.7.2 — Razvoz normal flow, no sticky task obstruction */
body.razvoz-standalone .razvoz-sticky-shell,
body.razvoz-standalone .razvoz-toolbar,
body.razvoz-standalone .razvoz-mobile-tabs,
body.razvoz-standalone .delivery-day > header,
body.razvoz-standalone .delivery-add-day{
position:static!important;
top:auto!important;
right:auto!important;
bottom:auto!important;
left:auto!important;
z-index:auto!important;
transform:none!important;
}
body.razvoz-standalone .razvoz-sticky-shell{
width:100%!important;
box-shadow:none!important;
background:transparent!important;
}
body.razvoz-standalone .razvoz-page{
overflow:visible!important;
}
body.razvoz-standalone .razvoz-board,
body.razvoz-standalone .delivery-day,
body.razvoz-standalone .delivery-list{
overflow:visible!important;
max-height:none!important;
}
@media(max-width:900px){
body.razvoz-standalone .razvoz-sticky-shell,
body.razvoz-standalone .razvoz-toolbar,
body.razvoz-standalone .razvoz-mobile-tabs,
body.razvoz-standalone .delivery-day > header,
body.razvoz-standalone .delivery-add-day{
position:static!important;
top:auto!important;
bottom:auto!important;
}
body.razvoz-standalone .razvoz-board{
padding-top:8px!important;
}
}
/* Correcto Team v4.7.4 — content-height columns with viewport cap */
.board-kanban-dashboard{
align-items:flex-start!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
overflow-x:auto!important;
overflow-y:hidden!important;
}
.board-kanban-dashboard .board-kanban-column{
align-self:flex-start!important;
display:flex!important;
flex-direction:column!important;
height:auto!important;
min-height:0!important;
max-height:calc(100dvh - 132px)!important;
overflow:hidden!important;
}
.board-kanban-dashboard .board-kanban-column>header{
position:relative!important;
top:auto!important;
flex:0 0 auto!important;
}
.board-kanban-dashboard .board-column-description{
flex:0 0 auto!important;
}
.board-kanban-dashboard .board-column-list{
flex:0 1 auto!important;
min-height:0!important;
height:auto!important;
max-height:calc(100dvh - 230px)!important;
overflow-y:auto!important;
overflow-x:hidden!important;
overscroll-behavior-y:contain!important;
}
.board-kanban-dashboard .add-task{
position:relative!important;
bottom:auto!important;
flex:0 0 auto!important;
margin-top:6px!important;
}
@supports not (height:100dvh){
.board-kanban-dashboard .board-kanban-column{max-height:calc(100vh - 132px)!important}
.board-kanban-dashboard .board-column-list{max-height:calc(100vh - 230px)!important}
}
@media(max-width:900px){
.board-kanban-dashboard .board-kanban-column{
max-height:calc(100dvh - 112px)!important;
}
.board-kanban-dashboard .board-column-list{
max-height:calc(100dvh - 205px)!important;
}
}
html body .board-kanban-dashboard.board-kanban-clean .board-kanban-column{
align-self:flex-start!important;
display:flex!important;
flex-direction:column!important;
flex-grow:0!important;
flex-shrink:0!important;
height:fit-content!important;
min-height:0!important;
max-height:calc(100dvh - 132px)!important;
overflow:hidden!important;
}
html body .board-kanban-dashboard.board-kanban-clean .board-column-list{
flex:0 1 auto!important;
height:auto!important;
min-height:0!important;
max-height:calc(100dvh - 230px)!important;
overflow-y:auto!important;
overflow-x:hidden!important;
align-content:start!important;
}
@media(max-width:900px){
html body .board-kanban-dashboard.board-kanban-clean .board-kanban-column{
max-height:calc(100dvh - 112px)!important;
}
html body .board-kanban-dashboard.board-kanban-clean .board-column-list{
max-height:calc(100dvh - 205px)!important;
}
}
@supports not (height:100dvh){
html body .board-kanban-dashboard.board-kanban-clean .board-kanban-column{
max-height:calc(100vh - 132px)!important;
}
html body .board-kanban-dashboard.board-kanban-clean .board-column-list{
max-height:calc(100vh - 230px)!important;
}
@media(max-width:900px){
html body .board-kanban-dashboard.board-kanban-clean .board-kanban-column{
max-height:calc(100vh - 112px)!important;
}
html body .board-kanban-dashboard.board-kanban-clean .board-column-list{
max-height:calc(100vh - 205px)!important;
}
}
}
/* Correcto Team v4.7.5 — universal adaptive columns (light + dark + custom backgrounds)
The final size is calculated by boards.js. These rules deliberately do not depend on theme. */
html body .board-kanban-dashboard.board-kanban-clean{
align-items:flex-start!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
overflow-x:auto!important;
overflow-y:hidden!important;
}
html body .board-kanban-dashboard.board-kanban-clean .board-kanban-column{
align-self:flex-start!important;
display:flex!important;
flex-direction:column!important;
flex:0 0 var(--board-column-width,292px)!important;
height:var(--ct-column-height,auto)!important;
min-height:0!important;
max-height:var(--ct-column-max-height,calc(100dvh - 132px))!important;
overflow:hidden!important;
}
html body .board-kanban-dashboard.board-kanban-clean .board-column-list{
flex:0 1 auto!important;
height:auto!important;
min-height:0!important;
max-height:var(--ct-list-max-height,none)!important;
overflow-y:var(--ct-list-overflow,visible)!important;
overflow-x:hidden!important;
align-content:start!important;
overscroll-behavior-y:contain!important;
}
html body .board-kanban-dashboard.board-kanban-clean .board-kanban-column > header,
html body .board-kanban-dashboard.board-kanban-clean .board-kanban-column > .board-column-description,
html body .board-kanban-dashboard.board-kanban-clean .board-kanban-column > .add-task{
flex:0 0 auto!important;
}
html body .board-kanban-dashboard.board-kanban-clean .board-kanban-column > .add-task{
margin-top:0!important;
}
@supports not (height:100dvh){
html body .board-kanban-dashboard.board-kanban-clean .board-kanban-column{
max-height:var(--ct-column-max-height,calc(100vh - 132px))!important;
}
}
/* v4.9.5 - header controls and mobile Razvoz notifications */
.notification-sound-toggle{position:relative;display:grid!important;place-items:center!important;flex:0 0 auto}
.notification-status-dot{position:absolute;right:5px;bottom:5px;width:7px;height:7px;border-radius:50%;background:#8b98aa;border:2px solid currentColor}
.notification-sound-toggle.is-enabled .notification-status-dot{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
@media(max-width:900px){
.app-header.warm-header{grid-template-columns:minmax(0,1fr) auto!important}
.header-tools{display:flex!important;visibility:visible!important;opacity:1!important;grid-column:2!important;justify-self:end!important;min-width:max-content!important}
.header-tools .notification-sound-toggle,
.header-tools .profile-dropdown{display:flex!important}
.header-tools .profile-button{display:flex!important;min-width:40px!important;width:auto!important}
.header-tools .profile-button .avatar{display:grid!important}
}
@media(max-width:600px){
.header-tools .notification-sound-toggle{display:grid!important}
.header-tools .profile-dropdown{display:block!important}
.header-tools .profile-button{padding:3px!important;border-radius:10px!important}
.header-tools .profile-copy,
.header-tools .profile-button>span:last-child{display:none!important}
}
/* =========================================================
Correcto Team v4.9.7 — one-line responsive header + smooth board pan
========================================================= */
@media (min-width:901px){
.app-header.warm-header{
display:flex!important;
align-items:center!important;
flex-wrap:nowrap!important;
gap:14px!important;
min-height:58px!important;
padding:7px 18px!important;
overflow:visible!important;
}
.brand-wrap{flex:0 0 auto!important;white-space:nowrap!important}
.main-nav{
display:flex!important;
flex:0 0 auto!important;
align-items:center!important;
flex-wrap:nowrap!important;
gap:3px!important;
min-width:0!important;
overflow:visible!important;
order:initial!important;
}
.main-nav>.nav-button,
.main-nav>.dropdown>.dropdown-toggle{
white-space:nowrap!important;
padding:8px 9px!important;
font-size:13px!important;
}
.header-tools{
margin-left:auto!important;
flex:1 1 auto!important;
min-width:0!important;
display:flex!important;
flex-wrap:nowrap!important;
justify-content:flex-end!important;
}
.global-search{flex:1 1 360px!important;min-width:150px!important;max-width:640px!important;width:auto!important}
.profile-button{white-space:nowrap!important}
}
@media (min-width:901px) and (max-width:1220px){
.app-header.warm-header{gap:8px!important;padding-inline:10px!important}
.brand span:not(.brand-logo),
.brand small{font-size:12px!important}
.main-nav>.nav-button,
.main-nav>.dropdown>.dropdown-toggle{padding-inline:6px!important;font-size:12px!important}
.global-search{min-width:120px!important}
.profile-copy{display:none!important}
}
@media (min-width:901px) and (max-width:1030px){
.global-search{display:none!important}
}
@media (max-width:900px){
.app-header.warm-header{display:flex!important;align-items:center!important;justify-content:space-between!important;flex-wrap:nowrap!important}
.header-tools{margin-left:auto!important;display:flex!important;flex-wrap:nowrap!important}
.profile-copy,
.global-search{display:none!important}
body.mobile-nav-open .main-nav{display:flex!important;flex-direction:column!important;align-items:stretch!important;overflow-y:auto!important}
}
.board-kanban-dashboard{scroll-behavior:auto!important;overscroll-behavior-x:contain!important}
.board-kanban-dashboard.is-panning{cursor:grabbing!important}
.board-kanban-dashboard:not(.is-panning){cursor:grab}
.board-kanban-dashboard .board-task-card,
.board-kanban-dashboard button,
.board-kanban-dashboard input,
.board-kanban-dashboard textarea,
.board-kanban-dashboard select{cursor:auto}
/* =========================================================
Correcto Team v4.9.9 — drag-to-edge auto scroll
========================================================= */
.board-kanban-dashboard{
position:relative;
scroll-snap-type:none!important;
transition:box-shadow .16s ease!important;
}
.board-kanban-dashboard.drag-auto-scroll-active{
scroll-behavior:auto!important;
}
.board-kanban-dashboard.drag-scroll-left{
box-shadow:inset 78px 0 58px -58px rgba(37,99,235,.62)!important;
}
.board-kanban-dashboard.drag-scroll-right{
box-shadow:inset -78px 0 58px -58px rgba(37,99,235,.62)!important;
}
body:not(.dark) .board-kanban-dashboard.drag-scroll-left{
box-shadow:inset 78px 0 58px -58px rgba(14,165,233,.52)!important;
}
body:not(.dark) .board-kanban-dashboard.drag-scroll-right{
box-shadow:inset -78px 0 58px -58px rgba(14,165,233,.52)!important;
}
/* Correcto Team v4.9.9 — user colors + interactive dashboard */
.dashboard-stat{
appearance:none;
width:100%;
text-align:left;
font:inherit;
color:inherit;
cursor:pointer;
transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.dashboard-stat:focus-visible{
transform:translateY(-2px);
box-shadow:0 14px 30px rgba(20,37,63,.13);
outline:none;
}
.dashboard-stat-arrow{
position:relative;
z-index:1;
justify-self:end;
margin-top:-20px;
font-size:10px;
color:var(--stat-color,#316cff);
opacity:.75;
}
.task-list-assignee,
.delivery-assignee{
display:inline-flex;
align-items:center;
gap:6px;
width:max-content;
max-width:100%;
margin-top:6px;
padding:3px 8px;
border:1px solid color-mix(in srgb,var(--user-color) 48%,var(--border));
border-radius:999px;
background:color-mix(in srgb,var(--user-color) 11%,var(--surface));
color:var(--text);
font-size:11px;
font-weight:700;
}
.task-list-assignee i,
.delivery-assignee i{
flex:0 0 auto;
width:8px;
height:8px;
border-radius:50%;
background:var(--user-color);
box-shadow:0 0 0 3px color-mix(in srgb,var(--user-color) 18%,transparent);
}
.delivery-card{border-left:4px solid transparent}
.delivery-card:has(.delivery-assignee){border-left-color:var(--user-color,#3976ff)}
@media(max-width:720px){
.dashboard-stat-arrow{margin-top:-16px}
.task-list-assignee,
.delivery-assignee{font-size:10px}
}
/* Correcto Team v4.10.1 — compact 7-column board, stable board context and users frame */
.users-page-frame{
margin:0 0 10px;
padding:14px 16px;
border:1px solid color-mix(in srgb,var(--border) 86%,#2f7cff 14%);
border-radius:16px 16px 0 0;
background:color-mix(in srgb,var(--surface) 94%,transparent);
box-shadow:0 10px 28px rgba(18,48,92,.10);
}
.users-controls-frame{
margin-top:-11px;
margin-bottom:16px;
padding:12px 14px 14px;
border:1px solid color-mix(in srgb,var(--border) 86%,#2f7cff 14%);
border-top:0;
border-radius:0 0 16px 16px;
background:color-mix(in srgb,var(--surface) 94%,transparent);
box-shadow:0 10px 28px rgba(18,48,92,.10);
}
.users-controls-frame .users-toolbar{margin:0}
@media (min-width:1500px){
.board-kanban-dashboard{gap:10px!important;padding-left:10px!important;padding-right:10px!important}
.board-kanban-clean .board-kanban-column{
flex:0 0 calc((100vw - 112px)/7)!important;
width:calc((100vw - 112px)/7)!important;
min-width:220px!important;
max-width:270px!important;
border-radius:13px!important;
}
.board-kanban-dashboard .board-kanban-column>header{padding:8px 9px!important;min-height:42px!important}
.board-kanban-column>header strong{font-size:12.5px!important}
.board-column-list{padding:8px!important;gap:7px!important}
.board-task-card{padding:10px 10px!important;border-radius:11px!important;font-size:12.5px!important;line-height:1.42!important}
.board-kanban-column .add-task{padding:9px 10px!important;font-size:12.5px!important}
}
@media (min-width:1200px) and (max-width:1499px){
.board-kanban-clean .board-kanban-column{flex-basis:245px!important;min-width:245px!important;width:245px!important}
}
@media (max-width:720px){
.users-page-frame{padding:12px;border-radius:14px 14px 0 0}
.users-controls-frame{padding:10px;border-radius:0 0 14px 14px}
}
/* Correcto Team v4.10.1 — user color management, subtle task hover and archive center */
.user-card{border-top:3px solid var(--user-card-color,#3976ff)}
.user-color-summary{display:inline-flex!important;align-items:center;gap:7px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.user-color-summary i{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 10%,transparent)}
.user-color-picker-row{display:grid;grid-template-columns:58px minmax(110px,1fr);gap:8px;align-items:center}
.user-color-picker-row input[type=color]{width:58px;height:42px;padding:3px;border-radius:10px;cursor:pointer}
.board-task-card,
.task-card,
.delivery-card{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,filter .16s ease!important}
.archive-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px;margin-bottom:14px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}
.archive-toolbar>div:first-child{display:grid;gap:3px}.archive-toolbar small{color:var(--muted)}
.archive-toolbar .inline-row{min-width:min(620px,60vw)}
.archive-card{position:relative;overflow:hidden}.archive-card:before{content:"ARHIVA";position:absolute;right:-28px;top:16px;transform:rotate(38deg);padding:4px 34px;background:#64748b;color:#fff;font-size:9px;font-weight:800;letter-spacing:.09em}
@media(max-width:760px){.archive-toolbar{align-items:stretch;flex-direction:column}.archive-toolbar .inline-row{min-width:0;width:100%;display:grid;grid-template-columns:1fr auto}.user-color-picker-row{grid-template-columns:52px 1fr}}
@media(prefers-reduced-motion:reduce){.board-task-card,
.task-card,
.delivery-card,
.archive-card{transition:none!important}}
/* Correcto Team v4.10.2 — attachments, precise drop space and richer task cards */
.board-kanban-clean .board-task-title{font-size:14px!important;font-weight:800!important;line-height:1.35!important;color:var(--text)!important}
.board-kanban-clean .board-task-description{margin-top:5px;font-size:11.5px;line-height:1.42;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line}
.board-kanban-clean .board-task-card.task-drop-before{margin-top:72px!important;transition:margin .14s ease,transform .14s ease,box-shadow .14s ease}
.board-kanban-clean .board-task-card.task-drop-after{margin-bottom:72px!important;transition:margin .14s ease,transform .14s ease,box-shadow .14s ease}
.board-kanban-clean .board-task-card.task-drop-before::before,
.board-kanban-clean .board-task-card.task-drop-after::after{content:"Pusti zadatak ovde";position:absolute;left:8px;right:8px;height:54px;border:2px dashed #3b82f6;border-radius:10px;display:grid;place-items:center;color:#60a5fa;background:rgba(59,130,246,.08);font-size:11px;font-weight:800;pointer-events:none}
.board-kanban-clean .board-task-card.task-drop-before::before{bottom:calc(100% + 9px)}
.board-kanban-clean .board-task-card.task-drop-after::after{top:calc(100% + 9px)}
.task-attachments-section{margin-top:14px}
.task-attachments-list{display:grid;gap:7px;margin:8px 0}
.task-attachment-row{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface2)}
.task-attachment-row>a{display:flex;align-items:center;gap:9px;min-width:0;flex:1;color:inherit;text-decoration:none}
.task-attachment-row>a>span:last-child{display:grid;min-width:0}.task-attachment-row strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.task-attachment-row small{color:var(--muted)}
.attachment-icon{font-size:20px}.attachment-delete{width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:20px}
.task-attachment-upload{display:flex!important;align-items:center!important;gap:10px!important;padding:10px 12px!important;border:1px dashed var(--border)!important;border-radius:10px!important;cursor:pointer!important;background:var(--surface2)!important}.task-attachment-upload input{display:none}.task-attachment-upload span{font-weight:800;color:var(--primary)}.task-attachment-upload small{margin-left:auto;color:var(--muted);max-width:45%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Correcto Team v4.10.3 — calendar correction and restrained task interaction */
.board-kanban-clean .board-task-card,
.board-task-card,
.task-card,
.delivery-card{
transition:transform .15s ease,box-shadow .15s ease!important;
filter:none!important;
}
.board-kanban-clean .board-task-title{
font-size:15px!important;
font-weight:500!important;
line-height:1.38!important;
letter-spacing:0!important;
}
.board-kanban-clean .board-task-description{
font-size:11.5px!important;
font-weight:400!important;
line-height:1.42!important;
}
.board-kanban-column.today-column{
outline:2px solid color-mix(in srgb,var(--primary) 55%,transparent)!important;
box-shadow:0 8px 22px color-mix(in srgb,var(--primary) 10%,transparent)!important;
}
.board-kanban-column .column-date{
white-space:nowrap;
font-variant-numeric:tabular-nums;
}
@media(prefers-reduced-motion:reduce){
}
/* Correcto Team v4.10.4 — calm cards, precise insertion marker, pin and reminders */
.board-kanban-clean .board-task-card,
.board-task-card,
.task-card,
.delivery-card{
transition:none!important;
}
.board-kanban-clean .board-task-card.task-drop-before{margin-top:22px!important}
.board-kanban-clean .board-task-card.task-drop-after{margin-bottom:22px!important}
.board-kanban-clean .board-task-card.task-drop-before::before,
.board-kanban-clean .board-task-card.task-drop-after::after{
content:""!important;
height:4px!important;
left:2px!important;
right:2px!important;
border:0!important;
border-radius:999px!important;
background:var(--primary)!important;
box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 18%,transparent)!important;
}
.board-kanban-clean .board-task-card.task-drop-before::before{bottom:calc(100% + 9px)!important}
.board-kanban-clean .board-task-card.task-drop-after::after{top:calc(100% + 9px)!important}
.task-pin-mark{display:inline-block;margin-right:5px;font-size:12px;vertical-align:1px}
.pin-switch{margin-top:2px}
/* Correcto Team v4.10.5 — visible labels/attachments, zero card hover and precision insert marker */
.board-task-card,
.task-card,
.delivery-card,
.archive-card,
.user-card{
transition:none!important;
}
.board-task-labels{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.board-task-label{display:inline-flex;align-items:center;max-width:100%;min-height:20px;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--label-color,#64748b) 17%,transparent);border:1px solid color-mix(in srgb,var(--label-color,#64748b) 48%,transparent);color:color-mix(in srgb,var(--label-color,#64748b) 78%,var(--text));font-size:10px;font-weight:650;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.dark .board-task-label{background:color-mix(in srgb,var(--label-color,#64748b) 24%,transparent);color:color-mix(in srgb,var(--label-color,#64748b) 42%,#fff)}
.board-task-attachment-summary{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:5px;margin-top:8px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:color-mix(in srgb,var(--surface2) 84%,transparent);font-size:10.5px;color:var(--text)}
.board-task-attachment-summary>span:first-child{font-size:13px}
.board-task-attachment-summary>span:nth-child(2){font-weight:650;white-space:nowrap}
.board-task-attachment-summary small{min-width:0;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-kanban-clean .board-task-card.task-drop-before,
.board-kanban-clean .board-task-card.task-drop-after{margin:0!important}
.board-kanban-clean .board-task-card.task-drop-before::before,
.board-kanban-clean .board-task-card.task-drop-before::after,
.board-kanban-clean .board-task-card.task-drop-after::before,
.board-kanban-clean .board-task-card.task-drop-after::after{content:none!important;display:none!important}
.task-insert-marker{position:relative;flex:0 0 14px;height:14px;margin:1px 0;pointer-events:none}
.task-insert-marker::before{content:"";position:absolute;left:3px;right:3px;top:50%;height:3px;transform:translateY(-50%);border-radius:999px;background:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent)}
.task-insert-marker::after{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;transform:translateY(-50%);border-radius:50%;background:var(--primary);box-shadow:calc(100% + 100000px) 0 0 var(--primary)}
.task-insert-marker span{position:absolute;right:0;top:50%;width:7px;height:7px;transform:translateY(-50%);border-radius:50%;background:var(--primary)}
.board-task-card.dragging{opacity:.58!important;transform:none!important;box-shadow:none!important}
@media(max-width:720px){.board-task-label{font-size:9.5px}.board-task-attachment-summary{grid-template-columns:auto auto;}.board-task-attachment-summary small{grid-column:1/-1}}
/* Correcto Team v4.10.6 — complete hover removal and persistent attachment preview */
/* No visual state is triggered only by pointer hover. Keyboard focus, active selection and drag markers remain available. */
.board-task-attachment-summary{display:grid!important;visibility:visible!important;opacity:1!important}
.board-task-card[data-attachment-count="0"] .board-task-attachment-summary{display:none!important}
.task-insert-marker{height:10px!important;flex-basis:10px!important;margin:0!important}
.task-insert-marker::before{left:1px!important;right:1px!important;height:2px!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 12%,transparent)!important}
.task-insert-marker::after,.task-insert-marker span{width:6px!important;height:6px!important}
/* Correcto Team v4.11.0 — mobile board navigation and full-column planner snap */
.mobile-bottom-nav{display:none}
@media(max-width:720px){
body{padding-bottom:74px!important}
.mobile-bottom-nav{
position:fixed;left:0;right:0;bottom:0;z-index:10020;
display:grid;grid-template-columns:repeat(5,1fr);gap:2px;
min-height:66px;padding:6px max(6px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));
border-top:1px solid var(--border);background:color-mix(in srgb,var(--surface) 94%,transparent);
box-shadow:0 -10px 30px rgba(15,23,42,.12);backdrop-filter:blur(16px)
}
.mobile-bottom-nav button{display:grid;place-items:center;gap:2px;min-width:0;padding:5px 2px;border:0;border-radius:10px;background:transparent;color:var(--menu-text,var(--text));font:inherit}
.mobile-bottom-nav button span{font-size:19px;line-height:1}
.mobile-bottom-nav button small{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:9.5px;white-space:nowrap}
.mobile-bottom-nav button.active{background:color-mix(in srgb,var(--primary) 13%,transparent);color:var(--primary)}
#boardKanbanDashboard.board-kanban-dashboard{
display:flex!important;grid-template-columns:none!important;gap:12px!important;
width:calc(100vw - 24px)!important;max-width:none!important;
margin-inline:0!important;padding:0 0 8px!important;
overflow-x:auto!important;overflow-y:hidden!important;
overscroll-behavior-x:contain;scroll-snap-type:x mandatory!important;
scroll-padding-inline:0;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
touch-action:pan-x pan-y;
}
#boardKanbanDashboard.board-kanban-dashboard::-webkit-scrollbar{display:none}
#boardKanbanDashboard .board-kanban-column{
flex:0 0 100%!important;width:100%!important;min-width:100%!important;max-width:100%!important;
height:calc(100dvh - 162px)!important;min-height:520px!important;
scroll-snap-align:start!important;scroll-snap-stop:always!important;
overflow:hidden!important;display:flex!important;flex-direction:column!important;
}
#boardKanbanDashboard .board-column-list{
flex:0 1 auto!important;min-height:0!important;
max-height:min(calc(100dvh - 330px),390px)!important;
overflow-y:auto!important;overflow-x:hidden!important;
overscroll-behavior:contain;padding-bottom:100px!important;
scrollbar-gutter:stable;
}
#boardKanbanDashboard .board-task-card{min-height:104px}
#boardKanbanDashboard .add-task{
flex:0 0 auto!important;position:relative!important;z-index:2;
margin-top:10px!important;margin-bottom:92px!important;
}
#boardKanbanDashboard .board-column-description{flex:0 0 auto}
}
body.dark .mobile-bottom-nav{background:color-mix(in srgb,#0f172a 94%,transparent)}
/* Correcto Team v4.11.1 — mobile task fields, quick actions and active delivery */
@media(max-width:640px){
#appModal .form-grid label{min-width:0;max-width:100%;overflow:hidden}
#appModal input[type="date"],
#appModal input[type="datetime-local"]{
display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;
box-sizing:border-box!important;font-size:16px!important;padding:11px 10px!important;
}
#appModal input[type="datetime-local"]::-webkit-datetime-edit{min-width:0;padding:0}
#appModal input[type="datetime-local"]::-webkit-calendar-picker-indicator,
#appModal input[type="date"]::-webkit-calendar-picker-indicator{margin-left:auto;flex:0 0 auto}
.task-context-menu.mobile-action-sheet{
position:fixed!important;left:8px!important;right:8px!important;bottom:8px!important;top:auto!important;
width:auto!important;max-height:min(72dvh,560px)!important;overflow:auto!important;padding:8px!important;
border-radius:18px!important;z-index:11000!important;box-shadow:0 -12px 40px rgb(0 0 0/.25)!important;
}
.task-context-menu.mobile-action-sheet button{min-height:46px!important;font-size:15px!important;border-radius:11px!important}
}
.quick-action-file{display:none!important}
.delivery-card.active-delivery{border:2px solid #2f80ed;box-shadow:0 0 0 3px rgb(47 128 237/.12)}
.delivery-route-status{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:#2f80ed;margin-top:8px}
.delivery-route-status i{width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgb(47 128 237/.12)}
.delivery-route-actions{display:flex;gap:7px;margin-top:10px}
.delivery-route-actions button{flex:1;min-height:36px;border-radius:9px}
.delivery-start{background:#1f6feb;color:#fff;border:0}
.delivery-stop{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}
/* Correcto Team v4.12.0 — Premium Delivery Center */
body.premium-delivery-center .premium-razvoz-page{max-width:1440px;margin:0 auto;padding:18px 20px 40px}
body.premium-delivery-center .razvoz-sticky-shell{position:sticky;top:0;z-index:20;background:var(--bg);padding-bottom:12px}
body.premium-delivery-center .razvoz-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 0 14px}
body.premium-delivery-center .razvoz-title{display:flex;align-items:center;gap:12px}.premium-delivery-center .razvoz-title h1{margin:0;font-size:26px}.premium-delivery-center .razvoz-title p{margin:3px 0 0;color:var(--muted)}
.premium-route-day{display:grid;gap:18px}.route-hero{border-radius:18px;padding:22px;color:#fff;background:linear-gradient(135deg,#1959c7,#0d3c96);box-shadow:0 12px 28px rgb(22 74 160/.24)}
.route-hero.finished{background:linear-gradient(135deg,#159447,#087332)}.route-hero.paused{background:linear-gradient(135deg,#ef9700,#c76d00)}.route-hero.planned{background:linear-gradient(135deg,#64748b,#334155)}
.route-hero-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.route-hero-top span{font-size:11px;font-weight:900;letter-spacing:.08em;background:rgb(255 255 255/.16);padding:5px 9px;border-radius:999px}.route-hero-top b{font-size:18px}
.route-hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:24px 0 14px}.route-hero-stats div{display:grid;gap:4px}.route-hero-stats small{opacity:.75;text-transform:uppercase;font-size:10px}.route-hero-stats strong{font-size:25px}
.route-progress{height:8px;background:rgb(255 255 255/.18);border-radius:99px;overflow:hidden}.route-progress i{display:block;height:100%;background:#23d77b;border-radius:inherit;transition:width .3s ease}
.route-hero-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}.route-hero-button{min-height:42px;border:0;border-radius:10px;padding:0 18px;font-weight:850}.route-hero-button.start{background:#fff;color:#1358c8}.route-hero-button.stop{background:#ef4444;color:#fff}.route-hero-button.finish{background:#16a34a;color:#fff}.route-hero-button.report{background:rgb(255 255 255/.2);color:#fff}
.route-content-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(310px,.75fr);gap:18px;align-items:start}.route-stops-panel,.route-detail-panel{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:0 8px 24px rgb(15 23 42/.06)}
.route-stops-panel>header{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--border)}.route-stops-panel h2,.route-detail-panel h2{margin:0}.route-stops-panel p{margin:4px 0 0;color:var(--muted);font-size:13px}.route-stops-panel>header button{border:0;border-radius:9px;background:var(--primary);color:#fff;padding:9px 13px;font-weight:800}
.desktop-route-list{padding:8px}.route-stop{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;gap:10px;align-items:center;padding:14px 12px;border:1px solid transparent;border-bottom-color:var(--border);cursor:pointer;transition:.16s}.route-stop:hover,.route-stop.selected{background:var(--surface-2);border-color:color-mix(in srgb,var(--primary) 28%,var(--border));border-radius:12px}.route-stop.active{border-color:#22c55e;background:rgb(34 197 94/.055)}.route-stop.completed{opacity:.72}.route-stop-index{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#246dde;color:#fff;font-weight:900;font-size:12px}.route-stop.completed .route-stop-index{background:#18a957}.route-stop-main{min-width:0}.route-stop-heading{display:flex;align-items:center;gap:9px}.route-stop-heading strong{overflow:hidden;text-overflow:ellipsis}.route-stop-address{display:block;color:var(--muted);font-size:12px;margin-top:5px}.route-stop-more{border:0;background:transparent;color:var(--muted);font-size:18px}.route-current-label{display:flex;align-items:center;gap:6px;color:#159447;font-size:11px;font-weight:900;margin-top:6px}.route-current-label i{width:7px;height:7px;border-radius:50%;background:currentColor}
.route-status-badge{white-space:nowrap;font-size:9px;font-weight:950;letter-spacing:.04em;padding:4px 7px;border-radius:999px}.route-status-badge.active{background:#dcfce7;color:#087a38}.route-status-badge.completed{background:#dbeafe;color:#1d4ed8}.route-status-badge.planned{background:var(--surface-2);color:var(--muted)}
.route-detail-panel{padding:20px;position:sticky;top:112px}.route-detail-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.route-detail-head button{border:0;background:transparent;color:var(--primary);font-weight:800}.route-detail-data{display:grid;gap:0;margin-top:18px;border:1px solid var(--border);border-radius:12px;overflow:hidden}.route-detail-data div{display:grid;gap:5px;padding:12px;border-bottom:1px solid var(--border)}.route-detail-data div:last-child{border:0}.route-detail-data small{color:var(--muted)}.route-detail-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.route-detail-actions a,.route-detail-actions button{display:grid;place-items:center;min-height:40px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);text-decoration:none;font-weight:750}.route-detail-actions button{border-color:#22c55e;color:#138a42}.route-summary{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}.route-summary h3{margin:0 0 8px}.route-summary p{display:flex;justify-content:space-between;margin:0;padding:10px 0;border-bottom:1px solid var(--border)}.route-summary span{color:var(--muted)}
.mobile-route-cards{display:none}.premium-delivery-card{background:var(--surface);border:1px solid var(--border);border-left:4px solid transparent;border-radius:14px;padding:14px;box-shadow:0 5px 16px rgb(15 23 42/.05)}.premium-delivery-card.active{border-left-color:#22c55e;border-color:#22c55e}.premium-delivery-card.completed{opacity:.72}.premium-delivery-card>header{display:flex;align-items:center;gap:8px}.premium-delivery-card>header button{margin-left:auto;border:0;background:transparent;font-size:18px}.delivery-order{font-size:11px;color:var(--muted)}.premium-delivery-title{display:grid;grid-template-columns:24px 1fr;gap:9px;margin:13px 0}.delivery-check-dot{width:22px;height:22px;border:1.5px solid #94a3b8;border-radius:50%;display:grid;place-items:center;color:#16a34a}.premium-delivery-info{display:grid;gap:7px;padding-left:33px;font-size:13px}.premium-delivery-info a{color:inherit;text-decoration:none}.premium-delivery-info p{margin:2px 0 0;color:var(--muted)}.premium-active-line{margin:12px 0 0 33px;color:#159447;font-size:12px;font-weight:900}.premium-active-line i{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:6px}.premium-delivery-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px;margin-top:14px}.route-action{min-height:42px;border-radius:9px;display:grid;place-items:center;text-decoration:none;font-weight:800;font-size:12px}.route-action.secondary{border:1px solid var(--border);color:var(--text);background:var(--surface)}.route-action.primary{border:0;background:#1f6feb;color:#fff}.route-action.success{border:1px solid #22c55e;color:#138a42;background:transparent}.route-action.danger{border:1px solid #ef4444;color:#dc2626;background:transparent}.route-action.locked{border:1px solid var(--border);color:var(--muted);background:var(--surface-2)}.premium-delivery-card footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid var(--border);font-size:10px;color:var(--muted)}
@media(max-width:900px){body.premium-delivery-center .premium-razvoz-page{padding:8px 8px 92px}.premium-delivery-center .razvoz-toolbar{padding:6px 4px 10px}.premium-delivery-center .razvoz-title .razvoz-icon{display:none}.premium-delivery-center .razvoz-title h1{font-size:19px}.premium-delivery-center .razvoz-title p{font-size:11px}.premium-delivery-center .razvoz-actions .secondary-button{display:none}.premium-delivery-center .razvoz-actions .primary-button{padding:9px 11px;font-size:12px}.route-content-grid{grid-template-columns:1fr}.route-detail-panel{display:none}.desktop-route-list{display:none}.mobile-route-cards{display:grid;gap:9px;padding:9px}.route-stops-panel>header{padding:14px}.route-hero{border-radius:14px;padding:16px}.route-hero-top b{font-size:15px}.route-hero-stats{margin:18px 0 12px;gap:8px}.route-hero-stats strong{font-size:20px}.route-hero-actions{display:grid;grid-template-columns:1fr;margin-top:13px}.route-hero-button{width:100%}.razvoz-mobile-tabs{display:flex!important;overflow-x:auto;gap:6px;padding:0 0 8px;scrollbar-width:none}.razvoz-mobile-tab{flex:0 0 58px}}
@media(max-width:430px){.route-hero-stats strong{font-size:18px}.premium-delivery-actions{grid-template-columns:repeat(2,1fr)}.premium-delivery-title strong{font-size:14px;line-height:1.35}.route-stops-panel>header h2{font-size:16px}}
/* Correcto Team v4.12.2 — Mobile board and task responsive redesign */
@media (max-width: 640px){
body:not(.premium-delivery-center) .app-main{
padding:8px 0 0!important;
overflow:hidden;
}
.board-kanban-clean{
width:100%;
min-height:0!important;
gap:10px!important;
padding:0 8px 6px!important;
scroll-padding-inline:8px;
scroll-snap-type:x mandatory!important;
overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch;
}
.board-kanban-clean .board-kanban-column{
flex:0 0 calc(100vw - 16px)!important;
width:calc(100vw - 16px)!important;
min-width:calc(100vw - 16px)!important;
height:var(--ct-column-height,calc(100dvh - 190px))!important;
max-height:var(--ct-column-max-height,calc(100dvh - 190px))!important;
min-height:360px!important;
border-radius:18px!important;
scroll-snap-align:center!important;
scroll-snap-stop:always;
box-shadow:0 10px 28px rgb(0 0 0/.12)!important;
overflow:hidden!important;
}
.board-kanban-clean .board-kanban-column>header{
flex:0 0 auto;
min-height:54px;
padding:12px 14px!important;
}
.board-kanban-clean .board-kanban-column>header>div{
min-width:0;
flex:1;
}
.board-kanban-clean .board-kanban-column>header strong{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:15px;
}
.board-kanban-clean .column-date{
font-size:12px;
opacity:.82;
}
.board-kanban-clean .column-options-button{
min-width:38px;
min-height:38px;
border-radius:10px;
font-size:18px;
}
.board-kanban-clean .board-column-description{
flex:0 0 auto;
padding:8px 14px!important;
font-size:11px;
line-height:1.35;
}
.board-kanban-clean .board-column-list{
flex:1 1 auto!important;
min-height:0!important;
max-height:none!important;
overflow-y:auto!important;
overscroll-behavior-y:contain;
-webkit-overflow-scrolling:touch;
display:flex!important;
flex-direction:column;
gap:9px!important;
padding:10px 10px 96px!important;
scrollbar-width:thin;
}
.board-kanban-clean .add-task{
position:sticky;
bottom:0;
z-index:4;
flex:0 0 auto;
width:100%;
min-height:54px;
padding:13px 16px!important;
border-top:1px solid var(--border)!important;
background:color-mix(in srgb,var(--surface) 94%,transparent)!important;
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
color:var(--primary)!important;
font-size:15px!important;
font-weight:800;
text-align:left;
}
.board-kanban-clean .board-task-card{
position:relative;
flex:0 0 auto;
width:100%;
padding:12px 44px 12px 13px!important;
border-radius:14px!important;
border-left-width:4px!important;
box-shadow:0 4px 14px rgb(0 0 0/.09)!important;
overflow:hidden;
}
/* C8C.2M.7 — mobile task safe action row */
.board-kanban-clean .board-task-title{
font-size:14px!important;
line-height:1.35!important;
font-weight:700!important;
min-height:30px!important;
overflow-wrap:anywhere;
}
.board-kanban-clean .board-task-description{
margin-top:5px!important;
font-size:12px!important;
line-height:1.38!important;
-webkit-line-clamp:2!important;
}
.board-kanban-clean .board-task-actions{
position:absolute!important;
top:8px!important;
right:8px!important;
z-index:3!important;
display:block!important;
margin:0!important;
}
.board-kanban-clean .board-task-actions button{
display:none!important;
}
.board-kanban-clean .board-task-actions [data-card-action="more"]{
display:grid!important;
place-items:center!important;
width:32px!important;
height:32px!important;
min-width:32px!important;
padding:0!important;
border-radius:10px!important;
font-size:15px!important;
line-height:1!important;
color:var(--primary)!important;
background:
color-mix(
in srgb,
var(--surface) 94%,
transparent
)!important;
border:
1px solid
color-mix(
in srgb,
var(--border) 88%,
transparent
)!important;
box-shadow:
0 4px 12px
rgb(15 23 42 / .10)!important;
}
.board-kanban-clean .board-task-meta{
display:flex!important;
align-items:center;
margin-top:9px!important;
min-width:0;
}
.board-kanban-clean .assignee-badge{
justify-self:start!important;
max-width:100%!important;
padding:6px 9px!important;
font-size:11px!important;
}
.board-kanban-clean .board-task-labels{
gap:5px!important;
margin-top:8px!important;
}
.board-kanban-clean .board-task-label{
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.board-kanban-clean .board-task-attachment-summary{
margin-top:8px!important;
min-width:0;
}
.board-kanban-clean .board-task-progress{
margin-top:7px!important;
}
}
@media (max-width: 390px){
.board-kanban-clean .board-kanban-column{
flex-basis:calc(100vw - 12px)!important;
width:calc(100vw - 12px)!important;
min-width:calc(100vw - 12px)!important;
}
.board-kanban-clean{padding-inline:6px!important;scroll-padding-inline:6px}
.board-kanban-clean .board-task-card{padding-left:11px!important}
}
/* Correcto Team v4.13.0 — centered mobile columns, arrows and drag auto-scroll */
.mobile-board-navigator{display:none}
@media (max-width:640px){
.mobile-board-navigator{
display:grid;
grid-template-columns:52px minmax(0,1fr) 52px;
align-items:center;
gap:10px;
width:100%;
padding:4px 16px 12px;
opacity:0;
transform:translateY(-4px);
transition:opacity .18s ease,transform .18s ease;
}
.mobile-board-navigator.ready{opacity:1;transform:none}
.mobile-column-arrow{
width:52px;height:52px;display:grid;place-items:center;
border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border));
border-radius:15px;background:color-mix(in srgb,var(--surface) 88%,transparent);
color:var(--text);font-size:27px;line-height:1;box-shadow:0 7px 20px rgb(0 0 0/.12);
touch-action:manipulation;
}
.mobile-column-arrow:disabled{opacity:.28;box-shadow:none}
.mobile-column-summary{min-width:0;text-align:center;display:grid;justify-items:center;gap:2px}
.mobile-column-summary small{font-size:10px;letter-spacing:.12em;color:var(--muted);font-weight:800}
.mobile-column-summary strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:20px;line-height:1.2}
.mobile-column-summary>span{font-size:12px;color:var(--primary);font-weight:750}
.mobile-column-dots{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:7px;max-width:180px;overflow:hidden}
.mobile-column-dots button{width:8px;height:8px;min-width:8px;padding:0;border:0;border-radius:999px;background:color-mix(in srgb,var(--muted) 40%,transparent)}
.mobile-column-dots button.active{width:20px;background:var(--primary)}
.board-kanban-clean{
--mobile-column-width:min(86vw,430px);
gap:18px!important;
padding-inline:calc((100vw - var(--mobile-column-width))/2)!important;
scroll-padding-inline:calc((100vw - var(--mobile-column-width))/2)!important;
align-items:flex-start!important;
}
.board-kanban-clean .board-kanban-column{
flex:0 0 var(--mobile-column-width)!important;
width:var(--mobile-column-width)!important;
min-width:var(--mobile-column-width)!important;
scroll-snap-align:center!important;
border:1px solid color-mix(in srgb,var(--primary) 26%,var(--border))!important;
}
.board-kanban-clean .board-kanban-column.today-column{
box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 64%,transparent),0 14px 34px rgb(0 0 0/.18)!important;
}
.board-kanban-clean .board-kanban-column>header{
border-top:3px solid var(--column-accent,var(--primary));
padding-inline:14px!important;
}
.board-kanban-clean .board-kanban-column>header>div>span:last-child{
display:grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:999px;
background:color-mix(in srgb,var(--column-accent,var(--primary)) 18%,var(--surface));
color:var(--column-accent,var(--primary));font-weight:850;
}
.board-kanban-clean .add-task{
width:calc(100% - 20px)!important;
margin:0 10px 10px!important;
border:0!important;border-radius:12px!important;
background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 82%,#fff),var(--primary))!important;
color:#fff!important;text-align:center!important;
box-shadow:0 8px 20px color-mix(in srgb,var(--primary) 25%,transparent)!important;
}
.board-kanban-clean .board-column-list.drag-scroll-up::before,
.board-kanban-clean .board-column-list.drag-scroll-down::after{
content:'';position:sticky;z-index:9;left:0;display:block;width:100%;height:36px;pointer-events:none;
}
.board-kanban-clean .board-column-list.drag-scroll-up::before{
top:0;margin-bottom:-36px;background:linear-gradient(to bottom,color-mix(in srgb,var(--primary) 30%,transparent),transparent)
}
.board-kanban-clean .board-column-list.drag-scroll-down::after{
bottom:0;margin-top:-36px;background:linear-gradient(to top,color-mix(in srgb,var(--primary) 30%,transparent),transparent)
}
.board-kanban-clean .board-column-list.drag-scroll-up{box-shadow:inset 0 18px 22px -20px var(--primary)}
.board-kanban-clean .board-column-list.drag-scroll-down{box-shadow:inset 0 -18px 22px -20px var(--primary)}
}
@media (max-width:390px){
.board-kanban-clean{--mobile-column-width:88vw}
.mobile-board-navigator{grid-template-columns:46px minmax(0,1fr) 46px;padding-inline:10px}
.mobile-column-arrow{width:46px;height:46px;border-radius:13px}
}
/* Correcto Team v4.13.1 — unified responsive column geometry on every device */
:root{
--responsive-board-gap:clamp(14px,1.4vw,24px);
--responsive-board-column:clamp(270px,27vw,390px);
}
#boardKanbanDashboard.board-kanban-clean{
gap:var(--responsive-board-gap)!important;
align-items:flex-start!important;
scroll-snap-type:x proximity!important;
scroll-padding-inline:clamp(12px,2vw,30px)!important;
padding-inline:clamp(12px,2vw,30px)!important;
}
#boardKanbanDashboard.board-kanban-clean .board-kanban-column{
flex:0 0 var(--responsive-board-column)!important;
width:var(--responsive-board-column)!important;
min-width:var(--responsive-board-column)!important;
max-width:var(--responsive-board-column)!important;
scroll-snap-align:center!important;
border-radius:18px!important;
overflow:hidden!important;
}
#boardKanbanDashboard.board-kanban-clean .board-column-list{
min-width:0!important;
}
#boardKanbanDashboard.board-kanban-clean .board-task-card,
#boardKanbanDashboard.board-kanban-clean .add-task{
max-width:100%!important;
box-sizing:border-box!important;
}
/* Tablet: isti centrirani prikaz kao telefon, uz malo širu kolonu. */
@media (max-width:1100px){
:root{--responsive-board-column:min(72vw,430px)}
.mobile-board-navigator{
display:grid!important;
grid-template-columns:52px minmax(0,1fr) 52px;
align-items:center;
gap:10px;
width:min(100%,620px);
margin:0 auto;
padding:4px 16px 12px;
}
#boardKanbanDashboard.board-kanban-clean{
gap:18px!important;
padding-inline:calc((100% - var(--responsive-board-column))/2)!important;
scroll-padding-inline:calc((100% - var(--responsive-board-column))/2)!important;
scroll-snap-type:x mandatory!important;
}
#boardKanbanDashboard.board-kanban-clean .board-kanban-column{
flex-basis:var(--responsive-board-column)!important;
width:var(--responsive-board-column)!important;
min-width:var(--responsive-board-column)!important;
max-width:var(--responsive-board-column)!important;
scroll-snap-stop:always!important;
}
}
/* Telefon: uža kolona, stalno vidljivi delovi susednih kolona. */
@media (max-width:640px){
:root{--responsive-board-column:min(82vw,390px)}
.mobile-board-navigator{width:100%;padding-inline:10px}
#boardKanbanDashboard.board-kanban-clean{
gap:16px!important;
padding-inline:calc((100% - var(--responsive-board-column))/2)!important;
scroll-padding-inline:calc((100% - var(--responsive-board-column))/2)!important;
}
#boardKanbanDashboard.board-kanban-clean .board-kanban-column>header{
padding:11px 12px!important;
}
#boardKanbanDashboard.board-kanban-clean .board-column-list{
padding:7px!important;
gap:7px!important;
}
#boardKanbanDashboard.board-kanban-clean .board-task-card{
padding:11px!important;
border-radius:13px!important;
}
#boardKanbanDashboard.board-kanban-clean .add-task{
width:calc(100% - 16px)!important;
margin:0 8px 8px!important;
}
}
@media (max-width:390px){
:root{--responsive-board-column:80vw}
#boardKanbanDashboard.board-kanban-clean{gap:14px!important}
}
/* Veliki desktop: iste kartice i proporcije, samo više kolona u vidnom polju. */
@media (min-width:1400px){
:root{--responsive-board-column:clamp(300px,22vw,380px)}
}
/* Correcto Team v4.13.2 — restore full desktop board width; mobile/tablet remain centered */
@media (min-width:1101px){
:root{
--responsive-board-column:var(--board-column-width,292px);
}
#boardKanbanDashboard.board-kanban-clean{
justify-content:flex-start!important;
gap:16px!important;
width:100%!important;
max-width:100%!important;
padding:16px!important;
scroll-padding-inline:16px!important;
scroll-snap-type:x proximity!important;
}
#boardKanbanDashboard.board-kanban-clean .board-kanban-column{
flex:0 0 var(--board-column-width,292px)!important;
width:var(--board-column-width,292px)!important;
min-width:var(--board-column-width,292px)!important;
max-width:var(--board-column-width,292px)!important;
scroll-snap-align:start!important;
}
.mobile-board-navigator{
display:none!important;
}
}
/* v4.13.3 - context menus always stay inside the visible viewport */
.task-context-menu,
.context-menu{
max-height:calc(100dvh - 16px);
overflow-y:auto;
overscroll-behavior:contain;
scrollbar-gutter:stable;
}
.task-context-submenu{max-height:calc(100dvh - 16px)}
/* v4.14.0 — Premium Task Experience */
#appModal:has(.premium-task-shell){width:min(1180px,96vw);max-height:94vh;border-radius:22px;overflow:hidden}
#appModal:has(.premium-task-shell) form{padding:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-height:94vh}
#appModal:has(.premium-task-shell) .modal-header{padding:14px 18px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface) 94%,var(--primary) 6%)}
#appModal:has(.premium-task-shell) .modal-body{padding:0;overflow:auto;scroll-behavior:smooth}
#appModal:has(.premium-task-shell) .modal-footer{margin:0;padding:12px 18px;border-top:1px solid var(--border);background:color-mix(in srgb,var(--surface) 96%,var(--primary) 4%);position:sticky;bottom:0;z-index:10}
.premium-task-shell{min-width:0}
.premium-task-hero{padding:20px 22px 16px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 12%,var(--surface)),var(--surface));position:sticky;top:0;z-index:8;backdrop-filter:blur(14px)}
.premium-task-status{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--primary) 14%,var(--surface));color:var(--primary);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.premium-task-status.is-complete{background:color-mix(in srgb,#2cab66 18%,var(--surface));color:#218653}
.premium-task-hero-title{margin-top:10px;font-size:clamp(1.2rem,2vw,1.75rem);font-weight:900;line-height:1.15;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.premium-task-hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.premium-task-hero-meta span{padding:6px 9px;border:1px solid var(--border);border-radius:9px;background:color-mix(in srgb,var(--surface) 88%,transparent);font-size:11px;color:var(--muted)}
.premium-task-jump{display:flex;gap:6px;margin-top:12px;overflow:auto;scrollbar-width:none}.premium-task-jump::-webkit-scrollbar{display:none}.premium-task-jump button{flex:0 0 auto;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:7px 11px;font-size:11px;font-weight:800}.premium-task-jump button:hover{border-color:var(--primary);color:var(--primary)}
.premium-task-shell .task-detail-grid{padding:20px 22px;grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr);gap:22px}
.premium-task-shell .task-left-panel{display:grid;align-content:start;gap:4px}
.premium-task-shell .form-grid{gap:12px}.premium-task-shell label{font-weight:750}.premium-task-shell label>input,.premium-task-shell label>select,.premium-task-shell label>textarea{margin-top:6px}
.premium-task-shell input,.premium-task-shell select,.premium-task-shell textarea{border-radius:11px!important;border-color:color-mix(in srgb,var(--border) 90%,transparent)!important;background:var(--surface2)!important}
.premium-task-shell input:focus,.premium-task-shell select:focus,.premium-task-shell textarea:focus{border-color:var(--primary)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent)!important}
.premium-task-section{scroll-margin-top:150px}
.premium-task-shell .trello-description-block,.premium-task-shell .task-attachments-section,.premium-task-shell .task-checklist-section{padding:15px;border:1px solid var(--border);border-radius:15px;background:color-mix(in srgb,var(--surface2) 70%,var(--surface));margin-top:12px}
.premium-task-shell .task-description-editor{min-height:130px}
.premium-task-shell .task-attachments-list{grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:9px}
.premium-task-shell .task-attachment-row{min-width:0;padding:12px;border-radius:13px;box-shadow:0 5px 16px #0000000b}.premium-task-shell .task-attachment-row>a{align-items:flex-start}.premium-task-shell .attachment-icon{font-size:22px}
.task-checklist-progress{display:grid;gap:7px;margin:8px 0 12px}.task-checklist-progress-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}.task-checklist-progress-track{height:7px;border-radius:99px;background:color-mix(in srgb,var(--border) 70%,transparent);overflow:hidden}.task-checklist-progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),#31b76a);transition:width .25s ease}
.premium-task-shell .check-item{padding:9px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface);transition:.18s}.premium-task-shell .check-item:has(input:checked){opacity:.72;background:color-mix(in srgb,#2cab66 9%,var(--surface))}.premium-task-shell .check-item:has(input:checked) span{text-decoration:line-through}
.premium-task-shell .task-right-panel{padding-left:20px}.premium-task-shell .task-right-panel .section-head{top:145px;padding:10px 0;background:var(--surface)}
.premium-task-shell .comment-compose-vertical{padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--surface2)}
.premium-task-shell .comment{padding:10px;border-radius:12px;background:var(--surface2);border:1px solid var(--border)}.premium-task-shell .comment.activity{background:transparent;border-style:dashed}.premium-task-shell .task-activity-feed{display:grid;gap:8px;max-height:none}
/* =========================================================
Correcto Team v4.14.1 — smooth drag workspace scrolling
========================================================= */
.board-kanban-dashboard.is-drag-scrolling{
scroll-snap-type:none!important;
scroll-behavior:auto!important;
overscroll-behavior:contain!important;
cursor:grabbing!important;
user-select:none!important;
}
body.board-drag-active{
user-select:none!important;
cursor:grabbing!important;
}
body.board-drag-active .board-kanban-column{
scroll-snap-align:none!important;
}
.board-column-list.drag-scroll-up{
box-shadow:inset 0 34px 28px -28px rgba(37,99,235,.45)!important;
}
.board-column-list.drag-scroll-down{
box-shadow:inset 0 -34px 28px -28px rgba(37,99,235,.45)!important;
}
.board-kanban-dashboard.is-drag-scrolling .board-task-card.dragging{
opacity:.46!important;
transform:scale(.985)!important;
}
/* Correcto Team v4.14.2 — consistent task typography */
.board-kanban-clean .board-task-card .board-task-title,
.board-kanban-clean .board-task-card.completed .board-task-title,
.board-kanban-clean .board-task-card:focus-within .board-task-title,
.board-kanban-clean .board-task-card.is-selected .board-task-title{
font-family:inherit!important;
font-size:14px!important;
font-weight:700!important;
line-height:1.35!important;
letter-spacing:0!important;
font-style:normal!important;
}
/* v4.14.3 — viewport auto-scroll zones during task drag */
.board-drag-edge{
position:fixed;
top:0;
bottom:0;
width:clamp(110px,14vw,240px);
z-index:9998;
pointer-events:none;
opacity:0;
transition:opacity .14s ease;
}
.board-drag-edge-left{left:0;background:linear-gradient(90deg,rgba(37,99,235,.20),transparent)}
.board-drag-edge-right{right:0;background:linear-gradient(270deg,rgba(37,99,235,.20),transparent)}
body.board-drag-active .board-drag-edge{opacity:.48}
.board-kanban-dashboard.drag-scroll-left~.board-drag-edge-left,
.board-kanban-dashboard.drag-scroll-right~.board-drag-edge-right{opacity:.9}
body.board-drag-active{user-select:none}
body.board-drag-active .board-kanban-dashboard{scroll-behavior:auto!important}
/* v4.14.5 - task modal viewport, draft safety and quick templates */
#appModal:has(.premium-task-shell){
width:min(1240px,calc(100vw - 32px));
max-width:calc(100vw - 32px);
height:min(900px,calc(100dvh - 24px));
max-height:calc(100dvh - 24px);
margin:auto;
}
#appModal:has(.premium-task-shell) form{
height:100%;
max-height:100%;
min-width:0;
}
#appModal:has(.premium-task-shell) .modal-body{
min-width:0;
min-height:0;
overflow:auto;
overscroll-behavior:contain;
}
.premium-task-shell,.premium-task-shell *{box-sizing:border-box}
.premium-task-hero-title{white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.premium-task-shell .task-detail-grid{min-width:0}
.premium-task-shell .task-left-panel,.premium-task-shell .task-right-panel{min-width:0}
.premium-task-shell .task-right-panel{overflow:hidden}
.premium-task-shell .comment-compose-vertical textarea{width:100%;min-width:0}
.premium-task-shell .comment-compose-vertical button{width:100%;max-width:100%}
.column-create-tools{
position:sticky;
bottom:0;
z-index:8;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(120px,.8fr);
gap:7px;
padding:8px;
border-top:1px solid var(--border);
background:color-mix(in srgb,var(--surface2) 94%,transparent);
backdrop-filter:blur(12px);
}
.column-create-tools .add-task{position:static!important;width:100%;margin:0!important}
.column-template-select{width:100%;min-width:0;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);padding:8px;font-size:12px}
@media(max-width:900px){
.column-create-tools{grid-template-columns:1fr}
}
/* v4.14.5 - premium split task modal and template launcher */
#appModal:has(.premium-task-shell){
width:min(1280px,calc(100vw - 48px));
height:min(860px,calc(100dvh - 40px));
max-width:calc(100vw - 48px);
max-height:calc(100dvh - 40px);
overflow:hidden;
border-radius:22px;
}
#appModal:has(.premium-task-shell) form{
display:grid;
grid-template-rows:auto minmax(0,1fr) auto;
width:100%;height:100%;min-height:0;
}
#appModal:has(.premium-task-shell) .modal-header{
min-height:58px;padding:14px 20px;
}
#appModal:has(.premium-task-shell) .modal-body{
overflow:hidden!important;
min-height:0;
}
.premium-task-shell{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0}
.premium-task-hero{position:relative!important;top:auto!important;padding:18px 22px 14px}
.premium-task-hero-title{
max-width:100%;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
overflow-wrap:anywhere;word-break:break-word;display:block!important;-webkit-line-clamp:unset!important;
font-size:clamp(1.25rem,2vw,1.8rem);line-height:1.22;
}
.premium-task-shell .task-detail-grid{
display:grid!important;grid-template-columns:minmax(0,1.75fr) minmax(330px,.75fr)!important;
gap:0!important;padding:0!important;min-height:0;height:100%;overflow:hidden;
}
.premium-task-shell .task-left-panel{
min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 22px 34px;
border-right:1px solid var(--border);scrollbar-gutter:stable;
}
.premium-task-shell .task-right-panel{
min-height:0;overflow-y:auto!important;overscroll-behavior:contain;padding:20px!important;
border-left:0!important;background:color-mix(in srgb,var(--surface2) 74%,var(--surface));
scrollbar-gutter:stable;
}
.premium-task-shell .task-right-panel .section-head{position:sticky;top:0!important;z-index:3;padding:10px 0 12px!important;background:inherit!important}
.premium-task-shell .task-title-editor{
width:100%;min-height:52px;max-height:160px;resize:vertical;white-space:pre-wrap;
overflow-wrap:anywhere;word-break:break-word;line-height:1.3;
}
.premium-task-shell .task-description-editor{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.premium-task-shell input,.premium-task-shell select,.premium-task-shell textarea{max-width:100%;min-width:0}
.column-create-tools{
grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;
gap:8px;padding:9px;
}
.column-create-primary{
min-height:46px!important;display:flex!important;align-items:center;justify-content:center;gap:8px;
border-radius:12px!important;font-weight:850!important;
}
.column-create-icon{font-size:19px;line-height:1}
.column-template-control{
position:relative;min-width:0;min-height:46px;display:grid;grid-template-columns:28px minmax(0,1fr) auto;
align-items:center;gap:7px;padding:6px 7px 6px 10px;border:1px solid var(--border);border-radius:12px;
background:var(--surface);box-shadow:0 4px 14px #0000000b;cursor:pointer;overflow:hidden;
}
.column-template-control:hover{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent)}
.column-template-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--primary) 14%,var(--surface));font-size:15px}
.column-template-copy{display:grid;min-width:0;line-height:1.1}.column-template-copy strong{font-size:11px;white-space:nowrap}.column-template-copy small{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.column-template-select{width:82px!important;min-width:82px!important;max-width:82px;padding:7px 24px 7px 8px!important;border-radius:9px!important;font-weight:750;background-color:var(--surface2)!important;cursor:pointer}
@media(max-width:980px){
.column-create-tools{grid-template-columns:1fr!important}
.column-template-control{grid-template-columns:30px minmax(0,1fr) 92px}
.column-template-select{width:92px!important;min-width:92px!important;max-width:92px}
}
/* v4.14.6 — compact theme-safe columns, premium template picker, no-refresh task drag */
.column-create-tools{
grid-template-columns:minmax(0,1fr) 118px!important;
align-items:stretch;
overflow:visible!important;
background:color-mix(in srgb,var(--surface2) 96%,transparent)!important;
}
.column-template-launcher{position:relative;min-width:0;z-index:20}
.column-template-button{
width:100%;height:100%;min-height:46px;display:grid;grid-template-columns:28px minmax(0,1fr) 16px;
align-items:center;gap:7px;padding:6px 8px;border:1px solid var(--border);border-radius:12px;
background:var(--surface);color:var(--text);cursor:pointer;box-shadow:0 4px 14px rgb(0 0 0/.08);
}
.column-template-button:hover,.column-template-button[aria-expanded="true"]{
border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent);
}
.column-template-button-copy{display:grid;min-width:0;text-align:left;line-height:1.05}
.column-template-button-copy strong{font-size:11px;white-space:nowrap}
.column-template-button-copy small{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.column-template-chevron{font-size:15px;color:var(--muted);transition:transform .18s ease}
.column-template-button[aria-expanded="true"] .column-template-chevron{transform:rotate(180deg)}
.column-template-popover{
position:absolute;left:0;bottom:calc(100% + 8px);z-index:80;width:min(310px,calc(100vw - 24px));max-height:min(420px,60dvh);
display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:8px;padding:10px;border:1px solid var(--border);border-radius:16px;
background:var(--surface);color:var(--text);box-shadow:0 20px 55px rgb(0 0 0/.28);overflow:hidden;
}
.column-template-popover.hidden{display:none!important}
.column-template-popover-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 2px 0}
.column-template-popover-head strong{font-size:13px}
.column-template-popover-head button{width:30px;height:30px;border:0;border-radius:9px;background:var(--surface2);color:var(--text);cursor:pointer}
.column-template-search{width:100%;min-width:0;padding:9px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);color:var(--text)}
.column-template-list{display:grid;gap:6px;min-height:0;overflow:auto;overscroll-behavior:contain;padding-right:2px}
.column-template-option{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:8px;width:100%;padding:9px;border:1px solid transparent;border-radius:10px;background:var(--surface2);color:var(--text);text-align:left;cursor:pointer}
.column-template-option:hover{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,var(--surface2))}
.column-template-option span{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:color-mix(in srgb,var(--primary) 14%,var(--surface))}
.column-template-option strong{min-width:0;font-size:11px;line-height:1.25;white-space:normal;overflow-wrap:anywhere}
.column-template-empty{padding:14px;text-align:center;color:var(--muted);font-size:11px}
/* Explicit light/dark parity. */
body.dark .column-template-button,body.dark .column-template-popover,body.dark .column-template-option,
[data-theme="dark"] .column-template-button,[data-theme="dark"] .column-template-popover,[data-theme="dark"] .column-template-option{
border-color:color-mix(in srgb,var(--border) 88%,#fff 12%);
}
/* =========================================================
C8C.2M.10 — MOBILE TEMPLATE PICKER PREMIUM SHEET
Responsive extension of the existing v4.14.6 picker.
Same DOM / same template data / same openTask flow.
========================================================= */
@media (max-width:640px){
body.mobile-template-sheet-open{
overflow:hidden!important;
}
.mobile-template-sheet-backdrop{
position:fixed!important;
inset:0!important;
z-index:100120!important;
background:
rgb(8 14 24 / .46)!important;
/*
* No blur:
* backdrop dims the workspace but keeps header/icons sharp.
*/
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
body >
.column-template-popover.mobile-template-sheet{
position:fixed!important;
top:auto!important;
left:12px!important;
right:12px!important;
bottom:
calc(
84px +
env(safe-area-inset-bottom,0px)
)!important;
width:auto!important;
min-width:0!important;
max-width:none!important;
height:auto!important;
max-height:min(70dvh,620px)!important;
z-index:100130!important;
display:grid!important;
grid-template-rows:
auto
auto
minmax(0,1fr)!important;
gap:12px!important;
margin:0!important;
padding:
18px
16px
16px!important;
border:
1px solid #dce4ee!important;
border-radius:22px!important;
background:#ffffff!important;
color:#172033!important;
box-shadow:
0 28px 80px
rgb(8 16 30 / .34)!important;
overflow:hidden!important;
overscroll-behavior:contain!important;
isolation:isolate!important;
transform:none!important;
translate:none!important;
}
body >
.column-template-popover.mobile-template-sheet::before{
content:""!important;
position:absolute!important;
top:7px!important;
left:50%!important;
width:38px!important;
height:4px!important;
transform:translateX(-50%)!important;
border-radius:999px!important;
background:#d5dde8!important;
}
/* ================= HEADER ================= */
body >
.column-template-popover.mobile-template-sheet
.column-template-popover-head{
display:grid!important;
grid-template-columns:
minmax(0,1fr)
40px!important;
align-items:center!important;
gap:12px!important;
min-height:46px!important;
margin:0!important;
padding:3px 0 8px!important;
border:0!important;
border-bottom:
1px solid #edf1f5!important;
}
body >
.column-template-popover.mobile-template-sheet
.column-template-popover-head strong{
min-width:0!important;
font-size:20px!important;
line-height:1.2!important;
font-weight:850!important;
color:#172033!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
body >
.column-template-popover.mobile-template-sheet
.column-template-popover-head button{
width:40px!important;
height:40px!important;
min-width:40px!important;
display:grid!important;
place-items:center!important;
margin:0!important;
padding:0!important;
border:
1px solid #dce3ec!important;
border-radius:12px!important;
background:#f7f9fc!important;
color:#42516a!important;
box-shadow:none!important;
font-size:24px!important;
font-weight:500!important;
line-height:1!important;
}
/* ================= SEARCH ================= */
body >
.column-template-popover.mobile-template-sheet
.column-template-search{
display:block!important;
width:100%!important;
min-width:0!important;
height:48px!important;
margin:0!important;
padding:0 14px!important;
border:
1px solid #d9e1eb!important;
border-radius:14px!important;
outline:none!important;
background:#f7f9fc!important;
color:#172033!important;
box-shadow:none!important;
font-family:inherit!important;
font-size:16px!important;
font-weight:600!important;
-webkit-appearance:none!important;
appearance:none!important;
}
body >
.column-template-popover.mobile-template-sheet
.column-template-search::placeholder{
color:#8793a5!important;
opacity:1!important;
}
body >
.column-template-popover.mobile-template-sheet
.column-template-search:focus{
border-color:
color-mix(
in srgb,
var(--primary,#3976ff) 68%,
#cbd5e1
)!important;
box-shadow:
0 0 0 3px
color-mix(
in srgb,
var(--primary,#3976ff) 11%,
transparent
)!important;
}
/* ================= LIST ================= */
body >
.column-template-popover.mobile-template-sheet
.column-template-list{
min-height:0!important;
max-height:none!important;
display:grid!important;
align-content:start!important;
gap:8px!important;
margin:0!important;
padding:
2px
2px
4px!important;
overflow-y:auto!important;
overflow-x:hidden!important;
overscroll-behavior:contain!important;
-webkit-overflow-scrolling:touch!important;
scrollbar-width:thin!important;
}
body >
.column-template-popover.mobile-template-sheet
.column-template-option{
position:relative!important;
width:100%!important;
min-width:0!important;
min-height:58px!important;
display:grid!important;
grid-template-columns:
40px
minmax(0,1fr)
18px!important;
align-items:center!important;
gap:10px!important;
margin:0!important;
padding:
9px
12px!important;
text-align:left!important;
border:
1px solid #e0e6ee!important;
border-radius:14px!important;
background:#ffffff!important;
color:#172033!important;
box-shadow:
0 4px 12px
rgb(15 23 42 / .05)!important;
}
body >
.column-template-popover.mobile-template-sheet
.column-template-option > span{
width:38px!important;
height:38px!important;
display:grid!important;
place-items:center!important;
border-radius:11px!important;
background:
color-mix(
in srgb,
#f59e0b 14%,
#fff
)!important;
font-size:20px!important;
}
body >
.column-template-popover.mobile-template-sheet
.column-template-option strong{
min-width:0!important;
font-size:14px!important;
line-height:1.35!important;
font-weight:750!important;
white-space:normal!important;
overflow-wrap:anywhere!important;
color:inherit!important;
}
body >
.column-template-popover.mobile-template-sheet
.column-template-option::after{
content:"›"!important;
display:block!important;
color:#96a2b3!important;
font-size:22px!important;
line-height:1!important;
text-align:center!important;
}
body >
.column-template-popover.mobile-template-sheet
.column-template-option:active{
transform:scale(.992)!important;
background:
color-mix(
in srgb,
var(--primary,#3976ff) 6%,
#fff
)!important;
}
body >
.column-template-popover.mobile-template-sheet
.column-template-empty{
padding:24px 16px!important;
border:
1px dashed #d7dee8!important;
border-radius:14px!important;
background:#f8fafc!important;
color:#718096!important;
text-align:center!important;
}
/* ================= DARK ================= */
body.dark >
.column-template-popover.mobile-template-sheet,
html[data-theme="dark"] body >
.column-template-popover.mobile-template-sheet{
background:#202225!important;
color:#f5f6f8!important;
border-color:#3b3e43!important;
box-shadow:
0 28px 90px
rgb(0 0 0 / .55)!important;
}
body.dark >
.column-template-popover.mobile-template-sheet::before,
html[data-theme="dark"] body >
.column-template-popover.mobile-template-sheet::before{
background:#555960!important;
}
body.dark >
.column-template-popover.mobile-template-sheet
.column-template-popover-head,
html[data-theme="dark"] body >
.column-template-popover.mobile-template-sheet
.column-template-popover-head{
border-bottom-color:#34373c!important;
}
body.dark >
.column-template-popover.mobile-template-sheet
.column-template-popover-head strong,
html[data-theme="dark"] body >
.column-template-popover.mobile-template-sheet
.column-template-popover-head strong{
color:#f5f6f8!important;
}
body.dark >
.column-template-popover.mobile-template-sheet
.column-template-popover-head button,
html[data-theme="dark"] body >
.column-template-popover.mobile-template-sheet
.column-template-popover-head button{
background:#2a2c30!important;
color:#eef1f5!important;
border-color:#41444a!important;
}
body.dark >
.column-template-popover.mobile-template-sheet
.column-template-search,
html[data-theme="dark"] body >
.column-template-popover.mobile-template-sheet
.column-template-search{
background:#181a1d!important;
color:#f5f6f8!important;
border-color:#3b3e43!important;
}
body.dark >
.column-template-popover.mobile-template-sheet
.column-template-search::placeholder,
html[data-theme="dark"] body >
.column-template-popover.mobile-template-sheet
.column-template-search::placeholder{
color:#9299a4!important;
}
body.dark >
.column-template-popover.mobile-template-sheet
.column-template-option,
html[data-theme="dark"] body >
.column-template-popover.mobile-template-sheet
.column-template-option{
background:#292b2f!important;
color:#f5f6f8!important;
border-color:#3b3e43!important;
box-shadow:
0 4px 14px
rgb(0 0 0 / .18)!important;
}
body.dark >
.column-template-popover.mobile-template-sheet
.column-template-option > span,
html[data-theme="dark"] body >
.column-template-popover.mobile-template-sheet
.column-template-option > span{
background:
color-mix(
in srgb,
#f59e0b 18%,
#24262a
)!important;
}
body.dark >
.column-template-popover.mobile-template-sheet
.column-template-option::after,
html[data-theme="dark"] body >
.column-template-popover.mobile-template-sheet
.column-template-option::after{
color:#a5acb7!important;
}
body.dark >
.column-template-popover.mobile-template-sheet
.column-template-empty,
html[data-theme="dark"] body >
.column-template-popover.mobile-template-sheet
.column-template-empty{
background:#25272b!important;
color:#a8afb9!important;
border-color:#41444a!important;
}
}
/* =========================================================
C8C.2M.11 — DESKTOP TEMPLATE SHEET
Same canonical C8C.2M.10 picker DOM.
Phone remains owned by the existing max-width:640px block.
Desktop/tablet gets viewport-centered presentation.
========================================================= */
@media (min-width:641px){
body.mobile-template-sheet-open{
overflow:hidden!important;
}
.mobile-template-sheet-backdrop{
position:fixed!important;
inset:0!important;
z-index:100120!important;
background:
rgb(8 14 24 / .46)!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
body >
.column-template-popover.mobile-template-sheet{
position:fixed!important;
left:50%!important;
top:50%!important;
right:auto!important;
bottom:auto!important;
width:
min(
560px,
calc(100vw - 64px)
)!important;
min-width:0!important;
max-width:560px!important;
height:auto!important;
max-height:
min(
72dvh,
680px
)!important;
transform:
translate(
-50%,
-50%
)!important;
z-index:100130!important;
display:grid!important;
grid-template-rows:
auto
auto
minmax(0,1fr)!important;
gap:14px!important;
margin:0!important;
padding:
20px!important;
border:
1px solid
var(--border)!important;
border-radius:
20px!important;
background:
var(--surface)!important;
color:
var(--text)!important;
box-shadow:
0 30px 90px
rgb(0 0 0 / .34)!important;
overflow:hidden!important;
isolation:isolate!important;
}
body >
.column-template-popover.mobile-template-sheet
.column-template-popover-head{
display:grid!important;
grid-template-columns:
minmax(0,1fr)
40px!important;
align-items:center!important;
gap:14px!important;
margin:0!important;
padding:
0 0 12px!important;
border-bottom:
1px solid
var(--border)!important;
}
body >
.column-template-popover.mobile-template-sheet
.column-template-popover-head strong{
min-width:0!important;
font-size:20px!important;
line-height:1.2!important;
font-weight:850!important;
color:var(--text)!important;
}
body >
.column-template-popover.mobile-template-sheet
.column-template-popover-head button{
width:40px!important;
height:40px!important;
min-width:40px!important;
display:grid!important;
place-items:center!important;
margin:0!important;
padding:0!important;
border:
1px solid
var(--border)!important;
border-radius:
11px!important;
background:
var(--surface2)!important;
color:
var(--text)!important;
font-size:
23px!important;
line-height:
1!important;
cursor:pointer!important;
}
body >
.column-template-popover.mobile-template-sheet
.column-template-search{
width:100%!important;
min-width:0!important;
height:48px!important;
margin:0!important;
padding:
0 14px!important;
border:
1px solid
var(--border)!important;
border-radius:
13px!important;
outline:none!important;
background:
var(--surface2)!important;
color:
var(--text)!important;
box-shadow:
none!important;
font-size:
15px!important;
}
body >
.column-template-popover.mobile-template-sheet
.column-template-search:focus{
border-color:
var(--primary)!important;
box-shadow:
0 0 0 3px
color-mix(
in srgb,
var(--primary) 12%,
transparent
)!important;
}
body >
.column-template-popover.mobile-template-sheet
.column-template-list{
min-height:0!important;
display:grid!important;
align-content:start!important;
gap:8px!important;
padding:
2px!important;
overflow-y:auto!important;
overflow-x:hidden!important;
overscroll-behavior:
contain!important;
}
body >
.column-template-popover.mobile-template-sheet
.column-template-option{
width:100%!important;
min-height:58px!important;
display:grid!important;
grid-template-columns:
40px
minmax(0,1fr)
20px!important;
align-items:center!important;
gap:11px!important;
padding:
9px 12px!important;
border:
1px solid
var(--border)!important;
border-radius:
13px!important;
background:
var(--surface2)!important;
color:
var(--text)!important;
text-align:left!important;
cursor:pointer!important;
}
body >
.column-template-popover.mobile-template-sheet
.column-template-option > span{
width:38px!important;
height:38px!important;
display:grid!important;
place-items:center!important;
border-radius:
10px!important;
background:
color-mix(
in srgb,
#f59e0b 16%,
var(--surface)
)!important;
font-size:
20px!important;
}
body >
.column-template-popover.mobile-template-sheet
.column-template-option strong{
min-width:0!important;
font-size:
14px!important;
line-height:
1.35!important;
font-weight:
750!important;
white-space:
normal!important;
overflow-wrap:
anywhere!important;
color:
inherit!important;
}
body >
.column-template-popover.mobile-template-sheet
.column-template-option::after{
content:"›"!important;
color:
var(--muted)!important;
font-size:
22px!important;
text-align:center!important;
}
body >
.column-template-popover.mobile-template-sheet
.column-template-option:hover{
border-color:
color-mix(
in srgb,
var(--primary) 65%,
var(--border)
)!important;
background:
color-mix(
in srgb,
var(--primary) 7%,
var(--surface2)
)!important;
}
}
/* v4.15.0 — Correcto Premium UI System
One component system for light/dark and phone/tablet/desktop. */
:root{
--ct-control-height:44px;
--ct-radius-sm:10px;
--ct-radius-md:14px;
--ct-card-bg:var(--surface);
--ct-card-text:var(--text);
--ct-card-muted:var(--muted);
--ct-column-footer-gap:18px;
--ct-transition-fast:160ms ease;
}
/* Column footer is a separate, non-overlapping action area. */
#boardKanbanDashboard.board-kanban-clean .board-kanban-column{
overflow:visible!important;
}
#boardKanbanDashboard.board-kanban-clean .board-column-list{
min-height:0!important;
margin-bottom:0!important;
padding-bottom:var(--ct-column-footer-gap)!important;
}
#boardKanbanDashboard.board-kanban-clean .column-create-tools{
position:relative!important;
inset:auto!important;
z-index:12!important;
flex:0 0 auto!important;
display:grid!important;
grid-template-columns:1fr!important;
gap:7px!important;
width:auto!important;
margin:0 8px 9px!important;
padding:9px!important;
border:1px solid color-mix(in srgb,var(--border) 82%,transparent)!important;
border-radius:var(--ct-radius-md)!important;
background:color-mix(in srgb,var(--surface2) 94%,transparent)!important;
box-shadow:0 8px 20px rgb(15 23 42/.08)!important;
backdrop-filter:blur(12px);
overflow:visible!important;
}
#boardKanbanDashboard.board-kanban-clean .column-create-tools::before{
content:"";
position:absolute;
left:12px;right:12px;top:-10px;
height:1px;
background:color-mix(in srgb,var(--border) 82%,transparent);
}
#boardKanbanDashboard .column-create-primary,
#boardKanbanDashboard .column-template-button{
min-height:var(--ct-control-height)!important;
border-radius:11px!important;
transition:transform var(--ct-transition-fast),border-color var(--ct-transition-fast),box-shadow var(--ct-transition-fast),background var(--ct-transition-fast)!important;
}
#boardKanbanDashboard .column-create-primary{
width:100%!important;
margin:0!important;
border:1px solid color-mix(in srgb,var(--primary) 68%,var(--border))!important;
background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 92%,#fff),var(--primary))!important;
color:#fff!important;
box-shadow:0 7px 18px color-mix(in srgb,var(--primary) 25%,transparent)!important;
}
#boardKanbanDashboard .column-template-launcher{width:100%;z-index:90!important}
#boardKanbanDashboard .column-template-button{
min-height:var(--ct-control-height)!important;
grid-template-columns:30px minmax(0,1fr) 20px!important;
padding:6px 10px!important;
border:1px solid var(--border)!important;
background:var(--surface)!important;
color:var(--text)!important;
box-shadow:none!important;
}
#boardKanbanDashboard .column-template-icon{
width:30px;height:30px;border-radius:9px;
background:color-mix(in srgb,#f59e0b 16%,var(--surface2))!important;
}
#boardKanbanDashboard .column-template-button-copy strong{font-size:11.5px!important}
#boardKanbanDashboard .column-template-button-copy small{font-size:9.5px!important}
#boardKanbanDashboard .column-template-chevron{transform:none!important;font-size:20px!important}
#boardKanbanDashboard .column-template-button[aria-expanded="true"] .column-template-chevron{transform:rotate(90deg)!important}
#boardKanbanDashboard .column-create-primary:hover,
#boardKanbanDashboard .column-template-button:hover{
transform:translateY(-1px);
}
/* Task colors are accents, never unreadable full-card fills. */
#boardKanbanDashboard .board-task-card,
#boardKanbanDashboard .board-task-card.has-task-color,
body:not(.dark) #boardKanbanDashboard .board-task-card.has-task-color,
body.dark #boardKanbanDashboard .board-task-card.has-task-color,
[data-theme="dark"] #boardKanbanDashboard .board-task-card.has-task-color{
position:relative!important;
isolation:isolate;
background:var(--ct-card-bg)!important;
color:var(--ct-card-text)!important;
border-color:color-mix(in srgb,var(--border) 90%,transparent)!important;
border-left:4px solid var(--task-card-color,var(--primary))!important;
box-shadow:0 4px 13px rgb(15 23 42/.09)!important;
}
#boardKanbanDashboard .board-task-card.has-task-color::before{
content:"";
position:absolute;
left:-1px;top:10px;bottom:10px;
width:3px;border-radius:0 6px 6px 0;
background:var(--task-card-color);
box-shadow:0 0 14px color-mix(in srgb,var(--task-card-color) 45%,transparent);
pointer-events:none;
}
#boardKanbanDashboard .board-task-card .board-task-title{
color:var(--ct-card-text)!important;
font-weight:650!important;
}
#boardKanbanDashboard .board-task-card .board-task-description,
#boardKanbanDashboard .board-task-card .board-task-progress{
color:var(--ct-card-muted)!important;
}
#boardKanbanDashboard .board-task-card:hover{
transform:translateY(-2px)!important;
border-left-width:6px!important;
box-shadow:0 10px 24px rgb(15 23 42/.14)!important;
}
#boardKanbanDashboard .board-task-card.dragging{
transform:none!important;
}
/* Explicit theme parity. */
body.dark #boardKanbanDashboard.board-kanban-clean .column-create-tools,
[data-theme="dark"] #boardKanbanDashboard.board-kanban-clean .column-create-tools{
background:color-mix(in srgb,var(--surface2) 92%,#020617)!important;
box-shadow:0 10px 26px rgb(0 0 0/.28)!important;
}
/* v4.15.1 — no-refresh card actions, frameless workspace and continuous horizontal glide */
#boardKanbanDashboard.board-kanban-clean{
background:transparent!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
outline:0!important;
scrollbar-gutter:stable both-edges;
}
#boardKanbanDashboard.board-kanban-clean::before,
#boardKanbanDashboard.board-kanban-clean::after{display:none!important}
#boardKanbanDashboard.board-kanban-clean.is-smooth-scrolling{scroll-snap-type:none!important}
#boardKanbanDashboard .board-task-card.task-color-updated{animation:taskColorPulse .42s ease}
#boardKanbanDashboard .board-task-card.task-archiving{opacity:0;transform:scale(.97) translateY(-5px)!important;transition:opacity .17s ease,transform .17s ease!important}
@keyframes taskColorPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--task-card-color,var(--primary)) 38%,transparent)}55%{box-shadow:0 0 0 5px color-mix(in srgb,var(--task-card-color,var(--primary)) 15%,transparent)}100%{box-shadow:0 4px 13px rgb(15 23 42/.09)}}
/* v4.15.2 — compact column footer and stable in-column sorting */
#boardKanbanDashboard.board-kanban-clean .board-kanban-column{
overflow:hidden!important;
}
#boardKanbanDashboard.board-kanban-clean .board-column-list{
padding-bottom:10px!important;
scroll-behavior:auto!important;
}
#boardKanbanDashboard.board-kanban-clean .column-create-tools{
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
align-items:stretch!important;
gap:7px!important;
margin:10px 8px 8px!important;
padding:10px 0 0!important;
border:0!important;
border-top:1px solid color-mix(in srgb,var(--border) 82%,transparent)!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
backdrop-filter:none!important;
overflow:visible!important;
}
#boardKanbanDashboard.board-kanban-clean .column-create-tools::before{display:none!important}
#boardKanbanDashboard .column-create-primary,
#boardKanbanDashboard .column-template-button{
min-height:38px!important;
height:38px!important;
padding:5px 9px!important;
border-radius:10px!important;
box-shadow:none!important;
}
#boardKanbanDashboard .column-create-primary{
order:2;
font-size:12px!important;
background:color-mix(in srgb,var(--primary) 90%,#fff)!important;
}
#boardKanbanDashboard .column-template-launcher{order:1;width:100%!important;min-width:0!important}
#boardKanbanDashboard .column-template-button{
grid-template-columns:25px minmax(0,1fr) 14px!important;
background:color-mix(in srgb,var(--surface) 94%,transparent)!important;
}
#boardKanbanDashboard .column-template-icon{width:25px!important;height:25px!important;border-radius:8px!important;font-size:13px!important}
#boardKanbanDashboard .column-template-button-copy strong{font-size:11px!important;line-height:1.1!important}
#boardKanbanDashboard .column-template-button-copy small{display:none!important}
#boardKanbanDashboard .column-template-chevron{font-size:16px!important}
#boardKanbanDashboard .task-insert-marker{
flex:0 0 auto!important;
height:8px!important;
margin:2px 8px!important;
border-radius:999px!important;
background:color-mix(in srgb,var(--primary) 14%,transparent)!important;
pointer-events:none!important;
}
#boardKanbanDashboard .task-insert-marker>span{
display:block!important;
height:3px!important;
margin-top:2px!important;
border-radius:999px!important;
background:var(--primary)!important;
box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 18%,transparent)!important;
}
body.task-drag-active #boardKanbanDashboard,
body.task-drag-active #boardKanbanDashboard *{
scroll-behavior:auto!important;
}
body.task-drag-active #boardKanbanDashboard .board-column-list{
overscroll-behavior-y:contain!important;
}
/* v4.15.3 — stabilni prelazi i lokalno osvežavanje kartice */
.board-task-card{
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,opacity .18s ease;
will-change:transform;
}
.board-task-card.dragging{
opacity:.58;
transform:scale(.985) rotate(.15deg);
box-shadow:0 18px 42px rgba(15,23,42,.22);
}
.board-kanban-column.drag-over{
border-color:color-mix(in srgb,var(--accent,#3976ff) 72%,transparent);
box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#3976ff) 16%,transparent);
}
.task-insert-marker{
height:10px;
margin:2px 8px;
border-radius:999px;
background:color-mix(in srgb,var(--accent,#3976ff) 16%,transparent);
transition:transform .12s ease,opacity .12s ease;
}
.task-insert-marker span{display:block;height:3px;border-radius:999px;background:var(--accent,#3976ff);transform:translateY(3px)}
.board-task-card.task-live-updated{animation:taskLiveUpdated .5s ease}
@keyframes taskLiveUpdated{0%{box-shadow:0 0 0 0 rgba(57,118,255,.35)}50%{box-shadow:0 0 0 4px rgba(57,118,255,.18)}100%{box-shadow:var(--task-shadow,0 4px 12px rgba(15,23,42,.08))}}
.board-kanban-dashboard.is-drag-scrolling{scroll-behavior:auto!important}
.board-drag-edge{pointer-events:none;opacity:.72;transition:opacity .15s ease}
/* v4.15.4 — lakše premeštanje taskova između udaljenih kolona */
.board-kanban-column.drag-navigation-target {
outline: 2px solid color-mix(in srgb, var(--accent, #3976ff) 72%, transparent);
outline-offset: -2px;
box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent, #3976ff) 12%, transparent), var(--shadow-sm);
transition: outline-color .16s ease, box-shadow .16s ease;
}
.task-insert-marker {
min-height: 10px;
margin: 5px 4px;
border-radius: 999px;
background: color-mix(in srgb, var(--accent, #3976ff) 13%, transparent);
}
.task-insert-marker > span {
display:block;
height:3px;
border-radius:999px;
background:var(--accent, #3976ff);
box-shadow:0 0 0 4px color-mix(in srgb, var(--accent, #3976ff) 14%, transparent);
}
body.task-drag-active .board-kanban-dashboard {
scroll-behavior:auto !important;
}
body.task-drag-active .board-kanban-column {
transition: outline-color .16s ease, box-shadow .16s ease, opacity .16s ease;
}
/* Correcto Team v4.16.0 — Delivery Center */
.delivery-center-page{--dc-bg:color-mix(in srgb,var(--surface,#fff) 94%,transparent);--dc-card:var(--surface,#fff);--dc-border:color-mix(in srgb,var(--text-primary,#172033) 13%,transparent);--dc-muted:var(--text-secondary,#667085);display:grid;gap:14px;padding:18px;min-height:calc(100vh - 72px);color:var(--text-primary,#172033)}
.delivery-center-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border:1px solid var(--dc-border);border-radius:18px;background:var(--dc-bg);backdrop-filter:blur(18px);box-shadow:0 12px 34px rgba(15,23,42,.1)}
.delivery-center-toolbar>div:first-child{display:flex;align-items:center;gap:12px}.delivery-center-toolbar h1{margin:0;font-size:25px}.delivery-center-toolbar p{margin:3px 0 0;color:var(--dc-muted)}.delivery-center-icon{display:grid;place-items:center;width:45px;height:45px;border-radius:14px;background:#eaf3ff;font-size:23px}.delivery-center-actions{display:flex;gap:8px;flex-wrap:wrap}.delivery-center-actions button,.delivery-mode-tabs button,.delivery-view-switch button{border:1px solid var(--dc-border);background:var(--dc-card);color:inherit;border-radius:11px;padding:10px 14px;font-weight:800;cursor:pointer}.delivery-center-actions .primary,.delivery-route-hero-actions .primary{background:#2674f6;color:#fff;border-color:#2674f6}
.delivery-mode-tabs{display:flex;gap:6px;width:max-content;padding:5px;border:1px solid var(--dc-border);border-radius:13px;background:var(--dc-bg)}.delivery-mode-tabs button.active,.delivery-view-switch button.active{background:#17233a;color:#fff}
.delivery-week-strip{display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));gap:8px;overflow-x:auto;scrollbar-width:thin}.delivery-day-chip{min-width:120px;display:grid;gap:3px;text-align:left;padding:12px;border:1px solid var(--dc-border);border-radius:14px;background:var(--dc-card);color:inherit;cursor:pointer}.delivery-day-chip span{text-transform:uppercase;font-size:11px;color:var(--dc-muted);font-weight:900}.delivery-day-chip strong{font-size:17px}.delivery-day-chip small{display:flex;justify-content:space-between;color:var(--dc-muted)}.delivery-day-chip.active{border-color:#2674f6;box-shadow:0 0 0 2px rgba(38,116,246,.16)}.delivery-day-chip.today:before{content:'DANAS';font-size:9px;font-weight:900;color:#2674f6}
.delivery-day-view{display:grid;gap:14px}.delivery-route-hero{padding:20px;border-radius:20px;color:#fff;background:linear-gradient(135deg,#245fc9,#123e96);box-shadow:0 16px 38px rgba(20,62,150,.24)}.delivery-route-hero.finished{background:linear-gradient(135deg,#159447,#087235)}.delivery-route-hero.paused{background:linear-gradient(135deg,#f59e0b,#c56e00)}.delivery-route-hero-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.delivery-route-hero-head span{font-size:11px;font-weight:900;background:rgba(255,255,255,.16);padding:6px 9px;border-radius:99px}.delivery-route-hero-head h2{margin:10px 0 0}.delivery-route-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0 13px}.delivery-route-kpis div{display:grid;gap:4px}.delivery-route-kpis small{opacity:.78;text-transform:uppercase;font-size:10px}.delivery-route-kpis strong{font-size:22px}.delivery-route-progress{height:8px;background:rgba(255,255,255,.18);border-radius:99px;overflow:hidden}.delivery-route-progress i{display:block;height:100%;background:#43e38b;border-radius:inherit}.delivery-route-hero-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}.delivery-route-hero-actions button{border:1px solid rgba(255,255,255,.25);border-radius:10px;padding:10px 14px;font-weight:900;color:#fff;background:rgba(255,255,255,.14)}.delivery-route-hero-actions .danger{background:#e84545}.delivery-route-hero-actions .success{background:#17a85b}
.delivery-view-switch{display:flex;gap:5px;width:max-content}.delivery-day-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(310px,.75fr);gap:14px;align-items:start}.delivery-stops-panel,.delivery-detail-panel,.delivery-history,.delivery-week-column{border:1px solid var(--dc-border);border-radius:18px;background:var(--dc-bg);box-shadow:0 10px 28px rgba(15,23,42,.08)}.delivery-stops-panel>header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--dc-border)}.delivery-stops-panel h2{margin:0}.delivery-stops-panel p{margin:3px 0 0;color:var(--dc-muted)}.delivery-stops-panel>header button,.delivery-week-column>button{border:0;border-radius:10px;background:#2674f6;color:#fff;padding:10px 14px;font-weight:900}.delivery-stop-list{padding:8px;min-height:120px}.delivery-stop-row{display:grid;grid-template-columns:38px minmax(0,1fr) 36px;gap:10px;align-items:center;padding:12px;border:1px solid transparent;border-bottom-color:var(--dc-border);transition:.18s ease;cursor:grab}.delivery-stop-row:hover,.delivery-stop-row.selected{background:color-mix(in srgb,#2674f6 7%,var(--dc-card));border-color:color-mix(in srgb,#2674f6 28%,transparent);border-radius:12px}.delivery-stop-row.dragging{opacity:.45;transform:scale(.985)}.delivery-stop-number{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#2674f6;color:#fff;font-weight:900}.delivery-stop-row.completed .delivery-stop-number{background:#39bf78}.delivery-stop-copy>div{display:flex;align-items:center;justify-content:space-between;gap:8px}.delivery-stop-copy strong{line-height:1.35}.delivery-stop-copy small,.delivery-stop-copy p{display:block;margin:4px 0 0;color:var(--dc-muted)}.delivery-stop-row>button{border:0;background:transparent;color:var(--dc-muted);font-weight:900}
.route-status-badge{display:inline-flex;align-items:center;white-space:nowrap;border-radius:99px;padding:4px 7px;font-size:9px;font-weight:900;background:#edf2ff;color:#3565c8}.route-status-badge.active{background:#dff8ea;color:#087a3d}.route-status-badge.completed{background:#e3f7ec;color:#12834b}.route-status-badge.failed{background:#ffe6e6;color:#b72323}.route-status-badge.postponed{background:#fff1d9;color:#a45a00}
.delivery-detail-panel{padding:18px;position:sticky;top:86px}.delivery-detail-panel.empty{display:grid;place-items:center;min-height:260px;color:var(--dc-muted)}.delivery-detail-head{display:flex;justify-content:space-between;align-items:center}.delivery-detail-head button{border:0;background:transparent;color:#2674f6;font-weight:900}.delivery-detail-panel h2{font-size:23px;line-height:1.25;overflow-wrap:anywhere}.delivery-detail-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--dc-border);border-radius:13px;overflow:hidden}.delivery-detail-grid>div{display:grid;gap:5px;padding:12px;border-right:1px solid var(--dc-border);border-bottom:1px solid var(--dc-border)}.delivery-detail-grid .wide{grid-column:1/-1}.delivery-detail-grid small{color:var(--dc-muted)}.delivery-detail-actions{display:flex;gap:7px;margin-top:12px}.delivery-detail-actions a,.delivery-detail-actions button,.delivery-driver-actions a,.delivery-driver-actions button{flex:1;text-align:center;text-decoration:none;border:1px solid var(--dc-border);border-radius:10px;padding:10px;color:inherit;background:var(--dc-card);font-weight:900}.delivery-detail-actions .success,.delivery-driver-actions .success{border-color:#27b867;color:#168249}.delivery-route-summary{margin-top:16px;padding-top:12px;border-top:1px solid var(--dc-border)}.delivery-route-summary p{display:flex;justify-content:space-between;margin:9px 0;color:var(--dc-muted)}
.delivery-driver-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:12px}.delivery-driver-card{padding:16px;border:1px solid var(--dc-border);border-left:5px solid #2674f6;border-radius:16px;background:var(--dc-card)}.delivery-driver-card.completed{border-left-color:#27b867}.delivery-driver-card header{display:flex;align-items:center;gap:8px}.delivery-driver-card header button{margin-left:auto;border:0;background:transparent}.delivery-driver-card h3{line-height:1.35}.delivery-driver-card p,.delivery-driver-card blockquote{color:var(--dc-muted)}.delivery-driver-card blockquote{margin:10px 0;padding:10px;border-radius:10px;background:color-mix(in srgb,var(--dc-card) 85%,#2674f6 15%)}.delivery-driver-actions{display:flex;gap:7px;flex-wrap:wrap}
.delivery-week-planner{display:grid;grid-template-columns:repeat(7,minmax(250px,1fr));gap:10px;overflow-x:auto;padding-bottom:10px;scroll-behavior:smooth}.delivery-week-column{min-height:420px;display:flex;flex-direction:column;overflow:hidden}.delivery-week-column.today{border-color:#2674f6}.delivery-week-column>header{display:flex;justify-content:space-between;align-items:center;padding:13px;border-bottom:1px solid var(--dc-border)}.delivery-week-column>header div{display:grid}.delivery-week-column>header span{text-transform:capitalize}.delivery-week-column>header strong{color:var(--dc-muted);font-size:12px}.delivery-week-column>header>b{display:grid;place-items:center;min-width:34px;height:28px;border-radius:99px;background:#17233a;color:#fff}.delivery-week-cards{display:grid;align-content:start;gap:8px;flex:1;padding:8px}.delivery-week-card{display:grid;grid-template-columns:27px minmax(0,1fr) auto;gap:8px;align-items:start;padding:10px;border:1px solid var(--dc-border);border-radius:12px;background:var(--dc-card);cursor:grab}.delivery-week-card>span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#2674f6;color:#fff;font-weight:900}.delivery-week-card strong,.delivery-week-card small{display:block;overflow-wrap:anywhere}.delivery-week-card small{margin-top:5px;color:var(--dc-muted)}.delivery-week-column>button{margin:8px}.delivery-week-empty,.delivery-empty{padding:26px;text-align:center;color:var(--dc-muted)}.delivery-drop-active{outline:3px solid rgba(38,116,246,.45);outline-offset:-4px;background:color-mix(in srgb,#2674f6 7%,var(--dc-bg))}
.delivery-history{padding:18px}.delivery-history>header h2{margin:0}.delivery-history>header p{color:var(--dc-muted)}.delivery-history-day{display:grid;grid-template-columns:180px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--dc-border)}.delivery-history-day>div{display:grid;align-content:start}.delivery-history-day>div span{color:var(--dc-muted)}.delivery-history-day ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}.delivery-history-day li{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:7px;padding:9px;border-radius:10px;background:color-mix(in srgb,var(--dc-card) 94%,#27b867 6%)}.delivery-history-day li>span{color:#27b867}.delivery-history-day li button{border:0;background:transparent;text-align:left;color:inherit;font-weight:800}.delivery-history-day li small{color:var(--dc-muted)}
[data-theme="dark"] .delivery-center-page{--dc-bg:rgba(13,26,42,.92);--dc-card:#122338;--dc-border:rgba(169,198,229,.18);--dc-muted:#9fb2c9}.dark-theme .delivery-center-page{--dc-bg:rgba(13,26,42,.92);--dc-card:#122338;--dc-border:rgba(169,198,229,.18);--dc-muted:#9fb2c9}
@media(max-width:980px){.delivery-day-layout{grid-template-columns:1fr}.delivery-detail-panel{position:static}.delivery-route-kpis{grid-template-columns:repeat(2,1fr)}.delivery-week-strip{grid-template-columns:repeat(7,125px)}}
@media(max-width:640px){.delivery-center-page{padding:10px 10px 88px;gap:10px}.delivery-center-toolbar{align-items:flex-start;flex-direction:column;padding:13px}.delivery-center-actions{width:100%}.delivery-center-actions .primary{margin-left:auto}.delivery-center-toolbar h1{font-size:21px}.delivery-mode-tabs{width:100%}.delivery-mode-tabs button{flex:1}.delivery-week-strip{margin-inline:-10px;padding-inline:10px;scroll-snap-type:x mandatory}.delivery-day-chip{scroll-snap-align:center}.delivery-route-hero{padding:15px}.delivery-route-hero-head{display:block}.delivery-route-hero-head>b{display:block;margin-top:8px}.delivery-route-kpis strong{font-size:18px}.delivery-route-hero-actions{justify-content:stretch;flex-direction:column}.delivery-view-switch{width:100%}.delivery-view-switch button{flex:1}.delivery-stop-copy>div{display:grid}.delivery-detail-grid{grid-template-columns:1fr}.delivery-detail-grid .wide{grid-column:auto}.delivery-driver-list{grid-template-columns:1fr}.delivery-week-planner{grid-template-columns:repeat(7,82vw);scroll-snap-type:x mandatory}.delivery-week-column{scroll-snap-align:center}.delivery-history-day{grid-template-columns:1fr}.delivery-history-day li{grid-template-columns:26px 1fr}.delivery-history-day li small{grid-column:2}.delivery-driver-actions>*{min-width:45%}}
/* Correcto Team v4.17.0 — Professional Workspace */
.command-palette-trigger{display:flex;align-items:center;gap:7px;height:38px;padding:0 10px;border:1px solid color-mix(in srgb,var(--text-primary,#172033) 14%,transparent);border-radius:11px;background:color-mix(in srgb,var(--surface,#fff) 92%,transparent);color:var(--text-primary,#172033);cursor:pointer}
.command-palette-trigger span{font-size:18px}.command-palette-trigger b{font-size:12px}.command-palette-trigger kbd,.command-palette-panel kbd{border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-bottom-width:2px;border-radius:6px;padding:2px 6px;background:color-mix(in srgb,var(--surface,#fff) 80%,transparent);font:700 10px/1.4 inherit;color:var(--text-secondary,#667085)}
.command-palette{position:fixed;inset:0;z-index:10050;display:grid;place-items:start center;padding:11vh 18px 18px}.command-palette.hidden{display:none}.command-palette-backdrop{position:absolute;inset:0;background:rgba(5,12,24,.58);backdrop-filter:blur(5px)}.command-palette-panel{position:relative;width:min(720px,100%);max-height:min(680px,78vh);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border:1px solid color-mix(in srgb,var(--text-primary,#172033) 16%,transparent);border-radius:20px;background:var(--surface,#fff);box-shadow:0 30px 90px rgba(0,0,0,.34);color:var(--text-primary,#172033)}
.command-palette-panel>header{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid color-mix(in srgb,currentColor 10%,transparent)}.command-palette-panel>header>span{font-size:23px;color:var(--accent,#3976ff)}.command-palette-panel input{width:100%;border:0;outline:0;background:transparent;color:inherit;font-size:17px;font-weight:650}.command-palette-results{overflow:auto;padding:9px}.command-result{width:100%;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;border:0;border-radius:12px;padding:10px;text-align:left;background:transparent;color:inherit;cursor:pointer}.command-result:hover,.command-result.active{background:color-mix(in srgb,var(--accent,#3976ff) 11%,transparent)}.command-result-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--accent,#3976ff) 14%,transparent);color:var(--accent,#3976ff);font-size:17px}.command-result strong,.command-result small{display:block;overflow-wrap:anywhere}.command-result small{margin-top:3px;color:var(--text-secondary,#667085)}.command-palette-panel>footer{display:flex;gap:18px;padding:10px 15px;border-top:1px solid color-mix(in srgb,currentColor 10%,transparent);color:var(--text-secondary,#667085);font-size:11px}.command-empty{padding:35px;text-align:center;color:var(--text-secondary,#667085)}
body.dark .command-palette-panel,[data-theme="dark"] .command-palette-panel{background:#102238;color:#eef5ff;border-color:rgba(183,207,235,.18)}body.dark .command-palette-trigger,[data-theme="dark"] .command-palette-trigger{background:#102238;color:#eef5ff;border-color:rgba(183,207,235,.18)}
.delivery-center-toolbar h1,.delivery-week-column>header span,.delivery-day-chip span{text-transform:none}
@media(max-width:1100px){.command-palette-trigger b,.command-palette-trigger kbd{display:none}.command-palette-trigger{width:38px;justify-content:center;padding:0}}
@media(max-width:640px){.command-palette{padding:8px;place-items:end center}.command-palette-panel{width:100%;max-height:86vh;border-radius:20px 20px 12px 12px}.command-palette-panel>footer{display:none}.command-palette-panel input{font-size:16px}}
/* Correcto Team v4.18.0 — WooCommerce pošiljke */
.shipping-orders-panel{border:1px solid var(--dc-border);border-radius:18px;background:var(--dc-bg);overflow:hidden;box-shadow:0 12px 34px rgba(15,23,42,.08)}
.shipping-orders-panel>header{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 17px;border-bottom:1px solid var(--dc-border)}
.shipping-orders-panel>header>div{display:flex;align-items:center;gap:10px}.shipping-orders-panel h2{margin:0;font-size:18px}.shipping-orders-panel p{margin:3px 0 0;color:var(--dc-muted);font-size:12px}.shipping-orders-panel>header>div:last-child>b{display:grid;place-items:center;min-width:34px;height:30px;border-radius:99px;background:#17233a;color:#fff}.shipping-orders-panel button{border:1px solid var(--dc-border);border-radius:10px;padding:9px 12px;background:var(--dc-card);color:inherit;font-weight:850;cursor:pointer}.shipping-orders-panel button:disabled{opacity:.6;cursor:wait}
.shipping-orders-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:10px;padding:11px;max-height:430px;overflow:auto}.shipping-order-card{position:relative;padding:13px;border:1px solid var(--dc-border);border-left:5px solid #2878ff;border-radius:14px;background:var(--dc-card);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}.shipping-order-card.correctoshop{border-left-color:#25ad68}.shipping-order-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.12)}.shipping-order-card header{display:flex;justify-content:space-between;gap:8px}.shipping-order-card header>div{display:grid}.shipping-order-card header strong{font-size:16px}.shipping-order-card header span{color:var(--dc-muted);font-size:11px}.shipping-order-card header>b{align-self:start;padding:4px 7px;border-radius:99px;background:color-mix(in srgb,#2674f6 12%,transparent);color:#2674f6;font-size:9px}.shipping-order-card h3{margin:12px 0 9px;font-size:15px;overflow-wrap:anywhere}.shipping-order-meta{display:grid;grid-template-columns:1fr 1fr;gap:7px}.shipping-order-meta span{font-size:11px;color:var(--dc-muted);overflow-wrap:anywhere}.shipping-orders-empty{grid-column:1/-1;padding:28px;text-align:center;color:var(--dc-muted)}
.shipping-order-modal{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:18px}.shipping-order-modal-backdrop{position:absolute;inset:0;background:rgba(5,12,24,.62);backdrop-filter:blur(5px)}.shipping-order-modal-panel{position:relative;width:min(820px,100%);max-height:90vh;overflow:auto;border:1px solid var(--dc-border);border-radius:20px;background:var(--surface,#fff);color:var(--text-primary,#172033);box-shadow:0 30px 90px rgba(0,0,0,.38)}.shipping-order-modal-panel>header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--dc-border)}.shipping-order-modal-panel>header>div{display:flex;align-items:center;gap:10px}.shipping-order-modal-panel h2{margin:0;font-size:20px}.shipping-order-modal-panel header p{margin:2px 0 0;color:var(--dc-muted)}.shipping-order-modal-panel>header>button{border:0;background:transparent;color:inherit;font-size:28px;cursor:pointer}.source-dot{width:13px;height:42px;border-radius:99px;background:#2878ff}.source-dot.correctoshop{background:#25ad68}.shipping-order-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:16px;border:1px solid var(--dc-border);border-radius:14px;overflow:hidden}.shipping-order-detail-grid>div{display:grid;gap:5px;padding:12px;border-right:1px solid var(--dc-border);border-bottom:1px solid var(--dc-border)}.shipping-order-detail-grid .wide{grid-column:1/-1}.shipping-order-detail-grid small{color:var(--dc-muted)}.shipping-order-detail-grid strong{overflow-wrap:anywhere}.shipping-order-detail-grid a{color:#2674f6}.shipping-order-items{padding:0 16px 18px}.shipping-order-items h3{margin:0 0 10px}.shipping-order-items table{width:100%;border-collapse:collapse}.shipping-order-items th,.shipping-order-items td{text-align:left;padding:10px;border-bottom:1px solid var(--dc-border)}.shipping-order-items th{color:var(--dc-muted);font-size:11px}.table-scroll{overflow:auto}
[data-theme="dark"] .shipping-order-modal-panel,.dark-theme .shipping-order-modal-panel{background:#102238;color:#eef5ff}
@media(max-width:640px){.shipping-orders-panel>header{align-items:flex-start}.shipping-orders-panel>header>div:last-child{align-self:stretch;justify-content:flex-end}.shipping-orders-panel p{display:none}.shipping-orders-list{grid-template-columns:1fr;max-height:360px}.shipping-order-meta{grid-template-columns:1fr 1fr}.shipping-order-modal{padding:0;place-items:end center}.shipping-order-modal-panel{width:100%;max-height:92vh;border-radius:20px 20px 0 0}.shipping-order-detail-grid{grid-template-columns:1fr}.shipping-order-detail-grid .wide{grid-column:auto}}
/* Correcto Team v4.18.1 - pošiljke u Nedeljnom planu */
.shipping-planner-column{border-color:color-mix(in srgb,#64748b 35%,var(--dc-border))!important}.shipping-dot{background:#64748b!important}.shipping-planner-list{gap:10px}.planner-shipping-card{display:grid;gap:7px;padding:12px;border:1px solid var(--dc-border);border-left:5px solid #2878ff;border-radius:14px;background:var(--dc-card);cursor:grab;box-shadow:0 5px 16px rgba(15,23,42,.07);transition:.18s ease}.planner-shipping-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.12)}.planner-shipping-card.dragging{opacity:.45}.planner-shipping-card.correctoshop{border-left-color:#25ad68}.planner-shipping-card.manual{border-left-color:#94a3b8}.planner-shipping-card strong{font-size:14px;overflow-wrap:anywhere}.planner-shipping-card small{color:var(--dc-muted);overflow-wrap:anywhere}.planner-shipping-card>div{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--dc-muted)}.shipping-source-badge{width:max-content;max-width:100%;padding:4px 8px;border-radius:99px;background:color-mix(in srgb,#2878ff 13%,transparent);color:#2878ff;font-size:10px;font-weight:900}.planner-shipping-card.correctoshop .shipping-source-badge{background:color-mix(in srgb,#25ad68 14%,transparent);color:#16844d}.planner-shipping-card.manual .shipping-source-badge{background:color-mix(in srgb,#94a3b8 18%,transparent);color:var(--dc-muted)}.shipping-planner-empty{padding:25px 12px;text-align:center;color:var(--dc-muted);font-size:12px}.shipping-manual-form textarea{min-height:90px}
body.dark .planner-shipping-card,[data-theme="dark"] .planner-shipping-card{box-shadow:0 8px 22px rgba(0,0,0,.24)}
/* Correcto Team v4.18.3 - broj Woo porudžbine uz kupca */
.shipping-card-customer{display:flex!important;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.shipping-card-customer>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shipping-card-customer>em{font-style:normal;font-size:11px;font-weight:800;line-height:1;padding:5px 7px;border-radius:999px;background:rgba(57,118,255,.12);color:var(--primary,#3976ff);white-space:nowrap}
[data-theme=dark] .shipping-card-customer>em,.dark .shipping-card-customer>em{background:rgba(105,155,255,.18);color:#a9c7ff}
/* Correcto Team v4.18.4 - interaktivne pošiljke i završavanje bez obaveštenja */
.shipping-card-top{display:flex!important;align-items:center;justify-content:space-between;gap:8px}
.shipping-quick-complete{display:grid;place-items:center;width:27px;height:27px;padding:0;border:1px solid color-mix(in srgb,#22a866 45%,var(--dc-border));border-radius:9px;background:color-mix(in srgb,#22a866 12%,var(--dc-card));color:#11814a;font-size:15px;font-weight:950;cursor:pointer;transition:.16s ease}
.shipping-quick-complete:hover{transform:scale(1.06);background:#22a866;color:#fff}
.shipping-task-detail{display:grid;gap:14px}.shipping-task-detail-head{display:flex;align-items:center;gap:10px}.shipping-task-detail-head>strong{font-size:19px}
.shipping-task-detail-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--dc-border);border-radius:14px;overflow:hidden}
.shipping-task-detail-grid>div{display:grid;gap:5px;padding:12px;border-right:1px solid var(--dc-border);border-bottom:1px solid var(--dc-border)}
.shipping-task-detail-grid>div:nth-child(2n){border-right:0}.shipping-task-detail-grid .wide{grid-column:1/-1;border-right:0}.shipping-task-detail-grid small{color:var(--dc-muted)}.shipping-task-detail-grid p{margin:0;white-space:pre-wrap}
.shipping-task-items{display:grid;border:1px solid var(--dc-border);border-radius:14px;overflow:hidden}.shipping-task-items>strong{padding:11px 12px;background:color-mix(in srgb,var(--dc-card) 82%,var(--primary,#3976ff) 18%)}.shipping-task-items>div{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-top:1px solid var(--dc-border)}
.shipping-no-notify-note{margin:0;padding:11px 12px;border-radius:12px;background:color-mix(in srgb,#22a866 10%,var(--dc-card));color:var(--dc-muted);font-size:12px;line-height:1.5}
@media(max-width:640px){.shipping-task-detail-grid{grid-template-columns:1fr}.shipping-task-detail-grid>div,.shipping-task-detail-grid>div:nth-child(2n),.shipping-task-detail-grid .wide{grid-column:auto;border-right:0}}
/* Correcto Team v4.18.4 - interaktivne pošiljke i završavanje bez obaveštenja */
.shipping-card-top{display:flex!important;align-items:center;justify-content:space-between;gap:8px}
.shipping-quick-complete{display:grid;place-items:center;width:27px;height:27px;padding:0;border:1px solid color-mix(in srgb,#22a866 45%,var(--dc-border));border-radius:9px;background:color-mix(in srgb,#22a866 12%,var(--dc-card));color:#11814a;font-size:15px;font-weight:950;cursor:pointer;transition:.16s ease}
.shipping-quick-complete:hover{transform:scale(1.06);background:#22a866;color:#fff}
.planner-shipping-card:focus-visible{outline:3px solid color-mix(in srgb,var(--primary,#3976ff) 40%,transparent);outline-offset:2px}
.planner-shipping-card.shipping-completing{opacity:0;transform:translateX(16px) scale(.97)}
.shipping-task-detail{display:grid;gap:14px}.shipping-task-detail-head{display:flex;align-items:center;gap:10px}.shipping-task-detail-head>strong{font-size:19px}
.shipping-task-detail-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--dc-border);border-radius:14px;overflow:hidden}
.shipping-task-detail-grid>div{display:grid;gap:5px;padding:12px;border-right:1px solid var(--dc-border);border-bottom:1px solid var(--dc-border)}
.shipping-task-detail-grid>div:nth-child(2n){border-right:0}.shipping-task-detail-grid .wide{grid-column:1/-1;border-right:0}.shipping-task-detail-grid small{color:var(--dc-muted)}.shipping-task-detail-grid p{margin:0;white-space:pre-wrap}
.shipping-task-items{display:grid;border:1px solid var(--dc-border);border-radius:14px;overflow:hidden}.shipping-task-items>strong{padding:11px 12px;background:color-mix(in srgb,var(--dc-card) 82%,var(--primary,#3976ff) 18%)}.shipping-task-items>div{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-top:1px solid var(--dc-border)}
.shipping-no-notify-note{margin:0;padding:11px 12px;border-radius:12px;background:color-mix(in srgb,#22a866 10%,var(--dc-card));color:var(--dc-muted);font-size:12px;line-height:1.5}
@media(max-width:640px){.shipping-task-detail-grid{grid-template-columns:1fr}.shipping-task-detail-grid>div,.shipping-task-detail-grid>div:nth-child(2n),.shipping-task-detail-grid .wide{grid-column:auto;border-right:0}}
.completed-shipping-card{cursor:pointer;opacity:.88;border-left-color:#22a866!important}.completed-shipping-card .shipping-source-badge{background:color-mix(in srgb,#22a866 15%,transparent)!important;color:#12834b!important}
/* Correcto Team v4.18.6 - stabilan modal detalja pošiljke */
.planner-shipping-detail-modal{position:fixed;inset:0;z-index:30000;display:grid;place-items:center;padding:20px;isolation:isolate}
.planner-shipping-detail-backdrop{position:absolute;inset:0;background:rgba(5,12,24,.72);backdrop-filter:blur(6px)}
.planner-shipping-detail-panel{position:relative;z-index:1;width:min(820px,100%);max-height:92dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border:1px solid var(--border,#d7deea);border-radius:22px;background:#fff!important;color:#172033!important;box-shadow:0 32px 100px rgba(0,0,0,.5);opacity:1!important}
.planner-shipping-detail-panel>header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 19px;border-bottom:1px solid #dfe5ee;background:#f8fafc!important}
.planner-shipping-detail-panel>header>div{display:flex;align-items:center;gap:12px}.planner-shipping-detail-panel h2{margin:0;font-size:21px}.planner-shipping-detail-panel header p{margin:3px 0 0;color:#64748b}.planner-shipping-detail-panel header>button{width:36px;height:36px;border:0;border-radius:10px;background:#e9eef5;color:#172033;font-size:25px;cursor:pointer}
.planner-shipping-detail-content{display:grid;gap:15px;padding:18px;overflow:auto;background:#fff!important}
.planner-shipping-detail-panel>footer{display:flex;justify-content:flex-end;gap:9px;padding:13px 18px;border-top:1px solid #dfe5ee;background:#f8fafc!important}
.planner-shipping-detail-panel .shipping-task-detail-grid,.planner-shipping-detail-panel .shipping-task-items{border-color:#dfe5ee;background:#fff}
.planner-shipping-detail-panel .shipping-task-detail-grid>div,.planner-shipping-detail-panel .shipping-task-items>div{border-color:#dfe5ee}
.planner-shipping-detail-panel .shipping-task-detail-grid small{color:#64748b}
.planner-shipping-detail-panel .source-dot.manual{background:#94a3b8}
[data-theme="dark"] .planner-shipping-detail-panel,body.dark .planner-shipping-detail-panel{background:#102238!important;color:#eef5ff!important;border-color:#29415f}
[data-theme="dark"] .planner-shipping-detail-panel>header,[data-theme="dark"] .planner-shipping-detail-panel>footer,[data-theme="dark"] .planner-shipping-detail-content,body.dark .planner-shipping-detail-panel>header,body.dark .planner-shipping-detail-panel>footer,body.dark .planner-shipping-detail-content{background:#102238!important;border-color:#29415f}
[data-theme="dark"] .planner-shipping-detail-panel header>button,body.dark .planner-shipping-detail-panel header>button{background:#1c3553;color:#eef5ff}
[data-theme="dark"] .planner-shipping-detail-panel .shipping-task-detail-grid,[data-theme="dark"] .planner-shipping-detail-panel .shipping-task-items,body.dark .planner-shipping-detail-panel .shipping-task-detail-grid,body.dark .planner-shipping-detail-panel .shipping-task-items{background:#132a45;border-color:#29415f}
[data-theme="dark"] .planner-shipping-detail-panel .shipping-task-detail-grid>div,[data-theme="dark"] .planner-shipping-detail-panel .shipping-task-items>div,body.dark .planner-shipping-detail-panel .shipping-task-detail-grid>div,body.dark .planner-shipping-detail-panel .shipping-task-items>div{border-color:#29415f}
@media(max-width:640px){.planner-shipping-detail-modal{padding:0;place-items:end center}.planner-shipping-detail-panel{width:100%;max-height:94dvh;border-radius:22px 22px 0 0}.planner-shipping-detail-panel>footer{display:grid;grid-template-columns:1fr 1.35fr}.planner-shipping-detail-panel>footer button{min-width:0}}
/* Correcto Team v4.18.7 — desktop klik + potpuno usklađene task kartice */
/* Sve kartice koriste jednu površinu; korisnička boja ostaje samo kao akcent/border. */
#boardKanbanDashboard .board-task-card,
#boardKanbanDashboard .task-card,
.premium-delivery-center .delivery-stop-row,
.premium-delivery-center .delivery-driver-card,
.premium-delivery-center .delivery-week-card,
.premium-delivery-center .delivery-card,
.premium-delivery-center .shipping-order-card,
.planner-shipping-card{
background:var(--surface,#ffffff)!important;
color:var(--text-primary,#172033)!important;
}
#boardKanbanDashboard .board-task-card *,
#boardKanbanDashboard .task-card *,
.premium-delivery-center .delivery-stop-row *,
.premium-delivery-center .delivery-driver-card *,
.premium-delivery-center .delivery-week-card *,
.premium-delivery-center .delivery-card *,
.premium-delivery-center .shipping-order-card *,
.planner-shipping-card *{
color:inherit;
}
#boardKanbanDashboard .board-task-card small,
#boardKanbanDashboard .board-task-card .board-task-description,
#boardKanbanDashboard .task-card small,
.premium-delivery-center .delivery-stop-row p,
.premium-delivery-center .delivery-stop-row small,
.premium-delivery-center .delivery-driver-card p,
.premium-delivery-center .delivery-driver-card blockquote,
.premium-delivery-center .delivery-week-card small,
.premium-delivery-center .delivery-card small,
.premium-delivery-center .shipping-order-meta span,
.planner-shipping-card small,
.planner-shipping-card>div{
color:var(--text-secondary,#667085)!important;
}
body.dark #boardKanbanDashboard .board-task-card,
body.dark #boardKanbanDashboard .task-card,
[data-theme="dark"] #boardKanbanDashboard .board-task-card,
[data-theme="dark"] #boardKanbanDashboard .task-card,
body.dark .premium-delivery-center .delivery-stop-row,
body.dark .premium-delivery-center .delivery-driver-card,
body.dark .premium-delivery-center .delivery-week-card,
body.dark .premium-delivery-center .delivery-card,
body.dark .premium-delivery-center .shipping-order-card,
[data-theme="dark"] .premium-delivery-center .delivery-stop-row,
[data-theme="dark"] .premium-delivery-center .delivery-driver-card,
[data-theme="dark"] .premium-delivery-center .delivery-week-card,
[data-theme="dark"] .premium-delivery-center .delivery-card,
[data-theme="dark"] .premium-delivery-center .shipping-order-card,
body.dark .planner-shipping-card,
[data-theme="dark"] .planner-shipping-card{
background:#132238!important;
color:#f4f7fb!important;
border-color:#33465f!important;
box-shadow:0 8px 22px rgba(0,0,0,.28)!important;
}
body.dark #boardKanbanDashboard .board-task-card small,
body.dark #boardKanbanDashboard .board-task-card .board-task-description,
body.dark #boardKanbanDashboard .task-card small,
[data-theme="dark"] #boardKanbanDashboard .board-task-card small,
[data-theme="dark"] #boardKanbanDashboard .board-task-card .board-task-description,
[data-theme="dark"] #boardKanbanDashboard .task-card small,
body.dark .premium-delivery-center .delivery-stop-row p,
body.dark .premium-delivery-center .delivery-stop-row small,
body.dark .premium-delivery-center .delivery-driver-card p,
body.dark .premium-delivery-center .delivery-driver-card blockquote,
body.dark .premium-delivery-center .delivery-week-card small,
body.dark .premium-delivery-center .shipping-order-meta span,
[data-theme="dark"] .premium-delivery-center .delivery-stop-row p,
[data-theme="dark"] .premium-delivery-center .delivery-stop-row small,
[data-theme="dark"] .premium-delivery-center .delivery-driver-card p,
[data-theme="dark"] .premium-delivery-center .delivery-driver-card blockquote,
[data-theme="dark"] .premium-delivery-center .delivery-week-card small,
[data-theme="dark"] .premium-delivery-center .shipping-order-meta span,
body.dark .planner-shipping-card small,
body.dark .planner-shipping-card>div,
[data-theme="dark"] .planner-shipping-card small,
[data-theme="dark"] .planner-shipping-card>div{
color:#b8c7d9!important;
}
/* Badgevi i akcije zadržavaju sopstvene statusne boje. */
#boardKanbanDashboard .board-task-card .task-label,
#boardKanbanDashboard .board-task-card .board-task-label,
#boardKanbanDashboard .board-task-card button,
.premium-delivery-center .route-status-badge,
.premium-delivery-center button,
.premium-delivery-center a,
.planner-shipping-card .shipping-source-badge,
.planner-shipping-card button{
color:revert-layer;
}
.planner-shipping-card{touch-action:pan-y;user-select:none}
.planner-shipping-detail-modal{pointer-events:auto!important}
.planner-shipping-detail-panel{pointer-events:auto!important}
/* Correcto Team v4.18.8 — završna stabilizacija boarda i Razvoza */
/* Pošiljka se otvara klikom na karticu; prevlačenje je samo preko posebne ručice. */
.planner-shipping-card{cursor:pointer!important;user-select:none}
.shipping-card-actions{display:inline-flex!important;align-items:center;gap:6px;color:inherit!important}
.shipping-drag-handle,.shipping-quick-complete{display:grid;place-items:center;width:30px;height:30px;padding:0!important;border:1px solid var(--dc-border)!important;border-radius:9px;background:var(--dc-card)!important;color:var(--text-primary,#172033)!important;font-weight:900;cursor:grab!important}
.shipping-drag-handle:active{cursor:grabbing!important}.shipping-quick-complete{cursor:pointer!important;color:#12834b!important}
body.dark .shipping-drag-handle,body.dark .shipping-quick-complete,[data-theme="dark"] .shipping-drag-handle,[data-theme="dark"] .shipping-quick-complete{background:#1c3553!important;border-color:#3b516d!important;color:#f4f7fb!important}
/* Razvoz: nikada crn tekst na tamnoj površini. */
body.dark .premium-delivery-center,
[data-theme="dark"] .premium-delivery-center{--dc-bg:#09182a;--dc-card:#102238;--dc-border:#29415f;--dc-muted:#b8c7d9;color:#f4f7fb!important}
body.dark .premium-delivery-center .delivery-center-page *,
[data-theme="dark"] .premium-delivery-center .delivery-center-page *{border-color:var(--dc-border)}
body.dark .premium-delivery-center h1,body.dark .premium-delivery-center h2,body.dark .premium-delivery-center h3,body.dark .premium-delivery-center strong,body.dark .premium-delivery-center b,
[data-theme="dark"] .premium-delivery-center h1,[data-theme="dark"] .premium-delivery-center h2,[data-theme="dark"] .premium-delivery-center h3,[data-theme="dark"] .premium-delivery-center strong,[data-theme="dark"] .premium-delivery-center b{color:#f4f7fb!important}
body.dark .premium-delivery-center p,body.dark .premium-delivery-center small,body.dark .premium-delivery-center .delivery-detail-grid small,
[data-theme="dark"] .premium-delivery-center p,[data-theme="dark"] .premium-delivery-center small,[data-theme="dark"] .premium-delivery-center .delivery-detail-grid small{color:#b8c7d9!important}
body.dark .premium-delivery-center .delivery-detail-panel,body.dark .premium-delivery-center .delivery-stops-panel,
[data-theme="dark"] .premium-delivery-center .delivery-detail-panel,[data-theme="dark"] .premium-delivery-center .delivery-stops-panel{background:#102238!important;color:#f4f7fb!important}
.delivery-stop-row.active,.delivery-driver-card.active,.delivery-week-card.active{border:2px solid #2d8cff!important;box-shadow:0 0 0 3px rgba(45,140,255,.18),0 12px 28px rgba(0,0,0,.2)!important}
.delivery-active-banner{margin:0 0 12px;padding:11px 13px;border-radius:12px;background:rgba(45,140,255,.14);border:1px solid rgba(45,140,255,.42);color:#2d8cff;font-weight:900}
body.dark .delivery-active-banner,[data-theme="dark"] .delivery-active-banner{color:#74b5ff;background:rgba(45,140,255,.18)}
.delivery-detail-actions-top{margin:0 0 14px!important;display:flex!important;flex-wrap:wrap!important;gap:9px!important}
.delivery-detail-actions-top a{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:44px;padding:10px 14px!important;border-radius:12px!important;background:#2878ff!important;color:#fff!important;text-decoration:none!important;font-weight:900!important}
@media(max-width:640px){
.delivery-day-layout{display:block!important}
.delivery-detail-panel{margin-top:14px!important;max-height:none!important;overflow:visible!important}
.delivery-detail-head{position:relative!important;top:auto!important}
.delivery-detail-actions-top{display:grid!important;grid-template-columns:1fr!important}
.delivery-detail-actions-top a{width:100%!important}
.delivery-detail-grid{grid-template-columns:1fr!important}
.delivery-detail-grid .wide{grid-column:auto!important}
.premium-delivery-center .delivery-center-page{padding-bottom:110px!important}
}
/* =========================================================
Correcto Team v4.18.9 — potpuni kontrast dark teme
========================================================= */
body.dark #boardKanbanDashboard .board-task-card,
body.dark #boardKanbanDashboard .board-task-card.has-task-color,
[data-theme="dark"] #boardKanbanDashboard .board-task-card,
[data-theme="dark"] #boardKanbanDashboard .board-task-card.has-task-color{
background:#14243a!important;
color:#f5f8fc!important;
border-color:#344b68!important;
}
body.dark #boardKanbanDashboard .board-task-card .board-task-title,
body.dark #boardKanbanDashboard .board-task-card h1,
body.dark #boardKanbanDashboard .board-task-card h2,
body.dark #boardKanbanDashboard .board-task-card h3,
body.dark #boardKanbanDashboard .board-task-card h4,
body.dark #boardKanbanDashboard .board-task-card strong,
body.dark #boardKanbanDashboard .board-task-card b,
[data-theme="dark"] #boardKanbanDashboard .board-task-card .board-task-title,
[data-theme="dark"] #boardKanbanDashboard .board-task-card h1,
[data-theme="dark"] #boardKanbanDashboard .board-task-card h2,
[data-theme="dark"] #boardKanbanDashboard .board-task-card h3,
[data-theme="dark"] #boardKanbanDashboard .board-task-card h4,
[data-theme="dark"] #boardKanbanDashboard .board-task-card strong,
[data-theme="dark"] #boardKanbanDashboard .board-task-card b{
color:#ffffff!important;
opacity:1!important;
}
body.dark #boardKanbanDashboard .board-task-card p,
body.dark #boardKanbanDashboard .board-task-card small,
body.dark #boardKanbanDashboard .board-task-card span:not(.label):not(.priority-badge):not(.task-assignee):not(.shipping-source-badge),
body.dark #boardKanbanDashboard .board-task-card .board-task-description,
body.dark #boardKanbanDashboard .board-task-card .board-task-progress,
body.dark #boardKanbanDashboard .board-task-card .task-meta,
[data-theme="dark"] #boardKanbanDashboard .board-task-card p,
[data-theme="dark"] #boardKanbanDashboard .board-task-card small,
[data-theme="dark"] #boardKanbanDashboard .board-task-card span:not(.label):not(.priority-badge):not(.task-assignee):not(.shipping-source-badge),
[data-theme="dark"] #boardKanbanDashboard .board-task-card .board-task-description,
[data-theme="dark"] #boardKanbanDashboard .board-task-card .board-task-progress,
[data-theme="dark"] #boardKanbanDashboard .board-task-card .task-meta{
color:#c5d2e3!important;
opacity:1!important;
}
body.dark #boardKanbanDashboard .board-task-card a,
[data-theme="dark"] #boardKanbanDashboard .board-task-card a{color:#7cc8ff!important}
/* Desni klik meni i svi podmeniji. */
body.dark .task-context-menu,
body.dark .context-menu,
body.dark .board-context-menu,
body.dark .task-context-submenu,
[data-theme="dark"] .task-context-menu,
[data-theme="dark"] .context-menu,
[data-theme="dark"] .board-context-menu,
[data-theme="dark"] .task-context-submenu{
background:#101d30!important;
color:#f6f9fd!important;
border:1px solid #3b526f!important;
box-shadow:0 22px 55px rgba(0,0,0,.58)!important;
}
body.dark .task-context-menu button,
body.dark .context-menu button,
body.dark .board-context-menu button,
body.dark .task-context-submenu button,
[data-theme="dark"] .task-context-menu button,
[data-theme="dark"] .context-menu button,
[data-theme="dark"] .board-context-menu button,
[data-theme="dark"] .task-context-submenu button{
color:#eef5ff!important;
background:transparent!important;
opacity:1!important;
}
body.dark .task-context-menu button:hover,
body.dark .context-menu button:hover,
body.dark .board-context-menu button:hover,
body.dark .task-context-submenu button:hover,
[data-theme="dark"] .task-context-menu button:hover,
[data-theme="dark"] .context-menu button:hover,
[data-theme="dark"] .board-context-menu button:hover,
[data-theme="dark"] .task-context-submenu button:hover{
background:#203652!important;
color:#ffffff!important;
}
body.dark .task-context-menu .context-menu-title,
body.dark .context-menu .context-menu-title,
body.dark .task-context-submenu .context-menu-title,
[data-theme="dark"] .task-context-menu .context-menu-title,
[data-theme="dark"] .context-menu .context-menu-title,
[data-theme="dark"] .task-context-submenu .context-menu-title{
color:#aebed2!important;
}
body.dark .task-context-menu .danger,
body.dark .context-menu .danger,
[data-theme="dark"] .task-context-menu .danger,
[data-theme="dark"] .context-menu .danger{color:#ff9ca8!important}
body.dark .task-context-menu .divider,
body.dark .context-menu .divider,
[data-theme="dark"] .task-context-menu .divider,
[data-theme="dark"] .context-menu .divider{background:#344a65!important}
/* Kolone, footer i šablon u dark temi. */
body.dark #boardKanbanDashboard .board-kanban-column,
[data-theme="dark"] #boardKanbanDashboard .board-kanban-column{background:#0e1c2d!important;border-color:#314863!important}
body.dark #boardKanbanDashboard .board-kanban-column>header,
[data-theme="dark"] #boardKanbanDashboard .board-kanban-column>header{background:#102238!important;color:#f8fbff!important}
body.dark #boardKanbanDashboard .board-kanban-column>header *,
[data-theme="dark"] #boardKanbanDashboard .board-kanban-column>header *{color:#f8fbff!important}
body.dark #boardKanbanDashboard .column-create-tools,
body.dark #boardKanbanDashboard .column-template-button,
[data-theme="dark"] #boardKanbanDashboard .column-create-tools,
[data-theme="dark"] #boardKanbanDashboard .column-template-button{background:#171f28!important;color:#f7f9fc!important;border-color:#3d4652!important}
body.dark #boardKanbanDashboard .column-template-button *,
[data-theme="dark"] #boardKanbanDashboard .column-template-button *{color:#f7f9fc!important}
/* Razvoz: svi tekstualni nivoi ostaju čitljivi. */
body.dark .premium-delivery-center .delivery-card,
body.dark .premium-delivery-center .delivery-stop-row,
body.dark .premium-delivery-center .delivery-driver-card,
body.dark .premium-delivery-center .delivery-week-card,
[data-theme="dark"] .premium-delivery-center .delivery-card,
[data-theme="dark"] .premium-delivery-center .delivery-stop-row,
[data-theme="dark"] .premium-delivery-center .delivery-driver-card,
[data-theme="dark"] .premium-delivery-center .delivery-week-card{
background:#13243a!important;
color:#f5f8fc!important;
border-color:#344b68!important;
}
body.dark .premium-delivery-center .delivery-card-title,
body.dark .premium-delivery-center .delivery-card-title strong,
body.dark .premium-delivery-center .delivery-stop-row strong,
body.dark .premium-delivery-center .delivery-driver-card strong,
[data-theme="dark"] .premium-delivery-center .delivery-card-title,
[data-theme="dark"] .premium-delivery-center .delivery-card-title strong,
[data-theme="dark"] .premium-delivery-center .delivery-stop-row strong,
[data-theme="dark"] .premium-delivery-center .delivery-driver-card strong{color:#fff!important}
body.dark .premium-delivery-center .delivery-meta,
body.dark .premium-delivery-center .delivery-meta *,
body.dark .premium-delivery-center .delivery-card p,
body.dark .premium-delivery-center .delivery-card small,
[data-theme="dark"] .premium-delivery-center .delivery-meta,
[data-theme="dark"] .premium-delivery-center .delivery-meta *,
[data-theme="dark"] .premium-delivery-center .delivery-card p,
[data-theme="dark"] .premium-delivery-center .delivery-card small{color:#c3d0e1!important}
/* Correcto Team v4.19.0 — jednostavne mobilne isporuke na ruti */
.delivery-stop-simple{cursor:pointer}
.delivery-stop-simple .delivery-stop-copy{min-width:0;display:grid;gap:5px}
.delivery-stop-simple .delivery-stop-title{font-size:15px;line-height:1.32;overflow-wrap:anywhere;color:var(--dc-text,var(--text,#172033))}
.delivery-stop-simple .delivery-stop-contact,
.delivery-stop-simple .delivery-stop-location{display:block;font-size:12px;line-height:1.3;color:var(--dc-muted,var(--muted,#667085));overflow-wrap:anywhere}
.delivery-stop-actions{display:flex;align-items:center;gap:7px;margin-left:auto}
.delivery-stop-actions>a,.delivery-stop-actions>button{border:1px solid var(--dc-border,var(--border,#d8e0ea));border-radius:9px;background:var(--dc-card,var(--surface,#fff));color:var(--dc-text,var(--text,#172033));text-decoration:none;font-weight:850;min-height:36px;padding:0 10px;display:grid;place-items:center}
.delivery-stop-actions .delivery-stop-complete{background:#1faa62;border-color:#1faa62;color:#fff;white-space:nowrap}
.delivery-stop-done{font-size:11px;font-weight:900;color:#1faa62}
body.dark .delivery-stop-simple .delivery-stop-title,
[data-theme="dark"] .delivery-stop-simple .delivery-stop-title{color:#f5f8ff!important}
body.dark .delivery-stop-simple .delivery-stop-contact,
body.dark .delivery-stop-simple .delivery-stop-location,
[data-theme="dark"] .delivery-stop-simple .delivery-stop-contact,
[data-theme="dark"] .delivery-stop-simple .delivery-stop-location{color:#b9c7da!important}
body.dark .delivery-stop-actions>a,
body.dark .delivery-stop-actions>button,
[data-theme="dark"] .delivery-stop-actions>a,
[data-theme="dark"] .delivery-stop-actions>button{background:#162b45;color:#f5f8ff;border-color:#35506f}
body.dark .delivery-stop-actions .delivery-stop-complete,
[data-theme="dark"] .delivery-stop-actions .delivery-stop-complete{background:#1faa62;color:#fff;border-color:#1faa62}
@media(max-width:640px){
.delivery-stops-panel>header{padding:12px 13px}
.delivery-stop-list{display:grid;gap:8px;padding:8px}
.delivery-stop-row.delivery-stop-simple{grid-template-columns:38px minmax(0,1fr);gap:10px;padding:13px;border-radius:14px;align-items:start}
.delivery-stop-simple .delivery-stop-number{width:36px;height:36px;font-size:16px}
.delivery-stop-simple .delivery-stop-copy{padding-top:1px}
.delivery-stop-simple .delivery-stop-title{font-size:16px}
.delivery-stop-actions{grid-column:1/-1;width:100%;display:grid;grid-template-columns:42px 42px minmax(0,1fr);margin:4px 0 0}
.delivery-stop-actions>a,.delivery-stop-actions>button{width:100%;min-height:42px;padding:0 8px}
.delivery-stop-done{grid-column:1/-1;text-align:center;padding:8px}
}
/* =========================================================
Correcto Team v4.19.1 — Razvoz UX stabilization
========================================================= */
.delivery-stops-panel{overflow:hidden}
.delivery-stops-panel>header{background:color-mix(in srgb,var(--dc-card,#fff) 92%,transparent)}
.delivery-stop-list{display:grid;gap:8px;padding:10px}
.delivery-stop-row.delivery-stop-simple{
grid-template-columns:42px minmax(0,1fr) auto;
gap:12px;align-items:center;padding:14px 14px;
border:1px solid var(--dc-border,#d7e1ee)!important;border-radius:14px;
background:var(--dc-card,#fff);cursor:pointer;box-shadow:0 3px 10px rgba(15,23,42,.04)
}
.delivery-stop-row.delivery-stop-simple:hover,.delivery-stop-row.delivery-stop-simple.selected{border-color:#2d7df6!important;box-shadow:0 8px 22px rgba(45,125,246,.14)}
.delivery-stop-simple .delivery-stop-title{font-size:15px;font-weight:850;line-height:1.35;color:var(--dc-text,#14213a)}
.delivery-stop-simple .delivery-stop-contact,.delivery-stop-simple .delivery-stop-location{font-size:12px;color:var(--dc-muted,#61708a)}
.delivery-stop-simple.completed{opacity:.72;background:color-mix(in srgb,#21b66f 5%,var(--dc-card,#fff))}
.delivery-stop-simple.completed .delivery-stop-title{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:#31b978}
.delivery-stop-simple.completed .delivery-stop-contact,.delivery-stop-simple.completed .delivery-stop-location{text-decoration:line-through;text-decoration-thickness:1px}
.delivery-stop-done{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 12px;border-radius:999px;background:#dff8e9;color:#08743d!important;font-size:11px;font-weight:950;white-space:nowrap}
.delivery-stop-actions>a{width:38px;padding:0!important;font-size:17px}
.delivery-stop-actions .delivery-stop-complete{min-width:88px}
.delivery-route-hero-actions .route-pause,.delivery-route-hero-actions .route-finish,.delivery-route-hero-actions .route-restore{color:#fff!important;text-shadow:0 1px 1px rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.35)!important}
.delivery-route-hero-actions .route-pause{background:#f59e0b!important}
.delivery-route-hero-actions .route-finish{background:#15a957!important}
.delivery-route-hero-actions .route-restore{background:#12315c!important;border-color:#69a8ff!important}
body.dark .delivery-stop-row.delivery-stop-simple,[data-theme="dark"] .delivery-stop-row.delivery-stop-simple{background:#14273f!important;border-color:#385370!important;color:#f7faff!important}
body.dark .delivery-stop-simple .delivery-stop-title,[data-theme="dark"] .delivery-stop-simple .delivery-stop-title{color:#fff!important}
body.dark .delivery-stop-simple .delivery-stop-contact,body.dark .delivery-stop-simple .delivery-stop-location,[data-theme="dark"] .delivery-stop-simple .delivery-stop-contact,[data-theme="dark"] .delivery-stop-simple .delivery-stop-location{color:#bdcadb!important}
body.dark .delivery-stop-simple.completed,[data-theme="dark"] .delivery-stop-simple.completed{background:#173a35!important}
body.dark .delivery-stop-done,[data-theme="dark"] .delivery-stop-done{background:#174d37!important;color:#9ff3c4!important}
@media(max-width:640px){
.delivery-route-hero-actions button{width:100%;min-height:52px;font-size:15px}
.delivery-stop-list{padding:8px;gap:9px}
.delivery-stop-row.delivery-stop-simple{grid-template-columns:40px minmax(0,1fr);padding:13px 12px;gap:10px}
.delivery-stop-simple .delivery-stop-title{font-size:16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.delivery-stop-actions{grid-column:1/-1;display:grid;grid-template-columns:46px 46px minmax(0,1fr);gap:8px;margin-top:4px}
.delivery-stop-actions>a,.delivery-stop-actions>button{min-height:44px;border-radius:11px}
.delivery-stop-done{grid-column:1/-1;min-height:42px}
}
.task-live-moved{animation:ctLiveMoved .65s cubic-bezier(.2,.8,.2,1)!important}
@keyframes ctLiveMoved{0%{transform:scale(.96);box-shadow:0 0 0 0 color-mix(in srgb,var(--primary) 60%,transparent)}45%{transform:scale(1.025);box-shadow:0 0 0 7px color-mix(in srgb,var(--primary) 18%,transparent)}100%{transform:scale(1);box-shadow:inherit}}
/* Correcto Team v4.19.3 — mobile navigator in normal flow and full task-modal scrolling */
@media (max-width:1100px){
#pageContent{
display:flex;
flex-direction:column;
min-width:0;
}
.mobile-board-navigator{
order:0;
flex:0 0 auto;
position:sticky!important;
top:calc(var(--app-header-height,72px) + env(safe-area-inset-top,0px))!important;
z-index:160!important;
margin:0 10px 14px!important;
width:calc(100% - 20px)!important;
box-sizing:border-box!important;
background:var(--surface)!important;
color:var(--text)!important;
border:1px solid color-mix(in srgb,var(--primary) 38%,var(--border))!important;
box-shadow:0 8px 24px rgb(2 12 27/.22)!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
isolation:isolate;
}
#boardKanbanDashboard{
order:1;
position:relative;
z-index:1;
margin-top:0!important;
}
}
@media (max-width:640px){
.mobile-board-navigator{
min-height:112px!important;
grid-template-columns:54px minmax(0,1fr) 54px!important;
gap:8px!important;
padding:10px 12px!important;
border-radius:0 0 18px 18px!important;
}
.mobile-column-summary{gap:3px!important}
.mobile-column-summary small{font-size:9px!important}
.mobile-column-summary strong{font-size:18px!important;line-height:1.15!important}
.mobile-column-summary>span{font-size:12px!important}
.mobile-column-dots{margin-top:5px!important;max-width:min(55vw,230px)!important}
.mobile-column-arrow{width:50px!important;height:50px!important}
#boardKanbanDashboard.board-kanban-dashboard{
margin-top:0!important;
padding-top:0!important;
}
}
/* Correcto Team v4.19.4 — mobile board split into selector and task area */
.board-mobile-split{display:contents}
.board-selector-panel{display:contents}
.board-columns-panel{display:contents;min-width:0}
@media (max-width:1100px){
#pageContent{display:block!important;min-width:0}
.board-mobile-split{
display:grid;
grid-template-rows:auto minmax(0,1fr);
gap:12px;
min-width:0;
width:100%;
}
.board-selector-panel{
display:block;
position:sticky;
top:calc(var(--app-header-height,72px) + env(safe-area-inset-top,0px));
z-index:150;
width:100%;
background:var(--page-bg,transparent);
padding:0 10px;
box-sizing:border-box;
}
.board-selector-panel .mobile-board-navigator{
position:relative!important;
top:auto!important;
z-index:auto!important;
width:100%!important;
margin:0!important;
border-radius:16px!important;
}
.board-columns-panel{
display:block;
min-width:0;
width:100%;
position:relative;
z-index:1;
overflow:visible;
}
.board-columns-panel #boardKanbanDashboard{
margin-top:0!important;
padding-top:0!important;
}
}
/* ==========================================================================
Correcto Team v4.20.3 — UI Foundation
Authoritative global spacing, responsive shell and mobile board separation.
========================================================================== */
:root{
--ct-header-gap:18px;
--ct-page-inline:clamp(12px,2vw,24px);
--ct-page-bottom:clamp(82px,10vh,112px);
--ct-panel-gap:22px;
--ct-mobile-nav-height:68px;
}
/* The header stays in normal sticky flow. Content gets breathing room below it. */
#appHeader.app-header,
.app-header.warm-header{
position:sticky!important;
top:0!important;
z-index:1000!important;
isolation:isolate;
}
.app-view>.app-main{
width:100%;
min-width:0;
padding-top:var(--ct-header-gap)!important;
padding-right:var(--ct-page-inline)!important;
padding-bottom:var(--ct-page-bottom)!important;
padding-left:var(--ct-page-inline)!important;
overflow:visible;
}
#pageContent{min-width:0;width:100%}
/* Board is always two explicit layout regions on phone/tablet. */
.board-mobile-split{
width:100%;
min-width:0;
}
@media (max-width:720px){
:root{
--ct-header-gap:16px;
--ct-page-inline:8px;
--ct-panel-gap:18px;
--ct-page-bottom:calc(var(--ct-mobile-nav-height) + env(safe-area-inset-bottom,0px) + 20px);
}
.app-view>.app-main{
padding-top:calc(var(--ct-header-gap) + env(safe-area-inset-top,0px))!important;
}
.board-selector-panel{padding-inline:2px!important}
.board-columns-panel{padding-inline:0!important}
.mobile-board-navigator{
min-height:92px!important;
border-radius:16px!important;
box-shadow:0 10px 28px rgba(0,0,0,.18)!important;
}
.board-kanban-dashboard.board-kanban-clean{
scroll-padding-top:12px;
}
.board-kanban-column{
scroll-margin-top:12px;
}
}
/* Full task modal scroll on phones: one scroll container, no frozen upper panel. */
@media (max-width:720px){
#appModal{
width:100vw!important;
max-width:100vw!important;
height:100dvh!important;
max-height:100dvh!important;
margin:0!important;
padding:0!important;
border:0!important;
border-radius:0!important;
overflow:hidden!important;
}
#appModal>form{
display:block!important;
width:100%!important;
height:100%!important;
max-height:none!important;
overflow-y:auto!important;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))!important;
}
#appModal .modal-header,
#appModal #modalBody,
#appModal .modal-footer{
position:static!important;
inset:auto!important;
overflow:visible!important;
max-height:none!important;
}
#appModal .modal-header{
padding-top:calc(14px + env(safe-area-inset-top,0px))!important;
}
#appModal .task-modal-grid,
#appModal .task-modal-layout,
#appModal .task-editor-layout{
display:grid!important;
grid-template-columns:1fr!important;
min-width:0!important;
}
}
/* Shared theme readability guardrails. */
body.dark .task-card,
body.dark .board-task-card,
body.dark .planner-shipping-card,
body.dark .route-card,
body.dark .delivery-card{
color:var(--text)!important;
}
body.dark .task-card *,
body.dark .board-task-card *,
body.dark .planner-shipping-card *,
body.dark .route-card *,
body.dark .delivery-card *{
--menu-text:var(--text);
}
body.dark .context-menu,
body.dark .context-menu button,
body.dark .context-menu-item,
body.dark .dropdown-menu,
body.dark .dropdown-menu button{
color:#eef4ff!important;
}
body.dark .context-menu button:hover,
body.dark .context-menu-item:hover,
body.dark .dropdown-menu button:hover{
background:#263a57!important;
color:#fff!important;
}
/* Desktop/tablet/phone foundations. */
@media (min-width:1101px){
.app-view>.app-main{max-width:1920px;margin-inline:auto}
}
@media (min-width:721px) and (max-width:1100px){
:root{--ct-header-gap:20px;--ct-panel-gap:22px;--ct-page-bottom:34px}
}
/* ==========================================================================
Correcto Team v4.20.3 — compact navigator + Trello-like task movement
========================================================================== */
@media (max-width:1100px){
:root{--ct-header-gap:26px;--ct-panel-gap:14px}
.app-view>.app-main{padding-top:var(--ct-header-gap)!important}
.board-mobile-split{gap:var(--ct-panel-gap)!important}
.board-selector-panel{margin-top:4px!important;padding-inline:4px!important}
.board-selector-panel .mobile-board-navigator{
min-height:72px!important;
padding:8px 10px!important;
border-radius:14px!important;
grid-template-columns:42px minmax(0,1fr) 42px!important;
box-shadow:0 7px 20px rgba(0,0,0,.16)!important;
}
.mobile-column-arrow{width:42px!important;height:42px!important;min-width:42px!important;font-size:25px!important;border-radius:12px!important}
.mobile-column-summary{gap:1px!important;min-height:52px!important}
.mobile-column-summary small{font-size:10px!important;line-height:1.1!important}
.mobile-column-summary strong{font-size:17px!important;line-height:1.15!important}
.mobile-column-summary>span{font-size:12px!important;line-height:1.15!important}
.mobile-column-dots{gap:6px!important;margin-top:5px!important}
.mobile-column-dots button{width:7px!important;height:7px!important;min-width:7px!important;padding:0!important}
.mobile-column-dots button.active{width:26px!important}
}
@media (max-width:640px){
:root{--ct-header-gap:30px;--ct-panel-gap:12px}
.board-selector-panel .mobile-board-navigator{min-height:68px!important;padding:7px 8px!important}
.mobile-column-arrow{width:38px!important;height:38px!important;min-width:38px!important;font-size:23px!important}
}
/* Larger, forgiving drop surface. The whole column receives a task. */
.board-column-list{min-height:110px!important;position:relative}
body.task-drag-active .board-kanban-column,
body.touch-task-dragging .board-kanban-column{transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease}
body.task-drag-active .board-kanban-column.drag-over,
body.task-drag-active .board-kanban-column.drag-navigation-target,
body.touch-task-dragging .board-kanban-column.touch-drop-target{
border-color:#38a9ff!important;
box-shadow:0 0 0 3px rgba(56,169,255,.25),0 18px 42px rgba(0,0,0,.2)!important;
}
body.touch-task-dragging{user-select:none!important;-webkit-user-select:none!important;overflow:hidden}
body.touch-task-dragging .board-kanban-dashboard{scroll-snap-type:none!important}
.board-task-card{touch-action:pan-y;cursor:grab}
.board-task-card:active{cursor:grabbing}
.touch-drag-source{opacity:.28!important}
.touch-drag-ghost{
position:fixed!important;left:0!important;top:0!important;z-index:100000!important;
pointer-events:none!important;margin:0!important;opacity:.96!important;
transform-origin:top left!important;scale:.97;
box-shadow:0 24px 55px rgba(0,0,0,.38)!important;
}
.task-insert-marker{min-height:54px!important;border:2px dashed #38a9ff!important;background:rgba(56,169,255,.12)!important;border-radius:14px!important;margin:8px 0!important}
/* Correcto Team v4.20.3 — persistent columns, one-release drop and Razvoz scrolling */
/* Drag & drop: no insertion placeholder. The whole column is one forgiving target. */
.task-insert-marker{display:none!important}
body.task-drag-active .board-kanban-column,
body.touch-task-dragging .board-kanban-column{cursor:grabbing}
body.task-drag-active .board-column-list,
body.touch-task-dragging .board-column-list{min-height:150px!important}
body.task-drag-active .board-kanban-column.drag-over,
body.touch-task-dragging .board-kanban-column.touch-drop-target{
border-color:#38a9ff!important;
box-shadow:0 0 0 4px rgba(56,169,255,.28),0 18px 42px rgba(0,0,0,.20)!important;
}
/* Razvoz must always be vertically scrollable, including desktop and mobile. */
body.razvoz-standalone,
body.razvoz-standalone .app-view,
body.razvoz-standalone .app-main,
body.razvoz-standalone #pageContent{
height:auto!important;
max-height:none!important;
min-height:100%!important;
overflow:visible!important;
}
body.razvoz-standalone{overflow-y:auto!important;overflow-x:hidden!important}
.premium-delivery-center .delivery-center-page,
.premium-delivery-center .delivery-center-page>main,
.premium-delivery-center .delivery-day-view,
.premium-delivery-center .delivery-day-layout,
.premium-delivery-center .delivery-stops-panel{
height:auto!important;
max-height:none!important;
overflow:visible!important;
}
.premium-delivery-center .delivery-stop-list{
display:grid!important;
height:auto!important;
max-height:none!important;
min-height:140px!important;
overflow:visible!important;
}
@media(max-width:900px){
body.razvoz-standalone .app-main{padding-bottom:120px!important}
.premium-delivery-center .delivery-center-page{padding-bottom:130px!important}
}
/* Correcto Team v4.20.3 — definitive Razvoz viewport scrolling fix */
body.razvoz-standalone{
height:100dvh!important;
min-height:100dvh!important;
max-height:100dvh!important;
overflow:hidden!important;
}
body.razvoz-standalone .app-view{
display:flex!important;
flex-direction:column!important;
height:100dvh!important;
min-height:0!important;
max-height:100dvh!important;
overflow:hidden!important;
padding-bottom:0!important;
}
body.razvoz-standalone #appHeader{
flex:0 0 auto!important;
}
body.razvoz-standalone .app-main{
flex:1 1 auto!important;
min-height:0!important;
height:auto!important;
max-height:none!important;
overflow-y:auto!important;
overflow-x:hidden!important;
overscroll-behavior-y:contain!important;
-webkit-overflow-scrolling:touch!important;
scrollbar-gutter:stable!important;
padding-bottom:120px!important;
}
body.razvoz-standalone #pageContent,
body.razvoz-standalone .delivery-center-page,
body.razvoz-standalone .delivery-center-page>main,
body.razvoz-standalone .delivery-day-view,
body.razvoz-standalone .delivery-day-layout,
body.razvoz-standalone .delivery-stops-panel,
body.razvoz-standalone .delivery-stop-list{
height:auto!important;
min-height:0!important;
max-height:none!important;
overflow:visible!important;
}
body.razvoz-standalone .delivery-center-page{
padding-bottom:80px!important;
}
body.razvoz-standalone #boardFooter{
display:none!important;
}
@media(max-width:900px){
body.razvoz-standalone .app-main{
padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))!important;
}
body.razvoz-standalone .delivery-center-page{
padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))!important;
}
}
/* Correcto Team v4.20.4 — definitive context-menu contrast and desktop shipment opening */
body.dark .task-context-menu,
html[data-theme="dark"] .task-context-menu,
body.dark .task-context-submenu,
html[data-theme="dark"] .task-context-submenu,
body.dark .board-context-menu,
html[data-theme="dark"] .board-context-menu{
background:#101d30!important;
border-color:#3b526f!important;
color:#f4f8ff!important;
}
body.dark .task-context-menu *,
html[data-theme="dark"] .task-context-menu *,
body.dark .task-context-submenu *,
html[data-theme="dark"] .task-context-submenu *,
body.dark .board-context-menu *,
html[data-theme="dark"] .board-context-menu *{
color:#f4f8ff!important;
-webkit-text-fill-color:#f4f8ff!important;
opacity:1!important;
}
body.dark .task-context-menu button,
html[data-theme="dark"] .task-context-menu button,
body.dark .task-context-submenu button,
html[data-theme="dark"] .task-context-submenu button,
body.dark .board-context-menu button,
html[data-theme="dark"] .board-context-menu button{
background:transparent!important;
color:#f4f8ff!important;
-webkit-text-fill-color:#f4f8ff!important;
}
body.dark .task-context-menu button:hover,
html[data-theme="dark"] .task-context-menu button:hover,
body.dark .task-context-submenu button:hover,
html[data-theme="dark"] .task-context-submenu button:hover,
body.dark .board-context-menu button:hover,
html[data-theme="dark"] .board-context-menu button:hover{
background:#203652!important;
color:#fff!important;
-webkit-text-fill-color:#fff!important;
}
body.dark .task-context-menu .context-separator,
html[data-theme="dark"] .task-context-menu .context-separator{
background:#3b526f!important;
border-color:#3b526f!important;
}
/* Shipment cards are clickable details, while only the handle starts drag. */
.planner-shipping-card[data-planner-shipping]{
cursor:pointer!important;
pointer-events:auto!important;
}
.planner-shipping-card[data-planner-shipping] .shipping-drag-handle{cursor:grab!important}
.planner-shipping-detail-modal{z-index:100000!important}
/* Correcto Team v4.20.5 — global header + responsive shipment details */
#appHeader.app-header,.app-header.warm-header{display:grid!important;visibility:visible!important;opacity:1!important;position:sticky!important;top:0!important;z-index:90000!important;width:100%!important}
body.razvoz-standalone .app-header .main-nav,
body.razvoz-standalone .app-header .global-search,
body.razvoz-standalone .app-header .header-tools>*{display:flex!important}
body.razvoz-standalone .app-header .global-search{display:block!important}
body.razvoz-standalone .app-header{grid-template-columns:auto minmax(420px,1fr) auto!important}
.planner-shipping-detail-panel{width:min(1040px,calc(100vw - 32px))!important;max-height:94dvh!important}
.shipping-order-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid #dfe5ee;border-radius:14px;background:#f8fafc}
.shipping-order-summary>strong{font-size:20px}.shipping-status-pill{display:inline-flex;padding:6px 10px;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-weight:800;text-transform:uppercase;font-size:12px}
.shipping-task-detail-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.shipping-task-detail-grid .wide{grid-column:1/-1!important}
.shipping-task-detail-grid strong,.shipping-task-detail-grid p{overflow-wrap:anywhere}
.shipping-item-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:16px!important}
.shipping-item-row>span{display:grid;gap:4px}.shipping-item-row small{color:#64748b}.shipping-item-values{text-align:right;white-space:nowrap}
body.dark .shipping-order-summary{background:#132a45;border-color:#29415f}.dark .shipping-status-pill{background:#1d4ed8;color:#fff}.dark .shipping-item-row small{color:#a9bad0}
@media(max-width:1250px){
#appHeader.app-header,.app-header.warm-header,body.razvoz-standalone .app-header{grid-template-columns:auto 1fr!important}
#appHeader .header-tools{min-width:0!important}.global-search{width:min(360px,34vw)!important}
}
@media(max-width:900px){
body.razvoz-standalone .app-header .main-nav{display:none!important}
body.razvoz-standalone.mobile-nav-open .app-header .main-nav{display:flex!important}
body.razvoz-standalone .app-header .global-search{display:none!important}
.planner-shipping-detail-modal{padding:8px!important;align-items:end!important}
.planner-shipping-detail-panel{width:100%!important;max-height:96dvh!important;border-radius:20px 20px 0 0!important}
.shipping-task-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:560px){
.planner-shipping-detail-modal{padding:0!important}
.planner-shipping-detail-panel>header{padding:12px 14px!important}.planner-shipping-detail-content{padding:12px!important;gap:11px!important}
.shipping-task-detail-grid{grid-template-columns:1fr!important}.shipping-task-detail-grid .wide{grid-column:auto!important}
.shipping-order-summary{align-items:flex-start;flex-direction:column}.shipping-order-summary>strong{font-size:18px}
.shipping-item-row{grid-template-columns:1fr!important}.shipping-item-values{text-align:left!important;display:flex!important;justify-content:space-between!important}
.planner-shipping-detail-panel>footer{position:sticky;bottom:0;grid-template-columns:1fr!important}.planner-shipping-detail-panel>footer button{width:100%!important}
}
/* Correcto Team v4.20.6 — isolated WooCommerce shipment details patch */
.planner-shipping-detail-panel .shipping-task-items{display:grid;gap:12px;padding:14px;border:1px solid #dfe5ee;border-radius:16px}
.planner-shipping-detail-panel .shipping-task-items>strong{font-size:16px}
.planner-shipping-detail-panel .shipping-item-row{display:grid!important;grid-template-columns:minmax(220px,1.2fr) minmax(420px,2fr)!important;gap:16px!important;align-items:start!important;padding:14px!important;border:1px solid #e3e8f0!important;border-radius:14px!important}
.planner-shipping-detail-panel .shipping-item-main{display:grid;gap:6px;min-width:0}
.planner-shipping-detail-panel .shipping-item-main b,.planner-shipping-detail-panel .shipping-item-main small{overflow-wrap:anywhere}
.planner-shipping-detail-panel .shipping-item-metrics{display:grid;grid-template-columns:repeat(5,minmax(105px,1fr));gap:8px}
.planner-shipping-detail-panel .shipping-item-metrics>span{display:grid;gap:4px;padding:9px;border-radius:10px;background:#f6f8fb;min-width:0}
.planner-shipping-detail-panel .shipping-item-metrics small{font-size:11px;color:#64748b}
.planner-shipping-detail-panel .shipping-item-metrics b{font-size:13px;overflow-wrap:anywhere}
[data-theme="dark"] .planner-shipping-detail-panel .shipping-item-row,body.dark .planner-shipping-detail-panel .shipping-item-row{border-color:#29415f!important}
[data-theme="dark"] .planner-shipping-detail-panel .shipping-item-metrics>span,body.dark .planner-shipping-detail-panel .shipping-item-metrics>span{background:#102238}
[data-theme="dark"] .planner-shipping-detail-panel .shipping-item-metrics small,body.dark .planner-shipping-detail-panel .shipping-item-metrics small{color:#a9bad0}
@media(max-width:900px){.planner-shipping-detail-panel .shipping-item-row{grid-template-columns:1fr!important}.planner-shipping-detail-panel .shipping-item-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.planner-shipping-detail-panel .shipping-item-metrics{grid-template-columns:1fr}.planner-shipping-detail-panel .shipping-item-row{padding:11px!important}.planner-shipping-detail-panel .shipping-task-items{padding:10px}}
/* Correcto Team v4.20.7 — premium WooCommerce-style shipment modal */
.premium-shipping-modal{width:min(1120px,calc(100vw - 28px))!important;background:#f7f9fc!important}
.premium-shipping-header{background:#fff!important;border-bottom:1px solid #e3e8f0!important}
.premium-shipping-title-wrap{display:flex;align-items:center;gap:12px}.premium-shipping-eyebrow{margin:0 0 3px!important;font-size:11px!important;font-weight:800!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:#64748b!important}.premium-shipping-title-wrap h2{margin:0!important}
.premium-shipping-close{width:40px!important;height:40px!important;border-radius:12px!important;font-size:28px!important}
.premium-shipping-content{display:grid!important;gap:16px!important;padding:18px!important;background:#f7f9fc!important}
.premium-shipping-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;border:1px solid #dfe5ee;border-radius:18px;background:#fff}.premium-shipping-hero h3{font-size:22px;margin:10px 0 2px}.premium-shipping-hero p{margin:0;color:#64748b}.premium-shipping-total{text-align:right;display:grid;gap:4px}.premium-shipping-total small{color:#64748b}.premium-shipping-total strong{font-size:25px}
.premium-shipping-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}.premium-shipping-card{padding:20px;border:1px solid #dfe5ee;border-radius:18px;background:#fff;min-width:0}.premium-shipping-card-title{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid #edf0f5}.premium-shipping-card-title>span{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#eef4ff;font-size:19px}.premium-shipping-card-title small,.premium-section-heading small,.premium-shipping-note small{font-size:10px;font-weight:900;letter-spacing:.09em;color:#64748b}.premium-shipping-card-title h3,.premium-section-heading h3{margin:2px 0 0;font-size:18px}
.premium-shipping-address-block{display:grid;gap:5px;padding:17px 0;font-size:15px}.premium-shipping-address-block strong{font-size:17px}.premium-shipping-address-block span{overflow-wrap:anywhere}.delivery-address .delivery-street,.delivery-address .delivery-city{font-weight:800;color:#1d4ed8;font-size:16px}
.premium-shipping-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.premium-shipping-contact-grid>div{display:grid;gap:4px;min-width:0}.premium-shipping-contact-grid .wide{grid-column:1/-1}.premium-shipping-contact-grid small,.premium-order-meta small,.premium-item-facts small{color:#64748b}.premium-shipping-contact-grid a,.premium-shipping-contact-grid strong{overflow-wrap:anywhere;color:inherit}.premium-shipping-contact-grid a{color:#2957e8;text-decoration:none}.premium-map-link{display:inline-flex!important;align-items:center;justify-content:center;min-height:40px;padding:9px 12px;border-radius:10px;background:#eaf2ff;color:#1d4ed8!important;font-weight:800}
.premium-order-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid #dfe5ee;border-radius:16px;overflow:hidden;background:#dfe5ee}.premium-order-meta>div{display:grid;gap:4px;padding:13px 15px;background:#fff}
.premium-shipping-items{display:grid;gap:12px;padding:18px;border:1px solid #dfe5ee;border-radius:18px;background:#fff}.premium-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.premium-section-heading>span{padding:6px 10px;border-radius:999px;background:#eef4ff;color:#1d4ed8;font-weight:800;font-size:12px}.premium-shipping-item{display:grid;grid-template-columns:minmax(220px,1.1fr) minmax(540px,2fr);gap:16px;padding:14px;border:1px solid #e3e8f0;border-radius:14px}.premium-item-identity{display:grid;align-content:center;gap:6px;min-width:0}.premium-item-identity strong,.premium-item-identity span{overflow-wrap:anywhere}.premium-item-identity span{color:#64748b}.premium-item-facts{display:grid;grid-template-columns:repeat(5,minmax(105px,1fr));gap:8px}.premium-item-facts>div{display:grid;gap:4px;padding:10px;border-radius:11px;background:#f5f7fb;min-width:0}.premium-item-facts strong{overflow-wrap:anywhere}.premium-empty-state{padding:18px;border:1px dashed #cbd5e1;border-radius:12px;text-align:center;color:#64748b}.premium-shipping-note{padding:15px 17px;border:1px solid #fde68a;border-radius:14px;background:#fffbeb}.premium-shipping-note p{margin:6px 0 0;white-space:pre-wrap}
[data-theme="dark"] .premium-shipping-modal,body.dark .premium-shipping-modal,[data-theme="dark"] .premium-shipping-content,body.dark .premium-shipping-content{background:#09192b!important}[data-theme="dark"] .premium-shipping-header,body.dark .premium-shipping-header,[data-theme="dark"] .premium-shipping-hero,body.dark .premium-shipping-hero,[data-theme="dark"] .premium-shipping-card,body.dark .premium-shipping-card,[data-theme="dark"] .premium-order-meta>div,body.dark .premium-order-meta>div,[data-theme="dark"] .premium-shipping-items,body.dark .premium-shipping-items{background:#102238!important;border-color:#29415f!important}[data-theme="dark"] .premium-order-meta,body.dark .premium-order-meta{background:#29415f;border-color:#29415f}[data-theme="dark"] .premium-item-facts>div,body.dark .premium-item-facts>div{background:#0b1c30}[data-theme="dark"] .premium-shipping-item,body.dark .premium-shipping-item{border-color:#29415f}[data-theme="dark"] .premium-shipping-card-title,body.dark .premium-shipping-card-title{border-color:#29415f}[data-theme="dark"] .premium-shipping-card-title>span,body.dark .premium-shipping-card-title>span{background:#183657}[data-theme="dark"] .premium-shipping-note,body.dark .premium-shipping-note{background:#33270b;border-color:#665216}
@media(max-width:900px){.premium-shipping-content{padding:13px!important}.premium-shipping-columns{grid-template-columns:1fr}.premium-order-meta{grid-template-columns:repeat(2,1fr)}.premium-shipping-item{grid-template-columns:1fr}.premium-item-facts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.premium-shipping-content{padding:10px!important}.premium-shipping-hero{align-items:flex-start;flex-direction:column;padding:15px}.premium-shipping-total{text-align:left}.premium-shipping-total strong{font-size:21px}.premium-shipping-card{padding:15px}.premium-shipping-contact-grid,.premium-order-meta{grid-template-columns:1fr}.premium-shipping-contact-grid .wide{grid-column:auto}.premium-item-facts{grid-template-columns:1fr}.premium-shipping-items{padding:12px}.premium-shipping-item{padding:11px}}
/* Correcto Team v4.20.9 — mobile navigation, scroll, context contrast and completed ordering UX */
body:not(.dark) .context-menu,
body:not(.dark) .task-context-menu,
body:not(.dark) .board-context-menu{
background:#ffffff!important;
color:#172033!important;
border:1px solid #d8e0eb!important;
box-shadow:0 18px 48px rgba(22,34,55,.22)!important;
}
body:not(.dark) .context-menu button,
body:not(.dark) .task-context-menu button,
body:not(.dark) .board-context-menu button{
color:#172033!important;
background:transparent!important;
}
body:not(.dark) .context-menu button:hover,
body:not(.dark) .task-context-menu button:hover,
body:not(.dark) .board-context-menu button:hover{
color:#0b57d0!important;
background:#edf5ff!important;
}
body:not(.dark) .context-menu .danger,
body:not(.dark) .task-context-menu .danger{color:#c62828!important}
body:not(.dark) .context-menu .divider,
body:not(.dark) .task-context-menu .context-separator{background:#e4e9f0!important}
body.dark .context-menu,
body.dark .task-context-menu,
body.dark .board-context-menu{background:#101c2e!important;border-color:#31445f!important;color:#f3f7fc!important}
body.dark .context-menu button,
body.dark .task-context-menu button,
body.dark .board-context-menu button{color:#f3f7fc!important}
body.dark .context-menu button:hover,
body.dark .task-context-menu button:hover,
body.dark .board-context-menu button:hover{background:#203653!important;color:#fff!important}
@media(max-width:760px){
.mobile-bottom-nav{
display:grid!important;
grid-template-columns:repeat(5,1fr)!important;
position:fixed!important;
left:10px!important;right:10px!important;
bottom:calc(8px + env(safe-area-inset-bottom))!important;
z-index:95000!important;
padding:7px!important;
border:1px solid rgba(211,221,233,.92)!important;
border-radius:19px!important;
background:rgba(255,255,255,.94)!important;
box-shadow:0 16px 42px rgba(20,34,55,.22)!important;
backdrop-filter:blur(18px)!important;
}
body.dark .mobile-bottom-nav{background:rgba(15,27,45,.96)!important;border-color:#30445f!important}
.mobile-bottom-nav button{min-width:0!important;min-height:52px!important;border:0!important;border-radius:13px!important;background:transparent!important;color:#657187!important;display:grid!important;place-items:center!important;align-content:center!important;gap:2px!important;padding:5px 2px!important}
.mobile-bottom-nav button span{font-size:19px!important;line-height:1!important}.mobile-bottom-nav button small{font-size:10px!important;font-weight:800!important}
.mobile-bottom-nav button.active,.mobile-bottom-nav button:active{background:#eaf4ff!important;color:#1267c4!important}
body.dark .mobile-bottom-nav button{color:#aebdd0!important}body.dark .mobile-bottom-nav button.active,body.dark .mobile-bottom-nav button:active{background:#183552!important;color:#75c9ff!important}
.app-main{padding-bottom:calc(88px + env(safe-area-inset-bottom))!important}
.board-columns-panel,.board-mobile-split,#pageContent{min-height:0!important}
.board-kanban-dashboard{height:calc(100dvh - 218px)!important;max-height:calc(100dvh - 218px)!important;min-height:360px!important;overflow-x:auto!important;overflow-y:hidden!important;align-items:stretch!important;scroll-snap-type:x mandatory!important;-webkit-overflow-scrolling:touch!important}
.board-kanban-dashboard .board-kanban-column{height:100%!important;max-height:100%!important;min-height:0!important;display:flex!important;flex-direction:column!important;scroll-snap-align:center!important;overflow:hidden!important}
.board-kanban-dashboard .board-column-list{flex:1 1 auto!important;min-height:0!important;height:auto!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-y:contain!important;touch-action:pan-y!important;padding-bottom:90px!important}
.board-kanban-dashboard .column-create-tools{flex:0 0 auto!important;position:sticky!important;bottom:0!important;z-index:4!important}
body.mobile-nav-open{overflow:hidden!important}
body.mobile-nav-open::after{content:""!important;position:fixed!important;inset:0!important;background:rgba(8,14,24,.48)!important;z-index:89990!important;backdrop-filter:blur(2px)!important}
body.mobile-nav-open #appHeader .main-nav{
display:flex!important;position:fixed!important;z-index:90010!important;top:64px!important;left:10px!important;right:auto!important;bottom:calc(84px + env(safe-area-inset-bottom))!important;width:min(88vw,360px)!important;
padding:14px!important;border-radius:18px!important;background:#fff!important;border:1px solid #dbe3ed!important;box-shadow:0 22px 60px rgba(9,20,36,.28)!important;overflow-y:auto!important;flex-direction:column!important;align-items:stretch!important;gap:7px!important
}
body.dark.mobile-nav-open #appHeader .main-nav{background:#111f33!important;border-color:#30445f!important}
body.mobile-nav-open #appHeader .main-nav>.nav-button,
body.mobile-nav-open #appHeader .main-nav>.dropdown>.dropdown-toggle{width:100%!important;min-height:46px!important;justify-content:flex-start!important;padding:11px 13px!important;border-radius:12px!important;color:#172033!important;background:#f6f8fb!important}
body.dark.mobile-nav-open #appHeader .main-nav>.nav-button,
body.dark.mobile-nav-open #appHeader .main-nav>.dropdown>.dropdown-toggle{color:#f3f7fc!important;background:#192b43!important}
body.mobile-nav-open #appHeader .dropdown{width:100%!important}
body.mobile-nav-open #appHeader .dropdown-menu{position:static!important;display:none!important;width:100%!important;min-width:0!important;margin-top:5px!important;box-shadow:none!important;border-radius:12px!important}
body.mobile-nav-open #appHeader .dropdown.open>.dropdown-menu{display:grid!important}
body.mobile-profile-open::after{content:"";position:fixed;inset:0;background:rgba(8,14,24,.48);z-index:94980;backdrop-filter:blur(2px)}
body.mobile-profile-open .profile-dropdown{display:block!important;position:fixed!important;left:10px!important;right:10px!important;bottom:calc(82px + env(safe-area-inset-bottom))!important;z-index:95010!important}
body.mobile-profile-open .profile-dropdown>.profile-button{display:none!important}
body.mobile-profile-open .profile-dropdown>.profile-menu{display:grid!important;position:static!important;width:100%!important;min-width:0!important;padding:10px!important;border-radius:18px!important;background:#fff!important;border:1px solid #dbe3ed!important;box-shadow:0 22px 60px rgba(9,20,36,.30)!important}
body.dark.mobile-profile-open .profile-dropdown>.profile-menu{background:#111f33!important;border-color:#30445f!important}
body.mobile-profile-open .profile-menu button{min-height:46px!important;border-radius:11px!important;text-align:left!important;padding:11px 13px!important;color:#172033!important}
body.dark.mobile-profile-open .profile-menu button{color:#f3f7fc!important}
}
/* Correcto Team v4.20.9 — definitive mobile profile, board chooser and column scroll */
@media(max-width:760px){
body{padding-bottom:calc(84px + env(safe-area-inset-bottom))!important}
#appHeader.app-header{
min-height:58px!important;height:58px!important;padding:7px 10px!important;
grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;
background:color-mix(in srgb,var(--surface) 96%,transparent)!important;
backdrop-filter:blur(18px)!important;border-bottom:1px solid var(--border)!important;
}
#appHeader .brand-wrap{min-width:0!important}
#appHeader .brand{min-width:0!important;gap:7px!important}
#appHeader .brand>span:nth-child(2){font-size:17px!important;white-space:nowrap!important}
#appHeader .brand small{display:none!important}
#appHeader .mobile-nav-toggle{display:flex!important;width:38px!important;height:38px!important;border-radius:12px!important}
#appHeader .header-tools{display:flex!important;justify-content:flex-end!important;min-width:0!important}
#appHeader .header-tools>*:not(.profile-dropdown){display:none!important}
#appHeader .profile-dropdown{display:block!important;position:relative!important}
#appHeader .profile-button{width:42px!important;height:42px!important;min-width:42px!important;padding:2px!important;border-radius:50%!important;border:2px solid color-mix(in srgb,var(--primary) 25%,var(--border))!important;background:var(--surface)!important;box-shadow:0 7px 20px rgba(15,23,42,.12)!important}
#appHeader .profile-button .avatar{width:34px!important;height:34px!important;font-size:12px!important}
#appHeader .profile-button .profile-copy,#appHeader .profile-button>span:last-child{display:none!important}
#appHeader .profile-dropdown.open>.profile-menu,
body.mobile-profile-open #appHeader .profile-dropdown>.profile-menu{
display:grid!important;position:fixed!important;top:64px!important;right:10px!important;left:auto!important;
width:min(340px,calc(100vw - 20px))!important;max-height:calc(100dvh - 82px)!important;overflow-y:auto!important;
padding:10px!important;gap:5px!important;border-radius:20px!important;background:#fff!important;border:1px solid #d8e1ec!important;
box-shadow:0 24px 70px rgba(9,20,36,.28)!important;z-index:100500!important
}
body.dark #appHeader .profile-dropdown.open>.profile-menu,
body.dark.mobile-profile-open #appHeader .profile-dropdown>.profile-menu{background:#101d30!important;border-color:#31455f!important}
.profile-menu-user{display:flex!important;align-items:center!important;gap:11px!important;padding:9px 9px 13px!important;border-bottom:1px solid #e5eaf1!important;margin-bottom:3px!important}
body.dark .profile-menu-user{border-color:#2d4059!important}
.profile-menu-user .avatar{width:42px!important;height:42px!important}.profile-menu-user div{display:grid!important;min-width:0!important}.profile-menu-user strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-menu-user small{color:#718096!important}
#appHeader .profile-menu button{display:grid!important;grid-template-columns:26px 1fr auto!important;align-items:center!important;gap:8px!important;min-height:47px!important;padding:9px 11px!important;border-radius:12px!important;text-align:left!important;color:#172033!important;background:transparent!important}
#appHeader .profile-menu button:hover,#appHeader .profile-menu button:active{background:#edf5ff!important;color:#0b57d0!important}
body.dark #appHeader .profile-menu button{color:#eef5ff!important}body.dark #appHeader .profile-menu button:hover{background:#203653!important;color:#fff!important}
#profileNotificationToggle em{font-style:normal!important;font-size:10px!important;font-weight:900!important;padding:4px 7px!important;border-radius:999px!important;background:#edf1f5!important;color:#687386!important}
#profileNotificationToggle.is-enabled em{background:#dcfce7!important;color:#15803d!important}
.profile-build-info{display:grid!important;gap:2px!important;margin:5px 2px!important;padding:10px 12px!important;border-radius:12px!important;background:#f5f7fa!important;color:#5f6d80!important}
body.dark .profile-build-info{background:#17273d!important;color:#aebdd0!important}.profile-build-info strong{font-size:11px!important}.profile-build-info small{font-size:10px!important}
#appHeader .profile-menu .profile-logout{color:#c62828!important;border-top:1px solid #e5eaf1!important;margin-top:3px!important;border-radius:0 0 12px 12px!important}
.mobile-bottom-nav{grid-template-columns:repeat(5,minmax(0,1fr))!important;left:8px!important;right:8px!important;bottom:calc(7px + env(safe-area-inset-bottom))!important;min-height:65px!important;padding:6px!important;border-radius:20px!important}
.mobile-bottom-nav button{min-height:51px!important;border-radius:14px!important}
.board-columns-panel{min-height:0!important;overflow:hidden!important}
#boardKanbanDashboard.board-kanban-dashboard{
height:calc(100dvh - var(--app-header-height,58px) - 170px)!important;
max-height:none!important;min-height:360px!important;
overflow-x:auto!important;overflow-y:hidden!important;align-items:stretch!important;
touch-action:pan-x!important;overscroll-behavior-x:contain!important
}
#boardKanbanDashboard .board-kanban-column{
height:100%!important;max-height:100%!important;min-height:0!important;
overflow:hidden!important;display:flex!important;flex-direction:column!important
}
#boardKanbanDashboard .board-column-list{
flex:1 1 0!important;height:0!important;min-height:0!important;max-height:none!important;
overflow-y:scroll!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;
overscroll-behavior-y:contain!important;touch-action:pan-y!important;
padding-bottom:110px!important;scrollbar-width:thin!important
}
#boardKanbanDashboard .board-column-list::-webkit-scrollbar{width:5px!important}
#boardKanbanDashboard .board-column-list::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--primary) 35%,transparent)!important;border-radius:99px!important}
#boardKanbanDashboard .column-create-tools,#boardKanbanDashboard .add-task{flex:0 0 auto!important;position:relative!important;bottom:auto!important;margin-bottom:0!important}
.board-entry-window{width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important;border-radius:22px!important}
.board-entry-header{padding:18px!important}.board-entry-header h1{font-size:23px!important}.board-entry-user{display:none!important}
.board-entry-search{padding:12px 16px!important}.board-entry-grid{grid-template-columns:1fr!important;padding:8px 14px 18px!important;overflow-y:auto!important}
.board-entry-card{min-height:84px!important;padding:14px!important}.board-entry-footer{padding:12px 16px!important}.board-entry-footer span{display:none!important}
}
.task-context-menu .reopen-task-action{color:#0b67c2!important;font-weight:850!important}
body.dark .task-context-menu .reopen-task-action{color:#75c9ff!important}
/* =========================================================
Correcto Team v4.21.0 — definitive mobile column scroll,
centered mobile brand, premium profile and desktop header
========================================================= */
@media (max-width:900px){
html,body{height:100%;overflow:hidden!important}
#appView.app-view:not(.hidden){height:100dvh!important;min-height:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
#appHeader.app-header{position:relative!important;flex:0 0 58px!important;height:58px!important;min-height:58px!important;padding:7px 12px!important;display:grid!important;grid-template-columns:44px 1fr 44px!important;align-items:center!important;overflow:visible!important}
#appHeader .brand-wrap{grid-column:1/3!important;display:grid!important;grid-template-columns:44px 1fr!important;align-items:center!important;min-width:0!important}
#appHeader .mobile-nav-toggle{grid-column:1!important;z-index:2!important}
#appHeader .brand{grid-column:1/3!important;justify-self:center!important;position:absolute!important;left:50%!important;transform:translateX(-50%)!important;display:flex!important;align-items:center!important;white-space:nowrap!important;pointer-events:none!important}
#appHeader .brand small{display:none!important}
#appHeader .brand-logo{width:32px!important;height:32px!important;border-radius:10px!important;font-size:17px!important}
#appHeader .brand>span:not(.brand-logo){font-size:18px!important;font-weight:850!important}
#appHeader .header-tools{grid-column:3!important;justify-self:end!important;margin:0!important;min-width:0!important;z-index:5!important}
#appHeader .header-tools>*:not(.profile-dropdown){display:none!important}
#appHeader .profile-button{width:40px!important;height:40px!important;min-width:40px!important;padding:3px!important;border:1px solid var(--border)!important;border-radius:13px!important;background:var(--surface)!important;box-shadow:0 5px 16px rgba(15,23,42,.12)!important}
#appHeader .profile-button .avatar{width:32px!important;height:32px!important;font-size:11px!important}
.app-main{flex:1 1 auto!important;min-height:0!important;height:auto!important;overflow:hidden!important;padding:8px 8px calc(70px + env(safe-area-inset-bottom))!important}
#pageContent{height:100%!important;min-height:0!important;overflow:hidden!important}
#pageContent>.board-page,#pageContent>.board-shell,#pageContent>.board-view{height:100%!important;min-height:0!important;overflow:hidden!important}
#boardKanbanDashboard,.board-kanban-dashboard.board-kanban-clean{height:100%!important;min-height:0!important;max-height:none!important;overflow-x:auto!important;overflow-y:hidden!important;align-items:stretch!important;padding-bottom:3px!important;touch-action:pan-x!important}
#boardKanbanDashboard .board-kanban-column,.board-kanban-dashboard.board-kanban-clean .board-kanban-column{
height:100%!important;max-height:100%!important;min-height:0!important;align-self:stretch!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;
}
#boardKanbanDashboard .board-column-list,.board-kanban-dashboard.board-kanban-clean .board-column-list{
flex:1 1 0!important;height:0!important;min-height:0!important;max-height:none!important;overflow-y:scroll!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-y:contain!important;touch-action:pan-y!important;padding-bottom:42px!important;scrollbar-gutter:stable!important;
}
#boardKanbanDashboard .board-column-list::-webkit-scrollbar{display:block!important;width:6px!important}
#boardKanbanDashboard .board-column-list::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--primary) 45%,transparent)!important;border-radius:99px!important}
.mobile-bottom-nav{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.profile-dropdown .profile-menu{position:fixed!important;top:64px!important;right:10px!important;left:auto!important;width:min(330px,calc(100vw - 20px))!important;max-height:calc(100dvh - 82px)!important;overflow-y:auto!important;padding:10px!important;border-radius:18px!important;box-shadow:0 22px 60px rgba(15,23,42,.28)!important;z-index:500!important}
.profile-menu-user{padding:13px!important;border-radius:14px!important;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 12%,var(--surface)),var(--surface-2))!important;margin-bottom:8px!important}
.profile-menu>button{display:grid!important;grid-template-columns:36px minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;column-gap:10px!important;align-items:center!important;width:100%!important;padding:10px 11px!important;border-radius:12px!important;text-align:left!important}
.profile-menu>button .profile-menu-icon{grid-row:1/3!important;width:34px!important;height:34px!important;display:grid!important;place-items:center!important;border-radius:10px!important;background:var(--surface-2)!important;font-size:17px!important}
.profile-menu>button b{grid-column:2!important;font-size:13px!important}
.profile-menu>button small{grid-column:2!important;font-size:10.5px!important;color:var(--muted)!important}
.profile-menu>button em{grid-column:3!important;grid-row:1/3!important;align-self:center!important}
.profile-build-info{margin:8px 2px!important;padding:10px 12px!important;border-radius:12px!important;background:var(--surface-2)!important}
}
@media (min-width:901px){
#appHeader.app-header.warm-header{min-height:74px!important;padding:10px 22px!important;background:#fffaf5!important;border-bottom:1px solid #eadfd2!important;box-shadow:0 8px 24px rgba(82,57,38,.08)!important}
body.dark #appHeader.app-header.warm-header{background:#111827!important;border-bottom-color:#263244!important}
#appHeader .brand{gap:10px!important}
#appHeader .brand-logo{width:38px!important;height:38px!important;border-radius:11px!important;background:#ff7a1a!important;font-size:20px!important}
#appHeader .brand>span:not(.brand-logo){font-size:22px!important;color:#3976ff!important;font-weight:900!important}
#appHeader .brand small{padding:5px 9px!important;border-radius:999px!important;background:#eaf5fb!important;color:#1677a8!important;font-size:10px!important}
#appHeader .main-nav{gap:8px!important}
#appHeader .main-nav button{font-weight:800!important}
#appHeader .global-search input{height:46px!important;border-radius:12px!important;background:#fff!important}
#appHeader .header-icon-button{width:46px!important;height:46px!important;border-radius:12px!important;background:#fffaf5!important;border:1px solid #eadfd2!important}
#appHeader .profile-button{height:48px!important;border-radius:13px!important;background:#fffaf5!important;border:1px solid #eadfd2!important;color:#111827!important}
.profile-menu{min-width:310px!important;padding:10px!important;border-radius:16px!important}
.profile-menu>button{display:grid!important;grid-template-columns:34px 1fr auto!important;grid-template-rows:auto auto!important;column-gap:9px!important;align-items:center!important;padding:10px!important;border-radius:11px!important;text-align:left!important}
.profile-menu>button .profile-menu-icon{grid-row:1/3!important;width:32px!important;height:32px!important;display:grid!important;place-items:center!important;border-radius:9px!important;background:var(--surface-2)!important}
.profile-menu>button b{grid-column:2!important}.profile-menu>button small{grid-column:2!important;color:var(--muted)!important;font-size:10px!important}.profile-menu>button em{grid-column:3!important;grid-row:1/3!important}
}
/* =========================================================
Correcto Team v4.21.1 — premium navigation system
========================================================= */
#appHeader.app-header.warm-header{
--menu-ink:#182033;--menu-muted:#6f7a8d;--menu-line:#e8dfd5;--menu-accent:#2f73f6;
background:linear-gradient(180deg,#fffdfb 0%,#fff8f1 100%)!important;
border-bottom:1px solid var(--menu-line)!important;
box-shadow:0 10px 32px rgba(85,58,35,.09)!important;
}
body.dark #appHeader.app-header.warm-header{
--menu-ink:#f6f8fc;--menu-muted:#9dacbf;--menu-line:#2a374b;
background:linear-gradient(180deg,#152033 0%,#101827 100%)!important;
}
.premium-brand{border:0;background:transparent;color:inherit;cursor:pointer}
.premium-brand .brand-copy{display:inline-flex;gap:6px;align-items:center;letter-spacing:-.03em}
.premium-brand .brand-copy strong{color:#3976ff;font-weight:900}.premium-brand .brand-copy b{color:#1178b8;font-weight:900}
#appHeader .main-nav{display:flex;align-items:center;gap:5px}
#appHeader .nav-button,#appHeader .main-nav>.dropdown>.dropdown-toggle{
min-height:42px;padding:0 12px!important;border:1px solid transparent!important;border-radius:12px!important;
color:var(--menu-ink)!important;background:transparent!important;font-size:13px!important;font-weight:800!important;
}
#appHeader .nav-button:hover,#appHeader .main-nav>.dropdown>.dropdown-toggle:hover,#appHeader .dropdown.open>.dropdown-toggle{
background:#ffffff!important;border-color:#eadfd3!important;box-shadow:0 5px 15px rgba(71,49,31,.08)!important
}
body.dark #appHeader .nav-button:hover,body.dark #appHeader .main-nav>.dropdown>.dropdown-toggle:hover,body.dark #appHeader .dropdown.open>.dropdown-toggle{background:#1c2a40!important;border-color:#33435a!important}
.premium-header-tools{display:flex!important;align-items:center!important;gap:8px!important}
.premium-create-button{height:44px;padding:0 14px;border:0;border-radius:13px;background:linear-gradient(135deg,#3976ff,#2165e9);color:white;font-weight:850;box-shadow:0 8px 20px rgba(57,118,255,.25)}
.premium-create-button span{font-size:19px;margin-right:5px}.premium-create-button:hover{transform:translateY(-1px);box-shadow:0 11px 24px rgba(57,118,255,.32)}
.premium-global-search{position:relative;width:min(390px,28vw)!important}.premium-global-search .search-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);z-index:2;color:#758196;font-size:17px}
#appHeader .premium-global-search input{height:44px!important;padding:0 14px 0 39px!important;border:1px solid #e1e6ee!important;border-radius:13px!important;background:#fff!important;color:#172033!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important}
body.dark #appHeader .premium-global-search input{background:#17243a!important;border-color:#33445d!important;color:#f4f7fb!important}
#appHeader .command-palette-trigger{height:44px!important;border-radius:13px!important;background:#fff!important;border:1px solid #e7ddd2!important;color:#172033!important}
body.dark #appHeader .command-palette-trigger{background:#17243a!important;border-color:#33445d!important;color:#f4f7fb!important}
#appHeader .header-icon-button{position:relative;width:44px!important;height:44px!important;border-radius:13px!important;background:#fff!important;border:1px solid #e7ddd2!important;color:#172033!important}
body.dark #appHeader .header-icon-button{background:#17243a!important;border-color:#33445d!important;color:#f4f7fb!important}
#appHeader .profile-button{min-width:172px!important;height:46px!important;padding:4px 8px!important;border-radius:14px!important;background:#fff!important;border:1px solid #e7ddd2!important;color:#172033!important}
body.dark #appHeader .profile-button{background:#17243a!important;border-color:#33445d!important;color:#f4f7fb!important}
#appHeader .profile-copy{min-width:0;text-align:left}#appHeader .profile-copy strong{display:block;max-width:115px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#appHeader .profile-copy small{color:var(--menu-muted)}
#appHeader .dropdown-menu{border:1px solid #e4e9f0!important;border-radius:16px!important;background:#fff!important;box-shadow:0 22px 55px rgba(23,32,51,.18)!important;padding:8px!important}
body.dark #appHeader .dropdown-menu{background:#152238!important;border-color:#33445d!important}
#appHeader .dropdown-menu button{border-radius:10px!important;color:var(--menu-ink)!important}#appHeader .dropdown-menu button:hover{background:#f1f5fb!important}body.dark #appHeader .dropdown-menu button:hover{background:#21324b!important}
@media(min-width:901px) and (max-width:1370px){
.premium-create-button b,.command-palette-trigger b,.command-palette-trigger kbd{display:none!important}
.premium-create-button{width:44px;padding:0!important}.premium-create-button span{margin:0}
#appHeader .profile-button{min-width:48px!important}.profile-copy{display:none!important}
.premium-global-search{width:min(310px,25vw)!important}
}
@media(max-width:900px){
#appHeader.app-header.warm-header{background:linear-gradient(180deg,#fffdfb,#fff8f1)!important;box-shadow:0 6px 18px rgba(85,58,35,.08)!important}
body.dark #appHeader.app-header.warm-header{background:linear-gradient(180deg,#152033,#101827)!important}
#appHeader .premium-brand{pointer-events:auto!important}
#appHeader .premium-brand .brand-logo{display:none!important}
#appHeader .premium-brand .brand-copy{font-size:19px!important}
#appHeader .premium-header-tools>*:not(.profile-dropdown){display:none!important}
#appHeader .profile-button{min-width:40px!important;width:40px!important;height:40px!important;padding:3px!important;background:transparent!important;border-color:transparent!important;box-shadow:none!important}
#appHeader .main-nav{top:58px!important;left:8px!important;right:8px!important;width:auto!important;border-radius:18px!important;padding:10px!important;background:var(--surface)!important;border:1px solid var(--border)!important;box-shadow:0 24px 55px rgba(15,23,42,.24)!important}
#appHeader .main-nav .nav-button,#appHeader .main-nav>.dropdown>.dropdown-toggle{width:100%!important;justify-content:flex-start!important;min-height:46px!important;background:var(--surface2)!important;margin-bottom:5px!important}
}
/* =========================================================
Correcto Team v4.21.3 — fully responsive premium header
Prevents viewport overflow on desktop, laptop, tablet and phone.
========================================================= */
#appHeader,
#appHeader *{box-sizing:border-box}
#appHeader.app-header.warm-header{
width:100%!important;
max-width:100vw!important;
min-width:0!important;
overflow:visible!important;
grid-template-columns:minmax(205px,auto) minmax(0,1fr) minmax(0,auto)!important;
column-gap:clamp(6px,.75vw,14px)!important;
padding-inline:clamp(8px,1.1vw,22px)!important;
}
#appHeader .premium-brand-wrap,
#appHeader .premium-brand,
#appHeader .main-nav,
#appHeader .premium-header-tools{min-width:0!important;max-width:100%!important}
#appHeader .premium-brand{display:flex!important;align-items:center!important;overflow:hidden!important}
#appHeader .brand-copy{min-width:0!important;white-space:nowrap!important}
#appHeader .premium-header-tools{justify-content:flex-end!important;overflow:visible!important}
#appHeader .premium-global-search{min-width:150px!important;max-width:390px!important;width:clamp(150px,21vw,390px)!important}
#appHeader .command-palette-trigger,
#appHeader .premium-create-button,
#appHeader .header-icon-button,
#appHeader .profile-button{flex:0 0 auto!important}
#appHeader .main-nav>.nav-button,
#appHeader .main-nav>.dropdown>.dropdown-toggle{max-width:100%!important}
/* Large desktop: retain all controls while allowing search/profile to shrink. */
@media(min-width:1451px) and (max-width:1780px){
#appHeader.app-header.warm-header{grid-template-columns:minmax(190px,auto) minmax(0,1fr) minmax(500px,auto)!important}
#appHeader .premium-global-search{width:clamp(170px,18vw,300px)!important}
#appHeader .premium-create-button{padding-inline:11px!important}
#appHeader .command-palette-trigger{padding-inline:10px!important}
#appHeader .profile-button{min-width:145px!important;max-width:165px!important}
#appHeader .profile-copy strong{max-width:95px!important}
#appHeader .nav-button,
#appHeader .main-nav>.dropdown>.dropdown-toggle{padding-inline:9px!important;font-size:12.5px!important}
}
/* Compact desktop/laptop: use icon-first tools before switching to drawer. */
@media(min-width:1451px) and (max-width:1580px){
#appHeader .premium-create-button b,
#appHeader .command-palette-trigger b,
#appHeader .command-palette-trigger kbd{display:none!important}
#appHeader .premium-create-button,
#appHeader .command-palette-trigger{width:44px!important;padding:0!important;display:grid!important;place-items:center!important}
#appHeader .premium-create-button span{margin:0!important}
#appHeader .profile-button{min-width:48px!important;width:48px!important;padding:4px!important}
#appHeader .profile-copy,
#appHeader .profile-button>span:last-child{display:none!important}
#appHeader .premium-global-search{width:clamp(170px,19vw,270px)!important}
}
/* Drawer range: header itself always remains inside viewport. */
@media(max-width:1450px){
#appHeader.app-header.warm-header{
grid-template-columns:minmax(180px,auto) minmax(0,1fr)!important;
width:100%!important;max-width:100%!important;
}
#appHeader .premium-header-tools{
grid-column:2!important;
width:100%!important;
grid-template-columns:auto auto minmax(150px,1fr) auto auto auto auto!important;
}
#appHeader .premium-global-search{width:100%!important;max-width:none!important}
#appHeader .main-nav{max-width:min(360px,92vw)!important}
}
/* Tablet: keep logo, quick controls and profile without clipping. */
@media(max-width:1100px){
#appHeader .premium-header-tools{display:flex!important;width:auto!important;justify-content:flex-end!important}
#appHeader .premium-header-tools>.premium-create-button,
#appHeader .premium-header-tools>.command-palette-trigger,
#appHeader .premium-header-tools>.premium-global-search{display:none!important}
#appHeader .profile-button{min-width:44px!important;width:44px!important}
#appHeader .profile-copy,
#appHeader .profile-button>span:last-child{display:none!important}
}
/* Phone: centered brand, hamburger left, avatar right, no edge overflow. */
@media(max-width:900px){
#appHeader.app-header.warm-header{
position:sticky!important;
grid-template-columns:44px minmax(0,1fr) 44px!important;
gap:4px!important;
padding:7px max(8px,env(safe-area-inset-right)) 7px max(8px,env(safe-area-inset-left))!important;
overflow:visible!important;
}
#appHeader .premium-brand-wrap{display:contents!important}
#appHeader .mobile-nav-toggle{grid-column:1!important;grid-row:1!important;justify-self:start!important;display:grid!important}
#appHeader .premium-brand{grid-column:2!important;grid-row:1!important;justify-self:center!important;max-width:100%!important;padding:0!important}
#appHeader .premium-brand .brand-copy{font-size:clamp(16px,5vw,20px)!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important}
#appHeader .premium-brand small,
#appHeader .premium-brand .brand-logo{display:none!important}
#appHeader .premium-header-tools{grid-column:3!important;grid-row:1!important;justify-self:end!important;width:44px!important;min-width:44px!important;overflow:visible!important}
#appHeader .premium-header-tools>*:not(.profile-dropdown){display:none!important}
#appHeader .profile-dropdown{width:44px!important;min-width:44px!important}
#appHeader .profile-button{width:42px!important;min-width:42px!important;height:42px!important;padding:3px!important}
#appHeader .main-nav{left:8px!important;right:auto!important;width:min(360px,calc(100vw - 16px))!important;max-width:calc(100vw - 16px)!important}
#appHeader .profile-menu{right:8px!important;left:auto!important;width:min(340px,calc(100vw - 16px))!important;max-width:calc(100vw - 16px)!important}
}
@media(max-width:380px){
#appHeader.app-header.warm-header{grid-template-columns:40px minmax(0,1fr) 40px!important;padding-inline:6px!important}
#appHeader .mobile-nav-toggle,
#appHeader .profile-button{width:38px!important;min-width:38px!important;height:38px!important}
#appHeader .premium-brand .brand-copy{font-size:16px!important}
}
/* Correcto Team v4.21.4 — route task controls */
.delivery-stop-actions{
display:flex;
align-items:center;
justify-content:flex-end;
gap:10px;
margin-left:auto;
}
.delivery-stop-quick-actions,
.delivery-stop-route-actions{
display:flex;
align-items:center;
gap:8px;
}
.delivery-stop-quick-actions>a{
width:40px;
min-width:40px;
min-height:40px;
padding:0!important;
display:grid;
place-items:center;
border:1px solid var(--dc-border,var(--border,#d8e0ea));
border-radius:11px;
background:var(--dc-card,var(--surface,#fff));
color:var(--dc-text,var(--text,#172033));
text-decoration:none;
font-size:17px;
font-weight:900;
}
.delivery-stop-route-actions>button,
.delivery-stop-route-actions>.delivery-stop-done{
min-height:40px;
padding:0 14px;
border-radius:11px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
white-space:nowrap;
font-weight:900;
}
.delivery-stop-start{
background:#2674f6!important;
border-color:#2674f6!important;
color:#fff!important;
}
.delivery-stop-pause{
background:#f59e0b!important;
border-color:#f59e0b!important;
color:#fff!important;
}
.delivery-stop-complete{
background:#1faa62!important;
border-color:#1faa62!important;
color:#fff!important;
}
body.dark .delivery-stop-quick-actions>a,
[data-theme="dark"] .delivery-stop-quick-actions>a{
background:#162b45;
color:#f5f8ff;
border-color:#35506f;
}
@media (max-width:640px){
.delivery-stop-actions{
grid-column:1/-1;
width:100%;
display:grid;
grid-template-columns:1fr;
gap:10px;
margin:8px 0 0;
}
.delivery-stop-quick-actions{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
.delivery-stop-quick-actions:has(a:only-child){grid-template-columns:1fr}
.delivery-stop-quick-actions>a{
width:100%;
min-height:44px;
border-radius:12px;
}
.delivery-stop-route-actions{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
.delivery-stop-route-actions>button,
.delivery-stop-route-actions>.delivery-stop-done{
width:100%;
min-width:0;
min-height:48px;
padding:0 8px;
border-radius:12px;
font-size:14px;
}
.delivery-stop-route-actions>.delivery-stop-done:only-child{grid-column:1/-1}
}
@media (min-width:641px) and (max-width:1100px){
.delivery-stop-actions{flex-wrap:wrap}
.delivery-stop-route-actions{margin-left:auto}
}
/* Correcto Team v4.21.6 — highly visible vertical column scrollbar */
@media (max-width: 1100px){
#boardKanbanDashboard.board-kanban-clean .board-column-list,
#boardKanbanDashboard .board-column-list{
scrollbar-width:auto!important;
scrollbar-color:#2f86ff rgba(148,163,184,.20)!important;
scrollbar-gutter:stable!important;
}
#boardKanbanDashboard.board-kanban-clean .board-column-list::-webkit-scrollbar,
#boardKanbanDashboard .board-column-list::-webkit-scrollbar{
display:block!important;
width:13px!important;
}
#boardKanbanDashboard.board-kanban-clean .board-column-list::-webkit-scrollbar-track,
#boardKanbanDashboard .board-column-list::-webkit-scrollbar-track{
background:rgba(148,163,184,.18)!important;
border-radius:999px!important;
box-shadow:inset 0 0 0 1px rgba(100,116,139,.18)!important;
}
#boardKanbanDashboard.board-kanban-clean .board-column-list::-webkit-scrollbar-thumb,
#boardKanbanDashboard .board-column-list::-webkit-scrollbar-thumb{
min-height:54px!important;
background:linear-gradient(180deg,#58b7ff 0%,#2674f6 100%)!important;
border:2px solid rgba(255,255,255,.42)!important;
background-clip:padding-box!important;
border-radius:999px!important;
box-shadow:0 2px 8px rgba(38,116,246,.36)!important;
}
#boardKanbanDashboard.board-kanban-clean .board-column-list::-webkit-scrollbar-thumb:active,
#boardKanbanDashboard .board-column-list::-webkit-scrollbar-thumb:active{
background:linear-gradient(180deg,#72c5ff 0%,#165fe1 100%)!important;
}
body.dark #boardKanbanDashboard.board-kanban-clean .board-column-list,
body.dark #boardKanbanDashboard .board-column-list{
scrollbar-color:#55b9f6 rgba(51,65,85,.52)!important;
}
body.dark #boardKanbanDashboard.board-kanban-clean .board-column-list::-webkit-scrollbar-track,
body.dark #boardKanbanDashboard .board-column-list::-webkit-scrollbar-track{
background:rgba(51,65,85,.54)!important;
box-shadow:inset 0 0 0 1px rgba(148,163,184,.16)!important;
}
body.dark #boardKanbanDashboard.board-kanban-clean .board-column-list::-webkit-scrollbar-thumb,
body.dark #boardKanbanDashboard .board-column-list::-webkit-scrollbar-thumb{
background:linear-gradient(180deg,#67c7ff 0%,#2684ff 100%)!important;
border-color:rgba(15,23,42,.62)!important;
box-shadow:0 2px 10px rgba(56,189,248,.38)!important;
}
}
/* v4.21.7 - global premium navigation, persistent routes and easier task movement */
body.razvoz-standalone .app-header .main-nav,
body.razvoz-standalone .app-header .global-search,
body.razvoz-standalone .app-header .header-tools>*{
display:flex!important;
}
body.razvoz-standalone .app-header{min-height:unset!important;padding:10px 16px!important}
.board-task-actions{gap:5px!important}
.board-task-actions button[data-card-action="move"]{
color:#2563eb!important;
background:rgba(37,99,235,.12)!important;
border-color:rgba(37,99,235,.28)!important;
}
body.dark .board-task-actions button[data-card-action="move"]{
color:#7db8ff!important;
background:rgba(59,130,246,.18)!important;
}
.board-kanban-column.drag-navigation-target{
outline:3px solid #3b82f6!important;
outline-offset:-3px!important;
box-shadow:0 0 0 6px rgba(59,130,246,.14),0 18px 45px rgba(15,23,42,.18)!important;
}
.board-column-list{min-height:180px!important}
.board-column-list:empty::after{content:'Prevuci zadatak ovde';display:grid;place-items:center;min-height:150px;border:2px dashed rgba(59,130,246,.32);border-radius:16px;color:#64748b;font-weight:800}
@media (min-width:901px){
#appHeader.app-header{grid-template-columns:auto minmax(430px,1fr) auto!important;gap:12px!important;padding:8px 14px!important}
#appHeader .main-nav{gap:3px!important;overflow:visible!important}
#appHeader .main-nav>.nav-button,
#appHeader .main-nav>.dropdown>.dropdown-toggle{padding:9px 10px!important;font-size:13px!important}
#appHeader .premium-create-button{padding:10px 14px!important}
#appHeader .premium-global-search{min-width:240px!important;max-width:390px!important}
}
@media (max-width:900px){
body.razvoz-standalone .app-header .global-search,
body.razvoz-standalone .app-header .header-tools>*:not(.profile){display:none!important}
body.razvoz-standalone .app-header{padding:6px 8px!important}
}
/* v4.21.8 - simple whole-column task drop */
#boardKanbanDashboard .board-kanban-column.drag-over:not([data-shipping-column]),
#boardKanbanDashboard .board-kanban-column.drag-navigation-target:not([data-shipping-column]),
#boardKanbanDashboard .board-kanban-column.touch-drop-target:not([data-shipping-column]){
border-color:#3b82f6!important;
box-shadow:0 0 0 4px rgba(59,130,246,.22),0 18px 42px rgba(15,23,42,.18)!important;
}
#boardKanbanDashboard .board-kanban-column.drag-over .board-column-list,
#boardKanbanDashboard .board-kanban-column.drag-navigation-target .board-column-list,
#boardKanbanDashboard .board-kanban-column.touch-drop-target .board-column-list{
background:rgba(59,130,246,.08)!important;
}
#boardKanbanDashboard .task-insert-marker,
#boardKanbanDashboard .task-drop-before::before,
#boardKanbanDashboard .task-drop-after::after{display:none!important;content:none!important;}
/* v4.21.9 - manual shipment items, inline checklist and unified column footer */
.manual-shipping-items-section{border:1px solid var(--border);border-radius:16px;padding:14px;background:color-mix(in srgb,var(--surface2) 78%,var(--surface));display:grid;gap:12px}
.manual-shipping-items-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.manual-shipping-items-head>div{display:grid;gap:3px}.manual-shipping-items-head small{color:var(--muted)}
.manual-shipping-items{display:grid;gap:10px}.manual-shipping-item-row{display:grid;grid-template-columns:minmax(180px,2fr) minmax(100px,1fr) 90px 120px 135px 42px;gap:9px;align-items:end;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.manual-shipping-item-row label{display:grid;gap:5px}.manual-item-remove{height:42px;border:1px solid color-mix(in srgb,#ef4444 45%,var(--border));border-radius:11px;background:color-mix(in srgb,#ef4444 12%,var(--surface));color:#dc2626;font-size:22px;cursor:pointer}
.board-kanban-column>.column-create-tools{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:10px!important;margin-top:auto!important;padding:12px!important;border-top:1px solid var(--border)!important;background:color-mix(in srgb,var(--surface) 94%,transparent)!important}
.board-kanban-column>.column-create-tools>.add-task,.board-kanban-column>.column-create-tools>.column-template-launcher,.board-kanban-column>.column-create-tools .column-template-button{width:100%!important;min-width:0!important;height:48px!important}
.shipping-planner-column>.column-create-tools{grid-template-columns:1fr!important}
@media(max-width:900px){.manual-shipping-item-row{grid-template-columns:1fr 1fr}.manual-shipping-item-row .manual-item-name{grid-column:1/-1}.manual-item-remove{grid-column:2;justify-self:end;width:46px}.manual-shipping-items-head{align-items:flex-start;flex-direction:column}.manual-shipping-items-head button{width:100%}}
@media(max-width:560px){.manual-shipping-item-row{grid-template-columns:1fr}.manual-shipping-item-row .manual-item-name,.manual-item-remove{grid-column:auto}.manual-item-remove{justify-self:stretch;width:100%}}
/* v4.21.10 - responsive manual shipment items, no horizontal overflow */
.shipping-manual-form,
.shipping-manual-form > *,
.manual-shipping-items-section,
.manual-shipping-items,
.manual-shipping-item-row,
.manual-shipping-item-row > *{
min-width:0!important;
max-width:100%!important;
box-sizing:border-box!important;
}
.shipping-manual-form{overflow-x:hidden!important}
.manual-shipping-items-section{
container-type:inline-size;
container-name:manual-shipping-items;
width:100%!important;
overflow:hidden!important;
}
.manual-shipping-item-row{
width:100%!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.manual-shipping-item-row .manual-item-name{grid-column:1/-1!important}
.manual-shipping-item-row input{
width:100%!important;
min-width:0!important;
max-width:100%!important;
}
.manual-shipping-item-row .manual-item-remove{
grid-column:2!important;
justify-self:end!important;
width:46px!important;
}
@container manual-shipping-items (min-width: 820px){
.manual-shipping-item-row{
grid-template-columns:minmax(180px,2fr) minmax(90px,1fr) 88px 112px 128px 42px!important;
}
.manual-shipping-item-row .manual-item-name{grid-column:auto!important}
.manual-shipping-item-row .manual-item-remove{
grid-column:auto!important;
width:42px!important;
}
}
@container manual-shipping-items (max-width: 430px){
.manual-shipping-item-row{grid-template-columns:1fr!important}
.manual-shipping-item-row .manual-item-name,
.manual-shipping-item-row .manual-item-remove{grid-column:1!important}
.manual-shipping-item-row .manual-item-remove{
justify-self:stretch!important;
width:100%!important;
}
}
/* v4.21.11 - definitive manual shipment item overflow fix */
#appModal:has(.shipping-manual-form){
width:min(760px,calc(100vw - 24px))!important;
max-width:calc(100vw - 24px)!important;
overflow:hidden!important;
}
#appModal:has(.shipping-manual-form) form,
#appModal:has(.shipping-manual-form) .modal-body,
#appModal:has(.shipping-manual-form) .shipping-manual-form{
width:100%!important;
max-width:100%!important;
min-width:0!important;
overflow-x:hidden!important;
box-sizing:border-box!important;
}
#appModal:has(.shipping-manual-form) .manual-shipping-items-section,
#appModal:has(.shipping-manual-form) .manual-shipping-items,
#appModal:has(.shipping-manual-form) .manual-shipping-item-row{
width:100%!important;
max-width:100%!important;
min-width:0!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
#appModal:has(.shipping-manual-form) .manual-shipping-item-row{
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
gap:10px!important;
}
#appModal:has(.shipping-manual-form) .manual-shipping-item-row > *{
min-width:0!important;
max-width:100%!important;
width:100%!important;
box-sizing:border-box!important;
}
#appModal:has(.shipping-manual-form) .manual-shipping-item-row .manual-item-name{
grid-column:1/-1!important;
}
#appModal:has(.shipping-manual-form) .manual-shipping-item-row input{
width:100%!important;
min-width:0!important;
max-width:100%!important;
box-sizing:border-box!important;
}
#appModal:has(.shipping-manual-form) .manual-item-remove{
grid-column:2!important;
justify-self:end!important;
width:48px!important;
max-width:48px!important;
}
@media (max-width:620px){
#appModal:has(.shipping-manual-form){
width:calc(100vw - 12px)!important;
max-width:calc(100vw - 12px)!important;
}
#appModal:has(.shipping-manual-form) form{padding:12px!important;}
#appModal:has(.shipping-manual-form) .manual-shipping-item-row{
grid-template-columns:1fr!important;
padding:10px!important;
}
#appModal:has(.shipping-manual-form) .manual-shipping-item-row .manual-item-name,
#appModal:has(.shipping-manual-form) .manual-item-remove{
grid-column:1!important;
}
#appModal:has(.shipping-manual-form) .manual-item-remove{
justify-self:stretch!important;
width:100%!important;
max-width:100%!important;
}
}
/* v4.21.12 - manual shipment modal: visible form, scrollable content, sticky actions */
#appModal:has(.shipping-manual-form){
width:min(920px,calc(100vw - 32px))!important;
max-width:calc(100vw - 32px)!important;
height:min(900px,calc(100dvh - 28px))!important;
max-height:calc(100dvh - 28px)!important;
overflow:hidden!important;
border-radius:22px!important;
}
#appModal:has(.shipping-manual-form)>form{
display:grid!important;
grid-template-rows:auto minmax(0,1fr) auto!important;
height:100%!important;
max-height:100%!important;
padding:0!important;
overflow:hidden!important;
}
#appModal:has(.shipping-manual-form) .modal-header{
padding:18px 22px!important;
border-bottom:1px solid var(--border)!important;
background:color-mix(in srgb,var(--surface) 96%,var(--primary) 4%)!important;
}
#appModal:has(.shipping-manual-form) #modalBody{
min-height:0!important;
max-height:none!important;
overflow-y:auto!important;
overflow-x:hidden!important;
padding:20px 22px 26px!important;
overscroll-behavior:contain!important;
-webkit-overflow-scrolling:touch!important;
}
#appModal:has(.shipping-manual-form) .modal-footer{
position:relative!important;
z-index:5!important;
display:flex!important;
justify-content:flex-end!important;
gap:10px!important;
margin:0!important;
padding:14px 22px!important;
border-top:1px solid var(--border)!important;
background:color-mix(in srgb,var(--surface) 97%,var(--primary) 3%)!important;
box-shadow:0 -10px 24px rgba(15,23,42,.08)!important;
}
#appModal:has(.shipping-manual-form) .shipping-manual-form{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:16px!important;
overflow:visible!important;
}
#appModal:has(.shipping-manual-form) .shipping-manual-form>label{
min-width:0!important;
display:grid!important;
gap:7px!important;
font-weight:700!important;
}
#appModal:has(.shipping-manual-form) .shipping-manual-form input,
#appModal:has(.shipping-manual-form) .shipping-manual-form textarea{
width:100%!important;
min-width:0!important;
box-sizing:border-box!important;
}
#appModal:has(.shipping-manual-form) .shipping-manual-form textarea{
min-height:130px!important;
resize:vertical!important;
}
#appModal:has(.shipping-manual-form) .manual-shipping-items-section{
grid-column:1/-1!important;
padding:16px!important;
}
#appModal:has(.shipping-manual-form) .manual-shipping-items-head{
flex-direction:row!important;
align-items:center!important;
}
#appModal:has(.shipping-manual-form) .manual-shipping-items-head button{
width:auto!important;
flex:0 0 auto!important;
}
#appModal:has(.shipping-manual-form) .modal-footer .primary-button{
min-width:132px!important;
}
@media(max-width:720px){
#appModal:has(.shipping-manual-form){
width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;
margin:0!important;border-radius:0!important;
}
#appModal:has(.shipping-manual-form)>form{
display:grid!important;
grid-template-rows:auto minmax(0,1fr) auto!important;
height:100dvh!important;
padding:0!important;
overflow:hidden!important;
}
#appModal:has(.shipping-manual-form) .modal-header{padding:14px 16px!important;padding-top:calc(14px + env(safe-area-inset-top,0px))!important}
#appModal:has(.shipping-manual-form) #modalBody{padding:15px 14px 22px!important;overflow-y:auto!important}
#appModal:has(.shipping-manual-form) .shipping-manual-form{grid-template-columns:1fr!important;gap:13px!important}
#appModal:has(.shipping-manual-form) .shipping-manual-form .full,
#appModal:has(.shipping-manual-form) .manual-shipping-items-section{grid-column:1!important}
#appModal:has(.shipping-manual-form) .manual-shipping-items-head{align-items:stretch!important;flex-direction:column!important}
#appModal:has(.shipping-manual-form) .manual-shipping-items-head button{width:100%!important}
#appModal:has(.shipping-manual-form) .modal-footer{
display:grid!important;grid-template-columns:1fr 1.35fr!important;
padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px))!important;
}
#appModal:has(.shipping-manual-form) .modal-footer button{width:100%!important;min-width:0!important}
}
/* v4.21.13 - shipment editing + no-refresh board interactions */
.shipping-edit-source-note{
display:flex;
align-items:flex-start;
gap:10px;
padding:12px 14px;
border:1px solid color-mix(in srgb,#3b82f6 28%,var(--border));
border-radius:14px;
background:color-mix(in srgb,#3b82f6 7%,var(--surface));
}
.shipping-edit-source-note strong{white-space:nowrap;color:var(--text)}
.shipping-edit-source-note span{color:var(--muted);font-size:.88rem;line-height:1.45}
.shipping-edit-button{border-color:color-mix(in srgb,#3b82f6 40%,var(--border))!important}
.task-labels-updated{animation:taskLabelsSaved .36s ease}
@keyframes taskLabelsSaved{0%{box-shadow:0 0 0 0 rgba(59,130,246,.4)}100%{box-shadow:0 0 0 8px rgba(59,130,246,0)}}
@media(max-width:720px){
.shipping-edit-source-note{display:grid;gap:4px}
.shipping-edit-source-note strong{white-space:normal}
.premium-shipping-modal>footer{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
.premium-shipping-modal>footer [data-complete-planner-shipping]{grid-column:1/-1}
}
/* ==========================================================================
Correcto Team v4.21.14 — compact board workspace spacing
Keep the board close to the global header without overlapping it.
========================================================================== */
:root{
--ct-board-header-gap:10px;
}
/* Desktop: remove the oversized dead zone above the kanban workspace. */
@media (min-width:1101px){
.app-view>.app-main{
padding-top:var(--ct-board-header-gap)!important;
}
#pageContent>.board-page,
#pageContent>.board-shell,
#pageContent>.board-view,
#pageContent>.board-kanban-dashboard,
.board-kanban-dashboard.board-kanban-clean{
margin-top:0!important;
}
.board-kanban-dashboard.board-kanban-clean{
padding-top:2px!important;
}
}
/* Tablet: keep a little more breathing room for touch targets. */
@media (min-width:721px) and (max-width:1100px){
.app-view>.app-main{
padding-top:12px!important;
}
}
/* Phone: compact but still separated from the sticky header. */
@media (max-width:720px){
.app-view>.app-main{
padding-top:calc(9px + env(safe-area-inset-top,0px))!important;
}
}
/* v4.21.15 — compact task workspace, release notifier, configurator */
@media(min-width:981px){
#appModal:has(.premium-task-shell){width:min(1080px,calc(100vw - 64px))!important;height:min(760px,calc(100dvh - 56px))!important;max-height:calc(100dvh - 56px)!important;border-radius:18px!important}
#appModal:has(.premium-task-shell) .modal-header{min-height:50px!important;padding:10px 16px!important}
#appModal:has(.premium-task-shell) .modal-header h2{font-size:1.05rem!important}
.premium-task-hero{padding:12px 16px 10px!important}
.premium-task-status{padding:4px 8px!important;font-size:9px!important}
.premium-task-hero-title{margin-top:7px!important;font-size:1.25rem!important}
.premium-task-hero-meta{margin-top:7px!important;gap:6px!important}.premium-task-hero-meta span{padding:5px 7px!important;font-size:10px!important}
.premium-task-jump{margin-top:8px!important}.premium-task-jump button{padding:5px 9px!important;font-size:10px!important}
.premium-task-shell .task-detail-grid{grid-template-columns:minmax(0,1.55fr) minmax(300px,.72fr)!important}
.premium-task-shell .task-left-panel{padding:14px 16px 24px!important}.premium-task-shell .task-right-panel{padding:14px!important}
.premium-task-shell .form-grid{gap:8px!important}.premium-task-shell .trello-description-block,.premium-task-shell .task-attachments-section,.premium-task-shell .task-checklist-section{padding:11px!important;margin-top:8px!important;border-radius:12px!important}
.premium-task-shell .task-description-editor{min-height:92px!important}
#appModal:has(.premium-task-shell) .modal-footer{padding:9px 14px!important}
}
.release-update-banner{position:fixed;z-index:10000;left:50%;top:18px;transform:translateX(-50%);width:min(680px,calc(100vw - 28px));display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;background:#101b2c;color:#fff;border:1px solid #3d5c87;border-radius:14px;box-shadow:0 18px 60px #0007}
.release-update-banner>div{display:flex;align-items:center;gap:11px;min-width:0}.release-update-banner strong,.release-update-banner small{display:block}.release-update-banner small{margin-top:3px;color:#b9c7d9}.release-update-banner button{flex:0 0 auto;border:0;border-radius:10px;background:#3976ff;color:#fff;padding:10px 14px;font-weight:850}.release-update-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#3976ff;font-size:20px}
.configurator-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:16px}.config-card{display:grid;align-content:start;gap:14px;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow)}.config-card-head{display:flex;gap:12px}.config-card-head>span{font-size:28px}.config-card-head h3,.config-card-head p{margin:0}.config-card-head p{margin-top:4px;color:var(--muted)}.release-current{display:grid;gap:3px;padding:12px;border-radius:12px;background:var(--surface2)}.release-current small,.config-hint{color:var(--muted)}.config-card label{display:grid;gap:6px;font-weight:750}.config-feature{padding:11px;border:1px solid var(--border);border-radius:10px;background:var(--surface2)}
@media(max-width:900px){.configurator-grid{grid-template-columns:1fr}.release-update-banner{top:10px;align-items:stretch;flex-direction:column}.release-update-banner button{width:100%}}
/* v4.21.16 — approved clean split task modal */
@media(min-width:981px){
#appModal:has(.premium-task-shell){width:min(1350px,calc(100vw - 28px))!important;height:min(720px,calc(100dvh - 32px))!important;max-width:none!important;max-height:none!important;border-radius:16px!important;overflow:hidden!important;background:var(--surface)!important;box-shadow:0 28px 90px #0006!important}
#appModal:has(.premium-task-shell) form{display:grid!important;grid-template-rows:52px minmax(0,1fr) 58px!important;width:100%!important;height:100%!important;padding:0!important}
#appModal:has(.premium-task-shell) .modal-header{height:52px!important;min-height:52px!important;padding:0 18px!important;background:var(--surface)!important;border-bottom:1px solid var(--border)!important;justify-content:flex-end!important}
/* C8C.2M.11 — canonical task title lives inside .premium-task-shell */
#appModal:has(.premium-task-shell) .modal-header h2{display:none!important}
#appModal:has(.premium-task-shell) #modalClose{width:40px;height:40px;border:0!important;border-radius:10px!important;background:transparent!important;font-size:25px!important;color:var(--text)!important}#appModal:has(.premium-task-shell) #modalClose:hover{background:var(--surface2)!important}
#appModal:has(.premium-task-shell) .modal-body{padding:0!important;overflow:hidden!important;background:var(--surface)!important}.premium-task-shell{height:100%!important;display:block!important;min-height:0!important}.premium-task-hero{display:none!important}
.premium-task-shell .task-detail-grid{height:100%!important;display:grid!important;grid-template-columns:minmax(0,57.5%) minmax(360px,42.5%)!important;gap:0!important;padding:0!important;overflow:hidden!important;background:var(--surface)!important}
.premium-task-shell .task-left-panel{padding:28px 34px 38px!important;overflow-y:auto!important;border-right:1px solid var(--border)!important;background:var(--surface)!important;scrollbar-gutter:stable!important}.premium-task-shell .task-right-panel{padding:28px!important;overflow-y:auto!important;border:0!important;background:color-mix(in srgb,var(--surface2) 76%,var(--surface))!important;scrollbar-gutter:stable!important}
.premium-task-shell .form-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:14px 16px!important}.premium-task-shell .form-grid>label:first-child{grid-column:1/-1!important;width:max-content!important;min-width:170px!important;margin-bottom:4px!important;font-size:0!important}.premium-task-shell #taskTemplateSelect{height:34px!important;width:auto!important;min-width:170px!important;padding:5px 34px 5px 10px!important;border:0!important;border-radius:7px!important;background:var(--surface2)!important;color:var(--text)!important;font-size:14px!important;font-weight:700!important;box-shadow:none!important}
.premium-task-shell .trello-task-heading{grid-column:1/-1!important;position:relative!important;padding-left:38px!important;margin:8px 0 6px!important}.premium-task-shell .trello-task-heading:before{content:'';position:absolute;left:2px;top:15px;width:18px;height:18px;border:2px solid var(--muted);border-radius:50%;box-sizing:border-box}.premium-task-shell .task-title-editor{min-height:72px!important;max-height:150px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;resize:none!important;font-size:30px!important;line-height:1.15!important;font-weight:850!important;color:var(--text)!important}.premium-task-shell .task-title-editor:focus{outline:0!important;box-shadow:none!important}
.premium-task-shell .trello-description-block{grid-column:1/-1!important;order:20!important;margin-top:10px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}.premium-task-shell .trello-section-title{margin:0 0 12px!important;font-size:16px!important;gap:12px!important}.premium-task-shell .task-description-editor{min-height:118px!important;padding:14px 16px!important;border:1px solid var(--border)!important;border-radius:8px!important;background:var(--surface)!important;font-size:15px!important;line-height:1.45!important;box-shadow:none!important}
.premium-task-shell .form-grid>label:not(:first-child){font-size:12px!important;color:var(--muted)!important}.premium-task-shell .form-grid>label:not(:first-child) input,.premium-task-shell .form-grid>label:not(:first-child) select{height:40px!important;margin-top:5px!important}.premium-task-shell .task-switch-row{min-height:48px!important;padding:9px 11px!important;border-radius:9px!important}.premium-task-shell .delivery-fields{padding:12px!important;border-radius:10px!important}.premium-task-shell .task-attachments-section,.premium-task-shell .task-checklist-section{margin-top:16px!important;padding:16px!important;border-radius:10px!important}
.premium-task-shell .task-right-panel .section-head{position:static!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 0 18px!important;background:transparent!important;border:0!important;font-size:16px!important}.premium-task-shell .task-right-panel .section-head strong:before{content:'▣';margin-right:10px;font-weight:400}.premium-task-shell .activity-count{min-width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--surface);border:1px solid var(--border)}.premium-task-shell .comment-compose-vertical{padding:0!important;border:0!important;background:transparent!important}.premium-task-shell #newComment{min-height:92px!important;background:var(--surface)!important;border-radius:9px!important}.premium-task-shell .task-activity-feed{margin-top:18px!important}.premium-task-shell .empty-activity{min-height:300px!important;display:grid!important;place-items:center!important;text-align:center!important;color:var(--muted)!important}
#appModal:has(.premium-task-shell) .modal-footer{height:58px!important;margin:0!important;padding:9px 18px!important;border-top:1px solid var(--border)!important;background:var(--surface)!important;position:static!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important}#appModal:has(.premium-task-shell) .modal-footer button{height:38px!important;padding:0 18px!important;border-radius:8px!important}
}
/* C8C.1: legacy task viewport owners migrated to components.css. */
/* Correcto Team v4.21.19 — shipment modal footer/buttons follow active theme */
.premium-shipping-modal > footer{
background:color-mix(in srgb,var(--surface) 94%,transparent)!important;
border-top-color:var(--border)!important;
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
.premium-shipping-modal > footer .secondary-button,
.premium-shipping-modal > footer [data-close-planner-shipping],
.premium-shipping-modal > footer [data-edit-planner-shipping]{
background:transparent!important;
color:var(--text)!important;
border:1px solid color-mix(in srgb,var(--text) 24%,var(--border))!important;
box-shadow:none!important;
}
.premium-shipping-modal > footer .secondary-button:hover,
.premium-shipping-modal > footer [data-close-planner-shipping]:hover,
.premium-shipping-modal > footer [data-edit-planner-shipping]:hover{
background:color-mix(in srgb,var(--text) 8%,transparent)!important;
color:var(--text)!important;
}
.premium-shipping-modal > footer [data-complete-planner-shipping]{
color:#fff!important;
}
[data-theme="dark"] .premium-shipping-modal > footer,
body.dark .premium-shipping-modal > footer{
background:color-mix(in srgb,var(--surface) 88%,transparent)!important;
}
[data-theme="dark"] .premium-shipping-modal > footer .secondary-button,
[data-theme="dark"] .premium-shipping-modal > footer [data-close-planner-shipping],
[data-theme="dark"] .premium-shipping-modal > footer [data-edit-planner-shipping],
body.dark .premium-shipping-modal > footer .secondary-button,
body.dark .premium-shipping-modal > footer [data-close-planner-shipping],
body.dark .premium-shipping-modal > footer [data-edit-planner-shipping]{
background:transparent!important;
color:#eef5ff!important;
border-color:rgba(238,245,255,.34)!important;
}
/* v4.21.20 — completed shipments + global search */
.completed-shipping-card{
opacity:.68!important;
}
.completed-shipping-card .shipping-card-customer,
.completed-shipping-card .shipping-card-customer *,
.completed-shipping-card > small,
.completed-shipping-card > div:not(.shipping-card-top) span{
text-decoration:line-through!important;
text-decoration-thickness:1.5px!important;
text-decoration-color:currentColor!important;
}
.completed-shipping-card .shipping-source-badge{
text-decoration:none!important;
}
.search-result-completed span{
text-decoration:line-through;
opacity:.78;
}
.search-focus-card{
outline:3px solid var(--primary)!important;
outline-offset:3px!important;
animation:searchCardPulse .9s ease 2;
}
@keyframes searchCardPulse{
50%{transform:scale(1.015);filter:brightness(1.15)}
}
/* v4.21.21 */
.completed-shipping-detail{display:grid;gap:16px;color:var(--text)}.completed-shipping-summary{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:18px;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--surface2) 72%,var(--surface))}.completed-shipping-summary h3{margin:9px 0 2px;font-size:22px}.completed-shipping-summary p{margin:0;color:var(--muted)}.completed-shipping-total{text-align:right;display:grid;gap:3px}.completed-shipping-total small{color:var(--muted)}.completed-shipping-total strong{font-size:22px}.completed-shipping-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.completed-shipping-info-grid article{display:grid;gap:5px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}.completed-shipping-info-grid small,.completed-items-list small{color:var(--muted)}.completed-shipping-info-grid span{font-size:13px}.completed-shipping-message,.completed-shipping-items{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface)}.completed-shipping-message header,.completed-shipping-items>header{display:flex;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface2) 70%,var(--surface))}.completed-shipping-message>div{padding:15px;min-height:72px;overflow-wrap:anywhere;line-height:1.55}.completed-items-list article{display:grid;grid-template-columns:minmax(220px,2fr) repeat(5,minmax(90px,1fr));gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border)}.completed-items-list article:last-child{border-bottom:0}.completed-items-list article>div{display:grid;gap:3px}.completed-empty{padding:18px;color:var(--muted)}.completed-shipping-meta{display:flex;flex-wrap:wrap;gap:8px 18px;padding:10px 2px;color:var(--muted);font-size:12px}.completed-task-preview{margin:6px 0 2px;color:var(--muted);white-space:pre-wrap;line-height:1.4;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.modal-footer .secondary-button,.modal-footer button:not(.primary-button):not(.danger-button),.modal-actions .secondary-button,.modal-actions button:not(.primary-button):not(.danger-button){background:transparent!important;color:var(--text)!important;border:1px solid var(--border)!important;box-shadow:none!important}.modal-footer .secondary-button:hover,.modal-footer button:not(.primary-button):not(.danger-button):hover{background:color-mix(in srgb,var(--text) 8%,transparent)!important;color:var(--text)!important}body.dark .modal-footer .secondary-button,body.dark .modal-footer button:not(.primary-button):not(.danger-button),[data-theme="dark"] .modal-footer .secondary-button,[data-theme="dark"] .modal-footer button:not(.primary-button):not(.danger-button){background:transparent!important;color:#f4f7fb!important;border-color:rgba(244,247,251,.32)!important}@media(max-width:800px){.completed-shipping-summary{align-items:flex-start;flex-direction:column}.completed-shipping-total{text-align:left}.completed-shipping-info-grid{grid-template-columns:1fr}.completed-items-list article{grid-template-columns:1fr 1fr}.completed-item-main{grid-column:1/-1}}
/* v4.21.22 — restore completed delivery + right panel theme fix */
.premium-delivery-center .delivery-detail-head button{background:transparent!important;color:var(--dc-text)!important;border:1px solid transparent!important;border-radius:9px!important;padding:7px 9px!important;font-weight:850!important}
.premium-delivery-center .delivery-detail-head button:hover{background:color-mix(in srgb,var(--dc-text) 8%,transparent)!important;border-color:var(--dc-border)!important}
.premium-delivery-center .delivery-detail-actions a,.premium-delivery-center .delivery-detail-actions button{background:transparent!important;color:var(--dc-text)!important;border:1px solid var(--dc-border)!important}
.premium-delivery-center .delivery-detail-actions a:hover,.premium-delivery-center .delivery-detail-actions button:hover{background:color-mix(in srgb,var(--dc-text) 7%,transparent)!important}
.premium-delivery-center .delivery-detail-actions-top a{background:#2878ff!important;color:#fff!important;border-color:#2878ff!important}
.premium-delivery-center .delivery-detail-actions .success{background:#18ad62!important;color:#fff!important;border-color:#28d47a!important}
.premium-delivery-center .delivery-restore-task,.premium-delivery-center .delivery-stop-restore{background:transparent!important;color:var(--dc-text)!important;border:1px solid var(--dc-border)!important}
.premium-delivery-center .delivery-restore-task:hover,.premium-delivery-center .delivery-stop-restore:hover{background:color-mix(in srgb,#f59e0b 14%,transparent)!important;border-color:#f59e0b!important;color:var(--dc-text)!important}
body.dark .premium-delivery-center .delivery-detail-head button,body.dark .premium-delivery-center .delivery-detail-actions button,[data-theme="dark"] .premium-delivery-center .delivery-detail-head button,[data-theme="dark"] .premium-delivery-center .delivery-detail-actions button{color:#f4f7fb!important;background:transparent!important}
/* =========================================================
C8C.2M.13 — MOBILE TASK QUICK TOOLS SAFE LAYOUT
Phone-only cleanup for quick attachment/checklist actions.
Keep ••• as top-right action trigger.
========================================================= */
@media (max-width: 768px){
#boardKanbanDashboard .board-task-card{
position:relative!important;
}
#boardKanbanDashboard .board-task-card .board-task-actions{
position:absolute!important;
top:14px!important;
right:14px!important;
display:flex!important;
flex-direction:column!important;
align-items:flex-end!important;
gap:0!important;
z-index:4!important;
}
#boardKanbanDashboard .board-task-card .board-task-actions button:not([data-card-action="more"]){
position:static!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
width:28px!important;
height:28px!important;
min-width:28px!important;
min-height:28px!important;
margin:0 0 8px 0!important;
border-radius:10px!important;
box-shadow:none!important;
}
#boardKanbanDashboard .board-task-card .board-task-actions button[data-card-action="more"]{
position:static!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
width:44px!important;
height:44px!important;
min-width:44px!important;
min-height:44px!important;
border-radius:14px!important;
z-index:5!important;
}
#boardKanbanDashboard .board-task-card .board-task-title,
#boardKanbanDashboard .board-task-card .board-task-description{
padding-right:78px!important;
}
#boardKanbanDashboard .board-task-card .board-task-meta,
#boardKanbanDashboard .board-task-card .board-task-footer,
#boardKanbanDashboard .board-task-card .board-task-badges{
padding-right:14px!important;
clear:both!important;
}
#boardKanbanDashboard .board-task-card .assignee-badge,
#boardKanbanDashboard .board-task-card .status-badge,
#boardKanbanDashboard .board-task-card .board-task-badge{
max-width:calc(100% - 72px)!important;
}
}
/* =========================================================
C8C.3D — DEFINITIVE MOBILE TASK ACTION GUTTER
Reserve a real right-side lane for edit/copy/more.
No task content may enter that lane.
========================================================= */
@media(max-width:768px){
#boardKanbanDashboard
.board-task-card{
position:relative!important;
box-sizing:border-box!important;
/*
* Permanent action lane.
* This is intentionally card padding, not individual
* title/meta padding.
*/
padding-right:72px!important;
}
#boardKanbanDashboard
.board-task-card
.board-task-actions{
position:absolute!important;
top:10px!important;
right:10px!important;
width:46px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:flex-start!important;
gap:7px!important;
margin:0!important;
padding:0!important;
z-index:6!important;
}
#boardKanbanDashboard
.board-task-card
.board-task-actions
button{
position:static!important;
flex:0 0 auto!important;
margin:0!important;
}
#boardKanbanDashboard
.board-task-card
.board-task-actions
button:not([data-card-action="more"]){
width:32px!important;
height:32px!important;
min-width:32px!important;
min-height:32px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
border-radius:10px!important;
}
#boardKanbanDashboard
.board-task-card
.board-task-actions
button[data-card-action="more"]{
width:42px!important;
height:42px!important;
min-width:42px!important;
min-height:42px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
border-radius:13px!important;
}
/*
* C8C.2M.13 previously added 78px only to title and
* description. The card itself now owns the gutter,
* therefore descendants must not reserve a second gutter.
*/
#boardKanbanDashboard
.board-task-card
.board-task-title,
#boardKanbanDashboard
.board-task-card
.board-task-description,
#boardKanbanDashboard
.board-task-card
.board-task-labels,
#boardKanbanDashboard
.board-task-card
.board-task-attachment-summary,
#boardKanbanDashboard
.board-task-card
.board-task-meta,
#boardKanbanDashboard
.board-task-card
.board-task-footer,
#boardKanbanDashboard
.board-task-card
.board-task-badges,
#boardKanbanDashboard
.board-task-card
.board-task-progress,
#boardKanbanDashboard
.board-task-card
.task-completed-by,
#boardKanbanDashboard
.board-task-card
.task-postponed-note{
box-sizing:border-box!important;
width:100%!important;
max-width:100%!important;
padding-right:0!important;
}
#boardKanbanDashboard
.board-task-card
.assignee-badge,
#boardKanbanDashboard
.board-task-card
.status-badge,
#boardKanbanDashboard
.board-task-card
.board-task-badge{
max-width:100%!important;
}
}
/* =========================================================
C8C.3E — MOBILE SHELL FINAL
1. Phone task card = one More action
2. Board selector below global header
3. Normal pages regain vertical touch scrolling
========================================================= */
@media (max-width:900px){
/* =======================================================
NORMAL MOBILE PAGE SCROLL
App shell remains viewport locked.
pageContent becomes canonical vertical scroller.
======================================================= */
#appView.app-view:not(.hidden) > .app-main{
display:flex!important;
flex-direction:column!important;
min-height:0!important;
overflow:hidden!important;
}
#appView.app-view:not(.hidden)
> .app-main
> #pageHeader{
flex:0 0 auto!important;
}
#appView.app-view:not(.hidden)
> .app-main
> #pageContent{
flex:1 1 auto!important;
height:auto!important;
min-height:0!important;
overflow-x:hidden!important;
overflow-y:auto!important;
-webkit-overflow-scrolling:touch!important;
overscroll-behavior-y:contain!important;
touch-action:pan-y!important;
}
/*
* Kanban pages keep their own internal scroll model.
*/
#pageContent > .board-page,
#pageContent > .board-shell,
#pageContent > .board-view{
flex:1 1 auto!important;
height:100%!important;
min-height:0!important;
overflow:hidden!important;
}
/* =======================================================
BOARD SELECTOR
Global header is 58px on mobile.
Bottom navigation remains visible.
======================================================= */
body.board-entry-open
#boardEntryOverlay.board-entry-overlay{
position:fixed!important;
top:58px!important;
right:0!important;
bottom:calc(
78px + env(safe-area-inset-bottom,0px)
)!important;
left:0!important;
width:auto!important;
height:auto!important;
padding:8px!important;
display:block!important;
place-items:initial!important;
overflow:hidden!important;
/*
* Below global header (90000),
* but above normal application content.
*/
z-index:89950!important;
}
body.board-entry-open
#boardEntryOverlay
.board-entry-window{
width:100%!important;
height:100%!important;
max-width:none!important;
max-height:100%!important;
min-height:0!important;
display:grid!important;
grid-template-rows:
auto
auto
minmax(0,1fr)
auto!important;
overflow:hidden!important;
border-radius:18px!important;
}
body.board-entry-open
#boardEntryOverlay
.board-entry-header{
padding:14px 16px 10px!important;
}
body.board-entry-open
#boardEntryOverlay
.board-entry-header h1{
margin-top:2px!important;
margin-bottom:6px!important;
font-size:22px!important;
line-height:1.15!important;
}
body.board-entry-open
#boardEntryOverlay
.board-entry-search{
padding:10px 14px!important;
}
body.board-entry-open
#boardEntryOverlay
.board-entry-grid{
min-height:0!important;
overflow-x:hidden!important;
overflow-y:auto!important;
-webkit-overflow-scrolling:touch!important;
overscroll-behavior-y:contain!important;
touch-action:pan-y!important;
padding:8px 12px 18px!important;
}
body.board-entry-open
#boardEntryOverlay
.board-entry-footer{
flex:0 0 auto!important;
padding:10px 14px!important;
}
}
/* =========================================================
PHONE TASK CARD ACTIONS
Card tap already opens task.
More menu already owns Edit + Duplicate + remaining actions.
Therefore only "•••" is shown on phone.
========================================================= */
@media (max-width:768px){
#boardKanbanDashboard
.board-task-card{
padding-right:56px!important;
}
#boardKanbanDashboard
.board-task-card
.board-task-actions{
position:absolute!important;
top:10px!important;
right:10px!important;
width:38px!important;
height:38px!important;
display:block!important;
margin:0!important;
padding:0!important;
z-index:8!important;
}
/*
* Pencil is redundant because card tap opens task.
* Copy remains available inside More.
*/
#boardKanbanDashboard
.board-task-card
.board-task-actions
[data-card-action="edit"],
#boardKanbanDashboard
.board-task-card
.board-task-actions
[data-card-action="copy"]{
display:none!important;
}
#boardKanbanDashboard
.board-task-card
.board-task-actions
[data-card-action="more"]{
position:static!important;
width:38px!important;
height:38px!important;
min-width:38px!important;
min-height:38px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
margin:0!important;
padding:0!important;
border-radius:11px!important;
}
}
/* =========================================================
C8C.3G — MOBILE BOARD + RAZVOZ DETAIL SWITCH
Desktop intentionally untouched.
========================================================= */
@media (max-width:768px){
/* =======================================================
BOARD TASK — SMALLER SINGLE ••• ACTION
======================================================= */
#boardKanbanDashboard
.board-task-card{
padding-right:46px!important;
}
#boardKanbanDashboard
.board-task-card
.board-task-actions.mobile-single-action{
position:absolute!important;
top:10px!important;
right:10px!important;
width:32px!important;
height:32px!important;
min-width:32px!important;
min-height:32px!important;
margin:0!important;
padding:0!important;
display:block!important;
z-index:8!important;
}
#boardKanbanDashboard
.board-task-card
.board-task-actions.mobile-single-action
[data-card-action="more"]{
position:static!important;
width:32px!important;
height:32px!important;
min-width:32px!important;
min-height:32px!important;
margin:0!important;
padding:0!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
border-radius:9px!important;
font-size:13px!important;
line-height:1!important;
letter-spacing:0!important;
box-shadow:none!important;
background:
color-mix(
in srgb,
var(--surface2) 74%,
transparent
)!important;
}
/*
* User / badges remain inside the normal content area.
*/
#boardKanbanDashboard
.board-task-card
.board-task-meta,
#boardKanbanDashboard
.board-task-card
.board-task-footer,
#boardKanbanDashboard
.board-task-card
.board-task-badges{
max-width:100%!important;
}
/* =======================================================
RAZVOZ — MOBILE DETAIL SWITCH
======================================================= */
body.premium-delivery-center
.c8c3g-razvoz-detail-toggle{
grid-column:1/-1!important;
width:100%!important;
box-sizing:border-box!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:14px!important;
margin:0 0 10px!important;
padding:10px 12px!important;
border:
1px solid
color-mix(
in srgb,
var(--dc-border,var(--border)) 88%,
transparent
)!important;
border-radius:14px!important;
background:
color-mix(
in srgb,
var(--dc-card,var(--surface)) 92%,
transparent
)!important;
box-shadow:none!important;
}
body.premium-delivery-center
.c8c3g-detail-toggle-copy{
min-width:0!important;
display:grid!important;
gap:2px!important;
}
body.premium-delivery-center
.c8c3g-detail-toggle-copy
strong{
margin:0!important;
font-size:14px!important;
line-height:1.2!important;
font-weight:850!important;
}
body.premium-delivery-center
.c8c3g-detail-toggle-copy
small{
color:
var(--dc-muted,var(--muted))!important;
font-size:11px!important;
line-height:1.25!important;
}
body.premium-delivery-center
.c8c3g-detail-switch{
position:relative!important;
flex:0 0 auto!important;
width:48px!important;
height:28px!important;
min-width:48px!important;
min-height:28px!important;
padding:0!important;
margin:0!important;
border:
1px solid
color-mix(
in srgb,
var(--dc-border,var(--border)) 95%,
transparent
)!important;
border-radius:999px!important;
background:
color-mix(
in srgb,
var(--dc-muted,var(--muted)) 22%,
transparent
)!important;
box-shadow:none!important;
cursor:pointer!important;
transition:
background .18s ease,
border-color .18s ease!important;
}
body.premium-delivery-center
.c8c3g-detail-switch
span{
position:absolute!important;
top:3px!important;
left:3px!important;
width:20px!important;
height:20px!important;
border-radius:50%!important;
background:#fff!important;
box-shadow:
0 2px 6px
rgba(0,0,0,.22)!important;
transform:
translateX(0)!important;
transition:
transform .18s ease!important;
}
body.premium-delivery-center
.c8c3g-detail-switch.is-on{
background:#2878ff!important;
border-color:#2878ff!important;
}
body.premium-delivery-center
.c8c3g-detail-switch.is-on
span{
transform:
translateX(20px)!important;
}
/* OFF = large task window is gone. */
body.premium-delivery-center
.c8c3g-mobile-detail-panel{
display:none!important;
}
/* ON = show same canonical detail, only compacted on phone. */
body.premium-delivery-center
.c8c3g-mobile-detail-panel.is-mobile-detail-open{
position:static!important;
display:block!important;
width:100%!important;
max-width:100%!important;
box-sizing:border-box!important;
margin:0!important;
padding:12px!important;
border-radius:16px!important;
}
body.premium-delivery-center
.c8c3g-mobile-detail-panel
.delivery-detail-head,
body.premium-delivery-center
.c8c3g-mobile-detail-panel
.route-detail-head{
margin-bottom:9px!important;
gap:8px!important;
}
body.premium-delivery-center
.c8c3g-mobile-detail-panel
h2{
margin:
9px 0
12px!important;
font-size:18px!important;
line-height:1.22!important;
}
body.premium-delivery-center
.c8c3g-mobile-detail-panel
.delivery-detail-grid,
body.premium-delivery-center
.c8c3g-mobile-detail-panel
.route-detail-data{
margin-top:10px!important;
grid-template-columns:1fr!important;
border-radius:12px!important;
}
body.premium-delivery-center
.c8c3g-mobile-detail-panel
.delivery-detail-grid
> div,
body.premium-delivery-center
.c8c3g-mobile-detail-panel
.route-detail-data
> div{
padding:9px 11px!important;
border-right:0!important;
}
body.premium-delivery-center
.c8c3g-mobile-detail-panel
.delivery-detail-actions,
body.premium-delivery-center
.c8c3g-mobile-detail-panel
.route-detail-actions{
display:grid!important;
grid-template-columns:
repeat(
2,
minmax(0,1fr)
)!important;
gap:7px!important;
margin:
10px 0
0!important;
}
body.premium-delivery-center
.c8c3g-mobile-detail-panel
.delivery-detail-actions
> *,
body.premium-delivery-center
.c8c3g-mobile-detail-panel
.route-detail-actions
> *{
min-width:0!important;
min-height:38px!important;
padding:
8px 9px!important;
border-radius:10px!important;
font-size:12px!important;
}
body.premium-delivery-center
.c8c3g-mobile-detail-panel
.delivery-detail-actions-top{
display:grid!important;
grid-template-columns:1fr!important;
}
body.premium-delivery-center
.c8c3g-mobile-detail-panel
.delivery-detail-actions-top
> *{
width:100%!important;
}
}
/* =========================================================
C8C.3H — RAZVOZ MOBILE PANEL FOOTER FIT
========================================================= */
@media (max-width:768px){
/*
* The JS variable is calculated from the actual card top
* to the actual top edge of #mobileBottomNav.
*/
body.premium-delivery-center
.c8c3g-mobile-detail-panel.is-mobile-detail-open,
body.premium-delivery-center
.delivery-detail-panel:not(.empty),
body.premium-delivery-center
.route-detail-panel:not(.empty){
box-sizing:border-box!important;
min-height:
var(
--c8c3h-razvoz-panel-height,
auto
)!important;
/*
* Keep the border/background continuous all the way down.
*/
border-bottom-left-radius:18px!important;
border-bottom-right-radius:18px!important;
margin-bottom:0!important;
overflow:hidden!important;
}
/*
* Content itself may scroll if the panel becomes taller
* than the available phone area.
*/
body.premium-delivery-center
.c8c3g-mobile-detail-panel.is-mobile-detail-open{
display:flex!important;
flex-direction:column!important;
}
/*
* Keep the bottom action area inside the card rather than
* visually ending the card before the footer.
*/
body.premium-delivery-center
.c8c3g-mobile-detail-panel.is-mobile-detail-open
.delivery-detail-actions,
body.premium-delivery-center
.c8c3g-mobile-detail-panel.is-mobile-detail-open
.route-detail-actions{
margin-top:auto!important;
}
/*
* Do not leave the old empty dark strip below the detail.
*/
body.premium-delivery-center
#pageContent{
padding-bottom:
calc(
8px +
env(
safe-area-inset-bottom,
0px
)
)!important;
}
}