/* mobile.css v3.2 — мобильные компоненты CMMS, тема «Graphite». v3.2: добавлены правила адаптации изображений и превью фото в форме осмотра. */
*{box-sizing:border-box;}
@media (max-width:768px){
body{padding:10px;font-size:14px;}
.container{padding:15px;max-width:100%;}
table{display:block;overflow-x:auto;white-space:nowrap;}
.btn{padding:12px 20px;font-size:16px;min-height:48px;}
input,select,textarea{
font-size:16px;padding:12px;
background:var(--surface-2);
border:1px solid var(--border);
color:var(--text);
border-radius:var(--r-sm);
}
input::placeholder,textarea::placeholder{color:var(--text-3);}
.form-row{flex-direction:column;gap:10px;}
img{max-width:100%;height:auto;}
.photo-preview .thumb img{width:100%;height:100%;object-fit:cover;}
}
@media (max-width:480px){
body{padding:5px;font-size:13px;}
.container{padding:10px;}
}
.network-offline-banner{
display:none;position:fixed;top:56px;left:0;right:0;
background:var(--danger);color:#fff;text-align:center;
padding:8px;font-size:13px;font-weight:600;
z-index:99;box-shadow:0 2px 4px rgba(0,0,0,.3);
}
.network-offline-banner.visible{display:block;}
.top-bar{
position:sticky;top:8px;z-index:100;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--r-card);
padding:12px 16px;margin-bottom:16px;
display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.top-bar h2{font-size:18px;color:var(--text);display:flex;align-items:center;gap:10px;margin:0;}
.top-bar p{font-size:12px;color:var(--text-2);margin:2px 0 0;}
.section-title{
display:flex;align-items:center;gap:8px;
font-size:15px;font-weight:700;
color:var(--text);margin:20px 0 10px;
padding-bottom:6px;border-bottom:1px solid var(--border);
}
.section-title svg{width:18px;height:18px;}
.start-all-btn{
display:block;background:var(--accent);color:#fff;
text-align:center;padding:14px;border-radius:var(--r-btn);
font-weight:700;font-size:16px;text-decoration:none;
transition:transform .1s;
}
.start-all-btn:active{transform:scale(.98);}
.time-group-header{
font-size:13px;font-weight:700;color:var(--accent);
padding:16px 4px 8px;text-transform:uppercase;letter-spacing:.5px;
border-bottom:1px solid var(--border);
}
.task-card{
background:var(--surface-2);
border:1px solid var(--border);
border-radius:var(--r-card);
padding:16px;margin-bottom:12px;
display:grid;grid-template-columns:60px 1fr;gap:8px;
min-height:120px;
border-left:4px solid var(--border);
}
.task-card.done{border-left-color:var(--ok);}
.task-card.missed{border-left-color:var(--danger);}
.task-card.pending{border-left-color:var(--warn);}
.task-card.in_progress{border-left-color:var(--info);}
.task-time{
grid-row:1 / -1;
font-weight:700;font-size:20px;
color:var(--text);text-align:center;padding-top:4px;
}
.task-title,.task-meta,.task-actions{grid-column:2;}
.task-title{
font-weight:600;font-size:15px;color:var(--text);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;line-height:1.3;
}
.task-meta{
font-size:13px;color:var(--text-2);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.task-actions{
display:flex;gap:10px;align-items:center;
margin-top:8px;flex-wrap:wrap;
}
.status-badge{
display:inline-flex;align-items:center;
padding:6px 12px;border-radius:var(--r-sm);
font-size:13px;font-weight:600;height:28px;
white-space:nowrap;border:1px solid transparent;
}
.status-done{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-border);}
.status-missed{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-border);}
.status-pending{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-border);}
.status-soon{
background:var(--warn-soft);color:var(--warn);border-color:var(--warn-border);
animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.7;}}
.action-btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:0 20px;border-radius:var(--r-btn);
font-size:14px;font-weight:600;text-decoration:none;
height:48px;min-width:100px;border:none;cursor:pointer;
transition:all .2s;color:#fff;
}
.action-btn svg{width:16px;height:16px;}
.action-btn:active{transform:scale(.96);}
.btn-start{background:var(--ok);}
.btn-continue{background:var(--info);}
.btn-missed{background:var(--danger);}
.btn-report{
background:var(--surface);
color:var(--text);
border:1px solid var(--border);
}
.empty-state{text-align:center;padding:40px 20px;color:var(--text-3);}
.cmms-draft-indicator{
position:fixed;bottom:20px;right:20px;
background:var(--ok);color:#fff;
padding:10px 15px;border-radius:var(--r-btn);
font-size:14px;font-weight:600;
z-index:9999;opacity:0;transition:opacity .3s;
pointer-events:none;
}
.cmms-draft-indicator.visible{opacity:1;}
@media (max-width:375px){
.task-card{padding:12px;margin-bottom:10px;}
.task-title{font-size:14px;}
.task-meta{font-size:12px;}
.action-btn{padding:0 16px;min-width:90px;font-size:13px;height:44px;}
}