﻿/* Shared shell geometry: all Operations routes retain the same navigation and locale placement. */
body .shell,body .workspace { grid-template-columns:240px minmax(0,1fr); }
body .ops-sidebar { position:sticky; top:0; height:100vh; width:auto; padding:22px 14px; background:linear-gradient(180deg,#17191D,#111318); color:white; display:flex; flex-direction:column; gap:24px; overflow-y:auto; }
body .ops-sidebar .brand-mark { display:grid; padding:0 8px 12px; margin:0; }
body .ops-sidebar .sidebar-bottom { margin-top:auto; display:grid; gap:14px; }
body .ops-navigation { display:grid; gap:6px; }
body .ops-navigation a { min-height:46px; padding:0 12px; display:flex; align-items:center; gap:12px; border-radius:12px; color:#D6DAE1; font-size:14px; font-weight:720; }
body .ops-navigation a:hover { background:#22252A; color:white; }
body .ops-navigation a.active,body .ops-navigation a[aria-current=page] { color:white; background:linear-gradient(135deg,#FF5A0A,#FF7A1F); box-shadow:0 8px 18px rgba(255,90,10,.26); }
body .ops-navigation a > span:not(.nav-icon):not([data-icon]) { display:inline; }
.ops-language { position:relative; width:100%; font-size:13px; font-weight:700; }
.ops-language summary { display:flex; align-items:center; gap:9px; padding:9px 12px; min-height:42px; border:0; border-radius:12px; background:rgba(255,255,255,.08); color:white; cursor:pointer; list-style:none; }
.ops-language summary::-webkit-details-marker { display:none; }
.ops-language img { flex:none; border-radius:2px; }
.ops-language .ops-language-options,.ops-language #language-options { position:absolute; top:auto; bottom:calc(100% + 6px); inset-inline-start:0; inset-inline-end:auto; width:100%; max-height:320px; overflow:auto; padding:5px; border:1px solid #E7EAF0; border-radius:12px; background:white; z-index:45; box-shadow:0 8px 24px rgba(16,24,40,.12); }
.ops-language button { display:flex; align-items:center; justify-content:flex-start; width:100%; gap:9px; min-height:38px; padding:8px 12px; color:#141824; background:white; border:0; border-radius:8px; font-size:13px; }
.ops-language button:hover,.ops-language button[aria-pressed=true] { background:#FFF1E8; }
html[dir=rtl] th,html[dir=rtl] td { text-align:start; }
html[dir=rtl] .profile-menu { right:auto; left:0; }
html[dir=rtl] .brand-o { margin-right:0; margin-left:3px; }
@media(max-width:860px) {
 body .shell,body .workspace { display:block; }
 body .ops-sidebar { position:fixed; inset:0 auto 0 0; width:min(300px,86vw); z-index:40; transform:translateX(-102%); }
 body.sidebar-open .ops-sidebar { transform:translateX(0); }
 html[dir=rtl] body .ops-sidebar { inset:0 0 0 auto; transform:translateX(102%); }
 html[dir=rtl] body.sidebar-open .ops-sidebar { transform:translateX(0); }
}
body .ops-navigation .nav-icon { width:22px; height:22px; flex:none; display:inline-grid; place-items:center; }
body .ops-navigation .app-icon { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ops-mobile-header { display:none; }
@media(max-width:860px) {
 body .ops-mobile-header { position:sticky; top:0; z-index:30; min-height:64px; display:flex; align-items:center; justify-content:space-between; padding:10px 16px; background:white; border-bottom:1px solid #E7EAF0; }
 .ops-mobile-header button { width:38px; min-height:38px; padding:0; }
 .ops-mobile-header .app-icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; }
 body.sidebar-open .scrim { display:block; position:fixed; inset:0; z-index:35; background:rgba(17,19,24,.58); }
}
body .profile-copy strong { font-weight:800; }
body .profile-copy > span { font-weight:700; }
body #site-performance > .desktop-table { overflow-x:auto; }
body #site-performance > .desktop-table table { min-width:560px; }
/* Employee Dashboard uses the shared workspace cards, icons and toolbar. */
body[data-page="employees"] .stack {display:none}
body[data-page="employees"] .content-grid {grid-template-columns:minmax(0,1fr)}
body[data-page="employees"] #status-filter {display:none}
body[data-page="employees"] #kpis {grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
body[data-page="employees"] #primary {min-width:0;display:block}
.employee-scroll {overflow:auto;max-width:100%}
.employee-scroll table {min-width:700px;table-layout:auto}
.employee-scroll th {white-space:nowrap}
.employee-scroll td {word-break:normal;overflow-wrap:normal;vertical-align:middle}
.employee-scroll td:first-child {min-width:150px}
.employee-scroll button {display:inline-flex;align-items:center;gap:6px;white-space:nowrap;width:auto}
#employee-insights {min-width:0;grid-column:1/-1}
.employee-rankings {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.employee-rankings .card,.employee-history {padding:20px;min-width:0}
#employee-insights h2 {font-size:18px;display:flex;align-items:center;gap:8px}
.employee-history {margin-top:20px}
.employee-history .employee-scroll {max-height:480px}
.employee-ranking-note {margin:16px 0;line-height:1.6}
.employee-footer {display:flex;gap:8px;align-items:center;padding-top:16px;flex-wrap:wrap}
.employee-footer label {display:flex;align-items:center;gap:8px;margin-inline-end:auto}
.employee-footer select {width:70px;min-height:36px;padding:6px}
.employee-footer button {width:36px;min-width:36px;padding:0;min-height:36px}
#employee-shift-dialog {width:min(540px,calc(100vw - 32px));border:1px solid var(--line,#e2e8f0);border-radius:18px;padding:24px}
#employee-shift-dialog::backdrop {background:#10182866}
#employee-shift-form {display:grid;gap:16px}
#employee-shift-form p {margin:0}
#employee-shift-form textarea {width:100%;resize:vertical}
#employee-shift-error {color:#e5484d}
@media(max-width:1100px){.employee-rankings{grid-template-columns:minmax(0,1fr)}}
body[data-page="employees"] #primary-count {display:none}
body[data-page="employees"] #primary > .employee-scroll {max-height:500px}
.cleaner-identity {display:flex;align-items:center;gap:10px}
.cleaner-photo-thumb {display:inline-flex;flex:0 0 40px;width:40px;height:40px;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;background:#f4f5f7;color:#667085}
.cleaner-photo-thumb img {width:100%;height:100%;object-fit:cover}
.cleaner-photo-input {display:flex;gap:16px;align-items:center;min-width:0}
.cleaner-photo-input input {min-width:0;width:100%}
#cleaner-photo-preview {width:80px;height:80px;flex-basis:80px}
#cleaner-photo-preview > .cleaner-photo-thumb {width:80px;height:80px;flex-basis:80px}
.cleaner-setting {display:flex;justify-content:space-between;gap:16px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.cleaner-setting-title {display:flex;align-items:center;gap:8px}
.cleaner-setting label {margin:0}
.cleaner-info {position:relative;display:inline-flex}
.cleaner-info button {width:22px;height:22px;min-height:22px;min-width:22px;padding:0;border:1px solid #cbd5e1;border-radius:50%;background:transparent;color:#667085;font-weight:700;text-transform:none}
.cleaner-info [role="tooltip"] {display:none;position:absolute;z-index:20;inset-inline-start:-100px;bottom:calc(100% + 8px);width:min(240px,65vw);background:#182230;color:white;padding:10px 12px;border-radius:8px;font-size:12px;font-weight:400;line-height:1.5;text-transform:none;letter-spacing:normal}
.cleaner-info:hover [role="tooltip"],.cleaner-info:focus-within [role="tooltip"] {display:block}
#cleaner-form-error {color:#e5484d}

body[data-page="schedules"] .stack { display: none; }
body[data-page="schedules"] .content-grid { grid-template-columns: minmax(0, 1fr); }
#cleaner-form .cleaner-file-permission { display: flex; align-items: center; gap: 10px; text-transform: none; cursor: pointer; }
#cleaner-file-upload { width: 18px; height: 18px; flex: 0 0 18px; accent-color: #ff7a00; }

.cleaner-settings-box {border:1px solid var(--line);border-radius:12px;overflow:visible;display:flex;flex-wrap:wrap;gap:0}
.cleaner-settings-box .cleaner-setting {flex:1 1 240px;border:0;border-radius:0;min-width:0}
#cleaner-crop {width:100%;text-align:center}
#cleaner-crop[hidden] {display:none}
#cleaner-crop-canvas {display:block;width:min(280px,100%);height:auto;aspect-ratio:1;margin:12px auto;border-radius:50%;touch-action:none;cursor:grab;outline:2px solid #ff7a00;outline-offset:3px}
#cleaner-crop-canvas:active {cursor:grabbing}
#cleaner-form .cleaner-zoom {display:flex;align-items:center;gap:12px;max-width:320px;margin:16px auto}
#cleaner-crop-zoom {padding:0;accent-color:#ff7a00;min-width:0}
.cleaner-photo-input {flex-wrap:wrap}
#cleaner-photo-edit {width:auto;flex:none}
#cleaner-photo-edit[hidden] {display:none}

.cleaner-settings-box .cleaner-setting:first-child {justify-content:flex-start;gap:16px}
[data-cleaner-original][data-user-photo-version] {cursor:zoom-in}
#cleaner-original-dialog {width:min(960px,94vw);max-height:90vh;padding:18px;border:0;border-radius:16px;overflow:auto}
#cleaner-original-dialog::backdrop {background:#0009}
.original-photo-header {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.original-photo-header h2 {margin:0;font-size:18px}
#cleaner-original-dialog img {display:block;max-width:100%;height:auto;margin:auto;max-height:75vh;object-fit:contain;border-radius:0}

#user-avatar,#profile-modal-avatar,.cleaner-avatar{overflow:hidden;position:relative;flex-shrink:0}
#user-avatar img,#profile-modal-avatar img,.cleaner-avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}

/* Issue Queue keeps readable columns inside its own scroll area. */
body[data-page="issues"] .toolbar {display:flex;flex-wrap:wrap;align-items:center}
body[data-page="issues"] .toolbar > input {flex:2 1 200px;min-width:0;width:auto}
body[data-page="issues"] .toolbar > select {flex:1 1 160px;min-width:0;width:auto}
body[data-page="issues"] .toolbar > button {flex:0 0 auto}
body[data-page="issues"] .content-grid > *,
body[data-page="issues"] .stack > .panel,
body[data-page="issues"] #primary {min-width:0}
body[data-page="issues"] .panel-head {flex-wrap:wrap}
body[data-page="issues"] .issue-table-scroll {min-width:0;overflow:auto;max-height:65vh}
body[data-page="issues"] .issue-table-scroll table {min-width:1180px;table-layout:auto}
body[data-page="issues"] .issue-table-scroll th {white-space:nowrap}
body[data-page="issues"] .issue-table-scroll td {vertical-align:top;min-width:120px;overflow-wrap:anywhere}
body[data-page="issues"] .issue-table-scroll td:first-child {min-width:240px;max-width:360px}
body[data-page="issues"] .issue-table-scroll td:nth-child(6) {min-width:160px}
body[data-page="issues"] .issue-table-scroll td:nth-child(7) {min-width:140px}
body[data-page="issues"] .issue-table-scroll td:last-child {min-width:192px}
body[data-page="issues"] .issue-table-scroll .modal-row-actions {display:flex;flex-wrap:nowrap;justify-content:flex-start}
body[data-page="issues"] .issue-table-scroll .modal-row-actions button {flex:0 0 36px}
body[data-page="issues"] .issue-footer {display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:10px}
body[data-page="issues"] .issue-footer > label {display:inline-flex;align-items:center;gap:6px;margin:0;white-space:nowrap}
body[data-page="issues"] #issue-page-size {width:64px;min-width:64px;min-height:34px;height:34px;padding:0 6px}
body[data-page="issues"] .issue-footer .cleaner-page-controls {gap:4px;flex-wrap:wrap;margin-inline-start:auto}
body[data-page="issues"] .issue-footer .cleaner-page-controls button {width:34px;min-width:34px;min-height:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center}
@media(max-width:1280px) {
  body[data-page="issues"] .content-grid {grid-template-columns:minmax(0,1fr)}
  body[data-page="issues"] .stack,
  body[data-page="issues"] .stack > .panel {height:auto;min-height:0;max-height:none}
}
@media(max-width:860px) {
  body[data-page="issues"] #primary {grid-template-rows:auto auto}
  body[data-page="issues"] .content-grid > .panel {min-height:0}
}
@media(max-width:480px) {
  body[data-page="issues"] .toolbar > input,
  body[data-page="issues"] .toolbar > select {flex-basis:100%}
  body[data-page="issues"] .issue-footer .cleaner-page-number:not(.active) {display:none}
}

#cleaner-camera-panel {display:grid;gap:12px;border:1px solid var(--line);padding:12px;border-radius:12px;margin-top:12px}
#cleaner-camera-panel[hidden],#cleaner-background-progress[hidden],.cleaner-background-controls label[hidden] {display:none}
#cleaner-camera-video {display:block;width:100%;max-height:320px;background:#141824;border-radius:12px;object-fit:contain}
.cleaner-camera-actions,.cleaner-background-controls {display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center}
.cleaner-background-controls {margin:12px 0;text-align:start}
.cleaner-background-controls label {flex:1 1 160px;min-width:0}
#cleaner-background-color {width:64px;padding:4px;cursor:pointer}
#cleaner-crop-canvas {background-color:#fff;background-image:conic-gradient(#e7eaf0 25%,transparent 0 50%,#e7eaf0 0 75%,transparent 0);background-size:20px 20px}

/* Account names remain readable without pushing header controls outside the page. */
body .profile-copy { min-width:0; max-width:200px; text-align:left; justify-items:start; }
body .profile-copy strong, body .profile-copy > span { overflow-wrap:anywhere; white-space:normal; text-align:left; }
body .profile .avatar { flex:0 0 44px; }
body .top-actions, body .profile-menu-wrap, body .profile { min-width:0; max-width:100%; }
@media (min-width:861px) and (max-width:1180px) { body .topbar { grid-template-columns:minmax(0,1fr); } }

body[data-page="operations"] .toolbar { display:flex; flex-wrap:wrap; }
body[data-page="operations"] .toolbar > input { flex:2 1 200px; min-width:0; width:auto; }
body[data-page="operations"] .toolbar > select { flex:1 1 160px; min-width:0; width:auto; }
/* Personal language selector in Add/Edit Cleaner; independent of workspace language. */
.cleaner-language { position: relative; min-width: 0; }
.cleaner-language #cleaner-locale-trigger { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:42px; padding:9px 12px; border:1px solid #d9e2ef; border-radius:10px; background:#fff; color:#141824; }
.cleaner-language #cleaner-locale-value { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:700; }
.cleaner-language img { flex:none; border-radius:2px; object-fit:cover; }
.cleaner-language #cleaner-locale-options { position:absolute; top:calc(100% + 6px); inset-inline:0; z-index:50; max-height:320px; overflow:auto; padding:5px; border:1px solid #e7eaf0; border-radius:12px; background:#fff; box-shadow:0 8px 24px rgba(16,24,40,.12); }
.cleaner-language #cleaner-locale-options[hidden] { display:none; }
.cleaner-language #cleaner-locale-options button { display:flex; align-items:center; justify-content:flex-start; width:100%; gap:9px; min-height:38px; padding:8px 12px; border:0; border-radius:8px; background:#fff; color:#141824; font-size:13px; font-weight:700; }
.cleaner-language #cleaner-locale-options button:hover,
.cleaner-language #cleaner-locale-options button[aria-selected="true"] { background:#fff1e8; }
.cleaner-language button:focus-visible { outline:2px solid #ff6b00; outline-offset:-2px; }
